diff --git a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue index f696cda..c0fc940 100644 --- a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue +++ b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue @@ -56,6 +56,90 @@ + +
+
+ + {{ xmData.data.name }} + + + + + + +
+
+
+
时间：
+
+ 2024-11-24 +
+
+
+
收水范围：
+
+ 2000m² +
+
+
+
设计降雨量：
+
+ 37.8mm +
+
+
+
实际控制雨量：
+
+ + 0mm +
+
+
+
典型降雨径流总量控制率实际值：
+
+ 0% +
+
+
+
年径流总量控制率目标值：
+
+ 85% +
+
+
+
年径流污染削减率目标值：
+
+ 40% +
+
+
+
典型降雨径流污染物削减率实际值：
+
+ 0% +
+
+
+
出口总流量：
+
+ 0m³ +
+
+
+
结论：
+
+ -- +
+
+
+
@@ -71,17 +155,29 @@ import { rtuWarnConfigList } from '@/api/dataAnalysis/historyGj.js'; const areaFX = ref('0'); +const { proxy } = getCurrentInstance(); const areaList = ref([ { name: '古城蓝绿韧性示范片区', value: '0', lonlat: [114.35, 34.802] }, { name: '城东南污涝共治示范片区', value: '1', lonlat: [114.37, 34.792] }, { name: '综保区工业海绵化片区', value: '2', lonlat: [114.209, 34.782] }, { name: '金明品质提升示范片区', value: '3', lonlat: [114.285, 34.799] }, ]); -const projectFx = ref('1'); +const projectFx = ref('0'); +const undergroundPipeline = ref(true); const XmList = ref([ { name: '汴京路管网及道路海绵化改造', projectNo: 'GW06', value: '0', lon: 114.378601, lat: 34.793947 }, - { name: '金明广场(西南角)改造提升', projectNo: 'XMBH202412180002', value: '1', lon: 114.29615, lat: 34.801966 }, + { + name: '金明广场(西南角)改造提升', + projectNo: 'XMBH202412180002', + value: '1', + lon: 114.29615, + lat: 34.801966, + }, ]); +const xmData = reactive({ + visible: false, + data: {}, +}); const dateRain = ref(''); //海绵设施列表-汴京路 const hmssList = ref([]); @@ -106,6 +202,16 @@ const changeHmss = () => { getDataSS(); }; +//地表径流、地下管网切换 +const changePipeLayer = () => { + if (undergroundPipeline.value) { + bus.emit('setLayerVisible', { layername: xmData.data.name + '地表径流', isCheck: true }); + bus.emit('setLayerVisible', { layername: xmData.data.name + '地下管网', isCheck: false }); + } else { + bus.emit('setLayerVisible', { layername: xmData.data.name + '地表径流', isCheck: false }); + bus.emit('setLayerVisible', { layername: xmData.data.name + '地下管网', isCheck: true }); + } +}; // 海绵设施数据渲染 async function getDataSS() { loadingSS.value = true; @@ -209,7 +315,11 @@ let arr = data.filter(item => item.monitorPropertyName == name); return arr[0] ? arr[0].ylist : []; } - +//关闭气泡 +const closePopup = () => { + xmData.visible = false; + newfiberMapbox.popup.remove(); +}; // 片区分析点击 function changeArea(val) { // bus.emit('checkProjectArea', areaList.value[val]); @@ -227,6 +337,14 @@ bus.emit('ifShowLegendXM', true); //显示图例 //显示项目设施图 bus.emit('setLayerVisible', { layername: XmList.value[index].name, isCheck: true }); + undergroundPipeline.value = true; + //项目详情弹窗 + changePipeLayer(); + xmData.data = XmList.value[index]; + setPopupDom(proxy.$refs.xmPoPupBox, [0, 0]); + newfiberMapbox.popup.setLngLat({ lng: XmList.value[index].lon, lat: XmList.value[index].lat }); + newfiberMapbox.addPopup(newfiberMapbox.popup); + xmData.visible = true; // 地图移动过去 newfiberMapbox.map.easeTo({ center: [XmList.value[index].lon, XmList.value[index].lat], @@ -234,7 +352,13 @@ pitch: 30, }); } - +//创建弹窗 +const setPopupDom = (dom, offset) => { + newfiberMapbox.popup = new mapboxL7.Popup(); + nextTick(() => { + newfiberMapbox.popup.setDOMContent(dom); + }); +}; // 项目设施分析点击 function changeSSFX(val) { bus.emit('checkSSFX', { project: XmList.value[val] });