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 Wall Output</title>
|
|
<link rel="stylesheet" href="/static/output/styles.css" />
|
|
</head>
|
|
<body>
|
|
<main id="viewport" class="viewport">
|
|
<section id="wall" class="wall" aria-label="LED wall output">
|
|
<canvas id="motionCanvas" class="motionCanvas"></canvas>
|
|
<div class="gridLayer"></div>
|
|
|
|
<header class="wallHeader">
|
|
<div>
|
|
<p id="eyebrow" class="eyebrow">Unified Timeline Rendering</p>
|
|
<h1 id="sceneTitle">LED 大屏投放平台</h1>
|
|
</div>
|
|
<div class="metrics">
|
|
<strong id="clock">--:--:--</strong>
|
|
<span id="version">v0</span>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="scene active" data-view="overview">
|
|
<div class="headline">
|
|
<h2>双 GPU 输出，统一时间轴</h2>
|
|
<p>左右服务器各自渲染半屏，但所有场景、动画、地图相机、视频时间都由同一个服务端时间轴驱动。</p>
|
|
</div>
|
|
<div id="overviewKpis" class="kpiGrid"></div>
|
|
<div id="overviewBars" class="bars"></div>
|
|
</section>
|
|
|
|
<section class="scene" data-view="energy">
|
|
<div class="headline">
|
|
<h2>能源驾驶舱</h2>
|
|
<p>适合 ECharts、Canvas、WebGL 地图和 Three.js 数字孪生。真实项目中应使用 camera.setViewOffset 做 tile-aware 渲染。</p>
|
|
</div>
|
|
<div class="energyMap">
|
|
<div class="flowLine lineA"></div>
|
|
<div class="flowLine lineB"></div>
|
|
<div class="flowNode nodeA">园区供电</div>
|
|
<div class="flowNode nodeB">储能系统</div>
|
|
<div class="flowNode nodeC">负载中心</div>
|
|
</div>
|
|
<div class="sideStats">
|
|
<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="headline">
|
|
<h2>安防态势</h2>
|
|
<p>视频墙、告警卡片和地图联动都通过结构化动作同步触发，不在输出端执行任意远程脚本。</p>
|
|
</div>
|
|
<div id="cameraGrid" class="cameraGrid"></div>
|
|
<div id="alertRail" class="alertRail"></div>
|
|
</section>
|
|
</section>
|
|
<aside id="hud" class="hud"></aside>
|
|
</main>
|
|
<script src="/static/output/main.js"></script>
|
|
</body>
|
|
</html>
|