|
|
# 巡检相关功能
|
|
|
|
|
|
> 模块编码：inspection
|
|
|
> 端侧：小程序
|
|
|
> 关联文档：01-模块划分.md §3.2、02-功能清单-小程序端.md §3、03-业务流转逻辑-小程序端.md §3、05-接口规范.md §9.2、06-项目技术要求.md §4.4&5.4
|
|
|
> 强制规范遵循 `07-前端界面开发规范.md`
|
|
|
|
|
|
## 功能概览
|
|
|
|
|
|
| 项目 | 说明 |
|
|
|
|------|------|
|
|
|
| 菜单名称 | 巡检相关功能 |
|
|
|
| 子菜单 | 今日巡检任务、蓝牙强制打卡、巡检执行、异常上报、巡检历史、异常数据补录 |
|
|
|
| 功能编号 | MP-I-01 ~ MP-I-06 |
|
|
|
| 权限编码 | inspection:plan:* / inspection:task:* 等 |
|
|
|
|
|
|
## 页面清单
|
|
|
|
|
|
### 页面1：今日巡检任务列表
|
|
|
|
|
|
- **页面路径**：`/pages/inspection/today-tasks`
|
|
|
- **页面元素**：
|
|
|
- 今日任务统计（待执行/已完成/异常）
|
|
|
- 任务列表
|
|
|
- 下拉刷新
|
|
|
- **查询条件**：无（自动加载当日任务）
|
|
|
- **列表字段**：
|
|
|
| 字段 | 说明 |
|
|
|
|------|------|
|
|
|
| 任务名称 | 巡检计划名称 |
|
|
|
| 巡检区域 | 区域名称 |
|
|
|
| 计划时间 | 开始~结束时间 |
|
|
|
| 任务状态 | 待执行/进行中/已完成/异常 |
|
|
|
| 蓝牙打卡状态 | 未打卡/已打卡 |
|
|
|
| 异常数量 | 异常项数量（红色标记） |
|
|
|
- **界面布局**：
|
|
|
- 顶部：统计卡片（待执行/已完成/异常 三列数字）
|
|
|
- 中部：任务卡片列表
|
|
|
- 卡片顶部：任务名称 + 状态标签
|
|
|
- 卡片中部：巡检区域 + 计划时间
|
|
|
- 卡片底部：蓝牙打卡状态 + 异常数量
|
|
|
- 底部：无更多数据提示
|
|
|
- **操作按钮**：
|
|
|
| 按钮 | 权限 | 说明 |
|
|
|
|------|------|------|
|
|
|
| 开始巡检 | inspection:task:view | 跳转巡检执行页 |
|
|
|
| 查看详情 | inspection:task:view | 已完成的任务查看详情 |
|
|
|
|
|
|
#### 交互流程要求
|
|
|
|
|
|
1. **页面加载流程**：页面加载时自动请求当日巡检任务列表，显示骨架屏占位；获取任务后渲染统计卡片与任务列表；无任务时显示空状态插图与提示文案
|
|
|
2. **查询/筛选交互流程**：无手动筛选条件，自动按当日+本人过滤；支持下拉刷新重新加载任务数据
|
|
|
3. **表单填写与提交流程**：本页面无表单提交操作
|
|
|
4. **弹窗/弹层交互流程**：无弹窗
|
|
|
5. **行内操作流程**：点击「开始巡检」→ 校验蓝牙打卡状态 → 跳转巡检执行页；点击「查看详情」→ 跳转巡检详情页
|
|
|
6. **异常与错误处理**：网络异常显示重试提示；蓝牙状态异常在卡片上以图标提示；任务加载失败显示错误页与重试按钮
|
|
|
7. **联动/级联交互**：统计卡片数字与列表数据联动实时更新
|
|
|
8. **权限控制交互表现**：无权限时隐藏「开始巡检」和「查看详情」按钮；按钮置灰且不可点击
|
|
|
9. **H1 防重复提交**：「开始巡检」「查看详情」按钮点击时须设置 `:loading` + `:disabled` 双重锁定；下拉刷新期间禁止重复触发；使用 pending Promise 去重；分页请求切换月份时 abort 上一次请求
|
|
|
10. **H2 超时控制**：GET 请求超时 15s，页面加载 >3s 时须调用 `wx.showLoading({title:'加载中...', mask:true})`；请求超时时提示"网络请求超时，请重试"并显示重试按钮
|
|
|
11. **H3 操作确认**：点击「开始巡检」前若存在未完成巡检任务，须通过 `wx.showModal` 二次确认，内容含后果说明（如"当前有未完成任务，是否继续？"）；跳转操作无需二次确认
|
|
|
12. **H8 反馈规范**：任务加载成功后使用 `wx.showToast({icon:'success'})` 反馈；加载失败使用 `wx.showToast({icon:'none', title:'具体错误信息'})` 显示多文字提示；网络异常（`wx.getNetworkType` 判断非 wifi/4g）时提示弱网络并提供重试入口
|
|
|
|
|
|
#### 组件规范
|
|
|
|
|
|
| 元素 | 组件 | 配置参数 |
|
|
|
|------|------|----------|
|
|
|
| 统计卡片 | `uni-card` | mode="center"，三列等宽布局 |
|
|
|
| 任务列表 | `uni-list` + `uni-list-item` | clickable=true，showArrow=true |
|
|
|
| 状态标签 | `uni-tag` | type: success(已完成)/warning(进行中)/error(异常)/default(待执行) |
|
|
|
| 蓝牙状态图标 | `uni-icons` | type="bluetooth"，size="22" |
|
|
|
| 下拉刷新 | `uni-refresher` | @onRefresh 回调，threshold=45px |
|
|
|
| 空状态 | `uni-section` | 插槽自定义空状态插图与文案 |
|
|
|
|
|
|
#### 校验规则
|
|
|
|
|
|
| 字段 | 规则 | 错误提示 |
|
|
|
|------|------|----------|
|
|
|
| 任务列表 | 加载失败时允许重试 | "加载失败，请下拉刷新重试" |
|
|
|
| 统计数据 | 数据为空时显示0 | — |
|
|
|
|
|
|
#### 响应式布局
|
|
|
|
|
|
- **适配机型**：iPhone SE（375px）~ iPad mini（768px），卡片宽度自适应屏幕宽度，左右padding 16px
|
|
|
- **横竖屏适配策略**：竖屏为默认布局；横屏时统计卡片改为横向平铺，任务列表改为双列卡片
|
|
|
- **手势交互规范**：所有可点击区域≥44px；下拉刷新触发区域≥50px；卡片内按钮间距≥8px
|
|
|
|
|
|
### 页面2：蓝牙打卡页
|
|
|
|
|
|
- **页面路径**：`/pages/inspection/bluetooth-checkin`
|
|
|
- **页面元素**：
|
|
|
- 蓝牙扫描动画
|
|
|
- 当前扫描状态提示
|
|
|
- 检测到的Beacon列表（如多个）
|
|
|
- 打卡结果提示
|
|
|
- 补录入口
|
|
|
- **界面布局**：
|
|
|
- 顶部：蓝牙扫描状态（扫描动画 + 文字提示）
|
|
|
- 中部：Beacon信息展示
|
|
|
- Beacon名称
|
|
|
- UUID
|
|
|
- 信号强度（RSSI）
|
|
|
- 连接状态
|
|
|
- 底部：打卡结果 + 重试/补录按钮
|
|
|
- **操作按钮**：
|
|
|
| 按钮 | 权限 | 说明 |
|
|
|
|------|------|------|
|
|
|
| 重新扫描 | — | 蓝牙扫描超时后可重试（最多3次） |
|
|
|
| 进入补录模式 | — | 蓝牙无法连接时，进入补录模式 |
|
|
|
|
|
|
#### 交互流程要求
|
|
|
|
|
|
1. **页面加载流程**：页面加载时查询蓝牙策略→策略=REQUIRED自动启动蓝牙扫描→显示扫描动画；策略=OPTIONAL显示打卡方式选择
|
|
|
2. **查询/筛选交互流程**：无筛选操作
|
|
|
3. **表单填写与提交流程**：自动扫描蓝牙Beacon→检测到Beacon→自动连接→连接成功打卡→显示打卡结果；扫描超时→提示重新扫描或进入补录模式
|
|
|
4. **弹窗/弹层交互流程**：打卡成功弹出成功提示；扫描超时弹出重试提示；策略=OPTIONAL弹出打卡方式选择弹窗
|
|
|
5. **行内操作流程**：点击重新扫描→重新搜索蓝牙；点击进入补录模式→跳转补录页
|
|
|
6. **异常与错误处理**：蓝牙未开启提示"请开启手机蓝牙"；扫描超时3次后自动显示补录入口；蓝牙连接失败提示重试；离线时提示"网络不可用"
|
|
|
7. **联动/级联交互**：蓝牙策略与扫描行为联动，策略=REQUIRED自动扫描，策略=OPTIONAL手动选择
|
|
|
8. **权限控制交互表现**：所有巡检人员可访问；蓝牙权限被拒时引导开启
|
|
|
9. **H1 防重复提交**：「重新扫描」按钮点击时须设置 `:loading="scanning"` + `:disabled` 双重锁定，扫描期间禁止重复点击；「进入补录模式」按钮同样需要 loading+disabled 锁定；使用 pending 标志位防止重复发起扫描
|
|
|
10. **H2 超时控制**：蓝牙扫描超时 3s，策略查询 GET 请求超时 15s；扫描等待 >3s 时须显示 `wx.showLoading({title:'正在扫描...', mask:true})`；扫描超时或请求超时均需提示用户并提供重试入口
|
|
|
11. **H3 操作确认**：点击「进入补录模式」前须通过 `wx.showModal` 确认，内容说明"进入补录模式后将记录为手动打卡，是否继续？"
|
|
|
12. **H4 脏数据检测**：本页面以自动扫描为主，若用户手动修改过任何数据则标记 isDirty；`onUnload` 生命周期中检测到 isDirty 且未提交时弹出 `wx.showModal` 提示"未完成的打卡将丢失，确定离开？"
|
|
|
13. **H7 上传约束**：本页面无上传功能（拍照在巡检执行页完成），此项不适用
|
|
|
14. **H8 反馈规范**：蓝牙连接成功使用 `wx.showToast({icon:'success', title:'打卡成功'})`；扫描失败使用 `wx.showToast({icon:'none', title:'未检测到蓝牙信号，请重试或补录'})`；网络异常通过 `wx.getNetworkType` 判断后提供重试
|
|
|
|
|
|
#### 组件规范
|
|
|
|
|
|
| 元素 | 组件 | 配置参数 |
|
|
|
|------|------|----------|
|
|
|
| 扫描动画 | `view` + CSS动画 | 旋转动画，size=80px |
|
|
|
| 状态提示 | `text` | font-size="14px"，动态文案 |
|
|
|
| Beacon信息 | `uni-list` + `uni-list-item` | :showArrow="false"，显示UUID/RSSI |
|
|
|
| 重新扫描 | `button` | type="default"，:loading="scanning" |
|
|
|
| 进入补录模式 | `button` | type="warn"，@click="goSupplement" |
|
|
|
| 打卡结果 | `uni-popup` | type="dialog"，打卡成功/失败提示 |
|
|
|
|
|
|
#### 校验规则
|
|
|
|
|
|
| 字段 | 规则 | 错误提示 |
|
|
|
|------|------|----------|
|
|
|
| 蓝牙状态 | 必须开启蓝牙 | "请开启手机蓝牙" |
|
|
|
| Beacon信号 | RSSI > -70dBm | "蓝牙信号弱，请靠近打卡点" |
|
|
|
| 扫描超时 | 3秒超时，最多重试3次 | "蓝牙扫描超时，请重试或进入补录模式" |
|
|
|
| 打卡点验证 | Beacon必须属于本人班组打卡点 | "未检测到有效打卡点" |
|
|
|
|
|
|
#### 响应式布局
|
|
|
|
|
|
- **适配机型**：iPhone SE（375px）~ iPad mini（768px），扫描动画居中
|
|
|
- **横竖屏适配策略**：竖屏垂直布局；横屏动画与信息并排展示
|
|
|
- **手势交互规范**：按钮可点击区域≥44px；动画区域≥80px
|
|
|
- **安全区域**：底部按钮适配底部安全区
|
|
|
|
|
|
### 页面3：巡检执行页
|
|
|
|
|
|
- **页面路径**：`/pages/inspection/execute`
|
|
|
- **页面元素**：
|
|
|
- 巡检清单列表（逐项检查）
|
|
|
- 每项检查项：正常/异常选择
|
|
|
- 异常项附加信息（拍照+严重等级+描述）
|
|
|
- 打卡状态指示
|
|
|
- 进度指示（已检查/总数）
|
|
|
- **查询条件**：无
|
|
|
- **列表字段**：
|
|
|
| 字段 | 说明 |
|
|
|
|------|------|
|
|
|
| 检查项序号 | 序号标识 |
|
|
|
| 检查项名称 | 巡检清单项 |
|
|
|
| 检查结果 | 正常(绿)/异常(红)/未检查(灰) |
|
|
|
| 严重等级 | 异常时显示：一般/较重/严重 |
|
|
|
- **界面布局**：
|
|
|
- 顶部：进度条（已检查/总数）+ 蓝牙连接状态指示
|
|
|
- 中部：检查项列表
|
|
|
- 每项：序号 + 名称 + 正常/异常切换
|
|
|
- 异常项展开：严重等级选择 + 描述输入 + 拍照上传
|
|
|
- 底部：提交巡检结果按钮
|
|
|
- **操作按钮**：
|
|
|
| 按钮 | 权限 | 说明 |
|
|
|
|------|------|------|
|
|
|
| 标记正常 | — | 当前项标记为正常 |
|
|
|
| 标记异常 | — | 当前项标记为异常，展开附加信息 |
|
|
|
| 拍照上传 | — | 异常项拍照（蓝牙策略=REQUIRED时须在蓝牙连接下拍照） |
|
|
|
| 一键生成报修 | — | 异常项可直接生成报修工单（数据写入报修模块） |
|
|
|
| 提交巡检结果 | inspection:task:view | 提交巡检记录 |
|
|
|
|
|
|
#### 交互流程要求
|
|
|
|
|
|
1. **页面加载流程**：页面加载时获取巡检任务清单→渲染检查项列表和进度条；查询蓝牙策略→蓝牙策略=REQUIRED时显示蓝牙连接状态指示
|
|
|
2. **查询/筛选交互流程**：无筛选操作
|
|
|
3. **表单填写与提交流程**：逐项标记正常/异常→异常项展开附加信息→选择严重等级→输入描述→拍照上传（蓝牙策略=REQUIRED须蓝牙连接下拍照）→点击提交巡检结果→确认弹窗→提交成功
|
|
|
4. **弹窗/弹层交互流程**：点击拍照弹出选择（拍照/相册）；提交前弹出确认弹窗"确认提交巡检结果？"；点击一键生成报修弹出确认弹窗
|
|
|
5. **行内操作流程**：点击标记正常→该项标记为正常；点击标记异常→展开附加信息区；点击拍照→调起相机；点击一键生成报修→创建报修工单
|
|
|
6. **异常与错误处理**：蓝牙断连时拍照提示"请连接蓝牙后拍照"；提交失败显示重试；未完成所有检查项时提示"请完成所有检查项"
|
|
|
7. **联动/级联交互**：检查进度与进度条联动；异常项标记与附加信息展开联动
|
|
|
8. **权限控制交互表现**：仅巡检人员可操作；无inspection:task:view权限时提交按钮置灰
|
|
|
9. **H1 防重复提交**：「标记正常」「标记异常」「提交巡检结果」按钮点击时须设置 `:loading` + `:disabled` 双重锁定；「一键生成报修」按钮同样需要防重复；提交期间禁止重复操作
|
|
|
10. **H2 超时控制**：获取巡检清单 GET 请求超时 15s；提交巡检结果 POST 请求超时 30s；请求耗时 >3s 时须调用 `wx.showLoading({mask:true})`；超时提示"提交超时，请检查网络后重试"
|
|
|
11. **H3 操作确认**：点击「提交巡检结果」前须通过 `wx.showModal` 二次确认，内容包括已检查项数、正常/异常统计及后果说明；点击「一键生成报修」前须确认"确认为此异常项生成报修工单？"
|
|
|
12. **H4 脏数据检测**：页面加载时对初始巡检清单数据进行快照（JSON.stringify 深拷贝）；每次标记正常/异常或填写附加信息时对比快照检测 isDirty；`onUnload` 中检测到 isDirty 且未提交时弹出 `wx.showModal({content:"巡检数据尚未保存，确定离开？"})` 拦截离开
|
|
|
13. **H7 上传约束**：异常项照片上传单个文件 ≤10MB，每项最多 ≤9 张；使用 `uni-file-picker` 配合进度回调 `@progress` 实时展示上传百分比；超出限制时提示"照片大小不能超过10MB"或"最多上传9张照片"
|
|
|
14. **H8 反馈规范**：提交成功使用 `wx.showToast({icon:'success', title:'巡检结果已提交'})`；校验失败（如未完成所有检查项）使用 `wx.showToast({icon:'none', title:'请完成所有检查项后再提交'})`；网络异常时通过 `wx.getNetworkType` 判断并提供重试按钮
|
|
|
|
|
|
#### 组件规范
|
|
|
|
|
|
| 元素 | 组件 | 配置参数 |
|
|
|
|------|------|----------|
|
|
|
| 进度条 | `progress` | :percent="progress"，show-info=true |
|
|
|
| 蓝牙状态指示 | `uni-icons` | type="bluetooth"，size="18"，color动态 |
|
|
|
| 检查项列表 | `uni-list` + `uni-list-item` | :showArrow="false"，可展开 |
|
|
|
| 正常/异常切换 | `uni-data-checkbox` | :localdata="[{value:'normal',text:'正常'},{value:'abnormal',text:'异常'}]" |
|
|
|
| 严重等级选择 | `uni-data-select` | :localdata="levelList" |
|
|
|
| 异常描述 | `uni-easyinput` | type="textarea"，maxlength="500" |
|
|
|
| 照片上传 | `uni-file-picker` | limit="9"，file-mediatype="image" |
|
|
|
| 一键生成报修 | `button` | type="warn"，size="mini" |
|
|
|
| 提交按钮 | `button` | type="primary"，:loading="submitting" |
|
|
|
| 确认弹窗 | `uni-popup` | type="dialog" |
|
|
|
|
|
|
#### 校验规则
|
|
|
|
|
|
| 字段 | 规则 | 错误提示 |
|
|
|
|------|------|----------|
|
|
|
| 检查项 | 必须逐项完成 | "请完成所有检查项" |
|
|
|
| 异常项严重等级 | 异常时必选 | "请选择严重等级" |
|
|
|
| 异常项描述 | 异常时必填 | "请填写异常描述" |
|
|
|
| 异常项照片 | 异常时至少1张 | "请上传异常照片" |
|
|
|
| 蓝牙状态 | 策略=REQUIRED拍照时须蓝牙连接 | "请连接蓝牙后拍照" |
|
|
|
|
|
|
#### 响应式布局
|
|
|
|
|
|
- **适配机型**：iPhone SE（375px）~ iPad mini（768px），检查项列表宽度自适应
|
|
|
- **横竖屏适配策略**：竖屏垂直列表；横屏异常项展开区域更宽
|
|
|
- **手势交互规范**：检查项可点击区域≥44px；按钮≥44px；照片上传区域≥44px
|
|
|
- **安全区域**：底部提交按钮适配底部安全区
|
|
|
|
|
|
### 页面4：异常上报页
|
|
|
|
|
|
- **页面路径**：`/pages/inspection/report-abnormal`
|
|
|
- **页面元素**：
|
|
|
- 异常描述（多行文本，必填）
|
|
|
- 严重等级选择（一般/较重/严重）
|
|
|
- 照片上传（最多9张，含水印时间定位）
|
|
|
- 是否生成报修工单（开关）
|
|
|
- 报修类型选择（生成工单时）
|
|
|
- **界面布局**：
|
|
|
- 顶部：严重等级选择（三档按钮）
|
|
|
- 中部：异常描述输入 + 照片上传网格
|
|
|
- 下部：生成报修工单开关 + 报修类型选择
|
|
|
- 底部：提交上报按钮
|
|
|
- **操作按钮**：
|
|
|
| 按钮 | 权限 | 说明 |
|
|
|
|------|------|------|
|
|
|
| 拍照上传 | — | 拍摄异常照片 |
|
|
|
| 提交上报 | — | 上报异常，如选择生成工单则同时创建报修工单 |
|
|
|
|
|
|
#### 交互流程要求
|
|
|
|
|
|
1. **页面加载流程**：页面加载时初始化表单，获取报修类型字典
|
|
|
2. **查询/筛选交互流程**：无筛选操作
|
|
|
3. **表单填写与提交流程**：选择严重等级→输入异常描述→拍照上传（含水印）→可选开启"生成报修工单"开关→选择报修类型→点击提交上报→确认弹窗→上报成功
|
|
|
4. **弹窗/弹层交互流程**：点击拍照弹出选择（拍照/相册）；提交前弹出确认弹窗
|
|
|
5. **行内操作流程**：选择严重等级→输入描述→上传照片→开启生成报修工单→选择报修类型→提交
|
|
|
6. **异常与错误处理**：图片上传失败提示重传；提交失败显示重试
|
|
|
7. **联动/级联交互**：生成报修工单开关与报修类型选择联动，开启后显示报修类型选择器
|
|
|
8. **权限控制交互表现**：所有巡检人员可操作
|
|
|
|
|
|
#### 组件规范
|
|
|
|
|
|
| 元素 | 组件 | 配置参数 |
|
|
|
|------|------|----------|
|
|
|
| 严重等级 | `uni-data-select` | :localdata="[{value:'minor',text:'一般'},{value:'major',text:'较重'},{value:'critical',text:'严重'}]" |
|
|
|
| 异常描述 | `uni-easyinput` | type="textarea"，maxlength="500"，:showWordLimit="true" |
|
|
|
| 照片上传 | `uni-file-picker` | limit="9"，file-mediatype="image"，:auto-upload="true" |
|
|
|
| 生成报修工单 | `switch` | @change="onSwitchChange" |
|
|
|
| 报修类型 | `uni-data-select` | v-model="repairType"，:localdata="repairTypeList"，v-if="generateRepair" |
|
|
|
| 提交按钮 | `button` | type="primary"，:loading="submitting" |
|
|
|
| 确认弹窗 | `uni-popup` | type="dialog" |
|
|
|
|
|
|
#### 校验规则
|
|
|
|
|
|
| 字段 | 规则 | 错误提示 |
|
|
|
|------|------|----------|
|
|
|
| 严重等级 | 必选 | "请选择严重等级" |
|
|
|
| 异常描述 | 必填，最多500字 | "请填写异常描述" / "描述不能超过500字" |
|
|
|
| 照片 | 至少1张，最多9张 | "请上传异常照片" / "照片最多上传9张" |
|
|
|
| 报修类型 | 开启生成报修工单时必选 | "请选择报修类型" |
|
|
|
|
|
|
#### 响应式布局
|
|
|
|
|
|
- **适配机型**：iPhone SE（375px）~ iPad mini（768px），表单宽度自适应
|
|
|
- **横竖屏适配策略**：竖屏垂直布局；横屏照片区3~4列网格
|
|
|
- **手势交互规范**：选择器≥44px；提交按钮≥44px；照片上传区域≥44px
|
|
|
- **安全区域**：底部提交按钮适配底部安全区
|
|
|
|
|
|
### 页面5：巡检历史列表
|
|
|
|
|
|
- **页面路径**：`/pages/inspection/history`
|
|
|
- **页面元素**：
|
|
|
- 日期选择器（按月切换）
|
|
|
- 巡检记录列表
|
|
|
- 下拉刷新 + 上拉加载
|
|
|
- **查询条件**：
|
|
|
| 条件 | 类型 | 说明 |
|
|
|
|------|------|------|
|
|
|
| 月份 | 月份选择器 | 按月筛选巡检记录 |
|
|
|
- **列表字段**：
|
|
|
| 字段 | 说明 |
|
|
|
|------|------|
|
|
|
| 巡检日期 | 日期时间 |
|
|
|
| 巡检区域 | 区域名称 |
|
|
|
| 打卡方式 | 蓝牙/手动/补录 |
|
|
|
| 检查项总数 | 总计 |
|
|
|
| 异常数 | 异常项数量 |
|
|
|
| 状态 | 正常/异常 |
|
|
|
- **界面布局**：
|
|
|
- 顶部：月份选择器
|
|
|
- 中部：巡检记录卡片列表
|
|
|
- 卡片顶部：日期 + 状态标签
|
|
|
- 卡片中部：区域 + 打卡方式
|
|
|
- 卡片底部：检查项总数 + 异常数
|
|
|
- **操作按钮**：
|
|
|
| 按钮 | 权限 | 说明 |
|
|
|
|------|------|------|
|
|
|
| 查看详情 | inspection:task:view | 查看巡检记录详情 |
|
|
|
|
|
|
#### 交互流程要求
|
|
|
|
|
|
1. **页面加载流程**：页面加载时默认加载当月巡检记录→显示骨架屏→渲染月份选择器和记录列表
|
|
|
2. **查询/筛选交互流程**：切换月份→重新加载对应月份记录；下拉刷新重新加载；上拉加载更多
|
|
|
3. **表单填写与提交流程**：无表单提交操作
|
|
|
4. **弹窗/弹层交互流程**：无弹窗
|
|
|
5. **行内操作流程**：点击查看详情→跳转巡检记录详情页；左右滑动切换月份
|
|
|
6. **异常与错误处理**：记录加载失败显示重试；无记录显示空状态插图和文案
|
|
|
7. **联动/级联交互**：月份切换与列表数据联动
|
|
|
8. **权限控制交互表现**：仅巡检人员可访问本人数据；主管可查看本班组数据；无inspection:task:view权限时隐藏查看详情
|
|
|
|
|
|
#### 组件规范
|
|
|
|
|
|
| 元素 | 组件 | 配置参数 |
|
|
|
|------|------|----------|
|
|
|
| 月份选择器 | `uni-datetime-picker` | type="date"，fields="month" |
|
|
|
| 记录列表 | `uni-list` + `uni-list-item` | clickable=true，showArrow=true |
|
|
|
| 状态标签 | `uni-tag` | type: success(正常)/error(异常) |
|
|
|
| 下拉刷新 | `uni-refresher` | @onRefresh回调 |
|
|
|
| 上拉加载 | `uni-load-more` | :status="loadingStatus" |
|
|
|
| 空状态 | `uni-section` | 插槽自定义空状态插图与文案 |
|
|
|
|
|
|
#### 校验规则
|
|
|
|
|
|
| 字段 | 规则 | 错误提示 |
|
|
|
|------|------|----------|
|
|
|
| 月份 | 必须选择有效月份 | — |
|
|
|
| 记录列表 | 加载失败允许重试 | "加载失败，请下拉刷新重试" |
|
|
|
|
|
|
#### 响应式布局
|
|
|
|
|
|
- **适配机型**：iPhone SE（375px）~ iPad mini（768px），卡片宽度自适应，padding 16px
|
|
|
- **横竖屏适配策略**：竖屏单列卡片；横屏双列卡片展示
|
|
|
- **手势交互规范**：记录项可点击区域≥44px；月份选择器≥44px；支持下拉刷新和上拉加载
|
|
|
- **安全区域**：底部列表适配底部安全区
|
|
|
|
|
|
### 页面6：异常数据补录页
|
|
|
|
|
|
- **页面路径**：`/pages/inspection/supplement`
|
|
|
- **页面元素**：
|
|
|
- 补录原因选择（下拉：蓝牙失灵/定位失败/系统异常/其他）
|
|
|
- 补录说明（多行文本，必填）
|
|
|
- 证明材料上传（照片，最多3张）
|
|
|
- 巡检记录补录表单
|
|
|
- 巡检时间（手动选择）
|
|
|
- 巡检区域
|
|
|
- 检查项结果（逐项填写）
|
|
|
- **界面布局**：
|
|
|
- 顶部：补录原因选择 + 说明
|
|
|
- 中部：证明材料上传
|
|
|
- 下部：巡检记录补录表单
|
|
|
- 底部：提交补录申请按钮
|
|
|
- **操作按钮**：
|
|
|
| 按钮 | 权限 | 说明 |
|
|
|
|------|------|------|
|
|
|
| 提交补录申请 | — | 提交后等待主管审核 |
|
|
|
|
|
|
#### 交互流程要求
|
|
|
|
|
|
1. **页面加载流程**：页面加载时显示补录模式提示（红色警示条）→获取巡检区域和检查项数据
|
|
|
2. **查询/筛选交互流程**：无筛选操作
|
|
|
3. **表单填写与提交流程**：选择补录原因→填写补录说明→上传证明材料→手动选择巡检时间→选择巡检区域→逐项填写检查项结果→点击提交补录申请→确认弹窗→提交成功等待主管审核
|
|
|
4. **弹窗/弹层交互流程**：点击上传弹出选择（拍照/相册）；提交前弹出确认弹窗"确认提交补录申请？"
|
|
|
5. **行内操作流程**：选择原因→填写说明→上传照片→选择时间和区域→填写检查项→提交
|
|
|
6. **异常与错误处理**：图片上传失败提示重传；提交失败显示重试；离线时数据暂存本地
|
|
|
7. **联动/级联交互**：补录原因与其他字段无强联动；巡检区域与检查项联动
|
|
|
8. **权限控制交互表现**：仅巡检人员可操作；补录数据标记is_supplement=true
|
|
|
9. **H1 防重复提交**：「提交补录申请」按钮点击时须设置 `:loading="submitting"` + `:disabled` 双重锁定；提交期间禁止重复点击
|
|
|
10. **H2 超时控制**：获取区域和检查项数据 GET 请求超时 15s；提交补录 POST 请求超时 30s；证明材料上传超时 60s；>3s 时须 `wx.showLoading({mask:true})`；超时后提示并提供重试
|
|
|
11. **H3 操作确认**：点击「提交补录申请」前须通过 `wx.showModal` 二次确认，内容包括补录原因摘要、说明字数及"提交后需等待主管审核"的后果说明
|
|
|
12. **H4 脏数据检测**：页面初始化时保存空白表单快照；选择补录原因、填写说明、上传材料、选择时间/区域、填写检查项等任一操作触发 isDirty=true；`onUnload` 中检测 isDirty 时弹出 `wx.showModal({content:"补录信息尚未提交，确定离开？"})` 拦截
|
|
|
13. **H7 上传约束**：证明材料上传单个文件 ≤10MB，最多 ≤3 张（业务限制）；使用 `uni-file-picker` 的 `@progress` 回调显示上传进度；超出限制时前端拦截并提示
|
|
|
14. **H8 反馈规范**：提交成功使用 `wx.showToast({icon:'success', title:'补录申请已提交，待审核'})`；校验失败使用 `wx.showToast({icon:'none', title:'具体错误信息'})`；离线暂存本地时提示"已暂存至本地，联网后将自动提交"
|
|
|
|
|
|
#### 组件规范
|
|
|
|
|
|
| 元素 | 组件 | 配置参数 |
|
|
|
|------|------|----------|
|
|
|
| 补录原因 | `uni-data-select` | :localdata="[{value:'bluetooth',text:'蓝牙失灵'},{value:'location',text:'定位失败'},{value:'system',text:'系统异常'},{value:'other',text:'其他'}]" |
|
|
|
| 补录说明 | `uni-easyinput` | type="textarea"，maxlength="200"，:showWordLimit="true" |
|
|
|
| 证明材料上传 | `uni-file-picker` | limit="3"，file-mediatype="image" |
|
|
|
| 巡检时间 | `uni-datetime-picker` | type="datetime" |
|
|
|
| 巡检区域 | `uni-data-select` | v-model="areaId"，:localdata="areaList" |
|
|
|
| 检查项结果 | `uni-data-checkbox` | 每项动态渲染，正常/异常 |
|
|
|
| 提交按钮 | `button` | type="primary"，:loading="submitting" |
|
|
|
| 确认弹窗 | `uni-popup` | type="dialog" |
|
|
|
|
|
|
#### 校验规则
|
|
|
|
|
|
| 字段 | 规则 | 错误提示 |
|
|
|
|------|------|----------|
|
|
|
| 补录原因 | 必选 | "请选择补录原因" |
|
|
|
| 补录说明 | 必填，最多200字 | "请填写补录说明" / "补录说明不能超过200字" |
|
|
|
| 证明材料 | 最多3张 | "证明材料最多上传3张" |
|
|
|
| 巡检时间 | 必选 | "请选择巡检时间" |
|
|
|
| 巡检区域 | 必选 | "请选择巡检区域" |
|
|
|
| 检查项结果 | 必须逐项填写 | "请完成所有检查项" |
|
|
|
|
|
|
#### 响应式布局
|
|
|
|
|
|
- **适配机型**：iPhone SE（375px）~ iPad mini（768px），表单宽度自适应
|
|
|
- **横竖屏适配策略**：竖屏垂直布局；横屏表单水平分组展示
|
|
|
- **手势交互规范**：选择器≥44px；提交按钮≥44px；上传区域≥44px
|
|
|
- **安全区域**：底部提交按钮适配底部安全区
|
|
|
|
|
|
## 需求追溯
|
|
|
|
|
|
| 功能点编号 | 功能名称 | 文档来源 | 后续服务 | 关联功能 |
|
|
|
|------------|----------|----------|----------|----------|
|
|
|
| MP-I-01 | 今日巡检任务 | 02-小程序端 §3 | 查看任务→开始巡检→蓝牙打卡 | 巡检计划（Web端） |
|
|
|
| MP-I-02 | 蓝牙强制打卡 | 02-小程序端 §3 | 打卡成功→记录check_type=BLUETOOTH→开始巡检 | 蓝牙策略配置 |
|
|
|
| MP-I-03 | 巡检执行 | 02-小程序端 §3 | 逐项检查→记录正常/异常→提交 | 巡检计划清单 |
|
|
|
| MP-I-04 | 异常上报 | 02-小程序端 §3 | 上报→可一键生成报修工单→通知主管 | 在线报修（报修工单） |
|
|
|
| MP-I-05 | 巡检历史 | 02-小程序端 §3 | 查看个人历史巡检记录 | 统计报表 |
|
|
|
| MP-I-06 | 异常数据补录 | 02-小程序端 §3 | 提交补录→主管审核→审核通过后数据生效 | 补录审核（Web+小程序） |
|
|
|
|
|
|
## 业务规则
|
|
|
|
|
|
1. **蓝牙策略规则**（06-项目技术要求.md §4.4）：
|
|
|
- 策略=REQUIRED（强制蓝牙）：
|
|
|
- 必须连接蓝牙Beacon后才可打卡
|
|
|
- 拍照也须在蓝牙连接状态下进行
|
|
|
- 蓝牙扫描超时3秒，重试3次
|
|
|
- 未检测到蓝牙 → 提示"未检测到蓝牙信号" → 可重试或进入补录模式
|
|
|
- 打卡记录 `check_type=BLUETOOTH`
|
|
|
- 策略=OPTIONAL（非强制蓝牙）：
|
|
|
- 用户选择打卡方式：蓝牙打卡或手动打卡
|
|
|
- 手动打卡：`check_type=MANUAL`
|
|
|
|
|
|
2. **蓝牙连接判定**（06-项目技术要求.md §5.4）：
|
|
|
- **不判断距离，只要成功连接蓝牙设备即可打卡**
|
|
|
- 信号阈值：RSSI > -70dBm（可配置，仅用于判定是否能建立连接）
|
|
|
- 扫描超时：3秒
|
|
|
- 重试次数：3次
|
|
|
|
|
|
3. **蓝牙策略查询**（03-业务流转逻辑-小程序端 §3）：
|
|
|
- 数据来源：`GET /system/bluetooth-policy → inspection_check_in`（打卡策略）
|
|
|
- 数据来源：`GET /system/bluetooth-policy → inspection_photo`（拍照策略）
|
|
|
|
|
|
4. **异常上报关联报修**（03-业务流转逻辑-小程序端 §3）：
|
|
|
- 异常上报时可一键生成报修工单
|
|
|
- 数据写入报修模块（INSPECTION_ABNORMAL事件 → repair模块消费）
|
|
|
|
|
|
5. **补录数据规则**（06-项目技术要求.md §4.5）：
|
|
|
- 补录数据必须标记 `is_supplement=true`
|
|
|
- 补录原因必填
|
|
|
- 需主管审核（Web+小程序均可审核）
|
|
|
|
|
|
6. **数据权限**（01-模块划分.md §1.3）：
|
|
|
- 巡检人员：仅本人巡检数据
|
|
|
- 主管：本班组巡检数据
|
|
|
|
|
|
## 状态流转
|
|
|
|
|
|
### 巡检任务状态流转
|
|
|
|
|
|
```
|
|
|
待执行 ──[蓝牙打卡]──▶ 进行中 ──[逐项检查]──▶ 已完成
|
|
|
│ │
|
|
|
│ └──[发现异常]──▶ 异常（可一键报修）
|
|
|
│
|
|
|
└──[蓝牙失败]──▶ 补录模式 ──[手动填写]──▶ 待审核 ──[主管通过]──▶ 已完成
|
|
|
└──[主管驳回]──▶ 已驳回
|
|
|
```
|
|
|
|
|
|
### 蓝牙打卡流程
|
|
|
|
|
|
```
|
|
|
开始打卡
|
|
|
│
|
|
|
查询蓝牙策略（inspection_check_in）
|
|
|
│
|
|
|
┌───策略=REQUIRED───┐
|
|
|
│ 自动扫描蓝牙Beacon │
|
|
|
│ │ │
|
|
|
│ ┌──检测到Beacon──┐ ┌──未检测到──┐
|
|
|
│ │ 连接蓝牙 │ │ 提示未检测 │
|
|
|
│ │ 连接成功→打卡 │ │ 重试/补录 │
|
|
|
│ │ check_type= │ └────────────┘
|
|
|
│ │ BLUETOOTH │
|
|
|
│ └────────────────┘
|
|
|
└────────────────────┘
|
|
|
│
|
|
|
┌───策略=OPTIONAL───┐
|
|
|
│ 选择打卡方式 │
|
|
|
│ ┌蓝牙打卡─手动打卡┐│
|
|
|
│ │BLUETOOTH MANUAL││
|
|
|
│ └────────────────┘│
|
|
|
└────────────────────┘
|
|
|
```
|