42 lines
2.2 KiB
Markdown
42 lines
2.2 KiB
Markdown
# 装箱区信息看板设计规格
|
||
|
||
## 目标
|
||
|
||
创建一个无需接口和构建工具即可直接打开的独立 HTML Demo。页面延续 `index4.html` 的点位信息、搜索定位、缩放拖动和右键复制功能，并采用 `rollInfoDashboard.html` 的深色科技大屏视觉。
|
||
|
||
## 页面结构
|
||
|
||
- 固定 1920 × 1080 设计舞台，随浏览器窗口等比缩放。
|
||
- 顶部包含品牌标识、看板标题、当前日期时间和演示数据标识。
|
||
- 第二行包含总点位、占用、空闲、超时、占用率五项 KPI。
|
||
- 工具条包含状态图例、卷号搜索、超时阈值、地图缩放比例和复位按钮。
|
||
- 主体左侧为平面布置图，右侧为装箱队列和当前选中点位详情。
|
||
|
||
## 平面布局
|
||
|
||
- 北区为一排 6 个暂存点位：`ZJXX_01` 至 `ZJXX_06`。
|
||
- 中区为 7 排 6 列待检点位：`DJQ_01` 至 `DJQ_42`，按从上到下、从左到右顺序编号。
|
||
- 南区第一排为装箱区 1：`ZXQ_01` 至 `ZXQ_08`，右侧为 `ZXDJW_01`。
|
||
- 南区第二排为装箱区 2：`ZXQ_09` 至 `ZXQ_16`，右侧为 `ZXDJW_02`。
|
||
- 区域间和点位组之间使用白色发光线表示 AGV 通道，配合方向箭头表达行驶路径。
|
||
|
||
## 点位数据与状态
|
||
|
||
每个点位使用确定性的本地模拟数据，展示点位编码、点位名称、库存状态、卷号、箱号、进入时间和停留时长。状态包含空闲、空载具、有子卷、合格品和管制品；超过用户设置阈值的占用点位显示红色超时效果。
|
||
|
||
## 交互
|
||
|
||
- 输入完整或部分卷号后定位并高亮匹配点位。
|
||
- 鼠标滚轮缩放地图，按住左键拖动，双击或点击复位按钮恢复适配视图。
|
||
- 单击点位更新右侧详情。
|
||
- 右键点位弹出菜单，可复制卷号或箱号；不可用的复制项禁用。
|
||
- 超时阈值和缩放比例即时更新，并保存在浏览器本地。
|
||
|
||
## 验证标准
|
||
|
||
- HTML 可直接打开且不访问任何 API 或外部资源。
|
||
- 页面包含 6 个北区点位、42 个中区点位、16 个装箱区点位和 2 个装箱等待位，共 66 个点位。
|
||
- 1920 × 1080 下无主体溢出，缩小窗口时保持等比展示。
|
||
- 搜索、选中、缩放、拖动、复位和右键菜单可以正常使用。
|
||
|