From 2fd7b502110d916d7bc43ab1e88f6586fa2cd3c3 Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期五, 03 十一月 2023 11:27:21 +0800
Subject: [PATCH] 修改风险模型页面 排名清单卡片高度
---
src/views/line_graph/DataRiskModel.vue | 925 ++++++++++++++++++++++++++++++++------------------------
1 files changed, 526 insertions(+), 399 deletions(-)
diff --git a/src/views/line_graph/DataRiskModel.vue b/src/views/line_graph/DataRiskModel.vue
index db0d463..c1207bf 100644
--- a/src/views/line_graph/DataRiskModel.vue
+++ b/src/views/line_graph/DataRiskModel.vue
@@ -1,36 +1,37 @@
<!-- 鏃ュ潎鍊� -->
+
<script>
-import TimeSelectWithShortCuts from '../../sfc/TimeSelectWithShortCuts.vue';
-import InputSearch from '../../sfc/InputSearch.vue';
-import AreaAndmonitorType from '../../sfc/AreaAndmonitorType.vue';
-
-import DustRadarChart from './components/DustRadarChart.vue';
-import exceptionApi from '@/api/exceptionApi.js';
-import { useWindowSize } from '@vueuse/core';
-
+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 dayjs from 'dayjs';
+import index from '@/utils/risk_estimate_common_function/index.js'
+import ButtonClick from '@/sfc/ButtonClick.vue'
+import dayjs from 'dayjs'
+import MonthSelect from '@/sfc/MonthSelect.vue'
export default {
components: {
LineChart,
- TimeSelectWithShortCuts,
InputSearch,
AreaAndmonitorType,
- DustRadarChart
+ DustRadarChart,
+ ButtonClick,
+ MonthSelect
},
data() {
return {
isNoData: false,
loading: false,
+ screenLoading: false,
+ parentDataFlag:false,
chartData: [],
chartData1: {}, //淇濆瓨鏌ヨ鐨勭粨鏋�
chartData2: {},
chartData3: {},
chartData4: {},
- //devId:'', //璁惧缂栧彿
- // begin: '2023-05-01', //寮�濮嬫椂闂�
- // end: '2023-05-15', //缁撴潫鏃堕棿
+ begin: '', //寮�濮嬫椂闂�
+ end: '', //缁撴潫鏃堕棿
form: {
// 绔欑偣鍚嶇О
@@ -42,6 +43,9 @@
// 缁撴潫鏃堕棿
endTime: ''
},
+ month: '',
+ // 浼犻�掔粰鏈堜唤缁勪欢鐨勫��
+ sfc_month: '',
// 鎶樼嚎鍥鹃厤缃」
option: {},
// 鏁版嵁娓呭崟
@@ -49,279 +53,185 @@
min: '',
max: '',
avg: '',
- online: '',
- valid: '',
- exceeding: '',
+ online: 100,
+ valid: 100,
+ exceeding: 0,
// 鍏稿瀷寮傚父澶嶇幇鐜�
- exceptionRecurrence: '',
+ exceptionRecurrence: 0,
// 寮傚父绫诲瀷鎹仛闆嗗害
- exceptionTypeAggregation: '',
-
- }
- };
+ exceptionTypeAggregation: 0
+ },
+ status: {
+ isHasData: false
+ },
+ // 鏌ヨ鎸夐挳鍔犺浇鏁堟灉
+ queryButton: false,
+
+ // 椋庨櫓鍊兼帓鍚嶅墠鍗佺殑绔欑偣
+ top_10_sites_with_risk_values: [{ name: '', riskValue: 0.2 }],
+ // 椋庨櫓鍊�
+ weight: ''
+ }
},
- setup() {
- const { height } = useWindowSize();
- return { height };
+
+ watch: {
+ sName() {
+ // 褰撳埆鐨勯〉闈㈣皟鐢ㄦ椂
+ if (this.sName != ''|| this.month_1 != '') {
+ // 鏇存柊绔欑偣鍚嶅瓧鍜屾椂闂�
+ this.form.name = this.sName
+ this.month = this.month_1
+ this.parentDataFlag = true
+ // 鏇存柊鎺掓竻鍗�
+ this.getRiskRank()
+ // 鏇存柊缁熻鏁版嵁
+ this.getAnalysisData()
+ // 璁＄畻椋庨櫓鍊�
+ this.calRiskValue()
+ }
+ }
},
+
mounted() {
- this.fetch();
+ // // 鍔犺浇椋庨櫓鍊兼渶楂樼殑绔欑偣鏁版嵁
+ this.ShowDefaultData()
},
+
methods: {
- /**
- * 璁＄畻寮傚父绫诲瀷鑱氶泦搴� 寮傚父澶嶇幇鐜�
- * @param锛� 寮傚父鏁版嵁鏁扮粍
- * @returns锛�
- */
- calRecur(exceptionArr) {
- // 鍏稿瀷寮傚父澶嶇幇鐜�
- let exceptionTyprRecurRate = 0;
- // 閲忕骇绐佸彉
- let mutationCount = 0;
- // 瓒呮爣涓磋繎
- let exceedingNearCount = 0;
- // 瓒呮爣娆℃暟涓寸晫
- let exceedindCriticalDegree = 0;
-
- // 淇濆瓨鍑虹幇鐨勪笉鍚屽紓甯哥被鍨�
- let exception = []
- // 寮傚父绫诲瀷鑱氶泦搴�
- let exceptionTypeAggregation = 0
-
- exceptionArr.forEach(item => {
- // 寮傚父澶嶇幇鐜�
- if (item.exceptionType == 4) {
- mutationCount++;
- } else if (item.exceptionType == 5) {
- exceedingNearCount++;
- } else if (item.exceptionType == 6) {
- exceedindCriticalDegree++;
- }
-
- // 寮傚父绫诲瀷鑱氶泦搴�
- if(exception.length == 0){
- exception.push(item.exceptionType)
- }
- // 淇濆瓨鏂扮殑寮傚父绫诲瀷
- else if(exception.indexOf(item.exceptionType) == -1){
- exception.push(item.exceptionType)
- }
- });
-
- let sum = 0;
- // 娆℃暟鍑�1锛岃寮傚父鍑虹幇2娆★紝绠楀鐜�1娆°�傚嚭鐜�3娆★紝绠楀鐜�2娆�...
- if (mutationCount > 1) {
- sum = sum + mutationCount - 1;
- }
- if (exceedingNearCount > 1) {
- sum = sum + exceedindCriticalDegree - 1;
- }
- if (exceedindCriticalDegree > 1) {
- sum = sum + exceedindCriticalDegree - 1;
- }
- console.log('sum:',sum);
- console.log('exception:',exception);
- console.log('鍏朵粬',mutationCount,exceedindCriticalDegree,exceedindCriticalDegree);
- switch (sum) {
- case 0:
- exceptionTyprRecurRate = sum / 3;
- break;
- case 1:
- exceptionTyprRecurRate = sum / 3;
- break;
- case 2:
- case sum >= 3:
- exceptionTyprRecurRate = 1;
- break;
- default:
- return 'error';
- }
-
- exceptionTypeAggregation = exception.length / 8
-
- let obj = {}
- obj['exceptionRecurrence'] = exceptionTyprRecurRate
- obj['exceptionTypeAggregation'] = exceptionTypeAggregation
-
- return obj
- },
- /**
- * 璁＄畻鏃ユ湡鐩稿樊鍑犲ぉ
- * @param锛�
- * @createTime:寮�濮嬫椂闂达紝缁撴潫鏃堕棿
- * @returns锛�
- */
- getDaysDifference(startDate, endDate) {
- var start = new Date(startDate);
- var end = new Date(endDate);
- var timeDiff = Math.abs(end.getTime() - start.getTime());
- var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
- return diffDays;
- },
- /**
- * 浠庡垎鏋愭暟鎹暟缁勪腑鎵惧埌鏈�灏忓拰澶у��
- * @param锛�
- * @returns锛�
- */
- calBillData(arr) {
- let min = 65536;
- let max = -1;
- let avg = 0;
- let online = 0;
- let valid = 0;
- let exceeding = 0;
-
- let sumAvg = 0;
- let sumOnline = 0;
- let sumValid = 0;
- let sumExceeding = 0;
-
- // 璁＄畻閫夋嫨鐨勬椂闂寸殑鐩稿樊鐨勫ぉ鏁�
- let begin = dayjs(this.form.beginTime).format('YYYY-MM-DD');
- let end = dayjs(this.form.endTime).format('YYYY-MM-DD');
- let dayDiff = this.getDaysDifference(begin, end);
- let obj = {};
- // 璁＄畻鏈�灏忓拰澶у��
- arr.forEach((item) => {
- if (item.min < min) {
- min = item.min;
- }
- if (item.max > max) {
- max = item.max;
- }
- // 璁＄畻骞冲潎鍊硷紝鍦ㄧ嚎鐜囷紝鏈夋晥鐜囷紝瓒呮爣鐜�
- sumAvg = sumAvg + item.dayAvg;
- sumOnline = sumOnline + Number(item.dayOnline.slice(0, -1));
- sumValid = sumValid + Number(item.dayValid.slice(0, -1));
- sumExceeding = sumExceeding + Number(item.dayExceeding.slice(0, -1));
- });
- // 璁＄畻鍧囧��
- avg = sumAvg / dayDiff;
- // console.log('sumavg:',sumAvg,dayDiff);
- online = sumOnline / dayDiff;
- valid = sumValid / dayDiff;
- exceeding = sumExceeding / dayDiff;
- obj['min'] = min;
- obj['max'] = max;
-
- obj['avg'] = avg.toFixed(3);
- obj['online'] = online.toFixed(3);
- obj['valid'] = valid.toFixed(3);
- obj['exceeding'] = exceeding.toFixed(3);
-
- return obj;
+ // 鏌ヨ绔欑偣缁熻淇℃伅
+ querySiteStaticsInfo(row) {
+ this.form.name = row.siteName
+ // 鏇存柊缁熻鏁版嵁
+ this.getAnalysisData()
+ // 璁＄畻椋庨櫓鍊�
+ this.calRiskValue()
},
- /**
- * 灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮�
- * @param锛�
- * @returns锛�
- */
- giveTime(val) {
+ // 鏍煎紡鍖栨湀浠�
+ giveMonth(val) {
//灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮�(璇ョ粍浠惰繑鍥炵殑鏍囧噯鏃堕棿鐨勬牸寮忥紝鎵�浠ュ繀椤荤殑鍔犺繖涓嚱鏁�)
- this.form.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss');
- this.form.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss');
+ 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锛�
*/
- fetch() {
- // 鍒嗘瀽鏁版嵁
- this.fetchData();
- // 寮傚父鏁版嵁
- this.exceptiondataCount();
+ riskAssessment() {
+ // 鏇存柊鎺掑悕娓呭崟
+ this.getRiskRank()
+ // 鏇存柊鍒嗘瀽鏁版嵁
+ this.getAnalysisData()
+ // 璁＄畻椋庨櫓鍊�
+ this.calRiskValue()
},
- // 鐐瑰嚮灞曠ず鎸夐挳
- fetchData() {
- if (
- this.form.beginTime >= this.form.endTime &&
- (this.form.beginTime != null || this.form.endTime != null) &&
- (this.form.beginTime != '' || tthis.form.endTime != '')
- ) {
- alert('璇疯緭鍏ユ湁鏁堢殑鏃堕棿娈�');
- return;
- }
- let params = {};
+ // 鏇存柊鍒嗘瀽鏁版嵁
+ getAnalysisData() {
+ // 鏃ョ粺璁℃暟鎹�
+ this.fetchDayAnalysisData()
+ // 寮傚父鏁版嵁
+ this.fetchExceptionAnalysisData()
+ },
+
+ findObjectByPropertyValue(array, property, value) {
+ return array.find((obj) => obj[property] === value)
+ },
+
+ // 姝ら〉闈㈡墦寮�鏃�
+ ShowDefaultData() {
+ // 榛樿鍔犺浇灞曠ず鐨勫唴瀹�
+ this.updateOriginPage()
+ },
+
+ // 鍔犺浇榛樿灞曠ず鐨勫唴瀹�
+ async updateOriginPage() {
+ this.screenLoading = true
+ // 鏇存柊鎺掑悕娓呭崟锛屽苟寰楀埌椋庨櫓鍊兼渶楂樼珯鐐�
+ this.form.name = await this.getRiskRank()
+ this.screenLoading = false
+ // 鏇存柊鏃ョ粺璁℃暟鎹�
+ this.getAnalysisData()
+ // 璁＄畻椋庨櫓鍊�
+ this.calRiskValue()
+ },
+
+ // 璁＄畻椋庨櫓鍊�
+ calRiskValue() {
+ exceptionApi.analysisdataByType(this.month, 'month').then((response) => {
+ const chartData = response.data.data
+
+ if (response.data.data.length == 0) {
+ return
+ }
+ // 浠庡璞℃暟缁勬壘鍒拌绔欑偣鎵�鍦ㄧ殑鍏冪礌
+ let siteItem = this.findObjectByPropertyValue(chartData, 'name', this.form.name)
+ if (Object.keys(siteItem).length === 0) {
+ return
+ }
+ let arr = []
+ arr.push(siteItem)
+ exceptionApi
+ .exceptiondata1({
+ siteName: this.form.name,
+ beginTime: this.form.beginTime,
+ endTime: this.form.endTime
+ })
+ .then((res) => {
+ let table = index.merge(arr, res.data.data, this.form.beginTime, this.form.endTime)
+ this.weight = table[0].riskValue
+ })
+ })
+ },
+
+ // 鏍规嵁鐩墠绔欑偣锛屾湀浠斤紝鏌ユ姌绾垮浘鏃ョ粺璁℃暟鎹�
+ fetchDayAnalysisData() {
+ let params = {}
if (this.form.name) {
- params['siteName'] = this.form.name;
+ params['siteName'] = this.form.name
}
if (this.form.beginTime) {
- params['beginTime'] = this.form.beginTime;
+ params['beginTime'] = this.form.beginTime
}
if (this.form.endTime) {
- params['endTime'] = this.form.endTime;
+ params['endTime'] = this.form.endTime
}
- this.loading = true;
+ this.loading = true
+ this.queryButton = true
exceptionApi
- .analysisdata(this.form.name, this.form.beginTime, this.form.endTime)
+ .analysisdata(this.form.name, this.form.beginTime, this.form.endTime, 'day')
.then((response) => {
- this.chartData = response.data.data;
- this.loading = false;
+ this.chartData = response.data.data
+ this.loading = false
+ this.queryButton = false
if (response.data.data.length == 0) {
- this.isNoData = true;
- return;
+ this.isNoData = true
+ return
}
+ this.begin = this.chartData[0].lst
+ this.end = this.chartData[this.chartData.length - 1].lst
+
// 绉婚櫎绌烘暟鎹姸鎬�
- this.isNoData = false;
- this.setChart();
+ this.isNoData = false
+ this.setChart()
+ // 鎶樼嚎鍥炬暟鎹�
+ let temp = index.calBillData(this.chartData, this.begin, this.end)
+ this.bill.min = temp['min']
+ this.bill.max = temp['max']
- let temp = this.calBillData(this.chartData);
- console.log('temp:', temp);
- this.bill.min = temp['min'];
- this.bill.max = temp['max'];
-
- this.bill.avg = temp['avg'];
- this.bill.online = temp['online'];
- this.bill.valid = temp['valid'];
- this.bill.exceeding = temp['exceeding'];
- });
+ this.bill.avg = temp['avg']
+ this.bill.online = temp['online']
+ this.bill.valid = temp['valid']
+ this.bill.exceeding = temp['exceeding']
+ })
},
-
- // 閫夋嫨鍏朵粬鍊肩被鍨嬫椂
- setChart() {
- if (this.chartData.length) {
- // x杞存棩鏈熸椂闂�
- let dateList = [];
- //棰楃矑鐗╁钩鍧囨祿搴�
- let dayAvg = [];
- let dataOnline = [];
- let dataValid = [];
- let dataExceed = [];
- this.chartData.forEach((item) => {
- //x杞存棩鏈�
- dateList.push(item.lst);
- // 鍘嗗彶娌圭儫娴撳害
- dayAvg.push(item.dayAvg);
- dataOnline.push(item.dayOnline.slice(0, -1));
- dataValid.push(item.dayValid.slice(0, -1));
- dataExceed.push(item.dayExceeding.slice(0, -1));
- });
-
- this.chartData1 = {
- x: dateList,
- y: dayAvg
- };
- this.chartData2 = {
- x: dateList,
- y: dataOnline
- };
- this.chartData3 = {
- x: dateList,
- y: dataValid
- };
- this.chartData4 = {
- x: dateList,
- y: dataExceed
- };
- }
- },
-
- // 浼佷笟寮傚父璇︽儏
- exceptiondataCount() {
+ // 浼佷笟寮傚父缁熻鏁版嵁
+ fetchExceptionAnalysisData() {
exceptionApi
.exceptiondata1({
siteName: this.form.name,
@@ -329,178 +239,395 @@
endTime: this.form.endTime
})
.then((res) => {
- console.log('寮傚父锛�', res.data.data);
- let obj = this.calRecur(res.data.data)
+ let obj = index.calRecur(res.data.data)
this.bill.exceptionRecurrence = obj['exceptionRecurrence']
this.bill.exceptionTypeAggregation = obj['exceptionTypeAggregation']
- });
+ })
+ },
+
+ // 閫夋嫨鍏朵粬鍊肩被鍨嬫椂
+ setChart() {
+ if (this.chartData.length) {
+ // x杞存棩鏈熸椂闂�
+ let dateList = []
+ //棰楃矑鐗╁钩鍧囨祿搴�
+ let dayAvg = []
+ let dataOnline = []
+ let dataValid = []
+ let dataExceed = []
+ this.chartData.forEach((item) => {
+ //x杞存棩鏈�
+ dateList.push(item.lst)
+ // 鍘嗗彶娌圭儫娴撳害
+ dayAvg.push(item.dayAvg)
+ dataOnline.push(item.dayOnline.slice(0, -1))
+ dataValid.push(item.dayValid.slice(0, -1))
+ dataExceed.push(item.dayExceeding.slice(0, -1))
+ })
+
+ this.chartData1 = {
+ x: dateList,
+ y: dayAvg
+ }
+ this.chartData2 = {
+ x: dateList,
+ y: dataOnline
+ }
+ this.chartData3 = {
+ x: dateList,
+ y: dataValid
+ }
+ this.chartData4 = {
+ x: dateList,
+ y: dataExceed
+ }
+ }
+ },
+
+ // 寰楀埌鍓�10椋庨櫓鎺掑悕娓呭崟
+ async getRiskRank() {
+ let staticsData = await exceptionApi.analysisdataByType(this.month, 'month')
+
+ let exceptionData = await exceptionApi.exceptiondata1({
+ siteName: '',
+ beginTime: this.form.beginTime,
+ endTime: this.form.endTime
+ })
+
+ const riskValueSites = index.merge(
+ staticsData.data.data,
+ exceptionData.data.data,
+ this.form.beginTime,
+ this.form.endTime
+ )
+ this.top_10_sites_with_risk_values = this.getTopRiskData(riskValueSites, 10)
+ if (this.top_10_sites_with_risk_values.length != 0) {
+ // 琛ㄦ牸鎸夐闄╁�煎�掑彊鎺掑垪
+ this.$nextTick(() => {
+ this.$refs.table.sort('riskValue', 'descending')
+ })
+ // Promise
+ return this.top_10_sites_with_risk_values[0].siteName
+ }
+ },
+
+ /**
+ * 闄嶅簭鎺掑垪锛岃繑鍥為檷搴忓墠num鐨勫厓绱�
+ * @param锛� 瀵硅薄鏁扮粍锛岃繑鍥炵殑鏁伴噺
+ */
+ getTopRiskData(arr, num) {
+ // 鎸夌収riskValue闄嶅簭鎺掑垪
+ arr.sort((a, b) => b.riskValue - a.riskValue)
+ // 鑾峰彇鍓峮um涓厓绱�
+ return arr.slice(0, num)
}
}
-};
+}
</script>
+
<template>
- <div class="search-container">
- <el-container>
- <el-main>
- <el-form :inline="true" :model="form">
- <el-form-item>
- <AreaAndmonitorType></AreaAndmonitorType>
- </el-form-item>
- <el-form-item>
- <InputSearch
- :isNeedDefaultSite="1"
- @submit-value="(n) => (form.name = n)"
- ></InputSearch>
- </el-form-item>
- <el-form-item>
- <TimeSelectWithShortCuts
- @submit-time="giveTime"
- ></TimeSelectWithShortCuts>
- </el-form-item>
+ <el-form :inline="true" :model="form">
+ <el-form-item class="form-item">
+ <AreaAndmonitorType></AreaAndmonitorType>
+ </el-form-item>
+ <el-form-item class="form-item">
+ <InputSearch
+ :site-name="form.name"
+ isNeedDefaultSite="0"
+ @submit-value="(n) => (form.name = n)"
+ ></InputSearch>
+ </el-form-item>
- <el-form-item>
- <el-button type="primary" @click="fetch">灞曠ず鎶樼嚎鍥�</el-button>
- </el-form-item>
- <!-- <div>
- <el-form-item>
- <el-radio-group v-model="radio" @change="setChart">
- <el-radio :label="1">棰楃矑鐗╂祿搴﹀钩鍧囧��</el-radio>
- <el-radio :label="2">鏁版嵁鍦ㄧ嚎/鏈夋晥/瓒呮爣鐜�</el-radio>
- </el-radio-group>
- </el-form-item>
- </div> -->
- </el-form>
- <div>鏁版嵁缁熻鏃舵锛歿{}}</div>
+ <el-form-item>
+ <MonthSelect :month="this.month_1" @submit-value="giveMonth"></MonthSelect>
+ </el-form-item>
- <el-row :gutter="24">
- <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
- <el-card
- shadow="never"
- :style="{ height: `calc(${height}px - 35vh - 250px)` }"
+ <el-form-item>
+ <ButtonClick
+ content="椋庨櫓璇勪及"
+ type="primary"
+ :loading="queryButton"
+ @do-search="riskAssessment"
+ ></ButtonClick>
+ </el-form-item>
+ </el-form>
+
+ <div v-loading="screenLoading" class="wait-name">
+ <div class="chart-container" v-show="!isNoData && !screenLoading">
+ <div class="time-text">
+ <span>鏁版嵁缁熻鏃舵锛歿{ begin }} ~ {{ end }}</span>
+ <span class="site-name">{{ form.name }}</span>
+ </div>
+
+ <el-row :gutter="10">
+ <el-col :span="5">
+ <el-card shadow="never" class="table-class">
+ <el-table
+ ref="table"
+ highlight-current-row="true"
+ :data="top_10_sites_with_risk_values"
+ :default-sort="{ prop: 'riskValue', order: 'descending' }"
+ height="540"
>
- <template #default>
- <LineChart
- title="鏃ュ潎鍊�"
- :chartData="chartData1"
- yName="娴撳害"
- seriesName="鏃ュ潎鍊�"
- >
- </LineChart>
- </template>
- </el-card>
- </el-col>
+ <el-table-column
+ type="index"
+ label="搴忓彿"
+ :index="indexMethod"
+ fixed
+ width="25"
+ show-overflow-tooltip
+ />
+ <el-table-column prop="siteName" label="绔欑偣鍚嶇О" show-overflow-tooltip />
+ <el-table-column
+ prop="riskValue"
+ label="椋庨櫓鍊�"
+ sortable
+ width="67"
+ show-overflow-tooltip
+ />
+ <el-table-column label="鎿嶄綔" align="center">
+ <template #default="{ row }">
+ <el-button
+ type="primary"
+ text
+ class="table-button"
+ @click="querySiteStaticsInfo(row)"
+ >椋庨櫓璇︽儏</el-button
+ >
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-card>
+ </el-col>
- <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
- <el-card
- shadow="never"
- :style="{ height: `calc(${height}px - 35vh - 250px)` }"
- >
- <template #default>
- <LineChart
- title="鏃ュ湪绾跨巼"
- :chartData="chartData2"
- yName="鐧惧垎姣�"
- seriesName="鏃ュ湪绾跨巼"
- >
- </LineChart>
- </template>
- </el-card>
- </el-col>
+ <el-col :span="12">
+ <el-card shadow="never" class="table-class">
+ <DustRadarChart
+ :name="[
+ '鏁版嵁鏈夋晥椋庨櫓',
+ '鍏稿瀷寮傚父澶嶇幇椋庨櫓',
+ '寮傚父绫诲瀷鑱氶泦椋庨櫓',
+ '鏁版嵁瓒呮爣椋庨櫓',
+ '鏁版嵁鍦ㄧ嚎椋庨櫓'
+ ]"
+ :yData="[
+ bill.valid,
+ bill.exceptionRecurrence,
+ bill.exceptionTypeAggregation,
+ bill.exceeding,
+ bill.online
+ ]"
+ ></DustRadarChart>
+ </el-card>
+ </el-col>
- <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
- <el-card shadow="never"
- :style="{ height: `calc(${height}px - 35vh - 250px)` }">
- <template #default>
- <LineChart
- title="鏃ユ湁鏁堢巼"
- :chartData="chartData3"
- yName="鐧惧垎姣�"
- seriesName="鏃ユ湁鏁堢巼"
- >
- </LineChart>
- </template>
- </el-card>
- </el-col>
+ <el-col :span="3">
+ <el-card shadow="never" class="card-height">
+ <template #header>
+ <h1
+ :class="{
+ 'weightColor-low': weight < 0.2,
+ 'weightColor-medium': weight >= 0.2 && weight < 0.6,
+ 'weightColor-heigh': weight >= 0.6
+ }"
+ >
+ 椋庨櫓鍊�(0~1)锛歿{ weight }}
+ </h1>
+ </template>
+ <div class="risk-grade">
+ <strong>椋庨櫓绛夌骇锛�</strong>
+ <span v-if="weight >= 0.6"> 楂橀闄�</span>
+ <span v-else-if="weight >= 0.2 && weight < 0.6"> 涓闄�</span>
+ <span v-else> 浣庨闄�</span>
+ </div>
- <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
- <el-card shadow="never" :style="{ height: `calc(${height}px - 35vh - 250px)` }">
- <template #default>
- <LineChart
- title="鏃ヨ秴鏍囩巼"
- :chartData="chartData4"
- yName="鐧惧垎姣�"
- seriesName="鏃ヨ秴鏍囩巼"
- >
- </LineChart>
- </template>
- </el-card>
- </el-col>
- </el-row>
+ <div class="risk-advice">
+ <strong>绠℃帶寤鸿锛�</strong>
+ <span v-if="weight >= 0.6"> 寤鸿瀵硅绔欑偣杩涜绾夸笅鎵ф硶妫�鏌ワ紝涓撻」鏁版嵁瀵规瘮</span>
+ <span v-else-if="weight >= 0.2 && weight < 0.6"> 寤鸿寮�灞曞父鎬佽拷韪垎鏋�</span>
+ <span v-else> 寤鸿寮曞浼佷笟闀挎�佷繚鎸�</span>
+ </div>
+ <div class="grade-instance">
+ <div class="container">
+ <div class="block-color heigh"></div>
+ <div>楂橀闄�(鈮�0.6)</div>
+ </div>
+ <div class="container">
+ <div class="block-color medium"></div>
+ <div>涓闄�(0.2~0.6)</div>
+ </div>
+ <div class="container">
+ <div class="block-color low"></div>
+ <div>浣庨闄�(锛�0.2)</div>
+ </div>
+ </div>
+ </el-card>
+ </el-col>
- <el-row :gutter="20">
- <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
- <el-card
- shadow="never"
- :style="{ height: `calc(${height}px - 35vh - 250px)` }"
- >
- <DustRadarChart :name="['鏁版嵁鏈夋晥鐜�','鍏稿瀷寮傚父澶嶇幇鐜�','寮傚父绫诲瀷鑱氶泦搴�','鏁版嵁瓒呮爣鐜�','鏁版嵁鍦ㄧ嚎鐜�']" :data="[bill.valid,bill.exceptionRecurrence,bill.exceptionTypeAggregation,bill.exceeding,bill.online]" ></DustRadarChart>
- </el-card>
- </el-col>
+ <el-col :span="4">
+ <el-card shadow="never" class="card-height">
+ <template #header><span class="title-16">椋庨櫓璇︽儏</span></template>
- <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
- <el-card
- shadow="never"
- :style="{ height: `calc(${height}px - 35vh - 250px)` }"
- >
- <template #header>寮傚父鏁伴噺缁熻</template>
- <el-space direction="vertical">
- <div>鏈�澶у��:{{ bill.max }} mg/m鲁</div>
- <div>鏈�灏忓��:{{ bill.min }} mg/m鲁</div>
- <div>鍧囧��:{{ bill.avg }} mg/m鲁</div>
- <div>鏁版嵁鏈夋晥鐜�:{{ bill.online }}%</div>
- <div>鏁版嵁鍦ㄧ嚎鐜�:{{ bill.valid }}%</div>
- <div>鏁版嵁瓒呮爣鐜�:{{ bill.exceeding }}%</div>
- <div>寮傚父绫诲瀷鑱氶泦搴�:{{ bill.exceptionTypeAggregation*100 }}%</div>
- <div>鍏稿瀷寮傚父澶嶇幇鐜�:{{ bill.exceptionRecurrence*100 }}%</div>
- </el-space>
- </el-card>
- </el-col>
+ <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-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
- <el-card
- shadow="never"
- :style="{ height: `calc(${height}px - 35vh - 250px)` }"
- >
- <template #header>椋庨櫓绛夌骇</template>
- <template #default>
- <el-space direction="vertical">
- <el-text>楂橀闄�(鈮�0.6)</el-text>
- <el-text>涓闄�(0.2~0.6)</el-text>
- <el-text>浣庨闄�(锛�0.2)</el-text>
- </el-space>
- </template>
- </el-card>
- </el-col>
- </el-row>
- </el-main>
- </el-container>
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <el-card shadow="never" class="card-value">
+ <LineChart title="鏃ュ潎鍊�" :chartData="chartData1" yName="mg/m鲁" seriesName="鏃ュ潎鍊�">
+ </LineChart>
+ </el-card>
+ </el-col>
+
+ <el-col :span="12">
+ <el-card shadow="never" class="card-value">
+ <LineChart title="鏃ュ湪绾跨巼" :chartData="chartData2" yName="%" seriesName="鏃ュ湪绾跨巼">
+ </LineChart>
+ </el-card>
+ </el-col>
+ </el-row>
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <el-card shadow="never" class="card-value">
+ <LineChart title="鏃ユ湁鏁堢巼" :chartData="chartData3" yName="%" seriesName="鏃ユ湁鏁堢巼">
+ </LineChart>
+ </el-card>
+ </el-col>
+
+ <el-col :span="12">
+ <el-card shadow="never" class="card-value">
+ <LineChart title="鏃ヨ秴鏍囩巼" :chartData="chartData4" yName="%" seriesName="鏃ヨ秴鏍囩巼">
+ </LineChart>
+ </el-card>
+ </el-col>
+ </el-row>
+ </div>
</div>
+ <el-empty description="鏆傛棤鏁版嵁" v-show="isNoData" :image-size="200" />
</template>
<style scoped>
+.el-form {
+ margin: 10px;
+}
+.form-item {
+ margin-top: 10px;
+}
+.chart-container {
+ margin-left: 10px;
+}
+.time-text {
+ font-size: 14px;
+ color: #333333;
+ letter-spacing: 1px;
+}
.el-card {
margin-top: 15px;
border-radius: 9px;
}
.chart-container {
- width: 100%;
- height: 600px;
+ width: 98%;
+ /* height: 600px; */
+}
+.card-value {
+ /* min-width:900px; */
+ /* padding:0px */
+}
+.card-height {
+ height: 570px;
}
.el-header {
background-color: #010408;
color: #333;
line-height: 60px;
}
+.risk-advice {
+ margin: 40px 0px;
+}
+.container {
+ display: flex;
+ margin-bottom: 10px;
+}
+.grade-instance {
+ margin-top: 80px;
+}
+.block-color {
+ width: 1em;
+ height: 1em;
+ margin-right: 10px;
+ margin-top: 3px;
+}
+.heigh {
+ background-color: red;
+}
+.medium {
+ background-color: #fadc19;
+}
+.low {
+ background-color: #9fdb1d;
+}
+
+.el-text {
+ align-self: left;
+}
+.el-form-item {
+ margin-bottom: 20px;
+}
+:deep().el-form-item__content {
+ justify-content: flex-end;
+}
+.title-16 {
+ font-size: 16px;
+ font-weight: bold;
+}
+.weightColor-low {
+ color: #9fdb1d;
+}
+.weightColor-medium {
+ color: #dabe09;
+}
+.weightColor-heigh {
+ color: red;
+}
+.risk-grade {
+ display: flex;
+ margin-top: 10px;
+}
+:deep().el-table__header-wrapper {
+ color: red;
+}
+/* .wait-name {
+ width: 500px;
+ height: 600px;
+ } */
+.table-class {
+ /* border: 1px solid blue; */
+ /* margin: 20px 0px 20px 0px; */
+ height: 570px;
+}
+
+.table-button {
+ letter-spacing: 1px;
+ text-decoration: underline;
+ border-radius: 0px;
+}
+.site-name {
+ margin-left: 20px;
+}
</style>
--
Gitblit v1.9.3