4.2 KiB

Raw Blame History

监控页右侧详情栏：机巢运行态补齐 + 1080p 一屏密度

背景

/monitor 选中设备后，右侧 detail-panel 在 1920×1080 下内容偏高，需要滚动才能操作控制区。同时对照 jcWeb 3 原型，机巢态运行指标与原型不一致：当前展示舱内温湿度 / PLC 连接，原型为电量 / 充电 / 舱门 / 控制模式，并提供「查看详情」入口。

目标

机巢运行态对齐 jcWeb 3
增加「查看详情」跳转设备详情页
1920×1080 下右侧栏尽量整栏一屏显示（默认快捷控制与展开「更多控制」都尽量不滚）
不改变控制指令语义与业务数据协议

非目标

不改左侧设备列表信息架构
不重构整页布局为新组件体系
不新增后端字段；仅复用现有 realtime / environment / devicesStore 数据
不做小于 1080p 高度的强制一屏（小屏仍允许滚动）

对照结论（jcWeb 3 → 当前）

原型机巢右侧栏结构：

header
实时画面
运行状态：无人机电量 / 充电状态 / 舱门状态 / 控制模式 +「查看详情」
机巢环境：舱外温度 / 风速 / 雨量
快捷控制 / 更多控制

当前实现缺口：

机巢 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：

选中机巢：可见实时画面、运行状态四格（电量/充电/舱门/控制模式）、环境、快捷控制；右侧栏尽量无纵向滚动
点击「查看详情」进入对应设备详情页
展开「更多控制」后尽量仍一屏；若极限溢出，仅允许控制区内部微滚，外层栏优先不滚
选中无人机：飞行状态 + 环境 + 控制尽量一屏
小于目标高度的屏幕：不强制一屏，功能正常

风险

部分机巢 realtime 缺门状态/充电字段时，对应格显示 --，不造假数据
一屏与可读性冲突时，优先保证控制可点与关键运行态可读，再压装饰性空白

4.2 KiB Raw Blame History