Compare commits
No commits in common. "c1d226acab07c08d91241d23e08fb8753ed826f3" and "53d7a6cd8f397ce7ae5264f6311c015de83bf16b" have entirely different histories.
c1d226acab
...
53d7a6cd8f
Binary file not shown.
|
Before Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 87 KiB |
|
|
@ -271,14 +271,6 @@
|
||||||
"pixelRatio": 1,
|
"pixelRatio": 1,
|
||||||
"visible": true
|
"visible": true
|
||||||
},
|
},
|
||||||
"流量站": {
|
|
||||||
"width": 32,
|
|
||||||
"height": 32,
|
|
||||||
"x": 160,
|
|
||||||
"y": 32,
|
|
||||||
"pixelRatio": 1,
|
|
||||||
"visible": true
|
|
||||||
},
|
|
||||||
"泵站": {
|
"泵站": {
|
||||||
"width": 32,
|
"width": 32,
|
||||||
"height": 32,
|
"height": 32,
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 47 KiB |
|
|
@ -5,12 +5,10 @@ import apiurl from '../apiurl';
|
||||||
|
|
||||||
|
|
||||||
export const BouaPromise = new CachePromise(
|
export const BouaPromise = new CachePromise(
|
||||||
// () => fetch('./data/boua.geojson').then(res => res.json()).catch(() => null), 0);
|
() => fetch('./data/boua.geojson').then(res => res.json()).catch(() => null), 0);
|
||||||
() => fetch(`${process.env.PUBLIC_URL}/data/boua.geojson`).then(res => res.json()).catch(() => null), 0);
|
|
||||||
|
|
||||||
export const WataPromise = new CachePromise(
|
export const WataPromise = new CachePromise(
|
||||||
// () => fetch('./data/wata.geojson').then(res => res.json()).catch(() => null), 0);
|
() => fetch('./data/wata.geojson').then(res => res.json()).catch(() => null), 0);
|
||||||
() => fetch(`${process.env.PUBLIC_URL}/data/wata.geojson`).then(res => res.json()).catch(() => null), 0);
|
|
||||||
|
|
||||||
function _watau(level) {
|
function _watau(level) {
|
||||||
return new CachePromise(
|
return new CachePromise(
|
||||||
|
|
|
||||||
|
|
@ -400,7 +400,7 @@ 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 === 207) {
|
} else if (id === 200) {
|
||||||
layerVisible = {
|
layerVisible = {
|
||||||
RealDrpLayer: false,
|
RealDrpLayer: false,
|
||||||
RealHDLayer: false,
|
RealHDLayer: false,
|
||||||
|
|
@ -614,7 +614,6 @@ const map = {
|
||||||
|
|
||||||
if (id != 504) {
|
if (id != 504) {
|
||||||
dispatch.runtime.setYyfa({})
|
dispatch.runtime.setYyfa({})
|
||||||
dispatch.runtime.setXiayouxh(false)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (
|
if (
|
||||||
|
|
@ -626,7 +625,7 @@ const map = {
|
||||||
|| id === 203
|
|| id === 203
|
||||||
|| id === 205
|
|| id === 205
|
||||||
|| id === 206
|
|| id === 206
|
||||||
|| id === 207
|
|| id === 200
|
||||||
) {
|
) {
|
||||||
dispatch.map.setLayerSetting({ dom: true });
|
dispatch.map.setLayerSetting({ dom: true });
|
||||||
// if(map){
|
// if(map){
|
||||||
|
|
@ -640,7 +639,7 @@ const map = {
|
||||||
// // }
|
// // }
|
||||||
// }
|
// }
|
||||||
|
|
||||||
if(id!==207&&id!==203&&id!==205&&id!==206){
|
if(id!==200&&id!==203&&id!==205&&id!==206){
|
||||||
if(map){
|
if(map){
|
||||||
const layer = map.getLayer('临时水库tz')
|
const layer = map.getLayer('临时水库tz')
|
||||||
if(layer){
|
if(layer){
|
||||||
|
|
|
||||||
|
|
@ -87,10 +87,8 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
||||||
} else if (view === 203) {
|
} else if (view === 203) {
|
||||||
left = [
|
left = [
|
||||||
{ key: '天气' },
|
{ key: '天气' },
|
||||||
{ key: '关联站点', style: { height: '23rem', flexGrow: 1 } },
|
{ key: '关联站点',style: { height: '15rem', flexGrow: 1 } },
|
||||||
{ key: '白蚁监测', style: { height: '17rem', flexGrow: 1 } },
|
{ key: '水库水量统计',style: { height: '22rem' } },
|
||||||
{ key: '视频监视', style: { height: '20rem', flexGrow: 1 } },
|
|
||||||
|
|
||||||
// { key: '安全监测', style: { height: '20rem', flexGrow: 1 } },
|
// { key: '安全监测', style: { height: '20rem', flexGrow: 1 } },
|
||||||
];
|
];
|
||||||
leftFullHeight = true;
|
leftFullHeight = true;
|
||||||
|
|
@ -114,7 +112,7 @@ 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) {
|
} else if (view === 200) {
|
||||||
left = [
|
left = [
|
||||||
{ key: '天气' },
|
{ key: '天气' },
|
||||||
{ key: '水库总览', style: { height: '30rem', flexGrow: 1 } },
|
{ key: '水库总览', style: { height: '30rem', flexGrow: 1 } },
|
||||||
|
|
@ -313,8 +311,9 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
||||||
];
|
];
|
||||||
} else if (view === 203) {
|
} else if (view === 203) {
|
||||||
right = [
|
right = [
|
||||||
{ key: '水库水量统计',style: { height: '34rem',flexGrow: 1 } },
|
{ key: '白蚁监测', style: { height: '20rem', flexGrow: 1 } },
|
||||||
{ key: '监测告警', style: { height: '15rem', flexGrow: 1 } },
|
{ key: '视频监视', style: { height: '20rem', flexGrow: 1 } },
|
||||||
|
{ key: '监测告警', style: { height: '20rem', flexGrow: 1 } },
|
||||||
];
|
];
|
||||||
rightFullHeight=true
|
rightFullHeight=true
|
||||||
} else if (view === 204) {
|
} else if (view === 204) {
|
||||||
|
|
@ -323,23 +322,21 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
||||||
];
|
];
|
||||||
} else if (view === 205) {
|
} else if (view === 205) {
|
||||||
right = [
|
right = [
|
||||||
{ key: '水库预案', style: { height: '10rem', } },
|
{ key: '水库预案', style: { height: '30%', flexGrow: 1 } },
|
||||||
{ key: '调度结果', style: { height: '10rem', } },
|
{ key: '调度结果', style: { height: '70%', flexGrow: 1 } },
|
||||||
{ key: '方案对比', style: { height: '10rem', } },
|
{ key: '方案对比', style: { height: '30%', flexGrow: 1 } },
|
||||||
];
|
];
|
||||||
rightFullHeight=true
|
|
||||||
} else if (view === 206) {
|
} else if (view === 206) {
|
||||||
right = [
|
right = [
|
||||||
{ key: '巡查问题看板', style: { height: '70%', flexGrow: 1 } },
|
{ key: '巡查问题看板', style: { height: '70%', flexGrow: 1 } },
|
||||||
{ key: '水库管护', style: { height: '10rem', flexGrow: 1 } },
|
{ key: '水库管护', style: { height: '10rem', flexGrow: 1 } },
|
||||||
];
|
];
|
||||||
} else if (view === 207) {
|
} else if (view === 200) {
|
||||||
right = [
|
right = [
|
||||||
// { key: '警报' },
|
{ key: '警报' },
|
||||||
{ key: '库容蓄水量统计', style: { height: '17rem'} },
|
{ key: '超汛水库', style: { height: '15rem'} },
|
||||||
{ key: '超汛限水库', style: { height: '16rem'} },
|
{ key: '站点统计', style: { height: '17rem'} },
|
||||||
// { key: '站点统计', style: { height: '17rem'} },
|
{ key: '监测告警总', style: { height: '21rem'} },
|
||||||
{ key: '监测告警总', style: { height: '22rem'} },
|
|
||||||
// { key: '关联站点',style: { height: '15rem', flexGrow: 1 } },
|
// { key: '关联站点',style: { height: '15rem', flexGrow: 1 } },
|
||||||
// { key: '水库水量统计',style: { height: '22rem' } },
|
// { key: '水库水量统计',style: { height: '22rem' } },
|
||||||
// { key: '洪水防御',style: { height: '18rem', flexGrow: 1 } },
|
// { key: '洪水防御',style: { height: '18rem', flexGrow: 1 } },
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,6 @@ function initState() {
|
||||||
layerSetting: {
|
layerSetting: {
|
||||||
},
|
},
|
||||||
yyObj: {},
|
yyObj: {},
|
||||||
xiayouxh:undefined,
|
|
||||||
yuananType:'sh',
|
yuananType:'sh',
|
||||||
duibifxNum:[],
|
duibifxNum:[],
|
||||||
shkshObj:undefined,
|
shkshObj:undefined,
|
||||||
|
|
@ -72,9 +71,6 @@ const runtime = {
|
||||||
setYuananType(state, props) {
|
setYuananType(state, props) {
|
||||||
return { ...state, yuananType: props }
|
return { ...state, yuananType: props }
|
||||||
},
|
},
|
||||||
setXiayouxh(state, props) {
|
|
||||||
return { ...state, xiayouxh: props }
|
|
||||||
},
|
|
||||||
setYyfa(state, props) {
|
setYyfa(state, props) {
|
||||||
return { ...state, yyObj: props }
|
return { ...state, yyObj: props }
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,347 +0,0 @@
|
||||||
import React, { useState, useEffect } from 'react';
|
|
||||||
import ReactECharts from 'echarts-for-react';
|
|
||||||
import { makeStyles } from '@material-ui/core/styles';
|
|
||||||
import { Dialog, DialogContent, TextField, Button } from '@material-ui/core';
|
|
||||||
import { legend } from 'echarts/lib/theme/dark';
|
|
||||||
|
|
||||||
const useStyles = makeStyles({
|
|
||||||
root: {
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
padding: 20,
|
|
||||||
},
|
|
||||||
chart: {
|
|
||||||
height: 100,
|
|
||||||
marginBottom: 20,
|
|
||||||
},
|
|
||||||
dialog: {
|
|
||||||
'& .MuiDialog-paper': {
|
|
||||||
backgroundColor: '#1a1b1f',
|
|
||||||
color: '#fff',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
input: {
|
|
||||||
'& .MuiInputBase-input': {
|
|
||||||
color: '#fff',
|
|
||||||
},
|
|
||||||
'& .MuiInputLabel-root': {
|
|
||||||
color: '#4a90e2',
|
|
||||||
},
|
|
||||||
'& .MuiOutlinedInput-root': {
|
|
||||||
'& fieldset': {
|
|
||||||
borderColor: '#4a90e2',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
button: {
|
|
||||||
backgroundColor: '#4a90e2',
|
|
||||||
color: '#fff',
|
|
||||||
'&:hover': {
|
|
||||||
backgroundColor: '#357abd',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const ScheduleCharts = () => {
|
|
||||||
const classes = useStyles();
|
|
||||||
const [flowDialogOpen, setFlowDialogOpen] = useState(false);
|
|
||||||
const [levelDialogOpen, setLevelDialogOpen] = useState(false);
|
|
||||||
const [flowValue, setFlowValue] = useState('');
|
|
||||||
const [levelValue, setLevelValue] = useState('');
|
|
||||||
const [chartData, setChartData] = useState(null);
|
|
||||||
|
|
||||||
// 生成测试数据
|
|
||||||
useEffect(() => {
|
|
||||||
const generateData = () => {
|
|
||||||
// const timePoints = [];
|
|
||||||
// const openingData = [];
|
|
||||||
// const inflowData = [];
|
|
||||||
// const outflowData = [];
|
|
||||||
// const levelData = [];
|
|
||||||
|
|
||||||
|
|
||||||
const timePoints = [
|
|
||||||
"05-28 07:00", "05-28 10:00", "05-28 13:00", "05-28 16:00", "05-28 19:00", "05-28 22:00",
|
|
||||||
"05-29 01:00", "05-29 04:00", "05-29 07:00", "05-29 10:00", "05-29 13:00", "05-29 16:00", "05-29 19:00", "05-29 22:00",
|
|
||||||
"05-30 01:00", "05-30 04:00", "05-30 07:00", "05-30 10:00", "05-30 13:00", "05-30 16:00", "05-30 19:00", "05-30 22:00",
|
|
||||||
"05-31 01:00", "05-31 04:00", "05-31 07:00", "05-31 10:00", "05-31 13:00", "05-31 16:00", "05-31 19:00", "05-31 22:00",
|
|
||||||
"06-01 01:00", "06-01 04:00", "06-01 07:00", "06-01 10:00", "06-01 13:00", "06-01 16:00", "06-01 19:00", "06-01 22:00",
|
|
||||||
"06-02 01:00", "06-02 04:00", "06-02 06:00"
|
|
||||||
];
|
|
||||||
|
|
||||||
const openingData = [
|
|
||||||
0.5, 0.5, 0.5, 0.5, 1.0, 1.0, // 05-28
|
|
||||||
2.0, 2.0, 2.0, 2.0, 2.0, 2.0, 2.0, 2.0, // 05-29
|
|
||||||
2.0, 2.0, 2.0, 2.0, 2.0, 2.0, 2.0, 2.0, // 05-30
|
|
||||||
2.0, 2.0, 2.0, 2.0, 2.0, 2.0, 1.8, 1.8, // 05-31
|
|
||||||
1.8, 1.8, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, // 06-01
|
|
||||||
1.5, 1.5, 1.5 // 06-02
|
|
||||||
];
|
|
||||||
const inflowData = [
|
|
||||||
100, 150, 200, 250, 350, 450, // 05-28
|
|
||||||
650, 750, 700, 600, 500, 400, 300, 250, // 05-29
|
|
||||||
200, 180, 170, 160, 150, 140, 130, 120, // 05-30
|
|
||||||
110, 100, 100, 100, 100, 100, 100, 100, // 05-31
|
|
||||||
100, 100, 100, 100, 100, 100, 100, 100, // 06-01
|
|
||||||
100, 100, 100 // 06-02
|
|
||||||
];
|
|
||||||
const outflowData = [
|
|
||||||
50, 80, 100, 120, 140, 160, // 05-28
|
|
||||||
180, 190, 200, 200, 200, 190, 180, 170, // 05-29
|
|
||||||
160, 150, 140, 130, 120, 110, 100, 100, // 05-30
|
|
||||||
100, 100, 100, 100, 100, 100, 100, 100, // 05-31
|
|
||||||
100, 100, 100, 100, 100, 100, 100, 100, // 06-01
|
|
||||||
100, 100, 100 // 06-02
|
|
||||||
];
|
|
||||||
const levelData = [
|
|
||||||
30, 30, 32, 35, 40, 45, // 05-28
|
|
||||||
50, 55, 60, 65, 68, 68, 68, 68, // 05-29
|
|
||||||
67, 66, 65, 64, 63, 62, 60, 58, // 05-30
|
|
||||||
56, 54, 52, 50, 48, 46, 44, 42, // 05-31
|
|
||||||
40, 38, 36, 35, 34, 33, 32, 32, // 06-01
|
|
||||||
32, 32, 32 // 06-02
|
|
||||||
];
|
|
||||||
// for (let i = 0; i < 96; i++) { // 24小时，每15分钟一个点
|
|
||||||
// const time = new Date('2025-05-18');
|
|
||||||
// time.setMinutes(time.getMinutes() + i * 15);
|
|
||||||
// const timeStr = time.toLocaleTimeString('zh-CN', { hour12: false });
|
|
||||||
// timePoints.push(timeStr);
|
|
||||||
|
|
||||||
// // 模拟数据
|
|
||||||
// openingData.push(i < 32 ? 1.5 : i < 80 ? 2 : 1.2);
|
|
||||||
// inflowData.push(Math.sin(i / 10) * 300 + 400);
|
|
||||||
// outflowData.push(Math.max(0, Math.sin((i - 10) / 10) * 100 + 150));
|
|
||||||
// levelData.push(Math.min(68.04, 40 + Math.sin(i / 30) * 10 + 20));
|
|
||||||
// }
|
|
||||||
|
|
||||||
return { timePoints, openingData, inflowData, outflowData, levelData };
|
|
||||||
};
|
|
||||||
|
|
||||||
setChartData(generateData());
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleFlowConfirm = () => {
|
|
||||||
// 这里处理流量修改逻辑
|
|
||||||
setFlowDialogOpen(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleLevelConfirm = () => {
|
|
||||||
// 这里处理水位修改逻辑
|
|
||||||
setLevelDialogOpen(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleChartEvents = {
|
|
||||||
click: (params) => {
|
|
||||||
if (params.componentType === 'markPoint') {
|
|
||||||
if (params.seriesIndex === 1) {
|
|
||||||
setFlowDialogOpen(true);
|
|
||||||
} else {
|
|
||||||
setLevelDialogOpen(true);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getOpeningOption = () => ({
|
|
||||||
grid: { top: 30, right: 20, bottom: 30, left: 50 },
|
|
||||||
tooltip: { trigger: 'axis' },
|
|
||||||
legend: {
|
|
||||||
data: ['开度'],
|
|
||||||
textStyle: { color: '#fff' },
|
|
||||||
top: 0
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: chartData?.timePoints,
|
|
||||||
axisLine: { lineStyle: { color: '#4a90e2' } },
|
|
||||||
axisLabel: { color: '#fff' },
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
name: '开度 m',
|
|
||||||
nameTextStyle: { color: '#fff' },
|
|
||||||
axisLine: { lineStyle: { color: '#4a90e2' } },
|
|
||||||
axisLabel: { color: '#fff' },
|
|
||||||
splitLine: { lineStyle: { color: '#2a2b2f' } },
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
name: '开度',
|
|
||||||
data: chartData?.openingData?.map(item => item.toFixed(2)),
|
|
||||||
type: 'line',
|
|
||||||
smooth: true,
|
|
||||||
symbol: 'none',
|
|
||||||
lineStyle: { color: '#4a90e2' },
|
|
||||||
areaStyle: { color: '#4a90e2', opacity: 0.1 },
|
|
||||||
itemStyle: { color: '#4a90e2' },
|
|
||||||
}],
|
|
||||||
});
|
|
||||||
|
|
||||||
const getFlowOption = () => ({
|
|
||||||
grid: { top: 30, right: 20, bottom: 30, left: 50 },
|
|
||||||
tooltip: { trigger: 'axis' },
|
|
||||||
legend: {
|
|
||||||
data: ['入库流量', '出库流量'],
|
|
||||||
textStyle: { color: '#fff' },
|
|
||||||
top: 0
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: chartData?.timePoints,
|
|
||||||
axisLine: { lineStyle: { color: '#4a90e2' } },
|
|
||||||
axisLabel: { color: '#fff' },
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
name: '流量 m³/s',
|
|
||||||
nameTextStyle: { color: '#fff' },
|
|
||||||
axisLine: { lineStyle: { color: '#4a90e2' } },
|
|
||||||
axisLabel: { color: '#fff' },
|
|
||||||
splitLine: { lineStyle: { color: '#2a2b2f' } },
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '入库流量',
|
|
||||||
data: chartData?.inflowData?.map(item => item.toFixed(2)),
|
|
||||||
type: 'line',
|
|
||||||
symbol: 'none',
|
|
||||||
smooth: true,
|
|
||||||
lineStyle: { color: '#ffd700' },
|
|
||||||
areaStyle: { color: '#ffd700', opacity: 0.1 },
|
|
||||||
itemStyle: { color: '#ffd700' },
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '出库流量',
|
|
||||||
data: chartData?.outflowData?.map(item => item.toFixed(2)),
|
|
||||||
type: 'line',
|
|
||||||
symbol: 'none',
|
|
||||||
smooth: true,
|
|
||||||
lineStyle: { color: '#4a90e2' },
|
|
||||||
areaStyle: { color: '#4a90e2', opacity: 0.1 },
|
|
||||||
itemStyle: { color: '#4a90e2' },
|
|
||||||
markPoint: {
|
|
||||||
data: [{ type: 'max', name: '最大值' }],
|
|
||||||
itemStyle: { color: '#4a90e2' },
|
|
||||||
label: { color: '#fff' },
|
|
||||||
symbolSize: 40,
|
|
||||||
onClick: () => {
|
|
||||||
setFlowDialogOpen(true); console.log(1111111111111);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
|
|
||||||
const getLevelOption = () => ({
|
|
||||||
grid: { top: 30, right: 20, bottom: 30, left: 50 },
|
|
||||||
tooltip: { trigger: 'axis' },
|
|
||||||
legend: {
|
|
||||||
data: ['水位', '校核洪水位'],
|
|
||||||
textStyle: { color: '#fff' },
|
|
||||||
top: 0
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: chartData?.timePoints,
|
|
||||||
axisLine: { lineStyle: { color: '#4a90e2' } },
|
|
||||||
axisLabel: { color: '#fff' },
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
name: '水位 m',
|
|
||||||
nameTextStyle: { color: '#fff' },
|
|
||||||
axisLine: { lineStyle: { color: '#4a90e2' } },
|
|
||||||
axisLabel: { color: '#fff' },
|
|
||||||
splitLine: { lineStyle: { color: '#2a2b2f' } },
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
name: '水位',
|
|
||||||
data: chartData?.levelData?.map(item => item.toFixed(2)),
|
|
||||||
type: 'line',
|
|
||||||
symbol: 'none',
|
|
||||||
smooth: true,
|
|
||||||
lineStyle: { color: '#4a90e2' },
|
|
||||||
areaStyle: { color: '#4a90e2', opacity: 0.1 },
|
|
||||||
itemStyle: { color: '#4a90e2' },
|
|
||||||
markPoint: {
|
|
||||||
data: [{ type: 'max', name: '最高水位' }],
|
|
||||||
itemStyle: { color: '#4a90e2' },
|
|
||||||
label: { color: '#fff' },
|
|
||||||
symbolSize: 40,
|
|
||||||
onClick: () => setLevelDialogOpen(true),
|
|
||||||
},
|
|
||||||
markLine: {
|
|
||||||
silent: true,
|
|
||||||
lineStyle: { color: '#ff4d4f' },
|
|
||||||
data: [{ yAxis: 68.04, name: '校核洪水位' }],
|
|
||||||
label: { color: '#fff' },
|
|
||||||
},
|
|
||||||
}],
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!chartData) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={classes.root}>
|
|
||||||
<ReactECharts option={getOpeningOption()} className={classes.chart} style={{ height: 230 }} />
|
|
||||||
<ReactECharts option={getFlowOption()} className={classes.chart} style={{ height: 230 }} onEvents={handleChartEvents} />
|
|
||||||
<ReactECharts option={getLevelOption()} className={classes.chart} style={{ height: 230 }} onEvents={handleChartEvents} />
|
|
||||||
|
|
||||||
<Dialog
|
|
||||||
open={flowDialogOpen}
|
|
||||||
onClose={() => setFlowDialogOpen(false)}
|
|
||||||
className={classes.dialog}
|
|
||||||
>
|
|
||||||
<DialogContent>
|
|
||||||
<TextField
|
|
||||||
autoFocus
|
|
||||||
margin="dense"
|
|
||||||
label="流量"
|
|
||||||
type="number"
|
|
||||||
fullWidth
|
|
||||||
variant="outlined"
|
|
||||||
value={flowValue}
|
|
||||||
onChange={(e) => setFlowValue(e.target.value)}
|
|
||||||
className={classes.input}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
onClick={handleFlowConfirm}
|
|
||||||
className={classes.button}
|
|
||||||
fullWidth
|
|
||||||
style={{ marginTop: 20 }}
|
|
||||||
>
|
|
||||||
确定
|
|
||||||
</Button>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
|
|
||||||
<Dialog
|
|
||||||
open={levelDialogOpen}
|
|
||||||
onClose={() => setLevelDialogOpen(false)}
|
|
||||||
className={classes.dialog}
|
|
||||||
>
|
|
||||||
<DialogContent>
|
|
||||||
<TextField
|
|
||||||
autoFocus
|
|
||||||
margin="dense"
|
|
||||||
label="水位"
|
|
||||||
type="number"
|
|
||||||
fullWidth
|
|
||||||
variant="outlined"
|
|
||||||
value={levelValue}
|
|
||||||
onChange={(e) => setLevelValue(e.target.value)}
|
|
||||||
className={classes.input}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
onClick={handleLevelConfirm}
|
|
||||||
className={classes.button}
|
|
||||||
fullWidth
|
|
||||||
style={{ marginTop: 20 }}
|
|
||||||
>
|
|
||||||
确定
|
|
||||||
</Button>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ScheduleCharts;
|
|
||||||
|
|
@ -1,41 +0,0 @@
|
||||||
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 { Typography,Button } from '@material-ui/core';
|
|
||||||
import ScheduleCharts from './ScheduleCharts'
|
|
||||||
import { useDispatch, useSelector } from 'react-redux';
|
|
||||||
|
|
||||||
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: '80rem', overflowX: 'hidden',height:'60rem' }}>
|
|
||||||
<DpAppBar position="sticky">
|
|
||||||
<Typography variant="h6" style={{ alignSelf: 'center', marginLeft: '0.5rem', flexGrow: 1,color:'#fff' }}>方案调整</Typography>
|
|
||||||
<DpCloseButton onClick={onClose} />
|
|
||||||
</DpAppBar>
|
|
||||||
<Button style={{marginLeft:'87%',marginTop:'1%',background:'#259dff'}} onClick={() => dispatch.runtime.setInfoDlg(undefined)}>保存并加载方案</Button>
|
|
||||||
<ScheduleCharts />
|
|
||||||
</DialogContent>
|
|
||||||
<div className="boxfoot"></div>
|
|
||||||
</Dialog>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default React.memo(HDStDlg);
|
|
||||||
|
|
@ -1,239 +0,0 @@
|
||||||
import React, { useState } from 'react';
|
|
||||||
import { Card, Row, Col, Table, Tag, Form, Input, DatePicker, Tabs } from 'antd';
|
|
||||||
import './index.less';
|
|
||||||
import moment from 'moment';
|
|
||||||
import ModalView from './view'
|
|
||||||
const TaskInspectionDetail = () => {
|
|
||||||
const [form] = Form.useForm();
|
|
||||||
const [activeTab, setActiveTab] = useState('dam');
|
|
||||||
const [visible, setVisible] = useState(false)
|
|
||||||
|
|
||||||
// 表单初始值
|
|
||||||
const initialValues = {
|
|
||||||
taskTitle: '06-02浮桥河日常巡查',
|
|
||||||
taskType: '日常巡查',
|
|
||||||
taskContent: '20250602每日巡检任务',
|
|
||||||
startTime: moment('2025-06-02 00:00:00'),
|
|
||||||
endTime: moment('2025-06-08 23:59:59'),
|
|
||||||
receiveTime: moment('2025-06-02 09:07:31'),
|
|
||||||
completeTime: moment('2025-06-02 09:08:05'),
|
|
||||||
inspector: '姜兴军',
|
|
||||||
taskStatus: '已完成'
|
|
||||||
};
|
|
||||||
|
|
||||||
// 巡查类别数据
|
|
||||||
const categories = [
|
|
||||||
{ key: 'dam', label: '大坝', count: 0 },
|
|
||||||
{ key: 'spillway', label: '溢洪道', count: 0 },
|
|
||||||
{ key: 'waterPipe', label: '输水管', count: 0 },
|
|
||||||
{ key: 'facilities', label: '管理设施', count: 0 },
|
|
||||||
{ key: 'valve', label: '阀门与启闭机', count: 0 },
|
|
||||||
{ key: 'others', label: '其他情况', count: 0 }
|
|
||||||
];
|
|
||||||
|
|
||||||
const detailModal = (row) => {
|
|
||||||
setVisible(true)
|
|
||||||
}
|
|
||||||
// 表格列定义
|
|
||||||
const columns = [
|
|
||||||
{
|
|
||||||
title: '序号',
|
|
||||||
dataIndex: 'index',
|
|
||||||
key: 'index',
|
|
||||||
width: 80
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '巡查项',
|
|
||||||
dataIndex: 'item',
|
|
||||||
key: 'item'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '巡查状态',
|
|
||||||
dataIndex: 'status',
|
|
||||||
key: 'status',
|
|
||||||
render: (status) => (
|
|
||||||
<Tag color={status === '正常' ? 'success' : 'error'}>{status}</Tag>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '问题描述',
|
|
||||||
dataIndex: 'description',
|
|
||||||
key: 'description'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '巡查图片',
|
|
||||||
dataIndex: 'images',
|
|
||||||
key: 'images'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '巡查视频',
|
|
||||||
dataIndex: 'videos',
|
|
||||||
key: 'videos'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '是否处理',
|
|
||||||
dataIndex: 'handled',
|
|
||||||
key: 'handled'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '处理人',
|
|
||||||
dataIndex: 'handler',
|
|
||||||
key: 'handler'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '操作',
|
|
||||||
key: 'action',
|
|
||||||
render: (v,r) => (
|
|
||||||
<span style={{background:'#1890ff',padding:'8px 15px',color:'#fff'}} onClick={()=>detailModal(r)}>详情</span>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
// 表格数据
|
|
||||||
const tableData = [
|
|
||||||
{
|
|
||||||
key: '1',
|
|
||||||
index: 1,
|
|
||||||
item: '上游坝',
|
|
||||||
status: '正常',
|
|
||||||
handler: '姜兴军'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '2',
|
|
||||||
index: 2,
|
|
||||||
item: '下游坝',
|
|
||||||
status: '正常',
|
|
||||||
handler: '姜兴军'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const handleTabChange = (key) => {
|
|
||||||
setActiveTab(key);
|
|
||||||
// 这里可以根据选中的tab加载对应的数据
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="task-inspection-detail" >
|
|
||||||
{/* 任务基本信息 */}
|
|
||||||
<Card className="info-card" title={<span style={{color:"#fff"}}>基本信息</span>}>
|
|
||||||
<Form
|
|
||||||
form={form}
|
|
||||||
initialValues={initialValues}
|
|
||||||
layout="horizontal"
|
|
||||||
labelCol={{ span: 6 }}
|
|
||||||
wrapperCol={{ span: 18 }}
|
|
||||||
>
|
|
||||||
<Row gutter={[24, 16]}>
|
|
||||||
<Col span={12}>
|
|
||||||
<Form.Item
|
|
||||||
label="任务标题"
|
|
||||||
name="taskTitle"
|
|
||||||
>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
<Col span={12}>
|
|
||||||
<Form.Item
|
|
||||||
label="任务类型"
|
|
||||||
name="taskType"
|
|
||||||
>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
<Col span={24}>
|
|
||||||
<Form.Item
|
|
||||||
label="任务内容"
|
|
||||||
name="taskContent"
|
|
||||||
labelCol={{ span: 3 }}
|
|
||||||
wrapperCol={{ span: 21 }}
|
|
||||||
>
|
|
||||||
<Input.TextArea />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
<Col span={12}>
|
|
||||||
<Form.Item
|
|
||||||
label="开始时间"
|
|
||||||
name="startTime"
|
|
||||||
>
|
|
||||||
<DatePicker showTime style={{ width: '100%' }} />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
<Col span={12}>
|
|
||||||
<Form.Item
|
|
||||||
label="结束时间"
|
|
||||||
name="endTime"
|
|
||||||
>
|
|
||||||
<DatePicker showTime style={{ width: '100%' }} />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
<Col span={12}>
|
|
||||||
<Form.Item
|
|
||||||
label="接收时间"
|
|
||||||
name="receiveTime"
|
|
||||||
>
|
|
||||||
<DatePicker showTime style={{ width: '100%' }} />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
<Col span={12}>
|
|
||||||
<Form.Item
|
|
||||||
label="完成时间"
|
|
||||||
name="completeTime"
|
|
||||||
>
|
|
||||||
<DatePicker showTime style={{ width: '100%' }} />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
<Col span={12}>
|
|
||||||
<Form.Item
|
|
||||||
label="巡查人"
|
|
||||||
name="inspector"
|
|
||||||
>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
<Col span={12}>
|
|
||||||
<Form.Item
|
|
||||||
label="任务状态"
|
|
||||||
name="taskStatus"
|
|
||||||
>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
</Form>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* 巡查信息 */}
|
|
||||||
<Card className="inspection-card" title={<span style={{color:"#fff"}}>巡查信息</span>}>
|
|
||||||
<div className="category-tabs">
|
|
||||||
{categories.map(category => (
|
|
||||||
<div
|
|
||||||
key={category.key}
|
|
||||||
className={`category-tab ${activeTab === category.key ? 'active' : ''}`}
|
|
||||||
onClick={() => handleTabChange(category.key)}
|
|
||||||
>
|
|
||||||
<span className="category-label">{category.label}</span>
|
|
||||||
<span className="category-count" style={{color:activeTab === category.key?'#1890ff':''}}>({category.count})</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<div className="table-info">
|
|
||||||
<span className="total-info">
|
|
||||||
(异常项：0，正常项：13)
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<Table
|
|
||||||
columns={columns}
|
|
||||||
dataSource={tableData}
|
|
||||||
pagination={false}
|
|
||||||
className="inspection-table"
|
|
||||||
/>
|
|
||||||
</Card>
|
|
||||||
<ModalView
|
|
||||||
open={visible}
|
|
||||||
onClose={() => setVisible(false)}
|
|
||||||
></ModalView>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default TaskInspectionDetail;
|
|
||||||
|
|
@ -1,140 +0,0 @@
|
||||||
.task-inspection-detail {
|
|
||||||
padding: 5px;
|
|
||||||
background-color: transparent;
|
|
||||||
min-height: 100vh;
|
|
||||||
|
|
||||||
.info-card {
|
|
||||||
margin-bottom: 24px;
|
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
|
||||||
|
|
||||||
.ant-card-body {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-form-item-label > label {
|
|
||||||
color: rgba(255, 255, 255, 0.85);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-input,
|
|
||||||
.ant-picker {
|
|
||||||
background-color: rgba(255, 255, 255, 0.04);
|
|
||||||
border-color: rgba(255, 255, 255, 0.1);
|
|
||||||
color: rgba(255, 255, 255, 0.85);
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
border-color: #1890ff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-picker {
|
|
||||||
.ant-picker-input > input {
|
|
||||||
color: rgba(255, 255, 255, 0.85);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-picker-suffix,
|
|
||||||
.ant-picker-separator {
|
|
||||||
color: rgba(255, 255, 255, 0.45);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-picker-clear {
|
|
||||||
background: #1a1a27;
|
|
||||||
color: rgba(255, 255, 255, 0.45);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-input-textarea {
|
|
||||||
.ant-input {
|
|
||||||
min-height: 80px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-picker-suffix {
|
|
||||||
color: rgba(255, 255, 255, 0.45);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.inspection-card {
|
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
|
||||||
|
|
||||||
.category-tabs {
|
|
||||||
display: flex;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
padding-bottom: 16px;
|
|
||||||
|
|
||||||
.category-tab {
|
|
||||||
padding: 8px 16px;
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
transition: all 0.3s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #1890ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
color: #1890ff;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
bottom: -16px;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 2px;
|
|
||||||
background-color: #1890ff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.category-label {
|
|
||||||
color: rgba(255, 255, 255, 0.85);
|
|
||||||
}
|
|
||||||
|
|
||||||
.category-count {
|
|
||||||
margin-left: 4px;
|
|
||||||
color: rgba(255, 255, 255, 0.45);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover .category-label,
|
|
||||||
&.active .category-label {
|
|
||||||
color: #1890ff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-info {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
|
|
||||||
.total-info {
|
|
||||||
color: rgba(255, 255, 255, 0.65);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.inspection-table {
|
|
||||||
.ant-table {
|
|
||||||
background-color: transparent;
|
|
||||||
color: #fff;
|
|
||||||
|
|
||||||
.ant-table-thead > tr > th {
|
|
||||||
background-color: rgba(255, 255, 255, 0.04);
|
|
||||||
color: rgba(255, 255, 255, 0.85);
|
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-table-tbody > tr > td {
|
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
color: rgba(255, 255, 255, 0.65);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-table-tbody > tr:hover > td {
|
|
||||||
background-color: rgba(255, 255, 255, 0.08);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,46 +0,0 @@
|
||||||
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 { Grid } from '@material-ui/core';
|
|
||||||
import DescriptionItem from '../../../components/DescrptionItem'
|
|
||||||
function HDStDlg({ record, onClose,open }) {
|
|
||||||
const [value, setValue] = React.useState(0);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog
|
|
||||||
open={open}
|
|
||||||
onClose={onClose}
|
|
||||||
maxWidth="xl"
|
|
||||||
style={{ borderRadius: 0 }}
|
|
||||||
PaperComponent={DpPaperComponent}
|
|
||||||
BackdropComponent={DpBackgroundDrop}
|
|
||||||
>
|
|
||||||
<div className="boxhead"></div>
|
|
||||||
<DialogContent style={{ padding: 0, width: '60rem', overflowX: 'hidden',height:'40rem' }}>
|
|
||||||
<DpAppBar position="sticky">
|
|
||||||
<DpTabs value={value} indicatorColor="primary" onChange={(_, v) => setValue(v)}>
|
|
||||||
<DpTab label="处理详情" />
|
|
||||||
</DpTabs>
|
|
||||||
<DpCloseButton onClick={onClose} />
|
|
||||||
</DpAppBar>
|
|
||||||
<div style={{padding:10}}>
|
|
||||||
{/* <img src={`${process.env.PUBLIC_URL}/assets/xcxq.png`} style={{width:'100%'}}></img> */}
|
|
||||||
<Grid container size="small">
|
|
||||||
<DescriptionItem label="处理图片" span={2}></DescriptionItem>
|
|
||||||
<DescriptionItem label="处理视频" span={2}></DescriptionItem>
|
|
||||||
<DescriptionItem label="处理描述" span={2}></DescriptionItem>
|
|
||||||
</Grid>
|
|
||||||
</div>
|
|
||||||
</DialogContent>
|
|
||||||
<div className="boxfoot"></div>
|
|
||||||
</Dialog>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default React.memo(HDStDlg);
|
|
||||||
|
|
@ -1,492 +0,0 @@
|
||||||
import React, { useState, useEffect } from 'react';
|
|
||||||
import { makeStyles } from '@material-ui/core/styles';
|
|
||||||
import {
|
|
||||||
Paper,
|
|
||||||
Table,
|
|
||||||
TableBody,
|
|
||||||
TableCell,
|
|
||||||
TableContainer,
|
|
||||||
TableHead,
|
|
||||||
TableRow,
|
|
||||||
TextField,
|
|
||||||
Button,
|
|
||||||
Box,
|
|
||||||
IconButton,
|
|
||||||
ButtonGroup,
|
|
||||||
Grid,
|
|
||||||
Select,
|
|
||||||
MenuItem
|
|
||||||
} from '@material-ui/core';
|
|
||||||
import SearchIcon from '@material-ui/icons/Search';
|
|
||||||
import RefreshIcon from '@material-ui/icons/Refresh';
|
|
||||||
import { DatePicker } from 'antd';
|
|
||||||
import moment from 'moment';
|
|
||||||
import { useDispatch, useSelector } from 'react-redux';
|
|
||||||
import ModalView from './view'
|
|
||||||
import ReactECharts from 'echarts-for-react';
|
|
||||||
import { color } from 'echarts/lib/theme/light';
|
|
||||||
|
|
||||||
const { RangePicker } = DatePicker;
|
|
||||||
|
|
||||||
const useStyles = makeStyles((theme) => ({
|
|
||||||
root: {
|
|
||||||
width: '100%',
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
color: '#fff'
|
|
||||||
},
|
|
||||||
toolbar: {
|
|
||||||
padding: theme.spacing(2),
|
|
||||||
display: 'flex',
|
|
||||||
gap: theme.spacing(2),
|
|
||||||
alignItems: 'center',
|
|
||||||
borderBottom: '1px solid rgba(255, 255, 255, 0.1)'
|
|
||||||
},
|
|
||||||
searchRow: {
|
|
||||||
display: 'flex',
|
|
||||||
gap: theme.spacing(2),
|
|
||||||
alignItems: 'center',
|
|
||||||
flexWrap: 'wrap'
|
|
||||||
},
|
|
||||||
searchField: {
|
|
||||||
'& .MuiInputBase-root': {
|
|
||||||
color: '#fff',
|
|
||||||
backgroundColor: 'rgba(255, 255, 255, 0.05)',
|
|
||||||
borderRadius: 4,
|
|
||||||
width: 200
|
|
||||||
},
|
|
||||||
'& .MuiInputLabel-root': {
|
|
||||||
color: '#fff'
|
|
||||||
},
|
|
||||||
'& .MuiOutlinedInput-notchedOutline': {
|
|
||||||
borderColor: 'rgba(255, 255, 255, 0.1)'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
datePicker: {
|
|
||||||
'& .MuiInputBase-root': {
|
|
||||||
color: '#fff',
|
|
||||||
backgroundColor: 'rgba(255, 255, 255, 0.05)',
|
|
||||||
width: 200
|
|
||||||
},
|
|
||||||
'& .MuiIconButton-root': {
|
|
||||||
color: '#fff'
|
|
||||||
},
|
|
||||||
'& .MuiOutlinedInput-notchedOutline': {
|
|
||||||
borderColor: 'rgba(255, 255, 255, 0.1)'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
buttonGroup: {
|
|
||||||
'& .MuiButton-root': {
|
|
||||||
color: '#fff',
|
|
||||||
borderColor: 'rgba(255, 255, 255, 0.3)',
|
|
||||||
'&.active': {
|
|
||||||
backgroundColor: '#2196f3',
|
|
||||||
borderColor: '#2196f3'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
table: {
|
|
||||||
'& .MuiTableCell-head': {
|
|
||||||
backgroundColor: 'rgba(255, 255, 255, 0.05)',
|
|
||||||
color: '#fff',
|
|
||||||
fontWeight: 'bold',
|
|
||||||
borderBottom: '1px solid rgba(255, 255, 255, 0.1)'
|
|
||||||
},
|
|
||||||
'& .MuiTableCell-body': {
|
|
||||||
color: '#fff',
|
|
||||||
borderBottom: '1px solid rgba(255, 255, 255, 0.1)'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
status: {
|
|
||||||
padding: '4px 8px',
|
|
||||||
borderRadius: 4,
|
|
||||||
backgroundColor: 'rgba(33, 150, 243, 0.1)',
|
|
||||||
color: '#2196f3'
|
|
||||||
},
|
|
||||||
actionButton: {
|
|
||||||
color: '#2196f3',
|
|
||||||
'&:hover': {
|
|
||||||
backgroundColor: 'rgba(33, 150, 243, 0.1)'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
bodyCell: {
|
|
||||||
color: '#fff',
|
|
||||||
borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
|
|
||||||
},
|
|
||||||
summaryRow: {
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
'& td': {
|
|
||||||
color: '#fff',
|
|
||||||
borderBottom: 'none',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
const TaskList = ({ tab = '生态' }) => {
|
|
||||||
const classes = useStyles();
|
|
||||||
const [startDate, setStartDate] = useState(null);
|
|
||||||
const dispatch = useDispatch();
|
|
||||||
const [endDate, setEndDate] = useState(null);
|
|
||||||
const [activeType, setActiveType] = useState('daily');
|
|
||||||
const [visible, setVisible] = useState(false)
|
|
||||||
const handleTypeChange = (type) => {
|
|
||||||
setActiveType(type);
|
|
||||||
};
|
|
||||||
const [dimension, setDimension] = useState('ft');
|
|
||||||
|
|
||||||
const columns = [
|
|
||||||
{ id: 'sequence', label: '序号', width: 70 },
|
|
||||||
{ id: 'city', label: '时间', with: 300 },
|
|
||||||
{ id: 'district', label: '瞬时流量(m³/s)' },
|
|
||||||
];
|
|
||||||
|
|
||||||
const mockData = [
|
|
||||||
{
|
|
||||||
sequence: 1,
|
|
||||||
city: '黄冈市',
|
|
||||||
district: '麻城市',
|
|
||||||
location: '',
|
|
||||||
taskType: '06-02浮桥河水库日常巡查',
|
|
||||||
taskContent: '20250602每日巡检',
|
|
||||||
status: '未完成',
|
|
||||||
person: '姜兴军',
|
|
||||||
startTime: '2025-06-02 00:00:00',
|
|
||||||
endTime: '2025-06-08 23:59:59',
|
|
||||||
problems: 0,
|
|
||||||
processed: 0,
|
|
||||||
createTime: '2025-06-02 02:00:00',
|
|
||||||
creator: ''
|
|
||||||
},
|
|
||||||
{
|
|
||||||
sequence: 2,
|
|
||||||
city: '黄冈市',
|
|
||||||
district: '麻城市',
|
|
||||||
location: '',
|
|
||||||
taskType: '06-02浮桥河水库汛前巡查',
|
|
||||||
taskContent: '20250602每日巡检',
|
|
||||||
status: '未完成',
|
|
||||||
person: '熊杰',
|
|
||||||
startTime: '2025-06-02 00:00:00',
|
|
||||||
endTime: '2025-06-08 23:59:59',
|
|
||||||
problems: 0,
|
|
||||||
processed: 0,
|
|
||||||
createTime: '2025-06-02 02:00:00',
|
|
||||||
creator: ''
|
|
||||||
},
|
|
||||||
{
|
|
||||||
sequence: 3,
|
|
||||||
city: '黄冈市',
|
|
||||||
district: '麻城市',
|
|
||||||
location: '',
|
|
||||||
taskType: '06-02浮桥河水库特别检查',
|
|
||||||
taskContent: '20250602每日巡检',
|
|
||||||
status: '未完成',
|
|
||||||
person: '白斌',
|
|
||||||
startTime: '2025-06-02 00:00:00',
|
|
||||||
endTime: '2025-06-08 23:59:59',
|
|
||||||
problems: 0,
|
|
||||||
processed: 0,
|
|
||||||
createTime: '2025-06-02 02:00:00',
|
|
||||||
creator: ''
|
|
||||||
},
|
|
||||||
{
|
|
||||||
sequence: 4,
|
|
||||||
city: '黄冈市',
|
|
||||||
district: '麻城市',
|
|
||||||
location: '',
|
|
||||||
taskType: '06-02浮桥河水库日常巡查',
|
|
||||||
taskContent: '20250602每日巡检',
|
|
||||||
status: '未完成',
|
|
||||||
person: '于静',
|
|
||||||
startTime: '2025-06-02 00:00:00',
|
|
||||||
endTime: '2025-06-08 23:59:59',
|
|
||||||
problems: 0,
|
|
||||||
processed: 0,
|
|
||||||
createTime: '2025-06-02 02:00:00',
|
|
||||||
creator: ''
|
|
||||||
}, {
|
|
||||||
sequence: 5,
|
|
||||||
city: '黄冈市',
|
|
||||||
district: '麻城市',
|
|
||||||
location: '',
|
|
||||||
taskType: '06-02浮桥河水库日常巡查',
|
|
||||||
taskContent: '20250602每日巡检',
|
|
||||||
status: '未完成',
|
|
||||||
person: '何义红',
|
|
||||||
startTime: '2025-06-02 00:00:00',
|
|
||||||
endTime: '2025-06-08 23:59:59',
|
|
||||||
problems: 0,
|
|
||||||
processed: 0,
|
|
||||||
createTime: '2025-06-02 02:00:00',
|
|
||||||
creator: ''
|
|
||||||
},
|
|
||||||
];
|
|
||||||
const flyTo = (row) => {
|
|
||||||
// dispatch?.runtime.setInfoDlg({ layerId: 'ChaoshiDetailLayer', properties: {} })
|
|
||||||
if (row.sequence == 1) {
|
|
||||||
setVisible(true)
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const [params, setParams] = useState({ tm: [] })
|
|
||||||
|
|
||||||
const searchTm = (e) => {
|
|
||||||
setParams({
|
|
||||||
...params,
|
|
||||||
stm: e[0].format("YYYY-MM-DD HH:mm"),
|
|
||||||
etm: e[1].format("YYYY-MM-DD HH:mm"),
|
|
||||||
tm: e,
|
|
||||||
})
|
|
||||||
};
|
|
||||||
const [list, setList] = useState([])
|
|
||||||
const generateData = () => {
|
|
||||||
const data = [];
|
|
||||||
const startTime = moment();
|
|
||||||
for (let i = 0; i < 20; i++) { // 每10分钟一个点，10天共1440个点
|
|
||||||
const time = moment(startTime).add(i * 60 * 4, 'minutes').format('YYYY-MM-DD HH:mm');
|
|
||||||
// 生成0.2到0.4之间的随机数，保留3位小数
|
|
||||||
const value = +(Math.random() * (0.4 - 0.2) + 0.2).toFixed(3);
|
|
||||||
data.push([time, value]);
|
|
||||||
}
|
|
||||||
const res = data.map(item => ({ time: item[0], value: item[1] }))
|
|
||||||
setList(res)
|
|
||||||
};
|
|
||||||
useEffect(() => {
|
|
||||||
generateData()
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
const stoption = {
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
formatter: function (params) {
|
|
||||||
return `时间：${params[0].name}<br/>流量：${params[0].value} m³/s`;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
boundaryGap: false,
|
|
||||||
axisLabel: {
|
|
||||||
rotate: 45,
|
|
||||||
color: '#fff'
|
|
||||||
},
|
|
||||||
data: list.map(item => moment(item.time).format('HH:mm'))
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
name: '瞬时流量(m³/s)',
|
|
||||||
nameTextStyle: {
|
|
||||||
color: "#fff"
|
|
||||||
},
|
|
||||||
min: 0,
|
|
||||||
max: 0.6,
|
|
||||||
interval: 0.1,
|
|
||||||
axisLabel: {
|
|
||||||
color: '#fff'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '瞬时流量',
|
|
||||||
type: 'line',
|
|
||||||
smooth: true,
|
|
||||||
data: list.map(item => item.value),
|
|
||||||
markLine: {
|
|
||||||
silent: true,
|
|
||||||
symbol: 'none',
|
|
||||||
label: {
|
|
||||||
formatter: '{b}: {c}'
|
|
||||||
},
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
name: '日平均流量',
|
|
||||||
yAxis: 0.358,
|
|
||||||
lineStyle: {
|
|
||||||
color: '#FF4500'
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
position: 'end'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '生态流量目标',
|
|
||||||
yAxis: 0.32,
|
|
||||||
lineStyle: {
|
|
||||||
color: '#2E8B57'
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
position: 'end'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
grid: {
|
|
||||||
left: '5%',
|
|
||||||
right: '16%',
|
|
||||||
bottom: '15%',
|
|
||||||
containLabel: true
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const option = {
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
formatter: function (params) {
|
|
||||||
return `时间：${params[0].name}<br/>流量：${params[0].value} m³/s`;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
boundaryGap: false,
|
|
||||||
axisLabel: {
|
|
||||||
rotate: 45,
|
|
||||||
color: '#fff'
|
|
||||||
},
|
|
||||||
data: list.map(item => moment(item.time).format('HH:mm'))
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
name: '瞬时流量(m³/s)',
|
|
||||||
nameTextStyle: {
|
|
||||||
color: "#fff"
|
|
||||||
},
|
|
||||||
min: 0,
|
|
||||||
max: 0.6,
|
|
||||||
interval: 0.1,
|
|
||||||
axisLabel: {
|
|
||||||
color: '#fff'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '瞬时流量',
|
|
||||||
type: 'line',
|
|
||||||
smooth: true,
|
|
||||||
data: list.map(item => item.value),
|
|
||||||
}
|
|
||||||
],
|
|
||||||
grid: {
|
|
||||||
left: '5%',
|
|
||||||
right: '16%',
|
|
||||||
bottom: '15%',
|
|
||||||
containLabel: true
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Paper className={classes.root}>
|
|
||||||
<Box className={classes.toolbar}>
|
|
||||||
<Box className={classes.searchRow}>
|
|
||||||
<Select
|
|
||||||
labelId="analysis-select-label"
|
|
||||||
value={dimension}
|
|
||||||
label=""
|
|
||||||
onChange={(event) => {
|
|
||||||
const value = event.target.value;
|
|
||||||
setDimension(value);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MenuItem value="ft">{tab == '生态' ? '浮桥河水库生态流量' : tab == '水厂' ? '顺河镇供水监测' : '西干渠渠首流量监测'}</MenuItem>
|
|
||||||
</Select>
|
|
||||||
</Box>
|
|
||||||
<Box className={classes.searchRow}>
|
|
||||||
<div style={{ display: 'flex', alignItems: 'center', width: '60%' }}>
|
|
||||||
<div style={{ color: "#fff" }}>时段选择：</div>
|
|
||||||
<div className='tm' style={{ position: "relative", zIndex: 999999, color: "#fff", width: "70%", margin: '10px' }}>
|
|
||||||
<RangePicker
|
|
||||||
// width="100%"
|
|
||||||
className='time-picker'
|
|
||||||
style={{
|
|
||||||
flex: 1,
|
|
||||||
background: "transparent",
|
|
||||||
border: "none",
|
|
||||||
color: "#fff",
|
|
||||||
}}
|
|
||||||
onChange={searchTm}
|
|
||||||
allowClear
|
|
||||||
format="YYYY-MM-DD HH:mm"
|
|
||||||
showTime={{
|
|
||||||
format: 'HH:mm',
|
|
||||||
}}
|
|
||||||
value={[moment(), moment().add(9, 'day')]}
|
|
||||||
getPopupContainer={trigger => trigger.parentElement}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
variant="contained"
|
|
||||||
color="primary"
|
|
||||||
startIcon={<SearchIcon />}
|
|
||||||
>
|
|
||||||
查询
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="outlined"
|
|
||||||
style={{ color: '#fff', borderColor: 'rgba(255, 255, 255, 0.3)' }}
|
|
||||||
startIcon={<RefreshIcon />}
|
|
||||||
>
|
|
||||||
重置
|
|
||||||
</Button>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
<div style={{ display: 'flex' }}>
|
|
||||||
<div style={{ width: 400 }}>
|
|
||||||
<TableContainer style={{ height: '47rem', overflow: 'auto' }}>
|
|
||||||
<Table className={classes.table} size="small" stickyHeader>
|
|
||||||
<TableHead>
|
|
||||||
<TableRow>
|
|
||||||
{columns.map((column) => (
|
|
||||||
<TableCell
|
|
||||||
key={column.id}
|
|
||||||
style={{ width: column.width }}
|
|
||||||
>
|
|
||||||
{column.label}
|
|
||||||
</TableCell>
|
|
||||||
))}
|
|
||||||
</TableRow>
|
|
||||||
</TableHead>
|
|
||||||
<TableBody>
|
|
||||||
{list.map((row, index) => (
|
|
||||||
<TableRow key={index}>
|
|
||||||
<TableCell>{index + 1}</TableCell>
|
|
||||||
<TableCell>{row.time}</TableCell>
|
|
||||||
<TableCell>{row.value}</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
))}
|
|
||||||
{
|
|
||||||
tab == '生态' && <>
|
|
||||||
<TableRow className={classes.summaryRow}>
|
|
||||||
<TableCell colSpan={2} className={classes.bodyCell}>
|
|
||||||
日平均流量(m³/s)
|
|
||||||
</TableCell>
|
|
||||||
<TableCell className={classes.bodyCell}>0.358</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
{/* 生态流量目标行 */}
|
|
||||||
<TableRow className={classes.summaryRow}>
|
|
||||||
<TableCell
|
|
||||||
colSpan={2}
|
|
||||||
// rowSpan={ecoFlowTargets.length}
|
|
||||||
className={classes.bodyCell}
|
|
||||||
>
|
|
||||||
生态流量目标(m³/s)
|
|
||||||
</TableCell>
|
|
||||||
<TableCell className={classes.bodyCell}>0.32</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
</TableContainer>
|
|
||||||
</div>
|
|
||||||
{
|
|
||||||
list.length > 0 && <div style={{ flex: 1 }}>
|
|
||||||
<ReactECharts option={tab == '生态' ? stoption:option} style={{ height: '45rem' }} />;
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</Paper>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default TaskList;
|
|
||||||
|
|
@ -1,41 +0,0 @@
|
||||||
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 ContentDetail from './detail'
|
|
||||||
import { Typography } from '@material-ui/core';
|
|
||||||
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, width: '80rem', overflowX: 'hidden',height:'60rem' }}>
|
|
||||||
<DpAppBar position="sticky">
|
|
||||||
{/* <DpTabs value={value} indicatorColor="primary" onChange={(_, v) => setValue(v)}>
|
|
||||||
<DpTab label="生态流量监测（浮桥河水库生态流量）" />
|
|
||||||
</DpTabs> */}
|
|
||||||
<Typography variant="h6" style={{ alignSelf: 'center', marginLeft: '0.5rem', flexGrow: 1, color: '#fff' }}>{record?.title}</Typography>
|
|
||||||
<DpCloseButton onClick={onClose} />
|
|
||||||
</DpAppBar>
|
|
||||||
|
|
||||||
<ContentDetail tab={record.tab} />
|
|
||||||
</DialogContent>
|
|
||||||
<div className="boxfoot"></div>
|
|
||||||
</Dialog>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default React.memo(HDStDlg);
|
|
||||||
|
|
@ -1,41 +0,0 @@
|
||||||
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 TaskInspectionDetail from './TaskInspectionDetail'
|
|
||||||
function HDStDlg({ record, onClose,open }) {
|
|
||||||
const [value, setValue] = React.useState(0);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog
|
|
||||||
open={open}
|
|
||||||
onClose={onClose}
|
|
||||||
maxWidth="xl"
|
|
||||||
style={{ borderRadius: 0 }}
|
|
||||||
PaperComponent={DpPaperComponent}
|
|
||||||
BackdropComponent={DpBackgroundDrop}
|
|
||||||
>
|
|
||||||
<div className="boxhead"></div>
|
|
||||||
<DialogContent style={{ padding: 0, width: '60rem', overflowX: 'hidden',height:'80rem' }}>
|
|
||||||
<DpAppBar position="sticky">
|
|
||||||
<DpTabs value={value} indicatorColor="primary" onChange={(_, v) => setValue(v)}>
|
|
||||||
<DpTab label="任务信息" />
|
|
||||||
</DpTabs>
|
|
||||||
<DpCloseButton onClick={onClose} />
|
|
||||||
</DpAppBar>
|
|
||||||
<div style={{ padding: 10 }}>
|
|
||||||
<TaskInspectionDetail />
|
|
||||||
{/* <img src={`${process.env.PUBLIC_URL}/assets/xcxq.png`} style={{width:'100%'}}></img> */}
|
|
||||||
</div>
|
|
||||||
</DialogContent>
|
|
||||||
<div className="boxfoot"></div>
|
|
||||||
</Dialog>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default React.memo(HDStDlg);
|
|
||||||
|
|
@ -14,7 +14,6 @@ import TableHead from '@material-ui/core/TableHead';
|
||||||
import TableRow from '@material-ui/core/TableRow';
|
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 moment from 'moment';
|
|
||||||
function HDStDlg({ record, onClose }) {
|
function HDStDlg({ record, onClose }) {
|
||||||
const [value, setValue] = React.useState(0);
|
const [value, setValue] = React.useState(0);
|
||||||
|
|
||||||
|
|
@ -56,7 +55,7 @@ function HDStDlg({ record, onClose }) {
|
||||||
<div className="table-ellipsis cursor-pointer" >1</div>
|
<div className="table-ellipsis cursor-pointer" >1</div>
|
||||||
</DpTableCell>
|
</DpTableCell>
|
||||||
<DpTableCell align="center">浮桥河水库</DpTableCell>
|
<DpTableCell align="center">浮桥河水库</DpTableCell>
|
||||||
<DpTableCell align="center">{moment().subtract(2,'day').format('YYYY-MM-DD 10:00:00')}</DpTableCell>
|
<DpTableCell align="center">2025-5-20 10:00:00</DpTableCell>
|
||||||
<DpTableCell align="center">GN1</DpTableCell>
|
<DpTableCell align="center">GN1</DpTableCell>
|
||||||
<DpTableCell align="center">红色</DpTableCell>
|
<DpTableCell align="center">红色</DpTableCell>
|
||||||
<DpTableCell align="center">-120mm</DpTableCell>
|
<DpTableCell align="center">-120mm</DpTableCell>
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,6 @@ function HDStDlg({ record, onClose }) {
|
||||||
const loadFa = () => {
|
const loadFa = () => {
|
||||||
onClose()
|
onClose()
|
||||||
dispatch.runtime.setYyfa({ yy: 111 })
|
dispatch.runtime.setYyfa({ yy: 111 })
|
||||||
dispatch.runtime.setXiayouxh(true)
|
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<Dialog
|
<Dialog
|
||||||
|
|
|
||||||
|
|
@ -45,8 +45,7 @@ import ShuiChangDlg from './ShuiChangDlg';
|
||||||
import ShuiyuandiDlg from './ShuiyuandiDlg';
|
import ShuiyuandiDlg from './ShuiyuandiDlg';
|
||||||
import ShuiBengDlg from './ShuiBengDlg'
|
import ShuiBengDlg from './ShuiBengDlg'
|
||||||
import ShuichangguanwangDlg from './ShuichangguanwangDlg';
|
import ShuichangguanwangDlg from './ShuichangguanwangDlg';
|
||||||
import FlowjcDlg from './FlowjcDlg'
|
|
||||||
import EditFaDlg from './EditFaDlg'
|
|
||||||
function InfoDlg() {
|
function InfoDlg() {
|
||||||
const infoDlg = useSelector(getInfoDlg);
|
const infoDlg = useSelector(getInfoDlg);
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
|
|
@ -148,10 +147,6 @@ function InfoDlg() {
|
||||||
return <ShuiBengDlg record={properties} onClose={handleClose} />
|
return <ShuiBengDlg record={properties} onClose={handleClose} />
|
||||||
}else if (layerId === 'GwLayer') {
|
}else if (layerId === 'GwLayer') {
|
||||||
return <ShuichangguanwangDlg record={properties} onClose={handleClose} />
|
return <ShuichangguanwangDlg record={properties} onClose={handleClose} />
|
||||||
}else if (layerId === 'flowjcLayer') {
|
|
||||||
return <FlowjcDlg record={properties} onClose={handleClose} />
|
|
||||||
}else if (layerId === 'editFaLayer') {
|
|
||||||
return <EditFaDlg record={properties} onClose={handleClose} />
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -137,7 +137,6 @@ export default function MapCtrl({ initParams, onLoad }) {
|
||||||
|
|
||||||
if (feature.layer.id === '关联站点') {
|
if (feature.layer.id === '关联站点') {
|
||||||
const record = feature.properties
|
const record = feature.properties
|
||||||
// debugger
|
|
||||||
if (record.cd_nm == 'GN1') {
|
if (record.cd_nm == 'GN1') {
|
||||||
dispatch?.runtime.setInfoDlg({ layerId: 'BxjcLayer', properties: record })
|
dispatch?.runtime.setInfoDlg({ layerId: 'BxjcLayer', properties: record })
|
||||||
}else if (record.cd_nm == 'UPD1') {
|
}else if (record.cd_nm == 'UPD1') {
|
||||||
|
|
@ -150,8 +149,7 @@ export default function MapCtrl({ initParams, onLoad }) {
|
||||||
dispatch?.runtime.setInfoDlg({ layerId: 'RealSkLayer', properties: record })
|
dispatch?.runtime.setInfoDlg({ layerId: 'RealSkLayer', properties: record })
|
||||||
} else if (record.type == 'sw') {
|
} else if (record.type == 'sw') {
|
||||||
dispatch?.runtime.setFeaturePop({ layerId: 'RealHDPop', properties: record,coordinates: [record.lgtd, record.lttd] })
|
dispatch?.runtime.setFeaturePop({ layerId: 'RealHDPop', properties: record,coordinates: [record.lgtd, record.lttd] })
|
||||||
} else if (record.flow == 1) {
|
|
||||||
dispatch?.runtime.setInfoDlg({ layerId: 'flowjcLayer', properties: record })
|
|
||||||
}
|
}
|
||||||
// dispatch.runtime.setFeaturePop({ type: 'RealSkPop', properties: record, coordinates: [record.lgtd, record.lttd] });
|
// dispatch.runtime.setFeaturePop({ type: 'RealSkPop', properties: record, coordinates: [record.lgtd, record.lttd] });
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -119,7 +119,6 @@ import JbqkLeft from './panels/JbqkLeft'
|
||||||
import FhxsYq2 from './panels/FhxsYq2'
|
import FhxsYq2 from './panels/FhxsYq2'
|
||||||
import Zdgzsq from './panels/Zdgzsq'
|
import Zdgzsq from './panels/Zdgzsq'
|
||||||
import Czdbl from './panels/Czdbl'
|
import Czdbl from './panels/Czdbl'
|
||||||
import Krxsltj from './panels/Krxsltj'
|
|
||||||
|
|
||||||
|
|
||||||
import Skyb from './panels/Skyb'
|
import Skyb from './panels/Skyb'
|
||||||
|
|
@ -411,7 +410,7 @@ export default function PanelIndex({ name, style, ...params }) {
|
||||||
return <Sbyj style={style} />
|
return <Sbyj style={style} />
|
||||||
} else if (name === '供水负荷曲线') {
|
} else if (name === '供水负荷曲线') {
|
||||||
return <Gsfhqx style={style} />
|
return <Gsfhqx style={style} />
|
||||||
} else if (name === '超汛限水库') {
|
} else if (name === '超汛水库') {
|
||||||
return <Cxsk style={style} />
|
return <Cxsk style={style} />
|
||||||
} else if (name === '站点统计') {
|
} else if (name === '站点统计') {
|
||||||
return <Zdtj style={style} />
|
return <Zdtj style={style} />
|
||||||
|
|
@ -427,13 +426,9 @@ export default function PanelIndex({ name, style, ...params }) {
|
||||||
return <Zdgzsq style={style} />
|
return <Zdgzsq style={style} />
|
||||||
} else if (name === '测站到报率') {
|
} else if (name === '测站到报率') {
|
||||||
return <Czdbl style={style} />
|
return <Czdbl style={style} />
|
||||||
} else if (name === '单个预案') {
|
} else if (name === '单个预案') {
|
||||||
return <Yuanan style={style} />
|
return <Yuanan style={style} />
|
||||||
} else if (name === '库容蓄水量统计') {
|
|
||||||
return <Krxsltj 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>
|
||||||
|
|
|
||||||
|
|
@ -20,16 +20,16 @@ const VIEWS = [
|
||||||
// { id: 7, title: '调度', img: process.env.PUBLIC_URL+'/assets/menu/辅助决策.png' },
|
// { id: 7, title: '调度', img: process.env.PUBLIC_URL+'/assets/menu/辅助决策.png' },
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{ id: 200, title: '水库', img: process.env.PUBLIC_URL+'/assets/menu/水库专题.png',children:[
|
// { id: 200, title: '水库', img: process.env.PUBLIC_URL+'/assets/menu/水库专题.png',children:[
|
||||||
{ id: 207, title: '水库总览', img: process.env.PUBLIC_URL+'/assets/menu/水库管理.png' },
|
// { id: 207, title: '水库总览', img: process.env.PUBLIC_URL+'/assets/menu/水库管理.png' },
|
||||||
// { id: 201, title: '雨情监测', img: process.env.PUBLIC_URL+'/assets/menu/雨情监测.png' },
|
// // { id: 201, title: '雨情监测', img: process.env.PUBLIC_URL+'/assets/menu/雨情监测.png' },
|
||||||
// { id: 202, title: '水情监测', img: process.env.PUBLIC_URL+'/assets/menu/水情监测.png' },
|
// // { id: 202, title: '水情监测', img: process.env.PUBLIC_URL+'/assets/menu/水情监测.png' },
|
||||||
{ id: 203, title: '水库监测', img: process.env.PUBLIC_URL+'/assets/menu/安全监测.png' },
|
// { id: 203, title: '水库监测', img: process.env.PUBLIC_URL+'/assets/menu/安全监测.png' },
|
||||||
// { id: 204, title: '视频监视', img: process.env.PUBLIC_URL+'/assets/menu/视频监视.png' },
|
// // { id: 204, title: '视频监视', img: process.env.PUBLIC_URL+'/assets/menu/视频监视.png' },
|
||||||
{ id: 205, title: '防汛调度', img: process.env.PUBLIC_URL+'/assets/menu/防汛调度.png' },
|
// { id: 205, title: '防汛调度', img: process.env.PUBLIC_URL+'/assets/menu/防汛调度.png' },
|
||||||
{ id: 206, title: '巡查维养', img: process.env.PUBLIC_URL+'/assets/menu/水库管理.png' },
|
// { id: 206, title: '巡查维养', img: process.env.PUBLIC_URL+'/assets/menu/水库管理.png' },
|
||||||
] },
|
// ] },
|
||||||
// { id: 200, title: '水库', img: process.env.PUBLIC_URL+'/assets/menu/水库专题.png'},
|
{ id: 200, title: '水库', img: process.env.PUBLIC_URL+'/assets/menu/水库专题.png'},
|
||||||
{
|
{
|
||||||
id: 300, title: '水厂', img: process.env.PUBLIC_URL+'/assets/menu/水利设施.png', children: [
|
id: 300, title: '水厂', img: process.env.PUBLIC_URL+'/assets/menu/水利设施.png', children: [
|
||||||
{ id: 301, title: '供水态势', img: process.env.PUBLIC_URL+'/assets/menu/降雨中心.png' },
|
{ id: 301, title: '供水态势', img: process.env.PUBLIC_URL+'/assets/menu/降雨中心.png' },
|
||||||
|
|
@ -147,8 +147,7 @@ export default function ActionDock({ }) {
|
||||||
removePoint()
|
removePoint()
|
||||||
}
|
}
|
||||||
}}>
|
}}>
|
||||||
{/* <div className={clsx('button', { active: o.id===200?(view===207||view===203||view===205||view===206||view===200):view === o.id })}> */}
|
<div className={clsx('button', { active: o.id===200?(view===207||view===203||view===205||view===206||view===200):view === o.id })}>
|
||||||
<div className={clsx('button', { active: view === o.id })}>
|
|
||||||
<img width={32} height={32} src={o.img} />
|
<img width={32} height={32} src={o.img} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -156,8 +155,8 @@ export default function ActionDock({ }) {
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
<div className="logo">
|
<div className="logo">
|
||||||
<a href="http://www.hbwhdc.cn" target="blank" style={{ color: '#fff', cursor: 'pointer' }}>@湖北鲧石物联科技有限公司</a>
|
<a href="http://www.hbwhdc.cn" target="blank" style={{ color: '#fff', cursor: 'pointer' }}>@湖北纬皓端成科技有限公司</a>
|
||||||
<span style={{ marginRight: '1rem' }}></span>联系电话: 18672386868
|
<span style={{ marginRight: '1rem' }}></span>联系电话: 15697168180
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,6 @@ export default function Demo1() {
|
||||||
const wg = useSelector(s => s.runtime.shkshObj)
|
const wg = useSelector(s => s.runtime.shkshObj)
|
||||||
const showGw = useSelector(s => s.runtime.showGw)
|
const showGw = useSelector(s => s.runtime.showGw)
|
||||||
const yuananType = useSelector(s => s.runtime.yuananType);
|
const yuananType = useSelector(s => s.runtime.yuananType);
|
||||||
const xiayou = useSelector(s => s.runtime.xiayouxh);
|
|
||||||
console.log('wg', wg);
|
console.log('wg', wg);
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -47,9 +46,6 @@ export default function Demo1() {
|
||||||
// <img src={`${process.env.PUBLIC_URL}/assets/yy.png`} alt="" style={{ zIndex: 0.2, position: 'absolute', bottom: 150, left: '32%', width: 700 }} />
|
// <img src={`${process.env.PUBLIC_URL}/assets/yy.png`} alt="" style={{ zIndex: 0.2, position: 'absolute', bottom: 150, left: '32%', width: 700 }} />
|
||||||
// </>
|
// </>
|
||||||
}
|
}
|
||||||
{
|
|
||||||
xiayou && <img src={`${process.env.PUBLIC_URL}/assets/yybg.png`} alt="" style={{ zIndex: 0.1, position: 'absolute', width: '100%',height:'100vh' }} />
|
|
||||||
}
|
|
||||||
|
|
||||||
{/* {
|
{/* {
|
||||||
isSc && <img src={`${process.env.PUBLIC_URL}/assets/scdd.jpg`} alt="" style={{ zIndex: 0.1, position: 'absolute', width: '100%' }} />
|
isSc && <img src={`${process.env.PUBLIC_URL}/assets/scdd.jpg`} alt="" style={{ zIndex: 0.1, position: 'absolute', width: '100%' }} />
|
||||||
|
|
|
||||||
|
|
@ -187,7 +187,7 @@ function ARzSk({data}) {
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<DpTableCell style={{ minWidth: '4rem' }} align="left">水库名称</DpTableCell>
|
<DpTableCell style={{ minWidth: '4rem' }} align="left">水库名称</DpTableCell>
|
||||||
<DpTableCell style={{ minWidth: '5rem' }} align="center">类型</DpTableCell>
|
<DpTableCell style={{ minWidth: '5rem' }} align="center">类型</DpTableCell>
|
||||||
<DpTableCell style={{ minWidth: '3rem' }} align="center">当前水位(m)</DpTableCell>
|
<DpTableCell style={{ minWidth: '3rem' }} align="center">水位(m)</DpTableCell>
|
||||||
<DpTableCell style={{ minWidth: '6rem' }} align="center">监测时间</DpTableCell>
|
<DpTableCell style={{ minWidth: '6rem' }} align="center">监测时间</DpTableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableHead>
|
</TableHead>
|
||||||
|
|
@ -204,11 +204,8 @@ function ARzSk({data}) {
|
||||||
</div>
|
</div>
|
||||||
</DpTableCell>
|
</DpTableCell>
|
||||||
<DpTableCell align="center" >小(2)型</DpTableCell>
|
<DpTableCell align="center" >小(2)型</DpTableCell>
|
||||||
<DpTableCell align="center" >
|
<DpTableCell align="center" >{tableRow.rz}</DpTableCell>
|
||||||
{tableRow.rz}
|
<DpTableCell align="center" >{moment(tableRow.tm).format('YYYY-MM-DD HH:mm:ss')}</DpTableCell>
|
||||||
<span style={{color:'red',marginLeft:'0.5rem'}}>+{(tableRow.rz-tableRow.fsltdz).toFixed(2)}</span>
|
|
||||||
</DpTableCell>
|
|
||||||
<DpTableCell align="center" >{moment(tableRow.tm).format('MM-DD mm:ss')}</DpTableCell>
|
|
||||||
</DpTableRow>
|
</DpTableRow>
|
||||||
</TableBody>
|
</TableBody>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@ export default function Warn({ style }) {
|
||||||
return (
|
return (
|
||||||
<PanelBox
|
<PanelBox
|
||||||
style={style}
|
style={style}
|
||||||
title="超汛限水库"
|
title="超汛水库"
|
||||||
color="green"
|
color="green"
|
||||||
>
|
>
|
||||||
<ARzSk />
|
<ARzSk />
|
||||||
|
|
|
||||||
|
|
@ -34,12 +34,62 @@ function HDReal({ style }) {
|
||||||
const tableRzFilter = useSelector(s => s.realview.tableRzFilter);
|
const tableRzFilter = useSelector(s => s.realview.tableRzFilter);
|
||||||
const hdAutoRefresh = useSelector(s => s.realview.hdAutoRefresh);
|
const hdAutoRefresh = useSelector(s => s.realview.hdAutoRefresh);
|
||||||
const yyRes = useSelector(s => s.runtime.yyObj);
|
const yyRes = useSelector(s => s.runtime.yyObj);
|
||||||
const xiayouxh = useSelector(s => s.runtime.xiayouxh);
|
|
||||||
const t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
|
const t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
|
||||||
// let { data } = useRequest(HDRealPromise.get, t);
|
// let { data } = useRequest(HDRealPromise.get, t);
|
||||||
const [setting, showSetting] = useState(false);
|
const [setting, showSetting] = useState(false);
|
||||||
|
|
||||||
|
// const showData = useMemo(() => {
|
||||||
|
// if (!data) {
|
||||||
|
// return [];
|
||||||
|
// }
|
||||||
|
// let ret = [];
|
||||||
|
// data.forEach(o => {
|
||||||
|
// if (!tableRzFilter[o.type]) {
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
// o.status = Math.floor(Math.random() * (4 - 0 + 1)) + 0
|
||||||
|
// o.kd = (Math.random() * 100).toFixed(2);
|
||||||
|
// o.ll = (Math.random() * 100).toFixed(1);
|
||||||
|
// ret.push(o);
|
||||||
|
// });
|
||||||
|
// return ret;
|
||||||
|
// }, [data, tableRzFilter]);
|
||||||
|
const randomMinutes = Math.floor(Math.random() * 60) + 1;
|
||||||
|
const format = 'YYYY-MM-DD HH:mm';
|
||||||
|
|
||||||
|
const showData = [
|
||||||
|
{
|
||||||
|
stnm: '尼尔基坝上',
|
||||||
|
rz: '215.74',
|
||||||
|
maxF: '7170',
|
||||||
|
cxTime: '08-17 08时',
|
||||||
|
ffTime:'08-23 20时'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
stnm: '同盟',
|
||||||
|
rz: '170.30',
|
||||||
|
maxF: '10300',
|
||||||
|
cxTime: '08-20 20时',
|
||||||
|
ffTime:'08-20 20时'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
const resData = [
|
||||||
|
{
|
||||||
|
stnm: '福田河镇',
|
||||||
|
area:"200",
|
||||||
|
rz: '215.74',
|
||||||
|
maxF: '7170',
|
||||||
|
cxTime: '08-17 08时',
|
||||||
|
ffTime:'08-23 20时'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
stnm: '顺河镇',
|
||||||
|
area: '300',
|
||||||
|
maxF: '10300',
|
||||||
|
cxTime: '08-20 20时',
|
||||||
|
ffTime:'08-20 20时'
|
||||||
|
}
|
||||||
|
]
|
||||||
const flyTo = (record) => {
|
const flyTo = (record) => {
|
||||||
const { lgtd, lttd } = record;
|
const { lgtd, lttd } = record;
|
||||||
if (lgtd && lttd) {
|
if (lgtd && lttd) {
|
||||||
|
|
@ -82,7 +132,7 @@ function HDReal({ style }) {
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
{
|
{
|
||||||
(yyRes.yy || xiayouxh) ? <>
|
yyRes.yy ? <>
|
||||||
<div className='skyb-box' >
|
<div className='skyb-box' >
|
||||||
<div className='rain-yb'>
|
<div className='rain-yb'>
|
||||||
<div className='title-yb'>水库洪水演进</div>
|
<div className='title-yb'>水库洪水演进</div>
|
||||||
|
|
|
||||||
|
|
@ -142,12 +142,6 @@ const ReservoirTable = ({onChange}) => {
|
||||||
<TableCell className={classes.headerCell}>
|
<TableCell className={classes.headerCell}>
|
||||||
最大出库流量<br/>(m³/s)
|
最大出库流量<br/>(m³/s)
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell className={classes.headerCell}>
|
|
||||||
总出库水量<br/>(万m³)
|
|
||||||
</TableCell>
|
|
||||||
<TableCell className={classes.headerCell}>
|
|
||||||
最高库水位<br/>(m)
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableHead>
|
</TableHead>
|
||||||
<TableBody>
|
<TableBody>
|
||||||
|
|
@ -157,8 +151,6 @@ const ReservoirTable = ({onChange}) => {
|
||||||
<TableCell className={classes.cell}>{formatFlowCell(item.maxInflow)}</TableCell>
|
<TableCell className={classes.cell}>{formatFlowCell(item.maxInflow)}</TableCell>
|
||||||
<TableCell className={classes.cell}>{item.totalStorage}</TableCell>
|
<TableCell className={classes.cell}>{item.totalStorage}</TableCell>
|
||||||
<TableCell className={classes.cell}>{formatFlowCell(item.maxOutflow)}</TableCell>
|
<TableCell className={classes.cell}>{formatFlowCell(item.maxOutflow)}</TableCell>
|
||||||
<TableCell className={classes.cell}>16.76</TableCell>
|
|
||||||
<TableCell className={classes.cell}>12.32（03-23 14：:32）</TableCell>
|
|
||||||
</TableRow>
|
</TableRow>
|
||||||
))}
|
))}
|
||||||
</TableBody>
|
</TableBody>
|
||||||
|
|
|
||||||
|
|
@ -40,7 +40,58 @@ function HDReal({ style }) {
|
||||||
// let { data } = useRequest(HDRealPromise.get, t);
|
// let { data } = useRequest(HDRealPromise.get, t);
|
||||||
const [setting, showSetting] = useState(false);
|
const [setting, showSetting] = useState(false);
|
||||||
|
|
||||||
|
// const showData = useMemo(() => {
|
||||||
|
// if (!data) {
|
||||||
|
// return [];
|
||||||
|
// }
|
||||||
|
// let ret = [];
|
||||||
|
// data.forEach(o => {
|
||||||
|
// if (!tableRzFilter[o.type]) {
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
// o.status = Math.floor(Math.random() * (4 - 0 + 1)) + 0
|
||||||
|
// o.kd = (Math.random() * 100).toFixed(2);
|
||||||
|
// o.ll = (Math.random() * 100).toFixed(1);
|
||||||
|
// ret.push(o);
|
||||||
|
// });
|
||||||
|
// return ret;
|
||||||
|
// }, [data, tableRzFilter]);
|
||||||
|
const randomMinutes = Math.floor(Math.random() * 60) + 1;
|
||||||
|
const format = 'YYYY-MM-DD HH:mm';
|
||||||
|
|
||||||
|
const showData = [
|
||||||
|
{
|
||||||
|
stnm: '尼尔基坝上',
|
||||||
|
rz: '215.74',
|
||||||
|
maxF: '7170',
|
||||||
|
cxTime: '08-17 08时',
|
||||||
|
ffTime: '08-23 20时'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
stnm: '同盟',
|
||||||
|
rz: '170.30',
|
||||||
|
maxF: '10300',
|
||||||
|
cxTime: '08-20 20时',
|
||||||
|
ffTime: '08-20 20时'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
const resData = [
|
||||||
|
{
|
||||||
|
stnm: '福田河镇',
|
||||||
|
area: "200",
|
||||||
|
rz: '215.74',
|
||||||
|
maxF: '7170',
|
||||||
|
cxTime: '08-17 08时',
|
||||||
|
ffTime: '08-23 20时'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
stnm: '顺河镇',
|
||||||
|
area: '300',
|
||||||
|
maxF: '10300',
|
||||||
|
cxTime: '08-20 20时',
|
||||||
|
ffTime: '08-20 20时'
|
||||||
|
}
|
||||||
|
]
|
||||||
const flyTo = (record) => {
|
const flyTo = (record) => {
|
||||||
const { lgtd, lttd } = record;
|
const { lgtd, lttd } = record;
|
||||||
if (lgtd && lttd) {
|
if (lgtd && lttd) {
|
||||||
|
|
@ -67,7 +118,7 @@ function HDReal({ style }) {
|
||||||
return (
|
return (
|
||||||
<PanelBox
|
<PanelBox
|
||||||
style={style}
|
style={style}
|
||||||
title="方案对比"
|
title="对比分析"
|
||||||
color="green"
|
color="green"
|
||||||
// tabs={
|
// tabs={
|
||||||
// <span className="button-group">
|
// <span className="button-group">
|
||||||
|
|
|
||||||
|
|
@ -50,13 +50,13 @@ function WF() {
|
||||||
|
|
||||||
const genWeatherContour24H = () => {
|
const genWeatherContour24H = () => {
|
||||||
dispatch.runtime.setYyfa({})
|
dispatch.runtime.setYyfa({})
|
||||||
dispatch.runtime.setXiayouxh(false)
|
|
||||||
dispatch.shyjview.showWeather24h();
|
dispatch.shyjview.showWeather24h();
|
||||||
}
|
}
|
||||||
|
|
||||||
const genWeatherContourRadar = () => {
|
const genWeatherContourRadar = () => {
|
||||||
dispatch.runtime.setYyfa({})
|
dispatch.runtime.setYyfa({})
|
||||||
dispatch.runtime.setXiayouxh(false)
|
|
||||||
dispatch.shyjview.showWeatherRadar();
|
dispatch.shyjview.showWeatherRadar();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -54,7 +54,7 @@ function HDReal({ style }) {
|
||||||
color="green"
|
color="green"
|
||||||
extra={
|
extra={
|
||||||
<div>
|
<div>
|
||||||
{moment().subtract(6,'day').format('YYYY-MM-DD')}~{moment().format('YYYY-MM-DD')}
|
2025-05-26~2025-06-02
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -54,7 +54,7 @@ function HDReal({ style }) {
|
||||||
color="green"
|
color="green"
|
||||||
extra={
|
extra={
|
||||||
<div>
|
<div>
|
||||||
{moment().subtract(6,'day').format('YYYY-MM-DD')}~{moment().format('YYYY-MM-DD')}
|
2025-05-26~2025-06-02
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
import React, { useMemo, useState } from 'react';
|
|
||||||
import PanelBox from '../../components/PanelBox';
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function DrpReal({ style }) {
|
|
||||||
|
|
||||||
return (
|
|
||||||
<PanelBox
|
|
||||||
style={style}
|
|
||||||
title="库容蓄水量统计"
|
|
||||||
color="green"
|
|
||||||
>
|
|
||||||
<img src={process.env.PUBLIC_URL+'/assets/13231750650433_.pic.jpg'} style={{width:'26rem',marginLeft:'0.2rem',marginTop:'-0.2rem'}} onClick={()=>{
|
|
||||||
}}/>
|
|
||||||
</PanelBox>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default DrpReal;
|
|
||||||
|
|
@ -1,87 +0,0 @@
|
||||||
import React, { useState } from 'react';
|
|
||||||
import moment from 'moment';
|
|
||||||
import './index.less';
|
|
||||||
|
|
||||||
const CustomCalendar = ({ markedDates = {} }) => {
|
|
||||||
const [currentDate, setCurrentDate] = useState(moment());
|
|
||||||
|
|
||||||
// 生成日历数据
|
|
||||||
const generateCalendarData = () => {
|
|
||||||
const firstDay = moment(currentDate).startOf('month');
|
|
||||||
const lastDay = moment(currentDate).endOf('month');
|
|
||||||
const startDay = moment(firstDay).startOf('week');
|
|
||||||
const endDay = moment(lastDay).endOf('week');
|
|
||||||
|
|
||||||
const calendar = [];
|
|
||||||
let week = [];
|
|
||||||
|
|
||||||
for (let day = moment(startDay); day.isSameOrBefore(endDay); day.add(1, 'day')) {
|
|
||||||
week.push({
|
|
||||||
date: moment(day),
|
|
||||||
isCurrentMonth: day.month() === currentDate.month(),
|
|
||||||
isToday: day.isSame(moment(), 'day'),
|
|
||||||
marks: markedDates[day.format('YYYY-MM-DD')] || []
|
|
||||||
});
|
|
||||||
|
|
||||||
if (week.length === 7) {
|
|
||||||
calendar.push(week);
|
|
||||||
week = [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return calendar;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 切换月份
|
|
||||||
const changeMonth = (offset) => {
|
|
||||||
setCurrentDate(moment(currentDate).add(offset, 'month'));
|
|
||||||
};
|
|
||||||
|
|
||||||
const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
|
|
||||||
const calendar = generateCalendarData();
|
|
||||||
return (
|
|
||||||
<div className='calendar'>
|
|
||||||
<div className='header'>
|
|
||||||
<div className='currentMonth'>
|
|
||||||
{currentDate.format('YYYY年M月')}
|
|
||||||
</div>
|
|
||||||
<div className='navigation'>
|
|
||||||
<button onClick={() => changeMonth(-1)}>上个月</button>
|
|
||||||
<button onClick={() => changeMonth(1)}>下个月</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='weekDays'>
|
|
||||||
{weekDays.map(day => (
|
|
||||||
<div key={day} className='weekDay'>{day}</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='days'>
|
|
||||||
{calendar.map((week, weekIndex) => (
|
|
||||||
<div key={weekIndex} className='week'>
|
|
||||||
{week.map(({ date, isCurrentMonth, isToday, marks }) => (
|
|
||||||
<div
|
|
||||||
key={date.format()}
|
|
||||||
className={`day
|
|
||||||
${!isCurrentMonth ? 'otherMonth' : ''}
|
|
||||||
${isToday ? 'today' : ''}`}
|
|
||||||
>
|
|
||||||
<span className='dayNumber'>{date.date()}</span>
|
|
||||||
{marks.map((mark, index) => (
|
|
||||||
<span
|
|
||||||
key={index}
|
|
||||||
className='mark'
|
|
||||||
style={{ backgroundColor: mark.color }}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default CustomCalendar;
|
|
||||||
|
|
@ -1,96 +0,0 @@
|
||||||
.calendar {
|
|
||||||
background-color: #34495e;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 5px;
|
|
||||||
color: white;
|
|
||||||
transform: scale(0.8,0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.currentMonth {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navigation {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
|
|
||||||
button {
|
|
||||||
background-color: #2c3e50;
|
|
||||||
border: none;
|
|
||||||
color: white;
|
|
||||||
padding: 8px 16px;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: #243342;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.weekDays {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(7, 1fr);
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.weekDay {
|
|
||||||
padding: 8px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.days {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.week {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(7, 1fr);
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.day {
|
|
||||||
aspect-ratio: 1;
|
|
||||||
background-color: #2c3e50;
|
|
||||||
border-radius: 4px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
padding: 4px;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&.otherMonth {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.today {
|
|
||||||
background-color: #3498db;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dayNumber {
|
|
||||||
font-size: 14px;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mark {
|
|
||||||
width: 6px;
|
|
||||||
height: 6px;
|
|
||||||
border-radius: 50%;
|
|
||||||
margin: 1px;
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
margin-top: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,106 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import ReactECharts from 'echarts-for-react';
|
|
||||||
import { makeStyles } from '@material-ui/core/styles';
|
|
||||||
|
|
||||||
const useStyles = makeStyles({
|
|
||||||
chart: {
|
|
||||||
height: 100,
|
|
||||||
backgroundColor: 'transparent'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const WaterSupplyChart = ({type}) => {
|
|
||||||
const classes = useStyles();
|
|
||||||
|
|
||||||
// 生成近7天的日期
|
|
||||||
const getDates = () => {
|
|
||||||
const dates = [];
|
|
||||||
for (let i = 6; i >= 0; i--) {
|
|
||||||
const date = new Date();
|
|
||||||
date.setDate(date.getDate() - i);
|
|
||||||
dates.push(date.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' }));
|
|
||||||
}
|
|
||||||
return dates;
|
|
||||||
};
|
|
||||||
|
|
||||||
const option = {
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
grid: {
|
|
||||||
left: '5%',
|
|
||||||
right: '5%',
|
|
||||||
top: '20%',
|
|
||||||
bottom: '1%',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: getDates(),
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: { color: '#fff' }
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
color: '#fff',
|
|
||||||
fontSize: 12
|
|
||||||
}
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
name: 'm³',
|
|
||||||
nameTextStyle: {
|
|
||||||
color: '#fff',
|
|
||||||
fontSize: 12
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: { color: '#fff' }
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
color: '#fff',
|
|
||||||
fontSize: 12
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: 'rgba(255, 255, 255, 0.1)',
|
|
||||||
type: 'dashed'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
min: 0,
|
|
||||||
max: 3000,
|
|
||||||
interval: 1000
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
backgroundColor: 'rgba(0, 0, 0, 0.7)',
|
|
||||||
borderColor: '#4a90e2',
|
|
||||||
textStyle: {
|
|
||||||
color: '#fff'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
name:'供水量',
|
|
||||||
data: type == 1 ? [1800, 1700, 1900, 1800, 1800, 2200, 2200]: [900, 1900, 1200, 2600, 1000, 2100, 2300], // 示例数据
|
|
||||||
type: 'bar',
|
|
||||||
barWidth: '40%',
|
|
||||||
itemStyle: {
|
|
||||||
color: '#4a90e2'
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
position: 'top',
|
|
||||||
color: '#fff',
|
|
||||||
formatter: '{c} m³'
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ReactECharts
|
|
||||||
option={option}
|
|
||||||
style={{height:230}}
|
|
||||||
className={classes.chart}
|
|
||||||
// theme="dark"
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default WaterSupplyChart;
|
|
||||||
|
|
@ -1,20 +1,15 @@
|
||||||
import React, { useMemo, useState } from 'react';
|
import React, { useMemo, useState } from 'react';
|
||||||
import { Switch, FormControlLabel, InputLabel, Select, MenuItem, FormControl } from '@material-ui/core/index'
|
import { Switch, FormControlLabel,InputLabel, Select, MenuItem,FormControl } from '@material-ui/core/index'
|
||||||
import PanelBox from '../../components/PanelBox';
|
import PanelBox from '../../components/PanelBox';
|
||||||
import config from '../../../../config';
|
import config from '../../../../config';
|
||||||
import { useDispatch, useSelector } from 'react-redux';
|
import { useDispatch, useSelector } from 'react-redux';
|
||||||
import AreaDrpChart from './chart';
|
import AreaDrpChart from './chart';
|
||||||
import clsx from 'clsx';
|
import clsx from 'clsx';
|
||||||
import './index.less'
|
|
||||||
import moment from 'moment/moment';
|
|
||||||
import CustomCalendar from './Calender'
|
|
||||||
import WaterSupplyChart from './barCgart'
|
|
||||||
import { parseGeoJSON } from "../../../../utils/tools";
|
|
||||||
|
|
||||||
function DrpReal({ style }) {
|
function DrpReal({ style }) {
|
||||||
const [tab, setTab] = useState('生态')
|
const [tab,setTab] = useState('生态')
|
||||||
const [dimension, setDimension] = useState('ft');
|
|
||||||
|
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const data = [
|
const data = [
|
||||||
{
|
{
|
||||||
|
|
@ -49,466 +44,202 @@ function DrpReal({ style }) {
|
||||||
"rzWarning": 0,
|
"rzWarning": 0,
|
||||||
"rzState": 1,
|
"rzState": 1,
|
||||||
"aRz": -4.18
|
"aRz": -4.18
|
||||||
}, {
|
},{
|
||||||
"stcd": "61612610",
|
"stcd": "61612610",
|
||||||
"type": "sk",
|
"type": "sk",
|
||||||
"hasRz": true,
|
"hasRz": true,
|
||||||
"stnm": "三河口水库",
|
"stnm": "三河口水库",
|
||||||
"adcd": "421181109000",
|
"adcd": "421181109000",
|
||||||
"wscd": null,
|
"wscd": null,
|
||||||
"importancy": 0,
|
"importancy": 0,
|
||||||
"lgtd": 115.166667,
|
"lgtd": 115.166667,
|
||||||
"lttd": 31.333333,
|
"lttd": 31.333333,
|
||||||
"elev": 0,
|
"elev": 0,
|
||||||
"damel": 156.8,
|
"damel": 156.8,
|
||||||
"dsflz": 154.99,
|
"dsflz": 154.99,
|
||||||
"fsltdz": 149,
|
"fsltdz": 149,
|
||||||
"ddz": 124,
|
"ddz": 124,
|
||||||
"zcxsw": 149,
|
"zcxsw": 149,
|
||||||
"drpTm": "2025-06-03T02:00:00.000Z",
|
"drpTm": "2025-06-03T02:00:00.000Z",
|
||||||
"today": 0,
|
"today": 0,
|
||||||
"h1": 0,
|
"h1": 0,
|
||||||
"h3": 0,
|
"h3": 0,
|
||||||
"h6": 0,
|
"h6": 0,
|
||||||
"h12": 0,
|
"h12": 0,
|
||||||
"h24": 0,
|
"h24": 0,
|
||||||
"h48": 12.5,
|
"h48": 12.5,
|
||||||
"drpState": 1,
|
"drpState": 1,
|
||||||
"rz": 141.45,
|
"rz": 141.45,
|
||||||
"w": 77.8,
|
"w": 77.8,
|
||||||
"a_fsltdz": -7.550000000000011,
|
"a_fsltdz": -7.550000000000011,
|
||||||
"rzTm": "2025-06-03T01:00:00.000Z",
|
"rzTm": "2025-06-03T01:00:00.000Z",
|
||||||
"rzWarning": 0,
|
"rzWarning": 0,
|
||||||
"rzState": 1,
|
"rzState": 1,
|
||||||
"aRz": -7.55
|
"aRz": -7.55
|
||||||
}, {
|
},{
|
||||||
"stcd": "61613010",
|
"stcd": "61613010",
|
||||||
"type": "sk",
|
"type": "sk",
|
||||||
"hasRz": true,
|
"hasRz": true,
|
||||||
"stnm": "明山水库",
|
"stnm": "明山水库",
|
||||||
"adcd": "421181103000",
|
"adcd": "421181103000",
|
||||||
"wscd": null,
|
"wscd": null,
|
||||||
"importancy": 0,
|
"importancy": 0,
|
||||||
"lgtd": 115.066667,
|
"lgtd": 115.066667,
|
||||||
"lttd": 31.016667,
|
"lttd": 31.016667,
|
||||||
"elev": 0,
|
"elev": 0,
|
||||||
"damel": 98.7,
|
"damel": 98.7,
|
||||||
"dsflz": 96.07,
|
"dsflz": 96.07,
|
||||||
"fsltdz": 93,
|
"fsltdz": 93,
|
||||||
"ddz": 78.02,
|
"ddz": 78.02,
|
||||||
"zcxsw": 93,
|
"zcxsw": 93,
|
||||||
"drpTm": "2025-06-03T02:00:00.000Z",
|
"drpTm": "2025-06-03T02:00:00.000Z",
|
||||||
"today": 0,
|
"today": 0,
|
||||||
"h1": 0,
|
"h1": 0,
|
||||||
"h3": 0,
|
"h3": 0,
|
||||||
"h6": 0,
|
"h6": 0,
|
||||||
"h12": 0,
|
"h12": 0,
|
||||||
"h24": 0,
|
"h24": 0,
|
||||||
"h48": 12.5,
|
"h48": 12.5,
|
||||||
"drpState": 1,
|
"drpState": 1,
|
||||||
"rz": 84.43,
|
"rz": 84.43,
|
||||||
"w": 49.5,
|
"w": 49.5,
|
||||||
"a_fsltdz": -8.569999999999993,
|
"a_fsltdz": -8.569999999999993,
|
||||||
"rzTm": "2025-06-03T02:00:00.000Z",
|
"rzTm": "2025-06-03T02:00:00.000Z",
|
||||||
"rzWarning": 0,
|
"rzWarning": 0,
|
||||||
"rzState": 1,
|
"rzState": 1,
|
||||||
"aRz": -8.57
|
"aRz": -8.57
|
||||||
}, {
|
},{
|
||||||
"stcd": "716113901",
|
"stcd": "716113901",
|
||||||
"type": "sk",
|
"type": "sk",
|
||||||
"hasRz": true,
|
"hasRz": true,
|
||||||
"stnm": "铺头坳水库",
|
"stnm": "铺头坳水库",
|
||||||
"adcd": "421181201000",
|
"adcd": "421181201000",
|
||||||
"wscd": null,
|
"wscd": null,
|
||||||
"importancy": 0,
|
"importancy": 0,
|
||||||
"lgtd": 115.169444,
|
"lgtd": 115.169444,
|
||||||
"lttd": 31.090278,
|
"lttd": 31.090278,
|
||||||
"elev": 0,
|
"elev": 0,
|
||||||
"damel": 266.7,
|
"damel": 266.7,
|
||||||
"dsflz": 265.54,
|
"dsflz": 265.54,
|
||||||
"fsltdz": 264.3,
|
"fsltdz": 264.3,
|
||||||
"ddz": 256,
|
"ddz": 256,
|
||||||
"zcxsw": 264.3,
|
"zcxsw": 264.3,
|
||||||
"drpTm": "2025-04-11T05:00:00.000Z",
|
"drpTm": "2025-04-11T05:00:00.000Z",
|
||||||
"today": 0,
|
"today": 0,
|
||||||
"h1": 0,
|
"h1": 0,
|
||||||
"h3": 0,
|
"h3": 0,
|
||||||
"h6": 0,
|
"h6": 0,
|
||||||
"h12": 0,
|
"h12": 0,
|
||||||
"h24": 0,
|
"h24": 0,
|
||||||
"h48": 0,
|
"h48": 0,
|
||||||
"drpState": 2,
|
"drpState": 2,
|
||||||
"rz": 263.16,
|
"rz": 263.16,
|
||||||
"w": 0.991,
|
"w": 0.991,
|
||||||
"a_fsltdz": -1.1399999999999864,
|
"a_fsltdz": -1.1399999999999864,
|
||||||
"rzTm": "2025-04-11T05:00:00.000Z",
|
"rzTm": "2025-04-11T05:00:00.000Z",
|
||||||
"rzWarning": 0,
|
"rzWarning": 0,
|
||||||
"rzState": 2,
|
"rzState": 2,
|
||||||
"pic": [
|
"pic": [
|
||||||
{
|
{
|
||||||
"stcd": "716113901",
|
"stcd": "716113901",
|
||||||
"tm": "2023-03-12T08:02:00.000Z",
|
"tm": "2023-03-12T08:02:00.000Z",
|
||||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716113901/20230312160200.jpg"
|
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716113901/20230312160200.jpg"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"stcd": "716113901",
|
"stcd": "716113901",
|
||||||
"tm": "2023-03-12T07:15:00.000Z",
|
"tm": "2023-03-12T07:15:00.000Z",
|
||||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716113902/20230312151500.jpg"
|
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716113902/20230312151500.jpg"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"aRz": -1.14
|
"aRz": -1.14
|
||||||
}, {
|
},{
|
||||||
"stcd": "716111701",
|
"stcd": "716111701",
|
||||||
"type": "sk",
|
"type": "sk",
|
||||||
"hasRz": true,
|
"hasRz": true,
|
||||||
"stnm": "桐枧冲水库",
|
"stnm": "桐枧冲水库",
|
||||||
"adcd": "421181110000",
|
"adcd": "421181110000",
|
||||||
"wscd": null,
|
"wscd": null,
|
||||||
"importancy": 0,
|
"importancy": 0,
|
||||||
"lgtd": 115.135278,
|
"lgtd": 115.135278,
|
||||||
"lttd": 31.3925,
|
"lttd": 31.3925,
|
||||||
"elev": 0,
|
"elev": 0,
|
||||||
"damel": 276.56,
|
"damel": 276.56,
|
||||||
"dsflz": 273.66,
|
"dsflz": 273.66,
|
||||||
"fsltdz": 269.86,
|
"fsltdz": 269.86,
|
||||||
"ddz": 256.76,
|
"ddz": 256.76,
|
||||||
"zcxsw": 269.86,
|
"zcxsw": 269.86,
|
||||||
"drpTm": "2025-04-11T05:00:00.000Z",
|
"drpTm": "2025-04-11T05:00:00.000Z",
|
||||||
"today": 0,
|
"today": 0,
|
||||||
"h1": 0,
|
"h1": 0,
|
||||||
"h3": 0,
|
"h3": 0,
|
||||||
"h6": 0,
|
"h6": 0,
|
||||||
"h12": 0,
|
"h12": 0,
|
||||||
"h24": 0,
|
"h24": 0,
|
||||||
"h48": 0,
|
"h48": 0,
|
||||||
"drpState": 2,
|
"drpState": 2,
|
||||||
"rz": 265.12,
|
"rz": 265.12,
|
||||||
"w": 0.689,
|
"w": 0.689,
|
||||||
"a_fsltdz": -4.740000000000009,
|
"a_fsltdz": -4.740000000000009,
|
||||||
"rzTm": "2025-04-11T05:00:00.000Z",
|
"rzTm": "2025-04-11T05:00:00.000Z",
|
||||||
"rzWarning": 0,
|
"rzWarning": 0,
|
||||||
"rzState": 2,
|
"rzState": 2,
|
||||||
"pic": [
|
"pic": [
|
||||||
{
|
{
|
||||||
"stcd": "716111701",
|
"stcd": "716111701",
|
||||||
"tm": "2023-03-12T07:03:00.000Z",
|
"tm": "2023-03-12T07:03:00.000Z",
|
||||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716111701/20230312150300.jpg"
|
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716111701/20230312150300.jpg"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"stcd": "716111701",
|
"stcd": "716111701",
|
||||||
"tm": "2023-03-12T07:27:00.000Z",
|
"tm": "2023-03-12T07:27:00.000Z",
|
||||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716111702/20230312152700.jpg"
|
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716111702/20230312152700.jpg"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"aRz": -4.74
|
"aRz": -4.74
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
const markedDates = {
|
return (
|
||||||
'2025-06-01': [{ color: '#e74c3c' }], // 红色标记
|
<PanelBox
|
||||||
'2025-06-02': [{ color: '#2ecc71' }], // 绿色标记
|
|
||||||
'2025-06-12': [{ color: '#e74c3c' }], // 红色标记
|
|
||||||
};
|
|
||||||
|
|
||||||
const stPoint = [
|
|
||||||
{
|
|
||||||
"stcd": "61644000",
|
|
||||||
"stnm": "浮桥河生态流量监测",
|
|
||||||
title:"生态流量监测（浮桥河水库生态流量）",
|
|
||||||
"tab": '生态',
|
|
||||||
flow:1,
|
|
||||||
"adcd": null,
|
|
||||||
"wscd": null,
|
|
||||||
"importancy": 0,
|
|
||||||
"lgtd": 114.88323757279684,
|
|
||||||
"lttd": 31.16499007456515,
|
|
||||||
"elev": null,
|
|
||||||
"hasRz": true,
|
|
||||||
|
|
||||||
"tm": "2025-06-03T02:00:00.000Z",
|
|
||||||
"rz": 43.6,
|
|
||||||
"state": 1
|
|
||||||
}
|
|
||||||
]
|
|
||||||
const scPoint = [
|
|
||||||
{
|
|
||||||
"stcd": "61644000",
|
|
||||||
"stnm": "顺河镇供水监测",
|
|
||||||
"tab": '水厂',
|
|
||||||
title:"水厂流量监测（顺河镇供水监测）",
|
|
||||||
"adcd": null,
|
|
||||||
"wscd": null,
|
|
||||||
flow:1,
|
|
||||||
"importancy": 0,
|
|
||||||
"lgtd": 114.84588381269232,
|
|
||||||
"lttd": 31.313032489798424,
|
|
||||||
"elev": null,
|
|
||||||
"hasRz": true,
|
|
||||||
|
|
||||||
"tm": "2025-06-03T02:00:00.000Z",
|
|
||||||
"rz": 43.6,
|
|
||||||
"state": 1
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
const ggPoint = [
|
|
||||||
{
|
|
||||||
"stcd": "61644000",
|
|
||||||
"stnm": "西干渠渠首流量监测",
|
|
||||||
title:'灌溉流量监测（西干渠渠首流量监测）',
|
|
||||||
"tab": '灌溉',
|
|
||||||
"adcd": null,
|
|
||||||
flow:1,
|
|
||||||
"wscd": null,
|
|
||||||
"importancy": 0,
|
|
||||||
"lgtd": 114.88154871012667,
|
|
||||||
"lttd": 31.167873741586128,
|
|
||||||
"elev": null,
|
|
||||||
"hasRz": true,
|
|
||||||
"tm": "2025-06-03T02:00:00.000Z",
|
|
||||||
"rz": 43.6,
|
|
||||||
"state": 1
|
|
||||||
}
|
|
||||||
]
|
|
||||||
const flyTo = () => {
|
|
||||||
const map = window.__mapref;
|
|
||||||
const layer = map.getLayer('关联站点')
|
|
||||||
if (layer) {
|
|
||||||
map.removeLayer('关联站点');
|
|
||||||
map.removeSource('关联站点');
|
|
||||||
}
|
|
||||||
map.addLayer({
|
|
||||||
'id': '关联站点',//+new Date().getTime(),
|
|
||||||
'type': 'symbol',
|
|
||||||
'source': {
|
|
||||||
'type': 'geojson',
|
|
||||||
'data': {
|
|
||||||
'type': 'FeatureCollection',
|
|
||||||
'features': [],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
'layout': {
|
|
||||||
'icon-allow-overlap': true,
|
|
||||||
'text-allow-overlap': true,
|
|
||||||
'icon-image': '流量站',
|
|
||||||
'icon-size': [
|
|
||||||
'interpolate', ['linear'], ['zoom'],
|
|
||||||
10, 0.4,
|
|
||||||
14, 0.8,
|
|
||||||
],
|
|
||||||
|
|
||||||
'text-allow-overlap': true,
|
|
||||||
'text-size': [
|
|
||||||
'interpolate', ['linear'], ['zoom'],
|
|
||||||
10, 10,
|
|
||||||
14, 14,
|
|
||||||
],
|
|
||||||
'text-font': ['Roboto Black'],
|
|
||||||
'text-field': [
|
|
||||||
'step',
|
|
||||||
['zoom'],
|
|
||||||
'',
|
|
||||||
12, ['get', 'stnm']
|
|
||||||
],
|
|
||||||
'text-anchor': 'top',
|
|
||||||
'text-offset': [0, 1],
|
|
||||||
|
|
||||||
},
|
|
||||||
'paint': {
|
|
||||||
'text-color': '#fff'
|
|
||||||
},
|
|
||||||
'visibility': 'visible',
|
|
||||||
});
|
|
||||||
const arrData = [...stPoint, ...scPoint, ...ggPoint]
|
|
||||||
map.getSource('关联站点').setData(parseGeoJSON(arrData))
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<PanelBox
|
|
||||||
style={style}
|
style={style}
|
||||||
title="水资源利用"
|
title="水资源利用"
|
||||||
color="green"
|
color="green"
|
||||||
// extra={
|
extra={
|
||||||
// <>
|
<>
|
||||||
// <span className="button-group">
|
<span className="button-group">
|
||||||
// <span className={clsx({ active: tab === '生态' })} onClick={() => {
|
<span className={clsx({ active: tab==='生态' })} onClick={() => {
|
||||||
// // dispatch.map.setLayerVisible({'BxjcLayer':true});
|
// dispatch.map.setLayerVisible({'BxjcLayer':true});
|
||||||
// // dispatch.map.setLayerVisible({'SyjcLayer':false});
|
// dispatch.map.setLayerVisible({'SyjcLayer':false});
|
||||||
// // dispatch.map.setLayerVisible({'SljcLayer':false});
|
// dispatch.map.setLayerVisible({'SljcLayer':false});
|
||||||
// // dispatch.map.setLayerVisible({'ByjcLayer':false});
|
// dispatch.map.setLayerVisible({'ByjcLayer':false});
|
||||||
// setTab('生态')
|
setTab('生态')
|
||||||
// }}>生态</span>
|
}}>生态</span>
|
||||||
// <span className={clsx({ active: tab === '灌溉发电' })} onClick={() => {
|
<span className={clsx({ active: tab==='灌溉发电' })} onClick={() => {
|
||||||
// // dispatch.map.setLayerVisible({'BxjcLayer':false});
|
// dispatch.map.setLayerVisible({'BxjcLayer':false});
|
||||||
// // dispatch.map.setLayerVisible({'SyjcLayer':true});
|
// dispatch.map.setLayerVisible({'SyjcLayer':true});
|
||||||
// // dispatch.map.setLayerVisible({'SljcLayer':false});
|
// dispatch.map.setLayerVisible({'SljcLayer':false});
|
||||||
// // dispatch.map.setLayerVisible({'ByjcLayer':false});
|
// dispatch.map.setLayerVisible({'ByjcLayer':false});
|
||||||
// setTab('灌溉发电')
|
setTab('灌溉发电')
|
||||||
// }}>灌溉发电</span>
|
}}>灌溉发电</span>
|
||||||
// {/* <span className={clsx({ active: tab==='发电' })} onClick={() => {
|
{/* <span className={clsx({ active: tab==='发电' })} onClick={() => {
|
||||||
// // dispatch.map.setLayerVisible({'BxjcLayer':false});
|
// dispatch.map.setLayerVisible({'BxjcLayer':false});
|
||||||
// // dispatch.map.setLayerVisible({'SyjcLayer':false});
|
// dispatch.map.setLayerVisible({'SyjcLayer':false});
|
||||||
// // dispatch.map.setLayerVisible({'SljcLayer':true});
|
// dispatch.map.setLayerVisible({'SljcLayer':true});
|
||||||
// // dispatch.map.setLayerVisible({'ByjcLayer':false});
|
// dispatch.map.setLayerVisible({'ByjcLayer':false});
|
||||||
// setTab('发电')
|
setTab('发电')
|
||||||
// }}>发电</span> */}
|
}}>发电</span> */}
|
||||||
// <span className={clsx({ active: tab === '泄洪' })} onClick={() => {
|
<span className={clsx({ active: tab==='泄洪' })} onClick={() => {
|
||||||
// // dispatch.map.setLayerVisible({'BxjcLayer':false});
|
// dispatch.map.setLayerVisible({'BxjcLayer':false});
|
||||||
// // dispatch.map.setLayerVisible({'SyjcLayer':false});
|
// dispatch.map.setLayerVisible({'SyjcLayer':false});
|
||||||
// // dispatch.map.setLayerVisible({'SljcLayer':false});
|
// dispatch.map.setLayerVisible({'SljcLayer':false});
|
||||||
// // dispatch.map.setLayerVisible({'ByjcLayer':true});
|
// dispatch.map.setLayerVisible({'ByjcLayer':true});
|
||||||
// setTab('泄洪')
|
setTab('泄洪')
|
||||||
// }}>泄洪</span>
|
}}>泄洪</span>
|
||||||
// </span>
|
</span>
|
||||||
// </>
|
</>
|
||||||
// }
|
}
|
||||||
>
|
>
|
||||||
<div className='water-source-box'>
|
{
|
||||||
<div className='source-total' style={{ marginTop: -15 }}>
|
|
||||||
<div className='skyb-box'>
|
|
||||||
<div className='rain-yb'>
|
|
||||||
<div className='title-yb'>水资源统计</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className='source-container'>
|
|
||||||
<div className="source-card" style={{ background: 'rgba(149, 242, 4,.3)' }}>
|
|
||||||
<div className="source-value" style={{ color: 'rgba(149, 242, 4)' }}>17197</div>
|
|
||||||
<div className="source-label">当前蓄水(万m³)</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="source-card" style={{ background: 'rgba(2, 167, 240,.3)' }}>
|
|
||||||
<div className="source-value" style={{ color: 'rgba(2, 167, 240)' }}>1102</div>
|
|
||||||
<div className="source-label">本年累计来水(万m³)</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="source-card" style={{ background: 'rgba(245, 154, 35,.3)' }}>
|
|
||||||
<div className="source-value" style={{ color: 'rgba(245, 154, 35)' }}>1209</div>
|
|
||||||
<div className="source-label">本年累计供水(万m³)</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className='providerWater-total'>
|
|
||||||
<div className='skyb-box'>
|
|
||||||
<div className='rain-yb' style={{ display: 'flex', position: 'relative', justifyContent: 'space-between', alignItems: 'center' }}>
|
|
||||||
<div className='title-yb'>供水统计分析</div>
|
|
||||||
<img src={`${process.env.PUBLIC_URL}/assets/gantanh.png`} alt=""
|
|
||||||
style={{ width: 20, position: 'absolute', left: '36%', cursor: 'pointer' }}
|
|
||||||
onClick={flyTo}
|
|
||||||
/>
|
|
||||||
<div className='button-group' style={{ color: "#fff" }}>
|
|
||||||
<span className={clsx({ active: tab === '生态' })} onClick={() => {
|
|
||||||
setTab('生态')
|
|
||||||
}}>生态</span>
|
|
||||||
<span className={clsx({ active: tab === '水厂' })} onClick={() => {
|
|
||||||
setTab('水厂')
|
|
||||||
}}>水厂</span> <span className={clsx({ active: tab === '灌溉' })} onClick={() => {
|
|
||||||
setTab('灌溉')
|
|
||||||
}}>灌溉</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className='providerWater-select'>
|
|
||||||
<div style={{ height: '30px', overflow: 'hidden', display: 'flex', justifyContent: 'space-between', padding: '0 10px' }}>
|
|
||||||
<Select
|
|
||||||
labelId="analysis-select-label"
|
|
||||||
value={dimension}
|
|
||||||
label=""
|
|
||||||
onChange={(event) => {
|
|
||||||
const value = event.target.value;
|
|
||||||
setDimension(value);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MenuItem value="ft">{tab == '生态' ? '浮桥河水库生态流量' : tab == '水厂' ? '顺河镇供水监测' : '西干渠渠首流量监测'}</MenuItem>
|
|
||||||
</Select>
|
|
||||||
<img src={`${process.env.PUBLIC_URL}/assets/right-arrow.png`} alt="" onClick={() => {
|
|
||||||
dispatch.runtime.setInfoDlg({ layerId: 'flowjcLayer', properties: { title: tab == '生态' ? '生态流量监测（浮桥河水库生态流量）' : tab == '水厂' ? '水厂流量监测（顺河镇供水监测）' : '灌溉流量监测（西干渠渠首流量监测）', tab } });
|
|
||||||
}} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className='providerWater-content' style={{ padding: '3px 5px 0 5px', display: 'flex' }}>
|
|
||||||
{
|
|
||||||
tab == '生态' ?
|
|
||||||
<>
|
|
||||||
<div style={{ width: "100%", display: 'flex', fontSize: '12px', flexDirection: 'column', justifyContent: 'space-around', padding: '0.5rem 0' }}>
|
|
||||||
<div style={{ width: '8rem', padding: '0.5rem 0.5rem', background: '#2a5278', display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'center', color: "#ffffff" }}>
|
|
||||||
<div><span style={{ color: '#76b1d4', fontSize: '22px' }}>0.363</span> m³/s</div>
|
|
||||||
<div style={{ textAlign: 'center' }}>实时流量({moment().format('YYYY-MM-DD') + ' 09:00'})</div>
|
|
||||||
</div>
|
|
||||||
<div style={{ width: '8rem', padding: '0.5rem 0.5rem', margin: "10px 0", background: '#2a5278', display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'center', color: "#ffffff" }}>
|
|
||||||
<div><span style={{ color: '#76b1d4', fontSize: '22px' }}>371.12</span> %</div>
|
|
||||||
<div style={{ marginTop: '5px' }}>近30天达标率</div>
|
|
||||||
</div>
|
|
||||||
<div style={{ width: '8rem', padding: '0.5rem 0.5rem', marginBottom: '10px', background: '#2a5278', display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'center', color: "#ffffff" }}>
|
|
||||||
<div><span style={{ color: '#76b1d4', fontSize: '22px' }}>0.358</span> m³/s</div>
|
|
||||||
<div style={{ marginTop: '5px' }}>日平均流量({moment().format('YYYY-MM-DD')})</div>
|
|
||||||
</div>
|
|
||||||
<div style={{ width: '8rem', padding: '0.5rem 0.5rem', background: '#2a5278', display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'center', color: "#ffffff" }}>
|
|
||||||
<div><span style={{ color: '#76b1d4', fontSize: '22px' }}>0.32</span> m³/s</div>
|
|
||||||
<div style={{ marginTop: '5px' }}>生态流量目标({moment().format('YYYY-MM-DD')})</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/* <CustomCalendar markedDates={markedDates} /> */}
|
|
||||||
<img src={`${process.env.PUBLIC_URL}/assets/calendar.png`} alt="" style={{ width: 300, height: 330, transform: 'scale(0.9)' }} />
|
|
||||||
</>
|
|
||||||
: null
|
|
||||||
}
|
|
||||||
{
|
|
||||||
tab == '水厂' ?
|
|
||||||
<div>
|
|
||||||
<div style={{ width: "100%", display: 'flex', fontSize: '12px', justifyContent: 'space-around', padding: '0.5rem 0', columnGap: 10 }}>
|
|
||||||
<div style={{ width: '8rem', padding: '0.5rem 0.5rem', background: '#2a5278', display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'center', color: "#ffffff" }}>
|
|
||||||
<div><span style={{ color: '#76b1d4', fontSize: '22px' }}>0.363</span> m³/s</div>
|
|
||||||
<div style={{ textAlign: 'center' }}>实时流量({moment().format('YYYY-MM-DD') + ' 09:00'})</div>
|
|
||||||
</div>
|
|
||||||
<div style={{ width: '8rem', padding: '0.5rem 0.5rem', background: '#2a5278', display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'center', color: "#ffffff" }}>
|
|
||||||
<div><span style={{ color: '#76b1d4', fontSize: '22px' }}>2213</span> m³</div>
|
|
||||||
<div style={{ marginTop: '5px' }}>当日累计供水</div>
|
|
||||||
</div>
|
|
||||||
<div style={{ width: '8rem', padding: '0.5rem 0.5rem', background: '#2a5278', display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'center', color: "#ffffff" }}>
|
|
||||||
<div><span style={{ color: '#76b1d4', fontSize: '22px' }}>66390</span> m³</div>
|
|
||||||
<div style={{ marginTop: '5px', textAlign: 'center' }}>近30天累计供水({moment().format('YYYY-MM-DD')})</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<WaterSupplyChart type={1} />
|
|
||||||
</div>
|
|
||||||
: null
|
|
||||||
}
|
|
||||||
{
|
|
||||||
tab == '灌溉' ?
|
|
||||||
<div>
|
|
||||||
<div style={{ width: "100%", display: 'flex', fontSize: '12px', justifyContent: 'space-around', padding: '0.5rem 0', columnGap: 10 }}>
|
|
||||||
<div style={{ width: '8rem', padding: '0.5rem 0.5rem', background: '#2a5278', display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'center', color: "#ffffff" }}>
|
|
||||||
<div><span style={{ color: '#76b1d4', fontSize: '22px' }}>0.351</span> m³/s</div>
|
|
||||||
<div style={{ textAlign: 'center' }}>实时流量({moment().format('YYYY-MM-DD') + ' 09:00'})</div>
|
|
||||||
</div>
|
|
||||||
<div style={{ width: '8rem', padding: '0.5rem 0.5rem', background: '#2a5278', display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'center', color: "#ffffff" }}>
|
|
||||||
<div><span style={{ color: '#76b1d4', fontSize: '22px' }}>3213</span> m³</div>
|
|
||||||
<div style={{ marginTop: '5px' }}>当日累计供水</div>
|
|
||||||
</div>
|
|
||||||
<div style={{ width: '8rem', padding: '0.5rem 0.5rem', background: '#2a5278', display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'center', color: "#ffffff" }}>
|
|
||||||
<div><span style={{ color: '#76b1d4', fontSize: '22px' }}>96390</span> m³</div>
|
|
||||||
<div style={{ marginTop: '5px', textAlign: 'center' }}>近30天累计供水({moment().format('YYYY-MM-DD')})</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<WaterSupplyChart type={2} />
|
|
||||||
</div>
|
|
||||||
: null
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
<div className='predictwater'>
|
|
||||||
<div className='skyb-box'>
|
|
||||||
<div className='rain-yb'>
|
|
||||||
<div className='title-yb'>预测来水</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style={{ color: '#fff' }}>
|
|
||||||
未来10天来水量：<span style={{ fontSize: 18, color: '#029ee4' }}>87.2</span>万m³（{moment().format('YYYY-MM-DD')} ~ {moment().add(9, 'day').format('YYYY-MM-DD')}）
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/* {
|
|
||||||
tab==='生态'?
|
tab==='生态'?
|
||||||
<div style={{width:"100%",display:'flex',fontSize:'12px',justifyContent:'space-around',padding:'0.5rem 0'}}>
|
<div style={{width:"100%",display:'flex',fontSize:'12px',justifyContent:'space-around',padding:'0.5rem 0'}}>
|
||||||
<div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
|
<div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
|
||||||
|
|
@ -516,11 +247,11 @@ function DrpReal({ style }) {
|
||||||
<div style={{textAlign:'center'}}>生态流量站(2025-06-02 09:00)</div>
|
<div style={{textAlign:'center'}}>生态流量站(2025-06-02 09:00)</div>
|
||||||
</div>
|
</div>
|
||||||
<div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
|
<div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
|
||||||
<div><span style={{color:'#76b1d4',fontSize:'22px'}}>371.12</span> 万m³</div>
|
<div><span style={{color:'#76b1d4',fontSize:'22px'}}>441.12</span> 万m³</div>
|
||||||
<div style={{marginTop:'5px'}}>月供水量</div>
|
<div style={{marginTop:'5px'}}>月供水量</div>
|
||||||
</div>
|
</div>
|
||||||
<div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
|
<div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
|
||||||
<div><span style={{color:'#76b1d4',fontSize:'22px'}}>641.12</span> 万m³</div>
|
<div><span style={{color:'#76b1d4',fontSize:'22px'}}>371.12</span> 万m³</div>
|
||||||
<div style={{marginTop:'5px'}}>年供水量</div>
|
<div style={{marginTop:'5px'}}>年供水量</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -552,7 +283,7 @@ function DrpReal({ style }) {
|
||||||
<div style={{textAlign:'center'}}>发电流量站(2025-06-02 09:00)</div>
|
<div style={{textAlign:'center'}}>发电流量站(2025-06-02 09:00)</div>
|
||||||
</div>
|
</div>
|
||||||
<div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
|
<div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
|
||||||
<div><span style={{color:'#76b1d4',fontSize:'22px'}}>126.12</span> 万m³</div>
|
<div><span style={{color:'#76b1d4',fontSize:'22px'}}>426.12</span> 万m³</div>
|
||||||
<div style={{marginTop:'5px'}}>月供水量</div>
|
<div style={{marginTop:'5px'}}>月供水量</div>
|
||||||
</div>
|
</div>
|
||||||
<div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
|
<div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
|
||||||
|
|
@ -582,9 +313,9 @@ function DrpReal({ style }) {
|
||||||
}
|
}
|
||||||
<div style={{width:'100%',height:'12rem'}}>
|
<div style={{width:'100%',height:'12rem'}}>
|
||||||
<AreaDrpChart data={[]} tab={tab} />
|
<AreaDrpChart data={[]} tab={tab} />
|
||||||
</div> */}
|
</div>
|
||||||
</PanelBox>
|
</PanelBox>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default DrpReal;
|
export default DrpReal;
|
||||||
|
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
.water-source-box {
|
|
||||||
.source-total {
|
|
||||||
.source-container {
|
|
||||||
display: flex;
|
|
||||||
gap: 16px;
|
|
||||||
padding: 2px;
|
|
||||||
|
|
||||||
.source-card {
|
|
||||||
flex: 1;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
border-radius: 8px;
|
|
||||||
color: white;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
min-width: 125px;
|
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.source-value {
|
|
||||||
font-size: 32px;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.source-label {
|
|
||||||
font-size: 14px;
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.providerWater-total{
|
|
||||||
.button-group {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
color: rgb(172, 188, 190);
|
|
||||||
margin-left: 1rem;
|
|
||||||
|
|
||||||
span {
|
|
||||||
cursor: pointer;
|
|
||||||
margin: 0 0.25rem;
|
|
||||||
display: inline-block;
|
|
||||||
border: 1px solid #209aec46;
|
|
||||||
padding: 0.1rem 0.5rem;
|
|
||||||
border-radius: 0.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active {
|
|
||||||
color: #fff;
|
|
||||||
cursor: default;
|
|
||||||
font-weight: bold;
|
|
||||||
border: 1px solid #209aec9f;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -12,7 +12,7 @@ function DrpReal({ style }) {
|
||||||
return (
|
return (
|
||||||
<PanelBox
|
<PanelBox
|
||||||
style={style}
|
style={style}
|
||||||
title="24h入库洪水预报"
|
title="水库预报"
|
||||||
color="green"
|
color="green"
|
||||||
// extra={
|
// extra={
|
||||||
// <>
|
// <>
|
||||||
|
|
|
||||||
|
|
@ -4,22 +4,22 @@ function Page({ style }) {
|
||||||
return (
|
return (
|
||||||
<div style={{width:'100%',display:'flex'}}>
|
<div style={{width:'100%',display:'flex'}}>
|
||||||
<div style={{width:'100%',display:'flex',alignItems:'flex-start',padding:'0.5rem 0',justifyContent:'space-around'}}>
|
<div style={{width:'100%',display:'flex',alignItems:'flex-start',padding:'0.5rem 0',justifyContent:'space-around'}}>
|
||||||
<div style={{width:'24%',display:'flex',flexDirection:'column',alignItems:'center',border:'1px solid rgba(36, 136, 223, 0.4)',paddingTop:'0.2rem',paddingBottom:'0.1rem',background:'#132a4b'}}>
|
<div style={{width:'24%',display:'flex',flexDirection:'column',alignItems:'center',border:'1px solid rgba(36, 136, 223, 0.4)',paddingTop:'0.2rem',background:'#132a4b'}}>
|
||||||
<img src={`${process.env.PUBLIC_URL}/assets/icon/大型水库.png`} width={20} alt=""/>
|
<img src={`${process.env.PUBLIC_URL}/assets/icon/大型水库.png`} width={20} alt=""/>
|
||||||
<div style={{color:'#ffffff',fontSize:'0.8rem',marginTop:'0.1rem'}}>大型水库</div>
|
<div style={{color:'#ffffff',fontSize:'0.8rem',marginTop:'0.1rem'}}>大型水库</div>
|
||||||
<div style={{color:'#ffffff',fontSize:'0.8rem',lineHeight:'1rem'}}><span style={{color:'#7dd188',fontSize:'1.2rem'}}>3</span> 座</div>
|
<div style={{color:'#ffffff',fontSize:'0.8rem',lineHeight:'1rem'}}><span style={{color:'#7dd188',fontSize:'1.2rem'}}>3</span> 座</div>
|
||||||
</div>
|
</div>
|
||||||
<div style={{width:'24%',display:'flex',flexDirection:'column',alignItems:'center',border:'1px solid rgba(36, 136, 223, 0.4)',paddingTop:'0.2rem',paddingBottom:'0.1rem',background:'#132a4b'}}>
|
<div style={{width:'24%',display:'flex',flexDirection:'column',alignItems:'center',border:'1px solid rgba(36, 136, 223, 0.4)',paddingTop:'0.2rem',background:'#132a4b'}}>
|
||||||
<img src={`${process.env.PUBLIC_URL}/assets/icon/中.png`} width={20} alt=""/>
|
<img src={`${process.env.PUBLIC_URL}/assets/icon/中.png`} width={20} alt=""/>
|
||||||
<div style={{color:'#ffffff',fontSize:'0.8rem',marginTop:'0.1rem'}}>中型水库</div>
|
<div style={{color:'#ffffff',fontSize:'0.8rem',marginTop:'0.1rem'}}>中型水库</div>
|
||||||
<div style={{color:'#ffffff',fontSize:'0.8rem',lineHeight:'1rem'}}><span style={{color:'#7dd188',fontSize:'1.2rem'}}>7</span> 座</div>
|
<div style={{color:'#ffffff',fontSize:'0.8rem',lineHeight:'1rem'}}><span style={{color:'#7dd188',fontSize:'1.2rem'}}>7</span> 座</div>
|
||||||
</div>
|
</div>
|
||||||
<div style={{width:'24%',display:'flex',flexDirection:'column',alignItems:'center',border:'1px solid rgba(36, 136, 223, 0.4)',paddingTop:'0.2rem',paddingBottom:'0.1rem',background:'#132a4b'}}>
|
<div style={{width:'24%',display:'flex',flexDirection:'column',alignItems:'center',border:'1px solid rgba(36, 136, 223, 0.4)',paddingTop:'0.2rem',background:'#132a4b'}}>
|
||||||
<img src={`${process.env.PUBLIC_URL}/assets/icon/小1.png`} width={20} alt=""/>
|
<img src={`${process.env.PUBLIC_URL}/assets/icon/小1.png`} width={20} alt=""/>
|
||||||
<div style={{color:'#ffffff',fontSize:'0.8rem',marginTop:'0.1rem'}}>小(1)型水库</div>
|
<div style={{color:'#ffffff',fontSize:'0.8rem',marginTop:'0.1rem'}}>小(1)型水库</div>
|
||||||
<div style={{color:'#ffffff',fontSize:'0.8rem',lineHeight:'1rem'}}><span style={{color:'#7dd188',fontSize:'1.2rem'}}>44</span> 座</div>
|
<div style={{color:'#ffffff',fontSize:'0.8rem',lineHeight:'1rem'}}><span style={{color:'#7dd188',fontSize:'1.2rem'}}>44</span> 座</div>
|
||||||
</div>
|
</div>
|
||||||
<div style={{width:'24%',display:'flex',flexDirection:'column',alignItems:'center',border:'1px solid rgba(36, 136, 223, 0.4)',paddingTop:'0.2rem',paddingBottom:'0.1rem',background:'#132a4b'}}>
|
<div style={{width:'24%',display:'flex',flexDirection:'column',alignItems:'center',border:'1px solid rgba(36, 136, 223, 0.4)',paddingTop:'0.2rem',background:'#132a4b'}}>
|
||||||
<img src={`${process.env.PUBLIC_URL}/assets/icon/小1.png`} width={20} alt=""/>
|
<img src={`${process.env.PUBLIC_URL}/assets/icon/小1.png`} width={20} alt=""/>
|
||||||
<div style={{color:'#ffffff',fontSize:'0.8rem',marginTop:'0.1rem'}}>小(2)型水库</div>
|
<div style={{color:'#ffffff',fontSize:'0.8rem',marginTop:'0.1rem'}}>小(2)型水库</div>
|
||||||
<div style={{color:'#ffffff',fontSize:'0.8rem',lineHeight:'1rem'}}><span style={{color:'#7dd188',fontSize:'1.2rem'}}>207</span> 座</div>
|
<div style={{color:'#ffffff',fontSize:'0.8rem',lineHeight:'1rem'}}><span style={{color:'#7dd188',fontSize:'1.2rem'}}>207</span> 座</div>
|
||||||
|
|
|
||||||
|
|
@ -126,14 +126,6 @@ function DrpReal({ style }) {
|
||||||
map.getSource('临时水库tz').setData(parseGeoJSON(data))
|
map.getSource('临时水库tz').setData(parseGeoJSON(data))
|
||||||
}
|
}
|
||||||
|
|
||||||
const getBxx = (a,b)=>{
|
|
||||||
if(typeof a === 'number' && typeof b === 'number' ){
|
|
||||||
return (a-b).toFixed(2)
|
|
||||||
}else{
|
|
||||||
return '-'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PanelBox
|
<PanelBox
|
||||||
style={style}
|
style={style}
|
||||||
|
|
@ -144,7 +136,7 @@ function DrpReal({ style }) {
|
||||||
{
|
{
|
||||||
skTypeObj.map((item) =>
|
skTypeObj.map((item) =>
|
||||||
(<>
|
(<>
|
||||||
<CollapsePage type={item.type} name={item.name} num1={item.num1} num2={`${item.num3}`} skType={skType} setSkType={setSkType} icon={item.icon} />
|
<CollapsePage type={item.type} name={item.name} num1={item.num1} num2={`${item.num2}/${item.num3}`} skType={skType} setSkType={setSkType} icon={item.icon} />
|
||||||
<Collapse in={skType === item.type} timeout="auto" unmountOnExit>
|
<Collapse in={skType === item.type} timeout="auto" unmountOnExit>
|
||||||
<TableContainer style={{ maxHeight: 'calc( 100vh - 28.2rem )' }}>
|
<TableContainer style={{ maxHeight: 'calc( 100vh - 28.2rem )' }}>
|
||||||
<Table size="small" stickyHeader>
|
<Table size="small" stickyHeader>
|
||||||
|
|
@ -152,15 +144,15 @@ function DrpReal({ style }) {
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<DpTableCell style={{ minWidth: '3rem' }} align="left">序号</DpTableCell>
|
<DpTableCell style={{ minWidth: '3rem' }} align="left">序号</DpTableCell>
|
||||||
<DpTableCell style={{ minWidth: '8rem' }} align="center">水库名称</DpTableCell>
|
<DpTableCell style={{ minWidth: '8rem' }} align="center">水库名称</DpTableCell>
|
||||||
{/* <DpTableCell style={{ minWidth: '8rem' }} align="center">类型</DpTableCell> */}
|
<DpTableCell style={{ minWidth: '8rem' }} align="center">类型</DpTableCell>
|
||||||
<DpTableCell style={{ minWidth: '6rem' }} align="center">
|
<DpTableCell style={{ minWidth: '8rem' }} align="center">
|
||||||
{/* <TableSortLabel
|
{/* <TableSortLabel
|
||||||
onClick={() => setSort1(!sort1)}
|
onClick={() => setSort1(!sort1)}
|
||||||
active={true}
|
active={true}
|
||||||
direction={sort1?'desc':'asc'}>
|
direction={sort1?'desc':'asc'}>
|
||||||
{'蓄水量(万m³)'}
|
{'蓄水量(万m³)'}
|
||||||
</TableSortLabel> */}
|
</TableSortLabel> */}
|
||||||
当前水位 (m)
|
蓄水量(万m³)
|
||||||
</DpTableCell>
|
</DpTableCell>
|
||||||
<DpTableCell style={{ minWidth: '8rem' }} align="center">
|
<DpTableCell style={{ minWidth: '8rem' }} align="center">
|
||||||
<TableSortLabel
|
<TableSortLabel
|
||||||
|
|
@ -185,8 +177,8 @@ function DrpReal({ style }) {
|
||||||
{tableRow.stnm}
|
{tableRow.stnm}
|
||||||
</div>
|
</div>
|
||||||
</DpTableCell>
|
</DpTableCell>
|
||||||
{/* <DpTableCell align="center" >{item.name}</DpTableCell> */}
|
<DpTableCell align="center" >{item.name}</DpTableCell>
|
||||||
<DpTableCell align="right" >{`${tableRow.rz} (${getBxx(tableRow.rz,tableRow.fsltdz)})`}</DpTableCell>
|
<DpTableCell align="center" >{tableRow.xs}</DpTableCell>
|
||||||
<DpTableCell align="center" >{tableRow.w}</DpTableCell>
|
<DpTableCell align="center" >{tableRow.w}</DpTableCell>
|
||||||
</DpTableRow>
|
</DpTableRow>
|
||||||
</TableBody>
|
</TableBody>
|
||||||
|
|
|
||||||
|
|
@ -49,9 +49,7 @@ function WF() {
|
||||||
}, [contourSetting]);
|
}, [contourSetting]);
|
||||||
|
|
||||||
const genWeatherContour24H = () => {
|
const genWeatherContour24H = () => {
|
||||||
dispatch.runtime.setYyfa({ yy: '' })
|
dispatch.runtime.setYyfa({yy:''})
|
||||||
dispatch.runtime.setXiayouxh(false)
|
|
||||||
dispatch.runtime.setDuibifx([])
|
|
||||||
dispatch.shyjview.showWeather24h();
|
dispatch.shyjview.showWeather24h();
|
||||||
const map = window.__mapref
|
const map = window.__mapref
|
||||||
if (map) {
|
if (map) {
|
||||||
|
|
@ -60,9 +58,7 @@ function WF() {
|
||||||
}
|
}
|
||||||
|
|
||||||
const genWeatherContourRadar = () => {
|
const genWeatherContourRadar = () => {
|
||||||
dispatch.runtime.setYyfa({ yy: '' })
|
dispatch.runtime.setYyfa({yy:''})
|
||||||
dispatch.runtime.setXiayouxh(false)
|
|
||||||
dispatch.runtime.setDuibifx([])
|
|
||||||
dispatch.shyjview.showWeatherRadar();
|
dispatch.shyjview.showWeatherRadar();
|
||||||
const map = window.__mapref
|
const map = window.__mapref
|
||||||
map.setLayoutProperty('热力图', 'visibility', 'none');
|
map.setLayoutProperty('热力图', 'visibility', 'none');
|
||||||
|
|
|
||||||
|
|
@ -1,137 +0,0 @@
|
||||||
import React, { useState,useEffect } from 'react';
|
|
||||||
import { makeStyles } from '@material-ui/core/styles';
|
|
||||||
import { Card, CardContent, Typography, Box } from '@material-ui/core';
|
|
||||||
import { useDispatch, useSelector } from 'react-redux';
|
|
||||||
|
|
||||||
const useStyles = makeStyles({
|
|
||||||
cardContainer: {
|
|
||||||
marginBottom: 16,
|
|
||||||
},
|
|
||||||
card: {
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
color: '#fff',
|
|
||||||
borderRadius: 8,
|
|
||||||
border: '2px solid #d7d7d7',
|
|
||||||
cursor: 'pointer',
|
|
||||||
transition: 'all 0.3s ease',
|
|
||||||
'&:hover': {
|
|
||||||
borderColor: '#4a90e2',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
selectedCard: {
|
|
||||||
borderColor: '#00ff00',
|
|
||||||
boxShadow: '0 0 10px rgba(0, 255, 0, 0.2)',
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
marginBottom: 16,
|
|
||||||
'& svg': {
|
|
||||||
marginRight: 8,
|
|
||||||
fontSize: 16,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
color: '#ccc',
|
|
||||||
'& p': {
|
|
||||||
marginBottom: 8,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
editIcon: {
|
|
||||||
marginLeft: 'auto',
|
|
||||||
color: '#4a90e2',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const ScheduleCard = ({ data, selected, onClick }) => {
|
|
||||||
const classes = useStyles();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Box className={classes.cardContainer}>
|
|
||||||
<Card
|
|
||||||
className={`${classes.card} ${selected ? classes.selectedCard : ''}`}
|
|
||||||
onClick={onClick}
|
|
||||||
style={{padding:0}}
|
|
||||||
>
|
|
||||||
<CardContent style={{padding:"0 10px"}}>
|
|
||||||
<Typography variant="h8" className={classes.title}>
|
|
||||||
<span style={{color:"#fff",fontSize:18}}>调度方案-{data.date}</span>
|
|
||||||
{/* <Box component="span" className={classes.editIcon}>
|
|
||||||
✎
|
|
||||||
</Box> */}
|
|
||||||
</Typography>
|
|
||||||
<div className={classes.content}>
|
|
||||||
<Typography component="p" style={{fontSize:16}}>
|
|
||||||
初始水位为{data.initialLevel}m，通过开启工作闸门进行提前泄洪，开度最大为
|
|
||||||
{data.maxOpening}m，最大下泄流量为{data.maxFlow}m³/s，共持续调控
|
|
||||||
{data.duration}小时，期间最高水位为{data.maxLevel}m，未超过校核洪水位
|
|
||||||
{data.checkLevel}m，大坝处于安全状态。
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 父组件示例
|
|
||||||
const ScheduleList = ({setfayy}) => {
|
|
||||||
const [selectedCard, setSelectedCard] = useState(null);
|
|
||||||
|
|
||||||
const schedules = [
|
|
||||||
{
|
|
||||||
id: '20250602',
|
|
||||||
date: '20250602',
|
|
||||||
initialLevel: 64.0,
|
|
||||||
maxOpening: 1.2,
|
|
||||||
maxFlow: 12.42,
|
|
||||||
duration: 143,
|
|
||||||
maxLevel: 66.12,
|
|
||||||
checkLevel: 68.7
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '20250524',
|
|
||||||
date: '20250524',
|
|
||||||
initialLevel: 64.2,
|
|
||||||
maxOpening: 2.1,
|
|
||||||
maxFlow: 22.31,
|
|
||||||
duration: 65,
|
|
||||||
maxLevel: 67.12,
|
|
||||||
checkLevel: 68.7
|
|
||||||
}
|
|
||||||
];
|
|
||||||
const [compareList, setCompareList] = useState([])
|
|
||||||
const scheduleClick = (schedule) => {
|
|
||||||
setfayy();
|
|
||||||
setSelectedCard(schedule.id)
|
|
||||||
const findItem = schedules.find(item => item.id == schedule.id);
|
|
||||||
setCompareList([...compareList,findItem])
|
|
||||||
}
|
|
||||||
const dispatch = useDispatch();
|
|
||||||
const num = useSelector(s => s.runtime.duibifxNum)
|
|
||||||
useEffect(() => {
|
|
||||||
const redList = Array.from(new Set(compareList.map(item => item.id)))
|
|
||||||
dispatch.runtime.setDuibifx(redList)
|
|
||||||
}, [compareList])
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!num.length) {
|
|
||||||
setSelectedCard(undefined)
|
|
||||||
}
|
|
||||||
}, [num])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div style={{height:'10rem',overflow:'auto'}}>
|
|
||||||
{schedules.map((schedule) => (
|
|
||||||
<ScheduleCard
|
|
||||||
key={schedule.id}
|
|
||||||
data={schedule}
|
|
||||||
selected={selectedCard === schedule.id}
|
|
||||||
onClick={()=>scheduleClick(schedule)}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ScheduleList;
|
|
||||||
|
|
@ -14,54 +14,14 @@ import Hdyj from './Hdyj';
|
||||||
import Shqx from './Shqx';
|
import Shqx from './Shqx';
|
||||||
import ShYj from './ShYj';
|
import ShYj from './ShYj';
|
||||||
import { styled } from '@material-ui/styles';
|
import { styled } from '@material-ui/styles';
|
||||||
import { makeStyles } from '@material-ui/core/styles';
|
|
||||||
import { RadioGroup, Radio, Switch, Box, FormControlLabel, InputLabel, Select, MenuItem, FormControl } from '@material-ui/core/index';
|
import { RadioGroup, Radio, Switch, FormControlLabel, InputLabel, Select, MenuItem, FormControl } from '@material-ui/core/index';
|
||||||
|
import { backgroundColor } from 'echarts/lib/theme/dark';
|
||||||
import { Description } from '@material-ui/icons';
|
import { Description } from '@material-ui/icons';
|
||||||
import DescriptionItem from '../../components/DescrptionItem';
|
import DescriptionItem from '../../components/DescrptionItem';
|
||||||
import WaterLevelAlert from './WaterLevelAlert'
|
import WaterLevelAlert from './WaterLevelAlert'
|
||||||
import ScheduleList from './ddfa'
|
|
||||||
const useStyles = makeStyles({
|
|
||||||
cardContainer: {
|
|
||||||
marginBottom: 16,
|
|
||||||
},
|
|
||||||
card: {
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
color: '#fff',
|
|
||||||
borderRadius: 8,
|
|
||||||
border: '1px solid #2a2b2f',
|
|
||||||
cursor: 'pointer',
|
|
||||||
transition: 'all 0.3s ease',
|
|
||||||
'&:hover': {
|
|
||||||
borderColor: '#4a90e2',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
selectedCard: {
|
|
||||||
borderColor: '#00ff00',
|
|
||||||
boxShadow: '0 0 10px rgba(0, 255, 0, 0.2)',
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
marginBottom: 16,
|
|
||||||
'& svg': {
|
|
||||||
marginRight: 8,
|
|
||||||
fontSize: 16,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
color: '#ccc',
|
|
||||||
'& p': {
|
|
||||||
marginBottom: 8,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
editIcon: {
|
|
||||||
color: '#4a90e2',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
export default function Warn({ style }) {
|
export default function Warn({ style }) {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const classes = useStyles();
|
|
||||||
|
|
||||||
const res = useSelector(s => s.runtime.yyObj)
|
const res = useSelector(s => s.runtime.yyObj)
|
||||||
const [value, setValue] = React.useState(res.yy ?? '');
|
const [value, setValue] = React.useState(res.yy ?? '');
|
||||||
const [yyValue, setYyValue] = React.useState(false);
|
const [yyValue, setYyValue] = React.useState(false);
|
||||||
|
|
@ -106,15 +66,11 @@ export default function Warn({ style }) {
|
||||||
});
|
});
|
||||||
const [dimension, setDimension] = useState('fqh');
|
const [dimension, setDimension] = useState('fqh');
|
||||||
const [checked, setChecked] = React.useState(false);
|
const [checked, setChecked] = React.useState(false);
|
||||||
const xiayou = useSelector(s => s.runtime.xiayouxh);
|
|
||||||
|
|
||||||
const fayy = () => {
|
const fayy = () => {
|
||||||
setYyValue(true)
|
setYyValue(true)
|
||||||
dispatch.runtime.setYyfa({ yy: true })
|
if (value) {
|
||||||
dispatch.runtime.setXiayouxh(true)
|
dispatch.runtime.setYyfa({ yy: value })
|
||||||
closeLayer()
|
}
|
||||||
// if (value) {
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// useEffect(() => {
|
// useEffect(() => {
|
||||||
|
|
@ -149,75 +105,35 @@ closeLayer()
|
||||||
}
|
}
|
||||||
// dispatch.runtime.setYyfa({})
|
// dispatch.runtime.setYyfa({})
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
dispatch.runtime.setDuibifx(selectedSchemes)
|
dispatch.runtime.setDuibifx(selectedSchemes)
|
||||||
}, [selectedSchemes])
|
}, [selectedSchemes])
|
||||||
|
|
||||||
const closeLayer = () => {
|
|
||||||
dispatch.runtime.setLayerSetting({ contour: null, dem: undefined });
|
|
||||||
dispatch.map.setLayerVisible({ ContourLayer: false });
|
|
||||||
const map = window.__mapref
|
|
||||||
map.setLayoutProperty('热力图', 'visibility', 'none');
|
|
||||||
}
|
|
||||||
|
|
||||||
const productFa = () => {
|
const productFa = () => {
|
||||||
dispatch?.runtime.setInfoDlg({ layerId: 'YuananLayer', properties: {} })
|
dispatch?.runtime.setInfoDlg({ layerId: 'YuananLayer', properties: {} })
|
||||||
dispatch.runtime.setYyfa({})
|
dispatch.runtime.setYyfa({})
|
||||||
dispatch.runtime.setXiayouxh(false)
|
|
||||||
closeLayer()
|
|
||||||
}
|
}
|
||||||
const changeYY = (e) => {
|
const changeYY = (e) => {
|
||||||
setValue(e.target.value)
|
setValue(e.target.value)
|
||||||
|
|
||||||
dispatch.runtime.setYyfa({})
|
dispatch.runtime.setYyfa({})
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleFaEdit = () => {
|
|
||||||
dispatch.runtime.setInfoDlg({ layerId: 'editFaLayer', properties: {} });
|
|
||||||
}
|
|
||||||
|
|
||||||
const btgroup = [
|
|
||||||
{
|
|
||||||
name: '水库调度',
|
|
||||||
key: 'dd',
|
|
||||||
icon: 'shuikudd1.png',
|
|
||||||
icon2: 'shuikudd2.png'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '下游行洪',
|
|
||||||
key: 'xh',
|
|
||||||
icon: 'xiayouxh1.png',
|
|
||||||
icon2: 'xiayouxh2.png'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
const [view, setView] = useState('dd')
|
|
||||||
const handleBtnGroup = (row) => {
|
|
||||||
setView(row.key)
|
|
||||||
if (row.key == 'dd') {
|
|
||||||
dispatch.runtime.setYyfa({ yy: true })
|
|
||||||
// dispatch.runtime.setXiayouxh(false)
|
|
||||||
} else {
|
|
||||||
dispatch.runtime.setYyfa({})
|
|
||||||
dispatch.runtime.setXiayouxh(true)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return (
|
return (
|
||||||
<PanelBox
|
<PanelBox
|
||||||
style={{ ...style, position: 'relative' }}
|
style={{ ...style, position: 'relative' }}
|
||||||
title="调度方案"
|
title="水库预演"
|
||||||
color="green"
|
color="green"
|
||||||
tabs={
|
tabs={
|
||||||
<div style={{ display: 'flex', justifyContent: 'flex-end', columnGap: 10 }}>
|
<div style={{ display: 'flex', justifyContent: 'flex-end', columnGap: 10 }}>
|
||||||
<span style={{ cursor: 'pointer', color: '#0066e4', padding: '4px 6px', border: '1px solid #175898' }} onClick={productFa}>自动生成方案</span>
|
<span style={{ cursor: 'pointer', color: '#0066e4', padding: '4px 6px', border: '1px solid #175898' }} onClick={productFa}>自动生成方案</span>
|
||||||
{yyValue && <span style={{ cursor: 'pointer', color: '#0066e4', padding: '4px 6px' }} onClick={handleFaEdit}>✎</span>}
|
<span style={{ cursor: 'pointer', color: '#0066e4', padding: '4px 6px', border: '1px solid #175898' }} onClick={fayy}>加载方案</span>
|
||||||
{/* <span style={{ cursor: 'pointer', color: '#0066e4', padding: '4px 6px', border: '1px solid #175898' }} onClick={fayy}>加载方案</span> */}
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<div >
|
<div >
|
||||||
{/* <FormControl fullWidth>
|
<FormControl fullWidth>
|
||||||
<RadioGroup
|
<RadioGroup
|
||||||
value={value}
|
value={value}
|
||||||
onChange={changeYY}
|
onChange={changeYY}
|
||||||
|
|
@ -237,8 +153,7 @@ closeLayer()
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
</RadioGroup>
|
</RadioGroup>
|
||||||
</FormControl> */}
|
</FormControl>
|
||||||
<ScheduleList setfayy={fayy} />
|
|
||||||
{res.yy &&
|
{res.yy &&
|
||||||
<div style={{ color: "#fff", position: 'absolute', top: 130, left: '-380px' }}>
|
<div style={{ color: "#fff", position: 'absolute', top: 130, left: '-380px' }}>
|
||||||
<img src={`${process.env.PUBLIC_URL}/assets/yyzl.png`} alt="" style={{ width: 370 }} />
|
<img src={`${process.env.PUBLIC_URL}/assets/yyzl.png`} alt="" style={{ width: 370 }} />
|
||||||
|
|
@ -254,19 +169,10 @@ closeLayer()
|
||||||
<img src={`${process.env.PUBLIC_URL}/assets/sl.jpg`} alt="" style={{ width: 421}} />
|
<img src={`${process.env.PUBLIC_URL}/assets/sl.jpg`} alt="" style={{ width: 421}} />
|
||||||
</div> */}
|
</div> */}
|
||||||
</div>}
|
</div>}
|
||||||
|
|
||||||
<div style={{ color: "#fff", position: 'absolute', top: 83, right: 600 }}>
|
<div style={{ color: "#fff", position: 'absolute', top: 83, right: 600 }}>
|
||||||
<WaterLevelAlert />
|
<WaterLevelAlert />
|
||||||
</div>
|
</div>
|
||||||
<div style={{ color: "#fff", position: 'absolute', top: 83, right: 1300 }}>
|
|
||||||
{
|
|
||||||
xiayou && btgroup.map(item => (
|
|
||||||
<div style={{ cursor: 'pointer', marginTop: 10 }} onClick={() => handleBtnGroup(item)} key={item.key}>
|
|
||||||
<img style={{ width: '100px' }} src={`${process.env.PUBLIC_URL}/assets/bar/${item.key === view ? item.icon2 : item.icon}`} alt="" />
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</PanelBox>
|
</PanelBox>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue