ad-manage/src/pages/launchSystemV3/adMonitorListV3/tablePlanListConfig.tsx

import { BidModeEnum, BidStrategyEnum, OptimizationGoalEnum } from '@/services/launchAdq/enum'
import React from 'react'
import { Badge, Dropdown, Menu, Space, Statistic } from 'antd'
import { ReactComponent as RocketSvg } from '@/assets/rocket.svg'
import '../../launchSystemNew/adq/index.less'
import { copy } from '@/utils/utils'
import { ColumnsType } from 'antd/lib/table'
import StatisticNull from '@/components/StatisticNull'
import { DownOutlined } from '@ant-design/icons'
import TimeSeriesLook from '../../launchSystemNew/adq/ad/timeSeriesLook'
import SwitchStatus from '../adqv3/ad/switchStatus'
import { ADGROUP_STATUS } from '../adqv3/const'
import BoxOther from '../adqv3/creative/boxOther'
import CreativePreview from './CreativePreview'
function tablePlanConfig(
    onChange: () => void,
    details: (data: any) => void,
    log: (data: any) => void,
    handleTag: (data: any) => void,
    delTag: (data: any) => void,
): ColumnsType<any> {

    let adArr: ColumnsType<any> = [
        {
            title: '启停',
            dataIndex: 'configured_status',
            key: 'configured_status',
            align: 'center',
            width: 40,
            fixed: 'left',
            render: (a: string, b: any) => {
                if (b?.account_id === '总计') {
                    return '--'
                }
                return <SwitchStatus configuredStatus={a} isDeleted={b?.is_deleted} adgroupId={b?.adgroup_id} accountId={b?.account_id} onChange={onChange} />
            }
        },
        {
            title: '所属账号',
            dataIndex: 'account_id',
            key: 'account_id',
            align: 'center',
            width: 80,
            ellipsis: true,
            render: (a: string) => {
                return <Space>
                    <a onClick={() => copy(a)} >{a}</a>
                </Space>
            }
        },
        {
            title: '腾讯备注',
            dataIndex: 'memo',
            key: 'memo',
            align: 'center',
            width: 80,
            ellipsis: true,
            render(value, record) {
                if (record?.account_id === '总计') {
                    return '--'
                }
                return value
            },
        },
        {
            title: '本地备注',
            dataIndex: 'remark',
            key: 'remark',
            align: 'center',
            width: 80,
            ellipsis: true,
            render(value, record) {
                if (record?.account_id === '总计') {
                    return '--'
                }
                return value
            },
        },
        {
            title: '广告ID',
            dataIndex: 'adgroup_id',
            key: 'adgroup_id',
            align: 'center',
            width: 100,
            ellipsis: true,
            render: (a: string, b: any) => {
                if (b?.account_id === '总计') {
                    return '--'
                }
                return <Space>
                    <a onClick={() => copy(a)} >{a}</a>
                </Space>
            }
        },
        {
            title: '投手',
            dataIndex: 'put_user_name',
            key: 'put_user_name',
            align: 'center',
            width: 70,
            ellipsis: true,
            render(value, record) {
                if (record?.account_id === '总计') return '--';
                return value
            },
        },
        {
            title: '广告名称',
            dataIndex: 'adgroup_name',
            key: 'adgroup_name',
            width: 280,
            ellipsis: true,
            render: (a: string, b: any) => {
                if (b?.account_id === '总计') return '--';
                return a
            }
        },
        {
            title: '投放日期',
            dataIndex: 'begin_date',
            key: 'begin_date',
            align: 'center',
            width: 150,
            ellipsis: true,
            sorter: true,
            render: (a: string, b: { end_date: string, account_id: any }) => {
                if (b?.account_id === '总计') return '--';
                return b?.end_date && b?.end_date !== '1970-01-01' ? a + '~' + b.end_date : a + '~' + '长期投放'
            }
        },
        {
            title: '投放时间',
            dataIndex: 'time_series',
            key: 'time_series',
            align: 'center',
            width: 55,
            render: (a: string, b: { endDate: string, account_id: string }) => {
                if (b?.account_id === '总计') return '--';
                return <TimeSeriesLook timeSeries={a} />
            }
        },
        {
            title: '首日开始投放时间',
            dataIndex: 'first_day_begin_time',
            key: 'first_day_begin_time',
            align: 'center',
            width: 70,
            render(value, record) {
                if (record?.account_id === '总计') return '--';
                return value
            },
        },
        {
            title: '出价',
            dataIndex: 'bid_amount',
            key: 'bid_amount',
            width: 140,
            ellipsis: true,
            sorter: true,
            render: (a: string, b: { bid_mode: string, optimization_goal: string, account_id: any }) => {
                if (b?.account_id === '总计') return '--';
                return `${b?.bid_mode ? BidModeEnum[b?.bid_mode] : ''} ${a}元/${b?.bid_mode === 'BID_MODE_CPM' ? '千次曝光' : b?.bid_mode === 'BID_MODE_CPC' ? '点击' : OptimizationGoalEnum[b?.optimization_goal]}`
            }
        },
        {
            title: '深度优化行为出价',
            dataIndex: 'deep_conversion_behavior_bid',
            key: 'deep_conversion_behavior_bid',
            width: 70,
            align: 'center',
            render: (a: string, b: { deep_conversion_spec_json: any, account_id: any }) => {
                if (b?.account_id === '总计') return '--';
                if (b?.deep_conversion_spec_json) {
                    return a
                } else {
                    return '--'
                }

            }
        },
        {
            title: '出价类型',
            dataIndex: 'smart_bid_type',
            key: 'smart_bid_type',
            align: 'center',
            width: 80,
            ellipsis: true,
            render: (a: string, b) => {
                if (b?.account_id === '总计') return '--';
                return a === 'SMART_BID_TYPE_CUSTOM' ? '手动出价' : '自动出价'
            }
        },
        {
            title: '出价策略',
            dataIndex: 'bid_strategy',
            key: 'bid_strategy',
            align: 'center',
            width: 70,
            ellipsis: true,
            render: (a: string, b) => {
                if (b?.account_id === '总计') return '--';
                return BidStrategyEnum[a]
            }
        },
        {
            title: '广告组日预算(元)',
            dataIndex: 'daily_budget',
            key: 'daily_budget',
            align: 'center',
            width: 70,
            sorter: true,
            render: (a: string, b: any) => {
                if (b?.account_id === '总计') return '--';
                return a
            }
        },
        {
            title: '是否开启自动版位功能',
            dataIndex: 'automatic_site_enabled',
            key: 'automatic_site_enabled',
            align: 'center',
            width: 80,
            render: (a: any, b: any) => {
                if (b?.account_id === '总计') return '--';
                return a ? '开' : '关'
            }
        },
        {
            title: '定向条件描述',
            dataIndex: 'targeting_translation',
            key: 'targeting_translation',
            align: 'center',
            width: 80,
            ellipsis: true,
            render: (a: any) => {
                return a || '--'
            }
        },
        {
            title: '创建时间',
            dataIndex: 'created_time',
            key: 'created_time',
            align: 'center',
            width: 140,
            ellipsis: true,
            render(value, record) {
                if (record?.account_id === '总计') return '--';
                return value
            },
        },
        {
            title: '是否已删除',
            dataIndex: 'is_deleted',
            key: 'is_deleted',
            align: 'center',
            width: 60,
            render: (a: any, b: any) => {
                if (b?.account_id === '总计') return '--';
                return <Badge status={!a ? "processing" : "error"} text={a ? '是' : '否'} />
            }
        },
        {
            title: '广告状态',
            dataIndex: 'system_status',
            key: 'system_status',
            align: 'center',
            width: 70,
            ellipsis: true,
            render: (a: string) => {
                return ADGROUP_STATUS[a]
            }
        },
        {
            title: '标记备注',
            dataIndex: 'tag_remark',
            key: 'tag_remark',
            align: 'center',
            width: 100,
            ellipsis: true,
            render(value, b) {
                if (b?.account_id === '总计') return '--';
                return value || '--'
            },
        },
        {
            title: '广告详情',
            dataIndex: 'cost_speed',
            key: 'cost_speed',
            align: 'center',
            width: 80,
            className: 'padding2',
            render: (a: any, b: any) => {
                if (b?.account_id === '总计') return '--';
                return <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', lineHeight: 'normal', fontSize: 14 }}>
                    <RocketSvg /> <a onClick={() => details(b)} style={{ marginLeft: 10 }}>详情</a>
                </div>
            }
        },
        {
            title: '创意预览',
            dataIndex: 'creative_ids',
            key: 'creative_ids',
            width: 140,
            ellipsis: true,
            render: (_: any, b: any) => {
                // return <BoxOther creativeComponents={b?.creative_preview?.[0] || {}} />
                return <CreativePreview creativePreview={b?.creative_preview || []} />
            }
        },
        {
            title: '操作',
            dataIndex: 'cz',
            key: 'cz',
            width: 130,
            align: 'center',
            render: (a: any, b: any) => {
                if (b?.account_id === '总计') return '--';
                return <Space>
                    <Dropdown overlay={<Menu>
                        <Menu.Item><a onClick={() => log(b)}>告警日志</a></Menu.Item>
                        <Menu.Item><a onClick={() => handleTag(b)}>打标记</a></Menu.Item>
                        {b?.tag_value ? <Menu.Item><a style={{ color: 'red' }} onClick={() => delTag(b)}>删除标记</a></Menu.Item> : undefined}
                    </Menu>}>
                        <a><Space size={2}>更多 <DownOutlined /></Space></a>
                    </Dropdown>
                    <a style={{ color: '#1890ff' }} onClick={() => window.open(`https://ad.qq.com/atlas/${b?.account_id}/admanage/index?tab=adgroup&query={%22operation_status%22:[%22CALCULATE_STATUS_EXCLUDE_DEL%22],%22system_status%22:[],%22search_name%22:%22${b.adgroup_id}%22}`)} target="_blank">腾讯广告</a>
                </Space>
            }
        }
    ]

    let adDataArr: ColumnsType<any> = [
        {
            title: '消耗',
            dataIndex: 'cost_total',
            key: 'cost_total',
            align: 'center',
            width: 110,
            sorter: true,
            render: (a: any, b: any) => {
                return <StatisticNull data={b} field='cost_total' />
            }
        },
        {
            title: '曝光量',
            dataIndex: 'view_total',
            key: 'view_total',
            align: 'center',
            width: 100,
            sorter: true,
            render: (a: any, b: any) => {
                return <StatisticNull data={b} field='view_total' />
            }
        },
        {
            title: '千次曝光成本',
            dataIndex: 'thousand_display_price_total',
            key: 'thousand_display_price_total',
            align: 'center',
            width: 110,
            sorter: true,
            render: (a: any, b: any) => {
                return <StatisticNull data={b} field='thousand_display_price_total' precision={2} />
            }
        },
        {
            title: '点击量',
            dataIndex: 'click_total',
            key: 'click_total',
            align: 'center',
            width: 110,
            sorter: true,
            render: (a: any, b: any) => {
                return <StatisticNull data={b} field='click_total' />
            }
        },
        {
            title: '点击率',
            dataIndex: 'ctr_total',
            key: 'ctr_total',
            align: 'center',
            width: 110,
            sorter: true,
            render: (a: any, b: any) => {
                if (b?.ctr_total !== undefined && b?.ctr_total !== null) {
                    return <Statistic value={a ? a.toFixed(2) : 0} precision={2} valueStyle={{ color: '#3f8600' }} suffix="%" />
                } else {
                    return '--'
                }
            }
        },
        {
            title: '点击均价',
            dataIndex: 'cpc_total',
            key: 'cpc_total',
            align: 'center',
            width: 110,
            sorter: true,
            render: (a: any, b: any) => {
                return <StatisticNull data={b} field='cpc_total' />
            }
        },
        {
            title: '不感兴趣点击次数',
            dataIndex: 'no_interest_count_total',
            key: 'no_interest_count_total',
            align: 'center',
            width: 110,
            sorter: true,
            render: (a: any, b: any) => {
                return <StatisticNull data={b} field='no_interest_count_total' />
            }
        },
        {
            title: '朋友圈视频播放次数',
            dataIndex: 'video_play_count_total',
            key: 'video_play_count_total',
            align: 'center',
            width: 110,
            sorter: true,
            render: (a: any, b: any) => {
                return <StatisticNull data={b} field='video_play_count_total' />
            }
        },
        {
            title: '下载次数',
            dataIndex: 'download_count_total',
            key: 'download_count_total',
            align: 'center',
            width: 110,
            sorter: true,
            render: (a: any, b: any) => {
                return <StatisticNull data={b} field='download_count_total' />
            }
        },
        {
            title: '安装次数',
            dataIndex: 'install_count_total',
            key: 'install_count_total',
            align: 'center',
            width: 110,
            sorter: true,
            render: (a: any, b: any) => {
                return <StatisticNull data={b} field='install_count_total' />
            }
        },
        {
            title: '激活次数',
            dataIndex: 'activated_count_total',
            key: 'activated_count_total',
            align: 'center',
            width: 110,
            sorter: true,
            render: (a: any, b: any) => {
                return <StatisticNull data={b} field='activated_count_total' />
            }
        },
        {
            title: '公众号关注人数',
            dataIndex: 'mp_follow_uv_total',
            key: 'mp_follow_uv_total',
            align: 'center',
            width: 110,
            sorter: true,
            render: (a: any, b: any) => {
                return <StatisticNull data={b} field='mp_follow_uv_total' />
            }
        },
        {
            title: '公众号关注成本',
            dataIndex: 'mp_follow_cost_total',
            key: 'mp_follow_cost_total',
            align: 'center',
            width: 110,
            sorter: true,
            render: (a: any, b: any) => {
                return <StatisticNull data={b} field='mp_follow_cost_total' />
            }
        },
        {
            title: '公众号关注率',
            dataIndex: 'mp_follow_rate_total',
            key: 'mp_follow_rate_total',
            align: 'center',
            width: 110,
            sorter: true,
            render: (a: any, b: any) => {
                if (b?.mp_follow_rate_total !== undefined && b?.mp_follow_rate_total !== null) {
                    return <Statistic value={a ? a.toFixed(2) : 0} precision={2} valueStyle={{ color: '#3f8600' }} suffix="%" />
                } else {
                    return '--'
                }
            }
        },
        {
            title: '公众号关注次数',
            dataIndex: 'mp_follow_pv_total',
            key: 'mp_follow_pv_total',
            align: 'center',
            width: 110,
            sorter: true,
            render: (a: any, b: any) => {
                return <StatisticNull data={b} field='mp_follow_pv_total' />
            }
        },
        {
            title: '公众号关注次数成本',
            dataIndex: 'mp_follow_pv_cost_total',
            key: 'mp_follow_pv_cost_total',
            align: 'center',
            width: 120,
            sorter: true,
            render: (a: any, b: any) => {
                return <StatisticNull data={b} field='mp_follow_pv_cost_total' precision={2}/>
            }
        },
        {
            title: '快应用添加次数',
            dataIndex: 'add_quick_app_pv_total',
            key: 'add_quick_app_pv_total',
            align: 'center',
            width: 110,
            sorter: true,
            render: (a: any, b: any) => {
                return <StatisticNull data={b} field='add_quick_app_pv_total' />
            }
        },
        {
            title: '快应用添加成本',
            dataIndex: 'add_quick_app_cost_total',
            key: 'add_quick_app_cost_total',
            align: 'center',
            width: 110,
            sorter: true,
            render: (a: any, b: any) => {
                return <StatisticNull data={b} field='add_quick_app_cost_total' />
            }
        },
        {
            title: '快应用添加率',
            dataIndex: 'add_quick_app_rate_total',
            key: 'add_quick_app_rate_total',
            align: 'center',
            width: 110,
            sorter: true,
            render: (a: any, b: any) => {
                if (b?.add_quick_app_rate_total !== undefined && b?.add_quick_app_rate_total !== null) {
                    return <Statistic value={a ? a.toFixed(2) : 0} precision={2} valueStyle={{ color: '#3f8600' }} suffix="%" />
                } else {
                    return '--'
                }
            }
        },
        {
            title: '加企业微信客服人数',
            dataIndex: 'scan_follow_uv_total',
            key: 'scan_follow_uv_total',
            align: 'center',
            width: 120,
            sorter: true,
            render: (a: any, b: any) => {
                return <StatisticNull data={b} field='scan_follow_uv_total' />
            }
        },
        {
            title: '加企业微信客服成本',
            dataIndex: 'scan_follow_cost_total',
            key: 'scan_follow_cost_total',
            align: 'center',
            width: 120,
            sorter: true,
            render: (a: any, b: any) => {
                return <StatisticNull data={b} field='scan_follow_cost_total' precision={2} />
            }
        },
        {
            title: '加企业微信客服率',
            dataIndex: 'scan_follow_rate_total',
            key: 'scan_follow_rate_total',
            align: 'center',
            width: 120,
            sorter: true,
            render: (a: any, b: any) => {
                if (b?.scan_follow_rate_total !== undefined && b?.scan_follow_rate_total !== null) {
                    return <Statistic value={a ? a.toFixed(2) : 0} precision={2} valueStyle={{ color: '#3f8600' }} suffix="%" />
                } else {
                    return '--'
                }
            }
        },


        {
            title: '首日新增下单量',
            dataIndex: 'first_day_order_count_total',
            key: 'first_day_order_count_total',
            align: 'center',
            width: 110,
            sorter: true,
            render: (a: any, b: any) => {
                return <StatisticNull data={b} field='first_day_order_count_total' />
            }
        },
        {
            title: '首日新增下单金额',
            dataIndex: 'first_day_order_amount_total',
            key: 'first_day_order_amount_total',
            align: 'center',
            width: 110,
            sorter: true,
            render: (a: any, b: any) => {
                return <StatisticNull data={b} field='first_day_order_amount_total' />
            }
        },
        {
            title: '首日新增下单ROI',
            dataIndex: 'first_day_order_roi_total',
            key: 'first_day_order_roi_total',
            align: 'center',
            width: 110,
            sorter: true,
            render: (a: any, b: any) => {
                if (b?.first_day_order_roi_total !== undefined && b?.first_day_order_roi_total !== null) {
                    return <Statistic value={a ? a.toFixed(2) : 0} precision={2} valueStyle={{ color: '#3f8600' }} suffix="%" />
                } else {
                    return '--'
                }
            }
        },
        {
            title: '订单量',
            dataIndex: 'order_count_total',
            key: 'order_count_total',
            align: 'center',
            width: 110,
            sorter: true,
            render: (a: any, b: any) => {
                return <StatisticNull data={b} field='order_count_total' />
            }
        },
        {
            title: '订单金额',
            dataIndex: 'order_amount_total',
            key: 'order_amount_total',
            align: 'center',
            width: 110,
            sorter: true,
            render: (a: any, b: any) => {
                return <StatisticNull data={b} field='order_amount_total' />
            }
        },
        {
            title: '下单成本',
            dataIndex: 'order_cost_total',
            key: 'order_cost_total',
            align: 'center',
            width: 110,
            sorter: true,
            render: (a: any, b: any) => {
                return <StatisticNull data={b} field='order_cost_total' precision={2} />
            }
        },
        {
            title: '下单率',
            dataIndex: 'order_rate_total',
            key: 'order_rate_total',
            align: 'center',
            width: 110,
            sorter: true,
            render: (a: any, b: any) => {
                if (b?.order_rate_total !== undefined && b?.order_rate_total !== null) {
                    return <Statistic value={a ? a.toFixed(2) : 0} precision={2} valueStyle={{ color: '#3f8600' }} suffix="%" />
                } else {
                    return '--'
                }
            }
        },
        {
            title: '下单ROI',
            dataIndex: 'order_roi_total',
            key: 'order_roi_total',
            align: 'center',
            width: 110,
            sorter: true,
            render: (a: any, b: any) => {
                if (b?.order_roi_total !== undefined && b?.order_roi_total !== null) {
                    return <Statistic value={a ? a.toFixed(2) : 0} precision={2} valueStyle={{ color: '#3f8600' }} suffix="%" />
                } else {
                    return '--'
                }
            }
        },
        {
            title: '客单价',
            dataIndex: 'atv_total',
            key: 'atv_total',
            align: 'center',
            width: 110,
            sorter: true,
            render: (a: any, b: any) => {
                return <StatisticNull data={b} field='atv_total' precision={2} />
            }
        },
        {
            title: '转化量',
            dataIndex: 'conversions_count_total',
            key: 'conversions_count_total',
            align: 'center',
            width: 110,
            sorter: true,
            render: (a: any, b: any) => {
                return <StatisticNull data={b} field='conversions_count_total' />
            }
        },
        {
            title: '转化成本',
            dataIndex: 'conversions_cost_total',
            key: 'conversions_cost_total',
            align: 'center',
            width: 110,
            sorter: true,
            render: (a: any, b: any) => {
                return <StatisticNull data={b} field='conversions_cost_total' precision={2} />
            }
        },
        {
            title: '深度转化',
            dataIndex: 'deep_conversions_count_total',
            key: 'deep_conversions_count_total',
            align: 'center',
            width: 110,
            sorter: true,
            render: (a: any, b: any) => {
                return <StatisticNull data={b} field='deep_conversions_count_total' />
            }
        },
        {
            title: '转化率',
            dataIndex: 'conversions_rate_total',
            key: 'conversions_rate_total',
            align: 'center',
            width: 110,
            sorter: true,
            render: (a: any, b: any) => {
                if (b?.conversions_rate_total !== undefined && b?.conversions_rate_total !== null) {
                    return <Statistic value={a ? a.toFixed(2) : 0} precision={2} valueStyle={{ color: '#3f8600' }} suffix="%" />
                } else {
                    return '--'
                }
            }
        },
        {
            title: '加粉数',
            dataIndex: 'add_fans_count_total',
            key: 'add_fans_count_total',
            align: 'center',
            width: 110,
            sorter: true,
            render: (a: any, b: any) => {
                return <StatisticNull data={b} field='add_fans_count_total' />
            }
        },
        {
            title: '加粉成本',
            dataIndex: 'add_fans_cost_total',
            key: 'add_fans_cost_total',
            align: 'center',
            width: 110,
            sorter: true,
            render: (a: any, b: any) => {
                return <StatisticNull data={b} field='add_fans_cost_total' precision={2} />
            }
        },
    ]

    return [
        ...adArr,
        ...adDataArr
    ]
}
export default tablePlanConfig