sis_zhfx/src/views/WindSite/WindSite.vue

<template>
  <div class="wind-site">
    <div class="page-common-body">
      <div class="page-common-body-router">
        <router-view />
      </div>
      <div class="page-common-body-menu">
        <div class="page-common-body-menu-box">
          <div class="page-common-body-menu-border left top"></div>
          <div class="page-common-body-menu-border left bottom"></div>
          <div class="page-common-body-menu-border right top"></div>
          <div class="page-common-body-menu-border right bottom"></div>
          <div class="page-common-body-menu-item" v-for="(menuData, index) of menuDatas" :key="index" @click="clickMenu(index)" :class="{ active: activeIndex == index }">
            <router-link :to="menuData.path">
              <span class="svg-icon" :class="activeIndex == index ? 'svg-icon-yellow' : 'svg-icon-green'">
                <SvgIcon :svgid="menuData.icon"></SvgIcon>
              </span>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SvgIcon from "@com/coms/icon/svg-icon.vue";
export default {
  // 名称
  name: "WindSite",
  // 使用组件
  components: {
    SvgIcon,
  },
  // 数据
  data() {
    return {
      activeIndex: 0,
      menuDatas: [
        {
          icon: "svg-agc",
          path: "/monitor/windsite/home",
        },
        {
          icon: "svg-matrix",
          path: "/monitor/windsite/draughtfanlist",
        },
        // {
        //   icon: "svg-agc",
        //   path: "/monitor/windsite/matrix",
        // },
        // {
        //   icon: "svg-agc",
        //   path: "/monitor/windsite/lightmatrix",
        // },
        // {
        //   icon: "svg-intranet-involvement",
        //   path: "/monitor/windsite/box",
        // },
        // {
        //   icon: "svg-matrix",
        //   path: "/monitor/windsite/info",
        // },
        {
          icon: "svg-easy-compass",
          path: "/monitor/windsite/tower",
        },
        // {
        //   icon: "svg-easy-compass",
        //   path: "/monitor/windsite/Inverter-Info",
        // },
        // {
        //   icon: "svg-easy-compass",
        //   path: "/monitor/windsite/map",
        // },
        // {
        //   icon: "svg-easy-compass",
        //   path: "/monitor/windsite/map1",
        // },
      ],
    };
  },
  // 函数
  methods: {
    clickMenu: function(index) {
      this.activeIndex = index;
    },
  },

  created() {
    this.menuDatas.forEach((ele) => {
      ele.path = ele.path + "/" + this.$route.params.wpId;
    });
  },

  mounted() {},
};
</script>

<style lang="less" scoped>
.wind-site {
  .page-common-body {
    display: flex;
    flex-direction: row;
    margin-top: 0.741vh;

    .page-common-body-router {
      overflow: auto;
      overflow-x: hidden;
      height: calc(100vh - 7.037vh);
      flex: 1 1 auto;
    }

    .page-common-body-menu {
      width: 7.407vh;
      padding: 0 1.481vh 1.481vh 1.481vh;

      .page-common-body-menu-box {
        border: 0.093vh solid @darkgray;
        background-color: fade(@darkgray, 30%);
        padding: 2.222vh 0.185vh;
        position: relative;

        .page-common-body-menu-border {
          position: absolute;
          width: 0.37vh;
          height: 0.37vh;
          background-color: @write;
          border-radius: 50%;

          &.left {
            left: -0.185vh;
          }

          &.right {
            right: -0.185vh;
          }

          &.top {
            top: -0.185vh;
          }

          &.bottom {
            bottom: -0.185vh;
          }
        }

        .page-common-body-menu-item {
          border: 0.093vh solid fade(@green, 40%);
          width: 3.889vh;
          height: 3.889vh;
          border-radius: 0.278vh;
          margin-top: 0.741vh;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;

          a {
            line-height: 0;
          }

          &:first-child {
            margin-top: 0;
          }

          &.active {
            border-color: fade(@yellow, 40%);
            position: relative;

            &::after {
              content: "";
              width: calc(100% - 0.37vh);
              height: calc(100% - 0.37vh);
              position: absolute;
              border: 0.093vh solid @yellow;
              box-shadow: 0 0 0.37vh @yellow;
              top: 0.093vh;
              left: 0.093vh;
            }
          }
        }
      }
    }
  }
}
</style>