feat(): 监测数据开发

public/data/shyjFind.json

@@ -9,6 +9,8 @@
         "tempcolumn": 0,
         "warnid": 1128,
         "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

@@ -191,7 +191,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,
@@ -201,8 +201,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;
@@ -549,56 +550,74 @@ 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 });
+        if(map){
           map.setLayoutProperty('热力图', 'visibility', 'visible');
+        }
       } else {
         // dispatch.map.setLayerSetting({dom: true});
+        if(map){
           map.setLayoutProperty('热力图', 'visibility', 'none');
         }
+      }
 
-      if (id === 306) {
+      if (id === 306 && map) {
         dispatch.map.setLayerSetting({ dom: false });
         dispatch.runtime.setShowGw(true)
+        // if(map){
         //   map.setLayoutProperty('管网图', 'visibility', 'visible');
+        // }
       } else {
         dispatch.runtime.setShowGw(false)
         // dispatch.map.setLayerSetting({dom: true});
+        // if(map){
         //   map.setLayoutProperty('管网图', 'visibility', 'none');
+        // }
       }
       if (id === 503 || id == 501 || id == 504 || id == 505 || id == 506 || id == 507) {
         dispatch.map.setLayerSetting({ dom: false });
+        if(map){
           map.setLayoutProperty('灌区图', 'visibility', 'visible');
+        }
       } else {
         // dispatch.map.setLayerSetting({dom: true});
+        if(map){
           map.setLayoutProperty('灌区图', 'visibility', 'none');
         }
+      }
       if (id != 504) {
         dispatch.runtime.setYyfa({})
       }
 
       if (
         id === 3 
+        || id === 8
         || id === 203
         || id === 205
         || id === 206
         || id === 200
       ) {
         dispatch.map.setLayerSetting({ dom: true });
+        // if(map){
         //   map.setLayoutProperty('卫星图', 'visibility', 'visible');
+        // }
       } else {
         dispatch.map.setLayerSetting({ dom: false });
+        // if(map){
         //   map.setLayoutProperty('卫星图', 'visibility', 'none');
+        // }
       }
 
       if(id!==200&&id!==203&&id!==205&&id!==206){
+        if(map){
           const layer = map.getLayer('临时水库tz')
           if(layer){
             map.removeLayer('临时水库tz');
@@ -606,6 +625,7 @@ const map = {
           }
         }
       }
+    }
   })
 };
 

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,11 +236,14 @@ export default function calcLayout(view, rightStack, hidePanels) {
         rightFullHeight = true;
       }else if (view === 8) {
         right = [
-          { key: '警报' },
+          // { key: '警报' },
-          { key: '防洪形势天气预报', style: { height: '18.5rem'} },
+          { key: '防洪形势雨情2', style: {} },
-          { key: '防洪形势水情', style: { height: '18.5rem'} },
+          { key: '重点关注水情', style: { height: '18rem'} },
+          { key: '测站到报率', style: { height: '18rem' } },
+          // { 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: '今日值班' },
         ];
@@ -277,10 +280,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/MapCtrl/index.js

@@ -147,6 +147,9 @@ export default function MapCtrl({ initParams, onLoad }) {
               dispatch?.runtime.setInfoDlg({ layerId: 'ByjcLayer', properties: record })
           }else if (record.stnm == '浮桥河水库') {
               dispatch?.runtime.setInfoDlg({ layerId: 'RealSkLayer', properties: record })
+          } else if (record.type == 'sw') {
+              dispatch?.runtime.setFeaturePop({ layerId: 'RealHDPop', properties: record,coordinates: [record.lgtd, record.lttd] })
+            
           }
           // dispatch.runtime.setFeaturePop({ type: 'RealSkPop', properties: record, coordinates: [record.lgtd, record.lttd] });
         }

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/rainDrpLayer.js

@@ -44,29 +44,31 @@ const ShapeStyle = {
 };
 
 
-const page1 = [{
+const page1 = [
-      "stcd": "61612910",
+    {
-  "stnm": "桃林河(阎河)",
+      "stcd": "Q9111",
-      test:1,
+      "stnm": "福田河",
       "adcd": "421181000000000",
+      'test':1,
       "wscd": null,
       "importancy": 0,
-      "lgtd": 115.087777777,
+      "lgtd": 115.0944,
-      "lttd": 31.164444444,
+      "lttd": 31.4747,
       "elev": null,
       "hasRz": true,
-      "type": "sh",
+      "type": "qx",
-      "today": 7,
+     "today": 50.3,
-      "h1": 3,
+        "h1": 50.2,
-      "h3": 4,
+        "h3": 50.2,
-      "h6": 6,
+        "h6": 50.2,
-      "h12": 7,
+        "h12": 50.2,
-      "h24": 12,
+        "h24": 50.3,
-      "h48": 19.5,
+              "tm": "2025-06-06T22:00:00.000Z",
-      "tm": "2025-06-03T02:10:00.000Z",
+
       "state": 1,
       "warning": 0
-    }]
+    },
+  ]
 
 export default class RainDrpLayer extends BaseLayer {
 

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,9 @@ 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 Czdbl from './panels/Czdbl'
 
 
 import Skyb from './panels/Skyb'
@@ -417,6 +420,12 @@ 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} />
+  } else if (name === '测站到报率') {
+    return <Czdbl style={style} />
   } 
   return (
     <PanelBox style={style} title={name} color="red">

src/views/Home/components/ActionDock/index.js

@@ -14,10 +14,10 @@ const VIEWS = [
       { id: 1, title: '监测数据', img: '/assets/menu/实时数据.png' },
       // { id: 2, title: '水利设施', img: '/assets/menu/水利设施.png' },
       { id: 5, title: '预报', img: '/assets/menu/降雨中心.png' },
-      { id: 6, title: '预警', img: '/assets/menu/病险水库.png' },
+      // { id: 6, title: '预警', img: '/assets/menu/病险水库.png' },
       { id: 4, title: '预演', img: '/assets/menu/预警分析.png' },
-      { id: 3, title: '预案', img: '/assets/menu/辅助决策.png' },
+      // { id: 3, title: '预案', img: '/assets/menu/辅助决策.png' },
-      { id: 7, title: '调度', img: '/assets/menu/辅助决策.png' },
+      // { id: 7, title: '调度', img: '/assets/menu/辅助决策.png' },
     ]
   },
   // { id: 200, title: '水库', img: '/assets/menu/水库专题.png',children:[
@@ -85,7 +85,14 @@ export default function ActionDock({ }) {
   const viewItem = useMemo(() => viewKey ? VIEWS.filter(o => o.id === viewKey)[0].children : VIEWS, [viewKey, VIEWS])
 
   const dispatch = useDispatch();
-
+  const removePoint = () => {
+      const map = window.__mapref;
+        const layer = map.getLayer('关联站点')
+        if (layer) {
+          map.removeLayer('关联站点');
+          map.removeSource('关联站点');
+        }
+  }
 
   return (
     <div className="dp-actiondock">
@@ -97,6 +104,7 @@ export default function ActionDock({ }) {
               setViewKey(null)
               dispatch.runtime.setScya(false)
               dispatch.runtime.setGwtc(false)
+              removePoint()
             }}>
               <div className={clsx('button', { active: false })}>
                 <img width={40} style={{ marginLeft: '5px' }} src={'/assets/pump/退出.png'} />
@@ -136,6 +144,7 @@ export default function ActionDock({ }) {
                 } else {
                   sessionStorage.setItem('point','')
                 }
+                removePoint()
               }
             }}>
               <div className={clsx('button', { active: o.id===200?(view===207||view===203||view===205||view===206||view===200):view === o.id })}>

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/DrpSta/index.js

@@ -5,6 +5,7 @@ import PanelBox from '../../components/PanelBox';
 import OverallContent from './OverallContent';
 import { makeStyles } from '@material-ui/core/styles';
 import DpTableRow from '../../../../layouts/mui/DpTableRow';
+import { parseGeoJSON } from "../../../../utils/tools";
 import {
   Box,
   Typography,
@@ -134,123 +135,337 @@ export default function Overall({ style }) {
 
   const drpData = [
    {
-        "stcd": "61612910",
+        "stcd": "61644000",
-        "stnm": "桃林河(阎河)",
+        "stnm": "浮桥河",
-      "adcd": "421181000000000",
+        "adcd": null,
-      adnm: '阎家河镇桃林河村村民委员会',
-      zgrz: '55.67',
-      time: '2025-06-11 10:14至2025-06-12 10:14',
-        jjrz:'58.43',
         "wscd": null,
         "importancy": 0,
-        "lgtd": 115.087777777,
+        "lgtd": 114.883583,
-        "lttd": 31.164444444,
+        "lttd": 31.180444,
         "elev": null,
         "hasRz": true,
-        "type": "sh",
+        "type": "sw",
-        "today": 21,
+        "tm": "2025-06-06T22:00:00.000Z",
-        "h1": 15.5,
+      "rz": 43.6,
-        "h3": 21,
+         adnm: '麻城市',
-        "h6": 21,
+      zgrz: '48.17',
-        "h12": 21,
+      time: '2025-06-11 10:14至2025-06-12 10:14',
-        "h24": 21,
+      jjrz: '47.60',
-        "h48": 21,
+        "state": 1
-        "tm": "2025-06-06T22:15:00.000Z",
-        "state": 1,
-        "warning": 0
     },
 {
-        "stcd": "61612150",
+        "stcd": "61615300",
-        "stnm": "鹰山畈(黄土岗)",
+        "stnm": "木子店",
-        "adcd": "421181000000000",
+        "adcd": null,
         "wscd": null,
-         adnm: '黄士岗镇英山畈村村民委员会(雾港河村、鹰山畈村)',
+        "importancy": 1,
-      zgrz: '77.00',
+        "lgtd": 115.3625,
+        "lttd": 31.190278,
+        "elev": null,
+        "hasRz": true,
+        "type": "sw",
+        "tm": "2025-06-06T21:00:00.000Z",
+  "rz": 133.89,
+          adnm: '麻城市',
+      zgrz: '138.20',
       time: '2025-06-12 10:33',
-        jjrz:'78.98',
+      jjrz: '137.89',
-        "importancy": 0,
+        "state": 1
-        "lgtd": 115.073611,
-        "lttd": 31.386667,
-        "elev": null,
-        "hasRz": true,
-        "type": "sh",
-        "today": 27,
-        "h1": 18.5,
-        "h3": 27,
-        "h6": 27,
-        "h12": 27,
-        "h24": 27,
-        "h48": 27,
-        "tm": "2025-06-06T22:00:00.000Z",
-        "state": 1,
-        "warning": 0
     },
       {
-        "stcd": "61613700",
+        "stcd": "61612500",
-        "stnm": "四角门(宋铁二桥)",
+        "stnm": "王福店",
-        "adcd": "421181000000000",
+        "adcd": null,
         "wscd": null,
         "importancy": 0,
-        "lgtd": 114.8291,
+        "lgtd": 114.986666,
-        "lttd": 31.0754,
+        "lttd": 31.352944,
-          adnm: '铁门岗乡大庙岗村村民委员会(四角门村、大庙岗村、大店村、肖上湾村)',
-      zgrz: '27.57',
-      time: '2025-06-11 10:14至2025-06-12 10:14',
-        jjrz:'34.86',
         "elev": null,
         "hasRz": true,
-        "type": "sh",
+        "type": "sw",
-        "today": 3.5,
-        "h1": 2,
-        "h3": 3.5,
-        "h6": 3.5,
-        "h12": 3.5,
-        "h24": 3.5,
-        "h48": 3.5,
         "tm": "2025-06-06T22:00:00.000Z",
-        "state": 1,
+        "rz": 73.37,
-        "warning": 0
+           adnm: '麻城市',
+      zgrz: '78.20',
+      time: '2025-06-11 10:14至2025-06-12 10:14',
+      jjrz: '77.37',
+        "state": 1
+    },
+   
+  ]
+  const skData = [
+   {
+        "stcd": "61614200",
+        "type": "sk",
+        "hasRz": true,
+        "stnm": "浮桥河",
+        "adcd": "421181100000",
+        "wscd": null,
+      "importancy": 0,
+         adnm: '麻城市',
+      zgrz: '66.1',
+      time: '2025-06-11 10:14',
+      jjrz: '64.89',
+        "lgtd": 114.88069,
+        "lttd": 31.171967,
+        "elev": 0,
+        "damel": 71.33,
+        "dsflz": 68.04,
+        "fsltdz": 64.89,
+        "ddz": 51.78,
+        "zcxsw": 64.89,
+        "drpTm": "2025-06-06T22:00:00.000Z",
+        "today": 4,
+        "h1": 4,
+        "h3": 4,
+        "h6": 4,
+        "h12": 4,
+        "h24": 4,
+        "h48": 4,
+        "drpState": 1,
+        "rz": 60.7,
+        "w": 45490,
+        "xs":32133,
+        "a_fsltdz": -4.189999999999998,
+        "rzTm": "2025-06-06T22:00:00.000Z",
+        "rzWarning": 0,
+        "rzState": 1,
+        "layer": "RealSkLayer",
+        "layerPop": "RealSkPop"
+    },
+
+    {
+      "stcd": "61612700",
+      "type": "sk",
+      "hasRz": true,
+      "stnm": "碧绿河",
+      "adcd": "421181109000",
+      "wscd": null,
+      adnm: '麻城市',
+      zgrz: '138.2',
+      time: '2025-06-12 10:33',
+      jjrz: '137',
+      "importancy": 0,
+      "lgtd": 115.214444,
+      "lttd": 31.299722,
+      "elev": 0,
+      "damel": 142.9,
+      "dsflz": 139.08,
+      "fsltdz": 137,
+      "ddz": 105,
+      "zcxsw": 137,
+      "drpTm": "2025-06-06T22:00:00.000Z",
+      "today": 50,
+      "h1": 38,
+      "h3": 50,
+      "h6": 50,
+      "h12": 50,
+      "h24": 50,
+      "h48": 50,
+      "drpState": 1,
+      "rz": 120,
+      "w": 6015,
+      "xs": 1676,
+      "a_fsltdz": -17,
+      "rzTm": "2025-06-06T00:00:00.000Z",
+      "rzWarning": 0,
+      "rzState": 2,
+      "layer": "RealSkLayer",
+      "layerPop": "RealSkPop"
     },
     {
-        "stcd": "61614460",
+      "stcd": "61612560",
-        "stnm": "项生(宋埠)",
+      "type": "sk",
-        "adcd": "421181000000000",
+      "hasRz": true,
+      "stnm": "大河铺",
+      "adcd": "421181112000",
+      adnm: '麻城市',
+      zgrz: '161.5',
+      time: '2025-06-11 10:14至2025-06-12 10:14',
+      jjrz: '159',
       "wscd": null,
       "importancy": 0,
-              adnm: '宋埠镇项生村村民委员会',
+      "lgtd": 114.941111,
-      zgrz: '21.93',
+      "lttd": 31.464444,
-      time: '2025-06-11 10:14至2025-06-12 10:14',
+      "elev": 0,
-        jjrz:'23.65',
+      "damel": 162.21,
-        "lgtd": 114.798056,
+      "dsflz": 160.08,
-        "lttd": 31.058611,
+      "fsltdz": 159,
-        "elev": null,
+      "ddz": 142.5,
+      "zcxsw": 159,
+      "drpTm": "2025-06-06T22:00:00.000Z",
+      "today": 50,
+      "h1": 50,
+      "h3": 50,
+      "h6": 50,
+      "h12": 50,
+      "h24": 50,
+      "h48": 50,
+      "drpState": 1,
+      "rz": 144.5,
+      "w": 1574,
+      "xs": "--",
+      "a_fsltdz": -14.5,
+      "rzTm": "2025-06-06T00:00:00.000Z",
+      "rzWarning": 0,
+      "rzState": 2,
+      "layer": "RealSkLayer",
+      "layerPop": "RealSkPop"
+    },
+    {
+      "stcd": "716460001",
+      "type": "sk",
       "hasRz": true,
-        "type": "sh",
+      "stnm": "杉林河",
-        "today": 4.5,
+      "adcd": "421181107000",
-        "h1": 2,
+      "wscd": null,
-        "h3": 4.5,
+      adnm: '麻城市',
-        "h6": 4.5,
+      zgrz: '224.31',
-        "h12": 4.5,
+      time: '2025-06-11 10:14至2025-06-12 10:14',
-        "h24": 4.5,
+      jjrz: '231',
-        "h48": 4.5,
+      "importancy": 0,
-        "tm": "2025-06-06T22:00:00.000Z",
+      "lgtd": 115.433056,
-        "state": 1,
+      "lttd": 31.304444,
-        "warning": 0
+      "elev": 0,
+      "damel": 236.2,
+      "dsflz": 233.92,
+      "fsltdz": 231,
+      "ddz": 204,
+      "zcxsw": 231,
+      "drpTm": "2025-04-11T05:00:00.000Z",
+      "today": 0,
+      "h1": 0,
+      "h3": 0,
+      "h6": 0,
+      "h12": 0,
+      "h24": 0,
+      "h48": 0,
+      "drpState": 2,
+      "rz": 224.31,
+      "w": 1415,
+      "xs": 750,
+      "a_fsltdz": -6.689999999999998,
+      "rzTm": "2025-04-11T05:00:00.000Z",
+      "rzWarning": 0,
+      "rzState": 2,
+      "layer": "RealSkLayer",
+      "layerPop": "RealSkPop"
     },
   ]
-  const skData = []
+ const flyTo = (row) => {
-  const flyTo = (record) => {
+    const { lgtd, lttd } = row;
-    const { lgtd, lttd } = record;
     if (lgtd && lttd) {
-      dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealDrpPop, properties: record, coordinates: [lgtd, lttd] });
+      dispatch.runtime.setFeaturePop({ type: timeRange == '3h'?'RealSkPop':"RealHDPop", properties: row, coordinates: [row.lgtd, row.lttd] });
       dispatch.runtime.setCameraTarget({
-        center: [lgtd, lttd + config.poiPositionOffsetY.hd],
+        center: [lgtd, lttd + 0.005],
-        zoom: config.poiPositionZoom.hd,
+        zoom: 15,
-        pitch: config.poiPitch,
+        pitch: 50,
+        bearing: 0
       });
     }
   }
-  const [type, setType] = useState('1h')
+
+   const setSkLayer = (data = []) => {
+      const map = window.__mapref;
+      const layer = map.getLayer('临时水库tz')
+      if (layer) {
+        map.removeLayer('临时水库tz');
+        map.removeSource('临时水库tz');
+      }
+     if (data.length === 0) { return }
+      map.addLayer({
+        'id': '临时水库tz',//+new Date().getTime(),
+        'type': 'symbol',
+        'source': {
+          'type': 'geojson',
+          'data': {
+            'type': 'FeatureCollection',
+            'features': [],
+          },
+        },
+        'layout': {
+          // 'icon-allow-overlap': true,
+          // 'text-allow-overlap': true,
+          'icon-image': '水库', // 从properties中动态读取icon字段
+          'icon-size': [
+            'interpolate', ['linear'], ['zoom'],
+            10, 0.8,
+            14, 0.8,
+          ],
+          'text-size': [
+            'interpolate', ['linear'], ['zoom'],
+            5, 10,
+            14, 14,
+          ],
+          'text-font': ['Roboto Black'],
+          'text-field': [
+            'step',
+            ['zoom'],
+            '',
+            8, ['get', 'stnm']
+          ],
+          'text-anchor': 'top',
+          'text-offset': [0, 1],
+        },
+        'paint': {
+          'text-color': '#fff'
+        },
+        'visibility': 'visible',
+      });
+      map.getSource('临时水库tz').setData(parseGeoJSON(data))
+  }
+  
+    const setHdLayer = (data = []) => {
+        const map = window.__mapref;
+        const layer = map.getLayer('关联站点')
+        if (layer) {
+          map.removeLayer('关联站点');
+          map.removeSource('关联站点');
+        }
+        if (data.length === 0) { return }
+         map.addLayer({
+          'id': '关联站点',//+new Date().getTime(),
+          'type': 'symbol',
+          'source': {
+            'type': 'geojson',
+            'data': {
+              'type': 'FeatureCollection',
+              'features': [],
+            },
+          },
+          'layout': {
+            'icon-allow-overlap': true,
+            'text-allow-overlap': true,
+            'icon-image': '水位站',
+            'icon-size': [
+              'interpolate', ['linear'], ['zoom'],
+              10, 0.5,
+              14, 1,
+            ],
+            'text-size': [
+              'interpolate', ['linear'], ['zoom'],
+              10, 10,
+              14, 16,
+            ],
+          },
+          'paint': {
+            'text-color': [
+              'case',
+              ['!=', ['get', 'state'], 1], '#888',
+              ['==', ['get', 'warning'], 3], '#f00',
+              ['==', ['get', 'warning'], 2], 'yellow',
+              ['==', ['get', 'warning'], 1], 'yellow',
+              '#0f0'
+            ],
+            'text-halo-color': '#062040',
+            'text-halo-width': 1
+          },
+          'visibility': 'visible',
+        });
+    
+        map.getSource('关联站点').setData(parseGeoJSON(data))
+      }
+  const [type, setType] = useState('h24')
   const [data, setData] = useState([])
 
 
@@ -309,14 +524,21 @@ export default function Overall({ style }) {
               <DpTableCell style={{ minWidth: '8rem' }} align='center'>政区</DpTableCell>
               <DpTableCell style={{ minWidth: '8rem' }} align='center'>最高水位(m)</DpTableCell>
               <DpTableCell style={{ minWidth: '16rem' }} align='center'>发生时间</DpTableCell>
-                <DpTableCell style={{ minWidth: '8rem' }} align='center'>警戒水位(m)</DpTableCell>
+              <DpTableCell style={{ minWidth: '8rem' }} align='center'>{timeRange == '1h' ? "警戒水位(m)" : '汛限水位(m)'}</DpTableCell>
               {/* <DpTableCell style={{ width: '15%' }}>所属政区</DpTableCell> */}
             </DpTableRow>
           </TableHead>
           <TableBody>
             {
               data.map((item, i) => (
-                  <DpTableRow key={item.stcd} onClick={() => flyTo(item)}>
+                <DpTableRow key={item.stcd} onClick={() => {
+                  flyTo(item)
+                  if (timeRange == '3h') {
+                     setSkLayer([item])
+                  } else {
+                    setHdLayer([item])
+                   }
+                }}>
                   <DpTableCell align='center'>{i + 1}</DpTableCell>
                   <DpTableCell align='center'>{item.stnm}</DpTableCell>
                   <DpTableCell align='center'>

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

@@ -119,8 +119,8 @@ 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: 1, color: 'blue2' },
+    { id: 'heavy', name: '大暴雨站点', count: 0, color: 'blue2' },
-    { id: 'storm', name: '暴雨站点', count: 0, color: 'green' }
+    { id: 'storm', name: '暴雨站点', count: 1, color: 'green' }
   ];
 
   const toggleExpand = (id) => {
@@ -132,24 +132,25 @@ export default function Overall({ style }) {
 
   const drpData = [
     {
-      "stcd": "61612910",
+      "stcd": "Q9111",
-      "stnm": "桃林河(阎河)",
+      "stnm": "福田河",
       "adcd": "421181000000000",
       'test':1,
       "wscd": null,
       "importancy": 0,
-      "lgtd": 115.087777777,
+      "lgtd": 115.0944,
-      "lttd": 31.164444444,
+      "lttd": 31.4747,
       "elev": null,
       "hasRz": true,
-      "type": "sh",
+      "type": "qx",
-      "today": 7,
+     "today": 50.3,
-      "h1": 12,
+        "h1": 50.2,
-      "h3": 40,
+        "h3": 50.2,
-      "h6": 69,
+        "h6": 50.2,
-      "h12": 133,
+        "h12": 50.2,
-      "h24": 261,
+        "h24": 50.3,
-      "tm": "2025-06-03T02:10:00.000Z",
+              "tm": "2025-06-06T22:00:00.000Z",
+
       "state": 1,
       "warning": 0
     },
@@ -257,7 +258,7 @@ export default function Overall({ style }) {
                       <Collapse in={expanded[station.id]} timeout="auto" unmountOnExit>
                         <Box className={`${classes.expandedRow} ${station.color}`}>
                           {/* 展开的详细内容可以在这里添加 */}{
-                           station.id == 'heavy' && drpData.map(item => (
+                           station.id == 'storm' && drpData.map(item => (
                               <TableRow onClick={() =>flyTo(item)}>
                                 <DpTableCell style={{ width: '53%' }}>{item.stnm}</DpTableCell>
                                 <DpTableCell style={{ width: '10%' }}>{item.today}</DpTableCell>

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: 65,
+      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: '10px',
+        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: '11rem', width: '100%' }}
+    />
+  )
+}
+
+export default React.memo(AreaDrpChart);

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

@@ -0,0 +1,273 @@
+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 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;
+    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>
+        </>
+      }
+    >
+      <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={tab==='1'?data:data2} />
+    </PanelBox>
+  )
+}
+
+export default DrpReal;

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

@@ -1,6 +1,7 @@
 import React, { useMemo, useState } from 'react';
 import useRequest from '../../../../utils/useRequest';
 import PanelBox from '../../components/PanelBox';
+import { parseGeoJSON } from "../../../../utils/tools";
 
 import Table from '@material-ui/core/Table';
 import TableContainer from '@material-ui/core/TableContainer';
@@ -46,7 +47,7 @@ function HDReal({ style }) {
       }
       ret.push(o);
     });
-    return ret;
+    return ret.slice(-7).reverse();
   }, [data, tableRzFilter]);
 
   const flyTo = (record) => {
@@ -69,6 +70,58 @@ function HDReal({ style }) {
   const toggleAutoRefresh = () => {
     dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
   }
+   const setLayer = (data = [], type) => {
+      const map = window.__mapref;
+      const layer = map.getLayer('关联站点')
+      if (layer) {
+        map.removeLayer('关联站点');
+        map.removeSource('关联站点');
+      }
+      if (data.length === 0) { return }
+     if (type === 'hd') {
+         map.addLayer({
+        'id': '关联站点',//+new Date().getTime(),
+        'type': 'symbol',
+        'source': {
+          'type': 'geojson',
+          'data': {
+            'type': 'FeatureCollection',
+            'features': [],
+          },
+        },
+        'layout': {
+          'icon-allow-overlap': true,
+          'text-allow-overlap': true,
+          'icon-image': '水位站',
+          'icon-size': [
+            'interpolate', ['linear'], ['zoom'],
+            10, 0.5,
+            14, 1,
+          ],
+          'text-size': [
+            'interpolate', ['linear'], ['zoom'],
+            10, 10,
+            14, 16,
+          ],
+        },
+        'paint': {
+          'text-color': [
+            'case',
+            ['!=', ['get', 'state'], 1], '#888',
+            ['==', ['get', 'warning'], 3], '#f00',
+            ['==', ['get', 'warning'], 2], 'yellow',
+            ['==', ['get', 'warning'], 1], 'yellow',
+            '#0f0'
+          ],
+          'text-halo-color': '#062040',
+          'text-halo-width': 1
+        },
+        'visibility': 'visible',
+      });
+      }
+  
+      map.getSource('关联站点').setData(parseGeoJSON(data))
+    }
 
   return (
     <PanelBox
@@ -100,9 +153,9 @@ function HDReal({ style }) {
           </TableHead>
           <TableBody>
             {showData.map((row) => (
-              <DpTableRow key={row.stcd}>
+              <DpTableRow key={row.stcd} onClick={() => { flyTo(row); setLayer([row],'hd')}}>
                 <DpTableCell component="th" scope="row">
-                  <div className="table-ellipsis cursor-pointer" onClick={() => flyTo(row)}>{row.stnm}</div>
+                  <div className="table-ellipsis cursor-pointer">{row.stnm}</div>
                 </DpTableCell>
                 <DpTableCell align="right">{renderHDRz(row)}</DpTableCell>
                 {rzRender(row.rz, row.rz+5.5)}

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/SkReal/index.js

@@ -1,6 +1,7 @@
 import React, { useMemo, useState } from 'react';
 import useRequest from '../../../../utils/useRequest';
 import PanelBox from '../../components/PanelBox';
+import { parseGeoJSON } from "../../../../utils/tools";
 
 import HighlightOff from '@material-ui/icons/HighlightOff';
 import { makeStyles } from '@material-ui/core/styles';
@@ -57,7 +58,7 @@ function SkReal({ style }) {
   const flyTo = (record) => {
     const { lgtd, lttd } = record;
     if (lgtd && lttd) {
-      dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealSkPop, properties: record, coordinates: [lgtd, lttd] });
+      // dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealSkPop, properties: record, coordinates: [lgtd, lttd] });
       dispatch.runtime.setCameraTarget({
         center: [lgtd, lttd + config.poiPositionOffsetY.sk],
         zoom: config.poiPositionZoom.sk,
@@ -81,7 +82,55 @@ function SkReal({ style }) {
   const handleClose = () => {
     setOpen(false);
   };
-
+const setSkLayer = (data = []) => {
+      const map = window.__mapref;
+      const layer = map.getLayer('临时水库tz')
+      if (layer) {
+        map.removeLayer('临时水库tz');
+        map.removeSource('临时水库tz');
+      }
+      if (data.length === 0) { return }
+      map.addLayer({
+        'id': '临时水库tz',//+new Date().getTime(),
+        'type': 'symbol',
+        'source': {
+          'type': 'geojson',
+          'data': {
+            'type': 'FeatureCollection',
+            'features': [],
+          },
+        },
+        'layout': {
+          // 'icon-allow-overlap': true,
+          // 'text-allow-overlap': true,
+          'icon-image': '水库', // 从properties中动态读取icon字段
+          'icon-size': [
+            'interpolate', ['linear'], ['zoom'],
+            10, 0.8,
+            14, 0.8,
+          ],
+          'text-size': [
+            'interpolate', ['linear'], ['zoom'],
+            5, 10,
+            14, 14,
+          ],
+          'text-font': ['Roboto Black'],
+          'text-field': [
+            'step',
+            ['zoom'],
+            '',
+            8, ['get', 'stnm']
+          ],
+          'text-anchor': 'top',
+          'text-offset': [0, 1],
+        },
+        'paint': {
+          'text-color': '#fff'
+        },
+        'visibility': 'visible',
+      });
+      map.getSource('临时水库tz').setData(parseGeoJSON(data))
+    }
   return (
     <PanelBox
       style={style}
@@ -107,9 +156,9 @@ function SkReal({ style }) {
           </TableHead>
           <TableBody>
             {[...sortedData.filter(o=>o.rzState===1),...sortedData.filter(o=>o.rzState!==1)].map((row) => (
-              <DpTableRow key={row.stcd}>
+              <DpTableRow key={row.stcd} onClick={() => { flyTo(row); setSkLayer([row]) }}>
                 <DpTableCell component="th" scope="row">
-                  <div className="table-ellipsis cursor-pointer" onClick={() => flyTo(row)}>{row.rzState===1?row.stnm:row.stnm+'(离线)'}</div>
+                  <div className="table-ellipsis cursor-pointer" >{row.rzState===1?row.stnm:row.stnm+'(离线)'}</div>
                 </DpTableCell>
                 <DpTableCell align="right">{row['h24']}</DpTableCell>
                 <DpTableCell align="right">{row?.rz}</DpTableCell>

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/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 [ 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('1')}>水库</span>
+          </span>
+        </>
+      }
+    >
+      <div className='tabStyle' style={{padding:'5px',paddingBottom:'15px'}}>
+        <span className="card-group">
+            <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>
+      { tab==='1'?<TablePage tab={tab2}/>:null }
+    </PanelBox>
+  )
+}
+
+export default DrpReal;

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

@@ -0,0 +1,57 @@
+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:'项生(宋埠)', 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({ tab }) {
+
+  return (
+    <TableContainer style={{ height: '12rem' }}>
+        <Table size="small" stickyHeader>
+          <TableHead>
+            <TableRow>
+              <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>
+            {(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.name2}</DpTableCell>
+                <DpTableCell align="center">{row.name3}</DpTableCell>
+                <DpTableCell align="center">{row.name4}</DpTableCell>
+                <DpTableCell align="center">{row.name5}</DpTableCell>
+              </DpTableRow>
+            ))}
+          </TableBody>
+        </Table>
+    </TableContainer>
+  )
+}
+
+export default React.memo(Page);

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