soc_app/src/views/menu/iot/envMonitor/detail.vue

<template>
  <div class="detail">
    <nav-bar></nav-bar>
    <van-cell-group>
      <van-cell :title="info.deviceName" value-class="cell-title-value" title-style="width:100%;">
      </van-cell>
      <van-cell title="上报时间" :value="stateUpdateTimeText" />
      <van-cell title="持续时长" :value="durationText" />
      <van-cell title="设备采集值" :value="gatherText" title-style="max-width:100px" :value-class="info.state==1?'cell-gather-alarm-value':''"/>
      <van-cell title="动环类型" :value="info.deviceTypeText" />
      <van-cell title="所属机构" :value="info.orgName" />
    </van-cell-group>
  </div>
</template>
<script>
import { detail } from '@/api/iot/donghuan.js'
import NavBar from '@/components/NavBar'
import dayjs from 'dayjs'
import {durationText} from "@/utils/date.js"
export default {
  data() {
    return {
      info: {},
      search: {
        sensorId: this.$route.query.id
      }
    }
  },
  components: { NavBar },
  computed: {
    stateUpdateTimeText() {
      if (this.info.stateUpdateTime == null) {
        return '未上报'
      }

      return dayjs(this.info.stateUpdateTime).format('YYYY年M月D日H时m分')
    },
    gatherText() {
      if (!this.info.infos) {
        return '未上报'
      }

      let array = JSON.parse(this.info.infos)
      if (array.length === 0) {
        return '未上报'
      }

      let text;
      switch (this.info.deviceType) {
        case '4183': //温湿度
          let temporary = array.find(i => i.name === '环境温度')
          if (temporary) {
            text = `温度：${temporary.val }${temporary.unit};`
          }

          let humidity = array.find(i => i.name === '环境湿度')
          if (humidity) {
            text += `湿度：${humidity.val}${humidity.unit};`
          }

          break
        case '4181': //红外
          text = `红外${(array[0].val == 0 ? '正常' : '告警')}`
          break
        case '4182': //烟感
          text = `烟感${array[0].val == 0 ? '正常' : '告警'}`
          break
        case '4184': //水浸，
          text = `水浸${array[0].val == 0 ? '正常' : '告警'}`
          break
        case '4160': //智能电表
          text = `智能电表${array[0].val == 0 ? '正常' : '告警'}`
          break
        case '41885': //燃气报警器
          text = `燃气${array[0].val == 0 ? '正常' : '告警'}`
          break
        case '4188': //门窗磁
          text = `门窗磁${array[0].val == 0 ? '关门' : '开门'}`
          break
        case '41881': //防盗
          text = `防盗${array[0].val == 0 ? '正常' : '告警'}`
          break
      }

      return text;
    },
    durationText() {
      if (!this.info.stateStartTime) {
        return '未上报'
      }

      let minutes =dayjs().diff(this.info.stateStartTime,'minute')
      return durationText(minutes);
    }
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      detail(this.search.sensorId).then(r => {
        this.info = r.data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.cell-title-value {
  display: none;
}
.detail {
  margin: 15px;
}
.cell-gather-alarm-value{
  color:#ee0a24;
}
</style>