feat(): 防汛监测数据开发
parent
12f3fa0878
commit
8f395012e9
|
|
@ -147,6 +147,9 @@ export default function MapCtrl({ initParams, onLoad }) {
|
||||||
dispatch?.runtime.setInfoDlg({ layerId: 'ByjcLayer', properties: record })
|
dispatch?.runtime.setInfoDlg({ layerId: 'ByjcLayer', properties: record })
|
||||||
}else if (record.stnm == '浮桥河水库') {
|
}else if (record.stnm == '浮桥河水库') {
|
||||||
dispatch?.runtime.setInfoDlg({ layerId: 'RealSkLayer', properties: record })
|
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] });
|
// dispatch.runtime.setFeaturePop({ type: 'RealSkPop', properties: record, coordinates: [record.lgtd, record.lttd] });
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -44,29 +44,31 @@ const ShapeStyle = {
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
const page1 = [{
|
const page1 = [
|
||||||
"stcd": "61612910",
|
{
|
||||||
"stnm": "桃林河(阎河)",
|
"stcd": "Q9111",
|
||||||
test:1,
|
"stnm": "福田河",
|
||||||
"adcd": "421181000000000",
|
"adcd": "421181000000000",
|
||||||
|
'test':1,
|
||||||
"wscd": null,
|
"wscd": null,
|
||||||
"importancy": 0,
|
"importancy": 0,
|
||||||
"lgtd": 115.087777777,
|
"lgtd": 115.0944,
|
||||||
"lttd": 31.164444444,
|
"lttd": 31.4747,
|
||||||
"elev": null,
|
"elev": null,
|
||||||
"hasRz": true,
|
"hasRz": true,
|
||||||
"type": "sh",
|
"type": "qx",
|
||||||
"today": 7,
|
"today": 50.3,
|
||||||
"h1": 3,
|
"h1": 50.2,
|
||||||
"h3": 4,
|
"h3": 50.2,
|
||||||
"h6": 6,
|
"h6": 50.2,
|
||||||
"h12": 7,
|
"h12": 50.2,
|
||||||
"h24": 12,
|
"h24": 50.3,
|
||||||
"h48": 19.5,
|
"tm": "2025-06-06T22:00:00.000Z",
|
||||||
"tm": "2025-06-03T02:10:00.000Z",
|
|
||||||
"state": 1,
|
"state": 1,
|
||||||
"warning": 0
|
"warning": 0
|
||||||
}]
|
},
|
||||||
|
]
|
||||||
|
|
||||||
export default class RainDrpLayer extends BaseLayer {
|
export default class RainDrpLayer extends BaseLayer {
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,11 @@
|
||||||
import React, { useState,useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import { OverallPromise } from '../../../../models/_/real';
|
import { OverallPromise } from '../../../../models/_/real';
|
||||||
import useRequest from '../../../../utils/useRequest';
|
import useRequest from '../../../../utils/useRequest';
|
||||||
import PanelBox from '../../components/PanelBox';
|
import PanelBox from '../../components/PanelBox';
|
||||||
import OverallContent from './OverallContent';
|
import OverallContent from './OverallContent';
|
||||||
import { makeStyles } from '@material-ui/core/styles';
|
import { makeStyles } from '@material-ui/core/styles';
|
||||||
import DpTableRow from '../../../../layouts/mui/DpTableRow';
|
import DpTableRow from '../../../../layouts/mui/DpTableRow';
|
||||||
|
import { parseGeoJSON } from "../../../../utils/tools";
|
||||||
import {
|
import {
|
||||||
Box,
|
Box,
|
||||||
Typography,
|
Typography,
|
||||||
|
|
@ -49,7 +50,7 @@ const useStyles = makeStyles((theme) => ({
|
||||||
marginBottom: theme.spacing(2)
|
marginBottom: theme.spacing(2)
|
||||||
},
|
},
|
||||||
timeButton: {
|
timeButton: {
|
||||||
width:210,
|
width: 210,
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
borderColor: 'rgba(255,255,255,0.3)',
|
borderColor: 'rgba(255,255,255,0.3)',
|
||||||
'&.MuiButton-contained': {
|
'&.MuiButton-contained': {
|
||||||
|
|
@ -97,7 +98,7 @@ const useStyles = makeStyles((theme) => ({
|
||||||
}
|
}
|
||||||
}));
|
}));
|
||||||
export default function Overall({ style }) {
|
export default function Overall({ style }) {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
const [types, setTypes] = useState({
|
const [types, setTypes] = useState({
|
||||||
|
|
@ -134,137 +135,351 @@ export default function Overall({ style }) {
|
||||||
|
|
||||||
const drpData = [
|
const drpData = [
|
||||||
{
|
{
|
||||||
"stcd": "61612910",
|
"stcd": "61644000",
|
||||||
"stnm": "桃林河(阎河)",
|
"stnm": "浮桥河",
|
||||||
"adcd": "421181000000000",
|
"adcd": null,
|
||||||
adnm: '阎家河镇桃林河村村民委员会',
|
|
||||||
zgrz: '55.67',
|
|
||||||
time: '2025-06-11 10:14至2025-06-12 10:14',
|
|
||||||
jjrz:'58.43',
|
|
||||||
"wscd": null,
|
"wscd": null,
|
||||||
"importancy": 0,
|
"importancy": 0,
|
||||||
"lgtd": 115.087777777,
|
"lgtd": 114.883583,
|
||||||
"lttd": 31.164444444,
|
"lttd": 31.180444,
|
||||||
"elev": null,
|
"elev": null,
|
||||||
"hasRz": true,
|
"hasRz": true,
|
||||||
"type": "sh",
|
"type": "sw",
|
||||||
"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,
|
|
||||||
"tm": "2025-06-06T22:00:00.000Z",
|
"tm": "2025-06-06T22:00:00.000Z",
|
||||||
"state": 1,
|
"rz": 43.6,
|
||||||
"warning": 0
|
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",
|
"stcd": "61612500",
|
||||||
"stnm": "四角门(宋铁二桥)",
|
"stnm": "王福店",
|
||||||
"adcd": "421181000000000",
|
"adcd": null,
|
||||||
"wscd": null,
|
"wscd": null,
|
||||||
"importancy": 0,
|
"importancy": 0,
|
||||||
"lgtd": 114.8291,
|
"lgtd": 114.986666,
|
||||||
"lttd": 31.0754,
|
"lttd": 31.352944,
|
||||||
adnm: '铁门岗乡大庙岗村村民委员会(四角门村、大庙岗村、大店村、肖上湾村)',
|
|
||||||
zgrz: '27.57',
|
|
||||||
time: '2025-06-11 10:14至2025-06-12 10:14',
|
|
||||||
jjrz:'34.86',
|
|
||||||
"elev": null,
|
"elev": null,
|
||||||
"hasRz": true,
|
"hasRz": true,
|
||||||
"type": "sh",
|
"type": "sw",
|
||||||
"today": 3.5,
|
|
||||||
"h1": 2,
|
|
||||||
"h3": 3.5,
|
|
||||||
"h6": 3.5,
|
|
||||||
"h12": 3.5,
|
|
||||||
"h24": 3.5,
|
|
||||||
"h48": 3.5,
|
|
||||||
"tm": "2025-06-06T22:00:00.000Z",
|
"tm": "2025-06-06T22:00:00.000Z",
|
||||||
"state": 1,
|
"rz": 73.37,
|
||||||
"warning": 0
|
adnm: '麻城市',
|
||||||
|
zgrz: '78.20',
|
||||||
|
time: '2025-06-11 10:14至2025-06-12 10:14',
|
||||||
|
jjrz: '77.37',
|
||||||
|
"state": 1
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"stcd": "61614460",
|
]
|
||||||
"stnm": "项生(宋埠)",
|
const skData = [
|
||||||
"adcd": "421181000000000",
|
{
|
||||||
"wscd": null,
|
"stcd": "61614200",
|
||||||
"importancy": 0,
|
"type": "sk",
|
||||||
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,
|
|
||||||
"hasRz": true,
|
"hasRz": true,
|
||||||
"type": "sh",
|
"stnm": "浮桥河",
|
||||||
"today": 4.5,
|
"adcd": "421181100000",
|
||||||
"h1": 2,
|
"wscd": null,
|
||||||
"h3": 4.5,
|
"importancy": 0,
|
||||||
"h6": 4.5,
|
adnm: '麻城市',
|
||||||
"h12": 4.5,
|
zgrz: '66.1',
|
||||||
"h24": 4.5,
|
time: '2025-06-11 10:14',
|
||||||
"h48": 4.5,
|
jjrz: '64.89',
|
||||||
"tm": "2025-06-06T22:00:00.000Z",
|
"lgtd": 114.88069,
|
||||||
"state": 1,
|
"lttd": 31.171967,
|
||||||
"warning": 0
|
"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 = (row) => {
|
||||||
const flyTo = (record) => {
|
const { lgtd, lttd } = row;
|
||||||
const { lgtd, lttd } = record;
|
|
||||||
if (lgtd && lttd) {
|
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({
|
dispatch.runtime.setCameraTarget({
|
||||||
center: [lgtd, lttd + config.poiPositionOffsetY.hd],
|
center: [lgtd, lttd + 0.005],
|
||||||
zoom: config.poiPositionZoom.hd,
|
zoom: 15,
|
||||||
pitch: config.poiPitch,
|
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(() => {
|
useEffect(() => {
|
||||||
const newArr = timeRange == '3h' ? skData : drpData;
|
const newArr = timeRange == '3h' ? skData : drpData;
|
||||||
setData(newArr)
|
setData(newArr)
|
||||||
}, [timeRange])
|
}, [timeRange])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PanelBox
|
<PanelBox
|
||||||
style={style}
|
style={style}
|
||||||
title="水情统计"
|
title="水情统计"
|
||||||
color="green"
|
color="green"
|
||||||
extra={
|
extra={
|
||||||
<span className="button-group">
|
<span className="button-group">
|
||||||
{
|
{
|
||||||
['h1', 'h3', 'h6', 'h12', 'h24'].map(key => (
|
['h1', 'h3', 'h6', 'h12', 'h24'].map(key => (
|
||||||
|
|
@ -275,66 +490,73 @@ export default function Overall({ style }) {
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<Box className={classes.root}>
|
<Box className={classes.root}>
|
||||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||||
<ButtonGroup variant="outlined">
|
<ButtonGroup variant="outlined">
|
||||||
{[
|
{[
|
||||||
{ value: '1h', label: '河道水情' },
|
{ value: '1h', label: '河道水情' },
|
||||||
{ value: '3h', label: '水库水情' },
|
{ value: '3h', label: '水库水情' },
|
||||||
].map((item) => (
|
].map((item) => (
|
||||||
<Button
|
<Button
|
||||||
key={item.value}
|
key={item.value}
|
||||||
className={classes.timeButton}
|
className={classes.timeButton}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (item.value == '1h' || item.value == '3h') {
|
if (item.value == '1h' || item.value == '3h') {
|
||||||
setTimeRange(item.value)
|
setTimeRange(item.value)
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
variant={timeRange === item.value ? 'contained' : 'outlined'}
|
variant={timeRange === item.value ? 'contained' : 'outlined'}
|
||||||
style={{ padding: '5px 10px' }}
|
style={{ padding: '5px 10px' }}
|
||||||
>
|
>
|
||||||
{item.label}
|
{item.label}
|
||||||
</Button>
|
</Button>
|
||||||
))}
|
))}
|
||||||
</ButtonGroup>
|
</ButtonGroup>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</Box>
|
</Box>
|
||||||
<TableContainer style={{ height: '70%' }}>
|
<TableContainer style={{ height: '70%' }}>
|
||||||
<Table size="small" stickyHeader>
|
<Table size="small" stickyHeader>
|
||||||
<TableHead >
|
<TableHead >
|
||||||
<DpTableRow>
|
<DpTableRow>
|
||||||
<DpTableCell style={{ minWidth: '3rem' }} align='center'>序号</DpTableCell>
|
<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'>政区</DpTableCell>
|
||||||
<DpTableCell style={{ minWidth: '8rem' }} align='center'>最高水位(m)</DpTableCell>
|
<DpTableCell style={{ minWidth: '8rem' }} align='center'>最高水位(m)</DpTableCell>
|
||||||
<DpTableCell style={{ minWidth: '16rem' }} align='center'>发生时间</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> */}
|
{/* <DpTableCell style={{ width: '15%' }}>所属政区</DpTableCell> */}
|
||||||
</DpTableRow>
|
</DpTableRow>
|
||||||
</TableHead>
|
</TableHead>
|
||||||
<TableBody>
|
<TableBody>
|
||||||
{
|
{
|
||||||
data.map((item,i) => (
|
data.map((item, i) => (
|
||||||
<DpTableRow key={item.stcd} onClick={() => flyTo(item)}>
|
<DpTableRow key={item.stcd} onClick={() => {
|
||||||
<DpTableCell align='center'>{i + 1}</DpTableCell>
|
flyTo(item)
|
||||||
<DpTableCell align='center'>{item.stnm}</DpTableCell>
|
if (timeRange == '3h') {
|
||||||
<DpTableCell align='center'>
|
setSkLayer([item])
|
||||||
<div
|
} else {
|
||||||
className="table-ellipsis cursor-pointer"
|
setHdLayer([item])
|
||||||
title={item.adnm}
|
}
|
||||||
>{item.adnm}</div>
|
}}>
|
||||||
</DpTableCell>
|
<DpTableCell align='center'>{i + 1}</DpTableCell>
|
||||||
<DpTableCell align='center'>{item.zgrz}</DpTableCell>
|
<DpTableCell align='center'>{item.stnm}</DpTableCell>
|
||||||
<DpTableCell align='center'>{item.time}</DpTableCell>
|
<DpTableCell align='center'>
|
||||||
<DpTableCell align='center'>{item.jjrz}</DpTableCell>
|
<div
|
||||||
</DpTableRow>
|
className="table-ellipsis cursor-pointer"
|
||||||
))
|
title={item.adnm}
|
||||||
}
|
>{item.adnm}</div>
|
||||||
|
</DpTableCell>
|
||||||
</TableBody>
|
<DpTableCell align='center'>{item.zgrz}</DpTableCell>
|
||||||
</Table>
|
<DpTableCell align='center'>{item.time}</DpTableCell>
|
||||||
</TableContainer>
|
<DpTableCell align='center'>{item.jjrz}</DpTableCell>
|
||||||
|
</DpTableRow>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
</PanelBox>
|
</PanelBox>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -119,8 +119,8 @@ export default function Overall({ style }) {
|
||||||
{ id: '100year', name: '100年一遇以上站点', count: 0, color: 'purple' },
|
{ id: '100year', name: '100年一遇以上站点', count: 0, color: 'purple' },
|
||||||
{ id: '50year', name: '50年一遇以上站点', count: 0, color: 'blue' },
|
{ id: '50year', name: '50年一遇以上站点', count: 0, color: 'blue' },
|
||||||
{ id: 'special', name: '特大暴雨站点', count: 0, color: 'blue1' },
|
{ id: 'special', name: '特大暴雨站点', count: 0, color: 'blue1' },
|
||||||
{ id: 'heavy', name: '大暴雨站点', count: 1, color: 'blue2' },
|
{ id: 'heavy', name: '大暴雨站点', count: 0, color: 'blue2' },
|
||||||
{ id: 'storm', name: '暴雨站点', count: 0, color: 'green' }
|
{ id: 'storm', name: '暴雨站点', count: 1, color: 'green' }
|
||||||
];
|
];
|
||||||
|
|
||||||
const toggleExpand = (id) => {
|
const toggleExpand = (id) => {
|
||||||
|
|
@ -132,24 +132,25 @@ export default function Overall({ style }) {
|
||||||
|
|
||||||
const drpData = [
|
const drpData = [
|
||||||
{
|
{
|
||||||
"stcd": "61612910",
|
"stcd": "Q9111",
|
||||||
"stnm": "桃林河(阎河)",
|
"stnm": "福田河",
|
||||||
"adcd": "421181000000000",
|
"adcd": "421181000000000",
|
||||||
'test':1,
|
'test':1,
|
||||||
"wscd": null,
|
"wscd": null,
|
||||||
"importancy": 0,
|
"importancy": 0,
|
||||||
"lgtd": 115.087777777,
|
"lgtd": 115.0944,
|
||||||
"lttd": 31.164444444,
|
"lttd": 31.4747,
|
||||||
"elev": null,
|
"elev": null,
|
||||||
"hasRz": true,
|
"hasRz": true,
|
||||||
"type": "sh",
|
"type": "qx",
|
||||||
"today": 7,
|
"today": 50.3,
|
||||||
"h1": 12,
|
"h1": 50.2,
|
||||||
"h3": 40,
|
"h3": 50.2,
|
||||||
"h6": 69,
|
"h6": 50.2,
|
||||||
"h12": 133,
|
"h12": 50.2,
|
||||||
"h24": 261,
|
"h24": 50.3,
|
||||||
"tm": "2025-06-03T02:10:00.000Z",
|
"tm": "2025-06-06T22:00:00.000Z",
|
||||||
|
|
||||||
"state": 1,
|
"state": 1,
|
||||||
"warning": 0
|
"warning": 0
|
||||||
},
|
},
|
||||||
|
|
@ -257,7 +258,7 @@ export default function Overall({ style }) {
|
||||||
<Collapse in={expanded[station.id]} timeout="auto" unmountOnExit>
|
<Collapse in={expanded[station.id]} timeout="auto" unmountOnExit>
|
||||||
<Box className={`${classes.expandedRow} ${station.color}`}>
|
<Box className={`${classes.expandedRow} ${station.color}`}>
|
||||||
{/* 展开的详细内容可以在这里添加 */}{
|
{/* 展开的详细内容可以在这里添加 */}{
|
||||||
station.id == 'heavy' && drpData.map(item => (
|
station.id == 'storm' && drpData.map(item => (
|
||||||
<TableRow onClick={() =>flyTo(item)}>
|
<TableRow onClick={() =>flyTo(item)}>
|
||||||
<DpTableCell style={{ width: '53%' }}>{item.stnm}</DpTableCell>
|
<DpTableCell style={{ width: '53%' }}>{item.stnm}</DpTableCell>
|
||||||
<DpTableCell style={{ width: '10%' }}>{item.today}</DpTableCell>
|
<DpTableCell style={{ width: '10%' }}>{item.today}</DpTableCell>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
import React, { useMemo, useState } from 'react';
|
import React, { useMemo, useState } from 'react';
|
||||||
import useRequest from '../../../../utils/useRequest';
|
import useRequest from '../../../../utils/useRequest';
|
||||||
import PanelBox from '../../components/PanelBox';
|
import PanelBox from '../../components/PanelBox';
|
||||||
|
import { parseGeoJSON } from "../../../../utils/tools";
|
||||||
|
|
||||||
import Table from '@material-ui/core/Table';
|
import Table from '@material-ui/core/Table';
|
||||||
import TableContainer from '@material-ui/core/TableContainer';
|
import TableContainer from '@material-ui/core/TableContainer';
|
||||||
|
|
@ -46,7 +47,7 @@ function HDReal({ style }) {
|
||||||
}
|
}
|
||||||
ret.push(o);
|
ret.push(o);
|
||||||
});
|
});
|
||||||
return ret;
|
return ret.slice(-7).reverse();
|
||||||
}, [data, tableRzFilter]);
|
}, [data, tableRzFilter]);
|
||||||
|
|
||||||
const flyTo = (record) => {
|
const flyTo = (record) => {
|
||||||
|
|
@ -69,6 +70,58 @@ function HDReal({ style }) {
|
||||||
const toggleAutoRefresh = () => {
|
const toggleAutoRefresh = () => {
|
||||||
dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
|
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 (
|
return (
|
||||||
<PanelBox
|
<PanelBox
|
||||||
|
|
@ -100,9 +153,9 @@ function HDReal({ style }) {
|
||||||
</TableHead>
|
</TableHead>
|
||||||
<TableBody>
|
<TableBody>
|
||||||
{showData.map((row) => (
|
{showData.map((row) => (
|
||||||
<DpTableRow key={row.stcd}>
|
<DpTableRow key={row.stcd} onClick={() => { flyTo(row); setLayer([row],'hd')}}>
|
||||||
<DpTableCell component="th" scope="row">
|
<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>
|
||||||
<DpTableCell align="right">{renderHDRz(row)}</DpTableCell>
|
<DpTableCell align="right">{renderHDRz(row)}</DpTableCell>
|
||||||
{rzRender(row.rz, row.rz+5.5)}
|
{rzRender(row.rz, row.rz+5.5)}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
import React, { useMemo, useState } from 'react';
|
import React, { useMemo, useState } from 'react';
|
||||||
import useRequest from '../../../../utils/useRequest';
|
import useRequest from '../../../../utils/useRequest';
|
||||||
import PanelBox from '../../components/PanelBox';
|
import PanelBox from '../../components/PanelBox';
|
||||||
|
import { parseGeoJSON } from "../../../../utils/tools";
|
||||||
|
|
||||||
import HighlightOff from '@material-ui/icons/HighlightOff';
|
import HighlightOff from '@material-ui/icons/HighlightOff';
|
||||||
import { makeStyles } from '@material-ui/core/styles';
|
import { makeStyles } from '@material-ui/core/styles';
|
||||||
|
|
@ -57,7 +58,7 @@ function SkReal({ style }) {
|
||||||
const flyTo = (record) => {
|
const flyTo = (record) => {
|
||||||
const { lgtd, lttd } = record;
|
const { lgtd, lttd } = record;
|
||||||
if (lgtd && lttd) {
|
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({
|
dispatch.runtime.setCameraTarget({
|
||||||
center: [lgtd, lttd + config.poiPositionOffsetY.sk],
|
center: [lgtd, lttd + config.poiPositionOffsetY.sk],
|
||||||
zoom: config.poiPositionZoom.sk,
|
zoom: config.poiPositionZoom.sk,
|
||||||
|
|
@ -81,7 +82,55 @@ function SkReal({ style }) {
|
||||||
const handleClose = () => {
|
const handleClose = () => {
|
||||||
setOpen(false);
|
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 (
|
return (
|
||||||
<PanelBox
|
<PanelBox
|
||||||
style={style}
|
style={style}
|
||||||
|
|
@ -107,9 +156,9 @@ function SkReal({ style }) {
|
||||||
</TableHead>
|
</TableHead>
|
||||||
<TableBody>
|
<TableBody>
|
||||||
{[...sortedData.filter(o=>o.rzState===1),...sortedData.filter(o=>o.rzState!==1)].map((row) => (
|
{[...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">
|
<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>
|
||||||
<DpTableCell align="right">{row['h24']}</DpTableCell>
|
<DpTableCell align="right">{row['h24']}</DpTableCell>
|
||||||
<DpTableCell align="right">{row?.rz}</DpTableCell>
|
<DpTableCell align="right">{row?.rz}</DpTableCell>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue