From 4dccbb68399da2d46943b8d613585afb49aa5455 Mon Sep 17 00:00:00 2001
From: sean.zhou <sean.zhou@dji.com>
Date: Fri, 22 Jul 2022 20:48:54 +0800
Subject: [PATCH] V1.1.0 for dock
---
src/pages/page-pilot/pilot-media.vue | 96 +++++++++++++++++------------------------------
1 files changed, 35 insertions(+), 61 deletions(-)
diff --git a/src/pages/page-pilot/pilot-media.vue b/src/pages/page-pilot/pilot-media.vue
index 48b73ad..11b9c20 100644
--- a/src/pages/page-pilot/pilot-media.vue
+++ b/src/pages/page-pilot/pilot-media.vue
@@ -1,18 +1,16 @@
<template>
- <div
- class="width-100vw height-100vh flex-column flex-justify-start flex-align-start"
- >
- <p class="fz16 ml10 mt10 mb10 color-text-title color-font-bold">
- If Enabled, Pilot will upload photos or videos to the server
- automatically.
+ <a-layout>
+ <div class="width100 flex-column flex-justify-start flex-align-start" style="background-color: white;">
+
+ <p class="fz16 ml10 mt15 mb10 color-text-title color-font-bold" style="color: #939393">
+ When enabled, photos and videos will be automatically uploaded to this server
</p>
<div
- class="flex-row flex-align-center flex-justify-between"
- style="width: 100%"
+ class="flex-row flex-align-center mt20"
+ style="width: 100%;"
>
- <p class="ml10 mb0 fz16" style="color: black">Auto Upload Photos</p>
+ <p class="ml10 mb0 fz16" style="margin-right: 73vw;">Auto Photo Upload</p>
<a-switch
- class="mt0 mb0"
v-model:checked="enablePhotoUpload"
@change="onPhotoUpload"
></a-switch>
@@ -23,34 +21,36 @@
>
<a-radio-group
class="mt10 ml20"
- v-if="enablePhotoUpload == true"
+ v-if="enablePhotoUpload === true"
v-model:value="photoType"
defaultChecked="0"
@change="onPhototype"
>
- <a-radio :value="0">Original Photo</a-radio>
- <a-radio class="ml20" :value="1">Preview Photo</a-radio>
+ <a-radio :value="EPhotoType.Original">Original Photo</a-radio>
+ <a-radio class="ml20" :value="EPhotoType.Preview">Preview Photo</a-radio>
</a-radio-group>
</div>
- <a-divider dashed class="mt10 mb0"></a-divider>
-
+ <div class="ml10 mr10" style="width: 96%; margin-top: -10px;">
+ <a-divider />
+ </div>
<div
- class="flex-row flex-align-center flex-justify-between mt10"
- style="width: 100%"
+ class="flex-row flex-align-center"
+ style="width: 100%; margin-top: -10px;"
>
- <p class="ml10 mb0 fz16" style="color: black">Auto Upload Video</p>
+ <p class="ml10 mb0 fz16" style="margin-right: 73vw;">Auto Video Upload</p>
<a-switch
@change="onVideoUpload"
v-model:checked="enableVideoUpload"
></a-switch>
</div>
- <a-divider dashed class="mt10 mb0"></a-divider>
-
+ <div class="ml10 mr10" style="width: 96%; margin-top: -10px;">
+ <a-divider />
+ </div>
<div
- class="flex-row flex-align-center flex-justify-between mt20"
- style="width: 100%"
+ class="flex-row flex-align-center flex-justify-between mb15"
+ style="width: 100%; margin-top: -10px;"
>
- <p class="ml10 mb0 fz16 color-font-bold" style="color: black">
+ <p class="ml10 mb0 fz16 color-font-bold">
Path for uploading media resources in dual-controller mode
</p>
<a-radio-group
@@ -59,11 +59,12 @@
button-style="solid"
@change="onUploadPath"
>
- <a-radio-button :value="0">Mine</a-radio-button>
- <a-radio-button :value="1">Another</a-radio-button>
+ <a-radio-button :value="EDownloadOwner.Mine">Mine</a-radio-button>
+ <a-radio-button :value="EDownloadOwner.Others">Another</a-radio-button>
</a-radio-group>
</div>
</div>
+ </a-layout>
</template>
<script lang="ts" setup>
@@ -71,58 +72,31 @@
import { onMounted, ref } from 'vue'
import apiPilot from '/@/api/pilot-bridge'
import { getRoot } from '/@/root'
+import { EComponentName, EPhotoType, EDownloadOwner } from '/@/types'
const root = getRoot()
-const enablePhotoUpload = ref<boolean>(true)
-const enableVideoUpload = ref<boolean>(false)
-const photoType = ref<number>(1)
-const uploadPath = ref<number>(0)
+const enablePhotoUpload = ref<boolean>(apiPilot.getAutoUploadPhoto())
+const enableVideoUpload = ref<boolean>(apiPilot.getAutoUploadVideo())
+const photoType = ref<number>(apiPilot.getUploadPhotoType())
+const uploadPath = ref<number>(apiPilot.getDownloadOwner())
-onMounted(() => {
- message.info('After setting, please use the physical button of the remote control to return, otherwise the setting is invalid.')
-
- enablePhotoUpload.value =
- apiPilot.getAutoUploadPhoto() === undefined
- ? true
- : apiPilot.getAutoUploadPhoto()
- enableVideoUpload.value =
- apiPilot.getAutoUploadVideo() === undefined
- ? false
- : apiPilot.getAutoUploadVideo()
- photoType.value =
- apiPilot.getUploadPhotoType() === undefined
- ? 1
- : apiPilot.getUploadPhotoType()
- uploadPath.value =
- apiPilot.getDownloadOwner() === undefined ? 0 : apiPilot.getDownloadOwner()
-
- console.log(
- enablePhotoUpload.value,
- enableVideoUpload.value,
- photoType.value,
- uploadPath.value
- )
- apiPilot.setComponentParam('media', {
- autoUploadPhoto: enablePhotoUpload.value,
- autoUploadPhotoType: photoType.value,
- autoUploadVideo: enableVideoUpload.value
- })
-})
const onPhotoUpload = () => {
apiPilot.setAutoUploadPhoto(enablePhotoUpload.value)
}
const onVideoUpload = () => {
- console.log(enableVideoUpload.value)
apiPilot.setAutoUploadVideo(enableVideoUpload.value)
}
const onPhototype = () => {
- console.log(photoType.value)
apiPilot.setUploadPhotoType(photoType.value)
}
const onUploadPath = (e: any) => {
apiPilot.setDownloadOwner(uploadPath.value)
}
+onMounted(() => {
+ console.error(apiPilot.getUploadPhotoType())
+ console.error(apiPilot.getAutoUploadVideo())
+})
</script>
<style lang="scss" scoped>
--
Gitblit v1.9.3