behavior.vue

<template>
    <div class="analysis-wrapper customer-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 behaviorMenu" :key="item.path" style="text-align:left" v-if="permissControl(item.path) && hasChildPermission(item.children)">
                       <template slot="title">
                           <i :class="['icon', 'font_family', 'custom-icon', `icon-${item.iconClass}_icon`, `${item.iconClass}-icon`]"></i>
                           <span @click="sumenuSelect(item.path)">{{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="['icon', 'font_family', 'custom-icon', `icon-${child.iconClass}_icon`, `${child.iconClass}-icon`]"></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>
import defaultImg from '@/assets/img/behavior/default.png'
export default {
    data() {
        return {
            activeIndex: '',
            moreOptVisible: false,
            tableData: [],
            defaultImg: defaultImg,
            currentPage: 1,
            pageArr: [10, 50, 100],
            pageSize: 10,
            totalPage: null,
            repTitle: '',
            behaviorMenu: [{
                path: 'humanface',
                iconClass: 'residencetime',
                name: 'HumanFaceAsis',
                children: [
                    {
                        path: 'customtrack',
                        iconClass: 'customtrack',
                        name: 'CustomTrack',
                    },
                    {
                        path: 'trafficdirection',
                        iconClass: 'ftmoveline',
                        name: 'TrafficDirection',
                    },
                    {
                        path: 'multitrafficdirection',
                        iconClass: 'icon font_family icon-ftmoveline_icon custom-icon ftmoveline-icon',
                        name: 'MultiTrafficDirection'
                    },
                    {
                        path: 'moveline',
                        iconClass: 'tftrackheat',
                        name: 'MoveLineAnalysis',
                    },
                    {
                        path: 'zonedirection',
                        iconClass: 'ftmoveline',
                        name: 'ZoneTrafficDirection'
                    },
                    {
                        path: 'residencetime',
                        iconClass: 'residencetime',
                        name: 'ResidenceTime',
                    },
                    {
                        path: 'happinessindex',
                        iconClass: 'residencetime',
                        name: 'HappinessIndex',
                    },
                ]
            },{
                path: 'fisheyethermal',
                iconClass: 'areaheat',
                name: 'FisheyeThermal',
                children: [
                    {
                        path: 'storeheat',
                        iconClass: 'areaheat',
                        name: 'Areaheat',
                    },
                    {
                        path: 'boothheat',
                        iconClass: 'faceheat',
                        name: 'Trackheat',
                    },
                ]
            },{
                path: 'customersasis',      
                name: 'CustomersAsis',
                iconClass: 'mallgroup',
                children: [
                    {
                        path: 'mallgroup',      
                        name: 'mallGroup',
                        iconClass: 'mallgroup',
                    },
                    {
                        path: 'grouptime',
                        name: 'groupTime',
                        iconClass: 'grouptime'
                    },
                    {
                        path: 'lossCustomer',
                        name: 'LossCustomer',
                        iconClass: 'effectiveflow'
                    }
                ]
            },{
                path: 'newoldcustomer',
                name: 'NewOldCustomer',
                iconClass: 'effectiveflow',
                children: [
                    {
                        path: 'effectiveflow',
                        name: 'effectiveflow',
                        iconClass: 'effectiveflow',
                    },
                    {
                        path: 'frequency',
                        name: 'frequency',
                        iconClass: 'effectiveflow',
                    },
                    {
                        path: 'returnshop',
                        name: 'ReturnShop',
                        iconClass: 'ftmoveline'
                    },
                    {
                        path: 'trafficstat',
                        name: 'trafficstat',
                        iconClass: 'effectiveflow'
                    },
                ]
            },{
                path: 'areacustomersasis',
                name: 'areaCustomersAsis',
                iconClass: 'gateflow',
                children: [
                    {
                        path: 'gateflow',
                        name: 'gateFlow',
                        iconClass: 'gateflow',
                    },
                    {
                        path: 'areaflowtime',
                        name: 'areaflowtime',
                        iconClass: 'gateflow'
                    },{
                        path: 'customgroup',
                        name: 'customGroup',
                        iconClass: 'grouptime'
                    },
                ]
            },{
                path: 'capturedetails',
                name: 'CaptureDetails',
                iconClass: 'shot',
                children: [
                    {
                        path: 'capturecamera',
                        name: 'capturecamera',
                        iconClass: 'shot', 
                    },
                    {
                        path: 'clerkcamera',
                        name: 'clerkcamera',    
                        iconClass: 'clerkcamera'
                    },
                ]
            },{
                path: 'reidtrafficGroup',
                name: 'ReidTraffic',
                iconClass: 'effectiveflow',
                children: [
                    {
                        path: 'reidtraffic',
                        name: 'ReidTraffic',
                        iconClass: 'effectiveflow', 
                    },
                ]
            }],
            menuArr: [],
            reidClass: true
        }
    },
    components: {
    },
    watch: {
    },
    methods: {
        i18n(name){
			let languageLable = name == 'ReturnShop' ? 'asis.' + name : 'Behavior.' + 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('/behavior/' + key);
            }
        },
        sumenuSelect(key) {
            if(key === 'reidtraffic') {
                if((window.location.href.split('/')).indexOf(key) === -1) {
                    this.$router.push('/behavior/' + key);
                }
            }
        },
        refreshSelect(path){
            this.$router.push('/behavior/' + path);
        },
        refresh(){
        let name = this.$router.history.current.matched[2].name;
        let path = this.$router.history.current.path;
        let obj = [
            'capturecamera',
            'clerkcamera',
            'mallgroup',
            'customgroup',
            'lossCustomer',
            'grouptime',
            'areagroup',
            'gateflow',
            'areaflowtime',
            'effectiveflow',
            'frequency',
            'returnshop',
            'trafficstat',
            'reidtraffic',
            'pointheat',
            'flowheat',
            'floortrafficheat',
            'floorheat',
            'trafficeline',
            'residencetime',
            'trafficdirection',
            'multitrafficdirection',
            'customtrack',
            'storeheat',
            'boothheat',
            'moveline',
            'happinessindex',
            'zonedirection',]
        if(obj.includes(name)){
            this.activeIndex = name;
            this.refreshSelect(name)
        }
        },
    },
    created() {
        if(!window._vionConfig.allMenu){
            this.menuArr = JSON.parse(window.localStorage.getItem('menuName'))
        }        
    },
    mounted() {
        let firstPath,name;
        if(window._vionConfig.allMenu){
            firstPath = 'mallgroup'
        }else{
            firstPath = this.menuArr[this.menuArr.indexOf('behavior') + 2];
        }
        name = this.$router.history.current.name;
        // let path = this.$router.history.current.path;
        if(!name){
            this.activeIndex = firstPath;
            this.menuSelect(firstPath,[firstPath])
        }else{
            this.refresh()
        }
    },
}
</script>

<style scoped>
    /* @import url('./common/css/public.css'); */
    .behavior-wrapper .custom-icon {
        font-size: 14px;
    }
</style>