qc-gameDataStatistics/src/pages/gameDataStatistics/gameServer/serverGsData/tableConfig.tsx

import { gameClassifyEnum } from "@/components/QueryForm/const"
import WidthEllipsis from "@/components/widthEllipsis"
import { Statistic } from "antd"
import React from "react"
import moment from "moment"
import style from './index.less'

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

    let defaultStart = 8
    const day = Array(90).fill('').map((_item: string, index: number) => {
        let field = `daRetention${index + 1}`
        let data = {
            title: `D${index + 1}`,
            dataIndex: field,
            label: "D1~Dn",
            align: "center",
            width: 150,
            children: [{
                title: `留存率`,
                dataIndex: field,
                key: 'retained',
                align: "center",
                width: 125,
                render: (a: any, b: any) => {
                    let date1 = moment()
                    if (b?.gameName === '总计') {
                        if (b?.dt) {
                            date1 = moment(b?.dt)
                        } else {
                            date1 = moment()
                        }
                    } else {
                        date1 = moment(b.dt)
                    }
                    let dt = moment()
                    let day = dt.diff(date1, 'day');
                    if (index <= day) {
                        let data: any = {}
                        if (b?.[field]) {
                            data = b?.[field]
                            return <div>
                                <div className={style.dbox}>
                                    <span style={{ color: '#d81b60', fontWeight: 600 }}>
                                        <span>活跃：</span>
                                        <span>{data?.activeRetention}%</span>
                                    </span>
                                    <span style={{ color: '#faad14', fontWeight: 600 }}>
                                        <span>付费：</span>
                                        <span>{data?.paidRetentionRate}%</span>
                                    </span>
                                    <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>
                                        <span>小R：</span>
                                        <span>{data?.smallR}%</span>
                                    </span>
                                    <span style={{ color: '#0f538a', fontWeight: 600 }}>
                                        <span>中R：</span>
                                        <span>{data?.mediumR}%</span>
                                    </span>
                                    <span style={{ color: '#eb2f96', fontWeight: 600 }}>
                                        <span>大R：</span>
                                        <span>{data?.largeR}%</span>
                                    </span>
                                    <span style={{ color: '#2f54eb', fontWeight: 600 }}>
                                        <span>超大R：</span>
                                        <span>{data?.superR}%</span>
                                    </span>
                                </div>
                            </div>
                        }
                        return <div style={{ height: 126, lineHeight: '126px' }}>--</div>
                    }
                    return <div style={{ height: 126, lineHeight: '126px' }}>--</div>
                }
            }]
        }
        data['default'] = defaultStart + index
        return data
    })


    return [
        {
            label: '游戏信息',
            data: [
                {
                    title: '游戏名称', dataIndex: 'parentGameName', label: '游戏信息', align: 'center', width: 90, default: 1,
                    render: (a: string) => (<WidthEllipsis value={a} />)
                },
                { title: '游戏ID', dataIndex: 'parentGameId', label: '游戏信息', align: 'center', width: 90 },
                {
                    title: '游戏应用类型', dataIndex: 'parentGameClassify', label: '游戏信息', align: 'center', width: 80, default: 2,
                    render: (a: string) => (<WidthEllipsis value={gameClassifyEnum[a]} />)
                },
                {
                    title: '区服名称', dataIndex: 'serverName', label: '游戏信息', align: 'center', width: 90, default: 3,
                    render: (a: string) => (<WidthEllipsis value={a} />)
                },
                { title: '区服ID', dataIndex: 'serverId', label: '游戏信息', align: 'center', width: 90 },
                {
                    title: '开服时间', dataIndex: 'dt', label: '游戏信息', align: 'center', width: 90, default: 4, sorter: true,
                    render: (a: any, b: any) => {
                        if (b.gameName === '总计') {
                            return '--'
                        }
                        return a
                    }
                },
            ]
        },
        {
            label: '数据',
            data: [
                {
                    title: '新用户人数', dataIndex: 'totalRegNum', label: '数据', align: 'center', width: 70, sorter: true, default: 5,
                    render: (a: number) => <Statistic value={a || 0} />
                },
                {
                    title: '创角人数', dataIndex: 'totalRoleNum', label: '数据', align: 'center', width: 70, sorter: true, default: 6,
                    render: (a: number) => <Statistic value={a || 0} />
                },
                {
                    title: '付费人数', dataIndex: 'totalAmountNum', label: '数据', align: 'center', width: 70, sorter: true, default: 7,
                    render: (a: number) => <Statistic value={a || 0} />
                }
            ]
        },
        {
            label: 'D1~Dn',
            data: [
                ...day
            ]
        }
    ]
}

export default columns12