ad-manage/src/pages/launchSystemV3/monitorEWList/astraGroupHourEle.tsx

import { useAjax } from '@/Hook/useAjax';
import { getLocalCsgroupDayHourListApi } from '@/services/adqV3/monitorEWList';
import { Modal, Statistic, Table, Typography } from 'antd';
import React, { useEffect, useState } from 'react';
import '../tencentAdPutIn/index.less';
const  { Text } = Typography;

interface AstraGroupHourProps {
    localCsgroupName: string;
    data: {
        day: string;
        localCsgroupId: number;
    }
}
const AstraGroupHourEle: React.FC<AstraGroupHourProps> = ({ localCsgroupName, data }) => {

    /***************************************/
    const [visible, setVisible] = useState<boolean>(false);

    const getLocalCsgroupDayHourList = useAjax((params) => getLocalCsgroupDayHourListApi(params))
    /***************************************/

    useEffect(() => {
        if (visible) {
            getLocalCsgroupDayHourList.run(data)
        }
    }, [data, visible]);

    return <div>
        <a style={{ fontSize: 12 }} onClick={() => setVisible(true)}>小时数据</a>
        {visible && <Modal
            title={<strong>{data.day}_{localCsgroupName} 小时数据</strong>}
            open={visible}
            onCancel={() => setVisible(false)}
            footer={null}
            className='modalResetCss'
            width={800}
        >
            <Table
                dataSource={getLocalCsgroupDayHourList?.data}
                columns={[
                    {
                        title: '日期',
                        dataIndex: 'day',
                        key: 'day',
                        width: 80,
                        ellipsis: true,
                        align: 'center',
                        render(value) {
                            return <span style={{ fontSize: 12 }}>{value}</span>
                        },
                    },
                    {
                        title: '小时',
                        dataIndex: 'hour',
                        key: 'hour',
                        width: 80,
                        ellipsis: true,
                        align: 'center',
                        render(value) {
                            return <span style={{ fontSize: 12 }}>{value}</span>
                        },
                    },
                    {
                        title: '消耗',
                        dataIndex: 'cost',
                        key: 'cost',
                        width: 80,
                        ellipsis: true,
                        align: 'right',
                        render(value) {
                            return <Statistic value={value || 0} />
                        },
                    },
                    {
                        title: '加粉次数(广告)',
                        dataIndex: 'scanFollowCount',
                        key: 'scanFollowCount',
                        width: 80,
                        ellipsis: true,
                        align: 'right',
                        render(value) {
                            return <span style={{ fontSize: 12 }}>{value}</span>
                        },
                    },
                    {
                        title: '加粉人数(广告)',
                        dataIndex: 'scanFollowUserCount',
                        key: 'scanFollowUserCount',
                        width: 80,
                        ellipsis: true,
                        align: 'right',
                        render(value) {
                            return <span style={{ fontSize: 12 }}>{value}</span>
                        },
                    },
                    {
                        title: '加粉人数',
                        dataIndex: 'addUserCount',
                        key: 'addUserCount',
                        width: 80,
                        ellipsis: true,
                        align: 'right',
                        render(value) {
                            return <span style={{ fontSize: 12 }}>{value}</span>
                        },
                    },
                    {
                        title: '数据更新时间',
                        dataIndex: 'dataTime',
                        key: 'dataTime',
                        width: 140,
                        ellipsis: true,
                        align: 'center',
                        render(value) {
                            return <span style={{ fontSize: 12 }}>{value}</span>
                        },
                    }
                ]}
                pagination={false}
                summary={pageData => {
                    let totalCost = 0;
                    let totalScanFollowCount = 0;
                    let totalScanFollowUserCount = 0;
                    let totalAddUserCount = 0;

                    pageData.forEach(({ cost, scanFollowCount, scanFollowUserCount, addUserCount }) => {
                        totalCost += cost;
                        totalScanFollowCount += scanFollowCount;
                        totalScanFollowUserCount += scanFollowUserCount;
                        totalAddUserCount += addUserCount;
                    });

                    return (
                        <Table.Summary fixed='top'>
                            <Table.Summary.Row>
                                <Table.Summary.Cell index={0} align="center"><Text strong>总计</Text></Table.Summary.Cell>
                                <Table.Summary.Cell index={1} align="center">--</Table.Summary.Cell>
                                <Table.Summary.Cell index={2} align="right">
                                    <Text strong>{totalCost}</Text>
                                </Table.Summary.Cell>
                                <Table.Summary.Cell index={3} align="right">
                                    <Text strong>{totalScanFollowCount}</Text>
                                </Table.Summary.Cell>
                                <Table.Summary.Cell index={4} align="right">
                                    <Text strong>{totalScanFollowUserCount}</Text>
                                </Table.Summary.Cell>
                                <Table.Summary.Cell index={5} align="right">
                                    <Text strong>{totalAddUserCount}</Text>
                                </Table.Summary.Cell>
                                <Table.Summary.Cell index={6} align="center">--</Table.Summary.Cell>
                            </Table.Summary.Row>
                        </Table.Summary>
                    );
                }}
                sticky
                size='small'
                bordered
                rowKey={'id'}
                loading={getLocalCsgroupDayHourList.loading}
                scroll={{ x: 750 }}
            />
        </Modal>}
    </div>;
};

export default React.memo(AstraGroupHourEle);