tableConfig.tsx 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377
  1. import { gameClassifyEnum } from "@/components/QueryForm/const"
  2. import WidthEllipsis from "@/components/widthEllipsis"
  3. import { Statistic } from "antd"
  4. import React from "react"
  5. import '../../adlist/monitor/index.less'
  6. function columns12(): { label: string, fieldSHow?: { label: string, saveField: string, defaultValue: any[], data: any[] }, data: any[] }[] {
  7. return [
  8. {
  9. label: '游戏信息',
  10. data: [
  11. {
  12. title: '推广游戏名称', dataIndex: 'gameName', label: '游戏信息', align: 'center', width: 70, default: 1,
  13. render: (a: string, b: any) => (<WidthEllipsis isCopy={a !== '总计'} value={a} />)
  14. },
  15. {
  16. title: '推广游戏应用类型', dataIndex: 'gameClassify', label: '游戏信息', align: 'center', width: 85,
  17. render: (a: string) => <WidthEllipsis value={gameClassifyEnum[a]} />
  18. }
  19. ]
  20. },
  21. {
  22. label: '消耗',
  23. data: [
  24. {
  25. title: '消耗', dataIndex: 'cost', label: '消耗', align: 'center', width: 90, sorter: true, default: 2,
  26. render: (a: string) => <Statistic value={a || 0} />
  27. }
  28. ]
  29. },
  30. {
  31. label: '用户数据',
  32. data: [
  33. {
  34. title: '注册人数', dataIndex: 'regNum', label: '用户数据', align: 'center', width: 70, sorter: true, default: 3,
  35. render: (a: string) => <Statistic value={a || 0} />
  36. },
  37. {
  38. title: '注册成本', dataIndex: 'regCost', label: '用户数据', align: 'center', width: 70, sorter: true, default: 4,
  39. render: (a: string) => <Statistic value={a || 0} />
  40. }
  41. ]
  42. },
  43. {
  44. label: '付费数据',
  45. data: [
  46. {
  47. title: '新用户充值次数', dataIndex: 'newUserAmountCount', label: '付费数据', align: 'center', width: 70,
  48. render: (a: string) => <Statistic value={a || 0} />
  49. },
  50. {
  51. title: '新用户充值人数', dataIndex: 'newUserAmountNum', label: '付费数据', align: 'center', width: 70, default: 5,
  52. render: (a: string) => <Statistic value={a || 0} />
  53. },
  54. {
  55. title: '新用户充值金额', dataIndex: 'newUserAmount', label: '付费数据', align: 'center', default: 6,
  56. children: [
  57. {
  58. title: '总',
  59. dataIndex: 'newUserAmount',
  60. key: 'newUserAmount',
  61. align: 'right',
  62. width: 70,
  63. className: 'adDataBackColorClass',
  64. render: (a: string) => <Statistic value={a || 0} />
  65. },
  66. {
  67. title: '支付宝',
  68. dataIndex: 'alipayAmount',
  69. key: 'alipayAmount',
  70. align: 'right',
  71. width: 80,
  72. className: 'payDataBackColorClass',
  73. render: (a: string) => <Statistic value={a || 0} />
  74. },
  75. {
  76. title: '微信',
  77. dataIndex: 'wxAmount',
  78. key: 'wxAmount',
  79. align: 'right',
  80. width: 70,
  81. className: 'payDataBackColorClass',
  82. render: (a: string) => <Statistic value={a || 0} />
  83. },
  84. {
  85. title: '米大师',
  86. dataIndex: 'miMasterAmount',
  87. key: 'miMasterAmount',
  88. align: 'right',
  89. width: 80,
  90. className: 'payDataBackColorClass',
  91. render: (a: string) => <Statistic value={a || 0} />
  92. }
  93. ]
  94. },
  95. {
  96. title: '新用户充值成本', dataIndex: 'newUserRechargeCost', label: '付费数据', align: 'center', width: 80, default: 14,
  97. render: (a: string) => <Statistic value={a || 0} />
  98. },
  99. {
  100. title: '新用户回收率', dataIndex: 'newUserRechargeRate', label: '付费数据', align: 'center', width: 70, sorter: true, default: 11,
  101. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  102. },
  103. {
  104. title: '首日新用户充值次数', dataIndex: 'firstNewUserAmountCount', label: '付费数据', align: 'center', width: 70, sorter: true,
  105. render: (a: string) => <Statistic value={a || 0} />
  106. },
  107. {
  108. title: '首日新用户充值人数', dataIndex: 'firstNewUserAmountNum', label: '付费数据', align: 'center', width: 70, sorter: true, default: 7,
  109. render: (a: string) => <Statistic value={a || 0} />
  110. },
  111. {
  112. title: '首日新用户充值金额', dataIndex: 'firstNewUserAmount', label: '付费数据', align: 'center', width: 70, sorter: true, default: 8,
  113. render: (a: string) => <Statistic value={a || 0} />
  114. },
  115. {
  116. title: '老用户充值次数', dataIndex: 'oldUserCount', label: '付费数据', align: 'center', width: 70,
  117. render: (a: string) => <Statistic value={a || 0} />
  118. },
  119. {
  120. title: '老用户充值人数', dataIndex: 'oldUserNum', label: '付费数据', align: 'center', width: 70,
  121. render: (a: string) => <Statistic value={a || 0} />
  122. },
  123. {
  124. title: '老用户充值金额', dataIndex: 'oldUserAmount', label: '付费数据', align: 'center', width: 80,
  125. render: (a: string) => <Statistic value={a || 0} />
  126. },
  127. {
  128. title: '账面充值次数', dataIndex: 'amountCount', label: '付费数据', align: 'center', width: 70,
  129. render: (a: string) => <Statistic value={a || 0} />
  130. },
  131. {
  132. title: '账面充值人数', dataIndex: 'amountNum', label: '付费数据', align: 'center', width: 70,
  133. render: (a: string) => <Statistic value={a || 0} />
  134. },
  135. {
  136. title: '账面充值金额', dataIndex: 'amount', label: '付费数据', align: 'center', width: 85,
  137. render: (a: string) => <Statistic value={a || 0} />
  138. },
  139. {
  140. title: '新用户累计充值次数', dataIndex: 'newUserTotalAmountCount', label: '付费数据', align: 'center', width: 70, sorter: true,
  141. render: (a: string) => <Statistic value={a || 0} />
  142. },
  143. {
  144. title: '新用户累计充值人数', dataIndex: 'newUserTotalAmountNum', label: '付费数据', align: 'center', width: 70, sorter: true, default: 9,
  145. render: (a: string) => <Statistic value={a || 0} />
  146. },
  147. {
  148. title: '新用户累计充值金额', dataIndex: 'newUserTotalAmount', label: '付费数据', align: 'center', default: 10,
  149. children: [
  150. {
  151. title: '总',
  152. dataIndex: 'newUserTotalAmount',
  153. key: 'newUserTotalAmount',
  154. align: 'right',
  155. width: 70,
  156. className: 'adDataBackColorClass',
  157. render: (a: string) => <Statistic value={a || 0} />
  158. },
  159. {
  160. title: '支付宝累计(自然量)',
  161. dataIndex: 'natureNewUserTotalZfbAmount',
  162. key: 'natureNewUserTotalZfbAmount',
  163. align: 'right',
  164. width: 80,
  165. className: 'payDataBackColorClass',
  166. render: (a: string) => <Statistic value={a || 0} />
  167. },
  168. {
  169. title: '微信累计(自然量)',
  170. dataIndex: 'natureNewUserTotalWxAmount',
  171. key: 'natureNewUserTotalWxAmount',
  172. align: 'right',
  173. width: 70,
  174. className: 'payDataBackColorClass',
  175. render: (a: string) => <Statistic value={a || 0} />
  176. },
  177. {
  178. title: '米大师累计(自然量)',
  179. dataIndex: 'natureNewUserTotalMdsAmount',
  180. key: 'natureNewUserTotalMdsAmount',
  181. align: 'right',
  182. width: 80,
  183. className: 'payDataBackColorClass',
  184. render: (a: string) => <Statistic value={a || 0} />
  185. }
  186. ]
  187. },
  188. {
  189. title: '首日充值成本', dataIndex: 'firstNewUserRechargeCost', label: '付费数据', align: 'center', width: 70, sorter: true, default: 15,
  190. render: (a: string) => <Statistic value={a || 0} />
  191. },
  192. {
  193. title: '总充值成本', dataIndex: 'totalRechargeCost', label: '付费数据', align: 'center', width: 70, sorter: true, default: 16,
  194. render: (a: string) => <Statistic value={a || 0} />
  195. },
  196. {
  197. title: '首日ROI', dataIndex: 'firstRoi', label: '付费数据', align: 'center', width: 70, sorter: true, default: 12,
  198. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  199. },
  200. {
  201. title: '总ROI', dataIndex: 'totalRoi', label: '付费数据', align: 'center', width: 70, sorter: true, default: 13,
  202. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  203. },
  204. {
  205. title: '首日付费率', dataIndex: 'firstAmountRate', label: '付费数据', align: 'center', width: 70, sorter: true,
  206. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  207. },
  208. {
  209. title: '新用户付费率', dataIndex: 'newUserRoi', label: '付费数据', align: 'center', width: 70,
  210. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  211. },
  212. {
  213. title: '至今付费率', tips: '至今付费率(总)=新用户累计充值人数/注册人数', dataIndex: 'todayAmountRate', label: '付费数据', align: 'center', width: 80, sorter: true,
  214. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  215. },
  216. {
  217. title: '新用户付费比', dataIndex: 'newUserRate', label: '付费数据', align: 'center', width: 70,
  218. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  219. },
  220. {
  221. title: '首日客单价', dataIndex: 'firstAvgAmount', label: '付费数据', align: 'center', width: 70, sorter: true,
  222. render: (a: string) => <Statistic value={a || 0} />
  223. },
  224. {
  225. title: '新用户客单价', dataIndex: 'newUserAvgAmount', label: '付费数据', align: 'center', width: 70,
  226. render: (a: string) => <Statistic value={a || 0} />
  227. },
  228. {
  229. title: '至今客单价', tips: '至今客单价(总)=新用户累计充值金额/新用户累计充值次数', dataIndex: 'todayAvgAmount', label: '付费数据', align: 'center', width: 80, sorter: true,
  230. render: (a: string) => <Statistic value={a || 0} />
  231. },
  232. {
  233. title: '账面客单价', dataIndex: 'avgAmount', label: '付费数据', align: 'center', width: 70,
  234. render: (a: string) => <Statistic value={a || 0} />
  235. },
  236. // {
  237. // title: '复充率', dataIndex: 'userAgainRate', label: '付费数据', align: 'center', width: 70,
  238. // render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  239. // },
  240. {
  241. title: '单日付费100+人数', dataIndex: 'hundredUserNum', label: '付费数据', align: 'center', width: 90, sorter: true,
  242. render: (a: string) => <Statistic value={a || 0} />
  243. },
  244. {
  245. title: '单日付费100+成本', dataIndex: 'hundredUserNumCost', label: '付费数据', align: 'center', width: 90, sorter: true,
  246. render: (a: string) => <Statistic value={a || 0} precision={2} />
  247. },
  248. {
  249. title: '首日创角人数', dataIndex: 'firstRoleNum', label: '付费数据', align: 'center', width: 75, sorter: true,
  250. render: (a: string) => <Statistic value={a || 0} />
  251. },
  252. {
  253. title: '创角人数', dataIndex: 'roleNum', label: '付费数据', align: 'center', width: 70, sorter: true,
  254. render: (a: string) => <Statistic value={a || 0} />
  255. },
  256. {
  257. title: '新用户累计创角人数', dataIndex: 'newUserTotalRoleNum', label: '付费数据', align: 'center', width: 85, sorter: true,
  258. render: (a: string) => <Statistic value={a || 0} />
  259. },
  260. {
  261. title: '首日创角人数成本', dataIndex: 'firstRoleNumCost', label: '付费数据', align: 'center', width: 80, sorter: true,
  262. render: (a: string) => <Statistic value={a || 0} precision={2} />
  263. },
  264. {
  265. title: '创角人数成本', dataIndex: 'roleNumCost', label: '付费数据', align: 'center', width: 70, sorter: true,
  266. render: (a: string) => <Statistic value={a || 0} precision={2} />
  267. },
  268. {
  269. title: '新用户累计创角人数成本', dataIndex: 'newUserTotalRoleNumCost', label: '付费数据', align: 'center', width: 90, sorter: true,
  270. render: (a: string) => <Statistic value={a || 0} precision={2} />
  271. },
  272. {
  273. title: '首日创角率', dataIndex: 'firstRoleNumRate', label: '付费数据', align: 'center', width: 75, sorter: true,
  274. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  275. },
  276. {
  277. title: '创角率', dataIndex: 'roleNumRate', label: '付费数据', align: 'center', width: 75, sorter: true,
  278. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  279. },
  280. {
  281. title: '新用户累计创角率', dataIndex: 'newUserTotalRoleNumRate', label: '付费数据', align: 'center', width: 90, sorter: true,
  282. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  283. },
  284. {
  285. title: '新用户复充率', tips: '注册时间范围内用户,在充值时间内重复充值(即用户累计充值次数n≥2)。计算公式:复冲率=新用户复充人数/新用户累计充值人数', dataIndex: 'newUserAgainRate', label: '付费数据', align: 'center', width: 70,
  286. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  287. },
  288. // {
  289. // title: '当天复充率', dataIndex: 'todayAgainRate', label: '付费数据', align: 'center', width: 70, sorter: true,
  290. // render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  291. // },
  292. {
  293. title: '新增注册ARPPU', dataIndex: 'regUserArpu', label: '付费数据', align: 'center', width: 70, sorter: true,
  294. render: (a: string) => <Statistic value={a || 0} />
  295. },
  296. {
  297. title: '首日付费ARPPU', dataIndex: 'firstAmountArpu', label: '付费数据', align: 'center', width: 70, sorter: true,
  298. render: (a: string) => <Statistic value={a || 0} />
  299. },
  300. {
  301. title: '新用户付费ARPPU', dataIndex: 'newUserAmountArpu', label: '付费数据', align: 'center', width: 70,
  302. render: (a: string) => <Statistic value={a || 0} />
  303. },
  304. {
  305. title: '至今付费ARPPU', dataIndex: 'todayAmountArpu', label: '付费数据', align: 'center', width: 70, sorter: true,
  306. render: (a: string) => <Statistic value={a || 0} />
  307. },
  308. {
  309. title: '账面ARPPU', dataIndex: 'amountArpu', label: '付费数据', align: 'center', width: 70,
  310. render: (a: string) => <Statistic value={a || 0} />
  311. },
  312. { title: '首日有效创角人数', dataIndex: 'firstEffectiveRoleNum', label: '付费数据', align: 'center', width: 80, sorter: true, },
  313. { title: '新用户累计有效创角人数', dataIndex: 'newUserTotalEffectiveRoleNum', label: '付费数据', align: 'center', width: 85, sorter: true, },
  314. { title: '有效创角人数', dataIndex: 'effectiveRoleNum', label: '付费数据', align: 'center', width: 70, sorter: true, },
  315. {
  316. title: '首日有效创角率', dataIndex: 'firstEffectiveRoleRate', label: '付费数据', align: 'center', width: 90, sorter: true,
  317. render: (a: number) => <Statistic value={a || 0} precision={2} valueStyle={!a ? {} : a >= 100 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  318. },
  319. {
  320. title: '新用户累计有效创角率', dataIndex: 'newUserTotalEffectiveRoleNumRate', label: '付费数据', align: 'center', width: 100, sorter: true,
  321. render: (a: number) => <Statistic value={a || 0} precision={2} valueStyle={!a ? {} : a >= 100 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  322. },
  323. {
  324. title: '有效创角率', dataIndex: 'effectiveRoleNumRate', label: '付费数据', align: 'center', width: 90, sorter: true,
  325. render: (a: number) => <Statistic value={a || 0} precision={2} valueStyle={!a ? {} : a >= 100 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  326. },
  327. {
  328. title: '首日有效创角成本', dataIndex: 'firstEffectiveRoleNumCost', label: '付费数据', align: 'center', width: 80, sorter: true,
  329. render: (a: string) => <Statistic value={a || 0} precision={2} />
  330. },
  331. {
  332. title: '新用户累计有效创角成本', dataIndex: 'newUserTotalEffectiveRoleNumCost', label: '付费数据', align: 'center', width: 85, sorter: true,
  333. render: (a: string) => <Statistic value={a || 0} precision={2} />
  334. },
  335. {
  336. title: '有效创角成本', dataIndex: 'effectiveRoleNumCost', label: '付费数据', align: 'center', width: 75, sorter: true,
  337. render: (a: string) => <Statistic value={a || 0} precision={2} />
  338. },
  339. { title: '首日有效创角付费人数', dataIndex: 'firstEffectiveRoleAmountNum', label: '付费数据', align: 'center', width: 80, sorter: true, },
  340. { title: '新用户累计有效创角付费人数', dataIndex: 'newUserTotalEffectiveRoleAmountNum', label: '付费数据', align: 'center', width: 95, sorter: true, },
  341. {
  342. title: '首日有效创角付费成本', dataIndex: 'firstEffectiveRoleAmountNumCost', label: '付费数据', align: 'center', width: 80, sorter: true,
  343. render: (a: string) => <Statistic value={a || 0} precision={2} />
  344. },
  345. {
  346. title: '新用户累计有效创角付费成本', dataIndex: 'newUserTotalEffectiveRoleAmountNumCost', label: '付费数据', align: 'center', width: 95, sorter: true,
  347. render: (a: string) => <Statistic value={a || 0} precision={2} />
  348. },
  349. {
  350. title: '首日有效创角付费比', dataIndex: 'firstEffectiveRoleAmountNumRate', label: '付费数据', align: 'center', width: 90, sorter: true,
  351. render: (a: number) => <Statistic value={a || 0} precision={2} valueStyle={!a ? {} : a >= 100 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  352. },
  353. {
  354. title: '新用户累计有效创角付费比', dataIndex: 'newUserTotalEffectiveRoleAmountNumRate', label: '付费数据', align: 'center', width: 90, sorter: true,
  355. render: (a: number) => <Statistic value={a || 0} precision={2} valueStyle={!a ? {} : a >= 100 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  356. },
  357. {
  358. title: '首日有效创角ARPU', dataIndex: 'firstEffectiveRoleArpu', label: '付费数据', align: 'center', width: 70, sorter: true,
  359. render: (a: string) => <Statistic value={a || 0} />
  360. },
  361. {
  362. title: '新用户累计有效创角ARPU', dataIndex: 'newUserTotalEffectiveRoleArpu', label: '付费数据', align: 'center', width: 80, sorter: true,
  363. render: (a: string) => <Statistic value={a || 0} />
  364. },
  365. ]
  366. }
  367. ]
  368. }
  369. export default columns12