巡检管理模块

**本文引用的文件** - [inspectTasks.vue](file://app/devicemate-app/modules/inspectTasks/inspectTasks.vue) - [patrolTasks.vue](file://app/devicemate-app/modules/patrolTasks/patrolTasks.vue) - [execute.vue（巡检）](file://app/devicemate-app/modules/inspectTasks/execute.vue) - [execute.vue（巡更）](file://app/devicemate-app/modules/patrolTasks/execute.vue) - [check.vue（检查清单组件）](file://app/devicemate-app/modules/inspectTasks/components/check.vue) - [checkDetail.vue（检查详情）](file://app/devicemate-app/modules/inspectTasks/checkDetail.vue) - [checkDetail.vue（巡更详情）](file://app/devicemate-app/modules/patrolTasks/checkDetail.vue) - [基础信息组件（巡检）](file://app/devicemate-app/modules/inspectTasks/components/basicInfo.vue) - [文档组件（巡检）](file://app/devicemate-app/modules/inspectTasks/components/document.vue) - [基础信息组件（巡更）](file://app/devicemate-app/modules/patrolTasks/components/basicInfo.vue) - [文档组件（巡更）](file://app/devicemate-app/modules/patrolTasks/components/document.vue) - [安全组件（巡更）](file://app/devicemate-app/modules/patrolTasks/components/safety.vue) - [设备模块-设备详情-巡检](file://dm/lemes-web/src/views/devicemate/equipment/components/details/inspection.vue) - [mescroll-uni.js](file://app/devicemate-app/components/mescroll-uni/mescroll-uni.js) - [dictMixins.js](file://app/devicemate-app/utils/dictMixins.js) - [baseUrl.js](file://app/devicemate-app/config/baseUrl.js) - [request.js](file://app/devicemate-app/config/request.js) - [localstorage.js](file://app/devicemate-app/utils/localstorage.js) - [common.js](file://app/devicemate-app/utils/common.js) - [userMixins.js](file://app/devicemate-app/utils/userMixins.js) - [index.js（前端路由配置）](file://app/devicemate-app/pages.json)

目录

1. 简介
2. 项目结构
3. 核心组件
4. 架构总览
5. 详细组件分析
6. 依赖关系分析
7. 性能考虑
8. 故障排查指南
9. 结论
10. 附录

简介

本文件面向巡检管理模块，系统性梳理移动端前端页面与后端接口的协作方式，覆盖巡检任务分配、路线规划、数据采集、工单执行与反馈、检查详情查看、进度跟踪、组件化页面设计、离线与在线协同、以及业务规范与质量控制要点。文档同时结合设备侧 Web 页面的巡检入口，形成移动端与 Web 端的协同闭环。

项目结构

巡检管理模块主要由以下层次构成：

• 页面层：巡检任务列表、巡更任务列表、执行页面、检查详情页
• 组件层：基础信息、检查清单、文档、安全提示等可复用组件
• 工具与配置：字典混入、分页组件、请求封装、本地存储、国际化等
• 路由与导航：页面跳转、扫码、状态筛选、分页加载

图表来源

• inspectTasks.vue:1-349
• patrolTasks.vue:1-350
• execute.vue（巡检）:1-254
• execute.vue（巡更）:1-254
• check.vue（检查清单组件）:1-215
• checkDetail.vue（巡检）:1-83
• checkDetail.vue（巡更）:1-83
• mescroll-uni.js
• dictMixins.js
• request.js
• baseUrl.js
• localstorage.js
• common.js

章节来源

• inspectTasks.vue:1-349
• patrolTasks.vue:1-350

核心组件

• 任务列表页：支持扫码筛选、状态筛选、分页加载、批量确认/驳回、进入执行与历史/维修入口。
• 执行页：三段式标签页（基础信息、检查清单、文档），支持选择确认人、保存草稿、提交工单。
• 检查清单组件：逐项检查、拍照上传、数值校验联动、查看参考图与提示图。
• 检查详情页：展示检查项的模块名、项目名、内容、工作方法、参考图与提示图。
• 巡更扩展：增加安全提示组件，适配巡更场景。

章节来源

• inspectTasks.vue:80-240
• patrolTasks.vue:81-242
• execute.vue（巡检）:19-205
• execute.vue（巡更）:19-205
• check.vue（检查清单组件）:50-130
• checkDetail.vue（巡检）:32-55
• checkDetail.vue（巡更）:32-55

架构总览

移动端采用“页面+组件+工具”的分层设计，页面负责业务编排，组件负责具体交互，工具提供分页、字典、请求、本地存储等能力；Web 端提供设备详情页的巡检入口，形成移动端与 Web 的协同。

图表来源

• request.js
• mescroll-uni.js
• dictMixins.js
• baseUrl.js
• inspectTasks.vue:210-228
• patrolTasks.vue:212-230
• execute.vue（巡检）:79-91
• execute.vue（巡检）:96-108
• execute.vue（巡检）:126-130
• check.vue（检查清单组件）:112-124
• execute.vue（巡更）:79-91
• execute.vue（巡更）:96-108
• execute.vue（巡更）:126-130
• check.vue（检查清单组件）:112-124

详细组件分析

巡检任务列表页（inspectTasks.vue）

• 功能要点
  • 扫码筛选设备编码，触发分页重载
  • 状态筛选（通过字典 task_status）
  • 分页加载（mescroll-uni）
  • 按钮操作：派发、执行、记录错误日志、维修、确认/驳回
  • 跳转到执行页或公共页面（派发、历史、维修）

图表来源

• inspectTasks.vue:121-132
• inspectTasks.vue:200-228
• mescroll-uni.js
• request.js

章节来源

• inspectTasks.vue:80-240

巡更任务列表页（patrolTasks.vue）

• 功能要点
  • 与巡检列表页一致的筛选与分页逻辑
  • 针对巡更的按钮与状态字段映射
  • 扫码筛选设备编码

章节来源

• patrolTasks.vue:81-242

巡检执行页（execute.vue）

• 功能要点
  • 三段式标签页：基础信息、检查清单、文档
  • 选择确认人并提交工单
  • 保存草稿（update 接口）
  • 加载详情（按 id 获取）

图表来源

• execute.vue（巡检）:62-130
• execute.vue（巡检）:79-91
• execute.vue（巡检）:96-108
• check.vue（检查清单组件）:103-127
• request.js

章节来源

• execute.vue（巡检）:19-205

巡更执行页（execute.vue）

• 功能要点
  • 与巡检执行页一致的页面结构与交互
  • 增加安全提示组件，适配巡更场景

章节来源

• execute.vue（巡更）:19-205

检查清单组件（check.vue）

• 功能要点
  • 图片上传：相册/相机选择，调用上传接口，回填图片地址
  • 结果选择：OK/NG/NA 三态按钮
  • 实际值输入：失焦时联动判断 OK/NG
  • 查看参考图与提示图：跳转检查详情页
  • 保存草稿：触发父组件 update 接口

图表来源

• check.vue（检查清单组件）:81-127

章节来源

• check.vue（检查清单组件）:50-130

检查详情页（checkDetail.vue）

• 功能要点
  • 展示模块名、项目名、内容、工作方法
  • 参考图与提示图展示
  • 导航标题动态设置

章节来源

• checkDetail.vue（巡检）:32-55
• checkDetail.vue（巡更）:32-55

Web 端设备详情-巡检入口

• 功能要点
  • 设备详情页提供巡检入口，便于从设备维度发起巡检任务
  • 与移动端页面形成协同，统一数据来源与状态流转

章节来源

• 设备模块-设备详情-巡检

依赖关系分析

• 页面与分页：使用 mescroll-uni 实现上拉加载与下拉刷新
• 页面与请求：通过 request.js 封装 HTTP 请求，统一拦截器与 baseURL
• 页面与字典：通过 dictMixins 获取任务状态、维护等级等字典项
• 页面与本地存储：通过 localstorage 缓存用户信息与页面状态
• 页面与组件：执行页组合基础信息、检查清单、文档组件，实现高内聚低耦合

图表来源

• inspectTasks.vue:80-84
• patrolTasks.vue:81-83
• execute.vue（巡检）:24-26
• execute.vue（巡更）:24-26
• request.js
• dictMixins.js
• localstorage.js
• check.vue（检查清单组件）

章节来源

• inspectTasks.vue:80-84
• patrolTasks.vue:81-83
• execute.vue（巡检）:24-26
• execute.vue（巡更）:24-26

性能考虑

• 分页加载：使用 mescroll-uni 控制上拉/下拉触发频率，避免频繁请求
• 图片上传：限制单次上传数量与清晰度，减少带宽占用
• 字典缓存：通过字典混入一次性获取并复用，降低重复请求
• 本地存储：利用 localstorage 缓存用户信息与页面状态，提升二次打开速度
• 组件拆分：检查清单组件独立上传与校验，避免整页重绘

故障排查指南

• 列表无数据或加载异常
  • 检查分页参数与接口返回 total/pageSize 计算
  • 确认 resetUpScroll 调用时机
• 图片上传失败
  • 校验上传接口返回与 header 中 token
  • 检查图片格式与大小限制
• 提交/保存失败
  • 校验必填字段（如确认人）
  • 检查接口返回 code 与提示
• 状态显示异常
  • 校验字典 task_status 与维护等级映射

章节来源

• inspectTasks.vue:200-228
• patrolTasks.vue:212-230
• check.vue（检查清单组件）:112-124
• execute.vue（巡检）:79-91
• execute.vue（巡检）:96-108

结论

巡检管理模块以页面-组件-工具三层架构实现，具备完善的任务分配、执行、检查与反馈能力，并通过 Web 端设备详情入口实现跨端协同。通过分页、字典、请求封装与本地存储等工具的配合，保证了良好的用户体验与可维护性。后续可在离线数据处理与网络同步策略方面进一步完善，确保弱网环境下的可用性。

附录

• 业务规范与质量控制
  • 巡检/巡更任务必须明确计划、线路与设备
  • 检查项需有参考值与阈值，实际值输入应规范
  • 拍照上传需清晰、可辨识，与检查项一一对应
  • 确认人必须在执行前选定，提交后不可更改
  • 文档与安全提示需完整归档
• 离线与在线协同建议
  • 本地草稿保存：检查项结果与图片在离线状态下暂存，联网后自动同步
  • 冲突处理：同一检查项并发修改时，采用时间戳或版本号解决冲突
  • 断点续传：图片上传失败时支持断点续传与重试
• 交互设计模式
  • 三段式标签页：基础信息、检查清单、文档，符合移动端阅读习惯
  • 快捷操作：拍照、选择结果、保存草稿一键可达
  • 状态可视化：通过颜色与图标直观表达 OK/NG/NA 与进度