video

src/views/task-manage/all-task/components/DemandDrawer.vue

@@ -31,8 +31,8 @@
             class="video_content"
             :class="videoShow == 'back' ? 'video_show' : 'video_hidden'"
           >
-            <VideoPlayer ref="videoRef" :options="getVideoOptions" @time-update="handleOriginTime" @video-status="handleOriginStatus" />
-            <VideoPlayer ref="aiVideoRef" :options="getVideoAiOptions" @time-update="handleAiTime" @video-status="handleAiStatus" />
+            <VideoPlayer ref="originRef" :options="getVideoOptions" @time-update="handleOriginTime" @video-status="handleOriginStatus" />
+            <VideoPlayer ref="analyseRef" :options="getVideoAiOptions" @time-update="handleAiTime" @video-status="handleAiStatus" />
           </div>
         </div>
       </div>
@@ -75,6 +75,9 @@ export default defineComponent({
     'update:visible': null
   },
   setup(props, { emit }) {
+    const originRef = ref(null)
+    const analyseRef = ref(null)
+
     const data = reactive({
       show: props.visible,
       mapData: null,
@@ -144,16 +147,14 @@ export default defineComponent({
         source: props.data.aiVideoUrl
       }
     })
-    const videoRef = ref(null)
-    const aiVideoRef = ref(null)
 
     const handleOriginStatus = function(params) {
       switch (params.status) {
         case 'pause':
-          aiVideoRef.value?.pauseVideo()
+          analyseRef.value?.pauseVideo()
           break
         case 'play':
-          aiVideoRef.value.playVideo()
+          analyseRef.value.playVideo()
           break
         case 'ready':
           data.videoStatus.status = params.status
@@ -166,10 +167,10 @@ export default defineComponent({
     const handleAiStatus = function(params) {
       switch (params.status) {
         case 'pause':
-          videoRef.value?.pauseVideo()
+          originRef.value?.pauseVideo()
           break
         case 'play':
-          videoRef.value.playVideo()
+          originRef.value.playVideo()
           break
         case 'ready':
           data.videoStatus.aiStatus = params.status
@@ -185,7 +186,7 @@ export default defineComponent({
       }
       const len = Math.abs(params.currentTime - data.aiVideoInfo.currentTime)
       if ((params.status === 'skip' || len > 3) && data.canSkip) {
-        aiVideoRef.value?.seekTime(params.currentTime + 0.1)
+        analyseRef.value?.seekTime(params.currentTime + 0.1)
         data.canSkip = false
         setTimeout(() => {
           data.canSkip = true
@@ -198,7 +199,7 @@ export default defineComponent({
       }
       const len = Math.abs(params.currentTime - data.videoInfo.currentTime)
       if ((params.status === 'skip' || len > 3) && data.canSkip) {
-        videoRef.value?.seekTime(params.currentTime + 0.1)
+        originRef.value?.seekTime(params.currentTime + 0.1)
         data.canSkip = false
         setTimeout(() => {
           data.canSkip = true
@@ -207,8 +208,8 @@ export default defineComponent({
     }
     /* 播放视频 */
     const startAllVideo = function() {
-      videoRef.value.playVideo()
-      aiVideoRef.value.playVideo()
+      originRef.value.playVideo()
+      analyseRef.value.playVideo()
     }
 
     /* 获取轨迹数据 */
@@ -222,27 +223,26 @@ export default defineComponent({
       })
     }
 
-    watch(() => data.videoStatus, (status) => {
-      if (status.status === 'ready' && status.aiStatus === 'ready') {
-        startAllVideo()
-      }
-    }, { deep: true })
-    watch(() => props.visible, (value) => {
-      if (value) {
-        if (document.getElementById('history-map')) {
-          initMap()
-        } else {
-          setTimeout(() => {
+    watch([() => props.visible, () => data.videoStatus], ([visible, status]) => {
+      if (visible) {
+        nextTick(() => {
+          if (!data.mapData) {
             initMap()
             getTrackData().then(res => {
               if (res.trackList.length > 0) {
                 initTrack(formatTradeList(res.trackList), 'route')
               }
             })
-          }, 500)
-        }
+          }
+        })
+      } else {
+        originRef.value?.disposeVideo()
+        analyseRef.value?.disposeVideo()
       }
-    })
+      if (status.status === 'ready' && status.aiStatus === 'ready') {
+        startAllVideo()
+      }
+    }, { deep: true })
 
     /* 初始化地图 */
     const initMap = function() {
@@ -342,8 +342,8 @@ export default defineComponent({
 
     return {
       ...toRefs(data),
-      videoRef,
-      aiVideoRef,
+      originRef,
+      analyseRef,
       getDrawerOptions,
       handleOriginStatus,
       handleAiStatus,

src/views/task-manage/all-task/components/LiveDrawer.vue

@@ -32,8 +32,8 @@
             class="video_content"
             :class="videoShow == 'back' ? 'video_show' : 'video_hidden'"
           >
-            <VideoPlayer :options="getVideoOptions.origin" />
-            <VideoPlayer :options="getVideoOptions.analyse" />
+            <VideoPlayer ref="originRef" :options="getVideoOptions.origin" />
+            <VideoPlayer ref="analyseRef" :options="getVideoOptions.analyse" />
           </div>
         </div>
       </div>
@@ -42,7 +42,7 @@
 </template>
 
 <script>
-import { defineComponent, computed, reactive, toRefs, watch } from 'vue'
+import { defineComponent, computed, ref, reactive, toRefs, watch, nextTick } from 'vue'
 import { Map, View, Feature } from 'ol'
 import 'ol/ol.css'
 import { Tile, Vector as VectorLayer } from 'ol/layer'
@@ -77,6 +77,8 @@ export default defineComponent({
     'update:visible': null
   },
   setup(props, { emit }) {
+    const originRef = ref()
+    const analyseRef = ref()
     const data = reactive({
       mapData: null,
       view: null,
@@ -169,40 +171,22 @@ export default defineComponent({
 
     watch(() => props.visible, (value) => {
       if (value) {
-        if (!data.mapData) {
-          if (document.getElementById('live-map')) {
-            initMap()
-            // 加载机场航线
-            getLineData().then(({ trackList }) => {
-              if (trackList.length > 0) {
-                initTrack(formatTradeList(data.lineTrajectoryList), 'lineTrackLayer', 'lineRoute')
-              }
-            })
-            // 加载历史轨迹和实时轨迹
-            getTrackData().then(({ trackList }) => {
-              if (trackList.length > 0) {
-                setLiveTrack(formatTradeList(trackList))
-              }
-            })
-          } else {
-            setTimeout(() => {
-              initMap()
-              // 加载机场航线
-              getLineData().then(({ trackList }) => {
-                if (trackList.length > 0) {
-                  initTrack(formatTradeList(trackList), 'lineTrackLayer', 'lineRoute')
-                }
-              })
-              // 加载历史轨迹和实时轨迹
-              getTrackData().then(({ trackList }) => {
-                if (trackList.length > 0) {
-                  setLiveTrack(formatTradeList(trackList))
-                }
-              })
-            }, 500)
-          }
-        }
+        nextTick(() => {
+          initMap()
+          // 加载机场航线
+          getLineData().then(({ trackList }) => {
+            if (trackList.length > 0) {
+              initTrack(formatTradeList(data.lineTrajectoryList), 'lineTrackLayer', 'lineRoute')
+            }
+          })
+          // 加载历史轨迹和实时轨迹
+          getTrackData().then(({ trackList }) => {
+            setLiveTrack(formatTradeList(trackList))
+          })
+        })
       } else {
+        originRef.value?.disposeVideo()
+        analyseRef.value?.disposeVideo()
         clearInterval(data.socket)
         data.socket = null
       }
@@ -380,6 +364,8 @@ export default defineComponent({
 
     return {
       ...toRefs(data),
+      originRef,
+      analyseRef,
       getDrawerOptions,
       handleDrawerColse,
       getVideoOptions,