<template>
|
<div class="action-container" v-if="isActionEditShow">
|
<div class="more-btn" @click="toggleMoreAction">
|
<div class="label">更多</div>
|
<div class="icon"><EllipsisOutlined /></div>
|
</div>
|
<ul class="action-list" v-if="isMoreActionShow">
|
<li class="action-list_item" v-for="action in actionList" :key="action.key" @click="handleSettingAction(action)">
|
<div class="name">{{ action.name }}</div>
|
<div class="icon">
|
<img :src="action.icon" alt="icon" />
|
</div>
|
</li>
|
</ul>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { EllipsisOutlined } from '@ant-design/icons-vue'
|
import { actionList } from '/@/utils/cesium/use-map-draw'
|
import { useMyStore } from '/@/store'
|
import { message } from 'ant-design-vue'
|
const store = useMyStore()
|
|
const isMoreActionShow = ref<boolean>(false)
|
|
const isActionEditShow = computed(() => store.state.waylineTool.isShow)
|
|
const selectedPoint = computed(() => store.state.waylineTool.selectedPoint)
|
|
const toggleMoreAction = () => {
|
isMoreActionShow.value = !isMoreActionShow.value
|
}
|
|
const handleSettingAction = (action: { key: string }) => {
|
console.log(selectedPoint.value)
|
if (selectedPoint.value === undefined) return message.warn('请选择要编辑的航点！！')
|
}
|
|
onUnmounted(() => {
|
isMoreActionShow.value = false
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.action-container {
|
.more-btn {
|
position: absolute;
|
top: 50%;
|
right: 20px;
|
transform: translateY(-50%);
|
display: flex;
|
.label {
|
width: 60px;
|
line-height: 34px;
|
font-weight: bold;
|
text-align: right;
|
color: #fff;
|
text-shadow: 2px 2px 2px #000000;
|
}
|
.icon {
|
width: 34px;
|
height: 34px;
|
color: #fff;
|
line-height: 34px;
|
text-align: center;
|
font-size: 25px;
|
margin-left: 7px;
|
background-color: rgba(0, 0, 0, .5);
|
cursor: pointer;
|
}
|
}
|
.action-list {
|
position: absolute;
|
top: 50%;
|
transform: translateY(-50%);
|
right: 120px;
|
padding: 0;
|
margin: 0;
|
list-style-type: none;
|
&_item {
|
width: fit-content;
|
height: 34px;
|
display: flex;
|
color: #fff;
|
margin-top: 10px;
|
&:first-child {
|
margin: 0;
|
}
|
.name {
|
width: 120px;
|
line-height: 34px;
|
text-align: right;
|
font-weight: bold;
|
text-shadow: 2px 2px 2px #000000;
|
}
|
.icon {
|
width: 34px;
|
height: 34px;
|
padding: 3px;
|
margin-left: 7px;
|
background-color: rgba(0, 0, 0, .5);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
cursor: pointer;
|
img {
|
width: 25px;
|
height: 25px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
