lsf-dev
parent
89ba5856d8
commit
c8729f8010
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;
|
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() {
|
export async function hdyjLatestClosed() {
|
||||||
|
|
|
||||||
|
|
@ -24,6 +24,25 @@ export const DrpRealPromise = new CachePromise(
|
||||||
|
|
||||||
() => fetch(`${process.env.PUBLIC_URL}/data/drpReal.json`)
|
() => fetch(`${process.env.PUBLIC_URL}/data/drpReal.json`)
|
||||||
.then((response) => response.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),
|
.catch(() => null),
|
||||||
5000
|
5000
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import { parseGeoJSONFeature } from "../../utils/tools";
|
import { parseGeoJSONFeature } from "../../utils/tools";
|
||||||
import { DCPJ_TYPES, SLGC_TYPES } from "../../views/Home/consts";
|
import { DCPJ_TYPES, SLGC_TYPES } from "../../views/Home/consts";
|
||||||
|
import { parseGeoJSON } from "../../utils/tools";
|
||||||
function initState() {
|
function initState() {
|
||||||
return {
|
return {
|
||||||
calculating: false,
|
calculating: false,
|
||||||
|
|
@ -148,7 +148,7 @@ const map = {
|
||||||
setView(id) {
|
setView(id) {
|
||||||
let layerVisible = {};
|
let layerVisible = {};
|
||||||
const map = window.__mapref
|
const map = window.__mapref
|
||||||
if (id === 0 || id === 1 || id == 503) {
|
if (id === 1 || id == 503) {
|
||||||
layerVisible = {
|
layerVisible = {
|
||||||
RealDrpLayer: true,
|
RealDrpLayer: true,
|
||||||
RealHDLayer: true,
|
RealHDLayer: true,
|
||||||
|
|
@ -164,12 +164,15 @@ const map = {
|
||||||
} else if (id === 0) {
|
} else if (id === 0) {
|
||||||
layerVisible = {
|
layerVisible = {
|
||||||
RealDrpLayer: true,
|
RealDrpLayer: true,
|
||||||
RealHDLayer: true,
|
RealHDLayer: false,
|
||||||
RealSkLayer: true,
|
RealSkLayer: false,
|
||||||
PicStLayer: true,
|
PicStLayer: false,
|
||||||
RivlLayer: true,
|
RivlLayer: true,
|
||||||
YuwaiLayer: true,
|
YuwaiLayer: false,
|
||||||
|
AdcdLayer: true,
|
||||||
WataLayer: false,
|
WataLayer: false,
|
||||||
|
RealSkLayerQ2:true,
|
||||||
|
RealHDLayerQ2:true,
|
||||||
}
|
}
|
||||||
Object.keys(DCPJ_TYPES).forEach(key => {
|
Object.keys(DCPJ_TYPES).forEach(key => {
|
||||||
layerVisible['Dcpj_' + key + 'Layer'] = false;
|
layerVisible['Dcpj_' + key + 'Layer'] = false;
|
||||||
|
|
@ -224,6 +227,21 @@ const map = {
|
||||||
Object.keys(DCPJ_TYPES).forEach(key => {
|
Object.keys(DCPJ_TYPES).forEach(key => {
|
||||||
layerVisible['Dcpj_' + key + 'Layer'] = false;
|
layerVisible['Dcpj_' + key + 'Layer'] = false;
|
||||||
});
|
});
|
||||||
|
} else if (id === 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) {
|
} else if (id === 201) {
|
||||||
layerVisible = {
|
layerVisible = {
|
||||||
RealDrpLayer: true,
|
RealDrpLayer: true,
|
||||||
|
|
@ -440,6 +458,14 @@ const map = {
|
||||||
dispatch.runtime.setFeaturePop(null);
|
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) {
|
if (id === 201 || id === 205) {
|
||||||
dispatch.map.setLayerSetting({ dom: false });
|
dispatch.map.setLayerSetting({ dom: false });
|
||||||
map.setLayoutProperty('热力图', 'visibility', 'visible');
|
map.setLayoutProperty('热力图', 'visibility', 'visible');
|
||||||
|
|
|
||||||
|
|
@ -52,6 +52,12 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
||||||
{ key: '病险水库综述', style: { flexShink: 0 } },
|
{ key: '病险水库综述', style: { flexShink: 0 } },
|
||||||
{ 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) {
|
else if (view === 201) {
|
||||||
left = [
|
left = [
|
||||||
|
|
@ -92,6 +98,12 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
||||||
{ key: '水库管理', style: { height: '40rem', flexGrow: 1 } },
|
{ key: '水库管理', style: { height: '40rem', flexGrow: 1 } },
|
||||||
];
|
];
|
||||||
leftFullHeight = true;
|
leftFullHeight = true;
|
||||||
|
} else if (view === 207) {
|
||||||
|
left = [
|
||||||
|
{ key: '天气' },
|
||||||
|
{ key: '水库总览', style: { height: '24rem', flexGrow: 1 } },
|
||||||
|
{ key: '水库列表', style: { height: '24rem', flexGrow: 1 } },
|
||||||
|
];
|
||||||
} else if (view === 301) {
|
} else if (view === 301) {
|
||||||
left = [
|
left = [
|
||||||
{ key: '天气' },
|
{ key: '天气' },
|
||||||
|
|
@ -232,7 +244,9 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
||||||
} else if (view === 5) {
|
} else if (view === 5) {
|
||||||
right = [
|
right = [
|
||||||
{ key: '警报' },
|
{ key: '警报' },
|
||||||
{ key: '气象预警综述' },
|
// { key: '气象预警综述' },
|
||||||
|
{ key: '河流重要断面预报', style: { height: '40%', flexGrow: 1 } },
|
||||||
|
{ key: '重要水库预报', style: { height: '18rem', flexGrow: 1 } },
|
||||||
];
|
];
|
||||||
} else if (view === 6) {
|
} else if (view === 6) {
|
||||||
right = [
|
right = [
|
||||||
|
|
@ -243,6 +257,14 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
||||||
|
|
||||||
];
|
];
|
||||||
rightFullHeight=true
|
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) {
|
} else if (view === 201) {
|
||||||
right = [
|
right = [
|
||||||
{ key: '警报' },
|
{ key: '警报' },
|
||||||
|
|
@ -268,6 +290,12 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
||||||
right = [
|
right = [
|
||||||
{ key: '警报' },
|
{ key: '警报' },
|
||||||
];
|
];
|
||||||
|
} else if (view === 207) {
|
||||||
|
right = [
|
||||||
|
{ key: '警报' },
|
||||||
|
{ key: '关联站点',style: { height: '18rem', flexGrow: 1 } },
|
||||||
|
|
||||||
|
];
|
||||||
} else if (view === 301) {
|
} else if (view === 301) {
|
||||||
right = [
|
right = [
|
||||||
// { key: '警报' },
|
// { 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);
|
||||||
|
|
@ -32,6 +32,9 @@ import PdfDlg from './PdfDlg'
|
||||||
import SyjcDlg from './SyjcDlg'
|
import SyjcDlg from './SyjcDlg'
|
||||||
import SljcDlg from './SljcDlg'
|
import SljcDlg from './SljcDlg'
|
||||||
import BjDlg from './BjDlg'
|
import BjDlg from './BjDlg'
|
||||||
|
import YbcgDlg from './YbcgDlg'
|
||||||
|
import DdcgDlg from './DdcgDlg'
|
||||||
|
import FadbDlg from './FadbDlg'
|
||||||
|
|
||||||
|
|
||||||
function InfoDlg() {
|
function InfoDlg() {
|
||||||
|
|
@ -107,8 +110,14 @@ function InfoDlg() {
|
||||||
return <PdfDlg record={properties} onClose={handleClose} />
|
return <PdfDlg record={properties} onClose={handleClose} />
|
||||||
}else if (layerId === 'BjLayer') {
|
}else if (layerId === 'BjLayer') {
|
||||||
return <BjDlg record={properties} onClose={handleClose} />
|
return <BjDlg 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;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,8 @@
|
||||||
import RealDrpLayer from "./realdrplayer";
|
import RealDrpLayer from "./realdrplayer";
|
||||||
import RealHDLayer from "./realhdlayer";
|
import RealHDLayer from "./realhdlayer";
|
||||||
|
import RealHDLayerQ2 from "./realhdlayerQ2";
|
||||||
import RealSkLayer from "./realsklayer";
|
import RealSkLayer from "./realsklayer";
|
||||||
|
import RealSkLayerQ2 from "./realsklayerQ2";
|
||||||
import sources from "./sources";
|
import sources from "./sources";
|
||||||
|
|
||||||
import base from "./base";
|
import base from "./base";
|
||||||
|
|
@ -67,7 +69,11 @@ class LayerMgr {
|
||||||
|
|
||||||
this.layers.push(new RealDrpLayer());
|
this.layers.push(new RealDrpLayer());
|
||||||
this.layers.push(new RealHDLayer());
|
this.layers.push(new RealHDLayer());
|
||||||
|
this.layers.push(new RealHDLayerQ2());
|
||||||
this.layers.push(new RealSkLayer());
|
this.layers.push(new RealSkLayer());
|
||||||
|
this.layers.push(new RealSkLayerQ2());
|
||||||
|
|
||||||
|
|
||||||
this.layers.push(new BxSkLayer());
|
this.layers.push(new BxSkLayer());
|
||||||
this.layers.push(new YuwaiLayer());
|
this.layers.push(new YuwaiLayer());
|
||||||
this.layers.push(new PicStLayer());
|
this.layers.push(new PicStLayer());
|
||||||
|
|
@ -170,8 +176,11 @@ class LayerMgr {
|
||||||
this.layerMap.PumpLayer.getStyle(),
|
this.layerMap.PumpLayer.getStyle(),
|
||||||
|
|
||||||
this.layerMap.RealSkLayer.getStyle(),
|
this.layerMap.RealSkLayer.getStyle(),
|
||||||
|
this.layerMap.RealSkLayerQ2.getStyle(),
|
||||||
|
|
||||||
this.layerMap.BxSkLayer.getStyle(),
|
this.layerMap.BxSkLayer.getStyle(),
|
||||||
this.layerMap.RealHDLayer.getStyle(),
|
this.layerMap.RealHDLayer.getStyle(),
|
||||||
|
this.layerMap.RealHDLayerQ2.getStyle(),
|
||||||
this.layerMap.RealDrpLayer.getStyle(0),
|
this.layerMap.RealDrpLayer.getStyle(0),
|
||||||
this.layerMap.RealDrpLayer.getStyle(1),
|
this.layerMap.RealDrpLayer.getStyle(1),
|
||||||
this.layerMap.YuwaiLayer.getStyle(0),
|
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,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -114,41 +114,13 @@ export default class RealSkLayer extends BaseLayer {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
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,
|
|
||||||
}]
|
|
||||||
}
|
}
|
||||||
|
data.map((item)=>{
|
||||||
|
if(item.stnm==='夏家山水库'){
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
const list = data.filter(o=>{
|
const list = data.filter(o=>{
|
||||||
if(o.stnm==='青山垸水库'||o.stnm==='七角尖水库'||o.stnm==='杨树庵水库'||o.stnm==='石鼓庙水库'||o.stnm==='张家凹水库'||o.stnm==='大坳水库'){
|
if(o.stnm==='青山垸水库'||o.stnm==='七角尖水库'||o.stnm==='杨树庵水库'||o.stnm==='石鼓庙水库'||o.stnm==='张家凹水库'||o.stnm==='大坳水库'){
|
||||||
return false
|
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 ContourLayer from "./contourlayer";
|
||||||
import RealDrpLayer from "./realdrplayer";
|
import RealDrpLayer from "./realdrplayer";
|
||||||
import RealHDLayer from "./realhdlayer";
|
import RealHDLayer from "./realhdlayer";
|
||||||
|
import RealHDLayerQ2 from "./realhdlayerQ2";
|
||||||
import RealSkLayer from "./realsklayer";
|
import RealSkLayer from "./realsklayer";
|
||||||
|
import RealSkLayerQ2 from "./realsklayerQ2";
|
||||||
import { DCPJ_TYPES } from "../../consts";
|
import { DCPJ_TYPES } from "../../consts";
|
||||||
import WataLayer from "./watalayer";
|
import WataLayer from "./watalayer";
|
||||||
import PlaneAreaLayer from "./planarealayer";
|
import PlaneAreaLayer from "./planarealayer";
|
||||||
|
|
@ -228,10 +230,18 @@ const sources = {
|
||||||
type: 'geojson',
|
type: 'geojson',
|
||||||
data: { type: 'FeatureCollection', features: [] },
|
data: { type: 'FeatureCollection', features: [] },
|
||||||
},
|
},
|
||||||
|
[RealHDLayerQ2.SourceName]: {
|
||||||
|
type: 'geojson',
|
||||||
|
data: { type: 'FeatureCollection', features: [] },
|
||||||
|
},
|
||||||
[RealSkLayer.SourceName]: {
|
[RealSkLayer.SourceName]: {
|
||||||
type: 'geojson',
|
type: 'geojson',
|
||||||
data: { type: 'FeatureCollection', features: [] },
|
data: { type: 'FeatureCollection', features: [] },
|
||||||
},
|
},
|
||||||
|
[RealSkLayerQ2.SourceName]: {
|
||||||
|
type: 'geojson',
|
||||||
|
data: { type: 'FeatureCollection', features: [] },
|
||||||
|
},
|
||||||
[PicStLayer.SourceName]: {
|
[PicStLayer.SourceName]: {
|
||||||
type: 'geojson',
|
type: 'geojson',
|
||||||
data: { type: 'FeatureCollection', features: [] },
|
data: { type: 'FeatureCollection', features: [] },
|
||||||
|
|
|
||||||
|
|
@ -100,6 +100,16 @@ import FhxsTqyb from './panels/FhxsTqyb'
|
||||||
import FhxsSq from './panels/FhxsSq'
|
import FhxsSq from './panels/FhxsSq'
|
||||||
import FhxsAreaDrp from './panels/FhxsAreaDrp'
|
import FhxsAreaDrp from './panels/FhxsAreaDrp'
|
||||||
import Tqyb24h from './panels/Tqyb24h'
|
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'
|
||||||
|
|
||||||
export default function PanelIndex({ name, style, ...params }) {
|
export default function PanelIndex({ name, style, ...params }) {
|
||||||
if (name === '天气') {
|
if (name === '天气') {
|
||||||
|
|
@ -302,7 +312,28 @@ export default function PanelIndex({ name, style, ...params }) {
|
||||||
return <FhxsSq style={style} />
|
return <FhxsSq style={style} />
|
||||||
} else if (name === '未来24h预报') {
|
} else if (name === '未来24h预报') {
|
||||||
return <Tqyb24h style={style} />
|
return <Tqyb24h style={style} />
|
||||||
|
} 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 (
|
return (
|
||||||
<PanelBox style={style} title={name} color="red">
|
<PanelBox style={style} title={name} color="red">
|
||||||
<p>not impl</p>
|
<p>not impl</p>
|
||||||
|
|
|
||||||
|
|
@ -15,9 +15,12 @@ const VIEWS = [
|
||||||
{ id: 3, title: '预案', img: '/assets/menu/辅助决策.png' },
|
{ id: 3, title: '预案', img: '/assets/menu/辅助决策.png' },
|
||||||
{ id: 4, title: '降雨中心', img: '/assets/menu/预警分析.png' },
|
{ id: 4, title: '降雨中心', img: '/assets/menu/预警分析.png' },
|
||||||
{ id: 5, 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: 200, title: '水库', img: '/assets/menu/水库专题.png',children:[
|
||||||
|
{ id: 207, title: '水库总览', img: '/assets/menu/水库管理.png' },
|
||||||
{ id: 201, title: '雨情监测', img: '/assets/menu/雨情监测.png' },
|
{ id: 201, title: '雨情监测', img: '/assets/menu/雨情监测.png' },
|
||||||
{ id: 202, title: '水情监测', img: '/assets/menu/水情监测.png' },
|
{ id: 202, title: '水情监测', img: '/assets/menu/水情监测.png' },
|
||||||
{ id: 203, title: '安全监测', img: '/assets/menu/安全监测.png' },
|
{ id: 203, title: '安全监测', img: '/assets/menu/安全监测.png' },
|
||||||
|
|
|
||||||
|
|
@ -82,8 +82,6 @@ export default function Demo1() {
|
||||||
</CSSTransition>
|
</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 }) {
|
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 (
|
return (
|
||||||
|
|
@ -39,10 +167,11 @@ function DrpReal({ style }) {
|
||||||
// }
|
// }
|
||||||
// }}
|
// }}
|
||||||
>
|
>
|
||||||
<MenuItem value="ft">水情站1</MenuItem>
|
{
|
||||||
<MenuItem value="lc">水情站2</MenuItem>
|
data.map((item)=>
|
||||||
<MenuItem value="mz">水情站3</MenuItem>
|
<MenuItem value={item.stcd}>{item.stnm}</MenuItem>
|
||||||
<MenuItem value="sb">水情站4</MenuItem>
|
)
|
||||||
|
}
|
||||||
</Select>
|
</Select>
|
||||||
</div>
|
</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>
|
<div>
|
||||||
<span className={classes.titleDate}>{tm1 || '-'}</span>至<span className={classes.titleDate}>{tm2 || '-'}</span>
|
<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.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 onClick={() => showRecord(h24?.max)} className={classes.stname}>{h24?.max?.stnm || '-'}</span>
|
||||||
，降雨量<span className={classes.number}>{strNumber(h24?.max?.value, '-')}</span>mm
|
，降雨量<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>个</>)}
|
{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 PanelBox from '../../components/PanelBox';
|
||||||
import clsx from 'clsx';
|
import clsx from 'clsx';
|
||||||
import { useDispatch, useSelector } from 'react-redux';
|
import { useDispatch, useSelector } from 'react-redux';
|
||||||
import { Button, Grid, makeStyles } from '@material-ui/core'
|
import { Button, Grid, makeStyles } from '@material-ui/core'
|
||||||
import Yb24h from './yb24h'
|
import Yb24h from './yb24h'
|
||||||
|
import Dsld from './dsld'
|
||||||
|
|
||||||
const useStyles = makeStyles({
|
const useStyles = makeStyles({
|
||||||
root: {
|
root: {
|
||||||
|
|
@ -31,7 +32,21 @@ const useStyles = makeStyles({
|
||||||
|
|
||||||
export default function AreaDrp({ style }) {
|
export default function AreaDrp({ style }) {
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
|
const dispatch = useDispatch();
|
||||||
const [tab,setTab] = useState('1')
|
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 (
|
return (
|
||||||
|
|
@ -65,6 +80,11 @@ export default function AreaDrp({ style }) {
|
||||||
<Yb24h/>
|
<Yb24h/>
|
||||||
:null
|
:null
|
||||||
}
|
}
|
||||||
|
{
|
||||||
|
tab==='2'?
|
||||||
|
<Dsld/>
|
||||||
|
:null
|
||||||
|
}
|
||||||
</PanelBox>
|
</PanelBox>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,23 +2,104 @@ import clsx from 'clsx';
|
||||||
import React, { useMemo, useState,useEffect } from 'react';
|
import React, { useMemo, useState,useEffect } from 'react';
|
||||||
import { useDispatch, useSelector } from 'react-redux';
|
import { useDispatch, useSelector } from 'react-redux';
|
||||||
import useRequest from '../../../../utils/useRequest';
|
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 PanelBox from '../../components/PanelBox';
|
||||||
import TableContainer from '@material-ui/core/TableContainer';
|
import RemoveIcon from '@material-ui/icons/Remove';
|
||||||
import TableBody from '@material-ui/core/TableBody';
|
import WarningIcon from '@material-ui/icons/Warning';
|
||||||
import TableHead from '@material-ui/core/TableHead';
|
import AddIcon from '@material-ui/icons/Add';
|
||||||
import TableRow from '@material-ui/core/TableRow';
|
|
||||||
import DpTableCell from '../../../../layouts/mui/DpTableCell';
|
import DpTableCell from '../../../../layouts/mui/DpTableCell';
|
||||||
import DpTableRow from '../../../../layouts/mui/DpTableRow';
|
import DpTableRow from '../../../../layouts/mui/DpTableRow';
|
||||||
import appconsts from '../../../../models/appconsts';
|
import appconsts from '../../../../models/appconsts';
|
||||||
import Table from '@material-ui/core/Table';
|
|
||||||
import { DatePicker } from 'antd';
|
import { DatePicker } from 'antd';
|
||||||
import { SkRealPromise } from '../../../../models/_/real';
|
import { SkRealPromise } from '../../../../models/_/real';
|
||||||
import { InfoPopNames } from '../../InfoPops';
|
import { InfoPopNames } from '../../InfoPops';
|
||||||
|
import { makeStyles } from '@material-ui/core/styles';
|
||||||
import { renderDrp, renderSkArz, renderSkRz } from '../../../../utils/renutils';
|
import { renderDrp, renderSkArz, renderSkRz } from '../../../../utils/renutils';
|
||||||
import config from '../../../../config';
|
import config from '../../../../config';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
|
import AreaDrpChart from './chart';
|
||||||
|
|
||||||
const { RangePicker } = DatePicker;
|
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 = [
|
const lyData = [
|
||||||
{
|
{
|
||||||
"id": "FE220003640420000",
|
"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 }) {
|
export default function AreaDrp({ style }) {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
|
const classes = useStyles();
|
||||||
const [params, setParams] = useState({ tm: [moment(),moment().add(1,'days')] })
|
const [params, setParams] = useState({ tm: [moment(),moment().add(1,'days')] })
|
||||||
const [tabVal, setTabVal] = useState('1')
|
const [tabVal, setTabVal] = useState('1')
|
||||||
let { data } = useRequest(SkRealPromise.get);
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|
@ -2488,7 +2606,7 @@ export default function AreaDrp({ style }) {
|
||||||
value={params.tm}
|
value={params.tm}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='tabStyle' style={{padding:'5px',paddingBottom:'15px'}}>
|
<div className='tabStyle' style={{padding:'5px',paddingBottom:'15px'}}>
|
||||||
<span className="card-group">
|
<span className="card-group">
|
||||||
<span
|
<span
|
||||||
|
|
@ -2519,22 +2637,45 @@ export default function AreaDrp({ style }) {
|
||||||
<Table size="small" stickyHeader>
|
<Table size="small" stickyHeader>
|
||||||
<TableHead>
|
<TableHead>
|
||||||
<TableRow>
|
<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 style={{ minWidth: '10rem' }} align="center">雨量</DpTableCell>
|
||||||
{/* <DpTableCell align="right">水位</DpTableCell> */}
|
|
||||||
{/* <DpTableCell align="right">超汛限</DpTableCell> */}
|
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableHead>
|
</TableHead>
|
||||||
<TableBody>
|
<TableBody>
|
||||||
{sortedData.map((row) => (
|
{sortedData.map((row) => (
|
||||||
|
<>
|
||||||
<DpTableRow key={row.stcd}>
|
<DpTableRow key={row.stcd}>
|
||||||
<DpTableCell component="th" scope="row">
|
<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>
|
||||||
{/* <DpTableCell align="right">{'-'}</DpTableCell> */}
|
|
||||||
<DpTableCell align="center">{row?.rz}</DpTableCell>
|
<DpTableCell align="center">{row?.rz}</DpTableCell>
|
||||||
{/* <DpTableCell align="right">{renderSkArz(row)}</DpTableCell> */}
|
|
||||||
</DpTableRow>
|
</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>
|
</TableBody>
|
||||||
</Table>
|
</Table>
|
||||||
|
|
@ -2545,22 +2686,45 @@ export default function AreaDrp({ style }) {
|
||||||
<Table size="small" stickyHeader>
|
<Table size="small" stickyHeader>
|
||||||
<TableHead>
|
<TableHead>
|
||||||
<TableRow>
|
<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 style={{ minWidth: '10rem' }} align="center">雨量</DpTableCell>
|
||||||
{/* <DpTableCell align="right">水位</DpTableCell> */}
|
|
||||||
{/* <DpTableCell align="right">超汛限</DpTableCell> */}
|
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableHead>
|
</TableHead>
|
||||||
<TableBody>
|
<TableBody>
|
||||||
{lyData.map((row) => (
|
{lyData.map((row) => (
|
||||||
<DpTableRow key={row.stcd}>
|
<>
|
||||||
<DpTableCell component="th" scope="row">
|
<DpTableRow key={row.id}>
|
||||||
<div className="table-ellipsis cursor-pointer" onClick={() => {}}>{row.name}</div>
|
<DpTableCell component="th" scope="row">
|
||||||
</DpTableCell>
|
<Box display="flex" alignItems="center">
|
||||||
{/* <DpTableCell align="right">{'-'}</DpTableCell> */}
|
{expanded[row.id] ? (
|
||||||
<DpTableCell align="center">{'-'}</DpTableCell>
|
<RemoveIcon
|
||||||
{/* <DpTableCell align="right">{renderSkArz(row)}</DpTableCell> */}
|
className={`${classes.expandIcon} expanded`}
|
||||||
</DpTableRow>
|
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>
|
</TableBody>
|
||||||
</Table>
|
</Table>
|
||||||
|
|
@ -2571,22 +2735,109 @@ export default function AreaDrp({ style }) {
|
||||||
<Table size="small" stickyHeader>
|
<Table size="small" stickyHeader>
|
||||||
<TableHead>
|
<TableHead>
|
||||||
<TableRow>
|
<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 style={{ minWidth: '10rem' }} align="center">雨量</DpTableCell>
|
||||||
{/* <DpTableCell align="right">超汛限</DpTableCell> */}
|
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableHead>
|
</TableHead>
|
||||||
<TableBody>
|
<TableBody>
|
||||||
{qyData.map((row) => (
|
{qyData.map((row) => (
|
||||||
<DpTableRow key={row.stcd}>
|
<>
|
||||||
<DpTableCell component="th" scope="row">
|
<DpTableRow key={row.id}>
|
||||||
<div className="table-ellipsis cursor-pointer" onClick={() => {}}>{row.name}</div>
|
<DpTableCell component="th" scope="row">
|
||||||
</DpTableCell>
|
<Box display="flex" alignItems="center">
|
||||||
{/* <DpTableCell align="right">{'-'}</DpTableCell> */}
|
{expanded[row.id] ? (
|
||||||
<DpTableCell align="center">{'-'}</DpTableCell>
|
<RemoveIcon
|
||||||
{/* <DpTableCell align="right">{renderSkArz(row)}</DpTableCell> */}
|
className={`${classes.expandIcon} expanded`}
|
||||||
</DpTableRow>
|
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>
|
</TableBody>
|
||||||
</Table>
|
</Table>
|
||||||
|
|
|
||||||
|
|
@ -36,7 +36,52 @@ function Item({ data, viewInfo, sendMessage }) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function ARzSk({ data }) {
|
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 dispatch = useDispatch();
|
||||||
|
|
||||||
const flyTo = (record) => {
|
const flyTo = (record) => {
|
||||||
|
|
|
||||||
|
|
@ -22,8 +22,8 @@ function Item({ data, viewInfo, flyTo }) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="item">
|
<div className="item">
|
||||||
<div className={`header level${data.level}`}>
|
{/* <div className={`header level${data.level}`}>
|
||||||
</div>
|
</div> */}
|
||||||
<div className="content">
|
<div className="content">
|
||||||
<div className="main">
|
<div className="main">
|
||||||
<div className="title">
|
<div className="title">
|
||||||
|
|
@ -33,7 +33,8 @@ function Item({ data, viewInfo, flyTo }) {
|
||||||
<div className="extra">{appconsts.stWarnStatus[data.status]}</div>
|
<div className="extra">{appconsts.stWarnStatus[data.status]}</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="desc">
|
<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>
|
||||||
<div className="tail">
|
<div className="tail">
|
||||||
<span>报警: {tm1}</span>
|
<span>报警: {tm1}</span>
|
||||||
|
|
|
||||||
|
|
@ -40,24 +40,25 @@ export default function Warn({ style }) {
|
||||||
<span
|
<span
|
||||||
className={clsx({ active: warnType === 'sk', 'cusor-pointer': warnType !== 'sk' })}
|
className={clsx({ active: warnType === 'sk', 'cusor-pointer': warnType !== 'sk' })}
|
||||||
onClick={() => dispatch.overallview.setWarnType('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>
|
||||||
<span
|
<span
|
||||||
className={clsx({ active: warnType === 'hd', 'cusor-pointer': warnType !== 'hd' })}
|
className={clsx({ active: warnType === 'hd', 'cusor-pointer': warnType !== 'hd' })}
|
||||||
onClick={() => dispatch.overallview.setWarnType('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
|
{/* <span
|
||||||
className={clsx({ active: warnType === 'qx', 'cusor-pointer': warnType !== 'qx' })}
|
className={clsx({ active: warnType === 'qx', 'cusor-pointer': warnType !== 'qx' })}
|
||||||
onClick={() => dispatch.overallview.setWarnType('qx')}
|
onClick={() => dispatch.overallview.setWarnType('qx')}
|
||||||
>气象预警{shqx?.maxLv ? <a className="number" style={{ backgroundColor: yjLevelColor(shqx.maxLv) }}>{shqx.maxLv}</a> : null}
|
>气象预警{shqx?.maxLv ? <a className="number" style={{ backgroundColor: yjLevelColor(shqx.maxLv) }}>{shqx.maxLv}</a> : null}
|
||||||
</span>
|
</span> */}
|
||||||
</span>
|
</span>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
{warnType === 'sh' ? <ShYj data={shyjData} /> : null}
|
{warnType === 'sh' ? <ShYj data={shyjData} /> : null}
|
||||||
{/* {warnType === 'sk' ? <ARzSk data={bxData?.aRzSk} /> : null} */}
|
{warnType === 'sk' ? <ARzSk data={bxData?.aRzSk} /> : null}
|
||||||
{warnType === 'sk' ? <Cxxsk/> : null}
|
{/* {warnType === 'sk' ? <Cxxsk/> : null} */}
|
||||||
{warnType === 'hd' ? <Hdyj data={hdyj} /> : null}
|
{warnType === 'hd' ? <Hdyj data={hdyj} /> : null}
|
||||||
{warnType === 'qx' ? <Shqx data={shqx} /> : null}
|
{warnType === 'qx' ? <Shqx data={shqx} /> : null}
|
||||||
</PanelBox>
|
</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