From 2c2bc8614c8ea0ce386369eb4924da1e6aa052d1 Mon Sep 17 00:00:00 2001
From: husq <931347610@qq.com>
Date: Wed, 27 Sep 2023 09:35:57 +0800
Subject: [PATCH] 添加环境配置区分
---
src/components/task/CreatePlan.vue | 161 +++++++++++++++++++++++++++++++----------------------
1 files changed, 95 insertions(+), 66 deletions(-)
diff --git a/src/components/task/CreatePlan.vue b/src/components/task/CreatePlan.vue
index becc1be..cda30d4 100644
--- a/src/components/task/CreatePlan.vue
+++ b/src/components/task/CreatePlan.vue
@@ -1,92 +1,98 @@
<template>
<div class="create-plan-wrapper">
<div class="header">
- Create Plan
+ 创建计划
</div>
<div class="content">
- <a-form ref="valueRef" layout="horizontal" :hideRequiredMark="true" :rules="rules" :model="planBody">
- <a-form-item label="Plan Name" name="name" :labelCol="{span: 24}">
- <a-input style="background: black;" placeholder="Please enter plan name" v-model:value="planBody.name"/>
+ <a-form ref="valueRef" layout="horizontal" :hideRequiredMark="true" :rules="rules" :model="planBody"
+ labelAlign="left">
+ <a-form-item label="计划名称" name="name" :labelCol="{ span: 23 }">
+ <a-input style="background: black;" placeholder="请输入计划名称" v-model:value="planBody.name" />
</a-form-item>
<!-- 航线 -->
- <a-form-item label="Flight Route" :wrapperCol="{offset: 7}" name="file_id">
- <router-link
- :to="{name: 'select-plan'}"
- @click="selectRoute"
- >
- Select Route
+ <a-form-item class="text-r" label="执行航线" :wrapperCol="{ offset: 7 }" name="file_id">
+ <router-link :to="{ name: 'select-plan' }" @click="selectRoute">
+ 选择航线
</router-link>
</a-form-item>
<a-form-item v-if="planBody.file_id" style="margin-top: -15px;">
<div class="wayline-panel" style="padding-top: 5px;">
<div class="title">
<a-tooltip :title="wayline.name">
- <div class="pr10" style="width: 120px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">{{ wayline.name }}</div>
+ <div class="pr10" style="width: 120px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">{{
+ wayline.name }}</div>
</a-tooltip>
- <div class="ml10"><UserOutlined /></div>
+ <div class="ml10">
+ <UserOutlined />
+ </div>
<a-tooltip :title="wayline.user_name">
- <div class="ml5 pr10" style="width: 80px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">{{ wayline.user_name }}</div>
+ <div class="ml5 pr10"
+ style="width: 80px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">{{
+ wayline.user_name }}</div>
</a-tooltip>
</div>
<div class="ml10 mt5" style="color: hsla(0,0%,100%,0.65);">
- <span><RocketOutlined /></span>
- <span class="ml5">{{ Object.keys(EDeviceType)[Object.values(EDeviceType).indexOf(wayline.drone_model_key)] }}</span>
- <span class="ml10"><CameraFilled style="border-top: 1px solid; padding-top: -3px;" /></span>
+ <span>
+ <RocketOutlined />
+ </span>
+ <span class="ml5">{{ Object.keys(EDeviceType)[Object.values(EDeviceType).indexOf(wayline.drone_model_key)]
+ }}</span>
+ <span class="ml10">
+ <CameraFilled style="border-top: 1px solid; padding-top: -3px;" />
+ </span>
<span class="ml5" v-for="payload in wayline.payload_model_keys" :key="payload.id">
{{ Object.keys(EDeviceType)[Object.values(EDeviceType).indexOf(payload)] }}
</span>
</div>
<div class="mt5 ml10" style="color: hsla(0,0%,100%,0.35);">
- <span class="mr10">Update at {{ new Date(wayline.update_time).toLocaleString() }}</span>
+ <span class="mr10">更新时间: {{ new Date(wayline.update_time).toLocaleString() }}</span>
</div>
</div>
</a-form-item>
<!-- 设备 -->
- <a-form-item label="Device" :wrapperCol="{offset: 10}" v-model:value="planBody.dock_sn" name="dock_sn">
- <router-link
- :to="{name: 'select-plan'}"
- @click="selectDevice"
- >Select Device</router-link>
+ <a-form-item class="text-r" label="执行设备" :wrapperCol="{ offset: 10 }" v-model:value="planBody.dock_sn"
+ name="dock_sn">
+ <router-link :to="{ name: 'select-plan' }" @click="selectDevice"
+ style="width: 100%;flex:1;text-align: right;">选择设备</router-link>
</a-form-item>
<a-form-item v-if="planBody.dock_sn" style="margin-top: -15px;">
<div class="panel" style="padding-top: 5px;" @click="selectDock(dock)">
<div class="title">
<a-tooltip :title="dock.nickname">
- <div class="pr10" style="width: 120px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">{{ dock.nickname }}</div>
+ <div class="pr10" style="width: 120px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">{{
+ dock.nickname }}</div>
</a-tooltip>
</div>
<div class="ml10 mt5" style="color: hsla(0,0%,100%,0.65);">
- <span><RocketOutlined /></span>
+ <span>
+ <RocketOutlined />
+ </span>
<span class="ml5">{{ dock.children?.nickname ?? 'No drone' }}</span>
</div>
</div>
</a-form-item>
<!-- 任务类型 -->
- <a-form-item label="Plan Timer" class="plan-timer-form-item">
+ <a-form-item label="任务策略" class="plan-timer-form-item" :labelCol="{ span: 23 }">
<div style="white-space: nowrap;">
<a-radio-group v-model:value="planBody.task_type" button-style="solid">
- <a-radio-button :value="TaskType.Immediate">Immediate</a-radio-button>
- <a-radio-button :value="TaskType.Single">Timed&One-Time</a-radio-button>
+ <a-radio-button v-for="type in TaskTypeOptions" :value="type.value" :key="type.value">{{ type.label
+ }}</a-radio-button>
</a-radio-group>
</div>
</a-form-item>
<!-- 执行时间 -->
- <a-form-item label="Start Time" v-if="planBody.task_type === TaskType.Single" name="select_execute_time">
- <a-date-picker
- v-model:value="planBody.select_execute_time"
- format="YYYY-MM-DD HH:mm:ss"
- show-time
- placeholder="Select Time"
- style="width: 280px;"
- />
+ <a-form-item label="开始时间" v-if="planBody.task_type === TaskType.Timed" name="select_execute_time"
+ :labelCol="{ span: 23 }">
+ <a-date-picker v-model:value="planBody.select_execute_time" format="YYYY-MM-DD HH:mm:ss" show-time
+ placeholder="请选择开始时间" />
</a-form-item>
<!-- RTH Altitude Relative to Dock -->
- <a-form-item label="RTH Altitude Relative to Dock (m)" :labelCol="{span: 24}" name="rth_altitude">
- <a-input v-model:value="planBody.rth_altitude" style="background: black !important;">
- </a-input>
+ <a-form-item label="相对机场返航高度（ALT）" :labelCol="{ span: 23 }" name="rth_altitude">
+ <a-input-number v-model:value="planBody.rth_altitude" :min="20" :max="1500" class="width-100" required>
+ </a-input-number>
</a-form-item>
<!-- Lost Action -->
- <a-form-item label="Lost Action" :labelCol="{span: 24}" name="out_of_control_action">
+ <a-form-item label="航线飞行中失联" :labelCol="{ span: 23 }" name="out_of_control_action">
<div style="white-space: nowrap;">
<a-radio-group v-model:value="planBody.out_of_control_action" button-style="solid">
<a-radio-button v-for="action in OutOfControlActionOptions" :value="action.value" :key="action.value">
@@ -95,37 +101,40 @@
</a-radio-group>
</div>
</a-form-item>
- <a-form-item style="width: 280px;">
+ <a-form-item class="width-100" style="margin-bottom: 40px;">
<div class="footer">
- <a-button class="mr10" style="background: #3c3c3c;" @click="closePlan">Cancel
+ <a-button class="mr10" style="background: #3c3c3c;" @click="closePlan">取消
</a-button>
- <a-button type="primary" @click="onSubmit" :disabled="disabled">OK
+ <a-button type="primary" @click="onSubmit" :disabled="disabled">确定
</a-button>
</div>
</a-form-item>
</a-form>
</div>
</div>
- <div v-if="drawerVisible" style="position: absolute; left: 330px; width: 280px; height: 100vh; float: right; top: 0; z-index: 1000; color: white; background: #282828;">
+ <div v-if="drawerVisible"
+ style="position: absolute; left: 335px; width: 280px; height: 100vh; float: right; top: 0; z-index: 1000; color: white; background: #282828;">
<div>
- <router-view :name="routeName"/>
+ <router-view :name="routeName" />
</div>
<div style="position: absolute; top: 15px; right: 10px;">
- <a style="color: white;" @click="closePanel"><CloseOutlined /></a>
+ <a style="color: white;" @click="closePanel">
+ <CloseOutlined />
+ </a>
</div>
</div>
</template>
<script lang="ts" setup>
import { computed, onMounted, onUnmounted, reactive, ref, toRaw, UnwrapRef } from 'vue'
-import { CloseOutlined, RocketOutlined, CameraFilled, UserOutlined } from '@ant-design/icons-vue'
+import { CloseOutlined, RocketOutlined, CameraFilled, UserOutlined, PlusCircleOutlined, MinusCircleOutlined } from '@ant-design/icons-vue'
import { ELocalStorageKey, ERouterName } from '/@/types'
import { useMyStore } from '/@/store'
import { WaylineType, WaylineFile } from '/@/types/wayline'
import { Device, EDeviceType } from '/@/types/device'
import { createPlan, CreatePlan } from '/@/api/wayline'
import { getRoot } from '/@/root'
-import { TaskType, OutOfControlActionOptions, OutOfControlAction } from '/@/types/task'
+import { TaskType, OutOfControlActionOptions, OutOfControlAction, TaskTypeOptions } from '/@/types/task'
import moment, { Moment } from 'moment'
import { RuleObject } from 'ant-design-vue/es/form/interface'
@@ -150,7 +159,7 @@
file_id: computed(() => store.state.waylineInfo.id),
dock_sn: computed(() => store.state.dockInfo.device_sn),
task_type: TaskType.Immediate,
- select_execute_time: undefined as Moment| undefined,
+ select_execute_time: undefined as Moment | undefined,
rth_altitude: '',
out_of_control_action: OutOfControlAction.ReturnToHome,
})
@@ -159,22 +168,22 @@
const valueRef = ref()
const rules = {
name: [
- { required: true, message: 'Please enter plan name.' },
- { max: 20, message: 'Length should be 1 to 20', trigger: 'blur' }
+ { required: true, message: '请输入计划名称' },
+ { max: 20, message: '计划名称长度在2-20之间', trigger: 'blur' }
],
- file_id: [{ required: true, message: 'Select Route' }],
- dock_sn: [{ required: true, message: 'Select Device' }],
- select_execute_time: [{ required: true, message: 'Select start time' }],
+ file_id: [{ required: true, message: '请选择航线' }],
+ dock_sn: [{ required: true, message: '请选择设备' }],
+ select_execute_time: [{ required: true, message: '请选择任务策略' }],
rth_altitude: [
{
validator: async (rule: RuleObject, value: string) => {
if (!/^[0-9]{1,}$/.test(value)) {
- throw new Error('RTH Altitude Relative Require number')
+ throw new Error('相对机场返航高度需为数字类型')
}
},
}
],
- out_of_control_action: [{ required: true, message: 'Select Lost Action' }],
+ out_of_control_action: [{ required: true, message: '请选择航线飞行中失联' }],
}
function onSubmit () {
@@ -192,9 +201,7 @@
// console.log('planBody', createPlanBody)
createPlan(workspaceId, createPlanBody)
.then(res => {
- setTimeout(() => {
- disabled.value = false
- }, 1500)
+ disabled.value = false
}).finally(() => {
closePlan()
})
@@ -231,6 +238,7 @@
height: 100vh;
display: flex;
flex-direction: column;
+ width: 285px;
.header {
height: 52px;
@@ -242,6 +250,10 @@
align-items: center;
}
+ ::-webkit-scrollbar {
+ display: none;
+ }
+
.content {
height: calc(100% - 54px);
overflow-y: auto;
@@ -250,7 +262,13 @@
margin: 10px;
}
- form label, input {
+ form label,
+ input,
+ .ant-input,
+ .ant-calendar-range-picker-separator,
+ .ant-input:hover,
+ .ant-time-picker .anticon,
+ .ant-calendar-picker .anticon {
background-color: #232323;
color: #fff;
}
@@ -260,13 +278,14 @@
}
.plan-timer-form-item {
- // flex-direction: column;
- .ant-radio-button-wrapper{
+ .ant-radio-button-wrapper {
background-color: #232323;
color: #fff;
+ width: 80%;
+ text-align: center;
- &.ant-radio-button-wrapper-checked{
+ &.ant-radio-button-wrapper-checked {
background-color: #1890ff;
}
}
@@ -275,11 +294,11 @@
.footer {
display: flex;
- padding:10px 0;
+ padding: 10px 0;
button {
width: 45%;
- color: #fff ;
+ color: #fff;
border: 0;
}
}
@@ -295,6 +314,7 @@
font-size: 13px;
border-radius: 2px;
cursor: pointer;
+
.title {
display: flex;
color: white;
@@ -303,6 +323,15 @@
height: 30px;
font-weight: bold;
margin: 0px 10px 0 10px;
+ }
+}
+
+.text-r {
+ :deep(.ant-form-item-control-input-content) {
+ text-align: right;
+ }
+ .ant-form-item-control-input-content {
+ text-align: right;
}
}
@@ -316,6 +345,7 @@
font-size: 13px;
border-radius: 2px;
cursor: pointer;
+
.title {
display: flex;
color: white;
@@ -325,5 +355,4 @@
font-weight: bold;
margin: 0px 10px 0 10px;
}
-}
-</style>
+}</style>
--
Gitblit v1.9.3