<template>
|
<div class="profile-container" v-if="isShow">
|
<div class="wayline-author">
|
<div class="wayline-author__file-name" >{{ author.fileName }}</div>
|
<div class="wayline-author__name"><UserOutlined /> {{ author.author }}</div>
|
</div>
|
<ul class="wayline-details">
|
<li class="wayline-details__info" v-for="(info, index) in details" :key="index">
|
<div class="title">{{ info.title }}</div>
|
<div class="value">{{ info.value }}</div>
|
</li>
|
</ul>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ERouterName } from '/@/types/index'
|
import { UserOutlined } from '@ant-design/icons-vue'
|
import { waylineDetails } from '/@/utils/cesium/use-map-draw'
|
import { fileAuthor, kmlStr } from '/@/utils/cesium/use-kmz-tsa'
|
|
const author = reactive({
|
fileName: '',
|
author: '',
|
})
|
const details = ref<any>([])
|
const route = useRoute()
|
|
const isShow = computed(() => !kmlStr.value && isWaylineRoute && author.fileName && author.author && details.value.length > 0)
|
|
watch(
|
() => fileAuthor,
|
(val) => {
|
author.fileName = val.name
|
author.author = val.author
|
},
|
{
|
deep: true,
|
},
|
)
|
|
watch(
|
() => waylineDetails,
|
(val) => {
|
details.value = val
|
},
|
{
|
deep: true,
|
},
|
)
|
|
const isWaylineRoute = ref<boolean>(false)
|
watch(
|
() => route,
|
(val) => {
|
if (val.name === ERouterName.WAYLINE) {
|
isWaylineRoute.value = true
|
} else {
|
isWaylineRoute.value = false
|
}
|
}, {
|
deep: true,
|
immediate: true
|
}
|
)
|
</script>
|
|
<style lang="scss" scoped>
|
.profile-container {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
top: 0;
|
left: 0;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
pointer-events: none;
|
.wayline-author {
|
color: #fff;
|
font-weight: bold;
|
padding: 10px;
|
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
|
&__file-name {
|
font-size: 17px;
|
}
|
}
|
.wayline-details {
|
width: 100%;
|
height: 70px;
|
padding: 0;
|
margin: 0;
|
background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
&__info {
|
width: fit-content;
|
list-style-type: none;
|
margin-left: 10px;
|
font-weight: bold;
|
.title {
|
color: rgba(255, 255, 255, 0.65);
|
text-align: center;
|
}
|
.value {
|
color: #fff;
|
text-align: center;
|
font-size: 17px;
|
}
|
}
|
}
|
}
|
</style>
|
