From d20068f8f1c0d1f7f4077c2fdd7d46e0f5216285 Mon Sep 17 00:00:00 2001
From: GuLiMmo <2820890765@qq.com>
Date: Mon, 04 Mar 2024 17:21:53 +0800
Subject: [PATCH] 航线绘制封装、kmz文件操作封装、航线编辑修改
---
src/pages/page-web/projects/components/route-edit/components/setting.vue | 228 +++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 223 insertions(+), 5 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 19832fc..d815c63 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
@@ -17,7 +17,87 @@
</ul>
<div class="auto-low-light">
<div class="title">自动低光</div>
- <a-switch />
+ <a-tooltip
+ placement="right"
+ :title="tipDescriptionEnums.rowLightModeTip">
+ <a-switch
+ v-model:checked="setting.orientedPhotoMode"
+ checkedValue="lowLightSmartShooting"
+ unCheckedValue="normalPhoto" />
+ </a-tooltip>
+ </div>
+ </div>
+ <!-- 爬升 -->
+ <div class="climb-mode common">
+ <a-tooltip
+ placement="right"
+ :title="tipDescriptionEnums.climbModeTip">
+ <div class="mode-box">
+ <a-radio-group
+ v-model:value="setting.flyToWaylineMode"
+ button-style="solid">
+ <a-radio-button value="safely">垂直爬升</a-radio-button>
+ <a-radio-button value="pointToPoint">倾斜爬升</a-radio-button>
+ </a-radio-group>
+ </div>
+ <div class="parameter-tool">
+ <div class="example-img">
+ <img :src="climbImage" alt="climb-img" />
+ </div>
+ <ul class="parameter-btn">
+ <li>+100</li>
+ <li>+10</li>
+ <li>
+ <span>{{ setting.takeOffSecurityHeight }}</span
+ >m
+ </li>
+ <li>-100</li>
+ <li>-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" />
+ </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>
+ </div>
+ </div>
+ <!-- 航线速度 -->
+ <div class="speed-setting common">
+ <div class="title">全局航线速度</div>
+ <div class="speed-box">
+ <div class="subtract">-</div>
+ <div class="text">
+ <a-input-number :min="1" :max="15" class="value" v-model:value="setting.autoFlightSpeed">30</a-input-number>
+ m / s
+ </div>
+ <div class="add">+</div>
</div>
</div>
</div>
@@ -28,17 +108,36 @@
</template>
<script setup lang="ts">
+import { min } from 'lodash'
+import { tipDescriptionEnums } from './enums'
+
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
+}
+
+const climbImage = getSvgResource('climb.svg')
+const imgs = [getSvgResource('xddm.svg')]
+
+const setting = reactive({
+ flyToWaylineMode: 'safely',
+ takeOffSecurityHeight: 80,
+ executeHeightMode: 'WGS84',
+ executeHeight: 80,
+ // normal: normalPhoto row-light: lowLightSmartShooting
+ orientedPhotoMode: 'normalPhoto',
+ autoFlightSpeed: 10
+})
</script>
<style lang="scss" scoped>
.setting {
- margin-left: auto;
.setting-content {
width: 390px;
- height: 50vh;
+ max-height: 80vh;
+ overflow-y: auto;
color: #fff;
.common {
background-color: #232323;
@@ -74,6 +173,127 @@
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;
+ background-color: #3c3c3c;
+ border: 1px solid #101010;
+ color: #fff;
+ font-weight: bold;
+ border: 0;
+ &::before {
+ background-color: #101010;
+ }
+ &-checked {
+ background-color: #409eff !important;
+ }
+ }
+ }
+ }
+ }
+ .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;
+ margin: 0;
+ flex-shrink: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ li {
+ width: 50px;
+ border-radius: 3px;
+ padding: 2px 0;
+ list-style-type: none;
+ cursor: pointer;
+ background-color: #3c3c3c;
+ margin-bottom: 5px;
+ 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;
+ font-weight: bolder;
+ margin-right: 5px;
+ }
+ }
+ &:not(:nth-child(3)) {
+ &:hover {
+ background-color: #5d5f61;
+ }
+ }
+ }
+ }
+ }
+ }
+ .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;
+ }
+ }
+ }
+ }
+ }
+ .subtract,
+ .add {
+ width: 32px;
+ height: 32px;
+ text-align: center;
+ line-height: 32px;
+ font-size: 20px;
+ font-weight: bolder;
+ background-color: #3c3c3c;
+ border-radius: 3px;
+ cursor: pointer;
+ &:hover {
+ background-color: #5d5f61;
+ }
}
}
}
@@ -99,5 +319,3 @@
}
}
</style>
-今日情况
-航线展示：照片计算 （已完成）
--
Gitblit v1.9.3