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

<template>
  <div class="detail">
    <nav-bar></nav-bar>
    <card class="info">
      <div>{{ info.channelName }}</div>
    </card>
    <card>
      <van-cell-group>
        <van-cell
          title="实时视频质量"
          :value="info.quality ? getDictLabel(info.quality.quality, 'video_diagnosis_state', '未上报') : '未上报'"
          title-style="font-weight:700"
        />
        <van-cell
          v-if="info.quality != null && info.quality.quality != null"
          value-class="cell-quality-value"
          title-style="display:none"
        >
          <template #default>
            <div>诊断截图</div>
            <div class="quality-tags">
              <van-tag type="danger" v-if="info.quality.signalLost == 1">信号丢失</van-tag>
              <van-tag type="danger" v-if="info.quality.occlude == 1">遮挡</van-tag>
              <van-tag type="danger" v-if="info.quality.brightness == 1">亮度</van-tag>
              <van-tag type="danger" v-if="info.quality.colorCast == 1">偏色</van-tag>
              <van-tag type="danger" v-if="info.quality.snowflake == 1">雪花</van-tag>
              <van-tag type="danger" v-if="info.quality.stripe == 1">条纹</van-tag>
              <van-tag type="danger" v-if="info.quality.contrast == 1">对比度</van-tag>
              <van-tag type="danger" v-if="info.quality.blurry == 1">模糊</van-tag>
            </div>
            <van-image
              height="20vh"
              :src="info.quality.image"
              @click="
                () => {
                  showImage = true
                }
              "
            ></van-image>
            <van-image-preview v-model="showImage" :images="[info.quality.image]"></van-image-preview
          ></template>
        </van-cell>
      </van-cell-group>
    </card>
    <card v-if="!info.storage">
      <van-cell title="录像存储情况" value="未上报"  title-style="font-weight:700;"> </van-cell>
    </card>
    <card v-else>
      <van-cell-group>
        <van-cell title="录像存储情况"  title-style="font-weight:700;">
          <!-- <template #default>
            <van-tag type="success" v-if="info.storage.planDays === info.storage.realDays">正常</van-tag>
            <van-tag type="warning" v-else>异常</van-tag>
          </template> -->
        </van-cell>
        <van-cell title="计划存储天数" :value="`${info.storage.planDays}天`"></van-cell>
        <van-cell title="实际存储天数" :value="`${info.storage.realDays}天`"></van-cell>        
        <van-cell value-class="cell-calender-value" title-class="cell-calender-title">
          <template #title></template>
          <template #default>
            <calendar
              ref="calendar"
              :data="info.storage"
              :earlistDate="info.storage.earliestTime"
              :defaultSelectedDate="selectDate"
              @change="onChange"
            ></calendar>
          </template>
        </van-cell>
        <van-cell title="录像完整性" title-style="font-weight:500;"></van-cell>
        <van-cell title="日期" :value="dayjs(selectDate).format('YYYY年M月D日')" v-if="selectDate"
        ></van-cell>
        <van-cell title="丢失时长">
          <template #default>
            {{ integrity ? lostDurationText(integrity.loseDuration) : '未知' }}
          </template>
        </van-cell>
      </van-cell-group>
    </card>
  </div>
</template>
<script>
import KList from '@/components/list/index.vue'
import * as api from '@/api/iot/videoDiagnosis.js'
import Card from '@/components/card/index.vue'
import Calendar from './components/calender.vue'
import { getLabel } from '@/utils/optionEx'
import NavBar from '@/components/NavBar'
import { mapGetters } from 'vuex'
import dayjs from 'dayjs'
export default {
  data() {
    return {
      info: {},
      showImage:false,
      hostCode: this.$route.query.hostCode,
      channelCode: this.$route.query.channelCode,
      integrity: {},
      selectDate:null,
      dicts: ['video_diagnosis_state']
    }
  },
  components: { NavBar, KList, Card, Calendar },
  computed: {
    ...mapGetters(['dictionary'])
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    getLabel,
    getInfo() {
      api.detail(this.hostCode, this.channelCode).then(r => {
        this.info = r.data
        this.integrity = r.data.integrity
        if(r.data.integrity){
          this.selectDate=r.data.integrity.recordDate;
        }
      })
    },
    onChange(day) {
      this.selectDate = day
      api.integrity(this.hostCode, this.channelCode, dayjs(day).format('YYYY-MM-DD')).then(r => {
        this.integrity = r.data
      })
    },
    lostDurationText(duration) {
      if (!duration) {
        return '未丢失'
      }

      let str = ''
      let hour = Math.floor(duration / 60)
      if (hour > 0) {
        str += `${hour}小时`
      }

      let minute = duration % 60
      str += `${minute}分`
      return str
    }
  }
}
</script>
<style lang="scss" scoped>
.cell-quality-value {
  width: 100%;
}
.quality-tags{
  >span{
    margin-left:1vw;
  }

  >span:first-child{
    margin-left:0;
  }
}
.cell-calender-value {
  width: 100%;
}
.cell-calender-title {
  display: none;
}
.detail {
  margin: 15px;
}
// .info {
//   ::v-deep .van-cell__title {
//     max-width: 40%;
//   }
//   ::v-deep .van-cell__value {
//     max-width: 60%;
//   }
// }
</style>