From bdbfb187abc3eb147a7fae8d0cd6ec4963534511 Mon Sep 17 00:00:00 2001
From: kerwincui <164770707@qq.com>
Date: Wed, 17 Aug 2022 22:21:58 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E5=B1=95=E7=A4=BA=E7=BB=91?=
 =?UTF-8?q?=E5=AE=9A=E8=AE=BE=E5=A4=87=E7=9B=B8=E5=85=B3=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue/src/views/bigScreen/home.vue            |   2 +-
 vue/src/views/bigScreen/indexs/left-top.vue | 388 +++++++++++---------
 2 files changed, 207 insertions(+), 183 deletions(-)

diff --git a/vue/src/views/bigScreen/home.vue b/vue/src/views/bigScreen/home.vue
index 8ecfdbc4..e94ff958 100644
--- a/vue/src/views/bigScreen/home.vue
+++ b/vue/src/views/bigScreen/home.vue
@@ -10,7 +10,7 @@
           <div class="guang"></div>
           <div class="d-flex jc-center">
             <div class="title">
-              <span class="title-text">物美智能系统</span>
+              <span class="title-text">物美智能物联网平台</span>
             </div>
           </div>
           <div class="timers ">
diff --git a/vue/src/views/bigScreen/indexs/left-top.vue b/vue/src/views/bigScreen/indexs/left-top.vue
index 63fa82fe..0669e5ee 100644
--- a/vue/src/views/bigScreen/indexs/left-top.vue
+++ b/vue/src/views/bigScreen/indexs/left-top.vue
@@ -1,222 +1,246 @@
 <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>