xiaosi
4 weeks ago
1 changed files with 114 additions and 0 deletions
@ -0,0 +1,114 @@ |
|||||
|
# 监控页整页对齐 jcWeb 3 |
||||
|
|
||||
|
## 背景 |
||||
|
|
||||
|
`/monitor` 已对齐机巢运行态四格、「查看详情」入口文案，以及 `1920×1080` 右侧栏密度。对照 `jcWeb 3`，仍缺：机巢状态弹窗语义、无人机视频与当前任务、环境/飞行文案、地图工具条与选中绑定线。 |
||||
|
|
||||
|
## 目标 |
||||
|
|
||||
|
按 `jcWeb 3` 整页对齐监控页： |
||||
|
|
||||
|
1. 右侧栏文案与结构（环境、飞行指标、所属机巢） |
||||
|
2. 「查看详情」改为机巢状态弹窗（不再跳设备详情页） |
||||
|
3. 无人机选中时显示实时画面（无人机图传） |
||||
|
4. 无人机「当前任务」块：有数据展示，无数据空态 |
||||
|
5. 地图：卫星/地图切换、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 透传） |
||||
|
|
||||
|
## 验收 |
||||
|
|
||||
|
1. 机巢：环境文案对齐；「查看详情」开状态弹窗；不跳详情页 |
||||
|
2. 无人机：有视频区（图传标签）；飞行文案对齐；有/无任务分别展示内容/空态 |
||||
|
3. 地图：卫星/地图可切且点位不丢；fitAll 行为正确；选中飞行关系显示绑定虚线；比例尺可见 |
||||
|
4. `1920×1080` 右侧栏尽量无外层滚动 |
||||
|
5. 缺数据不造假 |
||||
|
|
||||
|
## 风险 |
||||
|
|
||||
|
- `setStyle` 清层后恢复失败会导致点位消失：必须统一走 style.load 恢复路径 |
||||
|
- 任务进度字段可能稀疏：空态必须可用 |
||||
|
- 弹窗与详情页入口并存时，文案/图标职责需清晰，避免两个「详情」混淆 |
||||
Loading…
Reference in new issue