admin2 1.0.0

package/src/pages/pageComponents/RankPageTwo/index.jsx

@@ -0,0 +1,606 @@
+/* eslint-disable max-len */
+/**
+ * rank页面组件
+ * 邹家志
+ */
+
+import {useState, useEffect, useCallback, useRef, useMemo} from 'react';
+import {connect} from 'umi';
+import moment from 'moment';
+import _ from 'lodash';
+import {Tooltip, message} from 'antd';
+import {QuestionCircleOutlined} from '@ant-design/icons';
+import {SMTable} from 'sm-antd';
+// fetchMultRiskLabelList
+import {getAuthFunction} from '@/utils/AuthorityManage';
+import SMNoteTip from '@/components/SMNoteTip';
+import {getDetailTableOptions} from '@/pages/configure/tj/rank/list';
+import {textRender, riskLevelRender, imageRender} from '@/utils/tableHelper';
+import {getRankSource, getDescriptionList} from '@/services/rank';
+import {REQUEST_CODE, SERVICEID_LIST, AUTH_FUNCTION, tableText, ALL, STORAGE_LIST_NAME} from '@/contants';
+import GlobalFilterListener from '@/components/GlobalFilterListener';
+import {
+    formatRankSearchParams,
+    exportFile,
+    formatRankSource,
+    getFinalDescription,
+    Storage,
+    getOptionDataItem,
+    formatSearchParams,
+} from '@/utils/utils';
+import TotalCount from '@/components/TotalCount';
+import SMSearchForm from '@/components/SMSearchForm';
+import {PAGE_SIZE} from '@/contants/pageSize';
+import {useChannel, useRiskType, useDetailKey, useLanguage} from '@/hooks';
+import {formatUs} from '@/utils/helpers';
+import withIntlComponents from '@/hoc/withIntlComponents';
+import {queryMultRiskLabel} from '@/services/base';
+import {API} from '@/configure';
+import {queryListService} from '@/services/history';
+import {judgeServiceIdType} from '@/contants/judgeServiceIdType';
+
+import SMDetailDrawer from '../historyPage/components/HistoryDetailDrawer';
+import {getLabelConfig, handleLabelAll} from '../historyPage/help';
+import {MAX_QUERY_NUMBER} from '../historyPage/constants';
+import formatMdListByAppId from '../formatMdListByAppId';
+
+import {
+    RANK_LIST_ACTION,
+    RANK_EXPORT_ACTION,
+    TITLE_MAP,
+    JUMP_URL,
+    TITLE_SECOND_MAP,
+    DEFAULT_PARAMS,
+    PARAMS_TYPE,
+    LIMIT,
+    SEARCH_METHOD,
+} from './constants';
+import styles from './index.less';
+
+const RankPageTwo = props => {
+    const {route, tableColumns, rankSearchForm, action, rankIndex, type, noteInfo} = props;
+
+    const {t} = useLanguage();
+
+    const {serviceId, isRepeat = false, rankType} = route.routeData;
+
+    const {getChannelEventList} = useChannel();
+    const {getRiskType} = useRiskType();
+
+    const [resetCount, setResetCount] = useState();
+    const [queryParams, setQueryParams] = useState({
+        startDay: moment().subtract(1, DEFAULT_PARAMS.DAY).format(DEFAULT_PARAMS.DATE_FORMAT),
+        endDay: moment().subtract(1, DEFAULT_PARAMS.DAY).format(DEFAULT_PARAMS.DATE_FORMAT),
+        serviceId,
+        appId: DEFAULT_PARAMS.ALL,
+        channel: DEFAULT_PARAMS.ALL,
+        ...(type ? {dimension: PARAMS_TYPE.TOKEN_ID} : {}),
+        ...(rankIndex ? {index: rankIndex} : {}),
+    });
+    const [dimension, setDimension] = useState(PARAMS_TYPE.TOKEN_ID);
+    const [rankLoading, setRankLoading] = useState(true);
+    const [searchForm, setSearchForm] = useState(rankSearchForm);
+    const [rankSource, setRankSource] = useState([]);
+    const [rankTotal, setRankTotal] = useState(0);
+    const [rankTableColumns, setRankTableColumns] = useState(tableColumns);
+    const [listPage, setListPage] = useState({
+        currentPage: 1,
+        pageSize: 20,
+    });
+    const [detailVisible, setDetailVisible] = useState(false);
+    const [detailIndex, setDetailIndex] = useState(0);
+    const [detailData, setDetailData] = useState({});
+    const [riskLabelList, setRiskLabelList] = useState([]); // 风险原因列表
+    const [activityRiskLabel, setActivityRiskLabel] = useState([]); // 选中的风险原因
+    const [resetMdValue, setResetMdValue] = useState(true);
+
+    const firstEnter = useRef(true);
+
+    const handleHotkeysChange = useCallback(data => {
+        const {pageSize, currentPage, detailIndex: index} = data;
+        if (listPage.pageSize !== pageSize) {
+            setListPage({
+                ...listPage,
+                pageSize,
+            });
+        }
+        if (listPage.currentPage !== currentPage) {
+            setListPage({
+                ...listPage,
+                currentPage,
+            });
+        }
+        if (detailIndex !== index) {
+            setDetailIndex(index);
+        }
+    }, [detailIndex, listPage]);
+
+    useDetailKey({
+        visible: detailVisible,
+        pageSize: listPage.pageSize,
+        currentPage: listPage.currentPage,
+        detailIndex,
+        totalCount: rankTotal,
+        request: false,
+        handleHotkeysChange,
+    });
+
+    /**
+     * 格式化风险原因参数
+     */
+    const formatDescription = useCallback(value => {
+        if (_.isArray(value)) {
+            if (!value.length) {
+                return '';
+            }
+            const finalLabel = getFinalDescription(value, riskLabelList);
+            const formatFinalLabel = _.map(finalLabel, ele => {
+                return _.map(ele, item => {
+                    return item.split('|')[0];
+                });
+            });
+            return formatFinalLabel;
+        }
+        return value;
+    }, [riskLabelList]);
+
+    const handleParamsChange = useCallback((name, value, isAll, number) => {
+        const newQueryParams = _.cloneDeep(queryParams);
+        switch (name) {
+            case PARAMS_TYPE.TIME:
+                const startDay = value[0].format(DEFAULT_PARAMS.DATE_FORMAT);
+                const endDay = value[1].format(DEFAULT_PARAMS.DATE_FORMAT);
+                newQueryParams.startDay = startDay;
+                newQueryParams.endDay = endDay;
+                break;
+            case PARAMS_TYPE.RADIO_TIME:
+                if (!value) {
+                    return;
+                }
+                const radioTime = value.format(DEFAULT_PARAMS.DATE_FORMAT);
+                newQueryParams.startDay = radioTime;
+                newQueryParams.endDay = radioTime;
+                break;
+            case PARAMS_TYPE.DIMENSION:
+                setDimension(value);
+                setSearchForm(prev => {
+                    return _.map(prev, item => {
+                        if (item.name === 'riskTag') {
+                            item.isHide = value !== 'tokenId';
+                        }
+                        return item;
+                    });
+                });
+                newQueryParams.dimension = value;
+                delete newQueryParams.riskTag;
+                break;
+            case 'riskTag':
+                if (Array.isArray(value) && value.length === 0) {
+                    delete newQueryParams.riskTag;
+                } else {
+                    newQueryParams.riskTag = value;
+                }
+                break;
+            case PARAMS_TYPE.DESCRIPTION:
+                if (isAll) {
+                    newQueryParams[name] = ALL;
+                    value = [];
+                }
+                else {
+                    newQueryParams[name] = formatDescription(value);
+                }
+                setActivityRiskLabel(value);
+                break;
+            default:
+                newQueryParams[name] = value;
+        }
+        setListPage({
+            ...listPage,
+            currentPage: 1,
+        });
+        setQueryParams(newQueryParams);
+    }, [queryParams, setQueryParams, listPage, riskLabelList]);
+
+    const handlePageChange = useCallback(pagination => {
+        const {current, pageSize} = pagination;
+        setListPage({
+            currentPage: current,
+            pageSize: pageSize,
+        });
+    }, []);
+
+    const getCustomMdList = async (params = {}) => {
+        const {isTextZnServiceId} = judgeServiceIdType(serviceId);
+        // 只有敏感词排行榜才去请求名单列表
+        if (rankType !== PARAMS_TYPE.RANK_SENSITIVE_WORD || !isTextZnServiceId) {
+            return;
+        }
+        let mdList = [{
+            name: '敏感词名单',
+            value: '敏感词名单',
+        }];
+        setResetMdValue(prev => !prev);
+        try {
+            // 此处注意，目前名单列表只支持公司和应用的变化而变化，其他条件暂时重新请求
+            const {code, contents} = await queryListService(formatSearchParams({
+                count: 10000,
+                offset: 0,
+                organization: params.organization || queryParams.organization,
+                // appId: params.appId || queryParams.appId,
+                product: serviceId,
+                subText: 'text',
+                type: '1',
+            }));
+            const {currentFilterAppId} = formatSearchParams({
+                currentFilterAppId: params.appId || queryParams.appId,
+            });
+            if (code === 1100) {
+                mdList = formatMdListByAppId(contents, currentFilterAppId);
+            }
+        } catch (error) {
+        }
+        const newRankSearchForm = _.map(rankSearchForm, item => {
+            if (item.name === 'matchedList') {
+                item.data.selectData.optionData = mdList;
+            }
+            return item;
+        });
+        setSearchForm(newRankSearchForm);
+        return mdList;
+    };
+
+    const getChannelServiceId = useMemo(() => {
+        switch (serviceId) {
+            case 'POST_AUDIOCLIPS':
+                return 'POST_AUDIO';
+            case 'POST_AUDIOSTREAMCLIPS':
+                return 'POST_AUDIOSTREAM';
+            default:
+                return serviceId;
+        }
+    }, [serviceId]);
+
+    const getChannelList = useCallback((list = []) => {
+        const newOptionData = [];
+        list.forEach(item => {
+            newOptionData.push({
+                value: item.value,
+                name: `${item.name}（${item.value}）`,
+            });
+        });
+        return newOptionData;
+    }, []);
+
+    const handleOrgChange = useCallback(async currentGlobalFilter => {
+        const params = {
+            organization: currentGlobalFilter.organization,
+            serviceId,
+        };
+        const channelParams = {
+            organization: currentGlobalFilter.organization,
+            serviceId: getChannelServiceId,
+        };
+        const channel = await getChannelEventList(channelParams);
+        const riskType = await getRiskType(params);
+        const labelConfig = getLabelConfig(serviceId);
+        const {contents = []} = await queryMultRiskLabel({product: labelConfig.product, category: 'rule'});
+        const newRanSearchForm = _.map(rankSearchForm, item => {
+            switch (item.name) {
+                case PARAMS_TYPE.CHANNEL:
+                    item.data.selectData.optionData = getChannelList(channel);
+                    break;
+                case PARAMS_TYPE.RISKTYPE:
+                    item.data.selectData.optionData = riskType;
+                    break;
+                case 'riskTag':
+                    item.data.selectData.optionData = contents;
+                    break;
+                case PARAMS_TYPE.DESCRIPTION:
+                    const riskLabelOption = handleLabelAll(contents, item.data.selectData);
+                    item.data.selectData.optionData = riskLabelOption;
+                    item.data.selectData.defaultValue = [];
+                    setRiskLabelList(contents);
+                case '导出':
+                    item.tooltip = '导出当前列表根据过滤条件过滤后得到的前1000条数据';
+                    break;
+                default:
+                    break;
+            }
+            return item;
+        });
+        setSearchForm(newRanSearchForm);
+    }, [getChannelEventList, serviceId, rankSearchForm, getRiskType]);
+
+    const globalFilterChange = useCallback(obj => {
+        const {orgChange, currentGlobalFilter, appIdChange} = obj;
+        if (orgChange) {
+            handleOrgChange(currentGlobalFilter);
+            setResetCount(!resetCount);
+            setQueryParams({
+                ...queryParams,
+                organization: currentGlobalFilter.organization,
+                channel: DEFAULT_PARAMS.ALL,
+                matchedList: [], // 公司改变时，将名单列表参数清空
+                appId: currentGlobalFilter.appId,
+            });
+        } else if (appIdChange) {
+            setQueryParams({
+                ...queryParams,
+                appId: currentGlobalFilter.appId,
+                matchedList: [], // 应用改变时，将名单列表参数清空
+            });
+        }
+        // 公司应用改变时，请求名单列表
+        getCustomMdList({organization: currentGlobalFilter.organization, appId: currentGlobalFilter.appId});
+    }, [handleOrgChange, resetCount, queryParams]);
+
+    const getAction = useCallback(() => {
+        return action ? action.LIST : RANK_LIST_ACTION[dimension];
+    }, [action, dimension]);
+
+    const handleExportAction = useCallback(() => {
+        if (rankType === PARAMS_TYPE.RANK_RISK) {
+            return API.RANK.DESCRIPTIONS.EXPORT;
+        }
+        return action ? action.EXPORT : RANK_EXPORT_ACTION[dimension];
+    }, [action, dimension]);
+
+    const exportData = useCallback(callback => {
+        const newSearchParams = _.cloneDeep(queryParams);
+        // 名单matchedList存在并且长度为0时，删掉该字段
+        if (newSearchParams.matchedList && newSearchParams.matchedList.length === 0) {
+            delete newSearchParams.matchedList;
+        }
+        if (newSearchParams.description && newSearchParams.description.length > MAX_QUERY_NUMBER) {
+            message.warning(t('风险原因已超查询上限，单次查询请控制在10个以内！'));
+            return;
+        }
+        if (rankType !== 'rankRisk') {
+            newSearchParams.count = LIMIT;
+        }
+        const downloadTitle = TITLE_MAP[serviceId];
+        const secondTitle = TITLE_SECOND_MAP[rankType];
+        const downloadUrl = handleExportAction();
+        const title = `天净-${downloadTitle}-${secondTitle}.csv`;
+        exportFile(downloadUrl, title, formatRankSearchParams(newSearchParams)).then(() => {
+            callback && callback();
+        });
+    }, [queryParams, serviceId, handleExportAction, rankType]);
+
+    const processArray = (arr, keys) => {
+        let initialMatches = arr.filter(subArray => subArray[0].split('|')[0] === keys[0]);
+
+        // 只有一个不需要查询二三级逻辑
+        if (initialMatches.length < 1) {
+            return initialMatches;
+        }
+
+        // 逐步匹配 keys 中的每个参数，从第二个参数开始
+        for (let i = 1; i < keys.length; i++) {
+            initialMatches = initialMatches.filter(subArray => subArray[i].split('|')[0] === keys[i]);
+        }
+
+        return initialMatches; // 返回包含所有匹配值的数组
+    };
+
+    /**
+     * 点击详情跳转到历史记录页面
+     */
+    const handleClickDetails = useCallback((path, record) => {
+        try {
+            if (PARAMS_TYPE.RANK_RISK === rankType) {
+                const descArray = record.desc.split(':');
+                const result = processArray(getOptionDataItem(riskLabelList), descArray);
+                Storage.set(STORAGE_LIST_NAME.DESCRIPTION, result);
+            }
+        } catch (error) {}
+        window.open(__ASSETS_PREFIX__ + path);
+    }, [riskLabelList]);
+
+    const getRankList = useCallback(async () => {
+        setRankLoading(true);
+        const params = formatRankSearchParams(queryParams);
+        // 名单matchedList存在并且长度为0时，删掉该字段
+        if (params.matchedList && params.matchedList.length === 0) {
+            delete params.matchedList;
+        }
+        if (params.description && params.description.length > MAX_QUERY_NUMBER) {
+            message.warning(t('风险原因已超查询上限，单次查询请控制在10个以内！'));
+            setRankLoading(false);
+            return;
+        }
+        const {contents = [], totalCount, code} = await (rankType === 'rankRisk' ? getDescriptionList(params, getAction()) : getRankSource(params, getAction()));
+        if (code === REQUEST_CODE.SUCCESS) {
+            setRankSource(contents || []);
+            setRankTotal(totalCount);
+        }
+        setRankLoading(false);
+    }, [queryParams, getAction]);
+
+    const renderDetail = useCallback((detail, record) => {
+        const {riskType, riskLevel, channel, appId, dimension: content, matchedItem, matchedList} = detail;
+        const {startDay, endDay} = queryParams;
+        if (isRepeat) {
+            return (
+                <span
+                    className={styles.detail}
+                    onClick={() => {
+                        setDetailIndex(detail.index);
+                        setDetailVisible(true);
+                    }}
+                >
+                    {t('详情')}
+                </span>
+            );
+        }
+        const isTextZnOrImage = serviceId === 'POST_TEXT' || serviceId === 'POST_IMG';
+        const matchItemMap = {
+            'POST_TEXT': 'originMatchItem',
+            'POST_IMG': 'originMatchItem',
+        };
+        // 敏感词排行榜的 搜索Key值
+        const sensitiveKey = isTextZnOrImage ? JSON.stringify([matchItemMap?.[serviceId]]) : JSON.stringify([PARAMS_TYPE.MATCH_ITEM]);
+        // 最终根据当前数据中是否有维度来判断当前是敏感词排行榜还是其他三个tab页
+        const searchKey = content ? dimension : encodeURIComponent(`${sensitiveKey}`);
+        const sensitiveContent = JSON.stringify([matchedItem]);
+        const searchContent = encodeURIComponent(content ? content : sensitiveContent);
+        const searchKeyType = encodeURIComponent(JSON.stringify([SEARCH_METHOD.TERMS]));
+        let path = `${JUMP_URL[serviceId]}?serviceId=${serviceId}&startTime=${startDay} 00:00:00&endTime=${endDay} `
+            + `23:59:59${riskType ? `&riskType=${riskType}` : ''}${riskLevel ? `&riskLevel=${riskLevel}` : ''}`
+            + `&appId=${appId}&channel=${channel}&searchKey=${searchKey}&searchContent=${searchContent}`;
+        switch (rankType) {
+            case PARAMS_TYPE.RANK_PROBLEM:
+                path += '&riskLevel=REJECT';
+                if (queryParams.riskTag && queryParams.riskTag.length > 0) {
+                    path += `&riskTag=${queryParams.riskTag.join('|')}`;
+                }
+                break;
+            case PARAMS_TYPE.RANK_SENSITIVE_WORD:
+                path += `&searchKeyType=${searchKeyType}&multipleSearch=1`;
+                break;
+            case PARAMS_TYPE.RANK_RISK:
+                path = `${JUMP_URL[serviceId]}?serviceId=${serviceId}&startTime=${startDay} 00:00:00&endTime=${endDay} 23:59:59`
+                + `&channel=${queryParams.channel || ALL}`;
+                break;
+            default:
+                break;
+        }
+        return <span className={styles.detail} onClick={() => handleClickDetails(path, record)}>{t('详情')}</span>;
+    }, [serviceId, queryParams, dimension, isRepeat, rankType, activityRiskLabel, riskLabelList]);
+
+    const getTableColumns = useCallback(() => {
+        const newTableColumns = _.map(tableColumns, item => {
+            switch (item.type) {
+                case PARAMS_TYPE.TEXT:
+                    item.render = textRender;
+                    break;
+                case PARAMS_TYPE.IMAGE:
+                    item.render = imageRender;
+                    break;
+                case PARAMS_TYPE.RISKLEVEL:
+                    item.render = riskLevelRender;
+                    break;
+                case PARAMS_TYPE.DETAIL:
+                    item.render = renderDetail;
+                    break;
+                default:
+                    break;
+            }
+            if (item.key === PARAMS_TYPE.DIMENSION) {
+                item.title = `${t('维度')}（${dimension}）`;
+            }
+            if (item.key === PARAMS_TYPE.REJECT_RADIO) {
+                item.title = (
+                    <div style={{display: 'flex'}}>{t('拒绝比例')}
+                        <div
+                            style={{
+                                marginLeft: 4,
+                                cursor: 'pointer',
+                            }}
+                        >
+                            <Tooltip title={t('拒绝比例=每日发帖拒绝数/每日发帖总数')}>
+                                <QuestionCircleOutlined />
+                            </Tooltip>
+                        </div>
+                    </div>
+                );
+            }
+            return item;
+        });
+        setRankTableColumns(newTableColumns);
+    }, [tableColumns, dimension, renderDetail]);
+
+    // 详情页面点击事件
+    const onActionClick = useCallback((action, key, value) => {
+        switch (action) {
+            case 'link':
+                const startTime = moment(queryParams.startDay).format('x');
+                const endTime = moment(queryParams.endDay).endOf('day').format('x');
+                const url = `${JUMP_URL[serviceId]}?startTime=${startTime}&endTime=${endTime}&searchKey=tokenId&searchContent=${value}`;
+                if (JUMP_URL[serviceId]) {
+                    window.open(__ASSETS_PREFIX__ + url);
+                }
+                break;
+        }
+    }, [serviceId, queryParams]);
+
+    useEffect(() => {
+        if (!firstEnter.current) {
+            getRankList();
+        } else {
+            firstEnter.current = false;
+        }
+    }, [getRankList]);
+
+    useEffect(() => {
+        getTableColumns();
+    }, [getTableColumns]);
+
+    useEffect(() => {
+        if (rankSource.length > 0) {
+            setDetailData(getDetailTableOptions(rankSource[detailIndex], serviceId === SERVICEID_LIST.POST_IMG));
+        }
+    }, [detailIndex, rankSource, serviceId]);
+    return (
+        <div className={styles['rank-page-content']}>
+            <GlobalFilterListener onChange={globalFilterChange} />
+            {noteInfo && (
+                <div className={styles['note-tip']}>
+                    <SMNoteTip noteInfo={noteInfo} />
+                </div>
+            )}
+            <SMSearchForm
+                formData={_.filter(searchForm, ele => {
+                    if (ele.isHide === true) {
+                        return false;
+                    }
+                    if (getAuthFunction(AUTH_FUNCTION.EXPORT)) {
+                        return true;
+                    }
+                    return ele.type !== AUTH_FUNCTION.EXPORT;
+                })}
+                exportData={callback => exportData(callback)}
+                serviceIdChangeCount={resetCount}
+                resetDefaultValueConfig={{
+                    nameList: ['matchedList'],
+                    resetDefaultValue: resetMdValue,
+                }}
+                onChange={handleParamsChange}
+            />
+            <div className={styles['table-list']}>
+                <SMTable
+                    columns={formatUs(rankTableColumns, ['title'], t)}
+                    dataSource={formatRankSource(rankSource)}
+                    loading={rankLoading}
+                    totalCount={rankTotal}
+                    wrapperStyle={{margin: 0}}
+                    i18nText={tableText(t)}
+                    customLoadingUrl={props.customLoadingIcon}
+                    antdProps={{
+                        rowKey: 'rank',
+                        pagination: {
+                            showQuickJumper: true,
+                            defaultPageSize: 20,
+                            pageSizeOptions: PAGE_SIZE,
+                            total: rankTotal,
+                            current: listPage.currentPage,
+                            showSizeChanger: true,
+                        },
+                        onChange: handlePageChange,
+                    }}
+                />
+                {rankSource.length ? <TotalCount count={rankTotal} /> : null}
+            </div>
+            <SMDetailDrawer
+                visible={detailVisible}
+                detailData={detailData}
+                onClose={() => setDetailVisible(false)}
+                onActionClick={onActionClick}
+            />
+        </div>
+    );
+};
+
+export default connect(({user}) => ({
+    currentUser: user.currentUser,
+}))(withIntlComponents(RankPageTwo));

package/src/pages/pageComponents/RankPageTwo/index.less

@@ -0,0 +1,30 @@
+/**
+ * rank页面组件
+ * 邹家志
+ */
+ 
+.rank-page-content {
+    position: relative;
+    :global(.ant-modal) {
+        width: 750px !important;
+    }
+    .note-tip {
+        background-color: #ffffff;
+        padding: 24px 32px 6px 32px;
+    }
+    .detail {
+        color: #13CBB9;
+        cursor: pointer;
+    }
+    .table-list{
+        margin-top: 20px;
+        .item-switch, .item-switch-disabled {
+            svg{
+                width: 42px;
+            }
+        }
+        .item-switch-disabled {
+            cursor: default;
+        }
+    }
+}