mall.vue

<template>
    <div class="index">
        <div class="title-wrap">
            <div class="title-box">
                <span class="title">{{ reportName }}&nbsp;{{ repTime }}&nbsp;{{$t('head.title')}}</span>
                <span class="title-icon" @click="showCollapse">{{$t('head.otherRep')}} 
                  <i class="el-icon-arrow-right title-arrow"></i>
                  </span>
            </div>
            <div class="title-collapse-content" v-show="collapseVisible">
                <span v-for="(item, index) in reportData" :key="item.label" class="date-box" @click="reportHandle(item.label)">
                    <span :class="item.label === handleVal ? 'date-btn active-date' : 'date-btn'">{{ i18nFormatter(item.label) }}</span>
                </span>
                <span class="date-input-box">
                    <el-date-picker class="date-input day-piack" v-show="handleVal == 'day'" v-model="dayVal" value-format="yyyy-MM-dd" align="right" type="date" size="mini" :placeholder="$t('pholder.date')" :picker-options="pickerOptions1">
                    </el-date-picker>
                    <el-date-picker class="date-input week-piack" v-show="handleVal == 'week'" v-model="weekVal" align="right" type="week" format="yyyy 年第 WW 周" size="mini" :placeholder="$t('pholder.week')" :picker-options="weekPickerOpt">
                    </el-date-picker>
                    <el-date-picker class="date-input month-piack" v-show="handleVal == 'month'" v-model="monthVal" align="right" type="month" :format="datePickerFormatter('month')" size="mini" :placeholder="$t('pholder.month')">
                    </el-date-picker>
                    <el-date-picker class="date-input year-piack" v-show="handleVal == 'year'" v-model="yearVal" align="right" type="year" :format="datePickerFormatter('year')" size="mini" :placeholder="$t('pholder.year')">
                    </el-date-picker>
                </span>
                <!-- <div class="mall-sel-wrapper" v-if="!dateReport.isDay"> -->
                <div class="mall-sel-wrapper" v-if="false">
                    <el-select v-model="mallVal" :placeholder="$t('pholder.shopSelect')">
                        <!-- <el-option v-for="" :key=""></el-option> -->
                        <el-option label="长春绿园吾悦广场" value="testMall"></el-option>
                    </el-select>
                </div>
                <div class="right-btn">
                    <!-- <span class="simple-box" @click="simpleSwitch">{{i18nFormatter(label)}}</span> -->
                    <!-- <span class="simple-box" @click="simpleSwitch">{{ isSmpleReport ? this.$t('reportHandle.button') : this.$t('reportHandle.simpleBtn') }}</span> -->
                    <!-- <span class="refresh-box"> -->
                        <!-- <el-button type="primary" class="primary-btn collapse-btn" size="samll" @click="simpleSwitch">{{$t('button.simpleBtn')}}</el-button> -->
                        <!-- <el-checkbox v-model="isRefresh" text-color="#fff">{{$t('button.autoRefresh')}}</el-checkbox> -->
                    <!-- </span> -->
                    <span class="collapse-btn-box">
                        <el-button type="primary" class="primary-btn collapse-btn" size="samll" @click="confirmCondition">{{$t('button.confirm')}}</el-button>
                        <el-button class="reset-btn collapse-btn" size="samll" @click="resetRefresh">{{$t('button.reset')}}</el-button>
                    </span>
                </div>
            </div>
        </div>
        <router-view :orgId="orgId" :propparam="propParams" @isCreated="domComplted"></router-view>
    </div>
</template>

<script>
import Bus from '../public/eventBus'
import myChart from '../public/mapChart'
require('echarts/map/js/china.js')
export default {
    props: {
        reportName: String,
        orgId: [String, Number]
    },
    data() {
        return {
            collapseVisible: false,
            isDayReport: true,
            reportData: [{
                label: 'day',
                is_active: 'date-btn'
            }, {
                label: 'week',
                is_active: 'date-btn',
            }, {
                label: 'month',
                is_active: 'date-btn',
            }, {
                label: 'year',
                is_active: 'date-btn',
            }],
            value3: '',
            repTime: '',    // 报表时间
            dayVal: '',
            weekVal: '',  // 周时间
            monthVal: '',  // 月时间
            yearVal: '',   // 年时间
            mallVal: '',    // 广场
            pickerOptions1: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [{
                    text: this.$t('reportHandle.today'),
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: this.$t('reportHandle.yesterday'),
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: this.$t('reportHandle.lastweek'),
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },
            weekPickerOpt: {
                firstDayOfWeek: window._vionConfig.firstDayOfWeek ? window._vionConfig.firstDayOfWeek : 1
            },
            isRefresh: false,
            propParams: {},
            isSmpleReport: true,
            handleVal: 'day',
            mallName: ''
        }
    },
    components: {
        'my-chart': myChart
    },
    watch: {
        reportName(val) {
            this.init();
        },
        propParams(val) {
            if (val.dateType == '/mall') {
                this.reportHandle('day');
            } else if (val.dateType == '/mall/weekly') {
                this.reportHandle('week');
            } else if (val.dateType == '/mall/monthly') {
                this.reportHandle('month');
            } else if (val.dateType == '/mall/yearly') {
                this.reportHandle('year');
            }
        },
        dayVal(val) {
            this.sessionDate('dayDate', val);
        },
        weekVal(val) {
            this.sessionDate('weekDate', val);
        },
        monthVal(val) {
            this.sessionDate('monthDate', val);
        },
        yearVal(val) {
            this.sessionDate('yearDate', val);
        }
    },
    computed: {
        //
    },
    created() {
        let {dayDate, weekDate, monthDate , yearDate} = this.createDate();
        this.dayVal = dayDate;
        this.weekVal = weekDate;
        this.monthVal = monthDate;
        this.yearVal = yearDate;
    },
    mounted() {
        let routeHandler = {
            '/mall': 'day',
            '/mall/weekly': 'week',
            '/mall/monthly': 'month',
            '/mall/yearly': 'year'
        }
        const storageDateType = this.getSessionLocal('homeDateType') || routeHandler[this.$router.history.current.fullPath]
        this.reportHandle(storageDateType);
        this.showCollapse();
        this.init();
    },
    methods: {
        i18nFormatter(label) {
            let languageLabel = 'reportHandle.' + label;
            return this.$t(languageLabel)
        },
        init() {
            // this.reportName = this.$cookie.get('mallName')
            const storageDateType = this.getSessionLocal('homeDateType')
            let type = (storageDateType ? `/mall/${storageDateType}ly` : '') || this.$router.history.current.fullPath;
            this.repTime = $(`.${this.handleVal}-piack input`)[0].value;
            this.propParams = {
                dateType: type,
                timeVal: this[this.handleVal + 'Val']
            }
        },
        reportHandle(label) {
           this.handleVal = label
        },
        showCollapse() {
            let headerH = '', titleH = '', collapseH = '', mt = '',activePx;
            activePx = window.innerWidth <=1680 ? (window.innerWidth <=1440 ? 8 : 10) : 12;
                headerH = this.getStyleFn('.el-header', 'height');
                titleH = this.getStyleFn('.title-box', 'height');
            if ($('.title-icon').hasClass('is-active')) {
                this.collapseVisible = false;
                mt = headerH + titleH + activePx + 'px';
                try {
                    $('.daily').animate({ marginTop: mt });
                    $('.weekly').animate({ marginTop: mt });
                    $('.monthly').animate({ marginTop: mt });
                    $('.yearly').animate({ marginTop: mt });
                } catch (e) { }
                $('.title-icon').removeClass('is-active');
            } else {
                collapseH = this.getStyleFn('.title-collapse-content', 'height');
                this.collapseVisible = true;
                mt = headerH + titleH + collapseH + activePx + 'px';
                try {
                    $('.daily').animate({ marginTop: mt });
                    $('.weekly').animate({ marginTop: mt });
                    $('.monthly').animate({ marginTop: mt });
                    $('.yearly').animate({ marginTop: mt });
                } catch (e) { }
                $('.title-icon').addClass('is-active');
            }
        },
        classHandle(index) {
            let dateBtnList = document.getElementsByClassName('date-btn');
            for (let i = 0, len = dateBtnList.length; i < len; i++) {
                if (i === index) {
                    dateBtnList[i].className = 'date-btn active-date';
                } else {
                    dateBtnList[i].className = 'date-btn';
                }
            }

        },
        resetRefresh() {
            this.reportHandle('day');
            this.setSessionLocal('homeDateType', '')
            this.isRefresh = false;
            this.dayVal = dateUnit.dateFormat(new Date(), 'yyyy-MM-dd');  // 日时间
            this.weekVal = new Date();  // 周时间
            this.monthVal = new Date();  // 月时间
            this.yearVal = new Date();  // 年时间
        },
        domComplted(completed, type) {
            let _this = this,activePx;
            activePx = window.innerWidth <=1680 ? (window.innerWidth <=1440 ? 8 : 10) : 12;
            let marginT = '';
            if (completed) {
                let headerH = '', titleH = '', collapseH = '', mt = '';
                setTimeout(function() {
                    headerH = _this.getStyleFn('.el-header', 'height');
                    titleH = _this.getStyleFn('.title-box', 'height');
                    if(_this.collapseVisible) {
                        collapseH = _this.getStyleFn('.title-collapse-content', 'height');
                        if(document.documentMode) {
                            collapseH = collapseH + _this.getStyleFn('.title-collapse-content', 'paddingTop') + _this.getStyleFn('.title-collapse-content', 'paddingBottom')
                        }
                    } else {
                        collapseH = 0;
                    }
                    marginT = headerH + titleH + collapseH + activePx + 'px';
                },0);
                switch (type) {
                    case 'day':
                        setTimeout(function() {
                            $('.daily').animate({ marginTop: marginT });
                        }, 0);
                        break;
                    case 'weekly':
                        setTimeout(function() {
                            $('.weekly').animate({ marginTop: marginT });
                        }, 0);
                        break;
                    case 'monthly':
                        setTimeout(function() {
                            $('.monthly').animate({ marginTop: marginT });
                        }, 0);
                        break;
                    case 'yearly':
                        setTimeout(function() {
                            $('.yearly').animate({ marginTop: marginT });
                        }, 0);
                        break;
                    default:
                        break;
                }
            }
        },
        simpleSwitch() {
            if(this.isSmpleReport) {
                this.isSmpleReport = false;
                Bus.$emit('simpleEvent',this.isSmpleReport);
            } else {
                this.isSmpleReport = true;
                Bus.$emit('simpleEvent',this.isSmpleReport);
            }
        },
        confirmCondition() {
            this.isSmpleReport = true;
            if(this.handleVal == 'day'){
                this.setSessionLocal('homeDateType', '')
                this.$router.push('/mall');
                this.repTime = this.dayVal;
                this.propParams = {
                    dateType: '/mall',
                    timeVal: this.dayVal
                }
            }else{
                this.setSessionLocal('homeDateType', this.handleVal)
                this.$router.push(`/mall/${this.handleVal}ly`);
                this.repTime = $(`.${this.handleVal}-piack input`)[0].value
                this.propParams = {
                    dateType: `/mall/${this.handleVal}ly`,
                    timeVal: this[this.handleVal + 'Val']
                }
            }
            let headerH = '', titleH = '', collapseH = '', mt = '';
                headerH = this.getStyleFn('.el-header', 'height');
                titleH = this.getStyleFn('.title-box', 'height');
                collapseH = this.getStyleFn('.title-collapse-content', 'height');
                if(document.documentMode) {
                    collapseH = collapseH + this.getStyleFn('.title-collapse-content', 'paddingTop') + this.getStyleFn('.title-collapse-content', 'paddingBottom')
                }
                mt = headerH + titleH + collapseH + 8 + 'px';
            try {
                if (this.$refs.takeTime) {
                    $('.daily').animate({ marginTop: mt });
                    $('.weekly').animate({ marginTop: mt });
                    $('.monthly').animate({ marginTop: mt });
                    $('.yearly').animate({ marginTop: mt });
                } else {
                    setTimeout(() => {
                        $('.daily').animate({ marginTop: mt });
                        $('.weekly').animate({ marginTop: mt });
                        $('.monthly').animate({ marginTop: mt });
                        $('.yearly').animate({ marginTop: mt });
                    }, 500);
                }
            } catch (e) { }
        }
    }
}
</script>

<style scoped>
/* @import url(../public/css/collapse.css); */
@media only screen and (max-width: 1366px) {
    .date-input-box {
        position: relative;
    }
}
</style>