防汛页面

src/models/map/index.js

@@ -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(map){
-        if(layer){
+          const layer = map.getLayer('临时水库tz')
+          if(layer){
             map.removeLayer('临时水库tz');
             map.removeSource('临时水库tz');
+          }
         }
       }
     }

src/models/map/layout.js

@@ -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: '警报' },
-          { key: '防洪形势雨情2', style: {  flexGrow: 1 } },
+          { key: '防洪形势雨情2', style: {} },
-          { key: '重点关注水情', style: {  flexGrow: 1 } },
+          { 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: '重要水库预报', style: {  flexGrow: 1 } },
-          // { key: '气象预警综述' },
           { key: '河流重要断面预报', style: { height: '40%', flexGrow: 1 } },
-          { key: '重要水库预报', style: { height: '18rem', flexGrow: 1 } },
         ];
       } else if (view === 6) {
         right = [

src/views/Home/PanelIndex.js

@@ -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">

src/views/Home/panels/Czdbl/index.js

@@ -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;

src/views/Home/panels/Czdbl/table.js

@@ -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);

src/views/Home/panels/FhxsYq2/chart.js

@@ -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%' }}
     />
   )
 }

src/views/Home/panels/FhxsYq2/index.js

@@ -158,12 +158,70 @@ 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) => {
     const { lgtd, lttd } = 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>
   )
 }

src/views/Home/panels/Hlzydm/index.js

@@ -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:'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:'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:'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:'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:'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 style={{ minWidth: '5rem' }} align="left">流域</DpTableCell>
-              <DpTableCell align="center">断面名称</DpTableCell>
+              <DpTableCell style={{ minWidth: '7rem' }} align="center">断面名称</DpTableCell>
-              <DpTableCell align="center">洪峰水位</DpTableCell>
+              <DpTableCell style={{ minWidth: '7rem' }} align="center">预计洪峰水位</DpTableCell>
-              <DpTableCell align="center">洪峰流量</DpTableCell>
+              <DpTableCell style={{ minWidth: '7rem' }} align="center">预计洪峰流量</DpTableCell>
-              <DpTableCell align="center">峰现时间</DpTableCell>
+              <DpTableCell style={{ minWidth: '7rem' }} align="center">峰现时间</DpTableCell>
             </TableRow>
           </TableHead>
           <TableBody>

src/views/Home/panels/Tqyb24h/index.js

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

src/views/Home/panels/Zdgzsq/index.js

@@ -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: tab2==='1'})} style={{marginRight:'0.3rem'}} onClick={() => setTab2('1')}>政区</span>
-            <span className={clsx({ active: false})} style={{marginRight:'0.3rem'}}>流域</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>
   )
 }

src/views/Home/panels/Zdgzsq/table.js

@@ -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:'宋埠镇', name2:'项生(宋埠)', name3:'675.49', name4:'680.23', name5:'692.17' },
-  { name:'朱家河', dm:'龙岗假山头', hfsw:'130.55', hfll:'55.65', tm:'05-29 14:30' },
+  { name:'黄土岗镇', name2:'鹰山畈(黄土岗)', name3:'692.92', name4:'710.29', name5:'728.38' },
-  { 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' },
+const data2 = [
-  { name:'沙河', dm:'於潜', hfsw:'69.09', hfll:'15.11', tm:'05-29 14:00' },
+  { 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 style={{ minWidth: '6rem' }} align="left">{tab==='1'?'乡镇':'流域'}</DpTableCell>
-              <DpTableCell align="center">断面名称</DpTableCell>
+              <DpTableCell style={{ minWidth: '8rem' }} align="center">测站</DpTableCell>
-              <DpTableCell align="center">洪峰水位</DpTableCell>
+              <DpTableCell style={{ minWidth: '6rem' }} align="center">实时水位(m)</DpTableCell>
-              <DpTableCell align="center">洪峰流量</DpTableCell>
+              <DpTableCell style={{ minWidth: '6rem' }} align="center">警戒水位(m)</DpTableCell>
-              <DpTableCell align="center">峰现时间</DpTableCell>
+              <DpTableCell style={{ minWidth: '6rem' }} align="center">保证水位(m)</DpTableCell>
             </TableRow>
           </TableHead>
           <TableBody>
-            {data.map((row) => (
+            {(tab==='1'?data:data2).map((row) => (
-              <DpTableRow key={row.stcd}>
+              <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.name2}</DpTableCell>
-                <DpTableCell align="center">{row.hfsw}</DpTableCell>
+                <DpTableCell align="center">{row.name3}</DpTableCell>
-                <DpTableCell align="center">{row.hfll}</DpTableCell>
+                <DpTableCell align="center">{row.name4}</DpTableCell>
-                <DpTableCell align="center">{row.tm}</DpTableCell>
+                <DpTableCell align="center">{row.name5}</DpTableCell>
               </DpTableRow>
             ))}
           </TableBody>

src/views/Home/panels/Zyskyb/index.js

@@ -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>
   )
 }