From e9acb0939e7a471a3c4e7d5af3e98d14e2030bbb Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期三, 02 四月 2025 08:33:51 +0800
Subject: [PATCH] fix:修改报警弹窗
---
src/views/screen/flow/home/index.vue | 115 ++++++++++++++++++++++++++++++++++-----------------------
1 files changed, 68 insertions(+), 47 deletions(-)
diff --git a/src/views/screen/flow/home/index.vue b/src/views/screen/flow/home/index.vue
index cc83e75..546c237 100644
--- a/src/views/screen/flow/home/index.vue
+++ b/src/views/screen/flow/home/index.vue
@@ -2,34 +2,36 @@
<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="video-box">
- <el-icon><VideoPlay /></el-icon>
- </div>
- <div class="info-box">
- <div class="info-t">水电站流量监测点</div>
- <div class="info-sw">水位：<span>500</span>m</div>
- <div class="info-ls">流速：<span>15</span>m/s</div>
- <div class="info-ssls">瞬时流速：<span>150</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 liuliangOptions"
- :key="idx"
- :label="item.label"
- :value="idx"
- />
- </el-select>
- <span>{{ liuliangOptions[selectll].value }}</span>m/s
+ <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="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>
@@ -40,18 +42,34 @@
<script setup>
-
import {ref} from "vue";
const selectll = ref(0)
-const liuliangOptions = [
- { label: '总计流量', value: 500 },
- { label: '日累计流量', value: 1000 },
- { label: '周累计流量', value: 10000 },
- { label: '月累计流量', value: 300000 },
- { label: '年累计流量', value: 3600000 },
-]
+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 },
+ { label: '周累计流量', value: 10000 },
+ { label: '月累计流量', value: 300000 },
+ { label: '年累计流量', value: 3600000 },
+ ]
+ },
+ { name: '电站尾水出口水温监测点', liushu: 22, ssls: '38', shuiwei: 1000, device: 2, left: '60%', top: '12.5%', showMsg: false,
+ liuliangOptions: [
+ { label: '总计流量', value: 500 },
+ { label: '日累计流量', value: 1000 },
+ { label: '周累计流量', value: 10000 },
+ { label: '月累计流量', value: 300000 },
+ { label: '年累计流量', value: 3600000 },
+ ]
+ },
+])
+
+const handleShow = (index) => {
+ pointList[index].showMsg = !pointList[index].showMsg;
+}
</script>
@@ -65,18 +83,17 @@
top: 0;
width: 100%;
height: 100%;
- background: url("@/assets/images/map-bg.png") no-repeat;
+ background: url("@/assets/images/flow-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%;
- top: 30%;
.point-address{
width: 35px;
height: 40px;
@@ -86,16 +103,20 @@
.point-message{
width: 600px;
height: 200px;
- background: url("@/assets/images/messageInfo-box.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