sis_zhfx/src/views/layout/Menu.vue

<template>
  <div class="menu">
    <ul class="menu-list">
      <li class="menu-item" v-for="(menu, index) of currentMenu" :key="menu" @click="click(index)" :class="{ active: activeIndex == index }" @mouseenter="subMenuShow(menu.children, index)">
        <router-link v-if="!menu.children" :to="{ path: menu.path, query: { root: currRoot } }">
          <el-tooltip class="item" effect="dark" :content="menu.text" placement="right" :show-after="500">
            <div class="menu-icon svg-icon" :class="activeIndex == index ? 'svg-icon-green' : 'svg-icon-gray'">
              <SvgIcon :svgid="menu.icon"></SvgIcon>
            </div>
          </el-tooltip>
        </router-link>
        <div v-if="menu.children" class="sub-menu-item">
          <div class="menu-icon svg-icon" :class="activeIndex == index ? 'svg-icon-green' : 'svg-icon-gray'">
            <SvgIcon :svgid="menu.icon"></SvgIcon>
          </div>
        </div>
      </li>
    </ul>
  </div>
  <div class="sub-menu" v-show="isShowSubMenu">
    <ul class="menu-list">
      <li class="menu-item" v-for="(menu, index) of subMenu" @click="subclick(index)" :key="menu" :class="{ active: subIndex == index }">
        <router-link :to="{ path: menu.path, query: { root: currRoot } }">
          <div class="menu-icon svg-icon">
            <SvgIcon :svgid="menu.icon"></SvgIcon>
          </div>
          <div class="sub-menu-text" :class="subIndex == index ? 'green' : 'gray'">{{ menu.text }}</div>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
import SvgIcon from "@com/coms/icon/svg-icon.vue";
export default {
  components: {
    SvgIcon,
  },
  props: {
    root: { type: String, default: "monitor" },
  },
  data() {
    return {
      currRoot: "monitor",
      menuData: [
        {
          id: "monitor",
          text: "状态监视",
          data: [
            {
              text: "驾驶舱",
              icon: "svg-lead-cockpit",
              path: "/",
            },
            {
              text: "基础矩阵",
              icon: "svg-matrix",
              path: "/lightmatrix1",
            },
            {
              text: "风场明细矩阵",
              icon: "svg-mx-matrix",
              path: "/lightmatrix2",
            },
            {
              text: "欠发矩阵",
              icon: "svg-qf-matrix",
              path: "/lightmatrix3",
            },
            {
              text: "光伏明细矩阵",
              icon: "svg-gf-matrix",
              path: "/lightmatrix",
            },
            {
              text: "状态监视",
              icon: "svg-state-watch",
              path: "/status",
            },
            {
              text: "Agc",
              icon: "svg-agc",
              path: "/agc",
            },
          ],
        },
        {
          id: "datacenter",
          text: "数据管理",
          data: [],
        },
        {
          id: "statistic",
          text: "统计分析",
          data: [],
        },
        {
          id: "health",
          text: "健康管理",
          data: [
            {
              text: "健康管理1",
              icon: "svg-wind-site",
              path: "/health1",
            },
            {
              text: "健康管理2",
              icon: "svg-wind-site",
              path: "/health2",
            },
            {
              text: "健康管理3",
              icon: "svg-wind-site",
              path: "/health3",
            },
            {
              text: "健康管理4",
              icon: "svg-wind-site",
              path: "/health4",
            },
            {
              text: "健康管理5",
              icon: "svg-wind-site",
              path: "/health5",
            },
            {
              text: "健康管理6",
              icon: "svg-wind-site",
              path: "/health6",
            },
            {
              text: "健康管理7",
              icon: "svg-wind-site",
              path: "/health7",
            },
          ],
        },
        {
          id: "decision",
          text: "决策支持",
          data: [
            {
              text: "决策支持1",
              icon: "svg-matrix",
              path: "/decision1",
            },
            // {
            //   text: "决策支持2",
            //   icon: "svg-matrix",
            //   path: "/decision2",
            // },
            // {
            //   text: "决策支持3",
            //   icon: "svg-matrix",
            //   path: "/decision3",
            // },
            // {
            //   text: "决策支持4",
            //   icon: "svg-matrix",
            //   path: "/decision4",
            // },
          ],
        },
        {
          id: "knowledge",
          text: "知识管理",
          data: [],
        },
        {
          id: "report",
          text: "智能报表",
          data: [],
        },
      ],
      activeIndex: 0,
      isShowSubMenu: false,
      parentIndex: null,
      subMenu: [],
      subIndex: null,
    };
  },
  methods: {
    click(index) {
      this.activeIndex = index;
      this.subIndex = null;
    },
    subMenuShow(children, index) {
      if (children) {
        this.isShowSubMenu = true;
        this.parentIndex = index;
      } else {
        this.isShowSubMenu = false;
        this.parentIndex = null;
      }
      this.subMenu = children;
    },
    subclick(index) {
      this.activeIndex = this.parentIndex;
      this.subIndex = index;
    },
  },
  computed: {
    currentMenu() {
      let data = this.menuData.filter((t) => {
        return t.id == this.currRoot;
      })[0].data;

      return data;
    },
  },
  watch: {
    // 监听路由
    $route: {
      handler: function(val, oldVal) {
        if (val.query.root) this.currRoot = val.query.root;

        this.currentMenu.some((element, index) => {
          if (element.path == val.path) {
            this.activeIndex = index;
            return true;
          }
        });
      },
      //深度观察监听
      deep: true,
    },
    root: {
      handler: function(val, oldVal) {
        this.currRoot = val;
      },
    },
    currentMenu: {
      handler: function(val, oldVal) {
        if (val && val.length > 0) {
          // 基于 root 和 currRoot 为一致
          // 进行页面刷新
          // 防止 刷新页面也同步执行切换页面逻辑
          if (this.root == this.currRoot) {
            this.activeIndex = 0;
            this.$router.push({
              path: val[0].path,
              query: { root: this.currRoot },
            });
          }
        }
      },
    },
  },
};
</script>

<style lang="less">
.menu {
  padding-top: 1.481vh;

  .menu-list {
    margin: 0;
    padding: 0;
    list-style: none;

    .menu-item {
      padding: 1.481vh 0;
      text-align: center;

      .menu-icon {
        display: flex;
        justify-content: center;
      }

      &.active i {
        color: #05bb4c;
        transition: color 1s;
      }
    }
  }

  i {
    font-size: 2.222vh;
    color: rgba(255, 255, 255, 50%);
  }
}

.sub-menu {
  position: absolute;
  top: 0;
  left: 5.3704vh;
  width: 138px;
  height: 100%;
  padding-top: 1.481vh;
  background: fade(#192a26, 75);
  border-right: 1px solid fade(@green, 50);
  box-shadow: inset 11px 0px 20px 0px fade(#021412, 60);

  .menu-list {
    margin: 0;
    padding: 0;
    list-style: none;

    .menu-item {
      display: flex;
      text-align: center;
      line-height: 1.5;
      padding: 8px 0;
      background: #121d1c;

      a {
        display: flex;
        width: 100%;
        height: 100%;
        padding: 0 1.4815vh;
        font-size: @fontsize-s;
        text-decoration: unset;

        .menu-icon {
          display: flex;
          align-items: center;
          svg {
            width: 14px;
            height: 14px;
            use {
              fill: fade(@green, 75);
            }
          }
        }
      }

      &.active {
        background: #323e70;

        .menu-icon {
          display: flex;
          svg use {
            fill: fade(@white, 75);
          }
        }
      }

      .sub-menu-text {
        margin-left: 1.1111vh;
        color: @gray-l;
      }

      & + .menu-item {
        border-top: 1px solid fade(@darkgray, 40);
      }
    }
  }

  i {
    font-size: 2.222vh;
    color: rgba(255, 255, 255, 50%);
  }
}
</style>