Init

2026-07-16 08:31:52 +08:00
commit 8590fafac1
34 changed files with 2611 additions and 0 deletions
@@ -0,0 +1,67 @@
+<!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>