From 172d73cbe737c04b3d2c3fe8908db2460c241543 Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期一, 14 八月 2023 17:11:48 +0800
Subject: [PATCH] 油烟监测系统 Vue代码

---
 src/test/TestNoData.vue | 1075 ++++++++++++++++++++++++++++++++++++-----------------------
 1 files changed, 648 insertions(+), 427 deletions(-)

diff --git a/src/test/TestNoData.vue b/src/test/TestNoData.vue
index 959c747..dc4111d 100644
--- a/src/test/TestNoData.vue
+++ b/src/test/TestNoData.vue
@@ -19,7 +19,10 @@
       <TimeSelect @submit-time="giveTime"></TimeSelect>
       <!-- </div> -->
     </div>
-    <div ref="h2" style="display: flex; margin-top: 2px; justify-content: right">
+    <div
+      ref="h2"
+      style="display: flex; margin-top: 2px; justify-content: right"
+    >
       <!-- <span class="collapse-header-text">
               闈欏畨鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 娌圭儫妫�娴嬪紓甯镐俊鎭眹鎬�</span
             > -->
@@ -31,13 +34,14 @@
         style="margin-left: 20px"
         >鏌ヨ</el-button
       >
-      <el-button
+
+      <!-- <el-button
         type="warning"
         plain
         @click="getAllData"
         style="margin-left: 20px"
         >鏌ヨ鍏ㄩ儴</el-button
-      >
+      > -->
 
       <el-tooltip
         class="box-item"
@@ -58,8 +62,8 @@
     </div>
     <div style="display: flex; justify-content: right">
       <span class="collapse-header-text">
-              闈欏畨鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 娌圭儫妫�娴嬪紓甯镐俊鎭眹鎬�</span
-            >
+        闈欏畨鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 娌圭儫妫�娴嬪紓甯镐俊鎭眹鎬�</span
+      >
     </div>
     <br />
 
@@ -72,7 +76,7 @@
             content="鐐瑰嚮鍙姌鍙�"
             placement="right-start"
           >
-            <h4 class="collapse-header"> 寮傚父鍒嗘瀽</h4>
+            <h4 class="collapse-header">寮傚父鍒嗘瀽</h4>
             <el-icon class="header-icon">
               <i-ep-info-filled />
             </el-icon>
@@ -84,119 +88,172 @@
             content="鐐瑰嚮鍙姌鍙�"
             placement="right-start"
           >
-   
           </el-tooltip>
         </template>
         <el-card class="box-card">
           <el-row :gutter="25">
             <el-col :span="8">
-              <div style="display: flex;"> 
-                <img src="@/assets/exceed.jpg" style="width: 25px;height: 25px;margin-top: 5px;" />
-              <span style="font-size: 16px;font-weight: bold;margin-top: 4px;margin-left: 4px;">娌圭儫娴撳害瓒呮爣</span>
+              <div style="display: flex">
+                <img
+                  src="@/assets/exceed.jpg"
+                  style="width: 25px; height: 25px; margin-top: 5px"
+                />
+                <span
+                  style="
+                    font-size: 16px;
+                    font-weight: bold;
+                    margin-top: 4px;
+                    margin-left: 4px;
+                  "
+                  >娌圭儫娴撳害瓒呮爣</span
+                >
               </div>
-              
+
               <div class="box-card-label">
-                <span class="box-card-label">搴楅摵鏁伴噺锛�</span>
-                <span style="font-size: 20px"
-                  >{{ exception0.length }} /{{ shopsTotal }}</span
-                >
-                <span style="margin-left: 150px; font-size: 14px">
-                  鍗犳瘮锛歿{
-                    ((exception0.length / shopsTotal) * 100).toFixed(1)
-                  }}%</span
-                >
+                <el-scrollbar>
+                  <span class="box-card-label">搴楅摵鏁伴噺锛�</span>
+                  <span style="font-size: 20px"
+                    >{{ exception0.length }} /{{ shopsTotal }}</span
+                  >
+                  <span style="margin-left: 150px; font-size: 14px">
+                    鍗犳瘮锛歿{
+                      ((exception0.length / shopsTotal) * 100).toFixed(1)
+                    }}%</span
+                  >
+                </el-scrollbar>
               </div>
 
               <hr />
               <div class="box-card-butcontainer">
-                <el-card class="sub-box-card"> 
-                <ExceptionText
-                  v-for="(item,index) in exception0"
-                  :key="item"
-                  :devId="item.devId"
-                  exception-value="0"
-                  :begin-time="beginTime"
-                  :end-time="endTime"
-                  @submit-exception-data="getAbnormalDataByClick"
-                >
-                  {{ item.diName }}
-                  <span v-if="index<exception0.length-1" class="text-blank"> , </span>
-                </ExceptionText>
+                <el-card class="sub-box-card">
+                  <el-scrollbar max-height="70px">
+                    <ExceptionText
+                      v-for="(item, index) in exception0"
+                      :key="item"
+                      :devId="item.devId"
+                      exception-value="0"
+                      :begin-time="beginTime"
+                      :end-time="endTime"
+                      @submit-exception-data="getAbnormalDataByClick"
+                    >
+                      {{ item.diName }}
+                      <span
+                        v-if="index < exception0.length - 1"
+                        class="text-blank"
+                        >,</span
+                      >
+                    </ExceptionText>
+                  </el-scrollbar>
                 </el-card>
               </div>
             </el-col>
 
             <el-col :span="8">
-              <div style="display: flex;">
-              <img src="@/assets/exception.jpg" style="width: 25px;height: 25px;margin-top: 5px;" />
-              <span style=" font-size: 16px;font-weight: bold;margin-top: 5px;margin-left: 4px;"
-                >渚涚數寮傚父</span
-              >
-            </div>
+              <div style="display: flex">
+                <img
+                  src="@/assets/exception.jpg"
+                  style="width: 25px; height: 25px; margin-top: 5px"
+                />
+                <span
+                  style="
+                    font-size: 16px;
+                    font-weight: bold;
+                    margin-top: 5px;
+                    margin-left: 4px;
+                  "
+                  >渚涚數寮傚父</span
+                >
+              </div>
               <div class="box-card-label">
-                <span class="box-card-label">搴楅摵鏁伴噺锛�</span>
-                <span style="font-size: 20px"
-                  >{{ exception1.length }} /{{ shopsTotal }}</span
-                >
-                <span style="margin-left: 150px; font-size: 14px">
-                  鍗犳瘮锛歿{
-                    ((exception1.length / shopsTotal) * 100).toFixed(1)
-                  }}%</span
-                >
+                <el-scrollbar>
+                  <span class="box-card-label">搴楅摵鏁伴噺锛�</span>
+                  <span style="font-size: 20px"
+                    >{{ exception1.length }} /{{ shopsTotal }}</span
+                  >
+                  <span style="margin-left: 150px; font-size: 14px">
+                    鍗犳瘮锛歿{
+                      ((exception1.length / shopsTotal) * 100).toFixed(1)
+                    }}%</span
+                  >
+                </el-scrollbar>
               </div>
 
               <hr />
 
               <div>
-               
-                <el-card class="sub-box-card"> 
-                <ExceptionText
-                  v-for="(item,index) in exception1"
-                  :key="item"
-                  :devId="item.devId"
-                  exception-value="1"
-                  :begin-time="beginTime"
-                  :end-time="endTime"
-                  @submit-exception-data="getAbnormalDataByClick"
-                >
-                  {{ item.diName }}
-                  <span v-if="index < exception1.length-1" class="text-blank"> , </span>
-                </ExceptionText>
-              </el-card>
+                <el-card class="sub-box-card">
+                  <el-scrollbar max-height="70px">
+                    <ExceptionText
+                      v-for="(item, index) in exception1"
+                      :key="item"
+                      :devId="item.devId"
+                      exception-value="1"
+                      :begin-time="beginTime"
+                      :end-time="endTime"
+                      @submit-exception-data="getAbnormalDataByClick"
+                    >
+                      {{ item.diName }}
+                      <span
+                        v-if="index < exception1.length - 1"
+                        class="text-blank"
+                        >,</span
+                      >
+                    </ExceptionText>
+                  </el-scrollbar>
+                </el-card>
               </div>
             </el-col>
 
             <el-col :span="8">
-              <div style="display: flex;">
-              <img src="@/assets/offline.jpg" style="width: 25px;height: 25px;margin-top: 5px;" />
-              <span style=" font-size: 16px;font-weight: bold;margin-top: 5px;margin-left: 4px;">鎺夌嚎</span>
+              <div style="display: flex">
+                <img
+                  src="@/assets/offline.jpg"
+                  style="width: 25px; height: 25px; margin-top: 5px"
+                />
+                <span
+                  style="
+                    font-size: 16px;
+                    font-weight: bold;
+                    margin-top: 5px;
+                    margin-left: 4px;
+                  "
+                  >鎺夌嚎</span
+                >
               </div>
               <div class="box-card-label">
-                <span class="box-card-label">搴楅摵鏁伴噺锛�</span>
-                <span style="font-size: 20px"
-                  >{{ exception2.length }} /{{ shopsTotal }}</span
-                >
-                <span style="margin-left: 150px; font-size: 14px">
-                  鍗犳瘮锛歿{
-                    ((exception2.length / shopsTotal) * 100).toFixed(1)
-                  }}%</span
-                >
+                <el-scrollbar>
+                  <span class="box-card-label">搴楅摵鏁伴噺锛�</span>
+                  <span style="font-size: 20px"
+                    >{{ exception2.length }} /{{ shopsTotal }}</span
+                  >
+                  <span style="margin-left: 150px; font-size: 14px">
+                    鍗犳瘮锛歿{
+                      ((exception2.length / shopsTotal) * 100).toFixed(1)
+                    }}%</span
+                  >
+                </el-scrollbar>
               </div>
               <hr />
               <div>
-                <el-card class="sub-box-card"> 
-                <ExceptionText
-                  v-for="(item,index) in exception2"
-                  :key="item"
-                  :devId="item.devId"
-                  exception-value="2"
-                  :begin-time="beginTime"
-                  :end-time="endTime"
-                  @submit-exception-data="getAbnormalDataByClick"
-                >
-                  {{ item.diName }}
-                  <span v-if="index<exception2.length-1" class="text-blank"> , </span>
-                </ExceptionText>
+                <el-card class="sub-box-card">
+                  <el-scrollbar max-height="70px">
+                    <ExceptionText
+                      v-for="(item, index) in exception2"
+                      :key="item"
+                      :devId="item.devId"
+                      exception-value="2"
+                      :begin-time="beginTime"
+                      :end-time="endTime"
+                      @submit-exception-data="getAbnormalDataByClick"
+                    >
+                      {{ item.diName }}
+                      <span
+                        v-if="index < exception2.length - 1"
+                        class="text-blank"
+                        >,</span
+                      >
+                    </ExceptionText>
+                  </el-scrollbar>
                 </el-card>
               </div>
             </el-col>
@@ -204,19 +261,19 @@
         </el-card>
       </el-collapse-item>
     </el-collapse>
- <!-- <hr/>
+    <!-- <hr/>
  <br> -->
-    <h4 class="table-text"> 寮傚父鏁版嵁</h4>
+    <h4 class="table-text">寮傚父鏁版嵁</h4>
     <el-card class="table-page" v-show="!isNoData">
-      
       <el-table
+        ref="tableH"
         v-loading="loading"
         :data="displayData"
         style="width: 100%"
         :row-class-name="tableRowClassName"
         stripe
-        border 
-        :height=tableHeight
+        border
+        :height="tableHeight"
       >
         <el-table-column fixed prop="diName" label="搴楅摵鍚嶇О" width="340">
           <template #default="{ row }">
@@ -323,8 +380,11 @@
 
         <!-- 瓒呮爣鏁版嵁鏃� -->
         <!-- 鎶樼嚎鍥� -->
+
+        <!-- 鎺夌嚎 -->
         <div
-          ref="chart"
+          ref="chart1"
+          v-show="isOfflineShow"
           style="
             width: 100%;
             height: 300px;
@@ -335,8 +395,20 @@
           "
         ></div>
 
-        <!--  v-show="!isAbnormal" -->
-        <!-- 琛ㄦ牸 -->
+        <!-- 瓒呮爣 -->
+        <div
+          ref="chart2"
+          v-show="isExceedShow"
+          style="
+            width: 100%;
+            height: 300px;
+            /* min-width: 100px; */
+            margin-bottom: 20px;
+            margin-left: 10px;
+            min-width: 350px;
+          "
+        ></div>
+        <!-- <ExceptionTypeLineChart :allData="allChartData"></ExceptionTypeLineChart> -->
 
         <!--  -->
         <div style="margin-top: 40px; margin-bottom: 5px; border: 1px">
@@ -373,7 +445,6 @@
 </template>
 
 <script>
-
 import ExceptionType from '../sfc/ExceptionType.vue';
 import TimeSelect from '../sfc/TimeSelect.vue';
 import ExceptionText from '../sfc/ExceptionText.vue';
@@ -385,22 +456,31 @@
 const ShopNameAndID = defineAsyncComponent(() =>
   import('../sfc/../sfc/ShopNameAndID.vue')
 );
+
+// 寮傛缁勪欢
+// const ExceptionTypeLineChart = defineAsyncComponent(() =>
+//   import('../sfc/ExceptionTypeLineChart.vue')
+// )
 export default {
-  
   name: 'TablePage',
   components: {
     ExceptionType,
     TimeSelect,
     ShopNameAndID,
     ExceptionText
+    // ExceptionTypeLineChart
   },
   data() {
     return {
-      
+      //鎺夌嚎鎴栬秴鏍囩殑鍥惧舰灞曠ず
+      isOfflineShow: false,
+      isExceedShow: false,
+      // 鎶樼嚎鍥惧睍绀�
+      isChartShow: false,
       // table鍏冪礌
-      tableRef:null,
+      tableRef: null,
       // 寮傚父琛ㄦ牸鏁版嵁
-      tableHeight:300,
+      tableHeight: 300,
       // 绌烘暟鎹姸鎬�
       isNoData: false,
       // 寮瑰嚭妗嗕腑琛ㄦ牸鏉℃暟
@@ -441,7 +521,8 @@
       afterData: [],
 
       // 鎶樼嚎鍥惧疄渚�
-      chart: null,
+      chart1: null,
+      chart2: null,
       // -1琛ㄧず鏈�夋嫨琛ㄦ牸鐨勮
       selectedRowIndex: -1,
 
@@ -531,7 +612,7 @@
           this.isNextCantouch = false;
         }
       }
-      // 澶勪簬琛ㄦ牸鏈�鍚庝竴鎻愬摝鍟婃暟鎹� 璁剧疆鈥樹笅涓�鏉♀�欐寜閽笉鍙偣
+      // 澶勪簬琛ㄦ牸鏈�鍚庝竴鏉℃暟鎹� 璁剧疆鈥樹笅涓�鏉♀�欐寜閽笉鍙偣
       else if (newVaue === this.displayData.length - 1) {
         this.isNextCantouch = true;
         //鐢ㄦ埛鍏堢偣浜嗙涓�鏉★紝pre涓簍rue,鐒跺悗鐐瑰嚮鏈�鍚庝竴鏉�,next涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿�
@@ -552,11 +633,13 @@
     },
     endTime() {
       this.getShopNames();
+    },
+    centerDialogVisible() {
+      window.addEventListener('resize', this.updateChart);
     }
   },
 
   mounted() {
-
     // 浠庢帴鍙h幏鍙栧簵閾哄悕绉� 缁欑骇鑱斾笅鎷夋
     this.getDeviceInfo();
 
@@ -566,28 +649,99 @@
     // 鏍规嵁寮傚父绫诲瀷杩斿洖搴楅摵鍚嶇О鍜岃澶囩紪鍙� 娓叉煋寮傚父鍒嗘瀽閮ㄥ垎瀵瑰簲鐨勫簵閾哄悕
     this.getShopNames();
     window.addEventListener('resize', this.updateChart);
-    // this.tableHeight = this.calcTableHeight()
-
   },
   methods: {
-    // calcTableHeight() {
-    //   const h1 = this.$refs.h1.offsetHeight;
-    //   const h2 = this.$refs.h2.offsetHeight;
-    //   const h3 = this.$refs.h3.$el.offsetHeight;
-    //   const h4 = this.$refs.h4.$el.offsetHeight;
-    //   // return `calc(100vh - ${h1}px - ${h2}px - var(--el-main-padding) * 2 - var(--el-header-height))`;
-    //   return `calc(100vh - ${h1}px - ${h2}px- ${h3}px - ${h4}px  - 60px - var(--el-main-padding) * 2)`;
-    // },
+    // 鏃堕棿鏄惁瓒呰繃10鍒嗛挓
+    isTimeDifferenceGreaterThan10Minutes(dateString1, dateString2) {
+      const date1 = new Date(dateString1);
+      const date2 = new Date(dateString2);
 
-    warn() {
-      alert('鐐瑰嚮浜�');
+      // 璁$畻涓や釜鏃ユ湡鐨勬椂闂村樊锛堟绉掞級
+      const timeDifferenceMs = Math.abs(date1 - date2);
+
+      // 杞崲涓哄垎閽�
+      const timeDifferenceMinutes = Math.floor(timeDifferenceMs / (1000 * 60));
+
+      // 鍒ゆ柇鏃堕棿宸槸鍚﹀ぇ浜�10鍒嗛挓
+      return timeDifferenceMinutes > 10;
     },
+
+    // 浠�10鍒嗛挓涓洪棿闅旇繑鍥炴椂闂村瓧绗︿覆鏁扮粍
+    generateTimePoints(timePoints,yAxisData) {
+      let updatedTimePoints = [];
+      let yAxisDataAdressed = []
+      for (let i = 0; i < timePoints.length; i++) {
+        updatedTimePoints.push(timePoints[i]);
+        yAxisDataAdressed.push(yAxisData[i])
+        if (i < timePoints.length - 1) {
+          let current = timePoints[i];
+          let next = timePoints[i + 1];
+          while (this.isTimeDifferenceGreaterThan10Minutes(current, next)) {
+            current = dayjs(current)
+              .add(10, 'minute')
+              .format('YYYY-MM-DD HH:mm:ss');
+            updatedTimePoints.push(current);
+            yAxisDataAdressed.push(null)
+          }
+        }
+      }
+      let obj = {}
+      obj['time'] = updatedTimePoints
+      obj['data'] = yAxisDataAdressed
+      return obj;
+    },
+
+    isExceedOneMonth(dateStr1, dateStr2) {
+      // 瓒呰繃涓�涓湀锛岃繑鍥濼rue锛屽惁鍒欒繑鍥濬alse
+      // 灏嗘棩鏈熷瓧绗︿覆杞负鏃ユ湡瀵硅薄
+      const date1 = new Date(dateStr1);
+      const date2 = new Date(dateStr2);
+
+      // 鑾峰彇涓や釜鏃ユ湡鐨勫勾銆佹湀銆佹棩
+      const year1 = date1.getFullYear();
+      const month1 = date1.getMonth();
+      const day1 = date1.getDate();
+
+      const year2 = date2.getFullYear();
+      const month2 = date2.getMonth();
+      const day2 = date2.getDate();
+      console.log(month1, month2);
+
+      // 鍒ゆ柇涓や釜鏃ユ湡鏄惁鐩稿樊涓�涓湀
+      if (year1 === year2) {
+        // 骞翠唤鐩哥瓑锛屾瘮杈冩湀浠藉樊鍊�
+        if (Math.abs(month1 - month2) === 1) {
+          // 鏈堜唤宸�间负1锛岃繕闇�瑕佸垽鏂叿浣撴棩鏈�
+          if (
+            (month1 < month2 && day1 < day2) ||
+            (month1 > month2 && day1 > day2)
+          ) {
+            return true;
+          }
+        }
+      } else if (Math.abs(year1 - year2) === 1) {
+        // 骞翠唤宸�间负1锛屾瘮杈冩湀浠藉拰鏃ユ湡
+        if (
+          (year1 < year2 && month1 === 11 && month2 === 0 && day1 < day2) ||
+          (year1 > year2 && month1 === 0 && month2 === 11 && day1 > day2)
+        ) {
+          return true;
+        }
+      }
+
+      // 榛樿杩斿洖false锛岃〃绀轰袱涓棩鏈熷瓧绗︿覆涓嶇浉宸竴涓湀
+      return false;
+    },
+
     // 鍒氭墦寮�鍗$墖鏃剁涓�涓浘褰笉浼氳嚜鍔ㄤ几缂� 褰撶偣鍑讳笂/涓嬩竴鏉℃椂浼氳嚜鍔ㄤ几缂�
     // 鍥惧舰鍝嶅簲寮忓彉鍖�
     updateChart() {
       this.$nextTick(() => {
-        if (this.chart) {
-          this.chart.resize();
+        if (this.chart1) {
+          this.chart1.resize();
+        }
+        if (this.chart2) {
+          this.chart2.resize();
         }
       });
     },
@@ -637,6 +791,7 @@
         this.rowBeginTime,
         this.rowEndTime
       );
+
       for (let i = 0; i < abnormalTimeTenMinute.length; i++) {
         this.exceedingData.push({
           mvStatCode: this.rowMvStatCode,
@@ -645,6 +800,22 @@
           mvFumeConcentration2: ''
         });
       }
+
+      // 鍏ㄩ儴鏁版嵁鍔犲叆
+      // for (let i = 0; i < data.length; i++) {
+      //   if (data[i] == null) {
+      //     this.exceedingData.push({
+      //       mvStatCode: this.rowMvStatCode,
+      //       diName: this.rowShopName,
+      //       mvDataTime: abnormalTimeTenMinute[i],
+      //       mvFumeConcentration2: ''
+      //     });
+      //   }
+      //   else {
+      //     this.exceedingData.push(data[i]);
+      //   }
+      // }
+
       // 淇濆瓨鏃犳暟鎹椂琛ㄦ牸鏉℃暟
       this.exceptionTotal = abnormalTimeTenMinute.length;
     },
@@ -688,7 +859,7 @@
           .then((response) => {
             // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
             this.exceedingData = response.data.data;
-            this.chart = null;
+            // this.chart = null;
             this.drawChart();
             this.exceptionTotal = this.exceedingData.length;
           });
@@ -696,12 +867,6 @@
       //琛ㄦ牸鐨勭涓�琛岋紝鍒欎笂涓�鏉℃棤鏁版嵁
       else if (this.selectedRowIndex === 0) {
         console.log(null);
-        // 璀﹀憡
-        // ElMessage.warn('宸叉槸绗竴鏉℃暟鎹�');
-        // ElMessage.info('宸叉槸璇ラ〉绗竴鏉℃暟鎹�');
-
-        // 鈥欎笂涓�鏉♀�樼殑鎸夐挳涓嶅彲鐐瑰嚮
-        // this.isPreCantouch = true
       }
     },
 
@@ -737,7 +902,6 @@
             this.exceedingData = response.data.data;
             console.log('杩斿洖鐨勫紓甯告暟鎹负锛�');
             console.log(this.exceedingData);
-            this.chart = null;
             this.drawChart();
             this.exceptionTotal = this.exceedingData.length;
           });
@@ -747,7 +911,6 @@
         console.log(null);
         // 璀﹀憡
         // ElMessage.info('宸叉槸璇ラ〉鏈�鍚庝竴鏉℃暟鎹�');
-
         // 鈥欎笅涓�鏉♀�樼殑鎸夐挳涓嶅彲鐐瑰嚮
         // this.isNextCantouch = true
       }
@@ -796,8 +959,8 @@
 
     // 鐢ㄦ埛鏍规嵁杈撳叆鐨勬潯浠舵煡璇�
     showTable() {
-      if (this.beginTime > this.endTime) {
-        alert('璇疯緭鍏ユ纭殑鏃堕棿鑼冨洿');
+      if (this.isExceedOneMonth(this.beginTime, this.endTime)) {
+        alert('鏃堕棿璺ㄥ害涓嶈兘瓒呰繃涓�涓湀');
         return;
       }
       let params = {};
@@ -825,7 +988,7 @@
           this.total = this.abnormalData.length;
           this.loading = false;
           if (response.data.data.length == 0) {
-            alert('璇ユ椂娈垫棤鏁版嵁');
+            ElMessage('璇ユ椂娈垫棤鏁版嵁');
             this.isNoData = true;
             return;
           }
@@ -842,19 +1005,10 @@
       this.handleCurrentChange(1);
     },
     handleCurrentChange(val) {
-      // this.startIndex = (val - 1) * this.pageSize;
-      // const endIndex = this.startIndex + this.pageSize;
-
       const startIndex = (val - 1) * this.pageSize;
       const endIndex = startIndex + this.pageSize;
-      // console.log('璧峰绱㈠紩涓�:',this.startIndex)
-      // console.log('椤甸潰澶у皬涓�:',this.pageSize)
-      this.displayData = this.abnormalData.slice(startIndex, endIndex);
-      // setTimeout(() => {
-      //  this.displayData = this.abnormalData
 
-      // }, 1000);
-      // console.log(this.displayData);
+      this.displayData = this.abnormalData.slice(startIndex, endIndex);
     },
 
     //鐩稿樊澶氬皯涓崄鍒嗛挓  璁$畻涓苟涓嶅寘鎷紑濮嬫椂闂达紝浣嗗寘鎷粨鏉熸椂闂淬��
@@ -872,25 +1026,15 @@
 
     // 渚涚數寮傚父鍜屾帀绾跨殑鎶樼嚎鍥�
     linechart(xAxisData1, abnormalBeginTime, abnormalEndTime, fumeExceeding) {
-      this.chart = echarts.init(this.$refs.chart);
-      // $('#ModalGrade').on('shown.bs.modal', function(){
-      //   this.chart.resize()
-      // })
-      this.chart.setOption({
-        title: {
-          // text: '娌圭儫瓒呮爣鏁版嵁',
-          // left: 'center'
-        },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true
-        },
+      // 瓒呮爣鍥惧舰chart2瀹炰緥涓虹┖
+      if (this.chart2 != null) {
+        this.chart2 == null;
+      }
+      if (this.chart1 == null) {
+        this.chart1 = echarts.init(this.$refs.chart1);
+      }
+      this.chart1.setOption({
         tooltip: {},
-        // legend: {
-        //   data: ['娌圭儫瓒呮爣鏁版嵁']
-        // },
         toolbox: {
           // 宸ュ叿鏍�
           feature: {
@@ -904,14 +1048,8 @@
           }
         },
         xAxis: {
-          // type: 'time',
-          // 鍦ㄧ被鐩酱锛坱ype: 'category'锛変腑鏈夋晥銆�
           data: xAxisData1,
           name: '鏃堕棿'
-          // axisLabel: {
-          //   interval:3,
-          //   rotate:40
-          // }
         },
         yAxis: {
           type: 'value',
@@ -924,7 +1062,7 @@
         },
         series: [
           {
-            name: '娌圭儫瓒呮爣鏁版嵁',
+            name: '娌圭儫鏁版嵁',
             type: 'line',
             data: fumeExceeding,
             markLine: {
@@ -951,15 +1089,16 @@
 
     // 灞曠ず鎶樼嚎鍥�
     drawChart() {
-      // 褰撳嚭鐜颁緵鐢靛紓甯稿拰鎺夌嚎鏃讹紝鏃舵鏃犳暟鎹� 鍒欐嫾鎺ュ墠鍚庢鏁版嵁
       if (
         this.exceedingData.length === 0 ||
         this.rowExceptionType === '1' ||
         this.rowExceptionType === '2'
       ) {
-        // 閲嶆瀯琛ㄦ牸 鎵嬪姩濉厖
-        this.setExceptionData();
+        this.isOfflineShow = true;
+        this.isExceedShow = false;
 
+        //  // 閲嶆瀯琛ㄦ牸 鎵嬪姩濉厖
+        //  this.setExceptionData();
         // 灞曠ず
         this.isAbnormal = true;
         // 鎷兼帴鏃ユ湡
@@ -998,83 +1137,121 @@
           beginTime: after10MinBegin,
           endTime: after40MinEnd
         };
+
         // 璇锋眰鍓嶅崐娈�
         axiosInstanceInstance
           .get('/fume/history', { params: paramsBefore })
           .then((result) => {
             this.beforeData = result.data.data;
+            // 璇锋眰鍚庡崐娈�
+            axiosInstanceInstance
+              .get('/fume/history', { params: paramsAfter })
+              .then((result) => {
+                this.afterData = result.data.data;
+                //鐢╪ull濉厖涓紓甯告棤鏁版嵁鐨勬椂闂�
+                //鐩稿樊鍑犱釜10鍒嗛挓
+                const TenMinuteNum = this.diffTenMinutesNum(
+                  this.abnormalBt,
+                  this.abnormalEt
+                );
+                //淇濆瓨绌哄��
+                let tempArr = [];
+                for (let i = 0; i < TenMinuteNum; i++) {
+                  tempArr.push(null);
+                }
+                console.log('濉厖鏁扮粍涓猴細', tempArr);
+
+                console.log('鍓嶅悗鏁版嵁涓猴細', this.beforeData, this.afterData);
+                this.allExceptionTimeData = [
+                  ...this.beforeData,
+                  ...tempArr,
+                  ...this.afterData
+                ];
+                console.log('鍚堝苟鍚庢暟缁勪负', this.allExceptionTimeData);
+
+                // 閲嶆瀯琛ㄦ牸 鎵嬪姩濉厖
+                this.setExceptionData(this.allExceptionTimeData);
+
+                //灞曠ず鍥惧舰
+                // x杞存棩鏈熸椂闂�
+                let dateList = [];
+                // y杞� 瓒呮爣娌圭儫娴撳害
+                let fumeExceeding = [];
+                // 杩炵画鐨勬椂闂�
+                let dateListTemp = []
+                let fumeExceedingTemp = []
+
+                for (let i = 0; i < this.allExceptionTimeData.length; i++) {
+                  if (this.allExceptionTimeData[i] == null) {
+                    //x杞存棩鏈�
+                    //鏃犳暟鎹椂锛� 涓哄墠闈㈡椂闂寸偣澧炲姞10鍒嗛挓
+                    dateList.push(
+                      dayjs(dateList[dateList.length - 1])
+                        .add(10, 'minute')
+                        .format('YYYY-MM-DD HH:mm:ss')
+                    );
+                    // 瓒呮爣娌圭儫娴撳害
+                    fumeExceeding.push(null);
+                  } else {
+                    //x杞存棩鏈�
+                    dateList.push(this.allExceptionTimeData[i].mvDataTime);
+                    // 瓒呮爣娌圭儫娴撳害
+                    fumeExceeding.push(
+                      this.allExceptionTimeData[i].mvFumeConcentration2
+                    );
+                  }
+                }
+                // 鏃堕棿杩炵画
+                //  for(let i =0;i<dateList.length-1;i++){
+                //   if(this.isTimeDifferenceGreaterThan10Minutes(dateList[i],dateList[i+1])){
+                //     dateListTemp.push(dayjs(dateList[i]).add(10,'minute').format('YYYY-MM-DD HH:mm:ss'))
+                //     fumeExceedingTemp.push(null)
+                //   }else{
+                //     dateListTemp.push(dateList[i])
+                //     fumeExceedingTemp.push(fumeExceeding[i])
+                //   }
+                //  }
+                 // 鏃堕棿杩炵画
+                let objData= this.generateTimePoints(dateList,fumeExceeding);
+                dateListTemp = objData['time']
+                fumeExceedingTemp = objData['data']
+                
+                //灞曠ず鎶樼嚎鍥�
+                // this.chart = null;
+                // console.log('x杞寸殑鏃ユ湡涓猴細',dateList);
+                // console.log('寮�濮嬪拰缁撴潫鏃ユ湡涓猴細',this.abnormalBt,this.abnormalEt);
+                let dateList1 = [];
+                dateListTemp.forEach((item) => {
+                  dateList1.push(dayjs(item).format('HH:mm'));
+                });
+                this.abnormalBt = dayjs(this.abnormalBt).format('HH:mm');
+                this.abnormalEt = dayjs(this.abnormalEt).format('HH:mm');
+
+                // console.log('鍙樺寲鐨勬暟鎹細',dateList1);
+                // console.log('鍙樺寲鐨勬暟鎹細',this.abnormalBt);
+                // console.log('鍙樺寲鐨勬暟鎹細',this.abnormalEt);
+
+                if (this.char1) {
+                  this.char1.dispose();
+                }
+
+                this.linechart(
+                  dateList1,
+                  this.abnormalBt,
+                  this.abnormalEt,
+                  fumeExceedingTemp
+                );
+              });
           });
 
-        // 璇锋眰鍚庡崐娈�
-        axiosInstanceInstance
-          .get('/fume/history', { params: paramsAfter })
-          .then((result) => {
-            this.afterData = result.data.data;
-          });
-
-        //鐢╪ull濉厖涓紓甯告棤鏁版嵁鐨勬椂闂�
-        //鐩稿樊鍑犱釜10鍒嗛挓
-        const TenMinuteNum = this.diffTenMinutesNum(
-          this.abnormalBt,
-          this.abnormalEt
-        );
-        //淇濆瓨绌哄��
-        let tempArr = [];
-        for (let i = 0; i < TenMinuteNum; i++) {
-          tempArr.push(null);
-        }
-        console.log('濉厖鏁扮粍涓猴細', tempArr);
-
-        //鍚堝苟鏁扮粍
-        setTimeout(() => {
-          this.allExceptionTimeData = [
-            ...this.beforeData,
-            ...tempArr,
-            ...this.afterData
-          ];
-          console.log('鍚堝苟鍚庢暟缁勪负', this.allExceptionTimeData);
-          //灞曠ず鍥惧舰
-          // x杞存棩鏈熸椂闂�
-          let dateList = [];
-          // y杞� 瓒呮爣娌圭儫娴撳害
-          let fumeExceeding = [];
-          for (let i = 0; i < this.allExceptionTimeData.length; i++) {
-            if (this.allExceptionTimeData[i] == null) {
-              //x杞存棩鏈�
-              //鏃犳暟鎹椂锛� 涓哄墠闈㈡椂闂寸偣澧炲姞10鍒嗛挓
-              dateList.push(
-                dayjs(dateList[dateList.length - 1])
-                  .add(10, 'minute')
-                  .format('YYYY-MM-DD HH:mm:ss')
-              );
-              // 瓒呮爣娌圭儫娴撳害
-              fumeExceeding.push(null);
-            } else {
-              //x杞存棩鏈�
-              dateList.push(this.allExceptionTimeData[i].mvDataTime);
-              // 瓒呮爣娌圭儫娴撳害
-              fumeExceeding.push(
-                this.allExceptionTimeData[i].mvFumeConcentration2
-              );
-            }
-          }
-          console.log('x:', dateList);
-          console.log('fume:', fumeExceeding);
-
-          //灞曠ず鎶樼嚎鍥�
-          this.chart = null;
-          this.linechart(
-            dateList,
-            this.abnormalBt,
-            this.abnormalEt,
-            fumeExceeding
-          );
-        }, 500);
-
-        // ----------------------------------------
       }
+
+      // ----------------------------------------
       // 娌圭儫娴撳害瓒呮爣鏃剁殑鎶樼嚎鍥�
       else {
+        // 鍥惧舰灞曠ず
+        this.isExceedShow = true;
+        this.isOfflineShow = false;
         // // 娓呯┖锛岃鏃犳暟鎹潯鏁伴殣钘忥紝浣垮巻鍙叉暟鎹殑鏍囩鏉℃暟鏄剧ず鍑烘潵
         // this.abnormalTimeTenMinute = []
         this.isAbnormal = false;
@@ -1094,6 +1271,8 @@
         let beginTime = new Date(dateList[0]);
         const endTime = new Date(dateList[dateList.length - 1]);
 
+        let beginT = dayjs(beginTime).format('HH:mm');
+        let endT = dayjs(endTime).format('HH:mm');
         // 寰�鍓�30鍒嗛挓
         const before30MinBegin = dayjs(beginTime)
           .subtract(30, 'minute')
@@ -1109,7 +1288,7 @@
         const after10MinEnd = dayjs(endTime)
           .add(10, 'minute')
           .format('YYYY-MM-DD HH:mm:ss');
-        console.log('鍓嶅悗鏃堕棿涓�', before30MinBegin, after30MinEnd);
+
         let paramsBefore = {
           devId: this.displayData[this.selectedRowIndex].devId,
           beginTime: before30MinBegin,
@@ -1125,167 +1304,213 @@
           .get('/fume/history', { params: paramsBefore })
           .then((result) => {
             this.beforeData = result.data.data;
-          });
-        // 璇锋眰鍚庡崐娈�
-        axiosInstanceInstance
-          .get('/fume/history', { params: paramsAfter })
-          .then((result) => {
-            this.afterData = result.data.data;
-          });
+            // 璇锋眰鍚庡崐娈�
+            axiosInstanceInstance
+              .get('/fume/history', { params: paramsAfter })
+              .then((result) => {
+                this.afterData = result.data.data;
+                let before = [];
+                let after = [];
+                console.log('璇锋眰鍚庣殑鏁版嵁涓�', this.beforeData, this.afterData);
 
-        setTimeout(() => {
-          console.log('璇锋眰鍚庣殑鏁版嵁涓�', this.beforeData, this.afterData);
-          this.allExceptionTimeData = [
-            ...this.beforeData,
-            ...this.exceedingData,
-            ...this.afterData
-          ];
-          // x杞存棩鏈熸椂闂�
-          let dateList1 = [];
-          // y杞� 瓒呮爣娌圭儫娴撳害
-          let fumeExceeding1 = [];
-          console.log('鎵�鏈夋暟鎹暱搴�', this.allExceptionTimeData.length);
-          console.log('鎵�鏈夋暟鎹�', this.allExceptionTimeData);
-          for (let i = 0; i < this.allExceptionTimeData.length; i++) {
-            if (this.allExceptionTimeData[i] == null) {
-              //x杞存棩鏈�
-              //鏃犳暟鎹椂锛� 涓哄墠闈㈡椂闂寸偣澧炲姞10鍒嗛挓
-              dateList1.push(
-                dayjs(dateList1[dateList1.length - 1])
-                  .add(10, 'minute')
-                  .format('YYYY-MM-DD HH:mm:ss')
-              );
-              // 瓒呮爣娌圭儫娴撳害
-              fumeExceeding1.push(null);
-            } else {
-              //x杞存棩鏈�
-              dateList1.push(this.allExceptionTimeData[i].mvDataTime);
-              // 瓒呮爣娌圭儫娴撳害
-              fumeExceeding1.push(
-                this.allExceptionTimeData[i].mvFumeConcentration2
-              );
-            }
-          }
-
-          // 鎻愬彇鏃堕棿鍖洪棿鍐呯殑鏁版嵁绱㈠紩
-          var startIndex = dateList1.findIndex((item) => item === dateList[0]);
-          var endIndex = dateList1.findIndex(
-            (item) => item === dateList[dateList.length - 1]
-          );
-
-          this.chart = echarts.init(this.$refs.chart);
-          this.chart.setOption({
-            grid: {
-              left: '3%',
-              right: '4%',
-              bottom: '3%',
-              containLabel: true
-            },
-            tooltip: {},
-            // legend: {
-            //   data: ['娌圭儫瓒呮爣鏁版嵁']
-            // },
-            toolbox: {
-              // 宸ュ叿鏍�
-              feature: {
-                dataZoom: {
-                  // 鍖哄煙缂╂斁
-                  yAxisIndex: 'none'
-                },
-                // 淇濆瓨涓哄浘鐗�
-                saveAsImage: {}
-              }
-            },
-            xAxis: {
-              // type: 'time',
-              // 鍦ㄧ被鐩酱锛坱ype: 'category'锛変腑鏈夋晥銆�
-              data: dateList1,
-              name: '鏃堕棿'
-            },
-            yAxis: {
-              type: 'value',
-              axisLabel: {
-                show: true,
-                interval: 'auto'
-                // formatter:'{value} %'
-              },
-              name: 'mg/m鲁'
-            },
-            visualMap: {
-              show: false,
-              dimension: 0,
-              pieces: [
-                {
-                  lte: startIndex,
-                  color: 'green'
-                },
-                {
-                  gt: startIndex,
-                  lte: endIndex,
-                  color: 'red'
-                },
-                {
-                  gt: endIndex,
-                  lte: dateList1.length - 1,
-                  color: 'green'
+                // 鍓嶅悗鍖洪棿鍙樉绀鸿窛绂昏秴鏍囧尯闂存椂闂存渶杩戠殑娴撳害灏忎簬1鐨勬椂闂寸偣
+                for (let i = this.beforeData.length - 1; i >= 0; i--) {
+                  if (this.beforeData[i].mvFumeConcentration2 >= 1) {
+                    break;
+                  }
+                  if (this.beforeData[i].mvFumeConcentration2 < 1) {
+                    before.unshift(this.beforeData[i]);
+                  }
                 }
-              ]
-            },
-            series: [
-              {
-                name: '娌圭儫瓒呮爣鏁版嵁',
-                type: 'line',
-                data: fumeExceeding1,
+                console.log('before:', before);
+                for (let i = this.afterData.length - 1; i >= 0; i--) {
+                  if (this.afterData[i].mvFumeConcentration2 >= 1) {
+                    break;
+                  }
+                  if (this.afterData[i].mvFumeConcentration2 < 1) {
+                    after.unshift(this.afterData[i]);
+                  }
+                }
+                console.log('after:', after);
+                this.allExceptionTimeData = [
+                  ...before,
+                  ...this.exceedingData,
+                  ...after
+                ];
 
-                // markArea: {
-                //   itemStyle: {
-                //     color: 'rgba(255, 173, 177, 0.4)'
-                //   },
-                //   data: [
-                //     [
-                //       {
-                //         name: '娴撳害瓒呮爣',
-                //         xAxis: dateList[0]
-                //       },
-                //       {
-                //         xAxis: dateList[dateList.length - 1]
-                //       }
-                //     ]
-                //   ]
-                // },
-                markLine: {
-                  symbol: 'none',
-                  itemStyle: {
-                    // 鍩虹嚎鍏叡鏍峰紡
-                    normal: {
-                      lineStyle: {
-                        // show:false,
-                        // 'solid'瀹炵嚎锛�'dashed'铏氱嚎锛�'dotted'鐐圭嚎
-                        type: 'dashed'
+                // x杞存棩鏈熸椂闂�
+                let dateList1 = [];
+
+                // y杞� 瓒呮爣娌圭儫娴撳害
+                let fumeExceeding1 = [];
+                for (let i = 0; i < this.allExceptionTimeData.length; i++) {
+                  if (this.allExceptionTimeData[i] == null) {
+                    //x杞存棩鏈�
+                    //鏃犳暟鎹椂锛� 涓哄墠闈㈡椂闂寸偣澧炲姞10鍒嗛挓
+                    dateList1.push(
+                      dayjs(dateList1[dateList1.length - 1])
+                        .add(10, 'minute')
+                        .format('YYYY-MM-DD HH:mm:ss')
+                    );
+                    // 瓒呮爣娌圭儫娴撳害
+                    fumeExceeding1.push(null);
+                  } else {
+                    //x杞存棩鏈�
+                    dateList1.push(this.allExceptionTimeData[i].mvDataTime);
+                    // 瓒呮爣娌圭儫娴撳害
+                    fumeExceeding1.push(
+                      this.allExceptionTimeData[i].mvFumeConcentration2
+                    );
+                  }
+                }
+                let dateListLine = [];
+                let fumeExceedingTemp = [];
+
+                console.log('澶勭悊鍓嶆暟鎹负锛�', dateList1);
+               
+
+                // 棰楃矑搴�10鍒嗛挓鏃堕棿杩炵画
+                let objData= this.generateTimePoints(dateList1,fumeExceeding1);
+                dateListLine = objData['time']
+                fumeExceedingTemp = objData['data']
+        
+                console.log('澶勭悊鍚庢椂闂翠负锛�', dateListLine);
+                console.log('澶勭悊鍚庢暟鎹负锛�', fumeExceedingTemp);
+
+                // 鎻愬彇鏃堕棿鍖洪棿鍐呯殑鏁版嵁绱㈠紩
+                let startIndex = dateListLine.findIndex(
+                  (item) => item === dateList[0]
+                );
+                let endIndex = dateListLine.findIndex(
+                  (item) => item === dateList[dateList.length - 1]
+                );
+
+                let dateListTemp = [];
+                dateListLine.forEach((item) => {
+                  dateListTemp.push(dayjs(item).format('HH:mm'));
+                });
+
+                // 渚涚數寮傚父鎴栨帀绾垮浘褰hart1瀹炰緥涓虹┖
+                if (this.chart1 != null) {
+                  this.chart1 == null;
+                }
+                if (this.chart2 == null || this.chart2 == undefined) {
+                  this.chart2 = echarts.init(this.$refs.chart2);
+                }
+                console.log(dateListTemp);
+                console.log(fumeExceedingTemp)
+                let temp = fumeExceedingTemp.map((item) => {
+                        if (item >= 1) {
+                          return {
+                            value: item,
+                            itemStyle: {
+                              color: 'red'
+                            }
+                          };
+                        }
+                        return item;
+                      })
+                console.log(temp);
+                this.chart2.setOption({
+                  tooltip: {},
+                  toolbox: {
+                    // 宸ュ叿鏍�
+                    feature: {
+                      dataZoom: {
+                        // 鍖哄煙缂╂斁
+                        yAxisIndex: 'none'
                       },
-                      label: {
-                        show: true,
-                        position: 'end',
-                        formatter: '{b}'
-                      }
+                      // 淇濆瓨涓哄浘鐗�
+                      saveAsImage: {}
                     }
                   },
-                  data: [
-                    {
-                      name: '棰勮',
-                      type: 'average',
-                      yAxis: 1,
-                      lineStyle: {
-                        // color: '#ff0000'
+                  xAxis: {
+                    data: dateListTemp,
+                    name: '鏃堕棿'
+                  },
+                  yAxis: {
+                    type: 'value',
+                    axisLabel: {
+                      show: true,
+                      interval: 'auto'
+                      // formatter:'{value} %'
+                    },
+                    name: 'mg/m鲁'
+                  },
+                  visualMap: {
+                    show: false,
+                    dimension: 0,
+                    pieces: [
+                      {
+                        lte: startIndex,
+                        color: 'green'
+                      },
+                      {
+                        gt: startIndex,
+                        lte: endIndex,
                         color: 'red'
+                      },
+                      {
+                        gt: endIndex,
+                        lte: dateList1.length - 1,
+                        color: 'green'
+                      }
+                    ]
+                  },
+                  series: [
+                    {
+                      name: '娌圭儫娴撳害',
+                      type: 'line',
+                      data: temp,
+
+                      markArea: {
+                        itemStyle: {
+                          color: 'rgba(255, 173, 177, 0.4)'
+                        },
+                        data: [
+                          [
+                            {
+                              name: '瓒呮爣鏃堕棿娈�',
+                              xAxis: beginT
+                            },
+                            {
+                              xAxis: endT
+                            }
+                          ]
+                        ]
+                      },
+                      markLine: {
+                        symbol: 'none',
+                        itemStyle: {
+                          // 鍩虹嚎鍏叡鏍峰紡
+                          normal: {
+                            lineStyle: {
+                              type: 'dashed'
+                            },
+                            label: {
+                              show: true,
+                              position: 'end',
+                              formatter: '{b}'
+                            }
+                          }
+                        },
+                        data: [
+                          {
+                            name: '瓒呮爣',
+                            type: 'average',
+                            yAxis: 1,
+                            lineStyle: {
+                              // color: '#ff0000'
+                              color: 'red'
+                            }
+                          }
+                        ]
                       }
                     }
                   ]
-                }
-              }
-            ]
+                });
+              });
           });
-        }, 500);
       }
     },
     getDeviceInfo() {
@@ -1341,32 +1566,32 @@
     },
 
     // 鏌ヨ鍏ㄩ儴寮傚父琛ㄦ暟鎹�
-    getAllData() {
-      this.isNoData = false;
-      this.loading = true;
-      axiosInstanceInstance.get('/fume/abnormal').then((result) => {
-        this.abnormalData = result.data.data;
-        this.loading = false;
-        this.total = this.abnormalData.length;
-        if (result.data.data.length == 0) {
-          alert('璇ユ椂娈垫棤鏁版嵁');
-          this.isNoData = true;
-          return;
-        }
-        this.isNoData = false;
-        // 榛樿鏄剧ず绗竴椤�
-        this.handleCurrentChange(1);
-      });
+    // getAllData() {
+    //   this.isNoData = false;
+    //   this.loading = true;
+    //   axiosInstanceInstance.get('/fume/abnormal').then((result) => {
+    //     this.abnormalData = result.data.data;
+    //     this.loading = false;
+    //     this.total = this.abnormalData.length;
+    //     if (result.data.data.length == 0) {
+    //       ElMessage('璇ユ椂娈垫棤鏁版嵁')
+    //       this.isNoData = true;
+    //       return;
+    //     }
+    //     this.isNoData = false;
+    //     // 榛樿鏄剧ず绗竴椤�
+    //     this.handleCurrentChange(1);
+    //   });
 
-      // 寰楀埌寮傚父琛ㄧ殑鏈�鏃╁拰鏈�鏅氭椂闂�
-      setTimeout(() => {
-        axiosInstanceInstance.get('/fume/time').then((result) => {
-          this.beginTime = result.data.data[0].beginTime;
-          this.endTime = result.data.data[0].endTime;
-          // console.log('be,end',this.beginTime,this.endTime);
-        });
-      }, 500);
-    },
+    //   // 寰楀埌寮傚父琛ㄧ殑鏈�鏃╁拰鏈�鏅氭椂闂�
+    //   setTimeout(() => {
+    //     axiosInstanceInstance.get('/fume/time').then((result) => {
+    //       this.beginTime = result.data.data[0].beginTime;
+    //       this.endTime = result.data.data[0].endTime;
+    //       // console.log('be,end',this.beginTime,this.endTime);
+    //     });
+    //   }, 500);
+    // },
 
     getAbnormalDataByClick(val) {
       this.abnormalData = val;
@@ -1414,7 +1639,7 @@
           this.exception2 = result.data.data;
         });
     },
-    
+
     // 椤甸潰鍔犺浇鏃堕粯璁ゅ睍绀�7澶╁紓甯歌〃鏁版嵁
     getRecentSevenDays() {
       // 缁欑骇鑱旈�夋嫨鍣ㄨ缃粯璁ょ殑閫夋嫨椤�
@@ -1435,7 +1660,7 @@
         .get('/fume/abnormalone', { params: params })
         .then((response) => {
           if (response.data.data.length == 0) {
-            alert('璇ユ椂娈垫棤鏁版嵁');
+            ElMessage('璇ユ椂娈垫棤鏁版嵁');
             return;
           }
           // 淇濆瓨杩斿洖鐨�
@@ -1447,17 +1672,15 @@
           this.loading = false;
         });
     }
-  },
- 
+  }
 };
 </script>
 
 <style scoped>
-
 .exception-root-container {
   margin: 20px;
   padding: 10px;
-  border: 1px; 
+  border: 1px;
   height: 615px;
   /* min-height: 80vh;
   min-width: 100vh; */
@@ -1515,6 +1738,7 @@
   color: var(--el-color-primary);
 }
 .collapse-header {
+  margin-left: 5px;
   font-size: 18px;
 }
 .collapse-header-text {
@@ -1527,11 +1751,10 @@
 .box-card-label {
   font-size: 14px;
   white-space: nowrap;
-  overflow-x: auto;
+  /* overflow-x: auto; */
 }
 :deep().el-card {
   border-radius: 9px;
-  
 }
 /* 鈥樻煡鐪嬭鎯呪�� 鐨勫脊鍑烘楂樺害璋冩暣 */
 :deep().el-dialog {
@@ -1541,14 +1764,14 @@
   border-radius: 9px;
 }
 :deep().table-page .el-card__body {
-  padding: 0px;
+  /* padding: 0px; */
 }
 .table-text {
   font-size: 18px;
-  margin-bottom: 10px;
+  margin: 5px 0px 10px 4px;
 }
 .text-blank {
-  margin-left: 10px;
+  margin-right: 10px;
 }
 /* 搴楅摵鍚嶉�夋嫨鏂囨湰 */
 .describe-info {
@@ -1563,7 +1786,6 @@
   font-weight: bold;
 }
 
-
 /* 寮傚父琛ㄦ牸涓嬫爣绛句腑鐨勬暟缁� */
 .table-line-num {
   font-weight: bold;
@@ -1572,22 +1794,21 @@
 .button_info.el-button_inner {
   text-align: left;
 }
-:deep().el-collapse .el-collapse-item__content{
+:deep().el-collapse .el-collapse-item__content {
   padding-bottom: 0px;
 }
 .box-card {
   height: 190px;
 }
 :deep().box-card .el-card__body {
-  padding: 5px;
+  /* padding: 5px; */
 }
 .sub-box-card {
   height: 100px;
-  overflow-y: auto;
   border: 0px;
 }
 :deep().sub-box-card .el-card__body {
-  padding: 0px;
+  /* padding: 0px; */
 }
 .mx-1 {
   margin-bottom: 0px;

--
Gitblit v1.9.3