lishenfeng
/
mcfxkh-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(): 防汛监测数据开发

lsf-dev
李神峰 2025-06-13 09:09:18 +08:00
parent 12f3fa0878
commit 8f395012e9
6 changed files with 529 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/views/Home/MapCtrl/index.js
View File

@ -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] });
}

34
src/views/Home/MapCtrl/mapstyle/rainDrpLayer.js
View File

@ -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 {

416
src/views/Home/panels/DrpSta/index.js
View File

@ -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': {
@ -134,123 +135,337 @@ 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
"type": "sw",
"tm": "2025-06-06T22:00:00.000Z",
"rz": 43.6,
adnm: '麻城市',
zgrz: '48.17',
time: '2025-06-11 10:14至2025-06-12 10:14',
jjrz: '47.60',
"state": 1
},
{
"stcd": "61612150",
"stnm": "鹰山畈(黄土岗)",
"adcd": "421181000000000",
{
"stcd": "61615300",
"stnm": "木子店",
"adcd": null,
"wscd": null,
adnm: '黄士岗镇英山畈村村民委员会(雾港河村、鹰山畈村)',
zgrz: '77.00',
"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:'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,
"tm": "2025-06-06T22:00:00.000Z",
"state": 1,
"warning": 0
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
},
]
const skData = [
{
"stcd": "61614200",
"type": "sk",
"hasRz": true,
"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": "61614460",
"stnm": "项生(宋埠)",
"adcd": "421181000000000",
"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,
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,
"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,
"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": "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 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([])
@ -305,18 +520,25 @@ export default function Overall({ style }) {
<TableHead >
<DpTableRow>
<DpTableCell style={{ minWidth: '3rem' }} align='center'>序号</DpTableCell>
<DpTableCell style={{minWidth: '8rem' }} align='center'>站名</DpTableCell>
<DpTableCell style={{ minWidth: '8rem' }} align='center'>站名</DpTableCell>
<DpTableCell style={{ minWidth: '8rem' }} align='center'>政区</DpTableCell>
<DpTableCell style={{ minWidth: '8rem' }} align='center'>最高水位(m)</DpTableCell>
<DpTableCell style={{ minWidth: '16rem' }} align='center'>发生时间</DpTableCell>
<DpTableCell style={{ minWidth: '8rem' }} align='center'>警戒水位(m)</DpTableCell>
<DpTableCell style={{ minWidth: '8rem' }} align='center'>{timeRange == '1h' ? "警戒水位(m)" : '汛限水位(m)'}</DpTableCell>
{/* <DpTableCell style={{ width: '15%' }}>所属政区</DpTableCell> */}
</DpTableRow>
</TableHead>
<TableBody>
{
data.map((item,i) => (
<DpTableRow key={item.stcd} onClick={() => flyTo(item)}>
data.map((item, i) => (
<DpTableRow key={item.stcd} onClick={() => {
flyTo(item)
if (timeRange == '3h') {
setSkLayer([item])
} else {
setHdLayer([item])
}
}}>
<DpTableCell align='center'>{i + 1}</DpTableCell>
<DpTableCell align='center'>{item.stnm}</DpTableCell>
<DpTableCell align='center'>

31
src/views/Home/panels/Drpfx/index.js
View File

@ -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 }) {
<Collapse in={expanded[station.id]} timeout="auto" unmountOnExit>
<Box className={`${classes.expandedRow} ${station.color}`}>
{/* 展开的详细内容可以在这里添加 */}{
station.id == 'heavy' && drpData.map(item => (
station.id == 'storm' && drpData.map(item => (
<TableRow onClick={() =>flyTo(item)}>
<DpTableCell style={{ width: '53%' }}>{item.stnm}</DpTableCell>
<DpTableCell style={{ width: '10%' }}>{item.today}</DpTableCell>

59
src/views/Home/panels/HDReal/index.js
View File

@ -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 (
<PanelBox
@ -100,9 +153,9 @@ function HDReal({ style }) {
</TableHead>
<TableBody>
{showData.map((row) => (
<DpTableRow key={row.stcd}>
<DpTableRow key={row.stcd} onClick={() => { flyTo(row); setLayer([row],'hd')}}>
<DpTableCell component="th" scope="row">
<div className="table-ellipsis cursor-pointer" onClick={() => flyTo(row)}>{row.stnm}</div>
<div className="table-ellipsis cursor-pointer">{row.stnm}</div>
</DpTableCell>
<DpTableCell align="right">{renderHDRz(row)}</DpTableCell>
{rzRender(row.rz, row.rz+5.5)}

57
src/views/Home/panels/SkReal/index.js
View File

@ -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 (
<PanelBox
style={style}
@ -107,9 +156,9 @@ function SkReal({ style }) {
</TableHead>
<TableBody>
{[...sortedData.filter(o=>o.rzState===1),...sortedData.filter(o=>o.rzState!==1)].map((row) => (
<DpTableRow key={row.stcd}>
<DpTableRow key={row.stcd} onClick={() => { flyTo(row); setSkLayer([row]) }}>
<DpTableCell component="th" scope="row">
<div className="table-ellipsis cursor-pointer" onClick={() => flyTo(row)}>{row.rzState===1?row.stnm:row.stnm+'(离线)'}</div>
<div className="table-ellipsis cursor-pointer" >{row.rzState===1?row.stnm:row.stnm+'(离线)'}</div>
</DpTableCell>
<DpTableCell align="right">{row['h24']}</DpTableCell>
<DpTableCell align="right">{row?.rz}</DpTableCell>