油烟 更新了实时监控页面

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"
@@ -42,17 +39,12 @@
  <!-- </el-form-item> -->
</div> 
  <div style="display: flex; justify-content: right; margin-right: 160px;">
  <el-button type="primary" @click="isRepeat">统计分析</el-button>
  <el-button type="primary" @click="toSql">入库管理</el-button>
  <el-button type="primary" :loading="button.statisticsButton"  @click="isRepeat">统计分析</el-button>
  <el-button type="primary" :loading="button.WarehousingButton"  @click="toSql">入库管理</el-button>
</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">
      <el-table  :data="displayData" border="" id="table" ref="table" height="500px" v-loading="loading" >
      <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>
    <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" 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>
@@ -153,9 +143,7 @@
    </div>
  </div>
</transition>
  <!-- </el-main> -->
</div>
  <!-- </div> -->
  <el-empty v-show="isNoData" :image-size="200" />
</template>

@@ -166,7 +154,13 @@
export default {
data() {
return {
      isNoData:false,
      button:{
        // 统计分析按钮
        statisticsButton:false,
        // 入库按钮
        WarehousingButton:false
      },
      isNoData:true,
      loading:false,
      radio: '选中且禁用',
      gapT:0,     //分析的过程方法耗时
@@ -184,6 +178,7 @@
      checkList: {},
      showColumn: {
          num:true,
          diName:true,
          deviceid:true,
          date:true,
          min:true,
@@ -264,6 +259,7 @@
      this.checkList = {
        num:true,
        deviceid:true,
        diName:true,
        date:true,
        min:true,
        max:true,
@@ -320,8 +316,9 @@
          this.isNoData = true
          return
        }
        // 移除空数据状态
      // 移除空数据状态
      this.isNoData = false
      this.isRepeated = 0
    this.total = this.afterAnalysis.length;
    this.handleCurrentChange(1); // 默认显示第一页

@@ -330,6 +327,10 @@

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

getHasExisitedData(){

},

//是否重复
@@ -342,48 +343,63 @@
  if (this.shopname) {
    params['shopname'] = this.shopname;
  }
  if(this.value){
    params['value'] = this.value;
  }
  if(this.begin){
    params['begin']=this.begin
  }
  if(this.end){
    params['end'] = this.end
  }
  // 另外一个loading在analysisData()中
  this.loading=true
  axiosInstanceInstance.get('/data/search',{params:params})
    .then(response => {
      this.isRepeated=response.data.data
      console.log('请求',this.isRepeated);
  this.button.statisticsButton = true
  axiosInstanceInstance.get('/data/search',{params:params}).then(response => {
      // 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{
        this.analysisData()
        this.button.statisticsButton = false
      }
      
    })

   setTimeout(() => {
    console.log('请求后',this.isRepeated);
    if(this.isRepeated>0){
      alert('该店铺的时段已存在分析数据,请重新选择')
        return
    }else{
      this.analysisData()
      console.log('执行了');
    }
   }, 1000);
    
},



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


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

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

@@ -444,7 +461,7 @@

</script>

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