You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
126 lines
4.0 KiB
126 lines
4.0 KiB
<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"
|
|
:energyTypeName="energyTypeName" />
|
|
</a-tab-pane>
|
|
<a-tab-pane key="3" tab="用水量">
|
|
<category
|
|
ref="useWaterRef"
|
|
:tabId="tabId"
|
|
:energyType="energyType"
|
|
:energyTypeName="energyTypeName" />
|
|
</a-tab-pane>
|
|
<a-tab-pane key="4" tab="用气量">
|
|
<category
|
|
ref="provideWaterRef"
|
|
:tabId="tabId"
|
|
:energyType="energyType"
|
|
:energyTypeName="energyTypeName" />
|
|
</a-tab-pane>
|
|
<a-tab-pane key="5" tab="供热量">
|
|
<category
|
|
ref="carbonEmissionsRef"
|
|
:tabId="tabId"
|
|
:energyType="energyType"
|
|
:energyTypeName="energyTypeName" />
|
|
</a-tab-pane>
|
|
<a-tab-pane key="6" tab="碳排量">
|
|
<category
|
|
ref="provideHotRef"
|
|
:tabId="tabId"
|
|
:energyType="energyType"
|
|
:energyTypeName="energyTypeName" />
|
|
</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 energyTypeName = 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';
|
|
energyTypeName.value = '用电量';
|
|
nextTick(() => {
|
|
if (electricRef.value) {
|
|
electricRef.value.electricTotal = true;
|
|
electricRef.value.changeToYear(); // 调用子组件的方法
|
|
}
|
|
});
|
|
} else if (key === '3') {
|
|
tabId.value = 5;
|
|
energyType.value = 'WATER_USAGE';
|
|
energyTypeName.value = '用水量';
|
|
nextTick(() => {
|
|
if (useWaterRef.value) {
|
|
useWaterRef.value.electricTotal = true;
|
|
useWaterRef.value.changeToYear(); // 调用子组件的方法
|
|
}
|
|
});
|
|
} else if (key === '4') {
|
|
tabId.value = 6;
|
|
energyType.value = 'GAS_USAGE';
|
|
energyTypeName.value = '用气量';
|
|
nextTick(() => {
|
|
if (provideWaterRef.value) {
|
|
provideWaterRef.value.electricTotal = true;
|
|
provideWaterRef.value.changeToYear(); // 调用子组件的方法
|
|
}
|
|
});
|
|
} else if (key === '5') {
|
|
tabId.value = 7;
|
|
energyType.value = 'CARBON_EMISSIONS';
|
|
energyTypeName.value = '供热量';
|
|
nextTick(() => {
|
|
if (carbonEmissionsRef.value) {
|
|
carbonEmissionsRef.value.electricTotal = true;
|
|
carbonEmissionsRef.value.changeToYear(); // 调用子组件的方法
|
|
}
|
|
});
|
|
} else if (key === '6') {
|
|
tabId.value = 8;
|
|
energyType.value = 'HEAT_SUPPLY';
|
|
energyTypeName.value = '碳排量';
|
|
nextTick(() => {
|
|
if (provideHotRef.value) {
|
|
provideHotRef.value.electricTotal = true;
|
|
provideHotRef.value.changeToYear(); // 调用子组件的方法
|
|
}
|
|
});
|
|
}
|
|
};
|
|
</script>
|
|
|