fix

src/pages/gsData/roleIpMonitor/loginIpDetails.tsx

@@ -6,15 +6,16 @@ import React, { useEffect, useState } from 'react';
 const LoginIpDetails: React.FC<{ roleId: any, icon?: React.ReactNode }> = ({ roleId, icon }) => {
 
     /*********************************/
+    const [queryForm, setQueryForm] = useState<{ pageSize: number, pageNum: number }>({ pageNum: 1, pageSize: 10 })
     const [visible, setVisible] = useState<boolean>(false)
     const getRoleIpDetailList = useAjax((params) => getRoleIpDetailListApi(params))
     /*********************************/
 
     useEffect(() => {
         if (visible) {
-            getRoleIpDetailList.run({ roleId })
+            getRoleIpDetailList.run({ roleId, ...queryForm })
         }
-    }, [roleId, visible])
+    }, [roleId, visible, queryForm])
 
     return <>
         <a onClick={() => setVisible(true)}>{icon}</a>
@@ -43,7 +44,18 @@ const LoginIpDetails: React.FC<{ roleId: any, icon?: React.ReactNode }> = ({ rol
                 loading={getRoleIpDetailList?.loading}
                 size="small"
                 bordered
-                pagination={false}
+                pagination={{
+                    total: getRoleIpDetailList?.data?.total,
+                    pageSize: getRoleIpDetailList?.data?.size,
+                    current: getRoleIpDetailList?.data?.current
+                }}
+                onChange={(pagination) => {
+                    let { current, pageSize } = pagination
+                    let newQueryForm = JSON.parse(JSON.stringify(queryForm))
+                    newQueryForm.pageNum = current || newQueryForm.pageNum
+                    newQueryForm.pageSize = pageSize || newQueryForm.pageSize
+                    setQueryForm({ ...newQueryForm })
+                }}
             />
         </Modal>}
     </>

src/pages/gsData/roleIpMonitor/regIpRoleDetails.tsx

@@ -12,19 +12,20 @@ import React, { useEffect, useState } from 'react';
 const RegIpRoleDetails: React.FC<{ ip: any, userId?: any, icon?: React.ReactNode }> = ({ ip, userId, icon }) => {
 
     /*********************************/
+    const [queryForm, setQueryForm] = useState<{ pageSize: number, pageNum: number }>({ pageNum: 1, pageSize: 10 })
     const [visible, setVisible] = useState<boolean>(false)
     const getRoleDetailList = useAjax((params) => getRoleDetailListApi(params))
     /*********************************/
 
     useEffect(() => {
         if (visible) {
-            const params: { regIp: string, excludeUserId?: any } = { regIp: ip }
+            const params: { regIp: string, excludeUserId?: any } = { regIp: ip, ...queryForm }
             if (userId) {
                 params.excludeUserId = userId
             }
             getRoleDetailList.run(params)
         }
-    }, [ip, userId, visible])
+    }, [ip, userId, visible, queryForm])
 
     return <>
         <a onClick={() => setVisible(true)}>{icon}</a>
@@ -98,7 +99,18 @@ const RegIpRoleDetails: React.FC<{ ip: any, userId?: any, icon?: React.ReactNode
                 loading={getRoleDetailList?.loading}
                 size="small"
                 bordered
-                pagination={false}
+                pagination={{
+                    total: getRoleDetailList?.data?.total,
+                    pageSize: getRoleDetailList?.data?.size,
+                    current: getRoleDetailList?.data?.current
+                }}
+                onChange={(pagination) => {
+                    let { current, pageSize } = pagination
+                    let newQueryForm = JSON.parse(JSON.stringify(queryForm))
+                    newQueryForm.pageNum = current || newQueryForm.pageNum
+                    newQueryForm.pageSize = pageSize || newQueryForm.pageSize
+                    setQueryForm({ ...newQueryForm })
+                }}
             />
         </Modal>}
     </>

src/pages/gsData/roleIpMonitor/tableConfig.tsx

@@ -5,6 +5,7 @@ import { Statistic } from "antd"
 import React from "react"
 import LoginIpDetails from "./loginIpDetails"
 import RegIpRoleDetails from "./regIpRoleDetails"
+import TongIpUser from "./tongIpUser"
 
 function columns12(): { label: string, fieldSHow?: { label: string, saveField: string, defaultValue: any[], data: any[] }, data: any[] }[] {
 
@@ -66,7 +67,7 @@ function columns12(): { label: string, fieldSHow?: { label: string, saveField: s
                 },
                 {
                     title: '角色同IP的玩家数量', dataIndex: 'user_count', label: '基本信息', align: 'center', width: 70, sorter: true, default: 10,
-                    render: (a: string) => <Statistic value={a || 0} />
+                    render: (a: number, b: any) => <Statistic value={a || 0} suffix={<TongIpUser ip={b.ip} icon={<EyeOutlined />} />} />
                 },
                 {
                     title: '同IP的角色数量', dataIndex: 'role_count', label: '基本信息', align: 'center', width: 70, sorter: true, default: 11,

src/pages/gsData/roleIpMonitor/tongIpUser.tsx

@@ -0,0 +1,155 @@
+import WidthEllipsis from "@/components/widthEllipsis"
+import { useAjax } from "@/Hook/useAjax"
+import { getUserDetailListApi } from "@/services/gsData"
+import { Modal, Table } from "antd"
+import React, { useEffect, useState } from "react"
+
+/**
+ * 角色同IP的玩家
+ * @returns 
+ */
+const TongIpUser: React.FC<{ ip: any, userId?: any, icon?: React.ReactNode }> = ({ ip, icon }) => {
+    /*********************************/
+    const [queryForm, setQueryForm] = useState<{ pageSize: number, pageNum: number }>({ pageNum: 1, pageSize: 10 })
+    const [visible, setVisible] = useState<boolean>(false)
+    const getUserDetailList = useAjax((params) => getUserDetailListApi(params))
+    /*********************************/
+
+    useEffect(() => {
+        if (visible) {
+            getUserDetailList.run({ regIp: ip, ...queryForm })
+        }
+    }, [ip, visible, queryForm])
+
+    return <>
+        <a onClick={() => setVisible(true)}>{icon}</a>
+        {visible && <Modal
+            title={<strong>角色同IP的玩家(IP：{ip})</strong>}
+            visible={visible}
+            onCancel={() => setVisible(false)}
+            footer={null}
+            width={950}
+        >
+            <Table
+                scroll={{ x: 900 }}
+                columns={[
+                    {
+                        title: '玩家名称',
+                        dataIndex: 'userName',
+                        key: 'userName',
+                        width: 100,
+                        ellipsis: true
+                    },
+                    {
+                        title: '玩家ID',
+                        dataIndex: 'userId',
+                        key: 'userId',
+                        align: 'center',
+                        width: 85,
+                    },
+                    {
+                        title: '最近订单时间',
+                        dataIndex: 'lastOrderTime',
+                        key: 'lastOrderTime',
+                        align: 'center',
+                        width: 140,
+                        render: (a: string, b: any) => (<WidthEllipsis value={a} />)
+                    },
+                    {
+                        title: '累计充值金额',
+                        dataIndex: 'totalAmount',
+                        key: 'totalAmount',
+                        align: 'center',
+                        width: 75,
+                    },
+                    {
+                        title: '玩家角色总数',
+                        dataIndex: 'userRoleCount',
+                        key: 'userRoleCount',
+                        align: 'center',
+                        width: 75,
+                    },
+                    {
+                        title: '渠道名称',
+                        dataIndex: 'agentGame',
+                        key: 'agentGame',
+                        width: 90,
+                        ellipsis: true,
+                        align: 'center',
+                    },
+                    {
+                        title: '渠道ID',
+                        dataIndex: 'agentId',
+                        key: 'agentId',
+                        align: 'center',
+                        width: 75,
+                    },
+                    {
+                        title: '玩家注册游戏名称',
+                        dataIndex: 'gameName',
+                        key: 'gameName',
+                        width: 100,
+                        ellipsis: true
+                    },
+                    {
+                        title: '玩家注册游戏ID',
+                        dataIndex: 'gameId',
+                        key: 'gameId',
+                        align: 'center',
+                        width: 75,
+                    },
+                    {
+                        title: '最近登录游戏名称',
+                        dataIndex: 'lastLoginGame',
+                        key: 'lastLoginGame',
+                        width: 100,
+                        ellipsis: true
+                    },
+                    {
+                        title: '最近登录游戏ID',
+                        dataIndex: 'lastLoginGameId',
+                        key: 'lastLoginGameId',
+                        align: 'center',
+                        width: 75,
+                    },
+                    {
+                        title: '玩家注册时间',
+                        dataIndex: 'createTime',
+                        key: 'createTime',
+                        align: 'center',
+                        width: 140,
+                        render: (a: string, b: any) => (<WidthEllipsis value={a} />)
+                    },
+                    {
+                        title: '最近登录时间',
+                        dataIndex: 'lastLoginTime',
+                        key: 'lastLoginTime',
+                        align: 'center',
+                        width: 140,
+                        render: (a: string, b: any) => (<WidthEllipsis value={a} />)
+                    },
+
+                ]}
+                rowKey={'userId'}
+                dataSource={getUserDetailList?.data?.records}
+                loading={getUserDetailList?.loading}
+                size="small"
+                bordered
+                pagination={{
+                    total: getUserDetailList?.data?.total,
+                    pageSize: getUserDetailList?.data?.size,
+                    current: getUserDetailList?.data?.current
+                }}
+                onChange={(pagination) => {
+                    let { current, pageSize } = pagination
+                    let newQueryForm = JSON.parse(JSON.stringify(queryForm))
+                    newQueryForm.pageNum = current || newQueryForm.pageNum
+                    newQueryForm.pageSize = pageSize || newQueryForm.pageSize
+                    setQueryForm({ ...newQueryForm })
+                }}
+            />
+        </Modal>}
+    </>
+}
+
+export default React.memo(TongIpUser)

src/services/gsData/index.ts

@@ -305,4 +305,16 @@ export async function getRoleDetailListApi(data: { regIp: string }) {
         method: 'POST',
         data
     });
+}
+
+/**
+ * 角色同IP的玩家
+ * @param data 
+ * @returns 
+ */
+export async function getUserDetailListApi(data: { regIp: string }) {
+    return request(api + `/gameData/role/userDetail/listOfPage`, {
+        method: 'POST',
+        data
+    });
 }

src/utils/utils.ts

@@ -115,7 +115,13 @@ export const getNumber = (num1: number, num2: number, operator: '+' | '-' | '*'
   return Number(eval(`${num1.toFixed(10)}${operator}${num2.toFixed(10)}`).toFixed(10))
 }
 
-// 数组分组
+/**
+ * 数组分组
+ * @param array 
+ * @param f 
+ * @param isObject 
+ * @returns 
+ */
 export const groupBy = (array: any[], f: (item: any) => any[], isObject?: boolean) => {
   const groups: any = {};
   array.forEach(function (o) { //注意这里必须是forEach 大写