From 34257f504330191b1a698eb48b52217095db47fe Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期一, 04 九月 2023 18:10:46 +0800
Subject: [PATCH] 扬尘vue
---
src/views/line_graph/DataRiskModel.vue | 242 ++++++++++++++++++++++++++++++++----------------
1 files changed, 162 insertions(+), 80 deletions(-)
diff --git a/src/views/line_graph/DataRiskModel.vue b/src/views/line_graph/DataRiskModel.vue
index db0d463..aaf2359 100644
--- a/src/views/line_graph/DataRiskModel.vue
+++ b/src/views/line_graph/DataRiskModel.vue
@@ -1,14 +1,19 @@
<!-- 鏃ュ潎鍊� -->
<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'
+
+
+// const DustRadarChart = defineAsyncComponent(() =>
+// import('./components/DustRadarChart.vue')
+// )
import dayjs from 'dayjs';
export default {
@@ -29,8 +34,8 @@
chartData3: {},
chartData4: {},
//devId:'', //璁惧缂栧彿
- // begin: '2023-05-01', //寮�濮嬫椂闂�
- // end: '2023-05-15', //缁撴潫鏃堕棿
+ begin: '', //寮�濮嬫椂闂�
+ end: '', //缁撴潫鏃堕棿
form: {
// 绔欑偣鍚嶇О
@@ -153,11 +158,13 @@
* @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;
+ // 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;
},
/**
* 浠庡垎鏋愭暟鎹暟缁勪腑鎵惧埌鏈�灏忓拰澶у��
@@ -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;
},
@@ -278,6 +286,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
});
},
@@ -342,49 +353,123 @@
<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>
<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"
></TimeSelectWithShortCuts>
</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>
+ <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-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>
+
+ <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"
- :style="{ height: `calc(${height}px - 35vh - 250px)` }"
+
>
<template #default>
<LineChart
title="鏃ュ潎鍊�"
:chartData="chartData1"
- yName="娴撳害"
+ yName="mg/m鲁"
seriesName="鏃ュ潎鍊�"
>
</LineChart>
@@ -395,13 +480,13 @@
<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="鐧惧垎姣�"
+ yName="%"
seriesName="鏃ュ湪绾跨巼"
>
</LineChart>
@@ -411,12 +496,12 @@
<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="鐧惧垎姣�"
+ yName="%"
seriesName="鏃ユ湁鏁堢巼"
>
</LineChart>
@@ -425,12 +510,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="chartData4"
- yName="鐧惧垎姣�"
+ yName="%"
seriesName="鏃ヨ秴鏍囩巼"
>
</LineChart>
@@ -439,57 +524,17 @@
</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>
- </el-row>
</el-main>
</el-container>
</div>
</template>
<style scoped>
+.time-text {
+ letter-spacing: 2px;
+}
.el-card {
margin-top: 15px;
border-radius: 9px;
@@ -503,4 +548,41 @@
color: #333;
line-height: 60px;
}
+.container {
+ display: flex;
+ margin-bottom: 10px;
+}
+.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;
+}
+.el-row {
+}
</style>
--
Gitblit v1.9.3