视频监控

src/apps/AppVideoSurveillance/AppVideoSurveillance.vue

@@ -15,11 +15,27 @@
           <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="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 class="item">
+        <div id="echarts" style="width:100%;height:100%;"></div>
+        <img src="./img/monitor-icon.png" alt="" class="monitor-icon">
+      </div>
+      <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="list">
       <div class="item" v-for="row in monitors" :key="row.nodeId" :class="{online:!row.online}">
         <template v-if="!!row.deviceId">
@@ -46,6 +62,7 @@
   </section>
 </template>
 <script>
+import echarts from 'echarts'
 import { mapState } from 'vuex'
 export default {
   name: "AppVideoSurveillance",
@@ -60,7 +77,10 @@ export default {
       areaId: '',
       areaName: '',
       list: [],
-      count: {}
+      count: {},
+      Echart: null,
+      onlineRate: '',
+      offlineRate: ''
     }
   },
   computed: { ...mapState(['user']) },
@@ -93,6 +113,9 @@ export default {
         if (res.code == 0) {
           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)
+          this.initEchart()
         }
       })
     },
@@ -105,12 +128,59 @@ export default {
       if(row.deviceStatus != 1) return
       uni.navigateTo({url: `./monitorDetail?id=${row.id}`})
     },
+    initEchart() {
+      var option = {
+        series: [
+          {
+            type: 'pie',
+            radius: ['50%', '60%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: false,
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: this.onlineRate},
+              { value: this.offlineRate},
+            ],
+            itemStyle: {
+              emphasis: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+              },
+              normal:{
+                color:function(params) {
+                  //自定义颜色
+                  var colorList = ['#3192F4','#ccc',];
+                  return colorList[params.dataIndex]
+              }
+              }
+            }
+          }
+        ]
+      };
+
+      option && this.Echart.setOption(option)
+    },
   },
   created() {
+    
     this.areaId = this.user.areaId
     this.areaName = this.user.areaName
     this.getList()
     // this.getMonitors()
+  },
+  mounted() {
+    this.Echart = echarts.init(document.getElementById('echarts'))     
   }
 }
 </script>
@@ -188,7 +258,7 @@ export default {
 
   .area-content{
     display: inline-block;
-    width: 45%;
+    width: 100%;
     line-height: 64px;
     img{
       width: 42px;
@@ -200,20 +270,39 @@ export default {
     }
   }
   .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;
+    width: calc(100% - 40px);
+    height: 164px;
+    background: #EEE;
+    border-radius: 16px;
+    margin: 32px 0 0 20px;
+    display: flex;
+    .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;
+      }
+      h3{
+        font-size: 44px;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        color: #333;
+        line-height: 60px;
+        margin-top: 32px;
+      }
+      p{
+        font-size: 28px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #666;
+        line-height: 40px;
+      }
     }
   }