# 服务监督

> 模块编码：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="请选择状态"，clearable，multiple |
| 报修类型选择 | 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 | stripe，border，: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-1279px（Pad横屏） | 查询条件区三行排列，统计卡片2×2网格，列表隐藏"报修人""维修人员"列 |
| 768-1023px（Pad竖屏） | 查询条件区纵向堆叠（仅保留工单号/状态/报修类型），统计卡片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 | stripe，border，: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-1279px（Pad横屏） | 隐藏"打卡方式"列 |
| 768-1023px（Pad竖屏） | 仅显示巡检人员/计划名称/状态/异常数/操作核心字段 |

---

## 页面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 | stripe，border，: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-1279px（Pad横屏） | 隐藏"打卡方式"列 |
| 768-1023px（Pad竖屏） | 仅显示保洁人员/保洁区域/完成状态/抽查结果/操作核心字段 |

---

## 需求追溯

| 功能点编号 | 功能名称 | 文档来源 | 后续服务 | 关联功能 |
|------------|----------|----------|----------|----------|
| 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）