现场态势感知指挥平台 无人机地理视频 · 边防版 v2.0 · 私有化部署 · 客户零 GIS 操作
链路正常 --:--:--
统一认证登录
私有化账号体系 · 角色分权
站部指挥员 commander01操作员 operator01观察哨 front01
登录后按角色加载数据范围:站部指挥员可见全部任务与图层;观察哨仅本机视频与标绘上报。所有登录与操作写入本地审计日志。
当前任务 · 边境线日常巡逻(2026-09-25 · 纵深段) 在线无人机1 视频源1 标绘0
数据源模拟遥测 指挥员站部
经度— 纬度— 高度—m 航向—°
高度剖面 60s
点选坐标 — 距本机 —
视频覆盖框 · 服务端配准
地面覆盖—
地面分辨率—
覆盖面积—
坐标基准WGS84
N — 1:1
17
带坐标录像回放 实时 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第三方 RTSPrtsp://10.10.x.x:554/live待接入—
三级状态均以「状态点 + 文字」双通道表达,不单靠颜色区分,兼容色觉障碍与黑白打印。
接入协议(服务端统一收流)
RTSP / RTMP / SRT → 流媒体服务(MediaMTX)→ 低延迟分发(WebRTC / HLS);前端统一播放器,切换源不改界面。
本期三种替代源
① 模拟遥测:内置演示机,用于演示与联调;② 录像 / 文件推流:ffmpeg 循环推送本地视频;③ 第三方 RTSP:已有设备或录播直接接入。
真机 RTK / 图传 二期接入

录像回放与取证

P4 · 后指

带坐标录像回放:拖时间轴 → 地图同步显示该时刻轨迹与覆盖框 → 定位关键帧 → 截取快照 → 一键导出证据包。

录像段
17:40–17:5212′
17:52–18:0412′
18:04–18:1612′
18:16–18:204′
视频流与 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%、一个页面只有一个承载重心。切换右上角主题按钮可实时验证深 / 浅两套令牌。

色彩令牌(同色相五档中性 + 三个功能色)
舞台底--bg · 最深一档
面板--p1 · 顶栏 / 侧栏 / 右栏
卡片--p2 · 卡 / 浮层
悬停--p3 · hover / 选中底
主色 · 操作与数据--acc · 主按钮 / 选中 / 数据点
签名色 · 配准--gold · 全屏唯一暖色,只给已配准 / 覆盖框
告警--dg · 唯一红色,只给告警
在线--ok · 在线 / 已闭环
彩色像素预算 ≤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移动端工具条只留图标;遥测剖面隐藏;文字标签退化为悬浮提示。
响应式与主题均可直接验证:拖动窗口宽度观察栅格降级,点右上角主题按钮切换深 / 浅。
已自动缩放适配 · 建议横屏或使用电脑查看完整布局