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>
          <router-link
            v-for="(menuData, index) of menuDatas"
            :key="index"
            :to="menuData.path"
          >
            <div
              class="page-common-body-menu-item"
              @click="clickMenu(index)"
              :class="{ active: activeIndex == index }"
            >
              <span
                class="svg-icon"
                :class="
                  activeIndex == index ? 'svg-icon-yellow' : 'svg-icon-green'
                "
              >
                <SvgIcon :svgid="menuData.icon"></SvgIcon>
              </span>
            </div>
          </router-link>
        </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-s场站监视",
          path: "/monitor/windsite/home",
        },
        {
          icon: "svg-s指标列表",
          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-s测风塔",
          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",
        // },
        {
          icon: "svg-matrix",
          path: "/monitor/windsite/matrix",
        },
        {
          icon: "svg-s总貌",
          path: "/monitor/windsite/generalappearance",
        },
        {
          icon: "svg-s升压站",
          path: "/monitor/windsite/boosterstation",
        },
        {
          icon: "svg-s地图",
          path: "/monitor/windsite/map",
        },
      ],
    };
  },
  // 函数
  methods: {
    clickMenu: function (index) {
      this.activeIndex = index;
    },
  },

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

  mounted() {},

  watch: {
    $route(res) {
      this.menuDatas.forEach((ele) => {
        let tempEle = ele.path.split("/");
        if (
          tempEle[tempEle.length - 1].indexOf("FDC") !== -1 ||
          tempEle[tempEle.length - 1].indexOf("GDC") !== -1
        ) {
          tempEle[tempEle.length - 1] = res.params.wpId;
          ele.path = tempEle.toString().replace(/,/g, "/");
        }
      });
    },
  },
};
</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>