fd_dwgz_zhyw/src/views/HealthControl/Health4.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 {
  setup() {},
  components: { SvgIcon },
  data() {
    return {
      activeIndex: 0,
      wpId: "",
      wtId: "",
      menuDatas: [
        {
          icon: "svg-q实时监视",
          path: "/health/healthDetail/wtHealth",
        },
        // {
        //   icon: "svg-q健康",
        //   path: "/health/health10",
        // },
        {
          icon: "svg-q趋势",
          path: "/health/healthDetail/healthTrend",
        },
        {
          icon: "svg-q曲线",
          path: "/health/healthManagement/badStateAnalyse",
        },
      ],
    };
  },

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

  methods: {
    clickMenu: function (index) {
      this.activeIndex = index;
    },
  },
};
</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>