油烟监测系统 Vue代码

zmc

2023-08-14 172d73cbe737c04b3d2c3fe8908db2460c241543

 src/views/HistoryFume.vue

@@ -2,7 +2,7 @@
<script >
import * as XLSX from 'xlsx/xlsx.mjs';
import dayjs from 'dayjs';
import axiosInstance from '../utils/request.js'
import axiosInstanceInstance from '../utils/request.js'
import TimeSelect from '../sfc/TimeSelect.vue';

// import ShopNameAndID from '../sfc/TimeSelect.vue';
@@ -23,6 +23,8 @@
},
  data() {
    return {
      // 空状态
      isNoData:false,
      // 下拉框一开始展示的名字
      beginShowShopName:[],
      options: {},
@@ -87,158 +89,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'
            }
          ]
        }
      ]
      
    };
  },

@@ -256,8 +107,7 @@

  beforeRouteUpdate(to, from, next) {
    if (to.name === this.$route.name) {
      this.backMinuteDataAWeekAgo();
      
      this.backMinuteDataAWeekAgo();   
    }
    next();
  },
@@ -401,10 +251,6 @@
  },
  // 返回前一周分钟数据表数据
  backMinuteDataAWeekAgo() {
    

    // 打开页面加载最近一周的数据
    this.loading = true;
    // 给级联选择器设置默认的选择项
    this.beginShowShopName = ['付小姐在成都', 'qinshi_31010320210010'];
    this.devId = ['付小姐在成都', 'qinshi_31010320210010'];
@@ -412,7 +258,9 @@
    // 给时间选择器设置默认时间
    // this.beginTime = dayjs().subtract(1, 'week').format('YYYY-MM-DD HH:mm:ss');
    // this.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss');

    // 将时间同步给导出时间
    this.exportBeginTime =this.beginTime
    this.exportEndTime = this.endTime

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

@@ -420,12 +268,19 @@
    params['devId'] = 'qinshi_31010320210010';
    params['beginTime'] = this.beginTime;
    params['endTime'] = this.endTime;

    axiosInstance
    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){
          ElMessage('该时段无数据')
          this.isNoData = true
          return
        }
        
        // 分页
        this.total = this.exceedingData.length;
        // 默认显示第一页
@@ -443,6 +298,9 @@
      alert('时间跨度不能超过一个月');
      return;
    }
    // 将时间同步给导出时间
    this.exportBeginTime =this.beginTime
    this.exportEndTime = this.endTime
    let params = {};
    if (this.devId[1]) {
      params['devId'] = this.devId[1];
@@ -453,11 +311,22 @@
    if (this.endTime) {
      params['endTime'] = this.endTime;
    }
    axiosInstance
    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){
          ElMessage('该时段无数据')
          this.isNoData = true
          return
        }
        // 移除空数据状态
        this.isNoData = false
        // this.displayData = response.data.data   //表格渲染
        // 分页
        this.total = this.exceedingData.length;
@@ -497,7 +366,7 @@
      params['exportEndTime'] = this.exportEndTime;
    }

    axiosInstance.get('/fume/export', { params: params }).then((result) => {
    axiosInstanceInstance.get('/fume/export', { params: params }).then((result) => {
      this.exportData = result.data.data;
      console.log(this.exportData);
    });
@@ -524,7 +393,7 @@
    // 编辑表头行    修改表头
    xls['A1'].v = '设备编号';
    xls['B1'].v = '店铺名称';
    xls['C1'].v = '报警时间';
    xls['C1'].v = '采集时间';
    xls['D1'].v = '风机电流(A)';
    xls['E1'].v = '净化器电流(A)';
    xls['F1'].v = '油烟浓度(mg/m³)';
@@ -691,12 +560,12 @@
  </div>


    <div  v-show="!isSwitch" class="chart-container">
    <div  v-show="!isSwitch && !isNoData" v-loading="loading" class="chart-container">
      <lineChart :chartData="options"></lineChart>
    </div>

    <!-- 表格数据 -->
    <div v-show="isSwitch" class="container">
    <div v-show="isSwitch && !isNoData" v-loading="loading" class="container">
      <el-table :data="displayData" style="width: 100%; margin-top: 25px" height="500px" table-layout="auto">
        <el-table-column fixed prop="mvStatCode" label="设备编号">
          <template #default="{ row }">
@@ -713,7 +582,7 @@
          </template>
        </el-table-column>

        <el-table-column prop="mvDataTime" label="采样时间">
        <el-table-column prop="mvDataTime" label="采集时间">
          <template #default="{ row }">
            <el-tooltip effect="dark" :content="row.mvDataTime">
              <div class="cell ellipsis">{{ row.mvDataTime }}</div>
@@ -747,6 +616,7 @@

      <!-- layout="total, sizes, prev, pager, next, jumper"  -->
    </div>
    <el-empty v-show="isNoData" :image-size="200" />
  </div>
</template>

@@ -804,6 +674,9 @@
  flex-direction: column;
  height: 100vh;
}
:deep().el-dialog {
  border-radius: 9px;
}
@media screen and (max-width: 768px) {
  /* 在小屏幕上应用的样式 */
}