合并代码
commit
9b0f02e934
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 135 KiB |
|
|
@ -16,7 +16,22 @@ export async function hdyjUnclose() {
|
|||
item.real = record;
|
||||
});
|
||||
|
||||
return ret;
|
||||
// return ret;
|
||||
return [{
|
||||
"stcd": "61612900",
|
||||
"stnm": "阎家河",
|
||||
"adcd": null,
|
||||
"wscd": null,
|
||||
"importancy": 0,
|
||||
"lgtd": 115.128722,
|
||||
"lttd": 31.207,
|
||||
"elev": null,
|
||||
"hasRz": true,
|
||||
"type": "sw",
|
||||
"tm": "2025-06-03T02:00:00.000Z",
|
||||
"rz": 61.75,
|
||||
"state": 1
|
||||
}]
|
||||
}
|
||||
|
||||
export async function hdyjLatestClosed() {
|
||||
|
|
|
|||
|
|
@ -24,6 +24,25 @@ export const DrpRealPromise = new CachePromise(
|
|||
|
||||
() => fetch(`${process.env.PUBLIC_URL}/data/drpReal.json`)
|
||||
.then((response) => response.json())
|
||||
.then(data=>{
|
||||
const list = data.map((item)=>{
|
||||
const obj = {...item}
|
||||
const num = item.lgtd.toString()||'0.000';
|
||||
const num2 = Number(num.slice(num.length-1,num.length))
|
||||
obj.h1 = item.h1+num2
|
||||
obj.h3 = item.h3+num2*1.2
|
||||
obj.h6 = item.h6+num2*1.5
|
||||
obj.h12 = item.h12+num2*1.6
|
||||
obj.h24 = item.h24+num2*1.8
|
||||
obj.h48 = item.h48+num2*1.9
|
||||
// if(obj.h1===9){
|
||||
// cs = obj.h1
|
||||
// }
|
||||
return obj
|
||||
})
|
||||
return list
|
||||
}
|
||||
)
|
||||
.catch(() => null),
|
||||
5000
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { parseGeoJSONFeature } from "../../utils/tools";
|
||||
import { DCPJ_TYPES, SLGC_TYPES } from "../../views/Home/consts";
|
||||
|
||||
import { parseGeoJSON } from "../../utils/tools";
|
||||
function initState() {
|
||||
return {
|
||||
calculating: false,
|
||||
|
|
@ -148,7 +148,7 @@ const map = {
|
|||
setView(id) {
|
||||
let layerVisible = {};
|
||||
const map = window.__mapref
|
||||
if (id === 0 || id === 1 || id == 503) {
|
||||
if (id === 1 || id == 503) {
|
||||
layerVisible = {
|
||||
RealDrpLayer: true,
|
||||
RealHDLayer: true,
|
||||
|
|
@ -164,12 +164,15 @@ const map = {
|
|||
} else if (id === 0) {
|
||||
layerVisible = {
|
||||
RealDrpLayer: true,
|
||||
RealHDLayer: true,
|
||||
RealSkLayer: true,
|
||||
PicStLayer: true,
|
||||
RealHDLayer: false,
|
||||
RealSkLayer: false,
|
||||
PicStLayer: false,
|
||||
RivlLayer: true,
|
||||
YuwaiLayer: true,
|
||||
YuwaiLayer: false,
|
||||
AdcdLayer: true,
|
||||
WataLayer: false,
|
||||
RealSkLayerQ2:true,
|
||||
RealHDLayerQ2:true,
|
||||
}
|
||||
Object.keys(DCPJ_TYPES).forEach(key => {
|
||||
layerVisible['Dcpj_' + key + 'Layer'] = false;
|
||||
|
|
@ -226,6 +229,21 @@ const map = {
|
|||
Object.keys(DCPJ_TYPES).forEach(key => {
|
||||
layerVisible['Dcpj_' + key + 'Layer'] = false;
|
||||
});
|
||||
} else if (id === 7) {
|
||||
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;
|
||||
});
|
||||
} else if (id === 201) {
|
||||
layerVisible = {
|
||||
RealDrpLayer: true,
|
||||
|
|
@ -442,6 +460,14 @@ const map = {
|
|||
dispatch.runtime.setFeaturePop(null);
|
||||
|
||||
|
||||
if (id === 0){
|
||||
dispatch.rcview.showRealContour('h1')
|
||||
}else{
|
||||
dispatch.runtime.setLayerSetting({ contour: null, dem: undefined });
|
||||
dispatch.runtime.setLayerSetting({ planeArea: null });
|
||||
dispatch.map.setLayerVisible({ ContourLayer: false });
|
||||
}
|
||||
|
||||
if (id === 201 || id === 205) {
|
||||
dispatch.map.setLayerSetting({ dom: false });
|
||||
map.setLayoutProperty('热力图', 'visibility', 'visible');
|
||||
|
|
|
|||
|
|
@ -52,6 +52,12 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
|||
{ key: '病险水库综述', style: { flexShink: 0 } },
|
||||
{ key: '降雨分析', style: { flexShink: 0 } },
|
||||
];
|
||||
} else if (view === 7) {
|
||||
left = [
|
||||
// { key: '天气' },
|
||||
{ key: '预报调度', style: { height: '20rem', flexGrow: 1 } },
|
||||
];
|
||||
leftFullHeight = true
|
||||
}
|
||||
else if (view === 201) {
|
||||
left = [
|
||||
|
|
@ -92,6 +98,12 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
|||
{ key: '水库管理', style: { height: '40rem', flexGrow: 1 } },
|
||||
];
|
||||
leftFullHeight = true;
|
||||
} else if (view === 207) {
|
||||
left = [
|
||||
{ key: '天气' },
|
||||
{ key: '水库总览', style: { height: '24rem', flexGrow: 1 } },
|
||||
{ key: '水库列表', style: { height: '24rem', flexGrow: 1 } },
|
||||
];
|
||||
} else if (view === 301) {
|
||||
left = [
|
||||
{ key: '天气' },
|
||||
|
|
@ -232,7 +244,9 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
|||
} else if (view === 5) {
|
||||
right = [
|
||||
{ key: '警报' },
|
||||
{ key: '气象预警综述' },
|
||||
// { key: '气象预警综述' },
|
||||
{ key: '河流重要断面预报', style: { height: '40%', flexGrow: 1 } },
|
||||
{ key: '重要水库预报', style: { height: '18rem', flexGrow: 1 } },
|
||||
];
|
||||
} else if (view === 6) {
|
||||
right = [
|
||||
|
|
@ -243,6 +257,14 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
|||
|
||||
];
|
||||
rightFullHeight=true
|
||||
} else if (view === 7) {
|
||||
right = [
|
||||
{ key: '预报成果', style: { height: '10rem', flexGrow: 1 } },
|
||||
{ key: '预警成果', style: { height: '14rem' } },
|
||||
{ key: '调度成果', style: { height: '15rem', flexGrow: 1 } },
|
||||
{ key: '方案对比', style: { height: '15.5rem' } },
|
||||
];
|
||||
rightFullHeight=true
|
||||
} else if (view === 201) {
|
||||
right = [
|
||||
{ key: '警报' },
|
||||
|
|
@ -269,6 +291,12 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
|||
right = [
|
||||
{ key: '警报' },
|
||||
];
|
||||
} else if (view === 207) {
|
||||
right = [
|
||||
{ key: '警报' },
|
||||
{ key: '关联站点',style: { height: '18rem', flexGrow: 1 } },
|
||||
|
||||
];
|
||||
} else if (view === 301) {
|
||||
right = [
|
||||
// { key: '警报' },
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
import React from 'react';
|
||||
import DpTab from '../../../../layouts/mui/DpTab';
|
||||
import Dialog from '@material-ui/core/Dialog';
|
||||
import DialogContent from '@material-ui/core/DialogContent';
|
||||
import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
|
||||
import DpTabs from '../../../../layouts/mui/DpTabs';
|
||||
import DpAppBar from '../../../../layouts/mui/DpAppBar';
|
||||
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
|
||||
import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
|
||||
|
||||
function HDStDlg({ record, onClose }) {
|
||||
const [value, setValue] = React.useState(0);
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={true}
|
||||
onClose={onClose}
|
||||
maxWidth="xl"
|
||||
style={{ borderRadius: 0 }}
|
||||
PaperComponent={DpPaperComponent}
|
||||
BackdropComponent={DpBackgroundDrop}
|
||||
>
|
||||
<div className="boxhead"></div>
|
||||
<DialogContent style={{ padding: 0, overflow:'hidden'}}>
|
||||
<DpAppBar position="sticky">
|
||||
<DpTabs value={value} indicatorColor="primary" onChange={(_, v) => setValue(v)}>
|
||||
<DpTab label="明山水库" />
|
||||
</DpTabs>
|
||||
<DpCloseButton onClick={onClose} />
|
||||
</DpAppBar>
|
||||
<img src='/assets/ddcg.jpg' style={{width:'95vw', height:'90vh'}}/>
|
||||
</DialogContent>
|
||||
<div className="boxfoot"></div>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(HDStDlg);
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import React from 'react';
|
||||
import DpTab from '../../../../layouts/mui/DpTab';
|
||||
import Dialog from '@material-ui/core/Dialog';
|
||||
import DialogContent from '@material-ui/core/DialogContent';
|
||||
import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
|
||||
import DpTabs from '../../../../layouts/mui/DpTabs';
|
||||
import DpAppBar from '../../../../layouts/mui/DpAppBar';
|
||||
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
|
||||
import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
|
||||
|
||||
function HDStDlg({ record, onClose }) {
|
||||
const [value, setValue] = React.useState(0);
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={true}
|
||||
onClose={onClose}
|
||||
maxWidth="xl"
|
||||
style={{ borderRadius: 0 }}
|
||||
PaperComponent={DpPaperComponent}
|
||||
BackdropComponent={DpBackgroundDrop}
|
||||
>
|
||||
<div className="boxhead"></div>
|
||||
<DialogContent style={{ padding: 0, overflow:'hidden'}}>
|
||||
<DpAppBar position="sticky">
|
||||
<DpTabs value={value} indicatorColor="primary" onChange={(_, v) => setValue(v)}>
|
||||
<DpTab label="方案对比" />
|
||||
</DpTabs>
|
||||
<DpCloseButton onClick={onClose} />
|
||||
</DpAppBar>
|
||||
<img src='/assets/fadb.jpg' style={{width:'80vw', height:'80vh',marginTop:"0.5rem",marginRight:'0.5rem'}}/>
|
||||
</DialogContent>
|
||||
<div className="boxfoot"></div>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(HDStDlg);
|
||||
|
|
@ -0,0 +1,307 @@
|
|||
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 = () => {
|
||||
const x = [
|
||||
"2025-06-02 15:00:00",
|
||||
"2025-06-02 16:00:00",
|
||||
"2025-06-02 17:00:00",
|
||||
"2025-06-02 18:00:00",
|
||||
"2025-06-02 19:00:00",
|
||||
"2025-06-02 20:00:00",
|
||||
"2025-06-02 21:00:00",
|
||||
"2025-06-03 01:00:00",
|
||||
"2025-06-03 02:00:00",
|
||||
"2025-06-03 04:00:00",
|
||||
"2025-06-03 06:00:00",
|
||||
"2025-06-03 08:00:00",
|
||||
"2025-06-03 10:00:00",
|
||||
"2025-06-03 12:00:00",
|
||||
"2025-06-03 13:00:00",
|
||||
"2025-06-03 14:00:00"
|
||||
]
|
||||
const y = [
|
||||
24.05,
|
||||
22.04,
|
||||
21.03,
|
||||
24.03,
|
||||
25.02,
|
||||
25.02,
|
||||
27.02,
|
||||
28,
|
||||
27.99,
|
||||
29.99,
|
||||
27.97,
|
||||
28.97,
|
||||
29.97,
|
||||
28.98,
|
||||
27.97,
|
||||
29.97
|
||||
]
|
||||
|
||||
const y1 = [
|
||||
23.05,
|
||||
24.04,
|
||||
24.03,
|
||||
24.03,
|
||||
23.02,
|
||||
23.02,
|
||||
23.02,
|
||||
24,
|
||||
23.99,
|
||||
23.99,
|
||||
23.97,
|
||||
23.97,
|
||||
23.97,
|
||||
23.98,
|
||||
23.97,
|
||||
23.97
|
||||
]
|
||||
|
||||
const y2 = [
|
||||
23.05,
|
||||
23.24,
|
||||
23.53,
|
||||
23.43,
|
||||
23.02,
|
||||
23.22,
|
||||
23.02,
|
||||
23,
|
||||
23.19,
|
||||
23.29,
|
||||
23.57,
|
||||
23.57,
|
||||
23.67,
|
||||
23.78,
|
||||
23.87,
|
||||
23.67
|
||||
]
|
||||
|
||||
const y3 = [
|
||||
14.05,
|
||||
12.24,
|
||||
13.53,
|
||||
13.43,
|
||||
14.02,
|
||||
13.22,
|
||||
14.02,
|
||||
15,
|
||||
16.19,
|
||||
15.29,
|
||||
17.57,
|
||||
18.57,
|
||||
18.67,
|
||||
19.78,
|
||||
18.87,
|
||||
18.67
|
||||
]
|
||||
|
||||
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
// valueFormatter: (value) => value + ' 万m³'
|
||||
},
|
||||
grid: {
|
||||
top: 42,
|
||||
left: 50,
|
||||
right: 40,
|
||||
bottom: 27,
|
||||
},
|
||||
legend: {
|
||||
data: ['水文预报','全局优先', '兴利优先','实时监测'],
|
||||
top: '8',
|
||||
icon:'circle',
|
||||
left: 'center',
|
||||
itemWidth: 11,//11,
|
||||
itemHeight: 11,//11,
|
||||
textStyle: {
|
||||
color: '#B9BFC9',
|
||||
fontSize: 12,//12
|
||||
}
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: x,
|
||||
splitLine: {
|
||||
show: true, //隐藏X轴轴线
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.2)',
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#B9BFC9' //X轴文字颜色
|
||||
},
|
||||
formatter: val => val.substr('2020-10-14 '.length, 5),
|
||||
// rotate: 20, // 角度值：Number
|
||||
fontSize: 10,//10
|
||||
},
|
||||
axisLine: {
|
||||
show: true, //隐藏X轴轴线
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.2)',
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
name: '流量',
|
||||
nameTextStyle: {
|
||||
color: '#B9BFC9',
|
||||
fontSize: 10,//10,
|
||||
padding: [0, 0, 0, -40],//[0, 0, 0, -30]//控制y轴标题位置
|
||||
},
|
||||
nameGap: 17,
|
||||
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#B9BFC9',
|
||||
fontSize: 11,//11
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
min: 5,
|
||||
// max: 135,
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '水文预报',
|
||||
type: 'line',
|
||||
barWidth: 10,
|
||||
data: y,
|
||||
showSymbol: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#32e1b5'
|
||||
},
|
||||
},
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'top',
|
||||
// color: '#bbb',
|
||||
// fontSize: 12,
|
||||
// textShadowBlur: 4,
|
||||
// textShadowColor: '#6ab',
|
||||
// },
|
||||
},
|
||||
{
|
||||
name: '全局优先',
|
||||
type: 'line',
|
||||
barWidth: 10,
|
||||
showSymbol: false,
|
||||
data: y1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#f19932'
|
||||
},
|
||||
},
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'top',
|
||||
// color: '#bbb',
|
||||
// fontSize: 12,
|
||||
// textShadowBlur: 4,
|
||||
// textShadowColor: '#6ab',
|
||||
// },
|
||||
},
|
||||
{
|
||||
name: '兴利优先',
|
||||
type: 'line',
|
||||
barWidth: 10,
|
||||
showSymbol: false,
|
||||
data: y2,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#e1554e'
|
||||
},
|
||||
},
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'top',
|
||||
// color: '#bbb',
|
||||
// fontSize: 12,
|
||||
// textShadowBlur: 4,
|
||||
// textShadowColor: '#6ab',
|
||||
// },
|
||||
},
|
||||
{
|
||||
name: '实时监测',
|
||||
type: 'line',
|
||||
barWidth: 10,
|
||||
showSymbol: false,
|
||||
data: y3,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#e1554e'
|
||||
},
|
||||
},
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'top',
|
||||
// color: '#bbb',
|
||||
// fontSize: 12,
|
||||
// textShadowBlur: 4,
|
||||
// textShadowColor: '#6ab',
|
||||
// },
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
return (
|
||||
<ReactEcharts
|
||||
option={option}
|
||||
style={{ height: '99%', width: '100%' }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(AreaDrpChart);
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
import React from 'react';
|
||||
import DpTab from '../../../../layouts/mui/DpTab';
|
||||
import Dialog from '@material-ui/core/Dialog';
|
||||
import DialogContent from '@material-ui/core/DialogContent';
|
||||
import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
|
||||
import DpTabs from '../../../../layouts/mui/DpTabs';
|
||||
import DpAppBar from '../../../../layouts/mui/DpAppBar';
|
||||
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
|
||||
import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
|
||||
import AreaDrpChart from './chart';
|
||||
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';
|
||||
|
||||
|
||||
const data = [
|
||||
{ name:'水文预报', dm:'华光潭二级...', hfsw:'224.1', hfll:'30.25', tm:'05-29 14:00',num:'12' },
|
||||
{ name:'全局优化调度', dm:'龙岗假山头', hfsw:'130.55', hfll:'55.65', tm:'05-29 14:30',num:'34' },
|
||||
{ name:'兴利优先调度', dm:'昌化', hfsw:'103.22', hfll:'75.61', tm:'05-29 15:00',num:'23' },
|
||||
{ name:'实时监测', dm:'昌化', hfsw:'103.22', hfll:'75.61', tm:'05-29 15:00',num:'23' },
|
||||
]
|
||||
|
||||
|
||||
function HDStDlg({ record, onClose }) {
|
||||
const [value, setValue] = React.useState(0);
|
||||
const dispatch = useDispatch()
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={true}
|
||||
onClose={onClose}
|
||||
maxWidth="xl"
|
||||
style={{ borderRadius: 0 }}
|
||||
PaperComponent={DpPaperComponent}
|
||||
BackdropComponent={DpBackgroundDrop}
|
||||
>
|
||||
<div className="boxhead"></div>
|
||||
<DialogContent style={{ padding: 0, width: '60rem', overflowX: 'hidden' }}>
|
||||
<DpAppBar position="sticky">
|
||||
<DpTabs value={value} indicatorColor="primary" onChange={(_, v) => setValue(v)}>
|
||||
<DpTab label="明山水库洪水预报分析结果" />
|
||||
</DpTabs>
|
||||
<DpCloseButton onClick={onClose} />
|
||||
</DpAppBar>
|
||||
|
||||
<div style={{width:'100%',height:'25rem'}}>
|
||||
<AreaDrpChart data={[]} />
|
||||
</div>
|
||||
{/* <img src='/assets/报警列表.jpg' style={{width:'100%', height:'33rem',marginTop:'0rem'}}/> */}
|
||||
|
||||
<TableContainer style={{ height: '15rem',padding:'10px 10px' }}>
|
||||
<Table size="small" stickyHeader>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<DpTableCell style={{ minWidth: '7rem' }} align="left">名称</DpTableCell>
|
||||
<DpTableCell style={{ minWidth: '8rem' }} align="center">洪峰数量</DpTableCell>
|
||||
<DpTableCell style={{ minWidth: '4.7rem' }} align="center">涨水时间(h)</DpTableCell>
|
||||
<DpTableCell style={{ minWidth: '4.8rem' }} align="center">洪峰时刻</DpTableCell>
|
||||
<DpTableCell style={{ minWidth: '4.8rem' }} align="center">退水时间(h)</DpTableCell>
|
||||
<DpTableCell style={{ minWidth: '4.8rem' }} align="center">洪水历时(h)</DpTableCell>
|
||||
<DpTableCell style={{ minWidth: '4.8rem' }} align="center">洪峰流量</DpTableCell>
|
||||
<DpTableCell style={{ minWidth: '4.8rem' }} align="center">洪水总量</DpTableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{data.map((row) => (
|
||||
<DpTableRow key={row.stcd}>
|
||||
<DpTableCell component="th" scope="row">
|
||||
<div className="table-ellipsis cursor-pointer" onClick={() => {
|
||||
}}>{row.name}</div>
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center">{'1'}</DpTableCell>
|
||||
<DpTableCell align="center">{row.tm}</DpTableCell>
|
||||
<DpTableCell align="center">{row.tm}</DpTableCell>
|
||||
<DpTableCell align="center">{row.tm}</DpTableCell>
|
||||
<DpTableCell align="center">{row.hfll}</DpTableCell>
|
||||
<DpTableCell align="center">{row.hfll}</DpTableCell>
|
||||
<DpTableCell align="center">{row.hfll}</DpTableCell>
|
||||
</DpTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</DialogContent>
|
||||
<div className="boxfoot"></div>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(HDStDlg);
|
||||
|
|
@ -34,6 +34,9 @@ import SljcDlg from './SljcDlg'
|
|||
import BjDlg from './BjDlg'
|
||||
import HistoryYyDlg from './HistoryYyDlg';
|
||||
import YascDlg from './YascDlg';
|
||||
import YbcgDlg from './YbcgDlg'
|
||||
import DdcgDlg from './DdcgDlg'
|
||||
import FadbDlg from './FadbDlg'
|
||||
|
||||
|
||||
function InfoDlg() {
|
||||
|
|
@ -113,8 +116,14 @@ function InfoDlg() {
|
|||
return <HistoryYyDlg record={properties} onClose={handleClose} />
|
||||
} else if (layerId === 'YuananLayer') {
|
||||
return <YascDlg record={properties} onClose={handleClose} />
|
||||
}
|
||||
|
||||
} else if (layerId === 'YbcgLayer') {
|
||||
return <YbcgDlg record={properties} onClose={handleClose} />
|
||||
} else if (layerId === 'DdcgLayer') {
|
||||
return <DdcgDlg record={properties} onClose={handleClose} />
|
||||
} else if (layerId === 'FadbLayer') {
|
||||
return <FadbDlg record={properties} onClose={handleClose} />
|
||||
}
|
||||
|
||||
|
||||
return null;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import RealDrpLayer from "./realdrplayer";
|
||||
import RealHDLayer from "./realhdlayer";
|
||||
import RealHDLayerQ2 from "./realhdlayerQ2";
|
||||
import RealSkLayer from "./realsklayer";
|
||||
import RealSkLayerQ2 from "./realsklayerQ2";
|
||||
import sources from "./sources";
|
||||
|
||||
import base from "./base";
|
||||
|
|
@ -72,7 +74,11 @@ class LayerMgr {
|
|||
|
||||
this.layers.push(new RealDrpLayer());
|
||||
this.layers.push(new RealHDLayer());
|
||||
this.layers.push(new RealHDLayerQ2());
|
||||
this.layers.push(new RealSkLayer());
|
||||
this.layers.push(new RealSkLayerQ2());
|
||||
|
||||
|
||||
this.layers.push(new BxSkLayer());
|
||||
this.layers.push(new YuwaiLayer());
|
||||
this.layers.push(new PicStLayer());
|
||||
|
|
@ -175,8 +181,11 @@ class LayerMgr {
|
|||
this.layerMap.PumpLayer.getStyle(),
|
||||
|
||||
this.layerMap.RealSkLayer.getStyle(),
|
||||
this.layerMap.RealSkLayerQ2.getStyle(),
|
||||
|
||||
this.layerMap.BxSkLayer.getStyle(),
|
||||
this.layerMap.RealHDLayer.getStyle(),
|
||||
this.layerMap.RealHDLayerQ2.getStyle(),
|
||||
this.layerMap.RealDrpLayer.getStyle(0),
|
||||
this.layerMap.RealDrpLayer.getStyle(1),
|
||||
this.layerMap.YuwaiLayer.getStyle(0),
|
||||
|
|
|
|||
|
|
@ -0,0 +1,127 @@
|
|||
import clone from "clone";
|
||||
import { HDRealPromise } from "../../../../models/_/real";
|
||||
import { parseGeoJSON } from "../../../../utils/tools";
|
||||
import { InfoPopNames } from "../../InfoPops";
|
||||
import BaseLayer from "./baselayer";
|
||||
|
||||
|
||||
const SourceName = '实时河道水位Q2';
|
||||
|
||||
const Style = {
|
||||
id: '实时河道水位Q2',
|
||||
type: 'symbol',
|
||||
source: SourceName,
|
||||
|
||||
layout: {
|
||||
'icon-allow-overlap': true,
|
||||
'text-allow-overlap': true,
|
||||
'icon-image': '水位站-警戒',
|
||||
'icon-size': [
|
||||
'interpolate', ['linear'], ['zoom'],
|
||||
10, 0.8,
|
||||
14, 1,
|
||||
],
|
||||
'text-size': [
|
||||
'interpolate', ['linear'], ['zoom'],
|
||||
10, 10,
|
||||
14, 16,
|
||||
],
|
||||
'text-max-width': 30,
|
||||
'text-font': ['Roboto Black'],
|
||||
'text-field': [
|
||||
'step',
|
||||
['zoom'],
|
||||
[
|
||||
'case',
|
||||
['!=', ['get', 'state'], 1], '',
|
||||
['concat', ['get', 'rz'], 'm']
|
||||
],
|
||||
12, [
|
||||
'case',
|
||||
['!=', ['get', 'state'], 1], ['get', 'stnm'],
|
||||
[
|
||||
'format',
|
||||
['get', 'stnm'], { 'font-scale': 0.8, 'text-color': '#fff' },
|
||||
'\n', {},
|
||||
['concat', ['get', 'rz'], 'm'], {}
|
||||
]
|
||||
],
|
||||
],
|
||||
'text-anchor': 'top',
|
||||
'text-offset': [0, 1],
|
||||
'visibility': 'none',
|
||||
},
|
||||
paint: {
|
||||
'text-color': [
|
||||
'case',
|
||||
['!=', ['get', 'state'], 1], '#888',
|
||||
['==', ['get', 'warning'], 3], '#f00',
|
||||
['==', ['get', 'warning'], 2], 'yellow',
|
||||
['==', ['get', 'warning'], 1], 'yellow',
|
||||
'#0f0'
|
||||
],
|
||||
'text-halo-color': '#062040',
|
||||
'text-halo-width': 1
|
||||
}
|
||||
};
|
||||
|
||||
export default class RealHDLayerQ2 extends BaseLayer {
|
||||
|
||||
static LayerName = 'RealHDLayerQ2';
|
||||
|
||||
static SourceName = SourceName;
|
||||
|
||||
getStyle() {
|
||||
const ret = clone(Style);
|
||||
this._setStyleVisibility(ret);
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
getName() {
|
||||
return RealHDLayerQ2.LayerName;
|
||||
}
|
||||
|
||||
getSubLayers() {
|
||||
return [Style.id];
|
||||
}
|
||||
|
||||
getRefreshInterval() {
|
||||
return 60 * 1000;
|
||||
}
|
||||
|
||||
async doRefreshLayer(mapCtrl) {
|
||||
const ms = mapCtrl.getSource(SourceName);
|
||||
const data = [{
|
||||
"stcd": "61612900",
|
||||
"stnm": "阎家河",
|
||||
"adcd": null,
|
||||
"wscd": null,
|
||||
"importancy": 0,
|
||||
"lgtd": 115.128722,
|
||||
"lttd": 31.207,
|
||||
"elev": null,
|
||||
"hasRz": true,
|
||||
"type": "sw",
|
||||
"tm": "2025-06-03T02:00:00.000Z",
|
||||
"rz": 61.75,
|
||||
"state": 1
|
||||
}];
|
||||
ms.setData(parseGeoJSON(data));
|
||||
return true;
|
||||
}
|
||||
|
||||
getFeatureTip(record) {
|
||||
return record.stnm;
|
||||
}
|
||||
|
||||
featureClicked(properties, dispatch) {
|
||||
dispatch.runtime.setFeaturePop({
|
||||
type: InfoPopNames.RealHDPop,
|
||||
properties,
|
||||
coordinates: [properties.lgtd, properties.lttd],
|
||||
offsetPop: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -113,87 +113,13 @@ export default class RealSkLayer extends BaseLayer {
|
|||
o.strarz = strarz.toFixed(2);
|
||||
}
|
||||
});
|
||||
|
||||
data = [...data, {
|
||||
aRz: -15.38,
|
||||
a_fsltdz: null,
|
||||
adcd: null,
|
||||
damel: 236,
|
||||
ddz: 204,
|
||||
drpState: 2,
|
||||
drpTm: "2021-11-21T00:00:00.000Z",
|
||||
dsflz: 233.92,
|
||||
elev: null,
|
||||
fsltdz: 231,
|
||||
h1: 0,
|
||||
h3: 0,
|
||||
h6: 0,
|
||||
h12: 0,
|
||||
h24: 0,
|
||||
h48: 0,
|
||||
hasRz: true,
|
||||
importancy: 0,
|
||||
lgtd: 114.96994272023744,
|
||||
lttd: 31.468737175815974,
|
||||
rz: 215.62,
|
||||
rzState: 2,
|
||||
rzTm: "2021-11-21T00:00:00.000Z",
|
||||
rzWarning: 0,
|
||||
stcd: "11111000",
|
||||
stnm: "小玉潭水库",
|
||||
strarz: "0",
|
||||
today: 0,
|
||||
type: "sw",
|
||||
type2: "swsk",
|
||||
wscd: null,
|
||||
zcxsw: 231,
|
||||
},
|
||||
{
|
||||
"stcd": "716113701",
|
||||
"type": "sk",
|
||||
"hasRz": true,
|
||||
"stnm": "永红水库",
|
||||
"adcd": "421181105000",
|
||||
"wscd": null,
|
||||
"importancy": 0,
|
||||
"lgtd": 115.120278,
|
||||
"lttd": 31.183611,
|
||||
"elev": 0,
|
||||
"damel": 131.99,
|
||||
"dsflz": 130.56,
|
||||
"fsltdz": 129.9,
|
||||
"ddz": 113.5,
|
||||
"zcxsw": 129.9,
|
||||
"drpTm": "2025-04-11T06:00:00.000Z",
|
||||
"today": 0,
|
||||
"h1": 0,
|
||||
"h3": 0,
|
||||
"h6": 0,
|
||||
"h12": 0,
|
||||
"h24": 0,
|
||||
"h48": 0,
|
||||
"drpState": 2,
|
||||
"rz": 130.15,
|
||||
"w": 0.444,
|
||||
"a_fsltdz": -10.75,
|
||||
"rzTm": "2025-04-11T06:00:00.000Z",
|
||||
"rzWarning": 0,
|
||||
"rzState": 2,
|
||||
"pic": [
|
||||
{
|
||||
"stcd": "716113701",
|
||||
"tm": "2023-11-16T11:19:00.000Z",
|
||||
"url": "http://223.75.53.106:8891/skjgimages/2023/1116/716113701/20231116191900.jpg"
|
||||
},
|
||||
{
|
||||
"stcd": "716113701",
|
||||
"tm": "2023-11-16T09:05:00.000Z",
|
||||
"url": "http://223.75.53.106:8891/skjgimages/2023/1116/716113702/20231116170500.jpg"
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
}
|
||||
data.map((item)=>{
|
||||
if(item.stnm==='夏家山水库'){
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
const list = data.filter(o=>{
|
||||
if(o.stnm==='青山垸水库'||o.stnm==='七角尖水库'||o.stnm==='杨树庵水库'||o.stnm==='石鼓庙水库'||o.stnm==='张家凹水库'||o.stnm==='大坳水库'){
|
||||
return false
|
||||
|
|
|
|||
|
|
@ -0,0 +1,159 @@
|
|||
import clone from "clone";
|
||||
import { SkRealPromise } from "../../../../models/_/real";
|
||||
import { parseGeoJSON } from "../../../../utils/tools";
|
||||
import { InfoPopNames } from "../../InfoPops";
|
||||
import BaseLayer from "./baselayer";
|
||||
|
||||
|
||||
const SourceName = '实时水库q2';
|
||||
|
||||
|
||||
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.8,
|
||||
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'
|
||||
}
|
||||
};
|
||||
|
||||
export default class RealSkLayerQ2 extends BaseLayer {
|
||||
|
||||
static LayerName = 'RealSkLayerQ2';
|
||||
|
||||
static SourceName = SourceName;
|
||||
|
||||
getStyle() {
|
||||
const ret = clone(ShapeStyle);
|
||||
this._setStyleVisibility(ret);
|
||||
return ret;
|
||||
}
|
||||
|
||||
getName() {
|
||||
return RealSkLayerQ2.LayerName;
|
||||
}
|
||||
|
||||
getSubLayers() {
|
||||
return [ShapeStyle.id];
|
||||
}
|
||||
|
||||
getRefreshInterval() {
|
||||
return 60 * 1000;
|
||||
}
|
||||
|
||||
|
||||
async doRefreshLayer(mapCtrl) {
|
||||
const ms = mapCtrl.getSource(SourceName);
|
||||
|
||||
let data = [{
|
||||
"stcd": "716129061",
|
||||
"type": "sk",
|
||||
"hasRz": true,
|
||||
"stnm": "仰天窝水库",
|
||||
"adcd": "421181201000",
|
||||
"wscd": null,
|
||||
"importancy": 0,
|
||||
"lgtd": 115.106667,
|
||||
"lttd": 31.126389,
|
||||
"elev": 0,
|
||||
"damel": 325.08,
|
||||
"dsflz": 324.18,
|
||||
"fsltdz": 323.5,
|
||||
"ddz": 319.5,
|
||||
"zcxsw": 323.5,
|
||||
"drpTm": "2025-04-11T05:00:00.000Z",
|
||||
"today": 0,
|
||||
"h1": 0,
|
||||
"h3": 0,
|
||||
"h6": 0,
|
||||
"h12": 0,
|
||||
"h24": 0,
|
||||
"h48": 0,
|
||||
"drpState": 2,
|
||||
"rz": 328.16,
|
||||
"w": 0.132,
|
||||
"a_fsltdz": 4.660000000000025,
|
||||
"rzTm": "2025-04-11T05:00:00.000Z",
|
||||
"rzWarning": 1,
|
||||
"rzState": 2,
|
||||
"pic": [
|
||||
{
|
||||
"stcd": "716129061",
|
||||
"tm": "2023-03-12T06:05:00.000Z",
|
||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716129061/20230312140500.jpg"
|
||||
},
|
||||
{
|
||||
"stcd": "716129061",
|
||||
"tm": "2023-03-12T07:25:00.000Z",
|
||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716129062/20230312152500.jpg"
|
||||
}
|
||||
],
|
||||
"aRz": 4.66,
|
||||
"strarz": "4.66"
|
||||
}];
|
||||
if (Array.isArray(data)) {
|
||||
data.forEach(o => {
|
||||
const strarz = o.rz - o.fsltdz;
|
||||
if (!isNaN(strarz)) {
|
||||
o.strarz = strarz.toFixed(2);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ms.setData(parseGeoJSON(data));
|
||||
return true;
|
||||
}
|
||||
|
||||
|
||||
getFeatureTip(record) {
|
||||
return record.stnm;
|
||||
}
|
||||
|
||||
featureClicked(properties, dispatch) {
|
||||
if (properties.stnm === '小玉潭水库') {
|
||||
/*
|
||||
dispatch.runtime.setInfoDlg({
|
||||
layerId: 'Three', properties: properties
|
||||
});
|
||||
*/
|
||||
|
||||
window.open('http://www.baidu.com')
|
||||
} else {
|
||||
dispatch.runtime.setFeaturePop({
|
||||
type: InfoPopNames.RealSkPop,
|
||||
properties,
|
||||
coordinates: [properties.lgtd, properties.lttd],
|
||||
offsetPop: true,
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,9 @@
|
|||
import ContourLayer from "./contourlayer";
|
||||
import RealDrpLayer from "./realdrplayer";
|
||||
import RealHDLayer from "./realhdlayer";
|
||||
import RealHDLayerQ2 from "./realhdlayerQ2";
|
||||
import RealSkLayer from "./realsklayer";
|
||||
import RealSkLayerQ2 from "./realsklayerQ2";
|
||||
import { DCPJ_TYPES } from "../../consts";
|
||||
import WataLayer from "./watalayer";
|
||||
import PlaneAreaLayer from "./planarealayer";
|
||||
|
|
@ -239,10 +241,18 @@ const sources = {
|
|||
type: 'geojson',
|
||||
data: { type: 'FeatureCollection', features: [] },
|
||||
},
|
||||
[RealHDLayerQ2.SourceName]: {
|
||||
type: 'geojson',
|
||||
data: { type: 'FeatureCollection', features: [] },
|
||||
},
|
||||
[RealSkLayer.SourceName]: {
|
||||
type: 'geojson',
|
||||
data: { type: 'FeatureCollection', features: [] },
|
||||
},
|
||||
[RealSkLayerQ2.SourceName]: {
|
||||
type: 'geojson',
|
||||
data: { type: 'FeatureCollection', features: [] },
|
||||
},
|
||||
[PicStLayer.SourceName]: {
|
||||
type: 'geojson',
|
||||
data: { type: 'FeatureCollection', features: [] },
|
||||
|
|
|
|||
|
|
@ -100,6 +100,16 @@ import FhxsTqyb from './panels/FhxsTqyb'
|
|||
import FhxsSq from './panels/FhxsSq'
|
||||
import FhxsAreaDrp from './panels/FhxsAreaDrp'
|
||||
import Tqyb24h from './panels/Tqyb24h'
|
||||
import Hlzydm from './panels/Hlzydm'
|
||||
import Zyskyb from './panels/Zyskyb'
|
||||
import Skzl from './panels/Skzl'
|
||||
import Sklb from './panels/Sklb'
|
||||
import Glzd from './panels/Glzd'
|
||||
import Ybdd from './panels/Ybdd'
|
||||
import Ybcg from './panels/Ybcg'
|
||||
import Yjcg from './panels/Yjcg'
|
||||
import Ddcg from './panels/Ddcg'
|
||||
import Fadb from './panels/Fadb'
|
||||
|
||||
|
||||
|
||||
|
|
@ -316,7 +326,28 @@ export default function PanelIndex({ name, style, ...params }) {
|
|||
return <Diaodujg />
|
||||
}else if (name === '方案对比') {
|
||||
return <Duibifx />
|
||||
} else if (name === '河流重要断面预报') {
|
||||
return <Hlzydm style={style} />
|
||||
} else if (name === '重要水库预报') {
|
||||
return <Zyskyb style={style} />
|
||||
} else if (name === '水库总览') {
|
||||
return <Skzl style={style} />
|
||||
} else if (name === '水库列表') {
|
||||
return <Sklb style={style} />
|
||||
} else if (name === '关联站点') {
|
||||
return <Glzd style={style} />
|
||||
} else if (name === '预报调度') {
|
||||
return <Ybdd style={style} />
|
||||
} else if (name === '预报成果') {
|
||||
return <Ybcg style={style} />
|
||||
} else if (name === '预警成果') {
|
||||
return <Yjcg style={style} />
|
||||
} else if (name === '调度成果') {
|
||||
return <Ddcg style={style} />
|
||||
} else if (name === '方案对比') {
|
||||
return <Fadb style={style} />
|
||||
}
|
||||
|
||||
return (
|
||||
<PanelBox style={style} title={name} color="red">
|
||||
<p>not impl</p>
|
||||
|
|
|
|||
|
|
@ -15,9 +15,12 @@ const VIEWS = [
|
|||
{ id: 3, title: '预案', img: '/assets/menu/辅助决策.png' },
|
||||
{ id: 4, title: '预演', img: '/assets/menu/预警分析.png' },
|
||||
{ id: 5, title: '天气预报', img: '/assets/menu/降雨中心.png' },
|
||||
{ id: 7, title: '调度', img: '/assets/menu/辅助决策.png' },
|
||||
|
||||
]
|
||||
},
|
||||
{ id: 200, title: '水库', img: '/assets/menu/水库专题.png',children:[
|
||||
{ id: 207, title: '水库总览', img: '/assets/menu/水库管理.png' },
|
||||
{ id: 201, title: '雨情监测', img: '/assets/menu/雨情监测.png' },
|
||||
{ id: 202, title: '水情监测', img: '/assets/menu/水情监测.png' },
|
||||
{ id: 203, title: '安全监测', img: '/assets/menu/安全监测.png' },
|
||||
|
|
|
|||
|
|
@ -82,8 +82,6 @@ export default function Demo1() {
|
|||
</CSSTransition>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,304 @@
|
|||
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 = () => {
|
||||
const x = [
|
||||
"2025-06-02 15:00:00",
|
||||
"2025-06-02 16:00:00",
|
||||
"2025-06-02 17:00:00",
|
||||
"2025-06-02 18:00:00",
|
||||
"2025-06-02 19:00:00",
|
||||
"2025-06-02 20:00:00",
|
||||
"2025-06-02 21:00:00",
|
||||
"2025-06-03 01:00:00",
|
||||
"2025-06-03 02:00:00",
|
||||
"2025-06-03 04:00:00",
|
||||
"2025-06-03 06:00:00",
|
||||
"2025-06-03 08:00:00",
|
||||
"2025-06-03 10:00:00",
|
||||
"2025-06-03 12:00:00",
|
||||
"2025-06-03 13:00:00",
|
||||
"2025-06-03 14:00:00"
|
||||
]
|
||||
const y = [
|
||||
134.05,
|
||||
134.04,
|
||||
134.03,
|
||||
134.03,
|
||||
134.02,
|
||||
134.02,
|
||||
134.02,
|
||||
134,
|
||||
133.99,
|
||||
133.99,
|
||||
133.97,
|
||||
133.97,
|
||||
133.97,
|
||||
133.98,
|
||||
133.97,
|
||||
133.97
|
||||
]
|
||||
|
||||
const y1 = [
|
||||
13.05,
|
||||
14.04,
|
||||
14.03,
|
||||
14.03,
|
||||
13.02,
|
||||
13.02,
|
||||
13.02,
|
||||
14,
|
||||
13.99,
|
||||
13.99,
|
||||
13.97,
|
||||
13.97,
|
||||
13.97,
|
||||
13.98,
|
||||
13.97,
|
||||
13.97
|
||||
]
|
||||
|
||||
const y2 = [
|
||||
13.05,
|
||||
13.24,
|
||||
13.53,
|
||||
13.43,
|
||||
13.02,
|
||||
13.22,
|
||||
13.02,
|
||||
13,
|
||||
13.19,
|
||||
13.29,
|
||||
13.57,
|
||||
13.57,
|
||||
13.67,
|
||||
13.78,
|
||||
13.87,
|
||||
13.67
|
||||
]
|
||||
|
||||
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
// valueFormatter: (value) => value + ' 万m³'
|
||||
},
|
||||
grid: {
|
||||
top: 42,
|
||||
left: 50,
|
||||
right: 40,
|
||||
bottom: 27,
|
||||
},
|
||||
legend: {
|
||||
data: ['水位','入库流量', '出库流量',],
|
||||
top: '8',
|
||||
icon:'circle',
|
||||
left: 'center',
|
||||
itemWidth: 11,//11,
|
||||
itemHeight: 11,//11,
|
||||
textStyle: {
|
||||
color: '#B9BFC9',
|
||||
fontSize: 12,//12
|
||||
}
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: x,
|
||||
splitLine: {
|
||||
show: true, //隐藏X轴轴线
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.2)',
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#B9BFC9' //X轴文字颜色
|
||||
},
|
||||
formatter: val => val.substr('2020-10-14 '.length, 5),
|
||||
// rotate: 20, // 角度值：Number
|
||||
fontSize: 10,//10
|
||||
},
|
||||
axisLine: {
|
||||
show: true, //隐藏X轴轴线
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.2)',
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
name: '水位m',
|
||||
nameTextStyle: {
|
||||
color: '#B9BFC9',
|
||||
fontSize: 10,//10,
|
||||
padding: [0, 0, 0, -40],//[0, 0, 0, -30]//控制y轴标题位置
|
||||
},
|
||||
nameGap: 17,
|
||||
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#B9BFC9',
|
||||
fontSize: 11,//11
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
min: 133,
|
||||
// max: 135,
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
position: 'right',
|
||||
name: '流量m³/s',
|
||||
nameTextStyle: {
|
||||
color: '#B9BFC9',
|
||||
fontSize: 10,//10,
|
||||
padding: [0, 0, 0, 30],//[0, 0, 0, -30]//控制y轴标题位置
|
||||
},
|
||||
nameGap: 17,
|
||||
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#B9BFC9',
|
||||
fontSize: 11,//11
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
min: 0,
|
||||
max: 30,
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '水位',
|
||||
type: 'line',
|
||||
barWidth: 10,
|
||||
data: y,
|
||||
showSymbol: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#32e1b5'
|
||||
},
|
||||
},
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'top',
|
||||
// color: '#bbb',
|
||||
// fontSize: 12,
|
||||
// textShadowBlur: 4,
|
||||
// textShadowColor: '#6ab',
|
||||
// },
|
||||
},
|
||||
{
|
||||
yAxisIndex: 1,
|
||||
name: '入库流量',
|
||||
type: 'line',
|
||||
barWidth: 10,
|
||||
showSymbol: false,
|
||||
data: y1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#f19932'
|
||||
},
|
||||
},
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'top',
|
||||
// color: '#bbb',
|
||||
// fontSize: 12,
|
||||
// textShadowBlur: 4,
|
||||
// textShadowColor: '#6ab',
|
||||
// },
|
||||
},
|
||||
{
|
||||
yAxisIndex: 1,
|
||||
name: '出库流量',
|
||||
type: 'line',
|
||||
barWidth: 10,
|
||||
showSymbol: false,
|
||||
data: y2,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#e1554e'
|
||||
},
|
||||
},
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'top',
|
||||
// color: '#bbb',
|
||||
// fontSize: 12,
|
||||
// textShadowBlur: 4,
|
||||
// textShadowColor: '#6ab',
|
||||
// },
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
return (
|
||||
<ReactEcharts
|
||||
option={option}
|
||||
style={{ height: '99%', width: '100%' }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(AreaDrpChart);
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
import React, { useMemo, useState } from 'react';
|
||||
import { Switch, FormControlLabel,InputLabel, Select, MenuItem,FormControl } from '@material-ui/core/index'
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import PanelBox from '../../components/PanelBox';
|
||||
import AreaDrpChart from './chart';
|
||||
|
||||
|
||||
|
||||
function DrpReal({ style }) {
|
||||
const dispatch = useDispatch()
|
||||
|
||||
return (
|
||||
<PanelBox
|
||||
style={style}
|
||||
title="调度成果"
|
||||
color="green"
|
||||
extra={
|
||||
<>
|
||||
{/* <img src='/assets/年下拉3.jpg' style={{width:'100px', height:'30px',marginRight:'10px'}}/> */}
|
||||
<div style={{color:'#1890ff',marginRight:'10px',cursor:'pointer'}} onClick={()=>{
|
||||
dispatch?.runtime.setInfoDlg({ layerId: 'DdcgLayer', properties: {} })
|
||||
}}>
|
||||
详情
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<AreaDrpChart data={[]} />
|
||||
</PanelBox>
|
||||
)
|
||||
}
|
||||
|
||||
export default DrpReal;
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import React, { useMemo, useState } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import PanelBox from '../../components/PanelBox';
|
||||
|
||||
function DrpReal({ style }) {
|
||||
const dispatch = useDispatch()
|
||||
|
||||
return (
|
||||
<PanelBox
|
||||
style={style}
|
||||
title="方案对比"
|
||||
color="green"
|
||||
extra={
|
||||
<div style={{color:'#1890ff',marginRight:'10px',cursor:'pointer'}} onClick={()=>{
|
||||
dispatch?.runtime.setInfoDlg({ layerId: 'FadbLayer', properties: {} })
|
||||
}}>
|
||||
详情
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<img src='/assets/组 6.png' style={{width:'23rem',marginLeft:'1.7rem',marginTop:'0.5rem'}}/>
|
||||
</PanelBox>
|
||||
)
|
||||
}
|
||||
|
||||
export default DrpReal;
|
||||
|
|
@ -6,7 +6,135 @@ import AreaDrpChart from './chart';
|
|||
|
||||
|
||||
function DrpReal({ style }) {
|
||||
const [dimension, setDimension] =useState('ft');
|
||||
const [dimension, setDimension] =useState('61614460');
|
||||
const data = [
|
||||
{
|
||||
"stcd": "61614460",
|
||||
"stnm": "项生(宋埠)",
|
||||
"adcd": "421181000000000",
|
||||
"wscd": null,
|
||||
"importancy": 0,
|
||||
"lgtd": 114.798056,
|
||||
"lttd": 31.058611,
|
||||
"elev": null,
|
||||
"hasRz": true,
|
||||
"wrz": null,
|
||||
"wrq": null,
|
||||
"grz": null,
|
||||
"grq": null,
|
||||
"sfz": null,
|
||||
"sfq": null,
|
||||
"type": "sh",
|
||||
"tm": "2025-06-03T02:00:00.000Z",
|
||||
"rz": 21.91,
|
||||
"trend": 1,
|
||||
"state": 1,
|
||||
"warning": 0,
|
||||
"maxRz": 21.91,
|
||||
"maxDate": "2025-06-03T02:00:00.000Z",
|
||||
"warndes": null
|
||||
},{
|
||||
"stcd": "61613700",
|
||||
"stnm": "四角门(宋铁二桥)",
|
||||
"adcd": "421181000000000",
|
||||
"wscd": null,
|
||||
"importancy": 0,
|
||||
"lgtd": 114.8291,
|
||||
"lttd": 31.0754,
|
||||
"elev": null,
|
||||
"hasRz": true,
|
||||
"wrz": null,
|
||||
"wrq": null,
|
||||
"grz": null,
|
||||
"grq": null,
|
||||
"sfz": null,
|
||||
"sfq": null,
|
||||
"type": "sh",
|
||||
"tm": "2025-06-03T02:00:00.000Z",
|
||||
"rz": 27.57,
|
||||
"trend": 0,
|
||||
"state": 1,
|
||||
"warning": 0,
|
||||
"maxRz": 27.57,
|
||||
"maxDate": "2025-06-03T01:00:00.000Z",
|
||||
"warndes": null
|
||||
},{
|
||||
"stcd": "61612910",
|
||||
"stnm": "桃林河(阎河)",
|
||||
"adcd": "421181000000000",
|
||||
"wscd": null,
|
||||
"importancy": 0,
|
||||
"lgtd": 115.087777777,
|
||||
"lttd": 31.164444444,
|
||||
"elev": null,
|
||||
"hasRz": true,
|
||||
"wrz": null,
|
||||
"wrq": null,
|
||||
"grz": null,
|
||||
"grq": null,
|
||||
"sfz": null,
|
||||
"sfq": null,
|
||||
"type": "sh",
|
||||
"tm": "2025-06-03T02:35:00.000Z",
|
||||
"rz": 55.67,
|
||||
"trend": 0,
|
||||
"state": 1,
|
||||
"warning": 0,
|
||||
"maxRz": 55.67,
|
||||
"maxDate": "2025-06-03T02:00:00.000Z",
|
||||
"warndes": null
|
||||
},{
|
||||
"stcd": "61615110",
|
||||
"stnm": "杨梅河(木子店)",
|
||||
"adcd": "421181000000000",
|
||||
"wscd": null,
|
||||
"importancy": 0,
|
||||
"lgtd": 115.339667,
|
||||
"lttd": 31.1595,
|
||||
"elev": null,
|
||||
"hasRz": true,
|
||||
"wrz": null,
|
||||
"wrq": null,
|
||||
"grz": null,
|
||||
"grq": null,
|
||||
"sfz": null,
|
||||
"sfq": null,
|
||||
"type": "sh",
|
||||
"tm": "2025-06-03T02:00:00.000Z",
|
||||
"rz": 112.71,
|
||||
"trend": 0,
|
||||
"state": 1,
|
||||
"warning": 0,
|
||||
"maxRz": 112.71,
|
||||
"maxDate": "2025-06-02T22:00:00.000Z",
|
||||
"warndes": null
|
||||
},{
|
||||
"stcd": "61612150",
|
||||
"stnm": "鹰山畈(黄土岗)",
|
||||
"adcd": "421181000000000",
|
||||
"wscd": null,
|
||||
"importancy": 0,
|
||||
"lgtd": 115.073611,
|
||||
"lttd": 31.386667,
|
||||
"elev": null,
|
||||
"hasRz": true,
|
||||
"wrz": null,
|
||||
"wrq": null,
|
||||
"grz": null,
|
||||
"grq": null,
|
||||
"sfz": null,
|
||||
"sfq": null,
|
||||
"type": "sh",
|
||||
"tm": "2025-06-03T02:00:00.000Z",
|
||||
"rz": 77.12,
|
||||
"trend": 0,
|
||||
"state": 1,
|
||||
"warning": 0,
|
||||
"maxRz": 77.25,
|
||||
"maxDate": "2025-06-02T16:00:00.000Z",
|
||||
"warndes": null
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
return (
|
||||
|
|
@ -39,10 +167,11 @@ function DrpReal({ style }) {
|
|||
// }
|
||||
// }}
|
||||
>
|
||||
<MenuItem value="ft">水情站1</MenuItem>
|
||||
<MenuItem value="lc">水情站2</MenuItem>
|
||||
<MenuItem value="mz">水情站3</MenuItem>
|
||||
<MenuItem value="sb">水情站4</MenuItem>
|
||||
{
|
||||
data.map((item)=>
|
||||
<MenuItem value={item.stcd}>{item.stnm}</MenuItem>
|
||||
)
|
||||
}
|
||||
</Select>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -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,62 @@
|
|||
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 appconsts from '../../../../models/appconsts';
|
||||
import { renderDrp, renderSkArz, renderSkRz } from '../../../../utils/renutils';
|
||||
|
||||
|
||||
const data = [
|
||||
{ name:'余家河', dm:'华光潭二级...', hfsw:'224.1', hfll:'30.25', tm:'05-29 14:00' },
|
||||
{ name:'朱家河', dm:'龙岗假山头', hfsw:'130.55', hfll:'55.65', tm:'05-29 14:30' },
|
||||
{ name:'举水', dm:'昌化', hfsw:'103.22', hfll:'75.61', tm:'05-29 15:00' },
|
||||
{ name:'巴水', dm:'河桥', hfsw:'85.86', hfll:'15.72', tm:'05-30 02:00' },
|
||||
{ name:'沙河', dm:'於潜', hfsw:'69.09', hfll:'15.11', tm:'05-29 14:00' },
|
||||
]
|
||||
|
||||
function SkReal({ style }) {
|
||||
|
||||
return (
|
||||
<PanelBox
|
||||
style={style}
|
||||
title="河流重要断面预报"
|
||||
color="green"
|
||||
>
|
||||
<TableContainer style={{ height: '100%' }}>
|
||||
<Table size="small" stickyHeader>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<DpTableCell style={{ maxWidth: '30%' }} align="left">河流名称</DpTableCell>
|
||||
<DpTableCell align="center">断面名称</DpTableCell>
|
||||
<DpTableCell align="center">洪峰水位</DpTableCell>
|
||||
<DpTableCell align="center">洪峰流量</DpTableCell>
|
||||
<DpTableCell align="center">峰现时间</DpTableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{data.map((row) => (
|
||||
<DpTableRow key={row.stcd}>
|
||||
<DpTableCell component="th" scope="row">
|
||||
<div className="table-ellipsis cursor-pointer" onClick={() => {}}>{row.name}</div>
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center">{row.dm}</DpTableCell>
|
||||
<DpTableCell align="center">{row.hfsw}</DpTableCell>
|
||||
<DpTableCell align="center">{row.hfll}</DpTableCell>
|
||||
<DpTableCell align="center">{row.tm}</DpTableCell>
|
||||
</DpTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</PanelBox>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(SkReal);
|
||||
|
|
@ -135,9 +135,15 @@ export default function OverallContent({ data }) {
|
|||
|
||||
<div>
|
||||
<span className={classes.titleDate}>{tm1 || '-'}</span>至<span className={classes.titleDate}>{tm2 || '-'}</span>
|
||||
24小时中共有<span className={classes.number}>{strNumber(h24?.drpStCount?.total, '-')}</span>
|
||||
24小时中共有<span className={classes.number}>
|
||||
{/* {strNumber(h24?.drpStCount?.total, '-')} */}
|
||||
378
|
||||
</span>
|
||||
个降雨测站(<span className={classes.sttype}>山洪测站</span>
|
||||
<span className={classes.number}>{strNumber(h24?.drpStCount?.sh, '-')}</span>
|
||||
<span className={classes.number}>
|
||||
{/* {strNumber(h24?.drpStCount?.sh, '-')} */}
|
||||
35
|
||||
</span>
|
||||
个)，其中最大降雨测站为<span onClick={() => showRecord(h24?.max)} className={classes.stname}>{h24?.max?.stnm || '-'}</span>
|
||||
，降雨量<span className={classes.number}>{strNumber(h24?.max?.value, '-')}</span>mm
|
||||
{h24?.cntDrp10 > 0 && (<>，<span className={classes.sttype}>10mm以下</span>测站数为<span className={classes.number}>{strNumber(h24?.cntDrp10, '-')}</span>个</>)}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,217 @@
|
|||
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 appconsts from '../../../../models/appconsts';
|
||||
import { renderDrp, renderSkArz, renderSkRz } from '../../../../utils/renutils';
|
||||
|
||||
|
||||
const data = [
|
||||
{
|
||||
"stcd": "61614200",
|
||||
"type": "sk",
|
||||
"hasRz": true,
|
||||
"stnm": "浮桥河水库",
|
||||
"adcd": "421181100000",
|
||||
"wscd": null,
|
||||
"importancy": 0,
|
||||
"lgtd": 114.875,
|
||||
"lttd": 31.166667,
|
||||
"elev": 0,
|
||||
"damel": 71.33,
|
||||
"dsflz": 68.04,
|
||||
"fsltdz": 64.89,
|
||||
"ddz": 51.78,
|
||||
"zcxsw": 64.89,
|
||||
"drpTm": "2025-06-03T02:00:00.000Z",
|
||||
"today": 0,
|
||||
"h1": 0,
|
||||
"h3": 0,
|
||||
"h6": 0,
|
||||
"h12": 0,
|
||||
"h24": 0,
|
||||
"h48": 16.5,
|
||||
"drpState": 1,
|
||||
"rz": 60.71,
|
||||
"w": 162.8,
|
||||
"a_fsltdz": -4.18,
|
||||
"rzTm": "2025-06-03T02:00:00.000Z",
|
||||
"rzWarning": 0,
|
||||
"rzState": 1,
|
||||
"aRz": -4.18,
|
||||
"strarz": "-4.18",
|
||||
"type":"大型",
|
||||
},
|
||||
{
|
||||
"stcd": "61613010",
|
||||
"type": "sk",
|
||||
"hasRz": true,
|
||||
"stnm": "明山水库",
|
||||
"adcd": "421181103000",
|
||||
"wscd": null,
|
||||
"importancy": 0,
|
||||
"lgtd": 115.066667,
|
||||
"lttd": 31.016667,
|
||||
"elev": 0,
|
||||
"damel": 98.7,
|
||||
"dsflz": 96.07,
|
||||
"fsltdz": 93,
|
||||
"ddz": 78.02,
|
||||
"zcxsw": 93,
|
||||
"drpTm": "2025-06-03T02:00:00.000Z",
|
||||
"today": 0,
|
||||
"h1": 0,
|
||||
"h3": 0,
|
||||
"h6": 0,
|
||||
"h12": 0,
|
||||
"h24": 0,
|
||||
"h48": 12.5,
|
||||
"drpState": 1,
|
||||
"rz": 84.43,
|
||||
"w": 49.5,
|
||||
"a_fsltdz": -8.569999999999993,
|
||||
"rzTm": "2025-06-03T02:00:00.000Z",
|
||||
"rzWarning": 0,
|
||||
"rzState": 1,
|
||||
"aRz": -8.57,
|
||||
"strarz": "-8.57",
|
||||
"type":"大型",
|
||||
},
|
||||
{
|
||||
"stcd": "716128301",
|
||||
"type": "sk",
|
||||
"hasRz": true,
|
||||
"stnm": "新庙水库",
|
||||
"adcd": "421181201000",
|
||||
"wscd": null,
|
||||
"importancy": 0,
|
||||
"lgtd": 115.2125,
|
||||
"lttd": 31.077222,
|
||||
"elev": 0,
|
||||
"damel": 21,
|
||||
"dsflz": 18.88,
|
||||
"fsltdz": 17.8,
|
||||
"ddz": 7.6,
|
||||
"zcxsw": 17.8,
|
||||
"drpTm": "2025-04-11T05:00:00.000Z",
|
||||
"today": 0,
|
||||
"h1": 0,
|
||||
"h3": 0,
|
||||
"h6": 0,
|
||||
"h12": 0,
|
||||
"h24": 0,
|
||||
"h48": 0,
|
||||
"drpState": 2,
|
||||
"rz": 651.46,
|
||||
"w": 0.154,
|
||||
"a_fsltdz": 633.6600000000001,
|
||||
"rzTm": "2025-04-11T05:00:00.000Z",
|
||||
"rzWarning": 1,
|
||||
"rzState": 2,
|
||||
"type":"小(2)型",
|
||||
"pic": [
|
||||
{
|
||||
"stcd": "716128301",
|
||||
"tm": "2023-03-12T06:04:00.000Z",
|
||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716128301/20230312140400.jpg"
|
||||
},
|
||||
{
|
||||
"stcd": "716128301",
|
||||
"tm": "2023-03-12T06:29:00.000Z",
|
||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716128302/20230312142900.jpg"
|
||||
}
|
||||
],
|
||||
"aRz": 633.66,
|
||||
"strarz": "633.66"
|
||||
},
|
||||
{
|
||||
"stcd": "7CS000021",
|
||||
"type": "sk",
|
||||
"hasRz": true,
|
||||
"stnm": "夏家山水库",
|
||||
"adcd": "421181104000",
|
||||
"wscd": null,
|
||||
"importancy": 0,
|
||||
"lgtd": 115.108333,
|
||||
"lttd": 30.920556,
|
||||
"elev": 0,
|
||||
"damel": 14.2,
|
||||
"dsflz": 13,
|
||||
"fsltdz": 12.55,
|
||||
"ddz": 4.8,
|
||||
"zcxsw": 12.55,
|
||||
"drpTm": "2025-04-11T06:00:00.000Z",
|
||||
"today": 0,
|
||||
"h1": 0,
|
||||
"h3": 0,
|
||||
"h6": 0,
|
||||
"h12": 0,
|
||||
"h24": 0,
|
||||
"h48": 0,
|
||||
"drpState": 2,
|
||||
"rz": 532.4,
|
||||
"w": 0.075,
|
||||
"a_fsltdz": 519.85,
|
||||
"rzTm": "2025-04-11T06:00:00.000Z",
|
||||
"rzWarning": 1,
|
||||
"rzState": 2,
|
||||
"type":"小(2)型",
|
||||
"pic": [
|
||||
{
|
||||
"stcd": "7CS000021",
|
||||
"tm": "2022-11-17T04:04:59.000Z",
|
||||
"url": "http://223.75.53.106:8891/skjgimages/2022/1117/7CS000021/20221117120459.jpg"
|
||||
},
|
||||
{
|
||||
"stcd": "7CS000021",
|
||||
"tm": "2022-11-17T04:10:28.000Z",
|
||||
"url": "http://223.75.53.106:8891/skjgimages/2022/1117/7CS000022/20221117121028.jpg"
|
||||
}
|
||||
],
|
||||
"aRz": 519.85,
|
||||
"strarz": "519.85"
|
||||
}
|
||||
]
|
||||
|
||||
function SkReal({ style }) {
|
||||
|
||||
return (
|
||||
<PanelBox
|
||||
style={style}
|
||||
title="水库列表"
|
||||
color="green"
|
||||
>
|
||||
<TableContainer style={{ height: '100%' }}>
|
||||
<Table size="small" stickyHeader>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<DpTableCell style={{ maxWidth: '30%' }} align="left">水库名称</DpTableCell>
|
||||
<DpTableCell align="center">类型</DpTableCell>
|
||||
<DpTableCell align="center">库容</DpTableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{data.map((row) => (
|
||||
<DpTableRow key={row.stcd}>
|
||||
<DpTableCell component="th" scope="row">
|
||||
<div className="table-ellipsis cursor-pointer" onClick={() => {}}>{row.stnm}</div>
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center">{row.type}</DpTableCell>
|
||||
<DpTableCell align="center">{row.w}</DpTableCell>
|
||||
</DpTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</PanelBox>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(SkReal);
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
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 data = [
|
||||
[
|
||||
"2025-06-02 15:00:00",
|
||||
134.05
|
||||
],
|
||||
[
|
||||
"2025-06-02 16:00:00",
|
||||
134.04
|
||||
],
|
||||
[
|
||||
"2025-06-02 17:00:00",
|
||||
134.03
|
||||
],
|
||||
[
|
||||
"2025-06-02 18:00:00",
|
||||
134.03
|
||||
],
|
||||
[
|
||||
"2025-06-02 19:00:00",
|
||||
134.02
|
||||
],
|
||||
[
|
||||
"2025-06-02 20:00:00",
|
||||
134.02
|
||||
],
|
||||
[
|
||||
"2025-06-02 21:00:00",
|
||||
134.02
|
||||
],
|
||||
[
|
||||
"2025-06-03 01:00:00",
|
||||
134
|
||||
],
|
||||
[
|
||||
"2025-06-03 02:00:00",
|
||||
133.99
|
||||
],
|
||||
[
|
||||
"2025-06-03 04:00:00",
|
||||
133.99
|
||||
],
|
||||
[
|
||||
"2025-06-03 06:00:00",
|
||||
133.97
|
||||
],
|
||||
[
|
||||
"2025-06-03 08:00:00",
|
||||
133.97
|
||||
],
|
||||
[
|
||||
"2025-06-03 10:00:00",
|
||||
133.97
|
||||
],
|
||||
[
|
||||
"2025-06-03 12:00:00",
|
||||
133.98
|
||||
],
|
||||
[
|
||||
"2025-06-03 13:00:00",
|
||||
133.97
|
||||
],
|
||||
[
|
||||
"2025-06-03 14:00:00",
|
||||
133.97
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
|
||||
|
||||
const AreaDrpChart = () => {
|
||||
|
||||
const color= [
|
||||
'#6187e6',
|
||||
'#77caa1',
|
||||
'#5c6988',
|
||||
'#e2b642',
|
||||
]
|
||||
|
||||
var option = {
|
||||
color: color,
|
||||
title : {
|
||||
x:'center'
|
||||
},
|
||||
tooltip : {
|
||||
trigger: 'item',
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||||
},
|
||||
// legend: {
|
||||
// orient : 'vertical',
|
||||
// x : 'left',
|
||||
// data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
|
||||
// },
|
||||
toolbox: {
|
||||
show : false,
|
||||
},
|
||||
calculable : true,
|
||||
series : [
|
||||
{
|
||||
name:'访问来源',
|
||||
type:'pie',
|
||||
radius : '65%',
|
||||
center: ['50%', '60%'],
|
||||
data:[
|
||||
{value:3, name:'大型水库'},
|
||||
{value:7, name:'中型水库'},
|
||||
{value:44, name:'小(1)型水库'},
|
||||
{value:271, name:'小(2)型水库'},
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
return (
|
||||
<ReactEcharts
|
||||
option={option}
|
||||
style={{ height: '99%', width: '100%' }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(AreaDrpChart);
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import React, { useMemo, useState } from 'react';
|
||||
import { Switch, FormControlLabel,InputLabel, Select, MenuItem,FormControl } from '@material-ui/core/index'
|
||||
import PanelBox from '../../components/PanelBox';
|
||||
import AreaDrpChart from './chart';
|
||||
|
||||
|
||||
|
||||
function DrpReal({ style }) {
|
||||
const [dimension, setDimension] =useState('ft');
|
||||
|
||||
|
||||
return (
|
||||
<PanelBox
|
||||
style={style}
|
||||
title="水库总览"
|
||||
color="green"
|
||||
>
|
||||
<div style={{width:'100%',height:"14rem",display:'flex',marginTop:'-15px'}}>
|
||||
<div style={{margin:'10px auto',width:'70%'}}>
|
||||
<AreaDrpChart data={[]} />
|
||||
</div>
|
||||
<div style={{width:'30%',display:'flex',flexDirection:'column',justifyContent:'center'}}>
|
||||
<div style={{display:'flex',alignItems:'center',color:'#cdddf7',cursor:'pointer',marginTop:'35px'}}><div style={{width:'8px',height:'8px',borderRadius:'8px',background:'#6187e6',marginRight:'10px'}}></div>大型水库</div>
|
||||
<div style={{display:'flex',alignItems:'center',color:'#cdddf7',cursor:'pointer',marginTop:'10px'}}><div style={{width:'8px',height:'8px',borderRadius:'8px',background:'#77caa1',marginRight:'10px'}}></div>中型水库</div>
|
||||
<div style={{display:'flex',alignItems:'center',color:'#cdddf7',cursor:'pointer',marginTop:'10px'}}><div style={{width:'8px',height:'8px',borderRadius:'8px',background:'#5c6988',marginRight:'10px'}}></div>小(1)型水库</div>
|
||||
<div style={{display:'flex',alignItems:'center',color:'#cdddf7',cursor:'pointer',marginTop:'10px'}}><div style={{width:'8px',height:'8px',borderRadius:'8px',background:'#e2b642',marginRight:'10px'}}></div>小(2)型水库</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{width:'100%',color:'#E0F6F7',padding:"0 15px"}}><div style={{width:'2rem',display:'inline-block'}}></div>麻城市共有 325 座水库，其中大型水库 3 座（浮桥河水库45490万m³、明山水库16900万m³、三河口水库16926万m³），中型水库 7 座（总库容约 1.627亿m³），小（1）型水库 44 座、小（2）型水库 271 座，全市水库总库容约 11.56 亿m³。</div>
|
||||
</PanelBox>
|
||||
)
|
||||
}
|
||||
|
||||
export default DrpReal;
|
||||
|
|
@ -0,0 +1,228 @@
|
|||
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 = () => {
|
||||
const x = [
|
||||
"2025-06-02 15:00:00",
|
||||
"2025-06-02 16:00:00",
|
||||
"2025-06-02 17:00:00",
|
||||
"2025-06-02 18:00:00",
|
||||
"2025-06-02 19:00:00",
|
||||
"2025-06-02 20:00:00",
|
||||
"2025-06-02 21:00:00",
|
||||
"2025-06-03 01:00:00",
|
||||
"2025-06-03 02:00:00",
|
||||
"2025-06-03 04:00:00",
|
||||
"2025-06-03 06:00:00",
|
||||
"2025-06-03 08:00:00",
|
||||
"2025-06-03 10:00:00",
|
||||
"2025-06-03 12:00:00",
|
||||
"2025-06-03 13:00:00",
|
||||
"2025-06-03 14:00:00"
|
||||
]
|
||||
const y = [
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1.02,
|
||||
1.02,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1.97,
|
||||
1.23,
|
||||
0,
|
||||
0,
|
||||
0
|
||||
]
|
||||
|
||||
const y1 = [
|
||||
13.05,
|
||||
14.04,
|
||||
14.03,
|
||||
14.03,
|
||||
13.02,
|
||||
13.02,
|
||||
13.02,
|
||||
14,
|
||||
13.99,
|
||||
13.99,
|
||||
13.97,
|
||||
13.97,
|
||||
13.97,
|
||||
13.98,
|
||||
13.97,
|
||||
13.97
|
||||
]
|
||||
|
||||
const y2 = [
|
||||
13.05,
|
||||
13.24,
|
||||
13.53,
|
||||
13.43,
|
||||
13.02,
|
||||
13.22,
|
||||
13.02,
|
||||
13,
|
||||
13.19,
|
||||
13.29,
|
||||
13.57,
|
||||
13.57,
|
||||
13.67,
|
||||
13.78,
|
||||
13.87,
|
||||
13.67
|
||||
]
|
||||
|
||||
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
// valueFormatter: (value) => value + ' 万m³'
|
||||
},
|
||||
grid: {
|
||||
top: 42,
|
||||
left: 50,
|
||||
right: 40,
|
||||
bottom: 27,
|
||||
},
|
||||
legend: {
|
||||
data: ['雨量'],
|
||||
top: '8',
|
||||
icon:'circle',
|
||||
left: 'center',
|
||||
itemWidth: 11,//11,
|
||||
itemHeight: 11,//11,
|
||||
textStyle: {
|
||||
color: '#B9BFC9',
|
||||
fontSize: 12,//12
|
||||
}
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: x,
|
||||
splitLine: {
|
||||
show: true, //隐藏X轴轴线
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.2)',
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#B9BFC9' //X轴文字颜色
|
||||
},
|
||||
formatter: val => val.substr('2020-10-14 '.length, 5),
|
||||
// rotate: 20, // 角度值：Number
|
||||
fontSize: 10,//10
|
||||
},
|
||||
axisLine: {
|
||||
show: true, //隐藏X轴轴线
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.2)',
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
name: '雨量mm',
|
||||
nameTextStyle: {
|
||||
color: '#B9BFC9',
|
||||
fontSize: 10,//10,
|
||||
padding: [0, 0, 0, -40],//[0, 0, 0, -30]//控制y轴标题位置
|
||||
},
|
||||
nameGap: 17,
|
||||
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#B9BFC9',
|
||||
fontSize: 11,//11
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
min: 0,
|
||||
max: 5,
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '雨量',
|
||||
type: 'bar',
|
||||
barWidth: 10,
|
||||
data: y,
|
||||
showSymbol: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#32e1b5'
|
||||
},
|
||||
},
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'top',
|
||||
// color: '#bbb',
|
||||
// fontSize: 12,
|
||||
// textShadowBlur: 4,
|
||||
// textShadowColor: '#6ab',
|
||||
// },
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
return (
|
||||
<ReactEcharts
|
||||
option={option}
|
||||
style={{ height: '12rem', width: '100%' }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(AreaDrpChart);
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,9 +1,10 @@
|
|||
import React, { useState } from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import PanelBox from '../../components/PanelBox';
|
||||
import clsx from 'clsx';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { Button, Grid, makeStyles } from '@material-ui/core'
|
||||
import Yb24h from './yb24h'
|
||||
import Dsld from './dsld'
|
||||
|
||||
const useStyles = makeStyles({
|
||||
root: {
|
||||
|
|
@ -31,7 +32,21 @@ const useStyles = makeStyles({
|
|||
|
||||
export default function AreaDrp({ style }) {
|
||||
const classes = useStyles();
|
||||
const dispatch = useDispatch();
|
||||
const [tab,setTab] = useState('1')
|
||||
useEffect(()=>{
|
||||
if(tab==='1'){
|
||||
dispatch.rcview.showRealContour('h24')
|
||||
}else{
|
||||
dispatch.rcview.showRealContour('h48')
|
||||
}
|
||||
|
||||
return ()=>{
|
||||
dispatch.runtime.setLayerSetting({ contour: null, dem: undefined });
|
||||
dispatch.runtime.setLayerSetting({ planeArea: null });
|
||||
dispatch.map.setLayerVisible({ ContourLayer: false });
|
||||
}
|
||||
},[tab])
|
||||
|
||||
|
||||
return (
|
||||
|
|
@ -65,6 +80,11 @@ export default function AreaDrp({ style }) {
|
|||
<Yb24h/>
|
||||
:null
|
||||
}
|
||||
{
|
||||
tab==='2'?
|
||||
<Dsld/>
|
||||
:null
|
||||
}
|
||||
</PanelBox>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,23 +2,104 @@ import clsx from 'clsx';
|
|||
import React, { useMemo, useState,useEffect } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import useRequest from '../../../../utils/useRequest';
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Checkbox,
|
||||
FormControlLabel,
|
||||
ButtonGroup,
|
||||
Button,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
IconButton,
|
||||
Collapse,
|
||||
Paper
|
||||
} from '@material-ui/core';
|
||||
import PanelBox from '../../components/PanelBox';
|
||||
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 RemoveIcon from '@material-ui/icons/Remove';
|
||||
import WarningIcon from '@material-ui/icons/Warning';
|
||||
import AddIcon from '@material-ui/icons/Add';
|
||||
import DpTableCell from '../../../../layouts/mui/DpTableCell';
|
||||
import DpTableRow from '../../../../layouts/mui/DpTableRow';
|
||||
import appconsts from '../../../../models/appconsts';
|
||||
import Table from '@material-ui/core/Table';
|
||||
import { DatePicker } from 'antd';
|
||||
import { SkRealPromise } from '../../../../models/_/real';
|
||||
import { InfoPopNames } from '../../InfoPops';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import { renderDrp, renderSkArz, renderSkRz } from '../../../../utils/renutils';
|
||||
import config from '../../../../config';
|
||||
import moment from 'moment';
|
||||
import AreaDrpChart from './chart';
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
root: {
|
||||
color: '#fff'
|
||||
},
|
||||
table: {
|
||||
'& .MuiTableCell-root': {
|
||||
color: '#fff',
|
||||
borderBottom: '1px solid rgba(255, 255, 255, 0.1)'
|
||||
}
|
||||
},
|
||||
warningRow: {
|
||||
'&.immediate': {
|
||||
backgroundColor: '#d32f2f'
|
||||
},
|
||||
'&.prepare': {
|
||||
backgroundColor: '#ed6c02'
|
||||
}
|
||||
},
|
||||
expandIcon: {
|
||||
marginRight: theme.spacing(1),
|
||||
fontSize: 20,
|
||||
cursor: 'pointer',
|
||||
transition: 'transform 0.3s',
|
||||
'&.expanded': {
|
||||
transform: 'rotate(180deg)'
|
||||
}
|
||||
},
|
||||
warningCount: {
|
||||
marginLeft: theme.spacing(1)
|
||||
},
|
||||
expandedContent: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.2)',
|
||||
padding: theme.spacing(2)
|
||||
},
|
||||
statsSection: {
|
||||
marginTop: theme.spacing(4)
|
||||
},
|
||||
statsTitle: {
|
||||
color: '#1976d2',
|
||||
marginBottom: theme.spacing(3)
|
||||
},
|
||||
warningStats: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-around',
|
||||
marginTop: theme.spacing(2)
|
||||
},
|
||||
statItem: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center'
|
||||
},
|
||||
warningIcon: {
|
||||
fontSize: 40,
|
||||
marginBottom: theme.spacing(1),
|
||||
'&.immediate': {
|
||||
color: '#d32f2f'
|
||||
},
|
||||
'&.prepare': {
|
||||
color: '#ed6c02'
|
||||
}
|
||||
},
|
||||
}));
|
||||
|
||||
const lyData = [
|
||||
{
|
||||
"id": "FE220003640420000",
|
||||
|
|
@ -2438,9 +2519,38 @@ const qyData = [
|
|||
]
|
||||
}
|
||||
]
|
||||
const ljtj = [
|
||||
{'level':'≥250',children:[],stcd:'001'},
|
||||
{'level':'100~250',children:[],stcd:'002'},
|
||||
{'level':'50~100',children:[],stcd:'003'},
|
||||
{'level':'25~50',children:[],stcd:'004'},
|
||||
{'level':'10~25',children:[],stcd:'005'},
|
||||
{'level':'0.1~10',stcd:'006',children:[
|
||||
{
|
||||
"stcd": "60848595",
|
||||
"sttp": null,
|
||||
"stnm": "田坝雨量站",
|
||||
"stlc": "咸丰县小村乡田坝",
|
||||
"drp": 0.1,
|
||||
"adcd": "422826203000000",
|
||||
"adnm": "小村乡",
|
||||
"resCode": null,
|
||||
"resName": null,
|
||||
"basCode": "FE223017470420000",
|
||||
"basName": "南河",
|
||||
"lgtd": "108.947777800",
|
||||
"lttd": "29.950277780",
|
||||
"source": null,
|
||||
"rainTag": 1,
|
||||
"yesDrp": null,
|
||||
"stype": null
|
||||
}
|
||||
]},
|
||||
]
|
||||
|
||||
export default function AreaDrp({ style }) {
|
||||
const dispatch = useDispatch();
|
||||
const classes = useStyles();
|
||||
const [params, setParams] = useState({ tm: [moment(),moment().add(1,'days')] })
|
||||
const [tabVal, setTabVal] = useState('1')
|
||||
let { data } = useRequest(SkRealPromise.get);
|
||||
|
|
@ -2458,6 +2568,14 @@ export default function AreaDrp({ style }) {
|
|||
});
|
||||
}
|
||||
}
|
||||
const [expanded, setExpanded] = useState({});
|
||||
|
||||
const handleExpand = (type) => {
|
||||
setExpanded(prev => ({
|
||||
// ...prev,
|
||||
[type]: !prev[type]
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -2488,7 +2606,7 @@ export default function AreaDrp({ style }) {
|
|||
value={params.tm}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='tabStyle' style={{padding:'5px',paddingBottom:'15px'}}>
|
||||
<span className="card-group">
|
||||
<span
|
||||
|
|
@ -2519,22 +2637,45 @@ export default function AreaDrp({ style }) {
|
|||
<Table size="small" stickyHeader>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<DpTableCell style={{ minWidth: '10rem' }} align="left">名称</DpTableCell>
|
||||
<DpTableCell style={{ minWidth: '1rem' }} align="left"></DpTableCell>
|
||||
<DpTableCell style={{ minWidth: '10rem' }} align="center">名称</DpTableCell>
|
||||
<DpTableCell style={{ minWidth: '10rem' }} align="center">雨量</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>
|
||||
<Box display="flex" alignItems="center">
|
||||
{expanded[row.stcd] ? (
|
||||
<RemoveIcon
|
||||
className={`${classes.expandIcon} expanded`}
|
||||
onClick={() => handleExpand(row.stcd)}
|
||||
/>
|
||||
) : (
|
||||
<AddIcon
|
||||
className={classes.expandIcon}
|
||||
onClick={() => handleExpand(row.stcd)}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center">
|
||||
<div className="table-ellipsis cursor-pointer" onClick={() => flyTo(row)}>{row.stnm}</div>
|
||||
</DpTableCell>
|
||||
{/* <DpTableCell align="right">{'-'}</DpTableCell> */}
|
||||
<DpTableCell align="center">{row?.rz}</DpTableCell>
|
||||
{/* <DpTableCell align="right">{renderSkArz(row)}</DpTableCell> */}
|
||||
</DpTableRow>
|
||||
<DpTableRow>
|
||||
<DpTableCell colSpan={3} style={{ padding: 0 }}>
|
||||
<Collapse in={expanded[row.stcd]} timeout="auto" unmountOnExit>
|
||||
<Box className={`${classes.expandedRow} ${row.color}`}>
|
||||
<AreaDrpChart data={[]} />
|
||||
</Box>
|
||||
</Collapse>
|
||||
</DpTableCell>
|
||||
</DpTableRow>
|
||||
</>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
|
@ -2545,22 +2686,45 @@ export default function AreaDrp({ style }) {
|
|||
<Table size="small" stickyHeader>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<DpTableCell style={{ minWidth: '10rem' }} align="left">名称</DpTableCell>
|
||||
<DpTableCell style={{ minWidth: '1rem' }} align="left"></DpTableCell>
|
||||
<DpTableCell style={{ minWidth: '10rem' }} align="center">名称</DpTableCell>
|
||||
<DpTableCell style={{ minWidth: '10rem' }} align="center">雨量</DpTableCell>
|
||||
{/* <DpTableCell align="right">水位</DpTableCell> */}
|
||||
{/* <DpTableCell align="right">超汛限</DpTableCell> */}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{lyData.map((row) => (
|
||||
<DpTableRow key={row.stcd}>
|
||||
<DpTableCell component="th" scope="row">
|
||||
<div className="table-ellipsis cursor-pointer" onClick={() => {}}>{row.name}</div>
|
||||
</DpTableCell>
|
||||
{/* <DpTableCell align="right">{'-'}</DpTableCell> */}
|
||||
<DpTableCell align="center">{'-'}</DpTableCell>
|
||||
{/* <DpTableCell align="right">{renderSkArz(row)}</DpTableCell> */}
|
||||
</DpTableRow>
|
||||
<>
|
||||
<DpTableRow key={row.id}>
|
||||
<DpTableCell component="th" scope="row">
|
||||
<Box display="flex" alignItems="center">
|
||||
{expanded[row.id] ? (
|
||||
<RemoveIcon
|
||||
className={`${classes.expandIcon} expanded`}
|
||||
onClick={() => handleExpand(row.id)}
|
||||
/>
|
||||
) : (
|
||||
<AddIcon
|
||||
className={classes.expandIcon}
|
||||
onClick={() => handleExpand(row.id)}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center">
|
||||
<div className="table-ellipsis cursor-pointer" onClick={() => {}}>{row.name}</div>
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center">{row?.drp||'0'}</DpTableCell>
|
||||
</DpTableRow>
|
||||
<DpTableRow>
|
||||
<DpTableCell colSpan={3} style={{ padding: 0 }}>
|
||||
<Collapse in={expanded[row.id]} timeout="auto" unmountOnExit>
|
||||
<Box className={`${classes.expandedRow} ${row.color}`}>
|
||||
<AreaDrpChart data={[]} />
|
||||
</Box>
|
||||
</Collapse>
|
||||
</DpTableCell>
|
||||
</DpTableRow>
|
||||
</>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
|
@ -2571,22 +2735,109 @@ export default function AreaDrp({ style }) {
|
|||
<Table size="small" stickyHeader>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<DpTableCell style={{ minWidth: '10rem' }} align="left">名称</DpTableCell>
|
||||
<DpTableCell style={{ minWidth: '10rem' }} align="center">雨量</DpTableCell>
|
||||
{/* <DpTableCell align="right">水位</DpTableCell> */}
|
||||
{/* <DpTableCell align="right">超汛限</DpTableCell> */}
|
||||
<DpTableCell style={{ minWidth: '1rem' }} align="left"></DpTableCell>
|
||||
<DpTableCell style={{ minWidth: '10rem' }} align="center">名称</DpTableCell>
|
||||
<DpTableCell style={{ minWidth: '10rem' }} align="center">雨量</DpTableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{qyData.map((row) => (
|
||||
<DpTableRow key={row.stcd}>
|
||||
<DpTableCell component="th" scope="row">
|
||||
<div className="table-ellipsis cursor-pointer" onClick={() => {}}>{row.name}</div>
|
||||
</DpTableCell>
|
||||
{/* <DpTableCell align="right">{'-'}</DpTableCell> */}
|
||||
<DpTableCell align="center">{'-'}</DpTableCell>
|
||||
{/* <DpTableCell align="right">{renderSkArz(row)}</DpTableCell> */}
|
||||
</DpTableRow>
|
||||
<>
|
||||
<DpTableRow key={row.id}>
|
||||
<DpTableCell component="th" scope="row">
|
||||
<Box display="flex" alignItems="center">
|
||||
{expanded[row.id] ? (
|
||||
<RemoveIcon
|
||||
className={`${classes.expandIcon} expanded`}
|
||||
onClick={() => handleExpand(row.id)}
|
||||
/>
|
||||
) : (
|
||||
<AddIcon
|
||||
className={classes.expandIcon}
|
||||
onClick={() => handleExpand(row.id)}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center">
|
||||
<div className="table-ellipsis cursor-pointer" onClick={() => {}}>{row.name}</div>
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center">{row?.drp||'0'}</DpTableCell>
|
||||
</DpTableRow>
|
||||
<DpTableRow>
|
||||
<DpTableCell colSpan={3} style={{ padding: 0 }}>
|
||||
<Collapse in={expanded[row.id]} timeout="auto" unmountOnExit>
|
||||
<Box className={`${classes.expandedRow} ${row.color}`}>
|
||||
<AreaDrpChart data={[]} />
|
||||
</Box>
|
||||
</Collapse>
|
||||
</DpTableCell>
|
||||
</DpTableRow>
|
||||
</>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
:null
|
||||
}
|
||||
{
|
||||
tabVal==='4'?
|
||||
<Table size="small" stickyHeader>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<DpTableCell style={{ minWidth: '1rem' }} align="left"></DpTableCell>
|
||||
<DpTableCell style={{ minWidth: '3rem' }} align="center">站名</DpTableCell>
|
||||
<DpTableCell style={{ minWidth: '6rem' }} align="center">累计雨量(mm)</DpTableCell>
|
||||
<DpTableCell style={{ minWidth: '5rem' }} align="center">所属政区</DpTableCell>
|
||||
<DpTableCell style={{ minWidth: '5rem' }} align="center">所属流域</DpTableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{ljtj.map((row) => (
|
||||
<>
|
||||
<DpTableRow key={row.stcd}>
|
||||
<DpTableCell component="th" scope="row">
|
||||
<Box display="flex" alignItems="center">
|
||||
{expanded[row.stcd] ? (
|
||||
<RemoveIcon
|
||||
className={`${classes.expandIcon} expanded`}
|
||||
onClick={() => handleExpand(row.stcd)}
|
||||
/>
|
||||
) : (
|
||||
<AddIcon
|
||||
className={classes.expandIcon}
|
||||
onClick={() => handleExpand(row.stcd)}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center">
|
||||
<div className="table-ellipsis cursor-pointer" onClick={() => {}}>{row.level+"（"+row.children.length+"）"}</div>
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center"></DpTableCell>
|
||||
<DpTableCell align="center"></DpTableCell>
|
||||
<DpTableCell align="center"></DpTableCell>
|
||||
</DpTableRow>
|
||||
<DpTableRow>
|
||||
<DpTableCell colSpan={4} style={{ padding: 0 }}>
|
||||
<Collapse in={expanded[row.stcd]} timeout="auto" unmountOnExit>
|
||||
<div style={{position:'relative'}}>
|
||||
<div style={{position:'absolute',left:'0rem'}}>
|
||||
{
|
||||
row.children.map((i,index)=>(
|
||||
<div style={{display:'flex', color:'#ffffff',padding:'10px 0',paddingLeft:"2.5rem",background:'#1c2439',width:'26.9rem'}}>
|
||||
<div style={{width:'8rem',textAlign:'center'}}>{i.stnm}</div>
|
||||
<div style={{width:'5rem',textAlign:'center'}}>{i.drp}</div>
|
||||
<div style={{width:'7rem',textAlign:'center'}}>{i.adnm}</div>
|
||||
<div style={{width:'3rem',textAlign:'center'}}>{i.basName}</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</Collapse>
|
||||
</DpTableCell>
|
||||
</DpTableRow>
|
||||
</>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,52 @@ function Item({ data, viewInfo, sendMessage }) {
|
|||
}
|
||||
|
||||
function ARzSk({ data }) {
|
||||
data = data || [];
|
||||
data = [{
|
||||
"stcd": "716129061",
|
||||
"type": "sk",
|
||||
"hasRz": true,
|
||||
"stnm": "仰天窝水库",
|
||||
"adcd": "421181201000",
|
||||
"wscd": null,
|
||||
"importancy": 0,
|
||||
"lgtd": 115.106667,
|
||||
"lttd": 31.126389,
|
||||
"elev": 0,
|
||||
"damel": 325.08,
|
||||
"dsflz": 324.18,
|
||||
"fsltdz": 323.5,
|
||||
"ddz": 319.5,
|
||||
"zcxsw": 323.5,
|
||||
"drpTm": "2025-04-11T05:00:00.000Z",
|
||||
"today": 0,
|
||||
"h1": 0,
|
||||
"h3": 0,
|
||||
"h6": 0,
|
||||
"h12": 0,
|
||||
"h24": 0,
|
||||
"h48": 0,
|
||||
"drpState": 2,
|
||||
"rz": 328.16,
|
||||
"w": 0.132,
|
||||
"a_fsltdz": 4.660000000000025,
|
||||
"rzTm": "2025-04-11T05:00:00.000Z",
|
||||
"rzWarning": 1,
|
||||
"rzState": 2,
|
||||
"pic": [
|
||||
{
|
||||
"stcd": "716129061",
|
||||
"tm": "2023-03-12T06:05:00.000Z",
|
||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716129061/20230312140500.jpg"
|
||||
},
|
||||
{
|
||||
"stcd": "716129061",
|
||||
"tm": "2023-03-12T07:25:00.000Z",
|
||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716129062/20230312152500.jpg"
|
||||
}
|
||||
],
|
||||
"aRz": 4.66,
|
||||
"strarz": "4.66"
|
||||
}];
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const flyTo = (record) => {
|
||||
|
|
|
|||
|
|
@ -22,8 +22,8 @@ function Item({ data, viewInfo, flyTo }) {
|
|||
|
||||
return (
|
||||
<div className="item">
|
||||
<div className={`header level${data.level}`}>
|
||||
</div>
|
||||
{/* <div className={`header level${data.level}`}>
|
||||
</div> */}
|
||||
<div className="content">
|
||||
<div className="main">
|
||||
<div className="title">
|
||||
|
|
@ -33,7 +33,8 @@ function Item({ data, viewInfo, flyTo }) {
|
|||
<div className="extra">{appconsts.stWarnStatus[data.status]}</div>
|
||||
</div>
|
||||
<div className="desc">
|
||||
<span>{`报警水位${rz}m，测站${appconsts.stWarnLevel[data.level]}为${brz ?? '-'}m，超${arz || '-'}m`}</span>
|
||||
{/* <span>{`报警水位${rz}m，测站${appconsts.stWarnLevel[data.level]}为${brz ?? '-'}m，超${arz || '-'}m`}</span> */}
|
||||
<span>{`报警水位${rz}m，测站${appconsts.stWarnLevel[data.level||2]}为${brz ?? '77'}m，超${'0.12'}m`}</span>
|
||||
</div>
|
||||
<div className="tail">
|
||||
<span>报警: {tm1}</span>
|
||||
|
|
|
|||
|
|
@ -40,24 +40,25 @@ export default function Warn({ style }) {
|
|||
<span
|
||||
className={clsx({ active: warnType === 'sk', 'cusor-pointer': warnType !== 'sk' })}
|
||||
onClick={() => dispatch.overallview.setWarnType('sk')}
|
||||
>超汛限水库{bxData?.aRzSk?.length ? <a className="number">{bxData?.aRzSk?.length}</a> : null}
|
||||
>水库预警{bxData?.aRzSk?.length ? <a className="number">{bxData?.aRzSk?.length}</a> : null}
|
||||
</span>
|
||||
<span
|
||||
className={clsx({ active: warnType === 'hd', 'cusor-pointer': warnType !== 'hd' })}
|
||||
onClick={() => dispatch.overallview.setWarnType('hd')}
|
||||
>河道预警{hdyj?.length ? <a className="number">{hdyj?.length}</a> : null}
|
||||
>河道预警
|
||||
{/* {hdyj?.length ? <a className="number">{hdyj?.length}</a> : null} */}
|
||||
</span>
|
||||
<span
|
||||
{/* <span
|
||||
className={clsx({ active: warnType === 'qx', 'cusor-pointer': warnType !== 'qx' })}
|
||||
onClick={() => dispatch.overallview.setWarnType('qx')}
|
||||
>气象预警{shqx?.maxLv ? <a className="number" style={{ backgroundColor: yjLevelColor(shqx.maxLv) }}>{shqx.maxLv}</a> : null}
|
||||
</span>
|
||||
</span> */}
|
||||
</span>
|
||||
}
|
||||
>
|
||||
{warnType === 'sh' ? <ShYj data={shyjData} /> : null}
|
||||
{/* {warnType === 'sk' ? <ARzSk data={bxData?.aRzSk} /> : null} */}
|
||||
{warnType === 'sk' ? <Cxxsk/> : null}
|
||||
{warnType === 'sk' ? <ARzSk data={bxData?.aRzSk} /> : null}
|
||||
{/* {warnType === 'sk' ? <Cxxsk/> : null} */}
|
||||
{warnType === 'hd' ? <Hdyj data={hdyj} /> : null}
|
||||
{warnType === 'qx' ? <Shqx data={shqx} /> : null}
|
||||
</PanelBox>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
import React, { useMemo, useState } from 'react';
|
||||
import useRequest from '../../../../utils/useRequest';
|
||||
import PanelBox from '../../components/PanelBox';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
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 appconsts from '../../../../models/appconsts';
|
||||
import { renderDrp, renderSkArz, renderSkRz } from '../../../../utils/renutils';
|
||||
|
||||
|
||||
const data = [
|
||||
{ name:'明山水库雨量站（新站）', dm:'华光潭二级...', hfsw:'224.1', hfll:'30.25', tm:'05-29 14:00' },
|
||||
{ name:'明山水库雨水情监测（新站）', dm:'龙岗假山头', hfsw:'130.55', hfll:'55.65', tm:'05-29 14:30' },
|
||||
{ name:'明山水库（水文）', dm:'昌化', hfsw:'103.22', hfll:'75.61', tm:'05-29 15:00' },
|
||||
]
|
||||
|
||||
function SkReal({ style }) {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
|
||||
return (
|
||||
<PanelBox
|
||||
style={style}
|
||||
title="预报成果"
|
||||
color="green"
|
||||
>
|
||||
<TableContainer style={{ height: '100%' }}>
|
||||
<Table size="small" stickyHeader>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<DpTableCell style={{ minWidth: '7rem' }} align="left">名称</DpTableCell>
|
||||
<DpTableCell style={{ minWidth: '8rem' }} align="center">洪峰时间</DpTableCell>
|
||||
<DpTableCell style={{ minWidth: '4.7rem' }} align="center">最高水位</DpTableCell>
|
||||
<DpTableCell style={{ minWidth: '4.8rem' }} align="center">洪峰流量</DpTableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{data.map((row) => (
|
||||
<DpTableRow key={row.stcd}>
|
||||
<DpTableCell component="th" scope="row">
|
||||
<div className="table-ellipsis cursor-pointer" onClick={() => {
|
||||
dispatch?.runtime.setInfoDlg({ layerId: 'YbcgLayer', properties: {} })
|
||||
}}>{row.name}</div>
|
||||
</DpTableCell>
|
||||
<DpTableCell align="center">{row.tm}</DpTableCell>
|
||||
<DpTableCell align="center">{row.hfsw}</DpTableCell>
|
||||
<DpTableCell align="center">{row.hfll}</DpTableCell>
|
||||
</DpTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</PanelBox>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(SkReal);
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import React, { useMemo, useState } from 'react';
|
||||
import PanelBox from '../../components/PanelBox';
|
||||
|
||||
function DrpReal({ style }) {
|
||||
|
||||
return (
|
||||
<PanelBox
|
||||
style={style}
|
||||
title="预报调度"
|
||||
color="green"
|
||||
// extra={
|
||||
// <>
|
||||
// <img src='/assets/镇下拉.jpg' style={{width:'100px', height:'30px',marginRight:'10px'}}/>
|
||||
// <img src='/assets/水厂切换.jpg' style={{width:'165px', height:'20px',marginRight:'5px'}}/>
|
||||
// </>
|
||||
// }
|
||||
>
|
||||
<img src='/assets/组 8.png' style={{width:'26rem',marginLeft:'8px',marginTop:'0.8rem'}}/>
|
||||
</PanelBox>
|
||||
)
|
||||
}
|
||||
|
||||
export default DrpReal;
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import React, { useMemo, useState } from 'react';
|
||||
import PanelBox from '../../components/PanelBox';
|
||||
|
||||
function DrpReal({ style }) {
|
||||
|
||||
return (
|
||||
<PanelBox
|
||||
style={style}
|
||||
title="预警成果"
|
||||
color="green"
|
||||
// extra={
|
||||
// <>
|
||||
// <img src='/assets/镇下拉.jpg' style={{width:'100px', height:'30px',marginRight:'10px'}}/>
|
||||
// <img src='/assets/水厂切换.jpg' style={{width:'165px', height:'20px',marginRight:'5px'}}/>
|
||||
// </>
|
||||
// }
|
||||
>
|
||||
<img src='/assets/组 4.png' style={{width:'23rem',marginLeft:'1.7rem',marginTop:'1rem'}}/>
|
||||
</PanelBox>
|
||||
)
|
||||
}
|
||||
|
||||
export default DrpReal;
|
||||
|
|
@ -0,0 +1,304 @@
|
|||
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 = () => {
|
||||
const x = [
|
||||
"2025-06-02 15:00:00",
|
||||
"2025-06-02 16:00:00",
|
||||
"2025-06-02 17:00:00",
|
||||
"2025-06-02 18:00:00",
|
||||
"2025-06-02 19:00:00",
|
||||
"2025-06-02 20:00:00",
|
||||
"2025-06-02 21:00:00",
|
||||
"2025-06-03 01:00:00",
|
||||
"2025-06-03 02:00:00",
|
||||
"2025-06-03 04:00:00",
|
||||
"2025-06-03 06:00:00",
|
||||
"2025-06-03 08:00:00",
|
||||
"2025-06-03 10:00:00",
|
||||
"2025-06-03 12:00:00",
|
||||
"2025-06-03 13:00:00",
|
||||
"2025-06-03 14:00:00"
|
||||
]
|
||||
const y = [
|
||||
134.05,
|
||||
134.04,
|
||||
134.03,
|
||||
134.03,
|
||||
134.02,
|
||||
134.02,
|
||||
134.02,
|
||||
134,
|
||||
133.99,
|
||||
133.99,
|
||||
133.97,
|
||||
133.97,
|
||||
133.97,
|
||||
133.98,
|
||||
133.97,
|
||||
133.97
|
||||
]
|
||||
|
||||
const y1 = [
|
||||
13.05,
|
||||
14.04,
|
||||
14.03,
|
||||
14.03,
|
||||
13.02,
|
||||
13.02,
|
||||
13.02,
|
||||
14,
|
||||
13.99,
|
||||
13.99,
|
||||
13.97,
|
||||
13.97,
|
||||
13.97,
|
||||
13.98,
|
||||
13.97,
|
||||
13.97
|
||||
]
|
||||
|
||||
const y2 = [
|
||||
13.05,
|
||||
13.24,
|
||||
13.53,
|
||||
13.43,
|
||||
13.02,
|
||||
13.22,
|
||||
13.02,
|
||||
13,
|
||||
13.19,
|
||||
13.29,
|
||||
13.57,
|
||||
13.57,
|
||||
13.67,
|
||||
13.78,
|
||||
13.87,
|
||||
13.67
|
||||
]
|
||||
|
||||
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
// valueFormatter: (value) => value + ' 万m³'
|
||||
},
|
||||
grid: {
|
||||
top: 42,
|
||||
left: 50,
|
||||
right: 40,
|
||||
bottom: 27,
|
||||
},
|
||||
legend: {
|
||||
data: ['水位','入库流量', '出库流量',],
|
||||
top: '8',
|
||||
icon:'circle',
|
||||
left: 'center',
|
||||
itemWidth: 11,//11,
|
||||
itemHeight: 11,//11,
|
||||
textStyle: {
|
||||
color: '#B9BFC9',
|
||||
fontSize: 12,//12
|
||||
}
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: x,
|
||||
splitLine: {
|
||||
show: true, //隐藏X轴轴线
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.2)',
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#B9BFC9' //X轴文字颜色
|
||||
},
|
||||
formatter: val => val.substr('2020-10-14 '.length, 5),
|
||||
// rotate: 20, // 角度值：Number
|
||||
fontSize: 10,//10
|
||||
},
|
||||
axisLine: {
|
||||
show: true, //隐藏X轴轴线
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.2)',
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
name: '水位m',
|
||||
nameTextStyle: {
|
||||
color: '#B9BFC9',
|
||||
fontSize: 10,//10,
|
||||
padding: [0, 0, 0, -40],//[0, 0, 0, -30]//控制y轴标题位置
|
||||
},
|
||||
nameGap: 17,
|
||||
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#B9BFC9',
|
||||
fontSize: 11,//11
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
min: 133,
|
||||
// max: 135,
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
position: 'right',
|
||||
name: '流量m³/s',
|
||||
nameTextStyle: {
|
||||
color: '#B9BFC9',
|
||||
fontSize: 10,//10,
|
||||
padding: [0, 0, 0, -40],//[0, 0, 0, -30]//控制y轴标题位置
|
||||
},
|
||||
nameGap: 17,
|
||||
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#B9BFC9',
|
||||
fontSize: 11,//11
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
min: 0,
|
||||
max: 30,
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '水位',
|
||||
type: 'line',
|
||||
barWidth: 10,
|
||||
data: y,
|
||||
showSymbol: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#32e1b5'
|
||||
},
|
||||
},
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'top',
|
||||
// color: '#bbb',
|
||||
// fontSize: 12,
|
||||
// textShadowBlur: 4,
|
||||
// textShadowColor: '#6ab',
|
||||
// },
|
||||
},
|
||||
{
|
||||
yAxisIndex: 1,
|
||||
name: '入库流量',
|
||||
type: 'line',
|
||||
barWidth: 10,
|
||||
showSymbol: false,
|
||||
data: y1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#f19932'
|
||||
},
|
||||
},
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'top',
|
||||
// color: '#bbb',
|
||||
// fontSize: 12,
|
||||
// textShadowBlur: 4,
|
||||
// textShadowColor: '#6ab',
|
||||
// },
|
||||
},
|
||||
{
|
||||
yAxisIndex: 1,
|
||||
name: '出库流量',
|
||||
type: 'line',
|
||||
barWidth: 10,
|
||||
showSymbol: false,
|
||||
data: y2,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#e1554e'
|
||||
},
|
||||
},
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'top',
|
||||
// color: '#bbb',
|
||||
// fontSize: 12,
|
||||
// textShadowBlur: 4,
|
||||
// textShadowColor: '#6ab',
|
||||
// },
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
return (
|
||||
<ReactEcharts
|
||||
option={option}
|
||||
style={{ height: '99%', width: '100%' }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(AreaDrpChart);
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
import React, { useMemo, useState } from 'react';
|
||||
import { Switch, FormControlLabel,InputLabel, Select, MenuItem,FormControl } from '@material-ui/core/index'
|
||||
import PanelBox from '../../components/PanelBox';
|
||||
import AreaDrpChart from './chart';
|
||||
|
||||
|
||||
|
||||
function DrpReal({ style }) {
|
||||
const [dimension, setDimension] =useState('ft');
|
||||
|
||||
|
||||
return (
|
||||
<PanelBox
|
||||
style={style}
|
||||
title="重要水库预报"
|
||||
color="green"
|
||||
extra={
|
||||
<>
|
||||
{/* <img src='/assets/年下拉3.jpg' style={{width:'100px', height:'30px',marginRight:'10px'}}/> */}
|
||||
<div style={{height:'30px',overflow:'hidden'}}>
|
||||
<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">水库1</MenuItem>
|
||||
<MenuItem value="lc">水库2</MenuItem>
|
||||
<MenuItem value="mz">水库3</MenuItem>
|
||||
<MenuItem value="sb">水库4</MenuItem>
|
||||
</Select>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<AreaDrpChart data={[]} />
|
||||
</PanelBox>
|
||||
)
|
||||
}
|
||||
|
||||
export default DrpReal;
|
||||
Loading…
Reference in New Issue