设置按钮的加载效果

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,7 +34,7 @@
      </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>

@@ -67,6 +53,10 @@
  export default {
    data() {
      return {
        button:{
        // 展示图的按钮
        showChartButton:false,
      },
        isNoData:false,
        loading:false,
        chartData: [],     //保存查询的结果
@@ -223,11 +213,13 @@
          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