Compare commits
3
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 jiang
|
e67f9542cd | ||
|
jiang
|
0dc7187de2 | ||
|
jiang
|
d013f34493 |
@@ -0,0 +1,19 @@
|
||||
# 三维场景静态资源下载与缓存
|
||||
|
||||
`public/three-dimensional/zjb/v29/resourceCache.mjs` 统一加载模型和管网静态元数据，不缓存实时仿真或 SCADA 数据。
|
||||
|
||||
- 每次请求最多下载 1 MiB，通过单区间 `Range` 请求获取资源。服务器返回 `206` 时，校验 `Content-Range` 的起止位置、总长度以及实际收到的字节数；不支持 Range 的服务器可在首次请求返回完整的 `200` 响应。
|
||||
- 网络中断、连续 30 秒无数据以及临时 HTTP 错误可重试，每个分段最多尝试 3 次，等待间隔为 300、600 毫秒。永久 HTTP 错误和不合法的分段响应直接显示失败提示。
|
||||
- 每个完整分段保存至 IndexedDB。刷新页面或重新载入后，从已保存的分段末尾继续；未完成的当前分段会重新下载。浏览器禁止存储或配额不足时，仍能在本次加载中下载和重试，但无法保证刷新后保留断点。
|
||||
- 完整资源和部分下载均按 URL、manifest revision 匹配，版本改变后重新下载。完整资源经过解析验证后才进入正式缓存，后续打开场景直接复用。
|
||||
- 进度界面显示下载、解析和断点重试状态。加载模块版本参数需要与 `preview.html`、`preview.mjs` 和 `ThreeDimensionalScene.tsx` 同步，防止浏览器沿用旧加载器。
|
||||
|
||||
反向代理应透传 `Range` 请求及 `206`、`Content-Range` 响应。若内网完整下载正常，而公网完整下载中断，应同时排查代理的大文件传输；客户端分段恢复不代表代理链路问题已修复。
|
||||
|
||||
聚焦回归：
|
||||
|
||||
```bash
|
||||
E2E_BASE_URL=http://127.0.0.1:3000 npx playwright test e2e/three-dimensional-loading.spec.ts --workers=1
|
||||
```
|
||||
|
||||
该命令需要已运行的前端。测试覆盖完整缓存复用、分段重试、跨刷新续传、错误分段拒绝及浏览器存储不可用的降级行为。
|
||||
@@ -1,7 +1,7 @@
|
||||
import { expect, test } from "@playwright/test";
|
||||
|
||||
const root = "/three-dimensional/zjb/v29/";
|
||||
const preview = root + "preview.html?host=platform2&v=35-resource-cache";
|
||||
const preview = root + "preview.html?host=platform2&v=36-resumable-cache";
|
||||
const isAsset = (url: string) => /\.glb(?:\?|$)|water-network-v28\.json/.test(url);
|
||||
|
||||
test.setTimeout(120_000);
|
||||
@@ -28,7 +28,7 @@ test("HTTP 200 的错误元数据不会进入缓存，服务器恢复后重试
|
||||
expect(cached).toBe(false);
|
||||
await page.getByRole("button", { name: "重新载入场景" }).click();
|
||||
await expect(page.locator("#boot")).toBeHidden({ timeout: 60_000 });
|
||||
expect(requests).toBe(2);
|
||||
expect(requests).toBe(5);
|
||||
});
|
||||
|
||||
test("模型和元数据跨页面复用持久缓存，即使服务器资源不可用也能重开场景", async ({ page, context }) => {
|
||||
@@ -46,7 +46,7 @@ test("模型和元数据跨页面复用持久缓存，即使服务器资源不
|
||||
await page.goto(preview);
|
||||
await expect(page.locator("#boot")).toBeHidden({ timeout: 60_000 });
|
||||
const coldMs = Date.now() - coldStart;
|
||||
expect(requests).toHaveLength(10);
|
||||
expect(new Set(requests).size).toBe(10);
|
||||
requests.length = 0;
|
||||
block = true;
|
||||
await page.close();
|
||||
@@ -140,7 +140,7 @@ test("HTTP 错误和解析失败不会写入缓存，下一次请求可恢复",
|
||||
await page.route("**/cache-probe.json*", (route) => {
|
||||
requests++;
|
||||
return requests === 1
|
||||
? route.fulfill({ status: 503, body: "unavailable" })
|
||||
? route.fulfill({ status: 404, body: "not found" })
|
||||
: requests === 2
|
||||
? route.fulfill({ body: "invalid json" })
|
||||
: route.fulfill({ json: { ok: true } });
|
||||
@@ -160,6 +160,145 @@ test("HTTP 错误和解析失败不会写入缓存，下一次请求可恢复",
|
||||
}, root);
|
||||
expect(requests).toBe(3);
|
||||
expect(result.errors).toHaveLength(2);
|
||||
expect(result.errors[0]).toContain("HTTP 503");
|
||||
expect(result.errors[0]).toContain("HTTP 404");
|
||||
expect(result.recovered).toEqual({ ok: true });
|
||||
});
|
||||
|
||||
test("公网整文件中断时分段下载，重试失败分段并缓存完整模型", async ({ page }) => {
|
||||
const { readFile } = await import("node:fs/promises");
|
||||
const { createHash } = await import("node:crypto");
|
||||
const bytes = await readFile("public/three-dimensional/zjb/v29/models/detail_interior.glb");
|
||||
const ranges: string[] = [];
|
||||
let interrupted = false;
|
||||
await page.route("**/models/detail_interior.glb*", async (route) => {
|
||||
const range = route.request().headers().range;
|
||||
ranges.push(range ?? "whole-file");
|
||||
// The public proxy drops whole-file responses, and one partial request drops too.
|
||||
if (!range) return route.abort("failed");
|
||||
if (range.startsWith("bytes=1048576-") && !interrupted) {
|
||||
interrupted = true;
|
||||
return route.abort("failed");
|
||||
}
|
||||
const match = /^bytes=(\d+)-(\d+)$/.exec(range)!;
|
||||
const start = Number(match[1]);
|
||||
const end = Math.min(Number(match[2]), bytes.length - 1);
|
||||
return route.fulfill({ status: 206, headers: {
|
||||
"content-type": "model/gltf-binary",
|
||||
"content-range": `bytes ${start}-${end}/${bytes.length}`,
|
||||
}, body: bytes.subarray(start, end + 1) });
|
||||
});
|
||||
await page.goto(root + "manifest.json");
|
||||
const result = await page.evaluate(async (base) => {
|
||||
const { createSceneResourceCache } = await import(base + "resourceCache.mjs");
|
||||
const load = () => createSceneResourceCache(location.origin + base).load("models/detail_interior.glb", "range-recovery");
|
||||
const data = await load();
|
||||
const cached = await load();
|
||||
return { length: data.byteLength, cachedLength: cached.byteLength,
|
||||
sha256: Array.from(new Uint8Array(await crypto.subtle.digest("SHA-256", data)), n => n.toString(16).padStart(2, "0")).join("") };
|
||||
}, root);
|
||||
expect(result).toEqual({ length: bytes.length, cachedLength: bytes.length, sha256: createHash("sha256").update(bytes).digest("hex") });
|
||||
expect(ranges).toHaveLength(7);
|
||||
expect(ranges[0]).toBe("bytes=0-1048575");
|
||||
expect(ranges[1]).toBe(ranges[2]);
|
||||
expect(interrupted).toBe(true);
|
||||
});
|
||||
|
||||
for (const fault of ["offset", "total", "truncated", "whole-response"] as const) {
|
||||
test(`无效分段响应 ${fault} 不会进入缓存，恢复后可重新下载`, async ({ page }) => {
|
||||
const bytes = Buffer.alloc(1048576 + 16, 7);
|
||||
let broken = true;
|
||||
let requests = 0;
|
||||
await page.route("**/range-probe.bin*", (route) => {
|
||||
requests++;
|
||||
const range = route.request().headers().range;
|
||||
if (!range) return route.abort("failed");
|
||||
const match = /^bytes=(\d+)-(\d+)$/.exec(range)!;
|
||||
const start = Number(match[1]);
|
||||
const end = Math.min(Number(match[2]), bytes.length - 1);
|
||||
if (broken && start > 0 && fault === "whole-response") return route.fulfill({ body: bytes });
|
||||
return route.fulfill({ status: 206, headers: {
|
||||
"content-range": `bytes ${broken && start > 0 && fault === "offset" ? 0 : start}-${end}/${bytes.length + (broken && start > 0 && fault === "total" ? 1 : 0)}`,
|
||||
}, body: bytes.subarray(start, end + (broken && start > 0 && fault === "truncated" ? 0 : 1)) });
|
||||
});
|
||||
await page.goto(root + "manifest.json");
|
||||
const failed = await page.evaluate(async (base) => {
|
||||
const { createSceneResourceCache } = await import(base + "resourceCache.mjs");
|
||||
try { await createSceneResourceCache(location.origin + base).load("range-probe.bin", "first"); return false; }
|
||||
catch { return true; }
|
||||
}, root);
|
||||
expect(failed).toBe(true);
|
||||
const before = requests;
|
||||
broken = false;
|
||||
const length = await page.evaluate(async (base) => {
|
||||
const { createSceneResourceCache } = await import(base + "resourceCache.mjs");
|
||||
return (await createSceneResourceCache(location.origin + base).load("range-probe.bin", "first")).byteLength;
|
||||
}, root);
|
||||
expect(length).toBe(bytes.length);
|
||||
// The valid first segment survives; only the rejected final segment is fetched again.
|
||||
expect(requests - before).toBe(1);
|
||||
});
|
||||
}
|
||||
|
||||
test("下载中断后刷新页面，从已保存的分段继续下载", async ({ page }) => {
|
||||
const bytes = Buffer.alloc(2 * 1048576 + 16, 9);
|
||||
let disconnected = true;
|
||||
const ranges: string[] = [];
|
||||
await page.route("**/resume-probe.bin*", (route) => {
|
||||
const range = route.request().headers().range;
|
||||
ranges.push(range ?? "whole-file");
|
||||
if (!range) return route.abort("failed");
|
||||
const match = /^bytes=(\d+)-(\d+)$/.exec(range)!;
|
||||
const start = Number(match[1]);
|
||||
const end = Math.min(Number(match[2]), bytes.length - 1);
|
||||
if (disconnected && start > 0) return route.abort("failed");
|
||||
return route.fulfill({ status: 206, headers: { "content-range": `bytes ${start}-${end}/${bytes.length}` }, body: bytes.subarray(start, end + 1) });
|
||||
});
|
||||
await page.goto(root + "manifest.json");
|
||||
const load = (base: string) => page.evaluate(async (base) => {
|
||||
const { createSceneResourceCache } = await import(base + "resourceCache.mjs");
|
||||
try {
|
||||
const data = await createSceneResourceCache(location.origin + base).load("resume-probe.bin", "first");
|
||||
return { length: data.byteLength, failed: false };
|
||||
} catch { return { failed: true }; }
|
||||
}, base);
|
||||
expect(await load(root)).toEqual({ failed: true });
|
||||
expect(ranges.filter(range => range === "bytes=1048576-2097151")).toHaveLength(3);
|
||||
disconnected = false;
|
||||
ranges.length = 0;
|
||||
await page.reload();
|
||||
expect(await load(root)).toEqual({ length: bytes.length, failed: false });
|
||||
expect(ranges).toEqual(["bytes=1048576-2097151", "bytes=2097152-2097167"]);
|
||||
});
|
||||
|
||||
test("临时 HTTP 503 自动重试，成功后才写入缓存", async ({ page }) => {
|
||||
let requests = 0;
|
||||
await page.route("**/retry-probe.json*", (route) => {
|
||||
requests++;
|
||||
return requests < 3 ? route.fulfill({ status: 503, body: "unavailable" }) : route.fulfill({ json: { ok: true } });
|
||||
});
|
||||
await page.goto(root + "manifest.json");
|
||||
const result = await page.evaluate(async (base) => {
|
||||
const { createSceneResourceCache } = await import(base + "resourceCache.mjs");
|
||||
const stages: string[] = [];
|
||||
const cache = createSceneResourceCache(location.origin + base, ({ stage }: { stage: string }) => stages.push(stage));
|
||||
const data = await cache.load("retry-probe.json", "first", (data: ArrayBuffer) => JSON.parse(new TextDecoder().decode(data)));
|
||||
return { data, retries: stages.filter(stage => stage === "retry").length };
|
||||
}, root);
|
||||
expect(result).toEqual({ data: { ok: true }, retries: 2 });
|
||||
expect(requests).toBe(3);
|
||||
});
|
||||
|
||||
test("服务器返回空的完整响应时只解析一次，不循环下载", async ({ page }) => {
|
||||
let requests = 0;
|
||||
await page.route("**/empty-probe.json*", (route) => { requests++; return route.fulfill({ body: "" }); });
|
||||
await page.goto(root + "manifest.json");
|
||||
const failed = await page.evaluate(async (base) => {
|
||||
const { createSceneResourceCache } = await import(base + "resourceCache.mjs");
|
||||
try {
|
||||
await createSceneResourceCache(location.origin + base).load("empty-probe.json", "first", (data: ArrayBuffer) => JSON.parse(new TextDecoder().decode(data)));
|
||||
return false;
|
||||
} catch { return true; }
|
||||
}, root);
|
||||
expect(failed).toBe(true);
|
||||
expect(requests).toBe(1);
|
||||
});
|
||||
|
||||
@@ -32,12 +32,13 @@ export function reportProgress(update) {
|
||||
const done = values.filter(item => item.stage === 'ready').length;
|
||||
const loaded = values.reduce((sum, item) => sum + item.loaded, 0);
|
||||
const cached = values.filter(item => item.stage === 'cache').length;
|
||||
const retrying = values.some(item => item.stage === 'retry');
|
||||
const parsing = values.some(item => item.stage === 'parse');
|
||||
const downloading = values.some(item => item.stage === 'download');
|
||||
progress.max = Math.max(1, values.length);
|
||||
progress.value = done;
|
||||
title.textContent = `正在载入场景资源 ${done} / ${values.length}`;
|
||||
detail.textContent = `${parsing ? '正在解析模型' : downloading ? '正在下载资源' : cached ? '正在读取本地缓存' : '正在准备场景'} · 已读取 ${formatBytes(loaded)}`;
|
||||
detail.textContent = `${retrying ? '连接中断，正在从断点重试' : parsing ? '正在解析模型' : downloading ? '正在下载资源' : cached ? '正在读取本地缓存' : '正在准备场景'} · 已读取 ${formatBytes(loaded)}`;
|
||||
}
|
||||
|
||||
export function finishLoading() {
|
||||
|
||||
@@ -36,8 +36,8 @@
|
||||
</div>
|
||||
<output id="qa" hidden></output>
|
||||
<script type="module">
|
||||
import {failLoading} from './loadingProgress.mjs?v=35-resource-cache';
|
||||
import('./preview.mjs?v=35-resource-cache').catch(failLoading);
|
||||
import {failLoading} from './loadingProgress.mjs?v=36-resumable-cache';
|
||||
import('./preview.mjs?v=36-resumable-cache').catch(failLoading);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import {createRenderEffects} from './render-effects.mjs';
|
||||
import {createCameraNavigation,framePose} from './camera-navigation.mjs?v=35-resource-cache';
|
||||
import {createSceneResourceCache} from './resourceCache.mjs?v=35-resource-cache';
|
||||
import {beginLoading,reportProgress,finishLoading,failLoading} from './loadingProgress.mjs?v=35-resource-cache';
|
||||
import {createCameraNavigation,framePose} from './camera-navigation.mjs?v=36-resumable-cache';
|
||||
import {createSceneResourceCache} from './resourceCache.mjs?v=36-resumable-cache';
|
||||
import {beginLoading,reportProgress,finishLoading,failLoading} from './loadingProgress.mjs?v=36-resumable-cache';
|
||||
import {createAssetInspector} from './asset-inspector.mjs?v=29-platform2';
|
||||
import * as THREE from 'three';
|
||||
import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js';
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
const DATABASE = 'tjwater-scene-assets-v1';
|
||||
const STORE = 'resources';
|
||||
const REQUEST_TIMEOUT_MS = 30_000;
|
||||
const CHUNK_BYTES = 1024 * 1024;
|
||||
const MAX_ATTEMPTS = 3;
|
||||
|
||||
function openDatabase() {
|
||||
return new Promise(resolve => {
|
||||
@@ -54,39 +56,111 @@ export function createSceneResourceCache(baseUrl, onProgress = () => {}) {
|
||||
|
||||
// Revisioned URLs also keep the browser's HTTP cache in sync with the manifest.
|
||||
if (revision) url.searchParams.set('v', revision);
|
||||
const controller = new AbortController();
|
||||
let timer;
|
||||
const resetTimeout = () => {
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(() => controller.abort(), REQUEST_TIMEOUT_MS);
|
||||
};
|
||||
report('download');
|
||||
resetTimeout();
|
||||
let data;
|
||||
try {
|
||||
const response = await fetch(url, {signal:controller.signal, cache:'no-cache'});
|
||||
if (!response.ok) throw Error('HTTP ' + response.status);
|
||||
const total = Number(response.headers.get('content-length')) || 0;
|
||||
if (response.body) {
|
||||
const reader = response.body.getReader();
|
||||
const chunks = [];
|
||||
let loaded = 0;
|
||||
while (true) {
|
||||
const {done, value} = await reader.read();
|
||||
if (done) break;
|
||||
chunks.push(value); loaded += value.byteLength;
|
||||
report('download', loaded, total); resetTimeout();
|
||||
const partialKey = key + '#partial';
|
||||
let chunks = [], loaded = 0, total = 0;
|
||||
if (storage && revision) {
|
||||
try {
|
||||
const partial = await transact(storage, 'readonly', store => store.get(partialKey));
|
||||
if (partial?.revision === revision && Number.isSafeInteger(partial.total) && partial.total > 0 &&
|
||||
Array.isArray(partial.chunks) && partial.chunks.length &&
|
||||
partial.chunks.every(chunk => chunk instanceof ArrayBuffer && chunk.byteLength > 0 && chunk.byteLength <= CHUNK_BYTES)) {
|
||||
const size = partial.chunks.reduce((sum, chunk) => sum + chunk.byteLength, 0);
|
||||
if (size <= partial.total) { chunks = partial.chunks; loaded = size; total = partial.total; }
|
||||
}
|
||||
const bytes = new Uint8Array(loaded);
|
||||
} catch { /* A denied partial cache does not prevent downloading. */ }
|
||||
}
|
||||
|
||||
async function downloadPart() {
|
||||
const controller = new AbortController();
|
||||
let timer;
|
||||
const resetTimeout = () => {
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(() => controller.abort(), REQUEST_TIMEOUT_MS);
|
||||
};
|
||||
resetTimeout();
|
||||
try {
|
||||
const end = total ? Math.min(loaded + CHUNK_BYTES, total) - 1 : loaded + CHUNK_BYTES - 1;
|
||||
const response = await fetch(url, {signal:controller.signal, cache:'no-cache', headers:{Range:`bytes=${loaded}-${end}`}});
|
||||
if (!response.ok) {
|
||||
const error = Error('HTTP ' + response.status);
|
||||
error.retryable = [408, 429, 500, 502, 503, 504].includes(response.status);
|
||||
throw error;
|
||||
}
|
||||
let partTotal = 0, expected = 0;
|
||||
if (response.status === 206) {
|
||||
const range = /^bytes (\d+)-(\d+)\/(\d+)$/.exec(response.headers.get('content-range') ?? '');
|
||||
const start = Number(range?.[1]), last = Number(range?.[2]);
|
||||
partTotal = Number(range?.[3]);
|
||||
if (!range || start !== loaded || last < start || last > end || last >= partTotal ||
|
||||
!Number.isSafeInteger(partTotal) || (total && total !== partTotal)) {
|
||||
throw Error('资源分段响应无效');
|
||||
}
|
||||
expected = last - start + 1;
|
||||
} else {
|
||||
if (loaded) throw Error('服务器未按断点返回资源');
|
||||
// Servers without Range support can still return an ordinary complete response.
|
||||
partTotal = Number(response.headers.get('content-length')) || 0;
|
||||
}
|
||||
const buffers = [];
|
||||
let size = 0;
|
||||
if (response.body) {
|
||||
const reader = response.body.getReader();
|
||||
try {
|
||||
while (true) {
|
||||
const {done, value} = await reader.read();
|
||||
if (done) break;
|
||||
buffers.push(value); size += value.byteLength;
|
||||
if (expected && size > expected) throw Error('资源分段长度无效');
|
||||
report('download', loaded + size, partTotal); resetTimeout();
|
||||
}
|
||||
} finally { await reader.cancel().catch(() => {}); }
|
||||
} else {
|
||||
const buffer = new Uint8Array(await response.arrayBuffer());
|
||||
buffers.push(buffer); size = buffer.byteLength;
|
||||
}
|
||||
if (expected && size !== expected) throw Error('资源分段不完整');
|
||||
const bytes = new Uint8Array(size);
|
||||
let offset = 0;
|
||||
for (const chunk of chunks) { bytes.set(chunk, offset); offset += chunk.byteLength; }
|
||||
data = bytes.buffer;
|
||||
} else {
|
||||
data = await response.arrayBuffer();
|
||||
for (const buffer of buffers) { bytes.set(buffer, offset); offset += buffer.byteLength; }
|
||||
return {data:bytes.buffer, total:response.status === 206 ? partTotal : size, ranged:response.status === 206};
|
||||
} catch (error) {
|
||||
controller.abort();
|
||||
throw error;
|
||||
} finally { clearTimeout(timer); }
|
||||
}
|
||||
|
||||
report('download', loaded, total);
|
||||
try {
|
||||
while (!total || loaded < total) {
|
||||
let part;
|
||||
for (let attempt = 0; attempt < MAX_ATTEMPTS; attempt++) {
|
||||
try { part = await downloadPart(); break; }
|
||||
catch (error) {
|
||||
// Permanent HTTP/contract errors stop; temporary transport/server errors can recover.
|
||||
if (!error.retryable && !(error instanceof TypeError) && error.name !== 'AbortError' && error.message !== '资源分段不完整') throw error;
|
||||
if (attempt + 1 === MAX_ATTEMPTS) throw error;
|
||||
report('retry', loaded, total);
|
||||
await new Promise(resolve => setTimeout(resolve, 300 * (attempt + 1)));
|
||||
}
|
||||
}
|
||||
chunks.push(part.data); loaded += part.data.byteLength; total = part.total;
|
||||
if (storage && revision && part.ranged) {
|
||||
try { await transact(storage, 'readwrite', store => store.put({url:partialKey, revision, total, chunks})); }
|
||||
catch { /* Storage denied/full: retain the in-memory download. */ }
|
||||
}
|
||||
if (!part.ranged) break;
|
||||
}
|
||||
} catch (error) {
|
||||
throw Error(file + '：' + (controller.signal.aborted ? '下载超时，请重试' : error.message));
|
||||
} finally { clearTimeout(timer); }
|
||||
throw Error(file + '：' + (error.name === 'AbortError' ? '下载超时，请重试' : error.message));
|
||||
}
|
||||
const bytes = new Uint8Array(loaded);
|
||||
let offset = 0;
|
||||
for (const chunk of chunks) { bytes.set(new Uint8Array(chunk), offset); offset += chunk.byteLength; }
|
||||
const data = bytes.buffer;
|
||||
if (storage) {
|
||||
try { await transact(storage, 'readwrite', store => store.delete(partialKey)); }
|
||||
catch { /* Completed bytes can still be parsed when storage is unavailable. */ }
|
||||
}
|
||||
|
||||
report('parse', data.byteLength, data.byteLength);
|
||||
// Validate/parse before persisting so an HTML error page or bad GLB cannot poison the cache.
|
||||
|
||||
@@ -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);
|
||||
const [, init] = jest.mocked(apiFetch).mock.calls[0];
|
||||
expect(JSON.parse(String(init?.body))).toMatchObject({
|
||||
expect(apiFetch).toHaveBeenCalledTimes(2);
|
||||
const bodies = jest.mocked(apiFetch).mock.calls.map(([, init]) => JSON.parse(String(init?.body)));
|
||||
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);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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 {
|
||||
return await fetchElementHistory(
|
||||
uniqueFeatureInfos.map(([id, elementType]) => ({
|
||||
element_id: id.trim(),
|
||||
element_type: elementType.toLowerCase() as "pipe" | "junction",
|
||||
})),
|
||||
range,
|
||||
type === "none"
|
||||
? "observed"
|
||||
: type === "scheme"
|
||||
? "analysis_comparison"
|
||||
: "realtime_comparison",
|
||||
schemeRunId,
|
||||
signal,
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("[HistoryDataPanel] 从后端获取数据失败:", error);
|
||||
throw error;
|
||||
const elements = uniqueFeatureInfos.map(([id, elementType]) => ({
|
||||
element_id: id.trim(),
|
||||
element_type: elementType.toLowerCase() as "pipe" | "junction",
|
||||
}));
|
||||
if (type === "scheme") {
|
||||
const [online, analysis] = await Promise.all([
|
||||
fetchElementHistory(
|
||||
elements, range, "realtime_comparison", undefined, signal,
|
||||
),
|
||||
fetchElementHistory(
|
||||
elements, range, "analysis_comparison", schemeRunId, signal,
|
||||
),
|
||||
]);
|
||||
// 两次聚合查询均返回监测序列，只保留在线查询中的一份。
|
||||
const series = [
|
||||
...online.series,
|
||||
...analysis.series.filter((item) => item.source === "analysis_simulation"),
|
||||
];
|
||||
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 deviceIds = useMemo(
|
||||
() => featureInfos.map(([id]) => id),
|
||||
[featureInfos]
|
||||
const timeConfig = useTimelineTimeConfig();
|
||||
const stepSeconds = parseHydraulicStepSeconds(timeConfig.properties["HYDRAULIC TIMESTEP"])
|
||||
?? timeConfig.stepMinutes * 60;
|
||||
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>(() => {
|
||||
if (start_time) {
|
||||
const parsedStart = dayjs(start_time);
|
||||
if (parsedStart.isValid()) {
|
||||
return parsedStart;
|
||||
}
|
||||
}
|
||||
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();
|
||||
});
|
||||
useEffect(() => {
|
||||
if (!rangeForContext || (
|
||||
rangeForContext.startTime === start_time && rangeForContext.endTime === end_time
|
||||
)) return;
|
||||
setSelectedRange({ key: rangeKey, from, to, startTime: start_time, endTime: end_time });
|
||||
}, [rangeForContext, rangeKey, from, to, start_time, end_time]);
|
||||
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 (start_time) {
|
||||
const parsedStart = dayjs(start_time);
|
||||
if (parsedStart.isValid()) {
|
||||
setFrom((prev) => (parsedStart.isSame(prev) ? prev : parsedStart));
|
||||
}
|
||||
}
|
||||
if (end_time) {
|
||||
const parsedEnd = dayjs(end_time);
|
||||
if (parsedEnd.isValid()) {
|
||||
setTo((prev) => (parsedEnd.isSame(prev) ? prev : parsedEnd));
|
||||
}
|
||||
}
|
||||
}, [start_time, end_time]);
|
||||
if (type !== "scheme" || !runId) return;
|
||||
let cancelled = false;
|
||||
getAnalysisScheme(runId).then(
|
||||
(run) => {
|
||||
if (!cancelled) {
|
||||
setSchemeState({ runId, context: getAnalysisHistoryContext(run) });
|
||||
}
|
||||
},
|
||||
() => {
|
||||
if (!cancelled) {
|
||||
setSchemeState({ runId, error: "无法读取事件方案，请刷新重试" });
|
||||
}
|
||||
},
|
||||
);
|
||||
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) => {
|
||||
if (!hasDevices) {
|
||||
async () => {
|
||||
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,
|
||||
runId,
|
||||
type === "scheme" && schemeContext && !schemeContext.simulationRunId
|
||||
? "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) {
|
||||
handleFetch("device-change");
|
||||
} else {
|
||||
setTimeSeries([]);
|
||||
setHistorySeries([]);
|
||||
}
|
||||
}, [handleFetch, hasDevices]);
|
||||
void handleFetch();
|
||||
}, [handleFetch]);
|
||||
|
||||
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"}
|
||||
onClick={() => handleFetch("manual")}
|
||||
disabled={
|
||||
!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",
|
||||
|
||||
@@ -38,7 +38,7 @@ import {
|
||||
type SceneRuntimeState,
|
||||
} from "./sceneProtocol";
|
||||
|
||||
const SCENE_URL = "/three-dimensional/zjb/v29/preview.html?host=platform2&v=35-resource-cache";
|
||||
const SCENE_URL = "/three-dimensional/zjb/v29/preview.html?host=platform2&v=36-resumable-cache";
|
||||
const SCENE_LOAD_TIMEOUT_MS = 120_000;
|
||||
|
||||
const initialRuntimeState: SceneRuntimeState = {
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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].values["P-1_sim"]).toBeCloseTo(83.3333333334);
|
||||
expect(points[0].timestamp).toBe("2026-09-01T00:00:00.000Z");
|
||||
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]);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -49,8 +49,10 @@ const SOURCE_SUFFIX: Record<HistorySource, string> = {
|
||||
analysis_simulation: "scheme_sim",
|
||||
};
|
||||
|
||||
export const historySeriesKey = (series: ElementHistorySeries) =>
|
||||
`${series.device_id ?? series.element_id}_${SOURCE_SUFFIX[series.source]}`;
|
||||
export const historySeriesKey = (series: ElementHistorySeries) => {
|
||||
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) =>
|
||||
`${series.device_id ?? series.element_id} (${historySourceLabel(series.source)})`;
|
||||
export const historySeriesLabel = (series: ElementHistorySeries) => {
|
||||
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(
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
@@ -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 };
|
||||
};
|
||||
Reference in New Issue
Block a user