From e91e29a9a6dd4f7cb436da3c5c59fdd750e35129 Mon Sep 17 00:00:00 2001
From: husq <931347610@qq.com>
Date: Thu, 21 Sep 2023 16:37:05 +0800
Subject: [PATCH] 修改workSpaceId、地图逻辑修改
---
src/components/GMap.vue | 23 ++---
src/hooks/use-cesium-tsa.ts | 64 ++++++++++++++++
src/api/http/config.ts | 4
src/pages/page-web/projects/wayline.vue | 16 ++-
src/components/cesiumMap/cesium.vue | 59 --------------
src/api/manage.ts | 2
src/pages/page-web/projects/tsa.vue | 62 ++++++++++++++-
src/components/common/topbar.vue | 1
8 files changed, 146 insertions(+), 85 deletions(-)
diff --git a/src/api/http/config.ts b/src/api/http/config.ts
index b4a9d25..0fa0bcd 100644
--- a/src/api/http/config.ts
+++ b/src/api/http/config.ts
@@ -7,8 +7,8 @@
// http
// http://172.16.13.64:8100
- baseURL: 'http://192.168.1.198:6789', // This url must end with "/". Example: 'http://192.168.1.1:6789/'
- // baseURL: 'https://dev.jxpskj.com:36789', // This url must end with "/". Example: 'http://192.168.1.1:6789/'
+ // baseURL: 'http://192.168.1.198:6789', // This url must end with "/". Example: 'http://192.168.1.1:6789/'
+ baseURL: 'https://dev.jxpskj.com:36789', // This url must end with "/". Example: 'http://192.168.1.1:6789/'
// ws: 'ws//127.0.0.1:6789/api/v1/ws',
// ws://192.168.1.198:1883/
// websocketURL: 'ws://192.168.1.198:6789/api/v1/ws', // Example: 'ws://192.168.1.198:6789/api/v1/ws'
diff --git a/src/api/manage.ts b/src/api/manage.ts
index b070531..3f7b883 100644
--- a/src/api/manage.ts
+++ b/src/api/manage.ts
@@ -131,8 +131,6 @@
}
export const getUserPage = async function (params: any, body: IPage): Promise<CommonListResponse<any>> {
- console.log(params, '++++++++++++++')
-
const url = `${HTTP_PREFIX}/user/page`
const result = await request.get(url, { params: { ...params, pageNum: body.current, pageSize: body.size } })
return result.data
diff --git a/src/components/GMap.vue b/src/components/GMap.vue
index ba82548..4e8c879 100644
--- a/src/components/GMap.vue
+++ b/src/components/GMap.vue
@@ -1,9 +1,10 @@
<template>
<div class="g-map-wrapper">
<!-- 地图区域 -->
- <div id="g-container" :style="{ width: '100%', height: '100%' }" />
+ <!-- <div id="g-container" :style="{ width: '100%', height: '100%' }" /> -->
+ <Cesium />
<!-- 绘制面板 -->
- <div class="g-action-panel" :style="{ right: drawVisible ? '316px' : '16px' }">
+ <!-- <div class="g-action-panel" :style="{ right: drawVisible ? '316px' : '16px' }">
<div :class="state.currentType === 'pin' ? 'g-action-item selection' : 'g-action-item'" @click="draw('pin', true)">
<a><a-image :src="pin" :preview="false" /></a>
</div>
@@ -24,7 +25,7 @@
<CloseOutlined />
</a>
</div>
- </div>
+ </div> -->
<!-- 飞机OSD -->
<div v-if="osdVisible.visible && !osdVisible.is_dock" class="osd-panel fz12">
<div class="pl5 pr5 flex-align-center flex-row flex-justify-between"
@@ -666,7 +667,7 @@
import { useDockControl } from './g-map/use-dock-control'
import DroneControlPanel from './g-map/DroneControlPanel.vue'
import { useConnectMqtt } from './g-map/use-connect-mqtt'
-
+import Cesium from './cesiumMap/cesium.vue'
export default defineComponent({
components: {
BorderOutlined,
@@ -958,7 +959,6 @@
stopLivestream({
video_id: videoId
}).then(res => {
- console.log(res, 'res')
if (res.code === 0) {
aircraftUrl.value = ''
}
@@ -973,11 +973,11 @@
watch(() => store.state.deviceStatusEvent,
data => {
if (Object.keys(data.deviceOnline).length !== 0) {
- deviceTsaUpdateHook.initMarker(data.deviceOnline.domain, data.deviceOnline.device_callsign, data.deviceOnline.sn)
+ // deviceTsaUpdateHook.initMarker(data.deviceOnline.domain, data.deviceOnline.device_callsign, data.deviceOnline.sn)
store.state.deviceStatusEvent.deviceOnline = {} as DeviceStatus
}
if (Object.keys(data.deviceOffline).length !== 0) {
- deviceTsaUpdateHook.removeMarker(data.deviceOffline.sn)
+ // deviceTsaUpdateHook.removeMarker(data.deviceOffline.sn)
if ((data.deviceOffline.sn === osdVisible.value.sn) || (osdVisible.value.is_dock && data.deviceOffline.sn === osdVisible.value.gateway_sn)) {
osdVisible.value.visible = false
store.commit('SET_OSD_VISIBLE_INFO', osdVisible)
@@ -992,19 +992,16 @@
watch(() => store.state.deviceState, data => {
if (data.currentType === EDeviceTypeName.Gateway && data.gatewayInfo[data.currentSn]) {
- deviceTsaUpdateHook.moveTo(data.currentSn, data.gatewayInfo[data.currentSn].longitude, data.gatewayInfo[data.currentSn].latitude)
if (osdVisible.value.visible && osdVisible.value.gateway_sn !== '') {
deviceInfo.gateway = data.gatewayInfo[osdVisible.value.gateway_sn]
}
}
if (data.currentType === EDeviceTypeName.Aircraft && data.deviceInfo[data.currentSn]) {
- deviceTsaUpdateHook.moveTo(data.currentSn, data.deviceInfo[data.currentSn].longitude, data.deviceInfo[data.currentSn].latitude)
if (osdVisible.value.visible && osdVisible.value.sn !== '') {
deviceInfo.device = data.deviceInfo[osdVisible.value.sn]
}
}
if (data.currentType === EDeviceTypeName.Dock && data.dockInfo[data.currentSn]) {
- deviceTsaUpdateHook.initMarker(EDeviceTypeName.Dock, [EDeviceTypeName.Dock], data.currentSn, data.dockInfo[data.currentSn].basic_osd?.longitude, data.dockInfo[data.currentSn].basic_osd?.latitude)
if (osdVisible.value.visible && osdVisible.value.is_dock && osdVisible.value.gateway_sn !== '') {
deviceInfo.dock = data.dockInfo[osdVisible.value.gateway_sn]
deviceInfo.device = data.deviceInfo[deviceInfo.dock.basic_osd.sub_device?.device_sn ?? osdVisible.value.sn]
@@ -1085,8 +1082,8 @@
useConnectMqtt()
onMounted(() => {
- const app = getApp()
- useGMapManageHook.globalPropertiesConfig(app)
+ // const app = getApp()
+ // useGMapManageHook.globalPropertiesConfig(app)
})
function getDrawCallback ({ obj }) {
@@ -1278,7 +1275,7 @@
aircraftUrl,
aircraftList,
aircraSelected,
- selectChange
+ selectChange,
}
}
})
diff --git a/src/components/cesiumMap/cesium.vue b/src/components/cesiumMap/cesium.vue
index 946f26c..150163e 100644
--- a/src/components/cesiumMap/cesium.vue
+++ b/src/components/cesiumMap/cesium.vue
@@ -1,10 +1,10 @@
<template>
<div class="height-100 width-100 cesium" id="cesiumContainer"></div>
<div v-if="centerConfig.type && !centerConfig.latitude" class="pointLongitude">在地图上点击绘制项目中心点</div>
- <div class="switch">
+ <!-- <div class="switch">
<div class="2d" v-if="dimension === 3" @click="switchModel('2D')">2D</div>
<div class="3d" v-else @click="switchModel('3D')">3D</div>
- </div>
+ </div> -->
</template>
<script setup lang="ts">
@@ -87,25 +87,6 @@
})
viewer?.imageryLayers.addImageryProvider(annotation)
}
-const Point = (longitude: number, latitude: number) => {
- // 移除地图所有点 重新绘制
- viewer?.entities.removeAll()
- const entity = viewer?.entities.add({
- position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
- point: {
- pixelSize: 24,
- color: Cesium.Color.GREEN,
- outlineColor: Cesium.Color.WHITE,
- outlineWidth: 2,
- }
- })
- // // 将相机定位到标记点的位置
- // viewer.value?.camera.flyTo({
- // destination: entity.position,
- // duration: 2
- // })
-}
-
// 切换为二三维模式
const switchModel = (type: string) => {
switch (type) {
@@ -128,42 +109,8 @@
dimension.value = 3
}
}
-
-// 设置项目中所有的项目中心坐标
-watch(() => store.state.map.pointList, (newVal) => {
- if (newVal) {
- pointCenter(viewer, newVal)
- clickPoint(viewer, newVal)
- }
-}, {
- deep: true
-})
-// 点击地图生成项目中心点
-watch(() => store.state.map.centerConfig.type, (newVal) => {
- if (newVal === false || !store.state.map.centerConfig.type) {
- viewer?.entities.removeAll()
- handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
- } else {
- handler.setInputAction(function (e: any) {
- const cartesian = viewer?.camera.pickEllipsoid(e.position, viewer?.scene.globe.ellipsoid)
- if (cartesian) {
- const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
- const longitude = Cesium.Math.toDegrees(cartographic.longitude)
- const latitude = Cesium.Math.toDegrees(cartographic.latitude)
- const data = {
- longitude,
- latitude,
- }
- store.commit('SET_CENTER_CONFIG_LATITUDE', data)
- Point(longitude, latitude)
- }
- }, Cesium.ScreenSpaceEventType.LEFT_CLICK
- )
- }
-}, {
- deep: true
-})
onMounted(() => {
+ console.log('=====执行=====')
init()
})
// 销毁地图模型
diff --git a/src/components/common/topbar.vue b/src/components/common/topbar.vue
index 1b62929..6528629 100644
--- a/src/components/common/topbar.vue
+++ b/src/components/common/topbar.vue
@@ -50,7 +50,6 @@
watch(route, (newVal) => {
if (newVal) {
selected.value = newVal.path
- console.log(selected.value, '+++++')
}
}, {
immediate: true,
diff --git a/src/hooks/use-cesium-tsa.ts b/src/hooks/use-cesium-tsa.ts
new file mode 100644
index 0000000..18c4088
--- /dev/null
+++ b/src/hooks/use-cesium-tsa.ts
@@ -0,0 +1,64 @@
+import { ELocalStorageKey, EDeviceTypeName } from '/@/types'
+import dockIcon from '/@/assets/icons/dock.png'
+import rcIcon from '/@/assets/icons/rc.png'
+import droneIcon from '/@/assets/icons/drone.png'
+import * as Cesium from 'cesium'
+interface billboardSetting {
+ image: string,
+ scale?: number,
+ [key: string]: any
+}
+interface pointSetting {
+ pixelSize: number,
+ outlineWidth: number,
+ [key: string]: any
+}
+interface labelSetting {
+ text: string,
+ font: string,
+ outlineWidth: number,
+ [key: string]: any
+}
+interface pointOption {
+ longitude: number
+ latitude: number
+ point?: pointSetting
+ billboard?: billboardSetting
+ label?: labelSetting
+}
+
+export function cesiumOperation (viewer: any) {
+ const cesiumExample = viewer
+ const icons = new Map([
+ [EDeviceTypeName.Aircraft, droneIcon],
+ [EDeviceTypeName.Gateway, rcIcon],
+ [EDeviceTypeName.Dock, dockIcon]
+ ])
+ // 清除所有标记点
+ function removeAllPoint () {
+ cesiumExample.entities.removeAll()
+ }
+ // 添加标记点
+ function addPoint (pointOption:pointOption) {
+ cesiumExample.entities.add({
+ position: Cesium.Cartesian3.fromDegrees(pointOption.longitude, pointOption.latitude),
+ billboard: pointOption.billboard,
+ point: pointOption.point
+ })
+ }
+ // 飞行 flyto
+ function flyTo (pointOption:pointOption, time: number = 3) {
+ const destination = Cesium.Cartesian3.fromDegrees(pointOption.longitude, pointOption.latitude, 1000)
+ const duration = time
+ cesiumExample.camera.flyTo({
+ destination,
+ duration
+ })
+ }
+
+ return {
+ addPoint,
+ removeAllPoint,
+ flyTo
+ }
+}
diff --git a/src/pages/page-web/projects/tsa.vue b/src/pages/page-web/projects/tsa.vue
index a9ec36e..e951e62 100644
--- a/src/pages/page-web/projects/tsa.vue
+++ b/src/pages/page-web/projects/tsa.vue
@@ -250,13 +250,14 @@
import { getDeviceTopo, getUnreadDeviceHms, updateDeviceHms } from '/@/api/manage'
import { RocketOutlined, EyeInvisibleOutlined, EyeOutlined, RobotOutlined, DoubleRightOutlined } from '@ant-design/icons-vue'
import { EHmsLevel } from '/@/types/enums'
+import { cesiumOperation } from '/@/hooks/use-cesium-tsa'
const { appContext } = getCurrentInstance()
const global = appContext.config.globalProperties
const route = useRoute()
// const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
const store = useMyStore()
const username = ref(localStorage.getItem(ELocalStorageKey.Username))
-const workspaceId = ref(localStorage.getItem(ELocalStorageKey.WorkspaceId)!)
+// const workSpaceId = ref(localStorage.getItem(ELocalStorageKey.workSpaceId)!)
const osdVisible = ref({} as OSDVisible)
const hmsVisible = new Map<string, boolean>()
const scorllHeight = ref()
@@ -270,11 +271,62 @@
const deviceInfo = computed(() => store.state.deviceState.deviceInfo)
const dockInfo = computed(() => store.state.deviceState.dockInfo)
+const workSpaceId = computed(() => store.state.common.projectId)
const hmsInfo = computed({
get: () => store.state.hmsInfo,
set: (val) => {
return val
}
+})
+const getResource = (name: string) => {
+ return new URL(`/src/assets/icons/${name}`, import.meta.url).href
+}
+const cesium = cesiumOperation(global.$viewer)
+const hasFlownToLocation = ref(false)
+// 添加机场标注
+watch(() => store.state.deviceState, data => {
+ cesium.removeAllPoint()
+ if (data.currentType === EDeviceTypeName.Gateway && data.gatewayInfo[data.currentSn]) {
+ // deviceTsaUpdateHook.moveTo(data.currentSn, data.gatewayInfo[data.currentSn].longitude, data.gatewayInfo[data.currentSn].latitude)
+ }
+ if (data.currentType === EDeviceTypeName.Aircraft && data.deviceInfo[data.currentSn]) {
+ // 无人机图标
+ const setting = {
+ longitude: data.deviceInfo[data.currentSn].longitude,
+ latitude: data.deviceInfo[data.currentSn].latitude,
+ billboard: {
+ image: getResource('drone.png'),
+ outlineWidth: 0,
+ width: 36,
+ height: 36,
+ scale: 1.0,
+ }
+ }
+ cesium.addPoint(setting)
+ // if (osdVisible.value.visible && osdVisible.value.sn !== '') {
+ // deviceInfo.value.device = data.deviceInfo[osdVisible.value.sn]
+ // }
+ }
+ if (data.currentType === EDeviceTypeName.Dock && data.dockInfo[data.currentSn]) {
+ // 机场图标位置
+ const setting = {
+ longitude: data.dockInfo[data.currentSn].basic_osd?.longitude || 115.85666327144976,
+ latitude: data.dockInfo[data.currentSn].basic_osd?.latitude || 28.62452712442823,
+ billboard: {
+ image: getResource('dock.png'),
+ outlineWidth: 0,
+ width: 36,
+ height: 36,
+ scale: 1.0,
+ }
+ }
+ cesium.addPoint(setting)
+ if (hasFlownToLocation.value) return
+ cesium.flyTo(setting)
+ hasFlownToLocation.value = true
+ }
+}, {
+ deep: true
})
onMounted(() => {
@@ -298,14 +350,13 @@
scorllHeight.value = parent?.clientHeight - parent?.firstElementChild?.clientHeight
})
const messageHandler = async (payload: any) => {
- console.log(payload, 'payload')
// if (payload.type === 'hms') {
// const { data
}
// 监听ws 消息
// useConnectWebSocket(messageHandler)
function getOnlineTopo () {
- getDeviceTopo(workspaceId.value).then((res) => {
+ getDeviceTopo(workSpaceId.value).then((res) => {
if (res.code !== 0) {
return
}
@@ -371,12 +422,11 @@
}
function getUnreadHms (sn: string) {
- getUnreadDeviceHms(workspaceId.value, sn).then(res => {
+ getUnreadDeviceHms(workSpaceId.value, sn).then(res => {
if (res.data.length !== 0) {
hmsInfo.value[sn] = res.data
}
})
- console.info(hmsInfo.value)
}
function getOnlineDeviceHms () {
@@ -398,7 +448,7 @@
function readHms (visiable: boolean, sn: string) {
if (!visiable) {
- updateDeviceHms(workspaceId.value, sn).then(res => {
+ updateDeviceHms(workSpaceId.value, sn).then(res => {
if (res.code === 0) {
delete hmsInfo.value[sn]
}
diff --git a/src/pages/page-web/projects/wayline.vue b/src/pages/page-web/projects/wayline.vue
index e583069..c6f5e8d 100644
--- a/src/pages/page-web/projects/wayline.vue
+++ b/src/pages/page-web/projects/wayline.vue
@@ -109,7 +109,7 @@
})
const root = getRoot()
-const workspaceId = localStorage.getItem(ELocalStorageKey.WorkspaceId)!
+const workspaceId = computed(() => store.state.common.projectId)
const deleteTip = ref(false)
const deleteWaylineId = ref<string>('')
const canRefresh = ref(true)
@@ -137,7 +137,7 @@
return
}
canRefresh.value = false
- getWaylineFiles(workspaceId, {
+ getWaylineFiles(workspaceId.value, {
page: pagination.page,
page_size: pagination.page_size,
order_by: 'update_time desc'
@@ -174,7 +174,7 @@
function downloadWayline (waylineId: string, fileName: string) {
loading.value = true
- downloadWaylineFile(workspaceId, waylineId).then(res => {
+ downloadWaylineFile(workspaceId.value, waylineId).then(res => {
if (!res) {
return
}
@@ -186,7 +186,13 @@
}
function selectRoute (wayline: WaylineFile) {
- store.commit('SET_SELECT_WAYLINE_INFO', wayline)
+ loading.value = true
+ downloadWaylineFile(workspaceId.value, wayline.id).then(res => {
+ store.commit('SET_SELECT_WAYLINE_INFO', wayline)
+ console.log(res, 'res')
+ }).finally(() => {
+ loading.value = false
+ })
}
function onScroll (e: any) {
@@ -219,7 +225,7 @@
fileList.value.forEach(async (file: FileItem) => {
const fileData = new FormData()
fileData.append('file', file, file.name)
- await importKmzFile(workspaceId, fileData).then((res) => {
+ await importKmzFile(workspaceId.value, fileData).then((res) => {
if (res.code === 0) {
message.success(`${file.name} file uploaded successfully`)
canRefresh.value = true
--
Gitblit v1.9.3