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,
      // 每页条数
@@ -55,7 +68,8 @@
        exception4: true,
        exception5: true,
        exception6: true,
        exception7: 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,
@@ -131,7 +148,8 @@
        banTouch: 0,
        // 0代表分页，1代表不分页
        originClick: 0
      }
      },
      areaColor: null
    }
  },
  setup() {
@@ -144,27 +162,6 @@
  // 监听  判断按钮是否可点击
  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
@@ -209,7 +206,8 @@
        this.exception.exception4Num +
        this.exception.exception5Num +
        this.exception.exception6Num +
        this.exception.exception7Num
        this.exception.exception7Num +
        this.exception.exception8Num
      if (sum == 0) {
        return 1
      } else {
@@ -225,7 +223,8 @@
        this.exception.exception4Num +
        this.exception.exception5Num +
        this.exception.exception6Num +
        this.exception.exception7Num
        this.exception.exception7Num +
        this.exception.exception8Num
      if (sum == 0) {
        return 0
      } else {
@@ -237,7 +236,8 @@
          (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.exception7Num / this.exceptionAllNum) * 100 -
          (this.exception.exception8Num / this.exceptionAllNum) * 100
        ).toFixed(1)
      }
    },
@@ -270,7 +270,11 @@
          siteNum: this.exception.exception6.length,
          exceptionNum: this.exception.exception6Num,
          isNoDataStatus: this.isNoData.exception6
        },
        }
      ]
    },
    cardRow2() {
      return [
        {
          siteName: this.exception.exception7,
          exceptionType: '7',
@@ -279,11 +283,7 @@
          siteNum: this.exception.exception7.length,
          exceptionNum: this.exception.exception7Num,
          isNoDataStatus: this.isNoData.exception7
        }
      ]
    },
    cardRow2() {
      return [
        },
        {
          siteName: this.exception.exception0,
          exceptionType: '0',
@@ -301,7 +301,11 @@
          siteNum: this.exception.exception1.length,
          exceptionNum: this.exception.exception1Num,
          isNoDataStatus: this.isNoData.exception1
        },
        }
      ]
    },
    cardRow3() {
      return [
        {
          siteName: this.exception.exception2,
          exceptionType: '2',
@@ -319,6 +323,15 @@
          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
        }
      ]
    }
@@ -328,9 +341,63 @@
    // 查询时间段的各异常的站点，查询该时间区间的各异常数量
    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: {
    /**
     * 有效率异常 设置折线图配置项
     * @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
    },
@@ -401,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') {
@@ -414,7 +482,7 @@
        let dustValue = []
        let timeAndValue = {}

        // 从添加了首位区间的开始和结束时间进行遍历 保证时间以10分钟为间隔
        // 从添加了首位区间的开始和结束时间进行遍历 保证时间以15分钟为间隔
        timeAndValue = index.keepContinuousByEachFiftyMinutes(
          allTime[0],
          allTime[3],
@@ -428,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：划分出异常起始时间，构造请求前中后的参数
     */
@@ -947,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：获取下一条异常信息
@@ -983,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
        })

      }
    },

@@ -1015,254 +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：显示对话框,返回该异常时间段的所有数据
@@ -1282,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：条件查询异常的数据
@@ -1325,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
@@ -1448,6 +960,14 @@
            </el-form-item>

            <el-form-item>
              <DutyCompany @submitDutyCompanyValue="(n) => (form.dutyCompany = n)"> </DutyCompany>
            </el-form-item>

            <el-form-item>
              <StreetInfo @submitStreetValue="(n) => (form.street = n)"> </StreetInfo>
            </el-form-item>

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

@@ -1483,7 +1003,7 @@
          </template>

          <el-row :gutter="20" class="card-row">
            <el-col :span="6">
            <el-col :span="5">
              <AnalysisCard
                :site-name="cardRow1[0].siteName"
                :exception-type="cardRow1[0].exceptionType"
@@ -1500,7 +1020,8 @@
                <img src="@/assets/exception/exception4.png" height="24" width="24" />
              </AnalysisCard>
            </el-col>
            <el-col :span="6">

            <el-col :span="5">
              <AnalysisCard
                :site-name="cardRow1[1].siteName"
                :exception-type="cardRow1[1].exceptionType"
@@ -1517,7 +1038,46 @@
                <img src="@/assets/exception/exception5.png" height="24" width="24" />
              </AnalysisCard>
            </el-col>
            <el-col :span="6">


            <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"
@@ -1534,60 +1094,11 @@
                <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-row :gutter="20" class="card-row">
            <el-col :span="6">
              <AnalysisCard
                :site-name="cardRow2[2].siteName"
@@ -1602,27 +1113,67 @@
                :isNoDataStatus="cardRow2[2].isNoDataStatus"
                @get-abnormal-data-by-click="getAbnormalDataByClick"
              >
                <img src="@/assets/exception/exception2.png" height="24" width="24" />
                <img src="@/assets/exception/exception1.png" height="24" width="24" />
              </AnalysisCard>
            </el-col>
            <el-col :span="6">
              <AnalysisCard
                :site-name="cardRow2[3].siteName"
                :exception-type="cardRow2[3].exceptionType"
                :site-name="cardRow3[0].siteName"
                :exception-type="cardRow3[0].exceptionType"
                :begin-time="beginTime"
                :end-time="endTime"
                :exception-name="cardRow2[3].exceptionName"
                :site-num="cardRow2[3].siteNum"
                :exception-num="cardRow2[3].exceptionNum"
                :exception-name="cardRow3[0].exceptionName"
                :site-num="cardRow3[0].siteNum"
                :exception-num="cardRow3[0].exceptionNum"
                :exception-all-num="exceptionAllNum"
                :site-num-all="siteTotal"
                :isNoDataStatus="cardRow2[3].isNoDataStatus"
                :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>
@@ -1656,10 +1207,10 @@
            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="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="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
@@ -1716,17 +1267,6 @@
            <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 }} ~
@@ -1769,8 +1309,6 @@
        </div>
      </template>

      <!-- :option="dialog.option" -->

      <!-- 图形 -->
      <DustLineChart
        :option="dialog.option"
@@ -1789,16 +1327,15 @@
            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³)"
            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 #footer>