admin2 1.0.0

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

@@ -0,0 +1,2792 @@
+/* eslint-disable max-len */
+/**
+ * 天净文本，音频文件，音频流（片段），视频文件（音频片段），视频流（音频片段）历史记录
+ */
+
+import React, { Component } from 'react';
+import { connect, history, getLocale } from 'umi';
+import moment from 'moment';
+import _ from 'lodash';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import {
+    Tooltip,
+    message,
+    Spin,
+} from 'antd';
+import classNames from 'classnames';
+import {SMTable, SMModal} from 'sm-antd';
+
+import {judgeServiceIdType} from '@/contants/judgeServiceIdType';
+import withIntlComponents from '@/hoc/withIntlComponents';
+import { getAuthFunction } from '@/utils/AuthorityManage';
+import {
+    SMNoteTip,
+    SMSearchForm,
+    SMAudio,
+    SMIcon,
+    GlobalFilterListener,
+    SMNewText,
+    TotalCount,
+    SMRiskLevel,
+    SMBackTop,
+    SMText,
+    SMImage,
+} from '@/components';
+import {
+    formatSearchParams,
+    exportFile,
+    getUrlParams,
+    backTop,
+    formatAppList,
+    Storage,
+    getDisabledDate,
+    formatArrayParams,
+    isPrivate,
+    isJson,
+    handleOperation,
+    handleSearchUrl,
+    getFinalDescription,
+    arrayMove,
+    formatDataToString,
+    findAllThirdLevelLabels,
+    findAllThirdLevelLabelsArray,
+} from '@/utils/utils';
+import { PAGE_SIZE } from '@/contants/pageSize';
+import FieldMessageModal from '@/components/FieldMessageModal';
+import HistoryExport from '../components/HistoryExport';
+import {getIntlFormData, getIntlTableColums} from '@/utils/helpers';
+import {SERVICEID_MAP} from '@/contants/serviceId';
+
+import {
+    RISKLEVEL,
+    MODEL_TYPE,
+    RISK_LEVEL_LIST,
+    HISTORY_COLUMN,
+    STORAGE_LIST_NAME,
+    FIELD_SOURCE_TYPE,
+    SM_FIELD_SORT,
+    SERVICEID_LIST,
+    FILED_SET_DETAIL,
+    DEFAULT_SCREEN,
+    KEYBOARD_CODER,
+    MD_TYPE,
+    AUTH_FUNCTION,
+    SM_ACCOUNT,
+    tableText,
+    LOCALE_TYPE,
+} from '@/contants';
+
+import {
+    NewHistoryDetailDrawer,
+    ExportTask,
+    GroupFilter,
+    FeedbackContent,
+    AddTextMdModal,
+    AddListModal,
+    TJExportTask,
+} from '../components';
+
+import StreamInfoModal from '../components/StreamInfoModal';
+import contentRender from '../components/contentRender';
+import MultiContentsRender from '../MultiContentsRender';
+
+import {
+    TjCopy,
+    RENDER_TYPE,
+    FILTRATE_LIST,
+    FIELD_NAME_LIST,
+    METHOD_TYPE,
+    FAST_QUERY,
+    WILDCARD_PREFIX,
+    FEEDBACK_TYPE,
+    PAGE_TYPE,
+    PAGE_DETAIL_TYPE,
+    DAY_TIMESTAMP,
+    SEARCH_TYPE,
+    HISTORY_EXPORT_TEXT,
+    NOTE_TIP_TXT,
+    MAX_QUERY_NUMBER,
+} from '../constants';
+import {
+    handleLabelAll,
+    getLabelConfig,
+} from '../help';
+import formatSpecialFeature from '../components/NewHistoryDetailDrawer/formatSpecialFeature';
+
+import styles from './index.less';
+
+
+const {ModalType} = SMModal;
+const IS_TOKEN_VALUE = 1; // 应用间账号是否独立 不鸽特殊逻辑；isTokenValue === 1 画像重置接口传参key:org_appId_value;
+const RISK_NUMBER = 500; // 风险片段最大数；
+const PASS = 'PASS'; // 通过
+const REJECT = 'REJECT'; // 拒绝
+const PLAY = '播放';
+const OPERATION = '操作';
+const EN = '_EN';
+const AR = '_AR';
+const ALL = 'all';
+const WIDTH = 100;
+const WIDTH_LANG = 200;
+
+// 详情中新增截帧图片、音频片段筛选
+const DETAIL_LIST = [
+    SERVICEID_LIST.POST_VIDEOSTREAM,
+    SERVICEID_LIST.POST_VIDEOSTREAM_EN,
+    SERVICEID_LIST.POST_VIDEOSTREAM_AR,
+    SERVICEID_LIST.POST_VIDEO,
+    SERVICEID_LIST.POST_AUDIO,
+    SERVICEID_LIST.POST_AUDIO_EN,
+    SERVICEID_LIST.POST_AUDIO_AR,
+    SERVICEID_LIST.POST_AUDIOSTREAM,
+    SERVICEID_LIST.POST_AUDIOSTREAM_AR,
+    SERVICEID_LIST.POST_AUDIOSTREAM_EN,
+    SERVICEID_LIST.POST_AUDIO_B,
+    SERVICEID_LIST.POST_AUDIOSTREAM_B,
+];
+
+
+// 音频流所有语言
+const AUDIO_ALL_LANGUAGE = [
+    SERVICEID_LIST.POST_AUDIOSTREAM,
+    SERVICEID_LIST.POST_AUDIO,
+    SERVICEID_LIST.POST_AUDIO_EN,
+    SERVICEID_LIST.POST_AUDIO_AR,
+    SERVICEID_LIST.POST_AUDIOSTREAM_EN,
+    SERVICEID_LIST.POST_AUDIOSTREAM_AR,
+];
+// 视频流所有语言
+const VIDEO_ALL_LANGUAGE = [
+    SERVICEID_LIST.POST_VIDEO,
+    SERVICEID_LIST.POST_VIDEOSTREAM,
+    SERVICEID_LIST.POST_VIDEOSTREAM_EN,
+    SERVICEID_LIST.POST_VIDEOSTREAM_AR,
+];
+
+// 所有音频片段类型
+const AUDIO_CLIPS_MAP =  {
+    [SERVICEID_LIST.POST_AUDIOCLIPS]: {
+        title: '音频文件',
+        jumpUrl: '/new/tianjing/audio/history/postAudio',
+    },
+    [SERVICEID_LIST.POST_AUDIOCLIPS_AR]: {
+        title: '音频文件',
+        jumpUrl: '/new/tianjing/audioAlb/history/postAudio',
+    },
+    [SERVICEID_LIST.POST_AUDIOCLIPS_EN]: {
+        title: '音频文件',
+        jumpUrl: '/new/tianjing/audioEng/history/postAudio',
+    },
+    [SERVICEID_LIST.POST_AUDIOCLIPS_B]: {
+        title: '音频文件',
+        jumpUrl: '/new/tianjing/audioBlei/history/postAudio',
+    },
+    [SERVICEID_LIST.POST_AUDIOSTREAMCLIPS]: {
+        title: '音频流',
+        jumpUrl: '/new/tianjing/audioStream/history/audioStream',
+    },
+    [SERVICEID_LIST.POST_AUDIOSTREAMCLIPS_EN]: {
+        title: '音频流',
+        jumpUrl: '/new/tianjing/audioStreamEng/history/audioStream',
+    },
+    [SERVICEID_LIST.POST_AUDIOSTREAMCLIPS_AR]: {
+        title: '音频流',
+        jumpUrl: '/new/tianjing/audioStreamAlb/history/audioStream',
+    },
+    [SERVICEID_LIST.POST_AUDIOSTREAMCLIPS_B]: {
+        title: '音频流',
+        jumpUrl: '/new/tianjing/audioStreamBlei/history/audioStream',
+    },
+    [SERVICEID_LIST.POST_VIDEO_AUDIO]: {
+        title: '视频文件',
+        jumpUrl: '/new/tianjing/video/history/video',
+    },
+    [SERVICEID_LIST.POST_VIDEOSTREAM_AUDIO]: {
+        title: '视频流',
+        jumpUrl: '/new/tianjing/videoStream/history/video',
+    },
+    [SERVICEID_LIST.POST_VIDEOSTREAM_AUDIO_EN]: {
+        title: '视频流',
+        jumpUrl: '/new/tianjing/videoStreamEng/history/video',
+    },
+    [SERVICEID_LIST.POST_VIDEOSTREAM_AUDIO_AR]: {
+        title: '视频流',
+        jumpUrl: '/new/tianjing/videoStreamAlb/history/video',
+    },
+};
+
+class History extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            ...FILTRATE_LIST,
+            queryParams: {
+                startTime: Number(moment().startOf('day').format('x')),
+                endTime: Number(moment().endOf('day').format('x')),
+            },
+            actionType: '',
+            channelEvent: 'all', // 当前渠道事件拼接的字符串
+            tableDataSource: [],
+            tableColumns: [],
+            detailData: {}, // 当前详情数据
+            detailVisible: false,
+            newDetailVisible: false,
+            detailIndex: 0, // 当前详情数据的index
+            listLoading: true,
+            listData: [], // 历史记录列表数据
+            listTotalCount: 0,
+            listRealTotalCount: 0,
+            isFirstLoading: true,
+            mdListLoading: true,
+            currentPage: 1,
+            pageSize: 20,
+            pageSizeOptions: PAGE_SIZE,
+            ignoreMd: [],
+            sensitiveMd: [],
+            tokenIdBlackMd: [],
+            channelEventList: [],
+            eventIdMap: {},
+            channelMap: {},
+            riskTypeMap: {}, // 用来对应riskType的 value 和name
+            riskLevelMap: {},
+            currentGlobalFilter: {
+                organization: '',
+                appId: '',
+                clusterId: '',
+            },
+            exportTaskVisible: false, // 控制导出历史任务弹窗的显隐
+            type: '',
+            labelList: [], // 一级标签
+            currentData: {}, // 当前数据
+            currentDataIndex: 0, // 当前数据index
+            tokenIdBlackList: [], // 账号黑名单列表
+            ignoreList: [], // 忽略词名单
+            sensitiveList: [], // 敏感词名单
+            currentListData: [], // 当前选择名单列表
+            listModalVisible: false, // 展示选择名单弹窗
+            currentListValue: '', // 当前要加名单的值
+            hitList: [],
+            headerData: {}, // 字段配置表头
+            disabledDate: {}, // 限制选择时间
+            exportLoading: false,
+            filterData: [], // 高级筛选项
+            searchList: [], // 筛选
+            resetCount: 0,
+            riskLabelList: [], // 风险类型
+            riskLabelOption: [], // 风险原因的下拉框数据
+            maxQueryNumber: 0,
+            isDefaultTokenId: false,
+            selectedContents: [], // 历史记录选中项
+            streamModalVisible: false,
+            currentStreamRecord: {},
+            isRandomSampling: false, // 是否随机抽取
+        };
+    }
+
+    UNSAFE_componentWillMount() {
+        const {stateConfig} = this.props;
+        // 给风险原因、风险类型绑定查询数据函数
+        const {defaultDescriptionData, defaultNewDescriptionData} = this.state;
+        const newDefaultDescriptionData = _.cloneDeep(defaultDescriptionData);
+        const newDefaultNewDescriptionData = _.cloneDeep(defaultNewDescriptionData);
+        newDefaultDescriptionData.data.selectData.doSearch = this.reDoSearch;
+        newDefaultNewDescriptionData.data.selectData.doSearch = this.reDoSearch;
+        this.getLangList();
+        this.setState({
+            defaultDescriptionData: newDefaultDescriptionData,
+            defaultNewDescriptionData: newDefaultNewDescriptionData,
+        });
+        if (stateConfig) {
+            this.setState({...stateConfig});
+        }
+    }
+
+    componentDidMount() {
+        window.addEventListener('keydown', this.changeDetailData);
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('keydown', this.changeDetailData);
+    }
+
+    getLangList = async () => {
+        const langData = _.cloneDeep(this.state.defaultLangData);
+        const langList = await this.props.dispatch({
+            type: MODEL_TYPE.HISTORY_LIST.LANG_LIST,
+        });
+        langData.data.selectData.optionData = langList;
+        langData.data.selectData.doSearch = this.doSearch;
+        this.setState({
+            defaultLangData: langData,
+        });
+    };
+
+    // 设置url携带的默认参数（筛选/排行榜跳转）
+    setDefaultSearchParams = () => {
+        const url = location.href;
+        const {serviceId} = this.props.route.routeData;
+        const urlParams = getUrlParams(url);
+        const {
+            defaultRiskTypeData,
+            defaultRiskLevelData,
+            defaultChannelEventData,
+            defaultRangeTimeData,
+            queryParams,
+            searchList,
+            filterData,
+            storageTime,
+            defaultDescriptionData,
+            riskLabelList,
+        } = this.state;
+        const {t} = this.props;
+        const newRiskTypeData = _.cloneDeep(defaultRiskTypeData);
+        const newRiskLevelData = _.cloneDeep(defaultRiskLevelData);
+        const newChannelEventData = _.cloneDeep(defaultChannelEventData);
+        const newRangeTimeData = _.cloneDeep(defaultRangeTimeData);
+        const newQueryParams = _.cloneDeep(queryParams);
+        const newFilterData = _.cloneDeep(filterData);
+        const newDescriptionData = _.cloneDeep(defaultDescriptionData);
+        let newChannelEvent = '';
+        const newSearchList = _.cloneDeep(searchList);
+
+        if (urlParams.startTime && urlParams.endTime) {
+            const leastTime = moment(moment().format('x') - (storageTime - 1) * DAY_TIMESTAMP).startOf('day').format('x');
+            let newStartTime = Number(urlParams.startTime) || moment(urlParams.startTime).format('x');
+            let endTime = Number(urlParams.endTime) || Number(moment(urlParams.endTime).format('x'));
+            const startTime = newStartTime <= leastTime ? Number(leastTime) : Number(newStartTime);
+            let dateRange = [];
+            if (urlParams.isScreen) {
+                // 筛选
+                dateRange = [
+                    moment.unix(urlParams.startTime / 1000).toDate(),
+                    moment.unix(urlParams.endTime / 1000).toDate(),
+                ];
+                newRangeTimeData.data.defaultDateRange = dateRange;
+                newQueryParams.startTime = Number(urlParams.startTime);
+                newQueryParams.endTime = Number(urlParams.endTime);
+            } else {
+                // 从排行榜跳转
+                dateRange = [
+                    moment(startTime).toDate(),
+                    moment(endTime).toDate(),
+                ];
+                newRangeTimeData.data.defaultDateRange = dateRange;
+                newQueryParams.startTime = startTime;
+                newQueryParams.endTime = endTime;
+            }
+        }
+        // 历史记录跳转
+        if (urlParams.description) {
+            newRiskTypeData.data.selectData.defaultValue = urlParams.riskType;
+            newQueryParams.description = urlParams.description;
+            newQueryParams.riskType = urlParams.riskType;
+        }
+
+        if (urlParams.riskLevel && urlParams.riskLevel !== ALL) {
+            newRiskLevelData.data.selectData.defaultValue = [urlParams.riskLevel];
+            newQueryParams.riskLevel = [urlParams.riskLevel];
+        }
+        if (urlParams.channel && !['all|all', '|'].includes(urlParams.channel)) {
+            const [statChannel, statEventId] = urlParams.channel.split('|');
+            // 音频流、视频流排行榜渠道跳转渠道传参 channel=all  或者 channel=all|undefined
+            if (statChannel !== ALL && statEventId !== ALL) {
+                newChannelEventData.data.selectData.defaultValue = [[statChannel || statEventId]];
+                newQueryParams.channel = [statChannel || statEventId];
+            }
+        }
+        // 趋势饼图跳转过来
+        if (urlParams.sourcePage === 'trend') {
+            if (urlParams.channel) {
+                try {
+                    newChannelEventData.data.selectData.defaultValue = urlParams.channel.split('|').map(item => [item]);
+                    newQueryParams.channel = urlParams.channel.split('|');
+                } catch (error) {}
+            }
+            if (urlParams.isWarning === 'true') {
+                message.warning(t('所选范围超过30天，默认为您拉取近30天数据'));
+            }
+            if (urlParams.newDescription) {
+                const allThirdLevelLabels = findAllThirdLevelLabels(riskLabelList, urlParams.newDescription);
+                if (allThirdLevelLabels.length > 0) {
+                    newDescriptionData.data.selectData.defaultValue = allThirdLevelLabels;
+                    newQueryParams.description = allThirdLevelLabels;
+                }
+            }
+        }
+        //  排行榜跳转过来
+        if (urlParams?.riskTag) {
+            const description = urlParams?.riskTag.split('|');
+            const allThirdLevelLabels = findAllThirdLevelLabelsArray(riskLabelList, description);
+            if (allThirdLevelLabels.length > 0) {
+                newDescriptionData.data.selectData.defaultValue = allThirdLevelLabels;
+                newQueryParams.description = allThirdLevelLabels;
+            }
+        }
+        if (urlParams.searchKey) {
+            const isRequestId = [HISTORY_COLUMN.REQUESTID].includes(urlParams.searchKey); // 视频流、视频文件流水号走模糊匹配
+            try {
+                newSearchList.map(item => {
+                    let methodIndex = 0;
+                    if (isRequestId) {
+                        item.method.forEach((item, index) => {
+                            if (item.key === WILDCARD_PREFIX) {
+                                methodIndex = index;
+                            }
+                        });
+                    }
+                    // multipleSearch === '1'时 代表开启组合筛选（多选）
+                    if (urlParams.multipleSearch === SEARCH_TYPE.MULTIPLE) {
+                        const {searchKey, searchKeyType, searchContent} = urlParams;
+                        handleSearchUrl({
+                            item,
+                            searchKey,
+                            searchKeyType,
+                            searchContent,
+                            newFilterData,
+                        });
+                    } else if (item.fieldTag === urlParams.searchKey) {
+                        const obj = {
+                            fieldTag: urlParams.searchKey,
+                            method: item.method[methodIndex]?.key,
+                            type: item.method[methodIndex]?.type,
+                            enum: item.method[methodIndex]?.enum,
+                            value: item.method[methodIndex] === METHOD_TYPE
+                                ? [decodeURIComponent(urlParams.searchContent)]
+                                : decodeURIComponent(urlParams.searchContent),
+                        };
+                        newFilterData.push(obj);
+                    }
+                });
+            } catch (error) {
+                console.error(error);
+            }
+        }
+        else {
+            let targetItem = newSearchList.find(item => item.fieldTag === HISTORY_COLUMN.TOKENID);
+            if (!targetItem && newSearchList.length > 0) {
+                targetItem = newSearchList[0];
+            }
+            if (targetItem) {
+                newFilterData.push({
+                    fieldTag: targetItem.fieldTag,
+                    method: targetItem.method[0]?.key,
+                    type: targetItem.method[0]?.type,
+                    value: undefined,
+                    enum: targetItem.enum || [],
+                });
+            }
+        }
+        if (urlParams.organization) {
+            let organization = urlParams.organization;
+            this.setState({
+                currentGlobalFilter: {
+                    organization: organization,
+                    appId: '',
+                    clusterId: '',
+                },
+            });
+        }
+        // 检测storage中的 风险原因，如果存在则赋值
+        const defaultDescription = Storage.get(STORAGE_LIST_NAME.DESCRIPTION);
+        if (defaultDescription) {
+            newQueryParams.description = defaultDescription;
+            Storage.remove(STORAGE_LIST_NAME.DESCRIPTION);
+        }
+        this.setState({
+            defaultRangeTimeData: newRangeTimeData,
+            // defaultRiskTypeData: newRiskTypeData, 取消风险原因筛选 http://jira.ishumei.com/browse/SJZCZX-143?filter=-1
+            defaultRiskLevelData: newRiskLevelData,
+            defaultChannelEventData: newChannelEventData,
+            queryParams: newQueryParams,
+            channelEvent: newChannelEvent,
+            filterData: newFilterData,
+            resetCount: _.random(100000),
+            defaultDescriptionData: newDescriptionData,
+        }, () => this.doSearch());
+    };
+
+    shouldComponentUpdate = (nextProps, nextState) => nextState.isrRefresh === this.state.isrRefresh;
+
+    // 获取名单列表
+    getMDList = async (mdParams = {}) => {
+        const { route, dispatch } = this.props;
+        const { serviceId } = route.routeData;
+        const { currentGlobalFilter } = this.state;
+        let { organization, appId } = currentGlobalFilter;
+        let listContent = [];
+        let listContent1 = [];
+        let listContent2 = [];
+        let listContent3 = [];
+        if (appId === 'all') {
+            appId = '';
+        }
+        this.setState({ mdListLoading: true });
+        listContent1 = await dispatch({
+            type: 'history/fetchListService',
+            payload: {
+                organization,
+                appId,
+                product: serviceId,
+                type: 1,
+                offset: 0,
+                count: 1000,
+                ...mdParams,
+            },
+        });
+        listContent3 = await dispatch({
+            type: 'history/fetchListService',
+            payload: {
+                organization,
+                appId,
+                product: serviceId,
+                type: 5,
+                offset: 0,
+                count: 1000,
+                ...mdParams,
+            },
+        });
+
+        if (serviceId === 'POST_IMG') {
+            listContent2 = await dispatch({
+                type: 'history/fetchListService',
+                payload: {
+                    organization,
+                    appId,
+                    product: serviceId,
+                    type: 4,
+                    offset: 0,
+                    count: 1000,
+                },
+            });
+        }
+        listContent = listContent3.concat(listContent1.concat(listContent2));
+        let tokenIdBlackList = [];
+        let ignoreList = [];
+        let sensitiveList = [];
+        let ignoreMd = [];
+        let sensitiveMd = [];
+        let tokenIdBlackMd = [];
+
+        listContent.filter(list => list.status === 1).forEach(item => {
+            let config = item.config;
+            if (config.checkItems.includes('tokenId')) {
+                if (config.action === 'REJECT') {
+                    tokenIdBlackList.push({
+                        name: item.name,
+                        value: item.listId,
+                    });
+                    tokenIdBlackMd.push(item);
+                }
+            }
+            if (
+                config.checkItems.includes('text')
+            ) {
+                if (config.action === 'IGNORE') {
+                    ignoreList.push({
+                        name: item.name,
+                        value: item.listId,
+                    });
+                    ignoreMd.push(item);
+                } else if (config.action === 'REJECT') {
+                    sensitiveList.push({
+                        name: item.name,
+                        value: item.listId,
+                    });
+                    sensitiveMd.push(item);
+                }
+            }
+        });
+
+        this.setState({
+            tokenIdBlackList,
+            tokenIdBlackMd,
+            ignoreList,
+            ignoreMd,
+            sensitiveList,
+            sensitiveMd,
+            hitList: listContent,
+            mdListLoading: false,
+        });
+    };
+
+    globalFilterChange = obj => {
+        const {
+            orgChange,
+            currentGlobalFilter,
+        } = obj;
+        const {defaultRangeTimeData} = this.state;
+
+        this.setState(
+            {
+                currentGlobalFilter,
+                listLoading: true,
+            },
+            async () => {
+                if (orgChange) {
+                    this.getRiskTypeList();
+                    this.getRiskLevelList();
+                    this.getNewRiskLabelList();
+                    await this.getOpenOrganization();
+                    // 列表展示需要渠道事件列表对应中文
+                    await this.getChannelEventList();
+
+                    this.getMDList();
+                    // 不是第一次搜索
+                    if (!this.state.isFirstLoading) {
+                        // 公司改变 重置搜索筛选项
+                        const { queryParams } = this.state;
+                        let newQueryParams = _.cloneDeep(queryParams);
+                        const newRangeTimeData = _.cloneDeep(defaultRangeTimeData);
+                        newQueryParams.eventId = '';
+                        newQueryParams.channel = '';
+                        newQueryParams.riskLevel = '';
+                        newQueryParams.riskType = '';
+                        newQueryParams.startTime = Number(moment().startOf('day').format('x'));
+                        newQueryParams.endTime = Number(moment().endOf('day').format('x'));
+                        newQueryParams.description = ['all'];
+                        newRangeTimeData.data.defaultDateRange = [
+                            moment().startOf('day').toDate(),
+                            moment().endOf('day').toDate(),
+                        ];
+                        this.setState(
+                            {
+                                queryParams: newQueryParams,
+                                currentPage: 1,
+                                maxQueryNumber: 0,
+                                resetCount: _.random(100000),
+                                defaultRangeTimeData: newRangeTimeData,
+                                filterData: [],
+                            },
+                            () => {
+                                this.getFieldSetHearder(true);
+                            }
+                        );
+                    } else {
+                        this.setState(
+                            {
+                                isFirstLoading: false,
+                            },
+                            () => {
+                                this.getFieldSetHearder();
+                            }
+                        );
+                    }
+                } else {
+                    const {queryParams} = this.state;
+                    await this.getChannelEventList(); // 切换应用更新渠道数据
+                    this.setState(
+                        {
+                            currentPage: 1,
+                            filterData: [],
+                            resetCount: _.random(100000),
+                            queryParams: {
+                                ...queryParams, // 切换应用不需要清空风险类型、识别结果
+                                channel: '',
+                            },
+                        },
+                        () => {
+                            this.getFieldSetHearder(true);
+                        }
+                    );
+                }
+            }
+        );
+    };
+
+    // 请求搜索
+    doSearch = () => {
+        const {t = t => t} = this.props;
+        backTop();
+        const {maxQueryNumber} = this.state;
+        if (maxQueryNumber > MAX_QUERY_NUMBER) {
+            message.warning(t('风险原因已超查询上限，单次查询请控制在10个以内！'));
+            return;
+        }
+        this.setState({
+            listLoading: true,
+        }, () => {
+            this.getHistoryList();
+        });
+    };
+
+    exportData = (value = {}) => {
+        const { route, specialServiceId = '', t} = this.props;
+        const {tableColumns, isRandomSampling} = this.state;
+        let newSearchParams = this.getSearchParams();
+        const type = value?.type || 'csv';
+        newSearchParams.count = 10000;
+        if (value?.count) {
+            newSearchParams.count = value.count;
+        }
+        newSearchParams.isRandomSampling = isRandomSampling;
+        this.setState({
+            exportLoading: true,
+            exportTaskVisible: false,
+        });
+        const titleMap = {
+            POST_TEXT: '文本历史记录',
+            POST_TEXT_EN: '文本(英文)历史记录',
+            POST_TEXT_AR: '文本(阿语)历史记录',
+            POST_IMG: '图片历史记录',
+            POST_ARTICLE: '网页历史记录',
+            POST_AUDIO: '音频文件历史记录',
+            POST_AUDIO_B: '音频文件历史记录B类',
+            POST_AUDIO_EN: '音频文件(英语)历史记录',
+            POST_AUDIO_AR: '音频文件(阿语)历史记录',
+            POST_AUDIOCLIPS_EN: '音频片段(英语)历史记录',
+            POST_AUDIOCLIPS_AR: '音频片段(阿语)历史记录',
+            POST_AUDIOCLIPS: '音频文件片段历史记录',
+            POST_AUDIOCLIPS_B: '音频文件片段历史记录B类',
+            POST_AUDIOSTREAM: '音频流历史记录',
+            POST_AUDIOSTREAM_B: '音频流历史记录B类',
+            POST_AUDIOSTREAMCLIPS_B: '音频流片段历史记录B类',
+            POST_AUDIOSTREAMCLIPS: '音频流片段历史记录',
+            POST_AUDIOSTREAM_EN: '音频流(英文)历史记录',
+            POST_AUDIOSTREAMCLIPS_EN: '音频流(英文)片段历史记录',
+            POST_AUDIOSTREAM_AR: '音频流(阿语)历史记录',
+            POST_AUDIOSTREAMCLIPS_AR: '音频流(阿语)片段历史记录',
+            POST_VIDEO: '视频文件历史记录',
+            POST_VIDEO_AUDIO: '视频文件音频片段历史记录',
+            POST_VIDEOSTREAM: '视频流历史记录',
+            POST_VIDEOSTREAM_AUDIO: '视频流音频片段历史记录',
+            POST_VIDEOSTREAM_EN: '视频流(英文)历史记录',
+            POST_VIDEOSTREAM_AUDIO_EN: '视频流(英文)音频片段历史记录',
+            POST_VIDEOSTREAM_AR: '视频流(阿语)历史记录',
+            POST_VIDEOSTREAM_AUDIO_AR: '视频流(阿语)音频片段历史记录',
+            POST_MULTIMODAL: '多模态历史记录',
+        };
+
+        const tsTitleMap = {
+            'POST_NEXUS_TEXT': `${t('天枢-文本输入输出-历史记录表')}.${type}`,
+            'POST_NEXUS_IMAGE': `${t('天枢-图片输入输出-历史记录表')}.${type}`,
+            'POST_NEXUS_MULTIMODAL': `${t('天枢-图文输入输出-历史记录表')}.${type}`,
+        };
+
+        const serviceId = specialServiceId || route.routeData.serviceId;
+
+        let downloadTitle = t(titleMap[serviceId]);
+        const downloadUrl = MODEL_TYPE.HISTORY_LIST.DOWNLOAD;
+        newSearchParams.fieldSet = tableColumns.filter(item => item.name !== HISTORY_COLUMN.OPERATION).map(item => item.uuid);
+        const title = tsTitleMap[serviceId] || `${t('天净')}-${t(downloadTitle)}-${t('历史记录表')}.${type}`;
+        newSearchParams.fieldSet;
+        newSearchParams.fileExtension = type;
+        exportFile(downloadUrl, title, newSearchParams).then(() => {
+            this.setState({
+                exportLoading: false,
+                exportTaskVisible: false,
+                isRandomSampling: false,
+            });
+        });
+    };
+
+    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, displayMethod = 1) => {
+        text = formatDataToString(text);
+        const {t} = this.props;
+
+        const toolTipTitle = <span className={styles.tooltip}>{text}</span>;
+
+        return (
+            <Tooltip title={toolTipTitle} placement="left">
+                <CopyToClipboard
+                    className={classNames(
+                        styles.copy,
+                        {[styles['copy-line-break']]: displayMethod === 2}
+                    )}
+                    text={text || '-'}
+                    onCopy={() => message.success(t('复制成功'))}
+                >
+                    <span>{_.isNil(text) ? '-' : text}</span>
+                </CopyToClipboard>
+            </Tooltip>
+        );
+    };
+
+    audioRender = (text, record, index) => {
+        const { setTableKey } = this.props;
+        return (
+            <SMAudio
+                setTableKey={setTableKey}
+                audioUrl={text}
+                audioId={record.requestId}
+                showSpeedFlag={false}
+                showDownloadFlag={false}
+                showSilenceFlag={false}
+                showProgressFlag // zhangzhe 2022-10-17 列表上要显示进度条
+                showSimpleTimeFlag={false}
+            />
+        );
+    };
+
+    riskLevelRender = (text, record, index) => {
+        let riskLevelStr = '';
+        let riskLevel = '';
+        const data = RISK_LEVEL_LIST.filter(item => item.name === text) || [];
+        riskLevelStr = _.get(data, '[0].name', '');
+        riskLevel = _.get(data, '[0].value', '');
+        // 国际版直接 使用后端返回的值
+        return (
+            <SMRiskLevel riskLevel={riskLevel || text} riskLevelStr={riskLevelStr || text} />
+        );
+    };
+
+    renderDetail = (text, record, index) => {
+        const {queryParams, storageTime} = this.state;
+        const {route, t, specialServiceId} = this.props;
+        const {serviceId} = route.routeData;
+        const newServiceId = specialServiceId || serviceId;
+        if (DETAIL_LIST.includes(newServiceId)) {
+            const dom = [];
+            const basicOperationParams = {
+                record,
+                serviceId: serviceId,
+                queryParams,
+                rawValue: record.rawValue,
+                storageTime,
+            };
+            if ([
+                SERVICEID_LIST.POST_VIDEO,
+                SERVICEID_LIST.POST_VIDEOSTREAM,
+                SERVICEID_LIST.POST_VIDEOSTREAM_EN,
+                SERVICEID_LIST.POST_VIDEOSTREAM_AR,
+            ].includes(serviceId)) {
+                getAuthFunction(AUTH_FUNCTION.IMAGE_DETAIL)
+                    && dom.push(
+                        <span
+                            className={styles.action}
+                            onClick={() => { handleOperation({...basicOperationParams, type: PAGE_TYPE.IMG});}}
+                        >
+                            {t('截帧图片')}
+                        </span>
+                    );
+            }
+            dom.push(
+                <>
+                    {getAuthFunction(AUTH_FUNCTION.AUDIO_CLIPS_DETAIL) && (
+                        <span
+                            className={styles.action}
+                            onClick={() => { handleOperation({...basicOperationParams, type: PAGE_TYPE.AUDIO});}}
+                        >
+                            {t('音频片段')}
+                        </span>
+                    )}
+                    {getAuthFunction(AUTH_FUNCTION.DETAIL) && (
+                        <span
+                            className={styles.action}
+                            onClick={() => {
+                                this.clickDetail(index);
+                            }}
+                        >
+                            {t(record.detail || '详情')}
+                        </span>
+                    )}
+                </>
+            );
+            // 视频流中英文阿语
+            if ([
+                SERVICEID_LIST.POST_VIDEOSTREAM,
+                SERVICEID_LIST.POST_VIDEOSTREAM_EN,
+                SERVICEID_LIST.POST_VIDEOSTREAM_AR,
+            ].includes(serviceId)
+            && getAuthFunction(AUTH_FUNCTION.VIDEOSTREAM_INFO_DETAIL)) {
+                dom.push(
+                    <span
+                        className={styles.action}
+                        onClick={() => {
+                            this.setState({
+                                streamModalVisible: true,
+                                currentStreamRecord: record,
+                            });
+                        }}
+                    >
+                        {t('直播详情')}
+                    </span>
+                );
+            }
+            return dom;
+        }
+        if (AUDIO_CLIPS_MAP[newServiceId]) {
+            const operationDom = [];
+            operationDom.push(
+                <span
+                    className={styles.action}
+                    onClick={() => {
+                        const requestId = _.get(record?.requestId?.split('_'), '[0]');
+                        window.open(__ASSETS_PREFIX__ + `${AUDIO_CLIPS_MAP[newServiceId].jumpUrl}?searchKey=requestId&searchContent=${requestId}&startTime=${queryParams.startTime - 24 * 60 * 60 * 1000}&endTime=${queryParams.endTime}`);
+                    }}
+                >
+                    {t(AUDIO_CLIPS_MAP[newServiceId].title)}
+                </span>
+            );
+            if (getAuthFunction(AUTH_FUNCTION.DETAIL)) {
+                operationDom.push(
+                    <span
+                        className={styles.action}
+                        onClick={() => {
+                            this.clickDetail(index);
+                        }}
+                    >
+                        {t(record.detail || '详情')}
+                    </span>
+                );
+            }
+            return operationDom;
+        }
+
+        return getAuthFunction(AUTH_FUNCTION.DETAIL) && (
+            <span
+                className={styles.action}
+                onClick={() => {
+                    this.clickDetail(index);
+                }}
+            >
+                {t(record.detail || '详情')}
+            </span>
+        );
+    };
+
+    detailAndAudioRender = (text, record, index) => {
+        const {t} = this.props;
+        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);
+                    }}
+                >
+                    {t('详情')}
+                </span>
+            </div>
+        );
+    };
+
+    newHighLightRender = (text, record, index, displayMethod = 1) => {
+        const {t} = this.props;
+        const keywords = record[HISTORY_COLUMN.MATCHED_ITEM];
+        const toolTipTitle = (
+            <span className={styles.tooltip}>
+                <SMText content={text} keywords={keywords} />
+            </span>
+        );
+
+        const newToolTipTitle = (
+            <span className={styles.tooltip}>
+                <SMNewText content={text} keywords={record.textPosition} />
+            </span>
+        );
+
+        return (
+            <Tooltip title={record.textPosition && record.textPosition.length ? newToolTipTitle : toolTipTitle} placement="left">
+                <CopyToClipboard
+                    onCopy={() => message.success(t('复制成功'))}
+                    text={text}
+                    className={classNames(
+                        styles.copy,
+                        {[styles['copy-line-break']]: displayMethod === 2}
+                    )}
+                >
+                    <div>
+                        {
+                            record.textPosition && record.textPosition.length
+                                ? (
+                                    <SMNewText
+                                        content={text}
+                                        keywords={record.textPosition}
+                                    />
+                                )
+                                : (
+                                    <SMText
+                                        content={text}
+                                        keywords={keywords}
+                                    />)
+                        }
+
+                    </div>
+                </CopyToClipboard>
+
+            </Tooltip>
+        );
+    };
+
+    highLightRender = (text, record, index, displayMethod = 1) => {
+        const {t} = this.props;
+        const {
+            matchedItemDetail = [],
+            matchedItem = '',
+        } = record.currentData.output;
+        const riskLevel = record.riskLevel.split('|').length > 0
+            ? record.riskLevel.split('|')[1]
+            : '';
+        const keywords = riskLevel === RISKLEVEL.PASS
+            ? ''
+            : matchedItemDetail.length
+                ? matchedItemDetail.join(',')
+                : matchedItem;
+        ;
+        const toolTipTitle = (
+            <span className={styles.tooltip}>
+                <SMText content={text} keywords={keywords} />
+            </span>
+        );
+        const newToolTipTitle = (
+            <span className={styles.tooltip}>
+                <SMNewText content={text} keywords={record.textPosition} />
+            </span>
+        );
+        const isCopy
+             = TjCopy.filter(item => record.currentData.input[item] === text || record.audioText === text).length;
+        return (
+            <Tooltip title={record.textPosition ? newToolTipTitle : toolTipTitle} placement="left">
+                <CopyToClipboard
+                    text={isCopy && (text || '-')}
+                    className={isCopy ? classNames(
+                        styles.copy,
+                        {[styles['copy-line-break']]: displayMethod === 2}
+                    ) : styles.text}
+                    onCopy={() => isCopy && message.success(t('复制成功'))}
+                >
+                    <span>
+                        {
+                            record.textPosition ? (
+                                <SMNewText
+                                    content={text}
+                                    keywords={record.textPosition}
+                                    ellipsis
+                                />
+                            )
+                                : (
+                                    <SMText
+                                        content={text}
+                                        keywords={keywords}
+                                        ellipsis
+                                    />
+                                )
+                        }
+                    </span>
+                </CopyToClipboard>
+
+            </Tooltip>
+        );
+    };
+
+    // 获取单条记录的反馈按钮选中的禁用状态
+    getRecordFeedbackDisabled = record => {
+        const serviceId = this?.props?.route?.routeData?.serviceId;
+        let feedback = '';
+        let errorDisabled = '';
+        let missDisabled = '';
+        feedback = record[HISTORY_COLUMN.FEEDBACK];
+        const tsDisabled = record?.multiResults?.value?.length <= 0 && serviceId === 'POST_NEXUS_MULTIMODAL'; // 天枢 文图输入输出 multiResults 没有数据则按钮置灰
+        errorDisabled = feedback
+            || record[HISTORY_COLUMN.RISK_LEVEL] === _.get(RISK_LEVEL_LIST.filter(item => item.value === PASS), '[0].name', '')
+            || record[HISTORY_COLUMN.RISK_LEVEL] === PASS || tsDisabled;
+        // === PASS兼容国际化
+        missDisabled = feedback
+            || record[HISTORY_COLUMN.RISK_LEVEL] === _.get(RISK_LEVEL_LIST.filter(item => item.value === REJECT), '[0].name', '')
+            || record[HISTORY_COLUMN.RISK_LEVEL] === REJECT || tsDisabled;
+        return {
+            errorDisabled,
+            missDisabled,
+            isAllDisabled: errorDisabled && missDisabled,
+        };
+    };
+
+    feedbackRender = (text, record, index) => {
+        const {t} = this.props;
+        const {errorDisabled, missDisabled} = this.getRecordFeedbackDisabled(record);
+        return getAuthFunction(AUTH_FUNCTION.FEEDBACK) && (
+            <div>
+                <span
+                    className={[
+                        styles.action,
+                        errorDisabled ? styles.disabled : '',
+                    ].join(' ')}
+                    style={{ marginRight: '5px' }}
+                    onClick={() => {
+                        if (!errorDisabled) {
+                            this.handleFeedback(record, FEEDBACK_TYPE.ERROR);
+                        }
+                    }}
+                >
+                    {t('误杀')}
+                </span>
+                <span
+                    className={[
+                        styles.action,
+                        missDisabled ? styles.disabled : '',
+                    ].join(' ')}
+                    onClick={() => {
+                        if (!missDisabled) {
+                            this.handleFeedback(record, FEEDBACK_TYPE.MISS);
+                        }
+                    }}
+                >
+                    {t('漏杀')}
+                </span>
+            </div>
+        );
+    };
+
+    isLanguage = () => {
+        const serviceId = this.props.route.routeData.serviceId;
+        if (serviceId.includes(EN)) {
+            return EN;
+        };
+        if (serviceId.includes(AR)) {
+            return AR;
+        }
+    };
+
+    /**
+     * 音频流、视频流开始时间、结束时间点击详情特殊处理；
+     * @param {y} startTime 音频流音频流播放时长、视频流视频开始播放时间
+     * @param {*} endTime 结束时间
+     * @param {*} type 音频、视频类型
+     */
+    specialTimeParams = (startTime, endTime, type) => {
+        // 可查询的历史记录天数
+        const {storageTime} = this.state;
+        // 查询最小时间
+        const leastTime = moment(moment().format('x') - (storageTime - 1) * DAY_TIMESTAMP).startOf('day').format('x');
+        let newStartTime;
+        switch (type) {
+            case PAGE_DETAIL_TYPE.AUDIO_DETAIL:
+                newStartTime = moment(endTime - startTime * 1000 - DAY_TIMESTAMP).startOf('day').format('x');
+                break;
+            case PAGE_DETAIL_TYPE.VIDEO_DETAIL:
+                newStartTime = moment(startTime - DAY_TIMESTAMP).startOf('day').format('x');
+                break;
+        }
+        // 当开始时间小于开始查询最低时间，用最低时间；
+        return Math.max(newStartTime, leastTime);
+    };
+
+    // 音频流 需要重新请求接口获取详情
+    getDetail = async currentData => {
+        const {serviceId} = this.props.route.routeData;
+        const newParams = this.getSearchParams();
+        newParams.serviceId = this.isLanguage()
+            ? `${serviceId}${this.isLanguage()}`
+            : serviceId;
+        const requestIdObj =  FAST_QUERY.filter(item => item.key === HISTORY_COLUMN.REQUESTID)[0] || {};
+        newParams.search = [
+            {
+                fieldTag: requestIdObj.key,
+                method: requestIdObj.method,
+                value: currentData[HISTORY_COLUMN.REQUESTID],
+            },
+        ];
+        newParams.riskLevel = [RISKLEVEL.REJECT, RISKLEVEL.REVIEW];
+        newParams.offset = 0;
+        newParams.count = RISK_NUMBER;
+        try {
+            // 音频流 -点击详情 查询时间逻辑特殊处理
+            const {timestamp, audioTime} = currentData.rawValue;
+            newParams.startTime = this.specialTimeParams(audioTime, timestamp, PAGE_DETAIL_TYPE.AUDIO_DETAIL) * 1;
+            newParams.endTime = timestamp;
+        } catch (error) {
+            console.error(error);
+        }
+        const {listData} = await this.getFieldSetList(newParams);
+        const valueList = [];
+        listData.forEach(item => {
+            valueList.push(_.pick(item, [
+                HISTORY_COLUMN.REQUESTID,
+                HISTORY_COLUMN.AUDIO_TIME_SLOT,
+                HISTORY_COLUMN.AUDIO_TEXT,
+                HISTORY_COLUMN.RISK_LEVEL,
+                HISTORY_COLUMN.DESCRIPTION,
+                HISTORY_COLUMN.AUDIO_URL,
+                HISTORY_COLUMN.MODEL,
+            ]));
+        });
+        if (currentData[HISTORY_COLUMN.AUDIO_EVIDENCE]) {
+            currentData[HISTORY_COLUMN.AUDIO_EVIDENCE].value = valueList;
+        }
+
+        return currentData;
+    };
+    // 视频流 需要掉三次接口获取详情
+    getVideoDetail = async currentData => {
+        const {route} = this.props;
+        const {serviceId} = route.routeData;
+        const newParams = {...this.getSearchParams()};
+        newParams.serviceId = this.isLanguage()
+            ? `${SERVICEID_LIST[`${serviceId}_AUDIO`]}${this.isLanguage()}`
+            : SERVICEID_LIST[`${serviceId}_AUDIO`];
+        const requestIdObj =  FAST_QUERY.filter(item => item.key === HISTORY_COLUMN.REQUESTID)[0] || {};
+        newParams.search = [
+            {
+                fieldTag: requestIdObj.key,
+                method: requestIdObj.method,
+                value: currentData[HISTORY_COLUMN.REQUESTID],
+            },
+        ];
+        newParams.riskLevel = [RISKLEVEL.REJECT, RISKLEVEL.REVIEW];
+        newParams.offset = 0;
+        newParams.count = RISK_NUMBER;
+        try {
+            const {startTime, timestamp} = currentData.rawValue;
+            // 视频流点击详情 查询逻辑特殊处理
+            if (startTime) {
+                newParams.startTime = this.specialTimeParams(startTime, timestamp, PAGE_DETAIL_TYPE.VIDEO_DETAIL) * 1;
+                newParams.endTime = timestamp;
+            }
+        } catch (error) {
+            console.error(error);
+        }
+        const params = {...newParams};
+        params.serviceId = this.isLanguage()
+            ? `${SERVICEID_LIST[`${serviceId}_IMG`]}${this.isLanguage()}`
+            : SERVICEID_LIST[`${serviceId}_IMG`];
+        const {listData} = await this.getFieldSetList(newParams);
+        const {listData: data} = await this.getFieldSetList(params);
+        let valueList = [];
+        let resultList = [];
+        listData.forEach(item => {
+            valueList.push(_.pick(item, [
+                HISTORY_COLUMN.REQUESTID,
+                HISTORY_COLUMN.AUDIO_TIME_SLOT,
+                HISTORY_COLUMN.AUDIO_TEXT,
+                HISTORY_COLUMN.RISK_LEVEL,
+                HISTORY_COLUMN.DESCRIPTION,
+                HISTORY_COLUMN.MODEL,
+                HISTORY_COLUMN.AUDIO_URL,
+            ]));
+        });
+        data.forEach(item => {
+            resultList.push(_.pick(item, [
+                HISTORY_COLUMN.IMG_FILE_URL,
+                HISTORY_COLUMN.REQUESTID,
+                HISTORY_COLUMN.CUT_TIME,
+                HISTORY_COLUMN.OCR_TEXT,
+                HISTORY_COLUMN.RISK_LEVEL,
+                HISTORY_COLUMN.DESCRIPTION,
+                HISTORY_COLUMN.MODEL,
+                HISTORY_COLUMN.MATCHED_ITEM,
+            ]));
+        }, []);
+        if (currentData[HISTORY_COLUMN.AUDIO_EVIDENCE]) {
+            currentData[HISTORY_COLUMN.AUDIO_EVIDENCE].value = valueList;
+        }
+        if (currentData[HISTORY_COLUMN.RESULT]) {
+            currentData[HISTORY_COLUMN.RESULT].value = resultList;
+        }
+
+        return currentData;
+    };
+
+    // 输入框绑定按钮事件
+    onFilterKeyDown = e => {
+        if (e && e.key === KEYBOARD_CODER.ENTER) {
+            this.setState({currentPage: 1}, () => this.doSearch());
+        }
+    };
+
+    changeDetailData = async e => {
+        const {specialServiceId, route, t} = this.props;
+        const {serviceId} = route.routeData;
+        // 没有打开详情时 不做处理
+        if (!this.state.newDetailVisible) {
+            return;
+        }
+        const {
+            detailIndex,
+            listData,
+            currentPage,
+            pageSize,
+            listTotalCount,
+        } = this.state;
+        let newIndex = 0;
+        let newDetailData = {};
+        if (e && e.keyCode === 37) {
+            if (currentPage === 1 && detailIndex === 0) {
+                message.info(t('已经是第一条数据了'));
+                return;
+            } else if (detailIndex === 0) {
+                this.setState(
+                    {
+                        currentPage: currentPage - 1,
+                        detailIndex: pageSize - 1,
+                    },
+                    () => {
+                        this.doSearch();
+                    }
+                );
+            } else {
+                newIndex = detailIndex - 1;
+                newDetailData = listData[newIndex];
+                if ((serviceId === SERVICEID_LIST.POST_AUDIOSTREAM || serviceId === SERVICEID_LIST.POST_AUDIO) && !specialServiceId) {
+                    newDetailData = await this.getDetail({...newDetailData});
+                }
+                if ((serviceId === SERVICEID_LIST.POST_VIDEOSTREAM || serviceId === SERVICEID_LIST.POST_VIDEO) && !specialServiceId) {
+                    newDetailData = await this.getVideoDetail({...newDetailData});
+                }
+                this.setState({
+                    detailIndex: newIndex,
+                    detailData: newDetailData,
+                });
+            }
+        } else if (e && e.keyCode === 39) {
+            if (
+                (currentPage - 1) * pageSize + detailIndex + 1
+                 === listTotalCount
+            ) {
+                message.info(t('已经是最后一条数据了'));
+                return;
+            } else if (detailIndex === pageSize - 1) {
+                this.setState(
+                    {
+                        currentPage: currentPage + 1,
+                        detailIndex: 0,
+                    },
+                    () => {
+                        this.doSearch();
+                    }
+                );
+            } else {
+                newIndex = detailIndex + 1;
+                newDetailData = listData[newIndex] || [];
+                if ((serviceId === SERVICEID_LIST.POST_AUDIOSTREAM || serviceId === SERVICEID_LIST.POST_AUDIO) && !specialServiceId) {
+                    newDetailData = await this.getDetail({...newDetailData});
+                }
+                if ((serviceId === SERVICEID_LIST.POST_VIDEOSTREAM || serviceId === SERVICEID_LIST.POST_VIDEO) && !specialServiceId) {
+                    newDetailData = await this.getVideoDetail({...newDetailData});
+                }
+                this.setState({
+                    detailIndex: newIndex,
+                    detailData: newDetailData,
+                });
+            }
+        }
+    };
+
+    clickDetail = async index => {
+        const {specialServiceId, route} = this.props;
+        const {serviceId} = route.routeData;
+        const {listData} = this.state;
+        let currentData = listData[index];
+        // 音频流获取详情中的审核结果
+        if (AUDIO_ALL_LANGUAGE.includes(serviceId)
+             && !specialServiceId) {
+            currentData = await this.getDetail({...currentData});
+        }
+        if (VIDEO_ALL_LANGUAGE.includes(serviceId)
+             && !specialServiceId) {
+            currentData = await this.getVideoDetail({...currentData});
+        }
+        this.setState({
+            newDetailVisible: true,
+            detailData: currentData,
+            detailIndex: index,
+        });
+    };
+
+    closeDetail = () => {
+        this.setState({
+            detailVisible: false,
+            detailIndex: 0,
+        });
+    };
+
+    /**
+      * 详情抽屉中的 点击事件（筛选，重置画像之类的）
+      * @param {*} actionType 行为类型
+      * @param {*} key 字段名
+      * @param {*} value 对应字段的值
+      * @param {*} otherData 其余data对象
+      */
+    onActionClick = async (actionType, key, value, otherData) => {
+        const { dispatch, route, t } = this.props;
+        const {serviceId} = route.routeData;
+        const {
+            queryParams,
+            currentGlobalFilter,
+            ignoreList,
+            sensitiveList,
+            ignoreMd,
+            sensitiveMd,
+            tokenIdBlackMd,
+            tokenIdBlackList,
+            detailData,
+        } = this.state;
+
+        const { organization } = currentGlobalFilter;
+        switch (actionType) {
+            case 'screen':
+                let {
+                    startTime,
+                    endTime,
+                } = queryParams;
+                // 产品是流类型&筛选是流水号时间查询走特殊逻辑
+                if (VIDEO_ALL_LANGUAGE.includes(serviceId)
+                    && !([SERVICEID_LIST.POST_VIDEO].includes(serviceId))
+                    && key === HISTORY_COLUMN.REQUESTID) {
+                    try {
+                        const {startTime: newStartTime, timestamp} = detailData.rawValue;
+                        // 视频流 流水号 截帧图片、片段筛选时间特殊处理
+                        startTime = this.specialTimeParams(newStartTime, timestamp, PAGE_DETAIL_TYPE.VIDEO_DETAIL) * 1;
+                        endTime = timestamp;
+                    } catch (error) {
+                        console.error(error);
+                    }
+                }
+                const encodeValue = encodeURIComponent(value);
+                let searchQuery = `isScreen=true&startTime=${startTime}&endTime=${endTime}`
+                    + `&searchKey=${key}&searchContent=${encodeValue}`;
+                // 从配置中读取要跳转的路由
+                let searchPath = otherData.path;
+                let newUrl = encodeURI(`${searchPath}?${searchQuery}`);
+                window.open(__ASSETS_PREFIX__ + newUrl);
+                break;
+            case 'resetPortrait':
+                const appIdList = Storage.get(STORAGE_LIST_NAME.APPID_LIST) || [];
+                let account = `${organization}_${value}`;
+                const appId = _.get(
+                    appIdList.filter(item => detailData.appId === item.appName),
+                    '[0].appId',
+                    ''
+                );
+                account = detailData.isTokenSeparate === IS_TOKEN_VALUE
+                    ? `${organization}_${appId}_${value}`
+                    : `${organization}_${value}`;
+                let code = await dispatch({
+                    type: 'history/fetchResetProfile',
+                    payload: {
+                        organization,
+                        key: account,
+                        type: otherData.type,
+                        serviceId: route.routeData.serviceId,
+                    },
+                });
+                if (code === 1100) {
+                    message.success(t('重置画像成功'));
+                } else {
+                    message.error(t('重置画像失败,请重试'));
+                }
+                break;
+            case 'addList':
+                const { type } = otherData;
+                let newCurrentListData = [];
+                let newCurrentMdList = [];
+                switch (type) {
+                    case 'ignore':
+                        newCurrentListData = ignoreList;
+                        newCurrentMdList = ignoreMd;
+                        break;
+                    case 'sensitive':
+                        newCurrentListData = sensitiveList;
+                        newCurrentMdList = sensitiveMd;
+                        break;
+                    case 'tokenId':
+                        newCurrentListData = tokenIdBlackList;
+                        newCurrentMdList = tokenIdBlackMd;
+                        break;
+                }
+                this.setState({
+                    currentListData: newCurrentListData,
+                    listModalVisible: true,
+                    currentListValue: value,
+                    currentMdList: newCurrentMdList,
+                    actionType: type,
+                });
+                break;
+        }
+    };
+
+    listOnSearch = (pagination, filters, sorter) => {
+        const { current, pageSize } = pagination;
+        let { order } = sorter;
+        order = order === 'ascend' ? 'asc' : 'desc';
+        const { queryParams } = this.state;
+        let newQueryParams = _.cloneDeep(queryParams);
+        newQueryParams.sort = order;
+        this.setState(
+            {
+                currentPage: current,
+                pageSize: pageSize,
+                queryParams: newQueryParams,
+            },
+            () => {
+                this.doSearch();
+            }
+        );
+    };
+    // 通过字段配置的方式获取数据
+    getFieldSetList = async parameter => {
+        const {dispatch} = this.props;
+        return await dispatch({
+            type: MODEL_TYPE.HISTORY_LIST.TEXT_LIST,
+            payload: parameter,
+        });
+    };
+    // 获取历史记录列表数据
+    getHistoryList = async () => {
+        const newParams = this.getSearchParams();
+        const {listData, totalCount, realTotalCount} = await this.getFieldSetList(newParams);
+        this.setState({
+            listLoading: false,
+            selectedContents: [], // 刷新数据后清空选中值
+            tableDataSource: listData,
+            listData,
+            listTotalCount: totalCount,
+            listRealTotalCount: _.isNil(realTotalCount) ? undefined : realTotalCount,
+            detailData: listData[this.state.detailIndex],
+        });
+    };
+
+    // 获取查询接口参数
+    getSearchParams = () => {
+        const { route, specialServiceId = '' } = this.props;
+        const {
+            currentGlobalFilter,
+            queryParams,
+            currentPage,
+            pageSize,
+            filterData,
+            channelEventList,
+            riskLevelList,
+            riskTypeMap,
+            riskLabelList,
+        } = this.state;
+        const { organization, appId } = currentGlobalFilter;
+        const serviceId = specialServiceId || route.routeData.serviceId;
+        const search = _.cloneDeep(filterData).filter(item => item.value && item.value.length).map(item => {
+            delete item.enum;
+            return item;
+        }) || [];
+        const channelList = channelEventList.map(item => item.channel);
+        const serviceIds = [
+            SERVICEID_LIST.POST_AUDIO,
+            SERVICEID_LIST.POST_AUDIO_EN,
+            SERVICEID_LIST.POST_AUDIO_AR,
+            SERVICEID_LIST.POST_AUDIOSTREAM,
+            SERVICEID_LIST.POST_AUDIOSTREAM_EN,
+            SERVICEID_LIST.POST_AUDIOSTREAM_AR,
+            SERVICEID_LIST.POST_VIDEO,
+            SERVICEID_LIST.POST_VIDEOSTREAM_EN,
+            SERVICEID_LIST.POST_VIDEOSTREAM_AR,
+            SERVICEID_LIST.POST_VIDEOSTREAM,
+        ];
+        let searchParams = {
+            organization: organization,
+            serviceId: serviceId,
+            appId: appId,
+            count: pageSize,
+            offset: (currentPage - 1) * pageSize,
+            search,
+            ...queryParams,
+        };
+        if (_.isEqual(_.sortBy(channelList), _.sortBy(queryParams.channel))) {
+            delete searchParams.channel;
+        }
+        if (_.isEqual(_.sortBy(riskLevelList), _.sortBy(queryParams.riskLevel))) {
+            delete searchParams.riskLevel;
+        }
+        if (searchParams.description && _.isArray(searchParams.description)) {
+            if (searchParams.description.includes('all')) {
+                delete searchParams.description;
+            }
+            else {
+                try {
+                    const finalLabel = getFinalDescription(searchParams.description, riskLabelList);
+                    const formatFinalLabel = _.map(finalLabel, ele => {
+                        return _.map(ele, item => {
+                            return item.split('|')[0];
+                        }).join(getLocale() === 'zh-CN' ? '：' : ':'); // 架构设计不合理，导致风险类型分隔符和语种有关，前端需要兼容
+                    });
+                    searchParams.description = formatFinalLabel;
+                } catch (error) {}
+            }
+        }
+
+        // 音频文件、音频流、视频文件、视频流风险类型 riskType 传参改成riskDescription;
+        if (serviceIds.includes(serviceId)) {
+            if (_.isArray(searchParams.riskType)) {
+                searchParams.riskDescription = searchParams.riskType.map(item => riskTypeMap[item]);
+            }
+            else {
+                searchParams.riskDescription = riskTypeMap[searchParams.riskType];
+            }
+            delete searchParams.riskType;
+        }
+        // riskType 值为json 特殊处理
+        if (_.isArray(searchParams.riskType) && searchParams.riskType.length && searchParams.riskType.every(item => isJson(item))) {
+            let riskTypeList = [];
+            searchParams.riskType.forEach(item => {
+                riskTypeList = riskTypeList.concat(JSON.parse(item));
+            });
+            searchParams.riskType = JSON.stringify(riskTypeList);
+        };
+        // 处理一下searchParams，如果为'' || 'all', 则删除该项
+        let newSearchParams = formatArrayParams(formatSearchParams(searchParams));
+        return newSearchParams;
+    };
+
+    // 获取渠道事件列表
+    getChannelEventList = async () => {
+        const { dispatch, route } = this.props;
+        const { appId, organization } = this?.state?.currentGlobalFilter || {};
+        const params = {
+            organization,
+            serviceId: route.routeData.serviceId,
+            onlyChannel: true,
+        };
+        if (appId !== 'all') {
+            params.appId = appId;
+        }
+        if (dispatch) {
+            let channelEventList = await dispatch({
+                type: 'base/fetchChannelEventList',
+                payload: params,
+            });
+            if (channelEventList) {
+                this.setState({
+                    channelEventList,
+                });
+                let channelMap = {};
+                let eventIdMap = {};
+                let newOptionData = [];
+                const channels = [];
+                let newChannelEventData = _.cloneDeep(
+                    this.state.defaultChannelEventData
+                );
+                channelEventList.forEach(item => {
+                    newOptionData.push({
+                        label_value: item.channel,
+                        label_name: item.displayName,
+                    });
+                    if (item.channel !== '') {
+                        channelMap[item.channel] = item.channelName;
+                    }
+                    if (item.clientEventId !== '') {
+                        eventIdMap[item.clientEventId] = item.eventName;
+                    }
+                    channels.push(item.channel);
+                });
+                newChannelEventData.data.selectData.optionData = newOptionData;
+                newChannelEventData.data.selectData.doSearch = this.doSearch;
+                this.setState({
+                    defaultChannelEventData: newChannelEventData,
+                    channelMap,
+                    eventIdMap,
+                    resetCount: _.random(100000),
+                });
+            }
+        }
+    };
+
+    // 获取风险标签
+    getNewRiskLabelList = async () => {
+        const { dispatch, route } = this.props;
+        const newDescriptionList = _.cloneDeep(this.state.defaultDescriptionData);
+        if (dispatch) {
+            const labelConfig = getLabelConfig(route.routeData.serviceId);
+            const riskLabelList = await dispatch({
+                type: labelConfig.action,
+                payload: {
+                    product: labelConfig.product,
+                    category: 'rule',
+                },
+            });
+            const riskLabelOption = handleLabelAll(riskLabelList, newDescriptionList.data.selectData);
+            newDescriptionList.data.selectData.optionData = riskLabelOption;
+            // 风险排行榜带过来风险原因默认参数
+            const defaultDescription = Storage.get(STORAGE_LIST_NAME.DESCRIPTION);
+            if (defaultDescription) {
+                newDescriptionList.data.selectData.defaultValue = defaultDescription;
+            }
+            this.setState(
+                {
+                    defaultDescriptionData: newDescriptionList,
+                    riskLabelList,
+                    riskLabelOption,
+                });
+        }
+    };
+
+    // 获取风险类型列表
+    getRiskTypeList = async () => {
+        const { dispatch, route } = this.props;
+        const {serviceId} = route.routeData;
+        const params = {organization: this.state.currentGlobalFilter.organization};
+        if ([SERVICEID_MAP.ASR_B, SERVICEID_MAP.ASR_STREAM_B].includes(serviceId)) {
+            params.product = 'PRODUCT_TEXT_EN';
+        }
+        else {
+            params.serviceId = serviceId;
+        }
+        if (dispatch) {
+            let riskTypeList = await dispatch({
+                type: 'base/fetchRiskTypeList',
+                payload: params,
+            });
+            let newRiskTypeData = _.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;
+            newRiskTypeData.data.selectData.doSearch = this.reDoSearch;
+            this.setState({
+                defaultRiskTypeData: newRiskTypeData,
+                riskTypeMap: newRiskTypeMap,
+                riskTypeList: riskTypeList,
+            });
+        }
+    };
+
+    // 给columns加上渲染的函数
+    formatTableColumn = (dataSource = []) => {
+        const newData = _.cloneDeep(dataSource);
+        const {route, specialServiceId, t, currentLang} = this.props;
+        const serviceId =  route.routeData.serviceId;
+        if ([
+            SERVICEID_LIST.POST_AUDIOCLIPS,
+            SERVICEID_LIST.POST_VIDEO_AUDIO,
+            SERVICEID_LIST.POST_VIDEOSTREAM_AUDIO,
+            SERVICEID_LIST.POST_AUDIOSTREAMCLIPS,
+            SERVICEID_LIST.POST_AUDIOSTREAMCLIPS_EN,
+            SERVICEID_LIST.POST_AUDIOSTREAMCLIPS_AR,
+            SERVICEID_LIST.POST_VIDEOSTREAM_AUDIO_EN,
+            SERVICEID_LIST.POST_VIDEOSTREAM_AUDIO_AR,
+            SERVICEID_LIST.POST_AUDIOCLIPS_EN,
+            SERVICEID_LIST.POST_AUDIOCLIPS_AR,
+            SERVICEID_LIST.POST_AUDIOCLIPS_B,
+            SERVICEID_LIST.POST_AUDIOSTREAMCLIPS_B,
+            SERVICEID_LIST.POST_AUDIOSTREAMCLIPS_B,
+        ].includes(specialServiceId || serviceId)) {
+            newData.push({
+                name: t(PLAY),
+                uuid: moment().format('x'),
+                key: HISTORY_COLUMN.AUDIO_URL_TWO,
+                dataIndex: HISTORY_COLUMN.AUDIO_URL,
+            });
+        }
+        if ([
+            SERVICEID_LIST.POST_AUDIO,
+            SERVICEID_LIST.POST_AUDIO_EN,
+            SERVICEID_LIST.POST_AUDIO_B,
+            SERVICEID_LIST.POST_AUDIO_AR,
+        ].includes(specialServiceId || serviceId)) {
+            newData.push({
+                name: t(PLAY),
+                uuid: moment().format('x'),
+                key: HISTORY_COLUMN.AUDIO_URL_TWO,
+                dataIndex: HISTORY_COLUMN.URL,
+            });
+        }
+        newData.push({
+            name: HISTORY_COLUMN.OPERATION,
+            uuid: moment().format('x'),
+            key: OPERATION,
+            [RENDER_TYPE.DETAIL]: true,
+        });
+        const tableColumns = newData.map(item => {
+            item.title = item.name || item.title;
+            item.key = item.fieldTag || item.key;
+            item.dataIndex = item.fieldTag || item.dataIndex || item.key;
+            item.width = item.width || WIDTH;
+
+            switch (item.key) {
+                case HISTORY_COLUMN.TEXT:
+                case HISTORY_COLUMN.AUDIO_TEXT:
+                case HISTORY_COLUMN.ORIGINAL_TEXT:
+                    item.width = item.width || WIDTH_LANG;
+                    item.render = (text, record, index) => this.newHighLightRender(text, record, index, item.displayMethod);
+                    break;
+                case HISTORY_COLUMN.CONTENT:
+                    item.width = item.width || WIDTH_LANG;
+                    item.render = (text, record) => contentRender(text, record);
+                    break;
+                case HISTORY_COLUMN.RISK_LEVEL:
+                    item.render = this.riskLevelRender;
+                    item.width = item.width || 150;
+                    break;
+                case HISTORY_COLUMN.OPERATION:
+                    // 视频、音频操作多两个跳转链接
+                    item.width = item.width || (DETAIL_LIST.includes(serviceId) ? WIDTH_LANG : WIDTH);
+                    item.render = this.renderDetail;
+                    item.fixed = 'right';
+                    break;
+                case HISTORY_COLUMN.FEEDBACK:
+                    item.render = this.feedbackRender;
+                    item.width = item.width || (LOCALE_TYPE.EN ===  currentLang ? WIDTH_LANG : WIDTH);
+                    break;
+                case HISTORY_COLUMN.REQUESTID:
+                case HISTORY_COLUMN.TIMESTAMP:
+                case HISTORY_COLUMN.TOKENID:
+                    item.render = (text, record, index) => this.textRender(text, record, index, item.displayMethod);
+                    item.width = item.width || 150;
+                    break;
+                case HISTORY_COLUMN.AUDIO_URL_TWO:
+                    item.render = this.audioRender;
+                    item.width = 150;
+                    break;
+                case HISTORY_COLUMN.PHONE_RISK:
+                case HISTORY_COLUMN.DEVICE_RISK:
+                    item.render = (text, record, index) => this.textRender(formatSpecialFeature(text), record, index);
+                    break;
+                case HISTORY_COLUMN.MULTI_CONTENTS:
+                    item.render = (text, record, index) => <MultiContentsRender data={text} record={record} />;
+                    break;
+                default:
+                    item.render = (text, record, index) => this.textRender(text, record, index, item.displayMethod);
+                    break;
+            }
+
+            return item;
+        });
+        return tableColumns;
+    };
+    // 获取所有字段
+    getFieldList = async () => {
+        const { currentGlobalFilter } = this.state;
+        const { dispatch } = this.props;
+        let list = [];
+        const result = await dispatch({
+            type: MODEL_TYPE.FIELD_URL_LIST.FIELD_SET_ADD_LIST,
+            payload: {organization: currentGlobalFilter.organization},
+        });
+        if (result && result.length) {
+            result.forEach(item => {
+                list = list.concat(item.value);
+            });
+        }
+        return list;
+    };
+    // 获取表头
+    getFieldSetHearder = async isRest => {
+        const {dispatch, route, currentUser, specialServiceId, t} = this.props;
+        const serviceId = specialServiceId || route.routeData.serviceId;
+        const contents = await dispatch({
+            type: 'manage/queryFieldSetPage',
+            payload: {
+                organization: this.state.currentGlobalFilter.organization,
+                serviceId,
+                pageCategory: FIELD_SOURCE_TYPE.HISTORY_DETAIL,
+            },
+        });
+        const acccount = currentUser.account;
+        // 音频、音频流serviceId 和其他地方不一致
+        const fieldSort = Storage.get(`${SM_FIELD_SORT}_${serviceId}_${acccount}`);
+        const list =  [];
+        const detailData = {}; // 详情中的数据
+        const tableCloumnList = []; // 表头数据
+        const searchList = []; // 筛选条件
+        const newFilterData = []; // 默认高级模式
+        let isFirst = false;
+        const fieldList = await this.getFieldList();
+        if (_.isArray(fieldSort)) {
+            fieldSort.forEach(item => {
+                const key = item.key || item.name;
+                fieldList.forEach(cItem => {
+                    if (key === cItem.fieldTag || key === cItem.uuid) {
+                        item.uuid = cItem.uuid;
+                        item.fieldTag = cItem.fieldTag;
+                        item.name = cItem.name;
+                        item.displayMethod = cItem.displayMethod;
+                        list.push(item);
+                    }
+                });
+            });
+            Storage.set(`${SM_FIELD_SORT}_${serviceId}_${acccount}`, list);// 更新缓存，缓存中数据和接口请求数据保持一致
+        }
+        contents.map(item => {
+            switch (item.name) {
+                case FILED_SET_DETAIL.LIST:
+                    item.value.forEach(item => {
+                        if (item.fieldTag === FIELD_NAME_LIST.REQUESTID) {
+                            tableCloumnList.unshift(item);
+                        }
+                        else {
+                            tableCloumnList.push(item);
+                        }
+                    });
+                    break;
+                case FILED_SET_DETAIL.INPUT:
+                case FILED_SET_DETAIL.OUTPUT:
+                    detailData[item.name] = item.value;
+                    break;
+                case FILED_SET_DETAIL.SEARCH: // 组合查询
+                    const value = [];
+                    item.value.map(item => {
+                        //  流水号第二个
+                        if (HISTORY_COLUMN.TOKENID ===  item.fieldTag) {
+                            value.unshift(item);
+                        }
+                        else {
+                            value.push(item);
+                        }
+                    });
+                    arrayMove(value, 'fieldTag', HISTORY_COLUMN.REQUESTID, 1).map(item => {
+                        // 过滤默认字段
+                        if (!DEFAULT_SCREEN.includes(item.fieldTag)) {
+                            item.value = item.fieldTag;
+                            searchList.push(item);
+                            // 默认新增一个筛选，并保留已有的条件
+                            if (!isFirst && isRest) {
+                                newFilterData.push({
+                                    fieldTag: item.fieldTag,
+                                    method: item.method[0]?.key,
+                                    type: item.method[0]?.type,
+                                    value: undefined,
+                                    enum: item.enum || [],
+                                });
+                                isFirst = true;
+                            }
+                        }
+                    });
+                    break;
+                case FILED_SET_DETAIL.FEATURE:
+                    detailData[item.name] = item.value;
+                    break;
+                default:
+                    break;
+            }
+        });
+        const tableColumns = this.formatTableColumn((fieldSort && fieldSort.length) ? list : tableCloumnList);
+        this.setState({
+            headerData: detailData,
+            tableColumns,
+            searchList,
+            filterData: newFilterData,
+            listLoading: false,
+        }, () => {
+            // 切换公司、应用顶部搜索不需要带上url上面的条件查询
+            if (isRest) {
+                this.doSearch();
+            }
+            else {
+                this.setDefaultSearchParams();
+            }
+        });
+
+        return;
+    };
+    // 获取识别结果列表
+    getRiskLevelList = async () => {
+        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 = _.cloneDeep(
+                this.state.defaultRiskLevelData
+            );
+            let newOptionData = [];
+            const riskLevels = [];
+            let newRiskLevelMap = {};
+            if (riskLevelList) {
+                riskLevelList.forEach(item => {
+                    // 天净不需要二次验证筛选项
+                    if (item.risk_level !== 'VERIFY') {
+                        newOptionData.push({
+                            value: item.risk_level,
+                            name: item.risk_level_name,
+                        });
+                        riskLevels.push(item.risk_level);
+                    }
+                    newRiskLevelMap[item.risk_level]
+                         = item.risk_level_name;
+                });
+            }
+            newRiskLevelData.data.selectData.optionData = newOptionData;
+            newRiskLevelData.data.selectData.doSearch = this.reDoSearch;
+            this.setState({
+                defaultRiskLevelData: newRiskLevelData,
+                riskLevelMap: newRiskLevelMap,
+                riskLevelList: riskLevels,
+            });
+        }
+    };
+    // 查询当前公司是否开通30天服务
+    getOpenOrganization = async () => {
+        const {dispatch, route, specialServiceId} = this.props;
+        const serviceId = specialServiceId || route.routeData.serviceId;
+        const newRangeTimeData = _.cloneDeep(this.state.defaultRangeTimeData);
+        if (dispatch) {
+            const {storageTime} = await dispatch({
+                type: 'history/getOpenOrganization',
+                payload: {
+                    organization: this.state.currentGlobalFilter.organization,
+                    serviceId,
+                },
+            });
+            const {disabledDateEnd} = getDisabledDate(storageTime);
+            newRangeTimeData.data.disabledDateFeedback = disabledDateEnd;
+            this.setState({
+                defaultRangeTimeData: newRangeTimeData,
+                storageTime,
+            });
+        }
+    };
+    // 获取搜索菜单
+    getFormData() {
+        let formData = [];
+        const {
+            defaultRangeTimeData,
+            defaultChannelEventData,
+            defaultRiskLevelData,
+            defaultRiskTypeData,
+            defaultLangData,
+            defaultNewDescriptionData,
+            defaultDescriptionData,
+        } = this.state;
+        const {route} = this.props;
+        const serviceId = route.routeData.serviceId;
+        formData.push(
+            defaultRangeTimeData,
+            defaultChannelEventData,
+            defaultRiskLevelData
+            // defaultRiskTypeData
+        );
+
+        const newData = _.cloneDeep(defaultNewDescriptionData);
+        // 网页风险原因特殊逻辑
+        if (SERVICEID_LIST.POST_ARTICLE === serviceId) {
+            formData.push(defaultNewDescriptionData);
+        }
+        else {
+            formData.push(defaultDescriptionData);
+        }
+        return formData;
+    }
+
+    /**
+      * 搜索筛选项更改
+      * @param {*} name   更改筛选项类型名称
+      * @param {*} value  更改后的值
+      */
+    changeQueryParams = (name, value, isAll, number) => {
+        const {queryParams} = this.state;
+        let newQueryParams = _.cloneDeep(queryParams);
+        let isOk =  true;
+        switch (name) {
+            case 'channelEvent':
+                newQueryParams.channel = _.isArray(value) ? _.flattenDeep(value) : value;
+                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 'labelSearch':
+                const { defaultLabelSearchData } = this.state;
+                defaultLabelSearchData.data.optionData.forEach(item => {
+                    newQueryParams[item.value] = '';
+                });
+                newQueryParams[value.searchId] = value.searchText;
+                break;
+            case 'description':
+                if (isAll) {
+                    newQueryParams[name] = ['all'];
+                }
+                else {
+                    newQueryParams[name] = value;
+                }
+                this.setState({
+                    maxQueryNumber: number,
+                });
+                break;
+            default:
+                newQueryParams[name] = value;
+                break;
+        }
+        if (!isOk) {
+            return;
+        }
+        this.setState(
+            {
+                queryParams: newQueryParams,
+            });
+    };
+
+    formatField = data => {
+        const {route, specialServiceId, t} =  this.props;
+        const serviceId = specialServiceId || route.routeData.serviceId;
+        const acccount = this.props.currentUser.account;
+        const storageName = `${SM_FIELD_SORT}_${serviceId}_${acccount}`;
+        Storage.set(storageName, data);
+        message.success(t('字段顺序调整已保存在浏览器缓存中，清除缓存会以系统默认顺序展示。'));
+        this.setState({
+            tableColumns: this.formatTableColumn(data) || [],
+        }, () => global.modal.pop());
+    };
+
+    // 添加信息字段
+    detailField = () => {
+        const {organization} = this.state.currentGlobalFilter;
+        const {route, currentUser, specialServiceId, t} = this.props;
+        const serviceId = specialServiceId || route.routeData.serviceId;
+        const acccount = currentUser.account;
+        const data = _.cloneDeep(this.state.tableColumns);
+        const storageName = `${SM_FIELD_SORT}_${serviceId}_${acccount}`;
+        const newData = [];
+        data.filter(item => {
+            if (![HISTORY_COLUMN.OPERATION, HISTORY_COLUMN.AUDIO_URL_TWO].includes(item.key)) {
+                newData.push({
+                    name: item.name,
+                    key: item.key,
+                    uuid: item.uuid,
+                    title: `${item.name}(${item.key})`,
+                });
+            }
+        });
+        global.modal.show(ModalType.MODAL_ALERT, {
+            width: 676,
+            modalTitle: t('设置列表字段'),
+            renderChildren: () => {
+                return (
+                    <div className={styles.hint}>
+                        <FieldMessageModal
+                            {...this.props}
+                            serviceId={serviceId}
+                            organization={organization}
+                            storageName={storageName}
+                            dataSource={newData}
+                            source={FIELD_SOURCE_TYPE.HISTORY_DETAIL}
+                            handleSubmit={this.formatField}
+                        />
+                    </div>
+                );
+            },
+        });
+    };
+
+    // 反馈成功后的回调
+    onFeedbackSubmitSuccess = record => {
+        const {tableDataSource} = this.state;
+        global.modal.pop();
+        const list = [];
+        const newData = _.map(tableDataSource, item => {
+            if (item.requestId === record.requestId) {
+                item.feedback = 1;
+                list.push(item);
+            }
+            return item;
+        });
+        this.setState({
+            tableDataSource: _.cloneDeep(newData),
+            selectedContents: [],
+        });
+    };
+
+    // 批量反馈成功后的回调
+    onFeedbackBatchSubmitSuccess = records => {
+        const {tableDataSource} = this.state;
+        global.modal.pop();
+        const list = [];
+        const newData = _.map(tableDataSource, item => {
+            if (records?.includes(item.requestId)) {
+                item.feedback = 1;
+                list.push(item);
+            }
+            return item;
+        });
+        this.setState({
+            tableDataSource: _.cloneDeep(newData),
+            selectedContents: [],
+        });
+    };
+
+    // 反馈按钮
+    handleFeedback = (record, type) => {
+        const {t} = this.props;
+        const {channelEventList, currentGlobalFilter, riskTypeList} = this.state;
+        const {organization} = currentGlobalFilter;
+        const {specialServiceId, route} = this.props;
+        const serviceId = specialServiceId || route.routeData.serviceId;
+        const title = type === FEEDBACK_TYPE.ERROR ? '误杀反馈' : '漏杀反馈';
+        global.modal.show(ModalType.MODAL_ALERT, {
+            width: 800,
+            modalTitle: t(title),
+            renderChildren: () => {
+                return (
+                    <div className={styles.hint}>
+                        <FeedbackContent
+                            riskTypeList={riskTypeList}
+                            channelEventList={channelEventList}
+                            serviceId={serviceId}
+                            record={{...record, type, organization}}
+                            onSubmitSuccess={() => this.onFeedbackSubmitSuccess(record)}
+                            onCancel={() => global.modal.pop()}
+                        />
+                    </div>
+                );
+            },
+        });
+    };
+
+    // 处理批量反馈
+    handleBatchFeedback = type => {
+        const {t} = this.props;
+        const {channelEventList, currentGlobalFilter, riskTypeList, selectedContents, tableDataSource} = this.state;
+        const {organization} = currentGlobalFilter;
+        const {specialServiceId, route} = this.props;
+        const serviceId = specialServiceId || route.routeData.serviceId;
+        const records = tableDataSource?.filter(item => selectedContents.includes(item.requestId));
+        const recordsLevels = _.uniq(records?.map(item => item.riskLevel));
+        const title = type === FEEDBACK_TYPE.ERROR ? '误杀反馈' : '漏杀反馈';
+        if (selectedContents?.length > 300) {
+            message.warn(t('最多选择300条'));
+            return;
+        }
+        if (recordsLevels?.length > 1) {
+            message.warn(t('只能选择相同的识别结果'));
+            return;
+        }
+        const {errorDisabled, missDisabled} = this.getRecordFeedbackDisabled(records?.[0]);
+        if (errorDisabled && type === FEEDBACK_TYPE.ERROR) {
+            message.warn(t('请选择批量反馈漏杀'));
+            return;
+        }
+        if (missDisabled && type === FEEDBACK_TYPE.MISS) {
+            message.warn(t('请选择批量反馈误杀'));
+            return;
+        }
+        global.modal.show(ModalType.MODAL_ALERT, {
+            width: 800,
+            modalTitle: t(title),
+            renderChildren: () => {
+                return (
+                    <div className={styles.hint}>
+                        <FeedbackContent
+                            riskTypeList={riskTypeList}
+                            channelEventList={channelEventList}
+                            serviceId={serviceId}
+                            record={{...records?.[0], type, organization}}
+                            batchConfig={{
+                                isBatch: true,
+                                records,
+                            }}
+                            onSubmitSuccess={() => this.onFeedbackBatchSubmitSuccess(records?.map(item => item.requestId))}
+                            onCancel={() => global.modal.pop()}
+                        />
+                    </div>
+                );
+            },
+        });
+    };
+
+    formatMdConfig = () => {
+        const { mdFormData } = this.props;
+        const {
+            defaultRiskTypeData,
+            defaultAppIdData,
+            defaultChannelEventData,
+            defaultMdSearchData,
+        } = this.state;
+        let newFormMdConfig = [];
+        const newRiskTypeData = _.cloneDeep(defaultRiskTypeData);
+        const newChannelEventData = _.cloneDeep(defaultChannelEventData);
+        newRiskTypeData.data.selectData.defaultValue = ALL;
+        newRiskTypeData.data.selectData.mode = false;
+        newChannelEventData.data.selectData.defaultValue = ALL;
+        newChannelEventData.data.selectData.mode = false;
+        if (mdFormData) {
+            newFormMdConfig = mdFormData.map(item => {
+                switch (item) {
+                    case 'riskType':
+                        item = newRiskTypeData;
+                        break;
+                    case 'appId':
+                        item = defaultAppIdData;
+                        break;
+                    case 'channelEvent':
+                        item = newChannelEventData;
+                        break;
+                    case 'search':
+                        item = defaultMdSearchData;
+                        break;
+                    default:
+                        break;
+                }
+                return item;
+            });
+        }
+        return newFormMdConfig;
+    };
+
+    // 获取批量反馈的权限配置
+    getFeedbackBatchAuthConfig = organization => {
+        const {specialServiceId, route} = this.props;
+
+        const {selectedContents} = this.state;
+
+        const serviceId = route.routeData.serviceId;
+        const hasFeedback =  getAuthFunction(AUTH_FUNCTION.FEEDBACK);
+        const {isTextServiceId, isImageClassServiceId} = judgeServiceIdType(specialServiceId || serviceId);
+
+        let showSelectCheckbox = false; // 展示选中勾选框
+        let showSelectOperator = false; // 展示顶部选中的操作栏
+
+        // 有反馈权限  & 文本和图片类服务  & 公司不等于SM
+        if (hasFeedback && (isTextServiceId || isImageClassServiceId) && organization !== SM_ACCOUNT) {
+            if (selectedContents?.length > 0) {
+                showSelectOperator = true;
+            }
+            showSelectCheckbox = true;
+        }
+        return {
+            showSelectCheckbox,
+            showSelectOperator,
+        };
+    };
+
+    // table 表头自定义dom
+    showExtraDom = () => {
+        const {route, currentUser, t, isIntl} = this.props;
+        const serviceId = route.routeData.serviceId;
+        const domData = [];
+        const hasExportHistory = getAuthFunction(AUTH_FUNCTION.EXPORT_HISTORY);
+        const hasExport = getAuthFunction(AUTH_FUNCTION.EXPORT);
+        if ((hasExportHistory && !isPrivate()) || hasExport) {
+            domData.push(
+                <HistoryExport
+                    text="下载"
+                    exportLoading={this.state.exportLoading}
+                    onClick={() => this.setState({exportTaskVisible: true})}
+                />
+            );
+        }
+        return (
+            <div className={styles['extra-dom']}>
+                {domData}
+                <SMIcon type="icon-yingyongguanlilanse" onClick={() => this.detailField()} />
+            </div>
+        );
+    };
+
+    // 组合查询赋值
+    filterSetState = (stateList, isrRefresh) => {
+        const stateObj = {};
+        _.forEach(stateList, item => {
+            stateObj[item.key] = item.value;
+        });
+        this.setState({...stateObj, isrRefresh: isrRefresh || this.state.isrRefresh});
+    };
+
+    // 返回第一页并且重写查询
+    reDoSearch = () => {
+        this.setState({currentPage: 1}, () => this.doSearch());
+    };
+
+    // 保存操作列
+    saveColumns = _.debounce(column => {
+        const {route, currentUser, specialServiceId} = this.props;
+        const serviceId = specialServiceId || route.routeData.serviceId;
+        const acccount = currentUser.account;
+        Storage.set(`${SM_FIELD_SORT}_${serviceId}_${acccount}`, column);// 更新缓存，缓存中数据和接口请求数据保持一致
+        this.setState({tableColumns: column});
+    }, 1000);
+
+    // 显示多选操作栏
+    showSelectionExtraDom = () => {
+        const {t} = this.props;
+
+        const {listTotalCount, selectedContents, tableDataSource} = this.state;
+
+        return (
+            <div className={styles['operator-wrapper-select']}>
+                <div className={styles['operator-wrapper-select-show']}>
+                    {t('已选择')}
+                    <span>
+                        {selectedContents?.length}
+                    </span>
+                    {t('项')} {t('总计')} {listTotalCount} {t('项')}
+                    <span
+                        className={styles['operation-content']}
+                        onClick={() => {
+                            const newSelectContents = tableDataSource?.filter(item => item.feedback !== 1)?.map(item => item.requestId);
+                            this.setState({
+                                selectedContents: newSelectContents,
+                            });
+                        }}
+                    >
+                        {t('选中当页')}
+                    </span>
+                    <span
+                        className={styles['operation-content']}
+                        onClick={() => this.setState({selectedContents: []})}
+                    >
+                        {t('取消选中')}
+                    </span>
+                </div>
+                <div>
+                    <span
+                        className={styles['operation-content']}
+                        onClick={() => this.handleBatchFeedback(FEEDBACK_TYPE.ERROR)}
+                    >
+                        {t('批量反馈误杀')}
+                    </span>
+                    <span
+                        className={styles['operation-content']}
+                        onClick={() => this.handleBatchFeedback(FEEDBACK_TYPE.MISS)}
+                    >
+                        {t('批量反馈漏杀')}
+                    </span>
+                </div>
+            </div>
+        );
+    };
+
+    // SMTable封装的属性——顶部操作栏部分，和showSelectExtraDom平级
+    selectShowDom = () => {
+        const {t} = this.props;
+
+        const {tableDataSource} = this.state;
+
+        return (
+            <div>
+                <span
+                    className={styles['operation-content']}
+                    onClick={() => {
+                        const newSelectContents = tableDataSource?.filter(item => item.feedback !== 1)?.map(item => item.requestId);
+                        this.setState({
+                            selectedContents: newSelectContents,
+                        });
+                    }}
+                >
+                    {t('选中当页')}
+                </span>
+                <span
+                    className={styles['operation-content']}
+                    onClick={() => this.setState({selectedContents: []})}
+                >
+                    {t('取消选中')}
+                </span>
+            </div>
+        );
+    };
+
+    handleRowClick = value => {
+        this.setState({
+            selectedContents: value,
+        });
+    };
+
+    render() {
+        const formData = this.getFormData();
+
+        const {
+            listLoading,
+            tableDataSource,
+            tableColumns,
+            detailData,
+            listTotalCount,
+            listRealTotalCount,
+            currentPage,
+            pageSize,
+            pageSizeOptions,
+            currentGlobalFilter,
+            exportTaskVisible,
+            defaultChannelEventData,
+            defaultRiskTypeData,
+            hitList,
+            eventIdMap,
+            channelMap,
+            riskLevelMap,
+            riskTypeMap,
+            defaultRiskLevelData,
+            defaultAppIdData,
+            newDetailVisible,
+            headerData,
+            storageTime,
+            filterData,
+            resetCount,
+            searchList,
+            listModalVisible,
+            actionType,
+            currentListData,
+            sensitiveMd,
+            ignoreMd,
+            currentListValue,
+            mdListLoading,
+            queryParams,
+            riskLabelOption,
+            riskLabelList,
+            defaultLangData,
+            defaultRangeTimeData,
+            selectedContents,
+            streamModalVisible,
+            currentStreamRecord,
+            exportLoading,
+        } = this.state;
+
+        defaultAppIdData.data.selectData.optionData = formatAppList();
+        const hasExportHistory = getAuthFunction(AUTH_FUNCTION.EXPORT_HISTORY);
+        const hasExport = getAuthFunction(AUTH_FUNCTION.EXPORT);
+        const {
+            route,
+            formatHistoryTaskFormColumns = () => {},
+            buildHistoryTaskDetail = () => {},
+            currentUser,
+            formatMdData,
+            dispatch,
+            specialServiceId,
+            t,
+        } = this.props;
+        const serviceId = route.routeData.serviceId;
+        const { appId, organization } = currentGlobalFilter;
+        const selectListMap = {
+            defaultRiskLevelData,
+            defaultChannelEventData,
+            defaultRiskTypeData,
+            defaultAppIdData,
+            hitList,
+        };
+        const exportDetailMap = {
+            eventIdMap,
+            channelMap,
+            riskTypeMap,
+            riskLevelMap,
+        };
+        const exportTaskConfig = {
+            formatHistoryTaskFormColumns,
+            buildHistoryTaskDetail,
+            organization,
+            serviceId: specialServiceId || serviceId, // 区分音频、视频整体、片段
+            appId,
+            exportDetailMap,
+            title: '历史数据导出',
+            selectListMap,
+            visible: exportTaskVisible,
+            currentUser,
+            storageTime,
+            tableColumns: _.cloneDeep(this.state.tableColumns),
+            initialValues: {
+                appId: _.size(appId) === 0 ? 'all' : appId,
+                organization,
+                channel: _.size(queryParams.channel) > 0 ? queryParams.channel : ['all'],
+                riskLevel: _.size(queryParams.riskLevel) > 0 ? queryParams.riskLevel : ['all'],
+                riskType: _.size(queryParams.riskType) > 0 ? queryParams.riskType : ['all'],
+                description: _.size(queryParams.description) > 0 ? queryParams.description : (serviceId === 'POST_ARTICLE' ? 'all' : ['all']),
+                dateRange: [moment(queryParams.startTime), moment(queryParams.endTime)],
+                detectedLang: queryParams.detectedLang || 'all',
+            },
+            exportFormOption: {
+                appIdList: _.get(defaultAppIdData, 'data.selectData.optionData'),
+                channelList: _.get(_.cloneDeep(defaultChannelEventData), 'data.selectData.optionData'),
+                riskLevelList: _.get(_.cloneDeep(defaultRiskLevelData), 'data.selectData.optionData'),
+                riskTypeList: _.get(_.cloneDeep(defaultRiskTypeData), 'data.selectData.optionData'),
+                groupFilter: {
+                    searchList: _.cloneDeep(searchList),
+                    filterData: _.cloneDeep(filterData),
+                },
+                disabledDate: _.get(_.cloneDeep(defaultRangeTimeData), 'data.disabledDateFeedback'),
+                riskLabelOption: _.cloneDeep(riskLabelOption),
+                riskLabelList: _.cloneDeep(riskLabelList),
+                showLang: serviceId === 'POST_TEXT_EN',
+                languageList: _.get(_.cloneDeep(defaultLangData), 'data.selectData.optionData') || [],
+            },
+            exportLoading,
+            hasExport,
+            hasExportHistory: hasExportHistory && !this.props.isIntl && !isPrivate(),
+            onCancel: () => {
+                this.setState({
+                    exportTaskVisible: false,
+                    isRandomSampling: false,
+                });
+            },
+            setIsRandomSampling: value => this.setState({isRandomSampling: value}),
+            onExport: value => this.exportData(value),
+        };
+        const newTableColumns = getIntlTableColums(_.filter(tableColumns, item => {
+            if (!getAuthFunction(AUTH_FUNCTION.FEEDBACK) || organization === SM_ACCOUNT) {
+                return item.key !== 'feedback' || item.title !== '反馈';
+            }
+            return true;
+        }), t);
+        const mdFormConfig = this.formatMdConfig() || [];
+        const {showSelectCheckbox, showSelectOperator} = this.getFeedbackBatchAuthConfig(organization);
+        return (
+            <div>
+                <GlobalFilterListener onChange={this.globalFilterChange} />
+                <SMBackTop />
+                <div className={styles['content-top']}>
+                    {NOTE_TIP_TXT[specialServiceId || serviceId] && (
+                        <div className={styles['history-note-tip']}>
+                            <SMNoteTip noteInfo={NOTE_TIP_TXT[specialServiceId || serviceId]} />
+                        </div>
+                    )}
+                    <SMSearchForm
+                        formData={formData}
+                        resetCount={resetCount}
+                        onChange={this.changeQueryParams}
+                    />
+                    <GroupFilter
+                        filterData={filterData} // 新增的筛选条件
+                        searchList={searchList} // 接口返回的 可以筛选的字段
+                        doSearch={this.reDoSearch} // 查询
+                        setState={this.filterSetState} // 给条件赋值
+                        onFilterKeyDown={this.onFilterKeyDown} // 按下回车
+                    />
+                </div>
+                <div className={styles['table-list']}>
+                    <div className={styles['extra-dom-wrapper']}>
+                        {this.showExtraDom()}
+                    </div>
+                    {showSelectOperator && this.showSelectionExtraDom()}
+                    <SMTable
+                        columns={newTableColumns}
+                        dataSource={tableDataSource}
+                        isDrag
+                        idName="requestId"
+                        getNewTableColumn={this.saveColumns}
+                        loading={listLoading}
+                        totalCount={listTotalCount}
+                        scroll={{ x: 100, y: 'auto' }}
+                        popoverStyle={{ width: 250 }}
+                        setLocalTable
+                        // extraDom={this.showExtraDom()}
+                        showTotal={() => `${t('共')}${listTotalCount}${t('条')}`}
+                        i18nText={tableText(t)}
+                        wrapperStyle={{
+                            margin: 0,
+                        }}
+                        customLoadingUrl={this.props.customLoadingIcon}
+                        antdProps={{
+                            pagination: {
+                                showQuickJumper: true,
+                                defaultPageSize: pageSize,
+                                pageSizeOptions: pageSizeOptions,
+                                current: currentPage,
+                                total: listTotalCount,
+                                showSizeChanger: true,
+
+                            },
+                            onChange: this.listOnSearch,
+                        }}
+                        // {...(showSelectOperator ? {
+                        //     selectionExtraDom: this.showSelectionExtraDom,
+                        //     selectShowDom: this.selectShowDom,
+                        // } : {})}
+                        {...(showSelectCheckbox ? {
+                            rowSelection: {
+                                selectedRowKeys: selectedContents,
+                                getCheckboxProps: record => {
+                                    return {
+                                        disabled: this.getRecordFeedbackDisabled(record).isAllDisabled,
+                                    };
+                                },
+                                onChange: value => this.handleRowClick(value),
+                            },
+                        } : {})}
+                    />
+                </div>
+                {tableDataSource.length ? <TotalCount count={listRealTotalCount ?? listTotalCount} isShowRealTotalCount={!!listRealTotalCount} /> : null}
+                <NewHistoryDetailDrawer
+                    visible={newDetailVisible}
+                    headerData={headerData}
+                    detailData={detailData}
+                    onClose={() => this.setState({newDetailVisible: false})}
+                    onActionClick={this.onActionClick}
+                    serviceId={serviceId}
+                    organization={organization}
+                    queryParams={queryParams}
+                />
+                <TJExportTask {...exportTaskConfig} />
+                {serviceId.includes(MD_TYPE.POST_TEXT) && actionType !== MD_TYPE.TOKEN_ID ? (
+                    <AddTextMdModal
+                        visible={listModalVisible}
+                        listData={currentListData}
+                        mdList={formatMdData(actionType === MD_TYPE.SENSITIVE ? sensitiveMd : ignoreMd)}
+                        serviceId={serviceId}
+                        formData={mdFormConfig}
+                        dispatch={dispatch}
+                        organization={organization}
+                        currentValue={currentListValue}
+                        getMDList={this.getMDList}
+                        mdListLoading={mdListLoading}
+                        changeQueryParams={this.changeQueryParams}
+                        onCancel={() =>
+                            this.setState({
+                                listModalVisible: false,
+                            })
+                        }
+                    />
+                ) : (
+                    <AddListModal
+                        visible={listModalVisible}
+                        listData={currentListData}
+                        serviceId={serviceId}
+                        organization={organization}
+                        currentValue={currentListValue}
+                        onCancel={() =>
+                            this.setState({
+                                listModalVisible: false,
+                            })
+                        }
+                    />
+                )}
+                <StreamInfoModal
+                    visible={streamModalVisible}
+                    streamQueryParams={{
+                        organization,
+                        serviceId,
+                        startTime: Number(moment(currentStreamRecord?.startTime || '').format('x')),
+                        endTime: Number(moment(currentStreamRecord?.finishTime || currentStreamRecord?.timestamp || '').format('x')),
+                        requestId: currentStreamRecord.requestId,
+                    }}
+                    // 跳转截帧图片
+                    jumpToImageHistory={() => handleOperation({
+                        record: currentStreamRecord,
+                        serviceId: serviceId,
+                        queryParams,
+                        rawValue: currentStreamRecord.rawValue,
+                        storageTime,
+                        type: PAGE_TYPE.IMG,
+                    })}
+                    onCancel={() => this.setState({streamModalVisible: false})}
+                />
+            </div>
+        );
+    }
+}
+
+export default connect(({ user, login }) => ({
+    currentUser: user.currentUser,
+    isIntl: login?.loginModeObj?.isIntl,
+}))(withIntlComponents(History));