项目说明

1. 项目定位

检测室数据可视化系统用于集中管理电池测试任务、测试柜与采集器、检测数据、异常、报表、待办和账号权限。界面采用“深蓝工业运维”方向，强调信息密度、状态辨识度和重复操作效率。

2. 核心业务概念与数据关系

2.1 核心概念

2.2 关系与业务约束

电池组 1 ─── N 电池 / 电池号
  │
  └── 测试选择 1 个电池组，并从中选择 1 个或多个电池号
        │
        └── 测试流程由多个有序工步组成一个循环，再按循环次数重复执行

• 电池号不能脱离所属电池组单独参与测试；测试中的电池选择必须来自当前测试所选电池组。
• 一次测试至少选择一个电池号，也可以选择同一电池组下的多个电池号；不能混选其他电池组的电池。
• 工步是最小执行单位，必须保留顺序和参数；“恒流充电”和“恒流放电”是两个不同工步。
• 循环是工步组合的重复单元，循环次数描述该组合被重复执行的次数，不能把循环次数当作工步数量。
• 任何数据记录应能够定位到测试、测试电池号、循环序号和工步序号，便于数据修订、异常追踪和对比报表引用。

2.3 页面联动约定

• 新建测试：先选电池组，再加载该组电池号；选择一个或多个电池号后，再配置工步和循环。
• 新建对比报表：先选择已有测试，再只展示该测试实际使用的电池号、循环和工步供选择；“选择工步”应显示“序号-工步名称”。
• 对比报表中的“循环”选择的是第几个循环，“工步”选择的是该循环中的具体步骤，两者不可互换。
• 文案统一使用“电池组”“电池号”“工步”“循环”“循环次数”，避免用“电池”同时指代电池组和单体电池。

3. 技术栈

4. 目录结构

web/
├─ docs/
│  ├─ PROJECT.md              # 项目结构、页面树、约定、开发记录
│  └─ pages/                  # 每个路由页面的功能说明
├─ public/                    # 静态图标与站点资源
├─ src/
│  ├─ assets/                 # 页面图片等打包资源
│  ├─ components/
│  │  ├─ ConsoleChartPanel.vue # 控制台工步详情、数据选择与五类曲线
│  │  ├─ ConsoleProjectChartPanel.vue # 控制台循环汇总项目图表
│  │  ├─ ConsoleDataListPanel.vue # 控制台测试数据查询、修订与导出
│  │  ├─ GlobalSearch.vue     # 全局页面、测试与报表搜索
│  │  └─ NotificationCenter.vue # 异常、待办与待测试消息中心
│  ├─ layout/
│  │  ├─ Layout.vue           # 应用框架、侧栏宽度与内容区联动
│  │  ├─ Header.vue           # 顶栏、系统状态条、菜单控制
│  │  └─ Sidebar.vue          # 导航、一级/二级收起、移动抽屉
│  ├─ router/index.ts         # 路由表、登录守卫、页面标题
│  ├─ utils/
│  │  ├─ auth.ts              # 演示登录态与用户信息
│  │  ├─ compareReportPrint.ts # 对比报表共享曲线定义与 PDF 打印模板
│  │  └─ formationReportPrint.ts # 化成报表共享曲线定义与分循环 PDF 模板
│  ├─ views/
│  │  ├─ Login.vue            # 登录
│  │  ├─ Dashboard.vue        # 工作台
│  │  ├─ TestList.vue         # 测试列表
│  │  ├─ TestCreate.vue       # 新建测试
│  │  ├─ BatteryGroup.vue     # 电池组管理
│  │  ├─ BatteryGroupForm.vue # 电池组新增与编辑
│  │  ├─ BatteryGroupField.vue # 电池组字段管理
│  │  ├─ TestType.vue         # 测试类型管理
│  │  ├─ TestConsole.vue      # 测试实时数据、工步、参数、异常和通道控制台
│  │  ├─ ConsoleDataEdit.vue  # 控制台单条测试数据修改与审计提交
│  │  ├─ ConsoleDataImport.vue # 控制台 Excel 数据校验、预览与导入结果
│  │  ├─ TestTypeForm.vue     # 测试类型新增与编辑
│  │  ├─ DataRevision.vue     # 数据修订记录列表
│  │  ├─ DataRevisionDetail.vue # 数据修订只读详情
│  │  ├─ Exception.vue        # 异常管理
│  │  ├─ DeviceCabinet.vue    # 检测柜列表
│  │  ├─ DeviceCabinetForm.vue # 检测柜新增与编辑
│  │  ├─ DeviceCollector.vue  # 采集器列表
│  │  ├─ DeviceCollectorForm.vue # 采集器新增与编辑
│  │  ├─ ReportCompare.vue    # 对比报表列表、编辑与修订记录
│  │  ├─ ReportCompareForm.vue # 新增对比报表配置与曲线
│  │  ├─ SpliceReport.vue     # 拼接报表查询、列表和删除
│  │  ├─ SpliceReportForm.vue # 拼接报表新增编辑、固定详情和横向拼接曲线
│  │  ├─ TodoList.vue         # 待办筛选、新增、处理和删除
│  │  ├─ Account.vue          # 账号查询、新增编辑、启停和密码重置
│  │  ├─ Role.vue             # 角色查询、关联账号数和删除约束
│  │  ├─ RoleForm.vue         # 角色新增编辑、详情和权限矩阵
│  │  ├─ OperationLog.vue     # 操作日志查询、只读列表与分页
│  │  └─ Placeholder.vue      # 尚未开发页面的统一占位
│  ├─ stores/
│  │  ├─ tests.ts             # 旧测试展示缓存；工作台/搜索/通知仍使用，待迁移
│  │  ├─ batteryGroups.ts     # 电池组页面展示缓存（事实来自 REST）
│  │  ├─ batteryGroupFields.ts # 字段页面展示缓存（事实来自 REST）
│  │  ├─ testTypes.ts         # 测试类型页面展示缓存（事实来自 REST）
│  │  ├─ dataRevisions.ts     # 数据修订页面展示缓存与详情查询
│  │  ├─ consoleTestData.ts   # 控制台数据列表与修改页共享状态
│  │  ├─ exceptions.ts        # 异常记录共享演示数据与本地持久化
│  │  ├─ deviceCabinets.ts    # 检测柜与发现设备展示缓存（事实来自 REST）
│  │  ├─ deviceCollectors.ts  # 采集器与发现设备展示缓存（事实来自 REST）
│  │  ├─ compareReports.ts    # 对比报表及修订记录演示数据
│  │  ├─ formationReports.ts  # 化成报表、循环明细和曲线配置演示数据
│  │  ├─ spliceReports.ts     # 拼接报表、测试段和详情配置演示数据
│  │  ├─ todos.ts             # 待办记录和处理状态演示数据
│  │  ├─ operationLogs.ts     # 操作审计只读演示数据
│  │  └─ accessControl.ts     # 账号、角色和页面权限共享数据
│  ├─ App.vue                 # 根组件
│  ├─ main.ts                 # 应用初始化、Element Plus 与图标注册
│  └─ style.css               # 全局设计变量和基础样式
├─ package.json
└─ vite.config.ts

dist/ 与 node_modules/ 为构建产物和依赖目录，不纳入业务结构说明。

5. 页面树

检测室数据可视化系统
├─ 登录 /login
└─ 主框架 /
   ├─ 首页
   │  └─ 工作台 /dashboard                         [已开发]
   ├─ 测试管理
   │  ├─ 测试列表 /test-list                      [已开发]
   │  │  ├─ 新建测试 /test-list/new               [已开发]
   │  │  └─ 测试控制台 /test-list/:id/console     [已开发]
   │  │     ├─ 修改测试数据 /test-list/:id/console/data/:recordId/edit [已开发]
   │  │     └─ 导入测试数据 /test-list/:id/console/data/import [已开发]
   │  ├─ 电池组管理 /battery-group                [已开发]
   │  │  ├─ 新建电池组 /battery-group/new         [已开发]
   │  │  ├─ 编辑电池组 /battery-group/:id/edit    [已开发]
   │  │  └─ 电池组字段管理 /battery-group/fields   [已开发]
   │  ├─ 测试类型管理 /test-type                  [已开发]
   │  │  ├─ 新建测试类型 /test-type/new           [已开发]
   │  │  └─ 编辑测试类型 /test-type/:id/edit      [已开发]
   │  ├─ 数据修订记录 /data-revision              [已开发]
   │  │  └─ 数据修订详情 /data-revision/:id        [已开发]
   │  └─ 异常管理 /exception                      [已开发]
   ├─ 设备管理
   │  ├─ 检测柜 /device-cabinet                   [已开发]
   │  │  ├─ 新增检测柜 /device-cabinet/new        [已开发]
   │  │  └─ 编辑检测柜 /device-cabinet/:id/edit   [已开发]
   │  └─ 采集器 /device-collector                 [已开发]
   │     ├─ 新增采集器 /device-collector/new      [已开发]
   │     └─ 编辑采集器 /device-collector/:id/edit [已开发]
   ├─ 数据分析
   │  ├─ 对比报表 /report-compare                 [已开发]
   │  │  ├─ 新增对比报表 /report-compare/new       [已开发]
   │  │  └─ 编辑/只读查看 /report-compare/:id/edit [已开发]
   │  ├─ 化成报表 /report-formation               [已开发]
   │  │  ├─ 新增化成报表 /report-formation/new    [已开发]
   │  │  └─ 编辑/只读查看 /report-formation/:id/edit [已开发]
   │  └─ 拼接报表 /report-splice                  [已开发]
   │     ├─ 新增拼接报表 /report-splice/new       [已开发]
   │     └─ 编辑/只读查看 /report-splice/:id/edit [已开发]
   ├─ 代办管理
   │  └─ 待办列表 /todo-list                      [已开发]
   └─ 角色与权限
      ├─ 账号管理 /account                        [已开发]
      ├─ 角色管理 /role                           [已开发]
         ├─ 新增角色 /role/new                    [已开发]
         ├─ 角色详情 /role/:id                    [已开发]
         └─ 编辑角色 /role/:id/edit               [已开发]
      └─ 操作日志 /operation-log                  [已开发]

每个页面的功能边界见 页面功能说明索引。

6. 框架与交互约定

• 桌面侧栏展开宽度为 248px，收起宽度为 72px；移动端使用完整宽度抽屉。
• 有子项的导航分组可独立展开或收起；当前路由所在分组自动展开并高亮。
• 页面主体使用直角或小圆角、清晰边框、浅蓝表头和状态色，不使用装饰型大卡片。
• 桌面业务表格优先完整呈现字段；窄屏使用横向滚动，不强行压缩列内容。
• 业务列表字段过多产生横向滚动时，操作列固定在表格最右侧并使用阴影分隔。
• 破坏性操作必须二次确认；查询、重置、下载等操作必须提供明确反馈。
• 顶部页面搜索覆盖全部主菜单页面、测试任务和三类报表，业务数据结果直接进入对应控制台或只读报表。
• 消息中心聚合待处理异常、待办和待测试任务；支持未读计数、全部已读和单条业务跳转，已读状态使用 localStorage 保存。
• 测试、设备、电池组、共享字段和测试类型的核心事实已通过 REST 由后端提供；工作台、全局搜索、通知中心、异常、待办、权限和三类报表仍有本地演示数据，详见根目录 docs/KNOWN-GAPS.md。

7. 开发与质量检查

npm run dev
npm run build

本地开发服务默认使用 http://127.0.0.1:5173；Ticket04 隔离验收会使用独立端口，端口被占用时直接失败。

前端页面变更至少检查：桌面与移动视口、空数据、长文本、横向溢出、控制台错误和主要交互闭环。

8. 开发记录

9. 后续开发规则

1. 新增路由时同步更新本文件的页面树。
2. 新建或修改页面时同步更新 docs/pages/ 下对应说明。
3. 完成可见功能后在开发记录追加日期、范围和行为变化。
4. API 或后端事实边界变化时，同步更新对应页面文档和根目录 docs/KNOWN-GAPS.md。