iot-front-ui/src/components/scene/energy/sceneEnergyAircondition.vue

<template>
  <div class="container">
    <div class="sceneEnergy-top">
      <div class="dashboardPortrait-select">
        <a-checkable-tag v-model="tagCheck.air" color="white" class="dashboardPortrait-select-tag"
                         @change="handleTagSelect('air')">
          <span class="dashboardPortrait-select-text">空调总览</span>
        </a-checkable-tag>
        <a-checkable-tag v-model="tagCheck.methods" color="white" class="dashboardPortrait-select-tag"
                         @change="handleTagSelect('methods')">
          <span class="dashboardPortrait-select-text">智能策略</span>
        </a-checkable-tag>
      </div>
    </div>

    <div class="dashboardPortrait-body">
      <AirconditioningCard v-if="currCheck == 'air'" />
    </div>

  </div>
</template>

<script>
import timeRange from "@/components/common/timeRange.vue";
import AirconditioningCard from "@/components/scene/energy/sceneEnergyAircondition/airconditioningCard.vue";

export default {
  components: {
    AirconditioningCard,
    timeRange,
  },
  data() {
    return {
      currCheck: '',
      tagCheck: {
        air: false,
        methods: false,
      },
    };
  },
  mounted() {
    this.handleTagSelect('air');
  },
  methods: {
    handleTagSelect(item) {
      for (const key in this.tagCheck) {
        this.tagCheck[key] = false;
      }
      this.currCheck = item;
      this.tagCheck[item] = true;
    },

  }
}
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  border-radius: 4px;
  padding: 15px;

  .ant-tabs {
    width: 100%;
    height: 100%;

    /deep/ .ant-tabs-content {
      width: 100%;
      height: calc(100% - 36px);
    }

    /deep/ .ant-tabs-bar {
      border-bottom: 0px solid transparent;
      margin-bottom: 5px;

      .ant-tabs-tab {
        font-size: 16px;
        font-weight: bold;
        font-family: SourceHanSansSC;
        padding: 4px 4px;
        margin: 0 32px 0 0;

        &.ant-tabs-tab-active {
          color: #156de4;
        }
      }

      .ant-tabs-ink-bar {
        width: 72px !important;
        background-color: #156de4;
      }
    }
  }

  .search_container {
    border-radius: 4px;
    background: #cecece29;
    margin-bottom: 5px;

    .ant-advanced-search-form {
      padding: 8px;
      background: #fbfbfb;
      // border: 1px solid #d9d9d9;
      // border-radius: 6px
    }

    .ant-advanced-search-form .ant-form-item {
      display: flex;
      margin-bottom: 0px;

      /deep/ .ant-form-item-label {
        min-width: 60px;
      }
    }

    .ant-advanced-search-form .ant-form-item-control-wrapper {
      flex: 1
    }

    .ant-select {
      width: 180px;
    }
  }

  .aircon_resutlt_container {
    height: calc(100% - 103px);

    .ant-layout-sider {
      background-color: #f5f5f5;
      padding: 4px 4px;

      // .list_container {}

      .ant-list-item-meta-title {
        text-indent: 40px;
      }
    }

    .ant-layout {
      height: 100%;
      background-color: transparent;

      .ant-layout-content {
        overflow: hidden;
      }
    }
  }

  .footer {
    height: 60px;
    line-height: 60px;
    margin-right: 50px;
    padding-top: 14px;

    .ant-pagination {
      float: right;
    }
  }


}
</style>