From 1aa94d3e5003519d213f833db18506d9ca2b4443 Mon Sep 17 00:00:00 2001
From: kerwincui <164770707@qq.com>
Date: Mon, 6 Jun 2022 17:45:16 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E5=A4=87=E7=BB=9F=E8=AE=A1=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue/src/api/iot/device.js              |  9 +++
 vue/src/assets/icons/svg/event-a.svg   |  2 +
 vue/src/assets/icons/svg/log-a.svg     |  2 +
 vue/src/assets/icons/svg/monitor-a.svg |  2 +
 vue/src/views/index.vue                | 85 +++++++++++++++-----------
 5 files changed, 64 insertions(+), 36 deletions(-)
 create mode 100644 vue/src/assets/icons/svg/event-a.svg
 create mode 100644 vue/src/assets/icons/svg/log-a.svg
 create mode 100644 vue/src/assets/icons/svg/monitor-a.svg

diff --git a/vue/src/api/iot/device.js b/vue/src/api/iot/device.js
index 633608e4..309236ee 100644
--- a/vue/src/api/iot/device.js
+++ b/vue/src/api/iot/device.js
@@ -34,6 +34,7 @@ export function listAllDeviceShort() {
         method: 'get',
     })
 }
+
 // 查询设备详细
 export function getDevice(deviceId) {
     return request({
@@ -42,6 +43,14 @@ export function getDevice(deviceId) {
     })
 }
 
+// 查询设备统计信息
+export function getDeviceStatistic() {
+    return request({
+        url: '/iot/device/statistic',
+        method: 'get'
+    })
+}
+
 // 查询设备运行状态详细
 export function getDeviceRunningStatus(deviceId) {
     return request({
diff --git a/vue/src/assets/icons/svg/event-a.svg b/vue/src/assets/icons/svg/event-a.svg
new file mode 100644
index 00000000..7faf66a0
--- /dev/null
+++ b/vue/src/assets/icons/svg/event-a.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1654508296100" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19419" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M942.102 904.571c-21.954 35.544-57.556 55.418-99.308 55.418H181.195c-41.752 0-77.35-19.874-99.3-55.418-21.945-35.544-23.78-76.303-5.111-113.685l330.8-662.296c20.324-40.686 58.976-64.597 104.411-64.597 45.448 0 84.095 23.91 104.411 64.597L947.21 790.886c18.673 37.382 16.838 78.142-5.108 113.685zM608 448H416c-17.673 0-32 14.327-32 32 0 17.673 14.327 32 32 32h192c17.673 0 32-14.327 32-32 0-17.673-14.327-32-32-32z m32 128H384c-17.673 0-32 14.327-32 32s14.327 32 32 32h256c17.673 0 32-14.327 32-32s-14.327-32-32-32z m32 128H352c-17.673 0-32 14.327-32 32s14.327 32 32 32h320c17.673 0 32-14.327 32-32s-14.327-32-32-32z" p-id="19420"></path></svg>
\ No newline at end of file
diff --git a/vue/src/assets/icons/svg/log-a.svg b/vue/src/assets/icons/svg/log-a.svg
new file mode 100644
index 00000000..6cdd85d7
--- /dev/null
+++ b/vue/src/assets/icons/svg/log-a.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1654508193767" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14819" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M310.857143 176.749714A134.107429 134.107429 0 0 0 444.964571 310.857143h134.070858A134.107429 134.107429 0 0 0 713.142857 176.749714h67.035429A134.107429 134.107429 0 0 1 914.285714 310.857143v469.321143A134.107429 134.107429 0 0 1 780.178286 914.285714H243.821714A134.107429 134.107429 0 0 1 109.714286 780.178286V310.857143a134.107429 134.107429 0 0 1 134.107428-134.107429H310.857143z m0 0h402.285714-402.285714z m234.678857 268.214857a33.536 33.536 0 1 0 0 67.035429h201.142857a33.536 33.536 0 0 0 0-67.035429h-201.142857z m0 201.142858a33.536 33.536 0 1 0 0 67.035428h201.142857a33.536 33.536 0 0 0 0-67.035428h-201.142857z m-220.781714-187.245715l-23.698286-23.734857a33.536 33.536 0 0 0-47.433143 47.433143l47.433143 47.396571a33.426286 33.426286 0 0 0 47.396571 0l94.829715-94.829714a33.536 33.536 0 1 0-47.433143-47.396571L324.754286 458.825143z m0 201.142857l-23.698286-23.734857a33.536 33.536 0 0 0-47.433143 47.433143l47.433143 47.396572a33.426286 33.426286 0 0 0 47.396571 0l94.829715-94.829715a33.536 33.536 0 1 0-47.433143-47.396571L324.754286 659.968zM444.964571 109.714286h134.070858a67.035429 67.035429 0 1 1 0 134.107428h-134.070858a67.035429 67.035429 0 0 1 0-134.107428z" p-id="14820"></path></svg>
\ No newline at end of file
diff --git a/vue/src/assets/icons/svg/monitor-a.svg b/vue/src/assets/icons/svg/monitor-a.svg
new file mode 100644
index 00000000..07a4cf1d
--- /dev/null
+++ b/vue/src/assets/icons/svg/monitor-a.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1654508048546" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10209" width="128" height="128" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M450.346667 256.213333a20.693333 20.693333 0 0 0-10.666667 1.493334c3.2-1.493333 7.04-2.133333 10.666667-1.493334z" p-id="10210"></path><path d="M874.666667 128H149.333333c-23.466667 0-42.666667 19.2-42.666666 42.666667v512c0 23.466667 19.2 42.666667 42.666666 42.666666h256v128h-128c-11.733333 0-21.333333 9.6-21.333333 21.333334s9.6 21.333333 21.333333 21.333333h469.333334c11.733333 0 21.333333-9.6 21.333333-21.333333s-9.6-21.333333-21.333333-21.333334h-128v-128h256c23.466667 0 42.666667-19.2 42.666666-42.666666V170.666667c0-23.466667-19.2-42.666667-42.666666-42.666667z m-106.666667 320h-94.293333l-79.146667 138.666667c-3.84 6.613333-10.88 10.666667-18.56 10.666666h-1.28a21.269333 21.269333 0 0 1-18.346667-13.013333l-111.146666-259.2-64 112.213333c-3.84 6.613333-10.88 10.666667-18.56 10.666667h-106.666667c-11.733333 0-21.333333-9.6-21.333333-21.333333s9.6-21.333333 21.333333-21.333334h94.293333l79.146667-138.666666a20.906667 20.906667 0 0 1 19.84-10.666667c8.106667 0.426667 15.146667 5.546667 18.346667 13.013333l111.146666 259.2 64-112.213333c3.84-6.613333 10.88-10.666667 18.56-10.666667h106.666667c11.733333 0 21.333333 9.6 21.333333 21.333334s-9.6 21.333333-21.333333 21.333333z" p-id="10211"></path></svg>
\ No newline at end of file
diff --git a/vue/src/views/index.vue b/vue/src/views/index.vue
index 5a478241..8a28e235 100644
--- a/vue/src/views/index.vue
+++ b/vue/src/views/index.vue
@@ -66,72 +66,72 @@
                                 <div class="card-panel-text">
                                     设备数量
                                 </div>
-                                <count-to :start-val="0" :end-val="this.static['bytes.sent']" :duration="3000" class="card-panel-num" />
+                                <count-to :start-val="0" :end-val="deviceStatistic.deviceCount" :duration="3000" class="card-panel-num" />
                             </div>
                         </div>
                     </el-col>
                     <el-col :span="12" class="card-panel-col">
                         <div class="card-panel">
                             <div class="card-panel-icon-wrapper icon-red">
-                                <svg-icon icon-class="product" class-name="card-panel-icon" />
+                                <svg-icon icon-class="monitor-a" class-name="card-panel-icon" />
+                            </div>
+                            <div class="card-panel-description">
+                                <div class="card-panel-text">
+                                    监测数据
+                                </div>
+                                <count-to :start-val="0" :end-val="deviceStatistic.monitorCount" :duration="3000" class="card-panel-num" />
+                            </div>
+                        </div>
+                    </el-col>
+                    <el-col :span="12" class="card-panel-col">
+                        <div class="card-panel">
+                            <div class="card-panel-icon-wrapper icon-blue">
+                                <svg-icon icon-class="model" class-name="card-panel-icon" />
                             </div>
                             <div class="card-panel-description">
                                 <div class="card-panel-text">
                                     产品数量
                                 </div>
-                                <count-to :start-val="0" :end-val="this.static['bytes.received']" :duration="3000" class="card-panel-num" />
-                            </div>
-                        </div>
-                    </el-col>
-                    <el-col :span="12" class="card-panel-col">
-                        <div class="card-panel">
-                            <div class="card-panel-icon-wrapper icon-blue">
-                                <svg-icon icon-class="guide" class-name="card-panel-icon" />
-                            </div>
-                            <div class="card-panel-description">
-                                <div class="card-panel-text">
-                                    上报数据
-                                </div>
-                                <count-to :start-val="0" :end-val="this.static['client.authenticate']" :duration="1000" class="card-panel-num" />
+                                <count-to :start-val="0" :end-val="deviceStatistic.productCount" :duration="1000" class="card-panel-num" />
                             </div>
                         </div>
                     </el-col>
                     <el-col :span="12" class="card-panel-col">
                         <div class="card-panel">
                             <div class="card-panel-icon-wrapper icon-red">
-                                <svg-icon icon-class="receiver" class-name="card-panel-icon" />
+                                <svg-icon icon-class="log-a" class-name="card-panel-icon" />
                             </div>
                             <div class="card-panel-description">
                                 <div class="card-panel-text">
-                                    下发数据
+                                    功能操作
                                 </div>
-                                <count-to :start-val="0" :end-val="this.static['client.connected']" :duration="1000" class="card-panel-num" />
+                                <count-to :start-val="0" :end-val="deviceStatistic.functionCount" :duration="1000" class="card-panel-num" />
                             </div>
                         </div>
                     </el-col>
                     <el-col :span="12" class="card-panel-col">
                         <div class="card-panel">
                             <div class="card-panel-icon-wrapper icon-blue">
-                                <svg-icon icon-class="log" class-name="card-panel-icon" />
-                            </div>
-                            <div class="card-panel-description">
-                                <div class="card-panel-text">
-                                    操作次数
-                                </div>
-                                <count-to :start-val="0" :end-val="this.static['client.subscribe']" :duration="2000" class="card-panel-num" />
-                            </div>
-                        </div>
-                    </el-col>
-                    <el-col :span="12" class="card-panel-col">
-                        <div class="card-panel">
-                            <div class="card-panel-icon-wrapper icon-red">
                                 <svg-icon icon-class="alert" class-name="card-panel-icon" />
                             </div>
                             <div class="card-panel-description">
                                 <div class="card-panel-text">
-                                    触发事件
+                                    告警数量
                                 </div>
-                                <count-to :start-val="0" :end-val="this.static['messages.received']" :duration="2000" class="card-panel-num" />
+                                <count-to :start-val="0" :end-val="deviceStatistic.alertCount" :duration="2000" class="card-panel-num" />
+                            </div>
+                        </div>
+                    </el-col>
+                    <el-col :span="12" class="card-panel-col">
+                        <div class="card-panel">
+                            <div class="card-panel-icon-wrapper icon-red">
+                                <svg-icon icon-class="event-a" class-name="card-panel-icon" />
+                            </div>
+                            <div class="card-panel-description">
+                                <div class="card-panel-text">
+                                    上报事件
+                                </div>
+                                <count-to :start-val="0" :end-val="deviceStatistic.eventCount" :duration="2000" class="card-panel-num" />
                             </div>
                         </div>
                     </el-col>
@@ -155,7 +155,7 @@
         </el-col>   
     </el-row>
 
-    <el-row :gutter="40" v-if="isAdmin" style="margin-bottom:80px;">
+    <el-row :gutter="40" v-if="isAdmin" style="margin-bottom:50px;">
         <el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="14">
             <el-card style="margin:-10px;background-color:#fafafa;height:320px;" shadow="never">
                 <h3 style="font-weight:bold">Mqtt 统计指标</h3>
@@ -350,6 +350,9 @@
 </template>
 
 <script>
+import {
+    getDeviceStatistic,
+} from "@/api/iot/device";
 import {
     listNotice,
     getNotice,
@@ -393,6 +396,8 @@ export default {
             isAdmin: false,
             // 设备列表
             deviceList: [],
+            // 设备统计信息
+            deviceStatistic:{},
             // 设备总数
             deviceCount: 0,
             // emqx状态数据
@@ -430,6 +435,7 @@ export default {
         this.init();
         this.getAllDevice();
         this.getNoticeList();
+        this.getDeviceStatistic();
     },
     methods: {
         init() {
@@ -440,6 +446,13 @@ export default {
                 this.statisticMqtt();
             }
         },
+        /** 查询设备统计信息 */
+        getDeviceStatistic(){
+            getDeviceStatistic().then(response => {
+                this.deviceStatistic = response.data;
+                console.log( this.deviceStatistic);
+            });
+        },
         /** 查询公告列表 */
         getNoticeList() {
             let queryParams = {
@@ -586,7 +599,7 @@ export default {
                                 featureType: 'land',
                                 elementType: 'all',
                                 stylers: {
-                                    color: '#fffff8'
+                                    color: '#fafafa'  // #fffff8 淡黄色
                                 }
                             },
                             {