From dd5fbe2e6cacffa0ff67f0f68c262d14ddfce3cc Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期五, 24 十一月 2023 15:21:56 +0800
Subject: [PATCH] 1.修复指标排名界面的排序换页后重置的问题

---
 src/views/exception/components/CompFlightInspection.vue | 1408 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 1,408 insertions(+), 0 deletions(-)

diff --git a/src/views/exception/components/CompFlightInspection.vue b/src/views/exception/components/CompFlightInspection.vue
new file mode 100644
index 0000000..b2dbd4f
--- /dev/null
+++ b/src/views/exception/components/CompFlightInspection.vue
@@ -0,0 +1,1408 @@
+<script>
+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('@/views/exception/components/DustLineChart.vue'))
+import exceptionApi from '@/api/exceptionApi.js'
+import dayjs from 'dayjs'
+import { ElMessage } from 'element-plus'
+import AnalysisCard from './AnalysisCard.vue'
+import DutyCompany from '@/sfc/DutyCompany.vue'
+import StreetInfo from '@/sfc/StreetInfo.vue'
+import historyApi from '@/api/historyApi.js'
+import time from '@/utils/time.js'
+import lineChart from '@/utils/chartFunction/lineChart.js'
+import exceptionOption from '@/utils/chartFunction/exceptionOption.js'
+import exception0 from '@/assets/exception/exception0.png'
+import exception1 from '@/assets/exception/exception1.png'
+import exception2 from '@/assets/exception/exception2.png'
+import exception3 from '@/assets/exception/exception3.png'
+import exception4 from '@/assets/exception/exception4.png'
+import exception5 from '@/assets/exception/exception5.png'
+import exception6 from '@/assets/exception/exception6.png'
+import exception7 from '@/assets/exception/exception7.png'
+export default {
+  props: {
+    // 鐐逛綅鍚嶅瓧
+    siteName: {
+      type: String,
+      default: ''
+    },
+    // 鏃ユ椂闂存垨鑰呮湀鏃堕棿
+    time:{
+        type:String,
+        default:''
+    },
+    // 灞曠ず椤甸潰鐨勫叏閮�
+    showAll: {
+      type: Boolean,
+      default: true
+    },
+   
+    // 0浠h〃鏃ユ椂闂达紝1浠h〃鏈堟椂闂�
+    timeType:{
+      type:Number,
+      default:-1
+    }
+  },
+  components: {
+    TimeShortCuts,
+    DustLineChart,
+    ButtonClick,
+    AreaAndmonitorType,
+    AnalysisCard,
+    DutyCompany,
+    StreetInfo
+  },
+  data() {
+    return {
+      //  琛ㄥ崟鍐呭
+      form: {
+        // 绔欑偣鍚嶇О
+        name: '',
+        // 杩愮淮鍟�
+        dutyCompany: [],
+        // 琛楅亾
+        street: [],
+        // 閫夋嫨鐨勫紓甯哥被鍨�
+        exceptionName: []
+      },
+      beginTime: '',
+      endTime: '',
+      // 杩斿洖鐨勬暟鎹�
+      tableData: [],
+      // 琛ㄦ牸灞曠ず鐨勬暟鎹�
+      displayData: [],
+      // 琛ㄦ牸楂樺害
+      tableHeight: 400,
+      // 琛ㄦ牸鏄剧ず
+      isTableShow: false,
+      // 瀹℃牳杈呭姪鎸夐挳鏄剧ず
+      auditButton: false,
+      // 褰撳墠椤�
+      currentPage: 1,
+      // 姣忛〉鏉℃暟
+      pageSize: 20,
+      // 琛ㄦ牸鐨勬�昏褰曟暟
+      total: 0,
+
+      // 鏌ヨ鎸夐挳鏃犳暟鎹椂
+      isNoData: {
+        exception0: true,
+        exception1: true,
+        exception2: true,
+        exception3: true,
+        exception4: true,
+        exception5: true,
+        exception6: true,
+        exception7: true,
+        exception8: true
+      },
+      // eslint-disable-next-line no-undef
+      // 瀵硅瘽妗嗘樉绀�
+      dialogTableVisible: false,
+      // 淇濆瓨寮傚父瀵瑰簲鐨勫簵閾哄悕绉板拰璁惧缂栧彿
+      exception: {
+        // 鏂數鎴栨柇缃�
+        exception0: [],
+        // 鏁版嵁瓒呬綆
+        exception1: [],
+        // 瓒呮爣
+        exception2: [],
+        // 鏁版嵁闀挎椂娈垫棤娉㈠姩
+        exception3: [],
+        // 閲忕骇绐佸彉寮傚父
+        exception4: [],
+        // 涓磋繎瓒呮爣寮傚父
+        exception5: [],
+        // 鍗曟棩瓒呮爣娆℃暟涓寸晫寮傚父
+        exception6: [],
+        // 婊戝姩骞冲潎鍊煎紓甯�
+        exception7: [],
+        // 鏈夋晥鐜囧紓甯�
+        exception8: [],
+
+        // 璇ユ椂娈电殑寮傚父鏁伴噺
+        exception0Num: 0,
+        exception1Num: 0,
+        exception2Num: 0,
+        exception3Num: 0,
+        exception4Num: 0,
+        exception5Num: 0,
+        exception6Num: 0,
+        exception7Num: 0,
+        exception8Num: 0
+      },
+      // 绔欑偣鎬绘暟閲�
+      siteTotal: 0,
+
+      // 閫変腑琛ㄦ牸褰撳墠琛岀殑鏁版嵁
+      tableCurrentRowData: null,
+      // 閫変腑琛ㄦ牸褰撳墠琛岀殑绱㈠紩
+      selectedRowIndex: -2,
+      // 椤甸潰涓婄殑鎸夐挳鍔犺浇鐘舵��
+      loading: {
+        // 鏌ヨ鎸夐挳
+        queryButton: false,
+        // 琛ㄦ牸鍔犺浇涓�
+        tableLoading: false,
+        // 涓婁竴鏉℃寜閽�
+        preButton: false,
+        // 涓嬩竴鏉℃寜閽�
+        afterButton: false,
+        // 鎶樼嚎鍥�
+        lineChart: false
+      },
+
+      dialog: {
+        // 鎵撳紑瀵硅瘽妗嗚姹傝鍖洪棿鐨勫巻鍙叉暟鎹�
+        historyData: [],
+        // 璇ユ椂闂存鐨勫紓甯告潯鏁�
+        exceptionTotal: 0,
+        // 鎶樼嚎鍥鹃厤缃」
+        option: {},
+        // 鈥欎笂涓�鏉♀�樻寜閽槸鍚﹀彲浠ヨ鐐瑰嚮鐘舵��
+        isPreCantouch: false,
+        // 鈥欎笅涓�鏉♀�樻寜閽槸鍚﹀彲浠ヨ鐐瑰嚮鐘舵��
+        isNextCantouch: false,
+        // 寮傚父鐨勫墠涓悗鍖洪棿鎵�鏈夋暟鎹�
+        allExceptionTimeData: []
+      },
+
+      // 鏍囪浣�
+      flag: {
+        // 鍔犺浇鏃� 涓婁笅鏉℃寜閽笉鑳藉啀鐐瑰嚮
+        banTouch: 0,
+        // 0浠h〃鍒嗛〉锛�1浠h〃涓嶅垎椤�
+        originClick: 0
+      },
+      areaColor: null
+    }
+  },
+  setup() {
+    const { isExceedOneMonth } = useCommonFunction()
+    return {
+      isExceedOneMonth
+    }
+  },
+  // 鐩戝惉  鍒ゆ柇鎸夐挳鏄惁鍙偣鍑�
+  watch: {
+    selectedRowIndex(newVaue) {
+      // 澶勪簬琛ㄦ牸鐨勬渶鍚庝竴鏉℃暟鎹� 璁剧疆鈥樹笂涓�鏉♀�欐寜閽笉鍙偣
+      if (newVaue === 0) {
+        this.dialog.isPreCantouch = true
+        //鐢ㄦ埛鍏堢偣浜嗙涓�鏉★紝pre涓簍rue,鐒跺悗鐐瑰嚮鏈�鍚庝竴鏉�,next涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿�
+        if (this.dialog.isNextCantouch == true) {
+          this.dialog.isNextCantouch = false
+        }
+      }
+      // 澶勪簬琛ㄦ牸绗竴鏉℃暟鎹� 璁剧疆鈥樹笂涓�鏉♀�欐寜閽笉鍙偣
+      else if (newVaue === this.displayData.length - 1) {
+        this.dialog.isNextCantouch = true
+        //鐢ㄦ埛鍏堢偣浜嗚〃鏍兼渶鍚庝竴鏉�,next涓簍rue,鐒跺悗鐐瑰嚮绗竴鏉★紝pre涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿�
+        if (this.dialog.isPreCantouch == true) {
+          this.dialog.isPreCantouch = false
+        }
+      }
+      // 澶勪簬琛ㄦ牸鐨勪腑闂磋 灏嗘寜閽缃负鍙偣鍑荤姸鎬�
+      else {
+        this.dialog.isPreCantouch = false
+        this.dialog.isNextCantouch = false
+      }
+    },
+    dialogTableVisible() {
+      window.addEventListener('resize', this.updateChart)
+    },
+
+    // 椤甸潰鍔犺浇鏃秙howAll鎵嶄細鍙樺寲涓�娆� 
+    // 涓簍rue琛ㄧず鐨勯琛屽贰妫�椤甸潰
+    showAll(){
+        if(this.showAll){
+            this.backExceptionDataAWeekAgo()
+        }
+    },
+    // siteName(){
+    //   if(this.siteName!=''){
+    //     this.beginTime = dayjs(this.month).startOf('month').format('YYYY-MM-DD HH:mm:ss')
+    //     this.endTime = dayjs(this.month).endOf('month').format('YYYY-MM-DD HH:mm:ss')
+    //     this.backExceptionDataAWeekAgo()
+    //     this.getShopNames()
+    //   }
+        
+    // },
+ 
+    timeType(){
+      if(this.timeType == '0'){
+        this.beginTime = dayjs(this.time).format('YYYY-MM-DD 00:00:00')
+        this.endTime = dayjs(this.time).format('YYYY-MM-DD 23:59:59')
+      }else if(this.timeType == '1'){
+        this.beginTime = dayjs(this.time).startOf('month').format('YYYY-MM-DD HH:mm:ss')
+        this.endTime = dayjs(this.time).endOf('month').format('YYYY-MM-DD HH:mm:ss')
+      }
+      this.backExceptionDataAWeekAgo()
+      this.getShopNames()
+    }
+  },
+  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 +
+        this.exception.exception8Num
+      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 +
+        this.exception.exception8Num
+      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 -
+          (this.exception.exception8Num / this.exceptionAllNum) * 100
+        ).toFixed(1)
+      }
+    },
+    // 绗竴鎺掑崱鐗�
+    cardRow() {
+      return [
+        {
+          siteName: this.exception.exception4,
+          exceptionType: '4',
+          exceptionName: '閲忕骇绐佸彉',
+          iconSrc: exception4,
+          siteNum: this.exception.exception4.length,
+          exceptionNum: this.exception.exception4Num,
+          isNoDataStatus: this.isNoData.exception4,
+          span: 5
+        },
+        {
+          siteName: this.exception.exception5,
+          exceptionType: '5',
+          exceptionName: '涓磋繎瓒呮爣寮傚父',
+          iconSrc: exception5,
+          siteNum: this.exception.exception5.length,
+          exceptionNum: this.exception.exception5Num,
+          isNoDataStatus: this.isNoData.exception5,
+          span: 5
+        },
+        {
+          siteName: this.exception.exception8,
+          exceptionType: '8',
+          exceptionName: '鏈夋晥鐜囧紓甯�',
+          iconSrc: exception0,
+          siteNum: this.exception.exception8.length,
+          exceptionNum: this.exception.exception8Num,
+          isNoDataStatus: this.isNoData.exception8,
+          span: 5
+        },
+        {
+          siteName: this.exception.exception6,
+          exceptionType: '6',
+          exceptionName: '鍗曟棩瓒呮爣娆℃暟涓寸晫寮傚父',
+          iconSrc: exception6,
+          siteNum: this.exception.exception6.length,
+          exceptionNum: this.exception.exception6Num,
+          isNoDataStatus: this.isNoData.exception6,
+          span: 5
+        },
+
+        {
+          siteName: this.exception.exception7,
+          exceptionType: '7',
+          exceptionName: '鍙樺寲瓒嬪娍寮傚父',
+          iconSrc: exception7,
+          siteNum: this.exception.exception7.length,
+          exceptionNum: this.exception.exception7Num,
+          isNoDataStatus: this.isNoData.exception7,
+          span: 4
+        },
+        {
+          siteName: this.exception.exception0,
+          exceptionType: '0',
+          exceptionName: '鏁版嵁缂哄け寮傚父',
+          iconSrc: exception0,
+          siteNum: this.exception.exception0.length,
+          exceptionNum: this.exception.exception0Num,
+          isNoDataStatus: this.isNoData.exception0,
+          span: 6
+        },
+        {
+          siteName: this.exception.exception1,
+          exceptionType: '1',
+          exceptionName: '鏁版嵁瓒呬綆',
+          iconSrc: exception1,
+          siteNum: this.exception.exception1.length,
+          exceptionNum: this.exception.exception1Num,
+          isNoDataStatus: this.isNoData.exception1,
+          span: 6
+        },
+        {
+          siteName: this.exception.exception2,
+          exceptionType: '2',
+          exceptionName: '瓒呮爣',
+          iconSrc: exception2,
+          siteNum: this.exception.exception2.length,
+          exceptionNum: this.exception.exception2Num,
+          isNoDataStatus: this.isNoData.exception2,
+          span: 6
+        },
+        {
+          siteName: this.exception.exception3,
+          exceptionType: '3',
+          exceptionName: '鏁版嵁闀挎椂娈垫棤娉㈠姩',
+          iconSrc: exception3,
+          siteNum: this.exception.exception3.length,
+          exceptionNum: this.exception.exception3Num,
+          isNoDataStatus: this.isNoData.exception3,
+          span: 6
+        }
+      ]
+    },
+  },
+  mounted() {
+
+    this.getSiteNume()
+
+    // 椋炶宸℃椤甸潰锛岃繘鍘诲姞杞�
+    if(this.showAll == true){
+      this.backExceptionDataAWeekAgo()
+      this.getShopNames()
+    }
+  },
+
+  methods: {
+    /**
+     * 鏈夋晥鐜囧紓甯� 璁剧疆鎶樼嚎鍥鹃厤缃」
+     * @param锛�
+     * @returns锛�
+     */
+    validProcess() {
+      // x杞存暟鎹�
+      let xList = time.ascTime(
+        this.tableCurrentRowData.beginTime,
+        this.tableCurrentRowData.endTime,
+        15
+      )
+
+      // y杞存暟鎹�
+      let yList = []
+      xList.forEach((item) => {
+        // 鏌ユ壘璇ユ椂闂寸殑鏁版嵁
+        let r = lineChart.findDate(this.dialog.historyData, item)
+        if (r) {
+          yList.push(r.dustValue)
+        } else {
+          yList.push(null)
+        }
+      })
+      // 棰滆壊鑳屾櫙鍖洪棿
+      // 寰楀埌鏃犳暟鎹殑鏃堕棿鐐规垨flag涓嶇瓑浜嶯鐨勬椂闂寸偣
+      let noDataTime = time.invalidTime(this.dialog.historyData, xList)
+      let rangeTime = time.seriesTime(noDataTime, 15)
+      // let rangeTime_1 = time.splitTime(rangeTime)
+      // 寰楀埌鑳屾櫙鍖洪棿鐨勯厤缃�
+      let areaObj = lineChart.getMarkArea(rangeTime, '寮傚父')
+      // let lineColor = lineChart.getLineColor(rangeTime,xList)
+      let lineColor = []
+      // console.log('绾挎',lineColor);
+      // 浼犲叆鍙傛暟
+      this.dialog.option = exceptionOption.setExceptionChartOption(
+        xList,
+        yList,
+        '',
+        '',
+        '',
+        '',
+        this.tableCurrentRowData.exception,
+        areaObj,
+        lineColor,
+        this.tableCurrentRowData.exceptionType
+      )
+    },
+
+    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锛�
+     * @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)
+    },
+    // 鐐瑰嚮琛ㄦ牸鐨勮鏃�
+    selectTableRow() {
+      // 鑾峰彇褰撳墠琛岀殑绱㈠紩
+      this.selectedRowIndex = this.displayData.indexOf(this.tableCurrentRowData)
+    },
+    /**
+     * description锛氭柇鐢垫垨鏂綉鏃惰缃殑琛ㄦ牸鏁版嵁
+     */
+    setOfflineTbleData() {
+      // 鏃犳暟鎹椂鐨勬椂闂存暟缁� 鏃堕棿鐩稿樊15鍒嗛挓
+      const abnormalTimeTenMinute = index.descFiftyTime(
+        this.tableCurrentRowData.beginTime,
+        this.tableCurrentRowData.endTime
+      )
+      // 淇濆瓨鏃犳暟鎹椂琛ㄦ牸鏉℃暟
+      this.dialog.exceptionTotal = abnormalTimeTenMinute.length
+
+      // 鍘婚櫎渚涚數寮傚父鍜屾帀绾垮尯闂寸殑绗竴涓湁鍏冪礌鐨勫��
+      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,
+          lst: abnormalTimeTenMinute[i],
+          dustValue: ''
+        })
+      }
+    },
+
+    // 娈电數鎴栨柇缃戝尯闂存棤鏁版嵁锛岄渶瑕佽ˉ鍏呫�傚叾浠栫殑閮芥湁鏁版嵁锛岀洿鎺ヤ竴娆¤姹傚叏閮ㄦ椂娈靛氨濂�
+
+    // 鏍规嵁寮傚父鍖洪棿鏋勯�犲墠鍚庣棣栧熬 鍓嶅尯闂� 涓棿鍖洪棿 鍚庡尯闂�
+    // 鍒ゆ柇鏄鐢垫垨鏂綉锛熸槸鍒欒姹傚墠鍚庡尯闂达紝鍚﹀垯鍙姹備竴娆″畬鏁寸殑
+    // 寰楀埌鏈�缁堟暟鎹�
+    // 鍐嶅垽鏂紓甯哥绫� 锛岃繘琛岃缃厤缃」
+
+    /**
+     * description锛氫竴娆¤姹傚洖鍓嶄腑鍚庡尯闂寸殑鏁版嵁,瀵规暟鎹繘琛屽垎鏋�
+     * @param锛� 鍓嶄腑鍚庡尯闂寸殑璇锋眰鍙傛暟锛屽墠涓悗鐨勬�诲尯闂存椂闂达紝寮傚父寮�濮嬫椂闂达紝涓�鍦虹粨鏉熸椂闂�
+     */
+    otherExceptionRequest(allTimeArgs, allTime, exceptionBT, exceptionET) {
+      // 鎶樼嚎鍥惧姞杞戒腑鏁堟灉
+      this.loading.lineChart = true
+
+      historyApi.queryHistoryData(allTimeArgs).then((result) => {
+        this.dialog.allExceptionTimeData = result.data.data
+        //  鏁版嵁缂哄け寮傚父鏃堕噸鏂拌缃〃鏍�
+        if (this.tableCurrentRowData.exceptionType == '0') {
+          this.setOfflineTbleData()
+        }
+
+        // x杞存棩鏈熸椂闂�
+        let dateList = []
+        // y杞� 瓒呮爣娌圭儫娴撳害
+        let dustValue = []
+        let timeAndValue = {}
+
+        // 浠庢坊鍔犱簡棣栦綅鍖洪棿鐨勫紑濮嬪拰缁撴潫鏃堕棿杩涜閬嶅巻 淇濊瘉鏃堕棿浠�15鍒嗛挓涓洪棿闅�
+        timeAndValue = index.keepContinuousByEachFiftyMinutes(
+          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)
+
+        // 璁剧疆鎶樼嚎鍥鹃厤缃」
+        // this.reSetChart(dateList, dustValue, exceptionBT, exceptionET, startIndex, endIndex)
+        this.dialog.option = exceptionOption.setExceptionChartOption(
+          dateList,
+          dustValue,
+          exceptionBT,
+          exceptionET,
+          startIndex,
+          endIndex,
+          this.tableCurrentRowData.exception,
+          '',
+          '',
+          this.tableCurrentRowData.exceptionType
+        )
+        this.flag.banTouch = 0
+        this.loading.lineChart = false
+      })
+    },
+
+    /**
+     * description锛氬垝鍒嗗嚭寮傚父璧峰鏃堕棿锛屾瀯閫犺姹傚墠涓悗鐨勫弬鏁�
+     */
+    timeAndDataProcessed() {
+      //寮傚父鐨勫紑濮嬫椂闂� 缁撴潫鏃堕棿
+      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 paramsAllTime = index.requestGetParms(
+        this.tableCurrentRowData.name,
+        beforeAndAfterTime[0],
+        beforeAndAfterTime[3]
+      )
+
+      // 灏嗗紓甯告暟鎹繘琛岄澶勭悊锛岄殢鍚庡皢缁撴灉浣滀负鎶樼嚎鍥剧殑閰嶇疆椤�
+      this.otherExceptionRequest(
+        paramsAllTime,
+        beforeAndAfterTime,
+        exceptionBeginTime,
+        exceptionEndTime
+      )
+    },
+
+    /**
+     * description锛氳幏鍙栦笅涓�鏉″紓甯镐俊鎭�
+     */
+    getPreviousRowData() {
+      //     // 涓嶆槸琛ㄦ牸鐨勬渶鍚庝竴琛�
+      if (this.selectedRowIndex < this.displayData.length - 1) {
+        // 鐐瑰嚮杩囩▼涓� 閿佷綇涓婁笅鏉℃寜閽�  鍦ㄨ缃畬鍥惧舰閰嶇疆椤瑰悗瑙i攣
+        this.flag.banTouch = 1
+
+        //寰楀埌涓婁竴琛屾暟鎹储寮�
+        this.selectedRowIndex = this.selectedRowIndex + 1
+
+        // 寰楀埌涓婁竴琛岀殑鏁版嵁
+        this.tableCurrentRowData = this.displayData[this.selectedRowIndex]
+
+        this.loading.preButton = true
+
+        historyApi
+          .queryHistoryData({
+            siteName: this.tableCurrentRowData.name,
+            beginTime: this.tableCurrentRowData.beginTime,
+            endTime: this.tableCurrentRowData.endTime
+          })
+          .then((response) => {
+            // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
+            this.dialog.historyData = response.data.data
+            this.dialog.exceptionTotal = response.data.data.length
+            // 閫昏緫澶勭悊
+
+            if (this.tableCurrentRowData.exceptionType != '8') {
+              this.timeAndDataProcessed()
+            } else {
+              this.loading.lineChart = true
+              this.validProcess()
+              this.loading.lineChart = false
+              this.flag.banTouch = 0
+            }
+            this.loading.preButton = false
+          })
+      }
+    },
+    /**
+     * description锛氳幏鍙栦笅涓�鏉″紓甯镐俊鎭�
+     */
+    getNextRowData() {
+      // 涓嶆槸琛ㄦ牸鐨勭涓�琛�
+      if (this.selectedRowIndex !== 0) {
+        // 鐐瑰嚮杩囩▼涓� 閿佷綇涓婁笅鏉℃寜閽�  鍦ㄨ缃畬鍥惧舰閰嶇疆椤瑰悗瑙i攣
+        this.flag.banTouch = 1
+
+        //寰楀埌涓婁竴琛屾暟鎹储寮�
+        this.selectedRowIndex = this.selectedRowIndex - 1
+
+        // 寰楀埌涓婁竴琛岀殑鏁版嵁
+        this.tableCurrentRowData = this.displayData[this.selectedRowIndex]
+
+        this.loading.afterButton = true
+
+        historyApi
+          .queryHistoryData({
+            siteName: this.tableCurrentRowData.name,
+            beginTime: this.tableCurrentRowData.beginTime,
+            endTime: this.tableCurrentRowData.endTime
+          })
+          .then((response) => {
+            // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
+            this.dialog.historyData = response.data.data
+            this.dialog.exceptionTotal = response.data.data.length
+            // 閫昏緫澶勭悊
+
+            if (this.tableCurrentRowData.exceptionType != '8') {
+              this.timeAndDataProcessed()
+            } else {
+              this.loading.lineChart = true
+              this.validProcess()
+              this.loading.lineChart = false
+              this.flag.banTouch = 0
+            }
+            this.loading.afterButton = false
+          })
+      }
+    },
+
+    /**
+     * description锛氫粠瀛愮粍浠惰幏寰楁煇绔欑偣璇ユ椂娈电殑寮傚父鏁版嵁
+     * @createTime:2023-08-18
+     */
+    backExceptionData(val1, val2) {
+      this.displayData = val1
+      this.total = val2
+    },
+
+    // 鏌ヨ寮傚父鏁版嵁鐨勭珯鐐瑰悕瀛楀拰鏁伴噺
+    queryExceptionSite(url, exceptionType) {
+      let params = {}
+      params['beginTime'] = this.beginTime
+      params['endTime'] = this.endTime
+      params['exceptionType'] = exceptionType
+
+      if(this.siteName){
+        params['siteName'] = this.siteName
+      }
+      // if (this.form.street.length != 0) {
+      //   params['street'] = this.form.street.join()
+      // }
+      if (this.form.dutyCompany.length != 0) {
+        params['dutyCompany'] = this.form.dutyCompany.join()
+      }
+      return this.$http.get(url, { params: params })
+    },
+
+    /**
+     * description锛氬綋鐢ㄦ埛鏀瑰彉鏌ヨ鐨勬椂闂村尯闂存椂锛屼細鏍规嵁璇ュ尯闂存煡璇㈠悇寮傚父鐨勭珯鐐癸紝鏌ヨ璇ユ椂闂村尯闂寸殑鍚勫紓甯告暟閲�
+     * @createTime:2023-08-18
+     */
+    getShopNames() {
+      /* 鏌ヨ寮傚父鐨勭珯鐐� */
+      this.queryExceptionSite('/dust/sitenamecode', 0).then((result) => {
+        this.exception.exception0 = result.data.data
+        if (result.data.data.length == 0) {
+          this.isNoData.exception0 = true
+          return
+        }
+        this.isNoData.exception0 = false
+      })
+      this.queryExceptionSite('/dust/sitenamecode', 1).then((result) => {
+        this.exception.exception1 = result.data.data
+        if (result.data.data.length == 0) {
+          this.isNoData.exception1 = true
+          return
+        }
+        this.isNoData.exception1 = false
+      })
+      this.queryExceptionSite('/dust/sitenamecode', 2).then((result) => {
+        this.exception.exception2 = result.data.data
+        if (result.data.data.length == 0) {
+          this.isNoData.exception2 = true
+          return
+        }
+        this.isNoData.exception2 = false
+      })
+
+      this.queryExceptionSite('/dust/sitenamecode', 3).then((result) => {
+        this.exception.exception3 = result.data.data
+        if (result.data.data.length == 0) {
+          this.isNoData.exception3 = true
+          return
+        }
+        this.isNoData.exception3 = false
+      })
+
+      this.queryExceptionSite('/dust/sitenamecode', 4).then((result) => {
+        this.exception.exception4 = result.data.data
+        if (result.data.data.length == 0) {
+          this.isNoData.exception4 = true
+          return
+        }
+        this.isNoData.exception4 = false
+      })
+      this.queryExceptionSite('/dust/sitenamecode', 5).then((result) => {
+        this.exception.exception5 = result.data.data
+        if (result.data.data.length == 0) {
+          this.isNoData.exception5 = true
+          return
+        }
+        this.isNoData.exception5 = false
+      })
+      this.queryExceptionSite('/dust/sitenamecode', 6).then((result) => {
+        this.exception.exception6 = result.data.data
+        if (result.data.data.length == 0) {
+          this.isNoData.exception6 = true
+          return
+        }
+        this.isNoData.exception6 = false
+      })
+      this.queryExceptionSite('/dust/sitenamecode', 7).then((result) => {
+        this.exception.exception7 = result.data.data
+        if (result.data.data.length == 0) {
+          this.isNoData.exception7 = true
+          return
+        }
+        this.isNoData.exception7 = false
+      })
+      this.queryExceptionSite('/dust/sitenamecode', 8).then((result) => {
+        this.exception.exception8 = result.data.data
+        if (result.data.data.length == 0) {
+          this.isNoData.exception8 = true
+          return
+        }
+
+        this.isNoData.exception8 = false
+      })
+
+      /* 寮傚父寮傚父鏁伴噺 */
+      this.queryExceptionSite('/dust/exceptionnum', 0).then((result) => {
+        this.exception.exception0Num = result.data.data
+      })
+      this.queryExceptionSite('/dust/exceptionnum', 1).then((result) => {
+        this.exception.exception1Num = result.data.data
+      })
+      this.queryExceptionSite('/dust/exceptionnum', 2).then((result) => {
+        this.exception.exception2Num = result.data.data
+      })
+
+      this.queryExceptionSite('/dust/exceptionnum', 3).then((result) => {
+        this.exception.exception3Num = result.data.data
+      })
+
+      this.queryExceptionSite('/dust/exceptionnum', 4).then((result) => {
+        this.exception.exception4Num = result.data.data
+      })
+      this.queryExceptionSite('/dust/exceptionnum', 5).then((result) => {
+        this.exception.exception5Num = result.data.data
+      })
+      this.queryExceptionSite('/dust/exceptionnum', 6).then((result) => {
+        this.exception.exception6Num = result.data.data
+      })
+      this.queryExceptionSite('/dust/exceptionnum', 7).then((result) => {
+        this.exception.exception7Num = result.data.data
+      })
+      this.queryExceptionSite('/dust/exceptionnum', 8).then((result) => {
+        this.exception.exception8Num = result.data.data
+      })
+    },
+
+    /**
+     * description锛氭樉绀哄璇濇,杩斿洖璇ュ紓甯告椂闂存鐨勬墍鏈夋暟鎹�
+     * @param锛氱偣鍑烩�樻煡鐪嬭鎯呪�欑殑璇ヨ鎵�鏈夊瓧娈垫暟鎹�
+     * @createTime:2023-08-18
+     */
+    showDialog(row) {
+      // 鎵撳紑瀵硅瘽妗�
+      this.dialogTableVisible = true
+
+      // 淇濆瓨褰撳墠琛屾暟鎹�
+      this.tableCurrentRowData = row
+
+      // 鑾峰彇褰撳墠琛岀殑绱㈠紩
+      this.selectedRowIndex = this.displayData.indexOf(row)
+
+      //鏍规嵁褰撳墠琛岀殑缂栧彿锛岃捣濮嬫椂闂存潵 璇锋眰寮傚父鏁版嵁
+      // 瀵硅姹傚埌鐨勬暟鎹繘琛岄灏炬嫾鎺�
+      // 寰楀埌鍓嶅悗瀹屾暣鏁版嵁杩涜缁樺埗鍥惧舰
+
+      historyApi
+        .queryHistoryData({
+          siteName: row.name,
+          beginTime: row.beginTime,
+          endTime: row.endTime
+        })
+        .then((response) => {
+          // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹�
+          this.dialog.historyData = response.data.data
+          this.dialog.exceptionTotal = response.data.data.length
+          // 閫昏緫澶勭悊
+
+          if (this.tableCurrentRowData.exceptionType != '8') {
+            this.timeAndDataProcessed()
+          } else {
+            this.loading.lineChart = true
+            this.validProcess()
+            this.loading.lineChart = false
+            this.flag.banTouch = 0
+          }
+        })
+    },
+    /**
+     * description锛氭潯浠舵煡璇㈠紓甯哥殑鏁版嵁
+     * @createTime:2023-08-18
+     */
+    handleSubmit() {
+      if (this.isExceedOneMonth(this.beginTime, this.endTime)) {
+        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
+      if (this.siteName) {
+        params['siteName'] = this.siteName
+      }
+      // if (this.form.street.length != 0) {
+      //   params['street'] = this.form.street.join()
+      // }
+      if (this.form.dutyCompany.length != 0) {
+        params['dutyCompany'] = this.form.dutyCompany.join()
+      }
+      params['beginTime'] = this.beginTime
+      params['endTime'] = this.endTime
+
+      this.$http.get('/dust/exceptiondata2', { params: params }).then((response) => {
+        // 淇濆瓨杩斿洖鐨�
+        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
+        // 绉婚櫎绌烘暟鎹姸鎬�
+      })
+    },
+
+    /**
+     * description锛氭墦寮�椤甸潰榛樿鍔犺浇鏈�杩戜竴鍛ㄧ殑寮傚父鏁版嵁
+     * @createTime:2023-08-18
+     */
+    backExceptionDataAWeekAgo() {
+      this.loading.tableLoading = true
+      let params = {}
+      if (this.siteName) {
+        params['siteName'] = this.siteName
+      }
+
+      params['beginTime'] = this.beginTime
+      params['endTime'] = this.endTime
+      console.log('name',this.siteName)
+      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
+      })
+    },
+
+    /**
+     * description锛氬皢涓浗鏍囧噯鏃堕棿杞负鎸囧畾鏍煎紡(璇ョ粍浠惰繑鍥炵殑鏍囧噯鏃堕棿鐨勬牸寮忥紝鎵�浠ュ繀椤荤殑鍔犺繖涓嚱鏁�)
+     * @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')
+    },
+
+    // 鍔熻兘锛氳〃鏍奸珮搴︽牴鎹唴瀹硅嚜閫傚簲
+    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
+      // 鍏朵腑涓�涓�40鏄洅瀛愮殑鎬诲杈硅窛
+      this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - ${h3}px - ${h4}px - 40px - var(--el-main-padding) * 2)`
+    },
+
+    // 椤靛ぇ灏忔敼鍙樻椂瑙﹀彂
+    handleSizeChange(val) {
+      this.pageSize = val
+
+      // 鏀瑰彉姣忛〉鏄剧ず鏁扮洰鏃惰烦鍒板綋鍓嶉〉
+      this.handleCurrentChange(1)
+    },
+
+    // 椤靛彿鏀瑰彉鏃惰Е鍙�
+    /**
+     * description锛氶〉鍙锋敼鍙樻椂瑙﹀彂
+     * @param锛� 褰撳墠椤碉紝鏍囪浣嶏紙0浠h〃鏄偣鍑烩�樻煡璇⑩�欒Е鍙戠殑锛�1浠h〃鏃剁偣鍑诲紓甯哥珯鐐规枃鏈寜閽Е鍙戠殑锛�
+     * @createTime:2023-08-17
+     * @returns锛�
+     */
+    handleCurrentChange(val) {
+      // 灏嗗綋鍓嶉〉鍙风粰currentPage
+      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
+
+        this.displayData = this.tableData.slice(startIndex, endIndex)
+      }
+    },
+    // 琛ㄦ牸搴忓彿閫掑
+    indexMethod1(index) {
+      return index + 1 + (this.currentPage - 1) * this.pageSize
+    },
+    // 琛ㄦ牸搴忓彿閫掑
+    indexMethod2(index) {
+      return index + 1
+    }
+  }
+}
+</script>
+
+<template>
+  <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-form-item v-show="!showAll">
+              <span class="site-text"> 鐐逛綅鍚嶇О:</span>
+              <span> {{ this.siteName }}</span>
+            </el-form-item>
+
+            <el-form-item v-show="showAll">
+              <DutyCompany @submitDutyCompanyValue="(n) => (form.dutyCompany = n)"> </DutyCompany>
+            </el-form-item>
+
+            <!-- <el-form-item v-show="showAll">
+              <StreetInfo @submitStreetValue="(n) => (form.street = n)"> </StreetInfo>
+            </el-form-item> -->
+
+            <el-form-item>
+              <TimeShortCuts timeType="day" @submit-time="giveTime" :beginAndEndTime="[beginTime,endTime]"></TimeShortCuts>
+            </el-form-item>
+
+            <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 class="head-describtion-text" ref="h2">
+      <el-row>
+        <span> 閲戝北鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 鎵皹鐩戞祴寮傚父淇℃伅姹囨��</span>
+      </el-row>
+    </el-row>
+
+    <!-- 寮傚父鍒嗘瀽 -->
+    <el-row ref="h3">
+      <el-col>
+        <el-card class="card-container">
+          <template #header>
+            <div class="card-header">寮傚父鍒嗘瀽</div>
+          </template>
+
+          <el-row :gutter="20">
+            <el-col v-for="item in cardRow" :key="item.exceptionType" :span="item.span">
+              <AnalysisCard
+                :site-name="item.siteName"
+                :exception-type="item.exceptionType"
+                :begin-time="beginTime"
+                :end-time="endTime"
+                :exception-name="item.exceptionName"
+                :site-num="item.siteNum"
+                :exception-num="item.exceptionNum"
+                :exception-all-num="exceptionAllNum"
+                :site-num-all="siteTotal"
+                :isNoDataStatus="item.isNoDataStatus"
+                :icon="item.iconSrc"
+                @get-abnormal-data-by-click="getAbnormalDataByClick"
+                class="card-row"
+              >
+                >
+              </AnalysisCard>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <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>{{ tableCurrentRowData.beginTime }} ~
+              {{ tableCurrentRowData.endTime }}
+            </div>
+          </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>
+
+      <!-- 鍥惧舰 -->
+      <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 prop="lst" label="閲囬泦鏃堕棿" align="center" show-overflow-tooltip />
+          <el-table-column
+            prop="dustValue"
+            label="TSP(mg/m鲁)"
+            align="center"
+            show-overflow-tooltip
+          />
+          <el-table-column prop="flag" label="鏁版嵁鏍囪瘑" align="center" show-overflow-tooltip />
+        </el-table>
+      </div>
+      <template #footer>
+        <div class="dialog-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' ||
+              tableCurrentRowData.exceptionType == '5' ||
+              tableCurrentRowData.exceptionType == '6' ||
+              tableCurrentRowData.exceptionType == '7' ||
+              tableCurrentRowData.exceptionType == '8'
+            "
+            >寮傚父鏁版嵁锛�</span
+          >
+          <span class="table-line-num">{{ dialog.exceptionTotal }}鏉�</span>
+          <span v-show="tableCurrentRowData.exceptionType == '0'"> (閫昏緫璁$畻)</span>
+        </el-tag>
+        <el-text v-show="tableCurrentRowData.exceptionType == '8'" type="warning" class="dialog-footer-text">鏁版嵁鏍囪瘑A涓烘暟鎹暱鏈熺己澶�,绯荤粺鑷姩琛ュ叏</el-text>
+      </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.el-row {
+  margin-left: 10px;
+}
+
+/* 鏉′欢鏌ヨ妯″潡鐨勬牱寮� */
+.el-form {
+  margin: 10px;
+}
+img {
+  margin-right: 5px;
+}
+.head-container-search {
+  float: right;
+}
+
+.head-describtion-text {
+  justify-content: flex-end;
+  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 {
+  margin-left: 5px;
+  font-size: 18px;
+  font-weight: bold;
+}
+.card-content-unnormal {
+  min-height: 200px;
+  border: 2px solid #ffcf8b;
+  border-radius: 20px;
+}
+.card-content-normal {
+  min-height: 200px;
+  border: 2px solid red;
+  border-radius: 20px;
+}
+
+.card-header-text {
+  font-size: 16px;
+  font-weight: bold;
+  margin-top: 4px;
+  margin-left: 4px;
+}
+.card-content-text {
+  white-space: nowrap;
+}
+.card-exceptionname-text1 {
+  /*  寮傚父绔欑偣鍗犳瘮 */
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+.card-exceptionname-text2 {
+  /* 寮傚父鏁板崰姣旂殑澶栬竟璺� */
+  font-size: 14px;
+  white-space: nowrap;
+}
+.text-blank {
+  /* 閫楀彿 */
+  margin-right: 10px;
+  color: #000000;
+}
+.card-row {
+  margin-bottom: 10px;
+}
+
+/* 寮傚父鍒嗘瀽妯″潡缁撴潫 */
+
+/* 闅愯棌琛ㄦ牸鎸夐挳缁勬牱寮� */
+.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;
+}
+.diag-head-text1 {
+  /* 瀵硅瘽妗嗗ご閮ㄧ殑灞炴�у瓧娈靛姞绮� */
+  font-weight: bold;
+}
+
+.diag-head-text > div {
+  /*  瀵硅瘽妗嗗紓甯告椂闂存 */
+  margin-top: 15px;
+}
+.diag-head-text {
+  margin: 10px;
+  padding: 10px;
+  background: linear-gradient(90deg, #00c9ff 0%, #92fe9d 100%);
+  border: 2px solid #7bc0fc;
+}
+.chart-jump-button {
+  display: flex;
+  justify-content: right;
+}
+
+.mx-1 {
+  /* position: absolute;
+  left: 10px;
+  bottom: 10px; */
+  justify-content: flex-start;
+}
+.dialog-footer{
+  display: flex;
+}
+.dialog-footer-text {
+  justify-content: flex-end;
+  margin-left: auto;
+  font-size: 14px;
+  /* color: #333333; */
+}
+/* 鏌ョ湅璇︽儏瀵硅瘽妗嗘ā鍧楃粨鏉� */
+</style>

--
Gitblit v1.9.3