shanxi_power/src/views/layout/Menu.vue

<template>
  <template v-if="$store.state.menuState % 2">
    <div class="menu">
      <ul class="menu-list l1">
        <li
          class="menu-item"
          v-for="(menu, index) in currentMenu"
          :key="index"
          @click="click(index)"
          :class="{ active: activeIndex == index }"
        >
          <router-link
            :to="menu.path"
            v-if="menu?.children?.length"
            @mouseenter="subMenuShow(menu?.children, index)"
          >
            <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" v-if="menu.icon"></SvgIcon>
                <el-icon v-else-if="menu.elIcon" :size="20" style="position:relative;left:-4px">
                  <component :is="menu.elIcon"></component>
                </el-icon>
              </div>
            </el-tooltip>
          </router-link>
          <router-link :to="menu.path" v-else>
            <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" v-if="menu.icon"></SvgIcon>
                <el-icon v-else-if="menu.elIcon" :size="20" style="position:relative;left:-4px">
                  <component :is="menu.elIcon"></component>
                </el-icon>
              </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> -->
        </li>
      </ul>
    </div>
    <div class="sub-menu" v-show="isShowSubMenu" @mouseleave="subMenuHide">
      <ul class="menu-list l2">
        <li
          class="menu-item"
          v-for="(menus, indexs) in subMenu"
          @click="subclick(indexs)"
          :key="indexs"
          :class="{ active: subIndex == parentIndex + '' + indexs }"
        >
          <router-link :to="menus.path">
            <div class="menu-icon svg-icon">
              <!-- <SvgIcon :svgid="menu.icon"></SvgIcon> -->
            </div>
            <div
              class="sub-menu-text"
              :class="subIndex == activeIndex + '' + indexs ? 'green' : 'gray'"
            >
              {{ menus.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>
  <template v-else>
    <div class="menu">
      <ul class="menu-list l3">
        <li
          class="menu-item"
          v-for="(menu, index) in currentMenu"
          :key="index"
          @click="click(index)"
          :class="{ active: activeIndex == index }"
        >
          <router-link
            :to="menu.path"
            v-if="menu?.children?.length"
            @mouseenter="subMenuShow(menu?.children, index)"
          >
            <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" v-if="menu.icon"></SvgIcon>
                <el-icon v-else-if="menu.elIcon" :size="20" style="position:relative;left:-4px">
                  <component :is="menu.elIcon"></component>
                </el-icon>
              </div>
            </el-tooltip>
          </router-link>
          <router-link :to="menu.path" v-else>
            <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" v-if="menu.icon"></SvgIcon>
                <el-icon v-else-if="menu.elIcon" :size="20" style="position:relative;left:-4px">
                  <component :is="menu.elIcon"></component>
                </el-icon>
              </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> -->
        </li>
      </ul>
    </div>
    <div class="sub-menu" v-show="isShowSubMenu" @mouseleave="subMenuHide">
      <ul class="menu-list l4">
        <li
          class="menu-item"
          v-for="(menus, indexs) in subMenu"
          @click="subclick(indexs)"
          :key="indexs"
          :class="{ active: subIndex == parentIndex + '' + indexs }"
        >
          <router-link :to="menus.path">
            <div class="menu-icon svg-icon">
              <!-- <SvgIcon :svgid="menu.icon"></SvgIcon> -->
            </div>
            <div
              class="sub-menu-text"
              :class="subIndex == activeIndex + '' + indexs ? 'green' : 'gray'"
            >
              {{ menus.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>
</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: "integratedAlarm",
          text: "综合报警",
          data: [],
        },
        {
          id: "health",
          text: "智慧检修",
          data: [],
        },
        {
          id: "generatingCap",
          text: "发电能力分析",
          data: [],
        },
        {
          id: "powerPrediction",
          text: "功率预测",
          data: [],
        },
        {
          id: "sxReport",
          text: "报表管理",
          data: [],
        },
      ],
      activeIndex: 0,
      isShowSubMenu: false,
      parentIndex: -1,
      subMenu: [],
      subIndex: -1,
      fixed: true,
      reFresh: true,
      rePagePath: [
        "/economicsOperation/stationAnalyse/stationElectricAnalyse",
        "/economicsOperation/windAnalyse/singleWindAnasyle",
      ],
    };
  },
  methods: {
    handleClickFixed() {
      this.fixed = !this.fixed;
      this.$store.commit("changeIsFixed", this.fixed);
    },
    fillterMenuRoutes,
    click(index) {
      //   this.reFresh = false;
      this.activeIndex = index;
      this.subIndex = index + "" + 0;
    },
    subMenuShow(children, index) {
      this.isShowSubMenu = true;
      this.parentIndex = index;
      this.subMenu = Array.isArray(children) ? children : [];
    },
    subMenuHide() {
      this.isShowSubMenu = false;
      this.parentIndex = -1;
      this.subMenu = [];
    },
    subclick(index) {
      this.reFresh = false;
      this.activeIndex = this.parentIndex;
      this.subIndex = this.activeIndex + "" + index;
      this.isShowSubMenu = false;
    },
  },

  computed: {
    currentMenu() {
      let stateRoutes = JSON.parse(
        // JSON.stringify(this.$store.state.routes.routes)
        JSON.stringify(this.$router.options.routes)
      );

      if (stateRoutes.length) {
        let routeObj = stateRoutes.find((i) => i.path == "/" + this.currRoot);
        let currData = [];
        if (routeObj && Object.keys(routeObj).length) {
          let a = JSON.parse(JSON.stringify(routeObj));
          if (a?.children?.length) {
            a.children.forEach((path) => {
              if (!path.hidden) {
                if (path.showChild != true && path?.children?.length) {
                  currData.push({
                    text: path.meta.title,
                    icon: path.meta.icon || "",
                    elIcon: path.meta.elIcon || "",
                    fullPath: path.path,
                    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 if (cputh.path == "decision1Mx") {
                      caputh = "";
                    } else {
                      caputh = cputh.path;
                    }
                    if (caputh.length) {
                      cu["children"].push({
                        text: cputh.meta.title,
                        icon: path.meta.icon || "",
                        elIcon: path.meta.elIcon || "",
                        path: `/${this.currRoot}/${path.path}/${caputh}`,
                        children: [],
                      });
                    }
                  });
                  cu.path = cu.children[0].path;
                } else {
                  currData.push({
                    text: path.meta.title,
                    icon: path.meta.icon || "",
                    elIcon: path.meta.elIcon || "",
                    fullPath: path.path,
                    path: `/${this.currRoot}/${path.path}`,
                    children: [],
                  });
                }
              }
            });
            this.$store.commit("changeMenuData", currData);
            return currData;
          } else {
            this.$store.commit("changeMenuData", []);
            return [];
          }
        } else {
          this.$store.commit("changeMenuData", []);
          return [];
        }
      } else {
        this.$store.commit("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) {
        // if (this.reFresh) {
        this.menuData.some((element, index) => {
          if (val.path.includes(element.id)) {
            this.$nextTick(() => {
              this.currRoot = element.id;
              this.$nextTick(() => {

                this.currentMenu.forEach((element, index) => {
                  if (val.path.includes(element.fullPath)) {
                    this.activeIndex = index;
                    element.children &&
                      element.children.forEach((i, inx) => {
                        if (val.path == i.path) {
                          this.subIndex = index + "" + inx;
                        }
                      });
                    return true;
                  }
                });
              });
            });
            return true;
          }
        });
        if (val.path.includes("/home")) {
          this.currRoot = "home";
          this.activeIndex = 0;
          return;
        }
        // }
        // this.reFresh = true;
        const someRes = this.rePagePath.some((path) => {
          return path === val.path;
        });
        if (someRes) {
          this.$nextTick(() => {
            this.$store.commit("changeMenuState");
          });
        } else {
          this.$store.commit("changeMenuState");
        }
      },
      //深度观察监听
      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>