<template>
|
<div class="home">
|
<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" @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>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
|
<script setup>
|
import {ref, onMounted} from "vue";
|
import {getHomePonit} from '@/api/screen/home/index.js'
|
|
// 标点配置
|
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>
|
|
|
<style scoped lang="scss">
|
.home{
|
height: 100%;
|
.home-bg{
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 100%;
|
height: 100%;
|
background: url("@/assets/images/flow-bg.png") no-repeat;
|
background-size: 100% 100%;
|
z-index: 11;
|
}
|
.home-c{
|
width: 100%;
|
height: 100%;
|
position: relative;
|
z-index: 20;
|
.point{
|
position: absolute;
|
.point-address{
|
width: 35px;
|
height: 40px;
|
background: url("@/assets/images/point.png") no-repeat;
|
background-size: 100% 100%;
|
}
|
.point-message{
|
width: 600px;
|
height: 200px;
|
background: url("@/assets/images/messageInfo-right.png") no-repeat;
|
background-size: 100% 100%;
|
position: absolute;
|
left: 30px;
|
top: -70px;
|
padding: 30px 30px 30px 60px;
|
color: #fff;
|
.msg-box{
|
width: 100%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
gap: 20px;
|
}
|
.video-box{
|
flex-shrink: 0;
|
width: 200px;
|
height: 138px;
|
line-height: 138px;
|
text-align: center;
|
font-size: 38px;
|
}
|
.info-box{
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
.info-t{
|
font-size: 20px;
|
}
|
.info-ljll{
|
display: flex;
|
align-items: center;
|
:deep(.el-select){
|
width: 100px !important;
|
.el-select__wrapper{
|
color: #fff;
|
background: transparent;
|
.el-select__selected-item{
|
color: #fff;
|
}
|
.el-select__suffix .el-icon{
|
color: #fff;
|
}
|
&:hover{
|
box-shadow: none;
|
}
|
}
|
}
|
}
|
span{
|
display: inline-block;
|
padding: 0 10px;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
