qc-iaaSystem/src/pages/iaaData/novel/tencent/appPayTrend/tableConfig.tsx

import WidthEllipsis from "@/components/widthEllipsis"
import { Progress, Statistic } from "antd"
import React from "react"
import { AdUnitType_Enum, PRODUCT_TYPE_ENUM } from "../../../const"
import style from './index.less'
import moment from "moment"
import { ACCOUNTTYPE, APPTYPE } from "@/pages/iaaSystem/manage/const"

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

    const defaultIndex = 23
    const trend = [1, 2, 3, 4, 5, 6, 7, 14, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180, 365].map((index, count) => {

        const dataIndex = `da${index}`
        return {
            title: `D${index}`, dataIndex, label: '基本信息', default: defaultIndex + count, width: 150,
            render: (_: any, b: any) => {
                if (moment().subtract(1, 'days') >= moment(b.dt === '总计' ? b.costDayBegin : b.dt).add(index - 1, 'days')) {
                    const data = b?.[dataIndex]?.split('/')
                    console.log(data)
                    return <div className={style.dbox} style={{ height: 160 }}>
                        <span style={{ color: '#F44336', fontWeight: 600, display: 'flex' }}>变现人数：<span><Statistic value={data?.[0] || 0} precision={2} /></span></span>
                        <span style={{ color: '#FF9800', fontWeight: 600, display: 'flex' }}>变现次数：<span><Statistic value={data?.[1] || 0} precision={2} /></span></span>
                        <span style={{ color: '#d81b60', fontWeight: 600, display: 'flex' }}>新增收入：<span><Statistic value={data?.[2] || 0} precision={2} /></span></span>
                        <span style={{ color: '#0f538a', fontWeight: 600, display: 'flex' }}>累计收入：<span><Statistic value={data?.[3] || 0} precision={2} /></span></span>
                        <span style={{ color: '#9C27B0', fontWeight: 600, display: 'flex' }}>arpu：<span><Statistic value={data?.[7] || 0} precision={2} /></span></span>
                        <span style={{ color: 'rgb(12,130,16)', fontWeight: 600, display: 'flex' }}>增：<span><Statistic value={data?.[4] ? data?.[4] * 100 : 0} precision={2} valueStyle={!data?.[4] ? {} : data?.[4] >= 0.5 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" /></span></span>
                        <span style={{ color: '#ff5722', fontWeight: 600, display: 'flex' }}>回：<span><Statistic value={data?.[5] ? data?.[5] * 100 : 0} precision={2} valueStyle={!data?.[5] ? {} : data?.[5] >= 0.5 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" /></span></span>
                        <span style={{ color: '#d81b60', fontWeight: 600, display: 'flex' }}>倍：<span><Statistic value={data?.[6] || 0} precision={2} /></span></span>
                        
                    </div>
                }
                return <div style={{ height: 102, width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>--</div>
            }
        }
    })

    return [
        {
            label: '基本信息',
            data: [
                {
                    title: '日期', dataIndex: 'dt', label: '基本信息', align: 'center', width: 80, default: 1,
                    render: (a: string) => (<WidthEllipsis value={a} />)
                },
                {
                    title: '应用', dataIndex: 'appName', label: '基本信息', align: 'center', width: 120, default: 2,
                    render: (a: string) => (<WidthEllipsis value={a} />)
                },
                {
                    title: '应用ID', dataIndex: 'iaaAppId', label: '基本信息', align: 'center', width: 80,
                    render: (a: string) => (<WidthEllipsis value={a} />)
                },
                {
                    title: '小程序名称', dataIndex: 'mpName', label: '基本信息', align: 'center', width: 85, default: 3,
                    render: (a: string) => (<WidthEllipsis value={a} />)
                },
                {
                    title: '小程序ID', dataIndex: 'mpId', label: '基本信息', align: 'center', width: 80,
                    render: (a: string) => (<WidthEllipsis value={a} />)
                },
                {
                    title: '账号归属', dataIndex: 'adUnitType', label: '基本信息', align: 'center', width: 80,
                    render: (a: string) => (<WidthEllipsis value={AdUnitType_Enum[a as keyof typeof AdUnitType_Enum]} />)
                },
                {
                    title: '业务类型', dataIndex: 'productType', label: '基本信息', align: 'center', width: 80, default: 4,
                    render: (a: string) => (<WidthEllipsis value={PRODUCT_TYPE_ENUM[a as keyof typeof PRODUCT_TYPE_ENUM]} />)
                },
                {
                    title: '应用类型', dataIndex: 'appType', label: '基本信息', align: 'center', width: 80, default: 5,
                    render: (a: string) => (<WidthEllipsis value={APPTYPE[a as keyof typeof APPTYPE]?.text} />)
                },
                {
                    title: '消耗', dataIndex: 'cost', label: '基本信息', align: 'right', width: 125, default: 6, sorter: true,
                    className: 'padding_0',
                    render: (a: number) => <div style={{ height: 162, position: 'relative' }}>
                        <Progress
                            strokeColor={{
                                from: '#ff5900',
                                to: '#ffd380',
                            }}
                            status="active"
                            showInfo={false}
                            percent={a ? a / 20000 * 100 : 0}
                        />
                        <span style={{ position: 'absolute', left: '50%', top: '50%', width: '100%', padding: '0 5px', transform: 'translate(-50%, -50%)' }}><Statistic value={a || 0} precision={2} valueStyle={a >= 20000 ? { color: '#000', fontWeight: 'bold' } : { fontWeight: 'bold' }} /></span>
                    </div>
                },
                {
                    title: '广告变现成本', dataIndex: 'adMonetizationCost', label: '基本信息', align: 'right', width: 110, default: 7, sorter: true,
                    render: (a: number) => <Statistic value={a || 0} precision={2} />
                },
                {
                    title: '广告变现人数', dataIndex: 'appAdPayingUsers', label: '基本信息', align: 'center', width: 110, default: 8, sorter: true,
                    render: (a: number) => <Statistic value={a || 0} />
                },
                {
                    title: '广告变现arpu', dataIndex: 'arpu', label: '基本信息', align: 'center', width: 110, default: 9, sorter: true,
                    render: (a: number) => <Statistic value={a || 0} precision={2} />
                },
                {
                    title: '广告变现arppu', dataIndex: 'arppu', label: '基本信息', align: 'center', width: 120, default: 10, sorter: true,
                    render: (a: number) => <Statistic value={a || 0} precision={2} />
                },
                {
                    title: '广告变现金额', dataIndex: 'appAdPayingAmount', label: '基本信息', align: 'center', width: 110, default: 11, sorter: true,
                    render: (a: number) =><Statistic value={a || 0} precision={2} />
                },
                {
                    title: '广告变现roi', dataIndex: 'appAdPayingRoi', label: '基本信息', align: 'center', width: 105, default: 12, sorter: true,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={!a ? {} : a >= 0.5 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },

                {
                    title: '注册人数', dataIndex: 'reg_dedup_pv', label: '基本信息', align: 'center', width: 80, default: 13, sorter: true,
                    render: (a: number, b: any) => <Statistic value={a || 0} precision={2} />
                },
                ...trend
            ]
        }
    ]
}

export default columns12