admin2 1.0.0

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

@@ -0,0 +1,676 @@
+/* eslint-disable max-len */
+/**
+ * 趋势页类型之三 例子：音频文件/音频流趋势
+ */
+
+import React from 'react';
+import { connect } from 'umi';
+import moment from 'moment';
+import lodash from 'lodash';
+import {Table} from 'antd';
+
+import { AUTH_FUNCTION } from '@/contants';
+import { getAuthFunction } from '@/utils/AuthorityManage';
+import SMSearchForm from '@/components/SMSearchForm';
+import GlobalFilterListener from '@/components/GlobalFilterListener';
+import SMDataCard from '@/components/SMDataCard';
+import SMLineChart from '@/components/SMLineChart';
+import SMLinePieChart from '@/components/SMLinePieChart';
+import { formatSearchParams, formatSecondToHour, exportFile, unitConverter, getPercent } from '@/utils/utils';
+import {getRejectRatio} from '@/utils/getRejectRatio';
+import {SMTips} from '@/components';
+import {BILL_TIPS} from '@/pages/payment/contants';
+import withIntlComponents from '@/hoc/withIntlComponents';
+import removeExportBtn from '@/utils/removeExportBtnOfForm';
+import { EXPORT_TREND_TOOLTIP } from '@/contants/exportUrl';
+import {getDataDetail} from '@/services/trend';
+
+import {jumpToHistoryPage} from '../helper.js';
+
+import styles from '../trend.less';
+
+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',
+                    },
+                },
+            },
+            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,
+                pass: 0,
+                duration: 0,
+            },
+            trendData: {},
+            riskLevelLoading: true,
+            channelEventList: [],
+            eventIdMap: {},
+            channelMap: {},
+            currentGlobalFilter: {
+                organization: '',
+                appId: '',
+                clusterId: '',
+            },
+            cardDataArr: [
+                {
+                    title: '总数',
+                    total: 0,
+                    percent: '',
+                    type: 'total',
+                },
+                {
+                    title: '拒绝数',
+                    total: 0,
+                    percent: '',
+                    type: 'reject',
+                },
+                {
+                    title: '审核数',
+                    total: 0,
+                    percent: '',
+                    type: 'review',
+                },
+                {
+                    title: '总时长',
+                    total: '00:00:00',
+                    percent: '',
+                    type: 'duration',
+                },
+            ],
+            trendLineData: {
+                title: '趋势统计',
+                xname: '',
+                yname: '数量（个）',
+                xAxisData: [],
+                isInterception: true,
+                secondSuffix: '%',
+                configData: [
+                    {
+                        name: '总数',
+                        data: [],
+                        color: 'blue',
+                        selected: false,
+                    }, {
+                        name: '拒绝数',
+                        data: [],
+                        color: 'orange',
+                        selected: true,
+                    }, {
+                        name: '审核数',
+                        data: [],
+                        color: 'yellow',
+                        selected: true,
+                    }, {
+                        name: '通过数',
+                        data: [],
+                        color: 'green',
+                        selected: false,
+                    },
+                    {
+                        name: '拦截比例',
+                        data: [],
+                        color: 'red',
+                        selected: false,
+                        isSecondAxis: true,
+                    },
+                ],
+            },
+            timeLineData: {
+                title: '总时长趋势统计',
+                xname: '',
+                yname: '时长（小时）',
+                xAxisData: [],
+                configData: [
+                    {
+                        name: '总时长',
+                        data: [],
+                        color: 'green',
+                        selected: true,
+                    },
+                ],
+            },
+            errorReasonLineData: {
+                title: '接口调用异常原因分布',
+                xname: '',
+                yname: '数量（次）',
+                xAxisData: [],
+                configData: [],
+            },
+            errorReasonPieData: {
+                name: '接口调用异常原因分布',
+                legendData: [],
+                seriesData: [],
+            },
+            errorReasonLoading: true,
+            tableDataSource: [],
+        };
+    }
+
+    UNSAFE_componentWillMount() {
+        const { stateConfig } = this.props;
+        if (stateConfig) {
+            this.setState(stateConfig);
+        }
+    }
+
+    getTableData = async () => {
+        const {route, specialServiceId} = this.props;
+        const serviceId = specialServiceId || route?.routeData?.serviceId;
+        const { currentGlobalFilter, queryParams, trendType } = this.state;
+        const { organization, appId, clusterId } = currentGlobalFilter;
+
+        const channel = queryParams.channel ? [queryParams.channel] : queryParams.channels;
+        const params = {
+            organization,
+            appId,
+            colonyName: clusterId,
+            serviceId,
+            startDay: queryParams.startDay,
+            endDay: queryParams.endDay,
+        };
+        if (lodash.isArray(channel) && channel.length > 0 && channel[0] !== 'all') {
+            params.channels = channel;
+        }
+        const result = await getDataDetail(formatSearchParams(params));
+        if (result?.code === 1100) {
+            this.setState({
+                tableDataSource: result?.content,
+                tableLoading: false,
+            });
+        }
+    };
+
+    globalFilterChange = obj => {
+        const { orgChange, appIdChange, clusterIdChange, currentGlobalFilter } = obj;
+        this.setState({
+            currentGlobalFilter,
+        }, () => {
+            if (orgChange) {
+                this.getChannelEventList();
+                // 公司改变 重置搜索筛选项
+                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,
+            errorReasonLoading: true,
+        }, () => {
+            this.getRiskLevelTrend();
+            this.getErrorReasonTrend();
+            this.getTableData(); // 数据详情列表
+        });
+    }
+
+    // 获取查询接口参数
+    getSearchParams = () => {
+        const { route } = this.props;
+        const { currentGlobalFilter, queryParams } = this.state;
+        const { organization, appId, clusterId } = currentGlobalFilter;
+
+        let searchParams = {
+            organization: organization,
+            serviceId: 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/fetchRiskLevelTrend',
+            payload: newSearchParams,
+        }) || {};
+        const { trend, count } = riskLevelTrendData;
+        let rejectRatio = [];
+        try {
+            rejectRatio = getRejectRatio(trend.total, trend.reject);
+        } catch (error) {}
+        this.setState({
+            cardData: count,
+            riskLevelLoading: false,
+            trendData: {...trend, rejectRatio},
+        }, () => {
+            this.setCardDataArr();
+            this.setLineChartData();
+        });
+    };
+
+    // 获取异常原因接口
+    getErrorReasonTrend = async () => {
+        const { dispatch } = this.props;
+
+        let newSearchParams = this.getSearchParams();
+
+        let errorReasonTrendData = await dispatch({
+            type: 'trend/fetchErrorReasonTrend',
+            payload: newSearchParams,
+        }) || {};
+
+        const { codePie, codeLine = {} } = errorReasonTrendData;
+        const { errorReasonLineData, errorReasonPieData } = this.state;
+
+        let newErrorReasonLineData = lodash.cloneDeep(errorReasonLineData);
+        let newErrorReasonPieData = lodash.cloneDeep(errorReasonPieData);
+        // 设置异常原因的折线图数据
+        newErrorReasonLineData.configData = [];
+        lodash.forEach(codeLine, (value, key) => {
+            if (key === 'x_axis') {
+                newErrorReasonLineData.xAxisData = codeLine?.x_axis;
+            }
+            else {
+                newErrorReasonLineData.configData.push(
+                    {
+                        name: key,
+                        data: value,
+                    }
+                );
+            }
+        });
+        newErrorReasonPieData.seriesData = [];
+        // 设置异常原因的分布饼图数据
+        for (let i in codePie) {
+            newErrorReasonPieData.seriesData.push({
+                value: codePie[i],
+                name: i,
+            });
+        }
+        this.setState({
+            errorReasonLoading: false,
+            errorReasonPieData: newErrorReasonPieData,
+            errorReasonLineData: newErrorReasonLineData,
+        });
+
+    };
+
+    // 获取渠道事件列表
+    getChannelEventList = async () => {
+        const { dispatch, route } = this.props;
+        if (dispatch) {
+            let channelEventList = await dispatch({
+                type: 'base/fetchChannelEventList',
+                payload: {
+                    organization: this.state.currentGlobalFilter.organization,
+                    serviceId: route.routeData.serviceId,
+                },
+            }) || [];
+            this.setState({
+                channelEventList,
+            });
+            let channelMap = {};
+            let eventIdMap = {};
+            let newOptionData = [];
+            let newChannelEventData = lodash.cloneDeep(this.state.defaultChannelEventData);
+            channelEventList.forEach(item => {
+                newOptionData.push({
+                    value: `${item.channel}|${item.clientEventId}`,
+                    name: item.displayName,
+                });
+                if (item.channel !== '') {
+                    channelMap[item.channel] = item.channelName;
+                }
+                if (item.clientEventId !== '') {
+                    eventIdMap[item.clientEventId] = item.eventName;
+                }
+            });
+            newChannelEventData.data.selectData.optionData = newOptionData;
+            this.setState({
+                defaultChannelEventData: newChannelEventData,
+                channelMap,
+                eventIdMap,
+            });
+        }
+    };
+
+    // 设置卡片数组数据
+    setCardDataArr = () => {
+        const { cardData = {}, cardDataArr } = this.state;
+        const { total, reject, review, duration } = cardData;
+        const { rejectPercent, reviewPercent } = this.getCardPercent();
+
+        let newCardDataArr = lodash.cloneDeep(cardDataArr);
+
+        newCardDataArr[0].total = unitConverter(total).num;
+        newCardDataArr[0].unit = unitConverter(total).unit;
+        newCardDataArr[1].total = unitConverter(reject).num;
+        newCardDataArr[1].unit = unitConverter(reject).unit;
+        newCardDataArr[1].percent = rejectPercent;
+        newCardDataArr[2].total = unitConverter(review).num;
+        newCardDataArr[2].unit = unitConverter(review).unit;
+        newCardDataArr[2].percent = reviewPercent;
+        newCardDataArr[3].total = formatSecondToHour(duration).num;
+        newCardDataArr[3].unit = formatSecondToHour(duration).unit;
+
+        this.setState({
+            cardDataArr: newCardDataArr,
+        });
+    };
+
+    // 获取卡片百分比数据
+    getCardPercent = () => {
+        const { cardData = {} } = this.state;
+        const { total, reject, review, pass } = cardData;
+        return {
+            rejectPercent: getPercent(reject, total),
+            reviewPercent: getPercent(review, total),
+            passPercent: getPercent(pass, total),
+        };
+    };
+
+    // 设置渠道折线图数据
+    setLineChartData = () => {
+        const { trendData = {}, trendLineData, timeLineData } = this.state;
+        const { total, pass, reject, review, duration, x_axis, rejectRatio } = trendData;
+
+        let newTrendLineData = lodash.cloneDeep(trendLineData);
+        /**
+         * total、reject、review、pass代表前面四条折线，名字不一定是总数、拒绝、审核、通过，
+         * 也有可能风险账号数...名称
+        */
+        newTrendLineData.xAxisData = x_axis;
+        newTrendLineData.configData[0].data = total;
+        newTrendLineData.configData[1].data = reject;
+        newTrendLineData.configData[2].data = review;
+        newTrendLineData.configData[3].data = pass;
+        // 只业务页面配置第四条折线 才需要绑定reject/total 的数据；
+        if (newTrendLineData.configData[4]) {
+            newTrendLineData.configData[4].data = rejectRatio;
+        }
+
+        let newTimeLineData = lodash.cloneDeep(timeLineData);
+        newTimeLineData.xAxisData = x_axis;
+        newTimeLineData.configData[0].data = duration;
+
+        this.setState({
+            trendLineData: newTrendLineData,
+            timeLineData: newTimeLineData,
+        });
+    };
+
+    // 获取搜索菜单
+    getFormData() {
+        const { route } = this.props;
+
+        const { defaultRangeTimeData, defaultChannelEventData } = this.state;
+
+        const formData = [];
+        formData.push(defaultRangeTimeData, defaultChannelEventData);
+        if (getAuthFunction(AUTH_FUNCTION.EXPORT)) {
+            formData.push({
+                type: 'export',
+                name: '导出',
+                tooltip: EXPORT_TREND_TOOLTIP,
+            });
+        }
+        return formData;
+    }
+
+    /**
+     * 搜索筛选项更改
+     * @param {*} name   更改筛选项类型名称
+     * @param {*} value  更改后的值
+     */
+    changeQueryParams(name, value) {
+        const { queryParams } = this.state;
+        let newQueryParams = lodash.cloneDeep(queryParams);
+        switch (name) {
+            case 'channelEvent':
+                let statChannel = value.split('|')[0];
+                let statEventId = value.split('|')[1];
+                // 有渠道传渠道，都没有也传渠道
+                if (statChannel || !statEventId) {
+                    newQueryParams.channel = statChannel;
+                    newQueryParams.eventId = '';
+                } else {
+                    newQueryParams.eventId = statEventId;
+                    newQueryParams.channel = '';
+                }
+                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;
+        }
+        this.setState({
+            queryParams: newQueryParams,
+            riskLevelLoading: true,
+        }, () => {
+            this.doSearch();
+        });
+    }
+
+    renderItem = (text, record, riskLevel) => {
+        const {route, specialServiceId} = this.props;
+        const serviceId = specialServiceId || route?.routeData?.serviceId;
+        const {queryParams} = this.state;
+        const obj = {
+            startTime: queryParams.startDay,
+            endTime: queryParams.endDay,
+            channel: record.channel,
+            appId: record.appId,
+        };
+        if (riskLevel) {
+            obj.riskLevel = riskLevel;
+        }
+
+        return (
+            <span
+                className={styles['table-row']}
+                onClick={() => jumpToHistoryPage(
+                    serviceId,
+                    obj
+                )}
+            >
+                {text}
+            </span>
+        );
+    };
+
+    tableColumns = () => {
+        const { t } = this.props;
+        let list = [
+            {
+                key: 'appIdCN',
+                dataIndex: 'appIdCN',
+                title: t('应用'),
+            },
+            {
+                key: 'channelCN',
+                dataIndex: 'channelCN',
+                title: t('渠道'),
+            },
+            {
+                key: 'totalCount',
+                dataIndex: 'totalCount',
+                title: t('总量'),
+                defaultSortOrder: 'descend',
+                sorter: (a, b) => a.totalCount - b.totalCount,
+                render: (text, record) => this.renderItem(text, record, ''),
+            },
+            {
+                key: 'passCount',
+                dataIndex: 'passCount',
+                title: t('通过量'),
+                sorter: (a, b) => a.passCount - b.passCount,
+                render: (text, record) => this.renderItem(text, record, 'PASS'),
+            },
+            {
+                key: 'reviewCount',
+                dataIndex: 'reviewCount',
+                title: t('审核量'),
+                sorter: (a, b) => a.reviewCount - b.reviewCount,
+                render: (text, record) => this.renderItem(text, record, 'REVIEW'),
+            },
+            {
+                key: 'duration',
+                dataIndex: 'duration',
+                title: t('总时长'),
+            },
+            {
+                key: 'rejectCount',
+                dataIndex: 'rejectCount',
+                title: t('拒绝量'),
+                sorter: (a, b) => a.rejectCount - b.rejectCount,
+                render: (text, record) => this.renderItem(text, record, 'REJECT'),
+            },
+        ];
+        return list;
+    };
+
+    /**
+     * 趋势数据导出
+     */
+    exportData = callback => {
+
+        const { route, t } = this.props;
+        const { queryParams } = this.state;
+        let newSearchParams = this.getSearchParams();
+
+        const titleMap = {
+            'POST_AUDIO': '音频文件趋势分析',
+            'POST_AUDIOSTREAM': '音频流趋势分析',
+            'POST_AUDIOSTREAM_EN': '音频流(英文)趋势分析',
+            'POST_AUDIOSTREAM_AR': '音频流(阿语)趋势分析',
+            'POST_AUDIO_EN': '音频文件趋势分析',
+            'POST_AUDIO_AR': '音频文件趋势分析',
+            'POST_AUDIO_B': '音频文件(B类)趋势分析',
+            'POST_AUDIOSTREAM_B': '音频流(B类)趋势分析',
+        };
+        let downloadTitle = t(titleMap[route.routeData.serviceId]);
+
+        let downloadUrl = '/webapi/statisticTendency/download';
+        let dateRangeStr = `${queryParams.startDay}_${queryParams.endDay}`;
+        let title = `天净-${downloadTitle}-${dateRangeStr}-统计数据表.csv`;
+
+        exportFile(downloadUrl, title, newSearchParams).then(() => {
+            callback && callback();
+        });
+    };
+
+    render() {
+        const formData = this.getFormData();
+        const { riskLevelLoading,
+            trendLineData,
+            timeLineData,
+            cardDataArr,
+            errorReasonLineData,
+            errorReasonPieData,
+            errorReasonLoading,
+            tableDataSource,
+            tableLoading,
+        } = this.state;
+        const { currentLang, t } = this.props;
+
+        return (
+            <div>
+                <GlobalFilterListener onChange={this.globalFilterChange} />
+                <SMTips padding background title={BILL_TIPS.TREND} />
+                <SMSearchForm
+                    formData={removeExportBtn(formData, currentLang)}
+                    onChange={(name, value) => {
+                        this.changeQueryParams(name, value);
+                    }}
+                    exportData={callback => this.exportData(callback)}
+                />
+                <SMDataCard
+                    dataSource={cardDataArr}
+                    column={4}
+                    loading={riskLevelLoading}
+                />
+                <SMLineChart
+                    data={trendLineData}
+                    loading={riskLevelLoading}
+                    lineId="trend"
+                    onSelectedChange={this.onSelectedChange}
+                />
+                <div className={`${styles['data-table']}`}>
+                    <p className={styles['data-table-title']}>{t('数据详情列表')}</p>
+                    <Table
+                        columns={this.tableColumns()}
+                        dataSource={tableDataSource}
+                        pagination={false}
+                        loading={tableLoading}
+                        scroll={{ y: 530 }}
+                    />
+                </div>
+                <SMLineChart
+                    data={timeLineData}
+                    loading={riskLevelLoading}
+                    lineId="time"
+                    onSelectedChange={this.onSelectedChange}
+                />
+                <SMLinePieChart
+                    lineChartData={errorReasonLineData}
+                    pieCharData={errorReasonPieData}
+                    loading={errorReasonLoading}
+                    isShowNumber
+                />
+            </div>
+        );
+    }
+}
+
+export default connect(({ user }) => ({
+    currentUser: user.currentUser,
+}))(withIntlComponents(Trend));