<template>
|
<screen-shell>
|
<component :is="pageMap[currentKey]" />
|
</screen-shell>
|
</template>
|
|
<script lang="ts" setup>
|
defineOptions({
|
name: 'report-screen'
|
});
|
|
import { computed } from 'vue';
|
import { useRoute } from 'vue-router';
|
import ScreenShell from '../../components/screen-shell.vue';
|
import Map from './map.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 { resolveScreenKey, type ScreenKey } from '../../data/screen';
|
import { useScreenLoader } from '../../hooks/use-screen';
|
|
useScreenLoader();
|
|
const route = useRoute();
|
|
const pageMap = {
|
overview: Overview,
|
resource: Resource,
|
carbon: Carbon,
|
participation: Participation,
|
operation: Operation,
|
map: Map
|
};
|
|
/** 停留在 /report/screen/index，用 query.page（或动态路由 :page）切换子页，不再强制跳走 */
|
const currentKey = computed<ScreenKey>(() =>{
|
const key = resolveScreenKey(route.params.page as string, route.query.page as string);
|
console.log('[screen] params.page=', route.params.page, 'query.page=', route.query.page, '=> key=', key);
|
return key;
|
});
|
</script>
|
