迁移视频监控

2021-12-16 17:27:39 +08:00
parent 6ed973c0fc
commit 7966b3f9f4
16 changed files with 4 additions and 3327 deletions
--- a/src/apps/AppVideoSurveillance/AppVideoSurveillance.vue
+++ b/src/apps/AppVideoSurveillance/AppVideoSurveillance.vue
@@ -0,0 +1,142 @@
+<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>