# 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` 改动。