feat(): 水政管理搭建
parent
1909009b74
commit
394fd58b5a
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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 } },
|
||||
];
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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;}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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;}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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;}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
Loading…
Reference in New Issue