admin2 1.0.0

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

@@ -0,0 +1,427 @@
+/**
+ * 天网-账号，设备历史记录详情
+ * zoujiazhi
+ */
+
+import {useCallback, useState, useEffect} from 'react';
+import {SMTable} from 'sm-antd';
+import {useUpdateEffect} from 'ahooks';
+import _ from 'lodash';
+import {Button, Spin, message} from 'antd';
+import {useLocation, connect} from 'umi';
+import moment from 'moment';
+import {useSelector} from 'react-redux';
+
+import {getAuthFunction} from '@/utils/AuthorityManage';
+import {formatUs} from '@/utils/helpers';
+import {SERVICEID_LIST, AUTH_FUNCTION, SM_FIELD_SORT} from '@/contants';
+import {useTwHistory, useDetailKey, useLanguage} from '@/hooks';
+import {SMSearchForm, GlobalFilterListener, SMPageSize, SMIcon} from '@/components';
+import {formatSearchParams, Storage} from '@/utils/utils';
+import withIntlComponents from '@/hoc/withIntlComponents';
+
+import SMDetailDrawer from '../components/HistoryDetailDrawer';
+
+import {
+    getLabelSearchData,
+    getFormData,
+    getTableColumns,
+    formatTwHistory,
+    getTwDetailConfig,
+} from './helper';
+import styles from './index.less';
+import TwExport from './export.js';
+import { boxIdDecrypt } from '@/services/base';
+
+
+const defaultListPage = {currentPage: 1, pageSize: 10};
+const defaultParams = {count: 11, offset: 0, pageSize: 10, from: 'inner'};
+
+const RISKLEVEL_MAP = {
+    '高': 'HIGH',
+    '非常高': 'VERY_HIGH',
+    '非常低': 'VERY_LOW',
+    '低': 'LOW',
+    '中等': 'MEDIUM',
+};
+
+const TwDetail = props => {
+    const {route, currentUser, isIntl} = props;
+    const {serviceId} = route.routeData;
+    const storageColumnsName = `${SM_FIELD_SORT}_${serviceId}_${currentUser.account}`; // 缓存表头到本地的key
+
+    const currentGlobalFilter = useSelector(state => _.get(state, 'user.currentGlobalFilter'));
+    const {twHistory, getTwHistory, exportLoading, exportData} = useTwHistory();
+    const {t} = useLanguage();
+    const location = useLocation();
+    // 详情跳转，获取参数中的筛选项
+    const searchKey = _.get(location, 'query.searchKey');
+    const searchContent = _.get(location, 'query.searchContent');
+
+    const [queryParams, setQueryParams] = useState({
+        ...defaultParams,
+        serviceId,
+        ...(serviceId === SERVICEID_LIST.ACCOUNT_FRAUD ? {
+            startDay: moment().subtract(6, 'day').format('YYYY-MM-DD'),
+            endDay: moment().format('YYYY-MM-DD'),
+        } : {
+            startTime: moment().startOf('day').unix() * 1000,
+            endTime: moment().endOf('day').unix() * 1000,
+        }),
+    });
+    const [loading, setLoading] = useState(false);
+    const [listPage, setListPage] = useState(defaultListPage);
+    const [isLastPage, setIsLastPage] = useState(true);
+    const [detailVisible, setDetailVisible] = useState(false); // 详情的显示隐藏
+    const [detailIndex, setDetailIndex] = useState(0); // 当前选中的详情的索引，用来方向键翻页
+    const [exportTaskVisible, setExportTaskVisible] = useState(false); // 导出任务的显示
+    const [tableColumns, setTableColumns] = useState([]); // 表格展示的列
+
+    // 使用方向键进行 详情的翻页
+    const handleHotkeysChange = useCallback(data => {
+        const {pageSize, currentPage, detailIndex: index} = data;
+        if (listPage.pageSize !== pageSize) {
+            setListPage({
+                ...listPage,
+                pageSize,
+            });
+            setQueryParams(prev => ({
+                ...prev,
+                pageSize,
+                count: pageSize + 1,
+            }));
+        }
+        if (listPage.currentPage !== currentPage) {
+            setListPage({
+                ...listPage,
+                currentPage,
+            });
+            setQueryParams(prev => ({
+                ...prev,
+                currentPage: 1,
+            }));
+        }
+        if (detailIndex !== index) {
+            setDetailIndex(index);
+        }
+    }, [detailIndex, listPage]);
+
+    useDetailKey({
+        visible: detailVisible,
+        pageSize: listPage.pageSize,
+        currentPage: listPage.currentPage,
+        detailIndex,
+        totalCount: isLastPage ? _.size(twHistory) : _.size(twHistory) - 1,
+        request: false,
+        ignoreCurrentPage: true,
+        handleHotkeysChange,
+    });
+    // 详情组件中的筛选函数
+    const onActionClick = useCallback((actionType, key, value, otherData) => {
+        switch (actionType) {
+            case 'screen':
+                const {startTime, endTime} = queryParams;
+                const encodeValue = encodeURIComponent(value);
+                const searchQuery = `isScreen=true&startTime=${startTime}&endTime=${endTime}`
+                + `&searchKey=${key}&searchContent=${encodeValue}`;
+                // 从配置中读取要跳转的路由
+                const searchPath = otherData.path;
+                const newUrl = encodeURI(`${searchPath}?${searchQuery}`);
+                window.open(__ASSETS_PREFIX__ + newUrl);
+                break;
+            default:
+                break;
+        }
+    }, [queryParams]);
+
+    const globalFilterChange = useCallback(obj => {
+        const {
+            orgChange,
+            currentGlobalFilter,
+            clusterIdChange,
+            appIdChange,
+        } = obj;
+
+        if (orgChange) {
+            setQueryParams(prev => ({
+                ...prev,
+                organization: currentGlobalFilter.organization,
+                offset: 0,
+            }));
+            setListPage(prev => ({...prev, currentPage: 1}));
+        } else if (appIdChange) {
+            setQueryParams(prev => ({
+                ...prev,
+                appId: currentGlobalFilter.appId,
+                offset: 0,
+            }));
+            setListPage(prev => ({...prev, currentPage: 1}));
+        } else if (clusterIdChange) {
+            // 因为设备详情可以根据集群筛选。并且参数为 colonyName
+            setQueryParams(prev => ({
+                ...prev,
+                colonyName: currentGlobalFilter.clusterId,
+                offset: 0,
+            }));
+            setListPage(prev => ({...prev, currentPage: 1}));
+        }
+    }, []);
+
+    const changeQueryParams = useCallback((name, value) => {
+        switch (name) {
+            case 'labelSearch':
+                setQueryParams(prev => {
+                    const newParams = {...prev, offset: 0};
+                    _.forEach(getLabelSearchData(serviceId).data.optionData, item => {
+                        newParams[item.value] = undefined;
+                    });
+                    if (value.searchId === 'riskLevel') {
+                        newParams[value.searchId] = _.size(value.searchText) !== 0
+                            ? RISKLEVEL_MAP[value.searchText] || value.searchText : undefined;
+                    } else {
+                        newParams[value.searchId] = _.size(value.searchText) !== 0 ? value.searchText : undefined;
+                    }
+                    return newParams;
+                });
+                break;
+            default:
+                setQueryParams(prev => ({
+                    ...prev,
+                    [name]: value,
+                }));
+                break;
+        }
+        setListPage(prev => ({...prev, currentPage: 1}));
+    }, [serviceId]);
+
+    const pageOnChange = useCallback(pagination => {
+        const {current, pageSize} = pagination;
+        const newQueryParams = _.cloneDeep(queryParams);
+        setListPage({
+            currentPage: current,
+            pageSize,
+        });
+        newQueryParams.count = pageSize + 1,
+        newQueryParams.pageSize = pageSize,
+        newQueryParams.offset = (current - 1) * pageSize,
+        setQueryParams(newQueryParams);
+    }, [queryParams]);
+
+    const showExtraDom = useCallback(() => {
+        const dom = [];
+        if (getAuthFunction(AUTH_FUNCTION.EXPORT) && serviceId === SERVICEID_LIST.ACCOUNT_FRAUD) {
+            dom.push(
+                <Spin
+                    spinning={exportLoading}
+                >
+                    <SMIcon
+                        type="icon-daochu"
+                        onClick={() => exportData({
+                            t,
+                            searchParams: formatSearchParams(queryParams),
+                        })}
+                    />
+                </Spin>
+            );
+        }
+        return (
+            <div className={styles['extra-dom']}>
+                {dom}
+            </div>
+        );
+    }, [exportData, exportLoading, queryParams, serviceId, t]);
+
+    // 保存操作列
+    const saveColumns = _.debounce(column => {
+        Storage.set(storageColumnsName, column);// 更新缓存，缓存中数据和接口请求数据保持一致
+        setTableColumns(column);
+    }, 1000);
+
+    // 模拟筛选跳转赋默认值
+    useEffect(() => {
+        if (searchKey && searchContent) {
+            try {
+                setQueryParams(prev => ({
+                    ...prev,
+                    [searchKey]: searchContent,
+                }));
+            } catch (error) {
+            }
+        }
+    }, [searchContent, searchKey]);
+
+    useEffect(() => {
+        if (twHistory && _.size(twHistory) > listPage.pageSize) {
+            setIsLastPage(false);
+        } else {
+            setIsLastPage(true);
+        }
+    }, [listPage.pageSize, twHistory]);
+
+    const resetTableColumns = params => {
+        let tableColumn = Storage.get(storageColumnsName);
+
+        const defaultTableColumn = getTableColumns({ serviceId, setDetailVisible, setDetailIndex, t, ...params });
+
+        // 如果没有获取到存储的列配置，则直接设置默认列宽为 200
+        if (!tableColumn) {
+            tableColumn = defaultTableColumn.map(item => ({ ...item, width: 200 }));
+        } else {
+            // 结合默认列配置和存储的配置，保留已保存的拖拽设置
+            tableColumn = defaultTableColumn.map(pre => {
+                const savedColumn = tableColumn.find(item => item?.dataIndex === pre?.dataIndex);
+                return savedColumn ? { ...pre, ...savedColumn } : { ...pre, width: 200 };
+            });
+        }
+        const newTableColumn = tableColumn?.map?.(i => ({
+            ...i,
+            width: i?.fixedWidth > 0 ? i.fixedWidth : i.width,
+        }));
+        setTableColumns(newTableColumn);
+    };
+
+    useEffect(() => {
+        let tableColumn = Storage.get(storageColumnsName);
+        if (!tableColumn) {
+            const defaultTableColumn = getTableColumns({serviceId, setDetailVisible, setDetailIndex, t});
+            tableColumn = _.map(defaultTableColumn, item => {
+                item.width = 200;
+                return item;
+            });
+        }
+        else {
+            // 如果从 Storage 中找到了拖拽后的列配置，则优先使用拖拽后的配置
+            // 获取最新的默认列配置，因为可能存在新增列
+            const defaultTableColumn = getTableColumns({serviceId, setDetailVisible, setDetailIndex, t});
+            tableColumn = defaultTableColumn?.map?.(pre => {
+                const savedColumn = tableColumn?.find?.(item => item?.dataIndex === pre?.dataIndex);
+                // 如果找到匹配项 savedColumn，合并默认配置和已保存的配置，保留已保存配置的拖拽设置
+                if (savedColumn) {
+                    return {
+                        ...pre,
+                        ...savedColumn,
+                    };
+                }
+                // 如果未找到匹配项，则说明该列是新增的，使用默认配置并设置宽度为 200
+                return { ...pre, width: 200 };
+            });
+
+        }
+        const newTableColumn = tableColumn?.map?.(i => ({
+            ...i,
+            width: i?.fixedWidth > 0 ? i.fixedWidth : i.width,
+        }));
+        setTableColumns(newTableColumn);
+    }, [serviceId]);
+
+    const getDeviceId = async (params = {}) => {
+        try {
+            const {organization, boxId} = params;
+            const {code, content} = await boxIdDecrypt({organization, boxId});
+            if (code === 1100) {
+                return { smid: content };
+            }
+            return false;
+        } catch (error) {
+            return false;
+        }
+    };
+
+    const doSearch = async params => {
+        setLoading(true);
+        const result = await getDeviceId(params.info);
+        setLoading(false);
+        if (result) {
+            const newParams = {
+                ...params,
+                info: {
+                    ...params.info,
+                    smid: result.smid,
+                    boxId: undefined,
+                },
+            };
+            getTwHistory(newParams, setLoading);
+        }
+    };
+
+    // 请求参数变化时，请求详情列表
+    useUpdateEffect(() => {
+        if (queryParams.organization) {
+            const params = {
+                serviceId,
+                info: formatSearchParams(queryParams),
+            };
+            resetTableColumns(params.info);
+            if (queryParams.boxId) {
+                doSearch(params);
+            }
+            else {
+                getTwHistory(params, setLoading);
+            }
+        }
+    }, [queryParams, serviceId]);
+
+    return (
+        <div className={styles['tw-detail-wrapper']}>
+            <GlobalFilterListener onChange={globalFilterChange} />
+            <div className={styles['tw-detail-wrapper-filter']}>
+                <SMSearchForm
+                    formData={getFormData({serviceId, searchContent, searchKey, t})}
+                    onChange={(name, value) => changeQueryParams(name, value)}
+                />
+                {getAuthFunction(AUTH_FUNCTION.EXPORT_HISTORY) && !isIntl && (
+                    <div className={styles['tw-detail-wrapper-export']}>
+                        <Button onClick={() => setExportTaskVisible(true)}>{t('历史数据导出')}</Button>
+                    </div>
+                )}
+            </div>
+            <div className={styles['tw-detail-wrapper-table']}>
+                <div className={styles.title}>
+                    {t(serviceId === SERVICEID_LIST.ACCOUNT_FRAUD ? '近7天账号详情' : '当天设备详情')}
+                </div>
+                <SMTable
+                    columns={formatUs(tableColumns, ['title', 'label', 'placeholder', 'help'], t)}
+                    loading={loading}
+                    scroll={{ x: 300, y: 'auto' }}
+                    dataSource={formatTwHistory(isLastPage ? twHistory : _.slice(twHistory, 0, listPage.pageSize))}
+                    wrapperStyle={{margin: 0}}
+                    extraDom={showExtraDom()}
+                    customLoadingUrl={props.customLoadingIcon}
+                    isDrag
+                    getNewTableColumn={saveColumns}
+                    antdProps={{
+                        pagination: false,
+                    }}
+                />
+                <SMPageSize
+                    loading={loading}
+                    pageSizeOptions={[10, 20, 50]}
+                    defaultPageSize={10}
+                    listPage={listPage}
+                    isLastPage={isLastPage}
+                    setListPage={setListPage}
+                    pageOnChange={pageOnChange}
+                />
+            </div>
+            <SMDetailDrawer
+                visible={detailVisible}
+                detailData={getTwDetailConfig(_.get(twHistory, `[${detailIndex}]`))}
+                onClose={() => setDetailVisible(false)}
+                onActionClick={onActionClick}
+            />
+            {serviceId === SERVICEID_LIST.DEVICE_PROFILE && (
+                <TwExport
+                    organization={currentGlobalFilter.organization}
+                    serviceId={serviceId}
+                    appId={currentGlobalFilter.appId}
+                    visible={exportTaskVisible}
+                    setVisible={setExportTaskVisible}
+                />
+            )}
+        </div>
+    );
+};
+export default connect(({ user, login }) => ({
+    currentUser: user.currentUser,
+    isIntl: login?.loginModeObj?.isIntl,
+}))(withIntlComponents(TwDetail));

package/src/pages/pageComponents/historyPage/TwDetail/index.less

@@ -0,0 +1,63 @@
+.tw-detail-wrapper {
+    &-table {
+        margin-top: 20px;
+        background: #fff;
+        padding: 20px 0;
+    }
+    .title {
+        padding-left: 16px;
+        font-weight: 600;
+        position: relative;
+        margin-left: 20px;
+        font-size: 14px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        color: #394B66;
+    }
+    .title::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 2px;
+        width: 4px;
+        height: 18px;
+        background-color: @auxiliary-tip-color;
+    }
+    &-export {
+        display: flex;
+        justify-content: end;
+        margin-right: 20px;
+        Button {
+            &:hover,&:focus {
+                color: #fff;
+            }
+        }
+    }
+    &-filter {
+        background: #fff;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        :global {
+            .search-form___L2TTR {
+                padding-left: 4px;
+            }
+        }
+    }
+    :global {
+        ._2t343 {
+            box-shadow: none;
+            padding-top: 0;
+        }
+    }
+}
+.extra-dom {
+    width: 200px;
+    display: flex;
+    justify-content: end;
+    float: right;
+    
+    svg {
+        font-size: 30px;
+        margin-left: 10px;
+    }
+}