From 2c885ab604a04b4a3708e596821708ccd02fc863 Mon Sep 17 00:00:00 2001
From: Fuyuu <1805498209@qq.com>
Date: Tue, 9 Jan 2024 11:37:06 +0800
Subject: [PATCH] =?UTF-8?q?1=E3=80=81=E4=BF=AE=E6=94=B9=E7=9B=91=E6=8E=A7?=
 =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E5=AE=9A=E4=B9=89=E7=9B=91=E6=8E=A7=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E5=B0=BA=E5=AF=B8=E4=B8=BA1280*720?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

2、添加ais信息轨迹显隐
---
 src/components/earthMap/AISInfoWindow.vue     |  39 +--
 src/utils/earthMap/shipDraw.ts                |  11 +-
 src/views/earthMap/edit/EarthComp.vue         | 254 +++++++++---------
 .../ai/aiMonitorArea/checkCom/CheckCom.vue    |  12 +-
 .../ai/aiMonitorArea/selectCom/SelectCom.vue  |  11 +-
 .../aiMonitorArea/selectCom/assets/hide.png   | Bin 2558 -> 3703 bytes
 6 files changed, 165 insertions(+), 162 deletions(-)

diff --git a/src/components/earthMap/AISInfoWindow.vue b/src/components/earthMap/AISInfoWindow.vue
index 4c19997..50fdc23 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-08 17:41:07
+ * @LastEditTime: 2024-01-09 11:14:45
  * @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
 -->
@@ -102,7 +102,7 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, getCurrentInstance, ref, onMounted, nextTick } from 'vue';
+  import { defineComponent, getCurrentInstance, ref, watch } from 'vue';
   import Window from '@/components/earthMap/components/Window.vue';
   import { useEarthMapStore } from '/@/store/modules/earthMap';
   // 暂存store
@@ -122,13 +122,27 @@
     components: {
       Window,
     },
-    setup(props, context) {
+    setup() {
       const { proxy }: any = getCurrentInstance();
+      // 打开状态
       const checked = ref(false);
-      // 船只数据列表
-      let shipDataList: any = [];
       // 获取store中的船只数据列表
-      shipDataList = store.shipDataList;
+      let foundData = store.shipDataList.filter((item) => item.guid === proxy.ship_guid);
+      // 轨迹线id
+      let track_guid = foundData ? foundData[0].track_guid : null;
+      // 轨迹线数据
+      let trackData = window.$earth.getObject(track_guid);
+      // 初始化打开状态
+      checked.value = trackData.show;
+
+      // 监听船只guid变化，更新信息
+      watch(
+        () => proxy.ship_guid,
+        (newVal, oldVal) => {
+          console.log(newVal);
+        },{immediate : true}
+      );
+
       // 关闭弹窗
       function cancel() {
         proxy.$parent.AISInfoWindowShow = false;
@@ -136,18 +150,9 @@
       // 打开或关闭轨迹
       function changeTrack(e) {
         checked.value = e;
-        // 当前选中船只
-        let shipData = window.$earth.getObject(proxy.ship_guid);
-        // 打开轨迹
-        if (e) {
-          console.log(shipData);
-        } else {
-          console.log(shipData);
-        }
+        // 使用show字段控制轨迹显隐
+        trackData.show = e;
       }
-      onMounted(() => {
-        console.log(proxy.ship_guid);
-      });
 
       return {
         checked,
diff --git a/src/utils/earthMap/shipDraw.ts b/src/utils/earthMap/shipDraw.ts
index 8970cee..4770170 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-08 15:05:38
+ * @LastEditTime: 2024-01-09 10:35:50
  * @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
  */
@@ -29,7 +29,7 @@ const drawShips = function (shipItem) {
     id: shipItem.trackId,
     url: window._CONFIG['domianURL'] + '/sys/common/static/tongyongchuan.gltf',
     position: [toRadians(shipItem.longitude), toRadians(shipItem.latitude), 0],
-    rotation: [toRadians(shipItem.course), 0, 0],
+    rotation: [(Math.PI / 180) * (shipItem.course + 90), 0, 0],
   };
   // 绘制船只
   let shipModel = addShipModel(`${shipItem.trackId}号船`, options);
@@ -52,27 +52,24 @@ export const drawAllShips = function (message) {
   let existingShip = shipDataList.find((shipItem) => shipItem.trackId === messageData.trackId);
   if (existingShip) {
     // 添加新的轨迹点
-    existingShip.trackList.push([toRadians(messageData.longitude), toRadians(messageData.latitude), 0]);
+    window.$earth.getObject(existingShip.track_guid).positions.push([toRadians(messageData.longitude), toRadians(messageData.latitude), 0]);
     // 获取场景中的船只信息
     let shipData = window.$earth.getObject(existingShip.guid);
-
     // 更新位置和航向
     shipData.xbsjPosition = [toRadians(messageData.longitude), toRadians(messageData.latitude), 0];
     // 航向需要后续调整。。。
     shipData.xbsjRotation = [(Math.PI / 180) * (messageData.course + 90), 0, 0];
-    // 绘制船只轨迹
-    addShipTrack(existingShip.trackList);
   } else {
     // 添加新的船只
     shipDataList.push({
       name: `${messageData.trackId}号船只`, // 名称
       trackId: messageData.trackId, // 船只id
       guid: drawShips(messageData).xbsjGuid, // 船只模型id
+      track_guid: addShipTrack([[toRadians(messageData.longitude), toRadians(messageData.latitude), 0]]).xbsjGuid, // 轨迹线guid，用于轨迹显隐
       azimuth: messageData.azimuth, // 方位角
       course: messageData.course, // 航向
       latitude: messageData.latitude, // 纬度
       longitude: messageData.longitude, // 经度
-      trackList: [[toRadians(messageData.longitude), toRadians(messageData.latitude), 0]], // 轨迹列表
     });
     // 更新store
     store.shipDataList = shipDataList;
diff --git a/src/views/earthMap/edit/EarthComp.vue b/src/views/earthMap/edit/EarthComp.vue
index 5762db4..83d302d 100644
--- a/src/views/earthMap/edit/EarthComp.vue
+++ b/src/views/earthMap/edit/EarthComp.vue
@@ -84,7 +84,7 @@
     ></AddModelWin>
     <AddRoamVideo v-if="addRoamVideoShow"></AddRoamVideo>
     <!-- AIS信息显示窗口 -->
-    <AISInfoWindow v-if="AISInfoWindowShow"></AISInfoWindow>
+    <AISInfoWindow v-if="AISInfoWindowShow" :ship_guid="ship_guid" :ship_aisData="ship_aisData"></AISInfoWindow>
   </div>
 </template>
 
@@ -117,15 +117,14 @@
   import hidePng from '@/assets/earthMap/hide.png';
   import alarmImg from '@/assets/earthMap/alarm.gif';
   import VideoFusionWin from './components/VideoFusionWin.vue';
-  import { useMessage } from "/@/hooks/web/useMessage";
-  import { CircleScan }  from '@/utils/earthMap/radarEntity'
-  import { radianToDegreeInLngLatHeight } from '@/utils/earthMap/earth'
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { CircleScan } from '@/utils/earthMap/radarEntity';
+  import { radianToDegreeInLngLatHeight } from '@/utils/earthMap/earth';
 
   import circleDot2 from '@/assets/earthMap/circleDot2.png';
   import circleDot1 from '@/assets/earthMap/circleDot1.png';
   import circleDot3 from '@/assets/earthMap/circleDot3.png';
 
- 
   const { createMessage } = useMessage();
   function setClassEl(setClassEl1, setClassEl2, checked) {
     if (checked) {
@@ -143,7 +142,6 @@
     setClassEl2.className = 'xbsj-checkbox xbsj-checkbox-checked';
   }
 
-
   function setClassNoChecked(setClassEl1, setClassEl2) {
     // node.checkStatus = ''
     // node.disabled = 'disabled'
@@ -206,72 +204,72 @@
       AISInfoWindow,
     },
     props: {
-    //全部显示
-    all: {
-      type: Boolean,
-      default: false
-    },
-    //头部显示
-    earthHeaderShow: {
-      type: Boolean,
-      default: false
-    },
-    //图层显示
-    sceneTreeShow:{
-      type: Boolean,
-      default: false
-    },
-    //状态栏
-    statusBarShow:{
-      type: Boolean,
-      default: true
-    },
-    //主工具栏
-    mainBar:{
-      type: Boolean,
-      default: false
-    },
-    //监听事件
-    listenMouseHandlerOpen:{
-      type: Boolean,
-      default: false
-    },
-    //监听mitt
-    listenMittHandlerOpen:{
-      type: Boolean,
-      default: false
-    },
-    //地图路线资源
-    createBBHLineOpen:{
-      type: Boolean,
-      default: false
-    },
-    //加载区域
-    getLineInfoShow:{
-      type: Boolean,
-      default: false
-    },
-    //加载站点
-    getCameraInfoShow:{
-      type: Boolean,
-      default: false
-    },
-    //加载微波和雷达
-    getLabelInfoShow:{
-      type: Boolean,
-      default: false
-    },
-    //加载绘图
-    drawInitShow:{
-      type: Boolean,
-      default: false
-    },
-    //加载重点监控区域
-    keyControlInitShow:{
-      type: Boolean,
-      default: false
+      //全部显示
+      all: {
+        type: Boolean,
+        default: false,
+      },
+      //头部显示
+      earthHeaderShow: {
+        type: Boolean,
+        default: false,
+      },
+      //图层显示
+      sceneTreeShow: {
+        type: Boolean,
+        default: false,
+      },
+      //状态栏
+      statusBarShow: {
+        type: Boolean,
+        default: true,
+      },
+      //主工具栏
+      mainBar: {
+        type: Boolean,
+        default: false,
+      },
+      //监听事件
+      listenMouseHandlerOpen: {
+        type: Boolean,
+        default: false,
+      },
+      //监听mitt
+      listenMittHandlerOpen: {
+        type: Boolean,
+        default: false,
+      },
+      //地图路线资源
+      createBBHLineOpen: {
+        type: Boolean,
+        default: false,
+      },
+      //加载区域
+      getLineInfoShow: {
+        type: Boolean,
+        default: false,
+      },
+      //加载站点
+      getCameraInfoShow: {
+        type: Boolean,
+        default: false,
+      },
+      //加载微波和雷达
+      getLabelInfoShow: {
+        type: Boolean,
+        default: false,
+      },
+      //加载绘图
+      drawInitShow: {
+        type: Boolean,
+        default: false,
+      },
+      //加载重点监控区域
+      keyControlInitShow: {
+        type: Boolean,
+        default: false,
+      },
     },
-},
   })
   export default class EarthComp extends Vue {
     /**
@@ -417,20 +415,23 @@
     monitorPosition: any = [];
 
     //处理props  由于从父组件传来props，为作区分其他变量，则采用首字母大写命名
-    PropsEarthHeaderShow = this.earthHeaderShow
-    PropsSceneTreeShow = this.sceneTreeShow
-    PropsListenMouseHandlerOpen = this.listenMouseHandlerOpen
-    PropsListenMittHandlerOpen = this.listenMittHandlerOpen
-    PropsCreateBBHLineOpen = this.createBBHLineOpen
-    PropsGetLineInfoShow = this.getLineInfoShow
-    PropsGetCameraInfoShow = this.getCameraInfoShow
-    PropsGetLabelInfoShow = this.getLabelInfoShow
-    PropsDrawInitShow = this.drawInitShow
-    PropsKeyControlInitShow = this.keyControlInitShow
+    PropsEarthHeaderShow = this.earthHeaderShow;
+    PropsSceneTreeShow = this.sceneTreeShow;
+    PropsListenMouseHandlerOpen = this.listenMouseHandlerOpen;
+    PropsListenMittHandlerOpen = this.listenMittHandlerOpen;
+    PropsCreateBBHLineOpen = this.createBBHLineOpen;
+    PropsGetLineInfoShow = this.getLineInfoShow;
+    PropsGetCameraInfoShow = this.getCameraInfoShow;
+    PropsGetLabelInfoShow = this.getLabelInfoShow;
+    PropsDrawInitShow = this.drawInitShow;
+    PropsKeyControlInitShow = this.keyControlInitShow;
     ///////////////////////////////////////////////////////////////////////////
     //AIS信息窗口显示
     AISInfoWindowShow = false;
+    // 船只guid
     ship_guid = '123456';
+    // 船只ais信息
+    ship_aisData = {};
 
     mounted() {
       let that = this;
@@ -480,7 +481,7 @@
         });
       }
     }
-    
+
     // 打开视频融合
     roamPathSet() {
       // 打开视频融合
@@ -552,19 +553,19 @@
       let that = this;
       //使用store存储XbsjEarthUI
       this.store.xbsjEarthUI = XbsjEarthUI;
-    //处理props
-    if(this.all){
-      this.PropsEarthHeaderShow = true
-      this.PropsSceneTreeShow = true
-      this.PropsListenMouseHandlerOpen = true
-      this.PropsListenMittHandlerOpen = true
-      this.PropsCreateBBHLineOpen = true
-      this.PropsGetLineInfoShow = true
-      this.PropsGetCameraInfoShow = true
-      this.PropsGetLabelInfoShow = true
-      this.PropsDrawInitShow = true
-      this.PropsKeyControlInitShow = true
-     }
+      //处理props
+      if (this.all) {
+        this.PropsEarthHeaderShow = true;
+        this.PropsSceneTreeShow = true;
+        this.PropsListenMouseHandlerOpen = true;
+        this.PropsListenMittHandlerOpen = true;
+        this.PropsCreateBBHLineOpen = true;
+        this.PropsGetLineInfoShow = true;
+        this.PropsGetCameraInfoShow = true;
+        this.PropsGetLabelInfoShow = true;
+        this.PropsDrawInitShow = true;
+        this.PropsKeyControlInitShow = true;
+      }
       XbsjEarthUI.create('earthContainer').then(async (earthUI: any) => {
         // 设置全局变量，可调试
         window.$uia = earthUI;
@@ -670,23 +671,20 @@
           this.cameraPositionChange(this);
         });
 
-      //加载地图实时资源（无人机、车辆、人员、巡逻路线等）
-      // this.createRealTimeObj(earthUI)
+        //加载地图实时资源（无人机、车辆、人员、巡逻路线等）
+        // this.createRealTimeObj(earthUI)
 
-      //监听鼠标事件
-      if (this.PropsListenMouseHandlerOpen)
-        this.listenMouseHandler(earthUI);
+        //监听鼠标事件
+        if (this.PropsListenMouseHandlerOpen) this.listenMouseHandler(earthUI);
 
-      //监听mitt
-      if (this.PropsListenMittHandlerOpen)
-        this.listenMittHandler(earthUI);
+        //监听mitt
+        if (this.PropsListenMittHandlerOpen) this.listenMittHandler(earthUI);
 
-      // 飞入方法
-      await this.fly();
+        // 飞入方法
+        await this.fly();
 
-      //加载地图线路资源
-      if (this.PropsCreateBBHLineOpen)
-        await this.createBBHLine(earthUI);
+        //加载地图线路资源
+        if (this.PropsCreateBBHLineOpen) await this.createBBHLine(earthUI);
 
         //创建工具栏
         this.toolbarShow = true;
@@ -794,7 +792,7 @@
     /* 使用async/await 处理异步方法顺序执行。成功的操作放到try里，失败的放在catch里 */
     async createBBHLine(earthUI = null) {
       console.log('MyScene', this.userStore.userInfo?.sceneId);
-      let labelItems: any = undefined
+      let labelItems: any = undefined;
       let type = 1; //**
 
       let models: any = {
@@ -819,26 +817,21 @@
 
       // 加载区域
       // console.log("加载区域");
-      if (this.PropsGetLineInfoShow)
-        await this.getLineInfo(models, type);
+      if (this.PropsGetLineInfoShow) await this.getLineInfo(models, type);
 
       // 加载站点
       // console.log("加载站点");
-      if (this.PropsGetCameraInfoShow)
-        await this.getCameraInfo(models, type);
+      if (this.PropsGetCameraInfoShow) await this.getCameraInfo(models, type);
 
       // 加载雷达和微波
       // console.log("加载雷达和微波");
-      if (this.PropsGetLabelInfoShow)
-        labelItems = await this.getLabelInfo(models, type);
+      if (this.PropsGetLabelInfoShow) labelItems = await this.getLabelInfo(models, type);
 
-       //加载绘画资源
-    if (this.PropsDrawInitShow)
-      await drawInit();
+      //加载绘画资源
+      if (this.PropsDrawInitShow) await drawInit();
 
       //加载重点监控区域
-    if (this.PropsKeyControlInitShow)
-      await keyControlInit();
+      if (this.PropsKeyControlInitShow) await keyControlInit();
 
       // 监听树的dom节点变化
       // console.log("监听树的dom节点变化");
@@ -3258,7 +3251,7 @@
                         createMessage.success('克隆成功');
                       } else {
                         newSn.parent.children.splice(index, 1);
-                        createMessage.error('克隆成功:'+ res.message);
+                        createMessage.error('克隆成功:' + res.message);
                       }
                     });
                 })
@@ -3309,7 +3302,7 @@
                         createMessage.success('克隆成功');
                       } else {
                         newSn.parent.children.splice(index, 1);
-                        createMessage.error('克隆失败'+ res.message);
+                        createMessage.error('克隆失败' + res.message);
                       }
                     })
                     .catch((err) => {
@@ -4209,8 +4202,8 @@
     // 资源销毁
     beforeDestroy() {
       // vue程序销毁时，需要清理相关资源
-      console.log("vue程序销毁");
-      
+      console.log('vue程序销毁');
+
       this._earth = this._earth && this._earth.destroy();
       this.websocketclose();
       //清除定时器
@@ -4219,11 +4212,10 @@
       clearInterval(this.alarmTrackClearTimer);
     }
     // 资源销毁
-    destroy(){
-       // vue程序销毁时，需要清理相关资源
-       console.log("vue程序销毁",this._earth);
-      
-      
+    destroy() {
+      // vue程序销毁时，需要清理相关资源
+      console.log('vue程序销毁', this._earth);
+
       // this.websocketclose();
       //清除定时器
       clearInterval(this.timer);
@@ -4231,8 +4223,8 @@
       clearInterval(this.alarmTrackClearTimer);
       // window.$uia.tools.sceneTree.destroy()
       // this._earth = this._earth && this._earth.destroy();
-      //利用store.xbsjEarthUI 重新赋值 window.XbsjEarthUI 
-      window.XbsjEarthUI = this.store.xbsjEarthUI
+      //利用store.xbsjEarthUI 重新赋值 window.XbsjEarthUI
+      window.XbsjEarthUI = this.store.xbsjEarthUI;
       this._earth = undefined;
     }
   }
diff --git a/src/views/military/modules/ai/aiMonitorArea/checkCom/CheckCom.vue b/src/views/military/modules/ai/aiMonitorArea/checkCom/CheckCom.vue
index d5ca818..4c61394 100644
--- a/src/views/military/modules/ai/aiMonitorArea/checkCom/CheckCom.vue
+++ b/src/views/military/modules/ai/aiMonitorArea/checkCom/CheckCom.vue
@@ -1,3 +1,11 @@
+<!--
+ * @Author: Fuyuu 1805498209@qq.com
+ * @Date: 2023-12-22 15:41:28
+ * @LastEditors: Fuyuu 1805498209@qq.com
+ * @LastEditTime: 2024-01-09 11:34:20
+ * @FilePath: \dt-admin-pc-v2\src\views\military\modules\ai\aiMonitorArea\checkCom\CheckCom.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
 <!-- 
   查看监控
 
@@ -5,7 +13,7 @@
   功能概述：rtsp视频流播放
  -->
 <template>
-  <a-modal :visible="visible" :title="title" width="1080px" @cancel="handleCancel" destroyOnClose>
+  <a-modal :visible="visible" :title="title" width="1280px" @cancel="handleCancel" destroyOnClose style="top: 90px !important">
     <a-row>
       <div class="mpegPlayer" ref="mpegPlayer"></div>
     </a-row>
@@ -72,7 +80,7 @@
 <style lang="less" scoped>
   .mpegPlayer {
     width: 100%;
-    height: 580px;
+    height: 720px;
     background: #000;
   }
 </style>
diff --git a/src/views/military/modules/ai/aiMonitorArea/selectCom/SelectCom.vue b/src/views/military/modules/ai/aiMonitorArea/selectCom/SelectCom.vue
index d57deb6..b62c23f 100644
--- a/src/views/military/modules/ai/aiMonitorArea/selectCom/SelectCom.vue
+++ b/src/views/military/modules/ai/aiMonitorArea/selectCom/SelectCom.vue
@@ -11,9 +11,10 @@
     :forceRender="true"
     :visible="visible"
     :title="title"
-    width="1080px"
+    width="1280px"
     @cancel="handleCancel"
     destroyOnClose
+    style="top: 40px !important"
   >
     <a-row class="video_area">
       <canvas ref="canvas" class="container"></canvas>
@@ -346,20 +347,20 @@
 <style lang="less" scoped>
   .video_area {
     width: 100%;
-    height: 580px;
+    height: 720px;
     margin: 0 auto;
     position: relative;
     background: #000;
     .container {
-      width: 1080px;
-      height: 580px;
+      width: 1280px;
+      height: 100%;
       position: absolute;
       z-index: 9999;
       left: 0;
       top: 0;
     }
     .mpegPlayer {
-      width: 100%;
+      width: 1280px;
       height: 100%;
       background: #000;
     }
diff --git a/src/views/military/modules/ai/aiMonitorArea/selectCom/assets/hide.png b/src/views/military/modules/ai/aiMonitorArea/selectCom/assets/hide.png
index d7579c33c88770d35bb5fa944e555b1471f4b6b6..7ef50cacf7e66dee6b3dca9e1362c115c41b39e3 100644
GIT binary patch
delta 97
zcmew-{9Q(|Gr-TCmrII^fq{Y7)59f*fq@msWV*n?2Bgl{-VK|mXd=$X<LTlUQW5v|
wU?WhJ;qZc=!SN3nLN^wcac*p=V-Y{FlFdzmfw4ta>=H=c)78&qol`;+0Qc$}y#N3J

delta 93
zcmew^^G{f@Gr-TCmrII^fq{Y7)59f*fq}(>fq}_|gAFM1Sz!wQL`4&E&dHuGjv*Cs
uZx1r^0)-DP`0k&}&(5;3u$oi+z)mUqe+-QLDNM_NQVgE1elF{r5}E)lbQpjD