diff --git a/src/app/OlMap/Controls/HistoryDataPanel.tsx b/src/app/OlMap/Controls/HistoryDataPanel.tsx
index ddb988d..813b110 100644
--- a/src/app/OlMap/Controls/HistoryDataPanel.tsx
+++ b/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,214 +657,216 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
   return (
     <>
       {/* 主面板 */}
-      <Box
-        sx={{
-          position: "fixed",
-          left: "50%",
-          top: "50%",
-          transform: "translate(-50%, -50%)",
-          width: "min(920px, calc(100vw - 2rem))",
-          maxWidth: "100vw",
-          height: "860px",
-          maxHeight: "calc(100vh - 2rem)",
-          boxSizing: "border-box",
-          borderRadius: "12px",
-          boxShadow:
-            "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
-          backdropFilter: "blur(8px)",
-          opacity: 0.95,
-          transition: "opacity 0.3s ease-in-out",
-          border: "none",
-          display: "flex",
-          flexDirection: "column",
-          zIndex: 1300,
-          backgroundColor: "white",
-          overflow: "hidden",
-          "&:hover": {
-            opacity: 1,
-          },
-        }}
-      >
+      <Draggable nodeRef={draggableRef}>
         <Box
-          className="flex flex-col h-full rounded-xl"
-          sx={{ height: "100%", width: "100%" }}
+          ref={draggableRef}
+          sx={{
+            position: "absolute",
+            right: "1rem",
+            top: "1rem",
+            width: "min(920px, calc(100vw - 2rem))",
+            maxWidth: "100vw",
+            height: "860px",
+            maxHeight: "calc(100vh - 2rem)",
+            boxSizing: "border-box",
+            borderRadius: "12px",
+            boxShadow:
+              "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+            backdropFilter: "blur(8px)",
+            opacity: 0.95,
+            transition: "opacity 0.3s ease-in-out",
+            border: "none",
+            display: "flex",
+            flexDirection: "column",
+            zIndex: 1300,
+            backgroundColor: "white",
+            overflow: "hidden",
+            "&:hover": {
+              opacity: 1,
+            },
+          }}
         >
-          {/* Header */}
           <Box
-            sx={{
-              p: 2,
-              borderBottom: 1,
-              borderColor: "divider",
-              backgroundColor: "primary.main",
-              color: "primary.contrastText",
-            }}
+            className="flex flex-col h-full rounded-xl"
+            sx={{ height: "100%", width: "100%" }}
           >
-            <Stack
-              direction="row"
-              alignItems="center"
-              justifyContent="space-between"
+            {/* Header */}
+            <Box
+              sx={{
+                p: 2,
+                borderBottom: 1,
+                borderColor: "divider",
+                backgroundColor: "primary.main",
+                color: "primary.contrastText",
+              }}
             >
-              <Stack direction="row" spacing={1} alignItems="center">
-                <ShowChart fontSize="small" />
-                <Typography variant="h6" sx={{ fontWeight: "bold" }}>
-                  历史数据
-                </Typography>
-                <Chip
-                  size="small"
-                  label={`${deviceIds.length}`}
-                  sx={{
-                    backgroundColor: "rgba(255,255,255,0.2)",
-                    color: "primary.contrastText",
-                    fontWeight: "bold",
-                  }}
-                />
-              </Stack>
-            </Stack>
-          </Box>
-
-          {/* Controls */}
-          <Box sx={{ p: 2, backgroundColor: "grey.50" }}>
-            <LocalizationProvider
-              dateAdapter={AdapterDayjs}
-              adapterLocale="zh-cn"
-            >
-              <Stack spacing={1.5}>
+              <Stack
+                direction="row"
+                alignItems="center"
+                justifyContent="space-between"
+              >
                 <Stack direction="row" spacing={1} alignItems="center">
-                  <DateTimePicker
-                    label="开始时间"
-                    value={from}
-                    onChange={(value) => {
-                      if (value && dayjs.isDayjs(value) && value.isValid()) {
-                        setFrom(value);
-                      }
-                    }}
-                    onAccept={(value) => {
-                      if (
-                        value &&
-                        dayjs.isDayjs(value) &&
-                        value.isValid() &&
-                        hasDevices
-                      ) {
-                        handleFetch("date-change");
-                      }
-                    }}
-                    maxDateTime={to}
-                    slotProps={{
-                      textField: { fullWidth: true, size: "small" },
-                    }}
-                  />
-                  <DateTimePicker
-                    label="结束时间"
-                    value={to}
-                    onChange={(value) => {
-                      if (value && dayjs.isDayjs(value) && value.isValid()) {
-                        setTo(value);
-                      }
-                    }}
-                    onAccept={(value) => {
-                      if (
-                        value &&
-                        dayjs.isDayjs(value) &&
-                        value.isValid() &&
-                        hasDevices
-                      ) {
-                        handleFetch("date-change");
-                      }
-                    }}
-                    minDateTime={from}
-                    slotProps={{
-                      textField: { fullWidth: true, size: "small" },
+                  <ShowChart fontSize="small" />
+                  <Typography variant="h6" sx={{ fontWeight: "bold" }}>
+                    历史数据
+                  </Typography>
+                  <Chip
+                    size="small"
+                    label={`${deviceIds.length}`}
+                    sx={{
+                      backgroundColor: "rgba(255,255,255,0.2)",
+                      color: "primary.contrastText",
+                      fontWeight: "bold",
                     }}
                   />
                 </Stack>
-                <Stack
-                  direction="row"
-                  spacing={1}
-                  alignItems="center"
-                  justifyContent="space-between"
-                >
-                  <Tabs
-                    value={activeTab}
-                    onChange={(_, value: PanelTab) => setActiveTab(value)}
-                    variant="fullWidth"
+              </Stack>
+            </Box>
+
+            {/* Controls */}
+            <Box sx={{ p: 2, backgroundColor: "grey.50" }}>
+              <LocalizationProvider
+                dateAdapter={AdapterDayjs}
+                adapterLocale="zh-cn"
+              >
+                <Stack spacing={1.5}>
+                  <Stack direction="row" spacing={1} alignItems="center">
+                    <DateTimePicker
+                      label="开始时间"
+                      value={from}
+                      onChange={(value) => {
+                        if (value && dayjs.isDayjs(value) && value.isValid()) {
+                          setFrom(value);
+                        }
+                      }}
+                      onAccept={(value) => {
+                        if (
+                          value &&
+                          dayjs.isDayjs(value) &&
+                          value.isValid() &&
+                          hasDevices
+                        ) {
+                          handleFetch("date-change");
+                        }
+                      }}
+                      maxDateTime={to}
+                      slotProps={{
+                        textField: { fullWidth: true, size: "small" },
+                      }}
+                    />
+                    <DateTimePicker
+                      label="结束时间"
+                      value={to}
+                      onChange={(value) => {
+                        if (value && dayjs.isDayjs(value) && value.isValid()) {
+                          setTo(value);
+                        }
+                      }}
+                      onAccept={(value) => {
+                        if (
+                          value &&
+                          dayjs.isDayjs(value) &&
+                          value.isValid() &&
+                          hasDevices
+                        ) {
+                          handleFetch("date-change");
+                        }
+                      }}
+                      minDateTime={from}
+                      slotProps={{
+                        textField: { fullWidth: true, size: "small" },
+                      }}
+                    />
+                  </Stack>
+                  <Stack
+                    direction="row"
+                    spacing={1}
+                    alignItems="center"
+                    justifyContent="space-between"
                   >
-                    <Tab
-                      value="chart"
-                      icon={<ShowChart fontSize="small" />}
-                      iconPosition="start"
-                      label="曲线"
-                    />
-                    <Tab
-                      value="table"
-                      icon={<TableChart fontSize="small" />}
-                      iconPosition="start"
-                      label="表格"
-                    />
-                  </Tabs>
-                  <Stack direction="row" spacing={1}>
-                    <Tooltip title="刷新数据">
-                      <span>
-                        <Button
-                          variant="outlined"
-                          size="small"
-                          color="primary"
-                          startIcon={<Refresh fontSize="small" />}
-                          disabled={!hasDevices || loadingState === "loading"}
-                          onClick={() => handleFetch("manual")}
-                        >
-                          刷新
-                        </Button>
-                      </span>
-                    </Tooltip>
+                    <Tabs
+                      value={activeTab}
+                      onChange={(_, value: PanelTab) => setActiveTab(value)}
+                      variant="fullWidth"
+                    >
+                      <Tab
+                        value="chart"
+                        icon={<ShowChart fontSize="small" />}
+                        iconPosition="start"
+                        label="曲线"
+                      />
+                      <Tab
+                        value="table"
+                        icon={<TableChart fontSize="small" />}
+                        iconPosition="start"
+                        label="表格"
+                      />
+                    </Tabs>
+                    <Stack direction="row" spacing={1}>
+                      <Tooltip title="刷新数据">
+                        <span>
+                          <Button
+                            variant="outlined"
+                            size="small"
+                            color="primary"
+                            startIcon={<Refresh fontSize="small" />}
+                            disabled={!hasDevices || loadingState === "loading"}
+                            onClick={() => handleFetch("manual")}
+                          >
+                            刷新
+                          </Button>
+                        </span>
+                      </Tooltip>
+                    </Stack>
                   </Stack>
                 </Stack>
-              </Stack>
-            </LocalizationProvider>
+              </LocalizationProvider>
 
-            {!hasDevices && (
-              <Typography
-                variant="caption"
-                color="warning.main"
-                sx={{ mt: 1, display: "block" }}
-              >
-                未选择任何设备，无法获取数据。
-              </Typography>
-            )}
-            {error && (
-              <Typography
-                variant="caption"
-                color="error"
-                sx={{ mt: 1, display: "block" }}
-              >
-                获取数据失败：{error}
-              </Typography>
-            )}
-          </Box>
+              {!hasDevices && (
+                <Typography
+                  variant="caption"
+                  color="warning.main"
+                  sx={{ mt: 1, display: "block" }}
+                >
+                  未选择任何设备，无法获取数据。
+                </Typography>
+              )}
+              {error && (
+                <Typography
+                  variant="caption"
+                  color="error"
+                  sx={{ mt: 1, display: "block" }}
+                >
+                  获取数据失败：{error}
+                </Typography>
+              )}
+            </Box>
 
-          <Divider />
+            <Divider />
 
-          {/* Content */}
-          <Box sx={{ flex: 1, position: "relative", p: 2, overflow: "auto" }}>
-            {loadingState === "loading" && (
-              <Box
-                sx={{
-                  position: "absolute",
-                  inset: 0,
-                  backgroundColor: "rgba(255,255,255,0.6)",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  zIndex: 1,
-                }}
-              >
-                <CircularProgress size={48} />
-              </Box>
-            )}
+            {/* Content */}
+            <Box sx={{ flex: 1, position: "relative", p: 2, overflow: "auto" }}>
+              {loadingState === "loading" && (
+                <Box
+                  sx={{
+                    position: "absolute",
+                    inset: 0,
+                    backgroundColor: "rgba(255,255,255,0.6)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    zIndex: 1,
+                  }}
+                >
+                  <CircularProgress size={48} />
+                </Box>
+              )}
 
-            {activeTab === "chart" ? renderChart() : renderTable()}
+              {activeTab === "chart" ? renderChart() : renderTable()}
+            </Box>
           </Box>
         </Box>
-      </Box>
+      </Draggable>
     </>
   );
 };