修改信息窗口数据不刷新bug

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 @@
   <div class="shipInfo">
     <Window
       :title="title"
-      :width="600"
+      :width="280"
-      :minWidth="600"
+      :minWidth="280"
-      :height="420"
+      :height="700"
-      :left="80"
+      :right="0"
-      :top="70"
+      :top="0"
       @cancel="cancel"
-      :floatright="false"
+      :floatright="true"
       :showCancelButton="true"
       :footervisible="false"
       :showcloseButton="true"
       id="aisInfoWindow"
+      class="fuckWindow"
     >
       <div class="ais_content" v-if="title.includes('AIS')">
         <div class="content_item">
-          <div class="item_title">船名:</div>
+          <div class="item_title">船名：</div>
           <div class="item_content">{{ infoData.name }}</div>
         </div>
         <div class="content_item">
-          <div class="item_title">MMSI:</div>
+          <div class="item_title">MMSI：</div>
           <div class="item_content">{{ infoData.mmsi }}</div>
         </div>
         <div class="content_item">
-          <div class="item_title">船首向:</div>
+          <div class="item_title">船首向：</div>
           <div class="item_content">未知</div>
         </div>
         <div class="content_item">
-          <div class="item_title">呼号:</div>
+          <div class="item_title">呼号：</div>
           <div class="item_content">未知</div>
         </div>
         <div class="content_item">
-          <div class="item_title">航迹向:</div>
+          <div class="item_title">航迹向：</div>
           <div class="item_content">未知</div>
         </div>
         <div class="content_item">
-          <div class="item_title">IMO:</div>
+          <div class="item_title">IMO：</div>
           <div class="item_content">{{ infoData.imo }}</div>
         </div>
         <div class="content_item">
-          <div class="item_title">航速:</div>
+          <div class="item_title">航速：</div>
           <div class="item_content">0.2节</div>
         </div>
         <div class="content_item">
-          <div class="item_title">经度:</div>
+          <div class="item_title">经度：</div>
           <div class="item_content">{{ infoData.longitude }}</div>
         </div>
         <div class="content_item">
-          <div class="item_title">纬度:</div>
+          <div class="item_title">纬度：</div>
           <div class="item_content">{{ infoData.latitude }}</div>
         </div>
         <div class="content_item">
-          <div class="item_title">状态:</div>
+          <div class="item_title">状态：</div>
           <div class="item_content">锚泊</div>
         </div>
         <div class="content_item">
-          <div class="item_title">类型:</div>
+          <div class="item_title">类型：</div>
           <div class="item_content">货船</div>
         </div>
         <div class="content_item">
-          <div class="item_title">船长/宽:</div>
+          <div class="item_title">船长/宽：</div>
           <div class="item_content">89米/20米</div>
         </div>
         <div class="content_item">
-          <div class="item_title">目的地:</div>
+          <div class="item_title">目的地：</div>
           <div class="item_content">JIANGMEN,CN</div>
         </div>
         <div class="content_item">
-          <div class="item_title">吃水:</div>
+          <div class="item_title">吃水：</div>
           <div class="item_content">3.8米</div>
         </div>
         <div class="content_item">
-          <div class="item_title">国籍:</div>
+          <div class="item_title">国籍：</div>
           <div class="item_content">CN</div>
         </div>
         <div class="content_item">
-          <div class="item_title">预到时间:</div>
+          <div class="item_title">预到时间：</div>
           <div class="item_content">2024-01-08 17:00:00</div>
         </div>
         <div class="content_item">
-          <div class="item_title">更新时间:</div>
+          <div class="item_title">更新时间：</div>
           <div class="item_content"> 2024-01-08 14:40:11</div>
         </div>
       </div>
       <div class="radar_content" v-if="title.includes('雷达')">
         <div class="content_item">
-          <div class="item_title">雷达ID:</div>
+          <div class="item_title">目标号：</div>
+          <div class="item_content">{{ infoData.trackId }}</div>
+        </div>
+        <div class="content_item">
+          <div class="item_title">雷达编号：</div>
           <div class="item_content">{{ infoData.radarId }}</div>
         </div>
         <div class="content_item">
-          <div class="item_title">时间:</div>
+          <div class="item_title">时间：</div>
           <div class="item_content">{{ infoData.timestamp }}</div>
         </div>
         <div class="content_item">
-          <div class="item_title">距离:</div>
+          <div class="item_title">距离：</div>
           <div class="item_content">{{ infoData.dis }}m</div>
         </div>
         <div class="content_item">
-          <div class="item_title">方位角:</div>
+          <div class="item_title">方位角：</div>
           <div class="item_content">{{ infoData.azimuth }}°</div>
         </div>
         <div class="content_item">
-          <div class="item_title">速度:</div>
+          <div class="item_title">速度：</div>
           <div class="item_content">{{ infoData.speed }}m/s</div>
         </div>
         <div class="content_item">
-          <div class="item_title">航向:</div>
+          <div class="item_title">航向：</div>
           <div class="item_content">{{ infoData.course }}°</div>
         </div>
         <div class="content_item">
-          <div class="item_title">经度:</div>
+          <div class="item_title">经度：</div>
           <div class="item_content">{{ infoData.longitude }}</div>
         </div>
         <div class="content_item">
-          <div class="item_title">纬度:</div>
+          <div class="item_title">纬度：</div>
           <div class="item_content">{{ infoData.latitude }}</div>
         </div>
         <div class="content_item">
-          <div class="item_title">海拔:</div>
+          <div class="item_title">海拔：</div>
           <div class="item_content">{{ infoData.altitude }}m</div>
         </div>
         <div class="content_item">
-          <div class="item_title">类型:</div>
+          <div class="item_title">类型：</div>
           <div class="item_content">{{ infoData.type }}</div>
         </div>
       </div>
       <div class="opera_content">
         <!-- 轨迹显示 -->
         <div class="content_item">
-          <div class="item_title">航行轨迹:</div>
+          <div class="item_title">航行轨迹：</div>
           <a-switch v-model:checked="checked" @change="changeTrack" />
         </div>
         <!-- 跟踪船只 -->
         <div class="content_item">
-          <div class="item_title">跟踪船只:</div>
+          <!-- <div class="item_title">跟踪船只:</div> -->
-          <a-button size="small" type="primary" @click="tailAfter()">
+          <a-button class="tail_button" size="small" type="primary" @click="tailAfter()">
             跟踪
             <EyeOutlined />
           </a-button>
@@ -154,13 +159,11 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, getCurrentInstance, ref, watch } from 'vue';
+  import { defineComponent, getCurrentInstance, ref, watch, onMounted, onUnmounted, nextTick } from 'vue';
   import Window from '@/components/earthMap/components/Window.vue';
   import { useEarthMapStore } from '/@/store/modules/earthMap';
   import $mitt from '@/utils/earthMap/mitt';
   import { EyeOutlined } from '@ant-design/icons-vue';
-  import { defHttp } from '/@/utils/http/axios';
-  import { info } from 'console';
 
   export default defineComponent({
     name: 'AISInfoWindow',
@@ -226,46 +229,38 @@
       // 关闭弹窗
       function cancel() {
         proxy.$parent.AISInfoWindowShow = false;
+        // 同时打开场景树结构
+        window.$uia.tools.sceneTree.show = true;
       }
       // 打开或关闭轨迹
       function changeTrack(e) {
         checked.value = e;
-        // 使用show字段控制轨迹显隐
+        // 使用show字段控制轨迹显隐+
         trackData.value.show = e;
       }
       // 跟踪船只
       function tailAfter() {
+        // 通过mqtt发送跟踪船只的信息
+        let mqttClient = window.mqttClient;
+        // 设置跟踪状态 1-跟踪 0-停止跟踪
+        infoData.value.trackStatus = 1;
+        // 发布订阅
+        mqttClient.publish('/trackTarget', JSON.stringify(infoData.value));
         // 打开光电跟踪窗口
         proxy.$parent.TailAfterWindowShow = true;
+        // 关闭当前窗口
+        proxy.$parent.AISInfoWindowShow = false;
+      }
+      // 取消跟踪
+      function cancelTailAfter() {
         // 通过mqtt发送跟踪船只的信息
         let mqttClient = window.mqttClient;
         // 设置跟踪状态 1-跟踪 0-停止跟踪
-        infoData.value.trackStatus = 1;
+        infoData.value.trackStatus = 0;
         // 发布订阅
         mqttClient.publish('/trackTarget', JSON.stringify(infoData.value));
       }
-      // 监听轨迹线变化
+
-      $mitt.on('trackChange', (e: boolean) => {
-        // 当前船只轨迹线状态
-        if (trackData.value.name.includes(e)) {
-          checked.value = false;
-        }
-      });
-      // 监听开关轨迹变化
-      $mitt.on('trackAllChange', (data: any) => {
-        if (trackData.value.name.includes(data.type)) {
-          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,
@@ -276,42 +271,94 @@
         { immediate: true }
       );
 
+      /**
+       * 时间戳转化为年月日时分秒
+       * @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;
+      }
+
+      onMounted(() => {
+        // 监听轨迹线变化
+        $mitt.on('trackChange', (e: boolean) => {
+          // 当前船只轨迹线状态
+          if (trackData.value.name.includes(e)) {
+            checked.value = false;
+          }
+        });
+        // 监听开关轨迹变化
+        $mitt.on('trackAllChange', (data: any) => {
+          if (trackData.value.name.includes(data.type)) {
+            checked.value = data.status;
+          }
+        });
+        // 实时监听船只信息变化（雷达）
+        $mitt.on('deviceCmd', (message: any) => {
+          let data = JSON.parse(message).radarTrack;
+          data.timestamp = toStringTime(data.timestamp);
+          if (data.trackId == trackId.value) {
+            if (proxy.title.includes('雷达')) {
+              infoData.value = data;
+            }
+          }
+        });
+        /**
+         * 后续补充监听AIS数据、融合数据
+         */
+      });
+
       return {
         checked,
         infoData,
         cancel,
         changeTrack,
         tailAfter,
+        cancelTailAfter,
       };
     },
   });
 </script>
 
 <style lang="less" scoped>
-  #aisInfoWindow .xbsj-model-header .xbsj-model-arrow {
+  .fuckWindow {
-    right: 25px;
+    width: 280px !important;
+    left: calc(100% - 280px) !important;
+    top: 6px !important;
   }
-
   .ais_content,
   .radar_content,
   .opera_content {
-    width: 95%;
+    width: 100%;
-    margin: 0 auto;
+    // margin: 0 auto;
-    display: flex;
-    flex-direaction: row;
     flex-wrap: wrap;
+    font-size: 14px;
     .content_item {
-      width: 50%;
+      width: 100%;
-      margin: 6px 0;
+      margin: 10px 0;
       display: flex;
       flex-direaction: row;
-      font-size: 14px;
+      .tail_button {
+        width: 100%;
+        height: 26px;
+      }
+
       .item_title {
         color: #fff;
-        margin-right: 4px;
+        // margin-right: 12px;
       }
       .item_content {
         color: #00ffe4;
+        // font-weight: bold;
       }
     }
   }

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-25 16:16:00
+ * @LastEditTime: 2024-01-30 15:22:48
  * @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
 -->
@@ -10,43 +10,86 @@
   <div class="TailAfter">
     <Window
       :title="title"
-      :width="1280"
+      :width="280"
-      :minWidth="1280"
+      :minWidth="280"
-      :height="780"
+      :height="700"
-      :left="100"
+      :right="0"
-      :top="60"
+      :top="0"
       @cancel="cancel"
       :floatright="false"
       :showCancelButton="true"
       :footervisible="false"
       :showcloseButton="true"
       id="tailAfterWindow"
+      class="tailAfterWindow"
     >
-      <div class="mpegPlayer"></div>
+      <div class="tail_title">
+        <div class="title_content">
+          <div class="name">名称：</div>
+          <div class="content">{{ tailAfterInfo.deviceName || '正在分析...' }}</div>
+        </div>
+        <div class="title_content">
+          <div class="name">类型：</div>
+          <div class="content">{{
+            (tailAfterInfo.deviceType ? (tailAfterInfo.deviceType == 2 ? '光电仪' : '其他设备') : '正在分析...') || '正在分析...'
+          }}</div>
+        </div>
+        <div class="title_content">
+          <div class="name">状态：</div>
+          <div class="content">{{
+            (tailAfterInfo.deviceStatus ? (tailAfterInfo.deviceStatus == 1 ? '正常' : '故障') : '正在分析...') || '正在分析...'
+          }}</div>
+        </div>
+        <div class="title_content">
+          <div class="name">经度：</div>
+          <div class="content">{{ tailAfterInfo.longitude || '正在分析...' }}</div>
+        </div>
+        <div class="title_content">
+          <div class="name">纬度：</div>
+          <div class="content">{{ tailAfterInfo.latitude || '正在分析...' }}</div>
+        </div>
+      </div>
+      <div class="mpegPlayer">
+        暂无视频
+      </div>
     </Window>
   </div>
 </template>
 <script lang="ts" setup>
-  import { getCurrentInstance, onMounted, onUnmounted } from 'vue';
+  import { getCurrentInstance, onMounted, onUnmounted, ref } from 'vue';
   import Window from '@/components/earthMap/components/Window.vue';
   import $mitt from '@/utils/earthMap/mitt';
-  const props = defineProps({
+  defineProps({
     title: {
       type: String,
       default: '光电跟踪',
     },
+    last_title: {
+      type: String,
+      default: '',
+    },
+    ship_guid: {
+      type: String,
+      default: '',
+    },
   });
   const { proxy }: any = getCurrentInstance();
 
+  // 当前跟踪设备信息
+  const tailAfterInfo: any = ref({});
+
   // 关闭弹窗
   function cancel() {
+    // 关闭当前弹窗
     proxy.$parent.TailAfterWindowShow = false;
+    // 重新打开原信息窗口
+    proxy.$parent.AISInfoWindowShow = true;
   }
 
   onMounted(() => {
     // 监听光电跟踪分析
     $mitt.on('tailAfterRtsp', (message: any) => {
-      console.log('光电跟踪信息', message);
+      tailAfterInfo.value = JSON.parse(message);
     });
   });
 
@@ -59,9 +102,33 @@
   #tailAfterWindow .xbsj-model-header .xbsj-model-arrow {
     right: 25px;
   }
+  .tailAfterWindow {
+    width: 280px !important;
+    left: calc(100% - 280px) !important;
+    top: 6px !important;
+    .tail_title {
+      width: 100%;
+      .title_content {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        margin: 10px 0;
+        .name {
+          color: #fff;
+        }
+        .content {
+          color: #00ffe4;
+        }
+      }
+    }
+  }
   .mpegPlayer {
     width: 100%;
-    height: 720px;
+    height: 180px;
     background: #000;
+    color: #fff;
+    font-size: 26px;
+    text-align: center;
+    line-height: 180px;
   }
 </style>

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;
         }

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, // 纬度

src/views/earthMap/edit/EarthComp.vue

@@ -88,7 +88,7 @@
     <!-- AIS信息显示窗口 -->
     <AISInfoWindow v-if="AISInfoWindowShow" :ship_guid="ship_guid" :title="windowTitle"></AISInfoWindow>
     <!-- 跟踪船只窗口 -->
-    <TailAfterWindow v-if="TailAfterWindowShow"></TailAfterWindow>
+    <TailAfterWindow v-if="TailAfterWindowShow" :ship_guid="ship_guid" :last_title="windowTitle"></TailAfterWindow>
   </div>
 </template>
 
@@ -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];