Browse Source
Align monitor right panel with jcWeb 3 dock metrics and 1080p one-screen density goals.main
xiaosi
4 weeks ago
1 changed files with 99 additions and 0 deletions
@ -0,0 +1,99 @@ |
|||||
|
# 监控页右侧详情栏：机巢运行态补齐 + 1080p 一屏密度 |
||||
|
|
||||
|
## 背景 |
||||
|
|
||||
|
`/monitor` 选中设备后，右侧 `detail-panel` 在 `1920×1080` 下内容偏高，需要滚动才能操作控制区。同时对照 `jcWeb 3` 原型，机巢态运行指标与原型不一致：当前展示舱内温湿度 / PLC 连接，原型为电量 / 充电 / 舱门 / 控制模式，并提供「查看详情」入口。 |
||||
|
|
||||
|
## 目标 |
||||
|
|
||||
|
1. 机巢运行态对齐 `jcWeb 3` |
||||
|
2. 增加「查看详情」跳转设备详情页 |
||||
|
3. `1920×1080` 下右侧栏尽量整栏一屏显示（默认快捷控制与展开「更多控制」都尽量不滚） |
||||
|
4. 不改变控制指令语义与业务数据协议 |
||||
|
|
||||
|
## 非目标 |
||||
|
|
||||
|
- 不改左侧设备列表信息架构 |
||||
|
- 不重构整页布局为新组件体系 |
||||
|
- 不新增后端字段；仅复用现有 realtime / environment / devicesStore 数据 |
||||
|
- 不做小于 1080p 高度的强制一屏（小屏仍允许滚动） |
||||
|
|
||||
|
## 对照结论（jcWeb 3 → 当前） |
||||
|
|
||||
|
原型机巢右侧栏结构： |
||||
|
|
||||
|
1. header |
||||
|
2. 实时画面 |
||||
|
3. 运行状态：无人机电量 / 充电状态 / 舱门状态 / 控制模式 +「查看详情」 |
||||
|
4. 机巢环境：舱外温度 / 风速 / 雨量 |
||||
|
5. 快捷控制 / 更多控制 |
||||
|
|
||||
|
当前实现缺口： |
||||
|
|
||||
|
- 机巢 `metric-grid` 使用温湿度与 PLC，缺少充电 / 舱门 / 控制模式 |
||||
|
- 缺少运行状态旁「查看详情」文本按钮（虽有 header 最大化按钮，但与原型入口不一致） |
||||
|
- 区块间距与控件高度导致 1080p 易溢出 |
||||
|
|
||||
|
## 设计 |
||||
|
|
||||
|
### 1. 机巢运行态指标 |
||||
|
|
||||
|
选中机巢时，`status-section` 改为： |
||||
|
|
||||
|
| 格子 | 文案 | 数据来源 | |
||||
|
|---|---|---| |
||||
|
| 1 | 无人机电量 | 绑定无人机 `selectedDrone.battery` | |
||||
|
| 2 | 充电状态 | `realtime.chargingState`（文案映射复用 DeviceDetailView：`charging→充电中` 等） | |
||||
|
| 3 | 舱门状态 | 复用 DeviceDetailView 的左右门汇总逻辑（已关闭 / 已打开 / 不一致 / `--`） | |
||||
|
| 4 | 控制模式 | `record.mode` 或 `realtime.controlMode` 文本 | |
||||
|
|
||||
|
标题： |
||||
|
|
||||
|
- `机巢状态` → `运行状态` |
||||
|
- 右侧增加文本按钮 `查看详情`，点击走现有 `goDetail()`（`device-detail`） |
||||
|
|
||||
|
充电中等成功态可沿用现有 `.success` / green-text 视觉。 |
||||
|
|
||||
|
### 2. 机巢环境 |
||||
|
|
||||
|
保留环境区块，不删除。展示字段保持现有数据绑定（风速 / 室外温度 / 降雨）；若后续单独对齐雨量单位文案，另开任务。本任务不把环境改成阻塞项。 |
||||
|
|
||||
|
### 3. 无人机态 |
||||
|
|
||||
|
保持现有飞行状态四格（电量 / 高度 / 速度 / 卫星）。速度继续一位小数。本任务不为无人机新增任务进度条（`jcWeb 3` 有，但超出本次“缺机巢详情 + 一屏”范围）。 |
||||
|
|
||||
|
### 4. 1080p 密度 |
||||
|
|
||||
|
以 CSS 密度压缩为主，结构不拆： |
||||
|
|
||||
|
- 压缩 `detail-header`、section padding、`section-title` margin |
||||
|
- 适度降低视频区高度 |
||||
|
- 压缩 `metric-grid` 卡片高度与字号 |
||||
|
- 压缩 workflow / stage / extra control 按钮高度与间距 |
||||
|
- 展开「更多控制」时再压一档 extra 按钮高度 |
||||
|
|
||||
|
生效策略： |
||||
|
|
||||
|
- 优先用 `@media (min-height: 900px) and (max-height: 1100px)`（覆盖 1080p 主目标） |
||||
|
- 避免把更小高度屏幕进一步挤爆；小屏保留滚动 |
||||
|
|
||||
|
### 5. 实现落点 |
||||
|
|
||||
|
- `src/views/MonitorView/MonitorView.vue`：机巢指标字段、查看详情按钮、必要的展示 helper（可抽本地函数，或轻量复用 DeviceDetail 映射思路；避免大范围跨页耦合） |
||||
|
- `src/styles/prototype.css`：密度样式与必要的 `.text-button` / 成功态样式对齐 |
||||
|
- 不改命令下发、不改 live 播放逻辑 |
||||
|
|
||||
|
## 验收 |
||||
|
|
||||
|
在 `1920×1080`： |
||||
|
|
||||
|
1. 选中机巢：可见实时画面、运行状态四格（电量/充电/舱门/控制模式）、环境、快捷控制；右侧栏尽量无纵向滚动 |
||||
|
2. 点击「查看详情」进入对应设备详情页 |
||||
|
3. 展开「更多控制」后尽量仍一屏；若极限溢出，仅允许控制区内部微滚，外层栏优先不滚 |
||||
|
4. 选中无人机：飞行状态 + 环境 + 控制尽量一屏 |
||||
|
5. 小于目标高度的屏幕：不强制一屏，功能正常 |
||||
|
|
||||
|
## 风险 |
||||
|
|
||||
|
- 部分机巢 realtime 缺门状态/充电字段时，对应格显示 `--`，不造假数据 |
||||
|
- 一屏与可读性冲突时，优先保证控制可点与关键运行态可读，再压装饰性空白 |
||||
Loading…
Reference in new issue