feat(): 灌区图层修改
parent
80a6841322
commit
30b5d17673
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
|
|
@ -455,7 +455,7 @@ const map = {
|
|||
// dispatch.map.setLayerSetting({dom: true});
|
||||
map.setLayoutProperty('管网图', 'visibility', 'none');
|
||||
}
|
||||
if (id === 503) {
|
||||
if (id === 503 || id == 501 || id == 504 || id == 505 || id == 506 || id == 507) {
|
||||
dispatch.map.setLayerSetting({ dom: false });
|
||||
map.setLayoutProperty('灌区图', 'visibility', 'visible');
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -110,9 +110,9 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
|||
{ key: '设备故障统计',style: { height: '18rem'} },
|
||||
];
|
||||
}else if (view === 305) {
|
||||
left = [
|
||||
{ key: '供水量统计', style: { height: '30rem', flexGrow: 1 } },
|
||||
{ key: '取水量统计', style: { height: '40rem', flexGrow: 1 } },
|
||||
left = [
|
||||
{ key: '24h用水', style: { height: '50%', flexGrow: 1 } },
|
||||
{ key: '电耗统计', style: { height: '50%', flexGrow: 1 } },
|
||||
];
|
||||
leftFullHeight = true;
|
||||
}
|
||||
|
|
@ -126,9 +126,9 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
|||
}
|
||||
else if (view === 307) {
|
||||
left = [
|
||||
{ key: '预案库管理', style: { height: '40rem', flexGrow: 1 } },
|
||||
{ key: '预案库管理', style: { height: '50rem' } },
|
||||
];
|
||||
leftFullHeight = true;
|
||||
// leftFullHeight = true;
|
||||
}else if (view === 501) {
|
||||
left = [
|
||||
{ key: '天气'},
|
||||
|
|
@ -277,18 +277,25 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
|||
{ key: '电耗分析', style: { height: '19rem', flexGrow: 1 } },
|
||||
{ key: '药耗分析', style: { height: '21rem', flexGrow: 1 } },
|
||||
];
|
||||
}else if (view === 305) {
|
||||
right = [
|
||||
{ key: '电耗统计', style: { height: '100%', flexGrow: 1 } },
|
||||
} else if (view === 305) {
|
||||
right = [
|
||||
{ key: '供水量统计', style: { height: '30rem', flexGrow: 1 } },
|
||||
{ key: '取水量统计', style: { height: '40rem', flexGrow: 1 } },
|
||||
];
|
||||
|
||||
rightFullHeight = true;
|
||||
}
|
||||
else if (view === 306) {
|
||||
right = [
|
||||
{ key: '漏损排行榜', style: { height: '50%', flexGrow: 1 } },
|
||||
{ key: '最小流量', style: { height: '50%', flexGrow: 1 } },
|
||||
{ key: '漏损排行榜', style: { height: '40%', flexGrow: 1 } },
|
||||
{ key: '最小流量', style: { height: '60%', flexGrow: 1 } },
|
||||
];
|
||||
rightFullHeight = true;
|
||||
}else if(view === 307) {
|
||||
right = [
|
||||
{ key: '应急指挥调度', style: { height: '40rem'} },
|
||||
];
|
||||
// rightFullHeight = true;
|
||||
}
|
||||
else if (view === 501) {
|
||||
right = [
|
||||
|
|
|
|||
|
|
@ -72,16 +72,23 @@ const sources = {
|
|||
"gqmapImg": {
|
||||
'type': 'image',
|
||||
'url': `${hash}/assets/gqbg.png`,
|
||||
// 'coordinates': [
|
||||
// // 图片覆盖地图的四至点
|
||||
// [114.8510271999999929, 31.2068084090000987], // 左上
|
||||
|
||||
// [115.0357823634995805, 31.1568084090000987], // 右上
|
||||
|
||||
// [115.0707823634995805, 30.9913739500000008], // 右下
|
||||
|
||||
// [114.6660271999999929, 30.9913739500000008], // 左下
|
||||
// ],
|
||||
'coordinates': [
|
||||
// 图片覆盖地图的四至点
|
||||
[114.6710271999999929, 31.6068084090000987], // 左上
|
||||
[114.818962 , 31.291471], // 左上
|
||||
[115.027001, 31.231773], // 右上
|
||||
[115.0707823634995805, 30.9913739500000008], // 右下
|
||||
[114.687749, 30.963712], // 左下
|
||||
|
||||
[115.4557823634995805, 31.6068084090000987], // 右上
|
||||
|
||||
[115.4907823634995805, 30.8713739500000008], // 右下
|
||||
|
||||
[114.7460271999999929, 30.8613739500000008], // 左下
|
||||
],
|
||||
]
|
||||
},
|
||||
// 管网图
|
||||
"gwImg": {
|
||||
|
|
|
|||
|
|
@ -85,6 +85,8 @@ import Bjtj from './panels/Bjtj'
|
|||
import Szzddgxs from './panels/Szzddgxs'
|
||||
import Szzddjq from './panels/Szzddjq'
|
||||
import Gcxxzl from './panels/Gcxxzl'
|
||||
import Dhxs from './panels/Gwxs'
|
||||
import Yjdd from './panels/Yjdd'
|
||||
export default function PanelIndex({ name, style, ...params }) {
|
||||
if (name === '天气') {
|
||||
return (
|
||||
|
|
@ -250,6 +252,8 @@ export default function PanelIndex({ name, style, ...params }) {
|
|||
return <Afjk style={style} />
|
||||
} else if (name === '电耗分析') {
|
||||
return <Dhfx style={style} />
|
||||
} else if (name === '24h用水') {
|
||||
return <Dhxs style={style} />
|
||||
} else if (name === '药耗分析') {
|
||||
return <Yhfx style={style} />
|
||||
} else if (name === '报警统计') {
|
||||
|
|
@ -259,6 +263,8 @@ export default function PanelIndex({ name, style, ...params }) {
|
|||
}
|
||||
else if (name === '信息总览') {
|
||||
return <Gcxxzl style={style} />
|
||||
}else if (name === '应急指挥调度') {
|
||||
return <Yjdd style={style} />
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ import { renderHDRz } from '../../../../utils/renutils';
|
|||
import Setting from './Setting';
|
||||
import { InfoPopNames } from '../../InfoPops';
|
||||
import config from '../../../../config';
|
||||
import { Switch, FormControlLabel,InputLabel, Select, MenuItem,FormControl } from '@material-ui/core/index'
|
||||
import { Switch, FormControlLabel, InputLabel, Select, MenuItem, FormControl } from '@material-ui/core/index'
|
||||
import { styled } from '@material-ui/styles';
|
||||
|
||||
function HDReal({ style }) {
|
||||
|
|
@ -81,28 +81,42 @@ function HDReal({ style }) {
|
|||
}
|
||||
|
||||
const CustomSwitch = styled(Switch)({
|
||||
'& .MuiSwitch-switchBase': {
|
||||
color: '#fff',
|
||||
'&.Mui-checked': {
|
||||
color: '#1890ff',
|
||||
'& + .MuiSwitch-track': {
|
||||
backgroundColor: '#1890ff',
|
||||
opacity: 0.5,
|
||||
'& .MuiSwitch-switchBase': {
|
||||
color: '#fff',
|
||||
'&.Mui-checked': {
|
||||
color: '#1890ff',
|
||||
'& + .MuiSwitch-track': {
|
||||
backgroundColor: '#1890ff',
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
'& .MuiSwitch-track': {
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.3)',
|
||||
},
|
||||
});
|
||||
'& .MuiSwitch-track': {
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.3)',
|
||||
},
|
||||
});
|
||||
|
||||
const StyledFormControlLabel = styled(FormControlLabel)({
|
||||
'& .MuiFormControlLabel-label': {
|
||||
color: '#fff'
|
||||
const StyledFormControlLabel = styled(FormControlLabel)({
|
||||
'& .MuiFormControlLabel-label': {
|
||||
color: '#fff'
|
||||
}
|
||||
});
|
||||
const [dimension, setDimension] = useState('fqh');
|
||||
|
||||
const switchChange = (e) => {
|
||||
const val = e.target.checked
|
||||
setChecked(val)
|
||||
if (val) {
|
||||
dispatch.runtime.setCameraTarget({
|
||||
center: [114.81944, 31.12068],
|
||||
zoom: 13,
|
||||
pitch: 60,
|
||||
});
|
||||
} else {
|
||||
dispatch.runtime.setHome();
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
const [dimension, setDimension] =useState('fqh');
|
||||
|
||||
|
||||
return (
|
||||
<PanelBox
|
||||
|
|
@ -152,54 +166,54 @@ const StyledFormControlLabel = styled(FormControlLabel)({
|
|||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
|
||||
</TableContainer>
|
||||
{
|
||||
setting && <Setting onClose={() => showSetting(false)} />
|
||||
}
|
||||
<div style={{ position: 'absolute',color:'#fff',top:70,left:-280,display:'flex',alignItems:'center' }}>
|
||||
|
||||
<StyledFormControlLabel
|
||||
control={
|
||||
<CustomSwitch
|
||||
<div style={{ position: 'absolute', color: '#fff', top: 70, left: -280, display: 'flex', alignItems: 'center' }}>
|
||||
|
||||
<StyledFormControlLabel
|
||||
control={
|
||||
<CustomSwitch
|
||||
checked={checked}
|
||||
onChange={(e) => setChecked(e.target.checked)}
|
||||
onChange={switchChange}
|
||||
/>
|
||||
}
|
||||
label="多灌区模式"
|
||||
/>
|
||||
}
|
||||
label="多灌区模式"
|
||||
/>
|
||||
{checked &&<div style={{marginTop:"-15px"}}>
|
||||
{checked && <div style={{ marginTop: "-15px" }}>
|
||||
<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);
|
||||
}}
|
||||
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="fqh">浮桥河灌区</MenuItem>
|
||||
<MenuItem value="shk">三河口水库灌区</MenuItem>
|
||||
<MenuItem value="qjs">群建水库灌区</MenuItem>
|
||||
<MenuItem value="dsb">大石板灌区</MenuItem>
|
||||
</Select>
|
||||
<InputLabel id="analysis-select-label"></InputLabel>
|
||||
<Select
|
||||
labelId="analysis-select-label"
|
||||
value={dimension}
|
||||
label=""
|
||||
onChange={(event) => {
|
||||
const value = event.target.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="fqh">浮桥河灌区</MenuItem>
|
||||
<MenuItem value="shk">三河口水库灌区</MenuItem>
|
||||
<MenuItem value="qjs">群建水库灌区</MenuItem>
|
||||
<MenuItem value="dsb">大石板灌区</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>}
|
||||
</div>
|
||||
</div>
|
||||
</PanelBox>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -130,8 +130,8 @@ function HDReal({ style }) {
|
|||
<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="center" style={{ width: '20%' }}>流量(m³/h)</DpTableCell>
|
||||
<DpTableCell align="center" style={{ width: '30%' }}>水质合格率(%)</DpTableCell>
|
||||
{/* <DpTableCell align="right">警戒水位</DpTableCell> */}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
|
|
|
|||
|
|
@ -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,286 @@
|
|||
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'
|
||||
import ReactEcharts from 'echarts-for-react';
|
||||
|
||||
import { Switch, FormControlLabel,InputLabel, Select, MenuItem,FormControl } from '@material-ui/core/index'
|
||||
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 [dimension, setDimension] =useState('ft');
|
||||
|
||||
// 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 = [
|
||||
{ town: '宋埠镇', waterUsage: 440, supplyCapacity: 380 },
|
||||
{ town: '龟山镇', waterUsage: 430, supplyCapacity: 380 },
|
||||
{ town: '黄土岗镇', waterUsage: 320, supplyCapacity: 300 },
|
||||
{ town: '白果镇', waterUsage: 310, supplyCapacity: 300 },
|
||||
{ town: '福田河镇', waterUsage: 380, supplyCapacity: 480 },
|
||||
{ town: '张家畈镇', waterUsage: 380, supplyCapacity: 460 },
|
||||
{ town: '乘马岗镇', waterUsage: 280, supplyCapacity: 340 },
|
||||
{ town: '木子店镇', waterUsage: 370, supplyCapacity: 450 },
|
||||
{ town: '盐田河镇', waterUsage: 360, supplyCapacity: 430 }
|
||||
];
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['未来24小时用水', '供水能力'],
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
top: 10
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: data.map(item => item.town),
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '水量 (吨/小时)',
|
||||
nameTextStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '未来24小时用水',
|
||||
type: 'bar',
|
||||
barWidth: '20%',
|
||||
data: data.map(item => item.waterUsage),
|
||||
itemStyle: {
|
||||
color: '#87CEEB'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '供水能力',
|
||||
type: 'bar',
|
||||
barWidth: '20%',
|
||||
data: data.map(item => item.supplyCapacity),
|
||||
itemStyle: {
|
||||
color: '#0066CC'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
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="未来24小时用水"
|
||||
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 style={{display:'flex',columnGap:10}}>
|
||||
<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>
|
||||
<div style={{marginBottom:10}}>
|
||||
<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);
|
||||
}}
|
||||
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="ft">时间序列</MenuItem>
|
||||
<MenuItem value="lc">回归分析</MenuItem>
|
||||
<MenuItem value="mz">机器学习</MenuItem>
|
||||
<MenuItem value="sb">混合模型</MenuItem>
|
||||
<MenuItem value="htg">深度学习</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
</div>
|
||||
<ReactEcharts
|
||||
option={option}
|
||||
style={{ height: '100%', width: '100%' }}
|
||||
/>
|
||||
{
|
||||
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;
|
||||
}
|
||||
|
|
@ -20,7 +20,8 @@ import config from '../../../../config';
|
|||
import moment from 'moment';
|
||||
import showData from './constant'
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
|
||||
import {TextField} from '@material-ui/core/index';
|
||||
import { styled } from '@material-ui/styles';
|
||||
function rzRender(rz, base) {
|
||||
return (
|
||||
<DpTableCell align="right" style={{ color: rz >= base ? 'red' : '#fff' }}>
|
||||
|
|
@ -30,6 +31,37 @@ function rzRender(rz, base) {
|
|||
}
|
||||
|
||||
function HDReal({ style }) {
|
||||
const StyledTextField = styled(TextField)({
|
||||
'& .MuiOutlinedInput-root': {
|
||||
'& fieldset': {
|
||||
borderColor: 'rgba(255, 255, 255, 0.23)',
|
||||
},
|
||||
'&:hover fieldset': {
|
||||
borderColor: 'rgba(255, 255, 255, 0.5)',
|
||||
},
|
||||
'&.Mui-focused fieldset': {
|
||||
borderColor: '#1976d2',
|
||||
},
|
||||
},
|
||||
'& .MuiInputLabel-root': {
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
'&.Mui-focused': {
|
||||
color: '#1976d2',
|
||||
},
|
||||
},
|
||||
'& .MuiInputBase-input': {
|
||||
color: '#fff',
|
||||
},
|
||||
});
|
||||
const CustomTextField = (props) => {
|
||||
return (
|
||||
<StyledTextField
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
};
|
||||
const dispatch = useDispatch();
|
||||
const tableRzFilter = useSelector(s => s.realview.tableRzFilter);
|
||||
const hdAutoRefresh = useSelector(s => s.realview.hdAutoRefresh);
|
||||
|
|
@ -193,6 +225,12 @@ const option = {
|
|||
</>
|
||||
}
|
||||
>
|
||||
<div style={{width:'80%',margin:'10px'}}>
|
||||
<CustomTextField
|
||||
label="DMA分区查询"
|
||||
onChange={(e) => console.log(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<ReactECharts
|
||||
option={option}
|
||||
style={{ height: '400px', width: '100%' }}
|
||||
|
|
|
|||
|
|
@ -107,7 +107,20 @@ function HDReal({ style }) {
|
|||
dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
|
||||
}
|
||||
|
||||
const switchChange = (e) => {
|
||||
const val = e.target.checked
|
||||
setChecked(val)
|
||||
if (val) {
|
||||
dispatch.runtime.setCameraTarget({
|
||||
center: [114.81944, 31.12068],
|
||||
zoom: 13,
|
||||
pitch: 60,
|
||||
});
|
||||
} else {
|
||||
dispatch.runtime.setHome();
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<PanelBox
|
||||
|
|
@ -153,7 +166,7 @@ function HDReal({ style }) {
|
|||
control={
|
||||
<CustomSwitch
|
||||
checked={checked}
|
||||
onChange={(e) => setChecked(e.target.checked)}
|
||||
onChange={switchChange}
|
||||
/>
|
||||
}
|
||||
label="多灌区模式"
|
||||
|
|
|
|||
|
|
@ -109,6 +109,21 @@ function HDReal({ style }) {
|
|||
const toggleAutoRefresh = () => {
|
||||
dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
|
||||
}
|
||||
const switchChange = (e) => {
|
||||
const val = e.target.checked
|
||||
setChecked(val)
|
||||
if (val) {
|
||||
dispatch.runtime.setCameraTarget({
|
||||
center: [114.81944, 31.12068],
|
||||
zoom: 13,
|
||||
pitch: 60,
|
||||
});
|
||||
} else {
|
||||
dispatch.runtime.setHome();
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
const [params, setParams] = useState({ tm: [] })
|
||||
|
||||
const searchTm = (e) => {
|
||||
|
|
@ -212,7 +227,7 @@ function HDReal({ style }) {
|
|||
control={
|
||||
<CustomSwitch
|
||||
checked={checked}
|
||||
onChange={(e) => setChecked(e.target.checked)}
|
||||
onChange={switchChange}
|
||||
/>
|
||||
}
|
||||
label="多灌区模式"
|
||||
|
|
|
|||
|
|
@ -4,9 +4,11 @@ import MiniSinglePie from './MiniSinglePie'
|
|||
import clsx from 'clsx';
|
||||
import { Switch, FormControlLabel,InputLabel, Select, MenuItem,FormControl } from '@material-ui/core/index'
|
||||
import { styled } from '@material-ui/styles';
|
||||
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
|
||||
export default function GQ({ style }) {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const v1 = 20;
|
||||
const v2 = 32;
|
||||
const r = (v1 * 100 / v2).toFixed(1);
|
||||
|
|
@ -38,7 +40,20 @@ export default function GQ({ style }) {
|
|||
});
|
||||
const [dimension, setDimension] = useState('fqh');
|
||||
const [checked, setChecked] = React.useState(false);
|
||||
|
||||
const switchChange = (e) => {
|
||||
const val = e.target.checked
|
||||
setChecked(val)
|
||||
if (val) {
|
||||
dispatch.runtime.setCameraTarget({
|
||||
center: [114.81944, 31.12068],
|
||||
zoom: 13,
|
||||
pitch: 60,
|
||||
});
|
||||
} else {
|
||||
dispatch.runtime.setHome();
|
||||
|
||||
}
|
||||
}
|
||||
return (
|
||||
<PanelBox
|
||||
style={style}
|
||||
|
|
@ -97,7 +112,7 @@ export default function GQ({ style }) {
|
|||
control={
|
||||
<CustomSwitch
|
||||
checked={checked}
|
||||
onChange={(e) => setChecked(e.target.checked)}
|
||||
onChange={switchChange}
|
||||
/>
|
||||
}
|
||||
label="多灌区模式"
|
||||
|
|
|
|||
|
|
@ -5,7 +5,10 @@ import PanelBox from '../../components/PanelBox';
|
|||
import OverallContent from './OverallContent';
|
||||
import { Switch, FormControlLabel,InputLabel, Select, MenuItem,FormControl } from '@material-ui/core/index'
|
||||
import { styled } from '@material-ui/styles';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
|
||||
export default function Overall({ style }) {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const { data } = useRequest(OverallPromise.get);
|
||||
const CustomSwitch = styled(Switch)({
|
||||
|
|
@ -30,7 +33,21 @@ export default function Overall({ style }) {
|
|||
}
|
||||
});
|
||||
const [dimension, setDimension] = useState('fqh');
|
||||
const [checked, setChecked] = React.useState(false);
|
||||
const [checked, setChecked] = React.useState(false);
|
||||
const switchChange = (e) => {
|
||||
const val = e.target.checked
|
||||
setChecked(val)
|
||||
if (val) {
|
||||
dispatch.runtime.setCameraTarget({
|
||||
center: [114.81944, 31.12068],
|
||||
zoom: 13,
|
||||
pitch: 60,
|
||||
});
|
||||
} else {
|
||||
dispatch.runtime.setHome();
|
||||
|
||||
}
|
||||
}
|
||||
return (
|
||||
<PanelBox
|
||||
style={style}
|
||||
|
|
@ -44,7 +61,7 @@ export default function Overall({ style }) {
|
|||
control={
|
||||
<CustomSwitch
|
||||
checked={checked}
|
||||
onChange={(e) => setChecked(e.target.checked)}
|
||||
onChange={switchChange}
|
||||
/>
|
||||
}
|
||||
label="多灌区模式"
|
||||
|
|
|
|||
|
|
@ -1937,10 +1937,189 @@ const data4 = [
|
|||
}
|
||||
]
|
||||
|
||||
const data5 = [
|
||||
{
|
||||
"id": 125973,
|
||||
"reviewStatus": "2",
|
||||
"createTime": "2025-05-03 21:25:23",
|
||||
"updateId": "187",
|
||||
"updateName": "麻城市",
|
||||
"updateTime": "2025-05-15 16:09:53",
|
||||
"del": "0",
|
||||
"planId": "421181000000000",
|
||||
"planName": "黄土岗镇干旱天气供水应急调度与推演预案",
|
||||
"levels": "2",
|
||||
"year": "2025",
|
||||
"adnm": "麻城市",
|
||||
"adcd": "421181000000000",
|
||||
"attachUpdateTime": "2025-05-15 16:09:53",
|
||||
"status": 0,
|
||||
"uploadAttachStatus": "1",
|
||||
"padNm": "421181000000000",
|
||||
"url": "dplan/2025/421181000000000/麻城市山洪灾害防御预案.pdf"
|
||||
},
|
||||
{
|
||||
"id": 125974,
|
||||
"reviewStatus": "2",
|
||||
"createTime": "2025-05-03 21:25:23",
|
||||
"updateId": "187",
|
||||
"updateName": "麻城市",
|
||||
"updateTime": "2025-05-15 10:01:56",
|
||||
"del": "0",
|
||||
"planId": "421181001000000",
|
||||
"planName": "宋埠镇洪涝天气水厂防淹应急调度与推演预案",
|
||||
"levels": "1",
|
||||
"year": "2025",
|
||||
"adnm": "龙池桥街道",
|
||||
"adcd": "421181001000000",
|
||||
"attachUpdateTime": "2025-05-15 10:01:55",
|
||||
"status": 0,
|
||||
"uploadAttachStatus": "1",
|
||||
"padNm": "421181001000000",
|
||||
"url": "dplan/2025/421181001000000/龙池桥街道山洪灾害防御预案.pdf"
|
||||
},
|
||||
{
|
||||
"id": 125975,
|
||||
"reviewStatus": "2",
|
||||
"createTime": "2025-05-03 21:25:23",
|
||||
"updateId": "187",
|
||||
"updateName": "麻城市",
|
||||
"updateTime": "2025-05-15 15:35:33",
|
||||
"del": "0",
|
||||
"planId": "421181001001000",
|
||||
"planName": "木子店镇水质污染应急切换水源与推演预案",
|
||||
"levels": "0",
|
||||
"year": "2025",
|
||||
"adnm": "园林社区居民委员会",
|
||||
"adcd": "421181001001000",
|
||||
"attachUpdateTime": "2025-05-15 15:35:33",
|
||||
"status": 0,
|
||||
"uploadAttachStatus": "1",
|
||||
"padNm": "421181001001000",
|
||||
"url": "dplan/2025/421181001001000/园林社区居民委员会山洪灾害防御预案.pdf"
|
||||
},
|
||||
{
|
||||
"id": 125975,
|
||||
"reviewStatus": "2",
|
||||
"createTime": "2025-05-03 21:25:23",
|
||||
"updateId": "187",
|
||||
"updateName": "麻城市",
|
||||
"updateTime": "2025-05-15 15:35:33",
|
||||
"del": "0",
|
||||
"planId": "421181001001000",
|
||||
"planName": "龙池桥镇水质污染应急切换水源与推演预案",
|
||||
"levels": "0",
|
||||
"year": "2025",
|
||||
"adnm": "园林社区居民委员会",
|
||||
"adcd": "421181001001000",
|
||||
"attachUpdateTime": "2025-05-15 15:35:33",
|
||||
"status": 0,
|
||||
"uploadAttachStatus": "1",
|
||||
"padNm": "421181001001000",
|
||||
"url": "dplan/2025/421181001001000/园林社区居民委员会山洪灾害防御预案.pdf"
|
||||
}, {
|
||||
"id": 125975,
|
||||
"reviewStatus": "2",
|
||||
"createTime": "2025-05-03 21:25:23",
|
||||
"updateId": "187",
|
||||
"updateName": "麻城市",
|
||||
"updateTime": "2025-05-15 15:35:33",
|
||||
"del": "0",
|
||||
"planId": "421181001001000",
|
||||
"planName": "福田镇水质污染应急切换水源与推演预案",
|
||||
"levels": "0",
|
||||
"year": "2025",
|
||||
"adnm": "园林社区居民委员会",
|
||||
"adcd": "421181001001000",
|
||||
"attachUpdateTime": "2025-05-15 15:35:33",
|
||||
"status": 0,
|
||||
"uploadAttachStatus": "1",
|
||||
"padNm": "421181001001000",
|
||||
"url": "dplan/2025/421181001001000/园林社区居民委员会山洪灾害防御预案.pdf"
|
||||
},
|
||||
]
|
||||
const country =['中馆驿镇', '宋埠镇', '歧亭镇', '白果镇', '夫子河镇', '阎家河镇', '龟山镇', '盐田河镇', '张家畈镇', '木子店镇', '三河口镇', '黄土岗镇', '福田河镇', '乘马岗镇', '顺河镇'];
|
||||
const ghData = Array(13).fill(0).map((item,i) => (
|
||||
{
|
||||
"id": 125973,
|
||||
"reviewStatus": "2",
|
||||
"createTime": "2025-05-03 21:25:23",
|
||||
"updateId": "187",
|
||||
"updateName": "麻城市",
|
||||
"updateTime": "2025-05-15 16:09:53",
|
||||
"del": "0",
|
||||
"planId": "421181000000000",
|
||||
"planName": `${country[i]}干旱天气供水应急调度与推演预案`,
|
||||
"levels": "2",
|
||||
"year": "2025",
|
||||
"adnm": "麻城市",
|
||||
"adcd": "421181000000000",
|
||||
"attachUpdateTime": "2025-05-15 16:09:53",
|
||||
"status": 0,
|
||||
"uploadAttachStatus": "1",
|
||||
"padNm": "421181000000000",
|
||||
"url": "dplan/2025/421181000000000/麻城市山洪灾害防御预案.pdf"
|
||||
}
|
||||
))
|
||||
|
||||
const hlData = Array(13).fill(0).map((item,i) => (
|
||||
{
|
||||
"id": 125973,
|
||||
"reviewStatus": "2",
|
||||
"createTime": "2025-05-03 21:25:23",
|
||||
"updateId": "187",
|
||||
"updateName": "麻城市",
|
||||
"updateTime": "2025-05-15 16:09:53",
|
||||
"del": "0",
|
||||
"planId": "421181000000000",
|
||||
"planName": `${country[i]}洪涝天气水厂防淹应急调度与推演预案`,
|
||||
"levels": "2",
|
||||
"year": "2025",
|
||||
"adnm": "麻城市",
|
||||
"adcd": "421181000000000",
|
||||
"attachUpdateTime": "2025-05-15 16:09:53",
|
||||
"status": 0,
|
||||
"uploadAttachStatus": "1",
|
||||
"padNm": "421181000000000",
|
||||
"url": "dplan/2025/421181000000000/麻城市山洪灾害防御预案.pdf"
|
||||
}
|
||||
))
|
||||
const szData = Array(13).fill(0).map((item,i) => (
|
||||
{
|
||||
"id": 125973,
|
||||
"reviewStatus": "2",
|
||||
"createTime": "2025-05-03 21:25:23",
|
||||
"updateId": "187",
|
||||
"updateName": "麻城市",
|
||||
"updateTime": "2025-05-15 16:09:53",
|
||||
"del": "0",
|
||||
"planId": "421181000000000",
|
||||
"planName": `${country[i]}水质污染应急切换水源与推演预案`,
|
||||
"levels": "2",
|
||||
"year": "2025",
|
||||
"adnm": "麻城市",
|
||||
"adcd": "421181000000000",
|
||||
"attachUpdateTime": "2025-05-15 16:09:53",
|
||||
"status": 0,
|
||||
"uploadAttachStatus": "1",
|
||||
"padNm": "421181000000000",
|
||||
"url": "dplan/2025/421181000000000/麻城市山洪灾害防御预案.pdf"
|
||||
}
|
||||
))
|
||||
function DrpReal({ style }) {
|
||||
const [tab,setTab] = useState('1')
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const rep = useMemo(() => {
|
||||
if (tab == 1) {
|
||||
return ghData;
|
||||
} else if (tab == 2) {
|
||||
return hlData
|
||||
} else if (tab == 3) {
|
||||
return szData
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
},[tab])
|
||||
return (
|
||||
<PanelBox
|
||||
style={style}
|
||||
|
|
@ -1966,7 +2145,7 @@ function DrpReal({ style }) {
|
|||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{data4.map((row,index) => (
|
||||
{rep.map((row,index) => (
|
||||
<DpTableRow key={row.stcd}>
|
||||
<DpTableCell align="center">{index+1}</DpTableCell>
|
||||
<DpTableCell component="th" scope="row">
|
||||
|
|
|
|||
|
|
@ -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
|
|
@ -72,7 +72,20 @@ const [yyValue, setYyValue] = React.useState(false);
|
|||
useEffect(() => {
|
||||
setValue(res.yy)
|
||||
}, [res])
|
||||
|
||||
const switchChange = (e) => {
|
||||
const val = e.target.checked
|
||||
setChecked(val)
|
||||
if (val) {
|
||||
dispatch.runtime.setCameraTarget({
|
||||
center: [114.81944, 31.12068],
|
||||
zoom: 13,
|
||||
pitch: 60,
|
||||
});
|
||||
} else {
|
||||
dispatch.runtime.setHome();
|
||||
|
||||
}
|
||||
}
|
||||
return (
|
||||
<PanelBox
|
||||
style={{...style,position:'relative'}}
|
||||
|
|
@ -113,7 +126,7 @@ const [yyValue, setYyValue] = React.useState(false);
|
|||
control={
|
||||
<CustomSwitch
|
||||
checked={checked}
|
||||
onChange={(e) => setChecked(e.target.checked)}
|
||||
onChange={switchChange}
|
||||
/>
|
||||
}
|
||||
label="多灌区模式"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useMemo, useState,useEffect } from 'react';
|
||||
import React, { useMemo, useState, useEffect } from 'react';
|
||||
import useRequest from '../../../../utils/useRequest';
|
||||
import PanelBox from '../../components/PanelBox';
|
||||
|
||||
|
|
@ -55,12 +55,12 @@ function HDReal({ style }) {
|
|||
// return ret;
|
||||
// }, [data, tableRzFilter]);
|
||||
|
||||
const showData = Array(1).fill(0).map((o,i) => ({
|
||||
const showData = Array(1).fill(0).map((o, i) => ({
|
||||
date: '2025-05-26',
|
||||
event: '侵占河道',
|
||||
type: '侵占河道',
|
||||
status: '待处理',
|
||||
place:'浮桥河灌区'
|
||||
place: '浮桥河灌区'
|
||||
}))
|
||||
|
||||
const flyTo = (record) => {
|
||||
|
|
@ -76,7 +76,7 @@ function HDReal({ style }) {
|
|||
}
|
||||
|
||||
|
||||
const data = [
|
||||
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 },
|
||||
|
|
@ -97,28 +97,28 @@ function HDReal({ style }) {
|
|||
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)
|
||||
|
||||
}, [])
|
||||
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}
|
||||
|
|
@ -137,27 +137,27 @@ function HDReal({ style }) {
|
|||
</>
|
||||
}
|
||||
>
|
||||
<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' }}>
|
||||
<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 >
|
||||
|
|
@ -188,6 +188,7 @@ function HDReal({ style }) {
|
|||
{
|
||||
setting && <Setting onClose={() => showSetting(false)} />
|
||||
}
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/tl.png`} alt="" style={{position:'absolute',width:130,height:220,left:-200,top:670}}/>
|
||||
</PanelBox>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue