hb_sis_zhfx/src/views/layout/Menu.vue

<template>
  <div class="menu">
    <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 :to="menu.path">
          <el-tooltip class="item" effect="dark" :content="menu.text" placement="bottom" :show-after="500">
            <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>
        <!-- <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">
    <ul class="menu-list">
      <li 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>
</template>
<script>
import SvgIcon from "@com/coms/icon/svg-icon.vue";
export default {
  components: {
    SvgIcon,
  },
  props: {},
  data () {
    return {
      currRoot: "monitor",
      menuData: [
        {
          id: "monitor",
          text: "状态监视",
          data: [
            {
              text: "驾驶舱",
              icon: "svg-lead-cockpit",
              path: "/monitor/home",
            },
            {
              text: "基础矩阵",
              icon: "svg-matrix",
              path: "/monitor/lightmatrix1",
            },
            {
              text: "明细矩阵",
              icon: "svg-mx-matrix",
              path: "/monitor/lightmatrix3",
            },
            {
              text: "欠发矩阵",
              icon: "svg-qf-matrix",
              path: "/monitor/lightmatrix2",
            },
            {
              text: "光伏矩阵",
              icon: "svg-gf-matrix",
              path: "/monitor/lightmatrix",
            },
            {
              text: "状态监视",
              icon: "svg-state-watch",
              path: "/monitor/status",
            },
            {
              text: "Agc",
              icon: "svg-agc",
              path: "/monitor/agc",
            },
            {
              text: "风场",
              icon: "svg-wind-site",
              path: "/monitor/windsite/home/MHS_FDC",
            },
          ],
        },
        {
          id: "realSearch",
          text: "数据管理",
          data: [
            {
              text: "原始数据查询",
              icon: "svg-wind-site",
              path: "/yssjcx",
              children: [
                {
                  text: "测点数据查询",
                  icon: "svg-wind-site",
                  path: "/realSearch",
                },
                {
                  text: "测点历史数据查询",
                  icon: "svg-wind-site",
                  path: "/historySearch",
                },
              ],
            },
            {
              text: "预警记录",
              icon: "svg-wind-site",
              path: "/new",
              children: [
                {
                  text: "预警管理",
                  icon: "svg-wind-site",
                  path: "/new/alarmcenter",
                },

                {
                  text: "停机事件管理",
                  icon: "svg-wind-site",
                  path: "/new/tjsj",
                },
                {
                  text: "限电管理",
                  icon: "svg-wind-site",
                  path: "/new/xdgl",
                },
                {
                  text: "升压站报警",
                  icon: "svg-wind-site",
                  path: "/alarmCenter/boosterAlarm",
                },
                {
                  text: "SCADA报警",
                  icon: "svg-wind-site",
                  path: "/alarmCenter/scadaAlarm",
                },
                {
                  text: "自定义报警",
                  icon: "svg-wind-site",
                  path: "/alarmCenter/customAlarm",
                },
                {
                  text: "自定义报警统计",
                  icon: "svg-wind-site",
                  path: "/alarmCenter/customStatistics",
                },
              ],
            },
          ],
        },
        {
          id: "performanceAnalysis",
          text: "统计分析",
          data: [
            {
              text: "能效分析",
              icon: "svg-wind-site",
              path: "/nxfx",
              children: [
                {
                  text: "功率曲线拟合",
                  icon: "svg-wind-site",
                  path: "/powerCurve",
                },
                {
                  text: "偏航对风分析",
                  icon: "svg-wind-site",
                  path: "/nxfx2",
                },
                {
                  text: "切入切出分析",
                  icon: "svg-wind-site",
                  path: "/cutAnalyse",
                },
                {
                  text: "曲线偏差率分析",
                  icon: "svg-wind-site",
                  path: "/qxpclfx",
                },
                {
                  text: "单机性能分析",
                  icon: "svg-wind-site",
                  path: "/performanceAnalysis",
                },
                {
                  text: "单机月度分析",
                  icon: "svg-wind-site",
                  path: "/singleAnalysis",
                },
                {
                  text: "单机饱和度",
                  icon: "svg-wind-site",
                  path: "/wtSaturability",
                },
              ],
            },
            {
              text: "可靠性分析",
              icon: "svg-wind-site",
              path: "/kxkfx",
              children: [
                                {
                  text: "预警分析",
                  icon: "svg-wind-site",
                  path: "/new/alarmcenter1",
                },
                {
                  text: "故障分析",
                  icon: "svg-wind-site",
                  path: "/new/alarmcenter2",
                },
                {
                  text: "预警评判分析",
                  icon: "svg-wind-site",
                  path: "/warnStatistics",
                },
                {
                  text: "故障评判分析",
                  icon: "svg-wind-site",
                  path: "/malfunctionStatistics",
                }
              ],
            },
            {
              text: "风光资源分析",
              icon: "svg-wind-site",
              path: "/fgzyfx",
              children: [
                {
                  text: "风资源散点",
                  icon: "svg-wind-site",
                  path: "/windAnalysis",
                }, {
                  text: "风资源风向",
                  icon: "svg-wind-site",
                  path: "/windAnalysis/fx",
                },
              ],
            },
            {
              text: "专题分析",
              icon: "svg-wind-site",
              path: "/fgzyfx",
              children: [
                {
                  text: "综合分析",
                  icon: "svg-wind-site",
                  path: "/new/ztfx",
                },
                {
                  text: "风能利用率",
                  icon: "svg-wind-site",
                  path: "/new/fnlyl",
                },
                {
                  text: "维护损失率",
                  icon: "svg-wind-site",
                  path: "/new/whssl",
                },
                {
                  text: "故障损失率",
                  icon: "svg-wind-site",
                  path: "/new/gzssl",
                },
                {
                  text: "限电损失率",
                  icon: "svg-wind-site",
                  path: "/new/xdssl",
                },
                {
                  text: "性能损失率",
                  icon: "svg-wind-site",
                  path: "/new/xnssl",
                },
                {
                  text: "受累损失率",
                  icon: "svg-wind-site",
                  path: "/new/slssl",
                },
                {
                  text: "MTBF分析",
                  icon: "svg-wind-site",
                  path: "/new/mtbf",
                },
                {
                  text: "MTTR分析",
                  icon: "svg-wind-site",
                  path: "/new/mttr",
                },
                {
                  text: "复位及时率",
                  icon: "svg-wind-site",
                  path: "/new/zfwjsl",
                },
                {
                  text: "状态转换率",
                  icon: "svg-wind-site",
                  path: "/new/zztzhl",
                },
                {
                  text: "消缺及时率",
                  icon: "svg-wind-site",
                  path: "/new/zxqjsl",
                },
                {
                  text: "发电量分析",
                  icon: "svg-wind-site",
                  path: "/new/zfdl",
                },
                {
                  text: "综合场用电量",
                  icon: "svg-wind-site",
                  path: "/new/zzhcydl",
                },
              ]
            },
            // {
            //   text: "单机分析",
            //   icon: "svg-wind-site",
            //   path: "/fgzyfx",
            //   children: [
            //     {
            //       text: "单机分析详细",
            //       icon: "svg-wind-site",
            //       path: "/new/dj1",
            //     },
            //     {
            //       text: "电量预测",
            //       icon: "svg-wind-site",
            //       path: "/new/pf1",
            //     },
            //     {
            //       text: "气象预测",
            //       icon: "svg-wind-site",
            //       path: "/new/fs",
            //     }
            //   ]
            // }
          ],
        },
        {
          id: "health",
          text: "健康管理",
          data: [
            {
              text: "等级评估",
              icon: "svg-wind-site",
              path: "/assess",
              children: [
                {
                  text: "等级评估",
                  icon: "svg-wind-site",
                  path: "/assess/index",
                },
                {
                   text: "评估配置",
                  icon: "svg-wind-site",
                  path: "/assess/config",
                },
              ]
            },{
              text: "健康管理",
              icon: "svg-wind-site",
              path: "/health",
              children: [
              
                {
                  text: "健康推荐",
                  icon: "svg-wind-site",
                  path: "/health",
                },
                {
                  text: "健康首页",
                  icon: "svg-wind-site",
                  path: "/health/health2",
                },
                {
                  text: "健康总览",
                  icon: "svg-wind-site",
                  path: "/health/health6",
                },
                {
                  text: "健康矩阵",
                  icon: "svg-wind-site",
                  path: "/health/health5",
                },
                // {
                //   text: "健康列表",
                //   icon: "svg-wind-site",
                //   path: "/health/health6",
                // },
                {
                  text: "健康列表",
                  icon: "svg-wind-site",
                  path: "/health/health8",
                },
              ],
            },{
              text: "全生命周期",
              icon: "svg-wind-site",
              path: "/allLifeManage",
             
            },
          ],
        },
        {
          id: "decision",
          text: "决策支持",
          data: [
            {
              text: "对标管理",
              icon: "svg-matrix",
              path: "/decision/decision1",
              children: [
              
                {
                  text: "风机绩效榜",
                  icon: "svg-wind-site",
                  path: "/decision/decision1",
                },
                {
                  text: "五项损失率",
                  icon: "svg-wind-site",
                  path: "/decision/decision2",
                },
                {
                  text: "场内对标",
                  icon: "svg-wind-site",
                  path: "/decision/decision2Cndb",
                },
                {
                  text: "场际对标",
                  icon: "svg-wind-site",
                  path: "/decision/decision2Cjdb",
                },
                {
                  text: "项目对标",
                  icon: "svg-wind-site",
                  path: "/decision/decision2Xmdb",
                },
                {
                  text: "线路对标",
                  icon: "svg-wind-site",
                  path: "/decision/decision2Xldb",
                },
                {
                  text: "性能对标",
                  icon: "svg-wind-site",
                  path: "/decision/decision3",
                },
                {
                  text: "值际对标",
                  icon: "svg-wind-site",
                  path: "/decision/decision4",
                },
                {
                  text: "单机横向对比",
                  icon: "svg-matrix",
                  path: "/decision/decision3db",
                },{
                  text: "操作指令统计",
                  icon: "svg-matrix",
                  path: "/decision/decision4czzl",
                },
                
              ],
            }
            // ,
            // {
            //   text: "五项损失率",
            //   icon: "svg-matrix",
            //   path: "/decision/decision2",
            // },
            // {
            //   text: "场内对标",
            //   icon: "svg-matrix",
            //   path: "/decision/decision2Cndb",
            // },
            // {
            //   text: "场际对标",
            //   icon: "svg-matrix",
            //   path: "/decision/decision2Cjdb",
            // },
            // {
            //   text: "项目对标",
            //   icon: "svg-matrix",
            //   path: "/decision/decision2Xmdb",
            // },
            // {
            //   text: "线路对标",
            //   icon: "svg-matrix",
            //   path: "/decision/decision2Xldb",
            // },
            // {
            //   text: "性能对标",
            //   icon: "svg-matrix",
            //   path: "/decision/decision3",
            // },
            // {
            //   text: "值际对标",
            //   icon: "svg-matrix",
            //   path: "/decision/decision4",
            // }
            ,
            {
              text: "排行榜",
              icon: "svg-matrix",
              path: "/phb",
              children: [
                {
                  text: "发电效率排行",
                  icon: "svg-wind-site",
                  path: "/powerRank",
                },
                {
                  text: "总发电效率排行",
                  icon: "svg-wind-site",
                  path: "/totalPowerRank",
                },
                {
                  text: "报警排行",
                  icon: "svg-wind-site",
                  path: "/warningRank",
                },
              ],
            },
            // 三率管理
            {
              text: "三率管理",
              icon: "svg-matrix",
              path: "/slgl",
              children: [
                {
                  text: "复位及时率",
                  icon: "svg-wind-site",
                  path: "/fwjsl",
                },
                {
                  text: "状态转换率",
                  icon: "svg-wind-site",
                  path: "/ztzhl",
                },
                {
                  text: "消缺及时率",
                  icon: "svg-wind-site",
                  path: "/xqjsl",
                },
              ],
            },
          ],
        },
        {
          id: "knowledge",
          text: "知识管理",
          data: [
            {
              text: "故障知识列表",
              icon: "svg-matrix",
              path: "/knowledge",
            },
            {
              text: "安全措施知识",
              icon: "svg-matrix",
              path: "/knowledge2",
            },
            {
              text: "排查检修方案",
              icon: "svg-matrix",
              path: "/knowledge6",
            },
            {
              text: "预警知识",
              icon: "svg-matrix",
              path: "/knowledge7",
            },
            {
              text: "特征参数",
              icon: "svg-matrix",
              path: "/knowledge5",
            },
            {
              text: "风险辨识知识",
              icon: "svg-matrix",
              path: "/knowledge3",
            },
            {
              text: "作业指导知识",
              icon: "svg-matrix",
              path: "/knowledge4",
            },
          ],
        },
        {
          id: "bdzcx",
          text: "智能报表",
          data: [
            // 统计分析
            {
              text: "统计分析",
              icon: "svg-matrix",
              path: "/bdzcx",
              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,
    };
  },
  methods: {
    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 data = this.menuData.filter((t) => {
        return t.id == this.currRoot;
      })[0].data;
      return data;
    },
  },
  watch: {
    // 监听路由
    $route: {
      handler: function (val, oldVal) {
        this.menuData.some((element, index) => {
          if (val.path.includes(element.id)) {
            this.currRoot = element.id;
            this.$nextTick(() => {
              this.currentMenu.some((element, index) => {
                if (val.path == element.path) {
                  this.activeIndex = index;
                }
              });
            });
            return true;
          }
        });
      },
      //深度观察监听
      deep: true,
    },
  },
};
</script>
 
<style lang="less">
.menu {
  padding-top: 1.481vh;

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

    .menu-item {
      padding: 1.481vh 0;
      text-align: center;

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

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

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

.sub-menu {
  position: absolute;
  top: 0;
  left: 5.3704vh;
  width: 158px;
  height: 100%;
  padding-top: 1.481vh;
  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 1.4815vh;
        font-size: @fontsize-s;
        text-decoration: unset;

        .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: 1.1111vh;
        color: @gray-l;
      }

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

  i {
    font-size: 2.222vh;
    color: rgba(255, 255, 255, 50%);
  }
}
</style>