From 4bd6f36030948afc34e031fc9f4b8f8cc3dde6f9 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Sat, 19 Apr 2025 19:03:51 +0800
Subject: [PATCH] feat:useTaskWayline使用方式调整
---
src/components/CurrentTaskDetails/RealTimeMap.vue | 59 +-------------
src/hooks/useTaskWayline/useTaskWayline.js | 155 ++++++++++++++++++++++++++++++++------
src/views/SignMachineNest/MachineRight/InspectionRaskList.vue | 21 ++--
3 files changed, 143 insertions(+), 92 deletions(-)
diff --git a/src/components/CurrentTaskDetails/RealTimeMap.vue b/src/components/CurrentTaskDetails/RealTimeMap.vue
index 207d811..625104c 100644
--- a/src/components/CurrentTaskDetails/RealTimeMap.vue
+++ b/src/components/CurrentTaskDetails/RealTimeMap.vue
@@ -6,9 +6,9 @@
import AmapMercatorTilingScheme from '@/utils/cesium/AmapMercatorTilingScheme'
import { Cartesian3, Terrain, Viewer } from 'cesium'
import { addBlueFilter } from '@/utils/cesium/common'
-import CreateFrustum from '@/utils/cesium/frustum/CreateFrustum'
-import aircraftGltf from '@/assets/gltf/aircraft.gltf'
import { useTaskWayline } from '@/hooks/useTaskWayline/useTaskWayline'
+
+const { init: initTaskWayline } = useTaskWayline()
const imageryProvider_ammapSL = new Cesium.UrlTemplateImageryProvider({
url: 'https://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
@@ -55,60 +55,9 @@
taskDetailsViewer?.value.camera.setView({
destination: Cartesian3.fromDegrees(115.763819, 28.787374, 5000),
})
+
+ initTaskWayline(taskDetailsViewer.value, deviceOsdInfo, taskDetails)
}
-
-let viewInfoFrustum
-// 设置视椎
-const setCreateFrustum = () => {
- const host = deviceOsdInfo.value?.data?.host
- if (!host) return
- viewInfoFrustum?.clear()
- if ([14, 0].includes(host.mode_code)) return
- const attitude_head = 180 + host.attitude_head
- const gimbal_pitch = 90 - Number(host?.payloads[0]?.gimbal_pitch) || 0
- viewInfoFrustum = new CreateFrustum(taskDetailsViewer?.value, {
- position: {
- longitude: host.longitude,
- latitude: host.latitude,
- altitude: host.height,
- },
- width: 30,
- height: 30,
- fov: 20.0,
- near: 3.0,
- far: 250.0,
- roll: gimbal_pitch,
- pitch: 0,
- heading: attitude_head,
- })
-}
-
-function setAircraftGltf() {
- const host = deviceOsdInfo.value?.data?.host
- const aircraftEntity = taskDetailsViewer.value.entities.getById('aircraftGltf')
- const position = Cesium.Cartesian3.fromDegrees(host.longitude, host.latitude, host.height)
- if (aircraftEntity) {
- aircraftEntity.position = new Cesium.ConstantPositionProperty(position)
- return
- }
- taskDetailsViewer.value.entities.add({
- id: 'aircraftGltf',
- position,
- model: {
- uri: aircraftGltf, // 或 .glb
- scale: 1.0, // 缩放比例
- minimumPixelSize: 64, // 最小像素尺寸（保证模型远处可见）
- maximumScale: 128, // 最大缩放（可选）
- },
- })
-}
-
-watch(deviceOsdInfo, () => {
- setCreateFrustum()
- setAircraftGltf()
-})
-
-useTaskWayline(taskDetailsViewer, taskDetails)
const removeMap = () => {
taskDetailsViewer?.value.entities.removeAll()
diff --git a/src/hooks/useTaskWayline/useTaskWayline.js b/src/hooks/useTaskWayline/useTaskWayline.js
index fe73342..506c46c 100644
--- a/src/hooks/useTaskWayline/useTaskWayline.js
+++ b/src/hooks/useTaskWayline/useTaskWayline.js
@@ -2,7 +2,7 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2025-04-19 14:24:34
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2025-04-19 17:47:46
+ * @LastEditTime: 2025-04-19 19:00:36
* @FilePath: \command-center-dashboard\src\hooks\useTaskWayline\useTaskWayline.js
* @Description:
*
@@ -18,9 +18,12 @@
import * as Cesium from 'cesium'
import { Cartesian3 } from 'cesium'
+import aircraftGltf from '@/assets/gltf/aircraft.gltf'
+import CreateFrustum from '@/utils/cesium/frustum/CreateFrustum'
-export function useTaskWayline (viewer, taskDetails) {
- const newViewer = isRef(viewer) ? viewer : ref(viewer)
+export function useTaskWayline () {
+ let viewer = null
+ let deviceOsdInfo = null
// 解析kmz文件
const parsingFiles = async url => {
@@ -30,7 +33,7 @@
const waylinesXMLObj = removeTextKey(waylinesXMLJSON.Folder)
if (!waylinesXMLObj.Placemark.length) return
const allPoint = waylinesXMLObj.Placemark.map(item => item.Point.coordinates.split(','))
- flyVisual(allPoint, newViewer.value)
+ flyVisual(allPoint, viewer)
drawWayline(waylinesXMLObj)
}
@@ -43,7 +46,7 @@
removeEntitys()
// 起点
- newViewer.value.entities.add({
+ viewer.entities.add({
id: 'drone-job-wayline-start',
position: positions[0],
billboard: {
@@ -54,7 +57,7 @@
})
// 终点
- newViewer.value.entities.add({
+ viewer.entities.add({
id: 'drone-job-wayline-end',
position: positions[positions.length - 1],
billboard: {
@@ -66,7 +69,7 @@
})
// 路径线
- newViewer.value.entities.add({
+ viewer.entities.add({
id: 'drone-job-wayline-polyline',
polyline: {
width: 4,
@@ -82,34 +85,134 @@
})
}
- watch(
- [
- () => taskDetails.value?.way_lines?.length,
- () => newViewer.value
- ],
- (
- [wayLinesLength, curViewer],
- ) => {
- if (wayLinesLength && wayLinesLength > 0 && curViewer) {
- parsingFiles(taskDetails.value.way_lines[0].url)
- }
- },
- { immediate: true }
- )
- const removeEntitys = () => {
- const entitiesIDs = newViewer.value?.entities.values.map(i => i.id)
- Array.isArray(entitiesIDs) && entitiesIDs.forEach(item => {
- item.includes('drone-job-wayline-') && newViewer.value?.entities.removeById(item)
+
+ let viewInfoFrustum
+ // 设置视椎
+ const setCreateFrustum = (host) => {
+ if (!host) return
+ viewInfoFrustum?.clear()
+
+ const attitude_head = 180 + host?.attitude_head
+ const gimbal_pitch = 90 - Number(host?.payloads[0]?.gimbal_pitch) || 0
+
+ viewInfoFrustum = new CreateFrustum(viewer, {
+ position: {
+ longitude: host?.longitude,
+ latitude: host?.latitude,
+ altitude: host?.height,
+ },
+ width: 30,
+ height: 30,
+ fov: 20.0,
+ near: 3.0,
+ far: 250.0,
+ roll: gimbal_pitch,
+ pitch: 0,
+ heading: attitude_head,
})
}
+ function setAircraftGltf () {
+ const host = deviceOsdInfo.value?.data?.host
+
+ console.log(host, 1111111111)
+
+ const aircraftEntity = viewer?.entities.getById('aircraftGltf')
+ const position = Cesium.Cartesian3.fromDegrees(host?.longitude, host?.latitude, host?.height)
+ if (aircraftEntity) {
+ aircraftEntity.position = new Cesium.ConstantPositionProperty(position)
+ return
+ }
+
+ let entity = viewer?.entities.add({
+ id: 'aircraftGltf',
+ position,
+ label: {},
+ model: {
+ uri: aircraftGltf, // 或 .glb
+ scale: 1.0, // 缩放比例
+ minimumPixelSize: 64, // 最小像素尺寸（保证模型远处可见）
+ maximumScale: 128, // 最大缩放（可选）
+ },
+ })
+
+ const homeDistance = Math.floor(host?.home_distance) || 0
+ const distance = 1
+ const arrivalTime = 1
+ const totalDistance = 1
+ const usedTime = 1
+
+ entity.label = new Cesium.LabelGraphics({
+ text: `距离机场水平距离:${homeDistance}m\n距离下一个航点:${Math.round(
+ distance,
+ )}m\n预计到达下一航点时间:${arrivalTime}\n本次飞行时间:${usedTime}\n本次航线平面里程:${Math.round(
+ totalDistance,
+ )}m`,
+ font: '13px monospace',
+ showBackground: true,
+ horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+ verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+ disableDepthTestDistance: Number.POSITIVE_INFINITY,
+ pixelOffset: new Cesium.Cartesian2(0, -40),
+ show: true,
+ })
+ }
+
+ const mapEntityRemove = () => {
+ viewInfoFrustum?.clear()
+
+ viewer?.entities.removeById('aircraftGltf')
+ }
+
+ const removeEntitys = () => {
+ const entitiesIDs = viewer?.entities.values.map(i => i.id)
+
+ Array.isArray(entitiesIDs) && entitiesIDs.forEach(item => {
+ item.includes('drone-job-wayline-') && viewer?.entities.removeById(item)
+ })
+ }
+
+ const init = (v, wsInfo, taskDetails) => {
+ console.log(v, wsInfo, taskDetails)
+
+ viewer = v
+ deviceOsdInfo = computed(() => wsInfo.value?.device_osd)
+
+ watch(taskDetails,
+ () => {
+ if (taskDetails.value?.way_lines?.length) {
+ parsingFiles(taskDetails.value.way_lines[0].url)
+ }
+ },
+ { immediate: true }
+ )
+
+ watch(deviceOsdInfo, () => {
+ const host = deviceOsdInfo.value?.data?.host
+
+ if (!host) return
+
+ if ([14, 0].includes(host?.mode_code)) {
+ mapEntityRemove()
+ return
+ }
+
+ setCreateFrustum(host)
+ setAircraftGltf()
+ }
+ )
+ }
+
onBeforeUnmount(() => {
+ mapEntityRemove()
removeEntitys()
})
return {
- removeEntitys
+ init,
+ removeEntitys,
+ mapEntityRemove,
}
}
\ No newline at end of file
diff --git a/src/views/SignMachineNest/MachineRight/InspectionRaskList.vue b/src/views/SignMachineNest/MachineRight/InspectionRaskList.vue
index a93548d..693cfa6 100644
--- a/src/views/SignMachineNest/MachineRight/InspectionRaskList.vue
+++ b/src/views/SignMachineNest/MachineRight/InspectionRaskList.vue
@@ -78,7 +78,6 @@
import { useStore } from 'vuex'
import { useTaskWayline } from '@/hooks/useTaskWayline/useTaskWayline'
import { useTaskDetails } from '@/hooks/useTaskDetails/useTaskDetails'
-import { useTaskViewInfo } from '@/hooks/useTaskViewInfo/useTaskViewInfo'
import { useDroneWS } from '@/hooks/useDroneWS'
let viewer = null
@@ -211,6 +210,14 @@
}
}
+watch([() => tabIndex.value, () => tableList.value], async ([newTabIndex, newTableList]) => {
+ if (newTabIndex == 1 && newTableList.length > 0) {
+ await getTaskDetails(newTableList[0].wayline_job_info_id)
+ }
+})
+
+const { init: initTaskWayline, removeEntitys } = useTaskWayline()
+
onMounted(async () => {
viewer = window.$viewer
@@ -338,17 +345,9 @@
// job_id: '7aa5222c-2f8b-401e-b6ba-d6a550398829',
// },
// ]
+
+ initTaskWayline(viewer, wsInfo, taskDetails)
})
-
-watch([() => tabIndex.value, () => tableList.value], async ([newTabIndex, newTableList]) => {
- if (newTabIndex == 1 && newTableList.length > 0) {
- await getTaskDetails(newTableList[0].wayline_job_info_id)
- }
-})
-
-const { removeEntitys } = useTaskWayline(viewer || window.$viewer, taskDetails)
-
-useTaskViewInfo(viewer || window.$viewer, wsInfo, removeEntitys)
</script>
<style lang="scss" scoped>
--
Gitblit v1.9.3