合并代码
commit
3516030b2e
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
|
|
@ -315,6 +315,21 @@ const map = {
|
||||||
Object.keys(DCPJ_TYPES).forEach(key => {
|
Object.keys(DCPJ_TYPES).forEach(key => {
|
||||||
layerVisible['Dcpj_' + key + 'Layer'] = false;
|
layerVisible['Dcpj_' + key + 'Layer'] = false;
|
||||||
});
|
});
|
||||||
|
} else if (id === 301) {
|
||||||
|
layerVisible = {
|
||||||
|
RealDrpLayer: false,
|
||||||
|
RealHDLayer: false,
|
||||||
|
RealSkLayer: true,
|
||||||
|
BxSkLayer: false,
|
||||||
|
FzdxLayer: false,
|
||||||
|
WataLayer: false,
|
||||||
|
AdcdLayer: true,
|
||||||
|
RoadLayer: true,
|
||||||
|
RivlLayer: true,
|
||||||
|
};
|
||||||
|
Object.keys(DCPJ_TYPES).forEach(key => {
|
||||||
|
layerVisible['Dcpj_' + key + 'Layer'] = false;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
dispatch.runtime.setLayerSetting({ contour: null, dem: undefined })
|
dispatch.runtime.setLayerSetting({ contour: null, dem: undefined })
|
||||||
|
|
|
||||||
|
|
@ -87,6 +87,13 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
||||||
{ key: '水库管理', style: { height: '40rem', flexGrow: 1 } },
|
{ key: '水库管理', style: { height: '40rem', flexGrow: 1 } },
|
||||||
];
|
];
|
||||||
leftFullHeight = true;
|
leftFullHeight = true;
|
||||||
|
} else if (view === 301) {
|
||||||
|
left = [
|
||||||
|
{ key: '天气' },
|
||||||
|
{ 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 === 501) {
|
||||||
left = [
|
left = [
|
||||||
{ key: '雨量监测',style: { height: '8rem', flexGrow: 1 } },
|
{ key: '雨量监测',style: { height: '8rem', flexGrow: 1 } },
|
||||||
|
|
@ -217,6 +224,13 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
||||||
right = [
|
right = [
|
||||||
{ key: '警报' },
|
{ key: '警报' },
|
||||||
];
|
];
|
||||||
|
} else if (view === 301) {
|
||||||
|
right = [
|
||||||
|
{ key: '警报' },
|
||||||
|
{ key: '对比分析', style: { height: '19rem', flexGrow: 1 } },
|
||||||
|
{ key: '供水监控', style: { flexGrow: 1 } },
|
||||||
|
rightFullHeight = true
|
||||||
|
];
|
||||||
} else if (view === 501) {
|
} else if (view === 501) {
|
||||||
right = [
|
right = [
|
||||||
{ key: '水质监测',style: { height: '20rem', flexGrow: 1 } },
|
{ key: '水质监测',style: { height: '20rem', flexGrow: 1 } },
|
||||||
|
|
|
||||||
|
|
@ -47,7 +47,6 @@ import Szwtqytj from './panels/Szwtqytj'
|
||||||
import Spjc from './panels/Spjc'
|
import Spjc from './panels/Spjc'
|
||||||
import Skgl from './panels/Skgl'
|
import Skgl from './panels/Skgl'
|
||||||
import Fxdd from './panels/Fxdd'
|
import Fxdd from './panels/Fxdd'
|
||||||
|
|
||||||
import GqSta from './panels/GqSta'
|
import GqSta from './panels/GqSta'
|
||||||
import Gqyssqs from './panels/Gqyqs'
|
import Gqyssqs from './panels/Gqyqs'
|
||||||
import Gqbl from './panels/Gqbl'
|
import Gqbl from './panels/Gqbl'
|
||||||
|
|
@ -56,6 +55,11 @@ import Gqycqd from './panels/Gqycqd'
|
||||||
import Gqdb from './panels/Gqdb'
|
import Gqdb from './panels/Gqdb'
|
||||||
import Szzdd from './panels/Szzdd'
|
import Szzdd from './panels/Szzdd'
|
||||||
import Yyfa from './panels/Yyfa'
|
import Yyfa from './panels/Yyfa'
|
||||||
|
import Gsts from './panels/Gsts'
|
||||||
|
import Gsfgl from './panels/Gsfgl'
|
||||||
|
import Rgsl from './panels/Rgsl'
|
||||||
|
import Dbfx from './panels/Dbfx'
|
||||||
|
import Gsjk from './panels/Gsjk'
|
||||||
|
|
||||||
export default function PanelIndex({ name, style, ...params }) {
|
export default function PanelIndex({ name, style, ...params }) {
|
||||||
if (name === '天气') {
|
if (name === '天气') {
|
||||||
|
|
@ -170,7 +174,18 @@ export default function PanelIndex({ name, style, ...params }) {
|
||||||
return <Szzdd style={style} />
|
return <Szzdd style={style} />
|
||||||
}else if (name == '预演方案') {
|
}else if (name == '预演方案') {
|
||||||
return <Yyfa style={style} />
|
return <Yyfa style={style} />
|
||||||
|
} else if (name === '供水态势') {
|
||||||
|
return <Gsts style={style} />
|
||||||
|
} else if (name === '供水覆盖率') {
|
||||||
|
return <Gsfgl style={style} />
|
||||||
|
} else if (name === '日供水量') {
|
||||||
|
return <Rgsl style={style} />
|
||||||
|
} else if (name === '对比分析') {
|
||||||
|
return <Dbfx style={style} />
|
||||||
|
} else if (name === '供水监控') {
|
||||||
|
return <Gsjk style={style} />
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PanelBox style={style} title={name} color="red">
|
<PanelBox style={style} title={name} color="red">
|
||||||
<p>not impl</p>
|
<p>not impl</p>
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,9 @@ const VIEWS = [
|
||||||
{ id: 205, title: '防汛调度', img: '/assets/menu/辅助决策.png' },
|
{ id: 205, title: '防汛调度', img: '/assets/menu/辅助决策.png' },
|
||||||
{ id: 206, title: '水库管理', img: '/assets/menu/病险水库.png' },
|
{ id: 206, title: '水库管理', img: '/assets/menu/病险水库.png' },
|
||||||
] },
|
] },
|
||||||
{ id: 300, title: '水厂', img: '/assets/menu/实时数据.png',children:[
|
{ id: 300, title: '水厂', img: '/assets/menu/水利设施.png',children:[
|
||||||
|
{ id: 301, title: '供水态势', img: '/assets/menu/降雨中心.png' },
|
||||||
|
|
||||||
// 供水态势
|
// 供水态势
|
||||||
// 水质安全
|
// 水质安全
|
||||||
// 水厂运行
|
// 水厂运行
|
||||||
|
|
@ -31,7 +33,7 @@ const VIEWS = [
|
||||||
// 决策支持与报表
|
// 决策支持与报表
|
||||||
] },
|
] },
|
||||||
{
|
{
|
||||||
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' },
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
import React, { useMemo, useState } from 'react';
|
||||||
|
import PanelBox from '../../components/PanelBox';
|
||||||
|
|
||||||
|
function DrpReal({ style }) {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PanelBox
|
||||||
|
style={style}
|
||||||
|
title="对比分析"
|
||||||
|
color="green"
|
||||||
|
>
|
||||||
|
<img src='/assets/duibifenxi.png' style={{width:'429.81px', height:'254px',marginLeft:'1px'}}/>
|
||||||
|
</PanelBox>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DrpReal;
|
||||||
|
|
@ -0,0 +1,134 @@
|
||||||
|
import React, { useMemo } from 'react';
|
||||||
|
import echarts from 'echarts/lib/echarts';
|
||||||
|
import ReactEcharts from 'echarts-for-react';
|
||||||
|
|
||||||
|
|
||||||
|
const pallete = [
|
||||||
|
['#177ab3', '#51c3e7'],
|
||||||
|
['#9976dc', '#c792ee'],
|
||||||
|
['#94a1eb', '#a7caf8'],
|
||||||
|
['#7ae5c3', '#c9f4ea'],
|
||||||
|
['#c7dca5', '#f5fcd5'],
|
||||||
|
['#7988d9', '#9dc6f1'],
|
||||||
|
['#d9ed8f', '#d3f89b'],
|
||||||
|
];
|
||||||
|
|
||||||
|
const palleteLen = pallete.length;
|
||||||
|
|
||||||
|
|
||||||
|
const AreaDrpChart = ({ data }) => {
|
||||||
|
const { max, sdata } = useMemo(() => {
|
||||||
|
let max = 0;
|
||||||
|
data.forEach(o => {
|
||||||
|
max = Math.max(max, o.av)
|
||||||
|
});
|
||||||
|
max = [10, 20, 50, 100, 200, 300, 400].find(i => i >= max);
|
||||||
|
|
||||||
|
return {
|
||||||
|
max,
|
||||||
|
sdata: data.map(o => ({ ...o, name: o.NAME.split('').join('\n') })),
|
||||||
|
}
|
||||||
|
}, [data]);
|
||||||
|
|
||||||
|
var option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: function (params) {
|
||||||
|
var res = `供水覆盖率：${params.data}%`;
|
||||||
|
return res;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
x: 28,
|
||||||
|
y: 24,
|
||||||
|
x2: 18,
|
||||||
|
y2: 36,
|
||||||
|
borderWidth: 0
|
||||||
|
},
|
||||||
|
calculable: true,
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: ['中馆驿镇', '宋埠镇', '歧亭镇', '白果镇', '夫子河镇', '阎家河镇', '龟山镇', '盐田河镇', '张家畈镇', '木子店镇', '三河口镇', '黄土岗镇', '福田河镇', '乘马岗镇', '顺河镇'],
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#bbb',
|
||||||
|
fontSize: 10,
|
||||||
|
textShadowBlur: 4,
|
||||||
|
textShadowColor: '#6ab',
|
||||||
|
interval: 0,
|
||||||
|
rotate: 35,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#07a6ff',
|
||||||
|
width: 0.5,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
position: 'left',
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#07a6ff',
|
||||||
|
width: 0.25,
|
||||||
|
type: 'dashed'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#bbb',
|
||||||
|
fontSize: 10,
|
||||||
|
textShadowBlur: 4,
|
||||||
|
textShadowColor: '#6ab',
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '覆盖率',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '60%',
|
||||||
|
data: [82.3, 80.4, 81.8, 72, 82.2, 82.4, 80.4, 80.8, 82.3, 72.3, 80.1, 79.4, 81.6, 80.4, 80],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#3b84bf'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
color: '#bbb',
|
||||||
|
fontSize: 12,
|
||||||
|
textShadowBlur: 4,
|
||||||
|
textShadowColor: '#6ab',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ReactEcharts
|
||||||
|
option={option}
|
||||||
|
style={{ height: '98%', width: '100%' }}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default React.memo(AreaDrpChart);
|
||||||
|
|
@ -0,0 +1,61 @@
|
||||||
|
import clsx from 'clsx';
|
||||||
|
import React, { useMemo } from 'react';
|
||||||
|
import { useDispatch, useSelector } from 'react-redux';
|
||||||
|
import { ZhenDataPromise } from '../../../../models/_/adcd';
|
||||||
|
import { DrpRealPromise } from '../../../../models/_/real';
|
||||||
|
import useRefresh from '../../../../utils/useRefresh';
|
||||||
|
import useRequest from '../../../../utils/useRequest';
|
||||||
|
import PanelBox from '../../components/PanelBox';
|
||||||
|
import AreaDrpChart from './chart';
|
||||||
|
|
||||||
|
export default function AreaDrp({ style }) {
|
||||||
|
const t = useRefresh(60 * 1000);
|
||||||
|
const { data: adcdList } = useRequest(ZhenDataPromise.get);
|
||||||
|
const { data: drpList } = useRequest(DrpRealPromise.get, t);
|
||||||
|
const areaDrpTmType = useSelector(s => s.overallview.areaDrpTmType);
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
|
const data = useMemo(() => {
|
||||||
|
if (!adcdList) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
const resMap = {};
|
||||||
|
adcdList.forEach(({ ADCD, NAME }) => {
|
||||||
|
resMap[ADCD.substr(0, 9)] = {
|
||||||
|
ADCD,
|
||||||
|
NAME,
|
||||||
|
drp: 0,
|
||||||
|
cnt: 0,
|
||||||
|
av: 0,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
drpList?.forEach(o => {
|
||||||
|
const adcd = o?.adcd?.substr(0, 9);
|
||||||
|
if (resMap[adcd]) {
|
||||||
|
resMap[adcd].drp += o[areaDrpTmType] || 0;
|
||||||
|
resMap[adcd].cnt += 1;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const ret = Object.values(resMap);
|
||||||
|
ret.forEach(o => {
|
||||||
|
if (o.cnt) {
|
||||||
|
o.av = parseFloat((o.drp / o.cnt).toFixed(1));
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return Object.values(resMap);
|
||||||
|
}, [adcdList, drpList, areaDrpTmType]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PanelBox
|
||||||
|
style={style}
|
||||||
|
title="供水覆盖率"
|
||||||
|
color="blue"
|
||||||
|
>
|
||||||
|
<AreaDrpChart data={data} />
|
||||||
|
</PanelBox>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
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 { FormControl, FormGroup, InputLabel, 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 tableSkDrpField = useSelector(s => s.realview.tableSkDrpField);
|
||||||
|
|
||||||
|
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={tableSkDrpField}
|
||||||
|
onChange={(event) => dispath.realview.setTableSkDrpField(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.RealSkLayer}
|
||||||
|
color="primary"
|
||||||
|
edge="start"
|
||||||
|
onChange={(e) => dispath.map.setLayerVisible({ RealSkLayer: e.target.checked })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Typography variant="subtitle2">隐藏未超汛限水库图标注记</Typography>
|
||||||
|
<Switch
|
||||||
|
checked={!!layerSetting.skNormalLabelInvisible}
|
||||||
|
color="primary"
|
||||||
|
edge="start"
|
||||||
|
onChange={(e) => dispath.map.setLayerSetting({ skNormalLabelInvisible: e.target.checked })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</FormGroup>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
<div className="boxfoot"></div>
|
||||||
|
</Dialog>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Setting;
|
||||||
|
|
@ -0,0 +1,143 @@
|
||||||
|
import React, { useMemo, useState } from 'react';
|
||||||
|
import useRequest from '../../../../utils/useRequest';
|
||||||
|
import PanelBox from '../../components/PanelBox';
|
||||||
|
|
||||||
|
import HighlightOff from '@material-ui/icons/HighlightOff';
|
||||||
|
import { makeStyles } from '@material-ui/core/styles';
|
||||||
|
import Modal from '@material-ui/core/Modal';
|
||||||
|
import Backdrop from '@material-ui/core/Backdrop';
|
||||||
|
import Fade from '@material-ui/core/Fade';
|
||||||
|
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 { SkRealPromise } from '../../../../models/_/real';
|
||||||
|
import Setting from './Setting';
|
||||||
|
import appconsts from '../../../../models/appconsts';
|
||||||
|
import { renderDrp, renderSkArz, renderSkRz } from '../../../../utils/renutils';
|
||||||
|
import { InfoPopNames } from '../../InfoPops';
|
||||||
|
import config from '../../../../config';
|
||||||
|
|
||||||
|
import SkPicReal from '../../../Mgr/xqjs/SkPicReal';
|
||||||
|
|
||||||
|
const useStyles = makeStyles((theme) => ({
|
||||||
|
modal: {
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
width: "80%",
|
||||||
|
marginLeft: "10%",
|
||||||
|
},
|
||||||
|
paper: {
|
||||||
|
backgroundColor: theme.palette.background.paper,
|
||||||
|
border: '1px solid rgba(41, 182, 246, 0.4)',
|
||||||
|
boxShadow: theme.shadows[5],
|
||||||
|
padding: theme.spacing(2, 4, 3),
|
||||||
|
width: "100%",
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
function SkReal({ style }) {
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
const skAutoRefresh = useSelector(s => s.realview.skAutoRefresh);
|
||||||
|
const t = useRefresh(skAutoRefresh ? 60 * 1000 : 0);
|
||||||
|
let { data } = useRequest(SkRealPromise.get, t);
|
||||||
|
const sortedData = useMemo(() => (data || []).sort((a, b) => (b.aRz - a.aRz), [data]));
|
||||||
|
const [setting, showSetting] = useState(false);
|
||||||
|
const tableSkDrpField = useSelector(s => s.realview.tableSkDrpField);
|
||||||
|
|
||||||
|
data = data || [];
|
||||||
|
|
||||||
|
const flyTo = (record) => {
|
||||||
|
const { lgtd, lttd } = record;
|
||||||
|
if (lgtd && lttd) {
|
||||||
|
dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealSkPop, properties: record, coordinates: [lgtd, lttd] });
|
||||||
|
dispatch.runtime.setCameraTarget({
|
||||||
|
center: [lgtd, lttd + config.poiPositionOffsetY.sk],
|
||||||
|
zoom: config.poiPositionZoom.sk,
|
||||||
|
pitch: config.poiPitch,
|
||||||
|
bearing: 0,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const toggleAutoRefresh = () => {
|
||||||
|
dispatch.realview.setSkAutoRefresh(!skAutoRefresh);
|
||||||
|
}
|
||||||
|
|
||||||
|
const classes = useStyles();
|
||||||
|
const [open, setOpen] = React.useState(false);
|
||||||
|
|
||||||
|
const handleOpen = () => {
|
||||||
|
setOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClose = () => {
|
||||||
|
setOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PanelBox
|
||||||
|
style={style}
|
||||||
|
title="供水监控"
|
||||||
|
color="green"
|
||||||
|
>
|
||||||
|
<TableContainer style={{ height: '100%' }}>
|
||||||
|
<Table size="small" stickyHeader>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow>
|
||||||
|
<DpTableCell style={{ maxWidth: '20%' }} align="left">名称</DpTableCell>
|
||||||
|
<DpTableCell align="right">漏损区域</DpTableCell>
|
||||||
|
<DpTableCell align="right">漏损率</DpTableCell>
|
||||||
|
<DpTableCell align="right">报警时间</DpTableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{sortedData.map((row) => (
|
||||||
|
<DpTableRow key={row.stcd}>
|
||||||
|
<DpTableCell component="th" scope="row">
|
||||||
|
<div className="table-ellipsis cursor-pointer" onClick={() => flyTo(row)}>{row.stnm}</div>
|
||||||
|
</DpTableCell>
|
||||||
|
<DpTableCell align="right">{renderDrp(row, tableSkDrpField)}</DpTableCell>
|
||||||
|
<DpTableCell align="right">{renderSkRz(row)}</DpTableCell>
|
||||||
|
<DpTableCell align="right">{renderSkArz(row)}</DpTableCell>
|
||||||
|
</DpTableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
|
{
|
||||||
|
setting && <Setting onClose={() => showSetting(false)} />
|
||||||
|
}
|
||||||
|
|
||||||
|
{/*水库图片弹窗*/}
|
||||||
|
<Modal
|
||||||
|
aria-labelledby="transition-modal-title"
|
||||||
|
aria-describedby="transition-modal-description"
|
||||||
|
className={classes.modal}
|
||||||
|
open={open}
|
||||||
|
onClose={handleClose}
|
||||||
|
closeAfterTransition
|
||||||
|
BackdropComponent={Backdrop}
|
||||||
|
BackdropProps={{
|
||||||
|
timeout: 500,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Fade in={open}>
|
||||||
|
<div className={classes.paper}>
|
||||||
|
<HighlightOff style={{ color: "#fff", position: "absolute", right: "1rem", fontSize: "2rem", cursor: "pointer" }} onClick={handleClose} />
|
||||||
|
<SkPicReal />
|
||||||
|
</div>
|
||||||
|
</Fade>
|
||||||
|
</Modal>
|
||||||
|
</PanelBox>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default React.memo(SkReal);
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
import React, { useMemo, useState } from 'react';
|
||||||
|
import PanelBox from '../../components/PanelBox';
|
||||||
|
|
||||||
|
function DrpReal({ style }) {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PanelBox
|
||||||
|
style={style}
|
||||||
|
title="供水态势"
|
||||||
|
color="green"
|
||||||
|
>
|
||||||
|
<img src='/assets/gongshui.jpg' style={{width:'429.81px', height:'212px',marginLeft:'1px'}}/>
|
||||||
|
</PanelBox>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DrpReal;
|
||||||
|
|
@ -0,0 +1,208 @@
|
||||||
|
import React, { useMemo, useState } from 'react';
|
||||||
|
import echarts from 'echarts/lib/echarts';
|
||||||
|
import ReactEcharts from 'echarts-for-react';
|
||||||
|
import { hdyjColor } from '../../../../utils/renutils';
|
||||||
|
|
||||||
|
const Hd24H = ({ data, st}) => {
|
||||||
|
const option = useMemo(() => {
|
||||||
|
|
||||||
|
const serialData = [
|
||||||
|
[
|
||||||
|
"2025-05-21 15:00:00",
|
||||||
|
133.58
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"2025-05-21 17:00:00",
|
||||||
|
133.58
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"2025-05-21 18:00:00",
|
||||||
|
133.58
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"2025-05-21 19:00:00",
|
||||||
|
133.56
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"2025-05-21 20:00:00",
|
||||||
|
133.6
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"2025-05-21 21:00:00",
|
||||||
|
133.59
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"2025-05-21 22:00:00",
|
||||||
|
133.6
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"2025-05-22 02:00:00",
|
||||||
|
133.63
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"2025-05-22 03:00:00",
|
||||||
|
133.64
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"2025-05-22 04:00:00",
|
||||||
|
133.65
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"2025-05-22 05:00:00",
|
||||||
|
133.65
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"2025-05-22 06:00:00",
|
||||||
|
133.66
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"2025-05-22 07:00:00",
|
||||||
|
133.66
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"2025-05-22 09:00:00",
|
||||||
|
133.67
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"2025-05-22 11:00:00",
|
||||||
|
133.68
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"2025-05-22 12:00:00",
|
||||||
|
133.68
|
||||||
|
]
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
return {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
x: 24,
|
||||||
|
y: 24,
|
||||||
|
x2: 38,
|
||||||
|
y2: 32,
|
||||||
|
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: 133,
|
||||||
|
max: 134,
|
||||||
|
}
|
||||||
|
],
|
||||||
|
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, st]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ReactEcharts
|
||||||
|
option={option}
|
||||||
|
style={{ height: '100%', width: '100%', overflow: 'hidden' }}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default React.memo(Hd24H);
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
import React from 'react'
|
||||||
|
import { useDispatch, useSelector } from 'react-redux';
|
||||||
|
import { OverallPromise } from '../../../../models/_/real';
|
||||||
|
import moment from 'moment';
|
||||||
|
import { normalizeSearchTmRange } from '../../../../utils/tools';
|
||||||
|
import useRequest from '../../../../utils/useRequest';
|
||||||
|
import PanelBox from '../../components/PanelBox';
|
||||||
|
import Chart from './chart'
|
||||||
|
import useRefresh from '../../../../utils/useRefresh';
|
||||||
|
import { rzSearch } from '../../../../models/_/search';
|
||||||
|
import clsx from 'clsx';
|
||||||
|
|
||||||
|
|
||||||
|
export default function HD24H({ style }) {
|
||||||
|
|
||||||
|
const t = useRefresh(60 * 1000);
|
||||||
|
const activeRzSt = useSelector(s => s.overallview.activeRzSt);
|
||||||
|
const { data } = useRequest(OverallPromise.get, t);
|
||||||
|
const st = data?.crucialRz?.find(o => o.stcd === activeRzSt);
|
||||||
|
const { data: data24h } = useRequest(async () => {
|
||||||
|
if (!st) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
const tm = [moment().add(-24, 'hour'), moment()];
|
||||||
|
const resultTm = normalizeSearchTmRange(tm, 'h');
|
||||||
|
|
||||||
|
const ret = await rzSearch(st.type, st.stcd, 'h', resultTm) || [];
|
||||||
|
return ret;
|
||||||
|
}, st);
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PanelBox
|
||||||
|
style={style}
|
||||||
|
title="日供水量趋势"
|
||||||
|
color="green"
|
||||||
|
>
|
||||||
|
<Chart />
|
||||||
|
</PanelBox>
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue