90 lines
2.8 KiB
Vue
90 lines
2.8 KiB
Vue
<script setup lang="ts">
|
||
import { computed } from 'vue';
|
||
import { useTagsViewStore } from '@/store/modules/tagsView';
|
||
import { useRoute } from 'vue-router';
|
||
import MapModal from '@/components/MapModal/index.vue';
|
||
import ylfbModal from '@/components/ylfbModal/index.vue';
|
||
import GlobalRightDrawer from '@/components/GlobalRightDrawer/index.vue';
|
||
import basicInfoMod from '@/modules/rightSearchDrawer/basicInfo/index.vue';
|
||
import monitoringTableMod from '@/modules/rightSearchDrawer/monitoringTable/index.vue';
|
||
import speciesIntroMod from '@/modules/rightSearchDrawer/speciesIntro/index.vue';
|
||
import { useModelStore } from '@/store/modules/model';
|
||
import GisView from '@/components/gis/GisView.vue';
|
||
|
||
const modelStore = useModelStore();
|
||
const tagsViewStore = useTagsViewStore();
|
||
const route = useRoute();
|
||
const routeKey = computed(() => route.path + Math.random());
|
||
|
||
// 智能配图页面隐藏底层 GisView（避免地图叠放冲突）
|
||
const isZhiNengPeiTu = computed(() => {
|
||
return route.path === '/zhiNengFenXi/zhiNengPeiTu/index';
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<section class="app-main">
|
||
<GisView v-if="!isZhiNengPeiTu" />
|
||
<div class="gi-panels">
|
||
<router-view v-slot="{ Component, route }" :key="routeKey">
|
||
<transition name="router-fade" mode="out-in">
|
||
<keep-alive :include="tagsViewStore.cachedViews">
|
||
<component :is="Component" :key="route.fullPath" />
|
||
</keep-alive>
|
||
</transition>
|
||
</router-view>
|
||
</div>
|
||
|
||
<div class="global-drawer-wrap">
|
||
<GlobalRightDrawer>
|
||
<!-- 物种介绍模式：鱼种下拉选择时展示（动物/植物介绍 + 监测表格）；否则展示基础信息 + 监测表格 -->
|
||
<template v-if="modelStore.globalDrawerMode === 'speciesIntro'">
|
||
<speciesIntroMod />
|
||
<monitoringTableMod />
|
||
</template>
|
||
<template v-else>
|
||
<basicInfoMod />
|
||
<monitoringTableMod />
|
||
</template>
|
||
</GlobalRightDrawer>
|
||
</div>
|
||
|
||
<MapModal
|
||
v-model:visible="modelStore.modalVisible"
|
||
:title="modelStore.title"
|
||
:tabs-config="modelStore.tabList"
|
||
/>
|
||
<!-- 鱼类分布 -->
|
||
|
||
<ylfbModal v-model:visible="modelStore.ylfbModalVisible" />
|
||
</section>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
@use '@/styles/variables.module.scss' as *;
|
||
.app-main {
|
||
min-height: calc(100vh - $layout-header-height - $locationbar-height);
|
||
width: 100%;
|
||
position: relative;
|
||
overflow: hidden;
|
||
background-color: #ffffff;
|
||
box-sizing: border-box;
|
||
}
|
||
.gi-panels {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
pointer-events: none;
|
||
}
|
||
.global-drawer-wrap {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
width: 450px;
|
||
height: 100%;
|
||
z-index: 100;
|
||
// 收起时整体不拦截点击，不遮挡页面局部抽屉；展开状态由 GlobalRightDrawer 内部 is-open 控制
|
||
pointer-events: none;
|
||
}
|
||
</style>
|