zhgdyun/src/views/projectThree/index.vue

<template>
  <div class="projectMain">
    <div class="flex projectMainItem">
      <div class="menu">
        <div class="menu_top">
          <div class="menu_left" @click="toCurrent(index,item.moduleId)" v-for="(item, index) in menuData" :key="index" >
          <!-- <img v-if="iconType == true" style="width:56px;height:56px;" :src="require('../../assets/images/menu/' + item.moduleIcon + '.png')"
              class="icon" />
          <img v-else style="width:56px;height:56px;" :src="require('../../assets/images/menu/' + item.moduleIcon2 + '.png')" class="icon" /> -->
          <img v-if="item.moduleId == menuId" style="width:56px;height:56px;" :src="require('../../assets/images/menu/' + item.moduleIcon2 + '.png')"
              class="icon" />
          <img v-else style="width:56px;height:56px;" :src="require('../../assets/images/menu/' + item.moduleIcon + '.png')" class="icon" />
          <div  slot="title" class="leftTitle">{{ item.moduleName }}</div>
        </div>
        </div>
        <div class="menu_horn">
        </div>
      </div>
      <div style="width: 100%; height: 100%">
        <div class="head flex between">
          <span class="title">工地监管服务平台</span>
          <div class="headRig">
            <!-- <span>项目看板</span> -->
            <span @click="toBack()">退出</span>
          </div>
        </div>
        <div class="main">
          <div class="menutwo" v-for="(item,index) in menuTwo" @click="menuTwoData(item)">
          {{item.menuName}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      clickIndex: '',//侧边栏点击的索引
      userInfo: "", //返回的信息
      menuData: [],
      menuTwo: [],
      menuId:'',
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
    this.userInfo = this.$store.state.userInfo;
    this.menuData = this.userInfo.menuAuthority.moduleList;
    this.menuId = this.menuData[1].moduleId
    this.menuData = this.menuData.filter((item) => {
      return item.labelName == '衢州版'
    })
  },
  methods: {
    // 退出
    toBack(){
      window.open("/index.html#/projectList", "_self");
    },
    toCurrent(val,id) {
      localStorage.setItem('menuId',id)
      this.menuId=id;
      this.clickIndex == val
      this.menuTwo = this.menuData[val].menuList
      console.log('二级路由内容', this.menuTwo)
      // this.menuTwo.forEach((item) => {
      //   if (id == item.moduleId){
      //     console.log('itemitem',item)
      //     let url = item.menuList[0].path
      //   }
      //   this.$route.push(url)
      // })
    },
    // 点击实现跳转
    handleSelect(val) {
      console.log('当前点击的值', val)
      this.menuTwo.forEach((item) => {
        if (val == item.moduleId)
          this.$router.push({ path: item.path })
      })
    },
    // 二级路由点击
    menuTwoData(val){
      console.log('二级当前行信息',val)
      if(val.menuList == '' ){
        this.$router.push(val.path);
      }
    }
  },

};
</script>
<style lang="less" scoped>
.flex {
  display: flex;
  align-items: center;
}
.between{
  justify-content: space-between;
}
.projectMainItem {
  width: 100%;
  height: 100%;
}
.head {
  line-height: 74px;
  height: 74px;
  border-top-left-radius: 32px;
  background: #fff;
  position: relative;
  z-index: 2;
  box-shadow: -6px 10px 5px -10px rgba(56, 54, 54, 0.4);
  //  border-bottom: 1px solid #eee;
  .title {
    font-size:26px;
    margin-left: 60px;
  }
  .headRig {
    span {
      margin-right: 40px;
      font-size: 16px;
      cursor: pointer;
    }
  }
}
.menu {
  width: 108px;
  height: 100%;
  background: #2a60cd;
  border-top-left-radius: 32px;
  border-bottom-left-radius: 32px;
  position: relative;
  .menu_horn {
    background: #2a60cd;
    width: 60px;
    height: 60px;
    position: absolute;
    left: 100px;
    top: 0;
    z-index: 1;
    .icon{
      width:56px;
      height:56px;
    }
  }
  .menu_top{
    margin-top:120px;
  }
}
.menu_left{
    text-align:center;
    height:120px;
  }
 .leftTitle{
   color:white;
   text-align:center;
   height:120px;
   line-height:-25px;
 }
.projectMain {
  width: 100%;
  height: 100%;

  .main {
    height: calc(100% - 74px);
    background-image: url('../../assets/images/quzhou/quzhou.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}
.menutwo{
  display:inline-block;
  width:200px;
  height:50px;
  line-height:50px;
  text-align:center;
  background-color:pink;
  margin-right:10px;
  border-radius:5%;
}
</style>