Refactor LED control UI to Vue3
This commit is contained in:
sealks
@@ -13,6 +13,11 @@ STATIC_DIR = WEB_DIR / "static"
|
||||
|
||||
router = APIRouter()
|
||||
|
||||
HTML_HEADERS = {
|
||||
"Cache-Control": "no-store",
|
||||
"Clear-Site-Data": '"cache"',
|
||||
}
|
||||
|
||||
ALLOWED_ACTIONS = {
|
||||
"page.next",
|
||||
"page.prev",
|
||||
@@ -20,12 +25,14 @@ ALLOWED_ACTIONS = {
|
||||
"security.alert",
|
||||
"timeline.pause",
|
||||
"timeline.resume",
|
||||
"motion.mode",
|
||||
"scenario.focus",
|
||||
}
|
||||
|
||||
|
||||
@router.get("/", include_in_schema=False)
|
||||
async def admin_index() -> FileResponse:
|
||||
return FileResponse(STATIC_DIR / "admin" / "index.html")
|
||||
return FileResponse(STATIC_DIR / "admin" / "index.html", headers=HTML_HEADERS)
|
||||
|
||||
|
||||
@router.get("/output/{tile_id}", include_in_schema=False)
|
||||
@@ -34,12 +41,12 @@ async def output_index(tile_id: str) -> FileResponse:
|
||||
tiles.get(tile_id)
|
||||
except KeyError as exc:
|
||||
raise HTTPException(status_code=404, detail=f"Unknown output tile: {tile_id}") from exc
|
||||
return FileResponse(STATIC_DIR / "output" / "index.html")
|
||||
return FileResponse(STATIC_DIR / "output" / "index.html", headers=HTML_HEADERS)
|
||||
|
||||
|
||||
@router.get("/wall-app", include_in_schema=False)
|
||||
async def wall_app() -> FileResponse:
|
||||
return FileResponse(STATIC_DIR / "output" / "index.html")
|
||||
return FileResponse(STATIC_DIR / "output" / "index.html", headers=HTML_HEADERS)
|
||||
|
||||
|
||||
@router.get("/favicon.ico", include_in_schema=False)
|
||||
@@ -106,7 +113,6 @@ async def switch_scene(scene_id: str) -> dict:
|
||||
)
|
||||
sync.register_command(commit, payload)
|
||||
await hub.broadcast(prepare, "admin", "outputs")
|
||||
await hub.broadcast(commit, "admin", "outputs")
|
||||
return payload
|
||||
|
||||
|
||||
@@ -149,4 +155,3 @@ async def sync_status() -> dict:
|
||||
async def telemetry(sample: PerformanceSample) -> dict:
|
||||
sync.telemetry(sample)
|
||||
return {"ok": True}
|
||||
|
||||
|
||||
@@ -90,6 +90,19 @@ async def output_ws(websocket: WebSocket, tile_id: str) -> None:
|
||||
node_id = str(raw.get("node_id") or node_id or "")
|
||||
sync.clock_quality(node_id, raw.get("clock_offset_ms"), raw.get("rtt_ms"))
|
||||
record = sync.ack(raw)
|
||||
release_record = None
|
||||
if record and raw.get("status") == "prepared":
|
||||
release_record = sync.release_if_prepared(record.command_id)
|
||||
if release_record:
|
||||
await hub.broadcast(
|
||||
CommandEnvelope(
|
||||
type=CommandType.COMMIT_SCENE,
|
||||
command_id=release_record.command_id,
|
||||
payload=release_record.payload,
|
||||
),
|
||||
"admin",
|
||||
"outputs",
|
||||
)
|
||||
await hub.broadcast(
|
||||
CommandEnvelope(
|
||||
type=CommandType.ACK,
|
||||
|
||||
@@ -128,9 +128,19 @@ class CommandRecord(BaseModel):
|
||||
apply_at_ms: int
|
||||
created_at_ms: int = Field(default_factory=epoch_ms)
|
||||
expires_at_ms: int
|
||||
released_at_ms: int | None = None
|
||||
payload: dict[str, Any] = Field(default_factory=dict)
|
||||
acks: list[dict[str, Any]] = Field(default_factory=list)
|
||||
|
||||
@property
|
||||
def prepared(self) -> bool:
|
||||
prepared_tiles = {
|
||||
ack.get("tile_id")
|
||||
for ack in self.acks
|
||||
if ack.get("status") in {AckStatus.PREPARED, AckStatus.COMMITTED}
|
||||
}
|
||||
return set(self.target_tiles).issubset({str(tile) for tile in prepared_tiles if tile})
|
||||
|
||||
@property
|
||||
def complete(self) -> bool:
|
||||
completed = {
|
||||
|
||||
@@ -1,18 +1,26 @@
|
||||
from fastapi import FastAPI
|
||||
from fastapi.staticfiles import StaticFiles
|
||||
from starlette.responses import Response
|
||||
|
||||
from led_platform.api.http import STATIC_DIR, router as http_router
|
||||
from led_platform.api.ws import router as ws_router
|
||||
from led_platform.core.config import get_settings
|
||||
|
||||
|
||||
class NoCacheStaticFiles(StaticFiles):
|
||||
async def get_response(self, path: str, scope: dict) -> Response:
|
||||
response = await super().get_response(path, scope)
|
||||
response.headers["Cache-Control"] = "no-store"
|
||||
return response
|
||||
|
||||
|
||||
def create_app() -> FastAPI:
|
||||
app = FastAPI(
|
||||
title="LED Wall Projection Platform",
|
||||
version="1.0.0",
|
||||
description="Tile-aware dual GPU-server LED wall control and synchronization platform.",
|
||||
)
|
||||
app.mount("/static", StaticFiles(directory=STATIC_DIR), name="static")
|
||||
app.mount("/static", NoCacheStaticFiles(directory=STATIC_DIR), name="static")
|
||||
app.include_router(http_router)
|
||||
app.include_router(ws_router)
|
||||
return app
|
||||
|
||||
@@ -65,6 +65,15 @@ class SyncCoordinator:
|
||||
record.acks.append(ack_payload)
|
||||
return record
|
||||
|
||||
def release_if_prepared(self, command_id: str) -> CommandRecord | None:
|
||||
with self._lock:
|
||||
self._prune_locked()
|
||||
record = self._commands.get(command_id)
|
||||
if not record or record.released_at_ms is not None or not record.prepared:
|
||||
return None
|
||||
record.released_at_ms = epoch_ms()
|
||||
return record
|
||||
|
||||
def clock_quality(
|
||||
self,
|
||||
node_id: str | None,
|
||||
|
||||
@@ -7,25 +7,95 @@
|
||||
<link rel="stylesheet" href="/static/admin/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main class="shell">
|
||||
<main id="adminApp" class="shell" v-cloak>
|
||||
<header class="topbar">
|
||||
<div>
|
||||
<h1>LED 大屏投放控制台</h1>
|
||||
<p id="stateText">正在连接控制服务...</p>
|
||||
<p>{{ statusText }}</p>
|
||||
</div>
|
||||
<div class="connection">
|
||||
<span id="wsDot" class="dot"></span>
|
||||
<span id="wsText">WebSocket</span>
|
||||
<span class="dot" :class="{ ok: wsConnected }"></span>
|
||||
<span>{{ wsText }}</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="grid">
|
||||
<section class="consoleLayout">
|
||||
<section class="panel previewPanel">
|
||||
<div class="panelHead">
|
||||
<div>
|
||||
<h2>画面回显</h2>
|
||||
<p class="panelHint">14880 x 3510 拼接预览，只读不 ACK</p>
|
||||
</div>
|
||||
<div class="previewLinks">
|
||||
<a href="/output/left" target="_blank">左输出</a>
|
||||
<a href="/output/right" target="_blank">右输出</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="previewGrid">
|
||||
<article class="previewTile">
|
||||
<header>
|
||||
<strong>left</strong>
|
||||
<span>{{ previewLabels.left }}</span>
|
||||
</header>
|
||||
<iframe title="left 输出预览" src="/output/left?preview=1"></iframe>
|
||||
</article>
|
||||
<article class="previewTile">
|
||||
<header>
|
||||
<strong>right</strong>
|
||||
<span>{{ previewLabels.right }}</span>
|
||||
</header>
|
||||
<iframe title="right 输出预览" src="/output/right?preview=1"></iframe>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel scenes">
|
||||
<div class="panelHead">
|
||||
<h2>场景切换</h2>
|
||||
<button id="refreshBtn">刷新</button>
|
||||
<button type="button" @click="loadScenes">刷新</button>
|
||||
</div>
|
||||
<div id="sceneList" class="sceneList"></div>
|
||||
<div class="sceneList">
|
||||
<article
|
||||
v-for="scene in scenes"
|
||||
:key="scene.id"
|
||||
class="scene"
|
||||
:class="{ active: scene.id === state?.active_scene_id }"
|
||||
>
|
||||
<div>
|
||||
<h3>{{ scene.name }}</h3>
|
||||
<p>{{ scene.view }} | {{ scene.url }}</p>
|
||||
<p>{{ scene.description }}</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
:disabled="busySceneId === scene.id"
|
||||
@click="switchScene(scene.id)"
|
||||
>
|
||||
{{ busySceneId === scene.id ? "计划中" : "切换" }}
|
||||
</button>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<div class="panelHead">
|
||||
<h2>局部动作</h2>
|
||||
</div>
|
||||
<div class="actionGrid">
|
||||
<button
|
||||
v-for="action in quickActions"
|
||||
:key="action.action + JSON.stringify(action.args || {})"
|
||||
type="button"
|
||||
@click="postAction(action.action, action.args || {})"
|
||||
>
|
||||
{{ action.label }}
|
||||
</button>
|
||||
</div>
|
||||
<label class="customAction">
|
||||
<span>自定义结构化动作</span>
|
||||
<textarea v-model="actionInput" rows="3"></textarea>
|
||||
</label>
|
||||
<button type="button" class="primary" @click="runCustomAction">同步执行</button>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
@@ -38,30 +108,54 @@
|
||||
<a href="/api/sync/status" target="_blank">同步状态</a>
|
||||
<a href="/docs" target="_blank">API 文档</a>
|
||||
</div>
|
||||
<div id="syncStatus" class="syncStatus"></div>
|
||||
<div class="syncStatus">
|
||||
<div class="syncRow">
|
||||
<span>输出节点</span>
|
||||
<strong>{{ nodes.length }}/{{ targetTiles.length }}</strong>
|
||||
</div>
|
||||
<div v-for="node in nodes" :key="node.node_id" class="syncRow">
|
||||
<span>{{ node.tile_id }} {{ node.node_id.slice(0, 16) }}</span>
|
||||
<span>{{ nodeMetric(node) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<div class="panelHead">
|
||||
<h2>局部动作</h2>
|
||||
<div class="panelHead compact">
|
||||
<div>
|
||||
<h2>生产命令回显</h2>
|
||||
<p class="panelHint">真实输出端 ACK，不代表上方预览</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actionGrid">
|
||||
<button data-action="page.prev">上一页</button>
|
||||
<button data-action="page.next">下一页</button>
|
||||
<button data-action="energy.mode" data-args='{"mode":"削峰"}'>削峰模式</button>
|
||||
<button data-action="energy.mode" data-args='{"mode":"保供"}'>保供模式</button>
|
||||
<button data-action="security.alert" data-args='{"text":"门禁异常联动"}'>新增告警</button>
|
||||
<button data-action="timeline.pause">暂停时间轴</button>
|
||||
<button data-action="timeline.resume">恢复时间轴</button>
|
||||
<div class="commandEcho">
|
||||
<div v-if="recentCommands.length === 0" class="emptyEcho">暂无命令回显</div>
|
||||
<article v-for="command in recentCommands" :key="command.command_id" class="echoCard">
|
||||
<div class="echoHead">
|
||||
<div>
|
||||
<h4>{{ commandTitle(command) }}</h4>
|
||||
<p>{{ command.command_id.slice(0, 12) }} | 计划 {{ formatClock(command.apply_at_ms) }} | {{ releaseText(command) }}</p>
|
||||
<p>{{ commandNote(command) }}</p>
|
||||
</div>
|
||||
<span class="echoState" :class="commandStateClass(command)">{{ commandStateText(command) }}</span>
|
||||
</div>
|
||||
<div class="tileEchoGrid">
|
||||
<div
|
||||
v-for="tileId in targetTiles"
|
||||
:key="command.command_id + tileId"
|
||||
class="tileEcho"
|
||||
:class="tileEchoClass(command, tileId)"
|
||||
>
|
||||
<span>{{ tileId }}</span>
|
||||
<strong>{{ tileEchoLabel(command, tileId) }}</strong>
|
||||
<small>{{ tileEchoDetail(command, tileId) }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<label class="customAction">
|
||||
<span>自定义结构化动作</span>
|
||||
<textarea id="actionInput" rows="5" placeholder='{"action":"security.alert","args":{"text":"消防通道占用"}}'></textarea>
|
||||
</label>
|
||||
<button id="runActionBtn" class="primary">同步执行</button>
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
<script src="/static/vendor/vue.global.prod.js"></script>
|
||||
<script src="/static/admin/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,155 +1,250 @@
|
||||
const sceneList = document.querySelector("#sceneList");
|
||||
const stateText = document.querySelector("#stateText");
|
||||
const wsDot = document.querySelector("#wsDot");
|
||||
const wsText = document.querySelector("#wsText");
|
||||
const refreshBtn = document.querySelector("#refreshBtn");
|
||||
const runActionBtn = document.querySelector("#runActionBtn");
|
||||
const actionInput = document.querySelector("#actionInput");
|
||||
const syncStatus = document.querySelector("#syncStatus");
|
||||
const { createApp } = Vue;
|
||||
|
||||
let scenes = [];
|
||||
let state = null;
|
||||
let syncSnapshot = null;
|
||||
createApp({
|
||||
data() {
|
||||
return {
|
||||
scenes: [],
|
||||
state: null,
|
||||
syncSnapshot: null,
|
||||
wsConnected: false,
|
||||
wsText: "WebSocket",
|
||||
statusText: "正在连接控制服务...",
|
||||
busySceneId: null,
|
||||
actionInput: '{"action":"security.alert","args":{"text":"消防通道占用"}}',
|
||||
quickActions: [
|
||||
{ label: "上一页", action: "page.prev" },
|
||||
{ label: "下一页", action: "page.next" },
|
||||
{ label: "削峰模式", action: "energy.mode", args: { mode: "削峰" } },
|
||||
{ label: "保供模式", action: "energy.mode", args: { mode: "保供" } },
|
||||
{ label: "轨迹流动", action: "motion.mode", args: { mode: "flow" } },
|
||||
{ label: "脉冲扫描", action: "motion.mode", args: { mode: "pulse" } },
|
||||
{ label: "节点巡航", action: "motion.mode", args: { mode: "orbit" } },
|
||||
{ label: "新增告警", action: "security.alert", args: { text: "门禁异常联动" } },
|
||||
{ label: "核心区域", action: "scenario.focus", args: { target: "core" } },
|
||||
{ label: "边界区域", action: "scenario.focus", args: { target: "edge" } },
|
||||
{ label: "暂停时间轴", action: "timeline.pause" },
|
||||
{ label: "恢复时间轴", action: "timeline.resume" },
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
async function loadScenes() {
|
||||
const res = await fetch("/api/scenes");
|
||||
const data = await res.json();
|
||||
scenes = data.scenes;
|
||||
state = data.state;
|
||||
renderScenes();
|
||||
}
|
||||
computed: {
|
||||
nodes() {
|
||||
return this.syncSnapshot?.nodes || [];
|
||||
},
|
||||
targetTiles() {
|
||||
return this.syncSnapshot?.target_tiles || [];
|
||||
},
|
||||
recentCommands() {
|
||||
return [...(this.syncSnapshot?.commands || [])].slice(-6).reverse();
|
||||
},
|
||||
connectedTiles() {
|
||||
return new Set(this.nodes.map((node) => node.tile_id));
|
||||
},
|
||||
previewLabels() {
|
||||
return {
|
||||
left: this.state ? `${this.state.active_scene_id} / v${this.state.version}` : "--",
|
||||
right: this.state ? `${this.state.active_scene_id} / v${this.state.version}` : "--",
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
async function loadSyncStatus() {
|
||||
const res = await fetch("/api/sync/status");
|
||||
syncSnapshot = await res.json();
|
||||
renderSyncStatus();
|
||||
}
|
||||
async mounted() {
|
||||
await Promise.all([this.loadScenes(), this.loadSyncStatus()]);
|
||||
this.connectWs();
|
||||
setInterval(() => this.loadSyncStatus(), 2500);
|
||||
},
|
||||
|
||||
function renderScenes() {
|
||||
if (!state) return;
|
||||
stateText.textContent = `当前场景：${state.active_scene_id}，版本 ${state.version}`;
|
||||
sceneList.innerHTML = "";
|
||||
for (const scene of scenes) {
|
||||
const item = document.createElement("article");
|
||||
item.className = `scene ${scene.id === state.active_scene_id ? "active" : ""}`;
|
||||
item.innerHTML = `
|
||||
<div>
|
||||
<h3>${scene.name}</h3>
|
||||
<p>${scene.view} | ${scene.url}</p>
|
||||
<p>${scene.description ?? ""}</p>
|
||||
</div>
|
||||
<button data-scene="${scene.id}">切换</button>
|
||||
`;
|
||||
item.querySelector("button").addEventListener("click", () => switchScene(scene.id));
|
||||
sceneList.append(item);
|
||||
}
|
||||
}
|
||||
methods: {
|
||||
async loadScenes() {
|
||||
const res = await fetch("/api/scenes");
|
||||
const data = await res.json();
|
||||
this.scenes = data.scenes;
|
||||
this.state = data.state;
|
||||
this.statusText = `当前场景：${this.state.active_scene_id}，版本 ${this.state.version}`;
|
||||
},
|
||||
|
||||
function renderSyncStatus() {
|
||||
if (!syncSnapshot) return;
|
||||
const nodes = syncSnapshot.nodes || [];
|
||||
const commands = (syncSnapshot.commands || []).slice(-5).reverse();
|
||||
const rows = [];
|
||||
rows.push(`<div class="syncRow"><span>输出节点</span><strong>${nodes.length}/${syncSnapshot.target_tiles.length}</strong></div>`);
|
||||
async loadSyncStatus() {
|
||||
const res = await fetch("/api/sync/status");
|
||||
this.syncSnapshot = await res.json();
|
||||
},
|
||||
|
||||
for (const node of nodes) {
|
||||
const fps = node.fps == null ? "--" : node.fps.toFixed(1);
|
||||
const frame = node.frame_time_ms == null ? "--" : `${node.frame_time_ms.toFixed(1)}ms`;
|
||||
const rtt = node.rtt_ms == null ? "--" : `${Math.round(node.rtt_ms)}ms`;
|
||||
const offset = node.clock_offset_ms == null ? "--" : `${Math.round(node.clock_offset_ms)}ms`;
|
||||
rows.push(`<div class="syncRow"><span>${node.tile_id} ${node.node_id.slice(0, 16)}</span><span>${fps}fps / ${frame} / rtt ${rtt} / offset ${offset}</span></div>`);
|
||||
}
|
||||
async switchScene(sceneId) {
|
||||
this.busySceneId = sceneId;
|
||||
try {
|
||||
const res = await fetch(`/api/scenes/${sceneId}/switch`, { method: "POST" });
|
||||
if (!res.ok) {
|
||||
alert(await res.text());
|
||||
return;
|
||||
}
|
||||
const data = await res.json();
|
||||
this.state = data.state;
|
||||
this.statusText = `计划切换：${this.state.active_scene_id}，提交时间 ${this.formatClock(data.apply_at_ms)}`;
|
||||
await this.loadSyncStatus();
|
||||
} finally {
|
||||
this.busySceneId = null;
|
||||
}
|
||||
},
|
||||
|
||||
for (const command of commands) {
|
||||
const ackText = command.acks.map((ack) => `${ack.tile_id}:${ack.status}`).join(", ") || "等待 ACK";
|
||||
rows.push(`<div class="syncRow"><span>${command.command_type} ${command.command_id.slice(0, 8)}</span><span>${command.complete ? "完成" : "进行中"} | ${ackText}</span></div>`);
|
||||
}
|
||||
async postAction(action, args = {}, target = "wall") {
|
||||
const res = await fetch("/api/actions", {
|
||||
method: "POST",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify({ target, action, args }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
alert(await res.text());
|
||||
return;
|
||||
}
|
||||
await this.loadSyncStatus();
|
||||
},
|
||||
|
||||
syncStatus.innerHTML = rows.join("");
|
||||
}
|
||||
async runCustomAction() {
|
||||
const raw = this.actionInput.trim();
|
||||
if (!raw) return;
|
||||
let payload;
|
||||
try {
|
||||
payload = JSON.parse(raw);
|
||||
} catch {
|
||||
payload = { action: raw, args: {} };
|
||||
}
|
||||
await this.postAction(payload.action, payload.args || {}, payload.target || "wall");
|
||||
},
|
||||
|
||||
async function switchScene(sceneId) {
|
||||
const res = await fetch(`/api/scenes/${sceneId}/switch`, { method: "POST" });
|
||||
if (!res.ok) {
|
||||
alert(await res.text());
|
||||
return;
|
||||
}
|
||||
const data = await res.json();
|
||||
state = data.state;
|
||||
const time = new Date(data.apply_at_ms).toLocaleTimeString("zh-CN", { hour12: false });
|
||||
stateText.textContent = `计划切换：${state.active_scene_id}，提交时间 ${time}`;
|
||||
renderScenes();
|
||||
loadSyncStatus();
|
||||
}
|
||||
connectWs() {
|
||||
const protocol = location.protocol === "https:" ? "wss" : "ws";
|
||||
const ws = new WebSocket(`${protocol}://${location.host}/ws/admin`);
|
||||
ws.addEventListener("open", () => {
|
||||
this.wsConnected = true;
|
||||
this.wsText = "WebSocket 已连接";
|
||||
});
|
||||
ws.addEventListener("close", () => {
|
||||
this.wsConnected = false;
|
||||
this.wsText = "WebSocket 重连中";
|
||||
setTimeout(() => this.connectWs(), 1200);
|
||||
});
|
||||
ws.addEventListener("message", (event) => {
|
||||
const message = JSON.parse(event.data);
|
||||
if (message.type === "state") {
|
||||
this.state = message.payload.state || message.payload;
|
||||
this.statusText = `当前场景：${this.state.active_scene_id}，版本 ${this.state.version}`;
|
||||
}
|
||||
if (message.type === "prepare_scene") {
|
||||
this.state = message.payload.state;
|
||||
this.statusText = `准备切换：${this.state.active_scene_id}，等待输出端渲染，提交时间 ${this.formatClock(message.payload.apply_at_ms)}`;
|
||||
void this.loadSyncStatus();
|
||||
}
|
||||
if (message.type === "commit_scene") {
|
||||
this.state = message.payload.state;
|
||||
this.statusText = `已放行：${this.state.active_scene_id}，提交时间 ${this.formatClock(message.payload.apply_at_ms)}`;
|
||||
void this.loadSyncStatus();
|
||||
}
|
||||
if (message.type === "ack") {
|
||||
this.wsText = `${message.payload.tile_id || "node"} ${message.payload.status}`;
|
||||
void this.loadSyncStatus();
|
||||
}
|
||||
if (message.type === "heartbeat") {
|
||||
void this.loadSyncStatus();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
async function postAction(action, args = {}, target = "wall") {
|
||||
const res = await fetch("/api/actions", {
|
||||
method: "POST",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify({ target, action, args }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
alert(await res.text());
|
||||
return;
|
||||
}
|
||||
loadSyncStatus();
|
||||
}
|
||||
formatClock(ms) {
|
||||
if (!Number.isFinite(Number(ms))) return "--";
|
||||
return new Date(Number(ms)).toLocaleTimeString("zh-CN", { hour12: false });
|
||||
},
|
||||
|
||||
async function runCustomAction() {
|
||||
const raw = actionInput.value.trim();
|
||||
if (!raw) return;
|
||||
let payload;
|
||||
try {
|
||||
payload = JSON.parse(raw);
|
||||
} catch {
|
||||
payload = { action: raw, args: {} };
|
||||
}
|
||||
await postAction(payload.action, payload.args || {}, payload.target || "wall");
|
||||
}
|
||||
formatDelta(ms) {
|
||||
if (!Number.isFinite(Number(ms))) return "--";
|
||||
const value = Math.round(Number(ms));
|
||||
return value >= 1000 ? `${(value / 1000).toFixed(1)}s` : `${value}ms`;
|
||||
},
|
||||
|
||||
function connectWs() {
|
||||
const protocol = location.protocol === "https:" ? "wss" : "ws";
|
||||
const ws = new WebSocket(`${protocol}://${location.host}/ws/admin`);
|
||||
ws.addEventListener("open", () => {
|
||||
wsDot.classList.add("ok");
|
||||
wsText.textContent = "WebSocket 已连接";
|
||||
});
|
||||
ws.addEventListener("close", () => {
|
||||
wsDot.classList.remove("ok");
|
||||
wsText.textContent = "WebSocket 重连中";
|
||||
setTimeout(connectWs, 1200);
|
||||
});
|
||||
ws.addEventListener("message", (event) => {
|
||||
const message = JSON.parse(event.data);
|
||||
if (message.type === "state") {
|
||||
state = message.payload.state || message.payload;
|
||||
renderScenes();
|
||||
}
|
||||
if (["prepare_scene", "commit_scene"].includes(message.type)) {
|
||||
state = message.payload.state;
|
||||
renderScenes();
|
||||
loadSyncStatus();
|
||||
}
|
||||
if (message.type === "ack") {
|
||||
wsText.textContent = `${message.payload.tile_id || "node"} ${message.payload.status}`;
|
||||
loadSyncStatus();
|
||||
}
|
||||
if (message.type === "heartbeat") {
|
||||
loadSyncStatus();
|
||||
}
|
||||
});
|
||||
}
|
||||
nodeMetric(node) {
|
||||
const fps = node.fps == null ? "--" : node.fps.toFixed(1);
|
||||
const frame = node.frame_time_ms == null ? "--" : `${node.frame_time_ms.toFixed(1)}ms`;
|
||||
const rtt = node.rtt_ms == null ? "--" : `${Math.round(node.rtt_ms)}ms`;
|
||||
const offset = node.clock_offset_ms == null ? "--" : `${Math.round(node.clock_offset_ms)}ms`;
|
||||
return `${fps}fps / ${frame} / rtt ${rtt} / offset ${offset}`;
|
||||
},
|
||||
|
||||
refreshBtn.addEventListener("click", loadScenes);
|
||||
runActionBtn.addEventListener("click", runCustomAction);
|
||||
document.querySelectorAll("[data-action]").forEach((button) => {
|
||||
button.addEventListener("click", () => {
|
||||
const args = button.dataset.args ? JSON.parse(button.dataset.args) : {};
|
||||
postAction(button.dataset.action, args);
|
||||
});
|
||||
});
|
||||
commandTitle(command) {
|
||||
if (command.command_type === "commit_scene") {
|
||||
return `场景 ${command.payload?.state?.active_scene_id || command.command_id.slice(0, 8)}`;
|
||||
}
|
||||
if (command.command_type === "component_action") {
|
||||
return `动作 ${command.payload?.action || command.command_id.slice(0, 8)}`;
|
||||
}
|
||||
return `${command.command_type} ${command.command_id.slice(0, 8)}`;
|
||||
},
|
||||
|
||||
loadScenes();
|
||||
loadSyncStatus();
|
||||
connectWs();
|
||||
setInterval(loadSyncStatus, 2500);
|
||||
releaseText(command) {
|
||||
return command.released_at_ms
|
||||
? `放行 ${this.formatDelta(command.released_at_ms - command.created_at_ms)}`
|
||||
: "等待真实输出端渲染";
|
||||
},
|
||||
|
||||
missingTiles(command) {
|
||||
return this.targetTiles.filter((tileId) => !this.connectedTiles.has(tileId));
|
||||
},
|
||||
|
||||
commandStateText(command) {
|
||||
if (command.complete) return "生产完成";
|
||||
if (command.released_at_ms) return "已放行";
|
||||
if (this.missingTiles(command).length) return "输出未连接";
|
||||
return "等待 ACK";
|
||||
},
|
||||
|
||||
commandStateClass(command) {
|
||||
if (command.complete) return "ok";
|
||||
if (command.released_at_ms) return "ready";
|
||||
return "wait";
|
||||
},
|
||||
|
||||
commandNote(command) {
|
||||
const missing = this.missingTiles(command);
|
||||
if (missing.length) {
|
||||
return `预览已按计划更新；生产同步等待 ${missing.join(", ")} 输出端连接`;
|
||||
}
|
||||
return "预览已按计划更新；生产同步等待真实输出端 ACK";
|
||||
},
|
||||
|
||||
latestAckForTile(command, tileId) {
|
||||
return [...(command.acks || [])].reverse().find((ack) => ack.tile_id === tileId);
|
||||
},
|
||||
|
||||
tileEchoStatus(command, tileId) {
|
||||
if (!this.connectedTiles.has(tileId)) return "disconnected";
|
||||
return this.latestAckForTile(command, tileId)?.status || "waiting";
|
||||
},
|
||||
|
||||
tileEchoClass(command, tileId) {
|
||||
const status = this.tileEchoStatus(command, tileId);
|
||||
if (["committed", "action_committed"].includes(status)) return "ok";
|
||||
if (status === "prepared") return "ready";
|
||||
if (["late", "error"].includes(status)) return "bad";
|
||||
return "wait";
|
||||
},
|
||||
|
||||
tileEchoLabel(command, tileId) {
|
||||
const status = this.tileEchoStatus(command, tileId);
|
||||
return {
|
||||
disconnected: "未连接",
|
||||
waiting: "等待",
|
||||
prepared: "已渲染",
|
||||
committed: "已输出",
|
||||
action_committed: "已执行",
|
||||
late: "迟到",
|
||||
error: "错误",
|
||||
}[status] || status;
|
||||
},
|
||||
|
||||
tileEchoDetail(command, tileId) {
|
||||
if (!this.connectedTiles.has(tileId)) return `打开 /output/${tileId} 才会 ACK`;
|
||||
const ack = this.latestAckForTile(command, tileId);
|
||||
if (!ack) return "等待真实输出端 ACK";
|
||||
const rtt = ack.rtt_ms == null ? "--" : `${Math.round(ack.rtt_ms)}ms`;
|
||||
return `${this.formatClock(ack.server_received_ms)} / RTT ${rtt}`;
|
||||
},
|
||||
},
|
||||
}).mount("#adminApp");
|
||||
|
||||
@@ -9,6 +9,10 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
@@ -24,9 +28,9 @@ textarea {
|
||||
}
|
||||
|
||||
.shell {
|
||||
width: min(1280px, calc(100vw - 40px));
|
||||
width: min(1760px, calc(100vw - 24px));
|
||||
margin: 0 auto;
|
||||
padding: 28px 0 40px;
|
||||
padding: 16px 0 28px;
|
||||
}
|
||||
|
||||
.topbar,
|
||||
@@ -38,8 +42,12 @@ textarea {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.panelHead.compact {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
margin-bottom: 22px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
h1,
|
||||
@@ -50,7 +58,7 @@ p {
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
font-size: 24px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
@@ -78,27 +86,42 @@ h1 {
|
||||
box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.16);
|
||||
}
|
||||
|
||||
.grid {
|
||||
.consoleLayout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.4fr) minmax(360px, 0.8fr);
|
||||
gap: 18px;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.previewPanel {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.panel {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 0.055);
|
||||
padding: 18px;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.scenes {
|
||||
grid-row: span 2;
|
||||
.panelMeta {
|
||||
color: #94a3b8;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.panelHint {
|
||||
margin-top: 4px;
|
||||
color: #94a3b8;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
button,
|
||||
.linkGrid a {
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
@@ -115,6 +138,58 @@ button:hover,
|
||||
border-color: rgba(20, 184, 166, 0.8);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
cursor: wait;
|
||||
opacity: 0.62;
|
||||
}
|
||||
|
||||
.previewGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0;
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.09);
|
||||
border-radius: 8px;
|
||||
background: #05070a;
|
||||
}
|
||||
|
||||
.previewTile {
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: #05070a;
|
||||
}
|
||||
|
||||
.previewTile header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
min-height: 38px;
|
||||
padding: 8px 10px;
|
||||
background: rgba(255, 255, 255, 0.045);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.previewTile strong {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.previewTile a {
|
||||
color: #5eead4;
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.previewTile iframe {
|
||||
display: block;
|
||||
width: 100%;
|
||||
aspect-ratio: 7440 / 3510;
|
||||
border: 0;
|
||||
background: #05070a;
|
||||
}
|
||||
|
||||
.primary {
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
@@ -127,7 +202,8 @@ button:hover,
|
||||
.sceneList,
|
||||
.syncStatus,
|
||||
.linkGrid,
|
||||
.actionGrid {
|
||||
.actionGrid,
|
||||
.commandEcho {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
@@ -135,19 +211,19 @@ button:hover,
|
||||
.sceneList,
|
||||
.syncStatus,
|
||||
.linkGrid {
|
||||
margin-top: 14px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.linkGrid {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.scene {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 12px;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
padding: 14px;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(255, 255, 255, 0.045);
|
||||
@@ -159,13 +235,13 @@ button:hover,
|
||||
}
|
||||
|
||||
.scene h3 {
|
||||
font-size: 16px;
|
||||
margin-bottom: 6px;
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.scene p {
|
||||
color: #aeb7c2;
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
@@ -181,15 +257,105 @@ button:hover,
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.echoCard {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.09);
|
||||
border-radius: 8px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.echoHead,
|
||||
.tileEcho {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.echoHead h4 {
|
||||
margin: 0 0 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.echoHead p,
|
||||
.tileEcho small,
|
||||
.emptyEcho {
|
||||
margin: 0;
|
||||
color: #94a3b8;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.echoState,
|
||||
.tileEcho strong {
|
||||
flex: 0 0 auto;
|
||||
border-radius: 999px;
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.echoState.ok,
|
||||
.tileEcho.ok strong {
|
||||
background: rgba(34, 197, 94, 0.16);
|
||||
color: #86efac;
|
||||
}
|
||||
|
||||
.echoState.ready,
|
||||
.tileEcho.ready strong {
|
||||
background: rgba(20, 184, 166, 0.16);
|
||||
color: #5eead4;
|
||||
}
|
||||
|
||||
.echoState.wait,
|
||||
.tileEcho.wait strong {
|
||||
background: rgba(148, 163, 184, 0.14);
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
.tileEcho.bad strong {
|
||||
background: rgba(239, 68, 68, 0.16);
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
.tileEchoGrid {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.tileEcho {
|
||||
min-height: 48px;
|
||||
padding: 8px 9px;
|
||||
border-radius: 6px;
|
||||
background: rgba(255, 255, 255, 0.055);
|
||||
}
|
||||
|
||||
.tileEcho span {
|
||||
min-width: 44px;
|
||||
color: #f8fafc;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.tileEcho small {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.emptyEcho {
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
background: rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
|
||||
.actionGrid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
margin-top: 14px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.customAction {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
margin-top: 14px;
|
||||
margin-top: 10px;
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
@@ -203,14 +369,44 @@ textarea {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 1240px) {
|
||||
.consoleLayout {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.previewPanel {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.grid,
|
||||
.shell {
|
||||
width: min(100vw - 12px, 1760px);
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.consoleLayout,
|
||||
.topbar {
|
||||
grid-template-columns: 1fr;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.scenes {
|
||||
grid-row: auto;
|
||||
.previewTile header {
|
||||
min-height: 34px;
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
.linkGrid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: portrait) and (max-width: 680px) {
|
||||
.previewGrid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,61 +7,78 @@
|
||||
<link rel="stylesheet" href="/static/output/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main class="viewport">
|
||||
<section id="wall" class="wall">
|
||||
<canvas id="motionCanvas" class="motion-canvas"></canvas>
|
||||
<main id="outputApp" class="viewport" v-cloak>
|
||||
<section
|
||||
ref="wall"
|
||||
id="wall"
|
||||
class="wall"
|
||||
:class="[`theme-${activeView}`, `motion-${motionMode}`, `focus-${focusTarget}`, { pulse: pulseActive }]"
|
||||
>
|
||||
<canvas ref="motionCanvas" id="motionCanvas" class="motion-canvas"></canvas>
|
||||
<div class="grid-layer"></div>
|
||||
<div class="scan-layer"></div>
|
||||
|
||||
<header class="screen-header">
|
||||
<div>
|
||||
<p class="eyebrow">Tile-aware timeline rendering</p>
|
||||
<h1 id="sceneTitle">LED 大屏投放平台</h1>
|
||||
<p class="eyebrow">Synchronized LED Wall Platform</p>
|
||||
<h1>{{ sceneTitle }}</h1>
|
||||
</div>
|
||||
<div class="header-metrics">
|
||||
<strong id="clockText">--:--:--</strong>
|
||||
<span id="versionText">v0</span>
|
||||
<strong>{{ clockText }}</strong>
|
||||
<span>v{{ state?.version || 0 }}</span>
|
||||
<em>{{ tile?.id || "--" }} / {{ isPreview ? "PREVIEW" : "OUTPUT" }}</em>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="scene active" data-view="overview">
|
||||
<section
|
||||
v-for="scene in sceneDefinitions"
|
||||
:key="scene.id"
|
||||
class="scene"
|
||||
:class="{ active: activeView === scene.id }"
|
||||
:data-view="scene.id"
|
||||
>
|
||||
<div class="hero-copy">
|
||||
<h2>双 GPU 本地渲染，统一时间轴同步</h2>
|
||||
<p>左右输出端各自渲染半屏，但场景、动画、地图相机、视频时间由同一个服务端时间轴驱动。</p>
|
||||
<span>{{ scene.kicker }}</span>
|
||||
<h2>{{ scene.headline }}</h2>
|
||||
<p>{{ scene.copy }}</p>
|
||||
</div>
|
||||
<div id="overviewCards" class="card-grid"></div>
|
||||
<div id="timelineBars" class="timeline-bars"></div>
|
||||
</section>
|
||||
|
||||
<section class="scene" data-view="energy">
|
||||
<div class="hero-copy">
|
||||
<h2>能源驾驶舱</h2>
|
||||
<p>适合 WebGL、Three.js、地图和视频组件。生产接入时使用同一 camera state 和 serverTime 渲染。</p>
|
||||
<div class="metric-grid">
|
||||
<article v-for="metric in scene.metrics" :key="metric.label" class="metric-card">
|
||||
<span>{{ metric.label }}</span>
|
||||
<strong>{{ metric.value }}</strong>
|
||||
<small>{{ metric.trend }}</small>
|
||||
</article>
|
||||
</div>
|
||||
<div class="flow-map">
|
||||
<div class="flow-line line-a"></div>
|
||||
<div class="flow-line line-b"></div>
|
||||
<div class="flow-node node-a">园区供电</div>
|
||||
<div class="flow-node node-b">储能系统</div>
|
||||
<div class="flow-node node-c">业务负载</div>
|
||||
</div>
|
||||
<div class="side-stats">
|
||||
<article><span>实时功率</span><strong id="powerValue">8.42 MW</strong></article>
|
||||
<article><span>负载趋势</span><strong id="trendValue">+3.8%</strong></article>
|
||||
<article><span>调度策略</span><strong id="modeValue">均衡</strong></article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="scene" data-view="security">
|
||||
<div class="hero-copy">
|
||||
<h2>安防态势</h2>
|
||||
<p>视频墙、地图联动和告警卡片通过结构化动作同步触发，左右节点只按计划时间提交状态。</p>
|
||||
<div class="visual-stage">
|
||||
<div class="route-field">
|
||||
<i v-for="line in scene.lines" :key="line" :class="['route-line', line]"></i>
|
||||
</div>
|
||||
<div
|
||||
v-for="node in scene.nodes"
|
||||
:key="node.id"
|
||||
class="stage-node"
|
||||
:class="node.tone"
|
||||
:style="{ left: node.x + 'px', top: node.y + 'px' }"
|
||||
>
|
||||
<span>{{ node.label }}</span>
|
||||
<strong>{{ node.value }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div id="cameraGrid" class="camera-grid"></div>
|
||||
<div id="alertRail" class="alert-rail"></div>
|
||||
|
||||
<aside class="event-rail">
|
||||
<article v-for="event in scene.events" :key="event.title" class="event-card">
|
||||
<span>{{ event.time }}</span>
|
||||
<strong>{{ event.title }}</strong>
|
||||
<small>{{ event.detail }}</small>
|
||||
</article>
|
||||
</aside>
|
||||
</section>
|
||||
</section>
|
||||
<aside id="hud" class="hud"></aside>
|
||||
<aside ref="hud" id="hud" class="hud">{{ hudText }}</aside>
|
||||
</main>
|
||||
<script src="/static/vendor/vue.global.prod.js"></script>
|
||||
<script src="/static/output/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,332 +1,583 @@
|
||||
const APP_VERSION = "3.0.0";
|
||||
const { createApp } = Vue;
|
||||
|
||||
const wall = document.querySelector("#wall");
|
||||
const canvas = document.querySelector("#motionCanvas");
|
||||
const ctx = canvas.getContext("2d", { alpha: true });
|
||||
const hud = document.querySelector("#hud");
|
||||
const sceneTitle = document.querySelector("#sceneTitle");
|
||||
const versionText = document.querySelector("#versionText");
|
||||
const clockText = document.querySelector("#clockText");
|
||||
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}`;
|
||||
|
||||
const sceneTitles = {
|
||||
overview: "LED 大屏投放平台",
|
||||
energy: "能源驾驶舱",
|
||||
security: "安防态势",
|
||||
};
|
||||
|
||||
let tile = null;
|
||||
let state = null;
|
||||
let ws = null;
|
||||
let nodeId = sessionStorage.getItem("led-platform-node-id");
|
||||
let serverOffsetFromPerfMs = Date.now() - performance.now();
|
||||
let bestRttMs = Number.POSITIVE_INFINITY;
|
||||
let clockSamples = [];
|
||||
let scheduledJobs = new Map();
|
||||
let frameCount = 0;
|
||||
let fps = 0;
|
||||
let frameTimeMs = 0;
|
||||
let droppedFrames = 0;
|
||||
let lastFrameAt = performance.now();
|
||||
let lastFpsAt = performance.now();
|
||||
let pageIndex = 0;
|
||||
let paused = false;
|
||||
|
||||
if (!nodeId) {
|
||||
const randomId = crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(16).slice(2);
|
||||
nodeId = `${tileId}-${randomId}`;
|
||||
sessionStorage.setItem("led-platform-node-id", nodeId);
|
||||
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" },
|
||||
],
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
function serverNowMs() {
|
||||
return performance.now() + serverOffsetFromPerfMs;
|
||||
}
|
||||
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,
|
||||
};
|
||||
},
|
||||
|
||||
function clientNowMs() {
|
||||
return Date.now();
|
||||
}
|
||||
computed: {
|
||||
sceneTitle() {
|
||||
return this.sceneDefinitions.find((scene) => scene.id === this.activeView)?.title || "LED 大屏投放平台";
|
||||
},
|
||||
},
|
||||
|
||||
async function bootstrap() {
|
||||
const response = await fetch(`/api/bootstrap/${tileId}`);
|
||||
const data = await response.json();
|
||||
tile = data.tile;
|
||||
applyState(data.state);
|
||||
buildStaticContent();
|
||||
layout();
|
||||
connectWs();
|
||||
requestAnimationFrame(renderLoop);
|
||||
}
|
||||
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));
|
||||
},
|
||||
|
||||
function buildStaticContent() {
|
||||
document.querySelector("#overviewCards").innerHTML = [
|
||||
["同步模式", "时间轴"],
|
||||
["渲染节点", "双 GPU"],
|
||||
["逻辑宽度", "14880"],
|
||||
["逻辑高度", "3510"],
|
||||
["半屏宽度", "7440"],
|
||||
["目标帧率", "60"],
|
||||
].map(([label, value]) => `<article class="metric-card"><span>${label}</span><strong>${value}</strong></article>`).join("");
|
||||
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;
|
||||
});
|
||||
},
|
||||
|
||||
const bars = document.querySelector("#timelineBars");
|
||||
bars.innerHTML = "";
|
||||
for (let index = 0; index < 32; index += 1) {
|
||||
const bar = document.createElement("i");
|
||||
bar.style.height = `${180 + ((index * 137) % 760)}px`;
|
||||
bars.append(bar);
|
||||
}
|
||||
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 });
|
||||
}
|
||||
},
|
||||
|
||||
document.querySelector("#cameraGrid").innerHTML = Array.from({ length: 8 }, (_, index) => {
|
||||
const id = String(index + 1).padStart(2, "0");
|
||||
return `<article class="camera-card"><strong>CAM-${id}</strong><span>在线 | 1080P | 低延迟</span></article>`;
|
||||
}).join("");
|
||||
applyState(nextState) {
|
||||
this.state = nextState;
|
||||
this.activeView = nextState.active_view || "overview";
|
||||
this.pulse();
|
||||
},
|
||||
|
||||
document.querySelector("#alertRail").innerHTML = [
|
||||
"北侧通道人员聚集",
|
||||
"机房门禁异常",
|
||||
"消防通道占用",
|
||||
"视频质量波动",
|
||||
].map((text) => `<article class="alert-card">${text}</article>`).join("");
|
||||
}
|
||||
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,
|
||||
});
|
||||
},
|
||||
|
||||
function layout() {
|
||||
if (!tile) return;
|
||||
const scale = Math.min(window.innerWidth / tile.width, window.innerHeight / tile.height);
|
||||
document.documentElement.style.setProperty("--wall-width", `${tile.wall_width}px`);
|
||||
document.documentElement.style.setProperty("--wall-height", `${tile.wall_height}px`);
|
||||
document.documentElement.style.setProperty("--scale", `${scale}`);
|
||||
document.documentElement.style.setProperty("--offset-x", `${-tile.x * scale}px`);
|
||||
document.documentElement.style.setProperty("--offset-y", `${-tile.y * scale}px`);
|
||||
canvas.width = tile.wall_width;
|
||||
canvas.height = tile.wall_height;
|
||||
}
|
||||
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);
|
||||
}
|
||||
},
|
||||
|
||||
function applyState(nextState) {
|
||||
state = nextState;
|
||||
const view = state.active_view || "overview";
|
||||
document.querySelectorAll(".scene").forEach((scene) => {
|
||||
scene.classList.toggle("active", scene.dataset.view === view);
|
||||
});
|
||||
sceneTitle.textContent = sceneTitles[view] || sceneTitles.overview;
|
||||
versionText.textContent = `v${state.version || 0}`;
|
||||
pulse();
|
||||
}
|
||||
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),
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
function scheduleJob(message, kind, callback) {
|
||||
const applyAtMs = Number(message.payload.apply_at_ms);
|
||||
scheduledJobs.set(message.command_id, {
|
||||
id: message.command_id,
|
||||
kind,
|
||||
applyAtMs,
|
||||
message,
|
||||
callback,
|
||||
preparedAtMs: serverNowMs(),
|
||||
});
|
||||
}
|
||||
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);
|
||||
},
|
||||
|
||||
function drainScheduledJobs() {
|
||||
if (!scheduledJobs.size) return;
|
||||
const now = serverNowMs();
|
||||
const ready = Array.from(scheduledJobs.values())
|
||||
.filter((job) => now >= job.applyAtMs)
|
||||
.sort((a, b) => a.applyAtMs - b.applyAtMs);
|
||||
for (const job of ready) {
|
||||
scheduledJobs.delete(job.id);
|
||||
const late = now - job.applyAtMs > 50;
|
||||
job.callback(late);
|
||||
}
|
||||
}
|
||||
preloadUrl(url) {
|
||||
return new Promise((resolve) => {
|
||||
const image = new Image();
|
||||
image.onload = resolve;
|
||||
image.onerror = resolve;
|
||||
image.src = url;
|
||||
});
|
||||
},
|
||||
|
||||
function prepareScene(message) {
|
||||
sendAck(message, "prepared");
|
||||
}
|
||||
waitForFrames(count = 2) {
|
||||
return new Promise((resolve) => {
|
||||
const step = (remaining) => {
|
||||
if (remaining <= 0) {
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
requestAnimationFrame(() => step(remaining - 1));
|
||||
};
|
||||
step(count);
|
||||
});
|
||||
},
|
||||
|
||||
function commitScene(message) {
|
||||
scheduleJob(message, "scene", (late) => {
|
||||
applyState(message.payload.state);
|
||||
sendAck(message, late ? "late" : "committed");
|
||||
});
|
||||
}
|
||||
commitScene(message) {
|
||||
this.scheduleJob(message, "scene", (late) => {
|
||||
this.applyState(message.payload.state);
|
||||
this.sendAck(message, late ? "late" : "committed");
|
||||
});
|
||||
},
|
||||
|
||||
function runComponentAction(message) {
|
||||
scheduleJob(message, "action", (late) => {
|
||||
applyAction(message.payload.action, message.payload.args || {});
|
||||
sendAck(message, late ? "late" : "action_committed");
|
||||
});
|
||||
}
|
||||
commitScenePreview(message) {
|
||||
this.scheduleJob(message, "scene-preview", () => {
|
||||
this.applyState(message.payload.state);
|
||||
});
|
||||
},
|
||||
|
||||
function applyAction(action, args) {
|
||||
if (action === "page.next") {
|
||||
pageIndex += 1;
|
||||
const views = ["overview", "energy", "security"];
|
||||
applyState({ ...state, active_view: views[pageIndex % views.length], version: (state?.version || 0) + 1 });
|
||||
} else if (action === "page.prev") {
|
||||
pageIndex = Math.max(0, pageIndex - 1);
|
||||
const views = ["overview", "energy", "security"];
|
||||
applyState({ ...state, active_view: views[pageIndex % views.length], version: (state?.version || 0) + 1 });
|
||||
} else if (action === "energy.mode") {
|
||||
document.querySelector("#modeValue").textContent = args.mode || "削峰";
|
||||
} else if (action === "security.alert") {
|
||||
const rail = document.querySelector("#alertRail");
|
||||
const alert = document.createElement("article");
|
||||
alert.className = "alert-card pulse";
|
||||
alert.textContent = args.text || "新增联动告警";
|
||||
rail.prepend(alert);
|
||||
while (rail.children.length > 5) rail.lastElementChild.remove();
|
||||
} else if (action === "timeline.pause") {
|
||||
paused = true;
|
||||
} else if (action === "timeline.resume") {
|
||||
paused = false;
|
||||
}
|
||||
pulse();
|
||||
}
|
||||
runComponentAction(message) {
|
||||
this.scheduleJob(message, "action", (late) => {
|
||||
this.applyAction(message.payload.action, message.payload.args || {});
|
||||
this.sendAck(message, late ? "late" : "action_committed");
|
||||
});
|
||||
},
|
||||
|
||||
function timelineMs() {
|
||||
if (!state) return 0;
|
||||
return Math.max(0, serverNowMs() - state.scene_started_at_ms);
|
||||
}
|
||||
runComponentActionPreview(message) {
|
||||
this.scheduleJob(message, "action-preview", () => {
|
||||
this.applyAction(message.payload.action, message.payload.args || {});
|
||||
});
|
||||
},
|
||||
|
||||
function renderLoop(now) {
|
||||
frameTimeMs = now - lastFrameAt;
|
||||
if (frameTimeMs > 40) droppedFrames += 1;
|
||||
frameCount += 1;
|
||||
if (now - lastFpsAt >= 1000) {
|
||||
fps = frameCount * 1000 / (now - lastFpsAt);
|
||||
frameCount = 0;
|
||||
lastFpsAt = now;
|
||||
}
|
||||
lastFrameAt = now;
|
||||
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();
|
||||
},
|
||||
|
||||
drainScheduledJobs();
|
||||
drawMotion(paused ? 0 : timelineMs());
|
||||
animateBars(paused ? 0 : timelineMs());
|
||||
updateHud();
|
||||
requestAnimationFrame(renderLoop);
|
||||
}
|
||||
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;
|
||||
},
|
||||
|
||||
function drawMotion(t) {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.globalAlpha = 0.75;
|
||||
for (let i = 0; i < 28; i += 1) {
|
||||
const phase = t / 1200 + i * 0.43;
|
||||
const x = (Math.sin(phase * 0.46) * 0.5 + 0.5) * canvas.width;
|
||||
const y = (Math.cos(phase * 0.37) * 0.5 + 0.5) * canvas.height;
|
||||
const radius = 260 + (i % 6) * 70;
|
||||
const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius * 3.4);
|
||||
gradient.addColorStop(0, i % 2 ? "rgba(249,115,22,0.18)" : "rgba(20,184,166,0.22)");
|
||||
gradient.addColorStop(1, "rgba(0,0,0,0)");
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, radius * 3.4, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
ctx.globalAlpha = 1;
|
||||
}
|
||||
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);
|
||||
},
|
||||
|
||||
function animateBars(t) {
|
||||
document.querySelectorAll("#timelineBars i").forEach((bar, index) => {
|
||||
const scale = 0.82 + (Math.sin(t / 720 + index * 0.38) + 1) * 0.16;
|
||||
bar.style.transform = `scaleY(${scale.toFixed(3)})`;
|
||||
});
|
||||
}
|
||||
timelineMs() {
|
||||
if (!this.state) return 0;
|
||||
return Math.max(0, this.serverNowMs() - this.state.scene_started_at_ms);
|
||||
},
|
||||
|
||||
function pulse() {
|
||||
wall.classList.remove("pulse");
|
||||
requestAnimationFrame(() => wall.classList.add("pulse"));
|
||||
}
|
||||
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;
|
||||
|
||||
function syncClock() {
|
||||
if (!ws || ws.readyState !== WebSocket.OPEN) return;
|
||||
ws.send(JSON.stringify({
|
||||
type: "clock_ping",
|
||||
node_id: nodeId,
|
||||
client_send_ms: clientNowMs(),
|
||||
client_send_perf_ms: performance.now(),
|
||||
}));
|
||||
}
|
||||
this.drainScheduledJobs();
|
||||
this.drawMotion(this.paused ? 0 : this.timelineMs());
|
||||
this.updateHud();
|
||||
requestAnimationFrame((nextNow) => this.renderLoop(nextNow));
|
||||
},
|
||||
|
||||
function handleClockPong(payload) {
|
||||
const receivePerf = performance.now();
|
||||
const sendPerf = Number(payload.client_send_perf_ms ?? payload.client_send_ms);
|
||||
if (!Number.isFinite(sendPerf)) return;
|
||||
const rtt = receivePerf - sendPerf;
|
||||
const midpointPerf = sendPerf + rtt / 2;
|
||||
const offset = Number(payload.server_time_ms) - midpointPerf;
|
||||
clockSamples.push({ rtt, offset });
|
||||
clockSamples = clockSamples.sort((a, b) => a.rtt - b.rtt).slice(0, 8);
|
||||
bestRttMs = clockSamples[0].rtt;
|
||||
serverOffsetFromPerfMs = clockSamples.slice(0, 4).reduce((sum, item) => sum + item.offset, 0) / Math.min(4, clockSamples.length);
|
||||
}
|
||||
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;
|
||||
},
|
||||
|
||||
function sendAck(message, status) {
|
||||
if (!ws || ws.readyState !== WebSocket.OPEN || !tile) return;
|
||||
ws.send(JSON.stringify({
|
||||
type: "ack",
|
||||
command_id: message.command_id,
|
||||
node_id: nodeId,
|
||||
tile_id: tile.id,
|
||||
status,
|
||||
client_time_ms: clientNowMs(),
|
||||
server_estimated_ms: serverNowMs(),
|
||||
clock_offset_ms: serverOffsetFromPerfMs - (Date.now() - performance.now()),
|
||||
rtt_ms: Number.isFinite(bestRttMs) ? bestRttMs : null,
|
||||
}));
|
||||
}
|
||||
pulse() {
|
||||
this.pulseActive = false;
|
||||
requestAnimationFrame(() => {
|
||||
this.pulseActive = true;
|
||||
setTimeout(() => {
|
||||
this.pulseActive = false;
|
||||
}, 560);
|
||||
});
|
||||
},
|
||||
|
||||
function sendTelemetry() {
|
||||
if (!ws || ws.readyState !== WebSocket.OPEN || !tile) return;
|
||||
ws.send(JSON.stringify({
|
||||
type: "telemetry",
|
||||
node_id: nodeId,
|
||||
tile_id: tile.id,
|
||||
fps,
|
||||
frame_time_ms: frameTimeMs,
|
||||
dropped_frames: droppedFrames,
|
||||
}));
|
||||
}
|
||||
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(),
|
||||
}));
|
||||
},
|
||||
|
||||
function connectWs() {
|
||||
const protocol = location.protocol === "https:" ? "wss" : "ws";
|
||||
ws = new WebSocket(`${protocol}://${location.host}/ws/output/${tile.id}`);
|
||||
ws.addEventListener("open", () => {
|
||||
ws.send(JSON.stringify({
|
||||
type: "hello",
|
||||
node_id: nodeId,
|
||||
tile_id: tile.id,
|
||||
app_version: APP_VERSION,
|
||||
user_agent: navigator.userAgent,
|
||||
}));
|
||||
for (let i = 0; i < 5; i += 1) setTimeout(syncClock, i * 120);
|
||||
});
|
||||
ws.addEventListener("close", () => setTimeout(connectWs, 1200));
|
||||
ws.addEventListener("message", (event) => {
|
||||
const message = JSON.parse(event.data);
|
||||
if (message.type === "clock_pong") handleClockPong(message.payload);
|
||||
if (message.type === "state") scheduleJob({ command_id: message.command_id, payload: message.payload }, "state", () => applyState(message.payload.state || message.payload));
|
||||
if (message.type === "prepare_scene") prepareScene(message);
|
||||
if (message.type === "commit_scene") commitScene(message);
|
||||
if (message.type === "component_action") runComponentAction(message);
|
||||
});
|
||||
}
|
||||
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);
|
||||
},
|
||||
|
||||
function updateHud() {
|
||||
if (!tile) return;
|
||||
const rtt = Number.isFinite(bestRttMs) ? `${Math.round(bestRttMs)}ms` : "--";
|
||||
const scale = Number.parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--scale"));
|
||||
const preview = scale < 0.75 ? " | 本地预览已缩小，生产 4K 拼接桌面会更清晰" : "";
|
||||
hud.innerHTML = `${tile.id} | ${nodeId.slice(0, 18)} | ${fps.toFixed(1)}fps | ${frameTimeMs.toFixed(1)}ms | rtt ${rtt} | jobs ${scheduledJobs.size}<span class="preview-note">${preview}</span>`;
|
||||
}
|
||||
serverNowMs() {
|
||||
return Date.now() + this.serverOffsetFromDateMs;
|
||||
},
|
||||
|
||||
function tickClock() {
|
||||
clockText.textContent = new Date().toLocaleTimeString("zh-CN", { hour12: false });
|
||||
}
|
||||
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,
|
||||
}));
|
||||
},
|
||||
|
||||
window.addEventListener("resize", layout);
|
||||
window.addEventListener("keydown", (event) => {
|
||||
if (event.key.toLowerCase() === "h") hud.hidden = !hud.hidden;
|
||||
});
|
||||
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,
|
||||
}));
|
||||
},
|
||||
|
||||
bootstrap();
|
||||
tickClock();
|
||||
setInterval(tickClock, 1000);
|
||||
setInterval(syncClock, 2000);
|
||||
setInterval(sendTelemetry, 1000);
|
||||
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");
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
|
||||
background: #030712;
|
||||
background: #020617;
|
||||
color: #f8fbff;
|
||||
--wall-width: 14880px;
|
||||
--wall-height: 3510px;
|
||||
--tile-render-width: 100vw;
|
||||
--tile-render-height: 100vh;
|
||||
--scale: 1;
|
||||
--offset-x: 0px;
|
||||
--offset-y: 0px;
|
||||
@@ -14,9 +16,12 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
.viewport {
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
@@ -24,54 +29,70 @@ body,
|
||||
}
|
||||
|
||||
body {
|
||||
background: #030712;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: #020617;
|
||||
}
|
||||
|
||||
.viewport {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: #030712;
|
||||
position: relative;
|
||||
width: var(--tile-render-width);
|
||||
height: var(--tile-render-height);
|
||||
max-width: 100vw;
|
||||
max-height: 100vh;
|
||||
overflow: hidden;
|
||||
background: #020617;
|
||||
}
|
||||
|
||||
.wall {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
left: var(--offset-x);
|
||||
top: var(--offset-y);
|
||||
width: var(--wall-width);
|
||||
height: var(--wall-height);
|
||||
overflow: hidden;
|
||||
transform-origin: 0 0;
|
||||
transform: translate(var(--offset-x), var(--offset-y)) scale(var(--scale));
|
||||
transform: scale(var(--scale));
|
||||
background:
|
||||
radial-gradient(circle at 50% 40%, rgba(20, 184, 166, 0.28), transparent 36%),
|
||||
radial-gradient(circle at 82% 22%, rgba(249, 115, 22, 0.18), transparent 24%),
|
||||
linear-gradient(135deg, #061528 0%, #0b1220 48%, #071018 100%);
|
||||
radial-gradient(circle at 14% 16%, rgba(14, 165, 233, 0.22), transparent 23%),
|
||||
radial-gradient(circle at 78% 28%, rgba(20, 184, 166, 0.18), transparent 26%),
|
||||
linear-gradient(135deg, #020b1f 0%, #06172d 46%, #020617 100%);
|
||||
}
|
||||
|
||||
.motion-canvas,
|
||||
.grid-layer {
|
||||
.grid-layer,
|
||||
.scan-layer {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.grid-layer {
|
||||
background-image:
|
||||
linear-gradient(rgba(255,255,255,0.045) 2px, transparent 2px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.045) 2px, transparent 2px);
|
||||
linear-gradient(rgba(125, 211, 252, 0.045) 2px, transparent 2px),
|
||||
linear-gradient(90deg, rgba(125, 211, 252, 0.045) 2px, transparent 2px);
|
||||
background-size: 240px 240px;
|
||||
opacity: 0.74;
|
||||
opacity: 0.86;
|
||||
}
|
||||
|
||||
.scan-layer {
|
||||
opacity: 0.34;
|
||||
background:
|
||||
linear-gradient(90deg, transparent 0 47%, rgba(56, 189, 248, 0.16) 50%, transparent 53%),
|
||||
repeating-linear-gradient(0deg, transparent 0 120px, rgba(125, 211, 252, 0.035) 124px 128px);
|
||||
background-size: 2400px 100%, 100% 100%;
|
||||
animation: scan 10s linear infinite;
|
||||
}
|
||||
|
||||
.screen-header {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
left: 360px;
|
||||
right: 360px;
|
||||
top: 180px;
|
||||
z-index: 5;
|
||||
left: 340px;
|
||||
right: 340px;
|
||||
top: 160px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 120px;
|
||||
gap: 160px;
|
||||
}
|
||||
|
||||
h1,
|
||||
@@ -82,44 +103,47 @@ p {
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin-bottom: 38px;
|
||||
color: #5eead4;
|
||||
font-size: 58px;
|
||||
margin-bottom: 34px;
|
||||
color: #67e8f9;
|
||||
font-size: 54px;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 178px;
|
||||
color: #f8fbff;
|
||||
font-size: 172px;
|
||||
line-height: 1;
|
||||
font-weight: 820;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 0 36px rgba(20, 184, 166, 0.46);
|
||||
font-weight: 860;
|
||||
text-shadow: 0 0 44px rgba(56, 189, 248, 0.5);
|
||||
}
|
||||
|
||||
.header-metrics {
|
||||
display: grid;
|
||||
justify-items: end;
|
||||
gap: 26px;
|
||||
gap: 24px;
|
||||
color: #dbeafe;
|
||||
}
|
||||
|
||||
.header-metrics strong {
|
||||
font-size: 112px;
|
||||
font-size: 108px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.header-metrics span {
|
||||
color: #cbd5e1;
|
||||
font-size: 52px;
|
||||
.header-metrics span,
|
||||
.header-metrics em {
|
||||
font-size: 48px;
|
||||
font-style: normal;
|
||||
color: #93c5fd;
|
||||
}
|
||||
|
||||
.scene {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
inset: 620px 360px 250px;
|
||||
z-index: 4;
|
||||
inset: 580px 340px 230px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translateY(54px);
|
||||
transform: translateY(70px);
|
||||
transition: opacity 260ms linear, transform 260ms linear;
|
||||
}
|
||||
|
||||
@@ -130,209 +154,227 @@ h1 {
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
max-width: 6200px;
|
||||
max-width: 6400px;
|
||||
}
|
||||
|
||||
.hero-copy span {
|
||||
display: inline-block;
|
||||
margin-bottom: 34px;
|
||||
color: #38bdf8;
|
||||
font-size: 56px;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.hero-copy h2 {
|
||||
font-size: 158px;
|
||||
font-size: 156px;
|
||||
line-height: 1.05;
|
||||
font-weight: 820;
|
||||
font-weight: 860;
|
||||
}
|
||||
|
||||
.hero-copy p {
|
||||
margin-top: 44px;
|
||||
margin-top: 42px;
|
||||
max-width: 5800px;
|
||||
color: #dbeafe;
|
||||
font-size: 66px;
|
||||
line-height: 1.34;
|
||||
font-size: 64px;
|
||||
line-height: 1.32;
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
margin-top: 150px;
|
||||
.metric-grid {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 760px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 72px;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 58px;
|
||||
}
|
||||
|
||||
.metric-card,
|
||||
.side-stats article,
|
||||
.camera-card {
|
||||
border: 4px solid rgba(94, 234, 212, 0.32);
|
||||
.stage-node,
|
||||
.event-card {
|
||||
border: 4px solid rgba(125, 211, 252, 0.28);
|
||||
border-radius: 8px;
|
||||
background: rgba(15, 23, 42, 0.76);
|
||||
box-shadow: inset 0 0 60px rgba(20, 184, 166, 0.10), 0 0 42px rgba(20, 184, 166, 0.12);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(15, 23, 42, 0.86), rgba(8, 47, 73, 0.62)),
|
||||
rgba(15, 23, 42, 0.8);
|
||||
box-shadow:
|
||||
inset 0 0 76px rgba(14, 165, 233, 0.13),
|
||||
0 0 54px rgba(14, 165, 233, 0.16);
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
min-height: 520px;
|
||||
padding: 74px;
|
||||
min-height: 430px;
|
||||
padding: 62px;
|
||||
}
|
||||
|
||||
.metric-card span,
|
||||
.side-stats span {
|
||||
.event-card span {
|
||||
display: block;
|
||||
color: #a7f3d0;
|
||||
font-size: 58px;
|
||||
color: #7dd3fc;
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.metric-card strong,
|
||||
.side-stats strong {
|
||||
.metric-card strong {
|
||||
display: block;
|
||||
margin-top: 48px;
|
||||
margin-top: 36px;
|
||||
color: #ffffff;
|
||||
font-size: 136px;
|
||||
font-size: 122px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.timeline-bars {
|
||||
.metric-card small {
|
||||
display: block;
|
||||
margin-top: 28px;
|
||||
color: #a7f3d0;
|
||||
font-size: 44px;
|
||||
}
|
||||
|
||||
.visual-stage {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 960px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(32, 1fr);
|
||||
align-items: end;
|
||||
gap: 24px;
|
||||
top: 1360px;
|
||||
width: 11200px;
|
||||
height: 1320px;
|
||||
}
|
||||
|
||||
.timeline-bars i {
|
||||
min-height: 120px;
|
||||
border-radius: 8px 8px 0 0;
|
||||
background: linear-gradient(180deg, #14b8a6, #f97316);
|
||||
transform-origin: bottom;
|
||||
}
|
||||
|
||||
.flow-map {
|
||||
.route-field {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 790px;
|
||||
width: 8600px;
|
||||
height: 1760px;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.flow-line {
|
||||
.route-line {
|
||||
position: absolute;
|
||||
height: 30px;
|
||||
height: 28px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(90deg, #14b8a6, #facc15, #f97316);
|
||||
box-shadow: 0 0 90px rgba(20, 184, 166, 0.46);
|
||||
background: linear-gradient(90deg, transparent, #38bdf8, #2dd4bf, transparent);
|
||||
box-shadow: 0 0 80px rgba(56, 189, 248, 0.46);
|
||||
transform-origin: left center;
|
||||
animation: routePulse 3.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.line-a {
|
||||
left: 1100px;
|
||||
top: 690px;
|
||||
width: 5200px;
|
||||
transform: rotate(7deg);
|
||||
}
|
||||
.line-a { left: 620px; top: 210px; width: 6000px; transform: rotate(8deg); }
|
||||
.line-b { left: 980px; top: 680px; width: 7600px; transform: rotate(-7deg); }
|
||||
.line-c { left: 2600px; top: 1020px; width: 6400px; transform: rotate(5deg); }
|
||||
.line-d { left: 1400px; top: 420px; width: 8800px; transform: rotate(0deg); }
|
||||
.line-e { left: 2200px; top: 840px; width: 6600px; transform: rotate(-12deg); }
|
||||
.line-f { left: 540px; top: 1060px; width: 9200px; transform: rotate(10deg); }
|
||||
|
||||
.line-b {
|
||||
left: 2300px;
|
||||
top: 1050px;
|
||||
width: 4200px;
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
|
||||
.flow-node {
|
||||
.stage-node {
|
||||
position: absolute;
|
||||
width: 980px;
|
||||
height: 420px;
|
||||
width: 1120px;
|
||||
min-height: 390px;
|
||||
padding: 60px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 5px solid rgba(94, 234, 212, 0.62);
|
||||
border-radius: 8px;
|
||||
background: rgba(8, 20, 28, 0.92);
|
||||
font-size: 80px;
|
||||
font-weight: 780;
|
||||
align-content: center;
|
||||
gap: 26px;
|
||||
}
|
||||
|
||||
.node-a { left: 220px; top: 520px; }
|
||||
.node-b { left: 3600px; top: 220px; }
|
||||
.node-c { left: 7020px; top: 900px; }
|
||||
.stage-node span {
|
||||
color: #bfdbfe;
|
||||
font-size: 58px;
|
||||
}
|
||||
|
||||
.side-stats {
|
||||
.stage-node strong {
|
||||
color: #ffffff;
|
||||
font-size: 84px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stage-node.cyan {
|
||||
border-color: rgba(34, 211, 238, 0.48);
|
||||
}
|
||||
|
||||
.stage-node.blue {
|
||||
border-color: rgba(96, 165, 250, 0.48);
|
||||
}
|
||||
|
||||
.stage-node.orange {
|
||||
border-color: rgba(251, 146, 60, 0.56);
|
||||
}
|
||||
|
||||
.event-rail {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 690px;
|
||||
width: 4700px;
|
||||
top: 1340px;
|
||||
width: 3600px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 64px;
|
||||
gap: 34px;
|
||||
}
|
||||
|
||||
.side-stats article {
|
||||
min-height: 620px;
|
||||
padding: 78px;
|
||||
.event-card {
|
||||
padding: 46px 56px;
|
||||
border-left: 18px solid #38bdf8;
|
||||
}
|
||||
|
||||
.camera-grid {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 760px;
|
||||
width: 9200px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 52px;
|
||||
.event-card strong {
|
||||
display: block;
|
||||
margin-top: 18px;
|
||||
color: #ffffff;
|
||||
font-size: 60px;
|
||||
}
|
||||
|
||||
.camera-card {
|
||||
height: 700px;
|
||||
padding: 58px;
|
||||
display: grid;
|
||||
align-content: space-between;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(20,184,166,0.22), rgba(249,115,22,0.14)),
|
||||
rgba(15,23,42,0.78);
|
||||
.event-card small {
|
||||
display: block;
|
||||
margin-top: 18px;
|
||||
color: #cbd5e1;
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
.camera-card strong {
|
||||
font-size: 78px;
|
||||
.motion-pulse .route-line {
|
||||
animation-duration: 1.8s;
|
||||
}
|
||||
|
||||
.camera-card span {
|
||||
color: #dbeafe;
|
||||
font-size: 52px;
|
||||
.motion-orbit .stage-node {
|
||||
animation: nodeFloat 4.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.alert-rail {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 740px;
|
||||
width: 4300px;
|
||||
display: grid;
|
||||
gap: 44px;
|
||||
.focus-edge .stage-node.orange,
|
||||
.focus-core .stage-node.cyan {
|
||||
box-shadow:
|
||||
inset 0 0 96px rgba(125, 211, 252, 0.22),
|
||||
0 0 120px rgba(56, 189, 248, 0.38);
|
||||
}
|
||||
|
||||
.alert-card {
|
||||
padding: 58px 68px;
|
||||
border-left: 20px solid #f97316;
|
||||
border-radius: 8px;
|
||||
background: rgba(15, 23, 42, 0.78);
|
||||
font-size: 64px;
|
||||
}
|
||||
.theme-energy .event-card { border-left-color: #2dd4bf; }
|
||||
.theme-security .event-card { border-left-color: #fb923c; }
|
||||
.theme-command .event-card { border-left-color: #60a5fa; }
|
||||
.theme-transport .event-card { border-left-color: #38bdf8; }
|
||||
.theme-dataflow .event-card { border-left-color: #22d3ee; }
|
||||
|
||||
.hud {
|
||||
position: fixed;
|
||||
right: 12px;
|
||||
bottom: 12px;
|
||||
z-index: 10;
|
||||
max-width: min(980px, calc(100vw - 24px));
|
||||
max-width: min(1120px, calc(100vw - 24px));
|
||||
padding: 9px 11px;
|
||||
border-radius: 6px;
|
||||
background: rgba(0,0,0,0.72);
|
||||
color: rgba(255,255,255,0.82);
|
||||
background: rgba(0, 0, 0, 0.72);
|
||||
color: rgba(255, 255, 255, 0.84);
|
||||
font-size: 12px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.preview-note {
|
||||
color: #facc15;
|
||||
.pulse {
|
||||
animation: flash 560ms ease;
|
||||
}
|
||||
|
||||
.pulse {
|
||||
animation: flash 520ms ease;
|
||||
@keyframes scan {
|
||||
from { background-position: -2400px 0, 0 0; }
|
||||
to { background-position: 2400px 0, 0 0; }
|
||||
}
|
||||
|
||||
@keyframes routePulse {
|
||||
0%, 100% { opacity: 0.36; filter: brightness(0.9); }
|
||||
50% { opacity: 1; filter: brightness(1.35); }
|
||||
}
|
||||
|
||||
@keyframes nodeFloat {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-26px); }
|
||||
}
|
||||
|
||||
@keyframes flash {
|
||||
0% { outline: 18px solid rgba(94, 234, 212, 0.55); }
|
||||
100% { outline: 0 solid rgba(94, 234, 212, 0); }
|
||||
0% { outline: 18px solid rgba(56, 189, 248, 0.55); }
|
||||
100% { outline: 0 solid rgba(56, 189, 248, 0); }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user