重复定时和连续执行

guoshilong

2023-11-13 54849757852f6ab40eb17afbd03d1d839b60a38d

 src/components/task/CreatePlan.vue

@@ -1,244 +1,263 @@
<template>
  <div class="create-plan-wrapper">
    <div class="header">
      新建计划
      创建计划
    </div>
    <div class="content">
      <a-form ref="valueRef" layout="horizontal" :hideRequiredMark="true" :rules="rules" :model="planForm"
        labelAlign="left">
      <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="planForm.name" />
          <a-input style="background: black;" placeholder="请输入计划名称" v-model:value="planBody.name"/>
        </a-form-item>

        <!-- 航线 -->
        <a-form-item label="执行航线" :wrapperCol="{ offset: 12 }" name="fileId">
        <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="planForm.fileId" style="margin-top: -15px;">
        <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 }}
                  {{
                    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 }}
                     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>
                  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)] }}
              </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="执行设备" :wrapperCol="{ offset: 12 }" v-model:value="planForm.dockSn" name="dockSn">
          <router-link :to="{ name: 'select-plan' }" @click="selectDevice">选择设备
        <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="planForm.dockSn" style="margin-top: -15px;">
        <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 }}
                  {{
                    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="任务策略" name="taskType" class="plan-timer-form-item" :labelCol="{ span: 23 }">
        <!-- 任务类型 -->
        <a-form-item label="任务策略" class="plan-timer-form-item" :labelCol="{ span: 23 }">
          <div style="white-space: nowrap;">
            <a-radio-group class="group_radio" v-model:value="planForm.taskType" button-style="solid"
              @change="taskTypeChange">
              <a-radio-button v-for="type in TaskTypeOptions" :value="type.value" :key="type.value">{{
                type.label
              }}
            <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="planForm.taskType === TaskType.Timed" name="executeSingleTime"
          :labelCol="{ span: 23 }">
          <a-date-picker v-model:value="planForm.executeSingleTime" format="YYYY-MM-DD HH:mm"
            valueFormat="YYYY-MM-DD HH:mm" show-time placeholder="请选择日期" />
        </a-form-item>

        <!--重复定时-->
        <!--执行日期-->
        <a-form-item v-if="planForm.taskType === TaskType.RepeatTimed || planForm.taskType === TaskType.Continuous"
          label="执行日期" name="repeatExecuteTimeArr" :labelCol="{ span: 23 }">
          <a-range-picker v-model:value="planForm.repeatExecuteTimeArr" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD"
            :placeholder="['开始日期', '结束日期']" />
        </a-form-item>

        <!--执行时间-->
        <a-form-item v-if="planForm.taskType === TaskType.RepeatTimed" label="执行时间" name="repeatTimeArr"
          :labelCol="{ span: 23 }">
          <div v-for="(item, index) in repeatTimeArr" :key="index">
            <a-time-picker style="background: black" v-model:value="item.value" placeholder="请选择时间" format="HH:mm"
              valueFormat="HH:mm" />

            <a-button @click="addTime" type="default" shape="circle" :size="btnSize">
              <template #icon>
                <PlusCircleOutlined />
              </template>
            </a-button>

            <a-button @click="deleteTime(item)" type="default" shape="circle" :size="btnSize">
              <template #icon>
                <MinusCircleOutlined />
              </template>
            </a-button>
          </div>
        </a-form-item>
        <a-form-item v-if="planForm.taskType === TaskType.Continuous" label="执行时间" name="repeatTimeArr"
          :labelCol="{ span: 23 }">
          <div v-for="(item, index) in repeatTimeArr" :key="index">
            <a-time-picker style="background: black" v-model:value="item.value[0]" placeholder="请选择时间" format="HH:mm"
              valueFormat="HH:mm" />
            <div style="color: white">-</div>
            <a-time-picker style="background: black" v-model:value="item.value[1]" placeholder="请选择时间" format="HH:mm"
              valueFormat="HH:mm" />

            <a-button @click="addTime" type="default" shape="circle" :size="btnSize">
              <template #icon>
                <PlusCircleOutlined />
              </template>
            </a-button>

            <a-button @click="deleteTime(item)" type="default" shape="circle" :size="btnSize">
              <template #icon>
                <MinusCircleOutlined />
              </template>
            </a-button>
          </div>
        </a-form-item>

        <!-- 任务开始执行的电量 -->
        <a-form-item v-if="planForm.taskType === TaskType.Continuous" label="任务开始执行的电量" :labelCol="{ span: 23 }"
          name="startPower">
          <a-input style="background: black;" placeholder="请输入计划名称" v-model:value="planForm.startPower" />

        <!-- 执行时间 (单次定时)-->
        <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>

        <!--重复频率-->
        <a-form-item v-if="planForm.taskType === TaskType.RepeatTimed || planForm.taskType === TaskType.Continuous"
          label="重复频率" name="frequencyValue" :labelCol="{ span: 23 }">
          <div>
            <div style="color: white">每</div>
            <a-input style="background-color: black;" placeholder="请输入计划名称" v-model:value="planForm.frequencyValue" />
            <a-select v-model:value="planForm.frequencyType" style="width: 200px"
              :options="FrequencyTypeOptions"></a-select>
        <!-- 执行日期-->
        <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>

        <!-- 执行时间 (重复定时)-->
        <div v-if="planBody.task_type === TaskType.Repeat">
          <div class="execute-time-arr-item">
            <a-form-item
                v-for="(item, index) in planBody.executeTimeRepeatArr"
                :key="item.index"
                :label="index === 0 ? '执行时间' : ''"
                :name="item.index+'repValue'"
                :labelCol="{ span: 23 }"
                :rules="[{
                required: true,
                trigger: ['change','blur'],
                validator: validateRepeatExecuteTime
              }]"
            >
              <a-time-picker v-model:value="item.value" @change="onRepeatChange(item)" 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>
            </a-form-item>
          </div>
        </div>

        <!-- 执行时间 (连续执行)-->
        <div v-if="planBody.task_type === TaskType.Continuous">
          <a-form-item
              v-for="(item, index) in planBody.executeTimeContinuousArr"
              :key="item.index"
              :label="index === 0 ? '执行时间' : ''"
              :name="item.index+'conValue'"
              :labelCol="{ span: 23 }"
              :rules="{
                required: true,
                trigger: ['change', 'blur'],
               validator: validateContinuousExecuteTime
              }"
          >

            <div class="execute-time-arr-continuous-item">
              <div class="time-select">
                <div class="time-item">
                  <a-time-picker style="width: 100px;" v-model:value="item.value[0]" @change="onContinuousChange(item)"
                                 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]" @change="onContinuousChange(item)"
                                 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>
        </div>

        <!-- 任务开始执行的电量-->
        <a-form-item label="任务开始执行的电量" v-if=" planBody.task_type === TaskType.Continuous"
                     name="min_battery_capacity" :labelCol="{ span: 23 }">
          <a-input style="background: black;" v-model:value="planBody.min_battery_capacity"/>
        </a-form-item>

        <!-- 重复频率-->
        <a-form-item label="重复频率"
                     v-if="planBody.task_type === TaskType.Repeat || planBody.task_type === TaskType.Continuous"
                     name="rep_fre_val"
                     :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="planForm.taskType === TaskType.RepeatTimed || planForm.taskType === TaskType.Continuous"
          label="重复规则" name="repeatRuleType" :labelCol="{ span: 23 }">
          <div>
            <a-select v-model:value="planForm.repeatRuleType" style="background-color:black;width: 200px"
              @change="repeatRuleTypeChange" :options="RepeatRuleTypeOptions"></a-select>
          </div>

          <div v-if="planForm.repeatRuleType === RepeatRuleType.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="planForm.repeatRuleType === RepeatRuleType.week">
            <a-select v-model:value="planForm.repeatRuleValueWeek[0]" style="width: 200px"
              :options="WhichWeekOptions"></a-select>
            <a-select v-model:value="planForm.repeatRuleValueWeek[1]" style="width: 200px"
              :options="WhichDayOptions"></a-select>
          </div>

        <!-- 重复频率-->
        <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="相对机场返航高度（ALT）" :labelCol="{ span: 23 }" name="rthAltitude">
          <div class="form-alt">
            <a-button class="alt-btn" type="primary" size="small" :disabled="calculateDisabled('-', 100)"
              @click="calculate('-', 100)">-100</a-button>
            <a-button class="alt-btn" type="primary" size="small" :disabled="calculateDisabled('-', 10)"
              @click="calculate('-', 10)">-10</a-button>
            <a-button class="alt-btn" type="primary" size="small" :disabled="calculateDisabled('-', 1)"
              @click="calculate('-', 1)">-1</a-button>
        <!-- 重复规则-->
        <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>

            <a-input class="alt-input" v-model:value="planForm.rthAltitude" :min="20" :max="1500" required />
            <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>

            <a-button class="alt-btn" type="primary" size="small" :disabled="calculateDisabled('+', 1)"
              @click="calculate('+', 1)">+1</a-button>
            <a-button class="alt-btn" type="primary" size="small" :disabled="calculateDisabled('+', 10)"
              @click="calculate('+', 10)">+10</a-button>
            <a-button class="alt-btn" type="primary" size="small" :disabled="calculateDisabled('+', 100)"
              @click="calculate('+', 100)"> +100</a-button>
            <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="outOfControl">
          <div class="form-outOfControl" style="white-space: nowrap;">
            <a-radio-group v-model:value="planForm.outOfControl" button-style="solid">
              <a-radio-button v-for="(action, acIndex) in  OutOfControlActionOptions " :value="action.value"
                :key="action.value" :style="{ marginRight: ( acIndex === 0 ? '10px' : '0px' ) }">
        <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">
                {{ action.label }}
              </a-radio-button>
            </a-radio-group>
          </div>
        </a-form-item>

        <!--完成动作-->
        <a-form-item label="完成动作" :labelCol="{ span: 23 }" name="finishAction">
          <a-select disabled v-model:value="planForm.finishAction" style="width: 200px"
            :options="FinishActionOptions"></a-select>
        </a-form-item>

        <!--断点续飞-->
        <a-form-item label="自动断点续飞" :labelCol="{ span: 20 }" name="breakContinue">
          <a-switch v-model:checked="planForm.breakContinue" :checkedValue="1" :unCheckedValue="2" />
        </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">取消
@@ -251,96 +270,122 @@
    </div>
  </div>
  <div v-if="drawerVisible"
    style="position: absolute; left: 370px; 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>
</template>

<script lang="ts" setup>
import { computed, onMounted, onUnmounted, reactive, ref, toRaw, UnwrapRef } from 'vue'
import { computed, reactive, ref } from 'vue'
import {
  CloseOutlined,
  RocketOutlined,
  CameraFilled,
  UserOutlined,
  CloseOutlined,
  MinusCircleOutlined,
  PlusCircleOutlined,
  MinusCircleOutlined
  RocketOutlined,
  UserOutlined
} from '@ant-design/icons-vue'
import { ELocalStorageKey, ERouterName } from '/@/types'
import { useMyStore } from '/@/store'
import { WaylineType, WaylineFile } from '/@/types/wayline'
import { WaylineFile } from '/@/types/wayline'
import { Device, EDeviceType } from '/@/types/device'
import { createPlan, waylineJob } from '/@/api/wayline'
import { createPlan, CreatePlan, createPlanCondition } from '/@/api/wayline'
import { getRoot } from '/@/root'
import {
  TaskType,
  OutOfControlActionOptions,
  OutOfControlAction,
  TaskTypeOptions,
  FrequencyType,
  FrequencyTypeOptions,
  RepeatRuleTypeOptions,
  OutOfControlAction,
  OutOfControlActionOptions,
  RepeatRuleType,
  WhichWeekOptions, WhichDayOptions, FinishActionOptions, FrequencyType
  RepeatRuleTypeOptions,
  TaskType,
  TaskTypeOptions,
  WhichDayOptions,
  WhichWeekOptions
} from '/@/types/task'
import moment, { Moment } from 'moment'
import { RuleObject } from 'ant-design-vue/es/form/interface'
import { getFlyTimeList } from '/@/utils/jobTime'

const btnSize = 'size'
const root = getRoot()
const store = useMyStore()

const workspaceId = localStorage.getItem(ELocalStorageKey.WorkspaceId)!

const componentOptions = reactive({
  size: 'small',
})

const wayline = computed<WaylineFile>(() => {
  return store.state.waylineInfo
})

const calculateDisabled = computed(() => {
  return function (a: string, b: number) {
    return a === '-' ? planForm.rthAltitude - b < 20 : planForm.rthAltitude + b > 1500
  }
const dock = computed<Device>(() => {
  return store.state.dockInfo
})

// 表单对象
const disabled = ref(false)

const planForm = reactive<waylineJob>({
  name: '新建计划',
  fileId: '',
  dockSn: '',
  workspaceId: '',
  waylineId: '',
  taskType: TaskType.Immediate,
const routeName = ref('')
const planBody = reactive({
  name: '',
  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,
  rth_altitude: '',
  out_of_control_action: OutOfControlAction.ReturnToHome,

  executeSingleTime: '',
  repeatExecuteTimeArr: [],
  executeStartTime: '',
  executeEndTime: '',
  executeRepeatTime: [],
  frequencyValue: 1,
  frequencyType: FrequencyType.month,
  repeatRuleType: RepeatRuleType.day,
  repeatRuleValueWeek: [1, 1],
  startPower: 90,
  rthAltitude: 20,
  outOfControl: 0,
  finishAction: 1,
  breakContinue: 2,
  time_range: [],
  rep_fre_val: 1,
  rep_fre_type: 3,
  rep_rule_type: 1,

  executeTimeContinuousArr: [{ index: 1, value: [] }],
  executeTimeRepeatArr: [{ index: 1, value: '' }]
})

interface commonObj {
  index: number
  value: any
  checked?: boolean
}
watch(
  planBody.executeTimeRepeatArr,
  (newVal) => {
    if (newVal.length) {
      newVal.forEach(item => {
        planBody[`${item.index}repValue`] = item.value
      })
    }
  },
  { deep: true, immediate: true }
)

const dayNumArr = ref<commonObj[]>([])
watch(
  planBody.executeTimeContinuousArr,
  (newVal) => {
    if (newVal.length) {
      newVal.forEach(item => {
        planBody[`${item.index}conValue`] = item.value
      })
    }
  },
  { deep: true, immediate: true }
)

// 重复规则为按星期时
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 = []
@@ -353,121 +398,220 @@
  }
}

// 重复定时的执行时间
const repeatTimeArr = ref<commonObj[]>([
  { index: 0, value: '' },
])

function taskTypeChange (e: any) {
  if (e.target.value === TaskType.Continuous) {
    repeatTimeArr.value = [
      { index: 0, value: [] }
    ]
  } else if (e.target.value === TaskType.RepeatTimed) {
    repeatTimeArr.value = [
      { index: 0, value: '' }
    ]
  }
function initWeekNumArr () {
  weekNumArr.value = []
  weekNumArr.value = WhichDayOptions
}

const repeatRuleValue = ref([] as string[])
function selectBtn (item: any) {
  item.checked = !item.checked
  repeatRuleValueDay.value = dayNumArr.value.filter(e => e.checked).map(e => e.value)
}

const dock = computed<Device>(() => {
  return store.state.dockInfo
})

const disabled = ref(false)

const routeName = ref('')
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()
const rules = {
  name: [
    { required: true, message: '请输入计划名称' },
    { max: 20, message: '长度不能超过20个字符', trigger: 'blur' }
    { max: 20, message: '计划名称长度在2-20之间', trigger: 'blur' }
  ],
  // fileId: [{ required: true, message: 'Select Route' }],
  // dockSn: [{ required: true, message: 'Select Device' }],
  // select_execute_time: [{ required: true, message: 'Select start time' }],
  rthAltitude: [
  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) => {
        if (!/^[0-9]{1,}$/.test(value)) {
          throw new Error('RTH Altitude Relative Require number')
          throw new Error('相对机场返航高度需为数字类型')
        } else if (Number(value) < 20 || Number(value) > 500) {
          throw new Error('返航高度需在20-500米之间')
        }
      },
    }
  ],
  outOfControl: [{ required: true, message: 'Select Lost Action' }],
  min_battery_capacity: [
    {
      validator: async (rule: RuleObject, value: string) => {
        if (!/^[0-9]{1,}$/.test(value)) {
          planBody.min_battery_capacity = ''
          throw new Error('最小执行电量不能为空')
        } else if (value < 50) {
          planBody.min_battery_capacity = 50
        } else if (value > 90) {
          planBody.min_battery_capacity = 90
        }
      },
      trigger: 'blur'
    }
  ],
  out_of_control_action: [{ required: true, message: '请选择航线飞行中失联' }],
  rep_fre_val: [
    {
      validator: async (rule: RuleObject, value: string) => {
        if (!/^[0-9]{1,}$/.test(value)) {
          planBody.rep_fre_val = ''
          throw new Error('重复频率不能为空')
        }
      },
      trigger: ['blur', 'change']
    }
  ]
}

function validateContinuousExecuteTime (rule: RuleObject, value: Moment[]) {
  if (!value[0]) {
    return Promise.reject(new Error('请选择执行时间'))
  } else if (value.length < 2) {
    return Promise.reject(new Error('请选择执行结束时间'))
  } else if (value[1].isBefore(value[0])) {
    return Promise.reject(new Error('执行结束时间不能小于执行开始时间'))
  } else {
    return Promise.resolve()
  }
}

function validateRepeatExecuteTime (rule: RuleObject, value: any) {
  if (!value) {
    return Promise.reject(new Error('请选择执行时间'))
  } else {
    return Promise.resolve()
  }
}

function onRepeatChange (item: any) {
  planBody[`${item.index}repValue`] = item.value
}

function onContinuousChange (item: any) {
  planBody[`${item.index}conValue`] = item.value
}

// 重复定时添加执行时间
function addTime () {
  if (planBody.task_type === TaskType.Repeat) {
    const index = planBody.executeTimeRepeatArr[planBody.executeTimeRepeatArr.length - 1].index
    planBody.executeTimeRepeatArr.push({
      index: index + 1,
      value: ''
    })
  } else if (planBody.task_type === TaskType.Continuous) {
    const index = planBody.executeTimeContinuousArr[planBody.executeTimeContinuousArr.length - 1].index
    planBody.executeTimeContinuousArr.push({
      index: index + 1,
      value: []
    })
  }
}

// 删除执行时间
function deleteTime (item: any) {
  if (planBody.task_type === TaskType.Repeat) {
    planBody.executeTimeRepeatArr = planBody.executeTimeRepeatArr.filter(e => e.index !== item.index)
  } else if (planBody.task_type === TaskType.Continuous) {
    planBody.executeTimeContinuousArr = planBody.executeTimeContinuousArr.filter(e => e.index !== item.index)
  }
}

function onSubmit () {
  valueRef.value.validate().then(() => {
    disabled.value = true
    const form = buildForm()
    createPlan(form).then(res => {
      disabled.value = false
    }).finally(() => {
      closePlan()
    })
    const createPlanBody = { ...planBody } as unknown as CreatePlan

    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 = []
        // 执行时间
        planBody.executeTimeRepeatArr.forEach(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
        }

        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 = []
        // 执行时间
        planBody.executeTimeContinuousArr.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]
    }

    if (planBody.task_type === TaskType.Immediate || planBody.task_type === TaskType.Timed) {
      createPlan(workspaceId, createPlanBody)
        .then(res => {
          disabled.value = false
        }).finally(() => {
          closePlan()
        })
    } else {
      createPlanBody.execute_start_time_arr = getFlyTimeList(createPlanBody)
      console.log(createPlanBody, '-----------------------')

      if (planBody.task_type === TaskType.Repeat) {
        createPlanBody.task_type = 1
      } else if (planBody.task_type === TaskType.Continuous) {
        createPlanBody.task_type = 2
      }

      createPlanCondition(workspaceId, createPlanBody)
        .then(res => {
          disabled.value = false
        }).finally(() => {
          closePlan()
        })
    }
  }).catch((e: any) => {
    console.log('validate err', e)
  })
}

// 构建表单
function buildForm () {
  const form: any = {}

  // 公共字段
  form.name = planForm.name
  form.workspaceId = store.state.common.projectId
  form.waylineId = planForm.waylineId
  form.dockSn = planForm.dockSn
  form.taskType = planForm.taskType
  form.rthAltitude = planForm.rthAltitude
  form.outOfControl = planForm.outOfControl
  form.breakContinue = planForm.breakContinue
  form.finishAction = planForm.finishAction
  form.status = 1

  // 根据不同任务策略给form添加不同字段
  if (planForm.taskType === TaskType.Timed) {
    form.executeSingleTime = planForm.executeSingleTime
  } else if (planForm.taskType === TaskType.RepeatTimed) {
    form.executeStartTime = planForm.repeatExecuteTimeArr[0]
    form.executeEndTime = planForm.repeatExecuteTimeArr[1]

    form.executeRepeatTime = repeatTimeArr.value.map(e => e.value)

    form.frequencyType = planForm.frequencyType
    form.frequencyValue = planForm.frequencyValue
    form.repeatRuleType = planForm.repeatRuleType
    if (planForm.repeatRuleType === 1) {
      form.repeatRuleValue = planForm.repeatRuleValueDay
    } else {
      form.repeatRuleValue = planForm.repeatRuleValueWeek
    }
  } else if (planForm.taskType === TaskType.Continuous) {
    form.executeStartTime = planForm.repeatExecuteTimeArr[0]
    form.executeEndTime = planForm.repeatExecuteTimeArr[1]
    form.executeRepeatTime = planForm.executeRepeatTime
    form.frequencyType = planForm.frequencyType
    form.frequencyValue = planForm.frequencyValue
    form.startPower = planForm.startPower

    form.executeRepeatTime = repeatTimeArr.value.map(e => e.value)
    form.repeatRuleType = planForm.repeatRuleType
    if (planForm.repeatRuleType === 1) {
      form.repeatRuleValue = planForm.repeatRuleValueDay
    } else {
      form.repeatRuleValue = planForm.repeatRuleValueWeek
    }
  }

  console.log('表单：', form)
  return form
}

function closePlan () {
@@ -488,50 +632,6 @@
  drawerVisible.value = true
  routeName.value = 'DockPanel'
}

// 重复定时添加执行时间
function addTime () {
  const index = repeatTimeArr.value[repeatTimeArr.value.length - 1].index
  if (planForm.taskType === TaskType.RepeatTimed) {
    repeatTimeArr.value.push({
      index: index + 1,
      value: ''
    })
  } else if (planForm.taskType === TaskType.Continuous) {
    repeatTimeArr.value.push({
      index: index + 1,
      value: []
    })
  }
}

// 重复定时删除执行时间
function deleteTime (item: commonObj) {
  repeatTimeArr.value = repeatTimeArr.value.filter(e => e.index !== item.index)
}

// 重复规则变更
function repeatRuleTypeChange (value: any, option: any) {

}

// 计算高度
function calculate (operator: string, num: number) {
  if (operator === '+') {
    planForm.rthAltitude = planForm.rthAltitude + num
  } else {
    planForm.rthAltitude = planForm.rthAltitude - num
  }
}

function selectBtn (item: commonObj) {
  console.log(item, '++++++++++++++++++++++')
  item.checked = !item.checked
  planForm.repeatRuleValueDay = dayNumArr.value.filter(e => e.checked).map(e => e.value)
  console.log('dayNumArr', dayNumArr.value)
  console.log('重复规则值：', planForm.repeatRuleValueDay)
}

</script>

<style lang="scss">
@@ -542,7 +642,7 @@
  height: 100vh;
  display: flex;
  flex-direction: column;
  width: 320px;
  width: 285px;

  .header {
    height: 52px;
@@ -582,11 +682,14 @@
    }

    .plan-timer-form-item {
      .task-plan-radio-group {
        display: flex;
      }

      .ant-radio-button-wrapper {
        background-color: #232323;
        color: #fff;
        width: 23%;
        width: 80%;
        text-align: center;
        padding: 0;

@@ -594,13 +697,68 @@
          background-color: #1890ff;
        }
      }
    }

      .group_radio {
    .execute-time-arr-item {
      padding: 5px 0;
    }

    .execute-time-arr-continuous-item {
      display: flex;
      align-items: center;

      .time-select {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .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 {
@@ -637,6 +795,16 @@
  }
}

.text-r {
  :deep(.ant-form-item-control-input-content) {
    text-align: right;
  }

  .ant-form-item-control-input-content {
    text-align: right;
  }
}

.panel {
  background: #3c3c3c;
  margin-left: auto;
@@ -657,32 +825,4 @@
    font-weight: bold;
    margin: 0px 10px 0 10px;
  }
}

.form-alt {
  display: flex;
  align-items: center;

  .alt-btn {
    margin: 0 2px 0 2px;
    width: 45px;
    padding: 0 4px;
  }

  .alt-input {
    width: 50px;
    padding: 0;
    text-align: center;
  }
}

.btn-selected {
  background: #2d8cf0 !important;
  color: white !important;
}

.btn-unselected {
  background: #3c3c3c !important;
  color: white !important;
}
</style>
}</style>