From 17388fa7ecd1f3ebadad470a463573a1cfe4468f Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期四, 31 八月 2023 11:29:31 +0800
Subject: [PATCH] 扬尘Vue
---
src/views/line_graph/DataRiskModel.vue | 139 ++++++++++++++++++++++++++++++++--------------
1 files changed, 97 insertions(+), 42 deletions(-)
diff --git a/src/views/line_graph/DataRiskModel.vue b/src/views/line_graph/DataRiskModel.vue
index 7a76161..ceb7659 100644
--- a/src/views/line_graph/DataRiskModel.vue
+++ b/src/views/line_graph/DataRiskModel.vue
@@ -4,11 +4,16 @@
import InputSearch from '../../sfc/InputSearch.vue';
import AreaAndmonitorType from '../../sfc/AreaAndmonitorType.vue';
-import DustRadarChart from './components/DustRadarChart.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 {
@@ -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;
},
@@ -345,7 +353,9 @@
<div class="search-container">
<el-container>
<el-main>
+
<el-form :inline="true" :model="form">
+
<el-form-item>
<AreaAndmonitorType></AreaAndmonitorType>
</el-form-item>
@@ -355,79 +365,108 @@
@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>
- <div>鏁版嵁缁熻鏃舵锛歿{ 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="12">
- <el-card
+ <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-row :gutter="20">
+
+ <el-col :xs="24" :sm="24" :md="12" :lg="16" :xl="16">
+
+ <DustRadarChart :name="['鏁版嵁鏈夋晥鐜�','鍏稿瀷寮傚父澶嶇幇鐜�','寮傚父绫诲瀷鑱氶泦搴�','鏁版嵁瓒呮爣鐜�','鏁版嵁鍦ㄧ嚎鐜�']" :yData="[bill.valid,bill.exceptionRecurrence,bill.exceptionTypeAggregation,bill.exceeding,bill.online]" ></DustRadarChart>
+
</el-col>
- <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
+ <el-col :xs="24" :sm="24" :md="6" :lg="4" :xl="4">
<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>
+ <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>
+ <!-- <div class="date-text">鏈�澶у��:{{ 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>
+ <div>鍏稿瀷寮傚父澶嶇幇鐜�:{{ bill.exceptionRecurrence*100 }}%</div> -->
+
</el-card>
</el-col>
- <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
+ <el-col :xs="24" :sm="24" :md="6" :lg="4" :xl="4">
<el-card
shadow="never"
- :style="{ height: `calc(${height}px - 35vh - 250px)` }"
+
>
- <template #header>椋庨櫓绛夌骇</template>
+ <template #header>
+ <span class="title-16">椋庨櫓绛夌骇</span>
+ </template>
<template #default>
- <el-space direction="vertical" :size="15">
+ <!-- <el-space direction="vertical" :size="15" > -->
<div class="container">
- <div class="block heigh"></div> <div>楂橀闄�(鈮�0.6)</div>
+ <div class="block-color heigh"></div> <div>楂橀闄�(鈮�0.6)</div>
</div>
<div class="container">
- <div class="block medium" ></div> <div>涓闄�(0.2~0.6)</div>
+ <div class="block-color medium" ></div> <div>涓闄�(0.2~0.6)</div>
</div>
<div class="container">
- <div class="block low"></div><div>浣庨闄�(锛�0.2)</div>
+ <div class="block-color low"></div><div>浣庨闄�(锛�0.2)</div>
</div>
- </el-space>
+ <!-- </el-space> -->
</template>
</el-card>
</el-col>
</el-row>
+ </el-card>
+
<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
@@ -444,7 +483,7 @@
<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
@@ -460,7 +499,7 @@
<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="鏃ユ湁鏁堢巼"
@@ -474,7 +513,7 @@
</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="鏃ヨ秴鏍囩巼"
@@ -496,6 +535,9 @@
</template>
<style scoped>
+.time-text {
+ letter-spacing: 2px;
+}
.el-card {
margin-top: 15px;
border-radius: 9px;
@@ -511,12 +553,13 @@
}
.container {
display: flex;
- justify-content: space-between;
+ margin-bottom: 10px;
}
-.block {
+.block-color {
width: 1em;
height: 1em;
margin-right: 10px;
+ margin-top: 3px;
}
.heigh {
background-color: red;
@@ -531,4 +574,16 @@
.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;
+}
</style>
--
Gitblit v1.9.3