104 lines
4.1 KiB
Markdown
104 lines
4.1 KiB
Markdown
|
# 装箱区信息看板实现计划
|
|||
|
|
|
|||
|
|
> **面向 AI 代理的工作者：** 必需子技能：使用 superpowers:subagent-driven-development（推荐）或 superpowers:executing-plans 逐任务实现此计划。步骤使用复选框（`- [ ]`）语法来跟踪进度。
|
|||
|
|
|
|||
|
|
**目标：** 创建一个包含 66 个点位、CAD 式平面布局和完整 Demo 交互的独立装箱区信息看板 HTML。
|
|||
|
|
|
|||
|
|
**架构：** 使用一个 HTML 文件内嵌样式、确定性模拟数据和交互脚本。数据生成、点位渲染、统计计算、地图变换与用户交互使用独立函数组织，不依赖 API、CDN 或构建工具。
|
|||
|
|
|
|||
|
|
**技术栈：** HTML5、CSS3、原生 JavaScript、浏览器 localStorage 与 Clipboard API。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 文件结构
|
|||
|
|
|
|||
|
|
- 创建：`packingAreaDashboard.html`，承载页面结构、视觉样式、模拟数据、布局渲染和交互。
|
|||
|
|
- 创建：`docs/superpowers/specs/2026-08-14-packing-area-dashboard-design.md`，记录已确认设计。
|
|||
|
|
- 创建：`docs/superpowers/plans/2026-08-14-packing-area-dashboard.md`，记录实现和验证步骤。
|
|||
|
|
|
|||
|
|
### 任务 1：建立页面骨架与大屏视觉
|
|||
|
|
|
|||
|
|
**文件：**
|
|||
|
|
- 创建：`packingAreaDashboard.html`
|
|||
|
|
|
|||
|
|
- [ ] **步骤 1：建立 1920 × 1080 舞台**
|
|||
|
|
|
|||
|
|
创建 `#stage`、顶部标题、KPI、工具条、地图和侧栏结构，并使用 `scaleStage()` 根据窗口尺寸等比缩放。
|
|||
|
|
|
|||
|
|
- [ ] **步骤 2：实现深色科技风样式**
|
|||
|
|
|
|||
|
|
使用径向渐变、网格背景、青蓝描边、玻璃面板和细微辉光，避免外部字体与图片依赖。
|
|||
|
|
|
|||
|
|
### 任务 2：生成 66 个点位与模拟数据
|
|||
|
|
|
|||
|
|
**文件：**
|
|||
|
|
- 修改：`packingAreaDashboard.html`
|
|||
|
|
|
|||
|
|
- [ ] **步骤 1：定义点位编码生成函数**
|
|||
|
|
|
|||
|
|
`rangeCodes(prefix, start, end)` 必须生成补零后的编码；北区 6 个、中区 42 个、南区 18 个。
|
|||
|
|
|
|||
|
|
- [ ] **步骤 2：定义确定性模拟数据**
|
|||
|
|
|
|||
|
|
`createMockPoint(code, index, zone)` 根据索引生成稳定的库存状态、卷号、箱号、进入时间和停留时长，刷新页面后数据仍保持一致。
|
|||
|
|
|
|||
|
|
- [ ] **步骤 3：渲染点位卡片**
|
|||
|
|
|
|||
|
|
`renderSlot(point, className)` 输出编码、状态、卷号、箱号和停留时长，并附带搜索、选中和右键菜单所需数据属性。
|
|||
|
|
|
|||
|
|
### 任务 3：绘制北中南平面布局和 AGV 通道
|
|||
|
|
|
|||
|
|
**文件：**
|
|||
|
|
- 修改：`packingAreaDashboard.html`
|
|||
|
|
|
|||
|
|
- [ ] **步骤 1：渲染北区**
|
|||
|
|
|
|||
|
|
使用 6 列网格呈现 `ZJXX_01` 至 `ZJXX_06`，在区域上下绘制横向 AGV 通道。
|
|||
|
|
|
|||
|
|
- [ ] **步骤 2：渲染中区**
|
|||
|
|
|
|||
|
|
使用 7 行 × 6 列网格呈现 `DJQ_01` 至 `DJQ_42`，在两列点位之间插入纵向白色通道，并在区域周边绘制闭合通道。
|
|||
|
|
|
|||
|
|
- [ ] **步骤 3：渲染南区**
|
|||
|
|
|
|||
|
|
两行分别呈现 8 个 `ZXQ` 点位，在右侧呈现 `ZXDJW_01` 和 `ZXDJW_02`，使用不同区域标签区分装箱区 1 和装箱区 2。
|
|||
|
|
|
|||
|
|
### 任务 4：实现统计与交互
|
|||
|
|
|
|||
|
|
**文件：**
|
|||
|
|
- 修改：`packingAreaDashboard.html`
|
|||
|
|
|
|||
|
|
- [ ] **步骤 1：计算 KPI 和队列**
|
|||
|
|
|
|||
|
|
`updateDashboard()` 根据点位状态和超时阈值刷新总数、占用、空闲、超时、占用率及装箱队列。
|
|||
|
|
|
|||
|
|
- [ ] **步骤 2：实现卷号搜索定位**
|
|||
|
|
|
|||
|
|
`locateRoll()` 匹配完整或部分卷号，选中第一个结果，将地图平移到点位附近并显示结果提示。
|
|||
|
|
|
|||
|
|
- [ ] **步骤 3：实现地图操作**
|
|||
|
|
|
|||
|
|
`fitMap()`、`applyTransform()`、滚轮事件和拖动事件共同支持适配、缩放、平移与双击复位。
|
|||
|
|
|
|||
|
|
- [ ] **步骤 4：实现点位详情与右键复制**
|
|||
|
|
|
|||
|
|
点位单击后调用 `selectPoint()` 更新详情；右键菜单根据字段是否存在启用复制按钮，并使用 Clipboard API 或文本选择回退方案复制。
|
|||
|
|
|
|||
|
|
### 任务 5：执行交付验证
|
|||
|
|
|
|||
|
|
**文件：**
|
|||
|
|
- 验证：`packingAreaDashboard.html`
|
|||
|
|
|
|||
|
|
- [ ] **步骤 1：执行静态结构检查**
|
|||
|
|
|
|||
|
|
确认文件包含 66 个点位的生成规则、无 `fetch()` 和外部资源引用，并检查脚本语法。
|
|||
|
|
|
|||
|
|
- [ ] **步骤 2：执行浏览器视觉检查**
|
|||
|
|
|
|||
|
|
以 1920 × 1080 视口打开本地文件，确认三大区域、KPI、侧栏和点位内容没有遮挡或主体溢出。
|
|||
|
|
|
|||
|
|
- [ ] **步骤 3：执行交互检查**
|
|||
|
|
|
|||
|
|
验证卷号搜索、点位选择、缩放、复位和右键菜单，确认浏览器控制台无错误。
|
|||
|
|
|