<template>
|
<div class="setting">
|
<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>
|
<div class="photo-setting common">
|
<div class="title">拍照设置</div>
|
<ul class="select-box">
|
<li class="select-item">广角照片</li>
|
<li class="select-item">变焦照片</li>
|
</ul>
|
<div class="auto-low-light">
|
<div class="title">自动低光</div>
|
<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>
|
</template>
|
<slot name="show"></slot>
|
</a-popover>
|
</div>
|
</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 {
|
.setting-content {
|
width: 390px;
|
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;
|
}
|
}
|
.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;
|
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;
|
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;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
: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;
|
}
|
}
|
}
|
}
|
</style>
|
