From 093409625465e722e757b31992fe60ac78ffefa4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E9=98=BF=E9=BE=99?= <sunashang@vip.qq.com>
Date: Fri, 12 Aug 2022 11:06:53 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E8=AE=BE=E5=A4=87=E6=80=BB?=
 =?UTF-8?q?=E8=A7=88=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue/src/views/bigScreen/indexs/center-map.vue |  19 +-
 vue/src/views/bigScreen/indexs/left-top.vue   | 387 ++++++++++--------
 2 files changed, 217 insertions(+), 189 deletions(-)

diff --git a/vue/src/views/bigScreen/indexs/center-map.vue b/vue/src/views/bigScreen/indexs/center-map.vue
index 8f5dd7e9..589340ee 100644
--- a/vue/src/views/bigScreen/indexs/center-map.vue
+++ b/vue/src/views/bigScreen/indexs/center-map.vue
@@ -43,7 +43,8 @@ export default {
   methods: {
     getData(code) {
       currentGET('big8',{regionCode:code}).then(res => {
-        console.log('设备分布', res);
+        console.log('设备分布', JSON.stringify(res));
+        //{"success":true,"data":{"dataList":[{"name":"湖北省","value":430},{"name":"浙江省","value":143},{"name":"广东省","value":668},{"name":"湖南省","value":460},{"name":"陕西省","value":764},{"name":"吉林省","value":405},{"name":"重庆","value":753},{"name":"江苏省","value":849}],"regionCode":-1}}
         if (res.success) {
           if (!code) {
             this.userCode = res.data.regionCode;
@@ -57,7 +58,8 @@ export default {
       })
     },
     getGeojson(name, mydata) {
-
+       console.log('设备分布1', name);
+       console.log('设备分布2', mydata);
       if (name == -1) {
         name = 'china'
       }
@@ -306,10 +308,11 @@ export default {
       this.options = option;
     },
     message(text) {
-      this.$Message({
-        text: text,
-        type: 'warning'
-      })
+      // this.$Message({
+      //   text: text,
+      //   type: 'warning'
+      // })
+      alert(text);
     },
     mapclick() {
       if (this.echartBindClick || this.userCode !== -1) return
@@ -317,10 +320,12 @@ export default {
       this.$refs.CenterMap.chart.on("click", (params) => {
         // console.log(params);
         let xzqData = xzqCode[params.name];
+        console.log(xzqData)
         if (xzqData) {
           this.getData(xzqData.adcode);
         } else {
-          this.message("暂无下级地市!");
+          //  alert("暂无下级地市!");
+          // this.message("暂无下级地市!");
         }
       });
       this.echartBindClick = true
diff --git a/vue/src/views/bigScreen/indexs/left-top.vue b/vue/src/views/bigScreen/indexs/left-top.vue
index 63fa82fe..c04dc480 100644
--- a/vue/src/views/bigScreen/indexs/left-top.vue
+++ b/vue/src/views/bigScreen/indexs/left-top.vue
@@ -1,222 +1,245 @@
 <template>
-    <ul class="user_Overview flex" v-if="pageflag">
-        <li class="user_Overview-item" style="color: #00fdfa">
-            <div class="user_Overview_nums allnum ">
-                <dv-digital-flop :config="config" style="width:100%;height:100%;" />
-            </div>
-            <p>总设备数</p>
-        </li>
-        <li class="user_Overview-item" style="color: #07f7a8">
-            <div class="user_Overview_nums online">
-                <dv-digital-flop :config="onlineconfig" style="width:100%;height:100%;" />
-            </div>
-            <p>在线数</p>
-        </li>
-        <li class="user_Overview-item" style="color: #e3b337">
-            <div class="user_Overview_nums offline">
-                <dv-digital-flop :config="offlineconfig" style="width:100%;height:100%;" />
+  <ul class="user_Overview flex" v-if="pageflag">
+    <li class="user_Overview-item" style="color: #00fdfa">
+      <div class="user_Overview_nums allnum ">
+        <dv-digital-flop :config="config" style="width:100%;height:100%;" />
+      </div>
+      <p>总设备数</p>
+    </li>
+    <li class="user_Overview-item" style="color: #07f7a8">
+      <div class="user_Overview_nums online">
+        <dv-digital-flop :config="onlineconfig" style="width:100%;height:100%;" />
+      </div>
+      <p>在线数</p>
+    </li>
+    <li class="user_Overview-item" style="color: #e3b337">
+      <div class="user_Overview_nums offline">
+        <dv-digital-flop :config="offlineconfig" style="width:100%;height:100%;" />
 
-            </div>
-            <p>掉线数</p>
-        </li>
-        <li class="user_Overview-item" style="color: #f5023d">
-            <div class="user_Overview_nums laramnum">
-                <dv-digital-flop :config="laramnumconfig" style="width:100%;height:100%;" />
-            </div>
-            <p>告警次数</p>
-        </li>
-    </ul>
-    <Reacquire v-else @onclick="getData" line-height="200px">
-        重新获取
-    </Reacquire>
+      </div>
+      <p>掉线数</p>
+    </li>
+    <li class="user_Overview-item" style="color: #f5023d">
+      <div class="user_Overview_nums laramnum">
+        <dv-digital-flop :config="laramnumconfig" style="width:100%;height:100%;" />
+      </div>
+      <p>告警次数</p>
+    </li>
+  </ul>
+  <Reacquire v-else @onclick="getData" line-height="200px">
+    重新获取
+  </Reacquire>
 </template>
 
 <script>
-import { currentGET } from '@/api/bigScreen/modules'
-let style = {
+  import {
+    getDeviceStatistic,
+  } from "@/api/iot/device";
+  import {
+    listAllDeviceShort,
+  } from "@/api/iot/device";
+  let style = {
     fontSize: 24
-}
-export default {
+  }
+  export default {
     data() {
-        return {
-            options: {},
-            userOverview: {
-                alarmNum: 0,
-                offlineNum: 0,
-                onlineNum: 0,
-                totalNum: 0,
-            },
-            pageflag: true,
-            timer: null,
-            config: {
-                number: [100],
-                content: '{nt}',
-                style: {
-                    ...style,
-                    // stroke: "#00fdfa",
-                    fill: "#00fdfa",
-                },
-            },
-            onlineconfig: {
-                number: [0],
-                content: '{nt}',
-                style: {
-                    ...style,
-                    // stroke: "#07f7a8",
-                    fill: "#07f7a8",
-                },
-            },
-            offlineconfig: {
-                number: [0],
-                content: '{nt}',
-                style: {
-                    ...style,
-                    // stroke: "#e3b337",
-                    fill: "#e3b337",
-                },
-            },
-            laramnumconfig: {
-                number: [0],
-                content: '{nt}',
-                style: {
-                    ...style,
-                    // stroke: "#f5023d",
-                    fill: "#f5023d",
-                },
-            }
+      return {
+        // 设备列表
+        deviceList: [],
+        // 设备统计信息
+        deviceStatistic: {},
+        // 设备总数
+        deviceCount: 0,
+        options: {},
+        userOverview: {
+          alarmNum: 0,
+          offlineNum: 0,
+          onlineNum: 0,
+          totalNum: 0,
+        },
+        pageflag: true,
+        timer: null,
+        config: {
+          number: [],
+          content: '{nt}',
+          style: {
+            ...style,
+            // stroke: "#00fdfa",
+            fill: "#00fdfa",
+          },
+        },
+        onlineconfig: {
+          number: [0],
+          content: '{nt}',
+          style: {
+            ...style,
+            // stroke: "#07f7a8",
+            fill: "#07f7a8",
+          },
+        },
+        offlineconfig: {
+          number: [0],
+          content: '{nt}',
+          style: {
+            ...style,
+            // stroke: "#e3b337",
+            fill: "#e3b337",
+          },
+        },
+        laramnumconfig: {
+          number: [0],
+          content: '{nt}',
+          style: {
+            ...style,
+            // stroke: "#f5023d",
+            fill: "#f5023d",
+          },
+        }
 
-        };
+      };
     },
     filters: {
-        numsFilter(msg) {
-            return msg || 0;
-        },
+      numsFilter(msg) {
+        return msg || 0;
+      },
     },
     created() {
-        this.getData()
-    },
-    mounted() {
+      this.getData()
     },
+    mounted() {},
     beforeDestroy() {
-        this.clearData()
+      this.clearData()
 
     },
     methods: {
-        clearData() {
-            if (this.timer) {
-                clearInterval(this.timer)
-                this.timer = null
+      clearData() {
+        if (this.timer) {
+          clearInterval(this.timer)
+          this.timer = null
+        }
+      },
+      getData() {
+        this.pageflag = true;
+        getDeviceStatistic().then(res => {
+          // this.deviceStatistic = response.data;
+          if (!this.timer) {
+            console.log("设备总览", res);
+          }
+          if (res.code == 200) {
+            this.userOverview = res.data;
+            this.laramnumconfig = {
+              ...this.laramnumconfig,
+              number: [res.data.alertCount]
             }
-        },
-        getData() {
-            this.pageflag = true;
-            currentGET("big2").then((res) => {
-                if (!this.timer) {
-                    console.log("设备总览", res);
-                }
-                if (res.success) {
-                    this.userOverview = res.data;
-                    this.onlineconfig = {
-                        ...this.onlineconfig,
-                        number: [res.data.onlineNum]
-                    }
-                    this.config = {
-                        ...this.config,
-                        number: [res.data.totalNum]
-                    }
-                    this.offlineconfig = {
-                        ...this.offlineconfig,
-                        number: [res.data.offlineNum]
-                    }
-                    this.laramnumconfig = {
-                        ...this.laramnumconfig,
-                        number: [res.data.alarmNum]
-                    }
-                    this.switper()
-                } else {
-                    this.pageflag = false;
-                    this.$Message.warning(res.msg);
-                }
-            });
-        },
-        //轮询
-        switper() {
-            if (this.timer) {
-                return
-            }
-            let looper = (a) => {
-                this.getData()
-            };
-            this.timer = setInterval(looper, this.$store.state.settings.echartsAutoTime);
-        },
+            this.getAllDevice();
+            this.switper()
+          } else {
+            this.pageflag = false;
+            this.$Message.warning(res.msg);
+          }
+        });
+      },
+      //轮询
+      switper() {
+        if (this.timer) {
+          return
+        }
+        let looper = (a) => {
+          this.getData()
+        };
+        this.timer = setInterval(looper, this.$store.state.settings.echartsAutoTime);
+      },
+      /**查询所有设备 */
+      getAllDevice() {
+        listAllDeviceShort(this.queryParams).then(response => {
+          this.deviceList = response.rows;
+          this.deviceCount = response.total;
+          let online = this.deviceList.filter(x => x.status == 3).length;
+          let offline = this.deviceList.length - online;
+          this.config = {
+            ...this.config,
+            number: [this.deviceCount]
+          }
+          this.onlineconfig = {
+            ...this.onlineconfig,
+            number: [online]
+          }
+          this.offlineconfig = {
+            ...this.offlineconfig,
+            number: [offline]
+          }
+        })
+      },
     },
-};
+  };
+
 </script>
 <style lang='scss' scoped>
-.user_Overview {
+  .user_Overview {
     li {
-        flex: 1;
+      flex: 1;
 
-        p {
-            text-align: center;
-            height: 16px;
-            font-size: 16px;
+      p {
+        text-align: center;
+        height: 16px;
+        font-size: 16px;
+      }
+
+      .user_Overview_nums {
+        width: 100px;
+        height: 100px;
+        text-align: center;
+        line-height: 100px;
+        font-size: 22px;
+        margin: 50px auto 30px;
+        background-size: cover;
+        background-position: center center;
+        position: relative;
+
+        &::before {
+          content: '';
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          top: 0;
+          left: 0;
         }
 
-        .user_Overview_nums {
-            width: 100px;
-            height: 100px;
-            text-align: center;
-            line-height: 100px;
-            font-size: 22px;
-            margin: 50px auto 30px;
-            background-size: cover;
-            background-position: center center;
-            position: relative;
-
-            &::before {
-                content: '';
-                position: absolute;
-                width: 100%;
-                height: 100%;
-                top: 0;
-                left: 0;
-            }
-
-            &.bgdonghua::before {
-                animation: rotating 14s linear infinite;
-            }
+        &.bgdonghua::before {
+          animation: rotating 14s linear infinite;
         }
+      }
 
-        .allnum {
+      .allnum {
 
-            // background-image: url("../../assets/img/left_top_lan.png");
-            &::before {
-                background-image: url("../../../assets/bigScreen/img/left_top_lan.png");
+        // background-image: url("../../assets/img/left_top_lan.png");
+        &::before {
+          background-image: url("../../../assets/bigScreen/img/left_top_lan.png");
 
-            }
         }
+      }
 
-        .online {
-            &::before {
-                background-image: url("../../../assets/bigScreen/img/left_top_lv.png");
+      .online {
+        &::before {
+          background-image: url("../../../assets/bigScreen/img/left_top_lv.png");
 
-            }
         }
+      }
 
-        .offline {
-            &::before {
-                background-image: url("../../../assets/bigScreen/img/left_top_huang.png");
+      .offline {
+        &::before {
+          background-image: url("../../../assets/bigScreen/img/left_top_huang.png");
 
-            }
         }
+      }
 
-        .laramnum {
-            &::before {
-                background-image: url("../../../assets/bigScreen/img/left_top_hong.png");
+      .laramnum {
+        &::before {
+          background-image: url("../../../assets/bigScreen/img/left_top_hong.png");
 
-            }
         }
+      }
     }
-}
-</style>
\ No newline at end of file
+  }
+
+</style>