zmc
2023-08-15 d58be9584f409e7d198fd34982155331d6710f1f
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,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>
  <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>
@@ -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" 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 prop="fumeDate"   label="日期"  v-if="showColumn.date"> </el-table-column>
@@ -149,19 +153,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重复
@@ -289,8 +299,6 @@
//分析数据
analysisData(){
  let startTime=new Date().getTime();
  let params = {}
  if (this.shopname) {
@@ -306,10 +314,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,9 +338,16 @@
//是否重复
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,33 +355,32 @@
  if(this.end){
    params['end'] = this.end
  }
  axios.get('http://localhost:8080/data/search',{params:params})
    .then(response => {
  // 另外一个loading在analysisData()中
  this.loading=true
  this.button.statisticsButton = true
  axiosInstanceInstance.get('/data/search',{params:params}).then(response => {
      this.isRepeated=response.data.data
      console.log('请求',this.isRepeated);
      if(this.isRepeated>0){
          alert('该店铺的时段已存在分析数据,请重新选择')
          this.button.statisticsButton = false
          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.button.WarehousingButton = true
  this.afterAnalysis.forEach((item)=>{
    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);
@@ -366,6 +388,7 @@
    
  })
  alert('已成功写入数据库')
  this.button.WarehousingButton = fasle
  this.isWrite='是'
},
@@ -431,7 +454,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 {