fix(analysis): preserve tab panel state

src/components/olmap/DMALeakDetection/SchemeQuery.tsx

@@ -23,6 +23,7 @@ import dayjs, { Dayjs } from "dayjs";
 import { useNotification } from "@refinedev/core";
 import { api } from "@/lib/api";
 import { NETWORK_NAME, config } from "@config/config";
+import { useControllableObjectState } from "@components/olmap/core/useControllableState";
 import { LeakageResultDetail, LeakageSchemeRecord } from "./types";
 import { FLOW_DISPLAY_UNIT, toM3h } from "@utils/units";
 
@@ -30,15 +31,38 @@ interface Props {
   onViewResult: (result: LeakageResultDetail) => void;
   schemes?: LeakageSchemeRecord[];
   onSchemesChange?: (schemes: LeakageSchemeRecord[]) => void;
+  state?: DMALeakSchemeQueryState;
+  onStateChange?: (state: DMALeakSchemeQueryState) => void;
 }
 
-const SchemeQuery: React.FC<Props> = ({ onViewResult, schemes: externalSchemes, onSchemesChange }) => {
+export interface DMALeakSchemeQueryState {
+  queryAll: boolean;
+  queryDate: Dayjs | null;
+  expandedId: number | null;
+}
+
+export const createDMALeakSchemeQueryState = (): DMALeakSchemeQueryState => ({
+  queryAll: true,
+  queryDate: dayjs(),
+  expandedId: null,
+});
+
+const SchemeQuery: React.FC<Props> = ({
+  onViewResult,
+  schemes: externalSchemes,
+  onSchemesChange,
+  state,
+  onStateChange,
+}) => {
   const { open } = useNotification();
-  const [queryAll, setQueryAll] = useState(true);
-  const [queryDate, setQueryDate] = useState<Dayjs | null>(dayjs());
+  const [queryState, , setQueryField] = useControllableObjectState(
+    state,
+    onStateChange,
+    createDMALeakSchemeQueryState(),
+  );
+  const { queryAll, queryDate, expandedId } = queryState;
   const [internalSchemes, setInternalSchemes] = useState<LeakageSchemeRecord[]>([]);
   const [loading, setLoading] = useState(false);
-  const [expandedId, setExpandedId] = useState<number | null>(null);
   const schemes = externalSchemes !== undefined ? externalSchemes : internalSchemes;
   const setSchemes = onSchemesChange || setInternalSchemes;
 
@@ -91,7 +115,7 @@ const SchemeQuery: React.FC<Props> = ({ onViewResult, schemes: externalSchemes,
                 <Checkbox
                   size="small"
                   checked={queryAll}
-                  onChange={(e) => setQueryAll(e.target.checked)}
+                  onChange={(e) => setQueryField("queryAll", e.target.checked)}
                 />
               }
               label={<Typography variant="body2">查询全部</Typography>}
@@ -100,7 +124,7 @@ const SchemeQuery: React.FC<Props> = ({ onViewResult, schemes: externalSchemes,
             <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="zh-cn">
               <DatePicker
                 value={queryDate}
-                onChange={setQueryDate}
+                onChange={(value) => setQueryField("queryDate", value)}
                 disabled={queryAll}
                 format="YYYY-MM-DD"
                 slotProps={{ textField: { size: "small", sx: { width: 200 } } }}
@@ -178,7 +202,12 @@ const SchemeQuery: React.FC<Props> = ({ onViewResult, schemes: externalSchemes,
                       <Tooltip title={expandedId === scheme.scheme_id ? "收起详情" : "查看详情"}>
                         <IconButton
                           size="small"
-                          onClick={() => setExpandedId(expandedId === scheme.scheme_id ? null : scheme.scheme_id)}
+                          onClick={() =>
+                            setQueryField(
+                              "expandedId",
+                              expandedId === scheme.scheme_id ? null : scheme.scheme_id,
+                            )
+                          }
                           color="primary"
                           className="p-1"
                         >