qc-gameDataStatistics/src/pages/gameDataStatistics/gameData/ltv/tableConfig.tsx

import React from "react"
import { Statistic } from "antd"
import { gameClassifyEnum } from "@/components/QueryForm/const"
import WidthEllipsis from "@/components/widthEllipsis"
import moment from "moment"

function columnsUser12(): { label: string, fieldSHow?: { label: string, saveField: string, defaultValue: any[], data: any[] }, data: any[] }[] {

    let defaultStart = 13
    // 用户LTV
    const userLtvDay = Array(90).fill('').map((_item: string, index: number) => {
        let field = `userLtv${index + 1}`
        let data = {
            title: `注册LTV_D${index + 1}`,
            dataIndex: field,
            label: "注册LTV",
            align: "center",
            width: 70,
            render: (a: string, b: any) => {
                let date1 = moment()
                if (b?.costDate === '总计') {
                    if (b?.beginDay) {
                        date1 = moment(b?.beginDay)
                    } else {
                        date1 = moment()
                    }
                } else {
                    date1 = moment(b.costDate)
                }
                let dt = moment()
                let day = dt.diff(date1, 'day');
                if (index <= day) {
                    return <Statistic value={a || 0} />
                }
                return '--'
            }
        }
        data['default'] = defaultStart + index
        return data
    })

    // 用户LTV月
    let defaultStartM = 103
    let userLtvMonth = [4, 5, 6, 7, 8, 9, 10, 11].map((item, index) => {
        let field = `userLtvM${item}`
        let data = {
            title: `注册LTV_M${item}`,
            dataIndex: field,
            label: "注册LTV",
            align: "center",
            width: 70,
            render: (a: string, b: any) => {
                let date1 = moment()
                if (b?.costDate === '总计') {
                    if (b?.beginDay) {
                        date1 = moment(b?.beginDay)
                    } else {
                        date1 = moment()
                    }
                } else {
                    date1 = moment(b.costDate)
                }
                let dt = moment()
                let day = dt.diff(date1, 'day');
                if (item * 30 <= day) {
                    return <Statistic value={a || 0} />
                }
                return '--'
            }
        }
        data['default'] = defaultStartM + index
        return data
    })
    userLtvMonth.push({
        title: `注册LTV_Y1`,
        dataIndex: 'userLtvY1',
        label: "注册LTV",
        align: "center",
        width: 70,
        default: 111,
        render: (a: string, b: any) => {
            let date1 = moment()
            if (b?.costDate === '总计') {
                if (b?.beginDay) {
                    date1 = moment(b?.beginDay)
                } else {
                    date1 = moment()
                }
            } else {
                date1 = moment(b.costDate)
            }
            let dt = moment()
            let day = dt.diff(date1, 'day');
            if (365 <= day) {
                return <Statistic value={a || 0} />
            }
            return '--'
        }
    } as any)
    
    userLtvMonth.push({
        title: `注册LTV_总`,
        dataIndex: 'userLtvTotal',
        label: "注册LTV",
        align: "center",
        width: 70,
        default: 112,
        render: (a: string) => <Statistic value={a || 0} />
    } as any)


    // 创角LTV
    const roleLtvDay = Array(90).fill('').map((_item: string, index: number) => {
        let field = `roleLtv${index + 1}`
        let data = {
            title: `创角LTV_D${index + 1}`,
            dataIndex: field,
            label: "创角LTV",
            align: "center",
            width: 70,
            render: (a: string, b: any) => {
                let date1 = moment()
                if (b?.costDate === '总计') {
                    if (b?.beginDay) {
                        date1 = moment(b?.beginDay)
                    } else {
                        date1 = moment()
                    }
                } else {
                    date1 = moment(b.costDate)
                }
                let dt = moment()
                let day = dt.diff(date1, 'day');
                if (index <= day) {
                    return <Statistic value={a || 0} />
                }
                return '--'
            }
        }
        return data
    })

    let roleLtvMonth = [4, 5, 6, 7, 8, 9, 10, 11].map((item, index) => {
        let field = `roleLtvM${item}`
        let data = {
            title: `创角LTV_M${item}`,
            dataIndex: field,
            label: "创角LTV",
            align: "center",
            width: 70,
            render: (a: string, b: any) => {
                let date1 = moment()
                if (b?.costDate === '总计') {
                    if (b?.beginDay) {
                        date1 = moment(b?.beginDay)
                    } else {
                        date1 = moment()
                    }
                } else {
                    date1 = moment(b.costDate)
                }
                let dt = moment()
                let day = dt.diff(date1, 'day');
                if (item * 30 <= day) {
                    return <Statistic value={a || 0} />
                }
                return '--'
            }
        }
        return data
    })

    roleLtvMonth.push({
        title: `创角LTV_Y1`,
        dataIndex: 'roleLtvY1',
        label: "创角LTV",
        align: "center",
        width: 70,
        render: (a: string, b: any) => {
            let date1 = moment()
            if (b?.costDate === '总计') {
                if (b?.beginDay) {
                    date1 = moment(b?.beginDay)
                } else {
                    date1 = moment()
                }
            } else {
                date1 = moment(b.costDate)
            }
            let dt = moment()
            let day = dt.diff(date1, 'day');
            if (365 <= day) {
                return <Statistic value={a || 0} />
            }
            return '--'
        }
    } as any)

    roleLtvMonth.push({
        title: `创角LTV_总`,
        dataIndex: 'roleLtvTotal',
        label: "创角LTV",
        align: "center",
        width: 70,
        render: (a: string) => <Statistic value={a || 0} />
    } as any)

    return [
        {
            label: '游戏信息',
            data: [
                {
                    title: '推广游戏名称', dataIndex: 'gameName', label: '游戏信息', align: 'center', width: 70, default: 2,
                    render: (a: string, b: any) => (<WidthEllipsis isCopy={b?.costDate !== '总计'} value={a} />)
                },
                {
                    title: '推广游戏应用类型', dataIndex: 'gameClassify', label: '游戏信息', align: 'center', width: 80,
                    render: (a: string) => (<WidthEllipsis value={gameClassifyEnum[a]} />)
                }
            ]
        },
        {
            label: '时间',
            data: [
                {
                    title: '日期', dataIndex: 'costDate', label: '时间', align: 'center', width: 90, default: 1,
                    render: (a: string) => (<WidthEllipsis value={a} />)
                },
            ]
        },
        {
            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: 'regNum', label: '用户数据', align: 'center', width: 70, sorter: true, default: 4,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '注册成本', dataIndex: 'regCost', 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,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '首日新用户充值人数', dataIndex: 'firstNewUserAmountNum', label: '付费数据', align: 'center', width: 70, sorter: true, default: 5,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '首日新用户充值金额', dataIndex: 'firstNewUserAmount', label: '付费数据', align: 'center', width: 70, sorter: true, default: 6,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '老用户充值次数', dataIndex: 'oldUserCount', label: '付费数据', align: 'center', width: 70, sorter: true,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '老用户充值人数', dataIndex: 'oldUserNum', label: '付费数据', align: 'center', width: 70, sorter: true,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    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,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '账面充值人数', dataIndex: 'amountNum', label: '付费数据', align: 'center', width: 70, sorter: true,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    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,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '新用户累计充值人数', dataIndex: 'newUserTotalAmountNum', label: '付费数据', align: 'center', width: 70, sorter: true, default: 7,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '新用户累计充值金额', dataIndex: 'newUserTotalAmount', label: '付费数据', align: 'center', width: 70, sorter: true, default: 8,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '首日ROI', dataIndex: 'firstRoi', label: '付费数据', align: 'center', width: 70, sorter: true, default: 9,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
                {
                    title: '总ROI', dataIndex: 'totalRoi', label: '付费数据', align: 'center', width: 70, sorter: true, default: 12,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : 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 ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
                {
                    title: '至今付费率', tips: '至今付费率（总）=新用户累计充值人数/注册人数', dataIndex: 'todayAmountRate', label: '付费数据', align: 'center', width: 80, sorter: true,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : 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 ? {} : 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, default: 10,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '总充值成本', dataIndex: 'totalRechargeCost', label: '付费数据', align: 'center', width: 70, sorter: true, default: 11,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '至今客单价', tips: '至今客单价（总）=新用户累计充值金额/新用户累计充值次数', dataIndex: 'todayAvgAmount', label: '付费数据', align: 'center', width: 80, 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: '复充率', tips: '复充率（总）=新用户复充人数/新用户累计充值人数（新用户复充人数为累计充值次数n≥2）', dataIndex: 'userAgainRate', label: '付费数据', align: 'center', width: 80, sorter: true,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },

                {
                    title: '单日付费100+人数', dataIndex: 'hundredUserNum', label: '付费数据', align: 'center', width: 90, sorter: true,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '单日付费100+成本', dataIndex: 'hundredUserNumCost', label: '付费数据', align: 'center', width: 90, sorter: true,
                    render: (a: string) => <Statistic value={a || 0} precision={2} />
                },
                {
                    title: '首日创角人数', dataIndex: 'firstRoleNum', label: '付费数据', align: 'center', width: 80, sorter: true,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '创角人数', dataIndex: 'roleNum', label: '付费数据', align: 'center', width: 70, sorter: true,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '新用户累计创角人数', dataIndex: 'newUserTotalRoleNum', label: '付费数据', align: 'center', width: 85, sorter: true,
                    render: (a: string) => <Statistic value={a || 0} />
                },
                {
                    title: '首日创角人数成本', dataIndex: 'firstRoleNumCost', label: '付费数据', align: 'center', width: 80, sorter: true,
                    render: (a: string) => <Statistic value={a || 0} precision={2} />
                },
                {
                    title: '创角人数成本', dataIndex: 'roleNumCost', label: '付费数据', align: 'center', width: 75, sorter: true,
                    render: (a: string) => <Statistic value={a || 0} precision={2} />
                },
                {
                    title: '新用户累计创角人数成本', dataIndex: 'newUserTotalRoleNumCost', label: '付费数据', align: 'center', width: 90, sorter: true,
                    render: (a: string) => <Statistic value={a || 0} precision={2} />
                },
                {
                    title: '首日创角率', dataIndex: 'firstRoleNumRate', label: '付费数据', align: 'center', width: 75, sorter: true,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
                {
                    title: '创角率', dataIndex: 'roleNumRate', label: '付费数据', align: 'center', width: 75, sorter: true,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
                {
                    title: '新用户累计创角率', dataIndex: 'newUserTotalRoleNumRate', label: '付费数据', align: 'center', width: 90, sorter: true,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : 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} />
                }
            ]
        },
        {
            label: '注册LTV',
            data: [
                ...userLtvDay,
                ...userLtvMonth
            ]
        },
        {
            label: '创角LTV',
            data: [
                ...roleLtvDay,
                ...roleLtvMonth
            ]
        }
    ]
}

export default columnsUser12