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: '/home'
        },
        {
          name: '运行监控',
          path: '/monitor'
        },
        {
          name: '预测管理',
          path: '/predict'
        },
        {
          name: '统计分析',
          path: '/statisticalAnalysis'
        },
        {
          name: '系统管理',
          path: '/system',
          children: [
            {
              name: '用户管理',
              path: '/user'
            },
            {
              name: '角色管理',
              path: '/role'
            },
            {
              name: '权限管理',
              icon: 'icon-caidanguanli'
            },
            {
              name: '场站管理',
              path: '/station',
              icon: 'icon-caidanguanli'
            },
            {
              name: '服务管理',
              icon: 'icon-bumenguanli'
            },
            {
              name: '策略管理',
              path: '/policy'
            },
            {
              name: '设备管理',
              icon: 'icon-rizhiguanli'
            },
            {
              name: '告警日志',
              icon: 'icon-rizhiguanli'
            },
            {
              name: '系统日志',
              icon: 'icon-rizhiguanli'
            }
          ]
        }
      ],
      subMenu: []
    }
  },
  watch: {
    $route: {
      handler(n) {
        console.log(n,"nnnnnnnnnnnnnn")
        this.subMenu =n.matched[1].children || []
      },
      immediate: true
    }
  },

  mounted() {
    this.initRoute()
  },
  methods: {
    // 过滤函数：根据权限数据过滤路由并附加权限信息
    filterRoutes(routes, permissions) {
      return routes.filter((route) => {
        let hasViewPermission = false
        // 查找当前路由对应的权限项
        const routePermissions = permissions.filter((perm) => perm.route === route.path)

        // 如果有权限项，附加到路由对象
        if (routePermissions.length > 0) {
          route.permissions = routePermissions;
          hasViewPermission = true
        }

        // 检查是否有查看权限
        // const hasViewPermission = routePermissions.some((perm) =>
        //   perm.is_view === '1'
        // );

        // 递归处理子路由
        if (route.children && route.children.length) {
          route.children = this.filterRoutes(route.children, permissions)
        }

        // 保留有权限的路由或包含有效子路由的父路由
        return hasViewPermission || (route.children && route.children.length)
      })
    },
    initRoute() {
      console.log(localStorage.getItem('user'), "localStorage.getItem('user')")
      // 执行过滤
      const filteredRoutes = this.filterRoutes(
        this.menuList,
        JSON.parse(localStorage.getItem('user'))
      )
      console.log( this.$route.matched, 'filteredRoutes')
      this.subMenu = this.$route.matched[1].children || []
      // this.menuList= JSON.parse(localStorage.getItem('user'))
      // this.subMenu =filteredRoutes[0].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) {
      console.log(subMenu, subMenu.path)
      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;
    margin: 0 35px;
  }
  .active {
    border: 1px solid $border-color;
    color: #01b3cd;
  }
}
</style>