admin2 1.0.0

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

@@ -0,0 +1,2225 @@
+/* eslint-disable max-len */
+import React, { Component } from 'react';
+import { connect, getLocale } from 'umi';
+import {
+    message,
+    Pagination,
+    Image,
+    Modal,
+    Spin,
+    Select,
+    Checkbox,
+} from 'antd';
+import moment from 'moment';
+import _ from 'lodash';
+import {SMTable, SMModal} from 'sm-antd';
+
+import {getAuthFunction} from '@/utils/AuthorityManage';
+import GlobalFilterListener from '@/components/GlobalFilterListener';
+import {
+    exportFile,
+    formatSearchParams,
+    getUrlParams,
+    backTop,
+    Storage,
+    getDisabledDate,
+    formatArrayParams,
+    isJson,
+    handleSearchUrl,
+    getFinalDescription,
+    arrayMove,
+    isPrivate,
+    formatAppList,
+    findAllThirdLevelLabels,
+    findAllThirdLevelLabelsArray,
+} from '@/utils/utils';
+import {
+    SMIcon,
+    IconLoading,
+    TotalCount,
+    SMSearchForm,
+    FieldMessageModal,
+    SMNoteTip,
+    SMBackTop,
+} from '@/components';
+import { PAGE_SIZE } from '@/contants/pageSize';
+import {
+    MODEL_TYPE,
+    HISTORY_COLUMN,
+    FIELD_SOURCE_TYPE,
+    SM_FIELD_SORT,
+    SERVICEID_LIST,
+    FILED_SET_DETAIL,
+    DEFAULT_SCREEN,
+    SM_ACCOUNT,
+    KEYBOARD_CODER,
+    AUTH_FUNCTION,
+    STORAGE_LIST_NAME,
+} from '@/contants';
+import withIntlComponents from '@/hoc/withIntlComponents';
+import {judgeServiceIdType} from '@/contants/judgeServiceIdType';
+import SMDetailDrawer from '../components/HistoryDetailDrawer';
+import {
+    FeedbackPanel,
+    NewHistoryDetailDrawer,
+    AddListModal,
+    ExportTask,
+    GroupFilter,
+    FeedbackContent,
+    TJExportTask,
+    ImgSimilar,
+} from '../components';
+import ImgTable from './components/ImgTable';
+import {
+    TABLE_COLUMN_RENDER,
+    FIELD_NAME_LIST,
+    METHOD_TYPE,
+    WILDCARD_PREFIX,
+    SEARCH_TYPE,
+    NOTE_TIP_TXT,
+    MAX_QUERY_NUMBER,
+    FEEDBACK_TYPE,
+} from '../constants';
+import {
+    handleLabelAll,
+    getLabelConfig,
+} from '../help';
+
+import styles from './index.less';
+
+const PASS = 'PASS';
+const REJECT = 'REJECT';
+const PASS_CN = '通过';
+const REJECT_CN = '拒绝';
+
+const { ModalType } = SMModal;
+const SHOW_FIELDS = [
+    SERVICEID_LIST.POST_IMG,
+    SERVICEID_LIST.POST_VIDEO_IMG,
+    SERVICEID_LIST.POST_VIDEOSTREAM_IMG,
+    SERVICEID_LIST.POST_VIDEOSTREAM_IMG_EN,
+    SERVICEID_LIST.POST_VIDEOSTREAM_IMG_AR,
+];
+const LangServiceId = [
+    SERVICEID_LIST.POST_VIDEOSTREAM_AR,
+    SERVICEID_LIST.POST_VIDEOSTREAM_EN,
+    SERVICEID_LIST.POST_VIDEOSTREAM_IMG_EN,
+    SERVICEID_LIST.POST_VIDEOSTREAM_IMG_AR,
+];
+const IMG_EXPORT = ['input', 'output'];// 字段配置 图片导出取input、output
+const FIELD_MAX_NUMBER = 13; // 图片最多能显示13个字段
+const {Option} = Select;
+const ALL = 'all';
+const FEEDBACK = '反馈';
+
+class History extends Component {
+    constructor(props) {
+        super(props);
+        const {t} = this.props;
+        const appIdList = Storage.get('sm_appId_list')?.map(item => {
+            // 对缓存的 appid list 进行处理，对选项 all 的 appName 进行国际化处理
+            if (item.appId === 'all') {
+                return {
+                    appName: t('全部'),
+                    appId: item.appId,
+                };
+            }
+            return item;
+        }) || [];
+        let newAppIdList = [];
+        try {
+            appIdList.forEach(item => {
+                newAppIdList.push({
+                    value: item.appId,
+                    name: item.appName,
+                });
+            });
+        } catch (event) {
+            console.err(event);
+        }
+        this.state = {
+            defaultRangeTimeData: {
+                type: 'datePicker',
+                name: 'time',
+                data: {
+                    dateSelectArr: [
+                        {
+                            name: '今天',
+                            value: 1,
+                        },
+                        {
+                            name: '近7天',
+                            value: 7,
+                        },
+                        {
+                            name: '近30天',
+                            value: 30,
+                        },
+                    ],
+                    dateFormat: 'YYYY-MM-DD HH:mm:ss',
+                    showTime: true,
+                },
+            },
+            defaultChannelEventData: {
+                type: 'descriptionCascader',
+                name: 'channelEvent',
+                isInlineBlock: true,
+                data: {
+                    selectData: {
+                        optionData: [],
+                        title: '渠道',
+                        defaultValue: [],
+                        isAddAll: false,
+                        isAddEle: true,
+                        originValueName: 'label',
+                        valueName: 'label_value',
+                        labelName: 'label_name',
+                        childrenName: 'son',
+                        popupClassName: 'description-cascader',
+                        isChannel: true,
+                    },
+                },
+            },
+            defaultRiskLevelData: {
+                type: 'newSelect',
+                name: 'riskLevel',
+                data: {
+                    selectData: {
+                        optionData: [],
+                        title: '识别结果',
+                        labelId: 'riskLevel',
+                        mode: 'multiple',
+                        isAddAll: true,
+                        isAllowClear: true,
+                        isMaxTagCount: 3,
+                        style: {'min-width': 150},
+                    },
+                },
+            },
+            defaultRiskTypeData: {
+                type: 'newSelect',
+                name: 'riskType',
+                data: {
+                    selectData: {
+                        optionData: [],
+                        title: '风险类型',
+                        labelId: 'riskType',
+                        mode: 'multiple',
+                        isAddAll: true,
+                        isAllowClear: true,
+                        isMaxTagCount: 3,
+                        style: {'min-width': 150},
+                    },
+                },
+            },
+            defaultDescriptionData: {
+                type: 'descriptionCascader',
+                name: 'description',
+                data: {
+                    selectData: {
+                        optionData: [],
+                        title: '风险原因',
+                        defaultValue: [],
+                        isAddAll: false,
+                        isAddEle: true,
+                        originValueName: 'label',
+                        valueName: 'label_value',
+                        labelName: 'label_name',
+                        childrenName: 'son',
+                        popupClassName: 'description-cascader',
+                    },
+                },
+            },
+            defaultNewDescriptionData: {
+                type: 'NewInputSelect',
+                name: 'description',
+                data: {
+                    selectData: {
+                        selectData: [
+                            {
+                                value: '一号领导',
+                                name: '一号领导',
+                            },
+                        ],
+                        isAddAll: true,
+                        defaultValue: 'all',
+                    },
+                },
+            },
+            defaultLabelSearchData: {
+                type: 'labelSearch',
+                name: 'labelSearch',
+                data: {
+                    placeholder: '请输入搜索内容',
+                    optionData: [
+                        {
+                            value: 'requestId',
+                            name: '流水号',
+                        },
+                    ],
+                },
+            },
+            defaultAppIdData: {
+                type: 'select',
+                name: 'appName',
+                data: {
+                    selectData: {
+                        optionData: newAppIdList,
+                        title: '应用',
+                        labelId: 'appId',
+                        labelName: 'appName',
+                        isAddAll: true,
+                        defaultValue: 'all',
+                    },
+                },
+            },
+            defaultExportButtonData: {
+                type: 'button',
+                name: 'exportHistory',
+                data: {
+                    title: '历史数据导出',
+                },
+            },
+            queryParams: {
+                startTime: Number(moment().startOf('day').format('x')),
+                endTime: Number(moment().endOf('day').format('x')),
+            },
+            listData: [], // 历史记录列表数据
+            detailData: {}, // 当前详情数据
+            requestHeader: {},
+            totalCount: 0,
+            listRealTotalCount: 0,
+            detailVisible: false,
+            detailIndex: 0, // 当前详情数据的index
+            currentData: {}, // 单条数据详情
+            isFirstLoading: true,
+            labelList: [],
+            imgTableItemColumns: [],
+            listLoading: true,
+            channelEventList: [],
+            eventIdMap: {},
+            channelMap: {},
+            riskTypeMap: {}, // 用来对应riskType的 value 和name
+            currentItemData: {},
+            currentPage: 1,
+            pageSize: 20,
+            tableDataSource: [],
+            channelEvent: 'all', // 当前渠道事件拼接的字符串
+            currentGlobalFilter: {
+                organization: '',
+                appId: '',
+                clusterId: '',
+            },
+            tokenIdBlackList: [], // 账号黑名单列表
+            ignoreList: [], // 忽略词名单
+            sensitiveList: [], // 敏感词名单
+            currentListData: [], // 当前选择名单列表
+            listModalVisible: false, // 展示选择名单弹窗
+            currentListValue: '', // 当前要加名单的值
+            exportTaskVisible: false, // 历史数据导出
+            hitList: [],
+            type: '',
+            fieledConfig: false, // 是否用字段管理配置
+            headerData: {}, // 字段配置表头
+            newDetailVisible: false,
+            exportLoading: false,
+            filterData: [], // 高级筛选项
+            searchList: [], // 筛选
+            riskLabelList: [],
+            riskLabelOption: [],
+            maxQueryNumber: 0,
+            isSimilarOpen: false,
+            selectedContents: [], // 历史记录选中项
+            isRandomSampling: false, // 是否随机抽取
+        };
+    }
+
+    UNSAFE_componentWillMount() {
+        const { stateConfig, route } = this.props;
+        const serviceId =  route.routeData.serviceId;
+        // 给风险原因、风险类型绑定查询数据函数，当光标焦点在文本框、下拉框中按下Enter调用该接口
+        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.setState({
+            defaultDescriptionData: newDefaultDescriptionData,
+            defaultNewDescriptionData: newDefaultNewDescriptionData,
+        });
+        if (stateConfig) {
+            this.setState({...stateConfig, fieledConfig: SHOW_FIELDS.includes(serviceId)});
+        }
+    }
+
+    componentDidMount() {
+        window.addEventListener('keydown', this.changeDetailData);
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('keydown', this.changeDetailData);
+    }
+
+    shouldComponentUpdate = (nextProps, nextState) => nextState.isrRefresh === this.state.isrRefresh;
+
+    // 设置url携带的默认参数（筛选/排行榜跳转）
+    setDefaultSearchParams = () => {
+        const url = location.href;
+        const {serviceId} = this.props.route.routeData;
+        const urlParams = getUrlParams(url);
+        const {
+            defaultRiskTypeData,
+            defaultLabelSearchData,
+            defaultRiskLevelData,
+            defaultChannelEventData,
+            defaultRangeTimeData,
+            queryParams,
+            searchList,
+            filterData,
+            defaultDescriptionData,
+            riskLabelList,
+        } = this.state;
+        const {t} = this.props;
+        const newLabelSearchData = _.cloneDeep(defaultLabelSearchData);
+        const newRiskTypeData = _.cloneDeep(defaultRiskTypeData);
+        const newRiskLevelData = _.cloneDeep(defaultRiskLevelData);
+        const newChannelEventData = _.cloneDeep(defaultChannelEventData);
+        const newRangeTimeData = _.cloneDeep(defaultRangeTimeData);
+        const newSearchList = _.cloneDeep(searchList);
+        const newFilterData = _.cloneDeep(filterData);
+        const newDescriptionData = _.cloneDeep(defaultDescriptionData);
+        let newChannelEvent = '';
+        const newQueryParams = _.cloneDeep(queryParams);
+        const isEncode = serviceId === SERVICEID_LIST.POST_VIDEO_IMG
+            || serviceId === SERVICEID_LIST.POST_VIDEO_AUDIO || serviceId === SERVICEID_LIST.POST_VIDEOSTREAM_IMG;
+
+        if (urlParams.startTime && urlParams.endTime) {
+            let dateRange = [];
+            let startTime = Number(urlParams.startTime) || Number(moment(urlParams.startTime).format('x'));
+            let endTime = Number(urlParams.endTime) || Number(moment(urlParams.endTime).format('x'));
+            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.text) {
+            const serviceId = this.props.route.routeData.serviceId;
+            switch (serviceId) {
+                case 'POST_TEXT':
+                    newLabelSearchData.data.defaultValue = 'matchedItem';
+                    newQueryParams.matchedItem = urlParams.text;
+                    break;
+                case 'POST_IMG':
+                    newLabelSearchData.data.defaultValue = 'matchedItem';
+                    newQueryParams.matchedItem = urlParams.text;
+                    break;
+                default:
+                    newLabelSearchData.data.defaultValue = 'audioText';
+                    newQueryParams.audioText = urlParams.text;
+                    break;
+            }
+            newLabelSearchData.data.defaultContent = urlParams.text;
+        }
+        if (urlParams.searchKey) {
+            const isVideo = [
+                SERVICEID_LIST.POST_VIDEO_IMG,
+                SERVICEID_LIST.POST_VIDEOSTREAM_IMG,
+                SERVICEID_LIST.POST_VIDEOSTREAM_IMG_EN,
+                SERVICEID_LIST.POST_VIDEOSTREAM_IMG_AR,
+            ].includes(serviceId);
+            const isRequestId = [HISTORY_COLUMN.REQUESTID].includes(urlParams.searchKey); // 视频流、视频文件流水号走模糊匹配
+            try {
+                newSearchList.map(item => {
+                    // 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) {
+                        let methodIndex  = 0;
+                        if (isVideo && isRequestId) {
+                            item.method.forEach((item, index) => {
+                                if (item.key === WILDCARD_PREFIX) {
+                                    methodIndex = index;
+                                }
+                            });
+                        }
+                        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) {}
+        }
+        else {
+            newSearchList.map(item => {
+                if (item.fieldTag === HISTORY_COLUMN.TOKENID) {
+                    newFilterData.push({
+                        fieldTag: item.fieldTag,
+                        method: item.method[0]?.key,
+                        type: item.method[0]?.type,
+                        value: undefined,
+                        enum: item.enum || [],
+                    });
+                }
+            });
+        }
+        // 检测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
+            filterData: newFilterData,
+            defaultRiskLevelData: newRiskLevelData,
+            defaultChannelEventData: newChannelEventData,
+            queryParams: newQueryParams,
+            channelEvent: newChannelEvent,
+            defaultDescriptionData: newDescriptionData,
+        }, () => this.doSearch());
+    };
+
+    // 获取名单列表
+    getMDList = async () => {
+        const { route, dispatch } = this.props;
+        const { serviceId } = route.routeData;
+        const { currentGlobalFilter } = this.state;
+        let { organization, appId } = currentGlobalFilter;
+        let listContent = [];
+        let listContent1 = [];
+        let listContent2 = [];
+        if (appId === 'all') {
+            appId = '';
+        }
+        listContent1 = await dispatch({
+            type: 'history/fetchListService',
+            payload: {
+                organization,
+                appId,
+                product: serviceId,
+                type: 1,
+                offset: 0,
+                count: 1000,
+            },
+        });
+
+        if (serviceId === 'POST_IMG') {
+            listContent2 = await dispatch({
+                type: 'history/fetchListService',
+                payload: {
+                    organization,
+                    appId,
+                    product: serviceId,
+                    type: 4,
+                    offset: 0,
+                    count: 1000,
+                },
+            });
+        }
+        listContent = listContent1.concat(listContent2);
+        let tokenIdBlackList = [];
+        let ignoreList = [];
+        let sensitiveList = [];
+        listContent.forEach(item => {
+            let config = item.config;
+            if (config.checkItems.includes('tokenId')) {
+                if (config.action === 'REJECT') {
+                    tokenIdBlackList.push({
+                        name: item.name,
+                        value: item.listId,
+                    });
+                }
+            }
+            if (
+                config.checkItems.includes('text')
+                && config.checkItems.length === 1
+            ) {
+                if (config.action === 'IGNORE') {
+                    ignoreList.push({
+                        name: item.name,
+                        value: item.listId,
+                    });
+                } else if (config.action === 'REJECT') {
+                    sensitiveList.push({
+                        name: item.name,
+                        value: item.listId,
+                    });
+                }
+            }
+        });
+
+        this.setState({
+            tokenIdBlackList,
+            ignoreList,
+            sensitiveList,
+            hitList: listContent,
+        });
+    };
+
+    // 获取风险标签
+    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 newRiskLabelList = handleLabelAll(riskLabelList, newDescriptionList.data.selectData);
+            newDescriptionList.data.selectData.optionData = newRiskLabelList;
+            // 风险排行榜带过来风险原因默认参数
+            const defaultDescription = Storage.get(STORAGE_LIST_NAME.DESCRIPTION);
+            if (defaultDescription) {
+                newDescriptionList.data.selectData.defaultValue = defaultDescription;
+            }
+            this.setState({
+                defaultDescriptionData: newDescriptionList,
+                riskLabelList,
+                riskLabelOption: newRiskLabelList,
+            });
+        }
+    };
+
+    globalFilterChange = obj => {
+        const {defaultRangeTimeData} = this.state;
+        const {
+            orgChange,
+            appIdChange,
+            clusterIdChange,
+            currentGlobalFilter,
+        } = obj;
+        this.setState(
+            {
+                currentGlobalFilter,
+            },
+            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;
+                    let newQueryParams = _.cloneDeep(queryParams);
+                    this.getMDList();
+                    await this.getChannelEventList();
+                    this.setState(
+                        {
+                            currentPage: 1,
+                            queryParams: {
+                                ...newQueryParams,
+                                channel: '',
+                            },
+                            resetCount: _.random(100000),
+                            filterData: [],
+                        },
+                        () => {
+                            this.getFieldSetHearder(true);
+                        }
+                    );
+                }
+            }
+        );
+    };
+
+    // 请求搜索
+    doSearch = () => {
+        const {t = t => t} = this.props;
+        if (this.state.maxQueryNumber > MAX_QUERY_NUMBER) {
+            message.warning(t('风险原因已超查询上限，单次查询请控制在10个以内！'));
+            return;
+        }
+        // 返回顶部
+        backTop(document.getElementById('top-left-layout-content'));
+        this.setState({
+            listLoading: true,
+        });
+        this.getHistoryList();
+    };
+
+    // 获取历史记录列表数据
+    getHistoryList = () => {
+        const {dispatch} = this.props;
+        const newParams = this.getSearchParams();
+        this.getFieldSetList(newParams, dispatch);
+    };
+
+    exportData = (value = {}) => {
+        const {route, t} = this.props;
+        const {imgTableItemColumns, isRandomSampling} = this.state;
+        let newSearchParams = this.getSearchParams();
+        const type = value?.type || 'csv';
+        newSearchParams.count = 10000;
+        newSearchParams.isRandomSampling = isRandomSampling;
+        if (value?.count) {
+            newSearchParams.count = value.count;
+        }
+        this.setState({
+            exportLoading: true,
+            exportTaskVisible: false,
+        });
+        const titleMap = {
+            POST_TEXT: '文本历史记录',
+            POST_IMG: '图片历史记录',
+            POST_ARTICLE: '网页历史记录',
+            POST_AUDIO: '音频文件片段历史记录',
+            POST_AUDIOSTREAM: '音频流片段历史记录',
+            POST_VIDEO: '视频文件历史记录',
+            POST_VIDEO_IMG: '视频文件截帧图片历史记录',
+            POST_VIDEO_AUDIO: '视频文件音频片段历史记录',
+            POST_VIDEOSTREAM: '视频流历史记录',
+            POST_VIDEOSTREAM_AUDIO: '视频流音频片段历史记录',
+            POST_VIDEOSTREAM_IMG: '视频流截帧图片历史记录',
+            POST_VIDEOSTREAM_IMG_EN: '视频流截帧图片(英文)历史记录',
+            POST_VIDEOSTREAM_IMG_AR: '视频流截帧图片(英文)历史记录',
+        };
+        let downloadTitle = t(titleMap[route.routeData.serviceId]);
+        let downloadUrl = '/webapi/history/download';
+        downloadUrl = MODEL_TYPE.HISTORY_LIST.DOWNLOAD;
+        newSearchParams.fieldSet = imgTableItemColumns.filter(item => item.name !== HISTORY_COLUMN.OPERATION).map(item => item.uuid);
+        newSearchParams.fileExtension = type;
+        let title = `${t('天净')}-${t(downloadTitle)}-${t('历史记录表')}.${type}`;
+
+        exportFile(downloadUrl, title, newSearchParams).then(() => {
+            this.setState({
+                exportLoading: false,
+                exportTaskVisible: false,
+                isRandomSampling: false,
+            });
+        });
+    };
+
+    // 获取查询接口参数
+    getSearchParams = () => {
+        const { route, specialServiceId = '' } = this.props;
+        const {
+            currentGlobalFilter,
+            queryParams,
+            pageSize,
+            currentPage,
+            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),
+                });
+            }
+        }
+    };
+
+    // 获取风险类型列表
+    getRiskTypeList = async () => {
+        const { dispatch, route } = this.props;
+        if (dispatch) {
+            let riskTypeList = await dispatch({
+                type: 'base/fetchRiskTypeList',
+                payload: {
+                    organization: this.state.currentGlobalFilter.organization,
+                    serviceId: route.routeData.serviceId,
+                },
+            });
+            let newRiskTypeData = _.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,
+            });
+        }
+    };
+
+    // 获取识别结果列表
+    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 = [];
+            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);
+                    }
+                });
+            }
+            newRiskLevelData.data.selectData.optionData = newOptionData;
+            newRiskLevelData.data.selectData.doSearch = this.reDoSearch;
+            this.setState({
+                defaultRiskLevelData: newRiskLevelData,
+                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,
+            defaultNewDescriptionData,
+            defaultDescriptionData,
+        } = this.state;
+        const {route} = this.props;
+        formData.push(
+            defaultRangeTimeData,
+            defaultChannelEventData,
+            defaultRiskLevelData,
+            defaultDescriptionData
+        );
+        return formData;
+    }
+
+    /**
+     * 搜索筛选项更改
+     * @param {*} name   更改筛选项类型名称
+     * @param {*} value  更改后的值
+     */
+    changeQueryParams = (name, value, isAll, number) => {
+        const {serviceId} = this.props.route.routeData;
+        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});
+    };
+
+    /**
+     * 页码改变
+     * @param {*} page
+     * @param {*} pageSize
+     */
+    paginationOnchange = (page, pageSize) => {
+        const oldPageSize = this.state.pageSize;
+        this.setState(
+            {
+                listLoading: true,
+                currentPage: oldPageSize === pageSize ? page : 1,
+                pageSize: pageSize,
+            },
+            () => {
+                this.doSearch();
+            }
+        );
+    };
+
+
+    changeVisible(key, value) {
+        this.setState({
+            [key]: value,
+        });
+    }
+
+    changeDetailData = e => {
+        // 没有打开详情时 不做处理
+        if (!this.state.detailVisible && !this.state.newDetailVisible) {
+            return;
+        }
+        const {
+            detailIndex,
+            listData,
+            eventIdMap,
+            channelMap,
+            tokenIdBlackList,
+            ignoreList,
+            sensitiveList,
+            currentPage,
+            pageSize,
+            totalCount,
+            fieledConfig,
+        } = this.state;
+        const {formatDetailData, t} = this.props;
+        let newIndex = 0;
+        let newDetailData = {};
+        let mdData = {
+            tokenIdBlackList,
+            ignoreList,
+            sensitiveList,
+        };
+        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;
+                if (fieledConfig) {
+                    newDetailData = listData[newIndex];
+                }
+                else {
+                    newDetailData = formatDetailData(
+                        listData[newIndex],
+                        eventIdMap,
+                        channelMap,
+                        mdData
+                    );
+                }
+                this.setState({
+                    detailIndex: newIndex,
+                    detailData: newDetailData,
+                });
+            }
+        } else if (e && e.keyCode === 39) {
+            if ((currentPage - 1) * pageSize + detailIndex + 1 === totalCount) {
+                message.info(t('已经是最后一条数据了'));
+                return;
+            } else if (detailIndex === pageSize - 1) {
+                this.setState(
+                    {
+                        currentPage: currentPage + 1,
+                        detailIndex: 0,
+                    },
+                    () => {
+                        this.doSearch();
+                    }
+                );
+            } else {
+                newIndex = detailIndex + 1;
+                if (fieledConfig) {
+                    newDetailData = listData[newIndex] || [];
+                }
+                else {
+                    newDetailData = formatDetailData(
+                        listData[newIndex],
+                        eventIdMap,
+                        channelMap,
+                        mdData
+                    );
+                }
+                this.setState({
+                    detailIndex: newIndex,
+                    detailData: newDetailData,
+                });
+            }
+        }
+    };
+
+    clickDetail = index => {
+        const { formatDetailData } = this.props;
+        const {
+            listData,
+            eventIdMap,
+            channelMap,
+            tokenIdBlackList,
+            ignoreList,
+            sensitiveList,
+        } = this.state;
+        const mdData = {
+            tokenIdBlackList,
+            ignoreList,
+            sensitiveList,
+        };
+        const currentData = listData[index];
+        if (this.state.fieledConfig) {
+            this.setState({
+                newDetailVisible: true,
+                detailData: currentData,
+                detailIndex: index,
+            });
+
+            return;
+        }
+        // 格式化 详情数据
+        const detailData = formatDetailData(
+            currentData,
+            eventIdMap,
+            channelMap,
+            mdData
+        );
+        this.setState({
+            detailIndex: index,
+            detailData: detailData,
+            detailVisible: true,
+            currentData,
+        });
+    };
+
+    closeDetail = () => {
+        this.setState({
+            detailVisible: false,
+            detailIndex: 0,
+        });
+    };
+
+    /**
+     * 详情抽屉中的 点击事件（筛选，重置画像之类的）
+     * @param {*} actionType 行为类型
+     * @param {*} key 字段名
+     * @param {*} value 对应字段的值
+     * @param {*} otherData 其余data对象
+     */
+    onActionClick = async (actionType, key, value, otherData) => {
+        const {t} = this.props;
+        switch (actionType) {
+            case 'screen':
+                const {queryParams} = this.state;
+                const {
+                    startTime,
+                    endTime,
+                } = queryParams;
+                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 { currentGlobalFilter } = this.state;
+                const { organization } = currentGlobalFilter;
+                const { dispatch, route } = this.props;
+                let code = await dispatch({
+                    type: 'history/fetchResetProfile',
+                    payload: {
+                        organization,
+                        key: `${organization}_${value}`,
+                        type: otherData.type,
+                        serviceId: route.routeData.serviceId,
+                    },
+                });
+                if (code === 1100) {
+                    message.success(t('重置画像成功'));
+                } else {
+                    message.error(t('重置画像失败,请重试'));
+                }
+                break;
+            case 'addList':
+                const { type } = otherData;
+                const {
+                    ignoreList,
+                    sensitiveList,
+                    tokenIdBlackList,
+                } = this.state;
+                let newCurrentListData = [];
+                switch (type) {
+                    case 'ignore':
+                        newCurrentListData = ignoreList;
+                        break;
+                    case 'sensitive':
+                        newCurrentListData = sensitiveList;
+                        break;
+                    case 'tokenId':
+                        newCurrentListData = tokenIdBlackList;
+                        break;
+                }
+                this.setState({
+                    currentListData: newCurrentListData,
+                    listModalVisible: true,
+                    currentListValue: value,
+                });
+                break;
+            case 'viewImg':
+                this.getImgUrl(otherData.matchedItem);
+                break;
+            case 'deleteImg':
+                this.deleteMdContent(otherData.matchedItem);
+                break;
+        }
+    };
+
+    async deleteMdContent(matchedItem) {
+        const { dispatch, route } = this.props;
+        const {currentData, currentGlobalFilter } = this.state;
+        const { organization } = currentGlobalFilter;
+        const { serviceId } = route.routeData;
+
+        const result = await dispatch({
+            type: 'mingdan/getImgUrl',
+            payload: {
+                organization,
+                serviceId,
+                value: matchedItem,
+                listName: currentData.output && currentData.output.matchedList,
+            },
+        });
+
+        if (result.code === 1100) {
+            if (result.content.listId) {
+                const deleteResult = await dispatch({
+                    type: 'mingdan/deleteMdContent',
+                    payload: {
+                        organization,
+                        product: serviceId,
+                        listId: result.content.listId,
+                        contents: result.content.imgUrl ? [result.content.imgUrl] : [],
+                    },
+                });
+
+                if (deleteResult.code === 1100) {
+                    message.success('操作成功！');
+                }
+            } else {
+                message.error('名单不存在！');
+            }
+
+        }
+
+    }
+
+    // 输入框绑定按钮事件
+    onFilterKeyDown = e => {
+        if (e && e.key === KEYBOARD_CODER.ENTER) {
+            setTimeout(() => { // 按下enter 先让change事件setState
+                this.setState({currentPage: 1}, () => this.doSearch());
+            }, 50);
+        }
+    };
+
+    /**
+     * 获取命中名单图片url（图片，视频文件/视频流截帧）
+     * @param {*} matchedItem  命中图片的 哈希值
+     */
+    async getImgUrl(matchedItem) {
+        const { route, dispatch } = this.props;
+        const { serviceId } = route.routeData;
+        const { currentGlobalFilter, currentData } = this.state;
+        const { organization } = currentGlobalFilter;
+        let { content, code } = await dispatch({
+            type: 'mingdan/getImgUrl',
+            payload: {
+                organization,
+                serviceId,
+                value: matchedItem,
+                listName: currentData.output && currentData.output.matchedList,
+            },
+        });
+        if (code === 1100) {
+            Modal.info({
+                icon: null,
+                okText: '确认',
+                centered: true,
+                closable: true,
+                content: (
+                    <div>
+                        {content.imgUrl ? (
+                            <Image
+                                width={'100%'}
+                                height={200}
+                                src={content.imgUrl}
+                            />
+                        ) : (
+                            <span
+                                style={{ fontSize: '16px', color: '#394b66' }}
+                            >
+                                未找到当前命中图片!
+                            </span>
+                        )}
+                    </div>
+                ),
+            });
+        } else {
+            message.error('获取图片失败，请稍后重试');
+        }
+    }
+
+    setCurrentData(data) {
+        this.setState({
+            currentItemData: data,
+        });
+    }
+    // 格式化数据
+    formatTableColumn = dataSource => {
+        const newData = _.cloneDeep(dataSource);
+        const tableColumns = newData.map(item => {
+            const key = item.fieldTag || item.key;
+            item.title = item.name;
+            item.key = key;
+            item.dataIndex = key;
+            item.type = TABLE_COLUMN_RENDER[key] || 'text';
+
+            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;
+    };
+    // 通过字段配置的方式获取数据
+    getFieldSetList = async (parameter, dispatch) => {
+        const {route} = this.props;
+        const serviceId = route.routeData.serviceId;
+        const result = await dispatch({
+            type: MODEL_TYPE.HISTORY_LIST.TEXT_LIST,
+            payload: parameter,
+        });
+        const { listData, totalCount, realTotalCount, requestHeader = {} }  = result;
+        this.setState({
+            listLoading: false,
+            selectedContents: [], // 刷新数据后清空选中值
+            tableDataSource: listData,
+            listData,
+            totalCount: totalCount,
+            listRealTotalCount: _.isNil(realTotalCount) ? undefined : realTotalCount,
+            requestHeader: requestHeader,
+            detailData: listData[this.state.detailIndex],
+        });
+    };
+    // 获取表头
+    getFieldSetHearder = async isRest => {
+        const {dispatch, route, currentUser} = this.props;
+        const serviceId = route.routeData.serviceId;
+        const {filterData} = this.state;
+        const contents = await dispatch({
+            type: 'manage/queryFieldSetPage',
+            payload: {
+                organization: this.state.currentGlobalFilter.organization,
+                serviceId,
+                pageCategory: FIELD_SOURCE_TYPE.HISTORY_DETAIL,
+            },
+        }) || [];
+        const acccount = currentUser.account;
+        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) {
+                        item.uuid = cItem.uuid;
+                        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,
+                                });
+                                isFirst = true;
+                            }
+                        }
+                    });
+                    break;
+                case FILED_SET_DETAIL.FEATURE:
+                    detailData[item.name] = item.value;
+                    break;
+                default:
+                    break;
+            }
+        });
+        const tableColumns = this.formatTableColumn(fieldSort ? fieldSort : tableCloumnList);
+        this.setState({
+            headerData: detailData,
+            imgTableItemColumns: tableColumns,
+            searchList,
+            filterData: newFilterData,
+        }, () => {
+            // 切换公司、应用顶部搜索不需要带上url上面的条件查询
+            if (isRest) {
+                this.doSearch();
+            }
+            else {
+                this.setDefaultSearchParams();
+            }
+        });
+
+        return;
+    };
+    // 字段配置提交
+    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({
+            imgTableItemColumns: 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.imgTableItemColumns);
+        const storageName = `${SM_FIELD_SORT}_${serviceId}_${acccount}`;
+        const newData = [];
+        data.filter(item => {
+            const value = item.name || item.title;
+            if (value !== HISTORY_COLUMN.OPERATION) {
+                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={route.routeData.serviceId}
+                            organization={organization}
+                            storageName={storageName}
+                            dataSource={newData}
+                            isShowHint
+                            source={FIELD_SOURCE_TYPE.HISTORY_DETAIL}
+                            FIELD_MAX_NUMBER={FIELD_MAX_NUMBER}
+                            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 newData = _.map(tableDataSource, item => {
+            if (records?.includes(item.requestId)) {
+                item.feedback = 1;
+            }
+            return item;
+        });
+        this.setState({
+            tableDataSource: _.cloneDeep(newData),
+            selectedContents: [],
+        });
+    };
+
+    // 反馈按钮
+    handleFeedback = (record, type) => {
+        const {channelEventList, currentGlobalFilter, riskTypeList} = this.state;
+        const {specialServiceId, route, t} = this.props;
+        const {organization} = currentGlobalFilter;
+        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>
+                );
+            },
+        });
+    };
+
+    // 获取单条记录的反馈按钮选中的禁用状态
+    getRecordFeedbackDisabled = record => {
+        let errorDisabled = false; // 误杀禁用
+        let missDisabled = false; // 漏杀禁用
+
+        // 此处逻辑和单条的判断逻辑保持一致
+        if (record.feedback === 1 || record.riskLevel === PASS || record.riskLevel === PASS_CN) {
+            errorDisabled = true;
+        }
+        if (record.feedback === 1 || record.riskLevel === REJECT || record.riskLevel === REJECT_CN) {
+            missDisabled = true;
+        }
+        return {
+            errorDisabled,
+            missDisabled,
+            isAllDisabled: errorDisabled && missDisabled, // 全部禁用
+        };
+    };
+
+    // 处理批量反馈
+    handleBatchFeedback = type => {
+        const {specialServiceId, route, t} = this.props;
+
+        const {
+            channelEventList,
+            currentGlobalFilter,
+            riskTypeList,
+            tableDataSource,
+            selectedContents,
+        } = this.state;
+
+        const {organization} = currentGlobalFilter;
+        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>
+                );
+            },
+        });
+    };
+
+    // 获取批量反馈的权限配置
+    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) {
+            // 选中内容大于0 则展示 选中的操作栏
+            if (selectedContents?.length > 0) {
+                showSelectOperator = true;
+            }
+            showSelectCheckbox = true;
+        }
+        return {
+            showSelectCheckbox,
+            showSelectOperator,
+        };
+    };
+
+    // 显示多选操作栏
+    showSelectionExtraDom = () => {
+        const {t} = this.props;
+
+        const {totalCount, 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('总计')} {totalCount} {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>
+        );
+    };
+
+    // 图片的选中框
+    extraImageCheckbox = item => {
+        const isChecked = this.state.selectedContents?.includes(item.requestId);
+        return (
+            <div
+                style={{
+                    position: 'absolute',
+                    zIndex: 8,
+                }}
+            >
+                <Checkbox
+                    disabled={this.getRecordFeedbackDisabled(item).isAllDisabled}
+                    checked={this.state.selectedContents?.includes(item.requestId)}
+                    onChange={() => {
+                        const newSelectContents = _.cloneDeep(this.state.selectedContents);
+                        if (!isChecked) {
+                            newSelectContents.push(item.requestId);
+                        } else {
+                            _.remove(newSelectContents, selectItem => selectItem === item.requestId);
+                        }
+                        this.setState({
+                            selectedContents: newSelectContents,
+                        });
+                    }}
+                />
+            </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());
+    };
+
+    /**
+     * @param {*} list 列表选择的字段
+     * @param {*} organization 公司
+     * @returns 处理后的列表字段
+     * 1: SM公司下面不显示反馈字段
+     * 2: 最多只展示13个字段
+     * 3: 非SM公司反馈永远展示最下面
+     */
+    getTableColumns = (list, organization) => {
+        const newList = [];
+        _.forEach(list, item => {
+            if (newList.length < FIELD_MAX_NUMBER - 1 && item.key !== HISTORY_COLUMN.FEEDBACK) {
+                newList.push(item);
+            }
+        });
+        if (organization !== SM_ACCOUNT) {
+            newList.push({
+                dataIndex: 'feedback',
+                key: 'feedback',
+                name: '反馈',
+                title: '反馈',
+                type: 'feedback',
+                uuid: '679151cbe31b15512639a4d9b6c47986',
+            });
+        }
+        return newList;
+    };
+
+    handleSimilar = () => {
+        const {isSimilarOpen} = this.state;
+        this.setState({isSimilarOpen: !isSimilarOpen});
+    };
+
+    render() {
+        const formData = this.getFormData();
+        const newParams = this.getSearchParams();
+        const {
+            listLoading,
+            tableDataSource,
+            detailData,
+            detailVisible,
+            imgTableItemColumns,
+            totalCount,
+            listRealTotalCount,
+            currentPage,
+            pageSize,
+            listModalVisible,
+            currentListData,
+            currentListValue,
+            currentGlobalFilter,
+            eventIdMap,
+            channelMap,
+            riskLevelMap,
+            riskTypeMap,
+            defaultRiskLevelData,
+            defaultChannelEventData,
+            defaultRiskTypeData,
+            defaultAppIdData,
+            hitList,
+            exportTaskVisible,
+            newDetailVisible,
+            headerData,
+            fieledConfig,
+            storageTime,
+            exportLoading,
+            filterData,
+            resetCount,
+            requestHeader,
+            searchList,
+            queryParams,
+            riskLabelList,
+            riskLabelOption,
+            defaultRangeTimeData,
+            isSimilarOpen,
+        } = this.state;
+        defaultAppIdData.data.selectData.optionData = formatAppList();
+        const {
+            route,
+            formatHistoryTaskFormColumns = () => {},
+            buildHistoryTaskDetail = () => {},
+            currentUser,
+            t,
+            specialServiceId,
+            isIntl,
+        } = this.props;
+        const {organization, appId} = currentGlobalFilter;
+        const serviceId = route.routeData.serviceId;
+        const exportDetailMap = {
+            eventIdMap,
+            channelMap,
+            riskTypeMap,
+            riskLevelMap,
+        };
+        const selectListMap = {
+            defaultRiskLevelData,
+            defaultChannelEventData,
+            defaultRiskTypeData,
+            defaultAppIdData,
+            hitList,
+        };
+        const isShowGlobal = location.pathname.includes('history/text')
+                               || location.pathname.includes('history/image')
+                               || location.pathname.includes('history/img');
+
+        const exportTaskConfig = {
+            formatHistoryTaskFormColumns,
+            buildHistoryTaskDetail,
+            organization,
+            serviceId: specialServiceId || serviceId,
+            appId,
+            exportDetailMap,
+            title: t('历史数据导出'),
+            selectListMap,
+            currentUser,
+            visible: exportTaskVisible,
+            storageTime,
+            tableColumns: _.cloneDeep(this.state.imgTableItemColumns),
+            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 : ['all'],
+                dateRange: [moment(queryParams.startTime), moment(queryParams.endTime)],
+            },
+            exportFormOption: {
+                appIdList: _.get(_.cloneDeep(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'),
+                disabledDate: _.get(_.cloneDeep(defaultRangeTimeData), 'data.disabledDateFeedback'),
+                groupFilter: {
+                    searchList: _.cloneDeep(searchList),
+                    filterData: _.cloneDeep(filterData),
+                },
+                riskLabelOption: _.cloneDeep(riskLabelOption),
+                riskLabelList: _.cloneDeep(riskLabelList),
+            },
+            exportLoading,
+            hasExport: getAuthFunction(AUTH_FUNCTION.EXPORT),
+            hasExportHistory: getAuthFunction(AUTH_FUNCTION.EXPORT_HISTORY) && !isIntl && !isPrivate(),
+            onCancel: () => {
+                this.setState({
+                    exportTaskVisible: false,
+                    isRandomSampling: false,
+                });
+            },
+            setIsRandomSampling: value => this.setState({isRandomSampling: value}),
+            onExport: value => this.exportData(value),
+        };
+        const pagination = {
+            defaultCurrent: 1,
+            total: totalCount,
+            defaultPageSize: pageSize,
+            current: currentPage,
+            pageSizeOptions: PAGE_SIZE,
+            onChange: (page, pageSize) => {
+                this.paginationOnchange(page, pageSize);
+            },
+            showQuickJumper: true,
+        };
+        const {showSelectCheckbox, showSelectOperator} = this.getFeedbackBatchAuthConfig(organization);
+        const tableConfig = {
+            dataSource: tableDataSource,
+            columns: this.getTableColumns(imgTableItemColumns, organization),
+            isShowGlobal,
+            requestHeader,
+            serviceId,
+            handleFeedback: this.handleFeedback,
+            errorFeedback: (currentData, index) => {
+                this.errorFeedback(currentData, index);
+            },
+            clickDetail: index => {
+                this.clickDetail(index);
+            },
+            changeFeedbackVisible: (val, type) => {
+                this.changeFeedbackVisible(val, type);
+            },
+            setCurrentData: data => {
+                this.setCurrentData(data);
+            },
+            showSetIcon: fieledConfig,
+            detailField: this.detailField,
+            exportLoading,
+            exportTaskVisible: () => this.setState({exportTaskVisible: true}),
+            exportData: this.exportData,
+            isIntl,
+            ...(showSelectCheckbox ? {extraImageCheckbox: this.extraImageCheckbox} : {}),
+            ...(showSelectOperator ? {showSelectionExtraDom: this.showSelectionExtraDom} : {}),
+
+        };
+        const isSimilarImg = _.get(Storage.get(STORAGE_LIST_NAME.SM_SAAS_INFO), 'orgInfo.similar_img');
+
+        return (
+            <div>
+                <GlobalFilterListener onChange={this.globalFilterChange} />
+                <SMBackTop />
+                {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}
+                />
+                <div
+                    className={styles.similarImg}
+                    style={
+                        {
+                            display: isSimilarImg ? 'block' : 'none',
+                            height: isSimilarOpen ? 'auto' : '30px',
+                        }}
+                >
+                    <div
+                        className={styles.text}
+                        onClick={this.handleSimilar}
+                    >
+                        {t('相似图片查询')}
+                        <SMIcon type={isSimilarOpen ? 'icon-shouqixiangqing' : 'icon-zhankaixiangqing1'} />
+                    </div>
+                    <div
+                        style={{
+                            display: isSimilarOpen ? 'block' : 'none',
+                        }}
+                    >
+                        <ImgSimilar onChange={parameter => this.changeQueryParams('similarImage', parameter.imgUrl)} />
+                    </div>
+                </div>
+                <GroupFilter
+                    filterData={filterData} // 新增的筛选条件
+                    searchList={searchList} // 接口返回的 可以筛选的字段
+                    doSearch={this.reDoSearch} // 查询
+                    setState={this.filterSetState}
+                    onFilterKeyDown={this.onFilterKeyDown} // 按下回车
+                />
+                <Spin indicator={<IconLoading />} spinning={listLoading}>
+                    <ImgTable {...tableConfig} />
+                    {tableDataSource.length ? (
+                        <div className={styles.pagination}>
+                            <Pagination {...pagination} />
+                        </div>
+                    ) : null}
+                    {tableDataSource.length ? (
+                        <TotalCount
+                            top={-50}
+                            count={listRealTotalCount ?? totalCount}
+                            isShowRealTotalCount={!!listRealTotalCount}
+                        />
+                    ) : null}
+                </Spin>
+                <SMDetailDrawer
+                    detailData={detailData}
+                    searchParams={newParams}
+                    visible={detailVisible}
+                    onClose={this.closeDetail}
+                    onActionClick={this.onActionClick}
+                />
+                <NewHistoryDetailDrawer
+                    visible={newDetailVisible}
+                    headerData={headerData}
+                    detailData={detailData}
+                    hasImgList
+                    serviceId={serviceId}
+                    onClose={() => this.setState({newDetailVisible: false})}
+                    onActionClick={this.onActionClick}
+                    organization={organization}
+                    queryParams={queryParams}
+                />
+                <AddListModal
+                    visible={listModalVisible}
+                    listData={currentListData}
+                    serviceId={serviceId}
+                    organization={organization}
+                    currentValue={currentListValue}
+                    onCancel={() =>
+                        this.setState({
+                            listModalVisible: false,
+                        })
+                    }
+                />
+                <TJExportTask {...exportTaskConfig} />
+            </div>
+        );
+    }
+}
+
+export default connect(({ user, login }) => ({
+    currentUser: user.currentUser,
+    isIntl: login?.loginModeObj?.isIntl,
+}))(withIntlComponents(History));