diff --git a/src/views/Home/panels/DrpWatch/Setting.js b/src/views/Home/panels/DrpWatch/Setting.js
new file mode 100644
index 0000000..a3055ef
--- /dev/null
+++ b/src/views/Home/panels/DrpWatch/Setting.js
@@ -0,0 +1,67 @@
+import React from 'react';
+
+import Dialog from '@material-ui/core/Dialog';
+import DialogContent from '@material-ui/core/DialogContent';
+import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
+import { FormGroup, MenuItem, Select, Switch, Typography } from '@material-ui/core';
+import DpDialogTitle from '../../../../layouts/mui/DpDialogTitle';
+import { useDispatch, useSelector } from 'react-redux';
+import { getLayerSetting, getLayerVisible } from '../../../../models/map/selectors';
+import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
+
+
+function Setting({ onClose }) {
+ const layerVisible = useSelector(getLayerVisible);
+ const layerSetting = useSelector(getLayerSetting);
+
+ const dispath = useDispatch();
+
+ return (
+
+ )
+}
+
+export default Setting;
diff --git a/src/views/Home/panels/DrpWatch/index.js b/src/views/Home/panels/DrpWatch/index.js
new file mode 100644
index 0000000..cfe59b4
--- /dev/null
+++ b/src/views/Home/panels/DrpWatch/index.js
@@ -0,0 +1,139 @@
+import React, { useMemo, useState } from 'react';
+import useRequest from '../../../../utils/useRequest';
+import PanelBox from '../../components/PanelBox';
+
+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 { useDispatch, useSelector } from 'react-redux';
+import { DrpRealPromise } from '../../../../models/_/real';
+import useRefresh from '../../../../utils/useRefresh';
+import clsx from 'clsx';
+import { renderDrp } from '../../../../utils/renutils';
+import { TableSortLabel } from '@material-ui/core';
+import Setting from './Setting';
+import { InfoPopNames } from '../../InfoPops';
+import config from '../../../../config';
+
+function DrpReal({ style }) {
+ const dispatch = useDispatch();
+ const tableDrpFilter = useSelector(s => s.realview.tableDrpFilter);
+ const tableDrpSorter = useSelector(s => s.realview.tableDrpSorter);
+ const drpAutoRefresh = useSelector(s => s.realview.drpAutoRefresh);
+ const t = useRefresh(drpAutoRefresh ? 20 * 1000 : 0);
+ const { data } = useRequest(DrpRealPromise.get, t);
+ const [setting, showSetting] = useState(false);
+
+ const showData = useMemo(() => {
+ if (!data) {
+ return [];
+ }
+ let ret = [];
+ data.forEach(o => {
+ if (!tableDrpFilter[o.type]) {
+ return;
+ }
+ ret.push(o);
+ })
+ if (tableDrpSorter) {
+ ret = ret.sort((a, b) => b[tableDrpSorter] - a[tableDrpSorter]);
+ }
+ return ret;
+ }, [data, tableDrpFilter, tableDrpSorter]);
+
+ const flyTo = (record) => {
+ const { lgtd, lttd } = record;
+ if (lgtd && lttd) {
+ dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealDrpPop, properties: record, coordinates: [lgtd, lttd] });
+ dispatch.runtime.setCameraTarget({
+ center: [lgtd, lttd + config.poiPositionOffsetY.drp],
+ zoom: config.poiPositionZoom.drp,
+ pitch: config.poiPitch,
+ bearing: 0
+ });
+ }
+ }
+
+ const toggleStType = (type) => {
+ const visible = !tableDrpFilter[type];
+ dispatch.realview.setTableDrpFilter({ [type]: visible });
+ }
+
+ const toggleAutoRefresh = () => {
+ dispatch.realview.setDrpAutoRefresh(!drpAutoRefresh);
+ }
+
+ const setSort = (type) => {
+ if (type === tableDrpSorter) {
+ dispatch.realview.setTableDrpSorter(null);
+ } else {
+ dispatch.realview.setTableDrpSorter(type);
+ }
+ }
+
+ return (
+
+ toggleStType('sh')}>山洪
+ toggleStType('sw')}>水文
+ toggleStType('qx')}>气象
+ toggleStType('sk')}>水库
+
+ }
+ extra={
+ <>
+
+ {/* showSetting(true)}> */}
+
+ }
+ >
+
+
+
+
+ 名称
+ {
+ ['h1', 'h3', 'h6', 'h24'].map(key => (
+
+ setSort(key)}
+ active={tableDrpSorter === key}
+ direction="desc">
+ {key}
+
+
+ ))
+ }
+
+
+
+ {showData.map((row) => (
+
+
+ flyTo(row)}>{row.stnm}
+
+ {renderDrp(row, 'h1')}
+ {renderDrp(row, 'h3')}
+ {renderDrp(row, 'h6')}
+ {renderDrp(row, 'h24')}
+
+ ))}
+
+
+
+ {
+ setting && showSetting(false)} />
+ }
+
+ )
+}
+
+export default DrpReal;
diff --git a/src/views/Home/panels/GqWatch/Setting.js b/src/views/Home/panels/GqWatch/Setting.js
new file mode 100644
index 0000000..fd1c4ef
--- /dev/null
+++ b/src/views/Home/panels/GqWatch/Setting.js
@@ -0,0 +1,51 @@
+import React from 'react';
+
+import Dialog from '@material-ui/core/Dialog';
+import DialogContent from '@material-ui/core/DialogContent';
+import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
+import { FormGroup, MenuItem, Select, Switch, Typography } from '@material-ui/core';
+import DpDialogTitle from '../../../../layouts/mui/DpDialogTitle';
+import { useDispatch, useSelector } from 'react-redux';
+import { getLayerSetting, getLayerVisible } from '../../../../models/map/selectors';
+import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
+
+
+function Setting({ onClose }) {
+ const layerVisible = useSelector(getLayerVisible);
+ const layerSetting = useSelector(getLayerSetting);
+
+ const dispath = useDispatch();
+
+ return (
+
+ )
+}
+
+export default Setting;
diff --git a/src/views/Home/panels/GqWatch/index.js b/src/views/Home/panels/GqWatch/index.js
new file mode 100644
index 0000000..4393993
--- /dev/null
+++ b/src/views/Home/panels/GqWatch/index.js
@@ -0,0 +1,166 @@
+import React, { useMemo, useState } from 'react';
+import useRequest from '../../../../utils/useRequest';
+import PanelBox from '../../components/PanelBox';
+
+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 { useDispatch, useSelector } from 'react-redux';
+import useRefresh from '../../../../utils/useRefresh';
+import { HDRealPromise } from '../../../../models/_/real';
+import clsx from 'clsx';
+import { renderHDRz } from '../../../../utils/renutils';
+import Setting from './Setting';
+import { InfoPopNames } from '../../InfoPops';
+import config from '../../../../config';
+
+
+function rzRender(rz, base) {
+ return (
+
= base ? 'red' : '#fff' }}>
+ {typeof base === 'number' ? base.toFixed(2) : ''}
+
+ );
+}
+
+function HDReal({ style }) {
+ const dispatch = useDispatch();
+ const tableRzFilter = useSelector(s => s.realview.tableRzFilter);
+ const hdAutoRefresh = useSelector(s => s.realview.hdAutoRefresh);
+ const t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
+ // let { data } = useRequest(HDRealPromise.get, t);
+ const [setting, showSetting] = useState(false);
+
+ // const showData = useMemo(() => {
+ // if (!data) {
+ // return [];
+ // }
+ // let ret = [];
+ // data.forEach(o => {
+ // if (!tableRzFilter[o.type]) {
+ // return;
+ // }
+ // o.status = Math.floor(Math.random() * (4 - 0 + 1)) + 0
+ // o.kd = (Math.random() * 100).toFixed(2);
+ // o.ll = (Math.random() * 100).toFixed(1);
+ // ret.push(o);
+ // });
+ // return ret;
+ // }, [data, tableRzFilter]);
+
+ const showData = Array(10).fill(0).map((o,i) => ({
+ id:`#${i + 1}`,
+ status: Math.floor(Math.random() * (4 - 0 + 1)) + 0,
+ kd: (Math.random() * 100).toFixed(2),
+ ll:(Math.random() * 100).toFixed(1)
+ }))
+
+ const flyTo = (record) => {
+ const { lgtd, lttd } = record;
+ if (lgtd && lttd) {
+ dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealHDPop, properties: record, coordinates: [lgtd, lttd] });
+ dispatch.runtime.setCameraTarget({
+ center: [lgtd, lttd + config.poiPositionOffsetY.hd],
+ zoom: config.poiPositionZoom.hd,
+ pitch: config.poiPitch,
+ });
+ }
+ }
+
+ const toggleStType = (type) => {
+ const visible = !tableRzFilter[type];
+ dispatch.realview.setTableRzFilter({ [type]: visible });
+ }
+
+ const toggleAutoRefresh = () => {
+ dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
+ }
+
+ const renderStatus = (row) => {
+ let bz = '运行'
+ switch (row.status) {
+ case 0:
+ bz = '停止'
+ break;
+ case 1:
+ bz = '运行'
+ break;
+ case 2:
+ bz = '故障'
+ break;
+ case 3:
+ bz = '维护中'
+ break;
+ case 4:
+ bz = '待机'
+ break;
+ default:
+ break;
+ }
+ return bz
+ }
+
+ return (
+
+ // toggleStType('sh')}>山洪
+ // toggleStType('sw')}>水文
+ //
+ // }
+ extra={
+ <>
+
+ {/* showSetting(true)}> */}
+
+ }
+ >
+
+
+
+
+ 名称
+ 闸门开度(%)
+ 过闸流量(m³/s)
+ 泵站运行状态
+ {/* 警戒水位 */}
+
+
+
+ {showData.map((row) => (
+
+
+ {row.id}
+
+
+ flyTo(row)}
+ >{row.kd}
+
+ {row.ll}
+ {renderStatus(row)}
+ {/* {rzRender(row.rz, row.grz)}
+ {rzRender(row.rz, row.wrz)} */}
+
+ ))}
+
+
+
+ {
+ setting && showSetting(false)} />
+ }
+
+ )
+}
+
+export default HDReal;
diff --git a/src/views/Home/panels/GqWeatherForcast/H24Player.js b/src/views/Home/panels/GqWeatherForcast/H24Player.js
new file mode 100644
index 0000000..add0d4a
--- /dev/null
+++ b/src/views/Home/panels/GqWeatherForcast/H24Player.js
@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Grid, Slider } from '@material-ui/core';
+import { useDispatch } from 'react-redux';
+import { Pause, PlayCircleFilled } from '@material-ui/icons';
+
+function H24Player({ contour }) {
+ const dispatch = useDispatch();
+
+ const [play, setPlay] = useState(false);
+ const curtm = contour?.tms[contour?.index];
+
+ useEffect(() => {
+ if (play) {
+ const h = setInterval(() => {
+ dispatch.runtime.addContourIndex({ startIndex: 1 });
+ }, 1000);
+
+ return () => {
+ clearInterval(h);
+ }
+ }
+ }, [play]);
+
+ const setIndex = (index) => {
+ const newContour = { ...contour };
+ newContour.index = index + 1;
+ dispatch.runtime.setLayerSetting({ contour: newContour })
+ };
+
+ return (
+
+
+
setIndex(val)}
+ />
+
+
+ {curtm?.substr(0, '0000-00-00 00'.length)}
+
+
+ : }
+ onClick={() => setPlay(!play)}
+ >
+ {play ? '暂停' : '播放'}
+
+
+
+
+
+
+ )
+}
+
+export default React.memo(H24Player);
diff --git a/src/views/Home/panels/GqWeatherForcast/LegendCommon.js b/src/views/Home/panels/GqWeatherForcast/LegendCommon.js
new file mode 100644
index 0000000..9fad933
--- /dev/null
+++ b/src/views/Home/panels/GqWeatherForcast/LegendCommon.js
@@ -0,0 +1,91 @@
+import { makeStyles } from '@material-ui/core';
+import { max } from 'moment';
+import React, { useMemo } from 'react';
+import { drpShColor } from '../../../../utils/renutils';
+
+const useStyles = makeStyles({
+ root: {
+ marginTop: '0.5rem'
+ },
+
+ row: {
+ display: 'flex',
+ alignItems: 'center',
+
+
+ '& > .color': {
+ width: '50%',
+ borderTopRightRadius: '999rem',
+ borderBottomRightRadius: '999rem',
+ padding: '0.3rem',
+ display: 'flex',
+ justifyContent: 'flex-end',
+
+ '& > .label': {
+ borderRadius: '999rem',
+ color: '#fff',
+ background: '#000',
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ height: '2.5rem',
+ width: '2.5rem'
+ }
+ },
+
+ '& > .value': {
+ width: '40%',
+ textAlign: 'right'
+ },
+ }
+});
+
+export function areaFormat(val) {
+ if (typeof val !== 'number') {
+ return '-';
+ }
+
+ return (val / 1000000).toFixed(2);
+}
+
+function LegendCommon({ breaks, features }) {
+ const classes = useStyles();
+
+ const filteredBreaks = useMemo(() => {
+ if (!breaks) {
+ return [];
+ }
+ if (!features) {
+ return [breaks[0]];
+ }
+
+ const z1 = features.map(o => o.properties.z1).sort();
+ const maxZ = z1[z1.length - 1];
+ let ib = 1;
+ for (; ib < breaks.length; ib++) {
+ if (breaks[ib] > maxZ) {
+ break;
+ }
+ }
+ return breaks.slice(0, ib + 1);
+ }, [breaks, features]);
+
+ return (
+
+ {
+ filteredBreaks.map(o => {
+ const clr = drpShColor(o, true, 0.9);
+ return (
+
+ )
+ })
+ }
+
+ )
+}
+
+export default LegendCommon;
diff --git a/src/views/Home/panels/GqWeatherForcast/WF.js b/src/views/Home/panels/GqWeatherForcast/WF.js
new file mode 100644
index 0000000..af7c48b
--- /dev/null
+++ b/src/views/Home/panels/GqWeatherForcast/WF.js
@@ -0,0 +1,150 @@
+import { Button, Grid, makeStyles } from '@material-ui/core'
+import { CheckBox, CheckBoxOutlineBlank } from '@material-ui/icons';
+import React, { useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import DpAlert from '../../../../layouts/mui/DpAlert';
+import H24Player from './H24Player';
+import LegendCommon from './LegendCommon';
+
+const useStyles = makeStyles({
+ root: {
+ color: '#fff',
+ padding: '0.8rem 0',
+ },
+
+ tool: {
+ marginBottom: '1.2rem',
+ },
+
+
+ buttons: {
+ backgroundColor: 'red',
+ flexShrink: 0,
+ },
+ legend: {
+ backgroundColor: 'green',
+ },
+
+ checklabel: {
+ justifyContent: 'flex-start',
+ }
+})
+
+function WF() {
+ const classes = useStyles();
+ const dispatch = useDispatch();
+
+ let contourSetting = useSelector(s => s.runtime.layerSetting.contour);
+ const { type, outdated, strtm } = useMemo(() => {
+ let type = contourSetting?.type;
+ const ret = { type };
+ if (type === 'wf24h') {
+ ret.strtm = contourSetting?.tm;
+ ret.outdated = false;
+ } else if (type === 'wf2h') {
+ ret.strtm = contourSetting?.tm;
+ ret.outdated = false;
+ }
+ return ret;
+ }, [contourSetting]);
+
+ const genWeatherContour24H = () => {
+ dispatch.shyjview.showWeather24h();
+ }
+
+ const genWeatherContourRadar = () => {
+ dispatch.shyjview.showWeatherRadar();
+ }
+
+ const setIndexH24 = (index) => {
+ let newContourSetting = { ...contourSetting };
+ if (typeof index === 'number') {
+ newContourSetting.index = index + 1;
+ } else {
+ newContourSetting.index = 0;
+ }
+ dispatch.runtime.setLayerSetting({ contour: newContourSetting })
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+ {
+ strtm && contourSetting?.msg ? (
+ {contourSetting.msg}
+ ) : null
+ }
+ {
+ strtm ? (
+ {`天气预报时间: ${strtm.substr(0, '0000-00-00 00'.length)}`}
+ ) : (
+ 点击上方按钮查看实时天气预报
+ )
+ }
+ {
+ type === 'wf24h' ? (
+ <>
+ : }
+ >24小时总雨量预报
+
+
+
+ {
+ contourSetting?.index > 0 ? (
+ <>
+
+
+
+ ) : (
+
+ )
+ }
+
+ ) : null
+ }
+ {
+ type === 'wf2h' ? (
+
+ ) : null
+ }
+
+ )
+}
+
+export default React.memo(WF);
diff --git a/src/views/Home/panels/GqWeatherForcast/index.js b/src/views/Home/panels/GqWeatherForcast/index.js
new file mode 100644
index 0000000..4a31cfb
--- /dev/null
+++ b/src/views/Home/panels/GqWeatherForcast/index.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import PanelBox from '../../components/PanelBox';
+import WF from './WF';
+
+
+export default function WeatherForcast({ style }) {
+ const dispatch = useDispatch();
+
+ const closeLayer = () => {
+ dispatch.runtime.setLayerSetting({ contour: null, dem: undefined });
+ dispatch.map.setLayerVisible({ ContourLayer: false });
+ }
+
+ return (
+
+ }
+ >
+
+
+ )
+}
diff --git a/src/views/Home/panels/HDWatch/Setting.js b/src/views/Home/panels/HDWatch/Setting.js
new file mode 100644
index 0000000..fd1c4ef
--- /dev/null
+++ b/src/views/Home/panels/HDWatch/Setting.js
@@ -0,0 +1,51 @@
+import React from 'react';
+
+import Dialog from '@material-ui/core/Dialog';
+import DialogContent from '@material-ui/core/DialogContent';
+import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
+import { FormGroup, MenuItem, Select, Switch, Typography } from '@material-ui/core';
+import DpDialogTitle from '../../../../layouts/mui/DpDialogTitle';
+import { useDispatch, useSelector } from 'react-redux';
+import { getLayerSetting, getLayerVisible } from '../../../../models/map/selectors';
+import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
+
+
+function Setting({ onClose }) {
+ const layerVisible = useSelector(getLayerVisible);
+ const layerSetting = useSelector(getLayerSetting);
+
+ const dispath = useDispatch();
+
+ return (
+
+ )
+}
+
+export default Setting;
diff --git a/src/views/Home/panels/HDWatch/index.js b/src/views/Home/panels/HDWatch/index.js
new file mode 100644
index 0000000..bda7946
--- /dev/null
+++ b/src/views/Home/panels/HDWatch/index.js
@@ -0,0 +1,122 @@
+import React, { useMemo, useState } from 'react';
+import useRequest from '../../../../utils/useRequest';
+import PanelBox from '../../components/PanelBox';
+
+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 { useDispatch, useSelector } from 'react-redux';
+import useRefresh from '../../../../utils/useRefresh';
+import { HDRealPromise } from '../../../../models/_/real';
+import clsx from 'clsx';
+import { renderHDRz } from '../../../../utils/renutils';
+import Setting from './Setting';
+import { InfoPopNames } from '../../InfoPops';
+import config from '../../../../config';
+
+
+function rzRender(rz, base) {
+ return (
+
= base ? 'red' : '#fff' }}>
+ {typeof base === 'number' ? base.toFixed(2) : ''}
+
+ );
+}
+
+function HDReal({ style }) {
+ const dispatch = useDispatch();
+ const tableRzFilter = useSelector(s => s.realview.tableRzFilter);
+ const hdAutoRefresh = useSelector(s => s.realview.hdAutoRefresh);
+ const t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
+ let { data } = useRequest(HDRealPromise.get, t);
+ const [setting, showSetting] = useState(false);
+
+ const showData = useMemo(() => {
+ if (!data) {
+ return [];
+ }
+ let ret = [];
+ data.forEach(o => {
+ if (!tableRzFilter[o.type]) {
+ return;
+ }
+ ret.push(o);
+ });
+ return ret;
+ }, [data, tableRzFilter]);
+
+ const flyTo = (record) => {
+ const { lgtd, lttd } = record;
+ if (lgtd && lttd) {
+ dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealHDPop, properties: record, coordinates: [lgtd, lttd] });
+ dispatch.runtime.setCameraTarget({
+ center: [lgtd, lttd + config.poiPositionOffsetY.hd],
+ zoom: config.poiPositionZoom.hd,
+ pitch: config.poiPitch,
+ });
+ }
+ }
+
+ const toggleStType = (type) => {
+ const visible = !tableRzFilter[type];
+ dispatch.realview.setTableRzFilter({ [type]: visible });
+ }
+
+ const toggleAutoRefresh = () => {
+ dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
+ }
+
+ return (
+
+ toggleStType('sh')}>山洪
+ toggleStType('sw')}>水文
+
+ }
+ extra={
+ <>
+
+ {/* showSetting(true)}> */}
+
+ }
+ >
+
+
+
+
+ 名称
+ 水位
+ 保证水位
+ 警戒水位
+
+
+
+ {showData.map((row) => (
+
+
+ flyTo(row)}>{row.stnm}
+
+ {renderHDRz(row)}
+ {rzRender(row.rz, row.grz)}
+ {rzRender(row.rz, row.wrz)}
+
+ ))}
+
+
+
+ {
+ setting && showSetting(false)} />
+ }
+
+ )
+}
+
+export default HDReal;
diff --git a/src/views/Home/panels/JyWarn/OverallContent.js b/src/views/Home/panels/JyWarn/OverallContent.js
new file mode 100644
index 0000000..04b4905
--- /dev/null
+++ b/src/views/Home/panels/JyWarn/OverallContent.js
@@ -0,0 +1,150 @@
+import { Button, makeStyles } from '@material-ui/core';
+import { Email } from '@material-ui/icons';
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import config from '../../../../config';
+import { bxstr, drpRealGet, skRealGet } from '../../../../models/_/real';
+import { strNumber } from '../../../../utils/tools';
+import { InfoPopNames } from '../../InfoPops';
+
+const useStyles = makeStyles({
+ root: {
+ padding: '1.5rem 0.75rem 0.75rem 0.75rem',
+ color: 'rgb(224, 246, 247)',
+ fontSize: '0.9rem',
+ lineHeight: '1.8rem',
+ },
+
+ titleDate: {
+ fontSize: '1.2rem',
+ margin: '0.2rem',
+ color: '#00deff',
+ },
+
+ number: {
+ color: '#ffd220',
+ fontSize: '1.2rem',
+ margin: '0.2rem',
+ },
+
+ sttype: {
+ color: '#92f0ff',
+ },
+ stname: {
+ fontWeight: 'bold',
+ fontSize: '1rem',
+ margin: '0.25rem',
+ cursor: 'pointer'
+ },
+
+ grid: {
+ display: 'flex',
+ justifyContent: 'space-around',
+ marginBottom: '1rem',
+ textAlign: 'center',
+
+ '& .value': {
+ fontSize: '1.8rem',
+ color: '#6fe9fd',
+ lineHeight: '2rem'
+ },
+
+
+ '& .key': {
+ fontSize: '0.8rem',
+ color: '#aaa',
+ },
+ },
+
+ action: {
+ textAlign: 'right',
+ color: '#fff',
+ }
+})
+
+export default function OverallContent({ data }) {
+ const classes = useStyles();
+ const dispatch = useDispatch();
+
+ const {
+ drpInfo,
+ skInfo,
+ tm1, tm2,
+ } = data || {};
+
+ const { h24, h1, h3, h6 } = drpInfo || {};
+
+ const _showRecord = (record, poptype) => {
+ if (record) {
+ const { lgtd, lttd } = record;
+ if (lgtd && lttd) {
+ dispatch.runtime.setFeaturePop({ type: poptype, properties: record, coordinates: [lgtd, lttd] });
+ dispatch.runtime.setCameraTarget({
+ center: [lgtd, lttd],
+ zoom: 15,
+ pitch: config.poiPitch,
+ });
+ }
+ }
+ }
+
+ const showRecord = (obj) => {
+ if (!obj) {
+ return;
+ }
+
+ const { type } = obj;
+ if (type === 'sk') {
+ skRealGet(obj.stcd).then((record) => {
+ _showRecord(record, InfoPopNames.RealSkPop)
+ })
+ } else {
+ drpRealGet(obj).then((record) => {
+ _showRecord(record, InfoPopNames.RealDrpPop)
+ });
+ }
+ }
+
+ const doBx = () => {
+ bxstr().then((data) => {
+ dispatch.runtime.setInfoDlg({
+ layerId: 'OverallSmtp',
+ properties: { txt: data }
+ })
+ });
+ }
+
+ return (
+
+
+
+
+
+
showRecord(h24?.max)}>
+ 0个
+
+
红色预警
+
+
+
+
+ 当前无告警
+
+
+
+ )
+}
diff --git a/src/views/Home/panels/JyWarn/index.js b/src/views/Home/panels/JyWarn/index.js
new file mode 100644
index 0000000..7ad6d34
--- /dev/null
+++ b/src/views/Home/panels/JyWarn/index.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { OverallPromise } from '../../../../models/_/real';
+import useRequest from '../../../../utils/useRequest';
+import PanelBox from '../../components/PanelBox';
+import OverallContent from './OverallContent';
+
+export default function Overall({ style }) {
+
+ const { data } = useRequest(OverallPromise.get);
+
+ return (
+
+
+
+ )
+}
diff --git a/src/views/Home/panels/JyWarn/index.less b/src/views/Home/panels/JyWarn/index.less
new file mode 100644
index 0000000..ee34c9b
--- /dev/null
+++ b/src/views/Home/panels/JyWarn/index.less
@@ -0,0 +1,38 @@
+.dppanel-overall {
+ padding: 0.75rem;
+ color: rgb(224, 246, 247);
+ font-size: 0.8rem;
+ line-height: 1.8rem;
+
+ .title-date {
+ font-size: 1.2rem;
+ margin: 0.2rem;
+ color: #00deff;
+ }
+
+ .number {
+ color: #ffd220;
+ font-size: 1.2rem;
+ margin: 0.2rem;
+ }
+
+ .sttype {
+ color: #92f0ff;
+ }
+ .stname {
+ font-weight: bold;
+ font-size: 1rem;
+ margin: 0.25rem;
+ }
+
+ .sycm {
+ height: 5rem;
+ padding-top: 0.75rem;
+ ul{ margin-left:-.5rem;margin-right:-.5rem; padding: .16rem 0;}
+ li{ float: left; width: 33.33%; text-align: center; position: relative}
+ li:before{ position:absolute; content: ""; height:30%; width: 1px; background: rgba(255,255,255,.1); right: 0; top: 15%;}
+ li:last-child:before{ width: 0;}
+ li h2{ font-size:2rem; color: #6fe9fd; margin: 0; font-family: 'electronicFont';margin-bottom: 0.5rem;}
+ li span{ font-size:1rem; color: #fff; opacity: .5;}
+ }
+}
\ No newline at end of file
diff --git a/src/views/Home/panels/LlWatch/Setting.js b/src/views/Home/panels/LlWatch/Setting.js
new file mode 100644
index 0000000..fd1c4ef
--- /dev/null
+++ b/src/views/Home/panels/LlWatch/Setting.js
@@ -0,0 +1,51 @@
+import React from 'react';
+
+import Dialog from '@material-ui/core/Dialog';
+import DialogContent from '@material-ui/core/DialogContent';
+import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
+import { FormGroup, MenuItem, Select, Switch, Typography } from '@material-ui/core';
+import DpDialogTitle from '../../../../layouts/mui/DpDialogTitle';
+import { useDispatch, useSelector } from 'react-redux';
+import { getLayerSetting, getLayerVisible } from '../../../../models/map/selectors';
+import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
+
+
+function Setting({ onClose }) {
+ const layerVisible = useSelector(getLayerVisible);
+ const layerSetting = useSelector(getLayerSetting);
+
+ const dispath = useDispatch();
+
+ return (
+
+ )
+}
+
+export default Setting;
diff --git a/src/views/Home/panels/LlWatch/index.js b/src/views/Home/panels/LlWatch/index.js
new file mode 100644
index 0000000..cf5f429
--- /dev/null
+++ b/src/views/Home/panels/LlWatch/index.js
@@ -0,0 +1,169 @@
+import React, { useMemo, useState } from 'react';
+import useRequest from '../../../../utils/useRequest';
+import PanelBox from '../../components/PanelBox';
+
+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 { useDispatch, useSelector } from 'react-redux';
+import useRefresh from '../../../../utils/useRefresh';
+import { HDRealPromise } from '../../../../models/_/real';
+import clsx from 'clsx';
+import { renderHDRz } from '../../../../utils/renutils';
+import Setting from './Setting';
+import { InfoPopNames } from '../../InfoPops';
+import config from '../../../../config';
+import moment from 'moment';
+
+function rzRender(rz, base) {
+ return (
+
= base ? 'red' : '#fff' }}>
+ {typeof base === 'number' ? base.toFixed(2) : ''}
+
+ );
+}
+
+function HDReal({ style }) {
+ const dispatch = useDispatch();
+ const tableRzFilter = useSelector(s => s.realview.tableRzFilter);
+ const hdAutoRefresh = useSelector(s => s.realview.hdAutoRefresh);
+ const t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
+ // let { data } = useRequest(HDRealPromise.get, t);
+ const [setting, showSetting] = useState(false);
+
+ // const showData = useMemo(() => {
+ // if (!data) {
+ // return [];
+ // }
+ // let ret = [];
+ // data.forEach(o => {
+ // if (!tableRzFilter[o.type]) {
+ // return;
+ // }
+ // o.status = Math.floor(Math.random() * (4 - 0 + 1)) + 0
+ // o.kd = (Math.random() * 100).toFixed(2);
+ // o.ll = (Math.random() * 100).toFixed(1);
+ // ret.push(o);
+ // });
+ // return ret;
+ // }, [data, tableRzFilter]);
+ const randomMinutes = Math.floor(Math.random() * 60) + 1;
+ const format = 'YYYY-MM-DD HH:mm';
+ const showData = Array(10).fill(0).map((o,i) => ({
+ id:i + 1,
+ time: moment()
+ .subtract(i * 60 + randomMinutes, 'minutes')
+ .format(format),
+ kd: (Math.random() * 1).toFixed(2),
+ ll:(Math.random() * 1).toFixed(1)
+ }))
+
+ const flyTo = (record) => {
+ const { lgtd, lttd } = record;
+ if (lgtd && lttd) {
+ dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealHDPop, properties: record, coordinates: [lgtd, lttd] });
+ dispatch.runtime.setCameraTarget({
+ center: [lgtd, lttd + config.poiPositionOffsetY.hd],
+ zoom: config.poiPositionZoom.hd,
+ pitch: config.poiPitch,
+ });
+ }
+ }
+
+ const toggleStType = (type) => {
+ const visible = !tableRzFilter[type];
+ dispatch.realview.setTableRzFilter({ [type]: visible });
+ }
+
+ const toggleAutoRefresh = () => {
+ dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
+ }
+
+ const renderStatus = (row) => {
+ let bz = '运行'
+ switch (row.status) {
+ case 0:
+ bz = '停止'
+ break;
+ case 1:
+ bz = '运行'
+ break;
+ case 2:
+ bz = '故障'
+ break;
+ case 3:
+ bz = '维护中'
+ break;
+ case 4:
+ bz = '待机'
+ break;
+ default:
+ break;
+ }
+ return bz
+ }
+
+ return (
+
+ // toggleStType('sh')}>山洪
+ // toggleStType('sw')}>水文
+ //
+ // }
+ extra={
+ <>
+
+ {/* showSetting(true)}> */}
+
+ }
+ >
+
+
+
+
+ 序号
+ 数据时间
+ 流量(m³/s)
+ 水量(m³)
+ {/* 警戒水位 */}
+
+
+
+ {showData.map((row) => (
+
+
+ {row.id}
+
+
+ flyTo(row)}
+ >{row.time}
+
+ {row.ll}
+ {row.kd}
+ {/* {rzRender(row.rz, row.grz)}
+ {rzRender(row.rz, row.wrz)} */}
+
+ ))}
+
+
+
+ {
+ setting && showSetting(false)} />
+ }
+
+ )
+}
+
+export default HDReal;
diff --git a/src/views/Home/panels/SpVideo/Setting.js b/src/views/Home/panels/SpVideo/Setting.js
new file mode 100644
index 0000000..fd1c4ef
--- /dev/null
+++ b/src/views/Home/panels/SpVideo/Setting.js
@@ -0,0 +1,51 @@
+import React from 'react';
+
+import Dialog from '@material-ui/core/Dialog';
+import DialogContent from '@material-ui/core/DialogContent';
+import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
+import { FormGroup, MenuItem, Select, Switch, Typography } from '@material-ui/core';
+import DpDialogTitle from '../../../../layouts/mui/DpDialogTitle';
+import { useDispatch, useSelector } from 'react-redux';
+import { getLayerSetting, getLayerVisible } from '../../../../models/map/selectors';
+import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
+
+
+function Setting({ onClose }) {
+ const layerVisible = useSelector(getLayerVisible);
+ const layerSetting = useSelector(getLayerSetting);
+
+ const dispath = useDispatch();
+
+ return (
+
+ )
+}
+
+export default Setting;
diff --git a/src/views/Home/panels/SpVideo/index.js b/src/views/Home/panels/SpVideo/index.js
new file mode 100644
index 0000000..e258490
--- /dev/null
+++ b/src/views/Home/panels/SpVideo/index.js
@@ -0,0 +1,378 @@
+import React, { useMemo, useState } from 'react';
+import useRequest from '../../../../utils/useRequest';
+import PanelBox from '../../components/PanelBox';
+
+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 { useDispatch, useSelector } from 'react-redux';
+import useRefresh from '../../../../utils/useRefresh';
+import { HDRealPromise } from '../../../../models/_/real';
+import clsx from 'clsx';
+import { renderHDRz } from '../../../../utils/renutils';
+import Setting from './Setting';
+import { InfoPopNames } from '../../InfoPops';
+import config from '../../../../config';
+import moment from 'moment';
+
+function rzRender(rz, base) {
+ return (
+
= base ? 'red' : '#fff' }}>
+ {typeof base === 'number' ? base.toFixed(2) : ''}
+
+ );
+}
+
+function HDReal({ style }) {
+ const dispatch = useDispatch();
+ const tableRzFilter = useSelector(s => s.realview.tableRzFilter);
+ const hdAutoRefresh = useSelector(s => s.realview.hdAutoRefresh);
+ const t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
+ // let { data } = useRequest(HDRealPromise.get, t);
+ const [setting, showSetting] = useState(false);
+
+ // const showData = useMemo(() => {
+ // if (!data) {
+ // return [];
+ // }
+ // let ret = [];
+ // data.forEach(o => {
+ // if (!tableRzFilter[o.type]) {
+ // return;
+ // }
+ // o.status = Math.floor(Math.random() * (4 - 0 + 1)) + 0
+ // o.kd = (Math.random() * 100).toFixed(2);
+ // o.ll = (Math.random() * 100).toFixed(1);
+ // ret.push(o);
+ // });
+ // return ret;
+ // }, [data, tableRzFilter]);
+ const randomMinutes = Math.floor(Math.random() * 60) + 1;
+ const format = 'YYYY-MM-DD HH:mm';
+ const SOIL_STATIONS = [
+ {
+ id: 1,
+ name: '宋埠镇站',
+ location: {
+ lat: 31.1725,
+ lng: 115.0139
+ }
+ },
+ {
+ id: 2,
+ name: '乘马岗镇站',
+ location: {
+ lat: 31.2503,
+ lng: 115.1242
+ }
+ },
+ {
+ id: 3,
+ name: '白果镇站',
+ location: {
+ lat: 31.0958,
+ lng: 115.2417
+ }
+ },
+ {
+ id: 4,
+ name: '福田河站',
+ location: {
+ lat: 31.1847,
+ lng: 115.1536
+ }
+ },
+ {
+ id: 5,
+ name: '黄土岗镇站',
+ location: {
+ lat: 31.2158,
+ lng: 115.0825
+ }
+ }
+];
+ // const showData = Array(10).fill(0).map((o, i) => ({
+ // stnm:SOIL_STATIONS[i%2]?.name,
+ // id:i + 1,
+ // time: moment()
+ // .subtract(i * 60 + randomMinutes, 'minutes')
+ // .format(format),
+ // sd: (Math.random() * 100).toFixed(2),
+ // }))
+
+ const flyTo = (record) => {
+ const { lgtd, lttd } = record;
+ if (lgtd && lttd) {
+ dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealHDPop, properties: record, coordinates: [lgtd, lttd] });
+ dispatch.runtime.setCameraTarget({
+ center: [lgtd, lttd + config.poiPositionOffsetY.hd],
+ zoom: config.poiPositionZoom.hd,
+ pitch: config.poiPitch,
+ });
+ }
+ }
+
+ const toggleStType = (type) => {
+ const visible = !tableRzFilter[type];
+ dispatch.realview.setTableRzFilter({ [type]: visible });
+ }
+const showData = [
+ {
+ "id": "1",
+ "indexCode": "-1",
+ "name": "坝顶公路入口",
+ "ipAddress": null,
+ "chan": null,
+ "type": 1,
+ "buildDate": null,
+ "lgtd": "114.7632670",
+ "lttd": "31.4934740",
+ "menuId": 1,
+ "menuName": null,
+ "remark": null,
+ "createTime": null
+ },
+ {
+ "id": "2",
+ "indexCode": "-1",
+ "name": "大坝中",
+ "ipAddress": null,
+ "chan": null,
+ "type": 1,
+ "buildDate": null,
+ "lgtd": "114.7635070",
+ "lttd": "31.4958250",
+ "menuId": 1,
+ "menuName": null,
+ "remark": null,
+ "createTime": null
+ },
+ {
+ "id": "3",
+ "indexCode": "-1",
+ "name": "溢洪道左",
+ "ipAddress": null,
+ "chan": null,
+ "type": 1,
+ "buildDate": null,
+ "lgtd": "114.7632360",
+ "lttd": "31.4984280",
+ "menuId": 2,
+ "menuName": null,
+ "remark": null,
+ "createTime": null
+ },
+ {
+ "id": "4",
+ "indexCode": "-1",
+ "name": "溢洪道右",
+ "ipAddress": null,
+ "chan": null,
+ "type": 1,
+ "buildDate": null,
+ "lgtd": "114.7639080",
+ "lttd": "31.4987730",
+ "menuId": 2,
+ "menuName": null,
+ "remark": null,
+ "createTime": null
+ },
+ {
+ "id": "5",
+ "indexCode": "-1",
+ "name": "溢洪道消力池",
+ "ipAddress": null,
+ "chan": null,
+ "type": 1,
+ "buildDate": null,
+ "lgtd": "114.7645800",
+ "lttd": "31.4976180",
+ "menuId": 2,
+ "menuName": null,
+ "remark": null,
+ "createTime": null
+ },
+ {
+ "id": "6",
+ "indexCode": "-1",
+ "name": "中心机房",
+ "ipAddress": null,
+ "chan": null,
+ "type": 1,
+ "buildDate": null,
+ "lgtd": "114.7630480",
+ "lttd": "31.4925400",
+ "menuId": 3,
+ "menuName": null,
+ "remark": null,
+ "createTime": null
+ },
+ {
+ "id": "7",
+ "indexCode": "-1",
+ "name": "灌溉发电洞入口",
+ "ipAddress": null,
+ "chan": null,
+ "type": 1,
+ "buildDate": null,
+ "lgtd": "114.7614910",
+ "lttd": "31.4931630",
+ "menuId": 4,
+ "menuName": null,
+ "remark": null,
+ "createTime": null
+ },
+ {
+ "id": "8",
+ "indexCode": "-1",
+ "name": "灌溉发电洞出口",
+ "ipAddress": null,
+ "chan": null,
+ "type": 1,
+ "buildDate": null,
+ "lgtd": "114.7617570",
+ "lttd": "31.4917830",
+ "menuId": 4,
+ "menuName": null,
+ "remark": null,
+ "createTime": null
+ },
+ {
+ "id": "9",
+ "indexCode": "-1",
+ "name": "灌溉发电洞启闭机房",
+ "ipAddress": null,
+ "chan": null,
+ "type": 1,
+ "buildDate": null,
+ "lgtd": "114.7616050",
+ "lttd": "31.4924070",
+ "menuId": 4,
+ "menuName": null,
+ "remark": null,
+ "createTime": null
+ },
+ {
+ "id": "10",
+ "indexCode": "-1",
+ "name": "副坝坝上",
+ "ipAddress": null,
+ "chan": null,
+ "type": 1,
+ "buildDate": null,
+ "lgtd": "114.7584290",
+ "lttd": "31.4923590",
+ "menuId": 5,
+ "menuName": null,
+ "remark": null,
+ "createTime": null
+ },
+ {
+ "id": "11",
+ "indexCode": "-1",
+ "name": "陈店河入库口",
+ "ipAddress": null,
+ "chan": null,
+ "type": 1,
+ "buildDate": null,
+ "lgtd": "114.7467450",
+ "lttd": "31.5407780",
+ "menuId": 6,
+ "menuName": null,
+ "remark": null,
+ "createTime": null
+ }
+]
+
+ const toggleAutoRefresh = () => {
+ dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
+ }
+
+ const renderStatus = (row) => {
+ let bz = '运行'
+ switch (row.status) {
+ case 0:
+ bz = '停止'
+ break;
+ case 1:
+ bz = '运行'
+ break;
+ case 2:
+ bz = '故障'
+ break;
+ case 3:
+ bz = '维护中'
+ break;
+ case 4:
+ bz = '待机'
+ break;
+ default:
+ break;
+ }
+ return bz
+ }
+
+ return (
+
+ // toggleStType('sh')}>山洪
+ // toggleStType('sw')}>水文
+ //
+ // }
+ extra={
+ <>
+
+ {/* showSetting(true)}> */}
+
+ }
+ >
+
+
+
+
+ 序号
+ 视频点名称
+ 所属区域
+ {/* 监测时间 */}
+ {/* 警戒水位 */}
+
+
+
+ {showData.map((row) => (
+
+
+ {row.id}
+
+
+ flyTo(row)}
+ >{row.name}
+
+ {row.name}
+ {/* {row.time} */}
+ {/* {rzRender(row.rz, row.grz)}
+ {rzRender(row.rz, row.wrz)} */}
+
+ ))}
+
+
+
+ {
+ setting && showSetting(false)} />
+ }
+
+ )
+}
+
+export default HDReal;
diff --git a/src/views/Home/panels/TrWatch/Setting.js b/src/views/Home/panels/TrWatch/Setting.js
new file mode 100644
index 0000000..fd1c4ef
--- /dev/null
+++ b/src/views/Home/panels/TrWatch/Setting.js
@@ -0,0 +1,51 @@
+import React from 'react';
+
+import Dialog from '@material-ui/core/Dialog';
+import DialogContent from '@material-ui/core/DialogContent';
+import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
+import { FormGroup, MenuItem, Select, Switch, Typography } from '@material-ui/core';
+import DpDialogTitle from '../../../../layouts/mui/DpDialogTitle';
+import { useDispatch, useSelector } from 'react-redux';
+import { getLayerSetting, getLayerVisible } from '../../../../models/map/selectors';
+import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
+
+
+function Setting({ onClose }) {
+ const layerVisible = useSelector(getLayerVisible);
+ const layerSetting = useSelector(getLayerSetting);
+
+ const dispath = useDispatch();
+
+ return (
+
+ )
+}
+
+export default Setting;
diff --git a/src/views/Home/panels/TrWatch/index.js b/src/views/Home/panels/TrWatch/index.js
new file mode 100644
index 0000000..e13ce1d
--- /dev/null
+++ b/src/views/Home/panels/TrWatch/index.js
@@ -0,0 +1,211 @@
+import React, { useMemo, useState } from 'react';
+import useRequest from '../../../../utils/useRequest';
+import PanelBox from '../../components/PanelBox';
+
+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 { useDispatch, useSelector } from 'react-redux';
+import useRefresh from '../../../../utils/useRefresh';
+import { HDRealPromise } from '../../../../models/_/real';
+import clsx from 'clsx';
+import { renderHDRz } from '../../../../utils/renutils';
+import Setting from './Setting';
+import { InfoPopNames } from '../../InfoPops';
+import config from '../../../../config';
+import moment from 'moment';
+
+function rzRender(rz, base) {
+ return (
+
= base ? 'red' : '#fff' }}>
+ {typeof base === 'number' ? base.toFixed(2) : ''}
+
+ );
+}
+
+function HDReal({ style }) {
+ const dispatch = useDispatch();
+ const tableRzFilter = useSelector(s => s.realview.tableRzFilter);
+ const hdAutoRefresh = useSelector(s => s.realview.hdAutoRefresh);
+ const t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
+ // let { data } = useRequest(HDRealPromise.get, t);
+ const [setting, showSetting] = useState(false);
+
+ // const showData = useMemo(() => {
+ // if (!data) {
+ // return [];
+ // }
+ // let ret = [];
+ // data.forEach(o => {
+ // if (!tableRzFilter[o.type]) {
+ // return;
+ // }
+ // o.status = Math.floor(Math.random() * (4 - 0 + 1)) + 0
+ // o.kd = (Math.random() * 100).toFixed(2);
+ // o.ll = (Math.random() * 100).toFixed(1);
+ // ret.push(o);
+ // });
+ // return ret;
+ // }, [data, tableRzFilter]);
+ const randomMinutes = Math.floor(Math.random() * 60) + 1;
+ const format = 'YYYY-MM-DD HH:mm';
+ const SOIL_STATIONS = [
+ {
+ id: 1,
+ name: '宋埠镇站',
+ location: {
+ lat: 31.1725,
+ lng: 115.0139
+ }
+ },
+ {
+ id: 2,
+ name: '乘马岗镇站',
+ location: {
+ lat: 31.2503,
+ lng: 115.1242
+ }
+ },
+ {
+ id: 3,
+ name: '白果镇站',
+ location: {
+ lat: 31.0958,
+ lng: 115.2417
+ }
+ },
+ {
+ id: 4,
+ name: '福田河站',
+ location: {
+ lat: 31.1847,
+ lng: 115.1536
+ }
+ },
+ {
+ id: 5,
+ name: '黄土岗镇站',
+ location: {
+ lat: 31.2158,
+ lng: 115.0825
+ }
+ }
+];
+ const showData = Array(10).fill(0).map((o, i) => ({
+ stnm:SOIL_STATIONS[i%2]?.name,
+ id:i + 1,
+ time: moment()
+ .subtract(i * 60 + randomMinutes, 'minutes')
+ .format(format),
+ sd: (Math.random() * 100).toFixed(2),
+ }))
+
+ const flyTo = (record) => {
+ const { lgtd, lttd } = record;
+ if (lgtd && lttd) {
+ dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealHDPop, properties: record, coordinates: [lgtd, lttd] });
+ dispatch.runtime.setCameraTarget({
+ center: [lgtd, lttd + config.poiPositionOffsetY.hd],
+ zoom: config.poiPositionZoom.hd,
+ pitch: config.poiPitch,
+ });
+ }
+ }
+
+ const toggleStType = (type) => {
+ const visible = !tableRzFilter[type];
+ dispatch.realview.setTableRzFilter({ [type]: visible });
+ }
+
+ const toggleAutoRefresh = () => {
+ dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
+ }
+
+ const renderStatus = (row) => {
+ let bz = '运行'
+ switch (row.status) {
+ case 0:
+ bz = '停止'
+ break;
+ case 1:
+ bz = '运行'
+ break;
+ case 2:
+ bz = '故障'
+ break;
+ case 3:
+ bz = '维护中'
+ break;
+ case 4:
+ bz = '待机'
+ break;
+ default:
+ break;
+ }
+ return bz
+ }
+
+ return (
+
+ // toggleStType('sh')}>山洪
+ // toggleStType('sw')}>水文
+ //
+ // }
+ extra={
+ <>
+
+ {/* showSetting(true)}> */}
+
+ }
+ >
+
+
+
+
+ 序号
+ 站点
+ 湿度
+ 监测时间
+ {/* 警戒水位 */}
+
+
+
+ {showData.map((row) => (
+
+
+ {row.id}
+
+
+ flyTo(row)}
+ >{row.stnm}
+
+ {row.sd}
+ {row.time}
+ {/* {rzRender(row.rz, row.grz)}
+ {rzRender(row.rz, row.wrz)} */}
+
+ ))}
+
+
+
+ {
+ setting && showSetting(false)} />
+ }
+
+ )
+}
+
+export default HDReal;
diff --git a/src/views/Home/panels/WarnInfoMange/ARzSk.js b/src/views/Home/panels/WarnInfoMange/ARzSk.js
new file mode 100644
index 0000000..6d4b5a1
--- /dev/null
+++ b/src/views/Home/panels/WarnInfoMange/ARzSk.js
@@ -0,0 +1,75 @@
+import React from 'react';
+import moment from 'moment';
+import { Typography } from '@material-ui/core';
+import { useDispatch } from 'react-redux';
+import { InfoPopNames } from '../../InfoPops';
+import { MailOutline } from '@material-ui/icons';
+import { skInfo } from '../../../../models/_/search';
+import config from '../../../../config';
+
+function Item({ data, viewInfo, sendMessage }) {
+ return (
+
+
+
+
+
+
viewInfo(data)}>{data.stnm}
+
+
+{(data.rz - data.fsltdz).toFixed(2)}
+
+
+
+ 水库汛限水位{data.fsltdz}m。
+
+
+ 实时监测水位{data.rz}m，超出汛限水位{(data.rz - data.fsltdz).toFixed(2)}m
+
+
+
+ {moment(data.rzTm).format('YYYY-MM-DD HH:mm')}
+ sendMessage(data)} />
+
+
+
+ );
+}
+
+function ARzSk({ data }) {
+ data = data || [];
+ const dispatch = useDispatch();
+
+ const flyTo = (record) => {
+ const { lgtd, lttd } = record;
+ if (lgtd && lttd) {
+ dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealSkPop, properties: record, coordinates: [lgtd, lttd] });
+ dispatch.runtime.setCameraTarget({
+ center: [lgtd, lttd],
+ zoom: 15,
+ pitch: config.poiPitch,
+ });
+ }
+ }
+
+ const sendMessage = (record) => {
+ skInfo(record).then(data => {
+ if (data) {
+ console.log(record, data);
+ const txt = `${record.stnm}在${moment(record.rzTm).format('D日H时')}测得水位为${record.rz}米，超汛限水位(${record.fsltdz})${(record.rz - record.fsltdz).toFixed(2)}米，请做好核实防范工作。`;
+ dispatch.runtime.setInfoDlg({ layerId: 'SkSmtp', properties: { stnm: data.stnm, stcd: data.stcd, personels: data.personels, txt } })
+ }
+ })
+ }
+
+ return (
+
+ {
+ data.map(o => (
+
+ )
+}
+
+export default ARzSk;
diff --git a/src/views/Home/panels/WarnInfoMange/Hdyj.js b/src/views/Home/panels/WarnInfoMange/Hdyj.js
new file mode 100644
index 0000000..babb33c
--- /dev/null
+++ b/src/views/Home/panels/WarnInfoMange/Hdyj.js
@@ -0,0 +1,105 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import './ShYj.less';
+import appconsts from '../../../../models/appconsts';
+import { useDispatch } from 'react-redux';
+import apiurl from '../../../../models/apiurl';
+import { httpget } from '../../../../utils/request';
+import DpAlert from '../../../../layouts/mui/DpAlert';
+import moment from 'moment';
+import { HDRealPromise } from '../../../../models/_/real';
+import { InfoPopNames } from '../../InfoPops';
+import { hdyjLatestClosed } from '../../../../models/_/hdyj';
+import config from '../../../../config';
+
+
+function Item({ data, viewInfo, flyTo }) {
+ const tm1 = moment(data.exptm).format('YYYY-MM-DD HH:mm');
+ const tm2 = moment(data.tm).format('YYYY-MM-DD HH:mm');
+
+ const rz = data.rz;
+ const brz = data[appconsts.stWarnLevelKey[data.level]];
+ const arz = typeof brz === 'number' ? (rz - brz).toFixed(2) : '-';
+
+ return (
+
+
+
+
+
+
+ flyTo(data)}>{data.stnm}
+
+
+
{appconsts.stWarnStatus[data.status]}
+
+
+ {`报警水位${rz}m，测站${appconsts.stWarnLevel[data.level]}为${brz ?? '-'}m，超${arz || '-'}m`}
+
+
+
+
+ );
+}
+
+
+function Hdyj({ data }) {
+
+ const [hisdata, sethisdata] = useState();
+
+ useEffect(() => {
+ if (!data) {
+ return;
+ }
+
+ if (data.length === 0) {
+ hdyjLatestClosed().then(data => {
+ sethisdata(data || [])
+ });
+ }
+ }, [data?.length]);
+
+ const dispatch = useDispatch();
+ const viewInfo = useCallback((record) => {
+ dispatch.runtime.setInfoDlg({ layerId: 'StWarnRecord', properties: record })
+ }, [dispatch]);
+
+
+ const flyTo = useCallback(async ({ stcd, source }) => {
+ const list = await HDRealPromise.get() || [];
+ const record = list.find(o => o.stcd === stcd) || {};
+ const { lgtd, lttd } = record;
+ if (lgtd && lttd) {
+ dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealHDPop, properties: record, coordinates: [lgtd, lttd] });
+ dispatch.runtime.setCameraTarget({
+ center: [lgtd, lttd],
+ zoom: 15,
+ pitch: config.poiPitch,
+ });
+ }
+ }, [dispatch]);
+
+ const showdata = hisdata?.length > 0 ? hisdata : (data || []);
+
+ return (
+
+ {
+ hisdata?.length > 0 && 当前无预警，显示最新10条已关闭预警
+ }
+ {
+ showdata.map(o => (
+
+ )
+}
+
+export default React.memo(Hdyj);
diff --git a/src/views/Home/panels/WarnInfoMange/ShYj.js b/src/views/Home/panels/WarnInfoMange/ShYj.js
new file mode 100644
index 0000000..1d67336
--- /dev/null
+++ b/src/views/Home/panels/WarnInfoMange/ShYj.js
@@ -0,0 +1,107 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import './ShYj.less';
+import appconsts from '../../../../models/appconsts';
+import { useDispatch } from 'react-redux';
+import apiurl from '../../../../models/apiurl';
+import { httpget } from '../../../../utils/request';
+import config from '../../../../config';
+import DpAlert from '../../../../layouts/mui/DpAlert';
+import { DcpjPromise } from '../../../../models/_/dcpj';
+
+function Item({ data, viewInfo }) {
+ return (
+
+
+
+
+
+
viewInfo(data)}>{data.adnm || '--'}
+
+
{appconsts.warnStatus_TYPE[data.warnstatusid]}
+
+
+ {data.warndesc}
+
+
+
+
+ );
+}
+
+
+function ShYj({ data }) {
+
+ const [hisdata, sethisdata] = useState();
+
+ useEffect(() => {
+ if (!data) {
+ return;
+ }
+
+ if (data.length === 0) {
+ httpget(apiurl.shyj.find, { adcd: config.SHYJ_ADCD, page: 1, size: 10, warnstatusid: 30 })
+ .then(({ data }) => sethisdata(data.list || []))
+ }
+ }, [data?.length]);
+
+ const dispatch = useDispatch();
+ const viewInfo = useCallback((record, type) => {
+ if (type === 'danad') {
+ const adcd = record?.adcd?.replace(/([0]{3})*$/, '');
+ if (adcd) {
+ Promise.all([
+ DcpjPromise.danad.get(),
+ DcpjPromise.transfer.get(),
+ DcpjPromise.placement.get(),
+ ]).then(([danads, transfers, placements]) => {
+ const highlights = [
+ ...((danads || []).filter(o => o?.ADCD?.startsWith(adcd)).map(o => ({ ...o, type: 'danad' }))),
+ ...((transfers || []).filter(o => o?.ADCD?.startsWith(adcd)).map(o => ({ ...o, type: 'transfer' }))),
+ ...((placements || []).filter(o => o?.ADCD?.startsWith(adcd)).map(o => ({ ...o, type: 'placement' })))
+ ];
+ if (highlights.length > 0) {
+ dispatch.map.openHighlights({
+ title: `${record.adnm}危险区/转移路线/安置点`,
+ records: highlights.map(o => ({
+ id: o.PID,
+ adcd: o.ADCD,
+ lgtd: o.lgtd,
+ lttd: o.lttd,
+ name: o.NAME,
+ type: o.type,
+ }))
+ })
+ }
+ dispatch.map.highlightFeatures(highlights.map(o => ({
+ type: o.type,
+ props: o,
+ fill: 'rgb(239, 164, 114)',
+ stroke: o.type === 'danad' ? 'rgb(239, 164, 114)' : '#f6f082'
+ })));
+ });
+ }
+ } else {
+ dispatch.runtime.setInfoDlg({ layerId: 'ShWarn', properties: record })
+ }
+ }, [dispatch]);
+
+ const showdata = hisdata?.length > 0 ? hisdata : (data || []);
+
+ return (
+
+ {
+ hisdata?.length > 0 && 当前无预警，显示最新10条已关闭预警
+ }
+ {
+ showdata.map(o => (
+
+ )
+}
+
+export default React.memo(ShYj);
diff --git a/src/views/Home/panels/WarnInfoMange/ShYj.less b/src/views/Home/panels/WarnInfoMange/ShYj.less
new file mode 100644
index 0000000..1f50e16
--- /dev/null
+++ b/src/views/Home/panels/WarnInfoMange/ShYj.less
@@ -0,0 +1,112 @@
+.dppanel-shyj {
+ padding: 0.75rem 0.5rem;
+ color: #fff;
+
+ .tool {
+ display: flex;
+ margin-bottom: 0.5rem;
+ }
+
+ .item {
+ display: flex;
+ padding: 0.5rem;
+ align-items: flex-start;
+
+ border-bottom: 1px dashed #bce9f088;
+
+ .header {
+ width: 2.25rem;
+ height: 2.25rem;
+ background-size: 80% 80% !important;
+ margin-right: 1rem;
+ flex-shrink: 0;
+ margin-top: 0.5rem;
+ }
+ .header.alert1 {
+ background: url(../../../../assets/icons/报警1.png) no-repeat center center;
+ }
+ .header.alert2 {
+ background: url(../../../../assets/icons/报警2.png) no-repeat center center;
+ }
+ .header.alertsk {
+ background: url(../../../../assets/icons/水库超限.png) no-repeat center center;
+ }
+ .header.level1 {
+ background: url(../../../../assets/icons/level1.png) no-repeat center center;
+ }
+ .header.level2 {
+ background: url(../../../../assets/icons/level2.png) no-repeat center center;
+ }
+ .header.level3 {
+ background: url(../../../../assets/icons/level3.png) no-repeat center center;
+ }
+
+
+ .content {
+ flex-grow: 1;
+ }
+
+ .main {
+ display: flex;
+ align-items: center;
+ margin-bottom: 0.5rem;
+ font-size: 1rem;
+
+ .title {
+ cursor: pointer;
+ font-weight: bold;
+ color: aliceblue;
+ }
+
+ .span{
+ flex-grow: 1;
+ }
+
+ .extra {
+ color: antiquewhite;
+ }
+ }
+
+ .desc {
+ color: #ccc;
+ font-size: 0.9rem;
+
+ .bold {
+ font-weight: bold;
+ margin: 0 0.2rem;
+ }
+ }
+
+
+ .tail {
+ color: #ccc;
+ font-size: 0.9rem;
+ margin-top: 0.4rem;
+ display: flex;
+ align-items: center;
+
+ .bold {
+ font-weight: bold;
+ margin: 0 0.2rem;
+ }
+
+ span {
+ flex-grow: 1;
+ }
+
+ .action {
+ font-size: 1.2rem;
+ cursor: pointer;
+ }
+ }
+
+ .drpgrid {
+ display: flex;
+ justify-content: space-around;
+
+ .item {
+ text-align: center;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/views/Home/panels/WarnInfoMange/Shqx.js b/src/views/Home/panels/WarnInfoMange/Shqx.js
new file mode 100644
index 0000000..bd772ad
--- /dev/null
+++ b/src/views/Home/panels/WarnInfoMange/Shqx.js
@@ -0,0 +1,66 @@
+import { Button, Divider } from '@material-ui/core';
+import React from 'react'
+import { useDispatch } from 'react-redux';
+import { YjhisStat } from '../../../../models/_/shqxjs';
+import useRequest from '../../../../utils/useRequest';
+import DpAlert from '../../../../layouts/mui/DpAlert';
+import ZsTable from '../Shqx/ZsTable';
+
+
+function Shqx({ data: latest }) {
+ const { data } = useRequest(async () => {
+ if (!latest) {
+ return null;
+ }
+ let ret = await YjhisStat(latest.tm);
+ if (!ret) {
+ return { error: '数据获取失败' };
+ }
+ return { data: ret };
+ }, latest);
+
+ const dispatch = useDispatch();
+ const viewInfo = () => {
+ dispatch.runtime.setInfoDlg({ layerId: 'ShqxGrbInfo', properties: latest })
+ };
+
+ return (
+
+ {
+ latest ? (
+
{`预测时间: ${latest.tm}`}
+ ) : null
+ }
+ {
+ data?.error ? (
+
{data.error}
+ ) : null
+ }
+ {
+ data?.data ? (
+ <>
+
+
+
+
+
+
+
+
+
+ ) : null
+ }
+
+ )
+}
+
+export default Shqx
diff --git a/src/views/Home/panels/WarnInfoMange/index.js b/src/views/Home/panels/WarnInfoMange/index.js
new file mode 100644
index 0000000..28fde8f
--- /dev/null
+++ b/src/views/Home/panels/WarnInfoMange/index.js
@@ -0,0 +1,76 @@
+import clsx from 'clsx';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { hdyjUnclose } from '../../../../models/_/hdyj';
+import { OverallPromise } from '../../../../models/_/real';
+import { ShqxYjhisLatest } from '../../../../models/_/shqxjs';
+import { RealShWarnListPromise } from '../../../../models/_/shwarn';
+import { yjLevelColor } from '../../../../utils/renutils';
+import useRefresh from '../../../../utils/useRefresh';
+import useRequest from '../../../../utils/useRequest';
+import PanelBox from '../../components/PanelBox';
+import ARzSk from './ARzSk';
+import Hdyj from './Hdyj';
+import Shqx from './Shqx';
+import ShYj from './ShYj';
+
+export default function Warn({ style }) {
+ const t = useRefresh(60 * 1000);
+ const dispatch = useDispatch();
+ const warnType = useSelector(s => s.overallview.warnType);
+
+ const { data: shyjData } = useRequest(RealShWarnListPromise.get, t);
+ const { data: bxData } = useRequest(OverallPromise.get, t);
+ const { data: hdyj } = useRequest(hdyjUnclose, t);
+ const { data: shqx } = useRequest(ShqxYjhisLatest.get, t);
+
+ return (
+
+ dispatch.overallview.setWarnType('sh')}
+ >雨量预警{shyjData?.length ? {shyjData.length} : null}
+
+ dispatch.overallview.setWarnType('sk')}
+ >河道水情预警{bxData?.aRzSk?.length ? {bxData?.aRzSk?.length} : null}
+
+ dispatch.overallview.setWarnType('hd')}
+ >水库水情预警{hdyj?.length ? {hdyj?.length} : null}
+
+ dispatch.overallview.setWarnType('qx')}
+ >渠道水情预警{shqx?.maxLv ? {shqx.maxLv} : null}
+
+ dispatch.overallview.setWarnType('zm')}
+ >闸门工情预警{shqx?.maxLv ? {shqx.maxLv} : null}
+
+ dispatch.overallview.setWarnType('gc')}
+ >工程安全监测预警{shqx?.maxLv ? {shqx.maxLv} : null}
+
+
+ }
+ >
+ {warnType === 'sh' ? : null}
+ {warnType === 'sk' ? : null}
+ {warnType === 'hd' ? : null}
+ {warnType === 'qx' ? : null}
+
+ )
+}