拖拽panel，

src/main.ts

@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
+import { drag } from '@/utils/directive'
 
 // import * as Cesium from 'cesium'
 // window.Cesium = Cesium
@@ -26,4 +27,6 @@ app.use(createPinia())
 app.use(router)
 app.use(Loading)
 
+app.directive('drag', drag)
+
 app.mount('#app')

src/utils/directive.js

@@ -0,0 +1,76 @@
+export const drag = {
+  mounted(el, binding, vnode, prevVnode) {
+    // let oDiv = el // 获取当前元素
+    // oDiv.onmousedown = e => {
+    //   // 算出鼠标相对元素的位置
+    //   let disX = e.clientX - oDiv.offsetLeft
+    //   let disY = e.clientY - oDiv.offsetTop
+    //   document.onmousemove = e => {
+    //     // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
+    //     let left = e.clientX - disX
+    //     let top = e.clientY - disY
+    //     oDiv.style.left = left + 'px'
+    //     oDiv.style.top = top + 'px'
+    //   }
+
+    //   document.onmouseup = e => {
+    //     document.onmousemove = null
+    //     document.onmouseup = null
+    //   }
+    // }
+    el.style.cursor = 'move'
+    el.style.position = 'absolute'
+    el.onmousedown = function (e) {
+      let disX = e.pageX - el.offsetLeft
+      let disY = e.pageY - el.offsetTop
+
+      if (binding.value === 'father') {
+        disX = e.pageX - el.parentNode.offsetLeft
+        disY = e.pageY - el.parentNode.offsetTop
+      } else {
+        disX = e.pageX - el.offsetLeft
+        disY = e.pageY - el.offsetTop
+      }
+
+      document.onmousemove = function (e) {
+        let x = e.pageX - disX
+        let y = e.pageY - disY
+        let maxX
+        let maxY
+
+        if (binding.value === 'father') {
+          maxX =
+            el.parentNode.parentNode.offsetWidth - el.parentNode.offsetWidth
+          maxY =
+            el.parentNode.parentNode.offsetHeight - el.parentNode.offsetHeight
+        } else {
+          maxX = el.parentNode.offsetWidth - el.offsetWidth
+          maxY = el.parentNode.offsetHeight - el.offsetHeight
+        }
+
+        if (x < 0) {
+          x = 0
+        } else if (x > maxX) {
+          x = maxX
+        }
+
+        if (y < 0) {
+          y = 0
+        } else if (y > maxY) {
+          y = maxY
+        }
+
+        if (binding.value === 'father') {
+          el.parentNode.style.left = x + 'px'
+          el.parentNode.style.top = y + 'px'
+        } else {
+          el.style.left = x + 'px'
+          el.style.top = y + 'px'
+        }
+      }
+      document.onmouseup = function () {
+        document.onmousemove = document.onmouseup = null
+      }
+    }
+  },
+}

src/views/Content/index.vue

@@ -267,7 +267,7 @@ const showOrHideTextReport = () => {
       ></mubiao-his-trajectory>
       <multi-his-trajectory
         v-if="showMultiHisTrajCom"
-        class="z-30 h-[260px] w-full"
+        class="absolute z-30 h-[260px] w-[80%]"
       ></multi-his-trajectory>
       <his-images
         v-if="showHisImageCom"

src/views/MultiTrajPlayback/components/MultiHisTrajectory.vue

@@ -78,6 +78,7 @@ const speedOptions = [
   },
 ]
 watch(times, timeArray => {
+
   const segments = divideTimeRangeIntoParts(
     timeArray[0],
     timeArray[timeArray.length - 1],
@@ -114,7 +115,7 @@ function divideTimeRangeIntoParts(
 </script>
 
 <template>
-  <div>
+  <div v-drag>
     <panel
       title="多目标轨迹回放"
       showClose
@@ -123,8 +124,9 @@ function divideTimeRangeIntoParts(
       <div class="flex h-full flex-col justify-center">
         <div>
           <div class="flex items-center gap-2">
+            <!-- v-model:formatted-value="timeRange" -->
             <n-date-picker
-              v-model:formatted-value="timeRange"
+              v-model:value="timeRange"
               clearable
               type="datetimerange"
               :shortcuts="rangeShortcuts"

src/views/MultiTrajPlayback/hooks/useMultiDDTraj.js

@@ -0,0 +1,4 @@
+import { ref } from 'vue'
+export default function useMultiDDTraj() {}
+
+const multiDDTrajMap = new Map()

src/views/MultiTrajPlayback/hooks/useMultiHJTraj.js

@@ -0,0 +1,4 @@
+import { ref } from 'vue'
+export default function useMultiHJTraj() {}
+
+const multiHJTrajMap = new Map()

src/views/MultiTrajPlayback/hooks/useMultiSatTraj.js

@@ -0,0 +1,20 @@
+import { ref } from 'vue'
+import { useSatellite } from '../../Satellite/hooks/satellite'
+export function useMultiSatTraj() {
+  return { addSatelliteTraj }
+}
+
+const multiSatTrajMap = new Map()
+
+const { addSatellite } = useSatellite()
+
+function addSatelliteTraj(satelliteList = []) {
+  console.log(satelliteList)
+  satelliteList.forEach(({ id, tle }) => {
+    if (!multiSatTrajMap.has(id)) {
+      const satellite = addSatellite({ id, tle })
+      console.log(satellite, 'satellite')
+      multiSatTrajMap.set(id, satellite)
+    }
+  })
+}

src/views/MultiTrajPlayback/hooks/useMultiTraj.js

@@ -1,16 +1,16 @@
 import { ref } from 'vue'
 import { useMultiTrajReq } from './useMultiTrajReq'
+import { useMultiSatTraj } from './useMultiSatTraj'
 
+const timesMap = ref(new Map())
+const times = ref([])
+
+const customElapsedTime = ref(0)
+const animationSpeed = ref(1)
+// const lastFrameTime = ref<number>(performance.now())
+const isAnimationRunning = ref(false)
+const isPaused = ref(false)
 export function useMultiTraj() {
-  const timesMap = ref(new Map())
-  const times = ref([])
-
-  const customElapsedTime = ref(0)
-  const animationSpeed = ref(1)
-  // const lastFrameTime = ref<number>(performance.now())
-  const isAnimationRunning = ref(false)
-  const isPaused = ref(false)
-
   function play() {
     isAnimationRunning.value = true
     isPaused.value = false
@@ -53,6 +53,7 @@ export function useMultiTraj() {
   }
 }
 
+// 所有树勾选的ids
 const checkedAllKeys = ref({
   zb: [],
   dd: [],
@@ -60,32 +61,84 @@ const checkedAllKeys = ref({
   hj: [],
 })
 
-const showMultiHisTrajCom = ref(false)
-
 const showMultiHisTrajDrawer = ref(false)
-
+// 显示或隐藏多目标历史轨迹抽屉
 function showOrHideMultiHisTrajDrawer() {
   showMultiHisTrajDrawer.value = !showMultiHisTrajDrawer.value
 }
 
+const showMultiHisTrajCom = ref(false)
+// 显示或隐藏多目标历史轨迹组件
 function showOrHideMultiHisTraj() {
   showMultiHisTrajCom.value = !showMultiHisTrajCom.value
+  resetTime()
 }
 
-const { getZBHisTraj } = useMultiTrajReq()
+const { getZBHisTraj, getSatelliteHisTraj } = useMultiTrajReq()
 
+// 加载多目标历史轨迹
 function loadMultiHisTraj(timeRange) {
   console.log(timeRange)
 
   const dictFunc = {
     zb: getZBHisTraj,
     dd: null,
-    satellite: null,
+    satellite: getSatelliteHisTraj,
     hj: null,
   }
-  Object.keys(checkedAllKeys.value).forEach(key => {
-    checkedAllKeys.value[key].forEach(item => {
-      typeof dictFunc[key] === 'function' && dictFunc[key](item, timeRange)
-    })
+  const reqList = Object.keys(checkedAllKeys.value).filter(key => {
+    if (
+      typeof dictFunc[key] === 'function' &&
+      checkedAllKeys.value[key].length
+    ) {
+      return dictFunc[key]
+    }
   })
+
+  Promise.all(
+    reqList.map(key => {
+      return dictFunc[key]({
+        timeRange,
+        ids: checkedAllKeys.value[key],
+      })
+    })
+  ).then(res => {
+    const data = reqList.reduce((acc, key, index) => {
+      return Object.assign(acc, { [key]: res[index] })
+    }, {})
+    addAllEntity(data)
+  })
+
+  times.value = timeRange
+  // setTimeRange(timeRange)
+}
+
+const { addSatelliteTraj } = useMultiSatTraj()
+// 添加轨迹实体
+function addAllEntity(data) {
+  const { zb, satellite } = data
+  // zb && useMultiSatTraj(satellite)
+  // dd && useMultiSatTraj(dd)
+  // hj && useMultiSatTraj(hj)
+  satellite && addSatelliteTraj(satellite)
+}
+
+function setTimeRange(timeRange) {
+  const [start, stop] = timeRange
+  const startTime = Cesium.JulianDate.fromDate(new Date(start))
+  const stopTime = Cesium.JulianDate.fromDate(new Date(stop))
+
+  viewer.clock.startTime = startTime
+  viewer.clock.stopTime = stopTime
+  viewer.clock.currentTime = startTime
+  viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP
+  viewer.clock.multiplier = 1
+  viewer.clock.shouldAnimate = false
+}
+
+function resetTime() {
+  const currentTime = Cesium.JulianDate.fromDate(new Date())
+  viewer.clock.currentTime = currentTime
+  viewer.clock.clockRange = Cesium.ClockRange.UNBOUNDED
+  viewer.clock.shouldAnimate = true
 }

src/views/MultiTrajPlayback/hooks/useMultiTrajReq.js

@@ -5,7 +5,7 @@ import { getHangjing } from '../../../api/Hangjing'
 import { getDaodanTree } from '../../../api/Daodan'
 
 export function useMultiTrajReq() {
-  return { allTreeData, getAllTree, getZBHisTraj }
+  return { allTreeData, getAllTree, getZBHisTraj, getSatelliteHisTraj }
 }
 
 const allTreeData = ref([])
@@ -61,10 +61,10 @@ async function getHJTree() {
   }
 }
 
-async function getZBHisTraj(id, params) {
-  const [timeBegin, timeEnd] = params
+async function getZBHisTraj({ ids, timeRange }) {
+  const [timeBegin, timeEnd] = timeRange
   const { code, data } = await getMubiaoHisTraj({
-    target_id: id,
+    target_id: ids,
     timeBegin,
     timeEnd,
   })
@@ -74,7 +74,16 @@ async function getZBHisTraj(id, params) {
   return []
 }
 
-async function getSatelliteHisTraj(id, params) {
+async function getSatelliteHisTraj({ ids, timeRange }) {
+  return Promise.resolve([
+    {
+      id: 'CALSPHERE 1',
+      name: 'CALSPHERE 1',
+      tle: `CALSPHERE 1             
+1 00900U 64063C   25112.58517632  .00001163  00000+0  11864-2 0  9998
+2 00900  90.2148  62.1269 0027145 120.7790 303.4225 13.75994622 13579`,
+    },
+  ])
   const { timeBegin, timeEnd } = params
   const { code, data } = await getSatellite()
   if (code === '200') {

src/views/MultiTrajPlayback/hooks/useMultiZBTraj.js

@@ -0,0 +1,12 @@
+import { ref } from 'vue'
+export default function useMultiZBTraj() {
+  return {
+    multiZBTrajMap,
+  }
+}
+
+const multiZBTrajMap = new Map()
+
+function addMultiZBTraj(id, traj) {
+  multiZBTrajMap.set(id, traj)
+}

src/views/MultiTrajPlayback/index.jsx

@@ -25,7 +25,7 @@ export default defineComponent({
     }
     function renderSuffix({ option }) {
       return option.data ? (
-        <div class="">
+        <div class="pr-2">
           <NIcon
             size={14}
             class="cursor-pointer text-gray-500 hover:text-blue-600"
@@ -51,21 +51,28 @@ export default defineComponent({
           name: dict[key],
           value: key,
           component: () => (
-            <Tree
-              data={allTreeData.value[key]}
-              key-field={key === 'satellite' ? 'id' : 'dataId'}
-              label-field={key === 'satellite' ? 'name' : 'nodeName'}
-              showSearch
-              renderSuffix={renderSuffix}
-              v-model:checked={checkedAllKeys.value[key]}
-            />
+            <div class="px-4 py-2 w-h-full">
+              <Tree
+                data={allTreeData.value[key]}
+                key-field={key === 'satellite' ? 'id' : 'dataId'}
+                label-field={key === 'satellite' ? 'name' : 'nodeName'}
+                showSearch
+                renderSuffix={renderSuffix}
+                v-model:checked={checkedAllKeys.value[key]}
+              />
+            </div>
           ),
         }
       })
     })
 
+    const canPlay = computed(() => {
+      return Object.values(checkedAllKeys.value).flat().length > 0
+    })
+
     function playMultiTraj() {
       // TODO: 轨迹回放
+
       showOrHideMultiHisTraj()
     }
 
@@ -86,7 +93,9 @@ export default defineComponent({
               )}
             </div>
 
-            <NButton onClick={playMultiTraj}>轨迹回放</NButton>
+            <NButton disabled={!canPlay.value} onClick={playMultiTraj}>
+              轨迹回放
+            </NButton>
           </div>
         </Panel>
       </div>

src/views/Satellite/hooks/satellite.ts

@@ -111,6 +111,7 @@ export function useSatellite() {
 
   return {
     satelliteList,
+    addSatellite,
     checkedKeys,
     getSatelliteList,
     addSatellites,
@@ -136,13 +137,11 @@ function createSatelliteCommunicationPayload(satId: string) {
     ?.communicationPayload?.target.forEach((mbId: string) => {
       console.log(mbId, 'mbId')
       if (mubiaoMap.has(mbId)) {
-        const beam = new Beam({
+        const beam = createBeam({
           topEntity: satelliteMap.get(satId).entity,
           bottomEntity: mubiaoMap.get(mbId),
         })
 
-        beam.create()
-
         if (!satelliteBeamMap.has(satId)) {
           satelliteBeamMap.set(satId, new Map())
         }
@@ -153,6 +152,15 @@ function createSatelliteCommunicationPayload(satId: string) {
     })
 }
 
+function createBeam({ topEntity, bottomEntity }) {
+  const beam = new Beam({
+    topEntity,
+    bottomEntity,
+  })
+  beam.create()
+  return beam
+}
+
 function removeSatelliteCommunicationPayload(satId: string) {
   if (!satelliteBeamMap.has(satId)) {
     return