<!-- 新建任务 -->
|
<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"
|
@close="cancel"
|
>
|
<!-- <el-divider content-position="left">新建任务</el-divider> -->
|
<div class="task-contain">
|
<div class="left">
|
<div class="search">
|
<div class="item">
|
<el-input class="ztzf-input" v-model="searchForm.name" placeholder="请输入任务/机巢名称"></el-input>
|
</div>
|
<div class="item">
|
<el-date-picker
|
popper-class="custom-date-picker"
|
class="ztzf-date-picker"
|
v-model="taskData"
|
type="daterange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
value-format="YYYY-MM-DD"
|
/>
|
</div>
|
<div class="item">
|
<div class="itemchild">任务时间：</div>
|
<el-time-picker
|
popper-class="custom-time-picker"
|
class="ztzf-date-picker tasktimer"
|
v-model="timeSlot"
|
placeholder="请选择"
|
format="HH:mm"
|
value-format="HH:mm"
|
/>
|
</div>
|
<div class="item">
|
<div class="itemchild">选择航线：</div>
|
|
<el-select
|
:teleported="false"
|
class="ztzf-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">
|
<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">
|
<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">
|
<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>
|
</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 timeSlot = 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 (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
|
}
|
|
searchForm.begin_time = `${taskData.value[0]} 00:00:00`
|
searchForm.end_time = `${taskData.value[1]} 23:59:59`
|
searchForm.execute_time_arr = timeSlot.value ? [timeSlot.value] : []
|
createTask(searchForm).then(res => {
|
if (res.data.code === 0) {
|
ElMessage.success('任务创建成功')
|
// 关闭当前窗口，刷新任务管理列表
|
isShowAddTask.value = false
|
// 清除数据
|
cancel()
|
emit('refresh')
|
}
|
})
|
}
|
const cancel = () => {
|
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 = ''
|
}
|
|
onMounted(() => {
|
getRouteList()
|
})
|
</script>
|
|
<style lang="scss">
|
.add-task {
|
.el-pagination {
|
text-align: left;
|
padding: 20px;
|
}
|
}
|
/* 修改日期单元格背景色 */
|
.custom-date-picker .el-picker-panel__body {
|
background: #012350 !important;
|
color: #fff !important;
|
}
|
|
</style>
|
|
<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; // 添加底部间距
|
.item {
|
position: relative;
|
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 {
|
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>
|
