dvcp_v2_wxcp_app/src/apps/AppVideoSurveillance/AppVideoSurveillance.vue

<template>
  <section class="videoSurveillance">
    <AiTopFixed>
      <div class="header" flex>
        <div flex v-for="(node,i) in nodes" :key="i">
          <div :class="{current:isCurrent(i)}" v-text="node.nodeName" @click="gotoNode(node,i)"/>
          <u-icon v-if="!isCurrent(i)" name="arrow-right" color="#ddd"/>
        </div>
      </div>
    </AiTopFixed>
    <div class="list">
      <div class="item" v-for="row in monitors" :key="row.nodeId" :class="{online:!row.online}">
        <template v-if="!!row.deviceId">
          <img src="../../pages/resourcesManage/img/video-img.png" alt="" class="videoIcon" @click="showMonitor(row)">
          <div class="area-name" v-text="row.deviceName" @click="showMonitor(row)"/>
          <div class="deviceStatus" v-text="!row.online?'在线':'离线'" @click="showMonitor(row)"/>
        </template>
        <template v-else>
          <div class="area-name" v-text="row.nodeName" @click="getMore(row)"/>
          <u-icon name="arrow-right" color="#ddd" @click="getMore(row)"/>
        </template>
      </div>
    </div>
  </section>
</template>
<script>

export default {
  name: "videoSurveillance",
  appName: "视频监控",
  data() {
    return {
      nodes: [
        {nodeName: "首页"}
      ],
      monitors: []
    }
  },
  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)
    },
    showMonitor(row) {
      uni.navigateTo({url: `./monitorDetail?id=${row.deviceId}`})
    },
    isCurrent(index) {
      return index == Math.max(this.nodes?.length - 1, 0)
    },
    gotoNode(node, index) {
      this.nodes.splice(index + 1)
      this.getMonitors(node.nodeId)
    }
  },
  created() {
    this.getMonitors()
  }
}
</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 {
      width: 100%;
      height: 104px;
      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;
      }
    }
  }
}
</style>