<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'">
|
<div class="take-photo">
|
<div class="title">
|
<span
|
:style="{
|
color: isTakePhotoNameShow || takePhotoSetting.fileSuffix ? 'rgba(255,255,255,0.4)' : '#fff',
|
}"
|
>DJI_YYYYMMDDhhmm_XXX_</span
|
>
|
<span @click="isTakePhotoNameShow = !isTakePhotoNameShow"><EditOutlined /></span>
|
</div>
|
<div class="title-name-input" v-if="isTakePhotoNameShow">
|
<div class="input"><a-input size="small" v-model:value="takePhotoSetting.fileSuffix"></a-input></div>
|
<div class="btn">
|
<span class="check"><CheckOutlined /></span>
|
<span class="close"><CloseOutlined /></span>
|
</div>
|
</div>
|
<div class="photo-format">
|
<a-button type="primary" shape="round" size="small" @click="photoFormatClick('wide')">广角照片</a-button>
|
<a-button type="primary" shape="round" size="small" @click="photoFormatClick('zoom')">变焦照片</a-button>
|
<a-button type="primary" shape="round" size="small" @click="photoFormatClick('global')"
|
>跟随全局</a-button
|
>
|
</div>
|
</div>
|
</template>
|
</div>
|
</div>
|
<div class="map-box"></div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import _ from 'lodash'
|
import { DeleteOutlined, EditOutlined, CheckOutlined, CloseOutlined } 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 serial = reactive<{
|
placemark: number
|
action: number
|
}>({
|
placemark: 0,
|
action: 0,
|
})
|
const currentPointEvent = computed(() => {
|
const placemarks = xmlTemplate.value.Folder.Placemark
|
const pointIndex = store.state.waylineTool.selectedPoint
|
if (pointIndex === undefined) return null
|
const currentPoint = placemarks[pointIndex]
|
serial.placemark = pointIndex
|
const actions = currentPoint.actionGroup.action
|
let actionIndex = 0
|
if (Array.isArray(actions)) {
|
actionIndex = actions.findIndex((item: { actionActuatorFunc: { '#text': string } }) => {
|
return item.actionActuatorFunc['#text'] === selectedAction.value.key
|
})
|
}
|
serial.action = actionIndex
|
return {
|
aciton: selectedAction.value,
|
actionIndex: `${pointIndex + 1}-${actionIndex + 1}`,
|
}
|
})
|
|
// 单拍
|
const isTakePhotoNameShow = ref<boolean>(false)
|
const takePhotoSetting = reactive({
|
fileSuffix: '',
|
payloadLensIndex: '',
|
useGlobalPayloadLensIndex: 0,
|
})
|
const photoFormatClick = (value: string) => {
|
if (value === 'global') {
|
takePhotoSetting.useGlobalPayloadLensIndex = 1
|
} else {
|
let formats = takePhotoSetting.payloadLensIndex.split(',')
|
const index = formats.findIndex((item: string) => item === value)
|
if (index === -1) {
|
if (takePhotoSetting.payloadLensIndex === '') {
|
formats = [value]
|
} else {
|
formats.push(value)
|
}
|
} else {
|
formats.splice(index, 1)
|
}
|
takePhotoSetting.payloadLensIndex = formats.join(',')
|
}
|
addActionParam(takePhotoSetting)
|
}
|
|
const handleDelAction = () => {}
|
|
// 加入事件参数
|
const addActionParam = <T extends { [key: string] : string }, >(params: T): void => {
|
const obj = _.cloneDeep(params)
|
const placemarks = xmlTemplate.value.Folder.Placemark
|
let aciton = placemarks[serial.placemark].actionGroup?.action
|
if (Array.isArray(aciton)) {
|
aciton = aciton[serial.action]
|
}
|
console.log(aciton)
|
const actionActuatorFuncParam = aciton.actionActuatorFuncParam
|
// Object.keys(obj).forEach((key: string) => {
|
// if (!obj[key]) {
|
// delete obj[key]
|
// }
|
// })
|
}
|
</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;
|
// 单排
|
.take-photo {
|
.title {
|
display: flex;
|
justify-content: flex-end;
|
span {
|
&:first-child {
|
margin-right: auto;
|
}
|
&:last-child {
|
cursor: pointer;
|
&:hover {
|
color: #409eff;
|
}
|
}
|
}
|
}
|
.title-name-input {
|
margin-top: 5px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
.input {
|
flex: 1;
|
input {
|
background-color: transparent;
|
color: #fff;
|
}
|
}
|
.btn {
|
width: 50px;
|
display: flex;
|
gap: 10px;
|
justify-content: center;
|
align-items: center;
|
span {
|
cursor: pointer;
|
}
|
.check {
|
color: #67d15a;
|
}
|
.close {
|
color: red;
|
}
|
}
|
}
|
.photo-format {
|
margin-top: 20px;
|
display: flex;
|
justify-content: flex-start;
|
.ant-btn {
|
margin-left: 10px;
|
font-weight: bold;
|
&:first-child {
|
margin: 0;
|
}
|
&:nth-child(3) {
|
margin-left: auto;
|
}
|
}
|
}
|
}
|
|
.cannot-select {
|
background-color: #3c3c3c;
|
border: 0;
|
}
|
}
|
}
|
.map-box {
|
width: 400px;
|
height: 300px;
|
}
|
}
|
</style>
|
