From 73b40d54554307ced5aab5b89dff6e1980e8a242 Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期四, 26 十月 2023 16:48:01 +0800
Subject: [PATCH] 分险排名页面增加站点清单 辅助审核增加了选择日期以及查看详情页面的样式调整
---
src/views/line_graph/DataRiskModel.vue | 816 ++++++++++++++++++++++++++++++----------------------------
1 files changed, 423 insertions(+), 393 deletions(-)
diff --git a/src/views/line_graph/DataRiskModel.vue b/src/views/line_graph/DataRiskModel.vue
index aaf2359..91100fb 100644
--- a/src/views/line_graph/DataRiskModel.vue
+++ b/src/views/line_graph/DataRiskModel.vue
@@ -1,33 +1,34 @@
<!-- 鏃ュ潎鍊� -->
-<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';
+<script>
+// import DateSelectWithShortCuts from '@/sfc/DateSelectWithShortCuts.vue'
+import InputSearch from '@/sfc/InputSearch.vue'
+import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'
+
+import DustRadarChart from './components/DustRadarChart.vue'
+import exceptionApi from '@/api/exceptionApi.js'
import LineChart from './components/LineChart.vue'
-
-
-// const DustRadarChart = defineAsyncComponent(() =>
-// import('./components/DustRadarChart.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 rank from '@/utils/risk_estimate_common_function/rank.js'
+import MonthSelect from '@/sfc/MonthSelect.vue';
export default {
components: {
LineChart,
- TimeSelectWithShortCuts,
+ // DateSelectWithShortCuts,
InputSearch,
AreaAndmonitorType,
- DustRadarChart
+ DustRadarChart,
+ ButtonClick,
+ MonthSelect
},
data() {
return {
isNoData: false,
loading: false,
+ screenLoading:false,
chartData: [],
chartData1: {}, //淇濆瓨鏌ヨ鐨勭粨鏋�
chartData2: {},
@@ -42,6 +43,8 @@
name: '',
// 璁惧缂栧彿
number: '',
+
+ month:'',
// 寮�濮嬫椂闂�
beginTime: '',
// 缁撴潫鏃堕棿
@@ -54,172 +57,85 @@
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:'閲戝北鍖洪噾灞辨柊鍩嶫SC1-0401鍗曞厓1-11-01鍦板潡椤圭洰09',
+ riskValue:0.2
}
- };
+ ]
+ }
},
- setup() {
- const { height } = useWindowSize();
- return { height };
+
+ watch:{
+
+ },
+ computed: {
+ weight() {
+ let singleOnline = ((100 - this.bill.online) / 100) * 0.1
+ let singleValid = ((100 - this.bill.valid) / 100) * 0.2
+ let singleExceeding = (this.bill.exceeding / 100) * 0.2
+ let singleAggregation = this.bill.exceptionTypeAggregation * 0.2
+ let singleRecurrence = this.bill.exceptionRecurrence * 0.3
+ let allWeight = (
+ singleOnline +
+ singleValid +
+ singleExceeding +
+ singleAggregation +
+ singleRecurrence
+ ).toFixed(2)
+
+ return allWeight
+ }
},
mounted() {
- this.fetch();
+ // 椤甸潰鍔犺浇鏄剧ず椋庨櫓鏈�楂樼殑绔欑偣
+ // this.getRiskWeightName()
+
+ this.fetch()
+ // 璁＄畻椋庨櫓鎺掑悕娓呭崟
+ this.getRiskRank()
},
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
+ // 鏌ヨ绔欑偣缁熻淇℃伅
+ querySiteStaticsInfo(row){
+ this.form.name = row.siteName
+ this.riskDetails()
},
- /**
- * 璁＄畻鏃ユ湡鐩稿樊鍑犲ぉ
- * @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));
+ async getRiskWeightName() {
+ this.screenLoading = true
+ this.form.name = await rank.fetchData(this.form.beginTime, this.form.endTime);
- return dayjs(endDate).diff(startDate,'day') + 1;
+ // 鍔犺浇璇ラ闄╂竻鍗�
+ this.fetch()
+ this.screenLoading = false
},
- /**
- * 浠庡垎鏋愭暟鎹暟缁勪腑鎵惧埌鏈�灏忓拰澶у��
- * @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;
+ 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);
- // 璁＄畻閫夋嫨鐨勬椂闂寸殑鐩稿樊鐨勫ぉ鏁�
- 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);
- console.log('鏃ユ湡闂撮殧',dayDiff);
- 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.toFixed(3);
- obj['max'] = max.toFixed(3);
-
- obj['avg'] = avg.toFixed(2);
- obj['online'] = online.toFixed(2);
- obj['valid'] = valid.toFixed(2);
- obj['exceeding'] = exceeding.toFixed(2);
-
- return obj;
- },
+ },
/**
* 灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮�
@@ -228,8 +144,8 @@
*/
giveTime(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.form.beginTime = dayjs(val[0]).format('YYYY-MM-DD')
+ this.form.endTime = dayjs(val[1]).format('YYYY-MM-DD')
},
/**
* 鍒濆鍔犺浇鍑芥暟
@@ -237,97 +153,101 @@
* @returns锛�
*/
fetch() {
+ // 璁＄畻椋庨櫓鎺掑悕娓呭崟,鑾峰彇椋庨櫓鏈�楂樼殑绔欑偣鍚嶅瓧
+ this.getRiskRank()
+
// 鍒嗘瀽鏁版嵁
- this.fetchData();
+ this.fetchData()
// 寮傚父鏁版嵁
- this.exceptiondataCount();
+ this.exceptiondataCount()
+
+
+ },
+ riskDetails() {
+ // 鍒嗘瀽鏁版嵁
+ this.fetchData()
+ // 寮傚父鏁版嵁
+ this.exceptiondataCount()
},
// 鐐瑰嚮灞曠ず鎸夐挳
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 = {};
+ 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.isNoData = false;
- this.setChart();
+ this.isNoData = false
+ this.setChart()
- let temp = this.calBillData(this.chartData);
- console.log('temp:', temp);
- this.bill.min = temp['min'];
- this.bill.max = temp['max'];
+ let temp = index.calBillData(this.chartData, this.form.beginTime, this.form.endTime)
+ 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']
this.begin = this.chartData[0].lst
- this.end = this.chartData[this.chartData.length-1].lst
- });
+ this.end = this.chartData[this.chartData.length - 1].lst
+ })
},
// 閫夋嫨鍏朵粬鍊肩被鍨嬫椂
setChart() {
if (this.chartData.length) {
// x杞存棩鏈熸椂闂�
- let dateList = [];
+ let dateList = []
//棰楃矑鐗╁钩鍧囨祿搴�
- let dayAvg = [];
- let dataOnline = [];
- let dataValid = [];
- let dataExceed = [];
+ let dayAvg = []
+ let dataOnline = []
+ let dataValid = []
+ let dataExceed = []
this.chartData.forEach((item) => {
//x杞存棩鏈�
- dateList.push(item.lst);
+ 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));
- });
+ 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
- };
+ }
}
},
@@ -340,198 +260,271 @@
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']
- });
- }
- }
-};
-</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-item>
- <el-button type="primary" @click="fetch">灞曠ず鎶樼嚎鍥�</el-button>
- </el-form-item>
-
- </el-form>
+ // 鐐瑰嚮椋庨櫓鎺掑悕鎸夐挳
+ getRiskRank() {
+ exceptionApi
+ .analysisdataByType(this.form.month, 'month')
+ .then((response) => {
+ let staticsData = response.data.data
- <div class="time-text">鏁版嵁缁熻鏃舵锛歿{ begin}} ~ {{ end }}</div>
+ exceptionApi
+ .exceptiondata1({
+ siteName: this.form.name,
+ beginTime: this.form.beginTime,
+ endTime: this.form.endTime
+ })
+ .then((res) => {
+ const riskValueSite = index.merge(
+ staticsData,
+ res.data.data,
+ this.form.beginTime,
+ this.form.endTime
+ )
+ // 鑾峰彇鎺掑悕鍓�10鐨勯闄╁�肩珯鐐�
+
+ this.top_10_sites_with_risk_values = this.getTopriskData(riskValueSite,10)
+ this.form.name = this.top_10_sites_with_risk_values[0].siteName
+
+ this.$nextTick(()=>{
+ this.$refs.table.sort('riskValue','descending')
+ console.log('琛ㄦ牸鏁版嵁涓猴細',this.top_10_sites_with_risk_values);
+ })
- <el-row :gutter="20">
- <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="16" >
-
- <el-card
- shadow="never"
- >
- <DustRadarChart :name="['鏁版嵁鏈夋晥鐜�','鍏稿瀷寮傚父澶嶇幇鐜�','寮傚父绫诲瀷鑱氶泦搴�','鏁版嵁瓒呮爣鐜�','鏁版嵁鍦ㄧ嚎鐜�']" :yData="[bill.valid,bill.exceptionRecurrence,bill.exceptionTypeAggregation,bill.exceeding,bill.online]" ></DustRadarChart>
- 鏉冮噸锛歿{ ((bill.online*0.1+bill.valid*0.2+bill.exceeding*0.2+bill.exceptionTypeAggregation*0.2+bill.exceptionRecurrence*0.3)*0.01).toFixed(2) }}
- </el-card>
-
-
- </el-col>
-
- <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="4">
- <el-card
- shadow="never"
- style="width: 200px;min-width: 200px;"
- >
- <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="鍏稿瀷寮傚父澶嶇幇鐜囷細" label-width="auto">
- {{ bill.exceptionRecurrence*100 }}%
- </el-form-item>
- </el-form>
-
+ })
- </el-card>
- </el-col>
+ })
+ },
+/**
+ * 闄嶅簭鎺掑垪锛岃繑鍥為檷搴忓墠num鐨勫厓绱�
+ * @param锛� 瀵硅薄鏁扮粍锛岃繑鍥炵殑鏁伴噺
+ */
+getTopriskData(arr,num) {
+ // 鎸夌収riskValue闄嶅簭鎺掑垪
+ arr.sort((a, b) => b.riskValue - a.riskValue);
+ // 鑾峰彇鍓峮um涓厓绱�
+ return arr.slice(0,num);
+ }
- <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="4">
- <el-card
- shadow="never"
-
- style="width:200px; min-width: 200px;"
+ }
+}
+</script>
+
+
+<template>
+ <el-form :inline="true" :model="form">
+ <el-form-item class="form-item">
+ <AreaAndmonitorType></AreaAndmonitorType>
+ </el-form-item>
+ <el-form-item class="form-item">
+ <!-- <InputSearch isNeedDefaultSite="1" @submit-value="(n) => (form.name = n)" :siteName="form.name"></InputSearch> -->
+ <InputSearch :site-name="form.name" isNeedDefaultSite="1" @submit-value="(n) => (form.name = n)" ></InputSearch>
+ </el-form-item>
+
+ <!-- <el-form-item>
+ <DateSelectWithShortCuts @submit-time="giveTime"></DateSelectWithShortCuts>
+ </el-form-item> -->
+
+ <el-form-item>
+ <MonthSelect @submit-value="giveMonth"></MonthSelect>
+ </el-form-item>
+
+
+ <el-form-item>
+ <ButtonClick
+ content="椋庨櫓璇勪及"
+ type="primary"
+ :loading="queryButton"
+ @do-search="fetch"
+ ></ButtonClick>
+ </el-form-item>
+ </el-form>
+ <div v-loading="screenLoading" class="wait-name">
+ <div class="chart-container" v-show="!isNoData && !screenLoading " >
+ <div class="time-text">鏁版嵁缁熻鏃舵锛歿{ begin }} ~ {{ end }}</div>
+
+ <el-row :gutter="10">
+ <el-col :span="5">
+ <div class="table-class">
+ <el-table
+ ref="table"
+ highlight-current-row="true"
+ :data="top_10_sites_with_risk_values"
+ :default-sort="{ prop: 'riskValue', order: 'descending' }"
+ height="540">
+ <el-table-column
+ type="index"
+ label="搴忓彿"
+ :index="indexMethod"
+ fixed
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="siteName"
+ label="绔欑偣鍚嶇О"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="riskValue"
+ label="椋庨櫓鍊�"
+ sortable
+ width="70"
+ show-overflow-tooltip
+ />
+ <el-table-column label="鎿嶄綔" align="center">
+ <template #default="{ row }">
+ <el-button type="primary" text class="table-button" @click="querySiteStaticsInfo(row)"
+ >椋庨櫓璇︽儏</el-button
>
- <template #header>
- <span class="title-16">椋庨櫓绛夌骇</span>
- </template>
- <template #default>
- <!-- <el-space direction="vertical" :size="15" > -->
- <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>
-
-
-
- <!-- </el-space> -->
- </template>
- </el-card>
- </el-col>
- </el-row>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+
+ </el-col>
+ <el-col :span="12">
+ <el-card shadow="never">
+ <DustRadarChart
+ :name="[
+ '鏁版嵁鏈夋晥椋庨櫓',
+ '鍏稿瀷寮傚父澶嶇幇椋庨櫓',
+ '寮傚父绫诲瀷鑱氶泦椋庨櫓',
+ '鏁版嵁瓒呮爣椋庨櫓',
+ '鏁版嵁鍦ㄧ嚎椋庨櫓'
+ ]"
+ :yData="[
+ bill.valid,
+ bill.exceptionRecurrence,
+ bill.exceptionTypeAggregation,
+ bill.exceeding,
+ bill.online
+ ]"
+ ></DustRadarChart>
+ </el-card>
+ </el-col>
- <el-row :gutter="24">
- <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
- <el-card
- shadow="never"
-
+ <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
+ }"
>
- <template #default>
- <LineChart
- title="鏃ュ潎鍊�"
- :chartData="chartData1"
- yName="mg/m鲁"
- seriesName="鏃ュ潎鍊�"
- >
- </LineChart>
- </template>
- </el-card>
- </el-col>
+ 椋庨櫓鍊�(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"
-
- >
- <template #default>
- <LineChart
- title="鏃ュ湪绾跨巼"
- :chartData="chartData2"
- yName="%"
- seriesName="鏃ュ湪绾跨巼"
- >
- </LineChart>
- </template>
- </el-card>
- </el-col>
+ <div class="risk-advice">
+ <strong>绠℃帶寤鸿锛�</strong>
+ <span v-if="weight >= 0.6"> 寤鸿瀵硅绔欑偣杩涜绾夸笅鎵ф硶妫�鏌ワ紝涓撻」鏁版嵁瀵规瘮</span>
+ <span v-else-if="weight >= 0.2 && weight < 0.6"> 寤鸿寮�灞曞父鎬佽拷韪垎鏋�</span>
+ <span v-else> 寤鸿寮曞浼佷笟闀挎�佷繚鎸�</span>
+ </div>
+ <div class="grade-instance">
+ <div class="container">
+ <div class="block-color heigh"></div>
+ <div>楂橀闄�(鈮�0.6)</div>
+ </div>
+ <div class="container">
+ <div class="block-color medium"></div>
+ <div>涓闄�(0.2~0.6)</div>
+ </div>
+ <div class="container">
+ <div class="block-color low"></div>
+ <div>浣庨闄�(锛�0.2)</div>
+ </div>
+ </div>
+ </el-card>
+ </el-col>
- <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
- <el-card shadow="never"
- >
- <template #default>
- <LineChart
- title="鏃ユ湁鏁堢巼"
- :chartData="chartData3"
- yName="%"
- seriesName="鏃ユ湁鏁堢巼"
- >
- </LineChart>
- </template>
- </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="12" :xl="6">
- <el-card shadow="never" >
- <template #default>
- <LineChart
- title="鏃ヨ秴鏍囩巼"
- :chartData="chartData4"
- yName="%"
- seriesName="鏃ヨ秴鏍囩巼"
- >
- </LineChart>
- </template>
- </el-card>
- </el-col>
- </el-row>
+ <el-form>
+ <el-form-item label="鏈�澶у�硷細"> {{ bill.max }} mg/m鲁 </el-form-item>
+ <el-form-item label="鏈�灏忓�硷細"> {{ bill.min }} mg/m鲁 </el-form-item>
+ <el-form-item label="鏁版嵁鏈夋晥鐜囷細"> {{ bill.online }}% </el-form-item>
+ <el-form-item label="鏁版嵁鍦ㄧ嚎鐜囷細"> {{ bill.valid }}% </el-form-item>
+ <el-form-item label="鏁版嵁瓒呮爣鐜囷細"> {{ bill.exceeding }}% </el-form-item>
+ <el-form-item label="寮傚父绫诲瀷鑱氶泦搴︼細">
+ {{ bill.exceptionTypeAggregation * 100 }}%
+ </el-form-item>
+ <el-form-item label="鍏稿瀷寮傚父澶嶇幇鐜囷細">
+ {{ bill.exceptionRecurrence * 100 }}%
+ </el-form-item>
+ </el-form>
+ </el-card>
+ </el-col>
+ </el-row>
- </el-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 {
letter-spacing: 2px;
}
@@ -540,17 +533,30 @@
border-radius: 9px;
}
.chart-container {
- width: 100%;
- height: 600px;
+ width: 98%;
+ /* height: 600px; */
+}
+.card-value {
+ /* min-width:900px; */
+ /* padding:0px */
+}
+.card-height {
+ height: 540px;
}
.el-header {
background-color: #010408;
color: #333;
line-height: 60px;
}
+.risk-advice {
+ margin: 40px 0px;
+}
.container {
display: flex;
margin-bottom: 10px;
+}
+.grade-instance {
+ margin-top: 80px;
}
.block-color {
width: 1em;
@@ -562,27 +568,51 @@
background-color: red;
}
.medium {
- background-color: #FADC19;
+ background-color: #fadc19;
}
.low {
- background-color: #9FDB1D;
+ background-color: #9fdb1d;
}
.el-text {
align-self: left;
}
.el-form-item {
-margin-bottom: 20px;
-
+ margin-bottom: 20px;
}
:deep().el-form-item__content {
justify-content: flex-end;
-
}
.title-16 {
font-size: 16px;
font-weight: bold;
}
-.el-row {
+.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;
+}
+.table-button {
+ letter-spacing: 1px;
+ text-decoration: underline;
}
</style>
--
Gitblit v1.9.3