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/flow/home/index.vue | 129 ++++++++++++++++++++++++++----------------
1 files changed, 80 insertions(+), 49 deletions(-)
diff --git a/src/views/screen/flow/home/index.vue b/src/views/screen/flow/home/index.vue
index 5d8d975..dfbc0b7 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" :style="{backgroundImage: `url(${item.imageRul})`}">
+ <el-icon><VideoPlay /></el-icon>
+ </div>
+ <div class="info-box">
+ <div class="info-t">{{ item.pointName }}</div>
+ <div class="info-sw">水位：<span>{{ item.waterLevel }}</span>m</div>
+ <div class="info-ls">流速：<span>{{item.newFlow}}</span>m/s</div>
+ <div class="info-ssls">瞬时流速：<span>{{ item.flowVelocity }}</span>m/s</div>
+ <div class="info-ljll">
+ 累计流量：
+ <el-select
+ v-model="selectll[index]"
+ class="m-2"
+ placeholder="Select"
+ size="small"
+ style="width: 240px"
+ >
+ <el-option
+ v-for="(item, idx) in liuliangOptions"
+ :key="idx"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ <span>{{ item[selectll[index]] }}</span>m/s
+ </div>
</div>
</div>
</div>
@@ -40,18 +42,46 @@
<script setup>
+import {ref, onMounted} from "vue";
+import {getHomePonit} from '@/api/screen/home/index.js'
-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 config = [
+ { left: '18%', top: '67%', showMsg: false },
+ { left: '60%', top: '12.5%', showMsg: false },
]
+const liuliangOptions = [
+ { label: '总计流量', value: 'totalFlow' },
+ { label: '日累计流量', value: 'dayFlow' },
+ { label: '周累计流量', value: 'weekFlow' },
+ { label: '月累计流量', value: 'monthFlow' },
+ { label: '年累计流量', value: 'yearFlow' },
+]
+
+const selectll = ref(['totalFlow', 'totalFlow'])
+const pointList = ref([])
+
+
+const getPoint = () => {
+ getHomePonit().then(res => {
+ let data = res.data
+ if(data.length > 2) data = data.splice(0, 1)
+ pointList.value = data.map((item, index) => {
+ return {
+ ...item,
+ ...config[index]
+ }
+ })
+ })
+}
+
+const handleShow = (index) => {
+ pointList.value[index].showMsg = !pointList.value[index].showMsg;
+}
+
+onMounted(() => {
+ getPoint()
+})
</script>
@@ -65,7 +95,7 @@
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: 11;
}
@@ -76,8 +106,6 @@
z-index: 20;
.point{
position: absolute;
- left: 58%;
- top: 30%;
.point-address{
width: 35px;
height: 40px;
@@ -87,16 +115,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;
@@ -104,7 +136,6 @@
line-height: 138px;
text-align: center;
font-size: 38px;
- background: #cccb40;
}
.info-box{
height: 100%;
--
Gitblit v1.9.3