从 0 到 1 手搓 AI 视觉识别平台前端：1,286 路视频、6 大模块、纯 HTML/CSS/JS 实现（附完整思路与代码）

摘要：算法能跑通，只完成了 AI 视觉项目的 30%；剩下 70% 是「让人看得懂、用得上」。本文用一个可运行的单文件原型，拆解 AI 视觉识别平台的 6 大核心模块——态势总览、实时预览、事件中心、事件详情与处置、证据档案、检索分析，覆盖 KPI 体系、九宫格预览与检测框叠加、事件处置漏斗、合规化证据归档，以及以文搜图的多模态检索。全文零框架依赖，一个 index.html 双击即开，所有图表用 CSS/SVG 手绘，代码可直接抄进你的项目。

关键词：AI 视觉 · 视频结构化 · 前端可视化 · 边缘计算 · 以文搜图 · 智慧园区 · 数据大屏

一、先看效果：10 张图速览

整套控制台共 6 个业务页面 + 1 个占位页，全部在同一个 index.html 里切换：

下面这张是整体分层架构，先看清楚数据从哪来到哪去：

二、为什么"算法跑通了"，界面还是没法用？

做过视觉项目的同学都踩过这个坑：模型 mAP 做到 0.9+，交付给客户却换来一句"我看不懂这个界面"。问题通常不在算法，而在信息组织的三层断裂：

1. 原始告警太多，没有收敛：1,286 路视频一天产生 342 条事件，不做分级合并，值班人员 10 分钟就麻木了；
2. 只有告警，没有证据：安全事件要追责、要保险理赔，缺了原始帧/标注帧/短视频三联，事件就是"死"的；
3. 只有查询，没有检索：事后复盘时只知道"大概上午有个穿红马甲的人从北门进去"，传统按时间翻录像要翻几个小时。

所以前端要解决的是三件事：降噪（把 342 条压成 27 条待处置）、留证（一次事件一个证据包）、回溯（用一句话把视频捞出来）。下面按模块拆。

三、设计系统：一套 CSS 变量撑起整站

不做设计系统的大屏，改一个颜色要动 200 处。这里把颜色、圆角、阴影、侧边栏宽度全部收敛到 :root，并且语义化命名（--red 而不是 #DC2626），业务里只写 var(--red)，主题切换只要换一层变量：

1:root{
2  --bg:#F5F7FB; --card:#FFFFFF; --border:#EEF1F7;
3  --primary:#4C6FFF; --primary-soft:#EEF2FF; --primary-line:#DDE5FF;
4  --purple:#7A5AF8; --purple-soft:#F1ECFF;
5  --red:#DC2626; --red-soft:#FEECEC;
6  --orange:#EA580C; --orange-soft:#FFF1E8;
7  --amber:#D97706; --amber-soft:#FEF3E2;
8  --green:#16A34A; --green-soft:#E7F6EC;
9  --text:#1E293B; --text2:#334155; --muted:#64748B; --light:#94A3B8;
10  --radius:12px; --radius-sm:8px; --radius-pill:999px;
11  --shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
12  --nav-w:220px; --topbar-h:64px;
13  --font:"Noto Sans SC","Microsoft YaHei",-apple-system,sans-serif;
14  /* 数字单独用等宽字体，KPI 跳动时不会左右抖 */
15  --num:"Sarasa Gothic SC",ui-monospace,SFMono-Regular,Menlo,monospace;
16}
17

三个值得抄的细节：

• -soft 配套色：每个主色都配一个浅色底（--red-soft），标签/图标底色直接用，不用手写 rgba()；
• 数字用等宽字体变量 --num：KPI 每秒刷新时，非等宽字体数字宽度变化会导致整行"呼吸抖动"；
• 语义色 = 业务等级：--red 紧急 / --orange 高 / --amber 中 / --blue 低，代码里不出现"颜色"，只出现"等级"。

四、模块拆解

4.1 态势总览：5 个 KPI 定义"今天安不安全"

KPI 不是越多越好，这张卡片组只保留 5 个能直接驱动动作的指标：

配图区用四象限解决"看趋势 / 看当下 / 看分布 / 看瓶颈"：

• 左上 事件趋势·近 7 日（折线 + 实时标记）
• 右上 实时告警流（滚动列表，紧急/高/中/低四级色标）
• 左下 事件类型分布（环形图）：未戴安全帽 22%、区域入侵 20%、烟火检测 18%、人员倒地 15%、违章停车 14%、人车计数 11%
• 右下 高发点位 TOP5：2 号车间北门 42 → 园区西路 35 → 周界东 28 → 仓库 A 区 21 → 办公楼前 15

设计要点：TOP5 点位其实是"整改优先级清单"。它和类型分布做交叉分析才有价值——比如"2 号车间北门 + 未戴安全帽"双高，答案不是加摄像头，而是在门口装个语音提示喇叭。

底部再加两块运维视角：算法健康度（YOLOv8 96% / ByteTrack 92% / 烟火检测 94% / VLM 90% / Grounding DINO 88%）与边缘节点负载表。节点表里"边缘节点-周界B"是离线状态（CPU/GPU 显示 —），这种「空值要有专门的占位形态」是很容易被忽略的细节：

1<tr>
2  <td class="id-cell">边缘节点-周界B</td>
3  <td>10.30.1.11</td>
4  <td>64</td>
5  <td>—</td><td>—</td>
6  <td><span class="tag tag-gray">离线</span></td>
7</tr>
8

4.2 实时预览：九宫格 + 检测框叠加 + PTZ

这是全站技术含量最高的一屏，核心是视频层与算法层的解耦：<img> 只负责画面，检测框是绝对定位的 <div>，坐标用百分比而不是像素——这样 1 分屏、4 分屏、9 分屏切换时，框不用重算。

1<div class="grid9" id="grid9">
2  <div class="tile">
3    <img src="assets/cam3.png"/>
4    <div class="osd-tl">CH03 仓库A区</div>
5    <div class="osd-time">11:42:10</div>
6    <!-- 检测框：百分比坐标，跟着容器自适应 -->
7    <div class="box" style="left:46%;top:30%;width:28%;height:40%;border-color:#EA580C">
8      <span class="bl" style="background:#EA580C">烟雾 0.88</span>
9    </div>
10  </div>
11  ...
12</div>
13

1.grid9{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:12px;}
2.tile{position:relative;border-radius:9px;overflow:hidden;background:#0B1220;}
3.tile img{width:100%;height:100%;object-fit:cover;display:block;}
4.tile .osd-tl{position:absolute;top:8px;left:8px;background:rgba(8,12,20,.55);color:#fff;
5  font-size:11px;padding:3px 7px;border-radius:5px;backdrop-filter:blur(2px);}
6.tile .box{position:absolute;border:2px solid;border-radius:3px;}
7.tile .box .bl{position:absolute;top:-18px;left:-2px;font-size:10px;font-weight:600;
8  padding:1px 5px;border-radius:3px;white-space:nowrap;}
9

几个工程经验：

1. OSD 用半透明深色底 + backdrop-filter:blur，避免白色文字压在亮画面上看不清；
2. 检测框颜色跟事件等级走，一眼就能在 9 路画面里定位异常（红=紧急、橙=高、琥珀=中、蓝=低）；
3. 信号丢失要有"空态"，而不是破图或黑屏。用统一占位块 + 图标 + 文案，运维才知道是"设备掉线"而不是"页面崩了"；
4. 右上角叠加快切换开关（检测框 / 轨迹 / ROI / 标签），轨迹密集时一键关掉，性能与可读性都能救回来。

右侧 PTZ 用圆形方向盘（上下左右 + 中间 Home）+ 变倍滑杆，同时展示当前通道的分辨率 2560×1440 / 码率 4.0 Mbps / 帧率 25 fps / 编码 H.265——排查"卡顿是谁的锅"时，这四个数缺一不可。

4.3 事件中心：把 342 条压成 27 条

筛选区给了 5 个维度（关键词 / 时间范围 / 点位 / 类型 / 等级 / 状态），顶部再用 Tab 做频道的快速切换：全部 342 · 待处置 27 · 今日 342 · 误报 19。这里"待处置 27"就是值班人员的真实工作量，也是这一屏唯一需要被点开的入口。

右侧的事件处置漏斗是整个平台最有价值的一张图——它把"算法准不准"和"运营到不到位"分开了：

1触发 342 → AI识别 338 → 告警推送 320 → 人工确认 305 → 闭环 290
2

注意漏斗旁边那行小字：闭环率 = 已闭环事件 / 全部事件；平均处置时长仅统计已闭环事件。口径不写清楚，95.2% 这个数就会被误读成"算法准确率 95.2%"。任何比率型指标，都要在界面上写清分母——这是大屏设计中最容易被审计挑出来的问题。

4.4 事件详情与处置：一屏完成"看证据 + 定责任 + 留痕"

点开一条紧急事件，页面要回答三个问题：

① 到底发生了什么？ 用「标注帧 / 原始帧 / 短视频」三联视图。标注帧证明算法看到了什么，原始帧保留真实性，短视频呈现过程——三者缺一，证据链就不完整。

② 机器怎么判的？ 结构化事件信息表格把"黑盒"摊开：

③ 后来怎么样了？ 用时间线展示闭环流程（事件触发 → AI 识别与分级 → 告警推送 → 人工确认 → 现场处置 → 闭环归档），未完成节点显式标注"待处理 / 未开始"。底部三个动作按钮：确认有效 / 标记误报 / 派单——"标记误报"必须存在，它是模型迭代的负样本来源（本例当天 19 条误报，误报率 5.6%，全部可回流训练）。

4.5 证据档案：留存策略写进界面

这一屏面向合规与审计。顶部 4 个指标：证据包总数 18,426（本周 +312）、存储总量 6.8 TB、证据完整率 100%、存储可用率 99.98%。

中间把留存与合规策略直接展示，而不是藏在配置里：

右侧两块是审计最关心的：证据构成（视频 57% / 图片 22% / 结构化 21%，用于容量规划）与导出日志（谁、什么时候、导了哪个包）。导出是高危操作，必须逐条留痕——EP-20260911-0342 张伟 · 11:50 导出 这种粒度才够。

4.6 检索分析：用一句话把视频捞出来

传统安防检索是"选摄像头 → 拖时间轴 → 人肉看"。多模态向量检索把它变成一句自然语言：

穿红色马甲的作业人员出现在 2 号车间北门

返回按相似度排序的命中片段（共 46 条）：0.94 红色马甲 · CH02 2号车间北门 11:39、0.91 红色马甲 · CH02 10:12、0.87 疑似目标 · CH01 09:40、0.83 疑似目标 · CH05 08:55。

右侧把检索参数显式化：检索方式（以文搜图）、目标描述、范围点位、时间范围、向量模型 VLM-Embed v2、相似度阈值 0.80。阈值一定要露给用户——它直接决定"宁可漏还是宁可多"，是个业务决策而不是技术参数。三种模式（以图搜图 / 以文搜图 / 条件检索）用 Tab 切换，覆盖"我有照片 / 我只记得描述 / 我知道时间和点位"三类场景。

五、关键代码实现

5.1 单页多屏：不用路由库，30 行搞定

所有页面都是 <section class="screen">，用 data-screen 声明目标，切换就是增删一个 .active：

1function showScreen(id, name, crumb){
2  document.querySelectorAll('.screen').forEach(s=>s.classList.remove('active'));
3  document.getElementById(id).classList.add('active');
4  document.getElementById('pageTitle').textContent = name;
5  document.getElementById('crumb').textContent = crumb;
6  document.querySelectorAll('.nav-item').forEach(n=>n.classList.remove('active'));
7  var activeNav = document.querySelector('.nav-item[data-screen="'+id+'"]');
8  if(activeNav) activeNav.classList.add('active');
9  document.querySelector('.content').scrollTop = 0;
10}
11
12document.querySelectorAll('.nav-item').forEach(function(item){
13  item.addEventListener('click', function(){
14    var sc = item.getAttribute('data-screen');
15    if(sc === 'coming'){ /* 建设中模块：复用同一个占位页，只换标题 */ return; }
16    var titles = {s1:['态势总览','首页 / 态势总览'], s2:['实时预览','首页 / 视频监控 / 实时预览'],
17                  s3:['事件中心','首页 / 事件处置 / 事件中心'], s5:['证据档案','首页 / 事件处置 / 证据档案'],
18                  s6:['检索分析','首页 / 事件处置 / 检索分析']};
19    showScreen(sc, titles[sc][0], titles[sc][1]);
20  });
21});
22

好处是：DOM 一次性渲染完，切换零成本、零白屏，非常适合演示与内网部署；后续接真实数据，只要把每个 screen 的渲染函数注册进去即可。

5.2 不引图表库：环形图就是 6 个 <circle>

用 stroke-dasharray + stroke-dashoffset 做扇区，周长 2πr ≈ 289（r=46），每段长度 = 占比 × 289：

1<svg viewBox="0 0 120 120" width="120" height="120">
2  <circle cx="60" cy="60" r="46" fill="none" stroke="#EEF1F7" stroke-width="16"/>
3  <circle cx="60" cy="60" r="46" fill="none" stroke="#4C6FFF" stroke-width="16"
4          stroke-dasharray="28 261" stroke-dashoffset="0"  transform="rotate(-90 60 60)"/>
5  <circle cx="60" cy="60" r="46" fill="none" stroke="#EA580C" stroke-width="16"
6          stroke-dasharray="24 265" stroke-dashoffset="-28" transform="rotate(-90 60 60)"/>
7  <!-- 后续扇区：dashoffset 累计减去前一段长度 -->
8</svg>
9

漏斗图更省，纯 div + 宽度百分比：

1<div class="funnel">
2  <div class="fn-row"><span class="fn-label">触发</span>
3    <div class="fn-bar" style="width:100%;background:#4C6FFF">342</div></div>
4  <div class="fn-row"><span class="fn-label">AI识别</span>
5    <div class="fn-bar" style="width:90%;background:#5B79F0">338</div></div>
6  <div class="fn-row"><span class="fn-label">告警推送</span>
7    <div class="fn-bar" style="width:82%;background:#7A5AF8">320</div></div>
8  <div class="fn-row"><span class="fn-label">人工确认</span>
9    <div class="fn-bar" style="width:74%;background:#D97706">305</div></div>
10</div>
11

横向柱状（高发点位 TOP5）与健康度柱状同理，用 .r-track + .r-fill、.h-bar 两层 div。整套控制台零第三方 JS、零 ECharts，首屏无请求、离线可用，内网交付时这一点非常加分。

5.3 状态标签：一套语义色走天下

1.tag{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:6px;font-size:11px;font-weight:600;}
2.tag-red{background:var(--red-soft);color:var(--red);}       /* 紧急 */
3.tag-orange{background:var(--orange-soft);color:var(--orange);} /* 高 */
4.tag-amber{background:var(--amber-soft);color:var(--amber);}    /* 中 */
5.tag-blue{background:var(--primary-soft);color:var(--primary);} /* 低 */
6.tag-green{background:var(--green-soft);color:var(--green);}    /* 已闭环 */
7.tag-gray{background:#EEF1F7;color:var(--muted);}                /* 离线/失效 */
8

六、接真实后端：这些口子要提前留好

原型跑的是静态数据，接生产时按下面对齐即可（建议 REST + WebSocket + MQTT 三通道分工）：

数据结构上，一条事件建议至少包含：eventId / cameraId / nodeId / type / level / confidence / model / ts / status / evidenceId，前端的所有筛选、漏斗、闭环率都从这几个字段算出来，别让前端做二次推断。

七、踩过的坑与优化建议

1. 9 路视频同屏会卡：优先降码率走子码流（主码流 2560×1440 只在 1 分屏时用），非焦点画面降到 10 fps；
2. 检测框坐标用百分比而不是像素，否则一分屏/九分屏切换要重算，还容易错位；
3. 密集轨迹要能一键关闭：ByteTrack 在人流密集处会画出上百条轨迹，既挡画面又耗 CPU；
4. 比率指标必须写清口径，闭环率、准确率、在线率旁边都要有注释行；
5. 空态/离线态单独设计，破图和"0"比"——"更容易被误判成系统故障；
6. 数字用等宽字体，实时刷新时不抖动；
7. 告警分级要能配置：同一个"未戴安全帽"在车间是"中"、在危化品仓库就该是"紧急"，等级规则不要写死在前端。

八、总结

这套控制台的核心不是"好看"，而是把 AI 视觉项目里最容易被忽略的三件事做扎实：

• 降噪：342 条原始事件 → 27 条待处置，让值班的人有精力处理；
• 留证：标注帧 / 原始帧 / 短视频 + 结构化信息 + 闭环时间线，形成可审计的证据链；
• 回溯：以文搜图把"翻录像几小时"压缩成"一句话几秒钟"。

技术上，纯 HTML/CSS/JS + CSS 变量 + SVG 手绘图表，零依赖、单文件、可离线，既适合快速做方案评审，也能作为生产项目的前端骨架直接长上去。

后续可扩展：① 接入真实 WebRTC 流与 PTZ 控制协议；② 事件地图（GIS 一张图）与点位的空间联动；③ 模型效果评测页（漏报/误报回流与版本对比）；④ 任务布防的时段化策略（白天/夜间/节假日不同算法）。

如果这篇对你有帮助，欢迎点赞 + 收藏 + 关注。你在做视觉平台时遇到过哪些"算法很强但界面没人用"的场景？评论区聊聊，我把典型问题整理成续篇。

如果对您有所帮助，请点赞打赏支持！

技术合作交流q+++q：2401315930

最后分享一下地图下载器设计及下载地址：

链接：https://pan.baidu.com/s/1RZX7JpTpxES-G7GiaVUxOw
提取码：61cn

地图下载器代码结构设计及功能实现_地图下载管理器解析-CSDN博客

**

**

《从 0 到 1 手搓 AI 视觉识别平台前端：1,286 路视频、6 大模块、纯 HTML/CSS/JS 实现（附完整思路与代码）》 是转载文章，点击查看原文。