# 故事 011.005：数据统计功能实现

## 状态
Draft

## 故事
**作为**企业用户，
**我希望**查看企业残疾人就业的数据统计图表，
**以便**进行数据分析和决策支持。

## 验收标准

1. [ ] 数据统计页展示完整的统计图表集合
2. [ ] 残疾类型分布图表正确显示，数据准确
3. [ ] 性别分布、年龄分布、户籍省份分布图表功能正常
4. [ ] 支持数据筛选（时间范围、部门等）和图表交互
5. [ ] 页面设计符合原型标准，图表加载性能良好

## 任务 / 子任务

- [ ] 任务1：实现数据统计页面框架（AC：1）
  - [ ] 创建数据统计页面组件，使用基础布局组件
  - [ ] 设计图表布局（网格或选项卡布局）
  - [ ] 实现页面标题和筛选条件区域
  - [ ] 添加图表加载状态和错误提示
- [ ] 任务2：实现残疾类型分布图表（AC：2）
  - [ ] 集成数据统计API（史诗012提供）
  - [ ] 实现饼图或环形图展示残疾类型分布
  - [ ] 添加图例和百分比显示
  - [ ] 支持图表点击交互（查看详情）
  - [ ] 添加数据表格展示（可选）
- [ ] 任务3：实现人口统计图表组（AC：3）
  - [ ] 实现性别分布图表（饼图或柱状图）
  - [ ] 实现年龄分布图表（柱状图，按年龄段分组）
  - [ ] 实现户籍省份分布图表（地图或条形图）
  - [ ] 添加图表联动和筛选功能
  - [ ] 优化多图表同时加载的性能
- [ ] 任务4：实现数据筛选和交互功能（AC：4）
  - [ ] 添加时间范围筛选器（年、月、季度）
  - [ ] 添加部门/岗位筛选器（如有多部门）
  - [ ] 实现图表数据下钻功能（如点击省份查看城市分布）
  - [ ] 添加数据导出功能（图表图片、数据表格）
  - [ ] 实现图表类型切换（如柱状图/折线图切换）
- [ ] 任务5：优化性能和用户体验（AC：5）
  - [ ] 参考原型设计：`docs/小程序原型/yongren.html`中的数据统计页面
  - [ ] 实现图表懒加载和渐进式渲染
  - [ ] 添加图表数据缓存机制
  - [ ] 优化移动端图表显示和交互
  - [ ] 确保页面加载速度符合性能要求
- [ ] 任务6：编写集成测试
  - [ ] 编写图表数据加载测试
  - [ ] 测试数据筛选功能
  - [ ] 测试图表交互功能
  - [ ] 性能测试（大数据量图表渲染）

## 开发笔记

### 依赖关系
**依赖故事**：
- 011.001（基础框架搭建）：提供API客户端、路由、基础布局
- 011.002（认证与首页）：提供认证状态管理
- 011.003（人才管理）：统计基于人才数据
- 011.004（订单管理）：统计可能涉及订单数据

### API规范
**数据统计API**（史诗012提供）：
- 残疾类型统计接口
- 性别年龄统计接口
- 地域分布统计接口
- 时间趋势统计接口

**企业统计API**（史诗012提供）：
- 企业维度数据统计接口
- 实时数据更新接口

**技术集成**：
- 使用故事011.001集成的RPC客户端
- API路径前缀：`api/v1/yongren`

### 组件规范
**数据统计页设计规范**：
必须严格对照原型文件 `docs/小程序原型/yongren.html` 第865-1113行的数据统计页面设计实现：

**页面结构**：
- **注意**：小程序环境中状态栏由宿主提供，无需自行实现
- 内容区域：`h-[calc(100%-60px)] overflow-y-auto p-4`（仅减去底部导航60px）
- 底部导航：数据标签激活状态

**时间筛选区域**（第880-886行）：
- 容器：`flex justify-between items-center mb-4`
- 标题：`<h3 class="font-semibold text-gray-700">数据统计</h3>`
- 时间选择器：`flex items-center bg-gray-100 rounded-lg px-3 py-1`
  - 时间显示：`<span class="text-sm text-gray-700 mr-2">2023年11月</span>`
  - 下拉图标：`<i class="fas fa-chevron-down text-gray-500"></i>`

**统计卡片网格**（第889-910行）：
- 容器：`grid grid-cols-2 gap-3 mb-4`
- 统计卡片：`stat-card`（复用基础样式）
  - 标题：`<p class="text-sm text-gray-600 mb-2">在职人数</p>`
  - 数值：`<p class="text-2xl font-bold text-gray-800">24</p>`
  - 趋势指示：`<p class="text-xs text-green-500 mt-1">↑ 比上月增加2人</p>`（绿色-上涨，红色-下降）
- 卡片类型：在职人数、平均薪资、在职率、新增人数

**残疾类型分布图表**（第913-931行）：
- 容器：`card bg-white p-4 mb-4`
- 标题：`<h3 class="font-semibold text-gray-700 mb-3">残疾类型分布</h3>`
- 图表容器：`chart-container mb-2`（高度200px，相对定位）
- 柱状图实现：使用 `.chart-bar` 样式（绝对定位，底部对齐）
  - 样式：`position: absolute; bottom: 0; width: 30px; background-color: #3b82f6; border-radius: 4px 4px 0 0;`
  - 通过内联样式设置 left 和 height
- 横坐标标签：`flex justify-between text-xs text-gray-500`，标签：肢体、听力、视力、言语、智力、精神

**性别分布图表**（第934-948行）：
- 容器：`card bg-white p-4 mb-4`
- 标题：`<h3 class="font-semibold text-gray-700 mb-3">性别分布</h3>`
- 图表容器：`.bar-chart`（`height: 120px; display: flex; align-items: end; justify-content: center; gap: 40px;`）
- 柱状图组件：`.bar-container`（`display: flex; flex-direction: column; align-items: center;`）
  - 数值：`.bar-value`（`font-size: 14px; font-weight: 600; margin-bottom: 4px;`）
  - 柱体：`.bar`（`width: 40px; border-radius: 4px 4px 0 0;`，通过内联样式设置 height 和 background-color）
  - 标签：`.bar-label`（`margin-top: 8px; font-size: 12px; color: #6b7280;`）
- 颜色：男性 `#3b82f6`，女性 `#ec4899`

**年龄分布图表**（第951-...行）：
- 容器：`card bg-white p-4 mb-4`
- 标题：`<h3 class="font-semibold text-gray-700 mb-3">年龄分布</h3>`
- 饼图容器：`.pie-chart`（`width: 200px; height: 200px; border-radius: 50%; position: relative; margin: 0 auto;`）
  - 使用 `conic-gradient` 实现饼图分区（见基础样式规范）
- 图例区域：`.pie-legend`（`display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 16px;`）
- 图例项：`.legend-item`（`display: flex; align-items: center; font-size: 12px;`）
  - 颜色块：`.legend-color`（`width: 12px; height: 12px; border-radius: 2px; margin-right: 6px;`）
  - 标签：年龄分段和百分比

**图表组件要求**：
- 响应式设计，适配不同屏幕尺寸
- 清晰的视觉层次和颜色方案
- 必要的辅助信息（标题、图例、数据标签）
- 交互反馈（悬停、点击、选中状态）

**UI组件使用**：
- 使用图表库（如Recharts、Chart.js等，根据项目现有选择）
- 复用基础UI组件（卡片、筛选器、按钮等）
- 遵循UI包开发规范 [来源：docs/architecture/coding-standards.md#ui包开发提示]

### 文件位置
**页面组件位置**：
- `mini/src/pages/yongren/statistics/` - 数据统计页面

**图表组件位置**：
- `mini/src/components/charts/` - 图表组件目录
  - `DisabilityTypeChart.tsx` - 残疾类型分布图表
  - `GenderDistributionChart.tsx` - 性别分布图表
  - `AgeDistributionChart.tsx` - 年龄分布图表
  - `ProvinceDistributionChart.tsx` - 省份分布图表
  - `ChartFilters.tsx` - 图表筛选组件

### 技术约束
- **性能优化**：多个图表同时加载需优化请求和渲染性能
- **数据准确性**：统计口径需明确，与企业业务逻辑一致
- **移动端适配**：图表在移动端需保持良好的可读性和交互性
- **数据权限**：统计仅限本企业数据，不能跨企业访问

### 图表技术选型
**现有技术栈参考**：
- 根据项目现有图表库选择（需检查mini项目现有依赖）
- 如无现有图表库，推荐使用Recharts（React友好，TypeScript支持好）
- 地图图表可能需要额外库（如中国地图数据）

### 测试要求
**测试框架**：Jest + Testing Library
**关键测试场景**：
1. **图表数据测试**：
   - 数据加载准确性测试
   - 空数据状态处理测试
   - 数据错误处理测试
2. **交互功能测试**：
   - 筛选条件功能测试
   - 图表点击交互测试
   - 数据下钻功能测试
3. **性能测试**：
   - 多图表同时加载性能测试
   - 大数据量渲染性能测试
   - 移动端渲染性能测试
4. **集成测试**：
   - 与统计API的集成测试
   - 页面导航和数据流测试

## 变更日志
| 日期 | 版本 | 描述 | 作者 |
|------|------|------|------|
| 2025-12-17 | 1.0 | 初始创建（数据统计故事） | Bob（Scrum Master） |

## 开发代理记录
*此部分由开发代理在实施过程中填充*

## QA结果
*来自QA代理对已完成故事实施的QA审查结果*