hvac-web/src/views/energy-analysis/EnergyAnalysis.vue

<script setup lang="ts">
import { ref } from 'vue';

import DeviceGroupSelect from '@/components/DeviceGroupSelect.vue';

import EnergyConsumption from './EnergyConsumption.vue';
import EnergyEfficiency from './EnergyEfficiency.vue';

const activeKey = ref('energyConsumption');

const handleDevGroupChange = (id: number) => {
  console.log(id);
};
</script>

<template>
  <ATabs class="button-tabs-compact" v-model:active-key="activeKey" type="card">
    <ATabPane key="energyConsumption" :tab="$t('energyAnalysis.energyConsumptionAnalysis')">
      <EnergyConsumption />
    </ATabPane>
    <ATabPane key="energyEfficiency" :tab="$t('energyAnalysis.energyEfficiencyAnalysis')">
      <EnergyEfficiency />
    </ATabPane>
    <!-- <ATabPane key="energySaving" :tab="$t('energyAnalysis.energySavingAssessment')">
      <EnergySaving />
    </ATabPane> -->
    <template #rightExtra>
      <DeviceGroupSelect @change="handleDevGroupChange" />
    </template>
  </ATabs>
</template>

<style lang="scss" scoped>
.group-select {
  width: 192px;

  & + & {
    margin-left: 16px;
  }
}

:deep(.ant-tabs-content-holder) {
  .ant-card {
    border-radius: 16px;
    box-shadow: none;

    + .ant-card {
      margin-top: 16px;
    }
  }

  .ant-card-head-title {
    padding-left: 10px;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #333;
    border-left: 2px solid var(--antd-color-primary);
  }

  .energy-card-container {
    display: flex;
    flex: 1;
    align-items: center;
    height: 124px;
    border-radius: 8px;
  }

  .energy-card-icon {
    margin-right: 16px;
    margin-left: 24px;
  }

  .energy-card-title {
    margin-bottom: 2px;
  }

  .energy-card-value {
    margin-right: 4px;
    font-family: DINAlternate;
    font-size: 30px;
    font-weight: bold;
    line-height: 36px;
    color: #000;
  }

  .energy-card-unit {
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    color: #000;
  }

  .energy-card-description {
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    color: #000;
  }
}
</style>