From f3acb8ce787f3df0eda633031473be4e6a9ff448 Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期四, 12 十月 2023 16:56:28 +0800
Subject: [PATCH] 油烟 更新了实时监控页面
---
src/views/analysis/graph/AllRate.vue | 67 +++++++++++++++++++++------------
1 files changed, 42 insertions(+), 25 deletions(-)
diff --git a/src/views/analysis/graph/AllRate.vue b/src/views/analysis/graph/AllRate.vue
index 7992bda..5dda4e8 100644
--- a/src/views/analysis/graph/AllRate.vue
+++ b/src/views/analysis/graph/AllRate.vue
@@ -1,10 +1,6 @@
<template>
<div>
<el-container>
- <!-- <el-header style="text-align:right; font-size:15px ">
- <i class="el-icon-s-data" style="font-size: 15px;color:rgb(226,207,207);margin-right:10px;"></i>
- <span style="color:rgb(226,207,207);">鐧惧垎姣旀暟鎹�</span>
- </el-header> -->
<el-main>
<el-form :inline="true" class="demo-form-inline">
@@ -41,13 +37,15 @@
</el-form-item>
<el-form-item>
- <el-button type="primary" @click="fetchData">灞曠ず鍥�</el-button>
+ <el-button type="primary" :loading="button.showChartButton" @click="fetchData">灞曠ず鍥�</el-button>
</el-form-item>
</el-form>
- <el-card>
- <div class="chart-container" ref="chart"></div>
+ <el-card v-loading="loading">
+ <div class="chart-container" ref="lineChart" v-show="!isNoData"></div>
+ <el-empty v-show="isNoData" :image-size="200" />
</el-card>
+
</el-main>
</el-container>
</div>
@@ -56,10 +54,17 @@
<script>
import * as echarts from 'echarts'
-import axiosInstance from '../../../utils/request.js'
+import axiosInstanceInstance from '../../../utils/request.js'
export default {
data() {
return {
+ button:{
+ // 灞曠ず鍥剧殑鎸夐挳
+ showChartButton:false,
+ },
+ isNoData:false,
+ chart:null,
+ loading:false,
chartData: [], //淇濆瓨鏌ヨ鐨勭粨鏋�
//devId:'', //璁惧缂栧彿
begin:'2023-05-01', //寮�濮嬫椂闂�
@@ -192,6 +197,7 @@
mounted(){
// 榛樿鍔犺浇浠樺皬濮愬湪鎴愰兘 5鏈�1鍙峰埌15鍙风殑
this.fetchData()
+ window.addEventListener('resize',this.updateChart)
},
methods: {
@@ -215,10 +221,20 @@
if(this.end){
params['end'] = this.end
}
-
- axiosInstance.get('/data/id',{params:params})
+ this.loading = true
+ this.button.showChartButton = true
+ axiosInstanceInstance.get('/data/id',{params:params})
.then(response => {
this.chartData = response.data.data
+ this.loading = false
+ this.button.showChartButton = false
+ if(response.data.data.length==0){
+ alert('璇ユ椂娈垫棤鏁版嵁')
+ this.isNoData = true
+ return
+ }
+ // 绉婚櫎绌烘暟鎹姸鎬�
+ this.isNoData = false
this.drawChart()
})
},
@@ -271,12 +287,9 @@
keyExceeding.push(item.keyExceedingRate.slice(0,-1))
})
- let chart = echarts.init(this.$refs.chart)
- chart.setOption({
- title: {
- text: '姣旂巼',
- //left: 'center'
- },
+ this.chart = echarts.init(this.$refs.lineChart)
+ this.chart.setOption({
+
grid: {
left: '3%',
right: '4%',
@@ -287,7 +300,7 @@
legend: {
data: ['鍑�鍖栧櫒寮�鍚巼','瓒呮爣鐜�','鏁版嵁鏈夋晥鐜�','鏃ュ湪绾跨巼','涓崍鍦ㄧ嚎鐜�','鏅氫笂鍦ㄧ嚎鐜�','閲嶇偣鏃舵鍦ㄧ嚎鐜�','涓崍鏈夋晥鐜�','鏅氫笂鏈夋晥鐜�','閲嶇偣鏃舵鏈夋晥鐜�','涓崍寮�鍚巼','鏅氫笂寮�鍚巼','閲嶇偣鏃舵寮�鍚巼','涓崍瓒呮爣鐜�','鏅氫笂瓒呮爣鐜�','閲嶇偣鏃舵瓒呮爣鐜�'],
- //type: "scroll"
+
},
toolbox: { //宸ュ叿鏍�
top:20,
@@ -394,12 +407,12 @@
type: 'line',
data: keyExceeding
},
-
-
-
]
})
+ },
+ updateChart(){
+ this.chart.resize()
}
}
}
@@ -407,17 +420,21 @@
<style scoped>
.el-card {
- margin-top: 40px;
+ margin-top: 50px;
+ width:90%;
+ border-radius: 9px;
}
.chart-container {
- width: 100%;
- height: 600px;
-
+ width:100%;
+ height: 540px;
}
.el-header {
background-color: #010408;
color: #333;
line-height: 60px;
}
-
+:deep().el-form .el-form-item__label{
+ color: #000000;
+ font-weight: bold;
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.3