tableConfig.tsx 35 KB

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