energy_storage/web/src/views/MainView.vue

<template>
  <div class="main">
    <div class="header"></div>

    <div class="page">
      <div class="subMenu" v-if="subMenu.length > 0">
        <div
          class="subItem"
          v-for="subItem in subMenu"
          :key="subItem.name"
          @click="subMenuClick(subItem)"
          :class="subCurrentKey == subItem.path ? 'active' : ''"
        >
          {{ subItem.title }}
        </div>
      </div>
      <div :class="[subMenu.length > 0 ? 'subcontent' : 'content']">
         <router-view />
      </div>
     
    </div>
    <div class="menu">
      <div
        v-for="menu in menuList"
        :key="menu.name"
        class="menu-item"
        @click="menuClick(menu)"
        :class="currentKey == menu.path ? 'active' : ''"
      >
        <i :class="menu.icon"></i>
        {{ menu.name }}
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'MainView',
  components: {},
  data() {
    return {
      currentKey: '',
      subCurrentKey: '',
      menuList: [
        {
          name: '系统总览',
          path: '/main/',
          icon: 'icon-xitongguanli'
        },
        {
          name: '运行监控',
          path: '/main/monitor'
        },
        {
          name: '统计分析',
          path: '/main/statisticalAnalysis'
        },
        {
          name: '系统管理',
          path: '/system',
          children: [
            {
              name: '用户管理',
              path: '/user'
            },
            {
              name: '角色管理',
              path: '/role'
            },
            {
              name: '权限管理',
              icon: 'icon-caidanguanli'
            },
            {
              name: '场站管理',
              icon: 'icon-caidanguanli'
            },
            {
              name: '服务管理',
              icon: 'icon-bumenguanli'
            },
            {
              name: '策略管理',
              path: '/policy'
            },
            {
              name: '设备管理',
              icon: 'icon-rizhiguanli'
            },
            {
              name: '告警日志',
              icon: 'icon-rizhiguanli'
            },
            {
              name: '系统日志',
              icon: 'icon-rizhiguanli'
            }
          ]
        }
      ],
      subMenu: []
    }
  },
  mounted() {
    this.initRoute()
  },
  methods: {
    initRoute() {
      console.log(this.$route,this.$router)
      this.subMenu = this.$route.matched[1].children || []

      this.currentKey = '/' + this.$route.fullPath.split('/')[1]
      this.subCurrentKey = this.$route.fullPath.split('/')[2]
      console.log(this.subCurrentKey)
    },
    menuClick(menu) {
      this.currentKey = menu.path
      this.subMenu = menu.children || []
      this.$router.push(menu.path)
    },
    subMenuClick(subMenu) {
      this.subCurrentKey = subMenu.path
      this.$router.push(subMenu.path)
    }
  }
}
</script>
<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  background-image: url('@/assets/images/mainBg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.header {
  width: 100%;
  height: 70px;
}
.subMenu {
  display: flex;
  color: #fff;
  margin-left: 10px;
  padding-bottom: 20px;
  .subItem {
    width: 96px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background: #132347;

    border: 1px solid #2169c3;
    border-radius: 8px;
    margin-right: 15px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }
  .active {
    background: #27a188;
  }
}
.page {
  width: calc(100% - 20px);
  height: calc(100% - 70px - 65px - 40px);
  margin: 20px 10px;
  border-radius: 20px;
}
.content{
  height: 100%;
}
.subcontent{
  height: calc(100% - 46px);
}
.menu {
  position: absolute;
  width: 100%;
  bottom: 15px;
  // height: 150px;
  display: flex;
  justify-content: center;
  .menu-item {
    width: 120px;
    height: 47px;
    line-height: 47px;
    text-align: center;
    border-radius: 20px;
    background: #04608e;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
  }
  .active {
    border: 1px solid $border-color;
    color: #01b3cd;
  }
}
</style>