forked from drone/command-center-dashboard
src/views/TaskManage/TaskIntermediateContent/AddTask.vue
@@ -11,20 +11,21 @@ <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>任务日期： <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="searchForm.begin_time" v-model="taskData" format="YYYY-MM-DD" value-format="YYYY-MM-DD" :disabled-date="disabledDate" /> </div> <div class="item">任务时间： <!-- <el-time-picker <el-time-picker v-model="searchForm.execute_time_arr" placeholder="选择时间" format="HH:mm" value-format="HH:mm"/> --> value-format="HH:mm"/> </div> <div class="item">选择航线： <el-select @@ -46,16 +47,28 @@ </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 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"/> <TaskMap class="wayline-map" :wayLineFile="wayLineFile" :checkedTableData="checkedTableData" :waylineTypeTest="waylineType" @clickPosition="clickSignPosition" @saveWayline="savePlanerWayline" /> </div> </div> <div class="right"> <TaskTable :waylineId="waylineId" :waylineType="waylineType" @update:selected="handleSelected" /> <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> @@ -73,14 +86,18 @@ import TaskMap from './TaskMap.vue'; import TaskTable from './TaskTable.vue'; const emit = defineEmits(['refresh']); const rangDate = ref([]); // 航线ID let waylineId = ref(''); const waylineId = ref(''); // 航线文件 let wayLineFile = ref(''); const wayLineFile = ref(''); // 航线类型 let waylineType = ref(0); const waylineType = ref(3); // 添加子组件引用 const taskTableRef = ref(null); const taskData = ref(''); const searchForm = reactive({ name: '', ai_types: [], @@ -91,8 +108,16 @@ 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([]); @@ -102,32 +127,98 @@ 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; }; const emit = defineEmits(['refresh']); // 地图点击事件 表格重新刷新数据 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 (!searchForm.begin_time) { if (!taskData.value) { ElMessage({ message: '请选择任务日期', type: 'warning' }); return; } searchForm.end_time = `${searchForm.begin_time} 23:59:59`; searchForm.begin_time = `${searchForm.begin_time} 00:00:00`; 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) { @@ -152,7 +243,9 @@ rangDate.value = []; waylineId.value = ''; wayLineFile.value = ''; taskData.value = ''; }; onMounted(() => { getRouteList(); }) @@ -171,7 +264,7 @@ .task-contain { display: flex; .left { width: 70%; width: 68%; .search { display: grid; grid-template-columns: repeat(3, 1fr); @@ -179,6 +272,7 @@ gap: 30px; // 增加间距使布局更合理 margin-bottom: 8px; // 添加底部间距 .item { position: relative; display: flex; align-items: center; :deep(.el-input), @@ -191,11 +285,18 @@ :deep(.el-date-editor.el-input__wrapper) { width: 200px; // 调整日期选择器宽度 } .required { color: #f56c6c; margin-left: 4px; position: absolute; left: -10px; top: 8px; } } } } .right { width: 30%; width: 32%; display: flex; flex-direction: column; justify-content: space-between;
