From f3acb8ce787f3df0eda633031473be4e6a9ff448 Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期四, 12 十月 2023 16:56:28 +0800
Subject: [PATCH] 油烟 更新了实时监控页面
---
src/views/IndexView.vue | 168 ++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 110 insertions(+), 58 deletions(-)
diff --git a/src/views/IndexView.vue b/src/views/IndexView.vue
index 3a608c3..66aac82 100644
--- a/src/views/IndexView.vue
+++ b/src/views/IndexView.vue
@@ -12,6 +12,9 @@
},
data() {
return {
+ button:{
+ setButton:false
+ },
totalData: [],
// 淇濆瓨璁剧疆
save: false,
@@ -70,17 +73,9 @@
checkedShops: []
}
- // chartInstance: []
- // // 鍐呴儴璁惧
- // devices: []
};
},
- watch: {
- // 'outside.checkedShops'(){
- // this.saveOutsideData()
- // console.log('111');
- // }
- },
+
methods: {
//鑾峰彇鎵�鏈夊簵閾哄悕瀛�
getDeviceInfo() {
@@ -97,7 +92,6 @@
this.outside.allDataLoaded = true;
}
});
-
//浠庡唴閮ㄦ帴鍙ｈ幏鍙栧疄鏃舵暟鎹殑鎵�鏈夊簵閾哄悕绉�
axiosInstanceInstance
.get('https://fyami.com.cn/device/min/value/real_time', {
@@ -246,10 +240,7 @@
.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);
- // 娓叉煋鎶樼嚎鍥�
- // this.updateCharts();
+
});
}
@@ -264,7 +255,6 @@
this.inner.inFumeValue.push(item);
}
});
- console.log(this.inner.inFumeValue);
}
// 鍚堝苟
@@ -274,14 +264,14 @@
...this.inner.inFumeValue,
...this.outside.realTimeData
];
- console.log('鎬婚�夋暟鎹�', this.totalData);
- console.log('闀垮害涓猴細', this.totalData.length);
+
}, 200);
- console.log('璋冪敤浜�');
},
// 鐐瑰嚮鎸夐挳瑙﹀彂
show() {
+ //
+ this.button.setButton = true
// 褰撳彇娑堥�夋嫨鏃讹紝闃叉鍥惧舰杩樹繚鐣欏湪椤甸潰銆�
if (this.outside.checkedShops.length == 0) {
this.outside.realTimeData = [];
@@ -291,6 +281,8 @@
}
// 鏍规嵁鎵�閫夌殑搴楅摵璇锋眰鏁版嵁
this.request();
+ this.button.setButton = false
+ // 瀹氭椂鏇存柊
setInterval(() => {
this.request();
}, this.timeInterval);
@@ -429,19 +421,14 @@
<!-- </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" style="margin-left: 10px">
+ <el-button type="success" :loading="button.setButton" @click="show" style="margin-left: 10px">
璁剧疆
</el-button>
</el-tooltip>
@@ -454,6 +441,13 @@
</el-switch>
</div>
+ </el-card>
+ </el-collapse-item>
+ </el-collapse>
+ </div>
+
+
+
<div>
<el-row :gutter="20">
<el-col
@@ -462,47 +456,62 @@
:key="device.mvStatCode"
>
<!-- 鍐呴儴璁惧 -->
- <el-card v-if="index < inner.inFumeValue.length" height="1900px">
+ <el-card v-if="index < inner.inFumeValue.length" class="card-font-color" height="1900px">
<template #header>
- <div class="card-header">{{ device.siteName }}</div>
+ <div class="card-header">{{ device.siteName }}
+ <img src="@/assets/inner_device.jpg" class="icon-inner"/>
+ </div>
</template>
+ <div class="report-time-text">鏁版嵁鍙戝竷鏃堕棿锛歿{ device.time }}</div>
<DashBoard :data="device.value"></DashBoard>
- <div>璁惧缂栧彿锛歿{ device.mnCode }}</div>
- <hr class="divider-margin" />
- <div>鏁版嵁鍙戝竷鏃堕棿锛歿{ device.time }}</div>
+
+ <div class="imag-container">
+ <img src="@/assets/wind.jpg" class="image"/>
+ <span class="chart-below-text"> 椋庢満鐢垫祦(A)锛�0 </span>
+
+ <span class="chart-below-text2">
+ <img src="@/assets/purifier.jpg" class="image"/>
+ 鍑�鍖栧櫒鐢垫祦(A)锛�0
+ </span>
+ </div>
+ <div class="horizontal-line"></div>
+ <div >璁惧缂栧彿锛歿{ device.mnCode }}</div>
+ <div class="horizontal-line"></div>
+
<div class="status" :class="{ exceed: device.value > 1 }">
{{ device.value >= 1 ? '瓒呮爣' : '' }}
</div>
<br />
- <br />
- <br />
+
</el-card>
+
+
<!-- 澶栭儴璁惧 -->
- <el-card v-else>
+ <el-card v-else class="card-font-color">
<template #header>
- <div class="card-header">
+ <div class="card-header out-device">
{{ device.diName }}
- <el-tooltip
- class="box-item"
- effect="dark"
- content="鍏朵粬璁惧"
- placement="top-start"
- >
- <i-ep-Shop></i-ep-Shop>
- </el-tooltip>
- <span> </span>
</div>
</template>
+ <div class="report-time-text">鏁版嵁鍙戝竷鏃堕棿锛歿{ device.mvDataTime }}</div>
<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">
+
+ <div class="imag-container">
+ <img src="@/assets/wind.jpg" class="image"/>
+ <span class="chart-below-text"> 椋庢満鐢垫祦(A)锛歿{ device.mvFanElectricity }} </span>
+
+ <span class="chart-below-text2">
+ <img src="@/assets/purifier.jpg" class="image"/>
鍑�鍖栧櫒鐢垫祦(A)锛歿{ device.mvPurifierElectricity }}
- </div>
- <hr class="divider-margin" />
- <div>鏁版嵁鍙戝竷鏃堕棿锛歿{ device.mvDataTime }}</div>
+ </span>
+ </div>
+ <div class="horizontal-line"></div>
+
+ <div>璁惧缂栧彿锛歿{ device.mvStatCode }}</div>
+
+ <div class="horizontal-line"></div>
+
+ <div>璁惧渚涘簲鍟嗭細{{ device.diSupplier }}</div>
<div
class="status"
:class="{ exceed: device.mvFumeConcentration2 >= 1 }"
@@ -534,13 +543,15 @@
}
.el-card {
margin-bottom: 10px;
- border-radius: 9px;
+ border-radius: 15px;
+ margin-left: 5px;
}
.card-header {
// display: flex;
// align-items: center;
// position: center;
text-align: center;
+ position: relative;
}
.card-header-item {
display: flex;
@@ -567,7 +578,19 @@
margin-bottom: 20px;
border: #1de01d;
}
-
+.chart-below-text2{
+ float: right;
+}
+.image {
+ height: 18px;
+}
+.icon-inner {
+ position: relative;
+ top: -20px;
+ right: -115px;
+ width: 50px;
+ height: 50px;
+}
.dashboard-title {
font-size: 20px;
text-align: center;
@@ -575,11 +598,25 @@
background-color: #f5f7fa;
}
+.report-time-text {
+ font-size: 12px;
+ color: #999999;
+}
+
+.card-font-color {
+ color: #000000;
+}
+
+
+
+
+
/* 瓒呮爣 鏂囧瓧鏁堟灉*/
.status {
font-size: 18px;
color: #ff4d4f;
font-weight: bold;
+ margin-top: 5px;
}
.exceed {
@@ -606,17 +643,15 @@
}
// 鍒嗗壊绾夸笂涓嬭窛绂�
.divider-margin {
- margin-top: 3px;
+ margin: 10px 0px;
+ border: 1px solid gray;
}
.el-input {
width: calc(100% / 6);
// margin-left: 70px;
}
-// .input-search {
-// display: flex;
-// justify-content: left;
-// }
+
.save-switch {
margin-top: 20px;
margin-left: 20px;
@@ -625,4 +660,21 @@
padding: 0px;
margin: 0px;
}
+.horizontal-line {
+ position: relative;
+ height: 1px;
+ margin: 10px 0px;
+}
+.horizontal-line::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 1px;
+ background-color: rgb(221, 217, 217);
+}
+.out-device {
+ margin-top:34px;
+}
</style>
--
Gitblit v1.9.3