feat(sensor-placement): add scheme engineering editor

src/components/olmap/MonitoringPlaceOptimization/MonitoringPlaceOptimizationPanel.tsx

@@ -9,6 +9,7 @@ import {
   Typography,
   IconButton,
   Tooltip,
+  CircularProgress,
 } from "@mui/material";
 import {
   ChevronRight,
@@ -16,6 +17,7 @@ import {
   Sensors as SensorsIcon,
   Analytics as AnalyticsIcon,
   Search as SearchIcon,
+  TableView as TableIcon,
 } from "@mui/icons-material";
 import OptimizationParameters, {
   createOptimizationParametersState,
@@ -25,16 +27,12 @@ import SchemeQuery, {
   createMonitoringSchemeQueryState,
   type MonitoringSchemeQueryState,
 } from "./SchemeQuery";
-
-interface SchemeRecord {
-  id: number;
-  schemeName: string;
-  sensorNumber: number;
-  minDiameter: number;
-  user: string;
-  create_time: string;
-  sensorLocation?: string[];
-}
+import SchemeEditor from "./SchemeEditor";
+import { getSensorPlacementScheme } from "./schemeApi";
+import type { SchemeRecord, SensorPlacementScheme } from "./types";
+import { NETWORK_NAME } from "@/config/config";
+import { useNotification } from "@refinedev/core";
+import PanelEmptyState from "@components/olmap/common/PanelEmptyState";
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -49,9 +47,7 @@ const TabPanel: React.FC<TabPanelProps> = ({ children, value, index }) => {
       hidden={value !== index}
       className="flex-1 overflow-hidden flex flex-col"
     >
-      {value === index && (
-        <Box className="flex-1 overflow-auto p-4">{children}</Box>
-      )}
+      <Box className="flex-1 overflow-auto p-4">{children}</Box>
     </div>
   );
 };
@@ -66,6 +62,10 @@ const MonitoringPlaceOptimizationPanel: React.FC<
 > = ({ open: controlledOpen, onToggle }) => {
   const [internalOpen, setInternalOpen] = useState(true);
   const [currentTab, setCurrentTab] = useState(0);
+  const [activeScheme, setActiveScheme] =
+    useState<SensorPlacementScheme | null>(null);
+  const [loadingScheme, setLoadingScheme] = useState(false);
+  const { open: notify } = useNotification();
 
   // 持久化方案查询结果
   const [schemes, setSchemes] = useState<SchemeRecord[]>([]);
@@ -89,7 +89,42 @@ const MonitoringPlaceOptimizationPanel: React.FC<
     setCurrentTab(newValue);
   };
 
-  const drawerWidth = 520;
+  const drawerWidth = currentTab === 1 ? 820 : 520;
+
+  const handleOpenScheme = async (schemeId: number) => {
+    setLoadingScheme(true);
+    setCurrentTab(1);
+    try {
+      setActiveScheme(await getSensorPlacementScheme(NETWORK_NAME, schemeId));
+    } catch (error) {
+      const detail =
+        (error as { response?: { data?: { detail?: string } } }).response?.data
+          ?.detail || "无法读取方案详情";
+      notify?.({
+        type: "error",
+        message: "方案加载失败",
+        description: detail,
+      });
+      setCurrentTab(2);
+    } finally {
+      setLoadingScheme(false);
+    }
+  };
+
+  const handleSchemeSaved = (scheme: SensorPlacementScheme) => {
+    setActiveScheme(scheme);
+    setSchemes((current) =>
+      current.map((record) =>
+        record.id === scheme.id
+          ? {
+              ...record,
+              sensorNumber: scheme.sensor_number,
+              sensorLocation: scheme.sensor_location,
+            }
+          : record,
+      ),
+    );
+  };
 
   return (
     <>
@@ -132,6 +167,7 @@ const MonitoringPlaceOptimizationPanel: React.FC<
             right: 16,
             height: "calc(100vh - 32px)",
             maxHeight: "850px",
+            maxWidth: "calc(100vw - 32px)",
             borderRadius: "12px",
             boxShadow:
               "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
@@ -193,6 +229,11 @@ const MonitoringPlaceOptimizationPanel: React.FC<
                 iconPosition="start"
                 label="优化要件"
               />
+              <Tab
+                icon={<TableIcon fontSize="small" />}
+                iconPosition="start"
+                label="结果编辑"
+              />
               <Tab
                 icon={<SearchIcon fontSize="small" />}
                 iconPosition="start"
@@ -206,19 +247,59 @@ const MonitoringPlaceOptimizationPanel: React.FC<
             <OptimizationParameters
               state={optimizationState}
               onStateChange={setOptimizationState}
+              onSchemeCreated={(scheme) => {
+                setActiveScheme(scheme);
+                setCurrentTab(1);
+                setSchemes((current) => [
+                  ...current,
+                  {
+                    id: scheme.id,
+                    schemeName: scheme.scheme_name,
+                    sensorNumber: scheme.sensor_number,
+                    minDiameter: scheme.min_diameter,
+                    username: scheme.username,
+                    create_time: scheme.create_time,
+                    sensorLocation: scheme.sensor_location,
+                  },
+                ]);
+              }}
             />
           </TabPanel>
 
           <TabPanel value={currentTab} index={1}>
+            {loadingScheme ? (
+              <Box
+                sx={{
+                  minHeight: 320,
+                  display: "grid",
+                  placeItems: "center",
+                }}
+              >
+                <CircularProgress size={30} />
+              </Box>
+            ) : activeScheme ? (
+              <SchemeEditor
+                scheme={activeScheme}
+                network={NETWORK_NAME}
+                active={isOpen && currentTab === 1}
+                onSaved={handleSchemeSaved}
+              />
+            ) : (
+              <PanelEmptyState
+                icon={<TableIcon />}
+                title="暂无可编辑结果"
+                description="请先在“优化要件”中创建方案，或在“方案查询”中打开已有方案。"
+              />
+            )}
+          </TabPanel>
+
+          <TabPanel value={currentTab} index={2}>
             <SchemeQuery
               schemes={schemes}
               onSchemesChange={setSchemes}
               state={queryState}
               onStateChange={setQueryState}
-              onLocate={(id) => {
-                console.log("定位方案:", id);
-                // TODO: 在地图上定位
-              }}
+              onEdit={handleOpenScheme}
             />
           </TabPanel>
         </Box>