qingtian-report-ui/src/views/statistic/rain/rain_main.vue

<template>
    <div class="report-rain">
        <div class="tjfx-menu">
            <el-select v-model="menu" placeholder="请选择">
                <el-option v-for="dict in tjfxMenus" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
        </div>
        <!-- 添加加载状态和错误提示 -->
        <el-empty v-if="componentError" class="error-message" description="组件加载失败，请刷新页面重试" />
        <component :is="currentComponent" :tableTitle="tableTitle"></component>
    </div>
</template>

<script setup>
    import { ref, computed, defineAsyncComponent } from 'vue'


    // 定义菜单选项
    const tjfxMenus = [
        {
            value: '1',
            label: '时段降雨量'
        },
        {
            value: '2',
            label: '历史同期对比'
        }, {
            value: '3',
            label: '降水量特征值'
        }, {
            value: '4',
            label: '历史降雨量'
        },
        {
            value: '5',
            label: '雨量等值面'
        },
        {
            value: '6',
            label: '雨量水位对照'
        },
        {
            value: '7',
            label: '面平均降雨量'
        },
        {
            value: '8',
            label: '暴雨检索'
        },
        {
            value: '9',
            label: '连续无雨日统计'
        },
        {
            value: '10',
            label: '有效降雨日统计'
        },
        {
            value: '11',
            label: '时段降雨极值'
        },
    ]

    // 当前选中的菜单
    const menu = ref(tjfxMenus.length > 0 ? tjfxMenus[0].value : '')
    // const menu = ref('5')

    // 动态组件映射
    const componentMap = {
        '1': defineAsyncComponent(() => import('@/views/statistic/rain/sdjsl.vue')),
        '2': defineAsyncComponent(() => import('@/views/statistic/rain/lssdyl.vue')),
        '3': defineAsyncComponent(() => import('@/views/statistic/rain/jsltzz.vue')),
        '4': defineAsyncComponent(() => import('@/views/statistic/rain/jslmonth.vue')),
        '5': defineAsyncComponent(() => import('@/views/report/dzm/index.vue')),
        '6': defineAsyncComponent(() => import('@/views/report/swjsldzb/index.vue')),
        '7': defineAsyncComponent(() => import('@/views/statistic/rain/area_rain.vue')),
        '8': defineAsyncComponent(() => import('@/views/statistic/rain/byjc.vue')),
        '9': defineAsyncComponent(() => import('@/views/statistic/rain/lxwy.vue')),
        '10': defineAsyncComponent(() => import('@/views/statistic/rain/lxyy.vue')),
        '11': defineAsyncComponent(() => import('@/views/statistic/rain/sdjyjz.vue'))
    }
    // 添加错误处理
    const componentError = ref(false)

    onErrorCaptured((error) => {
        console.log(error,'错误处理')
        componentError.value = true
        return true
    })

    // 计算当前应该显示的组件
    const currentComponent = computed(() => {
        return componentMap[menu.value]
    })
    // 原代码有误，tjfxMenus 中的对象没有 name 属性
    const tableTitle = computed(() => {
        const currentItem = tjfxMenus.find(item => item.value === menu.value);
        return currentItem ? currentItem.label : '';
    })
</script>

<style lang="scss">
    .tjfx-menu {
        position: absolute;
        right: 25px;
        top: 30px;
        z-index: 999999;

        .el-input__wrapper {
            background: #10163A;
        }

        .el-input__inner {
            background: #10163A;
            color: #fff;
            border-color: #10163A;
        }

        .el-select .el-input .el-select__caret {
            color: #fff !important;
        }
    }
</style>