油烟 更新了实时监控页面

zmc

2023-10-12 f3acb8ce787f3df0eda633031473be4e6a9ff448

 src/views/analysis/HomePage.vue

@@ -1,16 +1,15 @@

<template>
  <div>
      <!-- <el-header> -->
        <el-card class="box-card">
      <el-form :inline="true"  class="demo-form-inline">
          
        <el-radio disabled v-model="radio" label="选中且禁用" style="margin-top: 15px;">徐汇区 天耀桥 田上坊</el-radio>
      <el-form-item label="店铺名" class="form-lable">
          <el-input v-model="shopname" placeholder="店铺名"></el-input>
      </el-form-item>
  <div   class="page-header">

      <el-select v-model="value" placeholder="请选择" >
        <el-radio disabled v-model="radio" label="选中且禁用" >徐汇区 天钥桥 田尚坊</el-radio>
  
        <div class="page-label" >
          <span class="shop-label">店铺名</span>
          <div>
          <el-input v-model="shopname"   placeholder="店铺名"></el-input>
        </div>
        <el-select v-model="value" placeholder="请选择" >
      <el-option
        v-for="item in options"
        :key="item.value"
@@ -18,53 +17,47 @@
        :value="item.value">
      </el-option>
    </el-select>
              
   <el-form-item label="开始日期"  class="form-time-lable1">
  </div>          
    <div class="time-label"> 
    <span>开始日期 </span>
    <el-date-picker
    v-model="begin"
    type="date"
    type="datetime"
    placeholder="选择日期"
    value-format="YYYY-MM-DD">
    value-format="YYYY-MM-DD HH:mm:ss">
  </el-date-picker>
   </el-form-item>

  <el-form-item label="结束日期" class="form-time-lable2">
</div>
<div class="time-label">
   <span>结束日期 </span>
    <el-date-picker
    v-model="end"
    type="date"
    type="datetime"
    placeholder="选择日期"
    value-format="YYYY-MM-DD">
    value-format="YYYY-MM-DD HH:mm:ss">
  </el-date-picker>
  </el-form-item>

  <el-form-item>
  <el-button type="primary" @click="isRepeat">统计分析</el-button>
  <el-button type="primary" @click="toSql">入库管理</el-button>
  </el-form-item> 
</div>
  <!-- </el-form-item> -->
</div> 
  <div style="display: flex; justify-content: right; margin-right: 160px;">
  <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>
  <span style="margin-left: 1400px; ">分析耗时：{{gapT}}ms</span>

  <div style="display: flex; justify-content: right; margin-right: 110px;">
  <span >分析耗时：{{gapT}}ms</span>
  <el-divider direction="vertical"></el-divider>
  <span>结果条数：{{total}}</span>
  <el-divider direction="vertical"></el-divider>
</div>
<br/>
   </el-form>
  </el-card>
  <!-- </el-header> -->

  <!-- <el-main> -->
    <div class="table">
      <el-table  :data="displayData" border="" id="table" ref="table" height="650px" >
      <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>
@@ -117,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>
@@ -149,19 +143,25 @@
    </div>
  </div>
</transition>
  <!-- </el-main> -->
</div>
  </div>

  <el-empty v-show="isNoData" :image-size="200" />
</template>



<script>
import axios from 'axios'
import axiosInstanceInstance from '../../utils/request.js'
export default {
data() {
return {
      button:{
        // 统计分析按钮
        statisticsButton:false,
        // 入库按钮
        WarehousingButton:false
      },
      isNoData:true,
      loading:false,
      radio: '选中且禁用',
      gapT:0,     //分析的过程方法耗时
      isRepeated:0,   //0 不重复   1重复
@@ -178,6 +178,7 @@
      checkList: {},
      showColumn: {
          num:true,
          diName:true,
          deviceid:true,
          date:true,
          min:true,
@@ -258,6 +259,7 @@
      this.checkList = {
        num:true,
        deviceid:true,
        diName:true,
        date:true,
        min:true,
        max:true,
@@ -289,8 +291,6 @@
//分析数据
analysisData(){



  let startTime=new Date().getTime();
  let params = {}
  if (this.shopname) {
@@ -306,10 +306,19 @@
    params['end'] = this.end
  }
  
axios.get('http://localhost:8080/data/input',{params:params})
 axiosInstanceInstance.get('/data/input',{params:params})
  .then(response => {
    this.afterAnalysis = response.data.data
    this.loading = false
    console.log('返回的数据为',response.data.data);
    if(response.data.data.length==0){
          alert('该时段无数据')
          this.isNoData = true
          return
        }
      // 移除空数据状态
      this.isNoData = false
      this.isRepeated = 0
    this.total = this.afterAnalysis.length;
    this.handleCurrentChange(1); // 默认显示第一页

@@ -320,11 +329,22 @@
  this.gapT=endTime-startTime
},

getHasExisitedData(){

},

//是否重复
isRepeat(){
  if (this.begin > this.end) {
        alert('请输入正确的时间范围');
        return;
      }
  let params = {}
  if (this.shopname) {
    params['shopname'] = this.shopname;
  }
  if(this.value){
    params['value'] = this.value;
  }
  if(this.begin){
    params['begin']=this.begin
@@ -332,41 +352,54 @@
  if(this.end){
    params['end'] = this.end
  }
  axios.get('http://localhost:8080/data/search',{params:params})
    .then(response => {
      this.isRepeated=response.data.data
      console.log('请求',this.isRepeated);
  // 另外一个loading在analysisData()中
  this.loading=true
  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);
    axios.post('http://localhost:8080/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('重复值不可写入数据库')
    }
 
},


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

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

@@ -427,11 +461,32 @@

</script>

<style>
<style lang="scss">
/* 卡片 */
.box-card {
  /* width: 1700px; */
  height: 150px;
  height: 180px;
}
.el-radio {
  margin-top: 15px;
  margin-left: 5px;
}
.page-header {
  display: flex;
}
.page-label {
  display: flex; 
  margin-top: 15px;
  margin-right: 3px;
}
.shop-label {
  margin-top: 5px;
}
/* 时间选择 */
.time-label {
  margin-top: 15px;
  margin-left: 20px;
  white-space: nowrap;
}
/* 表格 */
.table {