From 6614f65174cfecb5b02632b6cab2b4769992dd94 Mon Sep 17 00:00:00 2001 From: Fuyuu <1805498209@qq.com> Date: Tue, 30 Jan 2024 16:01:30 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BF=A1=E6=81=AF=E7=AA=97?= =?UTF-8?q?=E5=8F=A3=E6=95=B0=E6=8D=AE=E4=B8=8D=E5=88=B7=E6=96=B0bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/earthMap/AISInfoWindow.vue | 197 +-- src/components/earthMap/TailAfterWindow.vue | 89 +- src/components/earthMap/components/Window.vue | 1064 ++++++++--------- src/utils/earthMap/listenMouseHandler.ts | 5 + src/utils/earthMap/shipDraw.ts | 34 +- src/views/earthMap/edit/EarthComp.vue | 5 +- 6 files changed, 761 insertions(+), 633 deletions(-) diff --git a/src/components/earthMap/AISInfoWindow.vue b/src/components/earthMap/AISInfoWindow.vue index d7cd641..9afd24e 100644 --- a/src/components/earthMap/AISInfoWindow.vue +++ b/src/components/earthMap/AISInfoWindow.vue @@ -2,7 +2,7 @@ * @Author: Fuyuu 1805498209@qq.com * @Date: 2024-01-05 14:18:33 * @LastEditors: Fuyuu 1805498209@qq.com - * @LastEditTime: 2024-01-25 15:11:06 + * @LastEditTime: 2024-01-30 15:25:39 * @FilePath: \dt-admin-pc-v2\src\components\earthMap\AISInfoWindow.vue * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE --> @@ -10,140 +10,145 @@
-
船名:
+
船名：
{{ infoData.name }}
-
MMSI:
+
MMSI：
{{ infoData.mmsi }}
-
船首向:
+
船首向：
未知
-
呼号:
+
呼号：
未知
-
航迹向:
+
航迹向：
未知
-
IMO:
+
IMO：
{{ infoData.imo }}
-
航速:
+
航速：
0.2节
-
经度:
+
经度：
{{ infoData.longitude }}
-
纬度:
+
纬度：
{{ infoData.latitude }}
-
状态:
+
状态：
锚泊
-
类型:
+
类型：
货船
-
船长/宽:
+
船长/宽：
89米/20米
-
目的地:
+
目的地：
JIANGMEN,CN
-
吃水:
+
吃水：
3.8米
-
国籍:
+
国籍：
CN
-
预到时间:
+
预到时间：
2024-01-08 17:00:00
-
更新时间:
+
更新时间：
2024-01-08 14:40:11
-
雷达ID:
+
目标号：
+
{{ infoData.trackId }}
+
+
+
雷达编号：
{{ infoData.radarId }}
-
时间:
+
时间：
{{ infoData.timestamp }}
-
距离:
+
距离：
{{ infoData.dis }}m
-
方位角:
+
方位角：
{{ infoData.azimuth }}°
-
速度:
+
速度：
{{ infoData.speed }}m/s
-
航向:
+
航向：
{{ infoData.course }}°
-
经度:
+
经度：
{{ infoData.longitude }}
-
纬度:
+
纬度：
{{ infoData.latitude }}
-
海拔:
+
海拔：
{{ infoData.altitude }}m
-
类型:
+
类型：
{{ infoData.type }}
-
航行轨迹:
+
航行轨迹：
-
跟踪船只:
- + + 跟踪 @@ -154,13 +159,11 @@ diff --git a/src/components/earthMap/components/Window.vue b/src/components/earthMap/components/Window.vue index 5542627..432e39d 100644 --- a/src/components/earthMap/components/Window.vue +++ b/src/components/earthMap/components/Window.vue @@ -1,6 +1,5 @@ - - - - - - - - - - - - diff --git a/src/utils/earthMap/listenMouseHandler.ts b/src/utils/earthMap/listenMouseHandler.ts index a18d0ce..df00d12 100644 --- a/src/utils/earthMap/listenMouseHandler.ts +++ b/src/utils/earthMap/listenMouseHandler.ts @@ -103,7 +103,12 @@ export default function listenMouseHandler(that) { } else { that.windowTitle = 'AIS信息'; } + // 打开信息窗口 that.AISInfoWindowShow = true; + // 关闭追踪窗口 + that.TailAfterWindowShow = false; + // 同时隐藏场景树状结构 + window.$uia.tools.sceneTree.show = false; // 赋值船只场景id - 唯一标识 可通过该字段获取其余信息 that.ship_guid = pickedFeature.id.guid; } diff --git a/src/utils/earthMap/shipDraw.ts b/src/utils/earthMap/shipDraw.ts index 117b2da..6f45c8a 100644 --- a/src/utils/earthMap/shipDraw.ts +++ b/src/utils/earthMap/shipDraw.ts @@ -2,7 +2,7 @@ * @Author: Fuyuu 1805498209@qq.com * @Date: 2024-01-03 17:42:49 * @LastEditors: Fuyuu 1805498209@qq.com - * @LastEditTime: 2024-01-26 16:30:29 + * @LastEditTime: 2024-01-30 10:29:34 * @FilePath: \dt-admin-pc-v2\src\utils\earthMap\shipDraw.ts * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE */ @@ -30,6 +30,23 @@ function toRadians(point) { return window.Cesium.Math.toRadians(point); } +/** + * 时间戳转化为年月日时分秒 + * @param timestamp 时间戳 + */ +function toStringTime(timestamp) { + let date = new Date(timestamp); + let year = date.getFullYear(); + let month = ('0' + (date.getMonth() + 1)).slice(-2); + let day = ('0' + date.getDate()).slice(-2); + let hour = ('0' + date.getHours()).slice(-2); + let minute = ('0' + date.getMinutes()).slice(-2); + let second = ('0' + date.getSeconds()).slice(-2); + + let datetime = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second; + return datetime; +} + /** * 绘制船只 * @param shipItem 船只数据 @@ -70,6 +87,7 @@ export const drawRadarShipsList = function (radarItem, isShowRadarTrack, isShowR // 是否已经存在 let existingShip = radarShipList.find((shipItem) => shipItem.trackId === radarData.trackId); if (existingShip) { + console.log('新增轨迹...'); // 添加新的轨迹点 window.$earth.getObject(existingShip.track_guid).positions.push([toRadians(radarData.longitude), toRadians(radarData.latitude), 0]); // 获取场景中的船只信息 @@ -78,7 +96,17 @@ export const drawRadarShipsList = function (radarItem, isShowRadarTrack, isShowR shipData.xbsjPosition = [toRadians(radarData.longitude), toRadians(radarData.latitude), 0]; // 航向需要后续调整。。。 shipData.xbsjRotation = [(Math.PI / 180) * (radarData.course - 90), 0, 0]; + // 更新船只数据（store） + existingShip.timestamp = toStringTime(radarData.timestamp); + existingShip.azimuth = radarData.azimuth; + existingShip.course = radarData.course; + existingShip.longitude = radarData.longitude; + existingShip.latitude = radarData.latitude; + existingShip.dis = radarData.dis; + existingShip.speed = radarData.speed; + existingShip.altitude = radarData.altitude; } else { + console.log('新增船只...'); // 新增船只轨迹信息 let trackData = addShipTrack([[toRadians(radarData.longitude), toRadians(radarData.latitude), 0]], 1); // 根据按钮状态决定轨迹显隐 @@ -87,8 +115,6 @@ export const drawRadarShipsList = function (radarItem, isShowRadarTrack, isShowR let modelData = drawShips(radarData, 1); // 根据按钮状态决定模型显隐 modelData.show = isShowRadarShip; - // 将时间戳转换 - let time = new Date(Math.floor(radarData.timestamp / 1000) * 1000); // 添加新的雷达船只 radarShipList.push({ name: `${radarData.trackId}号船_radar`, // 名称 @@ -96,7 +122,7 @@ export const drawRadarShipsList = function (radarItem, isShowRadarTrack, isShowR guid: modelData.xbsjGuid, // 船只场景id track_guid: trackData.xbsjGuid, // 根据不同的数据类型绘制不同的轨迹线 轨迹线guid，用于轨迹显隐 radarId: radarData.radarId, // 雷达ID - timestamp: `${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()} ${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`, // 时间 + timestamp: toStringTime(radarData.timestamp), // 时间 azimuth: radarData.azimuth, // 方位角 course: radarData.course, // 航向 latitude: radarData.latitude, // 纬度 diff --git a/src/views/earthMap/edit/EarthComp.vue b/src/views/earthMap/edit/EarthComp.vue index 0589fb2..0ed87f7 100644 --- a/src/views/earthMap/edit/EarthComp.vue +++ b/src/views/earthMap/edit/EarthComp.vue @@ -88,7 +88,7 @@ - +
@@ -333,7 +333,7 @@ store = useEarthMapStore(); setLabelStatus: any = setLabelStatus; setIconByRef: any = setIconByRef; - earthTitle = '态势监控一张图'; + earthTitle = '横琴新区环岛电子围网系统'; realTime = '……'; // 注意：Earth和Cesium的相关变量放在vue中，必须使用下划线作为前缀！ // _earth = undefined; @@ -673,6 +673,7 @@ let sceneTree = earthUI.tools.sceneTree; // 显示图层管理 sceneTree.show = this.PropsSceneTreeShow; + // sceneTree.show = false; // 设置图层管理 ref 输入框的 回车 事件 // ref 输入框的 let sceneTreeInput = sceneTree._comp.$el.getElementsByClassName('xbsj-model-content-box')[0].children[1];