设置按钮的加载效果

zmc

2023-08-15 60076cbbe1da6cc8ed3a4ebb8f67e92ea9be9e4a

设置按钮的加载效果

 components.d.ts

@@ -71,16 +71,12 @@
    IEpHistogram: typeof import('~icons/ep/histogram')['default']
    IEpInfoFilled: typeof import('~icons/ep/info-filled')['default']
    IEpLock: typeof import('~icons/ep/lock')['default']
    IEpMoney: typeof import('~icons/ep/money')['default']
    IEpMonitor: typeof import('~icons/ep/monitor')['default']
    IEpNotebook: typeof import('~icons/ep/notebook')['default']
    IEpSearch: typeof import('~icons/ep/search')['default']
    IEpSetting: typeof import('~icons/ep/setting')['default']
    IEpShop: typeof import('~icons/ep/shop')['default']
    IEpStopwatch: typeof import('~icons/ep/stopwatch')['default']
    IEpTrendCharts: typeof import('~icons/ep/trend-charts')['default']
    IEpUser: typeof import('~icons/ep/user')['default']
    IEpWindPower: typeof import('~icons/ep/wind-power')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
  }

 dist.zip

Binary files differ

 src/views/ExceedingFume.vue

@@ -12,7 +12,6 @@
        </ExceptionType>

        <TimeSelect @submit-time="giveTime"></TimeSelect>
        <!-- </div> -->
      </div>
      <div
        ref="h2"
@@ -244,10 +243,9 @@
          </el-card>
        </el-collapse-item>
      </el-collapse>
      <!-- <hr/>
 <br> -->

      <h4 class="table-text">异常数据</h4>
      <!--  -->

    </el-col>
  </el-row>
  <el-card class="table-page" v-show="!isNoData">
@@ -354,13 +352,15 @@
        <div class="dialog-button-position">
          <el-button
            type="danger"
            :disabled="isPreCantouch"
            :loading="button.preButton"
            :disabled="isPreCantouch || banTouch"
            @click="getPreviousRowData"
            >上条异常</el-button
          >
          <el-button
            type="danger"
            :disabled="isNextCantouch"
            :loading="button.afterButton"
            :disabled="isNextCantouch || banTouch"
            @click="getNextRowData"
            >下条异常</el-button
          >
@@ -451,6 +451,16 @@
  },
  data() {
    return {
      button:{
        // 查询按钮
        queryButton:false,
        // 上一条按钮
        preButton:false,
        // 下一条按钮
        afterButton:false,
        // 
        banTouch:0
      },
      // 异常折线图的配置
      option: {},
      // 折线图展示
@@ -659,7 +669,6 @@
          let current = timePoints[i];
          let next = timePoints[i + 1];
          while (this.isTimeDifferenceGreaterThan10Minutes(current, next)) {
            console.log('generateTimePoints');
            current = dayjs(current)
              .add(10, 'minute')
              .format('YYYY-MM-DD HH:mm:ss');
@@ -688,7 +697,6 @@
      const year2 = date2.getFullYear();
      const month2 = date2.getMonth();
      const day2 = date2.getDate();
      console.log(month1, month2);

      // 判断两个日期是否相差一个月
      if (year1 === year2) {
@@ -798,6 +806,9 @@
    getNextRowData() {
      // 不是表格的第一行
      if (this.selectedRowIndex !== 0) {
        // 设置上下条按钮不可点击
        this.banTouch = 1

        //得到上一行数据索引
        this.selectedRowIndex = this.selectedRowIndex - 1;
        //请求数据 改变exceedingData
@@ -813,32 +824,35 @@
        if (this.drawerData.endTime) {
          params['endTime'] = this.displayData[this.selectedRowIndex].endTime;
        }

        this.button.afterButton = true
        axiosInstanceInstance
          .get('/fume/exceed', { params: params })
          .then((response) => {
            // 保存返回的超标数据
            this.exceedingData = response.data.data;
            // this.chart = null;
            // this.drawChart();
            this.drawChartTest();
            this.exceptionTotal = this.exceedingData.length;
            this.button.afterButton = false

            this.banTouch = 0

          });
      }
      //表格的第一行，则上一条无数据
      else {
        console.log(null);
      }
      // //表格的第一行，则上一条无数据
      // else {
      //   console.log(null);
      // }
    },

    // 获取获取表格下一行数据
    getPreviousRowData() {
      // 不是表格的第一行
      if (this.selectedRowIndex < this.displayData.length - 1) {
        //得到上一行数据索引
        // 设置上下条按钮不可点击
        this.banTouch = 1

        //得到上一行数据索引
        this.selectedRowIndex = this.selectedRowIndex + 1;
        console.log('上', this.selectedRowIndex);

        //请求数据 改变exceedingData
        this.setinfo(this.selectedRowIndex);
@@ -853,20 +867,24 @@
        if (this.drawerData.endTime) {
          params['endTime'] = this.displayData[this.selectedRowIndex].endTime;
        }
        this.button.preButton = true
        axiosInstanceInstance
          .get('/fume/exceed', { params: params })
          .then((response) => {
            // 保存返回的超标数据
            this.exceedingData = response.data.data;
            console.log(this.exceedingData);
            this.drawChartTest();
            this.exceptionTotal = this.exceedingData.length;
            this.button.preButton = false

          
            this.banTouch = 0
          });
      }
      //表格的第一行，则上一条无数据
      else {
        console.log(null);
      }
      // else {
      //   console.log(null);
      // }
    },

    // ‘查看详情’ 弹出框部分
@@ -916,8 +934,7 @@
      if (this.exceptionValue.length != 0) {
        params['exceptionValue'] = this.exceptionValue.join();
      }
      console.log('原', this.exceptionValue);
      console.log('处理', this.exceptionValue.join());

      if (this.beginTime) {
        params['beginTime'] = this.beginTime;
      }
@@ -925,12 +942,14 @@
        params['endTime'] = this.endTime;
      }
      this.loading = true;
      this.button.queryButton = true
      axiosInstanceInstance
        .get('/fume/abnormalthree', { params: params })
        .then((response) => {
          this.abnormalData = response.data.data;
          this.total = this.abnormalData.length;
          this.loading = false;
          this.button.queryButton = false
          if (response.data.data.length == 0) {
            ElMessage('该时段无数据');
            this.isNoData = true;
@@ -939,8 +958,7 @@
          // 移除空数据状态
          this.isNoData = false;
          this.handleCurrentChange(1);
          console.log('返回的数据', this.abnormalData);
          console.log('长度', response.data.data.total);

        });
    },
    handleSizeChange(val) {
@@ -964,7 +982,6 @@
      // 计算结束时间减去开始时间中间相差多少个十分钟
      const diffInMinutes = end.diff(start, 'minute');
      const diffInTenMinutes = Math.floor(diffInMinutes / 10);
      console.log('几个10分钟', diffInTenMinutes);
      return diffInTenMinutes;
    },

@@ -1317,13 +1334,11 @@
        .get('/fume/history', { params: paramsBefore })
        .then((result1) => {
          this.beforeData = result1.data.data;
          console.log('beforeData:', this.beforeData);
          // 请求后半段
          axiosInstanceInstance
            .get('/fume/history', { params: paramsAfter })
            .then((result2) => {
              this.afterData = result2.data.data;
              console.log('afterData:', this.afterData);
              //保存异常区间的值
              let tempArr = [];
              // 保存异常区间前后的值
@@ -1351,7 +1366,6 @@

                after = this.shallowCopyList(this.afterData);
                // after = this.afterData
                console.log('after:', after);
              }
              // 超标
              else {
@@ -1381,7 +1395,6 @@

              // 将前后区间数据 与 异常区间数据 合并
              this.allExceptionTimeData = [...before, ...tempArr, ...after];
              console.log('组合数据：', this.allExceptionTimeData);
              // x轴日期时间
              let dateList = [];
              // y轴 超标油烟浓度
@@ -1397,9 +1410,6 @@

              dateList = timeAndValue['xAxis'];
              fumeExceeding = timeAndValue['yAxis'];

              console.log('dateList:', dateList);
              console.log('fumeExceeding:', fumeExceeding);

              // 提取异常起始时间点在整个区间内的数据索引
              let startIndex = dateList.findIndex(
@@ -1457,7 +1467,6 @@
            ]
          };
        });
        console.log(this.optionsShop);
      });
    },
    exportDom() {
@@ -1511,8 +1520,6 @@
        })
        .then((result) => {
          this.exception0 = result.data.data;
          console.log('异常0', this.exception0);
          console.log('异常0数量', this.exception0.length);
        });
      axiosInstanceInstance
        .get('/fume/shopname', {
@@ -1542,7 +1549,6 @@
    getRecentSevenDays() {
      // 给级联选择器设置默认的选择项
      this.devId = ['付小姐在成都', 'qinshi_31010320210010'];
      console.log(this.currentDateTime, this.oneWeekAgoDateTime);
      let params = {};
      params['beginTime'] = this.beginTime;
      params['endTime'] = this.endTime;
@@ -1567,13 +1573,7 @@
</script>

<style scoped>
/* .exception-root-container {
  margin: 20px;
  padding: 10px;
  border: 1px;
  height: 615px;

} */
.header-container {
  display: flex;
  margin-left: 20px;
@@ -1609,8 +1609,6 @@
/* 异常分析数据与按钮 */
.exception-container {
  display: flex;
  /* direction: column; */
  /* flex-grow: 2,1; */
}
.example-showcase .el-loading-mask {
  z-index: 9;
@@ -1632,7 +1630,6 @@
  font-size: 18px;
}
.collapse-header-text {
  /* margin-right: 150px; */
  margin-top: 5px;
  font-size: 14px;
  color: gray;
@@ -1641,7 +1638,6 @@
.box-card-label {
  font-size: 14px;
  white-space: nowrap;
  /* overflow-x: auto; */
}
:deep().el-card {
  border-radius: 9px;
@@ -1656,9 +1652,7 @@
.table-page {
  margin-left: 20px;
}
:deep().table-page .el-card__body {
  /* padding: 0px; */
}

.table-text {
  font-size: 18px;
  margin: 5px 0px 10px 20px;
@@ -1697,16 +1691,12 @@
.box-card {
  height: 190px;
}
:deep().box-card .el-card__body {
  /* padding: 5px; */
}

.sub-box-card {
  height: 100px;
  border: 0px;
}
:deep().sub-box-card .el-card__body {
  /* padding: 0px; */
}

.mx-1 {
  margin-bottom: 0px;
}
@@ -1715,16 +1705,6 @@
  justify-content: right;
  margin-bottom: 10px;
}
/* :global(.el-table .exceeding-row) {
  --el-table-expanded-cell-bg-color: #f53f3f;
}
:global(.el-table .abnormal-power-supply) {
  --el-table-expanded-cell-bg-color: #ffcf8b;
}

:global(.el-table .disconnect) {
  --el-table-expanded-cell-bg-color: #ff7d00;
} */

:deep().el-table__row .exceeding-row{
  background-color:  #F53F3F;

 src/views/HistoryFume.vue

@@ -23,6 +23,10 @@
},
  data() {
    return {
      button:{
        // 查询的按钮
        queryButton:false,
      },
      // 空状态
      isNoData:false,
      // 下拉框一开始展示的名字
@@ -312,6 +316,7 @@
      params['endTime'] = this.endTime;
    }
    this.loading=true
    this.button.queryButton = true
    axiosInstanceInstance
      .get('/fume/history', { params: params })
      .then((response) => {
@@ -319,7 +324,7 @@
        // 保存返回的
        this.exceedingData = response.data.data;
        this.loading=false

        this.button.queryButton = false
        if(response.data.data.length==0){
          ElMessage('该时段无数据')
          this.isNoData = true
@@ -327,13 +332,10 @@
        }
        // 移除空数据状态
        this.isNoData = false
        // this.displayData = response.data.data   //表格渲染
        // 分页
        this.total = this.exceedingData.length;
        // 默认显示第一页
        this.handleCurrentChange(1);
        // 展示折线图
        // this.drawChart(); 
      })
  },

@@ -488,7 +490,7 @@
      <!-- <el-date-picker v-model="beginTime" type="datetime" placeholder="开始时间" value-format="YYYY-MM-DD HH:mm:ss" />
      <el-date-picker v-model="endTime" type="datetime" placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" /> -->
      <TimeSelect @submit-time="giveTime"></TimeSelect>
      <el-button type="primary" plain @click="lineChart">查询</el-button>
      <el-button type="primary" plain :loading="button.queryButton" @click="lineChart">查询</el-button>


      <el-tooltip

 src/views/IndexView.vue

@@ -12,6 +12,9 @@
  },
  data() {
    return {
      button:{
        setButton:false
      },
      totalData: [],
      // 保存设置
      save: false,
@@ -273,6 +276,8 @@

    // 点击按钮触发
    show() {
      // 
      this.button.setButton = true
      // 当取消选择时，防止图形还保留在页面。
      if (this.outside.checkedShops.length == 0) {
        this.outside.realTimeData = [];
@@ -282,6 +287,8 @@
      }
      // 根据所选的店铺请求数据
      this.request();
      this.button.setButton = false
      // 定时更新
      setInterval(() => {
        this.request();
      }, this.timeInterval);
@@ -432,7 +439,7 @@
      content="点击展示实时数据"
      placement="top-start"
    >
      <el-button type="success" @click="show" style="margin-left: 10px">
      <el-button type="success" :loading="button.setButton" @click="show" style="margin-left: 10px">
        设置
      </el-button>
    </el-tooltip>

 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: '选中且禁用',
@@ -318,7 +324,7 @@
          this.isNoData = true
          return
        }
        // 移除空数据状态
      // 移除空数据状态
      this.isNoData = false
    this.total = this.afterAnalysis.length;
    this.handleCurrentChange(1); // 默认显示第一页
@@ -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);
      if(this.isRepeated>0){
          alert('该店铺的时段已存在分析数据,请重新选择')
          this.button.statisticsButton = false
          return
      }else{
        this.analysisData()
        this.button.statisticsButton = false
      }
      
    })

   setTimeout(() => {
    console.log('请求后',this.isRepeated);
    if(this.isRepeated>0){
      alert('该店铺的时段已存在分析数据,请重新选择')
        return
    }else{
      this.analysisData()
      console.log('执行了');
    }
   }, 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='是'
},


 src/views/analysis/graph/AllRate.vue

@@ -37,7 +37,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>

@@ -58,6 +58,10 @@
export default {
  data() {
    return {
      button:{
        // 展示图的按钮
        showChartButton:false,
      },
      isNoData:false,
      chart:null,
      loading:false,
@@ -218,10 +222,12 @@
        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

 src/views/analysis/graph/DayAverage.vue

@@ -2,22 +2,11 @@
    <div class="search-container">
      <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-cascader 
            :options="options" 
            :show-all-levels="false" 
@@ -48,7 +37,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 +56,10 @@
  export default {
    data() {
      return {
        button:{
        // 展示图的按钮
        showChartButton:false,
      },
        isNoData:false,
        loading:false,
        chartData: [],     //保存查询的结果
@@ -222,10 +215,12 @@
          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

 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

 src/views/analysis/graph/ExceedingRate.vue

@@ -1,22 +1,11 @@
<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-cascader
              :options="options"
              :show-all-levels="false"
@@ -49,7 +38,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>

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

 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

 src/views/analysis/graph/PuOpeningRate.vue

@@ -1,22 +1,10 @@
<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"
@@ -50,7 +38,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>

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

 src/views/getdata/GetData.vue

@@ -1,6 +1,5 @@
<script>
import axiosInstancePy from '../../utils/requestPy'
// import ShopNameSelect from '../sfc/ShopNameSelect.vue'
import ShopNameCheckBox from '../../sfc/ShopNameCheckBox.vue';
import TimeSelectCrawling from '../../sfc/TimeSelectCrawling.vue';