From c1e2ec17485606ba8d2d6de9520396e55248ff6d Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期二, 25 三月 2025 17:10:50 +0800
Subject: [PATCH] feat:添加界面，接入设备数据
---
src/views/screen/temperature/home/index.vue | 77 ++++++++++++++++++++++----------------
1 files changed, 44 insertions(+), 33 deletions(-)
diff --git a/src/views/screen/temperature/home/index.vue b/src/views/screen/temperature/home/index.vue
index 8ba481c..664e1f7 100644
--- a/src/views/screen/temperature/home/index.vue
+++ b/src/views/screen/temperature/home/index.vue
@@ -2,23 +2,27 @@
<div class="home">
<div class="home-bg"></div>
<div class="home-c">
- <div class="point">
- <div class="point-address"></div>
- <div class="point-message">
- <div class="msg-t">电站尾水出口水温监测点</div>
- <div class="num">
- <div class="item">
- <div class="item-t">水温:</div>
- <div class="item-num"><span>10</span>°C</div>
- </div>
- <div class="item">
- <div class="item-t">水位:</div>
- <div class="item-num"><span>1000</span>m</div>
- </div>
- </div>
- <div class="shebei">
- 监测设备： <span>监测设备运行正常(点击跳转)</span>
- </div>
+ <div class="point" v-for="(item, index) in pointList" :key="index" :style="{left: item.left, top: item.top}">
+ <div class="point-address" @click="handleShow(index)"></div>
+ <div class="point-message" v-show="item.showMsg">
+ <div class="msg-box">
+ <div class="msg-t">{{ item.name }}</div>
+ <div class="num">
+ <div class="item">
+ <div class="item-t">水温:</div>
+ <div class="item-num"><span>{{item.temputer}}</span>°C</div>
+ </div>
+ <div class="item">
+ <div class="item-t">水位:</div>
+ <div class="item-num"><span>{{ item.shuiwei }}</span>m</div>
+ </div>
+ </div>
+ <div class="shebei">
+ 监测设备：
+ <span v-if="item.device === 1" style="color: #1ab394">监测设备运行正常(点击跳转)</span>
+ <span v-else style="color: #ff0a0a">设备异常</span>
+ </div>
+ </div>
</div>
</div>
</div>
@@ -27,6 +31,15 @@
<script setup>
+
+const pointList = reactive([
+ { name: '电站尾水出口水温监测点', temputer: 22, shuiwei: 1000, device: 1, left: '17%', top: '50%', showMsg: false },
+ { name: '电站尾水出口水温监测点', temputer: 22, shuiwei: 1000, device: 2, left: '25%', top: '40%', showMsg: false },
+])
+
+const handleShow = (index) => {
+ pointList[index].showMsg = !pointList[index].showMsg;
+}
</script>
@@ -40,18 +53,17 @@
top: 0;
width: 100%;
height: 100%;
- background: url("@/assets/images/map-bg.png") no-repeat;
+ background: url("@/assets/images/tempture-bg.png") no-repeat;
background-size: 100% 100%;
- z-index: -1;
+ z-index: 11;
}
.home-c{
width: 100%;
height: 100%;
position: relative;
+ z-index: 20;
.point{
position: absolute;
- left: 58%;
- bottom: 10%;
.point-address{
width: 35px;
height: 40px;
@@ -60,17 +72,21 @@
}
.point-message{
width: 500px;
- height: 200px;
- background: url("@/assets/images/messageInfo-box.png") no-repeat;
+ height: 180px;
+ background: url("@/assets/images/messageInfo-right.png") no-repeat;
background-size: 100% 100%;
position: absolute;
- left: -500px;
- top: -100px;
+ left: 30px;
+ top: -60px;
padding: 30px 50px;
color: #fff;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
+ .msg-box{
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ }
.msg-t{
font-size: 26px;
font-weight: bold;
@@ -88,11 +104,6 @@
font-size: 22px;
font-weight: bold;
}
- }
- }
- .shebei{
- span{
- color: #1ab394;
}
}
}
--
Gitblit v1.9.3