迁移视频监控

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>

src/apps/AppVideoSurveillance/monitorDetail.vue

@@ -0,0 +1,85 @@
+<template>
+  <section class="monitorDetail">
+    <div class="videoBox">
+      <iframe ref="monitorIns" :style="style" :src="monitor.url" allow="autoplay *; microphone *; fullscreen *"
+              allowfullscreen allowtransparency allowusermedia frameBorder="no"/>
+    </div>
+  </section>
+</template>
+
+<script>
+
+export default {
+  name: "monitorDetail",
+  data() {
+    return {
+      style: {},
+      monitor: {}
+    }
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      this.detectOrient()
+    })
+  },
+
+  methods: {
+    getDetail(deviceId) {
+      deviceId && this.$http.post("/app/appzyvideoequipment/getWebSdkUrl", null, {
+        params: {deviceId}
+      }).then(res => {
+        if (res?.data) {
+          this.monitor = JSON.parse(res.data)
+        }
+      })
+    },
+
+    detectOrient() {
+      var width = document.querySelector('.monitorDetail').clientWidth
+      var height = document.querySelector('.monitorDetail').clientHeight
+      if (width >= height) { // 竖屏
+        this.style = {
+          width: '100%',
+          height: '100%',
+          transform: 'rotate(0eg)',
+          transformOrigin: `0 0`
+        }
+      } else {
+        this.style = {
+          width: height + 'px',
+          height: width + 'px',
+          transform: 'rotate(90deg)',
+          transformOrigin: `${width / 2}px ${width / 2}px`
+        }
+      }
+    }
+  },
+  onLoad(params) {
+    this.getDetail(params.id)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.monitorDetail {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100vw;
+  height: 100vh;
+  background: #000;
+  color: #fff;
+
+  .videoBox {
+    width: 100vw;
+    height: 100vh;
+
+    iframe {
+
+    }
+  }
+}
+</style>