组件居中，可拖拽

src/app/OlMap/Controls/HistoryDataPanel.tsx

@@ -1,6 +1,14 @@
 "use client";
 
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import Draggable from "react-draggable";
+
 import {
   Box,
   Button,
@@ -294,6 +302,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
   const [selectedSource, setSelectedSource] = useState<
     "raw" | "clean" | "sim" | "all"
   >(() => (deviceIds.length === 1 ? "all" : "clean"));
+  const draggableRef = useRef<HTMLDivElement>(null);
 
   // 获取 SCADA 设备信息，生成 deviceLabels
   useEffect(() => {
@@ -648,12 +657,13 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
   return (
     <>
       {/* 主面板 */}
+      <Draggable nodeRef={draggableRef}>
         <Box
+          ref={draggableRef}
           sx={{
-          position: "fixed",
+            position: "absolute",
-          left: "50%",
+            right: "1rem",
-          top: "50%",
+            top: "1rem",
-          transform: "translate(-50%, -50%)",
             width: "min(920px, calc(100vw - 2rem))",
             maxWidth: "100vw",
             height: "860px",
@@ -856,6 +866,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
             </Box>
           </Box>
         </Box>
+      </Draggable>
     </>
   );
 };