zhgdyun/src/components/layoutQu.vue

<template>
  <div class="maxBox">
    <div class=" flex topfirst">
    <div class="title">工地监管服务平台</div>
      <div class="tabs flex">
        <el-tabs
        v-model="activeName"
        v-for="(item, index) in menuData"
        :key="index"
        @tab-click="handleClick(index, item.moduleId)"
      >
        <el-tab-pane
          class="el-tab-pane"
          :label="item.moduleName"
          :name="item.moduleId"
        >
        </el-tab-pane>
      </el-tabs>
      </div>
      
      <div class="bigScreen">
        <img style="width:15px;height:15px; margin-right:5px;" src='@/assets/images/menu/screenicon.png' class="icon" /> 
        <span style="margin-right:30px;">控制面板</span>
        <img style="width:15px;height:15px; margin-right:5px;" src='@/assets/images/menu/closeicon.png' class="icon" /> 
        <span @click="toBack()">退出</span>
      </div>
    </div>
    <div class="flex">
      <div class="left">
        <!-- :default-active="menuTwo[0].path" -->
        <el-menu
          
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          @select="selectEvent"
          :route="true"
        >
          <div v-for="(item, index) in menuTwo" :key="index">
          <!-- 没有三级菜单的 -->
            <el-menu-item v-if="item.menuList == ''" :index="item.path">
              <!-- <i class="el-icon-menu"></i> -->
              <!-- @/assets/images/icon-bigData.png -->
              <img style="width:20px;height:20px;margin-right:10px;" :src="require('@/assets/images/menu/' + item.icon + '.png')" class="icon" /> 
              <span slot="title">{{ item.menuName }}</span> 
            </el-menu-item>
            <el-submenu v-else :index="item.menuId">
              <template slot="title">
                <!-- <i class="el-icon-location"></i> -->
                <img style="width:20px;height:20px; margin-right:10px;" :src="require('@/assets/images/menu/' + item.icon + '.png')" class="icon" /> 
                <span>{{ item.menuName }}</span>
              </template>
              <div v-if="menuTwo[index].menuList != ''">
                <div v-for="(item, index) in menuTwo[index].menuList">
                  <el-menu-item v-if="item.menuList == ''" :index="item.menuId">
                    <!-- <i class="el-icon-menu"></i> -->
                    <span slot="title">{{ item.menuName }}</span>
                  </el-menu-item>
                  <el-submenu v-else :index="item.menuId">
                    <template slot="title">{{ item.menuName }}</template>
                    <div v-if="item.menuList != ''">
                    <!-- <img style="width:20px;height:20px; margin-right:10px;" :src="require('@/assets/images/menu/' + item.icon + '.png')" class="icon" />  -->
                      <el-menu-item
                        v-for="(item2, index) in item.menuList"
                        :key="index"
                        :index="item2.menuId"
                        >{{ item2.menuName }}</el-menu-item
                      >
                    </div>
                  </el-submenu>
                </div>
              </div>
            </el-submenu>
          </div>
        </el-menu>
      </div>
      <div class="right">
        <router-view></router-view>
        <!-- <div>
            <img class="noData" src='../../assets/images/menu/noData.png' />
            <p class="pnoData">暂无数据</p>
        </div> -->
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: "1544872925246009346",
      userInfo: "", //返回的信息
      menuData: [], //第一级
      menuTwo: [], //第二级
      menuThree: [], //第三级
      menuId: "",
      noChildren: false,
    };
  },
  created() {
    this.userInfo = this.$store.state.userInfo;
    this.menuData = this.userInfo.menuAuthority.moduleList;
    // this.$router.push({path:this.menuData[1].modulePath})
    console.log('menuData',this.menuData)
    this.menuId = this.menuData[1].moduleId;
    this.menuData = this.menuData.filter((item) => {
      return item.labelName == "衢州版";
    });
  },
  methods: {
    // 退出
    toBack(){
    //   window.open("/index.html#/projectList", "_self");
      this.$router.path({path:'/projectList'})
      localStorage.setItem('model','defaultModel')
    },
    handleClick(val, id) {
      console.log(val, id);
      localStorage.setItem("menuId", id);
      this.menuId = id;
      this.clickIndex == val;
      this.menuTwo = this.menuData[val].menuList;
      console.log("二级路由内容", this.menuTwo);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    selectEvent(index,val){
        console.log('index',index)
        console.log('val',val)
        if(index == val.menuId){
            // this.$router.push({ path: val.path })
        }
    }
  },
};
</script>
<style lang="less" scoped>
.maxBox {
  background-color: rgb(245, 245, 245);
}
.title{
    flex:1;
    display:inline-block;
    font-size:24px;
    margin-right:50px;
    margin-left:50px;
    height: 100px;
    line-height:100px;
    margin-bottom:17px;
}
.tabs{
    flex:8;
}
.bigScreen{
    flex:1;
    margin-right:100px;
}
.topfirst {
  height: 100px;
  width: 100%;
  display:inline-block;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 6px 11px 0px rgba(0, 0, 0, 0.15);
  border-radius:10px;
  margin-bottom: 20px;
}
.flex {
  display: flex;
  align-items: center;
  .left {
    margin-right: 10px;
    flex: 1;
    height: 900px;
    overflow: auto;
    background-color:rgb(255, 255, 255);
    border-radius:10px;
  }
  .right {
    margin-right: 10px;
    flex: 7;
    height: 900px;
    background-color:rgb(255, 255, 255);
    border-radius:10px;
    .noData{
        width:300px;
        height:200px;
    }
    .pnoData{
        color:rgb(38, 95, 246);
    }
  }
}
::v-deep .el-tabs__item {
  font-size: 18px;
//   color:rgb(146, 146, 146);
  margin-right: 40px;
}
::v-deep .el-tabs__nav-wrap::after {
  width: 0px;
  background-color: rgb(38, 95, 246);
}
::v-deep .el-menu-item.is-active {
    color: white;
    font-size:18px;
    border-radius:20px;
    margin-left:20px;
    background-color:rgb(57, 109, 247);
}
::v-deep .el-menu-item__title{
    font-size:18px;
}
// ::v-deep .el-menu--horizontal > .el-menu-item {
//      border-right: none; 
//      text-decoration: none; 
// }
</style>