增加轨迹回放

src/utils/map/Boat.js

@@ -6,7 +6,7 @@ import { fullExtent, clearMap, calculation, changeMap, setCamera,
     addBoats, setBoatHistory, playBoatHistory,
     getMapScale
 } from '@/utils/map/ArcgisUtil'
-import {GetHpjShip} from "@/apis/ship";
+import {GetHpjShip,GetBoatAISHistoryByMMSI} from "@/apis/ship";
 import {nextTick} from "vue";
 import bus from "@/utils/bus";
 
@@ -107,16 +107,13 @@ bus.on('playBoatPath', (params) => {
     nextTick(() => {
         setBoatPath(params)
     },{immediate: true});
-    nextTick(() => {
-        playBoatHistoryPath('start')
-    },{immediate: true})
 })
 
 
 
 
 // 设置船舶历史轨迹
-export function setBoatPath(data){
+export  function setBoatPath(data){
     GetBoatAISHistoryByMMSI({
         deviceId:data.mmsi,
         startTime:data.startTime,
@@ -133,6 +130,10 @@ export function setBoatPath(data){
             historyPoints.push(boat)
         }
         setBoatHistory(historyPoints)
+        // setTimeout(function() {
+        //     playBoatHistory('start')
+        // }, 5000);
+
     })
 }
 
@@ -144,13 +145,14 @@ export function setBoatPath(data){
  * 停止：stop
  * @param type
  */
-export function playBoatHistoryPath(type) {
+bus.on('playBoatHistoryPath', (type) => {
     playBoatHistory(type)
-}
+})
 
 /**
  * 清除船舶轨迹
  */
 export function clearBoatHistoryPath(){
+    console.log('清除船舶')
     clearMap({is_draw: false, is_search: false, layers: ['boatLayer','boatPathLayer','tempLayer']})
 }

src/views/home/ComPage.vue

@@ -22,7 +22,7 @@ import SceneBox from './cpns/SceneBox.vue';
 import PicViewer from './cpns/PicViewer.vue';
 import UnderWaterLegend from './cpns/UnderWaterLegend.vue';
 import MapArea from '@/views/map/BaseMapArea.vue'
-import {locationBoat} from "@/utils/map/Boat";
+import {locationBoat,clearBoatHistoryPath} from "@/utils/map/Boat";
 
 const boatPanelShow = ref(false)
 
@@ -39,6 +39,7 @@ watch(boatPanelShow, (newValue, oldValue) => {
  if (!newValue){
    locationBoat( null,false)
  }
+ clearBoatHistoryPath()
 });
 
 bus.on('ueRec_BoatNotFound', (data) => {

src/views/home/cpns/boatPanel/BoatDjld.vue

@@ -53,13 +53,14 @@
         </div>
       </div>
       <div class="cb-play">
-        <span class="speed" :class="{'selected': playSpeed===1.5}" @click="ChangePlaySpeed(1.5)">x1.5</span>
-        <span class="speed" :class="{'selected': playSpeed===2}" @click="ChangePlaySpeed(2)">x2.0</span>
-        <span class="speed" :class="{'selected': playSpeed===3}" @click="ChangePlaySpeed(3)">x3.0</span>
-        <span class="play-btn" :class="{'btn-disabled': playState===-1}" v-show="playState<1" @click="track_play">播放</span>
-        <span class="play-btn" v-show="playState===1||playState===2" @click="track_stop">停止</span>
-        <span class="play-btn" v-show="playState===1" @click="track_pause">暂停</span>
-        <span class="play-btn" v-show="playState===2" @click="track_resume">继续</span>
+        <!--        <span class="speed" :class="{'selected': playSpeed===1.5}" @click="ChangePlaySpeed(1.5)">x1.5</span>-->
+        <!--        <span class="speed" :class="{'selected': playSpeed===2}" @click="ChangePlaySpeed(2)">x2.0</span>-->
+        <!--        <span class="speed" :class="{'selected': playSpeed===3}" @click="ChangePlaySpeed(3)">x3.0</span>-->
+        <span class="play-btn" :class="{'btn-disabled': playState===-1}" @click="track_play(1)">轨迹点</span>
+        <span class="play-btn"   v-show="playState<2" @click="track_play(2)">播放</span>
+        <span class="play-btn" v-show="playState===2" @click="track_pause">暂停</span>
+        <span class="play-btn" v-show="playState===3" @click="track_resume">继续</span>
+        <span class="play-btn" v-show="playState===2||playState===3" @click="track_stop">停止</span>
       </div>
     </div>
 
@@ -121,27 +122,38 @@ export default {
 
   function track_play() {
     if(timeRange.time1&&timeRange.time2) {
-      playState.value=-1
-      ueCallBoatGuiji(timeRange.time1, timeRange.time2)
-      let timer = setInterval(() => {
-        if(playState.value===-1) { return }
-        ueCallBoatDrive()
-        playState.value = 1
-        clearInterval(timer)
-      }, 300);
+      // playState.value=-1
+      let data={
+        mmsi:  props.boatInfo.mmsi,
+        startTime:timeRange.time1,
+        endTime:timeRange.time2}
+      if (types==1)
+      {
+        bus.emit('playBoatPath', data)
+      }else {
+        bus.emit('playBoatHistoryPath', 'start')
+      }
+      playState.value = 1
+    //   ueCallBoatGuiji(timeRange.time1, timeRange.time2)
+    //   let timer = setInterval(() => {
+    //     if(playState.value===-1) { return }
+    //     ueCallBoatDrive()
+    //     playState.value = 1
+    //     clearInterval(timer)
+    //   }, 300);
     }
   }
   function track_stop() {
+    bus.emit('playBoatHistoryPath', 'stop')
     playState.value = 0
-    ueCallBoatCloseDrive()
   }
   function track_pause() {
-    playState.value = 2
-    ueCallBoatStop()
+    bus.emit('playBoatHistoryPath', 'pause')
+    playState.value = 3
   }
   function track_resume() {
-    playState.value = 1
-    ueCallBoatContinue()
+    bus.emit('playBoatHistoryPath', 'resume')
+    playState.value = 2
   }
 
   const previewState = ref(0)    /* 0--未开始/已结束； 1--托管中； 2--接管中; -1--禁用状态 */

src/views/home/cpns/boatPanel/BoatGeneral.vue

@@ -96,13 +96,14 @@
         </div>
       </div>
       <div class="cb-play">
-        <span class="speed" :class="{'selected': playSpeed===1.5}" @click="ChangePlaySpeed(1.5)">x1.5</span>
-        <span class="speed" :class="{'selected': playSpeed===2}" @click="ChangePlaySpeed(2)">x2.0</span>
-        <span class="speed" :class="{'selected': playSpeed===3}" @click="ChangePlaySpeed(3)">x3.0</span>
-        <span class="play-btn" :class="{'btn-disabled': playState===-1}" v-show="playState<1" @click="track_play">播放</span>
-        <span class="play-btn" v-show="playState===1||playState===2" @click="track_stop">停止</span>
-        <span class="play-btn" v-show="playState===1" @click="track_pause">暂停</span>
-        <span class="play-btn" v-show="playState===2" @click="track_resume">继续</span>
+<!--        <span class="speed" :class="{'selected': playSpeed===1.5}" @click="ChangePlaySpeed(1.5)">x1.5</span>-->
+<!--        <span class="speed" :class="{'selected': playSpeed===2}" @click="ChangePlaySpeed(2)">x2.0</span>-->
+<!--        <span class="speed" :class="{'selected': playSpeed===3}" @click="ChangePlaySpeed(3)">x3.0</span>-->
+        <span class="play-btn" :class="{'btn-disabled': playState===-1}" @click="track_play(1)">轨迹点</span>
+        <span class="play-btn"   v-show="playState<2" @click="track_play(2)">播放</span>
+        <span class="play-btn" v-show="playState===2" @click="track_pause">暂停</span>
+        <span class="play-btn" v-show="playState===3" @click="track_resume">继续</span>
+        <span class="play-btn" v-show="playState===2||playState===3" @click="track_stop">停止</span>
       </div>
     </div>
 
@@ -174,17 +175,22 @@ export default {
   }
   // import {playBoatPath,playBoatHistoryPath} from '@/utils/map/Boat'
 
-  function track_play() {
+  function track_play(types) {
     if(timeRange.time1&&timeRange.time2) {
       playState.value=-1
-      // ueCallBoatGuiji(timeRange.time1, timeRange.time2)
-      console.log('轨迹回放'+ props.boatInfo)
       let data={
-        deviceId:  props.boatInfo.mmsi,
+        mmsi:  props.boatInfo.mmsi,
         startTime:timeRange.time1,
         endTime:timeRange.time2}
 
-      bus.emit('playBoatPath', data)
+        if (types==1)
+        {
+          bus.emit('playBoatPath', data)
+          playState.value = 1
+        }else {
+          bus.emit('playBoatHistoryPath', 'start')
+          playState.value = 2
+        }
 
       // let timer = setInterval(() => {
       //   if(playState.value===-1) { return }
@@ -195,16 +201,16 @@ export default {
     }
   }
   function track_stop() {
+    bus.emit('playBoatHistoryPath', 'stop')
     playState.value = 0
-    ueCallBoatCloseDrive()
   }
   function track_pause() {
-    playState.value = 2
-    ueCallBoatStop()
+    bus.emit('playBoatHistoryPath', 'pause')
+    playState.value = 3
   }
   function track_resume() {
-    playState.value = 1
-    ueCallBoatContinue()
+    bus.emit('playBoatHistoryPath', 'resume')
+    playState.value = 2
   }
 
   watch(()=>props.boatInfo, (val) => {

src/views/home/cpns/boatPanel/BoatKkjk.vue

@@ -84,13 +84,14 @@
         </div>
       </div>
       <div class="cb-play">
-        <span class="speed" :class="{'selected': playSpeed===1.5}" @click="ChangePlaySpeed(1.5)">x1.5</span>
-        <span class="speed" :class="{'selected': playSpeed===2}" @click="ChangePlaySpeed(2)">x2.0</span>
-        <span class="speed" :class="{'selected': playSpeed===3}" @click="ChangePlaySpeed(3)">x3.0</span>
-        <span class="play-btn" :class="{'btn-disabled': playState===-1}" v-show="playState<1" @click="track_play">播放</span>
-        <span class="play-btn" v-show="playState===1||playState===2" @click="track_stop">停止</span>
-        <span class="play-btn" v-show="playState===1" @click="track_pause">暂停</span>
-        <span class="play-btn" v-show="playState===2" @click="track_resume">继续</span>
+        <!--        <span class="speed" :class="{'selected': playSpeed===1.5}" @click="ChangePlaySpeed(1.5)">x1.5</span>-->
+        <!--        <span class="speed" :class="{'selected': playSpeed===2}" @click="ChangePlaySpeed(2)">x2.0</span>-->
+        <!--        <span class="speed" :class="{'selected': playSpeed===3}" @click="ChangePlaySpeed(3)">x3.0</span>-->
+        <span class="play-btn" :class="{'btn-disabled': playState===-1}" @click="track_play(1)">轨迹点</span>
+        <span class="play-btn"   v-show="playState<2" @click="track_play(2)">播放</span>
+        <span class="play-btn" v-show="playState===2" @click="track_pause">暂停</span>
+        <span class="play-btn" v-show="playState===3" @click="track_resume">继续</span>
+        <span class="play-btn" v-show="playState===2||playState===3" @click="track_stop">停止</span>
       </div>
     </div>
     <div class="pic-carousel-wrapper" v-show="picsShow">
@@ -253,26 +254,37 @@ export default {
   function track_play() {
     if(timeRange.time1&&timeRange.time2) {
       playState.value=-1
-      ueCallBoatGuiji(timeRange.time1, timeRange.time2)
-      let timer = setInterval(() => {
-        if(playState.value===-1) { return }
-        ueCallBoatDrive()
-        playState.value = 1
-        clearInterval(timer)
-      }, 300);
+      let data={
+        mmsi:  props.boatInfo.mmsi,
+        startTime:timeRange.time1,
+        endTime:timeRange.time2}
+      if (types==1)
+      {
+        bus.emit('playBoatPath', data)
+      }else {
+        bus.emit('playBoatHistoryPath', 'start')
+      }
+      playState.value = 1
+      // ueCallBoatGuiji(timeRange.time1, timeRange.time2)
+      // let timer = setInterval(() => {
+      //   if(playState.value===-1) { return }
+      //   ueCallBoatDrive()
+      //   playState.value = 1
+      //   clearInterval(timer)
+      // }, 300);
     }
   }
   function track_stop() {
+    bus.emit('playBoatHistoryPath', 'stop')
     playState.value = 0
-    ueCallBoatCloseDrive()
   }
   function track_pause() {
-    playState.value = 2
-    ueCallBoatStop()
+    bus.emit('playBoatHistoryPath', 'pause')
+    playState.value = 3
   }
   function track_resume() {
-    playState.value = 1
-    ueCallBoatContinue()
+    bus.emit('playBoatHistoryPath', 'resume')
+    playState.value = 2
   }
 
   const emit = defineEmits(['closeBoatInfo'])

src/views/home/cpns/boatPanel/BoatPjyl.vue

@@ -63,13 +63,14 @@
             </div>
           </div>
           <div class="cb-play">
-            <span class="speed" :class="{'selected': playSpeed===1.5}" @click="ChangePlaySpeed(1.5)">x1.5</span>
-            <span class="speed" :class="{'selected': playSpeed===2}" @click="ChangePlaySpeed(2)">x2.0</span>
-            <span class="speed" :class="{'selected': playSpeed===3}" @click="ChangePlaySpeed(3)">x3.0</span>
-            <span class="play-btn" :class="{'btn-disabled': playState===-1}" v-show="playState<1" @click="track_play">播放</span>
-            <span class="play-btn" v-show="playState===1||playState===2" @click="track_stop">停止</span>
-            <span class="play-btn" v-show="playState===1" @click="track_pause">暂停</span>
-            <span class="play-btn" v-show="playState===2" @click="track_resume">继续</span>
+            <!--        <span class="speed" :class="{'selected': playSpeed===1.5}" @click="ChangePlaySpeed(1.5)">x1.5</span>-->
+            <!--        <span class="speed" :class="{'selected': playSpeed===2}" @click="ChangePlaySpeed(2)">x2.0</span>-->
+            <!--        <span class="speed" :class="{'selected': playSpeed===3}" @click="ChangePlaySpeed(3)">x3.0</span>-->
+            <span class="play-btn" :class="{'btn-disabled': playState===-1}" @click="track_play(1)">轨迹点</span>
+            <span class="play-btn"    v-show="playState<2" @click="track_play(2)">播放</span>
+            <span class="play-btn" v-show="playState===2" @click="track_pause">暂停</span>
+            <span class="play-btn" v-show="playState===3" @click="track_resume">继续</span>
+            <span class="play-btn" v-show="playState===2||playState===3" @click="track_stop">停止</span>
           </div>
         </template>
         <div class="content-hxyl" v-else-if="bottomType==='preview'">
@@ -184,28 +185,40 @@ export default {
   function track_play() {
     if(timeRange.time1&&timeRange.time2) {
       playState.value=-1
-      ueCallBoatGuiji(timeRange.time1, timeRange.time2)
-      let timer = setInterval(() => {
-        if(playState.value===-1) { return }
-        ueCallBoatDrive()
-        playState.value = 1
-        clearInterval(timer)
-      }, 300);
+      let data={
+        mmsi:  props.boatInfo.mmsi,
+        startTime:timeRange.time1,
+        endTime:timeRange.time2}
+
+      if (types==1)
+      {
+        bus.emit('playBoatPath', data)
+      }else {
+        bus.emit('playBoatHistoryPath', 'start')
+      }
+      playState.value = 1
+      // ueCallBoatGuiji(timeRange.time1, timeRange.time2)
+      // let timer = setInterval(() => {
+      //   if(playState.value===-1) { return }
+      //   ueCallBoatDrive()
+      //   playState.value = 1
+      //   clearInterval(timer)
+      // }, 300);
     }
   }
+
   function track_stop() {
+    bus.emit('playBoatHistoryPath', 'stop')
     playState.value = 0
-    ueCallBoatCloseDrive()
   }
   function track_pause() {
-    playState.value = 2
-    ueCallBoatStop()
+    bus.emit('playBoatHistoryPath', 'pause')
+    playState.value = 3
   }
   function track_resume() {
-    playState.value = 1
-    ueCallBoatContinue()
+    bus.emit('playBoatHistoryPath', 'resume')
+    playState.value = 2
   }
-
   const previewState = ref(0)    /* 0--未开始/已结束； 1--托管中； 2--接管中; -1--禁用状态 */
 
   function preview_play() {
@@ -278,7 +291,6 @@ export default {
     historyState.value = 0
     historyCurrent.value = null
   }
-
   
   watch(()=>props.boatInfo.mmsi, (val) => {
     GetLshb(val).then(res => {

src/views/home/cpns/boatPanel/Index.vue

@@ -26,7 +26,7 @@ import BoatDjld from './BoatDjld.vue';
 import { GetBoatInfo, GetBoatInfoByEventCode } from '@/apis/other'
 import { ueCallCloseBoat, ueCallClearAllAi, ueCallInitAll } from '@/utils/UIInteractions'
 import bus from '@/utils/bus';
-import {locationBoat} from "@/utils/map/Boat";
+import {clearBoatHistoryPath} from "@/utils/map/Boat";
 
 const props = defineProps(['boat-info'])