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

import { message, Progress, Statistic } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import { SortOrder } from 'antd/lib/table/interface'
import React from 'react'
import { getAccApi } from '@/services/dataStatistics/dataCenter'
/**日期table配置 */
function fcolumns(dispatch?: any, pitcherId?: number, userId?: number): any {
    return function columns(props?: { sortOrder?: { columnKey: string, order: SortOrder | undefined } }) {
        const setChannel = (channel: string) => {
            if (dispatch) {
                getAccApi({user_id: userId, name: channel, pitcher_id: pitcherId}).then(res => {
                    if(res && res?.data && res?.data?.length > 0) {
                        if (res?.data?.findIndex((item: { nick_name: string }) => item?.nick_name === channel) === -1) {
                            message.error('没有这个公众号的权限')
                            return
                        }
                    } else {
                        message.error('没有这个公众号的权限')
                        return
                    }
                    dispatch({ type: 'channels', params: { channels: [decodeURI(channel)] } })
                    window.location.href = '#/dataStatistics/weChat/payTrend'
                })
                // dispatch({ type: 'channel', params: { channel: decodeURI(channel) } })
            }
        }

        const newArr: ColumnsType<any> = [
            {
                title: '日期',
                dataIndex: 'date',
                key: 'date',
                align: 'center',
                width: 140
            },
            {
                title: '投手',
                dataIndex: 'pitcher',
                key: 'pitcher',
                align: 'center',
                width: 50
            },
            {
                title: '公众号名称',
                dataIndex: 'channel',
                key: 'channel',
                align: 'center',
                width: 70,
                render: (a: string) => {
                    let newchannel: string = ''
                    if (a?.length > 1) {
                        let b = a.split('')
                        b[1] = '*'
                        b[2] = '*'
                        newchannel = b.join('')
                    }
                    return <a onClick={() => { setChannel(a) }}>{newchannel || a}</a>
                },
            },
            {
                title: '投放位置',
                dataIndex: 'type',
                key: 'type',
                align: 'center',
                width: 40,
            },
            {
                title: '期数',
                dataIndex: 'stage',
                key: 'stage',
                align: 'center',
                width: 90
            },
            {
                title: '小说',
                dataIndex: 'book',
                key: 'book',
                align: 'center',
                ellipsis: true,
                width: 70,
                render: (str) => {
                    return <a href={`#/dataStatistics/weChat/todayRanking?bookName=${str}`}>{str}</a>
                }
            },
            {
                title: '消耗',
                dataIndex: 'cost',
                key: 'cost',
                align: 'center',
                sorter: true,
                // sortOrder: (props?.sortOrder?.columnKey === 'cost' && props?.sortOrder?.order) || undefined,
                width: 80,
                render: (a: number) => {
                    return <div style={{ height: 25, position: 'relative' }}>
                        <Progress
                            strokeColor={{
                                from: '#108ee9',
                                to: '#87d068',
                            }}
                            status="active"
                            showInfo={false}
                            percent={a ? a / 60000 * 100 : 0}
                        />
                        {/* style={a >= 10000 ? { background: '#FFDEAD', display: 'block' } : {}} */}
                        <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: 'view_count',
                key: 'view_count',
                align: 'center',
                sorter: true,
                // sortOrder: (props?.sortOrder?.columnKey === 'view_count' && props?.sortOrder?.order) || undefined,
                width: 70,
                render: (a: number) => {
                    return <Statistic value={a || 0} />
                },
            },
            {
                title: '点击量',
                dataIndex: 'click_count',
                key: 'click_count',
                align: 'center',
                sorter: true,
                // sortOrder: (props?.sortOrder?.columnKey === 'click_count' && props?.sortOrder?.order) || undefined,
                width: 70,
                render: (a: number) => {
                    return <Statistic value={a || 0} />
                },
            },
            {
                title: '点击率',
                dataIndex: 'click_rate',
                key: 'click_rate',
                align: 'center',
                sorter: true,
                // sortOrder: (props?.sortOrder?.columnKey === 'click_rate' && props?.sortOrder?.order) || undefined,
                width: 70,
                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: 'thousand_view_cost',
                key: 'thousand_view_cost',
                align: 'center',
                sorter: true,
                // sortOrder: (props?.sortOrder?.columnKey === 'thousand_view_cost' && props?.sortOrder?.order) || undefined,
                width: 70,
                render: (a: number) => {
                    return <Statistic value={a || 0} />
                },
            },
            {
                title: '新增付费人数',
                dataIndex: 'reg_user',
                key: 'reg_user',
                align: 'center',
                sorter: true,
                // sortOrder: (props?.sortOrder?.columnKey === 'reg_user' && props?.sortOrder?.order) || undefined,
                width: 70,
                render: (a: number) => {
                    return <Statistic value={a || 0} />
                },
            },
            {
                title: '新用户充值次数',
                dataIndex: 'reg_count',
                key: 'reg_count',
                align: 'center',
                sorter: true,
                // sortOrder: (props?.sortOrder?.columnKey === 'reg_count' && props?.sortOrder?.order) || undefined,
                width: 90,
                render: (a: number) => {
                    return <Statistic value={a || 0} />
                },
            },
            {
                title: '新用户首日充值',
                dataIndex: 'first_amount',
                key: 'first_amount',
                align: 'center',
                sorter: true,
                // sortOrder: (props?.sortOrder?.columnKey === 'first_amount' && props?.sortOrder?.order) || undefined,
                width: 90,
                render: (a: number) => {
                    return <Statistic value={a || 0} />
                },
            },
            {
                title: '新用户累计充值',
                dataIndex: 'reg_amount',
                key: 'reg_amount',
                align: 'center',
                sorter: true,
                // sortOrder: (props?.sortOrder?.columnKey === 'reg_amount' && props?.sortOrder?.order) || undefined,
                width: 90,
                render: (a: number) => {
                    return <Statistic value={a || 0} />
                },
            },
            {
                title: '首日roi',
                dataIndex: 'first_roi',
                key: 'first_roi',
                align: 'center',
                sorter: true,
                // sortOrder: (props?.sortOrder?.columnKey === 'first_roi' && props?.sortOrder?.order) || undefined,
                width: 60,
                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: 'roi',
                key: 'roi',
                align: 'center',
                sorter: true,
                // sortOrder: (props?.sortOrder?.columnKey === 'roi' && props?.sortOrder?.order) || undefined,
                width: 60,
                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 >
                },
            },
        ]
        return newArr
    }
}


export default fcolumns