fix(analysis): preserve tab panel state

src/components/olmap/FlushingAnalysis/AnalysisParameters.tsx

@@ -22,39 +22,82 @@ 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 } from "@/utils/mapQueryService";
+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";
 
-interface ValveItem {
+export interface ValveItem {
   id: string;
   k: number;
-  feature?: any;
 }
 
-const AnalysisParameters: React.FC = () => {
+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();
 
-  // State
-  const [schemeName, setSchemeName] = useState<string>(
-    "Flushing_" + new Date().getTime(),
+  const [parametersState, setParametersState, setFormField] = useControllableObjectState(
+    state,
+    onStateChange,
+    createFlushingAnalysisParametersState(),
   );
-  const [valves, setValves] = useState<ValveItem[]>([]);
-  const [drainageNode, setDrainageNode] = useState<string | null>(null);
+  const { schemeName, valves, drainageNode, startTime, flushFlow, duration } =
+    parametersState;
+  const [valveFeatures, setValveFeatures] = useState<Feature[]>([]);
   const [drainageFeature, setDrainageFeature] = useState<Feature | null>(null);
 
-  const [startTime, setStartTime] = useState<Dayjs | null>(dayjs(new Date()));
-  const [flushFlow, setFlushFlow] = useState<number>(200);
-  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);
 
+  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[] }) => {
@@ -83,7 +126,8 @@ const AnalysisParameters: React.FC = () => {
             });
             return prev;
           }
-          return [...prev, { id: featureId, k: 1.0, feature }];
+          setValveFeatures((features) => [...features, feature]);
+          return [...prev, { id: featureId, k: 1.0 }];
         });
 
       } else if (selectionMode === 'drainage') {
@@ -100,7 +144,7 @@ const AnalysisParameters: React.FC = () => {
         map.un("click", handleMapClickSelectFeatures);
       }
     },
-    [map, selectionMode, open]
+    [map, selectionMode, open, setDrainageNode, setValves]
   );
 
   // Initialize highlight layer
@@ -162,9 +206,9 @@ const AnalysisParameters: React.FC = () => {
     source.clear();
 
     // Add valves
-    valves.forEach((v) => {
-      if (v.feature) {
-        const f = v.feature.clone(); // Clone to avoid modifying original
+    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()) {
@@ -180,7 +224,32 @@ const AnalysisParameters: React.FC = () => {
       source.addFeature(f);
     }
 
-  }, [highlightLayer, valves, drainageFeature]);
+  }, [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(() => {
@@ -205,6 +274,9 @@ const AnalysisParameters: React.FC = () => {
 
   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) => {
@@ -373,7 +445,7 @@ const AnalysisParameters: React.FC = () => {
           <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="zh-cn">
             <DateTimePicker
               value={startTime}
-              onChange={(newValue) => setStartTime(newValue)}
+              onChange={(newValue) => setFormField("startTime", newValue)}
               format="YYYY-MM-DD HH:mm"
               slotProps={{ textField: { size: "small", fullWidth: true } }}
               localeText={
@@ -393,7 +465,7 @@ const AnalysisParameters: React.FC = () => {
             fullWidth
             size="small"
             value={schemeName}
-            onChange={(e) => setSchemeName(e.target.value)}
+            onChange={(e) => setFormField("schemeName", e.target.value)}
             placeholder="请输入方案名称"
           />
         </Box>
@@ -408,7 +480,9 @@ const AnalysisParameters: React.FC = () => {
               size="small"
               type="number"
               value={flushFlow}
-              onChange={(e) => setFlushFlow(parseFloat(e.target.value) || 0)}
+              onChange={(e) =>
+                setFormField("flushFlow", parseFloat(e.target.value) || 0)
+              }
             />
           </Box>
           <Box className="flex-1">
@@ -420,7 +494,9 @@ const AnalysisParameters: React.FC = () => {
               size="small"
               type="number"
               value={duration}
-              onChange={(e) => setDuration(parseInt(e.target.value) || 0)}
+              onChange={(e) =>
+                setFormField("duration", parseInt(e.target.value) || 0)
+              }
             />
           </Box>
         </Box>