<template>
|
<div class="event-container" v-if="isActionEditShow">
|
<div class="edit-box" v-if="currentPointEvent">
|
<div class="header">
|
<div class="action-name">
|
<img :src="currentPointEvent.aciton.icon" alt="icon" />
|
<span>{{ currentPointEvent.aciton.name }}</span>
|
</div>
|
<div class="action-index">{{ currentPointEvent.actionIndex }}</div>
|
<div class="action-del">
|
<span @click="handleDelAction"><DeleteOutlined /></span>
|
</div>
|
</div>
|
<div class="event-edit">
|
<template v-if="currentPointEvent.aciton.key === 'takePhoto'">
|
1
|
</template>
|
</div>
|
</div>
|
<div class="map-box"></div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { DeleteOutlined } from '@ant-design/icons-vue'
|
import { useMyStore } from '/@/store'
|
import { actionList } from '/@/utils/cesium/use-map-draw'
|
import { template as xmlTemplate } from '/@/utils/cesium/use-kmz-tsa'
|
|
const store = useMyStore()
|
// 事件编辑是否显示
|
const isActionEditShow = computed(() => store.state.waylineTool.isShow)
|
// 当前点事件
|
const selectedAction = computed(() => store.state.waylineTool.selectedAction)
|
|
const currentPointEvent = computed(() => {
|
const placemarks = xmlTemplate.value.Folder.Placemark
|
const pointIndex = store.state.waylineTool.selectedPoint
|
if (pointIndex === undefined) return null
|
const currentPoint = placemarks[pointIndex]
|
const actions = currentPoint.actionGroup.action
|
let actionIndex = 1
|
if (Array.isArray(actions)) {
|
actionIndex = actions.findIndex((item: { actionActuatorFunc: { '#text': string } }) => {
|
return item.actionActuatorFunc['#text'] === selectedAction.value.key
|
})
|
}
|
return {
|
aciton: selectedAction.value,
|
actionIndex: `${pointIndex + 1}-${actionIndex + 1}`,
|
}
|
})
|
|
const handleDelAction = () => {}
|
</script>
|
|
<style lang="scss" scoped>
|
.event-container {
|
width: 400px;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
background: rgb(35, 35, 35);
|
color: #fff;
|
.edit-box {
|
width: 400px;
|
height: calc(100% - 300px);
|
.header {
|
padding: 0 15px;
|
height: 50px;
|
border-bottom: 1px solid rgb(79, 79, 79);
|
display: flex;
|
align-items: center;
|
div {
|
flex: 1;
|
flex-shrink: 0;
|
}
|
.action-name {
|
display: flex;
|
align-items: center;
|
img {
|
width: 15px;
|
height: 15px;
|
margin-right: 3px;
|
}
|
}
|
.action-index {
|
text-align: center;
|
font-weight: bold;
|
}
|
.action-del {
|
display: flex;
|
justify-content: flex-end;
|
span {
|
cursor: pointer;
|
&:hover {
|
color: #409eff;
|
}
|
}
|
}
|
}
|
.event-edit {
|
width: 100%;
|
height: calc(100% - 50px);
|
padding: 15px;
|
overflow: auto;
|
}
|
}
|
.map-box {
|
width: 400px;
|
height: 300px;
|
}
|
}
|
</style>
|
