energy_storage/web/src/views/MainView.vue

<template>
  <div class="main">
    <div class="header">
      <span class="time">
        <span class="text" style="margin-right: 15px"> {{ dateVal }} </span>
        <span class="text" style="width: 80px;">{{ currentTime  }}</span>
        <span class="text">{{ weekVal }}</span>
      </span>

      <span class="title text"> 能源站监控与运行管理系统 </span>
      <span class="user">
        <span style="margin-right: 15px"> {{ user }}</span>
        <span class="iconfont icon-tuichu" @click="logout"></span>
      </span>
    </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
import moment from 'moment'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { createVNode } from 'vue'
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: '设备管理',
              path: '/device '
            },
            {
              name: '告警日志',
              path: '/alarmlog'
            },
            {
              name: '系统日志',
              path: '/syslog'
            }
          ]
        }
      ],
      subMenu: [],
      currentTime: '',
      timer: null,
      dateVal: moment().locale('zh-cn').format('ll') + ' ',
      weekVal: moment().locale('zh-cn').format('dddd'),
      user:localStorage.getItem('account').replace(/^"|"$/g, '')
    }
  },
  watch: {
    $route: {
      handler(n) {
        console.log(n, 'nnnnnnnnnnnnnn')
        this.subMenu = n.matched[1].children || []
      },
      immediate: true
    }
  },

  mounted() {
    this.initRoute()
    this.getDateTime()
    this.timer = setInterval(() => {
      this.getDateTime()
    }, 1000)
  },
  unmounted() {
    clearInterval(this.timer)
  },
  methods: {
    logout(){
      const that=this
      this.$Modal.confirm({
        title: '你确认退出系统吗?',
        icon: createVNode(ExclamationCircleOutlined),

        async onOk() {
          localStorage.clear()
          that.$router.push('/login')
        },
        onCancel() {
        },
        class: 'test'
      })
      
    },
    //getDateTime
    getDateTime() {
      this.currentTime = moment().locale('zh-cn').format('LTS')
    },
    // 过滤函数：根据权限数据过滤路由并附加权限信息
    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('permission'), "localStorage.getItem('permission')")
      // 执行过滤
      // const filteredRoutes = this.filterRoutes(
      //   this.menuList,
      //   JSON.parse(localStorage.getItem('permission'))
      // )
      console.log(this.$route.matched, 'filteredRoutes')
      this.subMenu = this.$route.matched[1].children || []
      // this.menuList= JSON.parse(localStorage.getItem('permission'))
      // 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('/system' + 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;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  .text {
    background: linear-gradient(
      180deg,
      rgb(255, 255, 255) 0%,
      rgb(227, 254, 255) 33.17%,
      rgb(35 190 195) 100%
    );
    
    -webkit-background-clip: text; /* 兼容 WebKit 浏览器 */
    background-clip: text;
    color: transparent; /* 必须设置为透明 */
    display: inline-block; /* 确保背景裁剪生效 */
    line-height: 80px;
    font-size: 18px;
  }
  .title{
    font-size: 40px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 10px;

  }
  .user{
    font-weight: 700;
    font-size: 18px;
    .icon-tuichu{
      cursor: pointer;
    }

  }
  .time{
    font-weight: 700;
  }
}
.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 - 60px - 40px);
  margin: 20px 10px;
  border-radius: 20px;
}
.content {
  height: 100%;
}
.subcontent {
  height: calc(100% - 56px);
}
.menu {
  position: absolute;
  width: 100%;
  bottom: 10px;
  height: 50px;
  // 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;
    border: 1px solid #ffffff00;
    cursor: pointer;
    margin: 0 35px;
  }
  .active {
    border: 1px solid $border-color;
    color: #01b3cd;
  }
}
</style>