From cc890f987b770e5a73f5ef12d41b25f6bb448fcd Mon Sep 17 00:00:00 2001 From: zmc <zmc_li@foxmail.com> Date: 星期四, 23 十一月 2023 16:37:45 +0800 Subject: [PATCH] 1.增加了风险模型跳转逻辑 2.修改了风险模型页面部分逻辑 --- src/views/risk_assessment/components/SiteDetail.vue | 36 src/views/risk_assessment/DataRiskRank.vue | 4 src/utils/risk_estimate_common_function/index.js | 20 src/router/index.js | 20 src/views/exception/SiteAuditAssistance.vue | 3 /dev/null | 371 ---------- src/views/risk_assessment/components/CompDataRiskModel.vue | 777 +++++++++++++++++++++ src/api/site/siteInfo.js | 9 src/utils/risk_estimate_common_function/riskValue.js | 6 src/views/risk_assessment/DataIndexRank.vue | 14 src/utils/chartFunction/exceptionOption.js | 36 src/views/risk_assessment/DataRiskModel.vue | 709 ------------------- src/views/risk_assessment/components/subRiskModel.vue | 3 src/utils/chartFunction/lineChart.js | 48 + src/views/exception/components/CompFlightInspection.vue | 80 + 15 files changed, 1,007 insertions(+), 1,129 deletions(-) diff --git a/src/api/site/siteInfo.js b/src/api/site/siteInfo.js index 42b073f..75a8ff9 100644 --- a/src/api/site/siteInfo.js +++ b/src/api/site/siteInfo.js @@ -34,6 +34,15 @@ */ queryScenarioTypeName(){ return $http.get('/dust/scenario') + }, + + /** + * 鏍规嵁鐐逛綅鍚嶅瓧鏌ヨ瀵瑰簲鐨勮澶囩紪鍙� + * @param锛� + * @returns锛� + */ + queryMnCode(siteName){ + return $http.get('/dust/siteInfo/mncode',{params:{siteName:siteName}}) } } \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 4473a9a..ecc110e 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -17,7 +17,7 @@ component: () => import('@/views/risk_assessment/DataRiskModel.vue') }, - // 鏁版嵁椋庨櫓鎺掑悕 + // 鏁版嵁鎸囨爣鎺掑悕 { path: '/analysis', name: 'analysis', @@ -79,13 +79,14 @@ component: () => import('@/views/setting/SetConfiguration.vue') }, + // 椋庨櫓妯″瀷宓屽叆杩囨浮椤甸潰 - { - path: '/detail/:siteName/:month/:titleName', - name: 'RiskModelDetail', - meta: { title: '绔欑偣鍏蜂綋淇℃伅', transition: 'slide-left' }, - component: () => import('@/views/risk_assessment/components/SiteDetail.vue') - }, + // { + // path: '/detail/:siteName/:month/:type', + // name: 'RiskModelDetail', + // meta: { title: '绔欑偣鍏蜂綋淇℃伅', transition: 'slide-left' }, + // component: () => import('@/views/risk_assessment/components/SiteDetail.vue') + // }, // 椋庨櫓妯″瀷宓屽叆 { @@ -94,7 +95,8 @@ meta: { title: '椋庨櫓妯″瀷宓屽叆' }, component: () => import('@/views/risk_assessment/components/SubRiskModel.vue') }, - + + // 瀹℃牳杈呭姪宓屽叆杩囨浮椤甸潰 { path: '/AuditDetail/:beginTime/:endTime/:exceptionType', @@ -113,7 +115,7 @@ // 寮傚父璇︽儏宓屽叆杩囨浮椤甸潰 { - path: '/exceptionDetail/:siteName/:month/', + path: '/exceptionDetail/:siteName/:time/:timeType/:jumpPage', name: 'exceptionDetail', meta: { title: '寮傚父鍏蜂綋淇℃伅', transition: 'slide-left' }, component: () => import('@/views/risk_assessment/components/SiteDetail.vue') diff --git a/src/utils/chartFunction/exceptionOption.js b/src/utils/chartFunction/exceptionOption.js index dde1fd9..65ff4c5 100644 --- a/src/utils/chartFunction/exceptionOption.js +++ b/src/utils/chartFunction/exceptionOption.js @@ -17,6 +17,7 @@ endIndex, exceptionName, areaObj, + lineColor, exceptionType ) { switch (exceptionType) { @@ -65,7 +66,8 @@ exceptionName ) case '8': - return this.validOption(xData, yData, exceptionName, areaObj) + console.log('浼犺繘鏉�',lineColor) + return this.validOption(xData, yData, exceptionName, areaObj,lineColor) } }, @@ -564,7 +566,7 @@ * @param锛� * @returns锛� */ - validOption(xData, yData, exceptionName, areaObj) { + validOption(xData, yData, exceptionName, areaObj,lineColor) { return { title: { text: exceptionName, @@ -577,9 +579,6 @@ toolbox: { // 宸ュ叿鏍� feature: { - // dataZoom: { - // yAxisIndex: 'none' - // }, // 淇濆瓨涓哄浘鐗� saveAsImage: {} } @@ -622,7 +621,32 @@ data: areaObj } } - ] + ], + // 鎸囧畾鏃堕棿鍖洪棿鐨勭嚎娈靛彉棰滆壊 + // visualMap: { + // show: false, + // dimension: 0, + + // // pieces: [ + // // { + // // lte: beginIndex, + // // color: 'green' + // // }, + // // { + // // gt: beginIndex, + // // lte: endIndex, + // // color: 'red' + // // }, + // // { + // // gt: endIndex, + // // lte: xData.length - 1, + // // color: 'green' + // // } + // // ], + + // pieces: lineColor + + // } } } } diff --git a/src/utils/chartFunction/lineChart.js b/src/utils/chartFunction/lineChart.js index 8c06873..39b7146 100644 --- a/src/utils/chartFunction/lineChart.js +++ b/src/utils/chartFunction/lineChart.js @@ -1,4 +1,5 @@ import dayjs from 'dayjs' +import { time } from 'echarts' export default { // 鑾峰彇璇ユ湀浠藉ぉ鏁� @@ -163,5 +164,50 @@ */ deleteLastStr(valueStr) { return valueStr.slice(0, -1) - } + }, + + + /** + * 鎸囧畾鏃堕棿鍖洪棿鐨勭嚎娈靛彉棰滆壊 + * @param锛� + * @returns锛� + */ + getLineColor(timeInteval,xList){ + let result = [] + + // 鍙彇 + let temp = [] + for (let i = 0; i < timeInteval.length; i++){ + if(timeInteval[i][0]!=timeInteval[i][1]){ + temp.push(timeInteval[i]) + } + } + + // 鏃犺繛缁殑鏁版嵁 鐩存帴閫�鍑� + if(temp.length == 0){ + return [] + } + + // 鍙栫涓�涓繛缁殑鏃舵 + result.push( + [ + { + lte: temp[0][0], + color: 'green' + }, + { + gt: temp[0][0], + lte:temp[0][1], + color: 'red' + }, + { + gt: temp[0][1], + lte:xList[xList.length-1], + color: 'green' + } + ] + ) + return result[0] + }, + } diff --git a/src/utils/risk_estimate_common_function/index.js b/src/utils/risk_estimate_common_function/index.js index 214c774..84295b7 100644 --- a/src/utils/risk_estimate_common_function/index.js +++ b/src/utils/risk_estimate_common_function/index.js @@ -109,8 +109,8 @@ if (exception.length == 0) { exception.push(item.exceptionType) } - // 淇濆瓨鏂扮殑寮傚父绫诲瀷 - else if (exception.indexOf(item.exceptionType) == -1) { + // 淇濆瓨鏂扮殑寮傚父绫诲瀷 鏁版嵁瓒呬綆銆侀暱鏃堕棿鏃犳尝鍔ㄧ瓑涓ょ被寮傚父鏆備笉绾冲叆鍒嗘瀽 + else if ( item.exceptionType!='1' && item.exceptionType!='3' && exception.indexOf(item.exceptionType) == -1) { exception.push(item.exceptionType) } }) @@ -137,15 +137,27 @@ default: return 'error' } - - exceptionTypeAggregation = (exception.length / 8).toFixed(2) + + // 鏁版嵁瓒呬綆銆侀暱鏃堕棿鏃犳尝鍔ㄧ瓑涓ょ被寮傚父鏆備笉绾冲叆鍒嗘瀽 + exceptionTypeAggregation = (exception.length / 6).toFixed(2) let obj = {} obj['exceptionRecurrence'] = exceptionTyprRecurRate obj['exceptionTypeAggregation'] = exceptionTypeAggregation + // 淇濆瓨璇ユ椂娈靛嚭鐜扮殑寮傚父 + obj['exception'] = exception + + // 涓夌被寮傚父鍑虹幇鐨勬鏁� + obj['mutationCount'] = mutationCount + obj['exceedingNearCount'] = exceedingNearCount + obj['exceedingCriticalDegree'] = exceedingCriticalDegree + + return obj }, + + // 鍙傛暟锛氬璞℃暟缁�(璇ュ璞′腑鐨勫睘鎬т笉鑳芥槸寮曠敤绫诲瀷锛屽惁鍒欐嫹璐濈殑鍊艰繕鏄細鐩镐簰褰卞搷) // 鍔熻兘锛氭嫹璐濊瀵硅薄鏁扮粍銆� shallowCopyList(val) { diff --git a/src/utils/risk_estimate_common_function/riskValue.js b/src/utils/risk_estimate_common_function/riskValue.js index 2f37758..97df011 100644 --- a/src/utils/risk_estimate_common_function/riskValue.js +++ b/src/utils/risk_estimate_common_function/riskValue.js @@ -63,19 +63,19 @@ judgeRiskGradeAndAdvice(monthlyRiskValue){ let temp = [] // 浣庨闄� - if(monthlyRiskValue < 0.2) { + if(monthlyRiskValue < 0.15) { temp.push('浣庨闄�') let advice = '1.寤鸿鍙婃椂鎻愰啋璇ョ珯鐐规墍灞炲崟浣嶈繘琛屽簲鎬ョ淮鎶わ紱\n2.鑻ュ悓鏃跺瓨鍦ㄨ秴鏍囥�佷复鐣岃秴鏍囥�侀噺绾х獊鍙樼瓑寮傚父鏃讹紝寤鸿灏嗚绔欑偣绉讳氦鐜鎵ф硶澶ч槦寮�灞曠幇鍦烘墽娉曟鏌ワ紱\n3.鑻ユ寔缁袱鏈堝強浠ヤ笂涓洪珮椋庨櫓锛屽缓璁皢璇ョ珯鐐圭撼鍏ュ勾搴︽娊娴嬫瘮瀵规竻鍗曪紱' temp.push(advice) } // 涓闄� - if (monthlyRiskValue < 0.6 && monthlyRiskValue >= 0.2) { + if (monthlyRiskValue <= 0.6 && monthlyRiskValue >= 0.15) { temp.push('涓闄�') let advice = '1.寤鸿閫氳繃瀹堟硶鏈嶅姟灏忕▼搴忋�佺洃娴嬬洃绠″井淇$兢绛夌嚎涓婃柟寮忔彁绀虹珯鐐规墍灞炲崟浣嶏紝鑱氱劍褰撳墠瀛樺湪鐨勯棶棰樻垨闅愭偅锛屽強鏃跺紑灞曡嚜鏌ヨ嚜绾狅紱\n2.鑻ュ悓鏃跺瓨鍦ㄥ湪绾跨巼鎴栨湁鏁堢巼鏈堝害涓嶈揪鏍囷紝寤鸿鐢佃瘽閫氱煡璇ョ珯鐐规墍灞炲崟浣嶈繘琛屽簲鎬ョ淮鎶わ紝骞惰繘琛屼笓椤瑰鏍革紱' temp.push(advice) } // 楂橀闄� - if (monthlyRiskValue >= 0.6) { + if (monthlyRiskValue > 0.6) { temp.push('楂橀闄�') let advice = '1.鑻ヤ笉娑夊強瓒呮爣鎴栧湪绾跨巼銆佹湁鏁堢巼寮傚父锛屽父鎬佹暟鎹鏍稿嵆鍙紱\n2.鑻ユ秹鍙婅秴鏍囨垨鍦ㄧ嚎鐜囥�佹湁鏁堢巼绛夊紓甯革紝寤鸿閫氳繃瀹堟硶鏈嶅姟灏忕▼搴忋�佺洃娴嬬洃绠″井淇$兢绛夌嚎涓婃柟寮忔彁绀虹珯鐐规墍灞炲崟浣嶏紝鍙婃椂寮�灞曡嚜鏌ヨ嚜绾狅紱' temp.push(advice) diff --git a/src/views/exception/SiteAuditAssistance.vue b/src/views/exception/SiteAuditAssistance.vue index 333691e..aa35978 100644 --- a/src/views/exception/SiteAuditAssistance.vue +++ b/src/views/exception/SiteAuditAssistance.vue @@ -245,6 +245,7 @@ '', this.tableCurrentRowData.exception, areaObj, + '', this.tableCurrentRowData.exceptionType ) }, @@ -1709,7 +1710,7 @@ align="center" show-overflow-tooltip /> - <el-table-column prop="flag" label="flag" align="center" show-overflow-tooltip /> + <el-table-column prop="flag" label="鏁版嵁鏍囪瘑" align="center" show-overflow-tooltip /> </el-table> </div> <template #footer> diff --git a/src/views/exception/components/CompFlightInspection.vue b/src/views/exception/components/CompFlightInspection.vue index dbd2081..01b7aea 100644 --- a/src/views/exception/components/CompFlightInspection.vue +++ b/src/views/exception/components/CompFlightInspection.vue @@ -33,8 +33,8 @@ type: String, default: '' }, - // 鏈堜唤 - month:{ + // 鏃ユ椂闂存垨鑰呮湀鏃堕棿 + time:{ type:String, default:'' }, @@ -42,6 +42,12 @@ showAll: { type: Boolean, default: true + }, + + // 0浠h〃鏃ユ椂闂达紝1浠h〃鏈堟椂闂� + timeType:{ + type:Number, + default:-1 } }, components: { @@ -179,7 +185,6 @@ } }, setup() { - // provide('search',readonly(form)) const { isExceedOneMonth } = useCommonFunction() return { isExceedOneMonth @@ -221,17 +226,26 @@ this.backExceptionDataAWeekAgo() } }, - siteName(){ - this.beginTime = dayjs(this.month).startOf('month').format('YYYY-MM-DD HH:mm:ss') - this.endTime = dayjs(this.month).endOf('month').format('YYYY-MM-DD HH:mm:ss') - this.backExceptionDataAWeekAgo() - this.getShopNames() - }, - month(){ - this.beginTime = dayjs(this.month).startOf('month').format('YYYY-MM-DD HH:mm:ss') - this.endTime = dayjs(this.month).endOf('month').format('YYYY-MM-DD HH:mm:ss') - this.backExceptionDataAWeekAgo() - this.getShopNames() + // siteName(){ + // if(this.siteName!=''){ + // this.beginTime = dayjs(this.month).startOf('month').format('YYYY-MM-DD HH:mm:ss') + // this.endTime = dayjs(this.month).endOf('month').format('YYYY-MM-DD HH:mm:ss') + // this.backExceptionDataAWeekAgo() + // this.getShopNames() + // } + + // }, + + timeType(){ + if(this.timeType == '0'){ + this.beginTime = dayjs(this.time).format('YYYY-MM-DD 00:00:00') + this.endTime = dayjs(this.time).format('YYYY-MM-DD 23:59:59') + }else if(this.timeType == '1'){ + this.beginTime = dayjs(this.time).startOf('month').format('YYYY-MM-DD HH:mm:ss') + this.endTime = dayjs(this.time).endOf('month').format('YYYY-MM-DD HH:mm:ss') + } + this.backExceptionDataAWeekAgo() + this.getShopNames() } }, computed: { @@ -379,6 +393,12 @@ mounted() { this.getSiteNume() + + // 椋炶宸℃椤甸潰锛岃繘鍘诲姞杞� + if(this.showAll == true){ + this.backExceptionDataAWeekAgo() + this.getShopNames() + } }, methods: { @@ -413,7 +433,9 @@ // let rangeTime_1 = time.splitTime(rangeTime) // 寰楀埌鑳屾櫙鍖洪棿鐨勯厤缃� let areaObj = lineChart.getMarkArea(rangeTime, '寮傚父') - + // let lineColor = lineChart.getLineColor(rangeTime,xList) + let lineColor = [] + // console.log('绾挎',lineColor); // 浼犲叆鍙傛暟 this.dialog.option = exceptionOption.setExceptionChartOption( xList, @@ -424,6 +446,7 @@ '', this.tableCurrentRowData.exception, areaObj, + lineColor, this.tableCurrentRowData.exceptionType ) }, @@ -535,6 +558,7 @@ startIndex, endIndex, this.tableCurrentRowData.exception, + '', '', this.tableCurrentRowData.exceptionType ) @@ -1201,10 +1225,11 @@ align="center" show-overflow-tooltip /> - <el-table-column prop="flag" label="flag" align="center" show-overflow-tooltip /> + <el-table-column prop="flag" label="鏁版嵁鏍囪瘑" align="center" show-overflow-tooltip /> </el-table> </div> <template #footer> + <div class="dialog-footer"> <el-tag type="success" class="mx-1" effect="dark" round ><span class="table-line-lable" v-show="tableCurrentRowData.exceptionType == '0'" >缂哄け鏁版嵁锛� @@ -1214,13 +1239,20 @@ tableCurrentRowData.exceptionType == '1' || tableCurrentRowData.exceptionType == '2' || tableCurrentRowData.exceptionType == '3' || - tableCurrentRowData.exceptionType == '4' + tableCurrentRowData.exceptionType == '4' || + tableCurrentRowData.exceptionType == '5' || + tableCurrentRowData.exceptionType == '6' || + tableCurrentRowData.exceptionType == '7' || + tableCurrentRowData.exceptionType == '8' " >寮傚父鏁版嵁锛�</span > <span class="table-line-num">{{ dialog.exceptionTotal }}鏉�</span> <span v-show="tableCurrentRowData.exceptionType == '0'"> (閫昏緫璁$畻)</span> </el-tag> + <el-text v-show="tableCurrentRowData.exceptionType == '8'" type="warning" class="dialog-footer-text">鏁版嵁鏍囪瘑A涓烘暟鎹暱鏈熺己澶�,绯荤粺鑷姩琛ュ叏</el-text> + <!-- <el-text class="mx-1" type="warning">Warning</el-text> --> + </div> </template> </el-dialog> </div> @@ -1359,9 +1391,19 @@ } .mx-1 { - position: absolute; + /* position: absolute; left: 10px; - bottom: 10px; + bottom: 10px; */ + justify-content: flex-start; +} +.dialog-footer{ + display: flex; +} +.dialog-footer-text { + justify-content: flex-end; + margin-left: auto; + font-size: 14px; + /* color: #333333; */ } /* 鏌ョ湅璇︽儏瀵硅瘽妗嗘ā鍧楃粨鏉� */ </style> diff --git a/src/views/exception/components/SubFlightInspection.vue b/src/views/exception/components/SubFlightInspection.vue deleted file mode 100644 index e375b3c..0000000 --- a/src/views/exception/components/SubFlightInspection.vue +++ /dev/null @@ -1,1847 +0,0 @@ -<script> -import { defineAsyncComponent } from 'vue' -import TimeShortCuts from '@/sfc/TimeShortCuts.vue' -import { useCommonFunction } from '@/utils/common.js' -import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue' -import ButtonClick from '@/sfc/ButtonClick.vue' -import index from '@/utils/exception_common_function/index.js' -// 寮傚父鍥惧舰寮傛缁勪欢 -const DustLineChart = defineAsyncComponent(() => import('@/views/exception/components/DustLineChart.vue')) -import exceptionApi from '@/api/exceptionApi.js' -import dayjs from 'dayjs' -import { ElMessage } from 'element-plus' -import AnalysisCard from '@/views/exception/components/AnalysisCard.vue' - -export default { - props:{ - siteName:{ - type:String, - default:'' - }, - month:{ - type:String, - default:'2023-11-01' - } - }, - components: { - TimeShortCuts, - DustLineChart, - ButtonClick, - AreaAndmonitorType, - AnalysisCard - }, - data() { - return { - // 琛ㄥ崟鍐呭 - form: { - // 绔欑偣鍚嶇О - name: '', - // 閫夋嫨鐨勫紓甯哥被鍨� - exceptionName: [] - }, - beginTime: '', - endTime: '', - // 杩斿洖鐨勬暟鎹� - tableData: [], - // 琛ㄦ牸灞曠ず鐨勬暟鎹� - displayData: [], - // 琛ㄦ牸楂樺害 - tableHeight: 400, - // 琛ㄦ牸鏄剧ず - isTableShow: false, - // 褰撳墠椤� - currentPage: 1, - // 姣忛〉鏉℃暟 - pageSize: 20, - // 琛ㄦ牸鐨勬�昏褰曟暟 - total: 0, - - // 鏌ヨ鎸夐挳鏃犳暟鎹椂 - isNoData: { - exception0: true, - exception1: true, - exception2: true, - exception3: true, - exception4: true, - exception5: true, - exception6: true, - exception7: true - }, - // eslint-disable-next-line no-undef - // 瀵硅瘽妗嗘樉绀� - dialogTableVisible: false, - // 淇濆瓨寮傚父瀵瑰簲鐨勫簵閾哄悕绉板拰璁惧缂栧彿 - exception: { - // 鏂數鎴栨柇缃� - exception0: [], - // 鏁版嵁瓒呬綆 - exception1: [], - // 瓒呮爣 - exception2: [], - // 鏁版嵁闀挎椂娈垫棤娉㈠姩 - exception3: [], - // 閲忕骇绐佸彉寮傚父 - exception4: [], - // 涓磋繎瓒呮爣寮傚父 - exception5: [], - // 鍗曟棩瓒呮爣娆℃暟涓寸晫寮傚父 - exception6: [], - // 婊戝姩骞冲潎鍊煎紓甯� - exception7: [], - - // 璇ユ椂娈电殑寮傚父鏁伴噺 - exception0Num: 0, - exception1Num: 0, - exception2Num: 0, - exception3Num: 0, - exception4Num: 0, - exception5Num: 0, - exception6Num: 0, - exception7Num: 0 - }, - // 绔欑偣鎬绘暟閲� - siteTotal: 0, - - // 閫変腑琛ㄦ牸褰撳墠琛岀殑鏁版嵁 - tableCurrentRowData: null, - // 閫変腑琛ㄦ牸褰撳墠琛岀殑绱㈠紩 - selectedRowIndex: -2, - // 椤甸潰涓婄殑鎸夐挳鍔犺浇鐘舵�� - loading: { - // 鏌ヨ鎸夐挳 - queryButton: false, - // 琛ㄦ牸鍔犺浇涓� - tableLoading: false, - // 涓婁竴鏉℃寜閽� - preButton: false, - // 涓嬩竴鏉℃寜閽� - afterButton: false, - // 鎶樼嚎鍥� - lineChart: false - }, - - dialog: { - // 鎵撳紑瀵硅瘽妗嗚姹傝鍖洪棿鐨勫巻鍙叉暟鎹� - historyData: [], - // 璇ユ椂闂存鐨勫紓甯告潯鏁� - exceptionTotal: 0, - // 鎶樼嚎鍥鹃厤缃」 - option: {}, - // 鈥欎笂涓�鏉♀�樻寜閽槸鍚﹀彲浠ヨ鐐瑰嚮鐘舵�� - isPreCantouch: false, - // 鈥欎笅涓�鏉♀�樻寜閽槸鍚﹀彲浠ヨ鐐瑰嚮鐘舵�� - isNextCantouch: false, - // 寮傚父鐨勫墠涓悗鍖洪棿鎵�鏈夋暟鎹� - allExceptionTimeData: [] - }, - - // 鏍囪浣� - flag: { - // 鍔犺浇鏃� 涓婁笅鏉℃寜閽笉鑳藉啀鐐瑰嚮 - banTouch: 0, - // 0浠h〃鍒嗛〉锛�1浠h〃涓嶅垎椤� - originClick: 0 - } - } - }, - setup() { - // provide('search',readonly(form)) - const { isExceedOneMonth } = useCommonFunction() - return { - isExceedOneMonth - } - }, - // 鐩戝惉 鍒ゆ柇鎸夐挳鏄惁鍙偣鍑� - watch: { - selectedRowIndex(newVaue) { - // 澶勪簬琛ㄦ牸鐨勬渶鍚庝竴鏉℃暟鎹� 璁剧疆鈥樹笂涓�鏉♀�欐寜閽笉鍙偣 - if (newVaue === 0) { - this.dialog.isPreCantouch = true - //鐢ㄦ埛鍏堢偣浜嗙涓�鏉★紝pre涓簍rue,鐒跺悗鐐瑰嚮鏈�鍚庝竴鏉�,next涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿� - if (this.dialog.isNextCantouch == true) { - this.dialog.isNextCantouch = false - } - } - // 澶勪簬琛ㄦ牸绗竴鏉℃暟鎹� 璁剧疆鈥樹笂涓�鏉♀�欐寜閽笉鍙偣 - else if (newVaue === this.displayData.length - 1) { - this.dialog.isNextCantouch = true - //鐢ㄦ埛鍏堢偣浜嗚〃鏍兼渶鍚庝竴鏉�,next涓簍rue,鐒跺悗鐐瑰嚮绗竴鏉★紝pre涓簍rue銆傛鏃朵袱涓寜閽兘琚皝閿� - if (this.dialog.isPreCantouch == true) { - this.dialog.isPreCantouch = false - } - } - // 澶勪簬琛ㄦ牸鐨勪腑闂磋 灏嗘寜閽缃负鍙偣鍑荤姸鎬� - else { - this.dialog.isPreCantouch = false - this.dialog.isNextCantouch = false - } - }, - - // 褰撻�夋嫨鐨勬椂闂村彂鐢熷彉鍖栨椂锛屽紓甯稿垎鏋愰儴鍒嗙殑寮傚父搴楅摵鏁伴噺鍚屾鍙樺寲 - // beginTime() { - // this.getShopNames() - // }, - // endTime() { - // this.getShopNames() - // }, - dialogTableVisible() { - window.addEventListener('resize', this.updateChart) - } - }, - computed: { - exceptionAllNum() { - let sum = - this.exception.exception0Num + - this.exception.exception1Num + - this.exception.exception2Num + - this.exception.exception3Num + - this.exception.exception4Num + - this.exception.exception5Num + - this.exception.exception6Num + - this.exception.exception7Num - if (sum == 0) { - return 1 - } else { - return sum - } - }, - long_time_notchange() { - let sum = - this.exception.exception0Num + - this.exception.exception1Num + - this.exception.exception2Num + - this.exception.exception3Num + - this.exception.exception4Num + - this.exception.exception5Num + - this.exception.exception6Num + - this.exception.exception7Num - if (sum == 0) { - return 0 - } else { - return ( - 100 - - (this.exception.exception0Num / this.exceptionAllNum) * 100 - - (this.exception.exception1Num / this.exceptionAllNum) * 100 - - (this.exception.exception2Num / this.exceptionAllNum) * 100 - - (this.exception.exception4Num / this.exceptionAllNum) * 100 - - (this.exception.exception5Num / this.exceptionAllNum) * 100 - - (this.exception.exception6Num / this.exceptionAllNum) * 100 - - (this.exception.exception7Num / this.exceptionAllNum) * 100 - ).toFixed(1) - } - }, - // 绗竴鎺掑崱鐗� - cardRow1() { - return [ - { - siteName: this.exception.exception4, - exceptionType: '4', - exceptionName: '閲忕骇绐佸彉', - iconSrc: '@/assets/exception/exception4.png', - siteNum: this.exception.exception4.length, - exceptionNum: this.exception.exception4Num, - isNoDataStatus: this.isNoData.exception4 - }, - { - siteName: this.exception.exception5, - exceptionType: '5', - exceptionName: '涓磋繎瓒呮爣寮傚父', - iconSrc: '@/assets/exception/exception5.png', - siteNum: this.exception.exception5.length, - exceptionNum: this.exception.exception5Num, - isNoDataStatus: this.isNoData.exception5 - }, - { - siteName: this.exception.exception6, - exceptionType: '6', - exceptionName: '鍗曟棩瓒呮爣娆℃暟涓寸晫寮傚父', - iconSrc: '@/assets/exception/exception6.png', - siteNum: this.exception.exception6.length, - exceptionNum: this.exception.exception6Num, - isNoDataStatus: this.isNoData.exception6 - }, - { - siteName: this.exception.exception7, - exceptionType: '7', - exceptionName: '鍙樺寲瓒嬪娍寮傚父', - iconSrc: '@/assets/exception/exception7.png', - siteNum: this.exception.exception7.length, - exceptionNum: this.exception.exception7Num, - isNoDataStatus: this.isNoData.exception7 - } - ] - }, - cardRow2() { - return [ - { - siteName: this.exception.exception0, - exceptionType: '0', - exceptionName: '鏁版嵁缂哄け寮傚父', - iconSrc: '@/assets/exception/exception0.png', - siteNum: this.exception.exception0.length, - exceptionNum: this.exception.exception0Num, - isNoDataStatus: this.isNoData.exception0 - }, - { - siteName: this.exception.exception1, - exceptionType: '1', - exceptionName: '鏁版嵁瓒呬綆', - iconSrc: '@/assets/exception/exception1.png', - siteNum: this.exception.exception1.length, - exceptionNum: this.exception.exception1Num, - isNoDataStatus: this.isNoData.exception1 - }, - { - siteName: this.exception.exception2, - exceptionType: '2', - exceptionName: '瓒呮爣', - iconSrc: '@/assets/exception/exception2.png', - siteNum: this.exception.exception2.length, - exceptionNum: this.exception.exception2Num, - isNoDataStatus: this.isNoData.exception2 - }, - { - siteName: this.exception.exception3, - exceptionType: '3', - exceptionName: '鏁版嵁闀挎椂娈垫棤娉㈠姩', - iconSrc: '@/assets/exception/exception3.png', - siteNum: this.exception.exception3.length, - exceptionNum: this.exception.exception3Num, - isNoDataStatus: this.isNoData.exception3 - } - ] - } - }, - mounted() { - // 鏌ヨ鏃堕棿娈电殑鍚勫紓甯哥殑绔欑偣锛屾煡璇㈣鏃堕棿鍖洪棿鐨勫悇寮傚父鏁伴噺 - // this.backExceptionDataAWeekAgo() - // this.getShopNames() - this.getSiteNume() - - this.$watch(() => [this.siteName, this.month], () => { - this.form.beginTime = dayjs(this.month).startOf('month') - this.form.endTime = dayjs(this.month).endOf('month') - this.backExceptionDataAWeekAgo() - this.getShopNames() - - }); - }, - - methods: { - getImageUrl(name) { - return new URL(`../../lib/Carousel/assets/${name}`, import.meta.url).href - }, - // 鏀惧洖绔欑偣鎬绘暟閲� - getSiteNume() { - exceptionApi.getSitesNum().then((res) => { - this.siteTotal = res.data.data.length - }) - }, - - /** - * description锛氱偣鍑诲紓甯哥珯鐐瑰悕瀛楁椂 杩斿洖鐨勬暟鎹� - * @param锛� - * @createTime:2023-08-17 - * @returns锛� - */ - getAbnormalDataByClick(val) { - this.flag.originClick = 1 - // 鏄剧ず琛ㄦ牸 - this.isTableShow = true - this.tableData = val - this.total = this.tableData.length - // 榛樿鏄剧ず绗竴椤� - this.handleCurrentChange(1) - }, - // 鐐瑰嚮琛ㄦ牸鐨勮鏃� - selectTableRow() { - // 鑾峰彇褰撳墠琛岀殑绱㈠紩 - this.selectedRowIndex = this.displayData.indexOf(this.tableCurrentRowData) - }, - /** - * description锛氭柇鐢垫垨鏂綉鏃惰缃殑琛ㄦ牸鏁版嵁 - */ - setOfflineTbleData() { - // 鏃犳暟鎹椂鐨勬椂闂存暟缁� 鏃堕棿鐩稿樊15鍒嗛挓 - const abnormalTimeTenMinute = index.descFiftyTime( - this.tableCurrentRowData.beginTime, - this.tableCurrentRowData.endTime - ) - // 淇濆瓨鏃犳暟鎹椂琛ㄦ牸鏉℃暟 - this.dialog.exceptionTotal = abnormalTimeTenMinute.length - - // 鍘婚櫎渚涚數寮傚父鍜屾帀绾垮尯闂寸殑绗竴涓湁鍏冪礌鐨勫�� - this.dialog.historyData = [] - - for (let i = 0; i < abnormalTimeTenMinute.length; i++) { - this.dialog.historyData.push({ - name: this.tableCurrentRowData.name, - mnCode: this.tableCurrentRowData.mnCode, - dutyCompany: this.tableCurrentRowData.dutyCompany, - lst: abnormalTimeTenMinute[i], - dustValue: '' - }) - } - }, - - // 娈电數鎴栨柇缃戝尯闂存棤鏁版嵁锛岄渶瑕佽ˉ鍏呫�傚叾浠栫殑閮芥湁鏁版嵁锛岀洿鎺ヤ竴娆¤姹傚叏閮ㄦ椂娈靛氨濂� - - // 鏍规嵁寮傚父鍖洪棿鏋勯�犲墠鍚庣棣栧熬 鍓嶅尯闂� 涓棿鍖洪棿 鍚庡尯闂� - // 鍒ゆ柇鏄鐢垫垨鏂綉锛熸槸鍒欒姹傚墠鍚庡尯闂达紝鍚﹀垯鍙姹備竴娆″畬鏁寸殑 - // 寰楀埌鏈�缁堟暟鎹� - // 鍐嶅垽鏂紓甯哥绫� 锛岃繘琛岃缃厤缃」 - - /** - * description锛氫竴娆¤姹傚洖鍓嶄腑鍚庡尯闂寸殑鏁版嵁,瀵规暟鎹繘琛屽垎鏋� - * @param锛� 鍓嶄腑鍚庡尯闂寸殑璇锋眰鍙傛暟锛屽墠涓悗鐨勬�诲尯闂存椂闂达紝寮傚父寮�濮嬫椂闂达紝涓�鍦虹粨鏉熸椂闂� - */ - otherExceptionRequest(allTimeArgs, allTime, exceptionBT, exceptionET) { - // 鎶樼嚎鍥惧姞杞戒腑鏁堟灉 - this.loading.lineChart = true - this.$http.get('/dust/history', { params: allTimeArgs }).then((result) => { - this.dialog.allExceptionTimeData = result.data.data - // 鏁版嵁缂哄け寮傚父鏃堕噸鏂拌缃〃鏍� - if (this.tableCurrentRowData.exceptionType == '0') { - this.setOfflineTbleData() - } - - // x杞存棩鏈熸椂闂� - let dateList = [] - // y杞� 瓒呮爣娌圭儫娴撳害 - let dustValue = [] - let timeAndValue = {} - - // 浠庢坊鍔犱簡棣栦綅鍖洪棿鐨勫紑濮嬪拰缁撴潫鏃堕棿杩涜閬嶅巻 淇濊瘉鏃堕棿浠�10鍒嗛挓涓洪棿闅� - timeAndValue = index.keepContinuousByEachFiftyMinutes( - allTime[0], - allTime[3], - this.dialog.allExceptionTimeData - ) - dateList = timeAndValue['xAxis'] - dustValue = timeAndValue['yAxis'] - - // 鎻愬彇寮傚父璧峰鏃堕棿鐐瑰湪鏁翠釜鍖洪棿鍐呯殑鏁版嵁绱㈠紩 - let startIndex = dateList.findIndex((item) => item === exceptionBT) - let endIndex = dateList.findIndex((item) => item === exceptionET) - - // 璁剧疆鎶樼嚎鍥鹃厤缃」 - this.reSetChart(dateList, dustValue, exceptionBT, exceptionET, startIndex, endIndex) - this.loading.lineChart = false - }) - }, - - /** - * description锛氱粯鍒舵姌绾垮浘 - * @param锛� x杞存椂闂达紝 y杞存补鐑熸祿搴︼紝 寮傚父寮�濮嬫椂闂达紝寮傚父缁撴潫鏃堕棿锛屽紓甯稿紑濮嬫椂闂村湪鏁翠釜鍖洪棿鐨勭储寮曚笅鏍囷紝寮傚父缁撴潫鏃堕棿鍦ㄦ暣涓尯闂寸殑绱㈠紩涓嬫爣 - */ - reSetChart(xData, yData, exceptionBeginTime, exceptionEndTime, beginIndex, endIndex) { - this.dialog.option = {} - switch (this.tableCurrentRowData.exceptionType) { - // 鏂數鎴栨柇缃� 鏃堕棿娈� - case '0': - this.dialog.option = { - title: { - text: this.tableCurrentRowData.exception, - left: '1%', - textStyle: { - fontSize: 14 - } - }, - tooltip: {}, - toolbox: { - // 宸ュ叿鏍� - feature: { - // dataZoom: { - // // 鍖哄煙缂╂斁 - // yAxisIndex: 'none' - // }, - // 淇濆瓨涓哄浘鐗� - saveAsImage: {} - } - }, - xAxis: { - type: 'category', - data: xData, - name: '鏃堕棿', - axisLabel: { - formatter: function (value) { - return value.slice(11, -3) - } - } - }, - yAxis: { - type: 'value', - name: 'mg/m鲁' - }, - series: [ - { - name: '棰楃矑鐗╂祿搴�', - type: 'line', - data: yData, - markLine: { - silent: true, - data: [ - // 鏍囨敞鏃犳暟鎹椂闂存鐨勬晥鏋滐紝灏嗚繖涓椂闂存鐨勬暟杞撮儴鍒嗗彉涓虹孩鑹� - { - name: '鏃犳暟鎹�', - xAxis: exceptionBeginTime - }, - { - xAxis: exceptionEndTime - } - ], - lineStyle: { - color: 'red' - } - } - } - ] - } - break - // 瓒呮爣 - case '2': - this.dialog.option = { - title: { - text: this.tableCurrentRowData.exception, - left: '1%', - textStyle: { - fontSize: 14 - } - }, - tooltip: {}, - toolbox: { - // 宸ュ叿鏍� - feature: { - // dataZoom: { - // yAxisIndex: 'none' - // }, - // 淇濆瓨涓哄浘鐗� - saveAsImage: {} - } - }, - xAxis: { - type: 'category', - data: xData, - name: '鏃堕棿', - axisLabel: { - formatter: function (value) { - return value.slice(11, -3) - } - } - }, - yAxis: { - type: 'value', - name: 'mg/m鲁' - }, - series: [ - { - name: '棰楃矑鐗╂祿搴�', - type: 'line', - data: yData.map((item) => { - if (item >= 1) { - return { - value: item, - itemStyle: { - color: 'red' - } - } - } - return item - }), - // 鍙樻崲鎸囧畾鏃堕棿鍖洪棿鐨勮儗鏅鑹� - markArea: { - itemStyle: { - color: 'rgba(255, 173, 177, 0.4)' - }, - data: [ - [ - { - name: '寮傚父鏃堕棿娈�', - xAxis: exceptionBeginTime - }, - { - xAxis: exceptionEndTime - } - ] - ] - }, - markLine: { - symbol: 'none', - itemStyle: { - // 鍩虹嚎鍏叡鏍峰紡 - normal: { - lineStyle: { - type: 'dashed' - }, - label: { - show: true, - position: 'end', - formatter: '{b}' - } - } - }, - data: [ - { - name: '瓒呮爣', - type: 'average', - yAxis: 1, - lineStyle: { - // color: '#ff0000' - color: 'red' - } - } - ] - } - } - ], - // 鎸囧畾鏃堕棿鍖洪棿鐨勭嚎娈靛彉棰滆壊 - visualMap: { - show: false, - dimension: 0, - pieces: [ - { - lte: beginIndex, - color: 'green' - }, - { - gt: beginIndex, - lte: endIndex, - color: 'red' - }, - { - gt: endIndex, - lte: xData.length - 1, - color: 'green' - } - ] - } - } - break - // 鏁版嵁瓒呬綆 鍙湁鏃堕棿鐐� - case '1': - this.dialog.option = { - title: { - text: this.tableCurrentRowData.exception, - left: '1%', - textStyle: { - fontSize: 14 - } - }, - tooltip: {}, - toolbox: { - // 宸ュ叿鏍� - feature: { - // dataZoom: { - // yAxisIndex: 'none' - // }, - // 淇濆瓨涓哄浘鐗� - saveAsImage: {} - } - }, - xAxis: { - type: 'category', - data: xData, - name: '鏃堕棿', - axisLabel: { - formatter: function (value) { - return value.slice(11, -3) - } - } - }, - yAxis: { - type: 'value', - name: 'mg/m鲁' - }, - series: [ - { - name: '棰楃矑鐗╂祿搴�', - type: 'line', - data: yData.map((item) => { - if (item <= 0.01) { - return { - value: item, - itemStyle: { - color: 'red' - } - } - } - return item - }), - - markLine: { - symbol: 'none', - itemStyle: { - // 鍩虹嚎鍏叡鏍峰紡 - normal: { - lineStyle: { - type: 'dashed' - }, - label: { - show: true, - position: 'end', - formatter: '{b}' - } - } - }, - data: [ - { - name: '鏁版嵁瓒呬綆', - type: 'average', - yAxis: 0.01, - lineStyle: { - // color: '#ff0000' - color: 'red' - } - } - ] - } - } - ], - // 鎸囧畾鏃堕棿鍖洪棿鐨勭嚎娈靛彉棰滆壊 - visualMap: { - show: false, - dimension: 0, - pieces: [ - { - lte: beginIndex, - color: 'green' - }, - { - gt: beginIndex, - lte: endIndex, - color: 'red' - }, - { - gt: endIndex, - lte: xData.length - 1, - color: 'green' - } - ] - } - } - break - // 鏁版嵁闀挎椂娈垫棤娉㈠姩 - case '3': - this.dialog.option = { - title: { - text: this.tableCurrentRowData.exception, - left: '1%', - textStyle: { - fontSize: 14 - } - }, - tooltip: {}, - toolbox: { - // 宸ュ叿鏍� - feature: { - // dataZoom: { - // yAxisIndex: 'none' - // }, - // 淇濆瓨涓哄浘鐗� - saveAsImage: {} - } - }, - xAxis: { - type: 'category', - data: xData, - name: '鏃堕棿', - axisLabel: { - formatter: function (value) { - return value.slice(11, -3) - } - } - }, - yAxis: { - type: 'value', - name: 'mg/m鲁' - }, - series: [ - { - name: '棰楃矑鐗╂祿搴�', - type: 'line', - data: yData.map((item) => { - if (item >= 1) { - return { - value: item, - itemStyle: { - color: 'red' - } - } - } - return item - }), - // 鍙樻崲鎸囧畾鏃堕棿鍖洪棿鐨勮儗鏅鑹� - markArea: { - itemStyle: { - color: 'rgba(255, 173, 177, 0.4)' - }, - data: [ - [ - { - name: '寮傚父鏃堕棿娈�', - xAxis: exceptionBeginTime - }, - { - xAxis: exceptionEndTime - } - ] - ] - } - } - ], - // 鎸囧畾鏃堕棿鍖洪棿鐨勭嚎娈靛彉棰滆壊 - visualMap: { - show: false, - dimension: 0, - pieces: [ - { - lte: beginIndex, - color: 'green' - }, - { - gt: beginIndex, - lte: endIndex, - color: 'red' - }, - { - gt: endIndex, - lte: xData.length - 1, - color: 'green' - } - ] - } - } - break - // 閲忕骇绐佸彉寮傚父 - case '4': - case '5': - case '6': - case '7': - this.dialog.option = { - title: { - text: this.tableCurrentRowData.exception, - left: '1%', - textStyle: { - fontSize: 14 - } - }, - tooltip: {}, - toolbox: { - // 宸ュ叿鏍� - feature: { - // dataZoom: { - // yAxisIndex: 'none' - // }, - // 淇濆瓨涓哄浘鐗� - saveAsImage: {} - } - }, - xAxis: { - type: 'category', - data: xData, - name: '鏃堕棿', - axisLabel: { - formatter: function (value) { - return value.slice(11, -3) - } - } - }, - yAxis: { - type: 'value', - name: 'mg/m鲁' - }, - series: [ - { - name: '棰楃矑鐗╂祿搴�', - type: 'line', - data: yData, - // 鍙樻崲鎸囧畾鏃堕棿鍖洪棿鐨勮儗鏅鑹� - markArea: { - itemStyle: { - color: 'rgba(255, 173, 177, 0.4)' - }, - data: [ - [ - { - name: '寮傚父鏃堕棿娈�', - xAxis: exceptionBeginTime - }, - { - xAxis: exceptionEndTime - } - ] - ] - } - } - ], - // 鎸囧畾鏃堕棿鍖洪棿鐨勭嚎娈靛彉棰滆壊 - visualMap: { - show: false, - dimension: 0, - pieces: [ - { - lte: beginIndex, - color: 'green' - }, - { - gt: beginIndex, - lte: endIndex, - color: 'red' - }, - { - gt: endIndex, - lte: xData.length - 1, - color: 'green' - } - ] - } - } - break - default: - console.log('娌℃湁璁剧疆璇ュ紓甯哥被鍨嬶紒') - } - this.flag.banTouch = 0 - }, - /** - * description锛氬垝鍒嗗嚭寮傚父璧峰鏃堕棿锛屾瀯閫犺姹傚墠涓悗鐨勫弬鏁� - */ - timeAndDataProcessed() { - //寮傚父鐨勫紑濮嬫椂闂� 缁撴潫鏃堕棿 - let exceptionBeginTime = this.tableCurrentRowData.beginTime - let exceptionEndTime = this.tableCurrentRowData.endTime - - // beforeAndAfterTime[0]:鍓�45鍒嗛挓鐨勬椂闂寸偣 - // beforeAndAfterTime[1]:鍓�15鍒嗛挓鐨勬椂闂寸偣 - // beforeAndAfterTime[2]:鍚�15鍒嗛挓鐨勬椂闂寸偣 - // beforeAndAfterTime[3]:鍚�45鍒嗛挓鐨勬椂闂寸偣 - let beforeAndAfterTime = index.before45AndAfter45(exceptionBeginTime, exceptionEndTime) - - // 鏋勯�犲紓甯告椂闂村墠鍚庡尯闂存暟鎹姹傚弬鏁�(闄や簡鏂綉涓兘鐢ㄥ埌锛� - let paramsAllTime = index.requestGetParms( - this.tableCurrentRowData.name, - beforeAndAfterTime[0], - beforeAndAfterTime[3] - ) - - // 灏嗗紓甯告暟鎹繘琛岄澶勭悊锛岄殢鍚庡皢缁撴灉浣滀负鎶樼嚎鍥剧殑閰嶇疆椤� - this.otherExceptionRequest( - paramsAllTime, - beforeAndAfterTime, - exceptionBeginTime, - exceptionEndTime - ) - }, - - /** - * description锛氳幏鍙栦笅涓�鏉″紓甯镐俊鎭� - */ - getPreviousRowData() { - // // 涓嶆槸琛ㄦ牸鐨勬渶鍚庝竴琛� - if (this.selectedRowIndex < this.displayData.length - 1) { - // 鐐瑰嚮杩囩▼涓� 閿佷綇涓婁笅鏉℃寜閽� 鍦ㄨ缃畬鍥惧舰閰嶇疆椤瑰悗瑙i攣 - this.flag.banTouch = 1 - - //寰楀埌涓婁竴琛屾暟鎹储寮� - this.selectedRowIndex = this.selectedRowIndex + 1 - - //璇锋眰鏁版嵁 鏀瑰彉exceedingData - // this.setinfo(this.selectedRowIndex); - - // 寰楀埌涓婁竴琛岀殑鏁版嵁 - this.tableCurrentRowData = this.displayData[this.selectedRowIndex] - let params = index.requestGetParms( - this.tableCurrentRowData.name, - this.tableCurrentRowData.beginTime, - this.tableCurrentRowData.endTime - ) - this.loading.preButton = true - this.$http.get('/dust/history', { params: params }).then((response) => { - // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹� - this.dialog.historyData = response.data.data - this.dialog.exceptionTotal = response.data.data.length - // 閫昏緫澶勭悊 - this.timeAndDataProcessed() - this.loading.preButton = false - }) - } - - //寰楀埌涓婁竴琛屾暟鎹储寮� - // this.selectedRowIndex = this.selectedRowIndex + 1; - // this.tableCurrentRowData = this.displayData[this.selectedRowIndex] - }, - /** - * description锛氳幏鍙栦笅涓�鏉″紓甯镐俊鎭� - */ - getNextRowData() { - // 涓嶆槸琛ㄦ牸鐨勭涓�琛� - if (this.selectedRowIndex !== 0) { - // 鐐瑰嚮杩囩▼涓� 閿佷綇涓婁笅鏉℃寜閽� 鍦ㄨ缃畬鍥惧舰閰嶇疆椤瑰悗瑙i攣 - this.flag.banTouch = 1 - - //寰楀埌涓婁竴琛屾暟鎹储寮� - this.selectedRowIndex = this.selectedRowIndex - 1 - //璇锋眰鏁版嵁 鏀瑰彉exceedingData - // this.setinfo(this.selectedRowIndex); - - // 寰楀埌涓婁竴琛岀殑鏁版嵁 - this.tableCurrentRowData = this.displayData[this.selectedRowIndex] - - let params = index.requestGetParms( - this.tableCurrentRowData.name, - this.tableCurrentRowData.beginTime, - this.tableCurrentRowData.endTime - ) - this.loading.afterButton = true - this.$http.get('/dust/history', { params: params }).then((response) => { - // 淇濆瓨杩斿洖鐨勮秴鏍囨暟鎹� - this.dialog.historyData = response.data.data - this.dialog.exceptionTotal = response.data.data.length - // 閫昏緫澶勭悊 - this.timeAndDataProcessed() - this.loading.afterButton = false - }) - } - }, - - /** - * description锛氫粠瀛愮粍浠惰幏寰楁煇绔欑偣璇ユ椂娈电殑寮傚父鏁版嵁 - * @createTime:2023-08-18 - */ - backExceptionData(val1, val2) { - this.displayData = val1 - this.total = val2 - }, - - // 鏌ヨ寮傚父鏁版嵁鐨勭珯鐐瑰悕瀛楀拰鏁伴噺 - queryExceptionSite(url,siteName, exceptionType) { - let params = {} - params['beginTime'] = this.beginTime - params['endTime'] = this.endTime - params['exceptionType'] = exceptionType - if(siteName){ - params['siteName'] = this.siteName - } - return this.$http.get(url, { params: params }) - }, - - - - /** - * description锛氬綋鐢ㄦ埛鏀瑰彉鏌ヨ鐨勬椂闂村尯闂存椂锛屼細鏍规嵁璇ュ尯闂存煡璇㈠悇寮傚父鐨勭珯鐐癸紝鏌ヨ璇ユ椂闂村尯闂寸殑鍚勫紓甯告暟閲� - * @createTime:2023-08-18 - */ - getShopNames() { - /* 鏌ヨ寮傚父鐨勭珯鐐� */ - - this.queryExceptionSite('/dust/sitenamecode',this.siteName,0) - .then((result) => { - this.exception.exception0 = result.data.data - if (result.data.data.length == 0) { - this.isNoData.exception0 = true - return - } - this.isNoData.exception0 = false - }) - this.queryExceptionSite('/dust/sitenamecode',this.siteName,1) - .then((result) => { - this.exception.exception1 = result.data.data - if (result.data.data.length == 0) { - this.isNoData.exception1 = true - return - } - this.isNoData.exception1 = false - }) - this.queryExceptionSite('/dust/sitenamecode',this.siteName,2) - .then((result) => { - this.exception.exception2 = result.data.data - if (result.data.data.length == 0) { - this.isNoData.exception2 = true - return - } - this.isNoData.exception2 = false - }) - - this.queryExceptionSite('/dust/sitenamecode',this.siteName,3) - .then((result) => { - this.exception.exception3 = result.data.data - if (result.data.data.length == 0) { - this.isNoData.exception3 = true - return - } - this.isNoData.exception3 = false - }) - - this.queryExceptionSite('/dust/sitenamecode',this.siteName,4) - .then((result) => { - this.exception.exception4 = result.data.data - if (result.data.data.length == 0) { - this.isNoData.exception4 = true - return - } - this.isNoData.exception4 = false - }) - this.queryExceptionSite('/dust/sitenamecode',this.siteName,5) - .then((result) => { - this.exception.exception5 = result.data.data - if (result.data.data.length == 0) { - this.isNoData.exception5 = true - return - } - this.isNoData.exception5 = false - }) - this.queryExceptionSite('/dust/sitenamecode',this.siteName,6) - .then((result) => { - this.exception.exception6 = result.data.data - if (result.data.data.length == 0) { - this.isNoData.exception6 = true - return - } - this.isNoData.exception6 = false - }) - this.queryExceptionSite('/dust/sitenamecode',this.siteName,7) - .then((result) => { - this.exception.exception7 = result.data.data - if (result.data.data.length == 0) { - this.isNoData.exception7 = true - return - } - this.isNoData.exception7 = false - }) - - - /* 寮傚父寮傚父鏁伴噺 */ - this.queryExceptionSite('/dust/exceptionnum',this.siteName,0) - .then((result) => { - this.exception.exception0Num = result.data.data - }) - this.queryExceptionSite('/dust/exceptionnum',this.siteName,1) - .then((result) => { - this.exception.exception1Num = result.data.data - }) - this.queryExceptionSite('/dust/exceptionnum',this.siteName,2) - .then((result) => { - this.exception.exception2Num = result.data.data - }) - this.queryExceptionSite('/dust/exceptionnum',this.siteName,3) - .then((result) => { - this.exception.exception3Num = result.data.data - }) - this.queryExceptionSite('/dust/exceptionnum',this.siteName,4) - .then((result) => { - this.exception.exception4Num = result.data.data - }) - this.queryExceptionSite('/dust/exceptionnum',this.siteName,5) - .then((result) => { - this.exception.exception5Num = result.data.data - }) - this.queryExceptionSite('/dust/exceptionnum',this.siteName,6) - .then((result) => { - this.exception.exception6Num = result.data.data - }) - this.queryExceptionSite('/dust/exceptionnum',this.siteName,7) - .then((result) => { - this.exception.exception7Num = result.data.data - }) - }, - - /** - * description锛氳姹傚紓甯哥殑搴楅摵鍚嶅瓧 - * @param锛氬紓甯哥被鍨嬶紝寮�濮嬫椂闂达紝缁撴潫鏃堕棿 - * @returns锛� 寮傚父鐨勬暟鎹� - */ - // getSiteNameByExceptionType(exception, beginT, endT) { - // let param = { - // exceptionType: exception, - // beginTime: beginT, - // endTime: endT - // }; - - // this.$http.get('/dust/sitenamecode', { params: param }).then((res) => { - // return res.data.data; - // }); - // return; - // }, - - /** - * description锛氭樉绀哄璇濇,杩斿洖璇ュ紓甯告椂闂存鐨勬墍鏈夋暟鎹� - * @param锛氱偣鍑烩�樻煡鐪嬭鎯呪�欑殑璇ヨ鎵�鏈夊瓧娈垫暟鎹� - * @createTime:2023-08-18 - */ - showDialog(row) { - // 鎵撳紑瀵硅瘽妗� - this.dialogTableVisible = true - - // 淇濆瓨褰撳墠琛屾暟鎹� - this.tableCurrentRowData = row - - // 鑾峰彇褰撳墠琛岀殑绱㈠紩 - this.selectedRowIndex = this.displayData.indexOf(row) - - //鏍规嵁褰撳墠琛岀殑缂栧彿锛岃捣濮嬫椂闂存潵 璇锋眰寮傚父鏁版嵁 - // 瀵硅姹傚埌鐨勬暟鎹繘琛岄灏炬嫾鎺� - // 寰楀埌鍓嶅悗瀹屾暣鏁版嵁杩涜缁樺埗鍥惧舰 - this.loading.lineChart = true - let params = {} - if (row.name) { - params['siteName'] = row.name - } - if (row.beginTime) { - params['beginTime'] = row.beginTime - } - if (row.endTime) { - params['endTime'] = row.endTime - } - - this.$http.get('/dust/history', { params: params }).then((response) => { - this.dialog.historyData = response.data.data - this.dialog.exceptionTotal = response.data.data.length - // 閫昏緫澶勭悊 - this.timeAndDataProcessed() - }) - }, - /** - * description锛氭潯浠舵煡璇㈠紓甯哥殑鏁版嵁 - * @createTime:2023-08-18 - */ - handleSubmit() { - if (this.isExceedOneMonth(this.beginTime, this.endTime)) { - alert('鏃堕棿璺ㄥ害涓嶈兘瓒呰繃涓�涓湀') - return - } - // 鏇存柊寮傚父鍒嗘瀽 - this.getShopNames() - - this.loading.queryButton = true - this.flag.originClick = 0 - this.loading.tableLoading = true - let params = {} - params['page'] = this.currentPage - params['pageSize'] = this.pageSize - if (this.siteName) { - params['siteName'] = this.siteName - } - if (this.form.exceptionName.length != 0) { - params['exceptionType'] = this.form.exceptionName.join() - } - params['beginTime'] = this.beginTime - params['endTime'] = this.endTime - - this.$http.get('/dust/exceptiondata', { params: params }).then((response) => { - // 淇濆瓨杩斿洖鐨� - // this.tableData = response.data.data.rows; - this.displayData = response.data.data.rows - this.loading.queryButton = false - this.loading.tableLoading = false - - if (response.data.data.total == 0) { - ElMessage('璇ユ椂娈垫棤鏁版嵁') - this.isTableShow = false - return - } - this.isTableShow = true - this.total = response.data.data.total - // 绉婚櫎绌烘暟鎹姸鎬� - }) - }, - - /** - * description锛氭墦寮�椤甸潰榛樿鍔犺浇鏈�杩戜竴鍛ㄧ殑寮傚父鏁版嵁 - * @createTime:2023-08-18 - */ - backExceptionDataAWeekAgo() { - this.loading.tableLoading = true - let params = {} - if (this.siteName) { - params['siteName'] = this.siteName - } - if (this.form.exceptionName) { - params['exceptionType'] = this.form.exceptionName - } - params['beginTime'] = this.beginTime - params['endTime'] = this.endTime - - this.$http.get('/dust/exceptiondata', { params: params }).then((response) => { - // 淇濆瓨杩斿洖鐨� - // this.tableData = response.data.data.rows; - this.displayData = response.data.data.rows - this.loading.tableLoading = false - if (response.data.data.total == 0) { - ElMessage('璇ユ椂娈垫棤鏁版嵁') - this.isTableShow = false - return - } - this.isTableShow = true - this.total = response.data.data.total - }) - }, - - /** - * description锛氬皢涓浗鏍囧噯鏃堕棿杞负鎸囧畾鏍煎紡(璇ョ粍浠惰繑鍥炵殑鏍囧噯鏃堕棿鐨勬牸寮忥紝鎵�浠ュ繀椤荤殑鍔犺繖涓嚱鏁�) - * @createTime:2023-08-17 - */ - giveTime(val) { - this.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss') - this.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss') - }, - - // 鍔熻兘锛氳〃鏍奸珮搴︽牴鎹唴瀹硅嚜閫傚簲 - calTableHeight() { - const h1 = this.$refs.h1.$el.offsetHeight - const h2 = this.$refs.h2.$el.offsetHeight - const h3 = this.$refs.h3.$el.offsetHeight - const h4 = this.$refs.h4.$el.offsetHeight - // 鍏朵腑涓�涓�40鏄洅瀛愮殑鎬诲杈硅窛 - this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - ${h3}px - ${h4}px - 40px - var(--el-main-padding) * 2)` - }, - - // 椤靛ぇ灏忔敼鍙樻椂瑙﹀彂 - handleSizeChange(val) { - this.pageSize = val - - // 鏀瑰彉姣忛〉鏄剧ず鏁扮洰鏃惰烦鍒板綋鍓嶉〉 - this.handleCurrentChange(1) - }, - - // 椤靛彿鏀瑰彉鏃惰Е鍙� - /** - * description锛氶〉鍙锋敼鍙樻椂瑙﹀彂 - * @param锛� 褰撳墠椤碉紝鏍囪浣嶏紙0浠h〃鏄偣鍑烩�樻煡璇⑩�欒Е鍙戠殑锛�1浠h〃鏃剁偣鍑诲紓甯哥珯鐐规枃鏈寜閽Е鍙戠殑锛� - * @createTime:2023-08-17 - * @returns锛� - */ - handleCurrentChange(val) { - // 灏嗗綋鍓嶉〉鍙风粰currentPage - this.currentPage = val - - // 椤甸潰鍙樺寲鏃惰皟鐢� 鏌ヨ鏁版嵁鍑芥暟 - if (this.flag.originClick == 0) { - this.handleSubmit() - } else if (this.flag.originClick == 1) { - const startIndex = (val - 1) * this.pageSize - const endIndex = startIndex + this.pageSize - - this.displayData = this.tableData.slice(startIndex, endIndex) - } - }, - // 琛ㄦ牸搴忓彿閫掑 - indexMethod1(index) { - return index + 1 + (this.currentPage - 1) * this.pageSize - }, - // 琛ㄦ牸搴忓彿閫掑 - indexMethod2(index) { - return index + 1 - } - } -} -</script> - -<template> - <div class="all-container"> - <el-row ref="h1"> - <el-col> - <el-form :inline="true"> - <div class="head-container-text"> - <el-form-item> - <AreaAndmonitorType></AreaAndmonitorType> - </el-form-item> - <el-form-item> - <span class="site-text"> 鐐逛綅鍚嶇О:</span> - <span> {{this.siteName}}</span> - </el-form-item> - - <el-form-item> - <TimeShortCuts timeType="day" @submit-time="giveTime" :beginAndEndTime="[form.beginTime,form.endTime]"></TimeShortCuts> - </el-form-item> - - <el-form-item> - <ButtonClick - content="椋庨櫓璇勪及" - type="warning" - color="rgb(12,104,165)" - :loading="loading.queryButton" - :havaIcon="false" - @do-search="handleSubmit" - ><img src="@/assets/exception/riskButton.png" height="24" class="img-button" - /></ButtonClick> - </el-form-item> - </div> - </el-form> - </el-col> - </el-row> - - <!-- 鏃堕棿鎽樿 --> - <el-row class="head-describtion-text" ref="h2"> - <el-row> - <span> 閲戝北鍖� {{ beginTime }} 鈥斺�� {{ endTime }} 鎵皹鐩戞祴寮傚父淇℃伅姹囨��</span> - </el-row> - </el-row> - - <!-- 寮傚父鍒嗘瀽 --> - <el-row ref="h3"> - <el-col> - <el-card class="card-container"> - <template #header> - <div class="card-header">寮傚父鍒嗘瀽</div> - </template> - - <el-row :gutter="20" class="card-row"> - <el-col :span="6"> - <AnalysisCard - :site-name="cardRow1[0].siteName" - :exception-type="cardRow1[0].exceptionType" - :begin-time="beginTime" - :end-time="endTime" - :exception-name="cardRow1[0].exceptionName" - :site-num="cardRow1[0].siteNum" - :exception-num="cardRow1[0].exceptionNum" - :exception-all-num="exceptionAllNum" - :site-num-all="siteTotal" - :isNoDataStatus="cardRow1[0].isNoDataStatus" - @get-abnormal-data-by-click="getAbnormalDataByClick" - > - <img src="@/assets/exception/exception4.png" height="24" width="24" /> - </AnalysisCard> - </el-col> - <el-col :span="6"> - <AnalysisCard - :site-name="cardRow1[1].siteName" - :exception-type="cardRow1[1].exceptionType" - :begin-time="beginTime" - :end-time="endTime" - :exception-name="cardRow1[1].exceptionName" - :site-num="cardRow1[1].siteNum" - :exception-num="cardRow1[1].exceptionNum" - :exception-all-num="exceptionAllNum" - :site-num-all="siteTotal" - :isNoDataStatus="cardRow1[1].isNoDataStatus" - @get-abnormal-data-by-click="getAbnormalDataByClick" - > - <img src="@/assets/exception/exception5.png" height="24" width="24" /> - </AnalysisCard> - </el-col> - <el-col :span="6"> - <AnalysisCard - :site-name="cardRow1[2].siteName" - :exception-type="cardRow1[2].exceptionType" - :begin-time="beginTime" - :end-time="endTime" - :exception-name="cardRow1[2].exceptionName" - :site-num="cardRow1[2].siteNum" - :exception-num="cardRow1[2].exceptionNum" - :exception-all-num="exceptionAllNum" - :site-num-all="siteTotal" - :isNoDataStatus="cardRow1[2].isNoDataStatus" - @get-abnormal-data-by-click="getAbnormalDataByClick" - > - <img src="@/assets/exception/exception6.png" height="24" width="24" /> - </AnalysisCard> - </el-col> - <el-col :span="6"> - <AnalysisCard - :site-name="cardRow1[3].siteName" - :exception-type="cardRow1[3].exceptionType" - :begin-time="beginTime" - :end-time="endTime" - :exception-name="cardRow1[3].exceptionName" - :site-num="cardRow1[3].siteNum" - :exception-num="cardRow1[3].exceptionNum" - :exception-all-num="exceptionAllNum" - :site-num-all="siteTotal" - :isNoDataStatus="cardRow1[3].isNoDataStatus" - @get-abnormal-data-by-click="getAbnormalDataByClick" - > - <img src="@/assets/exception/exception7.png" height="24" width="24" /> - </AnalysisCard> - </el-col> - </el-row> - - <el-row :gutter="20"> - <el-col :span="6"> - <AnalysisCard - :site-name="cardRow2[0].siteName" - :exception-type="cardRow2[0].exceptionType" - :begin-time="beginTime" - :end-time="endTime" - :exception-name="cardRow2[0].exceptionName" - :site-num="cardRow2[0].siteNum" - :exception-num="cardRow2[0].exceptionNum" - :exception-all-num="exceptionAllNum" - :site-num-all="siteTotal" - :isNoDataStatus="cardRow2[0].isNoDataStatus" - @get-abnormal-data-by-click="getAbnormalDataByClick" - > - <img src="@/assets/exception/exception0.png" height="24" width="24" /> - </AnalysisCard> - </el-col> - <el-col :span="6"> - <AnalysisCard - :site-name="cardRow2[1].siteName" - :exception-type="cardRow2[1].exceptionType" - :begin-time="beginTime" - :end-time="endTime" - :exception-name="cardRow2[1].exceptionName" - :site-num="cardRow2[1].siteNum" - :exception-num="cardRow2[1].exceptionNum" - :exception-all-num="exceptionAllNum" - :site-num-all="siteTotal" - :isNoDataStatus="cardRow2[1].isNoDataStatus" - @get-abnormal-data-by-click="getAbnormalDataByClick" - > - <img src="@/assets/exception/exception1.png" height="24" width="24" /> - </AnalysisCard> - </el-col> - <el-col :span="6"> - <AnalysisCard - :site-name="cardRow2[2].siteName" - :exception-type="cardRow2[2].exceptionType" - :begin-time="beginTime" - :end-time="endTime" - :exception-name="cardRow2[2].exceptionName" - :site-num="cardRow2[2].siteNum" - :exception-num="cardRow2[2].exceptionNum" - :exception-all-num="exceptionAllNum" - :site-num-all="siteTotal" - :isNoDataStatus="cardRow2[2].isNoDataStatus" - @get-abnormal-data-by-click="getAbnormalDataByClick" - > - <img src="@/assets/exception/exception2.png" height="24" width="24" /> - </AnalysisCard> - </el-col> - <el-col :span="6"> - <AnalysisCard - :site-name="cardRow2[3].siteName" - :exception-type="cardRow2[3].exceptionType" - :begin-time="beginTime" - :end-time="endTime" - :exception-name="cardRow2[3].exceptionName" - :site-num="cardRow2[3].siteNum" - :exception-num="cardRow2[3].exceptionNum" - :exception-all-num="exceptionAllNum" - :site-num-all="siteTotal" - :isNoDataStatus="cardRow2[3].isNoDataStatus" - @get-abnormal-data-by-click="getAbnormalDataByClick" - > - <img src="@/assets/exception/exception3.png" height="24" width="24" /> - </AnalysisCard> - </el-col> - </el-row> - </el-card> - </el-col> - </el-row> - - <el-button-group> - <el-button color="#626aef" plain @click="isTableShow = true" v-show="!isTableShow"> - 鏄剧ず寮傚父娓呭崟<el-icon class="i-ep-Arrow"><i-ep-ArrowUp /></el-icon> - </el-button> - <el-button color="#626aef" plain @click="isTableShow = false" v-show="isTableShow"> - 闅愯棌寮傚父娓呭崟<el-icon class="i-ep-Arrow"><i-ep-ArrowDown /></el-icon> - </el-button> - </el-button-group> - - <!-- 琛ㄦ牸 --> - <el-row v-show="isTableShow"> - <el-col> - <el-table - ref="table" - :data="displayData" - :height="tableHeight" - :highlight-current-row="true" - size="default" - v-loading="loading.tableLoading" - border - > - <el-table-column - type="index" - label="搴忓彿" - width="60px" - align="center" - fixed - :index="indexMethod1" - /> - <el-table-column prop="name" label="鐐逛綅鍚嶇О" show-overflow-tooltip /> - <el-table-column prop="mnCode" label="璁惧缂栫爜" align="center" show-overflow-tooltip /> - <el-table-column prop="exception" label="寮傚父绫诲瀷" align="center" show-overflow-tooltip /> - <el-table-column prop="region" label="鍖哄幙" align="center" show-overflow-tooltip /> - <el-table-column prop="beginTime" label="寮�濮嬫椂闂�" align="center" show-overflow-tooltip /> - <el-table-column prop="endTime" label="缁撴潫鏃堕棿" align="center" show-overflow-tooltip /> - <el-table-column - prop="typename" - label="鍦烘櫙" - align="center" - width="82" - show-overflow-tooltip - /> - <el-table-column prop="address" label="鍦板潃" align="center" show-overflow-tooltip /> - <el-table-column prop="dutyCompany" label="杩愮淮鍟�" align="center" show-overflow-tooltip /> - - <el-table-column label="鎿嶄綔" align="center"> - <template #default="{ row }"> - <el-button type="primary" class="table-button" @click="showDialog(row)" - >鏌ョ湅璇︽儏</el-button - > - </template> - </el-table-column> - </el-table> - - <el-pagination - ref="h4" - background - layout="total, sizes, prev, pager, next, jumper" - v-model:current-page="currentPage" - v-model:page-size="pageSize" - :total="total" - :page-sizes="[10, 20, 50, 100]" - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - > - </el-pagination> - </el-col> - </el-row> - - <!-- 瀵硅瘽妗� --> - <el-dialog - class="exception-dialog" - v-model="dialogTableVisible" - draggable - align-center - height="700px" - width="700px" - > - <!-- 澶� --> - <template #header> - <div class="diag-head"> - <div class="diag-head-text"> - <div><span class="diag-head-text1">绔欑偣鍚嶇О锛�</span>{{ tableCurrentRowData.name }}</div> - <div> - <span class="diag-head-text1">璁惧缂栧彿锛�</span>{{ tableCurrentRowData.mnCode }} - </div> - <div> - <span class="diag-head-text1">杩愮淮鍟嗭細</span>{{ tableCurrentRowData.dutyCompany }} - </div> - - - <div> - <span class="diag-head-text1">寮傚父鏃堕棿娈碉細</span>{{ tableCurrentRowData.beginTime }} ~ - {{ tableCurrentRowData.endTime }} - </div> - </div> - - - <div class="chart-jump-button"> - <el-button - type="danger" - :loading="loading.preButton" - :disabled="dialog.isPreCantouch || flag.banTouch" - @click="getNextRowData" - >涓婃潯寮傚父</el-button - > - <el-button - type="danger" - :loading="loading.afterButton" - :disabled="dialog.isNextCantouch || flag.banTouch" - @click="getPreviousRowData" - >涓嬫潯寮傚父</el-button - > - </div> - </div> - </template> - - <!-- :option="dialog.option" --> - - <!-- 鍥惧舰 --> - <DustLineChart - :option="dialog.option" - :is-open-dialog="dialogTableVisible" - v-loading="loading.lineChart" - ></DustLineChart> - - <!-- 琛ㄦ牸 --> - <div> - <el-table :data="dialog.historyData" size="default" height="200" border> - <el-table-column - type="index" - label="搴忓彿" - width="60px" - align="center" - fixed - :index="indexMethod2" - ></el-table-column> - <!-- <el-table-column fixed prop="name" label="绔欑偣鍚嶇О" show-overflow-tooltip /> - <el-table-column prop="mnCode" label="璁惧缂栧彿" align="center" show-overflow-tooltip /> - <el-table-column prop="dutyCompany" label="杩愮淮鍟�" align="center" show-overflow-tooltip /> --> - <el-table-column prop="lst" label="閲囬泦鏃堕棿" align="center" show-overflow-tooltip /> - <el-table-column - prop="dustValue" - label="TSP(mg/m鲁)" - align="center" - show-overflow-tooltip - /> - </el-table> - </div> - <template #footer> - <el-tag type="success" class="mx-1" effect="dark" round - ><span class="table-line-lable" v-show="tableCurrentRowData.exceptionType == '0'" - >缂哄け鏁版嵁锛� - </span> - <span - v-show=" - tableCurrentRowData.exceptionType == '1' || - tableCurrentRowData.exceptionType == '2' || - tableCurrentRowData.exceptionType == '3' || - tableCurrentRowData.exceptionType == '4' - " - >寮傚父鏁版嵁锛�</span - > - <span class="table-line-num">{{ dialog.exceptionTotal }}鏉�</span> - <span v-show="tableCurrentRowData.exceptionType == '0'"> (閫昏緫璁$畻)</span> - </el-tag> - </template> - </el-dialog> - </div> -</template> - -<style lang="scss" scoped> -.el-row { - margin-left: 10px; -} - -/* 鏉′欢鏌ヨ妯″潡鐨勬牱寮� */ -.el-form { - margin: 10px; -} -img { - margin-right: 5px; -} -.head-container-search { - float: right; -} - -.head-describtion-text { - justify-content: flex-end; - margin-bottom: 2px; - margin-right: 20px; - font-size: 14px; - color: gray; -} -.button-set { - margin: 10px; -} -/* 鏉′欢鏌ヨ妯″潡缁撴潫 */ - -/* 寮傚父鍒嗘瀽妯″潡鐨勬牱寮� */ - -.card-text1 { - /* 榛戜綋鐨勫紓甯稿悕瀛楅儴鍒� */ - margin: 10px; -} -.card-text1 + div { - /* 榛戜綋鐨勫紓甯稿悕瀛椾笅闈㈢殑 */ - margin: 12px; -} -.card-exception-buttom { - /* 寮傚父绔欑偣鏂囨湰鎸夐挳鍖哄煙 */ - padding: 11px; -} -.card-header { - margin-left: 5px; - font-size: 18px; - font-weight: bold; -} -.card-content-unnormal { - min-height: 200px; - border: 2px solid #ffcf8b; - border-radius: 20px; -} -.card-content-normal { - min-height: 200px; - border: 2px solid red; - border-radius: 20px; -} - -.card-header-text { - font-size: 16px; - font-weight: bold; - margin-top: 4px; - margin-left: 4px; -} -.card-content-text { - white-space: nowrap; -} -.card-exceptionname-text1 { - /* 寮傚父绔欑偣鍗犳瘮 */ - font-size: 14px; - white-space: nowrap; -} - -.card-exceptionname-text2 { - /* 寮傚父鏁板崰姣旂殑澶栬竟璺� */ - font-size: 14px; - white-space: nowrap; -} -.text-blank { - /* 閫楀彿 */ - margin-right: 10px; - color: #000000; -} -.card-row { - margin-bottom: 10px; -} - -/* 寮傚父鍒嗘瀽妯″潡缁撴潫 */ - -/* 闅愯棌琛ㄦ牸鎸夐挳缁勬牱寮� */ -.el-button-group { - margin: 10px 0px 10px 10px; -} -.i-ep-Arrow { - margin-left: 6px; - margin-bottom: 2px; - font-size: 1.2em; -} -/* 闅愯棌琛ㄦ牸鎸夐挳缁勬牱寮忕粨鏉� */ - -/* 琛ㄦ牸妯″潡鐨勬牱寮� */ -.el-table { - color: #333333; -} -/* 琛ㄦ牸妯″潡缁撴潫 */ - -/* 鏌ョ湅璇︽儏瀵硅瘽妗嗘ā鍧楃殑鏍峰紡 */ - -.diag-head { - /* 瀵硅瘽妗嗗ご閮ㄥ尯鍩� */ - min-height: 200px; -} -.diag-head-text1 { - /* 瀵硅瘽妗嗗ご閮ㄧ殑灞炴�у瓧娈靛姞绮� */ - font-weight: bold; -} - -.diag-head-text > div { - /* 瀵硅瘽妗嗗紓甯告椂闂存 */ - margin-top: 15px; -} -.diag-head-text { - margin: 10px; - padding: 10px; - background: linear-gradient(90deg, #00c9ff 0%, #92fe9d 100%); - border: 2px solid #7bc0fc; -} -.chart-jump-button { - display: flex; - justify-content: right; -} - -.mx-1 { - position: absolute; - left: 10px; - bottom: 10px; -} -.site-text{ - color: #333333; - font-weight: bold; - font-size: 14px; - margin-right: 10px; -} -/* 鏌ョ湅璇︽儏瀵硅瘽妗嗘ā鍧楃粨鏉� */ -</style> diff --git a/src/views/risk_assessment/DataIndexRank.vue b/src/views/risk_assessment/DataIndexRank.vue index ab31486..04e205d 100644 --- a/src/views/risk_assessment/DataIndexRank.vue +++ b/src/views/risk_assessment/DataIndexRank.vue @@ -95,14 +95,15 @@ } } - // 鍦ㄧ嚎鐜囷紝鏈夋晥鐜� 涓嶆弧瓒虫爣鍑嗘椂 鍙橀鑹� if (columnIndex == 7) { - if (!this.cmpp(row.dayOnline, '90%')) { + if (row.dayOnline < 0.9) { return 'red-color' } } + + if (columnIndex == 8) { - if (!this.cmpp(row.dayValid, '90%')) { + if (row.dayValid < 0.9) { return 'red-color' } } @@ -171,9 +172,10 @@ }) }, openDetail(row) { - const encodedSiteName = encodeURIComponent(row.siteName) - let titleName = '绔欑偣椋庨櫓鏁版嵁璇︽儏' - this.$router.push(`/detail/${encodedSiteName}/${this.form.month}/${titleName}`) + const encodedSiteName = encodeURIComponent(row.name) + const timeType = '0' + const jumpPage = '2' + this.$router.push(`/exceptionDetail/${encodedSiteName}/${row.lst}/${timeType}/${jumpPage}`) } } } diff --git a/src/views/risk_assessment/DataRiskModel.vue b/src/views/risk_assessment/DataRiskModel.vue index 5f1d32c..b66e641 100644 --- a/src/views/risk_assessment/DataRiskModel.vue +++ b/src/views/risk_assessment/DataRiskModel.vue @@ -1,712 +1,27 @@ -<!-- 鏃ュ潎鍊� --> - <script> -import InputSearch from '@/sfc/InputSearch.vue' -import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue' -import DustRadarChart from './components/DustRadarChart.vue' -import exceptionApi from '@/api/exceptionApi.js' -import LineChart from './components/LineChart.vue' -import index from '@/utils/risk_estimate_common_function/index.js' -import ButtonClick from '@/sfc/ButtonClick.vue' -import dayjs from 'dayjs' -import MonthSelect from '@/sfc/MonthSelect.vue' -import riskApi from '@/api/risk/riskApi.js' -import riskValue from '@/utils/risk_estimate_common_function/riskValue.js' -import lineChart from '@/utils/chartFunction/lineChart.js' -import siteInfo from '@/api/site/siteInfo.js' -export default { - components: { - LineChart, - InputSearch, - AreaAndmonitorType, - DustRadarChart, - ButtonClick, - MonthSelect - }, - data() { - return { - isNoData: false, - loading: false, - screenLoading: false, - parentDataFlag: false, - chartData: [], - chartData1: {}, //淇濆瓨鏌ヨ鐨勭粨鏋� - chartData2: {}, - chartData3: {}, - chartData4: {}, - begin: '', //寮�濮嬫椂闂� - end: '', //缁撴潫鏃堕棿 - - form: { - // 绔欑偣鍚嶇О - name: '', - // 璁惧缂栧彿 - number: '3234', - // 寮�濮嬫椂闂� - beginTime: '', - // 缁撴潫鏃堕棿 - endTime: '' - }, - month: '', - - // 鎶樼嚎鍥鹃厤缃」 - option: {}, - // 鏁版嵁娓呭崟 - bill: { - min: '', - max: '', - avg: '', - online: 100, - valid: 100, - exceeding: 0, - - // 鍏稿瀷寮傚父澶嶇幇鐜� - exceptionRecurrence: 0, - // 寮傚父绫诲瀷鎹仛闆嗗害 - exceptionTypeAggregation: 0 - }, - - // 鏌ヨ鎸夐挳鍔犺浇鏁堟灉 - queryButton: false, - - // 椋庨櫓鍊兼帓鍚嶅墠鍗佺殑绔欑偣 - top_10_sites_with_risk_values: [{ name: '', riskValue: 0.2 }], - // 椋庨櫓鍊� - weight: '', - // 鏃犳暟鎹厤缃椂闂存 - areaColor: [], - // 鏌愮珯鐐圭殑鍩烘湰淇℃伅 - siteInfo: {}, - - // 寮傚父椋庨櫓鐨勫�� - exceptionRisk: { - // 鍦ㄧ嚎鐜囬闄� - onlineRisk: '', - // 鏈夋晥鐜囬闄� - validRisk: '', - // 瓒呮爣椋庨櫓 - exceedRisk: '', - // 寮傚父绫诲瀷鑱氶泦搴� - exceptionTypeAggregation: '', - // 鍏稿瀷寮傚父澶嶇幇鐜� - typicalExceptionRepetitionRate:'' - } - } - }, - mounted() { - // // 鍔犺浇椋庨櫓鍊兼渶楂樼殑绔欑偣鏁版嵁 - this.ShowDefaultData() - }, - computed: { - // 椋庨櫓绛夌骇 - riskGradeAndAdvice() { - return riskApi.getRiskAdvice(this.weight) - } - }, - - methods: { - - - - // 鏌ヨ绔欑偣缁熻淇℃伅 - async querySiteStaticsInfo(row) { - this.form.name = row.siteName - // 鏇存柊缁熻鏁版嵁 - await this.getAnalysisData() - // 璁$畻椋庨櫓鍊� - this.calRiskValue() + import CompDataRiskModel from '@/views/risk_assessment/components/CompDataRiskModel.vue' + export default { + components:{ + CompDataRiskModel }, + data() { + return{ - // 鏍煎紡鍖栨湀浠� - giveMonth(val) { - //灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮�(璇ョ粍浠惰繑鍥炵殑鏍囧噯鏃堕棿鐨勬牸寮忥紝鎵�浠ュ繀椤荤殑鍔犺繖涓嚱鏁�) - this.month = dayjs(val).format('YYYY-MM-DD') - // 鍚屾椂鏇存柊寮�濮嬪拰缁撴潫鏃堕棿 - this.form.beginTime = dayjs(this.month).startOf().format('YYYY-MM-DD HH:mm:ss') - this.form.endTime = dayjs(this.month).endOf('month').format('YYYY-MM-DD HH:mm:ss') - }, - - /** - * 椋庨櫓璇勪及鎸夐挳 - * @param锛� - * @returns锛� - */ - riskAssessment() { - // 鏇存柊鎺掑悕娓呭崟 - this.getRiskRank() - // 鏇存柊璇ョ珯鐐圭殑鎵�灞炲満鏅拰杩愮淮鍟� - this.getSiteInfo(this.form.number) - // 鏇存柊鍒嗘瀽鏁版嵁 - this.getAnalysisData() - // 璁$畻椋庨櫓鍊� - this.calRiskValue() - }, - - // 鏇存柊鍒嗘瀽鏁版嵁 - getAnalysisData() { - // 鏃ョ粺璁℃暟鎹� - this.fetchDayAnalysisData() - // 寮傚父鏁版嵁 - // this.fetchExceptionAnalysisData() - }, - - findObjectByPropertyValue(array, property, value) { - return array.find((obj) => obj[property] === value) - }, - - // 姝ら〉闈㈡墦寮�鏃� - ShowDefaultData() { - // 榛樿鍔犺浇灞曠ず鐨勫唴瀹� - this.updateOriginPage() - }, - - // 鍔犺浇榛樿灞曠ず鐨勫唴瀹� - async updateOriginPage() { - this.screenLoading = true - // 鏇存柊鎺掑悕娓呭崟锛屽苟寰楀埌椋庨櫓鍊兼渶楂樼珯鐐� - let arr = await this.getRiskRank() - this.form.name = arr[0] - this.form.number = arr[1] - this.screenLoading = false - - // 鏇存柊璇ョ珯鐐圭殑鎵�灞炲満鏅拰杩愮淮鍟� - this.getSiteInfo(this.form.number) - // 鏇存柊鏃ョ粺璁℃暟鎹� - this.getAnalysisData() - // 璁$畻椋庨櫓鍊� - this.calRiskValue() - - }, - - - /** - * 寰楀埌鏁版嵁椋庨櫓鍊� 锛屽苟璁$畻椋庨櫓鍊� - * @param锛� - * @returns锛� - */ - calRiskValue() { - riskApi.queryRiskValue(this.form.number, this.month, 'month').then((response) => { - - - const riskValue = response.data.data[0] - this.exceptionRisk.onlineRisk = riskValue.onlineRisk - this.exceptionRisk.validRisk = riskValue.validRisk - this.exceptionRisk.exceedRisk = riskValue.exceedRisk - this.exceptionRisk.exceptionTypeAggregation = riskValue.exceptionTypeAggregation - this.exceptionRisk.typicalExceptionRepetitionRate = riskValue.typicalExceptionRepetitionRate - - this.weight = riskValue.calRiskValue(riskValue).toFixed(2) - }) - }, - - // 鏍规嵁鐩墠绔欑偣锛屾湀浠斤紝鏌ユ姌绾垮浘鏃ョ粺璁℃暟鎹� - fetchDayAnalysisData() { - let params = {} - if (this.form.name) { - params['siteName'] = this.form.name - } - if (this.form.beginTime) { - params['beginTime'] = this.form.beginTime - } - if (this.form.endTime) { - params['endTime'] = this.form.endTime - } - this.loading = true - this.queryButton = true - exceptionApi - .analysisdata(this.form.name, this.form.beginTime, this.form.endTime, 'day') - .then((response) => { - this.chartData = response.data.data - this.loading = false - this.queryButton = false - if (response.data.data.length == 0) { - this.isNoData = true - return - } - // 鍒嗘瀽鏁版嵁涓殑鏈�鏃╂椂闂� - let begin = this.chartData[0].lst - // 鍒嗘瀽鏁版嵁涓殑鏈�鏅氭椂闂� - let end = this.chartData[this.chartData.length - 1].lst - - // 绉婚櫎绌烘暟鎹姸鎬� - this.isNoData = false - - // 鏃犳暟鎹殑鏃堕棿娈� - let noDataTimeInteval = lineChart.backNoDataInteval(begin, end) - // 鏃犳暟鎹厤缃椂闂存 - this.areaColor = lineChart.getMarkArea(noDataTimeInteval) - this.setChart() - - - // 鎶樼嚎鍥炬暟鎹� - let temp = index.calBillData(this.chartData, begin, end) - this.bill.min = temp['min'] - this.bill.max = temp['max'] - - this.bill.avg = temp['avg'] - this.bill.online = temp['online'] - this.bill.valid = temp['valid'] - this.bill.exceeding = temp['exceeding'] - }) - }, - // 浼佷笟寮傚父缁熻鏁版嵁 - fetchExceptionAnalysisData() { - exceptionApi - .exceptiondata1({ - siteName: this.form.name, - beginTime: this.form.beginTime, - endTime: this.form.endTime - }) - .then((res) => { - let obj = index.calRecur(res.data.data) - this.bill.exceptionRecurrence = obj['exceptionRecurrence'] - this.bill.exceptionTypeAggregation = obj['exceptionTypeAggregation'] - }) - }, - - // 閫夋嫨鍏朵粬鍊肩被鍨嬫椂 - setChart() { - if (this.chartData.length) { - // 鏋勫缓鎶樼嚎鍥緓,y鏁版嵁 - let obj = lineChart.getLineChartXYData( - this.chartData, - this.form.beginTime, - this.form.endTime - ) - - this.chartData1 = { - x: obj.xData, - y: obj.yAvg - } - this.chartData2 = { - x: obj.xData, - y: obj.yOnline - } - this.chartData3 = { - x: obj.xData, - y: obj.yValid - } - this.chartData4 = { - x: obj.xData, - y: obj.yExceed - } } }, + mounted() { - // 寰楀埌鍓�10椋庨櫓鎺掑悕娓呭崟 - async getRiskRank() { - let response = await riskApi.queryRiskValue('', this.month, 'month') - - let tableData = riskValue.backComprehensiveRiskTableData(response.data.data) - - this.top_10_sites_with_risk_values = this.getTopRiskData(tableData, 10) - if (this.top_10_sites_with_risk_values.length != 0) { - // 琛ㄦ牸鎸夐闄╁�煎�掑彊鎺掑垪 - this.$nextTick(() => { - this.$refs.table.sort('riskValue', 'descending') - }) - // 淇濆瓨椋庨櫓鍊兼渶楂樼殑绔欑偣鍚嶇О鍜岃澶囩紪鍙� - let temp = [] - temp.push( - this.top_10_sites_with_risk_values[0].siteName, - this.top_10_sites_with_risk_values[0].mnCode - ) - return temp - } }, - /** - * 闄嶅簭鎺掑垪锛岃繑鍥為檷搴忓墠num鐨勫厓绱� - * @param锛� 瀵硅薄鏁扮粍锛岃繑鍥炵殑鏁伴噺 - */ - getTopRiskData(arr, num) { - // 鎸夌収riskValue闄嶅簭鎺掑垪 - arr.sort((a, b) => b.riskValue - a.riskValue) - // 鑾峰彇鍓峮um涓厓绱� - return arr.slice(0, num) - }, - /** - * 鏍规嵁璁惧缂栧彿鏌ヨ绔欑偣鍩烘湰淇℃伅 - * @param锛� 璁惧缂栧彿 - */ - getSiteInfo(mnCode) { - siteInfo.querySiteInfoByMnCode(mnCode).then(response => { - this.siteInfo = response.data.data[0] - }) - }, + methods: { - openDetail() { - const encodedSiteName = encodeURIComponent(this.form.name) - this.$router.push(`/exceptionDetail/${encodedSiteName}/${this.month}`) - } - } + } } </script> <template> - <el-form :inline="true" :model="form"> - <el-form-item class="form-item"> - <AreaAndmonitorType></AreaAndmonitorType> - </el-form-item> - <el-form-item class="form-item"> - <InputSearch - :site-name="form.name" - isNeedDefaultSite="0" - @submit-value="(n) => (form.name = n)" - @submit-mncode="(n) => (form.number = n)" - ></InputSearch> - </el-form-item> - - <el-form-item> - <MonthSelect @submit-value="giveMonth"></MonthSelect> - </el-form-item> - - <el-form-item> - <ButtonClick - content="椋庨櫓璇勪及" - type="primary" - :loading="queryButton" - @do-search="riskAssessment" - ></ButtonClick> - </el-form-item> - </el-form> - - - - <div v-loading="screenLoading" class="wait-name"> - <div class="chart-container" v-show="!isNoData && !screenLoading"> - - <el-card class="time-text" > - <h4>{{form.name}}</h4> - <br/> - <br/> - <span>鏁版嵁缁熻鏃舵锛歿{ form.beginTime }} ~ {{ form.endTime }}</span> - <el-tag class="mx-1" >鍦烘櫙</el-tag>{{siteInfo.typename}} - - <el-tag class="mx-1">杩愮淮鍟�</el-tag>{{siteInfo.dutyCompany}} - <el-button type="primary" size="default" class="exception-button" @click="openDetail"> - 鏁版嵁寮傚父璇︽儏 - </el-button> - </el-card> - - <el-row :gutter="10"> - <el-col :span="5"> - <el-card shadow="never" class="table-class"> - <el-table - ref="table" - :highlight-current-row="true" - :data="top_10_sites_with_risk_values" - :default-sort="{ prop: 'riskValue', order: 'descending' }" - height="540" - > - - <el-table-column - type="index" - label="搴忓彿" - fixed - width="52" - show-overflow-tooltip - align="center" - /> - <el-table-column - prop="siteName" - label="鐐逛綅鍚嶇О" - show-overflow-tooltip - width="97" - align="center" - > - <template #default="{ row }"> - <el-button - type="primary" - text - class="table-button" - @click="querySiteStaticsInfo(row)" - > - <span class="risk-rank-site"> - {{ row.siteName }} - </span> - </el-button - > - </template> - </el-table-column> - <el-table-column - prop="riskValue" - label="椋庨櫓鍊�" - sortable - show-overflow-tooltip - align="center" - /> - </el-table> - </el-card> - </el-col> - - <el-col :span="11"> - <el-card shadow="never" class="table-class"> - <DustRadarChart - :name="[ - '鏁版嵁鏈夋晥椋庨櫓', - '鍏稿瀷寮傚父澶嶇幇椋庨櫓', - '寮傚父绫诲瀷鑱氶泦椋庨櫓', - '瓒呮爣寮傚父椋庨櫓', - '鏁版嵁鍦ㄧ嚎椋庨櫓' - ]" - :yData="exceptionRisk" - ></DustRadarChart> - </el-card> - </el-col> - - <el-col :span="4"> - <el-card shadow="never" class="card-height risk-card"> - <template #header> - <h1 - :class="{ - 'weightColor-low': weight < 0.2, - 'weightColor-medium': weight >= 0.2 && weight < 0.6, - 'weightColor-heigh': weight >= 0.6 - }" - > - 椋庨櫓鍊�(0~1)锛歿{ weight }} - </h1> - </template> - <div class="risk-text-container"> - - <div class="risk-grade"> - <h1 class="sub-title">椋庨櫓绛夌骇锛�</h1> - <span class="sub-title">{{ riskGradeAndAdvice.riskGrade }} </span> - </div> - - <div class="risk-advice"> - <h1 class="sub-title">绠℃帶寤鸿锛�</h1> - <div v-for="item in riskGradeAndAdvice.riskAdvice" :key="item" class="risk-advice-text"> - {{ item }} - </div> - </div> - - <div class="grade-instance"> - <div class="container"> - <div class="block-color heigh"></div> - <div>楂橀闄�(鈮�0.6)</div> - </div> - <div class="container"> - <div class="block-color medium"></div> - <div>涓闄�(0.2~0.6)</div> - </div> - <div class="container"> - <div class="block-color low"></div> - <div>浣庨闄�(锛�0.2)</div> - </div> - </div> - - </div> - </el-card> - </el-col> - - - <el-col :span="4"> - <el-card shadow="never" class="card-height"> - <template #header> - <span class="title-16">椋庨櫓璇︽儏</span> - </template> - - <el-form> - <el-form-item label="鏈�澶у�硷細"> {{ bill.max }} mg/m鲁 </el-form-item> - <el-form-item label="鏈�灏忓�硷細"> {{ bill.min }} mg/m鲁 </el-form-item> - <el-form-item label="鏁版嵁鏈夋晥鐜囷細"> {{ bill.online }}% </el-form-item> - <el-form-item label="鏁版嵁鍦ㄧ嚎鐜囷細"> {{ bill.valid }}% </el-form-item> - <el-form-item label="鏁版嵁瓒呮爣鐜囷細"> {{ bill.exceeding }}% </el-form-item> - <el-form-item label="寮傚父绫诲瀷鑱氶泦搴︼細"> - {{ bill.exceptionTypeAggregation * 100 }}% - </el-form-item> - <el-form-item label="鍏稿瀷寮傚父澶嶇幇鐜囷細"> - {{ bill.exceptionRecurrence * 100 }}% - </el-form-item> - </el-form> - </el-card> - </el-col> - </el-row> - - <el-row :gutter="20"> - <el-col :span="12"> - <el-card shadow="never" class="card-value"> - <LineChart - title="鏃ュ潎鍊�" - :chartData="chartData1" - yName="mg/m鲁" - seriesName="鏃ュ潎鍊�" - :areaColor="areaColor" - > - </LineChart> - </el-card> - </el-col> - - <el-col :span="12"> - <el-card shadow="never" class="card-value"> - <LineChart - title="鏃ユ湁鏁堢巼" - :chartData="chartData3" - yName="%" - seriesName="鏃ユ湁鏁堢巼" - :areaColor="areaColor" - > - </LineChart> - </el-card> - </el-col> - </el-row> - - - - </div> - </div> - <el-empty description="鏆傛棤鏁版嵁" v-show="isNoData" :image-size="200" /> + <CompDataRiskModel :show-all="true"/> </template> -<style scoped> -.el-form { - margin: 10px; -} -.form-item { - margin-top: 10px; -} -.chart-container { - margin-left: 10px; -} -.time-text { - font-size: 14px; - color: #333333; - letter-spacing: 1px; - -} -.el-card { - margin-top: 15px; - border-radius: 9px; -} -.chart-container { - width: 98%; - /* height: 600px; */ -} +<style scoped> -.card-height { - height: 570px; -} -.el-header { - background-color: #010408; - color: #333; - line-height: 60px; -} -.risk-advice { - /* margin: 20px 0px; */ -} -.container { - display: flex; - margin-bottom: 10px; -} -.grade-instance { - /* margin-top: 50px; */ -} -.block-color { - width: 1em; - height: 1em; - margin-right: 10px; - margin-top: 3px; -} -.heigh { - background-color: red; -} -.medium { - background-color: #fadc19; -} -.low { - background-color: #9fdb1d; -} - -.el-text { - align-self: left; -} -.el-form-item { - margin-bottom: 20px; -} -:deep().el-form-item__content { - justify-content: flex-end; -} -.title-16 { - font-size: 16px; - font-weight: bold; -} -.weightColor-low { - color: #9fdb1d; - font-size: 16px; -} -.weightColor-medium { - color: #dabe09; - font-size: 16px; -} -.weightColor-heigh { - color: red; - font-size: 16px; -} -.risk-grade { - display: flex; -} -:deep().el-table__header-wrapper { - color: red; -} -/* .wait-name { - width: 500px; - height: 600px; - } */ -.table-class { - /* border: 1px solid blue; */ - /* margin: 20px 0px 20px 0px; */ - height: 570px; -} - -.table-button { - letter-spacing: 1px; - text-decoration: underline; - /* border-radius: 0px; */ - -} -.risk-rank-site { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - width: 80px; -} -.site-name { - margin-left: 20px; -} -.risk-advice-text { - font-size: 14px; - color: #333333; - letter-spacing: 1.5px; - margin-top: 10px; -} -.sub-title { - font-size: 14px; - color: #333333; -} - -.risk-text-container{ - height: 490px; - display: flex; - flex-direction: column; - justify-content: space-around; -} - -.el-tag{ - margin-left: 25px; - font-size: 14px; - vertical-align: baseline; -} -.exception-button { - vertical-align: baseline; - margin-left: 150px; -} - -.site-info-detail{ - display: flex; - justify-content: space-between; -} -.mx-1{ - margin-left: 100px; -} -</style> +</style> \ No newline at end of file diff --git a/src/views/risk_assessment/DataRiskRank.vue b/src/views/risk_assessment/DataRiskRank.vue index 7943643..8292680 100644 --- a/src/views/risk_assessment/DataRiskRank.vue +++ b/src/views/risk_assessment/DataRiskRank.vue @@ -214,8 +214,8 @@ }, openDetail(row) { const encodedSiteName = encodeURIComponent(row.siteName) - let titleName = '绔欑偣椋庨櫓鏁版嵁璇︽儏' - this.$router.push(`/detail/${encodedSiteName}/${this.form.month}/${titleName}`) + const jumpPage = 1 + this.$router.push(`/exceptionDetail/${encodedSiteName}/${this.form.month}/1/${jumpPage}`) } } } diff --git a/src/views/risk_assessment/SiteComprehensiveRskRanking.vue b/src/views/risk_assessment/SiteComprehensiveRskRanking.vue deleted file mode 100644 index 7943643..0000000 --- a/src/views/risk_assessment/SiteComprehensiveRskRanking.vue +++ /dev/null @@ -1,371 +0,0 @@ -<script> -import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue' -import { useCommonFunction } from '../../utils/common.js' -import dayjs from 'dayjs' -import ButtonExportExcel from '@/sfc/ButtonExportExcel.vue' -import ButtonClick from '@/sfc/ButtonClick.vue' -import { ElMessage } from 'element-plus' -import MonthSelect from '@/sfc/MonthSelect.vue' -import riskApi from '@/api/risk/riskApi.js' -import riskValue from '@/utils/risk_estimate_common_function/riskValue.js' -export default { - components: { - AreaAndmonitorType, - ButtonExportExcel, - ButtonClick, - MonthSelect - }, - data() { - return { - // 琛ㄦ牸鏁版嵁 - tableData: [], - isNoData: true, - loading: false, - // 缁熻鍒嗘瀽鎸夐挳鍔犺浇涓� - queryButton: false, - // 瀵煎嚭鎸夐挳鍔犺浇涓� - exportButton: false, - form: { - // 绔欑偣鍚嶇О - name: '', - // 寮�濮嬫椂闂� - beginTime: '', - // // 缁撴潫鏃堕棿 - endTime: '', - - // 閫夋嫨鐨勬湀浠� - month: '' - }, - bill: { - min: '', - max: '', - avg: '', - online: '', - valid: '', - exceeding: '', - - // 鍏稿瀷寮傚父澶嶇幇鐜� - exceptionRecurrence: '', - // 寮傚父绫诲瀷鎹仛闆嗗害 - exceptionTypeAggregation: '' - }, - - // 琛ㄦ牸鏁版嵁 - table: [], - // 琛ㄦ牸楂樺害 - tableHeight: 600, - currentRow: [] - } - }, - setup() { - // 寮曞叆 鐧惧垎鍙锋瘮杈冨ぇ灏� 瀵煎嚭鍔熻兘 - const { exportToExcel } = useCommonFunction() - return { exportToExcel } - }, - computed: { - // 璁$畻楂樹腑浣庣珯鐐规暟閲� - riskGradeNum() { - let riskGrade = {} - if (this.table) { - let highRisk = 0 - let middleRisk = 0 - let lowRisk = 0 - this.table.forEach((item) => { - switch (item.riskGrade) { - case '楂橀闄�': - highRisk++ - break - case '涓闄�': - middleRisk++ - break - case '浣庨闄�': - lowRisk++ - break - } - }) - riskGrade.high = highRisk - riskGrade.middle = middleRisk - riskGrade.low = lowRisk - } - return riskGrade - }, - // 楂樹腑浣庨闄╂瘮渚� - riskGradeRate() { - let rate = { - high:0, - middle:0, - low:0 - } - if (this.table.length !=0 ) { - let num = this.table.length - let highGrade = ((this.riskGradeNum.high / num)*100).toFixed(2) - let middleGrade = ((this.riskGradeNum.middle / num)*100).toFixed(2) - let lowGrade = ((this.riskGradeNum.low / num)*100).toFixed(2) - rate.high = highGrade - rate.middle = middleGrade - rate.low = lowGrade - } - return rate - } - }, - mounted() { - // - this.fetch() - this.calTableHeight() - }, - methods: { - /** - * 灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮� - * @param锛� - * @returns锛� - */ - giveMonth(val) { - //灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮�(璇ョ粍浠惰繑鍥炵殑鏍囧噯鏃堕棿鐨勬牸寮忥紝鎵�浠ュ繀椤荤殑鍔犺繖涓嚱鏁�) - this.form.month = dayjs(val).format('YYYY-MM-DD') - // 鍚屾椂鏇存柊寮�濮嬪拰缁撴潫鏃堕棿 - this.form.beginTime = dayjs(this.form.month).startOf().format('YYYY-MM-DD HH:mm:ss') - this.form.endTime = dayjs(this.form.month).endOf('month').format('YYYY-MM-DD HH:mm:ss') - console.log(this.form.beginTime, this.form.endTime) - }, - - // 鍔熻兘锛氭敼鍙樿〃鏍兼煇涓崟鍏冩牸鐨勯鑹� - tableCellClassName({ row, columnIndex }) { - // 骞冲潎鍊间笉婊¤冻鏍囧噯鏃� - if (columnIndex == 4) { - if (row.riskValue >= 0.8) { - return 'warning-row' - } - } - }, - // 鍔熻兘锛氳〃鏍奸珮搴︽牴鎹唴瀹硅嚜閫傚簲 - calTableHeight() { - const h1 = this.$refs.h1.$el.offsetHeight - // 鍏朵腑涓�涓�40鏄洅瀛愮殑鎬诲杈硅窛 - this.tableHeight = `calc(100vh - ${h1}px - 40px - 40px - var(--el-main-padding) * 2` - }, - - // 鐐瑰嚮椋庨櫓鎺掑悕鎸夐挳 - fetchData() { - this.loading = true - this.queryButton = true - riskApi.queryRiskValue('', this.form.month, 'month').then((response) => { - if (response.data.data.length == 0) { - this.isNoData = true - return - } - - this.table = riskValue.backComprehensiveRiskTableData(response.data.data) - this.queryButton = false - this.isNoData = false - this.loading = false - this.$nextTick(() => { - this.$refs.table.sort('riskValue', 'descending') - }) - }) - }, - - /** - * 鍒濆鍔犺浇鍑芥暟 - */ - fetch() { - // 鍒嗘瀽鏁版嵁 - this.fetchData() - // 寮傚父鏁版嵁 - // this.exceptiondataCount() - }, - - // 鍗曞厓鏍煎唴瀹规崲琛� - wrapIndex(index) { - return index.replace(/\n/g, '<br/>') - }, - - /** - * 瀵煎嚭涓篍xcel - - */ - exportData() { - if (this.table.length != 0) { - const tableColumns = [ - 'siteName', - 'region', - 'monitorType', - 'riskValue', - 'riskGrage', - 'riskAdvice', - 'beginTime', - 'endTime' - ] - const excelColumns = [ - ['A1', '绔欑偣鍚嶇О'], - ['B1', '鍖哄煙'], - ['C1', '鐩戞祴绫诲瀷'], - ['D1', '椋庨櫓鍊�'], - ['E1', '椋庨櫓绛夌骇'], - ['F1', '绠℃帶鎺柦'], - ['G1', '寮�濮嬫棩鏈�'], - ['H1', '缁撴潫鏃ユ湡'] - ] - this.exportButton = true - this.exportToExcel(this.table, tableColumns, excelColumns, '缁煎悎椋庨櫓鎺掑悕.xlsx') - this.exportButton = false - } else { - ElMessage('鏃犳暟鎹渶瑕佸鍑�') - } - }, - openDetail(row) { - const encodedSiteName = encodeURIComponent(row.siteName) - let titleName = '绔欑偣椋庨櫓鏁版嵁璇︽儏' - this.$router.push(`/detail/${encodedSiteName}/${this.form.month}/${titleName}`) - } - } -} -</script> - -<template> - <el-row ref="h1"> - <el-col :span="24"> - <el-form :inline="true" :model="form"> - <el-form-item> - <AreaAndmonitorType></AreaAndmonitorType> - </el-form-item> - - <el-form-item> - <MonthSelect @submit-value="giveMonth"></MonthSelect> - </el-form-item> - - <el-form-item> - <ButtonClick - style="margin-right: 12px" - content="椋庨櫓鎺掑悕" - type="primary" - :loading="queryButton" - @do-search="fetch" - ></ButtonClick> - <ButtonExportExcel - content="瀵煎嚭鏁版嵁" - type="success" - :loading="exportButton" - @do-export="exportData" - ></ButtonExportExcel> - </el-form-item> - </el-form> - </el-col> - <el-col :span="24" class="tag"> - - <el-tag type="primary"> 鍙傝瘎绔欑偣鏁�</el-tag><span class="analysis-info">{{ table.length }}</span> - <el-tag type="danger"> 楂橀闄╂暟</el-tag> <span class="analysis-info">{{ riskGradeNum.high }} ({{ riskGradeRate.high }}%)</span> - <el-tag type="warning"> 涓闄╂暟</el-tag> <span class="analysis-info">{{ riskGradeNum.middle }} ({{ riskGradeRate.middle }}%)</span> - <el-tag type="success"> 浣庨闄╂暟</el-tag> <span class="analysis-info">{{ riskGradeNum.low }} ({{ riskGradeRate.low }}%)</span> - - - </el-col> - </el-row> - - - - <el-table - ref="table" - :data="table" - :height="tableHeight" - v-loading="loading" - element-loading-text="鍚庡彴鍒嗘瀽涓�..." - style="width: 98%" - :cell-class-name="tableCellClassName" - :default-sort="{ prop: 'riskValue', order: 'descending' }" - v-show="!isNoData" - border - > - <el-table-column - type="index" - prop="name" - label="搴忓彿" - fixed - align="center" - width="55" - show-overflow-tooltip - /> - <el-table-column prop="siteName" label="鐐逛綅鍚嶇О" align="center" show-overflow-tooltip> - <template #default="{ row }"> - <el-button type="primary" text class="table-button" @click="openDetail(row)">{{ - row.siteName - }}</el-button> - </template> - </el-table-column> - - <el-table-column prop="region" label="鍖哄幙" align="center" width="80" show-overflow-tooltip /> - <el-table-column - prop="monitorType" - label="妫�娴嬬被鍨�" - align="center" - width="80" - show-overflow-tooltip - /> - <el-table-column - prop="riskValue" - label="椋庨櫓鍊�" - sortable - align="center" - width="100" - show-overflow-tooltip - /> - <el-table-column - prop="riskGrade" - label="椋庨櫓绛夌骇" - align="center" - width="100" - show-overflow-tooltip - /> - <el-table-column prop="riskAdvice" label="绠℃帶鎺柦" show-overflow-tooltip> - <template #default="scope"> - <div v-html="wrapIndex(scope.row.riskAdvice)"></div> - </template> - </el-table-column> - <el-table-column - prop="beginTime" - label="鏃ユ湡" - sortable - align="center" - width="160" - show-overflow-tooltip - /> - <!-- <el-table-column - prop="endTime" - label="缁撴潫鏃ユ湡" - sortable - align="center" - width="160" - show-overflow-tooltip - /> --> - </el-table> - <el-empty v-show="isNoData" :image-size="200" /> -</template> - -<style scoped> -.el-row, -.el-table { - margin: 10px 0px 0px 10px; -} - -:deep(.el-table__row .warning-row) { - background-color: red; - /* color: rgb(241, 236, 236); */ -} -.table-button { - letter-spacing: 1px; - text-decoration: underline; - border-radius: 0px; -} -.el-table { - color: #333333; -} -.analysis-info { - margin-right: 20px; -} -.tag{ - margin: 10px 5px 5px 1px; -} -.el-tag { - font-size: 14px; - vertical-align: baseline; -} -</style> diff --git a/src/views/risk_assessment/components/CompDataRiskModel.vue b/src/views/risk_assessment/components/CompDataRiskModel.vue new file mode 100644 index 0000000..8e98a1b --- /dev/null +++ b/src/views/risk_assessment/components/CompDataRiskModel.vue @@ -0,0 +1,777 @@ +<!-- 鏃ュ潎鍊� --> + +<script> +import InputSearch from '@/sfc/InputSearch.vue' +import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue' +import exceptionApi from '@/api/exceptionApi.js' + +import DustRadarChart from '@/views/risk_assessment/components/DustRadarChart.vue' +import LineChart from '@/views/risk_assessment/components/LineChart.vue' + +import index from '@/utils/risk_estimate_common_function/index.js' +import ButtonClick from '@/sfc/ButtonClick.vue' +import dayjs from 'dayjs' +import MonthSelect from '@/sfc/MonthSelect.vue' +import riskApi from '@/api/risk/riskApi.js' +import riskValue from '@/utils/risk_estimate_common_function/riskValue.js' +import lineChart from '@/utils/chartFunction/lineChart.js' +import siteInfo from '@/api/site/siteInfo.js' +export default { + props: { + // 鐐逛綅鍚嶅瓧 + siteName: { + type: String, + default: '' + }, + // 鏈堜唤 + time: { + type: String, + default: '' + }, + // 灞曠ず椤甸潰鐨勫叏閮� + showAll: { + type: Boolean, + default: true + } + }, + components: { + LineChart, + InputSearch, + AreaAndmonitorType, + DustRadarChart, + ButtonClick, + MonthSelect + }, + data() { + return { + isNoData: false, + loading: false, + screenLoading: false, + parentDataFlag: false, + chartData: [], + chartData1: {}, //淇濆瓨鏌ヨ鐨勭粨鏋� + chartData2: {}, + chartData3: {}, + chartData4: {}, + begin: '', //寮�濮嬫椂闂� + end: '', //缁撴潫鏃堕棿 + + form: { + // 绔欑偣鍚嶇О + name: '', + // 璁惧缂栧彿 + number: '3234', + // 寮�濮嬫椂闂� + beginTime: '', + // 缁撴潫鏃堕棿 + endTime: '' + }, + month: '', + + // 鎶樼嚎鍥鹃厤缃」 + option: {}, + // 鏁版嵁娓呭崟 + bill: { + min: '', + max: '', + avg: '', + online: 100, + valid: 100, + exceeding: 0, + + // 鍏稿瀷寮傚父澶嶇幇鐜� + exceptionRecurrence: 0, + // 寮傚父绫诲瀷鎹仛闆嗗害 + exceptionTypeAggregation: 0, + + exception: 0, + mutationCount: 0, + exceedingNearCount: 0, + exceedingCriticalDegree: 0 + }, + + // 鏌ヨ鎸夐挳鍔犺浇鏁堟灉 + queryButton: false, + + // 椋庨櫓鍊兼帓鍚嶅墠鍗佺殑绔欑偣 + top_10_sites_with_risk_values: [{ name: '', riskValue: 0.2 }], + // 椋庨櫓鍊� + weight: '', + // 鏃犳暟鎹厤缃椂闂存 + areaColor: [], + // 鏌愮珯鐐圭殑鍩烘湰淇℃伅 + siteInfo: {}, + + // 寮傚父椋庨櫓鐨勫�� + exceptionRisk: { + // 鍦ㄧ嚎鐜囬闄� + onlineRisk: '', + // 鏈夋晥鐜囬闄� + validRisk: '', + // 瓒呮爣椋庨櫓 + exceedRisk: '', + // 寮傚父绫诲瀷鑱氶泦搴� + exceptionTypeAggregation: '', + // 鍏稿瀷寮傚父澶嶇幇鐜� + typicalExceptionRepetitionRate: '' + } + } + }, + watch: { + // showAll() { + // console.log('1111') + // // 椤甸潰鍔犺浇鏃秙howAll鎵嶄細鍙樺寲涓�娆� + // // 涓簍rue琛ㄧず鐨勯闄╂ā鍨嬮〉闈� + // if (this.showAll) { + // // 鍔犺浇椋庨櫓鍊兼渶楂樼殑绔欑偣鏁版嵁 + // this.ShowDefaultData() + // } + // }, + siteName() { + if(this.siteName!= ''){ + // 鏇存柊绔欑偣鍚嶅瓧鍜屾椂闂� + this.form.name = this.siteName + this.screenLoading = true + siteInfo.queryMnCode(this.siteName).then((response) => { + this.form.number = response.data.data[0].mnCode + this.month = this.time + // 鍚屾椂鏇存柊鏈堣捣濮嬫椂闂� + this.form.beginTime = dayjs(this.month).startOf().format('YYYY-MM-DD HH:mm:ss') + this.form.endTime = dayjs(this.month).endOf('month').format('YYYY-MM-DD HH:mm:ss') + + // 鏇存柊璇ョ珯鐐圭殑鎵�灞炲満鏅拰杩愮淮鍟� + this.getSiteInfo(this.form.number) + // 鏇存柊缁熻鏁版嵁 + this.getAnalysisData() + // 璁$畻椋庨櫓鍊� + this.calRiskValue() + this.screenLoading = false + }) + } + + } + }, + + computed: { + // 椋庨櫓绛夌骇 + riskGradeAndAdvice() { + return riskApi.getRiskAdvice(this.weight) + } + }, +mounted(){ + if(this.showAll){ + // 鍔犺浇椋庨櫓鍊兼渶楂樼殑绔欑偣鏁版嵁 + this.ShowDefaultData() + } +}, + methods: { + // 鏌ヨ绔欑偣缁熻淇℃伅 + async querySiteStaticsInfo(row) { + this.form.name = row.siteName + // 鏇存柊缁熻鏁版嵁 + await this.getAnalysisData() + // 璁$畻椋庨櫓鍊� + this.calRiskValue() + }, + + // 鏍煎紡鍖栨湀浠� + giveMonth(val) { + //灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮�(璇ョ粍浠惰繑鍥炵殑鏍囧噯鏃堕棿鐨勬牸寮忥紝鎵�浠ュ繀椤荤殑鍔犺繖涓嚱鏁�) + this.month = dayjs(val).format('YYYY-MM-DD') + // 鍚屾椂鏇存柊寮�濮嬪拰缁撴潫鏃堕棿 + this.form.beginTime = dayjs(this.month).startOf().format('YYYY-MM-DD HH:mm:ss') + this.form.endTime = dayjs(this.month).endOf('month').format('YYYY-MM-DD HH:mm:ss') + }, + + /** + * 椋庨櫓璇勪及鎸夐挳 + * @param锛� + * @returns锛� + */ + riskAssessment() { + // 鏇存柊鎺掑悕娓呭崟 + this.getRiskRank() + // 鏇存柊璇ョ珯鐐圭殑鎵�灞炲満鏅拰杩愮淮鍟� + this.getSiteInfo(this.form.number) + // 鏇存柊鍒嗘瀽鏁版嵁 + this.getAnalysisData() + // 璁$畻椋庨櫓鍊� + this.calRiskValue() + }, + + // 鏇存柊鍒嗘瀽鏁版嵁 + getAnalysisData() { + // 鏃ョ粺璁℃暟鎹� + this.fetchDayAnalysisData() + // 寮傚父鏁版嵁 + this.fetchExceptionAnalysisData() + }, + + findObjectByPropertyValue(array, property, value) { + return array.find((obj) => obj[property] === value) + }, + + // 姝ら〉闈㈡墦寮�鏃� + ShowDefaultData() { + // 榛樿鍔犺浇灞曠ず鐨勫唴瀹� + this.updateOriginPage() + }, + + // 鍔犺浇榛樿灞曠ず鐨勫唴瀹� + async updateOriginPage() { + this.screenLoading = true + // 鏇存柊鎺掑悕娓呭崟锛屽苟寰楀埌椋庨櫓鍊兼渶楂樼珯鐐� + let arr = await this.getRiskRank() + this.form.name = arr[0] + this.form.number = arr[1] + this.screenLoading = false + + // 鏇存柊璇ョ珯鐐圭殑鎵�灞炲満鏅拰杩愮淮鍟� + this.getSiteInfo(this.form.number) + // 鏇存柊鏃ョ粺璁℃暟鎹� + this.getAnalysisData() + // 璁$畻椋庨櫓鍊� + this.calRiskValue() + }, + + /** + * 寰楀埌鏁版嵁椋庨櫓鍊� 锛屽苟璁$畻椋庨櫓鍊� + * @param锛� + * @returns锛� + */ + calRiskValue() { + riskApi.queryRiskValue(this.form.number, this.month, 'month').then((response) => { + const rValue = response.data.data[0] + this.exceptionRisk.onlineRisk = rValue.onlineRisk + this.exceptionRisk.validRisk = rValue.validRisk + this.exceptionRisk.exceedRisk = rValue.exceedRisk + this.exceptionRisk.exceptionTypeAggregation = rValue.exceptionTypeAggregation + this.exceptionRisk.typicalExceptionRepetitionRate = rValue.typicalExceptionRepetitionRate + + this.weight = riskValue.calRiskValue(rValue).toFixed(2) + }) + }, + + // 鏍规嵁鐩墠绔欑偣锛屾湀浠斤紝鏌ユ姌绾垮浘鏃ョ粺璁℃暟鎹� + fetchDayAnalysisData() { + let params = {} + if (this.form.name) { + params['siteName'] = this.form.name + } + if (this.form.beginTime) { + params['beginTime'] = this.form.beginTime + } + if (this.form.endTime) { + params['endTime'] = this.form.endTime + } + this.loading = true + this.queryButton = true + exceptionApi + .analysisdata(this.form.name, this.form.beginTime, this.form.endTime, 'day') + .then((response) => { + this.chartData = response.data.data + this.loading = false + this.queryButton = false + if (response.data.data.length == 0) { + this.isNoData = true + return + } + // 鍒嗘瀽鏁版嵁涓殑鏈�鏃╂椂闂� + let begin = this.chartData[0].lst + // 鍒嗘瀽鏁版嵁涓殑鏈�鏅氭椂闂� + let end = this.chartData[this.chartData.length - 1].lst + + // 绉婚櫎绌烘暟鎹姸鎬� + this.isNoData = false + + // 鏃犳暟鎹殑鏃堕棿娈� + let noDataTimeInteval = lineChart.backNoDataInteval(begin, end) + // 鏃犳暟鎹厤缃椂闂存 + this.areaColor = lineChart.getMarkArea(noDataTimeInteval) + this.setChart() + + // 鎶樼嚎鍥炬暟鎹� + let temp = index.calBillData(this.chartData, begin, end) + this.bill.min = temp['min'] + this.bill.max = temp['max'] + + this.bill.avg = temp['avg'] + this.bill.online = temp['online'] + this.bill.valid = temp['valid'] + this.bill.exceeding = temp['exceeding'] + }) + }, + // 浼佷笟寮傚父缁熻鏁版嵁 + fetchExceptionAnalysisData() { + exceptionApi + .exceptiondata1({ + siteName: this.form.name, + beginTime: this.form.beginTime, + endTime: this.form.endTime + }) + .then((res) => { + let obj = index.calRecur(res.data.data) + this.bill.exceptionRecurrence = obj['exceptionRecurrence'] + this.bill.exceptionTypeAggregation = obj['exceptionTypeAggregation'] + this.bill.exception = obj['exception'] + this.bill.mutationCount = obj['mutationCount'] + this.bill.exceedingNearCount = obj['exceedingNearCount'] + this.bill.exceedingCriticalDegree = obj['exceedingCriticalDegree'] + }) + }, + + // 閫夋嫨鍏朵粬鍊肩被鍨嬫椂 + setChart() { + if (this.chartData.length) { + // 鏋勫缓鎶樼嚎鍥緓,y鏁版嵁 + let obj = lineChart.getLineChartXYData( + this.chartData, + this.form.beginTime, + this.form.endTime + ) + + this.chartData1 = { + x: obj.xData, + y: obj.yAvg + } + this.chartData2 = { + x: obj.xData, + y: obj.yOnline + } + this.chartData3 = { + x: obj.xData, + y: obj.yValid + } + this.chartData4 = { + x: obj.xData, + y: obj.yExceed + } + } + }, + + // 寰楀埌鍓�10椋庨櫓鎺掑悕娓呭崟 + async getRiskRank() { + let response = await riskApi.queryRiskValue('', this.month, 'month') + + let tableData = riskValue.backComprehensiveRiskTableData(response.data.data) + + this.top_10_sites_with_risk_values = this.getTopRiskData(tableData, 10) + if (this.top_10_sites_with_risk_values.length != 0) { + // 琛ㄦ牸鎸夐闄╁�煎�掑彊鎺掑垪 + this.$nextTick(() => { + this.$refs.table.sort('riskValue', 'descending') + }) + // 淇濆瓨椋庨櫓鍊兼渶楂樼殑绔欑偣鍚嶇О鍜岃澶囩紪鍙� + let temp = [] + temp.push( + this.top_10_sites_with_risk_values[0].siteName, + this.top_10_sites_with_risk_values[0].mnCode + ) + return temp + } + }, + /** + * 闄嶅簭鎺掑垪锛岃繑鍥為檷搴忓墠num鐨勫厓绱� + * @param锛� 瀵硅薄鏁扮粍锛岃繑鍥炵殑鏁伴噺 + */ + getTopRiskData(arr, num) { + // 鎸夌収riskValue闄嶅簭鎺掑垪 + arr.sort((a, b) => b.riskValue - a.riskValue) + // 鑾峰彇鍓峮um涓厓绱� + return arr.slice(0, num) + }, + /** + * 鏍规嵁璁惧缂栧彿鏌ヨ绔欑偣鍩烘湰淇℃伅 + * @param锛� 璁惧缂栧彿 + */ + getSiteInfo(mnCode) { + siteInfo.querySiteInfoByMnCode(mnCode).then((response) => { + this.siteInfo = response.data.data[0] + }) + }, + + openDetail() { + const encodedSiteName = encodeURIComponent(this.form.name) + const timeType = '1' + const jumpPage = '2' + this.$router.push(`/exceptionDetail/${encodedSiteName}/${this.month}/${timeType}/${jumpPage}`) + } + } +} +</script> + +<template> + <el-form :inline="true" :model="form"> + <el-form-item class="form-item"> + <AreaAndmonitorType></AreaAndmonitorType> + </el-form-item> + + <el-form-item class="form-item"> + <InputSearch + :site-name="form.name" + isNeedDefaultSite="0" + @submit-value="(n) => (form.name = n)" + @submit-mncode="(n) => (form.number = n)" + ></InputSearch> + </el-form-item> + + <el-form-item v-show="showAll"> + <MonthSelect @submit-value="giveMonth"></MonthSelect> + </el-form-item> + + <el-form-item v-show="showAll"> + <ButtonClick + content="椋庨櫓璇勪及" + type="primary" + :loading="queryButton" + @do-search="riskAssessment" + ></ButtonClick> + </el-form-item> + </el-form> + + <div v-loading="screenLoading" class="wait-name"> + <div class="chart-container" v-show="!isNoData && !screenLoading"> + <el-card class="time-text"> + <h4>{{ form.name }}</h4> + + <br /> + <br /> + <span>鏁版嵁缁熻鏃舵锛歿{ form.beginTime }} ~ {{ form.endTime }}</span> + <el-tag class="mx-1">鍦烘櫙</el-tag>{{ siteInfo.typename }} + + <el-tag class="mx-1">杩愮淮鍟�</el-tag>{{ siteInfo.dutyCompany }} + <el-button type="primary" size="default" class="exception-button" v-show="showAll" @click="openDetail"> + 鏁版嵁寮傚父璇︽儏 + </el-button> + </el-card> + + <el-row :gutter="10"> + <el-col :span="5" v-show="showAll"> + <el-card shadow="never" class="table-class"> + <el-table + ref="table" + :highlight-current-row="true" + :data="top_10_sites_with_risk_values" + :default-sort="{ prop: 'riskValue', order: 'descending' }" + height="540" + > + <el-table-column + type="index" + label="搴忓彿" + fixed + width="52" + show-overflow-tooltip + align="center" + /> + <el-table-column + prop="siteName" + label="鐐逛綅鍚嶇О" + show-overflow-tooltip + width="99" + align="center" + > + <template #default="{ row }"> + <el-button + type="primary" + text + class="table-button" + @click="querySiteStaticsInfo(row)" + > + <span class="risk-rank-site"> + {{ row.siteName }} + </span> + </el-button> + </template> + </el-table-column> + <el-table-column + prop="riskValue" + label="椋庨櫓鍊�" + sortable + show-overflow-tooltip + align="center" + /> + </el-table> + </el-card> + </el-col> + + <el-col :span="11"> + <el-card shadow="never" class="table-class"> + <DustRadarChart + :name="[ + '鏁版嵁鏈夋晥椋庨櫓', + '寮傚父澶嶇幇椋庨櫓', + '寮傚父绫诲瀷鑱氶泦椋庨櫓', + '瓒呮爣寮傚父椋庨櫓', + '鏁版嵁鍦ㄧ嚎椋庨櫓' + ]" + :yData="exceptionRisk" + ></DustRadarChart> + </el-card> + </el-col> + + <el-col :span="4"> + <el-card shadow="never" class="card-height risk-card"> + <template #header> + <h1 + :class="{ + 'weightColor-low': weight < 0.15, + 'weightColor-medium': weight >= 0.15 && weight <= 0.6, + 'weightColor-heigh': weight > 0.6 + }" + > + 椋庨櫓鍊�(0~1)锛歿{ weight }} + </h1> + </template> + <div class="risk-text-container"> + <div class="risk-grade"> + <h1 class="sub-title">椋庨櫓绛夌骇锛�</h1> + <span class="sub-title">{{ riskGradeAndAdvice.riskGrade }} </span> + </div> + + <div class="risk-advice"> + <h1 class="sub-title">绠℃帶寤鸿锛�</h1> + <div + v-for="item in riskGradeAndAdvice.riskAdvice" + :key="item" + class="risk-advice-text" + > + {{ item }} + </div> + </div> + + <div class="grade-instance"> + <div class="container"> + <div class="block-color heigh"></div> + <div>楂橀闄�(>0.6)</div> + </div> + <div class="container"> + <div class="block-color medium"></div> + <div>涓闄�(0.15~0.6)</div> + </div> + <div class="container"> + <div class="block-color low"></div> + <div>浣庨闄�(锛�0.15)</div> + </div> + </div> + </div> + </el-card> + </el-col> + + <el-col :span="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="寮傚父绫诲瀷鑱氶泦搴︼細"> + {{ exceptionRisk.exceptionTypeAggregation * 100 }}% + </el-form-item> + <el-tag :size="small">鍏卞嚭鐜颁簡{{ bill.exception.length }}绫诲紓甯�</el-tag> + <el-form-item label="鍏稿瀷寮傚父澶嶇幇鐜囷細"> + {{ exceptionRisk.typicalExceptionRepetitionRate * 100 }}% + </el-form-item> + <div> + <el-tag :size="small">閲忕骇绐佸彉寮傚父:{{ bill.mutationCount }}鏉�</el-tag> + </div> + + <div> + <el-tag :size="small">涓磋繎瓒呮爣寮傚父:{{ bill.exceedingNearCount }}鏉�</el-tag> + </div> + + <div> + <el-tag :size="small" + >鍗曟棩瓒呮爣娆℃暟涓寸晫寮傚父:{{ bill.exceedingCriticalDegree }}鏉�</el-tag + > + </div> + </el-form> + </el-card> + </el-col> + </el-row> + + <el-row :gutter="20"> + <el-col :span="12"> + <el-card shadow="never" class="card-value"> + <LineChart + title="鏃ュ潎鍊�" + :chartData="chartData1" + yName="mg/m鲁" + seriesName="鏃ュ潎鍊�" + :areaColor="areaColor" + > + </LineChart> + </el-card> + </el-col> + + <el-col :span="12"> + <el-card shadow="never" class="card-value"> + <LineChart + title="鏃ユ湁鏁堢巼" + :chartData="chartData3" + yName="%" + seriesName="鏃ユ湁鏁堢巼" + :areaColor="areaColor" + > + </LineChart> + </el-card> + </el-col> + </el-row> + </div> + </div> + <el-empty description="鏆傛棤鏁版嵁" v-show="isNoData" :image-size="200" /> +</template> + +<style scoped> +.el-form { + margin: 10px; +} +.form-item { + margin-top: 10px; +} +.chart-container { + margin-left: 10px; +} +.time-text { + font-size: 14px; + color: #333333; + letter-spacing: 1px; +} +.el-card { + margin-top: 15px; + border-radius: 9px; +} +.chart-container { + width: 98%; + /* height: 600px; */ +} + +.card-height { + height: 570px; +} +.el-header { + background-color: #010408; + color: #333; + line-height: 60px; +} +.risk-advice { + /* margin: 20px 0px; */ +} +.container { + display: flex; + margin-bottom: 10px; +} +.grade-instance { + /* margin-top: 50px; */ +} +.block-color { + width: 1em; + height: 1em; + margin-right: 10px; + margin-top: 3px; +} +.heigh { + background-color: red; +} +.medium { + background-color: #fadc19; +} +.low { + background-color: #9fdb1d; +} + +.el-text { + align-self: left; +} +.el-form-item { + margin-bottom: 20px; +} +:deep().el-form-item__content { + justify-content: flex-end; +} +.title-16 { + font-size: 16px; + font-weight: bold; +} +.weightColor-low { + color: #9fdb1d; + font-size: 16px; +} +.weightColor-medium { + color: #dabe09; + font-size: 16px; +} +.weightColor-heigh { + color: red; + font-size: 16px; +} +.risk-grade { + display: flex; +} +:deep().el-table__header-wrapper { + color: red; +} +/* .wait-name { + width: 500px; + height: 600px; + } */ +.table-class { + /* border: 1px solid blue; */ + /* margin: 20px 0px 20px 0px; */ + height: 570px; +} + +.table-button { + letter-spacing: 1px; + text-decoration: underline; + /* border-radius: 0px; */ +} +.risk-rank-site { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 80px; +} +.site-name { + margin-left: 20px; +} +.risk-advice-text { + font-size: 14px; + color: #333333; + letter-spacing: 1.5px; + margin-top: 10px; +} +.sub-title { + font-size: 14px; + color: #333333; +} + +.risk-text-container { + height: 490px; + display: flex; + flex-direction: column; + justify-content: space-around; +} + +.el-tag { + margin-left: 25px; + font-size: 14px; + vertical-align: baseline; +} +.exception-button { + vertical-align: baseline; + margin-left: 150px; +} + +.site-info-detail { + display: flex; + justify-content: space-between; +} +.mx-1 { + margin-left: 100px; +} +</style> diff --git a/src/views/risk_assessment/components/SiteDetail.vue b/src/views/risk_assessment/components/SiteDetail.vue index aba9e90..cb0c0a4 100644 --- a/src/views/risk_assessment/components/SiteDetail.vue +++ b/src/views/risk_assessment/components/SiteDetail.vue @@ -1,17 +1,21 @@ <!--鐐瑰嚮绔欑偣 璺宠浆鑷抽闄╂ā鍨嬮〉闈� --> <script> import CompFlightInspection from '@/views/exception/components/CompFlightInspection.vue' +import CompDataRiskModel from '@/views/risk_assessment/components/CompDataRiskModel.vue' export default { components: { - CompFlightInspection + CompFlightInspection, + CompDataRiskModel }, data() { return { siteName: '', - month: '', - // 椤垫爣棰� - title:'' + time: '', + // 鏃堕棿绫诲瀷 + timeType: '', + // 1浠h〃椋庨櫓妯″瀷 2浠h〃椋炶宸℃ + jumpPage: -1 } }, watch: {}, @@ -20,9 +24,11 @@ next((vm) => { // 閫氳繃 `vm` 璁块棶缁勪欢瀹炰緥 vm.siteName = to.params.siteName - vm.month = to.params.month - vm.$nextTick(() => { - }) + vm.time = to.params.time + vm.timeType = to.params.timeType + vm.jumpPage = to.params.jumpPage + + vm.$nextTick(() => {}) }) }, methods: { @@ -37,12 +43,24 @@ <template> <el-page-header @back="onBack"> <template #content> - <span> 寮傚父璇︽儏 </span> + <span v-if="jumpPage == '1'"> 椋庨櫓妯″瀷 </span> + <span v-else-if="jumpPage == '2'"> 寮傚父璇︽儏 </span> </template> </el-page-header> - <CompFlightInspection :site-name="siteName" :month="month" :show-all="false"> </CompFlightInspection> + <div v-show="jumpPage == '1'"> + <CompDataRiskModel :site-name="siteName" :time="time" :show-all="false"></CompDataRiskModel> + </div> + <div v-show="jumpPage == '2'"> + <CompFlightInspection + :site-name="siteName" + :time="time" + :time-type="timeType" + :show-all="false" + > + </CompFlightInspection> + </div> </template> <style scoped> diff --git a/src/views/risk_assessment/components/subRiskModel.vue b/src/views/risk_assessment/components/subRiskModel.vue index 39a5f98..02e4228 100644 --- a/src/views/risk_assessment/components/subRiskModel.vue +++ b/src/views/risk_assessment/components/subRiskModel.vue @@ -7,8 +7,9 @@ <script> // import InputSearch from '@/sfc/InputSearch.vue' import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue' -import DustRadarChart from '@/views/risk_assessment/components/DustRadarChart.vue' import exceptionApi from '@/api/exceptionApi.js' + +import DustRadarChart from '@/views/risk_assessment/components/DustRadarChart.vue' import LineChart from '@/views/risk_assessment/components/LineChart.vue' import index from '@/utils/risk_estimate_common_function/index.js' import ButtonClick from '@/sfc/ButtonClick.vue' -- Gitblit v1.9.3