admin2 1.0.0

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

@@ -0,0 +1,1474 @@
+/* eslint-disable max-len */
+/**
+ * 趋势页类型之一 例子：视频文件，视频流趋势
+ */
+
+import React from 'react';
+import {connect, injectIntl} from 'umi';
+import moment from 'moment';
+import lodash from 'lodash';
+import {Table} from 'antd';
+
+import {AUTH_FUNCTION} from '@/contants';
+import SMSearchForm from '@/components/SMSearchForm';
+import {getAuthFunction} from '@/utils/AuthorityManage';
+import GlobalFilterListener from '@/components/GlobalFilterListener';
+import SMDataCard from '@/components/SMDataCard';
+import SMLineChart from '@/components/SMLineChart';
+import SMLinePieChart from '@/components/SMLinePieChart';
+import withIntlComponents from '@/hoc/withIntlComponents';
+import { formatSearchParams, exportFile, unitConverter, getPercent, Storage } from '@/utils/utils';
+import {getRejectRatio} from '@/utils/getRejectRatio';
+import {SMTips, SMNewSelect} from '@/components';
+import {BILL_TIPS} from '@/pages/payment/contants';
+import removeExportBtn from '@/utils/removeExportBtnOfForm';
+import { EXPORT_TREND_TOOLTIP } from '@/contants/exportUrl';
+import {judgeServiceIdType} from '@/contants/judgeServiceIdType';
+import {getCustomMdTrend, getDataDetail} from '@/services/trend';
+import {queryListService} from '@/services/history';
+import getUniqueColor from '@/utils/getUniqueColor';
+
+import {jumpToHistoryPage} from '../helper.js';
+import formatMdListByAppId from '../../formatMdListByAppId';
+import styles from '../trend.less';
+
+const hideErrorList = [
+    'POST_VIDEO_AUDIO',
+    'POST_VIDEO_IMG',
+    'POST_AUDIOCLIPS',
+    'POST_AUDIOCLIPS_EN',
+    'POST_AUDIOCLIPS_AR',
+    'POST_AUDIOCLIPS_B',
+    'POST_AUDIOSTREAMCLIPS',
+    'POST_AUDIOSTREAMCLIPS_EN',
+    'POST_AUDIOSTREAMCLIPS_AR',
+    'POST_AUDIOSTREAMCLIPS_B',
+    'POST_VIDEOSTREAM_IMG',
+    'POST_VIDEOSTREAM_AUDIO',
+    'POST_VIDEOSTREAM_IMG_EN',
+    'POST_VIDEOSTREAM_AUDIO_EN',
+    'POST_VIDEOSTREAM_IMG_AR',
+    'POST_VIDEOSTREAM_AUDIO_AR',
+];
+
+class Trend extends React.Component {
+    constructor(props) {
+        super(props);
+        const {intl} = 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',
+                    },
+                },
+            },
+            defaultChannelsEventData: {
+                type: 'descriptionCascader',
+                name: 'channels',
+                isInlineBlock: true,
+                data: {
+                    selectData: {
+                        optionData: [],
+                        title: '渠道',
+                        defaultValue: [],
+                        isAddAll: false,
+                        isAddEle: true,
+                        originValueName: 'label',
+                        valueName: 'label_value',
+                        labelName: 'label_name',
+                        childrenName: 'son',
+                        popupClassName: 'description-cascader',
+                        isChannel: true,
+                    },
+                },
+            },
+            defaultEventData: {
+                type: 'select',
+                name: 'eventId',
+                data: {
+                    selectData: {
+                        optionData: [],
+                        title: '事件',
+                        labelId: 'eventId',
+                        isAddAll: true,
+                        defaultValue: 'all',
+                    },
+                },
+            },
+            defaultLabelSearchData: {
+                type: 'labelSearch',
+                name: 'labelSearch',
+                data: {
+                    placeholder: '请输入航班号',
+                    optionData: [
+                        {
+                            value: 'flightNum',
+                            name: '航班号',
+                        },
+                    ],
+                },
+            },
+            isResetSearchForm: false,
+            queryParams: {
+                startDay: moment().format('YYYY-MM-DD'),
+                endDay: moment().format('YYYY-MM-DD'),
+                flightNum: '', // 航班号
+            },
+            defaultQueryParams: {
+                startDay: moment().format('YYYY-MM-DD'),
+                endDay: moment().format('YYYY-MM-DD'),
+            },
+            cardData: {
+                total: 0,
+                reject: 0,
+                review: 0,
+                pass: 0,
+            },
+            resetDefaultValue: false,
+            trendData: {},
+            riskLevelLoading: true,
+            riskTypeLoading: 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: 0,
+                    percent: '',
+                    type: 'pass',
+                },
+            ],
+            trendLineData: {
+                title: '趋势统计',
+                xname: '',
+                yname: '数量（次）',
+                xAxisData: [],
+                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,
+                    },
+                ],
+            },
+            trendLineOrderData: {
+                title: '查定比趋势统计',
+                xname: '',
+                yname: '数量（次）',
+                xAxisData: [],
+                configData: [
+                    {
+                        name: '查定比',
+                        data: [],
+                        color: 'yellow',
+                        selected: false,
+                    },
+                    {
+                        name: '原始查定比',
+                        data: [],
+                        color: 'green',
+                        selected: false,
+                    },
+                ],
+            },
+            trendLineCustomMdData: {
+                title: '自定义名单命中趋势',
+                xname: '',
+                yname: '数量（次）',
+                xAxisData: [],
+                configData: [],
+            },
+            rejectLineData: {
+                title: '拒绝原因分布',
+                xname: '',
+                yname: '数量（次）',
+                xAxisData: [],
+                configData: [],
+            },
+            reviewLineData: {
+                title: '审核原因分布',
+                xname: '',
+                yname: '数量（次）',
+                xAxisData: [],
+                configData: [],
+            },
+            verifyLineData: {
+                title: '二次验证原因分布',
+                xname: '',
+                yname: '数量（次）',
+                xAxisData: [],
+                configData: [],
+            },
+            rejectPieData: {
+                name: '拒绝原因分布',
+                legendData: [],
+                seriesData: [],
+            },
+            reviewPieData: {
+                name: '审核原因分布',
+                legendData: [],
+                seriesData: [],
+            },
+            verifyPieData: {
+                name: '二次验证原因分布',
+                legendData: [],
+                seriesData: [],
+            },
+            defaultRejectLineData: {
+                title: '拒绝原因分布',
+                xname: '',
+                yname: '数量（次）',
+                xAxisData: [],
+                configData: [],
+            },
+            defaultReviewLineData: {
+                title: '审核原因分布',
+                xname: '',
+                yname: '数量（次）',
+                xAxisData: [],
+                configData: [],
+            },
+            defaultVerifyLineData: {
+                title: '二次验证原因分布',
+                xname: '',
+                yname: '数量（次）',
+                xAxisData: [],
+                configData: [],
+            },
+            defaultRejectPieData: {
+                name: '拒绝原因分布',
+                legendData: [],
+                seriesData: [],
+            },
+            defaultReviewPieData: {
+                name: '审核原因分布',
+                legendData: [],
+                seriesData: [],
+            },
+            defaultVerifyPieData: {
+                name: '二次验证原因分布',
+                legendData: [],
+                seriesData: [],
+            },
+            errorReasonLineData: {
+                title: '接口调用异常原因分布',
+                xname: '',
+                yname: '数量（次）',
+                xAxisData: [],
+                configData: [],
+            },
+            errorReasonPieData: {
+                name: '接口调用异常原因分布',
+                legendData: [],
+                seriesData: [],
+            },
+            riskTypeTrendData: {},
+            trendType: props.isAviation, // 趋势类型标识
+            trendLineCustomMdLoading: false,
+            customMdCheckValue: [], // 当前选中的名单的值
+            customMdSelectList: [], // 当前筛选条件下的名单列表
+            tableDataSource: [],
+        };
+    }
+
+    UNSAFE_componentWillMount() {
+        const { stateConfig} = this.props;
+        const {trendLineData} = this.state;
+        // 天网不需要添加拦截比例
+        if (!(stateConfig?.isTW)) {
+            const newTrendLineData = lodash.cloneDeep(trendLineData);
+            newTrendLineData.isInterception = true;
+            newTrendLineData.secondSuffix = '%';
+            newTrendLineData.configData = [...newTrendLineData.configData,
+                {
+                    name: '拦截比例',
+                    data: [],
+                    color: 'red',
+                    selected: false,
+                    isSecondAxis: true,
+                }];
+            this.setState({trendLineData: newTrendLineData});
+        }
+        if (stateConfig) {
+            this.setState(stateConfig);
+        }
+    }
+
+    // 获取自定义名单列表当前选中的值（通过浏览器缓存）
+    getCustomMdCheckValueByStorage = (params = {}) => {
+        const { route, currentUser } = this.props;
+        const serviceId = route.routeData.serviceId;
+        const {organization = this.state.currentGlobalFilter?.organization} = params || {};
+        // 缓存的key值 当前账号 + 选中的公司 + serviceId
+        const customMdKey = currentUser?.account + '_'
+            + organization + '_' + serviceId;
+        const customMdCheckValue = Storage.get(customMdKey) || [];
+        // 将从缓存中获取的名单默认值，更新到内存中
+        this.setState({
+            customMdCheckValue,
+        });
+        return customMdCheckValue;
+    };
+
+    // 设置自定义名单的值——通过名单options进行过滤
+    onCustomMdChange = (value = []) => {
+        const {route, currentUser} = this.props;
+        const serviceId = route.routeData.serviceId;
+
+        // 获取当前storage的key
+        const customMdKey = currentUser?.account + '_'
+            + this.state.currentGlobalFilter?.organization + '_' + serviceId;
+
+        // 获取当前名单列表的name数组
+        const customMdSelectListByName = this.state.customMdSelectList?.map(item => item.name);
+
+        // 找到缓存中不在名单列表之内的值（这些值不做替换）
+        const prevCustomMdValue = this.getCustomMdCheckValueByStorage()?.filter(item =>
+            !customMdSelectListByName.includes(item)) || [];
+
+        // 最终展示的值： 缓存中不在名单列表外的值 + 用户当前选中的值
+        const finalUpdateCustomMdValue = [...prevCustomMdValue, ...value]; // 其他值+当前选中的值
+        Storage.set(customMdKey, finalUpdateCustomMdValue);
+
+        this.setState({
+            customMdCheckValue: finalUpdateCustomMdValue,
+        });
+    };
+
+    // 自定义名单筛选项改变的方法
+    onFilterChangeToGetMdList = (params = {}, isOrgChange) => {
+        const {currentGlobalFilter, newQueryParams} = params;
+        // 获取新的缓存，因为如果公司变化了，对应存储缓存的key就变化了，所以需要重新获取
+        if (isOrgChange) {
+            this.getCustomMdCheckValueByStorage({
+                organization: currentGlobalFilter.organization,
+            });
+        }
+
+        // 重新请求名单列表
+        this.getCustomMdSelectList({
+            organization: currentGlobalFilter.organization,
+            appId: currentGlobalFilter.appId,
+            ...newQueryParams,
+        });
+    };
+
+    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) {
+                    // 公司改变 重置搜索筛选项
+                    const { queryParams, isTW = false } = this.state;
+                    const { route } = this.props;
+                    const serviceId = route.routeData.serviceId;
+                    if (isTW) {
+                        switch (serviceId) {
+                            case 'POST_EVENT':
+                                // 获取事件列表
+                                this.getEventList();
+                                break;
+                        }
+                        // 天网公司变化时将筛选项选中的值恢复成默认
+                        let newQueryParams = lodash.cloneDeep(queryParams);
+                        newQueryParams.eventId = ''; // 事件趋势的下拉框
+                        newQueryParams.flightNum = ''; // 春秋航空的占座率趋势的航班号输入框
+                        this.setState({
+                            queryParams: newQueryParams,
+                            resetDefaultValue: !this.state.resetDefaultValue, // 公司变化时将筛选项选中的值恢复成默认
+                        }, () => {
+                            this.doSearch();
+                        });
+                        // this.doSearch();
+                    } else {
+                        // 天净的趋势页面
+                        this.getChannelEventList();
+
+                        let newQueryParams = lodash.cloneDeep(queryParams);
+                        newQueryParams.eventId = '';
+                        newQueryParams.channel = '';
+                        newQueryParams.channels = [];
+
+                        // 文本中文公司变化时需要请求名单列表
+                        if (judgeServiceIdType(serviceId)?.isTextZnServiceId) {
+                            this.onFilterChangeToGetMdList({
+                                currentGlobalFilter,
+                                newQueryParams,
+                                serviceId,
+                            }, true);
+                        }
+                        this.setState(
+                            {
+                                queryParams: newQueryParams,
+                                resetDefaultValue: !this.state.resetDefaultValue, // 公司变化时将筛选项选中的值恢复成默认
+                            },
+                            () => {
+                                this.doSearch();
+                            }
+                        );
+                    }
+                } else {
+                    const {serviceId} = this.props.route?.routeData;
+                    // 文本中文应用变化时需要请求名单列表
+                    if (appIdChange && judgeServiceIdType(serviceId)?.isTextZnServiceId) {
+                        this.onFilterChangeToGetMdList({
+                            currentGlobalFilter,
+                            newQueryParams: this.state.queryParams,
+                            serviceId,
+                        });
+                    }
+                    this.doSearch();
+                }
+            }
+        );
+    };
+
+    doSearch() {
+        this.setState(
+            {
+                riskLevelLoading: true,
+                riskTypeLoading: true,
+                trendLineCustomMdLoading: true, // 自定义名单趋势的loading
+                tableLoading: true, // 数据详情列表
+            },
+            () => {
+                this.getRiskLevelTrend();
+                this.getRiskTypeTrend();
+                this.getCustomMdListTrend(); // 请求自定义名单趋势
+                if (!this.state.isTW) {
+                    this.getTableData(); // 数据详情列表
+                    this.getErrorReasonTrend(); // 接口异常分布
+                }
+            }
+        );
+    }
+
+    // 获取查询接口参数
+    getSearchParams = () => {
+        const { route, specialServiceId = '' } = this.props;
+        const { currentGlobalFilter, queryParams, trendType } = this.state;
+        const { organization, appId, clusterId } = currentGlobalFilter;
+        let searchParams = {
+            organization: organization,
+            serviceId: specialServiceId || route.routeData.serviceId,
+            appId: appId,
+            colonyName: clusterId,
+            trendType,
+            ...queryParams,
+        };
+
+        if (searchParams.channels?.length === 0) {
+            delete searchParams.channels;
+        }
+
+        // 处理一下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.setTrendLineChartData();
+            }
+        );
+    };
+
+    // 请求自定义名单的趋势
+    getCustomMdListTrend = async () => {
+        const newSearchParams = this.getSearchParams();
+        const newTrendLineCustomMdData = lodash.cloneDeep(this.state.trendLineCustomMdData);
+
+        try {
+            const {code, contents} = await getCustomMdTrend(newSearchParams);
+            const {CUSTOMLISTTREND = {}} = contents || {};
+            if (code === 1100) {
+                const configData = [];
+                Object.keys(CUSTOMLISTTREND || {})?.map(item => {
+                    if (item === 'x_axis') {
+                        newTrendLineCustomMdData.xAxisData = CUSTOMLISTTREND?.x_axis;
+                    } else {
+                        configData.push({
+                            name: item,
+                            data: CUSTOMLISTTREND?.[item],
+                            selected: true,
+                        });
+                    }
+                });
+                newTrendLineCustomMdData.configData = configData;
+                this.setState({
+                    trendLineCustomMdData: newTrendLineCustomMdData,
+                    trendLineCustomMdLoading: false,
+                });
+            }
+        } catch (error) {
+            newTrendLineCustomMdData.configData = [];
+            newTrendLineCustomMdData.xAxisData = [];
+            this.setState({
+                trendLineCustomMdData: newTrendLineCustomMdData,
+                trendLineCustomMdLoading: false,
+            });
+        }
+    };
+
+    // 请求风险类型分布接口
+    getRiskTypeTrend = async () => {
+        const { dispatch } = this.props;
+
+        let newSearchParams = this.getSearchParams();
+
+        let riskTypeTrendData = await dispatch({
+            type: 'trend/fetchRiskTypeTrend',
+            payload: newSearchParams,
+        });
+        this.setState(
+            {
+                riskTypeLoading: false,
+                riskTypeTrendData: riskTypeTrendData,
+            },
+            () => {
+                this.setRiskTypeData();
+            }
+        );
+    };
+    // 设置风险类型分布的 折线图 以及 饼图数据
+    setRiskTypeData = () => {
+        const {
+            defaultRejectLineData,
+            defaultReviewLineData,
+            defaultVerifyLineData,
+            defaultRejectPieData,
+            defaultReviewPieData,
+            defaultVerifyPieData,
+            riskTypeTrendData,
+            hasVerify,
+        } = this.state;
+        const {
+            REJECT,
+            REVIEW,
+            VERIFY,
+            REJECTTREND = {},
+            REVIEWTREND = {},
+            VERIFYTREND = {},
+        } = riskTypeTrendData || {};
+
+        let newRejectLineData = lodash.cloneDeep(defaultRejectLineData);
+        let newReviewLineData = lodash.cloneDeep(defaultReviewLineData);
+        let newVerifyLineData = lodash.cloneDeep(defaultVerifyLineData);
+        let newReviewPieData = lodash.cloneDeep(defaultReviewPieData);
+        let newRejectPieData = lodash.cloneDeep(defaultRejectPieData);
+        let newVerifyPieData = lodash.cloneDeep(defaultVerifyPieData);
+        let rejectTotal = this.getTotalCount(REJECT);
+        let reviewTotal = this.getTotalCount(REVIEW);
+        // 设置拒绝原因分布的折线图数据
+        for (let i in REJECTTREND) {
+            if (REJECT[i]) {
+                newRejectLineData.configData.push({
+                    name: i,
+                    data: REJECTTREND[i],
+                });
+            }
+        }
+        newRejectLineData.xAxisData = REJECTTREND.x_axis;
+        // 设置审核原因分布的折线图数据
+        for (let i in REVIEWTREND) {
+            if (REVIEW[i]) {
+                newReviewLineData.configData.push({
+                    name: i,
+                    data: REVIEWTREND[i],
+                });
+            }
+        }
+        newReviewLineData.xAxisData = REVIEWTREND.x_axis;
+        if (hasVerify) {
+            let verifyTotal = this.getTotalCount(VERIFY);
+            // 有二次验证
+            // 设置二次验证原因分布的折线图数据
+            for (let i in VERIFYTREND) {
+                if (VERIFY[i]) {
+                    newVerifyLineData.configData.push({
+                        name: i,
+                        data: VERIFYTREND[i],
+                    });
+                }
+            }
+            newVerifyLineData.xAxisData = VERIFYTREND.x_axis;
+            // 设置二次验证原因分布的饼图数据
+            for (let i in VERIFY) {
+                if (VERIFY[i]) {
+                    const index = i.indexOf('：') > -1 ? i.indexOf('：') : i.indexOf(':');
+                    const name = index > -1 ? i.slice(index + 1) : i;
+                    newVerifyPieData.seriesData.push({
+                        value: VERIFY[i],
+                        name: name,
+                        trueName: i,
+                        per: getPercent(VERIFY[i], verifyTotal),
+                    });
+                }
+            }
+            newVerifyPieData.tooltipFormatter = this.tooltipFormatter;
+        }
+        // 设置拒绝原因分布的饼图数据
+        for (let i in REJECT) {
+            if (REJECT[i]) {
+                const index = i.indexOf('：') > -1 ? i.indexOf('：') : i.indexOf(':');
+                const name = index > -1 ? i.slice(index + 1) : i;
+                newRejectPieData.seriesData.push({
+                    value: REJECT[i],
+                    name: name,
+                    trueName: i,
+                    per: getPercent(REJECT[i], rejectTotal),
+                });
+            }
+        }
+        newRejectPieData.tooltipFormatter = this.tooltipFormatter;
+        // 设置审核原因分布的饼图数据
+        for (let i in REVIEW) {
+            if (REVIEW[i]) {
+                const index = i.indexOf('：') > -1 ? i.indexOf('：') : i.indexOf(':');
+                const name = index > -1 ? i.slice(index + 1) : i;
+                newReviewPieData.seriesData.push({
+                    value: REVIEW[i],
+                    name: name,
+                    trueName: i,
+                    per: getPercent(REVIEW[i], reviewTotal),
+                });
+            }
+        }
+        newReviewPieData.tooltipFormatter = this.tooltipFormatter;
+        this.setState({
+            rejectLineData: newRejectLineData,
+            reviewLineData: newReviewLineData,
+            verifyLineData: newVerifyLineData,
+            rejectPieData: newRejectPieData,
+            reviewPieData: newReviewPieData,
+            verifyPieData: newVerifyPieData,
+        });
+    };
+
+    // 获取饼图的数据总量
+    getTotalCount = data => {
+        let totalCount = 0;
+        for (let i in data) {
+            totalCount += data[i];
+        }
+        return totalCount;
+    };
+
+    tooltipFormatter = params => {
+        return params.data.trueName + ' ' + params.data.value + ' (' + params.data.per + ')';
+    };
+
+    // 获取异常原因接口
+    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 = [];
+            const channelOptionData = [];
+            let newChannelEventData = lodash.cloneDeep(this.state.defaultChannelEventData);
+            let newChannelsData = lodash.cloneDeep(this.state.defaultChannelsEventData);
+            channelEventList.forEach(item => {
+                newOptionData.push({
+                    value: `${item.channel}|${item.clientEventId}`,
+                    name: item.displayName,
+                });
+                channelOptionData.push({
+                    label_value: item.channel,
+                    label_name: item.displayName,
+                });
+                if (item.channel !== '') {
+                    channelMap[item.channel] = item.channelName;
+                }
+                if (item.clientEventId !== '') {
+                    eventIdMap[item.clientEventId] = item.eventName;
+                }
+            });
+            newChannelEventData.data.selectData.optionData = newOptionData;
+            newChannelsData.data.selectData.optionData = channelOptionData;
+            this.setState({
+                defaultChannelEventData: newChannelEventData,
+                defaultChannelsEventData: newChannelsData,
+                channelMap,
+                eventIdMap,
+            });
+        }
+    };
+
+    // 获取事件列表
+    getEventList = async () => {
+        const { dispatch, route } = this.props;
+        let eventList = await dispatch({
+            type: 'base/fetchOpenEvent',
+            payload: {
+                organization: this.state.currentGlobalFilter.organization,
+                serviceId: route.routeData.serviceId,
+                isGlobalEvent: 0,
+            },
+        });
+        let newEventData = lodash.cloneDeep(this.state.defaultEventData);
+        let newOptionData = [];
+        if (eventList.length) {
+            eventList[0].events.forEach(item => {
+                newOptionData.push({
+                    value: item.clientEventId,
+                    name: item.eventName,
+                });
+            });
+        }
+        newEventData.data.selectData.optionData = newOptionData;
+        this.setState({
+            defaultEventData: newEventData,
+        });
+    };
+
+    // 设置卡片数组数据
+    setCardDataArr = () => {
+        const { cardData = {}, cardDataArr, hasVerify } = this.state;
+        const { total, reject, review, pass, verify = 0 } = cardData;
+        const { rejectPercent, reviewPercent, passPercent, verifyPercent } = this.getCardPercent();
+        const { isAviation } = this.props;
+
+        let newCardDataArr = lodash.cloneDeep(cardDataArr);
+        if (isAviation) {
+            const { order, rate, cancelOrder, finishFlightOrder, checkOrderRatio, originCheckOrderRatio } = cardData;
+            if (isAviation === 'SEAT_RATE') {
+                newCardDataArr[0].total = unitConverter(order).num;
+                newCardDataArr[0].unit = unitConverter(order).unit;
+                newCardDataArr[1].total = unitConverter(cancelOrder).num;
+                newCardDataArr[1].unit = unitConverter(cancelOrder).unit;
+                newCardDataArr[2].total = unitConverter(finishFlightOrder).num;
+                newCardDataArr[2].unit = unitConverter(finishFlightOrder).unit;
+                newCardDataArr[3].total = unitConverter(rate).num + '%';
+            } else {
+                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[2].total = unitConverter(pass).num;
+                newCardDataArr[2].unit = unitConverter(pass).unit;
+                newCardDataArr[3].total = unitConverter(checkOrderRatio).num;
+                newCardDataArr[4].total = unitConverter(originCheckOrderRatio).num;
+            }
+        } else {
+            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;
+
+            if (hasVerify) {
+                // 登录、注册、事件三个趋势页面有二次验证展示
+                newCardDataArr[3].total = unitConverter(verify).num;
+                newCardDataArr[3].unit = unitConverter(verify).unit;
+                newCardDataArr[3].percent = verifyPercent;
+
+                newCardDataArr[4].total = unitConverter(pass).num;
+                newCardDataArr[4].unit = unitConverter(pass).unit;
+                newCardDataArr[4].percent = passPercent;
+            } else {
+                newCardDataArr[3].total = unitConverter(pass).num;
+                newCardDataArr[3].unit = unitConverter(pass).unit;
+                newCardDataArr[3].percent = passPercent;
+            }
+        }
+        this.setState({
+            cardDataArr: newCardDataArr,
+        });
+    };
+
+    // 获取卡片百分比数据
+    getCardPercent = () => {
+        const { cardData = {} } = this.state;
+        const { total, reject, review, pass, verify = 0 } = cardData;
+        return {
+            rejectPercent: getPercent(reject, total),
+            reviewPercent: getPercent(review, total),
+            passPercent: getPercent(pass, total),
+            verifyPercent: getPercent(verify, total),
+        };
+    };
+
+    // 设置渠道折线图数据
+    setTrendLineChartData = () => {
+        const { isAviation } = this.props;
+        const { trendData = {}, trendLineData = {}, hasVerify, trendLineOrderData } = this.state;
+        const {
+            total,
+            pass,
+            reject,
+            review,
+            verify,
+            x_axis,
+            checkOrderRatio,
+            originCheckOrderRatio,
+            rate,
+            rejectRatio,
+        } = trendData;
+        let newTrendLineData = lodash.cloneDeep(trendLineData);
+        let newTrendLineOrderData = lodash.cloneDeep(trendLineOrderData);
+        newTrendLineData.xAxisData = x_axis;
+        if (isAviation === 'SEAT_RATE') {
+            newTrendLineData.configData[0].data = rate;
+        } else {
+            newTrendLineData.configData[0].data = total;
+            newTrendLineData.configData[1].data = reject;
+            newTrendLineData.configData[2].data = review;
+            if (hasVerify) {
+                newTrendLineData.configData[3].data = verify;
+                newTrendLineData.configData[4].data = pass;
+                if (newTrendLineData.configData[5]) {
+                    newTrendLineData.configData[5].data = rejectRatio;
+                }
+            } else {
+                newTrendLineData.configData[3].data = pass;
+                if (newTrendLineData.configData[4]) {
+                    newTrendLineData.configData[4].data = rejectRatio;
+                }
+            }
+        }
+
+        newTrendLineOrderData.configData[0].data = checkOrderRatio;
+        newTrendLineOrderData.configData[1].data = originCheckOrderRatio;
+        newTrendLineOrderData.xAxisData = x_axis;
+        this.setState({
+            trendLineData: newTrendLineData,
+            trendLineOrderData: newTrendLineOrderData,
+        });
+    };
+
+    // 初始化搜索菜单
+    getFormData() {
+        let formData = [];
+        const {
+            defaultRangeTimeData,
+            defaultChannelEventData,
+            defaultChannelsEventData,
+            defaultEventData,
+            isTW = false,
+            defaultLabelSearchData,
+        } = this.state;
+        const { route, currentUser, isAviation } = this.props;
+        const serviceId = route.routeData.serviceId;
+        const exportButton = {
+            type: 'export',
+            name: '导出',
+            tooltip: EXPORT_TREND_TOOLTIP,
+        };
+
+        formData.push(defaultRangeTimeData);
+        if (isAviation) {
+            if (isAviation === 'SEAT_RATE') {
+                formData.push(defaultLabelSearchData);
+            }
+
+            return formData;
+        }
+        if (isTW) {
+            switch (serviceId) {
+                case 'POST_EVENT':
+                    formData.push(defaultEventData);
+                    break;
+            }
+        } else {
+            const {isTextServiceId, isImageServiceId} = judgeServiceIdType(serviceId);
+            if (isTextServiceId || isImageServiceId) {
+                formData.push(defaultChannelsEventData);
+            } else {
+                formData.push(defaultChannelEventData);
+            }
+        }
+        if (getAuthFunction(AUTH_FUNCTION.EXPORT)) {
+            if (serviceId !== 'ANTI_ROBOT_MARKETING' && serviceId !== 'ANTI_ROBOT_SMS') {
+                formData.push(exportButton);
+            }
+        }
+        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 'channels':
+                if (value && value?.length > 0) {
+                    newQueryParams.channels = lodash.isArray(value) ? lodash.flattenDeep(value) : value;
+                } else {
+                    newQueryParams.channels = undefined;
+                }
+                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;
+            case 'eventId':
+                newQueryParams.eventId = value;
+                break;
+        }
+
+        this.setState(
+            {
+                queryParams: newQueryParams,
+                riskLevelLoading: true,
+            },
+            () => {
+                this.doSearch();
+            }
+        );
+    }
+
+    /**
+     * 趋势数据导出
+     */
+    exportData = callback => {
+        const {route, t} = this.props;
+        const { queryParams, isTW = false } = this.state;
+        let newSearchParams = this.getSearchParams();
+
+        const titleMap = {
+            POST_TEXT: '文本趋势分析',
+            POST_TEXT_EN: '文本(英文)趋势分析',
+            POST_TEXT_AR: '文本(阿语)趋势分析',
+            POST_IMG: '图片趋势分析',
+            POST_ARTICLE: '网页趋势分析',
+            POST_AUDIO: '音频文件片段趋势分析',
+            POST_AUDIO_EN: '音频文件(英语)片段趋势分析',
+            POST_AUDIO_AR: '音频文件(阿语)片段趋势分析',
+            POST_AUDIO_B: '音频文件(B类)片段趋势分析',
+            POST_AUDIOSTREAM: '音频流片段趋势分析',
+            POST_AUDIOSTREAM_EN: '音频流(英文)片段趋势分析',
+            POST_AUDIOSTREAM_AR: '音频流(阿语)片段趋势分析',
+            POST_AUDIOSTREAM_B: '音频流(B类)片段趋势分析',
+            POST_VIDEO: '视频文件趋势分析',
+            POST_VIDEO_IMG: '视频文件截帧图片趋势分析',
+            POST_VIDEO_AUDIO: '视频文件音频片段趋势分析',
+            POST_VIDEOSTREAM: '视频流趋势分析',
+            POST_VIDEOSTREAM_IMG: '视频流截帧图片趋势分析',
+            POST_VIDEOSTREAM_AUDIO: '视频流音频片段趋势分析',
+            ACCOUNT_REGISTER: '注册风险趋势分析',
+            ACCOUNT_LOGIN: '登录风险趋势分析',
+            POST_EVENT: '事件风险趋势分析',
+            ANTI_ROBOT_SMS: '短信通道保护趋势分析',
+            ANTI_ROBOT_MARKETING: '羊毛党防刷趋势分析',
+            POST_VIDEOSTREAM_EN: '视频流(英文)趋势分析',
+            POST_VIDEOSTREAM_IMG_EN: '视频流(英文)截帧图片趋势分析',
+            POST_VIDEOSTREAM_AUDIO_EN: '视频流(英文)音频片段趋势分析',
+            POST_VIDEOSTREAM_AR: '视频流(阿语)趋势分析',
+            POST_VIDEOSTREAM_IMG_AR: '视频流(阿语)截帧图片趋势分析',
+            POST_VIDEOSTREAM_AUDIO_AR: '视频流(阿语)音频片段趋势分析',
+            POST_MULTIMODAL: '多模态趋势分析',
+        };
+        let downloadTitle = t(titleMap[route.routeData.serviceId]);
+        let downloadUrl = '/webapi/statisticTendency/download';
+        let dateRangeStr = `${queryParams.startDay}_${queryParams.endDay}`;
+        let productStr = isTW ? '天网' : '天净';
+
+        let title = `${t(productStr)}-${t(downloadTitle)}-${dateRangeStr}-${t('统计数据表')}.xls`;
+
+        exportFile(downloadUrl, title, newSearchParams).then(() => {
+            callback && callback();
+        });
+    };
+
+    getCustomMdSelectList = async (params = {}) => {
+        // 只受公司和应用影响
+        const mdParams = {
+            count: 10000,
+            offset: 0,
+            subType: 'text',
+            type: '1',
+            product: this.props.route?.routeData?.serviceId,
+            organization: params?.organization || this.state.currentGlobalFilter?.organization,
+        };
+        const {currentFilterAppId} = formatSearchParams({
+            currentFilterAppId: params?.appId || this.state.currentGlobalFilter?.appId,
+        });
+        try {
+            let newList = [{
+                name: '敏感词名单',
+                value: '敏感词名单',
+            }];
+            const {code, contents} = await queryListService(formatSearchParams(mdParams));
+            if (code === 1100) {
+                newList = formatMdListByAppId(contents, currentFilterAppId);
+            }
+            this.setState({
+                customMdSelectList: newList,
+            });
+        } catch (error) {
+            this.setState({
+                customMdSelectList: [],
+            });
+        }
+    };
+
+    handleTrendLineCustomMdData = (trendLineCustomMdData, customMdCheckValue) => {
+        // 选中值是空数组时，直接返回
+        if (customMdCheckValue?.length === 0) {
+            return trendLineCustomMdData;
+        }
+        const newTrendLineCustomMdData = lodash.cloneDeep(trendLineCustomMdData);
+        newTrendLineCustomMdData.configData = newTrendLineCustomMdData.configData?.filter(item => {
+            return customMdCheckValue.includes(item.name);
+        });
+        return newTrendLineCustomMdData;
+    };
+
+    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;
+
+        return [
+            {
+                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: 'rejectCount',
+                dataIndex: 'rejectCount',
+                title: t('拒绝量'),
+                sorter: (a, b) => a.rejectCount - b.rejectCount,
+                render: (text, record) => this.renderItem(text, record, 'REJECT'),
+            },
+        ];
+    };
+
+    // 饼图跳转
+    pieJump = (description, riskLevel) => {
+        const {queryParams, isTW} = this.state;
+        if (isTW) {
+            return;
+        }
+        const {route, specialServiceId} = this.props;
+        const serviceId = specialServiceId || route?.routeData?.serviceId;
+        jumpToHistoryPage(serviceId, {
+            startTime: queryParams.startDay,
+            endTime: queryParams.endDay,
+            channel: queryParams.channel || queryParams.channels,
+            riskLevel,
+            newDescription: description,
+        });
+    };
+
+    /**
+     * 需要显示的DOM
+     */
+    renderDom = () => {
+        const { isAviation, route, t, specialServiceId } = this.props;
+        const serviceId = specialServiceId || route?.routeData?.serviceId;
+        const {
+            riskLevelLoading,
+            trendLineData,
+            riskTypeLoading,
+            rejectLineData,
+            reviewLineData,
+            verifyLineData,
+            rejectPieData,
+            reviewPieData,
+            verifyPieData,
+            hasVerify,
+            trendLineOrderData,
+            customMdCheckValue,
+            customMdSelectList,
+            trendLineCustomMdData,
+            trendLineCustomMdLoading,
+            isTW,
+            tableDataSource,
+            tableLoading,
+            errorReasonLineData,
+            errorReasonPieData,
+            errorReasonLoading,
+        } = this.state;
+        const {isTextZnServiceId} = judgeServiceIdType(route?.routeData?.serviceId);
+
+        switch (isAviation) {
+            case 'SEAT_RATE':
+                return (
+                    <>
+                        <SMLineChart data={trendLineData} loading={riskLevelLoading} isHide />
+                    </>
+                );
+            case 'CHECK_ORDER_RATIO':
+                return (
+                    <>
+                        <SMLineChart data={trendLineOrderData} loading={riskLevelLoading} />
+                        <SMLineChart data={trendLineData} loading={riskLevelLoading} />
+                    </>
+                );
+            default: {
+                return (
+                    <>
+                        <SMLineChart data={trendLineData} loading={riskLevelLoading} />
+                        {!isTW && (
+                            <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>
+                        )}
+                        {isTextZnServiceId && (
+                            <div>
+                                <SMLineChart
+                                    data={this.handleTrendLineCustomMdData(trendLineCustomMdData, customMdCheckValue)}
+                                    loading={trendLineCustomMdLoading}
+                                    customProps={getUniqueColor({length: customMdSelectList?.length})}
+                                    searchDom={(
+                                        <div
+                                            style={{
+                                                display: 'flex',
+                                                justifyContent: 'end',
+                                                marginBottom: '15px',
+                                            }}
+                                        >
+                                            <SMNewSelect
+                                                onChange={(value, name) => this.onCustomMdChange(value)}
+                                                selectData={{
+                                                    optionData: customMdSelectList || [],
+                                                    title: '名单名称',
+                                                    labelId: 'matchedList',
+                                                    isAddAll: true,
+                                                    isMaxTagCount: 3,
+                                                    mode: 'multiple',
+                                                    isAllowClear: true,
+                                                    style: {'min-width': 212},
+                                                    defaultValue: customMdCheckValue?.filter(item => {
+                                                        const optionDataByName = customMdSelectList?.map(item =>
+                                                            item.value);
+                                                        return optionDataByName?.includes(item);
+                                                    }) || [],
+                                                }}
+                                            />
+                                        </div>
+                                    )}
+                                />
+                            </div>
+                        )}
+                        <SMLinePieChart
+                            lineChartData={rejectLineData}
+                            pieCharData={rejectPieData}
+                            loading={riskTypeLoading}
+                            onChartClick={param => this.pieJump(param.name, 'REJECT')}
+                        />
+                        <SMLinePieChart
+                            lineChartData={reviewLineData}
+                            pieCharData={reviewPieData}
+                            loading={riskTypeLoading}
+                            onChartClick={param => this.pieJump(param.name, 'REVIEW')}
+                        />
+                        {!isTW && !(hideErrorList.includes(serviceId)) ? (
+                            <SMLinePieChart
+                                lineChartData={errorReasonLineData}
+                                pieCharData={errorReasonPieData}
+                                loading={errorReasonLoading}
+                                isShowNumber
+                            />) : null
+                        }
+                        {hasVerify ? (
+                            <SMLinePieChart
+                                lineChartData={verifyLineData}
+                                pieCharData={verifyPieData}
+                                loading={riskTypeLoading}
+                            />
+                        ) : null}
+                    </>
+                );
+            }
+        }
+    };
+
+    render() {
+        const formData = this.getFormData();
+        const { riskLevelLoading, cardDataArr, currentGlobalFilter, resetDefaultValue } = this.state;
+        const { organization } = currentGlobalFilter;
+        const { currentLang } = 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);
+                    }}
+                    resetCount={resetDefaultValue} // 在组件内部进行初始化默认值，整个列表初始化不适用（时间需要不能重置为初始化）
+                    exportData={callback => this.exportData(callback)}
+                />
+                <SMDataCard dataSource={cardDataArr} column={cardDataArr.length} loading={riskLevelLoading} />
+                {this.renderDom()}
+            </div>
+        );
+    }
+}
+
+export default connect(({ user }) => ({
+    currentUser: user.currentUser,
+}))(injectIntl(withIntlComponents(Trend)));