登陆页换了背景，加了风险排名

zmc

2023-09-27 eeef5d4039d2b3fee6854ddc2789aa23232b2cfb

 src/views/exception/SiteAuditAssistance.vue

@@ -1,22 +1,22 @@
<script>
import InputSearch from '@/sfc/InputSearch.vue';
import ExceptionType from '@/sfc/ExceptionType.vue';
import TimeSelectWithShortCuts from '@/sfc/TimeSelectWithShortCuts.vue';
import { useCommonFunction } from '../../utils/common.js';
import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue';
import InputSearch from '@/sfc/InputSearch.vue'
import ExceptionType from '@/sfc/ExceptionType.vue'
import TimeShortCuts from '@/sfc/TimeShortCuts.vue'
import { useCommonFunction } from '../../utils/common.js'
import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'
import { defineAsyncComponent } from 'vue'
//  异常图形异步组件
const DustLineChart = defineAsyncComponent(() =>
  import('./components/DustLineChart.vue')
);
import submitApi from '@/api/audit/submitApi.js';
import dayjs from 'dayjs';
import ButtonClick from '@/sfc/ButtonClick.vue';
import index from '@/utils/exception_common_function/index.js';
const DustLineChart = defineAsyncComponent(() => import('./components/DustLineChart.vue'))
import submitApi from '@/api/audit/submitApi.js'
import dayjs from 'dayjs'
import { ElMessage, ElMessageBox } from 'element-plus'
import ButtonClick from '@/sfc/ButtonClick.vue'
import index from '@/utils/exception_common_function/index.js'
export default {
  components: {
    ExceptionType,
    InputSearch,
    TimeSelectWithShortCuts,
    TimeShortCuts,
    DustLineChart,
    AreaAndmonitorType,
    ButtonClick
@@ -100,91 +100,104 @@
        checker: 'admin',
        checkDate: '',
        checkerNotes: '',
        enterpriseNotes: '',
   
        enterpriseNotes: ''
      },
      auditTableData: [],
      // 审核状态不为0
      auditData: [],
    };
      auditData: []
    }
  },
  setup() {
    const { isExceedOneMonth } = useCommonFunction();
    const { isExceedOneMonth } = useCommonFunction()
    return {
      isExceedOneMonth
    };
    }
  },
  // 监听  判断按钮是否可点击
  watch: {
    selectedRowIndex(newVaue) {
      // 处于表格的最后一条数据 设置‘上一条’按钮不可点
      if (newVaue === this.displayData.length - 1) {
        this.dialog.isPreCantouch = true;
        this.dialog.isPreCantouch = true
        //用户先点了第一条，pre为true,然后点击最后一条,next为true。此时两个按钮都被封锁
        if (this.dialog.isNextCantouch == true) {
          this.dialog.isNextCantouch = false;
          this.dialog.isNextCantouch = false
        }
      }
      // 处于表格第一条数据 设置‘下一条’按钮不可点
      else if (newVaue === 0) {
        this.dialog.isNextCantouch = true;
        this.dialog.isNextCantouch = true
        //用户先点了表格最后一条,next为true,然后点击第一条，pre为true。此时两个按钮都被封锁
        if (this.dialog.isPreCantouch == true) {
          this.dialog.isPreCantouch = false;
          this.dialog.isPreCantouch = false
        }
      }
      // 处于表格的中间行 将按钮设置为可点击状态
      else {
        this.dialog.isPreCantouch = false;
        this.dialog.isNextCantouch = false;
        this.dialog.isPreCantouch = false
        this.dialog.isNextCantouch = false
      }
    },

    dialogTableVisible() {
      window.addEventListener('resize', this.updateChart);
      window.addEventListener('resize', this.updateChart)
    }
  },
  computed: {
   
    // 审计总数（包括部分审核）
    auditTotal(){
    auditTotal() {
      return this.auditData.length
    },
    // 规范审计总数
    auditedRegular(){
    auditedRegular() {
      let count = 0
      this.auditData.forEach(item => {
        if(item.auditStatus == 3){
           count ++
          }
      this.auditData.forEach((item) => {
        if (item.auditStatus == 3) {
          count++
        }
      })
      return count
    },
    // 部分审核数量
    auditPart(){
    auditPart() {
      let count = 0
      this.auditData.forEach(item => {
        if(item.auditStatus == 1 || item.auditStatus == 2){
           count ++
          }
      this.auditData.forEach((item) => {
        if (item.auditStatus == 1 || item.auditStatus == 2) {
          count++
        }
      })
      return count
    }, 
    },
    // 待审核数
    unCheckedNUm() {
      return this.total - this.auditedRegular;
      return this.total - this.auditedRegular
    },
     // 审核比例
     checkedRate() {
      return ((this.auditedRegular / this.total) * 100).toFixed(1);
    },
    // 审核比例
    checkedRate() {
      if (this.total == 0) {
        return 0
      } else {
        return ((this.auditedRegular / this.total) * 100).toFixed(1)
      }
    }
  },
  mounted() {
    this.backExceptionDataAWeekAgo();
    this.calTableHeight();
    this.backExceptionDataAWeekAgo()
    this.calTableHeight()
  },

  methods: {
    /**
     * 审计内容保存为草稿
     * @param：
     * @returns：
     */
    saveAudit() {
      // 将输入框值给当前行
      this.tableCurrentRowData.checkerContent = this.auditDialog.checkerNotes
      this.tableCurrentRowData.enterpriseContent = this.auditDialog.enterpriseNotes
      ElMessage.success('保存成功')
    },
    /**
     * 查看该段时间内已审核的数据
     * @param：
@@ -192,8 +205,8 @@
     */
    gethasCheckedNumByTime() {
      submitApi.getAuditNumByTime(this.beginTime, this.endTime).then((res) => {
        this.auditData = res.data.data;
      });
        this.auditData = res.data.data
      })
    },
    /**
     * 多选列（已审核的行不会加入其中）
@@ -201,8 +214,7 @@
     * @returns
     */
    handleSelectionChange(val) {
      console.log('选中的行为：', val);
      this.multipleSelection = val.filter((row) => row.auditStatus != 3);
      this.multipleSelection = val.filter((row) => row.auditStatus != 3)
    },
    /**
     * 触发批量审核
@@ -217,14 +229,14 @@
          type: 'warning',
          center: true
        }).then(() => {
          this.noNoteCheck(this.multipleSelection);
          this.noNoteCheck(this.multipleSelection)
          setTimeout(() => {
            this.gethasCheckedNumByTime();
            ElMessage.success('批量审核完成');
          }, 1500);
        });
            this.gethasCheckedNumByTime()
            ElMessage.success('批量审核完成')
          }, 1500)
        })
      } else {
        ElMessage('未选中表格的行');
        ElMessage('未选中表格的行')
      }
    },
    /**
@@ -233,10 +245,10 @@
     * @returns：
     */
    clearSelected() {
      this.$refs.table.clearSelection();
      this.$refs.table.clearSelection()
    },
    toggleSelection() {
      this.$refs.table.clearSelection();
      this.$refs.table.clearSelection()
    },
    /**
     *提交批量审核。默认审核人，空备注
@@ -245,9 +257,9 @@
     */
    noNoteCheck(rows) {
      rows.forEach((item) => {
        submitApi.submitAudit('admin', '无', '无', item.id, 3);
        item.auditStatus = 3;
      });
        submitApi.submitAudit('admin', '无', '无', item.id, 3)
        item.auditStatus = 3
      })
    },
    close() {
      // if (this.auditDialog.checkerNotes || this.auditDialog.enterpriseNotes) {
@@ -269,16 +281,16 @@
      // }else{
      //   this.auditDialog.visible = false
      // }
      this.auditDialog.visible = false;
      this.auditDialog.visible = false
    },
    // 表格行的颜色
    tableRowClassName({ row }) {
      if (row.auditStatus == 0) {
        return 'black-row';
        return 'black-row'
      } else if (row.auditStatus == 1 || row.auditStatus == 2) {
        return 'deep-gray-row';
        return 'deep-gray-row'
      } else {
        return 'complete--gray-row';
        return 'complete--gray-row'
      }
    },
    /**
@@ -297,59 +309,53 @@
        )
        .then((res) => {
          if (res.data.code == 1) {
            ElMessage.success('提交成功');
            this.tableCurrentRowData.auditStatus = status;
            this.tableCurrentRowData.checker = user;
            ElMessage.success('提交成功')
            this.tableCurrentRowData.auditStatus = status
            this.tableCurrentRowData.checker = user
            if (checker) {
              this.tableCurrentRowData.checkerContent = checker;
              this.tableCurrentRowData.checkerContent = checker
            }
            if (enterprise) {
              this.tableCurrentRowData.enterpriseContent = enterprise;
              this.tableCurrentRowData.enterpriseContent = enterprise
            }
            

            // 更新分析的数据
            setTimeout(() => {
            this.gethasCheckedNumByTime();
            }, 1500);
            
              this.gethasCheckedNumByTime()
            }, 1500)
          } else {
            ElMessage.warning('提交失败');
            ElMessage.warning('提交失败')
          }
          this.loading.submitAudit = false;
          this.auditDialog.visible = false;
        });
          this.loading.submitAudit = false
          this.auditDialog.visible = false
        })
    },
    // 更新审核内容
    updateAud(exceptionId, checkerContent, enterpriseContent, auditStatus) {
      submitApi
        .updateAudit(
          exceptionId,
          checkerContent,
          enterpriseContent,
          auditStatus
        )
        .updateAudit(exceptionId, checkerContent, enterpriseContent, auditStatus)
        .then((res) => {
          if (res.data.code == 1) {
            ElMessage.success('提交成功');
            this.tableCurrentRowData.auditStatus = auditStatus;
            ElMessage.success('提交成功')
            this.tableCurrentRowData.auditStatus = auditStatus

            if (checkerContent) {
              this.tableCurrentRowData.checkerContent = checkerContent;
              this.tableCurrentRowData.checkerContent = checkerContent
            }
            if (enterpriseContent) {
              this.tableCurrentRowData.enterpriseContent = enterpriseContent;
              this.tableCurrentRowData.enterpriseContent = enterpriseContent
            }

            // 更新分析的数据
            setTimeout(() => {
              this.gethasCheckedNumByTime();
            }, 1500);
              this.gethasCheckedNumByTime()
            }, 1500)
          } else {
            ElMessage.warning('提交失败');
            ElMessage.warning('提交失败')
          }
          this.loading.submitAudit = false;
          this.auditDialog.visible = false;
        });
          this.loading.submitAudit = false
          this.auditDialog.visible = false
        })
    },
    /**
     * 提交审核
@@ -358,7 +364,7 @@
     */
    submitAudit() {
      // 同时填写了审核人员和企业的备注
      this.loading.submitAudit = true;
      this.loading.submitAudit = true
      if (this.auditDialog.checkerNotes && this.auditDialog.enterpriseNotes) {
        this.sendAudit(
          this.auditDialog.checker,
@@ -366,13 +372,10 @@
          this.auditDialog.enterpriseNotes,
          this.tableCurrentRowData.id,
          3
        );
        )
      }
      // 只填了审核人员备注
      else if (
        this.auditDialog.checkerNotes &&
        !this.auditDialog.enterpriseNotes
      ) {
      else if (this.auditDialog.checkerNotes && !this.auditDialog.enterpriseNotes) {
        // 第一次创建
        if (this.tableCurrentRowData.auditStatus == 0) {
          this.sendAudit(
@@ -381,7 +384,7 @@
            this.auditDialog.enterpriseNotes,
            this.tableCurrentRowData.id,
            1
          );
          )
        }
        // 只更新
        else {
@@ -390,14 +393,11 @@
            this.auditDialog.checkerNotes,
            this.auditDialog.enterpriseNotes,
            3
          );
          )
        }
      }
      // 只填了企业备注备注
      else if (
        this.auditDialog.enterpriseNotes &&
        !this.auditDialog.checkerNotes
      ) {
      else if (this.auditDialog.enterpriseNotes && !this.auditDialog.checkerNotes) {
        // 第一次创建
        if (this.tableCurrentRowData.auditStatus == 0) {
          this.sendAudit(
@@ -406,7 +406,7 @@
            this.auditDialog.enterpriseNotes,
            this.tableCurrentRowData.id,
            2
          );
          )
        } else {
          // 只更新
          this.updateAud(
@@ -414,16 +414,16 @@
            this.auditDialog.checkerNotes,
            this.auditDialog.enterpriseNotes,
            3
          );
          )
        }
      } else {
        ElMessage.warning('请填写完整才能提交');
        ElMessage.warning('请填写完整才能提交')
      }

      this.loading.submitAudit = false;
      this.loading.submitAudit = false
      // 清除
      this.auditDialog.checkerNotes = '';
      this.auditDialog.enterpriseNotes = '';
      this.auditDialog.checkerNotes = ''
      this.auditDialog.enterpriseNotes = ''
    },

    /**
@@ -433,9 +433,12 @@
     * @returns：
     */
    openAuditDiag(row) {
      this.auditDialog.visible = true;
      this.tableCurrentRowData = row;
      console.log(row);
      this.auditDialog.visible = true
      this.tableCurrentRowData = row

      // 进入审核页时，将表格当前行的审核信息给输入框
      this.auditDialog.checkerNotes = this.tableCurrentRowData.checkerContent
      this.auditDialog.enterpriseNotes = this.tableCurrentRowData.enterpriseContent
    },

    /**
@@ -445,19 +448,17 @@
     * @returns：
     */
    getAbnormalDataByClick(val) {
      this.flag.originClick = 1;
      this.flag.originClick = 1

      this.tableData = val;
      this.total = this.tableData.length;
      this.tableData = val
      this.total = this.tableData.length
      // 默认显示第一页
      this.handleCurrentChange(1);
      this.handleCurrentChange(1)
    },
    // 点击表格的行时
    selectTableRow() {
      // 获取当前行的索引
      this.selectedRowIndex = this.displayData.indexOf(
        this.tableCurrentRowData
      );
      this.selectedRowIndex = this.displayData.indexOf(this.tableCurrentRowData)
    },

    /**
@@ -468,9 +469,13 @@
      const abnormalTimeTenMinute = index.descFiftyTime(
        this.tableCurrentRowData.beginTime,
        this.tableCurrentRowData.endTime
      );
      )

      // 保存无数据时表格条数
      this.dialog.exceptionTotal = abnormalTimeTenMinute.length

      // 去除供电异常和掉线区间的第一个有元素的值
      this.dialog.historyData = [];
      this.dialog.historyData = []

      for (let i = 0; i < abnormalTimeTenMinute.length; i++) {
        this.dialog.historyData.push({
@@ -479,11 +484,8 @@
          dutyCompany: this.tableCurrentRowData.dutyCompany,
          lst: abnormalTimeTenMinute[i],
          dustValue: ''
        });
        })
      }

      // 保存无数据时表格条数
      this.exceptionTotal = abnormalTimeTenMinute.length;
    },

    // 段电或断网区间无数据，需要补充。其他的都有数据，直接一次请求全部时段就好
@@ -499,61 +501,45 @@
     */
    otherExceptionRequest(allTimeArgs, allTime, exceptionBT, exceptionET) {
      // 折线图加载中效果
      this.loading.lineChart = true;
      this.$http
        .get('/dust/history', { params: allTimeArgs })
        .then((result) => {
          this.dialog.allExceptionTimeData = result.data.data;
          //  断电或断网时重新设置表格
          if (this.tableCurrentRowData.exceptionType == '0') {
            this.setOfflineTbleData();
          }
      this.loading.lineChart = true
      this.$http.get('/dust/history', { params: allTimeArgs }).then((result) => {
        this.dialog.allExceptionTimeData = result.data.data
        //  断电或断网时重新设置表格
        if (this.tableCurrentRowData.exceptionType == '0') {
          this.setOfflineTbleData()
        }

          // x轴日期时间
          let dateList = [];
          // y轴 超标油烟浓度
          let dustValue = [];
          let timeAndValue = {};
        // x轴日期时间
        let dateList = []
        // y轴 超标油烟浓度
        let dustValue = []
        let timeAndValue = {}

          // 从添加了首位区间的开始和结束时间进行遍历 保证时间以10分钟为间隔
          timeAndValue = index.keepContinuousByEachFiftyMinutes(
            allTime[0],
            allTime[3],
            this.dialog.allExceptionTimeData
          );
          dateList = timeAndValue['xAxis'];
          dustValue = timeAndValue['yAxis'];
        // 从添加了首位区间的开始和结束时间进行遍历 保证时间以10分钟为间隔
        timeAndValue = index.keepContinuousByEachFiftyMinutes(
          allTime[0],
          allTime[3],
          this.dialog.allExceptionTimeData
        )
        dateList = timeAndValue['xAxis']
        dustValue = timeAndValue['yAxis']

          // 提取异常起始时间点在整个区间内的数据索引
          let startIndex = dateList.findIndex((item) => item === exceptionBT);
          let endIndex = dateList.findIndex((item) => item === exceptionET);
        // 提取异常起始时间点在整个区间内的数据索引
        let startIndex = dateList.findIndex((item) => item === exceptionBT)
        let endIndex = dateList.findIndex((item) => item === exceptionET)

          // 设置折线图配置项
          this.reSetChart(
            dateList,
            dustValue,
            exceptionBT,
            exceptionET,
            startIndex,
            endIndex
          );
          this.loading.lineChart = false;
        });
        // 设置折线图配置项
        this.reSetChart(dateList, dustValue, exceptionBT, exceptionET, startIndex, endIndex)
        this.loading.lineChart = false
      })
    },

    /**
     * description：绘制折线图
     * @param： x轴时间， y轴油烟浓度， 异常开始时间，异常结束时间，异常开始时间在整个区间的索引下标，异常结束时间在整个区间的索引下标
     */
    reSetChart(
      xData,
      yData,
      exceptionBeginTime,
      exceptionEndTime,
      beginIndex,
      endIndex
    ) {
      this.dialog.option = {};
    reSetChart(xData, yData, exceptionBeginTime, exceptionEndTime, beginIndex, endIndex) {
      this.dialog.option = {}
      switch (this.tableCurrentRowData.exceptionType) {
        // 断电或断网  时间段
        case '0':
@@ -576,7 +562,7 @@
              name: '时间',
              axisLabel: {
                formatter: function (value) {
                  return value.slice(11, -3);
                  return value.slice(11, -3)
                }
              }
            },
@@ -607,8 +593,8 @@
                }
              }
            ]
          };
          break;
          }
          break
        // 超标
        case '2':
          this.dialog.option = {
@@ -629,7 +615,7 @@
              name: '时间',
              axisLabel: {
                formatter: function (value) {
                  return value.slice(11, -3);
                  return value.slice(11, -3)
                }
              }
            },
@@ -648,9 +634,9 @@
                      itemStyle: {
                        color: 'red'
                      }
                    };
                    }
                  }
                  return item;
                  return item
                }),
                // 变换指定时间区间的背景颜色
                markArea: {
@@ -719,8 +705,8 @@
                }
              ]
            }
          };
          break;
          }
          break
        // 数据超低 只有时间点
        case '1':
          this.dialog.option = {
@@ -741,7 +727,7 @@
              name: '时间',
              axisLabel: {
                formatter: function (value) {
                  return value.slice(11, -3);
                  return value.slice(11, -3)
                }
              }
            },
@@ -760,9 +746,9 @@
                      itemStyle: {
                        color: 'red'
                      }
                    };
                    }
                  }
                  return item;
                  return item
                }),

                markLine: {
@@ -815,8 +801,8 @@
                }
              ]
            }
          };
          break;
          }
          break
        case '3':
          this.dialog.option = {
            tooltip: {},
@@ -836,7 +822,7 @@
              name: '时间',
              axisLabel: {
                formatter: function (value) {
                  return value.slice(11, -3);
                  return value.slice(11, -3)
                }
              }
            },
@@ -855,9 +841,9 @@
                      itemStyle: {
                        color: 'red'
                      }
                    };
                    }
                  }
                  return item;
                  return item
                }),
                // 变换指定时间区间的背景颜色
                markArea: {
@@ -899,8 +885,8 @@
                }
              ]
            }
          };
          break;
          }
          break
        case '4':
          this.dialog.option = {
            tooltip: {},
@@ -920,7 +906,7 @@
              name: '时间',
              axisLabel: {
                formatter: function (value) {
                  return value.slice(11, -3);
                  return value.slice(11, -3)
                }
              }
            },
@@ -973,36 +959,33 @@
                }
              ]
            }
          };
          break;
          }
          break
        default:
          console.log('没有设置该异常类型！');
          console.log('没有设置该异常类型！')
      }
      this.flag.banTouch = 0;
      this.flag.banTouch = 0
    },
    /**
     * description：划分出异常起始时间，构造请求前中后的参数
     */
    timeAndDataProcessed() {
      //异常的开始时间 结束时间
      let exceptionBeginTime = this.tableCurrentRowData.beginTime;
      let exceptionEndTime = this.tableCurrentRowData.endTime;
      let exceptionBeginTime = this.tableCurrentRowData.beginTime
      let exceptionEndTime = this.tableCurrentRowData.endTime

      // beforeAndAfterTime[0]:前45分钟的时间点
      // beforeAndAfterTime[1]:前15分钟的时间点
      // beforeAndAfterTime[2]:后15分钟的时间点
      // beforeAndAfterTime[3]:后45分钟的时间点
      let beforeAndAfterTime = index.before45AndAfter45(
        exceptionBeginTime,
        exceptionEndTime
      );
      let beforeAndAfterTime = index.before45AndAfter45(exceptionBeginTime, exceptionEndTime)

      // 构造异常时间前后区间数据请求参数(除了断网中都用到）
      let paramsAllTime = index.requestGetParms(
        this.tableCurrentRowData.name,
        beforeAndAfterTime[0],
        beforeAndAfterTime[3]
      );
      )
      // 将异常数据进行预处理，随后将结果作为折线图的配置项

      this.otherExceptionRequest(
@@ -1010,7 +993,7 @@
        beforeAndAfterTime,
        exceptionBeginTime,
        exceptionEndTime
      );
      )
    },

    /**
@@ -1020,30 +1003,30 @@
      //     // 不是表格的最后一行
      if (this.selectedRowIndex < this.displayData.length - 1) {
        // 点击过程中 锁住上下条按钮  在设置完图形配置项后解锁
        this.flag.banTouch = 1;
        this.flag.banTouch = 1

        //得到上一行数据索引
        this.selectedRowIndex = this.selectedRowIndex + 1;
        this.selectedRowIndex = this.selectedRowIndex + 1

        //请求数据 改变exceedingData
        // this.setinfo(this.selectedRowIndex);

        // 得到上一行的数据
        this.tableCurrentRowData = this.displayData[this.selectedRowIndex];
        this.tableCurrentRowData = this.displayData[this.selectedRowIndex]
        let params = index.requestGetParms(
          this.tableCurrentRowData.name,
          this.tableCurrentRowData.beginTime,
          this.tableCurrentRowData.endTime
        );
        this.loading.preButton = true;
        )
        this.loading.preButton = true
        this.$http.get('/dust/history', { params: params }).then((response) => {
          // 保存返回的超标数据
          this.dialog.historyData = response.data.data;
          this.dialog.exceptionTotal = response.data.data.length;
          this.dialog.historyData = response.data.data
          this.dialog.exceptionTotal = response.data.data.length
          // 逻辑处理
          this.timeAndDataProcessed();
          this.loading.preButton = false;
        });
          this.timeAndDataProcessed()
          this.loading.preButton = false
        })
      }
    },
    /**
@@ -1053,29 +1036,29 @@
      // 不是表格的第一行
      if (this.selectedRowIndex !== 0) {
        // 点击过程中 锁住上下条按钮  在设置完图形配置项后解锁
        this.flag.banTouch = 1;
        this.flag.banTouch = 1

        //得到上一行数据索引
        this.selectedRowIndex = this.selectedRowIndex - 1;
        this.selectedRowIndex = this.selectedRowIndex - 1
        //请求数据 改变exceedingData

        // 得到上一行的数据
        this.tableCurrentRowData = this.displayData[this.selectedRowIndex];
        this.tableCurrentRowData = this.displayData[this.selectedRowIndex]

        let params = index.requestGetParms(
          this.tableCurrentRowData.name,
          this.tableCurrentRowData.beginTime,
          this.tableCurrentRowData.endTime
        );
        this.loading.afterButton = true;
        )
        this.loading.afterButton = true
        this.$http.get('/dust/history', { params: params }).then((response) => {
          // 保存返回的超标数据
          this.dialog.historyData = response.data.data;
          this.dialog.exceptionTotal = response.data.data.length;
          this.dialog.historyData = response.data.data
          this.dialog.exceptionTotal = response.data.data.length
          // 逻辑处理
          this.timeAndDataProcessed();
          this.loading.afterButton = false;
        });
          this.timeAndDataProcessed()
          this.loading.afterButton = false
        })
      }
    },

@@ -1086,36 +1069,36 @@
     */
    showDialog(row) {
      // 打开对话框
      this.dialogTableVisible = true;
      this.dialogTableVisible = true

      // 保存当前行数据
      this.tableCurrentRowData = row;
      this.tableCurrentRowData = row

      // 获取当前行的索引
      this.selectedRowIndex = this.displayData.indexOf(row);
      this.selectedRowIndex = this.displayData.indexOf(row)

      //根据当前行的编号，起始时间来 请求异常数据
      // 对请求到的数据进行首尾拼接
      // 得到前后完整数据进行绘制图形

      let params = {};
      let params = {}
      if (row.name) {
        params['siteName'] = row.name;
        params['siteName'] = row.name
      }
      if (row.beginTime) {
        params['beginTime'] = row.beginTime;
        params['beginTime'] = row.beginTime
      }
      if (row.endTime) {
        params['endTime'] = row.endTime;
        params['endTime'] = row.endTime
      }

      this.$http.get('/dust/history', { params: params }).then((response) => {
        // 保存返回的超标数据
        this.dialog.historyData = response.data.data;
        this.dialog.exceptionTotal = response.data.data.length;
        this.dialog.historyData = response.data.data
        this.dialog.exceptionTotal = response.data.data.length
        // 逻辑处理
        this.timeAndDataProcessed();
      });
        this.timeAndDataProcessed()
      })
    },

    /**
@@ -1124,44 +1107,42 @@
     */
    handleSubmit() {
      if (this.isExceedOneMonth(this.beginTime, this.endTime)) {
        alert('时间跨度不能超过一个月');
        return;
        alert('时间跨度不能超过一个月')
        return
      }

      this.flag.originClick = 0;
      this.flag.originClick = 0

      let params = {};
      params['page'] = this.currentPage;
      params['pageSize'] = this.pageSize;
      let params = {}
      params['page'] = this.currentPage
      params['pageSize'] = this.pageSize
      if (this.form.name) {
        params['siteName'] = this.form.name;
        params['siteName'] = this.form.name
      }
      if (this.form.exceptionName.length != 0) {
        params['exceptionType'] = this.form.exceptionName.join();
        params['exceptionType'] = this.form.exceptionName.join()
      }
      params['beginTime'] = this.beginTime;
      params['endTime'] = this.endTime;
      this.loading.tableLoading = true;
      this.loading.queryButton = true;
      this.$http
        .get('/dust/exceptiondata', { params: params })
        .then((response) => {
          // 保存返回的
          // this.tableData = response.data.data.rows;
          this.displayData = response.data.data.rows;
          this.loading.queryButton = false;
      params['beginTime'] = this.beginTime
      params['endTime'] = this.endTime
      this.loading.tableLoading = true
      this.loading.queryButton = true
      this.$http.get('/dust/exceptiondata', { params: params }).then((response) => {
        // 保存返回的
        // this.tableData = response.data.data.rows;
        this.displayData = response.data.data.rows
        this.loading.queryButton = false

          if (response.data.data.total == 0) {
            ElMessage('该时段无数据');
            this.isNoData = true;
            return;
          }
          this.total = response.data.data.total;
          this.loading.tableLoading = false;
          // 移除空数据状态
          this.isNoData = false;
        });
      this.gethasCheckedNumByTime();
        if (response.data.data.total == 0) {
          ElMessage('该时段无数据')
          this.isNoData = true
          return
        }
        this.total = response.data.data.total
        this.loading.tableLoading = false
        // 移除空数据状态
        this.isNoData = false
      })
      this.gethasCheckedNumByTime()
    },

    /**
@@ -1169,34 +1150,32 @@
     * @createTime:2023-08-18
     */
    backExceptionDataAWeekAgo() {
      this.loading.tableLoading = true;
      let params = {};
      this.loading.tableLoading = true
      let params = {}
      if (this.form.name) {
        params['siteName'] = this.form.name;
        params['siteName'] = this.form.name
      }
      if (this.form.exceptionName) {
        params['exceptionType'] = this.form.exceptionName;
        params['exceptionType'] = this.form.exceptionName
      }
      params['beginTime'] = this.beginTime;
      params['endTime'] = this.endTime;
      params['beginTime'] = this.beginTime
      params['endTime'] = this.endTime

      this.$http
        .get('/dust/exceptiondata', { params: params })
        .then((response) => {
          // 保存返回的
          // this.tableData = response.data.data.rows;
          this.displayData = response.data.data.rows;
      this.$http.get('/dust/exceptiondata', { params: params }).then((response) => {
        // 保存返回的
        // this.tableData = response.data.data.rows;
        this.displayData = response.data.data.rows

          if (response.data.data.total == 0) {
            ElMessage('该时段无数据');
            this.loading.tableLoading = false;
            this.isNoData = true;
            return;
          }
          this.loading.tableLoading = false;
          this.total = response.data.data.total;
        });
      this.gethasCheckedNumByTime();
        if (response.data.data.total == 0) {
          ElMessage('该时段无数据')
          this.loading.tableLoading = false
          this.isNoData = true
          return
        }
        this.loading.tableLoading = false
        this.total = response.data.data.total
      })
      this.gethasCheckedNumByTime()
    },

    /**
@@ -1204,26 +1183,26 @@
     * @createTime:2023-08-17
     */
    giveTime(val) {
      this.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss');
      this.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss');
      this.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss')
      this.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss')
    },

    // 功能：表格高度根据内容自适应
    calTableHeight() {
      const h1 = this.$refs.h1.$el.offsetHeight;
      const h2 = this.$refs.h2.$el.offsetHeight;
      const h4 = this.$refs.h4.$el.offsetHeight;
      const h1 = this.$refs.h1.$el.offsetHeight
      const h2 = this.$refs.h2.$el.offsetHeight
      const h4 = this.$refs.h4.$el.offsetHeight
      // 其中一个40是盒子的总外边距
      this.tableHeight = `calc(100vh - ${h1}px - ${h2}px  - ${h4}px - 20px - 100px - var(--el-main-padding) * 2)`;
      this.tableHeight = `calc(100vh - ${h1}px - ${h2}px  - ${h4}px - 20px - 100px - var(--el-main-padding) * 2)`
      // this.tableHeight = `calc(100vh - ${h1}px  - ${h4}px - 100px - var(--el-main-padding) * 2)`;
    },

    // 页大小改变时触发
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageSize = val

      // 改变每页显示数目时跳到当前页
      this.handleCurrentChange(1);
      this.handleCurrentChange(1)
    },

    // 页号改变时触发
@@ -1234,128 +1213,99 @@
     * @returns：
     */
    handleCurrentChange(val) {
      console.log('当前页为：', val);
      // 将当前页号给currentPage
      this.currentPage = val;
      this.currentPage = val

      // 页面变化时调用 查询数据函数
      if (this.flag.originClick == 0) {
        this.handleSubmit();
        this.handleSubmit()
      } else if (this.flag.originClick == 1) {
        const startIndex = (val - 1) * this.pageSize;
        const endIndex = startIndex + this.pageSize;
        const startIndex = (val - 1) * this.pageSize
        const endIndex = startIndex + this.pageSize

        this.displayData = this.tableData.slice(startIndex, endIndex);
        this.displayData = this.tableData.slice(startIndex, endIndex)
      }
    },
    // 表格序号递增
    indexMethod1(index) {
      return index + 1 + (this.currentPage - 1) * this.pageSize;
      return index + 1 + (this.currentPage - 1) * this.pageSize
    },
    // 表格序号递增
    indexMethod2(index) {
      return index + 1;
      return index + 1
    }
  }
};
}
</script>

<template>
  <el-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>
            <InputSearch
              isNeedDefaultSite="0"
              @submit-value="(n) => (form.name = n)"
            >
            </InputSearch>
          </el-form-item>
      <el-card>
        <el-form :inline="true">
          <div class="head-container-text">
            <el-form-item>
              <AreaAndmonitorType></AreaAndmonitorType>
            </el-form-item>
            <el-form-item>
              <InputSearch isNeedDefaultSite="0" isNeedRealTimeAdvice="1" :exceptionType="form.exceptionName" :beginTime="beginTime" :endTime="endTime" @submit-value="(n) => (form.name = n)">
              </InputSearch>
            </el-form-item>

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

          <el-form-item>
            <ExceptionType
              @submit-value="(n) => (form.exceptionName = n)"
            ></ExceptionType>
          </el-form-item>
        </div>

        <div class="head-container-search">
          <span class="head-describtion-text">
            金山区 {{ beginTime }} —— {{ endTime }} 扬尘监测异常信息汇总</span
          >
          <el-form-item>
            <!-- <el-button type="warning" :loading="loading.queryButton" @click="handleSubmit"><el-icon
            <el-form-item>
              <!-- <el-button type="warning" :loading="loading.queryButton" @click="handleSubmit"><el-icon
                style="margin-right: 6px;font-size: 1.2em;"><i-ep-Search /></el-icon>查询</el-button> -->
            <ButtonClick
              content="搜索"
              type="warning"
              :loading="loading.queryButton"
              @do-search="handleSubmit"
            ></ButtonClick>
          </el-form-item>
        </div>
      </el-form>
              <ButtonClick
                content="搜索"
                type="warning"
                :loading="loading.queryButton"
                @do-search="handleSubmit"
              ></ButtonClick>
            </el-form-item>
            <el-form-item>
              <ExceptionType @submit-value="(n) => (form.exceptionName = n)"></ExceptionType>
            </el-form-item>
          </div>

          <div class="head-container-search">
            <span class="head-describtion-text">
              金山区 {{ beginTime }} —— {{ endTime }} 扬尘监测异常信息汇总</span
            >
          </div>
        </el-form>
      </el-card>
    </el-col>
  </el-row>

  <!-- <el-row class="anasysis" ref="h2">
    <el-col :span="6">
      <el-card>
        <el-statistic title="全部审核数" :value="total" />
      </el-card>
  <el-row ref="h2">
    <el-col>
      <div class="checknum">
        <div class="checknum-text">
          <el-tag>应审核数</el-tag><span>{{ total }} ({{ checkedRate }}%)</span>
        </div>

        <div class="checknum-text">
          <el-tag type="success">已审核数</el-tag><span>{{ auditTotal }}</span>
        </div>
        <div class="checknum-text">
          <el-tag type="info">规范审核数</el-tag><span>{{ auditedRegular }} </span>
        </div>
        <div class="checknum-text">
          <el-tag type="warning">部分审核数</el-tag><span>{{ auditPart }}</span>
        </div>
        <div class="checknum-text">
          <el-tag type="danger">待审核数</el-tag><span>{{ unCheckedNUm }} </span>
        </div>
      </div>
    </el-col>

    <el-col :span="6">
      <el-card>
        <el-statistic title="待审核数" :value="unCheckedNUm"> </el-statistic>
      </el-card>
    </el-col>

    <el-col :span="6">
      <el-card>
        <el-statistic title="已审核数" :value="auditNumByTime" />
      </el-card>
    </el-col>

    <el-col :span="6">
      <el-card>
        <el-statistic title="审核比例" :value="checkedRate">
          <template #suffix> % </template>
        </el-statistic>
      </el-card>
    </el-col>
  </el-row> -->


  <div class="checknum">
      <el-row class="anasysis" ref="h2">
        <el-col :span="8">
        <span class="checknum-blue">应审核数：</span> {{ total }}<span class="checknum-rate">({{ checkedRate }}%) </span>
        </el-col>
      
        <el-col :span="8">
          <div><span class="checknum-green">已审核数：</span>{{ auditTotal }}</div>
          <div>规范审核数：{{ auditedRegular }}</div>
          <div>部分审核数：{{ auditPart }}</div>
        </el-col > 
        
        <el-col :span="8">
          <span><span class="checknum-red">待审核数：</span>{{ unCheckedNUm }}</span>
        </el-col>
      </el-row>
</div>

  </el-row>

  <el-row>
    <el-col v-show="!isNoData">
@@ -1380,59 +1330,17 @@
          :index="indexMethod1"
        />
        <el-table-column prop="name" label="站点名称" show-overflow-tooltip />
        <el-table-column
          prop="mnCode"
          label="设备编号"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="exception"
          label="异常类型"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="region"
          label="区域"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="beginTime"
          label="开始时间"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="endTime"
          label="结束时间"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="typename"
          label="场景"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="address"
          label="地址"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="dutyCompany"
          label="运维商"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column prop="mnCode" label="设备编号" align="center" show-overflow-tooltip />
        <el-table-column prop="exception" label="异常类型" align="center" show-overflow-tooltip />
        <el-table-column prop="region" label="区域" align="center" show-overflow-tooltip />
        <el-table-column prop="beginTime" label="开始时间" align="center" show-overflow-tooltip />
        <el-table-column prop="endTime" label="结束时间" align="center" show-overflow-tooltip />
        <el-table-column prop="typename" label="场景" align="center" show-overflow-tooltip />
        <el-table-column prop="address" label="地址" align="center" show-overflow-tooltip />
        <el-table-column prop="dutyCompany" label="运维商" align="center" show-overflow-tooltip />
        <el-table-column label="操作" align="center" width="200" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" @click="showDialog(row)">
              查看详情
            </el-button>
            <el-button type="primary" @click="showDialog(row)"> 查看详情 </el-button>
            <el-button
              v-if="row.auditStatus == 3"
              size="default"
@@ -1449,11 +1357,7 @@
              >待审核</el-button
            >

            <el-button
              v-else
              size="default"
              type="danger"
              @click="openAuditDiag(row)"
            <el-button v-else size="default" type="danger" @click="openAuditDiag(row)"
              >待审核</el-button
            >
            <!-- <span v-if="row.auditStatus == 3">已审核</span
@@ -1531,24 +1435,19 @@
      </el-form-item>
    </el-form>

    <el-card v-show="tableCurrentRowData.auditStatus==3">
    <el-card v-show="tableCurrentRowData.auditStatus == 3">
      <template #header>审核详情</template>
      <el-form>
        <el-form-item label="审核人">{{
          tableCurrentRowData.checker
        }}</el-form-item>
        <el-form-item label="审核情况">{{
          tableCurrentRowData.checkerContent
        }}</el-form-item>
        <el-form-item label="审核人员">{{
          tableCurrentRowData.enterpriseContent
        }}</el-form-item>
        <el-form-item label="审核人">{{ tableCurrentRowData.checker }}</el-form-item>
        <el-form-item label="审核情况">{{ tableCurrentRowData.checkerContent }}</el-form-item>
        <el-form-item label="审核人员">{{ tableCurrentRowData.enterpriseContent }}</el-form-item>
      </el-form>
    </el-card>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button color="#626aef" :dark="isDark" plain @click="saveAudit">保存</el-button>
        <el-button
          type="primary"
          :loading="loading.submitAudit"
@@ -1561,47 +1460,33 @@
    </template>
  </el-dialog>

  <el-dialog v-model="dialogTableVisible" draggable align-center height="300px">
  <el-dialog
    claa="exception-dialog"
    v-model="dialogTableVisible"
    draggable
    align-center
    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.name }}</div>

          <div>
            <span class="diag-head-text1">异常类型：</span>
            <span v-if="tableCurrentRowData.exceptionType == '0'"
              >断电或断网</span
            >
            <span v-else-if="tableCurrentRowData.exceptionType == '1'"
              >数据超低</span
            >
            <span v-else-if="tableCurrentRowData.exceptionType == '2'"
              >超标</span
            >
            <span v-else-if="tableCurrentRowData.exceptionType == '3'"
              >数据长时间无波动</span
            >
            <span v-else-if="tableCurrentRowData.exceptionType == '4'"
              >量级突变异常</span
            >
            <span v-else-if="tableCurrentRowData.exceptionType == '5'"
              >临近超标异常</span
            >
            <span v-else-if="tableCurrentRowData.exceptionType == '6'"
              >单日超标次数临界异常</span
            >
            <span v-else-if="tableCurrentRowData.exceptionType == '7'"
              >滑动平均值异常</span
            >
            <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 }} ~
            <span class="diag-head-text1">异常时间段：</span>{{ tableCurrentRowData.beginTime }} ~
            {{ tableCurrentRowData.endTime }}
          </div>
        </div>
@@ -1644,30 +1529,10 @@
          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 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³)"
@@ -1678,9 +1543,7 @@
    </div>
    <template #footer>
      <el-tag type="success" class="mx-1" effect="dark" round
        ><span
          class="table-line-lable"
          v-show="tableCurrentRowData.exceptionType == '0'"
        ><span class="table-line-lable" v-show="tableCurrentRowData.exceptionType == '0'"
          >缺失数据：
        </span>
        <span
@@ -1693,9 +1556,7 @@
          >异常数据：</span
        >
        <span class="table-line-num">{{ dialog.exceptionTotal }}条</span>
        <span v-show="tableCurrentRowData.exceptionType === '0'">
          (逻辑计算)</span
        >
        <span v-show="tableCurrentRowData.exceptionType === '0'"> (逻辑计算)</span>
      </el-tag>
    </template>
  </el-dialog>
@@ -1706,6 +1567,10 @@
  margin-left: 20px;
}
/* 条件查询模块的样式 */
.el-card {
  margin-top: 10px;
  margin-right: 10px;
}
.head-container-search {
  display: flex;
  justify-content: space-between;
@@ -1719,42 +1584,26 @@
}
/* 条件查询模块结束 */



/*分析 */
// .anasysis {
//   margin-bottom: 20px;
// }
// :deep(.el-statistic__head) {
//   font-weight: bold;
//   font-size: 16px;
// }

.checknum {
  border: 1px solid orange;
  margin-bottom: 10px;
  margin-left: 20px;
  margin: 0px 5px 10px 20px;
  // border: 2px solid orange;
  margin: 10px 5px 20px 20px;
  display: flex;
}
.checknum-rate{
    margin-left: 5px;
  }
.checknum-blue {
  font-weight: bold;
  color: blue;
.checknum-text {
  font-size: 14px;
  margin-right: 50px;
}
.el-tag {
  font-size: 14px;
}

.checknum-green {
  font-weight: bold;
  color: green;
.checknum-rate {
  margin-left: 5px;
}
.checknum-red {
  font-weight: bold;
  color: red;
}

/* 分析结束 */




/* 表格模块的样式 */
:global(.el-table .black-row) {
@@ -1781,13 +1630,15 @@
  margin-top: 10px;
  margin-right: 20px;
}

.el-table {
  color: #333333;
}
/* 表格模块结束 */

/* 查看详情对话框模块的样式 */
.diag-head {
  // 对话框头部区域
  min-height: 200px;
  // min-height: 200px;
  // border: 1px solid #fdc2db;
}

@@ -1810,9 +1661,11 @@

.chart-jump-button {
  // ‘上一条’，‘下一条’ 按钮
  min-height: 30px;
  width: 200px;
  float: right;
  // min-height: 30px;
  // width: 200px;
  // float: right;
  display: flex;
  justify-content: right;
}

.line-chart {