去除ts

zmc

2023-11-14 045e502fa06255c7ebe1ad6bb4ff503825006cbe

 src/views/exception/FlightInspection.vue

@@ -48,14 +48,14 @@

      // 查询按钮无数据时
      isNoData: {
        exception0:true,
        exception1:true,
        exception2:true,
        exception3:true,
        exception4:true,
        exception5:true,
        exception6:true,
        exception7:true,
        exception0: true,
        exception1: true,
        exception2: true,
        exception3: true,
        exception4: true,
        exception5: true,
        exception6: true,
        exception7: true
      },
      // eslint-disable-next-line no-undef
      // 对话框显示
@@ -131,8 +131,7 @@
        banTouch: 0,
        // 0代表分页，1代表不分页
        originClick: 0
      },
      
      }
    }
  },
  setup() {
@@ -168,7 +167,7 @@
      // }
      // 处于表格的最后一条数据 设置‘上一条’按钮不可点
      if (newVaue === 0) {
          this.dialog.isPreCantouch = true
        this.dialog.isPreCantouch = true
        //用户先点了第一条，pre为true,然后点击最后一条,next为true。此时两个按钮都被封锁
        if (this.dialog.isNextCantouch == true) {
          this.dialog.isNextCantouch = false
@@ -202,7 +201,8 @@
  },
  computed: {
    exceptionAllNum() {
      let sum = this.exception.exception0Num +
      let sum =
        this.exception.exception0Num +
        this.exception.exception1Num +
        this.exception.exception2Num +
        this.exception.exception3Num +
@@ -210,14 +210,15 @@
        this.exception.exception5Num +
        this.exception.exception6Num +
        this.exception.exception7Num
      if(sum == 0){
      if (sum == 0) {
        return 1
      }else {
      } else {
        return sum
      }
    },
    long_time_notchange(){
      let sum = this.exception.exception0Num +
    long_time_notchange() {
      let sum =
        this.exception.exception0Num +
        this.exception.exception1Num +
        this.exception.exception2Num +
        this.exception.exception3Num +
@@ -225,116 +226,102 @@
        this.exception.exception5Num +
        this.exception.exception6Num +
        this.exception.exception7Num
      if(sum ==0){
      if (sum == 0) {
        return 0
      }else{
      } else {
        return (
                        100 -
                        (this.exception.exception0Num /
                        this.exceptionAllNum) *
                          100 -
                        (this.exception.exception1Num /
                        this.exceptionAllNum) *
                          100 -
                        (this.exception.exception2Num /
                        this.exceptionAllNum) *
                          100 -
                        (this.exception.exception4Num /
                        this.exceptionAllNum) *
                          100 -
                        (this.exception.exception5Num /
                        this.exceptionAllNum) *
                          100 -
                        (this.exception.exception6Num /
                        this.exceptionAllNum) *
                          100 -
                        (this.exception.exception7Num /
                        this.exceptionAllNum) *
                          100
                      ).toFixed(1)
          100 -
          (this.exception.exception0Num / this.exceptionAllNum) * 100 -
          (this.exception.exception1Num / this.exceptionAllNum) * 100 -
          (this.exception.exception2Num / this.exceptionAllNum) * 100 -
          (this.exception.exception4Num / this.exceptionAllNum) * 100 -
          (this.exception.exception5Num / this.exceptionAllNum) * 100 -
          (this.exception.exception6Num / this.exceptionAllNum) * 100 -
          (this.exception.exception7Num / this.exceptionAllNum) * 100
        ).toFixed(1)
      }
    },
    // 第一排卡片
    cardRow1(){
    cardRow1() {
      return [
        {
          siteName:this.exception.exception4,
          exceptionType:'4',
          exceptionName:'量级突变',
          iconSrc:'@/assets/exception/exception4.png',
          siteNum:this.exception.exception4.length,
          exceptionNum:this.exception.exception4Num,
          isNoDataStatus:this.isNoData.exception4
          siteName: this.exception.exception4,
          exceptionType: '4',
          exceptionName: '量级突变',
          iconSrc: '@/assets/exception/exception4.png',
          siteNum: this.exception.exception4.length,
          exceptionNum: this.exception.exception4Num,
          isNoDataStatus: this.isNoData.exception4
        },
        {
          siteName:this.exception.exception5,
          exceptionType:'5',
          exceptionName:'临近超标异常',
          iconSrc:'@/assets/exception/exception5.png',
          siteNum:this.exception.exception5.length,
          exceptionNum:this.exception.exception5Num,
          isNoDataStatus:this.isNoData.exception5
          siteName: this.exception.exception5,
          exceptionType: '5',
          exceptionName: '临近超标异常',
          iconSrc: '@/assets/exception/exception5.png',
          siteNum: this.exception.exception5.length,
          exceptionNum: this.exception.exception5Num,
          isNoDataStatus: this.isNoData.exception5
        },
        {
          siteName:this.exception.exception6,
          exceptionType:'6',
          exceptionName:'单日超标次数临界异常',
          iconSrc:'@/assets/exception/exception6.png',
          siteNum:this.exception.exception6.length,
          exceptionNum:this.exception.exception6Num,
          isNoDataStatus:this.isNoData.exception6
          siteName: this.exception.exception6,
          exceptionType: '6',
          exceptionName: '单日超标次数临界异常',
          iconSrc: '@/assets/exception/exception6.png',
          siteNum: this.exception.exception6.length,
          exceptionNum: this.exception.exception6Num,
          isNoDataStatus: this.isNoData.exception6
        },
        {
          siteName:this.exception.exception7,
          exceptionType:'7',
          exceptionName:'变化趋势异常',
          iconSrc:'@/assets/exception/exception7.png',
          siteNum:this.exception.exception7.length,
          exceptionNum:this.exception.exception7Num,
          isNoDataStatus:this.isNoData.exception7
          siteName: this.exception.exception7,
          exceptionType: '7',
          exceptionName: '变化趋势异常',
          iconSrc: '@/assets/exception/exception7.png',
          siteNum: this.exception.exception7.length,
          exceptionNum: this.exception.exception7Num,
          isNoDataStatus: this.isNoData.exception7
        }
      ]
    },  
      cardRow2(){
        return [
      {
        siteName:this.exception.exception0,
          exceptionType:'0',
          exceptionName:'数据缺失异常',
          iconSrc:'@/assets/exception/exception0.png',
          siteNum:this.exception.exception0.length,
          exceptionNum:this.exception.exception0Num,
          isNoDataStatus:this.isNoData.exception0
    },
    cardRow2() {
      return [
        {
          siteName: this.exception.exception0,
          exceptionType: '0',
          exceptionName: '数据缺失异常',
          iconSrc: '@/assets/exception/exception0.png',
          siteNum: this.exception.exception0.length,
          exceptionNum: this.exception.exception0Num,
          isNoDataStatus: this.isNoData.exception0
        },
        {
          siteName:this.exception.exception1,
          exceptionType:'1',
          exceptionName:'数据超低',
          iconSrc:'@/assets/exception/exception1.png',
          siteNum:this.exception.exception1.length,
          exceptionNum:this.exception.exception1Num,
          isNoDataStatus:this.isNoData.exception1
          siteName: this.exception.exception1,
          exceptionType: '1',
          exceptionName: '数据超低',
          iconSrc: '@/assets/exception/exception1.png',
          siteNum: this.exception.exception1.length,
          exceptionNum: this.exception.exception1Num,
          isNoDataStatus: this.isNoData.exception1
        },
        {
          siteName:this.exception.exception2,
          exceptionType:'2',
          exceptionName:'超标',
          iconSrc:'@/assets/exception/exception2.png',
          siteNum:this.exception.exception2.length,
          exceptionNum:this.exception.exception2Num,
          isNoDataStatus:this.isNoData.exception2
          siteName: this.exception.exception2,
          exceptionType: '2',
          exceptionName: '超标',
          iconSrc: '@/assets/exception/exception2.png',
          siteNum: this.exception.exception2.length,
          exceptionNum: this.exception.exception2Num,
          isNoDataStatus: this.isNoData.exception2
        },
        {
          siteName:this.exception.exception3,
          exceptionType:'3',
          exceptionName:'数据长时段无波动',
          iconSrc:'@/assets/exception/exception3.png',
          siteNum:this.exception.exception3.length,
          exceptionNum:this.exception.exception3Num,
          isNoDataStatus:this.isNoData.exception3
        }, 
          siteName: this.exception.exception3,
          exceptionType: '3',
          exceptionName: '数据长时段无波动',
          iconSrc: '@/assets/exception/exception3.png',
          siteNum: this.exception.exception3.length,
          exceptionNum: this.exception.exception3Num,
          isNoDataStatus: this.isNoData.exception3
        }
      ]
      }
    }
  },
  mounted() {
    this.backExceptionDataAWeekAgo()
@@ -344,8 +331,8 @@
  },

  methods: {
    getImageUrl(name){
        return new URL(`../../lib/Carousel/assets/${name}`, import.meta.url).href
    getImageUrl(name) {
      return new URL(`../../lib/Carousel/assets/${name}`, import.meta.url).href
    },
    // 放回站点总数量
    getSiteNume() {
@@ -457,12 +444,12 @@
        case '0':
          this.dialog.option = {
            title: {
            text: this.tableCurrentRowData.exception,
            left: '1%',
            textStyle:{
              fontSize:14
            }
          },
              text: this.tableCurrentRowData.exception,
              left: '1%',
              textStyle: {
                fontSize: 14
              }
            },
            tooltip: {},
            toolbox: {
              // 工具栏
@@ -518,12 +505,12 @@
        case '2':
          this.dialog.option = {
            title: {
            text: this.tableCurrentRowData.exception,
            left: '1%',
            textStyle:{
              fontSize:14
            }
          },
              text: this.tableCurrentRowData.exception,
              left: '1%',
              textStyle: {
                fontSize: 14
              }
            },
            tooltip: {},
            toolbox: {
              // 工具栏
@@ -637,12 +624,12 @@
        case '1':
          this.dialog.option = {
            title: {
            text: this.tableCurrentRowData.exception,
            left: '1%',
            textStyle:{
              fontSize:14
            }
          },
              text: this.tableCurrentRowData.exception,
              left: '1%',
              textStyle: {
                fontSize: 14
              }
            },
            tooltip: {},
            toolbox: {
              // 工具栏
@@ -736,16 +723,16 @@
            }
          }
          break
        // 数据长时段无波动 
        // 数据长时段无波动
        case '3':
          this.dialog.option = {
            title: {
            text: this.tableCurrentRowData.exception,
            left: '1%',
            textStyle:{
              fontSize:14
            }
          },
              text: this.tableCurrentRowData.exception,
              left: '1%',
              textStyle: {
                fontSize: 14
              }
            },
            tooltip: {},
            toolbox: {
              // 工具栏
@@ -835,12 +822,12 @@
        case '7':
          this.dialog.option = {
            title: {
            text: this.tableCurrentRowData.exception,
            left: '1%',
            textStyle:{
              fontSize:14
            }
          },
              text: this.tableCurrentRowData.exception,
              left: '1%',
              textStyle: {
                fontSize: 14
              }
            },
            tooltip: {},
            toolbox: {
              // 工具栏
@@ -938,7 +925,7 @@
        beforeAndAfterTime[0],
        beforeAndAfterTime[3]
      )
      

      // 将异常数据进行预处理，随后将结果作为折线图的配置项
      this.otherExceptionRequest(
        paramsAllTime,
@@ -1045,11 +1032,11 @@
        })
        .then((result) => {
          this.exception.exception0 = result.data.data
          if(result.data.data.length ==0 ){
            this.isNoData.exception0=true
          if (result.data.data.length == 0) {
            this.isNoData.exception0 = true
            return
          }
          this.isNoData.exception0=false
          this.isNoData.exception0 = false
        })
      this.$http
        .get('/dust/sitenamecode', {
@@ -1061,11 +1048,11 @@
        })
        .then((result) => {
          this.exception.exception1 = result.data.data
          if(result.data.data.length == 0 ){
            this.isNoData.exception1=true
          if (result.data.data.length == 0) {
            this.isNoData.exception1 = true
            return
          }
          this.isNoData.exception1=false
          this.isNoData.exception1 = false
        })
      this.$http
        .get('/dust/sitenamecode', {
@@ -1077,11 +1064,11 @@
        })
        .then((result) => {
          this.exception.exception2 = result.data.data
          if(result.data.data.length ==0 ){
            this.isNoData.exception2=true
          if (result.data.data.length == 0) {
            this.isNoData.exception2 = true
            return
          }
          this.isNoData.exception2=false
          this.isNoData.exception2 = false
        })

      this.$http
@@ -1094,11 +1081,11 @@
        })
        .then((result) => {
          this.exception.exception3 = result.data.data
          if(result.data.data.length ==0 ){
            this.isNoData.exception3=true
          if (result.data.data.length == 0) {
            this.isNoData.exception3 = true
            return
          }
          this.isNoData.exception3=false
          this.isNoData.exception3 = false
        })

      this.$http
@@ -1111,11 +1098,11 @@
        })
        .then((result) => {
          this.exception.exception4 = result.data.data
          if(result.data.data.length ==0 ){
            this.isNoData.exception4=true
          if (result.data.data.length == 0) {
            this.isNoData.exception4 = true
            return
          }
          this.isNoData.exception4=false
          this.isNoData.exception4 = false
        })
      this.$http
        .get('/dust/sitenamecode', {
@@ -1127,11 +1114,11 @@
        })
        .then((result) => {
          this.exception.exception5 = result.data.data
          if(result.data.data.length ==0 ){
            this.isNoData.exception5=true
          if (result.data.data.length == 0) {
            this.isNoData.exception5 = true
            return
          }
          this.isNoData.exception5=false
          this.isNoData.exception5 = false
        })
      this.$http
        .get('/dust/sitenamecode', {
@@ -1143,13 +1130,13 @@
        })
        .then((result) => {
          this.exception.exception6 = result.data.data
          if(result.data.data.length ==0 ){
            this.isNoData.exception6=true
          if (result.data.data.length == 0) {
            this.isNoData.exception6 = true
            return
          }
          this.isNoData.exception6=false
          this.isNoData.exception6 = false
        })
        this.$http
      this.$http
        .get('/dust/sitenamecode', {
          params: {
            exceptionType: '7',
@@ -1159,13 +1146,12 @@
        })
        .then((result) => {
          this.exception.exception7 = result.data.data
          if(result.data.data.length ==0 ){
            this.isNoData.exception7=true
          if (result.data.data.length == 0) {
            this.isNoData.exception7 = true
            return
          }
          this.isNoData.exception7=false
          this.isNoData.exception7 = false
        })


      /* 异常异常数量 */
      this.$http
@@ -1178,7 +1164,6 @@
        })
        .then((result) => {
          this.exception.exception0Num = result.data.data
          
        })
      this.$http
        .get('/dust/exceptionnum', {
@@ -1248,7 +1233,7 @@
        .then((result) => {
          this.exception.exception6Num = result.data.data
        })
        this.$http
      this.$http
        .get('/dust/exceptionnum', {
          params: {
            exceptionType: '7',
@@ -1259,9 +1244,6 @@
        .then((result) => {
          this.exception.exception7Num = result.data.data
        })



    },

    /**
@@ -1362,7 +1344,6 @@
        this.total = response.data.data.total
        // 移除空数据状态
      })

    },

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

@@ -1458,188 +1438,285 @@
</script>

<template>
<div class="all-container">
  <el-row ref="h1" >
    <el-col>
      <el-form :inline="true">
        <div class="head-container-text">
          <el-form-item>
            <AreaAndmonitorType></AreaAndmonitorType>
          </el-form-item>
  <div class="all-container">
    <el-row ref="h1">
      <el-col>
        <el-form :inline="true">
          <div class="head-container-text">
            <el-form-item>
              <AreaAndmonitorType></AreaAndmonitorType>
            </el-form-item>

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

          <el-form-item>
            <ButtonClick
              content="风险评估"
              type="warning"
              color="rgb(12,104,165)"
              :loading="loading.queryButton"
              :havaIcon="false"
              @do-search="handleSubmit"
            ><img src="@/assets/exception/riskButton.png" height="24" class="img-button"></ButtonClick>
           
          </el-form-item>

        </div>

      </el-form>
    </el-col>
  </el-row>

<!-- 时间摘要 -->
  <el-row class="head-describtion-text" ref="h2">
    <el-row>
      <span> 金山区 {{ beginTime }} —— {{ endTime }} 扬尘监测异常信息汇总</span>
            <el-form-item>
              <ButtonClick
                content="风险评估"
                type="warning"
                color="rgb(12,104,165)"
                :loading="loading.queryButton"
                :havaIcon="false"
                @do-search="handleSubmit"
                ><img src="@/assets/exception/riskButton.png" height="24" class="img-button"
              /></ButtonClick>
            </el-form-item>
          </div>
        </el-form>
      </el-col>
    </el-row>
  </el-row>

  <!-- 异常分析 -->
  <el-row ref="h3">
    <el-col>
      <el-card class="card-container">
        <template #header>
          <div class="card-header">异常分析</div>
        </template>
    <!-- 时间摘要 -->
    <el-row class="head-describtion-text" ref="h2">
      <el-row>
        <span> 金山区 {{ beginTime }} —— {{ endTime }} 扬尘监测异常信息汇总</span>
      </el-row>
    </el-row>

        <el-row :gutter="20" class="card-row">
          <el-col :span="6">
            <AnalysisCard  :site-name="cardRow1[0].siteName"  :exception-type="cardRow1[0].exceptionType" :begin-time="beginTime" :end-time="endTime" :exception-name="cardRow1[0].exceptionName" :site-num="cardRow1[0].siteNum" :exception-num="cardRow1[0].exceptionNum" :exception-all-num="exceptionAllNum" :site-num-all="siteTotal"  :isNoDataStatus="cardRow1[0].isNoDataStatus" @get-abnormal-data-by-click="getAbnormalDataByClick"> 
                <img src="@/assets/exception/exception4.png"  height="24" width="24">
            </AnalysisCard>
          </el-col>
          <el-col :span="6"> 
            <AnalysisCard  :site-name="cardRow1[1].siteName"  :exception-type="cardRow1[1].exceptionType" :begin-time="beginTime" :end-time="endTime" :exception-name="cardRow1[1].exceptionName" :site-num="cardRow1[1].siteNum" :exception-num="cardRow1[1].exceptionNum" :exception-all-num="exceptionAllNum" :site-num-all="siteTotal"  :isNoDataStatus="cardRow1[1].isNoDataStatus" @get-abnormal-data-by-click="getAbnormalDataByClick"> 
                <img src="@/assets/exception/exception5.png"  height="24" width="24">
            </AnalysisCard>
          </el-col>
          <el-col :span="6">
            <AnalysisCard  :site-name="cardRow1[2].siteName"  :exception-type="cardRow1[2].exceptionType" :begin-time="beginTime" :end-time="endTime" :exception-name="cardRow1[2].exceptionName" :site-num="cardRow1[2].siteNum" :exception-num="cardRow1[2].exceptionNum" :exception-all-num="exceptionAllNum" :site-num-all="siteTotal"  :isNoDataStatus="cardRow1[2].isNoDataStatus" @get-abnormal-data-by-click="getAbnormalDataByClick"> 
                <img src="@/assets/exception/exception6.png"  height="24" width="24">
            </AnalysisCard>
          </el-col>
          <el-col :span="6">
            <AnalysisCard  :site-name="cardRow1[3].siteName"  :exception-type="cardRow1[3].exceptionType" :begin-time="beginTime" :end-time="endTime" :exception-name="cardRow1[3].exceptionName" :site-num="cardRow1[3].siteNum" :exception-num="cardRow1[3].exceptionNum" :exception-all-num="exceptionAllNum" :site-num-all="siteTotal"  :isNoDataStatus="cardRow1[3].isNoDataStatus" @get-abnormal-data-by-click="getAbnormalDataByClick"> 
                <img src="@/assets/exception/exception7.png"  height="24" width="24">
            </AnalysisCard>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="6" >
            <AnalysisCard  :site-name="cardRow2[0].siteName" :exception-type="cardRow2[0].exceptionType" :begin-time="beginTime" :end-time="endTime" :exception-name="cardRow2[0].exceptionName" :site-num="cardRow2[0].siteNum" :exception-num="cardRow2[0].exceptionNum" :exception-all-num="exceptionAllNum" :site-num-all="siteTotal"  :isNoDataStatus="cardRow2[0].isNoDataStatus" @get-abnormal-data-by-click="getAbnormalDataByClick"> 
              <img src="@/assets/exception/exception0.png"  height="24" width="24">
            </AnalysisCard>
          </el-col>
          <el-col :span="6" >
            <AnalysisCard  :site-name="cardRow2[1].siteName" :exception-type="cardRow2[1].exceptionType" :begin-time="beginTime" :end-time="endTime" :exception-name="cardRow2[1].exceptionName" :site-num="cardRow2[1].siteNum" :exception-num="cardRow2[1].exceptionNum" :exception-all-num="exceptionAllNum" :site-num-all="siteTotal"  :isNoDataStatus="cardRow2[1].isNoDataStatus" @get-abnormal-data-by-click="getAbnormalDataByClick"> 
              <img src="@/assets/exception/exception1.png"  height="24" width="24">
            </AnalysisCard>
          </el-col>
          <el-col :span="6" >
            <AnalysisCard  :site-name="cardRow2[2].siteName" :exception-type="cardRow2[2].exceptionType" :begin-time="beginTime" :end-time="endTime" :exception-name="cardRow2[2].exceptionName" :site-num="cardRow2[2].siteNum" :exception-num="cardRow2[2].exceptionNum" :exception-all-num="exceptionAllNum" :site-num-all="siteTotal"  :isNoDataStatus="cardRow2[2].isNoDataStatus" @get-abnormal-data-by-click="getAbnormalDataByClick"> 
              <img src="@/assets/exception/exception2.png"  height="24" width="24">
            </AnalysisCard>
          </el-col>
          <el-col :span="6" >
            <AnalysisCard  :site-name="cardRow2[3].siteName" :exception-type="cardRow2[3].exceptionType" :begin-time="beginTime" :end-time="endTime" :exception-name="cardRow2[3].exceptionName" :site-num="cardRow2[3].siteNum" :exception-num="cardRow2[3].exceptionNum" :exception-all-num="exceptionAllNum" :site-num-all="siteTotal"  :isNoDataStatus="cardRow2[3].isNoDataStatus" @get-abnormal-data-by-click="getAbnormalDataByClick"> 
              <img src="@/assets/exception/exception3.png"  height="24" width="24">
            </AnalysisCard>
          </el-col>


        </el-row>

      </el-card>
    </el-col>
  </el-row>

  <el-button-group>
    <el-button color="#626aef"  plain @click="isTableShow=true" v-show="!isTableShow">
      显示异常清单<el-icon class="i-ep-Arrow"><i-ep-ArrowUp /></el-icon>
    </el-button>
    <el-button color="#626aef"  plain @click="isTableShow=false" v-show="isTableShow">
      隐藏异常清单<el-icon class="i-ep-Arrow"><i-ep-ArrowDown /></el-icon>
    </el-button>
  </el-button-group>

  <!-- 表格 -->
  <el-row v-show="isTableShow">
    <el-col>
      
      <el-table
        ref="table"
        :data="displayData"
        :height="tableHeight"
        :highlight-current-row="true"
        size="default"
        v-loading="loading.tableLoading"
        border
      >
        <el-table-column
          type="index"
          label="序号"
          width="60px"
          align="center"
          fixed
          :index="indexMethod1"
        />
        <el-table-column prop="name" label="站点名称" show-overflow-tooltip />
        <el-table-column prop="mnCode" label="设备编号" align="center" show-overflow-tooltip />
        <el-table-column prop="exception" label="异常类型" align="center" show-overflow-tooltip />
        <el-table-column prop="region" label="区域" align="center" show-overflow-tooltip />
        <el-table-column prop="beginTime" label="开始时间" align="center" show-overflow-tooltip />
        <el-table-column prop="endTime" label="结束时间" align="center" show-overflow-tooltip />
        <el-table-column prop="typename" label="场景" align="center" width="82" show-overflow-tooltip />
        <el-table-column prop="address" label="地址" align="center" show-overflow-tooltip />
        <el-table-column prop="dutyCompany" label="运维商" align="center" show-overflow-tooltip />
        
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <el-button type="primary" class="table-button" @click="showDialog(row)"
              >查看详情</el-button
            >
    <!-- 异常分析 -->
    <el-row ref="h3">
      <el-col>
        <el-card class="card-container">
          <template #header>
            <div class="card-header">异常分析</div>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        ref="h4"
        background
        layout="total, sizes, prev, pager, next, jumper"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="total"
        :page-sizes="[10, 20, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </el-col>
  </el-row>
          <el-row :gutter="20" class="card-row">
            <el-col :span="6">
              <AnalysisCard
                :site-name="cardRow1[0].siteName"
                :exception-type="cardRow1[0].exceptionType"
                :begin-time="beginTime"
                :end-time="endTime"
                :exception-name="cardRow1[0].exceptionName"
                :site-num="cardRow1[0].siteNum"
                :exception-num="cardRow1[0].exceptionNum"
                :exception-all-num="exceptionAllNum"
                :site-num-all="siteTotal"
                :isNoDataStatus="cardRow1[0].isNoDataStatus"
                @get-abnormal-data-by-click="getAbnormalDataByClick"
              >
                <img src="@/assets/exception/exception4.png" height="24" width="24" />
              </AnalysisCard>
            </el-col>
            <el-col :span="6">
              <AnalysisCard
                :site-name="cardRow1[1].siteName"
                :exception-type="cardRow1[1].exceptionType"
                :begin-time="beginTime"
                :end-time="endTime"
                :exception-name="cardRow1[1].exceptionName"
                :site-num="cardRow1[1].siteNum"
                :exception-num="cardRow1[1].exceptionNum"
                :exception-all-num="exceptionAllNum"
                :site-num-all="siteTotal"
                :isNoDataStatus="cardRow1[1].isNoDataStatus"
                @get-abnormal-data-by-click="getAbnormalDataByClick"
              >
                <img src="@/assets/exception/exception5.png" height="24" width="24" />
              </AnalysisCard>
            </el-col>
            <el-col :span="6">
              <AnalysisCard
                :site-name="cardRow1[2].siteName"
                :exception-type="cardRow1[2].exceptionType"
                :begin-time="beginTime"
                :end-time="endTime"
                :exception-name="cardRow1[2].exceptionName"
                :site-num="cardRow1[2].siteNum"
                :exception-num="cardRow1[2].exceptionNum"
                :exception-all-num="exceptionAllNum"
                :site-num-all="siteTotal"
                :isNoDataStatus="cardRow1[2].isNoDataStatus"
                @get-abnormal-data-by-click="getAbnormalDataByClick"
              >
                <img src="@/assets/exception/exception6.png" height="24" width="24" />
              </AnalysisCard>
            </el-col>
            <el-col :span="6">
              <AnalysisCard
                :site-name="cardRow1[3].siteName"
                :exception-type="cardRow1[3].exceptionType"
                :begin-time="beginTime"
                :end-time="endTime"
                :exception-name="cardRow1[3].exceptionName"
                :site-num="cardRow1[3].siteNum"
                :exception-num="cardRow1[3].exceptionNum"
                :exception-all-num="exceptionAllNum"
                :site-num-all="siteTotal"
                :isNoDataStatus="cardRow1[3].isNoDataStatus"
                @get-abnormal-data-by-click="getAbnormalDataByClick"
              >
                <img src="@/assets/exception/exception7.png" height="24" width="24" />
              </AnalysisCard>
            </el-col>
          </el-row>

  <!-- 对话框 -->
  <el-dialog
    class="exception-dialog"
    v-model="dialogTableVisible"
    draggable
    align-center
    height="700px"
    width="700px"
  >
    <!-- 头 -->
    <template #header>
      <div class="diag-head">
        <div class="diag-head-text">
          <div><span class="diag-head-text1">站点名称：</span>{{ tableCurrentRowData.name }}</div>
          <div><span class="diag-head-text1">设备编号：</span>{{ tableCurrentRowData.mnCode }}</div>
          <div><span class="diag-head-text1">运维商：</span>{{ tableCurrentRowData.dutyCompany }}</div>
          <!-- <div>
          <el-row :gutter="20">
            <el-col :span="6">
              <AnalysisCard
                :site-name="cardRow2[0].siteName"
                :exception-type="cardRow2[0].exceptionType"
                :begin-time="beginTime"
                :end-time="endTime"
                :exception-name="cardRow2[0].exceptionName"
                :site-num="cardRow2[0].siteNum"
                :exception-num="cardRow2[0].exceptionNum"
                :exception-all-num="exceptionAllNum"
                :site-num-all="siteTotal"
                :isNoDataStatus="cardRow2[0].isNoDataStatus"
                @get-abnormal-data-by-click="getAbnormalDataByClick"
              >
                <img src="@/assets/exception/exception0.png" height="24" width="24" />
              </AnalysisCard>
            </el-col>
            <el-col :span="6">
              <AnalysisCard
                :site-name="cardRow2[1].siteName"
                :exception-type="cardRow2[1].exceptionType"
                :begin-time="beginTime"
                :end-time="endTime"
                :exception-name="cardRow2[1].exceptionName"
                :site-num="cardRow2[1].siteNum"
                :exception-num="cardRow2[1].exceptionNum"
                :exception-all-num="exceptionAllNum"
                :site-num-all="siteTotal"
                :isNoDataStatus="cardRow2[1].isNoDataStatus"
                @get-abnormal-data-by-click="getAbnormalDataByClick"
              >
                <img src="@/assets/exception/exception1.png" height="24" width="24" />
              </AnalysisCard>
            </el-col>
            <el-col :span="6">
              <AnalysisCard
                :site-name="cardRow2[2].siteName"
                :exception-type="cardRow2[2].exceptionType"
                :begin-time="beginTime"
                :end-time="endTime"
                :exception-name="cardRow2[2].exceptionName"
                :site-num="cardRow2[2].siteNum"
                :exception-num="cardRow2[2].exceptionNum"
                :exception-all-num="exceptionAllNum"
                :site-num-all="siteTotal"
                :isNoDataStatus="cardRow2[2].isNoDataStatus"
                @get-abnormal-data-by-click="getAbnormalDataByClick"
              >
                <img src="@/assets/exception/exception2.png" height="24" width="24" />
              </AnalysisCard>
            </el-col>
            <el-col :span="6">
              <AnalysisCard
                :site-name="cardRow2[3].siteName"
                :exception-type="cardRow2[3].exceptionType"
                :begin-time="beginTime"
                :end-time="endTime"
                :exception-name="cardRow2[3].exceptionName"
                :site-num="cardRow2[3].siteNum"
                :exception-num="cardRow2[3].exceptionNum"
                :exception-all-num="exceptionAllNum"
                :site-num-all="siteTotal"
                :isNoDataStatus="cardRow2[3].isNoDataStatus"
                @get-abnormal-data-by-click="getAbnormalDataByClick"
              >
                <img src="@/assets/exception/exception3.png" height="24" width="24" />
              </AnalysisCard>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <el-button-group>
      <el-button color="#626aef" plain @click="isTableShow = true" v-show="!isTableShow">
        显示异常清单<el-icon class="i-ep-Arrow"><i-ep-ArrowUp /></el-icon>
      </el-button>
      <el-button color="#626aef" plain @click="isTableShow = false" v-show="isTableShow">
        隐藏异常清单<el-icon class="i-ep-Arrow"><i-ep-ArrowDown /></el-icon>
      </el-button>
    </el-button-group>

    <!-- 表格 -->
    <el-row v-show="isTableShow">
      <el-col>
        <el-table
          ref="table"
          :data="displayData"
          :height="tableHeight"
          :highlight-current-row="true"
          size="default"
          v-loading="loading.tableLoading"
          border
        >
          <el-table-column
            type="index"
            label="序号"
            width="60px"
            align="center"
            fixed
            :index="indexMethod1"
          />
          <el-table-column prop="name" label="站点名称" show-overflow-tooltip />
          <el-table-column prop="mnCode" label="设备编号" align="center" show-overflow-tooltip />
          <el-table-column prop="exception" label="异常类型" align="center" show-overflow-tooltip />
          <el-table-column prop="region" label="区域" align="center" show-overflow-tooltip />
          <el-table-column prop="beginTime" label="开始时间" align="center" show-overflow-tooltip />
          <el-table-column prop="endTime" label="结束时间" align="center" show-overflow-tooltip />
          <el-table-column
            prop="typename"
            label="场景"
            align="center"
            width="82"
            show-overflow-tooltip
          />
          <el-table-column prop="address" label="地址" align="center" show-overflow-tooltip />
          <el-table-column prop="dutyCompany" label="运维商" align="center" show-overflow-tooltip />

          <el-table-column label="操作" align="center">
            <template #default="{ row }">
              <el-button type="primary" class="table-button" @click="showDialog(row)"
                >查看详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          ref="h4"
          background
          layout="total, sizes, prev, pager, next, jumper"
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </el-col>
    </el-row>

    <!-- 对话框 -->
    <el-dialog
      class="exception-dialog"
      v-model="dialogTableVisible"
      draggable
      align-center
      height="700px"
      width="700px"
    >
      <!-- 头 -->
      <template #header>
        <div class="diag-head">
          <div class="diag-head-text">
            <div><span class="diag-head-text1">站点名称：</span>{{ tableCurrentRowData.name }}</div>
            <div>
              <span class="diag-head-text1">设备编号：</span>{{ tableCurrentRowData.mnCode }}
            </div>
            <div>
              <span class="diag-head-text1">运维商：</span>{{ tableCurrentRowData.dutyCompany }}
            </div>
            <!-- <div>
            <span class="diag-head-text1">异常类型：</span>
            <span v-if="tableCurrentRowData.exceptionType == '0'">数据缺失异常</span>
            <span v-else-if="tableCurrentRowData.exceptionType == '1'">数据超低</span>
@@ -1651,13 +1728,13 @@
            <span v-else-if="tableCurrentRowData.exceptionType == '7'">滑动平均值异常</span>
          </div> -->

          <div>
            <span class="diag-head-text1">异常时间段：</span>{{ tableCurrentRowData.beginTime }} ~
            {{ tableCurrentRowData.endTime }}
            <div>
              <span class="diag-head-text1">异常时间段：</span>{{ tableCurrentRowData.beginTime }} ~
              {{ tableCurrentRowData.endTime }}
            </div>
          </div>
        </div>

        <!-- <div class="chart-jump-button">
          <!-- <div class="chart-jump-button">
          <el-button
            type="danger"
            :loading="loading.preButton"
@@ -1673,82 +1750,80 @@
            >下条异常</el-button
          >
        </div> -->
        <div class="chart-jump-button">
          <el-button
            type="danger"
            :loading="loading.preButton"
            :disabled="dialog.isPreCantouch || flag.banTouch"
            @click="getNextRowData"
            >上条异常</el-button
          >
          <el-button
            type="danger"
            :loading="loading.afterButton"
            :disabled="dialog.isNextCantouch || flag.banTouch"
            @click="getPreviousRowData"
            >下条异常</el-button
          >
          <div class="chart-jump-button">
            <el-button
              type="danger"
              :loading="loading.preButton"
              :disabled="dialog.isPreCantouch || flag.banTouch"
              @click="getNextRowData"
              >上条异常</el-button
            >
            <el-button
              type="danger"
              :loading="loading.afterButton"
              :disabled="dialog.isNextCantouch || flag.banTouch"
              @click="getPreviousRowData"
              >下条异常</el-button
            >
          </div>
        </div>
      </template>

      </div>
    </template>
      <!-- :option="dialog.option" -->

    <!-- :option="dialog.option" -->
      <!-- 图形 -->
      <DustLineChart
        :option="dialog.option"
        :is-open-dialog="dialogTableVisible"
        v-loading="loading.lineChart"
      ></DustLineChart>

    <!-- 图形 -->
    <DustLineChart
      :option="dialog.option"
      :is-open-dialog="dialogTableVisible"
      v-loading="loading.lineChart"
    ></DustLineChart>

    <!-- 表格 -->
    <div>
      <el-table :data="dialog.historyData" size="default" height="200" border>
        <el-table-column
          type="index"
          label="序号"
          width="60px"
          align="center"
          fixed
          :index="indexMethod2"
        ></el-table-column>
        <!-- <el-table-column fixed prop="name" label="站点名称" show-overflow-tooltip />
      <!-- 表格 -->
      <div>
        <el-table :data="dialog.historyData" size="default" height="200" border>
          <el-table-column
            type="index"
            label="序号"
            width="60px"
            align="center"
            fixed
            :index="indexMethod2"
          ></el-table-column>
          <!-- <el-table-column fixed prop="name" label="站点名称" show-overflow-tooltip />
        <el-table-column prop="mnCode" label="设备编号" align="center" show-overflow-tooltip />
        <el-table-column prop="dutyCompany" label="运维商" align="center" show-overflow-tooltip /> -->
        <el-table-column prop="lst" label="采集时间" align="center" show-overflow-tooltip />
        <el-table-column
          prop="dustValue"
          label="颗粒物浓度(mg/m³)"
          align="center"
          show-overflow-tooltip
        />
      </el-table>
    </div>
    <template #footer>
      <el-tag type="success" class="mx-1" effect="dark" round
        ><span class="table-line-lable" v-show="tableCurrentRowData.exceptionType == '0'"
          >缺失数据：
        </span>
        <span
          v-show="
            tableCurrentRowData.exceptionType == '1' ||
            tableCurrentRowData.exceptionType == '2' ||
            tableCurrentRowData.exceptionType == '3' ||
            tableCurrentRowData.exceptionType == '4'
          "
          >异常数据：</span
        >
        <span class="table-line-num">{{ dialog.exceptionTotal }}条</span>
        <span v-show="tableCurrentRowData.exceptionType == '0'"> (逻辑计算)</span>
      </el-tag>
    </template>
  </el-dialog>
</div>
          <el-table-column prop="lst" label="采集时间" align="center" show-overflow-tooltip />
          <el-table-column
            prop="dustValue"
            label="颗粒物浓度(mg/m³)"
            align="center"
            show-overflow-tooltip
          />
        </el-table>
      </div>
      <template #footer>
        <el-tag type="success" class="mx-1" effect="dark" round
          ><span class="table-line-lable" v-show="tableCurrentRowData.exceptionType == '0'"
            >缺失数据：
          </span>
          <span
            v-show="
              tableCurrentRowData.exceptionType == '1' ||
              tableCurrentRowData.exceptionType == '2' ||
              tableCurrentRowData.exceptionType == '3' ||
              tableCurrentRowData.exceptionType == '4'
            "
            >异常数据：</span
          >
          <span class="table-line-num">{{ dialog.exceptionTotal }}条</span>
          <span v-show="tableCurrentRowData.exceptionType == '0'"> (逻辑计算)</span>
        </el-tag>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>

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

  float: right;
}

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

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


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

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



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