From b5bbbd19cf0b3c2b7674e5ecb6c1847f0ec734e4 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Wed, 04 Mar 2026 16:26:29 +0800
Subject: [PATCH] feat: 贴地
---
applications/task-work-order/src/views/orderView/orderManage/orderManage/FormDiaLog.vue | 126 ++++++++++++++++++++++++++++++++---------
1 files changed, 97 insertions(+), 29 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 bcb77b1..06ed06b 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
@@ -9,9 +9,11 @@
:close-on-click-modal="false"
>
<div class="content" style="display: flex">
- <div class="processBox" v-if="dialogMode !== 'add' && processList.length">
-<!-- <div class="detail-title">工单记录</div>-->
- <OrderStepBar :processList="processList" />
+ <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">
@@ -34,7 +36,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>
@@ -106,7 +108,6 @@
<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="至"
@@ -127,10 +128,10 @@
@change="loadDemandChange"
>
<el-option
- v-for="item in dictObj.deviceLoadDemand"
- :key="item.dictKey"
- :label="item.dictValue"
- :value="item.dictKey"
+ v-for="item in payloadList"
+ :key="item.name"
+ :label="item.name"
+ :value="item.name"
/>
</el-select>
</el-form-item>
@@ -138,9 +139,9 @@
<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
@@ -173,10 +174,10 @@
<el-table
class="separateTable"
:empty-text="
- formData.deviceLoadDemand && pointList.length ? '暂无数据' : '请先选择设备需求并在地图上绘制工单范围'
+ pointList.length ? '暂无数据' : '请先在地图上绘制工单范围'
"
ref="deviceTableRef"
- :data="formData.deviceLoadDemand && pointList.length ? deviceList : []"
+ :data="pointList.length ? deviceList : []"
row-key="id"
@selection-change="handleDeviceSelectionChange"
>
@@ -264,10 +265,10 @@
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'
@@ -316,6 +317,7 @@
const suddenlyEdit = ref(false)
const processList = ref([])
let viewPlane
+let allDeviceList = []
const hasPatrolTaskList = computed(() => ['30', '40', '50', '60'].includes(String(formData.value.workOrderStatus)))
const gdStatusObj = {
@@ -339,7 +341,6 @@
workOrderName: fieldRules(true, 50),
workOrderType: fieldRules(true),
executeStartTime: fieldRules(true),
- deviceLoadDemand: fieldRules(true),
}
// 操作类型：1接单，2拒接接单，3申请取消，4申请修改， 5同意取消
@@ -472,7 +473,7 @@
// 新增模式绘制
function addPolygon() {
- drawPolygonExample = new DrawPolygon(viewer)
+ drawPolygonExample = new DrawPolygon({ deviceList: allDeviceList })
drawPolygonExample.initHandler(viewer)
drawPolygonExample.subscribe('getPolygonPositions', drawFinished)
}
@@ -494,7 +495,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(
@@ -512,11 +513,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({
@@ -544,10 +551,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: {
@@ -555,6 +576,7 @@
width: 30,
height: 30,
verticalOrigin: Cesium.VerticalOrigin.CENTER,
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
},
label: {
text: item.nickname,
@@ -563,20 +585,51 @@
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 } = {}) {
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 {
@@ -656,8 +709,10 @@
flex-direction: column;
.gd-cesium {
+ position: relative;
+ overflow: hidden;
width: 100%;
- min-height: 380px;
+ min-height: 360px;
flex: 1;
}
}
@@ -666,20 +721,33 @@
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: 12px 16px 24px 16px;
- width: 312px;
- border: 1px solid #e4e4e4;
- border-radius: 8px;
- overflow: auto;
- background: #fff;
+ display: flex;
+ flex-direction: column;
+
+ .process {
+ height: 100%;
+ padding: 12px 16px 24px 16px;
+ width: 312px;
+ border: 1px solid #e4e4e4;
+ border-radius: 8px;
+ background: #fff;
+ overflow: auto;
+ }
}
}
--
Gitblit v1.9.3