油烟 更新了实时监控页面

zmc

2023-10-12 f3acb8ce787f3df0eda633031473be4e6a9ff448

 src/views/analysis/graph/DayData.vue

@@ -1,206 +1,231 @@
<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-cascader
              :options="options"
              :show-all-levels="false"
              :props="{ expandTrigger: 'hover' }"
              placeholder="请选择店铺名和设备编号"
              v-model="value"
              style="margin-right: 32px"
            >
            </el-cascader>
          </el-form-item>

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

    ],
     
    }
          children: [
            {
              value: 'GLHB00000000010504',
              label: 'GLHB00000000010504'
            }
          ]
        }
      ]
    };
  },
  mounted(){
  mounted() {
    //  默认加载付小姐在成都 5月1号到15号的
      this.fetchData()
    },
    this.fetchData();
  },
  methods: {
    fetchData() {
      if (
@@ -211,45 +236,54 @@
        alert('请输入有效的时间段');
        return;
      }
      let params = {}
      let params = {};
      if (this.value[1]) {
        params['devId'] = this.value[1];
      }
      if(this.begin){
        params['begin']=this.begin
      if (this.begin) {
        params['begin'] = this.begin;
      }
      if(this.end){
        params['end'] = this.end
      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)
        })
      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
        }
        // 移除空数据状态
        this.isNoData = false
          this.drawChart();
        });
    },
    drawChart() {
      let dateList = []
      let dayMin = []
      let dayMax = []
      let dayAverage = []
      let minuteExceeding=[]
      let dateList = [];
      let dayMin = [];
      let dayMax = [];
      let dayAverage = [];
      let minuteExceeding = [];

      this.chartData.forEach((item) => {
        dateList.push(item.fumeDate)
        dayMin.push(item.fumeDayMin)
        dayMax.push(item.fumeDayMax)
        dayAverage.push(item.fumeDayAverage)
        minuteExceeding.push(item.fumeMinuteExceedingNum)
      })
        dateList.push(item.fumeDate);
        dayMin.push(item.fumeDayMin);
        dayMax.push(item.fumeDayMax);
        dayAverage.push(item.fumeDayAverage);
        minuteExceeding.push(item.fumeMinuteExceedingNum);
      });

      let chart = echarts.init(this.$refs.chart)
      let chart = echarts.init(this.$refs.chart);
      chart.setOption({
        title: {
          text: '日变化',
          text: '日变化'
          //left: 'center'
        },
        grid: {
@@ -259,66 +293,65 @@
          containLabel: true
        },
        tooltip: {},
  

        legend: {
          data: ['日最小值','日最大值','日均值','分钟数据日超标数']
          data: ['日最小值', '日最大值', '日均值', '分钟数据日超标数']
        },
        toolbox: {    //工具栏
        toolbox: {
          //工具栏
          feature: {
            dataZoom: {        //区域缩放
            yAxisIndex: "none"
            dataZoom: {
              //区域缩放
              yAxisIndex: 'none'
            },
            restore: {},   //配置项还原
            saveAsImage: {},    //保存为图片
            restore: {}, //配置项还原
            saveAsImage: {} //保存为图片
          }
        },
        xAxis: {
          data: dateList
        },
        yAxis: {},
        series: [{
          name: '日最小值',
          type: 'line',
          data: dayMin
        },
        {
          name: '日最大值',
          type: 'line',
          data: dayMax
        },
        {
          name: '日均值',
          type: 'line',
          data: dayAverage
        },
        {
          name: '分钟数据日超标数',
          type: 'line',
          data: minuteExceeding
        },
       
        
      ]

      })
        series: [
          {
            name: '日最小值',
            type: 'line',
            data: dayMin
          },
          {
            name: '日最大值',
            type: 'line',
            data: dayMax
          },
          {
            name: '日均值',
            type: 'line',
            data: dayAverage
          },
          {
            name: '分钟数据日超标数',
            type: 'line',
            data: minuteExceeding
          }
        ]
      });
    }
  }
}
 

};
</script>

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