完成管道冲洗功能页面；调整水质模拟默认pattern；调整sidebar菜单名；
This commit is contained in:
JIANG
@@ -0,0 +1,451 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import {
|
||||
Box,
|
||||
TextField,
|
||||
Button,
|
||||
Typography,
|
||||
IconButton,
|
||||
Stack,
|
||||
Alert,
|
||||
Divider,
|
||||
} from "@mui/material";
|
||||
import { Close as CloseIcon } from "@mui/icons-material";
|
||||
import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
|
||||
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
|
||||
import { zhCN as pickerZhCN } from "@mui/x-date-pickers/locales";
|
||||
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
|
||||
import "dayjs/locale/zh-cn";
|
||||
import dayjs, { Dayjs } from "dayjs";
|
||||
import { useMap } from "@app/OlMap/MapComponent";
|
||||
import VectorLayer from "ol/layer/Vector";
|
||||
import VectorSource from "ol/source/Vector";
|
||||
import { Style, Stroke, Fill, Circle as CircleStyle } from "ol/style";
|
||||
import { handleMapClickSelectFeatures as mapClickSelectFeatures } from "@/utils/mapQueryService";
|
||||
import Feature, { FeatureLike } from "ol/Feature";
|
||||
import { useNotification } from "@refinedev/core";
|
||||
import axios from "axios";
|
||||
import { config, NETWORK_NAME } from "@/config/config";
|
||||
|
||||
interface ValveItem {
|
||||
id: string;
|
||||
k: number;
|
||||
feature?: any;
|
||||
}
|
||||
|
||||
const AnalysisParameters: React.FC = () => {
|
||||
const map = useMap();
|
||||
const { open } = useNotification();
|
||||
|
||||
// State
|
||||
const [schemeName, setSchemeName] = useState<string>(
|
||||
"Flushing_" + new Date().getTime(),
|
||||
);
|
||||
const [valves, setValves] = useState<ValveItem[]>([]);
|
||||
const [drainageNode, setDrainageNode] = useState<string | null>(null);
|
||||
const [drainageFeature, setDrainageFeature] = useState<Feature | null>(null);
|
||||
|
||||
const [startTime, setStartTime] = useState<Dayjs | null>(dayjs(new Date()));
|
||||
const [flushFlow, setFlushFlow] = useState<number>(0);
|
||||
const [duration, setDuration] = useState<number>(3600);
|
||||
|
||||
const [selectionMode, setSelectionMode] = useState<'none' | 'valve' | 'drainage'>('none');
|
||||
const [analyzing, setAnalyzing] = useState<boolean>(false);
|
||||
|
||||
const [highlightLayer, setHighlightLayer] = useState<VectorLayer<VectorSource> | null>(null);
|
||||
|
||||
// Initialize highlight layer
|
||||
useEffect(() => {
|
||||
if (!map) return;
|
||||
|
||||
const highlightStyle = function (feature: FeatureLike) {
|
||||
const styles = [];
|
||||
const type = feature.get("type"); // We will set this property when adding to source
|
||||
|
||||
if (type === "valve") {
|
||||
styles.push(
|
||||
new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 8,
|
||||
fill: new Fill({ color: "rgba(255, 165, 0, 0.8)" }), // Orange for valves
|
||||
stroke: new Stroke({ color: "white", width: 2 }),
|
||||
}),
|
||||
})
|
||||
);
|
||||
} else if (type === "drainage") {
|
||||
styles.push(
|
||||
new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 8,
|
||||
fill: new Fill({ color: "rgba(0, 0, 255, 0.8)" }), // Blue for drainage
|
||||
stroke: new Stroke({ color: "white", width: 2 }),
|
||||
}),
|
||||
})
|
||||
);
|
||||
}
|
||||
return styles;
|
||||
};
|
||||
|
||||
const layer = new VectorLayer({
|
||||
source: new VectorSource(),
|
||||
style: highlightStyle,
|
||||
zIndex: 1000,
|
||||
properties: {
|
||||
name: "FlushingHighlight",
|
||||
},
|
||||
});
|
||||
|
||||
map.addLayer(layer);
|
||||
setHighlightLayer(layer);
|
||||
|
||||
return () => {
|
||||
map.removeLayer(layer);
|
||||
map.un("click", handleMapClickSelectFeatures);
|
||||
};
|
||||
}, [map]);
|
||||
|
||||
// Update highlight layer features
|
||||
useEffect(() => {
|
||||
if (!highlightLayer) return;
|
||||
const source = highlightLayer.getSource();
|
||||
if (!source) return;
|
||||
|
||||
source.clear();
|
||||
|
||||
// Add valves
|
||||
valves.forEach((v) => {
|
||||
if (v.feature) {
|
||||
const f = v.feature.clone(); // Clone to avoid modifying original
|
||||
f.set("type", "valve");
|
||||
// Ensure geometry is present (it should be for features from map)
|
||||
if (f.getGeometry()) {
|
||||
source.addFeature(f);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Add drainage node
|
||||
if (drainageFeature) {
|
||||
const f = drainageFeature.clone();
|
||||
f.set("type", "drainage");
|
||||
source.addFeature(f);
|
||||
}
|
||||
|
||||
}, [highlightLayer, valves, drainageFeature]);
|
||||
|
||||
// Map click handler
|
||||
const handleMapClickSelectFeatures = useCallback(
|
||||
async (event: { coordinate: number[] }) => {
|
||||
if (!map || selectionMode === 'none') return;
|
||||
|
||||
const feature = await mapClickSelectFeatures(event, map);
|
||||
if (!feature) return;
|
||||
|
||||
const layer = feature.getId()?.toString().split(".")[0];
|
||||
const featureId = feature.getProperties().id;
|
||||
|
||||
if (selectionMode === 'valve') {
|
||||
if (layer !== 'geo_valves') {
|
||||
open?.({
|
||||
type: "error",
|
||||
message: "请选择阀门要素",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setValves((prev) => {
|
||||
if (prev.some((v) => v.id === featureId)) {
|
||||
open?.({
|
||||
type: "error",
|
||||
message: "该阀门已添加",
|
||||
});
|
||||
return prev;
|
||||
}
|
||||
return [...prev, { id: featureId, k: 1.0, feature }]; // Default k=1.0? User can change.
|
||||
});
|
||||
|
||||
} else if (selectionMode === 'drainage') {
|
||||
if (layer !== 'geo_junctions') {
|
||||
open?.({
|
||||
type: "error",
|
||||
message: "请选择节点要素作为排水点",
|
||||
});
|
||||
return;
|
||||
}
|
||||
setDrainageNode(featureId);
|
||||
setDrainageFeature(feature);
|
||||
setSelectionMode('none'); // Auto exit selection after picking one
|
||||
map.un("click", handleMapClickSelectFeatures);
|
||||
}
|
||||
},
|
||||
[map, selectionMode, open]
|
||||
);
|
||||
|
||||
// Bind click event based on selection mode
|
||||
useEffect(() => {
|
||||
if (!map || selectionMode === "none") return;
|
||||
|
||||
map.on("click", handleMapClickSelectFeatures);
|
||||
|
||||
return () => {
|
||||
map.un("click", handleMapClickSelectFeatures);
|
||||
};
|
||||
}, [map, selectionMode, handleMapClickSelectFeatures]);
|
||||
|
||||
// Toggle selection
|
||||
const toggleSelection = (mode: 'valve' | 'drainage') => {
|
||||
// If clicking same mode, turn off
|
||||
if (selectionMode === mode) {
|
||||
setSelectionMode('none');
|
||||
} else {
|
||||
setSelectionMode(mode);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveValve = (id: string) => {
|
||||
setValves((prev) => prev.filter((v) => v.id !== id));
|
||||
};
|
||||
|
||||
const handleValveKChange = (id: string, k: string) => {
|
||||
const numK = parseFloat(k);
|
||||
setValves(prev => prev.map(v => v.id === id ? { ...v, k: isNaN(numK) ? 0 : numK } : v));
|
||||
};
|
||||
|
||||
const handleAnalyze = async () => {
|
||||
if (!startTime || !drainageNode || !schemeName.trim()) {
|
||||
open?.({
|
||||
type: "error",
|
||||
message: "请填写完整参数",
|
||||
description: "方案名称、开始时间和排水点为必填项",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setAnalyzing(true);
|
||||
|
||||
try {
|
||||
const formattedTime = startTime.format("YYYY-MM-DDTHH:mm:00");
|
||||
|
||||
const params = {
|
||||
scheme_name: schemeName,
|
||||
network: NETWORK_NAME,
|
||||
start_time: formattedTime,
|
||||
valves: valves.map(v => v.id),
|
||||
valves_k: valves.map(v => v.k),
|
||||
drainage_node_ID: drainageNode,
|
||||
flush_flow: flushFlow,
|
||||
duration: duration
|
||||
};
|
||||
|
||||
// Use params serializer to handle array params correctly if needed,
|
||||
// but axios usually handles array as valves[]=1&valves[]=2
|
||||
// FastAPI default expects repeated query params.
|
||||
|
||||
const response = await axios.get(`${config.BACKEND_URL}/flushing_analysis/`, {
|
||||
params,
|
||||
// Ensure arrays are sent as repeated keys: valves=1&valves=2
|
||||
paramsSerializer: {
|
||||
indexes: null // Result: valves=1&valves=2
|
||||
}
|
||||
});
|
||||
if (response.status !== 200) {
|
||||
throw new Error(`分析请求失败，状态码: ${response.status}`);
|
||||
}
|
||||
open?.({
|
||||
type: "success",
|
||||
message: "方案分析成功",
|
||||
description: "管道冲洗模拟完成，请在方案查询中查看结果。",
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("提交分析失败", error);
|
||||
open?.({
|
||||
type: "error",
|
||||
message: "提交分析失败",
|
||||
description: error instanceof Error ? error.message : "未知错误",
|
||||
});
|
||||
} finally {
|
||||
setAnalyzing(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box className="flex flex-col h-full gap-4 pb-4">
|
||||
{/* 1. Valve Selection */}
|
||||
<Box>
|
||||
<Box className="flex items-center justify-between mb-2">
|
||||
<Typography variant="subtitle2" className="font-medium">
|
||||
参与阀门
|
||||
</Typography>
|
||||
<Button
|
||||
variant={selectionMode === 'valve' ? "contained" : "outlined"}
|
||||
color={selectionMode === 'valve' ? "error" : "primary"}
|
||||
size="small"
|
||||
onClick={() => toggleSelection('valve')}
|
||||
>
|
||||
{selectionMode === 'valve' ? "停止选择" : "选择阀门"}
|
||||
</Button>
|
||||
</Box>
|
||||
{selectionMode === 'valve' && (
|
||||
<Box className="mb-2 p-2 bg-blue-50 text-xs text-blue-700 rounded">
|
||||
点击地图上的阀门进行添加
|
||||
</Box>
|
||||
)}
|
||||
<Stack spacing={1} className="max-h-50 h-48 overflow-auto">
|
||||
{valves.map((valve) => (
|
||||
<Box key={valve.id} className="flex items-center gap-2 p-2 bg-gray-50 rounded">
|
||||
<Typography className="text-sm flex-1 pl-1">{valve.id}</Typography>
|
||||
<TextField
|
||||
label="开度"
|
||||
size="small"
|
||||
type="number"
|
||||
value={valve.k}
|
||||
onChange={(e) => handleValveKChange(valve.id, e.target.value)}
|
||||
className="w-20"
|
||||
slotProps={{ htmlInput: { step: 0.1, min: 0, max: 1 } }}
|
||||
/>
|
||||
<IconButton size="small" onClick={() => handleRemoveValve(valve.id)}>
|
||||
<CloseIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
))}
|
||||
{valves.length === 0 && (
|
||||
<Typography variant="caption" className="text-gray-400 text-center py-20">
|
||||
暂无选中阀门
|
||||
</Typography>
|
||||
)}
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* 2. Drainage Node Selection */}
|
||||
<Box>
|
||||
<Box className="flex items-center justify-between mb-2">
|
||||
<Typography variant="subtitle2" className="font-medium">
|
||||
排水节点
|
||||
</Typography>
|
||||
<Button
|
||||
variant={selectionMode === 'drainage' ? "contained" : "outlined"}
|
||||
color={selectionMode === 'drainage' ? "error" : "primary"}
|
||||
size="small"
|
||||
onClick={() => toggleSelection('drainage')}
|
||||
>
|
||||
{selectionMode === 'drainage' ? "停止选择" : "选择节点"}
|
||||
</Button>
|
||||
</Box>
|
||||
{selectionMode === 'drainage' && (
|
||||
<Box className="mb-2 p-2 bg-blue-50 text-xs text-blue-700 rounded">
|
||||
点击地图上的节点作为排水点
|
||||
</Box>
|
||||
)}
|
||||
<Stack spacing={1} className="h-12 overflow-auto">
|
||||
{drainageNode && (
|
||||
<Box className="flex items-center gap-2 p-2 bg-gray-50 rounded">
|
||||
<Typography className="text-sm flex-1 pl-1">{drainageNode}</Typography>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => {
|
||||
setDrainageNode(null);
|
||||
setDrainageFeature(null);
|
||||
}}
|
||||
>
|
||||
<CloseIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
)}
|
||||
{!drainageNode && (
|
||||
<Typography variant="caption" className="text-gray-400 text-center py-2">
|
||||
暂无选中排水节点
|
||||
</Typography>
|
||||
)}
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* 3. Parameters */}
|
||||
<Box className="flex flex-col gap-3">
|
||||
<Box>
|
||||
<Typography variant="subtitle2" className="mb-1 font-medium">
|
||||
开始时间
|
||||
</Typography>
|
||||
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="zh-cn">
|
||||
<DateTimePicker
|
||||
value={startTime}
|
||||
onChange={(newValue) => setStartTime(newValue)}
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
slotProps={{ textField: { size: "small", fullWidth: true } }}
|
||||
localeText={
|
||||
pickerZhCN.components.MuiLocalizationProvider.defaultProps
|
||||
.localeText
|
||||
}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
</Box>
|
||||
|
||||
{/* Scheme Name */}
|
||||
<Box>
|
||||
<Typography variant="subtitle2" className="mb-1 font-medium">
|
||||
方案名称
|
||||
</Typography>
|
||||
<TextField
|
||||
fullWidth
|
||||
size="small"
|
||||
value={schemeName}
|
||||
onChange={(e) => setSchemeName(e.target.value)}
|
||||
placeholder="请输入方案名称"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box className="flex gap-2">
|
||||
<Box className="flex-1">
|
||||
<Typography variant="subtitle2" className="mb-1 font-medium">
|
||||
冲洗流量
|
||||
</Typography>
|
||||
<TextField
|
||||
fullWidth
|
||||
size="small"
|
||||
type="number"
|
||||
value={flushFlow}
|
||||
onChange={(e) => setFlushFlow(parseFloat(e.target.value) || 0)}
|
||||
/>
|
||||
</Box>
|
||||
<Box className="flex-1">
|
||||
<Typography variant="subtitle2" className="mb-1 font-medium">
|
||||
持续时长 (秒)
|
||||
</Typography>
|
||||
<TextField
|
||||
fullWidth
|
||||
size="small"
|
||||
type="number"
|
||||
value={duration}
|
||||
onChange={(e) => setDuration(parseInt(e.target.value) || 0)}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box className="mt-2">
|
||||
<Button
|
||||
fullWidth
|
||||
variant="contained"
|
||||
onClick={handleAnalyze}
|
||||
disabled={
|
||||
analyzing ||
|
||||
!schemeName.trim() ||
|
||||
!drainageNode ||
|
||||
!startTime ||
|
||||
!flushFlow ||
|
||||
!duration
|
||||
}
|
||||
className="bg-blue-600 hover:bg-blue-700"
|
||||
>
|
||||
{analyzing ? "分析中..." : "开始分析"}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default AnalysisParameters;
|
||||
Reference in New Issue
Block a user