From b7b35d8bd8f0ff7fe4e1aa6c69a877551bed81a3 Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期三, 30 八月 2023 17:17:58 +0800
Subject: [PATCH] 扬尘Vue
---
src/views/line_graph/DataRiskModel.vue | 146 +++++++++++++++++++++++++++++-------------------
1 files changed, 87 insertions(+), 59 deletions(-)
diff --git a/src/views/line_graph/DataRiskModel.vue b/src/views/line_graph/DataRiskModel.vue
index db0d463..7a76161 100644
--- a/src/views/line_graph/DataRiskModel.vue
+++ b/src/views/line_graph/DataRiskModel.vue
@@ -29,8 +29,8 @@
chartData3: {},
chartData4: {},
//devId:'', //璁惧缂栧彿
- // begin: '2023-05-01', //寮�濮嬫椂闂�
- // end: '2023-05-15', //缁撴潫鏃堕棿
+ begin: '', //寮�濮嬫椂闂�
+ end: '', //缁撴潫鏃堕棿
form: {
// 绔欑偣鍚嶇О
@@ -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
});
},
@@ -361,18 +364,64 @@
<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>鏁版嵁缁熻鏃舵锛歿{ begin}} ~ {{ end }}</div>
+
+ <el-row :gutter="20">
+ <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+ <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="6" :xl="6">
+ <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="6" :xl="6">
+ <el-card
+ shadow="never"
+ :style="{ height: `calc(${height}px - 35vh - 250px)` }"
+ >
+ <template #header>椋庨櫓绛夌骇</template>
+ <template #default>
+ <el-space direction="vertical" :size="15">
+ <div class="container">
+ <div class="block heigh"></div> <div>楂橀闄�(鈮�0.6)</div>
+ </div>
+ <div class="container">
+ <div class="block medium" ></div> <div>涓闄�(0.2~0.6)</div>
+ </div>
+ <div class="container">
+ <div class="block 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">
@@ -384,7 +433,7 @@
<LineChart
title="鏃ュ潎鍊�"
:chartData="chartData1"
- yName="娴撳害"
+ yName="mg/m鲁"
seriesName="鏃ュ潎鍊�"
>
</LineChart>
@@ -401,7 +450,7 @@
<LineChart
title="鏃ュ湪绾跨巼"
:chartData="chartData2"
- yName="鐧惧垎姣�"
+ yName="%"
seriesName="鏃ュ湪绾跨巼"
>
</LineChart>
@@ -416,7 +465,7 @@
<LineChart
title="鏃ユ湁鏁堢巼"
:chartData="chartData3"
- yName="鐧惧垎姣�"
+ yName="%"
seriesName="鏃ユ湁鏁堢巼"
>
</LineChart>
@@ -430,7 +479,7 @@
<LineChart
title="鏃ヨ秴鏍囩巼"
:chartData="chartData4"
- yName="鐧惧垎姣�"
+ yName="%"
seriesName="鏃ヨ秴鏍囩巼"
>
</LineChart>
@@ -439,51 +488,8 @@
</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>
@@ -503,4 +509,26 @@
color: #333;
line-height: 60px;
}
+.container {
+ display: flex;
+ justify-content: space-between;
+}
+.block {
+ width: 1em;
+ height: 1em;
+ margin-right: 10px;
+}
+.heigh {
+ background-color: red;
+}
+.medium {
+ background-color: #FADC19;
+}
+.low {
+ background-color: #9FDB1D;
+}
+
+.el-text {
+ align-self: left;
+}
</style>
--
Gitblit v1.9.3