storerateasis.vue 5.12 KB
<template>
    <div class="seq-analysis">
        <el-header height="70px">
            <span class="asis-title">{{ asisName }}&nbsp;{{$t('asis.StoreRate')}}</span>
            <span class="more-option-wrapper" @click="showCollapse">
                <span class="more-option-text">{{$t('asis.moreOp')}}</span>
                <i :class="moreOptVisible ? 'el-icon-arrow-down more-option-arrow' : 'el-icon-arrow-down more-option-arrow more-option-up'"></i>
            </span>
        </el-header>
        <sr-option v-show="moreOptVisible" ref="init" @reportTime="reportHandler" @initData="initTab" @childByValue="childByValue"></sr-option>
        <div class="element-main sr-main">
            <router-view :propparam="propParams"></router-view>
        </div>
    </div> 
</template>

<script>
import srOption from '../common/option/srMoreOption'
import { resolve } from 'q';
export default {
    data() {
        return {
            moreOptVisible: false,
            asisName: '',
            // kpiType: '',    // 指标
            // asisLevel: '',
            // emitData: [],
            propParams: {}
        }
    },
    components: {
        'sr-option': srOption,
    },
    created() {
        window.addEventListener('resize', () => {
            try {
                let timeHeatEChartsUtil = {
                    chart1: $('#storeRatio')[0],
                }
                for(let k in timeHeatEChartsUtil) {
                    if(timeHeatEChartsUtil.hasOwnProperty(k) && timeHeatEChartsUtil[k] != undefined) {
                        timeHeatEChartsUtil[k] = this.$echarts.init(timeHeatEChartsUtil[k]);
                        var element = timeHeatEChartsUtil[k];
                        element.resize();
                    }
                }
            } catch (err) { }
        })
    },
    mounted() {
        this.getMall();
        this.showCollapse()
    },
    methods: {
        childByValue(childValue) {
            this.animate('.sr-main')
        },
        showCollapse() {
            // 获取上面元素的高度
            let headerH = '', titleH = '', collapseH = '', mt = '';
                headerH = this.getStyleFn('.el-header', 'height');
                titleH = this.getStyleFn('.analysis-wrapper .el-header', 'height');
            if(this.moreOptVisible) {
                this.moreOptVisible = false;
                mt = headerH + titleH + 8 + 'px';
                $('.sr-main').animate({ marginTop: mt })
            } else {
                this.moreOptVisible = true;
                setTimeout(() => {
                    collapseH = this.getStyleFn('.analysis-option-wrapper', 'height');
                    mt = headerH + titleH + collapseH + 8 + 'px';
                    $('.sr-main').animate({ marginTop: mt });
                }, 100);
            }
        },
        getGatesFilterMall(mallStatus) {
            let params = {
                accountId: this.$cookie.get('accountId'),
                status: 1,
                type: 2,
            };
            this.gateFilterMall(mallStatus,params).then(resolveData => {
                let {mallData,localMallId,titleName,multiMallId} = resolveData;
                let refMallId = {
                    'mallId': localMallId,
                    'multiMallId': multiMallId
                }
                this.$refs.init.initAsis(refMallId,mallData);
            })
        },
        getMall() {
            this.$api.base.mall({
                accountId: this.$cookie.get('accountId'),
                status: 1,
            }).then(res => {
                let mallList = res.data.data,mallStatus = [];
                mallList.forEach(item => {
                    mallStatus.push(item.id)
                })
                this.getGatesFilterMall(mallStatus);
            })
        },
        initTab(data) {
            this.asisName = data.asis_tit
            // this.emitData = data;
            // setTimeout(() => {
            //     this.$refs.takeTime.refreshHandle(data);
            // }, 1000);
            // this.$refs.takeTime.refreshHandle(data);
            // switch (data.asis_date) {
            //     case 'month'
                    this.$router.push('/analysis/storerate/storeratio')
                    this.propParams = {
                        dateType: '/storerate/storeratio',
                        data: data
                    };
                //     break;
                // default:
                //     break;
            // }
        },
        reportHandler(emitData) {
            this.asisName = emitData.asis_tit;
            // switch (emitData.asis_date) {
            //     case 'month':
                    this.$router.push('/analysis/storerate/storeratio')
                    this.propParams = {
                        dateType: '/storerate/storeratio',
                        data: emitData
                    };
            //         break;
            //     default:
            //         break;
            // }
            // setTimeout(() => {
            //     this.$refs.takeTime.refreshHandle(emitData);
            // }, 200);
        }
    },
}
</script>

<style scoped>
    .seq-analysis {
        width: 100%;
    }
</style>