修改 SCADA 数据清洗页面，修改工具栏选项

src/app/(main)/network-simulation/page.tsx

@@ -3,6 +3,8 @@
 import { useCallback, useMemo, useState } from "react";
 import MapComponent from "@app/OlMap/MapComponent";
 import Timeline from "@app/OlMap/Controls/Timeline";
+import MapToolbar from "@app/OlMap/Controls/Toolbar";
+
 import SCADADeviceList from "@components/olmap/SCADADeviceList";
 import SCADADataPanel from "@components/olmap/SCADADataPanel";
 
@@ -77,6 +79,7 @@ export default function Home() {
       <MapComponent>
         <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 w-[800px] opacity-90 hover:opacity-100 transition-opacity duration-300">
           <Timeline />
+          <MapToolbar />
         </div>
       </MapComponent>
       <SCADADeviceList

src/app/(main)/scada-data-cleaning/page.tsx

@@ -1,11 +1,95 @@
 "use client";
 
+import { useCallback, useMemo, useState } from "react";
 import MapComponent from "@app/OlMap/MapComponent";
+import MapToolbar from "@app/OlMap/Controls/Toolbar";
+
+import SCADADeviceList from "@components/olmap/SCADADeviceList";
+import SCADADataPanel from "@components/olmap/SCADADataPanel";
+
+const mockDevices = [
+  {
+    id: "SCADA-001",
+    name: "SCADA-001",
+    type: "pressure",
+    coordinates: [121.4737, 31.2304] as [number, number],
+    status: "online" as const,
+  },
+  {
+    id: "SCADA-002",
+    name: "SCADA-002",
+    type: "flow",
+    coordinates: [121.4807, 31.2204] as [number, number],
+    status: "warning" as const,
+  },
+  {
+    id: "SCADA-003",
+    name: "SCADA-003",
+    type: "pressure",
+    coordinates: [121.4607, 31.2354] as [number, number],
+    status: "offline" as const,
+  },
+  {
+    id: "SCADA-004",
+    name: "SCADA-004",
+    type: "demand",
+    coordinates: [121.4457, 31.2104] as [number, number],
+    status: "online" as const,
+  },
+  {
+    id: "SCADA-005",
+    name: "SCADA-005",
+    type: "level",
+    coordinates: [121.4457, 31.2104] as [number, number],
+    status: "online" as const,
+  },
+];
 
 export default function Home() {
+  const [selectedDeviceIds, setSelectedDeviceIds] = useState<string[]>([]);
+  const [panelVisible, setPanelVisible] = useState<boolean>(false);
+
+  const devices = useMemo(() => mockDevices, []);
+
+  const deviceLabels = useMemo(
+    () =>
+      devices.reduce<Record<string, string>>((acc, device) => {
+        acc[device.id] = device.name;
+        return acc;
+      }, {}),
+    [devices]
+  );
+
+  const handleSelectionChange = useCallback((ids: string[]) => {
+    setSelectedDeviceIds(ids);
+    setPanelVisible(ids.length > 0);
+  }, []);
+
+  const handleDeviceClick = useCallback(() => {
+    setPanelVisible(true);
+  }, []);
+
+  const handleClosePanel = useCallback(() => {
+    setPanelVisible(false);
+  }, []);
+
   return (
     <div className="relative w-full h-full overflow-hidden">
-      <MapComponent />
+      <MapComponent>
+        <MapToolbar hiddenButtons={["style"]} />
+      </MapComponent>
+      <SCADADeviceList
+        devices={devices}
+        onDeviceClick={handleDeviceClick}
+        onSelectionChange={handleSelectionChange}
+        selectedDeviceIds={selectedDeviceIds}
+      />
+      <SCADADataPanel
+        deviceIds={selectedDeviceIds}
+        deviceLabels={deviceLabels}
+        visible={panelVisible}
+        onClose={handleClosePanel}
+      />
     </div>
   );
 }

src/app/OlMap/Controls/DrawPanel.tsx

@@ -367,13 +367,13 @@ const DrawPanel: React.FC = () => {
           onClick={() => handleToolClick("delete")}
           disabled={isDeleteDisabled}
         />
-        <ToolbarButton
+        {/* <ToolbarButton
           icon={<SaveIcon />}
           name="保存"
           isActive={false}
           onClick={() => handleToolClick("save")}
           disabled={isSaveDisabled}
-        />
+        /> */}
       </div>
     </div>
   );

src/app/OlMap/Controls/Toolbar.tsx

@@ -26,7 +26,11 @@ import RenderFeature from "ol/render/Feature";
 import { config } from "@/config/config";
 const backendUrl = config.backendUrl;
 
-const Toolbar: React.FC = () => {
+// 添加接口定义隐藏按钮的props
+interface ToolbarProps {
+  hiddenButtons?: string[]; // 可选的隐藏按钮列表，例如 ['info', 'draw', 'style']
+}
+const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons }) => {
   const map = useMap();
   const data = useData();
   if (!data) return null;
@@ -548,24 +552,30 @@ const Toolbar: React.FC = () => {
   return (
     <>
       <div className="absolute top-4 left-4 bg-white p-1 rounded-xl shadow-lg flex opacity-85 hover:opacity-100 transition-opacity">
+        {!hiddenButtons?.includes("info") && (
           <ToolbarButton
             icon={<InfoOutlinedIcon />}
             name="查看属性"
             isActive={activeTools.includes("info")}
             onClick={() => handleToolClick("info")}
           />
+        )}
+        {!hiddenButtons?.includes("draw") && (
           <ToolbarButton
             icon={<EditOutlinedIcon />}
             name="矢量编辑"
             isActive={activeTools.includes("draw")}
             onClick={() => handleToolClick("draw")}
           />
+        )}
+        {!hiddenButtons?.includes("style") && (
           <ToolbarButton
             icon={<PaletteOutlinedIcon />}
             name="图层样式"
             isActive={activeTools.includes("style")}
             onClick={() => handleToolClick("style")}
           />
+        )}
       </div>
       {showPropertyPanel && <PropertyPanel {...getFeatureProperties()} />}
       {showDrawPanel && map && <DrawPanel />}

src/app/OlMap/MapComponent.tsx

@@ -632,6 +632,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
           <div className="relative w-full h-full">
             <div ref={mapRef} className="w-full h-full"></div>
             <MapTools />
+            
             {children}
           </div>
           <canvas id="deck-canvas" />

src/app/OlMap/MapTools.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import Zoom from "./Controls/Zoom";
 import BaseLayers from "./Controls/BaseLayers";
-import MapToolbar from "./Controls/Toolbar";
 import ScaleLine from "./Controls/ScaleLine";
 import LayerControl from "./Controls/LayerControl";
 interface MapToolsProps {}
@@ -12,7 +11,6 @@ const MapTools: React.FC<MapToolsProps> = () => {
       <Zoom />
       <ScaleLine />
       <BaseLayers />
-      <MapToolbar />
       <LayerControl />
       {/* 继续添加其他自定义控件 */}
     </>