设置按钮的加载效果

zmc

2023-08-15 60076cbbe1da6cc8ed3a4ebb8f67e92ea9be9e4a

 src/views/analysis/HomePage.vue

@@ -42,8 +42,8 @@
  <!-- </el-form-item> -->
</div> 
  <div style="display: flex; justify-content: right; margin-right: 160px;">
  <el-button type="primary" @click="isRepeat">统计分析</el-button>
  <el-button type="primary" @click="toSql">入库管理</el-button>
  <el-button type="primary" :loading="button.statisticsButton"  @click="isRepeat">统计分析</el-button>
  <el-button type="primary" :loading="button.WarehousingButton"  @click="toSql">入库管理</el-button>
</div>

  
@@ -65,8 +65,8 @@
  <!-- </el-header> -->

  <!-- <el-main> -->
    <div class="table" v-show="!isNoData">
      <el-table  :data="displayData" border="" id="table" ref="table" height="500px" v-loading="loading" >
    <div class="table" v-show="!isNoData" v-loading="loading">
      <el-table  :data="displayData" border="" id="table" ref="table" height="500px"  >
      <el-table-column type="index" label="序号" :index="indexMethod" v-if="showColumn.num"> </el-table-column> <!--绑定一个方法，将返回值赋给index,即表格每行数据的下标-->
      <el-table-column prop="fumeDevId" label="设备编号" v-if="showColumn.deviceid" fixed> </el-table-column>
      <el-table-column prop="fumeDate"   label="日期"  v-if="showColumn.date"> </el-table-column>
@@ -164,6 +164,12 @@
export default {
data() {
return {
      button:{
        // 统计分析按钮
        statisticsButton:false,
        // 入库按钮
        WarehousingButton:false
      },
      isNoData:true,
      loading:false,
      radio: '选中且禁用',
@@ -340,35 +346,36 @@
  if (this.shopname) {
    params['shopname'] = this.shopname;
  }
  if(this.value){
    params['value'] = this.value;
  }
  if(this.begin){
    params['begin']=this.begin
  }
  if(this.end){
    params['end'] = this.end
  }
  // 另外一个loading在analysisData()中
  this.loading=true
  axiosInstanceInstance.get('/data/search',{params:params})
    .then(response => {
  this.button.statisticsButton = true
  axiosInstanceInstance.get('/data/search',{params:params}).then(response => {
      this.isRepeated=response.data.data
      console.log('请求',this.isRepeated);
    })

   setTimeout(() => {
    console.log('请求后',this.isRepeated);
    if(this.isRepeated>0){
      alert('该店铺的时段已存在分析数据,请重新选择')
          this.button.statisticsButton = false
        return
    }else{
      this.analysisData()
      console.log('执行了');
        this.button.statisticsButton = false
    }
   }, 1000);
    
    })
},


//写入MySql
toSql(){
  this.button.WarehousingButton = true
  this.afterAnalysis.forEach((item)=>{
    console.log(item);
    let jsonData=JSON.stringify(item)
@@ -381,6 +388,7 @@
    
  })
  alert('已成功写入数据库')
  this.button.WarehousingButton = fasle
  this.isWrite='是'
},