tableConfig.tsx 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388
  1. import { Statistic } from "antd"
  2. import React from "react"
  3. import style from './index.less'
  4. import { gameClassifyEnum } from "@/components/QueryForm/const"
  5. import { version } from "../../components/TableData"
  6. import moment from 'moment';
  7. function columns12(rechargeTrendHandle: (data: any) => void): { label: string, fieldSHow?: { label: string, saveField: string, defaultValue: any[], data: any[] }, data: any[] }[] {
  8. let defaultValue = [ // 默认展示字段
  9. { label: '充值人数', key: 'rechargeCount', type: '付费趋势' },
  10. { label: '充值金额', key: 'rechargeMoney', type: '付费趋势' },
  11. { label: '增', key: 'addPayBack', type: '付费趋势' },
  12. { label: '回', key: 'payBack', type: '付费趋势' },
  13. { label: '倍', key: 'newUserRechargeRate', type: '付费趋势' },
  14. ]
  15. const getFieldDta = () => {
  16. let mySelectFieldData = localStorage.getItem(`myAdFieldConfig${version}_推广每日数据`)
  17. let newSelectFieldData: any = {}
  18. if (mySelectFieldData) {
  19. newSelectFieldData = JSON.parse(mySelectFieldData).date_field
  20. } else {
  21. newSelectFieldData = defaultValue
  22. }
  23. return newSelectFieldData
  24. }
  25. // 总付费趋势
  26. let defaultStart = 21
  27. const zC = Array(90).fill('').map((_item: string, index: number) => {
  28. let field = `rechargeTrendDay${index + 1}`
  29. let data = {
  30. title: `D${index + 1}`,
  31. dataIndex: `D${index + 1}`,
  32. label: "时间区间跨度",
  33. width: 110,
  34. render: (a: any, b: any) => {
  35. let date1 = moment()
  36. if (b?.dt === '总计') {
  37. if (b?.beginDay) {
  38. date1 = moment(b.beginDay)
  39. } else {
  40. date1 = moment()
  41. }
  42. } else {
  43. date1 = moment(b.dt)
  44. }
  45. let dt = moment()
  46. let day = dt.diff(date1, 'day');
  47. let fieldData = getFieldDta()
  48. if (fieldData?.length > 0 && index <= day) {
  49. let data: any = {}
  50. let keyS: string[] = fieldData?.map((item: any) => item.key)
  51. switch (fieldData[0].type) {
  52. case '付费趋势':
  53. if (b?.[field]) {
  54. data = b?.[field]
  55. return <div className={style.dbox}>
  56. {keyS?.includes('rechargeCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人:<span>{data?.rechargeUserCount}</span></span>}
  57. {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金:<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
  58. {keyS?.includes('addPayBack') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增:<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
  59. {keyS?.includes('payBack') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回:<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
  60. {keyS?.includes('newUserRechargeRate') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍:<span>{data?.multiples?.toFixed(2)}</span></span>}
  61. </div>
  62. }
  63. return '--'
  64. }
  65. }
  66. return '--'
  67. },
  68. }
  69. data['default'] = defaultStart + index
  70. return data
  71. })
  72. const Mc = [4, 5, 6, 7, 8, 9, 10, 11, 12].map((index, count) => {
  73. let field = `rechargeTrendMonth${index}`
  74. let data = {
  75. title: `M${index}`,
  76. dataIndex: `M${index}`,
  77. label: "时间区间跨度",
  78. width: 110,
  79. render: (a: any, b: any) => {
  80. let date1 = moment()
  81. if (b?.dt === '总计') {
  82. if (b?.beginDay) {
  83. date1 = moment(b.beginDay)
  84. } else {
  85. date1 = moment()
  86. }
  87. } else {
  88. date1 = moment(b.dt)
  89. }
  90. let dt = moment()
  91. let day = dt.diff(date1, 'day');
  92. let fieldData = getFieldDta()
  93. if (fieldData?.length > 0 && index * 30 <= day) {
  94. let data: any = {}
  95. let keyS: string[] = fieldData?.map((item: any) => item.key)
  96. switch (fieldData[0].type) {
  97. case '付费趋势':
  98. if (b?.[field]) {
  99. data = b?.[field]
  100. return <div className={style.dbox}>
  101. {keyS?.includes('rechargeCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人:<span>{data?.rechargeUserCount}</span></span>}
  102. {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金:<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
  103. {keyS?.includes('addPayBack') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增:<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
  104. {keyS?.includes('payBack') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回:<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
  105. {keyS?.includes('newUserRechargeRate') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍:<span>{data?.multiples?.toFixed(2)}</span></span>}
  106. </div>
  107. }
  108. return '--'
  109. }
  110. }
  111. return '--'
  112. },
  113. }
  114. return data
  115. })
  116. let index = 1;
  117. const roiC = Array(29).fill('').map((_item: string) => {
  118. let data = {
  119. title: `${index + 1}日ROI`,
  120. dataIndex: `roiDay${index + 1}`,
  121. label: '付费数据',
  122. align: 'center',
  123. width: 70,
  124. sorter: true,
  125. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  126. }
  127. index++;
  128. return data
  129. })
  130. return [
  131. {
  132. label: '时间',
  133. data: [
  134. { title: '日期', dataIndex: 'dt', label: '时间', align: 'center', width: 90, default: 1 },
  135. ]
  136. },
  137. {
  138. label: '推广账号信息',
  139. data: [
  140. {
  141. title: '推广账号', dataIndex: 'accountId', key: 'accountId', label: '推广账号信息', align: 'center', width: 70, default: 2,
  142. render: (a: any) => (<div style={{ wordWrap: 'break-word' }}>{a || '--'}</div>)
  143. },
  144. {
  145. title: '投放渠道', dataIndex: 'agentName', key: 'agentName', label: '推广账号信息', align: 'center', width: 130, default: 3,
  146. render: (a: string, b: any) => (<span>{a || '--'}</span>)
  147. }
  148. ]
  149. },
  150. {
  151. label: '业务人员信息',
  152. data: [
  153. { title: '投手', dataIndex: 'sysUserName', key: 'sysUserName', label: '业务人员信息', align: 'center', width: 70, default: 4, render: (a: any) => (<span>{a || '--'}</span>) }
  154. ]
  155. },
  156. {
  157. label: '推广内容信息',
  158. data: [
  159. { title: '推广游戏CP名称', dataIndex: 'cpName', key: 'cpName', label: '推广内容信息', align: 'center', width: 70, default: 5, render: (a: any) => (<span>{a || '--'}</span>) },
  160. { title: '推广游戏名称', dataIndex: 'gameName', key: 'gameName', label: '推广内容信息', align: 'center', width: 70, default: 6, render: (a: any) => (<span>{a || '--'}</span>) },
  161. {
  162. title: '推广游戏应用类型', dataIndex: 'gameType', key: 'gameType', label: '推广内容信息', align: 'center', width: 80, default: 7,
  163. render: (a: string) => (<span>{gameClassifyEnum[a]}</span>)
  164. },
  165. ]
  166. },
  167. {
  168. label: '消耗',
  169. data: [
  170. { title: '消耗', dataIndex: 'cost', key: 'cost', label: '消耗', align: 'center', width: 100, default: 8, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  171. { title: '推广计划数量', dataIndex: 'adPlanCount', key: 'adPlanCount', label: '消耗', align: 'center', width: 70, default: 9, sorter: true, render: (a: any) => (<span>{a || '--'}</span>) }
  172. ]
  173. },
  174. {
  175. label: '广告曝光数据',
  176. data: [
  177. { title: '曝光量', dataIndex: 'viewCount', label: '广告曝光数据', align: 'center', width: 90, default: 10, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  178. { title: '点击量', dataIndex: 'clickCount', label: '广告曝光数据', align: 'center', width: 80, default: 11, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  179. {
  180. title: '点击率', dataIndex: 'clickRate', label: '广告曝光数据', align: 'center', width: 70, sorter: true, default: 12,
  181. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  182. },
  183. { title: '转化量', dataIndex: 'convertCount', label: '广告曝光数据', align: 'center', width: 80, default: 13, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  184. {
  185. title: '转化率', dataIndex: 'convertRate', label: '广告曝光数据', align: 'center', width: 70, default: 14, sorter: true,
  186. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  187. },
  188. { title: '平均转化成本', dataIndex: 'avgConvertCost', label: '广告曝光数据', align: 'center', width: 70, default: 15, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  189. { title: '深度转化量', dataIndex: 'deepConvertCount', label: '广告曝光数据', align: 'center', width: 70, default: 16, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  190. { title: '深度转化成本', dataIndex: 'deepConvertCost', label: '广告曝光数据', align: 'center', width: 70, default: 17, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  191. {
  192. title: '深度转化率', dataIndex: 'deepConvertRate', label: '广告曝光数据', align: 'center', width: 70, default: 18, sorter: true,
  193. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  194. },
  195. { title: '千次曝光成本', dataIndex: 'thousandViewCost', label: '广告曝光数据', align: 'center', width: 70, default: 19, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  196. { title: '平均点击均价', dataIndex: 'avgClickCost', label: '广告曝光数据', align: 'center', width: 70, default: 20, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  197. { title: '应用下载开始量', dataIndex: 'appDownloadCount', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  198. { title: '应用下载开始成本', dataIndex: 'appDownloadCost', label: '广告曝光数据', align: 'center', width: 90, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  199. {
  200. title: '应用下载开始率', dataIndex: 'appDownloadRate', label: '广告曝光数据', align: 'center', width: 70, sorter: true,
  201. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  202. },
  203. { title: '应用下载完成量', dataIndex: 'downloadFinish', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  204. { title: '应用下载完成成本', dataIndex: 'downloadFinishCost', label: '广告曝光数据', align: 'center', width: 90, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  205. {
  206. title: '应用下载完成率', dataIndex: 'downloadFinishRate', label: '广告曝光数据', align: 'center', width: 70, sorter: true,
  207. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  208. },
  209. { title: '应用安装量', dataIndex: 'appInstallCount', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  210. { title: '应用安装成本', dataIndex: 'appInstallCost', label: '广告曝光数据', align: 'center', width: 90, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  211. {
  212. title: '应用安装完成率', dataIndex: 'appInstallRate', label: '广告曝光数据', align: 'center', width: 70, sorter: true,
  213. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  214. },
  215. { title: '应用激活量', dataIndex: 'appActiveCount', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  216. { title: '应用激活成本', dataIndex: 'appActiveCost', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  217. {
  218. title: '应用激活率', dataIndex: 'appActiveRate', label: '广告曝光数据', align: 'center', width: 70, sorter: true,
  219. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  220. },
  221. ]
  222. },
  223. {
  224. label: '用户数据',
  225. data: [
  226. { title: '注册成本', dataIndex: 'regCost', label: '用户数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  227. { title: '注册人数', dataIndex: 'regUserCount', label: '用户数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  228. { title: '首日创角人数', dataIndex: 'firstRoleNum', label: '付费数据', align: 'center', width: 90, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  229. { title: '新用户累计创角人数', dataIndex: 'newUserTotalRoleNum', label: '付费数据', align: 'center', width: 90, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  230. { title: '创角人数', dataIndex: 'roleNum', label: '付费数据', align: 'center', width: 90, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  231. ]
  232. },
  233. {
  234. label: '付费数据',
  235. data: [
  236. { title: '首日新用户充值次数', dataIndex: 'firstUserRechargeCount', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  237. { title: '首日新用户充值人数', dataIndex: 'firstUserRechargeUser', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  238. { title: '首日新用户充值金额', dataIndex: 'firstUserRechargeMoney', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  239. { title: '老用户充值次数', dataIndex: 'oldUserRechargeCount', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  240. { title: '老用户充值人数', dataIndex: 'oldUserRechargeUser', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  241. { title: '老用户充值金额', dataIndex: 'oldUserRechargeMoney', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  242. { title: '账面充值次数', dataIndex: 'showRechargeCount', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  243. { title: '账面充值人数', dataIndex: 'showRechargeUser', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  244. { title: '账面充值金额', dataIndex: 'showRechargeMoney', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  245. { title: '新用户累计充值次数', dataIndex: 'newUserRechargeCount', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  246. { title: '新用户累计充值人数', dataIndex: 'newUserRechargeUser', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  247. { title: '新用户累计充值金额', dataIndex: 'newUserRechargeMoney', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  248. {
  249. title: '首日回收率', dataIndex: 'firstRecoveryRate', label: '付费数据', align: 'center', width: 95, sorter: true,
  250. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  251. },
  252. {
  253. title: '至今回收率', tips: '至今回收率=新用户累计充值金额/实际消耗', dataIndex: 'buyRecoveryRate', label: '付费数据', align: 'center', width: 80, sorter: true,
  254. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  255. },
  256. { title: '毛利额', dataIndex: 'grossMargin', label: '付费数据', align: 'center', width: 90, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
  257. ...roiC,
  258. {
  259. title: '60日ROI', dataIndex: 'roiDay60', label: '付费数据', align: 'center', width: 70, sorter: true,
  260. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  261. },
  262. {
  263. title: '90日ROI', dataIndex: 'roiDay90', label: '付费数据', align: 'center', width: 70, sorter: true,
  264. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  265. },
  266. {
  267. title: '180日ROI', dataIndex: 'roiDay180', label: '付费数据', align: 'center', width: 70, sorter: true,
  268. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  269. },
  270. {
  271. title: '1年ROI', dataIndex: 'roiYear1', label: '付费数据', align: 'center', width: 70, sorter: true,
  272. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  273. },
  274. {
  275. title: '总ROI', dataIndex: 'roiTotal', label: '付费数据', align: 'center', width: 70, sorter: true,
  276. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  277. },
  278. {
  279. title: '首日付费率', dataIndex: 'firstRechargeRate', label: '付费数据', align: 'center', width: 70, sorter: true,
  280. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  281. },
  282. {
  283. title: '买量用户付费率', dataIndex: 'buyUserRechargeRate', label: '付费数据', align: 'center', width: 70, sorter: true,
  284. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  285. },
  286. {
  287. title: '新用户付费比', dataIndex: 'newUserRechargeRate', label: '付费数据', align: 'center', width: 70, sorter: true,
  288. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  289. },
  290. { title: '首日客单价', dataIndex: 'avgFirstUserRecharge', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  291. { title: '买量客单价', dataIndex: 'avgBuyUserRecharge', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  292. { title: '账面客单价', dataIndex: 'avgShowUserRecharge', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  293. { title: '首日充值成本', dataIndex: 'firstRechargeCost', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  294. { title: '买量充值成本', dataIndex: 'buyUserRechargeCost', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  295. { title: '首日充值次数成本', dataIndex: 'firstRechargeCountCost', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  296. { title: '老用户充值次数成本', dataIndex: 'oldUserRechargeCountCost', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  297. { title: '账面充值次数成本', dataIndex: 'showRechargeCountCost', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  298. { title: '新用户累计充值次数成本', dataIndex: 'newUserRechargeCountCost', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
  299. {
  300. title: '复充率', dataIndex: 'repeatRechargeRate', label: '付费数据', align: 'center', width: 70, sorter: true,
  301. render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
  302. },
  303. { title: '新增注册ARPPU', dataIndex: 'newRegArpu', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2}/> },
  304. { title: '首日付费ARPPU', dataIndex: 'firstRechargeArpu', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2}/> },
  305. { title: '至今付费ARPPU', tips: '至今付费ARPPU=新用户累计充值金额/新用户累计充值人数', dataIndex: 'todayRechargeArpu', label: '付费数据', align: 'center', width: 90, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2}/> },
  306. { title: '账面ARPPU', dataIndex: 'showRechargeArpu', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2}/> }
  307. ]
  308. },
  309. {
  310. fieldSHow: {
  311. label: '日期区间字段展示',
  312. saveField: 'date_field',
  313. defaultValue,
  314. data: [
  315. {
  316. label: '付费趋势',
  317. data: [
  318. { label: '充值人数', key: 'rechargeCount', type: '付费趋势' },
  319. { label: '充值金额', key: 'rechargeMoney', type: '付费趋势' },
  320. { label: '增', key: 'addPayBack', type: '付费趋势' },
  321. { label: '回', key: 'payBack', type: '付费趋势' },
  322. { label: '倍', key: 'newUserRechargeRate', type: '付费趋势' },
  323. ]
  324. },
  325. ]
  326. },
  327. label: '时间区间跨度',
  328. data: [
  329. ...zC,
  330. ...Mc,
  331. {
  332. title: "总",
  333. default: 111,
  334. dataIndex: "total",
  335. label: "时间区间跨度",
  336. align: "center",
  337. width: 110,
  338. render: (a: any, b: any) => {
  339. let fieldData = getFieldDta()
  340. if (fieldData?.length > 0) {
  341. let data: any = {}
  342. let keyS: string[] = fieldData?.map((item: any) => item.key)
  343. switch (fieldData[0].type) {
  344. case '付费趋势':
  345. if (b?.rechargeTrendTotal) {
  346. data = b?.rechargeTrendTotal
  347. return <div className={style.dbox}>
  348. {keyS?.includes('rechargeCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人:<span>{data?.rechargeUserCount}</span></span>}
  349. {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金:<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
  350. {keyS?.includes('addPayBack') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增:<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
  351. {keyS?.includes('payBack') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回:<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
  352. {keyS?.includes('newUserRechargeRate') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍:<span>{data?.multiples?.toFixed(2)}</span></span>}
  353. </div>
  354. }
  355. return '--'
  356. }
  357. }
  358. return '--'
  359. },
  360. }]
  361. },
  362. {
  363. label: '操作',
  364. data: [
  365. {
  366. default: 112,
  367. title: '操作', dataIndex: 'cz', label: '操作', align: 'center', width: 70, render: (a: string, b: any) => {
  368. if (b?.dt === '总计') {
  369. return <span>--</span>
  370. }
  371. return <a onClick={() => rechargeTrendHandle(b)}>复充趋势</a>
  372. }
  373. },
  374. ]
  375. },
  376. ]
  377. }
  378. export default columns12