admin2 1.0.0

package/src/pages/overview/index.jsx

@@ -0,0 +1,841 @@
+/* eslint-disable max-len */
+/**
+ * 天净 天网 风险账号中心
+ */
+
+import React, { Component } from 'react';
+import { connect } from 'umi';
+import moment from 'moment';
+import lodash from 'lodash';
+import { Row, Col, Tooltip, message, Select } from 'antd';
+import clsx from 'clsx';
+
+import {isPrivate, Storage, exportFile} from '@/utils/utils';
+import GlobalFilterListener from '@/components/GlobalFilterListener';
+import HeaderFilter from '@/components/HeaderFilter';
+import SMLineChart from '@/components/SMLineChart';
+import {STORAGE_LIST_NAME} from '@/contants';
+import {queryRiskLevelTrend} from '@/services/trend';
+
+import NewUserGuide from './components/NewUserGuide';
+import UserInfoBox from './components/UserInfoBox';
+import CarouselMap from './components/CarouselMap';
+import EmptyLineChart from './components/EmptyLineChart';
+import DataCard from './components/DataCard';
+import IntroduceBox from './components/IntroduceBox';
+import { serviceIdMap } from './components/IntroduceBox/constants.js';
+import riskAccount from './img/risk-account.svg';
+import riskAudio from './img/risk-audio.svg';
+import riskDevice from './img/risk-device.svg';
+import riskEvent from './img/risk-event.svg';
+import riskPic from './img/risk-pic.svg';
+import riskText from './img/risk-text.svg';
+import riskVideo from './img/risk-video.svg';
+import styles from './index.less';
+import withIntlComponents from '@/hoc/withIntlComponents';
+import {SMAlert, SMIcon} from '@/components';
+import SMSearchForm from '@/components/SMSearchForm';
+import ElementDateRangeTime from '@/components/ElementDateRangeTime'; // queryRiskLevelTrend
+
+
+const Option = Select;
+
+const serviceObj = {
+    POST_TEXT: '文本',
+    POST_IMG: '图片',
+    POST_AUDIO: '音频文件',
+    POST_AUDIOSTREAM: '音频流',
+    POST_VIDEO: '视频文件',
+    POST_VIDEOSTREAM: '视频流',
+};
+
+const specialServiceList = ['POST_AUDIO', 'POST_AUDIOSTREAM', 'POST_VIDEO', 'POST_VIDEOSTREAM'];
+
+const specialServiceId = {
+    POST_AUDIO: [
+        {
+            name: '音频文件',
+            value: 'POST_AUDIO',
+        },
+        {
+            name: '音频片段',
+            value: 'POST_AUDIOCLIPS',
+        },
+    ],
+    POST_AUDIOSTREAM: [
+        {
+            name: '音频流',
+            value: 'POST_AUDIOSTREAM',
+        },
+        {
+            name: '音频片段',
+            value: 'POST_AUDIOSTREAMCLIPS',
+        },
+    ],
+    POST_VIDEO: [
+        {
+            name: '视频文件',
+            value: 'POST_VIDEO',
+        },
+        {
+            name: '截帧图片',
+            value: 'POST_VIDEO_IMG',
+        },
+        {
+            name: '音频片段',
+            value: 'POST_VIDEO_AUDIO',
+        },
+    ],
+    POST_VIDEOSTREAM: [
+        {
+            name: '视频流',
+            value: 'POST_VIDEOSTREAM',
+        },
+        {
+            name: '截帧图片',
+            value: 'POST_VIDEOSTREAM_IMG',
+        },
+        {
+            name: '音频片段',
+            value: 'POST_VIDEOSTREAM_AUDIO',
+        },
+    ],
+};
+
+
+class Overview extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            currentOrganization: '',
+            listLoading: false,
+            newServiceMap: [],
+            appId: 'all',
+            serviceId: '', // 默认开通的应用
+            channelEventList: [],
+            queryParams: {
+                startDay: moment().startOf('day'),
+                endDay: moment().endOf('day'),
+            },
+            twLineData: {
+                title: '风险趋势',
+                xname: '',
+                yname: '数量（次）',
+                xAxisData: [],
+                configData: [
+                    {
+                        name: '设备',
+                        data: [],
+                        color: 'green',
+                        selected: true,
+                    },
+                    {
+                        name: '账号',
+                        data: [],
+                        color: 'blue',
+                        selected: true,
+                    },
+                    {
+                        name: '事件',
+                        data: [],
+                        color: 'orange',
+                        selected: true,
+                    },
+                ],
+            },
+            tjLineData: {
+                title: '',
+                xname: '',
+                yname: '数量（次）',
+                xAxisData: [],
+                configData: [
+                    {
+                        name: '总数',
+                        data: [],
+                        color: 'blue',
+                        selected: true,
+                    },
+                    {
+                        name: '通过数',
+                        data: [],
+                        color: 'green',
+                        selected: true,
+                    },
+                    {
+                        name: '拒绝数',
+                        data: [],
+                        color: 'orange',
+                        selected: true,
+                    },
+                    {
+                        name: '审核数',
+                        data: [],
+                        color: 'yellow',
+                        selected: true,
+                    },
+                ],
+            },
+            twCardData: [
+                {
+                    name: '累计风险设备（万个）',
+                    path: '/new/tianwang/device/trend',
+                    imgUrl: riskDevice,
+                    count: 0.0,
+                },
+                {
+                    name: '累计风险账号（万个）',
+                    path: '/new/tianwang/accountFraud/trend',
+                    imgUrl: riskAccount,
+                    count: 0.0,
+                },
+                {
+                    name: '累计风险事件（万个）',
+                    path: '/new/tianwang/event/trend',
+                    imgUrl: riskEvent,
+                    count: 0.0,
+                },
+            ],
+            tjCardData: [
+                {
+                    name: '累计风险文本（万个）',
+                    path: '/new/tianjing/text/trend/text',
+                    imgUrl: riskText,
+                    count: 0.0,
+                },
+                {
+                    name: '累计风险图片（万个）',
+                    path: '/new/tianjing/image/trend/image',
+                    imgUrl: riskPic,
+                    count: 0.0,
+                },
+                {
+                    name: '累计识别音频（万小时）',
+                    path: '/new/tianjing/audio/trend/postAudio',
+                    imgUrl: riskAudio,
+                    count: 0.0,
+                },
+                {
+                    name: '累计识别视频（万小时）',
+                    path: '/new/tianjing/video/trend/video',
+                    imgUrl: riskVideo,
+                    count: 0.0,
+                },
+            ],
+            channelsEventData: {
+                type: 'descriptionCascader',
+                name: 'channels',
+                isInlineBlock: true,
+                data: {
+                    selectData: {
+                        optionData: [],
+                        title: '渠道',
+                        defaultValue: [],
+                        isAddAll: false,
+                        isAddEle: true,
+                        originValueName: 'label',
+                        valueName: 'label_value',
+                        labelName: 'label_name',
+                        childrenName: 'son',
+                        popupClassName: 'description-cascader',
+                        isChannel: true,
+                        maxTagCount: 1,
+                    },
+                },
+            },
+            appIdData: {
+                type: 'select',
+                name: 'appId',
+                data: {
+                    selectData: {
+                        optionData: [],
+                        title: '应用',
+                        labelId: '选择应用',
+                        defaultValue: 'all',
+                    },
+                },
+            },
+            resetDefaultValue: false,
+            activeServiceId: '',
+            tjListLoading: false,
+        };
+    }
+    componentDidMount() {
+        this.getServiceStatus();
+        this.doSearch();
+        // 初始化默认 serviceId（避免在 render 中 setState 导致重复调用 getTjOverViewData）
+        const tjOpenList = this.getTjOpenList();
+        if (!this.state.serviceId && tjOpenList && tjOpenList.length) {
+            const defaultService = tjOpenList.find(i => i.isSelect) || tjOpenList[0];
+            if (defaultService) {
+                this.setState({ serviceId: defaultService.id, activeServiceId: defaultService.id }, () => {
+                    this.getTjOverViewData();
+                });
+            }
+        }
+    }
+
+    //  获取天净天网服务开通状态
+    getOpenStatus = () => {
+        const { currentUser } = this.props;
+        const { serviceIds } = currentUser;
+        let twOpenStatus = false;
+        let tjOpenStatus = false;
+        if (
+            serviceIds.includes('DEVICE_PROFILE')
+             || serviceIds.includes('ACCOUNT_FRAUD')
+             || serviceIds.includes('POST_EVENT')
+             || serviceIds.includes('ACCOUNT_REGISTER')
+             || serviceIds.includes('ACCOUNT_LOGIN')
+             || serviceIds.includes('ANTI_ROBOT_MARKETING')
+             || serviceIds.includes('ANTI_ROBOT_SMS')
+
+        ) {
+            twOpenStatus = true;
+        }
+        if (
+            serviceIds.includes('POST_TEXT')
+             || serviceIds.includes('POST_IMG')
+             || serviceIds.includes('POST_AUDIO')
+             || serviceIds.includes('POST_AUDIOSTREAM') // 音频流
+             || serviceIds.includes('POST_VIDEO')
+              || serviceIds.includes('POST_VIDEOSTREAM') // 视频流
+
+        ) {
+            tjOpenStatus = true;
+        }
+        return {
+            twOpenStatus,
+            tjOpenStatus,
+        };
+    };
+
+    getExport = () => {
+        const {t} = this.props;
+        return {
+            type: 'export',
+            name: '导出',
+            tooltip: t('下载当前条件下的趋势数据'),
+        };
+    };
+
+    // 获取天净开通
+    getTjOpenList = () => {
+        const { currentUser, t } = this.props;
+        const { serviceIds } = currentUser;
+        const { serviceId: currentServiceId } = this.state;
+
+        // 定义服务顺序
+        const serviceOrder = [
+            'POST_TEXT', // 文本
+            'POST_IMG', // 图片
+            'POST_AUDIO', // 音频文件
+            'POST_AUDIOSTREAM', // 音频流
+            'POST_VIDEO', // 视频文件
+            'POST_VIDEOSTREAM', // 视频流
+        ];
+
+        const list = [];
+        let hasSetSelect = false;
+
+        // 按照指定顺序处理服务
+        lodash.forEach(serviceOrder, serviceId => {
+            if (serviceIds.includes(serviceId) && serviceObj[serviceId]) {
+                const obj = {
+                    id: serviceId,
+                    name: t(serviceObj[serviceId]),
+                };
+                // 如果当前没有选中的服务，或者当前服务就是选中的服务
+                if (!currentServiceId || currentServiceId === serviceId) {
+                    if (!hasSetSelect) {
+                        obj.isSelect = true;
+                        hasSetSelect = true;
+                    }
+                }
+                list.push(obj);
+            }
+        });
+        return list;
+    };
+
+    getChannelEventList = async () => {
+        const { dispatch } = this.props;
+        const channelsEventData = lodash.cloneDeep(this.state.channelsEventData);
+        if (dispatch) {
+            const { serviceId, activeServiceId } = this.state;
+            const channelEventList = await dispatch({
+                type: 'base/fetchChannelEventList',
+                payload: {
+                    organization: this.state.currentOrganization,
+                    serviceId: activeServiceId || serviceId,
+                },
+            });
+            const channelOptionData = [];
+            channelEventList.forEach(item => {
+                channelOptionData.push({
+                    label_value: item.channel,
+                    label_name: item.displayName,
+                });
+            });
+            channelsEventData.data.selectData.optionData = channelOptionData || [];
+            this.setState({
+                channelsEventData,
+            });
+        }
+    };
+
+    // 获取当前服务状态
+    getServiceStatus = async () => {
+        const { dispatch, currentUser } = this.props;
+        const serviceData = await dispatch({
+            type: 'user/fetchGetServiceStatus',
+            payload: {
+                organization: currentUser.organization,
+                serviceId: serviceIdMap,
+            },
+        });
+        this.setState({
+            currentOrganization: currentUser.organization,
+        });
+        let newServiceMap = [];
+        if (serviceData && serviceData[0]
+            && (serviceData[0].status || serviceData[0].status === '')
+        ) {
+            serviceData.map(item => newServiceMap.push({
+                [item.serviceId]: item.status,
+            }));
+        }
+        this.setState({
+            newServiceMap: newServiceMap,
+        });
+    };
+
+    // 发送邮件
+    applyOpenService = async serviceId => {
+        const { dispatch, t } = this.props;
+        const { currentUser } = this.props;
+        const { currentOrganization } = this.state;
+        const {code, message: Message} = await dispatch({
+            type: 'user/fetchApplyOpenService',
+            payload: {
+                organization: currentOrganization,
+                serviceId: serviceId,
+            },
+        });
+        if (code === 1100) {
+            message.success(t('申请成功'));
+        } else {
+            message.error(Message);
+        }
+        this.getServiceStatus();
+    };
+
+    globalFilterChange = obj => {
+        const { orgChange, currentGlobalFilter } = obj;
+        const { organization } = currentGlobalFilter;
+        this.setState(
+            {
+                currentOrganization: organization,
+                listLoading: true,
+            },
+            async () => {
+                if (orgChange) {
+                    // 重置筛选并为新组织初始化默认 serviceId（如果有）后再查询，避免接口重复或无效请求
+                    const resetState = {
+                        appId: 'all',
+                        serviceId: '', // 先清空服务ID
+                        channelEventList: [], // 清空渠道列表
+                        resetDefaultValue: !this.state.resetDefaultValue,
+                        queryParams: {...this.state.queryParams, channels: []},
+                    };
+                    // 先设置重置状态，再尝试从可用服务列表里选一个默认值
+                    this.setState(resetState, () => {
+                        const tjOpenList = this.getTjOpenList();
+                        if (tjOpenList && tjOpenList.length) {
+                            const defaultService = tjOpenList.find(i => i.isSelect) || tjOpenList[0];
+                            if (defaultService) {
+                                this.setState({ serviceId: defaultService.id, activeServiceId: defaultService.id }, () => {
+                                    this.doSearch();
+                                });
+                                return;
+                            }
+                        }
+                        // 如果没有可选服务，直接执行查询
+                        this.doSearch();
+                    });
+                } else {
+                    this.setState({
+                        listLoading: false,
+                    });
+                }
+            }
+        );
+    };
+
+    doSearch = () => {
+        this.getOverViewContents();
+        this.getTjOverViewData();
+    };
+
+    // 获取概览页统计数据
+    getOverViewContents = async () => {
+        const { dispatch } = this.props;
+        const { currentOrganization } = this.state;
+        const contents = await dispatch({
+            type: 'user/getOverViewContents',
+            payload: {
+                organization: currentOrganization,
+            },
+        });
+        this.setState({
+            listLoading: false,
+        });
+        this.formatData(contents);
+
+        // 数据加载完成后，如果有选中的服务，则获取渠道事件列表
+        const { serviceId } = this.state;
+        if (serviceId) {
+            this.getChannelEventList();
+        }
+    };
+
+    getSearchParams = () => {
+        const {queryParams, serviceId, currentOrganization, activeServiceId} = this.state;
+        const formatString = 'YYYY-MM-DD';
+        const newParams = {
+            ...queryParams,
+            serviceId: activeServiceId || serviceId,
+            organization: currentOrganization,
+            startDay: moment(queryParams.startDay).format(formatString),
+            endDay: moment(queryParams.endDay).format(formatString),
+        };
+        if (newParams.appId === 'all') {
+            delete newParams.appId;
+        }
+        // 如果 channels 未定义、为空数组，或仅包含空值/空数组，则移除该字段
+        const channels = newParams.channels;
+        const isChannelsEmpty = !channels || (Array.isArray(channels) && channels.length === 0) || (
+            Array.isArray(channels) && channels.length > 0 && channels.every(ch => !ch || (Array.isArray(ch) && ch.length === 0))
+        );
+        if (isChannelsEmpty) {
+            delete newParams.channels;
+        } else {
+            newParams.channels = lodash.map(newParams.channels, item => item?.[0]);
+        }
+        return newParams;
+    };
+
+    // 获取天净 概览数据
+    getTjOverViewData = async () => {
+        const {serviceId, tjLineData} = this.state;
+        this.setState({tjListLoading: true});
+        const newParams = this.getSearchParams();
+        if (serviceId && newParams.organization) {
+            const result = await queryRiskLevelTrend(newParams);
+            if (result.code === 1100) {
+                const trendData = result?.contents?.trend || [];
+                let newTjLineData = lodash.cloneDeep(tjLineData);
+                // 设置 天净的折线图数据
+                newTjLineData.xAxisData = trendData?.x_axis;
+                newTjLineData.configData[0].data = trendData?.total;
+                newTjLineData.configData[1].data = trendData?.pass;
+                newTjLineData.configData[2].data = trendData?.reject;
+                newTjLineData.configData[3].data = trendData?.review;
+                this.setState({tjLineData: newTjLineData, tjListLoading: false});
+            }
+        }
+    };
+
+    getSpecialServiceDom = () => {
+        const {serviceId, activeServiceId} = this.state;
+        const {t} = this.props;
+        if (specialServiceId[serviceId]) {
+            return (
+                <div className={styles['tj-special']}>
+                    {specialServiceId[serviceId].map(item => (
+                        <div
+                            className={clsx(styles['tj-special-item'], item.value === activeServiceId ? styles['tj-special-item-active'] : '')}
+                            key={item.value}
+                            onClick={() => this.changeServiceId(serviceId, item.value)}
+                        >
+                            {t(item.name)}
+                        </div>
+                    ))}
+                </div>
+            );
+        }
+    };
+
+    changeQueryParams = (name, value) => {
+        const {queryParams} = this.state;
+        queryParams[name] = value;
+        this.setState({
+            queryParams,
+        }, () => this.getTjOverViewData());
+    };
+
+    // 处理数据
+    formatData = contents => {
+        const { tjLineData, twLineData, tjCardData, twCardData } = this.state;
+        const { total = {}, tendency = {} } = contents;
+
+        // 设置统计数量数据
+
+        let newTjCardData = lodash.cloneDeep(tjCardData);
+        let newTwCardData = lodash.cloneDeep(twCardData);
+        newTwCardData[0].count = total.RISK_DEVICE || 0.0;
+        newTwCardData[1].count = total.RISK_TOKEN || 0.0;
+        newTwCardData[2].count = total.POST_EVENT || 0.0;
+        newTjCardData[0].count = total.POST_TEXT || 0.0;
+        newTjCardData[1].count = total.POST_IMG || 0.0;
+        newTjCardData[2].count = total.POST_AUDIO || 0.0;
+        newTjCardData[3].count = total.POST_VIDEO || 0.0;
+
+        // 设置折线图数据
+        const {
+            x_axis = [],
+            x_axis_other = [],
+            POST_TEXT = [],
+            POST_IMG = [],
+            POST_EVENT = [],
+            POST_VIDEO = [],
+            POST_VIDEOSTREAM = [],
+            POST_AUDIO = [],
+            RISK_DEVICE = [],
+            RISK_TOKEN = [],
+        } = tendency;
+        // let newTjLineData = lodash.cloneDeep(tjLineData);
+        let newTwLineData = lodash.cloneDeep(twLineData);
+
+        // 设置 天网的折线图数据
+        newTwLineData.xAxisData = x_axis_other;
+        newTwLineData.configData[0].data = RISK_DEVICE;
+        newTwLineData.configData[1].data = RISK_TOKEN;
+        newTwLineData.configData[2].data = POST_EVENT;
+        // 设置 天净的折线图数据
+        // newTjLineData.xAxisData = x_axis;
+        // newTjLineData.configData[0].data = POST_TEXT;
+        // newTjLineData.configData[1].data = POST_IMG;
+        // newTjLineData.configData[2].data = POST_AUDIO;
+        // newTjLineData.configData[3].data = POST_VIDEO;
+        this.setState({
+            twLineData: newTwLineData,
+            // tjLineData: newTjLineData,
+            twCardData: newTwCardData,
+            tjCardData: newTjCardData,
+        });
+    };
+
+    exportData = callback => {
+
+        const { t } = this.props;
+        const { serviceId, activeServiceId } = this.state;
+        let newSearchParams = this.getSearchParams();
+        newSearchParams.overview = true;
+        const titleMap = {
+            'POST_TEXT': '文本趋势分析',
+            'POST_IMG': '图片趋势分析',
+            'POST_AUDIO': '音频文件趋势分析',
+            'POST_AUDIOCLIPS': '音频片段趋势分析',
+            'POST_AUDIOSTREAM': '音频流趋势分析',
+            'POST_AUDIOSTREAMCLIPS': '音频流片段趋势分析',
+            'POST_VIDEO': '视频文件趋势分析',
+            'POST_VIDEO_IMG': '视频文件截帧图片趋势分析',
+            'POST_VIDEO_AUDIO': '视频文件音频片段趋势分析',
+            'POST_VIDEOSTREAM': '视频流趋势分析',
+            'POST_VIDEOSTREAM_IMG': '视频流截帧图片趋势分析',
+            'POST_VIDEOSTREAM_AUDIO': '视频流音频片段趋势分析',
+        };
+
+        let downloadTitle = t(titleMap[activeServiceId || serviceId]);
+        let downloadUrl = '/webapi/statisticTendency/download';
+        let dateRangeStr = `${newSearchParams.startDay}_${newSearchParams.endDay}`;
+        let title = `天净-${downloadTitle}-${dateRangeStr}-统计数据表.csv`;
+
+        exportFile(downloadUrl, title, newSearchParams).then(() => {
+            callback && callback();
+        });
+    };
+
+    getTjFilterDom = () => {
+        const { channelsEventData, resetDefaultValue, appIdData, queryParams } = this.state;
+        const { t } = this.props;
+        let sm_appId_list = Storage.get(STORAGE_LIST_NAME.APPID_LIST) || [];
+        const newAppIdData = lodash.cloneDeep(appIdData);
+        newAppIdData.data.selectData.optionData = sm_appId_list
+            .map(item => ({
+                name: item.appName,
+                value: item.appId,
+            }));
+        return (
+            <div className={styles['tj-dom']}>
+                <div className={styles['tj-dom-filter']}>
+                    <p className={styles['tj-dom-filter-title']}>{t('风险趋势')}</p>
+                    <div className={styles['tj-dom-filter-content']}>
+                        <div className={styles['tj-dom-filter-content-time']}>
+                            <ElementDateRangeTime
+                                value={[queryParams.startDay, queryParams.endDay]}
+                                onChange={dates => {
+                                    queryParams.startDay = dates[0];
+                                    queryParams.endDay = dates[1];
+                                    this.setState({
+                                        queryParams,
+                                    }, () => this.getTjOverViewData());
+                                }}
+                                // showTime
+                                allowClear
+                                isRangs
+                            />
+                        </div>
+                        <div className={styles['tj-dom-filter-content-item']}>
+                            <SMSearchForm
+                                formData={[newAppIdData, channelsEventData]}
+                                onChange={(name, value) => {
+                                    this.changeQueryParams(name, value);
+                                }}
+                                resetCount={resetDefaultValue}
+                                // exportData={callback => this.exportData(callback)}
+                            />
+                        </div>
+                    </div>
+                </div>
+                <div className={styles['tj-dom-export']}>
+                    <SMIcon
+                        type="icon-xiazai4"
+                        onClick={() => this.exportData()}
+                    />
+                </div>
+            </div>
+        );
+    };
+
+    changeServiceId = (serviceId, special) => {
+        this.setState({
+            serviceId,
+            activeServiceId: special || serviceId,
+            queryParams: {...this.state.queryParams, channels: []},
+            resetDefaultValue: !this.state.resetDefaultValue,
+
+        }, () => {
+            if (!this.state.listLoading) {
+                this.getChannelEventList();
+                this.getTjOverViewData();
+            }
+        });
+    };
+
+    getTjServiceDOm = () => {
+        const tjOpenList = this.getTjOpenList();
+        return (
+            <div className={styles['tj-dom-service']}>
+                {tjOpenList.map(item => (
+                    <Tooltip key={item.id} title={item.name}>
+                        <p
+                            value={item.id}
+                            className={clsx(styles['tj-dom-service-item'], item.isSelect && styles['tj-dom-service-item-select'])}
+                            onClick={() => this.changeServiceId(item.id)}
+                        >
+                            {item.name}
+                        </p>
+                    </Tooltip>
+
+                ))}
+            </div>
+        );
+    };
+
+    render() {
+        const {route, currentUser, t} = this.props;
+        const { listLoading, twLineData, tjLineData, twCardData, tjCardData, newServiceMap, serviceId, tjListLoading } = this.state;
+        const isNewUser = currentUser.userType === 'informal';
+        const { twOpenStatus, tjOpenStatus } = this.getOpenStatus();
+        const privateTwLineData = lodash.cloneDeep(twLineData);
+        privateTwLineData.configData = [twLineData.configData[2]];
+        let {
+            isDemonstration,
+            isTrial,
+            trialCount = {},
+            environment,
+        } = Storage.get(STORAGE_LIST_NAME.SM_SAAS_INFO) || {};
+
+        const isNa = isTrial === 1 && environment === 'web-na';
+        return (
+            <div>
+                {
+                    isNa ? (
+                        <SMAlert
+                            type={trialCount.usageStage === 0 ? 'succeed' : 'warning'}
+                            serviceId={'overview'}
+                            usageStage={trialCount.usageStage}
+                        />
+                    )
+
+                        : null
+                }
+                <GlobalFilterListener onChange={this.globalFilterChange} />
+                <Row gutter={24}>
+                    <Col span={17}>
+                        {
+                            !isNa ? (
+                                <>
+                                    <NewUserGuide isNewUser={isNewUser} />
+                                    <HeaderFilter route={route} title={t('数据风险')} />
+                                    <DataCard title={t('业务风险')} cardData={isPrivate() ? [twCardData[1]] : twCardData} />
+                                    {twOpenStatus && !isNa ? (
+                                        <SMLineChart data={isPrivate() ? privateTwLineData : twLineData} loading={listLoading} />
+                                    ) : (
+                                        <EmptyLineChart product="tw" title={t('风险趋势')} />
+                                    )}
+                                </>
+                            )
+                                : <NewUserGuide isNewUser={isNewUser} />
+                        }
+
+                        <div style={{ marginTop: '20px' }}>
+                            <DataCard title={t('内容风险')} cardData={tjCardData} isNa={isNa} />
+                        </div>
+                        {tjOpenStatus ? (
+                            <div className={styles['tj-content']}>
+                                {this.getTjFilterDom()}
+                                <div className={styles['tj-container']} style={specialServiceList.includes(serviceId) ? {height: 400} : {height: 360}}>
+                                    {this.getTjServiceDOm()}
+                                    <div style={{width: 'calc(100% - 50px)'}}>
+                                        {this.getSpecialServiceDom()}
+                                        <div>
+                                            <SMLineChart data={tjLineData} loading={tjListLoading} />
+                                        </div>
+                                    </div>
+                                </div>
+
+                            </div>
+                        ) : (
+                            <EmptyLineChart product="tj" title={t('风险趋势')} />
+                        )}
+                        {
+                            !isPrivate() && (
+                                <IntroduceBox
+                                    isNewUser={isNewUser}
+                                    newServiceMap={newServiceMap}
+                                    applyOpenService={this.applyOpenService}
+                                    isNa={isNa}
+                                />
+                            )
+                        }
+                    </Col>
+                    <Col span={7}>
+                        <UserInfoBox isDemonstration={isDemonstration} />
+                        <div className={styles['carousel-map']}>
+                            {
+                                !isPrivate() && !isDemonstration && <CarouselMap />
+                            }
+                        </div>
+                    </Col>
+                </Row>
+            </div>
+        );
+    }
+}
+
+export default connect(({ user }) => ({
+    currentUser: user.currentUser,
+    message: user.message,
+}))(withIntlComponents(Overview));