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 | 77 ++++++++++++++++++++++----------------
1 files changed, 44 insertions(+), 33 deletions(-)
diff --git a/src/views/screen/flow/home/index.vue b/src/views/screen/flow/home/index.vue
index 546c237..dfbc0b7 100644
--- a/src/views/screen/flow/home/index.vue
+++ b/src/views/screen/flow/home/index.vue
@@ -6,31 +6,31 @@
<div class="point-address" @click="handleShow(index)"></div>
<div class="point-message" v-show="item.showMsg">
<div class="msg-box">
- <div class="video-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.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-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"
+ v-model="selectll[index]"
class="m-2"
placeholder="Select"
size="small"
style="width: 240px"
>
<el-option
- v-for="(item, idx) in item.liuliangOptions"
+ v-for="(item, idx) in liuliangOptions"
:key="idx"
:label="item.label"
- :value="idx"
+ :value="item.value"
/>
</el-select>
- <span>{{ item.liuliangOptions[selectll].value }}</span>m/s
+ <span>{{ item[selectll[index]] }}</span>m/s
</div>
</div>
</div>
@@ -42,34 +42,46 @@
<script setup>
-import {ref} from "vue";
+import {ref, onMounted} from "vue";
+import {getHomePonit} from '@/api/screen/home/index.js'
-const selectll = ref(0)
+// 标点配置
+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 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 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[index].showMsg = !pointList[index].showMsg;
+ pointList.value[index].showMsg = !pointList.value[index].showMsg;
}
+
+onMounted(() => {
+ getPoint()
+})
</script>
@@ -124,7 +136,6 @@
line-height: 138px;
text-align: center;
font-size: 38px;
- background: #cccb40;
}
.info-box{
height: 100%;
--
Gitblit v1.9.3