From 9ba706f594356dc3b2315c14dd8a521426331bab Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期三, 16 八月 2023 09:03:29 +0800
Subject: [PATCH] 设置按钮加载效果
---
src/views/analysis/graph/OnlineRate.vue | 53 ++++++++++++++++++++++++++++-------------------------
1 files changed, 28 insertions(+), 25 deletions(-)
diff --git a/src/views/analysis/graph/OnlineRate.vue b/src/views/analysis/graph/OnlineRate.vue
index 84390c9..1b50852 100644
--- a/src/views/analysis/graph/OnlineRate.vue
+++ b/src/views/analysis/graph/OnlineRate.vue
@@ -1,23 +1,9 @@
<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"
@@ -48,12 +34,13 @@
</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="chart" v-show="!isNoData"></div>
+ <el-empty v-show="isNoData" :image-size="200" />
</el-card>
</el-main>
</el-container>
@@ -62,10 +49,16 @@
<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,
+ loading:false,
chartData: [], //淇濆瓨鏌ヨ鐨勭粨鏋�
//devId:'', //璁惧缂栧彿
begin:'2023-05-01', //寮�濮嬫椂闂�
@@ -219,15 +212,24 @@
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()
})
- .catch(error => {
- console.log(error)
- })
+
},
drawChart() {
let dateList = []
@@ -323,10 +325,11 @@
<style scoped>
.el-card {
margin-top: 40px;
+ border-radius: 9px;
}
.chart-container {
width: 100%;
- height: 600px;
+ height: 540px;
}
.el-header {
background-color: #010408;
--
Gitblit v1.9.3