admin2 1.0.0

package/src/pages/pageComponents/historyPage/TwNewDetail/helper.js

@@ -0,0 +1,815 @@
+/* eslint-disable eqeqeq */
+/**
+ * 天网-账号，设备历史记录详情的一些helper方法
+ * zoujiazhi
+ */
+
+import _ from 'lodash';
+import moment from 'moment';
+import {
+    Form,
+    Input,
+    Select,
+    DatePicker,
+    message,
+    Tooltip,
+    Cascader,
+} from 'antd';
+
+import {ROUTE_PATH} from '@/configure';
+import {SERVICEID_LIST} from '@/contants';
+import SMIcon from '@/components/SMIcon';
+
+import SMPopConfirm from '../../mdPage/components/SMPopConfirm';
+
+import styles from './export.less';
+
+const { TextArea } = Input;
+const { Option } = Select;
+
+const PROCESS_STATUS = {
+    '0': '待提取',
+    '1': '提取中',
+    '2': '提取失败',
+    '3': '提取成功',
+    '4': '提取失败（时间段无数据）',
+};
+
+const getLabelSearchData = (serviceId, searchContent, searchKey) => {
+    return {
+        type: 'labelSearch',
+        name: 'labelSearch',
+        data: {
+            placeholder: '请输入搜索内容',
+            // 若为筛选进来的，则赋上默认值
+            ...(searchContent ? {defaultContent: searchContent} : {}),
+            ...(searchKey ? {defaultValue: searchKey} : {}),
+            optionData: serviceId === 'ACCOUNT_FRAUD' ? [
+                {
+                    value: 'tokenId',
+                    name: '账号',
+                },
+            ] : [
+                {
+                    value: 'smid',
+                    name: '设备标识',
+                },
+                {
+                    value: 'ip',
+                    name: 'IP',
+                },
+                {
+                    value: 'os',
+                    name: '平台',
+                },
+                {
+                    value: 'channel',
+                    name: '渠道',
+                },
+            ],
+        },
+    };
+};
+
+// 获取账号，设备的列表筛选项配置
+const getFormData = params => {
+    const {
+        serviceId,
+        searchContent,
+        searchKey,
+        t,
+        selectList = {},
+    } = params;
+    let formData = [];
+
+    switch (serviceId) {
+        case SERVICEID_LIST.ACCOUNT_FRAUD:
+            formData = [
+                getLabelSearchData(serviceId, t),
+                {
+                    type: 'datePicker',
+                    name: 'updateTime',
+                    data: {
+                        dateSelectArr: [],
+                        dateFormat: 'YYYY-MM-DD',
+                        isShowNull: true,
+                    },
+                },
+                {
+                    type: 'select',
+                    name: 'riskLabel',
+                    data: {
+                        selectData: {
+                            optionData: selectList.labels || [],
+                            title: '风险标签',
+                            labelId: 'riskLabel',
+                            isAddAll: true,
+                            defaultValue: 'all',
+                            labelName: 'label',
+                            valueName: 'name',
+                        },
+                    },
+                },
+                {
+                    type: 'select',
+                    name: 'riskLevel',
+                    data: {
+                        selectData: {
+                            optionData: selectList.levels || [],
+                            title: '风险等级',
+                            labelId: 'riskLevel',
+                            isAddAll: true,
+                            defaultValue: 'all',
+                            labelName: 'key',
+                            valueName: 'name',
+                        },
+                    },
+                },
+            ];
+            break;
+        case SERVICEID_LIST.DEVICE_PROFILE:
+            formData = [
+                getLabelSearchData(serviceId, searchContent, searchKey, t),
+            ];
+            break;
+        default:
+            break;
+    }
+    return formData;
+};
+
+// 文本类型
+const textRender = text => {
+    return (
+        <Tooltip
+            placement="left"
+            title={text || '-'}
+        >
+            <span>{text || '-'}</span>
+        </Tooltip>
+    );
+};
+
+// 超链接
+const linkRender = (record, key, onClick) => {
+    return (
+        <Tooltip
+            placement="left"
+            title={record[key] || '-'}
+        >
+            <a onClick={() => {onClick?.(record);}}>{record[key] || '-'}</a>
+        </Tooltip>
+    );
+};
+
+// 详情类型
+const detailRender = (record, setDetailVisible, setDetailIndex, t) => {
+    return (
+        <a
+            onClick={() => {
+                setDetailIndex?.(record.index);
+                setDetailVisible?.(true);
+            }}
+        >
+            {t('详情')}
+        </a>
+    );
+};
+
+// 获取账号，设备的列表项
+const getTableColumns = params => {
+    const {serviceId, setDetailVisible, setDetailIndex, t, onClick} = params;
+    let tableColumns = [];
+    switch (serviceId) {
+        case SERVICEID_LIST.ACCOUNT_FRAUD:
+            tableColumns = [
+                {
+                    title: '账号',
+                    key: 'tokenId',
+                    dataIndex: 'tokenId',
+                    type: 'text',
+                    ellipsis: true,
+                    render: (text, record) => linkRender(record, 'tokenId', onClick),
+                },
+                {
+                    title: '风险等级',
+                    key: 'riskLevel',
+                    dataIndex: 'riskLevel',
+                    type: 'text',
+                    ellipsis: true,
+                    render: textRender,
+                },
+                {
+                    title: '风险标签',
+                    key: 'riskLabel',
+                    dataIndex: 'riskLabel',
+                    type: 'text',
+                    ellipsis: true,
+                    render: textRender,
+                },
+                {
+                    title: '打标应用',
+                    key: 'appId',
+                    dataIndex: 'appId',
+                    type: 'text',
+                    ellipsis: true,
+                    render: textRender,
+                },
+                {
+                    title: '打标时间',
+                    key: 'riskTime',
+                    dataIndex: 'riskTime',
+                    type: 'text',
+                    ellipsis: true,
+                    render: textRender,
+                },
+            ];
+            break;
+        case SERVICEID_LIST.DEVICE_PROFILE:
+            tableColumns = [
+                {
+                    title: '设备标识',
+                    key: 'smid',
+                    dataIndex: 'smid',
+                    type: 'text',
+                    ellipsis: true,
+                    render: textRender,
+                },
+                {
+                    title: '平台',
+                    key: 'os',
+                    dataIndex: 'os',
+                    type: 'text',
+                    ellipsis: true,
+                    render: textRender,
+                },
+                {
+                    title: '渠道',
+                    key: 'channel',
+                    dataIndex: 'channel',
+                    type: 'text',
+                    ellipsis: true,
+                    render: textRender,
+                },
+                {
+                    title: 'APP版本',
+                    key: 'appver',
+                    dataIndex: 'appver',
+                    type: 'text',
+                    ellipsis: true,
+                    render: textRender,
+                },
+                {
+                    title: '设备版本协议',
+                    key: 'protocol',
+                    dataIndex: 'protocol',
+                    type: 'text',
+                    ellipsis: true,
+                    render: textRender,
+                },
+                {
+                    title: '设备型号',
+                    key: 'model',
+                    dataIndex: 'model',
+                    type: 'text',
+                    ellipsis: true,
+                    render: textRender,
+                },
+                {
+                    title: '系统版本',
+                    key: 'osver',
+                    dataIndex: 'osver',
+                    type: 'text',
+                    ellipsis: true,
+                    render: textRender,
+                },
+                {
+                    title: '设备风险',
+                    key: 'description',
+                    dataIndex: 'description',
+                    type: 'text',
+                    ellipsis: true,
+                    render: textRender,
+                },
+                {
+                    title: '应用名称',
+                    key: 'appname',
+                    dataIndex: 'appname',
+                    type: 'text',
+                    ellipsis: true,
+                    render: textRender,
+                },
+                {
+                    title: '发生时间',
+                    key: 'ctime',
+                    dataIndex: 'ctime',
+                    type: 'text',
+                    ellipsis: true,
+                    render: textRender,
+                },
+                {
+                    title: '操作',
+                    key: 'detail',
+                    dataIndex: 'detail',
+                    type: 'text',
+                    ellipsis: true,
+                    render: (text, record) => detailRender(record, setDetailVisible, setDetailIndex, t),
+                },
+            ];
+            break;
+        default:
+            break;
+    }
+    return tableColumns;
+};
+
+// 格式化账号，设备历史记录数据，index在详情翻页中使用，detail在详情中作为数据源使用
+const formatTwHistory = list => {
+    return _.map(list, (item, index) => {
+        item.index = index;
+        item.detail = item;
+        return item;
+    });
+};
+
+// 获取设备的详情字段配置
+const getTwDetailConfig = (data = {}) => {
+    const detailData = {
+        data: [
+            {
+                title: '基础信息',
+                data: [
+                    {
+                        name: '公司',
+                        key: 'organization',
+                        value: data.organization || '-',
+                        type: 'text',
+                    },
+                    {
+                        name: '流水号',
+                        key: 'requestId',
+                        value: data.requestId || '-',
+                        type: 'text',
+                    },
+                    {
+                        name: '设备标识',
+                        key: 'smid',
+                        value: data.smid || '-',
+                        type: 'text',
+                        action: [
+                            {
+                                name: '筛选',
+                                action: 'screen',
+                                authAction: 'screen',
+                                isShow: true,
+                                otherData: {
+                                    path: ROUTE_PATH.TW.DEVICE_PROFILE.HISTORY,
+                                },
+                            },
+                        ],
+                    },
+                    {
+                        name: 'IP',
+                        key: 'ip',
+                        value: data.ip || '-',
+                        type: 'text',
+                        action: [
+                            {
+                                name: '筛选',
+                                action: 'screen',
+                                authAction: 'screen',
+                                isShow: true,
+                                otherData: {
+                                    path: ROUTE_PATH.TW.DEVICE_PROFILE.HISTORY,
+                                },
+                            },
+                        ],
+                    },
+                    {
+                        name: '平台',
+                        key: 'os',
+                        value: data.os || '-',
+                        type: 'text',
+                    },
+                    {
+                        name: '渠道',
+                        key: 'channel',
+                        value: data.channel || '-',
+                        type: 'text',
+                    },
+                    {
+                        name: '系统标识',
+                        key: 'deviceId',
+                        value: data.deviceId || '-',
+                        type: 'text',
+                    },
+                    {
+                        name: 'app版本',
+                        key: 'appver',
+                        value: data.appver || '-',
+                        type: 'text',
+                    },
+                    {
+                        name: '设备型号',
+                        key: 'model',
+                        value: data.model || '-',
+                        type: 'text',
+                    },
+                    {
+                        name: '系统版本',
+                        key: 'osver',
+                        value: data.osver || '-',
+                        type: 'text',
+                    },
+                    {
+                        name: '应用名称',
+                        key: 'appname',
+                        value: data.appname || '-',
+                        type: 'text',
+                    },
+                    {
+                        name: '进程名',
+                        key: 'proc',
+                        value: data.proc || '-',
+                        type: 'text',
+                    },
+                    {
+                        name: '设备风险',
+                        key: 'description',
+                        value: data.description || '-',
+                        type: 'text',
+                    },
+                    {
+                        name: '发生时间',
+                        key: 'ctime',
+                        value: data.ctime || '-',
+                        type: 'text',
+                    },
+
+                ],
+            },
+        ],
+    };
+    return detailData;
+};
+
+// 获取设备导出详情列表项
+const formatHistoryTaskFormColumns = () => {
+    const disableDate = current => {
+        return current && current > moment().subtract(1, 'days').endOf('day');
+    };
+    const columns = [
+        {
+            type: 'date',
+            label: '起始日期',
+            name: 'startTime',
+            rules: [{required: true}],
+            placeholder: '请选择起始日期',
+            disabledDate: disableDate,
+        },
+        {
+            type: 'date',
+            label: '结束日期',
+            name: 'endTime',
+            rules: [{required: true}],
+            placeholder: '请选择结束日期',
+            disabledDate: disableDate,
+        },
+        {
+            type: 'select',
+            label: '平台',
+            name: 'os',
+            rules: [],
+            placeholder: '请选择平台，不选择默认为全部',
+            options: [
+                {
+                    name: '全部',
+                    value: 'all',
+                },
+                {
+                    name: 'ios',
+                    value: 'ios',
+                },
+                {
+                    name: 'android',
+                    value: 'android',
+                },
+            ],
+        },
+        {
+            type: 'input',
+            label: 'IP',
+            name: 'IP',
+            rules: [],
+            placeholder: '请输入IP地址',
+        },
+        {
+            type: 'textarea',
+            label: '设备标识',
+            name: 'smid',
+            rules: [],
+            placeholder: '请输入设备标识，多个回车换行',
+        },
+    ];
+    return columns;
+};
+
+// 构建设备历史记录导出的详情配置
+const buildHistoryTaskDetail = ({record, t}) => {
+    record.filter = record.filter || {};
+    const start = record.filter && moment(+record.filter.startTime).format('YYYY-MM-DD HH:mm:ss');
+    const end = record.filter && moment(+record.filter.endTime).format('YYYY-MM-DD HH:mm:ss');
+    const current = {
+        base: [
+            {
+                name: t('任务编号'),
+                value: record.id,
+            },
+            {
+                name: t('任务状态'),
+                value: PROCESS_STATUS[record.status],
+            },
+            {
+                name: t('创建时间'),
+                value: moment(+record.createTime).format('YYYY-MM-DD HH:mm:ss'),
+            },
+        ],
+        exportData: [
+            {
+                name: t('开始时间'),
+                value: start,
+            },
+            {
+                name: t('结束时间'),
+                value: end,
+            },
+            {
+                name: t('应用'),
+                value: record.appIdCN || '-',
+            },
+            {
+                name: t('IP'),
+                value: (record.filter && record.filter.IP) || '-',
+            },
+            {
+                name: t('设备标识'),
+                value: record.filter.smid || record.filter.deviceId || '-',
+            },
+        ],
+    };
+    return (
+        <div>
+            <ul>
+                <li>
+                    <h2>{t('基本信息')}</h2>
+                </li>
+                {_.map(current.base, (item, index) => {
+                    return (
+                        <li key={item.id || index}>
+                            <span>{item.name}：</span>
+                            <span>{item.value}</span>
+                        </li>
+                    );
+                })}
+            </ul>
+            <ul>
+                <li>
+                    <h2>任务详情</h2>
+                </li>
+                {_.map(current.exportData, item => {
+                    return (
+                        <li key={item.name}>
+                            <span>{item.name}：</span>
+                            <span>{item.value}</span>
+                        </li>
+                    );
+                })}
+            </ul>
+        </div>
+    );
+};
+
+const copy = (val, t) => {
+    const input = document.createElement('input');
+    document.body.appendChild(input);
+    input.setAttribute('value', val);
+    input.select();
+    if (document.execCommand('copy')) {
+        document.execCommand('copy');
+        message.success(t('复制成功'));
+    }
+    document.body.removeChild(input);
+};
+
+const renderForm = (columns = []) => {
+    return columns.map(item => {
+        const {
+            type,
+            mode,
+            label,
+            name,
+            defaultValue,
+            rules = [],
+            placeholder,
+            options = [],
+            onChange = () => { },
+            disabledDate = () => { },
+        } = item;
+        switch (type) {
+            case 'select':
+                return (
+                    <Form.Item
+                        label={label}
+                        name={name}
+                        key={name}
+                        placeholder={placeholder}
+                        rules={rules}
+                    >
+                        <Select
+                            mode={mode}
+                            placeholder={placeholder}
+                            showSearch
+                            optionFilterProp="children"
+                            defaultValue={defaultValue ? defaultValue : undefined}
+                            onChange={onChange}
+                            allowClear
+                        >
+                            {options.map((it, index) => {
+                                return (
+                                    <Option value={it.value || it.name} key={it.id || index}>
+                                        {it.name}
+                                    </Option>
+                                );
+                            })}
+                        </Select>
+                    </Form.Item>
+                );
+            case 'date':
+                return (
+                    <Form.Item label={label} name={name} key={name} rules={rules}>
+                        <DatePicker
+                            key={name}
+                            disabledDate={disabledDate}
+                            placeholder={placeholder}
+                            showToday={false}
+                            allowClear={false}
+                            format="YYYY-MM-DD HH:mm:ss"
+                        />
+                    </Form.Item>
+                );
+            case 'textarea':
+                return (
+                    <Form.Item label={label} name={name} key={name} rules={rules}>
+                        <TextArea
+                            placeholder={placeholder}
+                            allowClear
+                            onChange={onChange}
+                        />
+                    </Form.Item>
+                );
+            case 'cascader':
+                return (
+                    <Form.Item label={label} name={name} key={name} rules={rules}>
+                        <Cascader
+                            // style={style || { width: 128, height: 32 }}
+                            placeholder={placeholder}
+                            showSearch
+                            options={options}
+                        />
+                    </Form.Item>
+                );
+            default:
+                return (
+                    <Form.Item
+                        label={label}
+                        name={name}
+                        key={name}
+                        placeholder={placeholder}
+                        rules={rules}
+                    >
+                        <Input placeholder={placeholder} />
+                    </Form.Item>
+                );
+        }
+    });
+};
+
+const getExportTableColumns = params => {
+    const {t, setDetailVisible, setCurrent, handlePopConfirm} = params;
+
+    const tableColumns = [
+        {
+            title: '任务编号',
+            key: 'id',
+            dataIndex: 'id',
+            type: 'text',
+            width: '20%',
+            ellipsis: true,
+        },
+        {
+            title: '任务状态',
+            key: 'status',
+            dataIndex: 'status',
+            type: 'text',
+            render: (text, record) => {
+                return t(PROCESS_STATUS[record.status]);
+            },
+        },
+        {
+            title: '创建时间',
+            key: 'createTime',
+            dataIndex: 'createTime',
+            type: 'text',
+            ellipsis: true,
+            render: (text, record) => {
+                return moment(+record.createTime).format('YYYY-MM-DD HH:mm:ss');
+            },
+        },
+        {
+            title: '操作',
+            key: 'op',
+            dataIndex: 'op',
+            type: 'text',
+            ellipsis: true,
+            render: (text, record) => {
+                const downloadLink = record.downloadLink && record.downloadLink.replace('http://', 'https://');
+                const hasDown = record.status == 3;
+                return (
+                    <span className={styles.operate}>
+                        <>
+                            {hasDown ? (
+                                <Tooltip placement="left" title={t('下载')} trigger="hover">
+                                    <a href={downloadLink}>
+                                        <SMIcon type="icon-xiazai3" />
+                                    </a>
+                                </Tooltip>
+                            ) : (
+                                <SMIcon
+                                    type="icon-xiazai3-huise"
+                                    className={styles['icon-disabled']}
+                                />
+                            )}
+                            {hasDown ? (
+                                <Tooltip placement="left" title={t('复制下载地址')} trigger="hover">
+                                    <span
+                                        onClick={() => {
+                                            copy(downloadLink, t);
+                                        }}
+                                    >
+                                        <SMIcon
+                                            type="icon-fuzhiliushuihao"
+                                        />
+                                    </span>
+                                </Tooltip>
+                            ) : (
+                                <SMIcon type="icon-fuzhiliushuihao-huise" className={styles['icon-disabled']} />
+                            )}
+                        </>
+                        <Tooltip placement="left" title={t('详情')} trigger="hover">
+                            <span
+                                onClick={() => {
+                                    setDetailVisible(true);
+                                    setCurrent(record);
+                                }}
+                            >
+                                <SMIcon type="icon-chakan1" />
+                            </span>
+                        </Tooltip>
+                        {record.status == 2 && (
+                            <SMPopConfirm
+                                title={t('是否重建')}
+                                icon={false}
+                                customStyle
+                                width="300"
+                                customVisible={record.status == 6 ? false : undefined}
+                                onConfirm={(value, cb) => handlePopConfirm(record, cb)}
+                            >
+                                <a
+                                    className={record.status == 6 ? styles.disabled : ''}
+                                    disabled={record.status == 6}
+                                >
+                                    {t('重建任务')}
+                                </a>
+                            </SMPopConfirm>
+                        )}
+
+                    </span>
+                );
+            },
+        },
+    ];
+    return tableColumns;
+};
+
+export {
+    getLabelSearchData,
+    getFormData,
+    getTableColumns,
+    formatTwHistory,
+    getTwDetailConfig,
+    formatHistoryTaskFormColumns,
+    buildHistoryTaskDetail,
+    copy,
+    renderForm,
+    getExportTableColumns,
+};