添加方案记录缓存支持到爆管和漏损检测面板

src/components/olmap/BurstDetection/BurstDetectionPanel.tsx

@@ -12,7 +12,7 @@ import {
 import AnalysisParameters from "./AnalysisParameters";
 import DetectionResults from "./DetectionResults";
 import SchemeQuery from "./SchemeQuery";
-import { BurstDetectionResult } from "./types";
+import { BurstDetectionResult, BurstDetectionSchemeRecord } from "./types";
 
 const TabPanel = ({
   value,
@@ -32,6 +32,7 @@ const BurstDetectionPanel: React.FC = () => {
   const [open, setOpen] = useState(true);
   const [tab, setTab] = useState(0);
   const [result, setResult] = useState<BurstDetectionResult | null>(null);
+  const [schemes, setSchemes] = useState<BurstDetectionSchemeRecord[]>([]);
 
   const drawerWidth = 450;
   const panelTitle = "爆管侦测";
@@ -139,7 +140,7 @@ const BurstDetectionPanel: React.FC = () => {
             <AnalysisParameters onResult={handleResult} />
           </TabPanel>
           <TabPanel value={tab} index={1}>
-            <SchemeQuery onViewResult={handleResult} />
+            <SchemeQuery onViewResult={handleResult} schemes={schemes} onSchemesChange={setSchemes} />
           </TabPanel>
           <TabPanel value={tab} index={2}>
             <DetectionResults result={result} />

src/components/olmap/BurstDetection/SchemeQuery.tsx

@@ -31,15 +31,19 @@ import {
 
 interface Props {
   onViewResult: (result: BurstDetectionResult) => void;
+  schemes?: BurstDetectionSchemeRecord[];
+  onSchemesChange?: (schemes: BurstDetectionSchemeRecord[]) => void;
 }
 
-const SchemeQuery: React.FC<Props> = ({ onViewResult }) => {
+const SchemeQuery: React.FC<Props> = ({ onViewResult, schemes: externalSchemes, onSchemesChange }) => {
   const { open } = useNotification();
   const [queryAll, setQueryAll] = useState(true);
   const [queryDate, setQueryDate] = useState<Dayjs | null>(dayjs());
-  const [schemes, setSchemes] = useState<BurstDetectionSchemeRecord[]>([]);
+  const [internalSchemes, setInternalSchemes] = useState<BurstDetectionSchemeRecord[]>([]);
   const [loading, setLoading] = useState(false);
   const [expandedId, setExpandedId] = useState<number | null>(null);
+  const schemes = externalSchemes !== undefined ? externalSchemes : internalSchemes;
+  const setSchemes = onSchemesChange || setInternalSchemes;
 
   const buildDisplayResult = (
     scheme: Pick<BurstDetectionSchemeRecord, "scheme_name" | "username" | "create_time">,
@@ -88,11 +92,12 @@ const SchemeQuery: React.FC<Props> = ({ onViewResult }) => {
       }
 
       const response = await api.get("/api/v1/burst-detection/schemes/", { params });
-      setSchemes(response.data);
+      const nextSchemes = response.data as BurstDetectionSchemeRecord[];
+      setSchemes(nextSchemes);
       open?.({
         type: "success",
         message: "查询成功",
-        description: `共找到 ${response.data.length} 条侦测记录。`,
+        description: `共找到 ${nextSchemes.length} 条侦测记录。`,
       });
     } catch (error: any) {
       open?.({

src/components/olmap/BurstLocation/BurstLocationPanel.tsx

@@ -12,7 +12,7 @@ import {
 import AnalysisParameters from "./AnalysisParameters";
 import LocationResults from "./LocationResults";
 import SchemeQuery from "./SchemeQuery";
-import { BurstLocationResult } from "./types";
+import { BurstLocationResult, BurstSchemeRecord } from "./types";
 
 const TabPanel = ({
   value,
@@ -32,6 +32,7 @@ const BurstLocationPanel: React.FC = () => {
   const [open, setOpen] = useState(true);
   const [tab, setTab] = useState(0);
   const [result, setResult] = useState<BurstLocationResult | null>(null);
+  const [schemes, setSchemes] = useState<BurstSchemeRecord[]>([]);
 
   const drawerWidth = 450;
   const panelTitle = "爆管定位";
@@ -148,7 +149,7 @@ const BurstLocationPanel: React.FC = () => {
             <AnalysisParameters onResult={handleResult} />
           </TabPanel>
           <TabPanel value={tab} index={1}>
-            <SchemeQuery onViewResult={handleViewResult} />
+            <SchemeQuery onViewResult={handleViewResult} schemes={schemes} onSchemesChange={setSchemes} />
           </TabPanel>
           <TabPanel value={tab} index={2}>
             <LocationResults result={result} />

src/components/olmap/BurstLocation/SchemeQuery.tsx

@@ -32,15 +32,19 @@ import { FLOW_DISPLAY_UNIT, toM3h } from "@utils/units";
 
 interface Props {
   onViewResult: (result: BurstLocationResult) => void;
+  schemes?: BurstSchemeRecord[];
+  onSchemesChange?: (schemes: BurstSchemeRecord[]) => void;
 }
 
-const SchemeQuery: React.FC<Props> = ({ onViewResult }) => {
+const SchemeQuery: React.FC<Props> = ({ onViewResult, schemes: externalSchemes, onSchemesChange }) => {
   const { open } = useNotification();
   const [queryAll, setQueryAll] = useState(true);
   const [queryDate, setQueryDate] = useState<Dayjs | null>(dayjs());
-  const [schemes, setSchemes] = useState<BurstSchemeRecord[]>([]);
+  const [internalSchemes, setInternalSchemes] = useState<BurstSchemeRecord[]>([]);
   const [loading, setLoading] = useState(false);
   const [expandedId, setExpandedId] = useState<number | null>(null);
+  const schemes = externalSchemes !== undefined ? externalSchemes : internalSchemes;
+  const setSchemes = onSchemesChange || setInternalSchemes;
 
   const buildDisplayResult = (
     scheme: Pick<BurstSchemeRecord, "scheme_name" | "username" | "create_time">,
@@ -87,11 +91,12 @@ const SchemeQuery: React.FC<Props> = ({ onViewResult }) => {
       }
 
       const response = await api.get(url, { params });
-      setSchemes(response.data);
+      const nextSchemes = response.data as BurstSchemeRecord[];
+      setSchemes(nextSchemes);
       open?.({
         type: "success",
         message: "查询成功",
-        description: `共找到 ${response.data.length} 条记录`,
+        description: `共找到 ${nextSchemes.length} 条记录`,
       });
     } catch (error: any) {
       console.error(error);

src/components/olmap/BurstSimulation/SchemeQuery.tsx

@@ -122,8 +122,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
         });
       }
 
-      setSchemes(
+      const nextSchemes = filteredResults.map((item: SchemaItem) => ({
-        filteredResults.map((item: SchemaItem) => ({
         id: item.scheme_id,
         schemeName: item.scheme_name,
         type: item.scheme_type,
@@ -131,8 +130,8 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
         create_time: item.create_time,
         startTime: item.scheme_start_time,
         schemeDetail: item.scheme_detail,
-        })),
+      }));
-      );
+      setSchemes(nextSchemes);
 
       if (filteredResults.length === 0) {
         open?.({

src/components/olmap/ContaminantSimulation/SchemeQuery.tsx

@@ -195,8 +195,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
         );
       }
 
-      setSchemes(
+      const nextSchemes = filteredResults.map((item: ContaminantSchemaItem) => ({
-        filteredResults.map((item: ContaminantSchemaItem) => ({
         id: item.scheme_id,
         schemeName: item.scheme_name,
         type: item.scheme_type,
@@ -204,8 +203,8 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
         create_time: item.create_time,
         startTime: item.scheme_start_time,
         schemeDetail: item.scheme_detail,
-        })),
+      }));
-      );
+      setSchemes(nextSchemes);
 
       if (filteredResults.length === 0) {
         open?.({

src/components/olmap/ContaminantSimulation/WaterQualityPanel.tsx

@@ -20,6 +20,7 @@ import {
 import ContaminantAnalysisParameters from "./AnalysisParameters";
 import ContaminantSchemeQuery from "./SchemeQuery";
 import { useData } from "@components/olmap/core/MapComponent";
+import { ContaminantSchemeRecord } from "./types";
 
 interface WaterQualityPanelProps {
   open?: boolean;
@@ -32,6 +33,7 @@ const WaterQualityPanel: React.FC<WaterQualityPanelProps> = ({
 }) => {
   const [internalOpen, setInternalOpen] = useState(true);
   const [currentTab, setCurrentTab] = useState(0);
+  const [schemes, setSchemes] = useState<ContaminantSchemeRecord[]>([]);
 
   const data = useData();
 
@@ -172,7 +174,11 @@ const WaterQualityPanel: React.FC<WaterQualityPanelProps> = ({
           </TabPanel>
 
           <TabPanel value={currentTab} index={1}>
-            <ContaminantSchemeQuery onViewResults={() => setCurrentTab(2)} />
+            <ContaminantSchemeQuery
+              schemes={schemes}
+              onSchemesChange={setSchemes}
+              onViewResults={() => setCurrentTab(2)}
+            />
           </TabPanel>
         </Box>
       </Drawer>

src/components/olmap/DMALeakDetection/DMALeakDetectionPanel.tsx

@@ -27,7 +27,7 @@ import AnalysisParameters from "./AnalysisParameters";
 import SchemeQuery from "./SchemeQuery";
 import RecognitionResults from "./RecognitionResults";
 import { getAreaColor } from "./utils";
-import { LeakageResultDetail } from "./types";
+import { LeakageResultDetail, LeakageSchemeRecord } from "./types";
 import { config } from "@/config/config";
 
 const TabPanel = ({
@@ -52,6 +52,7 @@ const DMALeakDetectionPanel: React.FC = () => {
   const [tab, setTab] = useState(0);
   const [result, setResult] = useState<LeakageResultDetail | null>(null);
   const [loadedResult, setLoadedResult] = useState<LeakageResultDetail | null>(null);
+  const [schemes, setSchemes] = useState<LeakageSchemeRecord[]>([]);
 
   const drawerWidth = 450;
   const panelTitle = "DMA 漏损识别";
@@ -277,7 +278,7 @@ const DMALeakDetectionPanel: React.FC = () => {
             <AnalysisParameters onResult={handleAnalysisResult} />
           </TabPanel>
           <TabPanel value={tab} index={1}>
-            <SchemeQuery onViewResult={handleViewResult} />
+            <SchemeQuery onViewResult={handleViewResult} schemes={schemes} onSchemesChange={setSchemes} />
           </TabPanel>
           <TabPanel value={tab} index={2}>
             <RecognitionResults result={result} />

src/components/olmap/DMALeakDetection/SchemeQuery.tsx

@@ -28,15 +28,19 @@ import { FLOW_DISPLAY_UNIT, toM3h } from "@utils/units";
 
 interface Props {
   onViewResult: (result: LeakageResultDetail) => void;
+  schemes?: LeakageSchemeRecord[];
+  onSchemesChange?: (schemes: LeakageSchemeRecord[]) => void;
 }
 
-const SchemeQuery: React.FC<Props> = ({ onViewResult }) => {
+const SchemeQuery: React.FC<Props> = ({ onViewResult, schemes: externalSchemes, onSchemesChange }) => {
   const { open } = useNotification();
   const [queryAll, setQueryAll] = useState(true);
   const [queryDate, setQueryDate] = useState<Dayjs | null>(dayjs());
-  const [schemes, setSchemes] = useState<LeakageSchemeRecord[]>([]);
+  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;
 
   const handleQuery = async () => {
     setLoading(true);
@@ -48,7 +52,8 @@ const SchemeQuery: React.FC<Props> = ({ onViewResult }) => {
       const response = await api.get(`${config.BACKEND_URL}/api/v1/leakage/schemes/`, {
         params,
       });
-      setSchemes(response.data);
+      const nextSchemes = response.data as LeakageSchemeRecord[];
+      setSchemes(nextSchemes);
     } catch (error: any) {
       open?.({
         type: "error",

src/components/olmap/FlushingAnalysis/FlushingAnalysisPanel.tsx

@@ -19,6 +19,7 @@ import {
 import { MdCleaningServices } from "react-icons/md";
 import AnalysisParameters from "./AnalysisParameters";
 import SchemeQuery from "./SchemeQuery";
+import { SchemeRecord } from "./types";
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -51,6 +52,7 @@ const FlushingAnalysisPanel: React.FC<FlushingAnalysisPanelProps> = ({
 }) => {
   const [internalOpen, setInternalOpen] = useState(true);
   const [currentTab, setCurrentTab] = useState(0);
+  const [schemes, setSchemes] = useState<SchemeRecord[]>([]);
 
   // Using controlled or uncontrolled state
   const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
@@ -183,7 +185,7 @@ const FlushingAnalysisPanel: React.FC<FlushingAnalysisPanelProps> = ({
           </TabPanel>
 
           <TabPanel value={currentTab} index={1}>
-            <SchemeQuery />
+            <SchemeQuery schemes={schemes} onSchemesChange={setSchemes} />
           </TabPanel>
         </Box>
       </Drawer>

src/components/olmap/FlushingAnalysis/SchemeQuery.tsx

@@ -238,8 +238,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
         });
       }
 
-      setSchemes(
+      const nextSchemes = filteredResults.map((item: SchemaItem) => ({
-        filteredResults.map((item: SchemaItem) => ({
         id: item.scheme_id,
         schemeName: item.scheme_name,
         type: item.scheme_type,
@@ -247,8 +246,8 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
         create_time: item.create_time,
         startTime: item.scheme_start_time,
         schemeDetail: item.scheme_detail,
-        })),
+      }));
-      );
+      setSchemes(nextSchemes);
 
       if (filteredResults.length === 0) {
         open?.({

src/components/olmap/MonitoringPlaceOptimization/SchemeQuery.tsx

@@ -163,8 +163,7 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
         });
       }
 
-      setSchemes(
+      const nextSchemes = filteredResults.map((item: SchemaItem) => ({
-        filteredResults.map((item: SchemaItem) => ({
         id: item.id,
         schemeName: item.scheme_name,
         sensorNumber: item.sensor_number,
@@ -172,8 +171,8 @@ const SchemeQuery: React.FC<SchemeQueryProps> = ({
         user: item.username,
         create_time: item.create_time,
         sensorLocation: item.sensor_location,
-        })),
+      }));
-      );
+      setSchemes(nextSchemes);
 
       if (filteredResults.length === 0) {
         open?.({