<template>
<!-- 海绵监测分析 -->
<div id="ZHHM_JCFX">
<div :class="['LeftBox', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
<div class="ComBox">
<!-- 降雨日历统计 -->
<div class="Box_header">降雨日历统计</div>
<div class="rainCal">
<monitorCalender :hasClose="false" @change="getChangeDate" />
</div>
<!-- 内涝积水分析 -->
<div class="Box_header" @click="showWaterloging">内涝积水分析</div>
<div class="titSmall flex flex-align-center">
<div class="flex">
<span></span>
<div class="name">内涝风险点</div>
</div>
<el-select
clearable
filterable
v-model="waterlogingPoint"
placeholder="请选择内涝风险点"
size="small"
class="picker"
@change="selectWaterloggingPoint"
>
<el-option v-for="dict in riskList" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</div>
<div class="chartHeight">
<chartLogging :data="chartData1" :refresh="chartData1.refresh"></chartLogging>
</div>
<div class="flex flexLeg">
<div class="legPart"><span class="yellow"></span>轻微内涝警戒线</div>
<div class="legPart"><span class="red"></span>严重内涝警戒线</div>
</div>
<!-- 内涝分析成因分析 -->
<div class="titSmall flex flex-align-center">
<div class="flex">
<span></span>
<div class="name">内涝分析成因分析</div>
</div>
</div>
<table class="tableFX">
<tr>
<td class="title">当前状况</td>
<td>未出现内涝积水情况</td>
</tr>
<tr>
<td class="title">数据分析</td>
<td>初雨出流较慢但持续一段时间正常</td>
</tr>
<tr>
<td class="title">历史成因</td>
<td>区域局部地理位置较低，收水范围过大</td>
</tr>
</table>
</div>
</div>
<div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
<div class="ComBox">
<!-- 典型项目分析 -->
<div class="Box_header">典型项目分析</div>
<div class="flex flex-justcontent-end">
<el-select
clearable
filterable
v-model="riskStation"
placeholder="请选择典型项目"
size="small"
class="picker"
style="margin: 10px 0px"
>
<el-option v-for="dict in riskList" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</div>
<div style="height: 220px">
<projectDX :data="chartData2" :refresh="chartData2.refresh"></projectDX>
</div>
<!-- 关键管网分析 -->
<div class="Box_header" @click="pipeSupervisePoint">关键管网分析</div>
<div class="flex flex-justcontent-spacearound">
<el-select
clearable
filterable
v-model="riskStation"
placeholder="请选择分区"
size="small"
class="picker"
style="margin: 10px 0px"
>
<el-option label="延河南岸分区" value="1" />
</el-select>
<el-select
clearable
filterable
v-model="supervisePoint"
placeholder="请选择管网监测点"
size="small"
class="picker"
style="margin: 10px 0px"
@change="selectSupervisePoint"
>
<el-option v-for="dict in supervisePointList" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</div>
<div class="chartHeightR">
<pipeFX :data="chartData3" :refresh="chartData3.refresh"></pipeFX>
</div>
<div class="flex flexLeg">
<div class="legPart"><span class="yellow"></span>轻微风险警戒线</div>
<div class="legPart"><span class="red"></span>溢流风险警戒线</div>
</div>
<!-- 风险成因分析 -->
<div class="titSmall flex flex-align-center">
<div class="flex">
<span></span>
<div class="name">风险成因分析</div>
</div>
</div>
<table class="tableFX">
<tr>
<td class="title">当前状况</td>
<td>未出现风险运行</td>
</tr>
<tr>
<td class="title" rowspan="2">数据分析</td>
<td>出流时间与降雨峰值有时间偏差</td>
</tr>
<tr>
<td>降雨过后1小时后管网有积水</td>
</tr>
<tr>
<td class="title">管网管径</td>
<td>DN300</td>
</tr>
<tr>
<td class="title" rowspan="2">风险分析</td>
<td>管网普查报告中该段管网存在缺陷</td>
</tr>
<tr>
<td>溢流风险运行35分钟</td>
</tr>
</table>
</div>
</div>
<!-- 中部建议 -->
<div class="centerSuggest">
<div class="flex">
<div class="part">
<div class="flex flex-align-center">
<div class="left">
<div>管网监测</div>
<div style="font-weight: bold">(10/24)</div>
</div>
<div class="right">
<div class="flex flex-justcontent-spacearound">今日预警站点(个):<span>10</span></div>
<div class="flex flex-justcontent-spacearound">今日持续时长(分钟):<span>70</span></div>
</div>
</div>
</div>
<div class="part">
<div class="flex flex-align-center">
<div class="left">
<div>排口监测</div>
<div style="font-weight: bold">(20/29)</div>
</div>
<div class="right">
<div class="flex flex-justcontent-spacearound">今日预警站点(个):<span>10</span></div>
<div class="flex flex-justcontent-spacearound">今日持续时长(分钟):<span>70</span></div>
</div>
</div>
</div>
<div class="part">
<div class="flex flex-align-center">
<div class="left">
<div>海绵地块</div>
<div style="font-weight: bold">(10/12)</div>
</div>
<div class="right">
<div class="flex flex-justcontent-spacearound">今日预警站点(个):<span>10</span></div>
<div class="flex flex-justcontent-spacearound">今日持续时长(分钟):<span>70</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup name="ZHHM_JCFX">
import { ref, reactive, toRefs, onMounted, defineProps, defineEmits } from 'vue';
import { selectWaterlogging, selectExponent, selectPipenetwork } from '@/api/haimian/jcfxHM.js';
import monitorCalender from './monitorCalender.vue';
import chartLogging from './chartLogging'; //内涝积水点
import projectDX from './projectDX'; //典型项目分析
import pipeFX from './pipeFX'; //管网分析
import bus from '@/bus';
const showPanel = ref(true); //面板展开收起
const chartData1 = ref({
xAxis: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
inverse: true,
yAxis: [1, 2, 2.3, 2, 1.1, 2.5, 1.9, 2.5, 2.8, 1.1, 2.1, 3], //降雨量
yAxis2: [0.1, 0.2, 0.3, 0.2, 0.1, 0.4, 0.3, 0.03, 0.6, 0.1, 0.2, 0.5], //流量
refresh: 1,
});
const chartData2 = ref({
xAxis: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
yAxis1: [0.1, 0.2, 0.3, 0.2, 0.1, 0.4, 0.5, 0.23, 0.6, 0.1, 0.2, 0.1], //水深
yAxis2: [50, 55, 80, 50, 46, 65, 70, 50, 78, 52, 69, 90], //ss
yAxisName1: '水深(cm)',
yAxisName2: 'ss(mg/L)',
refresh: 1,
});
const chartData3 = ref({
xAxis: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
inverse: true,
yAxis1: [1, 2, 2.3, 2, 1.1, 2.5, 1.9, 2.5, 2.8, 1.1, 2.1, 3], //降雨量
yAxis2: [20, 20.2, 21.3, 20.2, 22.1, 19.4, 20, 21, 23.6, 20.1, 21.2, 29], //水深
yAxis3: [0.1, 0.2, 0.3, 0.2, 0.1, 0.4, 0.3, 0.03, 0.6, 0.1, 0.2, 0.5], //流速
refresh: 1,
});
const riskStation = ref('1');
const supervisePoint = ref('1');
const waterlogingPoint = ref('1');
const riskList = ref([{ value: '1', label: '大砭沟与北大街交叉口', lonlat: '109.468774978,36.6072087594' }]);
const supervisePointList = ref([{ value: '1', label: '延河南岸监测点1', lonlat: '109.49243789462459 36.601059437268574' }]);
// 面板内容展开收起控制
const props = defineProps({
showPanel: {
type: Boolean,
},
});
//内涝积水分析交互
const showWaterloging = () => {
newfiberMapbox.map.easeTo({
center: [109.488, 36.596],
zoom: 12,
pitch: 55,
});
// 先清空
bus.emit('clearAllLayer');
bus.emit('SetLayerShow', ['内涝易涝点', '内涝风险点']);
};
//关键管网分析交互
const pipeSupervisePoint = () => {
newfiberMapbox.map.easeTo({
center: [109.488, 36.596],
zoom: 12,
pitch: 55,
});
// 先清空
bus.emit('clearAllLayer');
bus.emit('SetLayerShow', ['排水管网监测']);
};
watch(
() => props.showPanel,
() => {
showPanel.value = props.showPanel;
},
{ immediate: true }
);
//内涝点change事件
const selectWaterloggingPoint = () => {
if (waterlogingPoint.value) {
let selectedPoint = supervisePointList.value.filter(item => item.value == waterlogingPoint.value)[0];
newfiberMapbox.map.easeTo({
center: selectedPoint.lonlat.split(',').map(Number),
zoom: 15.5,
});
}
};
//管网监测change事件
const selectSupervisePoint = () => {
if (supervisePoint.value) {
let selectedPoint = riskList.value.filter(item => item.value == supervisePoint.value)[0];
newfiberMapbox.map.easeTo({
center: selectedPoint.lonlat.split(',').map(Number),
zoom: 15.5,
});
}
};
// 日历点击获取相应日期
const getChangeDate = date => {
console.log(date);
// 模拟假数据，演示用
if (date == '2024-08-07') {
// 大雨
getDataFX('1');
} else {
// 中雨
getDataFX('0');
}
};
// 内涝积水分析、项目分析、关键管网分析数据获取
function getDataFX(val) {
// 内涝积水分析
selectWaterlogging({ value: val }).then(res => {
let datas = res.data;
chartData1.value.xAxis = datas.time;
chartData1.value.yAxis = datas.jiangyuliang; //降雨量
chartData1.value.yAxis2 = datas.jishuishen; //积水深
chartData1.value.refresh = Math.random();
});
// 项目分析
selectExponent({ value: val }).then(res => {
let datas = res.data;
chartData2.value.xAxis = datas.time;
chartData2.value.yAxis1 = datas.jishuishen; //水深
chartData2.value.yAxis2 = datas.ss; //SS
chartData2.value.refresh = Math.random();
});
// 关键管网分析
selectPipenetwork({ value: val }).then(res => {
let datas = res.data;
chartData3.value.xAxis = datas.time;
chartData3.value.yAxis1 = datas.jyl; //降雨量
chartData3.value.yAxis2 = datas.jishuishen; //水深
chartData3.value.yAxis3 = datas.ls; //流速
chartData3.value.refresh = Math.random();
});
}
onMounted(() => {});
</script>
<style lang="scss" scoped>
#ZHHM_JCFX {
width: 100%;
height: 100%;
.centerSuggest {
position: absolute;
left: 480px;
top: 110px;
z-index: 90;
background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
border-radius: 6px;
border: 1px solid #15d2fd;
padding: 15px;
width: calc(100vw - 1000px);
box-shadow: inset 0 0 10px 10px #47eef38a;
.part {
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #ffffff;
width: 31.8%;
margin-left: 10px;
text-align: center;
background: linear-gradient(0deg, rgba(0, 252, 255, 0.8) 0%, rgba(0, 43, 67, 0.2) 100%);
border-radius: 2px;
border: 1px solid #74dde1;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
padding: 6px 0px;
line-height: 24px;
.left {
border-right: 1px solid #74dde1;
width: 30%;
}
.right {
flex: 1;
span {
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 16px;
color: #00f2ff;
cursor: pointer;
}
}
}
}
.chartHeight {
width: 100%;
height: calc(100vh - 720px);
margin: 5px auto;
}
.chartHeightR {
width: 100%;
height: calc(100vh - 780px);
margin: 5px auto;
}
.tableFX {
border-collapse: collapse;
width: 95%;
margin: 10px 2%;
td {
border: 1px solid #1cf5fc;
text-align: center;
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 14px;
padding: 5px 0px;
color: #a5d2ff;
background: #075680;
}
.title {
color: #00f2ff;
}
}
.LeftBox {
width: 450px;
height: calc(100% - 98px);
position: absolute;
left: 10px;
top: 70px;
background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
border-radius: 6px;
border: 1px solid #47eef3;
box-sizing: border-box;
padding: 10px;
box-shadow: inset 0 0 5px 5px #47eef38a;
}
.RightBox {
width: 450px;
height: calc(100% - 98px);
position: absolute;
right: 10px;
top: 70px;
background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
border-radius: 6px;
border: 1px solid #47eef3;
box-sizing: border-box;
padding: 10px;
box-shadow: inset 0 0 5px 5px #47eef38a;
}
.ComBox {
width: 100%;
box-sizing: border-box;
.Box_header {
width: 100%;
height: 43px;
background: url('@/assets/images/Sponge_screen/Box_HeaderBackground.png') no-repeat center;
background-size: cover;
font-family: PangMenZhengDao;
font-weight: 400;
font-size: 23px;
color: #ebfeff;
line-height: 43px;
box-sizing: border-box;
padding-left: 35px;
cursor: pointer;
}
.titSmall {
justify-content: space-between;
padding: 0px 15px;
margin-top: 10px;
.flex {
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 14px;
color: #ebfeff;
align-items: center;
span {
width: 10px;
height: 10px;
display: inline-block;
margin-right: 6px;
background: #fff;
transform: rotate(45deg);
}
.name {
background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
padding: 0px 3px;
height: 10px;
line-height: 0px;
margin-top: 6px;
}
}
}
.flexLeg {
justify-content: center;
margin-bottom: 20px;
.legPart {
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 14px;
color: #ebfeff;
text-align: center;
margin-right: 20px;
span {
width: 10px;
height: 10px;
display: inline-block;
margin-right: 6px;
}
.yellow {
background: #ffff80;
}
.red {
background: #e20f36;
}
}
}
}
}
</style>
