1.增加了有效率异常展示页面 2.风险模型的所属场景和运维商的详细信息，以及1个跳转页面链接 3.飞行巡检页面增加增加地址和运维商的筛选条件 4.飞行...

zmc

2023-11-22 0ecf7b3bc6d6a008a804d55c859833bf2cf6473a

 src/views/exception/FlightInspection.vue

@@ -11,14 +11,21 @@
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import AnalysisCard from './components/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'
export default {
  components: {
    TimeShortCuts,
    DustLineChart,
    ButtonClick,
    AreaAndmonitorType,
    AnalysisCard
    AnalysisCard,
    DutyCompany,
    StreetInfo
  },
  data() {
    return {
@@ -26,6 +33,10 @@
      form: {
        // 站点名称
        name: '',
        // 运维商
        dutyCompany: [],
        // 街道
        street: [],
        // 选择的异常类型
        exceptionName: []
      },
@@ -39,6 +50,8 @@
      tableHeight: 400,
      // 表格显示
      isTableShow: false,
      // 审核辅助按钮显示
      auditButton: false,
      // 当前页
      currentPage: 1,
      // 每页条数
@@ -48,14 +61,15 @@

      // 查询按钮无数据时
      isNoData: {
        exception0:true,
        exception1:true,
        exception2:true,
        exception3:true,
        exception4:true,
        exception5:true,
        exception6:true,
        exception7:true,
        exception0: true,
        exception1: true,
        exception2: true,
        exception3: true,
        exception4: true,
        exception5: true,
        exception6: true,
        exception7: true,
        exception8: true
      },
      // eslint-disable-next-line no-undef
      // 对话框显示
@@ -78,6 +92,8 @@
        exception6: [],
        // 滑动平均值异常
        exception7: [],
        // 有效率异常
        exception8: [],

        // 该时段的异常数量
        exception0Num: 0,
@@ -87,7 +103,8 @@
        exception4Num: 0,
        exception5Num: 0,
        exception6Num: 0,
        exception7Num: 0
        exception7Num: 0,
        exception8Num: 0
      },
      // 站点总数量
      siteTotal: 0,
@@ -132,7 +149,7 @@
        // 0代表分页，1代表不分页
        originClick: 0
      },
      
      areaColor: null
    }
  },
  setup() {
@@ -146,29 +163,8 @@
  watch: {
    selectedRowIndex(newVaue) {
      // 处于表格的最后一条数据 设置‘上一条’按钮不可点
      // if (newVaue === this.displayData.length - 1) {
      //   this.dialog.isPreCantouch = true
      //   //用户先点了第一条，pre为true,然后点击最后一条,next为true。此时两个按钮都被封锁
      //   if (this.dialog.isNextCantouch == true) {
      //     this.dialog.isNextCantouch = false
      //   }
      // }
      // // 处于表格第一条数据 设置‘下一条’按钮不可点
      // else if (newVaue === 0) {
      //   this.dialog.isNextCantouch = true
      //   //用户先点了表格最后一条,next为true,然后点击第一条，pre为true。此时两个按钮都被封锁
      //   if (this.dialog.isPreCantouch == true) {
      //     this.dialog.isPreCantouch = false
      //   }
      // }
      // // 处于表格的中间行 将按钮设置为可点击状态
      // else {
      //   this.dialog.isPreCantouch = false
      //   this.dialog.isNextCantouch = false
      // }
      // 处于表格的最后一条数据 设置‘上一条’按钮不可点
      if (newVaue === 0) {
          this.dialog.isPreCantouch = true
        this.dialog.isPreCantouch = true
        //用户先点了第一条，pre为true,然后点击最后一条,next为true。此时两个按钮都被封锁
        if (this.dialog.isNextCantouch == true) {
          this.dialog.isNextCantouch = false
@@ -202,150 +198,208 @@
  },
  computed: {
    exceptionAllNum() {
      let sum = this.exception.exception0Num +
      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){
        this.exception.exception7Num +
        this.exception.exception8Num
      if (sum == 0) {
        return 1
      }else {
      } else {
        return sum
      }
    },
    long_time_notchange(){
      let sum = this.exception.exception0Num +
    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){
        this.exception.exception7Num +
        this.exception.exception8Num
      if (sum == 0) {
        return 0
      }else{
      } 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)
          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)
      }
    },
    // 第一排卡片
    cardRow1(){
    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.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.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
          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
        }
      ]
    },  
      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
    },
    cardRow2() {
      return [
        {
          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
        },
        {
          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.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.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
        }, 
          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
        }
      ]
      }
    },
    cardRow3() {
      return [
        {
          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
        },
        {
          siteName: this.exception.exception8,
          exceptionType: '8',
          exceptionName: '有效率异常',
          iconSrc: '@/assets/exception/exception3.png',
          siteNum: this.exception.exception8.length,
          exceptionNum: this.exception.exception8Num,
          isNoDataStatus: this.isNoData.exception8
        }
      ]
    }
  },
  mounted() {
    this.backExceptionDataAWeekAgo()
    // 查询时间段的各异常的站点，查询该时间区间的各异常数量
    this.getShopNames()
    this.getSiteNume()

    let a = [
      ['2023-10-01  11:45:00', '2023-10-01  13:45:00'],
      ['2023-10-01  11:45:00', '2023-10-01  12:45:00']
    ]

    let b = time.splitTime(a)
    console.log('时间：', b)
  },

  methods: {
    getImageUrl(name){
        return new URL(`../../lib/Carousel/assets/${name}`, import.meta.url).href
    /**
     * 有效率异常 设置折线图配置项
     * @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不等于N的时间点
      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, '异常')

      // 传入参数
      this.dialog.option = exceptionOption.setExceptionChartOption(
        xList,
        yList,
        '',
        '',
        '',
        '',
        this.tableCurrentRowData.exception,
        areaObj,
        this.tableCurrentRowData.exceptionType
      )
    },

    getImageUrl(name) {
      return new URL(`../../lib/Carousel/assets/${name}`, import.meta.url).href
    },
    // 放回站点总数量
    getSiteNume() {
@@ -414,7 +468,8 @@
    otherExceptionRequest(allTimeArgs, allTime, exceptionBT, exceptionET) {
      // 折线图加载中效果
      this.loading.lineChart = true
      this.$http.get('/dust/history', { params: allTimeArgs }).then((result) => {

      historyApi.queryHistoryData(allTimeArgs).then((result) => {
        this.dialog.allExceptionTimeData = result.data.data
        //  数据缺失异常时重新设置表格
        if (this.tableCurrentRowData.exceptionType == '0') {
@@ -427,7 +482,7 @@
        let dustValue = []
        let timeAndValue = {}

        // 从添加了首位区间的开始和结束时间进行遍历 保证时间以10分钟为间隔
        // 从添加了首位区间的开始和结束时间进行遍历 保证时间以15分钟为间隔
        timeAndValue = index.keepContinuousByEachFiftyMinutes(
          allTime[0],
          allTime[3],
@@ -441,483 +496,26 @@
        let endIndex = dateList.findIndex((item) => item === exceptionET)

        // 设置折线图配置项
        this.reSetChart(dateList, dustValue, exceptionBT, exceptionET, startIndex, endIndex)
        // 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：绘制折线图
     * @param： x轴时间， y轴油烟浓度， 异常开始时间，异常结束时间，异常开始时间在整个区间的索引下标，异常结束时间在整个区间的索引下标
     */
    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: {
              // 工具栏
              feature: {
                // dataZoom: {
                //   // 区域缩放
                //   yAxisIndex: 'none'
                // },
                // 保存为图片
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              data: xData,
              name: '时间',
              axisLabel: {
                formatter: function (value) {
                  return value.slice(11, -3)
                }
              }
            },
            yAxis: {
              type: 'value',
              name: 'mg/m³'
            },
            series: [
              {
                name: '颗粒物浓度',
                type: 'line',
                data: yData,
                markLine: {
                  silent: true,
                  data: [
                    // 标注无数据时间段的效果，将这个时间段的数轴部分变为红色
                    {
                      name: '无数据',
                      xAxis: exceptionBeginTime
                    },
                    {
                      xAxis: exceptionEndTime
                    }
                  ],
                  lineStyle: {
                    color: 'red'
                  }
                }
              }
            ]
          }
          break
        // 超标
        case '2':
          this.dialog.option = {
            title: {
            text: this.tableCurrentRowData.exception,
            left: '1%',
            textStyle:{
              fontSize:14
            }
          },
            tooltip: {},
            toolbox: {
              // 工具栏
              feature: {
                //     dataZoom: {
                //   yAxisIndex: 'none'
                // },
                // 保存为图片
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              data: xData,
              name: '时间',
              axisLabel: {
                formatter: function (value) {
                  return value.slice(11, -3)
                }
              }
            },
            yAxis: {
              type: 'value',
              name: 'mg/m³'
            },
            series: [
              {
                name: '颗粒物浓度',
                type: 'line',
                data: yData.map((item) => {
                  if (item >= 1) {
                    return {
                      value: item,
                      itemStyle: {
                        color: 'red'
                      }
                    }
                  }
                  return item
                }),
                // 变换指定时间区间的背景颜色
                markArea: {
                  itemStyle: {
                    color: 'rgba(255, 173, 177, 0.4)'
                  },
                  data: [
                    [
                      {
                        name: '异常时间段',
                        xAxis: exceptionBeginTime
                      },
                      {
                        xAxis: exceptionEndTime
                      }
                    ]
                  ]
                },
                markLine: {
                  symbol: 'none',
                  itemStyle: {
                    // 基线公共样式
                    normal: {
                      lineStyle: {
                        type: 'dashed'
                      },
                      label: {
                        show: true,
                        position: 'end',
                        formatter: '{b}'
                      }
                    }
                  },
                  data: [
                    {
                      name: '超标',
                      type: 'average',
                      yAxis: 1,
                      lineStyle: {
                        // color: '#ff0000'
                        color: 'red'
                      }
                    }
                  ]
                }
              }
            ],
            // 指定时间区间的线段变颜色
            visualMap: {
              show: false,
              dimension: 0,
              pieces: [
                {
                  lte: beginIndex,
                  color: 'green'
                },
                {
                  gt: beginIndex,
                  lte: endIndex,
                  color: 'red'
                },
                {
                  gt: endIndex,
                  lte: xData.length - 1,
                  color: 'green'
                }
              ]
            }
          }
          break
        // 数据超低 只有时间点
        case '1':
          this.dialog.option = {
            title: {
            text: this.tableCurrentRowData.exception,
            left: '1%',
            textStyle:{
              fontSize:14
            }
          },
            tooltip: {},
            toolbox: {
              // 工具栏
              feature: {
                //     dataZoom: {
                //   yAxisIndex: 'none'
                // },
                // 保存为图片
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              data: xData,
              name: '时间',
              axisLabel: {
                formatter: function (value) {
                  return value.slice(11, -3)
                }
              }
            },
            yAxis: {
              type: 'value',
              name: 'mg/m³'
            },
            series: [
              {
                name: '颗粒物浓度',
                type: 'line',
                data: yData.map((item) => {
                  if (item <= 0.01) {
                    return {
                      value: item,
                      itemStyle: {
                        color: 'red'
                      }
                    }
                  }
                  return item
                }),

                markLine: {
                  symbol: 'none',
                  itemStyle: {
                    // 基线公共样式
                    normal: {
                      lineStyle: {
                        type: 'dashed'
                      },
                      label: {
                        show: true,
                        position: 'end',
                        formatter: '{b}'
                      }
                    }
                  },
                  data: [
                    {
                      name: '数据超低',
                      type: 'average',
                      yAxis: 0.01,
                      lineStyle: {
                        // color: '#ff0000'
                        color: 'red'
                      }
                    }
                  ]
                }
              }
            ],
            // 指定时间区间的线段变颜色
            visualMap: {
              show: false,
              dimension: 0,
              pieces: [
                {
                  lte: beginIndex,
                  color: 'green'
                },
                {
                  gt: beginIndex,
                  lte: endIndex,
                  color: 'red'
                },
                {
                  gt: endIndex,
                  lte: xData.length - 1,
                  color: 'green'
                }
              ]
            }
          }
          break
        // 数据长时段无波动 
        case '3':
          this.dialog.option = {
            title: {
            text: this.tableCurrentRowData.exception,
            left: '1%',
            textStyle:{
              fontSize:14
            }
          },
            tooltip: {},
            toolbox: {
              // 工具栏
              feature: {
                //  dataZoom: {
                //   yAxisIndex: 'none'
                // },
                // 保存为图片
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              data: xData,
              name: '时间',
              axisLabel: {
                formatter: function (value) {
                  return value.slice(11, -3)
                }
              }
            },
            yAxis: {
              type: 'value',
              name: 'mg/m³'
            },
            series: [
              {
                name: '颗粒物浓度',
                type: 'line',
                data: yData.map((item) => {
                  if (item >= 1) {
                    return {
                      value: item,
                      itemStyle: {
                        color: 'red'
                      }
                    }
                  }
                  return item
                }),
                // 变换指定时间区间的背景颜色
                markArea: {
                  itemStyle: {
                    color: 'rgba(255, 173, 177, 0.4)'
                  },
                  data: [
                    [
                      {
                        name: '异常时间段',
                        xAxis: exceptionBeginTime
                      },
                      {
                        xAxis: exceptionEndTime
                      }
                    ]
                  ]
                }
              }
            ],
            // 指定时间区间的线段变颜色
            visualMap: {
              show: false,
              dimension: 0,
              pieces: [
                {
                  lte: beginIndex,
                  color: 'green'
                },
                {
                  gt: beginIndex,
                  lte: endIndex,
                  color: 'red'
                },
                {
                  gt: endIndex,
                  lte: xData.length - 1,
                  color: 'green'
                }
              ]
            }
          }
          break
        // 量级突变异常
        case '4':
        case '5':
        case '6':
        case '7':
          this.dialog.option = {
            title: {
            text: this.tableCurrentRowData.exception,
            left: '1%',
            textStyle:{
              fontSize:14
            }
          },
            tooltip: {},
            toolbox: {
              // 工具栏
              feature: {
                //     dataZoom: {
                //   yAxisIndex: 'none'
                // },
                // 保存为图片
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              data: xData,
              name: '时间',
              axisLabel: {
                formatter: function (value) {
                  return value.slice(11, -3)
                }
              }
            },
            yAxis: {
              type: 'value',
              name: 'mg/m³'
            },
            series: [
              {
                name: '颗粒物浓度',
                type: 'line',
                data: yData,
                // 变换指定时间区间的背景颜色
                markArea: {
                  itemStyle: {
                    color: 'rgba(255, 173, 177, 0.4)'
                  },
                  data: [
                    [
                      {
                        name: '异常时间段',
                        xAxis: exceptionBeginTime
                      },
                      {
                        xAxis: exceptionEndTime
                      }
                    ]
                  ]
                }
              }
            ],
            // 指定时间区间的线段变颜色
            visualMap: {
              show: false,
              dimension: 0,
              pieces: [
                {
                  lte: beginIndex,
                  color: 'green'
                },
                {
                  gt: beginIndex,
                  lte: endIndex,
                  color: 'red'
                },
                {
                  gt: endIndex,
                  lte: xData.length - 1,
                  color: 'green'
                }
              ]
            }
          }
          break
        default:
          console.log('没有设置该异常类型！')
      }
      this.flag.banTouch = 0
    },
    /**
     * description：划分出异常起始时间，构造请求前中后的参数
     */
@@ -938,7 +536,7 @@
        beforeAndAfterTime[0],
        beforeAndAfterTime[3]
      )
      

      // 将异常数据进行预处理，随后将结果作为折线图的配置项
      this.otherExceptionRequest(
        paramsAllTime,
@@ -960,30 +558,33 @@
        //得到上一行数据索引
        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
        )

        this.loading.preButton = true
        this.$http.get('/dust/history', { params: params }).then((response) => {

     
        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
          // 逻辑处理
          this.timeAndDataProcessed()

          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
        })
      }

      //得到上一行数据索引
      // this.selectedRowIndex = this.selectedRowIndex + 1;
      // this.tableCurrentRowData = this.displayData[this.selectedRowIndex]
    },
    /**
     * description：获取下一条异常信息
@@ -996,26 +597,33 @@

        //得到上一行数据索引
        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
        )
        this.loading.afterButton = true
        this.$http.get('/dust/history', { params: params }).then((response) => {

        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
          // 逻辑处理
          this.timeAndDataProcessed()

          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
        })

      }
    },

@@ -1028,259 +636,135 @@
      this.total = val2
    },

    // 查询异常数据的站点名字和数量
    queryExceptionSite(url, exceptionType) {
      let params = {}
      params['beginTime'] = this.beginTime
      params['endTime'] = this.endTime
      params['exceptionType'] = exceptionType

      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.$http
        .get('/dust/sitenamecode', {
          params: {
            exceptionType: '0',
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        })
        .then((result) => {
          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: {
            exceptionType: '1',
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        })
        .then((result) => {
          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: {
            exceptionType: '2',
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        })
        .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.$http
        .get('/dust/sitenamecode', {
          params: {
            exceptionType: '3',
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        })
        .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.$http
        .get('/dust/sitenamecode', {
          params: {
            exceptionType: '4',
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        })
        .then((result) => {
          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',
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        })
        .then((result) => {
          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',
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        })
        .then((result) => {
          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.isNoData.exception8 = false
      })

      /* 异常异常数量 */
      this.$http
        .get('/dust/exceptionnum', {
          params: {
            exceptionType: '0',
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        })
        .then((result) => {
          this.exception.exception0Num = result.data.data
          
        })
      this.$http
        .get('/dust/exceptionnum', {
          params: {
            exceptionType: '1',
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        })
        .then((result) => {
          this.exception.exception1Num = result.data.data
        })
      this.$http
        .get('/dust/exceptionnum', {
          params: {
            exceptionType: '2',
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        })
        .then((result) => {
          this.exception.exception2Num = result.data.data
        })
      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.$http
        .get('/dust/exceptionnum', {
          params: {
            exceptionType: '3',
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        })
        .then((result) => {
          this.exception.exception3Num = result.data.data
        })
      this.queryExceptionSite('/dust/exceptionnum', 3).then((result) => {
        this.exception.exception3Num = result.data.data
      })

      this.$http
        .get('/dust/exceptionnum', {
          params: {
            exceptionType: '4',
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        })
        .then((result) => {
          this.exception.exception4Num = result.data.data
        })
      this.$http
        .get('/dust/exceptionnum', {
          params: {
            exceptionType: '5',
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        })
        .then((result) => {
          this.exception.exception5Num = result.data.data
        })
      this.$http
        .get('/dust/exceptionnum', {
          params: {
            exceptionType: '6',
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        })
        .then((result) => {
          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
        })



      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：异常类型，开始时间，结束时间
     * @returns： 异常的数据
     */
    // getSiteNameByExceptionType(exception, beginT, endT) {
    //   let param = {
    //     exceptionType: exception,
    //     beginTime: beginT,
    //     endTime: endT
    //   };

    //   this.$http.get('/dust/sitenamecode', { params: param }).then((res) => {
    //     return res.data.data;
    //   });
    //   return;
    // },

    /**
     * description：显示对话框,返回该异常时间段的所有数据
@@ -1300,24 +784,28 @@
      //根据当前行的编号，起始时间来 请求异常数据
      // 对请求到的数据进行首尾拼接
      // 得到前后完整数据进行绘制图形
      this.loading.lineChart = true
      let params = {}
      if (row.name) {
        params['siteName'] = row.name
      }
      if (row.beginTime) {
        params['beginTime'] = row.beginTime
      }
      if (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.timeAndDataProcessed()
      })
      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：条件查询异常的数据
@@ -1343,10 +831,16 @@
      if (this.form.exceptionName.length != 0) {
        params['exceptionType'] = this.form.exceptionName.join()
      }
      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/exceptiondata', { params: params }).then((response) => {
      this.$http.get('/dust/exceptiondata2', { params: params }).then((response) => {
        // 保存返回的
        // this.tableData = response.data.data.rows;
        this.displayData = response.data.data.rows
@@ -1362,7 +856,6 @@
        this.total = response.data.data.total
        // 移除空数据状态
      })

    },

    /**
@@ -1393,7 +886,6 @@
        }
        this.isTableShow = true
        this.total = response.data.data.total
        
      })
    },

@@ -1458,206 +950,331 @@
</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>
  <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>
            <TimeShortCuts
              timeType="day"
              @submit-time="giveTime"
            ></TimeShortCuts>
          </el-form-item >
            <el-form-item>
              <DutyCompany @submitDutyCompanyValue="(n) => (form.dutyCompany = n)"> </DutyCompany>
            </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>
            <el-form-item>
              <StreetInfo @submitStreetValue="(n) => (form.street = n)"> </StreetInfo>
            </el-form-item>

        </div>
            <el-form-item>
              <TimeShortCuts timeType="day" @submit-time="giveTime"></TimeShortCuts>
            </el-form-item>

      </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" 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-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 }}
            <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>
        </div>
        </el-form>
      </el-col>
    </el-row>

        <!-- <div class="chart-jump-button">
    <!-- 时间摘要 -->
    <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" class="card-row">
            <el-col :span="5">
              <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="5">
              <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="4">
              <AnalysisCard
                :site-name="cardRow3[2].siteName"
                :exception-type="cardRow3[2].exceptionType"
                :begin-time="beginTime"
                :end-time="endTime"
                :exception-name="cardRow3[2].exceptionName"
                :site-num="cardRow3[2].siteNum"
                :exception-num="cardRow3[2].exceptionNum"
                :exception-all-num="exceptionAllNum"
                :site-num-all="siteTotal"
                :isNoDataStatus="cardRow3[2].isNoDataStatus"
                @get-abnormal-data-by-click="getAbnormalDataByClick"
              >
                <img src="@/assets/exception/exception3.png" height="24" width="24" />
              </AnalysisCard>
            </el-col>
           

            <el-col :span="5">
              <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/exception7.png" height="24" width="24" />
              </AnalysisCard>
            </el-col>

            <el-col :span="5">
              <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-row>

          <el-row :gutter="20" class="card-row">
            <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/exception1.png" height="24" width="24" />
              </AnalysisCard>
            </el-col>
            <el-col :span="6">
              <AnalysisCard
                :site-name="cardRow3[0].siteName"
                :exception-type="cardRow3[0].exceptionType"
                :begin-time="beginTime"
                :end-time="endTime"
                :exception-name="cardRow3[0].exceptionName"
                :site-num="cardRow3[0].siteNum"
                :exception-num="cardRow3[0].exceptionNum"
                :exception-all-num="exceptionAllNum"
                :site-num-all="siteTotal"
                :isNoDataStatus="cardRow3[0].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="cardRow3[1].siteName"
                :exception-type="cardRow3[1].exceptionType"
                :begin-time="beginTime"
                :end-time="endTime"
                :exception-name="cardRow3[1].exceptionName"
                :site-num="cardRow3[1].siteNum"
                :exception-num="cardRow3[1].exceptionNum"
                :exception-all-num="exceptionAllNum"
                :site-num-all="siteTotal"
                :isNoDataStatus="cardRow3[1].isNoDataStatus"
                @get-abnormal-data-by-click="getAbnormalDataByClick"
              >
                <img src="@/assets/exception/exception3.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/exception0.png" height="24" width="24" />
              </AnalysisCard>
            </el-col>
          </el-row>
          <!-- 
          <el-row :gutter="20">
            
          </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"
@@ -1673,82 +1290,77 @@
            >下条异常</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 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="flag" 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>
</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>
  </div>
</template>

<style lang="scss" scoped>

.el-row {
  margin-left: 10px;
}
@@ -1761,7 +1373,6 @@
  margin-right: 5px;
}
.head-container-search {

  float: right;
}

@@ -1778,7 +1389,6 @@
/* 条件查询模块结束 */

/* 异常分析模块的样式 */


.card-text1 {
  /* 黑体的异常名字部分 */
@@ -1829,7 +1439,7 @@
  white-space: nowrap;
}
.text-blank {
   /* 逗号 */
  /* 逗号 */
  margin-right: 10px;
  color: #000000;
}
@@ -1841,16 +1451,14 @@

/* 隐藏表格按钮组样式 */
.el-button-group {
  margin:10px 0px 10px 10px;
  margin: 10px 0px 10px 10px;
}
.i-ep-Arrow {
  margin-left: 6px;
  margin-bottom:2px;
  margin-bottom: 2px;
  font-size: 1.2em;
}
/* 隐藏表格按钮组样式结束 */



/* 表格模块的样式 */
.el-table {