- <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" @click="projectionShow">典型项目分析</div>
- <div class="flex flex-justcontent-end">
- <el-select
- clearable
- filterable
- v-model="projectionStation"
- placeholder="请选择典型项目"
- size="small"
- class="picker"
- style="margin: 10px 0px"
- @change="selectProjectionPoint"
- >
- <el-option v-for="dict in projectionList" :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', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
- <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, onBeforeUnmount } 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';
- import yanAnProjection from '@/assets/yanAnProjection.json';
-
- 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 projectionStation = ref('1');
- const riskList = ref([{ value: '1', label: '大砭沟与北大街交叉口', lonlat: '109.46877497809032,36.60720875935824' }]);
- const supervisePointList = ref([{ value: '1', label: '延河南岸监测点1', lonlat: '109.49243789462459,36.601059437268574' }]);
- const projectionList = ref([
- { value: '1', label: '长青路纺织花园侧风险点整治工程', lonlat: '109.50939984901683,36.614801063495705' },
- { value: '2', label: '王家坪纪念馆改造工程', lonlat: '109.47138061324954,36.60901773821534' },
- { value: '3', label: '边区银行及大礼堂旧址综合改造工程', lonlat: '109.47633416787454,36.58271490658465' },
- ]);
- // 面板内容展开收起控制
- const props = defineProps({
- showPanel: {
- type: Boolean,
- },
- });
- //内涝积水分析交互
- const showWaterloging = () => {
- newfiberMapbox.map.easeTo({
- center: [109.488, 36.596],
- zoom: 12,
- pitch: 55,
- });
- // 先清空
- bus.emit('clearAllLayer');
- let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
- removedLayer.forEach(layer => {
- bus.emit('setLayerVisible', { layername: layer, isCheck: false });
- });
- bus.emit('SetLayerShow', ['内涝易涝点', '内涝风险点']);
- };
- //关键管网分析交互
- const pipeSupervisePoint = () => {
- newfiberMapbox.map.easeTo({
- center: [109.488, 36.596],
- zoom: 12,
- pitch: 55,
- });
- // 先清空
- bus.emit('clearAllLayer');
- let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
- removedLayer.forEach(layer => {
- bus.emit('setLayerVisible', { layername: layer, isCheck: false });
- });
- bus.emit('SetLayerShow', ['排水管网监测']);
- };
- //典型项目分析交互
- const projectionShow = () => {
- newfiberMapbox.map.easeTo({
- center: [109.488, 36.596],
- zoom: 12,
- pitch: 55,
- });
- // 先清空
- bus.emit('clearAllLayer');
- let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
- removedLayer.forEach(layer => {
- bus.emit('setLayerVisible', { layername: layer, isCheck: true });
- });
- };
- watch(
- () => props.showPanel,
- () => {
- showPanel.value = props.showPanel;
- },
- { immediate: true }
- );
- //内涝点change事件
- const selectWaterloggingPoint = () => {
- if (waterlogingPoint.value) {
- let selectedPoint = riskList.value.filter(item => item.value == waterlogingPoint.value)[0];
- newfiberMapbox.map.easeTo({
- center: selectedPoint.lonlat.split(',').map(Number),
- zoom: 15.5,
- });
- }
- };
- //典型项目change事件
- const selectProjectionPoint = () => {
- if (projectionStation.value) {
- let selectedPoint = projectionList.value.filter(item => item.value == projectionStation.value)[0];
- newfiberMapbox.map.easeTo({
- center: selectedPoint.lonlat.split(',').map(Number),
- zoom: 15.5,
- });
- }
- };
- //管网监测change事件
- const selectSupervisePoint = () => {
- if (supervisePoint.value) {
- let selectedPoint = supervisePointList.value.filter(item => item.value == supervisePoint.value)[0];
- newfiberMapbox.map.easeTo({
- center: selectedPoint.lonlat.split(',').map(Number),
- zoom: 15.5,
- });
- }
- };
- const DataList = ref('');
- // 日历点击获取相应日期
- const getChangeDate = date => {
- console.log(date);
- // 模拟假数据,演示用
- if (date == '2024-08-07') {
- // 大雨
- DataList.value = '2024-08-07';
- getDataFX('1');
- } else {
- // 中雨
- DataList.value = '2024-08-03';
- getDataFX('0');
- }
- };
- // 内涝积水分析、项目分析、关键管网分析数据获取
- function getDataFX(val) {
- // 内涝积水分析
- console.log(val, 'valvalval');
- selectWaterlogging({ value: val, date: DataList.value }).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, date: DataList.value }).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, date: DataList.value }).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();
- });
- }
- //添加海绵项目
- const addProjectionLayer = () => {
- let projectionList = [
- {
- layername: 'HMJZYSQ',
- data: turf.featureCollection(yanAnProjection.features.filter(i => i.properties.projectionType.includes('建筑'))),
- },
- {
- layername: 'HMXGYLD',
- data: turf.featureCollection(yanAnProjection.features.filter(i => i.properties.projectionType.includes('公园'))),
- },
- {
- layername: 'HMXDLGC',
- data: turf.featureCollection(yanAnProjection.features.filter(i => i.properties.projectionType.includes('道路'))),
- },
- {
- layername: 'HMXSX',
- data: turf.featureCollection(yanAnProjection.features.filter(i => i.properties.projectionType.includes('水系'))),
- },
- {
- layername: 'GWPCYXF',
- data: turf.featureCollection(yanAnProjection.features.filter(i => i.properties.projectionType.includes('管网'))),
- },
- // 'HMXSX', 'GWPCYXF', 'GWJBZ', 'GIS', 'other'
- ];
- console.log('projectionList---', projectionList);
- projectionList.forEach(item => {
- bus.emit('setGeoJSON', { json: item.data, key: item.layername });
- });
- //bus.emit('setLegendData', projectionList);
- };
- onMounted(() => {
- newfiberMapbox.map.easeTo({
- center: [109.488, 36.596],
- zoom: 13,
- });
- addProjectionLayer();
- });
- onBeforeUnmount(() => {
- bus.emit('clearAllLayer');
- bus.emit('SetLayerShow', ['蓝色地图']);
- let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
- removedLayer.forEach(layer => {
- bus.emit('setLayerVisible', { layername: layer, isCheck: false });
- });
- });
- </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>