Просмотр исходного кода

根据客户要求,调整实验室感知数据位置,新增四路轮播监控

stoney дней назад: 6
Родитель
Сommit
b60532af90
1 измененных файлов с 67 добавлено и 14 удалено
  1. 67 14
      prototype-ui/agentDemo_dashboard.html

+ 67 - 14
prototype-ui/agentDemo_dashboard.html

@@ -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>