多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,19 +1,11 @@
 import { ref } from 'vue'
 import { useSatellite } from '../../Satellite/hooks/satellite'
 export function useMultiSatTraj() {
-  return {
+  const multiSatTrajMap = new Map()
-    addSatelliteTraj,
+  const satellitePayloadStatusMap = ref(new Map())
-    removeAllMultiSatelliteTraj,
+  const { addSatellite } = useSatellite()
-    satellitePayloadStatusMap,
-    changeSatellitePayloadStatus,
-  }
-}
 
-const multiSatTrajMap = new Map()
+  function addSatelliteTraj(satelliteList = [], timeRange) {
-const satellitePayloadStatusMap = ref(new Map())
-const { addSatellite } = useSatellite()
-
-function addSatelliteTraj(satelliteList = [], timeRange) {
     satelliteList.forEach(({ id, tle }) => {
       if (!multiSatTrajMap.has(id)) {
         const satellite = addSatellite(
@@ -28,15 +20,22 @@ function addSatelliteTraj(satelliteList = [], timeRange) {
         satellitePayloadStatusMap.value.set(id, satellite.sensor)
       }
     })
-}
+  }
 
-function changeSatellitePayloadStatus(id, status) {
+  function changeSatellitePayloadStatus(id, status) {
     multiSatTrajMap.has(id) && (multiSatTrajMap.get(id).sensor = status)
-}
+  }
 
-function removeAllMultiSatelliteTraj() {
+  function removeAllMultiSatelliteTraj() {
     for (let [key, satellite] of multiSatTrajMap.entries()) {
       satellite.destroy()
       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,21 +2,10 @@ import { useEntity } from '@/hooks/entity'
 import { getDirection } from '@/utils/pos'
 import { useDetectionLoad } from './useDetectionLoad'
 export function useMultiZBTraj() {
-  return {
+  const multiZBTrajMap = new Map()
-    multiZBTrajMap,
+  const { getMBEntityOpt } = useEntity()
-    addMultiZBTraj,
+  // 添加多目标目标和轨迹
-    removeAllMultiZBTraj,
+  function addMultiZBTraj(zbList) {
-    ZBPayloadStatusMap,
-    changeZBPayloadStatus,
-  }
-}
-
-const multiZBTrajMap = new Map()
-
-const { getMBEntityOpt } = useEntity()
-
-// 添加多目标目标和轨迹
-function addMultiZBTraj(zbList) {
     removeAllMultiZBTraj()
     Object.keys(zbList).forEach(async id => {
       if (!multiZBTrajMap.has(id)) {
@@ -65,14 +54,14 @@ function addMultiZBTraj(zbList) {
         multiZBTrajMap.set(id, ZBEntity)
       }
     })
-}
+  }
 
-const { addSectorDetectionLoad, addConicDetectionLoad } = useDetectionLoad()
+  const { addSectorDetectionLoad, addConicDetectionLoad } = useDetectionLoad()
 
-const payloadMap = new Map()
+  const payloadMap = new Map()
-const ZBPayloadStatusMap = ref(new Map())
+  const ZBPayloadStatusMap = ref(new Map())
 
-function addPayload(id, extendInfo, ZBEntity) {
+  function addPayload(id, extendInfo, ZBEntity) {
     extendInfo?.radarPayload &&
       extendInfo.radarPayload.forEach(item => {
         const radar = addSectorDetectionLoad({
@@ -93,14 +82,14 @@ function addPayload(id, extendInfo, ZBEntity) {
       })
     // console.log(payloadMap, 'payloadMap')
     ZBPayloadStatusMap.value.set(id, true)
-}
+  }
-function changeZBPayloadStatus(id, status) {
+  function changeZBPayloadStatus(id, status) {
     payloadMap.get(id)?.forEach(item => {
       item.show = status
     })
-}
+  }
 
-function getPositions(trajList, targetType) {
+  function getPositions(trajList, targetType) {
     const positionProperty = new Cesium.SampledPositionProperty()
 
     trajList.forEach(({ target_time, target_lon, target_lat }, index) => {
@@ -128,9 +117,9 @@ function getPositions(trajList, targetType) {
       position: positionProperty,
       orientation: new Cesium.VelocityOrientationProperty(positionProperty),
     }
-}
+  }
 
-function getPath(startTime, endTime) {
+  function getPath(startTime, endTime) {
     console.log(new Date(startTime).getTime() - new Date(endTime).getTime())
     return {
       path: new Cesium.PathGraphics({
@@ -142,9 +131,9 @@ function getPath(startTime, endTime) {
         material: Cesium.Color.fromRandom().withAlpha(1),
       }),
     }
-}
+  }
 
-function getAvailability(startTime, endTime) {
+  function getAvailability(startTime, endTime) {
     const start = Cesium.JulianDate.fromDate(new Date(startTime))
     const stop = Cesium.JulianDate.fromDate(new Date(endTime))
     return {
@@ -152,9 +141,9 @@ function getAvailability(startTime, endTime) {
         new Cesium.TimeInterval({ start: start, stop: stop }),
       ]),
     }
-}
+  }
 
-function removeAllMultiZBTraj() {
+  function removeAllMultiZBTraj() {
     for (let [key, entity] of multiZBTrajMap.entries()) {
       viewer.entities.remove(entity)
       multiZBTrajMap.delete(key)
@@ -166,4 +155,12 @@ 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}
             >
               轨迹回放