From 1e18f0bcee0358e13c0e2cb750d17cd7ef5bf4d6 Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期一, 07 八月 2023 17:55:21 +0800
Subject: [PATCH] 油烟检测系统
---
src/test/TestDrawer.vue | 329 +++++++++++++++++++++++++++++++++++-------------------
1 files changed, 214 insertions(+), 115 deletions(-)
diff --git a/src/test/TestDrawer.vue b/src/test/TestDrawer.vue
index 16b283f..c129336 100644
--- a/src/test/TestDrawer.vue
+++ b/src/test/TestDrawer.vue
@@ -1,9 +1,10 @@
<!-- 瀹炴椂鐩戞祴 -->
+
<script>
-import axiosInstance from '../utils/request.js';
+import axiosInstanceInstance from '../utils/request.js';
// 寮傛缁勪欢
const DashBoard = defineAsyncComponent(() =>
- import('../sfc/DashBoardTest.vue')
+ import('../sfc/DashboardChart.vue')
)
export default {
components:{
@@ -11,36 +12,55 @@
},
data() {
return {
- // 鍗＄墖澶у皬
- cardSize: 'medium',
// 榛樿鎵撳紑鐨勬姌鍙犻潰鏉�
activeNames:'1',
- // isShow:false,
- // 瑕佸睍绀虹殑浠〃鐩樻暟閲�
- // totalCharts: 0,
- // 瀹炴椂鏇存柊闂撮殧 3绉�
+ // 瀹炴椂鏇存柊闂撮殧 60绉�
timeInterval:60000,
// 澶栭儴璁惧
outside: {
+ // 鎼滅储
+ searchText:'',
+ isall:false,
+ isLoading:false,
// 璁惧淇℃伅琛ㄧ殑鏁版嵁
shopnames: [],
+ // 褰撳墠灞曠ず鐨勫閫夋缁勫��
+ displayedShopnames:[],
+ // 褰撳墠椤�
+ currentPage:1,
+ // 姣忛〉鏄剧ず鐨勬暟閲�
+ pageSize:5,
+ // 鏄惁宸插姞杞藉畬鎵�鏈夋暟鎹�
+ allDataLoaded:false,
+ // 鏄惁鍏ㄩ��
checkAll: false,
isIndeterminate: false,
// 宸查�夋嫨搴楅摵
checkedShops: [],
-
//杩斿洖閫夋嫨鐨勬墍鏈夊簵閾虹殑鏁版嵁
realTimeData: []
},
// 鍐呴儴璁惧
inner: {
+ searchText:'',
+ isall:false,
+ isLoading:false,
// 鍐呴儴鎺ュ彛杩斿洖鐨勬墍鏈夋暟鎹�
getData:[],
// 閫変腑鐨勫簵閾哄搴斿叏閮ㄥ瓧娈典俊鎭�
inFumeValue:[],
- // 搴楅摵鍚嶅瓧
+ // 鎵�鏈夊簵閾哄悕瀛�
shopnames: [],
+ // 褰撳墠灞曠ず鐨勫閫夋缁勫��
+ displayedShopnames:[],
+ // 褰撳墠椤�
+ currentPage:1,
+ // 姣忛〉鏄剧ず鐨勬暟閲�
+ pageSize:2,
+ // 鏄惁宸插姞杞藉畬鎵�鏈夋暟鎹�
+ allDataLoaded:false,
+ // 鏄惁鍏ㄩ��
checkAll: false,
isIndeterminate: false,
// 宸查�夋嫨搴楅摵
@@ -52,75 +72,28 @@
// devices: []
};
},
- computed: {
- cardStyle() {
- let width = '400px';
- let height = '500px';
- if (this.cardSize === 'small') {
- width = '200px';
- height = '200px';
- } else if (this.cardSize === 'large') {
- width = '600px';
- height = '600px';
- }
- return {
- width,
- height
- };
- },
-
+ watch:{
+ // 'outside.checkedShops'(){
+ // this.saveOutsideData()
+ // console.log('111');
+ // }
},
methods: {
- // 鍚屾鏀瑰彉浠〃鐩樺ぇ灏�
- getDashBoardStyle() {
- if (this.cardSize === 'small') {
- return {
- width: '180px',
- height: '120px',
- margin: '10px'
- };
- } else if (this.cardSize === 'large') {
- return {
- width: '380px',
- height: '220px',
- margin: '10px'
- };
- } else {
- return {
- width: '280px',
- height: '170px',
- margin: '10px'
- };
- }
- },
- // 鏀瑰彉甯冨眬澶у皬 浠庤�屽疄鐜版瘡琛屾斁缃华琛ㄧ洏鏁伴噺澧炲
- getColSpan(){
- if (this.cardSize === 'small') {
- return 3
- } else if (this.cardSize === 'medium') {
- return 4
- }
- else if (this.cardSize === 'large'){
- return 8
- }
- return 6
- },
-
- // 鏀瑰彉鍗＄墖澶у皬
- changeCardSize(size) {
- this.cardSize = size;
- },
//鑾峰彇鎵�鏈夊簵閾哄悕瀛�
getDeviceInfo() {
- // 鑾峰彇澶栭儴璁惧鐨勫簵閾哄悕绉�
- axiosInstance.get('/fume/device').then((result) => {
+ // 鑾峰彇鎵�鏈夊閮ㄨ澶囩殑搴楅摵鍚嶇О
+ axiosInstanceInstance.get('/fume/device').then((result) => {
result.data.data.forEach((item) => {
this.outside.shopnames.push(item.diName);
});
+ this.outside.displayedShopnames = this.outside.shopnames.slice(0, this.outside.pageSize);
+ if (this.outside.shopnames.length <= this.outside.pageSize) {
+ this.outside.allDataLoaded = true;
+ }
});
//浠庡唴閮ㄦ帴鍙ｈ幏鍙栧疄鏃舵暟鎹殑鎵�鏈夊簵閾哄悕绉�
- axiosInstance
+ axiosInstanceInstance
.get('https://fyami.com.cn/device/min/value/real_time', {
params: { page: 1, per_page: 20 }
})
@@ -128,21 +101,93 @@
// 淇濆瓨鍐呴儴鎺ュ彛鑾峰彇鐨勬墍鏈変俊鎭�
this.getData = result.data.data
result.data.data.forEach((item) => {
-
this.inner.shopnames.push(item.siteName);
});
+ this.inner.displayedShopnames = this.inner.shopnames.slice(0, this.inner.pageSize);
+ if (this.inner.shopnames.length <= this.inner.pageSize) {
+ this.inner.allDataLoaded = true;
+ }
+
});
+ },
+ loadMore() {
+ this.outside.isLoading = true
+ setTimeout(() => {
+ const startIndex = this.outside.currentPage * this.outside.pageSize;
+ const endIndex = startIndex + this.outside.pageSize;
+ this.outside.displayedShopnames = this.outside.displayedShopnames.concat(this.outside.shopnames.slice(startIndex, endIndex));
+ this.outside.currentPage++;
+ if (this.outside.displayedShopnames.length === this.outside.shopnames.length) {
+ this.outside.allDataLoaded = true;
+ this.outside.isall = true
+ }
+ this.outside.isLoading = false
+ }, 100);
+ },
+ loadMoreInner() {
+ this.inner.isLoading = true
+ setTimeout(() => {
+ const startIndex = this.inner.currentPage * this.inner.pageSize;
+ const endIndex = startIndex + this.inner.pageSize;
+ this.inner.displayedShopnames = this.inner.displayedShopnames.concat(this.inner.shopnames.slice(startIndex, endIndex));
+ this.inner.currentPage++;
+ if (this.inner.displayedShopnames.length === this.inner.shopnames.length) {
+ this.inner.allDataLoaded = true;
+ this.inner.isall = true
+ }
+ this.inner.isLoading = false
+ }, 100);
+ },
+ // 杩囨护鏁版嵁
+ filterData (keyword) {
+ return this.outside.shopnames.filter((item) => item.includes(keyword));
+ },
+
+ // 澶勭悊鎼滅储
+ handleSearch (){
+ if(this.outside.searchText != ''){
+ this.outside.displayedShopnames = this.filterData(this.outside.searchText);
+ this.outside.currentPage = 1; // 閲嶇疆椤电爜
+ this.outside.allDataLoaded = this.outside.displayedShopnames === this.outside.shopnames.length;
+ }
+ else
+ {
+ // 鍔犺浇榛樿鏁伴噺鐨�
+ this.outside.displayedShopnames = this.outside.shopnames.slice(0, this.outside.pageSize);
+ if(this.outside.shopnames.length <= this.outside.pageSize){
+ this.outside.allDataLoaded.value = true;
+ }
+ this.outside.checkedShops = []
+ }
+ },
+
+ // 澶勭悊鎼滅储
+ handleSearchInner(){
+ if(this.inner.searchText != ''){
+ this.inner.displayedShopnames = this.filterData(this.inner.searchText);
+ this.inner.currentPage = 1; // 閲嶇疆椤电爜
+ this.inner.allDataLoaded = this.inner.displayedShopnames === this.inner.shopnames.length;
+ }
+ else
+ {
+ // 鍔犺浇榛樿鏁伴噺鐨�
+ this.inner.displayedShopnames = this.inner.shopnames.slice(0, this.inner.pageSize);
+ if(this.inner.shopnames.length <= this.inner.pageSize){
+ this.inner.allDataLoaded.value = true;
+ }
+ this.inner.checkedShops = []
+ }
},
// 澶栭儴璁惧鍏ㄩ��
handleCheckAllChangeOutside(val) {
- this.outside.checkedShops = val ? this.outside.shopnames : [];
+ this.outside.checkedShops = val ? this.outside.displayedShopnames : [];
this.outside.isIndeterminate = false;
},
handleCheckedCitiesChangOutside(value) {
const checkedCount = value.length;
- this.outside.checkAll = checkedCount === this.outside.shopnames.length;
+ this.outside.checkAll = checkedCount === this.outside.displayedShopnames.length;
this.outside.isIndeterminate =
- checkedCount > 0 && checkedCount < this.outside.shopnames.length;
+ checkedCount > 0 && checkedCount < this.outside.displayedShopnames.length;
},
// 鍐呴儴璁惧鍏ㄩ��
@@ -171,7 +216,7 @@
if (this.outside.checkedShops.length != 0) {
params['shops'] = temp;
}
- axiosInstance.get('/fume/lastest', { params: params }).then((result) => {
+ axiosInstanceInstance.get('/fume/lastest', { params: params }).then((result) => {
this.outside.realTimeData = result.data.data;
console.log('66', this.outside.realTimeData);
// console.log('闀垮害涓猴細',this.outside.realTimeData.length);
@@ -179,7 +224,7 @@
// this.updateCharts();
});
}
-
+
// 閫夋嫨浜嗗唴閮ㄨ澶�
if(this.inner.checkedShops.length!=0){
// 娓呯┖鏁版嵁
@@ -210,21 +255,42 @@
setInterval(() => {
this.request();
}, this.timeInterval);
+
// 寰楀埌瑕佸睍绀虹殑浠〃鐩樻暟閲�
// this.totalCharts =
// this.outside.checkedShops.length + this.inner.checkedShops.length;
- }
+ },
+ // saveOutsideData(){
+ // let temp = JSON.parse(localStorage.getItem('outsideData'));
+ // if(temp!=null && temp.length!=0){
+ // temp.concat(this.outside.checkedShops)
+ // localStorage.setItem('outsideData', JSON.stringify(temp));
+ // }else{
+ // localStorage.setItem('outsideData', JSON.stringify(this.outside.checkedShops));
+ // }
+ // },
+ // getOutsideData () {
+ // const data = localStorage.getItem('outsideData');
+ // this.outside.displayedShopnames = JSON.parse(data);
+
+ // }
},
mounted() {
// 鑾峰彇鎵�鏈夊簵閾哄悕瀛�
this.getDeviceInfo();
+ // 浼樺厛灞曠ず娴忚鍣ㄧ紦瀛樹腑鐨�
+ // this.getOutsideData()
}
-};
+
+
+
+}
</script>
+
<template>
-
<div>
+
<el-collapse v-model="activeNames" >
<el-collapse-item name="1">
<template #title>
@@ -234,36 +300,48 @@
content="鐐瑰嚮鍙姌鍙�"
placement="right-start"
>
- <h2>閫夋嫨鏌愪釜璁惧鐨勫疄鏃舵暟鎹細</h2>
+ <h2 style="margin-left: 10px;">鐩戞祴绔欑偣閫夋嫨</h2>
</el-tooltip>
</template>
<el-card shadow="always" class="form-card">
<el-form label-width="120px">
- <el-form-item label="澶栭儴璁惧">
+ <el-form-item label="鍏朵粬璁惧">
<el-checkbox
v-model="outside.checkAll"
:indeterminate="outside.isIndeterminate"
@change="handleCheckAllChangeOutside"
>鍏ㄩ��</el-checkbox
>
+
<el-checkbox-group
v-model="outside.checkedShops"
@change="handleCheckedCitiesChangOutside"
>
+
<el-checkbox
- v-for="shop in outside.shopnames"
+ v-for="shop in outside.displayedShopnames"
:key="shop"
:label="shop"
>{{ shop }}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
- <el-form-item>
- <div>宸查�夋嫨澶栭儴璁惧鏁伴噺涓猴細{{outside.checkedShops.length}}</div>
- </el-form-item>
- <!-- ------------------------------- -->
- <el-form-item label="鍐呴儴璁惧">
+<div class="input-search">
+ <el-input type="text" v-model="outside.searchText" placeholder="鎼滅储搴楅摵鍚嶇О" @input="handleSearch" />
+</div>
+
+
+ <div>
+ <el-button type="primary" v-if="!outside.allDataLoaded && !outside.isLoading && !outside.isall" @click="loadMore">鍔犺浇鏇村</el-button>
+ <el-button type="primary" loading v-if="!outside.allDataLoaded && outside.isLoading " @click="loadMore">鍔犺浇鏇村</el-button>
+ <div>宸查�夋嫨鍏朵粬璁惧鏁伴噺涓猴細{{outside.checkedShops.length}}</div>
+ </div>
+<br/>
+<hr/>
+<br/>
+
+ <el-form-item label="璇曠偣璁惧">
<el-checkbox
v-model="inner.checkAll"
:indeterminate="inner.isIndeterminate"
@@ -276,68 +354,69 @@
class="inner-checkbox-group"
>
- <el-checkbox v-for="shop in inner.shopnames" :key="shop" :label="shop"
+ <el-checkbox v-for="shop in inner.displayedShopnames" :key="shop" :label="shop"
>{{ shop }}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
- <el-form-item>
- <div>宸查�夋嫨鍐呴儴璁惧鏁伴噺涓猴細{{inner.checkedShops.length}}</div>
- </el-form-item>
- <el-form-item >
- <!-- <div class="right-form"> -->
+ <div class="input-search">
+ <el-input type="text" v-model="inner.searchText" placeholder="鎼滅储搴楅摵鍚嶇О" @input="handleSearchInner" />
+
+</div>
+
+ <div>
+ <el-button type="primary" v-if="!inner.allDataLoaded && !inner.isLoading && !inner.isall" @click="loadMoreInner">鍔犺浇鏇村</el-button>
+<el-button type="primary" loading v-if="!inner.allDataLoaded && inner.isLoading " @click="loadMoreInner">鍔犺浇鏇村</el-button>
+ <div>宸查�夋嫨璇曠偣璁惧鏁伴噺涓猴細{{inner.checkedShops.length}}</div>
+ </div>
+ <!-- <el-form-item > -->
+
<div class="time-interval">
瀹炴椂鏇存柊闂撮殧涓猴細{{timeInterval/1000}}绉�
</div>
- <!-- </div> -->
- </el-form-item>
+
+ <!-- </el-form-item> -->
</el-form>
</el-card>
</el-collapse-item>
</el-collapse>
</div>
+
- <div>
+<div>
<el-tooltip
class="box-item"
effect="dark"
content="鐐瑰嚮灞曠ず瀹炴椂鏁版嵁"
placement="top-start"
>
- <el-button type="success" @click="show"> 灞曠ず </el-button>
+ <el-button type="success" @click="show" style="margin-left: 10px;"> 灞曠ず </el-button>
</el-tooltip>
</div>
-<!--
- {{ outside.checkedShops }}
- <br />
- {{ inner.checkedShops }} -->
- <!-- 浠〃鐩� -->
+
+
+ <!-- 浠〃鐩� -->
<!-- <div class="charts-container" v-for="(device,index) in outside.realTimeData" :key="device.mvStatCode">
<div ref="chartsOutside" class="echarts" :id="`chartAP-${index}`"></div>
</div> -->
- <el-button-group>
- <el-button @click="changeCardSize('small')">缂╁皬</el-button>
- <el-button @click="changeCardSize('medium')">涓瓑</el-button>
- <el-button @click="changeCardSize('large')">鏀惧ぇ</el-button>
- </el-button-group>
-
+<div class="dashBorder-area">
<h3 v-show="outside.realTimeData.length" class="outside-leble">澶栭儴璁惧锛�</h3>
<div v-if="outside.realTimeData">
<el-row :gutter="20">
- <el-col :span="getColSpan" v-for="device in outside.realTimeData" :key="device.mvStatCode">
- <el-card :style="cardStyle">
+ <el-col :span="6" v-for="device in outside.realTimeData" :key="device.mvStatCode">
+ <el-card>
<template #header>
<div class="card-header">{{ device.diName }}</div>
</template>
- <DashBoard :styleDashB="cardSize" :data="device.mvFumeConcentration2"></DashBoard>
+ <DashBoard :data="device.mvFumeConcentration2"></DashBoard>
<div>璁惧缂栧彿锛歿{ device.mvStatCode }}</div>
<hr class="divider-margin"/>
<divr class="data">椋庢満鐢垫祦(A)锛歿{ device.mvFanElectricity}} </divr>
<hr class="divider-margin">
<div class="data">鍑�鍖栧櫒鐢垫祦(A)锛歿{ device.mvPurifierElectricity}}</div>
<hr class="divider-margin"/>
- <div>浜х敓鏃堕棿:{{ device.mvDataTime }}</div>
+ <div>鏁版嵁鍙戝竷鏃堕棿锛歿{ device.mvDataTime }}</div>
<div class="status" :class="{'exceed': device.mvFumeConcentration2 >= 1}"> {{ device.mvFumeConcentration2 >= 1 ? '瓒呮爣' : '' }}</div>
<!-- <div class="status1" :class="{'exceed1': device.mvFumeConcentration2 < 1}"> {{ device.mvFumeConcentration2 < 1 ? '鏈秴鏍�' : '' }}</div> -->
</el-card>
@@ -345,9 +424,8 @@
</el-row>
</div>
-
<hr v-show="outside.realTimeData.length && inner.inFumeValue.length" class="line-marign"/>
-<h3 v-show="inner.inFumeValue.length">鍐呴儴璁惧锛�</h3>
+<h3 v-show="inner.inFumeValue.length" class="inner-leble">鍐呴儴璁惧锛�</h3>
<div v-if="inner.inFumeValue">
<el-row :gutter="20">
<el-col :span="6" v-for="device in inner.inFumeValue" :key="device.mnCode">
@@ -358,17 +436,23 @@
<DashBoard :data="device.value"></DashBoard>
<div>璁惧缂栧彿锛歿{ device.mnCode }}</div>
<hr class="divider-margin"/>
- <div>浜х敓鏃堕棿:{{ device.time }}</div>
+ <div>鏁版嵁鍙戝竷鏃堕棿锛歿{ device.time }}</div>
<div class="status" :class="{'exceed': device.value > 1}"> {{ device.value >= 1 ? '瓒呮爣' : '' }}</div>
<!-- <div class="status1" :class="{'exceed1': device.value < 1}"> {{ device.value < 1 ? '鏈秴鏍�' : '' }}</div> -->
</el-card>
</el-col>
</el-row>
</div>
-
+</div>
</template>
<style lang="scss" scoped>
+// 鏇存柊鏃堕棿
+.time-interval {
+ display: flex;
+ justify-content: right;
+ font-size: 16px;
+}
.form-card {
margin: 20px 10px;
// width: 96%;
@@ -390,12 +474,18 @@
.outside-leble {
margin-top: 10px;
}
+.inner-leble {
+ margin-top: 10px;
+}
// 鍒嗗壊绾�
.line-marign {
margin: 20px 0;
}
.el-dialog {
width: 700px;
+}
+.dashBorder-area {
+ margin-left: 10px;
}
.dashboard {
margin-bottom: 20px;
@@ -446,4 +536,13 @@
.divider-margin {
margin: 3px 0px ;
}
+.el-input {
+ width: calc(100% / 6);
+ // margin-left: 70px;
+
+}
+// .input-search {
+// display: flex;
+// justify-content: left;
+// }
</style>
--
Gitblit v1.9.3