lishenfeng
/
mcfxkh-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

防汛页面

lsf-dev
秦子超 2025-06-13 09:14:33 +08:00
parent 4be858d3e8
commit 9b29aa1d3e
14 changed files with 455 additions and 4421 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/models/map/index.js
View File

@ -545,27 +545,39 @@ const map = {
// }
if (id === 201) {
dispatch.map.setLayerSetting({ dom: false });
map.setLayoutProperty('热力图', 'visibility', 'visible');
if(map){
map.setLayoutProperty('热力图', 'visibility', 'visible');
}
} else {
// dispatch.map.setLayerSetting({dom: true});
map.setLayoutProperty('热力图', 'visibility', 'none');
if(map){
map.setLayoutProperty('热力图', 'visibility', 'none');
}
}
if (id === 306) {
if (id === 306 && map) {
dispatch.map.setLayerSetting({ dom: false });
dispatch.runtime.setShowGw(true)
// map.setLayoutProperty('管网图', 'visibility', 'visible');
// if(map){
// map.setLayoutProperty('管网图', 'visibility', 'visible');
// }
} else {
dispatch.runtime.setShowGw(false)
// dispatch.map.setLayerSetting({dom: true});
// map.setLayoutProperty('管网图', 'visibility', 'none');
// if(map){
// map.setLayoutProperty('管网图', 'visibility', 'none');
// }
}
if (id === 503 || id == 501 || id == 504 || id == 505 || id == 506 || id == 507) {
dispatch.map.setLayerSetting({ dom: false });
map.setLayoutProperty('灌区图', 'visibility', 'visible');
if(map){
map.setLayoutProperty('灌区图', 'visibility', 'visible');
}
} else {
// dispatch.map.setLayerSetting({dom: true});
map.setLayoutProperty('灌区图', 'visibility', 'none');
if(map){
map.setLayoutProperty('灌区图', 'visibility', 'none');
}
}
if (id != 504) {
dispatch.runtime.setYyfa({})
@ -580,17 +592,23 @@ const map = {
|| id === 200
) {
dispatch.map.setLayerSetting({ dom: true });
// map.setLayoutProperty('卫星图', 'visibility', 'visible');
// if(map){
// map.setLayoutProperty('卫星图', 'visibility', 'visible');
// }
} else {
dispatch.map.setLayerSetting({ dom: false });
// map.setLayoutProperty('卫星图', 'visibility', 'none');
// if(map){
// map.setLayoutProperty('卫星图', 'visibility', 'none');
// }
}
if(id!==200&&id!==203&&id!==205&&id!==206){
const layer = map.getLayer('临时水库tz')
if(layer){
if(map){
const layer = map.getLayer('临时水库tz')
if(layer){
map.removeLayer('临时水库tz');
map.removeSource('临时水库tz');
}
}
}
}

14
src/models/map/layout.js
View File

@ -57,7 +57,7 @@ export default function calcLayout(view, rightStack, hidePanels) {
{ key: '天气' },
{ key: '未来24h预报', style: { height: '40%', flexGrow: 1 } },
];
leftFullHeight = true;
// leftFullHeight = true;
} else if (view === 6) {
left = [
{ key: '天气' },
@ -236,9 +236,10 @@ export default function calcLayout(view, rightStack, hidePanels) {
rightFullHeight = true;
}else if (view === 8) {
right = [
{ key: '警报' },
{ key: '防洪形势雨情2', style: { flexGrow: 1 } },
{ key: '重点关注水情', style: { flexGrow: 1 } },
// { key: '警报' },
{ key: '防洪形势雨情2', style: {} },
{ key: '重点关注水情', style: { height: '18rem'} },
{ key: '测站到报率', style: { height: '18rem' } },
// { key: '防洪形势天气预报', style: { height: '18.5rem'} },
// { key: '防洪形势水情', style: { height: '18.5rem'} },
// { key: '河道水位', style: { height: '10rem', flexGrow: 1 } },
@ -246,6 +247,7 @@ export default function calcLayout(view, rightStack, hidePanels) {
// { key: '工情', style: { height: '10rem', flexGrow: 1 } },
// { key: '今日值班' },
];
rightFullHeight = true;
}else if (view === 9) {
right = [
{ key: '警报' },
@ -275,10 +277,8 @@ export default function calcLayout(view, rightStack, hidePanels) {
// ]
} else if (view === 5) {
right = [
{ key: '警报' },
// { key: '气象预警综述' },
{ key: '重要水库预报', style: { flexGrow: 1 } },
{ key: '河流重要断面预报', style: { height: '40%', flexGrow: 1 } },
{ key: '重要水库预报', style: { height: '18rem', flexGrow: 1 } },
];
} else if (view === 6) {
right = [

3
src/views/Home/PanelIndex.js
View File

@ -118,6 +118,7 @@ import Jcgjz from './panels/Jcgjz'
import JbqkLeft from './panels/JbqkLeft'
import FhxsYq2 from './panels/FhxsYq2'
import Zdgzsq from './panels/Zdgzsq'
import Czdbl from './panels/Czdbl'
import Skyb from './panels/Skyb'
@ -417,6 +418,8 @@ export default function PanelIndex({ name, style, ...params }) {
return <FhxsYq2 style={style} />
} else if (name === '重点关注水情') {
return <Zdgzsq style={style} />
} else if (name === '测站到报率') {
return <Czdbl style={style} />
}
return (
<PanelBox style={style} title={name} color="red">

74
src/views/Home/panels/Czdbl/index.js Normal file
View File

@ -0,0 +1,74 @@
import React, { useMemo, useState } from 'react';
import useRequest from '../../../../utils/useRequest';
import PanelBox from '../../components/PanelBox';
import Table from '@material-ui/core/Table';
import TableContainer from '@material-ui/core/TableContainer';
import TableBody from '@material-ui/core/TableBody';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import DpTableCell from '../../../../layouts/mui/DpTableCell';
import DpTableRow from '../../../../layouts/mui/DpTableRow';
import { useDispatch, useSelector } from 'react-redux';
import { DrpRealPromise } from '../../../../models/_/real';
import useRefresh from '../../../../utils/useRefresh';
import clsx from 'clsx';
import { renderDrp } from '../../../../utils/renutils';
import { TableSortLabel } from '@material-ui/core';
import { InfoPopNames } from '../../InfoPops';
// import AreaDrpChart from './chart';
import config from '../../../../config';
import TablePage from './table.js'
function DrpReal({ style }) {
const dispatch = useDispatch();
const [ tab, setTab ] = useState('1')
const [ tab2, setTab2 ] = useState('1')
const data = [
{ name:'余家河', dm:'华光潭二级...', hfsw:'224.1', hfll:'30.25', tm:'05-29 14:00' },
{ name:'朱家河', dm:'龙岗假山头', hfsw:'130.55', hfll:'55.65', tm:'05-29 14:30' },
{ name:'举水', dm:'昌化', hfsw:'103.22', hfll:'75.61', tm:'05-29 15:00' },
{ name:'巴水', dm:'河桥', hfsw:'85.86', hfll:'15.72', tm:'05-30 02:00' },
{ name:'沙河', dm:'於潜', hfsw:'69.09', hfll:'15.11', tm:'05-29 14:00' },
]
const flyTo = (record) => {
const { lgtd, lttd } = record;
if (lgtd && lttd) {
dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealDrpPop, properties: record, coordinates: [lgtd, lttd] });
dispatch.runtime.setCameraTarget({
center: [lgtd, lttd + config.poiPositionOffsetY.drp],
zoom: config.poiPositionZoom.drp,
pitch: config.poiPitch,
bearing: 0
});
}
}
return (
<PanelBox
style={style}
title="测站到报率"
color="green"
tabs={
<>
</>
}
extra={
<>
<span className="button-group">
<span className={clsx({ active: tab==='1' })} onClick={() => setTab('1')}>山洪</span>
<span className={clsx({ active: tab==='2' })} onClick={() => setTab('2')}>水文</span>
<span className={clsx({ active: tab==='3' })} onClick={() => setTab('3')}>水库</span>
</span>
</>
}
>
<TablePage tab={tab}/>
</PanelBox>
)
}
export default DrpReal;

91
src/views/Home/panels/Czdbl/table.js Normal file
View File

@ -0,0 +1,91 @@
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 appconsts from '../../../../models/appconsts';
import { renderDrp, renderSkArz, renderSkRz } from '../../../../utils/renutils';
const data = [
{ name:'雨量站', name2:'10', name3:'8', name4:'2', name5:'80' },
{ name:'水位站', name2:'15', name3:'15', name4:'0', name5:'100' },
{ name:'图像站', name2:'10', name3:'10', name4:'0', name5:'100' },
{ name:'合计', name2:'35', name3:'33', name4:'2', name5:'94.29' },
]
const data2 = [
{ name:'合计', name2:'64', name3:'64', name4:'0', name5:'100' },
]
const data3 = [
{ name:'合计', name2:'12', name3:'12', name4:'0', name5:'100' },
]
function Page({ tab }) {
return (
<TableContainer style={{ height: '12rem' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
<DpTableCell style={{ minWidth: '2rem' }} align="left"></DpTableCell>
<DpTableCell style={{ minWidth: '3rem' }} align="center">总数</DpTableCell>
<DpTableCell style={{ minWidth: '5rem' }} align="center">在线数量</DpTableCell>
<DpTableCell style={{ minWidth: '5rem' }} align="center">离线数量</DpTableCell>
<DpTableCell style={{ minWidth: '5rem' }} align="center">到报率（%）</DpTableCell>
</TableRow>
</TableHead>
<TableBody>
{
tab==='1'?data.map((row) => (
<DpTableRow key={row.name}>
<DpTableCell component="th" scope="row">
<div className="table-ellipsis cursor-pointer" onClick={() => {}}>{row.name}</div>
</DpTableCell>
<DpTableCell align="center">{row.name2}</DpTableCell>
<DpTableCell align="center">{row.name3}</DpTableCell>
<DpTableCell align="center">{row.name4}</DpTableCell>
<DpTableCell align="center">{row.name5}</DpTableCell>
</DpTableRow>
)):null
}
{
tab==='2'?data2.map((row) => (
<DpTableRow key={row.name}>
<DpTableCell component="th" scope="row">
<div className="table-ellipsis cursor-pointer" onClick={() => {}}>{row.name}</div>
</DpTableCell>
<DpTableCell align="center">{row.name2}</DpTableCell>
<DpTableCell align="center">{row.name3}</DpTableCell>
<DpTableCell align="center">{row.name4}</DpTableCell>
<DpTableCell align="center">{row.name5}</DpTableCell>
</DpTableRow>
)):null
}
{
tab==='3'?data3.map((row) => (
<DpTableRow key={row.name}>
<DpTableCell component="th" scope="row">
<div className="table-ellipsis cursor-pointer" onClick={() => {}}>{row.name}</div>
</DpTableCell>
<DpTableCell align="center">{row.name2}</DpTableCell>
<DpTableCell align="center">{row.name3}</DpTableCell>
<DpTableCell align="center">{row.name4}</DpTableCell>
<DpTableCell align="center">{row.name5}</DpTableCell>
</DpTableRow>
)):null
}
</TableBody>
</Table>
</TableContainer>
)
}
export default React.memo(Page);

6
src/views/Home/panels/FhxsYq2/chart.js
View File

@ -43,7 +43,7 @@ const AreaDrpChart = ({ data }) => {
y: 24,
x2: 28,
y2: 36,
bottom: 80,
bottom: 65,
borderWidth: 0
},
calculable: true,
@ -103,7 +103,7 @@ const AreaDrpChart = ({ data }) => {
{
name: '降雨',
type: 'bar',
barWidth: '60%',
barWidth: '10px',
data: sdata.map(o => o.av),
itemStyle: {
normal: {
@ -133,7 +133,7 @@ const AreaDrpChart = ({ data }) => {
return (
<ReactEcharts
option={option}
style={{ height: '14rem', width: '100%' }}
style={{ height: '11rem', width: '100%' }}
/>
)
}

64
src/views/Home/panels/FhxsYq2/index.js
View File

@ -158,11 +158,69 @@ function DrpReal({ style }) {
},
{
"ADCD": "421181471000000",
"NAME": "麻城经济开发区",
"NAME": "经济开发区",
"drp": 0,
"cnt": 0,
"av": 0
}
]
const data2 = [
{
"ADCD": "421181001000000",
"NAME": "举水",
"drp": 40,
"cnt": 0,
"av": 40
},
{
"ADCD": "421181002000000",
"NAME": "巴水",
"drp": 35,
"cnt": 0,
"av": 35
},
{
"ADCD": "421181003000000",
"NAME": "芭茅河",
"drp": 40,
"cnt": 0,
"av": 40
},
{
"ADCD": "421181100000000",
"NAME": "浮桥河",
"drp": 47,
"cnt": 1,
"av": 47
},
{
"ADCD": "421181101000000",
"NAME": "麻溪河",
"drp": 20,
"cnt": 0,
"av": 20
},
{
"ADCD": "421181102000000",
"NAME": "肖家河",
"drp": 15,
"cnt": 0,
"av": 15
},
{
"ADCD": "421181103000000",
"NAME": "余家河",
"drp": 45,
"cnt": 1,
"av": 45
},
{
"ADCD": "421181104000000",
"NAME": "白果河",
"drp": 20,
"cnt": 0,
"av": 20
}
]
const flyTo = (record) => {
@ -192,7 +250,7 @@ function DrpReal({ style }) {
<>
<span className="button-group">
<span className={clsx({ active: tab==='1' })} onClick={() => setTab('1')}>政区</span>
<span className={clsx({ active: tab==='2' })} onClick={() => setTab('1')}>流域</span>
<span className={clsx({ active: tab==='2' })} onClick={() => setTab('2')}>流域</span>
</span>
</>
}
@ -207,7 +265,7 @@ function DrpReal({ style }) {
<span className={clsx({ active: false})} style={{marginRight:'0.3rem'}}>48h</span>
</span>
</div>
<AreaDrpChart data={data} />
<AreaDrpChart data={tab==='1'?data:data2} />
</PanelBox>
)
}

20
src/views/Home/panels/Hlzydm/index.js
View File

@ -14,11 +14,11 @@ import { renderDrp, renderSkArz, renderSkRz } from '../../../../utils/renutils';
const data = [
{ name:'余家河', dm:'华光潭二级...', hfsw:'224.1', hfll:'30.25', tm:'05-29 14:00' },
{ name:'朱家河', dm:'龙岗假山头', hfsw:'130.55', hfll:'55.65', tm:'05-29 14:30' },
{ name:'举水', dm:'昌化', hfsw:'103.22', hfll:'75.61', tm:'05-29 15:00' },
{ name:'巴水', dm:'河桥', hfsw:'85.86', hfll:'15.72', tm:'05-30 02:00' },
{ name:'沙河', dm:'於潜', hfsw:'69.09', hfll:'15.11', tm:'05-29 14:00' },
{ name:'举水', dm:'廖家畈断面', hfsw:'224.1', hfll:'30.25', tm:'05-29 14:00' },
{ name:'举水', dm:'草鞋店断面', hfsw:'130.55', hfll:'55.65', tm:'05-29 14:30' },
{ name:'巴水', dm:'义洲河断面', hfsw:'103.22', hfll:'75.61', tm:'05-29 15:00' },
{ name:'巴水', dm:'义洲河断面', hfsw:'85.86', hfll:'15.72', tm:'05-30 02:00' },
{ name:'芭茅河', dm:'芭茅河断面', hfsw:'69.09', hfll:'15.11', tm:'05-29 14:00' },
]
function SkReal({ style }) {
@ -33,11 +33,11 @@ function SkReal({ style }) {
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
<DpTableCell style={{ maxWidth: '30%' }} align="left">河流名称</DpTableCell>
<DpTableCell align="center">断面名称</DpTableCell>
<DpTableCell align="center">洪峰水位</DpTableCell>
<DpTableCell align="center">洪峰流量</DpTableCell>
<DpTableCell align="center">峰现时间</DpTableCell>
<DpTableCell style={{ minWidth: '5rem' }} align="left">流域</DpTableCell>
<DpTableCell style={{ minWidth: '7rem' }} align="center">断面名称</DpTableCell>
<DpTableCell style={{ minWidth: '7rem' }} align="center">预计洪峰水位</DpTableCell>
<DpTableCell style={{ minWidth: '7rem' }} align="center">预计洪峰流量</DpTableCell>
<DpTableCell style={{ minWidth: '7rem' }} align="center">峰现时间</DpTableCell>
</TableRow>
</TableHead>
<TableBody>

2226
src/views/Home/panels/Tqyb24h/dsld.js
View File

File diff suppressed because it is too large Load Diff

20
src/views/Home/panels/Tqyb24h/index.js
View File

@ -35,17 +35,17 @@ export default function AreaDrp({ style }) {
const dispatch = useDispatch();
const [tab,setTab] = useState('1')
useEffect(()=>{
if(tab==='1'){
dispatch.rcview.showRealContour('h24')
}else{
dispatch.rcview.showRealContour('h48')
}
// if(tab==='1'){
// dispatch.rcview.showRealContour('h24')
// }else{
// dispatch.rcview.showRealContour('h48')
// }
return ()=>{
dispatch.runtime.setLayerSetting({ contour: null, dem: undefined });
dispatch.runtime.setLayerSetting({ planeArea: null });
dispatch.map.setLayerVisible({ ContourLayer: false });
}
// return ()=>{
// dispatch.runtime.setLayerSetting({ contour: null, dem: undefined });
// dispatch.runtime.setLayerSetting({ planeArea: null });
// dispatch.map.setLayerVisible({ ContourLayer: false });
// }
},[tab])

2239
src/views/Home/panels/Tqyb24h/yb24h.js
View File

File diff suppressed because it is too large Load Diff

8
src/views/Home/panels/Zdgzsq/index.js
View File

@ -23,6 +23,7 @@ import TablePage from './table.js'
function DrpReal({ style }) {
const dispatch = useDispatch();
const [ tab, setTab ] = useState('1')
const [ tab2, setTab2 ] = useState('1')
const data = [
{ name:'余家河', dm:'华光潭二级...', hfsw:'224.1', hfll:'30.25', tm:'05-29 14:00' },
{ name:'朱家河', dm:'龙岗假山头', hfsw:'130.55', hfll:'55.65', tm:'05-29 14:30' },
@ -65,12 +66,11 @@ function DrpReal({ style }) {
>
<div className='tabStyle' style={{padding:'5px',paddingBottom:'15px'}}>
<span className="card-group">
<span className={clsx({ active: true})} style={{marginRight:'0.3rem'}}>政区</span>
<span className={clsx({ active: false})} style={{marginRight:'0.3rem'}}>流域</span>
<span className={clsx({ active: tab2==='1'})} style={{marginRight:'0.3rem'}} onClick={() => setTab2('1')}>政区</span>
<span className={clsx({ active: tab2==='2'})} style={{marginRight:'0.3rem'}} onClick={() => setTab2('2')}>流域</span>
</span>
</div>
<TablePage/>
{ tab==='1'?<TablePage tab={tab2}/>:null }
</PanelBox>
)
}

37
src/views/Home/panels/Zdgzsq/table.js
View File

@ -14,37 +14,38 @@ import { renderDrp, renderSkArz, renderSkRz } from '../../../../utils/renutils';
const data = [
{ name:'余家河', dm:'华光潭二级...', hfsw:'224.1', hfll:'30.25', tm:'05-29 14:00' },
{ name:'朱家河', dm:'龙岗假山头', hfsw:'130.55', hfll:'55.65', tm:'05-29 14:30' },
{ name:'举水', dm:'昌化', hfsw:'103.22', hfll:'75.61', tm:'05-29 15:00' },
{ name:'巴水', dm:'河桥', hfsw:'85.86', hfll:'15.72', tm:'05-30 02:00' },
{ name:'沙河', dm:'於潜', hfsw:'69.09', hfll:'15.11', tm:'05-29 14:00' },
{ name:'宋埠镇', name2:'项生(宋埠)', name3:'675.49', name4:'680.23', name5:'692.17' },
{ name:'黄土岗镇', name2:'鹰山畈(黄土岗)', name3:'692.92', name4:'710.29', name5:'728.38' },
]
const data2 = [
{ name:'阎家河', name2:'桃林河(阎河)', name3:'609.78', name4:'603.20', name5:'639.21' },
{ name:'巴水', name2:'杨梅河(木子店)', name3:'509.53', name4:'539.20', name5:'558.29' },
]
function Page({ style }) {
function Page({ tab }) {
return (
<TableContainer style={{ height: '100%' }}>
<TableContainer style={{ height: '12rem' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
<DpTableCell style={{ maxWidth: '30%' }} align="left">河流名称</DpTableCell>
<DpTableCell align="center">断面名称</DpTableCell>
<DpTableCell align="center">洪峰水位</DpTableCell>
<DpTableCell align="center">洪峰流量</DpTableCell>
<DpTableCell align="center">峰现时间</DpTableCell>
<DpTableCell style={{ minWidth: '6rem' }} align="left">{tab==='1'?'乡镇':'流域'}</DpTableCell>
<DpTableCell style={{ minWidth: '8rem' }} align="center">测站</DpTableCell>
<DpTableCell style={{ minWidth: '6rem' }} align="center">实时水位(m)</DpTableCell>
<DpTableCell style={{ minWidth: '6rem' }} align="center">警戒水位(m)</DpTableCell>
<DpTableCell style={{ minWidth: '6rem' }} align="center">保证水位(m)</DpTableCell>
</TableRow>
</TableHead>
<TableBody>
{data.map((row) => (
<DpTableRow key={row.stcd}>
{(tab==='1'?data:data2).map((row) => (
<DpTableRow key={row.name}>
<DpTableCell component="th" scope="row">
<div className="table-ellipsis cursor-pointer" onClick={() => {}}>{row.name}</div>
</DpTableCell>
<DpTableCell align="center">{row.dm}</DpTableCell>
<DpTableCell align="center">{row.hfsw}</DpTableCell>
<DpTableCell align="center">{row.hfll}</DpTableCell>
<DpTableCell align="center">{row.tm}</DpTableCell>
<DpTableCell align="center">{row.name2}</DpTableCell>
<DpTableCell align="center">{row.name3}</DpTableCell>
<DpTableCell align="center">{row.name4}</DpTableCell>
<DpTableCell align="center">{row.name5}</DpTableCell>
</DpTableRow>
))}
</TableBody>

34
src/views/Home/panels/Zyskyb/index.js
View File

@ -3,6 +3,13 @@ import { Switch, FormControlLabel,InputLabel, Select, MenuItem,FormControl } fro
import PanelBox from '../../components/PanelBox';
import config from '../../../../config';
import { useDispatch, useSelector } from 'react-redux';
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 AreaDrpChart from './chart';
@ -238,7 +245,32 @@ function DrpReal({ style }) {
</>
}
>
<AreaDrpChart data={[]} rz={rz}/>
{/* <AreaDrpChart data={[]} rz={rz}/> */}
<div style={{color:'#ffffff',padding:'5px',background:'#313f65',width:"7rem",textAlign:"center",margin:'10px',marginBottom:"10px",borderRadius:'3px',fontSize:'14px'}}>水库雨量预报</div>
<TableContainer style={{ height: '100%' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow style={{height:'3.2rem'}}>
<DpTableCell align="center">h1</DpTableCell>
<DpTableCell align="center">h3</DpTableCell>
<DpTableCell align="center">h6</DpTableCell>
<DpTableCell align="center">h12</DpTableCell>
<DpTableCell align="center">h24</DpTableCell>
</TableRow>
</TableHead>
<TableBody>
<DpTableRow key={1}>
<DpTableCell align="center">0</DpTableCell>
<DpTableCell align="center">0</DpTableCell>
<DpTableCell align="center">0.1</DpTableCell>
<DpTableCell align="center">0.2</DpTableCell>
<DpTableCell align="center">0.2</DpTableCell>
</DpTableRow>
</TableBody>
</Table>
</TableContainer>
<div style={{color:'#ffffff',padding:'5px',background:'#313f65',width:"7rem",textAlign:"center",margin:'10px',marginBottom:"10px",borderRadius:'3px',fontSize:'14px'}}>水库24h预报</div>
<img src={`${process.env.PUBLIC_URL}/assets/yuanyanjg.png`} alt="" style={{ width: '25rem',marginLeft:'0.6rem',marginBottom:"0.5rem" }}/>
</PanelBox>
)
}