map/ui/dasadmin/src/views/backend/statAnalysis/index.vue

<template>
    <div class="statAnalysis">
        <el-menu :default-active="activeIndex" class="headerList" mode="horizontal" @select="handleSelect">
            <el-menu-item v-for="(item, index) in headerList" :index="index" :key="index"> {{ item }} </el-menu-item>
        </el-menu>
        <TrendAnalysis v-if="activeIndex == 1"></TrendAnalysis>
        <TrendComparison v-if="activeIndex == 2"></TrendComparison>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useConfig } from '/@/stores/config'
import TrendAnalysis from './trendAnalysis.vue'
import TrendComparison from './trendComparison.vue'
const config = useConfig()
const activeIndex = ref(1)
const { t } = useI18n()
const headerList = [t('statAnalysis.PowerCurveAnalysis'), t('statAnalysis.trendAnalysis'), t('statAnalysis.trendComparison')]

const handleSelect = (index) => {
    activeIndex.value = index
}
</script>
<style scoped lang="scss">
.statAnalysis {
    height: 100%;
    .headerList {
        border: none;
        --el-menu-bg-color: v-bind('config.getColorVal("menuBackground")');
        --el-menu-text-color: v-bind('config.getColorVal("menuColor")');
        --el-menu-active-color: v-bind('config.getColorVal("menuActiveColor")');
    }
}
</style>