<!--
|
* @Author: GuLiMmo 2820890765@qq.com
|
* @Date: 2024-03-27 15:15:50
|
* @LastEditors: GuLiMmo 2820890765@qq.com
|
* @LastEditTime: 2024-04-02 11:15:06
|
* @FilePath: /drone-web/src/components/waylinetool/component/interval-shoot.vue
|
* @Description: 航点事件-等距拍摄
|
* Copyright (c) 2024 by GuLiMmo, All Rights Reserved.
|
-->
|
|
<template>
|
<div class="container">
|
<div :class="['fileSuffix', isInputShow && 'no-select']">
|
<span>DJI_YYYYMMDDhhmm_XXX_</span>
|
<span class="icon" @click="isInputShow = !isInputShow"><EditOutlined /></span>
|
</div>
|
<div class="fileSuffix-input" v-if="isInputShow">
|
<a-input v-model:value="fileSuffix" placeholder="请输入文件后缀名称" size="small"></a-input>
|
<a-button type="primary" shape="circle" size="small" @click="confirmInput">
|
<template #icon>
|
<CheckOutlined />
|
</template>
|
</a-button>
|
<a-button type="danger" shape="circle" size="small" @click="cencalInput">
|
<template #icon>
|
<CloseOutlined />
|
</template>
|
</a-button>
|
</div>
|
<ul class="btn-group">
|
<li
|
:class="[
|
'btn',
|
isGlobalPhotoFormat && 'disabled-btn',
|
!defaultParams.payloadLensIndex?.['#text'].includes('wide') && 'no-btn-selected',
|
]"
|
@click="!isGlobalPhotoFormat && addFormatEvent('wide')">
|
广角照片
|
</li>
|
<li
|
:class="[
|
'btn',
|
isGlobalPhotoFormat && 'disabled-btn',
|
!defaultParams.payloadLensIndex?.['#text'].includes('zoom') && 'no-btn-selected',
|
]"
|
@click="!isGlobalPhotoFormat && addFormatEvent('zoom')">
|
变焦照片
|
</li>
|
<li :class="['btn', !isGlobalPhotoFormat && 'no-btn-selected']" @click="addFormatEvent('global')">跟随全局</li>
|
</ul>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import _ from 'lodash'
|
import { defineProps, ref } from 'vue'
|
import { template as xmlJson } from '/@/utils/cesium/use-kmz-tsa'
|
import { EditOutlined, CheckOutlined, CloseOutlined } from '@ant-design/icons-vue'
|
import { message } from 'ant-design-vue'
|
|
interface serialProp {
|
placemark: number
|
action: number
|
}
|
|
interface text {
|
'#text': any
|
}
|
|
interface takePhoto {
|
fileSuffix?: text
|
payloadLensIndex: text
|
payloadPositionIndex: text
|
useGlobalPayloadLensIndex: text
|
}
|
|
const isInputShow = ref<boolean>(false)
|
|
const fileSuffix = ref<string>('')
|
|
const defaultParams = ref<takePhoto | any>({
|
fileSuffix: { '#text': null },
|
payloadLensIndex: { '#text': null },
|
payloadPositionIndex: { '#text': null },
|
useGlobalPayloadLensIndex: { '#text': null },
|
})
|
|
const confirmInput = () => {
|
defaultParams.value.fileSuffix['#text'] = fileSuffix.value
|
message.success('修改拍摄照片文件后缀成功！！')
|
}
|
|
const cencalInput = () => {
|
fileSuffix.value = defaultFileSuffix.value
|
defaultParams.value.fileSuffix['#text'] = defaultFileSuffix.value
|
message.success('恢复初始拍摄照片文件后缀成功！！')
|
}
|
|
const props = defineProps<{
|
serial: serialProp
|
}>()
|
|
const defaultFileSuffix = ref<string>('')
|
const getDefaultParams = (serial: serialProp) => {
|
const placemarkJson = xmlJson.value.Folder.Placemark[serial.placemark]
|
let action = placemarkJson.actionGroup.action
|
if (Array.isArray(action)) {
|
action = action[serial.action]
|
}
|
const actionActuatorFuncParam = action.actionActuatorFuncParam
|
defaultParams.value = actionActuatorFuncParam
|
fileSuffix.value = actionActuatorFuncParam.fileSuffix?.['#text'] || ''
|
defaultFileSuffix.value = _.cloneDeep(fileSuffix.value)
|
isInputShow.value = !!defaultParams.value.fileSuffix
|
}
|
|
// 判断当前是否使用全局照片设置
|
const isGlobalPhotoFormat = computed(() => Number(defaultParams.value.useGlobalPayloadLensIndex['#text']))
|
|
// 照片格式
|
const addFormatEvent = (value: string) => {
|
if (value === 'global') {
|
defaultParams.value.useGlobalPayloadLensIndex['#text'] = Number(!isGlobalPhotoFormat.value)
|
if (!isGlobalPhotoFormat.value) {
|
defaultParams.value.payloadLensIndex = { '#text': 'zoom,wide' }
|
} else {
|
delete defaultParams.value.payloadLensIndex
|
}
|
} else {
|
if (!defaultParams.value.payloadLensIndex) {
|
defaultParams.value.payloadLensIndex = { '#text': '' }
|
}
|
const payloadLensIndex = defaultParams.value.payloadLensIndex['#text']
|
const payloadLensIndexArr = payloadLensIndex.split(',')
|
if (!payloadLensIndex) {
|
defaultParams.value.payloadLensIndex['#text'] = value
|
} else {
|
const index = payloadLensIndexArr.findIndex((item: string) => item === value)
|
if (index === -1) {
|
payloadLensIndexArr.push(value)
|
} else {
|
payloadLensIndexArr.splice(index, 1)
|
}
|
defaultParams.value.payloadLensIndex['#text'] = payloadLensIndexArr.join(',')
|
}
|
}
|
}
|
|
// 最新值
|
watch(
|
() => defaultParams.value,
|
(newParams) => {
|
console.log(xmlJson.value)
|
},
|
{
|
deep: true,
|
},
|
)
|
|
// 默认值
|
watch(
|
() => props.serial,
|
(newVal: serialProp) => {
|
getDefaultParams(newVal)
|
},
|
{
|
deep: true,
|
immediate: true,
|
},
|
)
|
</script>
|
|
<style lang="scss" scoped>
|
.container {
|
width: 100%;
|
height: 100%;
|
.fileSuffix {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.icon {
|
cursor: pointer;
|
&:hover {
|
color: #409eff;
|
}
|
}
|
}
|
.fileSuffix-input {
|
margin-top: 10px;
|
display: flex;
|
input {
|
background-color: transparent;
|
color: #fff;
|
}
|
.ant-btn {
|
margin-left: 10px;
|
}
|
}
|
.btn-group {
|
list-style-type: none;
|
margin: 15px 0 0 0;
|
padding: 0;
|
display: flex;
|
gap: 10px;
|
justify-content: flex-start;
|
.btn {
|
font-size: 13px;
|
padding: 2px 10px;
|
background-color: #409eff;
|
border-radius: 999px;
|
cursor: pointer;
|
font-weight: bold;
|
&:last-child {
|
margin-left: auto;
|
}
|
}
|
}
|
}
|
|
.no-select {
|
color: hsla(0, 0%, 100%, 0.45);
|
}
|
|
.no-btn-selected {
|
background-color: hsla(0, 0%, 100%, 0.45) !important;
|
border: hsla(0, 0%, 100%, 0.45) !important;
|
}
|
.disabled-btn {
|
cursor: not-allowed !important;
|
background-color: #314768 !important;
|
border: #314768 !important;
|
color: #ccc;
|
}
|
</style>
|
