设置按钮的加载效果

zmc

2023-08-15 60076cbbe1da6cc8ed3a4ebb8f67e92ea9be9e4a

 src/views/analysis/graph/PuOpeningRate.vue

@@ -1,311 +1,346 @@
<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" 
            :show-all-levels="false" 
            :props="{expandTrigger:'hover'}" 
            placeholder="请选择店铺名和设备编号"
            v-model="value"
            style="margin-right:32px">
        </el-cascader>
         </el-form-item>
   
       <el-form-item label="开始日期">
        <el-date-picker
        v-model="begin"
        type="date"
        placeholder="选择日期"
        value-format="YYYY-MM-DD">
      </el-date-picker>
       </el-form-item>
   
      <el-form-item label="结束日期">
        <el-date-picker
        v-model="end"
        type="date"
        placeholder="选择日期"
        value-format="YYYY-MM-DD">
      </el-date-picker>
      </el-form-item>
   
         <el-form-item>
          <el-button type="primary" @click="fetchData">生成折线图</el-button>
       </el-form-item> 
       </el-form>
  <div>
    <el-container>

      <el-card>
        <div class="chart-container" ref="chart"></div>
      </el-card>
    </el-main>
  </el-container>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts'
  import axiosInstance from '../../../utils/request.js'
  export default {
    data() {
      return {
        chartData: [],     //保存查询的结果
        devId:'',          //设备编号
        begin:'2023-05-01',         //开始时间
        end:'2023-05-15',           //结束时间
        value:['付小姐在成都','qinshi_31010320210010'],      //保存选择的店铺名称和设备名称
        options: [{
      <el-main>
        <el-form :inline="true" :model="form" class="demo-form-inline">

          <el-form-item label="店铺名和设备编号">
            <el-cascader
              :options="options"
              :show-all-levels="false"
              :props="{ expandTrigger: 'hover' }"
              placeholder="请选择店铺名和设备编号"
              v-model="value"
              style="margin-right: 32px"
            >
            </el-cascader>
          </el-form-item>

          <el-form-item label="开始日期">
            <el-date-picker
              v-model="begin"
              type="date"
              placeholder="选择日期"
              value-format="YYYY-MM-DD"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="结束日期">
            <el-date-picker
              v-model="end"
              type="date"
              placeholder="选择日期"
              value-format="YYYY-MM-DD"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <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>
          <el-empty v-show="isNoData" :image-size="200" />
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import axiosInstanceInstance from '../../../utils/request.js';
export default {
  data() {
    return {
      button:{
        // 展示图的按钮
        showChartButton:false,
      },
      isNoData:false,
      loading: false,
      chartData: [], //保存查询的结果
      devId: '', //设备编号
      begin: '2023-05-01', //开始时间
      end: '2023-05-15', //结束时间
      value: ['付小姐在成都', 'qinshi_31010320210010'], //保存选择的店铺名称和设备名称
      options: [
        {
          value: '付小姐在成都',
          label: '付小姐在成都',
          children: [{
                value: 'qinshi_31010320210010',
                label: 'qinshi_31010320210010',
         }]
          children: [
            {
              value: 'qinshi_31010320210010',
              label: 'qinshi_31010320210010'
            }
          ]
        },
        {
          value: '吉刻联盟',
          label: '吉刻联盟 ',
          children: [{
                value: 'qinshi_31010320200006',
                label: 'qinshi_31010320200006',
         }]
          children: [
            {
              value: 'qinshi_31010320200006',
              label: 'qinshi_31010320200006'
            }
          ]
        },
        {
          value: '家在塔啦',
          label: '家在塔啦',
          children: [{
                value: 'hengzhiyuan_64480047347215',
                label: 'hengzhiyuan_64480047347215',
         }]
          children: [
            {
              value: 'hengzhiyuan_64480047347215',
              label: 'hengzhiyuan_64480047347215'
            }
          ]
        },
        {
          value: '狼来了',
          label: '狼来了 ',
          children: [{
                value: 'zhuoquan_31011020175012',
                label: 'zhuoquan_31011020175012',
         }]
          children: [
            {
              value: 'zhuoquan_31011020175012',
              label: 'zhuoquan_31011020175012'
            }
          ]
        },
        {
          value: '乐凯撒星游店',
          label: '乐凯撒星游店',
          children: [{
                value: 'qinshi_31010320200007',
                label: 'qinshi_31010320200007',
         }]
          children: [
            {
              value: 'qinshi_31010320200007',
              label: 'qinshi_31010320200007'
            }
          ]
        },
        {
          value: '馨远美食小镇（哈尼美食广场）',
          label: '馨远美食小镇（哈尼美食广场）',
          children: [{
                value: 'hengzhiyuan_64480047078091',
                label: 'hengzhiyuan_64480047078091',
         }]
          children: [
            {
              value: 'hengzhiyuan_64480047078091',
              label: 'hengzhiyuan_64480047078091'
            }
          ]
        },
        {
          value: '棒约翰',
          label: '棒约翰',
          children: [{
                value: 'qinshi_31010320190005',
                label: 'qinshi_31010320190005',
         }]
          children: [
            {
              value: 'qinshi_31010320190005',
              label: 'qinshi_31010320190005'
            }
          ]
        },
        {
          value: '弄堂咪道',
          label: '弄堂咪道',
          children: [{
                value: 'zhuoquan_31011020175008',
                label: 'zhuoquan_31011020175008',
         }]
        },{
          children: [
            {
              value: 'zhuoquan_31011020175008',
              label: 'zhuoquan_31011020175008'
            }
          ]
        },
        {
          value: '杨记齐齐哈尔烤肉',
          label: '杨记齐齐哈尔烤肉',
          children: [{
                value: 'zhuoquan_31011020175002',
                label: 'zhuoquan_31011020175002',
         }]
          children: [
            {
              value: 'zhuoquan_31011020175002',
              label: 'zhuoquan_31011020175002'
            }
          ]
        },
        {
          value: '上海稔传餐饮管理有限公司（人生一串）',
          label: '上海稔传餐饮管理有限公司（人生一串）',
          children: [{
                value: 'GLHB00000000016004',
                label: 'GLHB00000000016004',
         }]
          children: [
            {
              value: 'GLHB00000000016004',
              label: 'GLHB00000000016004'
            }
          ]
        },
        {
          value: '缘家',
          label: '缘家',
          children: [{
                value: 'fucheng310104200914',
                label: 'fucheng310104200914',
         }]
          children: [
            {
              value: 'fucheng310104200914',
              label: 'fucheng310104200914'
            }
          ]
        },
        {
          value: '泉盛餐饮（上海）有限公司（食其家）',
          label: '泉盛餐饮（上海）有限公司（食其家）',
          children: [{
                value: 'GLHB00000000016155',
                label: 'GLHB00000000016155',
         }]
        },{
          children: [
            {
              value: 'GLHB00000000016155',
              label: 'GLHB00000000016155'
            }
          ]
        },
        {
          value: '丰茂烤串',
          label: '丰茂烤串',
          children: [{
                value: 'GLHB00000000016011',
                label: 'GLHB00000000016011',
         }]
          children: [
            {
              value: 'GLHB00000000016011',
              label: 'GLHB00000000016011'
            }
          ]
        },
        {
          value: '上海泰煌餐饮管理有限公司（泰煌鸡）',
          label: '上海泰煌餐饮管理有限公司（泰煌鸡）',
          children: [{
                value: 'GLHB00000000010279',
                label: 'GLHB00000000010279',
         }]
          children: [
            {
              value: 'GLHB00000000010279',
              label: 'GLHB00000000010279'
            }
          ]
        },
        {
          value: '徐汇区辰熙餐馆(小铁君串烧居酒屋)',
          label: '徐汇区辰熙餐馆(小铁君串烧居酒屋)',
          children: [{
                value: 'GLHB00000000010504',
                label: 'GLHB00000000010504',
         }]
        },

    ]
        
      }
  
    },
    mounted(){
          children: [
            {
              value: 'GLHB00000000010504',
              label: 'GLHB00000000010504'
            }
          ]
        }
      ]
    };
  },
  mounted() {
    //  默认加载付小姐在成都 5月1号到15号的
      this.fetchData()
    },
    methods: {
      fetchData() {
        if (
    this.fetchData();
  },
  methods: {
    fetchData() {
      if (
        this.begin >= this.end &&
        (this.begin != null || this.end != null) &&
        (this.begin != '' || this.end != '')
        ) {
          alert('请输入有效的时间段');
          return;
      ) {
        alert('请输入有效的时间段');
        return;
      }
      let params = {};
      if (this.value[1]) {
        params['devId'] = this.value[1];
      }
      if (this.begin) {
        params['begin'] = this.begin;
      }
      if (this.end) {
        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
          return
        }
        let params = {}
        if (this.value[1]) {
          params['devId'] = this.value[1];
        }
        if(this.begin){
          params['begin']=this.begin
        }
        if(this.end){
          params['end'] = this.end
        }
  
        axiosInstance.get('data/id',{params:params})
          .then(response => {
            this.chartData = response.data.data
            this.drawChart()
          })
          .catch(error => {
            console.log(error)
          })
      },
      drawChart() {
        let dateList = []
  
        let puOpenRate = []
        
  
        //比率
        this.chartData.forEach((item) => {
          dateList.push(item.fumeDate)  //x轴日期
     
          puOpenRate.push(item.purifierOpenRate.slice(0,-1))
        })
  
        let chart = echarts.init(this.$refs.chart)
        chart.setOption({
          title: {
            text: '净化器开启率',
            //left: 'center'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          tooltip: {},
    
          legend: {
            data: ['净化器开启率']
          },
          toolbox: {    //工具栏
            feature: {
              dataZoom: {        //区域缩放
              yAxisIndex: "none"
              },
              restore: {},   //配置项还原
              saveAsImage: {},    //保存为图片
            }
          },
          xAxis: {
            data: dateList
          },
  
          yAxis: {
            type: 'value',
            axisLabel:{
              show:true,
              interval:'auto',
              formatter:'{value} %'
            }
  
          },
          series: [
            {
        // 移除空数据状态
        this.isNoData = false
          this.drawChart();
        });
    },
    drawChart() {
      let dateList = [];

      let puOpenRate = [];

      //比率
      this.chartData.forEach((item) => {
        dateList.push(item.fumeDate); //x轴日期

        puOpenRate.push(item.purifierOpenRate.slice(0, -1));
      });

      let chart = echarts.init(this.$refs.chart);
      chart.setOption({
        title: {
          text: '净化器开启率'
          //left: 'center'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {},

        legend: {
          data: ['净化器开启率']
        },
        toolbox: {
          //工具栏
          feature: {
            dataZoom: {
              //区域缩放
              yAxisIndex: 'none'
            },
            restore: {}, //配置项还原
            saveAsImage: {} //保存为图片
          }
        },
        xAxis: {
          data: dateList
        },

        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            interval: 'auto',
            formatter: '{value} %'
          }
        },
        series: [
          {
            name: '净化器开启率',
            type: 'line',
            data: puOpenRate
          },
          }
        ]
  
        })
      }
      });
    }
  }
  </script>
  
  <style scoped>
  .el-card {
    margin-top: 40px;
  }
.chart-container {
    width: 100%;
    height: 600px;
}
  .el-header {
    background-color: #000205;
    color: #333;
    line-height: 60px;
  } 
};
</script>

  </style>
<style scoped>
.el-card {
  margin-top: 40px;
  border-radius: 9px;
}
.chart-container {
  width: 100%;
  height: 540px;
}
.el-header {
  background-color: #000205;
  color: #333;
  line-height: 60px;
}
</style>