150 lines
4.9 KiB
Markdown
150 lines
4.9 KiB
Markdown
|
# 利润统计面板改造说明
|
|||
|
|
|
|||
|
|
## 改造内容
|
|||
|
|
|
|||
|
|
将利润统计从原来的卡片布局改为右侧栏面板，并展示详细的成本和收入明细。
|
|||
|
|
|
|||
|
|
## 修改文件
|
|||
|
|
|
|||
|
|
### 1. 后端API定义
|
|||
|
|
|
|||
|
|
**文件：** `ycc-proxy-server/app/main/api/desc/admin/dashboard.api`
|
|||
|
|
|
|||
|
|
**修改内容：**
|
|||
|
|
- 在 `AdminProfitStatistics` 中添加了三个明细字段：
|
|||
|
|
- `TodayDetail AdminProfitDetail` - 今日明细
|
|||
|
|
- `MonthDetail AdminProfitDetail` - 当月明细
|
|||
|
|
- `TotalDetail AdminProfitDetail` - 总计明细
|
|||
|
|
- 新增 `AdminProfitDetail` 类型，包含：
|
|||
|
|
- `Revenue` - 营收
|
|||
|
|
- `Commission` - 佣金
|
|||
|
|
- `Rebate` - 返利
|
|||
|
|
- `CompanyTax` - 税务成本
|
|||
|
|
- `ApiCost` - API调用成本
|
|||
|
|
- `TaxIncome` - 提现收税
|
|||
|
|
- `Profit` - 利润
|
|||
|
|
- `ProfitRate` - 利润率
|
|||
|
|
|
|||
|
|
### 2. 后端逻辑
|
|||
|
|
|
|||
|
|
**文件：** `ycc-proxy-server/app/main/api/internal/logic/admin_dashboard/admingetdashboardstatisticslogic.go`
|
|||
|
|
|
|||
|
|
**修改内容：**
|
|||
|
|
- 在 `calculateProfitStatistics` 方法中，为今日、当月、总计三个时间范围都填充了明细数据
|
|||
|
|
- 明细数据包含所有成本和收入的详细金额
|
|||
|
|
|
|||
|
|
### 3. 前端类型定义
|
|||
|
|
|
|||
|
|
**文件：** `ycc-proxy-admin/apps/web-antd/src/api/dashboard/dashboard.ts`
|
|||
|
|
|
|||
|
|
**修改内容：**
|
|||
|
|
- 添加了 `ProfitDetail` 接口
|
|||
|
|
- 更新了 `ProfitStatistics` 接口，添加三个明细字段
|
|||
|
|
|
|||
|
|
### 4. 前端主页面
|
|||
|
|
|
|||
|
|
**文件：** `ycc-proxy-admin/apps/web-antd/src/views/dashboard/analytics/index.vue`
|
|||
|
|
|
|||
|
|
**修改内容：**
|
|||
|
|
- 移除了利润统计卡片（从4列布局改为3列布局）
|
|||
|
|
- 改为左右布局：左侧是统计卡片和图表，右侧是利润统计面板
|
|||
|
|
- 添加了响应式布局，小屏幕下右侧面板会移到下方
|
|||
|
|
|
|||
|
|
### 5. 前端利润面板组件（新建）
|
|||
|
|
|
|||
|
|
**文件：** `ycc-proxy-admin/apps/web-antd/src/views/dashboard/analytics/analytics-profit-panel.vue`
|
|||
|
|
|
|||
|
|
**功能：**
|
|||
|
|
- 展示利润总额和利润率
|
|||
|
|
- 通过Tab切换今日/当月/总计
|
|||
|
|
- 详细展示收入明细（营收、提现收税）
|
|||
|
|
- 详细展示成本明细（代理佣金、代理返利、税务成本、API调用成本）
|
|||
|
|
- 分别计算收入合计和成本合计
|
|||
|
|
|
|||
|
|
## 布局说明
|
|||
|
|
|
|||
|
|
### 桌面端（>1200px）
|
|||
|
|
```
|
|||
|
|
┌─────────────────────────────────┬──────────────┐
|
|||
|
|
│ │ │
|
|||
|
|
│ 统计卡片（3列） │ 利润统计 │
|
|||
|
|
│ │ 面板 │
|
|||
|
|
│ 趋势图表 │ （固定） │
|
|||
|
|
│ │ │
|
|||
|
|
└─────────────────────────────────┴──────────────┘
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 移动端（≤1200px）
|
|||
|
|
```
|
|||
|
|
┌─────────────────────────────────┐
|
|||
|
|
│ 统计卡片（3列） │
|
|||
|
|
│ │
|
|||
|
|
│ 趋势图表 │
|
|||
|
|
│ │
|
|||
|
|
│ 利润统计面板 │
|
|||
|
|
│ （移到下方） │
|
|||
|
|
└─────────────────────────────────┘
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 明细数据说明
|
|||
|
|
|
|||
|
|
### 收入项
|
|||
|
|
1. **营收**：订单金额总和（status = 'paid'）
|
|||
|
|
2. **提现收税**：代理提现税总和（tax_status = 2）
|
|||
|
|
|
|||
|
|
### 成本项
|
|||
|
|
1. **代理佣金**：代理佣金总和（status != 3）
|
|||
|
|
2. **代理返利**：代理返利总和（status != 3）
|
|||
|
|
3. **税务成本**：订单金额的 6%
|
|||
|
|
4. **API调用成本**：天元API成功调用的成本总和
|
|||
|
|
|
|||
|
|
### 利润计算
|
|||
|
|
```
|
|||
|
|
利润 = 营收 + 提现收税 - 代理佣金 - 代理返利 - 税务成本 - API调用成本
|
|||
|
|
利润率 = (利润 / 营收) × 100%
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 使用步骤
|
|||
|
|
|
|||
|
|
### 1. 生成API类型（后端）
|
|||
|
|
|
|||
|
|
运行API生成脚本：
|
|||
|
|
```bash
|
|||
|
|
cd ycc-proxy-server
|
|||
|
|
# 运行gen_api脚本生成types
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 编译验证
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 后端编译
|
|||
|
|
cd ycc-proxy-server
|
|||
|
|
go build
|
|||
|
|
|
|||
|
|
# 前端编译
|
|||
|
|
cd ycc-proxy-admin
|
|||
|
|
npm run build
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 测试验证
|
|||
|
|
|
|||
|
|
1. 打开后台统计面板
|
|||
|
|
2. 查看右侧利润统计面板
|
|||
|
|
3. 切换今日/当月/总计Tab
|
|||
|
|
4. 验证各项成本和收入明细是否正确显示
|
|||
|
|
5. 验证收入合计和成本合计计算是否正确
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
1. **必须运行gen_api脚本**：修改了API定义后，需要运行gen_api脚本生成新的types.go文件
|
|||
|
|
2. **数据准确性**：确保API调用成本数据已正确记录在 `tianyuanapi_call_log` 表中
|
|||
|
|
3. **响应式布局**：在小屏幕设备上，右侧面板会自动移到下方，确保良好的用户体验
|
|||
|
|
|
|||
|
|
## UI特性
|
|||
|
|
|
|||
|
|
- **固定定位**：右侧面板在桌面端使用sticky定位，滚动时保持可见
|
|||
|
|
- **颜色区分**：收入用绿色（+），成本用红色（-），利润根据正负显示不同颜色
|
|||
|
|
- **Tab切换**：可以快速切换查看不同时间范围的明细
|
|||
|
|
- **合计显示**：分别显示收入合计和成本合计，方便查看
|
|||
|
|
|