From f3acb8ce787f3df0eda633031473be4e6a9ff448 Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期四, 12 十月 2023 16:56:28 +0800
Subject: [PATCH] 油烟 更新了实时监控页面

---
 src/views/IndexView.vue |   84 +++++++++++++++++++++++------------------
 1 files changed, 47 insertions(+), 37 deletions(-)

diff --git a/src/views/IndexView.vue b/src/views/IndexView.vue
index 74fa822..66aac82 100644
--- a/src/views/IndexView.vue
+++ b/src/views/IndexView.vue
@@ -12,6 +12,9 @@
   },
   data() {
     return {
+      button:{
+        setButton:false
+      },
       totalData: [],
       // 淇濆瓨璁剧疆
       save: false,
@@ -70,17 +73,9 @@
         checkedShops: []
       }
 
-      // chartInstance: []
-      // // 鍐呴儴璁惧
-      // devices: []
     };
   },
-  watch: {
-    // 'outside.checkedShops'(){
-    //   this.saveOutsideData()
-    //     console.log('111');
-    // }
-  },
+
   methods: {
     //鑾峰彇鎵�鏈夊簵閾哄悕瀛�
     getDeviceInfo() {
@@ -245,10 +240,7 @@
           .get('/fume/lastest', { params: params })
           .then((result) => {
             this.outside.realTimeData = result.data.data;
-            console.log('66', this.outside.realTimeData);
-            // console.log('闀垮害涓猴細',this.outside.realTimeData.length);
-            // 娓叉煋鎶樼嚎鍥�
-            // this.updateCharts();
+     
           });
       }
 
@@ -263,7 +255,6 @@
             this.inner.inFumeValue.push(item);
           }
         });
-        console.log(this.inner.inFumeValue);
       }
 
       // 鍚堝苟
@@ -273,14 +264,14 @@
           ...this.inner.inFumeValue,
           ...this.outside.realTimeData
         ];
-        console.log('鎬婚�夋暟鎹�', this.totalData);
-        console.log('闀垮害涓猴細', this.totalData.length);
+   
       }, 200);
-      console.log('璋冪敤浜�');
     },
 
     // 鐐瑰嚮鎸夐挳瑙﹀彂
     show() {
+      // 
+      this.button.setButton = true
       // 褰撳彇娑堥�夋嫨鏃讹紝闃叉鍥惧舰杩樹繚鐣欏湪椤甸潰銆�
       if (this.outside.checkedShops.length == 0) {
         this.outside.realTimeData = [];
@@ -290,6 +281,8 @@
       }
       // 鏍规嵁鎵�閫夌殑搴楅摵璇锋眰鏁版嵁
       this.request();
+      this.button.setButton = false
+      // 瀹氭椂鏇存柊
       setInterval(() => {
         this.request();
       }, this.timeInterval);
@@ -428,19 +421,14 @@
 
             <!-- </el-form-item> -->
           </el-form>
-        </el-card>
-      </el-collapse-item>
-    </el-collapse>
-  </div>
-
-  <div>
+          <div>
     <el-tooltip
       class="box-item"
       effect="dark"
       content="鐐瑰嚮灞曠ず瀹炴椂鏁版嵁"
       placement="top-start"
     >
-      <el-button type="success" @click="show" style="margin-left: 10px">
+      <el-button type="success" :loading="button.setButton" @click="show" style="margin-left: 10px">
         璁剧疆
       </el-button>
     </el-tooltip>
@@ -453,6 +441,13 @@
     </el-switch>
   </div>
 
+        </el-card>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+
+
+
   <div>
     <el-row :gutter="20">
       <el-col
@@ -461,30 +456,40 @@
         :key="device.mvStatCode"
       >
         <!-- 鍐呴儴璁惧 -->
-        <el-card v-if="index < inner.inFumeValue.length" height="1900px">
+        <el-card v-if="index < inner.inFumeValue.length"  class="card-font-color" height="1900px">
           <template #header>
             <div class="card-header">{{ device.siteName }} 
               <img src="@/assets/inner_device.jpg" class="icon-inner"/>
             </div>
-           
           </template>
           <div class="report-time-text">鏁版嵁鍙戝竷鏃堕棿锛歿{ device.time }}</div>
           <DashBoard :data="device.value"></DashBoard>
+
+          <div class="imag-container">
+            <img src="@/assets/wind.jpg" class="image"/>
+          <span class="chart-below-text"> 椋庢満鐢垫祦(A)锛�0 </span>
+         
+          <span class="chart-below-text2">
+            <img src="@/assets/purifier.jpg" class="image"/>
+            鍑�鍖栧櫒鐢垫祦(A)锛�0
+          </span>
+         </div>
+         <div class="horizontal-line"></div>
           <div >璁惧缂栧彿锛歿{ device.mnCode }}</div>
-          <!-- <hr class="divider-margin" /> -->
           <div class="horizontal-line"></div>
           
           <div class="status" :class="{ exceed: device.value > 1 }">
             {{ device.value >= 1 ? '瓒呮爣' : '' }}
           </div>
           <br />
-          <br />
-          <br />
+ 
         </el-card>
+
+
         <!-- 澶栭儴璁惧 -->
-        <el-card v-else>
+        <el-card v-else class="card-font-color">
           <template #header>
-            <div class="card-header">
+            <div class="card-header out-device">
               {{ device.diName }}
             </div>
           </template>
@@ -501,11 +506,11 @@
           </span>
          </div>
          <div class="horizontal-line"></div>
-          <!-- <hr class="divider-margin" /> -->
 
           <div>璁惧缂栧彿锛歿{ device.mvStatCode }}</div>
+
           <div class="horizontal-line"></div>
-          <!-- <hr class="divider-margin" /> -->
+
           <div>璁惧渚涘簲鍟嗭細{{ device.diSupplier }}</div>
           <div
             class="status"
@@ -598,6 +603,11 @@
   color: #999999;
 }
 
+.card-font-color {
+  color: #000000;
+}
+
+
 
 
 
@@ -641,10 +651,7 @@
   width: calc(100% / 6);
   // margin-left: 70px;
 }
-// .input-search {
-//   display: flex;
-//   justify-content: left;
-// }
+
 .save-switch {
   margin-top: 20px;
   margin-left: 20px;
@@ -667,4 +674,7 @@
   height: 1px;
   background-color: rgb(221, 217, 217);
 }
+.out-device {
+  margin-top:34px;
+}
 </style>

--
Gitblit v1.9.3