From 46442b030db95ae97b754711c6dc786376c3a6e1 Mon Sep 17 00:00:00 2001
From: GuLiMmo <2820890765@qq.com>
Date: Thu, 14 Mar 2024 17:28:36 +0800
Subject: [PATCH] update: kmz修改保持方式修改
---
src/pages/page-web/projects/components/route-edit/components/setting.vue | 272 +++++++++++++++++------------------------------------
1 files changed, 89 insertions(+), 183 deletions(-)
diff --git a/src/pages/page-web/projects/components/route-edit/components/setting.vue b/src/pages/page-web/projects/components/route-edit/components/setting.vue
index 86560dc..05a641d 100644
--- a/src/pages/page-web/projects/components/route-edit/components/setting.vue
+++ b/src/pages/page-web/projects/components/route-edit/components/setting.vue
@@ -5,19 +5,20 @@
<div class="setting-content">
<div class="start-point common">
<div class="title">起飞点</div>
- <div class="value">{{ missionConfigSetting.takeOffRefPoint ? '已设置' : '未设置' }}</div>
+ <div class="value">
+ {{ xmlTemplate.missionConfig?.takeOffRefPoint['#text'] !== '' ? '已设置' : '未设置' }}
+ </div>
</div>
<div class="photo-setting common">
<div class="title">拍照设置</div>
<ul class="select-box">
- <li
- class="select-item"
- :style="{
- '--settingColor': folderSetting.payloadParam.imageFormat.includes(item.value) ? '#409eff' : '#3c3c3c',
- }"
- v-for="item in photoSetting"
- :key="item.value"
- @click="selectPhotoSetting(item.value)">
+ <li class="select-item" v-for="item in photoSetting" :key="item.value" :style="{
+ '--settingColor': xmlTemplate.Folder.payloadParam?.imageFormat['#text']
+ .split(',')
+ .includes(item.value)
+ ? '#409eff'
+ : '#3c3c3c',
+ }" @click="selectPhotoSetting(item.value)">
{{ item.title }}照片
</li>
</ul>
@@ -37,7 +38,7 @@
<div class="climb-mode common">
<a-tooltip placement="right" :title="tipDescriptionEnums.climbModeTip">
<div class="mode-box">
- <a-radio-group v-model:value="missionConfigSetting.flyToWaylineMode" button-style="solid">
+ <a-radio-group v-model:value="xmlTemplate.missionConfig.flyToWaylineMode['#text']" button-style="solid">
<a-radio-button value="safely">垂直爬升</a-radio-button>
<a-radio-button value="pointToPoint">倾斜爬升</a-radio-button>
</a-radio-group>
@@ -49,9 +50,9 @@
<ul class="parameter-btn">
<li @click="numberControls(true, 100, 'takeOffSecurityHeight')">+100</li>
<li @click="numberControls(true, 10, 'takeOffSecurityHeight')">+10</li>
- <li>
- <span>{{ missionConfigSetting.takeOffSecurityHeight }}</span
- >m
+ <li class="parameter-input">
+ <a-input-number :min="2" :max="1500"
+ v-model:value="xmlTemplate.missionConfig.takeOffSecurityHeight['#text']"></a-input-number>m
</li>
<li @click="numberControls(false, 100, 'takeOffSecurityHeight')">-100</li>
<li @click="numberControls(false, 10, 'takeOffSecurityHeight')">-10</li>
@@ -61,32 +62,27 @@
</div>
<!-- 高度模式 -->
<div class="height-mode common">
- <a-tooltip
- placement="right"
- :title="tipDescriptionEnums[folderSetting.waylineCoordinateSysParam.heightMode]">
+ <a-tooltip placement="right"
+ :title="tipDescriptionEnums[xmlTemplate.Folder.waylineCoordinateSysParam.heightMode['#text']]">
<div class="title">航线高度模式</div>
<div class="mode-box">
- <a-radio-group v-model:value="folderSetting.waylineCoordinateSysParam.heightMode" button-style="solid">
+ <a-radio-group v-model:value="xmlTemplate.Folder.waylineCoordinateSysParam.heightMode['#text']"
+ button-style="solid">
<a-radio-button v-for="item in heightModeSetting" :key="item.value" :value="item.value">{{
- item.title
- }}</a-radio-button>
+ item.title
+ }}</a-radio-button>
</a-radio-group>
</div>
<div class="parameter-tool">
<div class="example-img">
- <img
- :src="
- folderSetting.waylineCoordinateSysParam.heightMode === heightModeSetting[0].value
- ? heightModeSetting[0].img
- : heightModeSetting[1].img
- "
- alt="height-img" />
+ <img :src="true ? heightModeSetting[0].img : heightModeSetting[1].img" alt="height-img" />
</div>
<div class="parameter-btn">
<li @click="numberControls(true, 100, 'globalHeight')">+100</li>
<li @click="numberControls(true, 10, 'globalHeight')">+10</li>
- <li>
- <span>{{ Math.round(folderSetting.globalHeight) }}</span> m
+ <li class="parameter-input">
+ <a-input-number :min="0" :max="10000"
+ v-model:value="xmlTemplate.Folder.globalHeight['#text']"></a-input-number>m
</li>
<li @click="numberControls(false, 100, 'globalHeight')">-100</li>
<li @click="numberControls(false, 10, 'globalHeight')">-10</li>
@@ -100,11 +96,9 @@
<div class="speed-box">
<div class="subtract" @click="numberControls(false, 1, 'autoFlightSpeed')">-</div>
<div class="text">
- <a-input-number
- :min="1"
- :max="15"
- class="value"
- v-model:value="folderSetting.autoFlightSpeed"></a-input-number>
+ <a-input-number v-model:value="xmlTemplate.Folder.autoFlightSpeed['#text']" :min="1" :max="15"
+ class="value">
+ </a-input-number>
m / s
</div>
<div class="add" @click="numberControls(true, 1, 'autoFlightSpeed')">+</div>
@@ -120,7 +114,7 @@
<script setup lang="ts">
import { reactive, defineProps } from 'vue'
import { tipDescriptionEnums } from './enums'
-import useKmzTsa, { kmlStr } from '/@/utils/cesium/use-kmz-tsa'
+import useKmzTsa, { kmlStr, template as xmlTemplate } from '/@/utils/cesium/use-kmz-tsa'
import useMapDraw from '/@/utils/cesium/use-map-draw'
import { getKmlParams } from '/@/utils/cesium/kmz'
import { cesiumOperation } from '/@/hooks/use-cesium-tsa'
@@ -132,15 +126,14 @@
const mapDraw = useMapDraw('', '', '', global)
const { removeAllDataSource, removeAllPoint } = cesiumOperation()
-const kmzUtils = useKmzTsa()
+interface setting {
+ imageFormat: string[]
+}
const props = defineProps({
loadCompleted: Boolean,
})
-const getResource = (name: string) => {
- return new URL(`/src/assets/icons/${name}`, import.meta.url).href
-}
const getSvgResource = (name: string) => {
return new URL(`/src/assets/svg/${name}`, import.meta.url).href
}
@@ -148,37 +141,12 @@
const climbImage = getSvgResource('climb.svg')
const imgs = []
-const missionConfigSetting = reactive<missionConfig | any>({
- flyToWaylineMode: 'safely',
- // 航线结束动作
- finishAction: 'goHome',
- // 失控是否继续执行航线
- exitOnRCLost: 'goContinue',
- // 失控动作
- executeRCLostAction: 'goBack',
- // 安全起飞高度
- takeOffSecurityHeight: 20,
- // 全局航线速度
- globalTransitionalSpeed: 10,
- // 参考起飞点
- takeOffRefPoint: '',
- // 参考起飞点海拔高度
- takeOffRefPointAGLHeight: 0,
- // 全局返航高度
- globalRTHHeight: 100,
- droneInfo: {
- droneEnumValue: 67,
- droneSubEnumValue: 0,
- },
- payloadInfo: {
- payloadEnumValue: 52,
- payloadSubEnumValue: 1,
- payloadPositionIndex: 0,
- },
-})
-
// 拍照设置
-const photoSetting = reactive([
+interface photoSetting {
+ title: string
+ value: string
+}
+const photoSetting = reactive<photoSetting[]>([
{ title: '广角', value: 'wide' },
{ title: '变焦', value: 'zoom' },
{ title: '红外', value: 'ir' },
@@ -198,128 +166,38 @@
},
])
-// folder设置
-const folderSetting = reactive<Folder | any>({
- templateType: 'waypoint',
- templateId: 0,
- waylineCoordinateSysParam: {
- coordinateMode: 'WGS84',
- heightMode: 'EGM96',
- },
- autoFlightSpeed: 10,
- globalHeight: 100,
- payloadParam: {
- payloadPositionIndex: 0,
- imageFormat: '',
- },
- caliFlightEnable: 0,
- gimbalPitchMode: 'manual',
-})
-
// 计算
const numberControls = (isAdd: boolean, computeVal: number, key: string) => {
- if (isAdd) {
- if (missionConfigSetting[key]) {
- missionConfigSetting[key] += computeVal
- } else {
- folderSetting[key] += computeVal
- }
- } else {
- if (missionConfigSetting[key]) {
- missionConfigSetting[key] -= computeVal
- } else {
- if (folderSetting[key] - computeVal <= 0) {
- return message.warn('飞行高度较低！！！！')
- }
- folderSetting[key] -= computeVal
- }
+ let obj = { '#text': 0 }
+ if (key === 'takeOffSecurityHeight') {
+ obj = xmlTemplate.value.missionConfig.takeOffSecurityHeight
}
-
if (key === 'globalHeight') {
- const entities = mapDraw.kmlEntities.value
- removeAllDataSource()
- removeAllPoint()
- mapDraw.drawWayline(entities, kmlStr.value)
+ obj = xmlTemplate.value.Folder.globalHeight
}
-}
-
-// 获取机场默认值
-watch(
- () => props.loadCompleted,
- (val) => {
- if (val) {
- getDefaultValue(missionConfigSetting)
- getDefaultValue(folderSetting)
- }
- },
-)
-const getDefaultValue = (setting: any) => {
- Object.keys(setting).forEach((key: string) => {
- const param: RegExpMatchArray | any = getKmlParams(kmlStr.value, true, {
- name: key,
- findRegx: '([\\s\\S]*?)',
- })
- if (Object.prototype.toString.call(setting[key]) === '[object Object]') {
- const value: RegExpMatchArray | any = getKmlParams(param[0], true, {
- name: key,
- findRegx: '([\\s\\S]*?)',
- })
- Object.keys(setting[key]).forEach((v) => {
- const keyValue: RegExpMatchArray | any = getKmlParams(value[1], true, {
- name: v,
- findRegx: '([\\s\\S]*?)',
- })
- if (!Number(keyValue[1])) {
- setting[key][v] = keyValue[1]
- } else {
- setting[key][v] = Number(keyValue[1])
- }
- })
- } else {
- if (!Number(param[1])) {
- setting[key] = param[1]
- } else {
- setting[key] = Number(param[1])
- }
- }
- })
- return setting
-}
-
-// 全局设置写入kmz文件
-watch(
- () => missionConfigSetting,
- (settingVal) => {
- if (!props.loadCompleted) return
- kmzUtils.edit(settingVal, 'missionConfig', true)
- },
- {
- deep: true,
- },
-)
-
-// folder设置写入kmz文件
-watch(
- () => folderSetting,
- (newVal) => {
- if (!props.loadCompleted) return
- kmzUtils.edit(newVal, 'Folder', true)
- },
- {
- deep: true,
- },
-)
-
-// 拍照设置
-const selectPhotoSetting = (value: string) => {
- const arr: string[] = folderSetting.payloadParam.imageFormat.split(',')
- const index: number = arr.findIndex((item) => item === value)
- if (index !== -1) {
- arr.splice(index, 1)
+ if (key === 'autoFlightSpeed') {
+ obj = xmlTemplate.value.Folder.autoFlightSpeed
+ }
+ let value = Number(obj['#text'])
+ if (isAdd) {
+ value += computeVal
} else {
- arr.push(value)
+ value -= computeVal
}
- folderSetting.payloadParam.imageFormat = arr.join(',')
+ obj['#text'] = value
+}
+
+// 拍照选择
+const selectPhotoSetting = (value: string) => {
+ const imageFormat = xmlTemplate.value.Folder.payloadParam.imageFormat
+ const imageFormatArr = imageFormat['#text'].split(',')
+ if (imageFormatArr.includes(value)) {
+ const index = imageFormatArr.findIndex((item: string) => item === value)
+ imageFormatArr.splice(index, 1)
+ } else {
+ imageFormatArr.push(value)
+ }
+ xmlTemplate.value.Folder.payloadParam.imageFormat['#text'] = imageFormatArr.join(',')
}
</script>
@@ -349,6 +227,7 @@
.start-point {
display: flex;
justify-content: flex-start;
+
.value {
margin-left: auto;
color: #409eff;
@@ -472,6 +351,31 @@
}
}
}
+
+ .parameter-input {
+ display: flex;
+ align-items: center;
+
+ :deep() {
+ .ant-input-number {
+ background-color: transparent;
+ color: #409eff;
+ font-size: 23px;
+ border: 0;
+
+ .ant-input-number-handler-wrap {
+ display: none;
+ }
+
+ .ant-input-number-input-wrap {
+ input {
+ font-weight: bold;
+ text-align: center;
+ }
+ }
+ }
+ }
+ }
}
}
}
@@ -526,8 +430,10 @@
}
}
}
+
:deep() {
.ant-popover-content {
+
.ant-popover-arrow,
.ant-popover-inner {
background-color: #101010;
--
Gitblit v1.9.3