Merge branch 'zhangtao' of gitadmin/tuoheng_lc_web into develop

src/components/VideoPlayer/index.vue

@@ -64,44 +64,52 @@ export default defineComponent({
 
     /* 初始化播放器 */
     function init(options) {
-      data.isFailed = false
-      nextTick(() => {
+      if (!options.source) {
+        data.isFailed = true
+      } else {
+        data.isFailed = false
+        nextTick(() => {
         /* 实例化ali播放器 */
-        const player = new Aliplayer(
-          {
-            id: props.id,
-            width: '500px',
-            height: '260px',
-            autoplay: false,
-            ...options,
-            components: [toolComponent]
-          },
-          function(player) { player.mute() }
-        )
-        /* 监听开始拖拽事件 */
-        player.on('startSeek', ({ paramData }) => {
+          const player = new Aliplayer(
+            {
+              id: props.id,
+              width: '500px',
+              height: '260px',
+              autoplay: true,
+              ...options,
+              components: [toolComponent]
+            },
+            function(player) { player.mute() }
+          )
+          /* 监听开始拖拽事件 */
+          player.on('startSeek', ({ paramData }) => {
           /* 仅变更标识 */
-          data.isSeek = true
-        })
-        /* 监听完成拖拽事件 */
-        player.on('completeSeek', ({ paramData }) => {
+            data.isSeek = true
+          })
+          /* 监听完成拖拽事件 */
+          player.on('completeSeek', ({ paramData }) => {
           /* 仅变更标识 */
-          data.isSeek = false
-          data.seekTime = paramData
-          /* 是否通知跳转 */
-          if (data.canSeek) {
-            emit('video-status', 'skip')
-          }
+            data.isSeek = false
+            data.seekTime = paramData
+            /* 是否通知跳转 */
+            if (data.canSeek) {
+              emit('video-status', 'skip')
+            }
+          })
+          data[videoPlayer] = player
         })
-        data[videoPlayer] = player
-      })
+      }
     }
 
     /* 获取当前播放器的时间 */
     function getTime() {
-      const currentTime = data[videoPlayer]?.getCurrentTime() || 0
-      const duration = data[videoPlayer]?.getDuration() || 0
+      let currentTime = 0
+      let duration = 0
       const seekTime = data.seekTime
+      if (data[videoPlayer] && !data.isFailed) {
+        currentTime = data[videoPlayer]?.getCurrentTime()
+        duration = data[videoPlayer]?.getDuration()
+      }
       return {
         currentTime,
         duration,
@@ -110,23 +118,32 @@ export default defineComponent({
     }
     /* 设定播放器播放时间 */
     function seekTime(time) {
-      data.canSeek = false
-      data[videoPlayer]?.seek(time)
-      setTimeout(() => {
-        data.canSeek = true
-      }, 100)
+      if (data[videoPlayer] && !data.isFailed) {
+        data.canSeek = false
+        data[videoPlayer]?.seek(time)
+        setTimeout(() => {
+          data.canSeek = true
+        }, 100)
+      }
     }
     /* 设定播放器开始 */
     function playVideo() {
-      data[videoPlayer]?.play()
+      if (data[videoPlayer] && !data.isFailed) {
+        data[videoPlayer]?.play()
+      }
     }
     /* 设定播放器暂停 */
     function pauseVideo() {
-      data[videoPlayer]?.pause()
+      if (data[videoPlayer] && !data.isFailed) {
+        data[videoPlayer]?.pause()
+      }
     }
     /* 销毁播放器 */
     function disposeVideo() {
-      data[videoPlayer]?.dispose()
+      if (data[videoPlayer] && !data.isFailed) {
+        data[videoPlayer]?.dispose()
+      }
+      data.isFailed = true
     }
 
     return {

src/views/dashboard/components/VideoCard.vue

@@ -18,18 +18,16 @@
         </n-form>
       </p>
     </div>
-    <div v-if="!hasPlayer" class="card__video">
-      <div class="card__video--empty">
-        <img src="@/assets/images/no-live.png">
-        <p>当前暂无直播</p>
-      </div>
-    </div>
-    <div v-else class="card__video">
-      <div class="video__item">
-        <VideoPlayer id="dashboard-video-origin" ref="originRef" @video-status="handleOriginStatus" />
-      </div>
+    <div class="card__video">
       <div class="video__item">
-        <VideoPlayer id="dashboard-video-analyse" ref="analyseRef" @video-status="handleAnalyseStatus" />
+        <VideoPlayer id="dashboard-video" ref="originRef" :use-empty="true" @video-status="handleVideoStatus">
+          <template #empty>
+            <div class="card__video--empty">
+              <img src="@/assets/images/no-live.png">
+              <p>当前暂无直播</p>
+            </div>
+          </template>
+        </VideoPlayer>
       </div>
     </div>
   </n-card>
@@ -48,7 +46,6 @@ export default {
   components: { VideoPlayer },
   setup() {
     const originRef = ref()
-    const analyseRef = ref()
     const data = reactive({
       videoForm: {
         airportId: null,
@@ -58,31 +55,12 @@ export default {
       taskOptions: [],
       hasPlayer: false,
       airportIdBack: null,
-      airportUrl: {
-        origin: null,
-        analyse: null
-      },
-      liveUrl: {
-        origin: null,
-        analyse: null
-      },
 
       videoInfo: {
-        origin: {
-          currentTime: 0,
-          duration: 100,
-          status: 'init'
-        },
-        analyse: {
-          currentTime: 0,
-          duration: 100,
-          status: 'init'
-        }
-      },
-      canSkip: true,
-      originDebounce: null,
-      analyseDebounce: null
-
+        url: null,
+        isLive: false,
+        status: 'init'
+      }
     })
 
     /**
@@ -113,11 +91,11 @@ export default {
       missionLive(value)
         .then(res => {
           if (res.code === 0) {
-            data.airportUrl = {
-              origin: res.data?.playUrl,
-              analyse: res.data?.aiplayUrl
+            data.videoInfo = {
+              url: res.data?.aiplayUrl,
+              isLive: true,
+              status: 'init'
             }
-            data.liveUrl = { ...data.airportUrl, isLive: true }
           }
         })
       loadTaskOption(value)
@@ -131,210 +109,60 @@ export default {
           data.airOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
           handleAirportChange(data.videoForm.airportId)
         }
-        // data.liveUrl = { ...data.airportUrl, isLive: true }
       } else {
-        data.liveUrl = {
-          origin: row.videoUrl,
-          analyse: row.aiVideoUrl,
-          isLive: false
+        data.videoInfo = {
+          url: row.aiVideoUrl,
+          isLive: false,
+          status: 'init'
         }
       }
     }
 
-    watch(() => data.liveUrl,
+    watch(() => data.videoInfo.url,
       (value) => {
         nextTick(() => {
-          data.hasPlayer = (value.origin && value.analyse) || false
-          if (data.hasPlayer) {
-            originRef.value?.disposeVideo()
-            analyseRef.value?.disposeVideo()
-            nextTick(() => {
-              initOriginPlayer()
-              initAnalysePlayer()
-            })
-          }
+          originRef.value?.disposeVideo()
+          nextTick(() => {
+            initVideoPlayer()
+          })
         })
       })
 
     /* 初始化播放器 */
-    function initOriginPlayer() {
-      data.videoInfo.origin.status = 'init'
+    function initVideoPlayer() {
+      data.videoInfo.status = 'init'
       const origin = {
         width: '100%',
         height: '100%',
-        source: data.liveUrl.origin,
-        autoplay: data.liveUrl.isLive,
-        isLive: data.liveUrl.isLive
+        source: data.videoInfo.url,
+        isLive: data.videoInfo.isLive
       }
       originRef.value?.init(origin)
       setTimeout(() => {
-        if (data.videoInfo.origin.status === 'init') {
+        if (data.videoInfo.status === 'init') {
           originRef.value?.disposeVideo()
-          initOriginPlayer()
+          initVideoPlayer()
         }
       }, 30000)
     }
-    function initAnalysePlayer() {
-      data.videoInfo.analyse.status = 'init'
-      const analyse = {
-        width: '100%',
-        height: '100%',
-        source: data.liveUrl.analyse,
-        autoplay: data.liveUrl.isLive,
-        isLive: data.liveUrl.isLive
-      }
-      analyseRef.value?.init(analyse)
 
-      setTimeout(() => {
-        if (data.videoInfo.analyse.status === 'init') {
-          analyseRef.value?.disposeVideo()
-          initAnalysePlayer()
-        }
-      }, 30000)
-    }
-
-    /* 监 听原视频 状态 */
-    const handleOriginStatus = function(status) {
-      clearTimeout(data.originDebounce)
-      if (!(['ready', 'pause', 'ended'].includes(status))) {
-        data.originDebounce = setTimeout(() => {
-          originRef.value?.disposeVideo()
-          initOriginPlayer()
-        }, 30000)
-      }
-      if (!analyseRef.value) return
-      if (analyseRef.value.isFailed) return
-      const analyseTime = analyseRef.value?.getTime().currentTime || 0
-      const { currentTime, duration, seekTime } = originRef.value?.getTime()
-      const len = Math.abs(analyseTime - currentTime)
-      data.videoInfo.origin = {
-        currentTime: currentTime,
-        duration: duration,
-        status: status
-      }
-      switch (status) {
-        case 'ready':
-          break
-        case 'play':
-          if (!data.liveUrl.isLive) {
-            analyseRef.value?.playVideo()
-          }
-          break
-        case 'pause':
-          if (!data.liveUrl.isLive) {
-            analyseRef.value?.pauseVideo()
-          }
-          break
-        case 'skip':
-          if (data.canSkip && !data.liveUrl.isLive) {
-            analyseRef.value?.seekTime(seekTime)
-            data.canSkip = false
-            setTimeout(() => {
-              data.canSkip = true
-              originRef.value?.playVideo()
-              analyseRef.value?.playVideo()
-            }, 200)
-          }
-          break
-        case 'playing':
-          /* 播放中时延迟超过三秒则跳转 */
-          if (len > 3 && data.canSkip && !data.liveUrl.isLive) {
-            analyseRef.value?.seekTime(seekTime)
-            data.canSkip = false
-            setTimeout(() => {
-              data.canSkip = true
-              originRef.value?.playVideo()
-              analyseRef.value?.playVideo()
-            }, 200)
-          }
-          break
-      }
-    }
-    /* 监听分析视频状态 */
-    const handleAnalyseStatus = function(status) {
-      clearTimeout(data.analyseDebounce)
-      if (!(['ready', 'pause', 'ended'].includes(status))) {
-        data.analyseDebounce = setTimeout(() => {
-          analyseRef.value?.disposeVideo()
-          initAnalysePlayer()
-        }, 30000)
-      }
-      if (!originRef.value) return
-      if (originRef.value.isFailed) return
-      const originTime = originRef.value?.getTime().currentTime || 0
-      const { currentTime, duration, seekTime } = analyseRef.value?.getTime()
-      const len = Math.abs(originTime - currentTime)
-      data.videoInfo.analyse = {
-        currentTime: currentTime,
-        duration: duration,
-        status: status
-      }
-      switch (status) {
-        case 'ready':
-          break
-        case 'play':
-          if (!data.liveUrl.isLive) {
-            originRef.value?.playVideo()
-          }
-          break
-        case 'pause':
-          if (!data.liveUrl.isLive) {
-            originRef.value?.pauseVideo()
-          }
-          break
-        case 'skip':
-          if (data.canSkip && !data.liveUrl.isLive) {
-            originRef.value?.seekTime(seekTime)
-            data.canSkip = false
-            setTimeout(() => {
-              data.canSkip = true
-              originRef.value?.playVideo()
-              analyseRef.value?.playVideo()
-            }, 200)
-          }
-          break
-        case 'playing':
-          /* 播放中时延迟超过三秒则跳转 */
-          if (len > 3 && data.canSkip && !data.liveUrl.isLive) {
-            originRef.value?.seekTime(seekTime)
-            data.canSkip = false
-            setTimeout(() => {
-              data.canSkip = true
-              originRef.value?.playVideo()
-              analyseRef.value?.playVideo()
-            }, 200)
-          }
-          break
+    function handleVideoStatus(status) {
+      data.videoInfo = {
+        ...data.videoInfo,
+        status
       }
     }
 
-    watch(() => [data.videoInfo.origin.status, data.videoInfo.analyse.status],
-      ([origin, analyse]) => {
-        if (!data.liveUrl.isLive) {
-          if (origin === 'ready' && analyse === 'ready') {
-            originRef.value?.playVideo()
-            analyseRef.value?.playVideo()
-          }
-        }
-      }, { deep: true })
-
     onUnmounted(() => {
-      clearTimeout(data.originDebounce)
-      data.originDebounce = null
       originRef.value?.disposeVideo()
-      clearTimeout(data.analyseDebounce)
-      data.analyseDebounce = null
-      analyseRef.value?.disposeVideo()
     })
     return {
       ...toRefs(data),
       originRef,
-      analyseRef,
       loadAirport,
       handleAirportChange,
       handleVideoChange,
-      handleOriginStatus,
-      handleAnalyseStatus
+      handleVideoStatus
     }
   }
 }
@@ -363,10 +191,7 @@ export default {
   height: calc(100% - 55px);
   position: relative;
   .video__item{
-    width: calc(50% - 10px);
-    &:first-child{
-      margin-right: 20px
-    }
+    width: 100%;
   }
   .card__video--empty{
     position: absolute;

src/views/report-manage/all-report/components/ReportDrawer.vue

@@ -40,14 +40,10 @@
             <n-grid :cols="2">
               <n-gi><span>巡检内容</span></n-gi>
               <n-gi><span>巡检检查结果</span></n-gi>
-              <n-gi><span>林场问题图斑</span></n-gi>
-              <n-gi><span>{{ problemsNum['LC001'] }}</span></n-gi>
-              <n-gi><span>病死树</span></n-gi>
-              <n-gi><span>{{ problemsNum['LC002'] }}</span></n-gi>
-              <n-gi><span>人员活动</span></n-gi>
-              <n-gi><span>{{ problemsNum['LC003'] }}</span></n-gi>
-              <n-gi><span>火灾隐患</span></n-gi>
-              <n-gi><span>{{ problemsNum['LC004'] }}</span></n-gi>
+              <template v-for="(item,index) in problemsList" :key="index">
+                <n-gi><span>{{ item.label }}</span></n-gi>
+                <n-gi><span>{{ item.value }}</span></n-gi>
+              </template>
             </n-grid>
           </div>
         </div>
@@ -76,6 +72,7 @@
 </template>
 
 <script>
+import { QUESTION_TYPE } from '@/utils/dictionary.js'
 import { getReportDetail, reportDownload } from '@/api/report/index.js'
 import { defineComponent, reactive, toRefs, computed, watch } from 'vue'
 
@@ -99,12 +96,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const data = reactive({
       reportDetail: {},
-      problemsNum: {
-        'LC001': 0,
-        'LC002': 0,
-        'LC003': 0,
-        'LC004': 0
-      },
+      problemsList: [],
       taskType: {
         1: '日常巡检',
         2: '应急巡检'
@@ -130,15 +122,18 @@ export default defineComponent({
             .then(res => {
               if (res.code === 0) {
                 data.reportDetail = res.data
-                data.problemsNum = {
-                  'LC001': 0,
-                  'LC002': 0,
-                  'LC003': 0,
-                  'LC004': 0
-                }
-                res.data.questionTypeInfo.forEach((item) => {
-                  const key = `${item.type}`
-                  data.problemsNum[key] = item.quantity
+                data.problemsList = []
+                QUESTION_TYPE.value.forEach((item) => {
+                  const obj = {
+                    label: item.label,
+                    value: 0
+                  }
+                  res.data.questionTypeInfo.forEach((list) => {
+                    if (item.code === list.type) {
+                      obj.value = list.quantity
+                    }
+                  })
+                  data.problemsList.push(obj)
                 })
                 // data.reportDetail.questionReportList.forEach((item, index) => {
                 //   if (index === 0)item.fileMarkerUrl = 'https://image.t-aaron.com/XJRW20220720165837/2022-07-20-17-07-34_frame-6563-6720_type-%E6%B0%B4%E7%94%9F%E6%A4%8D%E8%A2%AB_o3MORSWHXz5pQ8F9_s-live-XJRW20220720165837-a0ec218ddd884ffcadd4f3c8fc27d825_AI.jpg'
@@ -152,13 +147,13 @@ export default defineComponent({
     function handleDownload() {
       reportDownload(props.data.id)
         .then((res) => {
-          const blob = new Blob([res], { type: 'application/msword;charset=UTF-8' })
-          const fileName = '林场巡检报告【' + data.reportDetail.reportNo + '】'
-          const link = document.createElement('a')
-          link.href = window.URL.createObjectURL(blob)
-          link.download = fileName
-          link.click()
-          window.URL.revokeObjectURL(link.href)
+          const download = document.createElement('iframe')
+          download.src = res.data
+          download.style.display = 'none'
+          document.body.appendChild(download)
+          setTimeout(() => {
+            document.body.removeChild(download)
+          }, 300)
         })
     }
 

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

@@ -31,8 +31,7 @@
             class="video_content"
             :class="videoShow == 'back' ? 'video_show' : 'video_hidden'"
           >
-            <VideoPlayer id="demand-video-origin" ref="originRef" @video-status="handleOriginStatus" />
-            <VideoPlayer id="demand-video-analyse" ref="analyseRef" @video-status="handleAnalyseStatus" />
+            <VideoPlayer id="demand-video" ref="originRef" @video-status="handleVideoStatus" />
           </div>
         </div>
       </div>
@@ -105,20 +104,12 @@ export default defineComponent({
       },
       videoShow: 'back', // 视频展示开关
       videoInfo: {
-        origin: {
-          currentTime: 0,
-          duration: 100,
-          status: 'init'
-        },
-        analyse: {
-          currentTime: 0,
-          duration: 100,
-          status: 'init'
-        }
-      },
-      canSkip: true,
-      originDebounce: null,
-      analyseDebounce: null
+        url: null,
+        currentTime: 0,
+        duration: 100,
+        isLive: false,
+        status: 'init'
+      }
     })
 
     /* 获取抽屉的信息 */
@@ -131,137 +122,19 @@ export default defineComponent({
     })
 
     function initOriginPlayer(islive) {
-      data.videoInfo.origin.status = 'init'
+      data.videoInfo.status = 'init'
       const origin = {
-        width: '400px',
-        height: '324px',
-        source: props.data.videoUrl,
-        autoplay: false
+        width: '100%',
+        height: '446px',
+        source: props.data.videoUrl
       }
       originRef.value?.init(origin)
       setTimeout(() => {
-        if (data.videoInfo.origin.status === 'init') {
-          originRef.value?.disposeVideo()
+        if (data.videoInfo.status === 'init') {
           initOriginPlayer()
         }
       }, 30000)
     }
-    function initAnalysePlayer() {
-      data.videoInfo.analyse.status = 'init'
-      const analyse = {
-        width: '400px',
-        height: '324px',
-        source: props.data.aiVideoUrl,
-        autoplay: false
-      }
-      analyseRef.value?.init(analyse)
-      setTimeout(() => {
-        if (data.videoInfo.analyse.status === 'init') {
-          analyseRef.value?.disposeVideo()
-          initAnalysePlayer()
-        }
-      }, 30000)
-    }
-
-    const handleOriginStatus = function(status) {
-      clearTimeout(data.originDebounce)
-      if (!(['ready', 'pause', 'ended'].includes(status))) {
-        data.originDebounce = setTimeout(() => {
-          originRef.value?.disposeVideo()
-          initOriginPlayer()
-        }, 30000)
-      }
-      if (analyseRef.value.isFailed) return
-      const analyseTime = analyseRef.value?.getTime().currentTime || 0
-      const { currentTime, duration, seekTime } = originRef.value?.getTime()
-      const len = Math.abs(analyseTime - currentTime)
-      data.videoInfo.origin = {
-        currentTime: currentTime,
-        duration: duration,
-        status: status
-      }
-      switch (status) {
-        case 'play':
-          analyseRef.value?.playVideo()
-          break
-        case 'pause':
-          analyseRef.value?.pauseVideo()
-          break
-        case 'skip':
-          if (data.canSkip) {
-            analyseRef.value?.seekTime(seekTime)
-            data.canSkip = false
-            setTimeout(() => {
-              data.canSkip = true
-              originRef.value?.playVideo()
-              analyseRef.value?.playVideo()
-            }, 200)
-          }
-          break
-        case 'playing':
-          /* 播放中时延迟超过三秒则跳转 */
-          if (len > 3 && data.canSkip) {
-            analyseRef.value?.seekTime(seekTime)
-            data.canSkip = false
-            setTimeout(() => {
-              data.canSkip = true
-              originRef.value?.playVideo()
-              analyseRef.value?.playVideo()
-            }, 200)
-          }
-          break
-      }
-    }
-    /* 监听分析视频状态 */
-    const handleAnalyseStatus = function(status) {
-      clearTimeout(data.analyseDebounce)
-      if (!(['ready', 'pause', 'ended'].includes(status))) {
-        data.analyseDebounce = setTimeout(() => {
-          analyseRef.value?.disposeVideo()
-          initAnalysePlayer()
-        }, 30000)
-      }
-      if (originRef.value.isFailed) return
-      const originTime = originRef.value?.getTime().currentTime || 0
-      const { currentTime, duration, seekTime } = analyseRef.value?.getTime()
-      const len = Math.abs(originTime - currentTime)
-      data.videoInfo.analyse = {
-        currentTime: currentTime,
-        duration: duration,
-        status: status
-      }
-      switch (status) {
-        case 'play':
-          originRef.value?.playVideo()
-          break
-        case 'pause':
-          originRef.value?.pauseVideo()
-          break
-        case 'skip':
-          if (data.canSkip) {
-            originRef.value?.seekTime(seekTime)
-            data.canSkip = false
-            setTimeout(() => {
-              data.canSkip = true
-              originRef.value?.playVideo()
-              analyseRef.value?.playVideo()
-            }, 200)
-          }
-          break
-        case 'playing':
-          /* 播放中时延迟超过三秒则跳转 */
-          if (len > 3 && data.canSkip) {
-            originRef.value?.seekTime(seekTime)
-            data.canSkip = false
-            setTimeout(() => {
-              data.canSkip = true
-              originRef.value?.playVideo()
-              analyseRef.value?.playVideo()
-            }, 200)
-          }
-          break
-      }
-    }
 
     /* 获取轨迹数据 */
     const getTrackData = async function() {
@@ -277,12 +150,9 @@ export default defineComponent({
     watch(() => props.visible, (visible) => {
       if (visible) {
         nextTick(() => {
-          if (data.videoInfo.origin.status === 'init') {
+          if (data.videoInfo.status === 'init') {
             initOriginPlayer()
           }
-          if (data.videoInfo.analyse.status === 'init') {
-            initAnalysePlayer()
-          }
           if (!data.mapData) {
             initMap()
             getTrackData().then(res => {
@@ -294,22 +164,18 @@ export default defineComponent({
         })
       } else {
         originRef.value?.disposeVideo()
-        analyseRef.value?.disposeVideo()
-        data.videoInfo.origin.status = 'init'
-        data.videoInfo.analyse.status = 'init'
+        data.videoInfo = {
+          url: null,
+          currentTime: 0,
+          duration: 100,
+          isLive: false,
+          status: 'init'
+        }
         data.videoShow = 'back'
         data.mapData = null
       }
     }, { deep: true })
 
-    watch(() => [data.videoInfo.origin.status, data.videoInfo.analyse.status],
-      ([origin, analyse]) => {
-        if (origin === 'ready' && analyse === 'ready') {
-          originRef.value?.playVideo()
-          analyseRef.value?.playVideo()
-        }
-      }, { deep: true })
-
     /* 初始化地图 */
     const initMap = function() {
       const layers = [
@@ -336,7 +202,7 @@ export default defineComponent({
           zoom: false
         })
       })
-      data.mapData.render()
+      data.mapData?.render()
     }
 
     /* 处理轨迹列表 */
@@ -386,14 +252,24 @@ export default defineComponent({
       vectorLayer.on('postrender', moveFeature.bind())
       function moveFeature(event) {
         /* 计算飞行的百分比 */
-        const percent = data.videoInfo.origin.currentTime / data.videoInfo.origin.duration
+        const percent = data.videoInfo.currentTime / data.videoInfo.duration
         const currentCoordinate = route.getCoordinateAt(percent)
         position.setCoordinates(currentCoordinate)
         geoMarker.setGeometry(null)
         const vectorContext = getVectorContext(event)
         vectorContext.setStyle(styleList['geoMarker'])
         vectorContext.drawGeometry(position)
-        data.mapData.render()
+        data.mapData?.render()
+      }
+    }
+
+    function handleVideoStatus(status) {
+      const { currentTime, duration } = originRef.value?.getTime()
+      data.videoInfo = {
+        ...data.videoInfo,
+        currentTime,
+        duration,
+        status: status
       }
     }
 
@@ -411,9 +287,8 @@ export default defineComponent({
       originRef,
       analyseRef,
       getDrawerOptions,
-      handleOriginStatus,
-      handleAnalyseStatus,
       handleDrawerColse,
+      handleVideoStatus,
       showVideo
     }
   }
@@ -436,7 +311,7 @@ export default defineComponent({
 }
 /* 视频 */
 .videobox {
-  width: 810px;
+  width: 600px;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -446,7 +321,7 @@ export default defineComponent({
   right: 10px;
 }
 .flagbox {
-  width: 810px;
+  width: 600px;
   height: 27px;
   background: #fff;
   padding: 0 10px;
@@ -455,7 +330,7 @@ export default defineComponent({
   align-items: center;
 }
 .flagbox_open {
-  width: 810px;
+  width: 600px;
   animation: openbox 1s;
 }
 .flaxbox_back {
@@ -464,7 +339,7 @@ export default defineComponent({
 }
 @keyframes backbox {
   from {
-    width: 810px;
+    width: 600px;
   }
   to {
     width: 116px;
@@ -475,11 +350,11 @@ export default defineComponent({
     width: 116px;
   }
   to {
-    width: 810px;
+    width: 600px;
   }
 }
 .video_content {
-  width: 810px;
+  width: 600px;
   display: flex;
   justify-content: space-between;
 }

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

@@ -32,8 +32,7 @@
             class="video_content"
             :class="videoShow == 'back' ? 'video_show' : 'video_hidden'"
           >
-            <VideoPlayer id="live-origin" ref="originRef" />
-            <VideoPlayer id="live-analyse" ref="analyseRef" />
+            <VideoPlayer id="live-video" ref="originRef" @video-status="handleVideoStatus" />
           </div>
         </div>
       </div>
@@ -78,7 +77,6 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     const originRef = ref()
-    const analyseRef = ref()
     const data = reactive({
       mapData: null,
       view: null,
@@ -117,12 +115,8 @@ export default defineComponent({
       videoShow: 'back', // 视频展示开关
 
       videoInfo: {
-        origin: {
-          status: 'init'
-        },
-        analyse: {
-          status: 'init'
-        }
+        url: null,
+        status: 'init'
       }
     })
     /* 获取抽屉的信息 */
@@ -136,39 +130,20 @@ export default defineComponent({
 
     /* 初始化播放器 */
     function initOriginPlayer(islive) {
-      data.videoInfo.origin.status = 'init'
+      data.videoInfo.status = 'init'
       const origin = {
-        width: '400px',
-        height: '324px',
+        width: '100%',
+        height: '446px',
         source: props.data.playUrl,
-        autoplay: true,
         isLive: true
       }
       originRef.value?.init(origin)
       setTimeout(() => {
-        if (data.videoInfo.origin.status === 'init') {
-          originRef.value?.disposeVideo()
+        if (data.videoInfo.status === 'init') {
           initOriginPlayer()
         }
       }, 30000)
     }
-    function initAnalysePlayer() {
-      data.videoInfo.analyse.status = 'init'
-      const analyse = {
-        width: '400px',
-        height: '324px',
-        source: props.data.aiplayUrl,
-        autoplay: true,
-        isLive: true
-      }
-      analyseRef.value?.init(analyse)
-      setTimeout(() => {
-        if (data.videoInfo.analyse.status === 'init') {
-          analyseRef.value?.disposeVideo()
-          initAnalysePlayer()
-        }
-      }, 30000)
-    }
 
     function handleDrawerColse() {
       emit('update:visible', false)
@@ -197,12 +172,9 @@ export default defineComponent({
     watch(() => props.visible, (value) => {
       if (value) {
         nextTick(() => {
-          if (data.videoInfo.origin.status === 'init') {
+          if (data.videoInfo.status === 'init') {
             initOriginPlayer()
           }
-          if (data.videoInfo.analyse.status === 'init') {
-            initAnalysePlayer()
-          }
           if (!data.mapData) {
             initMap()
             // 加载机场航线
@@ -219,9 +191,10 @@ export default defineComponent({
         })
       } else {
         originRef.value?.disposeVideo()
-        analyseRef.value?.disposeVideo()
-        data.videoInfo.origin.status = 'init'
-        data.videoInfo.analyse.status = 'init'
+        data.videoInfo = {
+          url: null,
+          status: 'init'
+        }
         data.mapData = null
         clearInterval(data.socket)
         data.socket = null
@@ -393,6 +366,13 @@ export default defineComponent({
       }
     }
 
+    function handleVideoStatus(status) {
+      data.videoInfo = {
+        ...data.videoInfo,
+        status: status
+      }
+    }
+
     /* 视频窗口展开收起 */
     const showVideo = function(value) {
       data.videoShow = value
@@ -401,9 +381,9 @@ export default defineComponent({
     return {
       ...toRefs(data),
       originRef,
-      analyseRef,
       getDrawerOptions,
       handleDrawerColse,
+      handleVideoStatus,
       showVideo
     }
   }