<template> <!-- 排水防涝 管网健康诊断 --> <div class="publicContainer healthPage"> <MapBox :initJson="`/static/libs/mapbox/style/floodPipe.json`" @map-click="mapClick"></MapBox> <commonPopupPK></commonPopupPK> <commonPopupSupervise></commonPopupSupervise> <commonPopup></commonPopup> <!-- 图例+绘制工具 --> <healthLegend @toolsEvt="toolsEvt"></healthLegend> </div> <!-- 管网基础信息弹窗 --> <div id="pipeInfo" class="pipeInfo" v-show="pipePopupShow" style="width: 400px"> <div class="title"> <div class="infoTitle">{{ pipeData.startPointNumber }}-{{ pipeData.endPointNumber }}</div> <div class="closePopup"> <el-icon :size="18" @click="closePopup"> <Close /> </el-icon> </div> </div> <div class="dividerLine"></div> <el-space> <div class="infoContent flexs"> <div class="infoName">管网类型:</div> <div class="infoData"> {{ pipeData.pipelineType == 'Rain' ? '雨水' : pipeData.pipelineType == 'Sewage' ? '污水' : pipeData.pipelineType == 'Combined' ? '雨污合流' : '--' }} </div> </div> <div class="infoContent flexs"> <div class="infoName">管网等级:</div> <div class="infoData">{{ pipeData.pipelineLevel }}</div> </div> </el-space> <el-space> <div class="infoContent flexs"> <div class="infoName">断面尺寸:</div> <div class="infoData">{{ pipeData.sectionType }}</div> </div> <div class="infoContent flexs"> <div class="infoName">所属道路:</div> <div class="infoData">{{ pipeData.roadName }}</div> </div> </el-space> <el-space> <div class="infoContent flexs"> <div class="infoName">起点编号:</div> <div class="infoData">{{ pipeData.startPointNumber }}</div> </div> <div class="infoContent flexs"> <div class="infoName">终点编号:</div> <div class="infoData">{{ pipeData.endPointNumber }}</div> </div> </el-space> <el-space> <div class="infoContent flexs"> <div class="infoName">起点高程:</div> <div class="infoData">{{ pipeData.startCopNoseElevation }}m</div> </div> <div class="infoContent flexs"> <div class="infoName">终点高程:</div> <div class="infoData">{{ pipeData.endCopNoseElevation }}m</div> </div> </el-space> <el-space> <div class="infoContent flexs"> <div class="infoName">起点埋深:</div> <div class="infoData">{{ pipeData.startGroundDepth }}</div> </div> <div class="infoContent flexs"> <div class="infoName">终点埋深:</div> <div class="infoData">{{ pipeData.endGroundDepth }}</div> </div> </el-space> <el-space> <div class="infoContent flexs"> <div class="infoName">管网材质:</div> <div class="infoData">{{ pipeData.pipelineTexture }}</div> </div> </el-space> <el-space> <div class="infoContent flexs" style="width: 400px"> <div class="infoName">普查单位:</div> <div class="infoData">{{ pipeData.operationalUnits }}</div> </div> </el-space> </div> <!-- 管井基础信息弹窗 --> <div id="pointInfo" v-show="pointPopupShow" style="width: 400px"> <div class="title"> <div class="infoTitle">{{ pointData.pointNumber }}</div> <div class="closePopup"> <el-icon :size="18" @click="closePointPopup"> <Close /> </el-icon> </div> </div> <div class="dividerLine"></div> <el-space> <div class="infoContentHealth flexs"> <div class="infoName">管井类型:</div> <div class="infoData"> <dict-tag :options="point_type" :value="pointData.pointType" /> </div> </div> <div class="infoContentHealth flexs"> <div class="infoName">管井等级:</div> <div class="infoData">{{ pointData.pointLevel }}</div> </div> </el-space> <el-space> <div class="infoContentHealth flexs"> <div class="infoName">所属道路:</div> <div class="infoData">{{ pointData.roadName }}</div> </div> <div class="infoContentHealth flexs"> <div class="infoName">地面高程:</div> <div class="infoData">{{ pointData.groundElevation }}m</div> </div> </el-space> <el-space> <div class="infoContentHealth flexs"> <div class="infoName">井盖材质:</div> <div class="infoData">{{ pointData.pointTexture }}</div> </div> <div class="infoContentHealth flexs"> <div class="infoName">井底深度:</div> <div class="infoData">{{ pointData.bottomBuriedDepth }}</div> </div> </el-space> <el-space> <div class="infoContentHealth flexs"> <div class="infoName">结构形式:</div> <div class="infoData">{{ pointData.structureForm }}</div> </div> <div class="infoContentHealth flexs"> <div class="infoName">井盖形状:</div> <div class="infoData">{{ pointData.manholeCoverShape }}</div> </div> </el-space> <el-space> <div class="infoContentHealth flexs"> <div class="infoName">井盖尺寸:</div> <div class="infoData">{{ pointData.manholeCoverSize }}</div> </div> </el-space> <el-space> <div class="infoContent flexs" style="width: 400px"> <div class="infoName">普查单位:</div> <div class="infoData">{{ pointData.operationalUnits }}</div> </div> </el-space> <!-- <div class="infoContentHealth"> <div class="infoName">管网材质:</div> <div class="infoData">{{ pointData.pointTexture }}</div> </div> --> </div> <!-- 剖面分析和连通性分析弹窗 --> <div class="pmfxpops" v-if="pmfxpopsShow"> <div class="pmfxpopshead"> <span class="pmfxpopsheadstart">起点</span> <div class="pmfxpopsheadborder">{{ currentTool.pipeAnalyse.startCode }}</div> <img class="pmfxpopsheadimg" src="@/assets/images/gisMap/guanwang_icon.png" alt="" /> <span class="pmfxpopsheadend">终点</span> <div class="pmfxpopsheadborder">{{ currentTool.pipeAnalyse.endCode }}</div> </div> <div class="pmfxpopsbot"> <div class="pmfxpopsbotbtn" @click="resetSelectedPipe">复位</div> <div class="pmfxpopsbotbtn" @click="submitResult">确定</div> </div> </div> <div class="isOpenBuildingTLs"> <!-- 天地图、影像图切换 --> <el-popover placement="right-start" :width="80" trigger="hover" content="地图切换"> <template #reference> <!-- <el-tooltip effect="dark" content="地图切换" placement="bottom"> --> <img src="@/assets/images/gisMap/yixiangditu.png" alt="" class="earthIcon" /> <!-- </el-tooltip> --> </template> <template #default> <div class="typeMap"> <img src="@/assets/images/gisMap/defMap.png" alt="" :class="mapActive == 1 ? 'activeImg' : ''" @click="changeMapType(1)" /> <img src="@/assets/images/gisMap/ysMap.png" alt="" :class="mapActive == 2 ? 'activeImg' : ''" @click="changeMapType(2)" /> </div> </template> </el-popover> </div> </template> <script setup name="healthPage"> import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图 import healthLegend from '@/views/gisMapPage/healthLegend.vue'; import { ElLoading } from 'element-plus'; import bus from '@/bus'; import { pagepipelineInfo } from '@/api/drainagePipeline/pipelineInfo'; import { pagepipelinePoint } from '@/api/drainagePipeline/pipelinePoint'; import { upStreamAnalyse, downStreamAnalyse, connectAnalyse } from '@/api/floodSys/floodPipe'; import commonPopupSupervise from '@/views/floodSys/floodOneMap/commonPopupSupervise.vue'; //监测点弹窗 import commonPopupPK from '@/views/floodSys/floodOneMap/commonPopupPK.vue'; //排口监测点弹窗 import commonPopup from '@/views/floodSys/floodOneMap/commonPopup.vue'; //厂站弹窗 import { nextTick, onBeforeUnmount } from 'vue'; const { proxy } = getCurrentInstance(); const mapActive = ref(1); const pipeData = ref({}); const pipePopupShow = ref(false); const pointData = ref({}); const pointPopupShow = ref(false); const pmfxpopsShow = ref(false); const CodeArray = ref([]); const { point_type } = proxy.useDict('point_type'); const currentTool = ref({ tool: -1, pipeAnalyse: { startCode: null, endCode: null, dataset: null, }, }); const toolsEvt = id => { currentTool.value.tool = id; console.log('currentTool.value.tool', id); CodeArray.value = []; currentTool.value.pipeAnalyse.startCode = null; currentTool.value.pipeAnalyse.endCode = null; closePopup(); closePointPopup(); if (id == '1' || id == '2') { pmfxpopsShow.value = true; } else { pmfxpopsShow.value = false; } if (['6', '4', '5', '9'].includes(id)) mapClickByTools(); }; const mapClickByTools = (point, properties) => { console.log('propertiesproperties', properties); if (currentTool.value.tool == -1) return; const fields = ['设施编码', '起点点号', '终点点号', 'startCode', 'endCode']; ({ //剖面分析 1: async () => { await analyseCommonMethod(); }, //连通性分析 2: async () => { await analyseCommonMethod(); }, //资产统计 3: () => {}, //面积测量 4: () => { const layerId = String(new Date().getTime()); if (!newfiberMapbox.measure) newfiberMapbox.measure = new mapboxgl1.MeatureTool(newfiberMapbox.map); newfiberMapbox.measure.measureArea(layerId, true, geojson => { console.log('面积测量geojson', geojson); }); newfiberMapbox.measure.setArea(); }, //距离测量 5: () => { const layerId = String(new Date().getTime()); if (!newfiberMapbox.measure) newfiberMapbox.measure = new mapboxgl1.MeatureTool(newfiberMapbox.map); newfiberMapbox.measure.measureDistance(layerId, true, geojson => { console.log('距离测量geojson', geojson); }); newfiberMapbox.measure.setDistance(); }, //定位 6: () => { const layerId = String(new Date().getTime()); if (!newfiberMapbox.measure) newfiberMapbox.measure = new mapboxgl1.MeatureTool(newfiberMapbox.map); newfiberMapbox.measure.drawPoint(layerId, geojson => { console.log('定位geojson', geojson); }); }, //上游分析 7: async () => { await analyseCommonMethod(); }, //下游分析 8: async () => { await analyseCommonMethod(); }, //清除绘制 9: async () => { // bus.emit('removeMapDatas', ['CUSTOM_DRAW','圆形','菱形','方形']); if (!newfiberMapbox.measure) return; newfiberMapbox.measure.clearMeasureAll(); }, })[currentTool.value.tool](); async function analyseCommonMethod() { console.log(CodeArray.value); CodeArray.value = [currentTool.value.pipeAnalyse.startCode, currentTool.value.pipeAnalyse.endCode]; CodeArray.value.push(properties[fields[0]] || properties[fields[1]] || properties[fields[2]]); console.log(CodeArray.value); if (!CodeArray.value[0]) { currentTool.value.pipeAnalyse.startCode = CodeArray.value[CodeArray.value.length - 1]; } else { currentTool.value.pipeAnalyse.startCode = CodeArray.value[0]; currentTool.value.pipeAnalyse.endCode = CodeArray.value[CodeArray.value.length - 1]; } if (CodeArray.value[CodeArray.value.length - 2]) { currentTool.value.pipeAnalyse.endCode = CodeArray.value[CodeArray.value.length - 1]; } let { startCode, endCode } = currentTool.value.pipeAnalyse; if (startCode == endCode) currentTool.value.pipeAnalyse.endCode = null; if (['7', '8'].includes(currentTool.value.tool)) { await pipeAnalyseMethod(); setHighlight(); } } }; async function pipeAnalyseMethod() { let loading = ElLoading.service({ lock: true, text: '正在进行分析...', }); let { startCode, endCode } = currentTool.value.pipeAnalyse; let { data } = await { 7: upStreamAnalyse, 8: downStreamAnalyse, 2: connectAnalyse, 1: connectAnalyse }[currentTool.value.tool]({ startPointNumber: startCode, endPointNumber: endCode, }); currentTool.value.pipeAnalyse.dataset = data; console.log('pipeAnalyseMethod--', data); bus.emit('analyseData', data); console.log('datadatadatadata', data); loading.close(); } function setHighlight() { const types = { Rain: 'YS', Mix: 'HS', Sewage: 'WS' }; let features = (currentTool.value.pipeAnalyse.dataset.pipelineInfoList || []) .map(i => ({ properties: { ...i, geometry: i.geometrys, layer: types[i.pipelineType] } })) .flat(); bus.emit('setHighlight', features); } const mapClick = (point, properties) => { console.log('point', point); console.log('properties', properties); let featureKey = properties.type; let data = properties; mapClickByTools(point, properties); if (properties.type == 'pipeSupervise' || properties.type == 'PKsupervise') { !!properties.onlineStatus && properties.onlineStatus == 'online' ? (properties.onlineStatus = '在线') : (properties.onlineStatus = '离线'); properties.lon = properties.lonLat.split(',')[0]; properties.lat = properties.lonLat.split(',')[1]; let popupData = { popupInfo: properties, popupShow: true, }; newfiberMapbox.map.easeTo({ center: [Number(properties.lonLat.split(',')[0]) + 0.0035, Number(properties.lonLat.split(',')[1]) + 0.004], zoom: 15, }); let closeCommonPopup = false; bus.emit('closeCommonPopup', closeCommonPopup); properties.type == 'PKsupervise' ? bus.emit('popupPKData', popupData) : bus.emit('popupSuperviseData', popupData); } else if ( featureKey == 'YSBZ' || featureKey == 'WSBZ' || featureKey == 'WSCLC' || featureKey == 'paiKou' || featureKey == 'drainOutlet' ) { let popupData = { popupInfo: data, popupShow: true, }; if (featureKey == 'paiKou') { data.lon = Number(data.originalX); data.lat = Number(data.originalY); } else if (featureKey == 'drainOutlet') { if (data.pointNumber == '天仙路溢流口') { data.lon = Number(data.originalX); data.lat = Number(data.originalY); } else { data.lon = Number(data.originalX); data.lat = Number(data.originalY); } } bus.emit('popupData', popupData); let popupDiv = document.getElementById('psPopup'); window.stationPopup = new mapboxL7.Popup({ html: popupDiv, lngLat: { lng: data.lon, lat: data.lat, }, anchor: 'center', offsets: [0, 200], }); newfiberMapbox.addPopup(stationPopup); newfiberMapbox.map.easeTo({ center: [Number(data.lon) + 0.005, Number(data.lat)], zoom: 15, }); } if (!!data['起点点号'] && !!data['终点点号'] && data.geometry.includes('LINESTRING')) { let startPoint = data['起点点号']; let endPoint = data['终点点号']; getPipeDataInfo(startPoint, endPoint); } else if (!!data['设施编码'] && data.geometry.includes('POINT')) { let pointNumber = data['设施编码'].split('-')[0]; getPipePointInfo(pointNumber); let pipePointPopupDiv = document.getElementById('pointInfo'); window.pipePointPopup = new mapboxL7.Popup({ html: pipePointPopupDiv, lngLat: { lng: point[0], lat: point[1], }, anchor: 'center', offsets: [-50, 120], autoClose: false, }); newfiberMapbox.addPopup(pipePointPopup); newfiberMapbox.map.easeTo({ center: [point[0] + 0.0005, point[1]], zoom: 18, }); } }; let getPipeDataInfo = async (startPoint, endPoint) => { let params = { startPointNumber: startPoint, endPointNumber: endPoint, pageNum: 1, pageSize: 1, }; let res = await pagepipelineInfo(params); if (res && res.code == 200) { pipeData.value = res.data[0]; let pipeCenter = turf.center(Terraformer.WKT.parse(pipeData.value.geometrys)).geometry.coordinates; let pipePopupDiv = document.getElementById('pipeInfo'); window.pipePopup = new mapboxL7.Popup({ html: pipePopupDiv, lngLat: { lng: pipeCenter[0], lat: pipeCenter[1], }, anchor: 'center', offsets: [0, 100], autoClose: false, }); newfiberMapbox.addPopup(pipePopup); newfiberMapbox.map.easeTo({ center: [pipeCenter[0] + 0.0005, pipeCenter[1]], zoom: 18, }); pipePopupShow.value = true; } }; let getPipePointInfo = async pointNumber => { let params = { pointNumber: pointNumber, pageNum: 1, pageSize: 1, }; let res = await pagepipelinePoint(params); if (res && res.code == 200) { pointData.value = res.data[0]; pointPopupShow.value = true; } }; // 天地、影像图切换 function changeMapType(val) { mapActive.value = val; if (val == 2) { bus.emit('setLayerVisible', { layername: 'newfiber-XYZLayer', isCheck: true }); newfiberMapbox.map.setMaxZoom(17.4); } else { bus.emit('setLayerVisible', { layername: 'newfiber-XYZLayer', isCheck: false }); newfiberMapbox.map.setMaxZoom(24); } } //取消弹窗 const closePopup = () => { pipePopupShow.value = false; let clearSelectedFeature = []; newfiberMapbox.getLayers().forEach(feature => { if (feature.newfiberId == 'highlight_linestring') { clearSelectedFeature.push(feature); } }); if (!!clearSelectedFeature.length) { clearSelectedFeature[0].setData({ type: 'FeatureCollection', features: [] }); } }; const closePointPopup = () => { pointPopupShow.value = false; let clearSelectedFeature = []; newfiberMapbox.getLayers().forEach(feature => { if (feature.newfiberId == 'highlight_point') { clearSelectedFeature.push(feature); } }); if (!!clearSelectedFeature.length) { clearSelectedFeature[0].setData({ type: 'FeatureCollection', features: [] }); } }; const resetSelectedPipe = () => { CodeArray.value = []; currentTool.value.pipeAnalyse.startCode = null; currentTool.value.pipeAnalyse.endCode = null; closePopup(); closePointPopup(); bus.emit('changeIfExpand'); }; const submitResult = async () => { console.log('currentTool.value.tool', currentTool.value.tool); if (currentTool.value.tool == '1' || currentTool.value.tool == '2') { await pipeAnalyseMethod(); setHighlight(); } }; //剖面中检查井点击高亮 const setHighlightFromPouM = async pointNumber => { let params = { pointNumber: pointNumber, pageNum: 1, pageSize: 1, }; let res = await pagepipelinePoint(params); if (res && res.code == 200) { let data = res.data[0]; let feature = turf.featureCollection([turf.feature(Terraformer.WKT.parse(data.geometrys), Object.assign({}, data))]); console.log('featurefeature', feature); let SelectedFeature = []; newfiberMapbox.getLayers().forEach(feature => { if (feature.newfiberId == 'highlight_point') { SelectedFeature.push(feature); } }); if (!!SelectedFeature.length) { SelectedFeature[0].setData(feature); } newfiberMapbox.map.setCenter([feature.features[0].geometry.coordinates[0], feature.features[0].geometry.coordinates[1] - 0.0001]); } }; onMounted(() => { bus.on('closePipeInfo', () => { closePopup(); closePointPopup(); }); nextTick(() => { bus.on('selectWallFromPouM', pointNumber => { setHighlightFromPouM(pointNumber); }); }); }); onBeforeUnmount(() => { bus.off('closePipeInfo'); bus.off('selectWallFromPouM'); newfiberMapbox.map.setMaxZoom(24); }); </script> <style lang="scss"> .el-popper { .typeMap { img { width: 100%; cursor: pointer; } .activeImg { border: 1px solid #00d1ff; } } } .healthPage { #pipeInfo { width: 350px; padding: 10px; background: rgba(0, 49, 78, 0.5); border: 1px solid #094065; z-index: 111; } #pointInfo { width: 350px; padding: 10px; background: rgba(0, 49, 78, 0.5); border: 1px solid #094065; z-index: 111; } .title { display: flex; .infoTitle { display: flex; align-items: center; height: 22px; font-size: 14px; font-family: PingFang SC; font-weight: 400; color: #ccf1ff; line-height: 22px; margin: 5px; width: 330px; &:before { display: block; content: ''; width: 3px; height: 16px; background: #00d1ff; margin-right: 10px; } } .closePopup { margin-right: 20px; height: 22px; cursor: pointer; } } } .infoContentHealth { display: flex; height: 20px; font-size: 14px; font-weight: 400; line-height: 20px; // color: #00d1ff; .infoName { width: 80px; margin: 3px; } .infoData { width: 80px; margin: 3px; } } .l7-popup-tip { display: none; } .l7-popup .l7-popup-content { padding: 0px; background: none; } .l7-popup .l7-popup-content .l7-popup-close-button { display: none; } </style> <style lang="scss" scoped> .flexs { display: flex; } .infoContent { width: 200px; } .pmfxpops { position: fixed; width: 450px; height: 100px; right: 20px; top: 120px; background: #00314e; z-index: 99; .pmfxpopshead { display: flex; justify-content: center; align-items: center; height: 50px; .pmfxpopsheadstart, .pmfxpopsheadend { margin: 0 10px; } .pmfxpopsheadborder { width: 150px; height: 30px; border: 1px solid #00d1ff; text-align: center; line-height: 30px; } .pmfxpopsheadimg { width: 23px; height: 15px; margin-left: 10px; } } .pmfxpopsbot { display: flex; justify-content: center; align-items: center; margin-top: 10px; cursor: pointer; .pmfxpopsbotbtn { width: 100px; height: 30px; line-height: 30px; border: 1px solid #00d1ff; margin: 0 10px; text-align: center; border-radius: 20px; } } } .isOpenBuildingTLs { width: 240px; position: absolute; bottom: 6%; right: 1.5%; z-index: 100; display: flex; justify-content: flex-end; cursor: pointer; .earthIcon { cursor: pointer; width: 63px; height: 62px; } } </style>