fix🐛: 鉴权修复回放修改

src/api/modules/mr.js

@@ -7,7 +7,7 @@ export default {
   API_MR_STREAMS_GET(data = {}) {
     return request({
       baseURL: noMr,
-      url: `/api/streams`,
+      url: `/api/video/streams`,
       method: 'post',
       data
     })
@@ -284,5 +284,16 @@ export default {
       params,
       data
     })
+  },
+  // 全景回放========
+  // 获取所有全景回放
+  API_SR_GET(params = {}) {
+    return request({
+      baseURL: noMr,
+      url: `/api/video/stream_records`,
+      method: 'get',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      params
+    })
   }
 }

src/api/request.js

@@ -2,7 +2,9 @@ import { service } from './service'
 import storage from '@/utils/storage'
 function createRequest(service) {
   function request(config) {
-    const parentToken = storage.cookie.get(window.top.document, 'Admin-Token')
+    const parentToken =
+      storage.cookie.get(window.top.document, 'Admin-Token') ||
+      storage.cookie.get(window, 'Admin-Token')
     const configDefault = {
       baseURL: import.meta.env.VITE_APP_API_BASEURL,
       timeout: 15000,

src/views/VideoBox/RemotePlayback/RemotePlayback.vue

@@ -18,6 +18,12 @@
       <div class="remote-playback-r">
         <div class="remote-playback-video-box h-full relative bg-#00000080">
           <pub-video-new newClass="playback-video" class="h-full" />
+          <div
+            v-if="loading"
+            class="absolute top-50% left-50% transform-translate--50% flex justify-center items-center"
+          >
+            <NSpin />
+          </div>
         </div>
       </div>
     </div>
@@ -57,6 +63,8 @@
 </template>
 <script setup>
   import dayjs from 'dayjs'
+  import { NSpin } from 'naive-ui'
+  import { omatVideoPlayer } from '@/assets/js/video-lib/flv/omatVideoPlayer'
   import { Calendar } from 'v-calendar'
   import 'v-calendar/style.css'
   import TimeLine from './components/TimeLine/index.vue'
@@ -65,11 +73,13 @@
   import { useOutsideSystemStore } from '@/stores/modules/system.js'
 
   defineOptions({ name: 'RemotePlayback' })
+  const props = defineProps({
+    device_id: String
+  })
 
-  const { API_NVR_MONTH_GET, API_NVR_DAY_GET } = useRequest()
+  const { API_SR_GET } = useRequest()
   const useSystem = useOutsideSystemStore()
   const date = ref(+new Date())
-  const partBoxRef = ref(null)
 
   const disabledDates = ref([
     {
@@ -105,6 +115,7 @@
     //   endRatio: 0.9
     // }
   ])
+  let playerObj = null
 
   let timer = null
   let interval = 1000 // 间隔时间
@@ -118,6 +129,8 @@
   const TimeLineRef = ref(null)
   const formatT = (t) => dayjs(t).format('YYYY-MM-DD HH:mm:ss')
   const calendarChange = async (v) => {
+    console.log(v)
+
     if (v.isDisabled || currentDay?.day === v.day) return
     if (timer) {
       dialogFn(
@@ -158,26 +171,30 @@
       }
     }
     params.forEach((p) => {
-      const pF = p.split('-')
+      const [form, to] = [dayjs(p + ' 00:00:00').unix(), dayjs(p + ' 23:59:59').unix()]
       promises.push(
         new Promise((resolve) => {
-          // API_NVR_DAY_GET(
-          //   { Year: +pF[0], Month: +pF[1], Day: +pF[2] },
-          //   { NvrId: useSystem.nvrId }
-          // ).then((res) => {
-          //   resolve(res)
-          // })
+          API_SR_GET({
+            device_id: props.device_id,
+            form,
+            to
+          }).then((res) => {
+            resolve(res)
+          })
         })
       )
     })
 
     Promise.all(promises)
       .then((ress) => {
+        console.log(ress)
+
         timeSegments.value = []
         ress.forEach((res) => {
           if (!res) return
           let list = res.map((item, i) => ({
             index: timeSegments.value.length + i,
+            device_id: item.device_id,
             name: '时间段' + (timeSegments.value.length + i + 1),
             beginTime: `${item.begin}`.padEnd(13, '0'),
             endTime: `${item.end}`.padEnd(13, '0'),
@@ -279,7 +296,6 @@
     if (toStrOrNum(startTime).slice(0, 10) >= toStrOrNum(endTime).slice(0, 10)) {
       if (current >= timeSegments.value.length - 1) {
         clearInterval(timer) // 结束定时器
-        partBoxRef.value.workerObj['qj']?.worker.terminate()
         console.log('已经到达结束时间')
         return
       }
@@ -302,31 +318,57 @@
 
     timer = setInterval(incrementTime, interval)
   }
+  const loading = ref(false)
+
+  const playVideo = async (device_id) => {
+    loading.value = true
+    return new Promise(async (resolve) => {
+      const { url } = await useSystem.getStream({ device_id })
+      playerObj = omatVideoPlayer(
+        '.playback-video',
+        url,
+        () => {
+          loading.value = false
+          resolve()
+        },
+        {
+          enableZoom: false,
+          enableDrag: false
+        }
+      )
+    })
+  }
 
   watch(
     () => timeSegmentsObj,
     (newV) => {
-      clearInterval(timer)
-      startTime = +newV.value.beginTime
-      endTime = +newV.value.endTime
-      current = newV.value.index
+      playVideo(newV.value.device_id).then(() => {
+        startTime = +newV.value.beginTime
+        endTime = +newV.value.endTime
+        current = newV.value.index
+        successOpen()
+      })
     },
     { deep: true }
   )
   onMounted(() => {
     let date = new Date()
-    // calendarChange({
-    //   id: initTime.value.split(' ')[0],
-    //   year: date.getFullYear(),
-    //   month: date.getMonth() + 1,
-    //   day: date.getDate(),
-    //   isDisabled: false
-    // })
+    calendarChange({
+      id: initTime.value.split(' ')[0],
+      year: date.getFullYear(),
+      month: date.getMonth() + 1,
+      day: date.getDate(),
+      isDisabled: false
+    })
+    setTimeout(() => {
+      TimeLineRef.value.onResize()
+    }, 200)
   })
 
   onUnmounted(() => {
     clearInterval(timer)
     timer = null
+    playerObj?.destroyed()
   })
 </script>
 <style scoped lang="scss">
@@ -334,6 +376,13 @@
     &-wrapper {
       display: flex;
     }
+    &-l {
+      border: 1px solid #5e8dff;
+      background-color: rgba(94, 141, 255, 0.2);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
     &-r {
       flex: 1 0 auto;
       margin-left: 15px;
@@ -344,8 +393,8 @@
       color: #fff;
     }
     :deep(.vc-container) {
-      border: 1px solid #5e8dff;
-      background-color: rgba(94, 141, 255, 0.2);
+      border: 0px solid #5e8dff;
+      background-color: rgba(94, 141, 255, 0);
       color: #8ac5ff;
 
       .vc-pane-header-wrapper {

src/views/VideoBox/RemotePlayback/components/TimeLine/index.vue

@@ -975,7 +975,8 @@ onBeforeUnmount(() => {
 defineExpose({
   setTime,
   setZoom,
-  watchTime
+  watchTime,
+  onResize
 })
 </script>
 

src/views/VideoBox/index.vue

@@ -252,7 +252,7 @@
               width: '60%',
               marginTop: '10%'
             },
-            content: () => h(RemotePlayback)
+            content: () => h(RemotePlayback, { device_id: props.RtspMain })
           })
         }
         break