1285 lines
34 KiB
JavaScript
1285 lines
34 KiB
JavaScript
import React, { useEffect, useMemo, useState } from 'react';
|
|
import useRequest from '../../../../utils/useRequest';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import PanelBox from '../../components/PanelBox';
|
|
import { parseGeoJSON } from "../../../../utils/tools";
|
|
import { DrpRealPromise, HDRealPromise } from "../../../../models/_/real";
|
|
import Table from '@material-ui/core/Table';
|
|
import TableContainer from '@material-ui/core/TableContainer';
|
|
import TableBody from '@material-ui/core/TableBody';
|
|
import TableHead from '@material-ui/core/TableHead';
|
|
import TableRow from '@material-ui/core/TableRow';
|
|
import DpTableCell from '../../../../layouts/mui/DpTableCell';
|
|
import DpTableRow from '../../../../layouts/mui/DpTableRow';
|
|
import clsx from 'clsx';
|
|
import { renderDrp } from '../../../../utils/renutils';
|
|
|
|
const DRP_COLORS = [
|
|
'#ffffff',
|
|
'rgb(122, 232, 122)',
|
|
'rgb(227, 255, 83)',
|
|
'rgb(255, 140, 83)',
|
|
'rgb(255, 0, 0)',
|
|
'rgb(232, 122, 219)',
|
|
'rgb(136, 11, 29)',
|
|
]
|
|
|
|
const data1 = [
|
|
{
|
|
"stcd": "61612150",
|
|
"stnm": "鹰山畈(黄土岗)",
|
|
"adcd": "421181000000000",
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 115.073611,
|
|
"lttd": 31.386667,
|
|
"elev": null,
|
|
"hasRz": true,
|
|
"type": "sh",
|
|
"today": 0,
|
|
"h1": 1,
|
|
"h3": 1.2,
|
|
"h6": 1.5,
|
|
"h12": 1.6,
|
|
"h24": 1.8,
|
|
"h48": 12.9,
|
|
"tm": "2025-06-03T02:00:00.000Z",
|
|
"state": 1,
|
|
"warning": 0
|
|
},
|
|
{
|
|
"stcd": "61612910",
|
|
"stnm": "桃林河(阎河)",
|
|
"adcd": "421181000000000",
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 115.087777777,
|
|
"lttd": 31.164444444,
|
|
"elev": null,
|
|
"hasRz": true,
|
|
"type": "sh",
|
|
"today": 0,
|
|
"h1": 7,
|
|
"h3": 8.4,
|
|
"h6": 10.5,
|
|
"h12": 11.200000000000001,
|
|
"h24": 12.6,
|
|
"h48": 32.8,
|
|
"tm": "2025-06-03T02:10:00.000Z",
|
|
"state": 1,
|
|
"warning": 0
|
|
},
|
|
{
|
|
"stcd": "61613700",
|
|
"stnm": "四角门(宋铁二桥)",
|
|
"adcd": "421181000000000",
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 114.8291,
|
|
"lttd": 31.0754,
|
|
"elev": null,
|
|
"hasRz": true,
|
|
"type": "sh",
|
|
"today": 0,
|
|
"h1": 1,
|
|
"h3": 1.2,
|
|
"h6": 1.5,
|
|
"h12": 1.6,
|
|
"h24": 1.8,
|
|
"h48": 23.4,
|
|
"tm": "2025-06-03T02:00:00.000Z",
|
|
"state": 1,
|
|
"warning": 0
|
|
},
|
|
{
|
|
"stcd": "61614460",
|
|
"stnm": "项生(宋埠)",
|
|
"adcd": "421181000000000",
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 114.798056,
|
|
"lttd": 31.058611,
|
|
"elev": null,
|
|
"hasRz": true,
|
|
"type": "sh",
|
|
"today": 0,
|
|
"h1": 6,
|
|
"h3": 7.199999999999999,
|
|
"h6": 9,
|
|
"h12": 9.600000000000001,
|
|
"h24": 10.8,
|
|
"h48": 11.899999999999999,
|
|
"tm": "2025-06-03T02:00:00.000Z",
|
|
"state": 1,
|
|
"warning": 0
|
|
},
|
|
{
|
|
"stcd": "61615110",
|
|
"stnm": "杨梅河(木子店)",
|
|
"adcd": "421181000000000",
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 115.339667,
|
|
"lttd": 31.1595,
|
|
"elev": null,
|
|
"hasRz": true,
|
|
"type": "sh",
|
|
"today": 0,
|
|
"h1": 7,
|
|
"h3": 8.4,
|
|
"h6": 10.5,
|
|
"h12": 11.200000000000001,
|
|
"h24": 12.6,
|
|
"h48": 31.299999999999997,
|
|
"tm": "2025-06-03T02:00:00.000Z",
|
|
"state": 1,
|
|
"warning": 0
|
|
},
|
|
{
|
|
"stcd": "61640390",
|
|
"stnm": "两路口(福田河)",
|
|
"adcd": "421181000000000",
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 115.158167,
|
|
"lttd": 31.56833,
|
|
"elev": null,
|
|
"hasRz": false,
|
|
"type": "sh",
|
|
"today": 0,
|
|
"h1": 7,
|
|
"h3": 8.4,
|
|
"h6": 10.5,
|
|
"h12": 11.200000000000001,
|
|
"h24": 12.6,
|
|
"h48": 24.799999999999997,
|
|
"tm": "2025-06-03T02:00:00.000Z",
|
|
"state": 1,
|
|
"warning": 0
|
|
},
|
|
{
|
|
"stcd": "61640700",
|
|
"stnm": "新屋河(黄土岗)",
|
|
"adcd": "421181000000000",
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 115.045277777,
|
|
"lttd": 31.404444444,
|
|
"elev": null,
|
|
"hasRz": false,
|
|
"type": "sh",
|
|
"today": 0,
|
|
"h1": 7,
|
|
"h3": 8.9,
|
|
"h6": 11,
|
|
"h12": 11.700000000000001,
|
|
"h24": 13.6,
|
|
"h48": 21.299999999999997,
|
|
"tm": "2025-06-03T02:00:00.000Z",
|
|
"state": 1,
|
|
"warning": 0
|
|
},
|
|
{
|
|
"stcd": "61640850",
|
|
"stnm": "喻家垸(黄土岗)",
|
|
"adcd": "421181000000000",
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 115.033889,
|
|
"lttd": 31.42,
|
|
"elev": null,
|
|
"hasRz": false,
|
|
"type": "sh",
|
|
"today": 0,
|
|
"h1": 9,
|
|
"h3": 10.799999999999999,
|
|
"h6": 13.5,
|
|
"h12": 14.4,
|
|
"h24": 16.2,
|
|
"h48": 33.099999999999994,
|
|
"tm": "2025-06-03T02:00:00.000Z",
|
|
"state": 1,
|
|
"warning": 0
|
|
},
|
|
{
|
|
"stcd": "61640900",
|
|
"stnm": "得胜寨(乘马岗)",
|
|
"adcd": "421181000000000",
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 114.936944444,
|
|
"lttd": 31.410833333,
|
|
"elev": null,
|
|
"hasRz": false,
|
|
"type": "sh",
|
|
"today": 0,
|
|
"h1": 4,
|
|
"h3": 4.8,
|
|
"h6": 6,
|
|
"h12": 6.4,
|
|
"h24": 7.2,
|
|
"h48": 23.1,
|
|
"tm": "2025-06-03T02:00:00.000Z",
|
|
"state": 1,
|
|
"warning": 0
|
|
},
|
|
{
|
|
"stcd": "61640960",
|
|
"stnm": "桐枧冲(黄土岗)",
|
|
"adcd": "421181000000000",
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 115.124444444,
|
|
"lttd": 31.395,
|
|
"elev": null,
|
|
"hasRz": false,
|
|
"type": "sh",
|
|
"today": 0,
|
|
"h1": 4,
|
|
"h3": 4.8,
|
|
"h6": 6,
|
|
"h12": 6.4,
|
|
"h24": 7.2,
|
|
"h48": 24.1,
|
|
"tm": "2025-06-03T02:00:00.000Z",
|
|
"state": 1,
|
|
"warning": 0
|
|
},
|
|
{
|
|
"stcd": "61640970",
|
|
"stnm": "闵家畈(黄土岗)",
|
|
"adcd": "421181000000000",
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 115.1033,
|
|
"lttd": 31.2843,
|
|
"elev": null,
|
|
"hasRz": false,
|
|
"type": "sh",
|
|
"today": 0,
|
|
"h1": 3,
|
|
"h3": 3.5999999999999996,
|
|
"h6": 4.5,
|
|
"h12": 4.800000000000001,
|
|
"h24": 5.4,
|
|
"h48": 19.7,
|
|
"tm": "2025-06-03T02:00:00.000Z",
|
|
"state": 1,
|
|
"warning": 0
|
|
},
|
|
{
|
|
"stcd": "61640980",
|
|
"stnm": "飞龙山(乘马岗)",
|
|
"adcd": "421181000000000",
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 114.9492,
|
|
"lttd": 31.304,
|
|
"elev": null,
|
|
"hasRz": false,
|
|
"type": "sh",
|
|
"today": 0,
|
|
"h1": 2,
|
|
"h3": 2.4,
|
|
"h6": 3,
|
|
"h12": 3.2,
|
|
"h24": 3.6,
|
|
"h48": 19.8,
|
|
"tm": "2025-06-03T02:00:00.000Z",
|
|
"state": 1,
|
|
"warning": 0
|
|
},
|
|
{
|
|
"stcd": "61641500",
|
|
"stnm": "黄金桥(开发区)",
|
|
"adcd": "421181000000000",
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 114.9749,
|
|
"lttd": 31.165,
|
|
"elev": null,
|
|
"hasRz": false,
|
|
"type": "sh",
|
|
"today": 0,
|
|
"h1": 9,
|
|
"h3": 10.799999999999999,
|
|
"h6": 13.5,
|
|
"h12": 14.4,
|
|
"h24": 16.2,
|
|
"h48": 34.099999999999994,
|
|
"tm": "2025-06-03T02:00:00.000Z",
|
|
"state": 1,
|
|
"warning": 0
|
|
},
|
|
{
|
|
"stcd": "61641610",
|
|
"stnm": "张广河(三河口)",
|
|
"adcd": "421181000000000",
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 115.314167,
|
|
"lttd": 31.349667,
|
|
"elev": null,
|
|
"hasRz": false,
|
|
"type": "sh",
|
|
"today": 0,
|
|
"h1": 7,
|
|
"h3": 8.4,
|
|
"h6": 10.5,
|
|
"h12": 11.200000000000001,
|
|
"h24": 12.6,
|
|
"h48": 24.799999999999997,
|
|
"tm": "2025-06-03T02:00:00.000Z",
|
|
"state": 1,
|
|
"warning": 0
|
|
},
|
|
{
|
|
"stcd": "61641700",
|
|
"stnm": "前畈(三河口)",
|
|
"adcd": "421181000000000",
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 115.2267,
|
|
"lttd": 31.3925,
|
|
"elev": null,
|
|
"hasRz": false,
|
|
"type": "sh",
|
|
"today": 0,
|
|
"h1": 7,
|
|
"h3": 8.4,
|
|
"h6": 10.5,
|
|
"h12": 11.200000000000001,
|
|
"h24": 12.6,
|
|
"h48": 22.799999999999997,
|
|
"tm": "2025-06-03T02:00:00.000Z",
|
|
"state": 1,
|
|
"warning": 0
|
|
},
|
|
]
|
|
const data2 = [
|
|
{
|
|
"stcd": "61612150",
|
|
"stnm": "鹰山畈(黄土岗)",
|
|
"adcd": "421181000000000",
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 115.073611,
|
|
"lttd": 31.386667,
|
|
"elev": null,
|
|
"hasRz": true,
|
|
"wrz": null,
|
|
"wrq": null,
|
|
"grz": null,
|
|
"grq": null,
|
|
"sfz": null,
|
|
"sfq": null,
|
|
"type": "sh",
|
|
"tm": "2025-06-03T02:00:00.000Z",
|
|
"rz": 77.12,
|
|
"trend": 0,
|
|
"state": 1,
|
|
"warning": 0,
|
|
"maxRz": 77.25,
|
|
"maxDate": "2025-06-02T16:00:00.000Z",
|
|
"warndes": null
|
|
},
|
|
{
|
|
"stcd": "61612910",
|
|
"stnm": "桃林河(阎河)",
|
|
"adcd": "421181000000000",
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 115.087777777,
|
|
"lttd": 31.164444444,
|
|
"elev": null,
|
|
"hasRz": true,
|
|
"wrz": null,
|
|
"wrq": null,
|
|
"grz": null,
|
|
"grq": null,
|
|
"sfz": null,
|
|
"sfq": null,
|
|
"type": "sh",
|
|
"tm": "2025-06-03T02:35:00.000Z",
|
|
"rz": 55.67,
|
|
"trend": 0,
|
|
"state": 1,
|
|
"warning": 0,
|
|
"maxRz": 55.67,
|
|
"maxDate": "2025-06-03T02:00:00.000Z",
|
|
"warndes": null
|
|
},
|
|
{
|
|
"stcd": "61613700",
|
|
"stnm": "四角门(宋铁二桥)",
|
|
"adcd": "421181000000000",
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 114.8291,
|
|
"lttd": 31.0754,
|
|
"elev": null,
|
|
"hasRz": true,
|
|
"wrz": null,
|
|
"wrq": null,
|
|
"grz": null,
|
|
"grq": null,
|
|
"sfz": null,
|
|
"sfq": null,
|
|
"type": "sh",
|
|
"tm": "2025-06-03T02:00:00.000Z",
|
|
"rz": 27.57,
|
|
"trend": 0,
|
|
"state": 1,
|
|
"warning": 0,
|
|
"maxRz": 27.57,
|
|
"maxDate": "2025-06-03T01:00:00.000Z",
|
|
"warndes": null
|
|
},
|
|
{
|
|
"stcd": "61614460",
|
|
"stnm": "项生(宋埠)",
|
|
"adcd": "421181000000000",
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 114.798056,
|
|
"lttd": 31.058611,
|
|
"elev": null,
|
|
"hasRz": true,
|
|
"wrz": null,
|
|
"wrq": null,
|
|
"grz": null,
|
|
"grq": null,
|
|
"sfz": null,
|
|
"sfq": null,
|
|
"type": "sh",
|
|
"tm": "2025-06-03T02:00:00.000Z",
|
|
"rz": 21.91,
|
|
"trend": 1,
|
|
"state": 1,
|
|
"warning": 0,
|
|
"maxRz": 21.91,
|
|
"maxDate": "2025-06-03T02:00:00.000Z",
|
|
"warndes": null
|
|
},
|
|
{
|
|
"stcd": "61615110",
|
|
"stnm": "杨梅河(木子店)",
|
|
"adcd": "421181000000000",
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 115.339667,
|
|
"lttd": 31.1595,
|
|
"elev": null,
|
|
"hasRz": true,
|
|
"wrz": null,
|
|
"wrq": null,
|
|
"grz": null,
|
|
"grq": null,
|
|
"sfz": null,
|
|
"sfq": null,
|
|
"type": "sh",
|
|
"tm": "2025-06-03T02:00:00.000Z",
|
|
"rz": 112.71,
|
|
"trend": 0,
|
|
"state": 1,
|
|
"warning": 0,
|
|
"maxRz": 112.71,
|
|
"maxDate": "2025-06-02T22:00:00.000Z",
|
|
"warndes": null
|
|
},
|
|
{
|
|
"stcd": "61612200",
|
|
"stnm": "麻城",
|
|
"adcd": null,
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 115.042444,
|
|
"lttd": 31.187389,
|
|
"elev": null,
|
|
"hasRz": true,
|
|
"type": "sw",
|
|
"tm": "2025-06-03T02:00:00.000Z",
|
|
"rz": 52.72,
|
|
"state": 1
|
|
},
|
|
{
|
|
"stcd": "61612210",
|
|
"stnm": "麻城临时断面",
|
|
"adcd": null,
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 115.042444,
|
|
"lttd": 31.187389,
|
|
"elev": null,
|
|
"hasRz": true,
|
|
"type": "sw",
|
|
"tm": "2025-06-03T02:00:00.000Z",
|
|
"rz": 51.415,
|
|
"state": 1
|
|
},
|
|
{
|
|
"stcd": "61612500",
|
|
"stnm": "王福店",
|
|
"adcd": null,
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 114.986666,
|
|
"lttd": 31.352944,
|
|
"elev": null,
|
|
"hasRz": true,
|
|
"type": "sw",
|
|
"tm": "2025-06-03T02:00:00.000Z",
|
|
"rz": 73.37,
|
|
"state": 1
|
|
},
|
|
{
|
|
"stcd": "61612900",
|
|
"stnm": "阎家河",
|
|
"adcd": null,
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 115.128722,
|
|
"lttd": 31.207,
|
|
"elev": null,
|
|
"hasRz": true,
|
|
"type": "sw",
|
|
"tm": "2025-06-03T02:00:00.000Z",
|
|
"rz": 61.75,
|
|
"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-03T02:00:00.000Z",
|
|
"rz": 133.97,
|
|
"state": 1
|
|
},
|
|
{
|
|
"stcd": "61644000",
|
|
"stnm": "浮桥河",
|
|
"adcd": null,
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 114.883583,
|
|
"lttd": 31.180444,
|
|
"elev": null,
|
|
"hasRz": true,
|
|
"type": "sw",
|
|
"tm": "2025-06-03T02:00:00.000Z",
|
|
"rz": 43.6,
|
|
"state": 1
|
|
}
|
|
]
|
|
const data3 = [
|
|
{
|
|
type: '工业',
|
|
time: '2025-05-26 10:00',
|
|
stcd: 42000002,
|
|
stnm: '汉通闸流量站',
|
|
water:30,
|
|
flow: 0.222,
|
|
"lttd": 30.973775 + 0.2002,
|
|
"lgtd": 112.17597 +2.9619,
|
|
|
|
},
|
|
{ water:12,
|
|
type: '工业',
|
|
stcd: 42000001,
|
|
time: '2025-05-26 10:00',
|
|
stnm: '福耀玻璃',
|
|
flow: 0.355,
|
|
"lttd": 30.93926+0.2002,
|
|
"lgtd": 112.191703+ 2.9619,
|
|
}, {
|
|
water:21,
|
|
type: '工业',
|
|
time: '2025-05-26 10:00',
|
|
stnm: '格林美',
|
|
flow: 0.09,
|
|
"lttd": 30.953887 + 0.2002,
|
|
"lgtd": 112.190551 + 2.9619,
|
|
stcd: 42000005
|
|
}
|
|
]
|
|
const data4 = [
|
|
{
|
|
"stcd": "05566004",
|
|
"type": "pic",
|
|
"hasRz": false,
|
|
"stnm": "三河口镇小河沟图像站",
|
|
"adcd": "421181109014000",
|
|
"lgtd": 115.310397,
|
|
"lttd": 31.39211
|
|
},
|
|
{
|
|
"stcd": "05511105",
|
|
"type": "pic",
|
|
"hasRz": false,
|
|
"stnm": "木子店镇郑家榜图像站",
|
|
"adcd": "421181107011000",
|
|
"lgtd": 115.421127,
|
|
"lttd": 31.246292
|
|
},
|
|
{
|
|
"stcd": "05566003",
|
|
"type": "pic",
|
|
"hasRz": false,
|
|
"stnm": "龙池办虎形地图像站",
|
|
"adcd": "421181001013000",
|
|
"lgtd": 115.008805,
|
|
"lttd": 31.23537
|
|
},
|
|
{
|
|
"stcd": "05566005",
|
|
"type": "pic",
|
|
"hasRz": false,
|
|
"stnm": "中驿镇林寨图像站",
|
|
"adcd": "421181100006000",
|
|
"lgtd": 114.909063,
|
|
"lttd": 31.146058
|
|
},
|
|
{
|
|
"stcd": "05511104",
|
|
"type": "pic",
|
|
"hasRz": false,
|
|
"stnm": "木子店镇严家坳图像站",
|
|
"adcd": "421181107012000",
|
|
"lgtd": 115.406112,
|
|
"lttd": 31.254278
|
|
},
|
|
{
|
|
"stcd": "05566001",
|
|
"type": "pic",
|
|
"hasRz": false,
|
|
"stnm": "张家畈镇余家河图像站",
|
|
"adcd": "421181106017000",
|
|
"lgtd": 115.278691,
|
|
"lttd": 31.057429
|
|
},
|
|
{
|
|
"stcd": "05566002",
|
|
"type": "pic",
|
|
"hasRz": false,
|
|
"stnm": "阎家河镇柳林河图像站",
|
|
"adcd": "421181105006000",
|
|
"lgtd": 115.083333,
|
|
"lttd": 31.15
|
|
},
|
|
{
|
|
"stcd": "05511101",
|
|
"type": "pic",
|
|
"hasRz": false,
|
|
"stnm": "龟山镇九里冲图像站",
|
|
"adcd": "421181201013000",
|
|
"lgtd": 115.1952,
|
|
"lttd": 31.0379
|
|
},
|
|
{
|
|
"stcd": "05511102",
|
|
"type": "pic",
|
|
"hasRz": false,
|
|
"stnm": "龟山镇铺头坳图像站",
|
|
"adcd": "421181201009000",
|
|
"lgtd": 115.170265,
|
|
"lttd": 31.090787
|
|
},
|
|
{
|
|
"stcd": "05511103",
|
|
"type": "pic",
|
|
"hasRz": false,
|
|
"stnm": "龟山镇栗林口图像站",
|
|
"adcd": "421181201007000",
|
|
"lgtd": 115.178527,
|
|
"lttd": 31.123027
|
|
}
|
|
]
|
|
const data5 = [
|
|
{
|
|
"city_cd": "421100000000",
|
|
"city_nm": "黄冈市",
|
|
"county_cd": "421181000000",
|
|
"county_nm": "麻城市",
|
|
"town_cd": "421181105000",
|
|
"town_nm": "阎家河镇",
|
|
"res_cd": "42118140028",
|
|
"res_nm": "红心水库",
|
|
"res_lon": 115.18962,
|
|
"res_lat": 31.23425,
|
|
"video_guid": "00032e3e6d984f0eb32c807e5769ec3a",
|
|
"video_name": "红心水库坝脚球机",
|
|
"online": "1",
|
|
"sys_resource": 2
|
|
},
|
|
{
|
|
"city_cd": "421100000000",
|
|
"city_nm": "黄冈市",
|
|
"county_cd": "421181000000",
|
|
"county_nm": "麻城市",
|
|
"town_cd": "421181001000",
|
|
"town_nm": "龙池办事处",
|
|
"res_cd": "42118150152",
|
|
"res_nm": "戴家冲水库",
|
|
"res_lon": 115.0241,
|
|
"res_lat": 31.23237,
|
|
"video_guid": "0037a5cb2caf44e49c012e3fdfa01238",
|
|
"video_name": "戴家冲水库_坝顶_枪机_龙池",
|
|
"online": "1",
|
|
"sys_resource": 2
|
|
},
|
|
{
|
|
"city_cd": "421100000000",
|
|
"city_nm": "黄冈市",
|
|
"county_cd": "421181000000",
|
|
"county_nm": "麻城市",
|
|
"town_cd": "421181101000",
|
|
"town_nm": "宋埠镇",
|
|
"res_cd": "42118140008",
|
|
"res_nm": "管山水库",
|
|
"res_lon": 114.78397,
|
|
"res_lat": 31.19451,
|
|
"video_guid": "0243e9726e244b728618741f248e0577",
|
|
"video_name": "管山水库坝脚球机",
|
|
"online": "1",
|
|
"sys_resource": 2
|
|
},
|
|
{
|
|
"city_cd": "421100000000",
|
|
"city_nm": "黄冈市",
|
|
"county_cd": "421181000000",
|
|
"county_nm": "麻城市",
|
|
"town_cd": "421181100000",
|
|
"town_nm": "中馆驿镇",
|
|
"res_cd": "42118140005",
|
|
"res_nm": "响鼓墩水库",
|
|
"res_lon": 114.91971,
|
|
"res_lat": 31.17985,
|
|
"video_guid": "024eaf5578464d9192559ad2288ba764",
|
|
"video_name": "响鼓墩水库",
|
|
"online": "1",
|
|
"sys_resource": 2
|
|
},
|
|
{
|
|
"city_cd": "421100000000",
|
|
"city_nm": "黄冈市",
|
|
"county_cd": "421181000000",
|
|
"county_nm": "麻城市",
|
|
"town_cd": "421181112000",
|
|
"town_nm": "福田河镇",
|
|
"res_cd": "42118150147",
|
|
"res_nm": "张家河水库",
|
|
"res_lon": 115.17869,
|
|
"res_lat": 31.48587,
|
|
"video_guid": "02d77364354a4f8982ad3d949e0d32ab",
|
|
"video_name": "张家河水库_坝脚_球机",
|
|
"online": "1",
|
|
"sys_resource": 2
|
|
},
|
|
{
|
|
"city_cd": "421100000000",
|
|
"city_nm": "黄冈市",
|
|
"county_cd": "421181000000",
|
|
"county_nm": "麻城市",
|
|
"town_cd": "421181114000",
|
|
"town_nm": "顺河镇",
|
|
"res_cd": "42118150048",
|
|
"res_nm": "孙家榜水库",
|
|
"res_lon": 114.91758,
|
|
"res_lat": 31.26933,
|
|
"video_guid": "03059577c270432bb7338e7f714b9a01",
|
|
"video_name": "孙家塝水库",
|
|
"online": "1",
|
|
"sys_resource": 2
|
|
},
|
|
{
|
|
"city_cd": "421100000000",
|
|
"city_nm": "黄冈市",
|
|
"county_cd": "421181000000",
|
|
"county_nm": "麻城市",
|
|
"town_cd": "421181110000",
|
|
"town_nm": "三河口镇",
|
|
"res_cd": "42118150145",
|
|
"res_nm": "袁家冲水库",
|
|
"res_lon": 115.28076,
|
|
"res_lat": 31.28639,
|
|
"video_guid": "031ac395df964414a17f9dc996e13d57",
|
|
"video_name": "袁家冲水库视频站",
|
|
"online": "1",
|
|
"sys_resource": 2
|
|
},
|
|
{
|
|
"city_cd": "421100000000",
|
|
"city_nm": "黄冈市",
|
|
"county_cd": "421181000000",
|
|
"county_nm": "麻城市",
|
|
"town_cd": "421181003000",
|
|
"town_nm": "南湖办事处",
|
|
"res_cd": "42118140003",
|
|
"res_nm": "毛家冲水库",
|
|
"res_lon": 114.98531,
|
|
"res_lat": 31.20469,
|
|
"video_guid": "036b290ac8e547a79f5835754e02772c",
|
|
"video_name": "毛家冲水库溢洪道",
|
|
"online": "1",
|
|
"sys_resource": 2
|
|
},
|
|
{
|
|
"city_cd": "421100000000",
|
|
"city_nm": "黄冈市",
|
|
"county_cd": "421181000000",
|
|
"county_nm": "麻城市",
|
|
"town_cd": "421181102000",
|
|
"town_nm": "歧亭镇",
|
|
"res_cd": "42118150224",
|
|
"res_nm": "兴隆寺水库",
|
|
"res_lon": 114.69534,
|
|
"res_lat": 31.01031,
|
|
"video_guid": "0385335df9c64c1f8972cf3ed17b4854",
|
|
"video_name": "兴隆寺水库_坝脚_球机",
|
|
"online": "1",
|
|
"sys_resource": 2
|
|
},
|
|
{
|
|
"city_cd": "421100000000",
|
|
"city_nm": "黄冈市",
|
|
"county_cd": "421181000000",
|
|
"county_nm": "麻城市",
|
|
"town_cd": "421181100000",
|
|
"town_nm": "中馆驿镇",
|
|
"res_cd": "42118150094",
|
|
"res_nm": "西冲水库",
|
|
"res_lon": 114.94118,
|
|
"res_lat": 31.06765,
|
|
"video_guid": "046336873b8a4eefbc321bd2e6e4359c",
|
|
"video_name": "西冲水库",
|
|
"online": "1",
|
|
"sys_resource": 2
|
|
},
|
|
]
|
|
|
|
function DrpReal({ style }) {
|
|
const [tab,setTab] = useState('1')
|
|
const [drpData,setDrpData] = useState([])
|
|
const [hdData,setHdData] = useState([])
|
|
|
|
|
|
const dispatch = useDispatch();
|
|
const skObj = useSelector(s => s.runtime.skObj);
|
|
|
|
|
|
useEffect(()=>{
|
|
getDrp(skObj)
|
|
getHd(skObj)
|
|
|
|
return ()=>{
|
|
const map = window.__mapref;
|
|
const layer = map.getLayer('关联站点')
|
|
if(layer){
|
|
map.removeLayer('关联站点');
|
|
map.removeSource('关联站点');
|
|
}
|
|
}
|
|
},[skObj])
|
|
|
|
useEffect(()=>{
|
|
const map = window.__mapref;
|
|
if(map){
|
|
if(tab==='1'&&drpData){
|
|
setLayer(drpData,'drp')
|
|
}
|
|
if(tab==='2'&&hdData){
|
|
setLayer(hdData,'hd')
|
|
}
|
|
}else{
|
|
const dsq = setInterval(() => {
|
|
const map = window.__mapref;
|
|
if(map && drpData.length>0){
|
|
clearInterval(dsq)
|
|
setLayer(drpData,'drp')
|
|
}
|
|
}, 500);
|
|
}
|
|
|
|
},[drpData,hdData,skObj,tab])
|
|
|
|
|
|
|
|
const getDrp = async(skObj)=>{
|
|
const { lgtd, lttd } = skObj
|
|
const step = 0.05
|
|
let data = await DrpRealPromise.get();
|
|
if (Array.isArray(data)) {
|
|
data = data.filter(o => {
|
|
if(o.type !== 'sk'){
|
|
if(
|
|
lgtd-step<o.lgtd && o.lgtd<lgtd+step &&
|
|
lttd-step<o.lttd && o.lttd<lttd+step
|
|
){return true}
|
|
else{
|
|
return false
|
|
}
|
|
|
|
}else{
|
|
return false
|
|
}
|
|
});
|
|
}
|
|
setDrpData(data)
|
|
}
|
|
|
|
const getHd = async(skObj)=>{
|
|
const { lgtd, lttd } = skObj
|
|
const step = 0.1
|
|
let data = await HDRealPromise.get();
|
|
if (Array.isArray(data)) {
|
|
data = data.filter(o => {
|
|
if(o.type !== 'sk'){
|
|
if(
|
|
lgtd-step<o.lgtd && o.lgtd<lgtd+step &&
|
|
lttd-step<o.lttd && o.lttd<lttd+step
|
|
){return true}
|
|
else{
|
|
return false
|
|
}
|
|
|
|
}else{
|
|
return false
|
|
}
|
|
});
|
|
}
|
|
setHdData(data)
|
|
}
|
|
|
|
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==='drp'){
|
|
map.addLayer({
|
|
'id': '关联站点',//+new Date().getTime(),
|
|
'type': 'circle',
|
|
'source': {
|
|
'type': 'geojson',
|
|
'data': {
|
|
'type': 'FeatureCollection',
|
|
'features': [],
|
|
},
|
|
},
|
|
'paint': {
|
|
'circle-color': [
|
|
'case',
|
|
['==', ['get', 'state'], 1], [
|
|
'interpolate-hcl',
|
|
['linear'],
|
|
['get', 'h1'],
|
|
0, DRP_COLORS[0],
|
|
10, DRP_COLORS[1],
|
|
25, DRP_COLORS[2],
|
|
50, DRP_COLORS[3],
|
|
100, DRP_COLORS[4],
|
|
250, DRP_COLORS[5],
|
|
500, DRP_COLORS[6],
|
|
],
|
|
'#aaa'
|
|
],
|
|
'circle-opacity': [
|
|
'case',
|
|
['==', ['get', 'state'], 1], 1,
|
|
0.6
|
|
],
|
|
'circle-stroke-width': [
|
|
'step',
|
|
['zoom'],
|
|
0,
|
|
12, 2,
|
|
14, 3
|
|
],
|
|
'circle-stroke-color': [
|
|
'match',
|
|
['get', 'type'],
|
|
'sh', '#91eda1',
|
|
'sw', '#f8ec82',
|
|
'qx', '#e091ed',
|
|
'#fff'
|
|
],
|
|
'circle-radius': [
|
|
'interpolate',
|
|
['linear'],
|
|
['zoom'],
|
|
10, 6,
|
|
14, 10,
|
|
]
|
|
},
|
|
'visibility': 'visible',
|
|
});
|
|
}
|
|
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
|
|
style={style}
|
|
title="关联站点"
|
|
color="green"
|
|
tabs={
|
|
<span className="button-group">
|
|
<span className={clsx({ active: tab==='1' })} onClick={() => {
|
|
setTab('1')
|
|
}}>雨量站</span>
|
|
<span className={clsx({ active: tab==='2' })} onClick={() => {
|
|
setTab('2')
|
|
}}>水位站</span>
|
|
<span className={clsx({ active: tab==='3' })} onClick={() => {
|
|
setTab('3')
|
|
}}>流量站</span>
|
|
<span className={clsx({ active: tab==='4' })} onClick={() => {
|
|
setTab('4')
|
|
}}>图像站</span>
|
|
<span className={clsx({ active: tab==='5' })} onClick={() => {
|
|
setTab('5')
|
|
}}>视频站</span>
|
|
</span>
|
|
}
|
|
>
|
|
|
|
<TableContainer style={{ height: '100%' }}>
|
|
{
|
|
tab==='1'?
|
|
<Table size="small" stickyHeader>
|
|
<TableHead>
|
|
<TableRow>
|
|
{/* <DpTableCell style={{ minWidth:'50px' }} align="center">序号</DpTableCell> */}
|
|
<DpTableCell style={{ minWidth: '5rem' }} align="left">站点名称</DpTableCell>
|
|
<DpTableCell style={{ minWidth: '5rem' }} align="center">1h时段雨量(mm)</DpTableCell>
|
|
<DpTableCell style={{ minWidth: '6rem' }} align="center">时间</DpTableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{drpData.map((row,index) => (
|
|
<DpTableRow key={row.stcd}>
|
|
{/* <DpTableCell align="center">{index+1}</DpTableCell> */}
|
|
<DpTableCell component="th" scope="row">
|
|
<div className="table-ellipsis cursor-pointer" onClick={() => {
|
|
const { lgtd, lttd } = row;
|
|
if (lgtd && lttd) {
|
|
dispatch.runtime.setFeaturePop({ type: 'RealDrpPop', properties: row, coordinates: [row.lgtd, row.lttd] });
|
|
dispatch.runtime.setCameraTarget({
|
|
center: [lgtd, lttd],
|
|
zoom: 15,
|
|
pitch: 60,
|
|
bearing: 0
|
|
});
|
|
}
|
|
}}>{row.stnm}</div>
|
|
</DpTableCell>
|
|
<DpTableCell align="center">{(row.h1).toFixed(2)}</DpTableCell>
|
|
<DpTableCell align="center">{row.tm.slice(0,10)}</DpTableCell>
|
|
</DpTableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>:null
|
|
}
|
|
{
|
|
tab==='2'?
|
|
<Table size="small" stickyHeader>
|
|
<TableHead>
|
|
<TableRow>
|
|
<DpTableCell style={{ minWidth: '4rem' }} align="center">名称</DpTableCell>
|
|
<DpTableCell style={{ minWidth: '4rem' }} align="center">水位</DpTableCell>
|
|
<DpTableCell style={{ minWidth: '4rem' }} align="center">保证水位 </DpTableCell>
|
|
<DpTableCell style={{ minWidth: '6rem' }} align="center">警戒水位</DpTableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{hdData.map((row,index) => (
|
|
<DpTableRow key={row.stcd}>
|
|
<DpTableCell component="th" scope="row">
|
|
<div className="table-ellipsis cursor-pointer" onClick={() => {
|
|
const { lgtd, lttd } = row;
|
|
if (lgtd && lttd) {
|
|
dispatch.runtime.setFeaturePop({ type: 'RealHDPop', properties: row, coordinates: [row.lgtd, row.lttd] });
|
|
dispatch.runtime.setCameraTarget({
|
|
center: [lgtd, lttd],
|
|
zoom: 15,
|
|
pitch: 60,
|
|
bearing: 0
|
|
});
|
|
}
|
|
}}>{row.stnm}</div>
|
|
</DpTableCell>
|
|
<DpTableCell align="center">{row.rz}</DpTableCell>
|
|
<DpTableCell align="center">{row.rz+5.5}</DpTableCell>
|
|
<DpTableCell align="center">{row.rz+4}</DpTableCell>
|
|
</DpTableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>:null
|
|
}
|
|
{
|
|
tab==='3'?
|
|
<Table size="small" stickyHeader>
|
|
<TableHead>
|
|
<TableRow>
|
|
{/* <DpTableCell style={{ minWidth: '50px' }} align="center">序号</DpTableCell> */}
|
|
<DpTableCell style={{ minWidth: '6rem' }} align="center">站点名称</DpTableCell>
|
|
<DpTableCell style={{ minWidth: '3rem' }} align="center">类型</DpTableCell>
|
|
<DpTableCell style={{ minWidth: '6rem' }} align="center">时间</DpTableCell>
|
|
<DpTableCell style={{ minWidth: '4rem' }} align="center">流量(m³/s)</DpTableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{data3.map((row,index) => (
|
|
<DpTableRow key={row.stcd}>
|
|
{/* <DpTableCell align="center">{index+1}</DpTableCell> */}
|
|
<DpTableCell component="th" scope="row">
|
|
<div className="table-ellipsis cursor-pointer" onClick={() => {
|
|
const { res_lon:lgtd, res_lat:lttd } = row;
|
|
if (lgtd && lttd) {
|
|
dispatch.runtime.setCameraTarget({
|
|
center: [lgtd, lttd],
|
|
zoom: 15,
|
|
pitch: 60,
|
|
bearing: 0
|
|
});
|
|
}
|
|
}}>{row.stnm}</div>
|
|
</DpTableCell>
|
|
<DpTableCell align="center">{row.type}</DpTableCell>
|
|
<DpTableCell align="center">{row.time}</DpTableCell>
|
|
<DpTableCell align="center">{row.flow}</DpTableCell>
|
|
</DpTableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>:null
|
|
}
|
|
{
|
|
tab==='4'?
|
|
<Table size="small" stickyHeader>
|
|
<TableHead>
|
|
<TableRow>
|
|
<DpTableCell style={{ minWidth: '50px' }} align="center">序号</DpTableCell>
|
|
<DpTableCell style={{ minWidth: '8rem' }} align="center">名称</DpTableCell>
|
|
<DpTableCell style={{ minWidth: '6rem' }} align="center">状态</DpTableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{data4.map((row,index) => (
|
|
<DpTableRow key={row.stcd}>
|
|
<DpTableCell align="center">{index+1}</DpTableCell>
|
|
<DpTableCell component="th" scope="row">
|
|
<div className="table-ellipsis cursor-pointer" style={{marginLeft:'20px'}} onClick={() => {
|
|
const { res_lon:lgtd, res_lat:lttd } = row;
|
|
if (lgtd && lttd) {
|
|
dispatch.runtime.setCameraTarget({
|
|
center: [lgtd, lttd],
|
|
zoom: 15,
|
|
pitch: 60,
|
|
bearing: 0
|
|
});
|
|
}
|
|
}}>{row.stnm}</div>
|
|
</DpTableCell>
|
|
<DpTableCell align="center">{<span style={{color:'#3af6cd',display:'flex',alignItems:'center',marginLeft:'30px'}}><div style={{width:'10px',height:'10px',borderRadius:'10px',marginRight:'7px',background:'#3af6cd'}}></div>在线</span>}</DpTableCell>
|
|
</DpTableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>:null
|
|
}
|
|
{
|
|
tab==='5'?
|
|
<Table size="small" stickyHeader>
|
|
<TableHead>
|
|
<TableRow>
|
|
<DpTableCell style={{ minWidth: '50px' }} align="center">序号</DpTableCell>
|
|
<DpTableCell style={{ minWidth: '8rem' }} align="center">水库名称</DpTableCell>
|
|
<DpTableCell style={{ minWidth: '6rem' }} align="center">行政区</DpTableCell>
|
|
<DpTableCell style={{ minWidth: '6rem' }} align="center">状态</DpTableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{data5.map((row,index) => (
|
|
<DpTableRow key={row.stcd}>
|
|
<DpTableCell align="center">{index+1}</DpTableCell>
|
|
<DpTableCell component="th" scope="row">
|
|
<div className="table-ellipsis cursor-pointer" style={{marginLeft:'20px'}} onClick={() => {
|
|
const { res_lon:lgtd, res_lat:lttd } = row;
|
|
if (lgtd && lttd) {
|
|
dispatch.runtime.setCameraTarget({
|
|
center: [lgtd, lttd],
|
|
zoom: 15,
|
|
pitch: 60,
|
|
bearing: 0
|
|
});
|
|
}
|
|
}}>{row.res_nm}</div>
|
|
</DpTableCell>
|
|
<DpTableCell align="center">{row.town_nm}</DpTableCell>
|
|
<DpTableCell align="center">{row.online==='1'?
|
|
<span style={{color:'#3af6cd',display:'flex',alignItems:'center',justifyContent:'center'}}><div style={{width:'10px',height:'10px',borderRadius:'10px',marginRight:'7px',background:'#3af6cd'}}></div>在线</span>
|
|
:<span style={{color:'#eeeeee',display:'flex',alignItems:'center',justifyContent:'center'}}><div style={{width:'10px',height:'10px',borderRadius:'10px',marginRight:'7px',background:'#eeeeee'}}></div>离线</span>
|
|
}</DpTableCell>
|
|
</DpTableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>:null
|
|
}
|
|
</TableContainer>
|
|
</PanelBox>
|
|
)
|
|
}
|
|
|
|
export default DrpReal;
|