dvcp_v2_wechat_app/src/mods/AppVideoSurve/AppVideoSurve.vue

<template>
  <section class="videoSurveillance">
    <div class="area-content">
      <AiAreaPicker class="ai-area" :value="areaId" :areaId="areaId" :name.sync="areaName" @select="areaSelect">
        <div class="ai-area__wrapper">
          <span class="label" v-if="areaName">{{ areaName }}</span>
          <span v-else>请选择</span>
          <u-icon name="arrow-down" color="#666" size="24"></u-icon>
        </div>
      </AiAreaPicker>
    </div>

    <div class="num-content">
      <div class="item">
        <h3>{{ count.online || 0 }}</h3>
        <p>在线设备</p>
      </div>
      <div class="item">
        <h3>{{ count.sum - count.online || 0 }}</h3>
        <p>离线</p>
      </div>
      <div class="item">
        <h3>{{ onlineRate * 100 || 0 }}%</h3>
        <p>在线率</p>
      </div>
    </div>

    <div class="list-content">
      <div class="item" v-for="(item, index) in list" :key="index" @click="showMonitor(item)">
        <img class="img" :src="item.indexUrl" alt="" v-if="item.deviceStatus == 1" />
        <img class="img" src="../../static/AppVideoSurve/offline.png" alt="" v-else />
        <p>{{ item.name }}</p>
        <img class="icon" src="../../static/AppVideoSurve/play-icon.png" alt="" v-if="item.deviceStatus == 1" />
        <img class="icon" src="../../static/AppVideoSurve/not-play-icon.png" alt="" v-else />
      </div>
      <AiEmpty v-if="!list.length" />
    </div>
  </section>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'AppVideoSurve',
  appName: '视频监控',
  data() {
    return {
      nodes: [{ nodeName: '首页' }],
      monitors: [],

      areaId: '',
      areaName: '',
      list: [],
      count: {},
      Echart: null,
      onlineRate: '',
      offlineRate: '',
    }
  },
  computed: { ...mapState(['user']) },
  onLoad() {},
  onShow() {
    this.areaId = this.$areaId
    this.areaName = this.$areaName
    this.getList()
  },
  methods: {
    getMonitors(nodeId, queryType = 0) {
      this.monitors = []
      this.$instance
        .post('/app/appzyvideoequipment/getTree', {
          nodeId,
          queryType,
        })
        .then((res) => {
          if (res?.data) {
            this.monitors = JSON.parse(res.data)?.[queryType == 0 ? 'node' : 'device'] || []
          }
        })
    },
    getMore(row) {
      this.nodes.push(row)
      this.getMonitors(row.nodeId, row.hasChild == 1 ? 0 : 1)
    },
    isCurrent(index) {
      return index == Math.max(this.nodes?.length - 1, 0)
    },
    gotoNode(node, index) {
      this.nodes.splice(index + 1)
      this.getMonitors(node.nodeId)
    },
    getList() {
      this.$instance.post(`/app/appzyvideoequipment/getAreaEquipment?areaId=${this.areaId}`).then((res) => {
        if (res?.data) {
          this.list = res.data.list
          this.count = res.data.count
          this.onlineRate = (this.count.online / this.count.sum).toFixed(2)
          this.offlineRate = (1 - this.onlineRate).toFixed(2)
        }
      })
    },
    areaSelect(e) {
      this.areaId = e
      this.getList()
    },
    showMonitor(row) {
      if (row.deviceStatus != 1) return
      uni.navigateTo({ url: `./monitorDetail?id=${row.id}` })
    },
  },
}
</script>

<style lang="scss" scoped>
.videoSurveillance {
  background: #fff;
  padding: 0 32px;
  .area-content {
    .ai-area {
      .ai-area__wrapper {
        padding: 28px 0;
        .label {
          font-size: 40px;
          font-weight: 600;
        }

        .u-icon {
          margin-left: 6px;
        }
      }
    }
  }

  .num-content {
    // width: calc(100% - 40px);
    height: 164px;
    background: #eee;
    border-radius: 16px;
    margin: 32px 0 0 0;
    display: flex;

    .item {
      flex: 1;
      text-align: center;
      position: relative;

      .monitor-icon {
        width: 48px;
        height: 48px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -24px;
        margin-top: -24px;
      }

      h3 {
        font-size: 44px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333;
        line-height: 60px;
        margin-top: 32px;
      }

      p {
        font-size: 28px;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #666;
        line-height: 40px;
      }
    }
  }

  .list-content {
    width: 100%;
    padding: 38px 0 0 0;
    box-sizing: border-box;
    overflow: hidden;

    .item {
      display: inline-block;
      width: calc(50% - 36px);
      // margin-right: 36px;
      border-radius: 16px;
      position: relative;
      margin-bottom: 32px;
      vertical-align: top;

      .img {
        width: 100%;
        height: 218px;
        margin-bottom: 8px;
        border-radius: 16px;
      }

      p {
        width: 100%;
        font-size: 34px;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #333;
        line-height: 48px;
        word-break: break-all;
      }

      .icon {
        width: 40px;
        height: 48px;
        position: absolute;
        top: 84px;
        left: 158px;
      }
    }
    .item:nth-child(2n + 0) {
      margin-left: 36px;
    }
  }
}
</style>