<template>
|
<div class="project_list">
|
<div :class="[isHidden? 'w50' : 'left_content']">
|
<router-view />
|
</div>
|
<div class="right_content">
|
<div class="map">
|
<!-- <Map /> -->
|
<GMap />
|
</div>
|
<div class="media-wrapper" v-if="root.$route.name === ERouterName.MEDIA">
|
<MediaPanel />
|
</div>
|
<div class="task-wrapper" v-if="root.$route.name === ERouterName.TASK">
|
<TaskPanel />
|
</div>
|
<div class="device-wrapper" v-if="root.$route.name === ERouterName.IMPLEMENT">
|
<Devices />
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
// import Map from '/@/components/cesiumMap/cesium.vue'
|
import GMap from '/@/components/GMap.vue'
|
import MediaPanel from '/@/components/MediaPanel.vue'
|
import TaskPanel from '/@/components/task/TaskPanel.vue'
|
import Devices from '/@/pages/page-web/projects/devices.vue'
|
import { EBizCode, ERouterName } from '/@/types'
|
import { getRoot } from '/@/root'
|
const route = useRoute()
|
const isHidden = computed(() => {
|
const flag = !!route.meta?.hidden
|
return flag
|
})
|
const root = getRoot()
|
</script>
|
|
<style scoped lang="scss">
|
.project_list {
|
display: flex;
|
transition: width 0.2s ease;
|
height: 100%;
|
width: 100%;
|
.w50 {
|
width: 50px;
|
max-height: 100vh;
|
background-color: black;
|
color: $text-white-basic !important;
|
}
|
.left_content {
|
width: 370px;
|
max-height: 100vh;
|
background-color: black;
|
color: $text-white-basic !important;
|
}
|
|
.right_content {
|
position: relative;
|
flex: 1;
|
|
.map {
|
width: 100%;
|
height: 100%;
|
}
|
|
.media-wrapper,
|
.device-wrapper,
|
.task-wrapper {
|
position: absolute;
|
top: 0;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
z-index: 100;
|
background: #f6f8fa;
|
}
|
}
|
}
|
</style>
|
