From 12f3fa08787af02aa444534ae489378055d4a22f Mon Sep 17 00:00:00 2001 From: lishenfeng Date: Thu, 12 Jun 2025 17:59:36 +0800 Subject: [PATCH] =?UTF-8?q?feat():=E9=98=B2=E6=B1=9B=E5=AE=9E=E6=97=B6?= =?UTF-8?q?=E7=9B=91=E6=B5=8B=E5=BC=80=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/models/map/index.js | 18 +- src/models/map/layout.js | 11 +- .../Home/InfoPops/RealDrpPop/DrpChart.js | 2 +- src/views/Home/PanelIndex.js | 6 + src/views/Home/components/ActionDock/index.js | 4 +- src/views/Home/components/DrpSearch/index.js | 2 +- .../Home/panels/DrpSta/OverallContent.js | 165 +++++++++ src/views/Home/panels/DrpSta/index.js | 340 ++++++++++++++++++ src/views/Home/panels/DrpSta/index.less | 38 ++ .../Home/panels/RainSta/OverallContent.js | 165 +++++++++ src/views/Home/panels/RainSta/index.js | 269 ++++++++++++++ src/views/Home/panels/RainSta/index.less | 38 ++ 12 files changed, 1048 insertions(+), 10 deletions(-) create mode 100644 src/views/Home/panels/DrpSta/OverallContent.js create mode 100644 src/views/Home/panels/DrpSta/index.js create mode 100644 src/views/Home/panels/DrpSta/index.less create mode 100644 src/views/Home/panels/RainSta/OverallContent.js create mode 100644 src/views/Home/panels/RainSta/index.js create mode 100644 src/views/Home/panels/RainSta/index.less diff --git a/src/models/map/index.js b/src/models/map/index.js index 8659aa5..8eb2d1d 100644 --- a/src/models/map/index.js +++ b/src/models/map/index.js @@ -148,7 +148,7 @@ const map = { setView(id) { let layerVisible = {}; const map = window.__mapref - if (id === 1 || id == 503) { + if ( id == 503) { layerVisible = { RealDrpLayer: true, RealHDLayer: true, @@ -161,7 +161,21 @@ const map = { Object.keys(DCPJ_TYPES).forEach(key => { layerVisible['Dcpj_' + key + 'Layer'] = false; }); - } else if (id === 0) { + }if (id === 1 ) { + layerVisible = { + RealDrpLayer: true, + RealHDLayer: false, + RealSkLayer: false, + AdcdLayer: true, + PicStLayer: false, + RivlLayer: true, + WataLayer: false, + } + Object.keys(DCPJ_TYPES).forEach(key => { + layerVisible['Dcpj_' + key + 'Layer'] = false; + }); + } + else if (id === 0) { layerVisible = { RealDrpLayer: false, RealHDLayer: false, diff --git a/src/models/map/layout.js b/src/models/map/layout.js index 046f21c..2927fed 100644 --- a/src/models/map/layout.js +++ b/src/models/map/layout.js @@ -32,8 +32,8 @@ export default function calcLayout(view, rightStack, hidePanels) { } else if (view === 1) { left = [ { key: '天气' }, - { key: '河道实时水情', style: { height: '10rem', flexGrow: 1 } }, - { key: '水库监测', style: { height: '20rem', flexGrow: 1 } }, + { key: '雨情统计', style: { height: '29rem', flexGrow: 1 } }, + { key: '实时雨情', style: { height: '20rem', flexGrow: 1 } }, ]; leftFullHeight = true; } else if (view === 2) { @@ -253,8 +253,11 @@ export default function calcLayout(view, rightStack, hidePanels) { rightFullHeight = true; } else if (view === 1) { right = [ - { key: '警报' }, - { key: '实时雨情', style: { height: '20rem', flexGrow: 1 } }, + // { key: '警报' }, + { key: '水情统计', style: { height: '20rem', flexGrow: 1 } }, + { key: '河道实时水情', style: { height: '20rem', flexGrow: 1 } }, + { key: '水库监测', style: { height: '20rem', flexGrow: 1 } }, + ] rightFullHeight = true; } else if (view === 2) { diff --git a/src/views/Home/InfoPops/RealDrpPop/DrpChart.js b/src/views/Home/InfoPops/RealDrpPop/DrpChart.js index 4bead72..8dcd225 100644 --- a/src/views/Home/InfoPops/RealDrpPop/DrpChart.js +++ b/src/views/Home/InfoPops/RealDrpPop/DrpChart.js @@ -209,7 +209,7 @@ function DrpChart({ record }) { useEffect(() => { drpSearch(record.type, record.stcd, 'h', resultTm, record.countycode).then((data) => { const newData = record.test ? demoData : data; - setData(newData || []); + setData(data); }); }, []) diff --git a/src/views/Home/PanelIndex.js b/src/views/Home/PanelIndex.js index dbd1a4e..21f5f59 100644 --- a/src/views/Home/PanelIndex.js +++ b/src/views/Home/PanelIndex.js @@ -138,6 +138,8 @@ import Sbtj from './panels/Sbtj' import Sbyj from './panels/Sbyj' import Gsfhqx from './panels/Gsfhqx' import JbqkRight from './panels/JbqkRight' +import RainSta from './panels/RainSta' +import DrpSta from './panels/DrpSta' export default function PanelIndex({ name, style, ...params }) { if (name === '天气') { @@ -345,6 +347,10 @@ 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 === "水库预警") { diff --git a/src/views/Home/components/ActionDock/index.js b/src/views/Home/components/ActionDock/index.js index 53c34e0..a430cac 100644 --- a/src/views/Home/components/ActionDock/index.js +++ b/src/views/Home/components/ActionDock/index.js @@ -11,8 +11,8 @@ const VIEWS = [ // { id: 0, title: '防洪形势', img: '/assets/menu/防洪形势.png' }, { id: 8, title: '防洪形势', img: '/assets/menu/防洪形势.png' }, // { id: 9, title: '防洪形势', img: '/assets/menu/防洪形势.png' }, - { id: 1, title: '实时数据', img: '/assets/menu/实时数据.png' }, - { id: 2, title: '水利设施', img: '/assets/menu/水利设施.png' }, + { id: 1, title: '监测数据', img: '/assets/menu/实时数据.png' }, + // { id: 2, title: '水利设施', img: '/assets/menu/水利设施.png' }, { id: 5, title: '预报', img: '/assets/menu/降雨中心.png' }, { id: 6, title: '预警', img: '/assets/menu/病险水库.png' }, { id: 4, title: '预演', img: '/assets/menu/预警分析.png' }, diff --git a/src/views/Home/components/DrpSearch/index.js b/src/views/Home/components/DrpSearch/index.js index 774948a..e2d7f4e 100644 --- a/src/views/Home/components/DrpSearch/index.js +++ b/src/views/Home/components/DrpSearch/index.js @@ -207,7 +207,7 @@ function DrpSearch({ record }) { drpSearch(record.type, record.stcd, 'h', searchTm.tm).then((data) => { console.log(data,record); const newData = record.test ? demoData : data; - setData(newData || []); + setData(data); // setData(data); }) } diff --git a/src/views/Home/panels/DrpSta/OverallContent.js b/src/views/Home/panels/DrpSta/OverallContent.js new file mode 100644 index 0000000..8bf1196 --- /dev/null +++ b/src/views/Home/panels/DrpSta/OverallContent.js @@ -0,0 +1,165 @@ +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 ( +
+
+
+
{strNumber(h24?.drpStCount?.total, '-')}
+
降雨测站
+
+
+
{strNumber(skInfo?.aRz, '-')}
+
超汛限水库
+
+
+
showRecord(h24?.max)}> + {h24?.max?.stnm || '--'} +
+
最大降雨测站
+
+
+ +
+ {tm1 || '-'}至{tm2 || '-'} + 24小时中共有{strNumber(h24?.drpStCount?.total, '-')} + 个降雨测站(山洪测站 + {strNumber(h24?.drpStCount?.sh, '-')} + 个)，其中最大降雨测站为 showRecord(h24?.max)} className={classes.stname}>{h24?.max?.stnm || '-'} + ，降雨量{strNumber(h24?.max?.value, '-')}mm + {h24?.cntDrp10 > 0 && (<>，10mm以下测站数为{strNumber(h24?.cntDrp10, '-')}个)} + {h24?.cntDrp25 > 0 && (<>，10mm至25mm测站数为{strNumber(h24?.cntDrp25, '-')}个)} + {h24?.cntDrp50 > 0 && (<>，25mm至50mm测站数为{strNumber(h24?.cntDrp50, '-')}个)} + {h24?.cntDrp100 > 0 && (<>，50mm至100mm测站数为{strNumber(h24?.cntDrp100, '-')}个)} + {h24?.cntDrp250 > 0 && (<>，100mm至250mm测站数为{strNumber(h24?.cntDrp250, '-')}个)} + {h24?.cntDrpg250 > 0 && (<>，大于250mm测站数为{strNumber(h24?.cntDrpg250, '-')}个)} + 。 + {h1?.max?.value > 0 && (<>前1小时最大降雨测站是 showRecord(h1?.max)} className={classes.stname}>{h1?.max?.stnm}({h1?.max?.value}mm)，)} + {h3?.max?.value > 0 && (<>前3小时最大降雨测站是 showRecord(h3?.max)} className={classes.stname}>{h3?.max?.stnm}({h3?.max?.value}mm)，)} + {h6?.max?.value > 0 && (<>前6小时最大降雨测站是 showRecord(h6?.max)} className={classes.stname}>{h6?.max?.stnm}({h6?.max?.value}mm)，)} + { + !h1?.max?.value || !h3?.max?.value || !h6?.max?.value ? ( + `前${[!h1?.max?.value ? '1' : null, !h3?.max?.value ? '3' : null, !h6?.max?.value ? '6' : null].filter(Boolean).join(',')}小时无降雨。` + ) : null + } + 超汛限水位水库数为{strNumber(skInfo?.aRz, '-')}座。 +
+
+ +
+
+ ) +} diff --git a/src/views/Home/panels/DrpSta/index.js b/src/views/Home/panels/DrpSta/index.js new file mode 100644 index 0000000..8dc9c7f --- /dev/null +++ b/src/views/Home/panels/DrpSta/index.js @@ -0,0 +1,340 @@ +import React, { useState,useEffect } from 'react'; +import { OverallPromise } from '../../../../models/_/real'; +import useRequest from '../../../../utils/useRequest'; +import PanelBox from '../../components/PanelBox'; +import OverallContent from './OverallContent'; +import { makeStyles } from '@material-ui/core/styles'; +import DpTableRow from '../../../../layouts/mui/DpTableRow'; +import { + Box, + Typography, + Checkbox, + FormControlLabel, + ButtonGroup, + Button, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + IconButton, + Collapse +} from '@material-ui/core'; +import AddIcon from '@material-ui/icons/Add'; +import { useDispatch, useSelector } from 'react-redux'; +import DpTableCell from '../../../../layouts/mui/DpTableCell'; +import clsx from 'clsx'; +import RemoveIcon from '@material-ui/icons/Remove'; +import config from '../../../../config'; +import { InfoPopNames } from '../../InfoPops'; +const useStyles = makeStyles((theme) => ({ + root: { + color: '#fff', + '& .MuiTypography-root': { + color: '#fff' + }, + '& .MuiCheckbox-root': { + color: '#fff', + '&.Mui-checked': { + color: '#409eff' + } + }, + '& .MuiButtonGroup-root': { + marginTop: theme.spacing(2), + marginBottom: theme.spacing(3) + } + }, + typeSection: { + marginBottom: theme.spacing(2) + }, + timeButton: { + width:210, + color: '#fff', + borderColor: 'rgba(255,255,255,0.3)', + '&.MuiButton-contained': { + backgroundColor: '#409eff', + color: '#fff', + '&:hover': { + backgroundColor: '#409eff' + } + }, + '&:hover': { + backgroundColor: 'rgba(255,255,255,0.1)' + } + }, + table: { + '& .MuiTableCell-root': { + color: '#fff', + borderColor: 'rgba(255,255,255,0.1)' + } + }, + expandButton: { + color: '#fff' + }, + stationRow: { + '&:nth-of-type(odd)': { + backgroundColor: 'rgba(255,255,255,0.05)' + }, + '&:hover': { + backgroundColor: 'rgba(255,255,255,0.1)' + } + }, + warningRow: { + '&.pink': { backgroundColor: 'rgba(255,192,203,0.5)' }, + '&.purple': { backgroundColor: 'rgba(147,112,219,0.5)' }, + '&.blue': { backgroundColor: 'rgba(135,206,235,0.5)' }, + '&.blue1': { backgroundColor: 'rgba(135,206,235,0.4)' }, + '&.blue2': { backgroundColor: 'rgba(135,206,235,0.3)' }, + '&.green': { backgroundColor: 'rgba(144,238,144,0.5)' } + }, + + expandedRow: { + '&.pink': { backgroundColor: 'rgba(255,192,203,0.1)' }, + '&.purple': { backgroundColor: 'rgba(147,112,219,0.1)' }, + '&.blue': { backgroundColor: 'rgba(135,206,235,0.1)' }, + '&.green': { backgroundColor: 'rgba(144,238,144,0.1)' } + } +})); +export default function Overall({ style }) { + const dispatch = useDispatch(); + + const classes = useStyles(); + const [types, setTypes] = useState({ + mountain: true, + water: true, + weather: true, + reservoir: true + }); + const [timeRange, setTimeRange] = useState('1h'); + const [expanded, setExpanded] = useState({}); + + const handleTypeChange = (event) => { + setTypes({ + ...types, + [event.target.name]: event.target.checked + }); + }; + + const stations = [ + { id: 'history', name: '历史极值站点', count: 0, color: 'pink' }, + { id: '100year', name: '100年一遇以上站点', count: 0, color: 'purple' }, + { id: '50year', name: '50年一遇以上站点', count: 0, color: 'blue' }, + { id: 'special', name: '特大暴雨站点', count: 0, color: 'blue1' }, + { id: 'heavy', name: '大暴雨站点', count: 0, color: 'blue2' }, + { id: 'storm', name: '暴雨站点', count: 1, color: 'green' } + ]; + + const toggleExpand = (id) => { + setExpanded(prev => ({ + ...prev, + [id]: !prev[id] + })); + }; + + const drpData = [ + { + "stcd": "61612910", + "stnm": "桃林河(阎河)", + "adcd": "421181000000000", + adnm: '阎家河镇桃林河村村民委员会', + zgrz: '55.67', + time: '2025-06-11 10:14至2025-06-12 10:14', + jjrz:'58.43', + "wscd": null, + "importancy": 0, + "lgtd": 115.087777777, + "lttd": 31.164444444, + "elev": null, + "hasRz": true, + "type": "sh", + "today": 21, + "h1": 15.5, + "h3": 21, + "h6": 21, + "h12": 21, + "h24": 21, + "h48": 21, + "tm": "2025-06-06T22:15:00.000Z", + "state": 1, + "warning": 0 + }, + { + "stcd": "61612150", + "stnm": "鹰山畈(黄土岗)", + "adcd": "421181000000000", + "wscd": null, + adnm: '黄士岗镇英山畈村村民委员会(雾港河村、鹰山畈村)', + zgrz: '77.00', + time: '2025-06-12 10:33', + jjrz:'78.98', + "importancy": 0, + "lgtd": 115.073611, + "lttd": 31.386667, + "elev": null, + "hasRz": true, + "type": "sh", + "today": 27, + "h1": 18.5, + "h3": 27, + "h6": 27, + "h12": 27, + "h24": 27, + "h48": 27, + "tm": "2025-06-06T22:00:00.000Z", + "state": 1, + "warning": 0 + }, + { + "stcd": "61613700", + "stnm": "四角门(宋铁二桥)", + "adcd": "421181000000000", + "wscd": null, + "importancy": 0, + "lgtd": 114.8291, + "lttd": 31.0754, + adnm: '铁门岗乡大庙岗村村民委员会(四角门村、大庙岗村、大店村、肖上湾村)', + zgrz: '27.57', + time: '2025-06-11 10:14至2025-06-12 10:14', + jjrz:'34.86', + "elev": null, + "hasRz": true, + "type": "sh", + "today": 3.5, + "h1": 2, + "h3": 3.5, + "h6": 3.5, + "h12": 3.5, + "h24": 3.5, + "h48": 3.5, + "tm": "2025-06-06T22:00:00.000Z", + "state": 1, + "warning": 0 + }, + { + "stcd": "61614460", + "stnm": "项生(宋埠)", + "adcd": "421181000000000", + "wscd": null, + "importancy": 0, + adnm: '宋埠镇项生村村民委员会', + zgrz: '21.93', + time: '2025-06-11 10:14至2025-06-12 10:14', + jjrz:'23.65', + "lgtd": 114.798056, + "lttd": 31.058611, + "elev": null, + "hasRz": true, + "type": "sh", + "today": 4.5, + "h1": 2, + "h3": 4.5, + "h6": 4.5, + "h12": 4.5, + "h24": 4.5, + "h48": 4.5, + "tm": "2025-06-06T22:00:00.000Z", + "state": 1, + "warning": 0 + }, + ] + const skData = [] + 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.hd], + zoom: config.poiPositionZoom.hd, + pitch: config.poiPitch, + }); + } + } + const [type, setType] = useState('1h') + const [data, setData] = useState([]) + + + useEffect(() => { + const newArr = timeRange == '3h' ? skData : drpData; + setData(newArr) + }, [timeRange]) + + return ( + + { + ['h1', 'h3', 'h6', 'h12', 'h24'].map(key => ( + setType(key)}>{key} + )) + } + + } + > + +
+ + {[ + { value: '1h', label: '河道水情' }, + { value: '3h', label: '水库水情' }, + ].map((item) => ( + + ))} + + +
+ + + + + + + 序号 + 站名 + 政区 + 最高水位(m) + 发生时间 + 警戒水位(m) + {/* 所属政区 */} + + + + { + data.map((item,i) => ( + flyTo(item)}> + {i + 1} + {item.stnm} + +
{item.adnm}
+ + {item.zgrz} + {item.time} + {item.jjrz} + + )) + } + + +
+ + + ) +} diff --git a/src/views/Home/panels/DrpSta/index.less b/src/views/Home/panels/DrpSta/index.less new file mode 100644 index 0000000..ee34c9b --- /dev/null +++ b/src/views/Home/panels/DrpSta/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/RainSta/OverallContent.js b/src/views/Home/panels/RainSta/OverallContent.js new file mode 100644 index 0000000..8bf1196 --- /dev/null +++ b/src/views/Home/panels/RainSta/OverallContent.js @@ -0,0 +1,165 @@ +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 ( +
+
+
+
{strNumber(h24?.drpStCount?.total, '-')}
+
降雨测站
+
+
+
{strNumber(skInfo?.aRz, '-')}
+
超汛限水库
+
+
+
showRecord(h24?.max)}> + {h24?.max?.stnm || '--'} +
+
最大降雨测站
+
+
+ +
+ {tm1 || '-'}至{tm2 || '-'} + 24小时中共有{strNumber(h24?.drpStCount?.total, '-')} + 个降雨测站(山洪测站 + {strNumber(h24?.drpStCount?.sh, '-')} + 个)，其中最大降雨测站为 showRecord(h24?.max)} className={classes.stname}>{h24?.max?.stnm || '-'} + ，降雨量{strNumber(h24?.max?.value, '-')}mm + {h24?.cntDrp10 > 0 && (<>，10mm以下测站数为{strNumber(h24?.cntDrp10, '-')}个)} + {h24?.cntDrp25 > 0 && (<>，10mm至25mm测站数为{strNumber(h24?.cntDrp25, '-')}个)} + {h24?.cntDrp50 > 0 && (<>，25mm至50mm测站数为{strNumber(h24?.cntDrp50, '-')}个)} + {h24?.cntDrp100 > 0 && (<>，50mm至100mm测站数为{strNumber(h24?.cntDrp100, '-')}个)} + {h24?.cntDrp250 > 0 && (<>，100mm至250mm测站数为{strNumber(h24?.cntDrp250, '-')}个)} + {h24?.cntDrpg250 > 0 && (<>，大于250mm测站数为{strNumber(h24?.cntDrpg250, '-')}个)} + 。 + {h1?.max?.value > 0 && (<>前1小时最大降雨测站是 showRecord(h1?.max)} className={classes.stname}>{h1?.max?.stnm}({h1?.max?.value}mm)，)} + {h3?.max?.value > 0 && (<>前3小时最大降雨测站是 showRecord(h3?.max)} className={classes.stname}>{h3?.max?.stnm}({h3?.max?.value}mm)，)} + {h6?.max?.value > 0 && (<>前6小时最大降雨测站是 showRecord(h6?.max)} className={classes.stname}>{h6?.max?.stnm}({h6?.max?.value}mm)，)} + { + !h1?.max?.value || !h3?.max?.value || !h6?.max?.value ? ( + `前${[!h1?.max?.value ? '1' : null, !h3?.max?.value ? '3' : null, !h6?.max?.value ? '6' : null].filter(Boolean).join(',')}小时无降雨。` + ) : null + } + 超汛限水位水库数为{strNumber(skInfo?.aRz, '-')}座。 +
+
+ +
+
+ ) +} diff --git a/src/views/Home/panels/RainSta/index.js b/src/views/Home/panels/RainSta/index.js new file mode 100644 index 0000000..21d8d30 --- /dev/null +++ b/src/views/Home/panels/RainSta/index.js @@ -0,0 +1,269 @@ +import React, { useState } from 'react'; +import { OverallPromise } from '../../../../models/_/real'; +import useRequest from '../../../../utils/useRequest'; +import PanelBox from '../../components/PanelBox'; +import OverallContent from './OverallContent'; +import { makeStyles } from '@material-ui/core/styles'; +import { InfoPopNames } from '../../InfoPops'; +import { + Box, + Typography, + Checkbox, + FormControlLabel, + ButtonGroup, + Button, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + IconButton, + Collapse +} from '@material-ui/core'; +import AddIcon from '@material-ui/icons/Add'; +import { useDispatch, useSelector } from 'react-redux'; +import DpTableCell from '../../../../layouts/mui/DpTableCell'; +import clsx from 'clsx'; +import RemoveIcon from '@material-ui/icons/Remove'; +import config from '../../../../config'; +const useStyles = makeStyles((theme) => ({ + root: { + color: '#fff', + '& .MuiTypography-root': { + color: '#fff' + }, + '& .MuiCheckbox-root': { + color: '#fff', + '&.Mui-checked': { + color: '#409eff' + } + }, + '& .MuiButtonGroup-root': { + marginTop: theme.spacing(2), + marginBottom: theme.spacing(3) + } + }, + typeSection: { + marginBottom: theme.spacing(2) + }, + timeButton: { + width:210, + color: '#fff', + borderColor: 'rgba(255,255,255,0.3)', + '&.MuiButton-contained': { + backgroundColor: '#409eff', + color: '#fff', + '&:hover': { + backgroundColor: '#409eff' + } + }, + '&:hover': { + backgroundColor: 'rgba(255,255,255,0.1)' + } + }, + table: { + '& .MuiTableCell-root': { + color: '#fff', + borderColor: 'rgba(255,255,255,0.1)' + } + }, + expandButton: { + color: '#fff' + }, + stationRow: { + '&:nth-of-type(odd)': { + backgroundColor: 'rgba(255,255,255,0.05)' + }, + '&:hover': { + backgroundColor: 'rgba(255,255,255,0.1)' + } + }, + warningRow: { + '&.pink': { backgroundColor: 'rgba(255,192,203,0.5)' }, + '&.purple': { backgroundColor: 'rgba(147,112,219,0.5)' }, + '&.blue': { backgroundColor: 'rgba(135,206,235,0.5)' }, + '&.blue1': { backgroundColor: 'rgba(135,206,235,0.4)' }, + '&.blue2': { backgroundColor: 'rgba(135,206,235,0.3)' }, + '&.green': { backgroundColor: 'rgba(144,238,144,0.5)' } + }, + + expandedRow: { + '&.pink': { backgroundColor: 'rgba(255,192,203,0.1)' }, + '&.purple': { backgroundColor: 'rgba(147,112,219,0.1)' }, + '&.blue': { backgroundColor: 'rgba(135,206,235,0.1)' }, + '&.green': { backgroundColor: 'rgba(144,238,144,0.1)' } + } +})); +export default function Overall({ style }) { + const dispatch = useDispatch(); + + const classes = useStyles(); + const [types, setTypes] = useState({ + mountain: true, + water: true, + weather: true, + reservoir: true + }); + const [timeRange, setTimeRange] = useState('1h'); + const [expanded, setExpanded] = useState({}); + + const handleTypeChange = (event) => { + setTypes({ + ...types, + [event.target.name]: event.target.checked + }); + }; + + const stations = [ + { id: 'history', name: '历史极值站点', count: 0, color: 'pink' }, + { id: '100year', name: '100年一遇以上站点', count: 0, color: 'purple' }, + { id: '50year', name: '50年一遇以上站点', count: 0, color: 'blue' }, + { id: 'special', name: '特大暴雨站点', count: 0, color: 'blue1' }, + { id: 'heavy', name: '大暴雨站点', count: 0, color: 'blue2' }, + { id: 'storm', name: '暴雨站点', count: 1, color: 'green' } + ]; + + const toggleExpand = (id) => { + setExpanded(prev => ({ + ...prev, + [id]: !prev[id] + })); + }; + + const drpData = [ + { + "stcd": "Q9111", + "stnm": "福田河", + "adcd": "421181000000000", + 'test':1, + "wscd": null, + "importancy": 0, + "lgtd": 115.0944, + "lttd": 31.4747, + "elev": null, + "hasRz": true, + "type": "qx", + "today": 50.3, + "h1": 50.2, + "h3": 50.2, + "h6": 50.2, + "h12": 50.2, + "h24": 50.3, + "tm": "2025-06-06T22:00:00.000Z", + + "state": 1, + "warning": 0 + }, + ] + 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.hd], + zoom: config.poiPositionZoom.hd, + pitch: config.poiPitch, + }); + } + } + const [type, setType] = useState('h24') + return ( + + { + ['h1', 'h3', 'h6', 'h12', 'h24'].map(key => ( + setType(key)}>{key} + )) + } + + } + > + +
+ + {[ + { value: '1h', label: '政区' }, + { value: '3h', label: '流域' }, + ].map((item) => ( + + ))} + + +
+ + + + + 站名 + 累计雨量(mm) + {/* 所属政区 */} + {timeRange == '1h' ? '所属政区':'所属流域'} + + + + {stations.map((station) => ( + + + + + toggleExpand(station.id)} + > + {expanded[station.id] ? : } + + {station.name}({station.count}) + + + + + + + + + + + {/* 展开的详细内容可以在这里添加 */}{ + station.id == 'storm' && drpData.map(item => ( + flyTo(item)}> + {item.stnm} + {item.today} + {timeRange == '1h' ? '乘马岗镇':'浮桥河'} + + )) + } + + + + + + + ))} + +
+ + + + ) +} diff --git a/src/views/Home/panels/RainSta/index.less b/src/views/Home/panels/RainSta/index.less new file mode 100644 index 0000000..ee34c9b --- /dev/null +++ b/src/views/Home/panels/RainSta/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