吉安感知网项目-前端
shuishen
2026-03-05 d75d83bd2a1f4e13634f84f8a4de1f7457187b2b
applications/task-work-order/src/views/orderView/orderManage/inspectionRequest/FormDiaLog.vue
@@ -21,7 +21,6 @@
               clearable
               filterable
               :disabled="dialogMode !== 'add'"
               @change="handleWorkOrderChange"
            >
               <el-option v-for="item in workOrderList" :key="item.id" :label="item.workOrderName" :value="item.id" />
            </el-select>
@@ -68,7 +67,11 @@
         </div>
         <!-- 子任务表格表单 -->
         <div class="task-table-section" v-if="selectedWorkOrderId">
         <div
            class="task-table-section"
            :class="{ 'disabled-section': !selectedWorkOrderId }"
            @click="handleTaskSectionClick"
         >
            <div class="detail-title" :style="{ marginTop: pxToRem(10) }">添加子任务</div>
            <div class="task-table-container">
               <el-table :data="taskList">
@@ -94,13 +97,13 @@
                        <span class="required-star">*</span>
                        巡查任务类型
                     </template>
                     <template v-slot="{ row }">
                     <template v-slot="{ row, $index }">
                        <el-select
                           class="gd-select"
                           popper-class="gd-select-popper"
                           v-model="row.patrolTaskType"
                           placeholder="请选择"
                           disabled
                           @change="handlePatrolTaskTypeChange($index, $event)"
                        >
                           <el-option
                              v-for="item in dictObj.workOrderType"
@@ -117,9 +120,10 @@
                        任务执行时间
                     </template>
                     <template v-slot="{ row }">
                        <!--                        gd-date-picker-popper-->
                        <el-date-picker
                           class="gd-date-picker"
                           popper-class="gd-date-picker-popper"
                           popper-class=""
                           v-model="row.executeTime"
                           type="datetime"
                           placeholder="请选择"
@@ -140,6 +144,8 @@
                           v-model="row.patrolRouteUrl"
                           placeholder="请选择"
                           :disabled="dialogReadonly"
                           :loading="routeLoading"
                           no-data-text="暂无航线"
                        >
                           <el-option v-for="item in routeOptions" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
@@ -152,6 +158,7 @@
                     </template>
                     <template v-slot="{ row, $index }">
                        <el-select
                           no-data-text="暂无推荐飞手"
                           class="gd-select"
                           popper-class="gd-select-popper"
                           v-model="row.recommendFlyerName"
@@ -229,7 +236,7 @@
import { computed, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, Delete } from '@element-plus/icons-vue'
import { getDictLabel } from '@ztzf/utils'
import { geomAnalysis, getDictLabel } from '@ztzf/utils'
import { gdPatrolTaskSaveApi, gdFlyerPageApi, gdPatrolTaskAuditApi } from './inspectionRequestApi'
import { gdWorkOrderPageApi } from '../orderManage/orderManageApi'
import { gdManageDeviceListApi } from '../orderManage/gdManageDeviceApi'
@@ -262,15 +269,18 @@
// 下拉选项
const flyerListMap = ref({}) // 飞手列表,按行索引存储
const deviceList = ref([]) // 设备列表
const routeOptions = inject('routeOptions')
const routeOptions = ref([]) // 航线选项(根据工单范围获取)
const routeLoading = ref(false) // 航线加载中
// 子任务列表
const taskList = ref([initTaskRow(), initTaskRow(), initTaskRow(), initTaskRow(), initTaskRow()])
const taskList = ref([initTaskRow()])
// 处理工单选择变化
function handleWorkOrderChange(val) {
   if (val) {
      selectedWorkOrder.value = workOrderList.value.find(item => item.id === val)
      // 根据工单范围获取航线列表
      getAirListByGeom()
      // 将工单类型赋值给所有子任务行
      const workOrderType = selectedWorkOrder.value?.workOrderType
      if (workOrderType) {
@@ -282,7 +292,22 @@
      }
   } else {
      selectedWorkOrder.value = null
      routeOptions.value = []
   }
}
// 根据工单geom范围获取航线列表
function getAirListByGeom() {
   const geom = selectedWorkOrder.value?.geom
   if (!geom) return
   const coordinates = geomAnalysis(geom)
   if (!coordinates || !coordinates.length) return
   routeLoading.value = true
   airlineListApi(coordinates).then(res => {
      routeOptions.value = res.data.data || []
   }).finally(() => {
      routeLoading.value = false
   })
}
// 添加任务行
@@ -318,18 +343,47 @@
   }
}
// 处理任务区域点击事件(未选择工单时提示)
function handleTaskSectionClick() {
   if (!selectedWorkOrderId.value) {
      ElMessage.warning('请先选择工单')
   }
}
// 获取工单列表
async function getWorkOrderList() {
   const res = await gdWorkOrderPageApi({ size: 999, workOrderStatus: dialogMode.value === 'add' ? '20' : '' })
   workOrderList.value = res?.data?.data?.records ?? []
}
// 处理巡查任务类型变化
async function handlePatrolTaskTypeChange(index, skilledTaskType) {
   // 清空该行已选择的飞手
   taskList.value[index].recommendFlyerName = ''
   // 获取对应的飞手列表
   await getFlyerList(index, skilledTaskType)
}
import * as turf from '@turf/turf'
function getPolygonCenter(rawData) {
   const coordinates = [rawData.map(p => [p.longitude, p.latitude])];
   const polygon = turf.polygon(coordinates);
   const center = turf.centroid(polygon);
   const [centerLon, centerLat] = center.geometry.coordinates;
   return {longitude: centerLon, latitude: centerLat};
}
// 获取飞手列表
async function getFlyerList(index, skilledTaskType) {
   const obj = getPolygonCenter(geomAnalysis(selectedWorkOrder.value.geom))
   const res = await gdFlyerPageApi({
      size: 999,
      current: 1,
      skilledTaskType,
      longitude: obj.longitude || '',
      latitude: obj.latitude || '',
   })
   flyerListMap.value[index] = res?.data?.data?.records ?? []
}
@@ -456,8 +510,22 @@
   color: #f56c6c;
   margin-right: 4px;
}
:deep(.el-table__header th) {
   font-weight: normal !important;
}
.grayText {
   color: #9f9f9f !important;
}
// 禁用区域样式 - 使用 pointer-events: none 禁用所有子元素的点击
.disabled-section {
   .task-table-container {
      * {
         pointer-events: none;
      }
   }
   opacity: 0.6;
   cursor: not-allowed;
}
</style>