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

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 基础检查

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 验证流程

每轮完成后执行：

npm run build

如涉及布局，启动或复用本地服务：

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