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

56<template>
  <el-menu
    collapse-transition
    ref="menu"
    mode="horizontal"
    class="mt-3 el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    :active-text-color="activeTextColor"
    :router="true"
    :default-active="defaultActive"
    :default-openeds="openMenus"

  >
    <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>
</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: #fff !important;

}


</style>