taskid:282 remark:'commit'

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

@@ -1,15 +1,23 @@
 <template>
   <a-tabs v-model:activeKey="activeKey" @change="handleTabChange">
     <a-tab-pane key="1" tab="全部"> 
-      <all />
+      <all ref="allRef" />
     </a-tab-pane>
     <a-tab-pane key="2" tab="用电量" force-render>
-      <category />
+      <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-tab-pane key="3" tab="用水量"> </a-tab-pane>
-    <a-tab-pane key="4" tab="供水量"> </a-tab-pane>
-    <a-tab-pane key="5" tab="碳排"> </a-tab-pane>
-    <a-tab-pane key="6" tab="供热量"> </a-tab-pane>
   </a-tabs>
 </template>
 <script lang="ts" setup>
@@ -18,10 +26,46 @@
   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>