# 抽卡统计

<cite>
**本文档引用文件**  
- [StatisticsOverview.vue](file://src/views/card-walmart-info/group/statistics/components/StatisticsOverview.vue)
- [AccountStatistics.vue](file://src/views/card-walmart-info/group/statistics/components/AccountStatistics.vue)
- [index.vue](file://src/views/card-walmart-info/group/statistics/index.vue)
- [kami-api-card-info-tmall-game-v1-tmall-game-stats-res.ts](file://src/api/generated/models/kami-api-card-info-tmall-game-v1-tmall-game-stats-res.ts)
- [kami-api-card-info-tmall-game-v1-tmall-game-stats-req.ts](file://src/api/generated/models/kami-api-card-info-tmall-game-v1-tmall-game-stats-req.ts)
- [order-summary.ts](file://src/api/order-summary.ts)
- [utils.ts](file://src/api/utils.ts)
- [chart-option.ts](file://src/hooks/chart-option.ts)
- [loading.ts](file://src/hooks/loading.ts)
- [t-mall-game-order.ts](file://src/api/t-mall-game-order.ts)
</cite>

## 目录

1. [介绍](#介绍)
2. [项目结构](#项目结构)
3. [核心组件](#核心组件)
4. [架构概览](#架构概览)
5. [详细组件分析](#详细组件分析)
6. [依赖分析](#依赖分析)
7. [性能考虑](#性能考虑)
8. [故障排除指南](#故障排除指南)
9. [结论](#结论)

## 介绍

本文档详细介绍了抽卡统计分析功能，包括统计维度、计算方法、可视化呈现方式、API使用示例、数据缓存策略和性能优化方法。文档还提供了如何查看不同维度的统计报表、解读统计图表以及导出统计结果的完整使用指南。

## 项目结构

抽卡统计功能主要分布在前端项目的特定目录中，涉及多个组件和API接口。统计功能通过模块化设计实现，便于维护和扩展。

```mermaid
graph TB
subgraph "统计功能模块"
A[统计概览组件] --> B[账号统计组件]
A --> C[订单统计组件]
D[统计API接口] --> A
D --> B
D --> C
E[图表工具] --> A
E --> B
E --> C
end
```

**图表来源**

- [StatisticsOverview.vue](file://src/views/card-walmart-info/group/statistics/components/StatisticsOverview.vue)
- [AccountStatistics.vue](file://src/views/card-walmart-info/group/statistics/components/AccountStatistics.vue)

**章节来源**

- [index.vue](file://src/views/card-walmart-info/group/statistics/index.vue)

## 核心组件

抽卡统计功能的核心组件包括统计概览、账号统计和订单统计。这些组件通过API获取数据，并使用图表库进行可视化展示。统计组件支持分页、数据刷新和导出功能。

**章节来源**

- [StatisticsOverview.vue](file://src/views/card-walmart-info/group/statistics/components/StatisticsOverview.vue)
- [AccountStatistics.vue](file://src/views/card-walmart-info/group/statistics/components/AccountStatistics.vue)

## 架构概览

抽卡统计功能采用前后端分离架构，前端通过API调用获取统计数据，然后使用图表库进行可视化展示。系统支持定时刷新和手动刷新，确保数据的实时性。

```mermaid
sequenceDiagram
participant 用户 as "用户"
participant 前端 as "前端组件"
participant API as "API接口"
participant 后端 as "后端服务"
用户->>前端 : 打开统计页面
前端->>API : 请求统计数据
API->>后端 : 转发请求
后端-->>API : 返回统计结果
API-->>前端 : 返回数据
前端->>前端 : 渲染图表
前端-->>用户 : 显示统计信息
用户->>前端 : 点击刷新
前端->>API : 重新请求数据
API->>后端 : 转发请求
后端-->>API : 返回最新数据
API-->>前端 : 返回更新后的数据
前端->>前端 : 重新渲染图表
前端-->>用户 : 显示更新后的统计信息
```

**图表来源**

- [index.vue](file://src/views/card-walmart-info/group/statistics/index.vue)
- [order-summary.ts](file://src/api/order-summary.ts)

## 详细组件分析

### 统计概览组件分析

统计概览组件展示了关键的统计指标，包括订单总额、成功订单总额、成功订单数和活跃账号数。组件使用卡片布局展示这些指标，并支持数据刷新。

```mermaid
classDiagram
class StatisticsOverview {
+overviewData : object
+loading : boolean
+fetchData() : Promise
+formatNumber(num : number) : string
}
StatisticsOverview --> "1" Chart : 使用
StatisticsOverview --> "1" Loading : 使用
StatisticsOverview --> "1" API : 数据获取
```

**图表来源**

- [StatisticsOverview.vue](file://src/views/card-walmart-info/group/statistics/components/StatisticsOverview.vue)

**章节来源**

- [StatisticsOverview.vue](file://src/views/card-walmart-info/group/statistics/components/StatisticsOverview.vue)

### 账号统计组件分析

账号统计组件提供了更详细的账号相关统计信息，包括账号活跃度趋势和账号订单分布。组件使用柱状图展示这些数据，帮助用户了解账号的使用情况。

```mermaid
flowchart TD
Start([组件初始化]) --> FetchData["获取账号统计数据"]
FetchData --> DataValid{"数据有效?"}
DataValid --> |否| ShowError["显示错误信息"]
DataValid --> |是| UpdateCharts["更新图表数据"]
UpdateCharts --> UpdateActivityChart["更新账号活跃度趋势"]
UpdateCharts --> UpdateDistributionChart["更新账号订单分布"]
UpdateActivityChart --> RenderChart["渲染图表"]
UpdateDistributionChart --> RenderChart
RenderChart --> End([组件渲染完成])
ShowError --> End
```

**图表来源**

- [AccountStatistics.vue](file://src/views/card-walmart-info/group/statistics/components/AccountStatistics.vue)

**章节来源**

- [AccountStatistics.vue](file://src/views/card-walmart-info/group/statistics/components/AccountStatistics.vue)

### 统计API分析

统计API提供了获取统计所需数据的接口，包括请求参数和响应数据结构。API设计遵循RESTful原则，支持分页和条件查询。

```mermaid
classDiagram
class TMallGameStatsReq {
+channelName : string
}
class TMallGameStatsRes {
+totalCount : number
+totalSucceedCount : number
+totalAmount : number
+totalSucceedAmount : number
+todayCount : number
+todaySucceedCount : number
+todayAmount : number
+TodaySucceedAmount : number
+totalRate : number
+todayRate : number
}
TMallGameStatsReq --> TMallGameStatsRes : 请求响应
```

**图表来源**

- [kami-api-card-info-tmall-game-v1-tmall-game-stats-req.ts](file://src/api/generated/models/kami-api-card-info-tmall-game-v1-tmall-game-stats-req.ts)
- [kami-api-card-info-tmall-game-v1-tmall-game-stats-res.ts](file://src/api/generated/models/kami-api-card-info-tmall-game-v1-tmall-game-stats-res.ts)

**章节来源**

- [kami-api-card-info-tmall-game-v1-tmall-game-stats-req.ts](file://src/api/generated/models/kami-api-card-info-tmall-game-v1-tmall-game-stats-req.ts)
- [kami-api-card-info-tmall-game-v1-tmall-game-stats-res.ts](file://src/api/generated/models/kami-api-card-info-tmall-game-v1-tmall-game-stats-res.ts)

## 依赖分析

抽卡统计功能依赖于多个前端组件和工具，包括图表库、加载状态管理和API客户端。这些依赖关系确保了统计功能的完整性和可用性。

```mermaid
graph TD
A[统计组件] --> B[图表库]
A --> C[加载状态管理]
A --> D[API客户端]
A --> E[数据格式化工具]
B --> F[ECharts]
C --> G[loading.ts]
D --> H[apiClient]
E --> I[formatNumber]
```

**图表来源**

- [utils.ts](file://src/api/utils.ts)
- [loading.ts](file://src/hooks/loading.ts)
- [chart-option.ts](file://src/hooks/chart-option.ts)

**章节来源**

- [utils.ts](file://src/api/utils.ts)
- [loading.ts](file://src/hooks/loading.ts)

## 性能考虑

抽卡统计功能通过多种方式优化性能，包括数据缓存、按需加载和定时刷新。这些优化措施确保了复杂统计计算的响应速度，提升了用户体验。

**章节来源**

- [t-mall-game-order.ts](file://src/api/t-mall-game-order.ts)
- [index.vue](file://src/views/t-mall-game/workplace/index.vue)

## 故障排除指南

当遇到统计数据异常或图表渲染失败时，可以按照以下步骤进行排查：

1. 检查网络连接是否正常
2. 确认API服务是否可用
3. 检查浏览器控制台是否有错误信息
4. 尝试刷新页面
5. 检查数据权限是否正确

**章节来源**

- [utils.ts](file://src/api/utils.ts)
- [loading.ts](file://src/hooks/loading.ts)

## 结论

抽卡统计功能通过模块化设计和合理的架构，实现了数据的统计、分析和可视化。功能支持多种统计维度和图表类型，满足了用户的多样化需求。通过性能优化和错误处理，确保了系统的稳定性和可靠性。
