|
|
# 统计报表
|
|
|
|
|
|
> 模块编码：statistics
|
|
|
> 端侧：Web专属
|
|
|
> 关联文档：01-模块划分 §3.7 / 02-功能清单-物业公司 §7 / 03-业务流转逻辑-物业公司 §7 / 05-接口规范 §9.2
|
|
|
> 强制规范遵循 `07-前端界面开发规范.md`
|
|
|
|
|
|
## 功能概览
|
|
|
|
|
|
| 项目 | 说明 |
|
|
|
|------|------|
|
|
|
| 菜单名称 | 统计报表 |
|
|
|
| 子菜单 | 报修统计、巡检统计、保洁统计、评价统计、考勤统计、综合看板、自定义报表 |
|
|
|
| 功能编号 | PR-ST-01 ~ PR-ST-07 |
|
|
|
| 权限编码前缀 | statistics:repair:* / statistics:inspection:* / statistics:cleaning:* / statistics:evaluation:* / statistics:attendance:* / statistics:dashboard:* / statistics:custom:* |
|
|
|
|
|
|
---
|
|
|
|
|
|
## 页面1：报修统计页
|
|
|
|
|
|
**页面编号**：PR-ST-01-P01
|
|
|
**端侧归属**：Web专属
|
|
|
**页面路径**：/statistics/repair
|
|
|
|
|
|
### 界面布局
|
|
|
|
|
|
```
|
|
|
┌──────────────────────────────────────────────────────────────────┐
|
|
|
│ [面包屑] 统计报表 > 报修统计 │
|
|
|
├──────────────────────────────────────────────────────────────────┤
|
|
|
│ [时间选择] 今天 / 本周 / 本月 / 本年 / 自定义 [起始]~[结束] │
|
|
|
│ [筛选] 班组[▼] 区域[▼] 紧急程度[▼] │
|
|
|
├──────────────────────────────────────────────────────────────────┤
|
|
|
│ [统计卡片区] │
|
|
|
│ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │
|
|
|
│ │总工单│ │待分配│ │处理中│ │已完成│ │已关闭│ │完成率│ │
|
|
|
│ │ 156 │ │ 12 │ │ 23 │ │ 108 │ │ 13 │ │ 69% │ │
|
|
|
│ └──────┘ └──────┘ └──────┘ └──────┘ └──────┘ └──────┘ │
|
|
|
├──────────────────────────────────────────────────────────────────┤
|
|
|
│ [图表区] │
|
|
|
│ ┌─────────────────────────┐ ┌─────────────────────────┐ │
|
|
|
│ │ 工单趋势（折线图） │ │ 类型分布（饼图） │ │
|
|
|
│ └─────────────────────────┘ └─────────────────────────┘ │
|
|
|
│ ┌─────────────────────────┐ │
|
|
|
│ │ 班组工单量排名（柱状图） │ │
|
|
|
│ └─────────────────────────┘ │
|
|
|
├──────────────────────────────────────────────────────────────────┤
|
|
|
│ [数据表格] │
|
|
|
│ 班组 | 总工单 | 已完成 | 完成率 | 平均处理时长 | 评分 │
|
|
|
│ 水电班 | 56 | 42 | 75% | 4.2小时 | 4.3 │
|
|
|
│ 木工班 | 32 | 28 | 87% | 3.8小时 | 4.5 │
|
|
|
├──────────────────────────────────────────────────────────────────┤
|
|
|
│ [操作] [导出Excel] [导出PDF] │
|
|
|
└──────────────────────────────────────────────────────────────────┘
|
|
|
```
|
|
|
|
|
|
### 操作按钮
|
|
|
|
|
|
| 按钮 | 权限编码 | 位置 | 显示条件 | 说明 |
|
|
|
|------|----------|------|----------|------|
|
|
|
| 导出Excel | statistics:repair:export | 操作栏 | 始终 | — |
|
|
|
| 导出PDF | statistics:repair:export | 操作栏 | 始终 | — |
|
|
|
|
|
|
### API端点
|
|
|
|
|
|
| 页面操作 | API路径 | 方法 | 说明 |
|
|
|
|----------|---------|------|------|
|
|
|
| 统计数据 | /api/v1/statistics/repair | GET | 含卡片+图表+表格 |
|
|
|
| 导出 | /api/v1/statistics/repair/export | GET | 支持Excel/PDF |
|
|
|
|
|
|
### 交互流程要求
|
|
|
|
|
|
1. **页面加载流程**：页面加载时默认查询"本月"时间范围的报修统计数据，依次渲染统计卡片区→图表区→数据表格，加载期间各区域显示骨架屏（Skeleton），全部数据加载完成后隐藏骨架屏
|
|
|
2. **查询/筛选交互流程**：用户点击快捷时间按钮（今天/本周/本月/本年）立即切换并重新请求；选择"自定义"时弹出el-date-picker日期范围选择器，确认后触发查询；班组、区域、紧急程度下拉筛选变更后自动触发查询，多个筛选条件组合生效
|
|
|
3. **表单填写与提交流程**：本页面无表单提交，仅筛选查询；导出操作点击后弹出确认弹窗选择导出格式（Excel/PDF），确认后触发下载
|
|
|
4. **弹窗/抽屉交互流程**：导出格式选择弹窗居中展示，宽度400px；点击弹窗外部或按ESC键关闭弹窗，不触发导出
|
|
|
5. **行内操作流程**：数据表格行暂无行内操作，鼠标悬停行高亮背景色
|
|
|
6. **异常与错误处理**：接口请求失败时页面顶部显示el-notification错误提示"数据加载失败，请稍后重试"；无数据时图表区显示空状态插图+提示文字"暂无统计数据"；导出失败时弹窗提示"导出失败，请重试"
|
|
|
7. **联动/级联交互**：时间范围变更后统计卡片、图表、表格三区联动刷新；筛选条件变更后同样全区域联动
|
|
|
8. **权限控制交互表现**：无`statistics:repair:export`权限时，导出Excel和导出PDF按钮隐藏；无`statistics:repair:view`权限时页面显示403提示
|
|
|
9. **H1 防重复请求(强制)**：快捷时间按钮/筛选条件变更时按钮组disabled+loading态；导出按钮点击后disabled+loading直到下载完成；筛选变更触发查询时abort前一次未完成请求；统计卡片与图表区并发请求互不阻塞
|
|
|
10. **H2 超时配置(强制)**：统计数据GET请求设置30s超时（统计档）；导出操作GET请求设置60s超时（上传导出档）；任何请求耗时>3s时展示全局ElLoading
|
|
|
11. **H6 批量限制(建议)**：数据表格行数超过500条时提示"数据量过大，建议缩小时间范围后查看或导出"；单次导出上限500条记录
|
|
|
12. **H8 反馈规范(建议)**：数据加载完成后各区域正常渲染无额外成功提示；导出成功ElMessage.success 2秒自动消失；加载失败区域显示"点击重试"及重试按钮；网络异常提供全局重试入口
|
|
|
|
|
|
### 组件规范
|
|
|
|
|
|
| 元素 | 组件 | 配置参数 |
|
|
|
|------|------|----------|
|
|
|
| 时间快捷按钮 | el-radio-group + el-radio-button | v-model="timeRange", size="default" |
|
|
|
| 自定义日期范围 | el-date-picker | type="daterange", value-format="YYYY-MM-DD", range-separator="至" |
|
|
|
| 班组筛选 | el-select | v-model="filters.team", clearable, placeholder="选择班组" |
|
|
|
| 区域筛选 | el-select | v-model="filters.area", clearable, placeholder="选择区域" |
|
|
|
| 紧急程度筛选 | el-select | v-model="filters.urgency", clearable, placeholder="选择紧急程度" |
|
|
|
| 统计卡片 | el-card | shadow="hover", body-style="{padding: '20px'}" |
|
|
|
| 工单趋势图 | echarts (折线图) | smooth=true, tooltip.trigger="axis", grid.containLabel=true |
|
|
|
| 类型分布图 | echarts (饼图) | roseType="radius", tooltip.trigger="item" |
|
|
|
| 班组工单排名 | echarts (柱状图) | tooltip.trigger="axis", series.type="bar" |
|
|
|
| 数据表格 | el-table | stripe, border, size="default", :data="tableData" |
|
|
|
| 导出Excel按钮 | el-button | type="success", icon="Download", :loading="exportLoading" |
|
|
|
| 导出PDF按钮 | el-button | type="danger", icon="Document", :loading="exportLoading" |
|
|
|
| 导出格式弹窗 | el-dialog | title="选择导出格式", width="400px", :close-on-click-modal="false" |
|
|
|
|
|
|
### 校验规则
|
|
|
|
|
|
| 字段 | 规则 | 错误提示 |
|
|
|
|------|------|----------|
|
|
|
| 自定义日期范围-起始日期 | 必须早于或等于结束日期 | 开始日期不能晚于结束日期 |
|
|
|
| 自定义日期范围-结束日期 | 必须晚于或等于起始日期 | 结束日期不能早于开始日期 |
|
|
|
| 自定义日期范围-跨度 | 时间跨度不超过1年 | 查询时间范围不能超过1年 |
|
|
|
|
|
|
### 响应式布局
|
|
|
|
|
|
| 断点 | 布局调整 |
|
|
|
|------|----------|
|
|
|
| ≥1280px（桌面端） | 统计卡片6列横排；图表区2列布局（趋势图+饼图），下方柱状图全宽；表格全宽展示 |
|
|
|
| 1024-1279px（Pad横屏） | 统计卡片3列×2行排列；图表区改为单列堆叠，ECharts图表宽度100%，高度自适应最小350px；表格列宽自适应 |
|
|
|
| 768-1023px（Pad竖屏） | 统计卡片2列×3行排列；图表区单列堆叠，ECharts图表宽度100%，高度最小300px，饼图改为环形图节省空间；表格启用横向滚动；筛选条件区折叠为展开/收起模式 |
|
|
|
|
|
|
---
|
|
|
|
|
|
## 页面2：巡检统计页
|
|
|
|
|
|
**页面编号**：PR-ST-02-P01
|
|
|
**端侧归属**：Web专属
|
|
|
**页面路径**：/statistics/inspection
|
|
|
|
|
|
### 统计指标
|
|
|
|
|
|
| 指标 | 说明 |
|
|
|
|------|------|
|
|
|
| 总巡检任务数 | 统计时间段内任务总数 |
|
|
|
| 完成率 | 已完成/总数 |
|
|
|
| 异常率 | 有异常记录数/已完成数 |
|
|
|
| 补录率 | 补录记录数/总记录数 |
|
|
|
| 蓝牙打卡率 | 蓝牙打卡数/总打卡数 |
|
|
|
|
|
|
### 操作按钮
|
|
|
|
|
|
| 按钮 | 权限编码 | 位置 | 显示条件 | 说明 |
|
|
|
|------|----------|------|----------|------|
|
|
|
| 导出 | statistics:inspection:export | 操作栏 | 始终 | — |
|
|
|
|
|
|
### 交互流程要求
|
|
|
|
|
|
1. **页面加载流程**：页面加载时默认查询"本月"巡检统计数据，统计卡片区与图表区并发请求，渲染顺序：统计卡片→趋势折线图→异常率分布饼图→数据表格，加载中显示骨架屏
|
|
|
2. **查询/筛选交互流程**：时间快捷按钮（今天/本周/本月/本年）点击即刷新；自定义日期范围确认后触发；班组、区域筛选变更自动刷新；补录数据"包含/排除"切换后立即重新查询
|
|
|
3. **表单填写与提交流程**：无表单提交；导出操作点击后直接触发文件下载，按钮显示loading状态直到下载完成
|
|
|
4. **弹窗/抽屉交互流程**：本页面无弹窗交互
|
|
|
5. **行内操作流程**：数据表格行无行内操作，悬停高亮
|
|
|
6. **异常与错误处理**：数据加载失败显示el-notification错误提示；无数据时展示空状态插图；导出失败提示"导出失败，请重试"
|
|
|
7. **联动/级联交互**：时间范围或筛选条件变更后统计卡片、图表、表格全区域联动刷新
|
|
|
8. **权限控制交互表现**：无`statistics:inspection:export`权限时导出按钮隐藏
|
|
|
9. **H1 防重复请求(强制)**：快捷时间按钮/筛选条件变更时立即disabled+loading；导出按钮点击后disabled+loading直到下载完成；查询触发时abort前一次未完成请求；卡片与图表区并发请求互不阻塞
|
|
|
10. **H2 超时配置(强制)**：统计数据GET请求设置30s超时（统计档）；导出操作设置60s超时（上传导出档）；>3s展示全局ElLoading
|
|
|
11. **H6 批量限制(建议)**：单次导出上限500条记录，超出时提示"数据量过大，请缩小筛选范围"
|
|
|
12. **H8 反馈规范(建议)**：加载完成正常渲染无额外提示；导出成功ElMessage.success 2秒自动消失；加载失败区域提供"点击重试"按钮；网络异常提供重试
|
|
|
|
|
|
### 组件规范
|
|
|
|
|
|
| 元素 | 组件 | 配置参数 |
|
|
|
|------|------|----------|
|
|
|
| 时间快捷按钮 | el-radio-group + el-radio-button | v-model="timeRange", size="default" |
|
|
|
| 自定义日期范围 | el-date-picker | type="daterange", value-format="YYYY-MM-DD" |
|
|
|
| 班组筛选 | el-select | v-model="filters.team", clearable |
|
|
|
| 区域筛选 | el-select | v-model="filters.area", clearable |
|
|
|
| 补录数据筛选 | el-switch | v-model="filters.includeSupplement", active-text="包含", inactive-text="排除" |
|
|
|
| 统计卡片 | el-card | shadow="hover", body-style="{padding: '20px'}" |
|
|
|
| 完成率趋势图 | echarts (折线图) | smooth=true, tooltip.trigger="axis" |
|
|
|
| 异常率分布图 | echarts (饼图) | tooltip.trigger="item" |
|
|
|
| 数据表格 | el-table | stripe, border, size="default" |
|
|
|
| 导出按钮 | el-button | type="success", icon="Download", :loading="exportLoading" |
|
|
|
|
|
|
### 校验规则
|
|
|
|
|
|
| 字段 | 规则 | 错误提示 |
|
|
|
|------|------|----------|
|
|
|
| 自定义日期范围-起始日期 | 必须早于或等于结束日期 | 开始日期不能晚于结束日期 |
|
|
|
| 自定义日期范围-跨度 | 时间跨度不超过1年 | 查询时间范围不能超过1年 |
|
|
|
|
|
|
### 响应式布局
|
|
|
|
|
|
| 断点 | 布局调整 |
|
|
|
|------|----------|
|
|
|
| ≥1280px（桌面端） | 统计卡片5列横排；图表区2列布局（趋势图+饼图），下方表格全宽 |
|
|
|
| 1024-1279px（Pad横屏） | 统计卡片3列+2列排列；图表区单列堆叠，ECharts图表宽度100%，高度最小350px；表格列宽自适应 |
|
|
|
| 768-1023px（Pad竖屏） | 统计卡片2列+3列排列；图表区单列堆叠，ECharts图表宽度100%，高度最小300px；表格启用横向滚动；筛选区折叠 |
|
|
|
|
|
|
---
|
|
|
|
|
|
## 页面3：保洁统计页
|
|
|
|
|
|
**页面编号**：PR-ST-03-P01
|
|
|
**端侧归属**：Web专属
|
|
|
**页面路径**：/statistics/cleaning
|
|
|
|
|
|
### 统计指标
|
|
|
|
|
|
| 指标 | 说明 |
|
|
|
|------|------|
|
|
|
| 总保洁任务数 | — |
|
|
|
| 完成率 | — |
|
|
|
| 超时率 | 超时任务数/总数 |
|
|
|
| 抽查合格率 | 抽查合格数/抽查总数 |
|
|
|
| 补录率 | — |
|
|
|
|
|
|
### 交互流程要求
|
|
|
|
|
|
1. **页面加载流程**：进入页面 → 默认查询"本月"时间范围 → 调用保洁统计API → 渲染统计卡片区（总任务数/完成率/超时率/抽查合格率/补录率）→ 图表区（趋势图+分布图）→ 数据表格
|
|
|
2. **查询/筛选交互流程**：点击快捷时间按钮立即切换并重新请求；选择自定义日期范围确认后触发查询；班组/区域筛选变更后自动触发查询
|
|
|
3. **表单填写与提交流程**：无表单提交；导出操作点击后触发下载
|
|
|
4. **弹窗/抽屉交互流程**：本页面无弹窗交互
|
|
|
5. **行内操作流程**：数据表格行无行内操作，悬停高亮；超时率列红色标记
|
|
|
6. **异常与错误处理**：数据加载失败显示el-notification错误提示；无数据时展示空状态插图；导出失败提示"导出失败，请重试"
|
|
|
7. **联动/级联交互**：时间范围或筛选条件变更后全区域联动刷新
|
|
|
8. **权限控制交互表现**：无 statistics:cleaning:export 权限时导出按钮隐藏
|
|
|
|
|
|
### 组件规范
|
|
|
|
|
|
| 元素 | 组件 | 配置参数 |
|
|
|
|------|------|----------|
|
|
|
| 时间快捷按钮 | el-radio-group + el-radio-button | v-model="timeRange" |
|
|
|
| 自定义日期范围 | el-date-picker | type="daterange", value-format="YYYY-MM-DD" |
|
|
|
| 班组筛选 | el-select | clearable, placeholder="选择班组" |
|
|
|
| 区域筛选 | el-select | clearable, placeholder="选择区域" |
|
|
|
| 统计卡片 | el-card | shadow="hover", body-style="{padding:'20px'}" |
|
|
|
| 超时率趋势图 | echarts (折线图) | smooth=true, tooltip.trigger="axis" |
|
|
|
| 任务状态分布图 | echarts (饼图) | tooltip.trigger="item" |
|
|
|
| 数据表格 | el-table | stripe, border |
|
|
|
| 导出按钮 | el-button | type="success", icon="Download", :loading="exportLoading" |
|
|
|
|
|
|
### 校验规则
|
|
|
|
|
|
| 字段 | 规则 | 错误提示 |
|
|
|
|------|------|----------|
|
|
|
| 自定义日期范围-起始日期 | 必须早于或等于结束日期 | "开始日期不能晚于结束日期" |
|
|
|
| 自定义日期范围-跨度 | 时间跨度不超过1年 | "查询时间范围不能超过1年" |
|
|
|
|
|
|
### 响应式布局
|
|
|
|
|
|
| 断点 | 布局调整 |
|
|
|
|------|----------|
|
|
|
| ≥1280px（桌面端） | 统计卡片5列横排；图表区2列布局；表格全宽展示 |
|
|
|
| 1024-1279px（Pad横屏） | 统计卡片3列+2列排列；图表区单列堆叠；表格列宽自适应 |
|
|
|
| 768-1023px（Pad竖屏） | 统计卡片2列+3列排列；图表区单列堆叠，高度最小300px；表格启用横向滚动；筛选区折叠 |
|
|
|
|
|
|
---
|
|
|
|
|
|
## 页面4：评价统计页
|
|
|
|
|
|
**页面编号**：PR-ST-04-P01
|
|
|
**端侧归属**：Web专属
|
|
|
**页面路径**：/statistics/evaluation
|
|
|
|
|
|
### 统计指标
|
|
|
|
|
|
| 指标 | 说明 |
|
|
|
|------|------|
|
|
|
| 总评价数 | — |
|
|
|
| 平均评分 | — |
|
|
|
| 各模块评分对比 | 报修/巡检/保洁/综合 |
|
|
|
| 低评分占比 | ≤2分评价占比 |
|
|
|
| 回复率 | 已回复/总评价数 |
|
|
|
|
|
|
### 交互流程要求
|
|
|
|
|
|
1. **页面加载流程**：进入页面 → 默认查询"本月"时间范围 → 调用评价统计API → 渲染统计卡片区（总评价数/平均评分/低评分占比/回复率）→ 图表区（各模块评分对比柱状图+星级分布饼图+评分趋势折线图）→ 数据表格
|
|
|
2. **查询/筛选交互流程**：点击快捷时间按钮立即切换；自定义日期范围确认后触发；班组筛选变更后自动触发查询
|
|
|
3. **表单填写与提交流程**：无表单提交；导出操作点击后触发下载
|
|
|
4. **弹窗/抽屉交互流程**：本页面无弹窗交互
|
|
|
5. **行内操作流程**：数据表格行无行内操作，悬停高亮；低分占比列红色标记
|
|
|
6. **异常与错误处理**：数据加载失败显示el-notification错误提示；无数据时展示空状态插图；导出失败提示"导出失败，请重试"
|
|
|
7. **联动/级联交互**：时间范围或筛选条件变更后全区域联动刷新
|
|
|
8. **权限控制交互表现**：无 statistics:evaluation:export 权限时导出按钮隐藏
|
|
|
9. **H1 防重复请求(强制)**：快捷时间/筛选变更时disabled+loading态；导出按钮点击后disabled+loading；查询变更时abort前次未完成请求；各区域并发请求互不阻塞
|
|
|
10. **H2 超时配置(强制)**：统计GET请求30s超时（统计档），导出60s超时（上传导出档）；>3s展示全局ElLoading
|
|
|
11. **H6 批量限制(建议)**：单次导出上限500条，超出提示缩小范围
|
|
|
12. **H8 反馈规范(建议)**：正常渲染无额外提示；导出成功2秒自动消失；加载失败区域可重试；网络异常提供重试按钮
|
|
|
|
|
|
### 组件规范
|
|
|
|
|
|
| 元素 | 组件 | 配置参数 |
|
|
|
|------|------|----------|
|
|
|
| 时间快捷按钮 | el-radio-group + el-radio-button | v-model="timeRange" |
|
|
|
| 自定义日期范围 | el-date-picker | type="daterange", value-format="YYYY-MM-DD" |
|
|
|
| 班组筛选 | el-select | clearable, placeholder="选择班组" |
|
|
|
| 统计卡片 | el-card | shadow="hover", body-style="{padding:'20px'}" |
|
|
|
| 各模块评分对比 | echarts (柱状图) | tooltip.trigger="axis", series.type="bar" |
|
|
|
| 星级分布图 | echarts (饼图) | tooltip.trigger="item", radius=["40%","70%"] |
|
|
|
| 评分趋势图 | echarts (折线图) | smooth=true, tooltip.trigger="axis" |
|
|
|
| 数据表格 | el-table | stripe, border |
|
|
|
| 导出按钮 | el-button | type="success", icon="Download", :loading="exportLoading" |
|
|
|
|
|
|
### 校验规则
|
|
|
|
|
|
| 字段 | 规则 | 错误提示 |
|
|
|
|------|------|----------|
|
|
|
| 自定义日期范围-起始日期 | 必须早于或等于结束日期 | "开始日期不能晚于结束日期" |
|
|
|
| 自定义日期范围-跨度 | 时间跨度不超过1年 | "查询时间范围不能超过1年" |
|
|
|
|
|
|
### 响应式布局
|
|
|
|
|
|
| 断点 | 布局调整 |
|
|
|
|------|----------|
|
|
|
| ≥1280px（桌面端） | 统计卡片5列横排；图表区2列+1列布局；表格全宽展示 |
|
|
|
| 1024-1279px（Pad横屏） | 统计卡片3列+2列排列；图表区单列堆叠；表格列宽自适应 |
|
|
|
| 768-1023px（Pad竖屏） | 统计卡片2列+3列排列；图表区单列堆叠，高度最小300px；表格启用横向滚动；筛选区折叠 |
|
|
|
|
|
|
---
|
|
|
|
|
|
## 页面5：考勤统计页
|
|
|
|
|
|
**页面编号**：PR-ST-05-P01
|
|
|
**端侧归属**：Web专属
|
|
|
**页面路径**：/statistics/attendance
|
|
|
|
|
|
### 统计指标
|
|
|
|
|
|
| 指标 | 说明 |
|
|
|
|------|------|
|
|
|
| 出勤率 | 实际打卡人数/应打卡人数 |
|
|
|
| 迟到率 | 迟到人数/实际打卡人数 |
|
|
|
| 早退率 | — |
|
|
|
| 异常申诉率 | 申诉数/总打卡次数 |
|
|
|
| 蓝牙打卡率 | 蓝牙打卡数/总打卡数 |
|
|
|
|
|
|
### 交互流程要求
|
|
|
|
|
|
1. **页面加载流程**：进入页面 → 默认查询"本月"时间范围 → 调用考勤统计API → 渲染统计卡片区（出勤率/迟到率/早退率/异常申诉率/蓝牙打卡率）→ 图表区（出勤率趋势折线图+迟到早退分布图）→ 数据表格
|
|
|
2. **查询/筛选交互流程**：点击快捷时间按钮立即切换；自定义日期范围确认后触发查询；班组筛选变更后自动触发查询
|
|
|
3. **表单填写与提交流程**：无表单提交；导出操作点击后触发下载
|
|
|
4. **弹窗/抽屉交互流程**：本页面无弹窗交互
|
|
|
5. **行内操作流程**：数据表格行无行内操作，悬停高亮；迟到率/早退率列橙色标记
|
|
|
6. **异常与错误处理**：数据加载失败显示el-notification错误提示；无数据时展示空状态插图；导出失败提示"导出失败，请重试"
|
|
|
7. **联动/级联交互**：时间范围或筛选条件变更后全区域联动刷新
|
|
|
8. **权限控制交互表现**：无 statistics:attendance:export 权限时导出按钮隐藏
|
|
|
9. **H1 防重复请求(强制)**：快捷时间/筛选变更时disabled+loading态；导出按钮点击后disabled+loading；查询变更时abort前次未完成请求；各区域并发请求互不阻塞
|
|
|
10. **H2 超时配置(强制)**：统计GET请求30s超时（统计档），导出60s超时（上传导出档）；>3s展示全局ElLoading
|
|
|
11. **H6 批量限制(建议)**：单次导出上限500条，超出提示缩小范围
|
|
|
12. **H8 反馈规范(建议)**：正常渲染无额外提示；导出成功2秒自动消失；加载失败区域可重试；网络异常提供重试按钮
|
|
|
|
|
|
### 组件规范
|
|
|
|
|
|
| 元素 | 组件 | 配置参数 |
|
|
|
|------|------|----------|
|
|
|
| 时间快捷按钮 | el-radio-group + el-radio-button | v-model="timeRange" |
|
|
|
| 自定义日期范围 | el-date-picker | type="daterange", value-format="YYYY-MM-DD" |
|
|
|
| 班组筛选 | el-select | clearable, placeholder="选择班组" |
|
|
|
| 统计卡片 | el-card | shadow="hover", body-style="{padding:'20px'}" |
|
|
|
| 出勤率趋势图 | echarts (折线图) | smooth=true, tooltip.trigger="axis" |
|
|
|
| 迟到早退分布图 | echarts (柱状图) | tooltip.trigger="axis", series.type="bar" |
|
|
|
| 数据表格 | el-table | stripe, border |
|
|
|
| 导出按钮 | el-button | type="success", icon="Download", :loading="exportLoading" |
|
|
|
|
|
|
### 校验规则
|
|
|
|
|
|
| 字段 | 规则 | 错误提示 |
|
|
|
|------|------|----------|
|
|
|
| 自定义日期范围-起始日期 | 必须早于或等于结束日期 | "开始日期不能晚于结束日期" |
|
|
|
| 自定义日期范围-跨度 | 时间跨度不超过1年 | "查询时间范围不能超过1年" |
|
|
|
|
|
|
### 响应式布局
|
|
|
|
|
|
| 断点 | 布局调整 |
|
|
|
|------|----------|
|
|
|
| ≥1280px（桌面端） | 统计卡片5列横排；图表区2列布局；表格全宽展示 |
|
|
|
| 1024-1279px（Pad横屏） | 统计卡片3列+2列排列；图表区单列堆叠；表格列宽自适应 |
|
|
|
| 768-1023px（Pad竖屏） | 统计卡片2列+3列排列；图表区单列堆叠，高度最小300px；表格启用横向滚动；筛选区折叠 |
|
|
|
|
|
|
---
|
|
|
|
|
|
## 页面6：综合看板页
|
|
|
|
|
|
**页面编号**：PR-ST-06-P01
|
|
|
**端侧归属**：Web专属
|
|
|
**页面路径**：/statistics/dashboard
|
|
|
|
|
|
### 界面布局
|
|
|
|
|
|
```
|
|
|
┌──────────────────────────────────────────────────────────────────┐
|
|
|
│ [面包屑] 统计报表 > 综合看板 │
|
|
|
├──────────────────────────────────────────────────────────────────┤
|
|
|
│ [时间选择] 今天 / 本周 / 本月 / 自定义 │
|
|
|
├──────────────────────────────────────────────────────────────────┤
|
|
|
│ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │
|
|
|
│ │报修 │ │巡检 │ │保洁 │ │考勤 │ │
|
|
|
│ │完成率│ │完成率│ │完成率│ │出勤率│ │
|
|
|
│ │ 69% │ │ 92% │ │ 85% │ │ 96% │ │
|
|
|
│ └──────┘ └──────┘ └──────┘ └──────┘ │
|
|
|
│ ┌──────┐ ┌──────┐ │
|
|
|
│ │评价 │ │待处理│ │
|
|
|
│ │均分 │ │工单 │ │
|
|
|
│ │ 4.2 │ │ 12 │ │
|
|
|
│ └──────┘ └──────┘ │
|
|
|
├──────────────────────────────────────────────────────────────────┤
|
|
|
│ [趋势图] 各模块指标趋势对比 │
|
|
|
└──────────────────────────────────────────────────────────────────┘
|
|
|
```
|
|
|
|
|
|
### 交互流程要求
|
|
|
|
|
|
1. **页面加载流程**：进入页面 → 默认查询"本月"时间范围 → 并行调用各模块汇总API → 渲染6个统计卡片（报修完成率/巡检完成率/保洁完成率/考勤出勤率/评价均分/待处理工单）→ 趋势图（各模块指标趋势对比折线图）
|
|
|
2. **查询/筛选交互流程**：点击快捷时间按钮（今天/本周/本月/自定义）→ 立即切换并重新请求所有数据；自定义日期范围确认后触发查询
|
|
|
3. **表单填写与提交流程**：本页无表单提交
|
|
|
4. **弹窗/抽屉交互流程**：点击统计卡片 → 跳转到对应模块的统计详情页
|
|
|
5. **行内操作流程**：点击卡片底部"查看详情"链接 → 跳转对应模块统计页
|
|
|
6. **异常与错误处理**：各卡片数据独立加载，某模块加载失败仅该卡片显示"加载失败"；趋势图加载失败显示"加载失败，点击重试"；全部加载失败显示整页错误提示
|
|
|
7. **联动/级联交互**：时间范围变更后所有卡片和趋势图联动刷新
|
|
|
8. **权限控制交互表现**：无某模块统计查看权限时对应卡片显示"无权限查看"
|
|
|
9. **H1 防重复请求(强制)**：快捷时间切换/自定义日期确认后立即disabled+loading态；时间变更触发全量刷新时abort前一次所有未完成并行请求；各模块API独立并发加载，单模块失败不阻塞其他模块渲染
|
|
|
10. **H2 超时配置(强制)**：各模块汇总GET请求设置30s超时（统计档）；>3s时对尚未返回的卡片区域展示局部ElLoading；全部超时时显示全局重试入口
|
|
|
11. **H8 反馈规范(建议)**：各卡片数据正常加载完成后直接渲染数值和趋势箭头，无需额外成功提示；单卡片加载失败显示"点击重试"；趋势图加载失败显示"加载失败，点击重试"及重试按钮；网络异常时提供全局重试入口
|
|
|
|
|
|
### 组件规范
|
|
|
|
|
|
| 元素 | 组件 | 配置参数 |
|
|
|
|------|------|----------|
|
|
|
| 时间快捷按钮 | el-radio-group + el-radio-button | v-model="timeRange" |
|
|
|
| 自定义日期范围 | el-date-picker | type="daterange", value-format="YYYY-MM-DD" |
|
|
|
| 统计卡片 | el-card | shadow="hover", body-style="{padding:'20px'}", @click="goDetail" |
|
|
|
| 卡片数值 | 自定义组件 | 大字号数字+趋势箭头(↑↓)+百分比变化 |
|
|
|
| 趋势图 | echarts (多折线图) | 多条折线对比各模块，smooth=true, tooltip.trigger="axis", legend.data=[报修,巡检,保洁,考勤,评价] |
|
|
|
| 查看详情链接 | el-link | type="primary", :underline="false" |
|
|
|
|
|
|
### 校验规则
|
|
|
|
|
|
| 字段 | 规则 | 错误提示 |
|
|
|
|------|------|----------|
|
|
|
| 自定义日期范围-起始日期 | 必须早于或等于结束日期 | "开始日期不能晚于结束日期" |
|
|
|
| 自定义日期范围-跨度 | 时间跨度不超过1年 | "查询时间范围不能超过1年" |
|
|
|
|
|
|
### 响应式布局
|
|
|
|
|
|
| 断点 | 布局调整 |
|
|
|
|------|----------|
|
|
|
| ≥1280px（桌面端） | 统计卡片3列×2行排列；趋势图全宽展示 |
|
|
|
| 1024-1279px（Pad横屏） | 统计卡片3列×2行排列，卡片字号略减；趋势图全宽展示 |
|
|
|
| 768-1023px（Pad竖屏） | 统计卡片2列×3行排列；趋势图全宽展示，高度最小300px；时间选择区折叠为下拉 |
|
|
|
|
|
|
---
|
|
|
|
|
|
## 页面7：自定义报表页
|
|
|
|
|
|
**页面编号**：PR-ST-07-P01
|
|
|
**端侧归属**：Web专属
|
|
|
**页面路径**：/statistics/custom
|
|
|
|
|
|
### 界面布局
|
|
|
|
|
|
```
|
|
|
┌──────────────────────────────────────────────────────────────────┐
|
|
|
│ [面包屑] 统计报表 > 自定义报表 │
|
|
|
├──────────────────────────────────────────────────────────────────┤
|
|
|
│ [配置区] │
|
|
|
│ 数据源：[▼多选] (报修/巡检/保洁/评价/考勤) │
|
|
|
│ 维度：[▼多选] (时间/班组/区域/人员/类型) │
|
|
|
│ 指标：[▼多选] (数量/完成率/平均时长/评分...) │
|
|
|
│ 时间范围：[起始]~[结束] │
|
|
|
│ 筛选条件：[动态添加] │
|
|
|
├──────────────────────────────────────────────────────────────────┤
|
|
|
│ [操作] [生成报表] [保存模板] [导出] │
|
|
|
├──────────────────────────────────────────────────────────────────┤
|
|
|
│ [结果展示区] │
|
|
|
│ 图表 + 数据表格 │
|
|
|
└──────────────────────────────────────────────────────────────────┘
|
|
|
```
|
|
|
|
|
|
### 操作按钮
|
|
|
|
|
|
| 按钮 | 权限编码 | 位置 | 显示条件 | 说明 |
|
|
|
|------|----------|------|----------|------|
|
|
|
| 生成报表 | statistics:custom:view | 操作栏 | 始终 | — |
|
|
|
| 保存模板 | statistics:custom:create | 操作栏 | 始终 | 保存当前配置为模板 |
|
|
|
| 导出 | statistics:custom:export | 操作栏 | 已生成报表 | — |
|
|
|
|
|
|
### API端点
|
|
|
|
|
|
| 页面操作 | API路径 | 方法 | 说明 |
|
|
|
|----------|---------|------|------|
|
|
|
| 生成报表 | /api/v1/statistics/custom | POST | 自定义维度+指标 |
|
|
|
| 保存模板 | /api/v1/statistics/custom/templates | POST | — |
|
|
|
| 导出 | /api/v1/statistics/custom/export | GET | — |
|
|
|
|
|
|
### 交互流程要求
|
|
|
|
|
|
1. **页面加载流程**：进入页面 → 加载配置区下拉选项（数据源/维度/指标列表）；若存在已保存的模板，在配置区下方展示"最近使用模板"快捷入口
|
|
|
2. **查询/筛选交互流程**：选择数据源、维度、指标、时间范围、添加筛选条件 → 点击[生成报表] → 调用自定义报表API POST /api/v1/statistics/custom → 渲染结果展示区（图表+数据表格）
|
|
|
3. **表单填写与提交流程**：配置报表参数 → 点击[生成报表] → 加载中显示骨架屏 → 渲染结果；点击[保存模板] → 弹窗输入模板名称 → 保存当前配置；点击[导出] → 触发下载
|
|
|
4. **弹窗/抽屉交互流程**：保存模板弹窗宽度420px，输入模板名称；点击遮罩层可关闭
|
|
|
5. **行内操作流程**：动态添加筛选条件行 → 选择字段+运算符+值 → 可删除已有条件行；生成报表后图表区可交互（缩放、筛选、下钻）
|
|
|
6. **异常与错误处理**：数据源和维度至少选一个，否则提示"请选择数据源和维度"；指标至少选一个，否则提示"请至少选择一个指标"；生成失败显示ElMessage.error；导出失败提示"导出失败，请重试"
|
|
|
7. **联动/级联交互**：数据源选择后联动可用维度和指标列表；维度选择后联动图表类型推荐；筛选条件中字段选择后联动运算符和值选项
|
|
|
8. **权限控制交互表现**：无 statistics:custom:view 权限时[生成报表]按钮隐藏；无 statistics:custom:create 权限时[保存模板]按钮隐藏；无 statistics:custom:export 权限时[导出]按钮隐藏
|
|
|
9. **H1 防重复请求(强制)**："生成报表"按钮点击后立即disabled+loading直到结果返回或超时；"保存模板""导出"按钮点击后disabled+loading防重复；筛选条件行动态添加/删除不影响已生成的报表结果
|
|
|
10. **H2 超时配置(强制)**：生成报表POST请求设置30s超时（统计档）；保存模板POST请求30s超时；导出GET请求60s超时（上传导出档）；>3s时展示全局ElLoading
|
|
|
11. **H6 批量限制(建议)**：导出操作上限500条记录，超出提示"数据量过大，请缩小维度范围后重新生成"
|
|
|
12. **H8 反馈规范(建议)**：生成报表成功后图表+表格正常渲染无额外成功提示；保存模板成功ElMessage.success("模板保存成功")2秒自动消失；导出成功2秒自动消失；校验错误/生成失败需手动关闭；网络异常提供重试按钮
|
|
|
|
|
|
### 组件规范
|
|
|
|
|
|
| 元素 | 组件 | 配置参数 |
|
|
|
|------|------|----------|
|
|
|
| 数据源选择 | el-select | v-model="config.dataSources", multiple, collapse-tags, placeholder="请选择数据源" |
|
|
|
| 维度选择 | el-select | v-model="config.dimensions", multiple, collapse-tags, placeholder="请选择维度" |
|
|
|
| 指标选择 | el-select | v-model="config.metrics", multiple, collapse-tags, placeholder="请选择指标" |
|
|
|
| 时间范围 | el-date-picker | type="daterange", value-format="YYYY-MM-DD", range-separator="至" |
|
|
|
| 筛选条件添加 | el-button | type="primary", link, icon="Plus", @click="addFilter" |
|
|
|
| 筛选条件行 | 自定义组件 | 字段el-select + 运算符el-select + 值el-input/el-select + 删除按钮 |
|
|
|
| 生成报表按钮 | el-button | type="primary", :loading="generating" |
|
|
|
| 保存模板按钮 | el-button | type="success" |
|
|
|
| 导出按钮 | el-button | type="success", icon="Download", :disabled="!hasResult" |
|
|
|
| 结果图表区 | echarts | 动态渲染，根据维度/指标配置图表类型 |
|
|
|
| 结果表格 | el-table | stripe, border, :data="resultData" |
|
|
|
| 保存模板弹窗 | el-dialog | title="保存模板", width="420px" |
|
|
|
| 模板名称 | el-input | maxlength=30, placeholder="请输入模板名称" |
|
|
|
|
|
|
### 校验规则
|
|
|
|
|
|
| 字段 | 规则 | 错误提示 |
|
|
|
|------|------|----------|
|
|
|
| 数据源 | 至少选1个 | "请选择数据源" |
|
|
|
| 维度 | 至少选1个 | "请选择维度" |
|
|
|
| 指标 | 至少选1个 | "请至少选择一个指标" |
|
|
|
| 时间范围 | 必选，跨度不超过1年 | "请选择时间范围" / "查询时间范围不能超过1年" |
|
|
|
| 模板名称 | 保存时必填，maxlength=30 | "请输入模板名称" |
|
|
|
|
|
|
### 响应式布局
|
|
|
|
|
|
| 断点 | 布局调整 |
|
|
|
|------|----------|
|
|
|
| ≥1280px（桌面端） | 配置区水平排列，结果区2列布局（图表+表格） |
|
|
|
| 1024-1279px（Pad横屏） | 配置区换行排列，结果区单列堆叠 |
|
|
|
| 768-1023px（Pad竖屏） | 配置区垂直堆叠，使用el-collapse折叠面板组织配置项；结果区单列堆叠；操作按钮full-width堆叠 |
|
|
|
|
|
|
---
|
|
|
|
|
|
## 需求追溯
|
|
|
|
|
|
| 功能点编号 | 功能名称 | 文档来源 | 后续服务 | 关联功能 |
|
|
|
|------------|----------|----------|----------|----------|
|
|
|
| PR-ST-01 | 报修统计 | 02-物业公司 §7 / 03-物业公司 §7 | — | 在线报修(数据源) |
|
|
|
| PR-ST-02 | 巡检统计 | 02-物业公司 §7 / 03-物业公司 §7 | — | 巡检管理(数据源) |
|
|
|
| PR-ST-03 | 保洁统计 | 02-物业公司 §7 / 03-物业公司 §7 | — | 保洁管理(数据源) |
|
|
|
| PR-ST-04 | 评价统计 | 02-物业公司 §7 / 03-物业公司 §7 | — | 服务评价(数据源) |
|
|
|
| PR-ST-05 | 考勤统计 | 02-物业公司 §7 / 03-物业公司 §7 | — | 考勤打卡(数据源) |
|
|
|
| PR-ST-06 | 综合看板 | 02-物业公司 §7 | — | 全部模块(数据源) |
|
|
|
| PR-ST-07 | 自定义报表 | 02-物业公司 §7 | — | 全部模块(数据源) |
|
|
|
|
|
|
## 业务规则
|
|
|
|
|
|
1. **时间维度**：支持天/周/月/年/自定义时间段查询（来源：02-物业公司 §7）
|
|
|
2. **导出格式**：支持Excel和PDF导出（来源：02-物业公司 §7）
|
|
|
3. **数据权限**：物业公司管理员看本公司绑定医院数据，主管看本班组数据（来源：01 §1.3）
|
|
|
4. **补录数据标记**：统计报表中补录数据单独标记，可筛选排除（来源：03-物业公司 §2.3）
|
|
|
5. **导出日志**：每次导出操作记录审计日志（来源：06 §4.5）
|