<!-- 机巢列表详情 -->
|
<template>
|
<el-dialog
|
modal-class="add-task"
|
v-model="isShowAddTask"
|
title="新建任务"
|
:width="pxToRem(1500)"
|
:close-on-click-modal="false"
|
:destroy-on-close="true">
|
<!-- <el-divider content-position="left">新建任务</el-divider> -->
|
<div class="task-contain">
|
<div class="left">
|
<div class="search">
|
<div class="item">任务名称：<el-input v-model="searchForm.name" placeholder="请输入任务名称"></el-input></div>
|
<div class="item"><span style="color: red;">*</span>任务日期：
|
<el-date-picker
|
v-model="searchForm.begin_time"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD"
|
/>
|
</div>
|
<div class="item">任务时间：
|
<!-- <el-time-picker
|
v-model="searchForm.execute_time_arr"
|
placeholder="选择时间"
|
format="HH:mm"
|
value-format="HH:mm"/> -->
|
</div>
|
<div class="item">选择航线：
|
<el-select
|
v-model="searchForm.file_id"
|
@change="getWayLineFile"
|
placeholder="请选择航线"
|
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>
|
</div>
|
<div class="lines">
|
<div class="wayline-type">
|
<el-radio-group v-model="searchForm.wayline_type">
|
<el-radio label="1">单点航线</el-radio>
|
<el-radio label="2">智能规划选区</el-radio>
|
</el-radio-group>
|
</div>
|
<TaskMap class="wayline-map" :wayLineFile="wayLineFile"/>
|
</div>
|
</div>
|
<div class="right">
|
<TaskTable :waylineId="waylineId" :waylineType="waylineType" @update:selected="handleSelected" />
|
<div class="btn">
|
<el-button type="primary" @click="cancel">取消</el-button>
|
<el-button type="primary" @click="submitClick">发布</el-button>
|
</div>
|
</div>
|
</div>
|
</el-dialog>
|
</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';
|
|
const rangDate = ref([]);
|
// 航线ID
|
let waylineId = ref('');
|
// 航线文件
|
let wayLineFile = ref('');
|
// 航线类型
|
let waylineType = ref(0);
|
|
const searchForm = reactive({
|
name: '',
|
ai_types: [],
|
file_id: '',
|
begin_time: '',
|
end_time: '',
|
execute_time_arr: '',
|
remark: '',
|
type: waylineType.value,
|
dock_sns: [],
|
});
|
const isShowAddTask = defineModel('show');
|
|
// 获取航线列表数据
|
const routeOptions = ref([]);
|
const getRouteList = async () => {
|
const res = await getWaylineList();
|
if (res.data.code === 0) {
|
routeOptions.value = res.data.data;
|
}
|
};
|
const algorithmChange = (val) => {
|
searchForm.ai_types = val;
|
};
|
|
// 获取航线文件
|
const getWayLineFile = async (val) => {
|
waylineId.value = val;
|
const currentRoute = routeOptions.value.find(item => item.wayline_id === val);
|
wayLineFile.value = currentRoute.object_key;
|
};
|
// 获取选中机场列表数据,并且发布
|
const handleSelected = (val) => {
|
searchForm.dock_sns = val.map(item => item.device_sn);
|
};
|
const emit = defineEmits(['refresh']);
|
// 提交
|
const submitClick = () => {
|
if (!searchForm.begin_time) {
|
ElMessage({
|
message: '请选择任务日期',
|
type: 'warning'
|
});
|
return;
|
}
|
searchForm.end_time = `${searchForm.begin_time} 23:59:59`;
|
searchForm.begin_time = `${searchForm.begin_time} 00:00:00`;
|
|
createTask(searchForm).then((res) => {
|
if (res.data.code === 0) {
|
ElMessage.success('任务创建成功');
|
// 关闭当前窗口，刷新任务管理列表
|
isShowAddTask.value = false;
|
emit('refresh');
|
}
|
});
|
};
|
const cancel = () => {
|
isShowAddTask.value = false;
|
// 清除搜索数据
|
searchForm.name = '';
|
searchForm.ai_types = [];
|
searchForm.file_id = '';
|
searchForm.begin_time = '';
|
searchForm.end_time = '';
|
searchForm.execute_time_arr = '';
|
searchForm.remark = '';
|
searchForm.dock_sns = [];
|
rangDate.value = [];
|
waylineId.value = '';
|
wayLineFile.value = '';
|
};
|
onMounted(() => {
|
getRouteList();
|
})
|
</script>
|
|
<style lang="scss">
|
.add-task{
|
.el-pagination {
|
text-align: left;
|
padding: 20px;
|
}
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
.task-contain {
|
display: flex;
|
.left {
|
width: 70%;
|
.search {
|
display: grid;
|
grid-template-columns: repeat(3, 1fr);
|
grid-template-rows: repeat(2, 1fr);
|
gap: 30px; // 增加间距使布局更合理
|
margin-bottom: 8px; // 添加底部间距
|
.item {
|
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; // 调整日期选择器宽度
|
}
|
}
|
}
|
}
|
.right {
|
width: 30%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
|
.btn {
|
margin-top: 20px;
|
text-align: center;
|
|
.el-button {
|
margin: 0 10px;
|
}
|
}
|
}
|
}
|
</style>
|
