You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
123 lines
3.7 KiB
123 lines
3.7 KiB
<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> |