<template> <!-- 海绵综合一张图 排水防涝 --> <div class="oneMapPSFL"> <!-- 左侧 --> <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']"> <!-- 排水设施统计 --> <PsssCount></PsssCount> <!-- 降雨报告 --> <ReportRain class="mt-5"></ReportRain> <!-- 防汛物资 --> <FloodWZ class="mt-5"></FloodWZ> </div> <!-- 中间 --> <div :class="['headHMA', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']"> <FutureRain></FutureRain> </div> <!-- 右侧 --> <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']"> <!-- 泵站运行监控 --> <!-- <MonitorBZ></MonitorBZ> --> <!-- 监测设备 --> <MonitorEquip class="mt-10"></MonitorEquip> </div> <!-- 泵站运行工况图 --> <el-dialog v-model="dialogShow" title="泵站工况图" width="1500px" append-to-body> <PumpProcess v-if="dialogShow" :pumpObj="pumpObj"></PumpProcess> </el-dialog> <!-- 污水处理厂工艺图 --> <el-dialog v-model="showWSC" :title="wscTitle + '实时数据'" width="1050px" append-to-body> <WscMonitor v-if="showWSC" :wscObj="wscObj"></WscMonitor> </el-dialog> <!-- 管网监测点详情 --> <el-dialog v-model="showPipe" title="管网监测详情" width="1000px" append-to-body> <PipeDetail v-if="showPipe"></PipeDetail> </el-dialog> </div> </template> <script setup> import WscMonitor from '@/views/sponeScreen/waterFlood/wscMonitor.vue'; //污水处理厂工艺图 import PipeDetail from '@/views/sponeScreen/waterFlood/pipeDetail.vue'; //管网监测点详情 import PumpProcess from '@/views/sponeScreen/waterFlood/pumpProcess.vue'; //泵站运行工况图 import PsssCount from '@/views/sponeScreen/waterFlood/PsssCount.vue'; //排水设施统计 import ReportRain from '@/views/sponeScreen/waterFlood/rainReport.vue'; //降雨报告 import FloodWZ from '@/views/sponeScreen/waterFlood/floodWZ.vue'; //防汛物资 import MonitorBZ from '@/views/sponeScreen/waterFlood/pumpMonitor.vue'; //泵站运行监控 import MonitorEquip from '@/views/sponeScreen/waterFlood/equipMonitor.vue'; //监测设备 import FutureRain from '@/views/sponeScreen/waterFlood/futureRain.vue'; //降雨预报 import { nextTick, onBeforeUnmount } from 'vue'; import bus from '@/bus/index'; import riverFlow from '@/assets/geojson/kaifeng/riverFlow.json'; const { proxy } = getCurrentInstance(); const showPanel = ref(true); //面板展开收起 const dialogShow = ref(false); const pumpObj = ref({}); const showPipe = ref(false); const showWSC = ref(false); const wscObj = ref({}); const wscTitle = ref('污水处理厂'); // 面板内容展开收起控制 const props = defineProps({ showPanel: { type: Boolean, }, }); watch( () => props.showPanel, () => { showPanel.value = props.showPanel; }, { immediate: true } ); onMounted(() => { // 泵站工况图 bus.on('checkBZGYT', params => { pumpObj.value = params; dialogShow.value = true; }); // 污水厂工况图 bus.on('checkWSCGYT', params => { wscTitle.value = params.sewageName || '污水处理厂'; wscObj.value = params; showWSC.value = true; }); // 管网监测点 bus.on('pipeMonitorBus', params => { showPipe.value = true; }); setTimeout(() => { // newfiberMap.setView({ // lng: 114.342, // lat: 34.702, // heading: 2.281299097855777, // zoom: 6358.12942752382, // pitch: -25.2508969308367, // roll: 0.005453465256790101, // }); //河流流向 let layer = new mapboxL7.LineLayer({ name: 'waterFlow', }) .source(riverFlow) .size(6) .shape('line') .texture('arrow') .color('rgb(62, 255, 253)') .animate({ interval: 1, // 间隔 duration: 1.5, // 持续时间,延时 trailLength: 2, // 流线长度 }) .style({ opacity: 0.6, lineTexture: true, // 开启线的贴图功能 iconStep: 200, // 设置贴图纹理的间距 borderWidth: 0.4, // 默认文 0,最大有效值为 0.5 borderColor: '#fff', // 默认为 #ccc }); newfiberMapbox.addLayer(layer); // 默认缩放比、中心点 newfiberMapbox.map.easeTo({ center: [114.344, 34.802], zoom: 13.6, pitch: 30, }); bus.emit('setIniteLayer', [ { layername: 'YSBZ', //雨水泵站 show: false, }, { layername: 'combineBengZhan', //合流泵站 show: false, }, { layername: 'sewageFactory', //污水处理厂 show: false, }, { layername: 'ysLine1', //雨水管网 show: false, }, { layername: 'hsLine1', //合流管网 show: false, }, { layername: 'pipeline_info_flow', //管网流向 show: false, }, { layername: 'pipeMonitor', //管网监测点,测试 show: false, }, { layername: 'waterCourse', //河道水位计 show: false, }, ]); }, 1000); }); onBeforeUnmount(() => { bus.off('checkBZGYT'); bus.off('checkWSCGYT'); bus.off('pipeMonitorBus'); if (!newfiberMapbox) return; newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('waterFlow')); bus.emit('setIniteLayer', [ { layername: 'YSBZ', //雨水泵站 show: true, }, { layername: 'combineBengZhan', //合流泵站 show: true, }, { layername: 'sewageFactory', //污水处理厂 show: true, }, { layername: 'ysLine1', //雨水管网 show: true, }, { layername: 'hsLine1', //合流管网 show: true, }, { layername: 'pipeline_info_flow', //管网流向 show: true, }, { layername: 'pipeMonitor', //管网监测点,测试 show: true, }, { layername: 'waterCourse', //河道水位计 show: true, }, ]); }); </script> <style lang="scss" scoped> .oneMapPSFL { .headHMA { background: none; background: rgba(0, 59, 109, 0.8); border-radius: 8px; top: 10px; height: auto; } } </style>