wjx 1 year ago
parent
commit
f55b149ade

+ 3 - 0
src/components/QueryForm/index.less

@@ -0,0 +1,3 @@
+.queryForm .ant-form-item{
+    margin-right: 8px !important;
+}

+ 21 - 3
src/components/QueryForm/index.tsx

@@ -94,6 +94,7 @@ interface Props {
     isSysUserName?: boolean
     /** 是否开启 投手ID 搜索 */
     isSysUserId?: boolean
+    isSysUserIds?: boolean
     /** 是否开启 玩家账号 搜索 */
     isUserName?: boolean
     /** 是否开启 用户ID 搜索 */
@@ -232,7 +233,7 @@ const QueryForm: React.FC<Props> = (props) => {
     const {
         onChange, initialValues, isSource, isAccount, isAccountId, isCompanyId, isAgentKey, isAgentName, isCpId, isCpName, isCpOrderId, isCpStatus, isCreateDay, isDevice, isGameName, isRechargeGameName, isGameId, isGameIds, isOrderGameId, isGameRoleId,
         isGameRoleName, isFirstRecharge, isSwitch, isMerchantNo, isOrderId, isMerchantOrderNo, isPayStatus, isPayWay, isProductName, isRegAgent, isAgentId, isPutAgent, isRegDay, isOs, isParentId, isProjectId, isProjectName, isPromotionId, isPromotionId1, isPromotionName,
-        isSysUserName, isRechargeDate, isBGGameClassify, isGameUserId, isSysUserId, isUserName, isUserId, isSelectRanking, isGameType, isConsumeDay, rechargeDay, isBeginDay, isType, isAdTTStatus, isUserEnterType, isServerName, isServerId, isServerDay, isAdTXStatus,
+        isSysUserName, isRechargeDate, isBGGameClassify, isGameUserId, isSysUserId, isSysUserIds, isUserName, isUserId, isSelectRanking, isGameType, isConsumeDay, rechargeDay, isBeginDay, isType, isAdTTStatus, isUserEnterType, isServerName, isServerId, isServerDay, isAdTXStatus,
         payTimeDay, placeAnOrderDay, isPayIntervalTime, isActiveTypes, isNickname, isMobile, isRegIp, isIsAuth, isIsBindMobile, isIsRecharge, isUserStatus, isCreateRole, isRoleCount, isVipLevel, isCreateRoleDay, isIsChange, isIsSendMail, isWeChatCompany, isWeChat,
         isCustomerServerId, isOperatorId, isGsId, isServerIds, isRankingNum, isIsMergeServer, isSuperParentGameId, isGameServerName, isIp, isDeviceType, isLoginType, isServerIdUn, isSourceServerName, isProjectId1, isRemoveGame, isRemoveGameForSystem, isOrderLy, isAddCorpWechat,
         isWakeUp
@@ -352,7 +353,7 @@ const QueryForm: React.FC<Props> = (props) => {
 
     /** 投手列表 */
     useEffect(() => {
-        if (isSysUserId) {
+        if (isSysUserId || isSysUserIds) {
             if (['BG_OLD', 'BG_NEW', 'ZX_SDK'].includes(sourceSystem)) {
                 getPitcherListNew.run({ sourceSystem }).then(res => {
                     setUserIdList(res?.map((item: { pitcherId: any; pitcherName: any }) => ({ userId: item.pitcherId, nickname: item.pitcherName })))
@@ -363,7 +364,7 @@ const QueryForm: React.FC<Props> = (props) => {
                 })
             }
         }
-    }, [isSysUserId, sourceSystem])
+    }, [isSysUserId, isSysUserIds, sourceSystem])
 
     /** 推广渠道 */
     useEffect(() => {
@@ -759,6 +760,7 @@ const QueryForm: React.FC<Props> = (props) => {
                     showSearch
                     style={{ minWidth: 140 }}
                     allowClear
+                    loading={getGameListNew.loading || getGameChoiceList.loading}
                     placeholder={'请选择游戏'}
                     filterOption={(input, option) =>
                         (option?.children as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
@@ -1097,6 +1099,22 @@ const QueryForm: React.FC<Props> = (props) => {
                     {userIdList.map((item: any) => <Select.Option value={item.userId} key={item.userId}>{item.nickname}</Select.Option>)}
                 </Select>
             </Form.Item></Col>}
+            {isSysUserIds && <Col><Form.Item name='pitcherId'>
+                <Select
+                    maxTagCount={1}
+                    showSearch
+                    style={{ minWidth: 120 }}
+                    allowClear
+                    mode="multiple"
+                    loading={getSubUserWithSelfList.loading || getPitcherListNew.loading}
+                    placeholder={'请选择投手'}
+                    filterOption={(input, option) =>
+                        (option?.children as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                    }
+                >
+                    {userIdList.map((item: any) => <Select.Option value={item.userId} key={item.userId}>{item.nickname}</Select.Option>)}
+                </Select>
+            </Form.Item></Col>}
             {/* 客服ID */}
             {isCustomerServerId && <Col><Form.Item name='customerServerId'>
                 <Select

+ 43 - 0
src/pages/gameDataStatistics/components/Settings/index.tsx

@@ -0,0 +1,43 @@
+import { FullscreenExitOutlined, FullscreenOutlined, RedoOutlined, SearchOutlined, SettingOutlined } from "@ant-design/icons";
+import { Button, Col, Row, Space, Tooltip } from "antd";
+import React, { useContext } from "react";
+import { DispatchHeader } from "../TablePro";
+
+/**
+ * 头部
+ * @returns 
+ */
+const Settings: React.FC = () => {
+
+    /******************************/
+    const { isFullscreen, setIsFullscreen, isFull, toggleFull, setVisible, czChild, leftChild, ajax } = useContext(DispatchHeader)!;
+    const colData = czChild ? { span: 24 } : { flex: '1 1 150px' }
+    /******************************/
+
+    return <Col span={24}>
+        <Row gutter={[0, 10]} align='bottom'>
+            <Col {...colData}>
+                {isFullscreen && leftChild}
+            </Col>
+            {czChild && <Col flex='1 1 150px'>{czChild}</Col>}
+            <Col flex='0 1 150px'>
+                <Space style={{ float: 'right', marginBottom: 4 }}>
+                    <Button size='small' type='text' style={{ color: '#F56C6C' }} onClick={() => { setIsFullscreen(!isFullscreen) }}>
+                        <Tooltip title={isFullscreen ? '隐藏搜索' : '显示搜索'}><SearchOutlined /></Tooltip>
+                    </Button>
+                    {ajax && <Button size='small' type='text' style={{ color: '#67C23A' }} onClick={() => { ajax.refresh() }}>
+                        <Tooltip title='刷新'><RedoOutlined /></Tooltip>
+                    </Button>}
+                    <Button size='small' type='text' style={{ color: '#E6A23C' }} onClick={() => { setVisible(true) }}>
+                        <Tooltip title='设置'><SettingOutlined /></Tooltip>
+                    </Button>
+                    <Button type='text' size='small' style={{ color: '#409EFF' }} onClick={toggleFull}>
+                        {<Tooltip title={!isFull ? '全屏' : '退出全屏'}>{!isFull ? <FullscreenOutlined /> : <FullscreenExitOutlined />}</Tooltip>}
+                    </Button>
+                </Space>
+            </Col>
+        </Row>
+    </Col>
+}
+
+export default React.memo(Settings)

+ 158 - 0
src/pages/gameDataStatistics/components/TablePro/color.less

@@ -0,0 +1,158 @@
+.color0,
+.color0 > td {
+  background-color: #e1f5fe;
+  color: #000;
+}
+.color0,.color1,.color2,.color3,.color4,.color5,.color6,.color7,.color8,.color9,.color10,.color11,.color12,.color13,.color14,.color15,.color16,.color17,.color18,.color19,.color20,
+.color21,.color22,.color23,.color24,.color25,.color26,.color27,.color28,.color29,.color30 {
+  &:hover{
+    >td {
+      color: #fff;
+    }
+  }
+}
+.color1,
+.color1 > td {
+  background-color: #e8eaf6;
+  color: #000;
+}
+.color2,
+.color2 > td {
+  background-color: #f3e5f5;
+  color: #000;
+}
+.color3,
+.color3 > td {
+  background-color: #fff3e0;
+  color: #000;
+}
+.color4,
+.color4 > td {
+  background-color: #fce4ec;
+  color: #000;
+}
+.color5,
+.color5 > td {
+  background-color: #ffebee;
+  color: #000;
+}
+.color6,
+.color6 > td {
+  background-color: #fffde7;
+  color: #000;
+}
+.color7,
+.color7 > td {
+  background-color: #efebe9;
+  color: #000;
+}
+.color8,
+.color8 > td {
+  background-color: #f0f4c3;
+  color: #000;
+}
+.color9,
+.color9 > td {
+  background-color: #e8f5e9;
+  color: #000;
+}
+.color10,
+.color10 > td {
+  background-color: #e0f2f1;
+  color: #000;
+}
+.color11,
+.color11 > td {
+  background-color: #cfd8dc;
+  color: #000;
+}
+.color12,
+.color12 > td {
+  background-color: #d7ccc8;
+  color: #000;
+}
+.color13,
+.color13 > td {
+  background-color: #ffccbc;
+  color: #000;
+}
+.color14,
+.color14 > td {
+  background-color: #ffecb3;
+  color: #000;
+}
+.color15,
+.color15 > td {
+  background-color: #f0f4c3;
+  color: #000;
+}
+.color16,
+.color16 > td {
+  background-color: #dcedc8;
+  color: #000;
+}
+.color17,
+.color17 > td {
+  background-color: #c8e6c9;
+  color: #000;
+}
+.color18,
+.color18 > td {
+  background-color: #b2dfdb;
+  color: #000;
+}
+.color19,
+.color19 > td {
+  background-color: #b2ebf2;
+  color: #000;
+}
+.color21,
+.color21 > td {
+  background-color: #b3e5fc;
+  color: #000;
+}
+.color22,
+.color22 > td {
+  background-color: #bbdefb;
+  color: #000;
+}
+.color23,
+.color23 > td {
+  background-color: #c5cae9;
+  color: #000;
+}
+.color24,
+.color24 > td {
+  background-color: #d1c4e9;
+  color: #000;
+}
+.color25,
+.color25 > td {
+  background-color: #e1bee7;
+  color: #000;
+}
+.color26,
+.color26 > td {
+  background-color: #f8bbd0;
+  color: #000;
+}
+.color27,
+.color27 > td {
+  background-color: #ffcdd2;
+  color: #000;
+}
+.color28,
+.color28 > td {
+  background-color: #a5d6a7;
+  color: #000;
+}
+.color29,
+.color29 > td {
+  background-color: #ffcc80;
+  color: #000;
+}
+.color20,
+.color20 > td {
+  background-color: #80deea;
+  color: #000;
+}

+ 84 - 0
src/pages/gameDataStatistics/components/TablePro/index.less

@@ -0,0 +1,84 @@
+@import './color.less';
+
+.title {
+    text-align: center;
+    font-weight: bold;
+    padding: 4px 6px 6px;
+    font-size: 16px;
+    margin-bottom: 4px;
+    position: relative;
+}
+
+.cell {
+    text-align: center;
+    background-color: #fafafa;
+    color: rgb(212, 46, 46);
+}
+
+.middle {
+
+    tr,
+    td {
+        font-size: 14px !important;
+    }
+}
+
+.small {
+
+    tr,
+    td {
+        font-size: 13px !important;
+    }
+}
+
+.ranking {
+
+    tr,
+    td {
+        font-size: 14px !important;
+
+        span {
+            font-size: 14px;
+        }
+    }
+
+}
+
+.large {
+
+    tr,
+    td {
+        font-size: 14px !important;
+    }
+}
+
+.item_img {
+    width: 25px;
+    border-radius: 2px;
+    margin-right: 5px;
+    background-color: #efefef;
+}
+
+.blue {
+    background-color: cornflowerblue;
+}
+
+.cardtitle {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .text {
+        width: 100%;
+        height: 100%;
+        text-align: center;
+    }
+
+    .cardTab {
+        position: absolute;
+        width: 400px;
+        height: 100%;
+        top: 0;
+        left: 0;
+    }
+}

+ 68 - 8
src/pages/gameDataStatistics/components/TablePro/index.tsx

@@ -1,10 +1,15 @@
-import { useLocalStorageState, useMount, useSetState } from "ahooks";
-import React, { useState } from "react"
+import { QuestionCircleOutlined } from "@ant-design/icons";
+import { useFullscreen, useLocalStorageState, useMount, useSetState } from "ahooks";
+import { Card, Col, Row, Space, Tooltip } from "antd";
+import React, { useRef, useState } from "react"
+import style from './index.less'
+import Settings from "../Settings";
 
 const log = (text?: any, key?: string) => {
     console.log(`pro_${key || ''}----->`, text)
 }
-export const DispatchContext = React.createContext<{} | null>(null);
+export const DispatchContext = React.createContext<PROAPI.TableContentProps | null>(null);
+export const DispatchHeader = React.createContext<PROAPI.HeaderContentProps | null>(null);
 export const version = '1.0.0'
 /**
  * 升级版表格
@@ -13,17 +18,31 @@ export const version = '1.0.0'
 const TablePro: React.FC<PROAPI.TableProProps> = ({
     configName,
     config,
-    fixed = { left: 0, right: 1 }
+    fixed = { left: 0, right: 0 },
+    title,
+    tips,
+    ajax,
+    czChild,
+    leftChild,
+    size = 'small',
+    className,
+    total
 }) => {
 
     /*********************************************/
     const [lsDataSource, setLsDataSource] = useLocalStorageState(`myAdMonitorConfig${version}_` + configName);
-    const [lsFixed, setLsFixed] = useLocalStorageState(`myAdMonitorConfigFixed${version}_` + configName);
+    const [lsFixed, setLsFixed] = useLocalStorageState<{ left: 0, right: 0 }>(`myAdMonitorConfigFixed${version}_` + configName);
     const [state, setState] = useSetState<PROAPI.State>({
+        // 所有配置用key转Object
         configObj: {},
         columns: [],
+        // 默认配置
         defaultColumns: []
     });
+    const ref = useRef(null)
+    const [isFull, { toggleFull }] = useFullscreen(ref);
+    const [isFullscreen, setIsFullscreen] = useState<boolean>(true);
+    const [visible, setVisible] = useState<boolean>(false)
     // const { configObj, columns, defaultColumns } = state
     /*********************************************/
 
@@ -58,15 +77,56 @@ const TablePro: React.FC<PROAPI.TableProProps> = ({
     const handleColumns = (defaultColumns: any[], configObj: { [key: string]: string; }) => {
         log(defaultColumns, 'defaultColumns')
         log(configObj, 'configObj')
+        // 使用默认配置
+        let newColumns = defaultColumns
+        let newFixed = fixed
+        log(lsFixed, 'lsFixed')
+        if (lsFixed) {
+            newFixed = lsFixed
+        }
         if (lsDataSource) { // 找到了设置的配置
 
-        } else { // 使用默认配置
-
         }
+        newColumns = newColumns.map(item => ({ ...item, key: item.dataIndex }))
+        if (newFixed.left && newFixed.right) {
+            for (let i = 0; i < Math.min(newFixed.left, newColumns.length); i++) {
+                newColumns[i] = { ...newColumns[i], fixed: 'left' };
+            }
+            const arrayLength = newColumns.length;
+            for (let i = Math.max(0, arrayLength - newFixed.right); i < arrayLength; i++) {
+                newColumns[i] = { ...newColumns[i], fixed: 'right' };
+            }
+        }
+        log(newColumns, 'newColumns')
+        setState({ columns: newColumns })
     }
 
 
-    return <DispatchContext.Provider value={{}}></DispatchContext.Provider>
+    return <Row gutter={[0, 20]} ref={ref} style={isFull ? { background: '#fff' } : {}}>
+        <Col span={24}>
+            <Card
+                style={{ borderRadius: 8 }}
+                headStyle={{ textAlign: 'left' }}
+                bodyStyle={{ padding: '5px 10px' }}
+            >
+                {title && <div className={style.title}>
+                    <Space><span>{title}</span>{tips && <Tooltip title={tips}><span><QuestionCircleOutlined /></span></Tooltip>}</Space>
+                </div>}
+                <Row gutter={[0, 16]}>
+                    <DispatchHeader.Provider value={{ setIsFullscreen, isFullscreen, isFull, toggleFull, setVisible, ajax, czChild, leftChild }}>
+                        <Settings />
+                    </DispatchHeader.Provider>
+                    <DispatchContext.Provider value={{total}}>
+                        <Col span={24}>
+                            <div className={`${style[size]} ${className ? style[className] : ''} `}>
+                                
+                            </div>
+                        </Col>
+                    </DispatchContext.Provider>
+                </Row>
+            </Card>
+        </Col>
+    </Row>
 }
 
 export default React.memo(TablePro)

+ 36 - 0
src/pages/gameDataStatistics/components/TablePro/newTable.tsx

@@ -0,0 +1,36 @@
+import { Table, TableProps, Tag } from "antd"
+import React, { useContext } from "react"
+import { DispatchContext } from ".";
+
+const NewTable: React.FC<TableProps<any>> = (props) => {
+
+    /************************************/
+    const { total, page: current, pageSize, pageChange } = useContext(DispatchContext)!;
+    let ww = document.body.clientWidth < 415
+    /************************************/
+
+    return <Table
+        rowKey={(a: any) => {
+            return (JSON.stringify(a?.id) || JSON.stringify(a?.key))
+        }}
+        {...props}
+        pagination={
+            {
+                total,//总共多少条数据,服务器给,设置后分页自动计算页数
+                current,//当前页数,需state控制配合翻页
+                pageSize,
+                defaultCurrent: 1,//默认初始的当前页数
+                defaultPageSize: 20,//默认初始的每页条数
+                pageSizeOptions: ['10', '20', '30', '40', '50', '60', '70', '80', '90', '100'],
+                showTotal: (total) => <Tag color="cyan">总共{total}数据</Tag>,
+                showSizeChanger: true, //手动开启条数筛选器,默认超过50条开启
+                onChange: pageChange, //点击页码或条数筛选时触发获取当前页数和每页条数
+                simple: ww ? true : false,//开启简单分页
+                hideOnSinglePage: true,//只有一页数据隐藏分页
+                showLessItems: true
+            }
+        }
+    />
+}
+
+export default React.memo(NewTable)

+ 24 - 0
src/pages/gameDataStatistics/components/TablePro/typings.d.ts

@@ -6,10 +6,34 @@ declare namespace PROAPI {
             left: number,
             right: number
         };
+        title?: string;
+        tips?: JSX.Element; // 提示
+        czChild?: JSX.Element;
+        leftChild?: JSX.Element;
+        ajax?: any;//接口刷新
+        size?: 'small' | 'middle' | 'large',
+        className?: string,//自定义class
+        total?: number;
     };
     type State = {
         columns: any[];
         configObj: { [key: string]: string; };
         defaultColumns: any[];
+    };
+    type HeaderContentProps = {
+        isFullscreen: boolean;
+        setIsFullscreen: React.Dispatch<React.SetStateAction<boolean>>;
+        isFull: boolean;
+        toggleFull: () => void;
+        setVisible: React.Dispatch<React.SetStateAction<boolean>>;
+        czChild?: JSX.Element;
+        leftChild?: JSX.Element;
+        ajax?: any; //接口刷新
+    };
+    type TableContentProps = {
+        total?: number;
+        page?: number;
+        pageSize?: number;
+        pageChange?: (page: number, pageSize?: number) => void,
     }
 }

+ 1 - 2
src/pages/gameDataStatistics/gameData/everyday/index.tsx

@@ -73,8 +73,7 @@ const Everyday: React.FC = () => {
                 isUserEnterType
                 isSource
                 isRegDay={{ ranges: getPresets() }}
-                isGameId
-                isBGGameClassify
+                isGameIds
             />}
             isZj
             totalData={totalData}

+ 1 - 1
src/pages/gameDataStatistics/gameData/everyday/tableConfig.tsx

@@ -367,7 +367,7 @@ function columnsNature12(rechargeTrendHandle: (data: any) => void): { label: str
                         if (b?.costDate === '总计') {
                             return '--'
                         }
-                        return <a onClick={() => rechargeTrendHandle(b)}>复充趋势</a>
+                        return b?.gameId ? <a onClick={() => rechargeTrendHandle(b)}>复充趋势</a> : '--'
                     },
                 }
             ]

+ 71 - 0
src/pages/gameDataStatistics/order/index.tsx

@@ -137,8 +137,79 @@ const Order: React.FC = () => {
         />
 
         {/* <TablePro
+            leftChild={<QueryForm
+                initialValues={{ sourceSystem: 'ZX_ONE' }}
+                onChange={(data: any) => {
+                    const { os, regStartDay, orderStatus, gameUserId, regEndDay, payTime, placeAnOrderTime, agentId, regPayIntervalTime, ...params } = data
+                    let newQueryForm = JSON.parse(JSON.stringify(queryForm))
+                    newQueryForm.pageNum = 1
+                    newQueryForm.deviceSystem = os
+                    newQueryForm.status = orderStatus
+                    newQueryForm.userId = gameUserId
+                    newQueryForm.channelId = agentId
+                    if (regStartDay && regEndDay) {
+                        newQueryForm.regTimeStart = regStartDay
+                        newQueryForm.regTimeEnd = regEndDay
+                    } else {
+                        delete newQueryForm.regTimeStart
+                        delete newQueryForm.regTimeEnd
+                    }
+                    if (payTime && payTime?.length > 0) {
+                        newQueryForm.payTimeStart = moment(payTime[0]).format('YYYY-MM-DD')
+                        newQueryForm.payTimeEnd = moment(payTime[1]).format('YYYY-MM-DD')
+                    } else {
+                        delete newQueryForm.payTimeStart
+                        delete newQueryForm.payTimeEnd
+                    }
+
+                    if (placeAnOrderTime && placeAnOrderTime?.length > 0) {
+                        newQueryForm.beginDate = moment(placeAnOrderTime[0]).format('YYYY-MM-DD')
+                        newQueryForm.endDate = moment(placeAnOrderTime[1]).format('YYYY-MM-DD')
+                    } else {
+                        delete newQueryForm.beginDate
+                        delete newQueryForm.endDate
+                    }
+
+                    if (regPayIntervalTime?.length > 0 && (regPayIntervalTime[0] || regPayIntervalTime[1])) {
+                        newQueryForm.regPayIntervalTimeMin = regPayIntervalTime[0]
+                        newQueryForm.regPayIntervalTimeMax = regPayIntervalTime[1]
+                    }
+                    setQueryForm({ ...newQueryForm, ...params })
+                }}
+                isSource
+                isAccountId
+                isCpName
+                isCpOrderId
+                isCpStatus
+                isOs
+                isOrderLy
+                isGameIds
+                isFirstRecharge
+                isMerchantNo
+                isMerchantOrderNo
+                isOrderId
+                isPayWay
+                isSysUserId
+                isProductName
+                isGameRoleName
+                isServerName
+                isSourceServerName
+                isPayStatus
+                isGameUserId
+                isProjectId1
+                isPromotionId1
+                isUserName
+                isPayIntervalTime={{ tips: '充值距注册时间区间(分钟)' }}
+                isAgentId
+                payTimeDay={{ ranges: getPresets() }}
+                isRegDay={{ ranges: getPresets() }}
+                placeAnOrderDay={{ ranges: getPresets() }}
+            />}
             config={columns12(onDetail)}
+            fixed={{ left: 3, right: 2 }}
             configName={'订单明细'}
+            title='订单明细'
+            ajax={getOrderList}
         /> */}
 
         {visible && <Details visible={visible} initialValues={orderData} onClose={() => setVisible(false)} />}

+ 2 - 3
src/pages/gameDataStatistics/pitcher/everyDayGame/index.tsx

@@ -60,9 +60,8 @@ const EvertDayGame: React.FC = () => {
                 }}
                 isSource
                 isConsumeDay={{ ranges: getPresets() }}
-                isSysUserId
-                isGameId
-                isBGGameClassify
+                isSysUserIds
+                isGameIds
                 isCpName
             />}
             isZj