From c2f95b0b9090a2394b5b068582b932a5e57b86aa Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期二, 05 九月 2023 18:19:37 +0800
Subject: [PATCH] 雷达图 新增综合风险排名 数据接入配置
---
src/views/line_graph/DataRiskModel.vue | 279 ++++++++++++++++++++++++++++++-------------------------
1 files changed, 153 insertions(+), 126 deletions(-)
diff --git a/src/views/line_graph/DataRiskModel.vue b/src/views/line_graph/DataRiskModel.vue
index aaf2359..c8d4b60 100644
--- a/src/views/line_graph/DataRiskModel.vue
+++ b/src/views/line_graph/DataRiskModel.vue
@@ -6,14 +6,8 @@
import DustRadarChart from './components/DustRadarChart.vue';
import exceptionApi from '@/api/exceptionApi.js';
-import { useWindowSize } from '@vueuse/core';
-import LineChart from './components/LineChart.vue'
-
-
-// const DustRadarChart = defineAsyncComponent(() =>
-// import('./components/DustRadarChart.vue')
-// )
+import LineChart from './components/LineChart.vue';
import dayjs from 'dayjs';
export default {
@@ -61,14 +55,21 @@
// 鍏稿瀷寮傚父澶嶇幇鐜�
exceptionRecurrence: '',
// 寮傚父绫诲瀷鎹仛闆嗗害
- exceptionTypeAggregation: '',
-
+ exceptionTypeAggregation: ''
}
};
},
- setup() {
- const { height } = useWindowSize();
- return { height };
+
+ computed: {
+ weight() {
+ return (
+ (100 - this.bill.online) * 0.1 +
+ (100 - this.bill.valid) * 0.2 +
+ this.bill.exceeding * 0.2 +
+ this.bill.exceptionTypeAggregation * 0.2 +
+ this.bill.exceptionRecurrence * 0.3
+ ).toFixed(2);
+ }
},
mounted() {
this.fetch();
@@ -90,11 +91,11 @@
let exceedindCriticalDegree = 0;
// 淇濆瓨鍑虹幇鐨勪笉鍚屽紓甯哥被鍨�
- let exception = []
+ let exception = [];
// 寮傚父绫诲瀷鑱氶泦搴�
- let exceptionTypeAggregation = 0
-
- exceptionArr.forEach(item => {
+ let exceptionTypeAggregation = 0;
+
+ exceptionArr.forEach((item) => {
// 寮傚父澶嶇幇鐜�
if (item.exceptionType == 4) {
mutationCount++;
@@ -105,12 +106,12 @@
}
// 寮傚父绫诲瀷鑱氶泦搴�
- if(exception.length == 0){
- exception.push(item.exceptionType)
+ if (exception.length == 0) {
+ exception.push(item.exceptionType);
}
// 淇濆瓨鏂扮殑寮傚父绫诲瀷
- else if(exception.indexOf(item.exceptionType) == -1){
- exception.push(item.exceptionType)
+ else if (exception.indexOf(item.exceptionType) == -1) {
+ exception.push(item.exceptionType);
}
});
@@ -125,9 +126,14 @@
if (exceedindCriticalDegree > 1) {
sum = sum + exceedindCriticalDegree - 1;
}
- console.log('sum:',sum);
- console.log('exception:',exception);
- console.log('鍏朵粬',mutationCount,exceedindCriticalDegree,exceedindCriticalDegree);
+ console.log('sum:', sum);
+ console.log('exception:', exception);
+ console.log(
+ '鍏朵粬',
+ mutationCount,
+ exceedindCriticalDegree,
+ exceedindCriticalDegree
+ );
switch (sum) {
case 0:
exceptionTyprRecurRate = sum / 3;
@@ -143,13 +149,13 @@
return 'error';
}
- exceptionTypeAggregation = exception.length / 8
+ exceptionTypeAggregation = exception.length / 8;
- let obj = {}
- obj['exceptionRecurrence'] = exceptionTyprRecurRate
- obj['exceptionTypeAggregation'] = exceptionTypeAggregation
+ let obj = {};
+ obj['exceptionRecurrence'] = exceptionTyprRecurRate;
+ obj['exceptionTypeAggregation'] = exceptionTypeAggregation;
- return obj
+ return obj;
},
/**
* 璁＄畻鏃ユ湡鐩稿樊鍑犲ぉ
@@ -158,13 +164,7 @@
* @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 dayjs(endDate).diff(startDate,'day') + 1;
+ return dayjs(endDate).diff(startDate, 'day') + 1;
},
/**
* 浠庡垎鏋愭暟鎹暟缁勪腑鎵惧埌鏈�灏忓拰澶у��
@@ -188,7 +188,7 @@
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);
+ console.log('鏃ユ湡闂撮殧', dayDiff);
let obj = {};
// 璁＄畻鏈�灏忓拰澶у��
arr.forEach((item) => {
@@ -245,14 +245,6 @@
// 鐐瑰嚮灞曠ず鎸夐挳
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 = {};
if (this.form.name) {
params['siteName'] = this.form.name;
@@ -287,8 +279,8 @@
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.begin = this.chartData[0].lst;
+ this.end = this.chartData[this.chartData.length - 1].lst;
});
},
@@ -341,9 +333,9 @@
})
.then((res) => {
console.log('寮傚父锛�', res.data.data);
- let obj = this.calRecur(res.data.data)
- this.bill.exceptionRecurrence = obj['exceptionRecurrence']
- this.bill.exceptionTypeAggregation = obj['exceptionTypeAggregation']
+ let obj = this.calRecur(res.data.data);
+ this.bill.exceptionRecurrence = obj['exceptionRecurrence'];
+ this.bill.exceptionTypeAggregation = obj['exceptionTypeAggregation'];
});
}
}
@@ -353,9 +345,7 @@
<div class="search-container">
<el-container>
<el-main>
-
- <el-form :inline="true" :model="form" >
-
+ <el-form :inline="true" :model="form">
<el-form-item>
<AreaAndmonitorType></AreaAndmonitorType>
</el-form-item>
@@ -371,36 +361,103 @@
@submit-time="giveTime"
></TimeSelectWithShortCuts>
</el-form-item>
-
-
+
<el-form-item>
<el-button type="primary" @click="fetch">灞曠ず鎶樼嚎鍥�</el-button>
</el-form-item>
-
</el-form>
- <div class="time-text">鏁版嵁缁熻鏃舵锛歿{ begin}} ~ {{ end }}</div>
+ <div class="time-text">鏁版嵁缁熻鏃舵锛歿{ begin }} ~ {{ end }}</div>
<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-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>
+ <div>
+ 鏉冮噸锛�
+ <span
+ :class="{
+ 'weightColor-low': weight < 0.2,
+ 'weightColor-medium': weight >= 0.2 && weight < 0.6,
+ 'weightColor-heigh': weight >= 0.6
+ }"
+ >{{ weight }}</span
+ >
+ </div>
+ <div></div>
</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-card shadow="never" style="width: 200px; min-width: 200px">
+ <template #header>
+ <h1
+ :class="{
+ 'weightColor-low': weight < 0.2,
+ 'weightColor-medium': weight >= 0.2 && weight < 0.6,
+ 'weightColor-heigh': weight >= 0.6
+ }"
+ >
+ 椋庨櫓鍊硷細{{ weight }}
+ </h1>
+ </template>
+ <template #default>
+ <div class="risk-grade">
+ <h1>椋庨櫓绛夌骇锛�</h1>
+ <span v-if="weight >= 0.6"> 楂橀闄�</span>
+ <span v-else-if="weight >= 0.2 && weight < 0.6"> 涓闄�</span>
+ <span v-else> 浣庨闄�</span>
+ </div>
+
+ <div class="risk-advice">
+ <h1>绠℃帶寤鸿锛�</h1>
+ <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>
+ </template>
+ </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>
@@ -417,54 +474,19 @@
{{ bill.exceeding }}%
</el-form-item>
<el-form-item label="寮傚父绫诲瀷鑱氶泦搴︼細">
- {{ bill.exceptionTypeAggregation*100 }}%
+ {{ bill.exceptionTypeAggregation * 100 }}%
</el-form-item>
- <el-form-item label="鍏稿瀷寮傚父澶嶇幇鐜囷細" label-width="auto">
- {{ bill.exceptionRecurrence*100 }}%
+ <el-form-item label="鍏稿瀷寮傚父澶嶇幇鐜囷細">
+ {{ bill.exceptionRecurrence * 100 }}%
</el-form-item>
</el-form>
-
-
- </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>
- <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>
-
-
<el-row :gutter="24">
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
- <el-card
- shadow="never"
-
- >
+ <el-card shadow="never">
<template #default>
<LineChart
title="鏃ュ潎鍊�"
@@ -478,10 +500,7 @@
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
- <el-card
- shadow="never"
-
- >
+ <el-card shadow="never">
<template #default>
<LineChart
title="鏃ュ湪绾跨巼"
@@ -495,8 +514,7 @@
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
- <el-card shadow="never"
- >
+ <el-card shadow="never">
<template #default>
<LineChart
title="鏃ユ湁鏁堢巼"
@@ -510,7 +528,7 @@
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
- <el-card shadow="never" >
+ <el-card shadow="never">
<template #default>
<LineChart
title="鏃ヨ秴鏍囩巼"
@@ -523,9 +541,6 @@
</el-card>
</el-col>
</el-row>
-
-
-
</el-main>
</el-container>
</div>
@@ -552,6 +567,9 @@
display: flex;
margin-bottom: 10px;
}
+.grade-instance {
+ margin-top: 40px;
+}
.block-color {
width: 1em;
height: 1em;
@@ -562,27 +580,36 @@
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-bottom: 20px;
}
</style>
--
Gitblit v1.9.3