yearly.vue

<template>
<div>
    <div class="yearly" v-if="objectVal == 'multipleObj'">
        <!-- 多对象同环比报表 -->
        <div class="asis-table-wrapper">
            <h3 class="asis-table-header">
                <span class="asis-table-title">{{ i18nFormatter(multipleYearOfYoY_title) }}</span>
                <span class="asis-table-download" @click="dealExport('domNearYear', i18nFormatter(multipleYearOfYoY_title))">{{$t('allPages.load')}}</span>
                <span class="report-type-box">
                    <span :class="tab['thirdTab'] ? 'report-item line-report' : 'report-item line-report report-item-line'" @click="selReport('thirdTabLine')"></span>
                    <span :class="tab['thirdTab'] ? 'report-item report-item-tab' : 'report-item'" @click="selReport('thirdTabTable')"></span>
                </span>
            </h3>
            <div class="asis-table-content" v-if="tab['thirdTab']">
                <common-tab v-loading="loading" :tableData="multipleTable_ops" id="domNearYear" :headData="multipleTable_head" :tabHeight="''"></common-tab>
            </div>
            <div v-else>
                <!-- <common-chart id="tfChart6" chartType='MultipBar' style="height: 400px" :options="trafficFlow_barOps"></common-chart> -->
                <mix-charts chartId="tfChart6" style="height: 400px" :chartData="trafficFlow_barOps" chartType="Bar" />
            </div>
        </div>
    </div>
    <div class="yearly" v-else>
        <!-- 近3年同环比报表 -->
        <div class="asis-table-wrapper">
            <h3 class="asis-table-header">
                <span class="asis-table-title">{{ i18nFormatter(Near3YearYoY_title) }}</span>
                <span class="asis-table-download" @click="dealExport('domNearYear', i18nFormatter(Near3YearYoY_title))">{{$t('allPages.load')}}</span>
                <span class="report-type-box">
                    <span :class="tab['firstTab'] ? 'report-item line-report' : 'report-item line-report report-item-line'" @click="selReport('firstTabLine')"></span>
                    <span :class="tab['firstTab'] ? 'report-item report-item-tab' : 'report-item'" @click="selReport('firstTabTable')"></span>
                </span>
            </h3>
            <div class="asis-table-content" v-if="tab['firstTab']">
                <common-tab v-loading="loading" :tableData="Near3YearYoY_ops" id="domNearYear" :headData="Near3YearYoY_head" :tabHeight="''"></common-tab>
            </div>
            <div v-else>
                <!-- <common-chart id="tfChart" chartType='LineAndBar' style="height: 400px" :options="trafficFlow_linAndBarOps"></common-chart> -->
                <mix-charts chartId="tfChart" style="height: 400px" :chartData="trafficFlow_linAndBarOps" chartType='LineBar' />
            </div>
        </div>
        <!-- 本年每月同环比增长率报表 -->
        <div class="asis-table-wrapper">
            <h3 class="asis-table-header">
                <span class="asis-table-title">{{ i18nFormatter(MonthOfYearYoY_title) }}</span>
                <span class="asis-table-download" @click="dealExport('domYoy', i18nFormatter(MonthOfYearYoY_title))">{{$t('allPages.load')}}</span>
                <span class="report-type-box">
                    <span :class="tab['seconTab'] ? 'report-item line-report' : 'report-item line-report report-item-line'" @click="selReport('seconTabLine')"></span>
                    <span :class="tab['seconTab'] ? 'report-item report-item-tab' : 'report-item'" @click="selReport('seconTabTable')"></span>
                </span>
            </h3>
            <div class="asis-table-content" v-if="tab['seconTab']">
                <!-- height 432 -->
                <common-tab v-loading="loading" :tableData="MonthOfYearYoY_ops" id="domYoy" ref="i18n" :headData="MonthOfYearYoY_head" :tabHeight="''"></common-tab>
            </div>
             <div v-else>
                <el-row>
                    <el-col :span="12">
                        <!-- <common-chart id="tfChart2" chartType='MultipBar' style="height: 400px" :options="thisYearTrafficTrend_barOps"></common-chart> -->
                        <mix-charts chartId="tfChart2" style="height: 400px" :chartData="thisYearTrafficTrend_barOps" chartType="Bar" />
                    </el-col>
                    <el-col :span="12">
                        <!-- <common-chart id="tfChart3" chartType='YoyLine' style="height: 400px" :options="thisYearYTrend_lineOps"></common-chart> -->
                        <mix-charts chartId="tfChart3" style="height: 400px" :chartData="thisYearYTrend_lineOps" chartType='Line' />
                    </el-col>
                </el-row>
            </div>
        </div>
        <!-- 本周工作日/双休日同环比报表 -->
        <div class="asis-table-wrapper">
            <h3 class="asis-table-header">
                <span class="asis-table-title">{{ i18nFormatter(WeekDayOrEndYoY_title) }}</span>
                <span class="asis-table-download" @click="dealExport('domWeekendOrWork', i18nFormatter(WeekDayOrEndYoY_title))">{{$t('allPages.load')}}</span>
            </h3>
            <div class="asis-table-content">
                <el-table
                    class="asis-table"
                    id="domWeekendOrWork"
                    :data="WeekDayOrEndYoY_ops"
                    header-row-class-name="asis-table-head"
                    :summary-method="getSummaries"
                    show-summary
                    v-loading="loading"
                    style="width: 100%">
                        <el-table-column :prop="item.prop" :label="item.label" align="center" v-for="item in WeekDayOrEndYoY_head" :key="item.prop">
                        </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import commonTable from '../common/tableCommon'
import commonChart from '../common/publicChart'
export default {
    props: {
        propparam: Object
    },
    data() {
        return {
            loading: true,
            Near3YearYoY_head: [],
            MonthOfYearYoY_head: [],
            WeekDayOrEndYoY_head: [],
            multipleYearOfYoY_title: '',
            Near3YearYoY_title: '',
            WeekDayOrEndYoY_title: '',
            MonthOfYearYoY_title: '',
            Near3YearYoY_ops: [],
            WeekDayOrEndYoY_ops: [],
            MonthOfYearYoY_ops: [],
            trafficFlow_barOps: {},
            tableKeyToId: {},
            tableIds: '',
            emitData: [],
            tab:{
                "firstTab": true,
                "seconTab": true,
                "thirdTab": true,
                "fourtTab": true,
            },
            thisYearTrafficTrend_barOps: {},
            thisYearYTrend_lineOps: {},
            trafficFlow_linAndBarOps: {},
            objectVal: 'simpleObj',
            multipleTable_ops: [],
            multipleTable_head:[],
            chartKeyObj:{
                'simpleObj':{
                    'Near3YearYoY': 'Near3YearYoY',
                    'MonthOfYearYoY': 'MonthOfYearYoY',
                    'WeekDayOrEndYoY': 'WeekDayOrEndYoY',
                    'trafficAndYO': 'trafficAndYO',
                    'thisYearTrafficTrend': 'thisYearTrafficTrend',
                    'thisYearYTrend': 'thisYearYTrend',
                },
                'multipleObj':{
                    'moreObjectTable': 'moreObjectTable',
                    'moreObjectBar': 'moreObjectBar',
                },
            },
            startDate: '',
            endDate: ''
        }
    },
    components: {
        'common-tab': commonTable,
        'common-chart': commonChart,
    },
    watch: {
        propparam: {
            handler: 'refreshHandle',
            immediate: true
        }
    },
    created() {
        for(var key in this.tab){
            // this.tab[key] = window._vionConfig.reportType && window._vionConfig.reportType == 'table' ? true : false;
            this.tab[key] = true;
        }
    },
    mounted() {
        // this.getTableId();
    },
    methods: {
        refreshHandle(param) {
            if(param.dateType !== '/seqasis/yearly') return;
            this.emitData = param.data;
            if(this.emitData['asis_object'] === 2){
                this.objectVal = 'multipleObj'
            }else{
                this.objectVal = 'simpleObj'
            }
            this.loading = true;
            // this.overflowBar();
            // if(this.tableIds && JSON.stringify(this.tableKeyToId) !== '{}') {
			// 	this.getTableData(this.tableIds);
			// } else {
				this.getTableId();
			// }
        },
        getTableId() {
            this.tableKeyToId = {};
                this.tableIds = '';
            this.$api.baseReport.reportChart({
                report: 'YearYoYMoM',
                // _t: Date.parse(new Date()) / 1000
            })
            .then(res => {
                let tableItem = res.data.data;
                tableItem.forEach((item, index) => {
                    this.tableKeyToId[item.key] = item.id;
                    if(this.chartKeyObj[this.objectVal].hasOwnProperty(item.key)) {
                        if(index == tableItem.length - 1) {
                            this.tableIds += item.id;
                        } else {
                            this.tableIds += item.id + ',';
                        }
                    }
                });
                this.getTableData(this.tableIds);
            })
        },
        getTableData(tableIds) {
            if(!tableIds) return;
            this.Near3YearYoY_ops = [];
            this.MonthOfYearYoY_ops = [];
            this.WeekDayOrEndYoY_ops = [];
            this.multipleTable_ops = [];
            //多对象清空
            this.trafficFlow_linAndBarOps = {};
            this.thisYearTrafficTrend_barOps = {};
            this.thisYearYTrend_lineOps = {};
            this.trafficFlow_barOps = {};
            let apiUrl = '', param = {};
            let formatTime = this.newDateFormat(this.emitData.asis_date,this.emitData.asis_time);
            this.startDate = formatTime.startTime;
            this.endDate = formatTime.endTime;
            param = {
                orgIds: this.emitData.asis_org,
                startDate: this.startDate,
                endDate: this.endDate,
                chartIds: tableIds,
                kpiType: this.emitData.asis_kpi,
            }
            let {params,asisLevel} = this.dealFormat(param,this.emitData);
            this.$api.analysisReport.yoyOrMomAnalysis(`year/${asisLevel}`, params)
            .then(res => {
                setTimeout(() => {
                    this.loading = false;
                    // this.overflowBar(true);
                }, 500);
                let report = 'YearYoYMoM'
                    , result = res.data.data
                    , colors = ["#87D14B", "#3BB8FF", "#FFC62E", "#FF9631", "#7460EE"]
                    , barColors = ['#3BB8FF', '#FFC62E', '#FF9631', '#4396ec', '#f39c38', '#4054af', '#d83965', '#e35241', '#9036aa', '#6041b0', '#4fb9d1', '#3f9488', '#97c05c', '#154bee']
                    , conf = {
                        normalXAxisLabel: true,
                        hasYaxisName: false,
                        hideDataZoom: true,
                        grid: { top: 28, right: 21, left: 50, bottom: 48 },
                        _color: barColors
                    }
                    , {
                        Near3YearYoY
                        , WeekDayOrEndYoY
                        , MonthOfYearYoY
                        , trafficAndYO
                        , thisYearTrafficTrend
                        , thisYearYTrend
                        , moreObjectTable
                        , moreObjectBar
                    } = result.body

                this.Near3YearYoY_title = report + 'Near3YearYoY'
                this.WeekDayOrEndYoY_title = report + 'WeekDayOrEndYoY'
                this.MonthOfYearYoY_title = report + 'MonthOfYearYoY'
                if (this.objectVal == 'simpleObj'){
                    if (Near3YearYoY.series) {
                        let Near3YearYoY_series = Near3YearYoY.series
                        this.Near3YearYoY_head = this.autoComplateHead(null, Near3YearYoY.xaxis.data)
                        if (Near3YearYoY_series.length) {
                            this.Near3YearYoY_ops = this.dealData(Near3YearYoY_series, this.Near3YearYoY_head)
                        }
                    }
                    if (WeekDayOrEndYoY.series) {
                        let WeekDayOrEndYoY_series = WeekDayOrEndYoY.series
                        this.WeekDayOrEndYoY_head = this.autoComplateHead(null, WeekDayOrEndYoY.xaxis.data)
                        if (WeekDayOrEndYoY_series.length) {
                            this.WeekDayOrEndYoY_ops = this.dealData(WeekDayOrEndYoY_series, this.WeekDayOrEndYoY_head)
                        }
                    }
                    if (MonthOfYearYoY.series) {
                        let MonthOfYearYoY_series = MonthOfYearYoY.series
                        this.MonthOfYearYoY_head = this.autoComplateHead(null, MonthOfYearYoY.xaxis.data)
                        if (MonthOfYearYoY_series.length) {
                            this.MonthOfYearYoY_ops = this.dealData(MonthOfYearYoY_series, this.MonthOfYearYoY_head)
                        }
                    }
                    if (trafficAndYO) {
                        //切换图表
                        // trafficAndYO.series.forEach(item => {
                        //     if (item.type == 'line') {
                        //         item.yAxisIndex = 1
                        //     }
                        // })
                        trafficAndYO['otherConf'] = {
                            grid: { top: 28, right: 40, bottom: 48, left: 60 },
                            _color: ['#3BB8FF', '#EB6100'],
                            seriesText: 'traffic',
                            yAxisName: [this.$t('format.TRAFFIC'), this.$t('echarts.percentage')]
                        }
                        this.trafficFlow_linAndBarOps = trafficAndYO
                    }
                    thisYearTrafficTrend['otherConf'] = conf
                    this.thisYearTrafficTrend_barOps = thisYearTrafficTrend
                    thisYearYTrend['color'] = colors
                    this.thisYearYTrend_lineOps = thisYearYTrend
                } else {
                    //多对象处理
                    this.multipleYearOfYoY_title = 'multipleYearOfYoY'
                    let multipleTable_series = moreObjectTable.series
                    let multipleTable = moreObjectTable.xaxis.data
                    this.multipleTable_head = this.autoComplateHead(null, multipleTable)
                    if (multipleTable_series.length) {
                        this.multipleTable_ops = this.dealData(multipleTable_series, this.multipleTable_head)
                    }
                    moreObjectBar['otherConf'] = conf
                    this.trafficFlow_barOps = moreObjectBar
                }
            })
            .catch(err => { 
                this.catchErrorHandle(err)
             })
            // this.overflowBar(true);
        },
        getSummaries (param) {
            let { columns, data } = param;
            let sums = [];
            columns.forEach((column, index) => {
                if(index == 0) {
                    sums[index] = this.$t('table.total');
                    return;
                }
                let values = data.map(item => Number(item[column.property]));
                if(!values.every(value => isNaN(value))) {
                    sums[index] = values.reduce((prev, curr) => {
                        let value = Number(curr);
                        if(!isNaN(value)) {
                            return prev + curr;
                        } else {
                            return prev;
                        }
                    }, 0);
                } else {
                    let precentVal = data.map(item => {
                        if(/\%/g.test(item[column.property])) {
                            return item[column.property].split('%')[0];
                        }
                    });
                    if(!precentVal.every(value => isNaN(value))) {
                        sums[index] = precentVal.reduce((prev, curr) => {
                            let value = Number(curr);
                            if(!isNaN(value)) {
                                if(value > 0) {
                                    return (prev - 0) + (curr - 0);
                                } else {
                                    return (prev - 0) - (-curr - 0);
                                }
                            } else {
                                return prev;
                            }
                        });
                        try {
                            sums[index] = sums[index].toFixed(2);
                        } catch (error) {
                            //
                        }
                        sums[index] += '%';
                    }
                }
            });
            return sums;
        },
        selReport(type){
            let tabPosition = type.slice(0,8);
            let tabType = type.slice(8);
            // console.log(tabPosition,tabType,this.tab[tabPosition])
            if(this.tab[tabPosition] && tabType == 'Line'){
                this.tab[tabPosition] = false;
            }else if(!this.tab[tabPosition] && tabType == 'Table'){
                this.tab[tabPosition] = true;
                if(type == 'thirdTabTable'){
                    setTimeout(() => {
                         window.scrollTo(0,document.body.scrollHeight)
                    })
                }
            }
        },
    }
}
</script>

<style scoped>
    /* @import url(./public/css/common.css); */
</style>