122 lines
4.4 KiB
Markdown
122 lines
4.4 KiB
Markdown
# 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` 改动。
|