大屏设备总览实现

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

vue/src/views/bigScreen/indexs/left-top.vue

@@ -32,13 +32,24 @@
 </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 {
+        // 设备列表
+        deviceList: [],
+        // 设备统计信息
+        deviceStatistic: {},
+        // 设备总数
+        deviceCount: 0,
         options: {},
         userOverview: {
           alarmNum: 0,
@@ -49,7 +60,7 @@ export default {
         pageflag: true,
         timer: null,
         config: {
-                number: [100],
+          number: [],
           content: '{nt}',
           style: {
             ...style,
@@ -95,8 +106,7 @@ export default {
     created() {
       this.getData()
     },
-    mounted() {
-    },
+    mounted() {},
     beforeDestroy() {
       this.clearData()
 
@@ -110,28 +120,18 @@ export default {
       },
       getData() {
         this.pageflag = true;
-            currentGET("big2").then((res) => {
+        getDeviceStatistic().then(res => {
+          // this.deviceStatistic = response.data;
           if (!this.timer) {
             console.log("设备总览", res);
           }
-                if (res.success) {
+          if (res.code == 200) {
             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]
+              number: [res.data.alertCount]
             }
+            this.getAllDevice();
             this.switper()
           } else {
             this.pageflag = false;
@@ -149,11 +149,33 @@ export default {
         };
         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;
 
@@ -218,5 +240,6 @@ export default {
         }
       }
     }
-}
+  }
+
 </style>