4.9 KiB
4.9 KiB
利润统计面板改造说明
改造内容
将利润统计从原来的卡片布局改为右侧栏面板,并展示详细的成本和收入明细。
修改文件
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列) │
│ │
│ 趋势图表 │
│ │
│ 利润统计面板 │
│ (移到下方) │
└─────────────────────────────────┘
明细数据说明
收入项
- 营收:订单金额总和(status = 'paid')
- 提现收税:代理提现税总和(tax_status = 2)
成本项
- 代理佣金:代理佣金总和(status != 3)
- 代理返利:代理返利总和(status != 3)
- 税务成本:订单金额的 6%
- API调用成本:天元API成功调用的成本总和
利润计算
利润 = 营收 + 提现收税 - 代理佣金 - 代理返利 - 税务成本 - API调用成本
利润率 = (利润 / 营收) × 100%
使用步骤
1. 生成API类型(后端)
运行API生成脚本:
cd ycc-proxy-server
# 运行gen_api脚本生成types
2. 编译验证
# 后端编译
cd ycc-proxy-server
go build
# 前端编译
cd ycc-proxy-admin
npm run build
3. 测试验证
- 打开后台统计面板
- 查看右侧利润统计面板
- 切换今日/当月/总计Tab
- 验证各项成本和收入明细是否正确显示
- 验证收入合计和成本合计计算是否正确
注意事项
- 必须运行gen_api脚本:修改了API定义后,需要运行gen_api脚本生成新的types.go文件
- 数据准确性:确保API调用成本数据已正确记录在
tianyuanapi_call_log表中 - 响应式布局:在小屏幕设备上,右侧面板会自动移到下方,确保良好的用户体验
UI特性
- 固定定位:右侧面板在桌面端使用sticky定位,滚动时保持可见
- 颜色区分:收入用绿色(+),成本用红色(-),利润根据正负显示不同颜色
- Tab切换:可以快速切换查看不同时间范围的明细
- 合计显示:分别显示收入合计和成本合计,方便查看