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/assets/images/warning.png | 0
src/views/screen/temperature/home/index.vue | 4 +-
/dev/null | 0
src/assets/images/tempture-bg.png | 0
src/views/screen/flow/home/index.vue | 86 ++++++++++++++++++++++++-------------------
src/views/screen/temperature/monitor/index.vue | 18 +++++++++
src/views/screen/flow/graphic/index.vue | 5 ++
src/assets/images/flow-bg.png | 0
8 files changed, 72 insertions(+), 41 deletions(-)
diff --git a/src/assets/images/flow-bg.png b/src/assets/images/flow-bg.png
index d86ca48..a595149 100644
--- a/src/assets/images/flow-bg.png
+++ b/src/assets/images/flow-bg.png
Binary files differ
diff --git a/src/assets/images/messageInfo-left.png b/src/assets/images/messageInfo-left.png
deleted file mode 100644
index b371547..0000000
--- a/src/assets/images/messageInfo-left.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/images/tempture-bg.png b/src/assets/images/tempture-bg.png
index c2a87ab..9f32fa0 100644
--- a/src/assets/images/tempture-bg.png
+++ b/src/assets/images/tempture-bg.png
Binary files differ
diff --git a/src/assets/images/warning.png b/src/assets/images/warning.png
new file mode 100644
index 0000000..9440365
--- /dev/null
+++ b/src/assets/images/warning.png
Binary files differ
diff --git a/src/views/screen/flow/graphic/index.vue b/src/views/screen/flow/graphic/index.vue
index d1d2653..14b3d7d 100644
--- a/src/views/screen/flow/graphic/index.vue
+++ b/src/views/screen/flow/graphic/index.vue
@@ -30,6 +30,9 @@
}
}
+const handleSearch = async () => {
+}
+
</script>
<template>
@@ -69,7 +72,7 @@
/>
</el-select>
<el-input v-model="searchVal" style="width: 20rem" placeholder="请输入监测点名称" />
- <el-button><el-icon><Search /></el-icon>搜索</el-button>
+ <el-button @click="handleSearch"><el-icon><Search /></el-icon>搜索</el-button>
<el-button style="margin-left: 0" v-if="userType === '1'"><el-icon><Plus /></el-icon>新增</el-button>
</div>
<div class="tool-r" @click="handleFullScreen">
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;
diff --git a/src/views/screen/temperature/home/index.vue b/src/views/screen/temperature/home/index.vue
index 664e1f7..dc0a0cb 100644
--- a/src/views/screen/temperature/home/index.vue
+++ b/src/views/screen/temperature/home/index.vue
@@ -33,8 +33,8 @@
<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 },
+ { 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 handleShow = (index) => {
diff --git a/src/views/screen/temperature/monitor/index.vue b/src/views/screen/temperature/monitor/index.vue
index d13c74a..931e196 100644
--- a/src/views/screen/temperature/monitor/index.vue
+++ b/src/views/screen/temperature/monitor/index.vue
@@ -141,6 +141,9 @@
</div>
</div>
<div class="item-btn"><el-button size="large" type="success">批量应用</el-button></div>
+ <div class="item-error">
+ <img src="@/assets/images/warning.png" />
+ </div>
</div>
<div class="item">
<div class="item-t">电站进水口水温监测点</div>
@@ -208,6 +211,9 @@
</div>
</div>
<div class="item-btn"><el-button size="large" type="success">批量应用</el-button></div>
+ <div class="item-error">
+ <img src="@/assets/images/warning.png" />
+ </div>
</div>
</div>
</div>
@@ -303,6 +309,18 @@
border: 1px solid #176CE5;
padding: 20px;
border-radius: 8px;
+ position: relative;
+ &-error{
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.3);
+ img{
+ width: 100%;
+ }
+ }
.item-t{
font-size: 36px;
color: #fff;
--
Gitblit v1.9.3