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.

27 KiB

系统配置

模块编码system 端侧Web专属 关联文档01-模块划分 §3.9 / 02-功能清单-物业公司 §9 / 03-业务流转逻辑-物业公司 §9 / 05-接口规范 §9.2 / 06-项目技术要求 §4.4 强制规范遵循 07-前端界面开发规范.md

功能概览

项目 说明
菜单名称 系统配置
子菜单 蓝牙设备管理、字典管理、微信配置、消息模板、数据补录审核
功能编号 PR-S-01 ~ PR-S-05
权限编码前缀 device:beacon:* / system:dict:* / system:wechat:* / system:template:* / system:bluetooth-policy:*

页面1蓝牙设备管理页

页面编号PR-S-01-P01 端侧归属Web专属 页面路径/system/beacons

界面布局

┌──────────────────────────────────────────────────────────────────┐
│ [面包屑] 系统配置 > 蓝牙设备管理                                    │
├──────────────────────────────────────────────────────────────────┤
│ [查询条件区]                                                      │
│ Beacon名称[____] 状态[▼] 绑定位置[____]              [查询] [重置] │
├──────────────────────────────────────────────────────────────────┤
│ [操作栏]  [新增Beacon]                                            │
├──────────────────────────────────────────────────────────────────┤
│ [列表区]                                                          │
│ 序号| 名称   | UUID         | 绑定位置  | 状态 | 电量 | 最后心跳  │
│ 1  | B-001  | xxxx-xxxx... | 门诊1层  | 在线 | 85% | 10:30   │
│ 2  | B-002  | xxxx-xxxx... | 住院1层  | 离线 | 12% | 08:15   │
├──────────────────────────────────────────────────────────────────┤
│ [分页]  共30条  每页[20▼]  < 1 2 >                                │
└──────────────────────────────────────────────────────────────────┘

查询条件

字段名 控件类型 必填 默认值 说明
Beacon名称 文本输入 模糊匹配
状态 下拉单选 全部 在线/离线
绑定位置 文本输入 模糊匹配

列表字段

序号 字段名 列宽 支持排序 说明
1 名称 100px
2 UUID 180px
3 绑定位置 150px 巡检点位/保洁区域/打卡点
4 绑定模块 80px 巡检/保洁/考勤
5 状态 80px 在线(绿)/离线(红)
6 电量 70px <20%=红色低电量
7 最后心跳时间 140px 超过15分钟=离线
8 操作 120px 编辑/解绑/删除

操作按钮

按钮 权限编码 位置 显示条件 说明
新增Beacon device:beacon:create 操作栏 始终
编辑 device:beacon:update 行操作 始终
解绑 device:beacon:update 行操作 已绑定
删除 device:beacon:delete 行操作 未绑定时 二次确认

表单字段(新增/编辑弹窗)

字段名 控件类型 必填 默认值 数据来源 校验规则
Beacon名称 文本输入 自填 最大30字
UUID 文本输入 自填 UUID格式
绑定位置 级联选择 区域树
绑定模块 下拉单选 固定选项 巡检/保洁/考勤
电量预警阈值(%) 数字输入 20 0~100

通知触发

触发操作 通知对象 通知方式 消息模板 文档来源
Beacon离线(>15分钟) 物业管理员 系统内通知 Beacon离线预警 05 §5.2 (BEACON_OFFLINE) / 06 §5.4
Beacon低电量(<20%) 物业管理员 系统内通知 Beacon低电量预警 05 §5.2 (BEACON_LOW_BATTERY)

API端点

页面操作 API路径 方法 说明
列表查询 /api/v1/beacons GET
新增 /api/v1/beacons POST
编辑 /api/v1/beacons/{id} PUT
解绑 /api/v1/beacons/{id}/unbind PUT
删除 /api/v1/beacons/{id} DELETE

交互流程要求

  1. 页面加载流程:进入页面 → 调用API加载Beacon列表 + 绑定位置级联数据
  2. 查询交互:填写条件 → 查询 → 重置到第1页
  3. 新增/编辑Beacon:点击"新增Beacon"→ 弹窗 → 填写表单 → 保存 → 刷新列表
  4. 解绑操作:点击"解绑"→ 二次确认 → API调用 → 刷新列表
  5. 删除操作:仅未绑定位置时可删除 → 二次确认 → API调用 → 刷新列表
  6. 联动交互:绑定位置使用级联选择器(楼栋→楼层→区域→点位)
  7. 异常处理UUID格式错误即时提示删除已绑定Beacon提示"请先解绑"
  8. 权限控制:无对应权限 → 操作按钮不渲染
  9. [H1] 防重复请求:查询/新增/编辑/解绑按钮点击后 disabled + loading分页切换 abort 前次未完成请求;行内操作(编辑/解绑/删除)点击后禁用当前行,弹窗/确认关闭后恢复
  10. [H2] 超时控制:列表 GET /api/v1/beacons 超时 15s新增 POST /api/v1/beacons 超时 30s编辑 PUT 超时 30s删除 DELETE 超时 30s>3s 全局 Loading
  11. [H3] 操作确认:删除操作必须二次确认 ElMessageBox.confirmtype=error文案含"确定删除该Beacon设备吗此操作不可恢复"解绑操作二次确认type=warning文案含"确定解绑该Beacon的绑定位置吗"
  12. [H4] 脏数据检测:新增/编辑弹窗打开时 deep clone 表单初始值;表单字段变更后计算 isDirty用户尝试关闭弹窗时若 isDirty 为 true 则拦截并提示"修改尚未保存,确定离开吗?"
  13. [H8] 反馈机制:新增/编辑成功 ElMessage.success 2s 自动消失 + silent 刷新列表;失败 ElMessage.error 手动关闭;删除/解绑成功 2s 提示后刷新

组件规范

元素 组件 配置参数
列表 el-table stripe, border, v-loading
状态标签 el-tag 在线:type="success", 离线:type="danger"
电量 el-progress :percentage, :stroke-width=10, <20%:color="red"
新增/编辑弹窗 el-dialog width="500px"
绑定位置级联 el-cascader :options="locationTree", :props="{checkStrictly:true}"
绑定模块下拉 el-select :options="[{label:'巡检',value:'inspection'},{label:'保洁',value:'cleaning'},{label:'考勤',value:'attendance'}]"
电量预警阈值 el-input-number :min=0, :max=100, :step=5

校验规则

字段 规则 错误提示
Beacon名称 必填, 最大30字符 "请输入Beacon名称" / "名称不能超过30字符"
UUID 必填, UUID格式 "请输入UUID" / "UUID格式不正确"
电量预警阈值 0-100整数 "阈值范围为0-100"

响应式布局

断点 布局调整
≥1280px 查询条件一行;列表完整展示
1024-1279px 查询条件两行;"绑定模块""电量"列隐藏
768-1023px 查询条件竖向堆叠;列表仅显示:名称、绑定位置、状态、操作

页面2字典管理页

页面编号PR-S-02-P01 端侧归属Web专属 页面路径/system/dicts

界面布局

┌──────────────────────────────────────────────────────────────────┐
│ [面包屑] 系统配置 > 字典管理                                       │
├──────────────────────────────────────────────────────────────────┤
│ [左侧-字典类型]      │ [右侧-字典值]                              │
│ ┌──────────────┐    │ ┌──────────────────────────────────────┐   │
│ │ 报修类型      │◀── │ 序号 | 字典值 | 排序 | 状态 | 操作      │   │
│ │ 巡检类型      │    │ 1    | 水电   | 1    | 启用 | 编辑 停用│   │
│ │ 保洁类型      │    │ 2    | 木工   | 2    | 启用 | 编辑 停用│   │
│ │ 班组类型      │    │ 3    | 空调   | 3    | 停用 | 编辑 启用│   │
│ │ 班次类型      │    │                                       │   │
│ │ [新增类型]    │    │ [新增字典值]                           │   │
│ └──────────────┘    │ └──────────────────────────────────────┘   │
└──────────────────────────────────────────────────────────────────┘

操作按钮

按钮 权限编码 位置 显示条件 说明
新增字典类型 system:dict:create 左侧 始终
新增字典值 system:dict:create 右侧 始终
编辑 system:dict:update 行操作 始终
启用/停用 system:dict:update 行操作 始终 被引用时不可停用

API端点

页面操作 API路径 方法 说明
字典类型列表 /api/v1/dict-types GET
字典值列表 /api/v1/dict-types/{typeCode}/values GET
新增类型 /api/v1/dict-types POST
新增值 /api/v1/dict-types/{typeCode}/values POST

交互流程要求

  1. 页面加载流程:进入页面 → 调用API加载字典类型列表 → 默认选中第一个类型 → 加载对应字典值
  2. 左侧类型交互:点击类型 → 右侧加载对应字典值列表
  3. 新增类型:点击"新增类型"→ 弹窗输入类型名称和编码 → 保存 → 刷新左侧列表
  4. 新增字典值:点击"新增字典值"→ 弹窗输入字典值和排序 → 保存 → 刷新右侧列表
  5. 启用/停用:被业务数据引用的字典值不可停用 → 提示"该字典值正在使用中,无法停用"
  6. 联动交互:字典值变更后,引用该字典的下拉选项实时刷新
  7. 异常处理:类型编码重复 → 提示"该编码已存在"

组件规范

元素 组件 配置参数
左右分栏 el-container 左侧宽度250px
字典类型列表 el-menu :default-active, @select
右侧字典值列表 el-table stripe, border
状态标签 el-tag 启用:type="success", 停用:type="danger"
新增弹窗 el-dialog width="400px"

校验规则

字段 规则 错误提示
类型名称 必填, 最大30字符 "请输入类型名称"
类型编码 必填, 字母数字下划线, 唯一 "请输入类型编码" / "该编码已存在"
字典值 必填, 最大50字符 "请输入字典值"

响应式布局

断点 布局调整
≥1280px 左右分栏左侧250px
1024-1279px 左右分栏左侧200px
768-1023px 上下分栏类型列表改为横向tab切换

页面3微信配置页

页面编号PR-S-03-P01 端侧归属Web专属 页面路径/system/wechat

表单字段

字段名 控件类型 必填 默认值 数据来源 校验规则
小程序AppID 文本输入 微信公众平台
小程序AppSecret 密码输入 微信公众平台
公众号AppID 文本输入 微信公众平台
公众号AppSecret 密码输入 微信公众平台
服务器地址(URL) 文本输入 自填 URL格式

操作按钮

按钮 权限编码 位置 显示条件 说明
保存 system:wechat:update 底部 始终
测试连接 system:wechat:view 底部 始终 验证配置是否正确

API端点

页面操作 API路径 方法 说明
查询配置 /api/v1/system/wechat-config GET
保存 /api/v1/system/wechat-config PUT
测试连接 /api/v1/system/wechat-config/test POST

交互流程要求

  1. 页面加载流程:进入页面 → 调用API加载当前微信配置 → 回填表单Secret字段脱敏显示
  2. 表单提交流程:修改配置 → 点击"保存"→ 前端校验 → API调用 → 成功提示
  3. 测试连接:点击"测试连接"→ 调用API → 成功提示"连接成功" / 失败提示具体错误
  4. 安全交互AppSecret字段默认脱敏点击"显示"按钮后明文显示
  5. 异常处理:配置校验失败即时提示;测试连接失败提示具体原因
  6. [H1] 防重复请求"保存"按钮点击后 disabled + loading防止重复提交"测试连接"按钮同样 disabled + loading
  7. [H2] 超时控制:查询 GET /api/v1/system/wechat-config 超时 15s保存 PUT 超时 30s测试连接 POST 超时 30s>3s 全局 Loading
  8. [H4] 脏数据检测:页面加载时 deep clone 原始配置数据为原始快照;表单字段变更后与快照对比计算 isDirty用户尝试离开路由时若 isDirty 通过 beforeRouteLeave 拦截并提示"配置尚未保存,确定离开吗?"
  9. [H8] 反馈机制:保存成功 ElMessage.success("保存成功"2s 自动消失);测试连接成功/失败均 2s 提示自动消失;失败 ElMessage.error 手动关闭

组件规范

元素 组件 配置参数
表单 el-form label-width="140px", :model, :rules
AppID el-input clearable
AppSecret el-input show-password, type="password"
服务器地址 el-input clearable
保存按钮 el-button type="primary", :loading
测试连接按钮 el-button type="success", plain, :loading

校验规则

字段 规则 错误提示
小程序AppID 必填 "请输入小程序AppID"
小程序AppSecret 必填 "请输入小程序AppSecret"
服务器地址 必填, URL格式 "请输入服务器地址" / "地址格式不正确"

响应式布局

断点 布局调整
≥1280px 表单标签140px输入区400px
1024-1279px 表单标签120px输入区350px
768-1023px 表单标签100px输入区100%

页面4消息模板管理页

页面编号PR-S-04-P01 端侧归属Web专属 页面路径/system/message-templates

列表字段

序号 字段名 列宽 支持排序 说明
1 模板名称 150px 如:新工单通知
2 模板ID 150px 微信模板消息ID
3 适用场景 120px 工单分配/催单/审批/超时...
4 模板变量 200px {{工单号}}, {{人员姓名}}...
5 状态 80px 启用/停用
6 操作 100px 编辑

表单字段(编辑弹窗)

字段名 控件类型 必填 默认值 数据来源 校验规则
模板名称 文本输入 自填 最大50字
模板ID 文本输入 微信后台
适用场景 下拉单选 固定选项
模板内容 多行文本 微信后台复制 最大500字
模板变量说明 多行文本 自填

API端点

页面操作 API路径 方法 说明
列表查询 /api/v1/message-templates GET
编辑 /api/v1/message-templates/{id} PUT

交互流程要求

  1. 页面加载流程:进入页面 → 调用API加载模板列表
  2. 编辑模板:点击"编辑"→ 弹窗回填模板内容 → 修改 → 保存 → 刷新列表
  3. 模板变量:编辑时显示可用变量列表,点击变量自动插入到模板内容中
  4. 异常处理模板ID重复 → 提示"该模板ID已存在"

组件规范

元素 组件 配置参数
列表 el-table stripe, border
状态标签 el-tag 启用:type="success", 停用:type="danger"
编辑弹窗 el-dialog width="600px"
模板内容 el-input type="textarea", :rows=6, maxlength=500, show-word-limit
变量列表 el-tag v-for, type="info", size="small", @click="insertVariable"

校验规则

字段 规则 错误提示
模板名称 必填, 最大50字符 "请输入模板名称"
模板ID 必填 "请输入模板ID"
适用场景 必填 "请选择适用场景"
模板内容 必填, 最大500字符 "请输入模板内容"

响应式布局

断点 布局调整
≥1280px 列表完整展示编辑弹窗600px
1024-1279px "模板变量"列隐藏编辑弹窗550px
768-1023px 列表仅显示模板名称、适用场景、状态、操作编辑弹窗90vw

页面5蓝牙策略配置页

页面编号PR-S-05-P01含数据补录审核 端侧归属Web专属 页面路径/system/bluetooth-policy

界面布局

┌──────────────────────────────────────────────────────────────────┐
│ [面包屑] 系统配置 > 蓝牙策略配置                                    │
├──────────────────────────────────────────────────────────────────┤
│ [策略配置]                                                         │
│ ┌────────────────────────────────────────────────────────────┐   │
│ │ 场景           │ 策略       │ 说明                          │   │
│ │ 巡检打卡       │ [▼REQUIRED]│ 必须连接Beacon打卡             │   │
│ │ 巡检拍照       │ [▼OPTIONAL]│ 可自由拍照                    │   │
│ │ 保洁打卡       │ [▼REQUIRED]│ 必须连接Beacon打卡             │   │
│ │ 保洁拍照       │ [▼OPTIONAL]│ 可自由拍照                    │   │
│ │ 考勤打卡       │ [▼REQUIRED]│ 必须连接Beacon打卡             │   │
│ └────────────────────────────────────────────────────────────┘   │
├──────────────────────────────────────────────────────────────────┤
│                                         [保存] [提交审核]         │
└──────────────────────────────────────────────────────────────────┘

策略配置说明

场景 配置项 强制蓝牙(REQUIRED) 非强制(OPTIONAL) 文档来源
巡检打卡 inspection_check_in 必须连接Beacon打卡失败进补录 可手动打卡 06 §4.4
巡检拍照 inspection_photo 必须在蓝牙连接下拍照 可自由拍照 06 §4.4
保洁打卡 cleaning_check_in 必须连接Beacon打卡失败进补录 可手动打卡 06 §4.4
保洁拍照 cleaning_photo 必须在蓝牙连接下拍照 可自由拍照 06 §4.4
考勤打卡 attendance_check 必须连接Beacon打卡失败提交异常申诉 可手动打卡 06 §4.4

操作按钮

按钮 权限编码 位置 显示条件 说明
保存 system:bluetooth-policy:update 底部 始终 保存草稿
提交审核 system:bluetooth-policy:approve 底部 始终 提交医院账号审核

通知触发

触发操作 通知对象 通知方式 消息模板 文档来源
策略提交审核 医院账号 Web提醒 蓝牙策略变更审核 06 §4.4
审核通过 物业管理员 系统内通知 蓝牙策略已生效 06 §4.4
审核拒绝 物业管理员 系统内通知 蓝牙策略审核被拒绝 06 §4.4

审核流程

物业公司配置策略 → 提交审核 → 医院账号审核
                                │
                    ┌──审核通过──┐  ┌──审核拒绝──┐
                    策略生效       维持原配置
                    通知物业       通知物业

API端点

页面操作 API路径 方法 说明
查询策略 /api/v1/system/bluetooth-policy GET
保存 /api/v1/system/bluetooth-policy PUT
提交审核 /api/v1/system/bluetooth-policy/submit POST

交互流程要求

  1. 页面加载流程:进入页面 → 调用API加载当前蓝牙策略 → 回填各场景配置
  2. 策略配置交互每个场景行内下拉选择策略REQUIRED/OPTIONAL→ 实时保存为草稿
  3. 保存草稿:点击"保存"→ 调用API → 成功提示"草稿已保存"
  4. 提交审核:点击"提交审核"→ 二次确认("提交后需医院账号审核,确认提交?")→ 调用API → 成功提示"已提交审核"→ 按钮变为"审核中"不可再次点击
  5. 审核状态展示:待审核时显示"审核中"标签;审核通过显示"已生效";审核拒绝显示拒绝原因+重新编辑按钮
  6. 联动交互:选择"强制蓝牙"策略时,显示补录说明"蓝牙连接失败时自动进入补录流程"
  7. 异常处理:保存失败提示错误;提交审核时策略未变更提示"策略未修改"
  8. [H1] 防重复请求"保存"按钮点击后 disabled + loading"提交审核"按钮点击后 disabled + loading 且提交中状态不可重复点击
  9. [H2] 超时控制:查询 GET /api/v1/system/bluetooth-policy 超时 15s保存 PUT 超时 30s提交审核 POST 超时 30s>3s 全局 Loading
  10. [H4] 脏数据检测:页面加载时 deep clone 当前策略配置为原始快照;任一场景策略下拉变更后计算 isDirty用户尝试离开路由时若 isDirty 通过 beforeRouteLeave 拦截并提示"策略配置有未保存的修改,确定离开吗?"
  11. [H8] 反馈机制:保存成功 ElMessage.success("草稿已保存"2s);提交审核成功 2s 后按钮变为"审核中";失败 ElMessage.error 手动关闭

组件规范

元素 组件 配置参数
策略表格 el-table :data="policies", border
策略下拉 el-select :options="[{label:'强制蓝牙',value:'REQUIRED'},{label:'非强制',value:'OPTIONAL'}]"
补录说明 el-alert type="info", :closable=false, v-if="policy==='REQUIRED'"
审核状态标签 el-tag 审核中:type="warning", 已生效:type="success", 已拒绝:type="danger"
保存按钮 el-button type="primary", :loading
提交审核按钮 el-button type="success", :loading, :disabled="审核中"
拒绝原因 el-alert type="error", :closable=false, v-if="rejected"

校验规则

字段 规则 错误提示
策略配置 每个场景必须选择 "请完成所有场景的策略配置"

响应式布局

断点 布局调整
≥1280px 策略表格全宽
1024-1279px 策略表格"说明"列隐藏
768-1023px 策略表格改为卡片列表模式,每场景一个卡片

需求追溯

功能点编号 功能名称 文档来源 后续服务 关联功能
PR-S-01 蓝牙设备管理 02-物业公司 §9 / 03-物业公司 §9.1 Beacon→绑定位置→打卡 巡检区域管理 / 保洁区域管理 / 考勤打卡点
PR-S-02 字典管理 02-物业公司 §9 / 03-物业公司 §9.2 字典→各模块下拉选项 报修类型管理 / 巡检类型 / 保洁类型
PR-S-03 微信配置 02-物业公司 §9 配置→小程序登录+推送 小程序端(登录/通知)
PR-S-04 消息模板 02-物业公司 §9 / 03-物业公司 §9.3 模板→微信推送消息 通知机制
PR-S-05 数据补录审核 02-物业公司 §9 审核→补录数据生效 巡检/保洁/考勤补录

业务规则

  1. Beacon心跳检测每5分钟上报心跳超过15分钟标记OFFLINE来源06 §5.4
  2. Beacon电量预警:电量<20%时系统内通知预警来源06 §5.4 / 05 §5.2
  3. 字典租户隔离字典数据仅对本物业公司租户可见来源03-物业公司 §9.2
  4. 蓝牙策略审核物业公司提交配置→医院账号审核通过后生效审核拒绝则维持原配置来源06 §4.4
  5. 蓝牙打卡判定不判断距离只要成功连接蓝牙设备即可打卡RSSI > -70dBm来源06 §5.4
  6. 消息模板变量支持自定义模板变量工单号、人员姓名、时间等来源03-物业公司 §9.3