68 lines
2.6 KiB
HTML
68 lines
2.6 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>LED Output</title>
|
|
<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>
|
|
<div class="grid-layer"></div>
|
|
|
|
<header class="screen-header">
|
|
<div>
|
|
<p class="eyebrow">Tile-aware timeline rendering</p>
|
|
<h1 id="sceneTitle">LED 大屏投放平台</h1>
|
|
</div>
|
|
<div class="header-metrics">
|
|
<strong id="clockText">--:--:--</strong>
|
|
<span id="versionText">v0</span>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="scene active" data-view="overview">
|
|
<div class="hero-copy">
|
|
<h2>双 GPU 本地渲染，统一时间轴同步</h2>
|
|
<p>左右输出端各自渲染半屏，但场景、动画、地图相机、视频时间由同一个服务端时间轴驱动。</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>
|
|
<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>
|
|
<div id="cameraGrid" class="camera-grid"></div>
|
|
<div id="alertRail" class="alert-rail"></div>
|
|
</section>
|
|
</section>
|
|
<aside id="hud" class="hud"></aside>
|
|
</main>
|
|
<script src="/static/output/main.js"></script>
|
|
</body>
|
|
</html>
|