diff --git a/public/assets/sz.png b/public/assets/sz.png new file mode 100644 index 0000000..bf2daf3 Binary files /dev/null and b/public/assets/sz.png differ diff --git a/src/models/map/index.js b/src/models/map/index.js index e3fecf0..f48f214 100644 --- a/src/models/map/index.js +++ b/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, diff --git a/src/models/map/layout.js b/src/models/map/layout.js index 82e9d3e..c2e4932 100644 --- a/src/models/map/layout.js +++ b/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 } }, ]; diff --git a/src/views/Home/PanelIndex.js b/src/views/Home/PanelIndex.js index e5e91e7..2b4adaf 100644 --- a/src/views/Home/PanelIndex.js +++ b/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 } else if (name == '土壤墒情监测') { return + }else if (name == '水质监测') { + return } else if (name == '视频监控') { return } else if (name === '预警信息管理') { @@ -106,9 +117,25 @@ export default function PanelIndex({ name, style, ...params }) { } else if (name === '降雨预警') { return } else if (name === '工程巡查') { - return + return } else if (name === '安全监测') { return + } else if (name === '本月巡查记录') { + return + } else if (name === '待处理巡查问题清单') { + return + }else if (name === '本月工程维护') { + return + } else if (name === '待处理维护问题清单') { + return + }else if (name === '维护统计') { + return + }else if (name === '水政统计') { + return + }else if (name === '区域统计') { + return + }else if (name === '本月水政巡查问题统计') { + return } return ( diff --git a/src/views/Home/panels/LlWatch/index.js b/src/views/Home/panels/LlWatch/index.js index cf5f429..45e0288 100644 --- a/src/views/Home/panels/LlWatch/index.js +++ b/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); diff --git a/src/views/Home/panels/SzSta/OverallContent.js b/src/views/Home/panels/SzSta/OverallContent.js new file mode 100644 index 0000000..fb37000 --- /dev/null +++ b/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 ( +
+
+
+
累计巡查次数
+
32
+
+
+
本月巡查次数
+
5
+
+
+
涉水事件累计
+
+ 1 +
+ +
+
+
本月事件数量
+
50
+
+
+
处理中事件
+
24
+
+
+
+ ) +} diff --git a/src/views/Home/panels/SzSta/index.js b/src/views/Home/panels/SzSta/index.js new file mode 100644 index 0000000..5ee445f --- /dev/null +++ b/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 ( + + + + ) +} diff --git a/src/views/Home/panels/SzSta/index.less b/src/views/Home/panels/SzSta/index.less new file mode 100644 index 0000000..ee34c9b --- /dev/null +++ b/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;} + } +} \ No newline at end of file diff --git a/src/views/Home/panels/SzWatch/Setting.js b/src/views/Home/panels/SzWatch/Setting.js new file mode 100644 index 0000000..fd1c4ef --- /dev/null +++ b/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 ( + +
+ + 河道水位显示设置 + +
+ +
+ 显示河道水位图层 + dispath.map.setLayerVisible({ RealHDLayer: e.target.checked })} + /> +
+ +
+ +
+ + ) +} + +export default Setting; diff --git a/src/views/Home/panels/SzWatch/index.js b/src/views/Home/panels/SzWatch/index.js new file mode 100644 index 0000000..32a7ec4 --- /dev/null +++ b/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 ( + = base ? 'red' : '#fff' }}> + {typeof base === 'number' ? base.toFixed(2) : ''} + + ); +} + +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 ( + + // toggleStType('sh')}>山洪 + // toggleStType('sw')}>水文 + // + // } + extra={ + <> + + {/* showSetting(true)}> */} + + } + > + + + ) +} + +export default HDReal; diff --git a/src/views/Home/panels/Szqytj/Setting.js b/src/views/Home/panels/Szqytj/Setting.js new file mode 100644 index 0000000..fd1c4ef --- /dev/null +++ b/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 ( + +
+ + 河道水位显示设置 + +
+ +
+ 显示河道水位图层 + dispath.map.setLayerVisible({ RealHDLayer: e.target.checked })} + /> +
+ +
+ +
+ + ) +} + +export default Setting; diff --git a/src/views/Home/panels/Szqytj/index.js b/src/views/Home/panels/Szqytj/index.js new file mode 100644 index 0000000..8e71589 --- /dev/null +++ b/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 ( + = base ? 'red' : '#fff' }}> + {typeof base === 'number' ? base.toFixed(2) : ''} + + ); +} + +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 ( + + // toggleStType('sh')}>山洪 + // toggleStType('sw')}>水文 + // + // } + extra={ + <> + + {/* showSetting(true)}> */} + + } + > + + + + + 区域 + 巡查次数 + 事件数量 + 处理中 + {/* 警戒水位 */} + + + + {showData.map((row) => ( + + +
{row.id}
+ + +
flyTo(row)} + >{row.kd}
+ + {row.ll} + {row.cl} + {/* {rzRender(row.rz, row.grz)} + {rzRender(row.rz, row.wrz)} */} + + ))} + +
+ + { + setting && showSetting(false)} /> + } + + ) +} + +export default HDReal; diff --git a/src/views/Home/panels/Szwtqytj/Setting.js b/src/views/Home/panels/Szwtqytj/Setting.js new file mode 100644 index 0000000..fd1c4ef --- /dev/null +++ b/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 ( + +
+ + 河道水位显示设置 + +
+ +
+ 显示河道水位图层 + dispath.map.setLayerVisible({ RealHDLayer: e.target.checked })} + /> +
+ +
+ +
+ + ) +} + +export default Setting; diff --git a/src/views/Home/panels/Szwtqytj/index.js b/src/views/Home/panels/Szwtqytj/index.js new file mode 100644 index 0000000..b5c4f30 --- /dev/null +++ b/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 ( + = base ? 'red' : '#fff' }}> + {typeof base === 'number' ? base.toFixed(2) : ''} + + ); +} + +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 ( + + // toggleStType('sh')}>山洪 + // toggleStType('sw')}>水文 + // + // } + extra={ + <> + + {/* showSetting(true)}> */} + + } + > + + + + + 日期 + 管理单位 + 问题类型 + 处理状态 + 问题描述 + 操作 + {/* 警戒水位 */} + + + + {showData.map((row) => ( + + +
{row.time}
+ + +
flyTo(row)} + >{row.cl}
+ + {row.cl} + {row.cl} + {row.cl} + {row.cl} + {/* {rzRender(row.rz, row.grz)} + {rzRender(row.rz, row.wrz)} */} + + ))} + +
+ + { + setting && showSetting(false)} /> + } + + ) +} + +export default HDReal; diff --git a/src/views/Home/panels/WhSta/OverallContent.js b/src/views/Home/panels/WhSta/OverallContent.js new file mode 100644 index 0000000..3fb9c4b --- /dev/null +++ b/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 ( +
+
+
+
2
+
本月维护
+
+
+
5
+
本年维护
+
+
+
showRecord(h24?.max)} + > + 1 +
+
未处理异常
+
+
+
+ ) +} diff --git a/src/views/Home/panels/WhSta/index.js b/src/views/Home/panels/WhSta/index.js new file mode 100644 index 0000000..5507ba4 --- /dev/null +++ b/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 ( + + + + ) +} diff --git a/src/views/Home/panels/WhSta/index.less b/src/views/Home/panels/WhSta/index.less new file mode 100644 index 0000000..ee34c9b --- /dev/null +++ b/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;} + } +} \ No newline at end of file diff --git a/src/views/Home/panels/Whjl/Setting.js b/src/views/Home/panels/Whjl/Setting.js new file mode 100644 index 0000000..fd1c4ef --- /dev/null +++ b/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 ( + +
+ + 河道水位显示设置 + +
+ +
+ 显示河道水位图层 + dispath.map.setLayerVisible({ RealHDLayer: e.target.checked })} + /> +
+ +
+ +
+ + ) +} + +export default Setting; diff --git a/src/views/Home/panels/Whjl/index.js b/src/views/Home/panels/Whjl/index.js new file mode 100644 index 0000000..73218f7 --- /dev/null +++ b/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 ( + = base ? 'red' : '#fff' }}> + {typeof base === 'number' ? base.toFixed(2) : ''} + + ); +} + +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 ( + + // toggleStType('sh')}>山洪 + // toggleStType('sw')}>水文 + // + // } + extra={ + <> + + {/* showSetting(true)}> */} + + } + > + + + + + 维护完成日期 + 维护人 + 异常项次 + {/* 监测时间 */} + {/* 警戒水位 */} + + + + {showData.map((row) => ( + + +
{row.time}
+ + +
flyTo(row)} + >{row.name}
+ + {row.status} + {/* {row.time} */} + {/* {rzRender(row.rz, row.grz)} + {rzRender(row.rz, row.wrz)} */} + + ))} + +
+ + { + setting && showSetting(false)} /> + } + + ) +} + +export default HDReal; diff --git a/src/views/Home/panels/Whwtqd/Setting.js b/src/views/Home/panels/Whwtqd/Setting.js new file mode 100644 index 0000000..fd1c4ef --- /dev/null +++ b/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 ( + +
+ + 河道水位显示设置 + +
+ +
+ 显示河道水位图层 + dispath.map.setLayerVisible({ RealHDLayer: e.target.checked })} + /> +
+ +
+ +
+ + ) +} + +export default Setting; diff --git a/src/views/Home/panels/Whwtqd/index.js b/src/views/Home/panels/Whwtqd/index.js new file mode 100644 index 0000000..9a23c40 --- /dev/null +++ b/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 ( + = base ? 'red' : '#fff' }}> + {typeof base === 'number' ? base.toFixed(2) : ''} + + ); +} + +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 ( + + // toggleStType('sh')}>山洪 + // toggleStType('sw')}>水文 + // + // } + extra={ + <> + + {/* showSetting(true)}> */} + + } + > + + + + + 上报时间 + 维护问题描述 + {/* 监测时间 */} + {/* 警戒水位 */} + + + + {showData.map((row) => ( + + +
{row.time}
+ + +
{row.des}
+ + + + ))} + +
+ + { + setting && showSetting(false)} /> + } + + ) +} + +export default HDReal; diff --git a/src/views/Home/panels/XcSta/OverallContent.js b/src/views/Home/panels/XcSta/OverallContent.js new file mode 100644 index 0000000..4db559d --- /dev/null +++ b/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 ( +
+
+
+
3
+
本月巡查
+
+
+
9
+
本年巡查
+
+
+
showRecord(h24?.max)} + > + 6 +
+
未处理异常
+
+
+
+ ) +} diff --git a/src/views/Home/panels/XcSta/index.js b/src/views/Home/panels/XcSta/index.js new file mode 100644 index 0000000..9738b8f --- /dev/null +++ b/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 ( + + + + ) +} diff --git a/src/views/Home/panels/XcSta/index.less b/src/views/Home/panels/XcSta/index.less new file mode 100644 index 0000000..ee34c9b --- /dev/null +++ b/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;} + } +} \ No newline at end of file diff --git a/src/views/Home/panels/Xcjl/Setting.js b/src/views/Home/panels/Xcjl/Setting.js new file mode 100644 index 0000000..fd1c4ef --- /dev/null +++ b/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 ( + +
+ + 河道水位显示设置 + +
+ +
+ 显示河道水位图层 + dispath.map.setLayerVisible({ RealHDLayer: e.target.checked })} + /> +
+ +
+ +
+ + ) +} + +export default Setting; diff --git a/src/views/Home/panels/Xcjl/index.js b/src/views/Home/panels/Xcjl/index.js new file mode 100644 index 0000000..21b1f26 --- /dev/null +++ b/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 ( + = base ? 'red' : '#fff' }}> + {typeof base === 'number' ? base.toFixed(2) : ''} + + ); +} + +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 ( + + // toggleStType('sh')}>山洪 + // toggleStType('sw')}>水文 + // + // } + extra={ + <> + + {/* showSetting(true)}> */} + + } + > + + + + + 巡查完成日期 + 巡查人 + 异常项次 + {/* 监测时间 */} + {/* 警戒水位 */} + + + + {showData.map((row) => ( + + +
{row.time}
+ + +
flyTo(row)} + >{row.name}
+ + {row.status} + {/* {row.time} */} + {/* {rzRender(row.rz, row.grz)} + {rzRender(row.rz, row.wrz)} */} + + ))} + +
+ + { + setting && showSetting(false)} /> + } + + ) +} + +export default HDReal; diff --git a/src/views/Home/panels/Xcwtqd/Setting.js b/src/views/Home/panels/Xcwtqd/Setting.js new file mode 100644 index 0000000..fd1c4ef --- /dev/null +++ b/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 ( + +
+ + 河道水位显示设置 + +
+ +
+ 显示河道水位图层 + dispath.map.setLayerVisible({ RealHDLayer: e.target.checked })} + /> +
+ +
+ +
+ + ) +} + +export default Setting; diff --git a/src/views/Home/panels/Xcwtqd/index.js b/src/views/Home/panels/Xcwtqd/index.js new file mode 100644 index 0000000..eddcbd0 --- /dev/null +++ b/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 ( + = base ? 'red' : '#fff' }}> + {typeof base === 'number' ? base.toFixed(2) : ''} + + ); +} + +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 ( + + // toggleStType('sh')}>山洪 + // toggleStType('sw')}>水文 + // + // } + extra={ + <> + + {/* showSetting(true)}> */} + + } + > + + + + + 上报时间 + 巡检问题描述 + {/* 监测时间 */} + {/* 警戒水位 */} + + + + {showData.map((row) => ( + + +
{row.time}
+ + +
{row.des}
+ + + + ))} + +
+ + { + setting && showSetting(false)} /> + } + + ) +} + +export default HDReal;