admin2 1.0.0

package/src/pages/tw/riskQueryCenter/components/AccountPage.js

@@ -0,0 +1,711 @@
+/* eslint-disable max-len */
+import React, { useState, useCallback, useEffect } from 'react';
+
+import {
+    Table,
+    Empty,
+    message,
+    Popover,
+    Input,
+    Select,
+    Pagination,
+    Tooltip,
+} from 'antd';
+import _ from 'lodash';
+import clsx from 'clsx';
+
+import { useLanguage } from '@/hooks';
+import { Cookie, formatSearchParams } from '@/utils/utils';
+import { getOpenOrganization } from '@/services/history';
+import { queryOpenEvent } from '@/services/base';
+import { SMIcon, SMRiskLevel } from '@/components';
+import { getRuleDetail } from '@/services/strategy';
+import {
+    getProfileRiskList,
+    getFrequencyRiskList,
+    getRelationRiskLInfo,
+    getGeoDispersion,
+    groupRisk,
+    getAccountRiskList,
+} from '@/services/twChannel';
+
+import moment from 'moment';
+
+import {
+    profileColumns,
+    frequencyColumns,
+    getRelationColumns1,
+    getRelationColumns4,
+    getDispersionColumns1,
+    getDispersionColumns2,
+    getDispersionColumns3,
+    getRowClassName,
+    getRelationAccountColumns2,
+    getRelationAccountColumns3,
+    getDispersionAccountColumns4,
+    getGangRiskColumns,
+} from '../configure';
+
+import ColorLegend from './ColorLegend';
+import DetailDrawer from './detailDrawer';
+
+require('./index.less');
+
+const screenList = [
+    { id: 'activityId', name: '营销活动ID' },
+    { id: 'taskId', name: '任务ID' },
+    { id: 'productId', name: '商品ID' },
+];
+
+const riskLevelStr = {
+    PASS: '通过',
+    REVIEW: '审核',
+    REJECT: '拒绝',
+};
+
+export default props => {
+    const { searchParams } = props;
+    const { t } = useLanguage();
+
+    const [profileRiskList, setProfileRiskList] = useState([]);
+    const [frequencyRiskList, setFrequencyRiskList] = useState([]);
+    const [relationRiskLInfo, setRelationRiskLInfo] = useState({});
+    const [geoDispersion, setGeoDispersion] = useState([]);
+    const [gangRiskList, setGangRiskList] = useState([{}, {}]);
+    const [featureList, setFeatureList] = useState([]);
+    const [initialState, setInitialState] = useState(false);
+    const [profileLoading, setProfileLoading] = useState(false);
+    const [frequencyLoading, setFrequencyLoading] = useState(false);
+    const [relationLoading, setRelationLoading] = useState(false);
+    const [geoLoading, setGeoLoading] = useState(false);
+    const [gangLoading, setGangLoading] = useState(false);
+    const [accountLoading, setAccountLoading] = useState(false);
+    const [loginTime, setLoginTime] = useState(0);
+    const [eventTime, setEventTime] = useState(0);
+    const [dayNum, setDayNum] = useState();
+    const [dayNum2, setDayNum2] = useState(1);
+    const [eventList, setEventList] = useState([]);
+    const [expandedMap, setExpandedMap] = useState({});
+    const [visible, setVisible] = useState(false);
+    const [accountRiskList, setAccountRiskList] = useState([]);
+    const [record, setRecord] = useState({});
+
+    // 搜索状态
+    const [searchType, setSearchType] = useState('activityId');
+    const [searchValue, setSearchValue] = useState('');
+    const [selectedEventId, setSelectedEventId] = useState('all');
+
+    // ====================== 【分页状态 - 核心新增】 ======================
+    const [pageNum, setPageNum] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+    const [total, setTotal] = useState(0);
+
+    const [activePopoverKey, setActivePopoverKey] = useState(null);
+    const [modelText, setModelText] = useState('');
+
+    const STORAGE_TIME_TYPES = Object.freeze({
+        ACCOUNT_LOGIN: { key: 'ACCOUNT_LOGIN', setState: setLoginTime },
+        POST_EVENT: { key: 'POST_EVENT', setState: setEventTime },
+    });
+
+    const doSearch = useCallback(async params => {
+        setProfileLoading(true);
+        setFrequencyLoading(true);
+        setRelationLoading(true);
+        setGeoLoading(true);
+        setGangLoading(true);
+
+        Promise.allSettled([
+            getProfileRiskList(params).then(result => {
+                if (result?.code === 1100) {
+                    setProfileRiskList(result?.content);
+                }
+                setProfileLoading(false);
+            }).catch(() => setProfileLoading(false)),
+            getFrequencyRiskList(params).then(result => {
+                if (result?.code === 1100) {
+                    setFrequencyRiskList(result?.content);
+                }
+                setFrequencyLoading(false);
+            }).catch(() => setFrequencyLoading(false)),
+            getRelationRiskLInfo({ ...params, dayNum }).then(result => {
+                if (result?.code === 1100) {
+                    setRelationRiskLInfo(result?.content);
+                }
+                setRelationLoading(false);
+            }).catch(() => setRelationLoading(false)),
+            getGeoDispersion({...params, dayNum: dayNum2}).then(result => {
+                if (result?.code === 1100) {
+                    setGeoDispersion(result?.content);
+                }
+                setGeoLoading(false);
+            }).catch(() => setGeoLoading(false)),
+            groupRisk(params).then(result => {
+                if (result?.code === 1100) {
+                    setGangRiskList(result?.content || []);
+                }
+                setGangLoading(false);
+            }).catch(() => setGangLoading(false)),
+        ]);
+    }, [dayNum, dayNum2]);
+
+    const getStorageTime = useCallback(async searchParams => {
+        if (!searchParams?.organization) {return;}
+        try {
+            const requests = Object.values(STORAGE_TIME_TYPES).map(async ({ key }) => {
+                const result = await getOpenOrganization({ organization: searchParams.organization, serviceId: key });
+                return { key, storageTime: result?.content?.storageTime };
+            });
+            const results = await Promise.all(requests);
+            results.forEach(({ key, storageTime }) => {
+                STORAGE_TIME_TYPES[key].setState(storageTime);
+            });
+        } catch (error) { }
+    }, []);
+
+    const getrelationRiskLInfoDom = useCallback(() => {
+        return (
+            <div className="risk-query-page-content">
+                <div className="risk-query-page-content-item risk-query-page-content-first">
+                    <p className="risk-query-page-content-item-p">{t('关联特征统计表')}</p>
+                    <ColorLegend />
+                    <Table columns={getRelationColumns1(t, recordClick)} dataSource={relationRiskLInfo?.featureStatistic || []} rowClassName={getRowClassName} pagination={false} scroll={relationRiskLInfo?.featureStatistic?.length > 9 ? { y: 530 } : false} loading={relationLoading} className="break-word-table" />
+                </div>
+                <div className="risk-query-page-content-item">
+                    <p className="risk-query-page-content-item-p">{t('账号关联设备列表')}</p>
+                    <Table columns={getRelationAccountColumns2(t)} dataSource={relationRiskLInfo?.tokenDevice || []} pagination={false} scroll={relationRiskLInfo?.tokenDevice?.length > 9 ? { y: 530 } : false} loading={relationLoading} className="break-word-table" />
+                </div>
+                <div className="risk-query-page-content-item">
+                    <p className="risk-query-page-content-item-p">{t('账号关联手机号列表')}</p>
+                    <Table columns={getRelationAccountColumns3(t)} dataSource={relationRiskLInfo?.tokenPhone || []} pagination={false} scroll={relationRiskLInfo?.tokenPhone?.length > 9 ? { y: 530 } : false} loading={relationLoading} className="break-word-table" />
+                </div>
+                <div className="risk-query-page-content-item">
+                    <p className="risk-query-page-content-item-p">{t('账号关联IP列表')}</p>
+                    <Table columns={getRelationColumns4(t)} dataSource={relationRiskLInfo?.tokenIp || []} pagination={false} scroll={relationRiskLInfo?.tokenIp?.length > 9 ? { y: 530 } : false} loading={relationLoading} className="break-word-table" />
+                </div>
+            </div>
+        );
+    }, [t, relationRiskLInfo, relationLoading]);
+
+    const geoDispersionDom = useCallback(() => {
+        return (
+            <div className="risk-query-page-content">
+                <div className="risk-query-page-content-special risk-query-page-content-first">
+                    <div className="risk-query-page-content-special-item risk-query-page-content-special-left">
+                        <p className="risk-query-page-content-item-p">{t('地域离散统计表')}</p>
+                        <ColorLegend />
+                        <Table columns={getRelationColumns1(t, value => setDayNum2(value))} dataSource={geoDispersion?.geoDispersionStatistic || []} rowClassName={getRowClassName} pagination={false} scroll={geoDispersion?.geoDispersionStatistic?.length > 9 ? { y: 530 } : false} loading={geoLoading} className="break-word-table" />
+                    </div>
+                    <div className="risk-query-page-content-special-item risk-query-page-content-special-account">
+                        <p className="risk-query-page-content-item-p">{t('账号关联IP省份列表')}</p>
+                        <Table columns={getDispersionColumns2(t)} dataSource={geoDispersion?.tokenIpProvince || []} pagination={false} scroll={geoDispersion?.tokenIpProvince?.length > 9 ? { y: 530 } : false} loading={geoLoading} className="break-word-table" />
+                    </div>
+                </div>
+                <div className="risk-query-page-content-item risk-query-page-content-special">
+                    <div className="risk-query-page-content-special-item">
+                        <p className="risk-query-page-content-item-p">{t('账号关联收货省份列表')}</p>
+                        <Table columns={getDispersionColumns3(t)} dataSource={geoDispersion?.tokenReceiverProvince || []} pagination={false} scroll={geoDispersion?.tokenReceiverProvince?.length > 9 ? { y: 530 } : false} loading={geoLoading} className="break-word-table" />
+                    </div>
+                    <div className="risk-query-page-content-special-item">
+                        <p className="risk-query-page-content-item-p">{t('账号关联门店省份列表')}</p>
+                        <Table columns={getDispersionAccountColumns4(t)} dataSource={geoDispersion?.tokenCounterProvince || []} pagination={false} scroll={geoDispersion?.tokenCounterProvince?.length > 9 ? { y: 530 } : false} loading={geoLoading} className="break-word-table" />
+                    </div>
+                </div>
+            </div>
+        );
+    }, [geoDispersion, geoLoading, t]);
+
+    const onClickHistory = useCallback((time, variableId, targetEventId) => {
+        const isLogin = variableId === 'login_requestId_count_per_org_tokenId';
+        const maxQueryDays = isLogin ? loginTime : eventTime;
+        if (time?.value === 365) {
+            message.warning(t('历史记录仅保留近{{maxQueryDays}}天', {maxQueryDays}));
+            return;
+        }
+        const originalStartMoment = moment(searchParams.startTime).subtract(time?.value, time?.unit);
+        const diffDay = moment().diff(originalStartMoment, 'days');
+        const diffDay2 = moment().diff(searchParams.startTime, 'days');
+        let validStartMoment = originalStartMoment;
+        if (diffDay >= maxQueryDays) {
+            message.warning(t('历史记录仅保留近{{maxQueryDays}}天，已自动调整查询起始时间', {maxQueryDays}));
+            validStartMoment = moment(originalStartMoment).add(diffDay2 - 1, 'days');
+        }
+        Cookie.set('organization', searchParams.organization);
+        const endTime = moment(searchParams.startTime).set({ h: 23, m: 59, s: 59 }).format('x');
+        const startTime = validStartMoment.format('x');
+        let addParams = '';
+        let url = '/new/tianwang/event/history';
+        if (variableId === 'login_requestId_count_per_org_tokenId') {
+            url = '/new/tianwang/login/history';
+        } else {
+            addParams = `&eventId=${targetEventId}`;
+        }
+        window.open(`${url}?searchKey=tokenId&searchContent=${searchParams.tokenId}&startTime=${startTime}&endTime=${endTime}${addParams}`);
+    }, [searchParams, loginTime, eventTime, t]);
+
+    const recordClick = useCallback(dayNum => { setDayNum(dayNum); }, []);
+
+    const getEvent = useCallback(async () => {
+        const params = { organization: searchParams?.organization, serviceId: 'POST_EVENT', isGlobalEvent: 0 };
+        const result = await queryOpenEvent(params);
+        if (result?.code === 1100) {setEventList(result?.contents?.[0]?.events || []);}
+    }, [searchParams?.organization]);
+
+    const toggleExpand = id => {
+        setExpandedMap(prev => ({ ...prev, [id]: !prev[id] }));
+    };
+
+    const getRiskTag = riskLevel => {
+        const map = {
+            high: { text: t('高风险'), color: '#ff4d4f', bg: '#fff1f0' },
+            medium: { text: t('中风险'), color: '#faad14', bg: '#fffbe6' },
+            low: { text: t('低风险'), color: '#52c41a', bg: '#f6ffed' },
+        };
+        return map[riskLevel] || {};
+    };
+
+    const handleAccountRisk = useCallback(async () => {
+        if (!searchParams) {return;}
+        setAccountLoading(true);
+        try {
+            const params = {
+                organization: searchParams?.organization,
+                tokenId: searchParams?.tokenId,
+                startTime: searchParams.startTime,
+                // 分页参数
+                offset: (pageNum - 1) * pageSize,
+                count: pageSize,
+                // 搜索参数
+                eventId: selectedEventId === 'all' ? '' : selectedEventId,
+                activityId: searchType === 'activityId' ? searchValue : '',
+                taskId: searchType === 'taskId' ? searchValue : '',
+                productId: searchType === 'productId' ? searchValue : '',
+            };
+            const res = await getAccountRiskList(formatSearchParams(params));
+            if (res?.code === 1100) {
+                setAccountRiskList(res.contents || []);
+                setTotal(res?.totalCount || 0);
+            }
+        } catch (err) {
+            message.error(t('查询失败'));
+        } finally {
+            setAccountLoading(false);
+        }
+    }, [searchParams, searchType, searchValue, selectedEventId, pageNum, pageSize, t]);
+
+    // 搜索触发（搜索后重置到第一页）
+    const handleSearch = () => {
+        handleAccountRisk();
+        setPageNum(1);
+    };
+
+    // 分页切换
+    const handlePageChange = (p, s) => {
+        setPageNum(p);
+        setPageSize(s);
+    };
+
+    const strategyModel = async (record, popoverKey) => {
+        if (!record?.ruleId) {return;}
+
+        setModelText(t('加载中...'));
+        setActivePopoverKey(popoverKey);
+
+        const params = {
+            clientEventId: record?.eventId,
+            serviceId: record?.serviceId,
+            ruleId: record?.ruleId,
+        };
+
+        try {
+            const result = await getRuleDetail(params);
+            if (result?.code === 1100) {
+                setModelText(result?.content?.marker || t('该策略暂无解释'));
+            } else {
+                setModelText(t('获取规则信息失败'));
+            }
+        } catch (err) {
+            setModelText(t('请求异常，请稍后重试'));
+        }
+    };
+
+    useEffect(() => {
+        if (searchParams) {
+            doSearch(searchParams);
+            setInitialState(true);
+            getStorageTime(searchParams);
+        } else {
+            setInitialState(false);
+        }
+    }, [searchParams, getStorageTime, doSearch]);
+
+    useEffect(() => {
+        if (searchParams?.organization) {getEvent();}
+    }, [getEvent, searchParams?.organization]);
+
+    // 分页/搜索变化 → 重新查询
+    useEffect(() => {
+        if (searchParams) {
+            handleAccountRisk();
+        }
+    }, [selectedEventId, searchParams, pageNum, pageSize]);
+
+    useEffect(() => {
+        if (searchParams?.organization) {
+            setSelectedEventId('all');
+            setSearchValue('');
+            setPageNum(1);
+            getEvent();
+        }
+    }, [getEvent, searchParams?.organization]);
+
+    const getValueDom = useCallback((dataItem, item) => {
+        if (dataItem.key === t('风险类型')) {
+            return <SMRiskLevel className="value" riskLevel={dataItem.value || 'PASS'} riskLevelStr={riskLevelStr[dataItem.value] || t('通过')} />;
+        }
+        return (
+            <span className="value">
+                <Tooltip
+                    title={dataItem.value}
+                    overlayStyle={{
+                        maxHeight: '300px',
+                        overflowY: 'auto',
+                        whiteSpace: 'pre-wrap',
+                        wordBreak: 'break-all',
+                    }}
+                >
+                    {dataItem.value}
+                </Tooltip>
+                {dataItem.id && (
+                    <Popover
+                        content={modelText}
+                        visible={activePopoverKey === `${item.requestId}-${dataItem.id}`}
+                        onVisibleChange={visible => {
+                            if (!visible) {
+                                setActivePopoverKey(null);
+                                setModelText('');
+                            }
+                        }}
+                        className="item-action"
+                    >
+                        <a
+                            style={{ marginLeft: 8 }}
+                            onClick={e => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                const currentKey = `${item.requestId}-${dataItem.id}`;
+                                strategyModel({ ...item, ruleId: dataItem.id }, currentKey);
+                            }}
+                        >
+                            {dataItem.id}
+                        </a>
+                    </Popover>
+                )}
+            </span>
+        );
+
+    }, [activePopoverKey, modelText, t]);
+
+    const accountContent = useCallback(() => {
+        if (accountRiskList.length === 0) {
+            return (
+                <div style={{ textAlign: 'center', padding: '40px 0' }}>
+                    <Empty description={t('暂无数据')} />
+                </div>
+            );
+        }
+        return (
+            <div className="risk-query-page-account-content" style={{ position: 'relative' }}>
+                {accountLoading && (
+                    <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(255,255,255,0.6)', zIndex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                        <div className="ant-spin ant-spin-spinning"><span className="ant-spin-dot ant-spin-dot-spin"></span></div>
+                    </div>
+                )}
+                <div className="risk-query-page-account-content-bar" />
+                {accountRiskList.map(item => {
+                    const riskTag = getRiskTag(item.riskLevel);
+                    const expanded = expandedMap[item.requestId];
+                    return (
+                        <div key={item.requestId} className="account-item">
+                            <div className="account-item-left"><span>{item?.timestampDisplayName}</span><div className="dot" /></div>
+                            <div className="account-item-right" onClick={() => toggleExpand(item.requestId)}>
+                                <div className="account-header">
+                                    <div className="account-header-left">
+                                        <SMIcon type={expanded ? 'icon-zhankaixiangqing11' : 'icon-fanyeyou'} />
+                                        <span className="event-name">{item.eventName}</span>
+                                        <span className="risk-tag" style={{ color: riskTag.color, background: riskTag.bg }}>{riskTag.text}</span>
+                                    </div>
+                                    <div className="account-header-right">
+                                        <a onClick={() => {
+                                            setVisible(true);
+                                            setRecord(item);
+                                        }}
+                                        >
+                                            {t('详情')}
+                                        </a>
+                                    </div>
+                                </div>
+                                {expanded && (
+                                    <div className="account-info">
+                                        {item.data?.map((dataItem, index) => (
+                                            <div key={dataItem.id || index} className="account-info-item">
+                                                <Tooltip title={dataItem.key}><span className="label">{dataItem.key}</span></Tooltip>
+                                                {getValueDom(dataItem, item)}
+                                            </div>
+                                        ))}
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    );
+                })}
+                {accountRiskList.length > 0 && (
+                    <div style={{ textAlign: 'right', marginTop: 16, paddingRight: 8 }}>
+                        <Pagination
+                            current={pageNum}
+                            pageSize={pageSize}
+                            total={total}
+                            showSizeChanger
+                            pageSizeOptions={['10', '20', '50']}
+                            showTotal={total => t('共 {{total}} 条', { total })}
+                            onChange={handlePageChange}
+                        />
+                    </div>
+                )}
+            </div>
+        );
+    }, [expandedMap, modelText, accountLoading, accountRiskList, activePopoverKey, pageNum, pageSize, total, getRiskTag, t]);
+
+    // ====================== 【统一空值判断】 ======================
+    // 关联风险是否为空
+    const isRiskEmpty = !!(
+        relationRiskLInfo?.featureStatistic?.length
+        || relationRiskLInfo?.tokenDevice?.length
+        || relationRiskLInfo?.tokenPhone?.length
+        || relationRiskLInfo?.tokenIp?.length
+    );
+
+    // 地域离散风险是否为空
+    const isDispersionEmpty = !!(
+        geoDispersion?.geoDispersionStatistic?.length
+        || geoDispersion?.tokenIpProvince?.length
+        || geoDispersion?.tokenReceiverProvince?.length
+        || geoDispersion?.tokenCounterProvince?.length
+    );
+
+    const isTopEmpty = profileRiskList?.length || frequencyRiskList?.length;
+
+    // 团伙风险是否为空
+    const isGangEmpty = !!gangRiskList?.length;
+
+    return (
+        <div className="risk-query-page">
+            <div className="risk-query-page-top">
+                {/* 画像风险 */}
+                <div className={
+                    clsx(
+                        'risk-query-page-top-item',
+                        !initialState || isTopEmpty ? '' : 'risk-query-page-top-empty'
+                    )
+                }
+                >
+                    <p className="risk-query-page-title">{t('画像风险')}</p>
+                    {
+                        initialState ? (
+                            isTopEmpty ? (
+                                <div>
+                                    <ColorLegend />
+                                    <Table
+                                        columns={profileColumns(t)}
+                                        dataSource={profileRiskList}
+                                        rowClassName={getRowClassName}
+                                        pagination={false}
+                                        scroll={profileRiskList?.length > 9 ? { y: 530 } : false}
+                                        loading={profileLoading}
+                                        className="break-word-table"
+                                    />
+                                </div>
+                            ) : (
+                                <div className="risk-query-page-empty">{t('暂无数据')}</div>
+                            )
+                        ) : (
+                            <Empty description={t('暂无数据')} />
+                        )
+                    }
+                </div>
+
+                {/* 频度风险 */}
+                <div className={
+                    clsx(
+                        'risk-query-page-top-item',
+                        !initialState || isTopEmpty ? '' : 'risk-query-page-top-empty'
+                    )
+                }
+                >
+                    <p className="risk-query-page-title">{t('频度风险')}</p>
+                    {
+                        initialState ? (
+                            isTopEmpty ? (
+                                <div>
+                                    <ColorLegend />
+                                    <Table
+                                        columns={frequencyColumns(t, onClickHistory)}
+                                        dataSource={frequencyRiskList}
+                                        scroll={frequencyRiskList?.length > 9 ? { y: 530 } : false}
+                                        pagination={false}
+                                        rowClassName={getRowClassName}
+                                        loading={frequencyLoading}
+                                        className="break-word-table"
+                                    />
+                                </div>
+                            ) : (
+                                <div className="risk-query-page-empty">{t('暂无数据')}</div>
+                            )
+                        ) : (
+                            <Empty description={t('暂无数据')} />
+                        )
+                    }
+                </div>
+            </div>
+
+            {/* 关联风险 */}
+            <div
+                className={
+                    clsx(
+                        'risk-query-page-middle',
+                        !initialState || isRiskEmpty ? '' : 'risk-query-page-top-empty'
+                    )}
+            >
+                <p className="risk-query-page-title">{t('关联风险')}</p>
+                {
+                    initialState ? (
+                        isRiskEmpty ? (
+                            <div>{getrelationRiskLInfoDom()}</div>
+                        ) : (
+                            <div className="risk-query-page-empty">{t('暂无数据')}</div>
+                        )
+                    ) : (
+                        <Empty description={t('暂无数据')} />
+                    )
+                }
+            </div>
+
+            {/* 地域离散风险 */}
+            <div
+                className={
+                    clsx(
+                        'risk-query-page-bottom',
+                        !initialState || isDispersionEmpty ? '' : 'risk-query-page-top-empty'
+                    )}
+            >
+                <p className="risk-query-page-title">{t('地域离散风险')}</p>
+                {
+                    initialState ? (
+                        isDispersionEmpty ? (
+                            <div>{geoDispersionDom()}</div>
+                        ) : (
+                            <div className="risk-query-page-empty">{t('暂无数据')}</div>
+                        )
+                    ) : (
+                        <Empty description={t('暂无数据')} />
+                    )
+                }
+            </div>
+
+            {/* 团伙风险 */}
+            <div
+                className={
+                    clsx(
+                        'risk-query-page-gangRisk',
+                        !initialState || isGangEmpty ? '' : 'risk-query-page-top-empty'
+                    )}
+            >
+                <p className="risk-query-page-title">{t('团伙风险')}</p>
+                {
+                    initialState ? (
+                        isGangEmpty ? (
+                            <div>
+                                <ColorLegend />
+                                <Table
+                                    columns={getGangRiskColumns(t)}
+                                    dataSource={gangRiskList}
+                                    pagination={false}
+                                    scroll={gangRiskList?.length > 9 ? { y: 530 } : false}
+                                    loading={gangLoading}
+                                    rowClassName={getRowClassName}
+                                    className="break-word-table"
+                                />
+                            </div>
+                        ) : (
+                            <div className="risk-query-page-empty">{t('暂无数据')}</div>
+                        )
+                    ) : (
+                        <Empty description={t('暂无数据')} />
+                    )
+                }
+            </div>
+
+            {/* 账号事件序列 */}
+            <div className="risk-query-page-account">
+                <div className="risk-query-page-account-top">
+                    <p className="risk-query-page-title">{t('账号事件（行为）序列')}</p>
+                    <div className="risk-query-page-account-search">
+                        <div className="risk-query-page-account-search-item">
+                            <Input.Group compact>
+                                <Select
+                                    value={searchType}
+                                    onChange={val => {
+                                        setSearchType(val);
+                                        setSearchValue('');
+                                        setPageNum(1);
+                                    }}
+                                    style={{ width: 150 }}
+                                >
+                                    {screenList.map(item => (
+                                        <Select.Option key={item.id} value={item.id}>
+                                            {t(item.name)}
+                                        </Select.Option>
+                                    ))}
+                                </Select>
+                                <Input.Search
+                                    style={{ width: 200 }}
+                                    value={searchValue}
+                                    onChange={e => setSearchValue(e.target.value)}
+                                    onSearch={handleSearch}
+                                    placeholder={t('请输入')}
+                                />
+                            </Input.Group>
+                        </div>
+                        <div className="risk-query-page-account-search-item">
+                            <span style={{ width: 40 }}>{t('事件')}</span>
+                            <Select
+                                value={selectedEventId}
+                                onChange={val => {
+                                    setSelectedEventId(val);
+                                    setPageNum(1);
+                                }}
+                                style={{ width: 150 }}
+                            >
+                                {[{ eventId: 'all', eventName: t('全部') }, ...eventList].map(item => (
+                                    <Select.Option key={item?.eventId} value={item?.eventId}>
+                                        {item?.eventName}
+                                    </Select.Option>
+                                ))}
+                            </Select>
+                        </div>
+                    </div>
+                </div>
+                {accountContent()}
+            </div>
+
+            <DetailDrawer
+                visible={visible}
+                onClose={() => setVisible(false)}
+                organization={searchParams?.organization}
+                date={searchParams?.startTime}
+                appId={searchParams?.appId}
+                record={record}
+            />
+        </div>
+    );
+};