soc_app/src/views/menu/iot/alarmCenter/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%;">
        <template #right-icon v-if="info.time">
          <van-tag v-if="info.endTime">告警结束</van-tag>
          <van-tag v-else type="danger">正在告警</van-tag>
        </template>
      </van-cell>
      <van-cell title="所属机构" :value="info.orgName" />
      <van-cell title="告警分类" :value="dataTypeText"></van-cell>
      <van-cell title="告警类型" :value="info.sourceTypeDes"></van-cell>
      <van-cell title="告警开始时间" :value="renderTime(info.time)"></van-cell>
      <van-cell title="告警结束时间" :value="renderTime(info.endTime)"></van-cell>
      <van-cell title="持续时长" :value="durationText" />
      <van-cell title="告警值" :value="valueText" />
      <van-cell title="告警内容" :value="info.content" />
    </van-cell-group>
  </div>
</template>
<script>
import { detail } from '@/api/iot/alarmCenter.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分')
    },
    dataTypeText() {
      if (!this.info || this.info.dataType == null) {
        return ''
      }

      if (this.info.dataType == '0') {
        return '动环类告警'
      } else if (this.info.dataType == '1') {
        return '视频类告警'
      } else {
        return '未知'
      }
    },
    durationText() {
      let endTime = this.info.endTime ? this.info.endTime : new Date()

      let minutes = dayjs(endTime).diff(this.info.time, 'minute')
      if (minutes < 1) {
        return dayjs(endTime).diff(this.info.time, 'second') + '秒'
      } else {
        return durationText(minutes)
      }
    },
    
    valueText() {
      if (!this.info || this.info.valueText == null) {
        return ''
      }

      return `${this.info.valueText}${this.info.alarmValue ? this.info.alarmValue : ''}`
    }
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      detail(this.search.sensorId).then(r => {
        this.info = r.data
      })
    },
    renderTime(dateTime) {
      if (!dateTime) {
        return ''
      }

      return dayjs(dateTime).format('YYYY年M月D日H时m分')
    },
  }
}
</script>
<style lang="scss" scoped>
.cell-title-value {
  display: none;
}
.detail {
  margin: 15px;
}
.cell-gather-alarm-value {
  color: #ee0a24;
}
</style>