diff --git a/src/views/Home/MapCtrl/index.js b/src/views/Home/MapCtrl/index.js index d6f2653..12b9f5a 100644 --- a/src/views/Home/MapCtrl/index.js +++ b/src/views/Home/MapCtrl/index.js @@ -147,6 +147,9 @@ export default function MapCtrl({ initParams, onLoad }) { dispatch?.runtime.setInfoDlg({ layerId: 'ByjcLayer', properties: record }) }else if (record.stnm == '浮桥河水库') { dispatch?.runtime.setInfoDlg({ layerId: 'RealSkLayer', properties: record }) + } else if (record.type == 'sw') { + dispatch?.runtime.setFeaturePop({ layerId: 'RealHDPop', properties: record,coordinates: [record.lgtd, record.lttd] }) + } // dispatch.runtime.setFeaturePop({ type: 'RealSkPop', properties: record, coordinates: [record.lgtd, record.lttd] }); } diff --git a/src/views/Home/MapCtrl/mapstyle/rainDrpLayer.js b/src/views/Home/MapCtrl/mapstyle/rainDrpLayer.js index 7e02e99..e98e1bc 100644 --- a/src/views/Home/MapCtrl/mapstyle/rainDrpLayer.js +++ b/src/views/Home/MapCtrl/mapstyle/rainDrpLayer.js @@ -44,29 +44,31 @@ const ShapeStyle = { }; -const page1 = [{ - "stcd": "61612910", - "stnm": "桃林河(阎河)", - test:1, +const page1 = [ + { + "stcd": "Q9111", + "stnm": "福田河", "adcd": "421181000000000", + 'test':1, "wscd": null, "importancy": 0, - "lgtd": 115.087777777, - "lttd": 31.164444444, + "lgtd": 115.0944, + "lttd": 31.4747, "elev": null, "hasRz": true, - "type": "sh", - "today": 7, - "h1": 3, - "h3": 4, - "h6": 6, - "h12": 7, - "h24": 12, - "h48": 19.5, - "tm": "2025-06-03T02:10:00.000Z", + "type": "qx", + "today": 50.3, + "h1": 50.2, + "h3": 50.2, + "h6": 50.2, + "h12": 50.2, + "h24": 50.3, + "tm": "2025-06-06T22:00:00.000Z", + "state": 1, "warning": 0 - }] + }, + ] export default class RainDrpLayer extends BaseLayer { diff --git a/src/views/Home/panels/DrpSta/index.js b/src/views/Home/panels/DrpSta/index.js index 8dc9c7f..50102f6 100644 --- a/src/views/Home/panels/DrpSta/index.js +++ b/src/views/Home/panels/DrpSta/index.js @@ -1,10 +1,11 @@ -import React, { useState,useEffect } from 'react'; +import React, { useState, useEffect } from 'react'; import { OverallPromise } from '../../../../models/_/real'; import useRequest from '../../../../utils/useRequest'; import PanelBox from '../../components/PanelBox'; import OverallContent from './OverallContent'; import { makeStyles } from '@material-ui/core/styles'; import DpTableRow from '../../../../layouts/mui/DpTableRow'; +import { parseGeoJSON } from "../../../../utils/tools"; import { Box, Typography, @@ -49,7 +50,7 @@ const useStyles = makeStyles((theme) => ({ marginBottom: theme.spacing(2) }, timeButton: { - width:210, + width: 210, color: '#fff', borderColor: 'rgba(255,255,255,0.3)', '&.MuiButton-contained': { @@ -97,7 +98,7 @@ const useStyles = makeStyles((theme) => ({ } })); export default function Overall({ style }) { - const dispatch = useDispatch(); + const dispatch = useDispatch(); const classes = useStyles(); const [types, setTypes] = useState({ @@ -134,137 +135,351 @@ export default function Overall({ style }) { const drpData = [ { - "stcd": "61612910", - "stnm": "桃林河(阎河)", - "adcd": "421181000000000", - adnm: '阎家河镇桃林河村村民委员会', - zgrz: '55.67', - time: '2025-06-11 10:14至2025-06-12 10:14', - jjrz:'58.43', + "stcd": "61644000", + "stnm": "浮桥河", + "adcd": null, "wscd": null, "importancy": 0, - "lgtd": 115.087777777, - "lttd": 31.164444444, + "lgtd": 114.883583, + "lttd": 31.180444, "elev": null, "hasRz": true, - "type": "sh", - "today": 21, - "h1": 15.5, - "h3": 21, - "h6": 21, - "h12": 21, - "h24": 21, - "h48": 21, - "tm": "2025-06-06T22:15:00.000Z", - "state": 1, - "warning": 0 - }, - { - "stcd": "61612150", - "stnm": "鹰山畈(黄土岗)", - "adcd": "421181000000000", - "wscd": null, - adnm: '黄士岗镇英山畈村村民委员会(雾港河村、鹰山畈村)', - zgrz: '77.00', - time: '2025-06-12 10:33', - jjrz:'78.98', - "importancy": 0, - "lgtd": 115.073611, - "lttd": 31.386667, - "elev": null, - "hasRz": true, - "type": "sh", - "today": 27, - "h1": 18.5, - "h3": 27, - "h6": 27, - "h12": 27, - "h24": 27, - "h48": 27, + "type": "sw", "tm": "2025-06-06T22:00:00.000Z", - "state": 1, - "warning": 0 + "rz": 43.6, + adnm: '麻城市', + zgrz: '48.17', + time: '2025-06-11 10:14至2025-06-12 10:14', + jjrz: '47.60', + "state": 1 + }, +{ + "stcd": "61615300", + "stnm": "木子店", + "adcd": null, + "wscd": null, + "importancy": 1, + "lgtd": 115.3625, + "lttd": 31.190278, + "elev": null, + "hasRz": true, + "type": "sw", + "tm": "2025-06-06T21:00:00.000Z", + "rz": 133.89, + adnm: '麻城市', + zgrz: '138.20', + time: '2025-06-12 10:33', + jjrz: '137.89', + "state": 1 }, { - "stcd": "61613700", - "stnm": "四角门(宋铁二桥)", - "adcd": "421181000000000", + "stcd": "61612500", + "stnm": "王福店", + "adcd": null, "wscd": null, "importancy": 0, - "lgtd": 114.8291, - "lttd": 31.0754, - adnm: '铁门岗乡大庙岗村村民委员会(四角门村、大庙岗村、大店村、肖上湾村)', - zgrz: '27.57', - time: '2025-06-11 10:14至2025-06-12 10:14', - jjrz:'34.86', + "lgtd": 114.986666, + "lttd": 31.352944, "elev": null, "hasRz": true, - "type": "sh", - "today": 3.5, - "h1": 2, - "h3": 3.5, - "h6": 3.5, - "h12": 3.5, - "h24": 3.5, - "h48": 3.5, + "type": "sw", "tm": "2025-06-06T22:00:00.000Z", - "state": 1, - "warning": 0 + "rz": 73.37, + adnm: '麻城市', + zgrz: '78.20', + time: '2025-06-11 10:14至2025-06-12 10:14', + jjrz: '77.37', + "state": 1 }, - { - "stcd": "61614460", - "stnm": "项生(宋埠)", - "adcd": "421181000000000", - "wscd": null, - "importancy": 0, - adnm: '宋埠镇项生村村民委员会', - zgrz: '21.93', - time: '2025-06-11 10:14至2025-06-12 10:14', - jjrz:'23.65', - "lgtd": 114.798056, - "lttd": 31.058611, - "elev": null, + + ] + const skData = [ + { + "stcd": "61614200", + "type": "sk", "hasRz": true, - "type": "sh", - "today": 4.5, - "h1": 2, - "h3": 4.5, - "h6": 4.5, - "h12": 4.5, - "h24": 4.5, - "h48": 4.5, - "tm": "2025-06-06T22:00:00.000Z", - "state": 1, - "warning": 0 + "stnm": "浮桥河", + "adcd": "421181100000", + "wscd": null, + "importancy": 0, + adnm: '麻城市', + zgrz: '66.1', + time: '2025-06-11 10:14', + jjrz: '64.89', + "lgtd": 114.88069, + "lttd": 31.171967, + "elev": 0, + "damel": 71.33, + "dsflz": 68.04, + "fsltdz": 64.89, + "ddz": 51.78, + "zcxsw": 64.89, + "drpTm": "2025-06-06T22:00:00.000Z", + "today": 4, + "h1": 4, + "h3": 4, + "h6": 4, + "h12": 4, + "h24": 4, + "h48": 4, + "drpState": 1, + "rz": 60.7, + "w": 45490, + "xs":32133, + "a_fsltdz": -4.189999999999998, + "rzTm": "2025-06-06T22:00:00.000Z", + "rzWarning": 0, + "rzState": 1, + "layer": "RealSkLayer", + "layerPop": "RealSkPop" + }, + + { + "stcd": "61612700", + "type": "sk", + "hasRz": true, + "stnm": "碧绿河", + "adcd": "421181109000", + "wscd": null, + adnm: '麻城市', + zgrz: '138.2', + time: '2025-06-12 10:33', + jjrz: '137', + "importancy": 0, + "lgtd": 115.214444, + "lttd": 31.299722, + "elev": 0, + "damel": 142.9, + "dsflz": 139.08, + "fsltdz": 137, + "ddz": 105, + "zcxsw": 137, + "drpTm": "2025-06-06T22:00:00.000Z", + "today": 50, + "h1": 38, + "h3": 50, + "h6": 50, + "h12": 50, + "h24": 50, + "h48": 50, + "drpState": 1, + "rz": 120, + "w": 6015, + "xs": 1676, + "a_fsltdz": -17, + "rzTm": "2025-06-06T00:00:00.000Z", + "rzWarning": 0, + "rzState": 2, + "layer": "RealSkLayer", + "layerPop": "RealSkPop" + }, + { + "stcd": "61612560", + "type": "sk", + "hasRz": true, + "stnm": "大河铺", + "adcd": "421181112000", + adnm: '麻城市', + zgrz: '161.5', + time: '2025-06-11 10:14至2025-06-12 10:14', + jjrz: '159', + "wscd": null, + "importancy": 0, + "lgtd": 114.941111, + "lttd": 31.464444, + "elev": 0, + "damel": 162.21, + "dsflz": 160.08, + "fsltdz": 159, + "ddz": 142.5, + "zcxsw": 159, + "drpTm": "2025-06-06T22:00:00.000Z", + "today": 50, + "h1": 50, + "h3": 50, + "h6": 50, + "h12": 50, + "h24": 50, + "h48": 50, + "drpState": 1, + "rz": 144.5, + "w": 1574, + "xs": "--", + "a_fsltdz": -14.5, + "rzTm": "2025-06-06T00:00:00.000Z", + "rzWarning": 0, + "rzState": 2, + "layer": "RealSkLayer", + "layerPop": "RealSkPop" + }, + { + "stcd": "716460001", + "type": "sk", + "hasRz": true, + "stnm": "杉林河", + "adcd": "421181107000", + "wscd": null, + adnm: '麻城市', + zgrz: '224.31', + time: '2025-06-11 10:14至2025-06-12 10:14', + jjrz: '231', + "importancy": 0, + "lgtd": 115.433056, + "lttd": 31.304444, + "elev": 0, + "damel": 236.2, + "dsflz": 233.92, + "fsltdz": 231, + "ddz": 204, + "zcxsw": 231, + "drpTm": "2025-04-11T05:00:00.000Z", + "today": 0, + "h1": 0, + "h3": 0, + "h6": 0, + "h12": 0, + "h24": 0, + "h48": 0, + "drpState": 2, + "rz": 224.31, + "w": 1415, + "xs": 750, + "a_fsltdz": -6.689999999999998, + "rzTm": "2025-04-11T05:00:00.000Z", + "rzWarning": 0, + "rzState": 2, + "layer": "RealSkLayer", + "layerPop": "RealSkPop" }, ] - const skData = [] - const flyTo = (record) => { - const { lgtd, lttd } = record; + const flyTo = (row) => { + const { lgtd, lttd } = row; if (lgtd && lttd) { - dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealDrpPop, properties: record, coordinates: [lgtd, lttd] }); + dispatch.runtime.setFeaturePop({ type: timeRange == '3h'?'RealSkPop':"RealHDPop", properties: row, coordinates: [row.lgtd, row.lttd] }); dispatch.runtime.setCameraTarget({ - center: [lgtd, lttd + config.poiPositionOffsetY.hd], - zoom: config.poiPositionZoom.hd, - pitch: config.poiPitch, + center: [lgtd, lttd + 0.005], + zoom: 15, + pitch: 50, + bearing: 0 }); } } - const [type, setType] = useState('1h') - const [data, setData] = useState([]) + + const setSkLayer = (data = []) => { + const map = window.__mapref; + const layer = map.getLayer('临时水库tz') + if (layer) { + map.removeLayer('临时水库tz'); + map.removeSource('临时水库tz'); + } + if (data.length === 0) { return } + map.addLayer({ + 'id': '临时水库tz',//+new Date().getTime(), + 'type': 'symbol', + 'source': { + 'type': 'geojson', + 'data': { + 'type': 'FeatureCollection', + 'features': [], + }, + }, + 'layout': { + // 'icon-allow-overlap': true, + // 'text-allow-overlap': true, + 'icon-image': '水库', // 从properties中动态读取icon字段 + 'icon-size': [ + 'interpolate', ['linear'], ['zoom'], + 10, 0.8, + 14, 0.8, + ], + 'text-size': [ + 'interpolate', ['linear'], ['zoom'], + 5, 10, + 14, 14, + ], + 'text-font': ['Roboto Black'], + 'text-field': [ + 'step', + ['zoom'], + '', + 8, ['get', 'stnm'] + ], + 'text-anchor': 'top', + 'text-offset': [0, 1], + }, + 'paint': { + 'text-color': '#fff' + }, + 'visibility': 'visible', + }); + map.getSource('临时水库tz').setData(parseGeoJSON(data)) + } + const setHdLayer = (data = []) => { + const map = window.__mapref; + const layer = map.getLayer('关联站点') + if (layer) { + map.removeLayer('关联站点'); + map.removeSource('关联站点'); + } + if (data.length === 0) { return } + map.addLayer({ + 'id': '关联站点',//+new Date().getTime(), + 'type': 'symbol', + 'source': { + 'type': 'geojson', + 'data': { + 'type': 'FeatureCollection', + 'features': [], + }, + }, + 'layout': { + 'icon-allow-overlap': true, + 'text-allow-overlap': true, + 'icon-image': '水位站', + 'icon-size': [ + 'interpolate', ['linear'], ['zoom'], + 10, 0.5, + 14, 1, + ], + 'text-size': [ + 'interpolate', ['linear'], ['zoom'], + 10, 10, + 14, 16, + ], + }, + 'paint': { + 'text-color': [ + 'case', + ['!=', ['get', 'state'], 1], '#888', + ['==', ['get', 'warning'], 3], '#f00', + ['==', ['get', 'warning'], 2], 'yellow', + ['==', ['get', 'warning'], 1], 'yellow', + '#0f0' + ], + 'text-halo-color': '#062040', + 'text-halo-width': 1 + }, + 'visibility': 'visible', + }); + + map.getSource('关联站点').setData(parseGeoJSON(data)) + } + const [type, setType] = useState('h24') + const [data, setData] = useState([]) + useEffect(() => { const newArr = timeRange == '3h' ? skData : drpData; setData(newArr) }, [timeRange]) - + return ( { ['h1', 'h3', 'h6', 'h12', 'h24'].map(key => ( @@ -275,66 +490,73 @@ export default function Overall({ style }) { } > - - - {[ - { value: '1h', label: '河道水情' }, - { value: '3h', label: '水库水情' }, - ].map((item) => ( - { - if (item.value == '1h' || item.value == '3h') { - setTimeRange(item.value) - } - }} - variant={timeRange === item.value ? 'contained' : 'outlined'} - style={{ padding: '5px 10px' }} - > - {item.label} - - ))} - - - - + + + {[ + { value: '1h', label: '河道水情' }, + { value: '3h', label: '水库水情' }, + ].map((item) => ( + { + if (item.value == '1h' || item.value == '3h') { + setTimeRange(item.value) + } + }} + variant={timeRange === item.value ? 'contained' : 'outlined'} + style={{ padding: '5px 10px' }} + > + {item.label} + + ))} + + + + - - - - - 序号 - 站名 - 政区 - 最高水位(m) - 发生时间 - 警戒水位(m) - {/* 所属政区 */} - - - - { - data.map((item,i) => ( - flyTo(item)}> - {i + 1} - {item.stnm} - - {item.adnm} - - {item.zgrz} - {item.time} - {item.jjrz} - - )) - } - - - - + + + + + 序号 + 站名 + 政区 + 最高水位(m) + 发生时间 + {timeRange == '1h' ? "警戒水位(m)" : '汛限水位(m)'} + {/* 所属政区 */} + + + + { + data.map((item, i) => ( + { + flyTo(item) + if (timeRange == '3h') { + setSkLayer([item]) + } else { + setHdLayer([item]) + } + }}> + {i + 1} + {item.stnm} + + {item.adnm} + + {item.zgrz} + {item.time} + {item.jjrz} + + )) + } + + + + ) } diff --git a/src/views/Home/panels/Drpfx/index.js b/src/views/Home/panels/Drpfx/index.js index 1ddf900..8d1fe05 100644 --- a/src/views/Home/panels/Drpfx/index.js +++ b/src/views/Home/panels/Drpfx/index.js @@ -119,8 +119,8 @@ export default function Overall({ style }) { { id: '100year', name: '100年一遇以上站点', count: 0, color: 'purple' }, { id: '50year', name: '50年一遇以上站点', count: 0, color: 'blue' }, { id: 'special', name: '特大暴雨站点', count: 0, color: 'blue1' }, - { id: 'heavy', name: '大暴雨站点', count: 1, color: 'blue2' }, - { id: 'storm', name: '暴雨站点', count: 0, color: 'green' } + { id: 'heavy', name: '大暴雨站点', count: 0, color: 'blue2' }, + { id: 'storm', name: '暴雨站点', count: 1, color: 'green' } ]; const toggleExpand = (id) => { @@ -132,24 +132,25 @@ export default function Overall({ style }) { const drpData = [ { - "stcd": "61612910", - "stnm": "桃林河(阎河)", + "stcd": "Q9111", + "stnm": "福田河", "adcd": "421181000000000", 'test':1, "wscd": null, "importancy": 0, - "lgtd": 115.087777777, - "lttd": 31.164444444, + "lgtd": 115.0944, + "lttd": 31.4747, "elev": null, "hasRz": true, - "type": "sh", - "today": 7, - "h1": 12, - "h3": 40, - "h6": 69, - "h12": 133, - "h24": 261, - "tm": "2025-06-03T02:10:00.000Z", + "type": "qx", + "today": 50.3, + "h1": 50.2, + "h3": 50.2, + "h6": 50.2, + "h12": 50.2, + "h24": 50.3, + "tm": "2025-06-06T22:00:00.000Z", + "state": 1, "warning": 0 }, @@ -257,7 +258,7 @@ export default function Overall({ style }) { {/* 展开的详细内容可以在这里添加 */}{ - station.id == 'heavy' && drpData.map(item => ( + station.id == 'storm' && drpData.map(item => ( flyTo(item)}> {item.stnm} {item.today} diff --git a/src/views/Home/panels/HDReal/index.js b/src/views/Home/panels/HDReal/index.js index b92cb45..d9712d8 100644 --- a/src/views/Home/panels/HDReal/index.js +++ b/src/views/Home/panels/HDReal/index.js @@ -1,6 +1,7 @@ import React, { useMemo, useState } from 'react'; import useRequest from '../../../../utils/useRequest'; import PanelBox from '../../components/PanelBox'; +import { parseGeoJSON } from "../../../../utils/tools"; import Table from '@material-ui/core/Table'; import TableContainer from '@material-ui/core/TableContainer'; @@ -46,7 +47,7 @@ function HDReal({ style }) { } ret.push(o); }); - return ret; + return ret.slice(-7).reverse(); }, [data, tableRzFilter]); const flyTo = (record) => { @@ -69,6 +70,58 @@ function HDReal({ style }) { const toggleAutoRefresh = () => { dispatch.realview.setHdAutoRefresh(!hdAutoRefresh); } + const setLayer = (data = [], type) => { + const map = window.__mapref; + const layer = map.getLayer('关联站点') + if (layer) { + map.removeLayer('关联站点'); + map.removeSource('关联站点'); + } + if (data.length === 0) { return } + if (type === 'hd') { + map.addLayer({ + 'id': '关联站点',//+new Date().getTime(), + 'type': 'symbol', + 'source': { + 'type': 'geojson', + 'data': { + 'type': 'FeatureCollection', + 'features': [], + }, + }, + 'layout': { + 'icon-allow-overlap': true, + 'text-allow-overlap': true, + 'icon-image': '水位站', + 'icon-size': [ + 'interpolate', ['linear'], ['zoom'], + 10, 0.5, + 14, 1, + ], + 'text-size': [ + 'interpolate', ['linear'], ['zoom'], + 10, 10, + 14, 16, + ], + }, + 'paint': { + 'text-color': [ + 'case', + ['!=', ['get', 'state'], 1], '#888', + ['==', ['get', 'warning'], 3], '#f00', + ['==', ['get', 'warning'], 2], 'yellow', + ['==', ['get', 'warning'], 1], 'yellow', + '#0f0' + ], + 'text-halo-color': '#062040', + 'text-halo-width': 1 + }, + 'visibility': 'visible', + }); + } + + map.getSource('关联站点').setData(parseGeoJSON(data)) + } return ( {showData.map((row) => ( - + { flyTo(row); setLayer([row],'hd')}}> - flyTo(row)}>{row.stnm} + {row.stnm} {renderHDRz(row)} {rzRender(row.rz, row.rz+5.5)} diff --git a/src/views/Home/panels/SkReal/index.js b/src/views/Home/panels/SkReal/index.js index c157d9e..72466ba 100644 --- a/src/views/Home/panels/SkReal/index.js +++ b/src/views/Home/panels/SkReal/index.js @@ -1,6 +1,7 @@ import React, { useMemo, useState } from 'react'; import useRequest from '../../../../utils/useRequest'; import PanelBox from '../../components/PanelBox'; +import { parseGeoJSON } from "../../../../utils/tools"; import HighlightOff from '@material-ui/icons/HighlightOff'; import { makeStyles } from '@material-ui/core/styles'; @@ -57,7 +58,7 @@ function SkReal({ style }) { const flyTo = (record) => { const { lgtd, lttd } = record; if (lgtd && lttd) { - dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealSkPop, properties: record, coordinates: [lgtd, lttd] }); + // dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealSkPop, properties: record, coordinates: [lgtd, lttd] }); dispatch.runtime.setCameraTarget({ center: [lgtd, lttd + config.poiPositionOffsetY.sk], zoom: config.poiPositionZoom.sk, @@ -81,7 +82,55 @@ function SkReal({ style }) { const handleClose = () => { setOpen(false); }; - +const setSkLayer = (data = []) => { + const map = window.__mapref; + const layer = map.getLayer('临时水库tz') + if (layer) { + map.removeLayer('临时水库tz'); + map.removeSource('临时水库tz'); + } + if (data.length === 0) { return } + map.addLayer({ + 'id': '临时水库tz',//+new Date().getTime(), + 'type': 'symbol', + 'source': { + 'type': 'geojson', + 'data': { + 'type': 'FeatureCollection', + 'features': [], + }, + }, + 'layout': { + // 'icon-allow-overlap': true, + // 'text-allow-overlap': true, + 'icon-image': '水库', // 从properties中动态读取icon字段 + 'icon-size': [ + 'interpolate', ['linear'], ['zoom'], + 10, 0.8, + 14, 0.8, + ], + 'text-size': [ + 'interpolate', ['linear'], ['zoom'], + 5, 10, + 14, 14, + ], + 'text-font': ['Roboto Black'], + 'text-field': [ + 'step', + ['zoom'], + '', + 8, ['get', 'stnm'] + ], + 'text-anchor': 'top', + 'text-offset': [0, 1], + }, + 'paint': { + 'text-color': '#fff' + }, + 'visibility': 'visible', + }); + map.getSource('临时水库tz').setData(parseGeoJSON(data)) + } return ( {[...sortedData.filter(o=>o.rzState===1),...sortedData.filter(o=>o.rzState!==1)].map((row) => ( - + { flyTo(row); setSkLayer([row]) }}> - flyTo(row)}>{row.rzState===1?row.stnm:row.stnm+'(离线)'} + {row.rzState===1?row.stnm:row.stnm+'(离线)'} {row['h24']} {row?.rz}