统一认证登录
私有化账号体系 · 角色分权
站部指挥员 commander01操作员 operator01观察哨 front01
登录后按角色加载数据范围:站部指挥员可见全部任务与图层;观察哨仅本机视频与标绘上报。所有登录与操作写入本地审计日志。
经度—
纬度—
高度—m
航向—°
高度剖面 60s
点选坐标
—
距本机
—
视频覆盖框 · 服务端配准
地面覆盖—
地面分辨率—
覆盖面积—
坐标基准WGS84
带坐标录像回放
实时
100%
17:40
18:20
告警流
前指端现场工作台
P2 · 移动 / 平板现场人员只保留「实时空间视频 + 本机地图 + 标绘上报 + 接收指令」四件事,去重去杂;扫码即用、免安装,客户零 GIS 操作。按钮按户外手套与强光环境设计(最小触控 44×44)。
边境线日常巡逻 · 前指在线
已配准
点选坐标点击画面定位
收到站部指令:「18:12 发现可疑目标,请前指就近核查并回填现场情况。」
— 站部指挥员 · 2 分钟前
前指端设计要点
| 要点 | 说明 |
|---|---|
| 去 GIS 化 | 只呈现视频与地图两种视图,一键切换;坐标由服务端算好,直接给结论。 |
| 单手可操作 | 底部四宫格大按钮,最小触控 56px,适配手套与户外强光(高对比)。 |
| 三端同图 | 前指标绘经 WebSocket 秒级同步至后指与另一些前指,同一 WGS84 基准。 |
| 弱网可用 | 视频自适应降码率;标绘与指令走轻量消息通道,断线自动重放。 |
| 上报闭环 | 一键上报 → 后指生成告警卡片 → 处置结果回填前指。 |
现场操作链路(前指视角)
① 扫码登录 → ② 自动进入所属任务 → ③ 看实时空间视频 → ④ 发现异常点选定位
⑤ 标绘并上报 → ⑥ 接收站部指令 → ⑦ 现场核查回填 → ⑧ 结果三端同步归档
采集源管理
P3 · 后指登记无人机视频源(本期:模拟遥测 / 录像文件推流 / 第三方 RTSP),监控接入状态。真机接入为二期延后项,接口已预留——切换源不改前端。
视频源清单
| 源 ID | 名称 | 类型 | 推流地址 / 参数 | 状态 | 最近心跳 | 操作 |
|---|---|---|---|---|---|---|
| SRC-01 | 巡检-01 | 模拟遥测 | sim://demo-01?r=150&h=150 | 在线 | 刚刚 | |
| SRC-02 | 巡检-02 | 录像推流 | rtsp://127.0.0.1:8554/rec-02 | 就绪 | 12 秒前 | |
| SRC-03 | 巡检-03 | 第三方 RTSP | rtsp://10.10.x.x:554/live | 待接入 | — |
三级状态均以「状态点 + 文字」双通道表达,不单靠颜色区分,兼容色觉障碍与黑白打印。
接入协议(服务端统一收流)
RTSP / RTMP / SRT → 流媒体服务(MediaMTX)→ 低延迟分发(WebRTC / HLS);前端统一播放器,切换源不改界面。
本期三种替代源
① 模拟遥测:内置演示机,用于演示与联调;② 录像 / 文件推流:ffmpeg 循环推送本地视频;③ 第三方 RTSP:已有设备或录播直接接入。
真机 RTK / 图传 二期接入
录像回放与取证
P4 · 后指带坐标录像回放:拖时间轴 → 地图同步显示该时刻轨迹与覆盖框 → 定位关键帧 → 截取快照 → 一键导出证据包。
录像段
| 17:40–17:52 | 12′ |
| 17:52–18:04 | 12′ |
| 18:04–18:16 | 12′ |
| 18:16–18:20 | 4′ |
视频流与 POS 时间戳对齐固化:任意时刻可定位、可取证。
回放视图(同步轨迹)
回放画面 + 地图轨迹同步(原型示意)
18:07
坐标检索
检索结果:命中 2 段(17:52–18:04、18:16–18:20)。
导出证据包
含视频片段 + 快照(带四角 / 中心坐标)+ 标绘 + 告警记录 + 说明文档。
标绘图层管理
P5 · 后指边防常用态势符号库 + 图层开关 + 样式。符号为通用非涉密符号集,全站统一 24 网格线性图标,禁用 emoji 与排版字符充图标。
态势符号库(点击选择)
执勤哨所
边境卡口
可疑目标
事件点
力量部署
行动方向
禁区 / 围栏
巡逻航线
临时驻点
阻断点
观察方向
文字标注
当前选中符号:未选择。选中后在地图 / 视频上点击即可落点,标绘实时同步至三端。
图层与样式
| 图层 | 显隐 | 样式 |
|---|---|---|
| 态势标绘 | ||
| 帧轮廓(覆盖框) | ||
| 帧中心 | ||
| 平台轨迹 | ||
| 平台位置 | ||
| 巡逻航线 | ||
| 电子围栏 | ||
| 告警点 | ||
| 哨所 / 目标 |
图层开关与 P1 左栏双向实时同步,改动即时重绘地图并同步前指端(三端一致)。「编辑」可调颜色 / 线宽 / 线型;颜色取自设计令牌色板,以守住金色全屏唯一(只给已配准 / 覆盖框)的纪律。
告警中心
P6 · 通用告警列表 + 研判处置闭环。状态机:待处置 → 处置中 → 已闭环,指标与列表由同一份数据实时计算,处置动作即时回写并同步三端。告警源:电子围栏越界(自动)/ 禁入区目标(二期 AI)/ 前指人工一键上报 / 平台自检。
告警列表
| 级别 | 类型 | 位置 / 来源(WGS84) | 时间 | 状态 | 操作 |
|---|
应急告警处置闭环(五步)
STEP 1
告警触发
围栏越界自动 / 前指人工上报
STEP 2
指挥员研判
定位 + 快照 + 覆盖框回看
STEP 3
下发指令
前指端实时接收
STEP 4
现场处置
回填结果与坐标
STEP 5
闭环归档
证据包 + 台账留痕
系统管理后台
P7 · 管理用户 / 角色 / 权限、设备台账、审计日志、系统参数。数据不出域,关键操作全留痕。
| 账号 | 姓名 | 角色 | 数据范围 | 状态 |
|---|---|---|---|---|
| commander01 | (站部指挥员) | 站部指挥员 | 全部任务 / 全部图层 | 启用 |
| operator01 | (操作员) | 操作员 | 本任务 / 标绘 + 回放 | 启用 |
| front01 | (前指观察哨) | 观察哨 | 本机视频 + 标绘上报 | 启用 |
| admin01 | (系统管理员) | 系统管理员 | 后台全部 | 启用 |
视觉规范
P8 · 设计基线 v2.0本页即本次升级的设计基线,交付后所有新增页面按此执行:同色相做层级、彩色预算 ≤8%、一个页面只有一个承载重心。切换右上角主题按钮可实时验证深 / 浅两套令牌。
色彩令牌(同色相五档中性 + 三个功能色)
彩色像素预算 ≤8%(4–6% 为理想)。衡量标准不是"颜色好不好看",而是"是否什么都在喊"。正文主色不使用纯白,避免长时间盯屏的眩光与 OLED 光晕撕裂。
排版 · 尺寸 · 形状
字体族界面中文 1 族 + 数字等宽 1 族,全站共 2 族
字号阶梯10.5 / 11.5 / 12.5 / 13.5 / 16 / 19 / 26,恒定阶梯不随视口缩放
行高正文 1.55 · 表格 1.5 · 标题 1.25
间距栅格8px 基准:4 / 8 / 12 / 16 / 24 / 32
圆角按钮 6–8 · 卡片 12 · 面板齐边 0 · 胶囊 999
描边1px 低对比(--ln);分栏与聚焦用 --ln2
层级手法深色:描边 + inset 微光;浅色:低透明向下投影。不用四周发光
触控最小移动端 44×44(前指端大按钮 56px)
动效规范
时长阶梯按下 125ms · 悬停 200ms · 面板与弹层 300ms · 主切换 600ms
缓动全站单一曲线 cubic-bezier(.4,0,.2,1)
可动属性仅 transform / opacity / 颜料类(color、background、border)
悬停只变色,不做位移 / 缩放 / 浮起——"有反应"不等于"会跳舞"
循环动画0 个(关键帧动画只用于一次性的面板入场与告警高亮)
降级prefers-reduced-motion 直接给终态,不改短时长
数值实时刷新区域(遥测、时钟、数字指标)不加动画,避免盯屏时持续闪动。
组件态(按钮八态实证)
成功
警告
禁用态走三通道:透明度 + cursor + disabled 属性,只改透明度不叫禁用。焦点环用 outline 实现且不淡入,键盘用户需要它瞬时出现。循环动画唯一例外是加载指示器(它本身表示"未完成",停下即为错误信号)。
图标集(24 网格 · 单一描边语言)
无人机
视频
相机
地图
定位
围栏
航线
告警
安全
量算
回放
导出
统一 24×24 网格、1.6 线宽、currentColor 继承、round 线帽;全站零 emoji、零排版字符充当图标(对勾 / 叉号 / 警示号一律走 SVG 路径,不用字体字符)。
响应式断点与降级策略
| 视口 | 布局 | 降级动作 |
|---|---|---|
| ≥1600 | 三列 264 / 自适应 / 372 | 全量信息:图例、覆盖框技术卡、坐标读数、告警流全部呈现。 |
| 1360–1599 | 三列 236 / 自适应 / 344 | 侧栏与右栏收窄,无隐藏。 |
| 1120–1359 | 侧栏转 88px 图标栏 | 导航去文字标签,保留图标 + 悬浮提示。 |
| 900–1119 | 右栏转覆盖式抽屉 | 地图独占中区;覆盖框技术卡、坐标读数隐藏;点工具条可呼出右栏。 |
| 640–899 | 单列:地图为主 | 左资源栏转左抽屉;底栏上下堆叠;网格类布局转单列。 |
| <640 | 移动端 | 工具条只留图标;遥测剖面隐藏;文字标签退化为悬浮提示。 |
响应式与主题均可直接验证:拖动窗口宽度观察栅格降级,点右上角主题按钮切换深 / 浅。