油烟 更新了实时监控页面

zmc

2023-10-12 f3acb8ce787f3df0eda633031473be4e6a9ff448

 src/views/analysis/HomePage.vue

@@ -2,7 +2,7 @@
<template>
  <div   class="page-header">

        <el-radio disabled v-model="radio" label="选中且禁用" >徐汇区 天耀桥 田上坊</el-radio>
        <el-radio disabled v-model="radio" label="选中且禁用" >徐汇区 天钥桥 田尚坊</el-radio>
  
        <div class="page-label" >
          <span class="shop-label">店铺名</span>
@@ -18,7 +18,6 @@
      </el-option>
    </el-select>
  </div>          
   <!-- <el-form-item label="开始日期"  class="form-time-lable1"> -->
    <div class="time-label"> 
    <span>开始日期 </span>
    <el-date-picker
@@ -29,9 +28,7 @@
  </el-date-picker>
</div>
<div class="time-label">
   <!-- </el-form-item> -->
   <span>结束日期 </span>
  <!-- <el-form-item label="结束日期" class="form-time-lable2"> -->
    <el-date-picker
    v-model="end"
    type="datetime"
@@ -47,12 +44,7 @@
</div>

  
  <!-- <span style="margin-left: 200px; ">分析耗时：{{gapT}}ms</span>
    <el-divider direction="vertical"></el-divider>
  <span>结果条数：{{total}}</span>
    <el-divider direction="vertical"></el-divider>
  <span>已写入数据库：{{isWrite}}</span> -->
  <!-- <br/> -->

  <div style="display: flex; justify-content: right; margin-right: 110px;">
  <span >分析耗时：{{gapT}}ms</span>
  <el-divider direction="vertical"></el-divider>
@@ -60,15 +52,12 @@
  <el-divider direction="vertical"></el-divider>
</div>
<br/>
   <!-- </el-form> -->
  <!-- </el-card> -->
  <!-- </el-header> -->

  <!-- <el-main> -->
    <div class="table" v-show="!isNoData" v-loading="loading">
      <el-table  :data="displayData" border="" id="table" ref="table" height="500px"  >
      <el-table-column type="index" label="序号" :index="indexMethod" v-if="showColumn.num"> </el-table-column> <!--绑定一个方法，将返回值赋给index,即表格每行数据的下标-->
      <el-table-column prop="fumeDevId" label="设备编号" v-if="showColumn.deviceid" fixed> </el-table-column>
      <el-table-column type="index" label="序号" :index="indexMethod" v-if="showColumn.num" fixed> </el-table-column> <!--绑定一个方法，将返回值赋给index,即表格每行数据的下标-->
      <el-table-column prop="diName" label="店铺名称" v-if="showColumn.diName"> </el-table-column>
      <el-table-column prop="fumeDevId" label="设备编号" v-if="showColumn.deviceid" > </el-table-column>
      <el-table-column prop="fumeDate"   label="日期"  v-if="showColumn.date"> </el-table-column>
      <el-table-column prop="fumeDayMin" label="日最小值"  v-if="showColumn.min"></el-table-column>
      <el-table-column prop="fumeDayMax" label="日最大值"  v-if="showColumn.max"> </el-table-column>
@@ -121,6 +110,7 @@
      <div class="head">选择显示字段</div>
      <div class="body">
        <el-checkbox v-model="checkList.num"  disabled>编号</el-checkbox>
        <el-checkbox v-model="checkList.diName" disabled>店铺名称</el-checkbox>
        <el-checkbox v-model="checkList.deviceid" disabled>设备编号</el-checkbox>
        <el-checkbox v-model="checkList.date">日期</el-checkbox>
        <el-checkbox v-model="checkList.min">日最小值</el-checkbox>
@@ -188,6 +178,7 @@
      checkList: {},
      showColumn: {
          num:true,
          diName:true,
          deviceid:true,
          date:true,
          min:true,
@@ -268,6 +259,7 @@
      this.checkList = {
        num:true,
        deviceid:true,
        diName:true,
        date:true,
        min:true,
        max:true,
@@ -326,6 +318,7 @@
        }
      // 移除空数据状态
      this.isNoData = false
      this.isRepeated = 0
    this.total = this.afterAnalysis.length;
    this.handleCurrentChange(1); // 默认显示第一页

@@ -334,6 +327,10 @@

  let endTime=new Date().getTime()
  this.gapT=endTime-startTime
},

getHasExisitedData(){

},

//是否重复
@@ -359,12 +356,21 @@
  this.loading=true
  this.button.statisticsButton = true
  axiosInstanceInstance.get('/data/search',{params:params}).then(response => {
      this.isRepeated=response.data.data
      if(this.isRepeated>0){
      // this.isRepeated=response.data.data
      if(response.data.data.length>0){
          alert('该店铺的时段已存在分析数据,请重新选择')
          this.isRepeated = 1
          this.loading=false
          this.isNoData = false
          this.button.statisticsButton = false
          this.afterAnalysis = response.data.data
          this.total = this.afterAnalysis.length;
          // 默认显示第一页
          this.handleCurrentChange(1); 
          return
      }else{
      }
       // 请求已存在的数据
      else{
        this.analysisData()
        this.button.statisticsButton = false
      }
@@ -373,23 +379,27 @@
},



//写入MySql
toSql(){
  if(this.isRepeated == 0){
  this.button.WarehousingButton = true
  this.afterAnalysis.forEach((item)=>{
    console.log(item);
    let jsonData=JSON.stringify(item)
    console.log(jsonData);
    axiosInstanceInstance.post('/data/tosql',jsonData,{headers:{
      'Content-Type':'application/json'
    }}).then((result)=>{
      console.log(result);
    })
      // axiosInstanceInstance.post('/data/tosql',jsonData,{headers:{
      //   'Content-Type':'application/json'
      // }}).then((result)=>{
      //   // console.log(result);
      // })
    
  })
  alert('已成功写入数据库')
  this.button.WarehousingButton = fasle
  this.isWrite='是'
    }else{
      alert('重复值不可写入数据库')
    }
 
},


@@ -399,6 +409,7 @@
},
handleCurrentChange(val) {
const startIndex = (val - 1) * this.pageSize;

const endIndex = startIndex + this.pageSize;
this.displayData = this.afterAnalysis.slice(startIndex, endIndex);

@@ -450,7 +461,7 @@

</script>

<style>
<style lang="scss">
/* 卡片 */
.box-card {
  /* width: 1700px; */