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/PuOpeningRate.vue | 521 ++++++++++++++++++++++++++++++---------------------------
1 files changed, 278 insertions(+), 243 deletions(-)
diff --git a/src/views/analysis/graph/PuOpeningRate.vue b/src/views/analysis/graph/PuOpeningRate.vue
index 9620765..cd83b98 100644
--- a/src/views/analysis/graph/PuOpeningRate.vue
+++ b/src/views/analysis/graph/PuOpeningRate.vue
@@ -1,311 +1,346 @@
<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" :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>
+ <div>
+ <el-container>
- <el-card>
- <div class="chart-container" ref="chart"></div>
- </el-card>
- </el-main>
- </el-container>
- </div>
- </template>
-
- <script>
- import * as echarts from 'echarts'
- import axiosInstance from '../../../utils/request.js'
- export default {
- data() {
- return {
- chartData: [], //淇濆瓨鏌ヨ鐨勭粨鏋�
- devId:'', //璁惧缂栧彿
- begin:'2023-05-01', //寮�濮嬫椂闂�
- end:'2023-05-15', //缁撴潫鏃堕棿
- value:['浠樺皬濮愬湪鎴愰兘','qinshi_31010320210010'], //淇濆瓨閫夋嫨鐨勫簵閾哄悕绉板拰璁惧鍚嶇О
- options: [{
+ <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-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" :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 axiosInstanceInstance from '../../../utils/request.js';
+export default {
+ data() {
+ return {
+ 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',
- }]
- },
-
- ]
-
- }
-
- },
- mounted(){
+ children: [
+ {
+ value: 'GLHB00000000010504',
+ label: 'GLHB00000000010504'
+ }
+ ]
+ }
+ ]
+ };
+ },
+ mounted() {
// 榛樿鍔犺浇浠樺皬濮愬湪鎴愰兘 5鏈�1鍙峰埌15鍙风殑
- this.fetchData()
- },
- methods: {
- fetchData() {
- if (
+ this.fetchData();
+ },
+ methods: {
+ fetchData() {
+ if (
this.begin >= this.end &&
(this.begin != null || this.end != null) &&
(this.begin != '' || this.end != '')
- ) {
- alert('璇疯緭鍏ユ湁鏁堢殑鏃堕棿娈�');
- return;
+ ) {
+ alert('璇疯緭鍏ユ湁鏁堢殑鏃堕棿娈�');
+ return;
+ }
+ let params = {};
+ if (this.value[1]) {
+ params['devId'] = this.value[1];
+ }
+ if (this.begin) {
+ params['begin'] = this.begin;
+ }
+ if (this.end) {
+ params['end'] = this.end;
+ }
+ 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
}
- let params = {}
- if (this.value[1]) {
- params['devId'] = this.value[1];
- }
- if(this.begin){
- params['begin']=this.begin
- }
- 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)
- })
- },
- drawChart() {
- let dateList = []
-
- let puOpenRate = []
-
-
- //姣旂巼
- this.chartData.forEach((item) => {
- dateList.push(item.fumeDate) //x杞存棩鏈�
-
- puOpenRate.push(item.purifierOpenRate.slice(0,-1))
- })
-
- let chart = echarts.init(this.$refs.chart)
- chart.setOption({
- title: {
- text: '鍑�鍖栧櫒寮�鍚巼',
- //left: 'center'
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- tooltip: {},
-
- legend: {
- data: ['鍑�鍖栧櫒寮�鍚巼']
- },
- toolbox: { //宸ュ叿鏍�
- feature: {
- dataZoom: { //鍖哄煙缂╂斁
- yAxisIndex: "none"
- },
- restore: {}, //閰嶇疆椤硅繕鍘�
- saveAsImage: {}, //淇濆瓨涓哄浘鐗�
- }
- },
- xAxis: {
- data: dateList
- },
-
- yAxis: {
- type: 'value',
- axisLabel:{
- show:true,
- interval:'auto',
- formatter:'{value} %'
- }
-
- },
- series: [
- {
+ // 绉婚櫎绌烘暟鎹姸鎬�
+ this.isNoData = false
+ this.drawChart();
+ });
+ },
+ drawChart() {
+ let dateList = [];
+
+ let puOpenRate = [];
+
+ //姣旂巼
+ this.chartData.forEach((item) => {
+ dateList.push(item.fumeDate); //x杞存棩鏈�
+
+ puOpenRate.push(item.purifierOpenRate.slice(0, -1));
+ });
+
+ let chart = echarts.init(this.$refs.chart);
+ chart.setOption({
+ title: {
+ text: '鍑�鍖栧櫒寮�鍚巼'
+ //left: 'center'
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ tooltip: {},
+
+ legend: {
+ data: ['鍑�鍖栧櫒寮�鍚巼']
+ },
+ toolbox: {
+ //宸ュ叿鏍�
+ feature: {
+ dataZoom: {
+ //鍖哄煙缂╂斁
+ yAxisIndex: 'none'
+ },
+ restore: {}, //閰嶇疆椤硅繕鍘�
+ saveAsImage: {} //淇濆瓨涓哄浘鐗�
+ }
+ },
+ xAxis: {
+ data: dateList
+ },
+
+ yAxis: {
+ type: 'value',
+ axisLabel: {
+ show: true,
+ interval: 'auto',
+ formatter: '{value} %'
+ }
+ },
+ series: [
+ {
name: '鍑�鍖栧櫒寮�鍚巼',
type: 'line',
data: puOpenRate
- },
+ }
]
-
- })
- }
+ });
}
}
- </script>
-
- <style scoped>
- .el-card {
- margin-top: 40px;
- }
-.chart-container {
- width: 100%;
- height: 600px;
-}
- .el-header {
- background-color: #000205;
- color: #333;
- line-height: 60px;
- }
+};
+</script>
- </style>
\ No newline at end of file
+<style scoped>
+.el-card {
+ margin-top: 40px;
+ border-radius: 9px;
+}
+.chart-container {
+ width: 100%;
+ height: 540px;
+}
+.el-header {
+ background-color: #000205;
+ color: #333;
+ line-height: 60px;
+}
+</style>
--
Gitblit v1.9.3