ad-manage/src/pages/dataStatistics/weChat/weChatList/tableConfig.tsx

import { Progress, Statistic, Tooltip } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import { SortOrder } from 'antd/lib/table/interface'
import React from 'react'
import { Link } from 'umi'
function columns(props?: { sortOrder?: { columnKey: string, order: SortOrder | undefined } }) {
    let newArr: ColumnsType<any> = [
        {
            title: '公众号名称',
            dataIndex: 'channel',
            key: 'channel',
            align: 'center',
            width: 75,
            fixed: 'left',
        },
        // {
        //     title: '投手',
        //     dataIndex: 'pitcher',
        //     key: 'pitcher',
        //     align: 'center',
        //     width: 50,
        //     fixed: 'left',
        // },
        // {
        //     title: '期数',
        //     dataIndex: 'stage',
        //     key: 'stage',
        //     align: 'center',
        //     width: 60,
        //     fixed: 'left',
        // },
        {
            title: '状态',
            dataIndex: 'state',
            key: 'state',
            align: 'center',
            width: 40,
        },
        // {
        //     title: '投放位置',
        //     dataIndex: 'location',
        //     key: 'location',
        //     align: 'center',
        //     width: 40,
        // },
        {
            title: '最早消耗日期',
            dataIndex: 'start',
            key: 'start',
            align: 'center',
            width: 80,
            // sortOrder: (props?.sortOrder?.columnKey === 'start' && props?.sortOrder?.order) || undefined,
            sorter:true,
        },
        {
            title: '最晚消耗日期',
            dataIndex: 'end',
            key: 'end',
            align: 'center',
            width: 80,
            // sortOrder: (props?.sortOrder?.columnKey === 'end' && props?.sortOrder?.order) || undefined,
            sorter:true,
        },
        {
            title: '累计消耗',
            dataIndex: 'total_cost',
            key: 'total_cost',
            align: 'center',
            width: 100,
            // sortOrder: (props?.sortOrder?.columnKey === 'total_cost' && props?.sortOrder?.order) || undefined,
            sorter:true,
            render: (a: number) => {
                return <div style={{ height: 25, position: 'relative' }}>
                    <Progress
                        strokeColor={{
                            from: '#108ee9',
                            to: '#87d068',
                        }}
                        status="active"
                        showInfo={false}
                        percent={a ? a / 60000 : 0}
                    />
                    <span style={{ position: 'absolute', left: 0, top: 2, bottom: 0, right: 0 }}><Statistic value={a || 0} valueStyle={a >= 10000 ? { color: '#000', fontWeight: 500 } : { fontWeight: 500 }} /></span>
                </div>
            },
        },
        {
            title: '累计充值',
            dataIndex: 'total_amount',
            key: 'total_amount',
            align: 'center',
            width: 115,
            // sortOrder: (props?.sortOrder?.columnKey === 'total_amount' && props?.sortOrder?.order) || undefined,
            sorter:true,
            render: (a: string) => {
                return <Statistic  value={a || 0} />
            }
        },
        {
            title: '总毛利额',
            dataIndex: 'profit',
            key: 'profit',
            align: 'center',
            width: 100,
            // sortOrder: (props?.sortOrder?.columnKey === 'profit' && props?.sortOrder?.order) || undefined,
            sorter:true,
            render: (a: number) => {
                return <Statistic value={a || 0} valueStyle={a < 0 ? { color: '#0f990f', fontWeight: 600 } : {}} />
            }
        },
        {
            title: '回本率',
            dataIndex: 'roi',
            key: 'roi',
            align: 'center',
            width: 85,
            // sortOrder: (props?.sortOrder?.columnKey === 'roi' && props?.sortOrder?.order) || undefined,
            sorter:true,
            render: (a: number) => {
                a = a ? parseFloat((a * 100).toFixed(2)) : 0
                return <span style={a <= 8 ? { color: '#0f990f', fontWeight: 600 } : a >= 100 ? { color: 'red', fontWeight: 600 } : {}}> {a + '%'}</span >
            },
        },
        {
            title: '总关注人数',
            dataIndex: 'follow_user',
            key: 'follow_user',
            align: 'center',
            width: 70,
            // sortOrder: (props?.sortOrder?.columnKey === 'follow_user' && props?.sortOrder?.order) || undefined,
            sorter:true,
            render: (a: any) => {
                return <Statistic value={a || 0} />
            }
        },
        {
            title: '平均关注人数成本',
            dataIndex: 'follow_per_cost',
            key: 'follow_per_cost',
            align: 'center',
            width: 90,
            // sortOrder: (props?.sortOrder?.columnKey === 'follow_per_cost' && props?.sortOrder?.order) || undefined,
            sorter:true,
            render: (a: string) => {
                return <Statistic value={a || 0} />
            }
        },
        {
            title: '总充值人数',
            dataIndex: 'order_user',
            key: 'order_user',
            align: 'center',
            width: 90,
            // sortOrder: (props?.sortOrder?.columnKey === 'order_user' && props?.sortOrder?.order) || undefined,
            sorter:true,
            render: (a: any) => {
                return <Statistic value={a || 0} />
            }
        },
        {
            title: '充值转化比率',
            dataIndex: 'order_tran_rate',
            key: 'order_tran_rate',
            align: 'center',
            width: 90,
            // sortOrder: (props?.sortOrder?.columnKey === 'order_tran_rate' && props?.sortOrder?.order) || undefined,
            sorter:true,
            render: (a: number) => {
                return a ?  (a * 100)?.toFixed(2) + '%' : '0%'
            }
        },
        {
            title: '充值转化成本',
            dataIndex: 'order_tran_cost',
            key: 'order_tran_cost',
            align: 'center',
            width:90,
            // sortOrder: (props?.sortOrder?.columnKey === 'order_tran_cost' && props?.sortOrder?.order) || undefined,
            sorter:true,
            render: (a: string) => {
                return <Statistic  value={a || 0} />
            }
        },
        {
            title: '今日充值',
            dataIndex: 'td_amount',
            key: 'td_amount',
            align: 'center',
            width: 110,
            // sortOrder: (props?.sortOrder?.columnKey === 'td_amount' && props?.sortOrder?.order) || undefined,
            sorter: true,
            render: (a: any) => {
                return <Statistic value={a || 0} />
            }
        },
        {
            title: '昨日充值',
            dataIndex: 'yd_amount',
            key: 'yd_amount',
            align: 'center',
            width: 110,
            // sortOrder: (props?.sortOrder?.columnKey === 'yd_amount' && props?.sortOrder?.order) || undefined,
            sorter: true,
            render: (a: any) => {
                return <Statistic value={a || 0} />
            }
        },
        {
            title: '前日充值',
            dataIndex: 'byd_amount',
            key: 'byd_amount',
            align: 'center',
            width: 110,
            // sortOrder: (props?.sortOrder?.columnKey === 'byd_amount' && props?.sortOrder?.order) || undefined,
            sorter: true,
            render: (a: any) => {
                return <Statistic value={a || 0} />
            }
        },
        {
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            align: 'center',
            fixed: 'right',
            width: 40,
            render: (a: any, b: { channel: string }) => {
                return <Link to={`/dataStatistics/weChat/advertising?channel=${b.channel}`}>进入</Link>
            }
        },
    ]
    return newArr
}
export { columns }