视频监控

src/apps/AppVideoSurveillance/AppVideoSurveillance.vue

@@ -1,14 +1,26 @@
 <template>
   <section class="videoSurveillance">
     <AiTopFixed>
-      <div class="header" flex>
+      <!-- <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> -->
+      <div class="area-content">
+        <AiAreaPicker :areaId="user.areaId" v-model="areaId" @select="areaSelect">
+          <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>
+      <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>
     </AiTopFixed>
-    <div class="list">
+    <!-- <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="`${$cdn}video/video-img.png`" alt="" class="videoIcon" @click="showMonitor(row)">
@@ -20,11 +32,20 @@
           <u-icon name="arrow-right" color="#ddd" @click="getMore(row)"/>
         </template>
       </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" alt="" v-if="item.deviceStatus == 1">
+        <img class="img" src="./img/offline.png" alt="" v-else>
+        <p>{{item.name}}</p>
+        <img class="icon" :src="item.deviceStatus == 1 ? './img/play-icon.png' : './img/not-play-icon.png'" alt="">
+      </div>
+      <AiEmpty v-if="!list.length"/>
     </div>
   </section>
 </template>
 <script>
-
+import { mapState } from 'vuex'
 export default {
   name: "videoSurveillance",
   appName: "视频监控",
@@ -33,9 +54,15 @@ export default {
       nodes: [
         {nodeName: "首页"}
       ],
-      monitors: []
+      monitors: [],
+
+      areaId: '',
+      areaName: '',
+      list: [],
+      count: {}
     }
   },
+  computed: { ...mapState(['user']) },
   methods: {
     getMonitors(nodeId, queryType = 0) {
       this.monitors = []
@@ -51,19 +78,38 @@ export default {
       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)
-    }
+    },
+
+    getList() {
+      this.$http.post(`/app/appzyvideoequipment/getAreaEquipment?areaId=${this.areaId}`).then(res => {
+        if (res.code == 0) {
+          this.list = res.data.list
+          this.count = res.data.count
+        }
+      })
+    },
+    areaSelect(e) {
+      this.areaId = e.id
+      this.areaName = e.name
+      this.getList()
+    },
+    showMonitor(row) {
+      if(row.deviceStatus != 1) return
+      uni.navigateTo({url: `./monitorDetail?id=${row.id}`})
+    },
   },
   created() {
-    this.getMonitors()
+    this.areaId = this.user.areaId
+    this.areaName = this.user.areaName
+    this.getList()
+    // this.getMonitors()
   }
 }
 </script>
@@ -138,5 +184,72 @@ export default {
       }
     }
   }
+
+  .area-content{
+    display: inline-block;
+    width: 45%;
+    line-height: 64px;
+    img{
+      width: 42px;
+      vertical-align: middle;
+      margin-right: 16px;
+    }
+    .u-icon{
+      margin-left: 6px;
+    }
+  }
+  .num-content{
+    display: inline-block;
+    width: 55%;
+    font-size: 34px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    color: #333;
+    line-height: 48px;
+    text-align: right;
+    img{
+      width: 48px;
+      margin-right: 16px;
+      vertical-align: bottom;
+    }
+    .mar-l40{
+      margin-left: 20px;
+    }
+  }
+
+  .list-content{
+    width: 100%;
+    padding: 38px 0 0 20px;
+    box-sizing: border-box;
+    overflow: hidden;
+    .item{
+      width: calc(50% - 36px);
+      margin-right: 36px;
+      border-radius: 16px;
+      position: relative;
+      float: left;
+      margin-bottom: 32px;
+      .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>