From 9c533c0911937086e02d60b4561a4ee0d446068f Mon Sep 17 00:00:00 2001
From: JIANG <huarch97@gmail.com>
Date: Tue, 18 Nov 2025 11:58:32 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=A6=BB=E6=95=A3=E5=BD=A9?=
 =?UTF-8?q?=E8=99=B9=E9=A2=9C=E8=89=B2=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/OlMap/Controls/HistoryDataPanel.tsx | 913 ++++++++++++++++++++
 src/app/OlMap/Controls/StyleEditorPanel.tsx | 160 ++--
 src/app/OlMap/Controls/Toolbar.tsx          |   4 -
 3 files changed, 995 insertions(+), 82 deletions(-)
 create mode 100644 src/app/OlMap/Controls/HistoryDataPanel.tsx

diff --git a/src/app/OlMap/Controls/HistoryDataPanel.tsx b/src/app/OlMap/Controls/HistoryDataPanel.tsx
new file mode 100644
index 0000000..c923edd
--- /dev/null
+++ b/src/app/OlMap/Controls/HistoryDataPanel.tsx
@@ -0,0 +1,913 @@
+"use client";
+
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  Box,
+  Button,
+  Chip,
+  CircularProgress,
+  Divider,
+  IconButton,
+  Stack,
+  Tab,
+  Tabs,
+  Tooltip,
+  Typography,
+  Drawer,
+  Slider,
+} from "@mui/material";
+import {
+  Refresh,
+  ShowChart,
+  TableChart,
+  ChevronLeft,
+  ChevronRight,
+} from "@mui/icons-material";
+import { DataGrid, GridColDef } from "@mui/x-data-grid";
+import { LineChart } from "@mui/x-charts";
+import "dayjs/locale/zh-cn"; // 引入中文包
+import dayjs, { Dayjs } from "dayjs";
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { DateTimePicker, LocalizationProvider } from "@mui/x-date-pickers";
+import config, { NETWORK_NAME } from "@/config/config";
+import { GeoJSON } from "ol/format";
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+type IUser = {
+  id: number;
+  name: string;
+};
+
+export interface TimeSeriesPoint {
+  /** ISO8601 时间戳 */
+  timestamp: string;
+  /** 每个设备对应的值 */
+  values: Record<string, number | null | undefined>;
+}
+
+export interface HistoryDataPanelProps {
+  /** 选中的设备 ID 列表（使用 `ids` 代替，组件不再接收 `deviceIds`） */
+  /** 设备列表：每项包含 id 与可选的 type（例如 'scada' / 'simulation'） */
+  devices?: { id: string; type?: string }[];
+  /** 可选：外部传入的开始时间（若传入会作为默认值） */
+  starttime?: string | Date;
+  /** 可选：外部传入的结束时间（若传入会作为默认值） */
+  endtime?: string | Date;
+  /** 可选：方案名（用于 scheme 类型的查询） */
+  schemeName?: string;
+  /** 自定义数据获取器，默认使用后端 API */
+  fetchTimeSeriesData?: (
+    deviceIds: string[],
+    range: { from: Date; to: Date }
+  ) => Promise<TimeSeriesPoint[]>;
+  /** 可选：控制浮窗显示 */
+  visible?: boolean;
+  /** 默认展示的选项卡 */
+  defaultTab?: "chart" | "table";
+  /** Y 轴数值的小数位数 */
+  fractionDigits?: number;
+  // 清洗功能已移除，相关参数请通过外部面板/服务清洗后再传入
+}
+
+type PanelTab = "chart" | "table";
+
+type LoadingState = "idle" | "loading" | "success" | "error";
+
+/**
+ * 从后端 API 获取 SCADA 数据
+ */
+const fetchFromBackend = async (
+  deviceIds: string[],
+  range: { from: Date; to: Date }
+): Promise<TimeSeriesPoint[]> => {
+  if (deviceIds.length === 0) {
+    return [];
+  }
+
+  const ids = deviceIds.join(",");
+  const starttime = dayjs(range.from).format("YYYY-MM-DD HH:mm:ss");
+  const endtime = dayjs(range.to).format("YYYY-MM-DD HH:mm:ss");
+  // 原始数据接口（清洗功能已移除）
+  const rawSCADAUrl = `${config.BACKEND_URL}/queryscadadatabydeviceidandtimerange/?ids=${ids}&starttime=${starttime}&endtime=${endtime}`;
+  // 模拟数据接口（备用）
+  const simulationSCADAUrl = `${config.BACKEND_URL}/querysimulationscadadatabydeviceidandtimerange/?ids=${ids}&starttime=${starttime}&endtime=${endtime}`;
+
+  try {
+    // 先使用原始数据接口
+    let response = await fetch(rawSCADAUrl);
+    if (!response.ok) {
+      console.warn(
+        `[SCADADataPanel] 原始数据接口返回非 OK：${response.status}, 尝试模拟接口`
+      );
+      // 尝试模拟接口
+      response = await fetch(simulationSCADAUrl);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+    }
+    const data = await response.json();
+    const transformedData = transformBackendData(data, deviceIds);
+    return transformedData;
+  } catch (error) {
+    console.error("[SCADADataPanel] 从后端获取数据失败:", error);
+    throw error;
+  }
+};
+
+/**
+ * 转换后端数据格式
+ * 根据实际后端返回的数据结构进行调整
+ */
+const transformBackendData = (
+  backendData: any,
+  deviceIds: string[]
+): TimeSeriesPoint[] => {
+  // 处理后端返回的对象格式: { deviceId: [{time: "...", value: ...}] }
+  if (backendData && !Array.isArray(backendData)) {
+    // 检查是否是设备ID为键的对象格式
+    const hasDeviceKeys = deviceIds.some((id) => id in backendData);
+
+    if (hasDeviceKeys) {
+      // 获取所有时间点的集合
+      const timeMap = new Map<string, Record<string, number | null>>();
+
+      deviceIds.forEach((deviceId) => {
+        const deviceData = backendData[deviceId];
+        if (Array.isArray(deviceData)) {
+          deviceData.forEach((item: any) => {
+            const timestamp = item.time || item.timestamp || item._time;
+            if (timestamp) {
+              if (!timeMap.has(timestamp)) {
+                timeMap.set(timestamp, {});
+              }
+              const values = timeMap.get(timestamp)!;
+              values[deviceId] =
+                typeof item.value === "number" ? item.value : null;
+            }
+          });
+        }
+      });
+
+      // 转换为 TimeSeriesPoint 数组并按时间排序
+      const result = Array.from(timeMap.entries()).map(
+        ([timestamp, values]) => ({
+          timestamp,
+          values,
+        })
+      );
+
+      result.sort(
+        (a, b) =>
+          new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
+      );
+
+      return result;
+    }
+  }
+  // 默认返回空数组
+  console.warn("[SCADADataPanel] 未知的后端数据格式:", backendData);
+  return [];
+};
+
+const defaultFetcher = fetchFromBackend;
+
+const formatTimestamp = (timestamp: string) =>
+  dayjs(timestamp).tz("Asia/Shanghai").format("YYYY-MM-DD HH:mm");
+
+const ensureValidRange = (
+  from: Dayjs,
+  to: Dayjs
+): { from: Dayjs; to: Dayjs } => {
+  if (from.isAfter(to)) {
+    return { from: to, to: from };
+  }
+  return { from, to };
+};
+
+const buildDataset = (
+  points: TimeSeriesPoint[],
+  deviceIds: string[],
+  fractionDigits: number
+) => {
+  return points.map((point) => {
+    const entry: Record<string, any> = {
+      time: dayjs(point.timestamp).toDate(),
+      label: formatTimestamp(point.timestamp),
+    };
+
+    deviceIds.forEach((id) => {
+      const value = point.values[id];
+      entry[id] =
+        typeof value === "number"
+          ? Number.isFinite(value)
+            ? parseFloat(value.toFixed(fractionDigits))
+            : null
+          : value ?? null;
+    });
+
+    return entry;
+  });
+};
+
+const emptyStateMessages: Record<
+  PanelTab,
+  { title: string; subtitle: string }
+> = {
+  chart: {
+    title: "暂无时序数据",
+    subtitle: "请切换时间段来获取曲线",
+  },
+  table: {
+    title: "暂无表格数据",
+    subtitle: "请切换时间段来获取记录",
+  },
+};
+
+const HistoryDataPanel: React.FC<HistoryDataPanelProps> = ({
+  devices = [],
+  starttime,
+  endtime,
+  schemeName,
+  fetchTimeSeriesData = defaultFetcher,
+  visible = true,
+  defaultTab = "chart",
+  fractionDigits = 2,
+}) => {
+  // 从 devices 中提取 id 列表用于渲染与查询
+  const deviceIds = devices?.map((d) => d.id) ?? [];
+
+  // 清洗功能已移除，直接使用传入的 fetcher
+  const customFetcher = fetchTimeSeriesData;
+
+  const [from, setFrom] = useState<Dayjs>(() =>
+    starttime ? dayjs(starttime) : dayjs().subtract(1, "day")
+  );
+  const [to, setTo] = useState<Dayjs>(() =>
+    endtime ? dayjs(endtime) : dayjs()
+  );
+  const [activeTab, setActiveTab] = useState<PanelTab>(defaultTab);
+  const [timeSeries, setTimeSeries] = useState<TimeSeriesPoint[]>([]);
+  const [loadingState, setLoadingState] = useState<LoadingState>("idle");
+  const [error, setError] = useState<string | null>(null);
+  const [isExpanded, setIsExpanded] = useState<boolean>(true);
+  const [deviceLabels, setDeviceLabels] = useState<Record<string, string>>({});
+  // 清洗相关状态移除
+
+  // 滑块状态：用于图表缩放
+  const [zoomRange, setZoomRange] = useState<[number, number]>([0, 100]);
+
+  // 获取 SCADA 设备信息，生成 deviceLabels
+  useEffect(() => {
+    const fetchDeviceLabels = async () => {
+      try {
+        const url = `${config.MAP_URL}/${config.MAP_WORKSPACE}/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=${config.MAP_WORKSPACE}:geo_scada&outputFormat=application/json`;
+        const response = await fetch(url);
+        if (!response.ok) return;
+
+        const json = await response.json();
+        const features = new GeoJSON().readFeatures(json);
+
+        const labels = features.reduce<Record<string, string>>(
+          (acc, feature) => {
+            const id = feature.get("id") || feature.getId();
+            const name = feature.get("name") || id;
+            acc[id] = name;
+            return acc;
+          },
+          {}
+        );
+
+        setDeviceLabels(labels);
+      } catch (error) {
+        console.error("[SCADADataPanel] 获取设备标签失败:", error);
+      }
+    };
+
+    fetchDeviceLabels();
+  }, []);
+
+  useEffect(() => {
+    setActiveTab(defaultTab);
+  }, [defaultTab]);
+
+  const normalizedRange = useMemo(() => ensureValidRange(from, to), [from, to]);
+
+  const hasDevices = deviceIds.length > 0;
+  const hasData = timeSeries.length > 0;
+
+  const dataset = useMemo(
+    () => buildDataset(timeSeries, deviceIds, fractionDigits),
+    [timeSeries, deviceIds, fractionDigits]
+  );
+
+  // 根据滑块范围过滤数据集
+  const filteredDataset = useMemo(() => {
+    if (dataset.length === 0) return dataset;
+
+    const startIndex = Math.floor((zoomRange[0] / 100) * dataset.length);
+    const endIndex = Math.ceil((zoomRange[1] / 100) * dataset.length);
+
+    return dataset.slice(startIndex, endIndex);
+  }, [dataset, zoomRange]);
+
+  // 重置滑块范围当数据变化时
+  useEffect(() => {
+    setZoomRange([0, 100]);
+  }, [timeSeries]);
+
+  const handleFetch = useCallback(
+    async (reason: string) => {
+      if (!hasDevices) {
+        setTimeSeries([]);
+        setLoadingState("idle");
+        setError(null);
+        return;
+      }
+
+      setLoadingState("loading");
+      setError(null);
+      try {
+        const { from: rangeFrom, to: rangeTo } = normalizedRange;
+        const result = await customFetcher(deviceIds, {
+          from: rangeFrom.toDate(),
+          to: rangeTo.toDate(),
+        });
+        setTimeSeries(result);
+        setLoadingState("success");
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "未知错误");
+        setLoadingState("error");
+      }
+    },
+    [deviceIds, customFetcher, hasDevices, normalizedRange]
+  );
+
+  // 设备变化时自动查询
+  useEffect(() => {
+    if (hasDevices) {
+      handleFetch("device-change");
+    } else {
+      setTimeSeries([]);
+    }
+  }, [deviceIds.join(",")]);
+
+  const columns: GridColDef[] = useMemo(() => {
+    const base: GridColDef[] = [
+      {
+        field: "label",
+        headerName: "时间",
+        minWidth: 180,
+        flex: 1,
+      },
+    ];
+
+    const dynamic = deviceIds.map<GridColDef>((id) => ({
+      field: id,
+      headerName: deviceLabels?.[id] ?? id,
+      minWidth: 140,
+      flex: 1,
+      valueFormatter: (value: any) => {
+        if (value === null || value === undefined) return "--";
+        if (Number.isFinite(Number(value))) {
+          return Number(value).toFixed(fractionDigits);
+        }
+        return String(value);
+      },
+    }));
+
+    return [...base, ...dynamic];
+  }, [deviceIds, deviceLabels, fractionDigits]);
+
+  const rows = useMemo(
+    () =>
+      dataset.map((item, index) => ({
+        id: `${
+          item.time instanceof Date ? item.time.getTime() : index
+        }-${index}`,
+        ...item,
+      })),
+    [dataset]
+  );
+
+  const renderEmpty = () => {
+    const message = emptyStateMessages[activeTab];
+    return (
+      <Box
+        sx={{
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          py: 8,
+          color: "text.secondary",
+          height: "100%",
+        }}
+      >
+        <ShowChart sx={{ fontSize: 64, mb: 2, opacity: 0.3 }} />
+        <Typography variant="h6" gutterBottom sx={{ fontWeight: 500 }}>
+          {message.title}
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          {message.subtitle}
+        </Typography>
+      </Box>
+    );
+  };
+
+  const renderChart = () => {
+    if (!hasData) return renderEmpty();
+
+    // 为每个设备生成独特的颜色和样式
+    const colors = [
+      "#1976d2", // 蓝色
+      "#dc004e", // 粉红色
+      "#ff9800", // 橙色
+      "#4caf50", // 绿色
+      "#9c27b0", // 紫色
+      "#00bcd4", // 青色
+      "#f44336", // 红色
+      "#8bc34a", // 浅绿色
+      "#ff5722", // 深橙色
+      "#3f51b5", // 靛蓝色
+    ];
+
+    // 获取当前显示范围的时间边界
+    const getTimeRangeLabel = () => {
+      if (filteredDataset.length === 0) return "";
+      const firstTime = filteredDataset[0].time;
+      const lastTime = filteredDataset[filteredDataset.length - 1].time;
+      if (firstTime instanceof Date && lastTime instanceof Date) {
+        return `${dayjs(firstTime).format("MM-DD HH:mm")} ~ ${dayjs(
+          lastTime
+        ).format("MM-DD HH:mm")}`;
+      }
+      return "";
+    };
+
+    return (
+      <Box
+        sx={{
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        <Box sx={{ flex: 1 }}>
+          <LineChart
+            dataset={filteredDataset}
+            height={480}
+            margin={{ left: 70, right: 40, top: 30, bottom: 90 }}
+            xAxis={[
+              {
+                dataKey: "time",
+                scaleType: "time",
+                valueFormatter: (value) =>
+                  value instanceof Date
+                    ? dayjs(value).format("MM-DD HH:mm")
+                    : String(value),
+                tickLabelStyle: {
+                  angle: -45,
+                  textAnchor: "end",
+                  fontSize: 11,
+                  fill: "#666",
+                },
+              },
+            ]}
+            yAxis={[
+              {
+                label: "压力/流量值",
+                labelStyle: {
+                  fontSize: 13,
+                  fill: "#333",
+                  fontWeight: 500,
+                },
+                tickLabelStyle: {
+                  fontSize: 11,
+                  fill: "#666",
+                },
+              },
+            ]}
+            series={deviceIds.map((id, index) => ({
+              dataKey: id,
+              label: deviceLabels?.[id] ?? id,
+              showMark: dataset.length < 50,
+              curve: "catmullRom",
+              color: colors[index % colors.length],
+              valueFormatter: (value: number | null) =>
+                value !== null ? value.toFixed(fractionDigits) : "--",
+              area: false,
+              stack: undefined,
+            }))}
+            grid={{ vertical: true, horizontal: true }}
+            sx={{
+              "& .MuiLineElement-root": {
+                strokeWidth: 2.5,
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+              },
+              "& .MuiMarkElement-root": {
+                scale: "0.8",
+                strokeWidth: 2,
+              },
+              "& .MuiChartsAxis-line": {
+                stroke: "#e0e0e0",
+                strokeWidth: 1,
+              },
+              "& .MuiChartsAxis-tick": {
+                stroke: "#e0e0e0",
+                strokeWidth: 1,
+              },
+              "& .MuiChartsGrid-line": {
+                stroke: "#d0d0d0",
+                strokeWidth: 0.8,
+                strokeDasharray: "4 4",
+              },
+            }}
+            slotProps={{
+              legend: {
+                direction: "row",
+                position: { horizontal: "middle", vertical: "bottom" },
+                padding: { bottom: 2, left: 0, right: 0 },
+                itemMarkWidth: 16,
+                itemMarkHeight: 3,
+                markGap: 8,
+                itemGap: 16,
+                labelStyle: {
+                  fontSize: 12,
+                  fill: "#333",
+                  fontWeight: 500,
+                },
+              },
+              loadingOverlay: {
+                style: { backgroundColor: "rgba(255, 255, 255, 0.7)" },
+              },
+            }}
+            tooltip={{
+              trigger: "axis",
+            }}
+          />
+        </Box>
+
+        {/* 时间范围滑块 */}
+        <Box sx={{ px: 3, pb: 2, pt: 1 }}>
+          <Stack direction="row" spacing={2} alignItems="center">
+            <Typography
+              variant="body2"
+              sx={{ minWidth: 60, color: "text.secondary", fontSize: "0.8rem" }}
+            >
+              时间范围
+            </Typography>
+            <Slider
+              value={zoomRange}
+              onChange={(_, newValue) =>
+                setZoomRange(newValue as [number, number])
+              }
+              valueLabelDisplay="auto"
+              valueLabelFormat={(value) => {
+                const index = Math.floor((value / 100) * dataset.length);
+                if (dataset[index] && dataset[index].time instanceof Date) {
+                  return dayjs(dataset[index].time).format("MM-DD HH:mm");
+                }
+                return `${value}%`;
+              }}
+              marks={[
+                {
+                  value: 0,
+                  label:
+                    dataset.length > 0 && dataset[0].time instanceof Date
+                      ? dayjs(dataset[0].time).format("MM-DD HH:mm")
+                      : "起始",
+                },
+                {
+                  value: 100,
+                  label:
+                    dataset.length > 0 &&
+                    dataset[dataset.length - 1].time instanceof Date
+                      ? dayjs(dataset[dataset.length - 1].time).format(
+                          "MM-DD HH:mm"
+                        )
+                      : "结束",
+                },
+              ]}
+              sx={{
+                flex: 1,
+                "& .MuiSlider-thumb": {
+                  width: 16,
+                  height: 16,
+                },
+                "& .MuiSlider-markLabel": {
+                  fontSize: "0.7rem",
+                  color: "text.secondary",
+                },
+              }}
+            />
+            <Button
+              size="small"
+              variant="outlined"
+              onClick={() => setZoomRange([0, 100])}
+              sx={{ minWidth: 60, fontSize: "0.75rem" }}
+            >
+              重置
+            </Button>
+          </Stack>
+          {getTimeRangeLabel() && (
+            <Typography
+              variant="caption"
+              sx={{
+                color: "primary.main",
+                display: "block",
+                textAlign: "center",
+                mt: 0.5,
+              }}
+            >
+              当前显示: {getTimeRangeLabel()} (共 {filteredDataset.length}{" "}
+              个数据点)
+            </Typography>
+          )}
+        </Box>
+      </Box>
+    );
+  };
+
+  const renderTable = () => {
+    if (!hasData) return renderEmpty();
+
+    console.debug("[SCADADataPanel] 表格数据:", {
+      rowsCount: rows.length,
+      columnsCount: columns.length,
+      sampleRow: rows[0],
+      columns: columns.map((c) => c.field),
+    });
+
+    return (
+      <DataGrid
+        rows={rows}
+        columns={columns}
+        columnBufferPx={100}
+        initialState={{
+          pagination: {
+            paginationModel: { pageSize: 50, page: 0 },
+          },
+        }}
+        pageSizeOptions={[25, 50, 100]}
+        sx={{
+          border: "none",
+          height: "100%",
+          "& .MuiDataGrid-cell": {
+            borderColor: "#f0f0f0",
+          },
+          "& .MuiDataGrid-columnHeaders": {
+            backgroundColor: "#fafafa",
+            fontWeight: 600,
+            fontSize: "0.875rem",
+          },
+          "& .MuiDataGrid-row:hover": {
+            backgroundColor: "#f5f5f5",
+          },
+          "& .MuiDataGrid-columnHeaderTitle": {
+            fontWeight: 600,
+          },
+        }}
+        disableRowSelectionOnClick
+      />
+    );
+  };
+
+  return (
+    <>
+      {/* 收起时的触发按钮 */}
+      {!isExpanded && hasDevices && (
+        <Box
+          className="absolute top-20 right-4 bg-white shadow-2xl rounded-lg cursor-pointer hover:shadow-xl transition-all duration-300 opacity-95 hover:opacity-100"
+          onClick={() => setIsExpanded(true)}
+          sx={{ zIndex: 1300 }}
+        >
+          <Box className="flex flex-col items-center py-3 px-3 gap-1">
+            <ShowChart className="text-[#257DD4] w-5 h-5" />
+            <Typography
+              variant="caption"
+              className="text-gray-700 font-semibold my-1 text-xs"
+              style={{ writingMode: "vertical-rl" }}
+            >
+              历史数据
+            </Typography>
+            <ChevronLeft className="text-gray-600 w-4 h-4" />
+          </Box>
+        </Box>
+      )}
+
+      {/* 主面板 */}
+      <Drawer
+        anchor="right"
+        open={isExpanded && visible}
+        variant="persistent"
+        hideBackdrop
+        sx={{
+          width: 0,
+          flexShrink: 0,
+          "& .MuiDrawer-paper": {
+            width: "min(920px, calc(100vw - 2rem))",
+            boxSizing: "border-box",
+            position: "absolute",
+            top: 80,
+            right: 16,
+            height: "860px",
+            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: "transform 0.3s ease-in-out, opacity 0.3s ease-in-out",
+            border: "none",
+            "&:hover": {
+              opacity: 1,
+            },
+          },
+        }}
+      >
+        <Box className="flex flex-col h-full bg-white rounded-xl overflow-hidden">
+          {/* Header */}
+          <Box
+            sx={{
+              p: 2,
+              borderBottom: 1,
+              borderColor: "divider",
+              backgroundColor: "primary.main",
+              color: "primary.contrastText",
+            }}
+          >
+            <Stack
+              direction="row"
+              alignItems="center"
+              justifyContent="space-between"
+            >
+              <Stack direction="row" spacing={1} alignItems="center">
+                <ShowChart fontSize="small" />
+                <Typography variant="h6" sx={{ fontWeight: "bold" }}>
+                  SCADA 历史数据
+                </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}>
+                <Tooltip title="收起">
+                  <IconButton
+                    size="small"
+                    onClick={() => setIsExpanded(false)}
+                    sx={{ color: "primary.contrastText" }}
+                  >
+                    <ChevronRight fontSize="small" />
+                  </IconButton>
+                </Tooltip>
+              </Stack>
+            </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) =>
+                      value && dayjs.isDayjs(value) && setFrom(value)
+                    }
+                    onAccept={(value) => {
+                      if (value && dayjs.isDayjs(value) && hasDevices) {
+                        handleFetch("date-change");
+                      }
+                    }}
+                    maxDateTime={to}
+                    slotProps={{
+                      textField: { fullWidth: true, size: "small" },
+                    }}
+                  />
+                  <DateTimePicker
+                    label="结束时间"
+                    value={to}
+                    onChange={(value) =>
+                      value && dayjs.isDayjs(value) && setTo(value)
+                    }
+                    onAccept={(value) => {
+                      if (value && dayjs.isDayjs(value) && hasDevices) {
+                        handleFetch("date-change");
+                      }
+                    }}
+                    minDateTime={from}
+                    slotProps={{
+                      textField: { fullWidth: true, size: "small" },
+                    }}
+                  />
+                </Stack>
+                <Stack
+                  direction="row"
+                  spacing={1}
+                  alignItems="center"
+                  justifyContent="space-between"
+                >
+                  <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>
+            </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>
+
+          <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>
+            )}
+
+            {activeTab === "chart" ? renderChart() : renderTable()}
+          </Box>
+        </Box>
+      </Drawer>
+    </>
+  );
+};
+
+export default HistoryDataPanel;
diff --git a/src/app/OlMap/Controls/StyleEditorPanel.tsx b/src/app/OlMap/Controls/StyleEditorPanel.tsx
index 4483bde..fb9e1f0 100644
--- a/src/app/OlMap/Controls/StyleEditorPanel.tsx
+++ b/src/app/OlMap/Controls/StyleEditorPanel.tsx
@@ -233,21 +233,11 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
     (segments: number): string[] => {
       const baseColors =
         RAINBOW_PALETTES[styleConfig.rainbowPaletteIndex].colors;
-
-      if (segments <= baseColors.length) {
-        // 如果分段数小于等于基础颜色数,均匀选取
-        const step = baseColors.length / segments;
-        return Array.from(
-          { length: segments },
-          (_, i) => baseColors[Math.floor(i * step)]
-        );
-      } else {
-        // 如果分段数大于基础颜色数,重复使用
-        return Array.from(
-          { length: segments },
-          (_, i) => baseColors[i % baseColors.length]
-        );
-      }
+      // 严格按顺序返回 N 个颜色
+      return Array.from(
+        { length: segments },
+        (_, i) => baseColors[i % baseColors.length]
+      );
     },
     [styleConfig.rainbowPaletteIndex]
   );
@@ -954,6 +944,25 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
             }
           >
             {GRADIENT_PALETTES.map((p, idx) => {
+              const numColors = styleConfig.segments + 1;
+              const previewColors = Array.from(
+                { length: numColors },
+                (_, i) => {
+                  const ratio = numColors > 1 ? i / (numColors - 1) : 1;
+                  const startColor = parseColor(p.start);
+                  const endColor = parseColor(p.end);
+                  const r = Math.round(
+                    startColor.r + (endColor.r - startColor.r) * ratio
+                  );
+                  const g = Math.round(
+                    startColor.g + (endColor.g - startColor.g) * ratio
+                  );
+                  const b = Math.round(
+                    startColor.b + (endColor.b - startColor.b) * ratio
+                  );
+                  return `rgba(${r}, ${g}, ${b}, 1)`;
+                }
+              );
               return (
                 <MenuItem key={idx} value={idx}>
                   <Box
@@ -965,11 +974,22 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
                         width: "80%",
                         height: 16,
                         borderRadius: 2,
-                        background: `linear-gradient(90deg, ${p.start}, ${p.end})`,
+                        display: "flex",
+                        overflow: "hidden",
                         marginRight: 1,
                         border: "1px solid #ccc",
                       }}
-                    />
+                    >
+                      {previewColors.map((color, colorIdx) => (
+                        <Box
+                          key={colorIdx}
+                          sx={{
+                            flex: 1,
+                            backgroundColor: color,
+                          }}
+                        />
+                      ))}
+                    </Box>
                   </Box>
                 </MenuItem>
               );
@@ -997,23 +1017,13 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
             }
           >
             {RAINBOW_PALETTES.map((p, idx) => {
-              // 根据当前分段数生成该方案的预览颜色
+              // 根据当前分段数+1生成该方案的预览颜色
               const baseColors = p.colors;
-              const segments = styleConfig.segments;
-              let previewColors: string[];
-
-              if (segments <= baseColors.length) {
-                const step = baseColors.length / segments;
-                previewColors = Array.from(
-                  { length: segments },
-                  (_, i) => baseColors[Math.floor(i * step)]
-                );
-              } else {
-                previewColors = Array.from(
-                  { length: segments },
-                  (_, i) => baseColors[i % baseColors.length]
-                );
-              }
+              const numColors = styleConfig.segments + 1;
+              const previewColors = Array.from(
+                { length: numColors },
+                (_, i) => baseColors[i % baseColors.length]
+              );
 
               return (
                 <MenuItem key={idx} value={idx}>
@@ -1356,54 +1366,48 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
         {styleConfig.classificationMethod === "custom_breaks" && (
           <Box className="mt-3 p-2 bg-gray-50 rounded">
             <Typography variant="subtitle2" gutterBottom>
-              手动设置区间阈值（按升序填写，最小值 &gt;= 0）
+              手动设置区间阈值（按升序填写，最小值 {">="} 0）
             </Typography>
             <Box className="flex flex-col gap-2">
-              {Array.from({ length: styleConfig.segments + 1 }).map(
-                (_, idx) => (
-                  <TextField
-                    key={idx}
-                    label={`阈值 ${idx + 1}`}
-                    type="number"
-                    size="small"
-                    slotProps={{ input: { inputProps: { min: 0, step: 0.1 } } }}
-                    value={
-                      (styleConfig.customBreaks &&
-                        styleConfig.customBreaks[idx]) ??
-                      ""
-                    }
-                    onChange={(e) => {
-                      const v = parseFloat(e.target.value);
-                      setStyleConfig((prev) => {
-                        const prevBreaks = prev.customBreaks
-                          ? [...prev.customBreaks]
-                          : [];
-                        // 保证长度
-                        while (prevBreaks.length < styleConfig.segments + 1)
-                          prevBreaks.push(0);
-                        prevBreaks[idx] = isNaN(v) ? 0 : Math.max(0, v);
-                        return { ...prev, customBreaks: prevBreaks };
-                      });
-                    }}
-                    onBlur={() => {
-                      // on blur 保证升序
-                      setStyleConfig((prev) => {
-                        const prevBreaks = (prev.customBreaks || []).slice(
-                          0,
-                          styleConfig.segments + 1
-                        );
-                        prevBreaks.sort((a, b) => a - b);
-                        return { ...prev, customBreaks: prevBreaks };
-                      });
-                    }}
-                  />
-                )
-              )}
+              {Array.from({ length: styleConfig.segments }).map((_, idx) => (
+                <TextField
+                  key={idx}
+                  label={`阈值 ${idx + 1}`}
+                  type="number"
+                  size="small"
+                  slotProps={{ input: { inputProps: { min: 0, step: 0.1 } } }}
+                  value={
+                    (styleConfig.customBreaks &&
+                      styleConfig.customBreaks[idx]) ??
+                    ""
+                  }
+                  onChange={(e) => {
+                    const v = parseFloat(e.target.value);
+                    setStyleConfig((prev) => {
+                      const prevBreaks = prev.customBreaks
+                        ? [...prev.customBreaks]
+                        : [];
+                      // 保证长度
+                      while (prevBreaks.length < styleConfig.segments + 1)
+                        prevBreaks.push(0);
+                      prevBreaks[idx] = isNaN(v) ? 0 : Math.max(0, v);
+                      return { ...prev, customBreaks: prevBreaks };
+                    });
+                  }}
+                  onBlur={() => {
+                    // on blur 保证升序
+                    setStyleConfig((prev) => {
+                      const prevBreaks = (prev.customBreaks || []).slice(
+                        0,
+                        styleConfig.segments + 1
+                      );
+                      prevBreaks.sort((a, b) => a - b);
+                      return { ...prev, customBreaks: prevBreaks };
+                    });
+                  }}
+                />
+              ))}
             </Box>
-            <Typography variant="caption" color="textSecondary">
-              注: 阈值数量由分类数量决定 (segments + 1)。例如 segments=5 将显示
-              6 个阈值。
-            </Typography>
           </Box>
         )}
         {/* 颜色方案 */}
diff --git a/src/app/OlMap/Controls/Toolbar.tsx b/src/app/OlMap/Controls/Toolbar.tsx
index 25c0a66..a4860dd 100644
--- a/src/app/OlMap/Controls/Toolbar.tsx
+++ b/src/app/OlMap/Controls/Toolbar.tsx
@@ -116,10 +116,6 @@ const Toolbar: React.FC<ToolbarProps> = ({ hiddenButtons, queryType }) => {
       layerName: state.layerName,
       layerId: state.layerId,
     }));
-  useEffect(() => {
-    console.log(layerStyleStates);
-    console.log("Active Legends:", activeLegendConfigs);
-  }, [layerStyleStates]);
   // 创建高亮图层
   useEffect(() => {
     if (!map) return;