CaiYuanYiTiHua/src/views/demo/system/achievement/index.vue

<template>
  <a-tabs v-model:activeKey="activeKey" tabPosition="left" :centered="true" @change="changeTabs">
    <a-tab-pane key="1" tab="图层管理">
      <GeoserverManagement ref="GeoserverManagementRef" />
    </a-tab-pane>
    <a-tab-pane key="2" tab="影像管理">
      <GeoTiffManager ref="GeoTiffManagerRef" />
    </a-tab-pane>
    <a-tab-pane key="3" tab="航飞图片">
      <AchievementManage ref="AchievementManageRef" />
    </a-tab-pane>
    <a-tab-pane key="4" tab="成果展示">
      <Display ref="DisplayRef" />
    </a-tab-pane>
  </a-tabs>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  // 组件
  import GeoserverManagement from '@/views/demo/system/geoservermanagement/index.vue';
  import GeoTiffManager from './GeoTiffManager/index.vue';
  import AchievementManage from './AchievementManage/index.vue';
  import Display from './Display/index.vue';

  const activeKey = ref('4');
  // 图层管理
  const GeoserverManagementRef = ref();
  // 影像管理
  const GeoTiffManagerRef = ref();
  // 航飞图片
  const AchievementManageRef = ref();
  // 成果展示
  const DisplayRef = ref();

  function changeTabs(activeKey) {
    console.log(activeKey);
    if (activeKey == 1) {
      // 图层管理
    } else if (activeKey == 2) {
      // 影像管理
    } else if (activeKey == 3) {
      // 航飞图片
    } else if (activeKey == 4) {
      // 成果展示
    }
  }
</script>
<style lang="scss" scoped></style>