tableConfig.tsx 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255
  1. import { gameClassifyEnum } from "@/components/QueryForm/const"
  2. import WidthEllipsis from "@/components/widthEllipsis"
  3. import { Statistic } from "antd"
  4. import React from "react"
  5. function columns12(gameType: any) {
  6. let defaultStart = 19
  7. let index = 1
  8. const roiC = Array(29).fill('').map((_item: string) => {
  9. let data = {
  10. title: `${index + 1}日ROI`,
  11. dataIndex: `roiDay${index + 1}`,
  12. label: '付费数据',
  13. align: 'center',
  14. width: 80,
  15. sorter: true,
  16. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  17. }
  18. if (index < 7) {
  19. data['default'] = defaultStart + index
  20. }
  21. index++;
  22. return data
  23. })
  24. let newArr: { label: string, data: any[] }[] = [
  25. {
  26. label: '推广账号信息',
  27. data: [
  28. {
  29. title: '推广账号ID', dataIndex: 'accountId', key: 'accountId', label: '推广账号信息', align: 'center', width: 80, default: 1,
  30. render: (a: string, b: any) => {
  31. if (b?.accountId === '总计') {
  32. return <span>总计</span>
  33. }
  34. return <WidthEllipsis isCopy value={a} />
  35. }
  36. },
  37. {
  38. title: '投放渠道', dataIndex: 'agentName', key: 'agentName', label: '推广账号信息', align: 'center', width: 70, default: 2,
  39. render: (a: string, b: any) => {
  40. if (b?.accountId === '总计') {
  41. return <span>--</span>
  42. }
  43. return <WidthEllipsis isCopy value={a} />
  44. }
  45. },
  46. ]
  47. },
  48. {
  49. label: '业务人员信息',
  50. data: [
  51. { title: '投手', dataIndex: 'sysUserName', key: 'sysUserName', label: '业务人员信息', align: 'center', width: 70, default: 3, render: (a: string, b: any) => (<WidthEllipsis value={a} />) },
  52. ]
  53. },
  54. {
  55. label: '推广内容信息',
  56. data: [
  57. { title: '推广游戏CP名称', dataIndex: 'cpName', key: 'cpName', label: '推广内容信息', align: 'center', width: 70, default: 4, render: (a: string, b: any) => (<WidthEllipsis value={a} />) },
  58. { title: '推广游戏名称', dataIndex: 'gameName', key: 'gameName', label: '推广内容信息', align: 'center', width: 70, default: 5, render: (a: string, b: any) => (<WidthEllipsis isCopy value={a} />) },
  59. {
  60. title: '推广游戏应用类型', dataIndex: 'gameType', key: 'gameType', label: '推广内容信息', align: 'center', width: 90, default: 6,
  61. render: (a: string) => (<span>{gameClassifyEnum[a]}</span>)
  62. },
  63. ]
  64. },
  65. {
  66. label: '消耗',
  67. data: [
  68. { title: '消耗', dataIndex: 'cost', key: 'cost', label: '消耗', align: 'center', width: 100, default: 7, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  69. { title: '推广计划数量', dataIndex: 'adPlanCount', key: 'adPlanCount', label: '消耗', align: 'center', width: 90, default: 8, sorter: true },
  70. ]
  71. },
  72. {
  73. label: '广告曝光数据',
  74. data: [
  75. { title: '曝光量', dataIndex: 'viewCount', label: '广告曝光数据', align: 'center', width: 70, default: 9, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  76. { title: '点击量', dataIndex: 'clickCount', label: '广告曝光数据', align: 'center', width: 70, default: 10, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  77. {
  78. title: '点击率', dataIndex: 'clickRate', label: '广告曝光数据', align: 'center', width: 70, sorter: true, default: 11,
  79. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  80. },
  81. { title: '转化量', dataIndex: 'convertCount', label: '广告曝光数据', align: 'center', width: 70, default: 12, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  82. {
  83. title: '转化率', dataIndex: 'convertRate', label: '广告曝光数据', align: 'center', width: 70, sorter: true,
  84. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  85. },
  86. { title: '平均转化成本', dataIndex: 'avgConvertCost', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  87. { title: '深度转化量', dataIndex: 'deepConvertCount', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  88. { title: '深度转化成本', dataIndex: 'deepConvertCost', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  89. {
  90. title: '深度转化率', dataIndex: 'deepConvertRate', label: '广告曝光数据', align: 'center', width: 70, default: 13, sorter: true,
  91. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  92. },
  93. { title: '千次曝光成本', dataIndex: 'thousandViewCost', label: '广告曝光数据', align: 'center', width: 70, default: 14, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  94. { title: '平均点击均价', dataIndex: 'avgClickCost', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  95. { title: '应用下载开始量', dataIndex: 'appDownloadCount', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  96. { title: '应用下载开始成本', dataIndex: 'appDownloadCost', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  97. {
  98. title: '应用下载开始率', dataIndex: 'appDownloadRate', label: '广告曝光数据', align: 'center', width: 70, sorter: true,
  99. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  100. },
  101. { title: '应用下载完成量', dataIndex: 'downloadFinish', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  102. { title: '应用下载完成成本', dataIndex: 'downloadFinishCost', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  103. {
  104. title: '应用下载完成率', dataIndex: 'downloadFinishRate', label: '广告曝光数据', align: 'center', width: 70, sorter: true,
  105. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  106. },
  107. { title: '应用安装量', dataIndex: 'appInstallCount', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  108. { title: '应用安装成本', dataIndex: 'appInstallCost', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  109. {
  110. title: '应用安装完成率', dataIndex: 'appInstallRate', label: '广告曝光数据', align: 'center', width: 70, sorter: true,
  111. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  112. },
  113. { title: '应用激活量', dataIndex: 'appActiveCount', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  114. { title: '应用激活成本', dataIndex: 'appActiveCost', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  115. {
  116. title: '应用激活率', dataIndex: 'appActiveRate', label: '广告曝光数据', align: 'center', width: 70, sorter: true,
  117. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  118. },
  119. ]
  120. },
  121. {
  122. label: '用户数据',
  123. data: [
  124. { title: '注册人数', dataIndex: 'regUserCount', label: '用户数据', align: 'center', width: 70, default: 15, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  125. { title: '注册成本', dataIndex: 'regCost', label: '用户数据', align: 'center', width: 70, default: 16, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  126. { title: '首日创角人数', dataIndex: 'firstRoleNum', label: '付费数据', align: 'center', width: 90, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  127. { title: '新用户累计创角人数', dataIndex: 'newUserTotalRoleNum', label: '付费数据', align: 'center', width: 90, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  128. { title: '创角人数', dataIndex: 'roleNum', label: '付费数据', align: 'center', width: 90, render: (a: string) => <Statistic value={a || 0} /> },
  129. ]
  130. },
  131. {
  132. label: '付费数据',
  133. data: [
  134. { title: '新用户充值次数', tips: '消耗时间范围内用户,在充值时间内充值次数统计', dataIndex: 'userRechargeCount', label: '付费数据', align: 'center', width: 80, render: (a: string) => <Statistic value={a || 0} /> },
  135. { title: '新用户充值人数', tips: '消耗时间范围内用户,在充值时间内充值人数统计', dataIndex: 'userRechargeUser', label: '付费数据', align: 'center', width: 80, render: (a: string) => <Statistic value={a || 0} /> },
  136. { title: '新用户充值金额', tips: '消耗时间范围内用户,在充值时间内充值金额统计', dataIndex: 'userRechargeMoney', label: '付费数据', align: 'center', width: 80, render: (a: string) => <Statistic value={a || 0} /> },
  137. { title: '首日新用户充值次数', dataIndex: 'firstUserRechargeCount', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  138. { title: '首日新用户充值人数', dataIndex: 'firstUserRechargeUser', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  139. { title: '首日新用户充值金额', dataIndex: 'firstUserRechargeMoney', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  140. { title: '老用户充值次数', dataIndex: 'oldUserRechargeCount', label: '付费数据', align: 'center', width: 70, render: (a: string) => <Statistic value={a || 0} /> },
  141. { title: '老用户充值人数', dataIndex: 'oldUserRechargeUser', label: '付费数据', align: 'center', width: 70, render: (a: string) => <Statistic value={a || 0} /> },
  142. { title: '老用户充值金额', dataIndex: 'oldUserRechargeMoney', label: '付费数据', align: 'center', width: 70, render: (a: string) => <Statistic value={a || 0} /> },
  143. { title: '账面充值次数', dataIndex: 'showRechargeCount', label: '付费数据', align: 'center', width: 70, render: (a: string) => <Statistic value={a || 0} /> },
  144. { title: '账面充值人数', dataIndex: 'showRechargeUser', label: '付费数据', align: 'center', width: 70, render: (a: string) => <Statistic value={a || 0} /> },
  145. { title: '账面充值金额', dataIndex: 'showRechargeMoney', label: '付费数据', align: 'center', width: 70, render: (a: string) => <Statistic value={a || 0} /> },
  146. { title: '新用户累计充值次数', dataIndex: 'newUserRechargeCount', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  147. { title: '新用户累计充值人数', dataIndex: 'newUserRechargeUser', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  148. { title: '新用户累计充值金额', dataIndex: 'newUserRechargeMoney', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  149. {
  150. title: '首日回收率', dataIndex: 'firstRecoveryRate', label: '付费数据', align: 'center', width: 70, sorter: true,
  151. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  152. },
  153. {
  154. title: '回收率', tips: '回收率=新用户充值金额/实际消耗', dataIndex: 'recoveryRate', label: '付费数据', align: 'center', width: 90, default: 17,
  155. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  156. },
  157. {
  158. title: '至今回收率', tips: '至今回收率=新用户累计充值金额/实际消耗', dataIndex: 'todayRecoveryRate', label: '付费数据', align: 'center', width: 95, default: 18, sorter: true,
  159. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  160. },
  161. {
  162. title: '毛利额', dataIndex: 'grossMargin', label: '付费数据', align: 'center', width: 110, default: 19, sorter: true,
  163. render: (a: number) => <Statistic value={a || 0} valueStyle={a > 0 ? { color: 'red' } : {}} />
  164. },
  165. ...roiC,
  166. {
  167. title: '60日ROI', dataIndex: 'roiDay60', label: '付费数据', align: 'center', width: 80, sorter: true,
  168. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 0.9 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  169. },
  170. {
  171. title: '90日ROI', dataIndex: 'roiDay90', label: '付费数据', align: 'center', width: 80, sorter: true,
  172. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  173. },
  174. {
  175. title: '180日ROI', dataIndex: 'roiDay180', label: '付费数据', align: 'center', width: 80, sorter: true,
  176. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  177. },
  178. {
  179. title: '1年ROI', dataIndex: 'roiYear1', label: '付费数据', align: 'center', width: 80, sorter: true,
  180. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  181. },
  182. {
  183. title: '总ROI', dataIndex: 'roiTotal', label: '付费数据', align: 'center', width: 80, default: 25, sorter: true,
  184. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  185. },
  186. {
  187. title: '首日付费率', dataIndex: 'firstRechargeRate', label: '付费数据', align: 'center', width: 70, sorter: true,
  188. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  189. },
  190. {
  191. title: '新用户付费率', dataIndex: 'userRechargeRate', label: '付费数据', align: 'center', width: 70,
  192. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  193. },
  194. {
  195. title: '当天付费率', dataIndex: 'todayRechargeRate', label: '付费数据', align: 'center', width: 70, sorter: true,
  196. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  197. },
  198. { title: '新用户付费比', dataIndex: 'newUserRechargeRatio', label: '付费数据', align: 'center', width: 70, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  199. { title: '首日客单价', dataIndex: 'avgFirstUserRecharge', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  200. { title: '新用户客单价', dataIndex: 'avgUserRecharge', label: '付费数据', align: 'center', width: 70, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  201. { title: '当天客单价', dataIndex: 'avgTodayRecharge', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  202. { title: '账面客单价', dataIndex: 'avgShowUserRecharge', label: '付费数据', align: 'center', width: 70, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  203. { title: '首日充值成本', dataIndex: 'firstRechargeCost', label: '付费数据', align: 'center', width: 90, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  204. { title: '新用户充值成本', dataIndex: 'userRechargeCost', label: '付费数据', align: 'center', width: 90, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  205. { title: '当天充值成本', dataIndex: 'todayRechargeCost', label: '付费数据', align: 'center', width: 90, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  206. { title: '首日充值次数成本', dataIndex: 'firstRechargeCountCost', label: '付费数据', align: 'center', width: 90, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  207. { title: '老用户充值次数成本', dataIndex: 'oldUserRechargeCountCost', label: '付费数据', align: 'center', width: 90, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  208. { title: '账面充值次数成本', dataIndex: 'showRechargeCountCost', label: '付费数据', align: 'center', width: 90, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  209. { title: '新用户累计充值次数成本', dataIndex: 'newUserRechargeCountCost', label: '付费数据', align: 'center', width: 90, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  210. { title: '新用户充值次数成本', dataIndex: 'userRechargeCountCost', label: '付费数据', align: 'center', width: 90, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  211. // {
  212. // title: '复充率', dataIndex: 'repeatRechargeRate', label: '付费数据', align: 'center', width: 70,
  213. // render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  214. // },
  215. {
  216. title: '新用户复充率', tips: '消耗时间范围内注册用户,在充值时间内重复充值(即用户累计充值次数n≥2)。计算公式:新用户复冲率=新用户复充人数/新用户累计充值人数', dataIndex: 'userRepeatRechargeRate', label: '付费数据', align: 'center', width: 80,
  217. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  218. },
  219. // {
  220. // title: '当天复充率', dataIndex: 'todayRepeatRechargeRate', label: '付费数据', align: 'center', width: 70, sorter: true,
  221. // render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  222. // },
  223. { title: '新增注册ARPPU', dataIndex: 'newRegArpu', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  224. { title: '首日付费ARPPU', dataIndex: 'firstRechargeArpu', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  225. { title: '新用户付费ARPPU', dataIndex: 'userRechargeArpu', label: '付费数据', align: 'center', width: 80, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  226. { title: '至今付费ARPPU', dataIndex: 'todayRechargeArpu', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  227. { title: '账面ARPPU', dataIndex: 'showRechargeArpu', label: '付费数据', align: 'center', width: 80, render: (a: string) => <Statistic value={a || 0} precision={2} /> }
  228. ]
  229. },
  230. // {
  231. // label: '操作',
  232. // data: [
  233. // {
  234. // title: '操作',
  235. // dataIndex: 'cz',
  236. // label: '操作',
  237. // default: 26,
  238. // key: 'cz',
  239. // align: 'center',
  240. // width: 75,
  241. // render: (a: number) => {
  242. // return <a>详情</a>
  243. // },
  244. // }
  245. // ]
  246. // }
  247. ]
  248. return newArr
  249. }
  250. export default columns12