油烟检测系统

zmc

2023-08-07 1e18f0bcee0358e13c0e2cb750d17cd7ef5bf4d6

 src/views/analysis/graph/PuOpeningRate.vue

@@ -24,7 +24,8 @@
            :props="{expandTrigger:'hover'}" 
            placeholder="请选择店铺名和设备编号"
            v-model="value"
            style="margin-right:32px">
              style="margin-right: 32px"
            >
        </el-cascader>
         </el-form-item>
   
@@ -33,7 +34,8 @@
        v-model="begin"
        type="date"
        placeholder="选择日期"
        value-format="YYYY-MM-DD">
              value-format="YYYY-MM-DD"
            >
      </el-date-picker>
       </el-form-item>
   
@@ -42,7 +44,8 @@
        v-model="end"
        type="date"
        placeholder="选择日期"
        value-format="YYYY-MM-DD">
              value-format="YYYY-MM-DD"
            >
      </el-date-picker>
      </el-form-item>
   
@@ -51,8 +54,9 @@
       </el-form-item> 
       </el-form>

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

    ]
        
              label: 'GLHB00000000010504'
      }
  
          ]
        }
      ]
    };
    },
    mounted(){
    //  默认加载付小姐在成都 5月1号到15号的
      this.fetchData()
    this.fetchData();
    },
    methods: {
      fetchData() {
@@ -208,43 +244,48 @@
          alert('请输入有效的时间段');
          return;
        }
        let params = {}
      let params = {};
        if (this.value[1]) {
          params['devId'] = this.value[1];
        }
        if(this.begin){
          params['begin']=this.begin
        params['begin'] = this.begin;
        }
        if(this.end){
          params['end'] = 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)
          })
      this.loading = true;
      axiosInstanceInstance
        .get('data/id', { params: params })
        .then((response) => {
          this.chartData = response.data.data;
          this.loading = false;
          if(response.data.data.length==0){
          alert('该时段无数据')
          this.isNoData = true
          return
        }
        // 移除空数据状态
        this.isNoData = false
          this.drawChart();
        });
      },
      drawChart() {
        let dateList = []
      let dateList = [];
  
        let puOpenRate = []
        
      let puOpenRate = [];
  
        //比率
        this.chartData.forEach((item) => {
          dateList.push(item.fumeDate)  //x轴日期
        dateList.push(item.fumeDate); //x轴日期
     
          puOpenRate.push(item.purifierOpenRate.slice(0,-1))
        })
        puOpenRate.push(item.purifierOpenRate.slice(0, -1));
      });
  
        let chart = echarts.init(this.$refs.chart)
      let chart = echarts.init(this.$refs.chart);
        chart.setOption({
          title: {
            text: '净化器开启率',
          text: '净化器开启率'
            //left: 'center'
          },
          grid: {
@@ -258,13 +299,15 @@
          legend: {
            data: ['净化器开启率']
          },
          toolbox: {    //工具栏
        toolbox: {
          //工具栏
            feature: {
              dataZoom: {        //区域缩放
              yAxisIndex: "none"
            dataZoom: {
              //区域缩放
              yAxisIndex: 'none'
              },
              restore: {},   //配置项还原
              saveAsImage: {},    //保存为图片
            saveAsImage: {} //保存为图片
            }
          },
          xAxis: {
@@ -278,34 +321,32 @@
              interval:'auto',
              formatter:'{value} %'
            }
  
          },
          series: [
            {
            name: '净化器开启率',
            type: 'line',
            data: puOpenRate
          },
          }
        ]
  
        })
      });
      }
    }
  }
};
  </script>
  
  <style scoped>
  .el-card {
    margin-top: 40px;
  border-radius: 9px;
  }
.chart-container {
    width: 100%;
    height: 600px;
  height: 540px;
}
  .el-header {
    background-color: #000205;
    color: #333;
    line-height: 60px;
  } 

  </style>