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/orderManage/FormDiaLog.vue |  538 ++++++++++++++++++++++++++++++++++++++++++-----------------
 1 files changed, 379 insertions(+), 159 deletions(-)

diff --git a/applications/task-work-order/src/views/orderView/orderManage/orderManage/FormDiaLog.vue b/applications/task-work-order/src/views/orderView/orderManage/orderManage/FormDiaLog.vue
index 94c76cd..f56ecfc 100644
--- a/applications/task-work-order/src/views/orderView/orderManage/orderManage/FormDiaLog.vue
+++ b/applications/task-work-order/src/views/orderView/orderManage/orderManage/FormDiaLog.vue
@@ -1,6 +1,6 @@
 <template>
 	<el-dialog
-		class="gd-dialog"
+		class="gd-dialog orderManageFormDlg"
 		v-model="visible"
 		:title="titleEnum[dialogMode]"
 		@closed="visible = false"
@@ -8,24 +8,23 @@
 		destroy-on-close
 		:close-on-click-modal="false"
 	>
-		<div class="content" style="display: flex">
-			<div class="processBox" v-if="dialogMode !== 'add' && processList.length">
-				<el-timeline class="gd-timeline">
-					<el-timeline-item
-						v-for="(activity, index) in processList"
-						:key="index"
-						:icon="Check"
-						:type="index === processList.length - 1 ? 'success' : 'info'"
-						:color="activity.color"
-						:hollow="activity.hollow"
-						:timestamp="activity.createTime"
-					>
-						<div class="item-content">
-							<div>{{ activity.operator }}</div>
-							<div class="flowName">{{ activity.flowName }}</div>
-						</div>
-					</el-timeline-item>
-				</el-timeline>
+		<el-tabs
+			class="gd-tabs"
+			v-model="activeName"
+			@tab-click="tabsClick"
+			v-if="dialogReadonly && formData.workOrderStatus >= '30'"
+		>
+			<el-tab-pane label="基础信息" name="basic"></el-tab-pane>
+			<el-tab-pane label="成果数据" name="result">
+				<OutcomeData :workOrderId="formData.id" />
+			</el-tab-pane>
+		</el-tabs>
+		<div class="content" style="display: flex" v-if="activeName === 'basic'">
+			<div class="processBox" v-if="dialogMode !== 'add'">
+				<div class="detail-title">工单记录</div>
+				<div class="process">
+					<OrderStepBar :processList="processList" />
+				</div>
 			</div>
 			<div class="leftBox">
 				<div v-if="dialogReadonly">
@@ -37,7 +36,7 @@
 						</el-col>
 						<el-col :span="12">
 							<div class="label">工单类型</div>
-							<div class="val">{{ getDictLabel(formData.workOrderType, dictObj.workOrderType) }}</div>
+							<div class="val">{{ getTaskTypeLabel(formData.workOrderType, workOrderTypeXT) }}</div>
 						</el-col>
 						<el-col :span="12">
 							<div class="label">执行时间范围</div>
@@ -48,7 +47,7 @@
 						</el-col>
 						<el-col :span="12">
 							<div class="label">设备需求</div>
-							<div class="val">{{ getDictLabel(formData.deviceLoadDemand, dictObj.deviceLoadDemand) }}</div>
+							<div class="val">{{ formData.deviceLoadDemand }}</div>
 						</el-col>
 						<el-col :span="24">
 							<div class="label">工单备注</div>
@@ -57,6 +56,7 @@
 					</el-row>
 					<div class="detail-title" :style="{ marginTop: pxToRem(20) }">已选设备</div>
 					<el-table class="setHeight gd-dialog-table" ref="deviceTableRef" :data="deviceList" row-key="id">
+						<el-table-column type="index" label="序号" />
 						<el-table-column prop="nickname" label="设备名称" />
 						<el-table-column prop="deviceName" label="设备型号" />
 						<el-table-column prop="devicePayload" label="设备负载" />
@@ -67,7 +67,7 @@
 							<el-table-column prop="patrolTaskName" show-overflow-tooltip label="巡查任务名称" />
 							<el-table-column prop="patrolTaskType" show-overflow-tooltip label="巡查任务类型">
 								<template v-slot="{ row }">
-									{{ getDictLabel(row.patrolTaskType, dictObj.patrolTaskType) }}
+									{{ getTaskTypeLabel(row.patrolTaskType, workOrderTypeXT) }}
 								</template>
 							</el-table-column>
 							<el-table-column prop="taskStatus" show-overflow-tooltip label="任务状态">
@@ -90,6 +90,7 @@
 					:disabled="dialogReadonly"
 					label-width="90px"
 				>
+					<div class="detail-title">工单详情</div>
 					<el-row>
 						<el-col :span="12">
 							<el-form-item label="工单名称" prop="workOrderName">
@@ -98,27 +99,22 @@
 						</el-col>
 						<el-col :span="12">
 							<el-form-item label="工单类型" prop="workOrderType">
-								<el-select
-									class="gd-select"
-									popper-class="gd-select-popper"
+								<el-cascader
+									class="gd-cascader"
+									popper-class="gd-cascader-popper"
 									v-model="formData.workOrderType"
+									:options="workOrderTypeXT"
+									:props="{...taskTypeCascaderProps,multiple:true }"
 									placeholder="请选择"
 									clearable
-								>
-									<el-option
-										v-for="item in dictObj.workOrderType"
-										:key="item.dictKey"
-										:label="item.dictValue"
-										:value="item.dictKey"
-									/>
-								</el-select>
+									collapse-tags
+								/>
 							</el-form-item>
 						</el-col>
 						<el-col :span="12">
 							<el-form-item label="执行时间" prop="executeStartTime">
 								<el-date-picker
 									class="gd-date-picker"
-									popper-class="gd-date-picker-popper"
 									v-model="dateRange"
 									type="daterange"
 									range-separator="至"
@@ -138,21 +134,16 @@
 									clearable
 									@change="loadDemandChange"
 								>
-									<el-option
-										v-for="item in dictObj.deviceLoadDemand"
-										:key="item.dictKey"
-										:label="item.dictValue"
-										:value="item.dictKey"
-									/>
+									<el-option v-for="item in payloadList" :key="item.name" :label="item.name" :value="item.name" />
 								</el-select>
 							</el-form-item>
 						</el-col>
 						<el-col :span="24">
 							<el-form-item label="工单备注" prop="remark">
 								<el-input
-									class="gd-input"
+									class="gd-input-text"
 									type="textarea"
-									:rows="4"
+									:rows="3"
 									v-model="formData.remark"
 									placeholder="请输入"
 									clearable
@@ -161,7 +152,10 @@
 						</el-col>
 					</el-row>
 				</el-form>
-				<div class="detail-title" :style="{ marginTop: pxToRem(20) }">工单执行范围</div>
+				<div class="detail-title" :style="{ marginTop: pxToRem(10) }">
+					<span class="required-star" v-if="!dialogReadonly">*</span>
+					工单执行范围
+				</div>
 				<CommonCesiumMap
 					ref="mapRef"
 					class="gd-cesium"
@@ -175,65 +169,143 @@
 				/>
 			</div>
 			<div class="rightBox" v-if="!dialogReadonly">
-				<div class="detail-title">推荐设备</div>
-				<template v-if="formData.deviceLoadDemand && pointList.length">
-					<el-table
-						ref="deviceTableRef"
-						:data="deviceList"
-						row-key="id"
-						@selection-change="handleDeviceSelectionChange"
-					>
-						<el-table-column type="selection" width="55" :reserve-selection="true" />
-						<el-table-column prop="nickname" label="设备名称" />
-						<el-table-column prop="deviceName" label="设备型号" />
-						<el-table-column prop="devicePayload" label="设备负载" />
-					</el-table>
-				</template>
-				<div v-else class="tipSelect">请先选择设备需求并在地图上绘制工单范围</div>
+				<div class="detail-title">
+					<span class="required-star" v-if="!dialogReadonly">*</span>
+					推荐设备
+				</div>
+				<el-table
+					class="separateTable"
+					:empty-text="pointList.length ? '暂无数据' : '请先在地图上绘制工单范围'"
+					ref="deviceTableRef"
+					:data="pointList.length ? deviceList : []"
+					row-key="id"
+					@selection-change="handleDeviceSelectionChange"
+				>
+					<el-table-column type="selection" width="55" :reserve-selection="true" />
+					<el-table-column prop="nickname" label="设备名称" />
+					<el-table-column prop="deviceName" label="设备型号" />
+					<el-table-column prop="devicePayload" label="设备负载" />
+				</el-table>
 			</div>
 		</div>
 
-		<template #footer>
-			<template v-if="requester">
-				<template v-if="!suddenlyEdit">
-					<el-button
-						v-if="['11', '21', '23', '24', '25', '31', '60'].includes(gdStatus)"
-						@click="viewDescription"
-						color="#F2F3F5"
-					>
-						{{ gdStatusObj[gdStatus].reason }}
-					</el-button>
-					<el-button @click="addDescription" v-if="['20', '24', '25'].includes(gdStatus)" color="#F2F3F5">
-						申请取消
-					</el-button>
-					<el-button color="#4C34FF" @click="requestModification" v-if="['20', '25'].includes(gdStatus)">
-						申请修改
-					</el-button>
-				</template>
+		<template #footer v-if="activeName === 'basic' && detailLoaded">
+			<el-button
+				v-if="['11', '21', '23', '31', '60'].includes(gdStatus)"
+				:disabled="footerLoading"
+				@click="viewDescription"
+				color="#F2F3F5"
+			>
+				{{ gdStatusObj[gdStatus]?.reason }}
+			</el-button>
+
+			<template v-if="!suddenlyEdit">
 				<el-button
-					v-if="['11'].includes(gdStatus) || suddenlyEdit || (!dialogReadonly && !formData.id)"
-					:loading="submitting"
-					:disabled="submitting"
-					color="#4C34FF"
-					@click="handleSubmit"
+					v-if="['20'].includes(gdStatus) && permission.order_applyCancel"
+					:disabled="footerLoading"
+					@click="addDescription"
+					color="#F2F3F5"
 				>
-					{{ gdStatus === '11' || !gdStatus ? '发布' : '提交修改' }}
+					申请取消
+				</el-button>
+				<el-button
+					v-if="['20'].includes(gdStatus) && permission.order_applyEdit"
+					:loading="modifying"
+					:disabled="footerLoading"
+					@click="requestModification"
+					color="#4C34FF"
+				>
+					申请修改
 				</el-button>
 			</template>
-			<template v-else>
-				<el-button v-if="['21', '23'].includes(gdStatus)" @click="viewDescription" color="#F2F3F5">
-					{{ gdStatusObj[gdStatus].reason }}
+			<el-button
+				v-if="(['11'].includes(gdStatus) || suddenlyEdit || !formData.id) && permission.order_release"
+				:loading="submitting"
+				:disabled="footerLoading"
+				color="#4C34FF"
+				@click="handleSubmit"
+			>
+				{{ gdStatus === '11' || !gdStatus ? '发布' : '提交修改' }}
+			</el-button>
+			<el-button
+				v-if="gdStatus === '50' && permission.order_settlement"
+				:disabled="footerLoading"
+				@click="addDescription"
+				color="#F2F3F5"
+			>
+				结算
+			</el-button>
+			<template v-if="permission.order_controlOrder">
+				<el-button v-if="gdStatus === '10'" :disabled="footerLoading" @click="addDescription" color="#F2F3F5">
+					拒绝接单
 				</el-button>
-				<el-button v-if="gdStatus === '50'" @click="addDescription" color="#F2F3F5">结算</el-button>
-				<el-button v-if="gdStatus === '10'" @click="addDescription" color="#F2F3F5">拒绝接单</el-button>
-				<el-button v-if="gdStatus === '10'" @click="statusChange(1)" color="#4C34FF">接单</el-button>
-				<el-button v-if="gdStatus === '22'" @click="addDescription" color="#F2F3F5">不同意修改</el-button>
-				<el-button v-if="gdStatus === '22'" @click="statusChange(7)" color="#4C34FF">同意修改</el-button>
-				<el-button v-if="gdStatus === '21'" @click="addDescription" color="#F2F3F5">不同意取消</el-button>
-				<el-button v-if="gdStatus === '21'" @click="statusChange(5)" color="#4C34FF">同意取消</el-button>
-				<el-button v-if="gdStatus === '30'" @click="addDescription" color="#4C34FF">协商修改</el-button>
-				<el-button v-if="gdStatus === '31'" @click="statusChange(10)" color="#4C34FF">同意</el-button>
+				<el-button
+					v-if="gdStatus === '10'"
+					:loading="statusLoading === 1"
+					:disabled="footerLoading"
+					@click="statusChange(1)"
+					color="#4C34FF"
+				>
+					接单
+				</el-button>
 			</template>
+			<template v-if="permission.order_controlEdit">
+				<el-button
+					v-if="gdStatus === '22'"
+					:loading="statusLoading === 8"
+					:disabled="footerLoading"
+					@click="statusChange(8)"
+					color="#F2F3F5"
+				>
+					驳回
+				</el-button>
+				<el-button
+					v-if="gdStatus === '22'"
+					:loading="statusLoading === 7"
+					:disabled="footerLoading"
+					@click="statusChange(7)"
+					color="#4C34FF"
+				>
+					同意
+				</el-button>
+			</template>
+			<template v-if="permission.order_controlCancel">
+				<el-button
+					v-if="gdStatus === '21'"
+					:loading="statusLoading === 6"
+					:disabled="footerLoading"
+					@click="statusChange(6)"
+					color="#F2F3F5"
+				>
+					驳回
+				</el-button>
+				<el-button
+					v-if="gdStatus === '21'"
+					:loading="statusLoading === 5"
+					:disabled="footerLoading"
+					@click="statusChange(5)"
+					color="#4C34FF"
+				>
+					通过
+				</el-button>
+			</template>
+			<el-button
+				v-if="gdStatus === '30' && permission.order_applyNegotiation"
+				:disabled="footerLoading"
+				@click="addDescription"
+				color="#4C34FF"
+			>
+				协商修改
+			</el-button>
+			<el-button
+				v-if="gdStatus === '31' && permission.order_controlNegotiation"
+				:loading="statusLoading === 10"
+				:disabled="footerLoading"
+				@click="statusChange(10)"
+				color="#4C34FF"
+			>
+				同意
+			</el-button>
 		</template>
 
 		<RefuseOrderDialog
@@ -246,7 +318,7 @@
 </template>
 
 <script setup>
-import { computed, ref, onMounted, nextTick } from 'vue'
+import { computed, ref, nextTick, inject } from 'vue'
 import { ElMessage } from 'element-plus'
 import { dateRangeFormat, fieldRules, flyVisual, geomAnalysis, getDictLabel } from '@ztzf/utils'
 import {
@@ -255,31 +327,47 @@
 	gdWorkOrderHandleStatusApi,
 	gdWorkOrderSaveApi,
 } from './orderManageApi'
-import { gdManageDeviceListApi } from './gdManageDeviceApi'
+import { gdDevicePayloadListApi, gdManageDeviceListApi } from './gdManageDeviceApi'
 import { cartesian3Convert } from '@/utils/cesium/mapUtil'
 import * as Cesium from 'cesium'
-import { DrawPolygon } from '@/utils/cesium/DrawPolygon'
+import { DrawPolygon } from '@ztzf/utils'
 import { pxToRem } from '@/utils/rem'
 import dayjs from 'dayjs'
 import RefuseOrderDialog from '@/views/orderView/orderManage/orderManage/RefuseOrderDialog.vue'
 import CommonCesiumMap from '@/components/map-container/common-cesium-map.vue'
 import { gdPatrolTaskPageApi } from '@/views/orderView/orderManage/inspectionRequest/inspectionRequestApi'
-import { Check } from '@element-plus/icons-vue'
+import { Check, Search, RefreshRight } from '@element-plus/icons-vue'
+import droneIcon from '@/assets/images/orderView/orderManage/drone.png'
+import droneActiveIcon from '@/assets/images/orderView/orderManage/droneActive.png'
+import { useStore } from 'vuex'
+import OrderStepBar from '@/views/orderView/orderManage/orderManage/OrderStepBar.vue'
+import OutcomeData from './outcomeData.vue'
+import { getDictListApi } from '@/api/zkxt'
+import {
+	getTaskTypeLabel,
+	taskTypeCascaderProps,
+} from '../taskTypeOptions'
+const store = useStore()
+const permission = computed(() => store.state.user.permission)
+const activeName = ref('basic')
+
 // 初始化表单数据
 const initForm = () => ({
 	workOrderName: '',
-	workOrderType: '',
+	workOrderType: [],
 	executeStartTime: '',
 	executeEndTime: '',
 	deviceLoadDemand: '',
 	remark: '',
 	geom: '',
 	recommendDeviceIds: '',
+	typePinyinFirst: '',
 })
 
 const mapRef = ref(null)
 const rejectVisible = ref(false)
 const dictObj = inject('dictObj')
+const workOrderTypeXT = inject('workOrderTypeXT', ref([]))
 const dateRange = ref([])
 const patrolTaskList = ref([])
 const emit = defineEmits(['success'])
@@ -288,6 +376,10 @@
 const visible = defineModel() // 弹框显隐
 const dialogMode = ref('add') // 弹框模式
 const submitting = ref(false) // 提交中
+const modifying = ref(false) // 申请修改中
+const statusLoading = ref(null) // 状态操作中
+const footerLoading = computed(() => submitting.value || modifying.value || statusLoading.value !== null)
+const detailLoaded = ref(false) // 详情加载完成
 const dialogReadonly = computed(() => dialogMode.value === 'view')
 const titleEnum = ref({ edit: '编辑', view: '查看', add: '新增' })
 const deviceList = ref([]) // 设备列表
@@ -297,63 +389,68 @@
 let viewer
 let drawPolygonExample
 let pointList = ref([])
-const requester = inject('requester')
 const suddenlyEdit = ref(false)
 const processList = ref([])
 let viewPlane
+let allDeviceList = []
 const hasPatrolTaskList = computed(() => ['30', '40', '50', '60'].includes(String(formData.value.workOrderStatus)))
-import droneIcon from '@/assets/images/orderView/orderManage/drone.png'
-import droneActiveIcon from '@/assets/images/orderView/orderManage/droneActive.png'
 
 const gdStatusObj = {
-	'10': { reason: '拒绝原因', operationType: '2' },
-	'11': { reason: '拒绝原因' },
-	'20': { reason: '取消原因', operationType: '3' },
-	'21': { reason: '原因', operationType: '6' },
-	'22': { reason: '驳回原因', operationType: '8' },
+	'10': { reason: '拒单原因', operationType: '2', title: '拒绝接单' },
+	'11': { reason: '拒单原因' },
+	'20': { reason: '原因', operationType: '3', title: '申请取消' },
+	'21': { reason: '取消原因' },
 	'23': { reason: '取消原因' },
-	'24': { reason: '驳回原因', operationType: '3' },
-	'25': { reason: '驳回原因', operationType: '3' },
-	'30': { reason: '修改原因', operationType: '9' },
+	'30': { reason: '修改原因', operationType: '9', title: '协商修改' },
 	'31': { reason: '修改原因' },
 	'40': { reason: '' },
-	'50': { reason: '情况说明', operationType: '11' },
+	'50': { reason: '情况说明', operationType: '11', title: '结算' },
 	'60': { reason: '情况说明' },
 }
 
 // 工单状态:0草稿、10发布中_接单中、11发布中_拒绝接单、20响应中_待拆分、21响应中_申请取消、22响应中_申请修改、23响应中_已取消、
-// 24响应中_拒绝取消、25响应中_拒绝修改 30执行中_待全部完成、31执行中_协商修改、40完成待验_待全部验收、50验收通过_待结算、60结算完成_已结算
+// 30执行中_待全部完成、31执行中_协商修改、40完成待验_待全部验收、50验收通过_待结算、60结算完成_已结算
 const gdStatus = computed(() => formData.value?.workOrderStatus)
 
 const rules = {
 	workOrderName: fieldRules(true, 50),
 	workOrderType: fieldRules(true),
 	executeStartTime: fieldRules(true),
-	deviceLoadDemand: fieldRules(true),
 }
 
 // 操作类型:1接单,2拒接接单,3申请取消,4申请修改, 5同意取消
 // 6不同意取消 7.同意修改 8.不同意修改 9.协商修改,10:同意协商修改,11.结算
-function statusChange(operationType) {
-	gdWorkOrderHandleStatusApi({
-		operationType: operationType,
-		workOrderId: formData.value.id,
-	}).then(res => {
+async function statusChange(operationType) {
+	if (footerLoading.value) return
+	statusLoading.value = operationType
+	try {
+		await gdWorkOrderHandleStatusApi({
+			operationType: operationType,
+			workOrderId: formData.value.id,
+		})
 		visible.value = false
 		emit('success')
-	})
+	} finally {
+		statusLoading.value = null
+	}
 }
 
 // 申请修改按钮
 async function requestModification() {
-	suddenlyEdit.value = true
-	dialogMode.value = 'edit'
-	await getDeviceList()
-	nextTick(() => {
-		syncSelection()
-		viewPlane && viewer.entities.remove(viewPlane)
-		editPolygon()
-	})
+	if (footerLoading.value) return
+	modifying.value = true
+	try {
+		suddenlyEdit.value = true
+		dialogMode.value = 'edit'
+		await getDeviceList()
+		nextTick(() => {
+			syncSelection()
+			viewPlane && viewer.entities.remove(viewPlane)
+			editPolygon()
+		})
+	} finally {
+		modifying.value = false
+	}
 }
 
 // 填写说明弹框回调
@@ -371,6 +468,7 @@
 			row: formData.value,
 			type: gdStatusObj[gdStatus.value].operationType,
 			formLabel: gdStatusObj[gdStatus.value].reason,
+			title: gdStatusObj[gdStatus.value]?.title || '新增',
 		})
 	})
 }
@@ -419,16 +517,17 @@
 
 // 提交新增/编辑
 async function handleSubmit() {
-	const isValid = await formRef.value?.validate().catch(() => false)
-	if (!isValid) return
-	if (!pointList.value.length) {
-		return ElMessage.warning('请绘制范围')
-	}
-	if (!formData.value.recommendDeviceIds) {
-		return ElMessage.warning('请选择设备')
-	}
+	if (footerLoading.value) return
 	submitting.value = true
 	try {
+		const isValid = await formRef.value?.validate().catch(() => false)
+		if (!isValid) return
+		if (!pointList.value.length) {
+			return ElMessage.warning('请绘制范围')
+		}
+		if (!formData.value.recommendDeviceIds) {
+			return ElMessage.warning('请选择设备')
+		}
 		const str = [...pointList.value, pointList.value[0]].map(item => `${item.longitude} ${item.latitude}`).join(',')
 		formData.value.geom = `POLYGON((${str}))`
 		if (!formData.value.id) {
@@ -461,7 +560,7 @@
 
 // 新增模式绘制
 function addPolygon() {
-	drawPolygonExample = new DrawPolygon(viewer)
+	drawPolygonExample = new DrawPolygon({ deviceList: allDeviceList })
 	drawPolygonExample.initHandler(viewer)
 	drawPolygonExample.subscribe('getPolygonPositions', drawFinished)
 }
@@ -483,7 +582,7 @@
 	if (!formData.value?.geom) return
 	pointList.value = geomAnalysis(formData.value.geom)
 	drawPolygonExample?.destroy()
-	drawPolygonExample = new DrawPolygon(viewer)
+	drawPolygonExample = new DrawPolygon({ deviceList: allDeviceList })
 	let noClosedList = _.cloneDeep(pointList.value)
 	noClosedList.pop()
 	drawPolygonExample.initPolygon(
@@ -501,11 +600,17 @@
 	viewPlane = viewer.entities?.add({
 		customType: 'control_group',
 		position: Cesium.Cartesian3.fromDegrees(result[0], result[1]),
+		polygon: {
+			hierarchy: Cesium.Cartesian3.fromDegreesArray(result),
+			material: Cesium.Color.fromBytes(45, 140, 240, 99),
+			outline: false,
+			heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+		},
 		polyline: {
 			positions: Cesium.Cartesian3.fromDegreesArray(result),
 			clampToGround: true,
-			width: 3,
-			material: Cesium.Color.RED,
+			width: 2,
+			material: Cesium.Color.fromBytes(45, 140, 240, 255),
 		},
 	})
 	flyVisual({
@@ -533,10 +638,24 @@
 	})
 }
 
+//  生成圆形坐标点
+function buildCirclePositions(center, radius, segments = 120) {
+	const cartographic = Cesium.Cartographic.fromCartesian(center)
+	const positions = []
+	for (let i = 0; i < segments; i++) {
+		const angle = (i / segments) * 2 * Math.PI
+		const lat = cartographic.latitude + (radius / 6378137) * Math.cos(angle)
+		const lon = cartographic.longitude + (radius / (6378137 * Math.cos(cartographic.latitude))) * Math.sin(angle)
+		positions.push(Cesium.Cartesian3.fromRadians(lon, lat))
+	}
+	return positions
+}
+
 //  渲染
 function renderingAllDevice(list) {
 	list.forEach(item => {
-		const position = Cesium.Cartesian3.fromDegrees(item.longitude || 115.0, item.latitude || 27.11)
+		if (!item.longitude || !item.latitude) return
+		const position = Cesium.Cartesian3.fromDegrees(item.longitude, item.latitude)
 		viewer.entities.add({
 			position: position,
 			billboard: {
@@ -544,6 +663,7 @@
 				width: 30,
 				height: 30,
 				verticalOrigin: Cesium.VerticalOrigin.CENTER,
+				heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
 			},
 			label: {
 				text: item.nickname,
@@ -552,20 +672,52 @@
 				outlineWidth: 2,
 				outlineColor: Cesium.Color.WHITE,
 				horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+				heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
 				verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
 				pixelOffset: new Cesium.Cartesian2(0, -20),
+			},
+		})
+		// 覆盖范围 - 5km圆形区域
+		viewer.entities.add({
+			position: position,
+			ellipse: {
+				semiMajorAxis: 5000,
+				semiMinorAxis: 5000,
+				material: Cesium.Color.fromBytes(45, 140, 240, 80),
+				outline: false,
+				heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+			},
+		})
+		// 覆盖范围描边线 - 贴地
+		const circlePositions = buildCirclePositions(position, 5000)
+		viewer.entities.add({
+			polyline: {
+				positions: [...circlePositions, circlePositions[0]],
+				clampToGround: true,
+				width: 2,
+				material: Cesium.Color.fromBytes(45, 140, 240, 255),
 			},
 		})
 	})
 }
 
+const payloadList = ref([])
+function getPayloadList() {
+	gdDevicePayloadListApi().then(res => {
+		payloadList.value = res.data.data
+	})
+}
+
 // 打开弹框
 async function open({ mode = 'add', row } = {}) {
+	detailLoaded.value = false
 	dialogMode.value = mode
+	getPayloadList()
 	initMap()
 	const allDeviceRes = await gdManageDeviceListApi()
 	formData.value = dialogMode.value === 'add' ? initForm() : row
-	renderingAllDevice(allDeviceRes?.data?.data || [])
+	allDeviceList = allDeviceRes?.data?.data || []
+	renderingAllDevice(allDeviceList)
 	if (dialogMode.value === 'add') {
 		addPolygon()
 	} else {
@@ -573,6 +725,7 @@
 		hasPatrolTaskList.value && gdPatrolTaskPage()
 		dialogMode.value === 'edit' ? editPolygon() : viewPolygon()
 	}
+	detailLoaded.value = true
 
 	await nextTick()
 	await getDeviceList()
@@ -595,9 +748,7 @@
 		const image = entity.billboard?.image?._value
 		if ((image === droneIcon || image === droneActiveIcon) && entity.label) {
 			const device = deviceList.value.find(d => d.nickname === entity.label.text._value)
-			entity.billboard.image = device && selectedIds.includes(String(device.id))
-				? droneActiveIcon
-				: droneIcon
+			entity.billboard.image = device && selectedIds.includes(String(device.id)) ? droneActiveIcon : droneIcon
 		}
 	})
 }
@@ -613,6 +764,36 @@
 	}
 )
 
+// 取汉字(或英文)首字的拼音首字母,大写。如「占」→ Z
+function getFirstPinyinLetter(text) {
+	const char = String(text ?? '').trim().charAt(0)
+	if (!char) return ''
+	// 英文/数字直接取大写
+	if (/[a-zA-Z]/.test(char)) return char.toUpperCase()
+	// 按拼音排序的各首字母边界字,用 zh-CN 本地化比较定位所属字母
+	const boundaries = [
+		['A', '啊'], ['B', '芭'], ['C', '擦'], ['D', '搭'], ['E', '蛾'],
+		['F', '发'], ['G', '噶'], ['H', '哈'], ['J', '击'], ['K', '喀'],
+		['L', '垃'], ['M', '妈'], ['N', '拿'], ['O', '哦'], ['P', '啪'],
+		['Q', '期'], ['R', '然'], ['S', '撒'], ['T', '塌'], ['W', '挖'],
+		['X', '昔'], ['Y', '压'], ['Z', '匝'],
+	]
+	for (let i = boundaries.length - 1; i >= 0; i--) {
+		if (char.localeCompare(boundaries[i][1], 'zh-CN') >= 0) return boundaries[i][0]
+	}
+	return ''
+}
+
+// 工单类型变化时,用类型名称第一个字的拼音首字母(大写)赋值给 typePinyinFirst
+watch(
+	() => formData.value.workOrderType,
+	value => {
+		const label = getTaskTypeLabel(value, workOrderTypeXT.value)
+		formData.value.typePinyinFirst = getFirstPinyinLetter(label)
+	},
+	{ deep: true }
+)
+
 // 地图加载完毕
 function mapReady() {
 	dialogMode.value === 'add' && mapRef.value.flyBoundary()
@@ -621,11 +802,37 @@
 defineExpose({ open })
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
+.orderManageFormDlg {
+	.el-dialog__body {
+		display: flex;
+		flex-direction: column;
+		.content {
+			height: 0;
+			flex: 1;
+		}
+	}
+}
+</style>
+
+<style scoped lang="scss">
+.separateTable {
+	height: 0;
+	flex: 1;
+	:deep() {
+		.el-scrollbar__view {
+			height: 100%;
+		}
+		.el-table__empty-text {
+			line-height: normal;
+		}
+	}
+}
+
 .content {
 	display: flex;
 	gap: 0 20px;
-	height: 680px;
+	//height: 630px;
 
 	.leftBox {
 		width: 0;
@@ -635,35 +842,43 @@
 		flex-direction: column;
 
 		.gd-cesium {
+			position: relative;
+			overflow: hidden;
 			width: 100%;
-			min-height: 380px;
-			flex: 1;
+			height: 390px;
 		}
 	}
 
 	.rightBox {
 		width: 350px;
+		display: flex;
+		flex-direction: column;
+
 		.title {
 			font-weight: 500;
 			font-size: 14px;
 			color: #272e37;
 		}
+
+		::v-deep(.el-table) {
+			tr th {
+				font-weight: normal;
+			}
+		}
 	}
 
 	.processBox {
-		padding: 24px 0;
-		width: 312px;
-		border: 1px solid #e4e4e4;
-		overflow: auto;
+		display: flex;
+		flex-direction: column;
 
-		.item-content {
-			position: relative;
-			.flowName {
-				width: 80px;
-				position: absolute;
-				left: -120px;
-				top: 0px;
-			}
+		.process {
+			height: 100%;
+			padding: 12px 16px 24px 16px;
+			width: 312px;
+			border: 1px solid #e4e4e4;
+			border-radius: 8px;
+			background: #fff;
+			overflow: auto;
 		}
 	}
 }
@@ -673,4 +888,9 @@
 	height: 200px;
 	line-height: 200px;
 }
+
+.required-star {
+	color: #f56c6c;
+	margin-right: 4px;
+}
 </style>

--
Gitblit v1.9.3