weekly.vue

<template>
<div>
    <div class="weekly" v-if="objectVal == 'multipleObj'">
        <!-- 多对象同环比报表 -->
        <div class="asis-table-wrapper">
            <h3 class="asis-table-header">
                <!-- {{ DayCountingYoY_title }} -->
                <span class="asis-table-title">{{ i18nFormatter(multipleWeekOfYoY_title) }}</span>
                <span class="asis-table-download" @click="dealExport('domFeaDayCounting', i18nFormatter(multipleWeekOfYoY_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="domNearWeek" :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="weekly" v-else>
        <!-- 近3周同环比报表 -->
        <div class="asis-table-wrapper">
            <h3 class="asis-table-header">
                <span class="asis-table-title">{{ i18nFormatter(Near3WeekYoY_title) }}</span>
                <span class="asis-table-download" @click="dealExport('domNearWeek', i18nFormatter(Near3WeekYoY_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="Near3WeekYoY_ops" id="domNearWeek" :headData="Near3WeekYoY_head" :tabHeight="''"></common-tab>
            </div>
            <div v-else>
                <el-row>
                    <el-col :span="12">
                        <!-- <common-chart id="tfChart" chartType='MultipBar' style="height: 400px" :options="weekTrafficTrend_barOps"></common-chart> -->
                        <mix-charts chartId="tfChart" style="height: 400px" :chartData="weekTrafficTrend_barOps" chartType="Bar" />
                    </el-col>
                    <el-col :span="12">
                        <!-- <common-chart id="tfChart1" chartType='YoyLine' style="height: 400px" :options="weekYTrend_lineOps"></common-chart> -->
                        <mix-charts chartId="tfChart1" style="height: 400px" :chartData="weekYTrend_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(DayOfWeekYoY_title) }}</span>
                <span class="asis-table-download" @click="dealExport('domDayOfWeek', i18nFormatter(DayOfWeekYoY_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']">
                <common-tab v-loading="loading" :tableData="DayOfWeekYoY_ops" id="domDayOfWeek" ref="i18n" :headData="DayOfWeekYoY_head" :tabHeight="''"></common-tab>
            </div>
            <div v-else>
                <el-row>
                    <el-col :span="12">
                        <!-- <common-chart id="tfChart2" chartType='YoyLine' style="height: 400px" :options="thisWeekTrafficTrend"></common-chart> -->
                        <mix-charts chartId="tfChart2" style="height: 400px" :chartData="thisWeekTrafficTrend" chartType='Line' />
                    </el-col>
                    <el-col :span="12">
                        <!-- <common-chart id="tfChart3" chartType='YoyLine' style="height: 400px" :options="thisWeekYOTrend"></common-chart> -->
                        <mix-charts chartId="tfChart3" style="height: 400px" :chartData="thisWeekYOTrend" 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>
            <!-- show-summary -->
            <div class="asis-table-content">
                <el-table id="domWeekEndOrWork" class="asis-table" :data="WeekDayOrEndYoY_ops" :summary-method="getSummaries" show-summary header-row-class-name="asis-table-head" 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,
            Near3WeekYoY_head: [],
            DayOfWeekYoY_head: [],
            WeekDayOrEndYoY_head: [],
            multipleWeekOfYoY_title: '',
            Near3WeekYoY_title: '',
            DayOfWeekYoY_title: '',
            WeekDayOrEndYoY_title: '',
            Near3WeekYoY_ops: [],
            DayOfWeekYoY_ops: [],
            WeekDayOrEndYoY_ops: [],
            tableKeyToId: {},
            tableIds: '',
            emitData: [],
            tab:{
                "firstTab": true,
                "seconTab": true,
                "thirdTab": true,
                "fourtTab": true,
            },
            weekTrafficTrend_barOps: {},
            weekYTrend_lineOps: {},
            thisWeekTrafficTrend: {},
            thisWeekYOTrend: {},
            trafficFlow_barOps: [],
            objectVal: 'simpleObj',
            //多对象
            multipleTable_ops: [],
            multipleTable_head:[],
            chartKeyObj:{
                'simpleObj':{
                    'Near3WeekYoY': 'Near3WeekYoY',
                    'DayOfWeekYoY': 'DayOfWeekYoY',
                    'WeekDayOrEndYoY': 'WeekDayOrEndYoY',
                    '8WeekTrafficTrendLine': '8WeekTrafficTrendLine',
                    '8WeekYTrendLine': '8WeekYTrendLine',
                    'thisWeekTrafficTrend': 'thisWeekTrafficTrend',
                    'thisWeekYOTrend': 'thisWeekYOTrend',
                },
                '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/weekly') 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: 'WeekYoYMoM',
                // _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.Near3WeekYoY_ops = [];
            this.DayOfWeekYoY_ops = [];
            this.WeekDayOrEndYoY_ops = [];
            this.multipleTable_ops = [];
            //切换图表清空数据
            this.weekTrafficTrend_barOps = {};
            this.weekYTrend_lineOps = {};
            this.thisWeekTrafficTrend = {};
            this.thisWeekYOTrend = {};
            this.trafficFlow_barOps = {};
            let apiUrl = '', param = {}, startTime = '', endTime = '';
            let formatTime = this.newDateFormat('week',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(`week/${asisLevel}`, params)
                .then(res => {
                    setTimeout(() => {
                        this.loading = false;
                        // this.overflowBar(true);
                    }, 500);
                    let report = 'WeekYoYMoM'
                        , 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
                        }
                    this.Near3WeekYoY_title = report + 'Near3WeekYoY';
                    this.DayOfWeekYoY_title = report + 'DayOfWeekYoY';
                    this.WeekDayOrEndYoY_title = report + 'WeekDayOrEndYoY';
                    if(this.objectVal == 'simpleObj'){
                        let Near3WeekYoY_series = result.body['Near3WeekYoY'].series;
                        let DayOfWeekYoY_series = result.body['DayOfWeekYoY'].series;
                        let WeekDayOrEndYoY_series = result.body['WeekDayOrEndYoY'].series;
                        this.Near3WeekYoY_head = this.autoComplateHead(null, result.body['Near3WeekYoY'].xaxis.data);
                        this.DayOfWeekYoY_head = this.autoComplateHead(null, result.body['DayOfWeekYoY'].xaxis.data);
                        this.WeekDayOrEndYoY_head = this.autoComplateHead(null, result.body['WeekDayOrEndYoY'].xaxis.data);
                        if(Near3WeekYoY_series.length) {
                            this.Near3WeekYoY_ops = this.dealData(Near3WeekYoY_series, this.Near3WeekYoY_head);
                        }
                        if(DayOfWeekYoY_series.length) {
                            this.DayOfWeekYoY_ops = this.dealData(DayOfWeekYoY_series, this.DayOfWeekYoY_head);
                        }
                        if(WeekDayOrEndYoY_series.length) {
                            this.WeekDayOrEndYoY_ops = this.dealData(WeekDayOrEndYoY_series, this.WeekDayOrEndYoY_head);
                        }
                        //切换图表
                        result.body['8WeekTrafficTrendLine']['otherConf'] = conf
                        this.weekTrafficTrend_barOps = result.body['8WeekTrafficTrendLine']
                        result.body['8WeekYTrendLine']['color'] = colors
                        this.weekYTrend_lineOps = result.body['8WeekYTrendLine']
                        result.body['thisWeekTrafficTrend']['color'] = colors
                        this.thisWeekTrafficTrend = result.body['thisWeekTrafficTrend']
                        result.body['thisWeekYOTrend']['color'] = colors
                        this.thisWeekYOTrend = result.body['thisWeekYOTrend']
                    }else{
                        //多对象处理
                        this.multipleWeekOfYoY_title = 'multipleWeekOfYoY';
                        let multipleTable_series = result.body['moreObjectTable'].series;
                        let multipleTable = result.body['moreObjectTable'].xaxis.data;
                        this.multipleTable_head = this.autoComplateHead(null, multipleTable);
                        if(multipleTable_series.length) {
                            this.multipleTable_ops = this.dealData(multipleTable_series, this.multipleTable_head);
                        }
                        result.body['moreObjectBar']['otherConf'] = conf
                        this.trafficFlow_barOps = result.body['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>