jcl
/
haoliang-net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
main
feat/windows-service-status-auto
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '4b70b8eacf'
${ noResults }
haoliang-net/docs/02-功能清单/管理后台/13-采集日志/13-01-采集日志页面.md

5.3 KiB
Raw Blame History Unescape Escape

13-01 采集日志页面

_ 本文档按照20项模板撰写，用于前端实现“采集日志页面”的设计与交互规范。页面在管理后台中放置于 /collect-log 路由下，包含三个标签页：分析记录、采集周期、原始数据。_

1. 页面基本信息

  • 模块：管理后台 -> 采集日志
  • 页面名称：采集日志页面
  • 路由：/collect-log
  • 版本：v1.0
  • 作者：设计/前端团队
  • 依赖：Element Plus、Vue 3、TypeScript

2. 布局结构

  • 顶部区域：查询条件区域（时间范围、地址、机床、分析类型、程序名等）
  • 中部区域：Tabs 切换，包含三个 Tab：分析记录、采集周期、原始数据
  • 各 Tab 之下为各自的表格 + 分页控件
  • 底部/弹窗区域：查看详情弹窗、关联跳转入口

3. 数据表格列定义

  • 分析记录（Tab1）列：时间、地址、机床、分析类型、前程序、当前程序、产量变化、摘要、操作
  • 采集周期（Tab2）列：时间、地址、总机床、成功、失败、异常、分布、摘要
  • 原始数据（Tab3）列：原始日志ID、时间、内容摘要、来源地址

4. 查询条件字段

  • 时间范围：日期时间范围选择器，格式 yyyy-MM-dd HH:mm:ss
  • 采集地址：下拉或文本输入，支持模糊匹配
  • 机床：下拉选择
  • 分析类型：多选过滤标签
  • 程序名：文本输入
  • 提交触发：查询按钮，重置按钮
  • 每页显示条数：分页组件控制

5. API端点定义

  • GET /api/admin/collect-log/analysis
  • GET /api/admin/collect-log/analysis/{id}
  • GET /api/admin/collect-log/analysis/by-raw/{rawLogId}
  • GET /api/admin/collect-log/cycle
  • GET /api/admin/collect-log/raw

6. Mock数据结构

  • 分析记录列表 Mock：数组对象包含 time、address、machine、type、previousProgram、currentProgram、yieldDelta、summary
  • 分析详情 Mock：含 detail 字段、difference 和对比数据
  • 周期数据 Mock：time、address、totalMachines、success、failure、anomaly、distribution、summary
  • 原始数据 Mock：rawId、logTime、contentPreview、sourceAddress

7. 交互行为

  • 标签页切换：切换时重新加载对应表格数据
  • 分页：点击页码、切换每页条数时加载对应页数据
  • 查看详情弹窗：选中行后弹出，展示分析详情或对比信息
  • 关联跳转：点击相关行的跳转按钮，跳转至对应的关联页面
  • 原始数据查看：点击原始数据行，弹出 JSON 原始数据预览

8. 组件树

  • 组件树示例：CollectLogPage -> (QueryForm, ElTabs -> (AnalysisTab, CycleTab, RawTab) -> (ElTable, ElPagination)) -> DetailDialog
  • 表单控件（QueryForm）：el-form、el-form-item、el-date-picker、el-input、el-select、el-tag
  • 表格与分页：el-table、el-table-column、el-pagination
  • 弹窗：el-dialog
  • 细化的子组件：AnalysisTable、CycleTable、RawTable、DetailDialog（可复用）

9. 路由配置

  • 路由路径：/collect-log
  • 路由组件：CollectLogPage
  • 路由守卫：同其他管理后台页面的权限控制
  • 嵌套路由（若有需要）：/collect-log/analysis、/collect-log/cycle、/collect-log/raw

10. 数据校验与错误处理

  • 搜索条件必填项的格式校验：时间范围格式、文本字段长度等
  • API 请求失败时，展示友好错误信息并保留上一次有效数据展示
  • 弹窗中的对比信息若数据为空，显示空态提示

11. 性能与优化点

  • 分页按需加载，避免一次性加载所有数据
  • 表格列尽量避免使用复杂自定义渲染，必要时使用虚拟滚动
  • 原始数据区域对大文本使用内容摘要展示，点击展开查看全文

12. 国际化与无障碍

  • 暂定中文显示，未来支持多语言资源
  • 组件具备基础无障碍特性，表格可读性良好

13. 数据引用与结构（接口关联）

  • 参考后端 API 端点，数据结构需与后端返回字段严格对齐
  • 需在页面中以常量形式存放端点引用及字段映射，便于维护

14. 组件样式与风格

  • 遵循全局主题，表格列宽可自适应，必要时固定宽度以确保对齐
  • 按钮、标签、弹窗风格与全局规范保持一致

15. 版本与变更记录

  • 每次变更需记录版本号和变更摘要，便于回溯
  • 与模块索引、总览文档保持同步

16. 技术实现概要

  • 主要使用 Vue 3 + TypeScript + Element Plus，按项目的前端全局规范实现
  • 数据获取走统一的 API 调用封装，错误统一处理
  • UI 组件具有可复用性，便于其他模块复用

17. 数据流与状态管理

  • 页面局部状态通过 Vue 的响应式系统管理
  • 表格数据、筛选条件和分页状态保持在组件状态中，必要时通过 Store/Pinia 共享

18. 测试用例设计

  • 基本渲染测试：页面渲染、表格列正确显示
  • 筛选与分页功能测试
  • 弹窗查看详情测试
  • 跳转与联动测试

19. 部署与运行

  • 本地调试：确保 /collect-log 路由可访问，接口 Mock/测试环境数据正常
  • 与后端联调时保持端点一致，返回字段映射不变

20. 变更记录

  • 记录本页面文档的变更时间、版本和修改内容，便于团队追踪

备注：本文档遵循文档结构规范，确保与其他模块文档风格一致，如需对齐请参考 docs/02-功能清单/02-文件夹创建规范.md 与 docs/02-界面变更执行规范.md。