<template>
|
<screen-shell>
|
<component :is="pageMap[currentKey]" />
|
</screen-shell>
|
</template>
|
|
<script lang="ts" setup>
|
defineOptions({
|
name: 'report-screen'
|
});
|
|
import { computed } from 'vue';
|
import { useRoute, useRouter } from 'vue-router';
|
import ScreenShell from '../../components/screen-shell.vue';
|
import Overview from './overview.vue';
|
import Resource from './resource.vue';
|
import Carbon from './carbon.vue';
|
import Participation from './participation.vue';
|
import Operation from './operation.vue';
|
import { SCREEN_NAV, type ScreenKey } from '../../data/screen';
|
import { useScreenLoader } from '../../hooks/use-screen';
|
|
useScreenLoader();
|
|
const route = useRoute();
|
const router = useRouter();
|
|
const pageMap = {
|
overview: Overview,
|
resource: Resource,
|
carbon: Carbon,
|
participation: Participation,
|
operation: Operation
|
};
|
|
const currentKey = computed<ScreenKey>(() => {
|
const page = String(route.params.page || 'overview') as ScreenKey;
|
return SCREEN_NAV.some(e => e.key === page) ? page : 'overview';
|
});
|
|
if (!route.params.page) {
|
router.replace('/report/screen/overview');
|
}
|
</script>
|
