diff --git a/public/assets/大石板水库大坝安全管理（防汛）应急预案（完善版）.pdf b/public/assets/大石板水库大坝安全管理（防汛）应急预案（完善版）.pdf new file mode 100644 index 0000000..5076176 Binary files /dev/null and b/public/assets/大石板水库大坝安全管理（防汛）应急预案（完善版）.pdf differ diff --git a/public/assets/新河水库大坝安全管理（防汛）应急预案.pdf b/public/assets/新河水库大坝安全管理（防汛）应急预案.pdf new file mode 100644 index 0000000..117873c Binary files /dev/null and b/public/assets/新河水库大坝安全管理（防汛）应急预案.pdf differ diff --git a/public/assets/龟山镇曹家冲水库大坝安全管理（防汛）应急预案（终完善版）.pdf b/public/assets/龟山镇曹家冲水库大坝安全管理（防汛）应急预案（终完善版）.pdf new file mode 100644 index 0000000..0b9bd4e Binary files /dev/null and b/public/assets/龟山镇曹家冲水库大坝安全管理（防汛）应急预案（终完善版）.pdf differ diff --git a/public/assets/龟山镇苏家冲水库大坝安全管理（防汛）应急预案（终完善版）.pdf b/public/assets/龟山镇苏家冲水库大坝安全管理（防汛）应急预案（终完善版）.pdf new file mode 100644 index 0000000..513b7a1 Binary files /dev/null and b/public/assets/龟山镇苏家冲水库大坝安全管理（防汛）应急预案（终完善版）.pdf differ diff --git a/src/models/map/index.js b/src/models/map/index.js index 6467669..9e2cdfb 100644 --- a/src/models/map/index.js +++ b/src/models/map/index.js @@ -466,6 +466,13 @@ const map = { dispatch.runtime.setYyfa({}) } + if (id === 3) { + dispatch.map.setLayerSetting({ dom: true }); + // map.setLayoutProperty('卫星图', 'visibility', 'visible'); + } else { + dispatch.map.setLayerSetting({dom: false}); + // map.setLayoutProperty('卫星图', 'visibility', 'none'); + } } }) diff --git a/src/models/map/layout.js b/src/models/map/layout.js index cb9b28a..283edf5 100644 --- a/src/models/map/layout.js +++ b/src/models/map/layout.js @@ -33,6 +33,7 @@ export default function calcLayout(view, rightStack, hidePanels) { left = [ { key: '天气' }, { key: '辅助决策图层', style: { flexShink: 0 } }, + { key: '辅助决策列表' }, ]; } else if (view === 4) { left = [ @@ -48,6 +49,7 @@ export default function calcLayout(view, rightStack, hidePanels) { left = [ { key: '天气' }, { key: '病险水库综述', style: { flexShink: 0 } }, + { key: '降雨分析', style: { flexShink: 0 } }, ]; } else if (view === 201) { @@ -217,8 +219,7 @@ export default function calcLayout(view, rightStack, hidePanels) { rightFullHeight = true; } else if (view === 3) { right = [ - { key: '警报' }, - { key: '辅助决策列表' }, + { key: '网格', style: { height: '40rem' } }, ] //rightFullHeight = true; } else if (view === 4) { @@ -232,9 +233,13 @@ export default function calcLayout(view, rightStack, hidePanels) { ]; } else if (view === 6) { right = [ - { key: '警报' }, - { key: '病险水库' }, + // { key: '警报' }, + { key: '山洪预警', style: { flexGrow: 1,height:'33%' } }, + { key: '水库预警', style: { flexGrow: 1,height:'34%' } }, + { key: '河道预警', style: { flexShink: 1,height:'33%'} }, + ]; + rightFullHeight=true } else if (view === 201) { right = [ { key: '警报' }, diff --git a/src/models/runtime/index.js b/src/models/runtime/index.js index 3586aae..b80918f 100644 --- a/src/models/runtime/index.js +++ b/src/models/runtime/index.js @@ -14,6 +14,7 @@ function initState() { layerSetting: { }, yyObj: {}, + shkshObj:undefined, gwobj:undefined, markers: {}, // type -> [{ id, lgtd, lttd, elev }] scya:undefined, @@ -31,6 +32,9 @@ const runtime = { setYyfa(state, props) { return { ...state, yyObj: props } }, + setShksh(state, props) { + return { ...state, shkshObj: props } + }, setGwtc(state, props) { return { ...state, gwobj: props } }, diff --git a/src/views/Home/InfoDlg/PdfDlg/index.js b/src/views/Home/InfoDlg/PdfDlg/index.js index aac3279..221c34e 100644 --- a/src/views/Home/InfoDlg/PdfDlg/index.js +++ b/src/views/Home/InfoDlg/PdfDlg/index.js @@ -21,7 +21,7 @@ function HDStDlg({ record, onClose }) { BackdropComponent={DpBackgroundDrop} >
- + setValue(v)}> @@ -29,7 +29,7 @@ function HDStDlg({ record, onClose }) { - +
diff --git a/src/views/Home/PanelIndex.js b/src/views/Home/PanelIndex.js index e2f8cf0..ef17ebe 100644 --- a/src/views/Home/PanelIndex.js +++ b/src/views/Home/PanelIndex.js @@ -90,8 +90,12 @@ import Dhxs from './panels/Gwxs' import Yjdd from './panels/Yjdd' import Jsjc from './panels/Jsjc' import Csjc from './panels/Csjc' - - +import Shksh from './panels/Shksh' +import Yawg from './panels/Yawg' +import Drpfx from './panels/Drpfx' +import ShWarn from './panels/ShWarning' +import SkWarn from './panels/SkWarning' +import HdWarn from './panels/HdWarning' export default function PanelIndex({ name, style, ...params }) { if (name === '天气') { return ( @@ -138,7 +142,7 @@ export default function PanelIndex({ name, style, ...params }) { } else if (name === '气象预警综述') { return } else if (name === '辅助决策列表') { - return + return } else if (name === '病险水库') { return } else if (name === '病险水库综述') { @@ -275,6 +279,16 @@ 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 } diff --git a/src/views/Home/components/ActionDock/index.js b/src/views/Home/components/ActionDock/index.js index 957ee33..c52104c 100644 --- a/src/views/Home/components/ActionDock/index.js +++ b/src/views/Home/components/ActionDock/index.js @@ -10,7 +10,7 @@ const VIEWS = [ id: 100, title: '防汛', img: '/assets/menu/防洪形势.png', children: [ { id: 0, title: '防洪形势', img: '/assets/menu/防洪形势.png' }, { id: 1, title: '实时数据', img: '/assets/menu/实时数据.png' }, - { id: 6, title: '水库调度', img: '/assets/menu/病险水库.png' }, + { id: 6, title: '预警', img: '/assets/menu/病险水库.png' }, { id: 2, title: '水利设施', img: '/assets/menu/水利设施.png' }, { id: 3, title: '预案', img: '/assets/menu/辅助决策.png' }, { id: 4, title: '降雨中心', img: '/assets/menu/预警分析.png' }, diff --git a/src/views/Home/index.js b/src/views/Home/index.js index dd6b7bb..6343898 100644 --- a/src/views/Home/index.js +++ b/src/views/Home/index.js @@ -1,5 +1,5 @@ -import React from 'react'; -import { useSelector } from 'react-redux'; +import React,{useEffect} from 'react'; +import { useSelector,useDispatch } from 'react-redux'; import { TransitionGroup, CSSTransition } from 'react-transition-group'; import './index.less'; import ActionDock from './components/ActionDock'; @@ -14,30 +14,36 @@ import Calculating from './components/Calculating'; export default function Demo1() { + const dispatch = useDispatch(); const layout = useSelector(getLayout); const hp = useSelector(hidePanels); - console.log("hp",hp); + console.log("hp", hp); const yyRes = useSelector(s => s.runtime.yyObj); const isSc = useSelector(s => s.runtime.scya); + const wg = useSelector(s => s.runtime.shkshObj) + console.log('wg',wg); + + + return (
-
+
-
- - { +
+ + { yyRes.yy && <> - + } - + { - isSc && + isSc && } - - + +
@@ -62,11 +68,24 @@ export default function Demo1() { !hp && ( { - layout.right.map(({ key, ...params }) => ( - - - - )) + layout.right.map(({ key, ...params }) => { + if (key != '网格') { + return ( + + + + ) + } else if(wg) { + return ( + + + + ) + } + + + } + ) } ) diff --git a/src/views/Home/panels/BxSkOverall/OverallContent.js b/src/views/Home/panels/BxSkOverall/OverallContent.js index 2949bd6..5e6be95 100644 --- a/src/views/Home/panels/BxSkOverall/OverallContent.js +++ b/src/views/Home/panels/BxSkOverall/OverallContent.js @@ -61,6 +61,14 @@ export default function OverallContent({ data, skAll }) { return (
+ 29日9时至30日9时 + 24小时中共有1 + 个站点雨量为特大暴雨，雨量值 + 261mm； + 共产生3个山洪预警（2个内部预警，1个外部预警），均已处置；1个水库超汛限，已短信通知责任人；无河道预警。 + +
+ {/*
共有水库{skAll?.length || '-'}坐， 病险水库共有{stat.all?.length || '-'}坐 ( @@ -70,7 +78,7 @@ export default function OverallContent({ data, skAll }) { ) ，其中超汛限{stat.超汛限?.length || '-'}座。 -
+
*/}
) } diff --git a/src/views/Home/panels/BxSkOverall/index.js b/src/views/Home/panels/BxSkOverall/index.js index 7fcd103..499b783 100644 --- a/src/views/Home/panels/BxSkOverall/index.js +++ b/src/views/Home/panels/BxSkOverall/index.js @@ -13,7 +13,7 @@ export default function BxskOverall({ style }) { return ( { diff --git a/src/views/Home/panels/Drpfx/OverallContent.js b/src/views/Home/panels/Drpfx/OverallContent.js new file mode 100644 index 0000000..8bf1196 --- /dev/null +++ b/src/views/Home/panels/Drpfx/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/Drpfx/index.js b/src/views/Home/panels/Drpfx/index.js new file mode 100644 index 0000000..31f0463 --- /dev/null +++ b/src/views/Home/panels/Drpfx/index.js @@ -0,0 +1,221 @@ +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 { + 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 RemoveIcon from '@material-ui/icons/Remove'; +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: { + 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)' + } + }, + 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 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: 'blue' }, + { id: 'heavy', name: '大暴雨站点', count: 0, color: 'blue' }, + { id: 'storm', name: '暴雨站点', count: 0, color: 'green' } + ]; + + const toggleExpand = (id) => { + setExpanded(prev => ({ + ...prev, + [id]: !prev[id] + })); + }; + + return ( + + + + 类型： + } + label="山洪" + /> + } + label="水文" + /> + } + label="气象" + /> + } + label="水库" + /> + +
+ 最近时段： + + {[ + { value: '1h', label: '1小时' }, + { value: '3h', label: '3小时' }, + { value: '6h', label: '6小时' }, + { value: '12h', label: '12小时' }, + { value: '24h', label: '24小时' } + ].map((item) => ( + + ))} + + +
+ + + + + + 站名 + 累计雨量(mm) + 所属政区 + 所属流域 + + + + {stations.map((station) => ( + + + + + toggleExpand(station.id)} + > + {expanded[station.id] ? : } + + {station.name}({station.count}) + + + + + + + + + + + {/* 展开的详细内容可以在这里添加 */} + {/* + 站名 + 水位(m) + 所属政区 + 所属流域 + */} + + + + + + ))} + +
+ + + + ) +} diff --git a/src/views/Home/panels/Drpfx/index.less b/src/views/Home/panels/Drpfx/index.less new file mode 100644 index 0000000..ee34c9b --- /dev/null +++ b/src/views/Home/panels/Drpfx/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/FzjcLayers/index.js b/src/views/Home/panels/FzjcLayers/index.js index 3a8ffc4..0ff7b4d 100644 --- a/src/views/Home/panels/FzjcLayers/index.js +++ b/src/views/Home/panels/FzjcLayers/index.js @@ -118,23 +118,6 @@ function FzjcLayers({ style }) { "padNm": "421181001001000", "url": "dplan/2025/421181001001000/园林社区居民委员会山洪灾害防御预案.pdf" }, - { - "id": 125976, - "reviewStatus": "2", - "createTime": "2025-05-03 21:25:23", - "updateTime": "2025-05-14 09:53:14", - "del": "0", - "planId": "421181001001000", - "planName": "园林社区居民委员会一页纸预案", - "levels": "6", - "year": "2025", - "adnm": "园林社区居民委员会", - "adcd": "421181001001000", - "status": 0, - "uploadAttachStatus": "0", - "padNm": "421181001001000", - "url": "dplan/2025/421181001001000/园林社区居民委员会一页纸预案.pdf" - }, { "id": 125977, "reviewStatus": "2", @@ -155,190 +138,24 @@ function FzjcLayers({ style }) { "padNm": "421181001002000", "url": "dplan/2025/421181001002000/城西社区居民委员会山洪灾害防御预案.pdf" }, + ] + + const skData = [ { - "id": 125978, - "reviewStatus": "2", - "createTime": "2025-05-03 21:25:24", - "updateTime": "2025-05-14 09:53:14", - "del": "0", - "planId": "421181001002000", - "planName": "城西社区居民委员会一页纸预案", - "levels": "6", - "year": "2025", - "adnm": "城西社区居民委员会", - "adcd": "421181001002000", - "status": 0, - "uploadAttachStatus": "0", - "padNm": "421181001002000", - "url": "dplan/2025/421181001002000/城西社区居民委员会一页纸预案.pdf" + planName: '新河水库大坝安全管理（防汛）应急预案', + "updateTime": "2025-05-29 11:40:08", }, - { - "id": 125979, - "reviewStatus": "2", - "createTime": "2025-05-03 21:25:24", - "updateId": "187", - "updateName": "麻城市", - "updateTime": "2025-05-29 11:40:34", - "del": "0", - "planId": "421181001007000", - "planName": "黄狮岗社区居民委员会山洪灾害防御预案", - "levels": "0", - "year": "2025", - "adnm": "黄狮岗社区居民委员会", - "adcd": "421181001007000", - "attachUpdateTime": "2025-05-29 11:40:34", - "status": 0, - "uploadAttachStatus": "1", - "padNm": "421181001007000", - "url": "dplan/2025/421181001007000/黄狮岗社区居民委员会山洪灾害防御预案.pdf" + { + planName: '龟山镇曹家冲水库大坝安全管理（防汛）应急预案（终完善版）', + "updateTime": "2025-05-29 11:40:08", }, - { - "id": 125980, - "reviewStatus": "2", - "createTime": "2025-05-03 21:25:24", - "updateTime": "2025-05-14 09:53:14", - "del": "0", - "planId": "421181001007000", - "planName": "黄狮岗社区居民委员会一页纸预案", - "levels": "6", - "year": "2025", - "adnm": "黄狮岗社区居民委员会", - "adcd": "421181001007000", - "status": 0, - "uploadAttachStatus": "0", - "padNm": "421181001007000", - "url": "dplan/2025/421181001007000/黄狮岗社区居民委员会一页纸预案.pdf" + { + planName: '龟山镇苏家冲水库大坝安全管理（防汛）应急预案（终完善版）', + "updateTime": "2025-05-29 11:40:08", }, - { - "id": 125981, - "reviewStatus": "2", - "createTime": "2025-05-03 21:25:24", - "updateId": "187", - "updateName": "麻城市", - "updateTime": "2025-05-29 11:40:50", - "del": "0", - "planId": "421181001008000", - "planName": "宋家河社区居民委员会山洪灾害防御预案", - "levels": "0", - "year": "2025", - "adnm": "宋家河社区居民委员会", - "adcd": "421181001008000", - "attachUpdateTime": "2025-05-29 11:40:49", - "status": 0, - "uploadAttachStatus": "1", - "padNm": "421181001008000", - "url": "dplan/2025/421181001008000/宋家河社区居民委员会山洪灾害防御预案.pdf" - }, - { - "id": 125982, - "reviewStatus": "2", - "createTime": "2025-05-03 21:25:24", - "updateTime": "2025-05-14 09:53:14", - "del": "0", - "planId": "421181001008000", - "planName": "宋家河社区居民委员会一页纸预案", - "levels": "6", - "year": "2025", - "adnm": "宋家河社区居民委员会", - "adcd": "421181001008000", - "status": 0, - "uploadAttachStatus": "0", - "padNm": "421181001008000", - "url": "dplan/2025/421181001008000/宋家河社区居民委员会一页纸预案.pdf" - }, - { - "id": 125983, - "reviewStatus": "2", - "createTime": "2025-05-03 21:25:24", - "updateId": "187", - "updateName": "麻城市", - "updateTime": "2025-05-29 11:41:03", - "del": "0", - "planId": "421181001010000", - "planName": "松鹤社区居民委员会山洪灾害防御预案", - "levels": "0", - "year": "2025", - "adnm": "松鹤社区居民委员会", - "adcd": "421181001010000", - "attachUpdateTime": "2025-05-29 11:41:02", - "status": 0, - "uploadAttachStatus": "1", - "padNm": "421181001010000", - "url": "dplan/2025/421181001010000/松鹤社区居民委员会山洪灾害防御预案.pdf" - }, - { - "id": 125984, - "reviewStatus": "2", - "createTime": "2025-05-03 21:25:24", - "updateTime": "2025-05-14 09:53:14", - "del": "0", - "planId": "421181001010000", - "planName": "松鹤社区居民委员会一页纸预案", - "levels": "6", - "year": "2025", - "adnm": "松鹤社区居民委员会", - "adcd": "421181001010000", - "status": 0, - "uploadAttachStatus": "0", - "padNm": "421181001010000", - "url": "dplan/2025/421181001010000/松鹤社区居民委员会一页纸预案.pdf" - }, - { - "id": 125985, - "reviewStatus": "2", - "createTime": "2025-05-03 21:25:24", - "updateId": "187", - "updateName": "麻城市", - "updateTime": "2025-05-29 11:41:21", - "del": "0", - "planId": "421181001011000", - "planName": "龙池桥社区居民委员会山洪灾害防御预案", - "levels": "0", - "year": "2025", - "adnm": "龙池桥社区居民委员会", - "adcd": "421181001011000", - "attachUpdateTime": "2025-05-29 11:41:20", - "status": 0, - "uploadAttachStatus": "1", - "padNm": "421181001011000", - "url": "dplan/2025/421181001011000/龙池桥社区居民委员会山洪灾害防御预案.pdf" - }, - { - "id": 125986, - "reviewStatus": "2", - "createTime": "2025-05-03 21:25:24", - "updateTime": "2025-05-14 09:53:14", - "del": "0", - "planId": "421181001011000", - "planName": "龙池桥社区居民委员会一页纸预案", - "levels": "6", - "year": "2025", - "adnm": "龙池桥社区居民委员会", - "adcd": "421181001011000", - "status": 0, - "uploadAttachStatus": "0", - "padNm": "421181001011000", - "url": "dplan/2025/421181001011000/龙池桥社区居民委员会一页纸预案.pdf" - }, - { - "id": 125987, - "reviewStatus": "2", - "createTime": "2025-05-03 21:25:24", - "updateId": "187", - "updateName": "麻城市", - "updateTime": "2025-05-29 11:41:34", - "del": "0", - "planId": "421181001204000", - "planName": "七里桥村村民委员会山洪灾害防御预案", - "levels": "0", - "year": "2025", - "adnm": "七里桥村村民委员会", - "adcd": "421181001204000", - "attachUpdateTime": "2025-05-29 11:41:33", - "status": 0, - "uploadAttachStatus": "1", - "padNm": "421181001204000", - "url": "dplan/2025/421181001204000/七里桥村村民委员会山洪灾害防御预案.pdf" + { + planName: '大石板水库大坝安全管理（防汛）应急预案（完善版）', + "updateTime": "2025-05-29 11:40:08", } ] const dispatch = useDispatch(); @@ -456,7 +273,11 @@ function FzjcLayers({ style }) { {zt[row.levels]} - {row.updateTime} + +
{row.updateTime}
+ ))} @@ -472,17 +293,16 @@ function FzjcLayers({ style }) { - {shData.map((row) => ( + {skData.map((row) => ( flyTo(row,'bz')}>
{row.planName}
 - - {row.pustType} - - {row.irrCode_dictText} +
{row.updateTime}
 ))} diff --git a/src/views/Home/panels/HdWarning/OverallContent.js b/src/views/Home/panels/HdWarning/OverallContent.js new file mode 100644 index 0000000..8bf1196 --- /dev/null +++ b/src/views/Home/panels/HdWarning/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/HdWarning/index.js b/src/views/Home/panels/HdWarning/index.js new file mode 100644 index 0000000..58a1047 --- /dev/null +++ b/src/views/Home/panels/HdWarning/index.js @@ -0,0 +1,196 @@ +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 { + 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 RemoveIcon from '@material-ui/icons/Remove'; +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: { + 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: '#fed4db' + }, + '&.purple': { + backgroundColor: '#fceccf' + } + }, + 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 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, type: 'pink' }, + { id: '100year', name: '超警戒水位', count: 0, type: 'purple' }, + ]; + + const toggleExpand = (id) => { + setExpanded(prev => ({ + ...prev, + [id]: !prev[id] + })); + }; + + return ( + + + + 类型： + } + label="山洪" + /> + } + label="水文" + /> + + + + + + + + + 站名 + 水位(mm) + 所属政区 + 所属流域 + + + + {stations.map((station) => ( + + + + + toggleExpand(station.id)} + > + {expanded[station.id] ? : } + + {station.name}({station.count}) + + + + + + + + + + + {/* 展开的详细内容可以在这里添加 */} + {/* + 站名 + 水位(m) + 所属政区 + 所属流域 + */} + + + + + + ))} + +
+ + + + ) +} diff --git a/src/views/Home/panels/HdWarning/index.less b/src/views/Home/panels/HdWarning/index.less new file mode 100644 index 0000000..ee34c9b --- /dev/null +++ b/src/views/Home/panels/HdWarning/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/ShWarning/OverallContent.js b/src/views/Home/panels/ShWarning/OverallContent.js new file mode 100644 index 0000000..8bf1196 --- /dev/null +++ b/src/views/Home/panels/ShWarning/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/ShWarning/index.js b/src/views/Home/panels/ShWarning/index.js new file mode 100644 index 0000000..ae7011b --- /dev/null +++ b/src/views/Home/panels/ShWarning/index.js @@ -0,0 +1,252 @@ +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 { + Box, + Typography, + Checkbox, + FormControlLabel, + ButtonGroup, + Button, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + IconButton, + Collapse, + Paper +} from '@material-ui/core'; +// import AddIcon from '@material-ui/icons/Add'; +import RemoveIcon from '@material-ui/icons/Remove'; +import WarningIcon from '@material-ui/icons/Warning'; +import AddIcon from '@material-ui/icons/Add'; + +import { DatePicker } from 'antd'; +import moment from 'moment'; + +const { RangePicker } = DatePicker; +const useStyles = makeStyles((theme) => ({ + root: { + color: '#fff' + }, + table: { + '& .MuiTableCell-root': { + color: '#fff', + borderBottom: '1px solid rgba(255, 255, 255, 0.1)' + } + }, + warningRow: { + '&.immediate': { + backgroundColor: '#d32f2f' + }, + '&.prepare': { + backgroundColor: '#ed6c02' + } + }, + expandIcon: { + marginRight: theme.spacing(1), + fontSize: 20, + cursor: 'pointer', + transition: 'transform 0.3s', + '&.expanded': { + transform: 'rotate(180deg)' + } + }, + warningCount: { + marginLeft: theme.spacing(1) + }, + expandedContent: { + backgroundColor: 'rgba(0, 0, 0, 0.2)', + padding: theme.spacing(2) + }, + statsSection: { + marginTop: theme.spacing(4) + }, + statsTitle: { + color: '#1976d2', + marginBottom: theme.spacing(3) + }, + warningStats: { + display: 'flex', + justifyContent: 'space-around', + marginTop: theme.spacing(2) + }, + statItem: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center' + }, + warningIcon: { + fontSize: 40, + marginBottom: theme.spacing(1), + '&.immediate': { + color: '#d32f2f' + }, + '&.prepare': { + color: '#ed6c02' + } + } +})); +export default function Overall({ style }) { + + const classes = useStyles(); + + const [timeRange, setTimeRange] = useState('1h'); + const [expanded, setExpanded] = useState({}); + + const warningData = [ + { + type: 'immediate', + label: '立即转移', + count: 0, + details: [] // 这里可以添加详细信息的数组 + }, + { + type: 'prepare', + label: '准备转移', + count: 0, + details: [] // 这里可以添加详细信息的数组 + } + ]; + + const handleExpand = (type) => { + setExpanded(prev => ({ + ...prev, + [type]: !prev[type] + })); + }; + + const [params, setParams] = useState({ tm: [] }) + + const searchTm = (e) => { + setParams({ + ...params, + stm: e[0].format("YYYY-MM-DD HH:mm"), + etm: e[1].format("YYYY-MM-DD HH:mm"), + tm: e, + }) + }; + useEffect(() => { + let options = ""; + options = { + etm: moment().add(1, 'hour').set({ minute: 0, second: 0 }).format("YYYY-MM-DD HH:mm"), + stm: moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }).format("YYYY-MM-DD HH:mm"), + tm: [ + moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }), + moment().add(1, 'hour').set({ minute: 0, second: 0 }), + ], + } + + setParams(options) + + }, []) + + return ( + + + +
+
时段选择：
+
+ trigger.parentElement} + /> +
+
+ + + + + 乡镇 + 预警时间 + 预警状态 + + + + {warningData.map((row) => ( + + + + + {expanded[row.type] ? ( + handleExpand(row.type)} + /> + ) : ( + handleExpand(row.type)} + /> + )} + {row.label} + + + + + {row.count}个乡镇 + + + + + + + {/* 这里可以添加展开后显示的详细内容 */} + 暂无详细信息 + + + + + + ))} + +
+ + + + + 预警统计: 共 0 条 + + + {warningData.map((stat) => ( + +
+
+ + {stat.label} +
+ {stat.count} +
+ + + ))} + + + + + ) +} diff --git a/src/views/Home/panels/ShWarning/index.less b/src/views/Home/panels/ShWarning/index.less new file mode 100644 index 0000000..ee34c9b --- /dev/null +++ b/src/views/Home/panels/ShWarning/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/Shksh/Setting.js b/src/views/Home/panels/Shksh/Setting.js new file mode 100644 index 0000000..fd1c4ef --- /dev/null +++ b/src/views/Home/panels/Shksh/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/Shksh/index.js b/src/views/Home/panels/Shksh/index.js new file mode 100644 index 0000000..1309672 --- /dev/null +++ b/src/views/Home/panels/Shksh/index.js @@ -0,0 +1,207 @@ +import React, { useMemo, useState } from 'react'; +import PanelBox from '../../components/PanelBox'; +import { useDispatch, useSelector } from 'react-redux'; +import { Switch, FormControlLabel, InputLabel, Select, MenuItem, FormControl } from '@material-ui/core/index' +import { styled } from '@material-ui/styles'; +import { TreeView, TreeItem } from '@material-ui/lab'; +import { makeStyles } from '@material-ui/styles'; +import ExpandMore from '@material-ui/icons/ExpandMore'; +import ChevronRight from '@material-ui/icons/ChevronRight'; +import FolderIcon from '@material-ui/icons/Folder'; +import Box from '@material-ui/core/Box'; +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 config from '../../../../config'; + +function HDReal({ style, onSelect }) { + const dispatch = useDispatch(); + const machengData = [ + { + id: '420981', + name: '麻城市', + children: [ + { id: '420981001', name: '龙池桥街道',lgtd:115.02073188,lttd:31.18672346,count:2 }, + { id: '420981002', name: '木子店镇',lgtd:115.36181316,lttd:31.1908325,count:2}, + { id: '420981003', name: '黄土岗镇',lgtd:115.07167872,lttd:31.37496863,count:2 }, + { id: '420981004', name: '宋埠镇',lgtd:114.8003577,lttd:31.07316308,count:2 }, + { id: '420981005', name: '南湖街道',lgtd:114.99464754,lttd:31.16857964,count:2}, + ], + }, + ]; +const useStyles = makeStyles({ + root: { + height: 240, + flexGrow: 1, + maxWidth: 400, + color: '#ffffff', + '& .MuiTreeItem-root': { + backgroundColor: 'transparent', + '&:hover': { + backgroundColor: 'rgba(255, 255, 255, 0.08)' + }, + '&.Mui-selected': { + backgroundColor: 'rgba(255, 255, 255, 0.16)', + '&:hover': { + backgroundColor: 'rgba(255, 255, 255, 0.24)' + } + } + }, + '& .MuiTreeItem-content': { + backgroundColor: 'transparent', + color: '#ffffff' + }, + '& .MuiSvgIcon-root': { + color: '#ffffff' + } + }, + labelRoot: { + display: 'flex', + alignItems: 'center', + padding: '2px 0' + }, + labelIcon: { + marginRight: 8, + fontSize: 20 + }, + labelText: { + fontWeight: 'inherit', + flexGrow: 1 + }, + numberText: { + marginLeft: 8, + fontSize: '0.85em', + opacity: 0.8 + } +}); + + const classes = useStyles(); + const renderTree = (nodes) => { + const labelContent = ( + + + {nodes.name} + {!nodes.children ? `(${nodes.count})`:''} + + ); + return ( + + {Array.isArray(nodes.children) + ? nodes.children.map((node) => renderTree(node)) + : null} + + ) + } + const dataObj = { + '420981': [{ planName: '园林社区居民委员会山洪灾害防御预案', id: '1' }, { planName: '城西社区居民委员会山洪灾害防御预案', id: '2' }, + { planName: '木子店镇山洪灾害防御预案', id: '1' }, { planName: '大堰河村村民委员会山洪灾害防御预案', id: '2' }, + { planName: '黄土岗镇山洪灾害防御预案', id: '1' }, { planName: '土城村村民委员会山洪灾害防御预案', id: '2' }, + { planName: '宋埠镇山洪灾害防御预案', id: '1' }, { planName: '拜郊村村民委员会山洪灾害防御预案', id: '2' }, + { planName: '南湖街道山洪灾害防御预案', id: '1' }, { planName: '五里墩社区居民委员会山洪灾害防御预案', id: '2' } + ], + '420981001': [{ planName: '园林社区居民委员会山洪灾害防御预案', id: '1' }, { planName: '城西社区居民委员会山洪灾害防御预案', id: '2' }], + '420981002': [{ planName: '木子店镇山洪灾害防御预案', id: '1' }, { planName: '大堰河村村民委员会山洪灾害防御预案', id: '2' }], + '420981003':[{ planName: '黄土岗镇山洪灾害防御预案', id: '1' }, { planName: '土城村村民委员会山洪灾害防御预案', id: '2' }], + '420981004':[{ planName: '宋埠镇山洪灾害防御预案', id: '1' }, { planName: '拜郊村村民委员会山洪灾害防御预案', id: '2' }], + '420981005':[{ planName: '南湖街道山洪灾害防御预案', id: '1' }, { planName: '五里墩社区居民委员会山洪灾害防御预案', id: '2' }], + } + const flyTo = (record) => { + const { lgtd, lttd } = record; + if (lgtd && lttd) { + dispatch.runtime.setFeaturePop({ type: '', properties: record, coordinates: [lgtd, lttd] }); + dispatch.runtime.setCameraTarget({ + center: [lgtd, lttd + config.poiPositionOffsetY.drp], + zoom: 13, + pitch: config.poiPitch, + bearing: 0 + }); + } + } + const [tableData, setTableData] = useState([]) + const handleNodeSelect = (event, nodeId) => { + setTableData(dataObj[nodeId]) + const row = machengData[0].children.find(item => item.id == nodeId) + dispatch.runtime.setShksh(row) + flyTo(row) + }; + + + + + + + // 获取所有节点ID的函数 + const getAllNodeIds = (nodes) => { + if (Array.isArray(nodes)) { + return nodes.reduce((ids, node) => [...ids, ...getAllNodeIds(node)], []); + } + let ids = [nodes.id]; + if (nodes.children) { + nodes.children.forEach(child => { + ids = [...ids, ...getAllNodeIds(child)]; + }); + } + return ids; + }; + + // 获取所有节点ID + const expandedIds = getAllNodeIds(machengData); + + return ( + +
+
区域选择
+ } + defaultExpandIcon={} + onNodeSelect={handleNodeSelect} + defaultExpanded={expandedIds} + > + {renderTree(machengData[0])} + +
预案列表
+ + + + + 预案名称 + {/* 警戒水位 */} + + + + {tableData.map((row) => ( + + +
{row.planName}
+ + + + ))} + +
+ +
+ + ) +} + +export default HDReal; diff --git a/src/views/Home/panels/SkWarning/OverallContent.js b/src/views/Home/panels/SkWarning/OverallContent.js new file mode 100644 index 0000000..8bf1196 --- /dev/null +++ b/src/views/Home/panels/SkWarning/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/SkWarning/index.js b/src/views/Home/panels/SkWarning/index.js new file mode 100644 index 0000000..2072219 --- /dev/null +++ b/src/views/Home/panels/SkWarning/index.js @@ -0,0 +1,188 @@ +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 { + 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 RemoveIcon from '@material-ui/icons/Remove'; +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: { + 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)' + } + }, + 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 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: '超设计洪水位', count: 0, color: 'purple' }, + { id: '50year', name: '超汛限水位', count: 0, color: 'blue' }, + ]; + + const toggleExpand = (id) => { + setExpanded(prev => ({ + ...prev, + [id]: !prev[id] + })); + }; + + return ( + + + + 类型： + } + label="水文" + /> + } + label="水库" + /> + + + + + + + + 站名 + 水位(mm) + 所属政区 + 所属流域 + + + + {stations.map((station) => ( + + + + + toggleExpand(station.id)} + > + {expanded[station.id] ? : } + + {station.name}({station.count}) + + + + + + + + + + + {/* 展开的详细内容可以在这里添加 */} + {/* + 站名 + 水位(m) + 所属政区 + 所属流域 + */} + + + + + + ))} + +
+ + + + ) +} diff --git a/src/views/Home/panels/SkWarning/index.less b/src/views/Home/panels/SkWarning/index.less new file mode 100644 index 0000000..ee34c9b --- /dev/null +++ b/src/views/Home/panels/SkWarning/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/Yawg/Setting.js b/src/views/Home/panels/Yawg/Setting.js new file mode 100644 index 0000000..fd1c4ef --- /dev/null +++ b/src/views/Home/panels/Yawg/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/Yawg/constatData.js b/src/views/Home/panels/Yawg/constatData.js new file mode 100644 index 0000000..7af3d1c --- /dev/null +++ b/src/views/Home/panels/Yawg/constatData.js @@ -0,0 +1,267 @@ + const showData = [ + { + "mvalue": null, + "wainWasoType": null, + "updserRsn": null, + "gtctrTp": null, + "updDate": "2025-01-07", + "chanCode": "420802001350", + "engStat": null, + "desTotInsCap": null, + "gateSize": "3*3*2，4*4*2", + "wagaCode": "HP0074208020000170", + "adCode": "420802102000000", + "adCode_dictText": "漳河镇", + "lgtd": 112.075597 +2.9619, + "updserInvst": null, + "engGrad": null, + "runStat": "1", + "irrCode_dictText": "水库枢纽", + "flow": null, + "bnch": "0+000", + "startLat": null, + "engScal": null, + "chanCode_dictText": "总干渠", + "lockDisc": null, + "wagaUse": null, + "engManCode_dictText": "副坝管理所", + "irrCode": "D00001300", + "sort": 1001, + "stcd": "4262630017", + "dsfl": 121, + "admDep": null, + "startDate": null, + "note": "年久失修，需配套更新", + "inEle": 110, + "pwrTp": "2", + "updserDate": null, + "engManCode": "ENG100051", + "chidCount": null, + "whthInWat_dictText": "是", + "lttd": 30.961122 +0.2002, + "whthInWat": "1", + "hasImg": false, + "stfl": 131, + "endLat": null, + "wagaType": "6", + "endLong": null, + "gtctrTlmtCd": null, + "outEle": 110, + "pwrTp_dictText": "电动", + "wagaName": "渠首闸", + "wagaType_dictText": "进水闸", + "hdgrTp": "7", + "compDate": null, + "startLong": null, + "gaorNum": 8, + "runStat_dictText": "在用良好", + "gateTp": "平板钢闸门", + "hdgrTp_dictText": "7", + "insPow": null, + "collDate": "2022-09-15" + }, + { + "mvalue": null, + "wainWasoType": null, + "engGrad_dictText": "Ⅱ", + "updserRsn": "闸门漏水严重", + "gtctrTp": null, + "updDate": "2023-03-22", + "chanCode": "420802001350", + "engStat": null, + "desTotInsCap": null, + "gateSize": "5.6*3", + "wagaCode": "HP007420804000188X", + "adCode": "420804004213000", + "adCode_dictText": "车桥村", + "lgtd": 112.118889 +2.9619, + "updserInvst": 20, + "engGrad": "2", + "runStat": "1", + "irrCode_dictText": "总干渠", + "flow": null, + "bnch": "7+670", + "startLat": null, + "engScal": "2", + "chanCode_dictText": "总干渠", + "lockDisc": null, + "wagaUse": null, + "engManCode_dictText": "车桥管理段", + "irrCode": "D00000290", + "sort": 1003, + "stcd": "4263630188", + "dsfl": 140, + "admDep": null, + "startDate": null, + "note": null, + "inEle": 109.33, + "pwrTp": "3", + "updserDate": "2010-01-01", + "engManCode": "ENG100037", + "chidCount": null, + "whthInWat_dictText": "否", + "lttd": 30.974167 +0.2002, + "whthInWat": "2", + "hasImg": false, + "stfl": 5, + "endLat": null, + "wagaType": "2", + "endLong": null, + "gtctrTlmtCd": null, + "outEle": 99.5, + "pwrTp_dictText": "手电两用", + "wagaName": "车桥泄洪闸", + "wagaType_dictText": "泄洪闸", + "hdgrTp": "2", + "compDate": "1963-06-01", + "startLong": null, + "gaorNum": 4, + "runStat_dictText": "在用良好", + "gateTp": null, + "hdgrTp_dictText": "螺杆式", + "insPow": null, + "collDate": "2022-09-15" + }, +] + +const bzData = [ + { + "note": null, + "inEle": null, + "mainBuildGrad": null, + "pustType": null, + "updserDate": null, + "engManCode": "ENG200038", + "wasuRang": "生态用水", + "wainWasoType": null, + "lttd": 30.97131 +0.2002, + "updserRsn": null, + "updDate": "2023-03-21", + "pustCode": "HP0104208040001543", + "chanCode": "420802001350", + "engStat": null, + "startRunDate": null, + "pustName": "生态取水点1", + "stfl": 0.1, + "adCode": "420804004000000", + "adCode_dictText": "双喜街道办事处", + "lgtd": 112.18575 +2.9619, + "actIrrA": null, + "updserInvst": null, + "engGrad": null, + "irrCode_dictText": "总干渠", + "engTask": null, + "bnch": "16+870", + "engScal": null, + "pumpSetNum": 2, + "insFlow": null, + "chanCode_dictText": "总干渠", + "desIrrA": null, + "engManCode_dictText": "村(镇)", + "pumpNum": null, + "irrCode": "D00000290", + "sort": 101, + "desHead": 15, + "compDate": "2013-11-01", + "totInsCap": 8, + "serCod": "正常", + "dsfl": 0.1, + "insPow": null, + "admDep": null, + "startDate": null, + "collDate": "2022-08-23" + }, + { + "note": null, + "inEle": null, + "mainBuildGrad": null, + "pustType": null, + "updserDate": null, + "engManCode": "ENG200038", + "wasuRang": "生态用水", + "wainWasoType": null, + "lttd": 30.96613 -0.2002, + "updserRsn": null, + "updDate": "2023-03-21", + "pustCode": "HP0104208040001558", + "chanCode": "420802001350", + "engStat": null, + "startRunDate": null, + "pustName": "生态取水点2", + "stfl": 0.1, + "adCode": "420804001003000", + "adCode_dictText": "白石坡社区", + "lgtd": 112.19441 +2.9619, + "actIrrA": null, + "updserInvst": null, + "engGrad": null, + "irrCode_dictText": "总干渠", + "engTask": null, + "bnch": "18+000", + "engScal": null, + "pumpSetNum": 3, + "insFlow": null, + "chanCode_dictText": "总干渠", + "desIrrA": null, + "engManCode_dictText": "村(镇)", + "pumpNum": null, + "irrCode": "D00000290", + "sort": 102, + "desHead": 15, + "compDate": "2009-08-01", + "totInsCap": 22.5, + "serCod": "正常", + "dsfl": 0.1, + "insPow": null, + "admDep": null, + "startDate": null, + "collDate": "2022-08-23" + }, + { + "note": "年久失修", + "inEle": null, + "mainBuildGrad": null, + "pustType": null, + "updserDate": null, + "engManCode": "ENG200038", + "wasuRang": "车桥三组", + "wainWasoType": null, + "lttd": 30.972222 -0.2002, + "updserRsn": null, + "updDate": "2023-03-21", + "pustCode": "HP0104208040001467", + "chanCode": "420802001350", + "engStat": null, + "startRunDate": null, + "pustName": "车桥泵站1 ", + "stfl": 0.1, + "adCode": "420804004213000", + "adCode_dictText": "车桥村", + "lgtd": 112.121667 - 2.9619, + "actIrrA": 40, + "updserInvst": null, + "engGrad": null, + "irrCode_dictText": "总干渠", + "engTask": null, + "bnch": "8+155", + "engScal": null, + "pumpSetNum": 1, + "insFlow": null, + "chanCode_dictText": "总干渠", + "desIrrA": null, + "engManCode_dictText": "村(镇)", + "pumpNum": null, + "irrCode": "D00000290", + "sort": 103, + "desHead": 8, + "compDate": "1982-07-01", + "totInsCap": 4, + "serCod": "异常", + "dsfl": 0.1, + "insPow": null, + "admDep": null, + "startDate": null, + "collDate": "2022-08-23" + }, +] +export { showData,bzData } \ No newline at end of file diff --git a/src/views/Home/panels/Yawg/index.js b/src/views/Home/panels/Yawg/index.js new file mode 100644 index 0000000..b48b158 --- /dev/null +++ b/src/views/Home/panels/Yawg/index.js @@ -0,0 +1,194 @@ +import React, { useMemo, useState,useEffect } 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 { showData,bzData} from './constatData' +import './index.less' +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 flyTo = (record, type) => { + toggleStType(type) + const { lgtd, lttd } = record; + if (lgtd && lttd) { + dispatch.runtime.setFeaturePop({ type, properties: record, coordinates: [lgtd, lttd] }); + dispatch.runtime.setCameraTarget({ + center: [lgtd, lttd + config.poiPositionOffsetY.hd], + zoom: config.poiPositionZoom.hd, + pitch: config.poiPitch, + }); + } + } + const wgData = [ + { + + } + ] + const [type, setType] = useState('fx') + + const toggleStType = (type) => { + + setType(type) + + } + + const toggleAutoRefresh = () => { + dispatch.realview.setHdAutoRefresh(!hdAutoRefresh); + } + useEffect(() => { + return () => { + dispatch.runtime.setShksh(undefined) + } + }, []) + + return ( + + toggleStType('fx')}>风险网格 + toggleStType('jg')}>结构化预案 + + } + extra={ + <> + + {/* showSetting(true)}> */} + + } + > + {type == 'fx' ?
山洪灾害防治区及重点防治区内需转移人员基本情况
: null} + { + type == 'fx' ? + <> + + + + + 户主 + 家庭人口 + 宅基高程(m) + 房屋面积(m²) + + + + {[].map((row) => ( + flyTo(row, 'bz')}> + + {row.pustName} + + + {row.pustType} + + {row.irrCode_dictText} + + ))} + +
+ +
风险统计
+
+
+
35
+
危险区面积
+
+
+
35
+
危险区户数
+
+
+
35
+
风险点(个)
+
+
+
+ 15 +
+
危险区人口(人)
+
+
+ + :
+
基本情况
+
+
+
+ 威胁对象： + 18 +
+
+ 威胁人口： + 75 +
+
+
+ 安置点： + 2组,3组 +
+ +
+ +
预警指标
+
+ 准备转移： + 1小时-mm; 3小时-mm; 6小时-mm +
+
+ 立即转移： + 1小时-mm; 3小时-mm; 6小时-mm +
+ +
+ +
防汛值班电话
+
+
市汛期值班电话：
+
+
+
县汛期值班电话：
+ 0718-3225026 +
+
+
+ } + {/* { + setting && showSetting(false)} /> + } */} + + ) +} + +export default HDReal; diff --git a/src/views/Home/panels/Yawg/index.less b/src/views/Home/panels/Yawg/index.less new file mode 100644 index 0000000..a0cddcc --- /dev/null +++ b/src/views/Home/panels/Yawg/index.less @@ -0,0 +1,77 @@ +.basic-info { + color: #fff; + padding: 16px; + background-color: rgba(0, 0, 0, 0.2); + border-radius: 4px; +} + +.info-title { + font-size: 18px; + font-weight: bold; + margin-bottom: 16px; +} + +.info-content { + font-size: 14px; +} + +.info-row { + display: flex; + justify-content: space-between; + margin-bottom: 12px; +} + +.info-item { + margin-bottom: 12px; +} + +.warning-item { + margin-bottom: 8px; +} + +.label { + color: rgba(255, 255, 255, 0.7); +} + +.value { + margin-left: 8px; +} + +.divider { + height: 1px; + background-color: rgba(255, 255, 255, 0.12); + margin: 16px 0; +} + +.section-title { + font-size: 16px; + font-weight: bold; + margin: 16px 0; + color: #1976d2; + position: relative; + padding-left: 12px; +} + +.section-title::before { + content: ''; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 4px; + height: 16px; + background-color: #1976d2; +} + +.phone-item { + margin-bottom: 8px; +} + +.phone-number { + color: #4fc3f7; + text-decoration: none; +} + +.phone-number:hover { + text-decoration: underline; +} \ No newline at end of file