cac-fronted/src/components/Sidebar.vue

<template>
  <div class="sidebarBox">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      router
    >
      <template v-for="item in routeItem">
        <template v-if="item.subs">
          <el-submenu :index="item.path" :key="item.path">
            <template slot="title">
              <span slot="title">{{ item.name }}</span>
            </template>
            <template v-for="subItem in item.subs">
              <el-menu-item :index="subItem.path" :key="subItem.path">{{
                subItem.name
              }}</el-menu-item>
            </template>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="item.path" :key="item.path">
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hostName: "",
      isProduction: "",
      activeIndex: "/home",
      routeItem: [
        {
          path: "/home",
          name: "首页",
        },
        {
          path: "/dataReport",
          name: "数据报表",
        },
        {
          path: "/equipment",
          name: "设备台账管理",
        },
        // {
        //   path: "/systemManagement",
        //   name: "系统管理",
        // },

        {
          path: "/61850config",
          name: "61850配置",
          subs: [
            {
              path: "/icdConfig",
              name: "客户端lcd配置",
            },
            {
              path: "/paramBinding",
              name: "客户端lcd绑定",
            },
            {
              path: "/rptparam",
              name: "客户端rptparamindex绑定",
            },

            {
              path: "/clientDownFile",
              name: " 客户端采集文件配置",
            },
            {
              path: "/serverIcd",
              name: " 服务端lcd管理",
            },
            {
              path: "/mappingConfig",
              name: " 采集转换映射配置",
            },

            {
              path: "/iecserver",
              name: "控制台",
            },
          ],
        },

        {
          path: "/alarmRules",
          name: "告警规则",
        },
        {
          path: "/datago",
          name: "数据转移",
          subs: [
            {
              path: "/I2config",
              name: "I2配置",
            },
            {
              path: "/datatransfer",
              name: "下载录波文件",
            },
          ],
        },
      ],
    };
  },
  mounted() {
    console.log(window.location.host);
    console.log(process.env.NODE_ENV);
    this.isProduction = process.env.NODE_ENV === "production";
    if (this.isProduction) {
      // 使用服务器IP或域名作为图片地址
      if (window.location.pathname.includes("/cac")) {
        this.hostName = window.location.origin + "/cac/";
      } else {
        this.hostName = window.location.origin;
      }

      console.log("aaaaaaaaaaaa");
    } else {
      // 使用代理的 target 作为图片地址（开发环境）
      console.log("开发环境");
      this.hostName = "http://localhost:9527/#/"; // 这里使用你的本地 target 地址
    }
  },
  watch: {
    $route() {
      this.setCurrentRoute();
    },
  },
  methods: {
    setCurrentRoute() {
      console.log(this.$route.path);
      this.$nextTick(() => {
        this.activeIndex = this.$route.path; // 通过他就可以监听到当前路由状态并激活当前菜单
        console.log(this.activeIndex);
        localStorage.setItem("menuActive", this.activeIndex);
      });
    },
  },
  created() {
    this.setCurrentRoute();
  },
};
</script>

<style lang="less">
.sidebarBox {
  // width: 55%;
  // margin: 0 auto;
  display: flex;
  align-items: center;
  width: 100%;
  .el-menu {
    background: transparent;
    border-bottom: none;
    height: 40px;
    line-height: 40px;
    width: 100%;
    display: flex;
    //justify-content: space-around;
    li {
      margin-right: 2%;
    }
  }
  .el-menu--horizontal > .el-menu-item {
    background-image: url(../assets/menu.png);
    height: 40px;
    line-height: 40px;
    padding: 0 12px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    width: 120px;
    text-align: center;
    color: #fff;
    border-bottom: 0px solid transparent;
  }
  .el-menu--horizontal > .el-submenu .el-submenu__title {
    background-image: url(../assets/menu.png);
    height: 40px;
    line-height: 40px;
    padding: 0 12px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    width: 120px;
    text-align: center;
    color: #fff;
    border-bottom: 0px solid transparent;
  }
  .el-submenu__title i {
    color: #fff;
  }
  .el-menu--horizontal > .el-menu-item.is-active {
    color: #6de1ff;
    border-bottom: 0px solid #337ab7;
  }
  .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
    color: #6de1ff;
    border-bottom: 0px solid #337ab7;
    i {
      color: #6de1ff;
    }
  }
  .el-menu-item:focus,
  .el-menu-item:hover {
    background-color: transparent !important;
    color: #6de1ff !important;
  }
  .el-menu--horizontal > .el-submenu .el-submenu__title:hover {
    background-color: transparent !important;
    color: #6de1ff !important;
    i {
      color: #6de1ff;
    }
  }
  .menuBoxUl {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .menuItem {
      list-style: none;
      display: flex;
      height: 40px;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      font-size: 14px;
      margin-right: 16px;
      width: 100px;
      a {
        color: #fff;
        background-image: url(../assets/menu.png);
        height: 40px;
        line-height: 40px;
        padding: 0 12px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        overflow: hidden;
        width: 100px;
        text-align: center;
      }
      .router-link-active {
        color: #6de1ff;
      }
    }
  }
}
</style>