From 010ce04ba6e27f2bd603cec692d2695d7a8a3c1f Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期三, 07 五月 2025 08:38:18 +0800
Subject: [PATCH] fix:修改水温深度监测
---
src/views/screen/temperature/home/index.vue | 140 ++++++++++++++++++++++++++++++++++------------
1 files changed, 102 insertions(+), 38 deletions(-)
diff --git a/src/views/screen/temperature/home/index.vue b/src/views/screen/temperature/home/index.vue
index dc0a0cb..8bfe5d4 100644
--- a/src/views/screen/temperature/home/index.vue
+++ b/src/views/screen/temperature/home/index.vue
@@ -2,27 +2,43 @@
<div class="home">
<div class="home-bg"></div>
<div class="home-c">
- <div class="point" v-for="(item, index) in pointList" :key="index" :style="{left: item.left, top: item.top}">
+ <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.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 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?.dataList?.find(f => f.code === selectDeep[index]).value }}</span>°C</div>
+ </div>
+ <div class="item">
+ <div class="item-t">水位:</div>
+ <div class="item-num">
+ <el-select
+ v-model="selectDeep[index]"
+ class="val-select"
+ placeholder="Select"
+ style="width: 10rem"
+ >
+ <el-option
+ v-for="item in item?.dataList"
+ :key="item.code"
+ :label='item.code'
+ :value="item.code"
+ />
+ </el-select>
+ 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>
@@ -31,23 +47,48 @@
<script setup>
+import pointApi from '@/api/facility/point.js'
+import {ref, onMounted} from "vue";
-const pointList = reactive([
- { name: '电站尾水出口水温监测点', temputer: 22, shuiwei: 1000, device: 1, left: '15%', top: '53%', showMsg: false },
- { name: '电站尾水出口水温监测点', temputer: 22, shuiwei: 1000, device: 2, left: '12%', top: '68%', showMsg: false },
-])
+const monitorList = ref([])
+const selectDeep = ref([])
-const handleShow = (index) => {
- pointList[index].showMsg = !pointList[index].showMsg;
+// 标点配置
+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) => {
+ selectDeep.value[index] = item?.dataList[0].code
+ return {
+ ...item,
+ ...config[index]
+ }
+ })
+ })
}
+const handleShow = (index) => {
+ monitorList.value[index].showMsg = !monitorList.value[index].showMsg;
+}
+
+onMounted(() => {
+ getMonitorList()
+})
</script>
<style scoped lang="scss">
-.home{
+.home {
height: 100%;
- .home-bg{
+
+ .home-bg {
position: absolute;
left: 0;
top: 0;
@@ -57,20 +98,24 @@
background-size: 100% 100%;
z-index: 11;
}
- .home-c{
+
+ .home-c {
width: 100%;
height: 100%;
position: relative;
z-index: 20;
- .point{
+
+ .point {
position: absolute;
- .point-address{
+
+ .point-address {
width: 35px;
height: 40px;
background: url("@/assets/images/point.png") no-repeat;
background-size: 100% 100%;
}
- .point-message{
+
+ .point-message {
width: 500px;
height: 180px;
background: url("@/assets/images/messageInfo-right.png") no-repeat;
@@ -80,30 +125,49 @@
top: -60px;
padding: 30px 50px;
color: #fff;
- .msg-box{
+
+ .msg-box {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
- .msg-t{
+
+ .msg-t {
font-size: 26px;
font-weight: bold;
}
- .num{
+
+ .num {
display: flex;
align-items: center;
- gap: 50px;
- .item{
+ gap: 30px;
+
+ .item {
display: flex;
align-items: center;
- span{
+
+ span {
display: inline-block;
- padding: 0 30px;
+ padding: 0 20px;
font-size: 22px;
font-weight: bold;
}
+ .val-select{
+ padding: 0 20px;
+ :deep(.el-select__wrapper){
+ background-color: transparent;
+ box-shadow: 0 0 0 1px #fff inset;
+ font-size: 20px;
+ .el-select__caret{
+ color: #fff;
+ }
+ .el-select__placeholder{
+ color: #fff;
+ }
+ }
+ }
}
}
}
--
Gitblit v1.9.3