qc-EnterpriseWeChat-Pro/src/pages/weComTask/page/home/index.tsx

import { useAjax } from '@/Hook/useAjax';
import React, { useEffect, useState } from 'react';
import { getCorpExternalUserRepeatListApi, getExternalUserRepeatByCorpAtlasApi, getExternalUserRepeatByCorpListApi, getExternalUserRepeatCorpApi, getExternalUserRepeatCorpUserApi } from '../../API/home';
import { Avatar, Card, Col, Flex, Input, Row, Space, Spin, Statistic, Table, Tabs, Tooltip, Typography } from 'antd';
import { BarChartOutlined, CheckOutlined, DeleteOutlined, ExclamationOutlined, GlobalOutlined, QuestionCircleOutlined, RetweetOutlined, UserOutlined } from '@ant-design/icons';
import useEcharts from '@/Hook/useEcharts';
const { Title } = Typography;
import style from './index.less'
import { CorpExternalUserColumns, ExternalUserColumns } from './tableConfig';

const Home: React.FC = () => {

    /*******************************************/
    const { Bar } = useEcharts()
    const [queryParmas, setQueryParmas] = useState<{ pageNum: number, pageSize: number, corpName?: string }>({ pageNum: 1, pageSize: 30 })
    const [queryParmasZt, setQueryParmasZt] = useState<{ pageNum: number, pageSize: number, corpName?: string }>({ pageNum: 1, pageSize: 30 })
    const [corpRepeat, setCorpRepeat] = useState<{ [x: string]: any }>({})
    const [corpUserRepeat, setCorpUserRepeat] = useState<{ [x: string]: any }>({})
    const [barCorpData, setBarCorpData] = useState<Record<string, any>[]>([])
    const [barCorpUserData, setBarCorpUserData] = useState<Record<string, any>[]>([])
    const [activeKey, setActiveKey] = useState<string>('1')
    const [userData, setUserData] = useState<Record<string, any>[]>([])
    const [overflowData, setOverflowData] = useState<{
        avgCorpRepeatUserRate: number,
        repeatUserRate: number,
        userCount: number,
        qcUuidCount: number,
        qcUuidCountRate: number,
        qcUuidNullCount: number,
        qcUuidNullCountRate: number,
        deletedUserCount: number,
        deletedUserCountRate: number
        qcUuidUserCount: number
    }>({ avgCorpRepeatUserRate: 0, repeatUserRate: 0, userCount: 0, qcUuidCount: 0, qcUuidCountRate: 0, qcUuidNullCount: 0, qcUuidNullCountRate: 0, deletedUserCount: 0, deletedUserCountRate: 0, qcUuidUserCount: 0 })

    const getExternalUserRepeatCorp = useAjax(() => getExternalUserRepeatCorpApi())
    const getExternalUserRepeatCorpUser = useAjax(() => getExternalUserRepeatCorpUserApi())
    const getExternalUserRepeatByCorpAtlas = useAjax(() => getExternalUserRepeatByCorpAtlasApi())
    const getExternalUserRepeatByCorpList = useAjax((params) => getExternalUserRepeatByCorpListApi(params))
    const getCorpExternalUserRepeatList = useAjax((params) => getCorpExternalUserRepeatListApi(params))
    /*******************************************/

    useEffect(() => {
        getExternalUserRepeatByCorpList.run(queryParmas)
    }, [queryParmas])

    useEffect(() => {
        getCorpExternalUserRepeatList.run(queryParmasZt)
    }, [queryParmasZt])

    useEffect(() => {
        getExternalUserRepeatCorp.run().then(res => {
            if (res?.data) {
                const cr = res.data
                setCorpRepeat(cr)
                setBarCorpData([
                    { name: '仅添加1个主体', '人数': cr?.oneRepeatCount },
                    { name: '添加2个主体', '人数': cr?.twoRepeatCount },
                    { name: '添加3个主体', '人数': cr?.threeRepeatCount },
                    { name: '添加4个主体', '人数': cr?.fourRepeatCount },
                    { name: '添加5个主体', '人数': cr?.fiveRepeatCount },
                    { name: '添加5个主体以上', '人数': cr?.gtFiveRepeatCount }
                ])
            } else {
                setCorpRepeat({})
                setBarCorpData([])
            }

        })
        getExternalUserRepeatCorpUser.run().then(res => {
            if (res?.data) {
                const cur = res.data
                setCorpUserRepeat(cur)
                setOverflowData({
                    avgCorpRepeatUserRate: cur?.avgCorpRepeatUserRate || 0,
                    repeatUserRate: cur?.repeatUserRate || 0,
                    userCount: cur?.userCount || 0,
                    qcUuidCount: cur?.qcUuidCount || 0,
                    qcUuidCountRate: cur?.qcUuidCountRate || 0,
                    qcUuidNullCount: cur?.qcUuidNullCount || 0,
                    qcUuidNullCountRate: cur?.qcUuidNullCountRate || 0,
                    deletedUserCount: cur?.deletedUserCount || 0,
                    deletedUserCountRate: cur?.deletedUserCountRate || 0,
                    qcUuidUserCount: cur?.qcUuidUserCount || 0,
                })
                setBarCorpUserData([
                    { name: '仅添加1名客服', '人数': cur?.oneRepeatCount },
                    { name: '添加2名客服', '人数': cur?.twoRepeatCount },
                    { name: '添加3名客服', '人数': cur?.threeRepeatCount },
                    { name: '添加4名客服', '人数': cur?.fourRepeatCount },
                    { name: '添加5名客服', '人数': cur?.fiveRepeatCount },
                    { name: '添加5名客服以上', '人数': cur?.gtFiveRepeatCount }
                ])
            } else {
                setCorpUserRepeat({})
                setOverflowData({ avgCorpRepeatUserRate: 0, repeatUserRate: 0, userCount: 0, qcUuidCount: 0, qcUuidCountRate: 0, qcUuidNullCount: 0, qcUuidNullCountRate: 0, deletedUserCount: 0, deletedUserCountRate: 0, qcUuidUserCount: 0 })
                setBarCorpUserData([])
            }

        })
        getExternalUserRepeatByCorpAtlas.run().then(res => {
            if (res?.data) {
                setUserData(res?.data?.map(item => {
                    return { name: item.corpName, '主体粉丝总数': item.corpExternalUserCount, '主体内重粉数': item.corpExternalUserRepeatCount }
                }))
            } else {
                setUserData([])
            }
        })
    }, [])

    return <div>
        <Spin spinning={getExternalUserRepeatCorpUser.loading}>
            <Flex gap={16}>
                <Card variant="borderless" style={{ width: '20%' }}>
                    <Flex justify='space-between'>
                        <Statistic
                            title={<strong style={{ fontSize: 14 }}>集团总企微用户数</strong>}
                            value={overflowData.userCount}
                            style={{ flex: 1 }}
                        />
                        <Avatar style={{ backgroundColor: '#DBEAFE', color: '#2563eb' }} size={40}><UserOutlined /></Avatar>
                    </Flex>
                </Card>
                <Card variant="borderless" style={{ width: '20%' }}>
                    <Flex justify='space-between'>
                        <Statistic
                            title={<Space>
                                <strong style={{ fontSize: 14 }}>集团跨主体去重企微用户数</strong>
                                <Tooltip title="集团跨主体去重企微用户数=未识别人数+添加1个客服人数+添加多个(>1)客服人数">
                                    <QuestionCircleOutlined />
                                </Tooltip>
                            </Space>}
                            style={{ flex: 1 }}
                            value={overflowData.qcUuidUserCount}
                        />
                        <Avatar style={{ backgroundColor: '#fff0f6', color: '#f759ab' }} size={40}><UserOutlined /></Avatar>
                    </Flex>
                </Card>
                <Card variant="borderless" style={{ width: '20%' }}>
                    <Flex justify='space-between'>
                        <Statistic
                            title={<strong style={{ fontSize: 14 }}>已识别用户数</strong>}
                            value={overflowData.qcUuidCount}
                            style={{ flex: 1 }}
                            suffix={<div style={{ display: 'flex' }}>
                                (<Statistic
                                    value={overflowData.qcUuidCountRate ? overflowData.qcUuidCountRate * 100 : 0}
                                    precision={4}
                                    suffix="%"
                                    valueStyle={overflowData?.qcUuidCountRate < 0.8 ? { color: '#cf1322' } : { color: '#3f8600' }}
                                />)
                            </div>}
                        />
                        <Avatar style={{ backgroundColor: '#DCFCE7', color: '#16a34a' }} size={40}><CheckOutlined /></Avatar>
                    </Flex>
                </Card>
                <Card variant="borderless" style={{ width: '20%' }}>
                    <Flex justify='space-between'>
                        <Statistic
                            title={<strong style={{ fontSize: 14 }}>未识别用户数</strong>}
                            value={overflowData?.qcUuidNullCount}
                            style={{ flex: 1 }}
                            suffix={<div style={{ display: 'flex' }}>
                                (<Statistic
                                    value={overflowData.qcUuidNullCountRate ? overflowData.qcUuidNullCountRate * 100 : 0}
                                    precision={4}
                                    suffix="%"
                                    valueStyle={overflowData?.qcUuidNullCountRate > 0.05 ? { color: '#cf1322' } : { color: '#3f8600' }}
                                />)
                            </div>}
                        />
                        <Avatar style={{ backgroundColor: 'rgba(251, 192, 163, 1)', color: '#f50' }} size={40}><ExclamationOutlined /></Avatar>
                    </Flex>
                </Card>
                <Card variant="borderless" style={{ width: '20%' }}>
                    <Flex justify='space-between'>
                        <Statistic
                            title={<strong style={{ fontSize: 14 }}>双删用户数</strong>}
                            value={overflowData?.deletedUserCount}
                            style={{ flex: 1 }}
                            suffix={<div style={{ display: 'flex' }}>
                                (<Statistic
                                    value={overflowData.deletedUserCountRate ? overflowData.deletedUserCountRate * 100 : 0}
                                    precision={4}
                                    suffix="%"
                                    valueStyle={overflowData?.deletedUserCountRate > 0.4 ? { color: '#cf1322' } : { color: '#3f8600' }}
                                />)
                            </div>}
                        />
                        <Avatar style={{ backgroundColor: '#ffcece', color: '#ff0606' }} size={40}><DeleteOutlined /></Avatar>
                    </Flex>
                </Card>
                <Card variant="borderless" style={{ width: '20%' }}>
                    <Flex justify='space-between'>
                        <Statistic
                            title={<Space>
                                <strong style={{ fontSize: 14 }}>集团重粉率</strong>
                                <Tooltip title="所有主体的重复粉丝去重数量/集团粉丝数">
                                    <QuestionCircleOutlined />
                                </Tooltip>
                            </Space>}
                            style={{ flex: 1 }}
                            value={overflowData.repeatUserRate ? overflowData.repeatUserRate * 100 : 0}
                            precision={4}
                            suffix="%"
                        />
                        <Avatar style={{ backgroundColor: '#F3E8FF', color: '#9333ea' }} size={40}><GlobalOutlined /></Avatar>
                    </Flex>
                </Card>
            </Flex>
        </Spin>


        <Flex justify='space-between' style={{ margin: '20px 0 10px' }}>
            <Title level={3} style={{ margin: 0 }}><RetweetOutlined style={{ color: '#1890ff' }} /> 单主体内重粉分布</Title>
            <Input.Search
                placeholder="请输入企业名称"
                onSearch={(e) => { setQueryParmas({ ...queryParmas, corpName: e, pageNum: 1 }); }}
                style={{ width: 200 }}
                allowClear
            />
        </Flex>
        <Row gutter={16}>
            <Col span={12}>
                <Spin spinning={getExternalUserRepeatByCorpAtlas.loading}>
                    <Card style={{ height: '100%' }}>
                        <Bar data={userData} title="粉丝前20单主体总用户数, 主体内重粉数" />
                    </Card>
                </Spin>
            </Col>
            <Col span={12}>
                <Card style={{ height: '100%' }}>
                    <Table
                        columns={ExternalUserColumns()}
                        scroll={{ y: 300, x: 900 }}
                        bordered
                        dataSource={getExternalUserRepeatByCorpList.data?.data?.records}
                        loading={getExternalUserRepeatByCorpList.loading}
                        rowKey="corpId"
                        pagination={{
                            total: getExternalUserRepeatByCorpList.data?.data?.total,
                            current: getExternalUserRepeatByCorpList?.data?.data?.current || 1,
                            pageSize: getExternalUserRepeatByCorpList?.data?.data?.size || 10
                        }}
                        onChange={(pagination: any, _: any, sortData: any) => {
                            let { current, pageSize } = pagination
                            let newQueryForm = JSON.parse(JSON.stringify(queryParmas))
                            if (sortData && sortData?.order) {
                                newQueryForm['sortType'] = sortData?.order === 'ascend' ? 'ASC' : 'DESC'
                                newQueryForm['orderByField'] = sortData?.field
                            } else {
                                delete newQueryForm['sortType']
                                delete newQueryForm['orderByField']
                            }
                            newQueryForm.pageNum = current || newQueryForm.pageNum
                            newQueryForm.pageSize = pageSize || newQueryForm.pageSize
                            setQueryParmas({ ...newQueryForm })
                        }}
                    />
                </Card>
            </Col>
        </Row>


        <Spin spinning={getExternalUserRepeatCorp.loading || getExternalUserRepeatCorpUser.loading || getCorpExternalUserRepeatList.loading}>
            <Title level={3}><BarChartOutlined style={{ color: '#22c55e' }} /> 用户在集团内重粉分布</Title>
            <Tabs
                tabBarExtraContent={activeKey === '1' && <Input.Search
                    placeholder="请输入企业名称"
                    onSearch={(e) => { setQueryParmasZt({ ...queryParmasZt, corpName: e, pageNum: 1 }); }}
                    style={{ width: 200 }}
                    allowClear
                />}
                items={[
                    {
                        key: '1',
                        label: '主体内用户分布',
                        children: <Card>
                            <Table
                                columns={CorpExternalUserColumns()}
                                scroll={{ y: 300, x: 1000 }}
                                bordered
                                dataSource={getCorpExternalUserRepeatList.data?.data?.records}
                                loading={getCorpExternalUserRepeatList.loading}
                                rowKey="corpId"
                                pagination={{
                                    total: getCorpExternalUserRepeatList.data?.data?.total,
                                    current: getCorpExternalUserRepeatList?.data?.data?.current || 1,
                                    pageSize: getCorpExternalUserRepeatList?.data?.data?.size || 20,
                                }}
                                onChange={(pagination: any, _: any, sortData: any) => {
                                    let { current, pageSize } = pagination
                                    let newQueryForm = JSON.parse(JSON.stringify(queryParmasZt))
                                    if (sortData && sortData?.order) {
                                        newQueryForm['sortType'] = sortData?.order === 'ascend' ? 'ASC' : 'DESC'
                                        newQueryForm['orderByField'] = sortData?.field
                                    } else {
                                        delete newQueryForm['sortType']
                                        delete newQueryForm['orderByField']
                                    }
                                    newQueryForm.pageNum = current || newQueryForm.pageNum
                                    newQueryForm.pageSize = pageSize || newQueryForm.pageSize
                                    setQueryParmasZt({ ...newQueryForm })
                                }}
                            />
                        </Card>
                    },
                    {
                        key: '2',
                        label: '用户添加主体分布',
                        children: <Row gutter={16}>
                            <Col span={12}>
                                <Card style={{ height: '100%' }}>
                                    <Bar data={barCorpData} title="用户添加主体分布" horizontal />
                                </Card>
                            </Col>
                            <Col span={12}>
                                <Card style={{ height: '100%' }}>
                                    <Title level={3} style={{ marginTop: 0, textAlign: 'center', fontSize: 18, color: '#313131' }}>用户添加主体分布重粉详细数据</Title>
                                    <Flex vertical gap={7}>
                                        <div className={style.item}>
                                            <Space>
                                                <span>粉丝总数</span>
                                                <Tooltip title="未识别+添加1个+添加多个(>1)">
                                                    <QuestionCircleOutlined />
                                                </Tooltip>
                                            </Space>
                                            <div className={style.num}>
                                                <Statistic value={corpRepeat?.userCount || 0} valueStyle={{ fontSize: 14 }} />
                                            </div>
                                        </div>
                                        <div className={style.item}>
                                            <Space>
                                                <span>集团跨主体去重企微用户数</span>
                                                <Tooltip title="集团跨主体去重企微用户数=未识别人数+添加1个客服人数+添加多个(>1)客服人数">
                                                    <QuestionCircleOutlined />
                                                </Tooltip>
                                            </Space>
                                            <div className={style.num}>
                                                <Statistic value={corpRepeat?.qcUuidUserCount || 0} valueStyle={{ fontSize: 14 }} />
                                            </div>
                                        </div>
                                        <div className={style.item}>
                                            <span>未识别用户数</span>
                                            <div className={style.num}>
                                                <Statistic value={corpRepeat?.qcUuidNullCount || 0} valueStyle={{ fontSize: 14 }} />
                                                （<Statistic
                                                    value={corpRepeat?.qcUuidNullCountRate ? corpRepeat?.qcUuidNullCountRate * 100 : 0}
                                                    valueStyle={corpRepeat?.qcUuidNullCountRate > 0.1 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
                                                    suffix="%"
                                                    precision={4}
                                                />）
                                            </div>
                                        </div>
                                        <div className={style.item}>
                                            <span>{`用户添加>1主体人数`}</span>
                                            <div className={style.num}>
                                                <Statistic value={corpRepeat?.gtOneRepeatCountTotal || 0} valueStyle={{ fontSize: 14 }} />
                                                （<Statistic
                                                    value={corpRepeat?.gtOneRepeatCountTotalRate ? corpRepeat?.gtOneRepeatCountTotalRate * 100 : 0}
                                                    valueStyle={corpRepeat?.gtOneRepeatCountTotalRate > 0.2 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
                                                    suffix="%"
                                                    precision={4}
                                                />）
                                            </div>
                                        </div>
                                        <div className={style.item}>
                                            <span>仅添加1个主体人数</span>
                                            <div className={style.num}>
                                                <Statistic value={corpRepeat?.oneRepeatCount || 0} valueStyle={{ fontSize: 14 }} />
                                                （<Statistic
                                                    value={corpRepeat?.oneRepeatCountRate ? corpRepeat?.oneRepeatCountRate * 100 : 0}
                                                    valueStyle={corpRepeat?.oneRepeatCountRate > 0.5 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
                                                    suffix="%"
                                                    precision={4}
                                                />）
                                            </div>
                                        </div>
                                        <div className={style.item}>
                                            <span>添加2个主体人数</span>
                                            <div className={style.num}>
                                                <Statistic value={corpRepeat?.twoRepeatCount || 0} valueStyle={{ fontSize: 14 }} />
                                                （<Statistic
                                                    value={corpRepeat?.twoRepeatCountRate ? corpRepeat?.twoRepeatCountRate * 100 : 0}
                                                    valueStyle={corpRepeat?.twoRepeatCountRate > 0.1 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
                                                    suffix="%"
                                                    precision={4}
                                                />）
                                            </div>
                                        </div>
                                        <div className={style.item}>
                                            <span>添加3个主体人数</span>
                                            <div className={style.num}>
                                                <Statistic value={corpRepeat?.threeRepeatCount || 0} valueStyle={{ fontSize: 14 }} />
                                                （<Statistic
                                                    value={corpRepeat?.threeRepeatCountRate ? corpRepeat?.threeRepeatCountRate * 100 : 0}
                                                    valueStyle={corpRepeat?.threeRepeatCountRate > 0.09 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
                                                    suffix="%"
                                                    precision={4}
                                                />）
                                            </div>
                                        </div>
                                        <div className={style.item}>
                                            <span>添加4个主体人数</span>
                                            <div className={style.num}>
                                                <Statistic value={corpRepeat?.fourRepeatCount || 0} valueStyle={{ fontSize: 14 }} />
                                                （<Statistic
                                                    value={corpRepeat?.fourRepeatCountRate ? corpRepeat?.fourRepeatCountRate * 100 : 0}
                                                    valueStyle={corpRepeat?.fourRepeatCountRate > 0.08 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
                                                    suffix="%"
                                                    precision={4}
                                                />）
                                            </div>
                                        </div>
                                        <div className={style.item}>
                                            <span>添加5个主体人数</span>
                                            <div className={style.num}>
                                                <Statistic value={corpRepeat?.fiveRepeatCount || 0} valueStyle={{ fontSize: 14 }} />
                                                （<Statistic
                                                    value={corpRepeat?.fiveRepeatCountRate ? corpRepeat?.fiveRepeatCountRate * 100 : 0}
                                                    valueStyle={corpRepeat?.fiveRepeatCountRate > 0.07 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
                                                    suffix="%"
                                                    precision={4}
                                                />）
                                            </div>
                                        </div>
                                        <div className={style.item}>
                                            <span>添加5个主体以上人数</span>
                                            <div className={style.num}>
                                                <Statistic value={corpRepeat?.gtFiveRepeatCount || 0} valueStyle={{ fontSize: 14 }} />
                                                （<Statistic
                                                    value={corpRepeat?.gtFiveRepeatCountRate ? corpRepeat?.gtFiveRepeatCountRate * 100 : 0}
                                                    valueStyle={corpRepeat?.gtFiveRepeatCountRate > 0.06 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
                                                    suffix="%"
                                                    precision={4}
                                                />）
                                            </div>
                                        </div>
                                    </Flex>
                                </Card>
                            </Col>
                        </Row>
                    },
                    {
                        key: '3',
                        label: '用户添加客服号分布',
                        children: <Row gutter={16}>
                            <Col span={12}>
                                <Card style={{ height: '100%' }}>
                                    <Bar data={barCorpUserData} title="用户添加客服号分布" horizontal />
                                </Card>
                            </Col>
                            <Col span={12}>
                                <DetailsTemplate data={corpUserRepeat} title='用户添加客服号详细数据' />
                            </Col>
                        </Row>
                    },
                ]}
                onChange={(e) => { setActiveKey(e) }}
                activeKey={activeKey}
            />
        </Spin>
    </div>
};

const DetailsTemplate: React.FC<{ data: { [x: string]: any }, title: string }> = ({ data, title }) => {


    return <Card style={{ height: '100%' }}>
        <Title level={3} style={{ marginTop: 0, textAlign: 'center', fontSize: 18, color: '#313131' }}>{title || '详细数据'}</Title>
        <Flex vertical gap={7}>
            <div className={style.item}>
                <Space>
                    <span>粉丝总数</span>
                    <Tooltip title="未识别+添加1名+添加多名(>1)">
                        <QuestionCircleOutlined />
                    </Tooltip>
                </Space>
                <div className={style.num}>
                    <Statistic value={data?.userCount || 0} valueStyle={{ fontSize: 14 }} />
                </div>
            </div>
            <div className={style.item}>
                <Space>
                    <span>集团跨主体去重企微用户数</span>
                    <Tooltip title="集团跨主体去重企微用户数=未识别人数+添加1个客服人数+添加多个(>1)客服人数">
                        <QuestionCircleOutlined />
                    </Tooltip>
                </Space>
                <div className={style.num}>
                    <Statistic value={data?.qcUuidUserCount || 0} valueStyle={{ fontSize: 14 }} />
                </div>
            </div>
            <div className={style.item}>
                <span>未识别用户数</span>
                <div className={style.num}>
                    <Statistic value={data?.qcUuidNullCount || 0} valueStyle={{ fontSize: 14 }} />
                    （<Statistic
                        value={data?.qcUuidNullCountRate ? data?.qcUuidNullCountRate * 100 : 0}
                        valueStyle={data?.qcUuidNullCountRate > 0.1 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
                        suffix="%"
                        precision={4}
                    />）
                </div>
            </div>
            <div className={style.item}>
                <span>已激活集团客服号数</span>
                <div className={style.num}>
                    <Statistic value={data?.activatedCorpUserCount || 0} valueStyle={{ fontSize: 14 }} />
                    （<Statistic
                        value={data?.activatedCorpUserCountRate ? data?.activatedCorpUserCountRate * 100 : 0}
                        valueStyle={data?.activatedCorpUserCountRate < 0.6 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
                        suffix="%"
                        precision={4}
                    />）
                </div>
            </div>
            <div className={style.item}>
                <span>已禁用集团客服号数</span>
                <div className={style.num}>
                    <Statistic value={data?.disabledCorpUserCount || 0} valueStyle={{ fontSize: 14 }} />
                    （<Statistic
                        value={data?.disabledCorpUserCountRate ? data?.disabledCorpUserCountRate * 100 : 0}
                        valueStyle={data?.disabledCorpUserCountRate > 0.1 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
                        suffix="%"
                        precision={4}
                    />）
                </div>
            </div>
            <div className={style.item}>
                <span>退出集团客服号数</span>
                <div className={style.num}>
                    <Statistic value={data?.quitCorpUserCount || 0} valueStyle={{ fontSize: 14 }} />
                    （<Statistic
                        value={data?.quitCorpUserCountRate ? data?.quitCorpUserCountRate * 100 : 0}
                        valueStyle={data?.quitCorpUserCountRate > 0.1 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
                        suffix="%"
                        precision={4}
                    />）
                </div>
            </div>
            <div className={style.item}>
                <span>未激活集团客服号数</span>
                <div className={style.num}>
                    <Statistic value={data?.unactivatedCorpUserCount || 0} valueStyle={{ fontSize: 14 }} />
                    （<Statistic
                        value={data?.unactivatedCorpUserCountRate ? data?.unactivatedCorpUserCountRate * 100 : 0}
                        valueStyle={data?.unactivatedCorpUserCountRate > 0.1 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
                        suffix="%"
                        precision={4}
                    />）
                </div>
            </div>
            <div className={style.item}>
                <span>{`用户添加>1客服号人数`}</span>
                <div className={style.num}>
                    <Statistic value={data?.gtOneRepeatCountTotal || 0} valueStyle={{ fontSize: 14 }} />
                    （<Statistic
                        value={data?.gtOneRepeatCountTotalRate ? data?.gtOneRepeatCountTotalRate * 100 : 0}
                        valueStyle={data?.gtOneRepeatCountTotalRate > 0.3 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
                        suffix="%"
                        precision={4}
                    />）
                </div>
            </div>
            <div className={style.item}>
                <span>仅添加1名客服人数</span>
                <div className={style.num}>
                    <Statistic value={data?.oneRepeatCount || 0} valueStyle={{ fontSize: 14 }} />
                    （<Statistic
                        value={data?.oneRepeatCountRate ? data?.oneRepeatCountRate * 100 : 0}
                        valueStyle={data?.oneRepeatCountRate > 0.5 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
                        suffix="%"
                        precision={4}
                    />）
                </div>
            </div>
            <div className={style.item}>
                <span>添加2名客服人数</span>
                <div className={style.num}>
                    <Statistic value={data?.twoRepeatCount || 0} valueStyle={{ fontSize: 14 }} />
                    （<Statistic
                        value={data?.twoRepeatCountRate ? data?.twoRepeatCountRate * 100 : 0}
                        valueStyle={data?.twoRepeatCountRate > 0.1 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
                        suffix="%"
                        precision={4}
                    />）
                </div>
            </div>
            <div className={style.item}>
                <span>添加3名客服人数</span>
                <div className={style.num}>
                    <Statistic value={data?.threeRepeatCount || 0} valueStyle={{ fontSize: 14 }} />
                    （<Statistic
                        value={data?.threeRepeatCountRate ? data?.threeRepeatCountRate * 100 : 0}
                        valueStyle={data?.threeRepeatCountRate > 0.09 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
                        suffix="%"
                        precision={4}
                    />）
                </div>
            </div>
            <div className={style.item}>
                <span>添加4名客服人数</span>
                <div className={style.num}>
                    <Statistic value={data?.fourRepeatCount || 0} valueStyle={{ fontSize: 14 }} />
                    （<Statistic
                        value={data?.fourRepeatCountRate ? data?.fourRepeatCountRate * 100 : 0}
                        valueStyle={data?.fourRepeatCountRate > 0.08 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
                        suffix="%"
                        precision={4}
                    />）
                </div>
            </div>
            <div className={style.item}>
                <span>添加5名客服人数</span>
                <div className={style.num}>
                    <Statistic value={data?.fiveRepeatCount || 0} valueStyle={{ fontSize: 14 }} />
                    （<Statistic
                        value={data?.fiveRepeatCountRate ? data?.fiveRepeatCountRate * 100 : 0}
                        valueStyle={data?.fiveRepeatCountRate > 0.07 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
                        suffix="%"
                        precision={4}
                    />）
                </div>
            </div>
            <div className={style.item}>
                <span>添加5名客服以上人数</span>
                <div className={style.num}>
                    <Statistic value={data?.gtFiveRepeatCount || 0} valueStyle={{ fontSize: 14 }} />
                    （<Statistic
                        value={data?.gtFiveRepeatCountRate ? data?.gtFiveRepeatCountRate * 100 : 0}
                        valueStyle={data?.gtFiveRepeatCountRate > 0.06 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
                        suffix="%"
                        precision={4}
                    />）
                </div>
            </div>
        </Flex>
    </Card>
};

export default Home;