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 | 353 ++++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 231 insertions(+), 122 deletions(-)
diff --git a/src/views/line_graph/DataRiskModel.vue b/src/views/line_graph/DataRiskModel.vue
index db0d463..c8d4b60 100644
--- a/src/views/line_graph/DataRiskModel.vue
+++ b/src/views/line_graph/DataRiskModel.vue
@@ -1,14 +1,13 @@
<!-- 鏃ュ潎鍊� -->
<script>
-import TimeSelectWithShortCuts from '../../sfc/TimeSelectWithShortCuts.vue';
-import InputSearch from '../../sfc/InputSearch.vue';
-import AreaAndmonitorType from '../../sfc/AreaAndmonitorType.vue';
+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 LineChart from './components/LineChart.vue'
+import LineChart from './components/LineChart.vue';
import dayjs from 'dayjs';
export default {
@@ -29,8 +28,8 @@
chartData3: {},
chartData4: {},
//devId:'', //璁惧缂栧彿
- // begin: '2023-05-01', //寮�濮嬫椂闂�
- // end: '2023-05-15', //缁撴潫鏃堕棿
+ begin: '', //寮�濮嬫椂闂�
+ end: '', //缁撴潫鏃堕棿
form: {
// 绔欑偣鍚嶇О
@@ -56,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();
@@ -85,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++;
@@ -100,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);
}
});
@@ -120,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;
@@ -138,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;
},
/**
* 璁＄畻鏃ユ湡鐩稿樊鍑犲ぉ
@@ -153,11 +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 diffDays;
+ return dayjs(endDate).diff(startDate, 'day') + 1;
},
/**
* 浠庡垎鏋愭暟鎹暟缁勪腑鎵惧埌鏈�灏忓拰澶у��
@@ -181,6 +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);
let obj = {};
// 璁＄畻鏈�灏忓拰澶у��
arr.forEach((item) => {
@@ -202,13 +210,13 @@
online = sumOnline / dayDiff;
valid = sumValid / dayDiff;
exceeding = sumExceeding / dayDiff;
- obj['min'] = min;
- obj['max'] = max;
+ obj['min'] = min.toFixed(3);
+ obj['max'] = max.toFixed(3);
- obj['avg'] = avg.toFixed(3);
- obj['online'] = online.toFixed(3);
- obj['valid'] = valid.toFixed(3);
- obj['exceeding'] = exceeding.toFixed(3);
+ obj['avg'] = avg.toFixed(2);
+ obj['online'] = online.toFixed(2);
+ obj['valid'] = valid.toFixed(2);
+ obj['exceeding'] = exceeding.toFixed(2);
return obj;
},
@@ -237,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;
@@ -278,6 +278,9 @@
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;
});
},
@@ -330,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'];
});
}
}
@@ -348,10 +351,11 @@
</el-form-item>
<el-form-item>
<InputSearch
- :isNeedDefaultSite="1"
+ isNeedDefaultSite="1"
@submit-value="(n) => (form.name = n)"
></InputSearch>
</el-form-item>
+
<el-form-item>
<TimeSelectWithShortCuts
@submit-time="giveTime"
@@ -361,30 +365,133 @@
<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>
+ <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>
+ <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>
+ <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>
+ <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="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-card shadow="never">
<template #default>
<LineChart
title="鏃ュ潎鍊�"
:chartData="chartData1"
- yName="娴撳害"
+ yName="mg/m鲁"
seriesName="鏃ュ潎鍊�"
>
</LineChart>
@@ -393,15 +500,12 @@
</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)` }"
- >
+ <el-card shadow="never">
<template #default>
<LineChart
title="鏃ュ湪绾跨巼"
:chartData="chartData2"
- yName="鐧惧垎姣�"
+ yName="%"
seriesName="鏃ュ湪绾跨巼"
>
</LineChart>
@@ -410,13 +514,12 @@
</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)` }">
+ <el-card shadow="never">
<template #default>
<LineChart
title="鏃ユ湁鏁堢巼"
:chartData="chartData3"
- yName="鐧惧垎姣�"
+ yName="%"
seriesName="鏃ユ湁鏁堢巼"
>
</LineChart>
@@ -425,61 +528,15 @@
</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)` }">
+ <el-card shadow="never">
<template #default>
<LineChart
title="鏃ヨ秴鏍囩巼"
:chartData="chartData4"
- yName="鐧惧垎姣�"
+ yName="%"
seriesName="鏃ヨ秴鏍囩巼"
>
</LineChart>
- </template>
- </el-card>
- </el-col>
- </el-row>
-
- <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 :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-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>
@@ -490,6 +547,9 @@
</template>
<style scoped>
+.time-text {
+ letter-spacing: 2px;
+}
.el-card {
margin-top: 15px;
border-radius: 9px;
@@ -503,4 +563,53 @@
color: #333;
line-height: 60px;
}
+.container {
+ display: flex;
+ margin-bottom: 10px;
+}
+.grade-instance {
+ margin-top: 40px;
+}
+.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-bottom: 20px;
+}
</style>
--
Gitblit v1.9.3