comtContrast.vue

<template>
    <div class="comt-contrast">
        <div class="comt-chart-wrapper">
            <span class="ehcarts-title">{{ i18nFormatter(kpiLoopTitle) }}</span>
            <div class="pie-chart-content">
                <comtcontrast-chart id="overallChart" :options="kpiLoop_ops" class="kpiLoop-wrapper" chartType="ComtPie"></comtcontrast-chart>
                <span class="download-text" @click="exportDataHandle('overallChart',i18nFormatter(kpiLoopTitle),'kpiLoop')">{{$t('allPages.load')}}</span>
            </div>
        </div>
        <div class="comt-chart-wrapper" v-if="isMallOrFloor">
            <span class="ehcarts-title">{{ i18nFormatter(kpiRadarTitle) }}</span>
            <div class="radar-chart-content">
                <!-- 两时段维度对比 -->
                <comtcontrast-chart id="dimenChart" :options="kpiRadar_ops" class="dimen-wrapper" chartType="Radar"></comtcontrast-chart>
                <span class="download-text" @click="exportDataHandle('dimenChart',i18nFormatter(kpiRadarTitle),'kpiRadar')">{{$t('allPages.load')}}</span>
            </div>
        </div>
        <export-data-dialog ref="exportDialog"></export-data-dialog>
    </div>
</template>

<script>
import exportData from '../../public/exportData'
import publicChart from '../common/publicChart'
export default {
    props: {
        propparam: Object
    },
    data() {
        return {
            kpiLoop_ops: {},
            kpiRadar_ops: {},
            isMallOrFloor: true,
            kpiLoopTitle: '',
            kpiRadarTitle: '',
            tableKeyToId: {},
            tableIds: '',
            startTime: '',
            startTime1: '',
            endTime: '',
            endTime1: '',
            apiUrl: '',
        }
    },
    components: {
        'comtcontrast-chart': publicChart,
        'export-data-dialog': exportData,
    },
    watch: {
        // propparam(data) {
        //     this.refreshHandle(data);
        // }
        propparam: {
            handler: 'refreshHandle',
            immediate: true
        }
    },
    mounted() {
        // this.getTableId();
        // this.refreshHandle(this.propparam);
    },
    methods: {
        refreshHandle(param) {
            if (param.dateType !== '/comtasis/contrast') return;
            this.emitData = param.data;
            // this.getChart();
            if (this.tableIds && JSON.stringify(this.tableKeyToId) !== '{}') {
                this.getChartData(this.tableIds);
            } else {
                this.getChartId();
            }
        },
        getChartId() {
            this.tableKeyToId = {};
            this.tableIds = '';
            this.$api.baseReport.reportChart({
                report: 'DateCompared',
                // _t: Date.parse(new Date()) / 1000
            })
                .then(res => {
                    let tableItem = res.data.data;
                    tableItem.forEach((item, index) => {
                        this.tableKeyToId[item.key] = item.id;
                        if (item.key === 'kpiLoop' || item.key === 'kpiRadar') {
                            if (index == tableItem.length - 1) {
                                this.tableIds += item.id;
                            } else {
                                this.tableIds += item.id + ',';
                            }
                        }
                    });
                    this.getChartData(this.tableIds);
                })
        },
        getChartData(tableIds) {
            if (!tableIds) return;
            this.kpiLoop_ops = {};
            this.kpiRadar_ops = {};
            if (this.emitData.asis_level === 'mall' || this.emitData.asis_level === 'zone') {
                this.isMallOrFloor = true;
            } else {
                this.isMallOrFloor = false;
            }
            let param = {};
            if (!this.emitData.asis_time) {
                this.startTime = this.dayReduce(new Date(), 15);
                this.endTime = dateUnit.dateFormat(new Date(), 'yyyy-MM-dd');
                this.startTime1 = this.dayReduce(new Date(), 30);
                this.endTime1 = this.dayReduce(new Date(), 15);
            } else {
                // this.startTime = '2018-05-18';
                this.startTime = this.emitData.asis_time[0][0];
                // this.endTime = '2018-05-27';
                this.endTime = this.emitData.asis_time[0][1];
                // this.startTime1 = '2018-05-28';
                this.startTime1 = this.emitData.asis_time[1][0];
                // this.endTime1 = '2018-06-07';
                this.endTime1 = this.emitData.asis_time[1][1];
            }
            if (this.emitData.asis_level === 'format') {
                // this.apiUrl = '/report/dateCompared/mall';
                this.emitData.asis_level = 'mall';
                param = {
                    orgIds: this.emitData.asis_org,
                    startDate: this.startTime,
                    endDate: this.endTime,
                    startDate1: this.startTime1,
                    endDate1: this.endTime1,
                    chartIds: tableIds,
                    formatIds: this.emitData.asis_format,
                    // _t: Date.parse(new Date()) / 1000
                }
            } else {
                // this.apiUrl = '/report/dateCompared/' + this.emitData.asis_level;
                param = {
                    orgIds: this.emitData.asis_org,
                    startDate: this.startTime,
                    endDate: this.endTime,
                    startDate1: this.startTime1,
                    endDate1: this.endTime1,
                    chartIds: tableIds,
                    // _t: Date.parse(new Date()) / 1000
                }
            }
            this.apiUrl = '/report/dateCompared/' + this.emitData.asis_level;
            this.$api.analysisReport.dateComparedAnalysis(this.emitData.asis_level, param)
                .then(res => {
                    let report = 'DateCompared';
                    // this.kpiLoopTitle = res.data.data.body.kpiLoop.title;
                    this.kpiLoopTitle = report + 'kpiLoop';
                    this.kpiLoop_ops = res.data.data.body.kpiLoop;
                    // this.kpiRadarTitle = res.data.data.body.kpiRadar.title;
                    this.kpiRadarTitle = report + 'kpiRadar';
                    this.kpiRadar_ops = res.data.data.body.kpiRadar;
                })
                .catch(err => {
                    this.catchErrorHandle(err)
                })
        },
        // getChart() {
        //     this.dimen_ops = {
        //         xaxis: {
        //             data: ['游逛深度', '客单价指数', '滞留时间', '成交量指数', '销售额指数', '客流指数']
        //         },
        //         title: '两时段维度对比',
        //         series: [{
        //             name: '时间1',
        //             data: [4300, 10000, 28000, 35000, 50000, 19000]
        //         }, {
        //             name: '时间2',
        //             data: [5000, 14000, 28000, 31000, 42000, 21000]
        //         }]
        //     }
        // }
        exportDataHandle(domId, title, chartKey) {
            // 
            let chartId = this.tableKeyToId[chartKey];
            let exportNeed = {
                domId: domId,
                title: title,
                data: {
                    url: window._vionConfig.apiUrl + this.apiUrl + '/' + chartId + '/excel',
                    params: 'orgIds=' + this.emitData.asis_org + '&startDate=' + this.startTime + '&endDate=' + this.endTime + '&startDate1=' + this.startTime1 + '&endDate1=' + this.endTime1
                }
            }
            // console.log('comtcontrast exportNeed', exportNeed)
            this.$refs.exportDialog.dialogInit(exportNeed);
        },
    }
}
</script>


<style scoped>
.comt-contrast {
    width: 100%;
}

.comt-chart-wrapper {
    background: #fff;
    margin-bottom: 12px;
    position: relative;
}

.comt-chart-wrapper:last-child {
    margin-bottom: 39px;
}

/* .pie-chart-content {
    height: 437px;
} */

.kpiLoop-wrapper {
    height: 437px;
}

/* .radar-chart-content {
    height: 666px;
} */

.dimen-wrapper {
    height: 666px;
}

.ehcarts-title {
    z-index: 1;
}
    @media only screen and (max-width: 1680px) {
        .pick-connect {
            line-height: 20px;
        }
        .kpiLoop-wrapper {
            height: 280px;
        }
        .dimen-wrapper {
            height: 430px;
        }
    }

    @media only screen and (max-width: 1440px) {
        .pick-connect {
            line-height: 20px;
        }
        .kpiLoop-wrapper {
            height: 280px;
        }
        .dimen-wrapper {
            height: 430px;
        }
    }

    @media only screen and (max-width: 1366px) {
        .pick-connect {
            line-height: 20px;
        }
        .kpiLoop-wrapper {
            height: 280px;
        }
        .dimen-wrapper {
            height: 430px;
        }
    }

    @media only screen and (max-width: 1280px) {
        .pick-connect {
            line-height: 20px;
        }
        .kpiLoop-wrapper {
            height: 280px;
        }
        .dimen-wrapper {
            height: 430px;
        }
    }
</style>