trend.vue

<!-- 客流总览 -->
<template>
    <div>
        <div class="iwraper">
            <div class="ipage_top" v-show="title || levels.length">
                <div class="tit"><img v-show="icon" :src="bindIcon()" />{{ title }}</div>
                <div class="wact">
                    <div class="acts" v-if="levels && levels.length > 1">
                        <el-tabs v-model="timeLevel" @tab-click="handleTimeChange">
                            <el-tab-pane v-if="levels.includes('MONTH')" :label="$t('iPage.monthOver')" name="MONTH">
                            </el-tab-pane>
                            <el-tab-pane v-if="levels.includes('WEEK')" :label="$t('iPage.weekOver')" name="WEEK">
                            </el-tab-pane>
                            <el-tab-pane v-if="levels.includes('DAY')" :label="$t('iPage.dayOver')" name="DAY">
                            </el-tab-pane>
                            <el-tab-pane v-if="levels.includes('HOUR')" :label="$t('iPage.hourOver')" name="HOUR">
                            </el-tab-pane>
                            <el-tab-pane v-if="levels.includes('MINUTE')" :label="$t('iPage.minuteOver')" name="MINUTE">
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                    <span @click="exportBtn" class="asis-table-download">{{ $t('allPages.load') }}</span>
                </div>
            </div>
            <div class="ichart">
                <trent-chart ref="chart" chartId="trendChart" :cdata="chartData"></trent-chart>
            </div>
        </div>
        <export-data-dialog ref="exportDialog"></export-data-dialog>
    </div>
</template>

<script>
import _ from 'underscore';
import mallData from "@/components/Echarts/data";
import mixin from "./mixin";
import exportData from '../../../public/exportData'
const chartsConfig = {
    mall_weekend_effect: {
        otherConf: {
            hasBoundaryGap: true,
            doubleYaxis: true,
        },
    },
    floor_weekend_effect: {
        otherConf: {
            hasBoundaryGap: true,
            doubleYaxis: true,
        },
    },
    format_weekend_effect: {
        otherConf: {
            hasBoundaryGap: true,
            doubleYaxis: true,
        },
    },
    zone_weekend_effect: {
        otherConf: {
            hasBoundaryGap: true,
            doubleYaxis: true,
        },
    },
    zone_passenger_flow: {
        otherConf: {
            hasBoundaryGap: true
        },
    },
    passenger_flow_comparison: {
        otherConf: {
            showLineArea: false,
        },
    },
    default: {
        //默认
        otherConf: {
            //_color: ["#acc6f6", "#4BBEFF", "#87D14B", "#FFC62E", "#FF9631"],
        },
    },
};
export default {
    components:{
        'export-data-dialog':exportData
    },
    mixins: [mixin],
    data() {
        return {
            curKey: '',
            timeLevel: "",
            level: [],
            levels: [],
            configObj: {},
        };
    },
    props: {
        unit: "",
        mparam: {},
    },
    watch: {
        mparam: {
            handler(newVal) {
                this.setCurLevel(newVal.level);
                newVal && this.loadChartData();
            },
            deep: true,
        },
    },
    created() {

    },
    methods: {
        setCurLevel(level) {
            if (level) {
                this.levels = level;
            } else {
                let dateType = this.params.dateType;
                if (dateType == 'day') {
                    this.levels = ['HOUR', 'MINUTE'];
                } else if (dateType == 'month') {
                    this.levels = ['WEEK', 'DAY', 'HOUR', 'MINUTE'];
                } else if (dateType == 'year') {
                    this.levels = ['MONTH', 'WEEK', 'DAY', 'HOUR', 'MINUTE'];
                }
            }
            if (this.timeLevel) return
            if (this.levels.includes("DAY")) {
                this.timeLevel = "DAY";
            } else {
                this.timeLevel = this.levels[0] || "";
            }
        },
        getChartsConfig(params) {
            if (!this.mparam) this.setCurLevel();
            return chartsConfig;
        },
        handleTimeChange(v) {
            this.loadChartData();
        },
        loadChartData(params = this.mparam) {
            if (!this.ckey) return;
            if (this.levels && (!this.timeLevel || this.timeLevel == "0")) {
                this.timeLevel = this.levels.includes("DAY") ? 'DAY' : this.levels[0];
            }
            if (this.curKey != this.ckey) {
                this.timeLevel = this.levels.includes("DAY") ? 'DAY' : this.levels[0];
            }
            params = _.omit(Object.assign({}, this.params, params), 'level');
            this.curKey = this.ckey;
            this.chartId = this.getChartId(this.ckey);
            params.timeLevel = this.timeLevel;
            this.ajaxModuleData({ ...params}).then(
                (data) => {
                    this.setChartData(data);
                }
            );
        },
        setChartData(data) {
            this.setChartConfig();
            let addConfig = {};
            if (this.timeLevel && this.timeLevel == "MINUTE") {
                addConfig.periodTime = true;
                addConfig.nextTimeNum = 10;
            }
            this.chartData = Object.assign({}, data, {
                otherConf: {
                    ...this.configObj.otherConf,
                    ...addConfig,
                    perUnit: this.unit,
                },
            });
            console.info(this.chartData,444)
        },
        exportBtn(){
            Object.keys(this.tempParams).map(item=>{
                if(!this.tempParams[item]){
                    delete this.tempParams[item]
                }
            })
            let params = this.serializeJSON(this.tempParams);
            let exportNeed = {
                domId: "trendChart",
                title: this.chartData.title,
                data: {
                    url: `/new/report/${this.tempParams.dateType}/${this.tempParams.orgType}/body/excel`,//`/report/basics/day/${this.emitData.asis_level}/${this.tableKeyToId[chartKey]}/excel`,
                    params
                }
            };
            this.$refs.exportDialog.dialogInit(exportNeed);
        },
    },
};
</script>

<style scoped  lang="less">
.wact {
    display: flex;
    align-items: center;
}

.asis-table-download {
    float: none;
    margin-left: 20px;
}

.asis-table-download:after {
    top: 2px
}
</style>