细节样式调整

15179599649

2024-03-11 2362f8bce1fc26a28b3c2a019ae3216efa399de5

细节样式调整

 src/components/common/topbar.vue

@@ -1,32 +1,47 @@
<template>
  <div class="width-100 flex-row flex-justify-between flex-align-center" style="height: 60px;">
  <div class="width-100 flex-row flex-justify-between flex-align-center" style="height: 58px;">
    <div class="height-100">
      <!-- <a-avatar :size="40" shape="square" :src="cloudapi" /> -->
      <span class="ml10 fontBold">{{ workspaceName }}</span>
      <!-- <span class="ml10 fontBold">{{ workspaceName }}</span> -->
    </div>

    <a-space class="fz16 height-100" size="large">
        <router-link
      <router-link
        v-for="item in options"
        :key="item.key"
        :to="item.path"
        :class="{
            'menu-item': true,
        }">
          <span @click="selectedRoute(item.path)" :style="selected === item.path ? 'color: #2d8cf0;' : 'color: white'">{{ item.label }}</span>
        </router-link>
        }"
      >
        <span
          @click="selectedRoute(item.path)"
          :style="selected === item.path ? 'color: #2d8cf0;' : 'color: white'"
        >{{ item.label }}</span>
      </router-link>
    </a-space>

    <div class="height-100 fz16 flex-row flex-justify-between flex-align-center">
      <a-dropdown>
        <div class="height-100">
          <span class="fz20 mt20" style="border: 2px solid white; border-radius: 50%; display: inline-flex;"><UserOutlined /></span>
          <span class="ml10 mr10" style="float: right;">{{ username }}</span>
        <div class="height-100 flex-display flex-align-center" style="height:58px;">
          <span
            class="fz18"
            style="border: 2px solid white; border-radius: 50%; display: inline-flex;"
          >
            <UserOutlined />
          </span>
          <span class="ml5 mr5 fz14" style="float: right;">{{ username }}</span>
        </div>
        <template #overlay>
          <a-menu theme="dark" class="flex-column flex-justify-between flex-align-center">
          <a-menu
            theme="dark"
            class="flex-column flex-justify-between flex-align-center"
            style="margin-top:-15px;background:black"
          >
            <a-menu-item>
              <span class="mr10" style="font-size: 16px;"><ExportOutlined /></span>
              <span class="mr10" style="font-size: 16px;">
                <ExportOutlined />
              </span>
              <span @click="logout">退出登录</span>
            </a-menu-item>
          </a-menu>
@@ -47,13 +62,17 @@
const root = getRoot()
const selected = ref<string>(root.$route.path)
const route = useRoute()
watch(route, (newVal) => {
  if (newVal) {
    selected.value = newVal.path
  }
}, {
  immediate: true,
})
watch(
  route,
  (newVal) => {
    if (newVal) {
      selected.value = newVal.path
    }
  },
  {
    immediate: true,
  },
)
interface IOptions {
  key: number
  label: string
@@ -99,5 +118,4 @@
  font-weight: 500;
  font-size: 18px;
}

</style>

 src/components/task/CreatePlan.vue

@@ -1,54 +1,66 @@
<template>
  <div class="create-plan-wrapper">
    <div class="header">
      创建计划
    </div>
    <div class="header">创建计划</div>
    <div class="content">
      <a-form ref="valueRef" layout="horizontal" :hideRequiredMark="true" :rules="rules" :model="planBody"
              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="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">
          <router-link :to="{ name: 'select-plan' }" @click="selectRoute">
            选择航线
          </router-link>
          <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;">
                <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
                <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/>
                <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)] }}
              </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">更新时间: {{ new Date(wayline.update_time).toLocaleString() }}</span>
@@ -57,26 +69,36 @@
        </a-form-item>

        <!-- 设备 -->
        <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
          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;">
                <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>
@@ -86,46 +108,84 @@
        <!-- 任务类型 -->
        <a-form-item label="任务策略" class="plan-timer-form-item" :labelCol="{ span: 23 }">
          <div style="white-space: nowrap;">
            <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
              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-date-picker v-model:value="planBody.select_execute_time" format="YYYY-MM-DD HH:mm:ss" show-time
                         placeholder="请选择开始时间"/>
        <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 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
          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="[{
              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">
              <div style="display:flex;align-items:center;">
                <a-time-picker
                  v-model:value="item.value"
                  @change="onRepeatChange(item)"
                  format="HH:mm"
                  placeholder="请选择"
                />
                <p class="iconMargin" style="height:25px">
                  <PlusCircleOutlined
                    style="fontSize:18px;color:#ffffff;padding-top:10px;"
                    class="PlusCircle"
                    @click="addTime"
                  />
                  <MinusCircleOutlined
                    style="fontSize:18px;color:#ffffff"
                    @click="deleteTime(item)"
                  />
                </p>
              </div>
              <!-- <a-button @click="addTime" type="default" shape="circle" :size="componentOptions.size">
                <template #icon>
                  <PlusCircleOutlined/>
                </template>
@@ -134,7 +194,7 @@
                <template #icon>
                  <MinusCircleOutlined/>
                </template>
              </a-button>
              </a-button>-->
            </a-form-item>
          </div>
        </div>
@@ -142,141 +202,208 @@
        <!-- 执行时间 (连续执行)-->
        <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="{
            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"/>
                  <a-time-picker
                    style="width: 100px;"
                    v-model:value="item.value[0]"
                    @change="onContinuousChange(item)"
                    format="HH:mm"
                    placeholder="请选择"
                  />
                </div>
                <div style="color: white">-</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"/>
                  <a-time-picker
                    style="width: 100px;"
                    placeholder="请选择"
                    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">
                <p class="iconMargin" style="height:23px">
                  <PlusCircleOutlined
                    style="fontSize:17px;color:#ffffff;padding-top:10px;"
                    class="PlusCircle"
                    @click="addTime"
                  />
                  <MinusCircleOutlined
                    style="fontSize:17px;color:#ffffff"
                    @click="deleteTime(item)"
                  />
                </p>
                <!-- <a-button
                  @click="addTime"
                  type="default"
                  shape="circle"
                  :size="componentOptions.size"
                >
                  <template #icon>
                    <PlusCircleOutlined/>
                    <PlusCircleOutlined />
                  </template>
                </a-button>
                <a-button @click="deleteTime(item)" type="default" shape="circle" :size="componentOptions.size">
                <a-button
                  @click="deleteTime(item)"
                  type="default"
                  shape="circle"
                  :size="componentOptions.size"
                >
                  <template #icon>
                    <MinusCircleOutlined/>
                    <MinusCircleOutlined />
                  </template>
                </a-button>
                </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
          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 }">
        <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"/>
              <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 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>
          v-if="(planBody.task_type === TaskType.Repeat || planBody.task_type === TaskType.Continuous) && planBody.rep_fre_type === FrequencyType.week"
          :labelCol="{ span: 23 }"
          class="repetitiveFrequency"
        >
          <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 }">
        <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>
              <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>
              <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>
              <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-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;">
            <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-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 class="width-100" style="margin-bottom: 40px;">
          <div class="footer">
            <a-button class="mr10" style="background: #3c3c3c;" @click="closePlan">取消
            </a-button>
            <a-button type="primary" @click="onSubmit" :disabled="disabled">确定
            </a-button>
            <a-button class="mr10" style="background: #3c3c3c;" @click="closePlan">取消</a-button>
            <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: 335px; width: 280px; height: 100vh; float: right; top: 0; z-index: 1000; color: white; background: #282828;">
  <div
    v-if="drawerVisible"
    style="position: absolute; left: 350px; 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>
@@ -290,7 +417,7 @@
  MinusCircleOutlined,
  PlusCircleOutlined,
  RocketOutlined,
  UserOutlined
  UserOutlined,
} from '@ant-design/icons-vue'
import { ELocalStorageKey, ERouterName } from '/@/types'
import { useMyStore } from '/@/store'
@@ -308,7 +435,7 @@
  TaskType,
  TaskTypeOptions,
  WhichDayOptions,
  WhichWeekOptions
  WhichWeekOptions,
} from '/@/types/task'
import moment, { Moment } from 'moment'
import { RuleObject } from 'ant-design-vue/es/form/interface'
@@ -349,31 +476,31 @@
  rep_rule_type: 1,

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

watch(
  planBody.executeTimeRepeatArr,
  (newVal) => {
    if (newVal.length) {
      newVal.forEach(item => {
      newVal.forEach((item) => {
        planBody[`${item.index}repValue`] = item.value
      })
    }
  },
  { deep: true, immediate: true }
  { deep: true, immediate: true },
)

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

// 重复规则为按星期时
@@ -393,7 +520,7 @@
    dayNumArr.value.push({
      index: i + 1,
      value: i + 1,
      checked: false
      checked: false,
    })
  }
}
@@ -405,12 +532,12 @@

function selectBtn (item: any) {
  item.checked = !item.checked
  repeatRuleValueDay.value = dayNumArr.value.filter(e => e.checked).map(e => e.value)
  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)
  repeatFrequencyValueWeek.value = weekNumArr.value.filter((e) => e.checked).map((e) => e.value)
}

const drawerVisible = ref(false)
@@ -418,7 +545,7 @@
const rules = {
  name: [
    { required: true, message: '请输入计划名称' },
    { max: 20, message: '计划名称长度在2-20之间', trigger: 'blur' }
    { max: 20, message: '计划名称长度在2-20之间', trigger: 'blur' },
  ],
  file_id: [{ required: true, message: '请选择航线' }],
  dock_sn: [{ required: true, message: '请选择设备' }],
@@ -433,7 +560,7 @@
          throw new Error('返航高度需在20-500米之间')
        }
      },
    }
    },
  ],
  min_battery_capacity: [
    {
@@ -447,8 +574,8 @@
          planBody.min_battery_capacity = 90
        }
      },
      trigger: 'blur'
    }
      trigger: 'blur',
    },
  ],
  out_of_control_action: [{ required: true, message: '请选择航线飞行中失联' }],
  rep_fre_val: [
@@ -459,9 +586,9 @@
          throw new Error('重复频率不能为空')
        }
      },
      trigger: ['blur', 'change']
    }
  ]
      trigger: ['blur', 'change'],
    },
  ],
}

function validateContinuousExecuteTime (rule: RuleObject, value: Moment[]) {
@@ -498,13 +625,13 @@
    const index = planBody.executeTimeRepeatArr[planBody.executeTimeRepeatArr.length - 1].index
    planBody.executeTimeRepeatArr.push({
      index: index + 1,
      value: ''
      value: '',
    })
  } else if (planBody.task_type === TaskType.Continuous) {
    const index = planBody.executeTimeContinuousArr[planBody.executeTimeContinuousArr.length - 1].index
    planBody.executeTimeContinuousArr.push({
      index: index + 1,
      value: []
      value: [],
    })
  }
}
@@ -512,106 +639,110 @@
// 删除执行时间
function deleteTime (item: any) {
  if (planBody.task_type === TaskType.Repeat) {
    planBody.executeTimeRepeatArr = planBody.executeTimeRepeatArr.filter(e => e.index !== item.index)
    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)
    planBody.executeTimeContinuousArr = planBody.executeTimeContinuousArr.filter((e) => e.index !== item.index)
  }
}

function onSubmit () {
  valueRef.value.validate().then(() => {
    disabled.value = true
    const createPlanBody = { ...planBody } as unknown as CreatePlan
  valueRef.value
    .validate()
    .then(() => {
      disabled.value = true
      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
      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]
          }
        } else if (planBody.rep_fre_type === FrequencyType.week) {
          createPlanBody.rep_rule_val = repeatFrequencyValueWeek.value
        }
          break
        case TaskType.Repeat:
          createPlanBody.task_type = 2

        break
      case TaskType.Continuous:
        // createPlanBody.task_type = 2
        createPlanBody.task_days = [moment(planBody.time_range[0]).unix(), moment(planBody.time_range[1]).unix()]
          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
          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
          }
        } 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
    }
          break
        case TaskType.Continuous:
          // createPlanBody.task_type = 2
          createPlanBody.task_days = [moment(planBody.time_range[0]).unix(), moment(planBody.time_range[1]).unix()]

    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.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()])
          })

    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
          break
      }

      createPlanCondition(workspaceId, createPlanBody)
        .then(res => {
          disabled.value = false
        }).finally(() => {
          closePlan()
        })
    }
  }).catch((e: any) => {
    console.log('validate err', e)
  })
      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 closePlan () {
@@ -642,7 +773,7 @@
  height: 100vh;
  display: flex;
  flex-direction: column;
  width: 285px;
  width: 100%;

  .header {
    height: 52px;
@@ -659,8 +790,9 @@
  }

  .content {
    height: calc(100% - 54px);
    height: calc(100vh - 110px);
    overflow-y: auto;
    padding-right: 30px;

    form {
      margin: 10px;
@@ -676,7 +808,9 @@
      background-color: #232323;
      color: #fff;
    }

    .ant-time-picker {
      width: 100px !important;
    }
    .ant-input-suffix {
      color: #fff;
    }
@@ -715,7 +849,6 @@
      .btn-group {
        display: flex;
      }

    }

    .rep-fre-item {
@@ -739,14 +872,12 @@
          text-align: center;
          line-height: 15px;
        }

      }

      .rep-rule-val-week {
        display: flex;
        margin-top: 5px;
      }

    }

    .btn-selected {
@@ -758,7 +889,6 @@
      background: #3c3c3c !important;
      color: white !important;
    }

  }

  .footer {
@@ -825,4 +955,30 @@
    font-weight: bold;
    margin: 0px 10px 0 10px;
  }
}</style>
}

.anticon-plus-circle {
  margin-left: 5px;
}
.anticon-minus-circle {
  margin-left: 3px;
}
.iconMargin {
  display: inline-block;
}
.ant-form-item {
  margin-bottom: 0px !important;
}
.ant-time-picker-panel-combobox {
  width: 100px !important;
}
.ant-time-picker-panel-input-wrap {
  width: 100px !important;
}
.ant-time-picker-panel-select {
  width: 50px !important;
}
.repetitiveFrequency {
  margin-top: 10px !important;
}
</style>

 src/pages/page-web/home.vue

@@ -1,6 +1,5 @@
<template>
  <a-config-provider :locale="zhCN">

    <a-layout class="width-100 flex-display" style="height: 100vh">
      <a-layout-header class="header" v-show="$route.meta.header!=false">
        <Topbar/>
@@ -70,7 +69,7 @@
.header {
  background-color: black;
  color: white;
  height: 60px;
  height: 58px;
  font-size: 15px;
  padding: 0 20px;
}