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

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

function columns12() {

    let newArr: { label: string, data: any[] }[] = [
        {
            label: '每日流水贡献',
            data: [
                { title: 'ID', dataIndex: 'id', label: '每日流水贡献', align: 'center', width: 75 },
                { title: '游戏名称', dataIndex: 'gameName', label: '每日流水贡献', align: 'center', width: 70, default: 1 },
                { title: '游戏ID', dataIndex: 'gameId', label: '每日流水贡献', align: 'center', width: 80, default: 2, render: (a: string, b: any) => (<WidthEllipsis value={a} />) },
                {
                    title: '游戏类别', dataIndex: 'gameClassify', label: '每日流水贡献', align: 'center', width: 80, default: 3,
                    render: (a: string) => (<span>{gameClassifyEnum[a]}</span>)
                },
                { title: '买量充值金额', dataIndex: 'buyAmount', label: '每日流水贡献', align: 'center', width: 100, default: 4, sorter: true, render: (a: number, b: any) => (<Statistic value={a || 0} valueStyle={a >= 10000 ? { color: 'red' } : { color: '#0f990f' }} />) },
                { title: '自然量充值金额', dataIndex: 'natureAmount', label: '每日流水贡献', align: 'center', width: 100, default: 5, sorter: true, render: (a: number, b: any) => (<Statistic value={a || 0} valueStyle={a >= 5000 ? { color: 'red' } : { color: '#0f990f' }} />) },
                { title: '总充值金额', dataIndex: 'amount', label: '每日流水贡献', align: 'center', width: 120, default: 6, sorter: true, render: (a: number) => <Statistic value={a || 0} valueStyle={a >= 50000 ? { color: 'red' } : { color: '#0f990f' }} /> },
                {
                    title: '充值模板',
                    dataIndex: 'rechargeTemplateVOList',
                    label: '每日流水贡献',
                    align: 'center',
                    default: 7,
                    children: [
                        {
                            title: '充值模板排序',
                            dataIndex: 'amountOrderBy',
                            key: 'amountOrderBy',
                            width: 65,
                            align: 'center',
                            className: "h5BiomassClass adDataBackColorClass",
                            render: (a: any, b: any) => {
                                return <div className='h5BiomassTable'>
                                    {b?.rechargeTemplateVOList?.map((item: any, index: number) => {
                                        return <div key={'cc' + index}>
                                            <div><span>{item.amountOrderBy}</span></div>
                                        </div>
                                    })}
                                    {b?.rechargeTemplateVOList?.length < 10 && <>
                                        {Array(10 - b?.rechargeTemplateVOList?.length).fill('h').map((item, index) => {
                                            return <div key={item + index}>
                                                <div><span>--</span></div>
                                            </div>
                                        })}
                                    </>}
                                </div>
                            }
                        },
                        {
                            title: '充值挡位',
                            dataIndex: 'amountPost',
                            key: 'amountPost',
                            width: 65,
                            align: 'center',
                            className: "h5BiomassClass adDataBackColorClass",
                            render: (a: any, b: any) => {
                                return <div className='h5BiomassTable'>
                                    {b?.rechargeTemplateVOList?.map((item: any, index: number) => {
                                        return <div key={'aa' + index}>
                                            <div><span>{item.amountPost || '--'}</span></div>
                                        </div>
                                    })}
                                    {b?.rechargeTemplateVOList?.length < 10 && <>
                                        {Array(10 - b?.rechargeTemplateVOList?.length).fill('a').map((item, index) => {
                                            return <div key={item + index}>
                                                <div><span>--</span></div>
                                            </div>
                                        })}
                                    </>}
                                </div>
                            }
                        },
                        {
                            title: '充值次数',
                            dataIndex: 'amountCount',
                            key: 'amountCount',
                            width: 65,
                            align: 'center',
                            className: "h5BiomassClass adDataBackColorClass",
                            render: (a: any, b: any) => {
                                return <div className='h5BiomassTable'>
                                    {b?.rechargeTemplateVOList?.map((item: any, index: number) => {
                                        return <div key={'dd' + index}>
                                            <div><Statistic value={item?.amountCount || 0} valueStyle={item.amountCount >= 10 ? { color: 'red' } : { color: '#0f990f' }} groupSeparator="" /></div>
                                        </div>
                                    })}
                                    {b?.rechargeTemplateVOList?.length < 10 && <>
                                        {Array(10 - b?.rechargeTemplateVOList?.length).fill('d').map((item, index) => {
                                            return <div key={item + index}>
                                                <div><span>--</span></div>
                                            </div>
                                        })}
                                    </>}
                                </div>
                            }
                        },
                        {
                            title: '充值人数',
                            dataIndex: 'amountNum',
                            key: 'amountNum',
                            width: 65,
                            align: 'center',
                            className: "h5BiomassClass adDataBackColorClass",
                            render: (a: any, b: any) => {
                                return <div className='h5BiomassTable'>
                                    {b?.rechargeTemplateVOList?.map((item: any, index: number) => {
                                        return <div key={'bb' + index}>
                                            <div><Statistic value={item?.amountNum || 0} valueStyle={item?.amountNum >= 30 ? { color: 'red' } : { color: '#0f990f' }} groupSeparator="" /></div>
                                        </div>
                                    })}
                                    {b?.rechargeTemplateVOList?.length < 10 && <>
                                        {Array(10 - b?.rechargeTemplateVOList?.length).fill('b').map((item, index) => {
                                            return <div key={item + index}>
                                                <div><span>--</span></div>
                                            </div>
                                        })}
                                    </>}
                                </div>

                            }
                        }
                    ]
                },

                {
                    title: '玩家模板',
                    dataIndex: 'playerTemplateVOS',
                    label: '玩家模板排序',
                    align: 'center',
                    default: 8,
                    children: [
                        {
                            title: '玩家模板排序',
                            dataIndex: 'userOrderBy',
                            key: 'userOrderBy',
                            width: 65,
                            align: 'center',
                            className: "h5BiomassClass payDataBackColorClass",
                            render: (a: any, b: any) => {
                                return <div className='h5BiomassTable'>
                                    {b?.playerTemplateVOS?.map((item: any, index: number) => {
                                        return <div key={'gg' + index}>
                                            <div><span>{item.userOrderBy || '--'}</span></div>
                                        </div>
                                    })}
                                    {b?.playerTemplateVOS?.length < 10 && <>
                                        {Array(10 - b?.playerTemplateVOS?.length).fill('g').map((item, index) => {
                                            return <div key={item + index}>
                                                <div><span>--</span></div>
                                            </div>
                                        })}
                                    </>}
                                </div>
                            }
                        },
                        {
                            title: '用户名称',
                            dataIndex: 'userName',
                            key: 'userName',
                            width: 80,
                            align: 'center',
                            className: "h5BiomassClass payDataBackColorClass",
                            render: (a: any, b: any) => {
                                return <div className='h5BiomassTable'>
                                    {b?.playerTemplateVOS?.map((item: any, index: number) => {
                                        return <div key={'ll' + index}>
                                            <div style={{ overflow: 'hidden' }}><span style={{ color: '#1890ff' }} onClick={() => copy(item.userName)}>{item.userName || '--'}</span></div>
                                        </div>
                                    })}
                                    {b?.playerTemplateVOS?.length < 10 && <>
                                        {Array(10 - b?.playerTemplateVOS?.length).fill('l').map((item, index) => {
                                            return <div key={item + index}>
                                                <div><span>--</span></div>
                                            </div>
                                        })}
                                    </>}
                                </div>
                            }
                        },
                        {
                            title: '游戏服',
                            dataIndex: 'serverName',
                            key: 'serverName',
                            align: 'center',
                            width: 80,
                            className: "h5BiomassClass payDataBackColorClass",
                            render: (a: any, b: any) => {
                                return <div className='h5BiomassTable'>
                                    {b?.playerTemplateVOS?.map((item: any, index: number) => {
                                        return <div key={'ll' + index}>
                                            <div style={{ overflow: 'hidden' }}><span>{item.serverName || '--'}</span></div>
                                        </div>
                                    })}
                                    {b?.playerTemplateVOS?.length < 10 && <>
                                        {Array(10 - b?.playerTemplateVOS?.length).fill('l').map((item, index) => {
                                            return <div key={item + index}>
                                                <div><span>--</span></div>
                                            </div>
                                        })}
                                    </>}
                                </div>
                            }
                        },
                        {
                            title: '角色名称',
                            dataIndex: 'roleName',
                            key: 'roleName',
                            align: 'center',
                            width: 80,
                            className: "h5BiomassClass payDataBackColorClass",
                            render: (a: any, b: any) => {
                                return <div className='h5BiomassTable'>
                                    {b?.playerTemplateVOS?.map((item: any, index: number) => {
                                        return <div key={'ll' + index}>
                                            <div style={{ overflow: 'hidden' }}><span>{item.roleName || '--'}</span></div>
                                        </div>
                                    })}
                                    {b?.playerTemplateVOS?.length < 10 && <>
                                        {Array(10 - b?.playerTemplateVOS?.length).fill('l').map((item, index) => {
                                            return <div key={item + index}>
                                                <div><span>--</span></div>
                                            </div>
                                        })}
                                    </>}
                                </div>
                            }
                        },
                        {
                            title: '用户充值金额',
                            dataIndex: 'userAmount',
                            key: 'userAmount',
                            width: 80,
                            align: 'center',
                            className: "h5BiomassClass payDataBackColorClass",
                            render: (a: any, b: any) => {
                                return <div className='h5BiomassTable'>
                                    {b?.playerTemplateVOS?.map((item: any, index: number) => {
                                        return <div key={'jj' + index}>
                                            <div><Statistic value={item?.userAmount} valueStyle={item?.userAmount >= 500 ? { color: 'red' } : { color: '#0f990f' }} /></div>
                                        </div>
                                    })}
                                    {b?.playerTemplateVOS?.length < 10 && <>
                                        {Array(10 - b?.playerTemplateVOS?.length).fill('l').map((item, index) => {
                                            return <div key={item + index}>
                                                <div><span>--</span></div>
                                            </div>
                                        })}
                                    </>}
                                </div>
                            }
                        },
                        {
                            title: '用户充值占比',
                            dataIndex: 'proportion',
                            key: 'proportion',
                            width: 80,
                            align: 'center',
                            className: "h5BiomassClass payDataBackColorClass",
                            render: (a: any, b: any) => {
                                return <div className='h5BiomassTable'>
                                    {b?.playerTemplateVOS?.map((item: any, index: number) => {
                                        return <div key={'qq' + index}>
                                            <div><Statistic value={item?.proportion * 100} suffix='%' precision={2} valueStyle={!item?.proportion ? {} : item?.proportion >= 0.3 ? { color: 'red' } : { color: '#0f990f' }} /></div>
                                        </div>
                                    })}
                                    {b?.playerTemplateVOS?.length < 10 && <>
                                        {Array(10 - b?.playerTemplateVOS?.length).fill('l').map((item, index) => {
                                            return <div key={item + index}>
                                                <div><span>--</span></div>
                                            </div>
                                        })}
                                    </>}
                                </div>
                            }
                        },
                    ]
                },
            ]
        },
    ]

    return newArr
}

export default columns12