From 847f9d700deda256c4b749c938a158fad37244bf Mon Sep 17 00:00:00 2001
From: Fuyuu <1805498209@qq.com>
Date: Fri, 26 Jan 2024 16:36:26 +0800
Subject: [PATCH] =?UTF-8?q?1=E3=80=81=E4=BF=AE=E6=94=B9=E5=9C=B0=E5=9B=BE?=
 =?UTF-8?q?=E8=88=B9=E5=8F=AA=E6=98=BE=E9=9A=90bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

2、添加光电分析监听，使用mqtt发送点击船只信息，接收光电视频流rtsp地址
3、监听相机高度，变换船只模型
---
 src/App.vue                                 |  8 ++++
 src/components/earthMap/AISInfoWindow.vue   | 42 ++++++++----------
 src/components/earthMap/ShowHideControl.vue |  8 ++++
 src/components/earthMap/TailAfterWindow.vue | 17 ++++++-
 src/utils/earthMap/earthObj.ts              | 49 ++++++++++++++++++---
 src/utils/earthMap/listenMouseHandler.ts    |  6 +--
 src/utils/earthMap/shipDraw.ts              | 46 +++++++++++--------
 src/utils/mqtt/mqttclient.js                | 21 +++++----
 src/views/earthMap/edit/EarthComp.vue       | 45 ++++++++++++++-----
 vite.config.ts                              |  2 +-
 10 files changed, 173 insertions(+), 71 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 8492bc7..72024a4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,3 +1,11 @@
+<!--
+ * @Author: Fuyuu 1805498209@qq.com
+ * @Date: 2024-01-02 16:31:08
+ * @LastEditors: Fuyuu 1805498209@qq.com
+ * @LastEditTime: 2024-01-25 09:31:40
+ * @FilePath: \dt-admin-pc-v2\src\App.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
 <template>
   <ConfigProvider :locale="getAntdLocale">
     <AppProvider>
diff --git a/src/components/earthMap/AISInfoWindow.vue b/src/components/earthMap/AISInfoWindow.vue
index 7edca67..d7cd641 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-24 11:20:17
+ * @LastEditTime: 2024-01-25 15:11:06
  * @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
 -->
@@ -160,7 +160,7 @@
   import $mitt from '@/utils/earthMap/mitt';
   import { EyeOutlined } from '@ant-design/icons-vue';
   import { defHttp } from '/@/utils/http/axios';
-  import { title } from 'process';
+  import { info } from 'console';
 
   export default defineComponent({
     name: 'AISInfoWindow',
@@ -188,7 +188,7 @@
       const trackId: any = ref('');
       // 船只数据来源的雷达id
       const radarId: any = ref('');
-      // 点击船只的AIS信息对象
+      // 点击船只的信息对象
       const infoData: any = ref({});
       // 点击船只的轨迹线数据
       const trackData: any = ref({});
@@ -199,7 +199,7 @@
         trackId.value = window.$earth.getObject(proxy.ship_guid).trackId;
         // 根据trackId获取雷达id
         radarId.value = store.radarShipList.filter((item) => item.trackId === trackId.value)[0].radarId;
-        if (title.includes('AIS')) {
+        if (proxy.title.includes('AIS')) {
           // 获取store中的ais船只数据列表
           infoData.value = store.aisShipList.filter((item) => item.trackId === trackId.value)[0];
         } else {
@@ -237,25 +237,12 @@
       function tailAfter() {
         // 打开光电跟踪窗口
         proxy.$parent.TailAfterWindowShow = true;
-        // 发送船只id（trackId）、雷达id（radarId）、跟踪状态（tracking）（0 取消跟踪 1 跟踪）
-        // 使用API请求，提交数据到后端
-        // defHttp
-        //   .post(
-        //     {
-        //       url: '/military/tracking/target',
-        //       params: {
-        //         trackId: trackId.value,
-        //         radarId: radarId.value,
-        //         tracking: 1,
-        //       },
-        //     },
-        //     { isTransformResponse: false }
-        //   )
-        //   .then((res) => {
-        //     console.log('跟踪结果：', res);
-        //     // 提交数据，后端进行分析计算后，将跟踪画面传回显示
-        //   });
-        console.log('window', window);
+        // 通过mqtt发送跟踪船只的信息
+        let mqttClient = window.mqttClient;
+        // 设置跟踪状态 1-跟踪 0-停止跟踪
+        infoData.value.trackStatus = 1;
+        // 发布订阅
+        mqttClient.publish('/trackTarget', JSON.stringify(infoData.value));
       }
       // 监听轨迹线变化
       $mitt.on('trackChange', (e: boolean) => {
@@ -270,6 +257,15 @@
           checked.value = data.status;
         }
       });
+      // 实时监听船只信息变化（雷达）
+      $mitt.on('deviceCmd', (message: any) => {
+        let data = JSON.parse(message).radarTrack;
+        if (data.trackId == trackId.value) {
+          if (proxy.title.includes('雷达')) {
+            infoData.value = data;
+          }
+        }
+      });
       // 监听船只guid变化，更新信息
       watch(
         () => proxy.ship_guid,
diff --git a/src/components/earthMap/ShowHideControl.vue b/src/components/earthMap/ShowHideControl.vue
index 95c0539..69d190a 100644
--- a/src/components/earthMap/ShowHideControl.vue
+++ b/src/components/earthMap/ShowHideControl.vue
@@ -146,6 +146,10 @@
             // 控制显隐
             item.show = e;
           });
+          // 控制新船只是否显示模型（雷达）
+          $mitt.emit('shipAllChange', { status: e, type: 'radar' });
+          // 控制新船只是否显示轨迹（雷达）
+          $mitt.emit('trackAllChange', { status: e, type: 'radar' });
         } else {
           console.log('当前场景没有雷达船只');
         }
@@ -167,6 +171,8 @@
             // 控制显隐
             item.show = e;
           });
+          $mitt.emit('shipAllChange', { status: e, type: 'mix' });
+          $mitt.emit('trackAllChange', { status: e, type: 'mix' });
         } else {
           console.log('当前场景没有融合船只');
         }
@@ -188,6 +194,8 @@
             // 控制显隐
             item.show = e;
           });
+          $mitt.emit('shipAllChange', { status: e, type: 'ais' });
+          $mitt.emit('trackAllChange', { status: e, type: 'ais' });
         } else {
           console.log('当前场景没有AIS船只');
         }
diff --git a/src/components/earthMap/TailAfterWindow.vue b/src/components/earthMap/TailAfterWindow.vue
index 6307718..fa45cd6 100644
--- a/src/components/earthMap/TailAfterWindow.vue
+++ b/src/components/earthMap/TailAfterWindow.vue
@@ -2,7 +2,7 @@
  * @Author: Fuyuu 1805498209@qq.com
  * @Date: 2024-01-18 16:42:29
  * @LastEditors: Fuyuu 1805498209@qq.com
- * @LastEditTime: 2024-01-23 11:35:57
+ * @LastEditTime: 2024-01-25 16:16:00
  * @FilePath: \dt-admin-pc-v2\src\components\earthMap\TailAfterWindow.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -27,8 +27,9 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { getCurrentInstance } from 'vue';
+  import { getCurrentInstance, onMounted, onUnmounted } from 'vue';
   import Window from '@/components/earthMap/components/Window.vue';
+  import $mitt from '@/utils/earthMap/mitt';
   const props = defineProps({
     title: {
       type: String,
@@ -41,6 +42,18 @@
   function cancel() {
     proxy.$parent.TailAfterWindowShow = false;
   }
+
+  onMounted(() => {
+    // 监听光电跟踪分析
+    $mitt.on('tailAfterRtsp', (message: any) => {
+      console.log('光电跟踪信息', message);
+    });
+  });
+
+  onUnmounted(() => {
+    // 注销监听
+    $mitt.off('tailAfterRtsp');
+  });
 </script>
 <style lang="less" scoped>
   #tailAfterWindow .xbsj-model-header .xbsj-model-arrow {
diff --git a/src/utils/earthMap/earthObj.ts b/src/utils/earthMap/earthObj.ts
index f7c4885..5f29e5c 100644
--- a/src/utils/earthMap/earthObj.ts
+++ b/src/utils/earthMap/earthObj.ts
@@ -405,18 +405,16 @@ export const addShipModel = (options: any = {}, dataType: number) => {
   // 创建一个Model对象
   const objConfig = {
     name: options.name, // 实例名称
-    url: options.modelUrl, // 模型资源路径
+    // url: options.modelUrl ? options.modelUrl : '', // 模型资源路径
     trackId: options.id, // 船只trackid
     xbsjPosition: options.position, // 位置数组 [经度、纬度、高度]
     xbsjRotation: options.rotation, // 姿态数组 [偏航角、俯仰角、翻转角]
     xbsjScale: [1, 1, 1], // 缩放比例
     show: true, // 显隐状态
-    distanceDisplayCondition: [1.0, 30000.0], // 显示距离范围
+    distanceDisplayCondition: [1.0, 100000.0], // 显示距离范围
     scale: 0.5, // 尺寸缩放
     minimumPixelSize: 80, // 近似最小像素大小
     colorBlendAmount: dataType == 3 ? 0.0 : 1.0, // 1.0 模型颜色 0.0 设置纯色
-    color: dataType == 3 ? [1, 1, 1, 1] : dataType == 2 ? [1, 1, 0.03, 1] : [0.94, 0.13, 0.03, 1], // 设置纯色时，模型的颜色
-    colorBlendMode: dataType == 3 ? 'ColorBlendMode.HIGHLIGHT' : 'ColorBlendMode.REPLACE', // 模型渲染模式 设置纯色时需要更改为REPLACE模式
   };
   tileset.xbsjFromJSON(objConfig);
   //移入事件
@@ -427,13 +425,52 @@ export const addShipModel = (options: any = {}, dataType: number) => {
   tileset.onmouseout = () => {
     window.$earth.czm.viewer._container.style.cursor = 'default';
   };
+  /**
+   * 监听相机高度
+   */
+  window.XE.MVVM.watch(window.$earth.camera, 'position', (res: any) => {
+    let height = res[2];
+    // 3-融合船只-船模型 2-ais船只-黄色三角 1-雷达船只-红色三角
+    if (height > options.modelToViewer[0][0] && height < options.modelToViewer[0][1]) {
+      // 最低图层 显示船只模型  1-通用船 2-执法船 3-客船
+      if (dataType == 1) {
+        tileset.url = window._CONFIG['domianURL'] + '/sys/common/static/tongyongchuan.gltf';
+      } else if (dataType == 2) {
+        tileset.url = window._CONFIG['domianURL'] + '/sys/common/static/zhifachuan.gltf';
+      } else {
+        tileset.url = window._CONFIG['domianURL'] + '/sys/common/static/kechuan.gltf';
+      }
+      tileset.color = [1, 1, 1, 1];
+      tileset.xbsjScale = [1, 1, 1];
+      tileset.colorBlendMode = 'ColorBlendMode.HIGHLIGHT';
+    } else if (height > options.modelToViewer[1][0] && height < options.modelToViewer[1][1]) {
+      // 中间图层 显示三角形 1-红色 2-黄色 3-蓝色
+      if (dataType == 1) {
+        tileset.color = [0.94, 0.13, 0.03, 1];
+      } else if (dataType == 2) {
+        tileset.color = [1, 1, 0.03, 1];
+      } else {
+        tileset.color = [0.03, 0.35, 0.97, 0.85];
+      }
+      tileset.url = window._CONFIG['domianURL'] + '/sys/common/static/yellowShip.gltf';
+      tileset.xbsjScale = [0.3, 0.3, 0.3];
+      tileset.colorBlendMode = 'ColorBlendMode.REPLACE';
+    } else {
+      // 最高图层 统一显示小圆点
+      tileset.url = window._CONFIG['domianURL'] + '/sys/common/static/shipPoint.gltf';
+      tileset.xbsjScale = [0.1, 0.1, 0.1];
+      tileset.color = [0, 1, 0, 1];
+      tileset.colorBlendMode = 'ColorBlendMode.REPLACE';
+    }
+  });
+
   return tileset;
 };
 // 创建船只轨迹
 export const addShipTrack = (positions: number[][], dataType: number) => {
   const shipTrack = new window.XE.Obj.Polyline(window.$earth);
   const objConfig = {
-    width: 2.0, // 线宽
+    width: 1.0, // 线宽
     name: `轨迹线_${dataType == 1 ? 'radar' : dataType == 2 ? 'ais' : 'mix'}`, // 实例名称
     positions, // 点坐标经纬度数组 [经度、纬度、高度]
     material: {
@@ -444,6 +481,8 @@ export const addShipTrack = (positions: number[][], dataType: number) => {
         glowPower: 0.6, // 发光程度
       },
     },
+    minShowHeight: 1.0, // 最低显示海拔
+    maxShowHeight: 24999.0, // 最高显示海拔
     ground: true, // 是否贴地
   };
   shipTrack.xbsjFromJSON(objConfig);
diff --git a/src/utils/earthMap/listenMouseHandler.ts b/src/utils/earthMap/listenMouseHandler.ts
index 3abc3fc..a18d0ce 100644
--- a/src/utils/earthMap/listenMouseHandler.ts
+++ b/src/utils/earthMap/listenMouseHandler.ts
@@ -97,15 +97,15 @@ export default function listenMouseHandler(that) {
         }
         // 船只模型
         if (pickedFeature.id.xbsjType && pickedFeature.id.name.includes('船')) {
-          that.AISInfoWindowShow = true;
-          // 赋值船只场景id - 唯一标识 可通过该字段获取其余信息
-          that.ship_guid = pickedFeature.id.guid;
           // 若点击的是雷达船只
           if (pickedFeature.id.name.includes('船_radar')) {
             that.windowTitle = '雷达信息';
           } else {
             that.windowTitle = 'AIS信息';
           }
+          that.AISInfoWindowShow = true;
+          // 赋值船只场景id - 唯一标识 可通过该字段获取其余信息
+          that.ship_guid = pickedFeature.id.guid;
         }
         //雷达扫描范围
         if (
diff --git a/src/utils/earthMap/shipDraw.ts b/src/utils/earthMap/shipDraw.ts
index de8fe1f..117b2da 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-24 14:16:26
+ * @LastEditTime: 2024-01-26 16:30:29
  * @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
  */
@@ -41,12 +41,10 @@ const drawShips = function (shipItem, shipType) {
   let options = {
     id: shipItem.trackId, //  船只ID 通过雷达获取
     name: shipType == 1 ? `${shipItem.trackId}号船_radar` : shipType == 2 ? `${shipItem.trackId}号船_ais` : `${shipItem.trackId}号船_mix`, // 船只名称 具有区分不同数据类型船只的特殊标识
-    modelUrl:
-      shipType == 1
-        ? window._CONFIG['domianURL'] + '/sys/common/static/greenShip.gltf'
-        : shipType == 2
-        ? window._CONFIG['domianURL'] + '/sys/common/static/yellowShip.gltf'
-        : window._CONFIG['domianURL'] + '/sys/common/static/tongyongchuan.gltf', // 模型资源路径
+    modelToViewer: [
+      [0, 3999],
+      [4000, 24999],
+    ], // 不同相机高度范围数组 1:1~3999 2:4000~24999 3:25000~
     position: [
       toRadians(shipType == 3 ? shipItem.longitude + 0.0001 : shipType == 2 ? shipItem.longitude + 0.00005 : shipItem.longitude),
       toRadians(shipType == 3 ? shipItem.latitude + 0.0001 : shipType == 2 ? shipItem.latitude + 0.00005 : shipItem.latitude),
@@ -64,7 +62,7 @@ const drawShips = function (shipItem, shipType) {
  * 绘制地球上所有雷达船只
  * @param radarItem 雷达船只数据
  */
-export const drawRadarShipsList = function (radarItem, isShowTrack) {
+export const drawRadarShipsList = function (radarItem, isShowRadarTrack, isShowRadarShip) {
   // 接收到的单个雷达船只信息
   let radarData = radarItem.radarTrack;
   // 获取store中的雷达船只数据列表
@@ -84,17 +82,21 @@ export const drawRadarShipsList = function (radarItem, isShowTrack) {
     // 新增船只轨迹信息
     let trackData = addShipTrack([[toRadians(radarData.longitude), toRadians(radarData.latitude), 0]], 1);
     // 根据按钮状态决定轨迹显隐
-    trackData.show = isShowTrack;
+    trackData.show = isShowRadarTrack;
+    // 新增船只模型信息
+    let modelData = drawShips(radarData, 1);
+    // 根据按钮状态决定模型显隐
+    modelData.show = isShowRadarShip;
     // 将时间戳转换
-    let time = new Date(Math.floor(radarData.timestamp / 1000) * 1000)
+    let time = new Date(Math.floor(radarData.timestamp / 1000) * 1000);
     // 添加新的雷达船只
     radarShipList.push({
       name: `${radarData.trackId}号船_radar`, // 名称
       trackId: radarData.trackId, // 船只id
-      guid: drawShips(radarData, 1).xbsjGuid, // 船只场景id
+      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: `${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()} ${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`, // 时间
       azimuth: radarData.azimuth, // 方位角
       course: radarData.course, // 航向
       latitude: radarData.latitude, // 纬度
@@ -113,7 +115,7 @@ export const drawRadarShipsList = function (radarItem, isShowTrack) {
  * 绘制地球上所有ais船只（暂无AIS数据，使用雷达数据进行模拟）
  * @param aisItem AIS船只数据
  */
-export const drawAISShipsList = function (aisItem, isShowTrack) {
+export const drawAISShipsList = function (aisItem, isShowAISTrack, isShowAISShip) {
   // 接收到的单个ais船只信息
   let aisData = aisItem.radarTrack;
   // 获取store中的ais船只数据列表
@@ -135,7 +137,11 @@ export const drawAISShipsList = function (aisItem, isShowTrack) {
     // 新增船只轨迹信息
     let trackData = addShipTrack([[toRadians(aisData.longitude + 0.00005), toRadians(aisData.latitude + 0.00005), 0]], 2);
     // 根据按钮状态决定轨迹显隐
-    trackData.show = isShowTrack;
+    trackData.show = isShowAISTrack;
+    // 新增船只模型信息
+    let modelData = drawShips(aisData, 2);
+    // 根据按钮状态决定模型显隐
+    modelData.show = isShowAISShip;
     // 添加新的ais船只
     aisShipList.push({
       name: `${aisData.trackId}号船_ais`, // 名称
@@ -154,7 +160,7 @@ export const drawAISShipsList = function (aisItem, isShowTrack) {
       nationality: 'CN', // 国籍
       pre_arrival_time: '2024-01-08 14:40:11', // 预到时间
       trackId: aisData.trackId, // 船只id
-      guid: drawShips(aisData, 2).xbsjGuid, // 船只场景id
+      guid: modelData.xbsjGuid, // 船只场景id
       track_guid: trackData.xbsjGuid, // 根据不同的数据类型绘制不同的轨迹线 轨迹线guid，用于轨迹显隐
       azimuth: aisData.azimuth, // 方位角
       course: aisData.course, // 航向
@@ -171,7 +177,7 @@ export const drawAISShipsList = function (aisItem, isShowTrack) {
  * 绘制地球上所有融合船只（暂无融合数据，使用雷达数据进行模拟）
  * @param mixItem 融合船只数据
  */
-export const drawMixShipsList = function (mixItem, isShowTrack) {
+export const drawMixShipsList = function (mixItem, isShowMixTrack, isShowMixShip) {
   // 接收到的单个融合船只信息
   let mixData = mixItem.radarTrack;
   // 获取store中的融合船只数据列表
@@ -191,12 +197,16 @@ export const drawMixShipsList = function (mixItem, isShowTrack) {
     // 新增船只轨迹信息
     let trackData = addShipTrack([[toRadians(mixData.longitude + 0.0001), toRadians(mixData.latitude + 0.0001), 0]], 3);
     // 根据按钮状态决定轨迹显隐
-    trackData.show = isShowTrack;
+    trackData.show = isShowMixTrack;
+    // 新增船只模型信息
+    let modelData = drawShips(mixData, 3);
+    // 根据按钮状态决定模型显隐
+    modelData.show = isShowMixShip;
     // 添加新的融合船只
     mixShipList.push({
       name: `${mixData.trackId}号船_mix`, // 名称
       trackId: mixData.trackId, // 船只id
-      guid: drawShips(mixData, 3).xbsjGuid, // 船只场景id
+      guid: modelData.xbsjGuid, // 船只场景id
       track_guid: trackData.xbsjGuid, // 根据不同的数据类型绘制不同的轨迹线 轨迹线guid，用于轨迹显隐
       azimuth: mixData.azimuth, // 方位角
       course: mixData.course, // 航向
diff --git a/src/utils/mqtt/mqttclient.js b/src/utils/mqtt/mqttclient.js
index 22234d2..c455298 100644
--- a/src/utils/mqtt/mqttclient.js
+++ b/src/utils/mqtt/mqttclient.js
@@ -2,7 +2,7 @@
  * @Author: Fuyuu 1805498209@qq.com
  * @Date: 2024-01-02 16:31:08
  * @LastEditors: Fuyuu 1805498209@qq.com
- * @LastEditTime: 2024-01-24 15:28:12
+ * @LastEditTime: 2024-01-25 16:32:23
  * @FilePath: \dt-admin-pc-v2\src\utils\mqtt\mqttclient.js
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -23,15 +23,12 @@ const options = {
   password: 'public', // 密码
 };
 
-const topics = '/server/radar'; // 订阅频道
+const topics = '/server/radar,/track/deviceInfo'; // 订阅频道
 const topicList = topics.split(','); // 订阅事件列表
-// const topicList = {
-//   "ship/gps/100": "mqttShipShow",
-//   //server=服务 warning=预警 +代表所有级别预警 1,2，3  zdgl=震动光缆
-//   "server/warning/+/zdgl": "系统发布智能围网预警",
-//   "/v1.0.0/+/up/event": "智能围网",
-//   "/server/cmd/+/zdgl":"设备[消音复位重启]"
-// };
+/**
+ * /server/radar 雷达
+ * /track/deviceInfo 光电追踪rtspUrl
+ */
 export default class MqttUnit {
   connectUrl = `mqtt://${host}:${port}/mqtt`; // 连接Url
   client = mqtt.connect(this.connectUrl, options);
@@ -59,9 +56,15 @@ export default class MqttUnit {
     this.client.on('message', (topic, message) => {
       const utf8decoder = new TextDecoder();
       const dataString = utf8decoder.decode(message);
+
       if (topic.startsWith('/server/')) {
         $mitt.emit('deviceCmd', dataString);
       }
+      if (topic.startsWith('/track/')) {
+        $mitt.emit('tailAfterRtsp', dataString);
+      }
     });
+    // 将client对象挂载window全局对象中
+    window.mqttClient = this.client;
   }
 }
diff --git a/src/views/earthMap/edit/EarthComp.vue b/src/views/earthMap/edit/EarthComp.vue
index e1eeb96..0589fb2 100644
--- a/src/views/earthMap/edit/EarthComp.vue
+++ b/src/views/earthMap/edit/EarthComp.vue
@@ -486,10 +486,20 @@
     TailAfterWindowShow = false;
     // 船只场景id
     ship_guid = '';
-    //新增船只是否显示轨迹
-    isShowTrack = true;
+    //新增船只是否显示轨迹（雷达）
+    isShowRadarTrack = true;
+    //新增船只是否显示轨迹（AIS）
+    isShowAISTrack = true;
+    //新增船只是否显示轨迹（融合）
+    isShowMixTrack = true;
+    // 新增船只是否显示模型（雷达）
+    isShowRadarShip = true;
+    // 新增船只是否显示模型（AIS）
+    isShowAISShip = true;
+    // 新增船只是否显示模型（融合）
+    isShowMixShip = true;
     // 信息框的标题
-    windowTitle = 'AIS信息';
+    windowTitle = '';
     // 添加地图上的鼠标监听事件
     // pin: any = undefined;
     // viewer: any = undefined;
@@ -1155,19 +1165,34 @@
             this.clearAlarmModel(eventSerialNum);
           }
         });
+        // 监听开关轨迹按钮状态
+        $mitt.on('trackAllChange', (data: any) => {
+          if (data.type == 'radar') {
+            this.isShowRadarTrack = data.status;
+          } else if (data.type == 'ais') {
+            this.isShowAISTrack = data.status;
+          } else {
+            this.isShowMixTrack = data.status;
+          }
+        });
+        $mitt.on('shipAllChange', (data: any) => {
+          if (data.type == 'radar') {
+            this.isShowRadarShip = data.status;
+          } else if (data.type == 'ais') {
+            this.isShowAISShip = data.status;
+          } else {
+            this.isShowMixShip = data.status;
+          }
+        });
         // 监听mqtt消息
         $mitt.on('deviceCmd', (message: any) => {
           let data = JSON.parse(message);
-          // 监听开关轨迹按钮状态
-          $mitt.on('trackAllChange', (data: any) => {
-            this.isShowTrack = data.status;
-          });
           // 绘制雷达船只
-          drawRadarShipsList(data, this.isShowTrack);
+          drawRadarShipsList(data, this.isShowRadarTrack, this.isShowRadarShip);
           // 绘制AIS船只
-          drawAISShipsList(data, this.isShowTrack);
+          drawAISShipsList(data, this.isShowAISTrack, this.isShowAISShip);
           // 绘制融合船只
-          drawMixShipsList(data, this.isShowTrack);
+          drawMixShipsList(data, this.isShowMixTrack, this.isShowMixShip);
         });
       }
     }
diff --git a/vite.config.ts b/vite.config.ts
index 7a6e888..88aab74 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -72,7 +72,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
     },
     build: {
       minify: 'esbuild',
-      target: 'es2015',
+      target: 'es2020',
       cssTarget: 'chrome80',
       outDir: OUTPUT_DIR,
       terserOptions: {