ad-manage/src/pages/adMonitor/adMonitorList/tablePlanListConfig.tsx

import { Statistic, Tooltip } from 'antd'
import React from 'react'
import './index.less'
import { ReactComponent as RocketSvg } from '@/assets/rocket.svg'
import { GOUMAILEIXING, GUANGGAOZHUANGTAI, TUIGUANGMUBIAO, CHUANGYIZHUANGTAI, YOUHUAMUBIAO } from './enum'
import Box from './components/box'
function columnsMonitor(details: (id: number) => void) {
    return function columns() {
        let newArr: any = [
            {
                title: '数据日期',
                dataIndex: 'beginToEnd',
                key: 'beginToEnd',
                align: 'center',
                width: 100,
                fixed: 'left'
            },
            {
                title: '广告名称/ID',
                dataIndex: 'adgroupName',
                key: 'adgroupName',
                align: 'left',
                width: 210,
                ellipsis: true,
                render: (str: any, b: any) => {
                    return <div style={{ display: 'flex', flexFlow: 'column nowrap', fontSize: 12 }}>
                        <div style={{ color: '#459ae9', fontSize: 10 }} className='oneText'>{b.adgroupName}</div>
                        <div style={{ color: '#888' }}>广告ID:{b?.adgroupId}</div>
                    </div>
                }
            },
            {
                title: '投放计划名称/ID',
                dataIndex: 'campaignName/campaignId',
                key: 'campaignName/campaignId',
                align: 'left',
                width: 180,
                ellipsis: true,
                render: (str: any, b: any) => {
                    return <div style={{ display: 'flex', flexFlow: 'column nowrap', fontSize: 12 }}>
                        <div style={{ color: '#459ae9', fontSize: 10 }} className='oneText'>{b.campaignName}</div>
                        <div style={{ color: '#888' }}>计划ID:{b?.campaignId}</div>
                    </div>
                }
            },
            {
                title: '创意名称/ID',
                dataIndex: 'creativeName/creativeId',
                key: 'creativeName/creativeId',
                align: 'left',
                width: 210,
                render: (str: any, b: any) => {
                    return <div style={{ display: 'flex', flexFlow: 'column nowrap', fontSize: 12 }}>
                        <div style={{ color: '#459ae9', fontSize: 10 }} className='oneText'>{b.creativeName}</div>
                        <div style={{ color: '#888' }}>创意ID:{b?.creativeId}</div>
                    </div>
                }
            },
            {
                title: '创意预览',
                dataIndex: 'creativePreview',
                key: 'creativePreview',
                width: 110,
                align: 'center',
                render: (a: any, b: any) => {
                    // return a && a?.length > 0 ? <a href={a[0]} target='_blank'>预览</a> : '--'
                    return <Box b={b} />
                }
            },
            {
                title: '广告账户',
                dataIndex: 'accountId',
                key: 'accountId',
                width: 70,
                align: 'center'
            },
            {
                title: '投手',
                dataIndex: 'putUserName',
                key: 'putUserName',
                width: 70,
                align: 'center',
                render: (a: any) => {
                    return a || '--'
                }
            },
            {
                title: '创建日期',
                dataIndex: 'adCreateTime',
                key: 'adCreateTime',
                align: 'center',
                width: 110
            },
            {
                title: '广告状态',
                dataIndex: 'adStatus',
                key: 'adStatus',
                align: 'center',
                width: 105,
                render: (a: any) => {
                    return <span dangerouslySetInnerHTML={{ __html: GUANGGAOZHUANGTAI[a] || '--' }}></span>
                }
            },
            // {
            //     title: '创意状态',
            //     dataIndex: "adCreativeStatus",
            //     key: "adCreativeStatus",
            //     align: 'center',
            //     width: 105,
            //     render: (a: any) => {
            //         return CHUANGYIZHUANGTAI[a] || '--'
            //     }
            // },
            // {
            //     title: '购买类型',
            //     dataIndex: 'adBuyType',
            //     key: 'adBuyType',
            //     align: 'center',
            //     width: 110,
            //     render: (a: any) => {
            //         return GOUMAILEIXING[a] || '--'
            //     }
            // },
            // {
            //     title: '自动扩量',
            //     dataIndex: 'autoExpand',
            //     key: 'autoExpand',
            //     width: 110,
            //     align: 'center',
            //     render: (a: any) => {
            //         return a
            //     }
            // },
            // {
            //     title: '曝光评估',
            //     dataIndex: 'impressionAppraise',
            //     key: 'impressionAppraise',
            //     align: 'center',
            //     width: 115,
            //     render: (a: any) => {
            //         return a || '--'
            //     }
            // },
            {
                title: '投放时间',
                dataIndex: 'adBeginTime',
                key: 'adBeginTime',
                align: 'center',
                width: 120,
                render: (a: any, b: any) => {
                    return a ? <div style={{ display: 'flex', flexFlow: 'column nowrap' }}>
                        <span>{a}</span>
                        {/* <span>{b?.adEndDate}</span> */}
                    </div> : '--'
                }
            },
            // {
            //     title: '当日成本偏差',
            //     dataIndex: 'dayCostOffset',
            //     key: 'dayCostOffset',
            //     align: 'center',
            //     width: 90,
            //     render: (a: any) => {
            //         return a || '--'
            //     }
            // },
            {
                title: '推广目标',
                dataIndex: 'promotedObjectType',
                key: 'promotedObjectType',
                align: 'center',
                width: 80,
                ellipsis: true,
                render: (a: any) => {
                    return TUIGUANGMUBIAO[a] || '推广公众号'
                }
            },
            // {
            //     title: '深度优化目标',
            //     dataIndex: 'depthOptimizeTarget',
            //     key: 'depthOptimizeTarget',
            //     width: 110,
            //     align: 'center',
            //     render: (a: any) => {
            //         return a
            //     }
            // },
            {
                title: '广告预算',
                dataIndex: 'adBudget',
                key: 'adBudget',
                align: 'center',
                width: 110,
                render: (a: any) => {
                    return a ? <Statistic value={a | 0} /> : '--'
                }
            },
            {
                title: '出价方式',
                dataIndex: 'bidMode',
                key: 'bidMode',
                align: 'center',
                width: 80,
                render: (a: any) => {
                    return a || '--'
                }
            },
            {
                title: '当前出价',
                dataIndex: 'bidAmount',
                key: 'bidAmount',
                align: 'center',
                width: 80,
                render: (a: any) => {
                    return a ? <Statistic value={a | 0} /> : '--'
                }
            },
            // {
            //     title: '计划预算',
            //     dataIndex: 'planBudget',
            //     key: 'planBudget',
            //     align: 'center',
            //     width: 80,
            //     render: (a: any) => {
            //         return a ? <Statistic value={a | 0} /> : '--'
            //     }
            // },
            {
                title: '广告总消耗',
                dataIndex: 'cost',
                key: 'cost',
                align: 'center',
                width: 100,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            // {
            //     title: '今日消耗',
            //     dataIndex: 'todayCostTotal',
            //     key: 'todayCostTotal',
            //     align: 'center',
            //     width: 105,
            //     render: (a: any) => {
            //         return <Statistic value={a || 0} />
            //     }
            // },
            {
                title: '单位时间消耗速度',
                dataIndex: 'costSpeed',
                key: 'costSpeed',
                align: 'center',
                width: 120,
                render: (a: any, b: any) => {
                    return <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                        {/* <div>当前:<span></span></div>
                        <div>前第一小时:<span></span></div> */}
                        <RocketSvg /> <a onClick={() => details(b)} style={{ marginLeft: 10 }}>详情</a>
                    </div>
                }
            },
            {
                title: '曝光量',
                dataIndex: 'viewCount',
                key: 'viewCount',
                align: 'center',
                width: 70,
                sorter: true,
                render: (a: number) => {
                    return <span style={a <= 8 ? { color: '#0f990f', fontWeight: 600 } : a >= 100 ? { color: 'red', fontWeight: 600 } : {}}> {a || '--'}</span >
                },
            },
            {
                title: '千次曝光成本',
                dataIndex: 'thousandDisplayPrice',
                key: 'thousandDisplayPrice',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a ? a?.toFixed(2) : 0} />
                }
            },
            {
                title: '点击量',
                dataIndex: 'clickCount',
                key: 'clickCount',
                align: 'center',
                width: 70,
                sorter: true,
                render: (a: number) => {
                    return <span style={a <= 8 ? { color: '#0f990f', fontWeight: 600 } : a >= 100 ? { color: 'red', fontWeight: 600 } : {}}> {a || '--'}</span >
                },
            },
            {
                title: '点击均价',
                dataIndex: 'avgClickAmount',
                key: 'avgClickAmount',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a ? a?.toFixed(2) : 0} />
                }
            },
            {
                title: '点击率',
                dataIndex: 'clickRate',
                key: 'clickRate',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    a = a ? parseFloat((a * 100).toFixed(2)) : 0
                    return a + '%'
                }
            },
            {
                title: '不感兴趣点击次数',
                dataIndex: 'noInterestCount',
                key: 'noInterestCount',
                align: 'center',
                width: 70,
                sorter: true,
                render: (a: number) => {
                    return <span style={a <= 8 ? { color: '#0f990f', fontWeight: 600 } : a >= 100 ? { color: 'red', fontWeight: 600 } : {}}> {a || '--'}</span >
                },
            },
            {
                title: '优化目标',
                dataIndex: 'optimizationGoal',
                key: 'optimizationGoal',
                align: 'center',
                width: 115,
                render: (a: any) => {
                    return <Tooltip title={YOUHUAMUBIAO[a]}>
                        <div className='oneText'>{YOUHUAMUBIAO[a] || '--'}</div>
                    </Tooltip>
                }
            },
            {
                title: '转化目标量',
                dataIndex: 'conversionsCount',
                key: 'conversionsCount',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            {
                title: '转化目标成本',
                dataIndex: 'conversionsCost',
                key: 'conversionsCost',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a ? a?.toFixed(2) : 0} />
                }
            },
            {
                title: '目标转化率',
                dataIndex: 'conversionsRate',
                key: 'conversionsRate',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    a = a ? parseFloat((a * 100).toFixed(2)) : 0
                    return a + '%'
                }
            },
            {
                title: '深度转化量',
                dataIndex: 'deepConversionsCount',
                key: 'deepConversionsCount',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            {
                title: '下单量',
                dataIndex: 'orderCount',
                key: 'orderCount',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            {
                title: '首日新增下单量',
                dataIndex: 'firstDayOrderCount',
                key: 'firstDayOrderCount',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            {
                title: '下单成本',
                dataIndex: 'orderCost',
                key: 'orderCost',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a ? a?.toFixed(2) : 0} />
                }
            },
            {
                title: '下单率',
                dataIndex: 'orderRate',
                key: 'orderRate',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    a = a ? parseFloat((a * 100).toFixed(2)) : 0
                    return a + '%'
                }
            },
            {
                title: '下单金额',
                dataIndex: 'orderAmount',
                key: 'orderAmount',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            {
                title: '首日新增下单金额',
                dataIndex: 'firstDayOrderAmount',
                key: 'firstDayOrderAmount',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            {
                title: '下单客单价',
                dataIndex: 'atvAmount',
                key: 'atvAmount',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a ? a?.toFixed(2) : 0} />
                }
            },
            {
                title: '下单ROI',
                dataIndex: 'orderROI',
                key: 'orderROI',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    a = a ? parseFloat((a * 100).toFixed(2)) : 0
                    return a + '%'
                }
            },
            {
                title: '首日新增下单ROI',
                dataIndex: 'firstDayOrderRoi',
                key: 'firstDayOrderRoi',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    a = a ? parseFloat((a * 100).toFixed(2)) : 0
                    return a + '%'
                }
            },
            {
                title: '公众号关注人数',
                dataIndex: 'mpFollowUser',
                key: 'mpFollowUser',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return a || '--'
                }
            },
            {
                title: '公众号关注率',
                dataIndex: 'mpFollowRate',
                key: 'mpFollowRate',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    a = a ? parseFloat((a * 100).toFixed(2)) : 0
                    return a + '%'
                }
            },
            {
                title: '公众号关注成本',
                dataIndex: 'mpFollowCost',
                key: 'mpFollowCost',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a ? a?.toFixed(2) : 0} />
                }
            },
            {
                title: '操作',
                dataIndex: 'event',
                key: 'event',
                align: 'center',
                width: 90,
                render: (a: any, b: any) => {
                    return <a style={{ color: '#1890ff' }} onClick={() => window.open(`https://ad.qq.com/atlas/${b?.accountId}/admanage/adcreative?adgroupid=${b?.adgroupId}&query={%22configured_status%22:[%22AD_STATUS_EXCLUDE_DELETED%22],%22status%22:[]}`)} target="_blank">腾讯广告</a>
                }
            }
        ]
        return newArr
    }
}
export default columnsMonitor