SaaS-lib/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/index.vue

<template>
  <a-tabs v-model:activeKey="activeKey" @change="handleTabChange">
    <a-tab-pane key="1" tab="全部">
      <all ref="allRef" />
    </a-tab-pane>
    <a-tab-pane key="2" tab="用电量">
      <category ref="electricRef" :tabId="tabId" :energyType="energyType" />
    </a-tab-pane>
    <a-tab-pane key="3" tab="用水量">
      <category ref="useWaterRef" :tabId="tabId" :energyType="energyType" />
    </a-tab-pane>
    <a-tab-pane key="4" tab="用气量">
      <category ref="provideWaterRef" :tabId="tabId" :energyType="energyType" />
    </a-tab-pane>
    <a-tab-pane key="5" tab="供热量">
      <category ref="carbonEmissionsRef" :tabId="tabId" :energyType="energyType" />
    </a-tab-pane>
    <a-tab-pane key="6" tab="碳排量">
      <category ref="provideHotRef" :tabId="tabId" :energyType="energyType" />
    </a-tab-pane>
  </a-tabs>
</template>
<script lang="ts" setup>
  import { ref, nextTick } from 'vue';
  import all from './all/index.vue';
  import category from './category/index.vue';
  defineOptions({
    name: 'carbonPlanning', // 与页面路由name一致缓存才可生效
    components: {
      all,
      category,
    },
  });
  const activeKey = ref('1');
  const allRef = ref<InstanceType<typeof all> | null>(null);
  const electricRef = ref<InstanceType<typeof category> | null>(null);
  const useWaterRef = ref<InstanceType<typeof category> | null>(null);
  const provideWaterRef = ref<InstanceType<typeof category> | null>(null);
  const carbonEmissionsRef = ref<InstanceType<typeof category> | null>(null);
  const provideHotRef = ref<InstanceType<typeof category> | null>(null);
  // 切换tab页的回调
  const tabId = ref(1);
  const energyType = ref();
  const handleTabChange = (key) => {
    console.log('Tab changed:', key);
    // 在这里可以执行需要在页面切换时执行的逻辑
    if (key === '1') {
      nextTick(() => {
        if (allRef.value) {
          allRef.value.getTableData();
        }
      });
    } else if (key === '2') {
      tabId.value = 4;
      energyType.value = 'ELECTRICITY_USAGE';
      nextTick(() => {
        if (electricRef.value) {
          electricRef.value.electricTotal = true;
          electricRef.value.changeToYear(); // 调用子组件的方法
        }
      });
    } else if (key === '3') {
      tabId.value = 5;
      energyType.value = 'WATER_USAGE';
      nextTick(() => {
        if (useWaterRef.value) {
          useWaterRef.value.electricTotal = true;
          useWaterRef.value.changeToYear(); // 调用子组件的方法
        }
      });
    } else if (key === '4') {
      tabId.value = 6;
      energyType.value = 'GAS_USAGE';
      nextTick(() => {
        if (provideWaterRef.value) {
          provideWaterRef.value.electricTotal = true;
          provideWaterRef.value.changeToYear(); // 调用子组件的方法
        }
      });
    } else if (key === '5') {
      tabId.value = 7;
      energyType.value = 'CARBON_EMISSIONS';
      nextTick(() => {
        if (carbonEmissionsRef.value) {
          carbonEmissionsRef.value.electricTotal = true;
          carbonEmissionsRef.value.changeToYear(); // 调用子组件的方法
        }
      });
    } else if (key === '6') {
      tabId.value = 8;
      energyType.value = 'HEAT_SUPPLY';
      nextTick(() => {
        if (provideHotRef.value) {
          provideHotRef.value.electricTotal = true;
          provideHotRef.value.changeToYear(); // 调用子组件的方法
        }
      });
    }
  };
</script>