jn_sis_zhfx/src/views/HealthControl/Health.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
        class="item"
        @click="tabSelect(3)"
        :class="{ active: tabIndex == 3 }"
      >
        已完成任务
      </div> -->
    </div>
    <div v-if="tabIndex == 0">
      <health-tab-1 />
    </div>
    <div v-if="tabIndex == 1">
      <health-tab-2 />
    </div>
    <div v-if="tabIndex == 2">
      <health-tab-3 />
      <!-- <button class="btn" @click="dialogVisible = true">点击弹窗</button>
      <el-dialog title="日信息对比" v-model="dialogVisible" width="70%" top="10vh" custom-class="modal" :close-on-click-modal="false">
        <dayinfo />
      </el-dialog> -->
    </div>
    <div v-if="tabIndex == 3">
      <health-tab-4 />
    </div>
  </div>
</template>

<script>
import HealthTab1 from "./HealthTab1.vue";
import HealthTab2 from "./HealthTab2.vue";
import HealthTab3 from "./HealthTab3.vue";
import HealthTab4 from "./HealthTab4.vue";

export default {
  setup() {},
  components: { HealthTab1, HealthTab2, HealthTab3, HealthTab4 },
  data() {
    return {
      tabIndex: 0,
    };
  },
  created() {
    this.tabIndex = this.$route.query.tab ? parseInt(this.$route.query.tab) : 0;
  },
  methods: {
    tabSelect(state) {
      this.tabIndex = state;
    },
  },
};
</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;
      }
    }
  }
}
</style>