防汛修改

public/data/shyjFind.json

@@ -8,7 +8,9 @@
         "warnstm": "2025-05-22 21:00:00",
         "tempcolumn": 0,
         "warnid": 1128,
-        "isauto": "0",
+        "isauto": "0", 
+        "lgtd": 115.01083,
+        "lttd": 31.041152,
         "warnnm": "白果镇山洪准备转移",
         "adnm": "白果镇",
         "adcd": "421181103000000",
@@ -28,6 +30,8 @@
         "warnnm": "夫子河镇北门村山洪准备转移",
         "adnm": "夫子河镇北门村",
         "adcd": "421181104001000",
+        "lgtd": 115.01986,
+        "lttd": 30.968793,
         "warntypeid": 10,
         "temprownumber": 2
     },
@@ -44,6 +48,8 @@
         "warnnm": "夫子河镇山洪准备转移",
         "adnm": "夫子河镇",
         "adcd": "421181104000000",
+        "lgtd": 115.026944,
+        "lttd": 30.959121,
         "warntypeid": 10,
         "temprownumber": 3
     },
@@ -60,6 +66,8 @@
         "warnnm": "福田河镇山洪准备转移",
         "adnm": "福田河镇",
         "adcd": "421181111000000",
+        "lgtd": 115.075433,
+        "lttd": 31.384331,
         "warntypeid": 10,
         "temprownumber": 4
     },
@@ -76,6 +84,8 @@
         "warnnm": "木子店镇山洪准备转移",
         "adnm": "木子店镇",
         "adcd": "421181107000000",
+        "lgtd": 115.172808,
+        "lttd": 30.963342,
         "warntypeid": 10,
         "temprownumber": 5
     },
@@ -92,6 +102,8 @@
         "warnnm": "白果镇山洪准备转移",
         "adnm": "白果镇",
         "adcd": "421181103000000",
+        "lgtd": 115.01083,
+        "lttd": 31.041152,
         "warntypeid": 10,
         "temprownumber": 6
     },
@@ -140,6 +152,8 @@
         "warnnm": "张家畈镇山洪准备转移",
         "adnm": "张家畈镇",
         "adcd": "421181106000000",
+        "lgtd": 115.183208,
+        "lttd": 31.074978,
         "warntypeid": 10,
         "temprownumber": 9
     },
@@ -156,6 +170,8 @@
         "warnnm": "夫子河镇北门村山洪准备转移",
         "adnm": "夫子河镇北门村",
         "adcd": "421181104001000",
+        "lgtd": 115.01986,
+        "lttd": 30.968793,
         "warntypeid": 10,
         "temprownumber": 10
     }

src/models/map/index.js

@@ -177,7 +177,7 @@ const map = {
         Object.keys(DCPJ_TYPES).forEach(key => {
           layerVisible['Dcpj_' + key + 'Layer'] = false;
         });
-      } else if (id === 9) {
+      } else if (id === 8) {
         layerVisible = {
           RealDrpLayer: false,
           RealHDLayer: false,
@@ -187,8 +187,9 @@ const map = {
           YuwaiLayer: false,
           AdcdLayer: true,
           WataLayer: false,
-          RealSkLayerQ2: false,
+          RealSkLayerQ2: true,
-          RealHDLayerQ2: false,
+          RealHDLayerQ2: true,
+          ShyjLayer:true,
         }
         Object.keys(DCPJ_TYPES).forEach(key => {
           layerVisible['Dcpj_' + key + 'Layer'] = false;
@@ -535,13 +536,13 @@ const map = {
       dispatch.runtime.setFeaturePop(null);
 
 
-      if (id === 8) {
+      // if (id === 8) {
-        dispatch.rcview.showRealContour('h24')
+      //   dispatch.rcview.showRealContour('h24')
-      } else {
+      // } else {
-        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 });
-      }
+      // }
       if (id === 201) {
         dispatch.map.setLayerSetting({ dom: false });
         map.setLayoutProperty('热力图', 'visibility', 'visible');
@@ -572,6 +573,7 @@ const map = {
 
       if (
         id === 3 
+        || id === 8
         || id === 203
         || id === 205
         || id === 206

src/models/map/layout.js

@@ -237,14 +237,15 @@ export default function calcLayout(view, rightStack, hidePanels) {
       }else if (view === 8) {
         right = [
           { key: '警报' },
-          { key: '防洪形势天气预报', style: { height: '18.5rem'} },
+          { key: '防洪形势雨情2', style: {  flexGrow: 1 } },
-          { key: '防洪形势水情', style: { height: '18.5rem'} },
+          { key: '重点关注水情', style: {  flexGrow: 1 } },
+          // { key: '防洪形势天气预报', style: { height: '18.5rem'} },
+          // { key: '防洪形势水情', style: { height: '18.5rem'} },
           // { key: '河道水位', style: { height: '10rem', flexGrow: 1 } },
-          { key: '防洪形势雨情', style: { height: '16rem', flexGrow: 1 } },
+          // { key: '防洪形势雨情', style: { height: '16rem', flexGrow: 1 } },
           // { key: '工情', style: { height: '10rem', flexGrow: 1 } },
           // { key: '今日值班' },
         ];
-        rightFullHeight = true;
       }else if (view === 9) {
         right = [
           { key: '警报' },

src/views/Home/MapCtrl/mapstyle/layermgr.js

@@ -3,6 +3,7 @@ import RealHDLayer from "./realhdlayer";
 import RealHDLayerQ2 from "./realhdlayerQ2";
 import RealSkLayer from "./realsklayer";
 import RealSkLayerQ2 from "./realsklayerQ2";
+import ShyjLayer from "./shyjLayer"
 import sources from "./sources";
 
 import base from "./base";
@@ -72,6 +73,7 @@ class LayerMgr {
     this.layers.push(new ShuikuLayer());
     this.layers.push(new RainDrpLayer());
     this.layers.push(new XunchaLayer());
+    this.layers.push(new ShyjLayer());
     //
 
 
@@ -223,6 +225,7 @@ class LayerMgr {
         this.layerMap.ShuikuLayer.getStyle(),
         this.layerMap.RainDrpLayer.getStyle(),
         this.layerMap.XunchaLayer.getStyle(),
+        this.layerMap.ShyjLayer.getStyle(),
         //
 
 

src/views/Home/MapCtrl/mapstyle/shyjLayer.js

@@ -0,0 +1,92 @@
+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 = '山洪预警';
+
+const ShapeStyle = {
+  id: SourceName,
+  type: 'symbol',
+  source: SourceName,
+  layout: {
+    'icon-allow-overlap': true,
+    'text-allow-overlap': true,
+    'icon-image': 'Marker',
+    'icon-size': [
+      'interpolate', ['linear'], ['zoom'],
+      10, 0.8,
+      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'
+  }
+};
+
+
+export default class ShyjLayer extends BaseLayer {
+
+  static LayerName = 'ShyjLayer';
+
+  static SourceName = SourceName;
+
+  getStyle() {
+
+    const ret = clone(ShapeStyle);
+    this._setStyleVisibility(ret);
+    return ret;
+
+  }
+
+  getName() {
+    return ShyjLayer.LayerName;
+  }
+
+  getSubLayers() {
+    return [ShapeStyle.id];
+  }
+
+  async doRefreshLayer(mapCtrl) {
+    const ms = mapCtrl.getSource(SourceName);
+    let data = await fetch(`${process.env.PUBLIC_URL}/data/shyjFind.json`)
+    .then((response) => response.json())
+    .catch(() => null);
+    const list = data.filter(o=>o.lgtd&&o.lttd)
+    ms.setData(parseGeoJSON(list));
+    return true;
+  }
+
+  getFeatureTip(record) {
+    return record.stnm;
+  }
+
+  featureClicked(properties, dispatch) {
+    dispatch.runtime.setInfoDlg({ layerId: 'ShWarn', properties: properties })
+    // dispatch.runtime.setFeaturePop({
+    //   type: InfoPopNames.PicStPop,
+    //   properties,
+    //   coordinates: [properties.lgtd, properties.lttd],
+    //   offsetPop: true,
+    // });
+  }
+}

src/views/Home/MapCtrl/mapstyle/sources.js

@@ -29,7 +29,7 @@ import ShuiyuandiQLayer from "./shuiyuandiQLayer";
 import ShuikuLayer from "./shuikuLayer";
 import RainDrpLayer from "./rainDrpLayer"
 import XunchaLayer from "./xunchalayer"
-
+import shyjLayer from "./shyjLayer"
 
 const hash = window.location.origin;
 
@@ -190,8 +190,11 @@ const sources = {
     }, {})
   ),
 
-
   //新图层
+  [shyjLayer.SourceName]: {
+    type: 'geojson',
+    data: { type: 'FeatureCollection', features: [] },
+  },
   [BxjcLayer.SourceName]: {
     type: 'geojson',
     data: { type: 'FeatureCollection', features: [] },

src/views/Home/PanelIndex.js

@@ -116,6 +116,8 @@ import Cxsk from './panels/Cxsk'
 import Zdtj from './panels/Zdtj'
 import Jcgjz from './panels/Jcgjz'
 import JbqkLeft from './panels/JbqkLeft'
+import FhxsYq2 from './panels/FhxsYq2'
+import Zdgzsq from './panels/Zdgzsq'
 
 
 import Skyb from './panels/Skyb'
@@ -411,6 +413,10 @@ export default function PanelIndex({ name, style, ...params }) {
     return <JbqkLeft style={style} />
   } else if (name === '防汛基本情况右侧') {
     return <JbqkRight style={style} />
+  } else if (name === '防洪形势雨情2') {
+    return <FhxsYq2 style={style} />
+  } else if (name === '重点关注水情') {
+    return <Zdgzsq style={style} />
   } 
   return (
     <PanelBox style={style} title={name} color="red">

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

@@ -0,0 +1,141 @@
+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 AreaDrpChart = ({ data }) => {
+  const { max, sdata } = useMemo(() => {
+    let max = 0;
+    data.forEach(o => {
+      max = Math.max(max, o.av)
+    });
+    max = [10, 20, 50, 100, 200, 300, 400].find(i => i >= max);
+
+    return {
+      max,
+      sdata: data.map(o => ({ ...o, name: o.NAME.split('').join('\n') })),
+    }
+  }, [data]);
+
+  var option = {
+    tooltip: {
+      trigger: 'item',
+      formatter: function (params) {
+        var res = `${params.name.substr('2020-10-14 '.length, 2)}时降雨：${params.data}mm`;
+        return res;
+      }
+    },
+    grid: {
+      x: 18,
+      y: 24,
+      x2: 28,
+      y2: 36,
+      bottom: 80,
+      borderWidth: 0
+    },
+    calculable: true,
+    xAxis: [
+      {
+        type: 'category',
+        data: sdata.map(o => o.name),
+        splitLine: {
+          show: false
+        },
+        axisLabel: {
+          color: '#bbb',
+          fontSize: 10,
+          textShadowBlur: 4,
+          textShadowColor: '#6ab',
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#07a6ff',
+            width: 0.5,
+          }
+        },
+        axisTick: {
+          show: false,
+        }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        position: 'right',
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: '#07a6ff',
+            width: 0.25,
+            type: 'dashed'
+          }
+        },
+        axisLabel: {
+          color: '#bbb',
+          fontSize: 10,
+          textShadowBlur: 4,
+          textShadowColor: '#6ab',
+        },
+        axisLine: {
+          show: false
+        },
+        axisTick: {
+          show: false,
+        },
+        min: 0,
+        max,
+      }
+    ],
+    series: [
+      {
+        name: '降雨',
+        type: 'bar',
+        barWidth: '60%',
+        data: sdata.map(o => o.av),
+        itemStyle: {
+          normal: {
+            color: (params) => {
+              return new echarts.graphic.LinearGradient(
+                0, 0, 0, 1,
+                [
+                  { offset: 0, color: pallete[params.dataIndex % palleteLen][0] },
+                  { offset: 1, color: pallete[params.dataIndex % palleteLen][1] }
+                ]
+              )
+            },
+          },
+        },
+        label: {
+          show: true,
+          position: 'top',
+          color: '#bbb',
+          fontSize: 12,
+          textShadowBlur: 4,
+          textShadowColor: '#6ab',
+        },
+      }
+    ]
+  };
+
+  return (
+    <ReactEcharts
+      option={option}
+      style={{ height: '14rem', width: '100%' }}
+    />
+  )
+}
+
+export default React.memo(AreaDrpChart);

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

@@ -0,0 +1,215 @@
+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';
+
+function DrpReal({ style }) {
+  const dispatch = useDispatch();
+  const [ tab, setTab ] = useState('1')
+  const data = [
+    {
+        "ADCD": "421181001000000",
+        "NAME": "龙池办事处",
+        "drp": 0,
+        "cnt": 0,
+        "av": 0
+    },
+    {
+        "ADCD": "421181002000000",
+        "NAME": "鼓楼办事处",
+        "drp": 0,
+        "cnt": 0,
+        "av": 0
+    },
+    {
+        "ADCD": "421181003000000",
+        "NAME": "南湖办事处",
+        "drp": 0,
+        "cnt": 0,
+        "av": 0
+    },
+    {
+        "ADCD": "421181100000000",
+        "NAME": "中馆驿镇",
+        "drp": 4,
+        "cnt": 1,
+        "av": 4
+    },
+    {
+        "ADCD": "421181101000000",
+        "NAME": "宋埠镇",
+        "drp": 0,
+        "cnt": 0,
+        "av": 0
+    },
+    {
+        "ADCD": "421181102000000",
+        "NAME": "歧亭镇",
+        "drp": 0,
+        "cnt": 0,
+        "av": 0
+    },
+    {
+        "ADCD": "421181103000000",
+        "NAME": "白果镇",
+        "drp": 15,
+        "cnt": 1,
+        "av": 15
+    },
+    {
+        "ADCD": "421181104000000",
+        "NAME": "夫子河镇",
+        "drp": 0,
+        "cnt": 0,
+        "av": 0
+    },
+    {
+        "ADCD": "421181105000000",
+        "NAME": "阎家河镇",
+        "drp": 0,
+        "cnt": 0,
+        "av": 0
+    },
+    {
+        "ADCD": "421181106000000",
+        "NAME": "龟山镇",
+        "drp": 0,
+        "cnt": 0,
+        "av": 0
+    },
+    {
+        "ADCD": "421181107000000",
+        "NAME": "盐田河镇",
+        "drp": 0,
+        "cnt": 0,
+        "av": 0
+    },
+    {
+        "ADCD": "421181108000000",
+        "NAME": "张家畈镇",
+        "drp": 0,
+        "cnt": 0,
+        "av": 0
+    },
+    {
+        "ADCD": "421181109000000",
+        "NAME": "木子店镇",
+        "drp": 93.5,
+        "cnt": 2,
+        "av": 46.8
+    },
+    {
+        "ADCD": "421181110000000",
+        "NAME": "三河口镇",
+        "drp": 18,
+        "cnt": 1,
+        "av": 18
+    },
+    {
+        "ADCD": "421181111000000",
+        "NAME": "黄土岗镇",
+        "drp": 0,
+        "cnt": 0,
+        "av": 0
+    },
+    {
+        "ADCD": "421181112000000",
+        "NAME": "福田河镇",
+        "drp": 50,
+        "cnt": 1,
+        "av": 50
+    },
+    {
+        "ADCD": "421181113000000",
+        "NAME": "乘马岗镇",
+        "drp": 0,
+        "cnt": 0,
+        "av": 0
+    },
+    {
+        "ADCD": "421181114000000",
+        "NAME": "顺河镇",
+        "drp": 0,
+        "cnt": 0,
+        "av": 0
+    },
+    {
+        "ADCD": "421181200000000",
+        "NAME": "铁门岗乡",
+        "drp": 0,
+        "cnt": 0,
+        "av": 0
+    },
+    {
+        "ADCD": "421181471000000",
+        "NAME": "麻城经济开发区",
+        "drp": 0,
+        "cnt": 0,
+        "av": 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.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('1')}>流域</span>
+          </span>
+        </>
+      }
+    >
+      <div className='tabStyle' style={{padding:'5px',paddingBottom:'15px'}}>
+        <span className="card-group">
+            <span className={clsx({ active: false})} style={{marginRight:'0.3rem'}}>1h</span>
+            <span className={clsx({ active: false})} style={{marginRight:'0.3rem'}}>3h</span>
+            <span className={clsx({ active: false})} style={{marginRight:'0.3rem'}}>6h</span>
+            <span className={clsx({ active: false})} style={{marginRight:'0.3rem'}}>12h</span>
+            <span className={clsx({ active: true})} style={{marginRight:'0.3rem'}}>24h</span>
+            <span className={clsx({ active: false})} style={{marginRight:'0.3rem'}}>48h</span>
+        </span>
+      </div>
+      <AreaDrpChart data={data} />
+    </PanelBox>
+  )
+}
+
+export default DrpReal;

src/views/Home/panels/Warn/ShYj.js

@@ -24,7 +24,7 @@ function Item({ data, viewInfo }) {
         </div>
         <div className="tail">
           <span>{data.warnstm.substr(0, 'yyyy-mm-dd hh:mm'.length)}</span>
-          <a onClick={() => viewInfo(data, 'danad')} style={{ textAlign: 'right' }}>危险区</a>
+          {/* <a onClick={() => viewInfo(data, 'danad')} style={{ textAlign: 'right' }}>危险区</a> */}
         </div>
       </div>
     </div>
@@ -90,7 +90,16 @@ function ShYj({ data }) {
         });
       }
     } else {
-      dispatch.runtime.setInfoDlg({ layerId: 'ShWarn', properties: record })
+    const { lgtd, lttd } = record;
+    if (lgtd && lttd) {
+      dispatch.runtime.setCameraTarget({
+        center: [lgtd, lttd],
+        zoom: 15,
+        pitch: 50,
+        bearing: 0
+      });
+    }
+    // dispatch.runtime.setInfoDlg({ layerId: 'ShWarn', properties: record })
     }
   }, [dispatch]);
 
@@ -99,9 +108,9 @@ function ShYj({ data }) {
   
   return (
     <div className="dppanel-shyj">
-      {
+      {/* {
         hisdata?.length > 0 && <DpAlert severity="info">当前无预警，显示最新10条已关闭预警</DpAlert>
-      }
+      } */}
       {
         showdata.map(o => (
           <Item key={o.warnid} viewInfo={viewInfo} data={o} />

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

@@ -0,0 +1,78 @@
+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 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('1')}>水库</span>
+          </span>
+        </>
+      }
+    >
+      <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>
+      </div>
+      <TablePage/>
+      
+    </PanelBox>
+  )
+}
+
+export default DrpReal;

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

@@ -0,0 +1,56 @@
+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:'余家河', 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 Page({ style }) {
+
+  return (
+    <TableContainer style={{ height: '100%' }}>
+        <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>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {data.map((row) => (
+              <DpTableRow key={row.stcd}>
+                <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>
+              </DpTableRow>
+            ))}
+          </TableBody>
+        </Table>
+    </TableContainer>
+  )
+}
+
+export default React.memo(Page);