529 lines
16 KiB
TypeScript
529 lines
16 KiB
TypeScript
"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 "@components/olmap/core/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,
|
|
queryFeaturesByIds,
|
|
} from "@/utils/mapQueryService";
|
|
import Feature, { FeatureLike } from "ol/Feature";
|
|
import { useNotification } from "@refinedev/core";
|
|
import { api } from "@/lib/api";
|
|
import { config, NETWORK_NAME } from "@/config/config";
|
|
import { useControllableObjectState } from "@components/olmap/core/useControllableState";
|
|
|
|
export interface ValveItem {
|
|
id: string;
|
|
k: number;
|
|
}
|
|
|
|
export interface FlushingAnalysisParametersState {
|
|
schemeName: string;
|
|
valves: ValveItem[];
|
|
drainageNode: string | null;
|
|
startTime: Dayjs | null;
|
|
flushFlow: number;
|
|
duration: number;
|
|
}
|
|
|
|
export const createFlushingAnalysisParametersState =
|
|
(): FlushingAnalysisParametersState => ({
|
|
schemeName: "Flushing_" + new Date().getTime(),
|
|
valves: [],
|
|
drainageNode: null,
|
|
startTime: dayjs(new Date()),
|
|
flushFlow: 200,
|
|
duration: 3600,
|
|
});
|
|
|
|
interface AnalysisParametersProps {
|
|
state?: FlushingAnalysisParametersState;
|
|
onStateChange?: (state: FlushingAnalysisParametersState) => void;
|
|
}
|
|
|
|
const AnalysisParameters: React.FC<AnalysisParametersProps> = ({
|
|
state,
|
|
onStateChange,
|
|
}) => {
|
|
const map = useMap();
|
|
const { open } = useNotification();
|
|
|
|
const [parametersState, setParametersState, setFormField] = useControllableObjectState(
|
|
state,
|
|
onStateChange,
|
|
createFlushingAnalysisParametersState(),
|
|
);
|
|
const { schemeName, valves, drainageNode, startTime, flushFlow, duration } =
|
|
parametersState;
|
|
const [valveFeatures, setValveFeatures] = useState<Feature[]>([]);
|
|
const [drainageFeature, setDrainageFeature] = useState<Feature | null>(null);
|
|
|
|
const [selectionMode, setSelectionMode] = useState<'none' | 'valve' | 'drainage'>('none');
|
|
const [analyzing, setAnalyzing] = useState<boolean>(false);
|
|
|
|
const [highlightLayer, setHighlightLayer] = useState<VectorLayer<VectorSource> | null>(null);
|
|
|
|
const setValves = useCallback(
|
|
(next: ValveItem[] | ((previous: ValveItem[]) => ValveItem[])) => {
|
|
setParametersState((previous) => ({
|
|
...previous,
|
|
valves: typeof next === "function" ? next(previous.valves) : next,
|
|
}));
|
|
},
|
|
[setParametersState],
|
|
);
|
|
|
|
const setDrainageNode = useCallback(
|
|
(value: string | null) => setFormField("drainageNode", value),
|
|
[setFormField],
|
|
);
|
|
|
|
// 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;
|
|
}
|
|
setValveFeatures((features) => [...features, feature]);
|
|
return [...prev, { id: featureId, k: 1.0 }];
|
|
});
|
|
|
|
} else if (selectionMode === 'drainage') {
|
|
if (layer !== 'geo_junctions') {
|
|
open?.({
|
|
type: "error",
|
|
message: "请选择节点要素作为排水点",
|
|
});
|
|
return;
|
|
}
|
|
setDrainageNode(featureId);
|
|
setDrainageFeature(feature);
|
|
setSelectionMode('none');
|
|
map.un("click", handleMapClickSelectFeatures);
|
|
}
|
|
},
|
|
[map, selectionMode, open, setDrainageNode, setValves]
|
|
);
|
|
|
|
// 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",
|
|
queryable: false,
|
|
},
|
|
});
|
|
|
|
map.addLayer(layer);
|
|
setHighlightLayer(layer);
|
|
|
|
return () => {
|
|
map.removeLayer(layer);
|
|
map.un("click", handleMapClickSelectFeatures);
|
|
};
|
|
}, [map, handleMapClickSelectFeatures]);
|
|
|
|
// Update highlight layer features
|
|
useEffect(() => {
|
|
if (!highlightLayer) return;
|
|
const source = highlightLayer.getSource();
|
|
if (!source) return;
|
|
|
|
source.clear();
|
|
|
|
// Add valves
|
|
valveFeatures.forEach((feature) => {
|
|
if (feature) {
|
|
const f = 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, valveFeatures, drainageFeature]);
|
|
|
|
useEffect(() => {
|
|
if (valves.length === 0) {
|
|
setValveFeatures([]);
|
|
return;
|
|
}
|
|
if (valveFeatures.length > 0) return;
|
|
queryFeaturesByIds(
|
|
valves.map((valve) => valve.id),
|
|
"geo_valves",
|
|
).then((features) => {
|
|
setValveFeatures(features);
|
|
});
|
|
}, [valveFeatures.length, valves]);
|
|
|
|
useEffect(() => {
|
|
if (!drainageNode) {
|
|
setDrainageFeature(null);
|
|
return;
|
|
}
|
|
if (drainageFeature) return;
|
|
queryFeaturesByIds([drainageNode], "geo_junctions").then((features) => {
|
|
setDrainageFeature(features[0] ?? null);
|
|
});
|
|
}, [drainageFeature, drainageNode]);
|
|
|
|
// 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));
|
|
setValveFeatures((prev) =>
|
|
prev.filter((feature) => feature.getProperties().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:00Z"); // ISO format with seconds set to 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 api.get(`${config.BACKEND_URL}/api/v1/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) => setFormField("startTime", 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) => setFormField("schemeName", e.target.value)}
|
|
placeholder="请输入方案名称"
|
|
/>
|
|
</Box>
|
|
|
|
<Box className="flex gap-2">
|
|
<Box className="flex-1">
|
|
<Typography variant="subtitle2" className="mb-1 font-medium">
|
|
冲洗流量 (CMH)
|
|
</Typography>
|
|
<TextField
|
|
fullWidth
|
|
size="small"
|
|
type="number"
|
|
value={flushFlow}
|
|
onChange={(e) =>
|
|
setFormField("flushFlow", 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) =>
|
|
setFormField("duration", parseInt(e.target.value) || 0)
|
|
}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box className="mt-auto pt-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;
|