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.

334 lines
18 KiB
Markdown

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

# 服务监督
> 模块编码service-supervision
> 端侧Web专属仅医院账号
> 关联文档01-模块划分 §4.3 / 02-功能清单-医院 §3 / 03-业务流转逻辑-医院 §3 / 05-接口规范 §9.2
> 强制规范遵循 `07-前端界面开发规范.md`
## 功能概览
| 项目 | 说明 |
|------|------|
| 菜单名称 | 服务监督 |
| 子菜单 | 报修数据查看、巡检数据查看、保洁数据查看 |
| 功能编号 | HO-SP-01 ~ HO-SP-04 |
| 权限编码前缀 | 继承物业模块权限的只读版本 |
> **重要**:医院账号仅查看关联物业公司的日常业务数据,**只读,不可操作**。
---
## 页面1报修数据查看页
**页面编号**HO-SP-01-P01
**端侧归属**Web专属
**页面路径**/supervision/repair
### 界面布局
```
┌──────────────────────────────────────────────────────────────────┐
│ [面包屑] 服务监督 > 报修数据查看 │
├──────────────────────────────────────────────────────────────────┤
│ [查询条件区] │
│ 工单号[____] 状态[▼] 报修类型[▼] 紧急程度[▼] │
│ 提交日期[起始]~[结束] 所属班组[▼] 所属区域[▼] │
│ [查询] [重置] │
├──────────────────────────────────────────────────────────────────┤
│ [统计卡片区] │
│ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │总工单│ │待分配│ │处理中│ │已完成│ │
│ │ 156 │ │ 12 │ │ 23 │ │ 108 │ │
│ └──────┘ └──────┘ └──────┘ └──────┘ │
├──────────────────────────────────────────────────────────────────┤
│ [列表区] │
│ 工单号 | 报修类型 | 紧急程度 | 状态 | 报修人 | 班组 | 提交时间 │
│ WX001 | 水电 | 紧急 | 待分配| 张三 | 水电班| 04-16 10:30│
├──────────────────────────────────────────────────────────────────┤
│ [分页] 共156条 每页[20▼] < 1 2 3 ... 8 > │
└──────────────────────────────────────────────────────────────────┘
```
### 查询条件
| 字段名 | 控件类型 | 必填 | 默认值 | 说明 |
|--------|----------|------|--------|------|
| 工单号 | 文本输入 | 否 | — | 模糊匹配 |
| 状态 | 下拉多选 | 否 | 全部 | — |
| 报修类型 | 下拉单选 | 否 | 全部 | — |
| 紧急程度 | 下拉单选 | 否 | 全部 | — |
| 提交日期 | 日期范围 | 否 | — | — |
| 所属班组 | 下拉单选 | 否 | 全部 | — |
| 所属区域 | 级联选择 | 否 | 全部 | — |
### 列表字段
| 序号 | 字段名 | 列宽 | 支持排序 | 说明 |
|------|--------|------|----------|------|
| 1 | 工单号 | 140px | 是 | 点击查看详情(只读) |
| 2 | 报修类型 | 80px | 否 | — |
| 3 | 紧急程度 | 80px | 否 | — |
| 4 | 状态 | 90px | 是 | — |
| 5 | 报修人 | 80px | 否 | — |
| 6 | 负责班组 | 90px | 否 | — |
| 7 | 维修人员 | 80px | 否 | — |
| 8 | 提交时间 | 150px | 是 | 默认倒序 |
| 9 | 操作 | 80px | — | 查看详情(只读) |
### 操作按钮
| 按钮 | 权限编码 | 位置 | 显示条件 | 说明 |
|------|----------|------|----------|------|
| 查看详情 | repair:list:view(只读) | 行操作 | 始终 | 跳转只读详情页 |
### 角色差异化视图
| 角色 | 可见按钮 | 数据范围 | 备注 |
|------|----------|----------|------|
| 医院账号 | 仅查看 | 关联物业公司的全部报修数据 | 无任何操作按钮 |
### 工单详情页(只读)
- 展示与物业公司工单详情相同的信息
- 标签页:基本信息、流转记录、照片附件
- 底部无任何操作按钮
### API端点
| 页面操作 | API路径 | 方法 | 说明 |
|----------|---------|------|------|
| 列表查询 | /api/v1/repair-orders | GET | 只读,自动过滤关联物业公司 |
| 详情查询 | /api/v1/repair-orders/{id} | GET | 只读 |
### 交互流程要求
1. **页面加载流程**:进入页面 → 调用报修工单列表API自动过滤关联物业公司→ 渲染统计卡片 + 列表
2. **查询/筛选交互流程**:填写筛选条件 → 点击"查询"按钮 → 调用API携带筛选参数 → 刷新列表和统计卡片;点击"重置"清空条件重新加载
3. **表单填写与提交流程**:不适用(只读页面,无任何操作按钮)
4. **弹窗/抽屉交互流程**:不适用(查看详情跳转只读详情页)
5. **行内操作流程**:点击工单号或"查看详情" → 跳转只读工单详情页(标签页:基本信息/流转记录/照片附件,底部无操作按钮)
6. **异常与错误处理**API请求失败显示el-message错误提示列表为空显示el-empty无权限时提示"您无权查看此数据"
7. **联动/级联交互**:筛选条件变化后统计卡片数据同步刷新;所属区域级联选择(楼栋→楼层→房间)
8. **权限控制交互表现**:医院账号仅查看,所有操作按钮隐藏;仅显示关联物业公司的数据
### 前端硬性约束
> 以下为本页面必须遵守的前端交互与体验硬性约束H=Hard Constraint
| 编号 | 约束项 | 级别 | 本页要求 |
|------|--------|------|----------|
| **H1** | 防重复提交 | **强制** | 列表查询/翻页期间显示loading状态并禁用查询/分页控件切换分页时abort上一页未完成请求"查看详情"操作防重复点击 |
| **H2** | 请求超时 | **强制** | GET列表请求设置15s超时GET详情请求设置15s超时 |
| **H3** | 操作确认 | 强制(不适用) | 本页为只读查看页面,无删除/停用等危险操作,不涉及 |
| **H4** | 脏数据保护 | 强制(不适用) | 本页无编辑表单,不涉及脏数据检测 |
| **H5** | 权限隔离表现 | 建议 | 医院账号仅可见关联物业公司数据范围;无`repair:list:view`权限时隐藏列表及查询区域;权限不足时展示空状态或无权提示而非报错 |
| **H6** | 批量操作限制 | 建议(不适用) | 本页为只读页面,无批量操作,不涉及 |
| **H7** | 文件上传约束 | 建议(不适用) | 本页无文件上传功能,不涉及 |
| **H8** | 反馈规范 | 建议 | 成功提示自动2s后消失(silent刷新);错误提示需手动关闭(duration=0);网络异常时展示重试按钮 |
### 组件规范
| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 工单号输入 | el-input | placeholder="请输入工单号"clearable |
| 状态选择 | el-select | placeholder="请选择状态"clearablemultiple |
| 报修类型选择 | el-select | placeholder="请选择报修类型"clearable |
| 紧急程度选择 | el-select | placeholder="请选择紧急程度"clearable |
| 提交日期范围 | el-date-picker | type="daterange"start-placeholder="开始日期"end-placeholder="结束日期" |
| 所属班组选择 | el-select | placeholder="请选择班组"clearable |
| 所属区域 | el-cascader | placeholder="请选择区域":props="{checkStrictly: true}",级联:楼栋/楼层/房间 |
| 查询按钮 | el-button | type="primary"icon="Search" |
| 重置按钮 | el-button | type="default"icon="Refresh" |
| 统计卡片 | el-card | v-for遍历4个指标shadow="hover",含数字和标签 |
| 工单列表 | el-table | stripeborder:default-sort="{prop: 'submitTime', order: 'descending'}" |
| 紧急程度列 | el-tag | :type根据程度配色紧急=danger较急=warning一般=info |
| 状态列 | el-tag | :type根据状态配色 |
| 工单号列 | el-link | type="primary":underline=false@click跳转详情 |
| 查看详情按钮 | el-button | type="default"size="small"link样式icon="View" |
| 分页 | el-pagination | layout="total, sizes, prev, pager, next":page-sizes="[10,20,50]" |
### 校验规则
| 字段 | 规则 | 错误提示 |
|------|------|----------|
| (无表单校验,仅查询条件) | — | — |
### 响应式布局
| 断点 | 布局调整 |
|------|----------|
| ≥1280px桌面端 | 查询条件区双行排列统计卡片横排4列列表全字段展示 |
| 1024-1279pxPad横屏 | 查询条件区三行排列统计卡片2×2网格列表隐藏"报修人""维修人员"列 |
| 768-1023pxPad竖屏 | 查询条件区纵向堆叠(仅保留工单号/状态/报修类型统计卡片2×2网格列表仅显示工单号/类型/状态/提交时间/操作 |
---
## 页面2巡检数据查看页
**页面编号**HO-SP-03-P01
**端侧归属**Web专属
**页面路径**/supervision/inspection
### 列表字段
| 序号 | 字段名 | 列宽 | 支持排序 | 说明 |
|------|--------|------|----------|------|
| 1 | 巡检人员 | 80px | 否 | — |
| 2 | 计划名称 | 150px | 否 | — |
| 3 | 巡检区域 | 150px | 否 | — |
| 4 | 打卡时间 | 140px | 是 | — |
| 5 | 打卡方式 | 80px | 否 | 蓝牙/手动/补录 |
| 6 | 状态 | 80px | 否 | 正常/异常 |
| 7 | 异常数 | 70px | 否 | — |
| 8 | 操作 | 80px | — | 查看详情 |
### 操作按钮
| 按钮 | 权限编码 | 位置 | 显示条件 | 说明 |
|------|----------|------|----------|------|
| 查看详情 | inspection:task:view(只读) | 行操作 | 始终 | 只读 |
### 交互流程要求
1. **页面加载流程**:进入页面 → 调用巡检数据列表API自动过滤关联物业公司→ 渲染列表
2. **查询/筛选交互流程**:支持按巡检人员、计划名称、打卡方式、状态筛选
3. **表单填写与提交流程**:不适用(只读页面)
4. **弹窗/抽屉交互流程**:点击"查看详情" → 跳转只读巡检详情页
5. **行内操作流程**:点击"查看详情"跳转只读详情页;异常数>0时该行标记橙色
6. **异常与错误处理**API请求失败显示el-message错误提示列表为空显示el-empty
7. **联动/级联交互**:状态筛选与列表数据联动
8. **权限控制交互表现**:医院账号仅查看,无操作按钮
### 前端硬性约束
> 以下为本页面必须遵守的前端交互与体验硬性约束H=Hard Constraint
| 编号 | 约束项 | 级别 | 本页要求 |
|------|--------|------|----------|
| **H1** | 防重复提交 | **强制** | 列表查询/筛选/翻页期间显示loading状态并禁用相关控件切换分页时abort上一页未完成请求"查看详情"操作防重复点击 |
| **H2** | 请求超时 | **强制** | GET列表请求设置15s超时GET详情请求设置15s超时 |
| **H3** | 操作确认 | 强制(不适用) | 本页为只读查看页面,无删除/停用等危险操作,不涉及 |
| **H4** | 脏数据保护 | 强制(不适用) | 本页无编辑表单,不涉及脏数据检测 |
| **H5** | 权限隔离表现 | 建议 | 仅展示本医院关联物业公司的巡检数据;无`inspection:task:view`权限时隐藏整个列表区域 |
| **H6** | 批量操作限制 | 建议(不适用) | 本页为只读页面,无批量操作,不涉及 |
| **H7** | 文件上传约束 | 建议(不适用) | 本页无文件上传功能,不涉及 |
| **H8** | 反馈规范 | 建议 | 成功提示自动2s后消失(silent刷新);错误提示需手动关闭(duration=0);网络异常时展示重试按钮 |
### 组件规范
| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 巡检数据列表 | el-table | stripeborder:row-class-name异常行高亮 |
| 打卡方式列 | el-tag | :type根据方式配色蓝牙=success手动=warning补录=info |
| 状态列 | el-tag | :type根据状态配色正常=success异常=danger |
| 异常数列 | el-tag | v-if="异常数>0" type="danger",否则显示"0" |
| 查看详情按钮 | el-button | type="default"size="small"link样式icon="View" |
### 校验规则
| 字段 | 规则 | 错误提示 |
|------|------|----------|
| (无表单校验,仅查询条件) | — | — |
### 响应式布局
| 断点 | 布局调整 |
|------|----------|
| ≥1280px桌面端 | 列表全字段展示 |
| 1024-1279pxPad横屏 | 隐藏"打卡方式"列 |
| 768-1023pxPad竖屏 | 仅显示巡检人员/计划名称/状态/异常数/操作核心字段 |
---
## 页面3保洁数据查看页
**页面编号**HO-SP-04-P01
**端侧归属**Web专属
**页面路径**/supervision/cleaning
### 列表字段
| 序号 | 字段名 | 列宽 | 支持排序 | 说明 |
|------|--------|------|----------|------|
| 1 | 保洁人员 | 80px | 否 | — |
| 2 | 保洁区域 | 150px | 否 | — |
| 3 | 任务日期 | 100px | 是 | — |
| 4 | 打卡时间 | 140px | 否 | — |
| 5 | 打卡方式 | 80px | 否 | — |
| 6 | 完成状态 | 80px | 否 | 已完成/超时/未执行 |
| 7 | 抽查结果 | 80px | 否 | 合格/不合格/未抽查 |
| 8 | 操作 | 80px | — | 查看详情 |
### 操作按钮
| 按钮 | 权限编码 | 位置 | 显示条件 | 说明 |
|------|----------|------|----------|------|
| 查看详情 | cleaning:task:view(只读) | 行操作 | 始终 | 只读 |
### 交互流程要求
1. **页面加载流程**:进入页面 → 调用保洁数据列表API自动过滤关联物业公司→ 渲染列表
2. **查询/筛选交互流程**:支持按保洁人员、保洁区域、任务日期、完成状态筛选
3. **表单填写与提交流程**:不适用(只读页面)
4. **弹窗/抽屉交互流程**:点击"查看详情" → 跳转只读保洁详情页
5. **行内操作流程**:点击"查看详情"跳转只读详情页;超时/未执行状态行标记橙色;抽查不合格行标记红色
6. **异常与错误处理**API请求失败显示el-message错误提示列表为空显示el-empty
7. **联动/级联交互**:完成状态筛选与列表数据联动
8. **权限控制交互表现**:医院账号仅查看,无操作按钮
### 前端硬性约束
> 以下为本页面必须遵守的前端交互与体验硬性约束H=Hard Constraint
| 编号 | 约束项 | 级别 | 本页要求 |
|------|--------|------|----------|
| **H1** | 防重复提交 | **强制** | 列表查询/筛选/翻页期间显示loading状态并禁用相关控件切换分页时abort上一页未完成请求"查看详情"操作防重复点击 |
| **H2** | 请求超时 | **强制** | GET列表请求设置15s超时GET详情请求设置15s超时 |
| **H3** | 操作确认 | 强制(不适用) | 本页为只读查看页面,无删除/停用等危险操作,不涉及 |
| **H4** | 脏数据保护 | 强制(不适用) | 本页无编辑表单,不涉及脏数据检测 |
| **H5** | 权限隔离表现 | 建议 | 仅展示本医院关联物业公司的保洁数据;无`cleaning:task:view`权限时隐藏整个列表区域 |
| **H6** | 批量操作限制 | 建议(不适用) | 本页为只读页面,无批量操作,不涉及 |
| **H7** | 文件上传约束 | 建议(不适用) | 本页无文件上传功能,不涉及 |
| **H8** | 反馈规范 | 建议 | 成功提示自动2s后消失(silent刷新);错误提示需手动关闭(duration=0);网络异常时展示重试按钮 |
### 组件规范
| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 保洁数据列表 | el-table | stripeborder:row-class-name超时/不合格行高亮 |
| 完成状态列 | el-tag | :type根据状态配色已完成=success超时=warning未执行=danger |
| 抽查结果列 | el-tag | :type根据结果配色合格=success不合格=danger未抽查=info |
| 查看详情按钮 | el-button | type="default"size="small"link样式icon="View" |
### 校验规则
| 字段 | 规则 | 错误提示 |
|------|------|----------|
| (无表单校验,仅查询条件) | — | — |
### 响应式布局
| 断点 | 布局调整 |
|------|----------|
| ≥1280px桌面端 | 列表全字段展示 |
| 1024-1279pxPad横屏 | 隐藏"打卡方式"列 |
| 768-1023pxPad竖屏 | 仅显示保洁人员/保洁区域/完成状态/抽查结果/操作核心字段 |
---
## 需求追溯
| 功能点编号 | 功能名称 | 文档来源 | 后续服务 | 关联功能 |
|------------|----------|----------|----------|----------|
| HO-SP-01 | 报修数据查看 | 02-医院 §3 / 03-医院 §3.1 | — | 物业在线报修(数据来源) |
| HO-SP-02 | 工单详情查看 | 02-医院 §3 / 03-医院 §3.1 | — | 物业工单详情(数据来源) |
| HO-SP-03 | 巡检数据查看 | 02-医院 §3 / 03-医院 §3.1 | — | 物业巡检管理(数据来源) |
| HO-SP-04 | 保洁数据查看 | 02-医院 §3 / 03-医院 §3.1 | — | 物业保洁管理(数据来源) |
## 业务规则
1. **仅查看不可操作**医院账号可查看关联物业公司的全部日常业务数据但不能分配工单、审核补录等操作来源01 §4.3 / 03-医院 §3
2. **数据来源**物业公司日常业务录入的数据来源03-医院 §3.1
3. **数据范围**仅查看为本医院服务的物业公司的数据来源01 §1.3 / 03-医院 §3
4. **支持筛选和导出**支持时间范围、区域、状态等筛选条件支持导出报表只读来源03-医院 §3.1