labsop_mcs/frontend_lock/src/pages/index/index.vue

<!--
 * @Author: your name
 * @Date: 2021-02-19 11:59:48
 * @LastEditTime: 2021-03-12 14:50:23
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \intelligentLock\src\pages\index\index.vue
-->
<template>
  <view class="page">
    <!-- <view>
      <AtNavBar :onClickLeftIcon="handleClick.bind(this, '返回')"
                title="首页"
                leftIconType="chevron-left"
                color='#646464' />
    </view> -->
    <view class="detail">
      <view class="detailTop">
        <view class="hospitalName">山东省立医院</view>
        <view class="line"></view>
      </view>
      <view class="deviceBox">
        <view class="deviceBoxItem"> <text class="deviceText">{{all}}</text></view>
        <view class="deviceBoxItem"><text class="deviceText">{{online}}</text></view>
        <view class="deviceBoxItem"><text class="deviceText">{{ofline}}</text></view>

      </view>
    </view>
    <!-- 设备 -->
    <view class="device">
      <view class="panel">
        <view class="panel__content">
          <AtTabs :current="currentTab"
                  :tabList="tabList"
                  :onClick="handleClick.bind(this, 'currentTab')"
                  class="deviceTab">
            <AtTabsPane :current="currentTab"
                        :index="0">
              <view class="tab-content deviceList">
                <view class="deviceItem"
                      v-for="(item,index) in deviceList"
                      :key="index">
                  <AtCard class="deviceItemCard"
                          :title="item.title"
                          :onClick="deviceItemClick">
                    <view :class="[item.DState == 1 ? 'onOffLine': 
                          'offLine']">{{item.DState == 1?"在线" : "离线"}}</view>

                    <view class="humiture">
                      <!-- 温度 -->
                      <view v-if="displayTemp(item.DataItem)"
                            class="humitureItem temperature">{{item.Temp}}℃</view>
                      <!-- 湿度 -->
                      <view v-if="displayHum(item.DataItem)"
                            class="humitureItem">{{item.Hum}}%</view>
                      <!-- 智能锁 -->
                      <view v-if="displayDoor(item.DataItem)"
                            class="humitureItem imgBox">
                        <image class="img"
                               :src="slockPng" />
                      </view>
                    </view>
                    <!-- 时间 -->
                    <view class="time">
                      {{item.Time}}
                    </view>
                  </AtCard>
                </view>
              </view>

            </AtTabsPane>
            <AtTabsPane :current="currentTab"
                        :index="1">
              <view class="tab-content deviceList"
                    style="margin-left:7px">
                <view class="deviceItem"
                      v-for="(item,index) in deviceList"
                      v-show="item.DState == 1"
                      :key="index">
                  <AtCard class="deviceItemCard"
                          :title="item.title"
                          :onClick="deviceItemClick">
                    <view :class="[item.DState == 1 ? 'onOffLine': 
                          'offLine']">{{item.DState == 1?"在线" : "离线"}}</view>
                    <!-- <view class="deviceName"></view> -->
                    <!-- 温湿度 -->
                    <view class="humiture">
                      <view v-if="displayTemp(item.DataItem)"
                            class="humitureItem temperature">{{item.Temp}}℃</view>
                      <view v-if="displayHum(item.DataItem)"
                            class="humitureItem">{{item.Hum}}%</view>
                      <view v-if="displayDoor(item.DataItem)"
                            class="humitureItem imgBox">
                        <image class="img"
                               :src="slockPng" />
                      </view>
                    </view>
                    <!-- 时间 -->
                    <view class="time">
                      {{item.Time}}
                    </view>
                  </AtCard>
                </view>
              </view>
            </AtTabsPane>
            <AtTabsPane :current="currentTab"
                        :index="2">
              <view class="tab-content deviceList"
                    style="margin-left:15px">
                <view class="deviceItem"
                      v-for="(item,index) in deviceList"
                      v-show="item.DState == 2"
                      :key="index">
                  <AtCard class="deviceItemCard"
                          :title="item.title"
                          :onClick="deviceItemClick">
                    <view :class="[item.DState == 1 ? 'onOffLine': 
                          'offLine']">{{item.DState == 1?"在线" : "离线"}}</view>
                    <!-- <view class="deviceName"></view> -->
                    <!-- 温湿度 -->
                    <view class="humiture">
                      <view v-if="displayTemp(item.DataItem)"
                            class="humitureItem temperature">{{item.Temp}}℃</view>
                      <view v-if="displayHum(item.DataItem)"
                            class="humitureItem">{{item.Hum}}%</view>
                      <view v-if="displayDoor(item.DataItem)"
                            class="humitureItem imgBox">
                        <image class="img"
                               :src="slockPng" />
                      </view>
                    </view>
                    <!-- 时间 -->
                    <view class="time">
                      {{item.Time}}
                    </view>
                  </AtCard>
                </view>
              </view>
            </AtTabsPane>
          </AtTabs>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import './index.scss'
import slockPng from '../../assets/images/index/slock.png'
import { getchannels, datavalue } from "../../api/channels";
import { getOpenId } from '../../utils/cache'
export default {
  data () {
    return {
      slockPng,
      msg: '首页',
      openid: '',  //微信码
      currentPage: 1, // 分页
      size: 1000, // 分页
      currentItemCount: 0, // 分页
      currentTab: 0,
      tabList: [
        { title: '全部' },
        { title: '在线' },
        { title: '离线' }
      ],
      deviceList: [],
      all: 0, //全部设备数量
      online: 0, //在线备数量
      ofline: 0 //离线备数量
    }
  },
  created () {
    this.openid = getOpenId()
    this.getChannels()
  },
  onShow () { },
  onHide () { },
  methods: {
    handleClick (stateName, value) {
      this[stateName] = value
    },
    //获取所有设备
    getChannels () {
      const params = { _currentPage: this.currentPage, _size: this.size, openid: this.openid }
      getchannels(params)
        .then(res => {
          this.deviceList = res.items
          //全部设备数量
          this.all = this.deviceList.length
          this.loaddataall()
        }).catch(() => { })
    },
    //获取所有传感器信息
    loaddataall () {
      for (let i = 0; i < this.deviceList.length; i++) {
        this.loaddata(this.deviceList[i], i)
      }
      console.log('----_this.deviceListoffLine-----', _this.deviceListoffLine)
    },
    //赋传感器数据
    loaddata (code, k) {
      let _this = this
      datavalue(code.Serial)
        .then(res => {
          //在线设备统计
          if (res.DState == 1) {
            this.online = this.online + 1
          }
          //离线设备统计
          if (res.DState == 2) {
            this.ofline = this.ofline + 1
          }
          _this.deviceList[k].Temp = res.Temp
          _this.deviceList[k].Hum = res.Hum
          _this.deviceList[k].Vol = res.Vol
          _this.deviceList[k].Rssi = res.Rssi
          _this.deviceList[k].Time = res.Time
          _this.deviceList[k].O2 = res.O2
          _this.deviceList[k].Co2 = res.Co2
          _this.deviceList[k].Power = res.Power
          _this.deviceList[k].Supply = res.Supply
          _this.deviceList[k].DState = res.DState
          _this.deviceList[k].Signal = res.Signal
          _this.deviceList[k].Doorlock = res.Doorlock
        })
    },
    deviceItemClick () {
      console.log("设备详情点击---item",)
      this.$taro.navigateTo({
        url: '/pages/deviceDetail/index'
      })
    },
    displayTemp (val) {
      val = val + '';
      return val === '0' || val === '6' || val === '7' || val === '9' || val === '10'
    },
    displayHum (val) {
      val = val + '';
      return val === '0' || val === '7' || val === '9'
    },
    displayCO2 (val) {
      val = val + '';
      return val === '9' || val === '26'
    },
    displayO2 (val) {
      val = val + '';
      return val === '7' || val === '17'
    },
    displayPower (val) {
      val = val + '';
      return val === '13'
    },
    displayDoor (val) {
      val = val + '';
      return val === '31'
    },
  }
}
</script>