fd_dwgz_zhyw_nx/src/views/HealthControl/energyEfficAnalyse/wtSaturability/index.vue

<template>
  <div class="health">
    <div class="selections mg-b-16">
      <div
        class="item"
        @click="tabSelect(0)"
        :class="{ active: tabIndex == 0 }"
      >
        总功率情况
      </div>
      <div
        class="item"
        @click="tabSelect(1)"
        :class="{ active: tabIndex == 1 }"
      >
        月功率情况
      </div>
      <div
        class="item"
        @click="tabSelect(2)"
        :class="{ active: tabIndex == 2 }"
      >
        日功率情况
      </div>
    </div>
    <div class="curHeight" v-if="tabIndex == 0">
      <Tab1 />
    </div>
    <div class="curHeight" v-if="tabIndex == 1">
      <Tab2 />
    </div>
    <div class="curHeight" v-if="tabIndex == 2">
      <Tab3 />
    </div>
  </div>
</template>

<script>
import Tab1 from "./tab1.vue";
import Tab2 from "./tab2.vue";
import Tab3 from "./tab3.vue";
export default {
  // 名称
  name: "wtSaturability",

  // 使用组件
  components: {
    Tab1,
    Tab2,
    Tab3,
  },

  // 数据
  data() {
    const that = this;
    return {
      tabIndex: 0,
    };
  },

  // 函数
  methods: {
    tabSelect(state) {
      this.tabIndex = state;
    },
    // 请求服务
    requestData() {},
  },

  created() {
    this.requestData();
  },

  mounted() {},

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

<style lang="less" scope>
.health {
  height: 100%;
  padding: 10px 20px;
  .selections {
    display: flex;

    .item {
      flex: 0 0 128px;
      text-align: center;
      line-height: 33px;
      margin-right: 8px;
      color: @font-color;
      font-size: @fontsize-s;
      background: fade(@gray, 20);
      border: 1px solid fade(@gray, 20);

      &:hover,
      &.active {
        background: fade(@green, 20);
        border: 1px solid @green;
        color: @green;
        cursor: pointer;
      }
    }
  }

  .curHeight {
    height: calc(100% - 48px);
  }
}
</style>