WholeProcessPlatform/frontend/src/views/DataQueryMenuModule/monitorData.vue

<template>
  <div class="monitorData-page">
    <a-tabs v-model:activeKey="activeTab" class="monitorData-tabs">
      <a-tab-pane tab="生态流量运行数据" key="FlowData">
        <FlowData />
      </a-tab-pane>
      <a-tab-pane tab="水质监测数据" key="WaterData">
        <WaterData />
      </a-tab-pane>
      <a-tab-pane tab="垂向水温数据" key="VerticalTemp">
        <VerticalTemp />
      </a-tab-pane>
      <a-tab-pane tab="表层水温数据" key="SurfaceTemp">
        <SurfaceTemp />
      </a-tab-pane>
      <a-tab-pane tab="过鱼监测数据" key="FishData">
        <FishData />
      </a-tab-pane>
      <a-tab-pane tab="鱼类放鱼数据" key="FishRelease">
        <FishRelease />
      </a-tab-pane>
      <a-tab-pane tab="流量站数据" key="FlowStation">
        <FlowStation />
      </a-tab-pane>
      <a-tab-pane tab="综合导出" key="Export">
        <Export />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import FlowData from './components/monitorData/FlowData/index.vue';
import WaterData from './components/monitorData/WaterData/index.vue';
import VerticalTemp from './components/monitorData/VerticalTemp/index.vue';
import SurfaceTemp from './components/monitorData/SurfaceTemp/index.vue';
import FishData from './components/monitorData/FishData/index.vue';
import FishRelease from './components/monitorData/FishRelease/index.vue';
import FlowStation from './components/monitorData/FlowStation/index.vue';
import Export from './components/monitorData/Export/index.vue';
const activeTab = ref('FlowData');
</script>
<style scoped lang="scss">
.monitorData-page {
  position: relative;
  z-index: 900;
  pointer-events: all;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  box-sizing: border-box;
  overflow: hidden;
}

.monitorData-tabs {
  padding-left: 20px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  :deep(.ant-tabs-content) {
    height: 100%;
  }
}
</style>