设置按钮的加载效果

zmc

2023-08-15 60076cbbe1da6cc8ed3a4ebb8f67e92ea9be9e4a

 src/views/analysis/graph/DayData.vue

@@ -1,24 +1,10 @@
<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-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"
@@ -52,12 +38,12 @@
          </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 v-loading="loading">
          <div class="chart-container" ref="chart" v-show="!isNoData"></div>
          <div class="chart-container"  ref="chart" v-show="!isNoData"></div>
          <el-empty v-show="isNoData" :image-size="200" />
        </el-card>
      </el-main>
@@ -71,6 +57,10 @@
export default {
  data() {
    return {
      button:{
        // 展示图的按钮
        showChartButton:false,
      },
      isNoData:false,
      loading: false,
      chartData: [], //保存查询的结果
@@ -257,12 +247,14 @@
        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