From fd934f83afae1e3fce46db8610837d0e0f4d9393 Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期四, 02 十一月 2023 10:44:56 +0800
Subject: [PATCH] 按开发清单已修改

---
 src/views/line_graph/RiskTest.vue                    |  633 +++++++++++++++
 src/stores/index.js                                  |    5 
 src/views/line_graph/SiteComprehensiveRskRanking.vue |   57 
 src/stores/loadingStore.js                           |   23 
 src/utils/risk_estimate_common_function/index.js     |   26 
 src/views/line_graph/DataRiskModel.vue               |  667 ++++++++-------
 src/views/setting/SetConfiguration.vue               |   71 -
 src/sfc/TimeShortCuts.vue                            |    5 
 src/router/index.js                                  |   31 
 src/views/exception/SiteAuditAssistance.vue          |    4 
 src/components/core/Content.vue                      |   22 
 src/views/line_graph/components/SiteDetail.vue       |   50 +
 src/api/index.js                                     |    4 
 src/main.js                                          |   17 
 src/sfc/MonthSelect.vue                              |   13 
 src/views/line_graph/components/subRiskModel.vue     |  663 ++++++++++++++++
 src/views/line_graph/DataRiskRank.vue                |    5 
 src/components/layout/AppAside.vue                   |   33 
 src/views/data_management/DataAccessManagement.vue   |   91 ++
 src/components/layout/AppLayout.vue                  |    9 
 src/sfc/InputSearch.vue                              |    4 
 21 files changed, 1,955 insertions(+), 478 deletions(-)

diff --git a/src/api/index.js b/src/api/index.js
index 4b67d52..f6fa644 100644
--- a/src/api/index.js
+++ b/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({
diff --git a/src/components/core/Content.vue b/src/components/core/Content.vue
new file mode 100644
index 0000000..d8dc3c1
--- /dev/null
+++ b/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>
+  
\ No newline at end of file
diff --git a/src/components/layout/AppAside.vue b/src/components/layout/AppAside.vue
index af923ae..0f4b731 100644
--- a/src/components/layout/AppAside.vue
+++ b/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 {
-      //鎶樺彔鏃堕殣钘廻1鏂囧瓧
+      /* //鎶樺彔鏃堕殣钘廻1鏂囧瓧 */
       display: none;
     }
     & span {
@@ -255,6 +254,6 @@
   right: 0;
   height: 1px;
   background-color: rgb(221, 217, 217,0.2);
-  // width: 180px;
+  /* // width: 180px; */
 }
 </style>
diff --git a/src/components/layout/AppLayout.vue b/src/components/layout/AppLayout.vue
index c0fe266..1f58393 100644
--- a/src/components/layout/AppLayout.vue
+++ b/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;
diff --git a/src/main.js b/src/main.js
index 92e15e6..d8d9357 100644
--- a/src/main.js
+++ b/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')
diff --git a/src/router/index.js b/src/router/index.js
index f02ad6f..7e37fcc 100644
--- a/src/router/index.js
+++ b/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
diff --git a/src/sfc/InputSearch.vue b/src/sfc/InputSearch.vue
index 28757d2..2db8a64 100644
--- a/src/sfc/InputSearch.vue
+++ b/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 {
diff --git a/src/sfc/MonthSelect.vue b/src/sfc/MonthSelect.vue
index 9fd922e..181a160 100644
--- a/src/sfc/MonthSelect.vue
+++ b/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()
     },
diff --git a/src/sfc/TimeShortCuts.vue b/src/sfc/TimeShortCuts.vue
index 3c4b16b..d793bce 100644
--- a/src/sfc/TimeShortCuts.vue
+++ b/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');
diff --git a/src/stores/index.js b/src/stores/index.js
new file mode 100644
index 0000000..609dfdb
--- /dev/null
+++ b/src/stores/index.js
@@ -0,0 +1,5 @@
+import { createPinia } from 'pinia';
+
+const pinia = createPinia();
+
+export default pinia;
diff --git a/src/stores/loadingStore.js b/src/stores/loadingStore.js
new file mode 100644
index 0000000..d8b2d1c
--- /dev/null
+++ b/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 = []        
+      }
+    }
+  }
+})
\ No newline at end of file
diff --git a/src/utils/risk_estimate_common_function/index.js b/src/utils/risk_estimate_common_function/index.js
index 4c7092c..bfcfb96 100644
--- a/src/utils/risk_estimate_common_function/index.js
+++ b/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
       // 鎵惧埌寮傚父鏁版嵁涓璵nCode绛変簬value鐨勫璞�
diff --git a/src/views/data_management/DataAccessManagement.vue b/src/views/data_management/DataAccessManagement.vue
index 2ba327a..97d10b7 100644
--- a/src/views/data_management/DataAccessManagement.vue
+++ b/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;
 }
diff --git a/src/views/exception/SiteAuditAssistance.vue b/src/views/exception/SiteAuditAssistance.vue
index 49184c6..310bb40 100644
--- a/src/views/exception/SiteAuditAssistance.vue
+++ b/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: {
diff --git a/src/views/line_graph/DataRiskModel.vue b/src/views/line_graph/DataRiskModel.vue
index 91100fb..8139634 100644
--- a/src/views/line_graph/DataRiskModel.vue
+++ b/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:'閲戝北鍖洪噾灞辨柊鍩嶫SC1-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); 
-     // 鑾峰彇鍓峮um涓厓绱� 
-     return arr.slice(0,num); 
- } 
-
+    /**
+     * 闄嶅簭鎺掑垪锛岃繑鍥為檷搴忓墠num鐨勫厓绱�
+     * @param锛� 瀵硅薄鏁扮粍锛岃繑鍥炵殑鏁伴噺
+     */
+    getTopRiskData(arr, num) {
+      // 鎸夌収riskValue闄嶅簭鎺掑垪
+      arr.sort((a, b) => b.riskValue - a.riskValue)
+      // 鑾峰彇鍓峮um涓厓绱�
+      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>
diff --git a/src/views/line_graph/DataRiskRank.vue b/src/views/line_graph/DataRiskRank.vue
index e96e5a2..b8c8292 100644
--- a/src/views/line_graph/DataRiskRank.vue
+++ b/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>
diff --git a/src/views/line_graph/RiskTest.vue b/src/views/line_graph/RiskTest.vue
new file mode 100644
index 0000000..cf8d53e
--- /dev/null
+++ b/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)
+        // 鑾峰彇鍓峮um涓厓绱�
+        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>
+  
\ No newline at end of file
diff --git a/src/views/line_graph/SiteComprehensiveRskRanking.vue b/src/views/line_graph/SiteComprehensiveRskRanking.vue
index 082d7ed..e0c2597 100644
--- a/src/views/line_graph/SiteComprehensiveRskRanking.vue
+++ b/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>
diff --git a/src/views/line_graph/components/SiteDetail.vue b/src/views/line_graph/components/SiteDetail.vue
new file mode 100644
index 0000000..af48d78
--- /dev/null
+++ b/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>
diff --git a/src/views/line_graph/components/subRiskModel.vue b/src/views/line_graph/components/subRiskModel.vue
new file mode 100644
index 0000000..35c691f
--- /dev/null
+++ b/src/views/line_graph/components/subRiskModel.vue
@@ -0,0 +1,663 @@
+<!-- 椋庨櫓妯″瀷鐨勯〉闈�  
+鍖哄埆锛�
+1.鎺ュ彈鐖剁粍浠朵紶鍙�
+2.鏃犲垵濮嬪姞杞芥暟鎹紙鏃爉ounted锛�
+-->
+
+<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)
+        // 鑾峰彇鍓峮um涓厓绱�
+        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>
+  
\ No newline at end of file
diff --git a/src/views/setting/SetConfiguration.vue b/src/views/setting/SetConfiguration.vue
index 62ca902..138de34 100644
--- a/src/views/setting/SetConfiguration.vue
+++ b/src/views/setting/SetConfiguration.vue
@@ -59,76 +59,7 @@
         }
       })
     },
-  //   get(){
- 
-  //     exceptionApi.analysisdata('閲戝北鍖洪噾灞辨柊鍩嶫SC1-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>

--
Gitblit v1.9.3