Appearance
巡逻管理模块
**本文引用的文件** - [patrolTasks.vue](file://app/devicemate-app/modules/patrolTasks/patrolTasks.vue) - [execute.vue](file://app/devicemate-app/modules/patrolTasks/execute.vue) - [checkDetail.vue](file://app/devicemate-app/modules/patrolTasks/checkDetail.vue) - [basicInfo.vue](file://app/devicemate-app/modules/patrolTasks/components/basicInfo.vue) - [check.vue](file://app/devicemate-app/modules/patrolTasks/components/check.vue) - [document.vue](file://app/devicemate-app/modules/patrolTasks/components/document.vue) - [safety.vue](file://app/devicemate-app/modules/patrolTasks/components/safety.vue) - [assign.vue](file://app/devicemate-app/modules/common/assign.vue) - [history.vue](file://app/devicemate-app/modules/common/history.vue) - [repair.vue](file://app/devicemate-app/modules/common/repair.vue) - [common.js](file://app/devicemate-app/utils/common.js) - [common.js](file://app/devicemate-app/store/modules/common.js)目录
简介
本文件为“巡逻管理模块”的开发文档，面向一线工程师与产品/运营人员，系统阐述巡逻任务的业务逻辑与操作流程，覆盖任务分配、路线规划（以工单形式呈现）、数据采集（含拍照、数值录入、结果判定）、执行与反馈（含确认人选择、提交与保存）、以及页面交互与离线/在线协同策略。文档同时给出关键流程的时序图与类图，帮助快速理解模块职责与数据流转。
项目结构
巡逻管理模块位于前端应用的模块目录中，采用按功能域划分的组织方式：
- 巡逻主界面：展示巡逻工单列表，支持扫码筛选、分页查询、状态筛选、批量操作（派发、执行、维修、历史）。
- 执行页面：包含基础信息、检查清单、文档资料三个标签页，支持拍照上传、数值校验、结果选择、保存与提交。
- 通用子页面：派发执行人、异常登记、维修工单创建等，复用统一的状态与导航行为。
- 组件化设计：基础信息、检查清单、文档、安全提示等均封装为可复用组件，便于扩展与维护。
图表来源
- patrolTasks.vue:1-350
- execute.vue:1-254
- check.vue:1-215
- basicInfo.vue:1-83
- document.vue:1-139
- checkDetail.vue:1-83
- safety.vue:1-115
- assign.vue:1-174
- history.vue:1-139
- repair.vue:1-196
章节来源
核心组件
- 巡逻任务列表页：负责分页加载、状态筛选、扫码查询、批量操作入口（派发、执行、维修、历史）。
- 执行页：承载基础信息、检查清单、文档三部分，支持拍照上传、数值校验、结果判定、保存与提交。
- 检查清单组件：单项检查项的拍照、数值输入、结果选择、时间与人员显示、本地保存与远程提交。
- 文档组件：文件列表展示与下载，支持多格式图标区分与本地打开。
- 安全提示组件：展示危险源、状态、因素、损伤类型、等级与防护措施等安全信息。
- 派发执行人：从本部门用户中选择执行人并回写工单。
- 异常登记：登记设备异常项并关联到对应工单来源。
- 维修工单：基于当前工单生成维修工单，支持紧急度、缺陷数量/比例、问题描述与图片上传。
章节来源
- patrolTasks.vue:81-242
- execute.vue:19-205
- check.vue:50-129
- document.vue:15-85
- safety.vue:36-54
- assign.vue:30-104
- history.vue:31-97
- repair.vue:53-154
架构总览
前端采用组件化与页面级路由组织，通过 Vuex 管理跨页面共享状态（如页面只读态、派发URL与参数、历史与维修工单上下文），HTTP 请求封装于全局请求模块，国际化与字典混入贯穿各页面与组件。
图表来源
- patrolTasks.vue:81-242
- execute.vue:19-205
- assign.vue:30-104
- history.vue:31-97
- repair.vue:53-154
- common.js:1-45
详细组件分析
巡逻任务列表页（patrolTasks.vue）
- 功能要点
- 分页加载：集成滚动加载组件，支持下拉刷新与上拉加载。
- 状态筛选：通过字典项过滤不同工单状态。
- 扫码查询：顶部导航栏触发扫码，填充设备编码并刷新列表。
- 批量操作：根据工单状态显示“派发”“执行”按钮；支持“转维修”“历史记录”跳转。
- 确认流程：当需要确认时显示“拒绝/通过”弹窗，调用后端接口更新状态并刷新。
- 关键交互
- 列表渲染：设备图片、工单号、设备编码、创建时间、计划/线路/状态等。
- 跳转逻辑：派发/执行/维修/历史均通过路由携带工单ID，并在必要时设置Vuex上下文。
- 数据来源
- 接口：分页查询巡逻任务列表；状态字典；扫码后按设备编码过滤。
图表来源
章节来源
执行页面（execute.vue）
- 功能要点
- 三段式页面：基础信息、检查清单、文档资料。
- 提交前确认：弹出模态框选择“指定确认人”，校验必填后提交。
- 实时保存：检查清单支持单项保存，避免数据丢失。
- 只读态：当工单已超过一定状态时，禁用编辑与保存按钮。
- 关键交互
- 标签切换：基础信息、检查清单、文档。
- 用户选择：从本部门用户列表中选择确认人。
- 数据绑定：基础信息、检查项、文档、备件/耗材/工具、安全提示、工单文件。
- 数据来源
- 接口：获取工单详情；提交执行；更新检查项；获取当前部门用户。
图表来源
章节来源
检查清单组件（check.vue）
- 功能要点
- 单项检查：包含参考值、实测值、结果选择（OK/NG/NA）、更新时间与更新人。
- 拍照上传：支持从相册或相机选择图片，上传至后端并回填到该项。
- 实时校验：输入数值后根据阈值自动判定OK/NG。
- 保存与只读：在只读态禁用编辑与保存按钮。
- 查看详情：点击模块名称跳转到检查详情页。
- 关键交互
- 图片选择与上传：chooseImage -> uploadFile -> 回填结果。
- 结果选择：通过按钮切换checkResult。
- 输入变更：blur事件触发阈值校验。
- 数据来源
- 接口：上传检查结果图片；保存单项检查。
图表来源
章节来源
文档组件（document.vue）
- 功能要点
- 文件列表：展示文件名与创建时间，按后缀区分PDF/Word/XLS图标。
- 下载与打开：通过下载器下载到本地，完成后提示打开。
- 关键交互
- 点击列表项触发下载任务。
- 下载完成后根据用户选择打开本地文件。
- 数据来源
- 接口：下载文件（由后端返回的baseUrl+filePath拼接）。
章节来源
基础信息组件（basicInfo.vue）
- 功能要点
- 展示工单基本信息：工单号、计划、设备编码、线路、位置、序列号、执行人、确认人、状态、级别、备注等。
- 关键交互
- 仅展示，无编辑能力。
- 数据来源
- 来自执行页获取的工单详情。
章节来源
安全提示组件（safety.vue）
- 功能要点
- 展示危险源、状态、因素、损伤类型、等级、防护措施及提示图。
- 关键交互
- 仅展示，无编辑能力。
- 数据来源
- 来自执行页获取的工单详情。
章节来源
检查详情页（checkDetail.vue）
- 功能要点
- 展示检查模块的名称、项目、内容、工作方法、参考图、提示图。
- 关键交互
- 通过路由参数接收数据并渲染。
- 数据来源
- 来自检查清单组件的跳转参数。
章节来源
派发执行人（assign.vue）
- 功能要点
- 从本部门用户中检索并选择执行人，提交后回写工单执行人。
- 关键交互
- 搜索用户、勾选唯一执行人、导航栏提交。
- 数据来源
- 接口：获取本部门用户；提交派发。
章节来源
异常登记（history.vue）
- 功能要点
- 基于当前工单来源，登记异常项并提交。
- 关键交互
- 导航栏提交，携带来源类型与工单号。
- 数据来源
- 接口：新增异常记录。
章节来源
维修工单（repair.vue）
- 功能要点
- 基于当前工单生成维修工单，填写紧急度、缺陷数量/比例、问题描述，上传异常图片。
- 关键交互
- 字典选择、数字输入、图片上传、导航栏提交。
- 数据来源
- 接口：保存维修工单；上传异常图片。
章节来源
依赖关系分析
- 页面与组件
- 巡逻任务列表页依赖滚动加载组件与国际化/字典混入；通过HTTP请求获取数据。
- 执行页组合基础信息、检查清单、文档组件；通过Vuex传递只读态与上下文。
- 检查清单组件依赖上传地址与头信息，依赖基础URL配置。
- 文档组件依赖下载器与本地文件系统。
- 状态管理
- 公共模块提供pageType、assignUrl、history、repair等状态，供多个页面共享。
- 工具与配置
- 国际化与字典混入贯穿页面与组件，确保文案与枚举值一致。
- 全局请求封装统一处理HTTP调用。
图表来源
- patrolTasks.vue:81-242
- execute.vue:19-205
- check.vue:50-129
- document.vue:15-85
- assign.vue:30-104
- history.vue:31-97
- repair.vue:53-154
- common.js:1-45
章节来源
性能与可用性考虑
- 列表性能
- 使用滚动加载组件进行分页加载，避免一次性渲染大量节点；下拉刷新与上拉加载分离，减少不必要的重绘。
- 检查清单
- 实时保存单项检查，降低网络波动导致的数据丢失风险；在只读态禁用编辑，避免无效请求。
- 图片上传
- 上传前选择相册或相机，上传后立即回填，提升交互流畅度；失败时提示并允许重试。
- 离线与网络
- 当前实现主要依赖在线请求；建议在后续版本引入本地缓存与离线草稿、冲突合并策略，结合网络恢复后的增量同步。
- 国际化与字典
- 通过混入统一获取字典与语言资源，减少重复请求，提高渲染一致性。
[本节为通用指导，不直接分析具体文件]
故障排查指南
- 列表无数据或加载异常
- 检查分页接口返回字段是否正确；确认滚动加载组件的结束标记与页码计算。
- 拍照上传失败
- 核对上传接口地址与请求头；检查返回码与提示信息；确认文件大小与格式限制。
- 提交失败或状态未更新
- 确认提交前已选择“指定确认人”；核对后端接口参数与权限；查看返回码与提示。
- 文档下载失败
- 检查下载地址拼接与文件存在性；确认下载器任务状态与本地文件路径。
- 派发执行人无效
- 确认选择了唯一执行人；核对提交参数中的执行人编号与姓名。
章节来源
结论
巡逻管理模块围绕“工单驱动”的巡逻流程构建，通过清晰的页面与组件边界、统一的状态管理与工具混入，实现了从任务分配、现场执行、数据采集到异常处理与文档归档的闭环。建议在后续迭代中增强离线能力与网络同步策略，进一步提升移动端复杂场景下的稳定性与用户体验。
[本节为总结性内容，不直接分析具体文件]
附录
- 术语
- 巡逻工单：指派给执行人的巡检任务，包含设备、线路、检查项与文档等。
- 检查项：具体的巡检模块与检查内容，支持拍照、数值录入与结果判定。
- 只读态：工单状态达到一定阶段后禁止编辑与保存。
- 最佳实践
- 在只读态明确提示用户不可编辑。
- 对上传失败的图片提供重试按钮与错误提示。
- 对异常登记与维修工单保持来源关联，便于追溯。
[本节为概念性内容，不直接分析具体文件]