analysis.vue

<template>
    <div class="analysis-wrapper">
        <el-container>
            <el-aside width="200px" height="100%">
                <el-menu
                   class="aside-menu-wrapper"
                   :default-active="activeIndex"
                   background-color="#414755"
                   text-color="#fff"
                   @select="menuSelect"
                   unique-opened>
                   <el-submenu :index="item.path" v-for="item in analysisMenu" :key="item.path" style="text-align:left" v-if="permissControl(item.path) && hasChildPermission(item.children)">
                       <template slot="title">
                           <i :class="['custom-icon', 'font_family', `icon-${item.iconClass}_icon`, `${item.iconClass}-icon`, `icon-${item.iconClass}`]"></i>
                           <span>{{i18n(item.name)}}</span>
                       </template>
                       <el-menu-item-group>
                           <el-menu-item :index="child.path" v-for="child in item.children" :key="child.path" v-if="permissControl(child.path)">
                                <i :class="['custom-icon', 'font_family', `icon-${child.iconClass}_icon`, `${child.iconClass}-icon`, `icon-${child.iconClass}`]"></i>
                                <span slot="title">{{i18n(child.name)}}</span>
                            </el-menu-item>
                       </el-menu-item-group>
                   </el-submenu>
                </el-menu>
            </el-aside>
            <el-container>
                <router-view></router-view>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activeIndex: '',
            moreOptVisible: false,
            analysisMenu: [{
                path:'basicanalysis',
                iconClass: 'baseasis',
                name:'BasicAnalysis',
                children: [
                    {
                        path:'baseasis',
                        iconClass: 'baseasis',
                        name:'BasicAsis', 
                    },
                    {
                        path:'timeheat',
                        iconClass: 'timeheat',
                        name:'TimeHeat',
                    },
                    {
                        path:'rankasis',
                        iconClass: 'rank',
                        name:'RankAsis',
                    },
                    {
                        path:'storerate',
                        iconClass: 'rank',
                        name:'StoreRate',
                    },
                    {
                        path:'blocarea',
                        iconClass: 'rank',
                        name:'BlocArea',
                    },
                    {
                        path:'durationTime',
                        iconClass: 'rank',
                        name:'DurationTime',
                    },
                    {
                        path: 'passengerRetention',
                        iconClass: 'rank',
                        name: 'PassengerRetention'
                    },
                    {
                        path: 'fisheyeRetention',
                        iconClass: 'rank',
                        name: 'FisheyeRetention'
                    }
                ]
            },{
                path:'contrastiveasis',
                iconClass: 'ioflow',
                name:'ContrastiveAsis',
                children: [
                    {
                        path:'ioflow',
                        iconClass: 'ioflow',
                        name:'IoFlow',
                    },
                    {
                        path:'seqasis',
                        iconClass: 'seqasis',
                        name:'SeqAnalysis',
                    },
                    {
                        path:'mainstore',
                        iconClass: 'seqasis',
                        name:'MainStore',
                    },
                    {
                        path:'weekComp',
                        iconClass: 'week',
                        name:'WeekComp',
                    },
                    {
                        path:'timecomp',
                        iconClass: 'holiday',
                        name:'Timecomp',
                    },
                ]
            },{
                path:'weatheractasis',
                iconClass: 'weatherasis',
                name:'WeatherActAsis',
                children: [
                    {
                        path:'weatherasis',
                        iconClass: 'weatherasis',
                        name:'WeatherAsis',
                    },
                    {
                        path:'holidayAsis',
                        iconClass: 'holiday',
                        name:'HolidayAct',
                    },{
                        path:'actAsis',
                        iconClass: 'actasis',
                        name:'SameHolidayAct',
                    },
                ]
            },{
                path: 'trafficheatmap',
                iconClass: 'heatmap',
                name: 'TrafficHeatMap',
                children: [
                    {
                       path: 'pointheat',
                        iconClass: 'heatmap',
                        name: 'HeatMap', 
                    },
                    {
                        path: 'trafficdensity',
                        iconClass: 'heatmap',
                        name: 'TrafficDensity',
                    },
                    {
                        path: 'floortrafficheat',
                        iconClass: 'heatmap',
                        name: 'PointHeat',
                    },{
                        path: 'floorheatmap',
                        iconClass: 'heatmap',
                        name: 'FloorHeatMap',
                    },
                ]
            },{
                path: 'trafficdirection',
                iconClass: 'ftmoveline',
                name: 'TrafficDirection',
                children: [
                    {
                        path: 'trafficeline',
                        iconClass: 'ftmoveline',
                        name: 'MoveLine',
                    }
                ]
            },
            // {
            //     path: 'returnshop',
            //     iconClass: 'icon font_family icon-ftmoveline_icon custom-icon ftmoveline-icon',
            //     name: 'ReturnShop',
            // }
            ],
            asisChidren:[],
            menuArr: [],
        }
    },
    components: {},
    methods: {
        i18n(name){
			let languageLable = 'asis.' + name
			return this.$t(languageLable)
        },
        permissControl(path) {
            if(window._vionConfig.allMenu){
				return true
            }
            if(this.menuArr.includes(path)){
                return true
            }
            else {
                return false
            }
        },
        hasChildPermission(children) {
            if(window._vionConfig.allMenu){
				return true
            }
            if (!children.length) {
                return false
            }
            let hasPermission = children.map(item => {
                return this.menuArr.includes(item.path)
            }).filter(Boolean)
            return hasPermission.length > 0
        },
        menuSelect(key, path) {
            if((window.location.href.split('/')).indexOf(key) === -1) {
                this.$router.push('/analysis/' + key);
            }
        },
        refreshSelect(path){
              this.$router.push('/analysis/' + path);
        },
        refresh(){
            let name = this.$router.history.current.name;
            let path = this.$router.history.current.path;
            let newPath = path.split('/')[2];
            let obj = {
                baseasis: 'baseasis',
                seqasis: 'seqasis',
                timeheat: 'timeheat',
                weatherasis: 'weatherasis',
                holidayAsis: 'holidayAsis',
                actAsis: 'actAsis',
                comprehen: 'comprehen',
                comtasis: 'comtasis',
                weekComp: 'weekComp',
                ioflow: 'ioflow',
                rankasis: 'rankasis',
                storerate: 'storerate',
                heatmapgate: 'heatmap',
                floorheatmap: 'floorheatmap',
                timecomp: 'timecomp',
                mainstore: 'mainstore',
                pointheat: 'pointheat',
                trafficdensity: 'trafficdensity',
                floortrafficheat: 'floortrafficheat',
                alarmlog: 'alarmlog',
                returnshop: 'returnshop',
                trafficeline: 'trafficeline',
                blocarea: 'blocarea',
                durationTime: 'durationTime',
                passengerRetention: 'passengerRetention',
                fisheyeRetention: 'fisheyeRetention'
            };
            if(obj.hasOwnProperty(newPath)){
                this.activeIndex = obj[newPath]
                this.refreshSelect(obj[newPath])
            }
        },
    },
    created() {
        if(!window._vionConfig.allMenu){
            this.menuArr = JSON.parse(window.localStorage.getItem('menuName'))
        }
    },
    mounted() {
        let firstPath,name;
        if(window._vionConfig.allMenu){
            firstPath = 'baseasis'
        }else{
            firstPath = this.menuArr[this.menuArr.indexOf('analysis') + 2]
        }
        name = this.$router.history.current.name;
        if(!name){
            this.activeIndex = firstPath;
            this.menuSelect(firstPath, [firstPath]);
        }else{
            this.refresh()
        }

    }
}
</script>

<style>
    .test-opt-time .time-opt .el-input__inner {
        height: 100% !important;
    }

    .weatherasis-icon {
        font-size: 12px !important;
    } 
</style>