hb_sis_zhfx/src/views/windAnalysis/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 {
  .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: 87vh;
  }
}
</style>