From c2f95b0b9090a2394b5b068582b932a5e57b86aa Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期二, 05 九月 2023 18:19:37 +0800
Subject: [PATCH] 雷达图 新增综合风险排名 数据接入配置

---
 src/views/exception/FlightInspection.vue |  548 ++++++++++++++++++++++++++++++++++--------------------
 1 files changed, 346 insertions(+), 202 deletions(-)

diff --git a/src/views/exception/FlightInspection.vue b/src/views/exception/FlightInspection.vue
index 61e9267..b4d4d3c 100644
--- a/src/views/exception/FlightInspection.vue
+++ b/src/views/exception/FlightInspection.vue
@@ -1,22 +1,27 @@
 <script>
-import InputSearch from '../../sfc/InputSearch.vue';
-import ExceptionType from '../../sfc/ExceptionType.vue';
-import TimeSelectWithShortCuts from '../../sfc/TimeSelectWithShortCuts.vue';
-import DustExceptionText from '../../sfc/DustExceptionText.vue';
+import InputSearch from '@/sfc/InputSearch.vue';
+import ExceptionType from '@/sfc/ExceptionType.vue';
+import TimeSelectWithShortCuts from '@/sfc/TimeSelectWithShortCuts.vue';
+import DustExceptionText from './components/DustExceptionText.vue';
 import { useFetch } from '../../utils/fetch.js';
 import { useCommonFunction } from '../../utils/common.js';
-import AreaAndmonitorType from '../../sfc/AreaAndmonitorType.vue'
-
+import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'
+import ButtonClick from '@/sfc/ButtonClick.vue'
+import index from '@/utils/exception_common_function/index.js'
 //  寮傚父鍥惧舰寮傛缁勪欢
 const DustLineChart = defineAsyncComponent(() =>
-  import('../../sfc/DustLineChart.vue')
+  import('./components/DustLineChart.vue')
 );
-
+import exceptionApi from '@/api/exceptionApi.js';
 import dayjs from 'dayjs';
 export default {
   components: {
+    ExceptionType,
+    // InputSearch,
     TimeSelectWithShortCuts,
     DustExceptionText,
+    DustLineChart,
+    ButtonClick,
     AreaAndmonitorType
   },
   data() {
@@ -37,15 +42,17 @@
       displayData: [],
       // 琛ㄦ牸楂樺害
       tableHeight: 400,
-      // 琛ㄦ牸鏁版嵁
+      // 琛ㄦ牸鏄剧ず
+      isTableShow:false,
       // 褰撳墠椤�
       currentPage: 1,
       // 姣忛〉鏉℃暟
       pageSize: 20,
+      // 琛ㄦ牸鐨勬�昏褰曟暟
       total: 0,
   
       // 琛ㄦ牸鏌ヨ鏃犳暟鎹椂
-      isNoData: false,
+      // isNoData: false,
       // 瀵硅瘽妗嗘樉绀�
       dialogTableVisible: false,
       // 淇濆瓨寮傚父瀵瑰簲鐨勫簵閾哄悕绉板拰璁惧缂栧彿
@@ -81,8 +88,6 @@
       // 绔欑偣鎬绘暟閲�
       siteTotal: 0,
 
-      // 寮傚父鐨勭珯鐐规�绘暟閲�
-      // exceptionSiteNum:0,
 
       // 閫変腑琛ㄦ牸褰撳墠琛岀殑鏁版嵁
       tableCurrentRowData: null,
@@ -100,8 +105,6 @@
         afterButton: false,
         // 鎶樼嚎鍥�
         lineChart: false,
-        // 寮傚父绔欑偣鍚嶅瓙鏂囨湰
-        text:false
         
       },
 
@@ -126,8 +129,9 @@
         banTouch:0,
         // 0浠h〃鍒嗛〉锛�1浠h〃涓嶅垎椤�
         originClick:0
-      }
-
+      },
+      // 鏉′欢鏌ヨ瀵硅瘽妗�
+      conditionDialogVisible:false
     };
   },
   setup() {
@@ -168,7 +172,6 @@
     },
 
     // 褰撻�夋嫨鐨勬椂闂村彂鐢熷彉鍖栨椂锛屽紓甯稿垎鏋愰儴鍒嗙殑寮傚父搴楅摵鏁伴噺鍚屾鍙樺寲
-
         beginTime() {
           this.getShopNames();
       },
@@ -180,31 +183,21 @@
     }
   },
   mounted() {
-    // 娴嬭瘯缁勫悎寮忓嚱鏁�
-    // let param = {
-    //   siteName: '閲戝北鍖洪噾灞辨柊鍩嶫SC1-0401鍗曞厓1-11-01鍦板潡椤圭洰09',
-    //   beginTime: '2023-07-01 00:00:00',
-    //   endTime: '2023-07-10 00:00:00'
-    // };
-    // this.backData = this.request('/dust/history1', param);
-    // console.log('鍘嗗彶鏁版嵁涓猴細', this.backData.value);
-
     this.backExceptionDataAWeekAgo();
-    // this.calTableHeight();
     // 鏌ヨ鏃堕棿娈电殑鍚勫紓甯哥殑绔欑偣锛屾煡璇㈣鏃堕棿鍖洪棿鐨勫悇寮傚父鏁伴噺
     this.getShopNames();
-    // this.exception.exception0 = this.getSiteNameByExceptionType('0',this.beginTime,this.endTime)
-    // console.log('寮傚父鏁版嵁涓猴細',this.exception.exception0);
+    this.getSiteNume()
   },
 
   methods: {
+   // 鏀惧洖绔欑偣鎬绘暟閲�
+    getSiteNume(){
+      exceptionApi.getSitesNum().then(res => {
+      this.siteTotal = res.data.data.length
+    })
+    
+    },
 
-
-    // getExceptionSiteNum(){
-    //   this.$http.get('/dust/exceptionsitenum').then(result => {
-    //     this.exceptionSiteNum = result.data.data.length 
-    //   })
-    // },
     /**
      * description锛氱偣鍑诲紓甯哥珯鐐瑰悕瀛楁椂 杩斿洖鐨勬暟鎹�
      * @param锛� 
@@ -225,35 +218,12 @@
       this.selectedRowIndex = this.displayData.indexOf(this.tableCurrentRowData);
 
     },
-
-    /**
-     * description锛氳繑鍥炴椂闂存暟缁勶紝浠庡紑濮嬫椂闂寸殑鍚�15鍒嗛挓鍒扮粨鏉熸椂闂翠负姝€��
-     * @param锛� 寮傚父鐨勫紑濮�,寮傚父缁撴潫鏃堕棿
-     * @createTime:2023-08-17
-     * @returns锛氭瘮濡�12:00:00-13:00:00 鎵�浠ヨ繑鍥炵殑鏁扮粍鍏冪礌鏄� 12:00:00 ,12:15:00,12:30:00,12:45:00锛�13:00:00
-     */
-    descTenTime(begin, end) {
-      let time = [];
-      if (begin == end) {
-        time.push(begin);
-        return time;
-      }
-      time.push(begin);
-      let temp = dayjs(begin).add(15, 'minute').format('YYYY-MM-DD HH:mm:ss');
-      while (temp != end) {
-        time.push(temp);
-        temp = dayjs(temp).add(15, 'minute').format('YYYY-MM-DD HH:mm:ss');
-      }
-      // 鍔犱笂寮傚父鐨勭粨鏉熸椂闂�
-      time.push(temp);
-      return time;
-    },
     /**
      * description锛氭柇鐢垫垨鏂綉鏃惰缃殑琛ㄦ牸鏁版嵁
      */
     setOfflineTbleData(){
       // 鏃犳暟鎹椂鐨勬椂闂存暟缁� 鏃堕棿鐩稿樊15鍒嗛挓
-      const abnormalTimeTenMinute = this.descTenTime(
+      const abnormalTimeTenMinute = index.descFiftyTime(
         this.tableCurrentRowData.beginTime,
         this.tableCurrentRowData.endTime
       );
@@ -274,63 +244,9 @@
       this.exceptionTotal = abnormalTimeTenMinute.length;
     },
 
-    /**
-     * description锛氳繑鍥炲紑濮嬫椂闂寸殑鍓�45鍒嗛挓鐨勬椂闂寸偣锛岀粨鏉熸椂闂村悗45鍒嗛挓鐨勬椂闂寸偣
-     * @param锛� 寮傚父鐨勫紑濮嬫椂闂达紝寮傚父鐨勭粨鏉熸椂闂淬��
-     * @returns锛氭暟缁勩�倀ime[0],time[1],time[2],time[3]鍒嗗埆浠h〃寮傚父鍖洪棿鍓�45鍒嗛挓鐨勬椂闂寸偣锛屽墠15鍒嗛挓鐨勬椂闂寸偣,鍚�15鍒嗛挓鐨勬椂闂寸偣锛屽悗45鍒嗛挓鐨勬椂闂寸偣
-     */
-    before45AndAfter45(begin, end) {
-      let time = [];
-      // 鍓嶄竴娈电殑寮�濮嬫椂闂�
-      const before45MinBegin = dayjs(begin)
-        .subtract(45, 'minute')
-        .format('YYYY-MM-DD HH:mm:ss');
-      // 鍓嶄竴娈电殑缁撴潫鏃堕棿
-      const before15MinBegin = dayjs(begin)
-        .subtract(15, 'minute')
-        .format('YYYY-MM-DD HH:mm:ss');
+  
 
-      // 鍚庝竴娈电殑寮�濮嬫椂闂�
-      const after15MinBegin = dayjs(end)
-        .add(15, 'minute')
-        .format('YYYY-MM-DD HH:mm:ss');
-      // 寰�鍚�40鍒嗛挓
-      const after45MinEnd = dayjs(end)
-        .add(45, 'minute')
-        .format('YYYY-MM-DD HH:mm:ss');
-      time.push(before45MinBegin);
-      time.push(before15MinBegin);
-      time.push(after15MinBegin);
-      time.push(after45MinEnd);
-      return time;
-    },
-    /**
-     * description锛氳繑鍥炴煇绔欑偣鍦ㄨ鏃舵鍘嗗彶鏁版嵁鐨刧et璇锋眰鍙傛暟
-     * @param锛� 绔欑偣鍚嶇О锛� 寮�濮嬫椂闂达紝 缁撴潫鏃堕棿
-     * @returns锛氬璞�
-     */
-    requestGetParms(name, begin, end) {
-      return {
-        siteName: name,
-        beginTime: begin,
-        endTime: end
-      };
-    },
-    /**
-     * description锛氱浉宸灏戜釜15鍒嗛挓  璁$畻涓寘鎷紑濮嬫椂闂达紝缁撴潫鏃堕棿銆�
-     * @param锛� 寮傚父寮�濮嬫椂闂达紝寮傚父缁撴潫鏃堕棿
-     * @returns锛氭暣鏁�
-     */
-    diffFiftyMinutesNum(beginNormal, endNormal) {
-      // 灏嗗紑濮嬫椂闂村拰缁撴潫鏃堕棿杞崲涓篸ayjs瀵硅薄
-      const start = dayjs(beginNormal).subtract(15, 'minute');
-      const end = dayjs(endNormal);
 
-      // 璁$畻缁撴潫鏃堕棿鍑忓幓寮�濮嬫椂闂翠腑闂寸浉宸灏戜釜鍗佸垎閽�
-      const diffInMinutes = end.diff(start, 'minute');
-      const diffInTenMinutes = Math.floor(diffInMinutes / 15);
-      return diffInTenMinutes;
-    },
     // 娈电數鎴栨柇缃戝尯闂存棤鏁版嵁锛岄渶瑕佽ˉ鍏呫�傚叾浠栫殑閮芥湁鏁版嵁锛岀洿鎺ヤ竴娆¤姹傚叏閮ㄦ椂娈靛氨濂�
 
     // 鏍规嵁寮傚父鍖洪棿鏋勯�犲墠鍚庣棣栧熬 鍓嶅尯闂� 涓棿鍖洪棿 鍚庡尯闂�
@@ -361,7 +277,7 @@
         let timeAndValue = {};
 
         // 浠庢坊鍔犱簡棣栦綅鍖洪棿鐨勫紑濮嬪拰缁撴潫鏃堕棿杩涜閬嶅巻 淇濊瘉鏃堕棿浠�10鍒嗛挓涓洪棿闅�
-        timeAndValue = this.keepContinuousByEachFiftyMinutes(
+        timeAndValue = index.keepContinuousByEachFiftyMinutes(
             allTime[0],
             allTime[3],
             this.dialog.allExceptionTimeData
@@ -383,59 +299,7 @@
             });
        
     },
-    /**
-     * description锛氬垽鏂璬ata涓槸鍚︽湁璇ユ棩鏈熸椂闂达紝瀛樺湪杩斿洖璇ユ椂闂村搴旂殑娴撳害鍊硷紝鍚﹀垯杩斿洖-1
-     * @param锛� 鍔犱笂鍓嶅悗鍖洪棿鐨勫紓甯告暟鎹紝鏃堕棿瀛楃涓�
-     * @returns锛�
-     */
-    findTimeInExceptionData(data, time) {
-      for (let i = 0; i < data.length; i++) {
-        if (data[i] == null) {
-          continue;
-        }
-        if (data[i]['lst'] == time) {
-          return data[i]['dustValue'];
-        }
-      }
-      return -1;
-    },
-    /**
-     * description锛氭牴鎹紑濮嬪拰缁撴潫鏃堕棿,杩斿洖浠�15鍒嗛挓涓洪棿闅旂殑鏃堕棿鍜屽搴旂殑鍊�
-     * @param锛� 鍓嶅尯闂寸殑寮�濮嬫椂闂达紝 鍚庡尯闂寸殑缁撴潫鏃堕棿, 鍔犱笂鍓嶅悗鍖洪棿鐨勬�绘椂闂存鐨勫紓甯告暟鎹殑瀵硅薄鏁扮粍
-     * @returns锛氬璞°�傚寘鍚簡鎶樼嚎鍥剧殑x杞达紝y杞寸殑閰嶇疆鏁版嵁
-     */
-    keepContinuousByEachFiftyMinutes(
-      intervalStarTime,
-      intervalEndTime,
-      headAndTailExceptionData
-    ) {
-      let xAxis = [];
-      let yAxis = [];
-      let obj = {};
-      let current = intervalStarTime;
-      let tail = dayjs(intervalEndTime)
-        .add(15, 'minute')
-        .format('YYYY-MM-DD HH:mm:ss');
-      while (current != tail) {
-        let value = this.findTimeInExceptionData(
-          headAndTailExceptionData,
-          current
-        );
-        if (value != -1) {
-          xAxis.push(current);
-          yAxis.push(value);
-        } else {
-          xAxis.push(current);
-          yAxis.push(null);
-        }
-        current = dayjs(current)
-          .add(15, 'minute')
-          .format('YYYY-MM-DD HH:mm:ss');
-      }
-      obj['xAxis'] = xAxis;
-      obj['yAxis'] = yAxis;
-      return obj;
-    },
+
 
     /**
      * description锛氱粯鍒舵姌绾垮浘
@@ -890,13 +754,13 @@
       // beforeAndAfterTime[1]:鍓�15鍒嗛挓鐨勬椂闂寸偣
       // beforeAndAfterTime[2]:鍚�15鍒嗛挓鐨勬椂闂寸偣
       // beforeAndAfterTime[3]:鍚�45鍒嗛挓鐨勬椂闂寸偣
-      let beforeAndAfterTime = this.before45AndAfter45(
+      let beforeAndAfterTime = index.before45AndAfter45(
         exceptionBeginTime,
         exceptionEndTime
       );
 
       // 鏋勯�犲紓甯告椂闂村墠鍚庡尯闂存暟鎹姹傚弬鏁�(闄や簡鏂綉涓兘鐢ㄥ埌锛�
-      let paramsAllTime = this.requestGetParms(
+      let paramsAllTime = index.requestGetParms(
         this.tableCurrentRowData.name,
         beforeAndAfterTime[0],
         beforeAndAfterTime[3]
@@ -923,7 +787,7 @@
 
         // 寰楀埌涓婁竴琛岀殑鏁版嵁
         this.tableCurrentRowData = this.displayData[this.selectedRowIndex]
-        let params = this.requestGetParms(this.tableCurrentRowData.name,this.tableCurrentRowData.beginTime,this.tableCurrentRowData.endTime)
+        let params = index.requestGetParms(this.tableCurrentRowData.name,this.tableCurrentRowData.beginTime,this.tableCurrentRowData.endTime)
         this.loading.preButton = true
         this.$http
           .get('/dust/history', { params: params })
@@ -959,7 +823,7 @@
          // 寰楀埌涓婁竴琛岀殑鏁版嵁
          this.tableCurrentRowData = this.displayData[this.selectedRowIndex]
 
-        let params = this.requestGetParms(this.tableCurrentRowData.name,this.tableCurrentRowData.beginTime,this.tableCurrentRowData.endTime)
+        let params = index.requestGetParms(this.tableCurrentRowData.name,this.tableCurrentRowData.beginTime,this.tableCurrentRowData.endTime)
         this.loading.afterButton = true
         this.$http
           .get('/dust/history', { params: params })
@@ -1242,15 +1106,18 @@
           this.displayData = response.data.data.rows;
           this.loading.queryButton = false
           this.loading.tableLoading = false;
+
           if (response.data.data.total == 0) {
             ElMessage('璇ユ椂娈垫棤鏁版嵁');
-            this.isNoData = true;
+            this.isTableShow = false
             return;
           }
+          this.isTableShow = true
           this.total = response.data.data.total;
           // 绉婚櫎绌烘暟鎹姸鎬�
-          this.isNoData = false;
         });
+
+      this.conditionDialogVisible = false
     },
 
     /**
@@ -1278,9 +1145,10 @@
 
           if (response.data.data.total == 0) {
             ElMessage('璇ユ椂娈垫棤鏁版嵁');
-            this.isNoData = true;
+            this.isTableShow = false
             return;
           }
+          this.isTableShow = true
           this.total = response.data.data.total;
           this.loading.tableLoading = false;
         });
@@ -1349,7 +1217,16 @@
 </script>
 
 <template>
- 
+ <el-button type="primary" @click="conditionDialogVisible = true">
+    鎼滅储鏉′欢
+  </el-button>
+
+  <el-dialog
+    v-model="conditionDialogVisible"
+    title="Tips"
+    width="30%"
+    class="condition-dialog"
+  >
   <el-row ref="h1">
     <el-col>
       <el-form :inline="true">
@@ -1358,20 +1235,55 @@
           <AreaAndmonitorType ></AreaAndmonitorType>
           </el-form-item>
 
+          <!-- <el-form-item>
+            <InputSearch
+              isNeedDefaultSite="0"
+              @submit-value="(n) => (form.name = n)"
+              @submit-site-Nums="(n) => (siteTotal = n)"
+            >
+            </InputSearch>
+          </el-form-item> -->
+
           <el-form-item>
-            <TimeSelectWithShortCuts @submit-time="giveTime"></TimeSelectWithShortCuts>
+            <TimeSelectWithShortCuts timeType="day" @submit-time="giveTime" ></TimeSelectWithShortCuts>
+          </el-form-item>
+          
+          <el-form-item>
+            <ExceptionType
+              @submit-value="(n) => form.exceptionName = n"
+            ></ExceptionType>
           </el-form-item>
 
+      
         </div>
 
         <div class="head-container-search">
           <el-form-item>
-            <el-button type="warning" :loading="loading.queryButton" @click="handleSubmit">鏌ヨ</el-button>
+            <!-- <el-button type="warning" :loading="loading.queryButton" @click="handleSubmit">鏌ヨ</el-button> -->
+            <ButtonClick content="鍒嗘瀽" type="warning" :loading="loading.queryButton" @do-search="handleSubmit"></ButtonClick>
           </el-form-item>
         </div>
       </el-form>
     </el-col>
   </el-row>
+  
+
+<!-- 
+    <template #footer>
+
+      <span class="dialog-footer">
+        <el-button @click="dialogVisible = false">Cancel</el-button>
+        <el-button type="primary" @click="dialogVisible = false">
+          Confirm
+        </el-button>
+      </span>
+    </template> -->
+  </el-dialog>
+
+
+
+
+
 
   <el-row class="head-describtion-text" ref="h2">
     <el-row>
@@ -1431,7 +1343,7 @@
               </div>
               <hr />
               <!-- 寮傚父鐨勫簵閾哄悕瀛� -->
-              <div class="card-exception-buttom"   v-loading="loading.text" >
+              <div class="card-exception-buttom">
                 <el-scrollbar max-height="90px">
                   <DustExceptionText
                   :site-name="item.name"
@@ -1439,7 +1351,7 @@
                   :begin-time="beginTime"
                   :end-time="endTime"
                     @submit-exception-data="getAbnormalDataByClick"
-                    @subloading="(n)=>loading.text=n"
+
                     v-for="(item, index) in exception.exception4"
                     :key="item"
                     >{{ item.name }}
@@ -1498,7 +1410,7 @@
               </div>
               <hr />
               <!-- 寮傚父鐨勫簵閾哄悕瀛� -->
-              <div class="card-exception-buttom"   v-loading="loading.text">
+              <div class="card-exception-buttom">
                 <el-scrollbar max-height="90px">
                   <DustExceptionText
                   :site-name="item.name"
@@ -1565,7 +1477,7 @@
               </div>
               <hr />
               <!-- 寮傚父鐨勫簵閾哄悕瀛� -->
-              <div class="card-exception-buttom"   v-loading="loading.text">
+              <div class="card-exception-buttom">
                 <el-scrollbar max-height="90px">
                   <DustExceptionText
                   :site-name="item.name"
@@ -1632,7 +1544,7 @@
               </div>
               <hr />
               <!-- 寮傚父鐨勫簵閾哄悕瀛� -->
-              <div class="card-exception-buttom"   v-loading="loading.text">
+              <div class="card-exception-buttom">
                 <el-scrollbar max-height="90px">
                   <DustExceptionText
                   :site-name="item.name"
@@ -1703,7 +1615,7 @@
               </div>
               <hr />
               <!-- 寮傚父鐨勫簵閾哄悕瀛� -->
-              <div class="card-exception-buttom"   v-loading="loading.text">
+              <div class="card-exception-buttom">
                 <el-scrollbar max-height="90px">
                   <DustExceptionText
                   :site-name="item.name"
@@ -1765,7 +1677,7 @@
               </div>
               <hr />
               <!-- 寮傚父鐨勫簵閾哄悕瀛� -->
-              <div class="card-exception-buttom"   v-loading="loading.text">
+              <div class="card-exception-buttom">
                 <el-scrollbar max-height="90px">
                   <DustExceptionText
                   :site-name="item.name"
@@ -1827,7 +1739,7 @@
               </div>
               <hr />
               <!-- 寮傚父鐨勫簵閾哄悕瀛� -->
-              <div class="card-exception-buttom"   v-loading="loading.text">
+              <div class="card-exception-buttom">
                 <el-scrollbar max-height="90px">
                   <DustExceptionText
                   :site-name="item.name"
@@ -1958,7 +1870,7 @@
               </div>
               <hr />
               <!-- 寮傚父鐨勫簵閾哄悕瀛� -->
-              <div class="card-exception-buttom"   v-loading="loading.text">
+              <div class="card-exception-buttom">
                 <el-scrollbar max-height="90px">
                   <DustExceptionText
                   :site-name="item.name"
@@ -1989,12 +1901,256 @@
     </el-col>
   </el-row>
 
+  <el-row v-show="isTableShow">
+    <el-col >
+      <el-table
+        ref="table"
+        :data="displayData"
+        :height="tableHeight"
+        :highlight-current-row="true"
+        size="default"
+        v-loading="loading.tableLoading"
+        border
+      >
+        <el-table-column
+          type="index"
+          label="搴忓彿"
+          width="60px"
+          align="center"
+          fixed
+          :index="indexMethod1"
+        />
+        <el-table-column prop="name" label="绔欑偣鍚嶇О" show-overflow-tooltip />
+        <el-table-column
+          prop="mnCode"
+          label="璁惧缂栧彿"
+          align="center"
+          show-overflow-tooltip
+        />
+        <el-table-column
+          prop="exception"
+          label="寮傚父绫诲瀷"
+          align="center"
+          show-overflow-tooltip
+        />
+        <el-table-column
+          prop="region"
+          label="鍖哄煙"
+          align="center"
+          show-overflow-tooltip
+        />
+        <el-table-column
+          prop="beginTime"
+          label="寮�濮嬫椂闂�"
+          align="center"
+          show-overflow-tooltip
+        />
+        <el-table-column
+          prop="endTime"
+          label="缁撴潫鏃堕棿"
+          align="center"
+          show-overflow-tooltip
+        />
+        <el-table-column
+          prop="typename"
+          label="鍦烘櫙"
+          align="center"
+          show-overflow-tooltip
+        />
+        <el-table-column
+          prop="address"
+          label="鍦板潃"
+          align="center"
+          show-overflow-tooltip
+        />
+        <el-table-column
+          prop="dutyCompany"
+          label="杩愮淮鍟�"
+          align="center"
+          show-overflow-tooltip
+        />
+        <el-table-column label="鎿嶄綔" align="center">
+          <template #default="{ row }">
+            <el-button
+              type="primary"
+              class="table-button"
+              @click="showDialog(row)"
+              >鏌ョ湅璇︽儏</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination
+        ref="h4"
+        background
+        layout="total, sizes, prev, pager, next, jumper"
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :total="total"
+        :page-sizes="[10, 20, 50, 100]"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      >
+      </el-pagination>
+    </el-col>
+  </el-row>
+
+
+  <el-dialog v-model="dialogTableVisible" draggable align-center height="300px">
+    <!-- 澶� -->
+    <template #header>
+      <div class="diag-head">
+        <div class="diag-head-text">
+          <div>
+          <span class="diag-head-text1">绔欑偣鍚嶇О锛�</span
+          >{{ tableCurrentRowData.name }}
+          </div>
+
+          <div>
+          <span class="diag-head-text1">寮傚父绫诲瀷锛�</span>
+          <span v-if="tableCurrentRowData.exceptionType == '0'"
+            >鏂數鎴栨柇缃�</span
+          >
+          <span v-else-if="tableCurrentRowData.exceptionType == '1'"
+            >鏁版嵁瓒呬綆</span
+          >
+          <span v-else-if="tableCurrentRowData.exceptionType == '2'">瓒呮爣</span>
+          <span v-else-if="tableCurrentRowData.exceptionType == '3'"
+            >鏁版嵁闀挎椂闂存棤娉㈠姩</span
+          >
+          <span v-else-if="tableCurrentRowData.exceptionType == '4'"
+            >閲忕骇绐佸彉寮傚父</span
+          > <span v-else-if="tableCurrentRowData.exceptionType == '5'"
+            >涓磋繎瓒呮爣寮傚父</span
+          > <span v-else-if="tableCurrentRowData.exceptionType == '6'"
+            >鍗曟棩瓒呮爣娆℃暟涓寸晫寮傚父</span
+          > <span v-else-if="tableCurrentRowData.exceptionType == '7'"
+            >婊戝姩骞冲潎鍊煎紓甯�</span
+          >
+        </div>
+
+          <div>
+            <span class="diag-head-text1">寮傚父鏃堕棿娈碉細</span
+            >{{ tableCurrentRowData.beginTime }} ~
+            {{ tableCurrentRowData.endTime }}
+          </div>
+        </div>
+
+        <div class="chart-jump-button">
+          <el-button
+            type="danger"
+            :loading="loading.preButton"
+            :disabled="dialog.isPreCantouch || flag.banTouch"
+            @click="getPreviousRowData"
+            >涓婃潯寮傚父</el-button
+          >
+          <el-button
+            type="danger"
+            :loading="loading.afterButton"
+            :disabled="dialog.isNextCantouch || flag.banTouch"
+            @click="getNextRowData"
+            >涓嬫潯寮傚父</el-button
+          >
+        </div>
+      </div>
+    </template>
+
+    <!-- :option="dialog.option" -->
+
+    <!-- 鍥惧舰 -->
+    <DustLineChart
+      :option="dialog.option"
+      :is-open-dialog="dialogTableVisible"
+      v-loading="loading.lineChart"
+    ></DustLineChart>
+
+    <!-- 琛ㄦ牸 -->
+    <div>
+      <el-table :data="dialog.historyData" size="default" height="200" border>
+        <el-table-column
+          type="index"
+          label="搴忓彿"
+          width="60px"
+          align="center"
+          fixed
+          :index="indexMethod2"
+        ></el-table-column>
+        <el-table-column
+          fixed
+          prop="name"
+          label="绔欑偣鍚嶇О"
+          show-overflow-tooltip
+        />
+        <el-table-column
+          prop="mnCode"
+          label="璁惧缂栧彿"
+          align="center"
+          show-overflow-tooltip
+        />
+        <el-table-column
+          prop="dutyCompany"
+          label="杩愮淮鍟�"
+          align="center"
+          show-overflow-tooltip
+        />
+        <el-table-column
+          prop="lst"
+          label="閲囬泦鏃堕棿"
+          align="center"
+          show-overflow-tooltip
+        />
+        <el-table-column
+          prop="dustValue"
+          label="棰楃矑鐗╂祿搴�(mg/m鲁)"
+          align="center"
+          show-overflow-tooltip
+        />
+      </el-table>
+    </div>
+    <template #footer>
+      <el-tag type="success" class="mx-1" effect="dark" round
+        ><span
+          class="table-line-lable"
+          v-show="tableCurrentRowData.exceptionType == '0'"
+          >缂哄け鏁版嵁锛�
+        </span>
+        <span
+          v-show="
+            tableCurrentRowData.exceptionType == '1' ||
+            tableCurrentRowData.exceptionType == '2' ||
+            tableCurrentRowData.exceptionType == '3' ||
+            tableCurrentRowData.exceptionType == '4' 
+          "
+          >寮傚父鏁版嵁锛�</span
+        >
+        <span class="table-line-num">{{ dialog.exceptionTotal }}鏉�</span>
+        <span
+          v-show="
+            tableCurrentRowData.exceptionType === '0'
+          "
+        >
+          (閫昏緫璁$畻)</span
+        >
+      </el-tag>
+    </template>
+  </el-dialog>
 </template>
 
 <style lang="scss" scoped>
+
 .el-row {
   margin-left: 10px;
 }
+/* 涓嬫媺鑿滃崟寮�濮� */
+.example-showcase .el-dropdown-link {
+  cursor: pointer;
+  color: var(--el-color-primary);
+  display: flex;
+  align-items: center;
+}
+
+/* 涓嬫媺鑿滃崟缁撴潫 */
 
 /* 鏉′欢鏌ヨ妯″潡鐨勬牱寮� */
 .head-container-search {
@@ -2084,9 +2240,7 @@
 
 
 /* 鏌ョ湅璇︽儏瀵硅瘽妗嗘ā鍧楃殑鏍峰紡 */
-:deep(.el-dialog) {
-  // 瀵硅瘽妗嗛珮搴�
-}
+
 .diag-head {
   // 瀵硅瘽妗嗗ご閮ㄥ尯鍩�
   min-height: 200px;
@@ -2111,20 +2265,10 @@
   border: 2px solid #7bc0fc;
 }
 .chart-jump-button {
-  // 鈥樹笂涓�鏉♀�欙紝鈥樹笅涓�鏉♀�� 鎸夐挳
-  // border: 1px solid #fdc2db;
-  min-height: 30px;
-  width: 200px;
-  float: right;
+  display: flex;
+  justify-content: right;
 }
 
-.line-chart {
-  // 寮傚父鎶樼嚎鍥�
-  width: 920px;
-  height: 300px;
-  margin-bottom: 20px;
-  min-width: 600px;
-}
 .mx-1 {
   position: absolute;
   left: 10px;

--
Gitblit v1.9.3