chore: checkpoint before scada visual polish

work/working1/02-程序开发步骤.md

@@ -0,0 +1,121 @@
+# 02-程序开发步骤
+
+更新时间：2026-06-24  
+适用项目：`D:\5ITlearning\DT_TV\QingAnVue2TV`
+
+## 1. 开发原则
+
+1. 保持 Vue2 + Vue CLI 技术栈，不引入新框架。
+2. 大屏以 1920x1080 固定画布开发，通过缩放适配窗口。
+3. 优先复用老项目已有视觉资源，例如 `public/png/top1.png`、左右标题条、背景底图、边框条。
+4. 中央三维模型以 iframe 为核心画面，周边面板服务于模型，不抢主视觉。
+5. 每轮改动后必须至少执行一次构建验证；涉及布局时补充截图验收。
+6. 不提交用户未确认的无关删除或配置变更。
+
+## 2. 阶段划分
+
+| 阶段 | 目标 | 主要工作 | 产出 |
+|---|---|---|---|
+| P0 | 备份与清理准备 | git 建仓/远程备份、识别核心页面、确认可删资产 | 可回滚提交点 |
+| P1 | 遗留资源清理 | 删除 DMT/DMT_WEB 和未引用 src 内容，精简依赖 | 干净项目骨架 |
+| P2 | 需求梳理 | 阅读设计说明、拆模块、建立任务矩阵 | `01-06` 管理文档 |
+| P3 | 页面结构搭建 | 用老看板壳子承载新看板内容 | `DaLuJiaTV1.vue` 主布局 |
+| P4 | 模块实现 | 实现线体、设备、库位、报警、日志模块 | 可运行的静态/模拟数据页面 |
+| P5 | 数据接入 | 将模拟数组替换为接口/通讯变量数据 | 数据映射层、刷新逻辑 |
+| P6 | 交互联动 | 单元高亮、设备详情、报警定位、任务追踪 | 可交互看板 |
+| P7 | 视觉与适配 | 1920x1080、1600x900 等视口检查 | 截图和问题清单 |
+| P8 | 验收与交付 | 构建、截图、台账、决策记录补齐 | 可交付版本 |
+
+## 3. 推荐开发顺序
+
+### 3.1 基础检查
+
+```powershell
+git -c safe.directory=D:/5ITlearning/DT_TV/QingAnVue2TV -C D:\5ITlearning\DT_TV\QingAnVue2TV status --short
+npm run build
+```
+
+检查项：
+
+- `src/views/DaLuJiaTV1.vue` 是否为主页面。
+- `src/router/index.js` 是否仍指向 `DaLuJiaTV1`。
+- `public/config.js` 中 `iframeAddress` 是否为期望模型地址。
+- 是否存在用户未处理的工作区变更。
+
+### 3.2 页面骨架
+
+1. 保留顶部标题与时间。
+2. 左侧使用 `线体联动监控`，将线体状态、任务流向、反馈流程合并为单元卡片。
+3. 中央使用 iframe，保持纯净画面。
+4. 右侧放 `加工设备状态` 与 `辅助设备状态`，标题右对齐。
+5. 底部放 `物料库位矩阵`、`报警与异常事件`、`任务日志`。
+
+### 3.3 数据结构
+
+推荐在 `data()` 中按模块建立数组：
+
+| 数据对象 | 用途 |
+|---|---|
+| `lineMonitorRows` | 左侧线体联动监控，一条数据代表一个单元 |
+| `equipmentList` | 加工设备状态列表 |
+| `assistList` | 辅助设备状态卡片 |
+| `storageGroups` | 物料库位矩阵 |
+| `alarmEvents` | 报警与异常事件 |
+| `taskLogs` | 任务日志 |
+
+后续真实数据接入时，建议新增转换函数，不直接把接口结构写进模板。
+
+### 3.4 样式实现
+
+1. 使用固定画布：`width: 1920px; height: 1080px`。
+2. 使用 `setScale()` 按窗口缩放。
+3. 固定面板尺寸，避免动态内容撑乱布局。
+4. 所有列表行使用固定列宽、`minmax(0, 1fr)` 和 `text-overflow`。
+5. 库位格子使用固定 `grid-auto-rows`，确保 3x3 完整显示。
+
+### 3.5 验证流程
+
+每轮完成后执行：
+
+```powershell
+npm run build
+```
+
+如涉及布局，启动或复用本地服务：
+
+```powershell
+npm run serve
+```
+
+浏览器检查：
+
+- `http://127.0.0.1:8084/`
+- 1920x1080 或等比例视口。
+- 重点检查文字重叠、滚动条、格子缺失、右侧状态挤压、iframe 是否被遮挡。
+
+## 4. 代码落点
+
+| 文件 | 用途 |
+|---|---|
+| `src/views/DaLuJiaTV1.vue` | 新项目主看板页面 |
+| `src/views/DaLuJiaTV2.vue` | 老页面/参考页，非当前主改动对象 |
+| `src/router/index.js` | 路由入口 |
+| `public/config.js` | iframe 地址和服务地址配置 |
+| `public/png/` | 老项目视觉素材 |
+| `work/working1/` | 需求、推进、验收和决策文档 |
+
+## 5. 提交建议
+
+每个阶段建议单独提交：
+
+1. `docs: add dashboard working documents`
+2. `feat: implement signal dashboard layout`
+3. `fix: refine dashboard panel layout`
+4. `chore: prune unused legacy dashboard assets`
+
+提交前不要把以下内容误带入，除非用户明确确认：
+
+- 用户手动删除的压缩包或旧文档。
+- 临时截图。
+- 本地日志文件。
+- 未确认的 `public/config.js` 改动。