performance-test/src/views/home/components/MenuHD.vue

<template>
  <div class="menuBox">
    <el-menu
      collapse-transition
      ref="menu"
      mode="horizontal"
      class="mt-3 el-menu-vertical-demo my-menu-wrapper"
      @open="handleOpen"
      @close="handleClose"
      :router="true"
      :default-active="defaultActive"
      :default-openeds="openMenus"
      background-color="#1b3b7f"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <!--     :active-text-color="activeTextColor" -->
      <template v-for="(item, indexMenu) in routerList">
        <!-- 判断是否是中间位置 -->
        <el-menu-item
          class="hdMenuTitle"
          v-if="indexMenu === Math.floor(routerList.length / 2) + 1"
        >
          <div class="titles">
            <span class="headerText">风电机组健康度诊断平台</span>
          </div>
        </el-menu-item>
        <el-submenu
          class="menuParentItem"
          :style="{
            transform:
              indexMenu < Math.floor(routerList.length / 2) + 1
                ? 'scaleX(-1)'
                : 'scaleX(1)',
          }"
          v-if="
            item.children && item.children.length && item.meta?.hidden === false
          "
          :index="item.path"
        >
          <template slot="title">
            <span
              :style="{
                transform:
                  indexMenu < Math.floor(routerList.length / 2) + 1
                    ? 'scaleX(-1)'
                    : 'scaleX(1)',
              }"
              >{{ item.name }}</span
            >
          </template>
          <el-menu-item
            v-for="child in item.children"
            v-if="child.meta?.hidden === false"
            :key="child.id"
            :index="`${child.path}?id=${child.id}`"
            @click="handleChangeMenuUrl(child, `${child.path}?id=${child.id}`)"
          >
            <span>{{ child.name }}</span>
          </el-menu-item>
        </el-submenu>
        <el-menu-item
          class="menuParentItem"
          :style="{
            transform:
              indexMenu < Math.floor(routerList.length / 2) + 1
                ? 'scaleX(-1)'
                : 'scaleX(1)',
            color: '#fff',
          }"
          v-else-if="item.meta?.hidden === false"
          :key="item.id"
          :index="`${item.path}?id=${item.id}`"
          @click="handleChangeMenuUrl(item, `${item.path}?id=${item.id}`)"
        >
          <span
            :style="{
              transform:
                indexMenu < Math.floor(routerList.length / 2) + 1
                  ? 'scaleX(-1)'
                  : 'scaleX(1)',
            }"
            >{{ item.name }}</span
          >
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { orgList } from "./mockData";
import Vue from "vue";

export default {
  data() {
    return {
      isExpanded: false, // 控制是否展开所有子菜单
      openMenus: [], // 用来存储展开的菜单
      isCollapse: true,
      orgList: orgList,
      searchInputValue: "",
      defaultActive: this.$route.fullPath,
      activeIndex: false,
      keyObject: {},
      activeTextColor: Vue.prototype.$backgroundColor,
      routerList: [
        {
          id: 1,
          path: "/home/cockpitManage",
          name: "首页",
          iconName: "gps",
          meta: {
            hidden: false,
          },
        },
      ],
    };
  },
  created() {
    this.routerList = [
      ...this.routerList,
      ...this.$store.state.auth.dynamicRouter,
    ];
  },
  computed: {
    ...mapState({
      currentMenuIndex: (state) => state.breadStore?.currentUrl?.routeUrl,
    }),
    // 获取所有父级菜单的 index
    allMenuIndexes() {
      return this.routerList.map((item) => {
        if (
          item.children &&
          item.children.length &&
          item.meta?.hidden === false
        ) {
          return item.path;
        } else {
          return `${item.path}?id=${item.id}`;
        }
      });
    },
  },
  watch: {
    currentMenuIndex: {
      deep: true,
      handler(newVale, oldVal) {
        if (newVale) {
          this.$refs.menu.close(newVale);
        }
      },
    },
    keyObject: {
      deep: true,
      handler(newVale) {
        if (newVale && newVale.key === this.defaultActive) {
          this.getBreadcrumbList(newVale.keyPath);
        }
      },
    },
  },
  methods: {
    ...mapActions("menuTag", ["addTag"]),
    // 切换展开/收起所有菜单
    toggleAllMenus() {
      this.isExpanded = !this.isExpanded;

      if (this.isExpanded) {
        // 展开所有子菜单
        this.openMenus = this.routerList
          .filter((item) => item.children && item.children.length)
          .map((item) => item.path);
      } else {
        // 收起所有子菜单
        this.openMenus = [];
      }
    },
    handleChangeMenuUrl(item, path) {
      this.defaultActive = path;
      this.$router.push(path); // 跳转到指定的路由
    },
    isElPrefix(str) {
      const regex = /^el-/;
      return regex.test(str);
    },
    getBreadcrumbList(keyPath) {
      const urls = keyPath;
      const result = urls.map((url, index) => {
        const params = new URLSearchParams(url.split("?")[1]);
        const id = params.get("id");
        const name = params.get("name");
        const routeUrl = url;
        if (index === urls.length - 1) {
          return { id, name, routeUrl, currentPage: true };
        }
        return { id, name, routeUrl };
      });
      this.$store.commit("breadStore/ADD_BREAD", result);
      return result;
    },
    handleOpen(key, keyPath) {
      this.activeIndex = false;
      this.keyObject = {
        key,
        keyPath,
      };
    },
    handleClose(key, keyPath) {
      this.activeIndex = false;
      this.keyObject = {
        key,
        keyPath,
      };
    },
    shrinkTree() {
      this.$refs.menu.close(`/orgsPage?id=${orgList.id}&name=${orgList.name}`);
    },
    handleChangeRouter() {
      this.activeIndex = true;
      this.defaultActive = "";
      this.$store.commit("breadStore/ADD_BREAD", []);
      this.$refs.menu.close(`/orgsPage?id=${orgList.id}&name=${orgList.name}`);
      this.$router.push("/");
    },
    handleChangeMenuUrl(item, key) {
      this.defaultActive = key;
      if (item) {
        item.activeIndex = true;
      }
      const tag = {
        path: key,
        name: item.name,
        label: item.name,
      };
      this.addTag(tag);
      this.$router.push({
        path: key,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep.menuParentItem .el-submenu__title,
::v-deep.menuParentItem .el-submenu__title:hover {
  background: #eff1f300 !important;
  color: #fff !important;
}
:v-deep.menuParentItem .el-submenu__title:hover {
  color: #eee !important;
}
::v-deep .menuParentItem,
::v-deep .menuParentItem:hover {
  background-image: url("../../../assets/head-tab.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100%, 100% !important;
  height: 60px !important;
  width: 140px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #eff1f300 !important;
}
::v-deep.el-menu {
  background-color: #eff1f300 !important;
}
::v-deep.hdMenuTitle,
::v-deep.hdMenuTitle:hover {
  background-color: #1b3b7f !important;
  padding: 0px !important;
}

::v-deep.titles,
::v-deep.titles:hover {
  width: 100% !important;
  background-image: url("../../../assets/headerBorder.png") !important;
  background-size: 35%, 100% !important;
  background-repeat: repeat-x !important;
  padding: 0px !important;
}
::v-deep.headerText {
  pointer-events: none;
  background-image: url("../../../assets/headerText.png") !important;
  background-size: 100% 100%;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  display: block;
  width: 100%;
  height: 45px;
  padding: 0px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

::v-deep.mt-3 {
  margin-top: 0px !important;
  //padding-left: 20px;
}
.stop-animation,
.active-animation {
  font-size: 0px;
}

.flexCenter {
  display: flex;
  align-items: center !important;
  justify-content: space-between !important;
  width: 200px;
}

.foldBox {
  position: fixed;
  bottom: 10px;
  left: 20px;
  padding: 10px;

  .icon {
    cursor: pointer;
    color: #666;
    font-size: 14px;
  }
}

::v-deep .el-submenu__title {
  display: flex;
  align-items: center;
  margin-left: 15px;
}

::v-deep .el-submenu__icon-arrow {
  right: 30px;
}

::v-deep .svnIcon {
  vertical-align: middle;
  margin-right: 5px;
  width: 24px;
  text-align: center;
  font-size: 18px;
}

::-webkit-scrollbar {
  width: 6px;
  display: none;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #aaabaa;
  cursor: pointer;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #efeff0;
}

::-webkit-scrollbar-track-piece {
  background-color: #efeff0;
  border-radius: 10px;
}

.asideBox:hover ::-webkit-scrollbar {
  display: block !important;
}

/* 当前选中项的颜色 */
.el-menu--horizontal .el-menu-item.is-active {
  color: #ffffff !important;
}
</style>

<!-- /* 华电时的菜单打开这个 */ -->
<style lang="scss">
.el-menu--popup {
  width: 100% !important;
  min-width: 120px !important;
  .el-menu-item {
    width: 100% !important;
    min-width: unset !important;
    text-align: center;
    padding: 0 5px !important;
  }
}
</style>