5.5 KiB

Raw Blame History

Monitor 整页对齐 jcWeb 3 Implementation Plan

For Claude: REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

Goal: 按 jcWeb 3 整页对齐 /monitor：右侧栏文案、机巢状态弹窗、无人机图传与当前任务、地图工具条/比例尺/绑定虚线。

Architecture: 在现有 MonitorView + Mapbox 能力上增量改。弹窗与任务块本地实现；地图样式切换走 mapStyles + style.load 恢复 layers；绑定线用 line layer。

Tech Stack: Vue 3、Mapbox GL、现有 live API / devicesStore realtime、prototype.css

Spec: docs/superpowers/specs/2026-08-26-monitor-jcweb3-align-design.md

Task 1: 右侧栏文案与飞行/环境对齐

Files:

Modify: src/views/MonitorView/MonitorView.vue
Modify: src/styles/prototype.css（如需 mission-state / 环境副文案）

Steps:

环境区：
- 标题改为「机巢环境」
- 副文案显示更新时间
- 字段：舱外温度 / 风速 / 雨量
- 雨量 helper：有数值 → x mm；否则 bool；都无 → --
无人机飞行区：
- 四格文案改为：飞行电量 / 相对高度 / 地速 / 卫星数量
- 标题旁 mission-state（任务中/停放待命等），基于 statusClass / status
关联：绑定机巢 → 所属机巢（按钮仍 select(parent)）
无人机 eyebrow 可改为「无人机设备」（对齐原型）

Acceptance:

机巢环境三字段文案对齐
无人机飞行四格文案对齐且速度一位小数
所属机巢可切换

Task 2: 机巢状态弹窗替换「查看详情」跳转

Files:

Modify: src/views/MonitorView/MonitorView.vue
Modify: src/styles/prototype.css（dock-status-dialog 样式，可从 jcWeb 3 迁移精简版）

Steps:

新增弹窗状态 dockStatusOpen
运行状态旁「查看详情」→ openDockStatus()，不再 router.push
header maximize 保留 goDetail() 进设备详情（职责分离）
弹窗结构对齐原型：
- header：机巢运行状态 + 名称 + 关闭
- 摘要格：设备连接 / 无人机状态 / 舱门 / 充电 / 控制模式 / 当前告警
- 明细板：舱门/归中/系统状态（有 realtime 则高亮 active）
复用已有 rt / doorValue / chargeText / centering 映射
遮罩点击与 Escape 关闭

Acceptance:

点「查看详情」开弹窗，不跳路由
maximize 仍可进 /device/:id
缺字段不造假

Task 3: 无人机视频区

Files:

Modify: src/views/MonitorView/MonitorView.vue
Modify: src/components/LivePlayer.vue（仅当需透传 label）

Steps:

视频 section 从 v-if="!isDrone" 改为机巢/无人机都显示
:camera-label="isDrone ? '无人机图传' : '机巢摄像头'"
live join 逻辑：无人机选中时用所属机巢 dockId 拉流（现有 live API 以 dock 为维度）；切换选中关闭旧 session
无流保持待机壳

Acceptance:

选中无人机可见视频区，标签为「无人机图传」
切换设备时 session 正确切换/关闭

Task 4: 当前任务块

Files:

Modify: src/views/MonitorView/MonitorView.vue
Modify: src/styles/prototype.css（mission-progress 样式，可参考 jcWeb 3）

Steps:

无人机态在飞行状态与控制区之间插入 mission-progress
从 realtime / record 读取：
- missionName / mission
- 进度、航点、时长、距离（有则显示，无则 --）
无任务名/无进行中任务 → 空态「暂无任务」
「任务详情」：有 task id 则跳任务页；否则 toast 或 disabled
1080p 密度规则补 mission 块间距

Acceptance:

有数据展示进度信息；无数据空态
不引入新 API 字段协议

Task 5: 地图工具条、比例尺、绑定虚线

Files:

Modify: src/views/MonitorView/MonitorView.vue
Modify: src/core/mapHelper.js 和/或 src/layout/MapLayer.vue（如需 setStyle 封装）
Modify: src/config/map.js（如需 export 双样式）
Modify: src/styles/prototype.css（toolbar / scale 定位）

Steps:

地图层叠加 UI：
- 左上：卫星 / 地图 + fitAll 按钮
- 右下：动态 map-scale 文案
样式切换：
- map.setStyle(mapStyles.satelliteMap | streetMap)
- 监听 style.load 后重建 marker images / symbol layers / binding line source
fitAll：
- 有选中：clearSelection + resetOverviewCamera
- 无选中：fitBounds 全部有效坐标
绑定虚线 layer：
- source geojson LineString：选中机巢坐标 ↔ 飞行中子无人机坐标
- 仅 !inDock 且两端坐标有效时 setData；否则空 feature
zoom/move 时更新比例尺估算（简单 zoom→米/公里映射即可）

Acceptance:

卫星/地图切换后点位仍在
fitAll 行为正确
选中飞行关系出现虚线；在巢/无坐标不显示
比例尺可见并随缩放变化

Task 6: 浏览器冒烟（1920×1080）

Steps:

mock docks/drones + realtime（含 door/charge/mission/坐标）
验证：
- 环境/飞行文案
- 查看详情弹窗
- 无人机视频标签
- 任务块有/无数据
- 地图切换、fitAll、绑定线、比例尺
- 右侧栏尽量无外层滚动
回归：机巢运行态四格、速度一位小数

Acceptance:

上述路径 DOM/截图可证
无控制台致命错误

Execution note

跳过全仓 formatter / 全量测试
不改后端协议
中文 commit
与工作区其他 WIP 隔离提交

5.5 KiB Raw Blame History

Monitor 整页对齐 jcWeb 3 Implementation Plan

Task 1: 右侧栏文案与飞行/环境对齐

Task 2: 机巢状态弹窗替换「查看详情」跳转

Task 3: 无人机视频区

Task 4: 当前任务块

Task 5: 地图工具条、比例尺、绑定虚线

Task 6: 浏览器冒烟（1920×1080）

Execution note

5.5 KiB

Raw Blame History