From 172d73cbe737c04b3d2c3fe8908db2460c241543 Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期一, 14 八月 2023 17:11:48 +0800
Subject: [PATCH] 油烟监测系统 Vue代码
---
src/views/analysis/HomePage.vue | 114 +++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 75 insertions(+), 39 deletions(-)
diff --git a/src/views/analysis/HomePage.vue b/src/views/analysis/HomePage.vue
index ba8ce9d..e864a56 100644
--- a/src/views/analysis/HomePage.vue
+++ b/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>
+</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> <!--缁戝畾涓�涓柟娉曪紝灏嗚繑鍥炲�艰祴缁檌ndex,鍗宠〃鏍兼瘡琛屾暟鎹殑涓嬫爣-->
<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,19 @@
</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 {
+ isNoData:true,
+ loading:false,
radio: '閫変腑涓旂鐢�',
gapT:0, //鍒嗘瀽鐨勮繃绋嬫柟娉曡�楁椂
isRepeated:0, //0 涓嶉噸澶� 1閲嶅
@@ -289,8 +293,6 @@
//鍒嗘瀽鏁版嵁
analysisData(){
-
-
let startTime=new Date().getTime();
let params = {}
if (this.shopname) {
@@ -306,10 +308,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 +332,10 @@
//鏄惁閲嶅
isRepeat(){
+ if (this.begin > this.end) {
+ alert('璇疯緭鍏ユ纭殑鏃堕棿鑼冨洿');
+ return;
+ }
let params = {}
if (this.shopname) {
params['shopname'] = this.shopname;
@@ -332,7 +346,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 +373,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 +446,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 {
--
Gitblit v1.9.3