左侧侧边栏导航

<template>
  <el-col :span="24" class="main">
    <!--左侧导航-->
    <aside :class="{showSidebar:!collapsed}">
      <!--展开折叠开关-->
      <div class="menu-toggle" @click.prevent="collapse">
        <i class="iconfont icon-shouqi" v-show="!collapsed" title="收起"  style="font-size: 18px;"></i>
        <i class="iconfont icon-zhankai" v-show="collapsed" title="展开"  style="font-size: 20px;"></i>
      </div>
      <!--导航菜单-->
      <el-menu :default-active="cur_path" router :collapse="collapsed" ref="leftNavigation"  :unique-opened=true>
            <!-- <el-submenu :index="item.path"  v-for="(item,index) in navarr" :key="index">  
          		<template slot="title">
						<i :class="item.iconCls" style="color:#fff;font-size: 20px;margin-right: 5px;"></i>
						<span>{{item.name}}</span>
					</template>
						<el-menu-item-group  v-for="(item2,index) in item.children"  :key="index">
							<el-menu-item :index="item2.path" >
								<i :class="item2.iconCls" style="color:#fff;font-size: 23px;margin-right: 8px;"></i>
								{{item2.name}}
							</el-menu-item>

							
						</el-menu-item-group>
				
             </el-submenu> -->


                <el-submenu :index="item.root_id"  v-for="(item,index) in navarr" :key="index">  
          		<template slot="title">
						<i :class="item.root_icon" style="color:#fff;font-size: 20px;margin-right: 5px;"></i>
						<span>{{item.root_name}}</span>
					</template>
						<el-menu-item-group  v-for="(item2,index) in item.subItem"  :key="index">
							<el-menu-item :index="'/'+item2.root_url" >
								<i :class="item2.root_icon" style="color:#fff;font-size: 23px;margin-right: 8px;"></i>
								{{item2.root_name}}
							</el-menu-item>

							
						</el-menu-item-group>
				
             </el-submenu  >
                







     
      </el-menu>
    </aside>
    <!--右侧内容区-->
    <section class="content-container">
      <div class="grid-content bg-purple-light">
        <el-col :span="24" class="content-wrapper">
          <transition name="fade" mode="out-in">
            <router-view></router-view>
          </transition>
        </el-col>
      </div>
    </section>
  </el-col>
</template>
<script>
  export default {
    name: 'leftNav',
    data () {
      return {
        collapsed: false,
        navarr:[],cur_path:'/Basic_statistics',
      }
    },
    methods: {
      //折叠导航栏
      collapse: function () {
        this.collapsed = !this.collapsed;
      },
      // 左侧导航栏根据当前路径默认打开子菜单（如果当前路由是三级，则父级子菜单默认打开）
      defaultLeftNavOpened () {
        let cur_path = this.$route.path; //获取当前路由
        let routers = this.$router.options.routes; // 获取路由对象
        
        let subMenuIndex = 0, needOpenSubmenu = false;
        for (let i = 0; i < routers.length; i++) {
          let children = routers[i].children;
          if(children){
            for (let j = 0; j < children.length; j++) {
              if (children[j].path === '/disiji') {
                break;
              }
              // 如果该菜单下有子菜单(个数>1且设置的leaf为false才有下拉子菜单)
              if(children[j].children && !children[j].leaf) {
                let grandChildren = children[j].children;
                for(let z=0; z<grandChildren.length; z++) {
                  if(grandChildren[z].path === cur_path) {
                    subMenuIndex = j;
                    needOpenSubmenu = true;
                    break;
                  }
                }
              }
            }
          }
        }
        if(this.$refs['leftNavigation'] && needOpenSubmenu) {
          this.$refs['leftNavigation'].open(subMenuIndex); // 打开子菜单
        }
      },
      // 判断是不是进入离线页面
      isnavarr () {
          let  that=this
        let cur_path = this.$route.path; //获取当前路由
        let routers = this.$router.options.routes; // 获取路由对象
        
        let subMenuIndex = 0, needOpenSubmenu = false;
        for (let i = 0; i < routers.length; i++) {
          if (routers[i].path === '/disiji') {
                 that.navarr=routers[i].children
              }
        }
      
      },
    }, 
    created(){
       
      
    },
    mounted() {
      this.navarr=[]
      let path_arr=[]
      let path_arr1=[]  
      var arr=this.$router.options.routes[6].children
        
         this.cur_path = this.$route.path; //获取当前路由
      this.collapsed=false
         var data = JSON.parse(localStorage.getItem("Menus"));  
         
         

        //  for (let i = 0; i < Menus[4].subItem.length; i++) {
        //     if (Menus[4].subItem[i].subItem.length>0) {
        //         for (let j = 0; j < Menus[4].subItem[i].subItem.length; j++) {
        //             path_arr.push('/'+Menus[4].subItem[i].subItem[j].root_url)
        //         }
        //     }
             
        //  }
         
        //   for (let i = 0; i < arr.length; i++) {
        //       for (let j = 0; j < arr[i].children.length; j++) {
        //            path_arr1.push(arr[i].children[j].path)
        //            if ( path_arr.indexOf(arr[i].children[j].path)<0) {
                       
        //           arr[i].children.splice(j,1)
        //            }
                  
        //       }
              
        //   }

          var Menus;
         var data = JSON.parse(localStorage.getItem("Menus"));  
            
        for (const k in data) {
           if (data[k].root_id=='05') {
               
             Menus  =data[k].subItem
             this.navarr=Menus   
           }
        }

                
    }
  }
</script>