# 监控页整页对齐 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 恢复路径
- 任务进度字段可能稀疏：空态必须可用
- 弹窗与详情页入口并存时，文案/图标职责需清晰，避免两个「详情」混淆