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="用电量" force-render>
      <category ref="electricRef" />
    </a-tab-pane>
    <a-tab-pane key="3" tab="用水量">
      <category ref="useWaterRef" />
    </a-tab-pane>
    <a-tab-pane key="4" tab="供水量">
      <category ref="provideWaterRef" />
    </a-tab-pane>
    <a-tab-pane key="5" tab="碳排">
      <category ref="carbonEmissionsRef" />
    </a-tab-pane>
    <a-tab-pane key="6" tab="供热量">
      <category ref="provideHotRef" />
    </a-tab-pane>
  </a-tabs>
</template>
<script lang="ts" setup>
  import { ref } 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 handleTabChange = (key) => {
    console.log('Tab changed:', key);
    // 在这里可以执行需要在页面切换时执行的逻辑
    if (key === '1') {
      if (allRef.value) {
        allRef.value.drawEcharts();
      }
    } else if (key === '2') {
      if (electricRef.value) {
        electricRef.value.getYearData(); // 调用子组件的方法
      }
    } else if (key === '3') {
      if (useWaterRef.value) {
        useWaterRef.value.getYearData();
      }
    }else if (key === '4') {
      if (provideWaterRef.value) {
        provideWaterRef.value.getYearData();
      }
    }else if (key === '5') {
      if (carbonEmissionsRef.value) {
        carbonEmissionsRef.value.getYearData();
      }
    }else if (key === '6') {
      if (provideHotRef.value) {
        provideHotRef.value.getYearData();
      }
    }
  };
</script>