设置按钮的加载效果

zmc

2023-08-15 60076cbbe1da6cc8ed3a4ebb8f67e92ea9be9e4a

 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;