feat(history): add aligned online simulation action

Reuse the existing simulation endpoint and align backfill to the hydraulic timestep. Block backfill when event metadata fails so the fallback query window cannot be calculated as event history.

src/components/olmap/core/Controls/HistoryDataPanel.test.ts

@@ -1,21 +1,41 @@
 import React from "react";
-import { render, waitFor } from "@testing-library/react";
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import dayjs from "dayjs";
+import ReactECharts from "echarts-for-react";
 import { apiFetch } from "@/lib/apiFetch";
+import { getAnalysisScheme, toAnalysisSchemeRecord } from "@/lib/analysisRuns";
+import { useAccessStore } from "@/store/accessStore";
+import { useProjectStore } from "@/store/projectStore";
 import HistoryDataPanel, { fetchHistoryData } from "./HistoryDataPanel";
 
 jest.mock("@/lib/apiFetch", () => ({
   apiFetch: jest.fn(),
 }));
+jest.mock("@/lib/analysisRuns", () => ({
+  ...jest.requireActual("@/lib/analysisRuns"),
+  getAnalysisScheme: jest.fn(),
+}));
 
 jest.mock("@components/olmap/core/MapComponent", () => ({
   useData: () => null,
 }));
 
 jest.mock("@mui/x-date-pickers", () => ({
-  DateTimePicker: () => null,
+  DateTimePicker: ({ label, value, onChange }: {
+    label: string; value: dayjs.Dayjs; onChange: (value: dayjs.Dayjs) => void;
+  }) => React.createElement("input", {
+    "aria-label": label,
+    value: value.toISOString(),
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => onChange(dayjs(event.target.value)),
+  }),
   LocalizationProvider: ({ children }: { children: React.ReactNode }) => children,
 }));
-jest.mock("echarts-for-react", () => () => null);
+jest.mock("echarts-for-react", () => jest.fn(() => null));
+jest.mock("./useTimelineTimeConfig", () => ({
+  useTimelineTimeConfig: () => ({
+    durationMinutes: 1440, stepMinutes: 15, properties: { "HYDRAULIC TIMESTEP": "0:15" },
+  }),
+}));
 
 const jsonResponse = (payload: unknown, status = 200) =>
   ({
@@ -66,14 +86,63 @@ describe("fetchHistoryData", () => {
       "99dd4142-368b-54cb-bfca-d59ee48f6298",
     );
 
-    expect(apiFetch).toHaveBeenCalledTimes(1);
+    expect(apiFetch).toHaveBeenCalledTimes(2);
-    const [, init] = jest.mocked(apiFetch).mock.calls[0];
+    const bodies = jest.mocked(apiFetch).mock.calls.map(([, init]) => JSON.parse(String(init?.body)));
-    expect(JSON.parse(String(init?.body))).toMatchObject({
+    expect(bodies[0]).toMatchObject({ mode: "realtime_comparison" });
+    expect(bodies[0]).not.toHaveProperty("run_id");
+    expect(bodies[1]).toMatchObject({
       mode: "analysis_comparison",
       run_id: "99dd4142-368b-54cb-bfca-d59ee48f6298",
     });
   });
 
+  it("combines element simulations without SCADA and deduplicates monitoring", async () => {
+    const base = {
+      element_id: "P-1", element_type: "pipe", device_id: null,
+      metric: "flow", source_unit: "L/s", display_unit: "m³/h", unit_inferred: false,
+    };
+    const observed = {
+      ...base, device_id: "F-1", source: "scada_raw",
+      points: [{ time: "2026-08-17T09:30:00Z", value: 5 }],
+    };
+    const targets: [string, string][] = [["P-1", "pipe"], ["J-1", "junction"]];
+    jest.mocked(apiFetch).mockImplementation(async (_url, init) => {
+      const { mode } = JSON.parse(String(init?.body));
+      return jsonResponse({ series: mode === "analysis_comparison" ? [
+        observed,
+        { ...base, source: "analysis_simulation", points: [
+          { time: "2026-08-17T09:30:00Z", value: 20 },
+        ] },
+      ] : [
+        observed,
+        { ...base, source: "realtime_simulation", points: [
+          { time: "2026-08-17T09:00:00Z", value: 10 },
+          { time: "2026-08-17T10:00:00Z", value: 12 },
+        ] },
+        { ...base, element_id: "J-1", element_type: "junction", metric: "pressure",
+          source_unit: "m", source: "realtime_simulation", points: [
+            { time: "2026-08-17T09:00:00Z", value: 30 },
+          ] },
+      ] });
+    });
+    const result = await fetchHistoryData(targets, range, "scheme", "run-1");
+    expect(result.series).toHaveLength(4);
+    expect(result.points[0].values).toEqual({ '["pipe","P-1","realtime_simulation"]': 36, '["junction","J-1","realtime_simulation"]': 30 });
+    expect(result.points[1].values['["pipe","P-1","analysis_simulation"]']).toBe(72);
+    expect(result.points[2].values['["pipe","P-1","realtime_simulation"]']).toBeCloseTo(43.2);
+    expect(apiFetch).toHaveBeenCalledTimes(2);
+    for (const [, init] of jest.mocked(apiFetch).mock.calls) {
+      expect(JSON.parse(String(init?.body)).elements).toHaveLength(2);
+    }
+  });
+
+  it("reports an aggregate request failure instead of showing an incomplete comparison", async () => {
+    jest.mocked(apiFetch).mockResolvedValueOnce(jsonResponse({ series: [] }))
+      .mockResolvedValueOnce(jsonResponse({ detail: "analysis unavailable" }, 503));
+    await expect(fetchHistoryData([["P-1", "pipe"]], range, "scheme", "run-1"))
+      .rejects.toThrow("analysis unavailable");
+  });
+
   it("rejects oversized element selections before issuing requests", async () => {
     jest.mocked(apiFetch).mockResolvedValue(jsonResponse({}));
     const featureInfos = Array.from(
@@ -103,10 +172,20 @@ describe("fetchHistoryData", () => {
   });
 });
 
+const eventRun = (runId = "run-1", startedAt = "2026-08-17T09:00:00Z") =>
+  toAnalysisSchemeRecord({
+    run_id: runId, name: "event", run_type: "burst_analysis", created_by: "alice",
+    created_at: "2026-11-03T00:00:00Z", started_at: startedAt,
+    status: "completed", parameters: { modify_total_duration: 3600 },
+  });
+
 describe("HistoryDataPanel requests", () => {
   beforeEach(() => {
     jest.clearAllMocks();
     jest.mocked(apiFetch).mockResolvedValue(jsonResponse({ series: [] }));
+    jest.mocked(getAnalysisScheme).mockReset().mockResolvedValue(eventRun());
+    useAccessStore.setState({ permissions: ["simulation.run"], loading: false });
+    useProjectStore.getState().setCurrentProject("project-1", "network-1");
   });
 
   afterEach(() => jest.clearAllMocks());
@@ -137,4 +216,193 @@ describe("HistoryDataPanel requests", () => {
     );
     await waitFor(() => expect(apiFetch).toHaveBeenCalledTimes(2));
   });
+
+  const props = {
+    featureInfos: [["P-1", "pipe"]] as [string, string][],
+    type: "scheme" as const, runId: "run-1", onClose: jest.fn(),
+  };
+
+  it("initializes a historical event with one hour of context on both sides", async () => {
+    render(React.createElement(HistoryDataPanel, props));
+    await waitFor(() => expect(apiFetch).toHaveBeenCalledTimes(2));
+    for (const [, init] of jest.mocked(apiFetch).mock.calls) {
+      expect(JSON.parse(String(init?.body))).toMatchObject({
+        start_time: "2026-08-17T08:00:00.000Z", end_time: "2026-08-17T11:00:00.000Z",
+      });
+    }
+    expect(screen.getByText(/事件方案时段：2026-08-17 17:00/)).toBeInTheDocument();
+    expect(screen.getByLabelText("开始时间")).toHaveValue("2026-08-17T08:00:00.000Z");
+  });
+
+  it("keeps explicit query dates and issues one pair of requests per date change", async () => {
+    render(React.createElement(HistoryDataPanel, {
+      ...props, start_time: "2026-08-17T07:00:00Z", end_time: "2026-08-17T12:00:00Z",
+    }));
+    await waitFor(() => expect(apiFetch).toHaveBeenCalledTimes(2));
+    fireEvent.change(screen.getByLabelText("开始时间"), { target: { value: "2026-08-17T06:00:00Z" } });
+    await waitFor(() => expect(apiFetch).toHaveBeenCalledTimes(4));
+    expect(JSON.parse(String(jest.mocked(apiFetch).mock.calls[2][1]?.body))).toMatchObject({
+      start_time: "2026-08-17T06:00:00.000Z", end_time: "2026-08-17T12:00:00.000Z",
+    });
+    expect(jest.mocked(apiFetch).mock.calls[0][1]?.signal?.aborted).toBe(true);
+    expect(getAnalysisScheme).toHaveBeenCalledTimes(1);
+  });
+
+  it("ignores a stale scheme response after switching events", async () => {
+    let resolveOld!: (value: ReturnType<typeof eventRun>) => void;
+    jest.mocked(getAnalysisScheme).mockReturnValueOnce(new Promise((resolve) => { resolveOld = resolve; }))
+      .mockResolvedValueOnce(eventRun("run-2", "2026-08-18T09:00:00Z"));
+    const { rerender } = render(React.createElement(HistoryDataPanel, props));
+    expect(apiFetch).not.toHaveBeenCalled();
+    rerender(React.createElement(HistoryDataPanel, { ...props, runId: "run-2" }));
+    await waitFor(() => expect(apiFetch).toHaveBeenCalledTimes(2));
+    await act(async () => { resolveOld(eventRun()); });
+    expect(apiFetch).toHaveBeenCalledTimes(2);
+    expect(JSON.parse(String(jest.mocked(apiFetch).mock.calls[1][1]?.body))).toMatchObject({
+      run_id: "run-2", start_time: "2026-08-18T08:00:00.000Z",
+    });
+  });
+
+  it("preserves the manually chosen end date when only the start date prop changes", async () => {
+    const partialProps = { ...props, type: "none" as const, start_time: "2026-08-17T07:00:00Z" };
+    const { rerender } = render(React.createElement(HistoryDataPanel, partialProps));
+    await waitFor(() => expect(apiFetch).toHaveBeenCalledTimes(1));
+    fireEvent.change(screen.getByLabelText("结束时间"), { target: { value: "2026-08-17T12:00:00Z" } });
+    await waitFor(() => expect(apiFetch).toHaveBeenCalledTimes(2));
+    rerender(React.createElement(HistoryDataPanel, { ...partialProps, start_time: "2026-08-17T06:00:00Z" }));
+    await waitFor(() => expect(apiFetch).toHaveBeenCalledTimes(3));
+    expect(screen.getByLabelText("结束时间")).toHaveValue("2026-08-17T12:00:00.000Z");
+    expect(JSON.parse(String(jest.mocked(apiFetch).mock.calls[2][1]?.body))).toMatchObject({
+      start_time: "2026-08-17T06:00:00.000Z", end_time: "2026-08-17T12:00:00.000Z",
+    });
+  });
+
+  it("queries online element readings for an analysis without hydraulic results", async () => {
+    jest.mocked(getAnalysisScheme).mockResolvedValue({ ...eventRun(), run_type: "burst_detection" });
+    render(React.createElement(HistoryDataPanel, props));
+    await waitFor(() => expect(apiFetch).toHaveBeenCalledTimes(1));
+    const body = JSON.parse(String(jest.mocked(apiFetch).mock.calls[0][1]?.body));
+    expect(body.mode).toBe("realtime_comparison");
+    expect(body).not.toHaveProperty("run_id");
+  });
+
+  it("does not restore stale curves after the selected elements are cleared", async () => {
+    const pending: Array<(value: Response) => void> = [];
+    jest.mocked(apiFetch).mockImplementation(() => new Promise((resolve) => { pending.push(resolve); }));
+    const { rerender } = render(React.createElement(HistoryDataPanel, props));
+    await waitFor(() => expect(apiFetch).toHaveBeenCalledTimes(2));
+    rerender(React.createElement(HistoryDataPanel, { ...props, featureInfos: [] }));
+    expect(jest.mocked(apiFetch).mock.calls[0][1]?.signal?.aborted).toBe(true);
+    expect(jest.mocked(apiFetch).mock.calls[1][1]?.signal?.aborted).toBe(true);
+    await act(async () => {
+      pending[0](jsonResponse({ series: [{
+        element_id: "P-1", element_type: "pipe", device_id: null, metric: "flow",
+        source: "realtime_simulation", source_unit: "m3/h", display_unit: "m³/h",
+        unit_inferred: false, points: [{ time: "2026-08-17T09:00:00Z", value: 10 }],
+      }] }));
+      pending[1](jsonResponse({ series: [] }));
+    });
+    expect(ReactECharts).not.toHaveBeenCalled();
+    expect(screen.getByText("尚未选择地图要素")).toBeInTheDocument();
+  });
+
+  it("allows a failed event metadata query to be retried", async () => {
+    jest.mocked(getAnalysisScheme).mockRejectedValueOnce(new Error("unavailable"));
+    render(React.createElement(HistoryDataPanel, props));
+    await screen.findByText(/无法读取事件方案/);
+    expect(apiFetch).not.toHaveBeenCalled();
+    expect(screen.getByRole("button", { name: "在线模拟" })).toBeDisabled();
+    fireEvent.click(screen.getByRole("button", { name: "刷新" }));
+    await waitFor(() => expect(apiFetch).toHaveBeenCalledTimes(2));
+    expect(getAnalysisScheme).toHaveBeenCalledTimes(2);
+  });
+
+  it("plots native timestamps and explicit gaps with the event interval marked", async () => {
+    const series = {
+      element_id: "P-1", element_type: "pipe", device_id: null, metric: "flow",
+      source_unit: "m3/h", display_unit: "m³/h", unit_inferred: false,
+    };
+    jest.mocked(apiFetch).mockImplementation(async (_url, init) => {
+      const { mode } = JSON.parse(String(init?.body));
+      return jsonResponse({ series: [{ ...series,
+        source: mode === "analysis_comparison" ? "analysis_simulation" : "realtime_simulation",
+        points: mode === "analysis_comparison" ? [
+          { time: "2026-08-17T09:15:00Z", value: 8 },
+        ] : [
+          { time: "2026-08-17T08:00:00Z", value: 10 },
+          { time: "2026-08-17T09:00:00Z", value: null },
+          { time: "2026-08-17T11:00:00Z", value: 12 },
+        ],
+      }] });
+    });
+    render(React.createElement(HistoryDataPanel, props));
+    await waitFor(() => expect(ReactECharts).toHaveBeenCalled());
+    const option = jest.mocked(ReactECharts).mock.calls.at(-1)![0].option as any;
+    expect(option.xAxis).toMatchObject({ type: "time", min: Date.parse("2026-08-17T08:00:00Z"), max: Date.parse("2026-08-17T11:00:00Z") });
+    expect(option.series[0].connectNulls).toBe(false);
+    expect(option.series[0].data).toEqual([
+      [Date.parse("2026-08-17T08:00:00Z"), 10],
+      [Date.parse("2026-08-17T09:00:00Z"), null],
+      [Date.parse("2026-08-17T11:00:00Z"), 12],
+    ]);
+    expect(option.series[0].markArea.data[0]).toEqual([
+      { name: "事件方案时段", xAxis: Date.parse("2026-08-17T09:00:00Z") },
+      { xAxis: Date.parse("2026-08-17T10:00:00Z") },
+    ]);
+    expect(option.series[1].data).toEqual([[Date.parse("2026-08-17T09:15:00Z"), 8]]);
+  });
+
+  it("snaps off-step event context without changing the actual event marker", async () => {
+    jest.mocked(getAnalysisScheme).mockResolvedValue(eventRun("run-1", "2026-07-30T05:38:00Z"));
+    render(React.createElement(HistoryDataPanel, props));
+    await waitFor(() => expect(apiFetch).toHaveBeenCalledTimes(2));
+    expect(JSON.parse(String(jest.mocked(apiFetch).mock.calls[0][1]?.body))).toMatchObject({
+      start_time: "2026-07-30T04:30:00.000Z", end_time: "2026-07-30T07:45:00.000Z",
+    });
+    expect(screen.getByText(/事件方案时段：2026-07-30 13:38/)).toBeInTheDocument();
+  });
+
+  it("runs online simulation once, shows progress, then refreshes both history sources", async () => {
+    let finishSimulation!: (value: Response) => void;
+    jest.mocked(apiFetch).mockImplementation(async (url) => {
+      if (String(url).endsWith("/network-options/time")) return jsonResponse({ "HYDRAULIC TIMESTEP": "0:15" });
+      if (String(url).endsWith("/simulation-runs")) return new Promise((resolve) => { finishSimulation = resolve; });
+      return jsonResponse({ series: [] });
+    });
+    render(React.createElement(HistoryDataPanel, props));
+    const button = screen.getByRole("button", { name: "在线模拟" });
+    await waitFor(() => expect(button).toBeEnabled());
+    fireEvent.click(button);
+    await screen.findByText("正在计算在线模拟数据，完成后将自动刷新图表。");
+    expect(screen.getByRole("button", { name: "模拟中…" })).toBeDisabled();
+    await waitFor(() => expect(finishSimulation).toBeDefined());
+    fireEvent.click(button);
+    expect(jest.mocked(apiFetch).mock.calls.filter(([url]) => String(url).endsWith("/simulation-runs"))).toHaveLength(1);
+    await act(async () => { finishSimulation(jsonResponse({ status: "success" })); });
+    await waitFor(() => expect(jest.mocked(apiFetch).mock.calls.filter(([url]) => String(url).endsWith("/element-history/query"))).toHaveLength(4));
+    expect(screen.getByRole("button", { name: "在线模拟" })).toBeEnabled();
+  });
+
+  it("disables the write action for a viewer while allowing history reads", async () => {
+    useAccessStore.setState({ permissions: ["simulation.view"] });
+    render(React.createElement(HistoryDataPanel, props));
+    await waitFor(() => expect(apiFetch).toHaveBeenCalledTimes(2));
+    expect(screen.getByRole("button", { name: "在线模拟" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "刷新" })).toBeEnabled();
+  });
+
+  it("shows a simulation failure without retrying or claiming data was refreshed", async () => {
+    jest.mocked(apiFetch).mockImplementation(async (url) => {
+      if (String(url).endsWith("/network-options/time")) return jsonResponse({ "HYDRAULIC TIMESTEP": "0:15" });
+      if (String(url).endsWith("/simulation-runs")) return jsonResponse({ detail: "计算服务不可用" }, 503);
+      return jsonResponse({ series: [] });
+    });
+    render(React.createElement(HistoryDataPanel, props));
+    const button = screen.getByRole("button", { name: "在线模拟" });
+    await waitFor(() => expect(button).toBeEnabled());
+    fireEvent.click(button);
+    expect(await screen.findByRole("alert")).toHaveTextContent("计算服务不可用");
+    expect(jest.mocked(apiFetch).mock.calls.filter(([url]) => String(url).endsWith("/simulation-runs"))).toHaveLength(1);
+    expect(jest.mocked(apiFetch).mock.calls.filter(([url]) => String(url).endsWith("/element-history/query"))).toHaveLength(2);
+  });
 });

src/components/olmap/core/Controls/HistoryDataPanel.tsx

@@ -22,7 +22,7 @@ import {
   Tooltip,
   Typography,
 } from "@mui/material";
-import { Close, Refresh, ShowChart, TableChart } from "@mui/icons-material";
+import { Close, PlayArrow, Refresh, ShowChart, TableChart } from "@mui/icons-material";
 import { DataGrid, GridColDef } from "@mui/x-data-grid";
 import { zhCN } from "@mui/x-data-grid/locales";
 import ReactECharts from "echarts-for-react";
@@ -41,8 +41,23 @@ import {
   fetchElementHistory,
   historySeriesKey,
   historySeriesLabel,
+  toTimeSeriesPoints,
   TimeSeriesPoint,
 } from "@/lib/elementHistory";
+import {
+  type AnalysisHistoryContext,
+  getAnalysisHistoryContext,
+  getAnalysisScheme,
+} from "@/lib/analysisRuns";
+import {
+  alignSimulationRange,
+  parseHydraulicStepSeconds,
+  runOnlineSimulation,
+} from "@/lib/onlineSimulation";
+import { permissionCodes } from "@/lib/permissions";
+import { useAccessStore } from "@/store/accessStore";
+import { useProjectStore } from "@/store/projectStore";
+import { useTimelineTimeConfig } from "./useTimelineTimeConfig";
 import {
   FLOW_DISPLAY_UNIT,
   PRESSURE_DISPLAY_UNIT,
@@ -54,7 +69,7 @@ dayjs.extend(timezone);
 export interface SCADADataPanelProps {
   /** 选中的要素信息列表，格式为 [[id, type], [id, type]] */
   featureInfos: [string, string][];
-  /** 数据类型: realtime-查询模拟值和监测值, none-仅查询监测值, scheme-查询策略模拟值和监测值 */
+  /** 数据类型: realtime-在线模拟与监测, none-仅监测, scheme-方案、在线模拟与监测 */
   type?: "realtime" | "scheme" | "none";
   /** 默认展示的选项卡 */
   defaultTab?: "chart" | "table";
@@ -107,6 +122,13 @@ export const fetchHistoryData = async (
   ) {
     throw new Error("历史数据包含无效的管网元素 ID");
   }
+  if (
+    featureInfos.some(
+      ([, elementType]) => !["pipe", "junction"].includes(elementType.toLowerCase()),
+    )
+  ) {
+    throw new Error("历史数据仅支持管道和节点");
+  }
 
   const uniqueFeatureInfos = Array.from(
     new Map(
@@ -118,25 +140,33 @@ export const fetchHistoryData = async (
     throw new Error("历史方案缺少分析运行 ID，无法读取方案时序数据");
   }
 
-  try {
+  const elements = uniqueFeatureInfos.map(([id, elementType]) => ({
-    return await fetchElementHistory(
+    element_id: id.trim(),
-      uniqueFeatureInfos.map(([id, elementType]) => ({
+    element_type: elementType.toLowerCase() as "pipe" | "junction",
-        element_id: id.trim(),
+  }));
-        element_type: elementType.toLowerCase() as "pipe" | "junction",
+  if (type === "scheme") {
-      })),
+    const [online, analysis] = await Promise.all([
-      range,
+      fetchElementHistory(
-      type === "none"
+        elements, range, "realtime_comparison", undefined, signal,
-        ? "observed"
+      ),
-        : type === "scheme"
+      fetchElementHistory(
-          ? "analysis_comparison"
+        elements, range, "analysis_comparison", schemeRunId, signal,
-          : "realtime_comparison",
+      ),
-      schemeRunId,
+    ]);
-      signal,
+    // 两次聚合查询均返回监测序列，只保留在线查询中的一份。
-    );
+    const series = [
-  } catch (error) {
+      ...online.series,
-    console.error("[HistoryDataPanel] 从后端获取数据失败:", error);
+      ...analysis.series.filter((item) => item.source === "analysis_simulation"),
-    throw error;
+    ];
+    return { series, points: toTimeSeriesPoints(series) };
   }
+  return fetchElementHistory(
+    elements,
+    range,
+    type === "none" ? "observed" : "realtime_comparison",
+    undefined,
+    signal,
+  );
 };
 
 const formatTimestamp = (timestamp: string) =>
@@ -186,11 +216,11 @@ const emptyStateMessages: Record<
 > = {
   chart: {
     title: "暂无时序数据",
-    subtitle: "请调整时间范围，或确认所选设备在该时段已有数据。",
+    subtitle: "请调整时间范围，或确认所选元素在该时段已有数据。",
   },
   table: {
     title: "暂无表格数据",
-    subtitle: "请调整时间范围，或确认所选设备在该时段已有数据。",
+    subtitle: "请调整时间范围，或确认所选元素在该时段已有数据。",
   },
 };
 
@@ -204,35 +234,86 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
   runId,
   onClose,
 }) => {
-  // 从 featureInfos 中提取设备 ID 列表
+  const timeConfig = useTimelineTimeConfig();
-  const deviceIds = useMemo(
+  const stepSeconds = parseHydraulicStepSeconds(timeConfig.properties["HYDRAULIC TIMESTEP"])
-    () => featureInfos.map(([id]) => id),
+    ?? timeConfig.stepMinutes * 60;
-    [featureInfos]
+  const canRunSimulation = useAccessStore((state) =>
+    state.permissions.includes(permissionCodes.simulationRun),
   );
+  const projectId = useProjectStore((state) => state.currentProjectId);
+  const [schemeState, setSchemeState] = useState<{
+    runId: string;
+    context?: AnalysisHistoryContext;
+    error?: string;
+  } | null>(null);
+  const [schemeReload, setSchemeReload] = useState(0);
+  const schemeReady = type !== "scheme" || !runId || schemeState?.runId === runId;
+  const schemeContext =
+    type === "scheme" && schemeState?.runId === runId
+      ? schemeState?.context
+      : undefined;
+  const schemeError =
+    type === "scheme" && schemeState?.runId === runId
+      ? schemeState?.error
+      : undefined;
+  const eventRange = schemeContext?.eventRange;
+  const rangeKey = JSON.stringify([type, runId]);
+  const defaultRange = useMemo(() => {
+    const now = dayjs();
+    const start = start_time ? dayjs(start_time) : null;
+    const end = end_time ? dayjs(end_time) : null;
+    const range = {
+      from: start?.isValid()
+        ? start
+        : eventRange
+          ? dayjs(eventRange.start).subtract(1, "hour")
+          : now.subtract(1, "day"),
+      to: end?.isValid()
+        ? end
+        : eventRange
+          ? dayjs(eventRange.end).add(1, "hour")
+          : now,
+    };
+    const aligned = alignSimulationRange({ from: range.from.toDate(), to: range.to.toDate() }, stepSeconds);
+    return { from: dayjs(aligned.from), to: dayjs(aligned.to) };
+  }, [start_time, end_time, eventRange, stepSeconds]);
+  const [selectedRange, setSelectedRange] = useState<{
+    key: string;
+    from: Dayjs;
+    to: Dayjs;
+    startTime?: string;
+    endTime?: string;
+  } | null>(null);
+  const rangeForContext = selectedRange?.key === rangeKey ? selectedRange : null;
+  const from = rangeForContext && (
+    rangeForContext.startTime === start_time || !start_time || !dayjs(start_time).isValid()
+  ) ? rangeForContext.from : defaultRange.from;
+  const to = rangeForContext && (
+    rangeForContext.endTime === end_time || !end_time || !dayjs(end_time).isValid()
+  ) ? rangeForContext.to : defaultRange.to;
+  const setFrom = (value: Dayjs) => {
+    const range = alignSimulationRange({ from: value.toDate(), to: to.toDate() }, stepSeconds);
+    setSelectedRange({ key: rangeKey, from: dayjs(range.from), to: dayjs(range.to), startTime: start_time, endTime: end_time });
+  };
+  const setTo = (value: Dayjs) => {
+    const range = alignSimulationRange({ from: from.toDate(), to: value.toDate() }, stepSeconds);
+    setSelectedRange({ key: rangeKey, from: dayjs(range.from), to: dayjs(range.to), startTime: start_time, endTime: end_time });
+  };
 
-  const [from, setFrom] = useState<Dayjs>(() => {
+  useEffect(() => {
-    if (start_time) {
+    if (!rangeForContext || (
-      const parsedStart = dayjs(start_time);
+      rangeForContext.startTime === start_time && rangeForContext.endTime === end_time
-      if (parsedStart.isValid()) {
+    )) return;
-        return parsedStart;
+    setSelectedRange({ key: rangeKey, from, to, startTime: start_time, endTime: end_time });
-      }
+  }, [rangeForContext, rangeKey, from, to, start_time, end_time]);
-    }
-    return dayjs().subtract(1, "day");
-  });
-  const [to, setTo] = useState<Dayjs>(() => {
-    if (end_time) {
-      const parsedEnd = dayjs(end_time);
-      if (parsedEnd.isValid()) {
-        return parsedEnd;
-      }
-    }
-    return dayjs();
-  });
   const [activeTab, setActiveTab] = useState<PanelTab>(defaultTab);
   const [timeSeries, setTimeSeries] = useState<TimeSeriesPoint[]>([]);
   const [historySeries, setHistorySeries] = useState<ElementHistorySeries[]>([]);
   const [loadingState, setLoadingState] = useState<LoadingState>("idle");
   const [error, setError] = useState<string | null>(null);
+  const [isSimulating, setIsSimulating] = useState(false);
+  const [simulationError, setSimulationError] = useState<string | null>(null);
+  const simulationControllerRef = useRef<AbortController | null>(null);
   const draggableRef = useRef<HTMLDivElement>(null);
   const requestControllerRef = useRef<AbortController | null>(null);
 
@@ -241,22 +322,30 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
   }, [defaultTab]);
 
   useEffect(() => {
-    if (!start_time && !end_time) return;
+    if (type !== "scheme" || !runId) return;
-    if (start_time) {
+    let cancelled = false;
-      const parsedStart = dayjs(start_time);
+    getAnalysisScheme(runId).then(
-      if (parsedStart.isValid()) {
+      (run) => {
-        setFrom((prev) => (parsedStart.isSame(prev) ? prev : parsedStart));
+        if (!cancelled) {
-      }
+          setSchemeState({ runId, context: getAnalysisHistoryContext(run) });
-    }
+        }
-    if (end_time) {
+      },
-      const parsedEnd = dayjs(end_time);
+      () => {
-      if (parsedEnd.isValid()) {
+        if (!cancelled) {
-        setTo((prev) => (parsedEnd.isSame(prev) ? prev : parsedEnd));
+          setSchemeState({ runId, error: "无法读取事件方案，请刷新重试" });
-      }
+        }
-    }
+      },
-  }, [start_time, end_time]);
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [type, runId, schemeReload]);
 
-  const normalizedRange = useMemo(() => ensureValidRange(from, to), [from, to]);
+  const normalizedRange = useMemo(() => {
+    const ordered = ensureValidRange(from, to);
+    const aligned = alignSimulationRange({ from: ordered.from.toDate(), to: ordered.to.toDate() }, stepSeconds);
+    return { from: dayjs(aligned.from), to: dayjs(aligned.to) };
+  }, [from, to, stepSeconds]);
 
   const featureInfosKey = JSON.stringify(featureInfos);
   const requestedFeatureInfos = useMemo(
@@ -265,6 +354,42 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
   );
   const hasDevices = requestedFeatureInfos.length > 0;
   const hasData = timeSeries.length > 0;
+  const simulationContext = JSON.stringify([
+    projectId, type, runId, featureInfosKey, start_time, end_time,
+  ]);
+  const simulationContextRef = useRef(simulationContext);
+  useEffect(() => {
+    simulationContextRef.current = simulationContext;
+    setSimulationError(null);
+  }, [simulationContext]);
+
+  const handleOnlineSimulation = async () => {
+    if (simulationControllerRef.current || !canRunSimulation || !projectId || !hasDevices || !schemeReady || schemeError) return;
+    const controller = new AbortController();
+    simulationControllerRef.current = controller;
+    setIsSimulating(true);
+    setSimulationError(null);
+    try {
+      const result = await runOnlineSimulation({
+        from: normalizedRange.from.toDate(), to: normalizedRange.to.toDate(),
+      }, controller.signal);
+      if (controller.signal.aborted || simulationContextRef.current !== simulationContext) return;
+      // 更新查询范围会触发历史数据重查，读取刚保存的在线结果。
+      setSelectedRange({
+        key: rangeKey, from: dayjs(result.range.from), to: dayjs(result.range.to),
+        startTime: start_time, endTime: end_time,
+      });
+    } catch (err) {
+      if (!controller.signal.aborted && simulationContextRef.current === simulationContext) {
+        setSimulationError(err instanceof Error ? err.message : "在线模拟失败，请刷新确认已生成的数据");
+      }
+    } finally {
+      if (simulationControllerRef.current === controller) {
+        simulationControllerRef.current = null;
+        setIsSimulating(false);
+      }
+    }
+  };
 
   const dataset = useMemo(
     () => buildDataset(timeSeries, historySeries, fractionDigits),
@@ -272,9 +397,10 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
   );
 
   const handleFetch = useCallback(
-    async (reason: string) => {
+    async () => {
-      if (!hasDevices) {
+      if (!hasDevices || !schemeReady || schemeError) {
         requestControllerRef.current?.abort();
+        requestControllerRef.current = null;
         setTimeSeries([]);
         setHistorySeries([]);
         setLoadingState("idle");
@@ -295,44 +421,52 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
             from: rangeFrom.toDate(),
             to: rangeTo.toDate(),
           },
-          type,
+          type === "scheme" && schemeContext && !schemeContext.simulationRunId
-          runId,
+            ? "realtime"
+            : type,
+          schemeContext?.simulationRunId,
           requestController.signal,
         );
-        if (requestControllerRef.current !== requestController) return;
+        if (
+          requestController.signal.aborted ||
+          requestControllerRef.current !== requestController
+        ) return;
         setTimeSeries(result.points);
         setHistorySeries(result.series);
         setLoadingState("success");
       } catch (err) {
         if (
           requestControllerRef.current !== requestController ||
+          requestController.signal.aborted ||
           (err instanceof Error && err.name === "AbortError")
         ) {
           return;
         }
+        setTimeSeries([]);
+        setHistorySeries([]);
         setError(err instanceof Error ? err.message : "未知错误");
         setLoadingState("error");
       }
     },
-    [requestedFeatureInfos, hasDevices, normalizedRange, runId, type],
+    [
+      requestedFeatureInfos, hasDevices, normalizedRange,
+      schemeReady, schemeError, schemeContext, type,
+    ],
   );
 
   useEffect(
     () => () => {
       requestControllerRef.current?.abort();
+      simulationControllerRef.current?.abort();
+      simulationControllerRef.current = null;
     },
     [],
   );
 
-  // 设备变化时自动查询
+  // 元素、方案或查询范围变化时自动查询。
   useEffect(() => {
-    if (hasDevices) {
+    void handleFetch();
-      handleFetch("device-change");
+  }, [handleFetch]);
-    } else {
-      setTimeSeries([]);
-      setHistorySeries([]);
-    }
-  }, [handleFetch, hasDevices]);
 
   const columns: GridColDef[] = useMemo(() => {
     const base: GridColDef[] = [
@@ -387,6 +521,11 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
   );
 
   const renderEmpty = () => {
+    if (isSimulating) {
+      return <Box sx={{ display: "grid", placeItems: "center", height: "100%" }}>
+        <CircularProgress size={32} />
+      </Box>;
+    }
     if (!hasDevices) {
       return (
         <PanelEmptyState
@@ -424,7 +563,6 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
       "#3f51b5", // 靛蓝色
     ];
 
-    const xData = dataset.map((item) => item.label);
     const hasFlowSeries = historySeries.some((item) => item.metric === "flow");
     const hasPressureSeries = historySeries.some(
       (item) => item.metric === "pressure",
@@ -453,11 +591,17 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
             symbolSize: isObserved ? 7 : 0,
             showSymbol: isObserved,
             sampling: "lttb",
-            connectNulls: !isObserved,
+            connectNulls: false,
             itemStyle: {
               color: colors[index % colors.length],
             },
-            data: dataset.map((item) => item[key]),
+            data: timeSeries
+              .filter((point) =>
+                Object.prototype.hasOwnProperty.call(point.values, key),
+              )
+              .map((point) => [
+                new Date(point.timestamp).getTime(), point.values[key] ?? null,
+              ]),
             lineStyle: isObserved ? { width: 0 } : undefined,
             areaStyle: isObserved
               ? undefined
@@ -507,9 +651,15 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
         },
       },
       xAxis: {
-        type: "category",
+        type: "time",
         boundaryGap: false,
-        data: xData,
+        min: normalizedRange.from.valueOf(),
+        max: normalizedRange.to.valueOf(),
+        minInterval: stepSeconds * 1000,
+        axisLabel: {
+          formatter: (value: number) => dayjs(value).tz("Asia/Shanghai").format("MM-DD\nHH:mm"),
+          hideOverlap: true,
+        },
       },
       yAxis: [
         ...(hasFlowSeries
@@ -542,7 +692,21 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
           end: 100,
         },
       ],
-      series: getSeries(),
+      series: getSeries().map((series, index) => ({
+        ...series,
+        ...(index === 0 && eventRange
+          ? {
+              markArea: {
+                silent: true,
+                itemStyle: { color: "rgba(255, 152, 0, 0.10)" },
+                data: [[
+                  { name: "事件方案时段", xAxis: Date.parse(eventRange.start) },
+                  { xAxis: Date.parse(eventRange.end) },
+                ]],
+              },
+            }
+          : {}),
+      })),
     };
 
     return (
@@ -711,21 +875,12 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
                     <DateTimePicker
                       label="开始时间"
                       value={from}
+                      disabled={isSimulating}
                       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" },
@@ -734,21 +889,12 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
                     <DateTimePicker
                       label="结束时间"
                       value={to}
+                      disabled={isSimulating}
                       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" },
@@ -756,7 +902,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
                     />
                   </Stack>
                   <Stack
-                    direction="row"
+                    direction={{ xs: "column", sm: "row" }}
                     spacing={1}
                     alignItems="center"
                     justifyContent="space-between"
@@ -780,6 +926,23 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
                       />
                     </Tabs>
                     <Stack direction="row" spacing={1}>
+                      {type !== "none" && (
+                        <Tooltip title={canRunSimulation
+                          ? "按管网水力步长计算当前查询时段的在线模拟数据"
+                          : "需要在线模拟运行权限"}>
+                          <span>
+                            <Button
+                              variant="contained"
+                              size="small"
+                              startIcon={isSimulating ? <CircularProgress size={16} color="inherit" /> : <PlayArrow fontSize="small" />}
+                              disabled={!canRunSimulation || !projectId || !hasDevices || !schemeReady || Boolean(schemeError) || isSimulating || loadingState === "loading"}
+                              onClick={() => { void handleOnlineSimulation(); }}
+                            >
+                              {isSimulating ? "模拟中…" : "在线模拟"}
+                            </Button>
+                          </span>
+                        </Tooltip>
+                      )}
                       <Tooltip title="刷新数据">
                         <span>
                           <Button
@@ -787,8 +950,17 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
                             size="small"
                             color="primary"
                             startIcon={<Refresh fontSize="small" />}
-                            disabled={!hasDevices || loadingState === "loading"}
+                            disabled={
-                            onClick={() => handleFetch("manual")}
+                              !hasDevices || !schemeReady || isSimulating || loadingState === "loading"
+                            }
+                            onClick={() => {
+                              if (schemeError) {
+                                setSchemeState(null);
+                                setSchemeReload((value) => value + 1);
+                              } else {
+                                void handleFetch();
+                              }
+                            }}
                           >
                             刷新
                           </Button>
@@ -799,13 +971,34 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
                 </Stack>
               </LocalizationProvider>
 
-              {error && (
+              {eventRange && (
+                <Typography variant="caption" sx={{ mt: 1, display: "block" }}>
+                  事件方案时段：{formatTimestamp(eventRange.start)} ～ {formatTimestamp(eventRange.end)}
+                </Typography>
+              )}
+              {isSimulating && (
+                <Typography role="status" variant="caption" sx={{ mt: 1, display: "block" }}>
+                  正在计算在线模拟数据，完成后将自动刷新图表。
+                </Typography>
+              )}
+              {!isSimulating && type !== "none" && hasDevices && loadingState === "success" &&
+                !historySeries.some((series) => series.source === "realtime_simulation" && series.points.some((point) => point.value !== null)) && (
+                <Typography variant="caption" sx={{ mt: 1, display: "block" }}>
+                  当前时段暂无在线模拟数据。{canRunSimulation ? "可点击“在线模拟”计算。" : ""}
+                </Typography>
+              )}
+              {simulationError && (
+                <Typography role="alert" variant="caption" color="error" sx={{ mt: 1, display: "block" }}>
+                  在线模拟失败：{simulationError}
+                </Typography>
+              )}
+              {(schemeError || error) && (
                 <Typography
                   variant="caption"
                   color="error"
                   sx={{ mt: 1, display: "block" }}
                 >
-                  获取数据失败：{error}
+                  获取数据失败：{schemeError || error}
                 </Typography>
               )}
             </Box>
@@ -814,7 +1007,7 @@ const SCADADataPanel: React.FC<SCADADataPanelProps> = ({
 
             {/* Content */}
             <Box sx={{ flex: 1, position: "relative", p: 2, overflow: "auto" }}>
-              {loadingState === "loading" && (
+              {(!schemeReady || loadingState === "loading") && (
                 <Box
                   sx={{
                     position: "absolute",

src/lib/analysisRuns.test.ts

@@ -2,6 +2,7 @@ import { api } from "@/lib/api";
 import {
   getAnalysisResults,
   getAnalysisScheme,
+  getAnalysisHistoryContext,
   listAnalysisSchemes,
 } from "./analysisRuns";
 
@@ -94,3 +95,49 @@ describe("analysis runs API adapter", () => {
     );
   });
 });
+
+describe("analysis history context", () => {
+  const run = {
+    run_id: "run-1", name: "event", run_type: "burst_analysis",
+    created_by: "alice", created_at: "2026-11-03T05:00:00Z",
+    started_at: "2026-08-25T09:00:00+08:00", status: "completed", parameters: {},
+  };
+
+  it.each([
+    ["burst_analysis", { modify_total_duration: 3600 }],
+    ["flushing_analysis", { duration: 3600 }],
+    ["contaminant_analysis", { duration: 3600 }],
+  ])("uses the simulated interval of %s rather than its creation time", (run_type, parameters) => {
+    expect(getAnalysisHistoryContext({ ...run, run_type, parameters })).toEqual({
+      simulationRunId: "run-1",
+      eventRange: { start: "2026-08-25T01:00:00.000Z", end: "2026-08-25T02:00:00.000Z" },
+    });
+  });
+
+  it("does not treat a detection run as a hydraulic simulation", () => {
+    expect(getAnalysisHistoryContext({
+      ...run, run_type: "burst_detection", parameters: {
+        scada_window: { start: "2026-08-25T01:00:00Z", end: "2026-08-25T02:00:00Z" },
+      },
+    })).toEqual({
+      eventRange: { start: "2026-08-25T01:00:00Z", end: "2026-08-25T02:00:00Z" },
+    });
+  });
+
+  it("uses the linked hydraulic run for a localization analysis", () => {
+    expect(getAnalysisHistoryContext({
+      ...run, run_type: "burst_location", parameters: {
+        result_payload: {
+          simulation_run: { run_id: "simulation-1" },
+          scada_window: { burst_start: "2026-08-25T01:00:00Z", burst_end: "2026-08-25T02:00:00Z" },
+        },
+      },
+    }).simulationRunId).toBe("simulation-1");
+  });
+
+  it("rejects invalid or missing event durations without inventing an interval", () => {
+    expect(getAnalysisHistoryContext(run).eventRange).toBeNull();
+    expect(getAnalysisHistoryContext({ ...run, parameters: { duration: -1 } }).eventRange).toBeNull();
+    expect(getAnalysisHistoryContext({ ...run, started_at: "invalid", parameters: { duration: 3600 } }).eventRange).toBeNull();
+  });
+});

src/lib/analysisRuns.ts

@@ -11,6 +11,66 @@ export type AnalysisRun = {
   parameters: Record<string, unknown>;
 };
 
+export type AnalysisHistoryContext = {
+  simulationRunId?: string;
+  eventRange: { start: string; end: string } | null;
+};
+
+const SIMULATION_RUN_TYPES = new Set([
+  "burst_analysis",
+  "flushing_analysis",
+  "contaminant_analysis",
+  "valve_close_analysis",
+  "pressure_regulation",
+]);
+
+export const getAnalysisHistoryContext = (
+  run: AnalysisRun,
+): AnalysisHistoryContext => {
+  const parameters = normalizeParameters(run.parameters);
+  if (SIMULATION_RUN_TYPES.has(run.run_type)) {
+    const start = Date.parse(run.started_at);
+    const duration = parameters.modify_total_duration ?? parameters.duration;
+    const end = new Date(
+      typeof duration === "number" ? start + duration * 1000 : NaN,
+    ).getTime();
+    return {
+      simulationRunId: run.run_id,
+      eventRange:
+        Number.isFinite(start) && Number.isFinite(end) && end > start
+          ? {
+              start: new Date(start).toISOString(),
+              end: new Date(end).toISOString(),
+            }
+          : null,
+    };
+  }
+
+  const payload = normalizeParameters(parameters.result_payload);
+  const window = normalizeParameters(
+    parameters.scada_window ?? payload.scada_window,
+  );
+  const start = window.burst_start ?? window.start ?? parameters.scada_start;
+  const end = window.burst_end ?? window.end ?? parameters.scada_end;
+  const simulation = normalizeParameters(
+    payload.simulation_run ?? payload.simulation_scheme,
+  );
+  const simulationRunId = parameters.simulation_run_id ?? simulation.run_id;
+  return {
+    simulationRunId:
+      typeof simulationRunId === "string" && simulationRunId.trim()
+        ? simulationRunId.trim()
+        : undefined,
+    eventRange:
+      typeof start === "string" &&
+      typeof end === "string" &&
+      Number.isFinite(Date.parse(start)) &&
+      Date.parse(end) > Date.parse(start)
+        ? { start, end }
+        : null,
+  };
+};
+
 export type AnalysisResult = {
   result_id: string;
   run_id: string;

src/lib/elementHistory.test.ts

@@ -28,8 +28,46 @@ describe("element history display conversion", () => {
     ];
 
     const points = toTimeSeriesPoints(series);
-    expect(points[0].timestamp).toBe("2026-09-01T00:00:00Z");
+    expect(points[0].timestamp).toBe("2026-09-01T00:00:00.000Z");
-    expect(points[0].values["P-1_sim"]).toBeCloseTo(83.3333333334);
+    expect(points[0].values['["pipe","P-1","realtime_simulation"]']).toBeCloseTo(83.3333333334);
     expect(points[0].values["pressure-1_clean"]).toBeCloseTo(1.019716213);
   });
+
+  it("aligns equivalent timestamps and keeps same-name pipes and junctions separate", () => {
+    const base: ElementHistorySeries = {
+      element_id: "shared-id", element_type: "pipe", device_id: null,
+      metric: "flow", source: "realtime_simulation", source_unit: "L/s",
+      display_unit: "m³/h", unit_inferred: false,
+      points: [{ time: "2026-09-01T08:00:00+08:00", value: 10 }],
+    };
+    const points = toTimeSeriesPoints([
+      base,
+      { ...base, element_type: "junction", metric: "pressure", source_unit: "m",
+        points: [{ time: "2026-09-01T00:00:00Z", value: 20 }] },
+      { ...base, source: "analysis_simulation", points: [
+        { time: "2026-09-01T00:00:00.000Z", value: null },
+      ] },
+    ]);
+    expect(points).toHaveLength(1);
+    expect(points[0].values).toEqual({
+      '["pipe","shared-id","realtime_simulation"]': 36,
+      '["junction","shared-id","realtime_simulation"]': 20,
+      '["pipe","shared-id","analysis_simulation"]': null,
+    });
+  });
+
+  it("keeps online IDs ending in _scheme distinct from another element's scheme series", () => {
+    const base: ElementHistorySeries = {
+      element_id: "P_scheme", element_type: "pipe", device_id: null,
+      metric: "flow", source: "realtime_simulation", source_unit: "m3/h",
+      display_unit: "m³/h", unit_inferred: false,
+      points: [{ time: "2026-09-01T00:00:00Z", value: 100 }],
+    };
+    const points = toTimeSeriesPoints([
+      base,
+      { ...base, element_id: "P", source: "analysis_simulation",
+        points: [{ time: "2026-09-01T00:00:00Z", value: 5 }] },
+    ]);
+    expect(Object.values(points[0].values).sort((a, b) => Number(a) - Number(b))).toEqual([5, 100]);
+  });
 });

src/lib/elementHistory.ts

@@ -49,8 +49,10 @@ const SOURCE_SUFFIX: Record<HistorySource, string> = {
   analysis_simulation: "scheme_sim",
 };
 
-export const historySeriesKey = (series: ElementHistorySeries) =>
+export const historySeriesKey = (series: ElementHistorySeries) => {
-  `${series.device_id ?? series.element_id}_${SOURCE_SUFFIX[series.source]}`;
+  if (series.device_id) return `${series.device_id}_${SOURCE_SUFFIX[series.source]}`;
+  return JSON.stringify([series.element_type, series.element_id, series.source]);
+};
 
 export const historySourceLabel = (source: HistorySource) => {
   switch (source) {
@@ -65,8 +67,11 @@ export const historySourceLabel = (source: HistorySource) => {
   }
 };
 
-export const historySeriesLabel = (series: ElementHistorySeries) =>
+export const historySeriesLabel = (series: ElementHistorySeries) => {
-  `${series.device_id ?? series.element_id} (${historySourceLabel(series.source)})`;
+  const target = series.device_id ??
+    `${series.element_type === "pipe" ? "管道" : "节点"} ${series.element_id}`;
+  return `${target} (${historySourceLabel(series.source)})`;
+};
 
 export const toTimeSeriesPoints = (
   seriesList: ElementHistorySeries[],
@@ -75,13 +80,14 @@ export const toTimeSeriesPoints = (
   seriesList.forEach((series) => {
     const key = historySeriesKey(series);
     series.points.forEach((point) => {
-      const values = timeMap.get(point.time) ?? {};
+      const timestamp = new Date(point.time).toISOString();
+      const values = timeMap.get(timestamp) ?? {};
       values[key] = toDisplayValue(
         point.value,
         series.metric,
         series.source_unit,
       );
-      timeMap.set(point.time, values);
+      timeMap.set(timestamp, values);
     });
   });
   return Array.from(timeMap, ([timestamp, values]) => ({ timestamp, values })).sort(

src/lib/onlineSimulation.test.ts

@@ -0,0 +1,86 @@
+import { apiFetch } from "@/lib/apiFetch";
+import { useProjectStore } from "@/store/projectStore";
+import { alignSimulationRange, parseHydraulicStepSeconds, runOnlineSimulation } from "./onlineSimulation";
+
+jest.mock("@/lib/apiFetch", () => ({ apiFetch: jest.fn() }));
+
+const response = (body: unknown, ok = true) => ({
+  ok, json: async () => body,
+}) as Response;
+
+describe("online simulation time alignment", () => {
+  it.each([["0:15", 900], ["00:05:00", 300], ["1:00", 3600], ["0:00:30", 30]])(
+    "reads the configured step %s", (clock, seconds) => {
+      expect(parseHydraulicStepSeconds(clock)).toBe(seconds);
+    },
+  );
+
+  it.each(["0:00", "0:60", "0:00:60", "15", "invalid", undefined])(
+    "does not invent a step from invalid config %s", (clock) => {
+      expect(parseHydraulicStepSeconds(clock)).toBeUndefined();
+    },
+  );
+
+  it("aligns the screenshot's range to 15-minute clock boundaries", () => {
+    const range = alignSimulationRange({
+      from: new Date("2026-07-30T12:38:42+08:00"),
+      to: new Date("2026-07-30T15:38:42+08:00"),
+    }, 900);
+    expect(range.from.toISOString()).toBe("2026-07-30T04:30:00.000Z");
+    expect(range.to.toISOString()).toBe("2026-07-30T07:45:00.000Z");
+  });
+
+  it("keeps aligned endpoints and handles ranges crossing midnight", () => {
+    const range = alignSimulationRange({
+      from: new Date("2026-07-30T23:50:00+08:00"),
+      to: new Date("2026-07-31T00:10:00+08:00"),
+    }, 900);
+    expect(range.from.toISOString()).toBe("2026-07-30T15:45:00.000Z");
+    expect(range.to.toISOString()).toBe("2026-07-30T16:15:00.000Z");
+    expect(alignSimulationRange(range, 900)).toEqual(range);
+  });
+});
+
+describe("online simulation request", () => {
+  const range = {
+    from: new Date("2026-07-30T12:38:00+08:00"),
+    to: new Date("2026-07-30T15:38:00+08:00"),
+  };
+  beforeEach(() => {
+    jest.mocked(apiFetch).mockReset();
+    useProjectStore.getState().setCurrentProject("project-1", "network-1");
+  });
+
+  it("runs the full snapped range including the right endpoint, without network fields", async () => {
+    jest.mocked(apiFetch).mockResolvedValueOnce(response({ times: { "HYDRAULIC TIMESTEP": "0:15" } }))
+      .mockResolvedValueOnce(response({ status: "success" }));
+    const result = await runOnlineSimulation(range);
+    expect(result.range.to.toISOString()).toBe("2026-07-30T07:45:00.000Z");
+    expect(JSON.parse(String(jest.mocked(apiFetch).mock.calls[1][1]?.body))).toEqual({
+      start_time: "2026-07-30T04:30:00.000Z", duration: 210,
+    });
+    expect(String(jest.mocked(apiFetch).mock.calls[1][0])).toContain("/api/v1/simulation-runs");
+  });
+
+  it("refuses to calculate with a missing hydraulic step", async () => {
+    jest.mocked(apiFetch).mockResolvedValue(response({}));
+    await expect(runOnlineSimulation(range)).rejects.toThrow("水力时间步长无效");
+    expect(apiFetch).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not submit a write if the project changed during the config read", async () => {
+    jest.mocked(apiFetch).mockImplementationOnce(async () => {
+      useProjectStore.getState().setCurrentProject("project-2", "network-2");
+      return response({ "HYDRAULIC TIMESTEP": "0:15" });
+    });
+    await expect(runOnlineSimulation(range)).rejects.toThrow("项目已切换");
+    expect(apiFetch).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not retry or treat a queued acknowledgment as completion", async () => {
+    jest.mocked(apiFetch).mockResolvedValueOnce(response({ "HYDRAULIC TIMESTEP": "0:15" }))
+      .mockResolvedValueOnce(response({ status: "queued" }));
+    await expect(runOnlineSimulation(range)).rejects.toThrow("未确认完成");
+    expect(apiFetch).toHaveBeenCalledTimes(2);
+  });
+});

src/lib/onlineSimulation.ts

@@ -0,0 +1,79 @@
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone";
+import config from "@/config/config";
+import { apiFetch } from "@/lib/apiFetch";
+import { useProjectStore } from "@/store/projectStore";
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+export type SimulationRange = { from: Date; to: Date };
+
+export const parseHydraulicStepSeconds = (value: unknown): number | undefined => {
+  if (typeof value !== "string" || !/^\d+:\d{1,2}(:\d{1,2})?$/.test(value.trim())) {
+    return undefined;
+  }
+  const [hours, minutes, seconds = 0] = value.trim().split(":").map(Number);
+  const step = hours * 3600 + minutes * 60 + seconds;
+  return minutes < 60 && seconds < 60 && step > 0 ? step : undefined;
+};
+
+/** 与地图时间轴一致，以北京时间零点为基准向外取整，跨日仍保持同一步长。 */
+export const alignSimulationRange = (
+  range: SimulationRange,
+  stepSeconds: number,
+): SimulationRange => {
+  if (!Number.isFinite(stepSeconds) || stepSeconds <= 0 ||
+    !Number.isFinite(range.from.getTime()) || !Number.isFinite(range.to.getTime())) {
+    throw new Error("查询时间或水力时间步长无效");
+  }
+  const start = Math.min(range.from.getTime(), range.to.getTime());
+  const end = Math.max(range.from.getTime(), range.to.getTime());
+  const origin = dayjs(start).tz("Asia/Shanghai").startOf("day").valueOf();
+  const step = stepSeconds * 1000;
+  const from = origin + Math.floor((start - origin) / step) * step;
+  const to = Math.max(from + step, origin + Math.ceil((end - origin) / step) * step);
+  return { from: new Date(from), to: new Date(to) };
+};
+
+/** 复用同步在线模拟接口，成功响应表示计算和保存已完成；不自动重试写请求。 */
+export const runOnlineSimulation = async (
+  range: SimulationRange,
+  signal?: AbortSignal,
+): Promise<{ range: SimulationRange; stepSeconds: number }> => {
+  const projectId = useProjectStore.getState().currentProjectId;
+  if (!projectId) throw new Error("请先选择项目，未启动在线模拟");
+  const projectHeaders = { "X-Project-Id": projectId };
+  const timeResponse = await apiFetch(
+    `${config.BACKEND_URL}/api/v1/network-options/time`, {
+      signal, headers: projectHeaders, projectHeaderMode: "omit",
+    },
+  );
+  if (!timeResponse.ok) throw new Error("无法读取管网时间步长，未启动在线模拟");
+  const payload = await timeResponse.json();
+  const stepSeconds = parseHydraulicStepSeconds(
+    (payload?.times ?? payload)?.["HYDRAULIC TIMESTEP"],
+  );
+  if (!stepSeconds) throw new Error("管网水力时间步长无效，未启动在线模拟");
+  if (signal?.aborted || useProjectStore.getState().currentProjectId !== projectId) {
+    throw new Error("项目已切换或面板已关闭，未启动在线模拟");
+  }
+  const alignedRange = alignSimulationRange(range, stepSeconds);
+  const response = await apiFetch(`${config.BACKEND_URL}/api/v1/simulation-runs`, {
+    method: "POST",
+    headers: { ...projectHeaders, "Content-Type": "application/json" },
+    projectHeaderMode: "omit",
+    // 后端循环的结束时间不包含在计算内，多算一个步长以覆盖图表右端点。
+    body: JSON.stringify({
+      start_time: alignedRange.from.toISOString(),
+      duration: Math.ceil((alignedRange.to.getTime() - alignedRange.from.getTime() + stepSeconds * 1000) / 60000),
+    }),
+    signal,
+  });
+  const result = await response.json().catch(() => null);
+  if (!response.ok || result?.status !== "success") {
+    throw new Error(typeof result?.detail === "string" ? result.detail : "在线模拟未确认完成，请刷新查看已生成的数据");
+  }
+  return { range: alignedRange, stepSeconds };
+};