|
|
@@ -0,0 +1,937 @@
|
|
|
+import React from "react"
|
|
|
+import style from './index.less'
|
|
|
+import { Statistic } from "antd"
|
|
|
+import { gameClassifyEnum } from "@/components/QueryForm/const"
|
|
|
+import { version } from "../../components/TableData"
|
|
|
+
|
|
|
+function columnsNature12(rechargeTrendHandle: (data: any) => void): { label: string, fieldSHow?: { label: string, saveField: string, defaultValue: any[], data: any[] }, data: any[] }[] {
|
|
|
+
|
|
|
+ const getFieldDta = () => {
|
|
|
+ let defaultValue = [ // 默认展示字段
|
|
|
+ { label: '充值人数', key: 'rechargeUserCount', type: '付费趋势' },
|
|
|
+ { label: '充值金额', key: 'rechargeMoney', type: '付费趋势' },
|
|
|
+ { label: '增', key: 'increase', type: '付费趋势' },
|
|
|
+ { label: '回', key: 'back', type: '付费趋势' },
|
|
|
+ { label: '倍', key: 'multiples', type: '付费趋势' },
|
|
|
+ ]
|
|
|
+ let mySelectFieldData = localStorage.getItem(`myAdFieldConfig${version}_游戏每日数据`)
|
|
|
+ let newSelectFieldData: any = {}
|
|
|
+ if (mySelectFieldData) {
|
|
|
+ newSelectFieldData = JSON.parse(mySelectFieldData).date_field
|
|
|
+ } else {
|
|
|
+ newSelectFieldData = defaultValue
|
|
|
+ }
|
|
|
+ return newSelectFieldData
|
|
|
+ }
|
|
|
+
|
|
|
+ // 买量付费趋势
|
|
|
+ const buyC = Array(29).fill('').map((_item: string, index: number) => {
|
|
|
+ let field = `buyAmountD${index + 1}Trend`
|
|
|
+ let data = {
|
|
|
+ title: `D${index + 1}（买）`,
|
|
|
+ dataIndex: `D${index + 1}Buy`,
|
|
|
+ label: "买量付费趋势",
|
|
|
+ align: "center",
|
|
|
+ width: 110,
|
|
|
+ render: (a: any, b: any) => {
|
|
|
+ let fieldData = getFieldDta()
|
|
|
+ if (fieldData?.length > 0) {
|
|
|
+ let data: any = {}
|
|
|
+ let keyS: string[] = fieldData?.map((item: any) => item.key)
|
|
|
+ switch (fieldData[0].type) {
|
|
|
+ case '付费趋势':
|
|
|
+ if (b?.[field]) {
|
|
|
+ data = b?.[field]
|
|
|
+ return <div className={style.dbox}>
|
|
|
+ {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</span></span>}
|
|
|
+ {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金：<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
|
|
|
+ {keyS?.includes('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
|
|
|
+ {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
|
|
|
+ {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples?.toFixed(2)}</span></span>}
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ },
|
|
|
+ }
|
|
|
+ return data
|
|
|
+ })
|
|
|
+
|
|
|
+ let natureDefaultStart = 14
|
|
|
+ // 自然量
|
|
|
+ const natureC = Array(29).fill('').map((_item: string, index: number) => {
|
|
|
+ let field = `natureAmountD${index + 1}Trend`
|
|
|
+ let data = {
|
|
|
+ title: `D${index + 1}（自）`,
|
|
|
+ dataIndex: `D${index + 1}Nature`,
|
|
|
+ label: "自然量付费趋势",
|
|
|
+ align: "center",
|
|
|
+ width: 110,
|
|
|
+ render: (a: any, b: any) => {
|
|
|
+ let fieldData = getFieldDta()
|
|
|
+ if (fieldData?.length > 0) {
|
|
|
+ let data: any = {}
|
|
|
+ let keyS: string[] = fieldData?.map((item: any) => item.key)
|
|
|
+ switch (fieldData[0].type) {
|
|
|
+ case '付费趋势':
|
|
|
+ if (b?.[field]) {
|
|
|
+ data = b?.[field]
|
|
|
+ return <div className={style.dbox}>
|
|
|
+ {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</span></span>}
|
|
|
+ {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金：<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
|
|
|
+ {keyS?.includes('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
|
|
|
+ {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
|
|
|
+ {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples?.toFixed(2)}</span></span>}
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ },
|
|
|
+ }
|
|
|
+ if (index < 29) {
|
|
|
+ data['default'] = natureDefaultStart + index
|
|
|
+ }
|
|
|
+ return data
|
|
|
+ })
|
|
|
+
|
|
|
+ // 总付费趋势
|
|
|
+ const zC = Array(29).fill('').map((_item: string, index: number) => {
|
|
|
+ let field = `amountD${index + 1}Trend`
|
|
|
+ let data = {
|
|
|
+ title: `D${index + 1}（总）`,
|
|
|
+ dataIndex: `D${index + 1}`,
|
|
|
+ label: "总付费趋势",
|
|
|
+ align: "center",
|
|
|
+ width: 110,
|
|
|
+ render: (a: any, b: any) => {
|
|
|
+ let fieldData = getFieldDta()
|
|
|
+ if (fieldData?.length > 0) {
|
|
|
+ let data: any = {}
|
|
|
+ let keyS: string[] = fieldData?.map((item: any) => item.key)
|
|
|
+ switch (fieldData[0].type) {
|
|
|
+ case '付费趋势':
|
|
|
+ if (b?.[field]) {
|
|
|
+ data = b?.[field]
|
|
|
+ return <div className={style.dbox}>
|
|
|
+ {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</span></span>}
|
|
|
+ {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金：<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
|
|
|
+ {keyS?.includes('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
|
|
|
+ {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
|
|
|
+ {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples?.toFixed(2)}</span></span>}
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ },
|
|
|
+ }
|
|
|
+ return data
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ label: '游戏信息',
|
|
|
+ data: [
|
|
|
+ { title: '推广游戏名称', dataIndex: 'gameName', label: '游戏信息', align: 'center', width: 70, default: 2 },
|
|
|
+ {
|
|
|
+ title: '推广游戏应用类型', dataIndex: 'gameClassify', label: '游戏信息', align: 'center', width: 80,
|
|
|
+ render: (a: string) => (<span>{gameClassifyEnum[a]}</span>)
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '时间',
|
|
|
+ data: [
|
|
|
+ { title: '日期', dataIndex: 'costDate', label: '时间', align: 'center', width: 90, default: 1 },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '消耗',
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ title: '消耗', dataIndex: 'cost', label: '消耗', align: 'center', width: 90, sorter: true, default: 3,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '买量用户数据',
|
|
|
+ data: [
|
|
|
+ { title: '买量注册人数', dataIndex: 'buyRegNum', label: '买量用户数据', align: 'center', width: 70, sorter: true },
|
|
|
+ { title: '买量注册成本', dataIndex: 'buyRegCost', label: '买量用户数据', align: 'center', width: 70, sorter: true }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '自然量用户数据',
|
|
|
+ data: [
|
|
|
+ { title: '自然量注册人数', dataIndex: 'natureRegNum', label: '自然量用户数据', align: 'center', width: 70, default: 4, sorter: true },
|
|
|
+ { title: '自然量注册成本', dataIndex: 'natureRegCost', label: '自然量用户数据', align: 'center', width: 70, default: 5, sorter: true }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '总用户数据',
|
|
|
+ data: [
|
|
|
+ { title: '注册人数', dataIndex: 'regNum', label: '总用户数据', align: 'center', width: 70, sorter: true },
|
|
|
+ { title: '注册成本', dataIndex: 'regCost', label: '总用户数据', align: 'center', width: 70, sorter: true }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '买量付费数据',
|
|
|
+ data: [
|
|
|
+ { title: '买量首日新用户充值次数', dataIndex: 'buyFirstNewUserAmountCount', label: '买量付费数据', align: 'center', width: 70, sorter: true },
|
|
|
+ { title: '买量首日新用户充值人数', dataIndex: 'buyFirstNewUserAmountNum', label: '买量付费数据', align: 'center', width: 70, sorter: true },
|
|
|
+ {
|
|
|
+ title: '买量首日新用户充值金额', dataIndex: 'buyFirstNewUserAmount', label: '买量付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ { title: '买量老用户充值次数', dataIndex: 'buyOldUserCount', label: '买量付费数据', align: 'center', width: 70, sorter: true },
|
|
|
+ { title: '买量老用户充值人数', dataIndex: 'buyOldUserNum', label: '买量付费数据', align: 'center', width: 70, sorter: true },
|
|
|
+ {
|
|
|
+ title: '买量老用户充值金额', dataIndex: 'buyOldUserAmount', label: '买量付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ { title: '买量账面充值次数', dataIndex: 'buyAmountCount', label: '买量付费数据', align: 'center', width: 70, sorter: true },
|
|
|
+ { title: '买量账面充值人数', dataIndex: 'buyAmountNum', label: '买量付费数据', align: 'center', width: 70, sorter: true },
|
|
|
+ {
|
|
|
+ title: '买量账面充值金额', dataIndex: 'buyAmount', label: '买量付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ { title: '买量新用户累计充值次数', dataIndex: 'buyNewUserTotalAmountCount', label: '买量付费数据', align: 'center', width: 70, sorter: true },
|
|
|
+ { title: '买量新用户累计充值人数', dataIndex: 'buyNewUserTotalAmountNum', label: '买量付费数据', align: 'center', width: 70, sorter: true },
|
|
|
+ {
|
|
|
+ title: '买量新用户累计充值金额', dataIndex: 'buyNewUserTotalAmount', label: '买量付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '买量首日ROI', dataIndex: 'buyFirstRoi', label: '买量付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '买量总ROI', dataIndex: 'buyTotalRoi', label: '买量付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '买量首日付费率', dataIndex: 'buyFirstAmountRate', label: '买量付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '买量当天付费率', dataIndex: 'buyTodayAmountRate', label: '买量付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '买量新用户付费比', dataIndex: 'buyNewUserRate', label: '买量付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '买量首日客单价', dataIndex: 'buyFirstAvgAmount', label: '买量付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '买量首日充值成本', dataIndex: 'buyFirstNewUserRechargeCost', label: '买量付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '买量总充值成本', dataIndex: 'buyTotalRechargeCost', label: '买量付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '买量当天客单价', dataIndex: 'buyTodayAvgAmount', label: '买量付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '买量账面客单价', dataIndex: 'buyAvgAmount', label: '买量付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '买量复充率', dataIndex: 'buyUserAgainRate', label: '买量付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '买量新增注册ARPPU', dataIndex: 'buyRegUserArpu', label: '买量付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '买量首日付费ARPPU', dataIndex: 'buyFirstAmountArpu', label: '买量付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '买量当天付费ARPPU', dataIndex: 'buyTodayAmountArpu', label: '买量付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '买量账面ARPPU', dataIndex: 'buyAmountArpu', label: '买量付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '自然量付费数据',
|
|
|
+ data: [
|
|
|
+ { title: '自然量首日新用户充值次数', dataIndex: 'natureFirstNewUserAmountCount', label: '自然量付费数据', align: 'center', width: 70, sorter: true },
|
|
|
+ { title: '自然量首日新用户充值人数', dataIndex: 'natureFirstNewUserAmountNum', label: '自然量付费数据', align: 'center', width: 70, default: 6, sorter: true },
|
|
|
+ {
|
|
|
+ title: '自然量首日新用户充值金额', dataIndex: 'natureFirstNewUserAmount', label: '自然量付费数据', align: 'center', width: 70, default: 7, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ { title: '自然量老用户充值次数', dataIndex: 'natureOldUserCount', label: '自然量付费数据', align: 'center', width: 70, sorter: true },
|
|
|
+ { title: '自然量老用户充值人数', dataIndex: 'natureOldUserNum', label: '自然量付费数据', align: 'center', width: 70, sorter: true },
|
|
|
+ {
|
|
|
+ title: '自然量老用户充值金额', dataIndex: 'natureOldUserAmount', label: '自然量付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ { title: '自然量账面充值次数', dataIndex: 'natureAmountCount', label: '自然量付费数据', align: 'center', width: 70, sorter: true },
|
|
|
+ { title: '自然量账面充值人数', dataIndex: 'natureAmountNum', label: '自然量付费数据', align: 'center', width: 70, sorter: true },
|
|
|
+ {
|
|
|
+ title: '自然量账面充值金额', dataIndex: 'natureAmount', label: '自然量付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ { title: '自然量新用户累计充值次数', dataIndex: 'natureNewUserTotalAmountCount', label: '自然量付费数据', align: 'center', width: 70, sorter: true },
|
|
|
+ { title: '自然量新用户累计充值人数', dataIndex: 'natureNewUserTotalAmountNum', label: '自然量付费数据', align: 'center', width: 70, default: 8, sorter: true },
|
|
|
+ {
|
|
|
+ title: '自然量新用户累计充值金额', dataIndex: 'natureNewUserTotalAmount', label: '自然量付费数据', align: 'center', width: 70, default: 9, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '自然量首日ROI', dataIndex: 'natureFirstRoi', label: '自然量付费数据', align: 'center', width: 70, sorter: true, default: 10,
|
|
|
+ render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '自然量总ROI', dataIndex: 'natureTotalRoi', label: '自然量付费数据', align: 'center', width: 70, sorter: true, default: 11,
|
|
|
+ render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '自然量首日付费率', dataIndex: 'natureFirstAmountRate', label: '自然量付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '自然量当天付费率', dataIndex: 'natureTodayAmountRate', label: '自然量付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '自然量新用户付费比', dataIndex: 'natureNewUserRate', label: '自然量付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '自然量首日客单价', dataIndex: 'natureFirstAvgAmount', label: '自然量付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '自然量首日充值成本', dataIndex: 'natureFirstNewUserRechargeCost', label: '自然量付费数据', align: 'center', width: 70, default: 12, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '自然量总充值成本', dataIndex: 'natureTotalRechargeCost', label: '自然量付费数据', align: 'center', width: 70, default: 13, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '自然量当天客单价', dataIndex: 'natureTodayAvgAmount', label: '自然量付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '自然量账面客单价', dataIndex: 'natureAvgAmount', label: '自然量付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '自然量复充率', dataIndex: 'natureUserAgainRate', label: '自然量付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '自然量新增注册ARPPU', dataIndex: 'natureRegUserArpu', label: '自然量付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '自然量首日付费ARPPU', dataIndex: 'natureFirstAmountArpu', label: '自然量付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '自然量当天付费ARPPU', dataIndex: 'natureTodayAmountArpu', label: '自然量付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '自然量账面ARPPU', dataIndex: 'natureAmountArpu', label: '自然量付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '总付费数据',
|
|
|
+ data: [
|
|
|
+ { title: '总首日新用户充值次数', dataIndex: 'firstNewUserAmountCount', label: '总付费数据', align: 'center', width: 70, sorter: true },
|
|
|
+ { title: '总首日新用户充值人数', dataIndex: 'firstNewUserAmountNum', label: '总付费数据', align: 'center', width: 70, sorter: true },
|
|
|
+ {
|
|
|
+ title: '总首日新用户充值金额', dataIndex: 'firstNewUserAmount', label: '总付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ { title: '总老用户充值次数', dataIndex: 'oldUserCount', label: '总付费数据', align: 'center', width: 70, sorter: true },
|
|
|
+ { title: '总老用户充值人数', dataIndex: 'oldUserNum', label: '总付费数据', align: 'center', width: 70, sorter: true },
|
|
|
+ {
|
|
|
+ title: '总老用户充值金额', dataIndex: 'oldUserAmount', label: '总付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ { title: '总账面充值次数', dataIndex: 'amountCount', label: '总付费数据', align: 'center', width: 70, sorter: true },
|
|
|
+ { title: '总账面充值人数', dataIndex: 'amountNum', label: '总付费数据', align: 'center', width: 70, sorter: true },
|
|
|
+ {
|
|
|
+ title: '总账面充值金额', dataIndex: 'amount', label: '总付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ { title: '总新用户累计充值次数', dataIndex: 'newUserTotalAmountCount', label: '总付费数据', align: 'center', width: 70, sorter: true },
|
|
|
+ { title: '总新用户累计充值人数', dataIndex: 'newUserTotalAmountNum', label: '总付费数据', align: 'center', width: 70, sorter: true },
|
|
|
+ {
|
|
|
+ title: '总新用户累计充值金额', dataIndex: 'newUserTotalAmount', label: '总付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '总首日ROI', dataIndex: 'firstRoi', label: '总付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '总总ROI', dataIndex: 'totalRoi', label: '总付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '总首日付费率', dataIndex: 'firstAmountRate', label: '总付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '总当天付费率', dataIndex: 'todayAmountRate', label: '总付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '总新用户付费比', dataIndex: 'newUserRate', label: '总付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '总首日客单价', dataIndex: 'firstAvgAmount', label: '总付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '总首日充值成本', dataIndex: 'firstNewUserRechargeCost', label: '总付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '总总充值成本', dataIndex: 'totalRechargeCost', label: '总付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '总当天客单价', dataIndex: 'todayAvgAmount', label: '总付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '总账面客单价', dataIndex: 'avgAmount', label: '总付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '总复充率', dataIndex: 'userAgainRate', label: '总付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '总新增注册ARPPU', dataIndex: 'regUserArpu', label: '总付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '总首日付费ARPPU', dataIndex: 'firstAmountArpu', label: '总付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '总当天付费ARPPU', dataIndex: 'todayAmountArpu', label: '总付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '总账面ARPPU', dataIndex: 'amountArpu', label: '总付费数据', align: 'center', width: 70, sorter: true,
|
|
|
+ render: (a: string) => <Statistic value={a || 0} />
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ fieldSHow: {
|
|
|
+ label: '付费趋势区间字段展示',
|
|
|
+ saveField: 'date_field',
|
|
|
+ defaultValue: [ // 默认展示字段
|
|
|
+ { label: '充值人数', key: 'rechargeUserCount', type: '付费趋势' },
|
|
|
+ { label: '充值金额', key: 'rechargeMoney', type: '付费趋势' },
|
|
|
+ { label: '增', key: 'increase', type: '付费趋势' },
|
|
|
+ { label: '回', key: 'back', type: '付费趋势' },
|
|
|
+ { label: '倍', key: 'multiples', type: '付费趋势' },
|
|
|
+ ],
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ label: '付费趋势',
|
|
|
+ data: [
|
|
|
+ { label: '充值人数', key: 'rechargeUserCount', type: '付费趋势' },
|
|
|
+ { label: '充值金额', key: 'rechargeMoney', type: '付费趋势' },
|
|
|
+ { label: '增', key: 'increase', type: '付费趋势' },
|
|
|
+ { label: '回', key: 'back', type: '付费趋势' },
|
|
|
+ { label: '倍', key: 'multiples', type: '付费趋势' },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ label: '买量付费趋势',
|
|
|
+ data: [
|
|
|
+ ...buyC
|
|
|
+ ,
|
|
|
+ {
|
|
|
+ title: "D30（买）",
|
|
|
+ dataIndex: "D30Buy",
|
|
|
+ label: "买量付费趋势",
|
|
|
+ align: "center",
|
|
|
+ width: 110,
|
|
|
+ render: (a: any, b: any) => {
|
|
|
+ let fieldData = getFieldDta()
|
|
|
+ if (fieldData?.length > 0) {
|
|
|
+ let data: any = {}
|
|
|
+ let keyS: string[] = fieldData?.map((item: any) => item.key)
|
|
|
+ switch (fieldData[0].type) {
|
|
|
+ case '付费趋势':
|
|
|
+ if (b?.buyAmountM1Trend) {
|
|
|
+ data = b?.buyAmountM1Trend
|
|
|
+ return <div className={style.dbox}>
|
|
|
+ {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</span></span>}
|
|
|
+ {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金：<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
|
|
|
+ {keyS?.includes('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
|
|
|
+ {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
|
|
|
+ {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples?.toFixed(2)}</span></span>}
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ },
|
|
|
+ }, {
|
|
|
+ title: "M2（买）",
|
|
|
+ dataIndex: "M2Buy",
|
|
|
+ label: "买量付费趋势",
|
|
|
+ align: "center",
|
|
|
+ width: 110,
|
|
|
+ render: (a: any, b: any) => {
|
|
|
+ let fieldData = getFieldDta()
|
|
|
+ if (fieldData?.length > 0) {
|
|
|
+ let data: any = {}
|
|
|
+ let keyS: string[] = fieldData?.map((item: any) => item.key)
|
|
|
+ switch (fieldData[0].type) {
|
|
|
+ case '付费趋势':
|
|
|
+ if (b?.buyAmountM2Trend) {
|
|
|
+ data = b?.buyAmountM2Trend
|
|
|
+ return <div className={style.dbox}>
|
|
|
+ {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</span></span>}
|
|
|
+ {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金：<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
|
|
|
+ {keyS?.includes('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
|
|
|
+ {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
|
|
|
+ {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples?.toFixed(2)}</span></span>}
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ },
|
|
|
+ }, {
|
|
|
+ title: "M3（买）",
|
|
|
+ dataIndex: "M3Buy",
|
|
|
+ label: "买量付费趋势",
|
|
|
+ align: "center",
|
|
|
+ width: 110,
|
|
|
+ render: (a: any, b: any) => {
|
|
|
+ let fieldData = getFieldDta()
|
|
|
+ if (fieldData?.length > 0) {
|
|
|
+ let data: any = {}
|
|
|
+ let keyS: string[] = fieldData?.map((item: any) => item.key)
|
|
|
+ switch (fieldData[0].type) {
|
|
|
+ case '付费趋势':
|
|
|
+ if (b?.buyAmountM3Trend) {
|
|
|
+ data = b?.buyAmountM3Trend
|
|
|
+ return <div className={style.dbox}>
|
|
|
+ {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</span></span>}
|
|
|
+ {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金：<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
|
|
|
+ {keyS?.includes('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
|
|
|
+ {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
|
|
|
+ {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples?.toFixed(2)}</span></span>}
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ },
|
|
|
+ }, {
|
|
|
+ title: "M6（买）",
|
|
|
+ dataIndex: "M6Buy",
|
|
|
+ label: "买量付费趋势",
|
|
|
+ align: "center",
|
|
|
+ width: 110,
|
|
|
+ render: (a: any, b: any) => {
|
|
|
+ let fieldData = getFieldDta()
|
|
|
+ if (fieldData?.length > 0) {
|
|
|
+ let data: any = {}
|
|
|
+ let keyS: string[] = fieldData?.map((item: any) => item.key)
|
|
|
+ switch (fieldData[0].type) {
|
|
|
+ case '付费趋势':
|
|
|
+ if (b?.buyAmountM6Trend) {
|
|
|
+ data = b?.buyAmountM6Trend
|
|
|
+ return <div className={style.dbox}>
|
|
|
+ {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</span></span>}
|
|
|
+ {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金：<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
|
|
|
+ {keyS?.includes('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
|
|
|
+ {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
|
|
|
+ {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples?.toFixed(2)}</span></span>}
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ },
|
|
|
+ }, {
|
|
|
+ title: "总（买）",
|
|
|
+ dataIndex: "totalBuy",
|
|
|
+ label: "买量付费趋势",
|
|
|
+ align: "center",
|
|
|
+ width: 110,
|
|
|
+ render: (a: any, b: any) => {
|
|
|
+ let fieldData = getFieldDta()
|
|
|
+ if (fieldData?.length > 0) {
|
|
|
+ let data: any = {}
|
|
|
+ let keyS: string[] = fieldData?.map((item: any) => item.key)
|
|
|
+ switch (fieldData[0].type) {
|
|
|
+ case '付费趋势':
|
|
|
+ if (b?.buyAmountSumTrend) {
|
|
|
+ data = b?.buyAmountSumTrend
|
|
|
+ return <div className={style.dbox}>
|
|
|
+ {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</span></span>}
|
|
|
+ {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金：<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
|
|
|
+ {keyS?.includes('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
|
|
|
+ {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
|
|
|
+ {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples?.toFixed(2)}</span></span>}
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ },
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '自然量付费趋势',
|
|
|
+ data: [
|
|
|
+ ...natureC,
|
|
|
+ {
|
|
|
+ title: "D30（自）",
|
|
|
+ dataIndex: "D30Nature",
|
|
|
+ label: "自然量付费趋势",
|
|
|
+ align: "center",
|
|
|
+ default: 43,
|
|
|
+ width: 110,
|
|
|
+ render: (a: any, b: any) => {
|
|
|
+ let fieldData = getFieldDta()
|
|
|
+ if (fieldData?.length > 0) {
|
|
|
+ let data: any = {}
|
|
|
+ let keyS: string[] = fieldData?.map((item: any) => item.key)
|
|
|
+ switch (fieldData[0].type) {
|
|
|
+ case '付费趋势':
|
|
|
+ if (b?.natureAmountM1Trend) {
|
|
|
+ data = b?.natureAmountM1Trend
|
|
|
+ return <div className={style.dbox}>
|
|
|
+ {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</span></span>}
|
|
|
+ {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金：<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
|
|
|
+ {keyS?.includes('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
|
|
|
+ {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
|
|
|
+ {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples?.toFixed(2)}</span></span>}
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ },
|
|
|
+ }, {
|
|
|
+ title: "M2（自）",
|
|
|
+ dataIndex: "M2Nature",
|
|
|
+ label: "自然量付费趋势",
|
|
|
+ align: "center",
|
|
|
+ width: 110,
|
|
|
+ render: (a: any, b: any) => {
|
|
|
+ let fieldData = getFieldDta()
|
|
|
+ if (fieldData?.length > 0) {
|
|
|
+ let data: any = {}
|
|
|
+ let keyS: string[] = fieldData?.map((item: any) => item.key)
|
|
|
+ switch (fieldData[0].type) {
|
|
|
+ case '付费趋势':
|
|
|
+ if (b?.natureAmountM2Trend) {
|
|
|
+ data = b?.natureAmountM2Trend
|
|
|
+ return <div className={style.dbox}>
|
|
|
+ {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</span></span>}
|
|
|
+ {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金：<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
|
|
|
+ {keyS?.includes('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
|
|
|
+ {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
|
|
|
+ {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples?.toFixed(2)}</span></span>}
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ },
|
|
|
+ }, {
|
|
|
+ title: "M3（自）",
|
|
|
+ dataIndex: "M3Nature",
|
|
|
+ label: "自然量付费趋势",
|
|
|
+ align: "center",
|
|
|
+ width: 110,
|
|
|
+ render: (a: any, b: any) => {
|
|
|
+ let fieldData = getFieldDta()
|
|
|
+ if (fieldData?.length > 0) {
|
|
|
+ let data: any = {}
|
|
|
+ let keyS: string[] = fieldData?.map((item: any) => item.key)
|
|
|
+ switch (fieldData[0].type) {
|
|
|
+ case '付费趋势':
|
|
|
+ if (b?.natureAmountM3Trend) {
|
|
|
+ data = b?.natureAmountM3Trend
|
|
|
+ return <div className={style.dbox}>
|
|
|
+ {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</span></span>}
|
|
|
+ {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金：<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
|
|
|
+ {keyS?.includes('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
|
|
|
+ {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
|
|
|
+ {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples?.toFixed(2)}</span></span>}
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ },
|
|
|
+ }, {
|
|
|
+ title: "M6（自）",
|
|
|
+ dataIndex: "M6Nature",
|
|
|
+ label: "自然量付费趋势",
|
|
|
+ align: "center",
|
|
|
+ width: 110,
|
|
|
+ render: (a: any, b: any) => {
|
|
|
+ let fieldData = getFieldDta()
|
|
|
+ if (fieldData?.length > 0) {
|
|
|
+ let data: any = {}
|
|
|
+ let keyS: string[] = fieldData?.map((item: any) => item.key)
|
|
|
+ switch (fieldData[0].type) {
|
|
|
+ case '付费趋势':
|
|
|
+ if (b?.natureAmountM6Trend) {
|
|
|
+ data = b?.natureAmountM6Trend
|
|
|
+ return <div className={style.dbox}>
|
|
|
+ {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</span></span>}
|
|
|
+ {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金：<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
|
|
|
+ {keyS?.includes('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
|
|
|
+ {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
|
|
|
+ {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples?.toFixed(2)}</span></span>}
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ },
|
|
|
+ }, {
|
|
|
+ title: "总（自）",
|
|
|
+ dataIndex: "totalNature",
|
|
|
+ label: "自然量付费趋势",
|
|
|
+ align: "center",
|
|
|
+ width: 110,
|
|
|
+ render: (a: any, b: any) => {
|
|
|
+ let fieldData = getFieldDta()
|
|
|
+ if (fieldData?.length > 0) {
|
|
|
+ let data: any = {}
|
|
|
+ let keyS: string[] = fieldData?.map((item: any) => item.key)
|
|
|
+ switch (fieldData[0].type) {
|
|
|
+ case '付费趋势':
|
|
|
+ if (b?.natureAmountSumTrend) {
|
|
|
+ data = b?.natureAmountSumTrend
|
|
|
+ return <div className={style.dbox}>
|
|
|
+ {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</span></span>}
|
|
|
+ {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金：<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
|
|
|
+ {keyS?.includes('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
|
|
|
+ {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
|
|
|
+ {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples?.toFixed(2)}</span></span>}
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ },
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '总付费趋势',
|
|
|
+ data: [
|
|
|
+ ...zC
|
|
|
+ , {
|
|
|
+ title: "D30（总）",
|
|
|
+ dataIndex: "D30",
|
|
|
+ label: "总付费趋势",
|
|
|
+ align: "center",
|
|
|
+ width: 110,
|
|
|
+ render: (a: any, b: any) => {
|
|
|
+ let fieldData = getFieldDta()
|
|
|
+ if (fieldData?.length > 0) {
|
|
|
+ let data: any = {}
|
|
|
+ let keyS: string[] = fieldData?.map((item: any) => item.key)
|
|
|
+ switch (fieldData[0].type) {
|
|
|
+ case '付费趋势':
|
|
|
+ if (b?.amountM1Trend) {
|
|
|
+ data = b?.amountM1Trend
|
|
|
+ return <div className={style.dbox}>
|
|
|
+ {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</span></span>}
|
|
|
+ {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金：<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
|
|
|
+ {keyS?.includes('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
|
|
|
+ {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
|
|
|
+ {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples?.toFixed(2)}</span></span>}
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ },
|
|
|
+ }, {
|
|
|
+ title: "M2（总）",
|
|
|
+ dataIndex: "M2",
|
|
|
+ label: "总付费趋势",
|
|
|
+ align: "center",
|
|
|
+ width: 110,
|
|
|
+ render: (a: any, b: any) => {
|
|
|
+ let fieldData = getFieldDta()
|
|
|
+ if (fieldData?.length > 0) {
|
|
|
+ let data: any = {}
|
|
|
+ let keyS: string[] = fieldData?.map((item: any) => item.key)
|
|
|
+ switch (fieldData[0].type) {
|
|
|
+ case '付费趋势':
|
|
|
+ if (b?.amountM2Trend) {
|
|
|
+ data = b?.amountM2Trend
|
|
|
+ return <div className={style.dbox}>
|
|
|
+ {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</span></span>}
|
|
|
+ {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金：<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
|
|
|
+ {keyS?.includes('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
|
|
|
+ {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
|
|
|
+ {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples?.toFixed(2)}</span></span>}
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ },
|
|
|
+ }, {
|
|
|
+ title: "M3（总）",
|
|
|
+ dataIndex: "M3",
|
|
|
+ label: "总付费趋势",
|
|
|
+ align: "center",
|
|
|
+ width: 110,
|
|
|
+ render: (a: any, b: any) => {
|
|
|
+ let fieldData = getFieldDta()
|
|
|
+ if (fieldData?.length > 0) {
|
|
|
+ let data: any = {}
|
|
|
+ let keyS: string[] = fieldData?.map((item: any) => item.key)
|
|
|
+ switch (fieldData[0].type) {
|
|
|
+ case '付费趋势':
|
|
|
+ if (b?.amountM3Trend) {
|
|
|
+ data = b?.amountM3Trend
|
|
|
+ return <div className={style.dbox}>
|
|
|
+ {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</span></span>}
|
|
|
+ {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金：<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
|
|
|
+ {keyS?.includes('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
|
|
|
+ {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
|
|
|
+ {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples?.toFixed(2)}</span></span>}
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ },
|
|
|
+ }, {
|
|
|
+ title: "M6（总）",
|
|
|
+ dataIndex: "M6",
|
|
|
+ label: "总付费趋势",
|
|
|
+ align: "center",
|
|
|
+ width: 110,
|
|
|
+ render: (a: any, b: any) => {
|
|
|
+ let fieldData = getFieldDta()
|
|
|
+ if (fieldData?.length > 0) {
|
|
|
+ let data: any = {}
|
|
|
+ let keyS: string[] = fieldData?.map((item: any) => item.key)
|
|
|
+ switch (fieldData[0].type) {
|
|
|
+ case '付费趋势':
|
|
|
+ if (b?.amountM6Trend) {
|
|
|
+ data = b?.amountM6Trend
|
|
|
+ return <div className={style.dbox}>
|
|
|
+ {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</span></span>}
|
|
|
+ {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金：<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
|
|
|
+ {keyS?.includes('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
|
|
|
+ {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
|
|
|
+ {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples?.toFixed(2)}</span></span>}
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ },
|
|
|
+ }, {
|
|
|
+ title: "总（总）",
|
|
|
+ dataIndex: "total",
|
|
|
+ label: "总付费趋势",
|
|
|
+ align: "center",
|
|
|
+ width: 110,
|
|
|
+ render: (a: any, b: any) => {
|
|
|
+ let fieldData = getFieldDta()
|
|
|
+ if (fieldData?.length > 0) {
|
|
|
+ let data: any = {}
|
|
|
+ let keyS: string[] = fieldData?.map((item: any) => item.key)
|
|
|
+ switch (fieldData[0].type) {
|
|
|
+ case '付费趋势':
|
|
|
+ if (b?.amountSumTrend) {
|
|
|
+ data = b?.amountSumTrend
|
|
|
+ return <div className={style.dbox}>
|
|
|
+ {keyS?.includes('rechargeUserCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</span></span>}
|
|
|
+ {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金：<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
|
|
|
+ {keyS?.includes('increase') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
|
|
|
+ {keyS?.includes('back') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
|
|
|
+ {keyS?.includes('multiples') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples?.toFixed(2)}</span></span>}
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+ },
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '操作',
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'cz',
|
|
|
+ label: '操作',
|
|
|
+ default: 44,
|
|
|
+ align: 'center',
|
|
|
+ width: 75,
|
|
|
+ render: (a: number, b: any) => {
|
|
|
+ if (b?.costDate === '总计') {
|
|
|
+ return '--'
|
|
|
+ }
|
|
|
+ return <a onClick={() => rechargeTrendHandle(b)}>复充趋势</a>
|
|
|
+ },
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+}
|
|
|
+
|
|
|
+export default columnsNature12
|
