ad-manage/src/pages/dataStatistics/rechargeMonitor/rechargeHisYear/tableConfig.tsx

import { Statistic } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import React from 'react'
import '../index.less'
function columns() {

    let arr: ColumnsType<any> = Array(12).fill('').map((i: string, index: number) => {
        return {
            title: `${index + 1}月（总消耗）`,
            align: 'center',
            key: `${index + 1}`,
            dataIndex: `${index + 1}_ten`,
            children: [
                {
                    title: '10:00',
                    align: 'center',
                    key: `${index + 1}_ten_01`,
                    dataIndex: `${index + 1}_ten_01`,
                    children: [
                        {
                            title: '充值',
                            dataIndex: `${index + 1}_ten_amount`,
                            key: `${index + 1}_ten_amount`,
                            align: 'center',
                            width: 85,
                            render: (a: any) => {
                                return <Statistic value={a ? (a as number).toFixed(2) : a === 0 ? 0 : '--'} />
                            }
                        },
                        {
                            title: '环比',
                            dataIndex: `${index + 1}_ten_rate`,
                            key: `${index + 1}_ten_rate`,
                            width: 85,
                            align: 'center',
                            className: 'ringRatio',
                            render: (a: any) => {
                                return a === 999999999 ? <div>--</div> : a ?
                                    <div style={a <= 0.25 ? { backgroundColor: '#b9e19e' } : {}}>{(a * 100).toFixed(2) + '%'}</div>
                                    : a === 0 ?
                                        <div style={a <= 0.25 ? { backgroundColor: '#b9e19e' } : {}}>0</div>
                                        : <div>--</div>
                            }
                        },
                    ]
                },
                {
                    title: '14:00',
                    align: 'center',
                    key: `${index + 1}_ten_02`,
                    dataIndex: `${index + 1}_ten_02`,
                    children: [
                        {
                            title: '充值',
                            dataIndex: `${index + 1}_fourteen_amount`,
                            key: `${index + 1}_fourteen_amount`,
                            align: 'center',
                            width: 85,
                            render: (a: any) => {
                                return <Statistic value={a ? (a as number).toFixed(2) : a === 0 ? 0 : '--'} />
                            }
                        },
                        {
                            title: '环比',
                            dataIndex: `${index + 1}_fourteen_rate`,
                            key: `${index + 1}_fourteen_rate`,
                            width: 85,
                            align: 'center',
                            className: 'ringRatio',
                            render: (a: any) => {
                                return a === 999999999 ? <div>--</div> : a ?
                                    <div style={a <= 0.45 ? { backgroundColor: '#b9e19e' } : {}}>{(a * 100).toFixed(2) + '%'}</div>
                                    : a === 0 ? <div style={a <= 0.45 ? { backgroundColor: '#b9e19e' } : {}}>0</div>
                                        : <div>--</div>
                            }
                        },
                    ]
                },
                {
                    title: '17:00',
                    align: 'center',
                    key: `${index + 1}_ten_03`,
                    dataIndex: `${index + 1}_ten_03`,
                    children: [
                        {
                            title: '充值',
                            dataIndex: `${index + 1}_eighteen_amount`,
                            key: `${index + 1}_eighteen_amount`,
                            align: 'center',
                            width: 85,
                            render: (a: any) => {
                                return <Statistic value={a ? (a as number).toFixed(2) : a === 0 ? 0 : '--'} />
                            }
                        },
                        {
                            title: '环比',
                            dataIndex: `${index + 1}_eighteen_rate`,
                            key: `${index + 1}_eighteen_rate`,
                            width: 85,
                            align: 'center',
                            className: 'ringRatio',
                            render: (a: any) => {
                                return a === 999999999 ? <div>--</div> : a ?
                                    <div style={a <= 0.6 ? { backgroundColor: '#ffbfbf' } : {}}>{a ? (a * 100).toFixed(2) + '%' : a === 0 ? 0 : '--'}</div>
                                    : a === 0 ? <div style={a <= 0.6 ? { backgroundColor: '#ffbfbf' } : {}}>0</div>
                                        : <div>--</div>
                            }
                        },
                    ]
                },
                {
                    title: '24:00',
                    align: 'center',
                    key: `${index + 1}_ten_04`,
                    dataIndex: `${index + 1}_ten_04`,
                    children: [
                        {
                            title: '充值',
                            dataIndex: `${index + 1}_twentyfour_amount`,
                            key: `${index + 1}_twentyfour_amount`,
                            align: 'center',
                            width: 85,
                            render: (a: any) => {
                                return <Statistic value={a ? (a as number).toFixed(2) : a === 0 ? 0 : '--'} />
                            }
                        },
                        {
                            title: '环比',
                            dataIndex: `${index + 1}_twentyfour_rate`,
                            key: `${index + 1}_twentyfour_rate`,
                            width: 85,
                            align: 'center',
                            className: 'ringRatio',
                            render: (a: any) => {
                                return a === 999999999 ? <div>--</div> : a ?
                                    <div style={a < 1 ? { backgroundColor: '#ffbfbf' } : {}}>{a ? (a * 100).toFixed(2) + '%' : a === 0 ? 0 : '--'}</div>
                                    : a === 0 ? <div style={a < 1 ? { backgroundColor: '#ffbfbf' } : {}}>0</div>
                                        : <div>--</div>
                            }
                        }
                    ]
                }
            ]
        }
    })

    let newArr: ColumnsType<any> = [
        {
            title: '充值日期',
            dataIndex: 'time',
            key: 'time',
            align: 'center',
            width: 90,
            fixed: 'left'
        },
        ...arr
    ]
    return newArr
}
export { columns }