油烟检测系统

zmc

2023-08-07 1e18f0bcee0358e13c0e2cb750d17cd7ef5bf4d6

 src/views/analysis/graph/DayData.vue

@@ -8,8 +8,6 @@
        </el-header>
   </el-header> -->



   <el-main>
    <el-form :inline="true" :model="form" class="demo-form-inline">
          <!-- <el-form-item label="设备编号">
@@ -28,7 +26,8 @@
            :props="{expandTrigger:'hover'}" 
            placeholder="请选择店铺名和设备编号"
            v-model="value"
            style="margin-right:32px">
              style="margin-right: 32px"
            >
        </el-cascader>
       </el-form-item>
 
@@ -37,7 +36,8 @@
      v-model="begin"
      type="date"
      placeholder="选择日期"
      value-format="YYYY-MM-DD">
              value-format="YYYY-MM-DD"
            >
    </el-date-picker>
     </el-form-item>
 
@@ -46,7 +46,8 @@
      v-model="end"
      type="date"
      placeholder="选择日期"
      value-format="YYYY-MM-DD">
              value-format="YYYY-MM-DD"
            >
    </el-date-picker>
    </el-form-item>
 
@@ -55,8 +56,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>
@@ -64,142 +66,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() {
@@ -211,45 +246,52 @@
        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;
      }
      this.loading = true;
      axiosInstanceInstance
        .get('/data/id', { params: params })
        .then((response) => {

      axiosInstance.get('/data/id',{params:params})
        .then(response => {
          this.chartData = response.data.data
          this.drawChart()
        })
        .catch(error => {
          console.log(error)
        })
          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 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: {
@@ -263,20 +305,23 @@
        legend: {
          data: ['日最小值','日最大值','日均值','分钟数据日超标数']
        },
        toolbox: {    //工具栏
        toolbox: {
          //工具栏
          feature: {
            dataZoom: {        //区域缩放
            yAxisIndex: "none"
            dataZoom: {
              //区域缩放
              yAxisIndex: 'none'
            },
            restore: {},   //配置项还原
            saveAsImage: {},    //保存为图片
            saveAsImage: {} //保存为图片
          }
        },
        xAxis: {
          data: dateList
        },
        yAxis: {},
        series: [{
        series: [
          {
          name: '日最小值',
          type: 'line',
          data: dayMin
@@ -295,26 +340,22 @@
          name: '分钟数据日超标数',
          type: 'line',
          data: minuteExceeding
        },
       
        
          }
      ]

      })
      });
    }
  }
}
 

};
</script>

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