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: 'performanceAnalysis',
          text: '增发分析',
          data: [
            {
              text: '能效分析',
              icon: 'svg-wind-site',
              path: '/powerCurve',
              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: '/new/alarmcenter1',
              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: '/windAnalysis',
              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/dj1",
            //     },
            //     {
            //       text: "电量预测",
            //       icon: "svg-wind-site",
            //       path: "/new/pf1",
            //     },
            //     {
            //       text: "气象预测",
            //       icon: "svg-wind-site",
            //       path: "/new/fs",
            //     }
            //   ]
            // }
          ]
        },
        ,
        {
          id: 'ztfx',
          text: '降损分析',
          data: [
            {
              text: '专题分析',
              icon: 'svg-wind-site',
              path: '/new/ztfx',
              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-matrix',
              path: '/decision1',
              children: [
                {
                  text: '风机绩效榜',
                  icon: 'svg-wind-site',
                  path: '/decision1'
                },
                {
                  text: '五项损失率',
                  icon: 'svg-wind-site',
                  path: '/decision2'
                },
                {
                  text: '场内对标',
                  icon: 'svg-wind-site',
                  path: '/decision2Cndb'
                },
                {
                  text: '场际对标',
                  icon: 'svg-wind-site',
                  path: '/decision2Cjdb'
                },
                {
                  text: '项目对标',
                  icon: 'svg-wind-site',
                  path: '/decision2Xmdb'
                },
                {
                  text: '线路对标',
                  icon: 'svg-wind-site',
                  path: '/decision2Xldb'
                },
                {
                  text: '性能对标',
                  icon: 'svg-wind-site',
                  path: '/decision3'
                },
                {
                  text: '值际对标',
                  icon: 'svg-wind-site',
                  path: '/decision4'
                },
                {
                  text: '单机横向对比',
                  icon: 'svg-matrix',
                  path: '/decision3db'
                },
                {
                  text: '操作指令统计',
                  icon: 'svg-matrix',
                  path: '/decision4czzl'
                }
              ]
            }, // 三率管理
            {
              text: '三率管理',
              icon: 'svg-matrix',
              path: '/fwjsl',
              children: [
                {
                  text: '复位及时率',
                  icon: 'svg-wind-site',
                  path: '/fwjsl'
                },
                {
                  text: '状态转换率',
                  icon: 'svg-wind-site',
                  path: '/ztzhl'
                },
                {
                  text: '消缺及时率',
                  icon: 'svg-wind-site',
                  path: '/xqjsl'
                }
              ]
            }
            // {
            //   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: 'realSearch',
          text: '数据管理',
          data: [
            {
              text: '原始数据查询',
              icon: 'svg-wind-site',
              path: '/realSearch',
              children: [
                {
                  text: '测点数据查询',
                  icon: 'svg-wind-site',
                  path: '/realSearch'
                },
                {
                  text: '测点历史数据查询',
                  icon: 'svg-wind-site',
                  path: '/historySearch'
                }
              ]
            },
            {
              text: '预警记录',
              icon: 'svg-wind-site',
              path: '/new/alarmcenter',
              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'
                }
              ]
            },
            {
              text: '专家知识',
              icon: 'svg-wind-site',
              path: '/knowledge',
              children: [
                {
                  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: 'health',
          text: '健康管理',
          data: [
            {
              text: '等级评估',
              icon: 'svg-wind-site',
              path: '/djpg'
            },
            {
              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: 'personnel',
          text: '安措管控',
          data: [
            // ,
            // {
            //   text: "五项损失率",
            //   icon: "svg-matrix",
            //   path: "/decision2",
            // },
            // {
            //   text: "场内对标",
            //   icon: "svg-matrix",
            //   path: "/decision2Cndb",
            // },
            // {
            //   text: "场际对标",
            //   icon: "svg-matrix",
            //   path: "/decision2Cjdb",
            // },
            // {
            //   text: "项目对标",
            //   icon: "svg-matrix",
            //   path: "/decision2Xmdb",
            // },
            // {
            //   text: "线路对标",
            //   icon: "svg-matrix",
            //   path: "/decision2Xldb",
            // },
            // {
            //   text: "性能对标",
            //   icon: "svg-matrix",
            //   path: "/decision3",
            // },
            // {
            //   text: "值际对标",
            //   icon: "svg-matrix",
            //   path: "/decision4",
            // }

            {
              text: '安全管控',
              icon: 'svg-matrix',
              path: '/new/personnel',
              children: [
                {
                  text: '人员矩阵',
                  icon: 'svg-wind-site',
                  path: '/new/personnel'
                },
                {
                  text: '全局监视',
                  icon: 'svg-wind-site',
                  path: '/new/personnel'
                }
              ]
            }
          ]
        },
        // {
        //   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: '/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
    }
  },
  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>