按开发清单已修改

zmc

2023-11-02 fd934f83afae1e3fce46db8610837d0e0f4d9393

按开发清单已修改

 src/api/index.js

@@ -4,9 +4,9 @@



// const url = 'http://localhost:8081/';
const url = 'http://localhost:8081/';
// éƒ¨ç½²
const url = 'http://114.215.109.124:8803/';
// const url = 'http://114.215.109.124:8803/';

//飞羽监管
const $http = axios.create({

 src/components/core/Content.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,22 @@
<template>
    <router-view v-slot="{ Component, route }">
      <!-- <transition :name="route.meta.transition || 'fade'"> -->
      <keep-alive>
        <component
          v-if="route.meta.keepAlive"
          :is="Component"
          :key="route.name"
        />
      </keep-alive>
      <component v-if="!route.meta.keepAlive" :is="Component" :key="route.name" />
      <!-- </transition> -->
    </router-view>
  </template>
  
  <script>
  export default {
    name: 'CoreContent',
  };
  </script>
  <style scoped></style>
  

 src/components/layout/AppAside.vue

@@ -55,7 +55,6 @@
        </el-link>
       </el-row>

      <!-- <hr/> -->
      <div class="horizontal-line"></div>
        <el-scrollbar :height="menuHeight">

@@ -65,32 +64,32 @@
            <span class="parent-title">风险评估</span>
          </template>
          <!-- æœªé€‰ä¸­ -->
          <el-menu-item index="avgDay" v-show="menu[0].avalue" @click="changeIcon(0)" >
          <el-menu-item index="/avgDay" v-show="menu[0].avalue" @click="changeIcon(0)" >
            <img src="@/assets/generalModel.png" height="23">
            æ•°æ®é£Žé™©æ¨¡åž‹
          </el-menu-item>
          <!-- ç°çš„ -->
          <el-menu-item index="avgDay"  v-show="!menu[0].avalue" @click="changeIcon(0)">
          <el-menu-item index="/avgDay"  v-show="!menu[0].avalue" @click="changeIcon(0)">
            <img src="@/assets/generalModel2.png" height="23">
            æ•°æ®é£Žé™©æ¨¡åž‹
          </el-menu-item>


          <el-menu-item index="analysis" v-show="menu[1].avalue" @click="changeIcon(1)">
          <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-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)">
          <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)">
          <el-menu-item index="/riskrank"  v-show="!menu[2].avalue" @click="changeIcon(2)">
            <img src="@/assets/generalModel2.png" height="23">
            ç»¼åˆé£Žé™©æŽ’名
          </el-menu-item>
@@ -103,21 +102,21 @@
            <img src="@/assets/onlineInspection.png" height="23">
            <span class="parent-title">线上巡检</span>
          </template>
          <el-menu-item index="edata" v-show="menu[3].avalue" @click="changeIcon(3)">
          <el-menu-item index="/edata" v-show="menu[3].avalue" @click="changeIcon(3)">
            <img src="@/assets/generalModel.png" height="23">
          é£žè¡Œå·¡æ£€
          </el-menu-item>
          <el-menu-item index="edata" v-show="!menu[3].avalue" @click="changeIcon(32)">
          <el-menu-item index="/edata" v-show="!menu[3].avalue" @click="changeIcon(32)">
            <img src="@/assets/generalModel2.png" height="23">
          é£žè¡Œå·¡æ£€
          </el-menu-item>


          <el-menu-item index="testData" v-show="menu[4].avalue" @click="changeIcon(4)">
          <el-menu-item index="/testData" v-show="menu[4].avalue" @click="changeIcon(4)">
            <img src="@/assets/generalModel.png" height="23">
          ç«™ç‚¹å®¡æ ¸è¾…助
          </el-menu-item>
          <el-menu-item index="testData" v-show="!menu[4].avalue" @click="changeIcon(4)">
          <el-menu-item index="/testData" v-show="!menu[4].avalue" @click="changeIcon(4)">
            <img src="@/assets/generalModel2.png" height="23">
          ç«™ç‚¹å®¡æ ¸è¾…助
          </el-menu-item>
@@ -131,16 +130,16 @@
          </template>
 
         
            <el-menu-item index="hdata" v-show="menu[5].avalue" @click="changeIcon(5)">
            <el-menu-item index="/hdata" v-show="menu[5].avalue" @click="changeIcon(5)">
            <img src="@/assets/generalModel.png" height="23">
          åŽ†å²æ•°æ®ç®¡ç†
          </el-menu-item>
          <el-menu-item index="hdata" v-show="!menu[5].avalue" @click="changeIcon(5)" >
          <el-menu-item index="/hdata" v-show="!menu[5].avalue" @click="changeIcon(5)" >
            <img src="@/assets/generalModel2.png" height="23">
          åŽ†å²æ•°æ®ç®¡ç†
          </el-menu-item>

         <!-- <el-menu-item index="management" >
         <!-- <el-menu-item index="/management" >
            <el-icon><i-ep-Histogram /></el-icon>
          æ•°æ®æŽ¥å…¥ç®¡ç†
          </el-menu-item> -->
@@ -189,10 +188,10 @@
  width: 220px;
  border-right: none;
  &.el-menu--collapse {
    //侧边栏折叠时的样式
    /* //侧边栏折叠时的样式 */
    width: 65px;
    & .title-text {
      //折叠时隐藏h1文字
      /* //折叠时隐藏h1文字 */
      display: none;
    }
    & span {
@@ -255,6 +254,6 @@
  right: 0;
  height: 1px;
  background-color: rgb(221, 217, 217,0.2);
  // width: 180px;
  /* // width: 180px; */
}
</style>

 src/components/layout/AppLayout.vue

@@ -2,10 +2,12 @@
<script  >
import  AppAside  from "./AppAside.vue";
import  AppHeader from "./AppHeader.vue"
import Content from '@/components/core/Content.vue';
  export default{
    components:[
    AppAside,
    AppHeader
    AppHeader,
    Content
    ],
    data(){
      return{
@@ -26,7 +28,8 @@
      <el-container class="header-and-main">
        <AppHeader/>
        <el-main >
          <RouterView/>
          <Content></Content>
          <!-- <RouterView/> -->
        </el-main>
      </el-container>
    </el-container>
@@ -40,7 +43,7 @@
  height: 100vh;
  min-width: 1445px;
}
// åž‚直方向溢出区域禁止滚动
/* // åž‚直方向溢出区域禁止滚动 */
.el-main {
  background-color: #f4f4f5;
  padding: 0;

 src/main.js

@@ -8,7 +8,8 @@
import { ElMessage } from 'element-plus'
// å…¨å±€å¼•å…¥æ ·å¼
import 'element-plus/theme-chalk/src/index.scss'

import pinia from './stores/index';
import { useLoadingStore } from "@/stores/loadingStore";

const app = createApp(App)

@@ -24,15 +25,23 @@
    next()
  }
})


const loadingStore = useLoadingStore(pinia)
router.afterEach((to, from) => {
  loadingStore.clearLoading()
})


// æœ¬åœ°
// axios.defaults.baseURL = 'http://localhost:8081'
axios.defaults.baseURL = 'http://localhost:8081'
// éƒ¨ç½²
axios.defaults.baseURL = 'http://114.215.109.124:8803'
// axios.defaults.baseURL = 'http://114.215.109.124:8803'
app.config.globalProperties.$http = axios

app.use(ElMessage)
app.config.globalProperties.$message = ElMessage
app.use(router)

app.use(pinia)

app.mount('#app')

 src/router/index.js

@@ -45,7 +45,7 @@
            {
              path: "/avgDay",
              name: 'avgDay',
              meta: { title: '数据分险模型' },
              meta: { title: '数据分险模型' , keepAlive: true},
              component: () => import('@/views/line_graph/DataRiskModel.vue')
            },

@@ -53,14 +53,14 @@
            {
              path: "/analysis",
              name: 'analysis',
              meta: { title: '数据风险排名' },
              meta: { title: '数据风险排名' , keepAlive: true},
              component: () => import('@/views/line_graph/DataRiskRank.vue')
            },
            //  æ•°æ®é£Žé™©æŽ’名
            {
              path: "/riskrank",
              name: 'riskrank',
              meta: { title: '综合风险排名' },
              meta: { title: '综合风险排名' , keepAlive: true },
              component: () => import('@/views/line_graph/SiteComprehensiveRskRanking.vue')
            },
       
@@ -68,7 +68,7 @@
            {
              path: "/edata",
              name: 'edata',
              meta: { title: '飞行巡检' },
              meta: { title: '飞行巡检' , keepAlive: true},
              component: () => import('@/views/exception/FlightInspection.vue')
            },

@@ -76,7 +76,7 @@
            {
              path: "/testData",
              name: 'testData',
              meta: { title: '站点审核辅助' },
              meta: { title: '站点审核辅助' , keepAlive: true},
              component: () => import('@/views/exception/SiteAuditAssistance.vue')
            },
        
@@ -84,7 +84,7 @@
            {
              path: "/hdata",
              name: 'hdata',
              meta: { title: '历史数据管理' },
              meta: { title: '历史数据管理' , keepAlive: true},
              component: () => import('@/views/data_management/HistoryData.vue')
            },
            //  æ•°æ®æŽ¥å…¥ç®¡ç†
@@ -110,6 +110,24 @@
              meta: { title: '数据接入配置' },
              component: () => import('@/views/setting/SetConfiguration.vue')
            },

            
            //  æ•°æ®æŽ¥å…¥é…ç½®
            {
              path: "/detail/:siteName/:month",
              name: 'detail',
              meta: { title: '站点具体信息' },
              component: () => import('@/views/line_graph/components/SiteDetail.vue')
            },

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

          ],
    },

@@ -128,4 +146,5 @@
  ]
})


export default router

 src/sfc/InputSearch.vue

@@ -1,7 +1,6 @@
<!-- 
  è¿œç¨‹æœç´¢ ç«™ç‚¹åç§° è¾“入框组件
  æ ¹æ®è¾“入站点的内容提供对应的输入建议

  ** 
  åœ¨çˆ¶ç»„件中设置
  <InputSearch :isNeedDefaultSite="1" @submit-value="(n)=>form.name=n"> </InputSearch>
@@ -9,6 +8,9 @@
  çˆ¶ç»„件通过注入 :isNeedDefaultSite="1"或  :isNeedDefaultSite="0"来代表该输入框有无默认的站点名称
  1代表需要默认值 ï¼Œ0代表不需要默认值
 -->


 
<script>
import exceptionApi from '@/api/exceptionApi.js';
export default {

 src/sfc/MonthSelect.vue

@@ -17,6 +17,12 @@
import dayjs from 'dayjs';

  export default {
    props:{
      month:{
         type:String,
        default:''
      }
    },
    emits:['submitValue'],
    
    data() {
@@ -24,6 +30,13 @@
        value:''
      }
    },
    watch:{
      month(){
        if(this.month!=''){
          this.value = this.month
        }
      }
    },
    mounted() {
        this.pre_month()
    },

 src/sfc/TimeShortCuts.vue

@@ -107,7 +107,10 @@
        case 'currentMonth':
        this.time[0] = dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss')
        this.time[1] = dayjs().subtract(1,'day').format('YYYY-MM-DD 23:59:59')
        break  
        // é˜²æ­¢åœ¨æ¯æœˆçš„1号，出现time[0]>time[1]的情况
        if(this.time[0]<this.time[1]){
          break  
        }
        default:
          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');

 src/stores/index.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,5 @@
import { createPinia } from 'pinia';

const pinia = createPinia();

export default pinia;

 src/stores/loadingStore.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,23 @@
// åŠ è½½çŠ¶æ€çš„逻辑管理

import { defineStore } from 'pinia'

export const useLoadingStore = defineStore('loading', {
  state: () => {
    return {
      loadingStatus: []
    }
  },
  actions: {
    clearLoading() {
      this.loadingStatus.forEach(l => {
        if (typeof l === 'function') {
          l()
        }
      });
      if (this.loadingStatus.length > 0) {
        this.loadingStatus = []        
      }
    }
  }
})

 src/utils/risk_estimate_common_function/index.js

@@ -88,7 +88,7 @@
    // è¶…标临近
    let exceedingNearCount = 0;
    // è¶…标次数临界
    let exceedindCriticalDegree = 0;
    let exceedingCriticalDegree = 0;

    // ä¿å­˜å‡ºçŽ°çš„不同异常类型
    let exception = [];
@@ -102,7 +102,7 @@
      } else if (item.exceptionType == 5) {
        exceedingNearCount++;
      } else if (item.exceptionType == 6) {
        exceedindCriticalDegree++;
        exceedingCriticalDegree++;
      }

      // å¼‚常类型聚集度
@@ -121,28 +121,24 @@
      sum = sum + mutationCount - 1;
    }
    if (exceedingNearCount > 1) {
      sum = sum + exceedindCriticalDegree - 1;
      sum = sum + exceedingNearCount - 1;
    }
    if (exceedindCriticalDegree > 1) {
      sum = sum + exceedindCriticalDegree - 1;
    if (exceedingCriticalDegree > 1) {
      sum = sum + exceedingCriticalDegree - 1;
    }

    switch (sum) {
      case 0:
        exceptionTyprRecurRate = sum / 3;
    switch (true) {
      case (sum == 0 || sum == 1) :
        exceptionTyprRecurRate = (sum / 3).toFixed(2);
        break;
      case 1:
        exceptionTyprRecurRate = sum / 3;
        break;
      case 2:
      case sum >= 3:
      case (sum == 2|| sum >=3) :
        exceptionTyprRecurRate = 1;
        break;
      default:
        return 'error';
    }

    exceptionTypeAggregation = exception.length / 8;
    exceptionTypeAggregation = (exception.length / 8).toFixed(2);

    let obj = {};
    obj['exceptionRecurrence'] = exceptionTyprRecurRate;
@@ -221,7 +217,7 @@
  const table = []
  let i = 0
  anaData.forEach((res) =>{
      
      let siteName = res.name
      // ä»Žåˆ†æžæ•°æ®ä¸­å¾—到设备编号
      let mnCode = res.mnCode
      // æ‰¾åˆ°å¼‚常数据中mnCode等于value的对象

 src/views/data_management/DataAccessManagement.vue

@@ -1,12 +1,17 @@
<script>
import getHistoryApi from '@/api/py/getHistoryApi.js'
import { ElMessage } from 'element-plus'
import exceptionApi from '@/api/exceptionApi.js'
export default {
  data() {
    return {}
    return {
      async: '未完成....',
      normal: '未变化....'
    }
  },
  mounted() {
    
    // this.query()
    // this.getAnalysisData()
  },
  methods: {
    getData() {
@@ -16,6 +21,83 @@
      setTimeout(() => {
        ElMessage.success('数据获取中')
      }, 600)
    },
    // async query() {
    // await  exceptionApi.analysisdata('','2023-08-01','2023-10-01', 'day').then((response) => {
    //     const chartData = response.data.data
    //     this.async = '完成'
    //   })
    //   this.normal= '变化'
    // },
    //  query() {
    //   exceptionApi.analysisdata('','2023-08-01','2023-10-01', 'day').then((response) => {
    //     const chartData = response.data.data
    //     this.async = '完成'
    //   })
    //   this.normal= '变化'
    // },

    //    query() {
    //   exceptionApi.analysisdata('','2023-08-01','2023-10-01', 'day')
    //   .then((response) => {
    //     return response.data.data
    //   }).then((res)=>{
    //     a = exceptionApi.analysisdataByType('2023-09-01','month')

    //   })
    // },

    // getd1(){
    //   return exceptionApi.analysisdataByType('2023-09-01','month')
    // },
    // async query() {
    //  const  analysis =   await  exceptionApi.analysisdata('','2023-08-01','2023-10-01', 'day')
    //  console.log('分析数据为：',analysis);
    //  const exception = await exceptionApi.analysisdataByType('2023-09-01','month')
    //  console.log('异常数据为：',exception);
    // }
    getAnalysisData() {
      const analysis = exceptionApi.analysisdata(
        this.form.name,
        this.form.beginTime,
        this.form.endTime,
        'day'
      )
      const exception = exceptionApi.exceptiondata1({
        siteName: this.form.name,
        beginTime: this.form.beginTime,
        endTime: this.form.endTime
      })
      this.loading = true
      this.queryButton = true
      Promise.all([analysis, exception]).then((res) => {
        this.chartData = res[0].data.data
        let exceptionData = res[1].data.data
        // console.log('分析数据：',analysisData);
        // console.log('异常数据：',exceptionData);
        // å¾—到有效数据的起始时间
        this.begin = this.chartData[0].lst
        this.end = this.chartData[this.chartData.length - 1].lst
        // ç§»é™¤ç©ºæ•°æ®çŠ¶æ€
        this.isNoData = false
        // ç”ŸæˆæŠ˜çº¿å›¾æ•°æ®é…ç½®
        this.setChart()

        //  æ—¥ç»Ÿè®¡æ•°æ®
        let temp = index.calBillData(this.chartData, this.begin, this.end)
        // å¼‚常数据
        let obj = index.calRecur(exceptionData)

        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']

        this.bill.exceptionRecurrence = obj['exceptionRecurrence']
        this.bill.exceptionTypeAggregation = obj['exceptionTypeAggregation']
      })
    }
  }
}
@@ -39,12 +121,13 @@
  </el-descriptions>

  <el-button type="primary" @click="getData"> è‡ªåŠ¨èŽ·å– </el-button>
  <div>异步函数：{{ async }}</div>
  <div style="margin-bottom: 20px"></div>
  <div>后面： {{ normal }}</div>
</template>


<style scoped>
.el-descriptions,

.el-button {
  margin: 20px;
}

 src/views/exception/SiteAuditAssistance.vue

@@ -639,6 +639,8 @@
          break
        // è¶…æ ‡
        case '2':
        case '5':
        case '6':
          this.dialog.option = {
            title: {
            text: this.tableCurrentRowData.exception,
@@ -951,8 +953,6 @@
          }
          break
        case '4':
        case '5':
        case '6':
        case '7':
          this.dialog.option = {
            title: {

 src/views/line_graph/DataRiskModel.vue

@@ -1,23 +1,18 @@
<!-- æ—¥å‡å€¼ -->

<script>
// import DateSelectWithShortCuts from '@/sfc/DateSelectWithShortCuts.vue'
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 rank from '@/utils/risk_estimate_common_function/rank.js'
import MonthSelect from '@/sfc/MonthSelect.vue';
import MonthSelect from '@/sfc/MonthSelect.vue'
export default {
  components: {
    LineChart,
    // DateSelectWithShortCuts,
    InputSearch,
    AreaAndmonitorType,
    DustRadarChart,
@@ -28,13 +23,13 @@
    return {
      isNoData: false,
      loading: false,
      screenLoading:false,
      screenLoading: false,
      parentDataFlag:false,
      chartData: [],
      chartData1: {}, //保存查询的结果
      chartData2: {},
      chartData3: {},
      chartData4: {},
      //devId:'',          //设备编号
      begin: '', //开始时间
      end: '', //结束时间

@@ -43,13 +38,14 @@
        name: '',
        // è®¾å¤‡ç¼–号
        number: '',

        month:'',
        // å¼€å§‹æ—¶é—´
        beginTime: '',
        // ç»“束时间
        endTime: ''
      },
      month: '',
      // ä¼ é€’给月份组件的值
      sfc_month: '',
      // æŠ˜çº¿å›¾é…ç½®é¡¹
      option: {},
      // æ•°æ®æ¸…单
@@ -73,105 +69,128 @@
      queryButton: false,

      // é£Žé™©å€¼æŽ’名前十的站点
      top_10_sites_with_risk_values:[
        {name:'金山区金山新城JSC1-0401单元1-11-01地块项目09',
        riskValue:0.2
      }
    ]
      top_10_sites_with_risk_values: [{ name: '', riskValue: 0.2 }],
      // é£Žé™©å€¼
      weight: ''
    }
  },
  
  watch:{

  },
  computed: {
    weight() {
      let singleOnline = ((100 - this.bill.online) / 100) * 0.1
      let singleValid = ((100 - this.bill.valid) / 100) * 0.2
      let singleExceeding = (this.bill.exceeding / 100) * 0.2
      let singleAggregation = this.bill.exceptionTypeAggregation * 0.2
      let singleRecurrence = this.bill.exceptionRecurrence * 0.3
      let allWeight = (
        singleOnline +
        singleValid +
        singleExceeding +
        singleAggregation +
        singleRecurrence
      ).toFixed(2)

      return allWeight
  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.getRiskWeightName()
    
    this.fetch()
    // è®¡ç®—风险排名清单
    this.getRiskRank()
    // // åŠ è½½é£Žé™©å€¼æœ€é«˜çš„站点数据
    this.ShowDefaultData()
  },

  methods: {

    // æŸ¥è¯¢ç«™ç‚¹ç»Ÿè®¡ä¿¡æ¯
    querySiteStaticsInfo(row){
    querySiteStaticsInfo(row) {
      this.form.name = row.siteName
      this.riskDetails()
      // æ›´æ–°ç»Ÿè®¡æ•°æ®
      this.getAnalysisData()
      // è®¡ç®—风险值
      this.calRiskValue()
    },

    async getRiskWeightName() {
      this.screenLoading = true
        this.form.name = await rank.fetchData(this.form.beginTime, this.form.endTime);

        // åŠ è½½è¯¥é£Žé™©æ¸…单
        this.fetch()
        this.screenLoading = false
    },

    giveMonth(val){
    // æ ¼å¼åŒ–月份
    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);

     },
      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：
     */
    giveTime(val) {
      //将中国标准时间转为指定格式(该组件返回的标准时间的格式，所以必须的加这个函数)
      this.form.beginTime = dayjs(val[0]).format('YYYY-MM-DD')
      this.form.endTime = dayjs(val[1]).format('YYYY-MM-DD')
    },
    /**
     * åˆå§‹åŠ è½½å‡½æ•°
     * @param：
     * @returns：
     */
    fetch() {
      // è®¡ç®—风险排名清单,获取风险最高的站点名字
    riskAssessment() {
      // æ›´æ–°æŽ’名清单
      this.getRiskRank()

      // åˆ†æžæ•°æ®
      this.fetchData()
      // å¼‚常数据
      this.exceptiondataCount()

      
    },
    riskDetails() {
      // åˆ†æžæ•°æ®
      this.fetchData()
      // å¼‚常数据
      this.exceptiondataCount()
      // æ›´æ–°åˆ†æžæ•°æ®
      this.getAnalysisData()
      // è®¡ç®—风险值
      this.calRiskValue()
    },

    // ç‚¹å‡»å±•ç¤ºæŒ‰é’®
    fetchData() {
    // æ›´æ–°åˆ†æžæ•°æ®
    getAnalysisData() {
      // æ—¥ç»Ÿè®¡æ•°æ®
      this.fetchDayAnalysisData()
      // å¼‚常数据
      this.fetchExceptionAnalysisData()
    },

    findObjectByPropertyValue(array, property, value) {
      return array.find((obj) => obj[property] === value)
    },

    // æ­¤é¡µé¢æ‰“开时
    ShowDefaultData() {
      // é»˜è®¤åŠ è½½å±•ç¤ºçš„内容
      this.updateOriginPage()
    },

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

    // è®¡ç®—风险值
    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
          })
      })
    },

    //  æ ¹æ®ç›®å‰ç«™ç‚¹ï¼Œæœˆä»½ï¼ŒæŸ¥æŠ˜çº¿å›¾æ—¥ç»Ÿè®¡æ•°æ®
    fetchDayAnalysisData() {
      let params = {}
      if (this.form.name) {
        params['siteName'] = this.form.name
@@ -185,7 +204,7 @@
      this.loading = true
      this.queryButton = true
      exceptionApi
        .analysisdata(this.form.name, this.form.beginTime, this.form.endTime,'day')
        .analysisdata(this.form.name, this.form.beginTime, this.form.endTime, 'day')
        .then((response) => {
          this.chartData = response.data.data
          this.loading = false
@@ -194,11 +213,14 @@
            this.isNoData = true
            return
          }
          this.begin = this.chartData[0].lst
          this.end = this.chartData[this.chartData.length - 1].lst

          // ç§»é™¤ç©ºæ•°æ®çŠ¶æ€
          this.isNoData = false
          this.setChart()

          let temp = index.calBillData(this.chartData, this.form.beginTime, this.form.endTime)
          //  æŠ˜çº¿å›¾æ•°æ®
          let temp = index.calBillData(this.chartData, this.begin, this.end)
          this.bill.min = temp['min']
          this.bill.max = temp['max']

@@ -206,12 +228,23 @@
          this.bill.online = temp['online']
          this.bill.valid = temp['valid']
          this.bill.exceeding = temp['exceeding']

          this.begin = this.chartData[0].lst
          this.end = this.chartData[this.chartData.length - 1].lst
        })
    },

    // ä¼ä¸šå¼‚常统计数据
    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) {
@@ -251,70 +284,46 @@
      }
    },

    // ä¼ä¸šå¼‚常详情
    exceptiondataCount() {
      exceptionApi
        .exceptiondata1({
          siteName: this.form.name,
          beginTime: this.form.beginTime,
          endTime: this.form.endTime
    // å¾—到前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')
        })
        .then((res) => {
          let obj = index.calRecur(res.data.data)
          this.bill.exceptionRecurrence = obj['exceptionRecurrence']
          this.bill.exceptionTypeAggregation = obj['exceptionTypeAggregation']
        })
        // Promise
        return this.top_10_sites_with_risk_values[0].siteName
      }
    },

    // ç‚¹å‡»é£Žé™©æŽ’名按钮
    getRiskRank() {
      exceptionApi
        .analysisdataByType(this.form.month, 'month')
        .then((response) => {
          let staticsData = response.data.data

          exceptionApi
            .exceptiondata1({
              siteName: this.form.name,
              beginTime: this.form.beginTime,
              endTime: this.form.endTime
            })
            .then((res) => {
              const riskValueSite = index.merge(
                staticsData,
                res.data.data,
                this.form.beginTime,
                this.form.endTime
              )
              // èŽ·å–排名前10的风险值站点
              
              this.top_10_sites_with_risk_values = this.getTopriskData(riskValueSite,10)
              this.form.name = this.top_10_sites_with_risk_values[0].siteName
              
              this.$nextTick(()=>{
              this.$refs.table.sort('riskValue','descending')
              console.log('表格数据为：',this.top_10_sites_with_risk_values);
            })

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

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


<template>
  <el-form :inline="true" :model="form">
@@ -322,197 +331,195 @@
      <AreaAndmonitorType></AreaAndmonitorType>
    </el-form-item>
    <el-form-item class="form-item">
      <!-- <InputSearch isNeedDefaultSite="1" @submit-value="(n) => (form.name = n)" :siteName="form.name"></InputSearch> -->
      <InputSearch :site-name="form.name" isNeedDefaultSite="1" @submit-value="(n) => (form.name = n)" ></InputSearch>
      <InputSearch
        :site-name="form.name"
        isNeedDefaultSite="0"
        @submit-value="(n) => (form.name = n)"
      ></InputSearch>
    </el-form-item>

    <!-- <el-form-item>
      <DateSelectWithShortCuts @submit-time="giveTime"></DateSelectWithShortCuts>
    </el-form-item> -->


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

    
    <el-form-item>
      <ButtonClick
        content="风险评估"
        type="primary"
        :loading="queryButton"
        @do-search="fetch"
        @do-search="riskAssessment"
      ></ButtonClick>
    </el-form-item>
  </el-form>
  <div v-loading="screenLoading" class="wait-name">  
  <div class="chart-container" v-show="!isNoData && !screenLoading " >
    <div class="time-text">数据统计时段：{{ begin }} ~ {{ end }}</div>

    <el-row :gutter="10">
      <el-col :span="5">
        <div 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
              show-overflow-tooltip
            />
            <el-table-column
              prop="siteName"
              label="站点名称"
              show-overflow-tooltip
            />
            <el-table-column
              prop="riskValue"
              label="风险值"
              sortable
              width="70"
              show-overflow-tooltip
            />
            <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>
  <div v-loading="screenLoading" class="wait-name">
    <div class="chart-container" v-show="!isNoData && !screenLoading">
      <div class="time-text">
        <span>数据统计时段：{{ begin }} ~ {{ end }}</span>
        <span class="site-name">{{ form.name }}</span>
      </div>
      
      </el-col>


      <el-col :span="12">
        <el-card shadow="never">
          <DustRadarChart
            :name="[
              '数据有效风险',
              '典型异常复现风险',
              '异常类型聚集风险',
              '数据超标风险',
              '数据在线风险'
            ]"
            :yData="[
              bill.valid,
              bill.exceptionRecurrence,
              bill.exceptionTypeAggregation,
              bill.exceeding,
              bill.online
            ]"
          ></DustRadarChart>
        </el-card>
      </el-col>

      <el-col :span="3">
        <el-card shadow="never" class="card-height">
          <template #header>
            <h1
              :class="{
                'weightColor-low': weight < 0.2,
                'weightColor-medium': weight >= 0.2 && weight < 0.6,
                'weightColor-heigh': weight >= 0.6
              }"
      <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"
            >
              é£Žé™©å€¼(0~1)：{{ weight }}
            </h1>
          </template>
          <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>
          </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>
          </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>
        </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="日均值">
          </LineChart>
        </el-card>
      </el-col>
      
      <el-col :span="12"> 
        <el-card shadow="never" class="card-value">
          <LineChart title="日在线率" :chartData="chartData2" yName="%" seriesName="日在线率">
          </LineChart>
        </el-card>
              <el-table-column
                type="index"
                label="序号"
                :index="indexMethod"
                fixed
                width="25"
                show-overflow-tooltip
              />
              <el-table-column prop="siteName" label="站点名称" show-overflow-tooltip />
              <el-table-column
                prop="riskValue"
                label="风险值"
                sortable
                width="67"
                show-overflow-tooltip
              />
              <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">
            <DustRadarChart
              :name="[
                '数据有效风险',
                '典型异常复现风险',
                '异常类型聚集风险',
                '数据超标风险',
                '数据在线风险'
              ]"
              :yData="[
                bill.valid,
                bill.exceptionRecurrence,
                bill.exceptionTypeAggregation,
                bill.exceeding,
                bill.online
              ]"
            ></DustRadarChart>
          </el-card>
        </el-col>

        <el-col :span="3">
          <el-card shadow="never" class="card-height">
            <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-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>
            </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>
            </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>
          </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="日有效率">
          </LineChart>
        </el-card>
      </el-col>
        <el-col :span="4">
          <el-card shadow="never" class="card-height">
            <template #header><span class="title-16">风险详情</span></template>

      <el-col :span="12">
        <el-card shadow="never" class="card-value">
          <LineChart title="日超标率" :chartData="chartData4" yName="%" seriesName="日超标率">
          </LineChart>
        </el-card>
      </el-col>
    </el-row>
            <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="日均值">
            </LineChart>
          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card shadow="never" class="card-value">
            <LineChart title="日在线率" :chartData="chartData2" yName="%" seriesName="日在线率">
            </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="日有效率">
            </LineChart>
          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card shadow="never" class="card-value">
            <LineChart title="日超标率" :chartData="chartData4" yName="%" seriesName="日超标率">
            </LineChart>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</div>
  <el-empty description="暂无数据" v-show="isNoData " :image-size="200" />
  <el-empty description="暂无数据" v-show="isNoData" :image-size="200" />
</template>

<style scoped>
@@ -520,13 +527,15 @@
  margin: 10px;
}
.form-item {
  margin-top:10px;
  margin-top: 10px;
}
.chart-container {
  margin-left: 10px;
}
.time-text {
  letter-spacing: 2px;
  font-size: 14px;
  color: #333333;
  letter-spacing: 1px;
}
.el-card {
  margin-top: 15px;
@@ -604,15 +613,21 @@
  color: red;
}
/* .wait-name {
  width: 500px;
  height: 600px;
} */
    width: 500px;
    height: 600px;
  } */
.table-class {
  border: 1px solid blue;
  margin: 20px 0px 20px 0px;
  /* border: 1px solid blue; */
  /* margin: 20px 0px 20px 0px; */
  height: 540px;
}

.table-button {
  letter-spacing: 1px;
  text-decoration: underline;
  border-radius: 0px;
}
.site-name {
  margin-left: 20px;
}
</style>

 src/views/line_graph/DataRiskRank.vue

@@ -132,6 +132,9 @@
      this.form.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss');
    },



    
    // ç‚¹å‡»ç»Ÿè®¡æŒ‰é’®
    fetchData() {
      let params = {};
@@ -185,7 +188,7 @@
          </el-form-item>
          
          <el-form-item>
            <ButtonClick style="margin-right: 12px;" content="风险排名" type="primary" :loading="queryButton" @do-search="fetchData" ></ButtonClick>
            <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>

 src/views/line_graph/RiskTest.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,633 @@
<!-- æ—¥å‡å€¼ -->

<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'
  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: '',
          // å¼€å§‹æ—¶é—´
          beginTime: '',
          // ç»“束时间
          endTime: ''
        },
        month: '',
        // ä¼ é€’给月份组件的值
        sfc_month: '',
        // æŠ˜çº¿å›¾é…ç½®é¡¹
        option: {},
        // æ•°æ®æ¸…单
        bill: {
          min: '',
          max: '',
          avg: '',
          online: 100,
          valid: 100,
          exceeding: 0,
  
          //  å…¸åž‹å¼‚常复现率
          exceptionRecurrence: 0,
          // å¼‚常类型据聚集度
          exceptionTypeAggregation: 0
        },
        status: {
          isHasData: false
        },
        // æŸ¥è¯¢æŒ‰é’®åŠ è½½æ•ˆæžœ
        queryButton: false,
  
        // é£Žé™©å€¼æŽ’名前十的站点
        top_10_sites_with_risk_values: [{ name: '', riskValue: 0.2 }],
        // é£Žé™©å€¼
        weight: ''
      }
    },
  
    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()
    },
  
    methods: {
      // æŸ¥è¯¢ç«™ç‚¹ç»Ÿè®¡ä¿¡æ¯
      querySiteStaticsInfo(row) {
        this.form.name = row.siteName
        // æ›´æ–°ç»Ÿè®¡æ•°æ®
        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.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
        // æ›´æ–°æŽ’名清单，并得到风险值最高站点
        this.form.name = await this.getRiskRank()
        this.screenLoading = false
        // æ›´æ–°æ—¥ç»Ÿè®¡æ•°æ®
        this.getAnalysisData()
        // è®¡ç®—风险值
        this.calRiskValue()
      },
  
      // è®¡ç®—风险值
      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
            })
        })
      },
  
      //  æ ¹æ®ç›®å‰ç«™ç‚¹ï¼Œæœˆä»½ï¼ŒæŸ¥æŠ˜çº¿å›¾æ—¥ç»Ÿè®¡æ•°æ®
      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
            }
            this.begin = this.chartData[0].lst
            this.end = this.chartData[this.chartData.length - 1].lst
  
            // ç§»é™¤ç©ºæ•°æ®çŠ¶æ€
            this.isNoData = false
            this.setChart()
            //  æŠ˜çº¿å›¾æ•°æ®
            let temp = index.calBillData(this.chartData, this.begin, this.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轴日期时间
          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))
          })
  
          this.chartData1 = {
            x: dateList,
            y: dayAvg
          }
          this.chartData2 = {
            x: dateList,
            y: dataOnline
          }
          this.chartData3 = {
            x: dateList,
            y: dataValid
          }
          this.chartData4 = {
            x: dateList,
            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)
      }
    }
  }
  </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)"
        ></InputSearch>
      </el-form-item>
  
  
  
      <el-form-item>
        <MonthSelect :month="this.month_1" @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>
  
    <div v-loading="screenLoading" class="wait-name">
      <div class="chart-container" v-show="!isNoData && !screenLoading">
        <div class="time-text">
          <span>数据统计时段：{{ begin }} ~ {{ end }}</span>
          <span class="site-name">{{ form.name }}</span>
        </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="25"
                  show-overflow-tooltip
                />
                <el-table-column prop="siteName" label="站点名称" show-overflow-tooltip />
                <el-table-column
                  prop="riskValue"
                  label="风险值"
                  sortable
                  width="67"
                  show-overflow-tooltip
                />
                <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">
              <DustRadarChart
                :name="[
                  '数据有效风险',
                  '典型异常复现风险',
                  '异常类型聚集风险',
                  '数据超标风险',
                  '数据在线风险'
                ]"
                :yData="[
                  bill.valid,
                  bill.exceptionRecurrence,
                  bill.exceptionTypeAggregation,
                  bill.exceeding,
                  bill.online
                ]"
              ></DustRadarChart>
            </el-card>
          </el-col>
  
          <el-col :span="3">
            <el-card shadow="never" class="card-height">
              <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-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>
              </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>
              </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>
            </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="日均值">
              </LineChart>
            </el-card>
          </el-col>
  
          <el-col :span="12">
            <el-card shadow="never" class="card-value">
              <LineChart title="日在线率" :chartData="chartData2" yName="%" seriesName="日在线率">
              </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="日有效率">
              </LineChart>
            </el-card>
          </el-col>
  
          <el-col :span="12">
            <el-card shadow="never" class="card-value">
              <LineChart title="日超标率" :chartData="chartData4" yName="%" seriesName="日超标率">
              </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 {
    letter-spacing: 2px;
  }
  .el-card {
    margin-top: 15px;
    border-radius: 9px;
  }
  .chart-container {
    width: 98%;
    /* height: 600px; */
  }
  .card-value {
    /* min-width:900px; */
    /* padding:0px */
  }
  .card-height {
    height: 540px;
  }
  .el-header {
    background-color: #010408;
    color: #333;
    line-height: 60px;
  }
  .risk-advice {
    margin: 40px 0px;
  }
  .container {
    display: flex;
    margin-bottom: 10px;
  }
  .grade-instance {
    margin-top: 80px;
  }
  .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;
  }
  .weightColor-medium {
    color: #dabe09;
  }
  .weightColor-heigh {
    color: red;
  }
  .risk-grade {
    display: flex;
    margin-top: 10px;
  }
  :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: 540px;
  }
  
  .table-button {
    letter-spacing: 1px;
    text-decoration: underline;
    border-radius: 0px;
  }
  .site-name {
    margin-left: 120px;
  }
  </style>
  

 src/views/line_graph/SiteComprehensiveRskRanking.vue

@@ -8,14 +8,17 @@
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';
export default {
  components: {
    AreaAndmonitorType,
    ButtonExportExcel,
    ButtonClick,
    MonthSelect
    MonthSelect,
    SiteDetail,
  },

  data() {
    return {
      //   è¡¨æ ¼æ•°æ®
@@ -54,13 +57,17 @@
      // è¡¨æ ¼æ•°æ®
      table: [],
      // è¡¨æ ¼é«˜åº¦
      tableHeight: 600
      tableHeight: 600,
      currentRow:[]
    }
  },
  setup() {
    // å¼•å…¥ ç™¾åˆ†å·æ¯”较大小 å¯¼å‡ºåŠŸèƒ½
    const { exportToExcel } = useCommonFunction()
    return { exportToExcel }
  },
    computed: {
    ...mapStores(useLoadingStore),
  },
  mounted(){
    // 
@@ -119,7 +126,7 @@

          exceptionApi
            .exceptiondata1({
              siteName: this.form.name,
              siteName: '',
              beginTime: this.form.beginTime,
              endTime: this.form.endTime
            })
@@ -143,22 +150,6 @@
            
        })
    },

    // ä¼ä¸šå¼‚常详情
    // exceptiondataCount() {
    //   exceptionApi
    //     .exceptiondata1({
    //       // siteName: this.form.name,
    //       siteName: '',
    //       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']
    //     })
    // },

    /**
     * åˆå§‹åŠ è½½å‡½æ•°
@@ -202,6 +193,9 @@
      } else {
        ElMessage('无数据需要导出')
      }
    },
    openDetail(row){
      this.$router.push(`/detail/${row.siteName}/${this.form.month}`)
    }
  }
}
@@ -215,12 +209,8 @@
          <AreaAndmonitorType></AreaAndmonitorType>
        </el-form-item>

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

        <el-form-item>
          <MonthSelect @submit-value="giveMonth"></MonthSelect>
          <MonthSelect  @submit-value="giveMonth"></MonthSelect>
        </el-form-item>

        <el-form-item>
@@ -247,6 +237,7 @@
    :data="table"
    :height="tableHeight"
    v-loading="loading"
    element-loading-text="后台分析中..."
    style="width: 98%"
    :cell-class-name="tableCellClassName"
    :default-sort="{ prop: 'riskValue', order: 'descending' }"
@@ -263,7 +254,13 @@
      width="55"
      show-overflow-tooltip
    />
    <el-table-column prop="siteName" label="站点名称" align="center" 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="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
@@ -294,6 +291,9 @@
    />
  </el-table>
  <el-empty v-show="isNoData" :image-size="200" />



</template>

<style scoped>
@@ -306,5 +306,10 @@
  background-color: red;
  /* color: rgb(241, 236, 236); */
}
.table-button {
  letter-spacing: 1px;
  text-decoration: underline;
  border-radius: 0px;
}

</style>

 src/views/line_graph/components/SiteDetail.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,50 @@
<!--点击站点 è·³è½¬è‡³é£Žé™©æ¨¡åž‹é¡µé¢  -->
<script>
import subRiskModel from '@/views/line_graph/components/subRiskModel.vue'
export default {
  components: {
    subRiskModel
  },
  data() {
    return {
      siteName: '',
      month: ''
    }
  },
  watch: {},
  mounted() {},
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      // é€šè¿‡ `vm` è®¿é—®ç»„件实例
      vm.siteName = to.params.siteName
      vm.month = to.params.month
    })
  },
  methods: {
    // å›žé€€é¡µé¢
    onBack() {
      this.$router.back()
    }
  }
}
</script>

<template>
  <el-page-header @back="onBack">
    <template #content>
      <span> ç«™ç‚¹é£Žé™©æ•°æ®è¯¦æƒ… </span>
    </template>
  </el-page-header>

  <subRiskModel :sName="siteName" :month_1="month"> </subRiskModel>
</template>

<style scoped>
.el-page-header {
  margin: 10px 0px 10px 10px;
}
span {
  font-size: 14px;
  color: #333333;
}
</style>

 src/views/line_graph/components/subRiskModel.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,663 @@
<!-- é£Žé™©æ¨¡åž‹çš„页面  
区别：
1.接受父组件传参
2.无初始加载数据（无mounted）
-->

<script>
  import InputSearch from '@/sfc/InputSearch.vue'
  import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'
  import DustRadarChart from '@/views/line_graph/components/DustRadarChart.vue'
  import exceptionApi from '@/api/exceptionApi.js'
  import LineChart from '@/views/line_graph/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,
      // DateSelectWithShortCuts,
      InputSearch,
      AreaAndmonitorType,
      DustRadarChart,
      ButtonClick,
      MonthSelect
    },
    data() {
      return {
        isNoData: false,
        loading: false,
        screenLoading: false,
        parentDataFlag:false,
        chartData: [],
        chartData1: {}, //保存查询的结果
        chartData2: {},
        chartData3: {},
        chartData4: {},
        //devId:'',          //设备编号
        begin: '', //开始时间
        end: '', //结束时间
  
        form: {
          // ç«™ç‚¹åç§°
          name: '',
          // è®¾å¤‡ç¼–号
          number: '',
  
          // month:'',
          // å¼€å§‹æ—¶é—´
          beginTime: '',
          // ç»“束时间
          endTime: ''
        },
        month: '',
        // ä¼ é€’给月份组件的值
        sfc_month: '',
        // æŠ˜çº¿å›¾é…ç½®é¡¹
        option: {},
        // æ•°æ®æ¸…单
        bill: {
          min: '',
          max: '',
          avg: '',
          online: 100,
          valid: 100,
          exceeding: 0,
  
          //  å…¸åž‹å¼‚常复现率
          exceptionRecurrence: 0,
          // å¼‚常类型据聚集度
          exceptionTypeAggregation: 0
        },
        status: {
          isHasData: false
        },
        // æŸ¥è¯¢æŒ‰é’®åŠ è½½æ•ˆæžœ
        queryButton: false,
  
        // é£Žé™©å€¼æŽ’名前十的站点
        top_10_sites_with_risk_values: [{ name: '', riskValue: 0.2 }],
        // é£Žé™©å€¼
        weight: ''
      }
    },
  
    watch: {
      sName() {
        // å½“别的页面调用时
        if (this.sName != ''|| this.month_1 != '') {
          // æ›´æ–°ç«™ç‚¹åå­—和时间
          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()
          // è®¡ç®—风险值
          this.calRiskValue()
          
          
        } 
      }
    },
  
    mounted() {

    },
  
    methods: {
      // æŸ¥è¯¢ç«™ç‚¹ç»Ÿè®¡ä¿¡æ¯
      querySiteStaticsInfo(row) {
        this.form.name = row.siteName
        // æ›´æ–°ç»Ÿè®¡æ•°æ®
        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')
        console.log(this.form.beginTime, this.form.endTime)
      },
  
      /**
       * é£Žé™©è¯„估按钮
       * @param：
       * @returns：
       */
      riskAssessment() {
        // æ›´æ–°æŽ’名清单
        this.getRiskRank()
        // æ›´æ–°åˆ†æžæ•°æ®
        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.form.name = await this.getRiskRank()
        
        // æ›´æ–°æ—¥ç»Ÿè®¡æ•°æ®
        this.getAnalysisData()
        // è®¡ç®—风险值
        this.calRiskValue()
      },
  
      // è®¡ç®—风险值
      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
            })
        })
      },
  
      //  æ ¹æ®ç›®å‰ç«™ç‚¹ï¼Œæœˆä»½ï¼ŒæŸ¥æŠ˜çº¿å›¾æ—¥ç»Ÿè®¡æ•°æ®
      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
            }
            this.begin = this.chartData[0].lst
            this.end = this.chartData[this.chartData.length - 1].lst
  
            // ç§»é™¤ç©ºæ•°æ®çŠ¶æ€
            this.isNoData = false
            this.setChart()
            //  æŠ˜çº¿å›¾æ•°æ®
            let temp = index.calBillData(this.chartData, this.begin, this.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轴日期时间
          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))
          })
  
          this.chartData1 = {
            x: dateList,
            y: dayAvg
          }
          this.chartData2 = {
            x: dateList,
            y: dataOnline
          }
          this.chartData3 = {
            x: dateList,
            y: dataValid
          }
          this.chartData4 = {
            x: dateList,
            y: dataExceed
          }
        }
      },
  
      // å¾—到前10风险排名清单
      async getRiskRank() {
        this.screenLoading = true
        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')
          })
          this.screenLoading = false
          // Promise
          return this.top_10_sites_with_risk_values[0].siteName
        }
        this.screenLoading = false
      },
  
      /**
       * é™åºæŽ’列，返回降序前num的元素
       * @param： å¯¹è±¡æ•°ç»„，返回的数量
       */
      getTopRiskData(arr, num) {
        // æŒ‰ç…§riskValue降序排列
        arr.sort((a, b) => b.riskValue - a.riskValue)
        // èŽ·å–前num个元素
        return arr.slice(0, num)
      }
    }
  }
  </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 isNeedDefaultSite="1" @submit-value="(n) => (form.name = n)" :siteName="form.name"></InputSearch> -->
        <InputSearch
          :site-name="form.name"
          isNeedDefaultSite="0"
          @submit-value="(n) => (form.name = n)"
        ></InputSearch>
      </el-form-item>
  
      <!-- <el-form-item>
          <DateSelectWithShortCuts @submit-time="giveTime"></DateSelectWithShortCuts>
        </el-form-item> -->
  
      <el-form-item>
        <MonthSelect :month="this.month_1" @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>
  
    <div v-loading="screenLoading" class="wait-name">
      <div class="chart-container" v-show="!isNoData && !screenLoading">
        <div class="time-text">
          <span>数据统计时段：{{ begin }} ~ {{ end }}</span>
          <span class="site-name">{{ form.name }}</span>
        </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="25"
                  show-overflow-tooltip
                />
                <el-table-column prop="siteName" label="站点名称" show-overflow-tooltip />
                <el-table-column
                  prop="riskValue"
                  label="风险值"
                  sortable
                  width="67"
                  show-overflow-tooltip
                />
                <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">
              <DustRadarChart
                :name="[
                  '数据有效风险',
                  '典型异常复现风险',
                  '异常类型聚集风险',
                  '数据超标风险',
                  '数据在线风险'
                ]"
                :yData="[
                  bill.valid,
                  bill.exceptionRecurrence,
                  bill.exceptionTypeAggregation,
                  bill.exceeding,
                  bill.online
                ]"
              ></DustRadarChart>
            </el-card>
          </el-col>
  
          <el-col :span="3">
            <el-card shadow="never" class="card-height">
              <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-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>
              </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>
              </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>
            </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="日均值">
              </LineChart>
            </el-card>
          </el-col>
  
          <el-col :span="12">
            <el-card shadow="never" class="card-value">
              <LineChart title="日在线率" :chartData="chartData2" yName="%" seriesName="日在线率">
              </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="日有效率">
              </LineChart>
            </el-card>
          </el-col>
  
          <el-col :span="12">
            <el-card shadow="never" class="card-value">
              <LineChart title="日超标率" :chartData="chartData4" yName="%" seriesName="日超标率">
              </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 {
    letter-spacing: 2px;
  }
  .el-card {
    margin-top: 15px;
    border-radius: 9px;
  }
  .chart-container {
    width: 98%;
    /* height: 600px; */
  }
  .card-value {
    /* min-width:900px; */
    /* padding:0px */
  }
  .card-height {
    height: 540px;
  }
  .el-header {
    background-color: #010408;
    color: #333;
    line-height: 60px;
  }
  .risk-advice {
    margin: 40px 0px;
  }
  .container {
    display: flex;
    margin-bottom: 10px;
  }
  .grade-instance {
    margin-top: 80px;
  }
  .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;
  }
  .weightColor-medium {
    color: #dabe09;
  }
  .weightColor-heigh {
    color: red;
  }
  .risk-grade {
    display: flex;
    margin-top: 10px;
  }
  :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: 540px;
  }
  
  .table-button {
    letter-spacing: 1px;
    text-decoration: underline;
    border-radius: 0px;
  }
  .site-name {
    margin-left: 120px;
  }
  </style>
  

 src/views/setting/SetConfiguration.vue

@@ -59,76 +59,7 @@
        }
      })
    },
  //   get(){
 
  //     exceptionApi.analysisdata('金山区金山新城JSC1-0401单元1-11-01地块项目09','2023-07-01 00:00:00','2023-07-03 00:00:00').then((res)=>{
  //       this.a = res.data.data
  //       // console.log('数据为：',res.data.data);
  //       return res.data.data
  //     }).then(result =>{
  //       console.log('链：',result);
  //       exceptionApi.analysisdata('上海国林建材有限公司','2023-07-01 00:00:00','2023-07-03 00:00:00')
  //     }
  //     )
  //   },

  //  async getAll(){
  //    const a = await this.$http
  //       .get('/dust/sitenamecode', {
  //         params: {
  //           exceptionType: '0',
  //           beginTime: this.beginTime,
  //           endTime: this.endTime
  //         }
  //       }).then((result) => {
  //         this.exception.exception0 = result.data.data
  //       })
        
  //       const b = await this.$http
  //       .get('/dust/sitenamecode', {
  //         params: {
  //           exceptionType: '1',
  //           beginTime: this.beginTime,
  //           endTime: this.endTime
  //         }
  //       }).then((result) => {
  //         this.exception.exception1 = result.data.data
  //       })
       
        
  //       const c = await this.$http
  //       .get('/dust/sitenamecode', {
  //         params: {
  //           exceptionType: '2',
  //           beginTime: this.beginTime,
  //           endTime: this.endTime
  //         }
  //       }).then((result) => {
  //         this.exception.exception2 = result.data.data
  //       })
  //       const d = await this.$http
  //       .get('/dust/sitenamecode', {
  //         params: {
  //           exceptionType: '3',
  //           beginTime: this.beginTime,
  //           endTime: this.endTime
  //         }
  //       }).then((result) => {
  //         this.exception.exception3 = result.data.data
  //       })
        
  //      console.log('外1：',this.exception.exception0);
  //      console.log('外2：',this.exception.exception1);
  //      console.log('外3：',this.exception.exception2);
  //      console.log('外4：',this.exception.exception3);
  //       // Promise.all([a,b,c,d,e,f,g,h]).then((responses)=>{
  //       //   console.log('全部数据为：');
  //       //   for (const response of responses) {
  //       //     console.log('数据：',response.data.data);

  //       // }
  //       // })
  //   }
  
  }
}
</script>