From 61f272f4a510ff5cbb1d35283fd3399d605b28a5 Mon Sep 17 00:00:00 2001
From: GuLiMmo <2820890765@qq.com>
Date: Fri, 22 Mar 2024 14:09:06 +0800
Subject: [PATCH] update
---
src/components/waylinetool/event-edit.vue | 153 ++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 150 insertions(+), 3 deletions(-)
diff --git a/src/components/waylinetool/event-edit.vue b/src/components/waylinetool/event-edit.vue
index 2a5c461..c708160 100644
--- a/src/components/waylinetool/event-edit.vue
+++ b/src/components/waylinetool/event-edit.vue
@@ -12,8 +12,33 @@
</div>
</div>
<div class="event-edit">
+ <!-- 单拍 -->
<template v-if="currentPointEvent.aciton.key === 'takePhoto'">
- 1
+ <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>
@@ -22,7 +47,8 @@
</template>
<script lang="ts" setup>
-import { DeleteOutlined } from '@ant-design/icons-vue'
+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'
@@ -33,25 +59,79 @@
// 当前点事件
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 = 1
+ 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>
@@ -104,6 +184,73 @@
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 {
--
Gitblit v1.9.3