fix(): 水库修改
parent
023c56afb6
commit
c77f0e4773
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 MiB |
|
|
@ -271,6 +271,14 @@
|
|||
"pixelRatio": 1,
|
||||
"visible": true
|
||||
},
|
||||
"流量站": {
|
||||
"width": 32,
|
||||
"height": 32,
|
||||
"x": 160,
|
||||
"y": 32,
|
||||
"pixelRatio": 1,
|
||||
"visible": true
|
||||
},
|
||||
"泵站": {
|
||||
"width": 32,
|
||||
"height": 32,
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 47 KiB After Width: | Height: | Size: 50 KiB |
|
|
@ -614,6 +614,7 @@ const map = {
|
|||
|
||||
if (id != 504) {
|
||||
dispatch.runtime.setYyfa({})
|
||||
dispatch.runtime.setXiayouxh(false)
|
||||
}
|
||||
|
||||
if (
|
||||
|
|
|
|||
|
|
@ -87,8 +87,10 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
|||
} else if (view === 203) {
|
||||
left = [
|
||||
{ key: '天气' },
|
||||
{ key: '关联站点',style: { height: '15rem', flexGrow: 1 } },
|
||||
{ key: '水库水量统计',style: { height: '22rem' } },
|
||||
{ key: '关联站点', style: { height: '23rem', flexGrow: 1 } },
|
||||
{ key: '白蚁监测', style: { height: '17rem', flexGrow: 1 } },
|
||||
{ key: '视频监视', style: { height: '20rem', flexGrow: 1 } },
|
||||
|
||||
// { key: '安全监测', style: { height: '20rem', flexGrow: 1 } },
|
||||
];
|
||||
leftFullHeight = true;
|
||||
|
|
@ -311,9 +313,8 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
|||
];
|
||||
} else if (view === 203) {
|
||||
right = [
|
||||
{ key: '白蚁监测', style: { height: '20rem', flexGrow: 1 } },
|
||||
{ key: '视频监视', style: { height: '20rem', flexGrow: 1 } },
|
||||
{ key: '监测告警', style: { height: '20rem', flexGrow: 1 } },
|
||||
{ key: '水库水量统计',style: { height: '34rem',flexGrow: 1 } },
|
||||
{ key: '监测告警', style: { height: '15rem', flexGrow: 1 } },
|
||||
];
|
||||
rightFullHeight=true
|
||||
} else if (view === 204) {
|
||||
|
|
@ -322,10 +323,11 @@ export default function calcLayout(view, rightStack, hidePanels) {
|
|||
];
|
||||
} else if (view === 205) {
|
||||
right = [
|
||||
{ key: '水库预案', style: { height: '30%', flexGrow: 1 } },
|
||||
{ key: '调度结果', style: { height: '70%', flexGrow: 1 } },
|
||||
{ key: '方案对比', style: { height: '30%', flexGrow: 1 } },
|
||||
{ key: '水库预案', style: { height: '10rem', } },
|
||||
{ key: '调度结果', style: { height: '10rem', } },
|
||||
{ key: '方案对比', style: { height: '10rem', } },
|
||||
];
|
||||
rightFullHeight=true
|
||||
} else if (view === 206) {
|
||||
right = [
|
||||
{ key: '巡查问题看板', style: { height: '70%', flexGrow: 1 } },
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ function initState() {
|
|||
layerSetting: {
|
||||
},
|
||||
yyObj: {},
|
||||
xiayouxh:undefined,
|
||||
yuananType:'sh',
|
||||
duibifxNum:[],
|
||||
shkshObj:undefined,
|
||||
|
|
@ -71,6 +72,9 @@ const runtime = {
|
|||
setYuananType(state, props) {
|
||||
return { ...state, yuananType: props }
|
||||
},
|
||||
setXiayouxh(state, props) {
|
||||
return { ...state, xiayouxh: props }
|
||||
},
|
||||
setYyfa(state, props) {
|
||||
return { ...state, yyObj: props }
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,304 @@
|
|||
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 = [];
|
||||
|
||||
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;
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
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);
|
||||
|
|
@ -0,0 +1,239 @@
|
|||
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;
|
||||
|
|
@ -0,0 +1,140 @@
|
|||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
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);
|
||||
|
|
@ -0,0 +1,492 @@
|
|||
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;
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
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);
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
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);
|
||||
|
|
@ -16,6 +16,7 @@ function HDStDlg({ record, onClose }) {
|
|||
const loadFa = () => {
|
||||
onClose()
|
||||
dispatch.runtime.setYyfa({ yy: 111 })
|
||||
dispatch.runtime.setXiayouxh(true)
|
||||
}
|
||||
return (
|
||||
<Dialog
|
||||
|
|
|
|||
|
|
@ -45,7 +45,8 @@ import ShuiChangDlg from './ShuiChangDlg';
|
|||
import ShuiyuandiDlg from './ShuiyuandiDlg';
|
||||
import ShuiBengDlg from './ShuiBengDlg'
|
||||
import ShuichangguanwangDlg from './ShuichangguanwangDlg';
|
||||
|
||||
import FlowjcDlg from './FlowjcDlg'
|
||||
import EditFaDlg from './EditFaDlg'
|
||||
function InfoDlg() {
|
||||
const infoDlg = useSelector(getInfoDlg);
|
||||
const dispatch = useDispatch();
|
||||
|
|
@ -147,6 +148,10 @@ function InfoDlg() {
|
|||
return <ShuiBengDlg record={properties} onClose={handleClose} />
|
||||
}else if (layerId === 'GwLayer') {
|
||||
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,6 +137,7 @@ export default function MapCtrl({ initParams, onLoad }) {
|
|||
|
||||
if (feature.layer.id === '关联站点') {
|
||||
const record = feature.properties
|
||||
// debugger
|
||||
if (record.cd_nm == 'GN1') {
|
||||
dispatch?.runtime.setInfoDlg({ layerId: 'BxjcLayer', properties: record })
|
||||
}else if (record.cd_nm == 'UPD1') {
|
||||
|
|
@ -149,7 +150,8 @@ export default function MapCtrl({ initParams, onLoad }) {
|
|||
dispatch?.runtime.setInfoDlg({ layerId: 'RealSkLayer', properties: record })
|
||||
} else if (record.type == 'sw') {
|
||||
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] });
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ export default function Demo1() {
|
|||
const wg = useSelector(s => s.runtime.shkshObj)
|
||||
const showGw = useSelector(s => s.runtime.showGw)
|
||||
const yuananType = useSelector(s => s.runtime.yuananType);
|
||||
const xiayou = useSelector(s => s.runtime.xiayouxh);
|
||||
console.log('wg', wg);
|
||||
|
||||
|
||||
|
|
@ -46,6 +47,9 @@ 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 }} />
|
||||
// </>
|
||||
}
|
||||
{
|
||||
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%' }} />
|
||||
|
|
|
|||
|
|
@ -50,13 +50,13 @@ function WF() {
|
|||
|
||||
const genWeatherContour24H = () => {
|
||||
dispatch.runtime.setYyfa({})
|
||||
|
||||
dispatch.runtime.setXiayouxh(false)
|
||||
dispatch.shyjview.showWeather24h();
|
||||
}
|
||||
|
||||
const genWeatherContourRadar = () => {
|
||||
dispatch.runtime.setYyfa({})
|
||||
|
||||
dispatch.runtime.setXiayouxh(false)
|
||||
dispatch.shyjview.showWeatherRadar();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ function HDReal({ style }) {
|
|||
color="green"
|
||||
extra={
|
||||
<div>
|
||||
2025-05-26~2025-06-02
|
||||
{moment().subtract(6,'day').format('YYYY-MM-DD')}~{moment().format('YYYY-MM-DD')}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ function HDReal({ style }) {
|
|||
color="green"
|
||||
extra={
|
||||
<div>
|
||||
2025-05-26~2025-06-02
|
||||
{moment().subtract(6,'day').format('YYYY-MM-DD')}~{moment().format('YYYY-MM-DD')}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,87 @@
|
|||
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;
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
.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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
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,15 +1,20 @@
|
|||
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 config from '../../../../config';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import AreaDrpChart from './chart';
|
||||
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 }) {
|
||||
const [tab,setTab] = useState('生态')
|
||||
const [tab, setTab] = useState('生态')
|
||||
const [dimension, setDimension] = useState('ft');
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const data = [
|
||||
{
|
||||
|
|
@ -44,202 +49,466 @@ function DrpReal({ style }) {
|
|||
"rzWarning": 0,
|
||||
"rzState": 1,
|
||||
"aRz": -4.18
|
||||
},{
|
||||
"stcd": "61612610",
|
||||
"type": "sk",
|
||||
"hasRz": true,
|
||||
"stnm": "三河口水库",
|
||||
"adcd": "421181109000",
|
||||
"wscd": null,
|
||||
"importancy": 0,
|
||||
"lgtd": 115.166667,
|
||||
"lttd": 31.333333,
|
||||
"elev": 0,
|
||||
"damel": 156.8,
|
||||
"dsflz": 154.99,
|
||||
"fsltdz": 149,
|
||||
"ddz": 124,
|
||||
"zcxsw": 149,
|
||||
"drpTm": "2025-06-03T02:00:00.000Z",
|
||||
"today": 0,
|
||||
"h1": 0,
|
||||
"h3": 0,
|
||||
"h6": 0,
|
||||
"h12": 0,
|
||||
"h24": 0,
|
||||
"h48": 12.5,
|
||||
"drpState": 1,
|
||||
"rz": 141.45,
|
||||
"w": 77.8,
|
||||
"a_fsltdz": -7.550000000000011,
|
||||
"rzTm": "2025-06-03T01:00:00.000Z",
|
||||
"rzWarning": 0,
|
||||
"rzState": 1,
|
||||
"aRz": -7.55
|
||||
},{
|
||||
"stcd": "61613010",
|
||||
"type": "sk",
|
||||
"hasRz": true,
|
||||
"stnm": "明山水库",
|
||||
"adcd": "421181103000",
|
||||
"wscd": null,
|
||||
"importancy": 0,
|
||||
"lgtd": 115.066667,
|
||||
"lttd": 31.016667,
|
||||
"elev": 0,
|
||||
"damel": 98.7,
|
||||
"dsflz": 96.07,
|
||||
"fsltdz": 93,
|
||||
"ddz": 78.02,
|
||||
"zcxsw": 93,
|
||||
"drpTm": "2025-06-03T02:00:00.000Z",
|
||||
"today": 0,
|
||||
"h1": 0,
|
||||
"h3": 0,
|
||||
"h6": 0,
|
||||
"h12": 0,
|
||||
"h24": 0,
|
||||
"h48": 12.5,
|
||||
"drpState": 1,
|
||||
"rz": 84.43,
|
||||
"w": 49.5,
|
||||
"a_fsltdz": -8.569999999999993,
|
||||
"rzTm": "2025-06-03T02:00:00.000Z",
|
||||
"rzWarning": 0,
|
||||
"rzState": 1,
|
||||
"aRz": -8.57
|
||||
},{
|
||||
"stcd": "716113901",
|
||||
"type": "sk",
|
||||
"hasRz": true,
|
||||
"stnm": "铺头坳水库",
|
||||
"adcd": "421181201000",
|
||||
"wscd": null,
|
||||
"importancy": 0,
|
||||
"lgtd": 115.169444,
|
||||
"lttd": 31.090278,
|
||||
"elev": 0,
|
||||
"damel": 266.7,
|
||||
"dsflz": 265.54,
|
||||
"fsltdz": 264.3,
|
||||
"ddz": 256,
|
||||
"zcxsw": 264.3,
|
||||
"drpTm": "2025-04-11T05:00:00.000Z",
|
||||
"today": 0,
|
||||
"h1": 0,
|
||||
"h3": 0,
|
||||
"h6": 0,
|
||||
"h12": 0,
|
||||
"h24": 0,
|
||||
"h48": 0,
|
||||
"drpState": 2,
|
||||
"rz": 263.16,
|
||||
"w": 0.991,
|
||||
"a_fsltdz": -1.1399999999999864,
|
||||
"rzTm": "2025-04-11T05:00:00.000Z",
|
||||
"rzWarning": 0,
|
||||
"rzState": 2,
|
||||
"pic": [
|
||||
}, {
|
||||
"stcd": "61612610",
|
||||
"type": "sk",
|
||||
"hasRz": true,
|
||||
"stnm": "三河口水库",
|
||||
"adcd": "421181109000",
|
||||
"wscd": null,
|
||||
"importancy": 0,
|
||||
"lgtd": 115.166667,
|
||||
"lttd": 31.333333,
|
||||
"elev": 0,
|
||||
"damel": 156.8,
|
||||
"dsflz": 154.99,
|
||||
"fsltdz": 149,
|
||||
"ddz": 124,
|
||||
"zcxsw": 149,
|
||||
"drpTm": "2025-06-03T02:00:00.000Z",
|
||||
"today": 0,
|
||||
"h1": 0,
|
||||
"h3": 0,
|
||||
"h6": 0,
|
||||
"h12": 0,
|
||||
"h24": 0,
|
||||
"h48": 12.5,
|
||||
"drpState": 1,
|
||||
"rz": 141.45,
|
||||
"w": 77.8,
|
||||
"a_fsltdz": -7.550000000000011,
|
||||
"rzTm": "2025-06-03T01:00:00.000Z",
|
||||
"rzWarning": 0,
|
||||
"rzState": 1,
|
||||
"aRz": -7.55
|
||||
}, {
|
||||
"stcd": "61613010",
|
||||
"type": "sk",
|
||||
"hasRz": true,
|
||||
"stnm": "明山水库",
|
||||
"adcd": "421181103000",
|
||||
"wscd": null,
|
||||
"importancy": 0,
|
||||
"lgtd": 115.066667,
|
||||
"lttd": 31.016667,
|
||||
"elev": 0,
|
||||
"damel": 98.7,
|
||||
"dsflz": 96.07,
|
||||
"fsltdz": 93,
|
||||
"ddz": 78.02,
|
||||
"zcxsw": 93,
|
||||
"drpTm": "2025-06-03T02:00:00.000Z",
|
||||
"today": 0,
|
||||
"h1": 0,
|
||||
"h3": 0,
|
||||
"h6": 0,
|
||||
"h12": 0,
|
||||
"h24": 0,
|
||||
"h48": 12.5,
|
||||
"drpState": 1,
|
||||
"rz": 84.43,
|
||||
"w": 49.5,
|
||||
"a_fsltdz": -8.569999999999993,
|
||||
"rzTm": "2025-06-03T02:00:00.000Z",
|
||||
"rzWarning": 0,
|
||||
"rzState": 1,
|
||||
"aRz": -8.57
|
||||
}, {
|
||||
"stcd": "716113901",
|
||||
"type": "sk",
|
||||
"hasRz": true,
|
||||
"stnm": "铺头坳水库",
|
||||
"adcd": "421181201000",
|
||||
"wscd": null,
|
||||
"importancy": 0,
|
||||
"lgtd": 115.169444,
|
||||
"lttd": 31.090278,
|
||||
"elev": 0,
|
||||
"damel": 266.7,
|
||||
"dsflz": 265.54,
|
||||
"fsltdz": 264.3,
|
||||
"ddz": 256,
|
||||
"zcxsw": 264.3,
|
||||
"drpTm": "2025-04-11T05:00:00.000Z",
|
||||
"today": 0,
|
||||
"h1": 0,
|
||||
"h3": 0,
|
||||
"h6": 0,
|
||||
"h12": 0,
|
||||
"h24": 0,
|
||||
"h48": 0,
|
||||
"drpState": 2,
|
||||
"rz": 263.16,
|
||||
"w": 0.991,
|
||||
"a_fsltdz": -1.1399999999999864,
|
||||
"rzTm": "2025-04-11T05:00:00.000Z",
|
||||
"rzWarning": 0,
|
||||
"rzState": 2,
|
||||
"pic": [
|
||||
{
|
||||
"stcd": "716113901",
|
||||
"tm": "2023-03-12T08:02:00.000Z",
|
||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716113901/20230312160200.jpg"
|
||||
"stcd": "716113901",
|
||||
"tm": "2023-03-12T08:02:00.000Z",
|
||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716113901/20230312160200.jpg"
|
||||
},
|
||||
{
|
||||
"stcd": "716113901",
|
||||
"tm": "2023-03-12T07:15:00.000Z",
|
||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716113902/20230312151500.jpg"
|
||||
"stcd": "716113901",
|
||||
"tm": "2023-03-12T07:15:00.000Z",
|
||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716113902/20230312151500.jpg"
|
||||
}
|
||||
],
|
||||
"aRz": -1.14
|
||||
},{
|
||||
"stcd": "716111701",
|
||||
"type": "sk",
|
||||
"hasRz": true,
|
||||
"stnm": "桐枧冲水库",
|
||||
"adcd": "421181110000",
|
||||
"wscd": null,
|
||||
"importancy": 0,
|
||||
"lgtd": 115.135278,
|
||||
"lttd": 31.3925,
|
||||
"elev": 0,
|
||||
"damel": 276.56,
|
||||
"dsflz": 273.66,
|
||||
"fsltdz": 269.86,
|
||||
"ddz": 256.76,
|
||||
"zcxsw": 269.86,
|
||||
"drpTm": "2025-04-11T05:00:00.000Z",
|
||||
"today": 0,
|
||||
"h1": 0,
|
||||
"h3": 0,
|
||||
"h6": 0,
|
||||
"h12": 0,
|
||||
"h24": 0,
|
||||
"h48": 0,
|
||||
"drpState": 2,
|
||||
"rz": 265.12,
|
||||
"w": 0.689,
|
||||
"a_fsltdz": -4.740000000000009,
|
||||
"rzTm": "2025-04-11T05:00:00.000Z",
|
||||
"rzWarning": 0,
|
||||
"rzState": 2,
|
||||
"pic": [
|
||||
],
|
||||
"aRz": -1.14
|
||||
}, {
|
||||
"stcd": "716111701",
|
||||
"type": "sk",
|
||||
"hasRz": true,
|
||||
"stnm": "桐枧冲水库",
|
||||
"adcd": "421181110000",
|
||||
"wscd": null,
|
||||
"importancy": 0,
|
||||
"lgtd": 115.135278,
|
||||
"lttd": 31.3925,
|
||||
"elev": 0,
|
||||
"damel": 276.56,
|
||||
"dsflz": 273.66,
|
||||
"fsltdz": 269.86,
|
||||
"ddz": 256.76,
|
||||
"zcxsw": 269.86,
|
||||
"drpTm": "2025-04-11T05:00:00.000Z",
|
||||
"today": 0,
|
||||
"h1": 0,
|
||||
"h3": 0,
|
||||
"h6": 0,
|
||||
"h12": 0,
|
||||
"h24": 0,
|
||||
"h48": 0,
|
||||
"drpState": 2,
|
||||
"rz": 265.12,
|
||||
"w": 0.689,
|
||||
"a_fsltdz": -4.740000000000009,
|
||||
"rzTm": "2025-04-11T05:00:00.000Z",
|
||||
"rzWarning": 0,
|
||||
"rzState": 2,
|
||||
"pic": [
|
||||
{
|
||||
"stcd": "716111701",
|
||||
"tm": "2023-03-12T07:03:00.000Z",
|
||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716111701/20230312150300.jpg"
|
||||
"stcd": "716111701",
|
||||
"tm": "2023-03-12T07:03:00.000Z",
|
||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716111701/20230312150300.jpg"
|
||||
},
|
||||
{
|
||||
"stcd": "716111701",
|
||||
"tm": "2023-03-12T07:27:00.000Z",
|
||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716111702/20230312152700.jpg"
|
||||
"stcd": "716111701",
|
||||
"tm": "2023-03-12T07:27:00.000Z",
|
||||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716111702/20230312152700.jpg"
|
||||
}
|
||||
],
|
||||
"aRz": -4.74
|
||||
},
|
||||
],
|
||||
"aRz": -4.74
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<PanelBox
|
||||
const markedDates = {
|
||||
'2025-06-01': [{ color: '#e74c3c' }], // 红色标记
|
||||
'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}
|
||||
title="水资源利用"
|
||||
color="green"
|
||||
extra={
|
||||
<>
|
||||
<span className="button-group">
|
||||
<span className={clsx({ active: tab==='生态' })} onClick={() => {
|
||||
// dispatch.map.setLayerVisible({'BxjcLayer':true});
|
||||
// dispatch.map.setLayerVisible({'SyjcLayer':false});
|
||||
// dispatch.map.setLayerVisible({'SljcLayer':false});
|
||||
// dispatch.map.setLayerVisible({'ByjcLayer':false});
|
||||
setTab('生态')
|
||||
}}>生态</span>
|
||||
<span className={clsx({ active: tab==='灌溉发电' })} onClick={() => {
|
||||
// dispatch.map.setLayerVisible({'BxjcLayer':false});
|
||||
// dispatch.map.setLayerVisible({'SyjcLayer':true});
|
||||
// dispatch.map.setLayerVisible({'SljcLayer':false});
|
||||
// dispatch.map.setLayerVisible({'ByjcLayer':false});
|
||||
setTab('灌溉发电')
|
||||
}}>灌溉发电</span>
|
||||
{/* <span className={clsx({ active: tab==='发电' })} onClick={() => {
|
||||
// dispatch.map.setLayerVisible({'BxjcLayer':false});
|
||||
// dispatch.map.setLayerVisible({'SyjcLayer':false});
|
||||
// dispatch.map.setLayerVisible({'SljcLayer':true});
|
||||
// dispatch.map.setLayerVisible({'ByjcLayer':false});
|
||||
setTab('发电')
|
||||
}}>发电</span> */}
|
||||
<span className={clsx({ active: tab==='泄洪' })} onClick={() => {
|
||||
// dispatch.map.setLayerVisible({'BxjcLayer':false});
|
||||
// dispatch.map.setLayerVisible({'SyjcLayer':false});
|
||||
// dispatch.map.setLayerVisible({'SljcLayer':false});
|
||||
// dispatch.map.setLayerVisible({'ByjcLayer':true});
|
||||
setTab('泄洪')
|
||||
}}>泄洪</span>
|
||||
</span>
|
||||
</>
|
||||
}
|
||||
// extra={
|
||||
// <>
|
||||
// <span className="button-group">
|
||||
// <span className={clsx({ active: tab === '生态' })} onClick={() => {
|
||||
// // dispatch.map.setLayerVisible({'BxjcLayer':true});
|
||||
// // dispatch.map.setLayerVisible({'SyjcLayer':false});
|
||||
// // dispatch.map.setLayerVisible({'SljcLayer':false});
|
||||
// // dispatch.map.setLayerVisible({'ByjcLayer':false});
|
||||
// setTab('生态')
|
||||
// }}>生态</span>
|
||||
// <span className={clsx({ active: tab === '灌溉发电' })} onClick={() => {
|
||||
// // dispatch.map.setLayerVisible({'BxjcLayer':false});
|
||||
// // dispatch.map.setLayerVisible({'SyjcLayer':true});
|
||||
// // dispatch.map.setLayerVisible({'SljcLayer':false});
|
||||
// // dispatch.map.setLayerVisible({'ByjcLayer':false});
|
||||
// setTab('灌溉发电')
|
||||
// }}>灌溉发电</span>
|
||||
// {/* <span className={clsx({ active: tab==='发电' })} onClick={() => {
|
||||
// // dispatch.map.setLayerVisible({'BxjcLayer':false});
|
||||
// // dispatch.map.setLayerVisible({'SyjcLayer':false});
|
||||
// // dispatch.map.setLayerVisible({'SljcLayer':true});
|
||||
// // dispatch.map.setLayerVisible({'ByjcLayer':false});
|
||||
// setTab('发电')
|
||||
// }}>发电</span> */}
|
||||
// <span className={clsx({ active: tab === '泄洪' })} onClick={() => {
|
||||
// // dispatch.map.setLayerVisible({'BxjcLayer':false});
|
||||
// // dispatch.map.setLayerVisible({'SyjcLayer':false});
|
||||
// // dispatch.map.setLayerVisible({'SljcLayer':false});
|
||||
// // dispatch.map.setLayerVisible({'ByjcLayer':true});
|
||||
// setTab('泄洪')
|
||||
// }}>泄洪</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==='生态'?
|
||||
<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"}}>
|
||||
|
|
@ -313,9 +582,9 @@ function DrpReal({ style }) {
|
|||
}
|
||||
<div style={{width:'100%',height:'12rem'}}>
|
||||
<AreaDrpChart data={[]} tab={tab} />
|
||||
</div>
|
||||
</div> */}
|
||||
</PanelBox>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default DrpReal;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,57 @@
|
|||
.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 (
|
||||
<PanelBox
|
||||
style={style}
|
||||
title="水库预报"
|
||||
title="24h入库洪水预报"
|
||||
color="green"
|
||||
// extra={
|
||||
// <>
|
||||
|
|
|
|||
|
|
@ -49,7 +49,8 @@ function WF() {
|
|||
}, [contourSetting]);
|
||||
|
||||
const genWeatherContour24H = () => {
|
||||
dispatch.runtime.setYyfa({yy:''})
|
||||
dispatch.runtime.setYyfa({ yy: '' })
|
||||
dispatch.runtime.setXiayouxh(false)
|
||||
dispatch.shyjview.showWeather24h();
|
||||
const map = window.__mapref
|
||||
if (map) {
|
||||
|
|
@ -58,7 +59,8 @@ function WF() {
|
|||
}
|
||||
|
||||
const genWeatherContourRadar = () => {
|
||||
dispatch.runtime.setYyfa({yy:''})
|
||||
dispatch.runtime.setYyfa({ yy: '' })
|
||||
dispatch.runtime.setXiayouxh(false)
|
||||
dispatch.shyjview.showWeatherRadar();
|
||||
const map = window.__mapref
|
||||
map.setLayoutProperty('热力图', 'visibility', 'none');
|
||||
|
|
|
|||
|
|
@ -0,0 +1,131 @@
|
|||
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: '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: {
|
||||
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"}}>调度方案-{data.date}</span>
|
||||
{/* <Box component="span" className={classes.editIcon}>
|
||||
✎
|
||||
</Box> */}
|
||||
</Typography>
|
||||
<div className={classes.content}>
|
||||
<Typography component="p" style={{fontSize:14}}>
|
||||
初始水位为{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();
|
||||
|
||||
useEffect(() => {
|
||||
const redList = Array.from(new Set(compareList.map(item => item.id)))
|
||||
dispatch.runtime.setDuibifx(redList)
|
||||
}, [compareList])
|
||||
|
||||
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,14 +14,54 @@ import Hdyj from './Hdyj';
|
|||
import Shqx from './Shqx';
|
||||
import ShYj from './ShYj';
|
||||
import { styled } from '@material-ui/styles';
|
||||
|
||||
import { RadioGroup, Radio, Switch, FormControlLabel, InputLabel, Select, MenuItem, FormControl } from '@material-ui/core/index';
|
||||
import { backgroundColor } from 'echarts/lib/theme/dark';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import { RadioGroup, Radio, Switch, Box, FormControlLabel, InputLabel, Select, MenuItem, FormControl } from '@material-ui/core/index';
|
||||
import { Description } from '@material-ui/icons';
|
||||
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 }) {
|
||||
const dispatch = useDispatch();
|
||||
const classes = useStyles();
|
||||
|
||||
const res = useSelector(s => s.runtime.yyObj)
|
||||
const [value, setValue] = React.useState(res.yy ?? '');
|
||||
const [yyValue, setYyValue] = React.useState(false);
|
||||
|
|
@ -66,11 +106,15 @@ export default function Warn({ style }) {
|
|||
});
|
||||
const [dimension, setDimension] = useState('fqh');
|
||||
const [checked, setChecked] = React.useState(false);
|
||||
const xiayou = useSelector(s => s.runtime.xiayouxh);
|
||||
|
||||
const fayy = () => {
|
||||
setYyValue(true)
|
||||
if (value) {
|
||||
dispatch.runtime.setYyfa({ yy: value })
|
||||
}
|
||||
dispatch.runtime.setYyfa({ yy: true })
|
||||
dispatch.runtime.setXiayouxh(true)
|
||||
|
||||
// if (value) {
|
||||
// }
|
||||
}
|
||||
|
||||
// useEffect(() => {
|
||||
|
|
@ -105,35 +149,67 @@ export default function Warn({ style }) {
|
|||
}
|
||||
// dispatch.runtime.setYyfa({})
|
||||
};
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
dispatch.runtime.setDuibifx(selectedSchemes)
|
||||
dispatch.runtime.setDuibifx(selectedSchemes)
|
||||
}, [selectedSchemes])
|
||||
|
||||
|
||||
const productFa = () => {
|
||||
dispatch?.runtime.setInfoDlg({ layerId: 'YuananLayer', properties: {} })
|
||||
dispatch.runtime.setYyfa({})
|
||||
|
||||
dispatch.runtime.setXiayouxh(false)
|
||||
}
|
||||
const changeYY = (e) => {
|
||||
setValue(e.target.value)
|
||||
|
||||
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 (
|
||||
<PanelBox
|
||||
style={{ ...style, position: 'relative' }}
|
||||
title="水库预演"
|
||||
title="调度方案"
|
||||
color="green"
|
||||
tabs={
|
||||
<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={fayy}>加载方案</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> */}
|
||||
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div >
|
||||
<FormControl fullWidth>
|
||||
{/* <FormControl fullWidth>
|
||||
<RadioGroup
|
||||
value={value}
|
||||
onChange={changeYY}
|
||||
|
|
@ -153,7 +229,8 @@ export default function Warn({ style }) {
|
|||
))
|
||||
}
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</FormControl> */}
|
||||
<ScheduleList setfayy={fayy} />
|
||||
{res.yy &&
|
||||
<div style={{ color: "#fff", position: 'absolute', top: 130, left: '-380px' }}>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/yyzl.png`} alt="" style={{ width: 370 }} />
|
||||
|
|
@ -169,10 +246,19 @@ export default function Warn({ style }) {
|
|||
<img src={`${process.env.PUBLIC_URL}/assets/sl.jpg`} alt="" style={{ width: 421}} />
|
||||
</div> */}
|
||||
</div>}
|
||||
|
||||
|
||||
<div style={{ color: "#fff", position: 'absolute', top: 83, right: 600 }}>
|
||||
<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>
|
||||
</PanelBox>
|
||||
)
|
||||
|
|
|
|||
Loading…
Reference in New Issue