From a0d006a8e6734ce1ff08fc5d196266cc2fd27f7d Mon Sep 17 00:00:00 2001
From: husq <931347610@qq.com>
Date: Sun, 08 Oct 2023 17:33:44 +0800
Subject: [PATCH] Merge branch 'demo' of http://s16s652780.51mypc.cn:49896/r/yskj/iot_drone_web into demo
---
src/components/task/CreatePlan.vue | 427 +++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 395 insertions(+), 32 deletions(-)
diff --git a/src/components/task/CreatePlan.vue b/src/components/task/CreatePlan.vue
index cda30d4..963df79 100644
--- a/src/components/task/CreatePlan.vue
+++ b/src/components/task/CreatePlan.vue
@@ -5,9 +5,9 @@
</div>
<div class="content">
<a-form ref="valueRef" layout="horizontal" :hideRequiredMark="true" :rules="rules" :model="planBody"
- labelAlign="left">
+ labelAlign="left">
<a-form-item label="计划名称" name="name" :labelCol="{ span: 23 }">
- <a-input style="background: black;" placeholder="请输入计划名称" v-model:value="planBody.name" />
+ <a-input style="background: black;" placeholder="请输入计划名称" v-model:value="planBody.name"/>
</a-form-item>
<!-- 航线 -->
<a-form-item class="text-r" label="执行航线" :wrapperCol="{ offset: 7 }" name="file_id">
@@ -19,26 +19,32 @@
<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 />
+ <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>
+ 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 />
+ <RocketOutlined/>
</span>
- <span class="ml5">{{ Object.keys(EDeviceType)[Object.values(EDeviceType).indexOf(wayline.drone_model_key)]
- }}</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;" />
+ <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)] }}
@@ -49,48 +55,169 @@
</div>
</div>
</a-form-item>
+
<!-- 设备 -->
<a-form-item class="text-r" label="执行设备" :wrapperCol="{ offset: 10 }" v-model:value="planBody.dock_sn"
- name="dock_sn">
+ name="dock_sn">
<router-link :to="{ name: 'select-plan' }" @click="selectDevice"
- style="width: 100%;flex:1;text-align: right;">选择设备</router-link>
+ 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 />
+ <RocketOutlined/>
</span>
<span class="ml5">{{ dock.children?.nickname ?? 'No drone' }}</span>
</div>
</div>
</a-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 v-for="type in TaskTypeOptions" :value="type.value" :key="type.value">{{ type.label
- }}</a-radio-button>
+ <a-radio-group class="task-plan-radio-group" v-model:value="planBody.task_type" button-style="solid">
+ <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="开始时间" v-if="planBody.task_type === TaskType.Timed" name="select_execute_time"
- :labelCol="{ span: 23 }">
+
+ <!-- 执行时间 (单次定时)-->
+ <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="请选择开始时间" />
+ placeholder="请选择开始时间"/>
</a-form-item>
+
+ <!-- 执行日期-->
+ <a-form-item label="执行日期"
+ v-if="planBody.task_type === TaskType.Repeat || planBody.task_type === TaskType.Continuous"
+ name="time_range" :labelCol="{ span: 23 }">
+ <a-range-picker v-model:value="planBody.time_range" format="YYYY-MM-DD" placeholder="请选择日期"/>
+ </a-form-item>
+
+ <!-- 执行时间 (重复定时)-->
+ <a-form-item label="执行时间" v-if="planBody.task_type === TaskType.Repeat" name="execute_time_arr"
+ :labelCol="{ span: 23 }">
+ <div class="execute-time-arr-item" v-for="(item,index) in executeTimeRepeatArr" :key="index">
+ <a-time-picker v-model:value="item.value" format="HH:mm"/>
+ <a-button @click="addTime" type="default" shape="circle" :size="componentOptions.size">
+ <template #icon>
+ <PlusCircleOutlined/>
+ </template>
+ </a-button>
+
+ <a-button @click="deleteTime(item)" type="default" shape="circle" :size="componentOptions.size">
+ <template #icon>
+ <MinusCircleOutlined/>
+ </template>
+ </a-button>
+ </div>
+ </a-form-item>
+
+ <!-- 执行时间 (连续执行)-->
+ <a-form-item label="执行时间" v-if="planBody.task_type === TaskType.Continuous" :labelCol="{ span: 23 }">
+ <div class="execute-time-arr-continuous-item" v-for="(item,index) in executeTimeContinuousArr" :key="index">
+ <div class="time-select">
+ <div class="time-item">
+ <a-time-picker style="width: 100px;" v-model:value="item.value[0]" format="HH:mm"/>
+ </div>
+ <div style="color: white">-</div>
+ <div class="time-item">
+ <a-time-picker style="width: 100px;" v-model:value="item.value[1]" format="HH:mm"/>
+ </div>
+ </div>
+ <div class="btn-group">
+ <a-button @click="addTime" type="default" shape="circle" :size="componentOptions.size">
+ <template #icon>
+ <PlusCircleOutlined/>
+ </template>
+ </a-button>
+ <a-button @click="deleteTime(item)" type="default" shape="circle" :size="componentOptions.size">
+ <template #icon>
+ <MinusCircleOutlined/>
+ </template>
+ </a-button>
+ </div>
+ </div>
+ </a-form-item>
+
+ <!-- 重复频率-->
+ <a-form-item label="任务开始执行的电量" v-if=" planBody.task_type === TaskType.Continuous"
+ name="battery_capacity" :labelCol="{ span: 23 }">
+ <a-input style="background: black;" v-model:value="planBody.battery_capacity"/>
+ </a-form-item>
+
+ <!-- 重复频率-->
+ <a-form-item label="重复频率"
+ v-if="planBody.task_type === TaskType.Repeat || planBody.task_type === TaskType.Continuous"
+ :labelCol="{ span: 23 }">
+ <div class="rep-fre-item">
+ <div>每</div>
+ <div style="width: 150px">
+ <a-input style="background: black;" v-model:value="planBody.rep_fre_val"/>
+ </div>
+ <div style="width: 100px">
+ <a-select v-model:value="planBody.rep_fre_type" style="background-color: black"
+ :options="FrequencyTypeOptions"></a-select>
+ </div>
+ </div>
+ </a-form-item>
+
+ <!-- 重复频率-->
+ <a-form-item
+ v-if="(planBody.task_type === TaskType.Repeat || planBody.task_type === TaskType.Continuous) && planBody.rep_fre_type === FrequencyType.week"
+ :labelCol="{ span: 23 }">
+ <a-button class="btn" :class="[item.checked?'btn-selected':'btn-unselected'] "
+ v-for="(item,index) in weekNumArr" :key="index" size="small" @click="selectWeekBtn(item)">
+ {{ item.label }}
+ </a-button>
+ </a-form-item>
+
+ <!-- 重复频率-->
+ <a-form-item label="重复规则"
+ v-if="(planBody.task_type === TaskType.Repeat || planBody.task_type === TaskType.Continuous) && planBody.rep_fre_type === FrequencyType.month"
+ :labelCol="{ span: 23 }">
+ <div class="rep-rule-item">
+ <div class="rep-rule-type">
+ <a-select v-model:value="planBody.rep_rule_type" style="background-color: black"
+ :options="RepeatRuleTypeOptions"></a-select>
+ </div>
+
+ <div v-if="planBody.rep_rule_type === RepeatRuleType.day" class="rep-rule-val-day">
+ <a-button class="btn" :class="[item.checked?'btn-selected':'btn-unselected'] "
+ v-for="(item,index) in dayNumArr" :key="index" size="small" @click="selectBtn(item)">
+ {{ item.value }}
+ </a-button>
+ </div>
+
+ <div v-if="planBody.rep_rule_type === RepeatRuleType.week" class="rep-rule-val-week">
+ <a-select v-model:value="repeatRuleValueWeek[0]" style="background-color: black"
+ :options="WhichWeekOptions"></a-select>
+ <a-select v-model:value="repeatRuleValueWeek[1]" style="background-color: black"
+ :options="WhichDayOptions"></a-select>
+ </div>
+ </div>
+ </a-form-item>
+
<!-- RTH Altitude Relative to Dock -->
<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="航线飞行中失联" :labelCol="{ span: 23 }" name="out_of_control_action">
<div style="white-space: nowrap;">
@@ -101,6 +228,7 @@
</a-radio-group>
</div>
</a-form-item>
+
<a-form-item class="width-100" style="margin-bottom: 40px;">
<div class="footer">
<a-button class="mr10" style="background: #3c3c3c;" @click="closePlan">取消
@@ -113,13 +241,13 @@
</div>
</div>
<div v-if="drawerVisible"
- style="position: absolute; left: 335px; width: 280px; height: 100vh; float: right; top: 0; z-index: 1000; color: white; background: #282828;">
+ 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 />
+ <CloseOutlined/>
</a>
</div>
</div>
@@ -127,14 +255,32 @@
<script lang="ts" setup>
import { computed, onMounted, onUnmounted, reactive, ref, toRaw, UnwrapRef } from 'vue'
-import { CloseOutlined, RocketOutlined, CameraFilled, UserOutlined, PlusCircleOutlined, MinusCircleOutlined } 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, TaskTypeOptions } from '/@/types/task'
+import {
+ TaskType,
+ OutOfControlActionOptions,
+ OutOfControlAction,
+ TaskTypeOptions,
+ FrequencyTypeOptions,
+ FrequencyType,
+ RepeatRuleTypeOptions,
+ RepeatRuleType,
+ WhichWeekOptions,
+ WhichDayOptions
+} from '/@/types/task'
import moment, { Moment } from 'moment'
import { RuleObject } from 'ant-design-vue/es/form/interface'
@@ -142,6 +288,10 @@
const store = useMyStore()
const workspaceId = localStorage.getItem(ELocalStorageKey.WorkspaceId)!
+
+const componentOptions = reactive({
+ size: 'small',
+})
const wayline = computed<WaylineFile>(() => {
return store.state.waylineInfo
@@ -162,7 +312,56 @@
select_execute_time: undefined as Moment | undefined,
rth_altitude: '',
out_of_control_action: OutOfControlAction.ReturnToHome,
+
+ time_range: [],
+ rep_fre_val: 1,
+ rep_fre_type: 3,
+ rep_rule_type: 1,
+
})
+
+const executeTimeRepeatArr = ref([
+ { index: 1, value: '' }
+])
+const executeTimeContinuousArr = ref([
+ { index: 1, value: [] }
+])
+// 重复规则为按星期时
+const repeatRuleValueWeek = ref([1, 1])
+// 重复规则为按日期时
+const repeatRuleValueDay = ref([] as any)
+const repeatFrequencyValueWeek = ref([] as any)
+const dayNumArr = ref([] as any)
+const weekNumArr = ref([] as any)
+
+initDayNumArr()
+initWeekNumArr()
+
+function initDayNumArr () {
+ dayNumArr.value = []
+ for (let i = 0; i < 31; i++) {
+ dayNumArr.value.push({
+ index: i + 1,
+ value: i + 1,
+ checked: false
+ })
+ }
+}
+
+function initWeekNumArr () {
+ weekNumArr.value = []
+ weekNumArr.value = WhichDayOptions
+}
+
+function selectBtn (item: any) {
+ item.checked = !item.checked
+ repeatRuleValueDay.value = dayNumArr.value.filter(e => e.checked).map(e => e.value)
+}
+
+function selectWeekBtn (item: any) {
+ item.checked = !item.checked
+ repeatFrequencyValueWeek.value = weekNumArr.value.filter(e => e.checked).map(e => e.value)
+}
const drawerVisible = ref(false)
const valueRef = ref()
@@ -174,6 +373,7 @@
file_id: [{ required: true, message: '请选择航线' }],
dock_sn: [{ required: true, message: '请选择设备' }],
select_execute_time: [{ required: true, message: '请选择任务策略' }],
+ time_range: [{ required: true, message: '请选择任务时间' }],
rth_altitude: [
{
validator: async (rule: RuleObject, value: string) => {
@@ -183,22 +383,119 @@
},
}
],
+ battery_capacity: [
+ {
+ validator: async (rule: RuleObject, value: string) => {
+ if (!/^[0-9]{1,}$/.test(value)) {
+ planBody.battery_capacity = ''
+ throw new Error('最小执行电量不能为空')
+ } else if (value < 50) {
+ planBody.battery_capacity = 50
+ } else if (value > 100) {
+ planBody.battery_capacity = 100
+ }
+ },
+ trigger: 'blur'
+ }
+ ],
out_of_control_action: [{ required: true, message: '请选择航线飞行中失联' }],
+}
+
+// 重复定时添加执行时间
+function addTime () {
+ if (planBody.task_type === TaskType.Repeat) {
+ const index = executeTimeRepeatArr.value[executeTimeRepeatArr.value.length - 1].index
+ executeTimeRepeatArr.value.push({
+ index: index + 1,
+ value: ''
+ })
+ } else if (planBody.task_type === TaskType.Continuous) {
+ const index = executeTimeContinuousArr.value[executeTimeContinuousArr.value.length - 1].index
+ executeTimeContinuousArr.value.push({
+ index: index + 1,
+ value: []
+ })
+ }
+}
+
+// 删除执行时间
+function deleteTime (item: any) {
+ if (planBody.task_type === TaskType.Repeat) {
+ executeTimeRepeatArr.value = executeTimeRepeatArr.value.filter(e => e.index !== item.index)
+ } else if (planBody.task_type === TaskType.Continuous) {
+ executeTimeContinuousArr.value = executeTimeContinuousArr.value.filter(e => e.index !== item.index)
+ }
}
function onSubmit () {
valueRef.value.validate().then(() => {
disabled.value = true
const createPlanBody = { ...planBody } as unknown as CreatePlan
- if (planBody.select_execute_time) {
- createPlanBody.task_days = [moment(planBody.select_execute_time).unix()]
- createPlanBody.task_periods = [createPlanBody.task_days]
+
+ switch (planBody.task_type) {
+ case TaskType.Timed:
+ if (planBody.select_execute_time) {
+ createPlanBody.task_days = [moment(planBody.select_execute_time).unix()]
+ createPlanBody.task_periods = [createPlanBody.task_days]
+ }
+ break
+ case TaskType.Repeat:
+
+ createPlanBody.task_type = 2
+
+ createPlanBody.task_days = [moment(planBody.time_range[0]).unix(), moment(planBody.time_range[1]).unix()]
+ createPlanBody.task_periods = []
+ // 执行时间
+ executeTimeRepeatArr.value.forEach(item => {
+ console.log(item, '------')
+
+ createPlanBody.task_periods.push([moment(item.value).unix()])
+ })
+
+ if (planBody.rep_fre_type === FrequencyType.month) {
+ // 频率为月
+ if (planBody.rep_rule_type === RepeatRuleType.day) {
+ // 规则为按日期
+ createPlanBody.rep_rule_val = repeatRuleValueDay.value
+ } else {
+ // 规则为按星期
+ createPlanBody.rep_rule_val = repeatRuleValueWeek.value
+ }
+ } else if (planBody.rep_fre_type === FrequencyType.week) {
+ createPlanBody.rep_rule_val = repeatFrequencyValueWeek.value
+ }
+ console.log(createPlanBody, '*******************')
+
+ break
+ case TaskType.Continuous:
+ createPlanBody.task_type = 2
+ createPlanBody.task_days = [moment(planBody.time_range[0]).unix(), moment(planBody.time_range[1]).unix()]
+
+ if (planBody.rep_fre_type === FrequencyType.month) {
+ // 频率为月
+ if (planBody.rep_rule_type === RepeatRuleType.day) {
+ // 规则为按日期
+ createPlanBody.rep_rule_val = repeatRuleValueDay.value
+ } else {
+ // 规则为按星期
+ createPlanBody.rep_rule_val = repeatRuleValueWeek.value
+ }
+ } else if (planBody.rep_fre_type === FrequencyType.week) {
+ createPlanBody.rep_rule_val = repeatFrequencyValueWeek.value
+ }
+ createPlanBody.task_periods = []
+ // 执行时间
+ executeTimeContinuousArr.value.forEach(item => {
+ createPlanBody.task_periods.push([moment(item.value[0]).unix(), moment(item.value[1]).unix()])
+ })
+
+ break
}
+
createPlanBody.rth_altitude = Number(createPlanBody.rth_altitude)
if (wayline.value && wayline.value.template_types && wayline.value.template_types.length > 0) {
createPlanBody.wayline_type = wayline.value.template_types[0]
}
- // console.log('planBody', createPlanBody)
createPlan(workspaceId, createPlanBody)
.then(res => {
disabled.value = false
@@ -278,18 +575,83 @@
}
.plan-timer-form-item {
+ .task-plan-radio-group {
+ display: flex;
+ }
.ant-radio-button-wrapper {
background-color: #232323;
color: #fff;
width: 80%;
text-align: center;
+ padding: 0;
&.ant-radio-button-wrapper-checked {
background-color: #1890ff;
}
}
}
+
+ .execute-time-arr-item {
+ padding: 5px 0;
+ }
+
+ .execute-time-arr-continuous-item {
+ display: flex;
+ align-items: center;
+
+ .time-select {
+ display: flex;
+ align-items: center;
+ }
+
+ .btn-group {
+ display: flex;
+ }
+
+ }
+
+ .rep-fre-item {
+ display: flex;
+ align-items: center;
+ color: white;
+
+ div {
+ margin-right: 5px;
+ }
+ }
+
+ .rep-rule-item {
+ .rep-rule-val-day {
+ margin-top: 10px;
+
+ .btn {
+ width: 53px;
+ height: 30px;
+ padding: 5px;
+ text-align: center;
+ line-height: 15px;
+ }
+
+ }
+
+ .rep-rule-val-week {
+ display: flex;
+ margin-top: 5px;
+ }
+
+ }
+
+ .btn-selected {
+ background: #2d8cf0 !important;
+ color: white !important;
+ }
+
+ .btn-unselected {
+ background: #3c3c3c !important;
+ color: white !important;
+ }
+
}
.footer {
@@ -330,6 +692,7 @@
:deep(.ant-form-item-control-input-content) {
text-align: right;
}
+
.ant-form-item-control-input-content {
text-align: right;
}
--
Gitblit v1.9.3