From 1d552a3bad95caae4af15322df28e6240b797693 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Thu, 13 Aug 2026 15:32:06 +0800
Subject: [PATCH] feat: app视频封面图
---
applications/task-work-order/src/views/orderView/orderManage/inspectionRequest/FormDiaLog.vue | 216 ++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 171 insertions(+), 45 deletions(-)
diff --git a/applications/task-work-order/src/views/orderView/orderManage/inspectionRequest/FormDiaLog.vue b/applications/task-work-order/src/views/orderView/orderManage/inspectionRequest/FormDiaLog.vue
index 16cb40e..286905d 100644
--- a/applications/task-work-order/src/views/orderView/orderManage/inspectionRequest/FormDiaLog.vue
+++ b/applications/task-work-order/src/views/orderView/orderManage/inspectionRequest/FormDiaLog.vue
@@ -5,10 +5,10 @@
:title="titleEnum[dialogMode]"
@closed="visible = false"
destroy-on-close
- width="75%"
+ width="90%"
:close-on-click-modal="false"
>
- <div class="gd-dialog-form">
+ <div>
<!-- 关联工单选择 -->
<div class="work-order-section">
<div class="detail-title" :style="{ marginBottom: 0, marginRight: pxToRem(10) }">选择工单</div>
@@ -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>
@@ -34,7 +33,7 @@
<div class="info-item">
<span class="label">工单类型</span>
<span class="val" v-if="selectedWorkOrder">
- {{ getDictLabel(selectedWorkOrder.workOrderType, dictObj.workOrderType) }}
+ {{ getTaskTypeLabel(selectedWorkOrder.workOrderType, workOrderTypeXT) }}
</span>
<span class="val grayText" v-else>选择工单后自动带出</span>
</div>
@@ -68,14 +67,18 @@
</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">
<el-table-column width="50" label="">
<template v-slot="{ $index }">{{ $index + 1 }}</template>
</el-table-column>
- <el-table-column prop="patrolTaskName" min-width="120">
+ <el-table-column prop="patrolTaskName" min-width="100">
<template #header>
<span class="required-star">*</span>
巡查任务名称
@@ -89,36 +92,33 @@
/>
</template>
</el-table-column>
- <el-table-column prop="patrolTaskType" min-width="140">
+ <el-table-column prop="patrolTaskType" min-width="120">
<template #header>
<span class="required-star">*</span>
巡查任务类型
</template>
<template v-slot="{ row, $index }">
- <el-select
+ <el-cascader
class="gd-select"
popper-class="gd-select-popper"
v-model="row.patrolTaskType"
+ :options="workOrderTypeXT"
+ :props="{...taskTypeCascaderProps,multiple:true}"
placeholder="请选择"
+ collapse-tags
@change="handlePatrolTaskTypeChange($index, $event)"
- >
- <el-option
- v-for="item in dictObj.workOrderType"
- :key="item.dictKey"
- :label="item.dictValue"
- :value="item.dictKey"
- />
- </el-select>
+ />
</template>
</el-table-column>
- <el-table-column prop="executeTime" min-width="180">
+ <el-table-column prop="executeTime" width="200">
<template #header>
<span class="required-star">*</span>
任务执行时间
</template>
<template v-slot="{ row }">
-<!-- gd-date-picker-popper-->
+ <!-- gd-date-picker-popper-->
<el-date-picker
+ :style="{width: pxToRem(165)}"
class="gd-date-picker"
popper-class=""
v-model="row.executeTime"
@@ -129,7 +129,7 @@
/>
</template>
</el-table-column>
- <el-table-column prop="patrolRouteUrl" min-width="120">
+ <el-table-column prop="patrolRouteUrl" min-width="100">
<template #header>
<span class="required-star">*</span>
巡查任务航线
@@ -141,12 +141,14 @@
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>
</template>
</el-table-column>
- <el-table-column prop="recommendFlyerName" min-width="120">
+ <el-table-column prop="deviceFlyerId" min-width="100">
<template #header>
<span class="required-star">*</span>
推荐飞手
@@ -156,21 +158,27 @@
no-data-text="暂无推荐飞手"
class="gd-select"
popper-class="gd-select-popper"
- v-model="row.recommendFlyerName"
+ v-model="row.deviceFlyerId"
placeholder="请选择"
filterable
:disabled="dialogReadonly || !taskList[$index].patrolTaskType"
>
<el-option
v-for="item in flyerListMap[$index] || []"
- :key="item.id"
+ :key="item.flyerId"
:label="item.flyerName"
- :value="item.flyerName"
- />
- </el-select>
+ :value="item.flyerId"
+ >
+ <template #default>
+ <!-- 匹配区域=1 显示红星号 -->
+ <span v-if="item.taskTypeMatchFlag === 1" style="color: #f56c6c; margin-right: 4px;">*</span>
+ <span>{{ item.flyerName }}</span>
+ </template>
+ </el-option>
+ </el-select>
</template>
</el-table-column>
- <el-table-column prop="deviceId" min-width="120">
+ <el-table-column prop="deviceId" min-width="100">
<template #header>
<span class="required-star">*</span>
选择设备
@@ -188,7 +196,31 @@
</el-select>
</template>
</el-table-column>
- <el-table-column prop="taskDesc" label="巡查任务描述" min-width="120">
+ <el-table-column prop="algorithmIds" min-width="160">
+ <template #header>
+ 算法
+ </template>
+ <template v-slot="{ row }">
+ <el-tree-select
+ class="gd-select"
+ popper-class="gd-tree-select-popper"
+ v-model="row.algorithmIds"
+ :data="algorithmTreeData"
+ :props="{ label: 'name', children: 'children', value: 'id' }"
+ node-key="id"
+ multiple
+ collapse-tags
+ collapse-tags-tooltip
+ check-strictly
+ filterable
+ placeholder="请选择"
+ :disabled="dialogReadonly"
+ />
+ </template>
+ </el-table-column>
+
+
+ <el-table-column prop="taskDesc" label="巡查任务描述">
<template v-slot="{ row }">
<el-input class="gd-input" v-model="row.taskDesc" placeholder="请输入" :disabled="dialogReadonly" />
</template>
@@ -228,24 +260,30 @@
</template>
<script setup>
-import { computed, ref, onMounted } from 'vue'
+import { computed, ref, onMounted, inject } 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'
import { pxToRem } from '@/utils/rem'
-import { airlineListApi } from '@/api/zkxt'
+import { airlineListApi, algorithmGroupedApi } from '@/api/zkxt'
+import {
+ getTaskTypeLabel,
+ taskTypeCascaderProps,
+} from '../taskTypeOptions'
// 初始化任务行
const initTaskRow = () => ({
patrolTaskName: '',
- patrolTaskType: '',
+ patrolTaskType: [],
executeTime: '',
patrolRouteUrl: '',
- recommendFlyerName: '',
+ deviceFlyerId: '',
deviceId: null,
+ algorithmIds: [],
taskDesc: '',
})
const dictObj = inject('dictObj')
@@ -264,27 +302,69 @@
// 下拉选项
const flyerListMap = ref({}) // 飞手列表，按行索引存储
const deviceList = ref([]) // 设备列表
-const routeOptions = inject('routeOptions')
+const routeOptions = ref([]) // 航线选项（根据工单范围获取）
+const routeLoading = ref(false) // 航线加载中
+const algorithmTreeData = ref([]) // 算法树形数据
+const workOrderTypeXT = inject('workOrderTypeXT', ref([]))
+
+// 获取算法分组数据
+async function getAlgorithmList() {
+ try {
+ const res = await algorithmGroupedApi()
+ const list = res?.data?.data ?? []
+ algorithmTreeData.value = list.map(group => ({
+ id: 'group_' + group.type,
+ name: group.type,
+ disabled: true,
+ children: (group.algorithms || []).map(alg => ({
+ id: alg.id,
+ name: alg.name,
+ }))
+ }))
+ } catch (e) {
+ console.error('获取算法列表失败', e)
+ }
+}
// 子任务列表
-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) {
taskList.value.forEach((task, index) => {
- task.patrolTaskType = workOrderType
+ taskList.value[index] = {
+ ...initTaskRow(),
+ patrolTaskType: workOrderType,
+ }
// 获取对应的飞手列表
getFlyerList(index, workOrderType)
})
}
} 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 || []).filter(item => item)
+ }).finally(() => {
+ routeLoading.value = false
+ })
}
// 添加任务行
@@ -320,6 +400,13 @@
}
}
+// 处理任务区域点击事件（未选择工单时提示）
+function handleTaskSectionClick() {
+ if (!selectedWorkOrderId.value) {
+ ElMessage.warning('请先选择工单')
+ }
+}
+
// 获取工单列表
async function getWorkOrderList() {
const res = await gdWorkOrderPageApi({ size: 999, workOrderStatus: dialogMode.value === 'add' ? '20' : '' })
@@ -329,17 +416,37 @@
// 处理巡查任务类型变化
async function handlePatrolTaskTypeChange(index, skilledTaskType) {
// 清空该行已选择的飞手
- taskList.value[index].recommendFlyerName = ''
+ taskList.value[index].deviceFlyerId = ''
// 获取对应的飞手列表
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) {
+ if (!skilledTaskType.length) {
+ flyerListMap.value[index] = []
+ return
+ }
+ const obj = getPolygonCenter(geomAnalysis(selectedWorkOrder.value.geom))
const res = await gdFlyerPageApi({
size: 999,
current: 1,
- skilledTaskType,
+ skilledTaskType: skilledTaskType.map(item => item[1])?.join?.(','),
+ // longitude: obj.longitude || '',
+ // latitude: obj.latitude || '',
})
flyerListMap.value[index] = res?.data?.data?.records ?? []
}
@@ -362,8 +469,15 @@
// 判断一行是否已填写（至少填写了任务名称）
function isTaskRowFilled(task) {
- return !!(task.patrolTaskName || task.executeTime || task.patrolRouteUrl || task.recommendFlyerName || task.deviceId)
+ return !!(
+ task.patrolTaskName ||
+ task.executeTime ||
+ task.patrolRouteUrl ||
+ task.deviceFlyerId ||
+ task.deviceId
+ )
}
+
// 提交新增
async function handleSubmit() {
@@ -387,10 +501,6 @@
ElMessage.warning(`第${i + 1}行: 请输入巡查任务名称`)
return
}
- if (!task.patrolTaskType) {
- ElMessage.warning(`第${i + 1}行: 请选择巡查任务类型`)
- return
- }
if (!task.executeTime) {
ElMessage.warning(`第${i + 1}行: 请选择任务执行时间`)
return
@@ -399,7 +509,7 @@
ElMessage.warning(`第${i + 1}行: 请选择巡查任务航线`)
return
}
- if (!task.recommendFlyerName) {
+ if (!task.deviceFlyerId) {
ElMessage.warning(`第${i + 1}行: 请选择推荐飞手`)
return
}
@@ -431,6 +541,8 @@
async function open({ mode = 'add', row } = {}) {
dialogMode.value = mode
await getWorkOrderList()
+ getAlgorithmList()
+
if (dialogMode.value === 'add') {
selectedWorkOrderId.value = null
selectedWorkOrder.value = null
@@ -440,11 +552,11 @@
// 编辑/查看模式 - 加载已有数据
selectedWorkOrderId.value = row?.workOrderId
handleWorkOrderChange(row?.workOrderId)
- taskList.value = [{ ...row }]
+ taskList.value = [{ ...row, patrolTaskType: row?.patrolTaskType || [] }]
flyerListMap.value = {}
// 如果有巡查类型，加载对应的飞手列表
if (row?.patrolTaskType) {
- getFlyerList(0, row.patrolTaskType)
+ getFlyerList(0, taskList.value[0].patrolTaskType)
}
}
}
@@ -466,8 +578,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>
--
Gitblit v1.9.3