1.修改了综合风险模型表格数据的获取 2.修改了时间选择器

zmc

2023-11-16 73cb3ec2b1660610e3621d7614ad308f2c19331d

1.修改了综合风险模型表格数据的获取 2.修改了时间选择器

 src/api/index.js

@@ -4,6 +4,7 @@
// const url = 'http://localhost:8081/';
// éƒ¨ç½²
const url = 'http://114.215.109.124:8803/';
// const url = 'http://192.168.1.8:8081/';

//飞羽监管
const $http = axios.create({
@@ -11,8 +12,9 @@
  timeout: 10000
});

/* Python后台 */


/* Python后台 */
const url_py = 'http://127.0.0.1:8089/'
const $http_py = axios.create({
  baseURL: url_py,

 src/api/risk/riskApi.js

@@ -1,4 +1,4 @@
import {$http} from '@/api/index.js';
import { $http } from '@/api/index.js'

export default{
    /**
@@ -7,18 +7,42 @@
     * @returns：
     */


    queryRiskValue(siteName,month,type){
  queryRiskValue(mnCode, month, type) {
        const params = {
      mnCode: mnCode,
            month:month,
            type:type,
      type: type
        }

        if(siteName != '' || siteName  != null){
            params.siteName = siteName
        }

        return $http.post('/dust/risk/riskValue',params)
    return $http.get('/dust/risk/month', { params: params })
    },
}

  /**
   * æ ¹æ®é£Žé™©å€¼èŽ·å¾—风险等级和风险建议
   * @param： 
   * @returns：
   */
  getRiskAdvice(riskValue) {
    let temp = {}
    // ä½Žé£Žé™©
    if (riskValue < 0.2) {
      temp.riskGrade = '低风险'
      temp.riskAdvice =
        '1.建议及时提醒该站点所属单位进行应急维护；\n2.若同时存在超标、临界超标、量级突变等异常时，建议将该站点移交环境执法大队开展现场执法检查；\n3.若持续两月及以上为高风险，建议将该站点纳入年度抽测比对清单；'.split('\n')
      
    }
    // ä¸­é£Žé™©
    if (riskValue < 0.6 && riskValue >= 0.2) {
      temp.riskGrade = '中风险'
      temp.riskAdvice =
        '1.建议通过守法服务小程序、监测监管微信群等线上方式提示站点所属单位，聚焦当前存在的问题或隐患，及时开展自查自纠；\n2.若同时存在在线率或有效率月度不达标，建议电话通知该站点所属单位进行应急维护，并进行专项审核；'.split('\n')
    }
    // é«˜é£Žé™©
    if (riskValue >= 0.6) {
      temp.riskGrade = '高风险'
      temp.riskAdvice =
        '1.若不涉及超标或在线率、有效率异常，常态数据审核即可；\n2.若涉及超标或在线率、有效率等异常，建议通过守法服务小程序、监测监管微信群等线上方式提示站点所属单位，及时开展自查自纠；'.split('\n')
    }
    return temp
  }
}

 src/components/layout/AppLayout.vue

@@ -41,7 +41,8 @@
.header-and-main {
  flex-direction: column;
  height: 100vh;
  min-width: 1445px;
  // min-width: 1445px;
  min-width: 1475px;
}
/* // åž‚直方向溢出区域禁止滚动 */
.el-main {

 src/components/layout/selectName.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,2 @@
import {ref} from 'vue'
export const selectedName = ref('')

 src/main.js

@@ -37,6 +37,8 @@
// 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

app.use(ElMessage)

 src/router/index.js

@@ -11,42 +11,12 @@
      component: () => import('@/components/layout/AppLayout.vue'),
      children: 
            [
              // {
              //   path:'/avalue',
              //   name:'avalue',
              //   meta: {title: '风险评估'},
              //   children:[
              //       // æ•°æ®åˆ†é™©æ¨¡åž‹
              //   {
              //     path: "/avgDay",
              //     name: 'avgDay',
              //     meta: { title: '数据分险模型' },
              //     component: () => import('@/views/line_graph/DataRiskModel.vue')
              //   },
    
              //   //  æ•°æ®é£Žé™©æŽ’名
              //   {
              //     path: "/analysis",
              //     name: 'analysis',
              //     meta: { title: '数据风险排名' },
              //     component: () => import('@/views/line_graph/DataRiskRank.vue')
              //   },
              //   //  æ•°æ®é£Žé™©æŽ’名
              //   {
              //     path: "/riskrank",
              //     name: 'riskrank',
              //     meta: { title: '综合风险排名' },
              //     component: () => import('@/views/line_graph/SiteComprehensiveRskRanking.vue')
              //   },
              //     ]
              // },
              
            // æ•°æ®åˆ†é™©æ¨¡åž‹
            {
              path: "/avgDay",
              name: 'avgDay',
              meta: { title: '数据分险模型' , keepAlive: true},
              component: () => import('@/views/line_graph/DataRiskModel.vue')
              component: () => import('@/views/risk_assessment/DataRiskModel.vue')
            },

            //  æ•°æ®é£Žé™©æŽ’名
@@ -54,14 +24,15 @@
              path: "/analysis",
              name: 'analysis',
              meta: { title: '数据风险排名' , keepAlive: true},
              component: () => import('@/views/line_graph/DataRiskRank.vue')
              component: () => import('@/views/risk_assessment/DataRiskRank.vue')
            },

            //  æ•°æ®é£Žé™©æŽ’名
            {
              path: "/riskrank",
              name: 'riskrank',
              meta: { title: '综合风险排名' , keepAlive: true },
              component: () => import('@/views/line_graph/SiteComprehensiveRskRanking.vue')
              component: () => import('@/views/risk_assessment/SiteComprehensiveRskRanking.vue')
            },
       
            // é£žè¡Œå·¡æ£€
@@ -117,7 +88,7 @@
              path: "/detail/:siteName/:month",
              name: 'detail',
              meta: { title: '站点具体信息',transition: 'slide-left' },
              component: () => import('@/views/line_graph/components/SiteDetail.vue')
              component: () => import('@/views/risk_assessment/components/SiteDetail.vue')
            },

            // é£Žé™©æ¨¡åž‹åµŒå…¥
@@ -125,7 +96,7 @@
              path: "/subRiskModel",
              name: 'subRiskModel',
              meta: { title: '风险模型嵌入' },
              component: () => import('@/views/line_graph/components/subRiskModel.vue')
              component: () => import('@/views/risk_assessment/components/subRiskModel.vue')
            },

          ],

 src/sfc/InputSearch.vue

@@ -1,6 +1,10 @@
<!-- 
  è¿œç¨‹æœç´¢ ç«™ç‚¹åç§° è¾“入框组件
  æ ¹æ®è¾“入站点的内容提供对应的输入建议
  1.向父组件传入站点名字 å’Œ è®¾å¤‡ç¼–码
  2.可以选择建议或者任意输入
  3.父组件可以设置输入框有无默认的站点名称
  4.父组件可以设置是否需要根据选中的异常类型来给出站点建议
  ** 
  åœ¨çˆ¶ç»„件中设置
  <InputSearch :isNeedDefaultSite="1" @submit-value="(n)=>form.name=n"> </InputSearch>
@@ -44,13 +48,15 @@
      default:'-1'
    }
  },
  emits: ['submitValue', 'submitSiteNums'],
  emits: ['submitValue', 'submitSiteNums','submitMncode'],
  data() {
    return {
      // ç”¨æˆ·é€‰ä¸­çš„值
      state: '',
      // ä¿å­˜è¾“入建议的站点名称
      siteNames: []
      siteNames: [],
      // ä¿å­˜è¾“入建议的站点设备编号
      siteNamesAndMnCode:[]
    }
  },
  watch:{
@@ -81,6 +87,12 @@
      if(this.siteName != '-1' && this.siteName != ''){
        this.state = this.siteName
        this.$emit('submitValue', this.state)
      }
    },
    state(){
      if(this.state != '' && this.state != null){
        // æŸ¥æ‰¾å¯¹åº”的设备编号
        this.onSiteNameSelected(this.state)
      }
    }
  },
@@ -118,6 +130,10 @@
          const sites = res.data.data
          sites.filter((item) => {
          this.siteNames.push(item['name'])
          let temp = {}
          temp.name = item.name
          temp.mnCode = item.mnCode
          this.siteNamesAndMnCode.push(temp)
          })
        })

@@ -126,9 +142,22 @@
        const sites = response.data.data
        sites.filter((item) => {
          this.siteNames.push(item['name'])
          let temp = {}
          temp.name = item.name
          temp.mnCode = item.mnCode
          this.siteNamesAndMnCode.push(temp)
        })
        this.$emit('submitSiteNums', this.siteNames.length)
      })
    }
    },
    // æ ¹æ®é€‰ä¸­çš„站点查询设备编号
    onSiteNameSelected(siteName) { 
      const selectedSite = this.siteNamesAndMnCode.find((site) => site.name == siteName); 
  if (selectedSite) { 
    this.$emit('submitMncode',selectedSite.mnCode)
  }else{
    this.$emit('submitMncode','')
    }
    },
    
@@ -141,7 +170,8 @@
    clearSiteName() {
      this.state = ''
      this.$emit('submitValue', this.state)
    }
    },

  }
}
</script>
@@ -155,6 +185,7 @@
      popper-class="my-autocomplete"
      placeholder="请输入"
      @select="handleSelect"
      @change="handleSelect"
      clearable
      @clear="clearSiteName"
    >

 src/sfc/MonthSelect.vue

@@ -15,7 +15,7 @@

<script>
import dayjs from 'dayjs';

import time from '@/utils/time.js'
  export default {
    props:{
      month:{
@@ -44,6 +44,9 @@
        pre_month(){
          this.value = dayjs().subtract(1,'month').startOf('month').format('YYYY-MM-DD')
          this.$emit('submitValue',this.value)
        },
      judgeDateValid(date) {
          return time.judgeDateValid(date)
        }
     }
}
@@ -56,6 +59,7 @@
          v-model="value"
          type="month"
          placeholder="选择月份"
          :disabled-date="judgeDateValid"
          @change="$emit('submitValue',value)"
        />
      </div>

 src/sfc/TimeShortCuts.vue

@@ -14,8 +14,11 @@
      },
  ***
-->


<script>
import dayjs from 'dayjs';
import time from '@/utils/time.js'
export default {
  props: {
    beginAndEndTime:{
@@ -56,34 +59,89 @@
  },
  methods: {
    initShortCuts() {
      // this.shortcuts = [
      //   {
      //     text: '前一日',
      //     value: () => {
      //       const start = dayjs().subtract(1,'day').format('YYYY-MM-DD 00:00:00')
      //       const end = dayjs().subtract(1,'day').format('YYYY-MM-DD 23:59:59')
      //       return [start, end];
      //     } 
      //   },

      //   {
      //     text: '前7天',
      //     value: () => {
      //       const start = dayjs().subtract(7,'day').format('YYYY-MM-DD 00:00:00');
      //       const end = dayjs().subtract(1,'day').format('YYYY-MM-DD 23:59:59');
      //       return [start, end];
      //     }
      //   },
      //   {
      //     text: '上一月',
      //     value: () => {
      //       const start = dayjs().subtract(1,'month').startOf('month').format('YYYY-MM-DD HH:mm:ss');
      //       const end = dayjs().subtract(1,'month').endOf('month').format('YYYY-MM-DD HH:mm:ss');
      //       return [start, end];
      //     }
      //   }
      // ];


      this.shortcuts = [
        {
          text: '前一日',
          value: () => {
            if (this.time[0]=='2023-06-01 12:00:00' && this.time[1] == '2023-06-20 16:00:00'){
            const start = dayjs().subtract(1,'day').format('YYYY-MM-DD 00:00:00')
            const end = dayjs().subtract(1,'day').format('YYYY-MM-DD 23:59:59')
            return [start, end];
            }else{
              const start = dayjs(this.time[0]).subtract(1,'day').format('YYYY-MM-DD 00:00:00')
              const end = dayjs(this.time[1]).subtract(1,'day').format('YYYY-MM-DD 23:59:59')
              return [start, end];
            }
          }
        },

        {
          text: '前7天',
          value: () => {
            if (this.time[0]=='2023-06-01 12:00:00' && this.time[1] == '2023-06-20 16:00:00'){
            const start = dayjs().subtract(7,'day').format('YYYY-MM-DD 00:00:00');
            const end = dayjs().subtract(1,'day').format('YYYY-MM-DD 23:59:59');
            return [start, end];
            }else{
              const start = dayjs(this.time[0]).subtract(7,'day').format('YYYY-MM-DD 00:00:00')
              const end = dayjs(this.time[1]).subtract(7,'day').format('YYYY-MM-DD 23:59:59')
              return [start, end];
            }
            
          }
        },
        {
          text: '上一月',
          value: () => {
            if (this.time[0]=='2023-06-01 12:00:00' && this.time[1] == '2023-06-20 16:00:00'){
            const start = dayjs().subtract(1,'month').startOf('month').format('YYYY-MM-DD HH:mm:ss');
            const end = dayjs().subtract(1,'month').endOf('month').format('YYYY-MM-DD HH:mm:ss');
            return [start, end];
            }else{
              const start = dayjs(this.time[0]).subtract(1,'month').format('YYYY-MM-DD HH:mm:ss')
              const end = dayjs(this.time[1]).subtract(1,'month').format('YYYY-MM-DD HH:mm:ss')
              return [start, end];
            }
            
          }
        }
      ];

    },





    initOneWeekAgoTime() {
      switch (this.timeType) {
        case 'day':
@@ -115,6 +173,9 @@
          this.time[0] = dayjs().subtract(1, 'month').format('YYYY-MM-DD HH:mm:ss');
          this.time[1] = dayjs().format('YYYY-MM-DD HH:mm:ss');
      }
    },
    judgeDateValid(date) {
          return time.judgeDateValid(date)
    }
  }
};
@@ -132,6 +193,7 @@
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      value-format="YYYY-MM-DD HH:mm:ss"
      :disabled-date="judgeDateValid"
      @change="$emit('submitTime', time)"
      :default-time = "defaultTime"
      
@@ -151,7 +213,5 @@
  font-size: 14px;
}

/* .pick-date {
  width: 200px;
} */

</style>

 src/utils/chartFunction/lineChart.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,163 @@
import dayjs from 'dayjs'

export default {
  // èŽ·å–该月份天数
  // æ ¹æ®èµ·å§‹æ—¶é—´æž„建xè½´
  // æ ¹æ®å¤©æ•°éåŽ†
  // æ—¥æœŸå¤©æ•°+1
  // æ·»åŠ åˆ°x轴数组
  // ç›´åˆ°éåŽ†çš„次数
  // æ ¹æ®å¤©æ•°éåŽ†
  // å¯¹ä¸ºç©ºçš„的天数数据 è¿›è¡Œè¡¥å…… y轴数据为null

  /**
   * æ ¹æ®ä¼ å…¥çš„统计数据，起始时间，返回完整的x,y轴数据
   * @param： ç»Ÿè®¡æ•°æ®ï¼Œå¼€å§‹æ—¶é—´ï¼Œç»“束时间
   * @returns：x,y轴数据
   */
  getLineChartXYData(analysisData, beginTime, endTime) {
    // xè½´
    let xData = []
    // y轴的平均值
    let yAvg = []
    //  y轴的在线率
    let yOnline = []
    //  y轴的有效值
    let yValid = []
    //  y轴的超标率
    let yExceed = []
    // ä¿å­˜x,y轴值
    let obj = {}

    // å¼€å§‹æ—¥æœŸä¸º
    let dateBegin = dayjs(beginTime).subtract(1, 'day').format('YYYY-MM-DD')
    let dateEnd = dayjs(endTime).format('YYYY-MM-DD')

    //  å½“前的日期为开始日期的前一天
    let currentDate = dateBegin
    // å¯¹æ— æ•°æ®çš„日期进行填充
    while (currentDate < dateEnd) {
      // å½“前日期增加1天
      currentDate = dayjs(currentDate).add(1, 'day').format('YYYY-MM-DD')

      // æ ¹æ®æ—¥æœŸæŸ¥æ‰¾å¯¹åº”数据
      let tempData = this.findDate(analysisData, currentDate)
      // æ‰¾åˆ°å¯¹åº”日期的数据，
      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))
        continue
      }

      // æœªå‘现该日期的数据
      xData.push(currentDate)
      yAvg.push(null)
      yOnline.push(null)
      yValid.push(null)
      yExceed.push(null)
    }

    obj.xData = xData
    obj.yAvg = yAvg
    obj.yOnline = yOnline
    obj.yValid = yValid
    obj.yExceed = yExceed
    return obj
  },

  /**
   * èŽ·å–月天数
   * @param：
   * @returns：
   */
  backMonthDayNums(time) {
    return dayjs(time).daysInMonth()
  },

  /**
   * è¿”回无数据的时间段
   * @param：
   * @returns：
   */
  backNoDataInteval(dataBeginTime, dataEndTime) {
    const result = []
    // æ•°æ®å¼€å§‹æ—¶é—´
    const start = dayjs(dataBeginTime)
    // æ•°æ®ç»“束时间
    const end = dayjs(dataEndTime)
    // è¯¥æœˆçš„1号
    const monthStart = start.startOf('month')
    // è¯¥æœˆæœ€åŽä¸€å¤©
    const monthEnd = start.endOf('month')

    // æ•°æ®èµ·å§‹ä¸ç­‰äºŽæœˆåˆ ä¸” æ•°æ®ç»“束不等于月末
    if (!start.isSame(monthStart, 'day') && !end.isSame(monthEnd, 'day')) {
      result.push([monthStart.format('YYYY-MM-DD'), start.format('YYYY-MM-DD')])
      result.push([end.format('YYYY-MM-DD'), monthEnd.format('YYYY-MM-DD')])
    }

    // æ•°æ®èµ·å§‹ç­‰äºŽæœˆåˆ ä¸” æ•°æ®ç»“束不等于月末
    if (start.isSame(monthStart, 'day') && !end.isSame(monthEnd, 'day')) {
      result.push([end.format('YYYY-MM-DD'), monthEnd.format('YYYY-MM-DD')])
    }

    // æ•°æ®èµ·å§‹ä¸ç­‰äºŽæœˆåˆ ä¸” æ•°æ®ç»“束等于月末
    if (!start.isSame(monthStart, 'day') && end.isSame(monthEnd, 'day')) {
      result.push([monthStart.format('YYYY-MM-DD'), start.format('YYYY-MM-DD')])
    }

    // æ•°æ®èµ·å§‹ç­‰äºŽæœˆåˆ ä¸” æ•°æ®ç»“束等于月末  (这种情况没有空数据的时间间隔)
    return result
  },

  //   ç»„成无数据区域
  getMarkArea(timeInteval) {
    let result = []
    for (let i = 0; i < timeInteval.length; i++) {
      let temp = []
      for (let j = 0; j < timeInteval[i].length; j++) {
        let obj = {}
        // ç»™ç¬¬ä¸€ä¸ªå¯¹è±¡åŠ ä¸Šname属性
        if (j == 0) {
          obj.name = '无数据'
        }
        obj.xAxis = timeInteval[i][j]
        temp.push(obj)
      }
      result.push(temp)
    }
    return result
  },

  /**
   * æ‰¾åˆ°å¯¹è±¡æ•°ç»„中属性lstd的值
   * @param： å¯¹è±¡æ•°ç»„ ï¼ŒmnCode等于value
   * @returns：
   */
  findDate(analysisData, date) {
    if (analysisData.length == 0) {
      return false
    }

    // æŸ¥æ‰¾æ—¥æœŸ
    for (let i = 0; i < analysisData.length; i++) {
      if (analysisData[i].lst == date) {
        return analysisData[i]
      }
    }

    return false
  },

  /**
   * åŽ»é™¤å­—符串的百分号
   * @param：
   * @returns：
   */
  deleteLastStr(valueStr) {
    return valueStr.slice(0, -1)
  }
}

 src/utils/risk_estimate_common_function/index.js

@@ -250,18 +250,19 @@
      obj.region = '金山区'
      obj.monitorType = '扬尘'
      obj.siteName = res.name
      obj.mnCode = res.mnCode
      obj.beginTime = beginTime
      obj.endTime = endTime
      obj.riskValue = weight
      if (weight >= 0.6) {
        obj.riskGrage = '高风险'
        obj.riskAdvice = '建议对该站点进行线下执法检查，专项数据对比'
        obj.riskAdvice = '1.若不涉及超标或在线率、有效率异常，常态数据审核即可；\n2.若涉及超标或在线率、有效率等异常，建议通过守法服务小程序、监测监管微信群等线上方式提示站点所属单位，及时开展自查自纠；'
      } else if (weight < 0.6 && weight >= 0.2) {
        obj.riskGrage = '中风险'
        obj.riskAdvice = '建议开展常态追踪分析'
        obj.riskAdvice = '1.建议通过守法服务小程序、监测监管微信群等线上方式提示站点所属单位，聚焦当前存在的问题或隐患，及时开展自查自纠；\n2.若同时存在在线率或有效率月度不达标，建议电话通知该站点所属单位进行应急维护，并进行专项审核；'
      } else {
        obj.riskGrage = '低风险'
        obj.riskAdvice = '建议引导企业长态保持'
        obj.riskAdvice = '1.建议及时提醒该站点所属单位进行应急维护；\n2.若同时存在超标、临界超标、量级突变等异常时，建议将该站点移交环境执法大队开展现场执法检查；\n3.若持续两月及以上为高风险，建议将该站点纳入年度抽测比对清单；'
      }
      table.push(obj)
    })

 src/utils/risk_estimate_common_function/riskValue.js

@@ -1,60 +1,118 @@
// import rank from '@/utils/risk_estimate_common_function/rank.js';
// import dayjs from 'dayjs.js';



export default {

    // // è®¡ç®—日风险值
    // calDailyRisk(allTypeRiskValue){
    //     let dailyRiskValue = allTypeRiskValue.onlineRisk*0.1 + allTypeRiskValue.validRisk*0.2 + allTypeRiskValue.exceedingRisk*0.2 + allTypeRiskValue.exceptionTypeAggregation*0.2 + allTypeRiskValue.typicalExceptionRepetitionRate*0.3
    //     return dailyRiskValue
    // },

    // // è®¡ç®—月风险值
    // calMonthRisk(DailyRiskValues,month){
    //     // æ ¹æ®æœˆä»½èŽ·å¾—该月的天数
    //     let dayNum = dayjs(month).daysInMonth() 
    //     // ç´¯åŠ æ—¥é£Žé™©å€¼
    //     let sum = 0
    //     for(let i in DailyRiskValues){
    //         sum += i
    //     }
    //     // æ—¥å¼‚常类型聚集率的和/当月天数
    //     let monthRiskValue = sum /dayNum
    //     return monthRiskValue
    // },
    /**
     * ç”±å•æ¡æœˆåº¦å€¼è®¡ç®—风险值
     * @param： 
     * @returns：
     */
    calRiskValue(monthlyRiskData) {
        // é£Žé™©å€¼
        let riskValue = monthlyRiskData.onlineRisk*0.1 + monthlyRiskData.validRisk*0.2 + monthlyRiskData.exceedRisk*0.2 + monthlyRiskData.exceptionTypeAggregation*0.2 + monthlyRiskData.typicalExceptionRepetitionRate*0.3
        return riskValue
    },
    
    
    // calRiskValue(allTypeRiskValue,queryMonth){
    //     // å¯¹è®¾å¤‡ç¼–号进行分组
    //     let groupeObj =  rank.groupByMncode(allTypeRiskValue)
    //     // 
    //     for (let mnCode in groupeObj){
    //         // èŽ·å¾—设备编号对应的数据
    //         let dayData = groupeObj[mnCode]

    //         // ä¿å­˜æŸè®¾å¤‡ç¼–号该段时间的日风险值
    //         let dailyRiskValues = []
    //         // è®¡ç®—日风险值
    //         for(let item in dayData){
    //             let dailyRiskValue = this.calDailyRisk(item)
    //             dailyRiskValues.push(dailyRiskValue)
    //         }
    //     }

    // }

    // è®¡ç®—月度风险值
    /**
     * è®¡ç®—月度风险值
     * @param： 
     * @returns：
     */
    calMonthlyRiskValue(exceptionRiskValue){
        // ä¿å­˜æœˆåº¦é£Žé™©å€¼
        let monthlyRiskValue = []
        // è®¡ç®—每个站点的月度风险值
        for(let item in exceptionRiskValue){
            let value = item.onlineRisk*0.1 + item.validRisk*0.2 + item.exceedingRisk*0.2 + item.exceptionTypeAggregation*0.2 + item.typicalExceptionRepetitionRate*0.3
            monthlyRiskValue.push(value)
            let risk = this.calRiskValue(item)
            monthlyRiskValue.push(risk)
        }

        // é™åºæŽ’列
        monthlyRiskValue.sort((a, b) => b - a)
        
        return monthlyRiskValue 
    },

    /**
     * ç»„装成表格的行
     * @param： ç«™ç‚¹çš„月度分险数据，该站点的月度风险值
     * @returns：
     */
    organizeTableRow(monthlyRiskData,riskValue) {
        let obj = {}
        obj.siteName = monthlyRiskData.name
        obj.region = '金山区'
        obj.mnCode = monthlyRiskData.mnCode
        obj.monitorType = '扬尘'
        obj.riskValue = riskValue
        obj.beginTime = monthlyRiskData.lst
        obj.endTime = monthlyRiskData.lst

        // æ ¹æ®æœˆåº¦é£Žé™©å€¼ï¼Œè¿”回对应的风险等级和风险建议
        let riskGradeAndAdvice  = this.judgeRiskGradeAndAdvice(riskValue)
        obj.riskGrade = riskGradeAndAdvice[0]
        obj.riskAdvice = riskGradeAndAdvice[1]

        return obj
    },

    /**
     * æ ¹æ®æœˆåº¦é£Žé™©å€¼ï¼Œè¿”回对应的风险等级和风险建议 
     * @param： æœˆåº¦é£Žé™©å€¼
     */
    judgeRiskGradeAndAdvice(monthlyRiskValue){
        let temp = []
        // ä½Žé£Žé™©
        if(monthlyRiskValue < 0.2) {
            temp.push('低风险')
            let advice =  '1.建议及时提醒该站点所属单位进行应急维护；\n2.若同时存在超标、临界超标、量级突变等异常时，建议将该站点移交环境执法大队开展现场执法检查；\n3.若持续两月及以上为高风险，建议将该站点纳入年度抽测比对清单；'
            temp.push(advice)
    }
        // ä¸­é£Žé™©
        if (monthlyRiskValue < 0.6 && monthlyRiskValue >= 0.2) {
            temp.push('中风险')
            let advice =  '1.建议通过守法服务小程序、监测监管微信群等线上方式提示站点所属单位，聚焦当前存在的问题或隐患，及时开展自查自纠；\n2.若同时存在在线率或有效率月度不达标，建议电话通知该站点所属单位进行应急维护，并进行专项审核；'
            temp.push(advice)
        }
        // é«˜é£Žé™©
        if (monthlyRiskValue >= 0.6) {
            temp.push('高风险')
            let advice = '1.若不涉及超标或在线率、有效率异常，常态数据审核即可；\n2.若涉及超标或在线率、有效率等异常，建议通过守法服务小程序、监测监管微信群等线上方式提示站点所属单位，及时开展自查自纠；'
            temp.push(advice)
        }
        return temp
    },


    // éåŽ†å¯¹æ¯æ¡æœˆåº¦å¼‚常风险值
        // è®¡ç®—综合风险值
        // æ‹¼æŽ¥æ–°çš„对象
    // è¿”回表格对象

    /**
     * è¿”回综合风险排名的表格数据
     * @param： å„站点月度分险数据
     * @returns：表格数据
     */
   backComprehensiveRiskTableData(allExceptionData){
        let tableData = []
        // éåŽ†å¯¹æ¯æ¡æœˆåº¦å¼‚常风险
        allExceptionData.forEach(element => {
            
            // è®¡ç®—得到月度风险值
            let monthlyRiskValue = this.calRiskValue(element)
            // ç»„成表格行的字段
            let tableRow = this.organizeTableRow(element,monthlyRiskValue.toFixed(2))

            tableData.push(tableRow)
        });

        return tableData
   }



   


}

 src/utils/time.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,19 @@

import dayjs from 'dayjs'
export default {

      
        // åˆ¤æ–­å·²é€‰çš„月份是否大于当前月份
        judgeDateValid(date){
          // èŽ·å¾—当月月份
          let currentMonth = dayjs()
          let selectMonth = date.getTime()
          // é€‰æ‹©å¤§äºŽçŽ°åœ¨æœˆä»½
          if(selectMonth > currentMonth){
            return true
          }

          return false
        }

}

 src/views/data_management/HistoryData.vue

@@ -32,6 +32,8 @@
        // ç»“束时间
        endTime: ''
      },
      // æœç´¢æ¡†ä¼ é€’上来的设备编号
      tempMnCode :'',
      // è¿”回的数据
      tableData: [],
      // è¡¨æ ¼æ•°æ®
@@ -141,10 +143,7 @@

    // æŸ¥è¯¢æ•°æ®
    handleSubmit() {
      // if (this.isExceedOneMonth(this.form.beginTime, this.form.endTime)) {
      //   alert('时间跨度不能超过一个月');
      //   return;
      // }

      this.loading = true;
      this.queryButton = true
      let params = {};
@@ -161,7 +160,6 @@
      if (this.scenarioType.length != 0) {
        params['scenarioType'] = this.scenarioType.join();
      }

      this.$http.get('/dust/history1', { params: params }).then((response) => {
        // ä¿å­˜è¿”回的
        this.tableData = response.data.data.rows;
@@ -220,6 +218,7 @@
                <el-form-item>
                  <AreaAndmonitorType></AreaAndmonitorType>
                </el-form-item>

                <el-form-item>
                  <InputSearch isNeedDefaultSite="1" @submit-value="(n) => (form.name = n)">
                  </InputSearch>
@@ -249,13 +248,6 @@
          </div>
          <div class="button-and-export">
            <el-form-item>
              <!-- <el-button
                type="primary"
                @click="handleSubmit"
                style="margin-left: 10px"
                ><el-icon style="margin-right: 6px;font-size: 1.2em;"><i-ep-Search/></el-icon>查询</el-button
              >
              <el-button type="success" @click="exportDom" round><el-icon style="margin-right: 6px;margin-bottom:2px;font-size: 1.2em;"><i-ep-Download ></i-ep-Download></el-icon>导出数据</el-button> -->
              <ButtonClick style="margin-right: 12px;" content="搜索" type="primary" :loading="queryButton" @do-search="handleSubmit"></ButtonClick>
              <ButtonExportExcel  content="导出数据" type="success" :loading="exportButton" @do-export="exportDom"></ButtonExportExcel>
            </el-form-item>

 src/views/exception/FlightInspection.vue

@@ -145,27 +145,6 @@
  watch: {
    selectedRowIndex(newVaue) {
      // å¤„于表格的最后一条数据 è®¾ç½®â€˜ä¸Šä¸€æ¡â€™æŒ‰é’®ä¸å¯ç‚¹
      // if (newVaue === this.displayData.length - 1) {
      //   this.dialog.isPreCantouch = true
      //   //用户先点了第一条，pre为true,然后点击最后一条,next为true。此时两个按钮都被封锁
      //   if (this.dialog.isNextCantouch == true) {
      //     this.dialog.isNextCantouch = false
      //   }
      // }
      // // å¤„于表格第一条数据 è®¾ç½®â€˜ä¸‹ä¸€æ¡â€™æŒ‰é’®ä¸å¯ç‚¹
      // else if (newVaue === 0) {
      //   this.dialog.isNextCantouch = true
      //   //用户先点了表格最后一条,next为true,然后点击第一条，pre为true。此时两个按钮都被封锁
      //   if (this.dialog.isPreCantouch == true) {
      //     this.dialog.isPreCantouch = false
      //   }
      // }
      // // å¤„于表格的中间行 å°†æŒ‰é’®è®¾ç½®ä¸ºå¯ç‚¹å‡»çŠ¶æ€
      // else {
      //   this.dialog.isPreCantouch = false
      //   this.dialog.isNextCantouch = false
      // }
      // å¤„于表格的最后一条数据 è®¾ç½®â€˜ä¸Šä¸€æ¡â€™æŒ‰é’®ä¸å¯ç‚¹
      if (newVaue === 0) {
        this.dialog.isPreCantouch = true
        //用户先点了第一条，pre为true,然后点击最后一条,next为true。此时两个按钮都被封锁

 src/views/exception/SiteAuditAssistance.vue

@@ -121,28 +121,6 @@
  // ç›‘听  åˆ¤æ–­æŒ‰é’®æ˜¯å¦å¯ç‚¹å‡»
  watch: {
    selectedRowIndex(newVaue) {
      // // å¤„于表格的最后一条数据 è®¾ç½®â€˜ä¸Šä¸€æ¡â€™æŒ‰é’®ä¸å¯ç‚¹
      // if (newVaue === this.displayData.length - 1) {
      //   this.dialog.isPreCantouch = true
      //   //用户先点了第一条，pre为true,然后点击最后一条,next为true。此时两个按钮都被封锁
      //   if (this.dialog.isNextCantouch == true) {
      //     this.dialog.isNextCantouch = false
      //   }
      // }
      // // å¤„于表格第一条数据 è®¾ç½®â€˜ä¸‹ä¸€æ¡â€™æŒ‰é’®ä¸å¯ç‚¹
      // else if (newVaue === 0) {
      //   this.dialog.isNextCantouch = true
      //   //用户先点了表格最后一条,next为true,然后点击第一条，pre为true。此时两个按钮都被封锁
      //   if (this.dialog.isPreCantouch == true) {
      //     this.dialog.isPreCantouch = false
      //   }
      // }
      // // å¤„于表格的中间行 å°†æŒ‰é’®è®¾ç½®ä¸ºå¯ç‚¹å‡»çŠ¶æ€
      // else {
      //   this.dialog.isPreCantouch = false
      //   this.dialog.isNextCantouch = false
      // }

        // å¤„于表格的最后一条数据 è®¾ç½®â€˜ä¸Šä¸€æ¡â€™æŒ‰é’®ä¸å¯ç‚¹
        if (newVaue === 0) {
          this.dialog.isPreCantouch = true
@@ -296,25 +274,7 @@
      })
    },
    close() {
      // if (this.auditDialog.checkerNotes || this.auditDialog.enterpriseNotes) {
      //   ElMessageBox.confirm('这将会，确定要关闭吗', '提示',
      //     {
      //       confirmButtonText: '确定',
      //       cancelButtonText: '取消',
      //       type: 'warning',
      //       center :'true',
      //       icon: markRaw(Delete),
      //       draggable: true,
      //     }).then(() => {
      //       ElMessage({
      //         type: 'success',
      //         message: '已关闭',
      //       })
      //       this.auditDialog.visible = false
      //     })
      // }else{
      //   this.auditDialog.visible = false
      // }
      
      this.auditDialog.visible = false
    },
    // è¡¨æ ¼è¡Œçš„颜色
@@ -1554,17 +1514,7 @@
          <div><span class="diag-head-text1">站点名称：</span>{{ tableCurrentRowData.name }}</div>
          <div><span class="diag-head-text1">设备编号：</span>{{ tableCurrentRowData.mnCode }}</div>
          <div><span class="diag-head-text1">运维商：</span>{{ tableCurrentRowData.dutyCompany }}</div>
          <!-- <div>
            <span class="diag-head-text1">异常类型：</span>
            <span v-if="tableCurrentRowData.exceptionType == '0'">数据缺失异常</span>
            <span v-else-if="tableCurrentRowData.exceptionType == '1'">数据超低</span>
            <span v-else-if="tableCurrentRowData.exceptionType == '2'">超标</span>
            <span v-else-if="tableCurrentRowData.exceptionType == '3'">数据长时间无波动</span>
            <span v-else-if="tableCurrentRowData.exceptionType == '4'">量级突变异常</span>
            <span v-else-if="tableCurrentRowData.exceptionType == '5'">临近超标异常</span>
            <span v-else-if="tableCurrentRowData.exceptionType == '6'">单日超标次数临界异常</span>
            <span v-else-if="tableCurrentRowData.exceptionType == '7'">滑动平均值异常</span>
          </div> -->
 

          <div>
            <span class="diag-head-text1">异常时间段：</span>{{ tableCurrentRowData.beginTime }} ~
@@ -1572,22 +1522,6 @@
          </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"
@@ -1626,9 +1560,7 @@
          fixed
          :index="indexMethod2"
        ></el-table-column>
        <!-- <el-table-column fixed prop="name" label="站点名称" show-overflow-tooltip />
        <el-table-column prop="mnCode" label="设备编号" align="center" show-overflow-tooltip />
        <el-table-column prop="dutyCompany" label="运维商" align="center" show-overflow-tooltip /> -->
        
        <el-table-column prop="lst" label="采集时间" align="center" show-overflow-tooltip />
        <el-table-column
          prop="dustValue"

 src/views/line_graph/RiskTest.vue

ÎļþÒÑɾ³ý

 src/views/line_graph/components/subRiskModel.vue

ÎļþÒÑɾ³ý

 src/views/pass_login/LoginAndGetData.vue

@@ -1,4 +1,4 @@
<script>
<!-- <script>
  export default {
    data() {
      return{
@@ -22,4 +22,51 @@

<style  scoped>

</style>
</style> -->
<script> export default { 
  data() { 
    return {
  form: { 
    name: '',
   mnCode:'' 
}, 
 siteData: [] // ä¿å­˜æ‰€æœ‰ç«™ç‚¹åå’Œè®¾å¤‡ç¼–号的数据 }; 
},
 
  mounted() { 
    this.loadAllSites();

   },
   
  methods: { 
    
 
 loadAllSites() {
   this.$http.get('/dust/sitename').then((response) => { 
  this.siteData = response.data.data; 
}); 

}, 
 
 onSiteNameSelected(siteName) { 

  const selectedSite = this.siteData.find((site) => site.siteName === siteName); 

  if (selectedSite) { 
    this.form.mnCode = selectedSite.mnCode; 
  }
  // å¦‚果没有找到对应的设备编号，清空mnCode 
   else
   { this.form.mnCode = ''; 


} }
} ,
 watch: { 
  'form.name'(newValue) {
     this.onSiteNameSelected(newValue); 
    } } }

}
}


 src/views/risk_assessment/DataRiskModel.vue

copy from src/views/line_graph/DataRiskModel.vue
copy to src/views/risk_assessment/DataRiskModel.vue
Îļþ´Ó src/views/line_graph/DataRiskModel.vue ¸´ÖÆ
@@ -10,6 +10,9 @@
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'
export default {
  components: {
    LineChart,
@@ -37,15 +40,14 @@
        // ç«™ç‚¹åç§°
        name: '',
        // è®¾å¤‡ç¼–号
        number: '',
        number: '3234',
        // å¼€å§‹æ—¶é—´
        beginTime: '',
        // ç»“束时间
        endTime: ''
      },
      month: '',
      // ä¼ é€’给月份组件的值
      sfc_month: '',

      // æŠ˜çº¿å›¾é…ç½®é¡¹
      option: {},
      // æ•°æ®æ¸…单
@@ -62,40 +64,27 @@
        // å¼‚常类型据聚集度
        exceptionTypeAggregation: 0
      },
      status: {
        isHasData: false
      },

      // æŸ¥è¯¢æŒ‰é’®åŠ è½½æ•ˆæžœ
      queryButton: false,

      // é£Žé™©å€¼æŽ’名前十的站点
      top_10_sites_with_risk_values: [{ name: '', riskValue: 0.2 }],
      // é£Žé™©å€¼
      weight: ''
      weight: '',
      // æ— æ•°æ®é…ç½®æ—¶é—´æ®µ
      areaColor: []
    }
  },

  watch: {
    sName() {
      // å½“别的页面调用时
      if (this.sName != '' || this.month_1 != '') {
        // æ›´æ–°ç«™ç‚¹åå­—和时间
        this.form.name = this.sName
        this.month = this.month_1
        this.parentDataFlag = true
        // æ›´æ–°æŽ’清单
        this.getRiskRank()
        // æ›´æ–°ç»Ÿè®¡æ•°æ®
        this.getAnalysisData()
        // è®¡ç®—风险值
        this.calRiskValue()
      }
    }
  },

  mounted() {
    // // åŠ è½½é£Žé™©å€¼æœ€é«˜çš„站点数据
    this.ShowDefaultData()
  },
  computed: {
    // é£Žé™©ç­‰çº§
    riskGradeAndAdvice() {
      return riskApi.getRiskAdvice(this.weight)
    }
  },

  methods: {
@@ -153,8 +142,11 @@
    async updateOriginPage() {
      this.screenLoading = true
      // æ›´æ–°æŽ’名清单，并得到风险值最高站点
      this.form.name = await this.getRiskRank()
      let arr = await this.getRiskRank()
      this.form.name = arr[0]
      this.form.number = arr[1]
      this.screenLoading = false

      // æ›´æ–°æ—¥ç»Ÿè®¡æ•°æ®
      this.getAnalysisData()
      // è®¡ç®—风险值
@@ -163,29 +155,8 @@

    // è®¡ç®—风险值
    calRiskValue() {
      exceptionApi.analysisdataByType(this.month, 'month').then((response) => {
        const chartData = response.data.data

        if (response.data.data.length == 0) {
          return
        }
        // ä»Žå¯¹è±¡æ•°ç»„找到该站点所在的元素
        let siteItem = this.findObjectByPropertyValue(chartData, 'name', this.form.name)
        if (Object.keys(siteItem).length === 0) {
          return
        }
        let arr = []
        arr.push(siteItem)
        exceptionApi
          .exceptiondata1({
            siteName: this.form.name,
            beginTime: this.form.beginTime,
            endTime: this.form.endTime
          })
          .then((res) => {
            let table = index.merge(arr, res.data.data, this.form.beginTime, this.form.endTime)
            this.weight = table[0].riskValue
          })
      riskApi.queryRiskValue(this.form.number, this.month, 'month').then((response) => {
        this.weight = riskValue.calRiskValue(response.data.data[0]).toFixed(2)
      })
    },

@@ -213,14 +184,22 @@
            this.isNoData = true
            return
          }
          this.begin = this.chartData[0].lst
          this.end = this.chartData[this.chartData.length - 1].lst
          // åˆ†æžæ•°æ®ä¸­çš„最早时间
          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)
          console.log('区域', this.areaColor)
          this.setChart()
          //  æŠ˜çº¿å›¾æ•°æ®
          let temp = index.calBillData(this.chartData, this.begin, this.end)
          let temp = index.calBillData(this.chartData, begin, end)
          this.bill.min = temp['min']
          this.bill.max = temp['max']

@@ -248,69 +227,53 @@
    // é€‰æ‹©å…¶ä»–值类型时
    setChart() {
      if (this.chartData.length) {
        // x轴日期时间
        let dateList = []
        //颗粒物平均浓度
        let dayAvg = []
        let dataOnline = []
        let dataValid = []
        let dataExceed = []
        this.chartData.forEach((item) => {
          //x轴日期
          dateList.push(item.lst)
          // åŽ†å²æ²¹çƒŸæµ“度
          dayAvg.push(item.dayAvg)
          dataOnline.push(item.dayOnline.slice(0, -1))
          dataValid.push(item.dayValid.slice(0, -1))
          dataExceed.push(item.dayExceeding.slice(0, -1))
        })
        // æž„建折线图x,y数据
        let obj = lineChart.getLineChartXYData(
          this.chartData,
          this.form.beginTime,
          this.form.endTime
        )

        this.chartData1 = {
          x: dateList,
          y: dayAvg
          x: obj.xData,
          y: obj.yAvg
        }
        this.chartData2 = {
          x: dateList,
          y: dataOnline
          x: obj.xData,
          y: obj.yOnline
        }
        this.chartData3 = {
          x: dateList,
          y: dataValid
          x: obj.xData,
          y: obj.yValid
        }
        this.chartData4 = {
          x: dateList,
          y: dataExceed
          x: obj.xData,
          y: obj.yExceed
        }
      }
    },

    // å¾—到前10风险排名清单
    async getRiskRank() {
      let staticsData = await exceptionApi.analysisdataByType(this.month, 'month')
      let response = await riskApi.queryRiskValue('', this.month, 'month')

      let exceptionData = await exceptionApi.exceptiondata1({
        siteName: '',
        beginTime: this.form.beginTime,
        endTime: this.form.endTime
      })
      let tableData = riskValue.backComprehensiveRiskTableData(response.data.data)

      const riskValueSites = index.merge(
        staticsData.data.data,
        exceptionData.data.data,
        this.form.beginTime,
        this.form.endTime
      )
      this.top_10_sites_with_risk_values = this.getTopRiskData(riskValueSites, 10)
      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')
        })
        // Promise
        return this.top_10_sites_with_risk_values[0].siteName
        // ä¿å­˜é£Žé™©å€¼æœ€é«˜çš„站点名称和设备编号
        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： å¯¹è±¡æ•°ç»„，返回的数量
@@ -335,11 +298,12 @@
        :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 :month="this.month_1" @submit-value="giveMonth"></MonthSelect>
      <MonthSelect  @submit-value="giveMonth"></MonthSelect>
    </el-form-item>

    <el-form-item>
@@ -355,7 +319,7 @@
  <div v-loading="screenLoading" class="wait-name">
    <div class="chart-container" v-show="!isNoData && !screenLoading">
      <div class="time-text">
        <span>数据统计时段：{{ begin }} ~ {{ end }}</span>
        <span>数据统计时段：{{ form.beginTime }} ~ {{ form.endTime }}</span>
        <span class="site-name">{{ form.name }}</span>
      </div>

@@ -364,15 +328,16 @@
          <el-card shadow="never" class="table-class">
            <el-table
              ref="table"
              highlight-current-row="true"
              :highlight-current-row="true"
              :data="top_10_sites_with_risk_values"
              :default-sort="{ prop: 'riskValue', order: 'descending' }"
              height="540"
            >
                <!-- :index="indexMethod" -->

              <el-table-column
                type="index"
                label="序号"
                :index="indexMethod"
                fixed
                width="52"
                show-overflow-tooltip
@@ -401,22 +366,11 @@
                show-overflow-tooltip
                align="center"
              />
              <!-- <el-table-column label="操作" align="center">
                <template #default="{ row }">
                  <el-button
                    type="primary"
                    text
                    class="table-button"
                    @click="querySiteStaticsInfo(row)"
                    >详情</el-button
                  >
                </template>
              </el-table-column> -->
            </el-table>
          </el-card>
        </el-col>

        <el-col :span="12">
        <el-col :span="11">
          <el-card shadow="never" class="table-class">
            <DustRadarChart
              :name="[
@@ -437,8 +391,8 @@
          </el-card>
        </el-col>

        <el-col :span="3">
          <el-card shadow="never" class="card-height">
        <el-col :span="4">
          <el-card shadow="never" class="card-height risk-card">
            <template #header>
              <h1
                :class="{
@@ -450,19 +404,20 @@
                é£Žé™©å€¼(0~1)：{{ weight }}
              </h1>
            </template>
            <div class="risk-text-container">

            <div class="risk-grade">
              <strong>风险等级：</strong>
              <span v-if="weight >= 0.6"> é«˜é£Žé™©</span>
              <span v-else-if="weight >= 0.2 && weight < 0.6"> ä¸­é£Žé™©</span>
              <span v-else> ä½Žé£Žé™©</span>
              <h1 class="sub-title">风险等级：</h1>
              <span class="sub-title">{{ riskGradeAndAdvice.riskGrade }} </span>
            </div>

            <div class="risk-advice">
              <strong>管控建议：</strong>
              <span v-if="weight >= 0.6"> å»ºè®®å¯¹è¯¥ç«™ç‚¹è¿›è¡Œçº¿ä¸‹æ‰§æ³•æ£€æŸ¥ï¼Œä¸“项数据对比</span>
              <span v-else-if="weight >= 0.2 && weight < 0.6"> å»ºè®®å¼€å±•å¸¸æ€è¿½è¸ªåˆ†æž</span>
              <span v-else> å»ºè®®å¼•å¯¼ä¼ä¸šé•¿æ€ä¿æŒ</span>
              <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>
@@ -477,12 +432,16 @@
                <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>
            <template #header>
              <span class="title-16">风险详情</span>
            </template>

            <el-form>
              <el-form-item label="最大值："> {{ bill.max }} mg/m³ </el-form-item>
@@ -504,14 +463,26 @@
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="never" class="card-value">
            <LineChart title="日均值" :chartData="chartData1" yName="mg/m³" seriesName="日均值">
            <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="日在线率">
            <LineChart
              title="日在线率"
              :chartData="chartData2"
              yName="%"
              seriesName="日在线率"
              :areaColor="areaColor"
            >
            </LineChart>
          </el-card>
        </el-col>
@@ -519,14 +490,26 @@
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="never" class="card-value">
            <LineChart title="日有效率" :chartData="chartData3" yName="%" seriesName="日有效率">
            <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="日超标率">
            <LineChart
              title="日超标率"
              :chartData="chartData4"
              yName="%"
              seriesName="日超标率"
              :areaColor="areaColor"
            >
            </LineChart>
          </el-card>
        </el-col>
@@ -559,10 +542,7 @@
  width: 98%;
  /* height: 600px; */
}
.card-value {
  /* min-width:900px; */
  /* padding:0px */
}

.card-height {
  height: 570px;
}
@@ -572,14 +552,14 @@
  line-height: 60px;
}
.risk-advice {
  margin: 40px 0px;
  /* margin: 20px 0px; */
}
.container {
  display: flex;
  margin-bottom: 10px;
}
.grade-instance {
  margin-top: 80px;
  /* margin-top: 50px; */
}
.block-color {
  width: 1em;
@@ -612,16 +592,18 @@
}
.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;
  margin-top: 10px;
}
:deep().el-table__header-wrapper {
  color: red;
@@ -644,4 +626,21 @@
.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;
}
</style>

 src/views/risk_assessment/DataRiskRank.vue

ÎļþÃû´Ó src/views/line_graph/DataRiskRank.vue ÐÞ¸Ä
@@ -45,7 +45,6 @@
  },

  mounted() {
    this.form.name = ''
    this.fetchData()
    this.calTableHeight()
  },
@@ -148,9 +147,7 @@
      let params = {}
      params['page'] = this.currentPage
      params['pageSize'] = this.pageSize
      if (this.form.name) {
        params['siteName'] = this.form.name
      }
      params['siteName'] = ''
      if (this.form.beginTime) {
        params['beginTime'] = this.form.beginTime
      }

 src/views/risk_assessment/SiteComprehensiveRskRanking.vue

ÎļþÃû´Ó src/views/line_graph/SiteComprehensiveRskRanking.vue ÐÞ¸Ä
@@ -1,25 +1,21 @@
<script>
import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'
import exceptionApi from '@/api/exceptionApi.js'
import { useCommonFunction } from '../../utils/common.js'
import index from '@/utils/risk_estimate_common_function/index.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 SiteDetail from '@/views/line_graph/components/SiteDetail.vue'
import { useLoadingStore } from '@/stores/loadingStore';
import { mapStores } from 'pinia';
import riskApi from '@/api/risk/riskApi.js';
import riskValue from '@/utils/risk_estimate_common_function/riskValue.js';
import MonthSelect from '@/sfc/MonthSelect.vue'
import { useLoadingStore } from '@/stores/loadingStore'
import { mapStores } from 'pinia'
import riskApi from '@/api/risk/riskApi.js'
import riskValue from '@/utils/risk_estimate_common_function/riskValue.js'
export default {
  components: {
    AreaAndmonitorType,
    ButtonExportExcel,
    ButtonClick,
    MonthSelect,
    SiteDetail,
  },
  data() {
    return {
@@ -69,7 +65,7 @@
    return { exportToExcel }
  },
    computed: {
    ...mapStores(useLoadingStore),
    ...mapStores(useLoadingStore)
  },
  mounted(){
    // 
@@ -77,7 +73,6 @@
    this.calTableHeight()
  },
  methods: {

    /**
     * å°†ä¸­å›½æ ‡å‡†æ—¶é—´è½¬ä¸ºæŒ‡å®šæ ¼å¼
     * @param：
@@ -85,12 +80,11 @@
     */
     giveMonth(val){
      //将中国标准时间转为指定格式(该组件返回的标准时间的格式，所以必须的加这个函数)
      this.form.month = dayjs(val).format('YYYY-MM-DD');
      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);

      console.log(this.form.beginTime, this.form.endTime)
     },
     
    // åŠŸèƒ½ï¼šæ”¹å˜è¡¨æ ¼æŸä¸ªå•å…ƒæ ¼çš„颜色
@@ -98,11 +92,9 @@
      // å¹³å‡å€¼ä¸æ»¡è¶³æ ‡å‡†æ—¶
      if (columnIndex == 4) {
        if (row.riskValue >= 0.8) {
          return 'warning-row';
          return 'warning-row'
        }
      }

     
    },
    // åŠŸèƒ½ï¼šè¡¨æ ¼é«˜åº¦æ ¹æ®å†…容自适应
    calTableHeight() {
@@ -110,67 +102,25 @@
      // å…¶ä¸­ä¸€ä¸ª40是盒子的总外边距
      this.tableHeight = `calc(100vh - ${h1}px  - 40px - 40px - var(--el-main-padding) * 2`
    },
    // ç‚¹å‡»é£Žé™©æŽ’名按钮
    // fetchData() {
    //   this.loading = true
    //   this.queryButton = true
    //   exceptionApi
    //     .analysisdataByType(this.form.month, 'month')
    //     .then((response) => {
    //       this.chartData = response.data.data
    //       this.queryButton = false
    //       this.isNoData = false

    //       if (response.data.data.length == 0) {
    //         this.isNoData = true
    //         return
    //       }

    //       exceptionApi
    //         .exceptiondata1({
    //           siteName: '',
    //           beginTime: this.form.beginTime,
    //           endTime: this.form.endTime
    //         })
    //         .then((res) => {
    //           this.isNoData = false
 
    //           this.table = index.merge(
    //             this.chartData,
    //             res.data.data,
    //             this.form.beginTime,
    //             this.form.endTime
    //           )
    //           this.loading = false

    //           this.$nextTick(()=>{
    //           this.$refs.table.sort('riskValue','descending')
              
    //         })

    //         })
            
    //     })
    // },

     // ç‚¹å‡»é£Žé™©æŽ’名按钮
     fetchData() {
      this.loading = true
      this.queryButton = true
      riskApi
        .queryRiskValue('',this.form.month, 'month')
        .then((response) => {
      riskApi.queryRiskValue('', this.form.month, 'month').then((response) => {
          if (response.data.data.length == 0) {
            this.isNoData = true
            return
          }

          this.table = riskValue.calMonthlyRiskValue(response.data.data)
        this.table = riskValue.backComprehensiveRiskTableData(response.data.data)
        console.log('表', this.table)
          this.queryButton = false
          this.isNoData = false
        this.loading = false

              this.$nextTick(()=>{
              this.$refs.table.sort('riskValue','descending')
              
        })
    })
  },
@@ -183,6 +133,11 @@
      this.fetchData()
      // å¼‚常数据
      // this.exceptiondataCount()
    },

    // å•å…ƒæ ¼å†…容换行
    wrapIndex(index) {
      return index.replace(/\n/g, '<br/>')
    },

    /**
@@ -219,10 +174,9 @@
      }
    },
    openDetail(row){
      const encodedSiteName = encodeURIComponent(row.siteName);
      const encodedSiteName = encodeURIComponent(row.siteName)
      this.$router.push(`/detail/${encodedSiteName}/${this.form.month}`)

      // this.$router.push(`/detail/${row.siteName}/${this.form.month}`)
    }
  }
}
@@ -275,7 +229,6 @@
      type="index"
      prop="name"
      label="序号"
      :index="indexMethod"
      fixed
      align="center"
      width="55"
@@ -283,13 +236,19 @@
    />
    <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
        >
        <el-button type="primary" text class="table-button" @click="openDetail(row)">{{
          row.siteName
        }}</el-button>
      </template>
      </el-table-column>
    <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="monitorType"
      label="检测类型"
      align="center"
      width="80"
      show-overflow-tooltip
    />
    <el-table-column
      prop="riskValue"
      label="风险值"
@@ -298,8 +257,18 @@
      width="100"
      show-overflow-tooltip
    />
    <el-table-column prop="riskGrage" label="风险等级" align="center" width="100" show-overflow-tooltip />
    <el-table-column prop="riskAdvice" label="管控措施" align="center" 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="开始日期"
@@ -318,9 +287,6 @@
    />
  </el-table>
  <el-empty v-show="isNoData" :image-size="200" />



</template>

<style scoped>
@@ -338,5 +304,7 @@
  text-decoration: underline;
  border-radius: 0px;
}

.el-table {
  color: #333333;
}
</style>

 src/views/risk_assessment/components/DustRadarChart.vue

ÎļþÃû´Ó src/views/line_graph/components/DustRadarChart.vue ÐÞ¸Ä
@@ -133,7 +133,8 @@

<style scoped>
.chart {
  width: 650px;
  /* width: 650px; */
  width: 620px;
  height: 500px;
}
</style>

 src/views/risk_assessment/components/JumpDialog.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,41 @@

<script>
  export default {
    props:{
    dialogVisible:{
        type:Boolean,
        default:false
    }
 },
    data() {
      return{
        // dialogVisible:false
        isOpen:false
      }
    },
    watch:{
        dialogVisible(){
            this.isOpen = this.dialogVisible
        }
    },
    mounted() {

    },
    methods: {

     }
}
</script>

<template>
    <el-dialog
    v-model="isOpen"
    width="80%"
  >
  11111
  </el-dialog>
</template>

<style  scoped>

</style>

 src/views/risk_assessment/components/LineChart.vue

ÎļþÃû´Ó src/views/line_graph/components/LineChart.vue ÐÞ¸Ä
@@ -35,6 +35,12 @@
    seriesName: {
      type: String,
      default: '系列一'
    },
    areaColor: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
@@ -44,6 +50,7 @@
  },
  mounted() {
    this.intiChart()

    window.addEventListener('resize', this.resizeChart)
  },
  watch: {
@@ -70,11 +77,6 @@
        toolbox: {
          // å·¥å…·æ 
          feature: {
            // dataZoom: {
            //   // åŒºåŸŸç¼©æ”¾
            //   yAxisIndex: 'none'
            // },

            // ä¿å­˜ä¸ºå›¾ç‰‡
            saveAsImage: {}
          }
@@ -101,7 +103,16 @@
          {
            name: this.seriesName,
            type: 'line',
            data: this.chartData.y
            data: this.chartData.y,
            // å˜æ¢æŒ‡å®šæ—¶é—´åŒºé—´çš„背景颜色

            markArea: {
              itemStyle: {
                color: '#e5e6eb'
              },

              data: this.areaColor
            }
          }
        ]
      }
@@ -124,5 +135,6 @@
  height: 300px;
  margin-top: 25px;
  margin-left: 30px;
  color: #535a64;
}
</style>

 src/views/risk_assessment/components/SiteDetail.vue

ÎļþÃû´Ó src/views/line_graph/components/SiteDetail.vue ÐÞ¸Ä
@@ -1,6 +1,6 @@
<!--点击站点 è·³è½¬è‡³é£Žé™©æ¨¡åž‹é¡µé¢  -->
<script>
import subRiskModel from '@/views/line_graph/components/subRiskModel.vue'
import subRiskModel from '@/views/risk_assessment/components/subRiskModel.vue'
export default {
  components: {
    subRiskModel

 src/views/risk_assessment/components/subRiskModel.vue

ÎļþÃû´Ó src/views/line_graph/DataRiskModel.vue ÐÞ¸Ä
@@ -1,19 +1,34 @@
<!-- æ—¥å‡å€¼ -->
<!-- é£Žé™©æ¨¡åž‹çš„页面  
区别：
1.接受父组件传参
2.无初始加载数据（无mounted）
-->

<script>
import InputSearch from '@/sfc/InputSearch.vue'
// import InputSearch from '@/sfc/InputSearch.vue'
import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'
import DustRadarChart from './components/DustRadarChart.vue'
import DustRadarChart from '@/views/risk_assessment/components/DustRadarChart.vue'
import exceptionApi from '@/api/exceptionApi.js'
import LineChart from './components/LineChart.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'
export default {
  props: {
    sName: {
      type: String,
      default: ''
    },
    month_1: {
      type: String,
      default: ''
    }
  },
  components: {
    LineChart,
    InputSearch,
    // DateSelectWithShortCuts,
    // InputSearch,
    AreaAndmonitorType,
    DustRadarChart,
    ButtonClick,
@@ -30,6 +45,7 @@
      chartData2: {},
      chartData3: {},
      chartData4: {},
      //devId:'',          //设备编号
      begin: '', //开始时间
      end: '', //结束时间

@@ -38,6 +54,8 @@
        name: '',
        // è®¾å¤‡ç¼–号
        number: '',

        // month:'',
        // å¼€å§‹æ—¶é—´
        beginTime: '',
        // ç»“束时间
@@ -82,9 +100,12 @@
        // æ›´æ–°ç«™ç‚¹åå­—和时间
        this.form.name = this.sName
        this.month = this.month_1
        // åŒæ—¶æ›´æ–°æœˆèµ·å§‹æ—¶é—´
        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.parentDataFlag = true
        // æ›´æ–°æŽ’清单
        this.getRiskRank()

        // æ›´æ–°ç»Ÿè®¡æ•°æ®
        this.getAnalysisData()
        // è®¡ç®—风险值
@@ -93,10 +114,7 @@
    }
  },

  mounted() {
    // // åŠ è½½é£Žé™©å€¼æœ€é«˜çš„站点数据
    this.ShowDefaultData()
  },
  mounted() {},

  methods: {
    // æŸ¥è¯¢ç«™ç‚¹ç»Ÿè®¡ä¿¡æ¯
@@ -115,6 +133,7 @@
      // åŒæ—¶æ›´æ–°å¼€å§‹å’Œç»“束时间
      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')
      console.log(this.form.beginTime, this.form.endTime)
    },

    /**
@@ -151,10 +170,9 @@

    // åŠ è½½é»˜è®¤å±•ç¤ºçš„内容
    async updateOriginPage() {
      this.screenLoading = true
      // æ›´æ–°æŽ’名清单，并得到风险值最高站点
      this.form.name = await this.getRiskRank()
      this.screenLoading = false

      // æ›´æ–°æ—¥ç»Ÿè®¡æ•°æ®
      this.getAnalysisData()
      // è®¡ç®—风险值
@@ -201,6 +219,7 @@
      if (this.form.endTime) {
        params['endTime'] = this.form.endTime
      }
      this.screenLoading = true
      this.loading = true
      this.queryButton = true
      exceptionApi
@@ -218,6 +237,7 @@

          // ç§»é™¤ç©ºæ•°æ®çŠ¶æ€
          this.isNoData = false
          this.screenLoading = false
          this.setChart()
          //  æŠ˜çº¿å›¾æ•°æ®
          let temp = index.calBillData(this.chartData, this.begin, this.end)
@@ -282,44 +302,6 @@
          y: dataExceed
        }
      }
    },

    // å¾—到前10风险排名清单
    async getRiskRank() {
      let staticsData = await exceptionApi.analysisdataByType(this.month, 'month')

      let exceptionData = await exceptionApi.exceptiondata1({
        siteName: '',
        beginTime: this.form.beginTime,
        endTime: this.form.endTime
      })

      const riskValueSites = index.merge(
        staticsData.data.data,
        exceptionData.data.data,
        this.form.beginTime,
        this.form.endTime
      )
      this.top_10_sites_with_risk_values = this.getTopRiskData(riskValueSites, 10)
      if (this.top_10_sites_with_risk_values.length != 0) {
        // è¡¨æ ¼æŒ‰é£Žé™©å€¼å€’叙排列
        this.$nextTick(() => {
          this.$refs.table.sort('riskValue', 'descending')
        })
        // Promise
        return this.top_10_sites_with_risk_values[0].siteName
      }
    },

    /**
     * é™åºæŽ’列，返回降序前num的元素
     * @param： å¯¹è±¡æ•°ç»„，返回的数量
     */
    getTopRiskData(arr, num) {
      // æŒ‰ç…§riskValue降序排列
      arr.sort((a, b) => b.riskValue - a.riskValue)
      // èŽ·å–前num个元素
      return arr.slice(0, num)
    }
  }
}
@@ -330,26 +312,27 @@
    <el-form-item class="form-item">
      <AreaAndmonitorType></AreaAndmonitorType>
    </el-form-item>
    <el-form-item class="form-item">

    <!-- <el-form-item class="form-item">
      <InputSearch
        :site-name="form.name"
        isNeedDefaultSite="0"
        @submit-value="(n) => (form.name = n)"
      ></InputSearch>
    </el-form-item>
      </el-form-item> -->

    <el-form-item>
    <!-- <el-form-item>
      <MonthSelect :month="this.month_1" @submit-value="giveMonth"></MonthSelect>
    </el-form-item>
      </el-form-item> -->

    <el-form-item>
    <!-- <el-form-item>
      <ButtonClick
        content="风险评估"
        type="primary"
        :loading="queryButton"
        @do-search="riskAssessment"
      ></ButtonClick>
    </el-form-item>
      </el-form-item> -->
  </el-form>

  <div v-loading="screenLoading" class="wait-name">
@@ -360,70 +343,14 @@
      </div>

      <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="序号"
                :index="indexMethod"
                fixed
                width="52"
                show-overflow-tooltip
                align="center"
              />
              <el-table-column
                prop="siteName"
                label="站点名称"
                show-overflow-tooltip
                align="center"
              >
                <template #default="{ row }">
                  <el-button
                    type="primary"
                    text
                    class="table-button"
                    @click="querySiteStaticsInfo(row)"
                    >{{ row.siteName }}</el-button
                  >
                </template>
              </el-table-column>
              <el-table-column
                prop="riskValue"
                label="风险值"
                sortable
                show-overflow-tooltip
                align="center"
              />
              <!-- <el-table-column label="操作" align="center">
                <template #default="{ row }">
                  <el-button
                    type="primary"
                    text
                    class="table-button"
                    @click="querySiteStaticsInfo(row)"
                    >详情</el-button
                  >
                </template>
              </el-table-column> -->
            </el-table>
          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card shadow="never" class="table-class">
        <el-col :span="14">
          <el-card shadow="never">
            <DustRadarChart
              :name="[
                '数据有效风险',
                '典型异常复现风险',
                '异常类型聚集风险',
                '超标异常风险',
                '数据超标风险',
                '数据在线风险'
              ]"
              :yData="[
@@ -437,7 +364,7 @@
          </el-card>
        </el-col>

        <el-col :span="3">
        <el-col :span="5">
          <el-card shadow="never" class="card-height">
            <template #header>
              <h1
@@ -480,7 +407,7 @@
          </el-card>
        </el-col>

        <el-col :span="4">
        <el-col :span="5">
          <el-card shadow="never" class="card-height">
            <template #header><span class="title-16">风险详情</span></template>

@@ -564,7 +491,7 @@
  /* padding:0px */
}
.card-height {
  height: 570px;
  height: 540px;
}
.el-header {
  background-color: #010408;
@@ -633,7 +560,7 @@
.table-class {
  /* border: 1px solid blue; */
  /* margin: 20px 0px 20px 0px; */
  height: 570px;
  height: 540px;
}

.table-button {