# 托管数据统计

## 📋 业务与功能

### 1.1 核心目标
提供全方位的托管业务数据监控，包括宏观的统计视图、详细的人员托管情况以及异常掉线记录，帮助管理人员掌握托管业务运行状态。

### 1.2 功能清单

#### 1. 托管数据视图 (Dashboard)
- **集运人员维度统计**:
  - 核心指标：托管员工数、新增托管员工数、托管客户总数、新增托管客户数。
  - 趋势分析：近30天各项指标的趋势图。
  - 筛选：支持时间范围搜索。
- **托管员工维度统计**:
  - 核心指标：客户总数、新增客户数。
  - 趋势分析：近30天各项指标的趋势图。
  - 筛选：支持时间范围搜索。

#### 2. 托管数据明细 (Details)
- **集运人员托管明细**:
  - 列表展示：集运人员姓名、托管员工数、新增托管员工数、托管客户总数、新增托管客户数。
  - 筛选：集运人员名称搜索、时间范围搜索。
- **托管员工明细**:
  - 列表展示：托管员工姓名、所属集运人员、客户总数、新增客户数、托管总时长、最近一次分配时间。
  - 筛选：托管员工名称搜索、时间范围搜索。

#### 3. 掉线数据记录 (Offline Records)
- **掉线数据列表**:
  - 列表展示：托管账号、所属集运人员、所属部门、掉线时间、掉线时长（可选）、恢复时间（可选）。
  - 筛选：时间范围搜索、所属部门搜索、托管员工姓名搜索。

### 1.3 交互要点
- **Tab 切换**: 页面顶部通过 Tabs 切换“托管数据视图”、“托管数据明细”、“掉线数据记录”。
- **筛选联动**: 各模块内部筛选条件改变时，实时更新对应的图表或列表数据。
- **图表交互**: 鼠标悬停显示具体数值。

---

## 📊 内容规划

### 2.1 信息架构
```
托管数据统计 (Page)
├── Tabs 导航
│   ├── 托管数据视图 (Tab 1)
│   │   ├── 筛选栏 (时间范围)
│   │   ├── 集运人员统计区块 (卡片 + 趋势图)
│   │   └── 托管员工统计区块 (卡片 + 趋势图)
│   ├── 托管数据明细 (Tab 2)
│   │   ├── 筛选栏 (集运人员/托管员工搜索 + 时间范围)
│   │   ├── 子 Tabs / 切换器 (集运人员明细 | 托管员工明细)
│   │   └── 数据表格
│   └── 掉线数据记录 (Tab 3)
│       ├── 筛选栏 (时间范围 + 部门 + 姓名)
│       └── 数据表格
```

### 2.2 数据模型

#### 统计概览数据 (Statistics)
- `shipping_agent_stats`: { total_managed_staff, new_managed_staff, total_customers, new_customers, trend: [] }
- `managed_staff_stats`: { total_customers, new_customers, trend: [] }

#### 明细列表数据 (List Items)
- `shipping_agent_item`: { id, name, managed_staff_count, new_staff_count, total_customer_count, new_customer_count }
- `managed_staff_item`: { id, name, agent_name, total_customers, new_customers, total_duration, last_assigned_at }
- `offline_record_item`: { id, account_name, agent_name, department, offline_time, duration }

---

## 🎨 视觉规范

### 3.1 布局建议
- **视图页**: 使用 Card 组件包裹不同维度的统计区域，图表高度建议 300px-400px。
- **列表页**: 标准的搜索栏 + 表格布局。
- **颜色**:
  - 趋势图使用不同颜色区分指标（如蓝色代表总量，绿色代表新增）。
  - 掉线记录中的关键信息（如掉线时间）可使用警告色。

### 3.2 组件使用
- `Tabs`: 顶级导航。
- `DatePicker.RangePicker`: 时间范围筛选。
- `Input.Search`: 名称搜索。
- `Select`: 部门筛选。
- `Table`: 数据展示。
- `Recharts` / `ECharts`: 数据可视化。