admin2 1.0.0

package/src/pages/pageComponents/trendPage/ChannelRisk/index.jsx

@@ -0,0 +1,533 @@
+import React from 'react';
+import {connect} from 'umi';
+import moment from 'moment';
+import lodash from 'lodash';
+
+import SMSearchForm from '@/components/SMSearchForm';
+import GlobalFilterListener from '@/components/GlobalFilterListener';
+import SMDataCard from '@/components/SMDataCard';
+import SMLinePieChart from '@/components/SMLinePieChart';
+import {formatSearchParams, exportFile, unitConverter, getPercent} from '@/utils/utils';
+import {SMTips} from '@/components';
+import {BILL_TIPS} from '@/pages/payment/contants';
+
+class Trend extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            defaultRangeTimeData: {
+                type: 'datePicker',
+                name: 'time',
+                data: {
+                    dateSelectArr: [
+                        {
+                            name: '今天',
+                            value: 1,
+                        },
+                        {
+                            name: '近7天',
+                            value: 7,
+                        },
+                        {
+                            name: '近30天',
+                            value: 30,
+                        },
+                    ],
+                },
+            },
+            defaultChannelEventData: {
+                type: 'select',
+                name: 'channelEvent',
+                data: {
+                    selectData: {
+                        optionData: [],
+                        title: '渠道',
+                        labelId: 'channelEvent',
+                        isAddAll: true,
+                        defaultValue: 'all',
+                    },
+                },
+            },
+            // 天网渠道
+            defaultAppChannelData: {
+                type: 'select',
+                name: 'appUtm',
+                data: {
+                    placeholder: '请选择',
+                    selectData: {
+                        optionData: [],
+                        title: '渠道',
+                        labelId: 'appUtm',
+                        isAddAll: true,
+                        defaultValue: 'all',
+                    },
+                },
+            },
+            isResetSearchForm: false,
+            queryParams: {
+                startDay: moment().format('YYYY-MM-DD'),
+                endDay: moment().format('YYYY-MM-DD'),
+            },
+            defaultQueryParams: {
+                startDay: moment().format('YYYY-MM-DD'),
+                endDay: moment().format('YYYY-MM-DD'),
+            },
+            cardData: {
+                total: 0,
+                reject: 0,
+                review: 0,
+            },
+            trendData: {},
+            totalPie: [],
+            riskLevelLoading: true,
+            riskTypeLoading: true,
+            channelEventList: [],
+            eventIdMap: {},
+            channelMap: {},
+            currentGlobalFilter: {
+                organization: '',
+                appId: '',
+                clusterId: '',
+            },
+            cardDataArr: [
+                {
+                    title: '新增激活数（次）',
+                    total: 0,
+                    percent: '',
+                    type: 'activate',
+                },
+                {
+                    title: '无效新增数（次）',
+                    total: 0,
+                    percent: '',
+                    type: 'invalid',
+                },
+                {
+                    title: '有效新增数（次）',
+                    total: 0,
+                    percent: '',
+                    type: 'increase',
+                },
+            ],
+            trendLineData: {
+                title: '趋势统计',
+                xname: '',
+                yname: '数量（次）',
+                xAxisData: [],
+                configData: [
+                    {
+                        name: '展示量',
+                        data: [],
+                        color: 'blue',
+                        selected: false,
+                    },
+                    {
+                        name: '交互量',
+                        data: [],
+                        color: 'orange',
+                        selected: true,
+                    },
+                    {
+                        name: '拦截量',
+                        data: [],
+                        color: 'yellow',
+                        selected: false,
+                    },
+                    {
+                        name: '通过数',
+                        data: [],
+                        color: 'green',
+                        selected: false,
+                    },
+                ],
+            },
+            rejectLineData: {
+                title: '趋势分析',
+                xname: '',
+                yname: '数量（次）',
+                xAxisData: [],
+                configData: [],
+            },
+            reviewLineData: {
+                title: '审核原因分布',
+                xname: '',
+                yname: '数量（次）',
+                xAxisData: [],
+                configData: [],
+            },
+            rejectPieData: {
+                name: '风险类型占比图',
+                legendData: [],
+                seriesData: [],
+            },
+            reviewPieData: {
+                name: '审核原因分布',
+                legendData: [],
+                seriesData: [],
+            },
+            defaultRejectLineData: {
+                title: '风险分析',
+                xname: '',
+                yname: '数量（次）',
+                xAxisData: [],
+                configData: [],
+            },
+            defaultReviewLineData: {
+                title: '审核原因分布',
+                xname: '',
+                yname: '数量（次）',
+                xAxisData: [],
+                configData: [],
+            },
+            defaultRejectPieData: {
+                name: '风险类型占比图',
+                legendData: [],
+                seriesData: [],
+            },
+            defaultReviewPieData: {
+                name: '审核原因分布',
+                legendData: [],
+                seriesData: [],
+            },
+            riskTypeTrendData: {},
+        };
+    }
+
+    UNSAFE_componentWillMount() {
+        const {stateConfig} = this.props;
+        if (stateConfig) {
+            this.setState(stateConfig);
+        }
+    }
+
+    globalFilterChange = obj => {
+        const {
+            orgChange,
+            appIdChange,
+            clusterIdChange,
+            currentGlobalFilter,
+        } = obj;
+        this.setState(
+            {
+                currentGlobalFilter,
+            },
+            () => {
+                if (orgChange) {
+                    this.getAppChannelSelectList();
+                    // 公司改变 重置搜索筛选项
+                    const {queryParams} = this.state;
+                    let newQueryParams = lodash.cloneDeep(queryParams);
+                    newQueryParams.eventId = '';
+                    newQueryParams.channel = '';
+                    this.setState(
+                        {
+                            queryParams: newQueryParams,
+                        },
+                        () => {
+                            this.doSearch();
+                        }
+                    );
+                } else {
+                    this.doSearch();
+                }
+            }
+        );
+    };
+
+    doSearch() {
+        this.setState(
+            {
+                riskLevelLoading: true,
+                riskTypeLoading: true,
+            },
+            () => {
+                this.getRiskLevelTrend();
+            }
+        );
+    }
+
+    // 获取查询接口参数
+    getSearchParams = () => {
+        const {route, specialServiceId = ''} = this.props;
+        const {currentGlobalFilter, queryParams} = this.state;
+        const {organization, appId, clusterId} = currentGlobalFilter;
+        let searchParams = {
+            organization: organization,
+            serviceId: specialServiceId || route.routeData.serviceId,
+            appId: appId,
+            colonyName: clusterId,
+            ...queryParams,
+        };
+        // 处理一下searchParams，如果为'' || 'all', 则删除该项
+        let newSearchParams = formatSearchParams(searchParams);
+        return newSearchParams;
+    };
+
+    // 请求风险趋势接口
+    getRiskLevelTrend = async () => {
+        const {dispatch} = this.props;
+
+        let newSearchParams = this.getSearchParams();
+
+        let riskLevelTrendData = await dispatch({
+            type: 'trend/queryChannelCheatStat',
+            payload: newSearchParams,
+        });
+        const {trend, summary, totalPie = []} = riskLevelTrendData;
+        this.setState(
+            {
+                cardData: summary,
+                riskTypeLoading: false,
+                trendData: trend,
+                totalPie,
+            },
+            () => {
+                this.setCardDataArr();
+                // this.setTrendLineChartData();
+                this.setRiskTypeData();
+            }
+        );
+    };
+    // 设置风险类型分布的 折线图 以及 饼图数据
+    setRiskTypeData = () => {
+        const {
+            defaultRejectLineData,
+            defaultReviewLineData,
+            defaultRejectPieData,
+            defaultReviewPieData,
+            riskTypeTrendData,
+            trendData,
+            totalPie,
+        } = this.state;
+        const {x, y} = trendData;
+
+        let newRejectLineData = lodash.cloneDeep(defaultRejectLineData);
+        let newRejectPieData = lodash.cloneDeep(defaultRejectPieData);
+        // 设置拒绝原因分布的折线图数据
+        for (let i in y) {
+            if (y[i] && i === '无效新增') {
+                newRejectLineData.configData.unshift({
+                    name: i,
+                    data: y[i],
+                    selected: true,
+                });
+            } else if (y[i]) {
+                newRejectLineData.configData.push({
+                    name: i,
+                    data: y[i],
+                    selected: false,
+                });
+            }
+        }
+        newRejectLineData.xAxisData = x;
+
+        // 饼图
+        let total = 0;
+        newRejectPieData.legendData = totalPie.map(item => {
+            total += item.value;
+            return item.name;
+        });
+        newRejectPieData.seriesData = totalPie.map(({value, name}) => {
+            return {value, trueName: name, name, per: getPercent(value, total)};
+        });
+        newRejectPieData.tooltipFormatter = this.tooltipFormatter;
+        this.setState({
+            rejectLineData: newRejectLineData,
+            rejectPieData: newRejectPieData,
+        });
+    };
+    tooltipFormatter = params => {
+        return (params.data.trueName + ' ' + params.data.value + ' (' + params.data.per + ')');
+    };
+
+    // 天网-渠道风险-渠道列表
+    getAppChannelSelectList = async () => {
+        if (!this.state.defaultAppChannelData) {
+            return;
+        }
+        const {dispatch, route} = this.props;
+        if (dispatch) {
+            let channelEventList = await dispatch({
+                type: 'twChannel/queryChannelCheatSelectList',
+                payload: {
+                    organization: this.state.currentGlobalFilter.organization,
+                    serviceId: route.routeData.serviceId,
+                },
+            });
+            if (!channelEventList) {
+                return;
+            }
+            const newOptionData = [];
+            let newChannelEventData = lodash.cloneDeep(
+                this.state.defaultAppChannelData
+            );
+            channelEventList.forEach(item => {
+                newOptionData.push({
+                    value: item,
+                    name: item,
+                });
+            });
+            newChannelEventData.data.selectData.optionData = newOptionData;
+            this.setState({
+                defaultAppChannelData: newChannelEventData,
+            });
+        }
+    };
+
+    // 设置卡片数组数据
+    setCardDataArr = () => {
+        const {cardData, cardDataArr} = this.state;
+        const {totalCount, validCount, invalidCount } = cardData;
+        const {
+            validPercent,
+            invalidPercent,
+        } = this.getCardPercent();
+        let newCardDataArr = lodash.cloneDeep(cardDataArr);
+
+        newCardDataArr[0].total = unitConverter(totalCount).num;
+        newCardDataArr[0].unit = unitConverter(totalCount).unit;
+        newCardDataArr[1].total = unitConverter(invalidCount).num;
+        newCardDataArr[1].unit = unitConverter(invalidCount).unit;
+        newCardDataArr[1].percent = invalidPercent;
+        newCardDataArr[2].total = unitConverter(validCount).num;
+        newCardDataArr[2].unit = unitConverter(validCount).unit;
+        newCardDataArr[2].percent = validPercent;
+
+        this.setState({
+            cardDataArr: newCardDataArr,
+        });
+    };
+
+    // 获取卡片百分比数据
+    getCardPercent = () => {
+        const {cardData} = this.state;
+        const {totalCount, validCount, invalidCount } = cardData;
+
+        return {
+            validPercent: getPercent(validCount, totalCount),
+            invalidPercent: getPercent(invalidCount, totalCount),
+        };
+    };
+
+
+    // 初始化搜索菜单
+    getFormData() {
+        let formData = [];
+        const {defaultRangeTimeData, defaultAppChannelData} = this.state;
+        formData.push(
+            defaultRangeTimeData,
+            defaultAppChannelData);
+        formData = formData.filter(item => item);
+        return formData;
+    }
+
+    /**
+     * 搜索筛选项更改
+     * @param {*} name   更改筛选项类型名称
+     * @param {*} value  更改后的值
+     */
+    changeQueryParams(name, value) {
+        const {queryParams} = this.state;
+        let newQueryParams = lodash.cloneDeep(queryParams);
+        switch (name) {
+            case 'appUtm':
+                if (Array.isArray(value) && value.length) {
+                    newQueryParams.appUtm = value.join(',');
+                } else if (Array.isArray(value) && value.length === 0) {
+                    newQueryParams.appUtm = '';
+                } else {
+                    newQueryParams.appUtm = value;
+                }
+                break;
+            case 'time':
+                let startDay = value[0].format('YYYY-MM-DD');
+                let endDay = value[1].format('YYYY-MM-DD');
+                newQueryParams.startDay = startDay;
+                newQueryParams.endDay = endDay;
+                break;
+            case 'labelSearch':
+                const {searchId = '', searchText = ''} = value;
+                newQueryParams[searchId] = searchText;
+                break;
+        }
+        this.setState(
+            {
+                queryParams: newQueryParams,
+                riskLevelLoading: true,
+            },
+            () => {
+                this.doSearch();
+            }
+        );
+    }
+
+    /**
+     * 趋势数据导出
+     */
+    exportData = callback => {
+        const {route, t} = this.props;
+        const {queryParams} = this.state;
+        let newSearchParams = this.getSearchParams();
+
+        const titleMap = {
+            POST_TEXT: '文本趋势分析',
+            POST_IMG: '图片趋势分析',
+            POST_ARTICLE: '网页趋势分析',
+            POST_AUDIO: '音频文件片段趋势分析',
+            POST_AUDIOSTREAM: '音频流片段趋势分析',
+            POST_VIDEO: '视频文件趋势分析',
+            POST_VIDEO_IMG: '视频文件截帧图片趋势分析',
+            POST_VIDEO_AUDIO: '视频文件音频片段趋势分析',
+            POST_VIDEOSTREAM: '视频流趋势分析',
+            POST_VIDEOSTREAM_IMG: '视频流截帧图片趋势分析',
+            POST_VIDEOSTREAM_AUDIO: '视频流音频片段趋势分析',
+            CHANNEL_ANTICHEAT: '渠道流量',
+        };
+        let downloadTitle = t(titleMap[route.routeData.serviceId]);
+        let downloadUrl = '/webapi/statisticTendency/download';
+        let dateRangeStr = `${queryParams.startDay}_${queryParams.endDay}`;
+
+
+        let title = `天网-${downloadTitle}-${dateRangeStr}-统计数据表.xls`;
+
+
+        exportFile(downloadUrl, title, newSearchParams).then(() => {
+            callback && callback();
+        });
+    };
+
+    render() {
+        const formData = this.getFormData();
+        const {
+            cardDataArr,
+            riskTypeLoading,
+            rejectLineData,
+            rejectPieData,
+        } = this.state;
+        return (
+            <div>
+                <GlobalFilterListener onChange={this.globalFilterChange} />
+                <SMTips padding background title={BILL_TIPS.TREND} />
+                <SMSearchForm
+                    formData={formData}
+                    onChange={(name, value) => {
+                        this.changeQueryParams(name, value);
+                    }}
+                    exportData={callback => this.exportData(callback)}
+                />
+                <SMDataCard
+                    dataSource={cardDataArr}
+                    column={3}
+                    loading={riskTypeLoading}
+                />
+                <SMLinePieChart
+                    lineChartData={rejectLineData}
+                    pieCharData={rejectPieData}
+                    loading={riskTypeLoading}
+                />
+            </div>
+        );
+    }
+}
+
+export default connect()(Trend);

package/src/pages/pageComponents/trendPage/TwNewTrend/configure.js

@@ -0,0 +1,88 @@
+import moment from 'moment';
+import _ from 'lodash';
+
+const defaultDate = [
+    moment().subtract(7, 'day'),
+    moment().subtract(1, 'day'),
+];
+
+const rangeTimeData = {
+    type: 'twDatePicker',
+    name: 'time',
+    data: {
+        defaultSelect: 7,
+        extraSubtract: 1,
+        defaultDate: defaultDate[1],
+        dateSelectArr: [
+            {
+                name: '近7天',
+                value: 7,
+            },
+            {
+                name: '近30天',
+                value: 30,
+            },
+            {
+                name: '近180天',
+                value: 180,
+            },
+        ],
+    },
+};
+
+const osTypeData = {
+    type: 'select',
+    name: 'os',
+    data: {
+        selectData: {
+            optionData: [
+                {
+                    name: 'ios',
+                    value: 'ios',
+                },
+                {
+                    name: 'android',
+                    value: 'android',
+                },
+                {
+                    name: 'web',
+                    value: 'web',
+                },
+                {
+                    name: 'weapp',
+                    value: 'weapp',
+                },
+                {
+                    name: 'quickapp',
+                    value: 'quickapp',
+                },
+            ],
+            title: '产品',
+            labelId: 'os',
+            isAddAll: true,
+            defaultValue: 'all',
+        },
+    },
+};
+
+const getFormData = props => {
+    const {serviceId} = props;
+    const formData = [
+        rangeTimeData,
+    ];
+
+    switch (serviceId) {
+        case 'DEVICE_PROFILE':
+            formData.push(osTypeData);
+            break;
+        default:
+            break;
+    }
+    return formData;
+};
+
+export {
+    defaultDate,
+
+    getFormData,
+};