油烟检测系统

zmc

2023-08-07 1e18f0bcee0358e13c0e2cb750d17cd7ef5bf4d6

 src/views/analysis/HomePage.vue

@@ -1,15 +1,14 @@

<template>
  <div   class="page-header">

        <el-radio disabled v-model="radio" label="选中且禁用" >徐汇区 天耀桥 田上坊</el-radio>
  
        <div class="page-label" >
          <span class="shop-label">店铺名</span>
  <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>
      <el-select v-model="value" placeholder="请选择" >
      <el-option
        v-for="item in options"
@@ -18,29 +17,34 @@
        :value="item.value">
      </el-option>
    </el-select>
              
   <el-form-item label="开始日期"  class="form-time-lable1">
  </div>          
   <!-- <el-form-item label="开始日期"  class="form-time-lable1"> -->
    <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">
   <!-- </el-form-item> -->
   <span>结束日期 </span>
  <!-- <el-form-item label="结束日期" class="form-time-lable2"> -->
    <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>
</div>
  <!-- </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-form-item> 
</div>

  
  <!-- <span style="margin-left: 200px; ">分析耗时：{{gapT}}ms</span>
@@ -49,20 +53,20 @@
    <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-form> -->
  <!-- </el-card> -->
  <!-- </el-header> -->

  <!-- <el-main> -->
    <div class="table">
      <el-table  :data="displayData" border="" id="table" ref="table" height="650px" >
    <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>
      <el-table-column prop="fumeDate"   label="日期"  v-if="showColumn.date"> </el-table-column>
@@ -151,17 +155,19 @@
</transition>
  <!-- </el-main> -->
</div>
  </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 {
      isNoData:false,
      loading:false,
      radio: '选中且禁用',
      gapT:0,     //分析的过程方法耗时
      isRepeated:0,   //0 不重复   1重复
@@ -289,8 +295,6 @@
//分析数据
analysisData(){



  let startTime=new Date().getTime();
  let params = {}
  if (this.shopname) {
@@ -306,10 +310,18 @@
    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.total = this.afterAnalysis.length;
    this.handleCurrentChange(1); // 默认显示第一页

@@ -322,6 +334,10 @@

//是否重复
isRepeat(){
  if (this.begin > this.end) {
        alert('请输入正确的时间范围');
        return;
      }
  let params = {}
  if (this.shopname) {
    params['shopname'] = this.shopname;
@@ -332,7 +348,8 @@
  if(this.end){
    params['end'] = this.end
  }
  axios.get('http://localhost:8080/data/search',{params:params})
  this.loading=true
  axiosInstanceInstance.get('/data/search',{params:params})
    .then(response => {
      this.isRepeated=response.data.data
      console.log('请求',this.isRepeated);
@@ -358,7 +375,7 @@
    console.log(item);
    let jsonData=JSON.stringify(item)
    console.log(jsonData);
    axios.post('http://localhost:8080/data/tosql',jsonData,{headers:{
    axiosInstanceInstance.post('/data/tosql',jsonData,{headers:{
      'Content-Type':'application/json'
    }}).then((result)=>{
      console.log(result);
@@ -431,7 +448,28 @@
/* 卡片 */
.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 {