<template>
  <a-tabs v-model:activeKey="activeKey" style="height: 5%">
    <a-tab-pane key="1" tab="综合数据" />
    <a-tab-pane key="2" tab="历史数据" force-render>Content of Tab Pane 2</a-tab-pane>
    <a-tab-pane key="3" tab="平均数据">Content of Tab Pane 3</a-tab-pane>
  </a-tabs>

  <aggregate-data ref="aggregateDataRef" v-if="activeKey == '1'" style="height: 85%" />
  <history-data v-if="activeKey == '2'" />
  <average-data v-if="activeKey == '3'" />
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import aggregateData from './aggregateData/index.vue';
  import historyData from './historyData/index.vue';
  import averageData from './averageData/index.vue';

  const aggregateDataRef = ref();

  var activeKey = ref('1');

  defineOptions({
    name: 'EnvironmentMonitorIndex', // 与页面路由name一致缓存才可生效
  });
</script>
<style lang="less" scoped></style>
