2.2 KiB
2.2 KiB
装箱区信息看板设计规格
目标
创建一个无需接口和构建工具即可直接打开的独立 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 下无主体溢出，缩小窗口时保持等比展示。
- 搜索、选中、缩放、拖动、复位和右键菜单可以正常使用。