<template>
|
<el-affix>
|
<el-menu
|
ref="menuRef"
|
default-active="scene"
|
ellipsis
|
mode="horizontal"
|
style="max-width: 600px; background-color: aliceblue"
|
>
|
<el-menu-item
|
v-for="item in menu"
|
:key="item.path"
|
:index="item.path"
|
@click="navPage"
|
>{{ item.name }}</el-menu-item
|
>
|
</el-menu>
|
</el-affix>
|
<router-view v-slot="{ Component, route }" :style="'height: ' + height">
|
<keep-alive>
|
<component
|
v-if="route.meta.keepAlive"
|
:is="Component"
|
:key="route.name"
|
/>
|
</keep-alive>
|
<component v-if="!route.meta.keepAlive" :is="Component" :key="route.name" />
|
</router-view>
|
</template>
|
<script setup>
|
import { ref, onMounted, provide } from 'vue';
|
import { useRouter, useRoute } from 'vue-router';
|
|
const router = useRouter();
|
const route = useRoute();
|
|
const menuRef = ref(null);
|
const height = ref('calc(100vh - 64px)');
|
|
const menu = ref([
|
{
|
name: '场景清单',
|
path: 'scene',
|
selected: true
|
},
|
{
|
name: '评估清单',
|
path: 'evaluate'
|
},
|
{
|
name: '巡查信息',
|
path: 'inspection'
|
},
|
{
|
name: '监测数据',
|
path: 'monitorData'
|
}
|
]);
|
|
const navPage = (item) => {
|
if (item.index) {
|
router.push({
|
path: item.index
|
});
|
}
|
};
|
|
function calcTableHeight() {
|
const h = menuRef.value.$el.offsetHeight;
|
return `calc(100vh - ${h}px - 60px - var(--el-main-padding) * 2)`;
|
}
|
|
onMounted(() => {
|
height.value = calcTableHeight();
|
});
|
|
// 提供给内部组件视图最大高度
|
provide('viewHeight', height);
|
</script>
|
<style scoped></style>
|
