From af67ad1055bff8d8f24c17010881283bce211227 Mon Sep 17 00:00:00 2001
From: liuye <liuye@sinoecare.com>
Date: Wed, 22 Dec 2021 18:15:08 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=E7=9B=91=E6=8E=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AppVideoSurveillance.vue                  | 129 +++++++++++++++---
 .../AppVideoSurveillance/img/monitor-icon.png | Bin 0 -> 1673 bytes
 2 files changed, 109 insertions(+), 20 deletions(-)
 create mode 100644 src/apps/AppVideoSurveillance/img/monitor-icon.png

diff --git a/src/apps/AppVideoSurveillance/AppVideoSurveillance.vue b/src/apps/AppVideoSurveillance/AppVideoSurveillance.vue
index 2915dd85..070b7d37 100644
--- a/src/apps/AppVideoSurveillance/AppVideoSurveillance.vue
+++ b/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;
+      }
     }
   }
 
diff --git a/src/apps/AppVideoSurveillance/img/monitor-icon.png b/src/apps/AppVideoSurveillance/img/monitor-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..2b146a8d597bb2f409924201dc1019c4c365bdb3
GIT binary patch
literal 1673
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
Tb^3ne00000NkvXXu0mjf*YzA&

literal 0
HcmV?d00001