扬尘vue

zmc

2023-09-04 34257f504330191b1a698eb48b52217095db47fe

 src/views/exception/FlightInspection.vue

@@ -1,14 +1,16 @@
<script>
import InputSearch from '../../sfc/InputSearch.vue';
import ExceptionType from '../../sfc/ExceptionType.vue';
import TimeSelect from '../../sfc/TimeSelect.vue';
import DustExceptionText from '../../sfc/DustExceptionText.vue';
import InputSearch from '@/sfc/InputSearch.vue';
import ExceptionType from '@/sfc/ExceptionType.vue';
import TimeSelectWithShortCuts from '@/sfc/TimeSelectWithShortCuts.vue';
import DustExceptionText from './components/DustExceptionText.vue';
import { useFetch } from '../../utils/fetch.js';
import { useCommonFunction } from '../../utils/common.js';

import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'
import ButtonClick from '@/sfc/ButtonClick.vue'
import index from '@/utils/exception_common_function/index.js'
//  异常图形异步组件
const DustLineChart = defineAsyncComponent(() =>
  import('../../sfc/DustLineChart.vue')
  import('./components/DustLineChart.vue')
);

import dayjs from 'dayjs';
@@ -16,9 +18,11 @@
  components: {
    ExceptionType,
    InputSearch,
    TimeSelect,
    TimeSelectWithShortCuts,
    DustExceptionText,
    DustLineChart
    DustLineChart,
    ButtonClick,
    AreaAndmonitorType
  },
  data() {
    return {
@@ -37,7 +41,7 @@
      // 表格展示的数据
      displayData: [],
      // 表格高度
      tableHeight: 300,
      tableHeight: 400,
      // 表格数据
      // 当前页
      currentPage: 1,
@@ -59,12 +63,25 @@
        exception2: [],
        // 数据长时段无波动
        exception3: [],
        // 量级突变异常
        exception4: [],
        // 临近超标异常
        exception5: [],
        // 单日超标次数临界异常
        exception6: [],
        // 滑动平均值异常
        exception7: [],
        

        // 该时段的异常数量
        exception0Num: 0,
        exception1Num: 0,
        exception2Num: 0,
        exception3Num: 0
        exception3Num: 0,
        exception4Num: 0,
        exception5Num: 0,
        exception6Num: 0,
        exception7Num: 0,
      },
      // 站点总数量
      siteTotal: 0,
@@ -154,7 +171,6 @@
    },

    // 当选择的时间发生变化时，异常分析部分的异常店铺数量同步变化

        beginTime() {
          this.getShopNames();
      },
@@ -166,45 +182,14 @@
    }
  },
  mounted() {
    // 测试组合式函数
    // let param = {
    //   siteName: '金山区金山新城JSC1-0401单元1-11-01地块项目09',
    //   beginTime: '2023-07-01 00:00:00',
    //   endTime: '2023-07-10 00:00:00'
    // };
    // this.backData = this.request('/dust/history1', param);
    // console.log('历史数据为：', this.backData.value);

    this.backExceptionDataAWeekAgo();
    this.calTableHeight();
    // 查询时间段的各异常的站点，查询该时间区间的各异常数量
    this.getShopNames();
    this.test()
    // this.exception.exception0 = this.getSiteNameByExceptionType('0',this.beginTime,this.endTime)
    // console.log('异常数据为：',this.exception.exception0);
 
  },

  methods: {
    test(){
    const  data = [0.084, 0.073, 0.062, 0.1];
    const  threshold = 0.2;  // 设定的变化率阈值

for (let i = 1; i < data.length; i++) {
  const rateOfChange = Math.abs((data[i] - data[i-1]) / data[i-1]);
  
  console.log('变化率为：',data[i], data[i-1],rateOfChange);
  if (rateOfChange > threshold) {
    console.log(`数据 ${data[i-1]} 到 ${data[i]} 的变化率超过阈值 ${threshold}`);
    // 进行相应的处理
  }
}
    },

    // getExceptionSiteNum(){
    //   this.$http.get('/dust/exceptionsitenum').then(result => {
    //     this.exceptionSiteNum = result.data.data.length 
    //   })
    // },
    /**
     * description：点击异常站点名字时 返回的数据
     * @param： 
@@ -225,35 +210,12 @@
      this.selectedRowIndex = this.displayData.indexOf(this.tableCurrentRowData);

    },

    /**
     * description：返回时间数组，从开始时间的后15分钟到结束时间为止。
     * @param： 异常的开始,异常结束时间
     * @createTime:2023-08-17
     * @returns：比如12:00:00-13:00:00 所以返回的数组元素是 12:00:00 ,12:15:00,12:30:00,12:45:00，13:00:00
     */
    descTenTime(begin, end) {
      let time = [];
      if (begin == end) {
        time.push(begin);
        return time;
      }
      time.push(begin);
      let temp = dayjs(begin).add(15, 'minute').format('YYYY-MM-DD HH:mm:ss');
      while (temp != end) {
        time.push(temp);
        temp = dayjs(temp).add(15, 'minute').format('YYYY-MM-DD HH:mm:ss');
      }
      // 加上异常的结束时间
      time.push(temp);
      return time;
    },
    /**
     * description：断电或断网时设置的表格数据
     */
    setOfflineTbleData(){
      // 无数据时的时间数组 时间相差15分钟
      const abnormalTimeTenMinute = this.descTenTime(
      const abnormalTimeTenMinute = index.descFiftyTime(
        this.tableCurrentRowData.beginTime,
        this.tableCurrentRowData.endTime
      );
@@ -274,63 +236,9 @@
      this.exceptionTotal = abnormalTimeTenMinute.length;
    },

    /**
     * description：返回开始时间的前45分钟的时间点，结束时间后45分钟的时间点
     * @param： 异常的开始时间，异常的结束时间。
     * @returns：数组。time[0],time[1],time[2],time[3]分别代表异常区间前45分钟的时间点，前15分钟的时间点,后15分钟的时间点，后45分钟的时间点
     */
    before45AndAfter45(begin, end) {
      let time = [];
      // 前一段的开始时间
      const before45MinBegin = dayjs(begin)
        .subtract(45, 'minute')
        .format('YYYY-MM-DD HH:mm:ss');
      // 前一段的结束时间
      const before15MinBegin = dayjs(begin)
        .subtract(15, 'minute')
        .format('YYYY-MM-DD HH:mm:ss');
  

      // 后一段的开始时间
      const after15MinBegin = dayjs(end)
        .add(15, 'minute')
        .format('YYYY-MM-DD HH:mm:ss');
      // 往后40分钟
      const after45MinEnd = dayjs(end)
        .add(45, 'minute')
        .format('YYYY-MM-DD HH:mm:ss');
      time.push(before45MinBegin);
      time.push(before15MinBegin);
      time.push(after15MinBegin);
      time.push(after45MinEnd);
      return time;
    },
    /**
     * description：返回某站点在该时段历史数据的get请求参数
     * @param： 站点名称， 开始时间， 结束时间
     * @returns：对象
     */
    requestGetParms(name, begin, end) {
      return {
        siteName: name,
        beginTime: begin,
        endTime: end
      };
    },
    /**
     * description：相差多少个15分钟  计算中包括开始时间，结束时间。
     * @param： 异常开始时间，异常结束时间
     * @returns：整数
     */
    diffFiftyMinutesNum(beginNormal, endNormal) {
      // 将开始时间和结束时间转换为dayjs对象
      const start = dayjs(beginNormal).subtract(15, 'minute');
      const end = dayjs(endNormal);

      // 计算结束时间减去开始时间中间相差多少个十分钟
      const diffInMinutes = end.diff(start, 'minute');
      const diffInTenMinutes = Math.floor(diffInMinutes / 15);
      return diffInTenMinutes;
    },
    // 段电或断网区间无数据，需要补充。其他的都有数据，直接一次请求全部时段就好

    // 根据异常区间构造前后端首尾 前区间 中间区间 后区间
@@ -361,7 +269,7 @@
        let timeAndValue = {};

        // 从添加了首位区间的开始和结束时间进行遍历 保证时间以10分钟为间隔
        timeAndValue = this.keepContinuousByEachFiftyMinutes(
        timeAndValue = index.keepContinuousByEachFiftyMinutes(
            allTime[0],
            allTime[3],
            this.dialog.allExceptionTimeData
@@ -383,59 +291,7 @@
            });
       
    },
    /**
     * description：判断data中是否有该日期时间，存在返回该时间对应的浓度值，否则返回-1
     * @param： 加上前后区间的异常数据，时间字符串
     * @returns：
     */
    findTimeInExceptionData(data, time) {
      for (let i = 0; i < data.length; i++) {
        if (data[i] == null) {
          continue;
        }
        if (data[i]['lst'] == time) {
          return data[i]['dustValue'];
        }
      }
      return -1;
    },
    /**
     * description：根据开始和结束时间,返回以15分钟为间隔的时间和对应的值
     * @param： 前区间的开始时间， 后区间的结束时间, 加上前后区间的总时间段的异常数据的对象数组
     * @returns：对象。包含了折线图的x轴，y轴的配置数据
     */
    keepContinuousByEachFiftyMinutes(
      intervalStarTime,
      intervalEndTime,
      headAndTailExceptionData
    ) {
      let xAxis = [];
      let yAxis = [];
      let obj = {};
      let current = intervalStarTime;
      let tail = dayjs(intervalEndTime)
        .add(15, 'minute')
        .format('YYYY-MM-DD HH:mm:ss');
      while (current != tail) {
        let value = this.findTimeInExceptionData(
          headAndTailExceptionData,
          current
        );
        if (value != -1) {
          xAxis.push(current);
          yAxis.push(value);
        } else {
          xAxis.push(current);
          yAxis.push(null);
        }
        current = dayjs(current)
          .add(15, 'minute')
          .format('YYYY-MM-DD HH:mm:ss');
      }
      obj['xAxis'] = xAxis;
      obj['yAxis'] = yAxis;
      return obj;
    },


    /**
     * description：绘制折线图
@@ -713,7 +569,7 @@
            }
          };
          break;
        case '3':
        case '3' :
          this.dialog.option = {
            tooltip: {},
            toolbox: {
@@ -797,8 +653,83 @@
            }
          };
          break;
        case '4':
        this.dialog.option = {
            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:
          return 'error';
          console.log('没有设置该异常类型！');;
      }
      this.flag.banTouch = 0
    },
@@ -815,13 +746,13 @@
      // beforeAndAfterTime[1]:前15分钟的时间点
      // beforeAndAfterTime[2]:后15分钟的时间点
      // beforeAndAfterTime[3]:后45分钟的时间点
      let beforeAndAfterTime = this.before45AndAfter45(
      let beforeAndAfterTime = index.before45AndAfter45(
        exceptionBeginTime,
        exceptionEndTime
      );

      // 构造异常时间前后区间数据请求参数(除了断网中都用到）
      let paramsAllTime = this.requestGetParms(
      let paramsAllTime = index.requestGetParms(
        this.tableCurrentRowData.name,
        beforeAndAfterTime[0],
        beforeAndAfterTime[3]
@@ -848,7 +779,7 @@

        // 得到上一行的数据
        this.tableCurrentRowData = this.displayData[this.selectedRowIndex]
        let params = this.requestGetParms(this.tableCurrentRowData.name,this.tableCurrentRowData.beginTime,this.tableCurrentRowData.endTime)
        let params = index.requestGetParms(this.tableCurrentRowData.name,this.tableCurrentRowData.beginTime,this.tableCurrentRowData.endTime)
        this.loading.preButton = true
        this.$http
          .get('/dust/history', { params: params })
@@ -884,7 +815,7 @@
         // 得到上一行的数据
         this.tableCurrentRowData = this.displayData[this.selectedRowIndex]

        let params = this.requestGetParms(this.tableCurrentRowData.name,this.tableCurrentRowData.beginTime,this.tableCurrentRowData.endTime)
        let params = index.requestGetParms(this.tableCurrentRowData.name,this.tableCurrentRowData.beginTime,this.tableCurrentRowData.endTime)
        this.loading.afterButton = true
        this.$http
          .get('/dust/history', { params: params })
@@ -960,6 +891,40 @@
          this.exception.exception3 = result.data.data;
        });

        this.$http
        .get('/dust/sitenamecode', {
          params: {
            exceptionType: '4',
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        })
        .then((result) => {
          this.exception.exception4 = result.data.data;
        });
        this.$http
        .get('/dust/sitenamecode', {
          params: {
            exceptionType: '5',
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        })
        .then((result) => {
          this.exception.exception5 = result.data.data;
        });
        this.$http
        .get('/dust/sitenamecode', {
          params: {
            exceptionType: '6',
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        })
        .then((result) => {
          this.exception.exception6 = result.data.data;
        });



      /* 异常异常数量 */
@@ -1007,6 +972,40 @@
        })
        .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;
        });
    },

@@ -1194,8 +1193,12 @@
      }
    },
    // 表格序号递增
    indexMethod(index) {
    indexMethod1(index) {
      return index + 1 + (this.currentPage - 1) * this.pageSize;
    },
    // 表格序号递增
    indexMethod2(index) {
      return index + 1;
    }
  }
};
@@ -1207,9 +1210,12 @@
    <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"
              isNeedDefaultSite="0"
              @submit-value="(n) => (form.name = n)"
              @submit-site-Nums="(n) => (siteTotal = n)"
            >
@@ -1223,13 +1229,14 @@
          </el-form-item>

          <el-form-item>
            <TimeSelect @submit-time="giveTime"></TimeSelect>
            <TimeSelectWithShortCuts @submit-time="giveTime"></TimeSelectWithShortCuts>
          </el-form-item>
        </div>

        <div class="head-container-search">
          <el-form-item>
            <el-button type="warning" :loading="loading.queryButton" @click="handleSubmit">查询</el-button>
            <!-- <el-button type="warning" :loading="loading.queryButton" @click="handleSubmit">查询</el-button> -->
            <ButtonClick content="分析" type="warning" :loading="loading.queryButton" @do-search="handleSubmit"></ButtonClick>
          </el-form-item>
        </div>
      </el-form>
@@ -1248,13 +1255,286 @@
        <template #header>
          <div class="card-header">异常分析</div>
        </template>
        <el-row :gutter="20">

        
      <el-row :gutter="20" class="card-row" > 
          <el-col :span="6">
            <div class="card-content">
            <div class="card-content-unnormal">
              <!-- 标头 -->
              <div class="card-text1">
                <image class="card-header-image"></image>
                <span class="card-header-text">超标</span>
                <span class="card-header-text">量级突变异常</span>
              </div>

              <div class="card-content-text">
                <el-scrollbar>
             
                <span class="card-exceptionname-text1">异常站点占比:</span>
                <span>{{ exception.exception4.length }} /{{ siteTotal }}</span>
                <span>
                  ({{
                    ((exception.exception4.length / siteTotal) * 100).toFixed(
                      1
                    )
                  }}%)</span
                >
         
                <div class="card-exceptionname-text2"
                  >异常数占比:{{
                    (
                      (exception.exception4Num /
                        (exception.exception0Num +
                          exception.exception1Num +
                          exception.exception2Num +
                          exception.exception3Num+
                          exception.exception4Num+
                          exception.exception5Num+
                          exception.exception6Num+
                          exception.exception7Num
                          )) *
                      100
                    ).toFixed(1)
                  }}%</div
                >
           
            </el-scrollbar>
              </div>
              <hr />
              <!-- 异常的店铺名字 -->
              <div class="card-exception-buttom">
                <el-scrollbar max-height="90px">
                  <DustExceptionText
                  :site-name="item.name"
                   exception-type="4"
                  :begin-time="beginTime"
                  :end-time="endTime"
                    @submit-exception-data="getAbnormalDataByClick"

                    v-for="(item, index) in exception.exception4"
                    :key="item"
                    >{{ item.name }}
                    <span
                      v-if="index < exception.exception4.length - 1"
                      class="text-blank"
                      >,</span
                    >
                  </DustExceptionText>
                </el-scrollbar>
              </div>
              <!-- 结束 -->
            </div>
          </el-col>

          <el-col :span="6">
            <div class="card-content-unnormal">
              <!-- 标头 -->
              <div class="card-text1">
                <image class="card-header-image"></image>
                <span class="card-header-text">临近超标异常</span>
              </div>

              <div class="card-content-text">
                <el-scrollbar>
             
                <span class="card-exceptionname-text1">异常站点占比:</span>
                <span>{{ exception.exception5.length }} /{{ siteTotal }}</span>
                <span>
                  ({{
                    ((exception.exception5.length / siteTotal) * 100).toFixed(
                      1
                    )
                  }}%)</span
                >
         
                <div class="card-exceptionname-text2"
                  >异常数占比:{{
                    (
                      (exception.exception5Num /
                        (exception.exception0Num +
                          exception.exception1Num +
                          exception.exception2Num +
                          exception.exception3Num+
                          exception.exception4Num+
                          exception.exception5Num+
                          exception.exception6Num+
                          exception.exception7Num
                          )) *
                      100
                    ).toFixed(1)
                  }}%</div
                >
           
            </el-scrollbar>
              </div>
              <hr />
              <!-- 异常的店铺名字 -->
              <div class="card-exception-buttom">
                <el-scrollbar max-height="90px">
                  <DustExceptionText
                  :site-name="item.name"
                   exception-type="5"
                  :begin-time="beginTime"
                  :end-time="endTime"
                    @submit-exception-data="getAbnormalDataByClick"

                    v-for="(item, index) in exception.exception5"
                    :key="item"
                    >{{ item.name }}
                    <span
                      v-if="index < exception.exception5.length - 1"
                      class="text-blank"
                      >,</span
                    >
                  </DustExceptionText>
                </el-scrollbar>
              </div>
              <!-- 结束 -->
            </div>
          </el-col>

          <el-col :span="6">
            <div class="card-content-unnormal">
              <!-- 标头 -->
              <div class="card-text1">
                <image class="card-header-image"></image>
                <span class="card-header-text">单日超标次数临界异常</span>
              </div>

              <div class="card-content-text">
                <el-scrollbar>
             
                <span class="card-exceptionname-text1">异常站点占比:</span>
                <span>{{ exception.exception6.length }} /{{ siteTotal }}</span>
                <span>
                  ({{
                    ((exception.exception6.length / siteTotal) * 100).toFixed(
                      1
                    )
                  }}%)</span
                >
         
                <div class="card-exceptionname-text2"
                  >异常数占比:{{
                    (
                      (exception.exception6Num /
                        (exception.exception0Num +
                          exception.exception1Num +
                          exception.exception2Num +
                          exception.exception3Num+
                          exception.exception4Num+
                          exception.exception5Num+
                          exception.exception6Num+
                          exception.exception7Num
                          )) *
                      100
                    ).toFixed(1)
                  }}%</div
                >
           
            </el-scrollbar>
              </div>
              <hr />
              <!-- 异常的店铺名字 -->
              <div class="card-exception-buttom">
                <el-scrollbar max-height="90px">
                  <DustExceptionText
                  :site-name="item.name"
                   exception-type="6"
                  :begin-time="beginTime"
                  :end-time="endTime"
                    @submit-exception-data="getAbnormalDataByClick"

                    v-for="(item, index) in exception.exception6"
                    :key="item"
                    >{{ item.name }}
                    <span
                      v-if="index < exception.exception6.length - 1"
                      class="text-blank"
                      >,</span
                    >
                  </DustExceptionText>
                </el-scrollbar>
              </div>
              <!-- 结束 -->
            </div>
          </el-col>

          <el-col :span="6">
            <div class="card-content-unnormal">
              <!-- 标头 -->
              <div class="card-text1">
                <image class="card-header-image"></image>
                <span class="card-header-text">变化趋势异常</span>
              </div>

              <div class="card-content-text">
                <el-scrollbar>
             
                <span class="card-exceptionname-text1">异常站点占比:</span>
                <span>{{ exception.exception7.length }} /{{ siteTotal }}</span>
                <span>
                  ({{
                    ((exception.exception7.length / siteTotal) * 100).toFixed(
                      1
                    )
                  }}%)</span
                >
         
                <div class="card-exceptionname-text2"
                  >异常数占比:{{
                    (
                      (exception.exception7Num /
                        (exception.exception0Num +
                          exception.exception1Num +
                          exception.exception2Num +
                          exception.exception3Num+
                          exception.exception4Num+
                          exception.exception5Num+
                          exception.exception6Num+
                          exception.exception7Num
                          )) *
                      100
                    ).toFixed(1)
                  }}%</div
                >
           
            </el-scrollbar>
              </div>
              <hr />
              <!-- 异常的店铺名字 -->
              <div class="card-exception-buttom">
                <el-scrollbar max-height="90px">
                  <DustExceptionText
                  :site-name="item.name"
                   exception-type="7"
                  :begin-time="beginTime"
                  :end-time="endTime"
                    @submit-exception-data="getAbnormalDataByClick"

                    v-for="(item, index) in exception.exception7"
                    :key="item"
                    >{{ item.name }}
                    <span
                      v-if="index < exception.exception7.length - 1"
                      class="text-blank"
                      >,</span
                    >
                  </DustExceptionText>
                </el-scrollbar>
              </div>
              <!-- 结束 -->
            </div>
          </el-col>
        </el-row>


        <el-row :gutter="20" >
          <el-col :span="6">
            <div class="card-content-normal">
              <!-- 标头 -->
              <div class="card-text1">
                <image class="card-header-image"></image>
                <span class="card-header-text">浓度超标</span>
              </div>

              <div class="card-content-text">
@@ -1270,17 +1550,23 @@
                  }}%)</span
                >
         
                <span class="card-exceptionname-text2"
                <div class="card-exceptionname-text2"
                  >异常数占比:{{
                    (
                      (exception.exception2Num /
                        (exception.exception0Num +
                          exception.exception1Num +
                          exception.exception2Num +
                          exception.exception3Num)) *
                          exception.exception3Num+
                          exception.exception4Num+
                          exception.exception5Num+
                          exception.exception6Num+
                          exception.exception7Num
                          
                          )) *
                      100
                    ).toFixed(1)
                  }}%</span
                  }}%</div
                >
           
            </el-scrollbar>
@@ -1288,7 +1574,7 @@
              <hr />
              <!-- 异常的店铺名字 -->
              <div class="card-exception-buttom">
                <el-scrollbar max-height="100px">
                <el-scrollbar max-height="90px">
                  <DustExceptionText
                  :site-name="item.name"
                   exception-type="2"
@@ -1311,11 +1597,11 @@
            </div>
          </el-col>
          <el-col :span="6"
            ><div class="card-content">
            ><div class="card-content-normal">
              <!-- 标头 -->
              <div class="card-text1">
                <image class="card-header-image"></image>
                <span class="card-header-text">断电或断网</span>
                <span class="card-header-text">数据缺失异常</span>
              </div>

              <div class="card-content-text">
@@ -1329,24 +1615,28 @@
                    )
                  }}%)</span
                >
                <span class="card-exceptionname-text2"
                <div class="card-exceptionname-text2"
                  >异常数占比:{{
                    (
                      (exception.exception0Num /
                        (exception.exception0Num +
                          exception.exception1Num +
                          exception.exception2Num +
                          exception.exception3Num)) *
                          exception.exception3Num+
                          exception.exception4Num+
                          exception.exception5Num+
                          exception.exception6Num+
                          exception.exception7Num)) *
                      100
                    ).toFixed(1)
                  }}%</span
                  }}%</div
                >
                </el-scrollbar>
              </div>
              <hr />
              <!-- 异常的店铺名字 -->
              <div class="card-exception-buttom">
                <el-scrollbar max-height="100px">
                <el-scrollbar max-height="90px">
                  <DustExceptionText
                  :site-name="item.name"
                   exception-type="0"
@@ -1369,7 +1659,7 @@
            </div>
          </el-col>
          <el-col :span="6">
            <div class="card-content">
            <div class="card-content-normal">
              <!-- 标头 -->
              <div class="card-text1">
                <image class="card-header-image"></image>
@@ -1387,24 +1677,28 @@
                    )
                  }}%)</span
                >
                <span class="card-exceptionname-text2"
                <div class="card-exceptionname-text2"
                  >异常数占比:{{
                    (
                      (exception.exception1Num /
                        (exception.exception0Num +
                          exception.exception1Num +
                          exception.exception2Num +
                          exception.exception3Num)) *
                          exception.exception3Num+
                          exception.exception4Num+
                          exception.exception5Num+
                          exception.exception6Num+
                          exception.exception7Num)) *
                      100
                    ).toFixed(1)
                  }}%</span
                  }}%</div
                >
                </el-scrollbar>
              </div>
              <hr />
              <!-- 异常的店铺名字 -->
              <div class="card-exception-buttom">
                <el-scrollbar max-height="100px">
                <el-scrollbar max-height="90px">
                  <DustExceptionText
                  :site-name="item.name"
                   exception-type="1"
@@ -1427,7 +1721,7 @@
            </div></el-col
          >
          <el-col :span="6"
            ><div class="card-content">
            ><div class="card-content-normal">
              <!-- 标头 -->
              <div class="card-text1">
                <image class="card-header-image"></image>
@@ -1445,40 +1739,97 @@
                    )
                  }}%)</span
                >
                <span class="card-exceptionname-text2"
                <div class="card-exceptionname-text2"
                  >异常数占比:{{(100-
                    
                      ((exception.exception0Num /
                        (exception.exception0Num +
                          exception.exception1Num +
                          exception.exception2Num +
                          exception.exception3Num)) *
                          exception.exception3Num+
                          exception.exception4Num+
                          exception.exception5Num+
                          exception.exception6Num+
                          exception.exception7Num)) *
                      100
                    ) - 
                    ((exception.exception1Num /
                        (exception.exception0Num +
                          exception.exception1Num +
                          exception.exception2Num +
                          exception.exception3Num)) *
                          exception.exception3Num+
                          exception.exception4Num+
                          exception.exception5Num+
                          exception.exception6Num+
                          exception.exception7Num)) *
                      100
                    ) - 
                    ((exception.exception2Num /
                        (exception.exception0Num +
                          exception.exception1Num +
                          exception.exception2Num +
                          exception.exception3Num)) *
                          exception.exception3Num+
                          exception.exception4Num+
                          exception.exception5Num+
                          exception.exception6Num+
                          exception.exception7Num)) *
                      100
                    ) - 
                    ((exception.exception4Num /
                        (exception.exception0Num +
                          exception.exception1Num +
                          exception.exception2Num +
                          exception.exception3Num+
                          exception.exception4Num+
                          exception.exception5Num+
                          exception.exception6Num+
                          exception.exception7Num)) *
                      100
                    )- 
                    ((exception.exception5Num /
                        (exception.exception0Num +
                          exception.exception1Num +
                          exception.exception2Num +
                          exception.exception3Num+
                          exception.exception4Num+
                          exception.exception5Num+
                          exception.exception6Num+
                          exception.exception7Num)) *
                      100
                    )- 
                    ((exception.exception6Num /
                        (exception.exception0Num +
                          exception.exception1Num +
                          exception.exception2Num +
                          exception.exception3Num+
                          exception.exception4Num+
                          exception.exception5Num+
                          exception.exception6Num+
                          exception.exception7Num)) *
                      100
                    )- 
                    ((exception.exception7Num /
                        (exception.exception0Num +
                          exception.exception1Num +
                          exception.exception2Num +
                          exception.exception3Num+
                          exception.exception4Num+
                          exception.exception5Num+
                          exception.exception6Num+
                          exception.exception7Num)) *
                      100
                    )


                    ).toFixed(1)
                  }}%</span
                  }}%</div
                >
               </el-scrollbar>
              </div>
              <hr />
              <!-- 异常的店铺名字 -->
              <div class="card-exception-buttom">
                <el-scrollbar max-height="100px">
                <el-scrollbar max-height="90px">
                  <DustExceptionText
                  :site-name="item.name"
                   exception-type="3"
@@ -1500,7 +1851,10 @@
              <!-- 结束 -->
            </div>
          </el-col>
        </el-row>
      </el-row>



      </el-card>
    </el-col>
  </el-row>
@@ -1511,7 +1865,7 @@
        ref="table"
        :data="displayData"
        :height="tableHeight"
        highlight-current-row="true"
        :highlight-current-row="true"
        size="default"
        v-loading="loading.tableLoading"
        border
@@ -1522,7 +1876,7 @@
          width="60px"
          align="center"
          fixed
          :index="indexMethod"
          :index="indexMethod1"
        />
        <el-table-column prop="name" label="站点名称" show-overflow-tooltip />
        <el-table-column
@@ -1607,8 +1961,12 @@
    <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>
          <span v-if="tableCurrentRowData.exceptionType == '0'"
            >断电或断网</span
@@ -1620,6 +1978,17 @@
          <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 }} ~
@@ -1664,7 +2033,7 @@
          width="60px"
          align="center"
          fixed
          :index="indexMethod"
          :index="indexMethod2"
        ></el-table-column>
        <el-table-column
          fixed
@@ -1709,7 +2078,8 @@
          v-show="
            tableCurrentRowData.exceptionType == '1' ||
            tableCurrentRowData.exceptionType == '2' ||
            tableCurrentRowData.exceptionType == '3'
            tableCurrentRowData.exceptionType == '3' ||
            tableCurrentRowData.exceptionType == '4' 
          "
          >异常数据：</span
        >
@@ -1746,6 +2116,8 @@
}
/* 条件查询模块结束 */



/* 异常分析模块的样式 */
.card-text1 {
  // 黑体的异常名字部分
@@ -1764,9 +2136,14 @@
  font-size: 18px;
  font-weight: bold;
}
.card-content {
.card-content-unnormal {
  min-height: 200px;
  border: 2px solid #9fdb1d;
  border: 2px solid #FFCF8B;
  border-radius: 20px;
}
.card-content-normal {
  min-height: 200px;
  border: 2px solid red;
  border-radius: 20px;
}
.card-header-image {
@@ -1788,7 +2165,7 @@

.card-exceptionname-text2 {
  // 异常数占比的外边距
  margin-left: 50px;
  // margin-left: 50px;
  font-size: 14px;
  white-space: nowrap;
}
@@ -1797,16 +2174,22 @@
  margin-right: 10px;
  color: #000000;
}
.card-row {
  margin-bottom: 10px;
}

/* 异常分析模块结束 */

/* 表格模块的样式 */

/* 表格模块结束 */





/* 查看详情对话框模块的样式 */
:deep(.el-dialog) {
  // 对话框高度
}

.diag-head {
  // 对话框头部区域
  min-height: 200px;
@@ -1818,7 +2201,7 @@
}
.diag-head-text span:nth-child(2) {
  // 对话框头部‘异常类型’属性
  margin-left: 150px;
  // margin-left: 150px;
}
.diag-head-text > div {
  // 对话框异常时间段
@@ -1831,19 +2214,15 @@
  border: 2px solid #7bc0fc;
}
.chart-jump-button {
  // ‘上一条’，‘下一条’ 按钮
  // border: 1px solid #fdc2db;
  min-height: 30px;
  width: 200px;
  float: right;
  display: flex;
  justify-content: right;
}

.line-chart {
  // 异常折线图
  width: 920px;
  height: 300px;
  margin-bottom: 20px;
  min-width: 600px;
.mx-1 {
  position: absolute;
  left: 10px;
  bottom: 10px;

}
/* 查看详情对话框模块结束 */
</style>