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 [scrollDivWidth, setScrollDivWidth] = useState<number>(2000)
    const [badWidth, setBadWidth] = useState<number>(0)

    const [leftShow, setLeftShow] = useState<boolean>(false)
    const [rightShow, setRightShow] = useState<boolean>(false)
    const [queryForm, setQueryForm] = useState<AllSurveyTotalDataProps>({ sourceSystem: 'ZX_ONE' })
    const [totalData, setTotalData] = useState<any>({})
    /* ==================== */

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

    useEffect(() => {
        if (size?.width) {
            let buguWidth = 0
            if (queryForm?.sourceSystem && (queryForm?.sourceSystem === 'BG_OLD' || queryForm?.sourceSystem === 'BG_NEW')) {
                buguWidth = 200
            }
            let width = 2042
            let b = 6
            if (queryForm?.gameId) {
                b = 5
                width = 1712
            } else {
                b = 6
                width = 2042
            }
            let w = size?.width || 0
            if (w > width) {
                let badW = w - width
                width = w
                setBadWidth(badW / b)
            }
            setScrollDivWidth(width + buguWidth)
        }
    }, [queryForm?.gameId, size, queryForm?.sourceSystem])

    // 处理左右按钮隐藏 显示
    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 >= scrollDivWidth) { // 容器大于内容宽度 兼容
                setLeftShow(false)
                setRightShow(false)
            } else {
                if (left === 0) {
                    setLeftShow(false)
                } else {
                    setLeftShow(true)
                }
                if (width < scrollDivWidth) {
                    setRightShow(true)
                }
                if (width + left === scrollDivWidth) {
                    setRightShow(false)
                }
            }
        } else {
            setLeftShow(false)
            setRightShow(false)
        }
    }, [isHovering, isHovering1, isHovering2, size, scroll, ref, scrollDivWidth])

    // 左右移动
    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])

    const isBg = () => {
        return queryForm?.sourceSystem && (queryForm?.sourceSystem === 'BG_OLD' || queryForm?.sourceSystem === 'BG_NEW')
    }

    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
                        initialValues={{ sourceSystem: 'ZX_ONE' }}
                        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 })
                        }}
                        isSource
                        isAccountId
                        isGameId
                        isSysUserId
                        isAgentId
                    />
                </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: scrollDivWidth }}>
                            <Card bordered={false} style={{ borderRadius: 8 }} bodyStyle={{ width: 320 + badWidth }}>
                                <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><span style={{ color: 'red' }}>今日：</span><Statistic value={totalData?.todayPlayerCount || 0} /></div>
                                        </div>
                                    </div>
                                </div>
                            </Card>
                            <Card bordered={false} style={{ borderRadius: 8 }} bodyStyle={{ width: 320 + badWidth }}>
                                <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><span style={{ color: 'red' }}>今日：</span><Statistic value={totalData?.todayTotalCost || 0} /></div>
                                        </div>
                                    </div>
                                </div>
                            </Card>
                            <Card bordered={false} style={{ borderRadius: 8 }} bodyStyle={{ width: isBg() ? 320 + 200 + badWidth : 320 + 40 + badWidth }}>
                                <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 style={{ width: isBg() ? '30%' : '50%' }}>昨账：<Statistic value={totalData?.yesterdayAmount || 0} /></div>
                                                <div style={{ width: isBg() ? '27%' : '50%' }}>昨新：<Statistic value={totalData?.yesterdayNewPlayerAmount || 0} /></div>
                                                {isBg() && <div style={{ width: '43%' }}>BG自累充：<Statistic value={totalData?.totalAmountForBG || 0} /></div>}
                                            </div>
                                            <div style={{ justifyContent: 'space-between', flex: 1 }}>
                                                <div style={{ width: isBg() ? '30%' : '50%' }}>今账：<Statistic value={totalData?.todayAmount || 0} /></div>
                                                <div style={{ width: isBg() ? '27%' : '50%' }}><span style={{ color: 'red' }}>今新：</span><Statistic value={totalData?.todayNewPlayerAmount || 0} /></div>
                                                {isBg() && <div style={{ width: '43%' }}>BG自今账：<Statistic value={totalData?.todayAmountForBG || 0} /></div>}
                                            </div>
                                            {isBg() && <div style={{ justifyContent: 'space-between' }}>
                                                <div style={{ width: '30%' }}></div>
                                                <div style={{ width: '27%' }}></div>
                                                <div style={{ width: '43%' }}>BG自昨账：<Statistic value={totalData?.yesterdayAmountForBG || 0} /></div>
                                            </div>}
                                        </div>
                                    </div>
                                </div>
                            </Card>
                            <Card bordered={false} style={{ borderRadius: 8 }} bodyStyle={{ width: 320 + badWidth }}>
                                <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><span style={{ color: 'red' }}>今日：</span><Statistic value={totalData?.todayAgentCount || 0} /></div>
                                        </div>
                                    </div>
                                </div>
                            </Card>
                            {!queryForm?.gameId && <Card bordered={false} style={{ borderRadius: 8 }} bodyStyle={{ width: 320 + badWidth }}>
                                <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><span style={{ color: 'red' }}>今日在投：</span><Statistic value={totalData?.todayGameCount || 0} /></div>
                                        </div>
                                    </div>
                                </div>
                            </Card>}
                            <Card bordered={false} style={{ borderRadius: 8 }} bodyStyle={{ width: 400 + badWidth }}>
                                <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?.totalFirstRoi || 0} suffix="%" precision={2} /></div>
                                                <div><span style={{ color: 'red' }}>今日：</span><Statistic value={totalData?.firstRoi || 0} suffix="%" precision={2} /></div>
                                            </div>
                                            {/* <div style={{ justifyContent: 'space-between', flex: 1 }}>
                                                <div>近7天：<Statistic value={totalData?.d7TotalRoi || 0} suffix="%" precision={2} /></div>
                                                <div>近30天：<Statistic value={totalData?.d30TotalRoi || 0} suffix="%" precision={2} /></div>
                                            </div> */}
                                        </div>
                                    </div>
                                </div>
                            </Card>
                        </div>
                    </div>
                </div>
            </Spin>

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

export default AllSurvey