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.

18 KiB

服务监督

模块编码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