admin2 1.0.0

package/src/pages/pageComponents/historyPage/ChannelList/index.jsx

@@ -0,0 +1,1340 @@
+/* eslint-disable eqeqeq */
+import React, { Component } from 'react';
+import { connect } from 'umi';
+import moment from 'moment';
+import lodash from 'lodash';
+import { SMTable } from 'sm-antd';
+import { Tooltip, message, Modal } from 'antd';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+
+import {AUTH_FUNCTION, tableText} from '@/contants';
+import { getAuthFunction } from '@/utils/AuthorityManage';
+import GlobalFilterListener from '@/components/GlobalFilterListener';
+import SMText from '@/components/SMText';
+import SMAudio from '@/components/SMAudio';
+import SMSearchForm from '@/components/SMSearchForm';
+import TotalCount from '@/components/TotalCount';
+import {
+    formatSearchParams,
+    exportFile,
+    getUrlParams,
+    backTop,
+    getValue,
+} from '@/utils/utils';
+import SMRiskLevel from '@/components/SMRiskLevel';
+import { PAGE_SIZE } from '@/contants/pageSize';
+import withIntlComponents from '@/hoc/withIntlComponents';
+import {formatUs} from '@/utils/helpers';
+
+import SMDetailDrawer from '../components/HistoryDetailDrawer';
+import AddListModal from '../components/AddListModal';
+
+import styles from './index.less';
+import { TwChannelCopy } from '../constants';
+
+
+class History extends Component {
+    constructor(props) {
+        super(props);
+        const {t} = props;
+        this.state = {
+            defaultRangeTimeData: {
+                type: 'datePicker',
+                name: 'time',
+                data: {
+                    dateSelectArr: [],
+                    dateFormat: 'YYYY-MM-DD HH:mm:ss',
+                    showTime: true,
+                },
+            },
+            defaultChannelEventData: {
+                type: 'select',
+                name: 'channelEvent',
+                data: {
+                    selectData: {
+                        optionData: [],
+                        title: t('渠道'),
+                        labelId: 'channelEvent',
+                        isAddAll: true,
+                        defaultValue: 'all',
+                    },
+                },
+            },
+            defaultRiskLevelData: {
+                type: 'cascader',
+                name: 'riskLevel',
+                data: {
+                    selectData: {
+                        optionData: [],
+                        title: t('识别结果'),
+                        labelId: 'riskLevel',
+                        isAddAll: true,
+                        defaultValue: ['all'],
+                    },
+                },
+            },
+            defaultRiskTypeData: {
+                type: 'select',
+                name: 'riskType',
+                data: {
+                    selectData: {
+                        optionData: [],
+                        title: t('风险类型'),
+                        labelId: 'riskType',
+                        isAddAll: true,
+                        defaultValue: 'all',
+                    },
+                },
+            },
+            // 天网渠道
+            defaultAppChannelData: {
+                type: 'select',
+                name: 'appUtm',
+                data: {
+                    placeholder: t('请选择'),
+                    selectData: {
+                        optionData: [],
+                        title: t('渠道'),
+                        labelId: 'appUtm',
+                        isAddAll: true,
+                        defaultValue: 'all',
+                    },
+                },
+            },
+            defaultLabelSearchData: {
+                type: 'labelSearch',
+                name: 'labelSearch',
+                data: {
+                    placeholder: t('请输入搜索内容'),
+                    optionData: [
+                        {
+                            value: 'requestId',
+                            name: t('流水号'),
+                        },
+                    ],
+                },
+            },
+            defaultExportButtonData: {
+                type: 'button',
+                name: 'exportHistory',
+                data: {
+                    title: t('历史数据导出'),
+                },
+            },
+            queryParams: {
+                startTime: Number(moment().startOf('day').format('x')),
+                endTime: Number(moment().endOf('day').format('x')),
+            },
+            channelEvent: 'all', // 当前渠道事件拼接的字符串
+            tableDataSource: [],
+            tableColumns: [],
+            detailData: {}, // 当前详情数据
+            detailVisible: false,
+            detailIndex: 0, // 当前详情数据的index
+            listLoading: true,
+            listData: [], // 历史记录列表数据
+            listTotalCount: 0,
+            isFirstLoading: true,
+            currentPage: 1,
+            pageSize: 20,
+            pageSizeOptions: PAGE_SIZE,
+            channelEventList: [],
+            eventIdMap: {},
+            channelMap: {},
+            riskTypeMap: {}, // 用来对应riskType的 value 和name
+            currentGlobalFilter: {
+                organization: '',
+                appId: '',
+                clusterId: '',
+            },
+            riskLevelMap: {}, // 识别结果
+            verifyTypeMap: {}, // 二次验证下的验证方式
+            exportTaskVisible: false, // 控制导出历史任务弹窗的显隐
+            labelList: [], // 一级标签
+            currentData: {}, // 当前数据
+            currentDataIndex: 0, // 当前数据index
+            tokenIdBlackList: [], // 账号黑名单列表
+            ignoreList: [], // 忽略词名单
+            sensitiveList: [], // 敏感词名单
+            currentListData: [], // 当前选择名单列表
+            listModalVisible: false, // 展示选择名单弹窗
+            currentListValue: '', // 当前要加名单的值
+            retainDisplayType: 'proportion', // 留存页面  展示类型 proportion、count
+            hitList: [],
+        };
+    }
+
+    UNSAFE_componentWillMount() {
+        const { stateConfig } = this.props;
+        if (stateConfig) {
+            let { tableColumns } = stateConfig;
+            if (tableColumns) {
+                tableColumns.forEach(item => {
+                    switch (item.type) {
+                        case 'time':
+                            item.render = this.timeRender;
+                            break;
+                        case 'text':
+                            item.render = this.textRender;
+                            break;
+                        case 'riskLevel':
+                            item.render = this.riskLevelRender;
+                            break;
+                        case 'detail':
+                            item.render = this.detailRender;
+                            break;
+                        case 'highLight':
+                            item.render = this.highLightRender;
+                            break;
+                        case 'audio':
+                            item.render = this.audioRender;
+                            break;
+                        case 'detailAndAudio':
+                            item.render = this.detailAndAudioRender;
+                            break;
+                    }
+                });
+            }
+            this.setState(stateConfig, () => {
+                this.setDefaultSearchParams();
+            });
+        }
+    }
+
+
+    componentDidMount() {
+
+        window.addEventListener('keydown', this.changeDetailData);
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('keydown', this.changeDetailData);
+    }
+
+    // 设置url携带的默认参数（筛选/排行榜跳转）
+    setDefaultSearchParams = () => {
+        const url = location.href;
+        const urlParams = getUrlParams(url);
+        const {
+            defaultRiskTypeData,
+            defaultLabelSearchData,
+            defaultRiskLevelData,
+            defaultChannelEventData,
+            defaultAppChannelData,
+            defaultRangeTimeData,
+            queryParams,
+        } = this.state;
+        let newLabelSearchData = lodash.cloneDeep(defaultLabelSearchData);
+        let newRiskTypeData = lodash.cloneDeep(defaultRiskTypeData);
+        let newRiskLevelData = lodash.cloneDeep(defaultRiskLevelData);
+        let newChannelEventData = lodash.cloneDeep(defaultChannelEventData);
+        let newAppChannelData = lodash.cloneDeep(defaultAppChannelData);
+        let newRangeTimeData = lodash.cloneDeep(defaultRangeTimeData);
+        let newQueryParams = lodash.cloneDeep(queryParams);
+        let newChannelEvent = 'all';
+
+        if (urlParams.startTime && urlParams.endTime) {
+            let dateRange = [];
+            if (urlParams.isScreen) {
+                // 筛选
+                dateRange = [
+                    moment.unix(urlParams.startTime / 1000),
+                    moment.unix(urlParams.endTime / 1000),
+                ];
+                newRangeTimeData.data.defaultDateRange = dateRange;
+                newQueryParams.startTime = Number(urlParams.startTime);
+                newQueryParams.endTime = Number(urlParams.endTime);
+            } else {
+                // 从排行榜跳转
+                dateRange = [
+                    moment(urlParams.startTime),
+                    moment(urlParams.endTime),
+                ];
+                newRangeTimeData.data.defaultDateRange = dateRange;
+                newQueryParams.startTime = Number(
+                    moment(urlParams.startTime).format('x')
+                );
+                newQueryParams.endTime = Number(
+                    moment(urlParams.endTime).format('x')
+                );
+            }
+        }
+        if (urlParams.description) {
+            newRiskTypeData.data.selectData.defaultValue = urlParams.riskType;
+            newQueryParams.description = urlParams.description;
+            newQueryParams.riskType = Number(urlParams.riskType);
+        }
+        if (urlParams.appUtm) {
+            if (getValue(newAppChannelData.data.componentProps.mode) === 'multiple') {
+                newAppChannelData.data.selectData.defaultValue = urlParams.appUtm.split(',');
+            } else {
+                newAppChannelData.data.selectData.defaultValue = urlParams.appUtm;
+            }
+            newQueryParams.appUtm = urlParams.appUtm;
+        }
+        if (urlParams.riskLevel) {
+            newRiskLevelData.data.selectData.defaultValue = urlParams.riskLevel;
+            newQueryParams.riskLevel = urlParams.riskLevel;
+        }
+        if (newChannelEventData && urlParams.channel) {
+            newChannelEvent
+                = urlParams.channel == '|' || urlParams.channel == 'all|all'
+                    ? ['all']
+                    : urlParams.channel.split(',');
+            newChannelEventData.data.selectData.defaultValue = newChannelEvent;
+            let statChannel = urlParams.channel.split('|')[0];
+            let statEventId = urlParams.channel.split('|')[1];
+            // 有渠道传渠道，都没有也传渠道
+            if (statChannel || !statEventId) {
+                newQueryParams.channel = statChannel;
+                newQueryParams.eventId = '';
+            } else {
+                newQueryParams.eventId = statEventId;
+                newQueryParams.channel = '';
+            }
+        }
+        if (urlParams.text) {
+            const serviceId = this.props.route.routeData.serviceId;
+            switch (serviceId) {
+                case 'POST_TEXT':
+                    newLabelSearchData.data.defaultValue = 'matchedItem';
+                    newQueryParams.matchedItem = urlParams.text;
+                    break;
+                case 'POST_IMG':
+                    newLabelSearchData.data.defaultValue = 'matchedItem';
+                    newQueryParams.matchedItem = urlParams.text;
+                    break;
+                default:
+                    newLabelSearchData.data.defaultValue = 'audioText';
+                    newQueryParams.audioText = urlParams.text;
+                    break;
+            }
+            newLabelSearchData.data.defaultContent = urlParams.text;
+        }
+        if (urlParams.searchKey) {
+            newLabelSearchData.data.defaultValue = urlParams.searchKey;
+            newLabelSearchData.data.defaultContent = decodeURIComponent(
+                urlParams.searchContent
+            );
+            newQueryParams[urlParams.searchKey] = decodeURIComponent(
+                urlParams.searchContent
+            );
+        }
+        this.setState({
+            defaultRangeTimeData: newRangeTimeData,
+            defaultRiskTypeData: newRiskTypeData,
+            defaultLabelSearchData: newLabelSearchData,
+            defaultRiskLevelData: newRiskLevelData,
+            defaultChannelEventData: newChannelEventData,
+            defaultAppChannelData: newAppChannelData,
+            queryParams: newQueryParams,
+            channelEvent: newChannelEvent,
+        });
+    };
+    // 获取名单列表
+    getMDList = async () => {
+        const { route, dispatch } = this.props;
+        const { serviceId } = route.routeData;
+        const { currentGlobalFilter } = this.state;
+        let { organization, appId } = currentGlobalFilter;
+        if (appId == 'all') {
+            appId = '';
+        }
+        let listContent = await dispatch({
+            type: 'history/fetchListService',
+            payload: {
+                organization,
+                appId,
+                product: 'P_TIAN_WANG',
+                type: 4,
+                offset: 0,
+                count: 1000,
+            },
+        });
+        let tokenIdBlackList = [];
+        let ignoreList = [];
+        let sensitiveList = [];
+        listContent.forEach(item => {
+            let config = item.config;
+            if (config.checkItems.includes('tokenId')) {
+                if (config.action == 'REJECT') {
+                    tokenIdBlackList.push({
+                        name: item.name,
+                        value: item.listId,
+                    });
+                }
+            }
+            if (
+                config.checkItems.includes('text')
+                && config.checkItems.length == 1
+            ) {
+                if (config.action == 'IGNORE') {
+                    ignoreList.push({
+                        name: item.name,
+                        value: item.listId,
+                    });
+                } else if (config.action == 'REJECT') {
+                    sensitiveList.push({
+                        name: item.name,
+                        value: item.listId,
+                    });
+                }
+            }
+        });
+
+        this.setState({
+            tokenIdBlackList,
+            ignoreList,
+            sensitiveList,
+            hitList: listContent,
+        });
+    };
+
+    globalFilterChange = obj => {
+        const {
+            orgChange,
+            appIdChange,
+            clusterIdChange,
+            currentGlobalFilter,
+        } = obj;
+        this.setState(
+            {
+                currentGlobalFilter,
+                listLoading: true,
+            },
+            async () => {
+                if (orgChange) {
+                    this.getRiskTypeList();
+                    this.getRiskLevelList();
+                    // 列表展示需要渠道事件列表对应中文
+                    await this.getAppChannelSelectList();
+
+                    this.getMDList();
+
+                    // 不是第一次搜索
+                    if (!this.state.isFirstLoading) {
+                        // 公司改变 重置搜索筛选项
+                        const { queryParams } = this.state;
+                        let newQueryParams = lodash.cloneDeep(queryParams);
+                        newQueryParams.eventId = '';
+                        newQueryParams.channel = '';
+                        this.setState(
+                            {
+                                queryParams: newQueryParams,
+                                currentPage: 1,
+                            },
+                            () => {
+                                this.doSearch();
+                            }
+                        );
+                    } else {
+                        this.setState(
+                            {
+                                isFirstLoading: false,
+                            },
+                            () => {
+                                this.doSearch();
+                            }
+                        );
+                    }
+                } else {
+                    this.setState(
+                        {
+                            currentPage: 1,
+                        },
+                        () => {
+                            this.doSearch();
+                        }
+                    );
+                }
+            }
+        );
+    };
+
+    // 请求搜索
+    doSearch() {
+        backTop();
+        this.getHistoryList();
+    }
+
+    exportData = callback => {
+        const {route, specialServiceId = '', exportConfig = {}, t} = this.props;
+        let newSearchParams = this.getSearchParams();
+
+        newSearchParams.count = 10000;
+        newSearchParams = Object.assign({}, exportConfig.params, newSearchParams);
+
+        const titleMap = {
+            POST_TEXT: '文本历史记录',
+            POST_IMG: '图片历史记录',
+            POST_ARTICLE: '网页历史记录',
+            POST_AUDIO: '音频文件片段历史记录',
+            POST_AUDIOSTREAM: '音频流历史记录',
+            POST_AUDIOSTREAMCLIPS: '音频流片段历史记录',
+            POST_VIDEO: '视频文件历史记录',
+            POST_VIDEO_AUDIO: '视频文件音频片段历史记录',
+            POST_VIDEOSTREAM: '视频流历史记录',
+            POST_VIDEOSTREAM_AUDIO: '视频流音频片段历史记录',
+            VERIFY_CAPTCHA: '智能验证码',
+            SVERIFY_CAPTCHA: '二次验证',
+            CHANNEL_ANTICHEAT: '渠道',
+        };
+
+        const serviceId = specialServiceId || route.routeData.serviceId;
+        let downloadTitle = t(titleMap[serviceId]);
+        let downloadUrl = exportConfig.url;
+
+        let title = exportConfig.fileName || `${t('天网')}-${downloadTitle}-${t('历史记录表')}.csv`;
+
+        exportFile(downloadUrl, title, newSearchParams).then(() => {
+            callback && callback();
+        });
+    };
+
+    timeRender = (text = '', record, index) => {
+        const contentText = text.slice(5);
+        const toolTipTitle = <span className={styles.tooltip}>{text}</span>;
+        return (
+            <Tooltip title={toolTipTitle} placement="left">
+                <span className={styles.text}>{contentText}</span>
+            </Tooltip>
+        );
+    };
+
+    textRender = (text, record, index) => {
+        const toolTipTitle = <span className={styles.tooltip}>{text}</span>;
+        const isCopy = TwChannelCopy.filter(item => record[item] === text).length;
+
+        return (
+            <Tooltip title={toolTipTitle} placement="left">
+                <CopyToClipboard
+                    className={isCopy ? styles.copy : styles.text}
+                    text={isCopy ? (text || '-') : null}
+                    onCopy={() => isCopy && message.success('复制成功')}
+                >
+                    <span>{text || '-'}</span>
+                </CopyToClipboard>
+            </Tooltip>
+        );
+    };
+
+    audioRender = (text, record, index) => {
+        return (
+            <SMAudio
+                audioUrl={text}
+                audioId={record.requestId}
+                showSpeedFlag={false}
+                showDownloadFlag={false}
+                showSilenceFlag={false}
+                showProgressFlag={false}
+                showSimpleTimeFlag
+            />
+        );
+    };
+
+    riskLevelRender = (text = '', record, index) => {
+        const {t} = this.props;
+        const riskLevelStr = text.split('|')[0];
+        const riskLevel = text.split('|')[1];
+        return (
+            <SMRiskLevel riskLevel={riskLevel} riskLevelStr={t(riskLevelStr)} />
+        );
+    };
+
+    detailRender = (text, record, index) => {
+        const {t} = this.props;
+        return (
+            <span
+                className={styles.action}
+                onClick={() => {
+                    this.clickDetail(index);
+                }}
+            >
+                {t(record.detail)}
+            </span>
+        );
+    };
+
+    detailAndAudioRender = (text, record, index) => {
+        return (
+            <div className={styles['detail-audio']}>
+                <span className={styles.audio}>
+                    <SMAudio
+                        audioUrl={text}
+                        audioId={record.requestId}
+                        showSpeedFlag={false}
+                        showDownloadFlag={false}
+                        showSilenceFlag={false}
+                        showProgressFlag={false}
+                        showSimpleTimeFlag
+                    />
+                </span>
+                <span
+                    className={styles.action}
+                    style={{
+                        verticalAlign: 'bottom',
+                        lineHeight: '24px',
+                        marginLeft: '8px',
+                    }}
+                    onClick={() => {
+                        this.clickDetail(index);
+                    }}
+                >
+                    详情
+                </span>
+            </div>
+        );
+    };
+
+    highLightRender = (text, record, index) => {
+        const matchedItem = record.currentData.output.matchedItem || '';
+        const toolTipTitle = (
+            <span className={styles.tooltip}>
+                <SMText content={text} keywords={matchedItem} />
+            </span>
+        );
+        return (
+            <Tooltip title={toolTipTitle} placement="left">
+                <span>
+                    <SMText
+                        content={text}
+                        keywords={matchedItem}
+                        ellipsis
+                    />
+                </span>
+            </Tooltip>
+        );
+    };
+
+
+    changeDetailData = e => {
+        // 没有打开详情时 不做处理
+        if (!this.state.detailVisible) {
+            return;
+        }
+        const {
+            detailIndex,
+            listData,
+            eventIdMap,
+            channelMap,
+            tokenIdBlackList,
+            ignoreList,
+            sensitiveList,
+            currentPage,
+            pageSize,
+            listTotalCount,
+        } = this.state;
+        const { formatDetailData } = this.props;
+        let newIndex = 0;
+        let newDetailData = {};
+        let mdData = {
+            tokenIdBlackList,
+            ignoreList,
+            sensitiveList,
+        };
+        if (e && e.keyCode == 37) {
+            if (currentPage == 1 && detailIndex == 0) {
+                message.info('已经是第一条数据了');
+                return;
+            } else if (detailIndex == 0) {
+                this.setState(
+                    {
+                        currentPage: currentPage - 1,
+                        detailIndex: pageSize - 1,
+                    },
+                    () => {
+                        this.doSearch();
+                    }
+                );
+            } else {
+                newIndex = detailIndex - 1;
+                newDetailData = formatDetailData(
+                    listData[newIndex],
+                    eventIdMap,
+                    channelMap,
+                    mdData
+                );
+                this.setState({
+                    detailIndex: newIndex,
+                    detailData: newDetailData,
+                });
+            }
+        } else if (e && e.keyCode == 39) {
+            if (
+                (currentPage - 1) * pageSize + detailIndex + 1
+                == listTotalCount
+            ) {
+                message.info('已经是最后一条数据了');
+                return;
+            } else if (detailIndex == pageSize - 1) {
+                this.setState(
+                    {
+                        currentPage: currentPage + 1,
+                        detailIndex: 0,
+                    },
+                    () => {
+                        this.doSearch();
+                    }
+                );
+            } else {
+                newIndex = detailIndex + 1;
+                newDetailData = formatDetailData(
+                    listData[newIndex],
+                    eventIdMap,
+                    channelMap,
+                    mdData
+                );
+                this.setState({
+                    detailIndex: newIndex,
+                    detailData: newDetailData,
+                });
+            }
+        }
+    };
+
+    clickDetail = index => {
+        const { formatDetailData } = this.props;
+        const {
+            listData,
+            eventIdMap,
+            channelMap,
+            tokenIdBlackList,
+            ignoreList,
+            sensitiveList,
+        } = this.state;
+        const mdData = {
+            tokenIdBlackList,
+            ignoreList,
+            sensitiveList,
+        };
+        const currentData = listData[index];
+        // 格式化 详情数据
+        const detailData = formatDetailData(
+            currentData,
+            eventIdMap,
+            channelMap,
+            mdData
+        );
+        this.setState({
+            detailIndex: index,
+            detailData: detailData,
+            detailVisible: true,
+        });
+    };
+
+    closeDetail = () => {
+        this.setState({
+            detailVisible: false,
+            detailIndex: 0,
+        });
+    };
+
+    /**
+     * 详情抽屉中的 点击事件（筛选，重置画像之类的）
+     * @param {*} actionType 行为类型
+     * @param {*} key 字段名
+     * @param {*} value 对应字段的值
+     * @param {*} otherData 其余data对象
+     */
+    onActionClick = async (actionType, key, value, otherData) => {
+        const {t} = this.props;
+
+        switch (actionType) {
+            case 'screen':
+                const { queryParams, channelEvent } = this.state;
+                const {
+                    startTime,
+                    endTime,
+                    riskType = '',
+                    description = '',
+                    riskLevel = '',
+                } = queryParams;
+                const encodeValue = encodeURIComponent(value);
+                let searchQuery = `isScreen=true&startTime=${startTime}&endTime=${endTime}&riskType=`
+                + `${riskType}&description=${description}&riskLevel=${riskLevel}&channel=`
+                + `${channelEvent}&searchKey=${key}&searchContent=${encodeValue}`;
+                // 从配置中读取要跳转的路由
+                let searchPath = otherData.path;
+                let newUrl = encodeURI(`${searchPath}?${searchQuery}`);
+                window.open(__ASSETS_PREFIX__ + newUrl);
+                break;
+            case 'resetPortrait':
+                const { currentGlobalFilter } = this.state;
+                const { organization } = currentGlobalFilter;
+                const { dispatch, route } = this.props;
+                let code = await dispatch({
+                    type: 'history/fetchResetProfile',
+                    payload: {
+                        organization,
+                        key: `${organization}_${value}`,
+                        type: otherData.type,
+                        serviceId: route.routeData.serviceId,
+                    },
+                });
+                if (code == 1100) {
+                    message.success(t('重置画像成功'));
+                } else {
+                    message.error(t('重置画像失败,请重试'));
+                }
+                break;
+            case 'addList':
+                const { type } = otherData;
+                const {
+                    ignoreList,
+                    sensitiveList,
+                    tokenIdBlackList,
+                } = this.state;
+                let newCurrentListData = [];
+                switch (type) {
+                    case 'ignore':
+                        newCurrentListData = ignoreList;
+                        break;
+                    case 'sensitive':
+                        newCurrentListData = sensitiveList;
+                        break;
+                    case 'tokenBlack':
+                        newCurrentListData = tokenIdBlackList;
+                        break;
+                }
+                this.setState({
+                    currentListData: newCurrentListData,
+                    listModalVisible: true,
+                    currentListValue: value,
+                });
+                break;
+        }
+    };
+
+    listOnSearch = (pagination, filters, sorter) => {
+        const { current, pageSize } = pagination;
+        let { order, field } = sorter;
+
+        const { queryParams } = this.state;
+        let newQueryParams = lodash.cloneDeep(queryParams);
+        const orderMap = {
+            'ascend': 'asc',
+            'descend': 'desc',
+        };
+        if (order) {
+            order = orderMap[order];
+            newQueryParams.orderBy = field;
+            newQueryParams.orderType = order;
+
+        } else {
+            newQueryParams.orderBy = undefined;
+            newQueryParams.orderType = undefined;
+        }
+
+        this.setState(
+            {
+                currentPage: current,
+                pageSize: pageSize,
+                queryParams: newQueryParams,
+            },
+            () => {
+
+                this.doSearch();
+            }
+        );
+    };
+
+
+    handleTotalCount({ totalCount, currentPage, pageSize }) {
+        const { isActiveHistory } = this.props;
+
+        if (isActiveHistory) {
+            return totalCount;
+        }
+        return totalCount == pageSize ? currentPage * pageSize + 1 : (currentPage - 1) * pageSize + totalCount;
+
+    }
+
+    // 获取历史记录列表数据
+    async getHistoryList() {
+        const {
+            currentPage,
+            pageSize,
+        } = this.state;
+        const {dispatch, formatData, formatDetailData, actionTypes = {}, isRetain, t} = this.props;
+        const newParams = this.getSearchParams();
+        if (isRetain) {
+            delete newParams.offset;
+            delete newParams.count;
+        }
+        if (dispatch) {
+            this.setState({
+                listLoading: true,
+            });
+            const {
+                listData = [],
+                totalCount,
+            } = await dispatch({
+                type: actionTypes.getList || 'history/fetchHistoryList',
+                payload: newParams,
+            });
+            this.setState(
+                {
+                    listData,
+                    // 此处接口 没有办法返回总数
+                    listTotalCount: this.handleTotalCount({ totalCount, currentPage, pageSize }),
+                },
+                () => {
+
+                    if (!listData.length && currentPage > 1) {
+                        message.info(t('没有更多数据了'));
+                        return;
+                    }
+
+                    if (!listData.length) {
+                        this.setState({
+                            tableDataSource: [],
+                            listLoading: false,
+                        });
+                        return;
+                    }
+                    const {
+                        eventIdMap,
+                        channelMap,
+                        detailIndex,
+                        tokenIdBlackList,
+                        ignoreList,
+                        sensitiveList,
+                        retainDisplayType,
+                    } = this.state;
+                    let data
+                        = formatData
+                        && formatData(listData, { retainDisplayType });
+                    const { dataSource } = data;
+
+                    // 设置详情数据
+                    let mdData = {
+                        tokenIdBlackList,
+                        ignoreList,
+                        sensitiveList,
+                    };
+                    let newDetailData
+                        = (formatDetailData
+                            && formatDetailData(
+                                listData[detailIndex],
+                                eventIdMap,
+                                channelMap,
+                                mdData
+                            ))
+                        || {};
+
+                    this.setState({
+                        tableDataSource: dataSource,
+                        listLoading: false,
+                        detailData: newDetailData,
+                    });
+
+                }
+            );
+        }
+    }
+
+    // 获取查询接口参数
+    getSearchParams = () => {
+        const { route, specialServiceId = '' } = this.props;
+        const {
+            currentGlobalFilter,
+            queryParams,
+            currentPage,
+            pageSize,
+        } = this.state;
+
+        const { organization, appId, clusterId } = currentGlobalFilter;
+        const serviceId = specialServiceId || route.routeData.serviceId;
+        const serviceIds = [
+            'POST_AUDIO',
+            'POST_AUDIOSTREAM',
+            'POST_VIDEO',
+            'POST_VIDEOSTREAM',
+        ];
+        let searchParams = {
+            organization: organization,
+            serviceId: serviceId,
+            appId: appId,
+            count: pageSize,
+            offset: (currentPage - 1) * pageSize,
+            ...queryParams,
+        };
+        // 当前页面有集群再传集群
+        if (route.routeData.hasClusterSelect) {
+            searchParams.colonyName = clusterId;
+        }
+        if (serviceIds.includes(serviceId)) {
+            delete searchParams.riskType;
+        } else {
+            delete searchParams.description;
+        }
+        // 处理一下searchParams，如果为'' || 'all', 则删除该项
+        let newSearchParams = formatSearchParams(searchParams);
+
+        newSearchParams = this.formatSearchTime(newSearchParams);
+        return newSearchParams;
+    };
+
+    formatSearchTime(params) {
+        if (!this.props.formatTimeParams) {
+            return params;
+        }
+        const { start, end, format } = this.props.formatTimeParams;
+        const { startTime, endTime } = params;
+        const data = { ...params };
+        delete data.startTime;
+        delete data.endTime;
+        const newParams = Object.assign(data, {
+            [start]: moment(startTime).format(format),
+            [end]: moment(endTime).format(format),
+        });
+        return newParams;
+    }
+
+    // 天网-渠道风险-渠道列表
+    getAppChannelSelectList = async () => {
+        if (!this.state.defaultAppChannelData) {
+            return;
+        }
+        const { dispatch, route } = this.props;
+        if (dispatch) {
+            let channelEventList = await dispatch({
+                type: 'twChannel/queryChannelCheatSelectList',
+                payload: {
+                    organization: this.state.currentGlobalFilter.organization,
+                    serviceId: route.routeData.serviceId,
+                },
+            });
+
+            if (!channelEventList) {
+                return;
+            }
+            const newOptionData = [];
+            let newChannelEventData = lodash.cloneDeep(
+                this.state.defaultAppChannelData
+            );
+            channelEventList.forEach(item => {
+                newOptionData.push({
+                    value: item,
+                    name: item,
+                });
+            });
+            newChannelEventData.data.selectData.optionData = newOptionData;
+            this.setState({
+                defaultAppChannelData: newChannelEventData,
+            });
+        }
+    };
+
+    // 获取风险类型列表
+    getRiskTypeList = async () => {
+        if (!this.state.defaultRiskTypeData) {
+            return;
+        }
+        const { dispatch, route } = this.props;
+        if (dispatch) {
+            let riskTypeList = await dispatch({
+                type: 'base/fetchRiskTypeList',
+                payload: {
+                    organization: this.state.currentGlobalFilter.organization,
+                    serviceId: route.routeData.serviceId,
+                },
+            });
+            let newRiskTypeData = lodash.cloneDeep(
+                this.state.defaultRiskTypeData
+            );
+            let newOptionData = [];
+            let newRiskTypeMap = {};
+            if (riskTypeList) {
+                riskTypeList.forEach(item => {
+                    newOptionData.push({
+                        value: item.riskType,
+                        name: item.riskTypeName,
+                    });
+                    newRiskTypeMap[item.riskType] = item.riskTypeName;
+                });
+            }
+            newRiskTypeData.data.selectData.optionData = newOptionData;
+            this.setState({
+                defaultRiskTypeData: newRiskTypeData,
+                riskTypeMap: newRiskTypeMap,
+            });
+        }
+    };
+
+    // 获取识别结果列表
+    getRiskLevelList = async () => {
+        if (!this.state.defaultRiskLevelData) {
+            return;
+        }
+        const { dispatch, route } = this.props;
+        if (dispatch) {
+            let riskLevelList = await dispatch({
+                type: 'base/fetchRiskLevelList',
+                payload: {
+                    organization: this.state.currentGlobalFilter.organization,
+                    serviceId: route.routeData.serviceId,
+                },
+            });
+            let newRiskLevelData = lodash.cloneDeep(this.state.defaultRiskLevelData);
+            let newOptionData = [];
+            let riskLevelMap = {};
+            let verifyTypeMap = {};
+            if (riskLevelList) {
+                riskLevelList.forEach(item => {
+                    let children = item.son && item.son.map(data => {
+                        verifyTypeMap[data.risk_level] = data.risk_level_name;
+                        return {
+                            value: data.risk_level,
+                            label: data.risk_level_name,
+                        };
+                    });
+                    let itemOption = {
+                        value: item.risk_level,
+                        label: item.risk_level_name,
+                    };
+
+                    riskLevelMap[item.risk_level] = item.risk_level_name;
+
+                    if (children && children.length) {
+                        children.unshift({
+                            value: '',
+                            label: '全部',
+                        });
+                        itemOption.children = children;
+                    }
+                    newOptionData.push(itemOption);
+                });
+            }
+
+            newRiskLevelData.data.selectData.optionData = newOptionData;
+            this.setState({
+                defaultRiskLevelData: newRiskLevelData,
+                riskLevelMap,
+                verifyTypeMap,
+            });
+        }
+    };
+
+    // 获取搜索菜单
+    getFormData() {
+        let formData = [];
+        const {
+            defaultRangeTimeData,
+            defaultChannelEventData,
+            defaultRiskLevelData,
+            defaultRiskTypeData,
+            defaultAppChannelData,
+            defaultLabelSearchData,
+            defaultTypeButtonData,
+            defaultExportButtonData,
+        } = this.state;
+        formData.push(
+            defaultRangeTimeData,
+            defaultChannelEventData,
+            defaultRiskTypeData,
+            defaultAppChannelData,
+            defaultRiskLevelData,
+            defaultTypeButtonData,
+            defaultLabelSearchData
+        );
+
+        const { route, noExport, currentUser } = this.props;
+        if (getAuthFunction(AUTH_FUNCTION.EXPORT)) {
+            !noExport && formData.push({
+                type: 'export',
+                name: '导出',
+            });
+        }
+        formData = formData.filter(item => item);
+        return formData;
+    }
+
+    /**
+     * 搜索筛选项更改
+     * @param {*} name   更改筛选项类型名称
+     * @param {*} value  更改后的值
+     */
+    changeQueryParams(name, value) {
+        const { queryParams, riskTypeMap } = this.state;
+        let newQueryParams = lodash.cloneDeep(queryParams);
+        switch (name) {
+            case 'channelEvent':
+                this.setState({
+                    channelEvent: value,
+                });
+                let statChannel = value.split('|')[0];
+                let statEventId = value.split('|')[1];
+                // 有渠道传渠道，都没有也传渠道
+                if (statChannel || !statEventId) {
+                    newQueryParams.channel = statChannel;
+                    newQueryParams.eventId = '';
+                } else {
+                    newQueryParams.eventId = statEventId;
+                    newQueryParams.channel = '';
+                }
+                break;
+            case 'time':
+                let startTime = Number(value[0].format('x'));
+                let endTime = Number(value[1].format('x'));
+                newQueryParams.startTime = startTime;
+                newQueryParams.endTime = endTime;
+                break;
+            case 'riskType':
+                newQueryParams.description
+                    = value == 'all' ? '' : riskTypeMap[value];
+                newQueryParams.riskType = value == 'all' ? '' : Number(value);
+                break;
+            case 'riskLevel':
+                const newValue = value || [];
+                newQueryParams.riskLevel = newValue[0] || '';
+                newQueryParams.verifyType = newValue[1] || '';
+                break;
+            case 'appUtm':
+                if (Array.isArray(value) && value.length) {
+                    newQueryParams.appUtm = value.join(',');
+                } else if (Array.isArray(value) && value.length === 0) {
+                    newQueryParams.appUtm = '';
+                } else {
+                    newQueryParams.appUtm = value;
+                }
+                break;
+            case 'labelSearch':
+                const { defaultLabelSearchData } = this.state;
+                defaultLabelSearchData.data.optionData.forEach(item => {
+                    newQueryParams[item.value] = '';
+                });
+                newQueryParams[value.searchId] = value.searchText;
+                break;
+            case 'retainDisplayType':
+                this.setState({
+                    retainDisplayType: value,
+                });
+                break;
+        }
+        this.setState(
+            {
+                queryParams: newQueryParams,
+                listLoading: true,
+                currentPage: 1,
+            },
+            () => {
+                this.doSearch();
+            }
+        );
+    }
+
+    /**
+     * 按钮点击事件
+     * @param {*} val
+     */
+    onButtonClick(name) {
+        switch (name) {
+            case 'exportHistory': // 历史数据提取
+                this.setState({
+                    exportTaskVisible: true,
+                });
+                break;
+        }
+    }
+
+
+    render() {
+        const formData = this.getFormData();
+        const newParams = this.getSearchParams();
+        const {
+            listLoading,
+            tableDataSource,
+            tableColumns,
+            detailData,
+            detailVisible,
+            listTotalCount,
+            currentPage,
+            pageSize,
+            pageSizeOptions,
+            currentListData,
+            currentListValue,
+            listModalVisible,
+            currentGlobalFilter,
+        } = this.state;
+        const {
+            route,
+            showHeader,
+            noPagination,
+            isRetain,
+            isActiveHistory,
+            t,
+        } = this.props;
+        const serviceId = route.routeData.serviceId;
+        const { appId, organization } = currentGlobalFilter;
+
+        return (
+            <div>
+                <GlobalFilterListener onChange={this.globalFilterChange} />
+                <SMSearchForm
+                    formData={formData}
+                    onChange={(name, value) => {
+                        this.changeQueryParams(name, value);
+                    }}
+                    exportData={callback => this.exportData(callback)}
+                    onButtonClick={name => this.onButtonClick(name)}
+                />
+                <div
+                    className={[styles['table-list'],
+                        isRetain ? styles.isRetain : '',
+                        isActiveHistory ? styles.isActiveHistory : '',
+                    ].join(' ')}
+                >
+                    <SMTable
+                        columns={formatUs(tableColumns, ['title'], t)}
+                        dataSource={tableDataSource}
+                        loading={listLoading}
+                        totalCount={listTotalCount}
+                        wrapperStyle={{
+                            margin: 0,
+                        }}
+                        i18nText={tableText(t)}
+                        customLoadingUrl={this.props.customLoadingIcon}
+                        antdProps={{
+                            pagination: !noPagination && {
+                                showQuickJumper: isActiveHistory,
+                                defaultPageSize: pageSize,
+                                pageSizeOptions: pageSizeOptions,
+                                total: listTotalCount,
+                                current: currentPage,
+
+                                showSizeChanger: true,
+                            },
+                            onChange: this.listOnSearch,
+                        }}
+                    />
+                    {tableDataSource.length && isActiveHistory ? <TotalCount count={listTotalCount} /> : null}
+                </div>
+
+                <SMDetailDrawer
+                    detailData={detailData}
+                    searchParams={newParams}
+                    visible={detailVisible}
+                    onClose={this.closeDetail}
+                    onActionClick={this.onActionClick}
+                />
+                <AddListModal
+                    visible={listModalVisible}
+                    listData={currentListData}
+                    serviceId={serviceId}
+                    organization={organization}
+                    currentValue={currentListValue}
+                    onCancel={() =>
+                        this.setState({
+                            listModalVisible: false,
+                        })
+                    }
+                />
+            </div>
+        );
+    }
+}
+
+export default withIntlComponents(connect(({ user }) => ({
+    currentUser: user.currentUser,
+}))(withIntlComponents(History)));