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

import useCopy from '@/Hook/useCopy'
import { DownOutlined, RiseOutlined } from '@ant-design/icons'
import { Dropdown, Menu, Progress, Statistic, Tooltip } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import React from 'react'
import { ReactComponent as RocketSvg } from '@/assets/rocket.svg'
import './index.less'
import { CHUANGYIZHUANGTAI, CHUJIAFANGSHI, GOUMAILEIXING, GUANGGAOZHUANGTAI, TUIGUANGMUBIAO, YOUHUAMUBIAO } from './enum'
import Box from './components/box'
import { GGStateData } from './data'
function columnsMonitor(planDetail: (id: number) => void, getDetailList: (adId: any, accountId: any[]) => void, details: (id: number) => void, getMinuList: (id: number, accountId: any[]) => void, mode: string) {
    const { copy } = useCopy()
    return function columns() {
        let newArr: ColumnsType<any> = [
            {
                title: '时间',
                dataIndex: 'currTime',
                key: 'currTime',
                align: 'center',
                width: 160,
                ellipsis: true
            },
            {
                title: '广告名称',
                dataIndex: 'adgroupName',
                key: 'adgroupName',
                align: 'center',
                width: 170,
                ellipsis: true,
                render: (str, b) => {
                    return <a style={{ color: '#1890ff', fontSize: 12 }} onClick={() => { getDetailList(b.adgroupId, [b.accountId]) }}>{str}</a>
                }
            },
            {
                title: '广告ID',
                dataIndex: 'adgroupId',
                key: 'adgroupId',
                align: 'center',
                width: 100,
                ellipsis: true,
                render: (a: any) => {
                    return <a onClick={() => { copy(a) }} style={{ color: '#3946c3' }}>{a}</a>
                }
            },
            {
                title: '计划名称',
                dataIndex: 'campaignName',
                key: 'campaignName',
                align: 'center',
                width: 170,
                ellipsis: true,
                render: (str, b) => {
                    return str
                }
            },
            {
                title: '计划ID',
                dataIndex: 'campaignId',
                key: 'campaignId',
                align: 'center',
                width: 100,
                ellipsis: true,
                render: (a: any) => {
                    return <a onClick={() => { copy(a) }} style={{ color: '#3946c3' }}>{a}</a>
                }
            },
            {
                title: '广告账户',
                dataIndex: 'accountId',
                key: 'accountId',
                width: 70,
                ellipsis: true,
                align: 'center'
            },
            {
                title: '投手',
                dataIndex: 'putUserName',
                key: 'putUserName',
                align: 'center',
                ellipsis: true,
                width: 65
            },
            {
                title: '创意预览',
                dataIndex: 'creativePreview',
                key: 'creativePreview',
                width: 110,
                align: 'center',
                render: (a: any, b: any) => {
                    return <Box b={b} />
                }
            },
            // {
            //     title: '投放位置',
            //     dataIndex: 'pitchSeat',
            //     key: 'pitchSeat',
            //     width: 110,
            //     align: 'center',
            //     render: (a: any) => {
            //         return a
            //     }
            // },
            // {
            //     title: '自动扩量',
            //     dataIndex: 'autoExpand',
            //     key: 'autoExpand',
            //     width: 110,
            //     align: 'center',
            //     render: (a: any) => {
            //         return a
            //     }
            // },
            // {
            //     title: '深度优化目标',
            //     dataIndex: 'depthOptimizeTarget',
            //     key: 'depthOptimizeTarget',
            //     width: 110,
            //     align: 'center',
            //     render: (a: any) => {
            //         return a
            //     }
            // },
            // {
            //     title: '曝光评估',
            //     dataIndex: 'impressionAppraise',
            //     key: 'impressionAppraise',
            //     width: 110,
            //     align: 'center',
            //     render: (a: any) => {
            //         return a
            //     }
            // },
            {
                title: '投放时间',
                dataIndex: 'adBeginTime',
                key: 'adBeginTime',
                width: 110,
                align: 'center',
                ellipsis: true
            },
            {
                title: '广告状态',
                dataIndex: 'adStatus',
                key: 'adStatus',
                align: 'center',
                width: 105,
                ellipsis: true,
                render: (a: any) => {
                    return GGStateData[a] || '--'
                }
            },
            // {
            //     title: '创意状态',
            //     dataIndex: 'adCreativeStatus',
            //     key: 'adCreativeStatus',
            //     align: 'center',
            //     width: 115,
            //     render: (a: any) => {
            //         return CHUANGYIZHUANGTAI[a] || '--'
            //     }
            // },
            {
                title: '推广目标',
                dataIndex: 'promotedObjectType',
                key: 'promotedObjectType',
                align: 'center',
                width: 80,
                ellipsis: true,
                render: (a: any) => {
                    return TUIGUANGMUBIAO[a]
                }
            },
            // {
            //     title: '购买类型',
            //     dataIndex: 'adBuyType',
            //     key: 'adBuyType',
            //     align: 'center',
            //     width: 110,
            //     render: (a: any) => {
            //         return GOUMAILEIXING[a] || '--'
            //     }
            // },
            {
                title: '广告预算',
                dataIndex: 'dailyBudget',
                key: 'dailyBudget',
                width: 110,
                align: 'center',
                ellipsis: true,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            {
                title: '出价方式',
                dataIndex: 'bidMode',
                key: 'bidMode',
                align: 'center',
                width: 80,
                render: (a: any) => {
                    return CHUJIAFANGSHI[a] || '--'
                }
            },
            {
                title: '当前出价',
                dataIndex: 'bidAmount',
                key: 'bidAmount',
                width: 110,
                align: 'center',
                ellipsis: true,
                render: (a: any) => {
                    return <div style={a >= 500 ? { backgroundColor: 'rgba(255, 80, 82, .72)', height: 26, color: '#fff', display: 'flex', justifyContent: 'center', alignItems: 'center', fontWeight: 600 } : {}}><Statistic value={a || 0} valueStyle={a >= 500 ? { fontSize: 14 } : {}} /></div>
                }
            },
            // {
            //     title: '计划预算',
            //     dataIndex: 'planBudget',
            //     key: 'planBudget',
            //     width: 110,
            //     align: 'center',
            //     render: (a: any) => {
            //         return a
            //     }
            // },
            {
                title: '广告总消耗',
                dataIndex: 'costTotal',
                key: 'costTotal',
                align: 'center',
                width: 100,
                ellipsis: true,
                sorter: true,
                render: (a: any) => {
                    return <div style={{ height: 26, position: 'relative' }}>
                        <Progress
                            strokeColor={{
                                from: '#10c1e9',
                                to: '#6892d0',
                            }}
                            status="active"
                            showInfo={false}
                            percent={a ? a / 30000 * 100 : 0}
                        />
                        <span style={{ position: 'absolute', left: 0, top: 2, bottom: 0, right: 0 }}><Statistic value={a || 0} valueStyle={a >= 30000 ? { color: '#000', fontWeight: 500 } : { fontWeight: 500 }} /></span>
                    </div>
                }
            },
            {
                title: '今日消耗',
                dataIndex: 'costDay',
                key: 'costDay',
                align: 'center',
                width: 105,
                sorter: true,
                render: (a: any) => {
                    return <div style={{ height: 26, position: 'relative' }}>
                        <Progress
                            strokeColor={{
                                from: '#ff5900',
                                to: '#ffd380',
                            }}
                            status="active"
                            showInfo={false}
                            percent={a ? a / 2000 * 100 : 0}
                        />
                        <span style={{ position: 'absolute', left: 0, top: 2, bottom: 0, right: 0 }}><Statistic value={a || 0} valueStyle={a >= 2000 ? { color: '#000', fontWeight: 500 } : { fontWeight: 500 }} /></span>
                    </div>
                }
            },
            {
                title: '当前小时消耗',
                dataIndex: 'costHour',
                key: 'costHour',
                align: 'center',
                width: 110,
                sorter: true,
                render: (a: any) => {
                    return <div style={{ height: 26, position: 'relative' }}>
                        <Progress
                            strokeColor={{
                                from: '#e7a0f5',
                                to: '#d161f7',
                            }}
                            status="active"
                            showInfo={false}
                            percent={a ? a / 300 * 100 : 0}
                        />
                        <span style={{ position: 'absolute', left: 0, top: 2, bottom: 0, right: 0 }}><Statistic value={a || 0} valueStyle={a >= 300 ? { color: '#000', fontWeight: 500, fontSize: 15 } : { fontWeight: 500, fontSize: 15 }} /></span>
                    </div>
                }
            },
            {
                title: '前第1小时消耗',
                dataIndex: 'costLastHour',
                key: 'costLastHour',
                align: 'center',
                width: 110,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            {
                title: '前第2小时消耗',
                dataIndex: 'costLastTwoHour',
                key: 'costLastTwoHour',
                align: 'center',
                width: 80,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            {
                title: '前第3小时消耗',
                dataIndex: 'costLastThreeHour',
                key: 'costLastThreeHour',
                align: 'center',
                width: 110,
                sorter: true,
                render: (a: number) => {
                    return <Statistic value={a || 0} />
                },
            },
            {
                title: '当前小时消耗差额',
                dataIndex: 'costDiffBeforeHour',
                key: 'costDiffBeforeHour',
                align: 'center',
                width: 125,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a || 0} valueStyle={a > 0 ? { color: 'red' } : { color: 'green' }} />
                }
            },
            {
                title: '前第1小时消耗差额',
                dataIndex: 'costDiffBeforeTwoHour',
                key: 'costDiffBeforeTwoHour',
                align: 'center',
                width: 125,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a || 0} valueStyle={a > 0 ? { color: 'red' } : { color: 'green' }} />
                }
            },
            {
                title: "前第2小时消耗差额",
                dataIndex: 'costDiffBeforeThreeHour',
                key: 'costDiffBeforeThreeHour',
                align: 'center',
                width: 125,
                sorter: true,
                render: (a: number) => {
                    return <Statistic value={a || 0} valueStyle={a > 0 ? { color: 'red' } : { color: 'green' }} />
                },
            },
            {
                title: "前三小时消耗趋势",
                dataIndex: 'costTrendLastThreeHour',
                key: 'costTrendLastThreeHour',
                align: 'center',
                width: 75,
                render: (a: number) => {
                    return a > 0 ? <RiseOutlined style={{ color: 'red', fontWeight: 900, fontSize: 22 }} /> : '--'
                },
            },
            {
                title: '当前5min消耗流速',
                dataIndex: 'costSpeed',
                key: 'costSpeed',
                align: 'center',
                width: 115,
                render: (a: any) => {
                    a = a ? parseFloat(a.toFixed(2)) : 0
                    return <div style={{ height: 26, position: 'relative' }}>
                        <Progress
                            strokeColor={{
                                from: '#00DDFF',
                                to: '#37A2FF',
                            }}
                            status="active"
                            showInfo={false}
                            percent={a ? a / 100 * 100 : 0}
                        />
                        <span style={{ position: 'absolute', left: 0, top: 2, bottom: 0, right: 0 }}><Statistic value={a || 0} valueStyle={a >= 100 ? { color: '#000', fontWeight: 500 } : { fontWeight: 500 }} /></span>
                    </div>
                }
            },
            {
                title: '曝光量',
                dataIndex: 'viewDay',
                key: 'viewDay',
                align: 'center',
                width: 70,
                sorter: true,
                render: (a: number) => {
                    return <Statistic value={a || 0} />
                },
            },
            {
                title: '千次曝光成本',
                dataIndex: 'thousandDisplayPriceDay',
                key: 'thousandDisplayPriceDay',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            {
                title: '点击量',
                dataIndex: 'clickDay',
                key: 'clickDay',
                align: 'center',
                width: 70,
                sorter: true,
                render: (a: number) => {
                    return <Statistic value={a || 0} />
                },
            },
            {
                title: '点击均价',
                dataIndex: 'cpcDay',
                key: 'cpcDay',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            {
                title: '点击率',
                dataIndex: 'ctrDay',
                key: 'ctrDay',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    a = a ? parseFloat((a * 100).toFixed(2)) : 0
                    return a + '%'
                }
            },
            {
                title: '优化目标',
                dataIndex: 'optimizationGoal',
                key: 'optimizationGoal',
                align: 'center',
                width: 115,
                render: (a: any) => {
                    return YOUHUAMUBIAO[a] || '--'
                }
            },
            {
                title: '转化目标量',
                dataIndex: 'conversionsCountDay',
                key: 'conversionsCountDay',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            {
                title: '转化目标成本',
                dataIndex: 'conversionsCostDay',
                key: 'conversionsCostDay',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return <div style={a > 500 ? { backgroundColor: '#efea5b', height: 26, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 600 } : {}}><Statistic value={a || 0} /></div>
                }
            },
            {
                title: '目标转化率',
                dataIndex: 'conversionsRateDay',
                key: 'conversionsRateDay',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    a = a ? parseFloat((a * 100).toFixed(2)) : 0
                    return a + '%'
                }
            },
            {
                title: '下单量',
                dataIndex: 'orderCountDay',
                key: 'orderCountDay',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            {
                title: '首日新增下单量',
                dataIndex: 'firstDayOrderCountDay',
                key: 'firstDayOrderCountDay',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            {
                title: '下单成本',
                dataIndex: 'orderCostDay',
                key: 'orderCostDay',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            {
                title: '下单率',
                dataIndex: 'orderRateDay',
                key: 'orderRateDay',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    a = a ? parseFloat((a * 100).toFixed(2)) : 0
                    return a + '%'
                }
            },
            {
                title: '下单金额',
                dataIndex: 'orderAmountDay',
                key: 'orderAmountDay',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            {
                title: '首日新增下单金额',
                dataIndex: 'firstDayOrderAmountDay',
                key: 'firstDayOrderAmountDay',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            {
                title: '下单客单价',
                dataIndex: 'atvDay',
                key: 'atvDay',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            {
                title: '下单ROI',
                dataIndex: 'orderRoiDay',
                key: 'orderRoiDay',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    a = a ? parseFloat((a * 100).toFixed(2)) : 0
                    return a + '%'
                }
            },
            {
                title: '首日新增下单ROI',
                dataIndex: 'firstDayOrderRoiDay',
                key: 'firstDayOrderRoiDay',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    a = a ? parseFloat((a * 100).toFixed(2)) : 0
                    return a + '%'
                }
            },
            {
                title: '公众号关注人数',
                dataIndex: 'mpFollowUvDay',
                key: 'mpFollowUvDay',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return a
                }
            },
            {
                title: '公众号关注率',
                dataIndex: 'mpFollowRateDay',
                key: 'mpFollowRateDay',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    a = a ? parseFloat((a * 100).toFixed(2)) : 0
                    return a + '%'
                }
            },
            {
                title: '公众号关注成本',
                dataIndex: 'mpFollowCostDay',
                key: 'mpFollowCostDay',
                align: 'center',
                width: 115,
                sorter: true,
                render: (a: any) => {
                    return <Statistic value={a || 0} />
                }
            },
            // {
            //     title: '注册人数',
            //     dataIndex: 'mpRegisterUserCount',
            //     key: 'mpRegisterUserCount',
            //     align: 'center',
            //     width: 115,
            // sorter: true,
            //     render: (a: any) => {
            //         return a
            //     }
            // },
            // {
            //     title: '注册次数',
            //     dataIndex: 'mpRegisterCount',
            //     key: 'mpRegisterCount',
            //     align: 'center',
            //     width: 115,
            // sorter: true,
            //     render: (a: any) => {
            //         return a
            //     }
            // },
            // {
            //     title: '注册成本',
            //     dataIndex: 'mpRegisterCost',
            //     key: 'mpRegisterCost',
            //     align: 'center',
            //     width: 115,
            // sorter: true,
            //     render: (a: any) => {
            //         return <Statistic value={a || 0} />
            //     }
            // },
            {
                title: '操作',
                dataIndex: 'event',
                key: 'event',
                align: 'center',
                width: 90,
                render: (a: string, b: any) => (
                    // <a style={{ color: '#1890ff' }} onClick={() => { planDetail(b) }}>广告详情</a>
                    <Dropdown overlay={
                        <Menu>
                            <Menu.Item key="0">
                                <a style={{ color: '#1890ff' }} onClick={() => { planDetail(b) }}>广告详情</a>
                            </Menu.Item>
                            {mode === 'minute' ? <Menu.Item key="1">
                                <a style={{ color: '#1890ff' }} onClick={() => { getDetailList(b.adgroupId, [b.accountId]) }}>小时</a>
                            </Menu.Item> : <Menu.Item key="1">
                                <a style={{ color: '#1890ff' }} onClick={() => { getMinuList(b?.adgroupId, [b.accountId]) }}>5min</a>
                            </Menu.Item>}

                            <Menu.Item key="2">
                                <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }} onClick={() => details(b)}>
                                    <RocketSvg /><a style={{ marginLeft: 4, color: '#1890ff' }}>详情</a>
                                </div>
                            </Menu.Item>
                            <Menu.Item key="3">
                                <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>
                            </Menu.Item>
                        </Menu>
                    } trigger={['click']}>
                        <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                            更多 <DownOutlined />
                        </a>
                    </Dropdown>
                )
            }
        ]
        return newArr
    }
}
export default columnsMonitor