admin2 1.0.0

package/src/pages/tw/riskQueryCenter/components/ColorLegend/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { colorList } from '../../configure';
+
+import {useLanguage} from '@/hooks';
+
+require('./index.less');
+
+const ColorLegend = () => {
+    const {t} = useLanguage();
+    return (
+        <div className="color-legend">
+            {colorList.map(({ name, color }) => (
+                <div key={name} className="color-legend-item">
+                    <span
+                        className="color-legend-color"
+                        style={{ backgroundColor: color }}
+                    />
+                    <span className="color-legend-label">{t(name)}</span>
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default ColorLegend;

package/src/pages/tw/riskQueryCenter/components/ColorLegend/index.less

@@ -0,0 +1,20 @@
+
+.color-legend {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.color-legend-item {
+    display: flex;
+    align-items: center;
+    margin-left: 10px;
+}
+
+.color-legend-color {
+    display: inline-block;
+    width: 25px;
+    height: 8px;
+    margin-right: 5px;
+}

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

@@ -0,0 +1,300 @@
+import React, { useState, useCallback, useEffect } from 'react';
+
+import { Table, Empty, Button } from 'antd';
+
+import { useLanguage } from '@/hooks';
+
+import {
+    profileDeviceColumns,
+    getRelationColumns1,
+    getRelationColumns2,
+    getBaseInfoColumns,
+    getRelationDeviceColumns3,
+    getRowClassName,
+    getRelationPhoneColumns4,
+    getDispersionColumns2,
+    getDispersionCountryColumns,
+    getDispersionCityColumns,
+    getDisErrorColumns,
+} from '../configure';
+
+import {
+    getDeviceBaseInfoList,
+    getDeviceProfileRiskList,
+    getDeviceRelationRiskLInfo,
+    geoDispersion,
+    getErrorList,
+} from '@/services/twChannel';
+
+import ColorLegend from './ColorLegend';
+import { get } from 'lodash';
+
+require('./index.less');
+
+export default props => {
+    const { searchParams } = props;
+    const { t } = useLanguage();
+
+    const [profileRiskList, setProfileRiskList] = useState([]); // 画像风险
+    const [baseInfoList, setBaseInfoList] = useState([]); // 基础属性
+    const [relationRiskLInfo, setRelationRiskLInfo] = useState(); // 关联风险
+    const [initialState, setInitialState] = useState(false);
+    // 拆分每个接口独立的loading状态
+    const [baseInfoLoading, setBaseInfoLoading] = useState(false);
+    const [profileLoading, setProfileLoading] = useState(false);
+    const [relationLoading, setRelationLoading] = useState(false);
+    const [geoLoading, setGeoLoading] = useState(false);
+    const [errorLoading, setErrorLoading] = useState(false);
+    const [geoDispersionList, setGeoDispersionList] = useState([]);
+    const [errorList, setErrorList] = useState([]);
+    const [dayNum, setDayNum] = useState();
+    const [dayNum2, setDayNum2] = useState(1);
+
+    const doSearch = useCallback(async params => {
+        setBaseInfoLoading(true);
+        setProfileLoading(true);
+        setRelationLoading(true);
+        setGeoLoading(true);
+        setErrorLoading(true);
+
+        Promise.allSettled([
+            // 基础属性接口
+            getDeviceBaseInfoList(params).then(result => {
+                if (result?.code === 1100) {
+                    setBaseInfoList(result?.content || []);
+                }
+                setBaseInfoLoading(false);
+            }).catch(() => setBaseInfoLoading(false)),
+
+            // 画像风险接口
+            getDeviceProfileRiskList(params).then(result => {
+                if (result?.code === 1100) {
+                    setProfileRiskList(result?.content || []);
+                }
+                setProfileLoading(false);
+            }).catch(() => setProfileLoading(false)),
+
+            // 关联风险接口
+            getDeviceRelationRiskLInfo({ ...params, dayNum }).then(result => {
+                if (result?.code === 1100) {
+                    setRelationRiskLInfo(result?.content || {});
+                }
+                setRelationLoading(false);
+            }).catch(() => setRelationLoading(false)),
+
+            // 地域离散风险接口
+            geoDispersion({...params, dayNum: dayNum2}).then(result => {
+                if (result?.code === 1100) {
+                    setGeoDispersionList(result?.content || []);
+                }
+                setGeoLoading(false);
+            }).catch(() => setGeoLoading(false)),
+            // 参数异常
+            getErrorList(params).then(result => {
+                if (result?.code === 1100) {
+                    setErrorList(result?.content || []);
+                }
+                setErrorLoading(false);
+            }).catch(() => setGeoLoading(false)),
+        ]);
+    }, [dayNum, dayNum2]);
+
+    const getrelationRiskLInfoDom = useCallback(() => {
+        return (
+            <div className="risk-query-page-content">
+                <div className="risk-query-page-content-item">
+                    <p className="risk-query-page-content-item-p">{t('关联特征统计表')}</p>
+                    <ColorLegend />
+                    <Table
+                        columns={getRelationColumns1(t, recordClick)}
+                        dataSource={relationRiskLInfo?.featureStatistic || []}
+                        pagination={false}
+                        scroll={relationRiskLInfo?.featureStatistic?.length > 9 ? { y: 530 } : false}
+                        loading={relationLoading} // 使用关联风险专属loading
+                        rowClassName={getRowClassName}
+                        className="break-word-table"
+                    />
+                </div>
+                <div className="risk-query-page-content-item">
+                    <p className="risk-query-page-content-item-p">{t('设备关联账号列表')}</p>
+                    <Table
+                        columns={getRelationColumns2(t)}
+                        dataSource={relationRiskLInfo?.deviceToken || []}
+                        pagination={false}
+                        scroll={relationRiskLInfo?.deviceToken?.length > 9 ? { y: 530 } : false}
+                        loading={relationLoading} // 使用关联风险专属loading
+                        className="break-word-table"
+                    />
+                </div>
+                <div className="risk-query-page-content-item">
+                    <p className="risk-query-page-content-item-p">{t('设备关联手机号列表')}</p>
+                    <Table
+                        columns={getRelationDeviceColumns3(t)}
+                        dataSource={relationRiskLInfo?.devicePhone || []}
+                        pagination={false}
+                        scroll={relationRiskLInfo?.devicePhone?.length > 9 ? { y: 530 } : false}
+                        loading={relationLoading} // 使用关联风险专属loading
+                        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={getRelationPhoneColumns4(t)}
+                        dataSource={relationRiskLInfo?.deviceIp || []}
+                        pagination={false}
+                        scroll={relationRiskLInfo?.deviceIp?.length > 9 ? { y: 530 } : false}
+                        loading={relationLoading} // 使用关联风险专属loading
+                        className="break-word-table"
+                    />
+                </div>
+            </div>
+        );
+    }, [t, relationRiskLInfo, relationLoading]);
+
+    const recordClick = useCallback(dayNum => {
+        setDayNum(dayNum);
+    }, []);
+
+    const geoDispersionDom = useCallback(() => {
+        return (
+            <div className="risk-query-page-content">
+                <div className="risk-query-page-content-item risk-query-page-content-special">
+                    <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={geoDispersionList?.geoDispersionStatistic || []}
+                            pagination={false}
+                            rowClassName={getRowClassName}
+                            scroll={geoDispersionList?.geoDispersionStatistic?.length > 9 ? { y: 530 } : false}
+                            loading={geoLoading} // 使用地域离散风险专属loading
+                            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={getDispersionCountryColumns(t)}
+                            dataSource={geoDispersionList?.deviceIpCountry || []}
+                            pagination={false}
+                            scroll={geoDispersionList?.deviceIpCountry?.length > 9 ? { y: 530 } : false}
+                            loading={geoLoading} // 使用地域离散风险专属loading
+                            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('设备关联IP省份列表')}</p>
+                        <Table
+                            columns={getDispersionColumns2(t)}
+                            dataSource={geoDispersionList?.deviceIpProvince || []}
+                            pagination={false}
+                            scroll={geoDispersionList?.deviceIpProvince?.length > 9 ? { y: 530 } : false}
+                            loading={geoLoading} // 使用地域离散风险专属loading
+                            className="break-word-table"
+                        />
+                    </div>
+                    <div className="risk-query-page-content-special-item">
+                        <p className="risk-query-page-content-item-p">{t('设备关联IP城市列表')}</p>
+                        <Table
+                            columns={getDispersionCityColumns(t)}
+                            dataSource={geoDispersionList?.deviceIpCity || []}
+                            pagination={false}
+                            scroll={geoDispersionList?.deviceIpCity?.length > 9 ? { y: 530 } : false}
+                            loading={geoLoading} // 使用地域离散风险专属loading
+                            className="break-word-table"
+                        />
+                    </div>
+                </div>
+            </div>
+        );
+
+    }, [geoLoading, t, geoDispersionList]);
+
+    useEffect(() => {
+        if (searchParams) {
+            doSearch(searchParams);
+            setInitialState(true);
+        } else {
+            setInitialState(false);
+        }
+    }, [searchParams, doSearch]);
+
+    return (
+        <div className="risk-query-page">
+            <div className="risk-query-page-top">
+                <div className="risk-query-page-top-item">
+                    <p className="risk-query-page-title">{t('基础属性')}</p>
+                    {
+                        initialState ? (
+                            <div style={{ marginTop: 20 }}>
+                                <Table
+                                    columns={getBaseInfoColumns(t)}
+                                    dataSource={baseInfoList}
+                                    pagination={false}
+                                    scroll={baseInfoList?.length > 9 ? { y: 530 } : false}
+                                    loading={baseInfoLoading} // 使用基础属性专属loading
+                                    className="break-word-table"
+                                />
+                            </div>
+                        ) : (
+                            <Empty description={t('暂无数据')} />
+                        )
+                    }
+                </div>
+                <div className="risk-query-page-top-item">
+                    <p className="risk-query-page-title" style={{marginBottom: -10}}>{t('画像风险')}</p>
+                    {
+                        initialState ? (
+                            <div>
+                                <ColorLegend />
+                                <Table
+                                    columns={profileDeviceColumns(t)}
+                                    dataSource={profileRiskList}
+                                    pagination={false}
+                                    scroll={profileRiskList?.length > 9 ? { y: 530 } : false}
+                                    rowClassName={getRowClassName}
+                                    loading={profileLoading} // 使用画像风险专属loading
+                                    className="break-word-table"
+                                />
+                            </div>
+                        ) : (
+                            <Empty description={t('暂无数据')} />
+                        )
+                    }
+                </div>
+            </div>
+            <div className="risk-query-page-middle">
+                <p className="risk-query-page-title">{t('关联风险')}</p>
+                {
+                    initialState ? getrelationRiskLInfoDom() : <Empty description={t('暂无数据')} />
+                }
+            </div>
+            <div className="risk-query-page-bottom">
+                <p className="risk-query-page-title">{t('地域离散风险')}</p>
+                {
+                    initialState ? geoDispersionDom() : <Empty description={t('暂无数据')} />
+                }
+            </div>
+            <div className="risk-query-page-error">
+                <p className="risk-query-page-title">{t('参数异常列表')}</p>
+                {
+                    initialState ? (
+                        <Table
+                            columns={getDisErrorColumns(t)}
+                            dataSource={errorList || []}
+                            pagination={false}
+                            scroll={errorList?.length > 9 ? { y: 530 } : false}
+                            loading={errorLoading} // 使用地域离散风险专属loading
+                            className="break-word-table"
+                        />
+                    )
+                        : <Empty description={t('暂无数据')} />
+                }
+            </div>
+        </div>
+    );
+};

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

@@ -0,0 +1,330 @@
+/* eslint-disable max-len */
+import React, { useState, useCallback, useEffect } from 'react';
+
+import { Table, Empty, Button } from 'antd';
+
+import { useLanguage } from '@/hooks';
+
+import {
+    profileColumns,
+    getRelationColumns1,
+    getRelationColumns2,
+    getDispersionColumns1,
+    getBaseInfoColumns,
+    getRowClassName,
+    getRelationPhoneColumns3,
+    getRelationPhoneColumns4,
+    getDispersionPhoneColumns2,
+    getDispersionPhoneColumns3,
+    getDispersionPhoneColumns4,
+} from '../configure';
+
+import {
+    getPhoneBaseInfoList,
+    getPhoneProfileRiskList,
+    onlineStatus,
+    getPhoneRelationRiskLInfo,
+    getPhoneGetDispersion,
+} from '@/services/twChannel';
+
+import ColorLegend from './ColorLegend';
+
+require('./index.less');
+
+export default props => {
+    const { searchParams } = props;
+    const { t } = useLanguage();
+
+    const [profileRiskList, setProfileRiskList] = useState([]); // 画像风险
+    const [baseInfoList, setBaseInfoList] = useState([]); // 基础属性
+    const [relationRiskLInfo, setRelationRiskLInfo] = useState(); // 关联风险
+    const [geoDispersion, setGeoDispersion] = useState([]); // 地域离散风险
+    const [initialState, setInitialState] = useState(false);
+    const [onlineInfo, setOnlineInfo] = useState();
+    const [intlOnlineState, setIntlOnlineState] = useState(false);
+    // 拆分每个接口独立的loading状态
+    const [baseInfoLoading, setBaseInfoLoading] = useState(false);
+    const [profileLoading, setProfileLoading] = useState(false);
+    const [relationLoading, setRelationLoading] = useState(false);
+    const [geoLoading, setGeoLoading] = useState(false);
+    const [onlineLoading, setOnlineLoading] = useState(false); // 在网状态查询专属loading
+    const [dayNum, setDayNum] = useState();
+    const [dayNum2, setDayNum2] = useState(1);
+
+    const doSearch = useCallback(async params => {
+        if (!params) {
+            return;
+        }
+        // 重置所有主查询loading状态为true
+        setBaseInfoLoading(true);
+        setProfileLoading(true);
+        setRelationLoading(true);
+        setGeoLoading(true);
+
+        // 并行请求但每个请求独立处理loading和数据
+        Promise.allSettled([
+            // 基础属性接口
+            getPhoneBaseInfoList(params).then(result => {
+                if (result?.code === 1100) {
+                    setBaseInfoList(result.content);
+                }
+                setBaseInfoLoading(false);
+            }).catch(() => setBaseInfoLoading(false)),
+
+            // 画像风险接口
+            getPhoneProfileRiskList(params).then(result => {
+                if (result?.code === 1100) {
+                    setProfileRiskList(result.content);
+                }
+                setProfileLoading(false);
+            }).catch(() => setProfileLoading(false)),
+
+            // 关联风险接口
+            getPhoneRelationRiskLInfo({ ...searchParams, dayNum }).then(result => {
+                if (result?.code === 1100) {
+                    setRelationRiskLInfo(result.content);
+                }
+                setRelationLoading(false);
+            }).catch(() => setRelationLoading(false)),
+
+            // 地域离散风险接口
+            getPhoneGetDispersion({...params, dayNum: dayNum2}).then(result => {
+                if (result?.code === 1100) {
+                    setGeoDispersion(result.content);
+                }
+                setGeoLoading(false);
+            }).catch(() => setGeoLoading(false)),
+        ]);
+    }, [dayNum, dayNum2, searchParams]);
+
+    const getOnline = useCallback(async () => {
+        if (!searchParams) {
+            return;
+        }
+        setOnlineLoading(true); // 开启在网状态查询loading
+        try {
+            const onlineResult = await onlineStatus(searchParams);
+            setIntlOnlineState(true);
+            if (onlineResult.code === 1100) {
+                setOnlineInfo(onlineResult?.content);
+            }
+        } catch (error) {
+            console.error('查询在网状态失败:', error);
+        } finally {
+            setOnlineLoading(false); // 无论成功失败都关闭loading
+        }
+    }, [searchParams]);
+
+    const onlineDom = useCallback(() => {
+        return (
+            <div className="risk-query-page-online">
+                <p className="risk-query-page-title">{t('在网状态')}</p>
+                <div className="risk-query-page-online-item">
+                    <Button
+                        type={'primary'}
+                        onClick={getOnline}
+                        disabled={!initialState}
+                        loading={onlineLoading} // 按钮添加loading状态
+                    >{t('查询')}
+                    </Button>
+                    {intlOnlineState && (
+                        <>
+                            <div>
+                                <span>{t('在网状态')}</span>
+                                <span className="risk-query-page-online-item-value">{onlineInfo?.onlineStatus || '-'}</span>
+                            </div>
+                            <div>
+                                <span>{t('在网状态查询时间')}</span>
+                                <span className="risk-query-page-online-item-value">{onlineInfo?.queryTime || '-'}</span>
+                            </div>
+                        </>
+                    )}
+                </div>
+            </div>
+        );
+    }, [getOnline, intlOnlineState, onlineInfo, initialState, t, onlineLoading]);
+
+    const recordClick = useCallback(dayNum => {
+        setDayNum(dayNum);
+    }, []);
+
+    const getrelationRiskLInfoDom = useCallback(() => {
+        return (
+            <div className="risk-query-page-content">
+                <div className="risk-query-page-content-item">
+                    <p className="risk-query-page-content-item-p">{t('关联特征统计表')}</p>
+                    <ColorLegend />
+                    <Table
+                        columns={getRelationColumns1(t, recordClick)}
+                        dataSource={relationRiskLInfo?.featureStatistic || []}
+                        pagination={false}
+                        rowClassName={getRowClassName}
+                        scroll={relationRiskLInfo?.featureStatistic?.length > 9 ? { y: 530 } : false}
+                        loading={relationLoading} // 使用关联风险专属loading
+                        className="break-word-table"
+                    />
+                </div>
+                <div className="risk-query-page-content-item">
+                    <p className="risk-query-page-content-item-p">{t('手机号关联设备列表')}</p>
+                    <Table
+                        columns={getRelationColumns2(t)}
+                        dataSource={relationRiskLInfo?.phoneDevice || []}
+                        pagination={false}
+                        scroll={relationRiskLInfo?.phoneDevice?.length > 9 ? { y: 530 } : false}
+                        loading={relationLoading} // 使用关联风险专属loading
+                        className="break-word-table"
+                    />
+                </div>
+                <div className="risk-query-page-content-item">
+                    <p className="risk-query-page-content-item-p">{t('手机号关联账号列表')}</p>
+                    <Table
+                        columns={getRelationPhoneColumns3(t)}
+                        dataSource={relationRiskLInfo?.iphoneToken || []}
+                        pagination={false}
+                        scroll={relationRiskLInfo?.iphoneToken?.length > 9 ? { y: 530 } : false}
+                        loading={relationLoading} // 使用关联风险专属loading
+                        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={getRelationPhoneColumns4(t)}
+                        dataSource={relationRiskLInfo?.phoneIp || []}
+                        pagination={false}
+                        scroll={relationRiskLInfo?.phoneIp?.length > 9 ? { y: 530 } : false}
+                        loading={relationLoading} // 使用关联风险专属loading
+                        className="break-word-table"
+                    />
+                </div>
+            </div>
+        );
+    }, [t, relationLoading, relationRiskLInfo, recordClick]);
+
+    const geoDispersionDom = useCallback(() => {
+        return (
+            <div className="risk-query-page-content">
+                <div className="risk-query-page-content-item risk-query-page-content-special">
+                    <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 || []}
+                            pagination={false}
+                            rowClassName={getRowClassName}
+                            scroll={geoDispersion?.geoDispersionStatistic?.length > 9 ? { y: 530 } : false}
+                            loading={geoLoading} // 使用地域离散风险专属loading
+                            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={getDispersionPhoneColumns2(t)}
+                            dataSource={geoDispersion?.phoneIpProvince || []}
+                            pagination={false}
+                            scroll={geoDispersion?.phoneIpProvince?.length > 9 ? { y: 530 } : false}
+                            loading={geoLoading} // 使用地域离散风险专属loading
+                            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={getDispersionPhoneColumns3(t)}
+                            dataSource={geoDispersion?.phoneReceiverProvince || []}
+                            pagination={false}
+                            scroll={geoDispersion?.phoneReceiverProvince?.length > 9 ? { y: 530 } : false}
+                            loading={geoLoading} // 使用地域离散风险专属loading
+                            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={getDispersionPhoneColumns4(t)}
+                            dataSource={geoDispersion?.phoneCounterProvince || []}
+                            pagination={false}
+                            scroll={geoDispersion?.phoneCounterProvince?.length > 9 ? { y: 530 } : false}
+                            loading={geoLoading} // 使用地域离散风险专属loading
+                            className="break-word-table"
+                        />
+                    </div>
+                </div>
+            </div>
+        );
+
+    }, [geoDispersion, geoLoading, t]);
+
+    useEffect(() => {
+        if (searchParams) {
+            doSearch(searchParams);
+            setInitialState(true);
+        } else {
+            setInitialState(false);
+        }
+    }, [searchParams, doSearch]);
+
+    return (
+        <div className="risk-query-page">
+            <div className="risk-query-page-top">
+                <div className="risk-query-page-top-item">
+                    <p className="risk-query-page-title">{t('基础属性')}</p>
+                    {
+                        initialState ? (
+                            <div style={{ marginTop: 35 }}>
+                                <Table
+                                    columns={getBaseInfoColumns(t)}
+                                    dataSource={baseInfoList}
+                                    pagination={false}
+                                    scroll={baseInfoList?.length > 9 ? { y: 530 } : false}
+                                    loading={baseInfoLoading} // 使用基础属性专属loading
+                                    className="break-word-table"
+                                />
+                            </div>
+                        ) : (
+                            <Empty description={t('暂无数据')} />
+                        )
+                    }
+                </div>
+                <div className="risk-query-page-top-item">
+                    <p className="risk-query-page-title">{t('画像风险')}</p>
+                    {
+                        initialState ? (
+                            <div>
+                                <ColorLegend />
+                                <Table
+                                    columns={profileColumns(t)}
+                                    dataSource={profileRiskList}
+                                    rowClassName={getRowClassName}
+                                    pagination={false}
+                                    scroll={profileRiskList?.length > 9 ? { y: 530 } : false}
+                                    loading={profileLoading} // 使用画像风险专属loading
+                                    className="break-word-table"
+                                />
+                            </div>
+                        ) : (
+                            <Empty description={t('暂无数据')} />
+                        )
+                    }
+                </div>
+            </div>
+            {onlineDom()}
+            <div className="risk-query-page-middle">
+                <p className="risk-query-page-title">{t('关联风险')}</p>
+                {
+                    initialState ? getrelationRiskLInfoDom() : <Empty description={t('暂无数据')} />
+                }
+            </div>
+            <div className="risk-query-page-bottom">
+                <p className="risk-query-page-title">{t('地域离散风险')}</p>
+                {
+                    initialState ? geoDispersionDom() : <Empty description={t('暂无数据')} />
+                }
+            </div>
+        </div>
+    );
+};