From bae07cec6cfa99cadd98fb7eb0332cbde35a921e Mon Sep 17 00:00:00 2001
From: husq <931347610@qq.com>
Date: Wed, 13 Sep 2023 17:12:38 +0800
Subject: [PATCH] 计划样式初步修改
---
src/components/task/CreatePlan.vue | 199 +++++++++++++++++++++++++++----------------------
1 files changed, 108 insertions(+), 91 deletions(-)
diff --git a/src/components/task/CreatePlan.vue b/src/components/task/CreatePlan.vue
index 5dc2ed2..cd3736c 100644
--- a/src/components/task/CreatePlan.vue
+++ b/src/components/task/CreatePlan.vue
@@ -5,17 +5,14 @@
</div>
<div class="content">
<a-form ref="valueRef" layout="horizontal" :hideRequiredMark="true" :rules="rules" :model="planForm"
- labelAlign="left">
- <a-form-item label="计划名称" name="name" :labelCol="{span: 23}">
- <a-input style="background: black;" placeholder="请输入计划名称" v-model:value="planForm.name"/>
+ labelAlign="left">
+ <a-form-item label="计划名称" name="name" :labelCol="{ span: 23 }">
+ <a-input style="background: black;" placeholder="请输入计划名称" v-model:value="planForm.name" />
</a-form-item>
<!-- 航线 -->
- <a-form-item label="执行航线" :wrapperCol="{offset: 12}" name="fileId">
- <router-link
- :to="{name: 'select-plan'}"
- @click="selectRoute"
- >
+ <a-form-item label="执行航线" :wrapperCol="{ offset: 12 }" name="fileId">
+ <router-link :to="{ name: 'select-plan' }" @click="selectRoute">
选择航线
</router-link>
</a-form-item>
@@ -29,21 +26,25 @@
</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;">
+ style="width: 80px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">
{{ wayline.user_name }}
</div>
</a-tooltip>
</div>
<div class="ml10 mt5" style="color: hsla(0,0%,100%,0.65);">
- <span><RocketOutlined/></span>
+ <span>
+ <RocketOutlined />
+ </span>
<span class="ml5">{{
- Object.keys(EDeviceType)[Object.values(EDeviceType).indexOf(wayline.drone_model_key)]
- }}</span>
- <span class="ml10"><CameraFilled style="border-top: 1px solid; padding-top: -3px;"/></span>
+ Object.keys(EDeviceType)[Object.values(EDeviceType).indexOf(wayline.drone_model_key)]
+ }}</span>
+ <span class="ml10">
+ <CameraFilled style="border-top: 1px solid; padding-top: -3px;" />
+ </span>
<span class="ml5" v-for="payload in wayline.payload_model_keys" :key="payload.id">
{{ Object.keys(EDeviceType)[Object.values(EDeviceType).indexOf(payload)] }}
</span>
@@ -55,11 +56,8 @@
</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 label="执行设备" :wrapperCol="{ offset: 12 }" v-model:value="planForm.dockSn" name="dockSn">
+ <router-link :to="{ name: 'select-plan' }" @click="selectDevice">选择设备
</router-link>
</a-form-item>
<a-form-item v-if="planForm.dockSn" style="margin-top: -15px;">
@@ -72,19 +70,22 @@
</a-tooltip>
</div>
<div class="ml10 mt5" style="color: hsla(0,0%,100%,0.65);">
- <span><RocketOutlined/></span>
+ <span>
+ <RocketOutlined />
+ </span>
<span class="ml5">{{ dock.children?.nickname ?? 'No drone' }}</span>
</div>
</div>
</a-form-item>
<!-- 任务策略 -->
- <a-form-item label="任务策略" name="taskType" class="plan-timer-form-item" :labelCol="{span: 23}" >
+ <a-form-item label="任务策略" name="taskType" class="plan-timer-form-item" :labelCol="{ span: 23 }">
<div style="white-space: nowrap;">
- <a-radio-group v-model:value="planForm.taskType" button-style="solid" @change="taskTypeChange">
+ <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
- }}
+ type.label
+ }}
</a-radio-button>
</a-radio-group>
@@ -94,131 +95,132 @@
<!-- 单次定时- -->
<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="请选择日期"
- />
+ :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}">
+ label="执行日期" name="repeatExecuteTimeArr" :labelCol="{ span: 23 }">
<a-range-picker v-model:value="planForm.repeatExecuteTimeArr" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD"
- :placeholder="['开始日期','结束日期']"/>
+ :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-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/>
+ <PlusCircleOutlined />
</template>
</a-button>
<a-button @click="deleteTime(item)" type="default" shape="circle" :size="btnSize">
<template #icon>
- <MinusCircleOutlined/>
+ <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"/>
+ <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-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/>
+ <PlusCircleOutlined />
</template>
</a-button>
<a-button @click="deleteTime(item)" type="default" shape="circle" :size="btnSize">
<template #icon>
- <MinusCircleOutlined/>
+ <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 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>
<!--重复频率-->
<a-form-item v-if="planForm.taskType === TaskType.RepeatTimed || planForm.taskType === TaskType.Continuous"
- label="重复频率" name="frequencyValue" :labelCol="{span: 23}">
+ 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-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>
+ :options="FrequencyTypeOptions"></a-select>
</div>
</a-form-item>
<!--重复规则-->
<a-form-item v-if="planForm.taskType === TaskType.RepeatTimed || planForm.taskType === TaskType.Continuous"
- label="重复规则" name="repeatRuleType" :labelCol="{span: 23}">
+ 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>
+ @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)">
+ <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">
+ <div v-if="planForm.repeatRuleType === RepeatRuleType.week">
<a-select v-model:value="planForm.repeatRuleValueWeek[0]" style="width: 200px"
- :options="WhichWeekOptions"></a-select>
+ :options="WhichWeekOptions"></a-select>
<a-select v-model:value="planForm.repeatRuleValueWeek[1]" style="width: 200px"
- :options="WhichDayOptions"></a-select>
+ :options="WhichDayOptions"></a-select>
</div>
</a-form-item>
<!-- 相对机场返航高度 -->
- <a-form-item label="相对机场返航高度（ALT）" :labelCol="{span: 23}" name="rthAltitude">
+ <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-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-input class="alt-input" v-model:value="planForm.rthAltitude" :min="20" :max="1500" required/>
+ <a-input class="alt-input" v-model:value="planForm.rthAltitude" :min="20" :max="1500" required />
- <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>
+ <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>
</a-form-item>
<!-- Lost Action -->
- <a-form-item label="航线飞行中失联" :labelCol="{span: 23}" name="outOfControl">
+ <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 in OutOfControlActionOptions" :value="action.value" :key="action.value">
+ <a-radio-button v-for="(action, acIndex) in OutOfControlActionOptions " :value="action.value"
+ :key="action.value" :style="{ marginRight: ( acIndex === 0 ? '10px' : '0px' ) }">
{{ action.label }}
</a-radio-button>
</a-radio-group>
@@ -226,14 +228,14 @@
</a-form-item>
<!--完成动作-->
- <a-form-item label="完成动作" :labelCol="{span: 23}" name="finishAction">
+ <a-form-item label="完成动作" :labelCol="{ span: 23 }" name="finishAction">
<a-select disabled v-model:value="planForm.finishAction" style="width: 200px"
- :options="FinishActionOptions"></a-select>
+ :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 label="自动断点续飞" :labelCol="{ span: 20 }" name="breakContinue">
+ <a-switch v-model:checked="planForm.breakContinue" :checkedValue="1" :unCheckedValue="2" />
</a-form-item>
<!--提交，取消按钮-->
@@ -249,13 +251,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: 370px; 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>
@@ -416,7 +418,7 @@
// 构建表单
function buildForm () {
- const form :any = {}
+ const form: any = {}
// 公共字段
form.name = planForm.name
@@ -564,8 +566,13 @@
margin: 10px;
}
- form label, input, .ant-input, .ant-calendar-range-picker-separator,
- .ant-input:hover, .ant-time-picker .anticon, .ant-calendar-picker .anticon {
+ form label,
+ input,
+ .ant-input,
+ .ant-calendar-range-picker-separator,
+ .ant-input:hover,
+ .ant-time-picker .anticon,
+ .ant-calendar-picker .anticon {
background-color: #232323;
color: #fff;
}
@@ -581,10 +588,17 @@
color: #fff;
width: 23%;
text-align: center;
+ padding: 0;
&.ant-radio-button-wrapper-checked {
background-color: #1890ff;
}
+ }
+
+ .group_radio {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
}
}
}
@@ -645,27 +659,30 @@
}
}
-.form-alt{
+.form-alt {
display: flex;
align-items: center;
- .alt-btn{
- margin: 0 2px 0 2px ;
+ .alt-btn {
+ margin: 0 2px 0 2px;
width: 45px;
+ padding: 0 4px;
}
- .alt-input{
+ .alt-input {
width: 50px;
+ padding: 0;
+ text-align: center;
}
}
-.btn-selected{
+.btn-selected {
background: #2d8cf0 !important;
- color:white !important;
+ color: white !important;
}
.btn-unselected {
background: #3c3c3c !important;
- color:white !important;
+ color: white !important;
}
</style>
--
Gitblit v1.9.3