fix(analysis): preserve tab panel state

2026-07-09 13:59:01 +08:00
parent 701c5a949d
commit 694f7629ee
24 changed files with 1119 additions and 281 deletions
@@ -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>
@@ -17,8 +17,14 @@ import {
  Search as SearchIcon,
 } from "@mui/icons-material";
 import { MdCleaningServices } from "react-icons/md";
-import AnalysisParameters from "./AnalysisParameters";
-import SchemeQuery from "./SchemeQuery";
+import AnalysisParameters, {
+  createFlushingAnalysisParametersState,
+  type FlushingAnalysisParametersState,
+} from "./AnalysisParameters";
+import SchemeQuery, {
+  createFlushingSchemeQueryState,
+  type FlushingSchemeQueryState,
+} from "./SchemeQuery";
 import { SchemeRecord } from "./types";

 interface TabPanelProps {
@@ -53,6 +59,13 @@ const FlushingAnalysisPanel: React.FC<FlushingAnalysisPanelProps> = ({
  const [internalOpen, setInternalOpen] = useState(true);
  const [currentTab, setCurrentTab] = useState(0);
  const [schemes, setSchemes] = useState<SchemeRecord[]>([]);
+  const [analysisState, setAnalysisState] =
+    useState<FlushingAnalysisParametersState>(
+      createFlushingAnalysisParametersState,
+    );
+  const [queryState, setQueryState] = useState<FlushingSchemeQueryState>(
+    createFlushingSchemeQueryState,
+  );

  // Using controlled or uncontrolled state
  const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
@@ -181,11 +194,19 @@ const FlushingAnalysisPanel: React.FC<FlushingAnalysisPanelProps> = ({

          {/* Tab Content */}
          <TabPanel value={currentTab} index={0}>
-            <AnalysisParameters />
+            <AnalysisParameters
+              state={analysisState}
+              onStateChange={setAnalysisState}
+            />
          </TabPanel>

          <TabPanel value={currentTab} index={1}>
-            <SchemeQuery schemes={schemes} onSchemesChange={setSchemes} />
+            <SchemeQuery
+              schemes={schemes}
+              onSchemesChange={setSchemes}
+              state={queryState}
+              onStateChange={setQueryState}
+            />
          </TabPanel>
        </Box>
      </Drawer>
@@ -32,6 +32,7 @@ import { config, NETWORK_NAME } from "@config/config";
 import { useNotification } from "@refinedev/core";
 import { useData, useMap } from "@components/olmap/core/MapComponent";
 import { queryFeaturesByIds } from "@/utils/mapQueryService";
+import { useControllableObjectState } from "@components/olmap/core/useControllableState";
 import { GeoJSON } from "ol/format";
 import VectorLayer from "ol/layer/Vector";
 import VectorSource from "ol/source/Vector";
@@ -46,29 +47,58 @@ interface SchemeQueryProps {
  schemes?: SchemeRecord[];
  onSchemesChange?: (schemes: SchemeRecord[]) => void;
  network?: string;
+  state?: FlushingSchemeQueryState;
+  onStateChange?: (state: FlushingSchemeQueryState) => void;
 }

 const SCHEME_TYPE = "flushing_analysis";

+export interface FlushingSchemeQueryState {
+  queryAll: boolean;
+  queryDate: Dayjs | null;
+  expandedId: number | null;
+  showTimeline: boolean;
+  selectedDate: Date | undefined;
+  timeRange: { start: Date; end: Date } | undefined;
+}
+
+export const createFlushingSchemeQueryState =
+  (): FlushingSchemeQueryState => ({
+    queryAll: true,
+    queryDate: dayjs(new Date()),
+    expandedId: null,
+    showTimeline: false,
+    selectedDate: undefined,
+    timeRange: undefined,
+  });
+
 const SchemeQuery: React.FC<SchemeQueryProps> = ({
  schemes: externalSchemes,
  onSchemesChange,
  network = NETWORK_NAME,
+  state,
+  onStateChange,
 }) => {
-  const [queryAll, setQueryAll] = useState<boolean>(true);
-  const [queryDate, setQueryDate] = useState<Dayjs | null>(dayjs(new Date()));
+  const [queryState, setQueryState, setQueryField] = useControllableObjectState(
+    state,
+    onStateChange,
+    createFlushingSchemeQueryState(),
+  );
+  const {
+    queryAll,
+    queryDate,
+    expandedId,
+    showTimeline,
+    selectedDate,
+    timeRange,
+  } = queryState;
  const [internalSchemes, setInternalSchemes] = useState<SchemeRecord[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
-  const [expandedId, setExpandedId] = useState<number | null>(null);

  const [highlightLayer, setHighlightLayer] =
    useState<VectorLayer<VectorSource> | null>(null);
  const [highlightFeatures, setHighlightFeatures] = useState<Feature[]>([]);

-  // Timeline related state
-  const [showTimeline, setShowTimeline] = useState(false);
-  const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined);
-  const [timeRange, setTimeRange] = useState<{ start: Date; end: Date } | undefined>();
  const [mapContainer, setMapContainer] = useState<HTMLElement | null>(null);

  const { open } = useNotification();
@@ -269,15 +299,19 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
  };

  const handleViewResults = (scheme: SchemeRecord) => {
-    setShowTimeline(true);
+    setQueryState((previous) => ({ ...previous, showTimeline: true }));

    const schemeDate = scheme.startTime ? new Date(scheme.startTime) : undefined;

    if (scheme.startTime && scheme.schemeDetail?.duration) {
      const start = new Date(scheme.startTime);
      const end = new Date(start.getTime() + scheme.schemeDetail.duration * 1000);
-      setSelectedDate(schemeDate);
-      setTimeRange({ start, end });
+      setQueryState((previous) => ({
+        ...previous,
+        showTimeline: true,
+        selectedDate: schemeDate,
+        timeRange: { start, end },
+      }));
    }

    setSchemeName?.(scheme.schemeName);
@@ -311,7 +345,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                control={
                  <Checkbox
                    checked={queryAll}
-                    onChange={(e) => setQueryAll(e.target.checked)}
+                    onChange={(e) => setQueryField("queryAll", e.target.checked)}
                    size="small"
                  />
                }
@@ -325,7 +359,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                <DatePicker
                  value={queryDate}
                  onChange={(value) =>
-                    value && dayjs.isDayjs(value) && setQueryDate(value)
+                    value && dayjs.isDayjs(value) && setQueryField("queryDate", value)
                  }
                  format="YYYY-MM-DD"
                  disabled={queryAll}
@@ -443,13 +477,14 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
                            expandedId === scheme.id ? "收起详情" : "查看详情"
                          }
                        >
-                          <IconButton
-                            size="small"
-                            onClick={() =>
-                              setExpandedId(
-                                expandedId === scheme.id ? null : scheme.id,
-                              )
-                            }
+                            <IconButton
+                              size="small"
+                              onClick={() =>
+                                setQueryField(
+                                  "expandedId",
+                                  expandedId === scheme.id ? null : scheme.id,
+                                )
+                              }
                            color="primary"
                            className="p-1"
                          >