behavior.vue

<template>
    <div class="analysis-wrapper customer-wrapper">
        <el-aside width="200px" height="100%">
            <el-menu
                class="aside-menu-wrapper"
                :default-active="activeIndex"
                background-color="#fff"
                text-color="#515a6e"
                @select="menuSelect"
                unique-opened>
                <el-submenu :index="item.path" v-for="(item,index) in behaviorMenu" :key="index" style="text-align:left" v-if="permissControl(item.path) && hasChildPermission(item.children)">
                    <template slot="title">
                        <i :class="['icon', 'font_family', 'custom-icon', `icon-${item.icon}_icon`, `${item.icon}-icon`]"></i>
                        <!-- <span @click="sumenuSelect(item.path)">{{i18n(item.name)}}</span> -->
                        <span @click="sumenuSelect(item.path)">{{langFormat(item.label,item.nodeTw,item.nodeEn)}}</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item :index="child.path" v-for="(child,index) in item.children" :key="index" 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> -->
                            <span slot="title">{{langFormat(child.label,child.nodeTw,child.nodeEn)}}</span>
                        </el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </el-aside>
        <div class="analysis-page">
            <router-view></router-view>
        </div>
    </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: 'trackLineStore',
                        iconClass: 'icon font_family icon-tftrackheat_icon custom-icon tftrackheat-icon',
                        name: 'trackLineStore',
                    },
                    {
                        path: 'moveLinetrajectory',
                        iconClass: 'icon font_family icon-tftrackheat_icon custom-icon tftrackheat-icon',
                        name: 'moveLinetrajectory',
                    },
                    {
                        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: 'trafficstat',
            //             name: 'trafficstat',
            //             iconClass: 'effectiveflow'
            //         },
            //         {
            //           path: 'customerClerkStatistics',
            //           name: 'customerClerkStatistics',
            //           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: '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: 'personnTypeStatistics',
                name: 'personnTypeStatistics',
                iconClass: 'shot',
                children: [
                    {
                        path: 'personnTypeStatistics',
                        name: 'personnTypeStatistics',
                        iconClass: 'personnTypeStatistics',
                    }
                ]
            },{
                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',
                    },
                ]
            },{
                    path: 'relations',
                    iconClass: 'ioflow',
                    name: 'Relations',
                    children: [
                        {
                            path: 'activitiesrelations',
                            iconClass: 'ioflow',
                            name: 'Activitiesrelations',
                        },
                        {
                            path: 'storerelations',
                            iconClass: 'heatmap',
                            name: 'Storerelations',
                        },
                        {
                            path: 'zonerelations',
                            iconClass: 'area_icon',
                            name: 'Zonerelations',
                        }
                    ]
                }],
            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) {
            this.navigateTo(this,'behavior',key);
            // 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;
        this.activeIndex = name;
        this.refreshSelect(name)
        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',
            'trackLineStore',
            'happinessindex',
            'zonedirection',
            'storerelations',
            'activitiesrelations',
            'zonerelations']
        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];
        }
        this.behaviorMenu = []
        let menu  = JSON.parse(window.localStorage.getItem('menu'))
        menu.children.forEach((item,index)=>{
          if(item.path=="behavior"){
            this.behaviorMenu = item.children
          }
        })
        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>
    .analysis-page {
        width: 100%;
        height: 100%;
        overflow: auto;
        min-width: 1000px;
    }
    .behavior-wrapper .custom-icon {
        font-size: 14px;
    }
</style>