90 lines
1.8 KiB
Vue
90 lines
1.8 KiB
Vue
|
<template>
|
||
|
|
<div class="map-page">
|
||
|
|
<!-- Ant Design Tabs -->
|
||
|
|
<a-tabs v-model:activeKey="activeTab" class="map-tabs">
|
||
|
|
<a-tab-pane v-for="tab in tabs" :key="tab.value" :tab="tab.name">
|
||
|
|
<!-- 动态加载对应的组件 -->
|
||
|
|
<component :is="getComponent(tab.value)" />
|
||
|
|
</a-tab-pane>
|
||
|
|
</a-tabs>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, defineAsyncComponent } from 'vue';
|
||
|
|
|
||
|
|
// Tab 配置
|
||
|
|
const tabs = [
|
||
|
|
{
|
||
|
|
name: '预警规则',
|
||
|
|
value: 'rules'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '预警配置管理',
|
||
|
|
value: 'config'
|
||
|
|
}
|
||
|
|
];
|
||
|
|
|
||
|
|
// 当前激活的 tab
|
||
|
|
const activeTab = ref('rules');
|
||
|
|
|
||
|
|
// 获取对应组件的方法
|
||
|
|
const getComponent = (value: string) => {
|
||
|
|
const componentMap: Record<string, any> = {
|
||
|
|
rules: defineAsyncComponent(
|
||
|
|
() => import('./components/RulesManagement/index.vue')
|
||
|
|
),
|
||
|
|
config: defineAsyncComponent(
|
||
|
|
() => import('./components/ConfigManagement/index.vue')
|
||
|
|
)
|
||
|
|
};
|
||
|
|
|
||
|
|
return componentMap[value] || null;
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.map-page {
|
||
|
|
position: relative;
|
||
|
|
z-index: 900;
|
||
|
|
pointer-events: all;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
padding-top: 2px;
|
||
|
|
background-color: #ffffff;
|
||
|
|
box-sizing: border-box;
|
||
|
|
overflow: hidden;
|
||
|
|
.content {
|
||
|
|
position: relative;
|
||
|
|
z-index: 900;
|
||
|
|
pointer-events: all;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-color: #ffffff;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 10px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
:deep(.ant-form-item) {
|
||
|
|
margin-bottom: 0 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.ant-tabs) {
|
||
|
|
height: 100%; // 减去 tabs header 的高度
|
||
|
|
padding: 0 13px;
|
||
|
|
}
|
||
|
|
.map-tabs {
|
||
|
|
:deep(.ant-tabs-content) {
|
||
|
|
height: 100%; // 减去 tabs header 的高度
|
||
|
|
overflow: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.ant-tabs-tabpane) {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|