diff --git a/public/assets/cgfx.png b/public/assets/cgfx.png new file mode 100644 index 0000000..f27dd34 Binary files /dev/null and b/public/assets/cgfx.png differ diff --git a/public/assets/dcjg.jpg b/public/assets/dcjg.jpg new file mode 100644 index 0000000..b715300 Binary files /dev/null and b/public/assets/dcjg.jpg differ diff --git a/public/assets/duibi1.png b/public/assets/duibi1.png new file mode 100644 index 0000000..095afbc Binary files /dev/null and b/public/assets/duibi1.png differ diff --git a/public/assets/lsyy.png b/public/assets/lsyy.png new file mode 100644 index 0000000..5acdb66 Binary files /dev/null and b/public/assets/lsyy.png differ diff --git a/public/assets/yjzl.jpg b/public/assets/yjzl.jpg new file mode 100644 index 0000000..8a1a65d Binary files /dev/null and b/public/assets/yjzl.jpg differ diff --git a/public/assets/yuanyanjg.png b/public/assets/yuanyanjg.png new file mode 100644 index 0000000..cba576c Binary files /dev/null and b/public/assets/yuanyanjg.png differ diff --git a/public/assets/yyVideo.mp4 b/public/assets/yyVideo.mp4 new file mode 100644 index 0000000..73bf6fe Binary files /dev/null and b/public/assets/yyVideo.mp4 differ diff --git a/public/mapbox/sprite@2x.json b/public/mapbox/sprite@2x.json index 5808d66..3a2a505 100644 --- a/public/mapbox/sprite@2x.json +++ b/public/mapbox/sprite@2x.json @@ -46,6 +46,14 @@ "y": 0, "pixelRatio": 1, "visible": true + }, + "实时雨量1": { + "width": 32, + "height": 32, + "x": 220, + "y": 190, + "pixelRatio": 1, + "visible": true }, "水库": { "width": 32, @@ -54,6 +62,14 @@ "y": 0, "pixelRatio": 1, "visible": true + }, + "水库1": { + "width": 32, + "height": 32, + "x": 32, + "y": 0, + "pixelRatio": 1, + "visible": true }, "水库-离线": { "width": 32, diff --git a/public/mapbox/sprite@2x.png b/public/mapbox/sprite@2x.png index 73acc44..5193efd 100644 Binary files a/public/mapbox/sprite@2x.png and b/public/mapbox/sprite@2x.png differ diff --git a/src/assets/testBg.png b/src/assets/testBg.png new file mode 100644 index 0000000..139a3cd Binary files /dev/null and b/src/assets/testBg.png differ diff --git a/src/models/map/index.js b/src/models/map/index.js index 9591fb6..6071fba 100644 --- a/src/models/map/index.js +++ b/src/models/map/index.js @@ -211,9 +211,11 @@ const map = { }); } else if (id === 6) { layerVisible = { - RealDrpLayer: true, - RealHDLayer: true, - RealSkLayer: true, + RealDrpLayer: false, + RealHDLayer: false, + RealSkLayer: false, + RainDrpLayer:true, + ShuikuLayer:true, BxSkLayer: true, FzdxLayer: false, WataLayer: false, diff --git a/src/models/map/layout.js b/src/models/map/layout.js index e0ab70f..994f72f 100644 --- a/src/models/map/layout.js +++ b/src/models/map/layout.js @@ -81,9 +81,9 @@ export default function calcLayout(view, rightStack, hidePanels) { } else if (view === 205) { left = [ { key: '天气' }, - { key: '天气预报', style: { flexShink: 0 } }, - { key: '预警', style: { height: '20rem', flexGrow: 1 } }, - { key: '防汛调度', style: { height: '20rem', flexGrow: 1 } }, + { key: '天气预报', style: { flexShink: 1,height:'40%' } }, + // { key: '预警', style: { height: '20rem', flexGrow: 1 } }, + { key: '防汛调度', style: { height:'40%', flexGrow: 1 } }, ]; leftFullHeight = true; } else if (view === 206) { @@ -226,9 +226,9 @@ export default function calcLayout(view, rightStack, hidePanels) { ] //rightFullHeight = true; } else if (view === 4) { - right = [ - { key: '警报' }, - ] + // right = [ + // { key: '警报' }, + // ] } else if (view === 5) { right = [ { key: '警报' }, @@ -261,8 +261,9 @@ export default function calcLayout(view, rightStack, hidePanels) { ]; } else if (view === 205) { right = [ - { key: '预演方案', style: { height: '30%', flexGrow: 1 } }, - { key: '防汛预演结果', style: { height: '70%', flexGrow: 1 } }, + { key: '水库预案', style: { height: '30%', flexGrow: 1 } }, + { key: '调度结果', style: { height: '70%', flexGrow: 1 } }, + { key: '方案对比', style: { height: '30%', flexGrow: 1 } }, ]; } else if (view === 206) { right = [ diff --git a/src/models/runtime/index.js b/src/models/runtime/index.js index b80918f..18b093d 100644 --- a/src/models/runtime/index.js +++ b/src/models/runtime/index.js @@ -14,8 +14,10 @@ function initState() { layerSetting: { }, yyObj: {}, + duibifxNum:[], shkshObj:undefined, - gwobj:undefined, + gwobj: undefined, + point:undefined, markers: {}, // type -> [{ id, lgtd, lttd, elev }] scya:undefined, warnresp: {}, @@ -32,8 +34,14 @@ const runtime = { setYyfa(state, props) { return { ...state, yyObj: props } }, + setDuibifx(state, props) { + return { ...state, duibifxNum: props } + }, setShksh(state, props) { return { ...state, shkshObj: props } + }, + setPoint(state, props) { + return { ...state, point: props } }, setGwtc(state, props) { return { ...state, gwobj: props } diff --git a/src/views/Home/InfoDlg/HistoryYyDlg/VideoCom.js b/src/views/Home/InfoDlg/HistoryYyDlg/VideoCom.js new file mode 100644 index 0000000..a003f60 --- /dev/null +++ b/src/views/Home/InfoDlg/HistoryYyDlg/VideoCom.js @@ -0,0 +1,160 @@ +import React, { useState, useRef } from 'react'; +import { + IconButton, + Slider, + Box, +} from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; + +import PlayArrowIcon from '@material-ui/icons/PlayArrow'; +import PauseIcon from '@material-ui/icons/Pause'; + +const useStyles = makeStyles((theme) => ({ + root: { + position: 'relative', + width: '100%', + height: '100%', + backgroundColor: '#000', + }, + videoContainer: { + width: '100%', + height: '100%', + '& video': { + width: '100%', + height: '100%', + objectFit: 'cover', + }, + }, + controls: { + position: 'absolute', + bottom: 0, + left: 0, + right: 0, + padding: theme.spacing(1, 2), + background: 'linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%)', + display: 'flex', + alignItems: 'center', + gap: theme.spacing(2), + }, + playButton: { + color: '#fff', + '&:hover': { + backgroundColor: 'rgba(255,255,255,0.1)', + }, + }, + slider: { + color: '#1976d2', + flex: 1, + '& .MuiSlider-rail': { + backgroundColor: 'rgba(255,255,255,0.3)', + }, + '& .MuiSlider-track': { + backgroundColor: '#1976d2', + }, + '& .MuiSlider-thumb': { + width: 12, + height: 12, + backgroundColor: '#fff', + '&:hover, &.Mui-focusVisible': { + boxShadow: '0 0 0 8px rgba(25,118,210,0.16)', + }, + }, + }, + timeDisplay: { + color: '#fff', + fontSize: '0.875rem', + minWidth: 100, + textAlign: 'right', + }, + dateDisplay: { + position: 'absolute', + top: theme.spacing(2), + left: theme.spacing(2), + color: '#fff', + fontSize: '1.25rem', + fontWeight: 500, + textShadow: '1px 1px 2px rgba(0,0,0,0.5)', + }, +})); + +const VideoPlayer = ({ videoUrl, date }) => { + const classes = useStyles(); + const [playing, setPlaying] = useState(false); + const [progress, setProgress] = useState(0); + const [currentTime, setCurrentTime] = useState(0); + const [duration, setDuration] = useState(0); + const videoRef = useRef(null); + + const handlePlayPause = () => { + if (playing) { + videoRef.current.pause(); + } else { + videoRef.current.play(); + } + setPlaying(!playing); + }; + + const handleTimeUpdate = () => { + const video = videoRef.current; + if (video) { + const progress = (video.currentTime / video.duration) * 100; + setProgress(progress); + setCurrentTime(video.currentTime); + } + }; + + const handleLoadedMetadata = () => { + setDuration(videoRef.current.duration); + }; + + const handleSliderChange = (event, newValue) => { + const time = (newValue / 100) * duration; + videoRef.current.currentTime = time; + setProgress(newValue); + }; + + const formatTime = (time) => { + const minutes = Math.floor(time / 60); + const seconds = Math.floor(time % 60); + return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; + }; + + return ( +
+
+ +
+ +
+ {date} +
+ +
+ + {playing ? : } + + + + + + {formatTime(currentTime)} / {formatTime(duration)} + +
+
+ ); +}; + +export default VideoPlayer; \ No newline at end of file diff --git a/src/views/Home/InfoDlg/HistoryYyDlg/fxyb.js b/src/views/Home/InfoDlg/HistoryYyDlg/fxyb.js new file mode 100644 index 0000000..053c1a4 --- /dev/null +++ b/src/views/Home/InfoDlg/HistoryYyDlg/fxyb.js @@ -0,0 +1,264 @@ +import React from 'react'; +import { + Table, + Typography, + Box, + Paper, + Grid, + makeStyles +} from '@material-ui/core'; + +const useStyles = makeStyles((theme) => ({ + root: { + padding: theme.spacing(2), + }, + section: { + marginBottom: theme.spacing(3), + }, + title: { + color: '#1976d2', + marginBottom: theme.spacing(2), + display: 'flex', + alignItems: 'center', + '&::before': { + content: '""', + width: 4, + height: 16, + backgroundColor: '#1976d2', + marginRight: theme.spacing(1), + }, + }, + table: { + minWidth: 400, + '& th': { + // backgroundColor: '#f5f5f5', + fontWeight: 'bold', + textAlign: 'left', + + }, + }, + statusChip: { + padding: '2px 8px', + borderRadius: 4, + display: 'inline-block', + textAlign: 'center', + width: 50, + }, + danger: { + backgroundColor: '#ffebee', + color: '#d32f2f', + }, + warning: { + backgroundColor: '#fff3e0', + color: '#ef6c00', + }, + info: { + backgroundColor: '#e3f2fd', + color: '#1976d2', + }, + statItem: { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + flexDirection: 'column', + padding: theme.spacing(2), + '& .icon': { + fontSize: 40, + color: '#1976d2', + marginBottom: theme.spacing(1), + }, + '& .value': { + fontSize: 24, + color: '#1976d2', + fontWeight: 'bold', + }, + '& .label': { + color: '#fff', + width: 130, + marginLeft:30 + }, + }, +})); + +// 测试数据 +const townData = [ + { + name: '七里坪社区', + district: '七里坪社区', + manager: '谢磊', + population: 35, + riskLevel: '危险', + }, + { + name: '七里坪社区', + district: '七里坪社区', + manager: '刘家军', + population: 24, + riskLevel: '警戒', + }, + { + name: '七里坪社区', + district: '七里坪社区', + manager: '刘家军', + population: 49, + riskLevel: '关注', + }, +]; + +const enterpriseData = [ + { + name: '国电广润', + department: '', + manager: '谢磊', + affectedPopulation: 44, + riskLevel: '危险', + }, + { + name: '建始七里', + department: '', + manager: '刘家军', + affectedPopulation: 22, + riskLevel: '警戒', + }, + { + name: '建始县业', + department: '', + manager: '刘家军', + affectedPopulation: 50, + riskLevel: '关注', + }, +]; + +const statistics = { + floodArea: 3.57, + affectedVillages: 2, + affectedHouseholds: 310, + affectedPopulation: 940, +}; + +const FloodImpactMonitor = () => { + const classes = useStyles(); + + const getRiskLevelStyle = (level) => { + switch (level) { + case '危险': + return classes.danger; + case '警戒': + return classes.warning; + case '关注': + return classes.info; + default: + return ''; + } + }; + + return ( +
+
+ + 城镇、集镇、村庄 + + + + + + + + + + + + + + {townData.map((item, index) => ( + + + + + + + + ))} + +
名称所属乡镇负责人人口数风险等级
{item.name}{item.district}{item.manager}{item.population} + + {item.riskLevel} + +
+ +
+ +
+ + 企事业单位影响情况 + + + + + + + + + + + + + + {enterpriseData.map((item, index) => ( + + + + + + + + ))} + +
基础设施名称所属行政单元负责人影响人数风险等级
{item.name}{item.department}{item.manager}{item.affectedPopulation} + + {item.riskLevel} + +
+ +
+ +
+ + 汛情统计 + + + + + 🌊 + {statistics.floodArea} + 淹没面积(km²) + + + + + 🏘️ + {statistics.affectedVillages} + 影响村庄(个) + + + + + 🏠 + {statistics.affectedHouseholds} + 影响户数(户) + + + + + 👥 + {statistics.affectedPopulation} + 影响人口(人) + + + +
+
+ ); +}; + +export default FloodImpactMonitor; \ No newline at end of file diff --git a/src/views/Home/InfoDlg/HistoryYyDlg/historyYy.js b/src/views/Home/InfoDlg/HistoryYyDlg/historyYy.js new file mode 100644 index 0000000..2ff0c87 --- /dev/null +++ b/src/views/Home/InfoDlg/HistoryYyDlg/historyYy.js @@ -0,0 +1,75 @@ +import React from 'react'; +import { Card, CardContent, Typography, Button, Box,Grid, Chip } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; + +const useStyles = makeStyles(() => ({ + card: { + marginBottom: '16px', + // backgroundColor: '#fff', + '&:hover': { + boxShadow: '0 4px 12px rgba(0,0,0,0.1)' + } + }, + statusChip: { + position: 'absolute', + right: '-10px', + top: '-30px', + backgroundColor: '#52c41a', + color: '#fff' + }, + label: { + color: '#73ade8', + width: '80px', + display: 'inline-block' + }, + value: { + color: '#fff', + }, + buttons: { + marginTop: '16px', + '& .MuiButton-root': { + marginLeft: '8px' + } + } +})); + +const WarningCard = ({ data, onDelete, onAddPlan }) => { + const classes = useStyles(); + + return ( + + + + + {data.title} + + + + + + 预演类别: + {data.type} + + + 风险隐患: + {data.risk} + + + 预演时段: + {data.timeRange} + + + 生成时间: + {data.createTime} + + + 创建人: + + + + + + ); +}; + +export default WarningCard; \ No newline at end of file diff --git a/src/views/Home/InfoDlg/HistoryYyDlg/historyYyBottom.js b/src/views/Home/InfoDlg/HistoryYyDlg/historyYyBottom.js new file mode 100644 index 0000000..f7d8213 --- /dev/null +++ b/src/views/Home/InfoDlg/HistoryYyDlg/historyYyBottom.js @@ -0,0 +1,63 @@ +import React from 'react'; +import { Card, CardContent, Typography, Button, Box,Grid, Chip } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; + +const useStyles = makeStyles(() => ({ + card: { + marginBottom: '16px', + // backgroundColor: '#fff', + '&:hover': { + boxShadow: '0 4px 12px rgba(0,0,0,0.1)' + } + }, + statusChip: { + position: 'absolute', + right: '-10px', + top: '-30px', + backgroundColor: '#52c41a', + color: '#fff' + }, + label: { + color: '#73ade8', + width: '80px', + display: 'inline-block' + }, + value: { + color: '#fff', + }, + buttons: { + marginTop: '16px', + '& .MuiButton-root': { + marginLeft: '8px' + } + } +})); + +const WarningCard = ({ data, onDelete, onAddPlan }) => { + const classes = useStyles(); + + return ( + + + + + {data.title} + + + + + + 情景类别: + {data.status} + + + 风险隐患: + {data.risk} + + + + + ); +}; + +export default WarningCard; \ No newline at end of file diff --git a/src/views/Home/InfoDlg/HistoryYyDlg/index.js b/src/views/Home/InfoDlg/HistoryYyDlg/index.js new file mode 100644 index 0000000..d84c2bd --- /dev/null +++ b/src/views/Home/InfoDlg/HistoryYyDlg/index.js @@ -0,0 +1,74 @@ +import React from 'react'; +import DpTab from '../../../../layouts/mui/DpTab'; +import Dialog from '@material-ui/core/Dialog'; +import DialogContent from '@material-ui/core/DialogContent'; +import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent'; +import DpTabs from '../../../../layouts/mui/DpTabs'; +import DpAppBar from '../../../../layouts/mui/DpAppBar'; +import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop'; +import DpCloseButton from '../../../../layouts/mui/DpCloseButton'; +import WarningCard from './historyYy' +import WarningCardBottom from './historyYyBottom'; +import WarningRight from './rightYy'; +import VideoPlayer from './VideoCom' +import './index.less' +function HDStDlg({ record, onClose }) { + const [value, setValue] = React.useState(0); + const warnObj = { + id: 1, + title: '2024年12月10日-降雨叠加50mm-无隐患', + type: '现在时', + risk: '余家河无隐患', + timeRange: '2024-12-10 10:00:00至2024-12-10 18:00:00', + status: '实测降雨+无隐患', + createTime: '2024-12-10 16:24:16' + } + return ( + +
+ + + setValue(v)}> + + + + +
+
+ + + +
+
+ + {/* */} +
+
+ + +
+
+ {/* */} + +
+ + ) +} + +export default React.memo(HDStDlg); diff --git a/src/views/Home/InfoDlg/HistoryYyDlg/index.less b/src/views/Home/InfoDlg/HistoryYyDlg/index.less new file mode 100644 index 0000000..1821544 --- /dev/null +++ b/src/views/Home/InfoDlg/HistoryYyDlg/index.less @@ -0,0 +1,6 @@ +.yy-left,.yy-right{ + width:450px +} +.yy-middle{ + width: 1000px; +} \ No newline at end of file diff --git a/src/views/Home/InfoDlg/HistoryYyDlg/rightYy.js b/src/views/Home/InfoDlg/HistoryYyDlg/rightYy.js new file mode 100644 index 0000000..1bf6950 --- /dev/null +++ b/src/views/Home/InfoDlg/HistoryYyDlg/rightYy.js @@ -0,0 +1,224 @@ +import React from 'react'; +import { + Box, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + Paper, + Tabs, + Tab, + Typography, + makeStyles +} from '@material-ui/core'; +import Fxyb from './fxyb'; + + +const useStyles = makeStyles((theme) => ({ + root: { + width: '100%', + backgroundColor: 'transparent', + color: '#fff' + }, + tabs: { + borderBottom: '1px solid rgba(255, 255, 255, 0.12)', + '& .MuiTab-root': { + color: '#fff', + '&.Mui-selected': { + color: '#2196f3' + } + }, + '& .MuiTabs-indicator': { + backgroundColor: '#2196f3' + } + }, + table: { + backgroundColor: 'transparent', + '& .MuiTableCell-root': { + color: '#fff', + borderColor: 'rgba(255, 255, 255, 0.12)' + } + }, + statsContainer: { + marginTop: theme.spacing(2), + backgroundColor: 'rgba(0, 0, 0, 0.2)', + borderRadius: theme.shape.borderRadius, + padding: theme.spacing(2) + }, + statsRow: { + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + marginBottom: theme.spacing(1) + }, + warningCell: { + backgroundColor: 'rgba(156, 39, 176, 0.3)' + }, + yearLabel: { + backgroundColor: '#1976d2', + padding: '2px 2px', + borderRadius: 12, + fontSize: '0.75rem' + }, + title: { + color: '#1976d2', + marginBottom: theme.spacing(2), + marginTop: 10, + marginLeft:20, + display: 'flex', + alignItems: 'center', + '&::before': { + content: '""', + width: 4, + height: 16, + backgroundColor: '#1976d2', + marginRight: theme.spacing(1), + }, + }, +})); +const RainfallMonitor = () => { + const rainfallList = [ + { + time: '2020-07-25 00:00:00', + rainfall: 1.5, + magnified: 3, + simulated: 4.5 + }, + { + time: '2020-07-25 01:00:00', + rainfall: 1.5, + magnified: 3, + simulated: 4.5 + }, + { + time: '2020-07-25 02:00:00', + rainfall: 4.5, + magnified: 9, + simulated: 13.5 + }, + { + time: '2020-07-25 03:00:00', + rainfall: 1.5, + magnified: 3, + simulated: 4.5 + }, + { + time: '2020-07-25 04:00:00', + rainfall: 1.5, + magnified: 3, + simulated: 4.5 + }, + { + time: '2020-07-25 05:00:00', + rainfall: 0, + magnified: 0, + simulated: 0 + }, + { + time: '2020-07-25 06:00:00', + rainfall: 1.5, + magnified: 3, + simulated: 4.5 + }, + { + time: '2020-07-25 07:00:00', + rainfall: 1.5, + magnified: 3, + simulated: 4.5 + }, + { + time: '2020-07-25 08:00:00', + rainfall: 3, + magnified: 6, + simulated: 9 + }, + + ]; + const classes = useStyles(); + const [tabValue, setTabValue] = React.useState(0); + + const handleTabChange = (event, newValue) => { + setTabValue(newValue); + }; + + return ( + + + + + + + { + tabValue == 0 ? <> + + + 降雨预测 + + + + + 时间 + 面雨量(mm) + 放大量(mm) + 预演面雨量(mm) + + + + {/* 这里添加实际的降雨数据行 */} + {rainfallList.map((row) => ( + +
{row.time}
 + {row.rainfall} + {row.magnified} + {row.simulated} + + ))} + +
+ + + + + + {['1小时', '3小时', '6小时', '12小时', '24小时'].map((period) => ( + {period} + ))} + + +
最大雨量重现期统计
 + {[265.5, 591, 943.5, 1311.6, 1451.7].map((value, index) => ( + + {value} + + ))} + + + + {['>102.0', '>125.0', '>141.0', '>163.0', '>188.0'].map((threshold, index) => ( + + {threshold} + 100年一遇 + + ))} + + + : + } + + + + + + ); +}; + +export default RainfallMonitor; \ No newline at end of file diff --git a/src/views/Home/InfoDlg/YascDlg/index.js b/src/views/Home/InfoDlg/YascDlg/index.js new file mode 100644 index 0000000..c38c29f --- /dev/null +++ b/src/views/Home/InfoDlg/YascDlg/index.js @@ -0,0 +1,39 @@ +import React from 'react'; +import DpTab from '../../../../layouts/mui/DpTab'; +import Dialog from '@material-ui/core/Dialog'; +import DialogContent from '@material-ui/core/DialogContent'; +import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent'; +import DpTabs from '../../../../layouts/mui/DpTabs'; +import DpAppBar from '../../../../layouts/mui/DpAppBar'; +import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop'; +import DpCloseButton from '../../../../layouts/mui/DpCloseButton'; +import Zdya from './zdscya' +function HDStDlg({ record, onClose }) { + const [value, setValue] = React.useState(0); + + return ( + +
+ + + setValue(v)}> + + + + + + + +
+ + ) +} + +export default React.memo(HDStDlg); diff --git a/src/views/Home/InfoDlg/YascDlg/zdscya.js b/src/views/Home/InfoDlg/YascDlg/zdscya.js new file mode 100644 index 0000000..4536d39 --- /dev/null +++ b/src/views/Home/InfoDlg/YascDlg/zdscya.js @@ -0,0 +1,214 @@ +import React, { useState } from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Checkbox, TextField } from '@material-ui/core'; +import { Empty } from 'antd' + +const useStyles = makeStyles((theme) => ({ + root: { + backgroundColor: 'transparent', + color: '#c9d1d9', + padding: theme.spacing(2), + }, + title: { + color: '#58a6ff', + marginBottom: theme.spacing(2), + fontSize: '1rem', + display: 'flex', + alignItems: 'center', + '&::before': { + content: '""', + width: 4, + height: 16, + backgroundColor: '#58a6ff', + marginRight: theme.spacing(1), + }, + }, + table: { + backgroundColor: 'transparent', + '& .MuiTableCell-root': { + borderColor: '#30363d', + color: '#c9d1d9', + padding: theme.spacing(1), + }, + }, + addButton: { + backgroundColor: '#1f6feb', + color: '#ffffff', + border: 'none', + padding: '4px 12px', + borderRadius: 6, + cursor: 'pointer', + '&:hover': { + backgroundColor: '#388bfd', + }, + }, + checkboxLabel: { + display: 'flex', + alignItems: 'center', + gap: theme.spacing(1), + }, + weightInput: { + width: 80, + '& .MuiInputBase-root': { + color: '#c9d1d9', + backgroundColor: '#21262d', + }, + }, +})); + +const SchemeOptimization = () => { + const classes = useStyles(); + const [reservoirs, setReservoirs] = useState([ + { name: '浮标河水库', safeLevel: 64.80, storage: 16110, maxOutflow: 20.00 }, + { name: '明山水库', safeLevel: 93.00, storage: 5116, maxOutflow: 20.00 }, + ]); + + const [schemes, setSchemes] = useState([ + { id: 1, floodArea: 0.15, duration: 1320.0, households: 20, population: 100 }, + { id: 2, floodArea: 0.12, duration: 1235.0, households: 20, population: 100 }, + { id: 3, floodArea: 0.14, duration: 1350.0, households: 20, population: 100 }, + ]); + + const checkData = [ + { + id:1, + name: '最小化下游最大流量', + checked: true, + + }, + { + id:2, + name: '最小化水库最高水位', + checked:true + }, + { + id:3, + name: '最大化防洪库容利用率', + checked:false + }, + { + id:4, + name: '最小化淹没损失', + checked:false + }, + { + id:5, + name: '最小化调度操作次数', + checked:false + } + ] + const [data, setData] = useState(checkData) + const changeSw = (e, id) => { + const checked = e.target.checked + const data1 = checkData.map(item => { + if (item.id == id) { + item.checked = checked; + } + return item + }) + setData(data1) + } + const [inputData, setInputData] = useState('') + const inputChange = (e, i) =>{ + const val = e.target.value + setInputData(val) + } + const [renderT, setRenderT] = useState(false) + const fasc = () => { + if (inputData) { + setRenderT(true) + } +} + return ( +
+
+
+
约束条件配置
+ + + + + 水库名称 + 安全水位(m) + 防洪库容(万m³) + 最大泄量(m³/s) + 操作 + + + + {reservoirs.map((reservoir) => ( + + {reservoir.name} + {reservoir.safeLevel} + {reservoir.storage} + {reservoir.maxOutflow} + × + + ))} + +
+ + +
+
+
优化目标设置及权重分配
+
+
+ { + data.map(item => ( +
+ changeSw(e,item.id)}/> + {item.name} + { + item.checked && inputChange(e,item.id)} /> + } + +
+ )) + } + +
+
+
+ +
+
+
方案预览区
+ + + + + + 方案 + 淹没面积(km²) + 淹没历时(min) + 影响户数 + 影响人口 + 操作 + + + + {renderT ?schemes.map((scheme) => ( + + 方案{scheme.id} + {scheme.floodArea} + {scheme.duration} + {scheme.households} + {scheme.population} + + + + + + )) : null + // 暂无数据} /> + } + +
+ +
+
+ ); +}; + +export default SchemeOptimization; \ No newline at end of file diff --git a/src/views/Home/InfoDlg/index.js b/src/views/Home/InfoDlg/index.js index 5cffe11..4534229 100644 --- a/src/views/Home/InfoDlg/index.js +++ b/src/views/Home/InfoDlg/index.js @@ -32,6 +32,8 @@ import PdfDlg from './PdfDlg' import SyjcDlg from './SyjcDlg' import SljcDlg from './SljcDlg' import BjDlg from './BjDlg' +import HistoryYyDlg from './HistoryYyDlg'; +import YascDlg from './YascDlg'; function InfoDlg() { @@ -107,7 +109,11 @@ function InfoDlg() { return }else if (layerId === 'BjLayer') { return - } + }else if (layerId === 'lsyyLayer') { + return + } else if (layerId === 'YuananLayer') { + return + } return null; diff --git a/src/views/Home/InfoPops/RealDrpPop/DrpChart.js b/src/views/Home/InfoPops/RealDrpPop/DrpChart.js index a922d90..9552447 100644 --- a/src/views/Home/InfoPops/RealDrpPop/DrpChart.js +++ b/src/views/Home/InfoPops/RealDrpPop/DrpChart.js @@ -22,6 +22,184 @@ const useStyles = makeStyles({ }) function DrpChart({ record }) { + + const demoData = [ + { + "tm": "2025-06-03 09:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 12, + "year": "2025" + }, + { + "tm": "2025-06-03 10:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 9, + "year": "2025" + }, + { + "tm": "2025-06-03 11:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 11, + "year": "2025" + }, + { + "tm": "2025-06-03 12:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 8, + "year": "2025" + }, + { + "tm": "2025-06-03 13:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 12, + "year": "2025" + }, + { + "tm": "2025-06-03 14:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 10, + "year": "2025" + }, + { + "tm": "2025-06-03 15:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 7, + "year": "2025" + }, + { + "tm": "2025-06-03 16:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 11, + "year": "2025" + }, + { + "tm": "2025-06-03 17:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 12, + "year": "2025" + }, + { + "tm": "2025-06-03 18:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 9, + "year": "2025" + }, + { + "tm": "2025-06-03 19:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 11, + "year": "2025" + }, + { + "tm": "2025-06-03 20:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 8, + "year": "2025" + }, + { + "tm": "2025-06-03 21:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 13, + "year": "2025" + }, + { + "tm": "2025-06-03 22:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 10, + "year": "2025" + }, + { + "tm": "2025-06-03 23:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 11, + "year": "2025" + }, + { + "tm": "2025-06-04 00:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 12, + "year": "2025" + }, + { + "tm": "2025-06-04 01:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 9, + "year": "2025" + }, + { + "tm": "2025-06-04 02:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 11, + "year": "2025" + }, + { + "tm": "2025-06-04 03:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 8, + "year": "2025" + }, + { + "tm": "2025-06-04 04:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 13, + "year": "2025" + }, + { + "tm": "2025-06-04 05:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 10, + "year": "2025" + }, + { + "tm": "2025-06-04 06:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 12, + "year": "2025" + }, + { + "tm": "2025-06-04 07:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 12, + "year": "2025" + }, + { + "tm": "2025-06-04 08:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 12, + "year": "2025" + }, + { + "tm": "2025-06-04 09:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 8, + "year": "2025" + } +] const [data, setData] = useState([]); const classes = useStyles(); @@ -30,7 +208,8 @@ function DrpChart({ record }) { useEffect(() => { drpSearch(record.type, record.stcd, 'h', resultTm, record.countycode).then((data) => { - setData(data || []); + const newData = record.test ? demoData : data; + setData(newData || []); }); }, []) @@ -203,7 +382,7 @@ function DrpChart({ record }) { 上报时间: {record.tm ? moment(record.tm).format('YYYY-MM-DD HH:mm:ss') : '-'}
{ - ['h1', 'h3', 'h6', 'h12', 'h24', 'h48'].map(key => ( + ['h1', 'h3', 'h6', 'h12', 'h24'].map(key => (
{key} {renderDrp(record, key)} diff --git a/src/views/Home/MapCtrl/mapstyle/layermgr.js b/src/views/Home/MapCtrl/mapstyle/layermgr.js index e3d6c14..4c613db 100644 --- a/src/views/Home/MapCtrl/mapstyle/layermgr.js +++ b/src/views/Home/MapCtrl/mapstyle/layermgr.js @@ -31,6 +31,8 @@ import ShuizhiLayer from "./shuizhilayer" import TrsqLayer from "./trsqlayer" import ShuichangLayer from "./shuichangLayer" import ShuiyuandiLayer from "./shuiyuandiLayer" +import ShuikuLayer from "./shuikuLayer" +import RainDrpLayer from "./rainDrpLayer" @@ -60,6 +62,9 @@ class LayerMgr { this.layers.push(new TrsqLayer()); this.layers.push(new ShuichangLayer()); this.layers.push(new ShuiyuandiLayer()); + this.layers.push(new ShuikuLayer()); + this.layers.push(new RainDrpLayer()); + // @@ -196,6 +201,9 @@ class LayerMgr { this.layerMap.TrsqLayer.getStyle(), this.layerMap.ShuichangLayer.getStyle(), this.layerMap.ShuiyuandiLayer.getStyle(), + this.layerMap.ShuikuLayer.getStyle(), + this.layerMap.RainDrpLayer.getStyle(), + // diff --git a/src/views/Home/MapCtrl/mapstyle/rainDrpLayer.js b/src/views/Home/MapCtrl/mapstyle/rainDrpLayer.js new file mode 100644 index 0000000..7e02e99 --- /dev/null +++ b/src/views/Home/MapCtrl/mapstyle/rainDrpLayer.js @@ -0,0 +1,120 @@ +import clone from "clone"; +import { PicStPromise, TestPicStPromise } from "../../../../models/_/real"; +import { parseGeoJSON } from "../../../../utils/tools"; +import { InfoPopNames } from "../../InfoPops"; +import BaseLayer from "./baselayer"; + +const SourceName = '实时雨量1'; + +const ShapeStyle = { + id: SourceName, + type: 'symbol', + source: SourceName, + layout: { + 'icon-allow-overlap': true, + 'text-allow-overlap': true, + 'icon-image': '实时雨量1', + 'icon-size': [ + 'interpolate', ['linear'], ['zoom'], + 10, 0.4, + 14, 0.8, + ], + + 'text-allow-overlap': true, + 'text-size': [ + 'interpolate', ['linear'], ['zoom'], + 10, 10, + 14, 14, + ], + 'text-font': ['Roboto Black'], + 'text-field': [ + 'step', + ['zoom'], + '', + 12, ['get', 'stnm'] + ], + 'text-anchor': 'top', + 'text-offset': [0, 1], + + 'visibility': 'none', + }, + paint: { + 'text-color': '#fff' + } +}; + + +const page1 = [{ + "stcd": "61612910", + "stnm": "桃林河(阎河)", + test:1, + "adcd": "421181000000000", + "wscd": null, + "importancy": 0, + "lgtd": 115.087777777, + "lttd": 31.164444444, + "elev": null, + "hasRz": true, + "type": "sh", + "today": 7, + "h1": 3, + "h3": 4, + "h6": 6, + "h12": 7, + "h24": 12, + "h48": 19.5, + "tm": "2025-06-03T02:10:00.000Z", + "state": 1, + "warning": 0 + }] + +export default class RainDrpLayer extends BaseLayer { + + static LayerName = 'RainDrpLayer'; + + static SourceName = SourceName; + + getStyle() { + + const ret = clone(ShapeStyle); + this._setStyleVisibility(ret); + return ret; + + } + + getName() { + return RainDrpLayer.LayerName; + } + + getSubLayers() { + return [ShapeStyle.id]; + } + + async doRefreshLayer(mapCtrl) { + const ms = mapCtrl.getSource(SourceName); + + let data = + // await PicStPromise.get(); + [...page1].map((item)=>{ + const obj = {...item} + obj.lgtd = item.lgtd + obj.lttd = item.lttd + return obj + }) + ms.setData(parseGeoJSON(data)); + return true; + } + + getFeatureTip(record) { + return ''; + } + + featureClicked(properties, dispatch) { + dispatch.runtime.setFeaturePop({ + type: InfoPopNames.RealDrpPop, + properties, + coordinates: [properties.lgtd, properties.lttd], + offsetPop: true, + }); + } +} diff --git a/src/views/Home/MapCtrl/mapstyle/realdrplayer.js b/src/views/Home/MapCtrl/mapstyle/realdrplayer.js index ff8e2aa..66881b8 100644 --- a/src/views/Home/MapCtrl/mapstyle/realdrplayer.js +++ b/src/views/Home/MapCtrl/mapstyle/realdrplayer.js @@ -4,7 +4,7 @@ import { DRP_COLORS } from "../../../../utils/renutils"; import { parseGeoJSON } from "../../../../utils/tools"; import { InfoPopNames } from "../../InfoPops"; import BaseLayer from "./baselayer"; - +import { useSelector } from "react-redux"; const SourceName = '实时雨量'; function circleColor({ drplabel }) { @@ -149,6 +149,33 @@ export default class RealDrpLayer extends BaseLayer { if (Array.isArray(data)) { data = data.filter(o => o.type !== 'sk'); } + const point = sessionStorage.getItem('item'); + const upData = [ + // ...data, + { + "stcd": "61612910", + "stnm": "桃林河(阎河)", + "adcd": "421181000000000", + "wscd": null, + "importancy": 0, + "lgtd": 115.087777777, + "lttd": 31.164444444, + "elev": null, + "hasRz": true, + "type": "sh", + "today": 7, + "h1": 3, + "h3": 4, + "h6": 6, + "h12": 7, + "h24": 12, + "h48": 19.5, + "tm": "2025-06-03T02:10:00.000Z", + "state": 1, + "warning": 0 + }, + ] + const newData = point ? upData:data ms.setData(parseGeoJSON(data)); return true; } diff --git a/src/views/Home/MapCtrl/mapstyle/realsklayer.js b/src/views/Home/MapCtrl/mapstyle/realsklayer.js index 2af3c84..9d192f1 100644 --- a/src/views/Home/MapCtrl/mapstyle/realsklayer.js +++ b/src/views/Home/MapCtrl/mapstyle/realsklayer.js @@ -113,7 +113,7 @@ export default class RealSkLayer extends BaseLayer { o.strarz = strarz.toFixed(2); } }); - + data = [...data, { aRz: -15.38, a_fsltdz: null, @@ -147,7 +147,52 @@ export default class RealSkLayer extends BaseLayer { type2: "swsk", wscd: null, zcxsw: 231, - }] + }, + { + "stcd": "716113701", + "type": "sk", + "hasRz": true, + "stnm": "永红水库", + "adcd": "421181105000", + "wscd": null, + "importancy": 0, + "lgtd": 115.120278, + "lttd": 31.183611, + "elev": 0, + "damel": 131.99, + "dsflz": 130.56, + "fsltdz": 129.9, + "ddz": 113.5, + "zcxsw": 129.9, + "drpTm": "2025-04-11T06:00:00.000Z", + "today": 0, + "h1": 0, + "h3": 0, + "h6": 0, + "h12": 0, + "h24": 0, + "h48": 0, + "drpState": 2, + "rz": 130.15, + "w": 0.444, + "a_fsltdz": -10.75, + "rzTm": "2025-04-11T06:00:00.000Z", + "rzWarning": 0, + "rzState": 2, + "pic": [ + { + "stcd": "716113701", + "tm": "2023-11-16T11:19:00.000Z", + "url": "http://223.75.53.106:8891/skjgimages/2023/1116/716113701/20231116191900.jpg" + }, + { + "stcd": "716113701", + "tm": "2023-11-16T09:05:00.000Z", + "url": "http://223.75.53.106:8891/skjgimages/2023/1116/716113702/20231116170500.jpg" + } + ] + }, + ] } const list = data.filter(o=>{ if(o.stnm==='青山垸水库'||o.stnm==='七角尖水库'||o.stnm==='杨树庵水库'||o.stnm==='石鼓庙水库'||o.stnm==='张家凹水库'||o.stnm==='大坳水库'){ diff --git a/src/views/Home/MapCtrl/mapstyle/shuikuLayer.js b/src/views/Home/MapCtrl/mapstyle/shuikuLayer.js new file mode 100644 index 0000000..03640c5 --- /dev/null +++ b/src/views/Home/MapCtrl/mapstyle/shuikuLayer.js @@ -0,0 +1,140 @@ +import clone from "clone"; +import { PicStPromise, TestPicStPromise } from "../../../../models/_/real"; +import { parseGeoJSON } from "../../../../utils/tools"; +import { InfoPopNames } from "../../InfoPops"; +import BaseLayer from "./baselayer"; + +const SourceName = '水库1'; + +const ShapeStyle = { + id: SourceName, + type: 'symbol', + source: SourceName, + layout: { + 'icon-allow-overlap': true, + 'text-allow-overlap': true, + 'icon-image': '水库1', + 'icon-size': [ + 'interpolate', ['linear'], ['zoom'], + 10, 0.4, + 14, 0.8, + ], + + 'text-allow-overlap': true, + 'text-size': [ + 'interpolate', ['linear'], ['zoom'], + 10, 10, + 14, 14, + ], + 'text-font': ['Roboto Black'], + 'text-field': [ + 'step', + ['zoom'], + '', + 12, ['get', 'stnm'] + ], + 'text-anchor': 'top', + 'text-offset': [0, 1], + + 'visibility': 'none', + }, + paint: { + 'text-color': '#fff' + } +}; + +const page1 = [{ + "stcd": "716113701", + "type": "sk", + "hasRz": true, + "stnm": "永红水库", + "adcd": "421181105000", + "wscd": null, + "importancy": 0, + "lgtd": 115.120278, + "lttd": 31.183611, + "elev": 0, + "damel": 131.99, + "dsflz": 130.56, + "fsltdz": 129.9, + "ddz": 113.5, + "zcxsw": 129.9, + "drpTm": "2025-04-11T06:00:00.000Z", + "today": 0, + "h1": 0, + "h3": 0, + "h6": 0, + "h12": 0, + "h24": 0, + "h48": 0, + "drpState": 2, + "rz": 130.15, + "w": 0.444, + "a_fsltdz": -10.75, + "rzTm": "2025-04-11T06:00:00.000Z", + "rzWarning": 0, + "rzState": 2, + "pic": [ + { + "stcd": "716113701", + "tm": "2023-11-16T11:19:00.000Z", + "url": "http://223.75.53.106:8891/skjgimages/2023/1116/716113701/20231116191900.jpg" + }, + { + "stcd": "716113701", + "tm": "2023-11-16T09:05:00.000Z", + "url": "http://223.75.53.106:8891/skjgimages/2023/1116/716113702/20231116170500.jpg" + } + ] + }] + +export default class ShuikuLayer extends BaseLayer { + + static LayerName = 'ShuikuLayer'; + + static SourceName = SourceName; + + getStyle() { + + const ret = clone(ShapeStyle); + this._setStyleVisibility(ret); + return ret; + + } + + getName() { + return ShuikuLayer.LayerName; + } + + getSubLayers() { + return [ShapeStyle.id]; + } + + async doRefreshLayer(mapCtrl) { + const ms = mapCtrl.getSource(SourceName); + + let data = + // await PicStPromise.get(); + [...page1].map((item)=>{ + const obj = {...item} + obj.lgtd = item.lgtd + obj.lttd = item.lttd + return obj + }) + ms.setData(parseGeoJSON(data)); + return true; + } + + getFeatureTip(record) { + return ''; + } + + featureClicked(properties, dispatch) { + dispatch.runtime.setFeaturePop({ + type: InfoPopNames.RealSkPop, + properties, + coordinates: [properties.lgtd, properties.lttd], + offsetPop: true, + }); + } +} diff --git a/src/views/Home/MapCtrl/mapstyle/sources.js b/src/views/Home/MapCtrl/mapstyle/sources.js index 57a84a3..4e9e524 100644 --- a/src/views/Home/MapCtrl/mapstyle/sources.js +++ b/src/views/Home/MapCtrl/mapstyle/sources.js @@ -22,6 +22,8 @@ import ShuizhiLayer from "./shuizhilayer"; import TrsqLayer from "./trsqlayer"; import ShuichangLayer from "./shuichangLayer"; import ShuiyuandiLayer from "./shuiyuandiLayer"; +import ShuikuLayer from "./shuikuLayer"; +import RainDrpLayer from "./rainDrpLayer" const hash = window.location.origin; @@ -217,6 +219,15 @@ const sources = { type: 'geojson', data: { type: 'FeatureCollection', features: [] }, }, + [ShuikuLayer.SourceName]: { + type: 'geojson', + data: { type: 'FeatureCollection', features: [] }, + }, + [RainDrpLayer.SourceName]: { + type: 'geojson', + data: { type: 'FeatureCollection', features: [] }, + }, + // diff --git a/src/views/Home/PanelIndex.js b/src/views/Home/PanelIndex.js index ab4f401..816a741 100644 --- a/src/views/Home/PanelIndex.js +++ b/src/views/Home/PanelIndex.js @@ -101,6 +101,13 @@ import FhxsSq from './panels/FhxsSq' import FhxsAreaDrp from './panels/FhxsAreaDrp' import Tqyb24h from './panels/Tqyb24h' + + + +import Skyb from './panels/Skyb' +import ShuikuYa from './panels/Yuanyfa' +import Diaodujg from './panels/Diaodujg' +import Duibifx from './panels/Duibifx' export default function PanelIndex({ name, style, ...params }) { if (name === '天气') { return ( @@ -201,7 +208,8 @@ export default function PanelIndex({ name, style, ...params }) { }else if (name === '预案库管理') { return } else if (name === '防汛调度') { - return + // return + return }else if (name === '灌区统计') { return }else if (name === '月用水趋势') { @@ -302,6 +310,12 @@ export default function PanelIndex({ name, style, ...params }) { return } else if (name === '未来24h预报') { return + } else if (name === '水库预案') { + return + }else if (name === '调度结果') { + return + }else if (name === '方案对比') { + return } return ( diff --git a/src/views/Home/components/ActionDock/index.js b/src/views/Home/components/ActionDock/index.js index c52104c..ec0f2f3 100644 --- a/src/views/Home/components/ActionDock/index.js +++ b/src/views/Home/components/ActionDock/index.js @@ -13,7 +13,7 @@ const VIEWS = [ { 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' }, + { id: 4, title: '预演', img: '/assets/menu/预警分析.png' }, { id: 5, title: '天气预报', img: '/assets/menu/降雨中心.png' }, ] }, @@ -126,7 +126,11 @@ export default function ActionDock({ }) { // } //二级菜单 dispatch.map.setView(o.id) - + if (o.id == 6) { + sessionStorage.setItem('point',o.id) + } else { + sessionStorage.setItem('point','') + } } }}>
diff --git a/src/views/Home/components/DrpSearch/index.js b/src/views/Home/components/DrpSearch/index.js index 2a81160..88b3b8b 100644 --- a/src/views/Home/components/DrpSearch/index.js +++ b/src/views/Home/components/DrpSearch/index.js @@ -11,6 +11,183 @@ import drpOption from './drpOption'; import DpAlert from '../../../../layouts/mui/DpAlert'; function DrpSearch({ record }) { + const demoData = [ + { + "tm": "2025-06-03 09:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 12, + "year": "2025" + }, + { + "tm": "2025-06-03 10:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 9, + "year": "2025" + }, + { + "tm": "2025-06-03 11:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 11, + "year": "2025" + }, + { + "tm": "2025-06-03 12:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 8, + "year": "2025" + }, + { + "tm": "2025-06-03 13:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 12, + "year": "2025" + }, + { + "tm": "2025-06-03 14:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 10, + "year": "2025" + }, + { + "tm": "2025-06-03 15:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 7, + "year": "2025" + }, + { + "tm": "2025-06-03 16:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 11, + "year": "2025" + }, + { + "tm": "2025-06-03 17:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 12, + "year": "2025" + }, + { + "tm": "2025-06-03 18:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 9, + "year": "2025" + }, + { + "tm": "2025-06-03 19:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 11, + "year": "2025" + }, + { + "tm": "2025-06-03 20:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 8, + "year": "2025" + }, + { + "tm": "2025-06-03 21:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 13, + "year": "2025" + }, + { + "tm": "2025-06-03 22:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 10, + "year": "2025" + }, + { + "tm": "2025-06-03 23:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 11, + "year": "2025" + }, + { + "tm": "2025-06-04 00:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 12, + "year": "2025" + }, + { + "tm": "2025-06-04 01:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 9, + "year": "2025" + }, + { + "tm": "2025-06-04 02:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 11, + "year": "2025" + }, + { + "tm": "2025-06-04 03:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 8, + "year": "2025" + }, + { + "tm": "2025-06-04 04:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 13, + "year": "2025" + }, + { + "tm": "2025-06-04 05:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 10, + "year": "2025" + }, + { + "tm": "2025-06-04 06:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 12, + "year": "2025" + }, + { + "tm": "2025-06-04 07:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 12, + "year": "2025" + }, + { + "tm": "2025-06-04 08:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 12, + "year": "2025" + }, + { + "tm": "2025-06-04 09:00", + "stnm": "桃林河(阎河)", + "stcd": "61612910", + "drp": 8, + "year": "2025" + } +] const [stm, handleDateChange1] = useState(() => moment().add(-1, 'd')); const [etm, handleDateChange2] = useState(() => moment()); const [data, setData] = useState([]); @@ -28,7 +205,10 @@ function DrpSearch({ record }) { useEffect(() => { if (searchTm.tm) { drpSearch(record.type, record.stcd, 'h', searchTm.tm).then((data) => { - setData(data); + console.log(data,record); + const newData = record.test ? demoData : data; + setData(newData || []); + // setData(data); }) } }, [searchTm]); diff --git a/src/views/Home/panels/BxSkOverall/OverallContent.js b/src/views/Home/panels/BxSkOverall/OverallContent.js index 5e6be95..64963a2 100644 --- a/src/views/Home/panels/BxSkOverall/OverallContent.js +++ b/src/views/Home/panels/BxSkOverall/OverallContent.js @@ -2,7 +2,7 @@ import { Button, makeStyles } from '@material-ui/core'; import { Email } from '@material-ui/icons'; import React, { useMemo } from 'react'; import { BXSKLIST } from '../../../../models/_/bxsk'; - +import moment from 'moment'; const useStyles = makeStyles({ root: { padding: '1.5rem 0.75rem 0.75rem 0.75rem', @@ -41,6 +41,8 @@ const useStyles = makeStyles({ export default function OverallContent({ data, skAll }) { const classes = useStyles(); + const start = moment().format('D日'); + const end = moment().add(1,'day').format('D日'); const stat = useMemo(() => { const dataF = data.filter(o => o.dbczwt); @@ -61,9 +63,9 @@ export default function OverallContent({ data, skAll }) { return (
- 29日9时至30日9时 + {start}9时至{end}9时 24小时中共有1 - 个站点雨量为特大暴雨，雨量值 + 个站点雨量为大暴雨，雨量值 261mm； 共产生3个山洪预警（2个内部预警，1个外部预警），均已处置；1个水库超汛限，已短信通知责任人；无河道预警。 diff --git a/src/views/Home/panels/Diaodujg/Setting.js b/src/views/Home/panels/Diaodujg/Setting.js new file mode 100644 index 0000000..fd1c4ef --- /dev/null +++ b/src/views/Home/panels/Diaodujg/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/Diaodujg/constant.js b/src/views/Home/panels/Diaodujg/constant.js new file mode 100644 index 0000000..10669b7 --- /dev/null +++ b/src/views/Home/panels/Diaodujg/constant.js @@ -0,0 +1,157 @@ +const data = [ + { + "addvcd": "420800000000000", + "moditime": "2022-05-01 21:00:00", + "comments": "漳河遥测", + "src": "zhzj", + "esstym": "", + "mvalue": { + "slmmmt": null, + "slm60": 0, + "exkey": "@", + "slm80": 0, + "hitrsn": null, + "crpty": null, + "crpgrwprd": null, + "srlslm": null, + "stcd": "ZH201417", + "slm10": 24, + "slm20": 5.3, + "slm30": 44.3, + "slm40": 44.3, + "tm": "2024-08-03 05:00", + "slm100": 0, + "vtavslm": null, + "slmAvg": 24.5 + }, + "lttd": 30.8456, + "sttp": "SS", + "irrCode": "D00000010", + "sort": 9999, + "hasImg": false, + "stlc": "荆门市", + "dtmel": 0, + "stcd": "ZH201417", + "stnm": "马山二组（墒情）", + "addvcd_dictText": "荆门市", + "lgtd": 112.2321, + "irrCode_dictText": "漳河实验站", + "bsnm": "漳河流域" + }, + { + "addvcd": "420800000000000", + "moditime": "2022-05-01 21:00:00", + "comments": "漳河遥测", + "src": "zhzj", + "esstym": "", + "mvalue": { + "slmmmt": null, + "slm60": 0, + "exkey": "@", + "slm80": 0, + "hitrsn": null, + "crpty": null, + "crpgrwprd": null, + "srlslm": null, + "stcd": "ZH201421", + "slm10": 12.1, + "slm20": 16.2, + "slm30": 12.8, + "slm40": 12.8, + "tm": "2024-08-15 08:00", + "slm100": 0, + "vtavslm": null, + "slmAvg": 13.7 + }, + "lttd": 30.8446, + "sttp": "SS", + "irrCode": "D00000010", + "sort": 9999, + "hasImg": false, + "stlc": "荆门市", + "dtmel": 0, + "stcd": "ZH201421", + "stnm": "槐桥四组（墒情）", + "addvcd_dictText": "荆门市", + "lgtd": 112.203, + "irrCode_dictText": "漳河实验站", + "bsnm": "漳河流域" + }, + { + "addvcd": "420800000000000", + "moditime": "2022-05-01 21:00:00", + "src": "zhzj", + "esstym": "", + "mvalue": { + "slmmmt": null, + "slm60": 0, + "exkey": "@", + "slm80": 0, + "hitrsn": null, + "crpty": null, + "crpgrwprd": null, + "srlslm": null, + "stcd": "ZH201418", + "slm10": 16.5, + "slm20": 12.5, + "slm30": 0, + "slm40": 0, + "tm": "2024-09-19 11:00", + "slm100": 0, + "vtavslm": null, + "slmAvg": 14.5 + }, + "lttd": 30.8866, + "sttp": "SS", + "irrCode": "D00000010", + "sort": 9999, + "hasImg": false, + "stlc": "荆门市", + "dtmel": 0, + "stcd": "ZH201418", + "stnm": "双碑一组（墒情）", + "addvcd_dictText": "荆门市", + "lgtd": 112.2006, + "irrCode_dictText": "漳河实验站", + "bsnm": "漳河流域" + }, + { + "addvcd": "420800000000000", + "moditime": "2022-05-01 21:00:00", + "comments": "水资源多孔闸门控制系统", + "src": "zhzj", + "esstym": "", + "mvalue": { + "slmmmt": null, + "slm60": null, + "exkey": "@", + "slm80": null, + "hitrsn": null, + "crpty": null, + "crpgrwprd": null, + "srlslm": null, + "stcd": "4211221031", + "slm10": 31, + "slm20": 42.6, + "slm30": null, + "slm40": 26.6, + "tm": "2025-05-26 09:00", + "slm100": null, + "vtavslm": null, + "slmAvg": 33.4 + }, + "lttd": 30.904191, + "sttp": "SS", + "irrCode": "D00000010", + "sort": 9999, + "hasImg": false, + "stlc": "荆门市", + "stcd": "4211221031", + "stnm": "试验站墒情", + "addvcd_dictText": "荆门市", + "lgtd": 112.087806, + "irrCode_dictText": "漳河实验站", + "bsnm": "漳河流域" + } +] +export default data; \ No newline at end of file diff --git a/src/views/Home/panels/Diaodujg/index.js b/src/views/Home/panels/Diaodujg/index.js new file mode 100644 index 0000000..3253a04 --- /dev/null +++ b/src/views/Home/panels/Diaodujg/index.js @@ -0,0 +1,159 @@ +import React, { useMemo, useState } from 'react'; +import useRequest from '../../../../utils/useRequest'; +import PanelBox from '../../components/PanelBox'; + +import Table from '@material-ui/core/Table'; +import TableContainer from '@material-ui/core/TableContainer'; +import TableBody from '@material-ui/core/TableBody'; +import TableHead from '@material-ui/core/TableHead'; +import TableRow from '@material-ui/core/TableRow'; +import DpTableCell from '../../../../layouts/mui/DpTableCell'; +import DpTableRow from '../../../../layouts/mui/DpTableRow'; +import { useDispatch, useSelector } from 'react-redux'; +import useRefresh from '../../../../utils/useRefresh'; +import { HDRealPromise } from '../../../../models/_/real'; +import clsx from 'clsx'; +import { renderHDRz } from '../../../../utils/renutils'; +import Setting from './Setting'; +import { InfoPopNames } from '../../InfoPops'; +import config from '../../../../config'; +import moment from 'moment'; +import { Empty } from 'antd' +import TableYj from './tableYj'; +// import showData from './constant' +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 yyRes = useSelector(s => s.runtime.yyObj); + const t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0); + // let { data } = useRequest(HDRealPromise.get, t); + const [setting, showSetting] = useState(false); + + // const showData = useMemo(() => { + // if (!data) { + // return []; + // } + // let ret = []; + // data.forEach(o => { + // if (!tableRzFilter[o.type]) { + // return; + // } + // o.status = Math.floor(Math.random() * (4 - 0 + 1)) + 0 + // o.kd = (Math.random() * 100).toFixed(2); + // o.ll = (Math.random() * 100).toFixed(1); + // ret.push(o); + // }); + // return ret; + // }, [data, tableRzFilter]); + const randomMinutes = Math.floor(Math.random() * 60) + 1; + const format = 'YYYY-MM-DD HH:mm'; + + const showData = [ + { + stnm: '尼尔基坝上', + rz: '215.74', + maxF: '7170', + cxTime: '08-17 08时', + ffTime:'08-23 20时' + }, + { + stnm: '同盟', + rz: '170.30', + maxF: '10300', + cxTime: '08-20 20时', + ffTime:'08-20 20时' + } + ] + const resData = [ + { + stnm: '福田河镇', + area:"200", + rz: '215.74', + maxF: '7170', + cxTime: '08-17 08时', + ffTime:'08-23 20时' + }, + { + stnm: '顺河镇', + area: '300', + maxF: '10300', + cxTime: '08-20 20时', + ffTime:'08-20 20时' + } + ] + 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.hd], + zoom: config.poiPositionZoom.hd, + pitch: config.poiPitch, + }); + } + } + + const toggleStType = (type) => { + const visible = !tableRzFilter[type]; + dispatch.realview.setTableRzFilter({ [type]: visible }); + } + + const toggleAutoRefresh = () => { + dispatch.realview.setHdAutoRefresh(!hdAutoRefresh); + } + + + + return ( + + // toggleStType('sh')}>山洪 + // toggleStType('sw')}>水文 + // + // } + extra={ + <> + {/* */} + {/* showSetting(true)}> */} + + } + > + { + yyRes.yy ? <> +
+
+
水库洪水演进
+ {}}/> +
+
+
下游淹没影响
+ +
+
+ +
+
+ : + 暂无数据}/> + } + { + setting && showSetting(false)} /> + } + + ) +} + +export default HDReal; diff --git a/src/views/Home/panels/Diaodujg/tableYj.js b/src/views/Home/panels/Diaodujg/tableYj.js new file mode 100644 index 0000000..4034f0a --- /dev/null +++ b/src/views/Home/panels/Diaodujg/tableYj.js @@ -0,0 +1,171 @@ + +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import { + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + Paper, +} from '@material-ui/core'; +const reservoirData = [ + { + name: '明山水库', + maxInflow: { + value: 12.32, + time: '03-23 14:32' + }, + totalStorage: 17.98, + maxOutflow: { + value: 12.32, + time: '03-23 14:32' + } + } +]; + +const useStyles = makeStyles((theme) => ({ + root: { + width: '100%', + // padding: '20px', + background: 'transparent', + borderRadius: '8px', + position: 'relative', + }, + tableContainer: { + background: 'transparent', + maxHeight: '100%', + overflowX: 'auto', + '&::-webkit-scrollbar': { + height: '8px', + }, + '&::-webkit-scrollbar-track': { + background: 'rgba(255, 255, 255, 0.1)', + borderRadius: '4px', + }, + '&::-webkit-scrollbar-thumb': { + background: 'rgba(255, 255, 255, 0.2)', + borderRadius: '4px', + '&:hover': { + background: 'rgba(255, 255, 255, 0.3)', + }, + }, + }, + table: { + minWidth: 800, + // background: 'linear-gradient(180deg, rgba(22, 27, 34, 0.8) 0%, rgba(13, 17, 23, 0.8) 100%)', + backdropFilter: 'blur(10px)', + }, + tableHead: { + background: 'linear-gradient(180deg, rgba(22, 27, 34, 0.9) 0%, rgba(22, 27, 34, 0.7) 100%)', + }, + headerCell: { + color: '#c9d1d9', + fontWeight: 600, + textAlign: 'center', + borderBottom: '1px solid rgba(48, 54, 61, 0.6)', + borderRight: '1px solid rgba(48, 54, 61, 0.6)', + padding: 0, + whiteSpace: 'nowrap', + '&:last-child': { + borderRight: 'none', + }, + }, + cell: { + color: '#c9d1d9', + textAlign: 'center', + borderBottom: '1px solid rgba(48, 54, 61, 0.6)', + borderRight: '1px solid rgba(48, 54, 61, 0.6)', + padding: '12px 20px', + whiteSpace: 'nowrap', + '&:last-child': { + borderRight: 'none', + }, + }, + timeText: { + fontSize: '0.85em', + color: '#8b949e', + marginLeft: '4px', + }, + scrollIndicator: { + position: 'absolute', + bottom: 0, + left: 0, + right: 0, + height: '4px', + background: 'rgba(255, 255, 255, 0.1)', + borderRadius: '2px', + }, + scrollProgress: { + height: '100%', + background: 'rgba(255, 255, 255, 0.3)', + borderRadius: '2px', + width: '50%', + transform: 'translateX(0%)', + transition: 'transform 0.3s ease', + }, +})); + +const ReservoirTable = ({onChange}) => { + const classes = useStyles(); + const [scrollPosition, setScrollPosition] = React.useState(0); + + const handleScroll = (e) => { + const target = e.target; + const scrollLeft = target.scrollLeft; + const maxScroll = target.scrollWidth - target.clientWidth; + const position = (scrollLeft / maxScroll) * 100; + setScrollPosition(position); + }; + + const formatFlowCell = (data) => ( + <> + {data.value} + ({data.time}) + + ); + + return ( + + + + + + 水库名称 + + 最大入库流量
(m³/s) + + + 总入库水量
(万m³) + + + 最大出库流量
(m³/s) + + + + + {reservoirData.map((item, index) => ( + + {item.name} + {formatFlowCell(item.maxInflow)} + {item.totalStorage} + {formatFlowCell(item.maxOutflow)} + + ))} + +
+ + {/*
+
+
*/} + + ); +}; + +export default ReservoirTable; \ No newline at end of file diff --git a/src/views/Home/panels/Drpfx/index.js b/src/views/Home/panels/Drpfx/index.js index 7815a6a..f9fe774 100644 --- a/src/views/Home/panels/Drpfx/index.js +++ b/src/views/Home/panels/Drpfx/index.js @@ -4,6 +4,7 @@ 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, @@ -21,7 +22,10 @@ import { Collapse } from '@material-ui/core'; import AddIcon from '@material-ui/icons/Add'; +import { useDispatch, useSelector } from 'react-redux'; + import RemoveIcon from '@material-ui/icons/Remove'; +import config from '../../../../config'; const useStyles = makeStyles((theme) => ({ root: { color: '#fff', @@ -73,12 +77,12 @@ const useStyles = makeStyles((theme) => ({ backgroundColor: 'rgba(255,255,255,0.1)' } }, - warningRow: { + 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)' }, + '&.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)' } }, @@ -90,6 +94,7 @@ const useStyles = makeStyles((theme) => ({ } })); export default function Overall({ style }) { + const dispatch = useDispatch(); const classes = useStyles(); const [types, setTypes] = useState({ @@ -113,7 +118,7 @@ export default function Overall({ style }) { { 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: 'heavy', name: '大暴雨站点', count: 1, color: 'blue2' }, { id: 'storm', name: '暴雨站点', count: 0, color: 'green' } ]; @@ -124,6 +129,41 @@ export default function Overall({ style }) { })); }; + const drpData = [ + { + "stcd": "61612910", + "stnm": "桃林河(阎河)", + "adcd": "421181000000000", + 'test':1, + "wscd": null, + "importancy": 0, + "lgtd": 115.087777777, + "lttd": 31.164444444, + "elev": null, + "hasRz": true, + "type": "sh", + "today": 7, + "h1": 12, + "h3": 40, + "h6": 69, + "h12": 133, + "h24": 261, + "tm": "2025-06-03T02:10: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, + }); + } + } return ( - {/* 展开的详细内容可以在这里添加 */} - {/* - 站名 - 水位(m) - 所属政区 - 所属流域 - */} + {/* 展开的详细内容可以在这里添加 */}{ + station.id == 'heavy' && drpData.map(item => ( + flyTo(item)}> + {item.stnm} + {item.today} + 阎家河镇 + 桃林河 + + )) + } + diff --git a/src/views/Home/panels/Duibifx/Setting.js b/src/views/Home/panels/Duibifx/Setting.js new file mode 100644 index 0000000..fd1c4ef --- /dev/null +++ b/src/views/Home/panels/Duibifx/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/Duibifx/constant.js b/src/views/Home/panels/Duibifx/constant.js new file mode 100644 index 0000000..10669b7 --- /dev/null +++ b/src/views/Home/panels/Duibifx/constant.js @@ -0,0 +1,157 @@ +const data = [ + { + "addvcd": "420800000000000", + "moditime": "2022-05-01 21:00:00", + "comments": "漳河遥测", + "src": "zhzj", + "esstym": "", + "mvalue": { + "slmmmt": null, + "slm60": 0, + "exkey": "@", + "slm80": 0, + "hitrsn": null, + "crpty": null, + "crpgrwprd": null, + "srlslm": null, + "stcd": "ZH201417", + "slm10": 24, + "slm20": 5.3, + "slm30": 44.3, + "slm40": 44.3, + "tm": "2024-08-03 05:00", + "slm100": 0, + "vtavslm": null, + "slmAvg": 24.5 + }, + "lttd": 30.8456, + "sttp": "SS", + "irrCode": "D00000010", + "sort": 9999, + "hasImg": false, + "stlc": "荆门市", + "dtmel": 0, + "stcd": "ZH201417", + "stnm": "马山二组（墒情）", + "addvcd_dictText": "荆门市", + "lgtd": 112.2321, + "irrCode_dictText": "漳河实验站", + "bsnm": "漳河流域" + }, + { + "addvcd": "420800000000000", + "moditime": "2022-05-01 21:00:00", + "comments": "漳河遥测", + "src": "zhzj", + "esstym": "", + "mvalue": { + "slmmmt": null, + "slm60": 0, + "exkey": "@", + "slm80": 0, + "hitrsn": null, + "crpty": null, + "crpgrwprd": null, + "srlslm": null, + "stcd": "ZH201421", + "slm10": 12.1, + "slm20": 16.2, + "slm30": 12.8, + "slm40": 12.8, + "tm": "2024-08-15 08:00", + "slm100": 0, + "vtavslm": null, + "slmAvg": 13.7 + }, + "lttd": 30.8446, + "sttp": "SS", + "irrCode": "D00000010", + "sort": 9999, + "hasImg": false, + "stlc": "荆门市", + "dtmel": 0, + "stcd": "ZH201421", + "stnm": "槐桥四组（墒情）", + "addvcd_dictText": "荆门市", + "lgtd": 112.203, + "irrCode_dictText": "漳河实验站", + "bsnm": "漳河流域" + }, + { + "addvcd": "420800000000000", + "moditime": "2022-05-01 21:00:00", + "src": "zhzj", + "esstym": "", + "mvalue": { + "slmmmt": null, + "slm60": 0, + "exkey": "@", + "slm80": 0, + "hitrsn": null, + "crpty": null, + "crpgrwprd": null, + "srlslm": null, + "stcd": "ZH201418", + "slm10": 16.5, + "slm20": 12.5, + "slm30": 0, + "slm40": 0, + "tm": "2024-09-19 11:00", + "slm100": 0, + "vtavslm": null, + "slmAvg": 14.5 + }, + "lttd": 30.8866, + "sttp": "SS", + "irrCode": "D00000010", + "sort": 9999, + "hasImg": false, + "stlc": "荆门市", + "dtmel": 0, + "stcd": "ZH201418", + "stnm": "双碑一组（墒情）", + "addvcd_dictText": "荆门市", + "lgtd": 112.2006, + "irrCode_dictText": "漳河实验站", + "bsnm": "漳河流域" + }, + { + "addvcd": "420800000000000", + "moditime": "2022-05-01 21:00:00", + "comments": "水资源多孔闸门控制系统", + "src": "zhzj", + "esstym": "", + "mvalue": { + "slmmmt": null, + "slm60": null, + "exkey": "@", + "slm80": null, + "hitrsn": null, + "crpty": null, + "crpgrwprd": null, + "srlslm": null, + "stcd": "4211221031", + "slm10": 31, + "slm20": 42.6, + "slm30": null, + "slm40": 26.6, + "tm": "2025-05-26 09:00", + "slm100": null, + "vtavslm": null, + "slmAvg": 33.4 + }, + "lttd": 30.904191, + "sttp": "SS", + "irrCode": "D00000010", + "sort": 9999, + "hasImg": false, + "stlc": "荆门市", + "stcd": "4211221031", + "stnm": "试验站墒情", + "addvcd_dictText": "荆门市", + "lgtd": 112.087806, + "irrCode_dictText": "漳河实验站", + "bsnm": "漳河流域" + } +] +export default data; \ No newline at end of file diff --git a/src/views/Home/panels/Duibifx/index.js b/src/views/Home/panels/Duibifx/index.js new file mode 100644 index 0000000..73084cf --- /dev/null +++ b/src/views/Home/panels/Duibifx/index.js @@ -0,0 +1,152 @@ +import React, { useMemo, useState } from 'react'; +import useRequest from '../../../../utils/useRequest'; +import PanelBox from '../../components/PanelBox'; + +import Table from '@material-ui/core/Table'; +import TableContainer from '@material-ui/core/TableContainer'; +import TableBody from '@material-ui/core/TableBody'; +import TableHead from '@material-ui/core/TableHead'; +import TableRow from '@material-ui/core/TableRow'; +import DpTableCell from '../../../../layouts/mui/DpTableCell'; +import DpTableRow from '../../../../layouts/mui/DpTableRow'; +import { useDispatch, useSelector } from 'react-redux'; +import useRefresh from '../../../../utils/useRefresh'; +import { HDRealPromise } from '../../../../models/_/real'; +import clsx from 'clsx'; +import { renderHDRz } from '../../../../utils/renutils'; +import Setting from './Setting'; +import { InfoPopNames } from '../../InfoPops'; +import config from '../../../../config'; +import moment from 'moment'; +import { Empty } from 'antd' +import TableYj from './tableYj'; +// import showData from './constant' +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 num = useSelector(s => s.runtime.duibifxNum) + + const yyRes = useSelector(s => s.runtime.yyObj); + const t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0); + // let { data } = useRequest(HDRealPromise.get, t); + const [setting, showSetting] = useState(false); + + // const showData = useMemo(() => { + // if (!data) { + // return []; + // } + // let ret = []; + // data.forEach(o => { + // if (!tableRzFilter[o.type]) { + // return; + // } + // o.status = Math.floor(Math.random() * (4 - 0 + 1)) + 0 + // o.kd = (Math.random() * 100).toFixed(2); + // o.ll = (Math.random() * 100).toFixed(1); + // ret.push(o); + // }); + // return ret; + // }, [data, tableRzFilter]); + const randomMinutes = Math.floor(Math.random() * 60) + 1; + const format = 'YYYY-MM-DD HH:mm'; + + const showData = [ + { + stnm: '尼尔基坝上', + rz: '215.74', + maxF: '7170', + cxTime: '08-17 08时', + ffTime: '08-23 20时' + }, + { + stnm: '同盟', + rz: '170.30', + maxF: '10300', + cxTime: '08-20 20时', + ffTime: '08-20 20时' + } + ] + const resData = [ + { + stnm: '福田河镇', + area: "200", + rz: '215.74', + maxF: '7170', + cxTime: '08-17 08时', + ffTime: '08-23 20时' + }, + { + stnm: '顺河镇', + area: '300', + maxF: '10300', + cxTime: '08-20 20时', + ffTime: '08-20 20时' + } + ] + 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.hd], + zoom: config.poiPositionZoom.hd, + pitch: config.poiPitch, + }); + } + } + + const toggleStType = (type) => { + const visible = !tableRzFilter[type]; + dispatch.realview.setTableRzFilter({ [type]: visible }); + } + + const toggleAutoRefresh = () => { + dispatch.realview.setHdAutoRefresh(!hdAutoRefresh); + } + + + + return ( + + // toggleStType('sh')}>山洪 + // toggleStType('sw')}>水文 + // + // } + extra={ + <> + {/* */} + {/* showSetting(true)}> */} + + } + > + { + num.length ? num.map(item => ( +
+ +
+ )) + : + 暂无数据} /> + } + { + setting && showSetting(false)} /> + } + + ) +} + +export default HDReal; diff --git a/src/views/Home/panels/Duibifx/tableYj.js b/src/views/Home/panels/Duibifx/tableYj.js new file mode 100644 index 0000000..6c6b93d --- /dev/null +++ b/src/views/Home/panels/Duibifx/tableYj.js @@ -0,0 +1,171 @@ + +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import { + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + Paper, +} from '@material-ui/core'; +const reservoirData = [ + { + name: '明山水库', + maxInflow: { + value: 12.32, + time: '03-23 14:32' + }, + totalStorage: 17.98, + maxOutflow: { + value: 12.32, + time: '03-23 14:32' + } + } +]; + +const useStyles = makeStyles((theme) => ({ + root: { + width: '100%', + // padding: '20px', + background: '#0d1117', + borderRadius: '8px', + position: 'relative', + }, + tableContainer: { + background: 'transparent', + maxHeight: '100%', + overflowX: 'auto', + '&::-webkit-scrollbar': { + height: '8px', + }, + '&::-webkit-scrollbar-track': { + // background: 'rgba(255, 255, 255, 0.1)', + borderRadius: '4px', + }, + '&::-webkit-scrollbar-thumb': { + // background: 'rgba(255, 255, 255, 0.2)', + borderRadius: '4px', + '&:hover': { + background: 'rgba(255, 255, 255, 0.3)', + }, + }, + }, + table: { + minWidth: 800, + // background: 'linear-gradient(180deg, rgba(22, 27, 34, 0.8) 0%, rgba(13, 17, 23, 0.8) 100%)', + backdropFilter: 'blur(10px)', + }, + tableHead: { + background: 'linear-gradient(180deg, rgba(22, 27, 34, 0.9) 0%, rgba(22, 27, 34, 0.7) 100%)', + }, + headerCell: { + color: '#c9d1d9', + fontWeight: 600, + textAlign: 'center', + borderBottom: '1px solid rgba(48, 54, 61, 0.6)', + borderRight: '1px solid rgba(48, 54, 61, 0.6)', + padding: 0, + whiteSpace: 'nowrap', + '&:last-child': { + borderRight: 'none', + }, + }, + cell: { + color: '#c9d1d9', + textAlign: 'center', + borderBottom: '1px solid rgba(48, 54, 61, 0.6)', + borderRight: '1px solid rgba(48, 54, 61, 0.6)', + padding: '12px 20px', + whiteSpace: 'nowrap', + '&:last-child': { + borderRight: 'none', + }, + }, + timeText: { + fontSize: '0.85em', + color: '#8b949e', + marginLeft: '4px', + }, + scrollIndicator: { + position: 'absolute', + bottom: 0, + left: 0, + right: 0, + height: '4px', + background: 'rgba(255, 255, 255, 0.1)', + borderRadius: '2px', + }, + scrollProgress: { + height: '100%', + background: 'rgba(255, 255, 255, 0.3)', + borderRadius: '2px', + width: '50%', + transform: 'translateX(0%)', + transition: 'transform 0.3s ease', + }, +})); + +const ReservoirTable = () => { + const classes = useStyles(); + const [scrollPosition, setScrollPosition] = React.useState(0); + + const handleScroll = (e) => { + const target = e.target; + const scrollLeft = target.scrollLeft; + const maxScroll = target.scrollWidth - target.clientWidth; + const position = (scrollLeft / maxScroll) * 100; + setScrollPosition(position); + }; + + const formatFlowCell = (data) => ( + <> + {data.value} + ({data.time}) + + ); + + return ( + + + + + + 水库名称 + + 最大入库流量
(m³/s) + + + 总入库水量
(万m³) + + + 最大出库流量
(m³/s) + + + + + {reservoirData.map((item, index) => ( + + {item.name} + {formatFlowCell(item.maxInflow)} + {item.totalStorage} + {formatFlowCell(item.maxOutflow)} + + ))} + +
+ +
+
+
+ + ); +}; + +export default ReservoirTable; \ 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 c55def0..b5d0b52 100644 --- a/src/views/Home/panels/FzjcLayers/index.js +++ b/src/views/Home/panels/FzjcLayers/index.js @@ -37,27 +37,7 @@ const StyledFormControl = styled(FormControl)({ } }); function FzjcLayers({ style }) { - const [value, setValue] = useState(''); - - const handleChange = (event) => { - setValue(event.target.value); - }; - const classes = useStyles(); - - const layerVisible = useSelector(getLayerVisible); - console.log('layerVisible', layerVisible); - const dispath = useDispatch(); - - const layerVisibleChanged = (event) => { - const vo = { [event.target.name]: event.target.checked }; - dispath.map.setLayerVisible(vo); - }; - - const showList = (type) => { - dispath.fzjcview.setListType(type); - } - - const shData =[ + const shData =[ { "id": 125973, "reviewStatus": "2", @@ -158,6 +138,30 @@ function FzjcLayers({ style }) { "updateTime": "2025-05-29 11:40:08", } ] + const [value, setValue] = useState(''); + const [shFilterData, setShFilterData] = useState(shData) + const handleChange = (event) => { + const val = event.target.value + setValue(val); + const newData = shData.filter(item => val ? item.levels == val:item) + setShFilterData(newData) + }; + const classes = useStyles(); + + const layerVisible = useSelector(getLayerVisible); + console.log('layerVisible', layerVisible); + const dispath = useDispatch(); + + const layerVisibleChanged = (event) => { + const vo = { [event.target.name]: event.target.checked }; + dispath.map.setLayerVisible(vo); + }; + + const showList = (type) => { + dispath.fzjcview.setListType(type); + } + + const dispatch = useDispatch(); const zt = { @@ -232,16 +236,18 @@ function FzjcLayers({ style }) {
*/}
-
+ { + type == 'sh' &&
- } label="县" /> - } label="镇" /> - } label="行政村" /> + } label="全部" /> + } label="县" /> + } label="镇" /> + } label="行政村" /> {/* console.log(e.target.value)}/> */}
+ } + { type == 'sh' ? @@ -262,7 +270,7 @@ function FzjcLayers({ style }) { - {shData.map((row) => ( + {shFilterData.map((row) => ( flyTo(row,'sz')}>
({ + card: { + marginBottom: '16px', + // backgroundColor: '#fff', + '&:hover': { + boxShadow: '0 4px 12px rgba(0,0,0,0.1)' + } + }, + statusChip: { + position: 'absolute', + right: '-10px', + top: '-30px', + backgroundColor: '#52c41a', + color: '#fff' + }, + label: { + color: '#73ade8', + width: '80px', + display: 'inline-block' + }, + value: { + color: '#fff', + }, + buttons: { + marginTop: '16px', + '& .MuiButton-root': { + marginLeft: '8px' + } + } +})); + +const WarningCard = ({ data, onDelete, onAddPlan }) => { + const classes = useStyles(); + + return ( + + + + + {data.id}. {data.title} + + + + + + + 预演类别: + {data.type} + + + 风险隐患: + {data.risk} + + + 预演时段: + {data.timeRange} + + + 情景类别: + {data.status} + + + 生成时间: + {data.createTime} + + + + + + + + + + ); +}; + +export default WarningCard; \ No newline at end of file diff --git a/src/views/Home/panels/RainfallCenter/index.js b/src/views/Home/panels/RainfallCenter/index.js index 5210dad..25f4b52 100644 --- a/src/views/Home/panels/RainfallCenter/index.js +++ b/src/views/Home/panels/RainfallCenter/index.js @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React, { useEffect,useState } from 'react'; import PanelBox from '../../components/PanelBox'; import { useDispatch, useSelector } from 'react-redux'; import clsx from 'clsx'; @@ -6,7 +6,7 @@ import ByReal from './ByReal'; import ByFZDX from './ByFZDX'; import By24H from './By24H'; import ByRadar from './ByRadar'; - +import WarningCard from './historyYy' function RainfallCenter({ style }) { const dispatch = useDispatch(); const type = useSelector(s => s.rcview.type); @@ -21,28 +21,77 @@ function RainfallCenter({ style }) { closeLayer(); dispatch.rcview.setType(val); } +const warningData = [ + { + id: 1, + title: '2024年12月10日-降雨叠加50mm-无隐患', + type: '现在时', + risk: '余家河无隐患', + timeRange: '2024-12-10 10:00:00至2024-12-10 18:00:00', + status: '实测降雨+无隐患', + createTime: '2024-12-10 16:24:16' + }, + { + id: 2, + title: '2024年12月11日-降雨叠加35mm-无隐患', + type: '现在时', + risk: '余家河无隐患', + timeRange: '2024-12-11 10:00:00至2024-12-11 18:00:00', + status: '实测降雨+无隐患', + createTime: '2024-12-10 16:24:16' + }, + { + id: 3, + title: '2024年12月12日-降雨叠加40mm-无隐患', + type: '现在时', + risk: '余家河无隐患', + timeRange: '2024-12-12 10:00:00至2024-12-12 18:00:00', + status: '实测降雨+无隐患', + createTime: '2024-12-10 16:24:16' + }, + // 可以添加更多预警数据 + ]; + const [data, setData] = useState(warningData) + const handleDelete = (id) => { + console.log('删除预警:', id); + const newData = warningData.filter(item => item.id != id); + setData(newData) + }; + const handleAddPlan = (id) => { + console.log('加载方案:', id); + dispatch?.runtime.setInfoDlg({ layerId: 'lsyyLayer', properties: {planName:'麻城市山洪灾害防御预案'} }) + }; return ( - toggleType('real')}>实时 - toggleType('h24')}>24小时 - toggleType('fzdx')}>防灾对象 - toggleType('radar')}>雷达 - - } - extra={ - - } + // tabs={ + // + // toggleType('real')}>实时 + // toggleType('h24')}>24小时 + // toggleType('fzdx')}>防灾对象 + // toggleType('radar')}>雷达 + // + // } + // extra={ + // + // } > - {type === 'real' && } + + {/* {type === 'real' && } {type === 'fzdx' && } {type === 'h24' && } - {type === 'radar' && } + {type === 'radar' && } */} + {data.map(warning => ( + + ))} ) } diff --git a/src/views/Home/panels/ShWarning/index.js b/src/views/Home/panels/ShWarning/index.js index 6292d06..116cd0a 100644 --- a/src/views/Home/panels/ShWarning/index.js +++ b/src/views/Home/panels/ShWarning/index.js @@ -25,6 +25,7 @@ import { import RemoveIcon from '@material-ui/icons/Remove'; import WarningIcon from '@material-ui/icons/Warning'; import AddIcon from '@material-ui/icons/Add'; +import { useDispatch } from 'react-redux'; import { DatePicker } from 'antd'; import moment from 'moment'; @@ -146,23 +147,66 @@ export default function Overall({ style }) { }, []) + const zyData = [ - { - adnm: '石桥湾村', - tm: '2025-05-22 12:03:00', - status: '关闭预警' + { + "status": null, + "warngradeid": 5, + "warnetm": "2025-05-22 18:12:28", + "warndesc": "张家畈镇1个测站超警,余家河(张家畈)(18:12)3小时雨量57.5毫米,超警戒雨量值(55.00)2.5毫米", + "warnstatusid": 30, + "warnstm": "2025-05-22 18:05:00", + "tempcolumn": 0, + "warnid": 1120, + "isauto": "0", + "warnnm": "张家畈镇山洪准备转移", + "adnm": "张家畈镇", + "adcd": "421181106000000", + "warntypeid": 10, + "temprownumber": 9, + status: '关闭预警' }, - { - adnm: '凉亭村', - tm: '2025-05-22 12:03:00', - status: '关闭预警' + { + "status": null, + "warngradeid": 5, + "warnetm": "2025-05-22 18:12:30", + "warndesc": "夫子河镇北门村1个测站超警,青草河(夫子河)(18:12)3小时雨量100.5毫米,超危险雨量值(85.00)15.5毫米", + "warnstatusid": 30, + "warnstm": "2025-05-22 18:00:00", + "tempcolumn": 0, + "warnid": 1119, + "isauto": "0", + "warnnm": "夫子河镇北门村山洪准备转移", + "adnm": "夫子河镇北门村", + "adcd": "421181104001000", + "warntypeid": 10, + "temprownumber": 10, + status: '关闭预警' }, - { - adnm: '古城村', - tm: '2025-05-22 12:03:00', - status: '关闭预警' - } + { + "status": null, + "warngradeid": 5, + "warnetm": "2025-05-22 18:12:11", + "warndesc": "张家畈镇余家河1个测站超警,余家河(张家畈)(18:11)3小时雨量57.5毫米,超警戒雨量值(55.00)2.5毫米", + "warnstatusid": 30, + "warnstm": "2025-05-22 18:05:00", + "tempcolumn": 0, + "warnid": 1121, + "isauto": "0", + "warnnm": "张家畈镇余家河山洪准备转移", + "adnm": "张家畈镇余家河村", + "adcd": "421181106017000", + "warntypeid": 10, + "temprownumber": 8, + status: '关闭预警' + }, + ] + const dispatch = useDispatch(); + + const flyTo = (record) => { + dispatch.runtime.setInfoDlg({ layerId: 'ShWarn', properties: record }) + } return ( 暂无详细信息 */} { row.type == 'immediate' ? zyData.map(item => ( - + flyTo(item)}>
{item.adnm}
{item.tm}
 + >{item.warnetm}
{item.status}
 diff --git a/src/views/Home/panels/Shksh/index.js b/src/views/Home/panels/Shksh/index.js index b066511..2e2f4cc 100644 --- a/src/views/Home/panels/Shksh/index.js +++ b/src/views/Home/panels/Shksh/index.js @@ -159,7 +159,7 @@ const useStyles = makeStyles({ dispatch.runtime.setFeaturePop({ type: '', properties: record, coordinates: [lgtd, lttd] }); dispatch.runtime.setCameraTarget({ center: [lgtd, lttd + config.poiPositionOffsetY.drp], - zoom: 13, + zoom: 14, pitch: config.poiPitch, bearing: 0 }); diff --git a/src/views/Home/panels/SkWarning/index.js b/src/views/Home/panels/SkWarning/index.js index c638406..80bed6f 100644 --- a/src/views/Home/panels/SkWarning/index.js +++ b/src/views/Home/panels/SkWarning/index.js @@ -154,7 +154,7 @@ export default function Overall({ style }) { "h24": 0, "h48": 0, "drpState": 2, - "rz": 119.15, + "rz": 130.15, "w": 0.444, "a_fsltdz": -10.75, "rzTm": "2025-04-11T06:00:00.000Z", @@ -247,7 +247,7 @@ export default function Overall({ style }) {
永红水库
 - 119.15(0.24) + 130.15(0.25)
阎家河镇
 diff --git a/src/views/Home/panels/Skyb/chart.js b/src/views/Home/panels/Skyb/chart.js new file mode 100644 index 0000000..5c0a83b --- /dev/null +++ b/src/views/Home/panels/Skyb/chart.js @@ -0,0 +1,261 @@ +import React, { useMemo } from 'react'; +import echarts from 'echarts/lib/echarts'; +import ReactEcharts from 'echarts-for-react'; + + +const pallete = [ + ['#177ab3', '#51c3e7'], + ['#9976dc', '#c792ee'], + ['#94a1eb', '#a7caf8'], + ['#7ae5c3', '#c9f4ea'], + ['#c7dca5', '#f5fcd5'], + ['#7988d9', '#9dc6f1'], + ['#d9ed8f', '#d3f89b'], +]; + +const palleteLen = pallete.length; + +const data = [ + [ + "2025-06-02 15:00:00", + 134.05 + ], + [ + "2025-06-02 16:00:00", + 134.04 + ], + [ + "2025-06-02 17:00:00", + 134.03 + ], + [ + "2025-06-02 18:00:00", + 134.03 + ], + [ + "2025-06-02 19:00:00", + 134.02 + ], + [ + "2025-06-02 20:00:00", + 134.02 + ], + [ + "2025-06-02 21:00:00", + 134.02 + ], + [ + "2025-06-03 01:00:00", + 134 + ], + [ + "2025-06-03 02:00:00", + 133.99 + ], + [ + "2025-06-03 04:00:00", + 133.99 + ], + [ + "2025-06-03 06:00:00", + 133.97 + ], + [ + "2025-06-03 08:00:00", + 133.97 + ], + [ + "2025-06-03 10:00:00", + 133.97 + ], + [ + "2025-06-03 12:00:00", + 133.98 + ], + [ + "2025-06-03 13:00:00", + 133.97 + ], + [ + "2025-06-03 14:00:00", + 133.97 + ] +] + + + + +const AreaDrpChart = () => { + + + + var option = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow', + label: { + show: false + } + }, + valueFormatter: (value) => value + ' 万m³' + }, + grid: { + top: 42, + left: 50, + right: 0, + bottom: 27, + }, + legend: { + data: ['警戒水位', '危险水位','水位'], + top: '8', + icon:'circle', + left: 'center', + itemWidth: 11,//11, + itemHeight: 11,//11, + textStyle: { + color: '#B9BFC9', + fontSize: 12,//12 + } + }, + xAxis: [ + { + type: 'category', + // data: x, + splitLine: { + show: true, //隐藏X轴轴线 + lineStyle: { + color: 'rgba(255,255,255,0.2)', + width: 0 + } + }, + axisLabel: { + show: true, + textStyle: { + color: '#B9BFC9' //X轴文字颜色 + }, + formatter: val => val.substr('2020-10-14 '.length, 5), + // rotate: 20, // 角度值：Number + fontSize: 10,//10 + }, + axisLine: { + show: true, //隐藏X轴轴线 + lineStyle: { + color: 'rgba(255,255,255,0.2)', + width: 0 + } + }, + axisTick: { + show: true, + } + } + ], + yAxis: [ + { + type: 'value', + position: 'left', + name: '水位m', + nameTextStyle: { + color: '#B9BFC9', + fontSize: 10,//10, + padding: [0, 0, 0, -40],//[0, 0, 0, -30]//控制y轴标题位置 + }, + nameGap: 17, + + splitLine: { + show: true, + lineStyle: { + width: 1, + color: 'rgba(255,255,255,0.2)' + } + }, + axisLabel: { + show: true, + textStyle: { + color: '#B9BFC9', + fontSize: 11,//11 + } + }, + axisLine: { + show: false + }, + axisTick: { + show: false, + }, + min: 133, + // max: 135, + } + ], + series: [ + { + name: '水位', + type: 'line', + barWidth: 10, + data: data, + showSymbol: false, + itemStyle: { + normal: { + color: '#32e1b5' + }, + }, + // label: { + // show: true, + // position: 'top', + // color: '#bbb', + // fontSize: 12, + // textShadowBlur: 4, + // textShadowColor: '#6ab', + // }, + }, + { + name: '警戒水位', + type: 'line', + barWidth: 10, + showSymbol: false, + data: data.map((item)=>134.5), + itemStyle: { + normal: { + color: '#f19932' + }, + }, + // label: { + // show: true, + // position: 'top', + // color: '#bbb', + // fontSize: 12, + // textShadowBlur: 4, + // textShadowColor: '#6ab', + // }, + }, + { + name: '危险水位', + type: 'line', + barWidth: 10, + showSymbol: false, + data: data.map((item)=>134.8), + itemStyle: { + normal: { + color: '#e1554e' + }, + }, + // label: { + // show: true, + // position: 'top', + // color: '#bbb', + // fontSize: 12, + // textShadowBlur: 4, + // textShadowColor: '#6ab', + // }, + } + ] + }; + + return ( + + ) +} + +export default React.memo(AreaDrpChart); diff --git a/src/views/Home/panels/Skyb/index.js b/src/views/Home/panels/Skyb/index.js new file mode 100644 index 0000000..cd03696 --- /dev/null +++ b/src/views/Home/panels/Skyb/index.js @@ -0,0 +1,53 @@ +import React, { useMemo, useState } from 'react'; +import { Switch, FormControlLabel,InputLabel, Select, MenuItem,FormControl } from '@material-ui/core/index' +import PanelBox from '../../components/PanelBox'; +import AreaDrpChart from './chart'; +import TableYb from './tableYb' +import './index.less' + +function DrpReal({ style }) { + const [dimension, setDimension] =useState('ft'); + + + return ( + + {/* */} +
+ +
+ + } + > +
+
+
水库雨量预报
+ +
+
+
水库24h预报
+ +
+
+ + ) +} + +export default DrpReal; diff --git a/src/views/Home/panels/Skyb/index.less b/src/views/Home/panels/Skyb/index.less new file mode 100644 index 0000000..dd7798b --- /dev/null +++ b/src/views/Home/panels/Skyb/index.less @@ -0,0 +1,10 @@ +.skyb-box{ + padding: 5px; +} +.title-yb{ + width: 130px; + text-align: center; + color: #fff; + background: url(../../../../assets/testBg.png) no-repeat; + margin: 10px 5px; +} \ No newline at end of file diff --git a/src/views/Home/panels/Skyb/tableYb.js b/src/views/Home/panels/Skyb/tableYb.js new file mode 100644 index 0000000..d95dd26 --- /dev/null +++ b/src/views/Home/panels/Skyb/tableYb.js @@ -0,0 +1,71 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core'; + +const useStyles = makeStyles((theme) => ({ + root: { + backgroundColor: '#0d1117', + borderRadius: 4, + overflow: 'hidden', + }, + table: { + width: '100%', + borderCollapse: 'collapse', + color: '#c9d1d9', + '& th': { + backgroundColor: '#161b22', + padding: theme.spacing(1.5), + textAlign: 'center', + fontWeight: 'normal', + fontSize: '0.9rem', + borderBottom: '1px solid #30363d', + }, + '& td': { + padding: theme.spacing(1.5), + textAlign: 'center', + fontSize: '0.9rem', + borderBottom: '1px solid #30363d', + }, + '& tr:last-child td': { + borderBottom: 'none', + }, + }, +})); + +const RainfallTable = () => { + const classes = useStyles(); + const rainfallData = { + oneHour: 0, + threeHours: 0, + sixHours: 0.1, + twelveHours: 0.2, + twentyFourHours: 0.2, +}; + return ( +
+ + + + + + + + + + + + + + + + + + + +
1h3h6h12h24h
{rainfallData.oneHour}{rainfallData.threeHours}{rainfallData.sixHours}{rainfallData.twelveHours}{rainfallData.twentyFourHours}
+
+ ); +}; + + + +export default RainfallTable; \ No newline at end of file diff --git a/src/views/Home/panels/Warn/ShYj.js b/src/views/Home/panels/Warn/ShYj.js index 2cf42df..686f33a 100644 --- a/src/views/Home/panels/Warn/ShYj.js +++ b/src/views/Home/panels/Warn/ShYj.js @@ -95,7 +95,8 @@ function ShYj({ data }) { }, [dispatch]); const showdata = hisdata?.length > 0 ? hisdata : (data || []); - + console.log("showdatashowdata",showdata); + return (
{ diff --git a/src/views/Home/panels/WeatherForcast/WF.js b/src/views/Home/panels/WeatherForcast/WF.js index d83c303..c717e4d 100644 --- a/src/views/Home/panels/WeatherForcast/WF.js +++ b/src/views/Home/panels/WeatherForcast/WF.js @@ -1,6 +1,6 @@ import { Button, Grid, makeStyles } from '@material-ui/core' import { CheckBox, CheckBoxOutlineBlank } from '@material-ui/icons'; -import React, { useMemo } from 'react'; +import React, { useMemo,useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import DpAlert from '../../../../layouts/mui/DpAlert'; import H24Player from './H24Player'; @@ -53,6 +53,8 @@ function WF() { dispatch.shyjview.showWeather24h(); const map = window.__mapref map.setLayoutProperty('热力图', 'visibility', 'none'); + // if (map) { + // } } const genWeatherContourRadar = () => { @@ -72,6 +74,15 @@ function WF() { dispatch.runtime.setLayerSetting({ contour: newContourSetting }) } + // useEffect(() => { + // let timer = setTimeout(() => { + // genWeatherContour24H() + // },0) + // return () => { + // clearTimeout(timer) + // } + // }, []) + return (
diff --git a/src/views/Home/panels/Yawg/index.js b/src/views/Home/panels/Yawg/index.js index b48b158..b1907d7 100644 --- a/src/views/Home/panels/Yawg/index.js +++ b/src/views/Home/panels/Yawg/index.js @@ -17,15 +17,71 @@ import { renderHDRz } from '../../../../utils/renutils'; import Setting from './Setting'; import { InfoPopNames } from '../../InfoPops'; import config from '../../../../config'; -import { showData,bzData} from './constatData' +import { showData, bzData } from './constatData' +import {Typography,makeStyles} from '@material-ui/core'; import './index.less' -function rzRender(rz, base) { - return ( - = base ? 'red' : '#fff' }}> - {typeof base === 'number' ? base.toFixed(2) : ''} - - ); -} +const useStyles = makeStyles((theme) => ({ + root: { + width: '100%', + backgroundColor: 'transparent', + color: '#fff' + }, + tabs: { + borderBottom: '1px solid rgba(255, 255, 255, 0.12)', + '& .MuiTab-root': { + color: '#fff', + '&.Mui-selected': { + color: '#2196f3' + } + }, + '& .MuiTabs-indicator': { + backgroundColor: '#2196f3' + } + }, + table: { + backgroundColor: 'transparent', + '& .MuiTableCell-root': { + color: '#fff', + borderColor: 'rgba(255, 255, 255, 0.12)' + } + }, + statsContainer: { + marginTop: theme.spacing(2), + backgroundColor: 'rgba(0, 0, 0, 0.2)', + borderRadius: theme.shape.borderRadius, + padding: theme.spacing(2) + }, + statsRow: { + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + marginBottom: theme.spacing(1) + }, + warningCell: { + backgroundColor: 'rgba(156, 39, 176, 0.3)' + }, + yearLabel: { + backgroundColor: '#1976d2', + padding: '2px 2px', + borderRadius: 12, + fontSize: '0.75rem' + }, + title: { + color: '#1976d2', + marginBottom: theme.spacing(2), + marginTop: 10, + marginLeft:20, + display: 'flex', + alignItems: 'center', + '&::before': { + content: '""', + width: 4, + height: 16, + backgroundColor: '#1976d2', + marginRight: theme.spacing(1), + }, + }, +})); function HDReal({ style }) { const dispatch = useDispatch(); @@ -47,11 +103,8 @@ function HDReal({ style }) { }); } } - const wgData = [ - { + const classes = useStyles(); - } - ] const [type, setType] = useState('fx') const toggleStType = (type) => { @@ -59,7 +112,56 @@ function HDReal({ style }) { setType(type) } - +const householdData = [ + { + owner: '张时', + population: 4, + elevation: 125.6, + area: 86.5 + }, + { + owner: '李自才', + population: 3, + elevation: 126.2, + area: 92.3 + }, + { + owner: '王德军', + population: 5, + elevation: 124.8, + area: 110.5 + }, + { + owner: '赵小明', + population: 2, + elevation: 125.9, + area: 75.8 + }, + { + owner: '陈龙', + population: 6, + elevation: 126.5, + area: 135.2 + }, + { + owner: '刘包', + population: 4, + elevation: 125.3, + area: 95.6 + }, + { + owner: '孙有才', + population: 3, + elevation: 124.5, + area: 82.4 + }, + { + owner: '周德佩', + population: 5, + elevation: 126.8, + area: 115.7 + } +]; const toggleAutoRefresh = () => { dispatch.realview.setHdAutoRefresh(!hdAutoRefresh); } @@ -87,7 +189,9 @@ function HDReal({ style }) { } > - {type == 'fx' ?
山洪灾害防治区及重点防治区内需转移人员基本情况
: null} + {type == 'fx' ? + 山洪灾害防治区及重点防治区内需转移人员基本情况 + : null} { type == 'fx' ? <> @@ -102,21 +206,26 @@ function HDReal({ style }) { - {[].map((row) => ( + {householdData.map((row) => ( flyTo(row, 'bz')}> - {row.pustName} + {row.owner} - {row.pustType} + {row.population} - {row.irrCode_dictText} + + {row.elevation} + + {row.area} ))} -
风险统计
+ + 风险统计 +
35
diff --git a/src/views/Home/panels/Yuanyfa/ARzSk.js b/src/views/Home/panels/Yuanyfa/ARzSk.js new file mode 100644 index 0000000..6d4b5a1 --- /dev/null +++ b/src/views/Home/panels/Yuanyfa/ARzSk.js @@ -0,0 +1,75 @@ +import React from 'react'; +import moment from 'moment'; +import { Typography } from '@material-ui/core'; +import { useDispatch } from 'react-redux'; +import { InfoPopNames } from '../../InfoPops'; +import { MailOutline } from '@material-ui/icons'; +import { skInfo } from '../../../../models/_/search'; +import config from '../../../../config'; + +function Item({ data, viewInfo, sendMessage }) { + return ( +
+
+
+
+
+
viewInfo(data)}>{data.stnm}
+
+
+{(data.rz - data.fsltdz).toFixed(2)}
+
+
+ + 水库汛限水位{data.fsltdz}m。 + + + 实时监测水位{data.rz}m，超出汛限水位{(data.rz - data.fsltdz).toFixed(2)}m + +
+
+ {moment(data.rzTm).format('YYYY-MM-DD HH:mm')} + sendMessage(data)} /> +
+
+
+ ); +} + +function ARzSk({ data }) { + data = data || []; + const dispatch = useDispatch(); + + const flyTo = (record) => { + const { lgtd, lttd } = record; + if (lgtd && lttd) { + dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealSkPop, properties: record, coordinates: [lgtd, lttd] }); + dispatch.runtime.setCameraTarget({ + center: [lgtd, lttd], + zoom: 15, + pitch: config.poiPitch, + }); + } + } + + const sendMessage = (record) => { + skInfo(record).then(data => { + if (data) { + console.log(record, data); + const txt = `${record.stnm}在${moment(record.rzTm).format('D日H时')}测得水位为${record.rz}米，超汛限水位(${record.fsltdz})${(record.rz - record.fsltdz).toFixed(2)}米，请做好核实防范工作。`; + dispatch.runtime.setInfoDlg({ layerId: 'SkSmtp', properties: { stnm: data.stnm, stcd: data.stcd, personels: data.personels, txt } }) + } + }) + } + + return ( +
+ { + data.map(o => ( + + )) + } +
+ ) +} + +export default ARzSk; diff --git a/src/views/Home/panels/Yuanyfa/Hdyj.js b/src/views/Home/panels/Yuanyfa/Hdyj.js new file mode 100644 index 0000000..babb33c --- /dev/null +++ b/src/views/Home/panels/Yuanyfa/Hdyj.js @@ -0,0 +1,105 @@ +import React, { useCallback, useEffect, useState } from 'react'; +import './ShYj.less'; +import appconsts from '../../../../models/appconsts'; +import { useDispatch } from 'react-redux'; +import apiurl from '../../../../models/apiurl'; +import { httpget } from '../../../../utils/request'; +import DpAlert from '../../../../layouts/mui/DpAlert'; +import moment from 'moment'; +import { HDRealPromise } from '../../../../models/_/real'; +import { InfoPopNames } from '../../InfoPops'; +import { hdyjLatestClosed } from '../../../../models/_/hdyj'; +import config from '../../../../config'; + + +function Item({ data, viewInfo, flyTo }) { + const tm1 = moment(data.exptm).format('YYYY-MM-DD HH:mm'); + const tm2 = moment(data.tm).format('YYYY-MM-DD HH:mm'); + + const rz = data.rz; + const brz = data[appconsts.stWarnLevelKey[data.level]]; + const arz = typeof brz === 'number' ? (rz - brz).toFixed(2) : '-'; + + return ( +
+
+
+
+
+
+ flyTo(data)}>{data.stnm} +
+
+
{appconsts.stWarnStatus[data.status]}
+
+
+ {`报警水位${rz}m，测站${appconsts.stWarnLevel[data.level]}为${brz ?? '-'}m，超${arz || '-'}m`} +
+
+ 报警: {tm1} + { + tm2 !== tm1 ? ( + 更新: {tm2} + ) : null + } + viewInfo(data)}>处理 +
+
+
+ ); +} + + +function Hdyj({ data }) { + + const [hisdata, sethisdata] = useState(); + + useEffect(() => { + if (!data) { + return; + } + + if (data.length === 0) { + hdyjLatestClosed().then(data => { + sethisdata(data || []) + }); + } + }, [data?.length]); + + const dispatch = useDispatch(); + const viewInfo = useCallback((record) => { + dispatch.runtime.setInfoDlg({ layerId: 'StWarnRecord', properties: record }) + }, [dispatch]); + + + const flyTo = useCallback(async ({ stcd, source }) => { + const list = await HDRealPromise.get() || []; + const record = list.find(o => o.stcd === stcd) || {}; + const { lgtd, lttd } = record; + if (lgtd && lttd) { + dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealHDPop, properties: record, coordinates: [lgtd, lttd] }); + dispatch.runtime.setCameraTarget({ + center: [lgtd, lttd], + zoom: 15, + pitch: config.poiPitch, + }); + } + }, [dispatch]); + + const showdata = hisdata?.length > 0 ? hisdata : (data || []); + + return ( +
+ { + hisdata?.length > 0 && 当前无预警，显示最新10条已关闭预警 + } + { + showdata.map(o => ( + + )) + } +
+ ) +} + +export default React.memo(Hdyj); diff --git a/src/views/Home/panels/Yuanyfa/ShYj.js b/src/views/Home/panels/Yuanyfa/ShYj.js new file mode 100644 index 0000000..7f767d6 --- /dev/null +++ b/src/views/Home/panels/Yuanyfa/ShYj.js @@ -0,0 +1,100 @@ +import React, { useCallback, useEffect, useState } from 'react'; +import './ShYj.less'; +import appconsts from '../../../../models/appconsts'; +import { useDispatch } from 'react-redux'; +import apiurl from '../../../../models/apiurl'; +import { httpget } from '../../../../utils/request'; +import config from '../../../../config'; +import DpAlert from '../../../../layouts/mui/DpAlert'; +import { DcpjPromise } from '../../../../models/_/dcpj'; + +function Item({ data, viewInfo,index }) { + return ( +
+ {/*
+
*/} +
+
+
viewInfo(data)}>{ index + 1}、{data.adnm || '--'}
+
+ {/*
{appconsts.warnStatus_TYPE[data.warnstatusid]}
*/} +
+
+
+ 预演时段: + {data.ranger} +
+
+ 情景类别: + {data.type} +
+
+ 生成时间: + {data.time} +
+
+
+ {/*
*/} + {/* {data.warnstm.substr(0, 'yyyy-mm-dd hh:mm'.length)} */} + viewInfo(data)} style={{ textAlign: 'right' }}>加载方案 +
+
+
+ ); +} + + +function ShYj({ data,setYyfaObj }) { + + const [hisdata, sethisdata] = useState(); + + useEffect(() => { + if (!data) { + return; + } + + if (data.length === 0) { + httpget(apiurl.shyj.find, { adcd: config.SHYJ_ADCD, page: 1, size: 10, warnstatusid: 30 }) + .then(({ data }) => sethisdata(data.list || [])) + } + }, [data?.length]); + + const dispatch = useDispatch(); + const viewInfo = (data) => { + // dispatch.runtime.setYyfa({ name: "数字化预演", data }) + setYyfaObj({show:true,data}) + } + + const showdata = [ + { + adnm:'黄土岗镇英山畈村', + ranger: '2024-12-10 10:00:00至2024-12-10 18:00:00', + type: '实测降雨+无隐患', + time:'2024-12-10 12:24:21' + }, + { + adnm:'黄土岗镇', + ranger: '2024-12-10 10:00:00至2024-12-10 18:00:00', + type: '实测降雨+无隐患', + time:'2024-12-10 16:23:26' + }, + { + adnm:'黄土岗镇英山畈村', + ranger: '2024-12-10 10:00:00至2024-12-10 18:00:00', + type: '实测降雨+无隐患', + time:'2024-12-10 17:54:36' + } + ] + + return ( +
+ { + showdata.map((o,i) => ( + + )) + } +
+ ) +} + +export default React.memo(ShYj); diff --git a/src/views/Home/panels/Yuanyfa/ShYj.less b/src/views/Home/panels/Yuanyfa/ShYj.less new file mode 100644 index 0000000..a95671b --- /dev/null +++ b/src/views/Home/panels/Yuanyfa/ShYj.less @@ -0,0 +1,128 @@ +.dppanel-shyj { + padding: 0.75rem 0.5rem; + color: #fff; + + .tool { + display: flex; + margin-bottom: 0.5rem; + } + + .item { + display: flex; + padding: 0.5rem; + align-items: flex-start; + + border-bottom: 1px dashed #bce9f088; + + .header { + width: 2.25rem; + height: 2.25rem; + background-size: 80% 80% !important; + margin-right: 1rem; + flex-shrink: 0; + margin-top: 0.5rem; + } + .header.alert1 { + background: url(../../../../assets/icons/报警1.png) no-repeat center center; + } + .header.alert2 { + background: url(../../../../assets/icons/报警2.png) no-repeat center center; + } + .header.alertsk { + background: url(../../../../assets/icons/水库超限.png) no-repeat center center; + } + .header.level1 { + background: url(../../../../assets/icons/level1.png) no-repeat center center; + } + .header.level2 { + background: url(../../../../assets/icons/level2.png) no-repeat center center; + } + .header.level3 { + background: url(../../../../assets/icons/level3.png) no-repeat center center; + } + + + .content { + flex-grow: 1; + } + + .main { + display: flex; + align-items: center; + margin-bottom: 0.5rem; + font-size: 1rem; + + .title { + cursor: pointer; + font-weight: bold; + color: aliceblue; + } + + .span{ + flex-grow: 1; + } + + .extra { + color: antiquewhite; + } + } + + .desc { + color: #ccc; + font-size: 0.9rem; + .item-row{ + text-align: left; + margin-left: 15px; + margin-bottom: 6px; + display: flex; + padding-right: 10px; + .item-key{ + display: inline-block; + width: 66px; + color: #799fb9; + } + .item-value{ + display: inline-block; + margin-left: 8px; + color: #fff; + } + } + .bold { + font-weight: bold; + margin: 0 0.2rem; + } + } + + + .tail { + color: #ccc; + font-size: 0.9rem; + margin-top: 0.4rem; + display: flex; + align-items: center; + + .bold { + font-weight: bold; + margin: 0 0.2rem; + } + + span { + flex-grow: 1; + } + + .action { + font-size: 1.2rem; + cursor: pointer; + } + } + + .drpgrid { + display: flex; + justify-content: space-around; + + .item { + text-align: center; + } + } + } +} \ No newline at end of file diff --git a/src/views/Home/panels/Yuanyfa/Shqx.js b/src/views/Home/panels/Yuanyfa/Shqx.js new file mode 100644 index 0000000..bd772ad --- /dev/null +++ b/src/views/Home/panels/Yuanyfa/Shqx.js @@ -0,0 +1,66 @@ +import { Button, Divider } from '@material-ui/core'; +import React from 'react' +import { useDispatch } from 'react-redux'; +import { YjhisStat } from '../../../../models/_/shqxjs'; +import useRequest from '../../../../utils/useRequest'; +import DpAlert from '../../../../layouts/mui/DpAlert'; +import ZsTable from '../Shqx/ZsTable'; + + +function Shqx({ data: latest }) { + const { data } = useRequest(async () => { + if (!latest) { + return null; + } + let ret = await YjhisStat(latest.tm); + if (!ret) { + return { error: '数据获取失败' }; + } + return { data: ret }; + }, latest); + + const dispatch = useDispatch(); + const viewInfo = () => { + dispatch.runtime.setInfoDlg({ layerId: 'ShqxGrbInfo', properties: latest }) + }; + + return ( +
+ { + latest ? ( + {`预测时间: ${latest.tm}`} + ) : null + } + { + data?.error ? ( + {data.error} + ) : null + } + { + data?.data ? ( + <> + + + + +
+
+ +
+ + ) : null + } +
+ ) +} + +export default Shqx diff --git a/src/views/Home/panels/Yuanyfa/index.js b/src/views/Home/panels/Yuanyfa/index.js new file mode 100644 index 0000000..274c885 --- /dev/null +++ b/src/views/Home/panels/Yuanyfa/index.js @@ -0,0 +1,166 @@ +import clsx from 'clsx'; +import React, { useState, useEffect } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import { hdyjUnclose } from '../../../../models/_/hdyj'; +import { OverallPromise } from '../../../../models/_/real'; +import { ShqxYjhisLatest } from '../../../../models/_/shqxjs'; +import { RealShWarnListPromise } from '../../../../models/_/shwarn'; +import { yjLevelColor } from '../../../../utils/renutils'; +import useRefresh from '../../../../utils/useRefresh'; +import useRequest from '../../../../utils/useRequest'; +import PanelBox from '../../components/PanelBox'; +import ARzSk from './ARzSk'; +import Hdyj from './Hdyj'; +import Shqx from './Shqx'; +import ShYj from './ShYj'; +import { styled } from '@material-ui/styles'; + +import { RadioGroup, Radio, Switch, FormControlLabel, InputLabel, Select, MenuItem, FormControl } from '@material-ui/core/index'; +import { backgroundColor } from 'echarts/lib/theme/dark'; +import { Description } from '@material-ui/icons'; +import DescriptionItem from '../../components/DescrptionItem'; +export default function Warn({ style }) { + const dispatch = useDispatch(); + const res = useSelector(s => s.runtime.yyObj) + const [value, setValue] = React.useState(res.yy ?? ''); + const [yyValue, setYyValue] = React.useState(false); + const StyledFormControlLabel = styled(FormControlLabel)({ + display: 'flex', + // justifyContent: 'space-around', + width: '100%', + margin: '4px 0', + padding: '4px 0', + '.MuiFormControlLabel-label': { + width: "100%", + color: '#fff', + order: -1 // 让文字在前面 + }, + '.MuiRadio-root': { + color: '#fff', + padding: '4px' + } + + }); + + const CustomSwitch = styled(Switch)({ + '& .MuiSwitch-switchBase': { + color: '#fff', + '&.Mui-checked': { + color: '#1890ff', + '& + .MuiSwitch-track': { + backgroundColor: '#1890ff', + opacity: 0.5, + }, + }, + }, + '& .MuiSwitch-track': { + backgroundColor: 'rgba(255, 255, 255, 0.3)', + }, + }); + + const StyledFormControlLabel1 = styled(FormControlLabel)({ + '& .MuiFormControlLabel-label': { + color: '#fff' + } + }); + const [dimension, setDimension] = useState('fqh'); + const [checked, setChecked] = React.useState(false); + const fayy = () => { + setYyValue(true) + if (value) { + dispatch.runtime.setYyfa({ yy: value }) + } + } + + useEffect(() => { + setValue(res.yy) + }, [res]) + const switchChange = (e) => { + const val = e.target.checked + setChecked(val) + if (val) { + dispatch.runtime.setCameraTarget({ + center: [114.81944, 31.12068], + zoom: 13, + pitch: 60, + }); + } else { + dispatch.runtime.setHome(); + + } + } + const schemes = [ + { id: '2025001', name: '2025001预案' }, + { id: '2025002', name: '2025002预案' }, + { id: '2025003', name: '2025003预案' }, + ]; + const [selectedSchemes, setSelectedSchemes] = useState([]); + + const handleCompare = (schemeId) => { + if (selectedSchemes.includes(schemeId)) { + setSelectedSchemes(selectedSchemes.filter(id => id !== schemeId)); + } else if (selectedSchemes.length < 2) { + setSelectedSchemes([...selectedSchemes, schemeId]); + } + }; + + useEffect(() => { + dispatch.runtime.setDuibifx(selectedSchemes) + }, [selectedSchemes]) + + const productFa = () => { + dispatch?.runtime.setInfoDlg({ layerId: 'YuananLayer', properties: {} }) + } + return ( + + 自动生成方案 + 加载方案 +
+ } + > +
+ + setValue(e.target.value)} + + > + { + schemes.map(item => ( + } + label={} + style={{ color: "#fff" }} /> + )) + } + + + {res.yy && +
+ + {/*
+
最大淹没范围
+
+ 淹没耕地:1824.8(公顷) + 淹没面积:48.9(平方公里) +
+ 淹没人口:3.211(万人) +
*/} + {/*
+ +
*/} +
} +
+ + ) +}