qc-gameDataStatistics/src/pages/gameDataStatistics/allSurvey/index.tsx

import { AccountBookOutlined, AppstoreOutlined, BuildOutlined, LeftOutlined, MoneyCollectOutlined, RightOutlined, TransactionOutlined, UsergroupAddOutlined } from "@ant-design/icons";
import { useHover, useScroll, useSize } from "ahooks";
import { Button, Card, Space, Spin, Statistic } from "antd"
import React, { useEffect, useRef, useState } from "react"
import style from './index.less'
import LineC from "./lineC";
import { AllSurveyTotalDataProps, getAllSurveyTotalDataApi } from "@/services/gameData/allSurvey";
import { useAjax } from "@/Hook/useAjax";
import QueryForm from "@/components/QueryForm";
import moment from "moment";


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

    /* ==================== */
    const ref = useRef(null);
    const ref1 = useRef(null);
    const ref2 = useRef(null);
    const ref3 = useRef(null);
    const isHovering = useHover(ref); // 是否hover
    const isHovering1 = useHover(ref1); // 是否hover
    const isHovering2 = useHover(ref2); // 是否hover
    const size = useSize(ref);  // div大小
    const size3 = useSize(ref3);  // div大小
    const scroll = useScroll(ref);

    const [leftShow, setLeftShow] = useState<boolean>(false)
    const [rightShow, setRightShow] = useState<boolean>(false)
    const [isPass, setIsPass] = useState<boolean>(false)  // 容器是否大于内容宽度
    const [queryForm, setQueryForm] = useState<AllSurveyTotalDataProps>({})
    const [totalData, setTotalData] = useState<any>({})
    /* ==================== */

    const getAllSurveyTotalData = useAjax((params) => getAllSurveyTotalDataApi(params))

    // 处理左右按钮隐藏 显示
    useEffect(() => {
        // console.log('isHovering---->', isHovering, 'size---->', size, 'scroll--->', scroll);
        if (isHovering || isHovering1 || isHovering2) {
            let width = size.width || 0
            let left = scroll.left || 0
            if (width >= 1960) { // 容器大于内容宽度 兼容
                setLeftShow(false)
                setRightShow(false)
                setIsPass(true)
            } else {
                setIsPass(false)
                if (left === 0) {
                    setLeftShow(false)
                } else {
                    setLeftShow(true)
                }
                if (width < 1960) {
                    setRightShow(true)
                }
                if (width + left === 1960) {
                    setRightShow(false)
                }
            }
        } else {
            setLeftShow(false)
            setRightShow(false)
        }
    }, [isHovering, isHovering1, isHovering2, size, scroll])

    // 左右移动
    const aboutHandle = (about: 'left' | 'right') => {
        let left = scroll.left || 0
        if (about === 'left') {
            (ref?.current as any)?.scrollTo(left - 100, 0)
        } else {
            (ref?.current as any)?.scrollTo(left + 100, 0)
        }
    }

    useEffect(() => {
        getAllSurveyTotalData.run(queryForm).then((res) => {
            setTotalData(res)
        })
    }, [queryForm])


    return <div className={style.allSurver}>
        <Space direction="vertical" style={{ width: '100%' }}>
            <div ref={ref3}>
                <Card bordered={false} bodyStyle={{ padding: '12px 24px' }} style={{ borderRadius: 8 }}>
                    <QueryForm
                        onChange={(data: any) => {
                            console.log(data)
                            const { beginDay, ...par } = data
                            let newQueryForm = JSON.parse(JSON.stringify(queryForm))
                            if (beginDay && beginDay?.length === 2) {
                                newQueryForm['beginDate'] = moment(beginDay[0]).format('YYYY-MM-DD')
                                newQueryForm['endDate'] = moment(beginDay[1]).format('YYYY-MM-DD')
                            } else {
                                delete newQueryForm['beginDate']
                                delete newQueryForm['endDate']
                            }
                            setQueryForm({ ...newQueryForm, ...par })
                        }}
                        isAccountId
                        isGameId
                        isSysUserId
                        isAgentId
                        isBeginDay
                    />
                </Card>
            </div>
            <Spin spinning={getAllSurveyTotalData.loading}>
                <div className={style.overviewC}>
                    <div className={style.left}><Button type="primary" ref={ref1} style={{ opacity: leftShow ? 1 : 0 }} onClick={() => aboutHandle('left')} shape="circle" icon={<LeftOutlined />} /></div>
                    <div className={style.right}><Button type="primary" ref={ref2} style={{ opacity: rightShow ? 1 : 0 }} onClick={() => aboutHandle('right')} shape="circle" icon={<RightOutlined />} /></div>
                    <div className={style.overviews} ref={ref}>

                        <div style={{ width: isPass ? '100%' : 1960 }}>

                            <Card bordered={false} style={{ width: 320, borderRadius: 8 }}>
                                <div className={style.overview}>
                                    <div className={style.left}>
                                        <UsergroupAddOutlined style={{ fontSize: 24 }} />
                                        <div>玩家</div>
                                    </div>
                                    <div className={style.right}>
                                        <div className={style.top}>
                                            总计：<Statistic value={totalData?.totalPlayers || 0} valueStyle={{ fontSize: 20, fontWeight: 600 }} />
                                        </div>
                                        <div className={style.bottom}>
                                            <div>昨日：<Statistic value={totalData?.yesterdayPlayerCount || 0} /></div>
                                            <div>今日：<Statistic value={totalData?.todayPlayerCount || 0} /></div>
                                        </div>
                                    </div>
                                </div>
                            </Card>
                            <Card bordered={false} style={{ width: 320, borderRadius: 8 }}>
                                <div className={style.overview}>
                                    <div className={style.left} style={{ backgroundColor: '#36a3f7' }}>
                                        <TransactionOutlined style={{ fontSize: 24 }} />
                                        <div>消耗</div>
                                    </div>
                                    <div className={style.right}>
                                        <div className={style.top} style={{ borderColor: '#36a3f7' }}>
                                            总计：<Statistic value={totalData?.totalCost || 0} valueStyle={{ fontSize: 20, fontWeight: 600 }} />
                                        </div>
                                        <div className={style.bottom}>
                                            <div>昨日：<Statistic value={totalData?.yesterdayTotalCost || 0} /></div>
                                            <div>今日：<Statistic value={totalData?.todayTotalCost || 0} /></div>
                                        </div>
                                    </div>
                                </div>
                            </Card>
                            <Card bordered={false} style={{ width: 320, borderRadius: 8 }}>
                                <div className={style.overview}>
                                    <div className={style.left} style={{ backgroundColor: '#f4516c' }}>
                                        <MoneyCollectOutlined style={{ fontSize: 24 }} />
                                        <div>充值</div>
                                    </div>
                                    <div className={style.right}>
                                        <div className={style.top} style={{ borderColor: '#f4516c' }}>
                                            总计：<Statistic value={totalData?.totalAmount || 0} valueStyle={{ fontSize: 20, fontWeight: 600 }} />
                                        </div>
                                        <div className={style.bottom}>
                                            <div style={{ justifyContent: 'space-between' }}>
                                                <div>昨账：<Statistic value={totalData?.yesterdayAmount || 0} /></div>
                                                <div>昨新：<Statistic value={totalData?.yesterdayNewPlayerAmount || 0} /></div>
                                            </div>
                                            <div style={{ justifyContent: 'space-between', flex: 1 }}>
                                                <div>今账：<Statistic value={totalData?.todayAmount || 0} /></div>
                                                <div>今新：<Statistic value={totalData?.todayNewPlayerAmount || 0} /></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </Card>
                            <Card bordered={false} style={{ width: 320, borderRadius: 8 }}>
                                <div className={style.overview}>
                                    <div className={style.left} style={{ backgroundColor: '#52c41a' }}>
                                        <AppstoreOutlined style={{ fontSize: 24 }} />
                                        <div>渠道</div>
                                    </div>
                                    <div className={style.right}>
                                        <div className={style.top} style={{ borderColor: '#52c41a' }}>
                                            总计：<Statistic value={totalData?.totalAgentCount || 0} valueStyle={{ fontSize: 20, fontWeight: 600 }} />
                                        </div>
                                        <div className={style.bottom}>
                                            <div>昨日：<Statistic value={totalData?.yesterdayAgentCount || 0} /></div>
                                            <div>今日：<Statistic value={totalData?.todayAgentCount || 0} /></div>
                                        </div>
                                    </div>
                                </div>
                            </Card>
                            <Card bordered={false} style={{ width: 320, borderRadius: 8 }}>
                                <div className={style.overview}>
                                    <div className={style.left} style={{ backgroundColor: '#597ef7' }}>
                                        <BuildOutlined style={{ fontSize: 24 }} />
                                        <div>游戏</div>
                                    </div>
                                    <div className={style.right}>
                                        <div className={style.top} style={{ borderColor: '#597ef7' }}>
                                            总计：<Statistic value={totalData?.totalGameCount || 0} valueStyle={{ fontSize: 20, fontWeight: 600 }} />
                                        </div>
                                        <div className={style.bottom}>
                                            <div>昨日：<Statistic value={totalData?.yesterdayGameCount || 0} /></div>
                                            <div>今日：<Statistic value={totalData?.todayGameCount || 0} /></div>
                                        </div>
                                    </div>
                                </div>
                            </Card>
                            <Card bordered={false} style={{ width: 320, borderRadius: 8 }}>
                                <div className={style.overview}>
                                    <div className={style.left} style={{ backgroundColor: '#9254de' }}>
                                        <AccountBookOutlined style={{ fontSize: 24 }} />
                                        <div>回本</div>
                                    </div>
                                    <div className={style.right}>
                                        <div className={style.top} style={{ borderColor: '#9254de' }}>
                                            总回：<Statistic value={totalData?.totalRoi || 0} valueStyle={{ fontSize: 20, fontWeight: 600, color: 'red' }} precision={2} suffix="%" />
                                        </div>
                                        <div className={style.bottom}>
                                            <div style={{ justifyContent: 'space-between' }}>
                                                <div>首日：<Statistic value={totalData?.firstRoi || 0} suffix="%" precision={2} /></div>
                                                <div>7天：<Statistic value={totalData?.d7TotalRoi || 0} suffix="%" precision={2} /></div>
                                            </div>
                                            <div style={{ justifyContent: 'space-between', flex: 1 }}>
                                                <div>30天：<Statistic value={totalData?.d30TotalRoi || 0} suffix="%" precision={2} /></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </Card>
                        </div>
                    </div>
                </div>
            </Spin>

        </Space>
        <LineC height={size3.height || 0} queryForm={queryForm} />
    </div>
}

export default AllSurvey