ad-manage/src/pages/dataStatistics/imageRank/imageLibrary/tableConfig.tsx

import { Statistic, Image, Space, Badge } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import { SortOrder } from 'antd/lib/table/interface'
import React from 'react'
import style from './index.less'

function columns(props?: { sortOrder?: { columnKey: string, order: SortOrder | undefined } }) {
    let newArr: ColumnsType<any> = [
        // {
        //     title: '图片链接',
        //     dataIndex: 'preview_url',
        //     key: 'preview_url',
        //     align: 'center',
        //     width: 60,
        //     fixed: 'left',
        //     render: (url: string) => {
        //         let urls = url?.split(',')
        //         return <Space>
        //             {
        //                 urls.map((a, b) => {
        //                     return <Image src={a} style={{ width: 100 }} preview key={b} />
        //                 })
        //             }
        //         </Space>
        //     }
        // },
        {
            title: '图片链接',
            dataIndex: 'preview_url',
            key: 'preview_url',
            align: 'center',
            ellipsis: true,
            fixed: 'left',
            width:60,
            render: (url: string) => {
                let urls = url?.split(',')
                return <Space style={{display:'flex',flexFlow:'row wrap',justifyContent:'center',}} className={style.img}>
               <Image.PreviewGroup>
                {
                    urls?.map((a, b) => {
                            return <Badge count={urls?.length > 1 ? urls?.length : ''}  style={b > 0 ?{ display:'none' }:{}} size='small'>
                                 <Image src={a} preview key={b}  style={b > 0 ?{ display:'none'}:{width:20,zIndex:100}}/>
                                </Badge>   
                        })
                    }
               </Image.PreviewGroup>
            </Space>       
            }
        },
        {
            title: '消耗',
            dataIndex: 'sum(cost)',
            key: 'sum(cost)',
            align: 'center',
            width: 60,
            sorter: true,
            sortOrder: (props?.sortOrder?.columnKey === 'sum(cost)' && props?.sortOrder?.order) || undefined,
            render: (a: any) => {
                return <Statistic value={a || 0} />
            }
        },
        {
            title: '点击率',
            dataIndex: 'ctr',
            key: 'ctr',
            align: 'center',
            width: 60,
            sorter: true,
            sortOrder: (props?.sortOrder?.columnKey === 'ctr' && props?.sortOrder?.order) || undefined,
            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: 'cpc',
            key: 'cpc',
            align: 'center',
            width: 60,
            sorter: true,
            sortOrder: (props?.sortOrder?.columnKey === 'cpc' && props?.sortOrder?.order) || undefined,
            render: (a: any) => {
                return <Statistic value={a || 0} />
            }
        },
    ]
    return newArr
}
export { columns }