dvcp_v2_wxcp_app/library/apps/AppIntelligentSecurity/AppIntelligentSecurity.vue

<template>
  <section class="videoSurveillance">
    <AiTopFixed>
      <div class="area-content">
        <AiAreaPicker :areaId="user.areaId" v-model="areaId" @select="getList" :name.sync="areaName" selectRoot>
          <img src="./img/local-icon.png" alt="">
          <span class="label" v-if="areaName">{{ areaName }}</span>
          <span v-else>请选择</span>
          <u-icon name="arrow-down" color="#666" size="24" />
        </AiAreaPicker>
      </div>
    </AiTopFixed>
    <div class="num-content">
      <!-- <img src="./img/on-icon.png" alt="">在线 {{count.online || 0}}
      <img src="./img/off-icon.png" alt="" class="mar-l40">离线 {{count.sum - count.online || 0}} -->
      <div class="item">
        <div id="echarts" style="width:100%;height:100%;"></div>
        <img src="./img/monitor-icon.png" alt="" class="monitor-icon">
      </div>
      <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>{{ onlineRateNum || 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 || coverImg" alt="" v-if="item.deviceStatus == 1">
        <img class="img" src="./img/offline.png" alt="" v-else>
        <p>{{ item.name }}</p>
        <img class="icon" src="./img/play-icon.png" alt="" v-if="item.deviceStatus == 1">
        <img class="icon" src="./img/not-play-icon.png" alt="" v-else>
        <div class="item-bottom">设备{{ item.deviceStatus === '1' ? '在线' : '离线' }}</div>
      </div>
      <AiEmpty v-if="!list.length" />
    </div>
  </section>
</template>
<script>
import echarts from 'echarts'
import {mapState} from 'vuex'

export default {
  name: "AppIntelligentSecurity",
  appName: "视频监控",
  data() {
    return {
      nodes: [
        {nodeName: "首页"}
      ],
      monitors: [],
      coverImg: require('./img/cover-img.png'),
      areaId: '',
      areaName: '',
      list: [],
      count: {},
      Echart: null,
      onlineRate: '',
      onlineRateNum: 0,
      offlineRate: ''
    }
  },
  computed: {...mapState(['user'])},
  methods: {
    getMonitors(nodeId, queryType = 0) {
      this.monitors = []
      this.$http.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.$http.post(`/app/appzyvideoequipment/getAreaEquipment?areaId=${this.areaId || this.user.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.onlineRateNum = parseInt(this.onlineRate * 100)
          this.offlineRate = (1 - this.onlineRate).toFixed(2)
          this.initEchart()
        }
      })
    },
    showMonitor(row) {
      if (row.deviceStatus != 1) return
      uni.navigateTo({url: `./monitorDetail?id=${row.id}`})
    },
    initEchart() {
      var option = {
        series: [
          {
            type: 'pie',
            radius: ['50%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: this.onlineRate},
              {value: this.offlineRate},
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              normal: {
                color: function (params) {
                  //自定义颜色
                  var colorList = ['#3192F4', '#ccc',];
                  return colorList[params.dataIndex]
                }
              }
            }
          }
        ]
      };

      option && this.Echart.setOption(option)
    },
  },
  created() {
    this.areaId = this.user.areaId
    this.areaName = this.user.areaName
  },
  onShow() {
    document.title = '智慧安防'
    this.getList()
  },
  mounted() {
    this.Echart = echarts.init(document.getElementById('echarts'))
  }
}
</script>
<style lang="scss" scoped>
.videoSurveillance {
  ::v-deep .placeholder {
    margin-bottom: 8px;
  }

  .header {
    color: #666;

    .current {
      color: #4E8EEE;
    }
  }

  .list {
    padding-left: 32px;
    background: #FFF;


    .item {
      position: relative;
      width: 100%;
      border-bottom: 1px solid #DDD;
      padding: 0 32px 0 0;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      &.online {
        .videoIcon {
          filter: none;
        }

        .deviceStatus {
          color: #4E8EEE;
          background: #E7F1FD;
        }
      }

      .videoIcon {
        width: 48px;
        height: 32px;
        margin-right: 8px;
        filter: grayscale(100%);
      }

      .area-name {
        font-size: 34px;
        font-weight: 500;
        color: #333;
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .deviceStatus {
        margin-left: 8px;
        height: 22px;
        padding: 0 8px;
        line-height: 22px;
        font-size: 13px;
        color: #666;
        background: #E9E9E9;
      }

      &:last-of-type {
        border-bottom: none;
      }
    }
  }

  .area-content {
    display: inline-block;
    width: 100%;
    line-height: 64px;

    img {
      width: 42px;
      vertical-align: middle;
      margin-right: 16px;
    }

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

  .num-content {
    width: calc(100% - 40px);
    height: 164px;
    background: #EEE;
    border-radius: 16px;
    margin: 32px 0 0 20px;
    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 20px;
    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;

      .item-bottom {
        position: absolute;
        top: 218px;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 60px;
        line-height: 60px;
        text-align: center;
        color: #fff;
        font-size: 28px;
        background: rgba(0, 0, 0, 0.6);
        transform: translateY(-100%);
        border-radius: 0 0 16px 16px;
      }

      .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;
      }
    }
  }
}
</style>