jn_sis_zhfx/src/views/HealthControl/healthDetail/index.vue

<template>
  <div class="page-common-body">
    <div class="page-common-body-router">
      <router-view @getWtid="getWtid" />
    </div>
    <div v-if="!hidden" 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>
</template>

<script>
import SvgIcon from "@com/coms/icon/svg-icon.vue";
export default {
  name: "healthDetail",
  setup() {},
  components: { SvgIcon },
  data() {
    return {
      activeIndex: 0,
      wpId: "",
      wtId: "",
      menuDatas: [
        {
          icon: "svg-q实时监视",
          path: "/health/healthDetail/wtHealth",
        },
        {
          icon: "svg-q趋势",
          path: "/health/healthDetail/healthTrend",
        },
        {
          icon: "svg-q曲线",
          path: "/health/healthDetail/badState",
        },
      ],
      hidden: false,
    };
  },
  watch: {
    $route: {
      handler(val) {
        if (val.path.includes("wpHealth")) {
          this.hidden = true;
        } else {
          this.hidden = false;
        }
      },
      immediate: true,
    },
  },
  created() {
    this.wtId = this.$route.params.wtId;
    this.wpId = this.$route.params.wpId;
    if (this.wtId) {
      this.menuDatas.forEach((ele) => {
        ele.path += "/" + this.wpId + "/" + this.wtId;
      });
    }
  },

  methods: {
    getWtid(id, from) {
      //   this.wtId = id;
      //   if (from && from == "wpHealth") {
      //     this.menuDatas.forEach((ele) => {
      //       ele.path += "/" + this.wpId + "/" + id;
      //     });
      //   }
    },
    clickMenu: function (index) {
      this.activeIndex = index;
    },
  },
};
</script>

<style lang="less" scoped>
.page-common-body {
  height: 100%;
  display: flex;
  flex-direction: row;
 padding-top: 10px;

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

  .page-common-body-menu {
    padding: 0 12px 12px 12px;

    .page-common-body-menu-box {
      border: 1px solid @darkgray;
      background-color: fade(@darkgray, 30%);
      padding: 20px 5px;
      position: relative;

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

        &.left-top {
          left: 0;
          top: 0;
        }

        &.left-bottom {
          left: 0;
          bottom: 0;
        }

        &.right-top {
          right: 0;
          top: 0;
        }
        &.right-bottom {
          right: 0;
          bottom: 0;
        }
      }

      .page-common-body-menu-item {
        border: 1px solid fade(@green, 40%);
        width: 40px;
        height: 40px;
        border-radius: 5px;
        margin-top: 10px;
        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% - 2px);
            height: calc(100% - 2px);
            position: absolute;
            border: 1px solid @yellow;
            box-shadow: 0 0 2px @yellow;
            top: 1px;
            left: 1px;
          }
        }
      }
    }
  }
}
</style>