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/IndexView.vue | 92 +++++++++++++++++++++++++++++++++------------
1 files changed, 67 insertions(+), 25 deletions(-)
diff --git a/src/views/IndexView.vue b/src/views/IndexView.vue
index 3a608c3..74fa822 100644
--- a/src/views/IndexView.vue
+++ b/src/views/IndexView.vue
@@ -97,7 +97,6 @@
this.outside.allDataLoaded = true;
}
});
-
//浠庡唴閮ㄦ帴鍙ｈ幏鍙栧疄鏃舵暟鎹殑鎵�鏈夊簵閾哄悕绉�
axiosInstanceInstance
.get('https://fyami.com.cn/device/min/value/real_time', {
@@ -464,12 +463,17 @@
<!-- 鍐呴儴璁惧 -->
<el-card v-if="index < inner.inFumeValue.length" 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 >璁惧缂栧彿锛歿{ device.mnCode }}</div>
+ <!-- <hr class="divider-margin" /> -->
+ <div class="horizontal-line"></div>
+
<div class="status" :class="{ exceed: device.value > 1 }">
{{ device.value >= 1 ? '瓒呮爣' : '' }}
</div>
@@ -482,27 +486,27 @@
<template #header>
<div class="card-header">
{{ 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>
+ <!-- <hr class="divider-margin" /> -->
+
+ <div>璁惧缂栧彿锛歿{ device.mvStatCode }}</div>
+ <div class="horizontal-line"></div>
+ <!-- <hr class="divider-margin" /> -->
+ <div>璁惧渚涘簲鍟嗭細{{ device.diSupplier }}</div>
<div
class="status"
:class="{ exceed: device.mvFumeConcentration2 >= 1 }"
@@ -534,13 +538,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 +573,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 +593,20 @@
background-color: #f5f7fa;
}
+.report-time-text {
+ font-size: 12px;
+ color: #999999;
+}
+
+
+
+
/* 瓒呮爣 鏂囧瓧鏁堟灉*/
.status {
font-size: 18px;
color: #ff4d4f;
font-weight: bold;
+ margin-top: 5px;
}
.exceed {
@@ -606,7 +633,8 @@
}
// 鍒嗗壊绾夸笂涓嬭窛绂�
.divider-margin {
- margin-top: 3px;
+ margin: 10px 0px;
+ border: 1px solid gray;
}
.el-input {
@@ -625,4 +653,18 @@
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);
+}
</style>
--
Gitblit v1.9.3