<!--智慧排水左侧面板 -->
<template>
<!-- 普查现状 -->
<div class="CensusStatus">
<div class="ListBoxHeader">
<div class="ListBoxHeader_font">普查现状</div>
</div>
<div class="partTop">
<div class="partTP flex flex-justcontent-spacebetween">
<div
class="part"
v-for="(item, index) in tableData"
:key="index"
@click="partClick(item)"
:class="partName == item.name ? 'activedright' : ''"
>
<div class="parttop">
<img :src="item.Imgurl" class="upImg" />
</div>
<div class="upper">
<div class="upperNum">
<div
class="oflower"
:style="{ color: item.name == '易涝点' ? '#a2fff8FF' : item.name == '风险点' ? '#faecabFF' : '#92edbfFF' }"
>
{{ item.num }}
</div>
<div class="oflowerDw">{{ item.dw }}</div>
</div>
<div class="upperMc">{{ item.name }}</div>
</div>
</div>
</div>
<div class="partList">
<div class="head">
<span style="width: 10%; text-align: center">序号</span>
<span style="width: 45%; padding-left: 30px">{{ partName }}</span>
<span style="width: 45%; padding-left: 140px">位置</span>
</div>
<Vue3SeamlessScroll :list="dataList" :singleHeight="36" :singleWaitTime="1500" :hover="true" class="scrollCont">
<div class="scrollCont">
<li
v-for="(item, index) in dataList"
:key="index"
:class="Pointname == item.yls ? 'activedright' : ''"
@click="Pointclick(item, index)"
>
<span class="tableBodyList_span1">{{ item.num }}</span>
<div class="tableBodyList_span2" :title="item.yls">{{ item.yls }}</div>
<div class="tableBodyList_span3" :title="item.wz">{{ item.wz }}</div>
</li>
</div>
</Vue3SeamlessScroll>
</div>
</div>
</div>
<!-- 降雨预测 -->
<div class="RainfallForecast">
<div class="ListBoxHeader">
<div class="ListBoxHeader_font">降雨实况</div>
</div>
<div class="RainfallTop">
<div class="subRightBox">
<div
class="headcenter"
v-for="(item, index) in yearList"
:key="item"
:class="activedname == item.name ? 'activedright' : ''"
@click="yearclick(item, index)"
>
{{ item.name }}
</div>
</div>
<div class="rainImgBox">
<div class="rainend"></div>
<div class="rainLegend flex flex-align-center">
<div class="flex flex-align-center" v-for="(item, index) in ranLeng[timeActive]" :key="index">
<span :class="index == 0 ? 'sBorder' : ''" :style="`background:${item.color}`"></span>
<div class="number"><em v-show="index == ranLeng[timeActive].length - 1">></em>{{ item.value }}</div>
</div>
</div>
</div>
</div>
</div>
<!-- 群众反馈 -->
<div class="PublicFeedback">
<div class="ListBoxHeader">
<div class="ListBoxHeader_font">群众反馈</div>
</div>
<div class="BarChart"></div>
</div>
</template>
<script setup>
import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
import fxd from '@/assets/images/zhps/fxd.png'; //风险点
import qxgw from '@/assets/images/zhps/qxgw.png'; //缺陷管网
import yld from '@/assets/images/zhps/yld.png'; //易涝点
import bus from '@/bus';
const AllData = reactive({});
const tableData = ref([
{ name: '易涝点', num: '7', Imgurl: yld, dw: '处' },
{ name: '风险点', num: '9', Imgurl: fxd, dw: '处' },
{ name: '缺陷管网', num: '6.1', Imgurl: qxgw, dw: 'km' },
]);
const Pointname = ref('');
const dataList = ref([
{ num: '1', yls: '永安路', wz: '百米大道永安路' },
{ num: '2', yls: '永昌路北口', wz: '双拥大道永昌路' },
{ num: '3', yls: '桥儿沟隧道', wz: '双拥大道桥儿沟' },
{ num: '4', yls: '原水果市场', wz: '双拥大道东十里铺' },
{ num: '5', yls: '王家坪旧址门口', wz: '圣地路' },
{ num: '6', yls: '桥儿沟隧道1', wz: '双拥大道桥儿沟' },
{ num: '7', yls: '原水果市场1', wz: '双拥大道东十里铺' },
]);
// 普查现状点击事件
function Pointclick(val) {
Pointname.value = val.yls;
}
const yearList = ref([
{ name: '1小时', value: 1 },
{ name: '3小时', value: 2 },
{ name: '12小时', value: 3 },
{ name: '24小时', value: 4 },
]);
const activedname = ref('1小时');
// 时间点击事件
function yearclick(val) {
activedname.value = val.name;
}
const timeActive = ref(0);
const ranLeng = [
[
{ value: '0-10', color: 'rgba(7, 213, 118, 0)' },
{ value: '10-25', color: 'rgba(7, 213, 118, 1)' },
{ value: '25-50', color: 'rgba(38, 129, 240,1)' },
{ value: '50-100', color: 'rgba(247, 223, 56, 1)' },
{ value: '100-250', color: 'rgba(230, 85, 41, 1)' },
{ value: '250', color: 'rgba(255, 55, 168, 1)' },
],
];
const partName = ref('易涝点');
// 普查切换
function partClick(val) {
partName.value = val.name;
if (partName.value == '风险点') {
bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: true });
bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: false });
newfiberMapbox.map.easeTo({
center: [109.488, 36.596],
zoom: 13,
});
dataList.value = [
{ num: '1', yls: '长青路石油小', wz: '石油小区后门' },
{ num: '2', yls: '长青路纺织花园车', wz: '太阳鸟健身房' },
{ num: '3', yls: '凯泽世纪花园', wz: '凯泽世纪花园' },
{ num: '4', yls: '七里铺街 ', wz: '勘探公司' },
{ num: '5', yls: '南关街大礼堂', wz: '大礼堂' },
{ num: '6', yls: '柳林隧道博城向柳林方向引桥入口', wz: '柳林隧道博城向柳林方向引桥入口' },
{ num: '7', yls: '杨家湾超市门前', wz: '杨家湾路延大萃园校园公寓对面' },
{ num: '8', yls: '马家湾博城至培植中学', wz: '博城至培植中学门前' },
{ num: '9', yls: '百米大道延安小学十字', wz: '百米大道延安小学十字' },
];
} else if (partName.value == '缺陷管网') {
dataList.value = [
{ num: '1', yls: 'WS6091104WS6091110', wz: '双拥大道东十里铺' },
{ num: '2', yls: 'WS6091204WS6091110', wz: '百米大道永安路' },
{ num: '3', yls: 'WS6091304WS6091110', wz: '柳林隧道博城向柳林方向引桥入口' },
{ num: '4', yls: 'WS6091404WS6091110 ', wz: '百米大道延安小学十字' },
{ num: '5', yls: 'WS6091504WS6091110', wz: '大砭沟与北大街交叉口' },
{ num: '6', yls: 'WS6091104WS6091110', wz: '双拥大道东十里铺' },
{ num: '7', yls: 'WS6091204WS6091110', wz: '百米大道永安路' },
{ num: '8', yls: 'WS6091304WS6091110', wz: '柳林隧道博城向柳林方向引桥入口' },
{ num: '9', yls: 'WS6091404WS6091110 ', wz: '百米大道延安小学十字' },
];
} else {
bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: false });
bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: true });
newfiberMapbox.map.easeTo({
center: [109.488, 36.596],
zoom: 13,
});
dataList.value = [
{ num: '1', yls: '永安路', wz: '百米大道永安路' },
{ num: '2', yls: '永昌路北口', wz: '双拥大道永昌路' },
{ num: '3', yls: '桥儿沟隧道', wz: '双拥大道桥儿沟' },
{ num: '4', yls: '原水果市场', wz: '双拥大道东十里铺' },
{ num: '5', yls: '王家坪旧址门口', wz: '圣地路' },
{ num: '6', yls: '桥儿沟隧道1', wz: '双拥大道桥儿沟' },
{ num: '7', yls: '原水果市场1', wz: '双拥大道东十里铺' },
{ num: '8', yls: '原水果市场', wz: '双拥大道东十里铺' },
{ num: '9', yls: '王家坪旧址门口', wz: '圣地路' },
];
}
}
onBeforeUnmount(() => {
bus.emit('setLayerVisible', { layername: 'fengXianPoint', isCheck: false });
bus.emit('setLayerVisible', { layername: 'yiLaoPoint', isCheck: false });
});
</script>
<style lang="scss" scoped>
.CensusStatus {
width: 450px;
height: 44%;
.partTop {
width: 450px;
height: calc(100% - 55px);
margin-top: 5px;
.partTP {
width: 430px;
height: 85px;
// background: red;
margin: 0 auto;
.part {
width: 133px;
height: 76px;
cursor: pointer;
.parttop {
height: 76px;
}
}
.upper {
width: 60px;
height: 60px;
position: relative;
top: -67px;
left: 60px;
.upperNum {
display: flex;
height: 50%;
// background: red;
.oflower {
width: 50%;
font-family: DINPro;
font-weight: bold;
font-size: 22px;
color: #33ffcc;
// background: linear-gradient(0deg, #faffff 0%, #00ffea 100%);
// -webkit-background-clip: text;
// -webkit-text-fill-color: transparent;
line-height: 40px;
display: flex;
justify-content: space-around;
}
.oflowerDw {
width: 50%;
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 12px;
color: #ffffff;
line-height: 40px;
display: flex;
justify-content: space-around;
}
}
.upperMc {
display: flex;
justify-content: space-around;
align-items: center;
height: 50%;
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #ffffff;
}
}
}
.partList {
width: 450px;
height: calc(100% - 85px);
// background: yellowgreen;
.head {
height: 38px;
width: 430px;
margin: 0 auto;
background: linear-gradient(0deg, rgba(22, 193, 216, 0.8) 0%, rgba(0, 43, 67, 0.8) 100%);
border-radius: 6px;
border: 1px solid #15d2fd;
display: flex;
align-items: center;
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #ffffff;
}
.scrollCont {
width: 430px;
margin: 0 auto;
height: calc(100% - 40px);
overflow: hidden;
cursor: pointer;
// background: red;
li {
width: 100%;
height: 34px;
display: flex;
// justify-content: space-between;
align-items: center;
margin-top: 2px;
background: url('@/assets/images/zhps/liebiao.png') no-repeat;
background-size: 100% 100%;
.tableBodyList_span1 {
width: 10%;
// background: rgb(160, 155, 155);
padding-left: 15px;
font-family: DINPro;
font-weight: bold;
font-size: 22px;
color: #ffffff;
line-height: 58px;
}
.tableBodyList_span2 {
// background: red;
padding-left: 30px;
width: 45%;
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #ffffff;
white-space: nowrap; /* 确保文本在一行内显示 */
text-overflow: ellipsis; /* 使用省略号表示文本被裁剪 */
overflow: hidden;
}
.tableBodyList_span3 {
// background: red;
width: 45%;
text-align: right;
padding-right: 25px;
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #00f2ff;
overflow: hidden;
white-space: nowrap; /* 确保文本在一行内显示 */
text-overflow: ellipsis; /* 使用省略号表示文本被裁剪 */
}
}
.activedright {
background: url('@/assets/images/zhps/lbxz.png') no-repeat;
background-size: 100% 100%;
}
}
}
}
}
.RainfallForecast {
width: 450px;
height: 28%;
.RainfallTop {
width: 450px;
height: calc(100% - 52px);
margin-top: 5px;
.subRightBox {
width: 440px;
margin: 0 auto;
height: 35px;
display: flex;
cursor: pointer;
font-size: 14px;
color: #ffffff;
.headcenter {
width: 98px;
height: 26px;
padding: 2px 3px;
background: #00344f;
text-align: center;
margin-top: 5px;
margin-left: 10px;
}
.activedright {
border: 1px solid #2cfce9;
color: #e4f5ff;
background: #166f84;
}
}
.rainImgBox {
margin: 0 auto;
width: 440px;
height: calc(100% - 35px);
// background: rgb(153, 153, 214);
.rainend {
width: 440px;
height: 85%;
background: url('@/assets/images/zhps/hsRain.png') no-repeat;
background-size: 100% 100%;
}
.rainLegend {
width: 440px;
height: 15%;
justify-content: space-evenly;
color: #fff;
z-index: 10;
.flex {
height: 24px;
}
.number {
font-size: 14px;
color: #fff;
}
span {
display: block;
width: 14px;
height: 14px;
border-radius: 4px;
margin-right: 5px;
}
.sBorder {
border: 1px solid #39f7ff;
}
}
}
}
}
.PublicFeedback {
width: 450px;
height: 25%;
.BarChart {
margin: 8px auto;
width: 420px;
height: calc(100% - 60px);
background: url('@/assets/images/zhps/bingtu.png') no-repeat;
background-size: 100% 100%;
}
}
.ListBoxHeader {
height: 44px;
line-height: 50px;
width: 98%;
background: url('@/assets/newImgs/partBg.png') no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin: 7px 0px 0px 8px;
.ListBoxHeader_font {
font-family: PangMenZhengDao;
font-weight: 400;
font-size: 23px;
color: #ebfeff;
padding-left: 34px;
}
}
::-webkit-scrollbar {
width: 5px; /* 设置滚动条的宽度 */
}
</style>
