jn_sis_zhfx/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)"
      >
        <router-link v-if="!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: [
            // {
            //   text: "自定制报表管理",
            //   icon: "svg-自定制报表管理",
            //   path: "/others/report",
            //   children: [
            //     {
            //       text: "日报表",
            //       icon: "",
            //       path: "/others/report/gjyrbb",
            //     },
            //     {
            //       text: "风电场站自定义",
            //       icon: "",
            //       path: "/others/report/fdczzdy",
            //     },
            //     {
            //       text: "风电项目自定义",
            //       icon: "",
            //       path: "/others/report/fdxmzdy",
            //     },
            //   ],
            // },
            // {
            //   text: "统计分析",
            //   icon: "svg-统计分析",
            //   path: "/others/tjfx",
            //   children: [
            //     {
            //       text: "统计分析",
            //       icon: "svg-matrix",
            //       path: "/others/tjfx",
            //     },
            //     {
            //       text: "表底值查询",
            //       icon: "svg-matrix",
            //       path: "/others/bdzcx",
            //     },
            //   ],
            // },
            // {
            //   text: "报表管理",
            //   icon: "svg-报表管理",
            //   path: "/others/oafd",
            //   children: [
            //     {
            //       text: "OA日报",
            //       icon: "svg-matrix",
            //       path: "/others/oafd",
            //     },
            //     {
            //       text: "OA日报(光伏)",
            //       icon: "svg-matrix",
            //       path: "/others/oagf",
            //     },
            //     {
            //       text: "新能源日报",
            //       icon: "svg-matrix",
            //       path: "/others/xnyrb",
            //     },
            //     {
            //       text: "国电MIS日报(风电)",
            //       icon: "svg-matrix",
            //       path: "/others/missfdrb",
            //     },
            //     {
            //       text: "国电MIS日报(光伏)",
            //       icon: "svg-matrix",
            //       path: "/others/missgfrb",
            //     },
            //     {
            //       text: "新能源风电生产月报",
            //       icon: "svg-matrix",
            //       path: "/others/xnyfdscyb",
            //     },
            //     {
            //       text: "麻黄山生产月报",
            //       icon: "svg-matrix",
            //       path: "/others/mhsscyb",
            //     },
            //     {
            //       text: "牛首山生产月报",
            //       icon: "svg-matrix",
            //       path: "/others/nssscyb",
            //     },
            //     {
            //       text: "青山生产月报",
            //       icon: "svg-matrix",
            //       path: "/others/qsscyb",
            //     },
            //     {
            //       text: "石板泉生产月报",
            //       icon: "svg-matrix",
            //       path: "/others/sbqscyb",
            //     },
            //     {
            //       text: "香山生产月报",
            //       icon: "svg-matrix",
            //       path: "/others/xsscyb",
            //     },
            //     {
            //       text: "新能源光伏生产月报",
            //       icon: "svg-matrix",
            //       path: "/others/xnygfscyb",
            //     },
            //     {
            //       text: "大武口生产月报",
            //       icon: "svg-matrix",
            //       path: "/others/dwkscyb",
            //     },
            //     {
            //       text: "平罗生产月报",
            //       icon: "svg-matrix",
            //       path: "/others/plscyb",
            //     },
            //     {
            //       text: "宣和生产月报",
            //       icon: "svg-matrix",
            //       path: "/others/xhscyb",
            //     },
            //   ],
            // },
            // {
            //   text: "原始数据查询",
            //   icon: "svg-报表首页",
            //   path: "/others/realSearch",
            //   children: [
            //     {
            //       text: "测点数据查询",
            //       icon: "svg-wind-site",
            //       path: "/others/realSearch",
            //     },
            //     {
            //       text: "测点历史数据查询",
            //       icon: "svg-wind-site",
            //       path: "/others/historySearch",
            //     },
            // {
            //   text: "气象历史数据",
            //   icon: "svg-wind-site",
            //   path: "/others/weather",
            // },
            // {
            //   text: "数据导出",
            //   icon: "svg-wind-site",
            //   path: "/others/ExportExcel",
            // },
            // {
            //   text: "设备管理",
            //   icon: "svg-wind-site",
            //   path: "/device/device",
            // },
            //   ],
            // },
            // {
            //   text: "预警记录",
            //   icon: "svg-预警记录",
            //   path: "/others/alarmCenter/alarmcenter",
            //   children: [
            //     {
            //       text: "预警管理",
            //       icon: "svg-wind-site",
            //       path: "/others/alarmCenter/alarmcenter",
            //     },
            //     {
            //       text: "停机事件管理",
            //       icon: "svg-wind-site",
            //       path: "/others/alarmCenter/tjsj",
            //     },
            //     {
            //       text: "限电管理",
            //       icon: "svg-wind-site",
            //       path: "/others/alarmCenter/xdgl",
            //     },
            //     {
            //       text: "升压站报警",
            //       icon: "svg-wind-site",
            //       path: "/others/alarmCenter/boosterAlarm",
            //     },
            //     {
            //       text: "SCADA报警",
            //       icon: "svg-wind-site",
            //       path: "/others/alarmCenter/scadaAlarm",
            //     },
            //     {
            //       text: "自定义报警",
            //       icon: "svg-wind-site",
            //       path: "/others/alarmCenter/customAlarm",
            //     },
            //     {
            //       text: "自定义报警统计",
            //       icon: "svg-wind-site",
            //       path: "/others/alarmCenter/customStatistics",
            //     },
            //   ],
            // },
            // {
            //   text: "专家知识",
            //   icon: "svg-专家知识",
            //   path: "/others/knowledge/knowledge",
            //   children: [
            //     {
            //       text: "故障知识列表",
            //       icon: "svg-matrix",
            //       path: "/others/knowledge/knowledge",
            //     },
            //     {
            //       text: "安全措施知识",
            //       icon: "svg-matrix",
            //       path: "/others/knowledge/knowledge2",
            //     },
            //     {
            //       text: "排查检修方案",
            //       icon: "svg-matrix",
            //       path: "/others/knowledge/knowledge6",
            //     },
            //     {
            //       text: "预警知识",
            //       icon: "svg-matrix",
            //       path: "/others/knowledge/knowledge7",
            //     },
            //     {
            //       text: "特征参数",
            //       icon: "svg-matrix",
            //       path: "/others/knowledge/knowledge5",
            //     },
            // {
            //   text: "风险辨识知识",
            //   icon: "svg-matrix",
            //   path: "/others/knowledge/knowledge3",
            // },
            //     {
            //       text: "作业指导知识",
            //       icon: "svg-matrix",
            //       path: "/others/knowledge/knowledge4",
            //     },
            //   ],
            // },
            // {
            //   text: "样本库",
            //   icon: "svg-报表管理",
            //   path: "/others/fault",
            //   children: [
            //     {
            //       text: "故障训练样本库",
            //       icon: "svg-matrix",
            //       path: "/others/fault",
            //     },
            //     {
            //       text: "性能下降样本库",
            //       icon: "svg-matrix",
            //       path: "/others/performance",
            //     },
            //     {
            //       text: "预警分析样本库",
            //       icon: "svg-matrix",
            //       path: "/others/warning",
            //     },
            //     {
            //       text: "性能预警综合分析",
            //       icon: "svg-matrix",
            //       path: "/others/analysis",
            //     },
            //     // {
            //     //   text: "功率曲线综合分析",
            //     //   icon: "svg-matrix",
            //     //   path: "/others/powerline/analysis",
            //     // },
            //     {
            //       text: "知识库",
            //       icon: "svg-matrix",
            //       path: "/others/knowledgeBase",
            //     },
            //     // {
            //     //   text: "发电能力分析",
            //     //   icon: "svg-matrix",
            //     //   path: "/others/abilityAnalysis",
            //     // },
            //     // {
            //     //   text: "风电营销样本库",
            //     //   icon: "svg-matrix",
            //     //   path: "/others/market",
            //     // }
            //     {
            //       text: "风机检修规则",
            //       icon: "svg-matrix",
            //       path: "/others/overhaulRule",
            //     },
            //     {
            //       text: "故障手册",
            //       icon: "svg-matrix",
            //       path: "/others/faultManual",
            //     },
            //   ],
            // },
          ],
        },
        {
          id: "save",
          text: "安全管控",
          data: [
            {
              text: "安全管控",
              icon: "svg-安全管控",
              path: "/save/personnel",
              children: [
                {
                  text: "人员矩阵",
                  icon: "svg-wind-site",
                  path: "/save/personnel",
                },
                {
                  text: "全局监视",
                  icon: "svg-wind-site",
                  path: "/globalMonitor",
                },
              ],
            },
          ],
        },
        // {
        //   id: "znbb",
        //   text: "智能报表",
        //   data: [
        //     {
        //       text: '报表首页',
        //       icon: 'svg-wind-site',
        //       path: '/reportPandect'
        //     },
        //     // 统计分析
        //     {
        //       text: "统计分析",
        //       icon: "svg-matrix",
        //       path: "/tjfx",
        //       children: [
        //         {
        //           text: "统计分析",
        //           icon: "svg-matrix",
        //           path: "/tjfx",
        //         },
        //         {
        //           text: "表底值查询",
        //           icon: "svg-matrix",
        //           path: "/bdzcx",
        //         },
        //       ],
        //     },
        //     {
        //       text: "报表管理",
        //       icon: "svg-matrix",
        //       path: "/bdzcx",
        //       children: [
        //         {
        //           text: "OA日报",
        //           icon: "svg-matrix",
        //           path: "/oafd",
        //         },
        //         {
        //           text: "OA日报(光伏)",
        //           icon: "svg-matrix",
        //           path: "/oagf",
        //         },
        //         {
        //           text: "新能源日报",
        //           icon: "svg-matrix",
        //           path: "/xnyrb",
        //         },
        //         {
        //           text: "山西晋能MISS日报(风电)",
        //           icon: "svg-matrix",
        //           path: "/missfdrb",
        //         },
        //         {
        //           text: "山西晋能MISS日报(光伏)",
        //           icon: "svg-matrix",
        //           path: "/missgfrb",
        //         },
        //         {
        //           text: "新能源风电生产月报",
        //           icon: "svg-matrix",
        //           path: "/xnyfdscyb",
        //         },
        //         {
        //           text: "麻黄山生产月报",
        //           icon: "svg-matrix",
        //           path: "/mhsscyb",
        //         },
        //         {
        //           text: "牛首山生产月报",
        //           icon: "svg-matrix",
        //           path: "/nssscyb",
        //         },
        //         {
        //           text: "青山生产月报",
        //           icon: "svg-matrix",
        //           path: "/qsscyb",
        //         },
        //         {
        //           text: "石板泉生产月报",
        //           icon: "svg-matrix",
        //           path: "/sbqscyb",
        //         },
        //         {
        //           text: "香山生产月报",
        //           icon: "svg-matrix",
        //           path: "/xsscyb",
        //         },
        //         {
        //           text: "新能源光伏生产月报",
        //           icon: "svg-matrix",
        //           path: "/xnygfscyb",
        //         },
        //         {
        //           text: "大武口生产月报",
        //           icon: "svg-matrix",
        //           path: "/dwkscyb",
        //         },
        //         {
        //           text: "平罗生产月报",
        //           icon: "svg-matrix",
        //           path: "/plscyb",
        //         },
        //         {
        //           text: "宣和生产月报",
        //           icon: "svg-matrix",
        //           path: "/xhscyb",
        //         },
        //       ],
        //     },
        //     {
        //       text: "自定制报表管理",
        //       icon: "svg-matrix",
        //       path: "/fdczzdy",
        //       children: [
        //         {
        //           text: "风电场站自定义",
        //           icon: "svg-matrix",
        //           path: "/fdczzdy",
        //         },
        //         {
        //           text: "风电项目自定义",
        //           icon: "svg-matrix",
        //           path: "/fdxmzdy",
        //         },
        //         {
        //           text: "光伏场站自定义",
        //           icon: "svg-matrix",
        //           path: "/gfczzdy",
        //         },
        //         {
        //           text: "光伏项目自定义",
        //           icon: "svg-matrix",
        //           path: "/gfxmzdy",
        //         },
        //       ],
        //     },
        //   ],
        // },
      ],
      activeIndex: 0,
      isShowSubMenu: false,
      parentIndex: null,
      subMenu: [],
      subIndex: null,
      fixed: false,
    };
  },
  methods: {
    handleClickFixed() {
      this.fixed = !this.fixed;
      this.$store.commit("changeIsFixed", this.fixed);
    },
    fillterMenuRoutes,
    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;
    },
    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) {
                  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", false);
        } 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>