多mb轨迹控制打开和显隐等

src/views/Content/components/WidgetNav/components/MultiHisTraj.jsx

@@ -1,10 +1,11 @@
 import { NIcon, NPopover } from 'naive-ui'
-import { useMultiMBTrajectory } from '@/views/Mubiao/components/MultiHisTrajectory/hooks/multiMbTraj'
+// import { useMultiMBTrajectory } from '@/views/Mubiao/components/MultiHisTrajectory/hooks/multiMbTraj'
+import { useMultiTraj } from '@/views/MultiTrajPlayback/hooks/useMultiTraj'
 
 export default defineComponent({
   setup() {
-    const { showMultiHisTrajCom, showOrHideMultiHisTraj } =
+    const { createMultiTrajPlayback, createOrDestroyMultiTrajPlayback } =
-      useMultiMBTrajectory()
+      useMultiTraj()
 
     // const handleClick = () => {
     //   showMultiHisTrajCom.value = !showMultiHisTrajCom.value
@@ -19,9 +20,9 @@ export default defineComponent({
             trigger: () => (
               <div
                 class={`btn-class ${
-                  showMultiHisTrajCom.value ? 'checked' : ''
+                  createMultiTrajPlayback.value ? 'checked' : ''
                 }`}
-                onClick={showOrHideMultiHisTraj}
+                onClick={createOrDestroyMultiTrajPlayback}
               >
                 <NIcon size="16">
                   <svg

src/views/Content/index.vue

@@ -39,7 +39,8 @@ const { getTextConfigs, initWebSocket } = useTextReport()
 
 const { showHisImageCom } = useHisImage()
 const { showHisTrajCom } = useMBTrajectory()
-const { showMultiHisTrajCom, showMultiHisTrajDrawer } = useMultiTraj()
+const { showMultiHisTrajCom, showMultiHisTrajDrawer, createMultiTrajPlayback } =
+  useMultiTraj()
 const { showDdConfigCom } = useDaodan()
 const getConfig = async () => {
   const res = await getTextConfigs()
@@ -242,6 +243,7 @@ const showOrHideTextReport = () => {
         </div>
 
         <multi-traj-playback
+          v-if="createMultiTrajPlayback"
           class="btn-transform absolute left-0 top-0"
           :class="showMultiHisTrajDrawer ? '' : 'btn-transform-pos'"
         />

src/views/MultiTrajPlayback/hooks/useMultiSatTraj.js

@@ -1,14 +1,6 @@
 import { ref } from 'vue'
 import { useSatellite } from '../../Satellite/hooks/satellite'
 export function useMultiSatTraj() {
-  return {
-    addSatelliteTraj,
-    removeAllMultiSatelliteTraj,
-    satellitePayloadStatusMap,
-    changeSatellitePayloadStatus,
-  }
-}
-
   const multiSatTrajMap = new Map()
   const satellitePayloadStatusMap = ref(new Map())
   const { addSatellite } = useSatellite()
@@ -40,3 +32,10 @@ function removeAllMultiSatelliteTraj() {
       multiSatTrajMap.delete(key)
     }
   }
+  return {
+    addSatelliteTraj,
+    removeAllMultiSatelliteTraj,
+    satellitePayloadStatusMap,
+    changeSatellitePayloadStatus,
+  }
+}

src/views/MultiTrajPlayback/hooks/useMultiTraj.js

@@ -5,7 +5,6 @@ import { useMultiZBTraj } from './useMultiZBTraj'
 import { useMultiHJTraj } from './useMultiHJTraj'
 import { useMultiDDTraj } from './useMultiDDTraj'
 
-const timesMap = ref(new Map())
 const times = ref([])
 
 const customElapsedTime = ref(0)
@@ -75,9 +74,21 @@ export function useMultiTraj() {
     showOrHideMultiHisTrajDrawer,
     allMultiPayloadStatusMap,
     changeRadarStatus,
+    createMultiTrajPlayback,
+    createOrDestroyMultiTrajPlayback,
   }
 }
 
+function resetAllEffect() {
+  checkedAllKeys.value = {
+    zb: [],
+    dd: [],
+    satellite: [],
+    hj: [],
+  }
+  resetPlayEffect()
+}
+
 // 所有树勾选的ids
 const checkedAllKeys = ref({
   zb: [],
@@ -86,6 +97,13 @@ const checkedAllKeys = ref({
   hj: [],
 })
 
+const createMultiTrajPlayback = ref(false)
+function createOrDestroyMultiTrajPlayback() {
+  createMultiTrajPlayback.value = !createMultiTrajPlayback.value
+  !createMultiTrajPlayback.value &&
+    (resetAllEffect(), resetTime(), removeAllEntity())
+}
+
 const showMultiHisTrajDrawer = ref(false)
 // 显示或隐藏多目标历史轨迹抽屉
 function showOrHideMultiHisTrajDrawer() {
@@ -97,8 +115,16 @@ const showMultiHisTrajCom = ref(false)
 // 显示或隐藏多目标历史轨迹组件
 function showOrHideMultiHisTraj() {
   showMultiHisTrajCom.value = !showMultiHisTrajCom.value
+  !showMultiHisTrajCom.value &&
+    (resetPlayEffect(), resetTime(), removeAllEntity())
+}
 
-  !showMultiHisTrajCom.value && (resetTime(), removeAllEntity())
+function resetPlayEffect() {
+  times.value = []
+  customElapsedTime.value = 0
+  animationSpeed.value = 1
+  isAnimationRunning.value = false
+  isPaused.value = false
 }
 
 const { getZBHisTraj, getSatelliteHisTraj, getDDHisTraj, getHJHisTraj } =
@@ -106,8 +132,6 @@ const { getZBHisTraj, getSatelliteHisTraj, getDDHisTraj, getHJHisTraj } =
 
 // 加载多目标历史轨迹
 function loadMultiHisTraj(timeRange) {
-  console.log(timeRange)
-
   const dictFunc = {
     zb: getZBHisTraj,
     dd: getDDHisTraj,
@@ -174,10 +198,8 @@ const allMultiPayloadChangeFun = {
 }
 
 function changeRadarStatus({ id, type }) {
-  console.log(id, type)
   const statusMap = allMultiPayloadStatusMap.value[type]
   if (statusMap) {
-    console.log(statusMap)
     if (statusMap.has(id)) {
       const status = !statusMap.get(id)
       statusMap.set(id, status)

src/views/MultiTrajPlayback/hooks/useMultiZBTraj.js

@@ -2,19 +2,8 @@ import { useEntity } from '@/hooks/entity'
 import { getDirection } from '@/utils/pos'
 import { useDetectionLoad } from './useDetectionLoad'
 export function useMultiZBTraj() {
-  return {
-    multiZBTrajMap,
-    addMultiZBTraj,
-    removeAllMultiZBTraj,
-    ZBPayloadStatusMap,
-    changeZBPayloadStatus,
-  }
-}
-
   const multiZBTrajMap = new Map()
-
   const { getMBEntityOpt } = useEntity()
-
   // 添加多目标目标和轨迹
   function addMultiZBTraj(zbList) {
     removeAllMultiZBTraj()
@@ -167,3 +156,11 @@ function removeAllMultiZBTraj() {
       payloadMap.delete(key)
     }
   }
+  return {
+    multiZBTrajMap,
+    addMultiZBTraj,
+    removeAllMultiZBTraj,
+    ZBPayloadStatusMap,
+    changeZBPayloadStatus,
+  }
+}

src/views/MultiTrajPlayback/index.jsx

@@ -116,7 +116,7 @@ export default defineComponent({
             </div>
 
             <NButton
-              disabled={!canPlay.value || showMultiHisTrajCom}
+              disabled={!canPlay.value || showMultiHisTrajCom.value}
               onClick={playMultiTraj}
             >
               轨迹回放