sealks
584 lines
23 KiB
JavaScript
584 lines
23 KiB
JavaScript
const { createApp } = Vue;
|
|
|
|
const APP_VERSION = "4.0.0-vue3";
|
|
const tileId = location.pathname.startsWith("/output/") ? location.pathname.split("/").pop() : "left";
|
|
const isPreview = new URLSearchParams(location.search).get("preview") === "1";
|
|
const nodeStorageKey = `led-platform-node-id-${tileId}`;
|
|
|
|
function createSceneDefinitions() {
|
|
return [
|
|
{
|
|
id: "overview",
|
|
title: "LED 大屏投放平台",
|
|
kicker: "GLOBAL WALL OVERVIEW",
|
|
headline: "双 GPU 本地渲染，统一时间轴同步",
|
|
copy: "左右输出端各自渲染半屏，场景、动作、地图相机和动画由同一个服务端时间轴驱动。",
|
|
metrics: [
|
|
{ label: "逻辑宽度", value: "14880", trend: "px" },
|
|
{ label: "逻辑高度", value: "3510", trend: "px" },
|
|
{ label: "输出节点", value: "2", trend: "GPU servers" },
|
|
{ label: "帧同步", value: "ACK", trend: "barrier" },
|
|
],
|
|
lines: ["line-a", "line-b", "line-c"],
|
|
nodes: [
|
|
{ id: "control", label: "控制服务", value: "ACTIVE", x: 720, y: 620, tone: "cyan" },
|
|
{ id: "left", label: "左侧 tile", value: "7440px", x: 3400, y: 1100, tone: "blue" },
|
|
{ id: "right", label: "右侧 tile", value: "7440px", x: 7100, y: 880, tone: "orange" },
|
|
{ id: "wall", label: "LED 控制器", value: "8 INPUT", x: 10300, y: 1260, tone: "cyan" },
|
|
],
|
|
events: [
|
|
{ time: "T+00", title: "场景统一", detail: "prepare / commit 协议" },
|
|
{ time: "T+02", title: "时间校准", detail: "RTT 采样与 serverNow" },
|
|
{ time: "T+04", title: "本地渲染", detail: "两端分别绘制 tile" },
|
|
],
|
|
},
|
|
{
|
|
id: "energy",
|
|
title: "能源驾驶舱",
|
|
kicker: "ENERGY GRID COMMAND",
|
|
headline: "源网荷储一体化调度",
|
|
copy: "实时监控园区供电、储能、负荷趋势和削峰策略，支持模式切换与调度策略下发。",
|
|
metrics: [
|
|
{ label: "实时功率", value: "8.42", trend: "MW" },
|
|
{ label: "储能 SOC", value: "72", trend: "%" },
|
|
{ label: "负载趋势", value: "+3.8", trend: "%" },
|
|
{ label: "调度策略", value: "均衡", trend: "auto" },
|
|
],
|
|
lines: ["line-a", "line-d", "line-e"],
|
|
nodes: [
|
|
{ id: "grid", label: "园区供电", value: "稳定", x: 850, y: 760, tone: "cyan" },
|
|
{ id: "storage", label: "储能系统", value: "72%", x: 3900, y: 520, tone: "blue" },
|
|
{ id: "load", label: "业务负载", value: "8.42MW", x: 7600, y: 980, tone: "orange" },
|
|
{ id: "strategy", label: "调度策略", value: "均衡", x: 10800, y: 620, tone: "cyan" },
|
|
],
|
|
events: [
|
|
{ time: "09:12", title: "负载预测上调", detail: "未来 15 分钟 +3.8%" },
|
|
{ time: "09:18", title: "储能响应", detail: "2 组电池进入待命" },
|
|
{ time: "09:23", title: "策略校验", detail: "削峰阈值未触发" },
|
|
],
|
|
},
|
|
{
|
|
id: "security",
|
|
title: "安防态势",
|
|
kicker: "SECURITY SITUATION",
|
|
headline: "视频墙、告警与区域联动",
|
|
copy: "多路视频、门禁、消防与巡检事件按统一时间轴联动，支持局部告警动作同步触发。",
|
|
metrics: [
|
|
{ label: "在线摄像", value: "128", trend: "channels" },
|
|
{ label: "风险指数", value: "17", trend: "low" },
|
|
{ label: "巡检任务", value: "42", trend: "running" },
|
|
{ label: "联动告警", value: "4", trend: "active" },
|
|
],
|
|
lines: ["line-b", "line-c", "line-f"],
|
|
nodes: [
|
|
{ id: "north", label: "北区通道", value: "关注", x: 980, y: 880, tone: "orange" },
|
|
{ id: "center", label: "中心机房", value: "正常", x: 4200, y: 530, tone: "cyan" },
|
|
{ id: "gate", label: "门禁系统", value: "1 异常", x: 7550, y: 1200, tone: "orange" },
|
|
{ id: "fire", label: "消防联动", value: "待命", x: 10900, y: 760, tone: "blue" },
|
|
],
|
|
events: [
|
|
{ time: "10:31", title: "门禁异常联动", detail: "B2 机房侧门" },
|
|
{ time: "10:34", title: "人员聚集", detail: "北侧通道" },
|
|
{ time: "10:40", title: "巡检完成", detail: "A 区 12 个点位" },
|
|
],
|
|
},
|
|
{
|
|
id: "command",
|
|
title: "指挥调度",
|
|
kicker: "MISSION CONTROL",
|
|
headline: "跨区域任务派发与执行闭环",
|
|
copy: "事件、队伍、资源和任务状态聚合在同一个指挥视图，适合现场大屏调度与演练展示。",
|
|
metrics: [
|
|
{ label: "事件队列", value: "23", trend: "items" },
|
|
{ label: "响应队伍", value: "11", trend: "teams" },
|
|
{ label: "闭环率", value: "96", trend: "%" },
|
|
{ label: "平均响应", value: "4.6", trend: "min" },
|
|
],
|
|
lines: ["line-a", "line-e", "line-f"],
|
|
nodes: [
|
|
{ id: "hq", label: "指挥中心", value: "ONLINE", x: 920, y: 620, tone: "cyan" },
|
|
{ id: "team", label: "响应队伍", value: "11", x: 4100, y: 1080, tone: "blue" },
|
|
{ id: "resource", label: "资源池", value: "82%", x: 7500, y: 620, tone: "orange" },
|
|
{ id: "task", label: "任务闭环", value: "96%", x: 10800, y: 1050, tone: "cyan" },
|
|
],
|
|
events: [
|
|
{ time: "11:05", title: "任务派发", detail: "3 支队伍已接收" },
|
|
{ time: "11:08", title: "资源锁定", detail: "移动电源与无人机" },
|
|
{ time: "11:16", title: "阶段回执", detail: "现场反馈正常" },
|
|
],
|
|
},
|
|
{
|
|
id: "transport",
|
|
title: "交通运行",
|
|
kicker: "TRANSPORT NETWORK",
|
|
headline: "路网运行与运力调度",
|
|
copy: "车流、站点、路段拥堵与运力资源在大屏上联动呈现，支持重点区域快速聚焦。",
|
|
metrics: [
|
|
{ label: "车流指数", value: "68", trend: "stable" },
|
|
{ label: "拥堵路段", value: "7", trend: "segments" },
|
|
{ label: "准点率", value: "91", trend: "%" },
|
|
{ label: "可用运力", value: "84", trend: "%" },
|
|
],
|
|
lines: ["line-b", "line-d", "line-f"],
|
|
nodes: [
|
|
{ id: "hub", label: "枢纽站", value: "91%", x: 760, y: 980, tone: "cyan" },
|
|
{ id: "road", label: "主干路", value: "68", x: 3900, y: 540, tone: "orange" },
|
|
{ id: "fleet", label: "运力池", value: "84%", x: 7600, y: 1150, tone: "blue" },
|
|
{ id: "signal", label: "信号优化", value: "运行", x: 10900, y: 700, tone: "cyan" },
|
|
],
|
|
events: [
|
|
{ time: "12:20", title: "车流高峰", detail: "东向主线压力上升" },
|
|
{ time: "12:26", title: "信号配时", detail: "绿波方案已下发" },
|
|
{ time: "12:31", title: "运力补偿", detail: "3 条线路加车" },
|
|
],
|
|
},
|
|
{
|
|
id: "dataflow",
|
|
title: "数据中枢",
|
|
kicker: "AI DATA FABRIC",
|
|
headline: "数据流入、计算与智能分析",
|
|
copy: "多源数据经过实时管道进入计算集群，AI 推理结果以指标、事件和预测态势输出。",
|
|
metrics: [
|
|
{ label: "接入数据", value: "2.8", trend: "TB/h" },
|
|
{ label: "计算任务", value: "418", trend: "jobs" },
|
|
{ label: "AI 推理", value: "36", trend: "models" },
|
|
{ label: "延迟 P95", value: "42", trend: "ms" },
|
|
],
|
|
lines: ["line-a", "line-c", "line-d"],
|
|
nodes: [
|
|
{ id: "ingest", label: "数据接入", value: "2.8TB/h", x: 780, y: 650, tone: "cyan" },
|
|
{ id: "compute", label: "计算集群", value: "418", x: 4100, y: 1050, tone: "blue" },
|
|
{ id: "ai", label: "AI 推理", value: "36", x: 7700, y: 580, tone: "orange" },
|
|
{ id: "output", label: "指标输出", value: "42ms", x: 10800, y: 1160, tone: "cyan" },
|
|
],
|
|
events: [
|
|
{ time: "13:02", title: "数据流入峰值", detail: "北区视频数据增加" },
|
|
{ time: "13:07", title: "模型推理完成", detail: "风险识别批次 19" },
|
|
{ time: "13:10", title: "指标写入", detail: "P95 延迟 42ms" },
|
|
],
|
|
},
|
|
];
|
|
}
|
|
|
|
createApp({
|
|
data() {
|
|
return {
|
|
tile: null,
|
|
state: null,
|
|
activeView: "overview",
|
|
sceneDefinitions: createSceneDefinitions(),
|
|
ws: null,
|
|
nodeId: sessionStorage.getItem(nodeStorageKey),
|
|
serverOffsetFromDateMs: 0,
|
|
bestRttMs: Number.POSITIVE_INFINITY,
|
|
clockSamples: [],
|
|
scheduledJobs: new Map(),
|
|
frameCount: 0,
|
|
fps: 0,
|
|
frameTimeMs: 0,
|
|
droppedFrames: 0,
|
|
lastFrameAt: performance.now(),
|
|
lastFpsAt: performance.now(),
|
|
pageIndex: 0,
|
|
paused: false,
|
|
motionMode: "flow",
|
|
focusTarget: "core",
|
|
pulseActive: false,
|
|
clockText: "--:--:--",
|
|
hudText: "",
|
|
ctx: null,
|
|
isPreview,
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
sceneTitle() {
|
|
return this.sceneDefinitions.find((scene) => scene.id === this.activeView)?.title || "LED 大屏投放平台";
|
|
},
|
|
},
|
|
|
|
async mounted() {
|
|
if (!this.nodeId) {
|
|
const randomId = crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(16).slice(2);
|
|
this.nodeId = `${tileId}-${randomId}`;
|
|
sessionStorage.setItem(nodeStorageKey, this.nodeId);
|
|
}
|
|
this.ctx = this.$refs.motionCanvas.getContext("2d", { alpha: true });
|
|
await this.bootstrap();
|
|
this.tickClock();
|
|
setInterval(() => this.tickClock(), 1000);
|
|
setInterval(() => this.syncClock(), 2000);
|
|
if (!isPreview) setInterval(() => this.sendTelemetry(), 1000);
|
|
requestAnimationFrame((now) => this.renderLoop(now));
|
|
},
|
|
|
|
methods: {
|
|
async bootstrap() {
|
|
const response = await fetch(`/api/bootstrap/${tileId}`);
|
|
const data = await response.json();
|
|
this.tile = data.tile;
|
|
this.applyState(data.state);
|
|
this.layout();
|
|
if (isPreview) {
|
|
this.connectPreviewWs();
|
|
} else {
|
|
this.connectWs();
|
|
}
|
|
window.addEventListener("resize", () => this.layout());
|
|
window.addEventListener("keydown", (event) => {
|
|
if (event.key.toLowerCase() === "h") this.$refs.hud.hidden = !this.$refs.hud.hidden;
|
|
});
|
|
},
|
|
|
|
layout() {
|
|
if (!this.tile) return;
|
|
const scale = Math.min(window.innerWidth / this.tile.width, window.innerHeight / this.tile.height);
|
|
const tileRenderWidth = this.tile.width * scale;
|
|
const tileRenderHeight = this.tile.height * scale;
|
|
const root = document.documentElement;
|
|
root.style.setProperty("--wall-width", `${this.tile.wall_width}px`);
|
|
root.style.setProperty("--wall-height", `${this.tile.wall_height}px`);
|
|
root.style.setProperty("--tile-render-width", `${tileRenderWidth}px`);
|
|
root.style.setProperty("--tile-render-height", `${tileRenderHeight}px`);
|
|
root.style.setProperty("--scale", `${scale}`);
|
|
root.style.setProperty("--offset-x", `${-this.tile.x * scale}px`);
|
|
root.style.setProperty("--offset-y", `${-this.tile.y * scale}px`);
|
|
const appEl = document.querySelector("#outputApp") || (this.$el?.style ? this.$el : null);
|
|
const canvas = document.querySelector("#motionCanvas") || this.$refs.motionCanvas;
|
|
if (appEl) {
|
|
appEl.style.width = `${tileRenderWidth}px`;
|
|
appEl.style.height = `${tileRenderHeight}px`;
|
|
}
|
|
if (canvas) {
|
|
canvas.width = this.tile.wall_width;
|
|
canvas.height = this.tile.wall_height;
|
|
if (!this.ctx) this.ctx = canvas.getContext("2d", { alpha: true });
|
|
}
|
|
},
|
|
|
|
applyState(nextState) {
|
|
this.state = nextState;
|
|
this.activeView = nextState.active_view || "overview";
|
|
this.pulse();
|
|
},
|
|
|
|
scheduleJob(message, kind, callback) {
|
|
const applyAtMs = Number(message.payload.apply_at_ms);
|
|
this.scheduledJobs.set(message.command_id, {
|
|
id: message.command_id,
|
|
kind,
|
|
applyAtMs,
|
|
message,
|
|
callback,
|
|
});
|
|
},
|
|
|
|
drainScheduledJobs() {
|
|
if (!this.scheduledJobs.size) return;
|
|
const now = this.serverNowMs();
|
|
const ready = Array.from(this.scheduledJobs.values())
|
|
.filter((job) => now >= job.applyAtMs)
|
|
.sort((a, b) => a.applyAtMs - b.applyAtMs);
|
|
for (const job of ready) {
|
|
this.scheduledJobs.delete(job.id);
|
|
const late = now - job.applyAtMs > 50;
|
|
job.callback(late);
|
|
}
|
|
},
|
|
|
|
async prepareScene(message) {
|
|
const startedAtMs = this.serverNowMs();
|
|
try {
|
|
await this.prepareSceneFrame(message);
|
|
this.sendAck(message, "prepared", {
|
|
prepare_duration_ms: Math.max(0, this.serverNowMs() - startedAtMs),
|
|
});
|
|
} catch (error) {
|
|
this.sendAck(message, "error", {
|
|
error: error instanceof Error ? error.message : String(error),
|
|
});
|
|
}
|
|
},
|
|
|
|
async prepareSceneFrame(message) {
|
|
if (typeof window.ledPlatformPrepareScene === "function") {
|
|
await window.ledPlatformPrepareScene({
|
|
commandId: message.command_id,
|
|
tile: this.tile,
|
|
state: message.payload.state,
|
|
scene: message.payload.scene,
|
|
});
|
|
return;
|
|
}
|
|
await Promise.all((message.payload.scene?.preload || []).map((url) => this.preloadUrl(url)));
|
|
await this.waitForFrames(2);
|
|
},
|
|
|
|
preloadUrl(url) {
|
|
return new Promise((resolve) => {
|
|
const image = new Image();
|
|
image.onload = resolve;
|
|
image.onerror = resolve;
|
|
image.src = url;
|
|
});
|
|
},
|
|
|
|
waitForFrames(count = 2) {
|
|
return new Promise((resolve) => {
|
|
const step = (remaining) => {
|
|
if (remaining <= 0) {
|
|
resolve();
|
|
return;
|
|
}
|
|
requestAnimationFrame(() => step(remaining - 1));
|
|
};
|
|
step(count);
|
|
});
|
|
},
|
|
|
|
commitScene(message) {
|
|
this.scheduleJob(message, "scene", (late) => {
|
|
this.applyState(message.payload.state);
|
|
this.sendAck(message, late ? "late" : "committed");
|
|
});
|
|
},
|
|
|
|
commitScenePreview(message) {
|
|
this.scheduleJob(message, "scene-preview", () => {
|
|
this.applyState(message.payload.state);
|
|
});
|
|
},
|
|
|
|
runComponentAction(message) {
|
|
this.scheduleJob(message, "action", (late) => {
|
|
this.applyAction(message.payload.action, message.payload.args || {});
|
|
this.sendAck(message, late ? "late" : "action_committed");
|
|
});
|
|
},
|
|
|
|
runComponentActionPreview(message) {
|
|
this.scheduleJob(message, "action-preview", () => {
|
|
this.applyAction(message.payload.action, message.payload.args || {});
|
|
});
|
|
},
|
|
|
|
applyAction(action, args) {
|
|
if (action === "page.next" || action === "page.prev") {
|
|
const views = this.sceneDefinitions.map((scene) => scene.id);
|
|
const direction = action === "page.next" ? 1 : -1;
|
|
this.pageIndex = (views.indexOf(this.activeView) + direction + views.length) % views.length;
|
|
this.applyState({
|
|
...this.state,
|
|
active_view: views[this.pageIndex],
|
|
version: (this.state?.version || 0) + 1,
|
|
});
|
|
} else if (action === "energy.mode") {
|
|
this.updateMetric("energy", "调度策略", args.mode || "削峰", "manual");
|
|
} else if (action === "security.alert") {
|
|
this.prependEvent("security", {
|
|
time: this.clockText,
|
|
title: args.text || "新增联动告警",
|
|
detail: "结构化动作同步触发",
|
|
});
|
|
} else if (action === "motion.mode") {
|
|
this.motionMode = args.mode || "flow";
|
|
} else if (action === "scenario.focus") {
|
|
this.focusTarget = args.target || "core";
|
|
} else if (action === "timeline.pause") {
|
|
this.paused = true;
|
|
} else if (action === "timeline.resume") {
|
|
this.paused = false;
|
|
}
|
|
this.pulse();
|
|
},
|
|
|
|
updateMetric(sceneId, label, value, trend) {
|
|
const scene = this.sceneDefinitions.find((item) => item.id === sceneId);
|
|
const metric = scene?.metrics.find((item) => item.label === label);
|
|
if (!metric) return;
|
|
metric.value = value;
|
|
metric.trend = trend;
|
|
},
|
|
|
|
prependEvent(sceneId, event) {
|
|
const scene = this.sceneDefinitions.find((item) => item.id === sceneId);
|
|
if (!scene) return;
|
|
scene.events.unshift(event);
|
|
scene.events = scene.events.slice(0, 5);
|
|
},
|
|
|
|
timelineMs() {
|
|
if (!this.state) return 0;
|
|
return Math.max(0, this.serverNowMs() - this.state.scene_started_at_ms);
|
|
},
|
|
|
|
renderLoop(now) {
|
|
this.frameTimeMs = now - this.lastFrameAt;
|
|
if (this.frameTimeMs > 40) this.droppedFrames += 1;
|
|
this.frameCount += 1;
|
|
if (now - this.lastFpsAt >= 1000) {
|
|
this.fps = this.frameCount * 1000 / (now - this.lastFpsAt);
|
|
this.frameCount = 0;
|
|
this.lastFpsAt = now;
|
|
}
|
|
this.lastFrameAt = now;
|
|
|
|
this.drainScheduledJobs();
|
|
this.drawMotion(this.paused ? 0 : this.timelineMs());
|
|
this.updateHud();
|
|
requestAnimationFrame((nextNow) => this.renderLoop(nextNow));
|
|
},
|
|
|
|
drawMotion(t) {
|
|
const ctx = this.ctx;
|
|
if (!ctx || !this.tile) return;
|
|
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
|
const count = this.motionMode === "orbit" ? 46 : this.motionMode === "pulse" ? 34 : 28;
|
|
ctx.globalAlpha = 0.72;
|
|
for (let i = 0; i < count; i += 1) {
|
|
const modeFactor = this.motionMode === "pulse" ? 0.84 : this.motionMode === "orbit" ? 1.24 : 1;
|
|
const phase = t / (980 / modeFactor) + i * 0.39;
|
|
const x = (Math.sin(phase * 0.41 + i) * 0.5 + 0.5) * ctx.canvas.width;
|
|
const y = (Math.cos(phase * 0.33 + i * 0.2) * 0.5 + 0.5) * ctx.canvas.height;
|
|
const radius = 240 + (i % 7) * 74;
|
|
const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius * 3.2);
|
|
gradient.addColorStop(0, i % 3 ? "rgba(56,189,248,0.22)" : "rgba(20,184,166,0.24)");
|
|
gradient.addColorStop(0.42, "rgba(37,99,235,0.08)");
|
|
gradient.addColorStop(1, "rgba(0,0,0,0)");
|
|
ctx.fillStyle = gradient;
|
|
ctx.beginPath();
|
|
ctx.arc(x, y, radius * 3.2, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
}
|
|
ctx.globalAlpha = 1;
|
|
},
|
|
|
|
pulse() {
|
|
this.pulseActive = false;
|
|
requestAnimationFrame(() => {
|
|
this.pulseActive = true;
|
|
setTimeout(() => {
|
|
this.pulseActive = false;
|
|
}, 560);
|
|
});
|
|
},
|
|
|
|
syncClock() {
|
|
if (!this.ws || this.ws.readyState !== WebSocket.OPEN) return;
|
|
this.ws.send(JSON.stringify({
|
|
type: "clock_ping",
|
|
node_id: this.nodeId,
|
|
client_send_ms: Date.now(),
|
|
client_send_perf_ms: performance.now(),
|
|
}));
|
|
},
|
|
|
|
handleClockPong(payload) {
|
|
const receivePerf = performance.now();
|
|
const sendPerf = Number(payload.client_send_perf_ms);
|
|
const sendWall = Number(payload.client_send_ms);
|
|
const serverTime = Number(payload.server_time_ms);
|
|
if (!Number.isFinite(sendWall) || !Number.isFinite(serverTime)) return;
|
|
const perfRtt = Number.isFinite(sendPerf) ? receivePerf - sendPerf : Number.NaN;
|
|
const wallRtt = Date.now() - sendWall;
|
|
const rtt = Number.isFinite(perfRtt) && perfRtt >= 0 ? perfRtt : wallRtt;
|
|
const midpointWall = sendWall + rtt / 2;
|
|
const offset = serverTime - midpointWall;
|
|
this.clockSamples.push({ rtt, offset });
|
|
this.clockSamples = this.clockSamples.sort((a, b) => a.rtt - b.rtt).slice(0, 8);
|
|
this.bestRttMs = this.clockSamples[0].rtt;
|
|
this.serverOffsetFromDateMs = this.clockSamples
|
|
.slice(0, 4)
|
|
.reduce((sum, item) => sum + item.offset, 0) / Math.min(4, this.clockSamples.length);
|
|
},
|
|
|
|
serverNowMs() {
|
|
return Date.now() + this.serverOffsetFromDateMs;
|
|
},
|
|
|
|
sendAck(message, status, extra = {}) {
|
|
if (!this.ws || this.ws.readyState !== WebSocket.OPEN || !this.tile) return;
|
|
this.ws.send(JSON.stringify({
|
|
type: "ack",
|
|
command_id: message.command_id,
|
|
node_id: this.nodeId,
|
|
tile_id: this.tile.id,
|
|
status,
|
|
client_time_ms: Date.now(),
|
|
server_estimated_ms: this.serverNowMs(),
|
|
clock_offset_ms: this.serverOffsetFromDateMs,
|
|
rtt_ms: Number.isFinite(this.bestRttMs) ? this.bestRttMs : null,
|
|
...extra,
|
|
}));
|
|
},
|
|
|
|
sendTelemetry() {
|
|
if (!this.ws || this.ws.readyState !== WebSocket.OPEN || !this.tile) return;
|
|
this.ws.send(JSON.stringify({
|
|
type: "telemetry",
|
|
node_id: this.nodeId,
|
|
tile_id: this.tile.id,
|
|
fps: this.fps,
|
|
frame_time_ms: this.frameTimeMs,
|
|
dropped_frames: this.droppedFrames,
|
|
}));
|
|
},
|
|
|
|
connectWs() {
|
|
const protocol = location.protocol === "https:" ? "wss" : "ws";
|
|
this.ws = new WebSocket(`${protocol}://${location.host}/ws/output/${this.tile.id}`);
|
|
this.ws.addEventListener("open", () => {
|
|
this.ws.send(JSON.stringify({
|
|
type: "hello",
|
|
node_id: this.nodeId,
|
|
tile_id: this.tile.id,
|
|
app_version: APP_VERSION,
|
|
user_agent: navigator.userAgent,
|
|
}));
|
|
for (let i = 0; i < 5; i += 1) setTimeout(() => this.syncClock(), i * 120);
|
|
});
|
|
this.ws.addEventListener("close", () => setTimeout(() => this.connectWs(), 1200));
|
|
this.ws.addEventListener("message", (event) => this.handleOutputMessage(JSON.parse(event.data)));
|
|
},
|
|
|
|
connectPreviewWs() {
|
|
const protocol = location.protocol === "https:" ? "wss" : "ws";
|
|
this.ws = new WebSocket(`${protocol}://${location.host}/ws/admin`);
|
|
this.ws.addEventListener("open", () => {
|
|
for (let i = 0; i < 5; i += 1) setTimeout(() => this.syncClock(), i * 120);
|
|
});
|
|
this.ws.addEventListener("close", () => setTimeout(() => this.connectPreviewWs(), 1200));
|
|
this.ws.addEventListener("message", (event) => this.handlePreviewMessage(JSON.parse(event.data)));
|
|
},
|
|
|
|
handleOutputMessage(message) {
|
|
if (message.type === "clock_pong") this.handleClockPong(message.payload);
|
|
if (message.type === "state") this.scheduleJob({ command_id: message.command_id, payload: message.payload }, "state", () => this.applyState(message.payload.state || message.payload));
|
|
if (message.type === "prepare_scene") void this.prepareScene(message);
|
|
if (message.type === "commit_scene") this.commitScene(message);
|
|
if (message.type === "component_action") this.runComponentAction(message);
|
|
},
|
|
|
|
handlePreviewMessage(message) {
|
|
if (message.type === "clock_pong") this.handleClockPong(message.payload);
|
|
if (message.type === "state") this.scheduleJob({ command_id: message.command_id, payload: message.payload }, "state", () => this.applyState(message.payload.state || message.payload));
|
|
if (message.type === "prepare_scene") this.commitScenePreview(message);
|
|
if (message.type === "commit_scene") this.commitScenePreview(message);
|
|
if (message.type === "component_action") this.runComponentActionPreview(message);
|
|
},
|
|
|
|
updateHud() {
|
|
if (!this.tile) return;
|
|
const rtt = Number.isFinite(this.bestRttMs) ? `${Math.round(this.bestRttMs)}ms` : "--";
|
|
const scale = Number.parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--scale"));
|
|
const previewNote = scale < 0.75 ? " | 本地预览已缩小，生产 4K 拼接桌面会更清晰" : "";
|
|
const mode = isPreview ? "PREVIEW" : this.nodeId.slice(0, 18);
|
|
this.hudText = `${this.tile.id} | ${mode} | ${this.motionMode} | ${this.fps.toFixed(1)}fps | ${this.frameTimeMs.toFixed(1)}ms | rtt ${rtt} | jobs ${this.scheduledJobs.size}${previewNote}`;
|
|
},
|
|
|
|
tickClock() {
|
|
this.clockText = new Date().toLocaleTimeString("zh-CN", { hour12: false });
|
|
},
|
|
},
|
|
}).mount("#outputApp");
|