feat(): 水厂开发
parent
828cfc6dbf
commit
76eef743e6
Binary file not shown.
|
After Width: | Height: | Size: 239 KiB |
|
|
@ -96,7 +96,27 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
||||||
{ key: '日供水量',style: { height: '16rem', flexGrow: 1 } },
|
{ key: '日供水量',style: { height: '16rem', flexGrow: 1 } },
|
||||||
{ key: '供水覆盖率',style: { height: '16rem', flexGrow: 1 } },
|
{ key: '供水覆盖率',style: { height: '16rem', flexGrow: 1 } },
|
||||||
];
|
];
|
||||||
} else if (view === 501) {
|
}else if (view === 305) {
|
||||||
|
left = [
|
||||||
|
{ key: '供水量统计', style: { height: '30rem', flexGrow: 1 } },
|
||||||
|
{ key: '取水量统计', style: { height: '40rem', flexGrow: 1 } },
|
||||||
|
];
|
||||||
|
leftFullHeight = true;
|
||||||
|
}
|
||||||
|
else if (view === 306) {
|
||||||
|
left = [
|
||||||
|
{ key: '管线', style: { height: '30rem', flexGrow: 1 } },
|
||||||
|
{ key: '数量及里程分布', style: { height: '40rem', flexGrow: 1 } },
|
||||||
|
{ key: '管网监测数据', style: { height: '40rem', flexGrow: 1 } },
|
||||||
|
];
|
||||||
|
leftFullHeight = true;
|
||||||
|
}
|
||||||
|
else if (view === 307) {
|
||||||
|
left = [
|
||||||
|
{ key: '预案库管理', style: { height: '40rem', flexGrow: 1 } },
|
||||||
|
];
|
||||||
|
leftFullHeight = true;
|
||||||
|
}else if (view === 501) {
|
||||||
left = [
|
left = [
|
||||||
{ key: '雨量监测',style: { height: '33%', flexGrow: 1 } },
|
{ key: '雨量监测',style: { height: '33%', flexGrow: 1 } },
|
||||||
{ key: '水情监测', style: { height: '33%', flexGrow: 1 } },
|
{ key: '水情监测', style: { height: '33%', flexGrow: 1 } },
|
||||||
|
|
@ -209,7 +229,20 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
||||||
{ key: '供水监控', style: { flexGrow: 1 } },
|
{ key: '供水监控', style: { flexGrow: 1 } },
|
||||||
rightFullHeight = true
|
rightFullHeight = true
|
||||||
];
|
];
|
||||||
} else if (view === 501) {
|
}else if (view === 305) {
|
||||||
|
right = [
|
||||||
|
{ key: '电耗统计', style: { height: '100%', flexGrow: 1 } },
|
||||||
|
];
|
||||||
|
rightFullHeight = true;
|
||||||
|
}
|
||||||
|
else if (view === 306) {
|
||||||
|
right = [
|
||||||
|
{ key: '漏损排行榜', style: { height: '50%', flexGrow: 1 } },
|
||||||
|
{ key: '最小流量', style: { height: '50%', flexGrow: 1 } },
|
||||||
|
];
|
||||||
|
rightFullHeight = true;
|
||||||
|
}
|
||||||
|
else if (view === 501) {
|
||||||
right = [
|
right = [
|
||||||
{ key: '水质监测',style: { height: '33%', flexGrow: 1 } },
|
{ key: '水质监测',style: { height: '33%', flexGrow: 1 } },
|
||||||
{ key: '土壤墒情监测', style: { height: '33%', flexGrow: 1 } },
|
{ key: '土壤墒情监测', style: { height: '33%', flexGrow: 1 } },
|
||||||
|
|
|
||||||
|
|
@ -13,9 +13,10 @@ function initState() {
|
||||||
featurePops: [],
|
featurePops: [],
|
||||||
layerSetting: {
|
layerSetting: {
|
||||||
},
|
},
|
||||||
yyObj:{},
|
yyObj: {},
|
||||||
|
gwobj:undefined,
|
||||||
markers: {}, // type -> [{ id, lgtd, lttd, elev }]
|
markers: {}, // type -> [{ id, lgtd, lttd, elev }]
|
||||||
|
scya:undefined,
|
||||||
warnresp: {},
|
warnresp: {},
|
||||||
warnrespTick: 1,
|
warnrespTick: 1,
|
||||||
}
|
}
|
||||||
|
|
@ -30,6 +31,12 @@ const runtime = {
|
||||||
setYyfa(state, props) {
|
setYyfa(state, props) {
|
||||||
return { ...state, yyObj: props }
|
return { ...state, yyObj: props }
|
||||||
},
|
},
|
||||||
|
setGwtc(state, props) {
|
||||||
|
return { ...state, gwobj: props }
|
||||||
|
},
|
||||||
|
setScya(state, props) {
|
||||||
|
return { ...state, scya: props }
|
||||||
|
},
|
||||||
setLogoDisplaying(state, val) {
|
setLogoDisplaying(state, val) {
|
||||||
return { ...state, logoDisplaying: val }
|
return { ...state, logoDisplaying: val }
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -29,7 +29,7 @@ import SbLayer from '../../MapCtrl/mapstyle/sblayer';
|
||||||
import QdLayer from '../../MapCtrl/mapstyle/qdlayer';
|
import QdLayer from '../../MapCtrl/mapstyle/qdlayer';
|
||||||
import ShuizhiLayer from '../../MapCtrl/mapstyle/shuizhilayer';
|
import ShuizhiLayer from '../../MapCtrl/mapstyle/shuizhilayer';
|
||||||
import TrsqLayer from '../../MapCtrl/mapstyle/trsqlayer';
|
import TrsqLayer from '../../MapCtrl/mapstyle/trsqlayer';
|
||||||
|
import ScjcLayer from '../../MapCtrl/mapstyle/scjclayer'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -142,6 +142,9 @@ function LayersDlg({ onClose }) {
|
||||||
<div className={classes.catItem}>
|
<div className={classes.catItem}>
|
||||||
<RowItem icon="土壤墒情" label="土壤墒情" name={TrsqLayer.LayerName} checked={!!layerVisible[TrsqLayer.LayerName]} onChange={layerVisibleChanged} />
|
<RowItem icon="土壤墒情" label="土壤墒情" name={TrsqLayer.LayerName} checked={!!layerVisible[TrsqLayer.LayerName]} onChange={layerVisibleChanged} />
|
||||||
</div>
|
</div>
|
||||||
|
<div className={classes.catItem}>
|
||||||
|
<RowItem icon="水厂监测" label="水厂监测" name={ScjcLayer.LayerName} checked={!!layerVisible[ScjcLayer.LayerName]} onChange={layerVisibleChanged} />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={classes.catRoot}>
|
<div className={classes.catRoot}>
|
||||||
|
|
|
||||||
|
|
@ -29,7 +29,7 @@ function OverallSmtp({ record, onClose }) {
|
||||||
<div className="boxhead"></div>
|
<div className="boxhead"></div>
|
||||||
<DialogContent style={{ padding: 0, width: '60rem', overflowX: 'hidden' }}>
|
<DialogContent style={{ padding: 0, width: '60rem', overflowX: 'hidden' }}>
|
||||||
<DpAppBar position="sticky">
|
<DpAppBar position="sticky">
|
||||||
<Typography variant="h6" style={{ alignSelf: 'center', marginLeft: '0.5rem', flexGrow: 1 }}>
|
<Typography variant="h6" style={{ alignSelf: 'center', marginLeft: '0.5rem', flexGrow: 1,color:'#fff' }}>
|
||||||
24时报讯
|
24时报讯
|
||||||
</Typography>
|
</Typography>
|
||||||
<DpCloseButton onClick={onClose} />
|
<DpCloseButton onClick={onClose} />
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,223 @@
|
||||||
|
import React, { useEffect, useMemo, useState } from 'react'
|
||||||
|
import echarts from 'echarts/lib/echarts';
|
||||||
|
import ReactEcharts from 'echarts-for-react';
|
||||||
|
import { makeStyles, Typography } from '@material-ui/core';
|
||||||
|
import moment from 'moment';
|
||||||
|
import { hdyjColor, renderHDRz } from '../../../../utils/renutils';
|
||||||
|
import { normalizeSearchTmRange } from '../../../../utils/tools';
|
||||||
|
import { rzSearch } from '../../../../models/_/search';
|
||||||
|
|
||||||
|
|
||||||
|
const useStyles = makeStyles({
|
||||||
|
grid: {
|
||||||
|
color: '#fff',
|
||||||
|
padding: '1rem',
|
||||||
|
},
|
||||||
|
|
||||||
|
realdrpgrid: {
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
textAlign: 'center',
|
||||||
|
margin: '0.5rem 0'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
function HDChart({ record }) {
|
||||||
|
const classes = useStyles();
|
||||||
|
|
||||||
|
const [data, setData] = useState([]);
|
||||||
|
|
||||||
|
const tm = [moment().add(-24, 'hour'), moment()];
|
||||||
|
const resultTm = normalizeSearchTmRange(tm, 'h');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
rzSearch(record.type, record.stcd, 'h', resultTm, record.countycode).then((data) => {
|
||||||
|
setData(data || []);
|
||||||
|
});
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const option = useMemo(() => {
|
||||||
|
const serialData = data.map(obj => [obj.tm, obj.z || 0]);
|
||||||
|
|
||||||
|
let sorted = data.map(o => o.z);
|
||||||
|
|
||||||
|
const markLine = [];
|
||||||
|
const { sfz, wrz, grz } = record;
|
||||||
|
|
||||||
|
if (sfz) {
|
||||||
|
sorted.push(sfz);
|
||||||
|
markLine.push({ name: '设防', yAxis: sfz, lineStyle: { color: hdyjColor[1] } });
|
||||||
|
}
|
||||||
|
if (wrz) {
|
||||||
|
sorted.push(wrz);
|
||||||
|
markLine.push({ name: '警戒', yAxis: wrz, lineStyle: { color: hdyjColor[2] } });
|
||||||
|
}
|
||||||
|
if (grz) {
|
||||||
|
sorted.push(grz);
|
||||||
|
markLine.push({ name: '保证', yAxis: grz, lineStyle: { color: hdyjColor[3] } });
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
sorted = sorted.sort();
|
||||||
|
let minVal = sorted[0] || 0;
|
||||||
|
let maxVal = sorted[sorted.length - 1] || 0;
|
||||||
|
let dz = 0.5;
|
||||||
|
maxVal = Math.ceil(maxVal / dz) * dz;
|
||||||
|
minVal = Math.floor(minVal / dz) * dz;
|
||||||
|
|
||||||
|
return {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
x: markLine.length > 0 ? 64 : 24,
|
||||||
|
y: 24,
|
||||||
|
x2: 38,
|
||||||
|
y2: 42,
|
||||||
|
borderWidth: 0
|
||||||
|
},
|
||||||
|
calculable: true,
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'time',
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#bbb',
|
||||||
|
fontSize: 9,
|
||||||
|
textShadowBlur: 4,
|
||||||
|
textShadowColor: '#6ab',
|
||||||
|
// formatter: val => val.substr('2020-10-14 '.length, 2)
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#07a6ff',
|
||||||
|
width: 0.5,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
position: 'right',
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#07a6ff',
|
||||||
|
width: 0.25,
|
||||||
|
type: 'dashed'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#bbb',
|
||||||
|
fontSize: 10,
|
||||||
|
textShadowBlur: 4,
|
||||||
|
textShadowColor: '#6ab',
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
min: minVal,
|
||||||
|
max: maxVal
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '水位',
|
||||||
|
type: 'line',
|
||||||
|
showSymbol: false,
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
data: serialData,
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
width: 1,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(3, 194, 236, 0.3)'
|
||||||
|
}, {
|
||||||
|
offset: 0.8,
|
||||||
|
color: 'rgba(3, 194, 236, 0)'
|
||||||
|
}
|
||||||
|
], false),
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||||||
|
shadowBlur: 10
|
||||||
|
}
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#03C2EC'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
markPoint: {
|
||||||
|
data: [
|
||||||
|
{ type: 'max', name: '最大值', symbol: 'circle', symbolSize: 1, symbolOffset: [0, -12] },
|
||||||
|
{ type: 'min', name: '最小值', symbol: 'circle', symbolSize: 1, symbolOffset: [0, 12] }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
markLine: {
|
||||||
|
silent: true,
|
||||||
|
symbol: 'none',
|
||||||
|
label: {
|
||||||
|
position: 'start',
|
||||||
|
formatter: (p) => p?.name + ' ' + p?.value,
|
||||||
|
},
|
||||||
|
data: markLine
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}, [data]);
|
||||||
|
|
||||||
|
const rtm = record.rzTm || record.tm;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ReactEcharts
|
||||||
|
option={option}
|
||||||
|
style={{ height: '15rem', width: '30rem' }}
|
||||||
|
/>
|
||||||
|
<div className={classes.grid}>
|
||||||
|
<Typography variant="subtitle2">上报时间: {rtm ? moment(rtm).format('YYYY-MM-DD HH:mm:ss') : '-'}</Typography>
|
||||||
|
<div className={classes.realdrpgrid}>
|
||||||
|
<div className="item">
|
||||||
|
<Typography variant="caption">水位</Typography>
|
||||||
|
<Typography variant="h5">{renderHDRz(record)}</Typography>
|
||||||
|
</div>
|
||||||
|
<div className="item">
|
||||||
|
<Typography variant="caption">设防水位</Typography>
|
||||||
|
<Typography variant="h5">{record.sfz || '--'}</Typography>
|
||||||
|
</div>
|
||||||
|
<div className="item">
|
||||||
|
<Typography variant="caption">警戒水位</Typography>
|
||||||
|
<Typography variant="h5">{record.wrz || '--'}</Typography>
|
||||||
|
</div>
|
||||||
|
<div className="item">
|
||||||
|
<Typography variant="caption">保证水位</Typography>
|
||||||
|
<Typography variant="h5">{record.grz || '--'}</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default React.memo(HDChart);
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
import React from 'react'
|
||||||
|
import { makeStyles } from '@material-ui/core';
|
||||||
|
import HDChart from './HDChart';
|
||||||
|
import { Grid } from '@material-ui/core';
|
||||||
|
import useDescStyle from '../_/descstyle';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function RealHDTip({ record, dispatch }) {
|
||||||
|
const classes = useDescStyle();
|
||||||
|
const viewInfo = () => {
|
||||||
|
dispatch?.runtime.setInfoDlg({ layerId: 'llsbLayer', properties: record })
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="boxhead"></div>
|
||||||
|
<div className="featuretip-title">
|
||||||
|
<div className="name">{record.stnm}</div>
|
||||||
|
{/* <div className="extra cursor-pointer" onClick={viewInfo}>详细</div> */}
|
||||||
|
</div>
|
||||||
|
<div style={{ width: '25rem' }} className='f_14'>
|
||||||
|
<Grid container>
|
||||||
|
<Grid item className={classes.title}>压力:</Grid>
|
||||||
|
<Grid item className={classes.value}>{record.press}(Mpa)</Grid>
|
||||||
|
<Grid item className={classes.title}>流量:</Grid>
|
||||||
|
<Grid item className={classes.value}>{record.flow}(m³/h)</Grid>
|
||||||
|
<Grid item className={classes.title}>水质合格率:</Grid>
|
||||||
|
<Grid item className={classes.value}>{record.hg}%</Grid>
|
||||||
|
<Grid item className={classes.title}>采集时间:</Grid>
|
||||||
|
<Grid item className={classes.value}>2025-05-27 15：:25：:00</Grid>
|
||||||
|
</Grid>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="boxfoot"></div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default React.memo(RealHDTip);
|
||||||
|
|
@ -81,6 +81,7 @@ export const iconstyles = {
|
||||||
渠道: { backgroundPosition: '30.5% -40%',backgroundSize: '3295% 1650%' },
|
渠道: { backgroundPosition: '30.5% -40%',backgroundSize: '3295% 1650%' },
|
||||||
水质: { backgroundPosition: '33.5% -40%',backgroundSize: '3295% 1650%' },
|
水质: { backgroundPosition: '33.5% -40%',backgroundSize: '3295% 1650%' },
|
||||||
土壤墒情: { backgroundPosition: '37.5% -40%',backgroundSize: '1895% 1650%' },
|
土壤墒情: { backgroundPosition: '37.5% -40%',backgroundSize: '1895% 1650%' },
|
||||||
|
水厂监测: { backgroundPosition: '37.5% -40%',backgroundSize: '1895% 1650%' },
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -26,6 +26,7 @@ import SzPop from './SzPop'
|
||||||
import SqPop from './SqPop';
|
import SqPop from './SqPop';
|
||||||
import LlqdPop from './LlqdPop';
|
import LlqdPop from './LlqdPop';
|
||||||
import LlsbPop from './LlsbPop';
|
import LlsbPop from './LlsbPop';
|
||||||
|
import ScjcPop from './ScJcPop';
|
||||||
export const InfoPopNames = {
|
export const InfoPopNames = {
|
||||||
RealSkPop: 'RealSkPop',
|
RealSkPop: 'RealSkPop',
|
||||||
RealHDPop: 'RealHDPop',
|
RealHDPop: 'RealHDPop',
|
||||||
|
|
@ -89,6 +90,8 @@ export const InfoPops = ({ type, properties, dispatch }) => {
|
||||||
return <LlqdPop record={properties} dispatch={dispatch} />
|
return <LlqdPop record={properties} dispatch={dispatch} />
|
||||||
}else if (type === '流量水表站') {
|
}else if (type === '流量水表站') {
|
||||||
return <LlsbPop record={properties} dispatch={dispatch} />
|
return <LlsbPop record={properties} dispatch={dispatch} />
|
||||||
|
}else if (type === '监测站') {
|
||||||
|
return <ScjcPop record={properties} dispatch={dispatch} />
|
||||||
}
|
}
|
||||||
|
|
||||||
return null;
|
return null;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,252 @@
|
||||||
|
import clone from "clone";
|
||||||
|
import { PicStPromise, TestPicStPromise } from "../../../../models/_/real";
|
||||||
|
import { parseGeoJSON } from "../../../../utils/tools";
|
||||||
|
import { InfoPopNames } from "../../InfoPops";
|
||||||
|
import BaseLayer from "./baselayer";
|
||||||
|
|
||||||
|
const SourceName = '水厂监测';
|
||||||
|
|
||||||
|
const ShapeStyle = {
|
||||||
|
id: SourceName,
|
||||||
|
type: 'symbol',
|
||||||
|
source: SourceName,
|
||||||
|
layout: {
|
||||||
|
'icon-allow-overlap': true,
|
||||||
|
'text-allow-overlap': true,
|
||||||
|
'icon-image': '水厂监测',
|
||||||
|
'icon-size': [
|
||||||
|
'interpolate', ['linear'], ['zoom'],
|
||||||
|
10, 0.4,
|
||||||
|
14, 0.8,
|
||||||
|
],
|
||||||
|
|
||||||
|
'text-allow-overlap': true,
|
||||||
|
'text-size': [
|
||||||
|
'interpolate', ['linear'], ['zoom'],
|
||||||
|
10, 10,
|
||||||
|
14, 14,
|
||||||
|
],
|
||||||
|
'text-font': ['Roboto Black'],
|
||||||
|
'text-field': [
|
||||||
|
'step',
|
||||||
|
['zoom'],
|
||||||
|
'',
|
||||||
|
12, ['get', 'stnm']
|
||||||
|
],
|
||||||
|
'text-anchor': 'top',
|
||||||
|
'text-offset': [0, 1],
|
||||||
|
|
||||||
|
'visibility': 'none',
|
||||||
|
},
|
||||||
|
paint: {
|
||||||
|
'text-color': '#fff'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const page1 = [
|
||||||
|
{
|
||||||
|
"addvcd": "420800000000000",
|
||||||
|
"moditime": "2022-05-01 21:00:00",
|
||||||
|
"comments": "漳河遥测",
|
||||||
|
"src": "zhzj",
|
||||||
|
"esstym": "",
|
||||||
|
"mvalue": {
|
||||||
|
"slmmmt": null,
|
||||||
|
"slm60": 0,
|
||||||
|
"exkey": "@",
|
||||||
|
"slm80": 0,
|
||||||
|
"hitrsn": null,
|
||||||
|
"crpty": null,
|
||||||
|
"crpgrwprd": null,
|
||||||
|
"srlslm": null,
|
||||||
|
"stcd": "ZH201417",
|
||||||
|
"slm10": 24,
|
||||||
|
"slm20": 5.3,
|
||||||
|
"slm30": 44.3,
|
||||||
|
"slm40": 44.3,
|
||||||
|
"tm": "2024-08-03 05:00",
|
||||||
|
"slm100": 0,
|
||||||
|
"vtavslm": null,
|
||||||
|
"slmAvg": 24.5
|
||||||
|
},
|
||||||
|
"lttd": 30.8456,
|
||||||
|
"sttp": "SS",
|
||||||
|
"irrCode": "D00000010",
|
||||||
|
"sort": 9999,
|
||||||
|
"hasImg": false,
|
||||||
|
"stlc": "荆门市",
|
||||||
|
"dtmel": 0,
|
||||||
|
"stcd": "ZH201417",
|
||||||
|
"stnm": "马山二组（墒情）",
|
||||||
|
"addvcd_dictText": "荆门市",
|
||||||
|
"lgtd": 112.2321,
|
||||||
|
"irrCode_dictText": "漳河实验站",
|
||||||
|
"bsnm": "漳河流域"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"addvcd": "420800000000000",
|
||||||
|
"moditime": "2022-05-01 21:00:00",
|
||||||
|
"comments": "漳河遥测",
|
||||||
|
"src": "zhzj",
|
||||||
|
"esstym": "",
|
||||||
|
"mvalue": {
|
||||||
|
"slmmmt": null,
|
||||||
|
"slm60": 0,
|
||||||
|
"exkey": "@",
|
||||||
|
"slm80": 0,
|
||||||
|
"hitrsn": null,
|
||||||
|
"crpty": null,
|
||||||
|
"crpgrwprd": null,
|
||||||
|
"srlslm": null,
|
||||||
|
"stcd": "ZH201421",
|
||||||
|
"slm10": 12.1,
|
||||||
|
"slm20": 16.2,
|
||||||
|
"slm30": 12.8,
|
||||||
|
"slm40": 12.8,
|
||||||
|
"tm": "2024-08-15 08:00",
|
||||||
|
"slm100": 0,
|
||||||
|
"vtavslm": null,
|
||||||
|
"slmAvg": 13.7
|
||||||
|
},
|
||||||
|
"lttd": 30.8446,
|
||||||
|
"sttp": "SS",
|
||||||
|
"irrCode": "D00000010",
|
||||||
|
"sort": 9999,
|
||||||
|
"hasImg": false,
|
||||||
|
"stlc": "荆门市",
|
||||||
|
"dtmel": 0,
|
||||||
|
"stcd": "ZH201421",
|
||||||
|
"stnm": "槐桥四组（墒情）",
|
||||||
|
"addvcd_dictText": "荆门市",
|
||||||
|
"lgtd": 112.203,
|
||||||
|
"irrCode_dictText": "漳河实验站",
|
||||||
|
"bsnm": "漳河流域"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"addvcd": "420800000000000",
|
||||||
|
"moditime": "2022-05-01 21:00:00",
|
||||||
|
"src": "zhzj",
|
||||||
|
"esstym": "",
|
||||||
|
"mvalue": {
|
||||||
|
"slmmmt": null,
|
||||||
|
"slm60": 0,
|
||||||
|
"exkey": "@",
|
||||||
|
"slm80": 0,
|
||||||
|
"hitrsn": null,
|
||||||
|
"crpty": null,
|
||||||
|
"crpgrwprd": null,
|
||||||
|
"srlslm": null,
|
||||||
|
"stcd": "ZH201418",
|
||||||
|
"slm10": 16.5,
|
||||||
|
"slm20": 12.5,
|
||||||
|
"slm30": 0,
|
||||||
|
"slm40": 0,
|
||||||
|
"tm": "2024-09-19 11:00",
|
||||||
|
"slm100": 0,
|
||||||
|
"vtavslm": null,
|
||||||
|
"slmAvg": 14.5
|
||||||
|
},
|
||||||
|
"lttd": 30.8866,
|
||||||
|
"sttp": "SS",
|
||||||
|
"irrCode": "D00000010",
|
||||||
|
"sort": 9999,
|
||||||
|
"hasImg": false,
|
||||||
|
"stlc": "荆门市",
|
||||||
|
"dtmel": 0,
|
||||||
|
"stcd": "ZH201418",
|
||||||
|
"stnm": "双碑一组（墒情）",
|
||||||
|
"addvcd_dictText": "荆门市",
|
||||||
|
"lgtd": 112.2006,
|
||||||
|
"irrCode_dictText": "漳河实验站",
|
||||||
|
"bsnm": "漳河流域"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"addvcd": "420800000000000",
|
||||||
|
"moditime": "2022-05-01 21:00:00",
|
||||||
|
"comments": "水资源多孔闸门控制系统",
|
||||||
|
"src": "zhzj",
|
||||||
|
"esstym": "",
|
||||||
|
"mvalue": {
|
||||||
|
"slmmmt": null,
|
||||||
|
"slm60": null,
|
||||||
|
"exkey": "@",
|
||||||
|
"slm80": null,
|
||||||
|
"hitrsn": null,
|
||||||
|
"crpty": null,
|
||||||
|
"crpgrwprd": null,
|
||||||
|
"srlslm": null,
|
||||||
|
"stcd": "4211221031",
|
||||||
|
"slm10": 31,
|
||||||
|
"slm20": 42.6,
|
||||||
|
"slm30": null,
|
||||||
|
"slm40": 26.6,
|
||||||
|
"tm": "2025-05-26 09:00",
|
||||||
|
"slm100": null,
|
||||||
|
"vtavslm": null,
|
||||||
|
"slmAvg": 33.4
|
||||||
|
},
|
||||||
|
"lttd": 30.904191,
|
||||||
|
"sttp": "SS",
|
||||||
|
"irrCode": "D00000010",
|
||||||
|
"sort": 9999,
|
||||||
|
"hasImg": false,
|
||||||
|
"stlc": "荆门市",
|
||||||
|
"stcd": "4211221031",
|
||||||
|
"stnm": "试验站墒情",
|
||||||
|
"addvcd_dictText": "荆门市",
|
||||||
|
"lgtd": 112.087806,
|
||||||
|
"irrCode_dictText": "漳河实验站",
|
||||||
|
"bsnm": "漳河流域"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export default class TrsqLayer extends BaseLayer {
|
||||||
|
|
||||||
|
static LayerName = 'ScjcLayer';
|
||||||
|
|
||||||
|
static SourceName = SourceName;
|
||||||
|
|
||||||
|
getStyle() {
|
||||||
|
|
||||||
|
const ret = clone(ShapeStyle);
|
||||||
|
this._setStyleVisibility(ret);
|
||||||
|
return ret;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
getName() {
|
||||||
|
return TrsqLayer.LayerName;
|
||||||
|
}
|
||||||
|
|
||||||
|
getSubLayers() {
|
||||||
|
return [ShapeStyle.id];
|
||||||
|
}
|
||||||
|
|
||||||
|
async doRefreshLayer(mapCtrl) {
|
||||||
|
const ms = mapCtrl.getSource(SourceName);
|
||||||
|
|
||||||
|
let data =
|
||||||
|
// await PicStPromise.get();
|
||||||
|
[...page1].map((item)=>{
|
||||||
|
const obj = {...item}
|
||||||
|
obj.lgtd = item.lgtd + 2.9619
|
||||||
|
obj.lttd = item.lttd + 0.2002
|
||||||
|
return obj
|
||||||
|
})
|
||||||
|
ms.setData(parseGeoJSON(data));
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
getFeatureTip(record) {
|
||||||
|
return record.stnm;
|
||||||
|
}
|
||||||
|
|
||||||
|
featureClicked(properties, dispatch) {
|
||||||
|
dispatch.runtime.setFeaturePop({
|
||||||
|
type: InfoPopNames.PicStPop,
|
||||||
|
properties,
|
||||||
|
coordinates: [properties.lgtd, properties.lttd],
|
||||||
|
offsetPop: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -61,6 +61,15 @@ import Rgsl from './panels/Rgsl'
|
||||||
import Dbfx from './panels/Dbfx'
|
import Dbfx from './panels/Dbfx'
|
||||||
import Gsjk from './panels/Gsjk'
|
import Gsjk from './panels/Gsjk'
|
||||||
import YaRes from './panels/YaRes'
|
import YaRes from './panels/YaRes'
|
||||||
|
import Yakgl from './panels/Yakgl'
|
||||||
|
import Gwjc from './panels/Gwjc'
|
||||||
|
import Gx from './panels/Gx'
|
||||||
|
import Gwsllc from './panels/Gwsllc'
|
||||||
|
import Lsphb from './panels/lsphb'
|
||||||
|
import Gxzxll from './panels/Gxzxll'
|
||||||
|
import Gsl from './panels/Gwgsl'
|
||||||
|
import Qsl from './panels/Gwqsl'
|
||||||
|
import Dhtj from './panels/Gwdh'
|
||||||
export default function PanelIndex({ name, style, ...params }) {
|
export default function PanelIndex({ name, style, ...params }) {
|
||||||
if (name === '天气') {
|
if (name === '天气') {
|
||||||
return (
|
return (
|
||||||
|
|
@ -156,6 +165,8 @@ export default function PanelIndex({ name, style, ...params }) {
|
||||||
return <Spjc style={style} />
|
return <Spjc style={style} />
|
||||||
} else if (name === '水库管理') {
|
} else if (name === '水库管理') {
|
||||||
return <Skgl style={style} />
|
return <Skgl style={style} />
|
||||||
|
}else if (name === '预案库管理') {
|
||||||
|
return <Yakgl style={style} />
|
||||||
} else if (name === '防汛调度') {
|
} else if (name === '防汛调度') {
|
||||||
return <Fxdd style={style} />
|
return <Fxdd style={style} />
|
||||||
}else if (name === '灌区统计') {
|
}else if (name === '灌区统计') {
|
||||||
|
|
@ -186,6 +197,22 @@ export default function PanelIndex({ name, style, ...params }) {
|
||||||
return <Dbfx style={style} />
|
return <Dbfx style={style} />
|
||||||
} else if (name === '供水监控') {
|
} else if (name === '供水监控') {
|
||||||
return <Gsjk style={style} />
|
return <Gsjk style={style} />
|
||||||
|
} else if (name == '管网监测数据') {
|
||||||
|
return <Gwjc style={style}/>
|
||||||
|
} else if (name == '管线') {
|
||||||
|
return <Gx style={style}/>
|
||||||
|
}else if (name == '数量及里程分布') {
|
||||||
|
return <Gwsllc style={style}/>
|
||||||
|
}else if (name == '漏损排行榜') {
|
||||||
|
return <Lsphb style={style}/>
|
||||||
|
}else if (name == '最小流量') {
|
||||||
|
return <Gxzxll style={style}/>
|
||||||
|
}else if (name == '供水量统计') {
|
||||||
|
return <Gsl style={style}/>
|
||||||
|
}else if (name == '取水量统计') {
|
||||||
|
return <Qsl style={style}/>
|
||||||
|
}else if (name == '电耗统计') {
|
||||||
|
return <Dhtj style={style}/>
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
|
|
@ -5,51 +5,64 @@ import { useDispatch, useSelector } from 'react-redux';
|
||||||
import { makeStyles, Tooltip, Typography } from '@material-ui/core';
|
import { makeStyles, Tooltip, Typography } from '@material-ui/core';
|
||||||
|
|
||||||
const VIEWS = [
|
const VIEWS = [
|
||||||
{ id: 100, title: '防汛', img: '/assets/menu/防洪形势.png',children:[
|
{
|
||||||
{ id: 0, title: '防洪形势', img: '/assets/menu/防洪形势.png' },
|
id: 100, title: '防汛', img: '/assets/menu/防洪形势.png', children: [
|
||||||
{ id: 1, title: '实时数据', img: '/assets/menu/实时数据.png' },
|
{ id: 0, title: '防洪形势', img: '/assets/menu/防洪形势.png' },
|
||||||
{ id: 6, title: '水库调度', img: '/assets/menu/病险水库.png' },
|
{ id: 1, title: '实时数据', img: '/assets/menu/实时数据.png' },
|
||||||
{ id: 2, title: '水利设施', img: '/assets/menu/水利设施.png' },
|
{ id: 6, title: '水库调度', img: '/assets/menu/病险水库.png' },
|
||||||
{ id: 3, title: '辅助决策', img: '/assets/menu/辅助决策.png' },
|
{ id: 2, title: '水利设施', img: '/assets/menu/水利设施.png' },
|
||||||
{ id: 4, title: '降雨中心', img: '/assets/menu/预警分析.png' },
|
{ id: 3, title: '辅助决策', img: '/assets/menu/辅助决策.png' },
|
||||||
{ id: 5, title: '天气预报', img: '/assets/menu/降雨中心.png' },
|
{ id: 4, title: '降雨中心', img: '/assets/menu/预警分析.png' },
|
||||||
] },
|
{ id: 5, title: '天气预报', img: '/assets/menu/降雨中心.png' },
|
||||||
{ id: 200, title: '水库', img: '/assets/menu/实时数据.png',children:[
|
]
|
||||||
{ id: 201, title: '雨情监测', img: '/assets/menu/降雨中心.png' },
|
},
|
||||||
{ id: 202, title: '水情监测', img: '/assets/menu/水利设施.png' },
|
{
|
||||||
{ id: 203, title: '安全监测', img: '/assets/menu/降雨中心.png' },
|
id: 200, title: '水库', img: '/assets/menu/实时数据.png', children: [
|
||||||
{ id: 204, title: '视频监控', img: '/assets/menu/辅助决策.png' },
|
{ id: 201, title: '雨情监测', img: '/assets/menu/降雨中心.png' },
|
||||||
{ id: 205, title: '防汛调度', img: '/assets/menu/辅助决策.png' },
|
{ id: 202, title: '水情监测', img: '/assets/menu/水利设施.png' },
|
||||||
{ id: 206, title: '水库管理', img: '/assets/menu/病险水库.png' },
|
{ id: 203, title: '安全监测', img: '/assets/menu/降雨中心.png' },
|
||||||
] },
|
{ id: 204, title: '视频监控', img: '/assets/menu/辅助决策.png' },
|
||||||
{ id: 300, title: '水厂', img: '/assets/menu/水利设施.png',children:[
|
{ id: 205, title: '防汛调度', img: '/assets/menu/辅助决策.png' },
|
||||||
{ id: 301, title: '供水态势', img: '/assets/menu/降雨中心.png' },
|
{ id: 206, title: '水库管理', img: '/assets/menu/病险水库.png' },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 300, title: '水厂', img: '/assets/menu/水利设施.png', children: [
|
||||||
|
{ id: 301, title: '供水态势', img: '/assets/menu/降雨中心.png' },
|
||||||
|
|
||||||
// 供水态势
|
|
||||||
// 水质安全
|
|
||||||
// 水厂运行
|
|
||||||
// 管网健康诊断
|
{ id: 306, title: '管网健康诊断', img: '/assets/menu/水利设施.png' },
|
||||||
// 应急指挥调度
|
{ id: 307, title: '应急指挥调度', img: '/assets/menu/病险水库.png' },
|
||||||
// 决策支持与报表
|
{ id: 305, title: '决策支持与报表', img: '/assets/menu/辅助决策.png' },
|
||||||
] },
|
// 供水态势
|
||||||
|
// 水质安全
|
||||||
|
// 水厂运行
|
||||||
|
// 管网健康诊断
|
||||||
|
// 应急指挥调度
|
||||||
|
// 决策支持与报表
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: 400, title: '灌区', img: '/assets/menu/预警分析.png', children: [
|
id: 400, title: '灌区', img: '/assets/menu/预警分析.png', children: [
|
||||||
{ id: 501, title: '灌区监测', img: '/assets/menu/防洪形势.png' },
|
{ id: 501, title: '灌区监测', img: '/assets/menu/防洪形势.png' },
|
||||||
{ id: 504, title: '水旱灾害防御', img: '/assets/menu/水利设施.png' },
|
{ id: 504, title: '水旱灾害防御', img: '/assets/menu/水利设施.png' },
|
||||||
// { id: 502, title: '预警信息管理', img: '/assets/menu/实时数据.png' },
|
// { id: 502, title: '预警信息管理', img: '/assets/menu/实时数据.png' },
|
||||||
{ id: 503, title: '水资源调度', img: '/assets/menu/病险水库.png' },
|
{ id: 503, title: '水资源调度', img: '/assets/menu/病险水库.png' },
|
||||||
{ id: 505, title: '量测水管理', img: '/assets/menu/辅助决策.png' },
|
{ id: 505, title: '量测水管理', img: '/assets/menu/辅助决策.png' },
|
||||||
{ id: 506, title: '水政管理', img: '/assets/menu/预警分析.png' },
|
{ id: 506, title: '水政管理', img: '/assets/menu/预警分析.png' },
|
||||||
{ id: 507, title: '工程管理', img: '/assets/menu/降雨中心.png' },
|
{ id: 507, title: '工程管理', img: '/assets/menu/降雨中心.png' },
|
||||||
// 图层控制
|
// 图层控制
|
||||||
// 灌区监测
|
// 灌区监测
|
||||||
// 预警信息管理
|
// 预警信息管理
|
||||||
// 水旱灾害防御
|
// 水旱灾害防御
|
||||||
// 水资源调度
|
// 水资源调度
|
||||||
// 量测水管理
|
// 量测水管理
|
||||||
// 水政管理
|
// 水政管理
|
||||||
// 工程管理
|
// 工程管理
|
||||||
] },
|
]
|
||||||
|
},
|
||||||
|
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
@ -73,8 +86,8 @@ function BootstrapTooltip(props) {
|
||||||
|
|
||||||
export default function ActionDock({ }) {
|
export default function ActionDock({ }) {
|
||||||
const view = useSelector(s => s.map.view);
|
const view = useSelector(s => s.map.view);
|
||||||
const [viewKey,setViewKey] = useState(null)
|
const [viewKey, setViewKey] = useState(null)
|
||||||
const viewItem = useMemo(()=>viewKey?VIEWS.filter(o=>o.id===viewKey)[0].children:VIEWS,[viewKey,VIEWS])
|
const viewItem = useMemo(() => viewKey ? VIEWS.filter(o => o.id === viewKey)[0].children : VIEWS, [viewKey, VIEWS])
|
||||||
|
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
|
|
@ -82,30 +95,48 @@ export default function ActionDock({ }) {
|
||||||
return (
|
return (
|
||||||
<div className="dp-actiondock">
|
<div className="dp-actiondock">
|
||||||
{
|
{
|
||||||
viewKey?
|
viewKey ?
|
||||||
<BootstrapTooltip key={999} title={<Typography variant="h6"><span style={{color:'#fff'}}>返回</span></Typography>}>
|
<BootstrapTooltip key={999} title={<Typography variant="h6"><span style={{ color: '#fff' }}>返回</span></Typography>}>
|
||||||
<div className="dock-item" onClick={() => {
|
<div className="dock-item" onClick={() => {
|
||||||
// dispatch.map.setView(o.id) 这里不知道用哪个，等问好在弄
|
// dispatch.map.setView(o.id) 这里不知道用哪个，等问好在弄
|
||||||
setViewKey(null)
|
setViewKey(null)
|
||||||
}}>
|
dispatch.runtime.setScya(false)
|
||||||
<div className={clsx('button', { active: false })}>
|
dispatch.runtime.setGwtc(false)
|
||||||
<img width={40} style={{marginLeft:'5px'}} src={'/assets/pump/退出.png'} />
|
}}>
|
||||||
|
<div className={clsx('button', { active: false })}>
|
||||||
|
<img width={40} style={{ marginLeft: '5px' }} src={'/assets/pump/退出.png'} />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</BootstrapTooltip>
|
||||||
</BootstrapTooltip>
|
: null
|
||||||
:null
|
|
||||||
}
|
}
|
||||||
{
|
{
|
||||||
viewItem.map(o => (
|
viewItem.map(o => (
|
||||||
<BootstrapTooltip key={o.id} title={<Typography variant="h6"><span style={{color:'#fff'}}>{o.title}</span></Typography>}>
|
<BootstrapTooltip key={o.id} title={<Typography variant="h6"><span style={{ color: '#fff' }}>{o.title}</span></Typography>}>
|
||||||
<div className="dock-item" onClick={() => {
|
<div className="dock-item" onClick={() => {
|
||||||
if(o.children){
|
if (o.children) {
|
||||||
//一级菜单
|
//一级菜单
|
||||||
dispatch.map.setView(o.children[0].id)
|
dispatch.map.setView(o.children[0].id)
|
||||||
setViewKey(o.id)
|
setViewKey(o.id)
|
||||||
}else{
|
dispatch.runtime.setScya(false)
|
||||||
|
dispatch.runtime.setGwtc(false)
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
// 判断水厂资源调度切换图层
|
||||||
|
if (o.id == 307) {
|
||||||
|
dispatch.runtime.setScya(true)
|
||||||
|
} else {
|
||||||
|
dispatch.runtime.setScya(false)
|
||||||
|
}
|
||||||
|
// if (o.id == 307) {
|
||||||
|
// dispatch.runtime.setGwtc(true)
|
||||||
|
// } else {
|
||||||
|
// dispatch.runtime.setGwtc(true)
|
||||||
|
// }
|
||||||
//二级菜单
|
//二级菜单
|
||||||
dispatch.map.setView(o.id)
|
dispatch.map.setView(o.id)
|
||||||
|
|
||||||
}
|
}
|
||||||
}}>
|
}}>
|
||||||
<div className={clsx('button', { active: view === o.id })}>
|
<div className={clsx('button', { active: view === o.id })}>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
export default function drpOption({ data, wrz, grz }) {
|
export default function drpOption({ data, wrz, grz }) {
|
||||||
debugger
|
|
||||||
console.log("data",wrz);
|
console.log("data",wrz);
|
||||||
const maxVal = Math.max(...data.map(obj => obj.drp))
|
const maxVal = Math.max(...data.map(obj => obj.drp))
|
||||||
const maxSw = Math.max(...data.map(obj => obj.deep))
|
const maxSw = Math.max(...data.map(obj => obj.deep))
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,8 @@ export default function Demo1() {
|
||||||
const layout = useSelector(getLayout);
|
const layout = useSelector(getLayout);
|
||||||
const hp = useSelector(hidePanels);
|
const hp = useSelector(hidePanels);
|
||||||
console.log("hp",hp);
|
console.log("hp",hp);
|
||||||
const yyRes = useSelector(s => s.runtime.yyObj);
|
const yyRes = useSelector(s => s.runtime.yyObj);
|
||||||
|
const isSc = useSelector(s => s.runtime.scya);
|
||||||
return (
|
return (
|
||||||
<div className="demo1">
|
<div className="demo1">
|
||||||
<div style={{ position: 'absolute', left: 0, bottom: 0, right: 0, top: 0, zIndex: 0 }}>
|
<div style={{ position: 'absolute', left: 0, bottom: 0, right: 0, top: 0, zIndex: 0 }}>
|
||||||
|
|
@ -30,7 +31,11 @@ export default function Demo1() {
|
||||||
<img src={`${process.env.PUBLIC_URL}/assets/yytc.png`} alt="" style={{ zIndex: 0.1, position: 'absolute' }} />
|
<img src={`${process.env.PUBLIC_URL}/assets/yytc.png`} alt="" style={{ zIndex: 0.1, position: 'absolute' }} />
|
||||||
<img src={`${process.env.PUBLIC_URL}/assets/yy.png`} alt="" style={{ zIndex: 0.2, position: 'absolute',bottom:100,left:'28%' }} />
|
<img src={`${process.env.PUBLIC_URL}/assets/yy.png`} alt="" style={{ zIndex: 0.2, position: 'absolute',bottom:100,left:'28%' }} />
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
{
|
||||||
|
isSc &&<img src={`${process.env.PUBLIC_URL}/assets/scdd.jpg`} alt="" style={{ zIndex: 0.1, position: 'absolute',width:'100%',transform:`scale(1)` }} />
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
<div className="bottom">
|
<div className="bottom">
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@ export default function WeatherForcast({ style }) {
|
||||||
return (
|
return (
|
||||||
<PanelBox
|
<PanelBox
|
||||||
style={style}
|
style={style}
|
||||||
title="天气预报1"
|
title="天气预报"
|
||||||
color="orange"
|
color="orange"
|
||||||
extra={
|
extra={
|
||||||
<i className="ionicons close cursor-pointer" onClick={closeLayer}></i>
|
<i className="ionicons close cursor-pointer" onClick={closeLayer}></i>
|
||||||
|
|
|
||||||
|
|
@ -20,9 +20,9 @@ const analysisData = {
|
||||||
waterUsage: Array.from({ length: 7 }, (_, i) => ({
|
waterUsage: Array.from({ length: 7 }, (_, i) => ({
|
||||||
date: moment().subtract(i, 'days').format('YYYY-MM-DD'),
|
date: moment().subtract(i, 'days').format('YYYY-MM-DD'),
|
||||||
areas: [
|
areas: [
|
||||||
{ name: '东部灌区', value: 85 + Math.random() * 10 },
|
{ name: '浮桥河灌区', value: 85 + Math.random() * 10 },
|
||||||
{ name: '西部灌区', value: 92 + Math.random() * 10 },
|
{ name: '群建水库灌区', value: 92 + Math.random() * 10 },
|
||||||
{ name: '南部灌区', value: 78 + Math.random() * 10 }
|
{ name: '大石板灌区', value: 78 + Math.random() * 10 }
|
||||||
]
|
]
|
||||||
})).reverse(),
|
})).reverse(),
|
||||||
|
|
||||||
|
|
@ -30,9 +30,9 @@ const analysisData = {
|
||||||
efficiency: Array.from({ length: 7 }, (_, i) => ({
|
efficiency: Array.from({ length: 7 }, (_, i) => ({
|
||||||
date: moment().subtract(i, 'days').format('YYYY-MM-DD'),
|
date: moment().subtract(i, 'days').format('YYYY-MM-DD'),
|
||||||
areas: [
|
areas: [
|
||||||
{ name: '东部灌区', value: 0.82 + Math.random() * 0.05 },
|
{ name: '浮桥河灌区', value: 0.82 + Math.random() * 0.05 },
|
||||||
{ name: '西部灌区', value: 0.78 + Math.random() * 0.05 },
|
{ name: '群建水库灌区', value: 0.78 + Math.random() * 0.05 },
|
||||||
{ name: '南部灌区', value: 0.85 + Math.random() * 0.05 }
|
{ name: '大石板灌区', value: 0.85 + Math.random() * 0.05 }
|
||||||
]
|
]
|
||||||
})).reverse(),
|
})).reverse(),
|
||||||
|
|
||||||
|
|
@ -40,16 +40,16 @@ const analysisData = {
|
||||||
waterSaving: Array.from({ length: 7 }, (_, i) => ({
|
waterSaving: Array.from({ length: 7 }, (_, i) => ({
|
||||||
date: moment().subtract(i, 'days').format('YYYY-MM-DD'),
|
date: moment().subtract(i, 'days').format('YYYY-MM-DD'),
|
||||||
areas: [
|
areas: [
|
||||||
{ name: '东部灌区', value: 12.5 + Math.random() * 5 },
|
{ name: '浮桥河灌区', value: 12.5 + Math.random() * 5 },
|
||||||
{ name: '西部灌区', value: 10.2 + Math.random() * 5 },
|
{ name: '群建水库灌区', value: 10.2 + Math.random() * 5 },
|
||||||
{ name: '南部灌区', value: 15.6 + Math.random() * 5 }
|
{ name: '大石板灌区', value: 15.6 + Math.random() * 5 }
|
||||||
]
|
]
|
||||||
})).reverse()
|
})).reverse()
|
||||||
};
|
};
|
||||||
const dimensionConfig = {
|
const dimensionConfig = {
|
||||||
waterUsage: {
|
waterUsage: {
|
||||||
title: '用水量对比',
|
title: '用水量',
|
||||||
unit: 'm³/s'
|
unit: 'm³'
|
||||||
},
|
},
|
||||||
efficiency: {
|
efficiency: {
|
||||||
title: '输水效率对比',
|
title: '输水效率对比',
|
||||||
|
|
@ -66,13 +66,6 @@ const getOption = (type) => {
|
||||||
const config = dimensionConfig[type];
|
const config = dimensionConfig[type];
|
||||||
|
|
||||||
return {
|
return {
|
||||||
title: {
|
|
||||||
text: config.title,
|
|
||||||
textStyle: {
|
|
||||||
color: '#fff',
|
|
||||||
fontSize: 14
|
|
||||||
}
|
|
||||||
},
|
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
formatter: (params) => {
|
formatter: (params) => {
|
||||||
|
|
@ -87,7 +80,7 @@ const getOption = (type) => {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data: ['东部灌区', '西部灌区', '南部灌区'],
|
data: ['浮桥河灌区', '群建水库灌区', '大石板灌区'],
|
||||||
textStyle: { color: '#fff' },
|
textStyle: { color: '#fff' },
|
||||||
right: '10%'
|
right: '10%'
|
||||||
},
|
},
|
||||||
|
|
@ -104,11 +97,12 @@ const getOption = (type) => {
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: config.unit,
|
name: '用水量m³',
|
||||||
nameTextStyle: { color: '#fff' },
|
nameTextStyle: { color: '#fff', // 调整内边距
|
||||||
|
},
|
||||||
axisLabel: { color: '#fff' }
|
axisLabel: { color: '#fff' }
|
||||||
},
|
},
|
||||||
series: ['东部灌区', '西部灌区', '南部灌区'].map(area => ({
|
series: ['浮桥河灌区', '群建水库灌区', '大石板灌区'].map(area => ({
|
||||||
name: area,
|
name: area,
|
||||||
type: 'line',
|
type: 'line',
|
||||||
smooth: true,
|
smooth: true,
|
||||||
|
|
@ -148,7 +142,7 @@ function HDReal({ style }) {
|
||||||
|
|
||||||
extra={
|
extra={
|
||||||
<>
|
<>
|
||||||
<i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i>
|
{/* <i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i> */}
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
|
|
@ -159,35 +153,7 @@ function HDReal({ style }) {
|
||||||
marginTop: '10px',
|
marginTop: '10px',
|
||||||
paddingRight: '20px'
|
paddingRight: '20px'
|
||||||
}}>
|
}}>
|
||||||
<FormControl sx={{ minWidth: 200, marginBottom: 2 }}>
|
|
||||||
<InputLabel id="analysis-select-label">分析维度</InputLabel>
|
|
||||||
<Select
|
|
||||||
labelId="analysis-select-label"
|
|
||||||
value={dimension}
|
|
||||||
label="分析维度"
|
|
||||||
onChange={(event) => {
|
|
||||||
const value = event.target.value;
|
|
||||||
setDimension(value);
|
|
||||||
setOption(getOption(value));
|
|
||||||
}}
|
|
||||||
sx={{
|
|
||||||
color: '#fff',
|
|
||||||
'.MuiOutlinedInput-notchedOutline': {
|
|
||||||
borderColor: 'rgba(255, 255, 255, 0.3)',
|
|
||||||
},
|
|
||||||
'&:hover .MuiOutlinedInput-notchedOutline': {
|
|
||||||
borderColor: 'rgba(255, 255, 255, 0.6)',
|
|
||||||
},
|
|
||||||
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
|
|
||||||
borderColor: '#fff',
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MenuItem value="waterUsage">用水量对比</MenuItem>
|
|
||||||
<MenuItem value="efficiency">输水效率对比</MenuItem>
|
|
||||||
<MenuItem value="waterSaving">节水量对比</MenuItem>
|
|
||||||
</Select>
|
|
||||||
</FormControl>
|
|
||||||
</div>
|
</div>
|
||||||
<ReactEcharts
|
<ReactEcharts
|
||||||
option={option}
|
option={option}
|
||||||
|
|
|
||||||
|
|
@ -117,7 +117,7 @@ const StyledFormControlLabel = styled(FormControlLabel)({
|
||||||
// }
|
// }
|
||||||
extra={
|
extra={
|
||||||
<>
|
<>
|
||||||
<i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i>
|
{/* <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> */}
|
{/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -131,7 +131,7 @@ function HDReal({ style }) {
|
||||||
// }
|
// }
|
||||||
extra={
|
extra={
|
||||||
<>
|
<>
|
||||||
<i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i>
|
{/* <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> */}
|
{/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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,191 @@
|
||||||
|
import React, { useMemo, useState,useEffect } 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 { DatePicker } from 'antd';
|
||||||
|
import moment from 'moment';
|
||||||
|
import './index.less'
|
||||||
|
const { RangePicker } = DatePicker;
|
||||||
|
|
||||||
|
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(1).fill(0).map((o,i) => ({
|
||||||
|
date: '2025-05-26',
|
||||||
|
event: '侵占河道',
|
||||||
|
type: '侵占河道',
|
||||||
|
status: '待处理',
|
||||||
|
place:'浮桥河灌区'
|
||||||
|
}))
|
||||||
|
|
||||||
|
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 data = [
|
||||||
|
{ key: '0', date: '合计', power: '0' },
|
||||||
|
{ key: '1', date: '2025-05-01', power: '0' },
|
||||||
|
{ key: '2', date: '2025-05-02', power: '0' },
|
||||||
|
{ key: '3', date: '2025-05-03', power: '0' },
|
||||||
|
{ key: '4', date: '2025-05-04', power: '0' },
|
||||||
|
{ key: '5', date: '2025-05-05', power: '0' },
|
||||||
|
{ key: '6', date: '2025-05-06', power: '0' },
|
||||||
|
{ key: '7', date: '2025-05-07', power: '0' },
|
||||||
|
{ key: '8', date: '2025-05-08', power: '0' },
|
||||||
|
{ key: '9', date: '2025-05-09', power: '0' }
|
||||||
|
];
|
||||||
|
const toggleStType = (type) => {
|
||||||
|
const visible = !tableRzFilter[type];
|
||||||
|
dispatch.realview.setTableRzFilter({ [type]: visible });
|
||||||
|
}
|
||||||
|
const [params, setParams] = useState({ tm: [] })
|
||||||
|
const toggleAutoRefresh = () => {
|
||||||
|
dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
|
||||||
|
}
|
||||||
|
|
||||||
|
const searchTm = (e) => {
|
||||||
|
setParams({
|
||||||
|
...params,
|
||||||
|
stm: e[0].format("YYYY-MM-DD HH:mm"),
|
||||||
|
etm: e[1].format("YYYY-MM-DD HH:mm"),
|
||||||
|
tm:e,
|
||||||
|
})
|
||||||
|
};
|
||||||
|
useEffect(() => {
|
||||||
|
let options = "";
|
||||||
|
options = {
|
||||||
|
etm: moment().add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm"),
|
||||||
|
stm: moment().subtract(7, 'days').add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm"),
|
||||||
|
tm: [
|
||||||
|
moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }),
|
||||||
|
moment().add(1, 'hour').set({ minute: 0, second: 0 }),
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
setParams(options)
|
||||||
|
|
||||||
|
}, [])
|
||||||
|
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> */}
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div className='tm' style={{position:"relative",zIndex:999999,color:"#fff",width:"60%",margin:'10px'}}>
|
||||||
|
<RangePicker
|
||||||
|
// width="100%"
|
||||||
|
className='time-picker'
|
||||||
|
style={{
|
||||||
|
flex:1,
|
||||||
|
background: "transparent",
|
||||||
|
border: "none",
|
||||||
|
color: "#fff",
|
||||||
|
}}
|
||||||
|
onChange={searchTm}
|
||||||
|
allowClear
|
||||||
|
format="YYYY-MM-DD HH:mm"
|
||||||
|
showTime={{
|
||||||
|
format: 'HH:mm',
|
||||||
|
}}
|
||||||
|
value={params.tm}
|
||||||
|
getPopupContainer={trigger => trigger.parentElement}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<TableContainer style={{ height: '80%',marginTop:'10px' }}>
|
||||||
|
<Table size="small" stickyHeader>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow >
|
||||||
|
<DpTableCell style={{ width: '50%' }} align="center">日期</DpTableCell>
|
||||||
|
<DpTableCell style={{ width: '50%' }} align="center">电耗(kWh)</DpTableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{data.map((row) => (
|
||||||
|
<DpTableRow key={row.id}>
|
||||||
|
<DpTableCell align="center">
|
||||||
|
<div
|
||||||
|
className="table-ellipsis cursor-pointer"
|
||||||
|
>{row.date}</div>
|
||||||
|
</DpTableCell>
|
||||||
|
<DpTableCell align="center">{row.power}</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,90 @@
|
||||||
|
|
||||||
|
.tm{
|
||||||
|
width: 40%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
border-radius: 2px;
|
||||||
|
color: #fff;
|
||||||
|
background: linear-gradient(270deg,rgba(65,76,217,.4),rgba(58,85,218,.2) 14%,rgba(54,90,218,0) 49%,rgba(51,94,218,.2) 86%,rgba(44,102,219,.4));
|
||||||
|
border: 1px solid #0e4e93;
|
||||||
|
|
||||||
|
.MuiInput-underline:before{
|
||||||
|
border: 0px;
|
||||||
|
}
|
||||||
|
.time-picker{
|
||||||
|
.ant-picker-input > input{
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.ant-picker-separator{
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.time-type {
|
||||||
|
margin-left: 10rem;
|
||||||
|
display: flex;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #393e45;
|
||||||
|
border-radius: 5%;
|
||||||
|
padding: 0.01% !important;
|
||||||
|
border: 1px solid #585e64;
|
||||||
|
div {
|
||||||
|
width: 80px;
|
||||||
|
border-radius: 5%;
|
||||||
|
text-align: center;
|
||||||
|
border: 1px solid #585e64;
|
||||||
|
padding: 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
color: #5FB7FF;
|
||||||
|
// background: #F0F7FF;
|
||||||
|
border: 1px solid #5FB7FF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.ant-picker-panel-container{
|
||||||
|
background-color: rgba(36, 46, 92,1) !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
.ant-picker-header,.ant-picker-body{
|
||||||
|
color: #fff !important;
|
||||||
|
border-color: #242e5c;
|
||||||
|
}
|
||||||
|
.ant-picker-content th{
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.ant-picker-cell,
|
||||||
|
.ant-picker-header-super-prev-btn,
|
||||||
|
.ant-picker-header-prev-btn,
|
||||||
|
.ant-picker-header-next-btn,
|
||||||
|
.ant-picker-header-super-next-btn
|
||||||
|
{
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end) .ant-picker-cell-inner{
|
||||||
|
// background: transparent !important;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
.ant-picker-cell-in-view.ant-picker-cell-in-range::before,
|
||||||
|
.ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before,
|
||||||
|
.ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single)::before
|
||||||
|
{
|
||||||
|
background-color:transparent !important;
|
||||||
|
}
|
||||||
|
.ant-picker-time-panel-column > li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner{
|
||||||
|
background-color: #1890ff !important;
|
||||||
|
}
|
||||||
|
.ant-picker-time-panel-column > li.ant-picker-time-panel-cell .ant-picker-time-panel-cell-inner:hover{
|
||||||
|
// background-color:transparent !important;
|
||||||
|
color: #000 !important;
|
||||||
|
}
|
||||||
|
.ant-picker-header-super-next-btn,.ant-picker-time-panel-cell-inner
|
||||||
|
{
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
@ -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,189 @@
|
||||||
|
import React, { useMemo, useState,useEffect } 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 { DatePicker } from 'antd';
|
||||||
|
import moment from 'moment';
|
||||||
|
import './index.less'
|
||||||
|
const { RangePicker } = DatePicker;
|
||||||
|
|
||||||
|
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(1).fill(0).map((o,i) => ({
|
||||||
|
date: '2025-05-26',
|
||||||
|
event: '侵占河道',
|
||||||
|
type: '侵占河道',
|
||||||
|
status: '待处理',
|
||||||
|
place:'浮桥河灌区'
|
||||||
|
}))
|
||||||
|
|
||||||
|
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 data = [
|
||||||
|
{ key: '0', date: '合计', supply: '15402.15', lastMonth: '14725.78' },
|
||||||
|
{ key: '1', date: '2025-05-01', supply: '643.91', lastMonth: '446.78' },
|
||||||
|
{ key: '2', date: '2025-05-02', supply: '654.94', lastMonth: '527.03' },
|
||||||
|
{ key: '3', date: '2025-05-03', supply: '674.31', lastMonth: '528.33' },
|
||||||
|
{ key: '4', date: '2025-05-04', supply: '619.43', lastMonth: '448.18' },
|
||||||
|
{ key: '5', date: '2025-05-05', supply: '537.5', lastMonth: '483.9' }
|
||||||
|
];
|
||||||
|
const toggleStType = (type) => {
|
||||||
|
const visible = !tableRzFilter[type];
|
||||||
|
dispatch.realview.setTableRzFilter({ [type]: visible });
|
||||||
|
}
|
||||||
|
const [params, setParams] = useState({ tm: [] })
|
||||||
|
const toggleAutoRefresh = () => {
|
||||||
|
dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
|
||||||
|
}
|
||||||
|
|
||||||
|
const searchTm = (e) => {
|
||||||
|
setParams({
|
||||||
|
...params,
|
||||||
|
stm: e[0].format("YYYY-MM-DD HH:mm"),
|
||||||
|
etm: e[1].format("YYYY-MM-DD HH:mm"),
|
||||||
|
tm:e,
|
||||||
|
})
|
||||||
|
};
|
||||||
|
useEffect(() => {
|
||||||
|
let options = "";
|
||||||
|
options = {
|
||||||
|
etm: moment().add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm"),
|
||||||
|
stm: moment().subtract(7, 'days').add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm"),
|
||||||
|
tm: [
|
||||||
|
moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }),
|
||||||
|
moment().add(1, 'hour').set({ minute: 0, second: 0 }),
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
setParams(options)
|
||||||
|
|
||||||
|
}, [])
|
||||||
|
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> */}
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div className='tm' style={{position:"relative",zIndex:999999,color:"#fff",width:"60%",margin:'10px'}}>
|
||||||
|
<RangePicker
|
||||||
|
// width="100%"
|
||||||
|
className='time-picker'
|
||||||
|
style={{
|
||||||
|
flex:1,
|
||||||
|
background: "transparent",
|
||||||
|
border: "none",
|
||||||
|
color: "#fff",
|
||||||
|
}}
|
||||||
|
onChange={searchTm}
|
||||||
|
allowClear
|
||||||
|
format="YYYY-MM-DD HH:mm"
|
||||||
|
showTime={{
|
||||||
|
format: 'HH:mm',
|
||||||
|
}}
|
||||||
|
value={params.tm}
|
||||||
|
getPopupContainer={trigger => trigger.parentElement}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<TableContainer style={{ height: '80%',marginTop:'10px' }}>
|
||||||
|
<Table size="small" stickyHeader>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow >
|
||||||
|
<DpTableCell style={{ width: '40%' }} align="center">日期</DpTableCell>
|
||||||
|
<DpTableCell style={{ width: '30%' }} align="center">供水量(m³)</DpTableCell>
|
||||||
|
<DpTableCell align="center" style={{ width: '30%' }}>上月对比(m³)</DpTableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{data.map((row) => (
|
||||||
|
<DpTableRow key={row.id}>
|
||||||
|
<DpTableCell align="center">
|
||||||
|
<div
|
||||||
|
className="table-ellipsis cursor-pointer"
|
||||||
|
>{row.date}</div>
|
||||||
|
</DpTableCell>
|
||||||
|
<DpTableCell align="center">{row.supply}</DpTableCell>
|
||||||
|
<DpTableCell align="center">{row.lastMonth}</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,90 @@
|
||||||
|
|
||||||
|
.tm{
|
||||||
|
width: 40%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
border-radius: 2px;
|
||||||
|
color: #fff;
|
||||||
|
background: linear-gradient(270deg,rgba(65,76,217,.4),rgba(58,85,218,.2) 14%,rgba(54,90,218,0) 49%,rgba(51,94,218,.2) 86%,rgba(44,102,219,.4));
|
||||||
|
border: 1px solid #0e4e93;
|
||||||
|
|
||||||
|
.MuiInput-underline:before{
|
||||||
|
border: 0px;
|
||||||
|
}
|
||||||
|
.time-picker{
|
||||||
|
.ant-picker-input > input{
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.ant-picker-separator{
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.time-type {
|
||||||
|
margin-left: 10rem;
|
||||||
|
display: flex;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #393e45;
|
||||||
|
border-radius: 5%;
|
||||||
|
padding: 0.01% !important;
|
||||||
|
border: 1px solid #585e64;
|
||||||
|
div {
|
||||||
|
width: 80px;
|
||||||
|
border-radius: 5%;
|
||||||
|
text-align: center;
|
||||||
|
border: 1px solid #585e64;
|
||||||
|
padding: 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
color: #5FB7FF;
|
||||||
|
// background: #F0F7FF;
|
||||||
|
border: 1px solid #5FB7FF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.ant-picker-panel-container{
|
||||||
|
background-color: rgba(36, 46, 92,1) !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
.ant-picker-header,.ant-picker-body{
|
||||||
|
color: #fff !important;
|
||||||
|
border-color: #242e5c;
|
||||||
|
}
|
||||||
|
.ant-picker-content th{
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.ant-picker-cell,
|
||||||
|
.ant-picker-header-super-prev-btn,
|
||||||
|
.ant-picker-header-prev-btn,
|
||||||
|
.ant-picker-header-next-btn,
|
||||||
|
.ant-picker-header-super-next-btn
|
||||||
|
{
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end) .ant-picker-cell-inner{
|
||||||
|
// background: transparent !important;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
.ant-picker-cell-in-view.ant-picker-cell-in-range::before,
|
||||||
|
.ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before,
|
||||||
|
.ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single)::before
|
||||||
|
{
|
||||||
|
background-color:transparent !important;
|
||||||
|
}
|
||||||
|
.ant-picker-time-panel-column > li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner{
|
||||||
|
background-color: #1890ff !important;
|
||||||
|
}
|
||||||
|
.ant-picker-time-panel-column > li.ant-picker-time-panel-cell .ant-picker-time-panel-cell-inner:hover{
|
||||||
|
// background-color:transparent !important;
|
||||||
|
color: #000 !important;
|
||||||
|
}
|
||||||
|
.ant-picker-header-super-next-btn,.ant-picker-time-panel-cell-inner
|
||||||
|
{
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
@ -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,157 @@
|
||||||
|
const data = [
|
||||||
|
{
|
||||||
|
"addvcd": "420800000000000",
|
||||||
|
"moditime": "2022-05-01 21:00:00",
|
||||||
|
"comments": "漳河遥测",
|
||||||
|
"src": "zhzj",
|
||||||
|
"esstym": "",
|
||||||
|
"mvalue": {
|
||||||
|
"slmmmt": null,
|
||||||
|
"slm60": 0,
|
||||||
|
"exkey": "@",
|
||||||
|
"slm80": 0,
|
||||||
|
"hitrsn": null,
|
||||||
|
"crpty": null,
|
||||||
|
"crpgrwprd": null,
|
||||||
|
"srlslm": null,
|
||||||
|
"stcd": "ZH201417",
|
||||||
|
"slm10": 24,
|
||||||
|
"slm20": 5.3,
|
||||||
|
"slm30": 44.3,
|
||||||
|
"slm40": 44.3,
|
||||||
|
"tm": "2024-08-03 05:00",
|
||||||
|
"slm100": 0,
|
||||||
|
"vtavslm": null,
|
||||||
|
"slmAvg": 24.5
|
||||||
|
},
|
||||||
|
"lttd": 30.8456 +0.2002,
|
||||||
|
"sttp": "SS",
|
||||||
|
"irrCode": "D00000010",
|
||||||
|
"sort": 9999,
|
||||||
|
"hasImg": false,
|
||||||
|
"stlc": "荆门市",
|
||||||
|
"dtmel": 0,
|
||||||
|
"stcd": "ZH201417",
|
||||||
|
"stnm": "马山二组（墒情）",
|
||||||
|
"addvcd_dictText": "荆门市",
|
||||||
|
"lgtd": 112.2321 +2.9619,
|
||||||
|
"irrCode_dictText": "漳河实验站",
|
||||||
|
"bsnm": "漳河流域"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"addvcd": "420800000000000",
|
||||||
|
"moditime": "2022-05-01 21:00:00",
|
||||||
|
"comments": "漳河遥测",
|
||||||
|
"src": "zhzj",
|
||||||
|
"esstym": "",
|
||||||
|
"mvalue": {
|
||||||
|
"slmmmt": null,
|
||||||
|
"slm60": 0,
|
||||||
|
"exkey": "@",
|
||||||
|
"slm80": 0,
|
||||||
|
"hitrsn": null,
|
||||||
|
"crpty": null,
|
||||||
|
"crpgrwprd": null,
|
||||||
|
"srlslm": null,
|
||||||
|
"stcd": "ZH201421",
|
||||||
|
"slm10": 12.1,
|
||||||
|
"slm20": 16.2,
|
||||||
|
"slm30": 12.8,
|
||||||
|
"slm40": 12.8,
|
||||||
|
"tm": "2024-08-15 08:00",
|
||||||
|
"slm100": 0,
|
||||||
|
"vtavslm": null,
|
||||||
|
"slmAvg": 13.7
|
||||||
|
},
|
||||||
|
"lttd": 30.8446 +0.2002,
|
||||||
|
"sttp": "SS",
|
||||||
|
"irrCode": "D00000010",
|
||||||
|
"sort": 9999,
|
||||||
|
"hasImg": false,
|
||||||
|
"stlc": "荆门市",
|
||||||
|
"dtmel": 0,
|
||||||
|
"stcd": "ZH201421",
|
||||||
|
"stnm": "槐桥四组（墒情）",
|
||||||
|
"addvcd_dictText": "荆门市",
|
||||||
|
"lgtd": 112.203 +2.9619,
|
||||||
|
"irrCode_dictText": "漳河实验站",
|
||||||
|
"bsnm": "漳河流域"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"addvcd": "420800000000000",
|
||||||
|
"moditime": "2022-05-01 21:00:00",
|
||||||
|
"src": "zhzj",
|
||||||
|
"esstym": "",
|
||||||
|
"mvalue": {
|
||||||
|
"slmmmt": null,
|
||||||
|
"slm60": 0,
|
||||||
|
"exkey": "@",
|
||||||
|
"slm80": 0,
|
||||||
|
"hitrsn": null,
|
||||||
|
"crpty": null,
|
||||||
|
"crpgrwprd": null,
|
||||||
|
"srlslm": null,
|
||||||
|
"stcd": "ZH201418",
|
||||||
|
"slm10": 16.5,
|
||||||
|
"slm20": 12.5,
|
||||||
|
"slm30": 0,
|
||||||
|
"slm40": 0,
|
||||||
|
"tm": "2024-09-19 11:00",
|
||||||
|
"slm100": 0,
|
||||||
|
"vtavslm": null,
|
||||||
|
"slmAvg": 14.5
|
||||||
|
},
|
||||||
|
"lttd": 30.8866 +0.2002,
|
||||||
|
"sttp": "SS",
|
||||||
|
"irrCode": "D00000010",
|
||||||
|
"sort": 9999,
|
||||||
|
"hasImg": false,
|
||||||
|
"stlc": "荆门市",
|
||||||
|
"dtmel": 0,
|
||||||
|
"stcd": "ZH201418",
|
||||||
|
"stnm": "双碑一组（墒情）",
|
||||||
|
"addvcd_dictText": "荆门市",
|
||||||
|
"lgtd": 112.2006 +2.9619,
|
||||||
|
"irrCode_dictText": "漳河实验站",
|
||||||
|
"bsnm": "漳河流域"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"addvcd": "420800000000000",
|
||||||
|
"moditime": "2022-05-01 21:00:00",
|
||||||
|
"comments": "水资源多孔闸门控制系统",
|
||||||
|
"src": "zhzj",
|
||||||
|
"esstym": "",
|
||||||
|
"mvalue": {
|
||||||
|
"slmmmt": null,
|
||||||
|
"slm60": null,
|
||||||
|
"exkey": "@",
|
||||||
|
"slm80": null,
|
||||||
|
"hitrsn": null,
|
||||||
|
"crpty": null,
|
||||||
|
"crpgrwprd": null,
|
||||||
|
"srlslm": null,
|
||||||
|
"stcd": "4211221031",
|
||||||
|
"slm10": 31,
|
||||||
|
"slm20": 42.6,
|
||||||
|
"slm30": null,
|
||||||
|
"slm40": 26.6,
|
||||||
|
"tm": "2025-05-26 09:00",
|
||||||
|
"slm100": null,
|
||||||
|
"vtavslm": null,
|
||||||
|
"slmAvg": 33.4
|
||||||
|
},
|
||||||
|
"lttd": 30.904191 +0.2002,
|
||||||
|
"sttp": "SS",
|
||||||
|
"irrCode": "D00000010",
|
||||||
|
"sort": 9999,
|
||||||
|
"hasImg": false,
|
||||||
|
"stlc": "荆门市",
|
||||||
|
"stcd": "4211221031",
|
||||||
|
"stnm": "试验站墒情",
|
||||||
|
"addvcd_dictText": "荆门市",
|
||||||
|
"lgtd": 112.087806 +2.9619,
|
||||||
|
"irrCode_dictText": "漳河实验站",
|
||||||
|
"bsnm": "漳河流域"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
export default data;
|
||||||
|
|
@ -0,0 +1,167 @@
|
||||||
|
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';
|
||||||
|
import showData from './constant'
|
||||||
|
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 = [
|
||||||
|
{
|
||||||
|
stnm: '监测点1',
|
||||||
|
press: '0.52',
|
||||||
|
flow: 200,
|
||||||
|
hg: 90,
|
||||||
|
"lttd": 30.8456 +0.2002,
|
||||||
|
"lgtd": 112.2321 +2.9619,
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
stnm: '监测点2',
|
||||||
|
press: '0.52',
|
||||||
|
flow: 200,
|
||||||
|
hg: 90,
|
||||||
|
"lttd": 30.8446 +0.2002,
|
||||||
|
"lgtd": 112.203 +2.9619,
|
||||||
|
|
||||||
|
},{
|
||||||
|
stnm: '监测点3',
|
||||||
|
press: '0.52',
|
||||||
|
flow: 200,
|
||||||
|
hg: 90,
|
||||||
|
"lttd": 30.8866 +0.2002,
|
||||||
|
"lgtd": 112.2006 +2.9619,
|
||||||
|
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const flyTo = (record) => {
|
||||||
|
const { lgtd, lttd } = record;
|
||||||
|
if (lgtd && lttd) {
|
||||||
|
dispatch.runtime.setFeaturePop({ type: '监测站', 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: '20%' }} align="center">监测点</DpTableCell>
|
||||||
|
<DpTableCell style={{ width: '30%' }} align="center">压力(Mpa)</DpTableCell>
|
||||||
|
<DpTableCell align="center" style={{ width: '30%' }}>流量(m³/h)</DpTableCell>
|
||||||
|
<DpTableCell align="center" style={{ width: '20%' }}>水质合格率(%)</DpTableCell>
|
||||||
|
{/* <DpTableCell align="right">警戒水位</DpTableCell> */}
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{showData.map((row) => (
|
||||||
|
<DpTableRow key={row.id} onClick={() => flyTo(row)}>
|
||||||
|
<DpTableCell align="center">
|
||||||
|
<div
|
||||||
|
className="table-ellipsis cursor-pointer"
|
||||||
|
>{row.stnm}</div>
|
||||||
|
</DpTableCell>
|
||||||
|
<DpTableCell align="center">
|
||||||
|
<div
|
||||||
|
className="table-ellipsis cursor-pointer"
|
||||||
|
>{row.press}</div>
|
||||||
|
</DpTableCell>
|
||||||
|
<DpTableCell align="center">{row.flow}</DpTableCell>
|
||||||
|
<DpTableCell align="center">{row.hg}</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,193 @@
|
||||||
|
import React, { useMemo, useState,useEffect } 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 { DatePicker } from 'antd';
|
||||||
|
import moment from 'moment';
|
||||||
|
import './index.less'
|
||||||
|
const { RangePicker } = DatePicker;
|
||||||
|
|
||||||
|
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(1).fill(0).map((o,i) => ({
|
||||||
|
date: '2025-05-26',
|
||||||
|
event: '侵占河道',
|
||||||
|
type: '侵占河道',
|
||||||
|
status: '待处理',
|
||||||
|
place:'浮桥河灌区'
|
||||||
|
}))
|
||||||
|
|
||||||
|
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 data = [
|
||||||
|
{ key: '0', date: '合计', intake: '20959.07', lastMonth: '22558.47' },
|
||||||
|
{ key: '1', date: '2025-05-01', intake: '754.77', lastMonth: '704.77' },
|
||||||
|
{ key: '2', date: '2025-05-02', intake: '940.93', lastMonth: '713.9' },
|
||||||
|
{ key: '3', date: '2025-05-03', intake: '891.67', lastMonth: '526.83' },
|
||||||
|
{ key: '4', date: '2025-05-04', intake: '888.15', lastMonth: '577.1' },
|
||||||
|
{ key: '5', date: '2025-05-05', intake: '813.27', lastMonth: '780.13' },
|
||||||
|
{ key: '6', date: '2025-05-06', intake: '875.79', lastMonth: '850.83' },
|
||||||
|
{ key: '7', date: '2025-05-07', intake: '743.86', lastMonth: '862.48' },
|
||||||
|
{ key: '8', date: '2025-05-08', intake: '728.14', lastMonth: '853.63' },
|
||||||
|
{ key: '9', date: '2025-05-09', intake: '738.43', lastMonth: '890.43' }
|
||||||
|
];
|
||||||
|
const toggleStType = (type) => {
|
||||||
|
const visible = !tableRzFilter[type];
|
||||||
|
dispatch.realview.setTableRzFilter({ [type]: visible });
|
||||||
|
}
|
||||||
|
const [params, setParams] = useState({ tm: [] })
|
||||||
|
const toggleAutoRefresh = () => {
|
||||||
|
dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
|
||||||
|
}
|
||||||
|
|
||||||
|
const searchTm = (e) => {
|
||||||
|
setParams({
|
||||||
|
...params,
|
||||||
|
stm: e[0].format("YYYY-MM-DD HH:mm"),
|
||||||
|
etm: e[1].format("YYYY-MM-DD HH:mm"),
|
||||||
|
tm:e,
|
||||||
|
})
|
||||||
|
};
|
||||||
|
useEffect(() => {
|
||||||
|
let options = "";
|
||||||
|
options = {
|
||||||
|
etm: moment().add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm"),
|
||||||
|
stm: moment().subtract(7, 'days').add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm"),
|
||||||
|
tm: [
|
||||||
|
moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }),
|
||||||
|
moment().add(1, 'hour').set({ minute: 0, second: 0 }),
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
setParams(options)
|
||||||
|
|
||||||
|
}, [])
|
||||||
|
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> */}
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div className='tm' style={{position:"relative",zIndex:999999,color:"#fff",width:"60%",margin:'10px'}}>
|
||||||
|
<RangePicker
|
||||||
|
// width="100%"
|
||||||
|
className='time-picker'
|
||||||
|
style={{
|
||||||
|
flex:1,
|
||||||
|
background: "transparent",
|
||||||
|
border: "none",
|
||||||
|
color: "#fff",
|
||||||
|
}}
|
||||||
|
onChange={searchTm}
|
||||||
|
allowClear
|
||||||
|
format="YYYY-MM-DD HH:mm"
|
||||||
|
showTime={{
|
||||||
|
format: 'HH:mm',
|
||||||
|
}}
|
||||||
|
value={params.tm}
|
||||||
|
getPopupContainer={trigger => trigger.parentElement}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<TableContainer style={{ height: '80%',marginTop:'10px' }}>
|
||||||
|
<Table size="small" stickyHeader>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow >
|
||||||
|
<DpTableCell style={{ width: '40%' }} align="center">日期</DpTableCell>
|
||||||
|
<DpTableCell style={{ width: '30%' }} align="center">取水量(m³)</DpTableCell>
|
||||||
|
<DpTableCell align="center" style={{ width: '30%' }}>上月对比(m³)</DpTableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{data.map((row) => (
|
||||||
|
<DpTableRow key={row.id}>
|
||||||
|
<DpTableCell align="center">
|
||||||
|
<div
|
||||||
|
className="table-ellipsis cursor-pointer"
|
||||||
|
>{row.date}</div>
|
||||||
|
</DpTableCell>
|
||||||
|
<DpTableCell align="center">{row.intake}</DpTableCell>
|
||||||
|
<DpTableCell align="center">{row.lastMonth}</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,90 @@
|
||||||
|
|
||||||
|
.tm{
|
||||||
|
width: 40%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
border-radius: 2px;
|
||||||
|
color: #fff;
|
||||||
|
background: linear-gradient(270deg,rgba(65,76,217,.4),rgba(58,85,218,.2) 14%,rgba(54,90,218,0) 49%,rgba(51,94,218,.2) 86%,rgba(44,102,219,.4));
|
||||||
|
border: 1px solid #0e4e93;
|
||||||
|
|
||||||
|
.MuiInput-underline:before{
|
||||||
|
border: 0px;
|
||||||
|
}
|
||||||
|
.time-picker{
|
||||||
|
.ant-picker-input > input{
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.ant-picker-separator{
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.time-type {
|
||||||
|
margin-left: 10rem;
|
||||||
|
display: flex;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #393e45;
|
||||||
|
border-radius: 5%;
|
||||||
|
padding: 0.01% !important;
|
||||||
|
border: 1px solid #585e64;
|
||||||
|
div {
|
||||||
|
width: 80px;
|
||||||
|
border-radius: 5%;
|
||||||
|
text-align: center;
|
||||||
|
border: 1px solid #585e64;
|
||||||
|
padding: 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
color: #5FB7FF;
|
||||||
|
// background: #F0F7FF;
|
||||||
|
border: 1px solid #5FB7FF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.ant-picker-panel-container{
|
||||||
|
background-color: rgba(36, 46, 92,1) !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
.ant-picker-header,.ant-picker-body{
|
||||||
|
color: #fff !important;
|
||||||
|
border-color: #242e5c;
|
||||||
|
}
|
||||||
|
.ant-picker-content th{
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.ant-picker-cell,
|
||||||
|
.ant-picker-header-super-prev-btn,
|
||||||
|
.ant-picker-header-prev-btn,
|
||||||
|
.ant-picker-header-next-btn,
|
||||||
|
.ant-picker-header-super-next-btn
|
||||||
|
{
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end) .ant-picker-cell-inner{
|
||||||
|
// background: transparent !important;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
.ant-picker-cell-in-view.ant-picker-cell-in-range::before,
|
||||||
|
.ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before,
|
||||||
|
.ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single)::before
|
||||||
|
{
|
||||||
|
background-color:transparent !important;
|
||||||
|
}
|
||||||
|
.ant-picker-time-panel-column > li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner{
|
||||||
|
background-color: #1890ff !important;
|
||||||
|
}
|
||||||
|
.ant-picker-time-panel-column > li.ant-picker-time-panel-cell .ant-picker-time-panel-cell-inner:hover{
|
||||||
|
// background-color:transparent !important;
|
||||||
|
color: #000 !important;
|
||||||
|
}
|
||||||
|
.ant-picker-header-super-next-btn,.ant-picker-time-panel-cell-inner
|
||||||
|
{
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
@ -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,157 @@
|
||||||
|
const data = [
|
||||||
|
{
|
||||||
|
"addvcd": "420800000000000",
|
||||||
|
"moditime": "2022-05-01 21:00:00",
|
||||||
|
"comments": "漳河遥测",
|
||||||
|
"src": "zhzj",
|
||||||
|
"esstym": "",
|
||||||
|
"mvalue": {
|
||||||
|
"slmmmt": null,
|
||||||
|
"slm60": 0,
|
||||||
|
"exkey": "@",
|
||||||
|
"slm80": 0,
|
||||||
|
"hitrsn": null,
|
||||||
|
"crpty": null,
|
||||||
|
"crpgrwprd": null,
|
||||||
|
"srlslm": null,
|
||||||
|
"stcd": "ZH201417",
|
||||||
|
"slm10": 24,
|
||||||
|
"slm20": 5.3,
|
||||||
|
"slm30": 44.3,
|
||||||
|
"slm40": 44.3,
|
||||||
|
"tm": "2024-08-03 05:00",
|
||||||
|
"slm100": 0,
|
||||||
|
"vtavslm": null,
|
||||||
|
"slmAvg": 24.5
|
||||||
|
},
|
||||||
|
"lttd": 30.8456 +0.2002,
|
||||||
|
"sttp": "SS",
|
||||||
|
"irrCode": "D00000010",
|
||||||
|
"sort": 9999,
|
||||||
|
"hasImg": false,
|
||||||
|
"stlc": "荆门市",
|
||||||
|
"dtmel": 0,
|
||||||
|
"stcd": "ZH201417",
|
||||||
|
"stnm": "马山二组（墒情）",
|
||||||
|
"addvcd_dictText": "荆门市",
|
||||||
|
"lgtd": 112.2321 +2.9619,
|
||||||
|
"irrCode_dictText": "漳河实验站",
|
||||||
|
"bsnm": "漳河流域"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"addvcd": "420800000000000",
|
||||||
|
"moditime": "2022-05-01 21:00:00",
|
||||||
|
"comments": "漳河遥测",
|
||||||
|
"src": "zhzj",
|
||||||
|
"esstym": "",
|
||||||
|
"mvalue": {
|
||||||
|
"slmmmt": null,
|
||||||
|
"slm60": 0,
|
||||||
|
"exkey": "@",
|
||||||
|
"slm80": 0,
|
||||||
|
"hitrsn": null,
|
||||||
|
"crpty": null,
|
||||||
|
"crpgrwprd": null,
|
||||||
|
"srlslm": null,
|
||||||
|
"stcd": "ZH201421",
|
||||||
|
"slm10": 12.1,
|
||||||
|
"slm20": 16.2,
|
||||||
|
"slm30": 12.8,
|
||||||
|
"slm40": 12.8,
|
||||||
|
"tm": "2024-08-15 08:00",
|
||||||
|
"slm100": 0,
|
||||||
|
"vtavslm": null,
|
||||||
|
"slmAvg": 13.7
|
||||||
|
},
|
||||||
|
"lttd": 30.8446 +0.2002,
|
||||||
|
"sttp": "SS",
|
||||||
|
"irrCode": "D00000010",
|
||||||
|
"sort": 9999,
|
||||||
|
"hasImg": false,
|
||||||
|
"stlc": "荆门市",
|
||||||
|
"dtmel": 0,
|
||||||
|
"stcd": "ZH201421",
|
||||||
|
"stnm": "槐桥四组（墒情）",
|
||||||
|
"addvcd_dictText": "荆门市",
|
||||||
|
"lgtd": 112.203 +2.9619,
|
||||||
|
"irrCode_dictText": "漳河实验站",
|
||||||
|
"bsnm": "漳河流域"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"addvcd": "420800000000000",
|
||||||
|
"moditime": "2022-05-01 21:00:00",
|
||||||
|
"src": "zhzj",
|
||||||
|
"esstym": "",
|
||||||
|
"mvalue": {
|
||||||
|
"slmmmt": null,
|
||||||
|
"slm60": 0,
|
||||||
|
"exkey": "@",
|
||||||
|
"slm80": 0,
|
||||||
|
"hitrsn": null,
|
||||||
|
"crpty": null,
|
||||||
|
"crpgrwprd": null,
|
||||||
|
"srlslm": null,
|
||||||
|
"stcd": "ZH201418",
|
||||||
|
"slm10": 16.5,
|
||||||
|
"slm20": 12.5,
|
||||||
|
"slm30": 0,
|
||||||
|
"slm40": 0,
|
||||||
|
"tm": "2024-09-19 11:00",
|
||||||
|
"slm100": 0,
|
||||||
|
"vtavslm": null,
|
||||||
|
"slmAvg": 14.5
|
||||||
|
},
|
||||||
|
"lttd": 30.8866 +0.2002,
|
||||||
|
"sttp": "SS",
|
||||||
|
"irrCode": "D00000010",
|
||||||
|
"sort": 9999,
|
||||||
|
"hasImg": false,
|
||||||
|
"stlc": "荆门市",
|
||||||
|
"dtmel": 0,
|
||||||
|
"stcd": "ZH201418",
|
||||||
|
"stnm": "双碑一组（墒情）",
|
||||||
|
"addvcd_dictText": "荆门市",
|
||||||
|
"lgtd": 112.2006 +2.9619,
|
||||||
|
"irrCode_dictText": "漳河实验站",
|
||||||
|
"bsnm": "漳河流域"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"addvcd": "420800000000000",
|
||||||
|
"moditime": "2022-05-01 21:00:00",
|
||||||
|
"comments": "水资源多孔闸门控制系统",
|
||||||
|
"src": "zhzj",
|
||||||
|
"esstym": "",
|
||||||
|
"mvalue": {
|
||||||
|
"slmmmt": null,
|
||||||
|
"slm60": null,
|
||||||
|
"exkey": "@",
|
||||||
|
"slm80": null,
|
||||||
|
"hitrsn": null,
|
||||||
|
"crpty": null,
|
||||||
|
"crpgrwprd": null,
|
||||||
|
"srlslm": null,
|
||||||
|
"stcd": "4211221031",
|
||||||
|
"slm10": 31,
|
||||||
|
"slm20": 42.6,
|
||||||
|
"slm30": null,
|
||||||
|
"slm40": 26.6,
|
||||||
|
"tm": "2025-05-26 09:00",
|
||||||
|
"slm100": null,
|
||||||
|
"vtavslm": null,
|
||||||
|
"slmAvg": 33.4
|
||||||
|
},
|
||||||
|
"lttd": 30.904191 +0.2002,
|
||||||
|
"sttp": "SS",
|
||||||
|
"irrCode": "D00000010",
|
||||||
|
"sort": 9999,
|
||||||
|
"hasImg": false,
|
||||||
|
"stlc": "荆门市",
|
||||||
|
"stcd": "4211221031",
|
||||||
|
"stnm": "试验站墒情",
|
||||||
|
"addvcd_dictText": "荆门市",
|
||||||
|
"lgtd": 112.087806 +2.9619,
|
||||||
|
"irrCode_dictText": "漳河实验站",
|
||||||
|
"bsnm": "漳河流域"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
export default data;
|
||||||
|
|
@ -0,0 +1,202 @@
|
||||||
|
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';
|
||||||
|
import showData from './constant'
|
||||||
|
import ReactECharts from 'echarts-for-react';
|
||||||
|
|
||||||
|
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 = [
|
||||||
|
{
|
||||||
|
stnm: '监测点1',
|
||||||
|
press: '0.52',
|
||||||
|
flow: 200,
|
||||||
|
hg:90
|
||||||
|
},
|
||||||
|
{
|
||||||
|
stnm: '监测点2',
|
||||||
|
press: '0.52',
|
||||||
|
flow: 200,
|
||||||
|
hg:90
|
||||||
|
},{
|
||||||
|
stnm: '监测点3',
|
||||||
|
press: '0.52',
|
||||||
|
flow: 200,
|
||||||
|
hg:90
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const flyTo = (record) => {
|
||||||
|
dispatch.map.setLayerVisible({'TrsqLayer':true})
|
||||||
|
const { lgtd, lttd } = record;
|
||||||
|
if (lgtd && lttd) {
|
||||||
|
dispatch.runtime.setFeaturePop({ type: '墒情站', 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 option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['数字分布', '里程分布'],
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
top: 10
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top:'13%',
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['福田镇', '龙池桥镇', '木子店镇', '宋埠镇', '黄土岗镇', '铁门岗镇', '乘马岗镇', '白果镇', '张家畈镇', '顺河镇'],
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff',
|
||||||
|
interval: 0,
|
||||||
|
rotate: 45
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
name: '数量',
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed',
|
||||||
|
color: 'rgba(255,255,255,0.2)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '数字分布',
|
||||||
|
type: 'bar',
|
||||||
|
data: [2050, 2250, 1300, 2100, 1950, 1100, 2150, 2400, 1950, 2100],
|
||||||
|
itemStyle: {
|
||||||
|
color: '#36a4eb'
|
||||||
|
},
|
||||||
|
barWidth: '20%'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '里程分布',
|
||||||
|
type: 'bar',
|
||||||
|
data: [1100, 1300, 1200, 1300, 1000, 1100, 1200, 1100, 1000, 1600],
|
||||||
|
itemStyle: {
|
||||||
|
color: '#4b5cc4'
|
||||||
|
},
|
||||||
|
barWidth: '20%'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PanelBox
|
||||||
|
style={style}
|
||||||
|
title="数量及里程分布"
|
||||||
|
color="green"
|
||||||
|
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> */}
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<ReactECharts
|
||||||
|
option={option}
|
||||||
|
style={{ height: '400px', width: '100%' }}
|
||||||
|
/>
|
||||||
|
{
|
||||||
|
setting && <Setting onClose={() => showSetting(false)} />
|
||||||
|
}
|
||||||
|
</PanelBox>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default HDReal;
|
||||||
|
|
@ -0,0 +1,139 @@
|
||||||
|
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:'center',columnGap:20,alignItems:'center'}}>
|
||||||
|
<div style={{ padding: "18px 25px", background: "linear-gradient(to bottom, #001529, #003366)" }}>
|
||||||
|
<div className="value" style={{ color: '#5ecd45' }}>14700<span style={{fontSize:14}}>根</span></div>
|
||||||
|
<div className="key" style={{ color: '#fff', fontSize: 16 }}>总数量</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ padding: "18px 25px", background: "linear-gradient(to bottom, #001529, #003366)" }}>
|
||||||
|
<div className="value" style={{ color: '#5ecd45' }}>12875<span style={{fontSize:14}}>公里</span></div>
|
||||||
|
<div className="key" style={{ color: '#fff', fontSize: 16 }}>总里程</div>
|
||||||
|
</div>
|
||||||
|
{/* <div style={{ padding: "15px 33px", background: "linear-gradient(to bottom, #001529, #003366)" }}>
|
||||||
|
<div className="value" style={{ cursor: 'pointer', color: '#5ecd45' }}>9876<span style={{fontSize:14}}>m³</span></div>
|
||||||
|
<div className="key" style={{ color: '#fff', fontSize: 16 }}>累计用水量</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ padding:"15px 30px", background: "linear-gradient(to bottom, #001529, #003366)" }}>
|
||||||
|
<div className="value" style={{ color: '#5ecd45' }}>85.6<span style={{fontSize:14}}>%</span></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,157 @@
|
||||||
|
const data = [
|
||||||
|
{
|
||||||
|
"addvcd": "420800000000000",
|
||||||
|
"moditime": "2022-05-01 21:00:00",
|
||||||
|
"comments": "漳河遥测",
|
||||||
|
"src": "zhzj",
|
||||||
|
"esstym": "",
|
||||||
|
"mvalue": {
|
||||||
|
"slmmmt": null,
|
||||||
|
"slm60": 0,
|
||||||
|
"exkey": "@",
|
||||||
|
"slm80": 0,
|
||||||
|
"hitrsn": null,
|
||||||
|
"crpty": null,
|
||||||
|
"crpgrwprd": null,
|
||||||
|
"srlslm": null,
|
||||||
|
"stcd": "ZH201417",
|
||||||
|
"slm10": 24,
|
||||||
|
"slm20": 5.3,
|
||||||
|
"slm30": 44.3,
|
||||||
|
"slm40": 44.3,
|
||||||
|
"tm": "2024-08-03 05:00",
|
||||||
|
"slm100": 0,
|
||||||
|
"vtavslm": null,
|
||||||
|
"slmAvg": 24.5
|
||||||
|
},
|
||||||
|
"lttd": 30.8456 +0.2002,
|
||||||
|
"sttp": "SS",
|
||||||
|
"irrCode": "D00000010",
|
||||||
|
"sort": 9999,
|
||||||
|
"hasImg": false,
|
||||||
|
"stlc": "荆门市",
|
||||||
|
"dtmel": 0,
|
||||||
|
"stcd": "ZH201417",
|
||||||
|
"stnm": "马山二组（墒情）",
|
||||||
|
"addvcd_dictText": "荆门市",
|
||||||
|
"lgtd": 112.2321 +2.9619,
|
||||||
|
"irrCode_dictText": "漳河实验站",
|
||||||
|
"bsnm": "漳河流域"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"addvcd": "420800000000000",
|
||||||
|
"moditime": "2022-05-01 21:00:00",
|
||||||
|
"comments": "漳河遥测",
|
||||||
|
"src": "zhzj",
|
||||||
|
"esstym": "",
|
||||||
|
"mvalue": {
|
||||||
|
"slmmmt": null,
|
||||||
|
"slm60": 0,
|
||||||
|
"exkey": "@",
|
||||||
|
"slm80": 0,
|
||||||
|
"hitrsn": null,
|
||||||
|
"crpty": null,
|
||||||
|
"crpgrwprd": null,
|
||||||
|
"srlslm": null,
|
||||||
|
"stcd": "ZH201421",
|
||||||
|
"slm10": 12.1,
|
||||||
|
"slm20": 16.2,
|
||||||
|
"slm30": 12.8,
|
||||||
|
"slm40": 12.8,
|
||||||
|
"tm": "2024-08-15 08:00",
|
||||||
|
"slm100": 0,
|
||||||
|
"vtavslm": null,
|
||||||
|
"slmAvg": 13.7
|
||||||
|
},
|
||||||
|
"lttd": 30.8446 +0.2002,
|
||||||
|
"sttp": "SS",
|
||||||
|
"irrCode": "D00000010",
|
||||||
|
"sort": 9999,
|
||||||
|
"hasImg": false,
|
||||||
|
"stlc": "荆门市",
|
||||||
|
"dtmel": 0,
|
||||||
|
"stcd": "ZH201421",
|
||||||
|
"stnm": "槐桥四组（墒情）",
|
||||||
|
"addvcd_dictText": "荆门市",
|
||||||
|
"lgtd": 112.203 +2.9619,
|
||||||
|
"irrCode_dictText": "漳河实验站",
|
||||||
|
"bsnm": "漳河流域"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"addvcd": "420800000000000",
|
||||||
|
"moditime": "2022-05-01 21:00:00",
|
||||||
|
"src": "zhzj",
|
||||||
|
"esstym": "",
|
||||||
|
"mvalue": {
|
||||||
|
"slmmmt": null,
|
||||||
|
"slm60": 0,
|
||||||
|
"exkey": "@",
|
||||||
|
"slm80": 0,
|
||||||
|
"hitrsn": null,
|
||||||
|
"crpty": null,
|
||||||
|
"crpgrwprd": null,
|
||||||
|
"srlslm": null,
|
||||||
|
"stcd": "ZH201418",
|
||||||
|
"slm10": 16.5,
|
||||||
|
"slm20": 12.5,
|
||||||
|
"slm30": 0,
|
||||||
|
"slm40": 0,
|
||||||
|
"tm": "2024-09-19 11:00",
|
||||||
|
"slm100": 0,
|
||||||
|
"vtavslm": null,
|
||||||
|
"slmAvg": 14.5
|
||||||
|
},
|
||||||
|
"lttd": 30.8866 +0.2002,
|
||||||
|
"sttp": "SS",
|
||||||
|
"irrCode": "D00000010",
|
||||||
|
"sort": 9999,
|
||||||
|
"hasImg": false,
|
||||||
|
"stlc": "荆门市",
|
||||||
|
"dtmel": 0,
|
||||||
|
"stcd": "ZH201418",
|
||||||
|
"stnm": "双碑一组（墒情）",
|
||||||
|
"addvcd_dictText": "荆门市",
|
||||||
|
"lgtd": 112.2006 +2.9619,
|
||||||
|
"irrCode_dictText": "漳河实验站",
|
||||||
|
"bsnm": "漳河流域"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"addvcd": "420800000000000",
|
||||||
|
"moditime": "2022-05-01 21:00:00",
|
||||||
|
"comments": "水资源多孔闸门控制系统",
|
||||||
|
"src": "zhzj",
|
||||||
|
"esstym": "",
|
||||||
|
"mvalue": {
|
||||||
|
"slmmmt": null,
|
||||||
|
"slm60": null,
|
||||||
|
"exkey": "@",
|
||||||
|
"slm80": null,
|
||||||
|
"hitrsn": null,
|
||||||
|
"crpty": null,
|
||||||
|
"crpgrwprd": null,
|
||||||
|
"srlslm": null,
|
||||||
|
"stcd": "4211221031",
|
||||||
|
"slm10": 31,
|
||||||
|
"slm20": 42.6,
|
||||||
|
"slm30": null,
|
||||||
|
"slm40": 26.6,
|
||||||
|
"tm": "2025-05-26 09:00",
|
||||||
|
"slm100": null,
|
||||||
|
"vtavslm": null,
|
||||||
|
"slmAvg": 33.4
|
||||||
|
},
|
||||||
|
"lttd": 30.904191 +0.2002,
|
||||||
|
"sttp": "SS",
|
||||||
|
"irrCode": "D00000010",
|
||||||
|
"sort": 9999,
|
||||||
|
"hasImg": false,
|
||||||
|
"stlc": "荆门市",
|
||||||
|
"stcd": "4211221031",
|
||||||
|
"stnm": "试验站墒情",
|
||||||
|
"addvcd_dictText": "荆门市",
|
||||||
|
"lgtd": 112.087806 +2.9619,
|
||||||
|
"irrCode_dictText": "漳河实验站",
|
||||||
|
"bsnm": "漳河流域"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
export default data;
|
||||||
|
|
@ -0,0 +1,207 @@
|
||||||
|
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';
|
||||||
|
import showData from './constant'
|
||||||
|
import ReactECharts from 'echarts-for-react';
|
||||||
|
|
||||||
|
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 = [
|
||||||
|
{
|
||||||
|
stnm: '监测点1',
|
||||||
|
press: '0.52',
|
||||||
|
flow: 200,
|
||||||
|
hg:90
|
||||||
|
},
|
||||||
|
{
|
||||||
|
stnm: '监测点2',
|
||||||
|
press: '0.52',
|
||||||
|
flow: 200,
|
||||||
|
hg:90
|
||||||
|
},{
|
||||||
|
stnm: '监测点3',
|
||||||
|
press: '0.52',
|
||||||
|
flow: 200,
|
||||||
|
hg:90
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const flyTo = (record) => {
|
||||||
|
dispatch.map.setLayerVisible({'TrsqLayer':true})
|
||||||
|
const { lgtd, lttd } = record;
|
||||||
|
if (lgtd && lttd) {
|
||||||
|
dispatch.runtime.setFeaturePop({ type: '墒情站', 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 option = {
|
||||||
|
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: '15%',
|
||||||
|
left: '3%',
|
||||||
|
right: '8%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: ['04-20', '04-21', '04-22', '04-23', '04-24', '04-25', '04-26'],
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
name: '流量',
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed',
|
||||||
|
color: 'rgba(255,255,255,0.2)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '夜间流量',
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
areaStyle: {
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(0,255,255,0.3)'
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(0,255,255,0)'
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
color: '#00ffff'
|
||||||
|
},
|
||||||
|
data: [180, 205, 135, 150, 180, 120, 190],
|
||||||
|
markLine: {
|
||||||
|
silent: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#ffd700',
|
||||||
|
type: 'dashed'
|
||||||
|
},
|
||||||
|
data: [{
|
||||||
|
yAxis: 180,
|
||||||
|
name: '安全流量上限'
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PanelBox
|
||||||
|
style={style}
|
||||||
|
title="近七日夜间最小流量"
|
||||||
|
color="green"
|
||||||
|
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> */}
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<ReactECharts
|
||||||
|
option={option}
|
||||||
|
style={{ height: '400px', width: '100%' }}
|
||||||
|
/>
|
||||||
|
{
|
||||||
|
setting && <Setting onClose={() => showSetting(false)} />
|
||||||
|
}
|
||||||
|
</PanelBox>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default HDReal;
|
||||||
|
|
@ -1,69 +1,4 @@
|
||||||
const data =[
|
const data =[
|
||||||
{
|
|
||||||
"addvcd": "420800000000000",
|
|
||||||
"moditime": "2022-10-01 21:00:00",
|
|
||||||
"comments": "水资源多孔闸门控制系统",
|
|
||||||
"src": "zhzj",
|
|
||||||
"esstym": "",
|
|
||||||
"mvalue": {
|
|
||||||
"formatTm": null,
|
|
||||||
"formatHq": "0.000",
|
|
||||||
"vol": 0,
|
|
||||||
"formatAccq": null,
|
|
||||||
"stcd": "4211221029",
|
|
||||||
"rz": 1.129,
|
|
||||||
"tm": "2025-05-26 11:00",
|
|
||||||
"hq": 0,
|
|
||||||
"fr": null,
|
|
||||||
"chan": "1",
|
|
||||||
"accq": 120057496
|
|
||||||
},
|
|
||||||
"lttd": 31.240848 +0.2002,
|
|
||||||
"sttp": "QQ",
|
|
||||||
"irrCode": "D00001300",
|
|
||||||
"sort": 6001,
|
|
||||||
"hasImg": false,
|
|
||||||
"stlc": "荆门市",
|
|
||||||
"dtmel": 0,
|
|
||||||
"stcd": "4211221029",
|
|
||||||
"stnm": "口泉测流站",
|
|
||||||
"addvcd_dictText": "荆门市",
|
|
||||||
"lgtd": 111.826413 +2.9619,
|
|
||||||
"irrCode_dictText": "水库枢纽",
|
|
||||||
"bsnm": "漳河流域"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"addvcd": "420800000000000",
|
|
||||||
"moditime": "2022-10-26 21:00:00",
|
|
||||||
"comments": "水资源多孔闸门控制系统",
|
|
||||||
"src": "zhzj",
|
|
||||||
"mvalue": {
|
|
||||||
"formatTm": null,
|
|
||||||
"formatHq": "0.000",
|
|
||||||
"vol": 0,
|
|
||||||
"formatAccq": null,
|
|
||||||
"stcd": "4211221030",
|
|
||||||
"rz": 0.869,
|
|
||||||
"tm": "2025-05-26 11:00",
|
|
||||||
"hq": 0,
|
|
||||||
"fr": null,
|
|
||||||
"chan": "1",
|
|
||||||
"accq": 159077248
|
|
||||||
},
|
|
||||||
"lttd": 31.249561,
|
|
||||||
"sttp": "QQ",
|
|
||||||
"irrCode": "D00001300",
|
|
||||||
"sort": 6002,
|
|
||||||
"hasImg": false,
|
|
||||||
"stlc": "荆门市",
|
|
||||||
"dtmel": 0,
|
|
||||||
"stcd": "4211221030",
|
|
||||||
"stnm": "苍坪测流站",
|
|
||||||
"addvcd_dictText": "荆门市",
|
|
||||||
"lgtd": 111.866217 +2.9619,
|
|
||||||
"irrCode_dictText": "水库枢纽",
|
|
||||||
"bsnm": "漳河流域"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"addvcd": "420800000000000",
|
"addvcd": "420800000000000",
|
||||||
"moditime": "2022-06-26 21:00:00",
|
"moditime": "2022-06-26 21:00:00",
|
||||||
|
|
|
||||||
|
|
@ -57,7 +57,7 @@ function HDReal({ style }) {
|
||||||
"lttd": 30.9641 +0.2002,
|
"lttd": 30.9641 +0.2002,
|
||||||
"tm": "2025-03-21 08",
|
"tm": "2025-03-21 08",
|
||||||
"doxLevelStr": "Ⅰ类",
|
"doxLevelStr": "Ⅰ类",
|
||||||
stnm:'水质站'
|
stnm:'麻城水站'
|
||||||
}))
|
}))
|
||||||
|
|
||||||
const flyTo = (record) => {
|
const flyTo = (record) => {
|
||||||
|
|
|
||||||
|
|
@ -125,7 +125,7 @@ function HDReal({ style }) {
|
||||||
// }
|
// }
|
||||||
extra={
|
extra={
|
||||||
<>
|
<>
|
||||||
<i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i>
|
{/* <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> */}
|
{/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
|
|
@ -179,7 +179,7 @@ function HDReal({ style }) {
|
||||||
<div style={{fontSize:16}}>淹没乡镇数</div>
|
<div style={{fontSize:16}}>淹没乡镇数</div>
|
||||||
</div>
|
</div>
|
||||||
<div style={{display:'flex',flexDirection:'column',alignItems:'center'}}>
|
<div style={{display:'flex',flexDirection:'column',alignItems:'center'}}>
|
||||||
<div style={{color:'#41cbf1',fontSize:20}}>0.5km2</div>
|
<div style={{color:'#41cbf1',fontSize:20}}>0.5k㎡</div>
|
||||||
<div style={{fontSize:16}}>淹没总面积</div>
|
<div style={{fontSize:16}}>淹没总面积</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -190,7 +190,7 @@ function HDReal({ style }) {
|
||||||
<TableHead>
|
<TableHead>
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<DpTableCell style={{ width: '50%' }} align="center">乡镇名称</DpTableCell>
|
<DpTableCell style={{ width: '50%' }} align="center">乡镇名称</DpTableCell>
|
||||||
<DpTableCell style={{ width: '50%' }} align="center">影响面积/m2</DpTableCell>
|
<DpTableCell style={{ width: '50%' }} align="center">影响面积/㎡</DpTableCell>
|
||||||
{/* <DpTableCell align="right">警戒水位</DpTableCell> */}
|
{/* <DpTableCell align="right">警戒水位</DpTableCell> */}
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableHead>
|
</TableHead>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,67 @@
|
||||||
|
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: '2rem' }}>
|
||||||
|
<Typography variant="subtitle2">地图实时雨量显示雨量时段</Typography>
|
||||||
|
<Select
|
||||||
|
style={{ fontSize: '1.2rem' }}
|
||||||
|
fullWidth
|
||||||
|
value={layerSetting.drplabel}
|
||||||
|
onChange={(event) => dispath.map.setLayerSetting({ drplabel: event.target.value })}
|
||||||
|
>
|
||||||
|
<MenuItem value="h1">小时雨量</MenuItem>
|
||||||
|
<MenuItem value="h3">3小时雨量</MenuItem>
|
||||||
|
<MenuItem value="h6">6小时雨量</MenuItem>
|
||||||
|
<MenuItem value="h12">12小时雨量</MenuItem>
|
||||||
|
<MenuItem value="h24">24小时雨量</MenuItem>
|
||||||
|
<MenuItem value="h48">48小时雨量</MenuItem>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div style={{ marginBottom: '1rem' }}>
|
||||||
|
<Typography variant="subtitle2">显示实时雨量图层</Typography>
|
||||||
|
<Switch
|
||||||
|
checked={!!layerVisible.RealDrpLayer}
|
||||||
|
color="primary"
|
||||||
|
edge="start"
|
||||||
|
onChange={(e) => dispath.map.setLayerVisible({ RealDrpLayer: e.target.checked })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</FormGroup>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
<div className="boxfoot"></div>
|
||||||
|
</Dialog>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Setting;
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -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,195 @@
|
||||||
|
import React, { useMemo, useState,useEffect } 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 { DatePicker } from 'antd';
|
||||||
|
import moment from 'moment';
|
||||||
|
import './index.less'
|
||||||
|
const { RangePicker } = DatePicker;
|
||||||
|
|
||||||
|
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(1).fill(0).map((o,i) => ({
|
||||||
|
date: '2025-05-26',
|
||||||
|
event: '侵占河道',
|
||||||
|
type: '侵占河道',
|
||||||
|
status: '待处理',
|
||||||
|
place:'浮桥河灌区'
|
||||||
|
}))
|
||||||
|
|
||||||
|
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 data = [
|
||||||
|
{ name: '福田镇中心区', leakage: '1258.6', supply: '3526.8', rate: 35.6 },
|
||||||
|
{ name: '木子店镇区', leakage: '986.3', supply: '2832.7', rate: 34.8 },
|
||||||
|
{ name: '龙池桥镇区', leakage: '1485.5', supply: '4482.5', rate: 33.1 },
|
||||||
|
{ name: '宋埠镇区', leakage: '1284.8', supply: '4029.5', rate: 31.9 },
|
||||||
|
{ name: '黄土岗镇区', leakage: '186.2', supply: '698.2', rate: 26.7 },
|
||||||
|
{ name: '铁门岗镇区', leakage: '984.2', supply: '3994.4', rate: 24.6 },
|
||||||
|
{ name: '乘马岗镇区', leakage: '300.6', supply: '1250.5', rate: 24.0 },
|
||||||
|
{ name: '白果镇区', leakage: '1129.0', supply: '6422.6', rate: 17.6 },
|
||||||
|
{ name: '张家畈镇区', leakage: '444.8', supply: '2661.8', rate: 16.7 },
|
||||||
|
{ name: '顺河镇区', leakage: '749.3', supply: '4490.1', rate: 16.7 }
|
||||||
|
];
|
||||||
|
const toggleStType = (type) => {
|
||||||
|
const visible = !tableRzFilter[type];
|
||||||
|
dispatch.realview.setTableRzFilter({ [type]: visible });
|
||||||
|
}
|
||||||
|
const [params, setParams] = useState({ tm: [] })
|
||||||
|
const toggleAutoRefresh = () => {
|
||||||
|
dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
|
||||||
|
}
|
||||||
|
|
||||||
|
const searchTm = (e) => {
|
||||||
|
setParams({
|
||||||
|
...params,
|
||||||
|
stm: e[0].format("YYYY-MM-DD HH:mm"),
|
||||||
|
etm: e[1].format("YYYY-MM-DD HH:mm"),
|
||||||
|
tm:e,
|
||||||
|
})
|
||||||
|
};
|
||||||
|
useEffect(() => {
|
||||||
|
let options = "";
|
||||||
|
options = {
|
||||||
|
etm: moment().add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm"),
|
||||||
|
stm: moment().subtract(7, 'days').add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm"),
|
||||||
|
tm: [
|
||||||
|
moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }),
|
||||||
|
moment().add(1, 'hour').set({ minute: 0, second: 0 }),
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
setParams(options)
|
||||||
|
|
||||||
|
}, [])
|
||||||
|
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> */}
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div className='tm' style={{position:"relative",zIndex:999999,color:"#fff",width:"60%",margin:'10px'}}>
|
||||||
|
<RangePicker
|
||||||
|
// width="100%"
|
||||||
|
className='time-picker'
|
||||||
|
style={{
|
||||||
|
flex:1,
|
||||||
|
background: "transparent",
|
||||||
|
border: "none",
|
||||||
|
color: "#fff",
|
||||||
|
}}
|
||||||
|
onChange={searchTm}
|
||||||
|
allowClear
|
||||||
|
format="YYYY-MM-DD HH:mm"
|
||||||
|
showTime={{
|
||||||
|
format: 'HH:mm',
|
||||||
|
}}
|
||||||
|
value={params.tm}
|
||||||
|
getPopupContainer={trigger => trigger.parentElement}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<TableContainer style={{ height: '80%',marginTop:'10px' }}>
|
||||||
|
<Table size="small" stickyHeader>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow >
|
||||||
|
<DpTableCell style={{ width: '30%' }} align="center">DMA分区名称</DpTableCell>
|
||||||
|
<DpTableCell style={{ width: '25%' }} align="center">漏水量(㎡)</DpTableCell>
|
||||||
|
<DpTableCell align="center" style={{ width: '25%' }}>供水量</DpTableCell>
|
||||||
|
<DpTableCell align="center" style={{ width: '20%' }}>漏损率(%)</DpTableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{data.map((row) => (
|
||||||
|
<DpTableRow key={row.id} onClick={() => flyTo(row)}>
|
||||||
|
<DpTableCell align="center">
|
||||||
|
<div
|
||||||
|
className="table-ellipsis cursor-pointer"
|
||||||
|
>{row.name}</div>
|
||||||
|
</DpTableCell>
|
||||||
|
<DpTableCell align="center">{row.leakage}</DpTableCell>
|
||||||
|
<DpTableCell align="center">{row.supply}</DpTableCell>
|
||||||
|
<DpTableCell align="center">{row.rate}</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,90 @@
|
||||||
|
|
||||||
|
.tm{
|
||||||
|
width: 40%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
border-radius: 2px;
|
||||||
|
color: #fff;
|
||||||
|
background: linear-gradient(270deg,rgba(65,76,217,.4),rgba(58,85,218,.2) 14%,rgba(54,90,218,0) 49%,rgba(51,94,218,.2) 86%,rgba(44,102,219,.4));
|
||||||
|
border: 1px solid #0e4e93;
|
||||||
|
|
||||||
|
.MuiInput-underline:before{
|
||||||
|
border: 0px;
|
||||||
|
}
|
||||||
|
.time-picker{
|
||||||
|
.ant-picker-input > input{
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.ant-picker-separator{
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.time-type {
|
||||||
|
margin-left: 10rem;
|
||||||
|
display: flex;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #393e45;
|
||||||
|
border-radius: 5%;
|
||||||
|
padding: 0.01% !important;
|
||||||
|
border: 1px solid #585e64;
|
||||||
|
div {
|
||||||
|
width: 80px;
|
||||||
|
border-radius: 5%;
|
||||||
|
text-align: center;
|
||||||
|
border: 1px solid #585e64;
|
||||||
|
padding: 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
color: #5FB7FF;
|
||||||
|
// background: #F0F7FF;
|
||||||
|
border: 1px solid #5FB7FF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.ant-picker-panel-container{
|
||||||
|
background-color: rgba(36, 46, 92,1) !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
.ant-picker-header,.ant-picker-body{
|
||||||
|
color: #fff !important;
|
||||||
|
border-color: #242e5c;
|
||||||
|
}
|
||||||
|
.ant-picker-content th{
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.ant-picker-cell,
|
||||||
|
.ant-picker-header-super-prev-btn,
|
||||||
|
.ant-picker-header-prev-btn,
|
||||||
|
.ant-picker-header-next-btn,
|
||||||
|
.ant-picker-header-super-next-btn
|
||||||
|
{
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end) .ant-picker-cell-inner{
|
||||||
|
// background: transparent !important;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
.ant-picker-cell-in-view.ant-picker-cell-in-range::before,
|
||||||
|
.ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before,
|
||||||
|
.ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single)::before
|
||||||
|
{
|
||||||
|
background-color:transparent !important;
|
||||||
|
}
|
||||||
|
.ant-picker-time-panel-column > li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner{
|
||||||
|
background-color: #1890ff !important;
|
||||||
|
}
|
||||||
|
.ant-picker-time-panel-column > li.ant-picker-time-panel-cell .ant-picker-time-panel-cell-inner:hover{
|
||||||
|
// background-color:transparent !important;
|
||||||
|
color: #000 !important;
|
||||||
|
}
|
||||||
|
.ant-picker-header-super-next-btn,.ant-picker-time-panel-cell-inner
|
||||||
|
{
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue