fd_dwgz_zhyw_nx/src/views/layout/Menu.vue

<template>
  <div class="menu" v-if="currentMenu.length">
    <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, menu.showChild)"
      >
        <router-link v-if="!menu.showChild || !menu.children" :to="menu.path">
          <el-tooltip
            class="item"
            effect="dark"
            :content="menu.text"
            placement="bottom"
            :show-after="500"
            :enterable="false"
            hide-after="10"
          >
            <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>
        <el-tooltip
          v-else
          class="item"
          effect="dark"
          :content="menu.text"
          placement="bottom"
          :show-after="500"
          :enterable="false"
          hide-after="10"
        >
          <div
            class="menu-icon svg-icon"
            :class="activeIndex == index ? 'svg-icon-green' : 'svg-icon-gray'"
          >
            <SvgIcon :svgid="menu.icon"></SvgIcon>
          </div>
        </el-tooltip>
        <!-- <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"
    @mouseleave="subMenuHide"
    v-if="$store.state.themeName === 'dark'"
  >
    <ul class="menu-list">
      <li
        v-show="!menu.path.includes('decision1Mx')"
        class="menu-item"
        v-for="(menu, index) of subMenu"
        @click="subclick(index)"
        :key="menu"
        :class="{ active: subIndex == index }"
      >
        <router-link :to="menu.path">
          <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>
  <div
    class="icon-fixed svg-icon"
    :class="fixed ? 'svg-icon-green' : 'svg-icon-gray'"
    @click="handleClickFixed"
  >
    <SvgIcon svgid="svg-unfixed" v-if="fixed == false"></SvgIcon>
    <SvgIcon svgid="svg-fixed" v-if="fixed == true"></SvgIcon>
  </div>
</template>
<script>
import SvgIcon from "@com/coms/icon/svg-icon.vue";
import { fillterMenuRoutes } from "@/utills/handleRoutes.js";
export default {
  components: {
    SvgIcon,
  },
  props: {},
  data() {
    return {
      currRoot: "home",
      menuData: [
        {
          id: "stateMonitor",
          text: "全景监视",
          data: [],
        },
        {
          id: "economicsOperation",
          text: "经济运行",
          data: [],
        },
        {
          id: "health",
          text: "智慧检修",
          data: [],
        },
        {
          id: "others",
          text: "智能报表",
          data: [],
        },
      ],
      activeIndex: 0,
      isShowSubMenu: false,
      parentIndex: null,
      subMenu: [],
      subIndex: null,
      fixed: true,
    };
  },
  methods: {
    handleClickFixed() {
      this.fixed = !this.fixed;
      this.$store.commit("changeIsFixed", this.fixed);
    },
    fillterMenuRoutes,
    click(index) {
      this.activeIndex = index;
      this.subIndex = null;
    },
    subMenuShow(children, index, flag) {
      if (flag != undefined && !flag) {
        this.isShowSubMenu = false;
        this.parentIndex = index;
        this.subMenu = children;
      } else {
        if (children) {
          this.isShowSubMenu = true;
          this.parentIndex = index;
        } else {
          this.isShowSubMenu = false;
          this.parentIndex = null;
        }
        this.subMenu = children;
      }
    },
    subMenuHide() {
      this.isShowSubMenu = false;
      this.parentIndex = null;
      // this.subMenu = [];
    },
    subclick(index) {
      this.activeIndex = this.parentIndex;
      this.subIndex = index;
    },
  },

  computed: {
    currentMenu() {
      let stateRoutes = this.$store.state.routes.routes;

      if (stateRoutes.length) {
        let routeObj = this.$store.state.routes.routes.find(
          (i) => i.path == "/" + this.currRoot
        );
        let currData = [];
        if (Object.keys(routeObj).length) {
          let a = JSON.parse(JSON.stringify(routeObj));
          if (a.children) {
            a.children.forEach((path) => {
              if (!path.hidden) {
                if (path.children) {
                  if (path.showChild) {
                    currData.push({
                      text: path.meta.title,
                      icon: path.meta.icon,
                      path: `/${this.currRoot}/${path.path}`,
                      children: [],
                      showChild: false,
                    });
                  } else {
                    currData.push({
                      text: path.meta.title,
                      icon: path.meta.icon,
                      path: `/${this.currRoot}/${path.path}`,
                      children: [],
                    });
                  }

                  let cu = currData.find((i) => i.text == path.meta.title);
                  path.children.forEach((cputh) => {
                    let caputh = "";
                    if (cputh.path.includes(":")) {
                      caputh = `${cputh.path.substring(
                        0,
                        cputh.path.indexOf("/:")
                      )}/SXJ_KGDL_GJY_FDC_STA/SXJ_KGDL_GJY_F_WT_0001_EQ`;
                    } else {
                      caputh = cputh.path;
                    }
                    cu["children"].push({
                      text: cputh.meta.title,
                      icon: cputh.meta.icon,
                      path: `/${this.currRoot}/${path.path}/${caputh}`,
                    });
                  });
                  cu.path = cu.children[0].path;
                } else {
                  currData.push({
                    text: path.meta.title,
                    icon: path.meta.icon,
                    path: `/${this.currRoot}/${path.path}`,
                  });
                }
              }
            });

            this.$store.dispatch("changeMenuData", currData);
            return currData;
          } else {
            this.$store.dispatch("changeMenuData", []);
            return [];
          }
        } else {
          this.$store.dispatch("changeMenuData", []);
          return [];
        }
      } else {
        this.$store.dispatch("changeMenuData", []);
        return [];
      }
    },
    isFixed() {
      return JSON.parse(localStorage.getItem("isFixed"));
    },
  },
  watch: {
    isFixed: {
      handler(val) {
        if (!val) {
          this.$store.commit("changeIsFixed", true);
        } else {
          this.fixed = val;
        }
      },
      immediate: true,
    },
    // 监听路由
    $route: {
      handler: function (val, oldVal) {
        this.menuData.some((element, index) => {
          if (val.path.includes(element.id)) {
            this.$nextTick(() => {
              this.currRoot = element.id;
              this.$nextTick(() => {
                this.currentMenu.some((element, index) => {
                  if (val.path == element.path) {
                    this.activeIndex = index;
                  }
                });
              });
            });
            return true;
          } else {
            this.currRoot = "home";
            this.activeIndex = 0;
          }
        });
      },
      //深度观察监听
      deep: true,
    },
  },
};
</script>

<style lang="less">
.menu {
  padding-top: 20px;
  z-index: 3001;

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

    .menu-item {
      padding: 20px 0;
      text-align: center;

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

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

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

.sub-menu {
  position: absolute;
  top: 0;
  left: 50px;
  width: 184px;
  height: 100%;
  padding-top: 10px;
  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 10px;
        font-size: 14px;
        text-decoration: unset;
        white-space: nowrap;
        .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: 10px;
        color: @gray-l;
      }

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

  i {
    font-size: 2.222vh;
    color: rgba(255, 255, 255, 50%);
  }
}
.icon-fixed {
  padding-bottom: 20px;
}
</style>