feat(): 水政管理搭建

src/models/map/index.js

@@ -148,7 +148,7 @@ const map = {
     setView(id) {
       let layerVisible = {};
       const map = window.__mapref
-      if (id === 0 || id === 1 || id ==501 || id == 504 || id == 507) {
+      if (id === 0 || id === 1 || id ==501 || id == 504 || id == 507 || id == 506) {
         layerVisible = {
           RealDrpLayer: true,
           RealHDLayer: true,

src/models/map/layout.js

@@ -89,6 +89,14 @@ export default function calcLayout(view, rightStack, hidePanels) {
        { key: '本月巡查记录', style: { height: '40%', flexGrow: 1 } },
        { key: '待处理巡查问题清单', style: { height: '40%', flexGrow: 1 } },
       ]
+      leftFullHeight = true;
+    }else if (view === 506) {
+      left = [
+       { key: '水政统计', style: { height: '30%', flexGrow: 1 } },
+       { key: '区域统计', style: { height: '35%', flexGrow: 1 } },
+       { key: '本月水政巡查问题统计', style: { height: '35%', flexGrow: 1 } },
+      ]
+      leftFullHeight = true;
     }
 
     if (rightEx) {
@@ -176,7 +184,7 @@ export default function calcLayout(view, rightStack, hidePanels) {
         ];
       } else if (view === 507) {
         right = [
-        { key: '工程维护', style: { height: '20%', flexGrow: 1 } },
+        { key: '维护统计', style: { height: '20%', flexGrow: 1 } },
         { key: '本月工程维护', style: { height: '40%', flexGrow: 1 } },
         { key: '待处理维护问题清单', style: { height: '40%', flexGrow: 1 } },
           ];

src/views/Home/PanelIndex.js

@@ -18,6 +18,7 @@ import GqWatch from './panels/GqWatch';
 import LlWatch from './panels/LlWatch';
 import TrWatch from './panels/TrWatch';
 import JyWarn from './panels/JyWarn'
+import SzWatch from './panels/SzWatch'
 import SpVideo from './panels/SpVideo';
 import SkReal from './panels/SkReal';
 import SlgcLayers from './panels/SlgcLayers';
@@ -34,7 +35,15 @@ import WarnResp from './panels/WarnResp';
 import BxSk from './panels/BxSk';
 import BxskOverall from './panels/BxSkOverall';
 import Aqjc from './panels/Aqjc'
-
+import XcSta from './panels/XcSta';
+import Xcjl from './panels/Xcjl';
+import Xcclqd from './panels/Xcwtqd'
+import WhSta from './panels/WhSta';
+import Whjl from './panels/Whjl';
+import Whclqd from './panels/Whwtqd'
+import SzSta from './panels/SzSta'
+import Szqytj from './panels/Szqytj'
+import Szwtqytj from './panels/Szwtqytj'
 
 export default function PanelIndex({ name, style, ...params }) {
   if (name === '天气') {
@@ -97,6 +106,8 @@ export default function PanelIndex({ name, style, ...params }) {
     return <LlWatch style={style} />
   } else if (name == '土壤墒情监测') {
     return <TrWatch  style={style}/>
+  }else if (name == '水质监测') {
+    return <SzWatch  style={style}/>
   } else if (name == '视频监控') {
     return <SpVideo  style={style}/>
   } else if (name === '预警信息管理') {
@@ -106,9 +117,25 @@ export default function PanelIndex({ name, style, ...params }) {
   } else if (name === '降雨预警') {
     return <JyWarn style={style} />
   } else if (name === '工程巡查') {
-    return <JyWarn style={style} />
+    return <XcSta style={style} />
   } else if (name === '安全监测') {
     return <Aqjc style={style} />
+  } else if (name === '本月巡查记录') {
+    return <Xcjl  style={style}/>
+  } else if (name === '待处理巡查问题清单') {
+    return <Xcclqd  style={style}/>
+  }else if (name === '本月工程维护') {
+    return <Whjl  style={style}/>
+  } else if (name === '待处理维护问题清单') {
+    return <Whclqd  style={style}/>
+  }else if (name === '维护统计') {
+    return <WhSta style={style}/>
+  }else if (name === '水政统计') {
+    return <SzSta style={style}/>
+  }else if (name === '区域统计') {
+    return <Szqytj style={style}/>
+  }else if (name === '本月水政巡查问题统计') {
+    return <Szwtqytj style={style}/>
   }
   return (
     <PanelBox style={style} title={name} color="red">

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

@@ -31,7 +31,7 @@ function HDReal({ style }) {
   const dispatch = useDispatch();
   const tableRzFilter = useSelector(s => s.realview.tableRzFilter);
   const hdAutoRefresh = useSelector(s => s.realview.hdAutoRefresh);
-  const t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
+  // const t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
   // let { data } = useRequest(HDRealPromise.get, t);
   const [setting, showSetting] = useState(false);
 

src/views/Home/panels/SzSta/OverallContent.js

@@ -0,0 +1,149 @@
+import { Button, makeStyles } from '@material-ui/core';
+import { Email } from '@material-ui/icons';
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import config from '../../../../config';
+import { bxstr, drpRealGet, skRealGet } from '../../../../models/_/real';
+import { strNumber } from '../../../../utils/tools';
+import { InfoPopNames } from '../../InfoPops';
+
+const useStyles = makeStyles({
+  root: {
+    padding: '1.5rem 0.75rem 0.75rem 0.75rem',
+    color: 'rgb(224, 246, 247)',
+    fontSize: '0.9rem',
+    lineHeight: '1.8rem',
+  },
+
+  titleDate: {
+    fontSize: '1.2rem',
+    margin: '0.2rem',
+    color: '#00deff',
+  },
+
+  number: {
+    color: '#ffd220',
+    fontSize: '1.2rem',
+    margin: '0.2rem',
+  },
+
+  sttype: {
+    color: '#92f0ff',
+  },
+  stname: {
+    fontWeight: 'bold',
+    fontSize: '1rem',
+    margin: '0.25rem',
+    cursor: 'pointer'
+  },
+
+  grid: {
+    display: 'flex',
+    justifyContent: 'space-around',
+    marginBottom: '1rem',
+    textAlign: 'center',
+
+    '& .value': {
+      fontSize: '1.8rem',
+      color: '#6fe9fd',
+      lineHeight: '2rem'
+    },
+
+
+    '& .key': {
+      fontSize: '0.8rem',
+      color: '#aaa',
+    },
+  },
+
+  action: {
+    textAlign: 'right',
+    color: '#fff',
+  }
+})
+
+export default function OverallContent({ data }) {
+  const classes = useStyles();
+  const dispatch = useDispatch();
+
+  const {
+    drpInfo,
+    skInfo,
+    tm1, tm2,
+  } = data || {};
+
+  const { h24, h1, h3, h6 } = drpInfo || {};
+
+  const _showRecord = (record, poptype) => {
+    if (record) {
+      const { lgtd, lttd } = record;
+      if (lgtd && lttd) {
+        dispatch.runtime.setFeaturePop({ type: poptype, properties: record, coordinates: [lgtd, lttd] });
+        dispatch.runtime.setCameraTarget({
+          center: [lgtd, lttd],
+          zoom: 15,
+          pitch: config.poiPitch,
+        });
+      }
+    }
+  }
+
+  const showRecord = (obj) => {
+    if (!obj) {
+      return;
+    }
+
+    const { type } = obj;
+    if (type === 'sk') {
+      skRealGet(obj.stcd).then((record) => {
+        _showRecord(record, InfoPopNames.RealSkPop)
+      })
+    } else {
+      drpRealGet(obj).then((record) => {
+        _showRecord(record, InfoPopNames.RealDrpPop)
+      });
+    }
+  }
+
+  const doBx = () => {
+    bxstr().then((data) => {
+      dispatch.runtime.setInfoDlg({
+        layerId: 'OverallSmtp',
+        properties: { txt: data }
+      })
+    });
+  }
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.grid} style={{flexWrap:'wrap',justifyContent:'start',columnGap:10}}>
+        <div style={{ padding: 15, background: "linear-gradient(to bottom, #001529, #003366)" }}>
+          <div className="key" style={{ color: '#fff', fontSize: 16 }}>累计巡查次数</div>
+          <div className="value" style={{ color: '#5ecd45' }}>32</div>
+        </div>
+        <div style={{ padding: 15, background: "linear-gradient(to bottom, #001529, #003366)" }}>
+          <div className="key" style={{ color: '#fff', fontSize: 16 }}>本月巡查次数</div>
+          <div className="value" style={{ color: '#5ecd45' }}>5</div>
+        </div>
+        <div style={{ padding: 15, background: "linear-gradient(to bottom, #001529, #003366)" }}>
+          <div className="key" style={{ color: '#fff', fontSize: 16 }}>涉水事件累计</div>
+          <div
+            className="value"
+            style={{ cursor: 'pointer', color: '#ba292a' }}
+          >
+            1
+          </div>
+
+        </div>
+        <div style={{ padding: 15, background: "linear-gradient(to bottom, #001529, #003366)" }}>
+          <div className="key" style={{ color: '#fff', fontSize: 16 }}>本月事件数量</div>
+          <div className="value" style={{ color: '#5ecd45' }}>50</div>
+        </div>
+        <div style={{ padding: 20, background: "linear-gradient(to bottom, #001529, #003366)" }}>
+          <div className="key" style={{ color: '#fff', fontSize: 16 }}>处理中事件</div>
+          <div className="value" style={{ color: '#5ecd45' }}>24</div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { OverallPromise } from '../../../../models/_/real';
+import useRequest from '../../../../utils/useRequest';
+import PanelBox from '../../components/PanelBox';
+import OverallContent from './OverallContent';
+
+export default function Overall({ style }) {
+
+  const { data } = useRequest(OverallPromise.get);
+
+  return (
+    <PanelBox
+      style={style}
+      title="区域分类统计"
+      color="green"
+    >
+      <OverallContent data={data} />
+    </PanelBox>
+  )
+}

src/views/Home/panels/SzSta/index.less

@@ -0,0 +1,38 @@
+.dppanel-overall {
+  padding: 0.75rem;
+  color: rgb(224, 246, 247);
+  font-size: 0.8rem;
+  line-height: 1.8rem;
+
+  .title-date {
+    font-size: 1.2rem;
+    margin: 0.2rem;
+    color: #00deff;
+  }
+
+  .number {
+    color: #ffd220;
+    font-size: 1.2rem;
+    margin: 0.2rem;
+  }
+
+  .sttype {
+    color: #92f0ff;
+  }
+  .stname {
+    font-weight: bold;
+    font-size: 1rem;
+    margin: 0.25rem;
+  }
+
+  .sycm {
+    height: 5rem;
+    padding-top: 0.75rem;
+    ul{ margin-left:-.5rem;margin-right:-.5rem;  padding: .16rem 0;}
+    li{ float: left; width: 33.33%; text-align: center; position: relative}
+    li:before{ position:absolute; content: ""; height:30%; width: 1px; background: rgba(255,255,255,.1); right: 0; top: 15%;}
+    li:last-child:before{ width: 0;}
+    li h2{ font-size:2rem; color: #6fe9fd; margin: 0; font-family: 'electronicFont';margin-bottom: 0.5rem;}
+    li span{ font-size:1rem; color: #fff; opacity: .5;}
+  }
+}

src/views/Home/panels/SzWatch/Setting.js

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import Dialog from '@material-ui/core/Dialog';
+import DialogContent from '@material-ui/core/DialogContent';
+import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
+import { FormGroup, MenuItem, Select, Switch, Typography } from '@material-ui/core';
+import DpDialogTitle from '../../../../layouts/mui/DpDialogTitle';
+import { useDispatch, useSelector } from 'react-redux';
+import { getLayerSetting, getLayerVisible } from '../../../../models/map/selectors';
+import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
+
+
+function Setting({ onClose }) {
+  const layerVisible = useSelector(getLayerVisible);
+  const layerSetting = useSelector(getLayerSetting);
+
+  const dispath = useDispatch();
+
+  return (
+    <Dialog
+      open={true}
+      onClose={onClose}
+      maxWidth="xl"
+      style={{ borderRadius: 0 }}
+      PaperComponent={DpPaperComponent}
+      BackdropComponent={DpBackgroundDrop}
+    >
+      <div className="boxhead"></div>
+
+      <DpDialogTitle>河道水位显示设置</DpDialogTitle>
+      <DialogContent>
+        <div style={{ width: 320, padding: '1rem 0' }}>
+          <FormGroup>
+            <div style={{ marginBottom: '1rem' }}>
+              <Typography variant="subtitle2">显示河道水位图层</Typography>
+              <Switch
+                checked={!!layerVisible.RealHDLayer}
+                color="primary"
+                edge="start"
+                onChange={(e) => dispath.map.setLayerVisible({ RealHDLayer: e.target.checked })}
+              />
+            </div>
+          </FormGroup>
+        </div>
+      </DialogContent>
+      <div className="boxfoot"></div>
+    </Dialog>
+  )
+}
+
+export default Setting;

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

@@ -0,0 +1,153 @@
+import React, { useMemo, useState } from 'react';
+import useRequest from '../../../../utils/useRequest';
+import PanelBox from '../../components/PanelBox';
+
+import Table from '@material-ui/core/Table';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableBody from '@material-ui/core/TableBody';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import DpTableCell from '../../../../layouts/mui/DpTableCell';
+import DpTableRow from '../../../../layouts/mui/DpTableRow';
+import { useDispatch, useSelector } from 'react-redux';
+import useRefresh from '../../../../utils/useRefresh';
+import { HDRealPromise } from '../../../../models/_/real';
+import clsx from 'clsx';
+import { renderHDRz } from '../../../../utils/renutils';
+import Setting from './Setting';
+import { InfoPopNames } from '../../InfoPops';
+import config from '../../../../config';
+import moment from 'moment';
+
+function rzRender(rz, base) {
+  return (
+    <DpTableCell align="right" style={{ color: rz >= base ? 'red' : '#fff' }}>
+      {typeof base === 'number' ? base.toFixed(2) : ''}
+    </DpTableCell>
+  );
+}
+
+function HDReal({ style }) {
+  const dispatch = useDispatch();
+  const tableRzFilter = useSelector(s => s.realview.tableRzFilter);
+  const hdAutoRefresh = useSelector(s => s.realview.hdAutoRefresh);
+  const t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
+  // let { data } = useRequest(HDRealPromise.get, t);
+  const [setting, showSetting] = useState(false);
+
+  // const showData = useMemo(() => {
+  //   if (!data) {
+  //     return [];
+  //   }
+  //   let ret = [];
+  //   data.forEach(o => {
+  //     if (!tableRzFilter[o.type]) {
+  //       return;
+  //     }
+  //     o.status = Math.floor(Math.random() * (4 - 0 + 1)) + 0
+  //     o.kd = (Math.random() * 100).toFixed(2);
+  //     o.ll = (Math.random() * 100).toFixed(1);
+  //     ret.push(o);
+  //   });
+  //   return ret;
+  // }, [data, tableRzFilter]);
+  const randomMinutes = Math.floor(Math.random() * 60) + 1;
+  const format = 'YYYY-MM-DD HH:mm';
+  const SOIL_STATIONS = [
+    {
+        id: 1,
+        name: '宋埠镇站',
+        location: {
+            lat: 31.1725,
+            lng: 115.0139
+        }
+    },
+    {
+        id: 2,
+        name: '乘马岗镇站',
+        location: {
+            lat: 31.2503,
+            lng: 115.1242
+        }
+    },
+    {
+        id: 3,
+        name: '白果镇站',
+        location: {
+            lat: 31.0958,
+            lng: 115.2417
+        }
+    },
+    {
+        id: 4,
+        name: '福田河站',
+        location: {
+            lat: 31.1847,
+            lng: 115.1536
+        }
+    },
+    {
+        id: 5,
+        name: '黄土岗镇站',
+        location: {
+            lat: 31.2158,
+            lng: 115.0825
+        }
+    }
+];
+  const showData = Array(10).fill(0).map((o, i) => ({
+    stnm:SOIL_STATIONS[i%2]?.name,
+    id:i + 1,
+    time: moment()
+            .subtract(i * 60 + randomMinutes, 'minutes')
+            .format(format),
+    sd: (Math.random() * 100).toFixed(2),
+  }))
+
+  const flyTo = (record) => {
+    const { lgtd, lttd } = record;
+    if (lgtd && lttd) {
+      dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealHDPop, properties: record, coordinates: [lgtd, lttd] });
+      dispatch.runtime.setCameraTarget({
+        center: [lgtd, lttd + config.poiPositionOffsetY.hd],
+        zoom: config.poiPositionZoom.hd,
+        pitch: config.poiPitch,
+      });
+    }
+  }
+
+  const toggleStType = (type) => {
+    const visible = !tableRzFilter[type];
+    dispatch.realview.setTableRzFilter({ [type]: visible });
+  }
+
+  const toggleAutoRefresh = () => {
+    dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
+  }
+
+
+
+  return (
+    <PanelBox
+      style={style}
+      title="水质监测"
+      color="green"
+      // tabs={
+      //   <span className="button-group">
+      //     <span className={clsx({ active: tableRzFilter.sh })} onClick={() => toggleStType('sh')}>山洪</span>
+      //     <span className={clsx({ active: tableRzFilter.sw })} onClick={() => toggleStType('sw')}>水文</span>
+      //   </span>
+      // }
+      extra={
+        <>
+          <i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i>
+          {/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
+        </>
+      }
+    >
+      <img src={process.env.PUBLIC_URL + '/assets/sz.png'} alt="" style={{width:'100%',height:'97%'}}/>
+    </PanelBox>
+  )
+}
+
+export default HDReal;

src/views/Home/panels/Szqytj/Setting.js

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import Dialog from '@material-ui/core/Dialog';
+import DialogContent from '@material-ui/core/DialogContent';
+import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
+import { FormGroup, MenuItem, Select, Switch, Typography } from '@material-ui/core';
+import DpDialogTitle from '../../../../layouts/mui/DpDialogTitle';
+import { useDispatch, useSelector } from 'react-redux';
+import { getLayerSetting, getLayerVisible } from '../../../../models/map/selectors';
+import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
+
+
+function Setting({ onClose }) {
+  const layerVisible = useSelector(getLayerVisible);
+  const layerSetting = useSelector(getLayerSetting);
+
+  const dispath = useDispatch();
+
+  return (
+    <Dialog
+      open={true}
+      onClose={onClose}
+      maxWidth="xl"
+      style={{ borderRadius: 0 }}
+      PaperComponent={DpPaperComponent}
+      BackdropComponent={DpBackgroundDrop}
+    >
+      <div className="boxhead"></div>
+
+      <DpDialogTitle>河道水位显示设置</DpDialogTitle>
+      <DialogContent>
+        <div style={{ width: 320, padding: '1rem 0' }}>
+          <FormGroup>
+            <div style={{ marginBottom: '1rem' }}>
+              <Typography variant="subtitle2">显示河道水位图层</Typography>
+              <Switch
+                checked={!!layerVisible.RealHDLayer}
+                color="primary"
+                edge="start"
+                onChange={(e) => dispath.map.setLayerVisible({ RealHDLayer: e.target.checked })}
+              />
+            </div>
+          </FormGroup>
+        </div>
+      </DialogContent>
+      <div className="boxfoot"></div>
+    </Dialog>
+  )
+}
+
+export default Setting;

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

@@ -0,0 +1,166 @@
+import React, { useMemo, useState } from 'react';
+import useRequest from '../../../../utils/useRequest';
+import PanelBox from '../../components/PanelBox';
+
+import Table from '@material-ui/core/Table';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableBody from '@material-ui/core/TableBody';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import DpTableCell from '../../../../layouts/mui/DpTableCell';
+import DpTableRow from '../../../../layouts/mui/DpTableRow';
+import { useDispatch, useSelector } from 'react-redux';
+import useRefresh from '../../../../utils/useRefresh';
+import { HDRealPromise } from '../../../../models/_/real';
+import clsx from 'clsx';
+import { renderHDRz } from '../../../../utils/renutils';
+import Setting from './Setting';
+import { InfoPopNames } from '../../InfoPops';
+import config from '../../../../config';
+
+
+function rzRender(rz, base) {
+  return (
+    <DpTableCell align="right" style={{ color: rz >= base ? 'red' : '#fff' }}>
+      {typeof base === 'number' ? base.toFixed(2) : ''}
+    </DpTableCell>
+  );
+}
+
+function HDReal({ style }) {
+  const dispatch = useDispatch();
+  const tableRzFilter = useSelector(s => s.realview.tableRzFilter);
+  const hdAutoRefresh = useSelector(s => s.realview.hdAutoRefresh);
+  // const t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
+  // let { data } = useRequest(HDRealPromise.get, t);
+  const [setting, showSetting] = useState(false);
+
+  // const showData = useMemo(() => {
+  //   if (!data) {
+  //     return [];
+  //   }
+  //   let ret = [];
+  //   data.forEach(o => {
+  //     if (!tableRzFilter[o.type]) {
+  //       return;
+  //     }
+  //     o.status = Math.floor(Math.random() * (4 - 0 + 1)) + 0
+  //     o.kd = (Math.random() * 100).toFixed(2);
+  //     o.ll = (Math.random() * 100).toFixed(1);
+  //     ret.push(o);
+  //   });
+  //   return ret;
+  // }, [data, tableRzFilter]);
+
+  const showData = Array(10).fill(0).map((o,i) => ({
+    id:`#${i + 1}`,
+    cl: (Math.random() * 100).toFixed(0),
+    kd: (Math.random() * 100).toFixed(0),
+    ll:(Math.random() * 100).toFixed(0)
+  }))
+
+  const flyTo = (record) => {
+    const { lgtd, lttd } = record;
+    if (lgtd && lttd) {
+      dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealHDPop, properties: record, coordinates: [lgtd, lttd] });
+      dispatch.runtime.setCameraTarget({
+        center: [lgtd, lttd + config.poiPositionOffsetY.hd],
+        zoom: config.poiPositionZoom.hd,
+        pitch: config.poiPitch,
+      });
+    }
+  }
+
+  const toggleStType = (type) => {
+    const visible = !tableRzFilter[type];
+    dispatch.realview.setTableRzFilter({ [type]: visible });
+  }
+
+  const toggleAutoRefresh = () => {
+    dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
+  }
+
+  const renderStatus = (row) => {
+    let bz = '运行'
+    switch (row.status) {
+      case 0:
+        bz = '停止'
+        break;
+      case 1:
+        bz = '运行'
+        break;
+      case 2:
+        bz = '故障'
+        break;
+      case 3:
+        bz = '维护中'
+        break;
+      case 4:
+        bz = '待机'
+        break;
+      default:
+        break;
+    }
+    return bz
+  }
+
+  return (
+    <PanelBox
+      style={style}
+      title="水政巡查"
+      color="green"
+      // tabs={
+      //   <span className="button-group">
+      //     <span className={clsx({ active: tableRzFilter.sh })} onClick={() => toggleStType('sh')}>山洪</span>
+      //     <span className={clsx({ active: tableRzFilter.sw })} onClick={() => toggleStType('sw')}>水文</span>
+      //   </span>
+      // }
+      extra={
+        <>
+          <i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i>
+          {/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
+        </>
+      }
+    >
+      <TableContainer style={{ height: '100%' }}>
+        <Table size="small" stickyHeader>
+          <TableHead>
+            <TableRow>
+              <DpTableCell style={{ width: '10%' }} align="left">区域</DpTableCell>
+              <DpTableCell style={{ width: '20%' }} align="left">巡查次数</DpTableCell>
+              <DpTableCell align="center" style={{ width: '20%' }}>事件数量</DpTableCell>
+              <DpTableCell align="center" style={{ width: '30%' }}>处理中</DpTableCell>
+              {/* <DpTableCell align="right">警戒水位</DpTableCell> */}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {showData.map((row) => (
+              <DpTableRow key={row.id}>
+                 <DpTableCell component="th" scope="row">
+                  <div
+                    className="table-ellipsis cursor-pointer"
+                  >{row.id}</div>
+                </DpTableCell>
+                <DpTableCell component="th" scope="row">
+                  <div
+                    className="table-ellipsis cursor-pointer"
+                    // onClick={() => flyTo(row)}
+                  >{row.kd}</div>
+                </DpTableCell>
+                <DpTableCell align="center">{row.ll}</DpTableCell>
+                <DpTableCell align="center">{row.cl}</DpTableCell>
+                {/* {rzRender(row.rz, row.grz)}
+                {rzRender(row.rz, row.wrz)} */}
+              </DpTableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      {
+        setting && <Setting onClose={() => showSetting(false)} />
+      }
+    </PanelBox>
+  )
+}
+
+export default HDReal;

src/views/Home/panels/Szwtqytj/Setting.js

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import Dialog from '@material-ui/core/Dialog';
+import DialogContent from '@material-ui/core/DialogContent';
+import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
+import { FormGroup, MenuItem, Select, Switch, Typography } from '@material-ui/core';
+import DpDialogTitle from '../../../../layouts/mui/DpDialogTitle';
+import { useDispatch, useSelector } from 'react-redux';
+import { getLayerSetting, getLayerVisible } from '../../../../models/map/selectors';
+import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
+
+
+function Setting({ onClose }) {
+  const layerVisible = useSelector(getLayerVisible);
+  const layerSetting = useSelector(getLayerSetting);
+
+  const dispath = useDispatch();
+
+  return (
+    <Dialog
+      open={true}
+      onClose={onClose}
+      maxWidth="xl"
+      style={{ borderRadius: 0 }}
+      PaperComponent={DpPaperComponent}
+      BackdropComponent={DpBackgroundDrop}
+    >
+      <div className="boxhead"></div>
+
+      <DpDialogTitle>河道水位显示设置</DpDialogTitle>
+      <DialogContent>
+        <div style={{ width: 320, padding: '1rem 0' }}>
+          <FormGroup>
+            <div style={{ marginBottom: '1rem' }}>
+              <Typography variant="subtitle2">显示河道水位图层</Typography>
+              <Switch
+                checked={!!layerVisible.RealHDLayer}
+                color="primary"
+                edge="start"
+                onChange={(e) => dispath.map.setLayerVisible({ RealHDLayer: e.target.checked })}
+              />
+            </div>
+          </FormGroup>
+        </div>
+      </DialogContent>
+      <div className="boxfoot"></div>
+    </Dialog>
+  )
+}
+
+export default Setting;

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

@@ -0,0 +1,150 @@
+import React, { useMemo, useState } from 'react';
+import useRequest from '../../../../utils/useRequest';
+import PanelBox from '../../components/PanelBox';
+
+import Table from '@material-ui/core/Table';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableBody from '@material-ui/core/TableBody';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import DpTableCell from '../../../../layouts/mui/DpTableCell';
+import DpTableRow from '../../../../layouts/mui/DpTableRow';
+import { useDispatch, useSelector } from 'react-redux';
+import useRefresh from '../../../../utils/useRefresh';
+import { HDRealPromise } from '../../../../models/_/real';
+import clsx from 'clsx';
+import { renderHDRz } from '../../../../utils/renutils';
+import Setting from './Setting';
+import { InfoPopNames } from '../../InfoPops';
+import config from '../../../../config';
+import moment from 'moment';
+
+function rzRender(rz, base) {
+  return (
+    <DpTableCell align="right" style={{ color: rz >= base ? 'red' : '#fff' }}>
+      {typeof base === 'number' ? base.toFixed(2) : ''}
+    </DpTableCell>
+  );
+}
+
+function HDReal({ style }) {
+  const dispatch = useDispatch();
+  const tableRzFilter = useSelector(s => s.realview.tableRzFilter);
+  const hdAutoRefresh = useSelector(s => s.realview.hdAutoRefresh);
+  // const t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
+  // let { data } = useRequest(HDRealPromise.get, t);
+  const [setting, showSetting] = useState(false);
+
+  // const showData = useMemo(() => {
+  //   if (!data) {
+  //     return [];
+  //   }
+  //   let ret = [];
+  //   data.forEach(o => {
+  //     if (!tableRzFilter[o.type]) {
+  //       return;
+  //     }
+  //     o.status = Math.floor(Math.random() * (4 - 0 + 1)) + 0
+  //     o.kd = (Math.random() * 100).toFixed(2);
+  //     o.ll = (Math.random() * 100).toFixed(1);
+  //     ret.push(o);
+  //   });
+  //   return ret;
+  // }, [data, tableRzFilter]);
+ const randomMinutes = Math.floor(Math.random() * 60) + 1;
+  const format = 'YYYY-MM-DD HH:mm';
+  const showData = Array(10).fill(0).map((o,i) => ({
+    id: `#${i + 1}`,
+     time: moment()
+                .subtract(i * 60 + randomMinutes, 'minutes')
+                .format(format),
+    cl: "--",
+    kd: (Math.random() * 100).toFixed(0),
+    ll:(Math.random() * 100).toFixed(0)
+  }))
+
+  const flyTo = (record) => {
+    const { lgtd, lttd } = record;
+    if (lgtd && lttd) {
+      dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealHDPop, properties: record, coordinates: [lgtd, lttd] });
+      dispatch.runtime.setCameraTarget({
+        center: [lgtd, lttd + config.poiPositionOffsetY.hd],
+        zoom: config.poiPositionZoom.hd,
+        pitch: config.poiPitch,
+      });
+    }
+  }
+
+  const toggleStType = (type) => {
+    const visible = !tableRzFilter[type];
+    dispatch.realview.setTableRzFilter({ [type]: visible });
+  }
+
+  const toggleAutoRefresh = () => {
+    dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
+  }
+
+  return (
+    <PanelBox
+      style={style}
+      title="本月水政巡查问题统计"
+      color="green"
+      // tabs={
+      //   <span className="button-group">
+      //     <span className={clsx({ active: tableRzFilter.sh })} onClick={() => toggleStType('sh')}>山洪</span>
+      //     <span className={clsx({ active: tableRzFilter.sw })} onClick={() => toggleStType('sw')}>水文</span>
+      //   </span>
+      // }
+      extra={
+        <>
+          <i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i>
+          {/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
+        </>
+      }
+    >
+      <TableContainer style={{ height: '100%' }}>
+        <Table size="small" stickyHeader>
+          <TableHead>
+            <TableRow>
+              <DpTableCell style={{ width: '35%' }} align="left">日期</DpTableCell>
+              <DpTableCell style={{ width: '12%' }} align="left">管理单位</DpTableCell>
+              <DpTableCell align="center" style={{ width: '12%' }}>问题类型</DpTableCell>
+              <DpTableCell align="center" style={{ width: '12%' }}>处理状态</DpTableCell>
+              <DpTableCell align="center" style={{ width: '12%' }}>问题描述</DpTableCell>
+              <DpTableCell align="center" style={{ width: '12%' }}>操作</DpTableCell>
+              {/* <DpTableCell align="right">警戒水位</DpTableCell> */}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {showData.map((row) => (
+              <DpTableRow key={row.id}>
+                 <DpTableCell component="th" scope="row">
+                  <div
+                    className="table-ellipsis cursor-pointer"
+                  >{row.time}</div>
+                </DpTableCell>
+                <DpTableCell component="th" scope="row">
+                  <div
+                    className="table-ellipsis cursor-pointer"
+                    // onClick={() => flyTo(row)}
+                  >{row.cl}</div>
+                </DpTableCell>
+                <DpTableCell align="center">{row.cl}</DpTableCell>
+                <DpTableCell align="center">{row.cl}</DpTableCell>
+                <DpTableCell align="center">{row.cl}</DpTableCell>
+                <DpTableCell align="center">{row.cl}</DpTableCell>
+                {/* {rzRender(row.rz, row.grz)}
+                {rzRender(row.rz, row.wrz)} */}
+              </DpTableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      {
+        setting && <Setting onClose={() => showSetting(false)} />
+      }
+    </PanelBox>
+  )
+}
+
+export default HDReal;

src/views/Home/panels/WhSta/OverallContent.js

@@ -0,0 +1,141 @@
+import { Button, makeStyles } from '@material-ui/core';
+import { Email } from '@material-ui/icons';
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import config from '../../../../config';
+import { bxstr, drpRealGet, skRealGet } from '../../../../models/_/real';
+import { strNumber } from '../../../../utils/tools';
+import { InfoPopNames } from '../../InfoPops';
+
+const useStyles = makeStyles({
+  root: {
+    padding: '1.5rem 0.75rem 0.75rem 0.75rem',
+    color: 'rgb(224, 246, 247)',
+    fontSize: '0.9rem',
+    lineHeight: '1.8rem',
+  },
+
+  titleDate: {
+    fontSize: '1.2rem',
+    margin: '0.2rem',
+    color: '#00deff',
+  },
+
+  number: {
+    color: '#ffd220',
+    fontSize: '1.2rem',
+    margin: '0.2rem',
+  },
+
+  sttype: {
+    color: '#92f0ff',
+  },
+  stname: {
+    fontWeight: 'bold',
+    fontSize: '1rem',
+    margin: '0.25rem',
+    cursor: 'pointer'
+  },
+
+  grid: {
+    display: 'flex',
+    justifyContent: 'space-around',
+    marginBottom: '1rem',
+    textAlign: 'center',
+
+    '& .value': {
+      fontSize: '1.8rem',
+      color: '#6fe9fd',
+      lineHeight: '2rem'
+    },
+
+
+    '& .key': {
+      fontSize: '0.8rem',
+      color: '#aaa',
+    },
+  },
+
+  action: {
+    textAlign: 'right',
+    color: '#fff',
+  }
+})
+
+export default function OverallContent({ data }) {
+  const classes = useStyles();
+  const dispatch = useDispatch();
+
+  const {
+    drpInfo,
+    skInfo,
+    tm1, tm2,
+  } = data || {};
+
+  const { h24, h1, h3, h6 } = drpInfo || {};
+
+  const _showRecord = (record, poptype) => {
+    if (record) {
+      const { lgtd, lttd } = record;
+      if (lgtd && lttd) {
+        dispatch.runtime.setFeaturePop({ type: poptype, properties: record, coordinates: [lgtd, lttd] });
+        dispatch.runtime.setCameraTarget({
+          center: [lgtd, lttd],
+          zoom: 15,
+          pitch: config.poiPitch,
+        });
+      }
+    }
+  }
+
+  const showRecord = (obj) => {
+    if (!obj) {
+      return;
+    }
+
+    const { type } = obj;
+    if (type === 'sk') {
+      skRealGet(obj.stcd).then((record) => {
+        _showRecord(record, InfoPopNames.RealSkPop)
+      })
+    } else {
+      drpRealGet(obj).then((record) => {
+        _showRecord(record, InfoPopNames.RealDrpPop)
+      });
+    }
+  }
+
+  const doBx = () => {
+    bxstr().then((data) => {
+      dispatch.runtime.setInfoDlg({
+        layerId: 'OverallSmtp',
+        properties: { txt: data }
+      })
+    });
+  }
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.grid}>
+        <div style={{padding:20, background: "linear-gradient(to bottom, #001529, #003366)"}}>
+          <div className="value" style={{color:'#5ecd45'}}>2</div>
+          <div className="key" style={{color:'#fff',fontSize:16}}>本月维护</div>
+        </div>
+        <div  style={{padding:20, background: "linear-gradient(to bottom, #001529, #003366)"}}>
+          <div className="value" style={{color:'#5ecd45'}}>5</div>
+          <div className="key" style={{color:'#fff',fontSize:16}}>本年维护</div>
+        </div>
+        <div  style={{padding:20, background: "linear-gradient(to bottom, #001529, #003366)"}}>
+          <div
+            className="value"
+            style={{ cursor: 'pointer',color:'#ba292a' }}
+            // onClick={() => showRecord(h24?.max)}
+          >
+            1
+          </div>
+          <div className="key" style={{color:'#fff',fontSize:16}}>未处理异常</div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { OverallPromise } from '../../../../models/_/real';
+import useRequest from '../../../../utils/useRequest';
+import PanelBox from '../../components/PanelBox';
+import OverallContent from './OverallContent';
+
+export default function Overall({ style }) {
+
+  const { data } = useRequest(OverallPromise.get);
+
+  return (
+    <PanelBox
+      style={style}
+      title="维护统计"
+      color="green"
+    >
+      <OverallContent data={data} />
+    </PanelBox>
+  )
+}

src/views/Home/panels/WhSta/index.less

@@ -0,0 +1,38 @@
+.dppanel-overall {
+  padding: 0.75rem;
+  color: rgb(224, 246, 247);
+  font-size: 0.8rem;
+  line-height: 1.8rem;
+
+  .title-date {
+    font-size: 1.2rem;
+    margin: 0.2rem;
+    color: #00deff;
+  }
+
+  .number {
+    color: #ffd220;
+    font-size: 1.2rem;
+    margin: 0.2rem;
+  }
+
+  .sttype {
+    color: #92f0ff;
+  }
+  .stname {
+    font-weight: bold;
+    font-size: 1rem;
+    margin: 0.25rem;
+  }
+
+  .sycm {
+    height: 5rem;
+    padding-top: 0.75rem;
+    ul{ margin-left:-.5rem;margin-right:-.5rem;  padding: .16rem 0;}
+    li{ float: left; width: 33.33%; text-align: center; position: relative}
+    li:before{ position:absolute; content: ""; height:30%; width: 1px; background: rgba(255,255,255,.1); right: 0; top: 15%;}
+    li:last-child:before{ width: 0;}
+    li h2{ font-size:2rem; color: #6fe9fd; margin: 0; font-family: 'electronicFont';margin-bottom: 0.5rem;}
+    li span{ font-size:1rem; color: #fff; opacity: .5;}
+  }
+}

src/views/Home/panels/Whjl/Setting.js

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import Dialog from '@material-ui/core/Dialog';
+import DialogContent from '@material-ui/core/DialogContent';
+import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
+import { FormGroup, MenuItem, Select, Switch, Typography } from '@material-ui/core';
+import DpDialogTitle from '../../../../layouts/mui/DpDialogTitle';
+import { useDispatch, useSelector } from 'react-redux';
+import { getLayerSetting, getLayerVisible } from '../../../../models/map/selectors';
+import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
+
+
+function Setting({ onClose }) {
+  const layerVisible = useSelector(getLayerVisible);
+  const layerSetting = useSelector(getLayerSetting);
+
+  const dispath = useDispatch();
+
+  return (
+    <Dialog
+      open={true}
+      onClose={onClose}
+      maxWidth="xl"
+      style={{ borderRadius: 0 }}
+      PaperComponent={DpPaperComponent}
+      BackdropComponent={DpBackgroundDrop}
+    >
+      <div className="boxhead"></div>
+
+      <DpDialogTitle>河道水位显示设置</DpDialogTitle>
+      <DialogContent>
+        <div style={{ width: 320, padding: '1rem 0' }}>
+          <FormGroup>
+            <div style={{ marginBottom: '1rem' }}>
+              <Typography variant="subtitle2">显示河道水位图层</Typography>
+              <Switch
+                checked={!!layerVisible.RealHDLayer}
+                color="primary"
+                edge="start"
+                onChange={(e) => dispath.map.setLayerVisible({ RealHDLayer: e.target.checked })}
+              />
+            </div>
+          </FormGroup>
+        </div>
+      </DialogContent>
+      <div className="boxfoot"></div>
+    </Dialog>
+  )
+}
+
+export default Setting;

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

@@ -0,0 +1,146 @@
+import React, { useMemo, useState } from 'react';
+import useRequest from '../../../../utils/useRequest';
+import PanelBox from '../../components/PanelBox';
+
+import Table from '@material-ui/core/Table';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableBody from '@material-ui/core/TableBody';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import DpTableCell from '../../../../layouts/mui/DpTableCell';
+import DpTableRow from '../../../../layouts/mui/DpTableRow';
+import { useDispatch, useSelector } from 'react-redux';
+import useRefresh from '../../../../utils/useRefresh';
+import { HDRealPromise } from '../../../../models/_/real';
+import clsx from 'clsx';
+import { renderHDRz } from '../../../../utils/renutils';
+import Setting from './Setting';
+import { InfoPopNames } from '../../InfoPops';
+import config from '../../../../config';
+import moment from 'moment';
+
+function rzRender(rz, base) {
+  return (
+    <DpTableCell align="right" style={{ color: rz >= base ? 'red' : '#fff' }}>
+      {typeof base === 'number' ? base.toFixed(2) : ''}
+    </DpTableCell>
+  );
+}
+
+function HDReal({ style }) {
+  const dispatch = useDispatch();
+  const tableRzFilter = useSelector(s => s.realview.tableRzFilter);
+  const hdAutoRefresh = useSelector(s => s.realview.hdAutoRefresh);
+  // const t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
+  // let { data } = useRequest(HDRealPromise.get, t);
+  const [setting, showSetting] = useState(false);
+
+  const flyTo = (record) => {
+    const { lgtd, lttd } = record;
+    if (lgtd && lttd) {
+      dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealHDPop, properties: record, coordinates: [lgtd, lttd] });
+      dispatch.runtime.setCameraTarget({
+        center: [lgtd, lttd + config.poiPositionOffsetY.hd],
+        zoom: config.poiPositionZoom.hd,
+        pitch: config.poiPitch,
+      });
+    }
+  }
+
+  const toggleStType = (type) => {
+    const visible = !tableRzFilter[type];
+    dispatch.realview.setTableRzFilter({ [type]: visible });
+  }
+const randomMinutes = Math.floor(Math.random() * 60) + 1;
+  const format = 'YYYY-MM-DD HH:mm';  
+  const familyNames = [
+    '张', '李', '王', '刘', '陈', '杨', '黄', '赵', '周', '吴',
+    '徐', '孙', '马', '朱', '胡', '郭', '何', '高', '林', '郑'
+];
+
+// 名字列表（常用字）
+const givenNames = [
+    '伟', '芳', '娜', '秀英', '敏', '静', '丽', '强', '磊', '军',
+    '洋', '勇', '艳', '杰', '娟', '涛', '明', '超', '秀兰', '霞'
+  ];
+  
+  const generateRandomName = () => {
+    const familyName = familyNames[Math.floor(Math.random() * familyNames.length)];
+    const givenName = givenNames[Math.floor(Math.random() * givenNames.length)];
+    return familyName + givenName;
+  };
+const showData = Array(2).fill(0).map((o, i) => ({
+    id:i + 1,
+    time: moment()
+            .subtract(i * 60 + randomMinutes, 'minutes')
+    .format(format),
+    status:0,
+    name:generateRandomName()
+  }))
+
+  const toggleAutoRefresh = () => {
+    dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
+  }
+
+ 
+
+  return (
+    <PanelBox
+      style={style}
+      title="本月维护记录"
+      color="green"
+      // tabs={
+      //   <span className="button-group">
+      //     <span className={clsx({ active: tableRzFilter.sh })} onClick={() => toggleStType('sh')}>山洪</span>
+      //     <span className={clsx({ active: tableRzFilter.sw })} onClick={() => toggleStType('sw')}>水文</span>
+      //   </span>
+      // }
+      extra={
+        <>
+          <i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i>
+          {/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
+        </>
+      }
+    >
+      <TableContainer style={{ height: '100%' }}>
+        <Table size="small" stickyHeader>
+          <TableHead>
+            <TableRow>
+              <DpTableCell style={{ width: '50%' }} align="left">维护完成日期</DpTableCell>
+              <DpTableCell style={{ width: '20%' }} align="left">维护人</DpTableCell>
+              <DpTableCell align="center" style={{ width: '30%' }}>异常项次</DpTableCell>
+              {/* <DpTableCell align="center" style={{ width: '40%' }}>监测时间</DpTableCell> */}
+              {/* <DpTableCell align="right">警戒水位</DpTableCell> */}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {showData.map((row) => (
+              <DpTableRow key={row.id}>
+                 <DpTableCell component="th" scope="row">
+                  <div
+                    className="table-ellipsis cursor-pointer"
+                  >{row.time}</div>
+                </DpTableCell>
+                <DpTableCell component="th" scope="row">
+                  <div
+                    className="table-ellipsis cursor-pointer"
+                    // onClick={() => flyTo(row)}
+                  >{row.name}</div>
+                </DpTableCell>
+                <DpTableCell align="center">{row.status}</DpTableCell>
+                {/* <DpTableCell align="center">{row.time}</DpTableCell> */}
+                {/* {rzRender(row.rz, row.grz)}
+                {rzRender(row.rz, row.wrz)} */}
+              </DpTableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      {
+        setting && <Setting onClose={() => showSetting(false)} />
+      }
+    </PanelBox>
+  )
+}
+
+export default HDReal;

src/views/Home/panels/Whwtqd/Setting.js

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import Dialog from '@material-ui/core/Dialog';
+import DialogContent from '@material-ui/core/DialogContent';
+import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
+import { FormGroup, MenuItem, Select, Switch, Typography } from '@material-ui/core';
+import DpDialogTitle from '../../../../layouts/mui/DpDialogTitle';
+import { useDispatch, useSelector } from 'react-redux';
+import { getLayerSetting, getLayerVisible } from '../../../../models/map/selectors';
+import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
+
+
+function Setting({ onClose }) {
+  const layerVisible = useSelector(getLayerVisible);
+  const layerSetting = useSelector(getLayerSetting);
+
+  const dispath = useDispatch();
+
+  return (
+    <Dialog
+      open={true}
+      onClose={onClose}
+      maxWidth="xl"
+      style={{ borderRadius: 0 }}
+      PaperComponent={DpPaperComponent}
+      BackdropComponent={DpBackgroundDrop}
+    >
+      <div className="boxhead"></div>
+
+      <DpDialogTitle>河道水位显示设置</DpDialogTitle>
+      <DialogContent>
+        <div style={{ width: 320, padding: '1rem 0' }}>
+          <FormGroup>
+            <div style={{ marginBottom: '1rem' }}>
+              <Typography variant="subtitle2">显示河道水位图层</Typography>
+              <Switch
+                checked={!!layerVisible.RealHDLayer}
+                color="primary"
+                edge="start"
+                onChange={(e) => dispath.map.setLayerVisible({ RealHDLayer: e.target.checked })}
+              />
+            </div>
+          </FormGroup>
+        </div>
+      </DialogContent>
+      <div className="boxfoot"></div>
+    </Dialog>
+  )
+}
+
+export default Setting;

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

@@ -0,0 +1,139 @@
+import React, { useMemo, useState } from 'react';
+import useRequest from '../../../../utils/useRequest';
+import PanelBox from '../../components/PanelBox';
+
+import Table from '@material-ui/core/Table';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableBody from '@material-ui/core/TableBody';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import DpTableCell from '../../../../layouts/mui/DpTableCell';
+import DpTableRow from '../../../../layouts/mui/DpTableRow';
+import { useDispatch, useSelector } from 'react-redux';
+import useRefresh from '../../../../utils/useRefresh';
+import { HDRealPromise } from '../../../../models/_/real';
+import clsx from 'clsx';
+import { renderHDRz } from '../../../../utils/renutils';
+import Setting from './Setting';
+import { InfoPopNames } from '../../InfoPops';
+import config from '../../../../config';
+import moment from 'moment';
+
+function rzRender(rz, base) {
+  return (
+    <DpTableCell align="right" style={{ color: rz >= base ? 'red' : '#fff' }}>
+      {typeof base === 'number' ? base.toFixed(2) : ''}
+    </DpTableCell>
+  );
+}
+
+function HDReal({ style }) {
+  const dispatch = useDispatch();
+  const tableRzFilter = useSelector(s => s.realview.tableRzFilter);
+  const hdAutoRefresh = useSelector(s => s.realview.hdAutoRefresh);
+  // const t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
+  // let { data } = useRequest(HDRealPromise.get, t);
+  const [setting, showSetting] = useState(false);
+
+  const flyTo = (record) => {
+    const { lgtd, lttd } = record;
+    if (lgtd && lttd) {
+      dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealHDPop, properties: record, coordinates: [lgtd, lttd] });
+      dispatch.runtime.setCameraTarget({
+        center: [lgtd, lttd + config.poiPositionOffsetY.hd],
+        zoom: config.poiPositionZoom.hd,
+        pitch: config.poiPitch,
+      });
+    }
+  }
+
+  const toggleStType = (type) => {
+    const visible = !tableRzFilter[type];
+    dispatch.realview.setTableRzFilter({ [type]: visible });
+  }
+const randomMinutes = Math.floor(Math.random() * 60) + 1;
+  const format = 'YYYY-MM-DD HH:mm';  
+  const familyNames = [
+    '张', '李', '王', '刘', '陈', '杨', '黄', '赵', '周', '吴',
+    '徐', '孙', '马', '朱', '胡', '郭', '何', '高', '林', '郑'
+];
+
+// 名字列表（常用字）
+const givenNames = [
+    '伟', '芳', '娜', '秀英', '敏', '静', '丽', '强', '磊', '军',
+    '洋', '勇', '艳', '杰', '娟', '涛', '明', '超', '秀兰', '霞'
+  ];
+  
+  const generateRandomName = () => {
+    const familyName = familyNames[Math.floor(Math.random() * familyNames.length)];
+    const givenName = givenNames[Math.floor(Math.random() * givenNames.length)];
+    return familyName + givenName;
+  };
+const showData = Array(30).fill(0).map((o, i) => ({
+    id:i + 1,
+    time: moment()
+            .subtract(i+ randomMinutes, 'day').subtract(i * 60 + randomMinutes, 'minutes')
+    .format(format),
+    status:0,
+  name: generateRandomName(),
+    des:'--'
+  }))
+
+  const toggleAutoRefresh = () => {
+    dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
+  }
+
+ 
+
+  return (
+    <PanelBox
+      style={style}
+      title="待处理维护清单"
+      color="green"
+      // tabs={
+      //   <span className="button-group">
+      //     <span className={clsx({ active: tableRzFilter.sh })} onClick={() => toggleStType('sh')}>山洪</span>
+      //     <span className={clsx({ active: tableRzFilter.sw })} onClick={() => toggleStType('sw')}>水文</span>
+      //   </span>
+      // }
+      extra={
+        <>
+          <i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i>
+          {/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
+        </>
+      }
+    >
+      <TableContainer style={{ height: '100%' }}>
+        <Table size="small" stickyHeader>
+          <TableHead>
+            <TableRow>
+              <DpTableCell style={{ width: '50%' }} align="left">上报时间</DpTableCell>
+              <DpTableCell align="left" style={{ width: '50%' }}>维护问题描述</DpTableCell>
+              {/* <DpTableCell align="center" style={{ width: '40%' }}>监测时间</DpTableCell> */}
+              {/* <DpTableCell align="right">警戒水位</DpTableCell> */}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {showData.map((row) => (
+              <DpTableRow key={row.id}>
+                 <DpTableCell component="th" scope="row">
+                  <div className="table-ellipsis cursor-pointer"
+                  >{row.time}</div>
+                </DpTableCell>
+                <DpTableCell component="th" scope="row">
+                  <div className="table-ellipsis cursor-pointer">{row.des}</div>
+                </DpTableCell>
+      
+              </DpTableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      {
+        setting && <Setting onClose={() => showSetting(false)} />
+      }
+    </PanelBox>
+  )
+}
+
+export default HDReal;

src/views/Home/panels/XcSta/OverallContent.js

@@ -0,0 +1,141 @@
+import { Button, makeStyles } from '@material-ui/core';
+import { Email } from '@material-ui/icons';
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import config from '../../../../config';
+import { bxstr, drpRealGet, skRealGet } from '../../../../models/_/real';
+import { strNumber } from '../../../../utils/tools';
+import { InfoPopNames } from '../../InfoPops';
+
+const useStyles = makeStyles({
+  root: {
+    padding: '1.5rem 0.75rem 0.75rem 0.75rem',
+    color: 'rgb(224, 246, 247)',
+    fontSize: '0.9rem',
+    lineHeight: '1.8rem',
+  },
+
+  titleDate: {
+    fontSize: '1.2rem',
+    margin: '0.2rem',
+    color: '#00deff',
+  },
+
+  number: {
+    color: '#ffd220',
+    fontSize: '1.2rem',
+    margin: '0.2rem',
+  },
+
+  sttype: {
+    color: '#92f0ff',
+  },
+  stname: {
+    fontWeight: 'bold',
+    fontSize: '1rem',
+    margin: '0.25rem',
+    cursor: 'pointer'
+  },
+
+  grid: {
+    display: 'flex',
+    justifyContent: 'space-around',
+    marginBottom: '1rem',
+    textAlign: 'center',
+
+    '& .value': {
+      fontSize: '1.8rem',
+      color: '#6fe9fd',
+      lineHeight: '2rem'
+    },
+
+
+    '& .key': {
+      fontSize: '0.8rem',
+      color: '#aaa',
+    },
+  },
+
+  action: {
+    textAlign: 'right',
+    color: '#fff',
+  }
+})
+
+export default function OverallContent({ data }) {
+  const classes = useStyles();
+  const dispatch = useDispatch();
+
+  const {
+    drpInfo,
+    skInfo,
+    tm1, tm2,
+  } = data || {};
+
+  const { h24, h1, h3, h6 } = drpInfo || {};
+
+  const _showRecord = (record, poptype) => {
+    if (record) {
+      const { lgtd, lttd } = record;
+      if (lgtd && lttd) {
+        dispatch.runtime.setFeaturePop({ type: poptype, properties: record, coordinates: [lgtd, lttd] });
+        dispatch.runtime.setCameraTarget({
+          center: [lgtd, lttd],
+          zoom: 15,
+          pitch: config.poiPitch,
+        });
+      }
+    }
+  }
+
+  const showRecord = (obj) => {
+    if (!obj) {
+      return;
+    }
+
+    const { type } = obj;
+    if (type === 'sk') {
+      skRealGet(obj.stcd).then((record) => {
+        _showRecord(record, InfoPopNames.RealSkPop)
+      })
+    } else {
+      drpRealGet(obj).then((record) => {
+        _showRecord(record, InfoPopNames.RealDrpPop)
+      });
+    }
+  }
+
+  const doBx = () => {
+    bxstr().then((data) => {
+      dispatch.runtime.setInfoDlg({
+        layerId: 'OverallSmtp',
+        properties: { txt: data }
+      })
+    });
+  }
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.grid}>
+        <div style={{padding:20, background: "linear-gradient(to bottom, #001529, #003366)"}}>
+          <div className="value" style={{color:'#5ecd45'}}>3</div>
+          <div className="key" style={{color:'#fff',fontSize:16}}>本月巡查</div>
+        </div>
+        <div  style={{padding:20, background: "linear-gradient(to bottom, #001529, #003366)"}}>
+          <div className="value" style={{color:'#5ecd45'}}>9</div>
+          <div className="key" style={{color:'#fff',fontSize:16}}>本年巡查</div>
+        </div>
+        <div  style={{padding:20, background: "linear-gradient(to bottom, #001529, #003366)"}}>
+          <div
+            className="value"
+            style={{ cursor: 'pointer',color:'#ba292a' }}
+            // onClick={() => showRecord(h24?.max)}
+          >
+            6
+          </div>
+          <div className="key" style={{color:'#fff',fontSize:16}}>未处理异常</div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { OverallPromise } from '../../../../models/_/real';
+import useRequest from '../../../../utils/useRequest';
+import PanelBox from '../../components/PanelBox';
+import OverallContent from './OverallContent';
+
+export default function Overall({ style }) {
+
+  const { data } = useRequest(OverallPromise.get);
+
+  return (
+    <PanelBox
+      style={style}
+      title="巡查统计"
+      color="green"
+    >
+      <OverallContent data={data} />
+    </PanelBox>
+  )
+}

src/views/Home/panels/XcSta/index.less

@@ -0,0 +1,38 @@
+.dppanel-overall {
+  padding: 0.75rem;
+  color: rgb(224, 246, 247);
+  font-size: 0.8rem;
+  line-height: 1.8rem;
+
+  .title-date {
+    font-size: 1.2rem;
+    margin: 0.2rem;
+    color: #00deff;
+  }
+
+  .number {
+    color: #ffd220;
+    font-size: 1.2rem;
+    margin: 0.2rem;
+  }
+
+  .sttype {
+    color: #92f0ff;
+  }
+  .stname {
+    font-weight: bold;
+    font-size: 1rem;
+    margin: 0.25rem;
+  }
+
+  .sycm {
+    height: 5rem;
+    padding-top: 0.75rem;
+    ul{ margin-left:-.5rem;margin-right:-.5rem;  padding: .16rem 0;}
+    li{ float: left; width: 33.33%; text-align: center; position: relative}
+    li:before{ position:absolute; content: ""; height:30%; width: 1px; background: rgba(255,255,255,.1); right: 0; top: 15%;}
+    li:last-child:before{ width: 0;}
+    li h2{ font-size:2rem; color: #6fe9fd; margin: 0; font-family: 'electronicFont';margin-bottom: 0.5rem;}
+    li span{ font-size:1rem; color: #fff; opacity: .5;}
+  }
+}

src/views/Home/panels/Xcjl/Setting.js

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import Dialog from '@material-ui/core/Dialog';
+import DialogContent from '@material-ui/core/DialogContent';
+import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
+import { FormGroup, MenuItem, Select, Switch, Typography } from '@material-ui/core';
+import DpDialogTitle from '../../../../layouts/mui/DpDialogTitle';
+import { useDispatch, useSelector } from 'react-redux';
+import { getLayerSetting, getLayerVisible } from '../../../../models/map/selectors';
+import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
+
+
+function Setting({ onClose }) {
+  const layerVisible = useSelector(getLayerVisible);
+  const layerSetting = useSelector(getLayerSetting);
+
+  const dispath = useDispatch();
+
+  return (
+    <Dialog
+      open={true}
+      onClose={onClose}
+      maxWidth="xl"
+      style={{ borderRadius: 0 }}
+      PaperComponent={DpPaperComponent}
+      BackdropComponent={DpBackgroundDrop}
+    >
+      <div className="boxhead"></div>
+
+      <DpDialogTitle>河道水位显示设置</DpDialogTitle>
+      <DialogContent>
+        <div style={{ width: 320, padding: '1rem 0' }}>
+          <FormGroup>
+            <div style={{ marginBottom: '1rem' }}>
+              <Typography variant="subtitle2">显示河道水位图层</Typography>
+              <Switch
+                checked={!!layerVisible.RealHDLayer}
+                color="primary"
+                edge="start"
+                onChange={(e) => dispath.map.setLayerVisible({ RealHDLayer: e.target.checked })}
+              />
+            </div>
+          </FormGroup>
+        </div>
+      </DialogContent>
+      <div className="boxfoot"></div>
+    </Dialog>
+  )
+}
+
+export default Setting;

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

@@ -0,0 +1,146 @@
+import React, { useMemo, useState } from 'react';
+import useRequest from '../../../../utils/useRequest';
+import PanelBox from '../../components/PanelBox';
+
+import Table from '@material-ui/core/Table';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableBody from '@material-ui/core/TableBody';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import DpTableCell from '../../../../layouts/mui/DpTableCell';
+import DpTableRow from '../../../../layouts/mui/DpTableRow';
+import { useDispatch, useSelector } from 'react-redux';
+import useRefresh from '../../../../utils/useRefresh';
+import { HDRealPromise } from '../../../../models/_/real';
+import clsx from 'clsx';
+import { renderHDRz } from '../../../../utils/renutils';
+import Setting from './Setting';
+import { InfoPopNames } from '../../InfoPops';
+import config from '../../../../config';
+import moment from 'moment';
+
+function rzRender(rz, base) {
+  return (
+    <DpTableCell align="right" style={{ color: rz >= base ? 'red' : '#fff' }}>
+      {typeof base === 'number' ? base.toFixed(2) : ''}
+    </DpTableCell>
+  );
+}
+
+function HDReal({ style }) {
+  const dispatch = useDispatch();
+  const tableRzFilter = useSelector(s => s.realview.tableRzFilter);
+  const hdAutoRefresh = useSelector(s => s.realview.hdAutoRefresh);
+  const t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
+  // let { data } = useRequest(HDRealPromise.get, t);
+  const [setting, showSetting] = useState(false);
+
+  const flyTo = (record) => {
+    const { lgtd, lttd } = record;
+    if (lgtd && lttd) {
+      dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealHDPop, properties: record, coordinates: [lgtd, lttd] });
+      dispatch.runtime.setCameraTarget({
+        center: [lgtd, lttd + config.poiPositionOffsetY.hd],
+        zoom: config.poiPositionZoom.hd,
+        pitch: config.poiPitch,
+      });
+    }
+  }
+
+  const toggleStType = (type) => {
+    const visible = !tableRzFilter[type];
+    dispatch.realview.setTableRzFilter({ [type]: visible });
+  }
+const randomMinutes = Math.floor(Math.random() * 60) + 1;
+  const format = 'YYYY-MM-DD HH:mm';  
+  const familyNames = [
+    '张', '李', '王', '刘', '陈', '杨', '黄', '赵', '周', '吴',
+    '徐', '孙', '马', '朱', '胡', '郭', '何', '高', '林', '郑'
+];
+
+// 名字列表（常用字）
+const givenNames = [
+    '伟', '芳', '娜', '秀英', '敏', '静', '丽', '强', '磊', '军',
+    '洋', '勇', '艳', '杰', '娟', '涛', '明', '超', '秀兰', '霞'
+  ];
+  
+  const generateRandomName = () => {
+    const familyName = familyNames[Math.floor(Math.random() * familyNames.length)];
+    const givenName = givenNames[Math.floor(Math.random() * givenNames.length)];
+    return familyName + givenName;
+  };
+const showData = Array(3).fill(0).map((o, i) => ({
+    id:i + 1,
+    time: moment()
+            .subtract(i * 60 + randomMinutes, 'minutes')
+    .format(format),
+    status:0,
+    name:generateRandomName()
+  }))
+
+  const toggleAutoRefresh = () => {
+    dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
+  }
+
+ 
+
+  return (
+    <PanelBox
+      style={style}
+      title="本月巡查记录"
+      color="green"
+      // tabs={
+      //   <span className="button-group">
+      //     <span className={clsx({ active: tableRzFilter.sh })} onClick={() => toggleStType('sh')}>山洪</span>
+      //     <span className={clsx({ active: tableRzFilter.sw })} onClick={() => toggleStType('sw')}>水文</span>
+      //   </span>
+      // }
+      extra={
+        <>
+          <i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i>
+          {/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
+        </>
+      }
+    >
+      <TableContainer style={{ height: '100%' }}>
+        <Table size="small" stickyHeader>
+          <TableHead>
+            <TableRow>
+              <DpTableCell style={{ width: '50%' }} align="left">巡查完成日期</DpTableCell>
+              <DpTableCell style={{ width: '20%' }} align="left">巡查人</DpTableCell>
+              <DpTableCell align="center" style={{ width: '30%' }}>异常项次</DpTableCell>
+              {/* <DpTableCell align="center" style={{ width: '40%' }}>监测时间</DpTableCell> */}
+              {/* <DpTableCell align="right">警戒水位</DpTableCell> */}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {showData.map((row) => (
+              <DpTableRow key={row.id}>
+                 <DpTableCell component="th" scope="row">
+                  <div
+                    className="table-ellipsis cursor-pointer"
+                  >{row.time}</div>
+                </DpTableCell>
+                <DpTableCell component="th" scope="row">
+                  <div
+                    className="table-ellipsis cursor-pointer"
+                    // onClick={() => flyTo(row)}
+                  >{row.name}</div>
+                </DpTableCell>
+                <DpTableCell align="center">{row.status}</DpTableCell>
+                {/* <DpTableCell align="center">{row.time}</DpTableCell> */}
+                {/* {rzRender(row.rz, row.grz)}
+                {rzRender(row.rz, row.wrz)} */}
+              </DpTableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      {
+        setting && <Setting onClose={() => showSetting(false)} />
+      }
+    </PanelBox>
+  )
+}
+
+export default HDReal;

src/views/Home/panels/Xcwtqd/Setting.js

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import Dialog from '@material-ui/core/Dialog';
+import DialogContent from '@material-ui/core/DialogContent';
+import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
+import { FormGroup, MenuItem, Select, Switch, Typography } from '@material-ui/core';
+import DpDialogTitle from '../../../../layouts/mui/DpDialogTitle';
+import { useDispatch, useSelector } from 'react-redux';
+import { getLayerSetting, getLayerVisible } from '../../../../models/map/selectors';
+import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
+
+
+function Setting({ onClose }) {
+  const layerVisible = useSelector(getLayerVisible);
+  const layerSetting = useSelector(getLayerSetting);
+
+  const dispath = useDispatch();
+
+  return (
+    <Dialog
+      open={true}
+      onClose={onClose}
+      maxWidth="xl"
+      style={{ borderRadius: 0 }}
+      PaperComponent={DpPaperComponent}
+      BackdropComponent={DpBackgroundDrop}
+    >
+      <div className="boxhead"></div>
+
+      <DpDialogTitle>河道水位显示设置</DpDialogTitle>
+      <DialogContent>
+        <div style={{ width: 320, padding: '1rem 0' }}>
+          <FormGroup>
+            <div style={{ marginBottom: '1rem' }}>
+              <Typography variant="subtitle2">显示河道水位图层</Typography>
+              <Switch
+                checked={!!layerVisible.RealHDLayer}
+                color="primary"
+                edge="start"
+                onChange={(e) => dispath.map.setLayerVisible({ RealHDLayer: e.target.checked })}
+              />
+            </div>
+          </FormGroup>
+        </div>
+      </DialogContent>
+      <div className="boxfoot"></div>
+    </Dialog>
+  )
+}
+
+export default Setting;

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

@@ -0,0 +1,139 @@
+import React, { useMemo, useState } from 'react';
+import useRequest from '../../../../utils/useRequest';
+import PanelBox from '../../components/PanelBox';
+
+import Table from '@material-ui/core/Table';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableBody from '@material-ui/core/TableBody';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import DpTableCell from '../../../../layouts/mui/DpTableCell';
+import DpTableRow from '../../../../layouts/mui/DpTableRow';
+import { useDispatch, useSelector } from 'react-redux';
+import useRefresh from '../../../../utils/useRefresh';
+import { HDRealPromise } from '../../../../models/_/real';
+import clsx from 'clsx';
+import { renderHDRz } from '../../../../utils/renutils';
+import Setting from './Setting';
+import { InfoPopNames } from '../../InfoPops';
+import config from '../../../../config';
+import moment from 'moment';
+
+function rzRender(rz, base) {
+  return (
+    <DpTableCell align="right" style={{ color: rz >= base ? 'red' : '#fff' }}>
+      {typeof base === 'number' ? base.toFixed(2) : ''}
+    </DpTableCell>
+  );
+}
+
+function HDReal({ style }) {
+  const dispatch = useDispatch();
+  const tableRzFilter = useSelector(s => s.realview.tableRzFilter);
+  const hdAutoRefresh = useSelector(s => s.realview.hdAutoRefresh);
+  // const t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
+  // let { data } = useRequest(HDRealPromise.get, t);
+  const [setting, showSetting] = useState(false);
+
+  const flyTo = (record) => {
+    const { lgtd, lttd } = record;
+    if (lgtd && lttd) {
+      dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealHDPop, properties: record, coordinates: [lgtd, lttd] });
+      dispatch.runtime.setCameraTarget({
+        center: [lgtd, lttd + config.poiPositionOffsetY.hd],
+        zoom: config.poiPositionZoom.hd,
+        pitch: config.poiPitch,
+      });
+    }
+  }
+
+  const toggleStType = (type) => {
+    const visible = !tableRzFilter[type];
+    dispatch.realview.setTableRzFilter({ [type]: visible });
+  }
+const randomMinutes = Math.floor(Math.random() * 60) + 1;
+  const format = 'YYYY-MM-DD HH:mm';  
+  const familyNames = [
+    '张', '李', '王', '刘', '陈', '杨', '黄', '赵', '周', '吴',
+    '徐', '孙', '马', '朱', '胡', '郭', '何', '高', '林', '郑'
+];
+
+// 名字列表（常用字）
+const givenNames = [
+    '伟', '芳', '娜', '秀英', '敏', '静', '丽', '强', '磊', '军',
+    '洋', '勇', '艳', '杰', '娟', '涛', '明', '超', '秀兰', '霞'
+  ];
+  
+  const generateRandomName = () => {
+    const familyName = familyNames[Math.floor(Math.random() * familyNames.length)];
+    const givenName = givenNames[Math.floor(Math.random() * givenNames.length)];
+    return familyName + givenName;
+  };
+const showData = Array(30).fill(0).map((o, i) => ({
+    id:i + 1,
+    time: moment()
+            .subtract(i+ randomMinutes, 'day').subtract(i * 60 + randomMinutes, 'minutes')
+    .format(format),
+    status:0,
+  name: generateRandomName(),
+    des:'--'
+  }))
+
+  const toggleAutoRefresh = () => {
+    dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
+  }
+
+ 
+
+  return (
+    <PanelBox
+      style={style}
+      title="待处理问题清单"
+      color="green"
+      // tabs={
+      //   <span className="button-group">
+      //     <span className={clsx({ active: tableRzFilter.sh })} onClick={() => toggleStType('sh')}>山洪</span>
+      //     <span className={clsx({ active: tableRzFilter.sw })} onClick={() => toggleStType('sw')}>水文</span>
+      //   </span>
+      // }
+      extra={
+        <>
+          <i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i>
+          {/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
+        </>
+      }
+    >
+      <TableContainer style={{ height: '100%' }}>
+        <Table size="small" stickyHeader>
+          <TableHead>
+            <TableRow>
+              <DpTableCell style={{ width: '50%' }} align="left">上报时间</DpTableCell>
+              <DpTableCell align="left" style={{ width: '50%' }}>巡检问题描述</DpTableCell>
+              {/* <DpTableCell align="center" style={{ width: '40%' }}>监测时间</DpTableCell> */}
+              {/* <DpTableCell align="right">警戒水位</DpTableCell> */}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {showData.map((row) => (
+              <DpTableRow key={row.id}>
+                 <DpTableCell component="th" scope="row">
+                  <div className="table-ellipsis cursor-pointer"
+                  >{row.time}</div>
+                </DpTableCell>
+                <DpTableCell component="th" scope="row">
+                  <div className="table-ellipsis cursor-pointer">{row.des}</div>
+                </DpTableCell>
+      
+              </DpTableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      {
+        setting && <Setting onClose={() => showSetting(false)} />
+      }
+    </PanelBox>
+  )
+}
+
+export default HDReal;