From 73cb3ec2b1660610e3621d7614ad308f2c19331d Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期四, 16 十一月 2023 17:19:38 +0800
Subject: [PATCH] 1.修改了综合风险模型表格数据的获取 2.修改了时间选择器

---
 src/views/exception/FlightInspection.vue | 2166 ++++++++++++++++++++++++---------------------------------
 1 files changed, 915 insertions(+), 1,251 deletions(-)

diff --git a/src/views/exception/FlightInspection.vue b/src/views/exception/FlightInspection.vue
index b4d4d3c..786f0ca 100644
--- a/src/views/exception/FlightInspection.vue
+++ b/src/views/exception/FlightInspection.vue
@@ -1,28 +1,24 @@
 <script>
-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 { defineAsyncComponent } from 'vue'
+import TimeShortCuts from '@/sfc/TimeShortCuts.vue'
+import { useCommonFunction } from '../../utils/common.js'
 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('./components/DustLineChart.vue')
-);
-import exceptionApi from '@/api/exceptionApi.js';
-import dayjs from 'dayjs';
+const DustLineChart = defineAsyncComponent(() => import('./components/DustLineChart.vue'))
+import exceptionApi from '@/api/exceptionApi.js'
+import dayjs from 'dayjs'
+import { ElMessage } from 'element-plus'
+import AnalysisCard from './components/AnalysisCard.vue'
+
 export default {
   components: {
-    ExceptionType,
-    // InputSearch,
-    TimeSelectWithShortCuts,
-    DustExceptionText,
+    TimeShortCuts,
     DustLineChart,
     ButtonClick,
-    AreaAndmonitorType
+    AreaAndmonitorType,
+    AnalysisCard
   },
   data() {
     return {
@@ -31,8 +27,7 @@
         // 绔欑偣鍚嶇О
         name: '',
         // 閫夋嫨鐨勫紓甯哥被鍨�
-        exceptionName: [],
-       
+        exceptionName: []
       },
       beginTime: '',
       endTime: '',
@@ -43,16 +38,26 @@
       // 琛ㄦ牸楂樺害
       tableHeight: 400,
       // 琛ㄦ牸鏄剧ず
-      isTableShow:false,
+      isTableShow: false,
       // 褰撳墠椤�
       currentPage: 1,
       // 姣忛〉鏉℃暟
       pageSize: 20,
       // 琛ㄦ牸鐨勬�昏褰曟暟
       total: 0,
-  
-      // 琛ㄦ牸鏌ヨ鏃犳暟鎹椂
-      // isNoData: false,
+
+      // 鏌ヨ鎸夐挳鏃犳暟鎹椂
+      isNoData: {
+        exception0: true,
+        exception1: true,
+        exception2: true,
+        exception3: true,
+        exception4: true,
+        exception5: true,
+        exception6: true,
+        exception7: true
+      },
+      // eslint-disable-next-line no-undef
       // 瀵硅瘽妗嗘樉绀�
       dialogTableVisible: false,
       // 淇濆瓨寮傚父瀵瑰簲鐨勫簵閾哄悕绉板拰璁惧缂栧彿
@@ -73,7 +78,6 @@
         exception6: [],
         // 婊戝姩骞冲潎鍊煎紓甯�
         exception7: [],
-        
 
         // 璇ユ椂娈电殑寮傚父鏁伴噺
         exception0Num: 0,
@@ -83,29 +87,27 @@
         exception4Num: 0,
         exception5Num: 0,
         exception6Num: 0,
-        exception7Num: 0,
+        exception7Num: 0
       },
       // 绔欑偣鎬绘暟閲�
       siteTotal: 0,
 
-
       // 閫変腑琛ㄦ牸褰撳墠琛岀殑鏁版嵁
       tableCurrentRowData: null,
       // 閫変腑琛ㄦ牸褰撳墠琛岀殑绱㈠紩
-      selectedRowIndex:-2,
+      selectedRowIndex: -2,
       // 椤甸潰涓婄殑鎸夐挳鍔犺浇鐘舵��
       loading: {
         // 鏌ヨ鎸夐挳
-        queryButton:false,
-            // 琛ㄦ牸鍔犺浇涓�
-       tableLoading: false,
+        queryButton: false,
+        // 琛ㄦ牸鍔犺浇涓�
+        tableLoading: false,
         // 涓婁竴鏉℃寜閽�
         preButton: false,
         // 涓嬩竴鏉℃寜閽�
         afterButton: false,
         // 鎶樼嚎鍥�
-        lineChart: false,
-        
+        lineChart: false
       },
 
       dialog: {
@@ -124,128 +126,245 @@
       },
 
       // 鏍囪浣�
-      flag:{
+      flag: {
         // 鍔犺浇鏃� 涓婁笅鏉℃寜閽笉鑳藉啀鐐瑰嚮
-        banTouch:0,
+        banTouch: 0,
         // 0浠ｈ〃鍒嗛〉锛�1浠ｈ〃涓嶅垎椤�
-        originClick:0
-      },
-      // 鏉′欢鏌ヨ瀵硅瘽妗�
-      conditionDialogVisible:false
-    };
+        originClick: 0
+      }
+    }
   },
   setup() {
     // provide('search',readonly(form))
-    const { backData, error, request } = useFetch();
-    const { isExceedOneMonth } = useCommonFunction();
+    const { isExceedOneMonth } = useCommonFunction()
     return {
-      backData,
-      error,
-      request,
       isExceedOneMonth
-    };
+    }
   },
   // 鐩戝惉  鍒ゆ柇鎸夐挳鏄惁鍙偣鍑�
   watch: {
     selectedRowIndex(newVaue) {
       // 澶勪簬琛ㄦ牸鐨勬渶鍚庝竴鏉℃暟鎹� 璁剧疆鈥樹笂涓�鏉♀�欐寜閽笉鍙偣
-      if (newVaue === this.displayData.length - 1) {
-        this.dialog.isPreCantouch = true;
+      if (newVaue === 0) {
+        this.dialog.isPreCantouch = true
         //鐢ㄦ埛鍏堢偣浜嗙涓�鏉★紝pre涓簍rue,鐒跺悗鐐瑰嚮鏈�鍚庝竴鏉�,next涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿�
         if (this.dialog.isNextCantouch == true) {
-          this.dialog.isNextCantouch = false;
+          this.dialog.isNextCantouch = false
         }
       }
-      // 澶勪簬琛ㄦ牸绗竴鏉℃暟鎹� 璁剧疆鈥樹笅涓�鏉♀�欐寜閽笉鍙偣
-      else if (newVaue === 0) {
-        this.dialog.isNextCantouch = true;
+      // 澶勪簬琛ㄦ牸绗竴鏉℃暟鎹� 璁剧疆鈥樹笂涓�鏉♀�欐寜閽笉鍙偣
+      else if (newVaue === this.displayData.length - 1) {
+        this.dialog.isNextCantouch = true
         //鐢ㄦ埛鍏堢偣浜嗚〃鏍兼渶鍚庝竴鏉�,next涓簍rue,鐒跺悗鐐瑰嚮绗竴鏉★紝pre涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿�
         if (this.dialog.isPreCantouch == true) {
-          this.dialog.isPreCantouch = false;
+          this.dialog.isPreCantouch = false
         }
       }
       // 澶勪簬琛ㄦ牸鐨勪腑闂磋 灏嗘寜閽缃负鍙偣鍑荤姸鎬�
       else {
-        this.dialog.isPreCantouch = false;
-        this.dialog.isNextCantouch = false;
+        this.dialog.isPreCantouch = false
+        this.dialog.isNextCantouch = false
       }
     },
 
     // 褰撻�夋嫨鐨勬椂闂村彂鐢熷彉鍖栨椂锛屽紓甯稿垎鏋愰儴鍒嗙殑寮傚父搴楅摵鏁伴噺鍚屾鍙樺寲
-        beginTime() {
-          this.getShopNames();
-      },
-      endTime() {
-        this.getShopNames();
-      },
+    // beginTime() {
+    //   this.getShopNames()
+    // },
+    // endTime() {
+    //   this.getShopNames()
+    // },
     dialogTableVisible() {
-      window.addEventListener('resize', this.updateChart);
+      window.addEventListener('resize', this.updateChart)
+    }
+  },
+  computed: {
+    exceptionAllNum() {
+      let sum =
+        this.exception.exception0Num +
+        this.exception.exception1Num +
+        this.exception.exception2Num +
+        this.exception.exception3Num +
+        this.exception.exception4Num +
+        this.exception.exception5Num +
+        this.exception.exception6Num +
+        this.exception.exception7Num
+      if (sum == 0) {
+        return 1
+      } else {
+        return sum
+      }
+    },
+    long_time_notchange() {
+      let sum =
+        this.exception.exception0Num +
+        this.exception.exception1Num +
+        this.exception.exception2Num +
+        this.exception.exception3Num +
+        this.exception.exception4Num +
+        this.exception.exception5Num +
+        this.exception.exception6Num +
+        this.exception.exception7Num
+      if (sum == 0) {
+        return 0
+      } else {
+        return (
+          100 -
+          (this.exception.exception0Num / this.exceptionAllNum) * 100 -
+          (this.exception.exception1Num / this.exceptionAllNum) * 100 -
+          (this.exception.exception2Num / this.exceptionAllNum) * 100 -
+          (this.exception.exception4Num / this.exceptionAllNum) * 100 -
+          (this.exception.exception5Num / this.exceptionAllNum) * 100 -
+          (this.exception.exception6Num / this.exceptionAllNum) * 100 -
+          (this.exception.exception7Num / this.exceptionAllNum) * 100
+        ).toFixed(1)
+      }
+    },
+    // 绗竴鎺掑崱鐗�
+    cardRow1() {
+      return [
+        {
+          siteName: this.exception.exception4,
+          exceptionType: '4',
+          exceptionName: '閲忕骇绐佸彉',
+          iconSrc: '@/assets/exception/exception4.png',
+          siteNum: this.exception.exception4.length,
+          exceptionNum: this.exception.exception4Num,
+          isNoDataStatus: this.isNoData.exception4
+        },
+        {
+          siteName: this.exception.exception5,
+          exceptionType: '5',
+          exceptionName: '涓磋繎瓒呮爣寮傚父',
+          iconSrc: '@/assets/exception/exception5.png',
+          siteNum: this.exception.exception5.length,
+          exceptionNum: this.exception.exception5Num,
+          isNoDataStatus: this.isNoData.exception5
+        },
+        {
+          siteName: this.exception.exception6,
+          exceptionType: '6',
+          exceptionName: '鍗曟棩瓒呮爣娆℃暟涓寸晫寮傚父',
+          iconSrc: '@/assets/exception/exception6.png',
+          siteNum: this.exception.exception6.length,
+          exceptionNum: this.exception.exception6Num,
+          isNoDataStatus: this.isNoData.exception6
+        },
+        {
+          siteName: this.exception.exception7,
+          exceptionType: '7',
+          exceptionName: '鍙樺寲瓒嬪娍寮傚父',
+          iconSrc: '@/assets/exception/exception7.png',
+          siteNum: this.exception.exception7.length,
+          exceptionNum: this.exception.exception7Num,
+          isNoDataStatus: this.isNoData.exception7
+        }
+      ]
+    },
+    cardRow2() {
+      return [
+        {
+          siteName: this.exception.exception0,
+          exceptionType: '0',
+          exceptionName: '鏁版嵁缂哄け寮傚父',
+          iconSrc: '@/assets/exception/exception0.png',
+          siteNum: this.exception.exception0.length,
+          exceptionNum: this.exception.exception0Num,
+          isNoDataStatus: this.isNoData.exception0
+        },
+        {
+          siteName: this.exception.exception1,
+          exceptionType: '1',
+          exceptionName: '鏁版嵁瓒呬綆',
+          iconSrc: '@/assets/exception/exception1.png',
+          siteNum: this.exception.exception1.length,
+          exceptionNum: this.exception.exception1Num,
+          isNoDataStatus: this.isNoData.exception1
+        },
+        {
+          siteName: this.exception.exception2,
+          exceptionType: '2',
+          exceptionName: '瓒呮爣',
+          iconSrc: '@/assets/exception/exception2.png',
+          siteNum: this.exception.exception2.length,
+          exceptionNum: this.exception.exception2Num,
+          isNoDataStatus: this.isNoData.exception2
+        },
+        {
+          siteName: this.exception.exception3,
+          exceptionType: '3',
+          exceptionName: '鏁版嵁闀挎椂娈垫棤娉㈠姩',
+          iconSrc: '@/assets/exception/exception3.png',
+          siteNum: this.exception.exception3.length,
+          exceptionNum: this.exception.exception3Num,
+          isNoDataStatus: this.isNoData.exception3
+        }
+      ]
     }
   },
   mounted() {
-    this.backExceptionDataAWeekAgo();
+    this.backExceptionDataAWeekAgo()
     // 鏌ヨ鏃堕棿娈电殑鍚勫紓甯哥殑绔欑偣锛屾煡璇㈣鏃堕棿鍖洪棿鐨勫悇寮傚父鏁伴噺
-    this.getShopNames();
+    this.getShopNames()
     this.getSiteNume()
   },
 
   methods: {
-   // 鏀惧洖绔欑偣鎬绘暟閲�
-    getSiteNume(){
-      exceptionApi.getSitesNum().then(res => {
-      this.siteTotal = res.data.data.length
-    })
-    
+    getImageUrl(name) {
+      return new URL(`../../lib/Carousel/assets/${name}`, import.meta.url).href
+    },
+    // 鏀惧洖绔欑偣鎬绘暟閲�
+    getSiteNume() {
+      exceptionApi.getSitesNum().then((res) => {
+        this.siteTotal = res.data.data.length
+      })
     },
 
     /**
      * description锛氱偣鍑诲紓甯哥珯鐐瑰悕瀛楁椂 杩斿洖鐨勬暟鎹�
-     * @param锛� 
+     * @param锛�
      * @createTime:2023-08-17
      * @returns锛�
      */
     getAbnormalDataByClick(val) {
       this.flag.originClick = 1
-
+      // 鏄剧ず琛ㄦ牸
+      this.isTableShow = true
       this.tableData = val
       this.total = this.tableData.length
       // 榛樿鏄剧ず绗竴椤�
-      this.handleCurrentChange(1);
+      this.handleCurrentChange(1)
     },
-     // 鐐瑰嚮琛ㄦ牸鐨勮鏃�
-     selectTableRow() {
+    // 鐐瑰嚮琛ㄦ牸鐨勮鏃�
+    selectTableRow() {
       // 鑾峰彇褰撳墠琛岀殑绱㈠紩
-      this.selectedRowIndex = this.displayData.indexOf(this.tableCurrentRowData);
-
+      this.selectedRowIndex = this.displayData.indexOf(this.tableCurrentRowData)
     },
     /**
      * description锛氭柇鐢垫垨鏂綉鏃惰缃殑琛ㄦ牸鏁版嵁
      */
-    setOfflineTbleData(){
+    setOfflineTbleData() {
       // 鏃犳暟鎹椂鐨勬椂闂存暟缁� 鏃堕棿鐩稿樊15鍒嗛挓
       const abnormalTimeTenMinute = index.descFiftyTime(
         this.tableCurrentRowData.beginTime,
         this.tableCurrentRowData.endTime
-      );
+      )
+      // 淇濆瓨鏃犳暟鎹椂琛ㄦ牸鏉℃暟
+      this.dialog.exceptionTotal = abnormalTimeTenMinute.length
+
       // 鍘婚櫎渚涚數寮傚父鍜屾帀绾垮尯闂寸殑绗竴涓湁鍏冪礌鐨勫��
-      this.dialog.historyData = [];
+      this.dialog.historyData = []
 
       for (let i = 0; i < abnormalTimeTenMinute.length; i++) {
         this.dialog.historyData.push({
           name: this.tableCurrentRowData.name,
           mnCode: this.tableCurrentRowData.mnCode,
-          dutyCompany:this.tableCurrentRowData.dutyCompany,
+          dutyCompany: this.tableCurrentRowData.dutyCompany,
           lst: abnormalTimeTenMinute[i],
           dustValue: ''
-        });
+        })
       }
-
-      // 淇濆瓨鏃犳暟鎹椂琛ㄦ牸鏉℃暟
-      this.exceptionTotal = abnormalTimeTenMinute.length;
     },
-
-  
-
 
     // 娈电數鎴栨柇缃戝尯闂存棤鏁版嵁锛岄渶瑕佽ˉ鍏呫�傚叾浠栫殑閮芥湁鏁版嵁锛岀洿鎺ヤ竴娆¤姹傚叏閮ㄦ椂娈靛氨濂�
 
@@ -258,66 +377,58 @@
      * description锛氫竴娆¤姹傚洖鍓嶄腑鍚庡尯闂寸殑鏁版嵁,瀵规暟鎹繘琛屽垎鏋�
      * @param锛� 鍓嶄腑鍚庡尯闂寸殑璇锋眰鍙傛暟锛屽墠涓悗鐨勬�诲尯闂存椂闂达紝寮傚父寮�濮嬫椂闂达紝涓�鍦虹粨鏉熸椂闂�
      */
-     otherExceptionRequest(allTimeArgs,allTime,exceptionBT,exceptionET) {
-       // 鎶樼嚎鍥惧姞杞戒腑鏁堟灉
+    otherExceptionRequest(allTimeArgs, allTime, exceptionBT, exceptionET) {
+      // 鎶樼嚎鍥惧姞杞戒腑鏁堟灉
       this.loading.lineChart = true
-      this.$http
-        .get('/dust/history', { params: allTimeArgs })
-        .then((result) => {
-          this.dialog.allExceptionTimeData = result.data.data;
-        //  鏂數鎴栨柇缃戞椂閲嶆柊璁剧疆琛ㄦ牸
-        if(this.tableCurrentRowData.exceptionType == '0'){
-            this.setOfflineTbleData()
+      this.$http.get('/dust/history', { params: allTimeArgs }).then((result) => {
+        this.dialog.allExceptionTimeData = result.data.data
+        //  鏁版嵁缂哄け寮傚父鏃堕噸鏂拌缃〃鏍�
+        if (this.tableCurrentRowData.exceptionType == '0') {
+          this.setOfflineTbleData()
         }
 
-            // x杞存棩鏈熸椂闂�
-        let dateList = [];
+        // x杞存棩鏈熸椂闂�
+        let dateList = []
         // y杞� 瓒呮爣娌圭儫娴撳害
-        let dustValue = [];
-        let timeAndValue = {};
+        let dustValue = []
+        let timeAndValue = {}
 
         // 浠庢坊鍔犱簡棣栦綅鍖洪棿鐨勫紑濮嬪拰缁撴潫鏃堕棿杩涜閬嶅巻 淇濊瘉鏃堕棿浠�10鍒嗛挓涓洪棿闅�
         timeAndValue = index.keepContinuousByEachFiftyMinutes(
-            allTime[0],
-            allTime[3],
-            this.dialog.allExceptionTimeData
-        );
-        dateList = timeAndValue['xAxis'];
-        dustValue = timeAndValue['yAxis'];
-        
+          allTime[0],
+          allTime[3],
+          this.dialog.allExceptionTimeData
+        )
+        dateList = timeAndValue['xAxis']
+        dustValue = timeAndValue['yAxis']
+
         // 鎻愬彇寮傚父璧峰鏃堕棿鐐瑰湪鏁翠釜鍖洪棿鍐呯殑鏁版嵁绱㈠紩
-        let startIndex = dateList.findIndex(
-            (item) => item === exceptionBT
-        );
-        let endIndex = dateList.findIndex((item) => item === exceptionET);
+        let startIndex = dateList.findIndex((item) => item === exceptionBT)
+        let endIndex = dateList.findIndex((item) => item === exceptionET)
 
         // 璁剧疆鎶樼嚎鍥鹃厤缃」
-        this.reSetChart(dateList,dustValue,exceptionBT, exceptionET,
-                    startIndex,
-                    endIndex)
-         this.loading.lineChart = false
-            });
-       
+        this.reSetChart(dateList, dustValue, exceptionBT, exceptionET, startIndex, endIndex)
+        this.loading.lineChart = false
+      })
     },
-
 
     /**
      * description锛氱粯鍒舵姌绾垮浘
      * @param锛� x杞存椂闂达紝 y杞存补鐑熸祿搴︼紝 寮傚父寮�濮嬫椂闂达紝寮傚父缁撴潫鏃堕棿锛屽紓甯稿紑濮嬫椂闂村湪鏁翠釜鍖洪棿鐨勭储寮曚笅鏍囷紝寮傚父缁撴潫鏃堕棿鍦ㄦ暣涓尯闂寸殑绱㈠紩涓嬫爣
      */
-    reSetChart(
-      xData,
-      yData,
-      exceptionBeginTime,
-      exceptionEndTime,
-      beginIndex,
-      endIndex
-    ) {
-      this.dialog.option = {};
+    reSetChart(xData, yData, exceptionBeginTime, exceptionEndTime, beginIndex, endIndex) {
+      this.dialog.option = {}
       switch (this.tableCurrentRowData.exceptionType) {
         // 鏂數鎴栨柇缃�  鏃堕棿娈�
         case '0':
           this.dialog.option = {
+            title: {
+              text: this.tableCurrentRowData.exception,
+              left: '1%',
+              textStyle: {
+                fontSize: 14
+              }
+            },
             tooltip: {},
             toolbox: {
               // 宸ュ叿鏍�
@@ -336,7 +447,7 @@
               name: '鏃堕棿',
               axisLabel: {
                 formatter: function (value) {
-                  return value.slice(11, -3);
+                  return value.slice(11, -3)
                 }
               }
             },
@@ -367,11 +478,18 @@
                 }
               }
             ]
-          };
-          break;
-        // 瓒呮爣  
+          }
+          break
+        // 瓒呮爣
         case '2':
           this.dialog.option = {
+            title: {
+              text: this.tableCurrentRowData.exception,
+              left: '1%',
+              textStyle: {
+                fontSize: 14
+              }
+            },
             tooltip: {},
             toolbox: {
               // 宸ュ叿鏍�
@@ -389,7 +507,7 @@
               name: '鏃堕棿',
               axisLabel: {
                 formatter: function (value) {
-                  return value.slice(11, -3);
+                  return value.slice(11, -3)
                 }
               }
             },
@@ -408,9 +526,9 @@
                       itemStyle: {
                         color: 'red'
                       }
-                    };
+                    }
                   }
-                  return item;
+                  return item
                 }),
                 // 鍙樻崲鎸囧畾鏃堕棿鍖洪棿鐨勮儗鏅鑹�
                 markArea: {
@@ -479,11 +597,18 @@
                 }
               ]
             }
-          };
-          break;
+          }
+          break
         // 鏁版嵁瓒呬綆 鍙湁鏃堕棿鐐�
         case '1':
-        this.dialog.option = {
+          this.dialog.option = {
+            title: {
+              text: this.tableCurrentRowData.exception,
+              left: '1%',
+              textStyle: {
+                fontSize: 14
+              }
+            },
             tooltip: {},
             toolbox: {
               // 宸ュ叿鏍�
@@ -501,7 +626,7 @@
               name: '鏃堕棿',
               axisLabel: {
                 formatter: function (value) {
-                  return value.slice(11, -3);
+                  return value.slice(11, -3)
                 }
               }
             },
@@ -520,11 +645,11 @@
                       itemStyle: {
                         color: 'red'
                       }
-                    };
+                    }
                   }
-                  return item;
+                  return item
                 }),
-               
+
                 markLine: {
                   symbol: 'none',
                   itemStyle: {
@@ -575,10 +700,18 @@
                 }
               ]
             }
-          };
-          break;
-        case '3' :
+          }
+          break
+        // 鏁版嵁闀挎椂娈垫棤娉㈠姩
+        case '3':
           this.dialog.option = {
+            title: {
+              text: this.tableCurrentRowData.exception,
+              left: '1%',
+              textStyle: {
+                fontSize: 14
+              }
+            },
             tooltip: {},
             toolbox: {
               // 宸ュ叿鏍�
@@ -596,7 +729,7 @@
               name: '鏃堕棿',
               axisLabel: {
                 formatter: function (value) {
-                  return value.slice(11, -3);
+                  return value.slice(11, -3)
                 }
               }
             },
@@ -615,9 +748,9 @@
                       itemStyle: {
                         color: 'red'
                       }
-                    };
+                    }
                   }
-                  return item;
+                  return item
                 }),
                 // 鍙樻崲鎸囧畾鏃堕棿鍖洪棿鐨勮儗鏅鑹�
                 markArea: {
@@ -659,10 +792,21 @@
                 }
               ]
             }
-          };
-          break;
+          }
+          break
+        // 閲忕骇绐佸彉寮傚父
         case '4':
-        this.dialog.option = {
+        case '5':
+        case '6':
+        case '7':
+          this.dialog.option = {
+            title: {
+              text: this.tableCurrentRowData.exception,
+              left: '1%',
+              textStyle: {
+                fontSize: 14
+              }
+            },
             tooltip: {},
             toolbox: {
               // 宸ュ叿鏍�
@@ -680,7 +824,7 @@
               name: '鏃堕棿',
               axisLabel: {
                 formatter: function (value) {
-                  return value.slice(11, -3);
+                  return value.slice(11, -3)
                 }
               }
             },
@@ -709,8 +853,7 @@
                       }
                     ]
                   ]
-                },
-           
+                }
               }
             ],
             // 鎸囧畾鏃堕棿鍖洪棿鐨勭嚎娈靛彉棰滆壊
@@ -734,10 +877,10 @@
                 }
               ]
             }
-          };
-          break;
+          }
+          break
         default:
-          console.log('娌℃湁璁剧疆璇ュ紓甯哥被鍨嬶紒');;
+          console.log('娌℃湁璁剧疆璇ュ紓甯哥被鍨嬶紒')
       }
       this.flag.banTouch = 0
     },
@@ -745,96 +888,100 @@
      * description锛氬垝鍒嗗嚭寮傚父璧峰鏃堕棿锛屾瀯閫犺姹傚墠涓悗鐨勫弬鏁�
      */
     timeAndDataProcessed() {
-
       //寮傚父鐨勫紑濮嬫椂闂� 缁撴潫鏃堕棿
-      let exceptionBeginTime = this.tableCurrentRowData.beginTime;
-      let exceptionEndTime = this.tableCurrentRowData.endTime;
+      let exceptionBeginTime = this.tableCurrentRowData.beginTime
+      let exceptionEndTime = this.tableCurrentRowData.endTime
 
       // beforeAndAfterTime[0]:鍓�45鍒嗛挓鐨勬椂闂寸偣
       // beforeAndAfterTime[1]:鍓�15鍒嗛挓鐨勬椂闂寸偣
       // beforeAndAfterTime[2]:鍚�15鍒嗛挓鐨勬椂闂寸偣
       // beforeAndAfterTime[3]:鍚�45鍒嗛挓鐨勬椂闂寸偣
-      let beforeAndAfterTime = index.before45AndAfter45(
-        exceptionBeginTime,
-        exceptionEndTime
-      );
+      let beforeAndAfterTime = index.before45AndAfter45(exceptionBeginTime, exceptionEndTime)
 
       // 鏋勯�犲紓甯告椂闂村墠鍚庡尯闂存暟鎹姹傚弬鏁�(闄や簡鏂綉涓兘鐢ㄥ埌锛�
       let paramsAllTime = index.requestGetParms(
         this.tableCurrentRowData.name,
         beforeAndAfterTime[0],
         beforeAndAfterTime[3]
-      );
-    // 灏嗗紓甯告暟鎹繘琛岄澶勭悊锛岄殢鍚庡皢缁撴灉浣滀负鎶樼嚎鍥剧殑閰嶇疆椤�
+      )
 
-      this.otherExceptionRequest(paramsAllTime,beforeAndAfterTime,exceptionBeginTime,exceptionEndTime)
+      // 灏嗗紓甯告暟鎹繘琛岄澶勭悊锛岄殢鍚庡皢缁撴灉浣滀负鎶樼嚎鍥剧殑閰嶇疆椤�
+      this.otherExceptionRequest(
+        paramsAllTime,
+        beforeAndAfterTime,
+        exceptionBeginTime,
+        exceptionEndTime
+      )
     },
 
     /**
      * description锛氳幏鍙栦笅涓�鏉″紓甯镐俊鎭�
      */
     getPreviousRowData() {
-    //     // 涓嶆槸琛ㄦ牸鐨勬渶鍚庝竴琛�
+      //     // 涓嶆槸琛ㄦ牸鐨勬渶鍚庝竴琛�
       if (this.selectedRowIndex < this.displayData.length - 1) {
         // 鐐瑰嚮杩囩▼涓� 閿佷綇涓婁笅鏉℃寜閽�  鍦ㄨ缃畬鍥惧舰閰嶇疆椤瑰悗瑙ｉ攣
         this.flag.banTouch = 1
 
         //寰楀埌涓婁竴琛屾暟鎹储寮�
-        this.selectedRowIndex = this.selectedRowIndex + 1;
+        this.selectedRowIndex = this.selectedRowIndex + 1
 
         //璇锋眰鏁版嵁 鏀瑰彉exceedingData
         // this.setinfo(this.selectedRowIndex);
 
         // 寰楀埌涓婁竴琛岀殑鏁版嵁
         this.tableCurrentRowData = this.displayData[this.selectedRowIndex]
-        let params = index.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 })
-          .then((response) => {
-            // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
-            this.dialog.historyData = response.data.data;
-            this.dialog.exceptionTotal = response.data.data.length;
-            // 閫昏緫澶勭悊
-            this.timeAndDataProcessed()
-            this.loading.preButton = false
-          });
+        this.$http.get('/dust/history', { params: params }).then((response) => {
+          // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
+          this.dialog.historyData = response.data.data
+          this.dialog.exceptionTotal = response.data.data.length
+          // 閫昏緫澶勭悊
+          this.timeAndDataProcessed()
+          this.loading.preButton = false
+        })
       }
 
-        //寰楀埌涓婁竴琛屾暟鎹储寮�
-        // this.selectedRowIndex = this.selectedRowIndex + 1;
-        // this.tableCurrentRowData = this.displayData[this.selectedRowIndex]
-        // console.log('褰撳墠琛屾暟鎹负:',this.tableCurrentRowData);
+      //寰楀埌涓婁竴琛屾暟鎹储寮�
+      // this.selectedRowIndex = this.selectedRowIndex + 1;
+      // this.tableCurrentRowData = this.displayData[this.selectedRowIndex]
     },
     /**
      * description锛氳幏鍙栦笅涓�鏉″紓甯镐俊鎭�
      */
     getNextRowData() {
-         // 涓嶆槸琛ㄦ牸鐨勭涓�琛�
+      // 涓嶆槸琛ㄦ牸鐨勭涓�琛�
       if (this.selectedRowIndex !== 0) {
         // 鐐瑰嚮杩囩▼涓� 閿佷綇涓婁笅鏉℃寜閽�  鍦ㄨ缃畬鍥惧舰閰嶇疆椤瑰悗瑙ｉ攣
         this.flag.banTouch = 1
 
         //寰楀埌涓婁竴琛屾暟鎹储寮�
-        this.selectedRowIndex = this.selectedRowIndex - 1;
+        this.selectedRowIndex = this.selectedRowIndex - 1
         //璇锋眰鏁版嵁 鏀瑰彉exceedingData
         // this.setinfo(this.selectedRowIndex);
 
-         // 寰楀埌涓婁竴琛岀殑鏁版嵁
-         this.tableCurrentRowData = this.displayData[this.selectedRowIndex]
+        // 寰楀埌涓婁竴琛岀殑鏁版嵁
+        this.tableCurrentRowData = this.displayData[this.selectedRowIndex]
 
-        let params = index.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 })
-          .then((response) => {
-            // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
-            this.dialog.historyData = response.data.data;
-            this.dialog.exceptionTotal = response.data.data.length;
-            // 閫昏緫澶勭悊
-            this.timeAndDataProcessed()
-            this.loading.afterButton = false
-          });
+        this.$http.get('/dust/history', { params: params }).then((response) => {
+          // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
+          this.dialog.historyData = response.data.data
+          this.dialog.exceptionTotal = response.data.data.length
+          // 閫昏緫澶勭悊
+          this.timeAndDataProcessed()
+          this.loading.afterButton = false
+        })
       }
     },
 
@@ -843,8 +990,8 @@
      * @createTime:2023-08-18
      */
     backExceptionData(val1, val2) {
-      this.displayData = val1;
-      this.total = val2;
+      this.displayData = val1
+      this.total = val2
     },
 
     /**
@@ -853,6 +1000,7 @@
      */
     getShopNames() {
       /* 鏌ヨ寮傚父鐨勭珯鐐� */
+
       this.$http
         .get('/dust/sitenamecode', {
           params: {
@@ -862,8 +1010,13 @@
           }
         })
         .then((result) => {
-          this.exception.exception0 = result.data.data;
-        });
+          this.exception.exception0 = result.data.data
+          if (result.data.data.length == 0) {
+            this.isNoData.exception0 = true
+            return
+          }
+          this.isNoData.exception0 = false
+        })
       this.$http
         .get('/dust/sitenamecode', {
           params: {
@@ -873,8 +1026,13 @@
           }
         })
         .then((result) => {
-          this.exception.exception1 = result.data.data;
-        });
+          this.exception.exception1 = result.data.data
+          if (result.data.data.length == 0) {
+            this.isNoData.exception1 = true
+            return
+          }
+          this.isNoData.exception1 = false
+        })
       this.$http
         .get('/dust/sitenamecode', {
           params: {
@@ -884,8 +1042,13 @@
           }
         })
         .then((result) => {
-          this.exception.exception2 = result.data.data;
-        });
+          this.exception.exception2 = result.data.data
+          if (result.data.data.length == 0) {
+            this.isNoData.exception2 = true
+            return
+          }
+          this.isNoData.exception2 = false
+        })
 
       this.$http
         .get('/dust/sitenamecode', {
@@ -896,10 +1059,15 @@
           }
         })
         .then((result) => {
-          this.exception.exception3 = result.data.data;
-        });
+          this.exception.exception3 = result.data.data
+          if (result.data.data.length == 0) {
+            this.isNoData.exception3 = true
+            return
+          }
+          this.isNoData.exception3 = false
+        })
 
-        this.$http
+      this.$http
         .get('/dust/sitenamecode', {
           params: {
             exceptionType: '4',
@@ -908,9 +1076,14 @@
           }
         })
         .then((result) => {
-          this.exception.exception4 = result.data.data;
-        });
-        this.$http
+          this.exception.exception4 = result.data.data
+          if (result.data.data.length == 0) {
+            this.isNoData.exception4 = true
+            return
+          }
+          this.isNoData.exception4 = false
+        })
+      this.$http
         .get('/dust/sitenamecode', {
           params: {
             exceptionType: '5',
@@ -919,9 +1092,14 @@
           }
         })
         .then((result) => {
-          this.exception.exception5 = result.data.data;
-        });
-        this.$http
+          this.exception.exception5 = result.data.data
+          if (result.data.data.length == 0) {
+            this.isNoData.exception5 = true
+            return
+          }
+          this.isNoData.exception5 = false
+        })
+      this.$http
         .get('/dust/sitenamecode', {
           params: {
             exceptionType: '6',
@@ -930,10 +1108,29 @@
           }
         })
         .then((result) => {
-          this.exception.exception6 = result.data.data;
-        });
-
-
+          this.exception.exception6 = result.data.data
+          if (result.data.data.length == 0) {
+            this.isNoData.exception6 = true
+            return
+          }
+          this.isNoData.exception6 = false
+        })
+      this.$http
+        .get('/dust/sitenamecode', {
+          params: {
+            exceptionType: '7',
+            beginTime: this.beginTime,
+            endTime: this.endTime
+          }
+        })
+        .then((result) => {
+          this.exception.exception7 = result.data.data
+          if (result.data.data.length == 0) {
+            this.isNoData.exception7 = true
+            return
+          }
+          this.isNoData.exception7 = false
+        })
 
       /* 寮傚父寮傚父鏁伴噺 */
       this.$http
@@ -945,8 +1142,8 @@
           }
         })
         .then((result) => {
-          this.exception.exception0Num = result.data.data;
-        });
+          this.exception.exception0Num = result.data.data
+        })
       this.$http
         .get('/dust/exceptionnum', {
           params: {
@@ -956,8 +1153,8 @@
           }
         })
         .then((result) => {
-          this.exception.exception1Num = result.data.data;
-        });
+          this.exception.exception1Num = result.data.data
+        })
       this.$http
         .get('/dust/exceptionnum', {
           params: {
@@ -967,8 +1164,8 @@
           }
         })
         .then((result) => {
-          this.exception.exception2Num = result.data.data;
-        });
+          this.exception.exception2Num = result.data.data
+        })
 
       this.$http
         .get('/dust/exceptionnum', {
@@ -979,10 +1176,10 @@
           }
         })
         .then((result) => {
-          this.exception.exception3Num = result.data.data;
-        });
-        
-        this.$http
+          this.exception.exception3Num = result.data.data
+        })
+
+      this.$http
         .get('/dust/exceptionnum', {
           params: {
             exceptionType: '4',
@@ -991,9 +1188,9 @@
           }
         })
         .then((result) => {
-          this.exception.exception4Num = result.data.data;
-        });
-        this.$http
+          this.exception.exception4Num = result.data.data
+        })
+      this.$http
         .get('/dust/exceptionnum', {
           params: {
             exceptionType: '5',
@@ -1002,9 +1199,9 @@
           }
         })
         .then((result) => {
-          this.exception.exception5Num = result.data.data;
-        });
-        this.$http
+          this.exception.exception5Num = result.data.data
+        })
+      this.$http
         .get('/dust/exceptionnum', {
           params: {
             exceptionType: '6',
@@ -1013,14 +1210,24 @@
           }
         })
         .then((result) => {
-          this.exception.exception6Num = result.data.data;
-        });
+          this.exception.exception6Num = result.data.data
+        })
+      this.$http
+        .get('/dust/exceptionnum', {
+          params: {
+            exceptionType: '7',
+            beginTime: this.beginTime,
+            endTime: this.endTime
+          }
+        })
+        .then((result) => {
+          this.exception.exception7Num = result.data.data
+        })
     },
 
     /**
      * description锛氳姹傚紓甯哥殑搴楅摵鍚嶅瓧
      * @param锛氬紓甯哥被鍨嬶紝寮�濮嬫椂闂达紝缁撴潫鏃堕棿
-     * @createTime:2023-08-18
      * @returns锛� 寮傚父鐨勬暟鎹�
      */
     // getSiteNameByExceptionType(exception, beginT, endT) {
@@ -1043,36 +1250,35 @@
      */
     showDialog(row) {
       // 鎵撳紑瀵硅瘽妗�
-      this.dialogTableVisible = true;
-      
+      this.dialogTableVisible = true
+
       // 淇濆瓨褰撳墠琛屾暟鎹�
-      this.tableCurrentRowData = row;
+      this.tableCurrentRowData = row
 
       // 鑾峰彇褰撳墠琛岀殑绱㈠紩
-      this.selectedRowIndex = this.displayData.indexOf(row);
+      this.selectedRowIndex = this.displayData.indexOf(row)
 
       //鏍规嵁褰撳墠琛岀殑缂栧彿锛岃捣濮嬫椂闂存潵 璇锋眰寮傚父鏁版嵁
       // 瀵硅姹傚埌鐨勬暟鎹繘琛岄灏炬嫾鎺�
       // 寰楀埌鍓嶅悗瀹屾暣鏁版嵁杩涜缁樺埗鍥惧舰
-
-      let params = {};
+      this.loading.lineChart = true
+      let params = {}
       if (row.name) {
-        params['siteName'] = row.name;
+        params['siteName'] = row.name
       }
       if (row.beginTime) {
-        params['beginTime'] = row.beginTime;
+        params['beginTime'] = row.beginTime
       }
       if (row.endTime) {
-        params['endTime'] = row.endTime;
+        params['endTime'] = row.endTime
       }
 
       this.$http.get('/dust/history', { params: params }).then((response) => {
-        // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
-        this.dialog.historyData = response.data.data;
-        this.dialog.exceptionTotal = response.data.data.length;
+        this.dialog.historyData = response.data.data
+        this.dialog.exceptionTotal = response.data.data.length
         // 閫昏緫澶勭悊
         this.timeAndDataProcessed()
-      });
+      })
     },
     /**
      * description锛氭潯浠舵煡璇㈠紓甯哥殑鏁版嵁
@@ -1080,44 +1286,43 @@
      */
     handleSubmit() {
       if (this.isExceedOneMonth(this.beginTime, this.endTime)) {
-        alert('鏃堕棿璺ㄥ害涓嶈兘瓒呰繃涓�涓湀');
-        return;
+        alert('鏃堕棿璺ㄥ害涓嶈兘瓒呰繃涓�涓湀')
+        return
       }
+      // 鏇存柊寮傚父鍒嗘瀽
+      this.getShopNames()
+
       this.loading.queryButton = true
       this.flag.originClick = 0
-      this.loading.tableLoading = true;
-      let params = {};
-      params['page'] = this.currentPage;
-      params['pageSize'] = this.pageSize;
+      this.loading.tableLoading = true
+      let params = {}
+      params['page'] = this.currentPage
+      params['pageSize'] = this.pageSize
       if (this.form.name) {
-        params['siteName'] = this.form.name;
+        params['siteName'] = this.form.name
       }
       if (this.form.exceptionName.length != 0) {
-        params['exceptionType'] = this.form.exceptionName.join();
+        params['exceptionType'] = this.form.exceptionName.join()
       }
-      params['beginTime'] = this.beginTime;
-      params['endTime'] = this.endTime;
+      params['beginTime'] = this.beginTime
+      params['endTime'] = this.endTime
 
-      this.$http
-        .get('/dust/exceptiondata', { params: params })
-        .then((response) => {
-          // 淇濆瓨杩斿洖鐨�
-          // this.tableData = response.data.data.rows;
-          this.displayData = response.data.data.rows;
-          this.loading.queryButton = false
-          this.loading.tableLoading = false;
+      this.$http.get('/dust/exceptiondata', { params: params }).then((response) => {
+        // 淇濆瓨杩斿洖鐨�
+        // this.tableData = response.data.data.rows;
+        this.displayData = response.data.data.rows
+        this.loading.queryButton = false
+        this.loading.tableLoading = false
 
-          if (response.data.data.total == 0) {
-            ElMessage('璇ユ椂娈垫棤鏁版嵁');
-            this.isTableShow = false
-            return;
-          }
-          this.isTableShow = true
-          this.total = response.data.data.total;
-          // 绉婚櫎绌烘暟鎹姸鎬�
-        });
-
-      this.conditionDialogVisible = false
+        if (response.data.data.total == 0) {
+          ElMessage('璇ユ椂娈垫棤鏁版嵁')
+          this.isTableShow = false
+          return
+        }
+        this.isTableShow = true
+        this.total = response.data.data.total
+        // 绉婚櫎绌烘暟鎹姸鎬�
+      })
     },
 
     /**
@@ -1125,33 +1330,30 @@
      * @createTime:2023-08-18
      */
     backExceptionDataAWeekAgo() {
-      this.loading.tableLoading = true;
-      let params = {};
+      this.loading.tableLoading = true
+      let params = {}
       if (this.form.name) {
-        params['siteName'] = this.form.name;
+        params['siteName'] = this.form.name
       }
       if (this.form.exceptionName) {
-        params['exceptionType'] = this.form.exceptionName;
+        params['exceptionType'] = this.form.exceptionName
       }
-      params['beginTime'] = this.beginTime;
-      params['endTime'] = this.endTime;
+      params['beginTime'] = this.beginTime
+      params['endTime'] = this.endTime
 
-      this.$http
-        .get('/dust/exceptiondata', { params: params })
-        .then((response) => {
-          // 淇濆瓨杩斿洖鐨�
-          // this.tableData = response.data.data.rows;
-          this.displayData = response.data.data.rows;
-
-          if (response.data.data.total == 0) {
-            ElMessage('璇ユ椂娈垫棤鏁版嵁');
-            this.isTableShow = false
-            return;
-          }
-          this.isTableShow = true
-          this.total = response.data.data.total;
-          this.loading.tableLoading = false;
-        });
+      this.$http.get('/dust/exceptiondata', { params: params }).then((response) => {
+        // 淇濆瓨杩斿洖鐨�
+        // this.tableData = response.data.data.rows;
+        this.displayData = response.data.data.rows
+        this.loading.tableLoading = false
+        if (response.data.data.total == 0) {
+          ElMessage('璇ユ椂娈垫棤鏁版嵁')
+          this.isTableShow = false
+          return
+        }
+        this.isTableShow = true
+        this.total = response.data.data.total
+      })
     },
 
     /**
@@ -1159,26 +1361,26 @@
      * @createTime:2023-08-17
      */
     giveTime(val) {
-      this.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss');
-      this.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss');
+      this.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss')
+      this.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss')
     },
 
     // 鍔熻兘锛氳〃鏍奸珮搴︽牴鎹唴瀹硅嚜閫傚簲
     calTableHeight() {
-      const h1 = this.$refs.h1.$el.offsetHeight;
-      const h2 = this.$refs.h2.$el.offsetHeight;
-      const h3 = this.$refs.h3.$el.offsetHeight;
-      const h4 = this.$refs.h4.$el.offsetHeight;
+      const h1 = this.$refs.h1.$el.offsetHeight
+      const h2 = this.$refs.h2.$el.offsetHeight
+      const h3 = this.$refs.h3.$el.offsetHeight
+      const h4 = this.$refs.h4.$el.offsetHeight
       // 鍏朵腑涓�涓�40鏄洅瀛愮殑鎬诲杈硅窛
-      this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - ${h3}px - ${h4}px - 40px - var(--el-main-padding) * 2)`;
+      this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - ${h3}px - ${h4}px - 40px - var(--el-main-padding) * 2)`
     },
 
     // 椤靛ぇ灏忔敼鍙樻椂瑙﹀彂
     handleSizeChange(val) {
-      this.pageSize = val;
+      this.pageSize = val
 
       // 鏀瑰彉姣忛〉鏄剧ず鏁扮洰鏃惰烦鍒板綋鍓嶉〉
-      this.handleCurrentChange(1);
+      this.handleCurrentChange(1)
     },
 
     // 椤靛彿鏀瑰彉鏃惰Е鍙�
@@ -1189,855 +1391,329 @@
      * @returns锛�
      */
     handleCurrentChange(val) {
-      console.log('褰撳墠椤典负锛�', val);
       // 灏嗗綋鍓嶉〉鍙风粰currentPage
-      this.currentPage = val;
-
+      this.currentPage = val
 
       // 椤甸潰鍙樺寲鏃惰皟鐢� 鏌ヨ鏁版嵁鍑芥暟
-      if(this.flag.originClick==0){
-        this.handleSubmit();
-      }else if(this.flag.originClick ==1){
-        const startIndex = (val - 1) * this.pageSize;
-        const endIndex = startIndex + this.pageSize;
+      if (this.flag.originClick == 0) {
+        this.handleSubmit()
+      } else if (this.flag.originClick == 1) {
+        const startIndex = (val - 1) * this.pageSize
+        const endIndex = startIndex + this.pageSize
 
-        this.displayData = this.tableData.slice(startIndex, endIndex);
+        this.displayData = this.tableData.slice(startIndex, endIndex)
       }
     },
     // 琛ㄦ牸搴忓彿閫掑
     indexMethod1(index) {
-      return index + 1 + (this.currentPage - 1) * this.pageSize;
+      return index + 1 + (this.currentPage - 1) * this.pageSize
     },
     // 琛ㄦ牸搴忓彿閫掑
     indexMethod2(index) {
-      return index + 1;
+      return index + 1
     }
   }
-};
+}
 </script>
 
 <template>
- <el-button type="primary" @click="conditionDialogVisible = true">
-    鎼滅储鏉′欢
-  </el-button>
+  <div class="all-container">
+    <el-row ref="h1">
+      <el-col>
+        <el-form :inline="true">
+          <div class="head-container-text">
+            <el-form-item>
+              <AreaAndmonitorType></AreaAndmonitorType>
+            </el-form-item>
 
-  <el-dialog
-    v-model="conditionDialogVisible"
-    title="Tips"
-    width="30%"
-    class="condition-dialog"
-  >
-  <el-row ref="h1">
-    <el-col>
-      <el-form :inline="true">
-        <div class="head-container-text">
-          <el-form-item >
-          <AreaAndmonitorType ></AreaAndmonitorType>
-          </el-form-item>
+            <el-form-item>
+              <TimeShortCuts timeType="day" @submit-time="giveTime"></TimeShortCuts>
+            </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 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> -->
-            <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>
-      <span> 閲戝北鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 鎵皹鐩戞祴寮傚父淇℃伅姹囨��</span>
+            <el-form-item>
+              <ButtonClick
+                content="椋庨櫓璇勪及"
+                type="warning"
+                color="rgb(12,104,165)"
+                :loading="loading.queryButton"
+                :havaIcon="false"
+                @do-search="handleSubmit"
+                ><img src="@/assets/exception/riskButton.png" height="24" class="img-button"
+              /></ButtonClick>
+            </el-form-item>
+          </div>
+        </el-form>
+      </el-col>
     </el-row>
-  </el-row>
 
-  <el-row ref="h3">
-    <el-col>
-      <el-card>
-        <template #header>
-          <div class="card-header">寮傚父鍒嗘瀽</div>
-        </template>
-
-        
-      <el-row :gutter="20" class="card-row" > 
-          <el-col :span="6">
-            <div class="card-content-unnormal">
-              <!-- 鏍囧ご -->
-              <div class="card-text1">
-                <image class="card-header-image"></image>
-                <span class="card-header-text">閲忕骇绐佸彉寮傚父</span>
-              </div>
-
-              <div class="card-content-text">
-                <el-scrollbar>
-             
-                <span class="card-exceptionname-text1">寮傚父绔欑偣鍗犳瘮:</span>
-                <span>{{ exception.exception4.length }} /{{ siteTotal }}</span>
-                <span>
-                  ({{
-                    ((exception.exception4.length / siteTotal) * 100).toFixed(
-                      1
-                    )
-                  }}%)</span
-                >
-         
-                <div class="card-exceptionname-text2"
-                  >寮傚父鏁板崰姣�:{{
-                    (
-                      (exception.exception4Num /
-                        (exception.exception0Num +
-                          exception.exception1Num +
-                          exception.exception2Num +
-                          exception.exception3Num+
-                          exception.exception4Num+
-                          exception.exception5Num+
-                          exception.exception6Num+
-                          exception.exception7Num
-                          )) *
-                      100
-                    ).toFixed(1)
-                  }}%</div
-                >
-           
-            </el-scrollbar>
-              </div>
-              <hr />
-              <!-- 寮傚父鐨勫簵閾哄悕瀛� -->
-              <div class="card-exception-buttom">
-                <el-scrollbar max-height="90px">
-                  <DustExceptionText
-                  :site-name="item.name"
-                   exception-type="4"
-                  :begin-time="beginTime"
-                  :end-time="endTime"
-                    @submit-exception-data="getAbnormalDataByClick"
-
-                    v-for="(item, index) in exception.exception4"
-                    :key="item"
-                    >{{ item.name }}
-                    <span
-                      v-if="index < exception.exception4.length - 1"
-                      class="text-blank"
-                      >,</span
-                    >
-                  </DustExceptionText>
-                </el-scrollbar>
-              </div>
-              <!-- 缁撴潫 -->
-            </div>
-          </el-col>
-
-          <el-col :span="6">
-            <div class="card-content-unnormal">
-              <!-- 鏍囧ご -->
-              <div class="card-text1">
-                <image class="card-header-image"></image>
-                <span class="card-header-text">涓磋繎瓒呮爣寮傚父</span>
-              </div>
-
-              <div class="card-content-text">
-                <el-scrollbar>
-             
-                <span class="card-exceptionname-text1">寮傚父绔欑偣鍗犳瘮:</span>
-                <span>{{ exception.exception5.length }} /{{ siteTotal }}</span>
-                <span>
-                  ({{
-                    ((exception.exception5.length / siteTotal) * 100).toFixed(
-                      1
-                    )
-                  }}%)</span
-                >
-         
-                <div class="card-exceptionname-text2"
-                  >寮傚父鏁板崰姣�:{{
-                    (
-                      (exception.exception5Num /
-                        (exception.exception0Num +
-                          exception.exception1Num +
-                          exception.exception2Num +
-                          exception.exception3Num+
-                          exception.exception4Num+
-                          exception.exception5Num+
-                          exception.exception6Num+
-                          exception.exception7Num
-                          )) *
-                      100
-                    ).toFixed(1)
-                  }}%</div
-                >
-           
-            </el-scrollbar>
-              </div>
-              <hr />
-              <!-- 寮傚父鐨勫簵閾哄悕瀛� -->
-              <div class="card-exception-buttom">
-                <el-scrollbar max-height="90px">
-                  <DustExceptionText
-                  :site-name="item.name"
-                   exception-type="5"
-                  :begin-time="beginTime"
-                  :end-time="endTime"
-                    @submit-exception-data="getAbnormalDataByClick"
-
-                    v-for="(item, index) in exception.exception5"
-                    :key="item"
-                    >{{ item.name }}
-                    <span
-                      v-if="index < exception.exception5.length - 1"
-                      class="text-blank"
-                      >,</span
-                    >
-                  </DustExceptionText>
-                </el-scrollbar>
-              </div>
-              <!-- 缁撴潫 -->
-            </div>
-          </el-col>
-
-          <el-col :span="6">
-            <div class="card-content-unnormal">
-              <!-- 鏍囧ご -->
-              <div class="card-text1">
-                <image class="card-header-image"></image>
-                <span class="card-header-text">鍗曟棩瓒呮爣娆℃暟涓寸晫寮傚父</span>
-              </div>
-
-              <div class="card-content-text">
-                <el-scrollbar>
-             
-                <span class="card-exceptionname-text1">寮傚父绔欑偣鍗犳瘮:</span>
-                <span>{{ exception.exception6.length }} /{{ siteTotal }}</span>
-                <span>
-                  ({{
-                    ((exception.exception6.length / siteTotal) * 100).toFixed(
-                      1
-                    )
-                  }}%)</span
-                >
-         
-                <div class="card-exceptionname-text2"
-                  >寮傚父鏁板崰姣�:{{
-                    (
-                      (exception.exception6Num /
-                        (exception.exception0Num +
-                          exception.exception1Num +
-                          exception.exception2Num +
-                          exception.exception3Num+
-                          exception.exception4Num+
-                          exception.exception5Num+
-                          exception.exception6Num+
-                          exception.exception7Num
-                          )) *
-                      100
-                    ).toFixed(1)
-                  }}%</div
-                >
-           
-            </el-scrollbar>
-              </div>
-              <hr />
-              <!-- 寮傚父鐨勫簵閾哄悕瀛� -->
-              <div class="card-exception-buttom">
-                <el-scrollbar max-height="90px">
-                  <DustExceptionText
-                  :site-name="item.name"
-                   exception-type="6"
-                  :begin-time="beginTime"
-                  :end-time="endTime"
-                    @submit-exception-data="getAbnormalDataByClick"
-
-                    v-for="(item, index) in exception.exception6"
-                    :key="item"
-                    >{{ item.name }}
-                    <span
-                      v-if="index < exception.exception6.length - 1"
-                      class="text-blank"
-                      >,</span
-                    >
-                  </DustExceptionText>
-                </el-scrollbar>
-              </div>
-              <!-- 缁撴潫 -->
-            </div>
-          </el-col>
-
-          <el-col :span="6">
-            <div class="card-content-unnormal">
-              <!-- 鏍囧ご -->
-              <div class="card-text1">
-                <image class="card-header-image"></image>
-                <span class="card-header-text">鍙樺寲瓒嬪娍寮傚父</span>
-              </div>
-
-              <div class="card-content-text">
-                <el-scrollbar>
-             
-                <span class="card-exceptionname-text1">寮傚父绔欑偣鍗犳瘮:</span>
-                <span>{{ exception.exception7.length }} /{{ siteTotal }}</span>
-                <span>
-                  ({{
-                    ((exception.exception7.length / siteTotal) * 100).toFixed(
-                      1
-                    )
-                  }}%)</span
-                >
-         
-                <div class="card-exceptionname-text2"
-                  >寮傚父鏁板崰姣�:{{
-                    (
-                      (exception.exception7Num /
-                        (exception.exception0Num +
-                          exception.exception1Num +
-                          exception.exception2Num +
-                          exception.exception3Num+
-                          exception.exception4Num+
-                          exception.exception5Num+
-                          exception.exception6Num+
-                          exception.exception7Num
-                          )) *
-                      100
-                    ).toFixed(1)
-                  }}%</div
-                >
-           
-            </el-scrollbar>
-              </div>
-              <hr />
-              <!-- 寮傚父鐨勫簵閾哄悕瀛� -->
-              <div class="card-exception-buttom">
-                <el-scrollbar max-height="90px">
-                  <DustExceptionText
-                  :site-name="item.name"
-                   exception-type="7"
-                  :begin-time="beginTime"
-                  :end-time="endTime"
-                    @submit-exception-data="getAbnormalDataByClick"
-
-                    v-for="(item, index) in exception.exception7"
-                    :key="item"
-                    >{{ item.name }}
-                    <span
-                      v-if="index < exception.exception7.length - 1"
-                      class="text-blank"
-                      >,</span
-                    >
-                  </DustExceptionText>
-                </el-scrollbar>
-              </div>
-              <!-- 缁撴潫 -->
-            </div>
-          </el-col>
-        </el-row>
-
-
-        <el-row :gutter="20" >
-          <el-col :span="6">
-            <div class="card-content-normal">
-              <!-- 鏍囧ご -->
-              <div class="card-text1">
-                <image class="card-header-image"></image>
-                <span class="card-header-text">娴撳害瓒呮爣</span>
-              </div>
-
-              <div class="card-content-text">
-                <el-scrollbar>
-             
-                <span class="card-exceptionname-text1">寮傚父绔欑偣鍗犳瘮:</span>
-                <span>{{ exception.exception2.length }} /{{ siteTotal }}</span>
-                <span>
-                  ({{
-                    ((exception.exception2.length / siteTotal) * 100).toFixed(
-                      1
-                    )
-                  }}%)</span
-                >
-         
-                <div class="card-exceptionname-text2"
-                  >寮傚父鏁板崰姣�:{{
-                    (
-                      (exception.exception2Num /
-                        (exception.exception0Num +
-                          exception.exception1Num +
-                          exception.exception2Num +
-                          exception.exception3Num+
-                          exception.exception4Num+
-                          exception.exception5Num+
-                          exception.exception6Num+
-                          exception.exception7Num
-                          
-                          )) *
-                      100
-                    ).toFixed(1)
-                  }}%</div
-                >
-           
-            </el-scrollbar>
-              </div>
-              <hr />
-              <!-- 寮傚父鐨勫簵閾哄悕瀛� -->
-              <div class="card-exception-buttom">
-                <el-scrollbar max-height="90px">
-                  <DustExceptionText
-                  :site-name="item.name"
-                   exception-type="2"
-                  :begin-time="beginTime"
-                  :end-time="endTime"
-                    @submit-exception-data="getAbnormalDataByClick"
-
-                    v-for="(item, index) in exception.exception2"
-                    :key="item"
-                    >{{ item.name }}
-                    <span
-                      v-if="index < exception.exception2.length - 1"
-                      class="text-blank"
-                      >,</span
-                    >
-                  </DustExceptionText>
-                </el-scrollbar>
-              </div>
-              <!-- 缁撴潫 -->
-            </div>
-          </el-col>
-          <el-col :span="6"
-            ><div class="card-content-normal">
-              <!-- 鏍囧ご -->
-              <div class="card-text1">
-                <image class="card-header-image"></image>
-                <span class="card-header-text">鏁版嵁缂哄け寮傚父</span>
-              </div>
-
-              <div class="card-content-text">
-                <el-scrollbar>
-                <span class="card-exceptionname-text1">寮傚父绔欑偣鍗犳瘮:</span>
-                <span>{{ exception.exception0.length }} /{{ siteTotal }}</span>
-                <span>
-                  ({{
-                    ((exception.exception0.length / siteTotal) * 100).toFixed(
-                      1
-                    )
-                  }}%)</span
-                >
-                <div class="card-exceptionname-text2"
-                  >寮傚父鏁板崰姣�:{{
-                    (
-                      (exception.exception0Num /
-                        (exception.exception0Num +
-                          exception.exception1Num +
-                          exception.exception2Num +
-                          exception.exception3Num+
-                          exception.exception4Num+
-                          exception.exception5Num+
-                          exception.exception6Num+
-                          exception.exception7Num)) *
-                      100
-                    ).toFixed(1)
-                  }}%</div
-                >
-                </el-scrollbar>
-              </div>
-              <hr />
-              <!-- 寮傚父鐨勫簵閾哄悕瀛� -->
-              <div class="card-exception-buttom">
-                <el-scrollbar max-height="90px">
-                  <DustExceptionText
-                  :site-name="item.name"
-                   exception-type="0"
-                  :begin-time="beginTime"
-                  :end-time="endTime"
-                    @submit-exception-data="getAbnormalDataByClick"
-
-                    v-for="(item, index) in exception.exception0"
-                    :key="item"
-                    >{{ item.name }}
-                    <span
-                      v-if="index < exception.exception0.length - 1"
-                      class="text-blank"
-                      >,</span
-                    >
-                  </DustExceptionText>
-                </el-scrollbar>
-              </div>
-              <!-- 缁撴潫 -->
-            </div>
-          </el-col>
-          <el-col :span="6">
-            <div class="card-content-normal">
-              <!-- 鏍囧ご -->
-              <div class="card-text1">
-                <image class="card-header-image"></image>
-                <span class="card-header-text">鏁版嵁瓒呬綆</span>
-              </div>
-
-              <div class="card-content-text">
-                <el-scrollbar>
-                <span class="card-exceptionname-text1">寮傚父绔欑偣鍗犳瘮:</span>
-                <span>{{ exception.exception1.length }} /{{ siteTotal }}</span>
-                <span>
-                  ({{
-                    ((exception.exception1.length / siteTotal) * 100).toFixed(
-                      1
-                    )
-                  }}%)</span
-                >
-                <div class="card-exceptionname-text2"
-                  >寮傚父鏁板崰姣�:{{
-                    (
-                      (exception.exception1Num /
-                        (exception.exception0Num +
-                          exception.exception1Num +
-                          exception.exception2Num +
-                          exception.exception3Num+
-                          exception.exception4Num+
-                          exception.exception5Num+
-                          exception.exception6Num+
-                          exception.exception7Num)) *
-                      100
-                    ).toFixed(1)
-                  }}%</div
-                >
-                </el-scrollbar>
-              </div>
-              <hr />
-              <!-- 寮傚父鐨勫簵閾哄悕瀛� -->
-              <div class="card-exception-buttom">
-                <el-scrollbar max-height="90px">
-                  <DustExceptionText
-                  :site-name="item.name"
-                   exception-type="1"
-                  :begin-time="beginTime"
-                  :end-time="endTime"
-                    @submit-exception-data="getAbnormalDataByClick"
-
-                    v-for="(item, index) in exception.exception1"
-                    :key="item"
-                    >{{ item.name }}
-                    <span
-                      v-if="index < exception.exception1.length - 1"
-                      class="text-blank"
-                      >,</span
-                    >
-                  </DustExceptionText>
-                </el-scrollbar>
-              </div>
-              <!-- 缁撴潫 -->
-            </div></el-col
-          >
-          <el-col :span="6"
-            ><div class="card-content-normal">
-              <!-- 鏍囧ご -->
-              <div class="card-text1">
-                <image class="card-header-image"></image>
-                <span class="card-header-text">鏁版嵁闀挎椂娈垫棤娉㈠姩</span>
-              </div>
-
-              <div class="card-content-text">
-                <el-scrollbar>
-                <span class="card-exceptionname-text1">寮傚父绔欑偣鍗犳瘮:</span>
-                <span>{{ exception.exception3.length }} /{{ siteTotal }}</span>
-                <span>
-                  ({{
-                    ((exception.exception3.length / siteTotal) * 100).toFixed(
-                      1
-                    )
-                  }}%)</span
-                >
-                <div class="card-exceptionname-text2"
-                  >寮傚父鏁板崰姣�:{{(100-
-                    
-                      ((exception.exception0Num /
-                        (exception.exception0Num +
-                          exception.exception1Num +
-                          exception.exception2Num +
-                          exception.exception3Num+
-                          exception.exception4Num+
-                          exception.exception5Num+
-                          exception.exception6Num+
-                          exception.exception7Num)) *
-                      100
-                    ) - 
-                    ((exception.exception1Num /
-                        (exception.exception0Num +
-                          exception.exception1Num +
-                          exception.exception2Num +
-                          exception.exception3Num+
-                          exception.exception4Num+
-                          exception.exception5Num+
-                          exception.exception6Num+
-                          exception.exception7Num)) *
-                      100
-                    ) - 
-                    ((exception.exception2Num /
-                        (exception.exception0Num +
-                          exception.exception1Num +
-                          exception.exception2Num +
-                          exception.exception3Num+
-                          exception.exception4Num+
-                          exception.exception5Num+
-                          exception.exception6Num+
-                          exception.exception7Num)) *
-                      100
-                    ) - 
-                    ((exception.exception4Num /
-                        (exception.exception0Num +
-                          exception.exception1Num +
-                          exception.exception2Num +
-                          exception.exception3Num+
-                          exception.exception4Num+
-                          exception.exception5Num+
-                          exception.exception6Num+
-                          exception.exception7Num)) *
-                      100
-                    )- 
-                    ((exception.exception5Num /
-                        (exception.exception0Num +
-                          exception.exception1Num +
-                          exception.exception2Num +
-                          exception.exception3Num+
-                          exception.exception4Num+
-                          exception.exception5Num+
-                          exception.exception6Num+
-                          exception.exception7Num)) *
-                      100
-                    )- 
-                    ((exception.exception6Num /
-                        (exception.exception0Num +
-                          exception.exception1Num +
-                          exception.exception2Num +
-                          exception.exception3Num+
-                          exception.exception4Num+
-                          exception.exception5Num+
-                          exception.exception6Num+
-                          exception.exception7Num)) *
-                      100
-                    )- 
-                    ((exception.exception7Num /
-                        (exception.exception0Num +
-                          exception.exception1Num +
-                          exception.exception2Num +
-                          exception.exception3Num+
-                          exception.exception4Num+
-                          exception.exception5Num+
-                          exception.exception6Num+
-                          exception.exception7Num)) *
-                      100
-                    )
-
-
-                    ).toFixed(1)
-                  }}%</div
-                >
-               </el-scrollbar>
-              </div>
-              <hr />
-              <!-- 寮傚父鐨勫簵閾哄悕瀛� -->
-              <div class="card-exception-buttom">
-                <el-scrollbar max-height="90px">
-                  <DustExceptionText
-                  :site-name="item.name"
-                   exception-type="3"
-                  :begin-time="beginTime"
-                  :end-time="endTime"
-                    @submit-exception-data="getAbnormalDataByClick"
-
-                    v-for="(item, index) in exception.exception3"
-                    :key="item"
-                    >{{ item.name }}
-                    <span
-                      v-if="index < exception.exception3.length - 1"
-                      class="text-blank"
-                      >,</span
-                    >
-                  </DustExceptionText>
-                </el-scrollbar>
-              </div>
-              <!-- 缁撴潫 -->
-            </div>
-          </el-col>
+    <!-- 鏃堕棿鎽樿 -->
+    <el-row class="head-describtion-text" ref="h2">
+      <el-row>
+        <span> 閲戝北鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 鎵皹鐩戞祴寮傚父淇℃伅姹囨��</span>
       </el-row>
+    </el-row>
 
-
-
-      </el-card>
-    </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
-            >
+    <!-- 寮傚父鍒嗘瀽 -->
+    <el-row ref="h3">
+      <el-col>
+        <el-card class="card-container">
+          <template #header>
+            <div class="card-header">寮傚父鍒嗘瀽</div>
           </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-row :gutter="20" class="card-row">
+            <el-col :span="6">
+              <AnalysisCard
+                :site-name="cardRow1[0].siteName"
+                :exception-type="cardRow1[0].exceptionType"
+                :begin-time="beginTime"
+                :end-time="endTime"
+                :exception-name="cardRow1[0].exceptionName"
+                :site-num="cardRow1[0].siteNum"
+                :exception-num="cardRow1[0].exceptionNum"
+                :exception-all-num="exceptionAllNum"
+                :site-num-all="siteTotal"
+                :isNoDataStatus="cardRow1[0].isNoDataStatus"
+                @get-abnormal-data-by-click="getAbnormalDataByClick"
+              >
+                <img src="@/assets/exception/exception4.png" height="24" width="24" />
+              </AnalysisCard>
+            </el-col>
+            <el-col :span="6">
+              <AnalysisCard
+                :site-name="cardRow1[1].siteName"
+                :exception-type="cardRow1[1].exceptionType"
+                :begin-time="beginTime"
+                :end-time="endTime"
+                :exception-name="cardRow1[1].exceptionName"
+                :site-num="cardRow1[1].siteNum"
+                :exception-num="cardRow1[1].exceptionNum"
+                :exception-all-num="exceptionAllNum"
+                :site-num-all="siteTotal"
+                :isNoDataStatus="cardRow1[1].isNoDataStatus"
+                @get-abnormal-data-by-click="getAbnormalDataByClick"
+              >
+                <img src="@/assets/exception/exception5.png" height="24" width="24" />
+              </AnalysisCard>
+            </el-col>
+            <el-col :span="6">
+              <AnalysisCard
+                :site-name="cardRow1[2].siteName"
+                :exception-type="cardRow1[2].exceptionType"
+                :begin-time="beginTime"
+                :end-time="endTime"
+                :exception-name="cardRow1[2].exceptionName"
+                :site-num="cardRow1[2].siteNum"
+                :exception-num="cardRow1[2].exceptionNum"
+                :exception-all-num="exceptionAllNum"
+                :site-num-all="siteTotal"
+                :isNoDataStatus="cardRow1[2].isNoDataStatus"
+                @get-abnormal-data-by-click="getAbnormalDataByClick"
+              >
+                <img src="@/assets/exception/exception6.png" height="24" width="24" />
+              </AnalysisCard>
+            </el-col>
+            <el-col :span="6">
+              <AnalysisCard
+                :site-name="cardRow1[3].siteName"
+                :exception-type="cardRow1[3].exceptionType"
+                :begin-time="beginTime"
+                :end-time="endTime"
+                :exception-name="cardRow1[3].exceptionName"
+                :site-num="cardRow1[3].siteNum"
+                :exception-num="cardRow1[3].exceptionNum"
+                :exception-all-num="exceptionAllNum"
+                :site-num-all="siteTotal"
+                :isNoDataStatus="cardRow1[3].isNoDataStatus"
+                @get-abnormal-data-by-click="getAbnormalDataByClick"
+              >
+                <img src="@/assets/exception/exception7.png" height="24" width="24" />
+              </AnalysisCard>
+            </el-col>
+          </el-row>
 
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <AnalysisCard
+                :site-name="cardRow2[0].siteName"
+                :exception-type="cardRow2[0].exceptionType"
+                :begin-time="beginTime"
+                :end-time="endTime"
+                :exception-name="cardRow2[0].exceptionName"
+                :site-num="cardRow2[0].siteNum"
+                :exception-num="cardRow2[0].exceptionNum"
+                :exception-all-num="exceptionAllNum"
+                :site-num-all="siteTotal"
+                :isNoDataStatus="cardRow2[0].isNoDataStatus"
+                @get-abnormal-data-by-click="getAbnormalDataByClick"
+              >
+                <img src="@/assets/exception/exception0.png" height="24" width="24" />
+              </AnalysisCard>
+            </el-col>
+            <el-col :span="6">
+              <AnalysisCard
+                :site-name="cardRow2[1].siteName"
+                :exception-type="cardRow2[1].exceptionType"
+                :begin-time="beginTime"
+                :end-time="endTime"
+                :exception-name="cardRow2[1].exceptionName"
+                :site-num="cardRow2[1].siteNum"
+                :exception-num="cardRow2[1].exceptionNum"
+                :exception-all-num="exceptionAllNum"
+                :site-num-all="siteTotal"
+                :isNoDataStatus="cardRow2[1].isNoDataStatus"
+                @get-abnormal-data-by-click="getAbnormalDataByClick"
+              >
+                <img src="@/assets/exception/exception1.png" height="24" width="24" />
+              </AnalysisCard>
+            </el-col>
+            <el-col :span="6">
+              <AnalysisCard
+                :site-name="cardRow2[2].siteName"
+                :exception-type="cardRow2[2].exceptionType"
+                :begin-time="beginTime"
+                :end-time="endTime"
+                :exception-name="cardRow2[2].exceptionName"
+                :site-num="cardRow2[2].siteNum"
+                :exception-num="cardRow2[2].exceptionNum"
+                :exception-all-num="exceptionAllNum"
+                :site-num-all="siteTotal"
+                :isNoDataStatus="cardRow2[2].isNoDataStatus"
+                @get-abnormal-data-by-click="getAbnormalDataByClick"
+              >
+                <img src="@/assets/exception/exception2.png" height="24" width="24" />
+              </AnalysisCard>
+            </el-col>
+            <el-col :span="6">
+              <AnalysisCard
+                :site-name="cardRow2[3].siteName"
+                :exception-type="cardRow2[3].exceptionType"
+                :begin-time="beginTime"
+                :end-time="endTime"
+                :exception-name="cardRow2[3].exceptionName"
+                :site-num="cardRow2[3].siteNum"
+                :exception-num="cardRow2[3].exceptionNum"
+                :exception-all-num="exceptionAllNum"
+                :site-num-all="siteTotal"
+                :isNoDataStatus="cardRow2[3].isNoDataStatus"
+                @get-abnormal-data-by-click="getAbnormalDataByClick"
+              >
+                <img src="@/assets/exception/exception3.png" height="24" width="24" />
+              </AnalysisCard>
+            </el-col>
+          </el-row>
+        </el-card>
+      </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 }}
+    <el-button-group>
+      <el-button color="#626aef" plain @click="isTableShow = true" v-show="!isTableShow">
+        鏄剧ず寮傚父娓呭崟<el-icon class="i-ep-Arrow"><i-ep-ArrowUp /></el-icon>
+      </el-button>
+      <el-button color="#626aef" plain @click="isTableShow = false" v-show="isTableShow">
+        闅愯棌寮傚父娓呭崟<el-icon class="i-ep-Arrow"><i-ep-ArrowDown /></el-icon>
+      </el-button>
+    </el-button-group>
+
+    <!-- 琛ㄦ牸 -->
+    <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"
+            width="82"
+            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
+      class="exception-dialog"
+      v-model="dialogTableVisible"
+      draggable
+      align-center
+      height="700px"
+      width="700px"
+    >
+      <!-- 澶� -->
+      <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>{{ tableCurrentRowData.mnCode }}
+            </div>
+            <div>
+              <span class="diag-head-text1">杩愮淮鍟嗭細</span>{{ tableCurrentRowData.dutyCompany }}
+            </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>
-          <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">
+          <!-- <div class="chart-jump-button">
           <el-button
             type="danger"
             :loading="loading.preButton"
@@ -2052,134 +1728,120 @@
             @click="getNextRowData"
             >涓嬫潯寮傚父</el-button
           >
+        </div> -->
+          <div class="chart-jump-button">
+            <el-button
+              type="danger"
+              :loading="loading.preButton"
+              :disabled="dialog.isPreCantouch || flag.banTouch"
+              @click="getNextRowData"
+              >涓婃潯寮傚父</el-button
+            >
+            <el-button
+              type="danger"
+              :loading="loading.afterButton"
+              :disabled="dialog.isNextCantouch || flag.banTouch"
+              @click="getPreviousRowData"
+              >涓嬫潯寮傚父</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>
-
-    <!-- :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 #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>
+  </div>
 </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;
-}
-
-/* 涓嬫媺鑿滃崟缁撴潫 */
 
 /* 鏉′欢鏌ヨ妯″潡鐨勬牱寮� */
+.el-form {
+  margin: 10px;
+}
+img {
+  margin-right: 5px;
+}
 .head-container-search {
-  // display: flex;
-  // justify-content: flex-end;
   float: right;
 }
 
 .head-describtion-text {
   justify-content: flex-end;
-  margin-bottom: 10px;
+  margin-bottom: 2px;
+  margin-right: 20px;
   font-size: 14px;
   color: gray;
 }
+.button-set {
+  margin: 10px;
+}
 /* 鏉′欢鏌ヨ妯″潡缁撴潫 */
 
-
-
 /* 寮傚父鍒嗘瀽妯″潡鐨勬牱寮� */
+
 .card-text1 {
-  // 榛戜綋鐨勫紓甯稿悕瀛楅儴鍒�
+  /* 榛戜綋鐨勫紓甯稿悕瀛楅儴鍒� */
   margin: 10px;
 }
 .card-text1 + div {
-  // 榛戜綋鐨勫紓甯稿悕瀛椾笅闈㈢殑
+  /* 榛戜綋鐨勫紓甯稿悕瀛椾笅闈㈢殑 */
   margin: 12px;
 }
 .card-exception-buttom {
-  // 寮傚父绔欑偣鏂囨湰鎸夐挳鍖哄煙
+  /* 寮傚父绔欑偣鏂囨湰鎸夐挳鍖哄煙 */
   padding: 11px;
 }
 .card-header {
@@ -2189,7 +1851,7 @@
 }
 .card-content-unnormal {
   min-height: 200px;
-  border: 2px solid #FFCF8B;
+  border: 2px solid #ffcf8b;
   border-radius: 20px;
 }
 .card-content-normal {
@@ -2197,8 +1859,7 @@
   border: 2px solid red;
   border-radius: 20px;
 }
-.card-header-image {
-}
+
 .card-header-text {
   font-size: 16px;
   font-weight: bold;
@@ -2209,19 +1870,18 @@
   white-space: nowrap;
 }
 .card-exceptionname-text1 {
-  // 寮傚父绔欑偣鍗犳瘮
+  /*  寮傚父绔欑偣鍗犳瘮 */
   font-size: 14px;
   white-space: nowrap;
 }
 
 .card-exceptionname-text2 {
-  // 寮傚父鏁板崰姣旂殑澶栬竟璺�
-  // margin-left: 50px;
+  /* 寮傚父鏁板崰姣旂殑澶栬竟璺� */
   font-size: 14px;
   white-space: nowrap;
 }
 .text-blank {
-  // 閫楀彿
+  /* 閫楀彿 */
   margin-right: 10px;
   color: #000000;
 }
@@ -2231,31 +1891,36 @@
 
 /* 寮傚父鍒嗘瀽妯″潡缁撴潫 */
 
+/* 闅愯棌琛ㄦ牸鎸夐挳缁勬牱寮� */
+.el-button-group {
+  margin: 10px 0px 10px 10px;
+}
+.i-ep-Arrow {
+  margin-left: 6px;
+  margin-bottom: 2px;
+  font-size: 1.2em;
+}
+/* 闅愯棌琛ㄦ牸鎸夐挳缁勬牱寮忕粨鏉� */
+
 /* 琛ㄦ牸妯″潡鐨勬牱寮� */
-
+.el-table {
+  color: #333333;
+}
 /* 琛ㄦ牸妯″潡缁撴潫 */
-
-
-
-
 
 /* 鏌ョ湅璇︽儏瀵硅瘽妗嗘ā鍧楃殑鏍峰紡 */
 
 .diag-head {
-  // 瀵硅瘽妗嗗ご閮ㄥ尯鍩�
+  /* 瀵硅瘽妗嗗ご閮ㄥ尯鍩� */
   min-height: 200px;
-  // border: 1px solid #fdc2db;
 }
 .diag-head-text1 {
-  // 瀵硅瘽妗嗗ご閮ㄧ殑灞炴�у瓧娈靛姞绮�
+  /* 瀵硅瘽妗嗗ご閮ㄧ殑灞炴�у瓧娈靛姞绮� */
   font-weight: bold;
 }
-.diag-head-text span:nth-child(2) {
-  // 瀵硅瘽妗嗗ご閮ㄢ�樺紓甯哥被鍨嬧�欏睘鎬�
-  // margin-left: 150px;
-}
+
 .diag-head-text > div {
-  // 瀵硅瘽妗嗗紓甯告椂闂存
+  /*  瀵硅瘽妗嗗紓甯告椂闂存 */
   margin-top: 15px;
 }
 .diag-head-text {
@@ -2273,7 +1938,6 @@
   position: absolute;
   left: 10px;
   bottom: 10px;
-
 }
 /* 鏌ョ湅璇︽儏瀵硅瘽妗嗘ā鍧楃粨鏉� */
 </style>

--
Gitblit v1.9.3