From 3e13dd0242140c7189b65e4171efaa9190d1763d Mon Sep 17 00:00:00 2001
From: GuLiMmo <2820890765@qq.com>
Date: Mon, 18 Mar 2024 18:03:07 +0800
Subject: [PATCH] kmz文件打包完成、新增航线功能、事件编辑
---
src/pages/page-web/projects/wayline.vue | 165 ++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 151 insertions(+), 14 deletions(-)
diff --git a/src/pages/page-web/projects/wayline.vue b/src/pages/page-web/projects/wayline.vue
index 92e07d3..1c1e957 100644
--- a/src/pages/page-web/projects/wayline.vue
+++ b/src/pages/page-web/projects/wayline.vue
@@ -16,7 +16,7 @@
<SelectOutlined />
</a-button>
</a-upload>
- <a-button type="text" style="color: white" @click="addWaylineDialog">
+ <a-button type="text" style="color: white" @click="addWaylineDialogShow = true">
<template #icon>
<PlusOutlined />
</template>
@@ -130,16 +130,36 @@
<a-modal
v-model:visible="addWaylineDialogShow"
title="新建航线"
+ @ok="addWaylineFile"
+ @cancel="closeAddWaylineDialog"
:get-container="() => projectWayLine"
:cancel-button-props="{ ghost: true }">
- <a-form layout="vertical" :model="waylineFormState" class="create-wayline-content">
+ <a-form layout="vertical" :model="waylineFormState" ref="waylineFormRef" class="create-wayline-content">
<a-form-item label="航线名称">
- <a-input class="wayline-input"></a-input>
+ <a-input class="wayline-input" v-model="waylineFormState.fileName" placeholder="请输入航线名称"></a-input>
</a-form-item>
<a-form-item label="选择飞行器与负载">
- <a-select></a-select>
+ <a-select
+ v-model="waylineFormState.droneType"
+ :options="droneTypeList"
+ class="drone-select"
+ :showArrow="false"
+ placeholder="请选择无人机型号"
+ :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
+ @change="droneTypeChange">
+ </a-select>
<div class="drone-box">
<img :src="getResource('wrj.png')" alt="" srcset="" class="drone-img" />
+ </div>
+ <div class="payload-select">
+ <div class="title"><span></span> 云台I</div>
+ <a-select
+ v-model="waylineFormState.payloadType"
+ :options="dronePayloads"
+ allowClear
+ placeholder="请选择云台型号"
+ :showArrow="false"
+ :getPopupContainer="(triggerNode: any) => triggerNode.parentNode" />
</div>
</a-form-item>
</a-form>
@@ -376,18 +396,56 @@
// 新建航线
interface waylineFormState {
fileName: string
- droneType: string
- payloadType: string
+ droneType: string | number | undefined
+ payloadType: string | number | undefined
}
+const waylineFormRef = ref()
const addWaylineDialogShow = ref<boolean>(false)
const isCreateWayline = ref<boolean>(false)
const waylineFormState = reactive<UnwrapRef<waylineFormState>>({
fileName: '',
- droneType: '',
+ droneType: 67,
payloadType: '',
})
-const addWaylineDialog = () => {
- addWaylineDialogShow.value = true
+interface droneType {
+ label: string
+ value: number
+ payloads?: droneType[]
+}
+const droneTypeList = reactive<droneType[]>([
+ {
+ label: 'M30系列',
+ value: 67,
+ payloads: [
+ { label: 'M30 相机', value: 0 },
+ { label: 'M30T 相机', value: 0 },
+ ],
+ },
+ {
+ label: 'Mavic 3 行业系列',
+ value: 77,
+ payloads: [
+ { label: 'Mavic3E 相机', value: 0 },
+ { label: 'Mavic3T 相机', value: 0 },
+ ],
+ },
+ {
+ label: 'Matrice 3D 系列',
+ value: 91,
+ payloads: [
+ { label: 'M3D 相机', value: 0 },
+ { label: 'M3DT 相机', value: 0 },
+ ],
+ },
+])
+const dronePayloads = ref<droneType[]>([])
+const droneTypeChange = (value: number) => {
+ const payloads = droneTypeList.find((s) => s.value === value)?.payloads
+ dronePayloads.value = payloads || []
+}
+const addWaylineFile = () => {}
+const closeAddWaylineDialog = () => {
+ waylineFormRef.value.resetFields()
}
function onScroll (e: any) {
@@ -631,20 +689,99 @@
}
:deep() {
.ant-form-item-label {
+ margin-top: 15px;
label {
color: #ffffff73;
}
}
.wayline-input {
border-color: #4f4f4f;
+ margin: 0;
}
- .ant-select-selector {
- color: #fff;
- background-color: #3c3c3c;
- border: 0;
+ }
+ .drone-select {
+ :deep() {
+ .ant-select-selector {
+ color: #fff;
+ background-color: #3c3c3c;
+ border: 0;
+ font-weight: bolder;
+ }
+ .ant-select-dropdown {
+ background-color: #3c3c3c;
+ color: #fff;
+ .ant-empty-description {
+ color: #fff;
+ }
+ .ant-select-item-option {
+ color: #fff;
+ font-weight: bold;
+ &-active {
+ background-color: rgb(45, 45, 45);
+ }
+ &-selected {
+ background-color: rgb(45, 45, 45);
+ color: #2d8cf0;
+ }
+ }
+ }
}
- .ant-select-arrow {
+ }
+ .payload-select {
+ margin: 0 auto;
+ background-color: black;
+ width: 150px;
+ font-weight: bold;
+ border: 1px solid #4f4f4f;
+ border-radius: 3px;
+ .title {
color: #fff;
+ text-align: center;
+ padding: 5px 0;
+ span {
+ width: 5px;
+ height: 5px;
+ border-radius: 50%;
+ display: inline-block;
+ background-color: orange;
+ }
+ }
+ :deep() {
+ .ant-select-selector {
+ border: 0;
+ box-shadow: none !important;
+ background-color: transparent;
+ font-weight: bold;
+ color: #fff;
+ .ant-select-selection-placeholder {
+ text-align: center;
+ }
+ .ant-select-selection-item {
+ text-align: center;
+ }
+ }
+ .ant-select-clear {
+ color: red;
+ background-color: transparent;
+ }
+ .ant-select-dropdown {
+ background-color: #000;
+ color: #fff;
+ .ant-empty-description {
+ color: #fff;
+ }
+ }
+ .ant-select-item-option {
+ color: #fff;
+ font-weight: bold;
+ &-active {
+ background-color: rgb(45, 45, 45);
+ }
+ &-selected {
+ background-color: rgb(45, 45, 45);
+ color: #2d8cf0;
+ }
+ }
}
}
}
--
Gitblit v1.9.3