From 8804446160079cb74e5cc424219c510560c3bed2 Mon Sep 17 00:00:00 2001 From: lishenfeng Date: Wed, 21 May 2025 09:14:48 +0800 Subject: [PATCH] =?UTF-8?q?feat():=20=E7=81=8C=E5=8C=BA=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E6=90=AD=E5=BB=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/models/map/index.js | 2 +- src/models/map/layout.js | 42 +- src/views/Home/InfoDlg/LayersDlg/index.js | 2 +- src/views/Home/PanelIndex.js | 29 ++ src/views/Home/components/ActionDock/index.js | 10 +- src/views/Home/index.js | 3 +- src/views/Home/panels/DrpWatch/Setting.js | 67 ++++ src/views/Home/panels/DrpWatch/index.js | 139 +++++++ src/views/Home/panels/GqWatch/Setting.js | 51 +++ src/views/Home/panels/GqWatch/index.js | 166 ++++++++ .../Home/panels/GqWeatherForcast/H24Player.js | 62 +++ .../panels/GqWeatherForcast/LegendCommon.js | 91 +++++ src/views/Home/panels/GqWeatherForcast/WF.js | 150 +++++++ .../Home/panels/GqWeatherForcast/index.js | 27 ++ src/views/Home/panels/HDWatch/Setting.js | 51 +++ src/views/Home/panels/HDWatch/index.js | 122 ++++++ .../Home/panels/JyWarn/OverallContent.js | 150 +++++++ src/views/Home/panels/JyWarn/index.js | 20 + src/views/Home/panels/JyWarn/index.less | 38 ++ src/views/Home/panels/LlWatch/Setting.js | 51 +++ src/views/Home/panels/LlWatch/index.js | 169 ++++++++ src/views/Home/panels/SpVideo/Setting.js | 51 +++ src/views/Home/panels/SpVideo/index.js | 378 ++++++++++++++++++ src/views/Home/panels/TrWatch/Setting.js | 51 +++ src/views/Home/panels/TrWatch/index.js | 211 ++++++++++ src/views/Home/panels/WarnInfoMange/ARzSk.js | 75 ++++ src/views/Home/panels/WarnInfoMange/Hdyj.js | 105 +++++ src/views/Home/panels/WarnInfoMange/ShYj.js | 107 +++++ src/views/Home/panels/WarnInfoMange/ShYj.less | 112 ++++++ src/views/Home/panels/WarnInfoMange/Shqx.js | 66 +++ src/views/Home/panels/WarnInfoMange/index.js | 76 ++++ 31 files changed, 2668 insertions(+), 6 deletions(-) create mode 100644 src/views/Home/panels/DrpWatch/Setting.js create mode 100644 src/views/Home/panels/DrpWatch/index.js create mode 100644 src/views/Home/panels/GqWatch/Setting.js create mode 100644 src/views/Home/panels/GqWatch/index.js create mode 100644 src/views/Home/panels/GqWeatherForcast/H24Player.js create mode 100644 src/views/Home/panels/GqWeatherForcast/LegendCommon.js create mode 100644 src/views/Home/panels/GqWeatherForcast/WF.js create mode 100644 src/views/Home/panels/GqWeatherForcast/index.js create mode 100644 src/views/Home/panels/HDWatch/Setting.js create mode 100644 src/views/Home/panels/HDWatch/index.js create mode 100644 src/views/Home/panels/JyWarn/OverallContent.js create mode 100644 src/views/Home/panels/JyWarn/index.js create mode 100644 src/views/Home/panels/JyWarn/index.less create mode 100644 src/views/Home/panels/LlWatch/Setting.js create mode 100644 src/views/Home/panels/LlWatch/index.js create mode 100644 src/views/Home/panels/SpVideo/Setting.js create mode 100644 src/views/Home/panels/SpVideo/index.js create mode 100644 src/views/Home/panels/TrWatch/Setting.js create mode 100644 src/views/Home/panels/TrWatch/index.js create mode 100644 src/views/Home/panels/WarnInfoMange/ARzSk.js create mode 100644 src/views/Home/panels/WarnInfoMange/Hdyj.js create mode 100644 src/views/Home/panels/WarnInfoMange/ShYj.js create mode 100644 src/views/Home/panels/WarnInfoMange/ShYj.less create mode 100644 src/views/Home/panels/WarnInfoMange/Shqx.js create mode 100644 src/views/Home/panels/WarnInfoMange/index.js diff --git a/src/models/map/index.js b/src/models/map/index.js index 68b28dd..0f5a757 100644 --- a/src/models/map/index.js +++ b/src/models/map/index.js @@ -147,7 +147,7 @@ const map = { setView(id) { let layerVisible = {}; - if (id === 0 || id === 1) { + if (id === 0 || id === 1 || id ==501 || id == 504 || id == 507) { layerVisible = { RealDrpLayer: true, RealHDLayer: true, diff --git a/src/models/map/layout.js b/src/models/map/layout.js index d8d9980..4141b37 100644 --- a/src/models/map/layout.js +++ b/src/models/map/layout.js @@ -9,7 +9,6 @@ export default function calcLayout(view, rightStack, hidePanels) { if (rightStack && rightStack.length > 0) { rightEx = rightStack[rightStack.length - 1]; } - //左侧 if (view === 0) { left = [ @@ -50,6 +49,27 @@ export default function calcLayout(view, rightStack, hidePanels) { { key: '天气' }, { key: '病险水库综述', style: { flexShink: 0 } }, ]; + }else if (view === 501) { + left = [ + { key: '雨量监测',style: { height: '8rem', flexGrow: 1 } }, + { key: '水情监测', style: { height: '8rem', flexGrow: 1 } }, + { key: '工情监控', style: { height: '8rem', flexGrow: 1 } }, + { key: '流量监测',style: { height: '8rem', flexGrow: 1 } }, + ]; + leftFullHeight = true; + }else if (view === 504) { + left = [ + { key: '降雨预报', style: { height: '40%', flexGrow: 1 } }, + { key: '预警信息管理', style: { height: '40%', flexGrow: 1 } }, + ]; + leftFullHeight = true; + }else if (view === 507) { + left = [ + { key: '工程巡查', style: { height: '20%', flexGrow: 1 } }, + { key: '本月巡查记录', style: { height: '40%', flexGrow: 1 } }, + { key: '待处理巡查问题清单', style: { height: '40%', flexGrow: 1 } }, + ]; + leftFullHeight = true; } if (rightEx) { @@ -112,7 +132,25 @@ export default function calcLayout(view, rightStack, hidePanels) { { key: '警报' }, { key: '病险水库' }, ]; - } + }else if (view === 501) { + right = [ + { key: '水质监测',style: { height: '20rem', flexGrow: 1 } }, + { key: '土壤墒情监测', style: { height: '20rem', flexGrow: 1 } }, + { key: '视频监控', style: { height: '20rem', flexGrow: 1 } }, + ]; + }else if (view === 504) { + right = [ + { key: '降雨预警', style: { height: '40%', flexGrow: 1 } }, + { key: '预警信息管理', style: { height: '40%', flexGrow: 1 } }, + ]; + }else if (view === 507) { + right = [ + { key: '工程维护', style: { height: '20%', flexGrow: 1 } }, + { key: '本月工程维护', style: { height: '40%', flexGrow: 1 } }, + { key: '待处理维护问题清单', style: { height: '40%', flexGrow: 1 } }, + ]; + rightFullHeight = true; + } } } diff --git a/src/views/Home/InfoDlg/LayersDlg/index.js b/src/views/Home/InfoDlg/LayersDlg/index.js index 314db27..7a66a48 100644 --- a/src/views/Home/InfoDlg/LayersDlg/index.js +++ b/src/views/Home/InfoDlg/LayersDlg/index.js @@ -39,7 +39,7 @@ function LayersDlg({ onClose }) { const layerSetting = useSelector(getLayerSetting); const dispatch = useDispatch(); const classes = useStyles(); - + debugger const layerVisibleChanged = (event) => { const vo = { [event.target.name]: event.target.checked }; dispatch.map.setLayerVisible(vo); diff --git a/src/views/Home/PanelIndex.js b/src/views/Home/PanelIndex.js index 85db6b6..5de898f 100644 --- a/src/views/Home/PanelIndex.js +++ b/src/views/Home/PanelIndex.js @@ -9,14 +9,23 @@ import AreaDrp from './panels/AreaDrp'; import HD24H from './panels/HD24H'; import GlobalSearch from './panels/GlobalSearch'; import Warn from './panels/Warn'; +import WarnInfoMange from './panels/WarnInfoMange'; import DrpReal from './panels/DrpReal'; +import DrpWatch from './panels/DrpWatch'; import HDReal from './panels/HDReal'; +import HdWatch from './panels/HDWatch'; +import GqWatch from './panels/GqWatch'; +import LlWatch from './panels/LlWatch'; +import TrWatch from './panels/TrWatch'; +import JyWarn from './panels/JyWarn' +import SpVideo from './panels/SpVideo'; import SkReal from './panels/SkReal'; import SlgcLayers from './panels/SlgcLayers'; import SlgcList from './panels/SlgcList'; import RainfallCenter from './panels/RainfallCenter'; import RainfallCenter_SearchResult from './panels/RainfallCenter_SearchResult'; import WeatherForcast from './panels/WeatherForcast'; +import GqWeatherForcast from './panels/GqWeatherForcast'; import Shqx from './panels/Shqx'; import FzjcLayers from './panels/FzjcLayers'; import FzjcList from './panels/FzjcList'; @@ -77,6 +86,26 @@ export default function PanelIndex({ name, style, ...params }) { return } else if (name === '病险水库综述') { return + } else if (name === '雨量监测') { + return + } else if (name === '水情监测') { + return + } else if (name === "工情监控") { + return + } else if (name === "流量监测") { + return + } else if (name == '土壤墒情监测') { + return + }else if (name == '视频监控') { + return + }else if (name === '预警信息管理') { + return + }else if (name === '降雨预报') { + return + }else if (name === '降雨预警') { + return + }else if (name === '工程巡查') { + return } return ( diff --git a/src/views/Home/components/ActionDock/index.js b/src/views/Home/components/ActionDock/index.js index 0488cf4..c37e011 100644 --- a/src/views/Home/components/ActionDock/index.js +++ b/src/views/Home/components/ActionDock/index.js @@ -30,7 +30,15 @@ const VIEWS = [ // 应急指挥调度 // 决策支持与报表 ] }, - { id: 400, title: '灌区', img: '/assets/menu/实时数据.png',children:[ + { + id: 400, title: '灌区', img: '/assets/menu/实时数据.png', children: [ + { id: 501, title: '灌区监测', img: '/assets/menu/防洪形势.png' }, + { id: 504, title: '水旱灾害防御', img: '/assets/menu/水利设施.png' }, + // { id: 502, title: '预警信息管理', img: '/assets/menu/实时数据.png' }, + { id: 503, title: '水资源调度', img: '/assets/menu/病险水库.png' }, + { id: 505, title: '量测水管理', img: '/assets/menu/辅助决策.png' }, + { id: 506, title: '水政管理', img: '/assets/menu/预警分析.png' }, + { id: 507, title: '工程管理', img: '/assets/menu/降雨中心.png' }, // 图层控制 // 灌区监测 // 预警信息管理 diff --git a/src/views/Home/index.js b/src/views/Home/index.js index b85e986..18935f9 100644 --- a/src/views/Home/index.js +++ b/src/views/Home/index.js @@ -16,7 +16,8 @@ import Calculating from './components/Calculating'; export default function Demo1() { const layout = useSelector(getLayout); const hp = useSelector(hidePanels); - + console.log("hp",hp); + return (
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 ( + +
+ + 实时雨量显示设置 + +
+ +
+ 地图实时雨量显示雨量时段 + +
+
+ 显示实时雨量图层 + dispath.map.setLayerVisible({ RealDrpLayer: e.target.checked })} + /> +
+ +
+ +
+ + ) +} + +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 ( + +
+ + 河道水位显示设置 + +
+ +
+ 显示河道水位图层 + dispath.map.setLayerVisible({ RealHDLayer: e.target.checked })} + /> +
+ +
+ +
+ + ) +} + +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)} + + + + + + +
+ + ) +} + +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 ( +
+
+
{o}
+
+
+ ) + }) + } +
+ ) +} + +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' ? ( + <> + + + + + { + 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 ( + +
+ + 河道水位显示设置 + +
+ +
+ 显示河道水位图层 + dispath.map.setLayerVisible({ RealHDLayer: e.target.checked })} + /> +
+ +
+ +
+ + ) +} + +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 ( +
+
+
+
0个
+
黄色预警
+
+
+
0个
+
橙色预警
+
+
+
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 ( + +
+ + 河道水位显示设置 + +
+ +
+ 显示河道水位图层 + dispath.map.setLayerVisible({ RealHDLayer: e.target.checked })} + /> +
+ +
+ +
+ + ) +} + +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 ( + +
+ + 河道水位显示设置 + +
+ +
+ 显示河道水位图层 + dispath.map.setLayerVisible({ RealHDLayer: e.target.checked })} + /> +
+ +
+ +
+ + ) +} + +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 ( + +
+ + 河道水位显示设置 + +
+ +
+ 显示河道水位图层 + dispath.map.setLayerVisible({ RealHDLayer: e.target.checked })} + /> +
+ +
+ +
+ + ) +} + +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`} +
+
+ 报警: {tm1} + { + tm2 !== tm1 ? ( + 更新: {tm2} + ) : null + } + viewInfo(data)}>处理 +
+
+
+ ); +} + + +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} +
+
+ {data.warnstm.substr(0, 'yyyy-mm-dd hh:mm'.length)} + viewInfo(data, 'danad')} style={{ textAlign: 'right' }}>危险区 +
+
+
+ ); +} + + +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} + + ) +}