From aec00ecc093be803860c8675cbe1c4c776a7cb4e Mon Sep 17 00:00:00 2001
From: GuLiMmo <2820890765@qq.com>
Date: Tue, 19 Mar 2024 17:49:21 +0800
Subject: [PATCH] update： 新建航线、事件编辑、kmz文件问题修改
---
src/pages/page-web/projects/components/route-edit/components/setting.vue | 318 ++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 240 insertions(+), 78 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 d815c63..82b043a 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
@@ -1,21 +1,33 @@
<template>
<div class="setting">
- <a-popover
- placement="bottom"
- trigger="click"
- :getPopupContainer="(triggerNode: any) => triggerNode.parentNode">
+ <a-popover placement="bottom" trigger="click" :getPopupContainer="(triggerNode: any) => triggerNode.parentNode">
<template #content>
<div class="setting-content">
<div class="start-point common">
<div class="title">起飞点</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">广角照片</li>
- <li class="select-item">变焦照片</li>
+ <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>
- <div class="auto-low-light">
+ <!-- <div class="auto-low-light">
<div class="title">自动低光</div>
<a-tooltip
placement="right"
@@ -25,17 +37,13 @@
checkedValue="lowLightSmartShooting"
unCheckedValue="normalPhoto" />
</a-tooltip>
- </div>
+ </div> -->
</div>
<!-- 爬升 -->
<div class="climb-mode common">
- <a-tooltip
- placement="right"
- :title="tipDescriptionEnums.climbModeTip">
+ <a-tooltip placement="right" :title="tipDescriptionEnums.climbModeTip">
<div class="mode-box">
- <a-radio-group
- v-model:value="setting.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>
@@ -45,59 +53,71 @@
<img :src="climbImage" alt="climb-img" />
</div>
<ul class="parameter-btn">
- <li>+100</li>
- <li>+10</li>
- <li>
- <span>{{ setting.takeOffSecurityHeight }}</span
+ <li @click="numberControls(true, 100, 'takeOffSecurityHeight')">+100</li>
+ <li @click="numberControls(true, 10, 'takeOffSecurityHeight')">+10</li>
+ <li class="parameter-input">
+ <a-input-number
+ :min="2"
+ :max="1500"
+ v-model:value="xmlTemplate.missionConfig.takeOffSecurityHeight['#text']"></a-input-number
>m
</li>
- <li>-100</li>
- <li>-10</li>
+ <li @click="numberControls(false, 100, 'takeOffSecurityHeight')">-100</li>
+ <li @click="numberControls(false, 10, 'takeOffSecurityHeight')">-10</li>
</ul>
</div>
</a-tooltip>
</div>
<!-- 高度模式 -->
<div class="height-mode common">
- <div class="title">航线高度模式</div>
- <div class="mode-box">
- <a-radio-group
- v-model:value="setting.executeHeightMode"
- button-style="solid">
- <a-radio-button value="WGS84">绝对高度</a-radio-button>
- <a-radio-button value="relativeToStartPoint"
- >相对起飞高度</a-radio-button
- >
- <a-radio-button value="realTimeFollowSurface"
- >相对地面高度</a-radio-button
- >
- </a-radio-group>
- </div>
- <div class="parameter-tool">
- <div class="example-img">
- <img :src="imgs[0]" alt="height-img" />
+ <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="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>
+ </a-radio-group>
</div>
- <div class="parameter-btn">
- <li>+100</li>
- <li>+10</li>
- <li>
- <span>{{ setting.executeHeight }}</span> m
- </li>
- <li>-100</li>
- <li>-10</li>
+ <div class="parameter-tool">
+ <div class="example-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 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>
+ </div>
</div>
- </div>
+ </a-tooltip>
</div>
<!-- 航线速度 -->
<div class="speed-setting common">
<div class="title">全局航线速度</div>
<div class="speed-box">
- <div class="subtract">-</div>
+ <div class="subtract" @click="numberControls(false, 1, 'autoFlightSpeed')">-</div>
<div class="text">
- <a-input-number :min="1" :max="15" class="value" v-model:value="setting.autoFlightSpeed">30</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">+</div>
+ <div class="add" @click="numberControls(true, 1, 'autoFlightSpeed')">+</div>
</div>
</div>
</div>
@@ -108,28 +128,104 @@
</template>
<script setup lang="ts">
-import { min } from 'lodash'
+import { reactive, defineProps } from 'vue'
import { tipDescriptionEnums } from './enums'
+import useKmzTsa, { kmlStr, template as xmlTemplate } from '/@/utils/cesium/use-kmz-tsa'
+import useMapDraw, { kmlEntities as globalEntities } from '/@/utils/cesium/use-map-draw'
+import { getKmlParams } from '/@/utils/cesium/kmz'
+import { cesiumOperation } from '/@/hooks/use-cesium-tsa'
+import { message } from 'ant-design-vue'
+import type { missionConfig, payloadParam as payloadParamConfig, Folder } from '/@/utils/cesium/types/kml'
+const { appContext }: any = getCurrentInstance()
+const global = appContext.config.globalProperties
-const getResource = (name: string) => {
- return new URL(`/src/assets/icons/${name}`, import.meta.url).href
+const mapDraw = useMapDraw('', '', '', global)
+const { removeAllDataSource, removeAllPoint } = cesiumOperation()
+const kmzUtils = useKmzTsa()
+
+interface setting {
+ imageFormat: string[]
}
+
+const props = defineProps({
+ loadCompleted: Boolean,
+})
+
const getSvgResource = (name: string) => {
return new URL(`/src/assets/svg/${name}`, import.meta.url).href
}
const climbImage = getSvgResource('climb.svg')
-const imgs = [getSvgResource('xddm.svg')]
+const imgs = []
-const setting = reactive({
- flyToWaylineMode: 'safely',
- takeOffSecurityHeight: 80,
- executeHeightMode: 'WGS84',
- executeHeight: 80,
- // normal: normalPhoto row-light: lowLightSmartShooting
- orientedPhotoMode: 'normalPhoto',
- autoFlightSpeed: 10
-})
+// 拍照设置
+interface photoSetting {
+ title: string
+ value: string
+}
+const photoSetting = reactive<photoSetting[]>([
+ { title: '广角', value: 'wide' },
+ { title: '变焦', value: 'zoom' },
+ { title: '红外', value: 'ir' },
+])
+
+// 高度模式
+const heightModeSetting = reactive([
+ {
+ title: '绝对高度',
+ value: 'EGM96',
+ img: getSvgResource('jdgd.svg'),
+ },
+ {
+ title: '相对起飞高度',
+ value: 'relativeToStartPoint',
+ img: getSvgResource('xdqfd.svg'),
+ },
+])
+
+// 计算
+const numberControls = (isAdd: boolean, computeVal: number, key: string) => {
+ let obj = { '#text': '0' }
+ if (key === 'takeOffSecurityHeight') {
+ obj = xmlTemplate.value.missionConfig.takeOffSecurityHeight
+ }
+ if (key === 'globalHeight') {
+ obj = xmlTemplate.value.Folder.globalHeight
+ }
+ if (key === 'autoFlightSpeed') {
+ obj = xmlTemplate.value.Folder.autoFlightSpeed
+ }
+ let value = Number(obj['#text'])
+ if (isAdd) {
+ value += computeVal
+ } else {
+ value -= computeVal
+ }
+ obj['#text'] = value.toString()
+ if (key === 'globalHeight') {
+ const placemarkArr = xmlTemplate.value.Folder.Placemark
+ placemarkArr.forEach((placemark: { useGlobalHeight: { [x: string]: any }; height: { [x: string]: string } }) => {
+ if (Reflect.has(placemark, 'useGlobalHeight')) {
+ placemark.height['#text'] = value.toString()
+ }
+ })
+ const xmlString = kmzUtils.generateXML(xmlTemplate.value)
+ mapDraw.drawWayline(globalEntities.value, xmlString)
+ }
+}
+
+// 拍照选择
+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>
<style lang="scss" scoped>
@@ -139,51 +235,72 @@
max-height: 80vh;
overflow-y: auto;
color: #fff;
+
.common {
background-color: #232323;
border-radius: 10px;
padding: 15px;
margin-bottom: 16px;
+
.title {
font-weight: bold;
}
+
&:last-child {
margin: 0;
}
}
+
+ .start-point {
+ display: flex;
+ justify-content: flex-start;
+
+ .value {
+ margin-left: auto;
+ color: #409eff;
+ }
+ }
+
.photo-setting {
.select-box {
padding: 0;
display: flex;
margin-top: 10px;
+
li {
list-style-type: none;
padding: 3px 15px;
margin-left: 10px;
- background-color: #409eff;
+ background-color: var(--settingColor);
border-radius: 9999px;
font-weight: bold;
cursor: pointer;
+
&:first-child {
margin: 0;
}
}
}
+
.auto-low-light {
display: flex;
+
.title {
font-weight: bold;
margin-right: auto;
}
}
}
+
.height-mode,
.climb-mode {
.mode-box {
margin-top: 10px;
+
:deep() {
.ant-radio-group {
display: flex;
+
.ant-radio-button-wrapper {
flex: 1;
text-align: center;
@@ -192,9 +309,11 @@
color: #fff;
font-weight: bold;
border: 0;
+
&::before {
background-color: #101010;
}
+
&-checked {
background-color: #409eff !important;
}
@@ -202,19 +321,23 @@
}
}
}
+
.parameter-tool {
margin-top: 15px;
display: flex;
+
.example-img {
flex: 3;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
+
img {
width: 100%;
}
}
+
.parameter-btn {
flex: 1;
padding: 0;
@@ -223,6 +346,7 @@
display: flex;
flex-direction: column;
align-items: center;
+
li {
width: 50px;
border-radius: 3px;
@@ -234,10 +358,12 @@
text-align: center;
font-weight: bold;
transition: all 0.3s ease-in-out;
+
&:nth-child(3) {
width: 100%;
background-color: transparent;
cursor: auto;
+
span {
color: #409eff;
font-size: 23px;
@@ -245,33 +371,64 @@
margin-right: 5px;
}
}
+
&:not(:nth-child(3)) {
&:hover {
background-color: #5d5f61;
}
}
}
+
+ .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;
+ }
+ }
+ }
+ }
+ }
}
}
}
+
.speed-setting {
.speed-box {
margin-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
+
.text {
font-weight: bolder;
+
.value {
color: #409eff;
width: 60px;
font-size: 30px;
background-color: transparent;
border: 0;
+
:deep() {
.ant-input-number-handler-wrap {
display: none;
}
+
.ant-input-number-input-wrap {
input {
font-weight: bolder;
@@ -280,6 +437,7 @@
}
}
}
+
.subtract,
.add {
width: 32px;
@@ -291,6 +449,7 @@
background-color: #3c3c3c;
border-radius: 3px;
cursor: pointer;
+
&:hover {
background-color: #5d5f61;
}
@@ -298,22 +457,25 @@
}
}
}
-}
-:deep() {
- .ant-popover-content {
- .ant-popover-arrow,
- .ant-popover-inner {
- background-color: #101010;
- }
- .ant-popover-arrow {
- border-top-color: #101010 !important;
- border-left-color: #101010 !important;
- }
- .ant-popover-inner {
- border-radius: 15px;
- .ant-popover-inner-content {
- padding: 16px;
+ :deep() {
+ .ant-popover-content {
+ .ant-popover-arrow,
+ .ant-popover-inner {
+ background-color: #101010;
+ }
+
+ .ant-popover-arrow {
+ border-top-color: #101010 !important;
+ border-left-color: #101010 !important;
+ }
+
+ .ant-popover-inner {
+ border-radius: 15px;
+
+ .ant-popover-inner-content {
+ padding: 16px;
+ }
}
}
}
--
Gitblit v1.9.3