0ecf7b3bc6d6a008a804d55c859833bf2cf6473a..dd5fbe2e6cacffa0ff67f0f68c262d14ddfce3cc
2023-11-24 riku
1.修复指标排名界面的排序换页后重置的问题
dd5fbe 对比 | 目录
2023-11-24 zmc
1.修改了统计异常类型聚集度的具体异常个数的逻辑
e7ce28 对比 | 目录
2023-11-24 zmc
1.修改了飞行巡检的异常聚集度和复现率的描述,当具体异常数为0时,不显示该异常描述。 2.修改低中高风险文字 对应的绿黄红颜色 3.调整了跳转到飞行巡...
f7373a 对比 | 目录
2023-11-23 zmc
1.修改了数据风险排名中的按钮加载结束逻辑
c02c01 对比 | 目录
2023-11-23 zmc
1.修改了风险模型页面有效率,在线率的展示百分比 2.站点审核辅助页面增加了标识
2162de 对比 | 目录
2023-11-23 zmc
1. 修改了风险模型的统计信息的函数
03094b 对比 | 目录
2023-11-23 zmc
1.增加了风险模型的跳转逻辑 2.增加了风险模型的组件
0825e9 对比 | 目录
2023-11-23 zmc
1.增加了风险模型跳转逻辑 2.修改了风险模型页面部分逻辑
cc890f 对比 | 目录
2023-11-23 riku
修改指标排序界面相关逻辑
348d29 对比 | 目录
2023-11-23 zmc
1.修改了雷达图传入的数据 2.数据指标排名一进来按日均值倒序排列 3.修改了一些局部的样式
43c2f5 对比 | 目录
2023-11-22 zmc
1.修改了请求网址的路径 2.修改了路由
ab5ba1 对比 | 目录
2023-11-22 zmc
1.用import异常图标 2.修改飞行巡检的时间格式 3.修改了部分网络请求为api函数形式
82541a 对比 | 目录
2023-11-22 zmc
1.用import异常图标 2.修改飞行巡检的时间格式 3.修改了部分网络请求为api函数形式
cef659 对比 | 目录
2023-11-22 zmc
1. 传递相对路径 2.使用循环展示异常卡片 3.飞行巡检写成组件
a96912 对比 | 目录
已修改22个文件
已删除2个文件
已添加5个文件
8082 ■■■■■ 文件已修改
src/api/exceptionApi.js 22 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/api/index.js 19 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/api/site/siteDataApi.js 14 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/api/site/siteInfo.js 22 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/api/statistic/statisticApi.js 27 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/layout/AppAside.vue 23 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/main.js 7 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/router/index.js 32 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/sfc/ExceptionType.vue 24 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/sfc/InputSearch.vue 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/sfc/ScenarioType.vue 4 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/utils/chartFunction/exceptionOption.js 36 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/utils/chartFunction/lineChart.js 50 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/utils/common.js 214 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/utils/risk_estimate_common_function/index.js 33 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/utils/risk_estimate_common_function/riskValue.js 6 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/exception/FlightInspection.vue 1498 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/exception/SiteAuditAssistance.vue 52 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/exception/components/AnalysisCard.vue 6 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/exception/components/CompFlightInspection.vue 1408 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/exception/components/SubFlightInspection.vue 1847 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/risk_assessment/DataIndexRank.vue 302 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/risk_assessment/DataRiskModel.vue 729 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/risk_assessment/DataRiskRank.vue 470 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/risk_assessment/SiteComprehensiveRskRanking.vue 371 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/risk_assessment/components/CompDataRiskModel.vue 787 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/risk_assessment/components/DustRadarChart.vue 33 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/risk_assessment/components/SiteDetail.vue 41 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/risk_assessment/components/subRiskModel.vue 3 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/api/exceptionApi.js
@@ -42,6 +42,10 @@
  /**
   *
   * @param {*} siteName
@@ -63,7 +67,11 @@
  },
  
/**
 * èŽ·å–æ‰€æœ‰çš„ç‚¹ä½åç§°å’Œå¯¹åº”çš„è®¾å¤‡ç¼–å·
 * @param:
 * @returns:
 */
  getSitesNum() {
    return $http.get('/dust/sitename')
  },
@@ -79,5 +87,15 @@
      params.exceptionType = temp
    }
    return $http.get('/dust/exceptionsSiteName', { params: params })
  }
  },
  /**
   * æŸ¥è¯¢ä¸åŒçš„异常类型
   * @param:
   * @returns:
   */
  queryExceptionType(){
    return $http.get('/dust/exceptiontype')
  },
}
src/api/index.js
@@ -1,26 +1,25 @@
import axios from 'axios';
import { setInterceptors } from './config';
import axios from 'axios'
import { setInterceptors } from './config'
// const url = 'http://localhost:8081/';
// éƒ¨ç½²
const url = 'http://114.215.109.124:8803/';
// const url = 'http://192.168.1.8:8081/';
// const url = 'http://192.168.0.123:8081/'
//飞羽监管
const $http = axios.create({
  baseURL: url,
  timeout: 10000
});
})
/* Python后台 */
const url_py = 'http://127.0.0.1:8089/'
const $http_py = axios.create({
  baseURL: url_py,
  timeout: 10000
});
//添加拦截器
setInterceptors($http,$http_py);
})
export { $http,$http_py};
//添加拦截器
setInterceptors($http, $http_py)
export { $http, $http_py, url }
src/api/site/siteDataApi.js
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,14 @@
import {$http} from '@/api/index.js'
export default {
   /**
   *  æ ¹æ®è®¾å¤‡ç¼–码查询该站点信息
   */
  queryHistoryData() {
    // return $http.get('/dust/history1',{ params: params })
  }
}
src/api/site/siteInfo.js
@@ -2,6 +2,7 @@
import {$http} from '@/api/index.js'
export default {
   /**
   *  æ ¹æ®è®¾å¤‡ç¼–码查询该站点信息
   */
@@ -10,17 +11,38 @@
    params.mnCode = mnCode
    return $http.get('/dust/siteInfo/info',{params:params})
  },
  /**
   *  æŸ¥è¯¢æ‰€æœ‰çš„运维商
   */
  queryDutyCompany() {
    return $http.get('/dust/siteInfo/dutyCompany')
  },
   /**
   *  æ ¹æ®åœ°å€æŸ¥è¯¢è¡—道
   */
  queryStreet(street) {
     return $http.get('/dust/siteInfo/street',{params:{street:street}})
  },
  /**
   * èŽ·å–ä¸åŒçš„å¼‚å¸¸ç±»åž‹
   */
  queryScenarioTypeName(){
    return $http.get('/dust/scenario')
  },
  /**
   * æ ¹æ®ç‚¹ä½åå­—查询对应的设备编号
   * @param:
   * @returns:
   */
  queryMnCode(siteName){
    return $http.get('/dust/siteInfo/mncode',{params:{siteName:siteName}})
  }
}
src/api/statistic/statisticApi.js
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,27 @@
import { $http } from '@/api/index.js'
export default {
  /**
   * æŒ‰ç…§è‡ªå®šä¹‰æŽ’序获取日统计数据
   */
  fetchDayStatisticByOrder({
    page,
    pageSize,
    siteName = '',
    beginTime = null,
    endTime = null,
    orderProp,
    asc = true
  }) {
    let params = {
      page: page,
      pageSize: pageSize,
      siteName: siteName,
      beginTime: beginTime,
      endTime: endTime,
      orderProp: orderProp,
      asc: asc
    }
    return $http.get('/dust/analysistime', { params: params })
  }
}
src/components/layout/AppAside.vue
@@ -74,26 +74,23 @@
            æ•°æ®é£Žé™©æ¨¡åž‹
          </el-menu-item>
          <el-menu-item index="/analysis" v-show="menu[1].avalue" @click="changeIcon(1)">
            <img src="@/assets/generalModel.png" height="23">
            æ•°æ®æŽ’名清单
          </el-menu-item>
          <el-menu-item index="/analysis" v-show="!menu[1].avalue" @click="changeIcon(1)">
            <!-- <el-icon><i-ep-Stopwatch /></el-icon> -->
            <img src="@/assets/generalModel2.png" height="23">
            æ•°æ®æŽ’名清单
          </el-menu-item>
          <el-menu-item index="/riskrank"  v-show="menu[2].avalue" @click="changeIcon(2)">
            <img src="@/assets/generalModel.png" height="23">
            ç»¼åˆé£Žé™©æŽ’名
            æ•°æ®é£Žé™©æŽ’名
          </el-menu-item>
          <el-menu-item index="/riskrank"  v-show="!menu[2].avalue" @click="changeIcon(2)">
            <img src="@/assets/generalModel2.png" height="23">
            ç»¼åˆé£Žé™©æŽ’名
            æ•°æ®é£Žé™©æŽ’名
          </el-menu-item>
          <el-menu-item index="/analysis" v-show="menu[1].avalue" @click="changeIcon(1)">
            <img src="@/assets/generalModel.png" height="23">
            æ•°æ®æŒ‡æ ‡æŽ’名
          </el-menu-item>
          <el-menu-item index="/analysis" v-show="!menu[1].avalue" @click="changeIcon(1)">
            <img src="@/assets/generalModel2.png" height="23">
            æ•°æ®æŒ‡æ ‡æŽ’名
          </el-menu-item>
        </el-sub-menu>
src/main.js
@@ -10,6 +10,8 @@
import 'element-plus/theme-chalk/src/index.scss'
import { createPinia } from 'pinia'
import {url} from '@/api/index.js'
const app = createApp(App)
const pinia = createPinia()
@@ -27,14 +29,13 @@
})
// éƒ¨ç½²
axios.defaults.baseURL = url
// æœ¬åœ°
// axios.defaults.baseURL = 'http://localhost:8081'
// éƒ¨ç½²
axios.defaults.baseURL = 'http://114.215.109.124:8803'
// axios.defaults.baseURL = 'http://192.168.1.8:8081'
app.config.globalProperties.$http = axios
src/router/index.js
@@ -17,20 +17,20 @@
          component: () => import('@/views/risk_assessment/DataRiskModel.vue')
        },
        //  æ•°æ®é£Žé™©æŽ’名
        //  æ•°æ®æŒ‡æ ‡æŽ’名
        {
          path: '/analysis',
          name: 'analysis',
          meta: { title: '数据风险排名', keepAlive: true },
          component: () => import('@/views/risk_assessment/DataRiskRank.vue')
          meta: { title: '数据指标排名', keepAlive: true },
          component: () => import('@/views/risk_assessment/DataIndexRank.vue')
        },
        //  æ•°æ®é£Žé™©æŽ’名
        {
          path: '/riskrank',
          name: 'riskrank',
          meta: { title: '综合风险排名', keepAlive: true },
          component: () => import('@/views/risk_assessment/SiteComprehensiveRskRanking.vue')
          meta: { title: '数据风险排名', keepAlive: true },
          component: () => import('@/views/risk_assessment/DataRiskRank.vue')
        },
        // é£žè¡Œå·¡æ£€
@@ -79,14 +79,6 @@
          component: () => import('@/views/setting/SetConfiguration.vue')
        },
        //  é£Žé™©æ¨¡åž‹åµŒå…¥è¿‡æ¸¡é¡µé¢
        {
          path: '/detail/:siteName/:month/:titleName',
          name: 'RiskModelDetail',
          meta: { title: '站点具体信息', transition: 'slide-left' },
          component: () => import('@/views/risk_assessment/components/SiteDetail.vue')
        },
        // é£Žé™©æ¨¡åž‹åµŒå…¥
        {
          path: '/subRiskModel',
@@ -94,8 +86,8 @@
          meta: { title: '风险模型嵌入' },
          component: () => import('@/views/risk_assessment/components/SubRiskModel.vue')
        },
        // å®¡æ ¸è¾…助嵌入过渡页面
        {
          path: '/AuditDetail/:beginTime/:endTime/:exceptionType',
@@ -114,7 +106,7 @@
        // å¼‚常详情嵌入过渡页面
        {
          path: '/exceptionDetail/:siteName/:month/',
          path: '/exceptionDetail/:siteName/:time/:timeType/:jumpPage',
          name: 'exceptionDetail',
          meta: { title: '异常具体信息', transition: 'slide-left' },
          component: () => import('@/views/risk_assessment/components/SiteDetail.vue')
@@ -122,11 +114,11 @@
        // å¼‚常详情嵌入
        {
          path: '/SubFlightInspection',
          name: 'SubFlightInspection',
          path: '/CompFlightInspection',
          name: 'CompFlightInspection',
          meta: { title: '异常详情嵌入' },
          component: () => import('@/views/exception/components/SubFlightInspection.vue')
        },
          component: () => import('@/views/exception/components/CompFlightInspection.vue')
        }
      ]
    },
src/sfc/ExceptionType.vue
@@ -8,6 +8,7 @@
-->
<script>
import exceptionApi from '@/api/exceptionApi.js'
export default {
  props: {
    // ç¦ç”¨
@@ -37,7 +38,6 @@
  mounted() {
    this.$watch(() => [this.exception], () => {
      if (this.exception != -1) {
        console.log('异常类型:',this.exception)
        this.checkedList.push(this.exception) 
      }
      
@@ -47,19 +47,23 @@
  methods: {
    // èŽ·å–ä¸åŒçš„å¼‚å¸¸åç§°
    getExceptionType() {
      this.$http.get('/dust/exceptiontype').then((response) => {
        // this.exceptionType = response.data.data
        response.data.data.forEach((item) => {
          this.exceptionType.push(item.exceptionType)
        })
        // console.log('获取到的异常类型:',this.exceptionType);
      // exceptionApi.queryExceptionType().then((response) => {
      //   response.data.data.forEach((item) => {
      //     this.exceptionType.push(item.exceptionType)
      //   })
      //   let a = ['0', '1', '2', '3', '4', '5', '6', '7','8']
      //   a.forEach((item) => {
      //     if (this.exceptionType.indexOf(item) == -1) {
      //       this.exceptionType.push(item)
      //     }
      //   })
      // })
        let a = ['0', '1', '2', '3', '4', '5', '6', '7','8']
        a.forEach((item) => {
          if (this.exceptionType.indexOf(item) == -1) {
            this.exceptionType.push(item)
          }
        })
      })
    },
    handleCheckAllChange(val) {
      this.checkedList = val ? this.exceptionType : []
src/sfc/InputSearch.vue
@@ -138,7 +138,7 @@
        })
    }else if(this.isNeedRealTimeAdvice == '0'){
      this.$http.get('/dust/sitename').then((response) => {
      exceptionApi.getSitesNum().then((response) => {
        const sites = response.data.data
        sites.filter((item) => {
          this.siteNames.push(item['name'])
src/sfc/ScenarioType.vue
@@ -8,6 +8,7 @@
    <ScenarioType @submitScenarioType="(val) => (scenarioType = val)"> </ScenarioType>
-->
<script>
import siteInfo from '@/api/site/siteInfo.js'
export default {
  emits:['submitScenarioType'],
  data() {
@@ -21,9 +22,8 @@
  methods: {
    //获取不同的异常类型
    getScenarioTypeName() {
      this.$http.get('/dust/scenario').then(result => {
      siteInfo.queryScenarioTypeName().then(result => {
        this.scenarioType = result.data.data
      });
    }
    //根据异常个数渲染checkbox
src/utils/chartFunction/exceptionOption.js
@@ -17,6 +17,7 @@
    endIndex,
    exceptionName,
    areaObj,
    lineColor,
    exceptionType
  ) {
    switch (exceptionType) {
@@ -65,7 +66,8 @@
          exceptionName
        )
      case '8':
        return this.validOption(xData, yData, exceptionName, areaObj)
        console.log('传进来',lineColor)
        return this.validOption(xData, yData, exceptionName, areaObj,lineColor)
    }
  },
@@ -564,7 +566,7 @@
   * @param:
   * @returns:
   */
  validOption(xData, yData, exceptionName, areaObj) {
  validOption(xData, yData, exceptionName, areaObj,lineColor) {
    return {
      title: {
        text: exceptionName,
@@ -577,9 +579,6 @@
      toolbox: {
        // å·¥å…·æ 
        feature: {
          // dataZoom: {
          //   yAxisIndex: 'none'
          // },
          // ä¿å­˜ä¸ºå›¾ç‰‡
          saveAsImage: {}
        }
@@ -622,7 +621,32 @@
            data: areaObj
          }
        }
      ]
      ],
      // æŒ‡å®šæ—¶é—´åŒºé—´çš„线段变颜色
      // visualMap: {
      //   show: false,
      //   dimension: 0,
      //   // pieces: [
      //   //   {
      //   //     lte: beginIndex,
      //   //     color: 'green'
      //   //   },
      //   //   {
      //   //     gt: beginIndex,
      //   //     lte: endIndex,
      //   //     color: 'red'
      //   //   },
      //   //   {
      //   //     gt: endIndex,
      //   //     lte: xData.length - 1,
      //   //     color: 'green'
      //   //   }
      //   // ],
      //   pieces: lineColor
      // }
    }
  }
}
src/utils/chartFunction/lineChart.js
@@ -46,9 +46,10 @@
      if (tempData) {
        xData.push(tempData.lst)
        yAvg.push(tempData.dayAvg)
        yOnline.push(this.deleteLastStr(tempData.dayOnline))
        yValid.push(this.deleteLastStr(tempData.dayValid))
        yExceed.push(this.deleteLastStr(tempData.dayExceeding))
        yOnline.push(tempData.dayOnline)
        yValid.push(tempData.dayValid)
        yExceed.push(tempData.dayExceeding)
        continue
      }
@@ -118,7 +119,7 @@
   * @param: 2维数组
   * @returns:
   */
  getMarkArea(timeInteval,describe='无数据') {
  getMarkArea(timeInteval, describe = '无数据') {
    let result = []
    for (let i = 0; i < timeInteval.length; i++) {
      let temp = []
@@ -163,5 +164,46 @@
   */
  deleteLastStr(valueStr) {
    return valueStr.slice(0, -1)
  },
  /**
   * æŒ‡å®šæ—¶é—´åŒºé—´çš„线段变颜色
   * @param:
   * @returns:
   */
  getLineColor(timeInteval, xList) {
    let result = []
    // åªå–
    let temp = []
    for (let i = 0; i < timeInteval.length; i++) {
      if (timeInteval[i][0] != timeInteval[i][1]) {
        temp.push(timeInteval[i])
      }
    }
    // æ— è¿žç»­çš„æ•°æ® ç›´æŽ¥é€€å‡º
    if (temp.length == 0) {
      return []
    }
    // å–第一个连续的时段
    result.push([
      {
        lte: temp[0][0],
        color: 'green'
      },
      {
        gt: temp[0][0],
        lte: temp[0][1],
        color: 'red'
      },
      {
        gt: temp[0][1],
        lte: xList[xList.length - 1],
        color: 'green'
      }
    ])
    return result[0]
  }
}
src/utils/common.js
@@ -1,113 +1,119 @@
import * as XLSX from 'xlsx/xlsx.mjs';
export function useCommonFunction(){
    /**
     * description:判断起始时间跨度是否超过1个月
     * @param: å¼€å§‹æ—¶é—´ï¼Œç»“束时间
     * @createTime:2023-08-18
     * @returns:超过一个月返回true,不超过一个月则返回false
     */
import * as XLSX from 'xlsx/xlsx.mjs'
import dayjs from 'dayjs'
    function isExceedOneMonth(dateStr1, dateStr2) {
        // è¶…过一个月,返回True,否则返回False
        // å°†æ—¥æœŸå­—符串转为日期对象
        const date1 = new Date(dateStr1);
        const date2 = new Date(dateStr2);
        // èŽ·å–ä¸¤ä¸ªæ—¥æœŸçš„å¹´ã€æœˆã€æ—¥
        const year1 = date1.getFullYear();
        const month1 = date1.getMonth();
        const day1 = date1.getDate();
        const year2 = date2.getFullYear();
        const month2 = date2.getMonth();
        const day2 = date2.getDate();
        // åˆ¤æ–­ä¸¤ä¸ªæ—¥æœŸæ˜¯å¦ç›¸å·®ä¸€ä¸ªæœˆ
        if (year1 === year2) {
          // å¹´ä»½ç›¸ç­‰ï¼Œæ¯”较月份差值
          if (Math.abs(month1 - month2) === 1) {
            // æœˆä»½å·®å€¼ä¸º1,还需要判断具体日期
            if (
              (month1 < month2 && day1 < day2) ||
              (month1 > month2 && day1 > day2)
            ) {
              return true;
            }
          }
        } else if (Math.abs(year1 - year2) === 1) {
          // å¹´ä»½å·®å€¼ä¸º1,比较月份和日期
          if (
            (year1 < year2 && month1 === 11 && month2 === 0 && day1 < day2) ||
            (year1 > year2 && month1 === 0 && month2 === 11 && day1 > day2)
          ) {
            return true;
          }
export function useCommonFunction() {
  /**
   * description:判断起始时间跨度是否超过1个月
   * @param: å¼€å§‹æ—¶é—´ï¼Œç»“束时间
   * @createTime:2023-08-18
   * @returns:超过一个月返回true,不超过一个月则返回false
   */
  function isExceedOneMonth(dateStr1, dateStr2) {
    // è¶…过一个月,返回True,否则返回False
    // å°†æ—¥æœŸå­—符串转为日期对象
    const date1 = new Date(dateStr1)
    const date2 = new Date(dateStr2)
    // èŽ·å–ä¸¤ä¸ªæ—¥æœŸçš„å¹´ã€æœˆã€æ—¥
    const year1 = date1.getFullYear()
    const month1 = date1.getMonth()
    const day1 = date1.getDate()
    const year2 = date2.getFullYear()
    const month2 = date2.getMonth()
    const day2 = date2.getDate()
    // åˆ¤æ–­ä¸¤ä¸ªæ—¥æœŸæ˜¯å¦ç›¸å·®ä¸€ä¸ªæœˆ
    if (year1 === year2) {
      // å¹´ä»½ç›¸ç­‰ï¼Œæ¯”较月份差值
      if (Math.abs(month1 - month2) === 1) {
        // æœˆä»½å·®å€¼ä¸º1,还需要判断具体日期
        if ((month1 < month2 && day1 < day2) || (month1 > month2 && day1 > day2)) {
          return true
        }
        // é»˜è®¤è¿”回false,表示两个日期字符串不相差一个月
        return false;
      }
      /**
     * ç™¾åˆ†å·æ¯”较大小
     * @param: a是否大于b
     * @returns:大于,则返回true。否则返回false
     */
      function cmpp(a, b) {
        return Number(a.replace('%', '')) >= Number(b.replace('%', ''));
    } else if (Math.abs(year1 - year2) === 1) {
      // å¹´ä»½å·®å€¼ä¸º1,比较月份和日期
      if (
        (year1 < year2 && month1 === 11 && month2 === 0 && day1 < day2) ||
        (year1 > year2 && month1 === 0 && month2 === 11 && day1 > day2)
      ) {
        return true
      }
    }
      /**
     *导出为excel
     * @param: è¡¨æ ¼æ•°æ®ï¼Œå¾…导出的表格列,excel列,excel文件名
     * @returns
     */
     function exportToExcel(exportData,tableColumns,excelColumnsName,excelName='data.xlsx'){
      const itemsFormatted = exportData.map((item) => {
        const newItem = {};
        tableColumns.forEach((col) => {
          newItem[col] = item[col];
        });
        return newItem;
      });
      // åˆ›å»ºxlsx对象
      const xls = XLSX.utils.json_to_sheet(itemsFormatted);
     // ç¼–辑表头行       ä¿®æ”¹è¡¨å¤´
      excelColumnsName.forEach(item =>{
        xls[item[0]].v = item[1]
    // é»˜è®¤è¿”回false,表示两个日期字符串不相差一个月
    return false
  }
  /**
   * ç™¾åˆ†å·æ¯”较大小
   * @param: a是否大于b
   * @returns:大于,则返回true。否则返回false
   */
  function cmpp(a, b) {
    return Number(a.replace('%', '')) >= Number(b.replace('%', ''))
  }
  /**
   *导出为excel
   * @param: è¡¨æ ¼æ•°æ®ï¼Œå¾…导出的表格列,excel列,excel文件名
   * @returns
   */
  function exportToExcel(exportData, tableColumns, excelColumnsName, excelName = 'data.xlsx') {
    const itemsFormatted = exportData.map((item) => {
      const newItem = {}
      tableColumns.forEach((col) => {
        newItem[col] = item[col]
      })
      // åˆ›å»ºworkbook,并把sheet添加进去
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, xls, 'Sheet1');
      // å°†workbook转为二进制xlsx文件并下载
      XLSX.writeFile(wb, excelName);
    }
      return newItem
    })
    // åˆ›å»ºxlsx对象
    const xls = XLSX.utils.json_to_sheet(itemsFormatted)
     /**
     * 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
     */
     function  descFiftyTime(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;
    }
    // ç¼–辑表头行       ä¿®æ”¹è¡¨å¤´
    excelColumnsName.forEach((item) => {
      xls[item[0]].v = item[1]
    })
    // åˆ›å»ºworkbook,并把sheet添加进去
    const wb = XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(wb, xls, 'Sheet1')
    // å°†workbook转为二进制xlsx文件并下载
    XLSX.writeFile(wb, excelName)
  }
    return {isExceedOneMonth,cmpp,exportToExcel,descFiftyTime}
  /**
   * 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
   */
  function descFiftyTime(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
  }
  /**
   * æ ¼å¼åŒ–为百分号
   * @param {*} v
   * @returns
   */
  function percentFormatter(v) {
    return Math.round(v * 100, 2) + '%'
  }
  return { isExceedOneMonth, cmpp, exportToExcel, descFiftyTime, percentFormatter }
}
src/utils/risk_estimate_common_function/index.js
@@ -44,9 +44,10 @@
      }
      // è®¡ç®—平均值,在线率,有效率,超标率
      sumAvg = sumAvg + item.dayAvg
      sumOnline = sumOnline + Number(item.dayOnline.slice(0, -1))
      sumValid = sumValid + Number(item.dayValid.slice(0, -1))
      sumExceeding = sumExceeding + Number(item.dayExceeding.slice(0, -1))
      sumOnline = sumOnline + Number(item.dayOnline)
      sumValid = sumValid + Number(item.dayValid)
      sumExceeding = sumExceeding + Number(item.dayExceeding)
    })
    // è®¡ç®—均值
    avg = sumAvg / dayDiff
@@ -109,8 +110,8 @@
      if (exception.length == 0) {
        exception.push(item.exceptionType)
      }
      // ä¿å­˜æ–°çš„异常类型
      else if (exception.indexOf(item.exceptionType) == -1) {
      // ä¿å­˜æ–°çš„异常类型 æ•°æ®è¶…低、长时间无波动等两类异常暂不纳入分析
      else if ( item.exceptionType!='1' && item.exceptionType!='3' && exception.indexOf(item.exceptionType) == -1) {
        exception.push(item.exceptionType)
      }
    })
@@ -137,15 +138,33 @@
      default:
        return 'error'
    }
    exceptionTypeAggregation = (exception.length / 8).toFixed(2)
    // æ•°æ®è¶…低、长时间无波动等两类异常暂不纳入分析
    exceptionTypeAggregation = (exception.length / 6).toFixed(2)
    let obj = {}
    obj['exceptionRecurrence'] = exceptionTyprRecurRate
    obj['exceptionTypeAggregation'] = exceptionTypeAggregation
    if(exception.length>0){
      // ä¿å­˜è¯¥æ—¶æ®µå‡ºçŽ°çš„å¼‚å¸¸
      obj['exception'] = exception.length
    }else{
      obj['exception'] = 0
    }
    // ä¸‰ç±»å¼‚常出现的次数
    obj['mutationCount'] = mutationCount
    obj['exceedingNearCount'] = exceedingNearCount
    obj['exceedingCriticalDegree'] = exceedingCriticalDegree
    return obj
  },
  // å‚数:对象数组(该对象中的属性不能是引用类型,否则拷贝的值还是会相互影响)
  // åŠŸèƒ½ï¼šæ‹·è´è¯¥å¯¹è±¡æ•°ç»„ã€‚
  shallowCopyList(val) {
src/utils/risk_estimate_common_function/riskValue.js
@@ -63,19 +63,19 @@
    judgeRiskGradeAndAdvice(monthlyRiskValue){
        let temp = []
        // ä½Žé£Žé™©
        if(monthlyRiskValue < 0.2) {
        if(monthlyRiskValue < 0.15) {
            temp.push('低风险')
            let advice =  '1.建议及时提醒该站点所属单位进行应急维护;\n2.若同时存在超标、临界超标、量级突变等异常时,建议将该站点移交环境执法大队开展现场执法检查;\n3.若持续两月及以上为高风险,建议将该站点纳入年度抽测比对清单;'
            temp.push(advice)
        }
        // ä¸­é£Žé™©
        if (monthlyRiskValue < 0.6 && monthlyRiskValue >= 0.2) {
        if (monthlyRiskValue <= 0.6 && monthlyRiskValue >= 0.15) {
            temp.push('中风险')
            let advice =  '1.建议通过守法服务小程序、监测监管微信群等线上方式提示站点所属单位,聚焦当前存在的问题或隐患,及时开展自查自纠;\n2.若同时存在在线率或有效率月度不达标,建议电话通知该站点所属单位进行应急维护,并进行专项审核;'
            temp.push(advice)
        }
        // é«˜é£Žé™©
        if (monthlyRiskValue >= 0.6) {
        if (monthlyRiskValue > 0.6) {
            temp.push('高风险')
            let advice = '1.若不涉及超标或在线率、有效率异常,常态数据审核即可;\n2.若涉及超标或在线率、有效率等异常,建议通过守法服务小程序、监测监管微信群等线上方式提示站点所属单位,及时开展自查自纠;'
            temp.push(advice)
src/views/exception/FlightInspection.vue
@@ -1,1501 +1,27 @@
<script>
import { defineAsyncComponent } from 'vue'
import TimeShortCuts from '@/sfc/TimeShortCuts.vue'
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('./components/DustLineChart.vue'))
import exceptionApi from '@/api/exceptionApi.js'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import AnalysisCard from './components/AnalysisCard.vue'
import DutyCompany from '@/sfc/DutyCompany.vue'
import StreetInfo from '@/sfc/StreetInfo.vue'
import historyApi from '@/api/historyApi.js'
import time from '@/utils/time.js'
import lineChart from '@/utils/chartFunction/lineChart.js'
import exceptionOption from '@/utils/chartFunction/exceptionOption.js'
export default {
  components: {
    TimeShortCuts,
    DustLineChart,
    ButtonClick,
    AreaAndmonitorType,
    AnalysisCard,
    DutyCompany,
    StreetInfo
  import CompFlightInspection from '@/views/exception/components/CompFlightInspection.vue'
  export default {
    components: {
      CompFlightInspection
  },
  data() {
    return {
      //  è¡¨å•内容
      form: {
        // ç«™ç‚¹åç§°
        name: '',
        // è¿ç»´å•†
        dutyCompany: [],
        // è¡—道
        street: [],
        // é€‰æ‹©çš„异常类型
        exceptionName: []
      },
      beginTime: '',
      endTime: '',
      // è¿”回的数据
      tableData: [],
      // è¡¨æ ¼å±•示的数据
      displayData: [],
      // è¡¨æ ¼é«˜åº¦
      tableHeight: 400,
      // è¡¨æ ¼æ˜¾ç¤º
      isTableShow: false,
      // å®¡æ ¸è¾…助按钮显示
      auditButton: false,
      // å½“前页
      currentPage: 1,
      // æ¯é¡µæ¡æ•°
      pageSize: 20,
      // è¡¨æ ¼çš„æ€»è®°å½•æ•°
      total: 0,
      // æŸ¥è¯¢æŒ‰é’®æ— æ•°æ®æ—¶
      isNoData: {
        exception0: true,
        exception1: true,
        exception2: true,
        exception3: true,
        exception4: true,
        exception5: true,
        exception6: true,
        exception7: true,
        exception8: true
      },
      // eslint-disable-next-line no-undef
      // å¯¹è¯æ¡†æ˜¾ç¤º
      dialogTableVisible: false,
      // ä¿å­˜å¼‚常对应的店铺名称和设备编号
      exception: {
        // æ–­ç”µæˆ–断网
        exception0: [],
        // æ•°æ®è¶…低
        exception1: [],
        // è¶…æ ‡
        exception2: [],
        // æ•°æ®é•¿æ—¶æ®µæ— æ³¢åЍ
        exception3: [],
        // é‡çº§çªå˜å¼‚常
        exception4: [],
        // ä¸´è¿‘超标异常
        exception5: [],
        // å•日超标次数临界异常
        exception6: [],
        // æ»‘动平均值异常
        exception7: [],
        // æœ‰æ•ˆçއ异叏
        exception8: [],
        // è¯¥æ—¶æ®µçš„异常数量
        exception0Num: 0,
        exception1Num: 0,
        exception2Num: 0,
        exception3Num: 0,
        exception4Num: 0,
        exception5Num: 0,
        exception6Num: 0,
        exception7Num: 0,
        exception8Num: 0
      },
      // ç«™ç‚¹æ€»æ•°é‡
      siteTotal: 0,
      // é€‰ä¸­è¡¨æ ¼å½“前行的数据
      tableCurrentRowData: null,
      // é€‰ä¸­è¡¨æ ¼å½“前行的索引
      selectedRowIndex: -2,
      // é¡µé¢ä¸Šçš„æŒ‰é’®åŠ è½½çŠ¶æ€
      loading: {
        // æŸ¥è¯¢æŒ‰é’®
        queryButton: false,
        // è¡¨æ ¼åŠ è½½ä¸­
        tableLoading: false,
        // ä¸Šä¸€æ¡æŒ‰é’®
        preButton: false,
        // ä¸‹ä¸€æ¡æŒ‰é’®
        afterButton: false,
        // æŠ˜çº¿å›¾
        lineChart: false
      },
      dialog: {
        // æ‰“开对话框请求该区间的历史数据
        historyData: [],
        // è¯¥æ—¶é—´æ®µçš„异常条数
        exceptionTotal: 0,
        // æŠ˜çº¿å›¾é…ç½®é¡¹
        option: {},
        // â€™ä¸Šä¸€æ¡â€˜æŒ‰é’®æ˜¯å¦å¯ä»¥è¢«ç‚¹å‡»çŠ¶æ€
        isPreCantouch: false,
        // â€™ä¸‹ä¸€æ¡â€˜æŒ‰é’®æ˜¯å¦å¯ä»¥è¢«ç‚¹å‡»çŠ¶æ€
        isNextCantouch: false,
        // å¼‚常的前中后区间所有数据
        allExceptionTimeData: []
      },
      // æ ‡è®°ä½
      flag: {
        // åŠ è½½æ—¶ ä¸Šä¸‹æ¡æŒ‰é’®ä¸èƒ½å†ç‚¹å‡»
        banTouch: 0,
        // 0代表分页,1代表不分页
        originClick: 0
      },
      areaColor: null
    }
  },
  setup() {
    // provide('search',readonly(form))
    const { isExceedOneMonth } = useCommonFunction()
    return {
      isExceedOneMonth
    }
  },
  // ç›‘听  åˆ¤æ–­æŒ‰é’®æ˜¯å¦å¯ç‚¹å‡»
  watch: {
    selectedRowIndex(newVaue) {
      // å¤„于表格的最后一条数据 è®¾ç½®â€˜ä¸Šä¸€æ¡â€™æŒ‰é’®ä¸å¯ç‚¹
      if (newVaue === 0) {
        this.dialog.isPreCantouch = true
        //用户先点了第一条,pre为true,然后点击最后一条,next为true。此时两个按钮都被封锁
        if (this.dialog.isNextCantouch == true) {
          this.dialog.isNextCantouch = false
        }
      }
      // å¤„于表格第一条数据 è®¾ç½®â€˜ä¸Šä¸€æ¡â€™æŒ‰é’®ä¸å¯ç‚¹
      else if (newVaue === this.displayData.length - 1) {
        this.dialog.isNextCantouch = true
        //用户先点了表格最后一条,next为true,然后点击第一条,pre为true。此时两个按钮都被封锁
        if (this.dialog.isPreCantouch == true) {
          this.dialog.isPreCantouch = false
        }
      }
      // å¤„于表格的中间行 å°†æŒ‰é’®è®¾ç½®ä¸ºå¯ç‚¹å‡»çŠ¶æ€
      else {
        this.dialog.isPreCantouch = false
        this.dialog.isNextCantouch = false
      }
    },
    // å½“选择的时间发生变化时,异常分析部分的异常店铺数量同步变化
    // beginTime() {
    //   this.getShopNames()
    // },
    // endTime() {
    //   this.getShopNames()
    // },
    dialogTableVisible() {
      window.addEventListener('resize', this.updateChart)
    }
  },
  computed: {
    exceptionAllNum() {
      let sum =
        this.exception.exception0Num +
        this.exception.exception1Num +
        this.exception.exception2Num +
        this.exception.exception3Num +
        this.exception.exception4Num +
        this.exception.exception5Num +
        this.exception.exception6Num +
        this.exception.exception7Num +
        this.exception.exception8Num
      if (sum == 0) {
        return 1
      } else {
        return sum
      }
    },
    long_time_notchange() {
      let sum =
        this.exception.exception0Num +
        this.exception.exception1Num +
        this.exception.exception2Num +
        this.exception.exception3Num +
        this.exception.exception4Num +
        this.exception.exception5Num +
        this.exception.exception6Num +
        this.exception.exception7Num +
        this.exception.exception8Num
      if (sum == 0) {
        return 0
      } 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 -
          (this.exception.exception8Num / this.exceptionAllNum) * 100
        ).toFixed(1)
      }
    },
    // ç¬¬ä¸€æŽ’卡片
    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.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
        }
      ]
    },
    cardRow2() {
      return [
        {
          siteName: this.exception.exception7,
          exceptionType: '7',
          exceptionName: '变化趋势异常',
          iconSrc: '@/assets/exception/exception7.png',
          siteNum: this.exception.exception7.length,
          exceptionNum: this.exception.exception7Num,
          isNoDataStatus: this.isNoData.exception7
        },
        {
          siteName: this.exception.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
        }
      ]
    },
    cardRow3() {
      return [
        {
          siteName: this.exception.exception2,
          exceptionType: '2',
          exceptionName: '超标',
          iconSrc: '@/assets/exception/exception2.png',
          siteNum: this.exception.exception2.length,
          exceptionNum: this.exception.exception2Num,
          isNoDataStatus: this.isNoData.exception2
        },
        {
          siteName: this.exception.exception3,
          exceptionType: '3',
          exceptionName: '数据长时段无波动',
          iconSrc: '@/assets/exception/exception3.png',
          siteNum: this.exception.exception3.length,
          exceptionNum: this.exception.exception3Num,
          isNoDataStatus: this.isNoData.exception3
        },
        {
          siteName: this.exception.exception8,
          exceptionType: '8',
          exceptionName: '有效率异常',
          iconSrc: '@/assets/exception/exception3.png',
          siteNum: this.exception.exception8.length,
          exceptionNum: this.exception.exception8Num,
          isNoDataStatus: this.isNoData.exception8
        }
      ]
    }
  },
  mounted() {
    this.backExceptionDataAWeekAgo()
    // æŸ¥è¯¢æ—¶é—´æ®µçš„各异常的站点,查询该时间区间的各异常数量
    this.getShopNames()
    this.getSiteNume()
    let a = [
      ['2023-10-01  11:45:00', '2023-10-01  13:45:00'],
      ['2023-10-01  11:45:00', '2023-10-01  12:45:00']
    ]
    let b = time.splitTime(a)
    console.log('时间:', b)
  },
  methods: {
    /**
     * æœ‰æ•ˆçއ异叏 è®¾ç½®æŠ˜çº¿å›¾é…ç½®é¡¹
     * @param:
     * @returns:
     */
    validProcess() {
      // x轴数据
      let xList = time.ascTime(
        this.tableCurrentRowData.beginTime,
        this.tableCurrentRowData.endTime,
        15
      )
      // y轴数据
      let yList = []
      xList.forEach((item) => {
        // æŸ¥æ‰¾è¯¥æ—¶é—´çš„æ•°æ®
        let r = lineChart.findDate(this.dialog.historyData, item)
        if (r) {
          yList.push(r.dustValue)
        } else {
          yList.push(null)
        }
      })
      // é¢œè‰²èƒŒæ™¯åŒºé—´
      // å¾—到无数据的时间点或flag不等于N的时间点
      let noDataTime = time.invalidTime(this.dialog.historyData, xList)
      let rangeTime = time.seriesTime(noDataTime, 15)
      // let rangeTime_1 = time.splitTime(rangeTime)
      // å¾—到背景区间的配置
      let areaObj = lineChart.getMarkArea(rangeTime, '异常')
      // ä¼ å…¥å‚æ•°
      this.dialog.option = exceptionOption.setExceptionChartOption(
        xList,
        yList,
        '',
        '',
        '',
        '',
        this.tableCurrentRowData.exception,
        areaObj,
        this.tableCurrentRowData.exceptionType
      )
    },
    getImageUrl(name) {
      return new URL(`../../lib/Carousel/assets/${name}`, import.meta.url).href
    },
    // æ”¾å›žç«™ç‚¹æ€»æ•°é‡
    getSiteNume() {
      exceptionApi.getSitesNum().then((res) => {
        this.siteTotal = res.data.data.length
      })
    },
    /**
     * description:点击异常站点名字时 è¿”回的数据
     * @param:
     * @createTime:2023-08-17
     * @returns:
     */
    getAbnormalDataByClick(val) {
      this.flag.originClick = 1
      // æ˜¾ç¤ºè¡¨æ ¼
      this.isTableShow = true
      this.tableData = val
      this.total = this.tableData.length
      // é»˜è®¤æ˜¾ç¤ºç¬¬ä¸€é¡µ
      this.handleCurrentChange(1)
    },
    // ç‚¹å‡»è¡¨æ ¼çš„行时
    selectTableRow() {
      // èŽ·å–å½“å‰è¡Œçš„ç´¢å¼•
      this.selectedRowIndex = this.displayData.indexOf(this.tableCurrentRowData)
    },
    /**
     * description:断电或断网时设置的表格数据
     */
    setOfflineTbleData() {
      // æ— æ•°æ®æ—¶çš„æ—¶é—´æ•°ç»„ æ—¶é—´ç›¸å·®15分钟
      const abnormalTimeTenMinute = index.descFiftyTime(
        this.tableCurrentRowData.beginTime,
        this.tableCurrentRowData.endTime
      )
      // ä¿å­˜æ— æ•°æ®æ—¶è¡¨æ ¼æ¡æ•°
      this.dialog.exceptionTotal = abnormalTimeTenMinute.length
      // åŽ»é™¤ä¾›ç”µå¼‚å¸¸å’ŒæŽ‰çº¿åŒºé—´çš„ç¬¬ä¸€ä¸ªæœ‰å…ƒç´ çš„å€¼
      this.dialog.historyData = []
      for (let i = 0; i < abnormalTimeTenMinute.length; i++) {
        this.dialog.historyData.push({
          name: this.tableCurrentRowData.name,
          mnCode: this.tableCurrentRowData.mnCode,
          dutyCompany: this.tableCurrentRowData.dutyCompany,
          lst: abnormalTimeTenMinute[i],
          dustValue: ''
        })
      }
    },
    // æ®µç”µæˆ–断网区间无数据,需要补充。其他的都有数据,直接一次请求全部时段就好
    // æ ¹æ®å¼‚常区间构造前后端首尾 å‰åŒºé—´ ä¸­é—´åŒºé—´ åŽåŒºé—´
    // åˆ¤æ–­æ˜¯æ®µç”µæˆ–断网?是则请求前后区间,否则只请求一次完整的
    // å¾—到最终数据
    // å†åˆ¤æ–­å¼‚常种类 ï¼Œè¿›è¡Œè®¾ç½®é…ç½®é¡¹
    /**
     * description:一次请求回前中后区间的数据,对数据进行分析
     * @param: å‰ä¸­åŽåŒºé—´çš„请求参数,前中后的总区间时间,异常开始时间,一场结束时间
     */
    otherExceptionRequest(allTimeArgs, allTime, exceptionBT, exceptionET) {
      // æŠ˜çº¿å›¾åŠ è½½ä¸­æ•ˆæžœ
      this.loading.lineChart = true
      historyApi.queryHistoryData(allTimeArgs).then((result) => {
        this.dialog.allExceptionTimeData = result.data.data
        //  æ•°æ®ç¼ºå¤±å¼‚常时重新设置表格
        if (this.tableCurrentRowData.exceptionType == '0') {
          this.setOfflineTbleData()
        }
        // x轴日期时间
        let dateList = []
        // yè½´ è¶…标油烟浓度
        let dustValue = []
        let timeAndValue = {}
        // ä»Žæ·»åŠ äº†é¦–ä½åŒºé—´çš„å¼€å§‹å’Œç»“æŸæ—¶é—´è¿›è¡ŒéåŽ† ä¿è¯æ—¶é—´ä»¥15分钟为间隔
        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)
        // è®¾ç½®æŠ˜çº¿å›¾é…ç½®é¡¹
        // this.reSetChart(dateList, dustValue, exceptionBT, exceptionET, startIndex, endIndex)
        this.dialog.option = exceptionOption.setExceptionChartOption(
          dateList,
          dustValue,
          exceptionBT,
          exceptionET,
          startIndex,
          endIndex,
          this.tableCurrentRowData.exception,
          '',
          this.tableCurrentRowData.exceptionType
        )
        this.flag.banTouch = 0
        this.loading.lineChart = false
      })
    },
    /**
     * description:划分出异常起始时间,构造请求前中后的参数
     */
    timeAndDataProcessed() {
      //异常的开始时间 ç»“束时间
      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 paramsAllTime = index.requestGetParms(
        this.tableCurrentRowData.name,
        beforeAndAfterTime[0],
        beforeAndAfterTime[3]
      )
      // å°†å¼‚常数据进行预处理,随后将结果作为折线图的配置项
      this.otherExceptionRequest(
        paramsAllTime,
        beforeAndAfterTime,
        exceptionBeginTime,
        exceptionEndTime
      )
    },
    /**
     * description:获取下一条异常信息
     */
    getPreviousRowData() {
      //     // ä¸æ˜¯è¡¨æ ¼çš„æœ€åŽä¸€è¡Œ
      if (this.selectedRowIndex < this.displayData.length - 1) {
        // ç‚¹å‡»è¿‡ç¨‹ä¸­ é”ä½ä¸Šä¸‹æ¡æŒ‰é’®  åœ¨è®¾ç½®å®Œå›¾å½¢é…ç½®é¡¹åŽè§£é”
        this.flag.banTouch = 1
        //得到上一行数据索引
        this.selectedRowIndex = this.selectedRowIndex + 1
        // å¾—到上一行的数据
        this.tableCurrentRowData = this.displayData[this.selectedRowIndex]
        this.loading.preButton = true
        historyApi.queryHistoryData({
          siteName:this.tableCurrentRowData.name,
          beginTime:this.tableCurrentRowData.beginTime,
          endTime:this.tableCurrentRowData.endTime
        }).then(response => {
          // ä¿å­˜è¿”回的超标数据
          this.dialog.historyData = response.data.data
          this.dialog.exceptionTotal = response.data.data.length
          // é€»è¾‘处理
          if (this.tableCurrentRowData.exceptionType != '8') {
            this.timeAndDataProcessed()
          } else {
            this.loading.lineChart = true
            this.validProcess()
            this.loading.lineChart = false
            this.flag.banTouch = 0
          }
          this.loading.preButton = false
        })
      }
    },
    /**
     * description:获取下一条异常信息
     */
    getNextRowData() {
      // ä¸æ˜¯è¡¨æ ¼çš„第一行
      if (this.selectedRowIndex !== 0) {
        // ç‚¹å‡»è¿‡ç¨‹ä¸­ é”ä½ä¸Šä¸‹æ¡æŒ‰é’®  åœ¨è®¾ç½®å®Œå›¾å½¢é…ç½®é¡¹åŽè§£é”
        this.flag.banTouch = 1
        //得到上一行数据索引
        this.selectedRowIndex = this.selectedRowIndex - 1
        // å¾—到上一行的数据
        this.tableCurrentRowData = this.displayData[this.selectedRowIndex]
        this.loading.afterButton = true
        historyApi.queryHistoryData({
          siteName:this.tableCurrentRowData.name,
          beginTime:this.tableCurrentRowData.beginTime,
          endTime:this.tableCurrentRowData.endTime
        }).then(response => {
          // ä¿å­˜è¿”回的超标数据
          this.dialog.historyData = response.data.data
          this.dialog.exceptionTotal = response.data.data.length
          // é€»è¾‘处理
          if (this.tableCurrentRowData.exceptionType != '8') {
            this.timeAndDataProcessed()
          } else {
            this.loading.lineChart = true
            this.validProcess()
            this.loading.lineChart = false
            this.flag.banTouch = 0
          }
          this.loading.afterButton = false
        })
    data() {
      return{
      }
    },
    mounted() {
    /**
     * description:从子组件获得某站点该时段的异常数据
     * @createTime:2023-08-18
     */
    backExceptionData(val1, val2) {
      this.displayData = val1
      this.total = val2
    },
    methods: {
    // æŸ¥è¯¢å¼‚常数据的站点名字和数量
    queryExceptionSite(url, exceptionType) {
      let params = {}
      params['beginTime'] = this.beginTime
      params['endTime'] = this.endTime
      params['exceptionType'] = exceptionType
      if (this.form.street.length != 0) {
        params['street'] = this.form.street.join()
      }
      if (this.form.dutyCompany.length != 0) {
        params['dutyCompany'] = this.form.dutyCompany.join()
      }
      return this.$http.get(url, { params: params })
    },
    /**
     * description:当用户改变查询的时间区间时,会根据该区间查询各异常的站点,查询该时间区间的各异常数量
     * @createTime:2023-08-18
     */
    getShopNames() {
      /* æŸ¥è¯¢å¼‚常的站点 */
      this.queryExceptionSite('/dust/sitenamecode', 0).then((result) => {
        this.exception.exception0 = result.data.data
        if (result.data.data.length == 0) {
          this.isNoData.exception0 = true
          return
        }
        this.isNoData.exception0 = false
      })
      this.queryExceptionSite('/dust/sitenamecode', 1).then((result) => {
        this.exception.exception1 = result.data.data
        if (result.data.data.length == 0) {
          this.isNoData.exception1 = true
          return
        }
        this.isNoData.exception1 = false
      })
      this.queryExceptionSite('/dust/sitenamecode', 2).then((result) => {
        this.exception.exception2 = result.data.data
        if (result.data.data.length == 0) {
          this.isNoData.exception2 = true
          return
        }
        this.isNoData.exception2 = false
      })
      this.queryExceptionSite('/dust/sitenamecode', 3).then((result) => {
        this.exception.exception3 = result.data.data
        if (result.data.data.length == 0) {
          this.isNoData.exception3 = true
          return
        }
        this.isNoData.exception3 = false
      })
      this.queryExceptionSite('/dust/sitenamecode', 4).then((result) => {
        this.exception.exception4 = result.data.data
        if (result.data.data.length == 0) {
          this.isNoData.exception4 = true
          return
        }
        this.isNoData.exception4 = false
      })
      this.queryExceptionSite('/dust/sitenamecode', 5).then((result) => {
        this.exception.exception5 = result.data.data
        if (result.data.data.length == 0) {
          this.isNoData.exception5 = true
          return
        }
        this.isNoData.exception5 = false
      })
      this.queryExceptionSite('/dust/sitenamecode', 6).then((result) => {
        this.exception.exception6 = result.data.data
        if (result.data.data.length == 0) {
          this.isNoData.exception6 = true
          return
        }
        this.isNoData.exception6 = false
      })
      this.queryExceptionSite('/dust/sitenamecode', 7).then((result) => {
        this.exception.exception7 = result.data.data
        if (result.data.data.length == 0) {
          this.isNoData.exception7 = true
          return
        }
        this.isNoData.exception7 = false
      })
      this.queryExceptionSite('/dust/sitenamecode', 8).then((result) => {
        this.exception.exception8 = result.data.data
        if (result.data.data.length == 0) {
          this.isNoData.exception8 = true
          return
        }
        this.isNoData.exception8 = false
      })
      /* å¼‚常异常数量 */
      this.queryExceptionSite('/dust/exceptionnum', 0).then((result) => {
        this.exception.exception0Num = result.data.data
      })
      this.queryExceptionSite('/dust/exceptionnum', 1).then((result) => {
        this.exception.exception1Num = result.data.data
      })
      this.queryExceptionSite('/dust/exceptionnum', 2).then((result) => {
        this.exception.exception2Num = result.data.data
      })
      this.queryExceptionSite('/dust/exceptionnum', 3).then((result) => {
        this.exception.exception3Num = result.data.data
      })
      this.queryExceptionSite('/dust/exceptionnum', 4).then((result) => {
        this.exception.exception4Num = result.data.data
      })
      this.queryExceptionSite('/dust/exceptionnum', 5).then((result) => {
        this.exception.exception5Num = result.data.data
      })
      this.queryExceptionSite('/dust/exceptionnum', 6).then((result) => {
        this.exception.exception6Num = result.data.data
      })
      this.queryExceptionSite('/dust/exceptionnum', 7).then((result) => {
        this.exception.exception7Num = result.data.data
      })
      this.queryExceptionSite('/dust/exceptionnum', 8).then((result) => {
        this.exception.exception8Num = result.data.data
      })
    },
    /**
     * description:显示对话框,返回该异常时间段的所有数据
     * @param:点击‘查看详情’的该行所有字段数据
     * @createTime:2023-08-18
     */
    showDialog(row) {
      // æ‰“开对话框
      this.dialogTableVisible = true
      // ä¿å­˜å½“前行数据
      this.tableCurrentRowData = row
      // èŽ·å–å½“å‰è¡Œçš„ç´¢å¼•
      this.selectedRowIndex = this.displayData.indexOf(row)
      //根据当前行的编号,起始时间来 è¯·æ±‚异常数据
      // å¯¹è¯·æ±‚到的数据进行首尾拼接
      // å¾—到前后完整数据进行绘制图形
      historyApi.queryHistoryData({
          siteName:row.name,
          beginTime:row.beginTime,
          endTime:row.endTime
        }).then(response => {
          // ä¿å­˜è¿”回的超标数据
          this.dialog.historyData = response.data.data
          this.dialog.exceptionTotal = response.data.data.length
          // é€»è¾‘处理
          if (this.tableCurrentRowData.exceptionType != '8') {
            this.timeAndDataProcessed()
          } else {
            this.loading.lineChart = true
            this.validProcess()
            this.loading.lineChart = false
            this.flag.banTouch = 0
          }
        })
    },
    /**
     * description:条件查询异常的数据
     * @createTime:2023-08-18
     */
    handleSubmit() {
      if (this.isExceedOneMonth(this.beginTime, this.endTime)) {
        alert('时间跨度不能超过一个月')
        return
      }
      // æ›´æ–°å¼‚常分析
      this.getShopNames()
      this.loading.queryButton = true
      this.flag.originClick = 0
      this.loading.tableLoading = true
      let params = {}
      params['page'] = this.currentPage
      params['pageSize'] = this.pageSize
      if (this.form.name) {
        params['siteName'] = this.form.name
      }
      if (this.form.exceptionName.length != 0) {
        params['exceptionType'] = this.form.exceptionName.join()
      }
      if (this.form.street.length != 0) {
        params['street'] = this.form.street.join()
      }
      if (this.form.dutyCompany.length != 0) {
        params['dutyCompany'] = this.form.dutyCompany.join()
      }
      params['beginTime'] = this.beginTime
      params['endTime'] = this.endTime
      this.$http.get('/dust/exceptiondata2', { params: params }).then((response) => {
        // ä¿å­˜è¿”回的
        // this.tableData = response.data.data.rows;
        this.displayData = response.data.data.rows
        this.loading.queryButton = false
        this.loading.tableLoading = false
        if (response.data.data.total == 0) {
          ElMessage('该时段无数据')
          this.isTableShow = false
          return
        }
        this.isTableShow = true
        this.total = response.data.data.total
        // ç§»é™¤ç©ºæ•°æ®çŠ¶æ€
      })
    },
    /**
     * description:打开页面默认加载最近一周的异常数据
     * @createTime:2023-08-18
     */
    backExceptionDataAWeekAgo() {
      this.loading.tableLoading = true
      let params = {}
      if (this.form.name) {
        params['siteName'] = this.form.name
      }
      if (this.form.exceptionName) {
        params['exceptionType'] = this.form.exceptionName
      }
      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.loading.tableLoading = false
        if (response.data.data.total == 0) {
          ElMessage('该时段无数据')
          this.isTableShow = false
          return
        }
        this.isTableShow = true
        this.total = response.data.data.total
      })
    },
    /**
     * description:将中国标准时间转为指定格式(该组件返回的标准时间的格式,所以必须的加这个函数)
     * @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')
    },
    // åŠŸèƒ½ï¼šè¡¨æ ¼é«˜åº¦æ ¹æ®å†…å®¹è‡ªé€‚åº”
    calTableHeight() {
      const h1 = this.$refs.h1.$el.offsetHeight
      const h2 = this.$refs.h2.$el.offsetHeight
      const h3 = this.$refs.h3.$el.offsetHeight
      const h4 = this.$refs.h4.$el.offsetHeight
      // å…¶ä¸­ä¸€ä¸ª40是盒子的总外边距
      this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - ${h3}px - ${h4}px - 40px - var(--el-main-padding) * 2)`
    },
    // é¡µå¤§å°æ”¹å˜æ—¶è§¦å‘
    handleSizeChange(val) {
      this.pageSize = val
      // æ”¹å˜æ¯é¡µæ˜¾ç¤ºæ•°ç›®æ—¶è·³åˆ°å½“前页
      this.handleCurrentChange(1)
    },
    // é¡µå·æ”¹å˜æ—¶è§¦å‘
    /**
     * description:页号改变时触发
     * @param: å½“前页,标记位(0代表是点击‘查询’触发的,1代表时点击异常站点文本按钮触发的)
     * @createTime:2023-08-17
     * @returns:
     */
    handleCurrentChange(val) {
      // å°†å½“前页号给currentPage
      this.currentPage = val
      // é¡µé¢å˜åŒ–时调用 æŸ¥è¯¢æ•°æ®å‡½æ•°
      if (this.flag.originClick == 0) {
        this.handleSubmit()
      } else if (this.flag.originClick == 1) {
        const startIndex = (val - 1) * this.pageSize
        const endIndex = startIndex + this.pageSize
        this.displayData = this.tableData.slice(startIndex, endIndex)
      }
    },
    // è¡¨æ ¼åºå·é€’增
    indexMethod1(index) {
      return index + 1 + (this.currentPage - 1) * this.pageSize
    },
    // è¡¨æ ¼åºå·é€’增
    indexMethod2(index) {
      return index + 1
    }
  }
     }
}
</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>
            <el-form-item>
              <DutyCompany @submitDutyCompanyValue="(n) => (form.dutyCompany = n)"> </DutyCompany>
            </el-form-item>
            <el-form-item>
              <StreetInfo @submitStreetValue="(n) => (form.street = n)"> </StreetInfo>
            </el-form-item>
            <el-form-item>
              <TimeShortCuts timeType="day" @submit-time="giveTime"></TimeShortCuts>
            </el-form-item>
            <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-row>
    </el-row>
    <!-- å¼‚常分析 -->
    <el-row ref="h3">
      <el-col>
        <el-card class="card-container">
          <template #header>
            <div class="card-header">异常分析</div>
          </template>
          <el-row :gutter="20" class="card-row">
            <el-col :span="5">
              <AnalysisCard
                :site-name="cardRow1[0].siteName"
                :exception-type="cardRow1[0].exceptionType"
                :begin-time="beginTime"
                :end-time="endTime"
                :exception-name="cardRow1[0].exceptionName"
                :site-num="cardRow1[0].siteNum"
                :exception-num="cardRow1[0].exceptionNum"
                :exception-all-num="exceptionAllNum"
                :site-num-all="siteTotal"
                :isNoDataStatus="cardRow1[0].isNoDataStatus"
                @get-abnormal-data-by-click="getAbnormalDataByClick"
              >
                <img src="@/assets/exception/exception4.png" height="24" width="24" />
              </AnalysisCard>
            </el-col>
            <el-col :span="5">
              <AnalysisCard
                :site-name="cardRow1[1].siteName"
                :exception-type="cardRow1[1].exceptionType"
                :begin-time="beginTime"
                :end-time="endTime"
                :exception-name="cardRow1[1].exceptionName"
                :site-num="cardRow1[1].siteNum"
                :exception-num="cardRow1[1].exceptionNum"
                :exception-all-num="exceptionAllNum"
                :site-num-all="siteTotal"
                :isNoDataStatus="cardRow1[1].isNoDataStatus"
                @get-abnormal-data-by-click="getAbnormalDataByClick"
              >
                <img src="@/assets/exception/exception5.png" height="24" width="24" />
              </AnalysisCard>
            </el-col>
            <el-col :span="4">
              <AnalysisCard
                :site-name="cardRow3[2].siteName"
                :exception-type="cardRow3[2].exceptionType"
                :begin-time="beginTime"
                :end-time="endTime"
                :exception-name="cardRow3[2].exceptionName"
                :site-num="cardRow3[2].siteNum"
                :exception-num="cardRow3[2].exceptionNum"
                :exception-all-num="exceptionAllNum"
                :site-num-all="siteTotal"
                :isNoDataStatus="cardRow3[2].isNoDataStatus"
                @get-abnormal-data-by-click="getAbnormalDataByClick"
              >
                <img src="@/assets/exception/exception3.png" height="24" width="24" />
              </AnalysisCard>
            </el-col>
            <el-col :span="5">
              <AnalysisCard
                :site-name="cardRow2[0].siteName"
                :exception-type="cardRow2[0].exceptionType"
                :begin-time="beginTime"
                :end-time="endTime"
                :exception-name="cardRow2[0].exceptionName"
                :site-num="cardRow2[0].siteNum"
                :exception-num="cardRow2[0].exceptionNum"
                :exception-all-num="exceptionAllNum"
                :site-num-all="siteTotal"
                :isNoDataStatus="cardRow2[0].isNoDataStatus"
                @get-abnormal-data-by-click="getAbnormalDataByClick"
              >
                <img src="@/assets/exception/exception7.png" height="24" width="24" />
              </AnalysisCard>
            </el-col>
            <el-col :span="5">
              <AnalysisCard
                :site-name="cardRow1[2].siteName"
                :exception-type="cardRow1[2].exceptionType"
                :begin-time="beginTime"
                :end-time="endTime"
                :exception-name="cardRow1[2].exceptionName"
                :site-num="cardRow1[2].siteNum"
                :exception-num="cardRow1[2].exceptionNum"
                :exception-all-num="exceptionAllNum"
                :site-num-all="siteTotal"
                :isNoDataStatus="cardRow1[2].isNoDataStatus"
                @get-abnormal-data-by-click="getAbnormalDataByClick"
              >
                <img src="@/assets/exception/exception6.png" height="24" width="24" />
              </AnalysisCard>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="card-row">
            <el-col :span="6">
              <AnalysisCard
                :site-name="cardRow2[2].siteName"
                :exception-type="cardRow2[2].exceptionType"
                :begin-time="beginTime"
                :end-time="endTime"
                :exception-name="cardRow2[2].exceptionName"
                :site-num="cardRow2[2].siteNum"
                :exception-num="cardRow2[2].exceptionNum"
                :exception-all-num="exceptionAllNum"
                :site-num-all="siteTotal"
                :isNoDataStatus="cardRow2[2].isNoDataStatus"
                @get-abnormal-data-by-click="getAbnormalDataByClick"
              >
                <img src="@/assets/exception/exception1.png" height="24" width="24" />
              </AnalysisCard>
            </el-col>
            <el-col :span="6">
              <AnalysisCard
                :site-name="cardRow3[0].siteName"
                :exception-type="cardRow3[0].exceptionType"
                :begin-time="beginTime"
                :end-time="endTime"
                :exception-name="cardRow3[0].exceptionName"
                :site-num="cardRow3[0].siteNum"
                :exception-num="cardRow3[0].exceptionNum"
                :exception-all-num="exceptionAllNum"
                :site-num-all="siteTotal"
                :isNoDataStatus="cardRow3[0].isNoDataStatus"
                @get-abnormal-data-by-click="getAbnormalDataByClick"
              >
                <img src="@/assets/exception/exception2.png" height="24" width="24" />
              </AnalysisCard>
            </el-col>
            <el-col :span="6">
              <AnalysisCard
                :site-name="cardRow3[1].siteName"
                :exception-type="cardRow3[1].exceptionType"
                :begin-time="beginTime"
                :end-time="endTime"
                :exception-name="cardRow3[1].exceptionName"
                :site-num="cardRow3[1].siteNum"
                :exception-num="cardRow3[1].exceptionNum"
                :exception-all-num="exceptionAllNum"
                :site-num-all="siteTotal"
                :isNoDataStatus="cardRow3[1].isNoDataStatus"
                @get-abnormal-data-by-click="getAbnormalDataByClick"
              >
                <img src="@/assets/exception/exception3.png" height="24" width="24" />
              </AnalysisCard>
            </el-col>
            <el-col :span="6">
              <AnalysisCard
                :site-name="cardRow2[1].siteName"
                :exception-type="cardRow2[1].exceptionType"
                :begin-time="beginTime"
                :end-time="endTime"
                :exception-name="cardRow2[1].exceptionName"
                :site-num="cardRow2[1].siteNum"
                :exception-num="cardRow2[1].exceptionNum"
                :exception-all-num="exceptionAllNum"
                :site-num-all="siteTotal"
                :isNoDataStatus="cardRow2[1].isNoDataStatus"
                @get-abnormal-data-by-click="getAbnormalDataByClick"
              >
                <img src="@/assets/exception/exception0.png" height="24" width="24" />
              </AnalysisCard>
            </el-col>
          </el-row>
          <!--
          <el-row :gutter="20">
          </el-row> -->
        </el-card>
      </el-col>
    </el-row>
    <el-button-group>
      <el-button color="#626aef" plain @click="isTableShow = true" v-show="!isTableShow">
        æ˜¾ç¤ºå¼‚常清单<el-icon class="i-ep-Arrow"><i-ep-ArrowUp /></el-icon>
      </el-button>
      <el-button color="#626aef" plain @click="isTableShow = false" v-show="isTableShow">
        éšè—å¼‚常清单<el-icon class="i-ep-Arrow"><i-ep-ArrowDown /></el-icon>
      </el-button>
    </el-button-group>
    <!-- è¡¨æ ¼ -->
    <el-row v-show="isTableShow">
      <el-col>
        <el-table
          ref="table"
          :data="displayData"
          :height="tableHeight"
          :highlight-current-row="true"
          size="default"
          v-loading="loading.tableLoading"
          border
        >
          <el-table-column
            type="index"
            label="序号"
            width="60px"
            align="center"
            fixed
            :index="indexMethod1"
          />
          <el-table-column prop="name" label="点位名称" show-overflow-tooltip />
          <el-table-column prop="mnCode" label="设备编码" align="center" show-overflow-tooltip />
          <el-table-column prop="exception" label="异常类型" align="center" show-overflow-tooltip />
          <el-table-column prop="region" label="区县" align="center" show-overflow-tooltip />
          <el-table-column prop="beginTime" label="开始时间" align="center" show-overflow-tooltip />
          <el-table-column prop="endTime" label="结束时间" align="center" show-overflow-tooltip />
          <el-table-column
            prop="typename"
            label="场景"
            align="center"
            width="82"
            show-overflow-tooltip
          />
          <el-table-column prop="address" label="地址" align="center" show-overflow-tooltip />
          <el-table-column prop="dutyCompany" label="运维商" align="center" show-overflow-tooltip />
          <el-table-column label="操作" align="center">
            <template #default="{ row }">
              <el-button type="primary" class="table-button" @click="showDialog(row)"
                >查看详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          ref="h4"
          background
          layout="total, sizes, prev, pager, next, jumper"
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </el-col>
    </el-row>
    <!-- å¯¹è¯æ¡† -->
    <el-dialog
      class="exception-dialog"
      v-model="dialogTableVisible"
      draggable
      align-center
      height="700px"
      width="700px"
    >
      <!-- å¤´ -->
      <template #header>
        <div class="diag-head">
          <div class="diag-head-text">
            <div><span class="diag-head-text1">站点名称:</span>{{ tableCurrentRowData.name }}</div>
            <div>
              <span class="diag-head-text1">设备编号:</span>{{ tableCurrentRowData.mnCode }}
            </div>
            <div>
              <span class="diag-head-text1">运维商:</span>{{ tableCurrentRowData.dutyCompany }}
            </div>
            <div>
              <span class="diag-head-text1">异常时间段:</span>{{ tableCurrentRowData.beginTime }} ~
              {{ tableCurrentRowData.endTime }}
            </div>
          </div>
          <!-- <div class="chart-jump-button">
          <el-button
            type="danger"
            :loading="loading.preButton"
            :disabled="dialog.isPreCantouch || flag.banTouch"
            @click="getPreviousRowData"
            >上条异常</el-button
          >
          <el-button
            type="danger"
            :loading="loading.afterButton"
            :disabled="dialog.isNextCantouch || flag.banTouch"
            @click="getNextRowData"
            >下条异常</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>
        </div>
      </template>
      <!-- å›¾å½¢ -->
      <DustLineChart
        :option="dialog.option"
        :is-open-dialog="dialogTableVisible"
        v-loading="loading.lineChart"
      ></DustLineChart>
      <!-- è¡¨æ ¼ -->
      <div>
        <el-table :data="dialog.historyData" size="default" height="200" border>
          <el-table-column
            type="index"
            label="序号"
            width="60px"
            align="center"
            fixed
            :index="indexMethod2"
          ></el-table-column>
          <el-table-column prop="lst" label="采集时间" align="center" show-overflow-tooltip />
          <el-table-column
            prop="dustValue"
            label="TSP(mg/m³)"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column prop="flag" label="flag" align="center" show-overflow-tooltip />
        </el-table>
      </div>
      <template #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>
  <CompFlightInspection  :show-all="true"> </CompFlightInspection>
</template>
<style lang="scss" scoped>
.el-row {
  margin-left: 10px;
}
<style  scoped>
/* æ¡ä»¶æŸ¥è¯¢æ¨¡å—的样式 */
.el-form {
  margin: 10px;
}
img {
  margin-right: 5px;
}
.head-container-search {
  float: right;
}
.head-describtion-text {
  justify-content: flex-end;
  margin-bottom: 2px;
  margin-right: 20px;
  font-size: 14px;
  color: gray;
}
.button-set {
  margin: 10px;
}
/* æ¡ä»¶æŸ¥è¯¢æ¨¡å—结束 */
/* å¼‚常分析模块的样式 */
.card-text1 {
  /* é»‘体的异常名字部分 */
  margin: 10px;
}
.card-text1 + div {
  /* é»‘体的异常名字下面的 */
  margin: 12px;
}
.card-exception-buttom {
  /* å¼‚常站点文本按钮区域 */
  padding: 11px;
}
.card-header {
  margin-left: 5px;
  font-size: 18px;
  font-weight: bold;
}
.card-content-unnormal {
  min-height: 200px;
  border: 2px solid #ffcf8b;
  border-radius: 20px;
}
.card-content-normal {
  min-height: 200px;
  border: 2px solid red;
  border-radius: 20px;
}
.card-header-text {
  font-size: 16px;
  font-weight: bold;
  margin-top: 4px;
  margin-left: 4px;
}
.card-content-text {
  white-space: nowrap;
}
.card-exceptionname-text1 {
  /*  å¼‚常站点占比 */
  font-size: 14px;
  white-space: nowrap;
}
.card-exceptionname-text2 {
  /* å¼‚常数占比的外边距 */
  font-size: 14px;
  white-space: nowrap;
}
.text-blank {
  /* é€—号 */
  margin-right: 10px;
  color: #000000;
}
.card-row {
  margin-bottom: 10px;
}
/* å¼‚常分析模块结束 */
/* éšè—è¡¨æ ¼æŒ‰é’®ç»„样式 */
.el-button-group {
  margin: 10px 0px 10px 10px;
}
.i-ep-Arrow {
  margin-left: 6px;
  margin-bottom: 2px;
  font-size: 1.2em;
}
/* éšè—è¡¨æ ¼æŒ‰é’®ç»„样式结束 */
/* è¡¨æ ¼æ¨¡å—的样式 */
.el-table {
  color: #333333;
}
/* è¡¨æ ¼æ¨¡å—结束 */
/* æŸ¥çœ‹è¯¦æƒ…对话框模块的样式 */
.diag-head {
  /* å¯¹è¯æ¡†å¤´éƒ¨åŒºåŸŸ */
  min-height: 200px;
}
.diag-head-text1 {
  /* å¯¹è¯æ¡†å¤´éƒ¨çš„属性字段加粗 */
  font-weight: bold;
}
.diag-head-text > div {
  /*  å¯¹è¯æ¡†å¼‚常时间段 */
  margin-top: 15px;
}
.diag-head-text {
  margin: 10px;
  padding: 10px;
  background: linear-gradient(90deg, #00c9ff 0%, #92fe9d 100%);
  border: 2px solid #7bc0fc;
}
.chart-jump-button {
  display: flex;
  justify-content: right;
}
.mx-1 {
  position: absolute;
  left: 10px;
  bottom: 10px;
}
/* æŸ¥çœ‹è¯¦æƒ…对话框模块结束 */
</style>
</style>
src/views/exception/SiteAuditAssistance.vue
@@ -245,6 +245,7 @@
        '',
        this.tableCurrentRowData.exception,
        areaObj,
        '',
        this.tableCurrentRowData.exceptionType
      )
    },
@@ -1709,26 +1710,34 @@
          align="center"
          show-overflow-tooltip
        />
        <el-table-column prop="flag" label="flag" align="center" show-overflow-tooltip />
        <el-table-column prop="flag" label="数据标识" 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>
      <div class="dialog-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' ||
              tableCurrentRowData.exceptionType == '5' ||
              tableCurrentRowData.exceptionType == '6' ||
              tableCurrentRowData.exceptionType == '7' ||
              tableCurrentRowData.exceptionType == '8'
            "
            >异常数据:</span
          >
          <span class="table-line-num">{{ dialog.exceptionTotal }}条</span>
          <span v-show="tableCurrentRowData.exceptionType == '0'"> (逻辑计算)</span>
        </el-tag>
        <el-text v-show="tableCurrentRowData.exceptionType == '8'" type="warning" class="dialog-footer-text">数据标识A为数据长期缺失,系统自动补全</el-text>
        <!-- <el-text class="mx-1" type="warning">Warning</el-text> -->
      </div>
    </template>
  </el-dialog>
</template>
@@ -1843,6 +1852,15 @@
  left: 10px;
  bottom: 10px;
}
.dialog-footer{
  display: flex;
}
.dialog-footer-text {
  justify-content: flex-end;
  margin-left: auto;
  font-size: 14px;
  /* color: #333333; */
}
/* æŸ¥çœ‹è¯¦æƒ…对话框模块结束 */
</style>
src/views/exception/components/AnalysisCard.vue
@@ -33,7 +33,7 @@
      default: '异常'
    },
    // å›¾æ ‡åœ°å€
    iconsrc: {
    icon: {
      type: String,
      default: '111'
    },
@@ -62,6 +62,7 @@
        type:Boolean,
        default:false
    }
  },
  emits:['getAbnormalDataByClick'],
  components: {
@@ -100,7 +101,8 @@
  <el-card>
    <template #header>
    <div class="icon-text">
      <slot/>
      <!-- <slot/> -->
      <img :src="icon" height="24" width="24" />
      <div class="exception-name">{{ exceptionName }}</div>
      <el-button type="danger" size="small" class="audit-button" v-show="auditButton_1" @click="openDetail">审核</el-button>
    </div>
src/views/exception/components/CompFlightInspection.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1408 @@
<script>
import { defineAsyncComponent } from 'vue'
import TimeShortCuts from '@/sfc/TimeShortCuts.vue'
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('@/views/exception/components/DustLineChart.vue'))
import exceptionApi from '@/api/exceptionApi.js'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import AnalysisCard from './AnalysisCard.vue'
import DutyCompany from '@/sfc/DutyCompany.vue'
import StreetInfo from '@/sfc/StreetInfo.vue'
import historyApi from '@/api/historyApi.js'
import time from '@/utils/time.js'
import lineChart from '@/utils/chartFunction/lineChart.js'
import exceptionOption from '@/utils/chartFunction/exceptionOption.js'
import exception0 from '@/assets/exception/exception0.png'
import exception1 from '@/assets/exception/exception1.png'
import exception2 from '@/assets/exception/exception2.png'
import exception3 from '@/assets/exception/exception3.png'
import exception4 from '@/assets/exception/exception4.png'
import exception5 from '@/assets/exception/exception5.png'
import exception6 from '@/assets/exception/exception6.png'
import exception7 from '@/assets/exception/exception7.png'
export default {
  props: {
    // ç‚¹ä½åå­—
    siteName: {
      type: String,
      default: ''
    },
    // æ—¥æ—¶é—´æˆ–者月时间
    time:{
        type:String,
        default:''
    },
    // å±•示页面的全部
    showAll: {
      type: Boolean,
      default: true
    },
    // 0代表日时间,1代表月时间
    timeType:{
      type:Number,
      default:-1
    }
  },
  components: {
    TimeShortCuts,
    DustLineChart,
    ButtonClick,
    AreaAndmonitorType,
    AnalysisCard,
    DutyCompany,
    StreetInfo
  },
  data() {
    return {
      //  è¡¨å•内容
      form: {
        // ç«™ç‚¹åç§°
        name: '',
        // è¿ç»´å•†
        dutyCompany: [],
        // è¡—道
        street: [],
        // é€‰æ‹©çš„异常类型
        exceptionName: []
      },
      beginTime: '',
      endTime: '',
      // è¿”回的数据
      tableData: [],
      // è¡¨æ ¼å±•示的数据
      displayData: [],
      // è¡¨æ ¼é«˜åº¦
      tableHeight: 400,
      // è¡¨æ ¼æ˜¾ç¤º
      isTableShow: false,
      // å®¡æ ¸è¾…助按钮显示
      auditButton: false,
      // å½“前页
      currentPage: 1,
      // æ¯é¡µæ¡æ•°
      pageSize: 20,
      // è¡¨æ ¼çš„æ€»è®°å½•æ•°
      total: 0,
      // æŸ¥è¯¢æŒ‰é’®æ— æ•°æ®æ—¶
      isNoData: {
        exception0: true,
        exception1: true,
        exception2: true,
        exception3: true,
        exception4: true,
        exception5: true,
        exception6: true,
        exception7: true,
        exception8: true
      },
      // eslint-disable-next-line no-undef
      // å¯¹è¯æ¡†æ˜¾ç¤º
      dialogTableVisible: false,
      // ä¿å­˜å¼‚常对应的店铺名称和设备编号
      exception: {
        // æ–­ç”µæˆ–断网
        exception0: [],
        // æ•°æ®è¶…低
        exception1: [],
        // è¶…æ ‡
        exception2: [],
        // æ•°æ®é•¿æ—¶æ®µæ— æ³¢åЍ
        exception3: [],
        // é‡çº§çªå˜å¼‚常
        exception4: [],
        // ä¸´è¿‘超标异常
        exception5: [],
        // å•日超标次数临界异常
        exception6: [],
        // æ»‘动平均值异常
        exception7: [],
        // æœ‰æ•ˆçއ异叏
        exception8: [],
        // è¯¥æ—¶æ®µçš„异常数量
        exception0Num: 0,
        exception1Num: 0,
        exception2Num: 0,
        exception3Num: 0,
        exception4Num: 0,
        exception5Num: 0,
        exception6Num: 0,
        exception7Num: 0,
        exception8Num: 0
      },
      // ç«™ç‚¹æ€»æ•°é‡
      siteTotal: 0,
      // é€‰ä¸­è¡¨æ ¼å½“前行的数据
      tableCurrentRowData: null,
      // é€‰ä¸­è¡¨æ ¼å½“前行的索引
      selectedRowIndex: -2,
      // é¡µé¢ä¸Šçš„æŒ‰é’®åŠ è½½çŠ¶æ€
      loading: {
        // æŸ¥è¯¢æŒ‰é’®
        queryButton: false,
        // è¡¨æ ¼åŠ è½½ä¸­
        tableLoading: false,
        // ä¸Šä¸€æ¡æŒ‰é’®
        preButton: false,
        // ä¸‹ä¸€æ¡æŒ‰é’®
        afterButton: false,
        // æŠ˜çº¿å›¾
        lineChart: false
      },
      dialog: {
        // æ‰“开对话框请求该区间的历史数据
        historyData: [],
        // è¯¥æ—¶é—´æ®µçš„异常条数
        exceptionTotal: 0,
        // æŠ˜çº¿å›¾é…ç½®é¡¹
        option: {},
        // â€™ä¸Šä¸€æ¡â€˜æŒ‰é’®æ˜¯å¦å¯ä»¥è¢«ç‚¹å‡»çŠ¶æ€
        isPreCantouch: false,
        // â€™ä¸‹ä¸€æ¡â€˜æŒ‰é’®æ˜¯å¦å¯ä»¥è¢«ç‚¹å‡»çŠ¶æ€
        isNextCantouch: false,
        // å¼‚常的前中后区间所有数据
        allExceptionTimeData: []
      },
      // æ ‡è®°ä½
      flag: {
        // åŠ è½½æ—¶ ä¸Šä¸‹æ¡æŒ‰é’®ä¸èƒ½å†ç‚¹å‡»
        banTouch: 0,
        // 0代表分页,1代表不分页
        originClick: 0
      },
      areaColor: null
    }
  },
  setup() {
    const { isExceedOneMonth } = useCommonFunction()
    return {
      isExceedOneMonth
    }
  },
  // ç›‘听  åˆ¤æ–­æŒ‰é’®æ˜¯å¦å¯ç‚¹å‡»
  watch: {
    selectedRowIndex(newVaue) {
      // å¤„于表格的最后一条数据 è®¾ç½®â€˜ä¸Šä¸€æ¡â€™æŒ‰é’®ä¸å¯ç‚¹
      if (newVaue === 0) {
        this.dialog.isPreCantouch = true
        //用户先点了第一条,pre为true,然后点击最后一条,next为true。此时两个按钮都被封锁
        if (this.dialog.isNextCantouch == true) {
          this.dialog.isNextCantouch = false
        }
      }
      // å¤„于表格第一条数据 è®¾ç½®â€˜ä¸Šä¸€æ¡â€™æŒ‰é’®ä¸å¯ç‚¹
      else if (newVaue === this.displayData.length - 1) {
        this.dialog.isNextCantouch = true
        //用户先点了表格最后一条,next为true,然后点击第一条,pre为true。此时两个按钮都被封锁
        if (this.dialog.isPreCantouch == true) {
          this.dialog.isPreCantouch = false
        }
      }
      // å¤„于表格的中间行 å°†æŒ‰é’®è®¾ç½®ä¸ºå¯ç‚¹å‡»çŠ¶æ€
      else {
        this.dialog.isPreCantouch = false
        this.dialog.isNextCantouch = false
      }
    },
    dialogTableVisible() {
      window.addEventListener('resize', this.updateChart)
    },
    // é¡µé¢åŠ è½½æ—¶showAll才会变化一次
    // ä¸ºtrue表示的飞行巡检页面
    showAll(){
        if(this.showAll){
            this.backExceptionDataAWeekAgo()
        }
    },
    // siteName(){
    //   if(this.siteName!=''){
    //     this.beginTime = dayjs(this.month).startOf('month').format('YYYY-MM-DD HH:mm:ss')
    //     this.endTime = dayjs(this.month).endOf('month').format('YYYY-MM-DD HH:mm:ss')
    //     this.backExceptionDataAWeekAgo()
    //     this.getShopNames()
    //   }
    // },
    timeType(){
      if(this.timeType == '0'){
        this.beginTime = dayjs(this.time).format('YYYY-MM-DD 00:00:00')
        this.endTime = dayjs(this.time).format('YYYY-MM-DD 23:59:59')
      }else if(this.timeType == '1'){
        this.beginTime = dayjs(this.time).startOf('month').format('YYYY-MM-DD HH:mm:ss')
        this.endTime = dayjs(this.time).endOf('month').format('YYYY-MM-DD HH:mm:ss')
      }
      this.backExceptionDataAWeekAgo()
      this.getShopNames()
    }
  },
  computed: {
    exceptionAllNum() {
      let sum =
        this.exception.exception0Num +
        this.exception.exception1Num +
        this.exception.exception2Num +
        this.exception.exception3Num +
        this.exception.exception4Num +
        this.exception.exception5Num +
        this.exception.exception6Num +
        this.exception.exception7Num +
        this.exception.exception8Num
      if (sum == 0) {
        return 1
      } else {
        return sum
      }
    },
    long_time_notchange() {
      let sum =
        this.exception.exception0Num +
        this.exception.exception1Num +
        this.exception.exception2Num +
        this.exception.exception3Num +
        this.exception.exception4Num +
        this.exception.exception5Num +
        this.exception.exception6Num +
        this.exception.exception7Num +
        this.exception.exception8Num
      if (sum == 0) {
        return 0
      } 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 -
          (this.exception.exception8Num / this.exceptionAllNum) * 100
        ).toFixed(1)
      }
    },
    // ç¬¬ä¸€æŽ’卡片
    cardRow() {
      return [
        {
          siteName: this.exception.exception4,
          exceptionType: '4',
          exceptionName: '量级突变',
          iconSrc: exception4,
          siteNum: this.exception.exception4.length,
          exceptionNum: this.exception.exception4Num,
          isNoDataStatus: this.isNoData.exception4,
          span: 5
        },
        {
          siteName: this.exception.exception5,
          exceptionType: '5',
          exceptionName: '临近超标异常',
          iconSrc: exception5,
          siteNum: this.exception.exception5.length,
          exceptionNum: this.exception.exception5Num,
          isNoDataStatus: this.isNoData.exception5,
          span: 5
        },
        {
          siteName: this.exception.exception8,
          exceptionType: '8',
          exceptionName: '有效率异常',
          iconSrc: exception0,
          siteNum: this.exception.exception8.length,
          exceptionNum: this.exception.exception8Num,
          isNoDataStatus: this.isNoData.exception8,
          span: 5
        },
        {
          siteName: this.exception.exception6,
          exceptionType: '6',
          exceptionName: '单日超标次数临界异常',
          iconSrc: exception6,
          siteNum: this.exception.exception6.length,
          exceptionNum: this.exception.exception6Num,
          isNoDataStatus: this.isNoData.exception6,
          span: 5
        },
        {
          siteName: this.exception.exception7,
          exceptionType: '7',
          exceptionName: '变化趋势异常',
          iconSrc: exception7,
          siteNum: this.exception.exception7.length,
          exceptionNum: this.exception.exception7Num,
          isNoDataStatus: this.isNoData.exception7,
          span: 4
        },
        {
          siteName: this.exception.exception0,
          exceptionType: '0',
          exceptionName: '数据缺失异常',
          iconSrc: exception0,
          siteNum: this.exception.exception0.length,
          exceptionNum: this.exception.exception0Num,
          isNoDataStatus: this.isNoData.exception0,
          span: 6
        },
        {
          siteName: this.exception.exception1,
          exceptionType: '1',
          exceptionName: '数据超低',
          iconSrc: exception1,
          siteNum: this.exception.exception1.length,
          exceptionNum: this.exception.exception1Num,
          isNoDataStatus: this.isNoData.exception1,
          span: 6
        },
        {
          siteName: this.exception.exception2,
          exceptionType: '2',
          exceptionName: '超标',
          iconSrc: exception2,
          siteNum: this.exception.exception2.length,
          exceptionNum: this.exception.exception2Num,
          isNoDataStatus: this.isNoData.exception2,
          span: 6
        },
        {
          siteName: this.exception.exception3,
          exceptionType: '3',
          exceptionName: '数据长时段无波动',
          iconSrc: exception3,
          siteNum: this.exception.exception3.length,
          exceptionNum: this.exception.exception3Num,
          isNoDataStatus: this.isNoData.exception3,
          span: 6
        }
      ]
    },
  },
  mounted() {
    this.getSiteNume()
    // é£žè¡Œå·¡æ£€é¡µé¢ï¼Œè¿›åŽ»åŠ è½½
    if(this.showAll == true){
      this.backExceptionDataAWeekAgo()
      this.getShopNames()
    }
  },
  methods: {
    /**
     * æœ‰æ•ˆçއ异叏 è®¾ç½®æŠ˜çº¿å›¾é…ç½®é¡¹
     * @param:
     * @returns:
     */
    validProcess() {
      // x轴数据
      let xList = time.ascTime(
        this.tableCurrentRowData.beginTime,
        this.tableCurrentRowData.endTime,
        15
      )
      // y轴数据
      let yList = []
      xList.forEach((item) => {
        // æŸ¥æ‰¾è¯¥æ—¶é—´çš„æ•°æ®
        let r = lineChart.findDate(this.dialog.historyData, item)
        if (r) {
          yList.push(r.dustValue)
        } else {
          yList.push(null)
        }
      })
      // é¢œè‰²èƒŒæ™¯åŒºé—´
      // å¾—到无数据的时间点或flag不等于N的时间点
      let noDataTime = time.invalidTime(this.dialog.historyData, xList)
      let rangeTime = time.seriesTime(noDataTime, 15)
      // let rangeTime_1 = time.splitTime(rangeTime)
      // å¾—到背景区间的配置
      let areaObj = lineChart.getMarkArea(rangeTime, '异常')
      // let lineColor = lineChart.getLineColor(rangeTime,xList)
      let lineColor = []
      // console.log('线段',lineColor);
      // ä¼ å…¥å‚æ•°
      this.dialog.option = exceptionOption.setExceptionChartOption(
        xList,
        yList,
        '',
        '',
        '',
        '',
        this.tableCurrentRowData.exception,
        areaObj,
        lineColor,
        this.tableCurrentRowData.exceptionType
      )
    },
    getImageUrl(name) {
      return new URL(`../../lib/Carousel/assets/${name}`, import.meta.url).href
    },
    // æ”¾å›žç«™ç‚¹æ€»æ•°é‡
    getSiteNume() {
      exceptionApi.getSitesNum().then((res) => {
        this.siteTotal = res.data.data.length
      })
    },
    /**
     * description:点击异常站点名字时 è¿”回的数据
     * @param:
     * @createTime:2023-08-17
     * @returns:
     */
    getAbnormalDataByClick(val) {
      this.flag.originClick = 1
      // æ˜¾ç¤ºè¡¨æ ¼
      this.isTableShow = true
      this.tableData = val
      this.total = this.tableData.length
      // é»˜è®¤æ˜¾ç¤ºç¬¬ä¸€é¡µ
      this.handleCurrentChange(1)
    },
    // ç‚¹å‡»è¡¨æ ¼çš„行时
    selectTableRow() {
      // èŽ·å–å½“å‰è¡Œçš„ç´¢å¼•
      this.selectedRowIndex = this.displayData.indexOf(this.tableCurrentRowData)
    },
    /**
     * description:断电或断网时设置的表格数据
     */
    setOfflineTbleData() {
      // æ— æ•°æ®æ—¶çš„æ—¶é—´æ•°ç»„ æ—¶é—´ç›¸å·®15分钟
      const abnormalTimeTenMinute = index.descFiftyTime(
        this.tableCurrentRowData.beginTime,
        this.tableCurrentRowData.endTime
      )
      // ä¿å­˜æ— æ•°æ®æ—¶è¡¨æ ¼æ¡æ•°
      this.dialog.exceptionTotal = abnormalTimeTenMinute.length
      // åŽ»é™¤ä¾›ç”µå¼‚å¸¸å’ŒæŽ‰çº¿åŒºé—´çš„ç¬¬ä¸€ä¸ªæœ‰å…ƒç´ çš„å€¼
      this.dialog.historyData = []
      for (let i = 0; i < abnormalTimeTenMinute.length; i++) {
        this.dialog.historyData.push({
          name: this.tableCurrentRowData.name,
          mnCode: this.tableCurrentRowData.mnCode,
          dutyCompany: this.tableCurrentRowData.dutyCompany,
          lst: abnormalTimeTenMinute[i],
          dustValue: ''
        })
      }
    },
    // æ®µç”µæˆ–断网区间无数据,需要补充。其他的都有数据,直接一次请求全部时段就好
    // æ ¹æ®å¼‚常区间构造前后端首尾 å‰åŒºé—´ ä¸­é—´åŒºé—´ åŽåŒºé—´
    // åˆ¤æ–­æ˜¯æ®µç”µæˆ–断网?是则请求前后区间,否则只请求一次完整的
    // å¾—到最终数据
    // å†åˆ¤æ–­å¼‚常种类 ï¼Œè¿›è¡Œè®¾ç½®é…ç½®é¡¹
    /**
     * description:一次请求回前中后区间的数据,对数据进行分析
     * @param: å‰ä¸­åŽåŒºé—´çš„请求参数,前中后的总区间时间,异常开始时间,一场结束时间
     */
    otherExceptionRequest(allTimeArgs, allTime, exceptionBT, exceptionET) {
      // æŠ˜çº¿å›¾åŠ è½½ä¸­æ•ˆæžœ
      this.loading.lineChart = true
      historyApi.queryHistoryData(allTimeArgs).then((result) => {
        this.dialog.allExceptionTimeData = result.data.data
        //  æ•°æ®ç¼ºå¤±å¼‚常时重新设置表格
        if (this.tableCurrentRowData.exceptionType == '0') {
          this.setOfflineTbleData()
        }
        // x轴日期时间
        let dateList = []
        // yè½´ è¶…标油烟浓度
        let dustValue = []
        let timeAndValue = {}
        // ä»Žæ·»åŠ äº†é¦–ä½åŒºé—´çš„å¼€å§‹å’Œç»“æŸæ—¶é—´è¿›è¡ŒéåŽ† ä¿è¯æ—¶é—´ä»¥15分钟为间隔
        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)
        // è®¾ç½®æŠ˜çº¿å›¾é…ç½®é¡¹
        // this.reSetChart(dateList, dustValue, exceptionBT, exceptionET, startIndex, endIndex)
        this.dialog.option = exceptionOption.setExceptionChartOption(
          dateList,
          dustValue,
          exceptionBT,
          exceptionET,
          startIndex,
          endIndex,
          this.tableCurrentRowData.exception,
          '',
          '',
          this.tableCurrentRowData.exceptionType
        )
        this.flag.banTouch = 0
        this.loading.lineChart = false
      })
    },
    /**
     * description:划分出异常起始时间,构造请求前中后的参数
     */
    timeAndDataProcessed() {
      //异常的开始时间 ç»“束时间
      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 paramsAllTime = index.requestGetParms(
        this.tableCurrentRowData.name,
        beforeAndAfterTime[0],
        beforeAndAfterTime[3]
      )
      // å°†å¼‚常数据进行预处理,随后将结果作为折线图的配置项
      this.otherExceptionRequest(
        paramsAllTime,
        beforeAndAfterTime,
        exceptionBeginTime,
        exceptionEndTime
      )
    },
    /**
     * description:获取下一条异常信息
     */
    getPreviousRowData() {
      //     // ä¸æ˜¯è¡¨æ ¼çš„æœ€åŽä¸€è¡Œ
      if (this.selectedRowIndex < this.displayData.length - 1) {
        // ç‚¹å‡»è¿‡ç¨‹ä¸­ é”ä½ä¸Šä¸‹æ¡æŒ‰é’®  åœ¨è®¾ç½®å®Œå›¾å½¢é…ç½®é¡¹åŽè§£é”
        this.flag.banTouch = 1
        //得到上一行数据索引
        this.selectedRowIndex = this.selectedRowIndex + 1
        // å¾—到上一行的数据
        this.tableCurrentRowData = this.displayData[this.selectedRowIndex]
        this.loading.preButton = true
        historyApi
          .queryHistoryData({
            siteName: this.tableCurrentRowData.name,
            beginTime: this.tableCurrentRowData.beginTime,
            endTime: this.tableCurrentRowData.endTime
          })
          .then((response) => {
            // ä¿å­˜è¿”回的超标数据
            this.dialog.historyData = response.data.data
            this.dialog.exceptionTotal = response.data.data.length
            // é€»è¾‘处理
            if (this.tableCurrentRowData.exceptionType != '8') {
              this.timeAndDataProcessed()
            } else {
              this.loading.lineChart = true
              this.validProcess()
              this.loading.lineChart = false
              this.flag.banTouch = 0
            }
            this.loading.preButton = false
          })
      }
    },
    /**
     * description:获取下一条异常信息
     */
    getNextRowData() {
      // ä¸æ˜¯è¡¨æ ¼çš„第一行
      if (this.selectedRowIndex !== 0) {
        // ç‚¹å‡»è¿‡ç¨‹ä¸­ é”ä½ä¸Šä¸‹æ¡æŒ‰é’®  åœ¨è®¾ç½®å®Œå›¾å½¢é…ç½®é¡¹åŽè§£é”
        this.flag.banTouch = 1
        //得到上一行数据索引
        this.selectedRowIndex = this.selectedRowIndex - 1
        // å¾—到上一行的数据
        this.tableCurrentRowData = this.displayData[this.selectedRowIndex]
        this.loading.afterButton = true
        historyApi
          .queryHistoryData({
            siteName: this.tableCurrentRowData.name,
            beginTime: this.tableCurrentRowData.beginTime,
            endTime: this.tableCurrentRowData.endTime
          })
          .then((response) => {
            // ä¿å­˜è¿”回的超标数据
            this.dialog.historyData = response.data.data
            this.dialog.exceptionTotal = response.data.data.length
            // é€»è¾‘处理
            if (this.tableCurrentRowData.exceptionType != '8') {
              this.timeAndDataProcessed()
            } else {
              this.loading.lineChart = true
              this.validProcess()
              this.loading.lineChart = false
              this.flag.banTouch = 0
            }
            this.loading.afterButton = false
          })
      }
    },
    /**
     * description:从子组件获得某站点该时段的异常数据
     * @createTime:2023-08-18
     */
    backExceptionData(val1, val2) {
      this.displayData = val1
      this.total = val2
    },
    // æŸ¥è¯¢å¼‚常数据的站点名字和数量
    queryExceptionSite(url, exceptionType) {
      let params = {}
      params['beginTime'] = this.beginTime
      params['endTime'] = this.endTime
      params['exceptionType'] = exceptionType
      if(this.siteName){
        params['siteName'] = this.siteName
      }
      // if (this.form.street.length != 0) {
      //   params['street'] = this.form.street.join()
      // }
      if (this.form.dutyCompany.length != 0) {
        params['dutyCompany'] = this.form.dutyCompany.join()
      }
      return this.$http.get(url, { params: params })
    },
    /**
     * description:当用户改变查询的时间区间时,会根据该区间查询各异常的站点,查询该时间区间的各异常数量
     * @createTime:2023-08-18
     */
    getShopNames() {
      /* æŸ¥è¯¢å¼‚常的站点 */
      this.queryExceptionSite('/dust/sitenamecode', 0).then((result) => {
        this.exception.exception0 = result.data.data
        if (result.data.data.length == 0) {
          this.isNoData.exception0 = true
          return
        }
        this.isNoData.exception0 = false
      })
      this.queryExceptionSite('/dust/sitenamecode', 1).then((result) => {
        this.exception.exception1 = result.data.data
        if (result.data.data.length == 0) {
          this.isNoData.exception1 = true
          return
        }
        this.isNoData.exception1 = false
      })
      this.queryExceptionSite('/dust/sitenamecode', 2).then((result) => {
        this.exception.exception2 = result.data.data
        if (result.data.data.length == 0) {
          this.isNoData.exception2 = true
          return
        }
        this.isNoData.exception2 = false
      })
      this.queryExceptionSite('/dust/sitenamecode', 3).then((result) => {
        this.exception.exception3 = result.data.data
        if (result.data.data.length == 0) {
          this.isNoData.exception3 = true
          return
        }
        this.isNoData.exception3 = false
      })
      this.queryExceptionSite('/dust/sitenamecode', 4).then((result) => {
        this.exception.exception4 = result.data.data
        if (result.data.data.length == 0) {
          this.isNoData.exception4 = true
          return
        }
        this.isNoData.exception4 = false
      })
      this.queryExceptionSite('/dust/sitenamecode', 5).then((result) => {
        this.exception.exception5 = result.data.data
        if (result.data.data.length == 0) {
          this.isNoData.exception5 = true
          return
        }
        this.isNoData.exception5 = false
      })
      this.queryExceptionSite('/dust/sitenamecode', 6).then((result) => {
        this.exception.exception6 = result.data.data
        if (result.data.data.length == 0) {
          this.isNoData.exception6 = true
          return
        }
        this.isNoData.exception6 = false
      })
      this.queryExceptionSite('/dust/sitenamecode', 7).then((result) => {
        this.exception.exception7 = result.data.data
        if (result.data.data.length == 0) {
          this.isNoData.exception7 = true
          return
        }
        this.isNoData.exception7 = false
      })
      this.queryExceptionSite('/dust/sitenamecode', 8).then((result) => {
        this.exception.exception8 = result.data.data
        if (result.data.data.length == 0) {
          this.isNoData.exception8 = true
          return
        }
        this.isNoData.exception8 = false
      })
      /* å¼‚常异常数量 */
      this.queryExceptionSite('/dust/exceptionnum', 0).then((result) => {
        this.exception.exception0Num = result.data.data
      })
      this.queryExceptionSite('/dust/exceptionnum', 1).then((result) => {
        this.exception.exception1Num = result.data.data
      })
      this.queryExceptionSite('/dust/exceptionnum', 2).then((result) => {
        this.exception.exception2Num = result.data.data
      })
      this.queryExceptionSite('/dust/exceptionnum', 3).then((result) => {
        this.exception.exception3Num = result.data.data
      })
      this.queryExceptionSite('/dust/exceptionnum', 4).then((result) => {
        this.exception.exception4Num = result.data.data
      })
      this.queryExceptionSite('/dust/exceptionnum', 5).then((result) => {
        this.exception.exception5Num = result.data.data
      })
      this.queryExceptionSite('/dust/exceptionnum', 6).then((result) => {
        this.exception.exception6Num = result.data.data
      })
      this.queryExceptionSite('/dust/exceptionnum', 7).then((result) => {
        this.exception.exception7Num = result.data.data
      })
      this.queryExceptionSite('/dust/exceptionnum', 8).then((result) => {
        this.exception.exception8Num = result.data.data
      })
    },
    /**
     * description:显示对话框,返回该异常时间段的所有数据
     * @param:点击‘查看详情’的该行所有字段数据
     * @createTime:2023-08-18
     */
    showDialog(row) {
      // æ‰“开对话框
      this.dialogTableVisible = true
      // ä¿å­˜å½“前行数据
      this.tableCurrentRowData = row
      // èŽ·å–å½“å‰è¡Œçš„ç´¢å¼•
      this.selectedRowIndex = this.displayData.indexOf(row)
      //根据当前行的编号,起始时间来 è¯·æ±‚异常数据
      // å¯¹è¯·æ±‚到的数据进行首尾拼接
      // å¾—到前后完整数据进行绘制图形
      historyApi
        .queryHistoryData({
          siteName: row.name,
          beginTime: row.beginTime,
          endTime: row.endTime
        })
        .then((response) => {
          // ä¿å­˜è¿”回的超标数据
          this.dialog.historyData = response.data.data
          this.dialog.exceptionTotal = response.data.data.length
          // é€»è¾‘处理
          if (this.tableCurrentRowData.exceptionType != '8') {
            this.timeAndDataProcessed()
          } else {
            this.loading.lineChart = true
            this.validProcess()
            this.loading.lineChart = false
            this.flag.banTouch = 0
          }
        })
    },
    /**
     * description:条件查询异常的数据
     * @createTime:2023-08-18
     */
    handleSubmit() {
      if (this.isExceedOneMonth(this.beginTime, this.endTime)) {
        alert('时间跨度不能超过一个月')
        return
      }
      // æ›´æ–°å¼‚常分析
      this.getShopNames()
      this.loading.queryButton = true
      this.flag.originClick = 0
      this.loading.tableLoading = true
      let params = {}
      params['page'] = this.currentPage
      params['pageSize'] = this.pageSize
      if (this.siteName) {
        params['siteName'] = this.siteName
      }
      // if (this.form.street.length != 0) {
      //   params['street'] = this.form.street.join()
      // }
      if (this.form.dutyCompany.length != 0) {
        params['dutyCompany'] = this.form.dutyCompany.join()
      }
      params['beginTime'] = this.beginTime
      params['endTime'] = this.endTime
      this.$http.get('/dust/exceptiondata2', { params: params }).then((response) => {
        // ä¿å­˜è¿”回的
        this.displayData = response.data.data.rows
        this.loading.queryButton = false
        this.loading.tableLoading = false
        if (response.data.data.total == 0) {
          ElMessage('该时段无数据')
          this.isTableShow = false
          return
        }
        this.isTableShow = true
        this.total = response.data.data.total
        // ç§»é™¤ç©ºæ•°æ®çŠ¶æ€
      })
    },
    /**
     * description:打开页面默认加载最近一周的异常数据
     * @createTime:2023-08-18
     */
    backExceptionDataAWeekAgo() {
      this.loading.tableLoading = true
      let params = {}
      if (this.siteName) {
        params['siteName'] = this.siteName
      }
      params['beginTime'] = this.beginTime
      params['endTime'] = this.endTime
      console.log('name',this.siteName)
      this.$http.get('/dust/exceptiondata', { params: params }).then((response) => {
        // ä¿å­˜è¿”回的
        // this.tableData = response.data.data.rows;
        this.displayData = response.data.data.rows
        this.loading.tableLoading = false
        if (response.data.data.total == 0) {
          ElMessage('该时段无数据')
          this.isTableShow = false
          return
        }
        this.isTableShow = true
        this.total = response.data.data.total
      })
    },
    /**
     * description:将中国标准时间转为指定格式(该组件返回的标准时间的格式,所以必须的加这个函数)
     * @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')
    },
    // åŠŸèƒ½ï¼šè¡¨æ ¼é«˜åº¦æ ¹æ®å†…å®¹è‡ªé€‚åº”
    calTableHeight() {
      const h1 = this.$refs.h1.$el.offsetHeight
      const h2 = this.$refs.h2.$el.offsetHeight
      const h3 = this.$refs.h3.$el.offsetHeight
      const h4 = this.$refs.h4.$el.offsetHeight
      // å…¶ä¸­ä¸€ä¸ª40是盒子的总外边距
      this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - ${h3}px - ${h4}px - 40px - var(--el-main-padding) * 2)`
    },
    // é¡µå¤§å°æ”¹å˜æ—¶è§¦å‘
    handleSizeChange(val) {
      this.pageSize = val
      // æ”¹å˜æ¯é¡µæ˜¾ç¤ºæ•°ç›®æ—¶è·³åˆ°å½“前页
      this.handleCurrentChange(1)
    },
    // é¡µå·æ”¹å˜æ—¶è§¦å‘
    /**
     * description:页号改变时触发
     * @param: å½“前页,标记位(0代表是点击‘查询’触发的,1代表时点击异常站点文本按钮触发的)
     * @createTime:2023-08-17
     * @returns:
     */
    handleCurrentChange(val) {
      // å°†å½“前页号给currentPage
      this.currentPage = val
      // é¡µé¢å˜åŒ–时调用 æŸ¥è¯¢æ•°æ®å‡½æ•°
      if (this.flag.originClick == 0) {
        this.handleSubmit()
      } else if (this.flag.originClick == 1) {
        const startIndex = (val - 1) * this.pageSize
        const endIndex = startIndex + this.pageSize
        this.displayData = this.tableData.slice(startIndex, endIndex)
      }
    },
    // è¡¨æ ¼åºå·é€’增
    indexMethod1(index) {
      return index + 1 + (this.currentPage - 1) * this.pageSize
    },
    // è¡¨æ ¼åºå·é€’增
    indexMethod2(index) {
      return index + 1
    }
  }
}
</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>
            <el-form-item v-show="!showAll">
              <span class="site-text"> ç‚¹ä½åç§°:</span>
              <span> {{ this.siteName }}</span>
            </el-form-item>
            <el-form-item v-show="showAll">
              <DutyCompany @submitDutyCompanyValue="(n) => (form.dutyCompany = n)"> </DutyCompany>
            </el-form-item>
            <!-- <el-form-item v-show="showAll">
              <StreetInfo @submitStreetValue="(n) => (form.street = n)"> </StreetInfo>
            </el-form-item> -->
            <el-form-item>
              <TimeShortCuts timeType="day" @submit-time="giveTime" :beginAndEndTime="[beginTime,endTime]"></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-row>
    </el-row>
    <!-- å¼‚常分析 -->
    <el-row ref="h3">
      <el-col>
        <el-card class="card-container">
          <template #header>
            <div class="card-header">异常分析</div>
          </template>
          <el-row :gutter="20">
            <el-col v-for="item in cardRow" :key="item.exceptionType" :span="item.span">
              <AnalysisCard
                :site-name="item.siteName"
                :exception-type="item.exceptionType"
                :begin-time="beginTime"
                :end-time="endTime"
                :exception-name="item.exceptionName"
                :site-num="item.siteNum"
                :exception-num="item.exceptionNum"
                :exception-all-num="exceptionAllNum"
                :site-num-all="siteTotal"
                :isNoDataStatus="item.isNoDataStatus"
                :icon="item.iconSrc"
                @get-abnormal-data-by-click="getAbnormalDataByClick"
                class="card-row"
              >
                >
              </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>{{ tableCurrentRowData.beginTime }} ~
              {{ tableCurrentRowData.endTime }}
            </div>
          </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>
        </div>
      </template>
      <!-- å›¾å½¢ -->
      <DustLineChart
        :option="dialog.option"
        :is-open-dialog="dialogTableVisible"
        v-loading="loading.lineChart"
      ></DustLineChart>
      <!-- è¡¨æ ¼ -->
      <div>
        <el-table :data="dialog.historyData" size="default" height="200" border>
          <el-table-column
            type="index"
            label="序号"
            width="60px"
            align="center"
            fixed
            :index="indexMethod2"
          ></el-table-column>
          <el-table-column prop="lst" label="采集时间" align="center" show-overflow-tooltip />
          <el-table-column
            prop="dustValue"
            label="TSP(mg/m³)"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column prop="flag" label="数据标识" align="center" show-overflow-tooltip />
        </el-table>
      </div>
      <template #footer>
        <div class="dialog-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' ||
              tableCurrentRowData.exceptionType == '5' ||
              tableCurrentRowData.exceptionType == '6' ||
              tableCurrentRowData.exceptionType == '7' ||
              tableCurrentRowData.exceptionType == '8'
            "
            >异常数据:</span
          >
          <span class="table-line-num">{{ dialog.exceptionTotal }}条</span>
          <span v-show="tableCurrentRowData.exceptionType == '0'"> (逻辑计算)</span>
        </el-tag>
        <el-text v-show="tableCurrentRowData.exceptionType == '8'" type="warning" class="dialog-footer-text">数据标识A为数据长期缺失,系统自动补全</el-text>
      </div>
      </template>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
.el-row {
  margin-left: 10px;
}
/* æ¡ä»¶æŸ¥è¯¢æ¨¡å—的样式 */
.el-form {
  margin: 10px;
}
img {
  margin-right: 5px;
}
.head-container-search {
  float: right;
}
.head-describtion-text {
  justify-content: flex-end;
  margin-bottom: 2px;
  margin-right: 20px;
  font-size: 14px;
  color: gray;
}
.button-set {
  margin: 10px;
}
/* æ¡ä»¶æŸ¥è¯¢æ¨¡å—结束 */
/* å¼‚常分析模块的样式 */
.card-text1 {
  /* é»‘体的异常名字部分 */
  margin: 10px;
}
.card-text1 + div {
  /* é»‘体的异常名字下面的 */
  margin: 12px;
}
.card-exception-buttom {
  /* å¼‚常站点文本按钮区域 */
  padding: 11px;
}
.card-header {
  margin-left: 5px;
  font-size: 18px;
  font-weight: bold;
}
.card-content-unnormal {
  min-height: 200px;
  border: 2px solid #ffcf8b;
  border-radius: 20px;
}
.card-content-normal {
  min-height: 200px;
  border: 2px solid red;
  border-radius: 20px;
}
.card-header-text {
  font-size: 16px;
  font-weight: bold;
  margin-top: 4px;
  margin-left: 4px;
}
.card-content-text {
  white-space: nowrap;
}
.card-exceptionname-text1 {
  /*  å¼‚常站点占比 */
  font-size: 14px;
  white-space: nowrap;
}
.card-exceptionname-text2 {
  /* å¼‚常数占比的外边距 */
  font-size: 14px;
  white-space: nowrap;
}
.text-blank {
  /* é€—号 */
  margin-right: 10px;
  color: #000000;
}
.card-row {
  margin-bottom: 10px;
}
/* å¼‚常分析模块结束 */
/* éšè—è¡¨æ ¼æŒ‰é’®ç»„样式 */
.el-button-group {
  margin: 10px 0px 10px 10px;
}
.i-ep-Arrow {
  margin-left: 6px;
  margin-bottom: 2px;
  font-size: 1.2em;
}
/* éšè—è¡¨æ ¼æŒ‰é’®ç»„样式结束 */
/* è¡¨æ ¼æ¨¡å—的样式 */
.el-table {
  color: #333333;
}
/* è¡¨æ ¼æ¨¡å—结束 */
/* æŸ¥çœ‹è¯¦æƒ…对话框模块的样式 */
.diag-head {
  /* å¯¹è¯æ¡†å¤´éƒ¨åŒºåŸŸ */
  min-height: 200px;
}
.diag-head-text1 {
  /* å¯¹è¯æ¡†å¤´éƒ¨çš„属性字段加粗 */
  font-weight: bold;
}
.diag-head-text > div {
  /*  å¯¹è¯æ¡†å¼‚常时间段 */
  margin-top: 15px;
}
.diag-head-text {
  margin: 10px;
  padding: 10px;
  background: linear-gradient(90deg, #00c9ff 0%, #92fe9d 100%);
  border: 2px solid #7bc0fc;
}
.chart-jump-button {
  display: flex;
  justify-content: right;
}
.mx-1 {
  /* position: absolute;
  left: 10px;
  bottom: 10px; */
  justify-content: flex-start;
}
.dialog-footer{
  display: flex;
}
.dialog-footer-text {
  justify-content: flex-end;
  margin-left: auto;
  font-size: 14px;
  /* color: #333333; */
}
/* æŸ¥çœ‹è¯¦æƒ…对话框模块结束 */
</style>
src/views/exception/components/SubFlightInspection.vue
ÎļþÒÑɾ³ý
src/views/risk_assessment/DataIndexRank.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,302 @@
<script>
import TimeShortCuts from '@/sfc/TimeShortCuts.vue'
import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'
import { useCommonFunction } from '../../utils/common.js'
import requetsApi from '@/api/exportExcel/requetsApi.js'
import statisticApi from '@/api/statistic/statisticApi.js'
import dayjs from 'dayjs'
import ButtonExportExcel from '@/sfc/ButtonExportExcel.vue'
import ButtonClick from '@/sfc/ButtonClick.vue'
export default {
  components: {
    TimeShortCuts,
    AreaAndmonitorType,
    ButtonExportExcel,
    ButtonClick
  },
  data() {
    return {
      // å½“前页
      currentPage: 1,
      // æ¯é¡µæ¡æ•°
      pageSize: 20,
      total: 0,
      //   è¡¨æ ¼æ•°æ®
      tableData: [],
      isNoData: true,
      loading: false,
      // ç»Ÿè®¡åˆ†æžæŒ‰é’®åŠ è½½ä¸­
      queryButton: false,
      // å¯¼å‡ºæŒ‰é’®åŠ è½½ä¸­
      exportButton: false,
      form: {
        // å¼€å§‹æ—¶é—´
        beginTime: '',
        // ç»“束时间
        endTime: ''
      },
      tableHeight: '600',
      orderProp: 'dayAvg',
      order: 'descending'
    }
  },
  setup() {
    // å¼•å…¥ ç™¾åˆ†å·æ¯”较大小 å¯¼å‡ºåŠŸèƒ½
    const { cmpp, exportToExcel, percentFormatter } = useCommonFunction()
    return { cmpp, exportToExcel, percentFormatter }
  },
  mounted() {
    this.fetchData()
    this.calTableHeight()
  },
  methods: {
    // åŠŸèƒ½ï¼šå¯¼å‡ºä¸ºExcel
    exportData() {
      let params = {
        beginTime: this.form.beginTime,
        endTime: this.form.endTime
      }
      this.exportButton = true
      requetsApi.fetchAllData(params).then((res) => {
        const data = res.data.data
        const tableColumns = [
          'name',
          'mnCode',
          'lst',
          'dayAvg',
          'min',
          'max',
          'dayOnline',
          'dayValid',
          'dayExceeding'
        ]
        const excelColumns = [
          ['A1', '站点名称'],
          ['B1', '设备编号'],
          ['C1', '监测日期'],
          ['D1', '平均值'],
          ['E1', '最小值'],
          ['F1', '最大值'],
          ['G1', '在线率'],
          ['H1', '有效率'],
          ['I1', '超标率']
        ]
        this.exportToExcel(data, tableColumns, excelColumns, '分析表.xlsx')
        this.exportButton = false
      })
    },
    // åŠŸèƒ½ï¼šæ”¹å˜è¡¨æ ¼æŸä¸ªå•å…ƒæ ¼çš„é¢œè‰²
    tableCellClassName({ row, columnIndex }) {
      // å¹³å‡å€¼ä¸æ»¡è¶³æ ‡å‡†æ—¶
      if (columnIndex == 4) {
        if (row.dayAvg >= 0.8) {
          return 'warning-row'
        }
      }
      if (columnIndex == 7) {
        if (row.dayOnline < 0.9) {
          return 'red-color'
        }
      }
      if (columnIndex == 8) {
        if (row.dayValid < 0.9) {
          return 'red-color'
        }
      }
    },
    // åŠŸèƒ½ï¼šè¡¨æ ¼é«˜åº¦æ ¹æ®å†…å®¹è‡ªé€‚åº”
    calTableHeight() {
      const h1 = this.$refs.h1.$el.offsetHeight
      const h2 = this.$refs.h2.$el.offsetHeight
      // å…¶ä¸­ä¸€ä¸ª40是盒子的总外边距
      this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - 40px - 120px - var(--el-main-padding) * 2`
    },
    // é¡µå¤§å°æ”¹å˜æ—¶è§¦å‘
    handleSizeChange(val) {
      this.pageSize = val
      // æ”¹å˜æ¯é¡µæ˜¾ç¤ºæ•°ç›®æ—¶è·³åˆ°å½“前页
      this.handleCurrentChange(1)
    },
    // é¡µå·æ”¹å˜æ—¶è§¦å‘
    handleCurrentChange(val) {
      // å°†å½“前页号给currentPage
      this.currentPage = val
      // é¡µé¢å˜åŒ–时调用 æŸ¥è¯¢æ•°æ®å‡½æ•°
      this.fetchData()
    },
    //序号递增
    indexMethod(index) {
      return index + 1 + (this.currentPage - 1) * this.pageSize
    },
    giveTime(val) {
      //将中国标准时间转为指定格式(该组件返回的标准时间的格式,所以必须的加这个函数)
      this.form.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss')
      this.form.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss')
    },
    // ç‚¹å‡»ç»Ÿè®¡æŒ‰é’®
    fetchData(p) {
      if (p) {
        this.orderProp = p.prop
        this.order = p.order
      }
      let params = {
        page: this.currentPage,
        pageSize: this.pageSize,
        siteName: '',
        orderProp: this.orderProp,
        //排序 ascending æ­£åºï¼Œdescending é™åº
        asc: this.order == 'ascending'
      }
      if (this.form.beginTime) {
        params['beginTime'] = this.form.beginTime
      }
      if (this.form.endTime) {
        params['endTime'] = this.form.endTime
      }
      this.loading = true
      this.queryButton = true
      this.isNoData = false
      statisticApi.fetchDayStatisticByOrder(params).then((response) => {
        this.tableData = response.data.data.rows
        this.loading = false
        this.queryButton = false
        if (response.data.data.total == 0) {
          this.isNoData = true
          return
        }
        // ç§»é™¤ç©ºæ•°æ®çŠ¶æ€
        this.isNoData = false
        this.total = response.data.data.total
      })
    },
    openDetail(row) {
      const encodedSiteName = encodeURIComponent(row.name)
      const timeType = '0'
      const jumpPage = '2'
      this.$router.push(`/exceptionDetail/${encodedSiteName}/${row.lst}/${timeType}/${jumpPage}`)
    }
  }
}
</script>
<template>
  <el-form :inline="true" :model="form" ref="h1">
    <el-form-item>
      <AreaAndmonitorType></AreaAndmonitorType>
    </el-form-item>
    <el-form-item>
      <TimeShortCuts timeType="currentMonth" @submit-time="giveTime"></TimeShortCuts>
    </el-form-item>
    <el-form-item>
      <ButtonClick
        style="margin-right: 12px"
        content="数据排名"
        type="primary"
        :loading="queryButton"
        @do-search="fetchData"
      ></ButtonClick>
      <ButtonExportExcel
        content="导出数据"
        type="success"
        :loading="exportButton"
        @do-export="exportData"
      ></ButtonExportExcel>
    </el-form-item>
  </el-form>
  <el-card v-show="!isNoData">
    <el-table
      :data="tableData"
      :height="tableHeight"
      style="width: 100%"
      v-loading="loading"
      :cell-class-name="tableCellClassName"
      @sort-change="fetchData"
    >
      <el-table-column
        type="index"
        prop="name"
        label="序号"
        :index="indexMethod"
        fixed
        show-overflow-tooltip
      />
      <el-table-column prop="name" label="点位名称" show-overflow-tooltip width="300">
        <template #default="{ row }">
          <el-button type="primary" text @click="openDetail(row)">
            <span class="rank-site">{{ row.name }}</span></el-button
          >
        </template>
      </el-table-column>
      <el-table-column prop="mnCode" label="设备编码" show-overflow-tooltip />
      <el-table-column prop="lst" label="监测日期" sortable="custom" show-overflow-tooltip />
      <el-table-column prop="dayAvg" label="日平均值" sortable="custom" show-overflow-tooltip />
      <el-table-column prop="min" label="日最小值" sortable="custom" show-overflow-tooltip />
      <el-table-column prop="max" label="日最大值" sortable="custom" show-overflow-tooltip />
      <el-table-column prop="dayOnline" label="日在线率" sortable="custom" show-overflow-tooltip>
        <template #default="{ row }">
          {{ percentFormatter(row.dayOnline) }}
        </template>
      </el-table-column>
      <el-table-column prop="dayValid" label="日有效率" sortable="custom" show-overflow-tooltip>
        <template #default="{ row }">
          {{ percentFormatter(row.dayValid) }}
        </template>
      </el-table-column>
      <el-table-column prop="dayExceeding" label="日超标率" sortable="custom" show-overflow-tooltip>
        <template #default="{ row }">
          {{ percentFormatter(row.dayExceeding) }}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      ref="h2"
      :page-sizes="[10, 20, 50, 100]"
      :total="total"
      layout="total,sizes, prev, pager, next, jumper"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      @update:current-page="handleCurrentChange"
      @update:page-size="handleSizeChange"
    />
  </el-card>
  <el-empty v-show="isNoData" :image-size="200" />
</template>
<style scoped>
.el-form {
  margin: 20px;
}
.el-card {
  margin: 20px 20px 0px 20px;
}
:deep().el-table__row .warning-row {
  background-color: #f7ba1e;
}
:deep().el-table__row .red-color {
  background-color: red;
}
.el-table {
  color: #333333;
}
.rank-site {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 240px;
}
</style>
src/views/risk_assessment/DataRiskModel.vue
@@ -1,732 +1,27 @@
<!-- æ—¥å‡å€¼ -->
<script>
import InputSearch from '@/sfc/InputSearch.vue'
import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'
import DustRadarChart from './components/DustRadarChart.vue'
import exceptionApi from '@/api/exceptionApi.js'
import LineChart from './components/LineChart.vue'
import index from '@/utils/risk_estimate_common_function/index.js'
import ButtonClick from '@/sfc/ButtonClick.vue'
import dayjs from 'dayjs'
import MonthSelect from '@/sfc/MonthSelect.vue'
import riskApi from '@/api/risk/riskApi.js'
import riskValue from '@/utils/risk_estimate_common_function/riskValue.js'
import lineChart from '@/utils/chartFunction/lineChart.js'
import siteInfo from '@/api/site/siteInfo.js'
export default {
  components: {
    LineChart,
    InputSearch,
    AreaAndmonitorType,
    DustRadarChart,
    ButtonClick,
    MonthSelect
  },
  data() {
    return {
      isNoData: false,
      loading: false,
      screenLoading: false,
      parentDataFlag: false,
      chartData: [],
      chartData1: {}, //保存查询的结果
      chartData2: {},
      chartData3: {},
      chartData4: {},
      begin: '', //开始时间
      end: '', //结束时间
      form: {
        // ç«™ç‚¹åç§°
        name: '',
        // è®¾å¤‡ç¼–号
        number: '3234',
        // å¼€å§‹æ—¶é—´
        beginTime: '',
        // ç»“束时间
        endTime: ''
      },
      month: '',
      // æŠ˜çº¿å›¾é…ç½®é¡¹
      option: {},
      // æ•°æ®æ¸…单
      bill: {
        min: '',
        max: '',
        avg: '',
        online: 100,
        valid: 100,
        exceeding: 0,
        //  å…¸åž‹å¼‚常复现率
        exceptionRecurrence: 0,
        // å¼‚常类型据聚集度
        exceptionTypeAggregation: 0
      },
      // æŸ¥è¯¢æŒ‰é’®åŠ è½½æ•ˆæžœ
      queryButton: false,
      // é£Žé™©å€¼æŽ’名前十的站点
      top_10_sites_with_risk_values: [{ name: '', riskValue: 0.2 }],
      // é£Žé™©å€¼
      weight: '',
      // æ— æ•°æ®é…ç½®æ—¶é—´æ®µ
      areaColor: [],
      // æŸç«™ç‚¹çš„基本信息
      siteInfo:{}
    }
  },
  mounted() {
    // // åŠ è½½é£Žé™©å€¼æœ€é«˜çš„ç«™ç‚¹æ•°æ®
    this.ShowDefaultData()
  },
  computed: {
    // é£Žé™©ç­‰çº§
    riskGradeAndAdvice() {
      return riskApi.getRiskAdvice(this.weight)
    }
  },
  methods: {
    // æŸ¥è¯¢ç«™ç‚¹ç»Ÿè®¡ä¿¡æ¯
    async querySiteStaticsInfo(row) {
      this.form.name = row.siteName
      // æ›´æ–°ç»Ÿè®¡æ•°æ®
      await this.getAnalysisData()
      // è®¡ç®—风险值
      this.calRiskValue()
  import CompDataRiskModel from '@/views/risk_assessment/components/CompDataRiskModel.vue'
  export default {
    components:{
      CompDataRiskModel
    },
    data() {
      return{
    // æ ¼å¼åŒ–月份
    giveMonth(val) {
      //将中国标准时间转为指定格式(该组件返回的标准时间的格式,所以必须的加这个函数)
      this.month = dayjs(val).format('YYYY-MM-DD')
      // åŒæ—¶æ›´æ–°å¼€å§‹å’Œç»“束时间
      this.form.beginTime = dayjs(this.month).startOf().format('YYYY-MM-DD HH:mm:ss')
      this.form.endTime = dayjs(this.month).endOf('month').format('YYYY-MM-DD HH:mm:ss')
    },
    /**
     * é£Žé™©è¯„估按钮
     * @param:
     * @returns:
     */
    riskAssessment() {
      // æ›´æ–°æŽ’名清单
      this.getRiskRank()
      // æ›´æ–°è¯¥ç«™ç‚¹çš„æ‰€å±žåœºæ™¯å’Œè¿ç»´å•†
      this.getSiteInfo(this.form.number)
      // æ›´æ–°åˆ†æžæ•°æ®
      this.getAnalysisData()
      // è®¡ç®—风险值
      this.calRiskValue()
    },
    // æ›´æ–°åˆ†æžæ•°æ®
    getAnalysisData() {
      // æ—¥ç»Ÿè®¡æ•°æ®
      this.fetchDayAnalysisData()
      // å¼‚常数据
      this.fetchExceptionAnalysisData()
    },
    findObjectByPropertyValue(array, property, value) {
      return array.find((obj) => obj[property] === value)
    },
    // æ­¤é¡µé¢æ‰“开时
    ShowDefaultData() {
      // é»˜è®¤åŠ è½½å±•ç¤ºçš„å†…å®¹
      this.updateOriginPage()
    },
    // åŠ è½½é»˜è®¤å±•ç¤ºçš„å†…å®¹
    async updateOriginPage() {
      this.screenLoading = true
      // æ›´æ–°æŽ’名清单,并得到风险值最高站点
      let arr = await this.getRiskRank()
      this.form.name = arr[0]
      this.form.number = arr[1]
      this.screenLoading = false
      // æ›´æ–°è¯¥ç«™ç‚¹çš„æ‰€å±žåœºæ™¯å’Œè¿ç»´å•†
      this.getSiteInfo(this.form.number)
      // æ›´æ–°æ—¥ç»Ÿè®¡æ•°æ®
      this.getAnalysisData()
      // è®¡ç®—风险值
      this.calRiskValue()
    },
    // è®¡ç®—风险值
    calRiskValue() {
      console.log('设备编码:',this.form.number)
      riskApi.queryRiskValue(this.form.number, this.month, 'month').then((response) => {
        this.weight = riskValue.calRiskValue(response.data.data[0]).toFixed(2)
      })
    },
    //  æ ¹æ®ç›®å‰ç«™ç‚¹ï¼Œæœˆä»½ï¼ŒæŸ¥æŠ˜çº¿å›¾æ—¥ç»Ÿè®¡æ•°æ®
    fetchDayAnalysisData() {
      let params = {}
      if (this.form.name) {
        params['siteName'] = this.form.name
      }
      if (this.form.beginTime) {
        params['beginTime'] = this.form.beginTime
      }
      if (this.form.endTime) {
        params['endTime'] = this.form.endTime
      }
      this.loading = true
      this.queryButton = true
      exceptionApi
        .analysisdata(this.form.name, this.form.beginTime, this.form.endTime, 'day')
        .then((response) => {
          this.chartData = response.data.data
          this.loading = false
          this.queryButton = false
          if (response.data.data.length == 0) {
            this.isNoData = true
            return
          }
          // åˆ†æžæ•°æ®ä¸­çš„æœ€æ—©æ—¶é—´
          let begin = this.chartData[0].lst
          // åˆ†æžæ•°æ®ä¸­çš„æœ€æ™šæ—¶é—´
          let end = this.chartData[this.chartData.length - 1].lst
          // ç§»é™¤ç©ºæ•°æ®çŠ¶æ€
          this.isNoData = false
          // æ— æ•°æ®çš„æ—¶é—´æ®µ
          let noDataTimeInteval = lineChart.backNoDataInteval(begin, end)
          // æ— æ•°æ®é…ç½®æ—¶é—´æ®µ
          this.areaColor = lineChart.getMarkArea(noDataTimeInteval)
          this.setChart()
          //  æŠ˜çº¿å›¾æ•°æ®
          let temp = index.calBillData(this.chartData, begin, end)
          this.bill.min = temp['min']
          this.bill.max = temp['max']
          this.bill.avg = temp['avg']
          this.bill.online = temp['online']
          this.bill.valid = temp['valid']
          this.bill.exceeding = temp['exceeding']
        })
    },
    // ä¼ä¸šå¼‚常统计数据
    fetchExceptionAnalysisData() {
      exceptionApi
        .exceptiondata1({
          siteName: this.form.name,
          beginTime: this.form.beginTime,
          endTime: this.form.endTime
        })
        .then((res) => {
          let obj = index.calRecur(res.data.data)
          this.bill.exceptionRecurrence = obj['exceptionRecurrence']
          this.bill.exceptionTypeAggregation = obj['exceptionTypeAggregation']
        })
    },
    // é€‰æ‹©å…¶ä»–值类型时
    setChart() {
      if (this.chartData.length) {
        // æž„建折线图x,y数据
        let obj = lineChart.getLineChartXYData(
          this.chartData,
          this.form.beginTime,
          this.form.endTime
        )
        this.chartData1 = {
          x: obj.xData,
          y: obj.yAvg
        }
        this.chartData2 = {
          x: obj.xData,
          y: obj.yOnline
        }
        this.chartData3 = {
          x: obj.xData,
          y: obj.yValid
        }
        this.chartData4 = {
          x: obj.xData,
          y: obj.yExceed
        }
      }
    },
    mounted() {
    // å¾—到前10风险排名清单
    async getRiskRank() {
      let response = await riskApi.queryRiskValue('', this.month, 'month')
      let tableData = riskValue.backComprehensiveRiskTableData(response.data.data)
      this.top_10_sites_with_risk_values = this.getTopRiskData(tableData, 10)
      if (this.top_10_sites_with_risk_values.length != 0) {
        // è¡¨æ ¼æŒ‰é£Žé™©å€¼å€’叙排列
        this.$nextTick(() => {
          this.$refs.table.sort('riskValue', 'descending')
        })
        // ä¿å­˜é£Žé™©å€¼æœ€é«˜çš„站点名称和设备编号
        let temp = []
        temp.push(
          this.top_10_sites_with_risk_values[0].siteName,
          this.top_10_sites_with_risk_values[0].mnCode
        )
        return temp
      }
    },
    /**
     * é™åºæŽ’列,返回降序前num的元素
     * @param: å¯¹è±¡æ•°ç»„,返回的数量
     */
    getTopRiskData(arr, num) {
      // æŒ‰ç…§riskValue降序排列
      arr.sort((a, b) => b.riskValue - a.riskValue)
      // èŽ·å–å‰num个元素
      return arr.slice(0, num)
    },
    /**
     * æ ¹æ®è®¾å¤‡ç¼–号查询站点基本信息
     * @param: è®¾å¤‡ç¼–号
     */
    getSiteInfo(mnCode) {
      siteInfo.querySiteInfoByMnCode(mnCode).then(response => {
        this.siteInfo = response.data.data[0]
      })
    },
    methods: {
    openDetail() {
      const encodedSiteName = encodeURIComponent(this.form.name)
      this.$router.push(`/exceptionDetail/${encodedSiteName}/${this.month}`)
    }
  }
     }
}
</script>
<template>
  <el-form :inline="true" :model="form">
    <el-form-item class="form-item">
      <AreaAndmonitorType></AreaAndmonitorType>
    </el-form-item>
    <el-form-item class="form-item">
      <InputSearch
        :site-name="form.name"
        isNeedDefaultSite="0"
        @submit-value="(n) => (form.name = n)"
        @submit-mncode="(n) => (form.number = n)"
      ></InputSearch>
    </el-form-item>
    <el-form-item>
      <MonthSelect  @submit-value="giveMonth"></MonthSelect>
    </el-form-item>
    <el-form-item>
      <ButtonClick
        content="风险评估"
        type="primary"
        :loading="queryButton"
        @do-search="riskAssessment"
      ></ButtonClick>
    </el-form-item>
  </el-form>
  <!-- <el-card class="site-info time-text" >
   <span>{{form.name}}</span>
   <br/>
   <br/>
    <span>数据统计时段:{{ form.beginTime }} ~ {{ form.endTime }}</span>
    <el-tag class="mx-1" >场景</el-tag>{{siteInfo.typename}}
    <el-tag class="mx-1">运维商</el-tag>{{siteInfo.dutyCompany}}
    <el-button type="primary"  size="small" class="exception-button" @click="openDetail()">
      å¼‚常详情
    </el-button>
  </el-card> -->
  <div v-loading="screenLoading" class="wait-name">
    <div class="chart-container" v-show="!isNoData && !screenLoading">
      <!-- <div class="time-text">
        <span>数据统计时段:{{ form.beginTime }} ~ {{ form.endTime }}</span>
        <span class="site-name">
              <el-button type="primary" text class="exception-button" @click="openDetail()">
               å¼‚常详情
              </el-button>
        </span>
        <el-tag class="mx-1" >场景</el-tag>{{siteInfo.typename}}
        <el-tag class="mx-2">运维商</el-tag>{{siteInfo.dutyCompany}}
      </div> -->
      <el-card class="time-text" >
        <span>{{form.name}}</span>
        <br/>
        <br/>
         <span>数据统计时段:{{ form.beginTime }} ~ {{ form.endTime }}</span>
         <el-tag class="mx-1" >场景</el-tag>{{siteInfo.typename}}
         <el-tag class="mx-1">运维商</el-tag>{{siteInfo.dutyCompany}}
         <el-button type="primary"  size="small" class="exception-button" @click="openDetail">
           å¼‚常详情
         </el-button>
       </el-card>
      <el-row :gutter="10">
        <el-col :span="5">
          <el-card shadow="never" class="table-class">
            <el-table
              ref="table"
              :highlight-current-row="true"
              :data="top_10_sites_with_risk_values"
              :default-sort="{ prop: 'riskValue', order: 'descending' }"
              height="540"
            >
              <el-table-column
                type="index"
                label="序号"
                fixed
                width="52"
                show-overflow-tooltip
                align="center"
              />
              <el-table-column
                prop="siteName"
                label="点位名称"
                show-overflow-tooltip
                width="97"
                align="center"
              >
                <template #default="{ row }">
                  <el-button
                    type="primary"
                    text
                    class="table-button"
                    @click="querySiteStaticsInfo(row)"
                    >
                  <span class="risk-rank-site">
                    {{ row.siteName }}
                  </span>
                    </el-button
                  >
                </template>
              </el-table-column>
              <el-table-column
                prop="riskValue"
                label="风险值"
                sortable
                show-overflow-tooltip
                align="center"
              />
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="11">
          <el-card shadow="never" class="table-class">
            <DustRadarChart
              :name="[
                '数据有效风险',
                '典型异常复现风险',
                '异常类型聚集风险',
                '超标异常风险',
                '数据在线风险'
              ]"
              :yData="[
                bill.valid,
                bill.exceptionRecurrence,
                bill.exceptionTypeAggregation,
                bill.exceeding,
                bill.online
              ]"
            ></DustRadarChart>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card shadow="never" class="card-height risk-card">
            <template #header>
              <h1
                :class="{
                  'weightColor-low': weight < 0.2,
                  'weightColor-medium': weight >= 0.2 && weight < 0.6,
                  'weightColor-heigh': weight >= 0.6
                }"
              >
                é£Žé™©å€¼(0~1):{{ weight }}
              </h1>
            </template>
            <div class="risk-text-container">
            <div class="risk-grade">
              <h1 class="sub-title">风险等级:</h1>
              <span class="sub-title">{{ riskGradeAndAdvice.riskGrade }} </span>
            </div>
            <div class="risk-advice">
              <h1 class="sub-title">管控建议:</h1>
              <div v-for="item in riskGradeAndAdvice.riskAdvice" :key="item" class="risk-advice-text">
                {{ item }}
              </div>
            </div>
            <div class="grade-instance">
              <div class="container">
                <div class="block-color heigh"></div>
                <div>高风险(≥0.6)</div>
              </div>
              <div class="container">
                <div class="block-color medium"></div>
                <div>中风险(0.2~0.6)</div>
              </div>
              <div class="container">
                <div class="block-color low"></div>
                <div>低风险(<0.2)</div>
              </div>
            </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card shadow="never" class="card-height">
            <template #header>
              <span class="title-16">风险详情</span>
            </template>
            <el-form>
              <el-form-item label="最大值:"> {{ bill.max }} mg/m³ </el-form-item>
              <el-form-item label="最小值:"> {{ bill.min }} mg/m³ </el-form-item>
              <el-form-item label="数据有效率:"> {{ bill.online }}% </el-form-item>
              <el-form-item label="数据在线率:"> {{ bill.valid }}% </el-form-item>
              <el-form-item label="数据超标率:"> {{ bill.exceeding }}% </el-form-item>
              <el-form-item label="异常类型聚集度:">
                {{ bill.exceptionTypeAggregation * 100 }}%
              </el-form-item>
              <el-form-item label="典型异常复现率:">
                {{ bill.exceptionRecurrence * 100 }}%
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="never" class="card-value">
            <LineChart
              title="日均值"
              :chartData="chartData1"
              yName="mg/m³"
              seriesName="日均值"
              :areaColor="areaColor"
            >
            </LineChart>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="never" class="card-value">
            <LineChart
              title="日在线率"
              :chartData="chartData2"
              yName="%"
              seriesName="日在线率"
              :areaColor="areaColor"
            >
            </LineChart>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="never" class="card-value">
            <LineChart
              title="日有效率"
              :chartData="chartData3"
              yName="%"
              seriesName="日有效率"
              :areaColor="areaColor"
            >
            </LineChart>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="never" class="card-value">
            <LineChart
              title="日超标率"
              :chartData="chartData4"
              yName="%"
              seriesName="日超标率"
              :areaColor="areaColor"
            >
            </LineChart>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
  <el-empty description="暂无数据" v-show="isNoData" :image-size="200" />
  <CompDataRiskModel  :show-all="true"/>
</template>
<style scoped>
.el-form {
  margin: 10px;
}
.form-item {
  margin-top: 10px;
}
.chart-container {
  margin-left: 10px;
}
.time-text {
  font-size: 14px;
  color: #333333;
  letter-spacing: 1px;
}
.el-card {
  margin-top: 15px;
  border-radius: 9px;
}
.chart-container {
  width: 98%;
  /* height: 600px; */
}
<style  scoped>
.card-height {
  height: 570px;
}
.el-header {
  background-color: #010408;
  color: #333;
  line-height: 60px;
}
.risk-advice {
  /* margin: 20px 0px; */
}
.container {
  display: flex;
  margin-bottom: 10px;
}
.grade-instance {
  /* margin-top: 50px; */
}
.block-color {
  width: 1em;
  height: 1em;
  margin-right: 10px;
  margin-top: 3px;
}
.heigh {
  background-color: red;
}
.medium {
  background-color: #fadc19;
}
.low {
  background-color: #9fdb1d;
}
.el-text {
  align-self: left;
}
.el-form-item {
  margin-bottom: 20px;
}
:deep().el-form-item__content {
  justify-content: flex-end;
}
.title-16 {
  font-size: 16px;
  font-weight: bold;
}
.weightColor-low {
  color: #9fdb1d;
  font-size: 16px;
}
.weightColor-medium {
  color: #dabe09;
  font-size: 16px;
}
.weightColor-heigh {
  color: red;
  font-size: 16px;
}
.risk-grade {
  display: flex;
}
:deep().el-table__header-wrapper {
  color: red;
}
/* .wait-name {
    width: 500px;
    height: 600px;
  } */
.table-class {
  /* border: 1px solid blue; */
  /* margin: 20px 0px 20px 0px; */
  height: 570px;
}
.table-button {
  letter-spacing: 1px;
  text-decoration: underline;
  /* border-radius: 0px; */
}
.risk-rank-site {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 80px;
}
.site-name {
  margin-left: 20px;
}
.risk-advice-text {
  font-size: 14px;
  color: #333333;
  letter-spacing: 1.5px;
  margin-top: 10px;
}
.sub-title {
  font-size: 14px;
  color: #333333;
}
.risk-text-container{
  height: 490px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.el-tag{
  margin-left: 25px;
  font-size: 14px;
  vertical-align: baseline;
}
.exception-button {
  vertical-align: baseline;
  margin-left: 150px;
}
.site-info-detail{
  display: flex;
  justify-content: space-between;
}
.mx-1{
  margin-left: 100px;
}
</style>
</style>
src/views/risk_assessment/DataRiskRank.vue
@@ -1,26 +1,22 @@
<script>
import TimeShortCuts from '@/sfc/TimeShortCuts.vue'
import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'
import { useCommonFunction } from '../../utils/common.js'
import requetsApi from '@/api/exportExcel/requetsApi.js'
import dayjs from 'dayjs'
import ButtonExportExcel from '@/sfc/ButtonExportExcel.vue'
import ButtonClick from '@/sfc/ButtonClick.vue'
import { ElMessage } from 'element-plus'
import MonthSelect from '@/sfc/MonthSelect.vue'
import riskApi from '@/api/risk/riskApi.js'
import riskValue from '@/utils/risk_estimate_common_function/riskValue.js'
export default {
  components: {
    TimeShortCuts,
    AreaAndmonitorType,
    ButtonExportExcel,
    ButtonClick
    ButtonClick,
    MonthSelect
  },
  data() {
    return {
      // å½“前页
      currentPage: 1,
      // æ¯é¡µæ¡æ•°
      pageSize: 20,
      total: 0,
      //   è¡¨æ ¼æ•°æ®
      tableData: [],
      isNoData: true,
@@ -30,238 +26,348 @@
      // å¯¼å‡ºæŒ‰é’®åŠ è½½ä¸­
      exportButton: false,
      form: {
        // ç«™ç‚¹åç§°
        name: '',
        // å¼€å§‹æ—¶é—´
        beginTime: '',
        // ç»“束时间
        endTime: ''
        // // ç»“束时间
        endTime: '',
        // é€‰æ‹©çš„æœˆä»½
        month: ''
      },
      tableHeight: '600'
      bill: {
        min: '',
        max: '',
        avg: '',
        online: '',
        valid: '',
        exceeding: '',
        //  å…¸åž‹å¼‚常复现率
        exceptionRecurrence: '',
        // å¼‚常类型据聚集度
        exceptionTypeAggregation: ''
      },
      // è¡¨æ ¼æ•°æ®
      table: [],
      // è¡¨æ ¼é«˜åº¦
      tableHeight: 600,
      currentRow: []
    }
  },
  setup() {
    // å¼•å…¥ ç™¾åˆ†å·æ¯”较大小 å¯¼å‡ºåŠŸèƒ½
    const { cmpp, exportToExcel } = useCommonFunction()
    return { cmpp, exportToExcel }
    const { exportToExcel } = useCommonFunction()
    return { exportToExcel }
  },
  computed: {
    // è®¡ç®—高中低站点数量
    riskGradeNum() {
      let riskGrade = {}
      if (this.table) {
        let highRisk = 0
        let middleRisk = 0
        let lowRisk = 0
        this.table.forEach((item) => {
          switch (item.riskGrade) {
            case '高风险':
              highRisk++
              break
            case '中风险':
              middleRisk++
              break
            case '低风险':
              lowRisk++
              break
          }
        })
        riskGrade.high = highRisk
        riskGrade.middle = middleRisk
        riskGrade.low = lowRisk
      }
      return riskGrade
    },
    // é«˜ä¸­ä½Žé£Žé™©æ¯”例
    riskGradeRate() {
      let rate = {
        high:0,
        middle:0,
        low:0
      }
      if (this.table.length !=0 ) {
        let num = this.table.length
        let highGrade = ((this.riskGradeNum.high / num)*100).toFixed(2)
        let middleGrade = ((this.riskGradeNum.middle / num)*100).toFixed(2)
        let lowGrade = ((this.riskGradeNum.low / num)*100).toFixed(2)
        rate.high = highGrade
        rate.middle = middleGrade
        rate.low = lowGrade
      }
      return rate
    }
  },
  mounted() {
    this.fetchData()
    //
    this.fetch()
    this.calTableHeight()
  },
  methods: {
    // åŠŸèƒ½ï¼šå¯¼å‡ºä¸ºExcel
    exportData() {
      let params = {
        beginTime: this.form.beginTime,
        endTime: this.form.endTime
      }
      this.exportButton = true
      requetsApi.fetchAllData(params).then((res) => {
        const data = res.data.data
        const tableColumns = [
          'name',
          'mnCode',
          'lst',
          'dayAvg',
          'min',
          'max',
          'dayOnline',
          'dayValid',
          'dayExceeding'
        ]
        const excelColumns = [
          ['A1', '站点名称'],
          ['B1', '设备编号'],
          ['C1', '监测日期'],
          ['D1', '平均值'],
          ['E1', '最小值'],
          ['F1', '最大值'],
          ['G1', '在线率'],
          ['H1', '有效率'],
          ['I1', '超标率']
        ]
        this.exportToExcel(data, tableColumns, excelColumns, '分析表.xlsx')
        this.exportButton = false
      })
    /**
     * å°†ä¸­å›½æ ‡å‡†æ—¶é—´è½¬ä¸ºæŒ‡å®šæ ¼å¼
     * @param:
     * @returns:
     */
    giveMonth(val) {
      //将中国标准时间转为指定格式(该组件返回的标准时间的格式,所以必须的加这个函数)
      this.form.month = dayjs(val).format('YYYY-MM-DD')
      // åŒæ—¶æ›´æ–°å¼€å§‹å’Œç»“束时间
      this.form.beginTime = dayjs(this.form.month).startOf().format('YYYY-MM-DD HH:mm:ss')
      this.form.endTime = dayjs(this.form.month).endOf('month').format('YYYY-MM-DD HH:mm:ss')
      console.log(this.form.beginTime, this.form.endTime)
    },
    // åŠŸèƒ½ï¼šæ”¹å˜è¡¨æ ¼æŸä¸ªå•å…ƒæ ¼çš„é¢œè‰²
    tableCellClassName({ row, columnIndex }) {
      // å¹³å‡å€¼ä¸æ»¡è¶³æ ‡å‡†æ—¶
      if (columnIndex == 4) {
        if (row.dayAvg >= 0.8) {
        if (row.riskValue >= 0.8) {
          return 'warning-row'
        }
      }
      //  åœ¨çº¿çŽ‡ï¼Œæœ‰æ•ˆçŽ‡ ä¸æ»¡è¶³æ ‡å‡†æ—¶ å˜é¢œè‰²
      if (columnIndex == 7) {
        if (!this.cmpp(row.dayOnline, '90%')) {
          return 'red-color'
        }
      }
      if (columnIndex == 8) {
        if (!this.cmpp(row.dayValid, '90%')) {
          return 'red-color'
        }
      }
    },
    // åŠŸèƒ½ï¼šè¡¨æ ¼é«˜åº¦æ ¹æ®å†…å®¹è‡ªé€‚åº”
    calTableHeight() {
      const h1 = this.$refs.h1.$el.offsetHeight
      const h2 = this.$refs.h2.$el.offsetHeight;
      // å…¶ä¸­ä¸€ä¸ª40是盒子的总外边距
      this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - 40px - 120px - var(--el-main-padding) * 2`;
    },
    // é¡µå¤§å°æ”¹å˜æ—¶è§¦å‘
    handleSizeChange(val) {
      this.pageSize = val
      // æ”¹å˜æ¯é¡µæ˜¾ç¤ºæ•°ç›®æ—¶è·³åˆ°å½“前页
      this.handleCurrentChange(1)
      this.tableHeight = `calc(100vh - ${h1}px  - 40px - 40px - var(--el-main-padding) * 2`
    },
    // é¡µå·æ”¹å˜æ—¶è§¦å‘
    handleCurrentChange(val) {
      // å°†å½“前页号给currentPage
      this.currentPage = val
      // é¡µé¢å˜åŒ–时调用 æŸ¥è¯¢æ•°æ®å‡½æ•°
      this.fetchData()
    },
    //序号递增
    indexMethod(index) {
      return index + 1 + (this.currentPage - 1) * this.pageSize
    },
    giveTime(val) {
      //将中国标准时间转为指定格式(该组件返回的标准时间的格式,所以必须的加这个函数)
      this.form.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss')
      this.form.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss')
    },
    // ç‚¹å‡»ç»Ÿè®¡æŒ‰é’®
    // ç‚¹å‡»é£Žé™©æŽ’名按钮
    fetchData() {
      let params = {}
      params['page'] = this.currentPage
      params['pageSize'] = this.pageSize
      params['siteName'] = ''
      if (this.form.beginTime) {
        params['beginTime'] = this.form.beginTime
      }
      if (this.form.endTime) {
        params['endTime'] = this.form.endTime
      }
      this.loading = true
      this.queryButton = true
      this.isNoData = false
      this.$http.get('/dust/analysistime', { params: params }).then((response) => {
        this.tableData = response.data.data.rows
      riskApi.queryRiskValue('', this.form.month, 'month').then((response) => {
        this.loading = false
        this.queryButton = false
        if (response.data.data.total == 0) {
        if (response.data.data.length == 0) {
          this.isNoData = true
          return
        }
        // ç§»é™¤ç©ºæ•°æ®çŠ¶æ€
        this.table = riskValue.backComprehensiveRiskTableData(response.data.data)
        this.queryButton = false
        this.isNoData = false
        this.total = response.data.data.total
        this.loading = false
        this.$nextTick(() => {
          this.$refs.table.sort('riskValue', 'descending')
        })
      })
    },
    /**
     * åˆå§‹åŠ è½½å‡½æ•°
     */
    fetch() {
      // åˆ†æžæ•°æ®
      this.fetchData()
      // å¼‚常数据
      // this.exceptiondataCount()
    },
    // å•元格内容换行
    wrapIndex(index) {
      return index.replace(/\n/g, '<br/>')
    },
    /**
     * å¯¼å‡ºä¸ºExcel
     */
    exportData() {
      if (this.table.length != 0) {
        const tableColumns = [
          'siteName',
          'region',
          'monitorType',
          'riskValue',
          'riskGrage',
          'riskAdvice',
          'beginTime',
          'endTime'
        ]
        const excelColumns = [
          ['A1', '站点名称'],
          ['B1', '区域'],
          ['C1', '监测类型'],
          ['D1', '风险值'],
          ['E1', '风险等级'],
          ['F1', '管控措施'],
          ['G1', '开始日期'],
          ['H1', '结束日期']
        ]
        this.exportButton = true
        this.exportToExcel(this.table, tableColumns, excelColumns, '综合风险排名.xlsx')
        this.exportButton = false
      } else {
        ElMessage('无数据需要导出')
      }
    },
    openDetail(row) {
      const encodedSiteName = encodeURIComponent(row.siteName)
      const jumpPage = 1
      this.$router.push(`/exceptionDetail/${encodedSiteName}/${this.form.month}/1/${jumpPage}`)
    }
  }
}
</script>
<template>
    <el-form :inline="true" :model="form" ref="h1">
      <el-form-item>
        <AreaAndmonitorType></AreaAndmonitorType>
      </el-form-item>
  <el-row ref="h1">
    <el-col :span="24">
      <el-form :inline="true" :model="form">
        <el-form-item>
          <AreaAndmonitorType></AreaAndmonitorType>
        </el-form-item>
      <el-form-item>
        <TimeShortCuts timeType="currentMonth" @submit-time="giveTime"></TimeShortCuts>
      </el-form-item>
        <el-form-item>
          <MonthSelect @submit-value="giveMonth"></MonthSelect>
        </el-form-item>
      <el-form-item>
        <ButtonClick
          style="margin-right: 12px"
          content="数据排名"
          type="primary"
          :loading="queryButton"
          @do-search="fetchData"
        ></ButtonClick>
        <ButtonExportExcel
          content="导出数据"
          type="success"
          :loading="exportButton"
          @do-export="exportData"
        ></ButtonExportExcel>
      </el-form-item>
    </el-form>
        <el-form-item>
          <ButtonClick
            style="margin-right: 12px"
            content="风险排名"
            type="primary"
            :loading="queryButton"
            @do-search="fetch"
          ></ButtonClick>
          <ButtonExportExcel
            content="导出数据"
            type="success"
            :loading="exportButton"
            @do-export="exportData"
          ></ButtonExportExcel>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="24" class="tag">
    <el-card v-show="!isNoData">
      <el-table
        :data="tableData"
        :height="tableHeight"
        style="width: 100%"
        v-loading="loading"
        :cell-class-name="tableCellClassName"
      >
        <el-table-column
          type="index"
          prop="name"
          label="序号"
          :index="indexMethod"
          fixed
          show-overflow-tooltip
        />
        <el-table-column prop="name" label="点位名称" show-overflow-tooltip />
      <el-tag type="primary"> å‚评站点数</el-tag><span class="analysis-info">{{ table.length }}</span>
      <el-tag type="danger"> é«˜é£Žé™©æ•°</el-tag>  <span class="analysis-info">{{ riskGradeNum.high }} ({{ riskGradeRate.high }}%)</span>
      <el-tag type="warning"> ä¸­é£Žé™©æ•°</el-tag>  <span class="analysis-info">{{ riskGradeNum.middle }} ({{ riskGradeRate.middle }}%)</span>
      <el-tag type="success"> ä½Žé£Žé™©æ•°</el-tag> <span class="analysis-info">{{ riskGradeNum.low }} ({{ riskGradeRate.low }}%)</span>
        <el-table-column prop="mnCode" label="设备编码" show-overflow-tooltip />
        <el-table-column prop="lst" label="监测日期" sortable show-overflow-tooltip />
    </el-col>
  </el-row>
        <el-table-column prop="dayAvg" label="日平均值" sortable show-overflow-tooltip />
        <el-table-column prop="min" label="日最小值" sortable show-overflow-tooltip />
        <el-table-column prop="max" label="日最大值" sortable show-overflow-tooltip />
        <el-table-column prop="dayOnline" label="日在线率" sortable show-overflow-tooltip />
        <el-table-column prop="dayValid" label="日有效率" sortable show-overflow-tooltip />
  <el-table
    ref="table"
    :data="table"
    :height="tableHeight"
    v-loading="loading"
    element-loading-text="后台分析中..."
    style="width: 98%"
    :cell-class-name="tableCellClassName"
    :default-sort="{ prop: 'riskValue', order: 'descending' }"
    v-show="!isNoData"
    border
  >
    <el-table-column
      type="index"
      prop="name"
      label="序号"
      fixed
      align="center"
      width="55"
      show-overflow-tooltip
    />
    <el-table-column prop="siteName" label="点位名称" align="center" show-overflow-tooltip>
      <template #default="{ row }">
        <el-button type="primary" text class="table-button" @click="openDetail(row)">{{
          row.siteName
        }}</el-button>
      </template>
    </el-table-column>
        <el-table-column prop="dayExceeding" label="日超标率" sortable show-overflow-tooltip />
      </el-table>
      <el-pagination
        ref="h2"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        layout="total,sizes, prev, pager, next, jumper"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        @update:current-page="handleCurrentChange"
        @update:page-size="handleSizeChange"
      />
    </el-card>
    <el-empty v-show="isNoData" :image-size="200" />
    <el-table-column prop="region" label="区县" align="center" width="80" show-overflow-tooltip />
    <el-table-column
      prop="monitorType"
      label="检测类型"
      align="center"
      width="80"
      show-overflow-tooltip
    />
    <el-table-column
      prop="riskValue"
      label="风险值"
      sortable
      align="center"
      width="100"
      show-overflow-tooltip
    />
    <el-table-column
      prop="riskGrade"
      label="风险等级"
      align="center"
      width="100"
      show-overflow-tooltip
    />
    <el-table-column prop="riskAdvice" label="管控措施" show-overflow-tooltip>
      <template #default="scope">
        <div v-html="wrapIndex(scope.row.riskAdvice)"></div>
      </template>
    </el-table-column>
    <el-table-column
      prop="beginTime"
      label="日期"
      sortable
      align="center"
      width="160"
      show-overflow-tooltip
    />
    <!-- <el-table-column
      prop="endTime"
      label="结束日期"
      sortable
      align="center"
      width="160"
      show-overflow-tooltip
    /> -->
  </el-table>
  <el-empty v-show="isNoData" :image-size="200" />
</template>
<style scoped>
.el-form {
  margin: 20px;
.el-row,
.el-table {
  margin: 10px 0px 0px 10px;
}
.el-card {
  margin: 20px 20px 0px 20px;
}
:deep().el-table__row .warning-row {
  background-color: #f7ba1e;
}
:deep().el-table__row .red-color {
:deep(.el-table__row .warning-row) {
  background-color: red;
  /* color: rgb(241, 236, 236); */
}
.table-button {
  letter-spacing: 1px;
  text-decoration: underline;
  border-radius: 0px;
}
.el-table {
  color: #333333;
}
.analysis-info {
  margin-right: 20px;
}
.tag{
  margin: 10px 5px 5px 1px;
}
.el-tag {
  font-size: 14px;
  vertical-align: baseline;
}
</style>
src/views/risk_assessment/SiteComprehensiveRskRanking.vue
ÎļþÒÑɾ³ý
src/views/risk_assessment/components/CompDataRiskModel.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,787 @@
<!-- æ—¥å‡å€¼ -->
<script>
import InputSearch from '@/sfc/InputSearch.vue'
import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'
import exceptionApi from '@/api/exceptionApi.js'
import DustRadarChart from '@/views/risk_assessment/components/DustRadarChart.vue'
import LineChart from '@/views/risk_assessment/components/LineChart.vue'
import index from '@/utils/risk_estimate_common_function/index.js'
import ButtonClick from '@/sfc/ButtonClick.vue'
import dayjs from 'dayjs'
import MonthSelect from '@/sfc/MonthSelect.vue'
import riskApi from '@/api/risk/riskApi.js'
import riskValue from '@/utils/risk_estimate_common_function/riskValue.js'
import lineChart from '@/utils/chartFunction/lineChart.js'
import siteInfo from '@/api/site/siteInfo.js'
export default {
  props: {
    // ç‚¹ä½åå­—
    siteName: {
      type: String,
      default: ''
    },
    // æœˆä»½
    time: {
      type: String,
      default: ''
    },
    // å±•示页面的全部
    showAll: {
      type: Boolean,
      default: true
    }
  },
  components: {
    LineChart,
    InputSearch,
    AreaAndmonitorType,
    DustRadarChart,
    ButtonClick,
    MonthSelect
  },
  data() {
    return {
      isNoData: false,
      loading: false,
      screenLoading: false,
      parentDataFlag: false,
      chartData: [],
      chartData1: {}, //保存查询的结果
      chartData2: {},
      chartData3: {},
      chartData4: {},
      begin: '', //开始时间
      end: '', //结束时间
      form: {
        // ç«™ç‚¹åç§°
        name: '',
        // è®¾å¤‡ç¼–号
        number: '3234',
        // å¼€å§‹æ—¶é—´
        beginTime: '',
        // ç»“束时间
        endTime: ''
      },
      month: '',
      // æŠ˜çº¿å›¾é…ç½®é¡¹
      option: {},
      // æ•°æ®æ¸…单
      bill: {
        min: '',
        max: '',
        avg: '',
        online: 100,
        valid: 100,
        exceeding: 0,
        //  å…¸åž‹å¼‚常复现率
        exceptionRecurrence: 0,
        // å¼‚常类型据聚集度
        exceptionTypeAggregation: 0,
        exception: 0,
        mutationCount: 0,
        exceedingNearCount: 0,
        exceedingCriticalDegree: 0
      },
      // æŸ¥è¯¢æŒ‰é’®åŠ è½½æ•ˆæžœ
      queryButton: false,
      // é£Žé™©å€¼æŽ’名前十的站点
      top_10_sites_with_risk_values: [{ name: '', riskValue: 0.2 }],
      // é£Žé™©å€¼
      weight: '',
      // æ— æ•°æ®é…ç½®æ—¶é—´æ®µ
      areaColor: [],
      // æŸç«™ç‚¹çš„基本信息
      siteInfo: {},
      // å¼‚常风险的值
      exceptionRisk: {
        // åœ¨çº¿çŽ‡é£Žé™©
        onlineRisk: '',
        // æœ‰æ•ˆçŽ‡é£Žé™©
        validRisk: '',
        // è¶…标风险
        exceedRisk: '',
        // å¼‚常类型聚集度
        exceptionTypeAggregation: '',
        // å…¸åž‹å¼‚常复现率
        typicalExceptionRepetitionRate: ''
      }
    }
  },
  watch: {
    // showAll() {
    //     console.log('1111')
    //   // é¡µé¢åŠ è½½æ—¶showAll才会变化一次
    //   // ä¸ºtrue表示的风险模型页面
    //   if (this.showAll) {
    //     // åŠ è½½é£Žé™©å€¼æœ€é«˜çš„ç«™ç‚¹æ•°æ®
    //     this.ShowDefaultData()
    //   }
    // },
    siteName() {
      if(this.siteName!= ''){
    // æ›´æ–°ç«™ç‚¹åå­—和时间
      this.form.name = this.siteName
      this.screenLoading = true
      siteInfo.queryMnCode(this.siteName).then((response) => {
        this.form.number = response.data.data[0].mnCode
        this.month = this.time
        // åŒæ—¶æ›´æ–°æœˆèµ·å§‹æ—¶é—´
        this.form.beginTime = dayjs(this.month).startOf().format('YYYY-MM-DD HH:mm:ss')
        this.form.endTime = dayjs(this.month).endOf('month').format('YYYY-MM-DD HH:mm:ss')
        // æ›´æ–°è¯¥ç«™ç‚¹çš„æ‰€å±žåœºæ™¯å’Œè¿ç»´å•†
        this.getSiteInfo(this.form.number)
        // æ›´æ–°ç»Ÿè®¡æ•°æ®
        this.getAnalysisData()
        // è®¡ç®—风险值
        this.calRiskValue()
        this.screenLoading = false
      })
      }
    }
  },
  computed: {
    // é£Žé™©ç­‰çº§
    riskGradeAndAdvice() {
      return riskApi.getRiskAdvice(this.weight)
    }
  },
mounted(){
    if(this.showAll){
        // åŠ è½½é£Žé™©å€¼æœ€é«˜çš„ç«™ç‚¹æ•°æ®
        this.ShowDefaultData()
    }
},
  methods: {
    // æŸ¥è¯¢ç«™ç‚¹ç»Ÿè®¡ä¿¡æ¯
    async querySiteStaticsInfo(row) {
      this.form.name = row.siteName
      // æ›´æ–°ç»Ÿè®¡æ•°æ®
      await this.getAnalysisData()
      // è®¡ç®—风险值
      this.calRiskValue()
    },
    // æ ¼å¼åŒ–月份
    giveMonth(val) {
      //将中国标准时间转为指定格式(该组件返回的标准时间的格式,所以必须的加这个函数)
      this.month = dayjs(val).format('YYYY-MM-DD')
      // åŒæ—¶æ›´æ–°å¼€å§‹å’Œç»“束时间
      this.form.beginTime = dayjs(this.month).startOf().format('YYYY-MM-DD HH:mm:ss')
      this.form.endTime = dayjs(this.month).endOf('month').format('YYYY-MM-DD HH:mm:ss')
    },
    /**
     * é£Žé™©è¯„估按钮
     * @param:
     * @returns:
     */
    riskAssessment() {
      // æ›´æ–°æŽ’名清单
      this.getRiskRank()
      // æ›´æ–°è¯¥ç«™ç‚¹çš„æ‰€å±žåœºæ™¯å’Œè¿ç»´å•†
      this.getSiteInfo(this.form.number)
      // æ›´æ–°åˆ†æžæ•°æ®
      this.getAnalysisData()
      // è®¡ç®—风险值
      this.calRiskValue()
    },
    // æ›´æ–°åˆ†æžæ•°æ®
    getAnalysisData() {
      // æ—¥ç»Ÿè®¡æ•°æ®
      this.fetchDayAnalysisData()
      // å¼‚常数据
      this.fetchExceptionAnalysisData()
    },
    findObjectByPropertyValue(array, property, value) {
      return array.find((obj) => obj[property] === value)
    },
    // æ­¤é¡µé¢æ‰“开时
    ShowDefaultData() {
      // é»˜è®¤åŠ è½½å±•ç¤ºçš„å†…å®¹
      this.updateOriginPage()
    },
    // åŠ è½½é»˜è®¤å±•ç¤ºçš„å†…å®¹
    async updateOriginPage() {
      this.screenLoading = true
      // æ›´æ–°æŽ’名清单,并得到风险值最高站点
      let arr = await this.getRiskRank()
      this.form.name = arr[0]
      this.form.number = arr[1]
      this.screenLoading = false
      // æ›´æ–°è¯¥ç«™ç‚¹çš„æ‰€å±žåœºæ™¯å’Œè¿ç»´å•†
      this.getSiteInfo(this.form.number)
      // æ›´æ–°æ—¥ç»Ÿè®¡æ•°æ®
      this.getAnalysisData()
      // è®¡ç®—风险值
      this.calRiskValue()
    },
    /**
     * å¾—到数据风险值 ï¼Œå¹¶è®¡ç®—风险值
     * @param:
     * @returns:
     */
    calRiskValue() {
      riskApi.queryRiskValue(this.form.number, this.month, 'month').then((response) => {
        const rValue = response.data.data[0]
        this.exceptionRisk.onlineRisk = rValue.onlineRisk
        this.exceptionRisk.validRisk = rValue.validRisk
        this.exceptionRisk.exceedRisk = rValue.exceedRisk
        this.exceptionRisk.exceptionTypeAggregation = rValue.exceptionTypeAggregation
        this.exceptionRisk.typicalExceptionRepetitionRate = rValue.typicalExceptionRepetitionRate
        this.weight = riskValue.calRiskValue(rValue).toFixed(2)
      })
    },
    //  æ ¹æ®ç›®å‰ç«™ç‚¹ï¼Œæœˆä»½ï¼ŒæŸ¥æŠ˜çº¿å›¾æ—¥ç»Ÿè®¡æ•°æ®
    fetchDayAnalysisData() {
      let params = {}
      if (this.form.name) {
        params['siteName'] = this.form.name
      }
      if (this.form.beginTime) {
        params['beginTime'] = this.form.beginTime
      }
      if (this.form.endTime) {
        params['endTime'] = this.form.endTime
      }
      this.loading = true
      this.queryButton = true
      exceptionApi
        .analysisdata(this.form.name, this.form.beginTime, this.form.endTime, 'day')
        .then((response) => {
          this.chartData = response.data.data
          this.loading = false
          this.queryButton = false
          if (response.data.data.length == 0) {
            this.isNoData = true
            return
          }
          // åˆ†æžæ•°æ®ä¸­çš„æœ€æ—©æ—¶é—´
          let begin = this.chartData[0].lst
          // åˆ†æžæ•°æ®ä¸­çš„æœ€æ™šæ—¶é—´
          let end = this.chartData[this.chartData.length - 1].lst
          // ç§»é™¤ç©ºæ•°æ®çŠ¶æ€
          this.isNoData = false
          // æ— æ•°æ®çš„æ—¶é—´æ®µ
          let noDataTimeInteval = lineChart.backNoDataInteval(begin, end)
          // æ— æ•°æ®é…ç½®æ—¶é—´æ®µ
          this.areaColor = lineChart.getMarkArea(noDataTimeInteval)
          this.setChart()
          //  æŠ˜çº¿å›¾æ•°æ®
          let temp = index.calBillData(this.chartData, begin, end)
          this.bill.min = temp['min']
          this.bill.max = temp['max']
          this.bill.avg = temp['avg']
          this.bill.online = temp['online']
          this.bill.valid = temp['valid']
          this.bill.exceeding = temp['exceeding']
        })
    },
    // ä¼ä¸šå¼‚常统计数据
    fetchExceptionAnalysisData() {
      exceptionApi
        .exceptiondata1({
          siteName: this.form.name,
          beginTime: this.form.beginTime,
          endTime: this.form.endTime
        })
        .then((res) => {
          let obj = index.calRecur(res.data.data)
          this.bill.exceptionRecurrence = obj['exceptionRecurrence']
          this.bill.exceptionTypeAggregation = obj['exceptionTypeAggregation']
          this.bill.exception = obj['exception']
          this.bill.mutationCount = obj['mutationCount']
          this.bill.exceedingNearCount = obj['exceedingNearCount']
          this.bill.exceedingCriticalDegree = obj['exceedingCriticalDegree']
        })
    },
    // é€‰æ‹©å…¶ä»–值类型时
    setChart() {
      if (this.chartData.length) {
        // æž„建折线图x,y数据
        let obj = lineChart.getLineChartXYData(
          this.chartData,
          this.form.beginTime,
          this.form.endTime
        )
        this.chartData1 = {
          x: obj.xData,
          y: obj.yAvg
        }
        this.chartData2 = {
          x: obj.xData,
          y: obj.yOnline
        }
        this.chartData3 = {
          x: obj.xData,
          y: obj.yValid
        }
        this.chartData4 = {
          x: obj.xData,
          y: obj.yExceed
        }
      }
    },
    // å¾—到前10风险排名清单
    async getRiskRank() {
      let response = await riskApi.queryRiskValue('', this.month, 'month')
      let tableData = riskValue.backComprehensiveRiskTableData(response.data.data)
      this.top_10_sites_with_risk_values = this.getTopRiskData(tableData, 10)
      if (this.top_10_sites_with_risk_values.length != 0) {
        // è¡¨æ ¼æŒ‰é£Žé™©å€¼å€’叙排列
        this.$nextTick(() => {
          this.$refs.table.sort('riskValue', 'descending')
        })
        // ä¿å­˜é£Žé™©å€¼æœ€é«˜çš„站点名称和设备编号
        let temp = []
        temp.push(
          this.top_10_sites_with_risk_values[0].siteName,
          this.top_10_sites_with_risk_values[0].mnCode
        )
        return temp
      }
    },
    /**
     * é™åºæŽ’列,返回降序前num的元素
     * @param: å¯¹è±¡æ•°ç»„,返回的数量
     */
    getTopRiskData(arr, num) {
      // æŒ‰ç…§riskValue降序排列
      arr.sort((a, b) => b.riskValue - a.riskValue)
      // èŽ·å–å‰num个元素
      return arr.slice(0, num)
    },
    /**
     * æ ¹æ®è®¾å¤‡ç¼–号查询站点基本信息
     * @param: è®¾å¤‡ç¼–号
     */
    getSiteInfo(mnCode) {
      siteInfo.querySiteInfoByMnCode(mnCode).then((response) => {
        this.siteInfo = response.data.data[0]
      })
    },
    openDetail() {
      const encodedSiteName = encodeURIComponent(this.form.name)
      const timeType = '1'
      const jumpPage = '2'
      this.$router.push(`/exceptionDetail/${encodedSiteName}/${this.month}/${timeType}/${jumpPage}`)
    }
  }
}
</script>
<template>
  <el-form :inline="true" :model="form">
    <el-form-item class="form-item">
      <AreaAndmonitorType></AreaAndmonitorType>
    </el-form-item>
    <el-form-item class="form-item">
      <InputSearch
        :site-name="form.name"
        isNeedDefaultSite="0"
        @submit-value="(n) => (form.name = n)"
        @submit-mncode="(n) => (form.number = n)"
      ></InputSearch>
    </el-form-item>
    <el-form-item v-show="showAll">
      <MonthSelect @submit-value="giveMonth"></MonthSelect>
    </el-form-item>
    <el-form-item v-show="showAll">
      <ButtonClick
        content="风险评估"
        type="primary"
        :loading="queryButton"
        @do-search="riskAssessment"
      ></ButtonClick>
    </el-form-item>
  </el-form>
  <div v-loading="screenLoading" class="wait-name">
    <div class="chart-container" v-show="!isNoData && !screenLoading">
      <el-card class="time-text">
        <h4>{{ form.name }}</h4>
        <br />
        <br />
        <span>数据统计时段:{{ form.beginTime }} ~ {{ form.endTime }}</span>
        <el-tag class="mx-1">场景</el-tag>{{ siteInfo.typename }}
        <el-tag class="mx-1">运维商</el-tag>{{ siteInfo.dutyCompany }}
        <el-button type="primary" size="default" class="exception-button" v-show="showAll" @click="openDetail">
          æ•°æ®å¼‚常详情
        </el-button>
      </el-card>
      <el-row :gutter="10" >
        <el-col :span="5" v-show="showAll">
          <el-card shadow="never" class="table-class">
            <el-table
              ref="table"
              :highlight-current-row="true"
              :data="top_10_sites_with_risk_values"
              :default-sort="{ prop: 'riskValue', order: 'descending' }"
              height="540"
            >
              <el-table-column
                type="index"
                label="序号"
                fixed
                width="52"
                show-overflow-tooltip
                align="center"
              />
              <el-table-column
                prop="siteName"
                label="点位名称"
                show-overflow-tooltip
                width="99"
                align="center"
              >
                <template #default="{ row }">
                  <el-button
                    type="primary"
                    text
                    class="table-button"
                    @click="querySiteStaticsInfo(row)"
                  >
                    <span class="risk-rank-site">
                      {{ row.siteName }}
                    </span>
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column
                prop="riskValue"
                label="风险值"
                sortable
                show-overflow-tooltip
                align="center"
              />
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="showAll ?11:14" >
          <el-card shadow="never" class="table-class">
            <DustRadarChart
              :name="[
                '数据有效风险',
                '异常复现风险',
                '异常类型聚集风险',
                '超标异常风险',
                '数据在线风险'
              ]"
              :yData="exceptionRisk"
            ></DustRadarChart>
          </el-card>
        </el-col>
        <el-col :span="showAll ?4: 5" >
          <el-card shadow="never" class="card-height risk-card">
            <template #header>
              <span
              class="title-16"
              >
                é£Žé™©å€¼(0~1):
              </span>
              <span  :class="{
                'weightColor-low': weight < 0.15,
                'weightColor-medium': weight >= 0.15 && weight <= 0.6,
                'weightColor-heigh': weight > 0.6
              }"> {{ weight }}</span>
            </template>
            <div class="risk-text-container">
              <div class="risk-grade">
                <h1 class="sub-title">风险等级:</h1>
                <span  :class="{
                  'weightColor-low': weight < 0.15,
                  'weightColor-medium': weight >= 0.15 && weight <= 0.6,
                  'weightColor-heigh': weight > 0.6
                }" >{{ riskGradeAndAdvice.riskGrade }} </span>
              </div>
              <div class="risk-advice">
                <h1 class="sub-title">管控建议:</h1>
                <div
                  v-for="item in riskGradeAndAdvice.riskAdvice"
                  :key="item"
                  class="risk-advice-text"
                >
                  {{ item }}
                </div>
              </div>
              <div class="grade-instance">
                <div class="container">
                  <div class="block-color heigh"></div>
                  <div>高风险(>0.6)</div>
                </div>
                <div class="container">
                  <div class="block-color medium"></div>
                  <div>中风险(0.15~0.6)</div>
                </div>
                <div class="container">
                  <div class="block-color low"></div>
                  <div>低风险(<0.15)</div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="showAll ?4: 5"  >
          <el-card shadow="never" class="card-height">
            <template #header>
              <span class="title-16">风险详情</span>
            </template>
            <el-form>
              <el-form-item label="最大值:"> {{ bill.max }} mg/m³ </el-form-item>
              <el-form-item label="最小值:"> {{ bill.min }} mg/m³ </el-form-item>
              <el-form-item label="数据有效率:"> {{ bill.online*100 }}% </el-form-item>
              <el-form-item label="数据在线率:"> {{ bill.valid*100 }}% </el-form-item>
              <el-form-item label="数据超标率:"> {{ bill.exceeding*100 }}% </el-form-item>
              <el-form-item label="异常类型聚集度:">
                {{ exceptionRisk.exceptionTypeAggregation * 100 }}%
              </el-form-item>
              <el-tag :size="small" v-show="bill.exception">共出现了{{ bill.exception }}类异常</el-tag>
              <el-form-item label="典型异常复现率:">
                {{ exceptionRisk.typicalExceptionRepetitionRate * 100 }}%
              </el-form-item>
              <div>
                <el-tag :size="small" v-show="bill.mutationCount">量级突变异常:{{ bill.mutationCount }}条</el-tag>
              </div>
              <div>
                <el-tag :size="small" v-show="bill.exceedingNearCount">临近超标异常:{{ bill.exceedingNearCount }}条</el-tag>
              </div>
              <div>
                <el-tag :size="small"
                v-show="bill.exceedingCriticalDegree"
                  >单日超标次数临界异常:{{ bill.exceedingCriticalDegree }}条</el-tag
                >
              </div>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="never" class="card-value">
            <LineChart
              title="日均值"
              :chartData="chartData1"
              yName="mg/m³"
              seriesName="日均值"
              :areaColor="areaColor"
            >
            </LineChart>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="never" class="card-value">
            <LineChart
              title="日有效率"
              :chartData="chartData3"
              yName="%"
              seriesName="日有效率"
              :areaColor="areaColor"
            >
            </LineChart>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
  <el-empty description="暂无数据" v-show="isNoData" :image-size="200" />
</template>
<style scoped>
.el-form {
  margin: 10px;
}
.form-item {
  margin-top: 10px;
}
.chart-container {
  margin-left: 10px;
}
.time-text {
  font-size: 14px;
  color: #333333;
  letter-spacing: 1px;
}
.el-card {
  margin-top: 15px;
  border-radius: 9px;
}
.chart-container {
  width: 98%;
  /* height: 600px; */
}
.card-height {
  height: 570px;
}
.el-header {
  background-color: #010408;
  color: #333;
  line-height: 60px;
}
.risk-advice {
  /* margin: 20px 0px; */
}
.container {
  display: flex;
  margin-bottom: 10px;
}
.grade-instance {
  /* margin-top: 50px; */
}
.block-color {
  width: 1em;
  height: 1em;
  margin-right: 10px;
  margin-top: 3px;
}
.heigh {
  background-color: red;
}
.medium {
  background-color: #dabe09;
}
.low {
  background-color: #9fdb1d;
}
.el-text {
  align-self: left;
}
.el-form-item {
  margin-bottom: 20px;
}
:deep().el-form-item__content {
  justify-content: flex-end;
}
.title-16 {
  font-size: 16px;
  font-weight: bold;
}
.weightColor-low {
  color: #9fdb1d;
  font-size: 16px;
}
.weightColor-medium {
  color: #dabe09;
  font-size: 16px;
}
.weightColor-heigh {
  color: red;
  font-size: 16px;
}
.risk-grade {
  display: flex;
}
:deep().el-table__header-wrapper {
  color: red;
}
/* .wait-name {
        width: 500px;
        height: 600px;
      } */
.table-class {
  /* border: 1px solid blue; */
  /* margin: 20px 0px 20px 0px; */
  height: 570px;
}
.table-button {
  letter-spacing: 1px;
  text-decoration: underline;
  /* border-radius: 0px; */
}
.risk-rank-site {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 80px;
}
.site-name {
  margin-left: 20px;
}
.risk-advice-text {
  font-size: 14px;
  color: #333333;
  letter-spacing: 1.5px;
  margin-top: 10px;
}
.sub-title {
  font-size: 14px;
  color: #333333;
}
.risk-text-container {
  height: 490px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.el-tag {
  margin-left: 25px;
  font-size: 14px;
  vertical-align: baseline;
}
.exception-button {
  vertical-align: baseline;
  margin-left: 150px;
}
.site-info-detail {
  display: flex;
  justify-content: space-between;
}
.mx-1 {
  margin-left: 100px;
}
</style>
src/views/risk_assessment/components/DustRadarChart.vue
@@ -14,9 +14,9 @@
    },
    // æ•°æ®
    yData: {
      type: Array,
      type: Object,
      default: () => {
        return [100,0,0,0,100];
        return {};
      }
    }
  },
@@ -26,8 +26,11 @@
    };
  },
  watch: {
    yData() {
      this.set();
    yData: {
      handler() {
        this.set()
      },
      deep:true
    }
  },
  mounted() {
@@ -36,22 +39,24 @@
  },
  computed:{
    valid(){
      return (100-this.yData[0]).toFixed(2)
      return (this.yData.validRisk*100).toFixed(2)
    },
    exceptionRecurrence(){
      return this.yData[1]*100
      return (this.yData.exceptionTypeAggregation*100).toFixed(2)
    },
    exceptionTypeAggregation(){
      return this.yData[2]*100
      return (this.yData.exceptionTypeAggregation*100).toFixed(2)
    },
    exceeding(){
      return  this.yData[3]
      return  (this.yData.exceedRisk*100).toFixed(2)
    },
    online(){
      return   (100-this.yData[4]).toFixed(2)
      return   (this.yData.onlineRisk*100).toFixed(2)
    }
  },
  methods: {
    initRadarChart() {
      this.chart = echarts.init(document.getElementById('main'));
    },
@@ -92,11 +97,11 @@
            data: [
              {
                value: [
                  (1 - this.yData[0]/100).toFixed(4),
                  this.yData[1],
                  this.yData[2],
                 (this.yData[3]/100).toFixed(4),
                  (1-this.yData[4]/100).toFixed(4)
                  this.yData.validRisk.toFixed(4),
                  this.yData.typicalExceptionRepetitionRate,
                 this.yData.exceptionTypeAggregation,
                 this.yData.exceedRisk.toFixed(4),
                  this.yData.onlineRisk.toFixed(4)
                ],
   
                name: '异常分析'
src/views/risk_assessment/components/SiteDetail.vue
@@ -1,16 +1,21 @@
<!--点击站点 è·³è½¬è‡³é£Žé™©æ¨¡åž‹é¡µé¢  -->
<script>
import SubFlightInspection from '@/views/exception/components/SubFlightInspection.vue'
import CompFlightInspection from '@/views/exception/components/CompFlightInspection.vue'
import CompDataRiskModel from '@/views/risk_assessment/components/CompDataRiskModel.vue'
export default {
  components: {
    SubFlightInspection
    CompFlightInspection,
    CompDataRiskModel
  },
  data() {
    return {
      siteName: '',
      month: '',
      // é¡µæ ‡é¢˜
      title:''
      time: '',
      // æ—¶é—´ç±»åž‹
      timeType: '',
      //  1代表风险模型 2代表飞行巡检
      jumpPage: -1
    }
  },
  watch: {},
@@ -19,10 +24,11 @@
    next((vm) => {
      // é€šè¿‡ `vm` è®¿é—®ç»„件实例
      vm.siteName = to.params.siteName
      vm.month = to.params.month
      vm.$nextTick(()  =>  {
      //  console.log('midd11',  vm.siteName,  vm.month);
     })
      vm.time = to.params.time
      vm.timeType = to.params.timeType
      vm.jumpPage = to.params.jumpPage
      vm.$nextTick(() => {})
    })
  },
  methods: {
@@ -37,11 +43,24 @@
<template>
  <el-page-header @back="onBack">
    <template #content>
      <span>  å¼‚常详情  </span>
      <span v-if="jumpPage == '1'"> é£Žé™©æ¨¡åž‹ </span>
      <span v-else-if="jumpPage == '2'"> å¼‚常详情 </span>
    </template>
  </el-page-header>
  <SubFlightInspection :site-name="siteName" :month="month"> </SubFlightInspection>
  <div v-show="jumpPage == '1'">
    <CompDataRiskModel :site-name="siteName" :time="time" :show-all="false"></CompDataRiskModel>
  </div>
  <div v-show="jumpPage == '2'">
    <CompFlightInspection
      :site-name="siteName"
      :time="time"
      :time-type="timeType"
      :show-all="false"
    >
    </CompFlightInspection>
  </div>
</template>
<style scoped>
src/views/risk_assessment/components/subRiskModel.vue
@@ -7,8 +7,9 @@
<script>
// import InputSearch from '@/sfc/InputSearch.vue'
import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'
import DustRadarChart from '@/views/risk_assessment/components/DustRadarChart.vue'
import exceptionApi from '@/api/exceptionApi.js'
import DustRadarChart from '@/views/risk_assessment/components/DustRadarChart.vue'
import LineChart from '@/views/risk_assessment/components/LineChart.vue'
import index from '@/utils/risk_estimate_common_function/index.js'
import ButtonClick from '@/sfc/ButtonClick.vue'