|
|
@@ -1384,27 +1384,80 @@
|
|
|
|
|
|
<!-- CENTER COLUMN -->
|
|
|
<div class="col-center">
|
|
|
- <!-- 实验环境安全智能感知 -->
|
|
|
+ <!-- 实验室视频监控 (2x2) -->
|
|
|
<div class="panel" style="flex:1;display:flex;flex-direction:column;">
|
|
|
<div class="corner-deco tl"></div><div class="corner-deco tr"></div>
|
|
|
<div class="corner-deco bl"></div><div class="corner-deco br"></div>
|
|
|
- <div class="panel-title">实验环境安全智能感知</div>
|
|
|
- <div class="sensor-scroll-wrap">
|
|
|
- <div class="sensor-scroll-inner" id="sensorList"></div>
|
|
|
+ <div class="panel-title">实验室视频监控</div>
|
|
|
+ <div style="flex:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;min-height:0;">
|
|
|
+ <div class="video-cell">
|
|
|
+ <div class="cam-frame">
|
|
|
+ <div class="cam-corner c-tl"></div><div class="cam-corner c-tr"></div>
|
|
|
+ <div class="cam-corner c-bl"></div><div class="cam-corner c-br"></div>
|
|
|
+ <div class="cam-inner">
|
|
|
+ <span class="cam-label"><span class="cam-dot"></span>A101 走廊</span>
|
|
|
+ <span class="cam-placeholder">📹 实时监控画面</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="video-cell">
|
|
|
+ <div class="cam-frame">
|
|
|
+ <div class="cam-corner c-tl"></div><div class="cam-corner c-tr"></div>
|
|
|
+ <div class="cam-corner c-bl"></div><div class="cam-corner c-br"></div>
|
|
|
+ <div class="cam-inner">
|
|
|
+ <span class="cam-label"><span class="cam-dot"></span>B201 走廊</span>
|
|
|
+ <span class="cam-placeholder">📹 实时监控画面</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="video-cell ai-cam">
|
|
|
+ <div class="cam-frame">
|
|
|
+ <div class="cam-corner c-tl"></div><div class="cam-corner c-tr"></div>
|
|
|
+ <div class="cam-corner c-bl"></div><div class="cam-corner c-br"></div>
|
|
|
+ <span class="ai-badge">AI 智能</span>
|
|
|
+ <div class="cam-inner">
|
|
|
+ <span class="cam-label"><span class="cam-dot"></span>🎯 化学实验室A101</span>
|
|
|
+ <span class="cam-placeholder">📹 实时监控画面</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="video-cell">
|
|
|
+ <div class="cam-frame">
|
|
|
+ <div class="cam-corner c-tl"></div><div class="cam-corner c-tr"></div>
|
|
|
+ <div class="cam-corner c-bl"></div><div class="cam-corner c-br"></div>
|
|
|
+ <div class="cam-inner">
|
|
|
+ <span class="cam-label"><span class="cam-dot"></span>C102 走廊</span>
|
|
|
+ <span class="cam-placeholder">📹 实时监控画面</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <!-- 实验室实时风险预警 -->
|
|
|
- <div class="panel" style="height: 320px; display:flex; flex-direction:column;">
|
|
|
- <div class="corner-deco tl"></div><div class="corner-deco tr"></div>
|
|
|
- <div class="corner-deco bl"></div><div class="corner-deco br"></div>
|
|
|
- <div class="panel-title">实验室实时风险预警</div>
|
|
|
- <div class="warning-header">
|
|
|
- <div class="warning-count" id="warningCount">12</div>
|
|
|
- <div class="warning-count-label">本月预警响应总数</div>
|
|
|
+ <!-- Bottom row: 实验环境安全智能感知 + 实验室实时风险预警 -->
|
|
|
+ <div style="height:320px;display:flex;gap:14px;flex-shrink:0;">
|
|
|
+ <!-- 实验环境安全智能感知 -->
|
|
|
+ <div class="panel" style="flex:1;display:flex;flex-direction:column;min-width:0;">
|
|
|
+ <div class="corner-deco tl"></div><div class="corner-deco tr"></div>
|
|
|
+ <div class="corner-deco bl"></div><div class="corner-deco br"></div>
|
|
|
+ <div class="panel-title">实验环境安全智能感知</div>
|
|
|
+ <div class="sensor-scroll-wrap">
|
|
|
+ <div class="sensor-scroll-inner" id="sensorList"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="warning-scroll-wrap">
|
|
|
- <div class="warning-scroll-inner" id="warningList"></div>
|
|
|
+
|
|
|
+ <!-- 实验室实时风险预警 -->
|
|
|
+ <div class="panel" style="flex:1;display:flex;flex-direction:column;min-width:0;">
|
|
|
+ <div class="corner-deco tl"></div><div class="corner-deco tr"></div>
|
|
|
+ <div class="corner-deco bl"></div><div class="corner-deco br"></div>
|
|
|
+ <div class="panel-title">实验室实时风险预警</div>
|
|
|
+ <div class="warning-header">
|
|
|
+ <div class="warning-count" id="warningCount">12</div>
|
|
|
+ <div class="warning-count-label">本月预警响应总数</div>
|
|
|
+ </div>
|
|
|
+ <div class="warning-scroll-wrap">
|
|
|
+ <div class="warning-scroll-inner" id="warningList"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|