From 60076cbbe1da6cc8ed3a4ebb8f67e92ea9be9e4a Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期二, 15 八月 2023 16:02:58 +0800
Subject: [PATCH] 设置按钮的加载效果
---
src/views/analysis/graph/DayData.vue | 441 +++++++++++++++++++++++++++++-------------------------
1 files changed, 237 insertions(+), 204 deletions(-)
diff --git a/src/views/analysis/graph/DayData.vue b/src/views/analysis/graph/DayData.vue
index 80e9256..6bc06c1 100644
--- a/src/views/analysis/graph/DayData.vue
+++ b/src/views/analysis/graph/DayData.vue
@@ -1,206 +1,231 @@
<template>
<div class="search-container">
<el-container>
- <!-- <el-header>
- <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-header> -->
+ <el-main>
+ <el-form :inline="true" :model="form" class="demo-form-inline">
+ <el-form-item label="搴楅摵鍚嶅拰璁惧缂栧彿">
+ <el-cascader
+ :options="options"
+ :show-all-levels="false"
+ :props="{ expandTrigger: 'hover' }"
+ placeholder="璇烽�夋嫨搴楅摵鍚嶅拰璁惧缂栧彿"
+ v-model="value"
+ style="margin-right: 32px"
+ >
+ </el-cascader>
+ </el-form-item>
- <el-main>
- <el-form :inline="true" :model="form" class="demo-form-inline">
- <!-- <el-form-item label="璁惧缂栧彿">
- <el-select class="checkbox" v-model="devId" placeholder="璇烽�夋嫨璁惧缂栧彿">
- <el-option
- v-for="item in options"
- :key="item.label"
- :label="item.label"
- :value="item.label">
- </el-option>
- </el-select> -->
- <el-form-item label="搴楅摵鍚嶅拰璁惧缂栧彿">
- <el-cascader
- :options="options"
- :show-all-levels="false"
- :props="{expandTrigger:'hover'}"
- placeholder="璇烽�夋嫨搴楅摵鍚嶅拰璁惧缂栧彿"
- v-model="value"
- style="margin-right:32px">
- </el-cascader>
- </el-form-item>
-
- <el-form-item label="寮�濮嬫棩鏈�">
- <el-date-picker
- v-model="begin"
- type="date"
- placeholder="閫夋嫨鏃ユ湡"
- value-format="YYYY-MM-DD">
- </el-date-picker>
- </el-form-item>
-
- <el-form-item label="缁撴潫鏃ユ湡">
- <el-date-picker
- v-model="end"
- type="date"
- placeholder="閫夋嫨鏃ユ湡"
- value-format="YYYY-MM-DD">
- </el-date-picker>
- </el-form-item>
-
- <el-form-item>
- <el-button type="primary" @click="fetchData">灞曠ず鍥�</el-button>
- </el-form-item>
- </el-form>
+ <el-form-item label="寮�濮嬫棩鏈�">
+ <el-date-picker
+ v-model="begin"
+ type="date"
+ placeholder="閫夋嫨鏃ユ湡"
+ value-format="YYYY-MM-DD"
+ >
+ </el-date-picker>
+ </el-form-item>
- <el-card>
- <div class="chart-container" ref="chart"></div>
- </el-card>
- </el-main>
- </el-container>
+ <el-form-item label="缁撴潫鏃ユ湡">
+ <el-date-picker
+ v-model="end"
+ type="date"
+ placeholder="閫夋嫨鏃ユ湡"
+ value-format="YYYY-MM-DD"
+ >
+ </el-date-picker>
+ </el-form-item>
+
+ <el-form-item>
+ <el-button type="primary" loading="button.showChartButton" @click="fetchData">灞曠ず鍥�</el-button>
+ </el-form-item>
+ </el-form>
+
+ <el-card v-loading="loading">
+ <div class="chart-container" ref="chart" v-show="!isNoData"></div>
+ <el-empty v-show="isNoData" :image-size="200" />
+ </el-card>
+ </el-main>
+ </el-container>
</div>
</template>
<script>
-import * as echarts from 'echarts'
-import axiosInstance from '../../../utils/request.js'
+import * as echarts from 'echarts';
+import axiosInstanceInstance from '../../../utils/request.js';
export default {
data() {
return {
- chartData: [], //淇濆瓨鏌ヨ鐨勭粨鏋�
- devId:'', //璁惧缂栧彿
- begin:'2023-05-01', //寮�濮嬫椂闂�
- end:'2023-05-15', //缁撴潫鏃堕棿
- value:['浠樺皬濮愬湪鎴愰兘','qinshi_31010320210010'], //淇濆瓨閫夋嫨鐨勫簵閾哄悕绉板拰璁惧鍚嶇О
- options: [{
+ button:{
+ // 灞曠ず鍥剧殑鎸夐挳
+ showChartButton:false,
+ },
+ isNoData:false,
+ loading: false,
+ chartData: [], //淇濆瓨鏌ヨ鐨勭粨鏋�
+ devId: '', //璁惧缂栧彿
+ begin: '2023-05-01', //寮�濮嬫椂闂�
+ end: '2023-05-15', //缁撴潫鏃堕棿
+ value: ['浠樺皬濮愬湪鎴愰兘', 'qinshi_31010320210010'], //淇濆瓨閫夋嫨鐨勫簵閾哄悕绉板拰璁惧鍚嶇О
+ options: [
+ {
value: '浠樺皬濮愬湪鎴愰兘',
label: '浠樺皬濮愬湪鎴愰兘',
- children: [{
- value: 'qinshi_31010320210010',
- label: 'qinshi_31010320210010',
- }]
+ children: [
+ {
+ value: 'qinshi_31010320210010',
+ label: 'qinshi_31010320210010'
+ }
+ ]
},
{
value: '鍚夊埢鑱旂洘',
label: '鍚夊埢鑱旂洘 ',
- children: [{
- value: 'qinshi_31010320200006',
- label: 'qinshi_31010320200006',
- }]
+ children: [
+ {
+ value: 'qinshi_31010320200006',
+ label: 'qinshi_31010320200006'
+ }
+ ]
},
{
value: '瀹跺湪濉斿暒',
label: '瀹跺湪濉斿暒',
- children: [{
- value: 'hengzhiyuan_64480047347215',
- label: 'hengzhiyuan_64480047347215',
- }]
+ children: [
+ {
+ value: 'hengzhiyuan_64480047347215',
+ label: 'hengzhiyuan_64480047347215'
+ }
+ ]
},
{
value: '鐙兼潵浜�',
label: '鐙兼潵浜� ',
- children: [{
- value: 'zhuoquan_31011020175012',
- label: 'zhuoquan_31011020175012',
- }]
+ children: [
+ {
+ value: 'zhuoquan_31011020175012',
+ label: 'zhuoquan_31011020175012'
+ }
+ ]
},
{
value: '涔愬嚡鎾掓槦娓稿簵',
label: '涔愬嚡鎾掓槦娓稿簵',
- children: [{
- value: 'qinshi_31010320200007',
- label: 'qinshi_31010320200007',
- }]
+ children: [
+ {
+ value: 'qinshi_31010320200007',
+ label: 'qinshi_31010320200007'
+ }
+ ]
},
{
value: '棣ㄨ繙缇庨灏忛晣锛堝搱灏肩編椋熷箍鍦猴級',
label: '棣ㄨ繙缇庨灏忛晣锛堝搱灏肩編椋熷箍鍦猴級',
- children: [{
- value: 'hengzhiyuan_64480047078091',
- label: 'hengzhiyuan_64480047078091',
- }]
+ children: [
+ {
+ value: 'hengzhiyuan_64480047078091',
+ label: 'hengzhiyuan_64480047078091'
+ }
+ ]
},
{
value: '妫掔害缈�',
label: '妫掔害缈�',
- children: [{
- value: 'qinshi_31010320190005',
- label: 'qinshi_31010320190005',
- }]
+ children: [
+ {
+ value: 'qinshi_31010320190005',
+ label: 'qinshi_31010320190005'
+ }
+ ]
},
{
value: '寮勫爞鍜亾',
label: '寮勫爞鍜亾',
- children: [{
- value: 'zhuoquan_31011020175008',
- label: 'zhuoquan_31011020175008',
- }]
- },{
+ children: [
+ {
+ value: 'zhuoquan_31011020175008',
+ label: 'zhuoquan_31011020175008'
+ }
+ ]
+ },
+ {
value: '鏉ㄨ榻愰綈鍝堝皵鐑よ倝',
label: '鏉ㄨ榻愰綈鍝堝皵鐑よ倝',
- children: [{
- value: 'zhuoquan_31011020175002',
- label: 'zhuoquan_31011020175002',
- }]
+ children: [
+ {
+ value: 'zhuoquan_31011020175002',
+ label: 'zhuoquan_31011020175002'
+ }
+ ]
},
{
value: '涓婃捣绋斾紶椁愰ギ绠＄悊鏈夐檺鍏徃锛堜汉鐢熶竴涓诧級',
label: '涓婃捣绋斾紶椁愰ギ绠＄悊鏈夐檺鍏徃锛堜汉鐢熶竴涓诧級',
- children: [{
- value: 'GLHB00000000016004',
- label: 'GLHB00000000016004',
- }]
+ children: [
+ {
+ value: 'GLHB00000000016004',
+ label: 'GLHB00000000016004'
+ }
+ ]
},
{
value: '缂樺',
label: '缂樺',
- children: [{
- value: 'fucheng310104200914',
- label: 'fucheng310104200914',
- }]
+ children: [
+ {
+ value: 'fucheng310104200914',
+ label: 'fucheng310104200914'
+ }
+ ]
},
{
value: '娉夌洓椁愰ギ锛堜笂娴凤級鏈夐檺鍏徃锛堥鍏跺锛�',
label: '娉夌洓椁愰ギ锛堜笂娴凤級鏈夐檺鍏徃锛堥鍏跺锛�',
- children: [{
- value: 'GLHB00000000016155',
- label: 'GLHB00000000016155',
- }]
- },{
+ children: [
+ {
+ value: 'GLHB00000000016155',
+ label: 'GLHB00000000016155'
+ }
+ ]
+ },
+ {
value: '涓拌寕鐑や覆',
label: '涓拌寕鐑や覆',
- children: [{
- value: 'GLHB00000000016011',
- label: 'GLHB00000000016011',
- }]
+ children: [
+ {
+ value: 'GLHB00000000016011',
+ label: 'GLHB00000000016011'
+ }
+ ]
},
{
value: '涓婃捣娉扮厡椁愰ギ绠＄悊鏈夐檺鍏徃锛堟嘲鐓岄浮锛�',
label: '涓婃捣娉扮厡椁愰ギ绠＄悊鏈夐檺鍏徃锛堟嘲鐓岄浮锛�',
- children: [{
- value: 'GLHB00000000010279',
- label: 'GLHB00000000010279',
- }]
+ children: [
+ {
+ value: 'GLHB00000000010279',
+ label: 'GLHB00000000010279'
+ }
+ ]
},
{
value: '寰愭眹鍖鸿景鐔欓棣�(灏忛搧鍚涗覆鐑у眳閰掑眿)',
label: '寰愭眹鍖鸿景鐔欓棣�(灏忛搧鍚涗覆鐑у眳閰掑眿)',
- children: [{
- value: 'GLHB00000000010504',
- label: 'GLHB00000000010504',
- }]
- },
-
- ],
-
- }
+ children: [
+ {
+ value: 'GLHB00000000010504',
+ label: 'GLHB00000000010504'
+ }
+ ]
+ }
+ ]
+ };
},
- mounted(){
+ mounted() {
// 榛樿鍔犺浇浠樺皬濮愬湪鎴愰兘 5鏈�1鍙峰埌15鍙风殑
- this.fetchData()
- },
+ this.fetchData();
+ },
methods: {
fetchData() {
if (
@@ -211,45 +236,54 @@
alert('璇疯緭鍏ユ湁鏁堢殑鏃堕棿娈�');
return;
}
- let params = {}
+ let params = {};
if (this.value[1]) {
params['devId'] = this.value[1];
}
- if(this.begin){
- params['begin']=this.begin
+ if (this.begin) {
+ params['begin'] = this.begin;
}
- if(this.end){
- params['end'] = this.end
+ if (this.end) {
+ params['end'] = this.end;
}
-
- axiosInstance.get('/data/id',{params:params})
- .then(response => {
- this.chartData = response.data.data
- this.drawChart()
- })
- .catch(error => {
- console.log(error)
- })
+ 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();
+ });
},
drawChart() {
- let dateList = []
- let dayMin = []
- let dayMax = []
- let dayAverage = []
- let minuteExceeding=[]
+ let dateList = [];
+ let dayMin = [];
+ let dayMax = [];
+ let dayAverage = [];
+ let minuteExceeding = [];
this.chartData.forEach((item) => {
- dateList.push(item.fumeDate)
- dayMin.push(item.fumeDayMin)
- dayMax.push(item.fumeDayMax)
- dayAverage.push(item.fumeDayAverage)
- minuteExceeding.push(item.fumeMinuteExceedingNum)
- })
+ dateList.push(item.fumeDate);
+ dayMin.push(item.fumeDayMin);
+ dayMax.push(item.fumeDayMax);
+ dayAverage.push(item.fumeDayAverage);
+ minuteExceeding.push(item.fumeMinuteExceedingNum);
+ });
- let chart = echarts.init(this.$refs.chart)
+ let chart = echarts.init(this.$refs.chart);
chart.setOption({
title: {
- text: '鏃ュ彉鍖�',
+ text: '鏃ュ彉鍖�'
//left: 'center'
},
grid: {
@@ -259,66 +293,65 @@
containLabel: true
},
tooltip: {},
-
+
legend: {
- data: ['鏃ユ渶灏忓��','鏃ユ渶澶у��','鏃ュ潎鍊�','鍒嗛挓鏁版嵁鏃ヨ秴鏍囨暟']
+ data: ['鏃ユ渶灏忓��', '鏃ユ渶澶у��', '鏃ュ潎鍊�', '鍒嗛挓鏁版嵁鏃ヨ秴鏍囨暟']
},
- toolbox: { //宸ュ叿鏍�
+ toolbox: {
+ //宸ュ叿鏍�
feature: {
- dataZoom: { //鍖哄煙缂╂斁
- yAxisIndex: "none"
+ dataZoom: {
+ //鍖哄煙缂╂斁
+ yAxisIndex: 'none'
},
- restore: {}, //閰嶇疆椤硅繕鍘�
- saveAsImage: {}, //淇濆瓨涓哄浘鐗�
+ restore: {}, //閰嶇疆椤硅繕鍘�
+ saveAsImage: {} //淇濆瓨涓哄浘鐗�
}
},
xAxis: {
data: dateList
},
yAxis: {},
- series: [{
- name: '鏃ユ渶灏忓��',
- type: 'line',
- data: dayMin
- },
- {
- name: '鏃ユ渶澶у��',
- type: 'line',
- data: dayMax
- },
- {
- name: '鏃ュ潎鍊�',
- type: 'line',
- data: dayAverage
- },
- {
- name: '鍒嗛挓鏁版嵁鏃ヨ秴鏍囨暟',
- type: 'line',
- data: minuteExceeding
- },
-
-
- ]
-
- })
+ series: [
+ {
+ name: '鏃ユ渶灏忓��',
+ type: 'line',
+ data: dayMin
+ },
+ {
+ name: '鏃ユ渶澶у��',
+ type: 'line',
+ data: dayMax
+ },
+ {
+ name: '鏃ュ潎鍊�',
+ type: 'line',
+ data: dayAverage
+ },
+ {
+ name: '鍒嗛挓鏁版嵁鏃ヨ秴鏍囨暟',
+ type: 'line',
+ data: minuteExceeding
+ }
+ ]
+ });
}
}
-}
-
-
+};
</script>
<style scoped>
- .el-card {
- margin-top: 40px;
- }
+.el-card {
+ margin-top: 40px;
+ border-radius: 9px;
+}
.chart-container {
- width: 100%;
- height: 600px;
+ width: 100%;
+ height: 540px;
}
.el-header {
- background-color: #010408;
- color: #333;
- line-height: 60px;
- }
+ background-color: #010408;
+ color: #333;
+ line-height: 60px;
+}
</style>
--
Gitblit v1.9.3