4.4 KiB

Raw Blame History

监控页整页对齐 jcWeb 3

背景

/monitor 已对齐机巢运行态四格、「查看详情」入口文案，以及 1920×1080 右侧栏密度。对照 jcWeb 3，仍缺：机巢状态弹窗语义、无人机视频与当前任务、环境/飞行文案、地图工具条与选中绑定线。

目标

按 jcWeb 3 整页对齐监控页：

右侧栏文案与结构（环境、飞行指标、所属机巢）
「查看详情」改为机巢状态弹窗（不再跳设备详情页）
无人机选中时显示实时画面（无人机图传）
无人机「当前任务」块：有数据展示，无数据空态
地图：卫星/地图切换、fitAll、比例尺、选中绑定虚线

非目标

假航线装饰
批量多选指令
设备详情页大改
新增后端协议字段
重做 marker 图标体系

方案

在现有 MonitorView + MapLayer / mapHelper 上增量对齐，不拆新组件体系。

1. 右侧栏文案与结构

机巢环境

标题：机巢环境
副文案：更新时间（record.updated 或「刚刚」）
字段顺序与文案：舱外温度 / 风速 / 雨量
雨量：优先数值 + mm；无数值时回退是否降雨文案；都没有则 --

无人机飞行状态

标题旁 mission-state（如任务中 / 停放待命），替代纯「更新于」
四格文案：飞行电量 / 相对高度 / 地速 / 卫星数量
速度继续一位小数

关联

「绑定机巢」改为「所属机巢」；按钮仍可切换到机巢

2. 机巢状态弹窗

运行状态旁「查看详情」打开 dockStatusModal 风格弹窗
不再 router.push 到 /device/:id
header maximize 若保留，可继续进设备详情；与运行状态旁按钮职责分离
弹窗字段复用现有 realtime：
- 设备连接 / 无人机状态 / 舱门 / 充电 / 控制模式 / 当前告警
- 舱门与归中明细（左/右门、左右/前后归中）在有数据时高亮
缺字段显示 -- 或未激活态，不造假
Escape / 点遮罩关闭

3. 视频区

去掉「仅机巢显示」限制；机巢与无人机都显示视频区
标签：机巢 →「机巢摄像头」；无人机 →「无人机图传」
复用现有 LivePlayer 与 live session；无流时保持待机壳

4. 当前任务块

仅无人机态显示
有任务数据：任务名、航线/编号、进度%、航点、已飞行时长、距离机巢、「任务详情」
无任务数据：空态「暂无任务」
数据来源限现有 realtime / devicesStore 已有字段（如 missionName / mission）；缺项显示 --，不新造协议
「任务详情」有可跳转目标时进入任务相关页；否则禁用或 toast 提示

5. 地图控件与绑定线

工具条（地图左上）

卫星 / 地图切换：使用已有 mapStyles.satelliteMap / streetMap
setStyle 后必须在 style.load 恢复 marker / layer
fitAll：有选中则清选中并回 overview；无选中则 fit 全部设备点

比例尺（右下）

按当前 zoom 估算文案（如 2 km），对齐原型视觉，不做复杂可拖标尺

选中绑定虚线

选中机巢或其飞行中无人机，且无人机不在巢、两端有坐标时绘制
用 Mapbox line layer（真实经纬度），不是固定 CSS 斜线
本轮不做假航线

6. 密度

新增任务块与弹窗后，继续保证 1920×1080 右侧栏尽量一屏；不够时优先压视频高度与任务块间距。更高分辨率仍用默认样式。

涉及文件

src/views/MonitorView/MonitorView.vue
src/styles/prototype.css
src/layout/MapLayer.vue / src/core/mapHelper.js / src/config/map.js（样式切换与恢复）
src/components/LivePlayer.vue（如需 cameraLabel 透传）

验收

机巢：环境文案对齐；「查看详情」开状态弹窗；不跳详情页
无人机：有视频区（图传标签）；飞行文案对齐；有/无任务分别展示内容/空态
地图：卫星/地图可切且点位不丢；fitAll 行为正确；选中飞行关系显示绑定虚线；比例尺可见
1920×1080 右侧栏尽量无外层滚动
缺数据不造假

风险

setStyle 清层后恢复失败会导致点位消失：必须统一走 style.load 恢复路径
任务进度字段可能稀疏：空态必须可用
弹窗与详情页入口并存时，文案/图标职责需清晰，避免两个「详情」混淆

4.4 KiB Raw Blame History