<template>
|
<div class="right-top">
|
<span>模拟结果</span>
|
</div>
|
<el-tabs v-model="activeTab" class="full-width-tabs" @tab-change="handleTabChange">
|
<el-tab-pane label="水深" name="depth">
|
<WaterDepthContent ref="depthRef"/>
|
</el-tab-pane>
|
<el-tab-pane label="流速" name="velocity">
|
<WaterVelocityContent ref="velocityRef" />
|
</el-tab-pane>
|
</el-tabs>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue'
|
import { nextTick } from 'vue'
|
import WaterDepthContent from './WaterDepthContent.vue'
|
import WaterVelocityContent from './WaterVelocityContent.vue'
|
|
const activeTab = ref('depth')
|
const depthRef = ref(null)
|
const velocityRef = ref(null)
|
|
const handleTabChange = () => {
|
nextTick(() => {
|
if (activeTab.value === 'depth' && depthRef.value?.resizeChart) {
|
depthRef.value.resizeChart()
|
} else if (activeTab.value === 'velocity' && velocityRef.value?.resizeChart) {
|
velocityRef.value.resizeChart()
|
}
|
})
|
}
|
</script>
|
|
<style scoped>
|
.full-width-tabs {
|
width: 100%;
|
}
|
|
</style>
|
|
<style scoped>
|
.full-width-tabs :deep(.el-tabs__header) {
|
margin: 0;
|
}
|
|
.full-width-tabs :deep(.el-tabs__nav) {
|
width: 100%;
|
}
|
|
.full-width-tabs :deep(.el-tabs__item) {
|
width: 50%;
|
text-align: center;
|
padding: 0;
|
font-size: 16px;
|
font-weight: bold;
|
color: #fff;
|
}
|
.full-width-tabs :deep(.el-tabs__item.is-active) {
|
color: #61f7d4;
|
|
}
|
.full-width-tabs :deep(.el-tabs__active-bar) {
|
background-color: #61f7d4;
|
|
}
|
|
</style>
|