油烟 更新了实时监控页面

zmc

2023-10-12 f3acb8ce787f3df0eda633031473be4e6a9ff448

 src/views/HistoryFume.vue

@@ -5,7 +5,6 @@
import axiosInstanceInstance from '../utils/request.js'
import TimeSelect from '../sfc/TimeSelect.vue';

// import ShopNameAndID from '../sfc/TimeSelect.vue';

const ShopNameAndID = defineAsyncComponent(() =>
  import('../sfc/../sfc/ShopNameAndID.vue')
@@ -23,6 +22,10 @@
},
  data() {
    return {
      button:{
        // 查询的按钮
        queryButton:false,
      },
      // 空状态
      isNoData:false,
      // 下拉框一开始展示的名字
@@ -89,158 +92,7 @@
      ],
      // 选择店铺名
      devId: [null,null],
      optionsShop: [
        {
          value: '付小姐在成都',
          label: '付小姐在成都',
          children: [
            {
              value: 'qinshi_31010320210010',
              label: 'qinshi_31010320210010'
            }
          ]
        },
        {
          value: '吉刻联盟',
          label: '吉刻联盟 ',
          children: [
            {
              value: 'qinshi_31010320200006',
              label: 'qinshi_31010320200006'
            }
          ]
        },
        {
          value: '家在塔啦',
          label: '家在塔啦',
          children: [
            {
              value: 'hengzhiyuan_64480047347215',
              label: 'hengzhiyuan_64480047347215'
            }
          ]
        },
        {
          value: '狼来了',
          label: '狼来了 ',
          children: [
            {
              value: 'zhuoquan_31011020175012',
              label: 'zhuoquan_31011020175012'
            }
          ]
        },
        {
          value: '乐凯撒星游店',
          label: '乐凯撒星游店',
          children: [
            {
              value: 'qinshi_31010320200007',
              label: 'qinshi_31010320200007'
            }
          ]
        },
        {
          value: '馨远美食小镇（哈尼美食广场）',
          label: '馨远美食小镇（哈尼美食广场）',
          children: [
            {
              value: 'hengzhiyuan_64480047078091',
              label: 'hengzhiyuan_64480047078091'
            }
          ]
        },
        {
          value: '棒约翰',
          label: '棒约翰',
          children: [
            {
              value: 'qinshi_31010320190005',
              label: 'qinshi_31010320190005'
            }
          ]
        },
        {
          value: '弄堂咪道',
          label: '弄堂咪道',
          children: [
            {
              value: 'zhuoquan_31011020175008',
              label: 'zhuoquan_31011020175008'
            }
          ]
        },
        {
          value: '杨记齐齐哈尔烤肉',
          label: '杨记齐齐哈尔烤肉',
          children: [
            {
              value: 'zhuoquan_31011020175002',
              label: 'zhuoquan_31011020175002'
            }
          ]
        },
        {
          value: '上海稔传餐饮管理有限公司（人生一串）',
          label: '上海稔传餐饮管理有限公司（人生一串）',
          children: [
            {
              value: 'GLHB00000000016004',
              label: 'GLHB00000000016004'
            }
          ]
        },
        {
          value: '缘家',
          label: '缘家',
          children: [
            {
              value: 'fucheng310104200914',
              label: 'fucheng310104200914'
            }
          ]
        },
        {
          value: '泉盛餐饮（上海）有限公司（食其家）',
          label: '泉盛餐饮（上海）有限公司（食其家）',
          children: [
            {
              value: 'GLHB00000000016155',
              label: 'GLHB00000000016155'
            }
          ]
        },
        {
          value: '丰茂烤串',
          label: '丰茂烤串',
          children: [
            {
              value: 'GLHB00000000016011',
              label: 'GLHB00000000016011'
            }
          ]
        },
        {
          value: '上海泰煌餐饮管理有限公司（泰煌鸡）',
          label: '上海泰煌餐饮管理有限公司（泰煌鸡）',
          children: [
            {
              value: 'GLHB00000000010279',
              label: 'GLHB00000000010279'
            }
          ]
        },
        {
          value: '徐汇区辰熙餐馆(小铁君串烧居酒屋)',
          label: '徐汇区辰熙餐馆(小铁君串烧居酒屋)',
          children: [
            {
              value: 'GLHB00000000010504',
              label: 'GLHB00000000010504'
            }
          ]
        }
      ]
      
    };
  },

@@ -310,7 +162,6 @@
            }
          ]
        }
        console.log('option为：',this.options);
      }
      else if (this.radio == 2) {
         // x轴日期时间
@@ -348,7 +199,6 @@
         
        ]
        }
        console.log('option为：',this.options);
      }
      else {
        // x轴日期时间
@@ -392,20 +242,13 @@
        ]
        }
      }
      console.log('option为：',this.options);
      }
      else{
        console.log('exceedingData无数据');
      }
   
      
    
  },
  // 返回前一周分钟数据表数据
  backMinuteDataAWeekAgo() {


    // 打开页面加载最近一周的数据
    this.loading = true;
    // 给级联选择器设置默认的选择项
    this.beginShowShopName = ['付小姐在成都', 'qinshi_31010320210010'];
    this.devId = ['付小姐在成都', 'qinshi_31010320210010'];
@@ -417,30 +260,28 @@
    this.exportBeginTime =this.beginTime
    this.exportEndTime = this.endTime

    console.log(this.currentDateTime, this.oneWeekAgoDateTime);

    let params = {};
    params['devId'] = 'qinshi_31010320210010';
    params['beginTime'] = this.beginTime;
    params['endTime'] = this.endTime;

    this.loading = true;
    axiosInstanceInstance
      .get('/fume/history', { params: params })
      .then((response) => {
        // 保存返回的
        this.exceedingData = response.data.data;
        this.loading = false;
        if(response.data.data.length==0){
          alert('该时段无数据')
          ElMessage('该时段无数据')
          this.isNoData = true
          return
        }
        // 保存返回的
        this.exceedingData = response.data.data;
        
        // 分页
        this.total = this.exceedingData.length;
        // 默认显示第一页
        this.handleCurrentChange(1);
        // this.drawChart();
        this.loading = false;
        console.log('历史数据为：', this.exceedingData);
      })
  
  },
@@ -465,6 +306,7 @@
      params['endTime'] = this.endTime;
    }
    this.loading=true
    this.button.queryButton = true
    axiosInstanceInstance
      .get('/fume/history', { params: params })
      .then((response) => {
@@ -472,21 +314,18 @@
        // 保存返回的
        this.exceedingData = response.data.data;
        this.loading=false

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

@@ -521,7 +360,6 @@

    axiosInstanceInstance.get('/fume/export', { params: params }).then((result) => {
      this.exportData = result.data.data;
      console.log(this.exportData);
    });
  },
  exportExcel() {
@@ -585,7 +423,6 @@
    const year2 = date2.getFullYear();
    const month2 = date2.getMonth();
    const day2 = date2.getDate();
    console.log(month1, month2);

    // 判断两个日期是否相差一个月
    if (year1 === year2) {
@@ -641,7 +478,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
@@ -825,20 +662,16 @@
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
:deep().el-dialog {
  border-radius: 9px;
}
@media screen and (max-width: 768px) {
  /* 在小屏幕上应用的样式 */
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  /* 在中等屏幕上应用的样式 */
.el-table {
  color: #000000;
}

@media screen and (min-width: 1025px) {
  /* 在大屏幕上应用的样式 */
.chart-container {
  height: 60vh;
  width:80vw
}
</style>