Răsfoiți Sursa

feat(frontend): 工业视频平台页面全面对接后端数据

页面不再使用内嵌演示数据渲染,改为读取 /api/v1/video-platform:

- 总览卡片:视频通道总量、已配置通道、在线通道、未闭环识别事件
- 通道目录:设备树按模块展示通道名称/安装地点/在线状态,支持搜索
- 实时监控:分屏内直接播放后端按磁盘路径流式返回的视频(支持 Range),
  播放/暂停、静音、抓图(打开最近识别抓拍)、全屏均可用
- 状态总览:风门/局部风机/主风机三个模块的状态指标与今日统计
- 实时告警:视频分析事件按级别着色,展示事件类型、处理状态、通道与描述
- 识别抓拍:真实抓拍图像网格,时间范围/告警类型/设备筛选与一键检索、重置
- 通行与操作记录:页签与表头来自后端模块配置,切换页签按需加载对应记录类型
- 模块切换(风门/局部风机/主风机)与刷新按钮重新拉取后端数据

后端不可用时自动回退内置演示数据(工具栏徽标显示“演示数据”),
与平台其它模块的降级方式保持一致。
康宇 3 săptămâni în urmă
părinte
comite
d452cef0b3
3 a modificat fișierele cu 782 adăugiri și 108 ștergeri
  1. 743 105
      frontend/api.js
  2. 3 3
      frontend/index.html
  3. 36 0
      frontend/styles.css

Fișier diff suprimat deoarece este prea mare
+ 743 - 105
frontend/api.js


+ 3 - 3
frontend/index.html

@@ -914,10 +914,10 @@
                   <span class="subtle-badge" id="videoThumbnailCount">-- 张</span>
                 </div>
                 <div class="video-filter-bar video-filter-bar-inline">
-                  <label><span>时间范围</span><input type="datetime-local" value="2026-10-13T00:00" /></label>
+                  <label><span>时间范围</span><input id="videoFilterStart" type="datetime-local" /></label>
                   <span class="video-filter-separator">至</span>
-                  <label><input type="datetime-local" value="2026-10-13T11:42" /></label>
-                  <button type="button" data-video-quick-range="today">今日</button>
+                  <label><input id="videoFilterEnd" type="datetime-local" /></label>
+                  <button class="active" type="button" data-video-quick-range="today">今日</button>
                   <button type="button" data-video-quick-range="week">近7天</button>
                   <label><span id="videoRecordFilterLabel">告警类型</span><select id="videoRecordType">
                     <option>全部类型</option>

+ 36 - 0
frontend/styles.css

@@ -3963,6 +3963,25 @@ body.api-loading .content-area {
   background: var(--amber);
 }
 
+.video-tile-player {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  background: #04141d;
+}
+
+.video-tile-status,
+.video-tile-copy,
+.video-tile-tools {
+  z-index: 2;
+}
+
+.video-tile.fault .video-tile-status i {
+  background: var(--red);
+}
+
 .video-tile-copy {
   position: absolute;
   right: 9px;
@@ -4070,6 +4089,11 @@ body.api-loading .content-area {
   border-color: #f1cfd0;
 }
 
+.video-event-row.gray {
+  background: #f7f9fa;
+  border-color: #e8eef1;
+}
+
 .video-event-level {
   padding: 4px 6px;
   color: #9b6810;
@@ -4215,6 +4239,18 @@ body.api-loading .content-area {
   place-items: center;
 }
 
+.video-thumb-link {
+  display: block;
+  color: inherit;
+  text-decoration: none;
+}
+
+.video-thumb-stage img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .video-thumb-stage [data-icon] {
   width: 24px;
   height: 24px;

Unele fișiere nu au fost afișate deoarece prea multe fișiere au fost modificate în acest diff