<!-- 机巢列表详情 -->
|
<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"><span class="required">*</span>任务名称：<el-input v-model="searchForm.name" placeholder="请输入任务名称"></el-input></div>
|
<div class="item"><span class="required">*</span>任务日期：
|
<el-date-picker
|
v-model="taskData"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD"
|
:disabled-date="disabledDate"
|
/>
|
</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="waylineType" @change="radioChange">
|
<el-radio :value="1" label="单点航线"></el-radio>
|
<el-radio :value="2" label="智能规划选区"></el-radio>
|
</el-radio-group>
|
</div>
|
<TaskMap class="wayline-map"
|
:wayLineFile="wayLineFile"
|
:checkedTableData="checkedTableData"
|
:waylineTypeTest="waylineType"
|
@clickPosition="clickSignPosition"
|
@saveWayline="savePlanerWayline"
|
/>
|
</div>
|
</div>
|
<div class="right">
|
<TaskTable ref="taskTableRef"
|
:waylineId="waylineId"
|
:waylineType="waylineType"
|
:singlePoint="singlePoint"
|
:planarPoints="planarPoints"
|
@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 emit = defineEmits(['refresh']);
|
|
const rangDate = ref([]);
|
// 航线ID
|
const waylineId = ref('');
|
// 航线文件
|
const wayLineFile = ref('');
|
// 航线类型
|
const waylineType = ref(3);
|
// 添加子组件引用
|
const taskTableRef = ref(null);
|
const taskData = ref('');
|
const searchForm = reactive({
|
name: '',
|
ai_types: [],
|
file_id: '',
|
begin_time: '',
|
end_time: '',
|
execute_time_arr: '',
|
remark: '',
|
type: waylineType.value,
|
dock_sns: [],
|
longitude: '',
|
latitude: '',
|
polygon: [],
|
});
|
const isShowAddTask = defineModel('show');
|
|
// 禁用当天之前的日期
|
const disabledDate = (time) => {
|
return time.getTime() < Date.now() - 8.64e7; // 86400000 = 24 * 60 * 60 * 1000
|
};
|
|
// 获取航线列表数据
|
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 radioChange = (val) => {
|
// 清空选中航线值
|
searchForm.file_id = '';
|
// 航线ID也清空
|
waylineId.value = '';
|
wayLineFile.value = '';
|
waylineType.value = val;
|
searchForm.type = val;
|
// 清空列表数据
|
nextTick(() => {
|
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;
|
};
|
|
// 获取选中机场列表数据,并且发布
|
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 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;
|
}
|
if (!searchForm.name) {
|
ElMessage({
|
message: '请输入任务名称',
|
type: 'warning'
|
});
|
return;
|
}
|
// 检查任务时间
|
if (searchForm.execute_time_arr) {
|
const now = new Date();
|
const today = now.toDateString();
|
const selectedDate = new Date(taskData.value).toDateString();
|
|
if (today === selectedDate) {
|
const [hours, minutes] = searchForm.execute_time_arr.split(':');
|
const selectedTime = new Date();
|
selectedTime.setHours(parseInt(hours), parseInt(minutes));
|
|
if (selectedTime < now) {
|
ElMessage({
|
message: '任务时间不能小于当前时间',
|
type: 'warning'
|
});
|
return;
|
}
|
}
|
}
|
searchForm.begin_time = `${taskData.value} 00:00:00`;
|
searchForm.end_time = `${taskData.value} 23:59:59`;
|
|
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 = '';
|
taskData.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: 68%;
|
.search {
|
display: grid;
|
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;
|
}
|
}
|
}
|
}
|
.right {
|
width: 32%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
|
.btn {
|
margin-top: 20px;
|
text-align: center;
|
|
.el-button {
|
margin: 0 10px;
|
}
|
}
|
}
|
}
|
</style>
|
