From bb94b81805f2e111efdfb118bc6585dbbfeb9c77 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Wed, 16 Apr 2025 11:11:43 +0800
Subject: [PATCH] feat: 新建任务ui调整
---
src/views/TaskManage/TaskIntermediateContent/AddTask.vue | 413 ++++++++++++++++++++++++++++++++--------------------------
1 files changed, 229 insertions(+), 184 deletions(-)
diff --git a/src/views/TaskManage/TaskIntermediateContent/AddTask.vue b/src/views/TaskManage/TaskIntermediateContent/AddTask.vue
index 6846ab1..5fc9f15 100644
--- a/src/views/TaskManage/TaskIntermediateContent/AddTask.vue
+++ b/src/views/TaskManage/TaskIntermediateContent/AddTask.vue
@@ -1,49 +1,71 @@
-<!-- 机巢列表详情 -->
+<!-- 新建任务 -->
<template>
<el-dialog
+ class="ztzf-dialog"
modal-class="add-task"
v-model="isShowAddTask"
title="新建任务"
:width="pxToRem(1500)"
:close-on-click-modal="false"
- :destroy-on-close="true">
+ :destroy-on-close="true"
+ >
<!-- <el-divider content-position="left">新建任务</el-divider> -->
<div class="task-contain">
<div class="left">
<div class="search">
- <div class="item"><span class="required">*</span>任务名称：<el-input v-model="searchForm.name" placeholder="请输入任务名称"></el-input></div>
- <div class="item"><span class="required">*</span>任务日期：
+ <div class="item">
+ <el-input class="ztzf-input" v-model="searchForm.name" placeholder="请输入任务/机巢名称"></el-input>
+ </div>
+ <div class="item">
<el-date-picker
+ class="ztzf-date-picker"
v-model="taskData"
- format="YYYY-MM-DD"
+ type="daterange"
+ range-separator="至"
+ start-placeholder="开始日期"
+ end-placeholder="结束日期"
value-format="YYYY-MM-DD"
- :disabled-date="disabledDate"
+ @change="changeselect"
/>
</div>
- <div class="item">任务时间：
+ <div class="item">
+ <div class="itemchild">任务时间：</div>
<el-time-picker
+ class="ztzf-date-picker tasktimer"
v-model="timeSlot"
- placeholder="选择时间"
+ placeholder="请选择"
format="HH:mm"
- value-format="HH:mm"/>
+ value-format="HH:mm"
+ />
</div>
- <div class="item">选择航线：
+ <div class="item">
+ <div class="itemchild">选择航线：</div>
+
<el-select
+ class="ztzf-select"
v-model="searchForm.file_id"
@change="getWayLineFile"
placeholder="请选择航线"
- clearable>
+ clearable
+ >
<el-option
v-for="item in routeOptions"
:key="item.wayline_id"
:label="item.name"
- :value="item.wayline_id"/>
- </el-select>
- </div>
- <div class="item">关联算法：
- <TaskAlgorithmBusiness :showAlgorithm="true" @algorithmChange="algorithmChange"/>
- </div>
- <div class="item">任务描述：<el-input v-model="searchForm.remark" placeholder="请输入任务名称"></el-input></div>
+ :value="item.wayline_id"
+ />
+ </el-select>
+ </div>
+ <div class="item">
+
+ <div class="itemchild">关联算法：</div>
+ <TaskAlgorithmBusiness :setWidth="200" :showAlgorithm="true" @algorithmChange="algorithmChange" />
+ </div>
+ <div class="item">
+
+ <div class="itemchild">任务描述：</div>
+ <el-input class="ztzf-input" v-model="searchForm.remark" placeholder="请输入任务名称"></el-input>
+ </div>
</div>
<div class="lines">
<div class="wayline-type">
@@ -52,26 +74,29 @@
<el-radio :value="2" label="智能规划选区"></el-radio>
</el-radio-group>
</div>
- <TaskMap class="wayline-map"
+ <TaskMap
+ class="wayline-map"
:wayLineFile="wayLineFile"
:checkedTableData="checkedTableData"
- :waylineTypeTest="waylineType"
+ :waylineTypeTest="waylineType"
@clickPosition="clickSignPosition"
@saveWayline="savePlanerWayline"
/>
</div>
</div>
- <div class="right">
- <TaskTable ref="taskTableRef"
- :waylineId="waylineId"
- :waylineType="waylineType"
+ <div class="right ">
+ <TaskTable
+ ref="taskTableRef"
+ :waylineId="waylineId"
+ :waylineType="waylineType"
:singlePoint="singlePoint"
:planarPoints="planarPoints"
- @update:selected="handleSelected"
+ @update:selected="handleSelected"
/>
<div class="btn">
- <el-button type="primary" @click="cancel">取消</el-button>
- <el-button type="primary" @click="submitClick">发布</el-button>
+ <img @click="cancel" style="margin-right:23px" src="@/assets/images/task/cancel.png" alt="">
+ <img @click="submitClick" src="@/assets/images/task/publish.png" alt="">
+
</div>
</div>
</div>
@@ -79,26 +104,26 @@
</template>
<script setup>
-import { ElMessage } from 'element-plus';
-import { pxToRem } from '@/utils/rem';
-import { getWaylineList, createTask } from '@/api/home/task';
-import TaskAlgorithmBusiness from '../components/TaskAlgorithmBusiness.vue';
-import TaskMap from './TaskMap.vue';
-import TaskTable from './TaskTable.vue';
+import { ElMessage } from 'element-plus'
+import { pxToRem } from '@/utils/rem'
+import { getWaylineList, createTask } from '@/api/home/task'
+import TaskAlgorithmBusiness from '../components/TaskAlgorithmBusiness.vue'
+import TaskMap from './TaskMap.vue'
+import TaskTable from './TaskTable.vue'
-const emit = defineEmits(['refresh']);
+const emit = defineEmits(['refresh'])
-const rangDate = ref([]);
+const rangDate = ref([])
// 航线ID
-const waylineId = ref('');
+const waylineId = ref('')
// 航线文件
-const wayLineFile = ref('');
+const wayLineFile = ref('')
// 航线类型
-const waylineType = ref(3);
+const waylineType = ref(3)
// 添加子组件引用
-const taskTableRef = ref(null);
-const taskData = ref('');
-const timeSlot = ref('');
+const taskTableRef = ref(null)
+const taskData = ref('')
+const timeSlot = ref('')
const searchForm = reactive({
name: '',
ai_types: [],
@@ -112,157 +137,157 @@
longitude: '',
latitude: '',
polygon: [],
-});
-const isShowAddTask = defineModel('show');
+})
+const isShowAddTask = defineModel('show')
// 禁用当天之前的日期
-const disabledDate = (time) => {
- return time.getTime() < Date.now() - 8.64e7; // 86400000 = 24 * 60 * 60 * 1000
-};
+const disabledDate = time => {
+ return time.getTime() < Date.now() - 8.64e7 // 86400000 = 24 * 60 * 60 * 1000
+}
// 获取航线列表数据
-const routeOptions = ref([]);
+const routeOptions = ref([])
const getRouteList = async () => {
- const res = await getWaylineList();
- if (res.data.code === 0) {
- routeOptions.value = res.data.data;
- }
-};
+ const res = await getWaylineList()
+ if (res.data.code === 0) {
+ routeOptions.value = res.data.data
+ }
+}
// 关联算法
-const algorithmChange = (val) => {
- searchForm.ai_types = val;
-};
+const algorithmChange = val => {
+ searchForm.ai_types = val
+}
// 切换航线类型
-const radioChange = (val) => {
+const radioChange = val => {
// 清空选中航线值
- searchForm.file_id = '';
+ searchForm.file_id = ''
// 航线ID也清空
- waylineId.value = '';
- wayLineFile.value = '';
- waylineType.value = val;
- searchForm.type = val;
+ waylineId.value = ''
+ wayLineFile.value = ''
+ waylineType.value = val
+ searchForm.type = val
// 清空列表数据
nextTick(() => {
- if (taskTableRef.value) {
- taskTableRef.value.clearTableData();
- }
- });
-};
+ if (taskTableRef.value) {
+ taskTableRef.value.clearTableData()
+ }
+ })
+}
// 获取航线文件
-const getWayLineFile = async (val) => {
- searchForm.type = 0;
- waylineType.value = 0;
- waylineId.value = val;
- const currentRoute = routeOptions.value.find(item => item.wayline_id === val);
- wayLineFile.value = currentRoute.object_key;
-};
+const getWayLineFile = async val => {
+ searchForm.type = 0
+ waylineType.value = 0
+ waylineId.value = val
+ const currentRoute = routeOptions.value.find(item => item.wayline_id === val)
+ wayLineFile.value = currentRoute.object_key
+}
// 获取选中机场列表数据,并且发布
-let checkedTableData = ref([]);
-const handleSelected = (val) => {
- searchForm.dock_sns = val.map(item => item.device_sn);
- checkedTableData.value = val;
-};
+let checkedTableData = ref([])
+const handleSelected = val => {
+ searchForm.dock_sns = val.map(item => item.device_sn)
+ checkedTableData.value = val
+}
// 地图点击事件 表格重新刷新数据
-let singlePoint = ref({});
-const clickSignPosition = (val) => {
- singlePoint.value = val;
- searchForm.longitude = val.longitude;
- searchForm.latitude = val.latitude;
-};
+let singlePoint = ref({})
+const clickSignPosition = val => {
+ singlePoint.value = val
+ searchForm.longitude = val.longitude
+ searchForm.latitude = val.latitude
+}
// 保存面状航线
-let planarPoints = ref([]);
-const savePlanerWayline = (val) => {
- planarPoints.value = val;
- const polygonArray = val.map(point => [point.longitude, point.latitude]);
- searchForm.polygon = polygonArray;
-};
+let planarPoints = ref([])
+const savePlanerWayline = val => {
+ planarPoints.value = val
+ const polygonArray = val.map(point => [point.longitude, point.latitude])
+ searchForm.polygon = polygonArray
+}
// 提交
const submitClick = () => {
if (!taskData.value) {
- ElMessage({
- message: '请选择任务日期',
- type: 'warning'
- });
- return;
- }
+ ElMessage({
+ message: '请选择任务日期',
+ type: 'warning',
+ })
+ return
+ }
if (!searchForm.name) {
- ElMessage({
- message: '请输入任务名称',
- type: 'warning'
- });
- return;
- }
+ ElMessage({
+ message: '请输入任务名称',
+ type: 'warning',
+ })
+ return
+ }
// 检查任务时间
- if (timeSlot.value) {
- const now = new Date();
- const today = now.toDateString();
- const selectedDate = new Date(taskData.value).toDateString();
-
- if (today === selectedDate) {
- const [hours, minutes] = timeSlot.value.split(':');
- const selectedTime = new Date();
- selectedTime.setHours(parseInt(hours), parseInt(minutes));
-
- if (selectedTime < now) {
- ElMessage({
- message: '任务时间不能小于当前时间',
- type: 'warning'
- });
- return;
- }
- }
- }
+ if (timeSlot.value) {
+ const now = new Date()
+ const today = now.toDateString()
+ const selectedDate = new Date(taskData.value).toDateString()
+
+ if (today === selectedDate) {
+ const [hours, minutes] = timeSlot.value.split(':')
+ const selectedTime = new Date()
+ selectedTime.setHours(parseInt(hours), parseInt(minutes))
+
+ if (selectedTime < now) {
+ ElMessage({
+ message: '任务时间不能小于当前时间',
+ type: 'warning',
+ })
+ return
+ }
+ }
+ }
if (searchForm.dock_sns.length === 0) {
ElMessage({
message: '请选择机场',
- type: 'warning'
- });
- return;
+ type: 'warning',
+ })
+ return
}
- searchForm.begin_time = `${taskData.value} 00:00:00`;
- searchForm.end_time = `${taskData.value} 23:59:59`;
- searchForm.execute_time_arr = timeSlot.value ? [timeSlot.value] : [];
- createTask(searchForm).then((res) => {
+ searchForm.begin_time = `${taskData.value} 00:00:00`
+ searchForm.end_time = `${taskData.value} 23:59:59`
+ searchForm.execute_time_arr = timeSlot.value ? [timeSlot.value] : []
+ createTask(searchForm).then(res => {
if (res.data.code === 0) {
- ElMessage.success('任务创建成功');
+ ElMessage.success('任务创建成功')
// 关闭当前窗口，刷新任务管理列表
- isShowAddTask.value = false;
+ isShowAddTask.value = false
// 清除数据
- cancel();
- emit('refresh');
+ cancel()
+ emit('refresh')
}
- });
-};
+ })
+}
const cancel = () => {
- isShowAddTask.value = false;
+ isShowAddTask.value = false
// 清除搜索数据
- searchForm.name = '';
- searchForm.ai_types = [];
- searchForm.file_id = '';
- searchForm.begin_time = '';
- searchForm.end_time = '';
- timeSlot.value = '';
- searchForm.remark = '';
- searchForm.dock_sns = [];
- rangDate.value = [];
- waylineId.value = '';
- wayLineFile.value = '';
- taskData.value = '';
-};
+ searchForm.name = ''
+ searchForm.ai_types = []
+ searchForm.file_id = ''
+ searchForm.begin_time = ''
+ searchForm.end_time = ''
+ timeSlot.value = ''
+ searchForm.remark = ''
+ searchForm.dock_sns = []
+ rangDate.value = []
+ waylineId.value = ''
+ wayLineFile.value = ''
+ taskData.value = ''
+}
onMounted(() => {
- getRouteList();
+ getRouteList()
})
</script>
<style lang="scss">
-.add-task{
+.add-task {
.el-pagination {
text-align: left;
padding: 20px;
@@ -273,52 +298,72 @@
<style lang="scss" scoped>
.task-contain {
display: flex;
+ padding: 20px 32px 32px 27px;
.left {
width: 68%;
+ margin-right: 35px;
.search {
display: grid;
- grid-template-columns: repeat(3, 1fr);
- grid-template-rows: repeat(2, 1fr);
- gap: 30px; // 增加间距使布局更合理
- margin-bottom: 8px; // 添加底部间距
+ grid-template-columns: repeat(3, 1fr);
+ grid-template-rows: repeat(2, 1fr);
+ gap: 30px; // 增加间距使布局更合理
+ margin-bottom: 8px; // 添加底部间距
.item {
position: relative;
- display: flex;
- align-items: center;
- :deep(.el-input),
- :deep(.el-select),
- :deep(.el-date-picker),
- :deep(.el-time-picker) {
- width: 240px;
- // margin-left: 10px;
- }
- :deep(.el-date-editor.el-input__wrapper) {
- width: 200px; // 调整日期选择器宽度
- }
- .required {
- color: #f56c6c;
- margin-left: 4px;
- position: absolute;
- left: -10px;
- top: 8px;
+ display: flex;
+ align-items: center;
+ font-size: 16px;
+ color: #ffffff;
+ .itemchild {
+ width: 68px;
+ white-space: nowrap;
+ margin-right: 5px;
}
- }
+ :deep(.el-date-editor.el-input__wrapper) {
+ width: 200px; // 调整日期选择器宽度
+ }
+
+ }
}
}
.right {
width: 32%;
display: flex;
- flex-direction: column;
- justify-content: space-between;
-
- .btn {
- margin-top: 20px;
- text-align: center;
-
- .el-button {
- margin: 0 10px;
- }
- }
+ flex-direction: column;
+ justify-content: space-between;
+
+ .btn {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ img {
+ width: 137px;
+ height: 32px;
+ cursor: pointer;
+ }
+
+ }
+ }
+ :deep(.tasktimer .el-input__wrapper) {
+ background: none !important;
+ color: #8ac3fd !important;
+
+ }
+ :deep(.el-input__inner) {
+ color: #8ac3fd !important;
+ &::placeholder {
+ color: #8ac3fd !important;
+ }
+ }
+ :deep(.el-radio__inner){
+ background: none !important;
+ border: 1px solid #1B5D9A !important;
+ }
+ :deep(.el-radio__label){
+ color: #fff !important;
+ }
+ :deep(.el-radio__inner:after ){
+ background: #65B5FF !important;
}
}
</style>
--
Gitblit v1.9.3