diff --git a/public/static/libs/mapbox/style/preventionSFQ.json b/public/static/libs/mapbox/style/preventionSFQ.json index 45e5a5b..c922df2 100644 --- a/public/static/libs/mapbox/style/preventionSFQ.json +++ b/public/static/libs/mapbox/style/preventionSFQ.json @@ -2,15 +2,10 @@ "params": { "basemap": "https://supermap2.wh-nf.cn:8090/bm", "mvt": "https://supermap0.wh-nf.cn:8090/vt", - "sprites": [ - "/static/libs/mapbox/style/sprite/sprite4" - ], + "sprites": ["/static/libs/mapbox/style/sprite/sprite4"], "init": { - "center": [ - 114.312, - 34.802 - ], - "zoom": 12.6, + "center": [114.362, 34.802], + "zoom": 11.5, "style": "/static/libs/mapbox/style/customs/night-style.json" }, "l7": { @@ -22,124 +17,51 @@ ] } }, - "orders": [ - [ - "poi_label" - ], - [ - "place_label_city" - ], - [ - "road_major_label" - ], - [ - "place_label_other" - ], - [ - "point" - ] - ], + "orders": [["poi_label"], ["place_label_city"], ["road_major_label"], ["place_label_other"], ["point"]], "filter": { "wsLine1": { - "layerName": [ - "pipeline_info", - "pipeline_point" - ], + "layerName": ["pipeline_info", "pipeline_point"], "filter": [ - [ - "WS", - "HS" - ], - [ - "污水点", - "合流点" - ] + ["WS", "HS"], + ["污水点", "合流点"] ] }, "ysLine1": { - "layerName": [ - "pipeline_info", - "pipeline_point" - ], - "filter": [ - [ - "YS" - ], - [ - "雨水点" - ] - ] + "layerName": ["pipeline_info", "pipeline_point"], + "filter": [["YS"], ["雨水点"]] }, "oldCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "老城区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["老城区"]], "easeTo": { - "center": [ - 113.933, - 30.926 - ], + "center": [113.933, 30.926], "zoom": 13.6, "pitch": 55 } }, "southCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "南城新区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["南城新区"]], "easeTo": { - "center": [ - 113.933, - 30.886 - ], + "center": [113.933, 30.886], "zoom": 13.6, "pitch": 55 } }, "newCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "东城新区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["东城新区"]], "easeTo": { - "center": [ - 113.983, - 30.896 - ], + "center": [113.983, 30.896], "zoom": 13.6, "pitch": 55 } }, "allCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "东城新区", - "南城新区", - "老城区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["东城新区", "南城新区", "老城区"]], "easeTo": { - "center": [ - 113.953, - 30.906 - ], + "center": [113.953, 30.906], "zoom": 13.6, "pitch": 55 } @@ -152,45 +74,25 @@ "type": "symbol", "minzoom": 0, "maxzoom": 24, - "filter": [ - "in", - "type", - "" - ], + "filter": ["in", "type", ""], "paint": { "text-color": "#ffffff" }, "layout": { - "icon-image": [ - "match", - [ - "get", - "type" - ], - "success_zishui", - "ysj", - "error_zishui", - "wsj", - "yuanTou" - ], + "icon-image": ["match", ["get", "type"], "success_zishui", "ysj", "error_zishui", "wsj", "yuanTou"], "text-allow-overlap": false, "icon-allow-overlap": false, "icon-anchor": "center", "icon-size": 0.8, "text-field": "{name}", - "text-font": [ - "KlokanTech Noto Sans Regular" - ], + "text-font": ["KlokanTech Noto Sans Regular"], "text-size": 16, "text-line-height": 3, "text-anchor": "bottom", "text-max-width": 50, - "text-offset": [ - 0, - -1 - ] + "text-offset": [0, -1] }, "mType": "geojson" } ] -} \ No newline at end of file +} diff --git a/public/static/libs/mapbox/style/preventionSFQ.json b/public/static/libs/mapbox/style/preventionSFQ.json index 45e5a5b..c922df2 100644 --- a/public/static/libs/mapbox/style/preventionSFQ.json +++ b/public/static/libs/mapbox/style/preventionSFQ.json @@ -2,15 +2,10 @@ "params": { "basemap": "https://supermap2.wh-nf.cn:8090/bm", "mvt": "https://supermap0.wh-nf.cn:8090/vt", - "sprites": [ - "/static/libs/mapbox/style/sprite/sprite4" - ], + "sprites": ["/static/libs/mapbox/style/sprite/sprite4"], "init": { - "center": [ - 114.312, - 34.802 - ], - "zoom": 12.6, + "center": [114.362, 34.802], + "zoom": 11.5, "style": "/static/libs/mapbox/style/customs/night-style.json" }, "l7": { @@ -22,124 +17,51 @@ ] } }, - "orders": [ - [ - "poi_label" - ], - [ - "place_label_city" - ], - [ - "road_major_label" - ], - [ - "place_label_other" - ], - [ - "point" - ] - ], + "orders": [["poi_label"], ["place_label_city"], ["road_major_label"], ["place_label_other"], ["point"]], "filter": { "wsLine1": { - "layerName": [ - "pipeline_info", - "pipeline_point" - ], + "layerName": ["pipeline_info", "pipeline_point"], "filter": [ - [ - "WS", - "HS" - ], - [ - "污水点", - "合流点" - ] + ["WS", "HS"], + ["污水点", "合流点"] ] }, "ysLine1": { - "layerName": [ - "pipeline_info", - "pipeline_point" - ], - "filter": [ - [ - "YS" - ], - [ - "雨水点" - ] - ] + "layerName": ["pipeline_info", "pipeline_point"], + "filter": [["YS"], ["雨水点"]] }, "oldCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "老城区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["老城区"]], "easeTo": { - "center": [ - 113.933, - 30.926 - ], + "center": [113.933, 30.926], "zoom": 13.6, "pitch": 55 } }, "southCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "南城新区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["南城新区"]], "easeTo": { - "center": [ - 113.933, - 30.886 - ], + "center": [113.933, 30.886], "zoom": 13.6, "pitch": 55 } }, "newCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "东城新区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["东城新区"]], "easeTo": { - "center": [ - 113.983, - 30.896 - ], + "center": [113.983, 30.896], "zoom": 13.6, "pitch": 55 } }, "allCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "东城新区", - "南城新区", - "老城区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["东城新区", "南城新区", "老城区"]], "easeTo": { - "center": [ - 113.953, - 30.906 - ], + "center": [113.953, 30.906], "zoom": 13.6, "pitch": 55 } @@ -152,45 +74,25 @@ "type": "symbol", "minzoom": 0, "maxzoom": 24, - "filter": [ - "in", - "type", - "" - ], + "filter": ["in", "type", ""], "paint": { "text-color": "#ffffff" }, "layout": { - "icon-image": [ - "match", - [ - "get", - "type" - ], - "success_zishui", - "ysj", - "error_zishui", - "wsj", - "yuanTou" - ], + "icon-image": ["match", ["get", "type"], "success_zishui", "ysj", "error_zishui", "wsj", "yuanTou"], "text-allow-overlap": false, "icon-allow-overlap": false, "icon-anchor": "center", "icon-size": 0.8, "text-field": "{name}", - "text-font": [ - "KlokanTech Noto Sans Regular" - ], + "text-font": ["KlokanTech Noto Sans Regular"], "text-size": 16, "text-line-height": 3, "text-anchor": "bottom", "text-max-width": 50, - "text-offset": [ - 0, - -1 - ] + "text-offset": [0, -1] }, "mType": "geojson" } ] -} \ No newline at end of file +} diff --git a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue index 772d11b..8ac6d45 100644 --- a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue +++ b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue @@ -48,10 +48,11 @@ import bus from '@/bus'; import { quotaCommomInfoList, hmyztQuotaDataList } from '@/api/sponeScreen/jxkh.js'; import { waterloggingPointList } from '@/api/sponeScreen/syntherticData.js'; -import { waterLoggingCleanProject } from '@/api/spongePerformance/prevention'; +import { waterLoggingCleanProject, moduleFloodResult } from '@/api/spongePerformance/prevention'; import kaifengFangHong from '@/assets/geojson/kaifeng/kaifengFangHong.json'; //防洪标准 import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js'; import tuLi72X from '@/assets/newImgs/tuLi72X.png'; +import kaifengPSFQ1 from '@/assets/geojson/kaifeng/kaifengPSFQ1.json'; const { proxy } = getCurrentInstance(); const tabList = ref([ @@ -82,11 +83,12 @@ }, 1000); } else if (curTab.value == 'nlbz') { // 内涝防治标准 - bus.emit('setIniteLayer', [{ layername: 'cesiumPaishuiArea2', show: false }]); + getNLModalData(); + setTimeout(() => { newfiberMapbox.map.easeTo({ - center: [114.315, 34.802], - zoom: 11.2, + center: [114.315, 34.782], + zoom: 10.7, }); }, 200); } else { @@ -202,7 +204,7 @@ }, }); }; -//添加弹窗 +//添加弹窗内涝点 const addwaterlogingPopup = geojson => { console.log('-----', newfiberMapbox.popupService.popups); newfiberMapbox.popupService.popups.forEach(popup => { @@ -233,6 +235,111 @@ }); }; +// 内涝标准相关 +// 数据获取 +async function getNLModalData() { + let res = await moduleFloodResult(); + if (res && res.code == 200) { + let datas = res.data; + let moduleGeojson = getFeatureGeojson(datas[0].partitionList); + let moduleBoundaryGeojson = getGeojsonBoundary(moduleGeojson); + let modulelabelGeojson = getGeojsonCenter(moduleGeojson); + //gis渲染内涝区域 + newfiberMapBoxVectorLayer.addGeojsonPolygon('builtCity', kaifengPSFQ1); //建成区图层渲染 + addModuleLayer(moduleGeojson, 'moduleFlood', '#DFA8FF'); + addModuleBoundary(moduleBoundaryGeojson, 'moduleFloodBoundary'); + addGeojsonLable(modulelabelGeojson, 'moduleFloodlabel', '#ffffff'); + } +} +//添加模型法地图 +const addModuleLayer = (geojson, layerName, color) => { + !newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson }); + !newfiberMapbox.map.getLayer(layerName) && + newfiberMapbox.map.addLayer({ + id: layerName, + type: 'fill', + source: layerName, + paint: { + 'fill-color': color, + 'fill-opacity': 1, + }, + }); +}; +const addModuleBoundary = (geojson, layerName) => { + !newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson }); + !newfiberMapbox.map.getLayer(layerName) && + newfiberMapbox.map.addLayer({ + id: layerName, + type: 'line', + source: layerName, + paint: { + 'line-color': 'rgba(94, 56, 255, 1)', //边界颜色 + 'line-width': 3, + }, + }); +}; +const addGeojsonLable = (geojson, layerName, color) => { + !newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson }); + !newfiberMapbox.map.getLayer(layerName) && + !newfiberMapbox.map.addLayer({ + id: layerName, + type: 'symbol', + source: layerName, + paint: { + 'text-color': geojson.features[0].properties.color ? ['get', 'color'] : color, + 'text-halo-color': 'rgba(0,0,0,1)', + 'text-halo-width': 2, + }, + layout: { + 'text-allow-overlap': true, + 'text-field': ['get', 'partitionName'], + 'text-font': ['KlokanTech Noto Sans Regular'], + 'text-size': 16, + 'text-line-height': 3, + 'text-anchor': 'bottom', + 'text-max-width': 50, + 'text-offset': [0, -1], + }, + }); +}; +//获取geojson +const getFeatureGeojson = dataList => { + let features = []; + dataList.forEach(data => { + let feature = turf.feature(Terraformer.WKT.parse(data.geometry), data); + features.push(feature); + }); + return { + type: 'FeatureCollection', + features: features, + }; +}; +//获取geojson边界 +const getGeojsonBoundary = geojson => { + let features = []; + geojson.features.forEach(item => { + let line = turf.polygonToLine(item.geometry); + features.push(line); + }); + return { + type: 'FeatureCollection', + features: features, + }; +}; +//获取geojson中心点 +const getGeojsonCenter = geojson => { + let features = []; + geojson.features.forEach(item => { + let center = turf.center(item); + center.properties = item.properties; + features.push(center); + }); + return { + type: 'FeatureCollection', + features: features, + }; +}; + onMounted(() => { getWaterlogging(); setTimeout(() => { diff --git a/public/static/libs/mapbox/style/preventionSFQ.json b/public/static/libs/mapbox/style/preventionSFQ.json index 45e5a5b..c922df2 100644 --- a/public/static/libs/mapbox/style/preventionSFQ.json +++ b/public/static/libs/mapbox/style/preventionSFQ.json @@ -2,15 +2,10 @@ "params": { "basemap": "https://supermap2.wh-nf.cn:8090/bm", "mvt": "https://supermap0.wh-nf.cn:8090/vt", - "sprites": [ - "/static/libs/mapbox/style/sprite/sprite4" - ], + "sprites": ["/static/libs/mapbox/style/sprite/sprite4"], "init": { - "center": [ - 114.312, - 34.802 - ], - "zoom": 12.6, + "center": [114.362, 34.802], + "zoom": 11.5, "style": "/static/libs/mapbox/style/customs/night-style.json" }, "l7": { @@ -22,124 +17,51 @@ ] } }, - "orders": [ - [ - "poi_label" - ], - [ - "place_label_city" - ], - [ - "road_major_label" - ], - [ - "place_label_other" - ], - [ - "point" - ] - ], + "orders": [["poi_label"], ["place_label_city"], ["road_major_label"], ["place_label_other"], ["point"]], "filter": { "wsLine1": { - "layerName": [ - "pipeline_info", - "pipeline_point" - ], + "layerName": ["pipeline_info", "pipeline_point"], "filter": [ - [ - "WS", - "HS" - ], - [ - "污水点", - "合流点" - ] + ["WS", "HS"], + ["污水点", "合流点"] ] }, "ysLine1": { - "layerName": [ - "pipeline_info", - "pipeline_point" - ], - "filter": [ - [ - "YS" - ], - [ - "雨水点" - ] - ] + "layerName": ["pipeline_info", "pipeline_point"], + "filter": [["YS"], ["雨水点"]] }, "oldCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "老城区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["老城区"]], "easeTo": { - "center": [ - 113.933, - 30.926 - ], + "center": [113.933, 30.926], "zoom": 13.6, "pitch": 55 } }, "southCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "南城新区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["南城新区"]], "easeTo": { - "center": [ - 113.933, - 30.886 - ], + "center": [113.933, 30.886], "zoom": 13.6, "pitch": 55 } }, "newCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "东城新区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["东城新区"]], "easeTo": { - "center": [ - 113.983, - 30.896 - ], + "center": [113.983, 30.896], "zoom": 13.6, "pitch": 55 } }, "allCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "东城新区", - "南城新区", - "老城区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["东城新区", "南城新区", "老城区"]], "easeTo": { - "center": [ - 113.953, - 30.906 - ], + "center": [113.953, 30.906], "zoom": 13.6, "pitch": 55 } @@ -152,45 +74,25 @@ "type": "symbol", "minzoom": 0, "maxzoom": 24, - "filter": [ - "in", - "type", - "" - ], + "filter": ["in", "type", ""], "paint": { "text-color": "#ffffff" }, "layout": { - "icon-image": [ - "match", - [ - "get", - "type" - ], - "success_zishui", - "ysj", - "error_zishui", - "wsj", - "yuanTou" - ], + "icon-image": ["match", ["get", "type"], "success_zishui", "ysj", "error_zishui", "wsj", "yuanTou"], "text-allow-overlap": false, "icon-allow-overlap": false, "icon-anchor": "center", "icon-size": 0.8, "text-field": "{name}", - "text-font": [ - "KlokanTech Noto Sans Regular" - ], + "text-font": ["KlokanTech Noto Sans Regular"], "text-size": 16, "text-line-height": 3, "text-anchor": "bottom", "text-max-width": 50, - "text-offset": [ - 0, - -1 - ] + "text-offset": [0, -1] }, "mType": "geojson" } ] -} \ No newline at end of file +} diff --git a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue index 772d11b..8ac6d45 100644 --- a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue +++ b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue @@ -48,10 +48,11 @@ import bus from '@/bus'; import { quotaCommomInfoList, hmyztQuotaDataList } from '@/api/sponeScreen/jxkh.js'; import { waterloggingPointList } from '@/api/sponeScreen/syntherticData.js'; -import { waterLoggingCleanProject } from '@/api/spongePerformance/prevention'; +import { waterLoggingCleanProject, moduleFloodResult } from '@/api/spongePerformance/prevention'; import kaifengFangHong from '@/assets/geojson/kaifeng/kaifengFangHong.json'; //防洪标准 import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js'; import tuLi72X from '@/assets/newImgs/tuLi72X.png'; +import kaifengPSFQ1 from '@/assets/geojson/kaifeng/kaifengPSFQ1.json'; const { proxy } = getCurrentInstance(); const tabList = ref([ @@ -82,11 +83,12 @@ }, 1000); } else if (curTab.value == 'nlbz') { // 内涝防治标准 - bus.emit('setIniteLayer', [{ layername: 'cesiumPaishuiArea2', show: false }]); + getNLModalData(); + setTimeout(() => { newfiberMapbox.map.easeTo({ - center: [114.315, 34.802], - zoom: 11.2, + center: [114.315, 34.782], + zoom: 10.7, }); }, 200); } else { @@ -202,7 +204,7 @@ }, }); }; -//添加弹窗 +//添加弹窗内涝点 const addwaterlogingPopup = geojson => { console.log('-----', newfiberMapbox.popupService.popups); newfiberMapbox.popupService.popups.forEach(popup => { @@ -233,6 +235,111 @@ }); }; +// 内涝标准相关 +// 数据获取 +async function getNLModalData() { + let res = await moduleFloodResult(); + if (res && res.code == 200) { + let datas = res.data; + let moduleGeojson = getFeatureGeojson(datas[0].partitionList); + let moduleBoundaryGeojson = getGeojsonBoundary(moduleGeojson); + let modulelabelGeojson = getGeojsonCenter(moduleGeojson); + //gis渲染内涝区域 + newfiberMapBoxVectorLayer.addGeojsonPolygon('builtCity', kaifengPSFQ1); //建成区图层渲染 + addModuleLayer(moduleGeojson, 'moduleFlood', '#DFA8FF'); + addModuleBoundary(moduleBoundaryGeojson, 'moduleFloodBoundary'); + addGeojsonLable(modulelabelGeojson, 'moduleFloodlabel', '#ffffff'); + } +} +//添加模型法地图 +const addModuleLayer = (geojson, layerName, color) => { + !newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson }); + !newfiberMapbox.map.getLayer(layerName) && + newfiberMapbox.map.addLayer({ + id: layerName, + type: 'fill', + source: layerName, + paint: { + 'fill-color': color, + 'fill-opacity': 1, + }, + }); +}; +const addModuleBoundary = (geojson, layerName) => { + !newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson }); + !newfiberMapbox.map.getLayer(layerName) && + newfiberMapbox.map.addLayer({ + id: layerName, + type: 'line', + source: layerName, + paint: { + 'line-color': 'rgba(94, 56, 255, 1)', //边界颜色 + 'line-width': 3, + }, + }); +}; +const addGeojsonLable = (geojson, layerName, color) => { + !newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson }); + !newfiberMapbox.map.getLayer(layerName) && + !newfiberMapbox.map.addLayer({ + id: layerName, + type: 'symbol', + source: layerName, + paint: { + 'text-color': geojson.features[0].properties.color ? ['get', 'color'] : color, + 'text-halo-color': 'rgba(0,0,0,1)', + 'text-halo-width': 2, + }, + layout: { + 'text-allow-overlap': true, + 'text-field': ['get', 'partitionName'], + 'text-font': ['KlokanTech Noto Sans Regular'], + 'text-size': 16, + 'text-line-height': 3, + 'text-anchor': 'bottom', + 'text-max-width': 50, + 'text-offset': [0, -1], + }, + }); +}; +//获取geojson +const getFeatureGeojson = dataList => { + let features = []; + dataList.forEach(data => { + let feature = turf.feature(Terraformer.WKT.parse(data.geometry), data); + features.push(feature); + }); + return { + type: 'FeatureCollection', + features: features, + }; +}; +//获取geojson边界 +const getGeojsonBoundary = geojson => { + let features = []; + geojson.features.forEach(item => { + let line = turf.polygonToLine(item.geometry); + features.push(line); + }); + return { + type: 'FeatureCollection', + features: features, + }; +}; +//获取geojson中心点 +const getGeojsonCenter = geojson => { + let features = []; + geojson.features.forEach(item => { + let center = turf.center(item); + center.properties = item.properties; + features.push(center); + }); + return { + type: 'FeatureCollection', + features: features, + }; +}; + onMounted(() => { getWaterlogging(); setTimeout(() => { diff --git a/src/views/sponeScreen/evaluationKH/index.vue b/src/views/sponeScreen/evaluationKH/index.vue index f078cd7..2b78ea4 100644 --- a/src/views/sponeScreen/evaluationKH/index.vue +++ b/src/views/sponeScreen/evaluationKH/index.vue @@ -83,7 +83,7 @@ } // 内涝防治标准 - bus.emit('setIniteLayer', [{ layername: 'cesiumPaishuiArea2', show: true }]); + newfiberMapBoxVectorLayer.removeByIds(['builtCity', 'moduleFloodBoundary', 'moduleFloodlabel', 'moduleFlood']); }; onMounted(() => { diff --git a/public/static/libs/mapbox/style/preventionSFQ.json b/public/static/libs/mapbox/style/preventionSFQ.json index 45e5a5b..c922df2 100644 --- a/public/static/libs/mapbox/style/preventionSFQ.json +++ b/public/static/libs/mapbox/style/preventionSFQ.json @@ -2,15 +2,10 @@ "params": { "basemap": "https://supermap2.wh-nf.cn:8090/bm", "mvt": "https://supermap0.wh-nf.cn:8090/vt", - "sprites": [ - "/static/libs/mapbox/style/sprite/sprite4" - ], + "sprites": ["/static/libs/mapbox/style/sprite/sprite4"], "init": { - "center": [ - 114.312, - 34.802 - ], - "zoom": 12.6, + "center": [114.362, 34.802], + "zoom": 11.5, "style": "/static/libs/mapbox/style/customs/night-style.json" }, "l7": { @@ -22,124 +17,51 @@ ] } }, - "orders": [ - [ - "poi_label" - ], - [ - "place_label_city" - ], - [ - "road_major_label" - ], - [ - "place_label_other" - ], - [ - "point" - ] - ], + "orders": [["poi_label"], ["place_label_city"], ["road_major_label"], ["place_label_other"], ["point"]], "filter": { "wsLine1": { - "layerName": [ - "pipeline_info", - "pipeline_point" - ], + "layerName": ["pipeline_info", "pipeline_point"], "filter": [ - [ - "WS", - "HS" - ], - [ - "污水点", - "合流点" - ] + ["WS", "HS"], + ["污水点", "合流点"] ] }, "ysLine1": { - "layerName": [ - "pipeline_info", - "pipeline_point" - ], - "filter": [ - [ - "YS" - ], - [ - "雨水点" - ] - ] + "layerName": ["pipeline_info", "pipeline_point"], + "filter": [["YS"], ["雨水点"]] }, "oldCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "老城区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["老城区"]], "easeTo": { - "center": [ - 113.933, - 30.926 - ], + "center": [113.933, 30.926], "zoom": 13.6, "pitch": 55 } }, "southCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "南城新区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["南城新区"]], "easeTo": { - "center": [ - 113.933, - 30.886 - ], + "center": [113.933, 30.886], "zoom": 13.6, "pitch": 55 } }, "newCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "东城新区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["东城新区"]], "easeTo": { - "center": [ - 113.983, - 30.896 - ], + "center": [113.983, 30.896], "zoom": 13.6, "pitch": 55 } }, "allCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "东城新区", - "南城新区", - "老城区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["东城新区", "南城新区", "老城区"]], "easeTo": { - "center": [ - 113.953, - 30.906 - ], + "center": [113.953, 30.906], "zoom": 13.6, "pitch": 55 } @@ -152,45 +74,25 @@ "type": "symbol", "minzoom": 0, "maxzoom": 24, - "filter": [ - "in", - "type", - "" - ], + "filter": ["in", "type", ""], "paint": { "text-color": "#ffffff" }, "layout": { - "icon-image": [ - "match", - [ - "get", - "type" - ], - "success_zishui", - "ysj", - "error_zishui", - "wsj", - "yuanTou" - ], + "icon-image": ["match", ["get", "type"], "success_zishui", "ysj", "error_zishui", "wsj", "yuanTou"], "text-allow-overlap": false, "icon-allow-overlap": false, "icon-anchor": "center", "icon-size": 0.8, "text-field": "{name}", - "text-font": [ - "KlokanTech Noto Sans Regular" - ], + "text-font": ["KlokanTech Noto Sans Regular"], "text-size": 16, "text-line-height": 3, "text-anchor": "bottom", "text-max-width": 50, - "text-offset": [ - 0, - -1 - ] + "text-offset": [0, -1] }, "mType": "geojson" } ] -} \ No newline at end of file +} diff --git a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue index 772d11b..8ac6d45 100644 --- a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue +++ b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue @@ -48,10 +48,11 @@ import bus from '@/bus'; import { quotaCommomInfoList, hmyztQuotaDataList } from '@/api/sponeScreen/jxkh.js'; import { waterloggingPointList } from '@/api/sponeScreen/syntherticData.js'; -import { waterLoggingCleanProject } from '@/api/spongePerformance/prevention'; +import { waterLoggingCleanProject, moduleFloodResult } from '@/api/spongePerformance/prevention'; import kaifengFangHong from '@/assets/geojson/kaifeng/kaifengFangHong.json'; //防洪标准 import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js'; import tuLi72X from '@/assets/newImgs/tuLi72X.png'; +import kaifengPSFQ1 from '@/assets/geojson/kaifeng/kaifengPSFQ1.json'; const { proxy } = getCurrentInstance(); const tabList = ref([ @@ -82,11 +83,12 @@ }, 1000); } else if (curTab.value == 'nlbz') { // 内涝防治标准 - bus.emit('setIniteLayer', [{ layername: 'cesiumPaishuiArea2', show: false }]); + getNLModalData(); + setTimeout(() => { newfiberMapbox.map.easeTo({ - center: [114.315, 34.802], - zoom: 11.2, + center: [114.315, 34.782], + zoom: 10.7, }); }, 200); } else { @@ -202,7 +204,7 @@ }, }); }; -//添加弹窗 +//添加弹窗内涝点 const addwaterlogingPopup = geojson => { console.log('-----', newfiberMapbox.popupService.popups); newfiberMapbox.popupService.popups.forEach(popup => { @@ -233,6 +235,111 @@ }); }; +// 内涝标准相关 +// 数据获取 +async function getNLModalData() { + let res = await moduleFloodResult(); + if (res && res.code == 200) { + let datas = res.data; + let moduleGeojson = getFeatureGeojson(datas[0].partitionList); + let moduleBoundaryGeojson = getGeojsonBoundary(moduleGeojson); + let modulelabelGeojson = getGeojsonCenter(moduleGeojson); + //gis渲染内涝区域 + newfiberMapBoxVectorLayer.addGeojsonPolygon('builtCity', kaifengPSFQ1); //建成区图层渲染 + addModuleLayer(moduleGeojson, 'moduleFlood', '#DFA8FF'); + addModuleBoundary(moduleBoundaryGeojson, 'moduleFloodBoundary'); + addGeojsonLable(modulelabelGeojson, 'moduleFloodlabel', '#ffffff'); + } +} +//添加模型法地图 +const addModuleLayer = (geojson, layerName, color) => { + !newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson }); + !newfiberMapbox.map.getLayer(layerName) && + newfiberMapbox.map.addLayer({ + id: layerName, + type: 'fill', + source: layerName, + paint: { + 'fill-color': color, + 'fill-opacity': 1, + }, + }); +}; +const addModuleBoundary = (geojson, layerName) => { + !newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson }); + !newfiberMapbox.map.getLayer(layerName) && + newfiberMapbox.map.addLayer({ + id: layerName, + type: 'line', + source: layerName, + paint: { + 'line-color': 'rgba(94, 56, 255, 1)', //边界颜色 + 'line-width': 3, + }, + }); +}; +const addGeojsonLable = (geojson, layerName, color) => { + !newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson }); + !newfiberMapbox.map.getLayer(layerName) && + !newfiberMapbox.map.addLayer({ + id: layerName, + type: 'symbol', + source: layerName, + paint: { + 'text-color': geojson.features[0].properties.color ? ['get', 'color'] : color, + 'text-halo-color': 'rgba(0,0,0,1)', + 'text-halo-width': 2, + }, + layout: { + 'text-allow-overlap': true, + 'text-field': ['get', 'partitionName'], + 'text-font': ['KlokanTech Noto Sans Regular'], + 'text-size': 16, + 'text-line-height': 3, + 'text-anchor': 'bottom', + 'text-max-width': 50, + 'text-offset': [0, -1], + }, + }); +}; +//获取geojson +const getFeatureGeojson = dataList => { + let features = []; + dataList.forEach(data => { + let feature = turf.feature(Terraformer.WKT.parse(data.geometry), data); + features.push(feature); + }); + return { + type: 'FeatureCollection', + features: features, + }; +}; +//获取geojson边界 +const getGeojsonBoundary = geojson => { + let features = []; + geojson.features.forEach(item => { + let line = turf.polygonToLine(item.geometry); + features.push(line); + }); + return { + type: 'FeatureCollection', + features: features, + }; +}; +//获取geojson中心点 +const getGeojsonCenter = geojson => { + let features = []; + geojson.features.forEach(item => { + let center = turf.center(item); + center.properties = item.properties; + features.push(center); + }); + return { + type: 'FeatureCollection', + features: features, + }; +}; + onMounted(() => { getWaterlogging(); setTimeout(() => { diff --git a/src/views/sponeScreen/evaluationKH/index.vue b/src/views/sponeScreen/evaluationKH/index.vue index f078cd7..2b78ea4 100644 --- a/src/views/sponeScreen/evaluationKH/index.vue +++ b/src/views/sponeScreen/evaluationKH/index.vue @@ -83,7 +83,7 @@ } // 内涝防治标准 - bus.emit('setIniteLayer', [{ layername: 'cesiumPaishuiArea2', show: true }]); + newfiberMapBoxVectorLayer.removeByIds(['builtCity', 'moduleFloodBoundary', 'moduleFloodlabel', 'moduleFlood']); }; onMounted(() => { diff --git a/src/views/sponeScreen/projectHM/projectFX.vue b/src/views/sponeScreen/projectHM/projectFX.vue index 37a26ca..ef051f6 100644 --- a/src/views/sponeScreen/projectHM/projectFX.vue +++ b/src/views/sponeScreen/projectHM/projectFX.vue @@ -3,7 +3,10 @@
-
{{ rainDate }} 降雨起止时间1:15-3:45,24小时累计降雨量20.4mm,降雨等级 中雨
+
+ {{ rainDate }} 降雨起止时间1:15-3:45,24小时累计降雨量20.4mm,降雨等级 + 中雨 +
1 项目设计最大控制容积 3796.52m³ @@ -27,50 +30,63 @@ src="@/assets/newImgs/pumpGY/water.png" alt="左" class="waterFlow" - :style="{ height: (120 * (nameToData(station1.propertyMonitorList, '水位')[0] || 0.2)) / 1.1 + 'px', left: '73px', width: '846px' }" + :style="{ + height: (120 * (nameToData(station1.propertyMonitorList, '水位')[valIndex1] || 0.2)) / 1.1 + 'px', + left: '73px', + width: '846px', + }" /> 右
-

实时水深:{{ nameToData(station1.propertyMonitorList, '水位')[0] || '--' }}米

-

实时水深:{{ nameToData(station5.propertyMonitorList, '水位')[0] || '--' }}米

+

实时水深:{{ nameToData(station1.propertyMonitorList, '水位')[valIndex1] || '--' }}米

+

实时水深:{{ nameToData(station5.propertyMonitorList, '水位')[valIndex5] || '--' }}米

- 水深:{{ nameToData(station1.propertyMonitorList, '水位')[0] || '--' }} m - 流速:{{ nameToData(station1.propertyMonitorList, '流速')[0] || '--' }} m/s - SS:{{ nameToData(station1.propertyMonitorList, 'SS')[0] || '--' }} mg/L + 水深:{{ nameToData(station1.propertyMonitorList, '水位')[valIndex1] || '--' }} m + 流速:{{ nameToData(station1.propertyMonitorList, '流速')[valIndex1] || '--' }} m/s + SS:{{ nameToData(station1.propertyMonitorList, 'SS')[valIndex1] || '--' }} mg/L + 时间:{{ station1.propertyMonitorXList[valIndex1].slice(10) || '--' }} 管径:2.4*1.1m
- 水深:{{ nameToData(station2.propertyMonitorList, '水位')[0] || '--' }} m - 流速:{{ nameToData(station2.propertyMonitorList, '流速')[0] || '--' }} m/s - SS:{{ nameToData(station2.propertyMonitorList, 'SS')[0] || '--' }} mg/L + 水深:{{ nameToData(station2.propertyMonitorList, '水位')[valIndex2] || '--' }} m + 流速:{{ nameToData(station2.propertyMonitorList, '流速')[valIndex2] || '--' }} m/s + SS:{{ nameToData(station2.propertyMonitorList, 'SS')[valIndex2] || '--' }} mg/L + 时间:{{ station2.propertyMonitorXList[valIndex2].slice(10) || '--' }} 管径:2.4*1.1m
- 水深:{{ nameToData(station3.propertyMonitorList, '水位')[0] || '--' }} m - 流速:{{ nameToData(station3.propertyMonitorList, '流速')[0] || '--' }} m/s - SS:{{ nameToData(station3.propertyMonitorList, 'SS')[0] || '--' }} mg/L + 水深:{{ nameToData(station3.propertyMonitorList, '水位')[valIndex3] || '--' }} m + 流速:{{ nameToData(station3.propertyMonitorList, '流速')[valIndex3] || '--' }} m/s + SS:{{ nameToData(station3.propertyMonitorList, 'SS')[valIndex3] || '--' }} mg/L + 时间:{{ station3.propertyMonitorXList[valIndex3].slice(10) || '--' }} 管径:DN500
水深:{{ '--' }} m 流速:{{ '--' }} m/s SS:{{ '--' }} mg/L + 时间: {{ '--' }} 管径:3*1.8m
- 水深:{{ nameToData(station5.propertyMonitorList, '水位')[0] || '--' }} m - 流速:{{ nameToData(station5.propertyMonitorList, '流速')[0] || '--' }} m/s - SS:{{ nameToData(station5.propertyMonitorList, 'SS')[0] || '--' }} mg/L + 水深:{{ nameToData(station5.propertyMonitorList, '水位')[valIndex5] || '--' }} m + 流速:{{ nameToData(station5.propertyMonitorList, '流速')[valIndex5] || '--' }} m/s + SS:{{ nameToData(station5.propertyMonitorList, 'SS')[valIndex5] || '--' }} mg/L + 时间:{{ station5.propertyMonitorXList[valIndex5].slice(10) || '--' }} 管径:3*1.8m
@@ -117,11 +133,16 @@ const rainDate = ref(''); const { proxy } = getCurrentInstance(); const timer = ref(null); -const station1 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station2 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station3 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station4 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station5 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); +const valIndex1 = ref(0); +const valIndex2 = ref(0); +const valIndex3 = ref(0); +const valIndex4 = ref(0); +const valIndex5 = ref(0); +const station1 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station2 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station3 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station4 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station5 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); // 获取实时数据 function getRealData() { @@ -135,6 +156,11 @@ graphicReport(params).then(res => { if (res.data.propertyMonitorList.length > 0) { station1.value = res.data; + // 取最大的值 + let max = Math.max(...nameToData(station1.value.propertyMonitorList, '水位')); + valIndex1.value = nameToData(station1.value.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); } }); @@ -142,6 +168,11 @@ graphicReport(params).then(res => { if (res.data.propertyMonitorList.length > 0) { station2.value = res.data; + // 取最大的值 + let max = Math.max(...nameToData(station2.value.propertyMonitorList, '水位')); + valIndex2.value = nameToData(station2.value.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); } }); @@ -149,6 +180,11 @@ graphicReport(params).then(res => { if (res.data.propertyMonitorList.length > 0) { station3.value = res.data; + // 取最大的值 + let max = Math.max(...nameToData(station3.value.propertyMonitorList, '水位')); + valIndex3.value = nameToData(station3.value.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); } }); @@ -158,6 +194,11 @@ graphicReport(params).then(res => { if (res.data.propertyMonitorList.length > 0) { station5.value = res.data; + // 取最大的值 + let max = Math.max(...nameToData(station5.value.propertyMonitorList, '水位')); + valIndex5.value = nameToData(station5.value.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); } }); } @@ -165,7 +206,8 @@ // 公共方法,根据监测名称来匹配对应的数值 function nameToData(data, name) { let arr = data.filter(item => item.monitorPropertyName == name); - return arr[0] ? arr[0].ylist : []; + let lists = arr[0] ? arr[0].ylist : []; + return lists; } // 海绵设施点击 diff --git a/public/static/libs/mapbox/style/preventionSFQ.json b/public/static/libs/mapbox/style/preventionSFQ.json index 45e5a5b..c922df2 100644 --- a/public/static/libs/mapbox/style/preventionSFQ.json +++ b/public/static/libs/mapbox/style/preventionSFQ.json @@ -2,15 +2,10 @@ "params": { "basemap": "https://supermap2.wh-nf.cn:8090/bm", "mvt": "https://supermap0.wh-nf.cn:8090/vt", - "sprites": [ - "/static/libs/mapbox/style/sprite/sprite4" - ], + "sprites": ["/static/libs/mapbox/style/sprite/sprite4"], "init": { - "center": [ - 114.312, - 34.802 - ], - "zoom": 12.6, + "center": [114.362, 34.802], + "zoom": 11.5, "style": "/static/libs/mapbox/style/customs/night-style.json" }, "l7": { @@ -22,124 +17,51 @@ ] } }, - "orders": [ - [ - "poi_label" - ], - [ - "place_label_city" - ], - [ - "road_major_label" - ], - [ - "place_label_other" - ], - [ - "point" - ] - ], + "orders": [["poi_label"], ["place_label_city"], ["road_major_label"], ["place_label_other"], ["point"]], "filter": { "wsLine1": { - "layerName": [ - "pipeline_info", - "pipeline_point" - ], + "layerName": ["pipeline_info", "pipeline_point"], "filter": [ - [ - "WS", - "HS" - ], - [ - "污水点", - "合流点" - ] + ["WS", "HS"], + ["污水点", "合流点"] ] }, "ysLine1": { - "layerName": [ - "pipeline_info", - "pipeline_point" - ], - "filter": [ - [ - "YS" - ], - [ - "雨水点" - ] - ] + "layerName": ["pipeline_info", "pipeline_point"], + "filter": [["YS"], ["雨水点"]] }, "oldCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "老城区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["老城区"]], "easeTo": { - "center": [ - 113.933, - 30.926 - ], + "center": [113.933, 30.926], "zoom": 13.6, "pitch": 55 } }, "southCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "南城新区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["南城新区"]], "easeTo": { - "center": [ - 113.933, - 30.886 - ], + "center": [113.933, 30.886], "zoom": 13.6, "pitch": 55 } }, "newCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "东城新区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["东城新区"]], "easeTo": { - "center": [ - 113.983, - 30.896 - ], + "center": [113.983, 30.896], "zoom": 13.6, "pitch": 55 } }, "allCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "东城新区", - "南城新区", - "老城区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["东城新区", "南城新区", "老城区"]], "easeTo": { - "center": [ - 113.953, - 30.906 - ], + "center": [113.953, 30.906], "zoom": 13.6, "pitch": 55 } @@ -152,45 +74,25 @@ "type": "symbol", "minzoom": 0, "maxzoom": 24, - "filter": [ - "in", - "type", - "" - ], + "filter": ["in", "type", ""], "paint": { "text-color": "#ffffff" }, "layout": { - "icon-image": [ - "match", - [ - "get", - "type" - ], - "success_zishui", - "ysj", - "error_zishui", - "wsj", - "yuanTou" - ], + "icon-image": ["match", ["get", "type"], "success_zishui", "ysj", "error_zishui", "wsj", "yuanTou"], "text-allow-overlap": false, "icon-allow-overlap": false, "icon-anchor": "center", "icon-size": 0.8, "text-field": "{name}", - "text-font": [ - "KlokanTech Noto Sans Regular" - ], + "text-font": ["KlokanTech Noto Sans Regular"], "text-size": 16, "text-line-height": 3, "text-anchor": "bottom", "text-max-width": 50, - "text-offset": [ - 0, - -1 - ] + "text-offset": [0, -1] }, "mType": "geojson" } ] -} \ No newline at end of file +} diff --git a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue index 772d11b..8ac6d45 100644 --- a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue +++ b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue @@ -48,10 +48,11 @@ import bus from '@/bus'; import { quotaCommomInfoList, hmyztQuotaDataList } from '@/api/sponeScreen/jxkh.js'; import { waterloggingPointList } from '@/api/sponeScreen/syntherticData.js'; -import { waterLoggingCleanProject } from '@/api/spongePerformance/prevention'; +import { waterLoggingCleanProject, moduleFloodResult } from '@/api/spongePerformance/prevention'; import kaifengFangHong from '@/assets/geojson/kaifeng/kaifengFangHong.json'; //防洪标准 import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js'; import tuLi72X from '@/assets/newImgs/tuLi72X.png'; +import kaifengPSFQ1 from '@/assets/geojson/kaifeng/kaifengPSFQ1.json'; const { proxy } = getCurrentInstance(); const tabList = ref([ @@ -82,11 +83,12 @@ }, 1000); } else if (curTab.value == 'nlbz') { // 内涝防治标准 - bus.emit('setIniteLayer', [{ layername: 'cesiumPaishuiArea2', show: false }]); + getNLModalData(); + setTimeout(() => { newfiberMapbox.map.easeTo({ - center: [114.315, 34.802], - zoom: 11.2, + center: [114.315, 34.782], + zoom: 10.7, }); }, 200); } else { @@ -202,7 +204,7 @@ }, }); }; -//添加弹窗 +//添加弹窗内涝点 const addwaterlogingPopup = geojson => { console.log('-----', newfiberMapbox.popupService.popups); newfiberMapbox.popupService.popups.forEach(popup => { @@ -233,6 +235,111 @@ }); }; +// 内涝标准相关 +// 数据获取 +async function getNLModalData() { + let res = await moduleFloodResult(); + if (res && res.code == 200) { + let datas = res.data; + let moduleGeojson = getFeatureGeojson(datas[0].partitionList); + let moduleBoundaryGeojson = getGeojsonBoundary(moduleGeojson); + let modulelabelGeojson = getGeojsonCenter(moduleGeojson); + //gis渲染内涝区域 + newfiberMapBoxVectorLayer.addGeojsonPolygon('builtCity', kaifengPSFQ1); //建成区图层渲染 + addModuleLayer(moduleGeojson, 'moduleFlood', '#DFA8FF'); + addModuleBoundary(moduleBoundaryGeojson, 'moduleFloodBoundary'); + addGeojsonLable(modulelabelGeojson, 'moduleFloodlabel', '#ffffff'); + } +} +//添加模型法地图 +const addModuleLayer = (geojson, layerName, color) => { + !newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson }); + !newfiberMapbox.map.getLayer(layerName) && + newfiberMapbox.map.addLayer({ + id: layerName, + type: 'fill', + source: layerName, + paint: { + 'fill-color': color, + 'fill-opacity': 1, + }, + }); +}; +const addModuleBoundary = (geojson, layerName) => { + !newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson }); + !newfiberMapbox.map.getLayer(layerName) && + newfiberMapbox.map.addLayer({ + id: layerName, + type: 'line', + source: layerName, + paint: { + 'line-color': 'rgba(94, 56, 255, 1)', //边界颜色 + 'line-width': 3, + }, + }); +}; +const addGeojsonLable = (geojson, layerName, color) => { + !newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson }); + !newfiberMapbox.map.getLayer(layerName) && + !newfiberMapbox.map.addLayer({ + id: layerName, + type: 'symbol', + source: layerName, + paint: { + 'text-color': geojson.features[0].properties.color ? ['get', 'color'] : color, + 'text-halo-color': 'rgba(0,0,0,1)', + 'text-halo-width': 2, + }, + layout: { + 'text-allow-overlap': true, + 'text-field': ['get', 'partitionName'], + 'text-font': ['KlokanTech Noto Sans Regular'], + 'text-size': 16, + 'text-line-height': 3, + 'text-anchor': 'bottom', + 'text-max-width': 50, + 'text-offset': [0, -1], + }, + }); +}; +//获取geojson +const getFeatureGeojson = dataList => { + let features = []; + dataList.forEach(data => { + let feature = turf.feature(Terraformer.WKT.parse(data.geometry), data); + features.push(feature); + }); + return { + type: 'FeatureCollection', + features: features, + }; +}; +//获取geojson边界 +const getGeojsonBoundary = geojson => { + let features = []; + geojson.features.forEach(item => { + let line = turf.polygonToLine(item.geometry); + features.push(line); + }); + return { + type: 'FeatureCollection', + features: features, + }; +}; +//获取geojson中心点 +const getGeojsonCenter = geojson => { + let features = []; + geojson.features.forEach(item => { + let center = turf.center(item); + center.properties = item.properties; + features.push(center); + }); + return { + type: 'FeatureCollection', + features: features, + }; +}; + onMounted(() => { getWaterlogging(); setTimeout(() => { diff --git a/src/views/sponeScreen/evaluationKH/index.vue b/src/views/sponeScreen/evaluationKH/index.vue index f078cd7..2b78ea4 100644 --- a/src/views/sponeScreen/evaluationKH/index.vue +++ b/src/views/sponeScreen/evaluationKH/index.vue @@ -83,7 +83,7 @@ } // 内涝防治标准 - bus.emit('setIniteLayer', [{ layername: 'cesiumPaishuiArea2', show: true }]); + newfiberMapBoxVectorLayer.removeByIds(['builtCity', 'moduleFloodBoundary', 'moduleFloodlabel', 'moduleFlood']); }; onMounted(() => { diff --git a/src/views/sponeScreen/projectHM/projectFX.vue b/src/views/sponeScreen/projectHM/projectFX.vue index 37a26ca..ef051f6 100644 --- a/src/views/sponeScreen/projectHM/projectFX.vue +++ b/src/views/sponeScreen/projectHM/projectFX.vue @@ -3,7 +3,10 @@
-
{{ rainDate }} 降雨起止时间1:15-3:45,24小时累计降雨量20.4mm,降雨等级 中雨
+
+ {{ rainDate }} 降雨起止时间1:15-3:45,24小时累计降雨量20.4mm,降雨等级 + 中雨 +
1 项目设计最大控制容积 3796.52m³ @@ -27,50 +30,63 @@ src="@/assets/newImgs/pumpGY/water.png" alt="左" class="waterFlow" - :style="{ height: (120 * (nameToData(station1.propertyMonitorList, '水位')[0] || 0.2)) / 1.1 + 'px', left: '73px', width: '846px' }" + :style="{ + height: (120 * (nameToData(station1.propertyMonitorList, '水位')[valIndex1] || 0.2)) / 1.1 + 'px', + left: '73px', + width: '846px', + }" /> 右
-

实时水深:{{ nameToData(station1.propertyMonitorList, '水位')[0] || '--' }}米

-

实时水深:{{ nameToData(station5.propertyMonitorList, '水位')[0] || '--' }}米

+

实时水深:{{ nameToData(station1.propertyMonitorList, '水位')[valIndex1] || '--' }}米

+

实时水深:{{ nameToData(station5.propertyMonitorList, '水位')[valIndex5] || '--' }}米

- 水深:{{ nameToData(station1.propertyMonitorList, '水位')[0] || '--' }} m - 流速:{{ nameToData(station1.propertyMonitorList, '流速')[0] || '--' }} m/s - SS:{{ nameToData(station1.propertyMonitorList, 'SS')[0] || '--' }} mg/L + 水深:{{ nameToData(station1.propertyMonitorList, '水位')[valIndex1] || '--' }} m + 流速:{{ nameToData(station1.propertyMonitorList, '流速')[valIndex1] || '--' }} m/s + SS:{{ nameToData(station1.propertyMonitorList, 'SS')[valIndex1] || '--' }} mg/L + 时间:{{ station1.propertyMonitorXList[valIndex1].slice(10) || '--' }} 管径:2.4*1.1m
- 水深:{{ nameToData(station2.propertyMonitorList, '水位')[0] || '--' }} m - 流速:{{ nameToData(station2.propertyMonitorList, '流速')[0] || '--' }} m/s - SS:{{ nameToData(station2.propertyMonitorList, 'SS')[0] || '--' }} mg/L + 水深:{{ nameToData(station2.propertyMonitorList, '水位')[valIndex2] || '--' }} m + 流速:{{ nameToData(station2.propertyMonitorList, '流速')[valIndex2] || '--' }} m/s + SS:{{ nameToData(station2.propertyMonitorList, 'SS')[valIndex2] || '--' }} mg/L + 时间:{{ station2.propertyMonitorXList[valIndex2].slice(10) || '--' }} 管径:2.4*1.1m
- 水深:{{ nameToData(station3.propertyMonitorList, '水位')[0] || '--' }} m - 流速:{{ nameToData(station3.propertyMonitorList, '流速')[0] || '--' }} m/s - SS:{{ nameToData(station3.propertyMonitorList, 'SS')[0] || '--' }} mg/L + 水深:{{ nameToData(station3.propertyMonitorList, '水位')[valIndex3] || '--' }} m + 流速:{{ nameToData(station3.propertyMonitorList, '流速')[valIndex3] || '--' }} m/s + SS:{{ nameToData(station3.propertyMonitorList, 'SS')[valIndex3] || '--' }} mg/L + 时间:{{ station3.propertyMonitorXList[valIndex3].slice(10) || '--' }} 管径:DN500
水深:{{ '--' }} m 流速:{{ '--' }} m/s SS:{{ '--' }} mg/L + 时间: {{ '--' }} 管径:3*1.8m
- 水深:{{ nameToData(station5.propertyMonitorList, '水位')[0] || '--' }} m - 流速:{{ nameToData(station5.propertyMonitorList, '流速')[0] || '--' }} m/s - SS:{{ nameToData(station5.propertyMonitorList, 'SS')[0] || '--' }} mg/L + 水深:{{ nameToData(station5.propertyMonitorList, '水位')[valIndex5] || '--' }} m + 流速:{{ nameToData(station5.propertyMonitorList, '流速')[valIndex5] || '--' }} m/s + SS:{{ nameToData(station5.propertyMonitorList, 'SS')[valIndex5] || '--' }} mg/L + 时间:{{ station5.propertyMonitorXList[valIndex5].slice(10) || '--' }} 管径:3*1.8m
@@ -117,11 +133,16 @@ const rainDate = ref(''); const { proxy } = getCurrentInstance(); const timer = ref(null); -const station1 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station2 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station3 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station4 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station5 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); +const valIndex1 = ref(0); +const valIndex2 = ref(0); +const valIndex3 = ref(0); +const valIndex4 = ref(0); +const valIndex5 = ref(0); +const station1 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station2 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station3 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station4 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station5 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); // 获取实时数据 function getRealData() { @@ -135,6 +156,11 @@ graphicReport(params).then(res => { if (res.data.propertyMonitorList.length > 0) { station1.value = res.data; + // 取最大的值 + let max = Math.max(...nameToData(station1.value.propertyMonitorList, '水位')); + valIndex1.value = nameToData(station1.value.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); } }); @@ -142,6 +168,11 @@ graphicReport(params).then(res => { if (res.data.propertyMonitorList.length > 0) { station2.value = res.data; + // 取最大的值 + let max = Math.max(...nameToData(station2.value.propertyMonitorList, '水位')); + valIndex2.value = nameToData(station2.value.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); } }); @@ -149,6 +180,11 @@ graphicReport(params).then(res => { if (res.data.propertyMonitorList.length > 0) { station3.value = res.data; + // 取最大的值 + let max = Math.max(...nameToData(station3.value.propertyMonitorList, '水位')); + valIndex3.value = nameToData(station3.value.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); } }); @@ -158,6 +194,11 @@ graphicReport(params).then(res => { if (res.data.propertyMonitorList.length > 0) { station5.value = res.data; + // 取最大的值 + let max = Math.max(...nameToData(station5.value.propertyMonitorList, '水位')); + valIndex5.value = nameToData(station5.value.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); } }); } @@ -165,7 +206,8 @@ // 公共方法,根据监测名称来匹配对应的数值 function nameToData(data, name) { let arr = data.filter(item => item.monitorPropertyName == name); - return arr[0] ? arr[0].ylist : []; + let lists = arr[0] ? arr[0].ylist : []; + return lists; } // 海绵设施点击 diff --git a/src/views/sponeScreen/projectHM/projectSSDX.vue b/src/views/sponeScreen/projectHM/projectSSDX.vue index cb59e6a..6625f7b 100644 --- a/src/views/sponeScreen/projectHM/projectSSDX.vue +++ b/src/views/sponeScreen/projectHM/projectSSDX.vue @@ -6,7 +6,10 @@ -
{{ rainDate }} 降雨起止时间1:15-3:45,24小时累计降雨量20.4mm,降雨等级 中雨
+
+ {{ rainDate }} 降雨起止时间1:15-3:45,24小时累计降雨量20.4mm,降雨等级 + 中雨 +
1 @@ -19,7 +22,8 @@
3 - 雨水管网产流开始时间1:45,结束时间4:45,累计流量 843.5m³, 最大水深 0.5m + 雨水管网产流开始时间1:45,结束时间4:45,累计流量 843.5m³, 最大水深 + {{ nameToData(station1.propertyMonitorList, '水位')[valIndex] || '--' }}m
@@ -34,17 +38,18 @@ src="@/assets/newImgs/pumpGY/water.png" alt="" class="waterFlow" - :style="{ height: (80 * (nameToData(station1.propertyMonitorList, '水位')[0] || 0.2)) / 1.1 + 'px' }" + :style="{ height: (80 * (nameToData(station1.propertyMonitorList, '水位')[valIndex] || 0.2)) / 1.1 + 'px' }" />

管径:2.4 x 1.1米

-

实时水深:{{ nameToData(station1.propertyMonitorList, '水位')[0] || '--' }} 米

-

进口流速:{{ nameToData(station1.propertyMonitorList, '流速')[0] }} m/s

-

进口SS:{{ nameToData(station1.propertyMonitorList, 'SS')[0] || '--' }} mg/L

-

出口流速:{{ nameToData(station2.propertyMonitorList, '流速')[0] || '--' }} m/s

-

出口SS:{{ nameToData(station2.propertyMonitorList, 'SS')[0] || '--' }} mg/L

+

最大水深:{{ nameToData(station1.propertyMonitorList, '水位')[valIndex] || '--' }} 米

+

进口流速:{{ nameToData(station1.propertyMonitorList, '流速')[valIndex] }} m/s

+

进口SS:{{ nameToData(station1.propertyMonitorList, 'SS')[valIndex] || '--' }} mg/L

+

出口流速:{{ nameToData(station2.propertyMonitorList, '流速')[valIndex] || '--' }} m/s

+

出口SS:{{ nameToData(station2.propertyMonitorList, 'SS')[valIndex] || '--' }} mg/L

+

水位最深时间:{{ station1.propertyMonitorXList[valIndex] || '--' }}

@@ -76,9 +81,10 @@ const rainDate = ref(''); const { proxy } = getCurrentInstance(); const timer = ref(null); -const station1 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station2 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); +const station1 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station2 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); const showProgress = ref(false); +const valIndex = ref(0); // 获取实时数据 function getRealData() { @@ -105,7 +111,13 @@ // 公共方法,根据监测名称来匹配对应的数值 function nameToData(data, name) { let arr = data.filter(item => item.monitorPropertyName == name); - return arr[0] ? arr[0].ylist : []; + let lists = arr[0] ? arr[0].ylist : []; + // 取最大的值 + let max = Math.max(...lists); + valIndex.value = lists.findIndex(item => { + return item == max; + }); + return lists; } onMounted(() => { diff --git a/public/static/libs/mapbox/style/preventionSFQ.json b/public/static/libs/mapbox/style/preventionSFQ.json index 45e5a5b..c922df2 100644 --- a/public/static/libs/mapbox/style/preventionSFQ.json +++ b/public/static/libs/mapbox/style/preventionSFQ.json @@ -2,15 +2,10 @@ "params": { "basemap": "https://supermap2.wh-nf.cn:8090/bm", "mvt": "https://supermap0.wh-nf.cn:8090/vt", - "sprites": [ - "/static/libs/mapbox/style/sprite/sprite4" - ], + "sprites": ["/static/libs/mapbox/style/sprite/sprite4"], "init": { - "center": [ - 114.312, - 34.802 - ], - "zoom": 12.6, + "center": [114.362, 34.802], + "zoom": 11.5, "style": "/static/libs/mapbox/style/customs/night-style.json" }, "l7": { @@ -22,124 +17,51 @@ ] } }, - "orders": [ - [ - "poi_label" - ], - [ - "place_label_city" - ], - [ - "road_major_label" - ], - [ - "place_label_other" - ], - [ - "point" - ] - ], + "orders": [["poi_label"], ["place_label_city"], ["road_major_label"], ["place_label_other"], ["point"]], "filter": { "wsLine1": { - "layerName": [ - "pipeline_info", - "pipeline_point" - ], + "layerName": ["pipeline_info", "pipeline_point"], "filter": [ - [ - "WS", - "HS" - ], - [ - "污水点", - "合流点" - ] + ["WS", "HS"], + ["污水点", "合流点"] ] }, "ysLine1": { - "layerName": [ - "pipeline_info", - "pipeline_point" - ], - "filter": [ - [ - "YS" - ], - [ - "雨水点" - ] - ] + "layerName": ["pipeline_info", "pipeline_point"], + "filter": [["YS"], ["雨水点"]] }, "oldCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "老城区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["老城区"]], "easeTo": { - "center": [ - 113.933, - 30.926 - ], + "center": [113.933, 30.926], "zoom": 13.6, "pitch": 55 } }, "southCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "南城新区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["南城新区"]], "easeTo": { - "center": [ - 113.933, - 30.886 - ], + "center": [113.933, 30.886], "zoom": 13.6, "pitch": 55 } }, "newCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "东城新区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["东城新区"]], "easeTo": { - "center": [ - 113.983, - 30.896 - ], + "center": [113.983, 30.896], "zoom": 13.6, "pitch": 55 } }, "allCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "东城新区", - "南城新区", - "老城区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["东城新区", "南城新区", "老城区"]], "easeTo": { - "center": [ - 113.953, - 30.906 - ], + "center": [113.953, 30.906], "zoom": 13.6, "pitch": 55 } @@ -152,45 +74,25 @@ "type": "symbol", "minzoom": 0, "maxzoom": 24, - "filter": [ - "in", - "type", - "" - ], + "filter": ["in", "type", ""], "paint": { "text-color": "#ffffff" }, "layout": { - "icon-image": [ - "match", - [ - "get", - "type" - ], - "success_zishui", - "ysj", - "error_zishui", - "wsj", - "yuanTou" - ], + "icon-image": ["match", ["get", "type"], "success_zishui", "ysj", "error_zishui", "wsj", "yuanTou"], "text-allow-overlap": false, "icon-allow-overlap": false, "icon-anchor": "center", "icon-size": 0.8, "text-field": "{name}", - "text-font": [ - "KlokanTech Noto Sans Regular" - ], + "text-font": ["KlokanTech Noto Sans Regular"], "text-size": 16, "text-line-height": 3, "text-anchor": "bottom", "text-max-width": 50, - "text-offset": [ - 0, - -1 - ] + "text-offset": [0, -1] }, "mType": "geojson" } ] -} \ No newline at end of file +} diff --git a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue index 772d11b..8ac6d45 100644 --- a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue +++ b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue @@ -48,10 +48,11 @@ import bus from '@/bus'; import { quotaCommomInfoList, hmyztQuotaDataList } from '@/api/sponeScreen/jxkh.js'; import { waterloggingPointList } from '@/api/sponeScreen/syntherticData.js'; -import { waterLoggingCleanProject } from '@/api/spongePerformance/prevention'; +import { waterLoggingCleanProject, moduleFloodResult } from '@/api/spongePerformance/prevention'; import kaifengFangHong from '@/assets/geojson/kaifeng/kaifengFangHong.json'; //防洪标准 import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js'; import tuLi72X from '@/assets/newImgs/tuLi72X.png'; +import kaifengPSFQ1 from '@/assets/geojson/kaifeng/kaifengPSFQ1.json'; const { proxy } = getCurrentInstance(); const tabList = ref([ @@ -82,11 +83,12 @@ }, 1000); } else if (curTab.value == 'nlbz') { // 内涝防治标准 - bus.emit('setIniteLayer', [{ layername: 'cesiumPaishuiArea2', show: false }]); + getNLModalData(); + setTimeout(() => { newfiberMapbox.map.easeTo({ - center: [114.315, 34.802], - zoom: 11.2, + center: [114.315, 34.782], + zoom: 10.7, }); }, 200); } else { @@ -202,7 +204,7 @@ }, }); }; -//添加弹窗 +//添加弹窗内涝点 const addwaterlogingPopup = geojson => { console.log('-----', newfiberMapbox.popupService.popups); newfiberMapbox.popupService.popups.forEach(popup => { @@ -233,6 +235,111 @@ }); }; +// 内涝标准相关 +// 数据获取 +async function getNLModalData() { + let res = await moduleFloodResult(); + if (res && res.code == 200) { + let datas = res.data; + let moduleGeojson = getFeatureGeojson(datas[0].partitionList); + let moduleBoundaryGeojson = getGeojsonBoundary(moduleGeojson); + let modulelabelGeojson = getGeojsonCenter(moduleGeojson); + //gis渲染内涝区域 + newfiberMapBoxVectorLayer.addGeojsonPolygon('builtCity', kaifengPSFQ1); //建成区图层渲染 + addModuleLayer(moduleGeojson, 'moduleFlood', '#DFA8FF'); + addModuleBoundary(moduleBoundaryGeojson, 'moduleFloodBoundary'); + addGeojsonLable(modulelabelGeojson, 'moduleFloodlabel', '#ffffff'); + } +} +//添加模型法地图 +const addModuleLayer = (geojson, layerName, color) => { + !newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson }); + !newfiberMapbox.map.getLayer(layerName) && + newfiberMapbox.map.addLayer({ + id: layerName, + type: 'fill', + source: layerName, + paint: { + 'fill-color': color, + 'fill-opacity': 1, + }, + }); +}; +const addModuleBoundary = (geojson, layerName) => { + !newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson }); + !newfiberMapbox.map.getLayer(layerName) && + newfiberMapbox.map.addLayer({ + id: layerName, + type: 'line', + source: layerName, + paint: { + 'line-color': 'rgba(94, 56, 255, 1)', //边界颜色 + 'line-width': 3, + }, + }); +}; +const addGeojsonLable = (geojson, layerName, color) => { + !newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson }); + !newfiberMapbox.map.getLayer(layerName) && + !newfiberMapbox.map.addLayer({ + id: layerName, + type: 'symbol', + source: layerName, + paint: { + 'text-color': geojson.features[0].properties.color ? ['get', 'color'] : color, + 'text-halo-color': 'rgba(0,0,0,1)', + 'text-halo-width': 2, + }, + layout: { + 'text-allow-overlap': true, + 'text-field': ['get', 'partitionName'], + 'text-font': ['KlokanTech Noto Sans Regular'], + 'text-size': 16, + 'text-line-height': 3, + 'text-anchor': 'bottom', + 'text-max-width': 50, + 'text-offset': [0, -1], + }, + }); +}; +//获取geojson +const getFeatureGeojson = dataList => { + let features = []; + dataList.forEach(data => { + let feature = turf.feature(Terraformer.WKT.parse(data.geometry), data); + features.push(feature); + }); + return { + type: 'FeatureCollection', + features: features, + }; +}; +//获取geojson边界 +const getGeojsonBoundary = geojson => { + let features = []; + geojson.features.forEach(item => { + let line = turf.polygonToLine(item.geometry); + features.push(line); + }); + return { + type: 'FeatureCollection', + features: features, + }; +}; +//获取geojson中心点 +const getGeojsonCenter = geojson => { + let features = []; + geojson.features.forEach(item => { + let center = turf.center(item); + center.properties = item.properties; + features.push(center); + }); + return { + type: 'FeatureCollection', + features: features, + }; +}; + onMounted(() => { getWaterlogging(); setTimeout(() => { diff --git a/src/views/sponeScreen/evaluationKH/index.vue b/src/views/sponeScreen/evaluationKH/index.vue index f078cd7..2b78ea4 100644 --- a/src/views/sponeScreen/evaluationKH/index.vue +++ b/src/views/sponeScreen/evaluationKH/index.vue @@ -83,7 +83,7 @@ } // 内涝防治标准 - bus.emit('setIniteLayer', [{ layername: 'cesiumPaishuiArea2', show: true }]); + newfiberMapBoxVectorLayer.removeByIds(['builtCity', 'moduleFloodBoundary', 'moduleFloodlabel', 'moduleFlood']); }; onMounted(() => { diff --git a/src/views/sponeScreen/projectHM/projectFX.vue b/src/views/sponeScreen/projectHM/projectFX.vue index 37a26ca..ef051f6 100644 --- a/src/views/sponeScreen/projectHM/projectFX.vue +++ b/src/views/sponeScreen/projectHM/projectFX.vue @@ -3,7 +3,10 @@
-
{{ rainDate }} 降雨起止时间1:15-3:45,24小时累计降雨量20.4mm,降雨等级 中雨
+
+ {{ rainDate }} 降雨起止时间1:15-3:45,24小时累计降雨量20.4mm,降雨等级 + 中雨 +
1 项目设计最大控制容积 3796.52m³ @@ -27,50 +30,63 @@ src="@/assets/newImgs/pumpGY/water.png" alt="左" class="waterFlow" - :style="{ height: (120 * (nameToData(station1.propertyMonitorList, '水位')[0] || 0.2)) / 1.1 + 'px', left: '73px', width: '846px' }" + :style="{ + height: (120 * (nameToData(station1.propertyMonitorList, '水位')[valIndex1] || 0.2)) / 1.1 + 'px', + left: '73px', + width: '846px', + }" /> 右
-

实时水深:{{ nameToData(station1.propertyMonitorList, '水位')[0] || '--' }}米

-

实时水深:{{ nameToData(station5.propertyMonitorList, '水位')[0] || '--' }}米

+

实时水深:{{ nameToData(station1.propertyMonitorList, '水位')[valIndex1] || '--' }}米

+

实时水深:{{ nameToData(station5.propertyMonitorList, '水位')[valIndex5] || '--' }}米

- 水深:{{ nameToData(station1.propertyMonitorList, '水位')[0] || '--' }} m - 流速:{{ nameToData(station1.propertyMonitorList, '流速')[0] || '--' }} m/s - SS:{{ nameToData(station1.propertyMonitorList, 'SS')[0] || '--' }} mg/L + 水深:{{ nameToData(station1.propertyMonitorList, '水位')[valIndex1] || '--' }} m + 流速:{{ nameToData(station1.propertyMonitorList, '流速')[valIndex1] || '--' }} m/s + SS:{{ nameToData(station1.propertyMonitorList, 'SS')[valIndex1] || '--' }} mg/L + 时间:{{ station1.propertyMonitorXList[valIndex1].slice(10) || '--' }} 管径:2.4*1.1m
- 水深:{{ nameToData(station2.propertyMonitorList, '水位')[0] || '--' }} m - 流速:{{ nameToData(station2.propertyMonitorList, '流速')[0] || '--' }} m/s - SS:{{ nameToData(station2.propertyMonitorList, 'SS')[0] || '--' }} mg/L + 水深:{{ nameToData(station2.propertyMonitorList, '水位')[valIndex2] || '--' }} m + 流速:{{ nameToData(station2.propertyMonitorList, '流速')[valIndex2] || '--' }} m/s + SS:{{ nameToData(station2.propertyMonitorList, 'SS')[valIndex2] || '--' }} mg/L + 时间:{{ station2.propertyMonitorXList[valIndex2].slice(10) || '--' }} 管径:2.4*1.1m
- 水深:{{ nameToData(station3.propertyMonitorList, '水位')[0] || '--' }} m - 流速:{{ nameToData(station3.propertyMonitorList, '流速')[0] || '--' }} m/s - SS:{{ nameToData(station3.propertyMonitorList, 'SS')[0] || '--' }} mg/L + 水深:{{ nameToData(station3.propertyMonitorList, '水位')[valIndex3] || '--' }} m + 流速:{{ nameToData(station3.propertyMonitorList, '流速')[valIndex3] || '--' }} m/s + SS:{{ nameToData(station3.propertyMonitorList, 'SS')[valIndex3] || '--' }} mg/L + 时间:{{ station3.propertyMonitorXList[valIndex3].slice(10) || '--' }} 管径:DN500
水深:{{ '--' }} m 流速:{{ '--' }} m/s SS:{{ '--' }} mg/L + 时间: {{ '--' }} 管径:3*1.8m
- 水深:{{ nameToData(station5.propertyMonitorList, '水位')[0] || '--' }} m - 流速:{{ nameToData(station5.propertyMonitorList, '流速')[0] || '--' }} m/s - SS:{{ nameToData(station5.propertyMonitorList, 'SS')[0] || '--' }} mg/L + 水深:{{ nameToData(station5.propertyMonitorList, '水位')[valIndex5] || '--' }} m + 流速:{{ nameToData(station5.propertyMonitorList, '流速')[valIndex5] || '--' }} m/s + SS:{{ nameToData(station5.propertyMonitorList, 'SS')[valIndex5] || '--' }} mg/L + 时间:{{ station5.propertyMonitorXList[valIndex5].slice(10) || '--' }} 管径:3*1.8m
@@ -117,11 +133,16 @@ const rainDate = ref(''); const { proxy } = getCurrentInstance(); const timer = ref(null); -const station1 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station2 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station3 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station4 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station5 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); +const valIndex1 = ref(0); +const valIndex2 = ref(0); +const valIndex3 = ref(0); +const valIndex4 = ref(0); +const valIndex5 = ref(0); +const station1 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station2 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station3 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station4 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station5 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); // 获取实时数据 function getRealData() { @@ -135,6 +156,11 @@ graphicReport(params).then(res => { if (res.data.propertyMonitorList.length > 0) { station1.value = res.data; + // 取最大的值 + let max = Math.max(...nameToData(station1.value.propertyMonitorList, '水位')); + valIndex1.value = nameToData(station1.value.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); } }); @@ -142,6 +168,11 @@ graphicReport(params).then(res => { if (res.data.propertyMonitorList.length > 0) { station2.value = res.data; + // 取最大的值 + let max = Math.max(...nameToData(station2.value.propertyMonitorList, '水位')); + valIndex2.value = nameToData(station2.value.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); } }); @@ -149,6 +180,11 @@ graphicReport(params).then(res => { if (res.data.propertyMonitorList.length > 0) { station3.value = res.data; + // 取最大的值 + let max = Math.max(...nameToData(station3.value.propertyMonitorList, '水位')); + valIndex3.value = nameToData(station3.value.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); } }); @@ -158,6 +194,11 @@ graphicReport(params).then(res => { if (res.data.propertyMonitorList.length > 0) { station5.value = res.data; + // 取最大的值 + let max = Math.max(...nameToData(station5.value.propertyMonitorList, '水位')); + valIndex5.value = nameToData(station5.value.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); } }); } @@ -165,7 +206,8 @@ // 公共方法,根据监测名称来匹配对应的数值 function nameToData(data, name) { let arr = data.filter(item => item.monitorPropertyName == name); - return arr[0] ? arr[0].ylist : []; + let lists = arr[0] ? arr[0].ylist : []; + return lists; } // 海绵设施点击 diff --git a/src/views/sponeScreen/projectHM/projectSSDX.vue b/src/views/sponeScreen/projectHM/projectSSDX.vue index cb59e6a..6625f7b 100644 --- a/src/views/sponeScreen/projectHM/projectSSDX.vue +++ b/src/views/sponeScreen/projectHM/projectSSDX.vue @@ -6,7 +6,10 @@ -
{{ rainDate }} 降雨起止时间1:15-3:45,24小时累计降雨量20.4mm,降雨等级 中雨
+
+ {{ rainDate }} 降雨起止时间1:15-3:45,24小时累计降雨量20.4mm,降雨等级 + 中雨 +
1 @@ -19,7 +22,8 @@
3 - 雨水管网产流开始时间1:45,结束时间4:45,累计流量 843.5m³, 最大水深 0.5m + 雨水管网产流开始时间1:45,结束时间4:45,累计流量 843.5m³, 最大水深 + {{ nameToData(station1.propertyMonitorList, '水位')[valIndex] || '--' }}m
@@ -34,17 +38,18 @@ src="@/assets/newImgs/pumpGY/water.png" alt="" class="waterFlow" - :style="{ height: (80 * (nameToData(station1.propertyMonitorList, '水位')[0] || 0.2)) / 1.1 + 'px' }" + :style="{ height: (80 * (nameToData(station1.propertyMonitorList, '水位')[valIndex] || 0.2)) / 1.1 + 'px' }" />

管径:2.4 x 1.1米

-

实时水深:{{ nameToData(station1.propertyMonitorList, '水位')[0] || '--' }} 米

-

进口流速:{{ nameToData(station1.propertyMonitorList, '流速')[0] }} m/s

-

进口SS:{{ nameToData(station1.propertyMonitorList, 'SS')[0] || '--' }} mg/L

-

出口流速:{{ nameToData(station2.propertyMonitorList, '流速')[0] || '--' }} m/s

-

出口SS:{{ nameToData(station2.propertyMonitorList, 'SS')[0] || '--' }} mg/L

+

最大水深:{{ nameToData(station1.propertyMonitorList, '水位')[valIndex] || '--' }} 米

+

进口流速:{{ nameToData(station1.propertyMonitorList, '流速')[valIndex] }} m/s

+

进口SS:{{ nameToData(station1.propertyMonitorList, 'SS')[valIndex] || '--' }} mg/L

+

出口流速:{{ nameToData(station2.propertyMonitorList, '流速')[valIndex] || '--' }} m/s

+

出口SS:{{ nameToData(station2.propertyMonitorList, 'SS')[valIndex] || '--' }} mg/L

+

水位最深时间:{{ station1.propertyMonitorXList[valIndex] || '--' }}

@@ -76,9 +81,10 @@ const rainDate = ref(''); const { proxy } = getCurrentInstance(); const timer = ref(null); -const station1 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station2 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); +const station1 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station2 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); const showProgress = ref(false); +const valIndex = ref(0); // 获取实时数据 function getRealData() { @@ -105,7 +111,13 @@ // 公共方法,根据监测名称来匹配对应的数值 function nameToData(data, name) { let arr = data.filter(item => item.monitorPropertyName == name); - return arr[0] ? arr[0].ylist : []; + let lists = arr[0] ? arr[0].ylist : []; + // 取最大的值 + let max = Math.max(...lists); + valIndex.value = lists.findIndex(item => { + return item == max; + }); + return lists; } onMounted(() => { diff --git a/src/views/sponeScreen/waterFlood/PsssCount.vue b/src/views/sponeScreen/waterFlood/PsssCount.vue index 22134f2..8645688 100644 --- a/src/views/sponeScreen/waterFlood/PsssCount.vue +++ b/src/views/sponeScreen/waterFlood/PsssCount.vue @@ -2,7 +2,9 @@
排水设施统计 - 跳转市防汛平台 + + 跳转市防汛平台 +
diff --git a/public/static/libs/mapbox/style/preventionSFQ.json b/public/static/libs/mapbox/style/preventionSFQ.json index 45e5a5b..c922df2 100644 --- a/public/static/libs/mapbox/style/preventionSFQ.json +++ b/public/static/libs/mapbox/style/preventionSFQ.json @@ -2,15 +2,10 @@ "params": { "basemap": "https://supermap2.wh-nf.cn:8090/bm", "mvt": "https://supermap0.wh-nf.cn:8090/vt", - "sprites": [ - "/static/libs/mapbox/style/sprite/sprite4" - ], + "sprites": ["/static/libs/mapbox/style/sprite/sprite4"], "init": { - "center": [ - 114.312, - 34.802 - ], - "zoom": 12.6, + "center": [114.362, 34.802], + "zoom": 11.5, "style": "/static/libs/mapbox/style/customs/night-style.json" }, "l7": { @@ -22,124 +17,51 @@ ] } }, - "orders": [ - [ - "poi_label" - ], - [ - "place_label_city" - ], - [ - "road_major_label" - ], - [ - "place_label_other" - ], - [ - "point" - ] - ], + "orders": [["poi_label"], ["place_label_city"], ["road_major_label"], ["place_label_other"], ["point"]], "filter": { "wsLine1": { - "layerName": [ - "pipeline_info", - "pipeline_point" - ], + "layerName": ["pipeline_info", "pipeline_point"], "filter": [ - [ - "WS", - "HS" - ], - [ - "污水点", - "合流点" - ] + ["WS", "HS"], + ["污水点", "合流点"] ] }, "ysLine1": { - "layerName": [ - "pipeline_info", - "pipeline_point" - ], - "filter": [ - [ - "YS" - ], - [ - "雨水点" - ] - ] + "layerName": ["pipeline_info", "pipeline_point"], + "filter": [["YS"], ["雨水点"]] }, "oldCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "老城区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["老城区"]], "easeTo": { - "center": [ - 113.933, - 30.926 - ], + "center": [113.933, 30.926], "zoom": 13.6, "pitch": 55 } }, "southCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "南城新区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["南城新区"]], "easeTo": { - "center": [ - 113.933, - 30.886 - ], + "center": [113.933, 30.886], "zoom": 13.6, "pitch": 55 } }, "newCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "东城新区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["东城新区"]], "easeTo": { - "center": [ - 113.983, - 30.896 - ], + "center": [113.983, 30.896], "zoom": 13.6, "pitch": 55 } }, "allCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "东城新区", - "南城新区", - "老城区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["东城新区", "南城新区", "老城区"]], "easeTo": { - "center": [ - 113.953, - 30.906 - ], + "center": [113.953, 30.906], "zoom": 13.6, "pitch": 55 } @@ -152,45 +74,25 @@ "type": "symbol", "minzoom": 0, "maxzoom": 24, - "filter": [ - "in", - "type", - "" - ], + "filter": ["in", "type", ""], "paint": { "text-color": "#ffffff" }, "layout": { - "icon-image": [ - "match", - [ - "get", - "type" - ], - "success_zishui", - "ysj", - "error_zishui", - "wsj", - "yuanTou" - ], + "icon-image": ["match", ["get", "type"], "success_zishui", "ysj", "error_zishui", "wsj", "yuanTou"], "text-allow-overlap": false, "icon-allow-overlap": false, "icon-anchor": "center", "icon-size": 0.8, "text-field": "{name}", - "text-font": [ - "KlokanTech Noto Sans Regular" - ], + "text-font": ["KlokanTech Noto Sans Regular"], "text-size": 16, "text-line-height": 3, "text-anchor": "bottom", "text-max-width": 50, - "text-offset": [ - 0, - -1 - ] + "text-offset": [0, -1] }, "mType": "geojson" } ] -} \ No newline at end of file +} diff --git a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue index 772d11b..8ac6d45 100644 --- a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue +++ b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue @@ -48,10 +48,11 @@ import bus from '@/bus'; import { quotaCommomInfoList, hmyztQuotaDataList } from '@/api/sponeScreen/jxkh.js'; import { waterloggingPointList } from '@/api/sponeScreen/syntherticData.js'; -import { waterLoggingCleanProject } from '@/api/spongePerformance/prevention'; +import { waterLoggingCleanProject, moduleFloodResult } from '@/api/spongePerformance/prevention'; import kaifengFangHong from '@/assets/geojson/kaifeng/kaifengFangHong.json'; //防洪标准 import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js'; import tuLi72X from '@/assets/newImgs/tuLi72X.png'; +import kaifengPSFQ1 from '@/assets/geojson/kaifeng/kaifengPSFQ1.json'; const { proxy } = getCurrentInstance(); const tabList = ref([ @@ -82,11 +83,12 @@ }, 1000); } else if (curTab.value == 'nlbz') { // 内涝防治标准 - bus.emit('setIniteLayer', [{ layername: 'cesiumPaishuiArea2', show: false }]); + getNLModalData(); + setTimeout(() => { newfiberMapbox.map.easeTo({ - center: [114.315, 34.802], - zoom: 11.2, + center: [114.315, 34.782], + zoom: 10.7, }); }, 200); } else { @@ -202,7 +204,7 @@ }, }); }; -//添加弹窗 +//添加弹窗内涝点 const addwaterlogingPopup = geojson => { console.log('-----', newfiberMapbox.popupService.popups); newfiberMapbox.popupService.popups.forEach(popup => { @@ -233,6 +235,111 @@ }); }; +// 内涝标准相关 +// 数据获取 +async function getNLModalData() { + let res = await moduleFloodResult(); + if (res && res.code == 200) { + let datas = res.data; + let moduleGeojson = getFeatureGeojson(datas[0].partitionList); + let moduleBoundaryGeojson = getGeojsonBoundary(moduleGeojson); + let modulelabelGeojson = getGeojsonCenter(moduleGeojson); + //gis渲染内涝区域 + newfiberMapBoxVectorLayer.addGeojsonPolygon('builtCity', kaifengPSFQ1); //建成区图层渲染 + addModuleLayer(moduleGeojson, 'moduleFlood', '#DFA8FF'); + addModuleBoundary(moduleBoundaryGeojson, 'moduleFloodBoundary'); + addGeojsonLable(modulelabelGeojson, 'moduleFloodlabel', '#ffffff'); + } +} +//添加模型法地图 +const addModuleLayer = (geojson, layerName, color) => { + !newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson }); + !newfiberMapbox.map.getLayer(layerName) && + newfiberMapbox.map.addLayer({ + id: layerName, + type: 'fill', + source: layerName, + paint: { + 'fill-color': color, + 'fill-opacity': 1, + }, + }); +}; +const addModuleBoundary = (geojson, layerName) => { + !newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson }); + !newfiberMapbox.map.getLayer(layerName) && + newfiberMapbox.map.addLayer({ + id: layerName, + type: 'line', + source: layerName, + paint: { + 'line-color': 'rgba(94, 56, 255, 1)', //边界颜色 + 'line-width': 3, + }, + }); +}; +const addGeojsonLable = (geojson, layerName, color) => { + !newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson }); + !newfiberMapbox.map.getLayer(layerName) && + !newfiberMapbox.map.addLayer({ + id: layerName, + type: 'symbol', + source: layerName, + paint: { + 'text-color': geojson.features[0].properties.color ? ['get', 'color'] : color, + 'text-halo-color': 'rgba(0,0,0,1)', + 'text-halo-width': 2, + }, + layout: { + 'text-allow-overlap': true, + 'text-field': ['get', 'partitionName'], + 'text-font': ['KlokanTech Noto Sans Regular'], + 'text-size': 16, + 'text-line-height': 3, + 'text-anchor': 'bottom', + 'text-max-width': 50, + 'text-offset': [0, -1], + }, + }); +}; +//获取geojson +const getFeatureGeojson = dataList => { + let features = []; + dataList.forEach(data => { + let feature = turf.feature(Terraformer.WKT.parse(data.geometry), data); + features.push(feature); + }); + return { + type: 'FeatureCollection', + features: features, + }; +}; +//获取geojson边界 +const getGeojsonBoundary = geojson => { + let features = []; + geojson.features.forEach(item => { + let line = turf.polygonToLine(item.geometry); + features.push(line); + }); + return { + type: 'FeatureCollection', + features: features, + }; +}; +//获取geojson中心点 +const getGeojsonCenter = geojson => { + let features = []; + geojson.features.forEach(item => { + let center = turf.center(item); + center.properties = item.properties; + features.push(center); + }); + return { + type: 'FeatureCollection', + features: features, + }; +}; + onMounted(() => { getWaterlogging(); setTimeout(() => { diff --git a/src/views/sponeScreen/evaluationKH/index.vue b/src/views/sponeScreen/evaluationKH/index.vue index f078cd7..2b78ea4 100644 --- a/src/views/sponeScreen/evaluationKH/index.vue +++ b/src/views/sponeScreen/evaluationKH/index.vue @@ -83,7 +83,7 @@ } // 内涝防治标准 - bus.emit('setIniteLayer', [{ layername: 'cesiumPaishuiArea2', show: true }]); + newfiberMapBoxVectorLayer.removeByIds(['builtCity', 'moduleFloodBoundary', 'moduleFloodlabel', 'moduleFlood']); }; onMounted(() => { diff --git a/src/views/sponeScreen/projectHM/projectFX.vue b/src/views/sponeScreen/projectHM/projectFX.vue index 37a26ca..ef051f6 100644 --- a/src/views/sponeScreen/projectHM/projectFX.vue +++ b/src/views/sponeScreen/projectHM/projectFX.vue @@ -3,7 +3,10 @@
-
{{ rainDate }} 降雨起止时间1:15-3:45,24小时累计降雨量20.4mm,降雨等级 中雨
+
+ {{ rainDate }} 降雨起止时间1:15-3:45,24小时累计降雨量20.4mm,降雨等级 + 中雨 +
1 项目设计最大控制容积 3796.52m³ @@ -27,50 +30,63 @@ src="@/assets/newImgs/pumpGY/water.png" alt="左" class="waterFlow" - :style="{ height: (120 * (nameToData(station1.propertyMonitorList, '水位')[0] || 0.2)) / 1.1 + 'px', left: '73px', width: '846px' }" + :style="{ + height: (120 * (nameToData(station1.propertyMonitorList, '水位')[valIndex1] || 0.2)) / 1.1 + 'px', + left: '73px', + width: '846px', + }" /> 右
-

实时水深:{{ nameToData(station1.propertyMonitorList, '水位')[0] || '--' }}米

-

实时水深:{{ nameToData(station5.propertyMonitorList, '水位')[0] || '--' }}米

+

实时水深:{{ nameToData(station1.propertyMonitorList, '水位')[valIndex1] || '--' }}米

+

实时水深:{{ nameToData(station5.propertyMonitorList, '水位')[valIndex5] || '--' }}米

- 水深:{{ nameToData(station1.propertyMonitorList, '水位')[0] || '--' }} m - 流速:{{ nameToData(station1.propertyMonitorList, '流速')[0] || '--' }} m/s - SS:{{ nameToData(station1.propertyMonitorList, 'SS')[0] || '--' }} mg/L + 水深:{{ nameToData(station1.propertyMonitorList, '水位')[valIndex1] || '--' }} m + 流速:{{ nameToData(station1.propertyMonitorList, '流速')[valIndex1] || '--' }} m/s + SS:{{ nameToData(station1.propertyMonitorList, 'SS')[valIndex1] || '--' }} mg/L + 时间:{{ station1.propertyMonitorXList[valIndex1].slice(10) || '--' }} 管径:2.4*1.1m
- 水深:{{ nameToData(station2.propertyMonitorList, '水位')[0] || '--' }} m - 流速:{{ nameToData(station2.propertyMonitorList, '流速')[0] || '--' }} m/s - SS:{{ nameToData(station2.propertyMonitorList, 'SS')[0] || '--' }} mg/L + 水深:{{ nameToData(station2.propertyMonitorList, '水位')[valIndex2] || '--' }} m + 流速:{{ nameToData(station2.propertyMonitorList, '流速')[valIndex2] || '--' }} m/s + SS:{{ nameToData(station2.propertyMonitorList, 'SS')[valIndex2] || '--' }} mg/L + 时间:{{ station2.propertyMonitorXList[valIndex2].slice(10) || '--' }} 管径:2.4*1.1m
- 水深:{{ nameToData(station3.propertyMonitorList, '水位')[0] || '--' }} m - 流速:{{ nameToData(station3.propertyMonitorList, '流速')[0] || '--' }} m/s - SS:{{ nameToData(station3.propertyMonitorList, 'SS')[0] || '--' }} mg/L + 水深:{{ nameToData(station3.propertyMonitorList, '水位')[valIndex3] || '--' }} m + 流速:{{ nameToData(station3.propertyMonitorList, '流速')[valIndex3] || '--' }} m/s + SS:{{ nameToData(station3.propertyMonitorList, 'SS')[valIndex3] || '--' }} mg/L + 时间:{{ station3.propertyMonitorXList[valIndex3].slice(10) || '--' }} 管径:DN500
水深:{{ '--' }} m 流速:{{ '--' }} m/s SS:{{ '--' }} mg/L + 时间: {{ '--' }} 管径:3*1.8m
- 水深:{{ nameToData(station5.propertyMonitorList, '水位')[0] || '--' }} m - 流速:{{ nameToData(station5.propertyMonitorList, '流速')[0] || '--' }} m/s - SS:{{ nameToData(station5.propertyMonitorList, 'SS')[0] || '--' }} mg/L + 水深:{{ nameToData(station5.propertyMonitorList, '水位')[valIndex5] || '--' }} m + 流速:{{ nameToData(station5.propertyMonitorList, '流速')[valIndex5] || '--' }} m/s + SS:{{ nameToData(station5.propertyMonitorList, 'SS')[valIndex5] || '--' }} mg/L + 时间:{{ station5.propertyMonitorXList[valIndex5].slice(10) || '--' }} 管径:3*1.8m
@@ -117,11 +133,16 @@ const rainDate = ref(''); const { proxy } = getCurrentInstance(); const timer = ref(null); -const station1 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station2 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station3 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station4 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station5 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); +const valIndex1 = ref(0); +const valIndex2 = ref(0); +const valIndex3 = ref(0); +const valIndex4 = ref(0); +const valIndex5 = ref(0); +const station1 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station2 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station3 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station4 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station5 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); // 获取实时数据 function getRealData() { @@ -135,6 +156,11 @@ graphicReport(params).then(res => { if (res.data.propertyMonitorList.length > 0) { station1.value = res.data; + // 取最大的值 + let max = Math.max(...nameToData(station1.value.propertyMonitorList, '水位')); + valIndex1.value = nameToData(station1.value.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); } }); @@ -142,6 +168,11 @@ graphicReport(params).then(res => { if (res.data.propertyMonitorList.length > 0) { station2.value = res.data; + // 取最大的值 + let max = Math.max(...nameToData(station2.value.propertyMonitorList, '水位')); + valIndex2.value = nameToData(station2.value.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); } }); @@ -149,6 +180,11 @@ graphicReport(params).then(res => { if (res.data.propertyMonitorList.length > 0) { station3.value = res.data; + // 取最大的值 + let max = Math.max(...nameToData(station3.value.propertyMonitorList, '水位')); + valIndex3.value = nameToData(station3.value.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); } }); @@ -158,6 +194,11 @@ graphicReport(params).then(res => { if (res.data.propertyMonitorList.length > 0) { station5.value = res.data; + // 取最大的值 + let max = Math.max(...nameToData(station5.value.propertyMonitorList, '水位')); + valIndex5.value = nameToData(station5.value.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); } }); } @@ -165,7 +206,8 @@ // 公共方法,根据监测名称来匹配对应的数值 function nameToData(data, name) { let arr = data.filter(item => item.monitorPropertyName == name); - return arr[0] ? arr[0].ylist : []; + let lists = arr[0] ? arr[0].ylist : []; + return lists; } // 海绵设施点击 diff --git a/src/views/sponeScreen/projectHM/projectSSDX.vue b/src/views/sponeScreen/projectHM/projectSSDX.vue index cb59e6a..6625f7b 100644 --- a/src/views/sponeScreen/projectHM/projectSSDX.vue +++ b/src/views/sponeScreen/projectHM/projectSSDX.vue @@ -6,7 +6,10 @@ -
{{ rainDate }} 降雨起止时间1:15-3:45,24小时累计降雨量20.4mm,降雨等级 中雨
+
+ {{ rainDate }} 降雨起止时间1:15-3:45,24小时累计降雨量20.4mm,降雨等级 + 中雨 +
1 @@ -19,7 +22,8 @@
3 - 雨水管网产流开始时间1:45,结束时间4:45,累计流量 843.5m³, 最大水深 0.5m + 雨水管网产流开始时间1:45,结束时间4:45,累计流量 843.5m³, 最大水深 + {{ nameToData(station1.propertyMonitorList, '水位')[valIndex] || '--' }}m
@@ -34,17 +38,18 @@ src="@/assets/newImgs/pumpGY/water.png" alt="" class="waterFlow" - :style="{ height: (80 * (nameToData(station1.propertyMonitorList, '水位')[0] || 0.2)) / 1.1 + 'px' }" + :style="{ height: (80 * (nameToData(station1.propertyMonitorList, '水位')[valIndex] || 0.2)) / 1.1 + 'px' }" />

管径:2.4 x 1.1米

-

实时水深:{{ nameToData(station1.propertyMonitorList, '水位')[0] || '--' }} 米

-

进口流速:{{ nameToData(station1.propertyMonitorList, '流速')[0] }} m/s

-

进口SS:{{ nameToData(station1.propertyMonitorList, 'SS')[0] || '--' }} mg/L

-

出口流速:{{ nameToData(station2.propertyMonitorList, '流速')[0] || '--' }} m/s

-

出口SS:{{ nameToData(station2.propertyMonitorList, 'SS')[0] || '--' }} mg/L

+

最大水深:{{ nameToData(station1.propertyMonitorList, '水位')[valIndex] || '--' }} 米

+

进口流速:{{ nameToData(station1.propertyMonitorList, '流速')[valIndex] }} m/s

+

进口SS:{{ nameToData(station1.propertyMonitorList, 'SS')[valIndex] || '--' }} mg/L

+

出口流速:{{ nameToData(station2.propertyMonitorList, '流速')[valIndex] || '--' }} m/s

+

出口SS:{{ nameToData(station2.propertyMonitorList, 'SS')[valIndex] || '--' }} mg/L

+

水位最深时间:{{ station1.propertyMonitorXList[valIndex] || '--' }}

@@ -76,9 +81,10 @@ const rainDate = ref(''); const { proxy } = getCurrentInstance(); const timer = ref(null); -const station1 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station2 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); +const station1 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station2 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); const showProgress = ref(false); +const valIndex = ref(0); // 获取实时数据 function getRealData() { @@ -105,7 +111,13 @@ // 公共方法,根据监测名称来匹配对应的数值 function nameToData(data, name) { let arr = data.filter(item => item.monitorPropertyName == name); - return arr[0] ? arr[0].ylist : []; + let lists = arr[0] ? arr[0].ylist : []; + // 取最大的值 + let max = Math.max(...lists); + valIndex.value = lists.findIndex(item => { + return item == max; + }); + return lists; } onMounted(() => { diff --git a/src/views/sponeScreen/waterFlood/PsssCount.vue b/src/views/sponeScreen/waterFlood/PsssCount.vue index 22134f2..8645688 100644 --- a/src/views/sponeScreen/waterFlood/PsssCount.vue +++ b/src/views/sponeScreen/waterFlood/PsssCount.vue @@ -2,7 +2,9 @@
排水设施统计 - 跳转市防汛平台 + + 跳转市防汛平台 +
diff --git a/src/views/sponeScreen/waterFlood/futureRisk.vue b/src/views/sponeScreen/waterFlood/futureRisk.vue index 2ecc1d6..ef0fa42 100644 --- a/src/views/sponeScreen/waterFlood/futureRisk.vue +++ b/src/views/sponeScreen/waterFlood/futureRisk.vue @@ -4,7 +4,7 @@

积水风险预报

- 开始 + 开始 暂停
diff --git a/public/static/libs/mapbox/style/preventionSFQ.json b/public/static/libs/mapbox/style/preventionSFQ.json index 45e5a5b..c922df2 100644 --- a/public/static/libs/mapbox/style/preventionSFQ.json +++ b/public/static/libs/mapbox/style/preventionSFQ.json @@ -2,15 +2,10 @@ "params": { "basemap": "https://supermap2.wh-nf.cn:8090/bm", "mvt": "https://supermap0.wh-nf.cn:8090/vt", - "sprites": [ - "/static/libs/mapbox/style/sprite/sprite4" - ], + "sprites": ["/static/libs/mapbox/style/sprite/sprite4"], "init": { - "center": [ - 114.312, - 34.802 - ], - "zoom": 12.6, + "center": [114.362, 34.802], + "zoom": 11.5, "style": "/static/libs/mapbox/style/customs/night-style.json" }, "l7": { @@ -22,124 +17,51 @@ ] } }, - "orders": [ - [ - "poi_label" - ], - [ - "place_label_city" - ], - [ - "road_major_label" - ], - [ - "place_label_other" - ], - [ - "point" - ] - ], + "orders": [["poi_label"], ["place_label_city"], ["road_major_label"], ["place_label_other"], ["point"]], "filter": { "wsLine1": { - "layerName": [ - "pipeline_info", - "pipeline_point" - ], + "layerName": ["pipeline_info", "pipeline_point"], "filter": [ - [ - "WS", - "HS" - ], - [ - "污水点", - "合流点" - ] + ["WS", "HS"], + ["污水点", "合流点"] ] }, "ysLine1": { - "layerName": [ - "pipeline_info", - "pipeline_point" - ], - "filter": [ - [ - "YS" - ], - [ - "雨水点" - ] - ] + "layerName": ["pipeline_info", "pipeline_point"], + "filter": [["YS"], ["雨水点"]] }, "oldCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "老城区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["老城区"]], "easeTo": { - "center": [ - 113.933, - 30.926 - ], + "center": [113.933, 30.926], "zoom": 13.6, "pitch": 55 } }, "southCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "南城新区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["南城新区"]], "easeTo": { - "center": [ - 113.933, - 30.886 - ], + "center": [113.933, 30.886], "zoom": 13.6, "pitch": 55 } }, "newCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "东城新区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["东城新区"]], "easeTo": { - "center": [ - 113.983, - 30.896 - ], + "center": [113.983, 30.896], "zoom": 13.6, "pitch": 55 } }, "allCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "东城新区", - "南城新区", - "老城区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["东城新区", "南城新区", "老城区"]], "easeTo": { - "center": [ - 113.953, - 30.906 - ], + "center": [113.953, 30.906], "zoom": 13.6, "pitch": 55 } @@ -152,45 +74,25 @@ "type": "symbol", "minzoom": 0, "maxzoom": 24, - "filter": [ - "in", - "type", - "" - ], + "filter": ["in", "type", ""], "paint": { "text-color": "#ffffff" }, "layout": { - "icon-image": [ - "match", - [ - "get", - "type" - ], - "success_zishui", - "ysj", - "error_zishui", - "wsj", - "yuanTou" - ], + "icon-image": ["match", ["get", "type"], "success_zishui", "ysj", "error_zishui", "wsj", "yuanTou"], "text-allow-overlap": false, "icon-allow-overlap": false, "icon-anchor": "center", "icon-size": 0.8, "text-field": "{name}", - "text-font": [ - "KlokanTech Noto Sans Regular" - ], + "text-font": ["KlokanTech Noto Sans Regular"], "text-size": 16, "text-line-height": 3, "text-anchor": "bottom", "text-max-width": 50, - "text-offset": [ - 0, - -1 - ] + "text-offset": [0, -1] }, "mType": "geojson" } ] -} \ No newline at end of file +} diff --git a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue index 772d11b..8ac6d45 100644 --- a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue +++ b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue @@ -48,10 +48,11 @@ import bus from '@/bus'; import { quotaCommomInfoList, hmyztQuotaDataList } from '@/api/sponeScreen/jxkh.js'; import { waterloggingPointList } from '@/api/sponeScreen/syntherticData.js'; -import { waterLoggingCleanProject } from '@/api/spongePerformance/prevention'; +import { waterLoggingCleanProject, moduleFloodResult } from '@/api/spongePerformance/prevention'; import kaifengFangHong from '@/assets/geojson/kaifeng/kaifengFangHong.json'; //防洪标准 import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js'; import tuLi72X from '@/assets/newImgs/tuLi72X.png'; +import kaifengPSFQ1 from '@/assets/geojson/kaifeng/kaifengPSFQ1.json'; const { proxy } = getCurrentInstance(); const tabList = ref([ @@ -82,11 +83,12 @@ }, 1000); } else if (curTab.value == 'nlbz') { // 内涝防治标准 - bus.emit('setIniteLayer', [{ layername: 'cesiumPaishuiArea2', show: false }]); + getNLModalData(); + setTimeout(() => { newfiberMapbox.map.easeTo({ - center: [114.315, 34.802], - zoom: 11.2, + center: [114.315, 34.782], + zoom: 10.7, }); }, 200); } else { @@ -202,7 +204,7 @@ }, }); }; -//添加弹窗 +//添加弹窗内涝点 const addwaterlogingPopup = geojson => { console.log('-----', newfiberMapbox.popupService.popups); newfiberMapbox.popupService.popups.forEach(popup => { @@ -233,6 +235,111 @@ }); }; +// 内涝标准相关 +// 数据获取 +async function getNLModalData() { + let res = await moduleFloodResult(); + if (res && res.code == 200) { + let datas = res.data; + let moduleGeojson = getFeatureGeojson(datas[0].partitionList); + let moduleBoundaryGeojson = getGeojsonBoundary(moduleGeojson); + let modulelabelGeojson = getGeojsonCenter(moduleGeojson); + //gis渲染内涝区域 + newfiberMapBoxVectorLayer.addGeojsonPolygon('builtCity', kaifengPSFQ1); //建成区图层渲染 + addModuleLayer(moduleGeojson, 'moduleFlood', '#DFA8FF'); + addModuleBoundary(moduleBoundaryGeojson, 'moduleFloodBoundary'); + addGeojsonLable(modulelabelGeojson, 'moduleFloodlabel', '#ffffff'); + } +} +//添加模型法地图 +const addModuleLayer = (geojson, layerName, color) => { + !newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson }); + !newfiberMapbox.map.getLayer(layerName) && + newfiberMapbox.map.addLayer({ + id: layerName, + type: 'fill', + source: layerName, + paint: { + 'fill-color': color, + 'fill-opacity': 1, + }, + }); +}; +const addModuleBoundary = (geojson, layerName) => { + !newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson }); + !newfiberMapbox.map.getLayer(layerName) && + newfiberMapbox.map.addLayer({ + id: layerName, + type: 'line', + source: layerName, + paint: { + 'line-color': 'rgba(94, 56, 255, 1)', //边界颜色 + 'line-width': 3, + }, + }); +}; +const addGeojsonLable = (geojson, layerName, color) => { + !newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson }); + !newfiberMapbox.map.getLayer(layerName) && + !newfiberMapbox.map.addLayer({ + id: layerName, + type: 'symbol', + source: layerName, + paint: { + 'text-color': geojson.features[0].properties.color ? ['get', 'color'] : color, + 'text-halo-color': 'rgba(0,0,0,1)', + 'text-halo-width': 2, + }, + layout: { + 'text-allow-overlap': true, + 'text-field': ['get', 'partitionName'], + 'text-font': ['KlokanTech Noto Sans Regular'], + 'text-size': 16, + 'text-line-height': 3, + 'text-anchor': 'bottom', + 'text-max-width': 50, + 'text-offset': [0, -1], + }, + }); +}; +//获取geojson +const getFeatureGeojson = dataList => { + let features = []; + dataList.forEach(data => { + let feature = turf.feature(Terraformer.WKT.parse(data.geometry), data); + features.push(feature); + }); + return { + type: 'FeatureCollection', + features: features, + }; +}; +//获取geojson边界 +const getGeojsonBoundary = geojson => { + let features = []; + geojson.features.forEach(item => { + let line = turf.polygonToLine(item.geometry); + features.push(line); + }); + return { + type: 'FeatureCollection', + features: features, + }; +}; +//获取geojson中心点 +const getGeojsonCenter = geojson => { + let features = []; + geojson.features.forEach(item => { + let center = turf.center(item); + center.properties = item.properties; + features.push(center); + }); + return { + type: 'FeatureCollection', + features: features, + }; +}; + onMounted(() => { getWaterlogging(); setTimeout(() => { diff --git a/src/views/sponeScreen/evaluationKH/index.vue b/src/views/sponeScreen/evaluationKH/index.vue index f078cd7..2b78ea4 100644 --- a/src/views/sponeScreen/evaluationKH/index.vue +++ b/src/views/sponeScreen/evaluationKH/index.vue @@ -83,7 +83,7 @@ } // 内涝防治标准 - bus.emit('setIniteLayer', [{ layername: 'cesiumPaishuiArea2', show: true }]); + newfiberMapBoxVectorLayer.removeByIds(['builtCity', 'moduleFloodBoundary', 'moduleFloodlabel', 'moduleFlood']); }; onMounted(() => { diff --git a/src/views/sponeScreen/projectHM/projectFX.vue b/src/views/sponeScreen/projectHM/projectFX.vue index 37a26ca..ef051f6 100644 --- a/src/views/sponeScreen/projectHM/projectFX.vue +++ b/src/views/sponeScreen/projectHM/projectFX.vue @@ -3,7 +3,10 @@
-
{{ rainDate }} 降雨起止时间1:15-3:45,24小时累计降雨量20.4mm,降雨等级 中雨
+
+ {{ rainDate }} 降雨起止时间1:15-3:45,24小时累计降雨量20.4mm,降雨等级 + 中雨 +
1 项目设计最大控制容积 3796.52m³ @@ -27,50 +30,63 @@ src="@/assets/newImgs/pumpGY/water.png" alt="左" class="waterFlow" - :style="{ height: (120 * (nameToData(station1.propertyMonitorList, '水位')[0] || 0.2)) / 1.1 + 'px', left: '73px', width: '846px' }" + :style="{ + height: (120 * (nameToData(station1.propertyMonitorList, '水位')[valIndex1] || 0.2)) / 1.1 + 'px', + left: '73px', + width: '846px', + }" /> 右
-

实时水深:{{ nameToData(station1.propertyMonitorList, '水位')[0] || '--' }}米

-

实时水深:{{ nameToData(station5.propertyMonitorList, '水位')[0] || '--' }}米

+

实时水深:{{ nameToData(station1.propertyMonitorList, '水位')[valIndex1] || '--' }}米

+

实时水深:{{ nameToData(station5.propertyMonitorList, '水位')[valIndex5] || '--' }}米

- 水深:{{ nameToData(station1.propertyMonitorList, '水位')[0] || '--' }} m - 流速:{{ nameToData(station1.propertyMonitorList, '流速')[0] || '--' }} m/s - SS:{{ nameToData(station1.propertyMonitorList, 'SS')[0] || '--' }} mg/L + 水深:{{ nameToData(station1.propertyMonitorList, '水位')[valIndex1] || '--' }} m + 流速:{{ nameToData(station1.propertyMonitorList, '流速')[valIndex1] || '--' }} m/s + SS:{{ nameToData(station1.propertyMonitorList, 'SS')[valIndex1] || '--' }} mg/L + 时间:{{ station1.propertyMonitorXList[valIndex1].slice(10) || '--' }} 管径:2.4*1.1m
- 水深:{{ nameToData(station2.propertyMonitorList, '水位')[0] || '--' }} m - 流速:{{ nameToData(station2.propertyMonitorList, '流速')[0] || '--' }} m/s - SS:{{ nameToData(station2.propertyMonitorList, 'SS')[0] || '--' }} mg/L + 水深:{{ nameToData(station2.propertyMonitorList, '水位')[valIndex2] || '--' }} m + 流速:{{ nameToData(station2.propertyMonitorList, '流速')[valIndex2] || '--' }} m/s + SS:{{ nameToData(station2.propertyMonitorList, 'SS')[valIndex2] || '--' }} mg/L + 时间:{{ station2.propertyMonitorXList[valIndex2].slice(10) || '--' }} 管径:2.4*1.1m
- 水深:{{ nameToData(station3.propertyMonitorList, '水位')[0] || '--' }} m - 流速:{{ nameToData(station3.propertyMonitorList, '流速')[0] || '--' }} m/s - SS:{{ nameToData(station3.propertyMonitorList, 'SS')[0] || '--' }} mg/L + 水深:{{ nameToData(station3.propertyMonitorList, '水位')[valIndex3] || '--' }} m + 流速:{{ nameToData(station3.propertyMonitorList, '流速')[valIndex3] || '--' }} m/s + SS:{{ nameToData(station3.propertyMonitorList, 'SS')[valIndex3] || '--' }} mg/L + 时间:{{ station3.propertyMonitorXList[valIndex3].slice(10) || '--' }} 管径:DN500
水深:{{ '--' }} m 流速:{{ '--' }} m/s SS:{{ '--' }} mg/L + 时间: {{ '--' }} 管径:3*1.8m
- 水深:{{ nameToData(station5.propertyMonitorList, '水位')[0] || '--' }} m - 流速:{{ nameToData(station5.propertyMonitorList, '流速')[0] || '--' }} m/s - SS:{{ nameToData(station5.propertyMonitorList, 'SS')[0] || '--' }} mg/L + 水深:{{ nameToData(station5.propertyMonitorList, '水位')[valIndex5] || '--' }} m + 流速:{{ nameToData(station5.propertyMonitorList, '流速')[valIndex5] || '--' }} m/s + SS:{{ nameToData(station5.propertyMonitorList, 'SS')[valIndex5] || '--' }} mg/L + 时间:{{ station5.propertyMonitorXList[valIndex5].slice(10) || '--' }} 管径:3*1.8m
@@ -117,11 +133,16 @@ const rainDate = ref(''); const { proxy } = getCurrentInstance(); const timer = ref(null); -const station1 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station2 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station3 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station4 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station5 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); +const valIndex1 = ref(0); +const valIndex2 = ref(0); +const valIndex3 = ref(0); +const valIndex4 = ref(0); +const valIndex5 = ref(0); +const station1 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station2 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station3 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station4 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station5 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); // 获取实时数据 function getRealData() { @@ -135,6 +156,11 @@ graphicReport(params).then(res => { if (res.data.propertyMonitorList.length > 0) { station1.value = res.data; + // 取最大的值 + let max = Math.max(...nameToData(station1.value.propertyMonitorList, '水位')); + valIndex1.value = nameToData(station1.value.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); } }); @@ -142,6 +168,11 @@ graphicReport(params).then(res => { if (res.data.propertyMonitorList.length > 0) { station2.value = res.data; + // 取最大的值 + let max = Math.max(...nameToData(station2.value.propertyMonitorList, '水位')); + valIndex2.value = nameToData(station2.value.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); } }); @@ -149,6 +180,11 @@ graphicReport(params).then(res => { if (res.data.propertyMonitorList.length > 0) { station3.value = res.data; + // 取最大的值 + let max = Math.max(...nameToData(station3.value.propertyMonitorList, '水位')); + valIndex3.value = nameToData(station3.value.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); } }); @@ -158,6 +194,11 @@ graphicReport(params).then(res => { if (res.data.propertyMonitorList.length > 0) { station5.value = res.data; + // 取最大的值 + let max = Math.max(...nameToData(station5.value.propertyMonitorList, '水位')); + valIndex5.value = nameToData(station5.value.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); } }); } @@ -165,7 +206,8 @@ // 公共方法,根据监测名称来匹配对应的数值 function nameToData(data, name) { let arr = data.filter(item => item.monitorPropertyName == name); - return arr[0] ? arr[0].ylist : []; + let lists = arr[0] ? arr[0].ylist : []; + return lists; } // 海绵设施点击 diff --git a/src/views/sponeScreen/projectHM/projectSSDX.vue b/src/views/sponeScreen/projectHM/projectSSDX.vue index cb59e6a..6625f7b 100644 --- a/src/views/sponeScreen/projectHM/projectSSDX.vue +++ b/src/views/sponeScreen/projectHM/projectSSDX.vue @@ -6,7 +6,10 @@ -
{{ rainDate }} 降雨起止时间1:15-3:45,24小时累计降雨量20.4mm,降雨等级 中雨
+
+ {{ rainDate }} 降雨起止时间1:15-3:45,24小时累计降雨量20.4mm,降雨等级 + 中雨 +
1 @@ -19,7 +22,8 @@
3 - 雨水管网产流开始时间1:45,结束时间4:45,累计流量 843.5m³, 最大水深 0.5m + 雨水管网产流开始时间1:45,结束时间4:45,累计流量 843.5m³, 最大水深 + {{ nameToData(station1.propertyMonitorList, '水位')[valIndex] || '--' }}m
@@ -34,17 +38,18 @@ src="@/assets/newImgs/pumpGY/water.png" alt="" class="waterFlow" - :style="{ height: (80 * (nameToData(station1.propertyMonitorList, '水位')[0] || 0.2)) / 1.1 + 'px' }" + :style="{ height: (80 * (nameToData(station1.propertyMonitorList, '水位')[valIndex] || 0.2)) / 1.1 + 'px' }" />

管径:2.4 x 1.1米

-

实时水深:{{ nameToData(station1.propertyMonitorList, '水位')[0] || '--' }} 米

-

进口流速:{{ nameToData(station1.propertyMonitorList, '流速')[0] }} m/s

-

进口SS:{{ nameToData(station1.propertyMonitorList, 'SS')[0] || '--' }} mg/L

-

出口流速:{{ nameToData(station2.propertyMonitorList, '流速')[0] || '--' }} m/s

-

出口SS:{{ nameToData(station2.propertyMonitorList, 'SS')[0] || '--' }} mg/L

+

最大水深:{{ nameToData(station1.propertyMonitorList, '水位')[valIndex] || '--' }} 米

+

进口流速:{{ nameToData(station1.propertyMonitorList, '流速')[valIndex] }} m/s

+

进口SS:{{ nameToData(station1.propertyMonitorList, 'SS')[valIndex] || '--' }} mg/L

+

出口流速:{{ nameToData(station2.propertyMonitorList, '流速')[valIndex] || '--' }} m/s

+

出口SS:{{ nameToData(station2.propertyMonitorList, 'SS')[valIndex] || '--' }} mg/L

+

水位最深时间:{{ station1.propertyMonitorXList[valIndex] || '--' }}

@@ -76,9 +81,10 @@ const rainDate = ref(''); const { proxy } = getCurrentInstance(); const timer = ref(null); -const station1 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station2 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); +const station1 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station2 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); const showProgress = ref(false); +const valIndex = ref(0); // 获取实时数据 function getRealData() { @@ -105,7 +111,13 @@ // 公共方法,根据监测名称来匹配对应的数值 function nameToData(data, name) { let arr = data.filter(item => item.monitorPropertyName == name); - return arr[0] ? arr[0].ylist : []; + let lists = arr[0] ? arr[0].ylist : []; + // 取最大的值 + let max = Math.max(...lists); + valIndex.value = lists.findIndex(item => { + return item == max; + }); + return lists; } onMounted(() => { diff --git a/src/views/sponeScreen/waterFlood/PsssCount.vue b/src/views/sponeScreen/waterFlood/PsssCount.vue index 22134f2..8645688 100644 --- a/src/views/sponeScreen/waterFlood/PsssCount.vue +++ b/src/views/sponeScreen/waterFlood/PsssCount.vue @@ -2,7 +2,9 @@
排水设施统计 - 跳转市防汛平台 + + 跳转市防汛平台 +
diff --git a/src/views/sponeScreen/waterFlood/futureRisk.vue b/src/views/sponeScreen/waterFlood/futureRisk.vue index 2ecc1d6..ef0fa42 100644 --- a/src/views/sponeScreen/waterFlood/futureRisk.vue +++ b/src/views/sponeScreen/waterFlood/futureRisk.vue @@ -4,7 +4,7 @@

积水风险预报

- 开始 + 开始 暂停
diff --git a/src/views/sponeScreen/waterFlood/index.vue b/src/views/sponeScreen/waterFlood/index.vue index 6223306..8f0f791 100644 --- a/src/views/sponeScreen/waterFlood/index.vue +++ b/src/views/sponeScreen/waterFlood/index.vue @@ -169,10 +169,10 @@ layername: 'waterCourse', //河道水位计 show: false, }, - { - layername: 'waterLoging', //内涝积水点 - show: false, - }, + // { + // layername: 'waterLoging', //内涝积水点 + // show: false, + // }, { layername: 'pipeMonitor', //管网监测点 show: false, diff --git a/public/static/libs/mapbox/style/preventionSFQ.json b/public/static/libs/mapbox/style/preventionSFQ.json index 45e5a5b..c922df2 100644 --- a/public/static/libs/mapbox/style/preventionSFQ.json +++ b/public/static/libs/mapbox/style/preventionSFQ.json @@ -2,15 +2,10 @@ "params": { "basemap": "https://supermap2.wh-nf.cn:8090/bm", "mvt": "https://supermap0.wh-nf.cn:8090/vt", - "sprites": [ - "/static/libs/mapbox/style/sprite/sprite4" - ], + "sprites": ["/static/libs/mapbox/style/sprite/sprite4"], "init": { - "center": [ - 114.312, - 34.802 - ], - "zoom": 12.6, + "center": [114.362, 34.802], + "zoom": 11.5, "style": "/static/libs/mapbox/style/customs/night-style.json" }, "l7": { @@ -22,124 +17,51 @@ ] } }, - "orders": [ - [ - "poi_label" - ], - [ - "place_label_city" - ], - [ - "road_major_label" - ], - [ - "place_label_other" - ], - [ - "point" - ] - ], + "orders": [["poi_label"], ["place_label_city"], ["road_major_label"], ["place_label_other"], ["point"]], "filter": { "wsLine1": { - "layerName": [ - "pipeline_info", - "pipeline_point" - ], + "layerName": ["pipeline_info", "pipeline_point"], "filter": [ - [ - "WS", - "HS" - ], - [ - "污水点", - "合流点" - ] + ["WS", "HS"], + ["污水点", "合流点"] ] }, "ysLine1": { - "layerName": [ - "pipeline_info", - "pipeline_point" - ], - "filter": [ - [ - "YS" - ], - [ - "雨水点" - ] - ] + "layerName": ["pipeline_info", "pipeline_point"], + "filter": [["YS"], ["雨水点"]] }, "oldCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "老城区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["老城区"]], "easeTo": { - "center": [ - 113.933, - 30.926 - ], + "center": [113.933, 30.926], "zoom": 13.6, "pitch": 55 } }, "southCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "南城新区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["南城新区"]], "easeTo": { - "center": [ - 113.933, - 30.886 - ], + "center": [113.933, 30.886], "zoom": 13.6, "pitch": 55 } }, "newCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "东城新区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["东城新区"]], "easeTo": { - "center": [ - 113.983, - 30.896 - ], + "center": [113.983, 30.896], "zoom": 13.6, "pitch": 55 } }, "allCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "东城新区", - "南城新区", - "老城区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["东城新区", "南城新区", "老城区"]], "easeTo": { - "center": [ - 113.953, - 30.906 - ], + "center": [113.953, 30.906], "zoom": 13.6, "pitch": 55 } @@ -152,45 +74,25 @@ "type": "symbol", "minzoom": 0, "maxzoom": 24, - "filter": [ - "in", - "type", - "" - ], + "filter": ["in", "type", ""], "paint": { "text-color": "#ffffff" }, "layout": { - "icon-image": [ - "match", - [ - "get", - "type" - ], - "success_zishui", - "ysj", - "error_zishui", - "wsj", - "yuanTou" - ], + "icon-image": ["match", ["get", "type"], "success_zishui", "ysj", "error_zishui", "wsj", "yuanTou"], "text-allow-overlap": false, "icon-allow-overlap": false, "icon-anchor": "center", "icon-size": 0.8, "text-field": "{name}", - "text-font": [ - "KlokanTech Noto Sans Regular" - ], + "text-font": ["KlokanTech Noto Sans Regular"], "text-size": 16, "text-line-height": 3, "text-anchor": "bottom", "text-max-width": 50, - "text-offset": [ - 0, - -1 - ] + "text-offset": [0, -1] }, "mType": "geojson" } ] -} \ No newline at end of file +} diff --git a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue index 772d11b..8ac6d45 100644 --- a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue +++ b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue @@ -48,10 +48,11 @@ import bus from '@/bus'; import { quotaCommomInfoList, hmyztQuotaDataList } from '@/api/sponeScreen/jxkh.js'; import { waterloggingPointList } from '@/api/sponeScreen/syntherticData.js'; -import { waterLoggingCleanProject } from '@/api/spongePerformance/prevention'; +import { waterLoggingCleanProject, moduleFloodResult } from '@/api/spongePerformance/prevention'; import kaifengFangHong from '@/assets/geojson/kaifeng/kaifengFangHong.json'; //防洪标准 import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js'; import tuLi72X from '@/assets/newImgs/tuLi72X.png'; +import kaifengPSFQ1 from '@/assets/geojson/kaifeng/kaifengPSFQ1.json'; const { proxy } = getCurrentInstance(); const tabList = ref([ @@ -82,11 +83,12 @@ }, 1000); } else if (curTab.value == 'nlbz') { // 内涝防治标准 - bus.emit('setIniteLayer', [{ layername: 'cesiumPaishuiArea2', show: false }]); + getNLModalData(); + setTimeout(() => { newfiberMapbox.map.easeTo({ - center: [114.315, 34.802], - zoom: 11.2, + center: [114.315, 34.782], + zoom: 10.7, }); }, 200); } else { @@ -202,7 +204,7 @@ }, }); }; -//添加弹窗 +//添加弹窗内涝点 const addwaterlogingPopup = geojson => { console.log('-----', newfiberMapbox.popupService.popups); newfiberMapbox.popupService.popups.forEach(popup => { @@ -233,6 +235,111 @@ }); }; +// 内涝标准相关 +// 数据获取 +async function getNLModalData() { + let res = await moduleFloodResult(); + if (res && res.code == 200) { + let datas = res.data; + let moduleGeojson = getFeatureGeojson(datas[0].partitionList); + let moduleBoundaryGeojson = getGeojsonBoundary(moduleGeojson); + let modulelabelGeojson = getGeojsonCenter(moduleGeojson); + //gis渲染内涝区域 + newfiberMapBoxVectorLayer.addGeojsonPolygon('builtCity', kaifengPSFQ1); //建成区图层渲染 + addModuleLayer(moduleGeojson, 'moduleFlood', '#DFA8FF'); + addModuleBoundary(moduleBoundaryGeojson, 'moduleFloodBoundary'); + addGeojsonLable(modulelabelGeojson, 'moduleFloodlabel', '#ffffff'); + } +} +//添加模型法地图 +const addModuleLayer = (geojson, layerName, color) => { + !newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson }); + !newfiberMapbox.map.getLayer(layerName) && + newfiberMapbox.map.addLayer({ + id: layerName, + type: 'fill', + source: layerName, + paint: { + 'fill-color': color, + 'fill-opacity': 1, + }, + }); +}; +const addModuleBoundary = (geojson, layerName) => { + !newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson }); + !newfiberMapbox.map.getLayer(layerName) && + newfiberMapbox.map.addLayer({ + id: layerName, + type: 'line', + source: layerName, + paint: { + 'line-color': 'rgba(94, 56, 255, 1)', //边界颜色 + 'line-width': 3, + }, + }); +}; +const addGeojsonLable = (geojson, layerName, color) => { + !newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson }); + !newfiberMapbox.map.getLayer(layerName) && + !newfiberMapbox.map.addLayer({ + id: layerName, + type: 'symbol', + source: layerName, + paint: { + 'text-color': geojson.features[0].properties.color ? ['get', 'color'] : color, + 'text-halo-color': 'rgba(0,0,0,1)', + 'text-halo-width': 2, + }, + layout: { + 'text-allow-overlap': true, + 'text-field': ['get', 'partitionName'], + 'text-font': ['KlokanTech Noto Sans Regular'], + 'text-size': 16, + 'text-line-height': 3, + 'text-anchor': 'bottom', + 'text-max-width': 50, + 'text-offset': [0, -1], + }, + }); +}; +//获取geojson +const getFeatureGeojson = dataList => { + let features = []; + dataList.forEach(data => { + let feature = turf.feature(Terraformer.WKT.parse(data.geometry), data); + features.push(feature); + }); + return { + type: 'FeatureCollection', + features: features, + }; +}; +//获取geojson边界 +const getGeojsonBoundary = geojson => { + let features = []; + geojson.features.forEach(item => { + let line = turf.polygonToLine(item.geometry); + features.push(line); + }); + return { + type: 'FeatureCollection', + features: features, + }; +}; +//获取geojson中心点 +const getGeojsonCenter = geojson => { + let features = []; + geojson.features.forEach(item => { + let center = turf.center(item); + center.properties = item.properties; + features.push(center); + }); + return { + type: 'FeatureCollection', + features: features, + }; +}; + onMounted(() => { getWaterlogging(); setTimeout(() => { diff --git a/src/views/sponeScreen/evaluationKH/index.vue b/src/views/sponeScreen/evaluationKH/index.vue index f078cd7..2b78ea4 100644 --- a/src/views/sponeScreen/evaluationKH/index.vue +++ b/src/views/sponeScreen/evaluationKH/index.vue @@ -83,7 +83,7 @@ } // 内涝防治标准 - bus.emit('setIniteLayer', [{ layername: 'cesiumPaishuiArea2', show: true }]); + newfiberMapBoxVectorLayer.removeByIds(['builtCity', 'moduleFloodBoundary', 'moduleFloodlabel', 'moduleFlood']); }; onMounted(() => { diff --git a/src/views/sponeScreen/projectHM/projectFX.vue b/src/views/sponeScreen/projectHM/projectFX.vue index 37a26ca..ef051f6 100644 --- a/src/views/sponeScreen/projectHM/projectFX.vue +++ b/src/views/sponeScreen/projectHM/projectFX.vue @@ -3,7 +3,10 @@
-
{{ rainDate }} 降雨起止时间1:15-3:45,24小时累计降雨量20.4mm,降雨等级 中雨
+
+ {{ rainDate }} 降雨起止时间1:15-3:45,24小时累计降雨量20.4mm,降雨等级 + 中雨 +
1 项目设计最大控制容积 3796.52m³ @@ -27,50 +30,63 @@ src="@/assets/newImgs/pumpGY/water.png" alt="左" class="waterFlow" - :style="{ height: (120 * (nameToData(station1.propertyMonitorList, '水位')[0] || 0.2)) / 1.1 + 'px', left: '73px', width: '846px' }" + :style="{ + height: (120 * (nameToData(station1.propertyMonitorList, '水位')[valIndex1] || 0.2)) / 1.1 + 'px', + left: '73px', + width: '846px', + }" /> 右
-

实时水深:{{ nameToData(station1.propertyMonitorList, '水位')[0] || '--' }}米

-

实时水深:{{ nameToData(station5.propertyMonitorList, '水位')[0] || '--' }}米

+

实时水深:{{ nameToData(station1.propertyMonitorList, '水位')[valIndex1] || '--' }}米

+

实时水深:{{ nameToData(station5.propertyMonitorList, '水位')[valIndex5] || '--' }}米

- 水深:{{ nameToData(station1.propertyMonitorList, '水位')[0] || '--' }} m - 流速:{{ nameToData(station1.propertyMonitorList, '流速')[0] || '--' }} m/s - SS:{{ nameToData(station1.propertyMonitorList, 'SS')[0] || '--' }} mg/L + 水深:{{ nameToData(station1.propertyMonitorList, '水位')[valIndex1] || '--' }} m + 流速:{{ nameToData(station1.propertyMonitorList, '流速')[valIndex1] || '--' }} m/s + SS:{{ nameToData(station1.propertyMonitorList, 'SS')[valIndex1] || '--' }} mg/L + 时间:{{ station1.propertyMonitorXList[valIndex1].slice(10) || '--' }} 管径:2.4*1.1m
- 水深:{{ nameToData(station2.propertyMonitorList, '水位')[0] || '--' }} m - 流速:{{ nameToData(station2.propertyMonitorList, '流速')[0] || '--' }} m/s - SS:{{ nameToData(station2.propertyMonitorList, 'SS')[0] || '--' }} mg/L + 水深:{{ nameToData(station2.propertyMonitorList, '水位')[valIndex2] || '--' }} m + 流速:{{ nameToData(station2.propertyMonitorList, '流速')[valIndex2] || '--' }} m/s + SS:{{ nameToData(station2.propertyMonitorList, 'SS')[valIndex2] || '--' }} mg/L + 时间:{{ station2.propertyMonitorXList[valIndex2].slice(10) || '--' }} 管径:2.4*1.1m
- 水深:{{ nameToData(station3.propertyMonitorList, '水位')[0] || '--' }} m - 流速:{{ nameToData(station3.propertyMonitorList, '流速')[0] || '--' }} m/s - SS:{{ nameToData(station3.propertyMonitorList, 'SS')[0] || '--' }} mg/L + 水深:{{ nameToData(station3.propertyMonitorList, '水位')[valIndex3] || '--' }} m + 流速:{{ nameToData(station3.propertyMonitorList, '流速')[valIndex3] || '--' }} m/s + SS:{{ nameToData(station3.propertyMonitorList, 'SS')[valIndex3] || '--' }} mg/L + 时间:{{ station3.propertyMonitorXList[valIndex3].slice(10) || '--' }} 管径:DN500
水深:{{ '--' }} m 流速:{{ '--' }} m/s SS:{{ '--' }} mg/L + 时间: {{ '--' }} 管径:3*1.8m
- 水深:{{ nameToData(station5.propertyMonitorList, '水位')[0] || '--' }} m - 流速:{{ nameToData(station5.propertyMonitorList, '流速')[0] || '--' }} m/s - SS:{{ nameToData(station5.propertyMonitorList, 'SS')[0] || '--' }} mg/L + 水深:{{ nameToData(station5.propertyMonitorList, '水位')[valIndex5] || '--' }} m + 流速:{{ nameToData(station5.propertyMonitorList, '流速')[valIndex5] || '--' }} m/s + SS:{{ nameToData(station5.propertyMonitorList, 'SS')[valIndex5] || '--' }} mg/L + 时间:{{ station5.propertyMonitorXList[valIndex5].slice(10) || '--' }} 管径:3*1.8m
@@ -117,11 +133,16 @@ const rainDate = ref(''); const { proxy } = getCurrentInstance(); const timer = ref(null); -const station1 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station2 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station3 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station4 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station5 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); +const valIndex1 = ref(0); +const valIndex2 = ref(0); +const valIndex3 = ref(0); +const valIndex4 = ref(0); +const valIndex5 = ref(0); +const station1 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station2 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station3 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station4 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station5 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); // 获取实时数据 function getRealData() { @@ -135,6 +156,11 @@ graphicReport(params).then(res => { if (res.data.propertyMonitorList.length > 0) { station1.value = res.data; + // 取最大的值 + let max = Math.max(...nameToData(station1.value.propertyMonitorList, '水位')); + valIndex1.value = nameToData(station1.value.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); } }); @@ -142,6 +168,11 @@ graphicReport(params).then(res => { if (res.data.propertyMonitorList.length > 0) { station2.value = res.data; + // 取最大的值 + let max = Math.max(...nameToData(station2.value.propertyMonitorList, '水位')); + valIndex2.value = nameToData(station2.value.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); } }); @@ -149,6 +180,11 @@ graphicReport(params).then(res => { if (res.data.propertyMonitorList.length > 0) { station3.value = res.data; + // 取最大的值 + let max = Math.max(...nameToData(station3.value.propertyMonitorList, '水位')); + valIndex3.value = nameToData(station3.value.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); } }); @@ -158,6 +194,11 @@ graphicReport(params).then(res => { if (res.data.propertyMonitorList.length > 0) { station5.value = res.data; + // 取最大的值 + let max = Math.max(...nameToData(station5.value.propertyMonitorList, '水位')); + valIndex5.value = nameToData(station5.value.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); } }); } @@ -165,7 +206,8 @@ // 公共方法,根据监测名称来匹配对应的数值 function nameToData(data, name) { let arr = data.filter(item => item.monitorPropertyName == name); - return arr[0] ? arr[0].ylist : []; + let lists = arr[0] ? arr[0].ylist : []; + return lists; } // 海绵设施点击 diff --git a/src/views/sponeScreen/projectHM/projectSSDX.vue b/src/views/sponeScreen/projectHM/projectSSDX.vue index cb59e6a..6625f7b 100644 --- a/src/views/sponeScreen/projectHM/projectSSDX.vue +++ b/src/views/sponeScreen/projectHM/projectSSDX.vue @@ -6,7 +6,10 @@ -
{{ rainDate }} 降雨起止时间1:15-3:45,24小时累计降雨量20.4mm,降雨等级 中雨
+
+ {{ rainDate }} 降雨起止时间1:15-3:45,24小时累计降雨量20.4mm,降雨等级 + 中雨 +
1 @@ -19,7 +22,8 @@
3 - 雨水管网产流开始时间1:45,结束时间4:45,累计流量 843.5m³, 最大水深 0.5m + 雨水管网产流开始时间1:45,结束时间4:45,累计流量 843.5m³, 最大水深 + {{ nameToData(station1.propertyMonitorList, '水位')[valIndex] || '--' }}m
@@ -34,17 +38,18 @@ src="@/assets/newImgs/pumpGY/water.png" alt="" class="waterFlow" - :style="{ height: (80 * (nameToData(station1.propertyMonitorList, '水位')[0] || 0.2)) / 1.1 + 'px' }" + :style="{ height: (80 * (nameToData(station1.propertyMonitorList, '水位')[valIndex] || 0.2)) / 1.1 + 'px' }" />

管径:2.4 x 1.1米

-

实时水深:{{ nameToData(station1.propertyMonitorList, '水位')[0] || '--' }} 米

-

进口流速:{{ nameToData(station1.propertyMonitorList, '流速')[0] }} m/s

-

进口SS:{{ nameToData(station1.propertyMonitorList, 'SS')[0] || '--' }} mg/L

-

出口流速:{{ nameToData(station2.propertyMonitorList, '流速')[0] || '--' }} m/s

-

出口SS:{{ nameToData(station2.propertyMonitorList, 'SS')[0] || '--' }} mg/L

+

最大水深:{{ nameToData(station1.propertyMonitorList, '水位')[valIndex] || '--' }} 米

+

进口流速:{{ nameToData(station1.propertyMonitorList, '流速')[valIndex] }} m/s

+

进口SS:{{ nameToData(station1.propertyMonitorList, 'SS')[valIndex] || '--' }} mg/L

+

出口流速:{{ nameToData(station2.propertyMonitorList, '流速')[valIndex] || '--' }} m/s

+

出口SS:{{ nameToData(station2.propertyMonitorList, 'SS')[valIndex] || '--' }} mg/L

+

水位最深时间:{{ station1.propertyMonitorXList[valIndex] || '--' }}

@@ -76,9 +81,10 @@ const rainDate = ref(''); const { proxy } = getCurrentInstance(); const timer = ref(null); -const station1 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station2 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); +const station1 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station2 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); const showProgress = ref(false); +const valIndex = ref(0); // 获取实时数据 function getRealData() { @@ -105,7 +111,13 @@ // 公共方法,根据监测名称来匹配对应的数值 function nameToData(data, name) { let arr = data.filter(item => item.monitorPropertyName == name); - return arr[0] ? arr[0].ylist : []; + let lists = arr[0] ? arr[0].ylist : []; + // 取最大的值 + let max = Math.max(...lists); + valIndex.value = lists.findIndex(item => { + return item == max; + }); + return lists; } onMounted(() => { diff --git a/src/views/sponeScreen/waterFlood/PsssCount.vue b/src/views/sponeScreen/waterFlood/PsssCount.vue index 22134f2..8645688 100644 --- a/src/views/sponeScreen/waterFlood/PsssCount.vue +++ b/src/views/sponeScreen/waterFlood/PsssCount.vue @@ -2,7 +2,9 @@
排水设施统计 - 跳转市防汛平台 + + 跳转市防汛平台 +
diff --git a/src/views/sponeScreen/waterFlood/futureRisk.vue b/src/views/sponeScreen/waterFlood/futureRisk.vue index 2ecc1d6..ef0fa42 100644 --- a/src/views/sponeScreen/waterFlood/futureRisk.vue +++ b/src/views/sponeScreen/waterFlood/futureRisk.vue @@ -4,7 +4,7 @@

积水风险预报

- 开始 + 开始 暂停
diff --git a/src/views/sponeScreen/waterFlood/index.vue b/src/views/sponeScreen/waterFlood/index.vue index 6223306..8f0f791 100644 --- a/src/views/sponeScreen/waterFlood/index.vue +++ b/src/views/sponeScreen/waterFlood/index.vue @@ -169,10 +169,10 @@ layername: 'waterCourse', //河道水位计 show: false, }, - { - layername: 'waterLoging', //内涝积水点 - show: false, - }, + // { + // layername: 'waterLoging', //内涝积水点 + // show: false, + // }, { layername: 'pipeMonitor', //管网监测点 show: false, diff --git a/src/views/sponeScreen/waterFlood/pipeDetail.vue b/src/views/sponeScreen/waterFlood/pipeDetail.vue index cba8ce1..0c406c3 100644 --- a/src/views/sponeScreen/waterFlood/pipeDetail.vue +++ b/src/views/sponeScreen/waterFlood/pipeDetail.vue @@ -115,6 +115,7 @@ const realData = ref({}); const pipeDetail = ref({}); const pipeLoading = ref(true); +const valIndex = ref(0); const props = defineProps({ pipeParams: { @@ -212,17 +213,23 @@ let res = await graphicReport(params); if (res && res.code == 200) { let datas = res.data; - realData.value.z = nameToData(datas.propertyMonitorList, '水位')[0]; - realData.value.va = nameToData(datas.propertyMonitorList, '流速')[0]; - realData.value.turb = nameToData(datas.propertyMonitorList, 'SS')[0]; - realData.value.tt = datas.propertyMonitorXList[0]; + // 取最大的值 + let max = Math.max(...nameToData(datas.propertyMonitorList, '水位')); + valIndex.value = nameToData(datas.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); + realData.value.z = nameToData(datas.propertyMonitorList, '水位')[valIndex.value]; + realData.value.va = nameToData(datas.propertyMonitorList, '流速')[valIndex.value]; + realData.value.turb = nameToData(datas.propertyMonitorList, 'SS')[valIndex.value]; + realData.value.tt = datas.propertyMonitorXList[valIndex.value]; realData.value.stName = datas.propertyMonitorList[0].stName; } } // 公共方法,根据监测名称来匹配对应的数值 function nameToData(data, name) { let arr = data.filter(item => item.monitorPropertyName == name); - return arr[0] ? arr[0].ylist : []; + let lists = arr[0] ? arr[0].ylist : []; + return lists; } // 获取站点详情 diff --git a/public/static/libs/mapbox/style/preventionSFQ.json b/public/static/libs/mapbox/style/preventionSFQ.json index 45e5a5b..c922df2 100644 --- a/public/static/libs/mapbox/style/preventionSFQ.json +++ b/public/static/libs/mapbox/style/preventionSFQ.json @@ -2,15 +2,10 @@ "params": { "basemap": "https://supermap2.wh-nf.cn:8090/bm", "mvt": "https://supermap0.wh-nf.cn:8090/vt", - "sprites": [ - "/static/libs/mapbox/style/sprite/sprite4" - ], + "sprites": ["/static/libs/mapbox/style/sprite/sprite4"], "init": { - "center": [ - 114.312, - 34.802 - ], - "zoom": 12.6, + "center": [114.362, 34.802], + "zoom": 11.5, "style": "/static/libs/mapbox/style/customs/night-style.json" }, "l7": { @@ -22,124 +17,51 @@ ] } }, - "orders": [ - [ - "poi_label" - ], - [ - "place_label_city" - ], - [ - "road_major_label" - ], - [ - "place_label_other" - ], - [ - "point" - ] - ], + "orders": [["poi_label"], ["place_label_city"], ["road_major_label"], ["place_label_other"], ["point"]], "filter": { "wsLine1": { - "layerName": [ - "pipeline_info", - "pipeline_point" - ], + "layerName": ["pipeline_info", "pipeline_point"], "filter": [ - [ - "WS", - "HS" - ], - [ - "污水点", - "合流点" - ] + ["WS", "HS"], + ["污水点", "合流点"] ] }, "ysLine1": { - "layerName": [ - "pipeline_info", - "pipeline_point" - ], - "filter": [ - [ - "YS" - ], - [ - "雨水点" - ] - ] + "layerName": ["pipeline_info", "pipeline_point"], + "filter": [["YS"], ["雨水点"]] }, "oldCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "老城区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["老城区"]], "easeTo": { - "center": [ - 113.933, - 30.926 - ], + "center": [113.933, 30.926], "zoom": 13.6, "pitch": 55 } }, "southCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "南城新区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["南城新区"]], "easeTo": { - "center": [ - 113.933, - 30.886 - ], + "center": [113.933, 30.886], "zoom": 13.6, "pitch": 55 } }, "newCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "东城新区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["东城新区"]], "easeTo": { - "center": [ - 113.983, - 30.896 - ], + "center": [113.983, 30.896], "zoom": 13.6, "pitch": 55 } }, "allCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "东城新区", - "南城新区", - "老城区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["东城新区", "南城新区", "老城区"]], "easeTo": { - "center": [ - 113.953, - 30.906 - ], + "center": [113.953, 30.906], "zoom": 13.6, "pitch": 55 } @@ -152,45 +74,25 @@ "type": "symbol", "minzoom": 0, "maxzoom": 24, - "filter": [ - "in", - "type", - "" - ], + "filter": ["in", "type", ""], "paint": { "text-color": "#ffffff" }, "layout": { - "icon-image": [ - "match", - [ - "get", - "type" - ], - "success_zishui", - "ysj", - "error_zishui", - "wsj", - "yuanTou" - ], + "icon-image": ["match", ["get", "type"], "success_zishui", "ysj", "error_zishui", "wsj", "yuanTou"], "text-allow-overlap": false, "icon-allow-overlap": false, "icon-anchor": "center", "icon-size": 0.8, "text-field": "{name}", - "text-font": [ - "KlokanTech Noto Sans Regular" - ], + "text-font": ["KlokanTech Noto Sans Regular"], "text-size": 16, "text-line-height": 3, "text-anchor": "bottom", "text-max-width": 50, - "text-offset": [ - 0, - -1 - ] + "text-offset": [0, -1] }, "mType": "geojson" } ] -} \ No newline at end of file +} diff --git a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue index 772d11b..8ac6d45 100644 --- a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue +++ b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue @@ -48,10 +48,11 @@ import bus from '@/bus'; import { quotaCommomInfoList, hmyztQuotaDataList } from '@/api/sponeScreen/jxkh.js'; import { waterloggingPointList } from '@/api/sponeScreen/syntherticData.js'; -import { waterLoggingCleanProject } from '@/api/spongePerformance/prevention'; +import { waterLoggingCleanProject, moduleFloodResult } from '@/api/spongePerformance/prevention'; import kaifengFangHong from '@/assets/geojson/kaifeng/kaifengFangHong.json'; //防洪标准 import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js'; import tuLi72X from '@/assets/newImgs/tuLi72X.png'; +import kaifengPSFQ1 from '@/assets/geojson/kaifeng/kaifengPSFQ1.json'; const { proxy } = getCurrentInstance(); const tabList = ref([ @@ -82,11 +83,12 @@ }, 1000); } else if (curTab.value == 'nlbz') { // 内涝防治标准 - bus.emit('setIniteLayer', [{ layername: 'cesiumPaishuiArea2', show: false }]); + getNLModalData(); + setTimeout(() => { newfiberMapbox.map.easeTo({ - center: [114.315, 34.802], - zoom: 11.2, + center: [114.315, 34.782], + zoom: 10.7, }); }, 200); } else { @@ -202,7 +204,7 @@ }, }); }; -//添加弹窗 +//添加弹窗内涝点 const addwaterlogingPopup = geojson => { console.log('-----', newfiberMapbox.popupService.popups); newfiberMapbox.popupService.popups.forEach(popup => { @@ -233,6 +235,111 @@ }); }; +// 内涝标准相关 +// 数据获取 +async function getNLModalData() { + let res = await moduleFloodResult(); + if (res && res.code == 200) { + let datas = res.data; + let moduleGeojson = getFeatureGeojson(datas[0].partitionList); + let moduleBoundaryGeojson = getGeojsonBoundary(moduleGeojson); + let modulelabelGeojson = getGeojsonCenter(moduleGeojson); + //gis渲染内涝区域 + newfiberMapBoxVectorLayer.addGeojsonPolygon('builtCity', kaifengPSFQ1); //建成区图层渲染 + addModuleLayer(moduleGeojson, 'moduleFlood', '#DFA8FF'); + addModuleBoundary(moduleBoundaryGeojson, 'moduleFloodBoundary'); + addGeojsonLable(modulelabelGeojson, 'moduleFloodlabel', '#ffffff'); + } +} +//添加模型法地图 +const addModuleLayer = (geojson, layerName, color) => { + !newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson }); + !newfiberMapbox.map.getLayer(layerName) && + newfiberMapbox.map.addLayer({ + id: layerName, + type: 'fill', + source: layerName, + paint: { + 'fill-color': color, + 'fill-opacity': 1, + }, + }); +}; +const addModuleBoundary = (geojson, layerName) => { + !newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson }); + !newfiberMapbox.map.getLayer(layerName) && + newfiberMapbox.map.addLayer({ + id: layerName, + type: 'line', + source: layerName, + paint: { + 'line-color': 'rgba(94, 56, 255, 1)', //边界颜色 + 'line-width': 3, + }, + }); +}; +const addGeojsonLable = (geojson, layerName, color) => { + !newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson }); + !newfiberMapbox.map.getLayer(layerName) && + !newfiberMapbox.map.addLayer({ + id: layerName, + type: 'symbol', + source: layerName, + paint: { + 'text-color': geojson.features[0].properties.color ? ['get', 'color'] : color, + 'text-halo-color': 'rgba(0,0,0,1)', + 'text-halo-width': 2, + }, + layout: { + 'text-allow-overlap': true, + 'text-field': ['get', 'partitionName'], + 'text-font': ['KlokanTech Noto Sans Regular'], + 'text-size': 16, + 'text-line-height': 3, + 'text-anchor': 'bottom', + 'text-max-width': 50, + 'text-offset': [0, -1], + }, + }); +}; +//获取geojson +const getFeatureGeojson = dataList => { + let features = []; + dataList.forEach(data => { + let feature = turf.feature(Terraformer.WKT.parse(data.geometry), data); + features.push(feature); + }); + return { + type: 'FeatureCollection', + features: features, + }; +}; +//获取geojson边界 +const getGeojsonBoundary = geojson => { + let features = []; + geojson.features.forEach(item => { + let line = turf.polygonToLine(item.geometry); + features.push(line); + }); + return { + type: 'FeatureCollection', + features: features, + }; +}; +//获取geojson中心点 +const getGeojsonCenter = geojson => { + let features = []; + geojson.features.forEach(item => { + let center = turf.center(item); + center.properties = item.properties; + features.push(center); + }); + return { + type: 'FeatureCollection', + features: features, + }; +}; + onMounted(() => { getWaterlogging(); setTimeout(() => { diff --git a/src/views/sponeScreen/evaluationKH/index.vue b/src/views/sponeScreen/evaluationKH/index.vue index f078cd7..2b78ea4 100644 --- a/src/views/sponeScreen/evaluationKH/index.vue +++ b/src/views/sponeScreen/evaluationKH/index.vue @@ -83,7 +83,7 @@ } // 内涝防治标准 - bus.emit('setIniteLayer', [{ layername: 'cesiumPaishuiArea2', show: true }]); + newfiberMapBoxVectorLayer.removeByIds(['builtCity', 'moduleFloodBoundary', 'moduleFloodlabel', 'moduleFlood']); }; onMounted(() => { diff --git a/src/views/sponeScreen/projectHM/projectFX.vue b/src/views/sponeScreen/projectHM/projectFX.vue index 37a26ca..ef051f6 100644 --- a/src/views/sponeScreen/projectHM/projectFX.vue +++ b/src/views/sponeScreen/projectHM/projectFX.vue @@ -3,7 +3,10 @@
-
{{ rainDate }} 降雨起止时间1:15-3:45,24小时累计降雨量20.4mm,降雨等级 中雨
+
+ {{ rainDate }} 降雨起止时间1:15-3:45,24小时累计降雨量20.4mm,降雨等级 + 中雨 +
1 项目设计最大控制容积 3796.52m³ @@ -27,50 +30,63 @@ src="@/assets/newImgs/pumpGY/water.png" alt="左" class="waterFlow" - :style="{ height: (120 * (nameToData(station1.propertyMonitorList, '水位')[0] || 0.2)) / 1.1 + 'px', left: '73px', width: '846px' }" + :style="{ + height: (120 * (nameToData(station1.propertyMonitorList, '水位')[valIndex1] || 0.2)) / 1.1 + 'px', + left: '73px', + width: '846px', + }" /> 右
-

实时水深:{{ nameToData(station1.propertyMonitorList, '水位')[0] || '--' }}米

-

实时水深:{{ nameToData(station5.propertyMonitorList, '水位')[0] || '--' }}米

+

实时水深:{{ nameToData(station1.propertyMonitorList, '水位')[valIndex1] || '--' }}米

+

实时水深:{{ nameToData(station5.propertyMonitorList, '水位')[valIndex5] || '--' }}米

- 水深:{{ nameToData(station1.propertyMonitorList, '水位')[0] || '--' }} m - 流速:{{ nameToData(station1.propertyMonitorList, '流速')[0] || '--' }} m/s - SS:{{ nameToData(station1.propertyMonitorList, 'SS')[0] || '--' }} mg/L + 水深:{{ nameToData(station1.propertyMonitorList, '水位')[valIndex1] || '--' }} m + 流速:{{ nameToData(station1.propertyMonitorList, '流速')[valIndex1] || '--' }} m/s + SS:{{ nameToData(station1.propertyMonitorList, 'SS')[valIndex1] || '--' }} mg/L + 时间:{{ station1.propertyMonitorXList[valIndex1].slice(10) || '--' }} 管径:2.4*1.1m
- 水深:{{ nameToData(station2.propertyMonitorList, '水位')[0] || '--' }} m - 流速:{{ nameToData(station2.propertyMonitorList, '流速')[0] || '--' }} m/s - SS:{{ nameToData(station2.propertyMonitorList, 'SS')[0] || '--' }} mg/L + 水深:{{ nameToData(station2.propertyMonitorList, '水位')[valIndex2] || '--' }} m + 流速:{{ nameToData(station2.propertyMonitorList, '流速')[valIndex2] || '--' }} m/s + SS:{{ nameToData(station2.propertyMonitorList, 'SS')[valIndex2] || '--' }} mg/L + 时间:{{ station2.propertyMonitorXList[valIndex2].slice(10) || '--' }} 管径:2.4*1.1m
- 水深:{{ nameToData(station3.propertyMonitorList, '水位')[0] || '--' }} m - 流速:{{ nameToData(station3.propertyMonitorList, '流速')[0] || '--' }} m/s - SS:{{ nameToData(station3.propertyMonitorList, 'SS')[0] || '--' }} mg/L + 水深:{{ nameToData(station3.propertyMonitorList, '水位')[valIndex3] || '--' }} m + 流速:{{ nameToData(station3.propertyMonitorList, '流速')[valIndex3] || '--' }} m/s + SS:{{ nameToData(station3.propertyMonitorList, 'SS')[valIndex3] || '--' }} mg/L + 时间:{{ station3.propertyMonitorXList[valIndex3].slice(10) || '--' }} 管径:DN500
水深:{{ '--' }} m 流速:{{ '--' }} m/s SS:{{ '--' }} mg/L + 时间: {{ '--' }} 管径:3*1.8m
- 水深:{{ nameToData(station5.propertyMonitorList, '水位')[0] || '--' }} m - 流速:{{ nameToData(station5.propertyMonitorList, '流速')[0] || '--' }} m/s - SS:{{ nameToData(station5.propertyMonitorList, 'SS')[0] || '--' }} mg/L + 水深:{{ nameToData(station5.propertyMonitorList, '水位')[valIndex5] || '--' }} m + 流速:{{ nameToData(station5.propertyMonitorList, '流速')[valIndex5] || '--' }} m/s + SS:{{ nameToData(station5.propertyMonitorList, 'SS')[valIndex5] || '--' }} mg/L + 时间:{{ station5.propertyMonitorXList[valIndex5].slice(10) || '--' }} 管径:3*1.8m
@@ -117,11 +133,16 @@ const rainDate = ref(''); const { proxy } = getCurrentInstance(); const timer = ref(null); -const station1 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station2 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station3 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station4 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station5 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); +const valIndex1 = ref(0); +const valIndex2 = ref(0); +const valIndex3 = ref(0); +const valIndex4 = ref(0); +const valIndex5 = ref(0); +const station1 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station2 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station3 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station4 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station5 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); // 获取实时数据 function getRealData() { @@ -135,6 +156,11 @@ graphicReport(params).then(res => { if (res.data.propertyMonitorList.length > 0) { station1.value = res.data; + // 取最大的值 + let max = Math.max(...nameToData(station1.value.propertyMonitorList, '水位')); + valIndex1.value = nameToData(station1.value.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); } }); @@ -142,6 +168,11 @@ graphicReport(params).then(res => { if (res.data.propertyMonitorList.length > 0) { station2.value = res.data; + // 取最大的值 + let max = Math.max(...nameToData(station2.value.propertyMonitorList, '水位')); + valIndex2.value = nameToData(station2.value.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); } }); @@ -149,6 +180,11 @@ graphicReport(params).then(res => { if (res.data.propertyMonitorList.length > 0) { station3.value = res.data; + // 取最大的值 + let max = Math.max(...nameToData(station3.value.propertyMonitorList, '水位')); + valIndex3.value = nameToData(station3.value.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); } }); @@ -158,6 +194,11 @@ graphicReport(params).then(res => { if (res.data.propertyMonitorList.length > 0) { station5.value = res.data; + // 取最大的值 + let max = Math.max(...nameToData(station5.value.propertyMonitorList, '水位')); + valIndex5.value = nameToData(station5.value.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); } }); } @@ -165,7 +206,8 @@ // 公共方法,根据监测名称来匹配对应的数值 function nameToData(data, name) { let arr = data.filter(item => item.monitorPropertyName == name); - return arr[0] ? arr[0].ylist : []; + let lists = arr[0] ? arr[0].ylist : []; + return lists; } // 海绵设施点击 diff --git a/src/views/sponeScreen/projectHM/projectSSDX.vue b/src/views/sponeScreen/projectHM/projectSSDX.vue index cb59e6a..6625f7b 100644 --- a/src/views/sponeScreen/projectHM/projectSSDX.vue +++ b/src/views/sponeScreen/projectHM/projectSSDX.vue @@ -6,7 +6,10 @@ -
{{ rainDate }} 降雨起止时间1:15-3:45,24小时累计降雨量20.4mm,降雨等级 中雨
+
+ {{ rainDate }} 降雨起止时间1:15-3:45,24小时累计降雨量20.4mm,降雨等级 + 中雨 +
1 @@ -19,7 +22,8 @@
3 - 雨水管网产流开始时间1:45,结束时间4:45,累计流量 843.5m³, 最大水深 0.5m + 雨水管网产流开始时间1:45,结束时间4:45,累计流量 843.5m³, 最大水深 + {{ nameToData(station1.propertyMonitorList, '水位')[valIndex] || '--' }}m
@@ -34,17 +38,18 @@ src="@/assets/newImgs/pumpGY/water.png" alt="" class="waterFlow" - :style="{ height: (80 * (nameToData(station1.propertyMonitorList, '水位')[0] || 0.2)) / 1.1 + 'px' }" + :style="{ height: (80 * (nameToData(station1.propertyMonitorList, '水位')[valIndex] || 0.2)) / 1.1 + 'px' }" />

管径:2.4 x 1.1米

-

实时水深:{{ nameToData(station1.propertyMonitorList, '水位')[0] || '--' }} 米

-

进口流速:{{ nameToData(station1.propertyMonitorList, '流速')[0] }} m/s

-

进口SS:{{ nameToData(station1.propertyMonitorList, 'SS')[0] || '--' }} mg/L

-

出口流速:{{ nameToData(station2.propertyMonitorList, '流速')[0] || '--' }} m/s

-

出口SS:{{ nameToData(station2.propertyMonitorList, 'SS')[0] || '--' }} mg/L

+

最大水深:{{ nameToData(station1.propertyMonitorList, '水位')[valIndex] || '--' }} 米

+

进口流速:{{ nameToData(station1.propertyMonitorList, '流速')[valIndex] }} m/s

+

进口SS:{{ nameToData(station1.propertyMonitorList, 'SS')[valIndex] || '--' }} mg/L

+

出口流速:{{ nameToData(station2.propertyMonitorList, '流速')[valIndex] || '--' }} m/s

+

出口SS:{{ nameToData(station2.propertyMonitorList, 'SS')[valIndex] || '--' }} mg/L

+

水位最深时间:{{ station1.propertyMonitorXList[valIndex] || '--' }}

@@ -76,9 +81,10 @@ const rainDate = ref(''); const { proxy } = getCurrentInstance(); const timer = ref(null); -const station1 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station2 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); +const station1 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station2 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); const showProgress = ref(false); +const valIndex = ref(0); // 获取实时数据 function getRealData() { @@ -105,7 +111,13 @@ // 公共方法,根据监测名称来匹配对应的数值 function nameToData(data, name) { let arr = data.filter(item => item.monitorPropertyName == name); - return arr[0] ? arr[0].ylist : []; + let lists = arr[0] ? arr[0].ylist : []; + // 取最大的值 + let max = Math.max(...lists); + valIndex.value = lists.findIndex(item => { + return item == max; + }); + return lists; } onMounted(() => { diff --git a/src/views/sponeScreen/waterFlood/PsssCount.vue b/src/views/sponeScreen/waterFlood/PsssCount.vue index 22134f2..8645688 100644 --- a/src/views/sponeScreen/waterFlood/PsssCount.vue +++ b/src/views/sponeScreen/waterFlood/PsssCount.vue @@ -2,7 +2,9 @@
排水设施统计 - 跳转市防汛平台 + + 跳转市防汛平台 +
diff --git a/src/views/sponeScreen/waterFlood/futureRisk.vue b/src/views/sponeScreen/waterFlood/futureRisk.vue index 2ecc1d6..ef0fa42 100644 --- a/src/views/sponeScreen/waterFlood/futureRisk.vue +++ b/src/views/sponeScreen/waterFlood/futureRisk.vue @@ -4,7 +4,7 @@

积水风险预报

- 开始 + 开始 暂停
diff --git a/src/views/sponeScreen/waterFlood/index.vue b/src/views/sponeScreen/waterFlood/index.vue index 6223306..8f0f791 100644 --- a/src/views/sponeScreen/waterFlood/index.vue +++ b/src/views/sponeScreen/waterFlood/index.vue @@ -169,10 +169,10 @@ layername: 'waterCourse', //河道水位计 show: false, }, - { - layername: 'waterLoging', //内涝积水点 - show: false, - }, + // { + // layername: 'waterLoging', //内涝积水点 + // show: false, + // }, { layername: 'pipeMonitor', //管网监测点 show: false, diff --git a/src/views/sponeScreen/waterFlood/pipeDetail.vue b/src/views/sponeScreen/waterFlood/pipeDetail.vue index cba8ce1..0c406c3 100644 --- a/src/views/sponeScreen/waterFlood/pipeDetail.vue +++ b/src/views/sponeScreen/waterFlood/pipeDetail.vue @@ -115,6 +115,7 @@ const realData = ref({}); const pipeDetail = ref({}); const pipeLoading = ref(true); +const valIndex = ref(0); const props = defineProps({ pipeParams: { @@ -212,17 +213,23 @@ let res = await graphicReport(params); if (res && res.code == 200) { let datas = res.data; - realData.value.z = nameToData(datas.propertyMonitorList, '水位')[0]; - realData.value.va = nameToData(datas.propertyMonitorList, '流速')[0]; - realData.value.turb = nameToData(datas.propertyMonitorList, 'SS')[0]; - realData.value.tt = datas.propertyMonitorXList[0]; + // 取最大的值 + let max = Math.max(...nameToData(datas.propertyMonitorList, '水位')); + valIndex.value = nameToData(datas.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); + realData.value.z = nameToData(datas.propertyMonitorList, '水位')[valIndex.value]; + realData.value.va = nameToData(datas.propertyMonitorList, '流速')[valIndex.value]; + realData.value.turb = nameToData(datas.propertyMonitorList, 'SS')[valIndex.value]; + realData.value.tt = datas.propertyMonitorXList[valIndex.value]; realData.value.stName = datas.propertyMonitorList[0].stName; } } // 公共方法,根据监测名称来匹配对应的数值 function nameToData(data, name) { let arr = data.filter(item => item.monitorPropertyName == name); - return arr[0] ? arr[0].ylist : []; + let lists = arr[0] ? arr[0].ylist : []; + return lists; } // 获取站点详情 diff --git a/src/views/sponeScreen/waterFlood/rainReport.vue b/src/views/sponeScreen/waterFlood/rainReport.vue index d7eef8b..f020a97 100644 --- a/src/views/sponeScreen/waterFlood/rainReport.vue +++ b/src/views/sponeScreen/waterFlood/rainReport.vue @@ -10,7 +10,7 @@
-

开始时间

+

开始时间

结束时间

雨强

累计降雨量

@@ -18,7 +18,7 @@
-

{{ item.startTime }}

+

{{ item.startTime }}

{{ item.endTime }}

diff --git a/public/static/libs/mapbox/style/preventionSFQ.json b/public/static/libs/mapbox/style/preventionSFQ.json index 45e5a5b..c922df2 100644 --- a/public/static/libs/mapbox/style/preventionSFQ.json +++ b/public/static/libs/mapbox/style/preventionSFQ.json @@ -2,15 +2,10 @@ "params": { "basemap": "https://supermap2.wh-nf.cn:8090/bm", "mvt": "https://supermap0.wh-nf.cn:8090/vt", - "sprites": [ - "/static/libs/mapbox/style/sprite/sprite4" - ], + "sprites": ["/static/libs/mapbox/style/sprite/sprite4"], "init": { - "center": [ - 114.312, - 34.802 - ], - "zoom": 12.6, + "center": [114.362, 34.802], + "zoom": 11.5, "style": "/static/libs/mapbox/style/customs/night-style.json" }, "l7": { @@ -22,124 +17,51 @@ ] } }, - "orders": [ - [ - "poi_label" - ], - [ - "place_label_city" - ], - [ - "road_major_label" - ], - [ - "place_label_other" - ], - [ - "point" - ] - ], + "orders": [["poi_label"], ["place_label_city"], ["road_major_label"], ["place_label_other"], ["point"]], "filter": { "wsLine1": { - "layerName": [ - "pipeline_info", - "pipeline_point" - ], + "layerName": ["pipeline_info", "pipeline_point"], "filter": [ - [ - "WS", - "HS" - ], - [ - "污水点", - "合流点" - ] + ["WS", "HS"], + ["污水点", "合流点"] ] }, "ysLine1": { - "layerName": [ - "pipeline_info", - "pipeline_point" - ], - "filter": [ - [ - "YS" - ], - [ - "雨水点" - ] - ] + "layerName": ["pipeline_info", "pipeline_point"], + "filter": [["YS"], ["雨水点"]] }, "oldCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "老城区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["老城区"]], "easeTo": { - "center": [ - 113.933, - 30.926 - ], + "center": [113.933, 30.926], "zoom": 13.6, "pitch": 55 } }, "southCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "南城新区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["南城新区"]], "easeTo": { - "center": [ - 113.933, - 30.886 - ], + "center": [113.933, 30.886], "zoom": 13.6, "pitch": 55 } }, "newCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "东城新区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["东城新区"]], "easeTo": { - "center": [ - 113.983, - 30.896 - ], + "center": [113.983, 30.896], "zoom": 13.6, "pitch": 55 } }, "allCity": { - "layerName": [ - "city_boundary" - ], - "filter": [ - [ - "东城新区", - "南城新区", - "老城区" - ] - ], + "layerName": ["city_boundary"], + "filter": [["东城新区", "南城新区", "老城区"]], "easeTo": { - "center": [ - 113.953, - 30.906 - ], + "center": [113.953, 30.906], "zoom": 13.6, "pitch": 55 } @@ -152,45 +74,25 @@ "type": "symbol", "minzoom": 0, "maxzoom": 24, - "filter": [ - "in", - "type", - "" - ], + "filter": ["in", "type", ""], "paint": { "text-color": "#ffffff" }, "layout": { - "icon-image": [ - "match", - [ - "get", - "type" - ], - "success_zishui", - "ysj", - "error_zishui", - "wsj", - "yuanTou" - ], + "icon-image": ["match", ["get", "type"], "success_zishui", "ysj", "error_zishui", "wsj", "yuanTou"], "text-allow-overlap": false, "icon-allow-overlap": false, "icon-anchor": "center", "icon-size": 0.8, "text-field": "{name}", - "text-font": [ - "KlokanTech Noto Sans Regular" - ], + "text-font": ["KlokanTech Noto Sans Regular"], "text-size": 16, "text-line-height": 3, "text-anchor": "bottom", "text-max-width": 50, - "text-offset": [ - 0, - -1 - ] + "text-offset": [0, -1] }, "mType": "geojson" } ] -} \ No newline at end of file +} diff --git a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue index 772d11b..8ac6d45 100644 --- a/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue +++ b/src/views/sponeScreen/evaluationKH/chanChuJiXiao.vue @@ -48,10 +48,11 @@ import bus from '@/bus'; import { quotaCommomInfoList, hmyztQuotaDataList } from '@/api/sponeScreen/jxkh.js'; import { waterloggingPointList } from '@/api/sponeScreen/syntherticData.js'; -import { waterLoggingCleanProject } from '@/api/spongePerformance/prevention'; +import { waterLoggingCleanProject, moduleFloodResult } from '@/api/spongePerformance/prevention'; import kaifengFangHong from '@/assets/geojson/kaifeng/kaifengFangHong.json'; //防洪标准 import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js'; import tuLi72X from '@/assets/newImgs/tuLi72X.png'; +import kaifengPSFQ1 from '@/assets/geojson/kaifeng/kaifengPSFQ1.json'; const { proxy } = getCurrentInstance(); const tabList = ref([ @@ -82,11 +83,12 @@ }, 1000); } else if (curTab.value == 'nlbz') { // 内涝防治标准 - bus.emit('setIniteLayer', [{ layername: 'cesiumPaishuiArea2', show: false }]); + getNLModalData(); + setTimeout(() => { newfiberMapbox.map.easeTo({ - center: [114.315, 34.802], - zoom: 11.2, + center: [114.315, 34.782], + zoom: 10.7, }); }, 200); } else { @@ -202,7 +204,7 @@ }, }); }; -//添加弹窗 +//添加弹窗内涝点 const addwaterlogingPopup = geojson => { console.log('-----', newfiberMapbox.popupService.popups); newfiberMapbox.popupService.popups.forEach(popup => { @@ -233,6 +235,111 @@ }); }; +// 内涝标准相关 +// 数据获取 +async function getNLModalData() { + let res = await moduleFloodResult(); + if (res && res.code == 200) { + let datas = res.data; + let moduleGeojson = getFeatureGeojson(datas[0].partitionList); + let moduleBoundaryGeojson = getGeojsonBoundary(moduleGeojson); + let modulelabelGeojson = getGeojsonCenter(moduleGeojson); + //gis渲染内涝区域 + newfiberMapBoxVectorLayer.addGeojsonPolygon('builtCity', kaifengPSFQ1); //建成区图层渲染 + addModuleLayer(moduleGeojson, 'moduleFlood', '#DFA8FF'); + addModuleBoundary(moduleBoundaryGeojson, 'moduleFloodBoundary'); + addGeojsonLable(modulelabelGeojson, 'moduleFloodlabel', '#ffffff'); + } +} +//添加模型法地图 +const addModuleLayer = (geojson, layerName, color) => { + !newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson }); + !newfiberMapbox.map.getLayer(layerName) && + newfiberMapbox.map.addLayer({ + id: layerName, + type: 'fill', + source: layerName, + paint: { + 'fill-color': color, + 'fill-opacity': 1, + }, + }); +}; +const addModuleBoundary = (geojson, layerName) => { + !newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson }); + !newfiberMapbox.map.getLayer(layerName) && + newfiberMapbox.map.addLayer({ + id: layerName, + type: 'line', + source: layerName, + paint: { + 'line-color': 'rgba(94, 56, 255, 1)', //边界颜色 + 'line-width': 3, + }, + }); +}; +const addGeojsonLable = (geojson, layerName, color) => { + !newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson }); + !newfiberMapbox.map.getLayer(layerName) && + !newfiberMapbox.map.addLayer({ + id: layerName, + type: 'symbol', + source: layerName, + paint: { + 'text-color': geojson.features[0].properties.color ? ['get', 'color'] : color, + 'text-halo-color': 'rgba(0,0,0,1)', + 'text-halo-width': 2, + }, + layout: { + 'text-allow-overlap': true, + 'text-field': ['get', 'partitionName'], + 'text-font': ['KlokanTech Noto Sans Regular'], + 'text-size': 16, + 'text-line-height': 3, + 'text-anchor': 'bottom', + 'text-max-width': 50, + 'text-offset': [0, -1], + }, + }); +}; +//获取geojson +const getFeatureGeojson = dataList => { + let features = []; + dataList.forEach(data => { + let feature = turf.feature(Terraformer.WKT.parse(data.geometry), data); + features.push(feature); + }); + return { + type: 'FeatureCollection', + features: features, + }; +}; +//获取geojson边界 +const getGeojsonBoundary = geojson => { + let features = []; + geojson.features.forEach(item => { + let line = turf.polygonToLine(item.geometry); + features.push(line); + }); + return { + type: 'FeatureCollection', + features: features, + }; +}; +//获取geojson中心点 +const getGeojsonCenter = geojson => { + let features = []; + geojson.features.forEach(item => { + let center = turf.center(item); + center.properties = item.properties; + features.push(center); + }); + return { + type: 'FeatureCollection', + features: features, + }; +}; + onMounted(() => { getWaterlogging(); setTimeout(() => { diff --git a/src/views/sponeScreen/evaluationKH/index.vue b/src/views/sponeScreen/evaluationKH/index.vue index f078cd7..2b78ea4 100644 --- a/src/views/sponeScreen/evaluationKH/index.vue +++ b/src/views/sponeScreen/evaluationKH/index.vue @@ -83,7 +83,7 @@ } // 内涝防治标准 - bus.emit('setIniteLayer', [{ layername: 'cesiumPaishuiArea2', show: true }]); + newfiberMapBoxVectorLayer.removeByIds(['builtCity', 'moduleFloodBoundary', 'moduleFloodlabel', 'moduleFlood']); }; onMounted(() => { diff --git a/src/views/sponeScreen/projectHM/projectFX.vue b/src/views/sponeScreen/projectHM/projectFX.vue index 37a26ca..ef051f6 100644 --- a/src/views/sponeScreen/projectHM/projectFX.vue +++ b/src/views/sponeScreen/projectHM/projectFX.vue @@ -3,7 +3,10 @@

-
{{ rainDate }} 降雨起止时间1:15-3:45,24小时累计降雨量20.4mm,降雨等级 中雨
+
+ {{ rainDate }} 降雨起止时间1:15-3:45,24小时累计降雨量20.4mm,降雨等级 + 中雨 +
1 项目设计最大控制容积 3796.52m³ @@ -27,50 +30,63 @@ src="@/assets/newImgs/pumpGY/water.png" alt="左" class="waterFlow" - :style="{ height: (120 * (nameToData(station1.propertyMonitorList, '水位')[0] || 0.2)) / 1.1 + 'px', left: '73px', width: '846px' }" + :style="{ + height: (120 * (nameToData(station1.propertyMonitorList, '水位')[valIndex1] || 0.2)) / 1.1 + 'px', + left: '73px', + width: '846px', + }" /> 右
-

实时水深:{{ nameToData(station1.propertyMonitorList, '水位')[0] || '--' }}米

-

实时水深:{{ nameToData(station5.propertyMonitorList, '水位')[0] || '--' }}米

+

实时水深:{{ nameToData(station1.propertyMonitorList, '水位')[valIndex1] || '--' }}米

+

实时水深:{{ nameToData(station5.propertyMonitorList, '水位')[valIndex5] || '--' }}米

- 水深:{{ nameToData(station1.propertyMonitorList, '水位')[0] || '--' }} m - 流速:{{ nameToData(station1.propertyMonitorList, '流速')[0] || '--' }} m/s - SS:{{ nameToData(station1.propertyMonitorList, 'SS')[0] || '--' }} mg/L + 水深:{{ nameToData(station1.propertyMonitorList, '水位')[valIndex1] || '--' }} m + 流速:{{ nameToData(station1.propertyMonitorList, '流速')[valIndex1] || '--' }} m/s + SS:{{ nameToData(station1.propertyMonitorList, 'SS')[valIndex1] || '--' }} mg/L + 时间:{{ station1.propertyMonitorXList[valIndex1].slice(10) || '--' }} 管径:2.4*1.1m
- 水深:{{ nameToData(station2.propertyMonitorList, '水位')[0] || '--' }} m - 流速:{{ nameToData(station2.propertyMonitorList, '流速')[0] || '--' }} m/s - SS:{{ nameToData(station2.propertyMonitorList, 'SS')[0] || '--' }} mg/L + 水深:{{ nameToData(station2.propertyMonitorList, '水位')[valIndex2] || '--' }} m + 流速:{{ nameToData(station2.propertyMonitorList, '流速')[valIndex2] || '--' }} m/s + SS:{{ nameToData(station2.propertyMonitorList, 'SS')[valIndex2] || '--' }} mg/L + 时间:{{ station2.propertyMonitorXList[valIndex2].slice(10) || '--' }} 管径:2.4*1.1m
- 水深:{{ nameToData(station3.propertyMonitorList, '水位')[0] || '--' }} m - 流速:{{ nameToData(station3.propertyMonitorList, '流速')[0] || '--' }} m/s - SS:{{ nameToData(station3.propertyMonitorList, 'SS')[0] || '--' }} mg/L + 水深:{{ nameToData(station3.propertyMonitorList, '水位')[valIndex3] || '--' }} m + 流速:{{ nameToData(station3.propertyMonitorList, '流速')[valIndex3] || '--' }} m/s + SS:{{ nameToData(station3.propertyMonitorList, 'SS')[valIndex3] || '--' }} mg/L + 时间:{{ station3.propertyMonitorXList[valIndex3].slice(10) || '--' }} 管径:DN500
水深:{{ '--' }} m 流速:{{ '--' }} m/s SS:{{ '--' }} mg/L + 时间: {{ '--' }} 管径:3*1.8m
- 水深:{{ nameToData(station5.propertyMonitorList, '水位')[0] || '--' }} m - 流速:{{ nameToData(station5.propertyMonitorList, '流速')[0] || '--' }} m/s - SS:{{ nameToData(station5.propertyMonitorList, 'SS')[0] || '--' }} mg/L + 水深:{{ nameToData(station5.propertyMonitorList, '水位')[valIndex5] || '--' }} m + 流速:{{ nameToData(station5.propertyMonitorList, '流速')[valIndex5] || '--' }} m/s + SS:{{ nameToData(station5.propertyMonitorList, 'SS')[valIndex5] || '--' }} mg/L + 时间:{{ station5.propertyMonitorXList[valIndex5].slice(10) || '--' }} 管径:3*1.8m
@@ -117,11 +133,16 @@ const rainDate = ref(''); const { proxy } = getCurrentInstance(); const timer = ref(null); -const station1 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station2 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station3 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station4 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station5 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); +const valIndex1 = ref(0); +const valIndex2 = ref(0); +const valIndex3 = ref(0); +const valIndex4 = ref(0); +const valIndex5 = ref(0); +const station1 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station2 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station3 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station4 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station5 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); // 获取实时数据 function getRealData() { @@ -135,6 +156,11 @@ graphicReport(params).then(res => { if (res.data.propertyMonitorList.length > 0) { station1.value = res.data; + // 取最大的值 + let max = Math.max(...nameToData(station1.value.propertyMonitorList, '水位')); + valIndex1.value = nameToData(station1.value.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); } }); @@ -142,6 +168,11 @@ graphicReport(params).then(res => { if (res.data.propertyMonitorList.length > 0) { station2.value = res.data; + // 取最大的值 + let max = Math.max(...nameToData(station2.value.propertyMonitorList, '水位')); + valIndex2.value = nameToData(station2.value.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); } }); @@ -149,6 +180,11 @@ graphicReport(params).then(res => { if (res.data.propertyMonitorList.length > 0) { station3.value = res.data; + // 取最大的值 + let max = Math.max(...nameToData(station3.value.propertyMonitorList, '水位')); + valIndex3.value = nameToData(station3.value.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); } }); @@ -158,6 +194,11 @@ graphicReport(params).then(res => { if (res.data.propertyMonitorList.length > 0) { station5.value = res.data; + // 取最大的值 + let max = Math.max(...nameToData(station5.value.propertyMonitorList, '水位')); + valIndex5.value = nameToData(station5.value.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); } }); } @@ -165,7 +206,8 @@ // 公共方法,根据监测名称来匹配对应的数值 function nameToData(data, name) { let arr = data.filter(item => item.monitorPropertyName == name); - return arr[0] ? arr[0].ylist : []; + let lists = arr[0] ? arr[0].ylist : []; + return lists; } // 海绵设施点击 diff --git a/src/views/sponeScreen/projectHM/projectSSDX.vue b/src/views/sponeScreen/projectHM/projectSSDX.vue index cb59e6a..6625f7b 100644 --- a/src/views/sponeScreen/projectHM/projectSSDX.vue +++ b/src/views/sponeScreen/projectHM/projectSSDX.vue @@ -6,7 +6,10 @@ -
{{ rainDate }} 降雨起止时间1:15-3:45,24小时累计降雨量20.4mm,降雨等级 中雨
+
+ {{ rainDate }} 降雨起止时间1:15-3:45,24小时累计降雨量20.4mm,降雨等级 + 中雨 +
1 @@ -19,7 +22,8 @@
3 - 雨水管网产流开始时间1:45,结束时间4:45,累计流量 843.5m³, 最大水深 0.5m + 雨水管网产流开始时间1:45,结束时间4:45,累计流量 843.5m³, 最大水深 + {{ nameToData(station1.propertyMonitorList, '水位')[valIndex] || '--' }}m
@@ -34,17 +38,18 @@ src="@/assets/newImgs/pumpGY/water.png" alt="" class="waterFlow" - :style="{ height: (80 * (nameToData(station1.propertyMonitorList, '水位')[0] || 0.2)) / 1.1 + 'px' }" + :style="{ height: (80 * (nameToData(station1.propertyMonitorList, '水位')[valIndex] || 0.2)) / 1.1 + 'px' }" />

管径:2.4 x 1.1米

-

实时水深:{{ nameToData(station1.propertyMonitorList, '水位')[0] || '--' }} 米

-

进口流速:{{ nameToData(station1.propertyMonitorList, '流速')[0] }} m/s

-

进口SS:{{ nameToData(station1.propertyMonitorList, 'SS')[0] || '--' }} mg/L

-

出口流速:{{ nameToData(station2.propertyMonitorList, '流速')[0] || '--' }} m/s

-

出口SS:{{ nameToData(station2.propertyMonitorList, 'SS')[0] || '--' }} mg/L

+

最大水深:{{ nameToData(station1.propertyMonitorList, '水位')[valIndex] || '--' }} 米

+

进口流速:{{ nameToData(station1.propertyMonitorList, '流速')[valIndex] }} m/s

+

进口SS:{{ nameToData(station1.propertyMonitorList, 'SS')[valIndex] || '--' }} mg/L

+

出口流速:{{ nameToData(station2.propertyMonitorList, '流速')[valIndex] || '--' }} m/s

+

出口SS:{{ nameToData(station2.propertyMonitorList, 'SS')[valIndex] || '--' }} mg/L

+

水位最深时间:{{ station1.propertyMonitorXList[valIndex] || '--' }}

@@ -76,9 +81,10 @@ const rainDate = ref(''); const { proxy } = getCurrentInstance(); const timer = ref(null); -const station1 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); -const station2 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }] }); +const station1 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); +const station2 = ref({ propertyMonitorList: [{ ylist: [] }, { ylist: [] }, { ylist: [] }], propertyMonitorXList: [] }); const showProgress = ref(false); +const valIndex = ref(0); // 获取实时数据 function getRealData() { @@ -105,7 +111,13 @@ // 公共方法,根据监测名称来匹配对应的数值 function nameToData(data, name) { let arr = data.filter(item => item.monitorPropertyName == name); - return arr[0] ? arr[0].ylist : []; + let lists = arr[0] ? arr[0].ylist : []; + // 取最大的值 + let max = Math.max(...lists); + valIndex.value = lists.findIndex(item => { + return item == max; + }); + return lists; } onMounted(() => { diff --git a/src/views/sponeScreen/waterFlood/PsssCount.vue b/src/views/sponeScreen/waterFlood/PsssCount.vue index 22134f2..8645688 100644 --- a/src/views/sponeScreen/waterFlood/PsssCount.vue +++ b/src/views/sponeScreen/waterFlood/PsssCount.vue @@ -2,7 +2,9 @@
排水设施统计 - 跳转市防汛平台 + + 跳转市防汛平台 +
diff --git a/src/views/sponeScreen/waterFlood/futureRisk.vue b/src/views/sponeScreen/waterFlood/futureRisk.vue index 2ecc1d6..ef0fa42 100644 --- a/src/views/sponeScreen/waterFlood/futureRisk.vue +++ b/src/views/sponeScreen/waterFlood/futureRisk.vue @@ -4,7 +4,7 @@

积水风险预报

- 开始 + 开始 暂停
diff --git a/src/views/sponeScreen/waterFlood/index.vue b/src/views/sponeScreen/waterFlood/index.vue index 6223306..8f0f791 100644 --- a/src/views/sponeScreen/waterFlood/index.vue +++ b/src/views/sponeScreen/waterFlood/index.vue @@ -169,10 +169,10 @@ layername: 'waterCourse', //河道水位计 show: false, }, - { - layername: 'waterLoging', //内涝积水点 - show: false, - }, + // { + // layername: 'waterLoging', //内涝积水点 + // show: false, + // }, { layername: 'pipeMonitor', //管网监测点 show: false, diff --git a/src/views/sponeScreen/waterFlood/pipeDetail.vue b/src/views/sponeScreen/waterFlood/pipeDetail.vue index cba8ce1..0c406c3 100644 --- a/src/views/sponeScreen/waterFlood/pipeDetail.vue +++ b/src/views/sponeScreen/waterFlood/pipeDetail.vue @@ -115,6 +115,7 @@ const realData = ref({}); const pipeDetail = ref({}); const pipeLoading = ref(true); +const valIndex = ref(0); const props = defineProps({ pipeParams: { @@ -212,17 +213,23 @@ let res = await graphicReport(params); if (res && res.code == 200) { let datas = res.data; - realData.value.z = nameToData(datas.propertyMonitorList, '水位')[0]; - realData.value.va = nameToData(datas.propertyMonitorList, '流速')[0]; - realData.value.turb = nameToData(datas.propertyMonitorList, 'SS')[0]; - realData.value.tt = datas.propertyMonitorXList[0]; + // 取最大的值 + let max = Math.max(...nameToData(datas.propertyMonitorList, '水位')); + valIndex.value = nameToData(datas.propertyMonitorList, '水位').findIndex(item => { + return item == max; + }); + realData.value.z = nameToData(datas.propertyMonitorList, '水位')[valIndex.value]; + realData.value.va = nameToData(datas.propertyMonitorList, '流速')[valIndex.value]; + realData.value.turb = nameToData(datas.propertyMonitorList, 'SS')[valIndex.value]; + realData.value.tt = datas.propertyMonitorXList[valIndex.value]; realData.value.stName = datas.propertyMonitorList[0].stName; } } // 公共方法,根据监测名称来匹配对应的数值 function nameToData(data, name) { let arr = data.filter(item => item.monitorPropertyName == name); - return arr[0] ? arr[0].ylist : []; + let lists = arr[0] ? arr[0].ylist : []; + return lists; } // 获取站点详情 diff --git a/src/views/sponeScreen/waterFlood/rainReport.vue b/src/views/sponeScreen/waterFlood/rainReport.vue index d7eef8b..f020a97 100644 --- a/src/views/sponeScreen/waterFlood/rainReport.vue +++ b/src/views/sponeScreen/waterFlood/rainReport.vue @@ -10,7 +10,7 @@
-

开始时间

+

开始时间

结束时间

雨强

累计降雨量

@@ -18,7 +18,7 @@
-

{{ item.startTime }}

+

{{ item.startTime }}

{{ item.endTime }}

diff --git a/src/views/spongePerformance/waterlogging/prevention/index.vue b/src/views/spongePerformance/waterlogging/prevention/index.vue index 6f07b5a..c59c28b 100644 --- a/src/views/spongePerformance/waterlogging/prevention/index.vue +++ b/src/views/spongePerformance/waterlogging/prevention/index.vue @@ -35,7 +35,9 @@ @@ -121,6 +123,9 @@ import chartOption from '@/components/Echarts/pieChart_1.js'; import * as echarts from 'echarts'; import { nextTick } from 'vue'; +import kaifengPSFQ1 from '@/assets/geojson/kaifeng/kaifengPSFQ1.json'; +import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js'; + const pipePopupShow = ref(false); const pipePopupdata = ref(false); const { proxy } = getCurrentInstance(); @@ -133,12 +138,10 @@ const tableData = ref([]); const areaData = ref(''); const resultList = ref([]); -const waterEchart = shallowRef(null); const yearMaxStartTime = ref(''); const yearMaxEndTime = ref(''); const stCodes = ref(''); const selectData = ref([]); -const selectCode = ref(''); const seleceName = ref(''); const unitName = ref(''); const propertyMonitorXList = ref([]); @@ -167,9 +170,9 @@ resultList.value = tableData.value[0].resultList; let moduleGeojson = getFeatureGeojson(tableData.value[0].partitionList); let moduleBoundaryGeojson = getGeojsonBoundary(moduleGeojson); - console.log('moduleGeojson---', moduleGeojson); let modulelabelGeojson = getGeojsonCenter(moduleGeojson); //gis渲染内涝区域 + newfiberMapBoxVectorLayer.addGeojsonPolygon('builtCity', kaifengPSFQ1); //建成区图层渲染 addModuleLayer(moduleGeojson, 'moduleFlood', '#95f204'); addModuleBoundary(moduleBoundaryGeojson, 'moduleFloodBoundary'); addGeojsonLable(modulelabelGeojson, 'moduleFloodlabel', '#ffffff'); @@ -233,7 +236,7 @@ source: layerName, paint: { 'fill-color': '#95f204', - 'fill-opacity': 0.5, + 'fill-opacity': 0.3, }, }); }; @@ -245,7 +248,7 @@ type: 'line', source: layerName, paint: { - 'line-color': '#95f204', + 'line-color': '#000', 'line-width': 3, }, });