feat: 新建航线

chenyao

2025-04-09 bdb66cf55723eab8ce633a2babea25d315cab0d5

 src/views/TaskManage/TaskIntermediateContent/AddTask.vue

@@ -11,10 +11,10 @@
      <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"
                  />
@@ -46,16 +46,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 +85,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,6 +107,9 @@
   remark: '',
   type: waylineType.value,
   dock_sns: [],
   longitude: '',
   latitude: '',
   polygon: [],
});
const isShowAddTask = defineModel('show');

@@ -102,32 +121,78 @@
    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;
  }
   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) {
@@ -153,6 +218,7 @@
  waylineId.value = '';
  wayLineFile.value = '';
};

onMounted(() => {
  getRouteList();
})
@@ -171,7 +237,7 @@
.task-contain {
   display: flex;
   .left {
      width: 70%;
      width: 68%;
      .search {
         display: grid;
      grid-template-columns: repeat(3, 1fr);
@@ -179,6 +245,7 @@
      gap: 30px; // 增加间距使布局更合理
      margin-bottom: 8px; // 添加底部间距
         .item {
            position: relative;
        display: flex;
        align-items: center;
        :deep(.el-input),
@@ -191,11 +258,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;