zgty-mas-m/pages/analysis/auncel/auncel-select.vue

<template>
  <view>
    <navbar-back title="选择天平"></navbar-back>

    <u-grid :col="3" @click="click">
      <u-grid-item v-for="(auncel, index) in auncelList" :index="index" :key="index">
        <view
          style="
            height: 180px;
            width: 180px;
            background-image: url(../../static/images/auncel.png);
            background-repeat: no-repeat;
            background-size: 100%;
          "
        >
          <view style="height: 100px">
            <view style="padding-top: 20px; text-align: center; font-size: 20rpx"
              ><text>{{ auncel.code }}</text></view
            >
            <view style="padding-top: 5px; text-align: center"
              ><text>{{ auncel.controlRealName }}</text></view
            >
          </view>
          <view class="weight">
            <view
              :class="
                auncel.weightStable == 0
                  ? 'weight-data-yellow'
                  : auncel.weightStable == 1
                  ? 'weight-data'
                  : 'weight-data-warning'
              "
            >
              {{ auncel.weightData }}
            </view>
            <view class="weight-unit">{{ auncel.weightUnit }}</view>
          </view>
        </view>
      </u-grid-item>
    </u-grid>
  </view>
</template>

<script>
export default {
  data() {
    return {
      auncelList: [],
      currentAuncel: '',
      currentTaskNo: '',
      currentTaskType: ''
    }
  },
  onLoad(param) {
    this.currentTaskNo = param.currentTaskNo
    this.currentTaskType = param.currentTaskType
    //获取数据
    this.getPageData()
    console.log('onLoad')
  },
  onShow() {
    console.log('onShow')
    // #ifdef H5
    //注册websocket
    let regData = {
      msgId: this.$helper.uuid(),
      cmd: 'register',
      clientType: 'caaClient',
      data: {
        userId: this.userInfo.user_id,
        tenantId: this.userInfo.tenant_id,
        userRealName: this.userInfo.real_name
      }
    }
    this.$measure.setRegData(JSON.stringify(regData))
    this.$measure.reOpen()
    // #endif
    //监听websocket返回来的数据
    //设备数据
    uni.$on('deviceData', res => {
      switch (res.deviceType) {
        case 'auncel':
          this.auncelList.forEach((item, index) => {
            if (item.id === res.deviceId) {
              item.weightData = res.weightData
              item.weightUnit = res.weightUnit
              item.weightStable = res.weightStable
              item.isConnected = 1
              item.controlRealName = res.controlRealName
            }
          })
          break
        default:
          break
      }
    })
    //设备状态
    uni.$on('deviceStatus', res => {
      this.auncelList.forEach((item, index) => {
        if (item.id === res.deviceId) {
          item.isConnected = res.connected
          if (res.connected == 0) {
            item.weightData = '天平断开'
            item.weightUnit = ''
            item.weightStable = 0
          }
        }
      })
    })
    //连接断开
    uni.$on('connClose', res => {
      //重置
      this.auncelList.forEach(i => {
        i.weightData = ''
        i.weightUnit = ''
        i.weightStable = 0
        i.controlRealName = ''
        i.isConnected = 0
      })
    })
  },
  onHide() {
    console.log('onHide')
    //移除监听websocket返回来的数据
    uni.$off('deviceData')
    uni.$off('deviceStatus')
    uni.$off('connClose')
  },
  methods: {
    getPageData() {
      //显示loading
      uni.showLoading({
        title: '加载中...'
      })
      //获取计量点数量
      this.$u.api
        .getDeviceLaboratoryListBy({
          deviceType: 'auncel',
          pageNo: 0,
          pageSize: -1,
          status: '1',
          isEnable: '1'
        })
        .then(res => {
          let dataList = res.result.records
          dataList.forEach(i => {
            i.weightData = ''
            i.weightUnit = ''
            i.isConnected = 0
            i.weightStable = 0
            i.temperature = 0
            i.humidity = 0
            i.controlRealName = ''
          })
          this.auncelList = dataList
          uni.hideLoading()
        })
        .catch(err => {
          uni.hideLoading()
          console.log(err)
        })
    },
    click(index) {
      // this.$refs.uToast.show({
      //     title: `点击了第${index + 1}宫格`,
      //     type: 'warning'
      // });
      console.log(this.auncelList[index])
      this.currentAuncel = this.auncelList[index]
      if (this.currentAuncel.isConnected != 1) {
        this.$helper.showToast({
          title: '天平设备尚未连接！'
        })
        return
      }
      if (this.currentAuncel.controlRealName && this.currentAuncel.controlRealName != this.userInfo.real_name) {
        this.$helper.showToast({
          title: '当前天平正被“' + this.currentAuncel.controlRealName + '”使用，请选择其他天平！'
        })
        return
      }
      //发送控制请求
      let controlDevice = {
        msgId: this.currentAuncel.id,
        cmd: 'controlDevice',
        clientType: 'caaClient',
        data: {
          deviceId: this.currentAuncel.id,
          isControl: true,
          controlRealName: this.userInfo.real_name
        }
      }
      //发送控制数据
      this.$measure.send(JSON.stringify(controlDevice))
      uni.redirectTo({
        url:
          '/pages/auncel/auncel-weigh?currentTaskNo=' +
          this.currentTaskNo +
          '&currentTaskType=' +
          this.currentTaskType +
          '&currentAuncelId=' +
          this.currentAuncel.id +
          '&currentAuncelName=' +
          this.currentAuncel.name +
          '&currentAuncelCode=' +
          this.currentAuncel.code
      })
    }
  }
}
</script>

<style>
.weight {
  width: 180px;
  height: 40px;
  padding: 0 10px;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
}
.weight-data {
  flex-grow: 1;
  height: 100%;
  color: #4cd964;
  text-align: right;
  line-height: 40px;
  letter-spacing: 2px;
  font-size: 32px;
  font-family: zzjc-lcd;
}
.weight-data-yellow {
  flex-grow: 1;
  height: 100%;
  color: #ffff00;
  text-align: right;
  line-height: 40px;
  letter-spacing: 2px;
  font-size: 32px;
  font-family: zzjc-lcd;
}
.weight-data-warning {
  flex-grow: 1;
  height: 100%;
  color: #ff3333;
  text-align: right;
  line-height: 40px;
  font-size: 32px;
  font-family: zzjc-lcd;
}
.weight-unit {
  color: #ffffff;
  font-size: 24px;
  line-height: 40px;
  padding-left: 10px;
}
</style>