视频监控

src/mods/AppVideoSurve/AppVideoSurve.vue

@@ -1,57 +1,41 @@
 <template>
-  <div class="videoSurve">
-    <div class="top">
-      <AiAreaPicker ref="area" class="ai-area" :value="areaId" :name.sync="areaName" :areaId="$areaId" @select="areaSelect">
+  <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-right"></u-icon> -->
+          <u-icon name="arrow-down" color="#666" size="24"></u-icon>
         </div>
       </AiAreaPicker>
+    </div>
 
-      <div class="msgs">
-        <div class="item">
-          <span class="tag"></span>
-          <span class="hint">设备总数</span>
-          <span class="num">50</span>
-        </div>
-
-        <div class="item">
-          <span class="tag"></span>
-          <span class="hint">在线率</span>
-          <span class="num">68%</span>
-        </div>
-
-        <div class="item">
-          <span class="tag"></span>
-          <span class="hint">在线设备</span>
-          <span class="num">34</span>
-        </div>
-
-        <div class="item">
-          <span class="tag"></span>
-          <span class="hint">离线设备</span>
-          <span class="num">16</span>
-        </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="middle">
-      <div class="nav">设备列表</div>
-
-      <div class="imgs">
-        <div class="items">
-          <img src="../../static/img/avatar.png" alt="" />
-          <span class="hint">11</span>
-        </div>
-
-        <div class="items">
-          <img src="../../static/img/avatar.png" alt="" />
-          <span class="hint">11</span>
-        </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>
-  </div>
+  </section>
 </template>
 
 <script>
@@ -60,39 +44,79 @@ import { mapState } from 'vuex'
 export default {
   name: 'AppVideoSurve',
   appName: '视频监控',
-  components: {},
-  props: {},
   data() {
     return {
+      nodes: [{ nodeName: '首页' }],
+      monitors: [],
+
       areaId: '',
-      $areaId: '',
       areaName: '',
+      list: [],
+      count: {},
+      Echart: null,
+      onlineRate: '',
+      offlineRate: '',
     }
   },
-  computed: {
-    ...mapState(['user']),
-  },
-  watch: {},
-  onLoad() {
+  computed: { ...mapState(['user']) },
+  onLoad() {},
+  onShow() {
     this.areaId = this.$areaId
     this.areaName = this.$areaName
+    this.getList()
   },
-  onShow() {},
   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) {
-      console.log(e)
+      this.areaId = e
+      this.getList()
+    },
+    showMonitor(row) {
+      if (row.deviceStatus != 1) return
+      uni.navigateTo({ url: `./monitorDetail?id=${row.id}` })
     },
   },
 }
 </script>
 
-<style scoped lang="scss">
-.videoSurve {
-  height: 100%;
-  .top {
-    padding: 0 32px;
-    background: #58657e;
-    color: #fff;
+<style lang="scss" scoped>
+.videoSurveillance {
+  background: #fff;
+  padding: 0 32px;
+  .area-content {
     .ai-area {
       .ai-area__wrapper {
         padding: 28px 0;
@@ -100,71 +124,97 @@ export default {
           font-size: 40px;
           font-weight: 600;
         }
-      }
-    }
 
-    .msgs {
-      display: flex;
-      flex-wrap: wrap;
-      padding: 8px 0 32px 0;
-      .item {
-        margin-top: 24px;
-        .tag {
-          display: inline-block;
-          width: 8px;
-          height: 8px;
-          vertical-align: middle;
-          margin-right: 8px;
-          background: #fff;
-          border-radius: 50%;
+        .u-icon {
+          margin-left: 6px;
         }
-        .hint {
-          font-size: 28px;
-        }
-        .num {
-          font-size: 28px;
-          font-weight: 500;
-          margin-left: 32px;
-        }
-      }
-      .item:nth-child(2n + 1) {
-        width: 45%;
-      }
-      .item:nth-child(2n) {
-        width: 55%;
       }
     }
   }
 
-  .middle {
-    padding: 0 32px;
-    .nav {
-      padding: 48px 0 32px 0;
-      font-size: 38px;
-      font-weight: 600;
-    }
+  .num-content {
+    // width: calc(100% - 40px);
+    height: 164px;
+    background: #eee;
+    border-radius: 16px;
+    margin: 32px 0 0 0;
+    display: flex;
 
-    .imgs {
-      display: flex;
-      flex-wrap: wrap;
-      .items {
-        width: 49%;
-        margin-top: 24px;
-        img {
-          width: 100%;
-          height: 188px;
-        }
-        .hint {
-          margin-top: 8px;
-        }
+    .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;
       }
-      .items:nth-child(2n + 1) {
-        margin-right: 2%;
+
+      h3 {
+        font-size: 44px;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        color: #333;
+        line-height: 60px;
+        margin-top: 32px;
       }
-      .items:nth-child(-n + 2) {
-        margin-top: 0;
+
+      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>

src/mods/AppVideoSurve/monitorDetail.vue

@@ -0,0 +1,92 @@
+<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: {},
+      width: '',
+      height: '',
+    }
+  },
+  onLoad(params) {
+    this.getDetail(params.id)
+  },
+  onShow() {
+    this.$nextTick(() => {
+      this.detectOrient()
+    })
+  },
+  methods: {
+    getDetail(deviceId) {
+      deviceId &&
+        this.$instance
+          .post('/app/appzyvideoequipment/getWebSdkUrl', null, {
+            params: { deviceId },
+          })
+          .then((res) => {
+            if (res?.data) {
+              this.monitor = JSON.parse(res.data)
+            }
+          })
+    },
+
+    detectOrient() {
+      uni.onWindowResize((res) => {
+        this.width = res.size.windowWidth
+        this.height = res.size.windowHeight
+        console.log('变化后的窗口宽度=' + res.size.windowWidth)
+        console.log('变化后的窗口高度=' + res.size.windowHeight)
+      })
+      // var width = document.querySelector('.monitorDetail').clientWidth
+      // var height = document.querySelector('.monitorDetail').clientHeight
+      if (this.width >= this.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`,
+        }
+      }
+    },
+  },
+}
+</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>