From c29c0efe096aed6d8349f227f909508f8a49c16a Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期一, 31 三月 2025 16:52:07 +0800
Subject: [PATCH] fix:修改首页标点
---
src/views/screen/flow/home/index.vue | 86 ++++++++++++++++++++++++-------------------
1 files changed, 48 insertions(+), 38 deletions(-)
diff --git a/src/views/screen/flow/home/index.vue b/src/views/screen/flow/home/index.vue
index cf61680..546c237 100644
--- a/src/views/screen/flow/home/index.vue
+++ b/src/views/screen/flow/home/index.vue
@@ -3,33 +3,35 @@
<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-address"></div>
- <div class="point-message">
- <div class="video-box">
- <el-icon><VideoPlay /></el-icon>
- </div>
- <div class="info-box">
- <div class="info-t">{{ item.name }}</div>
- <div class="info-sw">水位：<span>{{ item.shuiwei }}</span>m</div>
- <div class="info-ls">流速：<span>{{item.liushu}}</span>m/s</div>
- <div class="info-ssls">瞬时流速：<span>{{ item.ssls }}</span>m/s</div>
- <div class="info-ljll">
- 累计流量：
- <el-select
- v-model="selectll"
- class="m-2"
- placeholder="Select"
- size="small"
- style="width: 240px"
- >
- <el-option
- v-for="(item, idx) in item.liuliangOptions"
- :key="idx"
- :label="item.label"
- :value="idx"
- />
- </el-select>
- <span>{{ item.liuliangOptions[selectll].value }}</span>m/s
+ <div class="point-address" @click="handleShow(index)"></div>
+ <div class="point-message" v-show="item.showMsg">
+ <div class="msg-box">
+ <div class="video-box">
+ <el-icon><VideoPlay /></el-icon>
+ </div>
+ <div class="info-box">
+ <div class="info-t">{{ item.name }}</div>
+ <div class="info-sw">水位：<span>{{ item.shuiwei }}</span>m</div>
+ <div class="info-ls">流速：<span>{{item.liushu}}</span>m/s</div>
+ <div class="info-ssls">瞬时流速：<span>{{ item.ssls }}</span>m/s</div>
+ <div class="info-ljll">
+ 累计流量：
+ <el-select
+ v-model="selectll"
+ class="m-2"
+ placeholder="Select"
+ size="small"
+ style="width: 240px"
+ >
+ <el-option
+ v-for="(item, idx) in item.liuliangOptions"
+ :key="idx"
+ :label="item.label"
+ :value="idx"
+ />
+ </el-select>
+ <span>{{ item.liuliangOptions[selectll].value }}</span>m/s
+ </div>
</div>
</div>
</div>
@@ -44,8 +46,8 @@
const selectll = ref(0)
-const pointList = [
- { name: '电站尾水出口水温监测点', liushu: 22, ssls: '38', shuiwei: 1000, device: 1, left: '46%', top: '70%',
+const pointList = reactive([
+ { name: '新扎沟口流量监测点', liushu: 22, ssls: '38', shuiwei: 1000, device: 1, left: '18%', top: '67%', showMsg: false,
liuliangOptions: [
{ label: '总计流量', value: 500 },
{ label: '日累计流量', value: 1000 },
@@ -54,7 +56,7 @@
{ label: '年累计流量', value: 3600000 },
]
},
- { name: '电站尾水出口水温监测点', liushu: 22, ssls: '38', shuiwei: 1000, device: 2, left: '55%', top: '10%',
+ { name: '电站尾水出口水温监测点', liushu: 22, ssls: '38', shuiwei: 1000, device: 2, left: '60%', top: '12.5%', showMsg: false,
liuliangOptions: [
{ label: '总计流量', value: 500 },
{ label: '日累计流量', value: 1000 },
@@ -63,7 +65,11 @@
{ label: '年累计流量', value: 3600000 },
]
},
-]
+])
+
+const handleShow = (index) => {
+ pointList[index].showMsg = !pointList[index].showMsg;
+}
</script>
@@ -97,16 +103,20 @@
.point-message{
width: 600px;
height: 200px;
- background: url("@/assets/images/messageInfo-left.png") no-repeat;
+ background: url("@/assets/images/messageInfo-right.png") no-repeat;
background-size: 100% 100%;
position: absolute;
- left: -600px;
- top: -100px;
- padding: 30px 50px 30px 30px;
+ left: 30px;
+ top: -70px;
+ padding: 30px 30px 30px 60px;
color: #fff;
- display: flex;
- align-items: center;
- gap: 20px;
+ .msg-box{
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ }
.video-box{
flex-shrink: 0;
width: 200px;
--
Gitblit v1.9.3