From 8f50c8203c8df64dd0a566b228bae7f69156e109 Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期二, 15 四月 2025 17:34:08 +0800
Subject: [PATCH] fix:添加季度选择器
---
src/views/screen/temperature/home/index.vue | 96 ++++++++++++++++++++++++++++++++----------------
1 files changed, 64 insertions(+), 32 deletions(-)
diff --git a/src/views/screen/temperature/home/index.vue b/src/views/screen/temperature/home/index.vue
index 7613418..9fa20bc 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 monitorList" :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.pointName }}</div>
+ <div class="num">
+ <div class="item">
+ <div class="item-t">水温:</div>
+ <div class="item-num"><span>{{item.waterTemperature}}</span>°C</div>
+ </div>
+ <div class="item">
+ <div class="item-t">水位:</div>
+ <div class="item-num"><span>{{ item.waterLevel }}</span>m</div>
+ </div>
+ </div>
+ <div class="shebei">
+ 监测设备：
+ <span v-if="item.isOnline === 1">设备运作正常</span>
+ <span v-else style="color: red">设备运作异常</span>
+ </div>
+ </div>
</div>
</div>
</div>
@@ -27,7 +31,38 @@
<script setup>
+import pointApi from '@/api/facility/point.js'
+import {ref, onMounted} from "vue";
+const monitorList = ref([])
+
+// 标点配置
+const config = [
+ { left: '15%', top: '53%', showMsg: false },
+ { left: '12%', top: '68%', showMsg: false },
+]
+
+// 获取监控点列表
+const getMonitorList = () => {
+ pointApi().search({type: 1, page: 1, limit: 3}).then(res => {
+ let data = res.data.list.filter(el => el.parentId !== 0)
+ if(data.length > 2) data = data.splice(0, 1)
+ monitorList.value = data.map((item, index) => {
+ return {
+ ...item,
+ ...config[index]
+ }
+ })
+ })
+}
+
+const handleShow = (index) => {
+ monitorList.value[index].showMsg = !monitorList.value[index].showMsg;
+}
+
+onMounted(() => {
+ getMonitorList()
+})
</script>
@@ -40,7 +75,7 @@
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: 11;
}
@@ -51,8 +86,6 @@
z-index: 20;
.point{
position: absolute;
- left: 58%;
- bottom: 10%;
.point-address{
width: 35px;
height: 40px;
@@ -61,17 +94,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;
@@ -89,11 +126,6 @@
font-size: 22px;
font-weight: bold;
}
- }
- }
- .shebei{
- span{
- color: #1ab394;
}
}
}
--
Gitblit v1.9.3