Appearance
张力管理模块
**本文档引用的文件** - [stringing.vue](file://app/devicemate-app/modules/stringing/stringing.vue) - [installLine.vue](file://app/devicemate-app/modules/stringing/installLine.vue) - [pages.json](file://app/devicemate-app/pages.json) - [baseUrl.js](file://app/devicemate-app/config/baseUrl.js) - [zh-Hans.json](file://app/devicemate-app/locale/zh-Hans.json) - [en.json](file://app/devicemate-app/locale/en.json) - [device.sql](file://docs/ddl/device.sql)目录
简介
本文件为张力管理模块的详细开发文档，聚焦于线缆安装与张力改线业务场景。当前代码库中的张力管理功能以“架线改线”为核心，涵盖设备筛选、线体与机型选择、物理位置与工位信息维护、以及批量改线提交等关键流程。文档将从系统架构、组件关系、数据流、处理逻辑、集成点、错误处理与性能特征等方面进行深入解析，并提供页面组件设计思路、数据绑定方式与交互逻辑说明，同时给出业务规范与质量控制要求。
项目结构
张力管理模块位于前端 uni-app 应用中，采用模块化组织：
- 页面入口与导航：通过 pages.json 配置页面路径与标题国际化键
- 业务页面：
- 设备筛选与多选页面：modules/stringing/stringing.vue
- 架线改线详情与提交页面：modules/stringing/installLine.vue
- 国际化资源：locale/zh-Hans.json、locale/en.json
- 接口基础路径：config/baseUrl.js
- 数据库结构：docs/ddl/device.sql（包含线体、设备主表等）
图表来源
章节来源
- pages.json:152-174
- stringing.vue:1-270
- installLine.vue:1-174
- baseUrl.js:1-11
- zh-Hans.json:218-225
- en.json:218-220
核心组件
- 设备筛选与多选页面（stringing.vue）
- 功能：支持设备编码/名称搜索、扫码获取设备编码、分页加载设备列表、勾选设备并批量进入改线页面
- 关键特性：下拉刷新、上拉加载、字典数据加载（设备状态、使用状态）、选择计数与底部弹窗
- 架线改线详情与提交页面（installLine.vue）
- 功能：选择线体、机型，填写物理位置与工位，批量提交改线
- 关键特性：选择器弹窗、表单校验、批量数据更新、提交成功提示与返回
章节来源
架构概览
张力管理模块遵循前后端分离架构：
- 前端负责用户交互、页面路由、数据绑定与状态管理
- 后端提供 REST 接口，分别用于设备分页查询、线体与机型列表获取、以及批量改线提交
- 国际化资源统一管理，页面标题与字段文案通过国际化键绑定
图表来源
详细组件分析
组件A：设备筛选与多选（stringing.vue）
- 页面布局与交互
- 顶部搜索框与扫码图标，支持关键词搜索与扫码填充设备编码
- 列表项展示设备编码与名称，点击切换选中状态
- 底部弹窗显示当前选中设备清单，支持移除
- 提交按钮根据选中数量启用/禁用
- 数据流与状态
- 分页加载：通过 mescroll 组件实现上拉加载与下拉刷新
- 字典加载：加载设备状态与使用状态字典，供页面渲染与过滤
- 选中状态：通过 selectList 与 dataList 的联动维护
- 关键流程
- 搜索/扫码 -> 触发分页重载 -> 加载设备列表 -> 初始化选中状态
- 用户勾选 -> 更新 selectList -> 计算选中数量 -> 控制底部弹窗显示
- 点击提交 -> 跳转改线详情页并传递选中设备列表
图表来源
章节来源
组件B：架线改线详情与提交（installLine.vue）
- 页面布局与交互
- 顶部选择器弹窗，支持线体与机型选择
- 表单区域：线体、机型、物理位置、工位
- 导航栏右侧提交按钮，触发表单校验与批量提交
- 数据流与状态
- 加载线体与机型列表：分别调用线体与机型接口
- 表单校验：确保线体、机型、物理位置、工位均填写
- 批量更新：将表单值同步到选中设备列表
- 提交：调用批量改线接口，成功后提示并返回
- 关键流程
- 页面加载 -> 获取线体与机型列表
- 用户选择 -> 弹窗确认 -> 写入表单信息
- 提交校验 -> 批量更新 -> 调用改线接口 -> 成功提示与返回
图表来源
章节来源
组件C：国际化与页面标题（pages.json、locale）
- 页面标题
- 通过 pages.json 中的导航栏标题键绑定国际化文案
- 字段文案
- installLine 模块的字段文案由 locale 文件提供，包括设备编码、设备名称、线体、机型、物理位置、工位等
- 交互文案
- 提交成功、选择提示等交互文案通过国际化键统一管理
章节来源
依赖关系分析
- 前端依赖
- mescroll-uni：提供分页加载与下拉刷新能力
- uView UI：提供表单、弹窗、选择器等组件
- 国际化：通过 locale 文件与 pages.json 标题键实现
- 后端接口依赖
- 设备分页查询：/dm-device/device/main/page
- 线体列表：/dm-store/line/queryStoreMainList
- 机型列表：/dm-store/processModel/list
- 批量改线：/dm-device/device/main/rerouting
- 数据库结构依赖
- 线体表（line）：包含线体编码、名称、代号等字段
- 设备主表：包含设备编码、名称、状态、位置、工位等字段（具体字段以接口返回为准）
图表来源
章节来源
性能考虑
- 分页加载策略
- 使用 mescroll 实现上拉加载与下拉刷新，避免一次性加载大量设备数据
- 合理设置分页大小，减少网络请求与渲染压力
- 请求去抖与缓存
- 搜索与扫码后触发分页重载，建议在输入与扫码事件中加入防抖
- 对线体与机型列表可做本地缓存，减少重复请求
- 渲染优化
- 列表项采用虚拟滚动或懒加载策略（如需扩展）
- 减少不必要的响应式数据更新，避免频繁重渲染
- 网络与超时
- 设置合理的请求超时与重试机制，提升弱网环境下的稳定性
故障排除指南
- 常见问题
- 设备列表为空：检查设备分页接口连通性与参数传递
- 线体/机型列表为空：检查对应接口连通性与权限
- 提交失败：检查必填项校验与接口返回状态码
- 错误处理
- 页面内通过 toast 提示用户错误信息
- 对网络异常与接口错误进行统一捕获与提示
- 日志与调试
- 在关键流程处输出日志（如接口请求与响应）
- 使用浏览器/开发者工具查看网络请求与控制台错误
章节来源
结论
张力管理模块以“架线改线”为核心，通过设备筛选与多选、线体与机型选择、物理位置与工位维护、以及批量改线提交等流程，实现了线缆安装与张力改线的完整业务闭环。前端采用模块化页面与国际化资源，后端提供稳定的 REST 接口支撑。建议在后续迭代中完善张力数据的监测、记录与分析能力，并扩展实时数据显示、历史查询、趋势分析与报警处理等功能，以满足更复杂的张力管理需求。
附录
- 业务规范与质量控制
- 数据一致性：确保设备状态、线体与机型信息与后端保持一致
- 权限控制：对改线操作进行权限校验，防止越权操作
- 审计日志：记录关键操作（如批量改线）的时间、操作人与变更详情
- 数据校验：对输入字段进行格式与范围校验，确保数据质量
- 用户体验：提供清晰的提示与反馈，优化弱网与离线场景下的可用性