Trang chủ Khám phá Trợ giúp
Đăng ký Đăng nhập
zhangcf
/
BusinessServicesTT
1
0
Fork 0
Các tập tin Các vấn đề 0 Yêu cầu khéo về 0 Wiki
Browse Source

master: Fixed 问题更改 接口更换

gitboyzcf 5 tháng trước cách đây
mục cha
25d65207b5
commit
5219366377
13 tập tin đã thay đổi với 143 bổ sung và 92 xóa
Split View Hiển thị tình trạng sai khác
  1. 2 1
      index.html
  2. 1 1
      package.json
  3. 5 0
      public/js/hammer.min.js
  4. 20 10
      src/api/modules/ly.js
  5. 8 5
      src/components/PubVideo.vue
  6. 39 15
      src/directives/modules/doubleClick.js
  7. 6 6
      src/hooks/useRatio.js
  8. 16 5
      src/stores/modules/system.js
  9. 1 1
      src/views/VideoMonitoring/VideoMonitoring.vue
  10. 8 8
      src/views/VideoMonitoring/components/Header.vue
  11. 19 27
      src/views/VideoMonitoring/pages/PanoramicSituation/components/PartBox.vue
  12. 13 9
      src/views/VideoMonitoring/pages/RemotePlayback/RemotePlayback.vue
  13. 5 4
      src/views/VideoMonitoring/pages/RemotePlayback/components/PartBox.vue

+ 2 - 1
index.html
Xem Tập Tin 

@@ -3,7 +3,7 @@
 
   <head>
 
     <meta charset="UTF-8">
 
     <link rel="icon" href="/favicon.ico">
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 
     <title>Vite App</title>
 
     <style>
 
       .loading-box{
 
@@ -17,6 +17,7 @@
 
         left: 0;
 
       }
 
     </style>
 
+    <script src="/js/hammer.min.js"></script>
 
   </head>
 
   <body class="screen-full-target">
 
     <div id="app">

+ 1 - 1
package.json
Xem Tập Tin 

@@ -1,5 +1,5 @@
 
 {
 
-  "name": "monitoring-big-screen",
 
+  "name": "big-screen",
 
   "version": "0.0.0",
 
   "private": true,
 
   "scripts": {

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 5 - 0
public/js/hammer.min.js


+ 20 - 10
src/api/modules/ly.js
Xem Tập Tin 

@@ -1,18 +1,20 @@
 
 import { request } from '@/api/request.js'
 
 export default {
 
   // 按月查询
 
-  API_NVR_MONTH_GET(params = {}) {
 
+  API_NVR_MONTH_GET(data = {}, params = {}) {
 
     return request({
 
-      url: `/ly?address=/Nvr/Month`,
 
-      method: 'get',
 
+      url: `/api/Nvr/QueryByMonth`,
 
+      method: 'post',
 
+      data,
 
       params
 
     })
 
   },
 
   // 按日查询
 
-  API_NVR_DAY_GET(params = {}) {
 
+  API_NVR_DAY_GET(data = {}, params = {}) {
 
     return request({
 
-      url: `/ly?address=/Nvr/Day`,
 
-      method: 'get',
 
+      url: `/api/Nvr/QueryByDay`,
 
+      method: 'post',
 
+      data,
 
       params
 
     })
 
   },
 
@@ -25,11 +27,19 @@ export default {
 
     })
 
   },
 
   // 回放预览
 
-  API_VIEW_PLAYBACK_POST(data = {}) {
 
+  API_VIEW_PLAYBACK_POST(params = {}) {
 
     return request({
 
-      url: `/ly?address=/view/Playback`,
 
-      method: 'post',
 
-      data
 
+      url: `/api/Nvr/View`,
 
+      method: 'get',
 
+      params
 
+    })
 
+  },
 
+  // 硬盘录列表
 
+  API_LY_NVR_LIST_POST(params = {}) {
 
+    return request({
 
+      url: `api/Nvr/List`,
 
+      method: 'get',
 
+      params
 
     })
 
   },
 
   // 球机预览

+ 8 - 5
src/components/PubVideo.vue
Xem Tập Tin 

@@ -2,7 +2,11 @@
 
   <div class="pub-video-box" :style="{ height }" relative overflow-hidden flex>
 
     <canvas
 
       :class="newClass"
 
-      :style="{ width ,transition:'width 0.2s ease, height 0.2s ease', transform: isRotate? `rotate(${useSystem.cilpInfo.Rotate}deg)` : ''}"
 
+      :style="{
 
+        width,
 
+        transition: 'width 0.2s ease, height 0.2s ease',
 
+        transform: isRotate ? `rotate(${useSystem.cilpInfo.Rotate}deg) !important` : ''
 
+      }"
 
       v-double-click
 
     ></canvas>
 
   </div>
 
@@ -10,6 +14,7 @@
 
 <script setup>
 
 // import DPlayer from 'dplayer'
 
 import { useOutsideSystemStore } from '@/stores/modules/system'
 
+import { computed } from 'vue'
 
 
 const useSystem = useOutsideSystemStore()
 
 const props = defineProps({
 
@@ -28,9 +33,7 @@ const props = defineProps({
 
   newClass: {
 
     type: String,
 
     default: 'pub-video'
 
-  },
 
+  }
 
 })
 
-
 
-const isRotate = computed(() => props.newClass === 'pub-video')
 
-
 
+const isRotate = computed(() => props.newClass.search(/pub-video|part/) != -1)
 
 </script>

+ 39 - 15
src/directives/modules/doubleClick.js
Xem Tập Tin 

@@ -1,25 +1,40 @@
 
 import { useOutsideSystemStore } from '@/stores/modules/system.js'
 
+import { isWap } from '@/utils'
 
 
 const useSystem = useOutsideSystemStore()
 
 export default {
 
   mounted(el) {
 
+    let mc = new window.Hammer(el)
 
+
 
+    const fn = (x, y) => {
 
+      let ratioW = el.offsetWidth / useSystem.videoArrange.FullMainHeight
 
+      let ratioH = el.offsetHeight / useSystem.videoArrange.FullMainWidth
 
+      const mouseX = x
 
+      const mouseY = y
 
+      Object.assign(useSystem.partObj, {
 
+        PartCenterX: `${mouseX / ratioW}`,
 
+        PartCenterY: `${mouseY / ratioH}`
 
+      })
 
+    }
 
     if (['pub-video', 'rpb-video'].includes(el.className)) {
 
-      el.addEventListener('dblclick', (e) => {
 
-        e.preventDefault()
 
-        // 取消全选
 
-        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()
 
-        let ratioW = e.target.offsetWidth / useSystem.videoArrange.WidthMain
 
-        let ratioH = e.target.offsetHeight / useSystem.videoArrange.HeightMain
 
-        const mouseX = e.offsetX
 
-        const mouseY = e.offsetY
 
-        Object.assign(useSystem.partObj, {
 
-          PartCenterX: `${mouseX / ratioW}`,
 
-          PartCenterY: `${mouseY / ratioH}`
 
+      if (isWap()) {
 
+        mc.on('doubletap', (e) => {
 
+          e.preventDefault()
 
+          // 取消全选
 
+          window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()
 
+          fn(e.center.x, e.center.y)
 
         })
 
-      })
 
+      } else {
 
+        el.addEventListener('dblclick', (e) => {
 
+          e.preventDefault()
 
+          // 取消全选
 
+          window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()
 
+          fn(e.offsetX, e.offsetY)
 
+        })
 
+      }
 
     } else {
 
       // 双击全屏
 
-      el.addEventListener('dblclick', (e) => {
 
+      const fn = (e) => {
 
         e.preventDefault()
 
         let dgFn = (domArr) => {
 
           if (!domArr.length) return
 
@@ -34,8 +49,17 @@ export default {
 
             dgFn(domArr[i].childNodes)
 
           }
 
         }
 
-        dgFn(e.target.parentNode.parentNode.childNodes)
 
-      })
 
+        dgFn(el.parentNode.parentNode.childNodes)
 
+      }
 
+      if (isWap()) {
 
+        mc.on('doubletap', (e) => {
 
+          fn(e)
 
+        })
 
+      } else {
 
+        el.addEventListener('dblclick', (e) => {
 
+          fn(e)
 
+        })
 
+      }
 
     }
 
   }
 
 }

+ 6 - 6
src/hooks/useRatio.js
Xem Tập Tin 

@@ -33,10 +33,10 @@ export function useRatio(cName = '.pub-video') {
 
   const ratio = ref(0)
 
 
   const resizeHeadler = useDebounceFn(() => {
 
-    ratio.value = videoDom.value.offsetWidth / useSystem.videoArrange.WidthMain
 
+    ratio.value = videoDom.value.offsetWidth / useSystem.videoArrange.FullMainWidth
 
     const { width, height } = calculateScaledDimensions(
 
-      useSystem.videoArrange.WidthMain,
 
-      useSystem.videoArrange.HeightMain,
 
+      useSystem.videoArrange.FullMainWidth,
 
+      useSystem.videoArrange.FullMainHeight,
 
       videoBox.value?.offsetWidth - 15,
 
       videoBox.value?.offsetHeight
 
     )
 
@@ -50,12 +50,12 @@ export function useRatio(cName = '.pub-video') {
 
   useSystem.getVideoArrange().then(() => {
 
     nextTick(() => {
 
       videoDom.value &&
 
-        (ratio.value = videoDom.value.offsetWidth / useSystem.videoArrange.WidthMain)
 
+        (ratio.value = videoDom.value.offsetWidth / useSystem.videoArrange.FullMainWidth)
 
 
       addEventListener('resize', resizeHeadler)
 
       const { width, height } = calculateScaledDimensions(
 
-        useSystem.videoArrange.WidthMain,
 
-        useSystem.videoArrange.HeightMain,
 
+        useSystem.videoArrange.FullMainWidth,
 
+        useSystem.videoArrange.FullMainHeight,
 
         videoBox.value?.offsetWidth - 15,
 
         videoBox.value?.offsetHeight
 
       )

+ 16 - 5
src/stores/modules/system.js
Xem Tập Tin 

@@ -4,6 +4,7 @@ import storage from '@/utils/storage'
 
 import dayjs from 'dayjs'
 
 const {
 
   API_VIEW_PREVIEW_POST,
 
+  API_LY_NVR_LIST_POST,
 
   API_VIEW_BC_GET,
 
   API_INFER_MODE_GET,
 
   API_LY_TRANSFER_GET,
 
@@ -35,7 +36,8 @@ export const useSystemStore = defineStore('systemStore', {
 
     menuCom: {}, //菜单组件对应存储
 
     event: isWap() ? 'touchstart' : 'click', // 事件
 
     cilpInfo: {}, // 裁剪信息
 
-    rtspVideo: '' // rtsp视频
 
+    rtspVideo: '', // rtsp视频
 
+    nvrId: '' // 硬盘录列id
 
   }),
 
   getters: {
 
     ipF() {
 
@@ -46,13 +48,18 @@ export const useSystemStore = defineStore('systemStore', {
 
     }
 
   },
 
   actions: {
 
-    async getVideoUrl(lowRate) {
 
-      // const res = await API_VIEW_PREVIEW_POST({ type: 0, lowRate })
 
-      // this.videoUrl = `wss://${this.ip.split('//')[1]}/VideoShow/Common?UUID=${res.wss}`
 
-      this.videoUrl = `wss://${this.ip.split('//')[1]}/VideoShow/Preview/Full/Main`
 
+    async getVideoUrl(coordinate, type = 'Full') {
 
+      this.videoUrl = `wss://${this.ip.split('//')[1]}/VideoShow/Preview/${type}/Main?X=${
 
+        coordinate.X
 
+      }&Y=${coordinate.Y}`
 
+      return this.videoUrl
 
     },
 
     async getVideoArrange() {
 
       const cilpInfo = await API_CLIP_INFO_GET()
 
+      Object.assign(this.videoArrange, {
 
+        FullMainWidth: cilpInfo.W,
 
+        FullMainHeight: cilpInfo.H
 
+      })
 
       Object.assign(this.cilpInfo, cilpInfo)
 
       return cilpInfo
 
     },
 
@@ -169,6 +176,10 @@ export const useSystemStore = defineStore('systemStore', {
 
       Object.assign(this.inferMode, res)
 
       storage.local.set('i_m', JSON.stringify(res))
 
       return res
 
+    },
 
+    async getNvrId() {
 
+      const nvrId = await API_LY_NVR_LIST_POST()
 
+      this.nvrId = Object.keys(nvrId)[0]
 
     }
 
   }
 
 })

+ 1 - 1
src/views/VideoMonitoring/VideoMonitoring.vue
Xem Tập Tin 

@@ -92,7 +92,7 @@ watch(
 
   () => useSystem.videoArrange,
 
   () => {
 
     document.querySelector('#video-com-id').style.aspectRatio =
 
-      useSystem.videoArrange.WidthMain + '/' + useSystem.videoArrange.HeightMain
 
+      useSystem.videoArrange.FullMainHeight + '/' + useSystem.videoArrange.FullMainWidth
 
   },
 
   { deep: true }
 
 )

+ 8 - 8
src/views/VideoMonitoring/components/Header.vue
Xem Tập Tin 

@@ -192,14 +192,14 @@ const btns = [
 
     icon: 'solar:playback-speed-bold',
 
     auth: ['PlaybackView']
 
   },
 
-  {
 
-    name: '设备维护',
 
-    path: '/video_monitoring/device_management',
 
-    type: 'path',
 
-    color: '#3299ff',
 
-    icon: 'pepicons-pop:gear',
 
-    auth: ['PlaybackView']
 
-  }
 
+  // {
 
+  //   name: '设备维护',
 
+  //   path: '/video_monitoring/device_management',
 
+  //   type: 'path',
 
+  //   color: '#3299ff',
 
+  //   icon: 'pepicons-pop:gear',
 
+  //   auth: ['PlaybackView']
 
+  // }
 
 ]
 
 
 const open = (nav) => {

+ 19 - 27
src/views/VideoMonitoring/pages/PanoramicSituation/components/PartBox.vue
Xem Tập Tin 

@@ -8,7 +8,7 @@
 
     <template v-if="item.UUID">
 
       <div :style="{ maxWidth: '100%', maxHeight: '100%', aspectRatio: 16 / 9 }">
 
         <!-- 视频 -->
 
-        <pub-video :new-class="'ps-video' + item.UUID" :is-scale="true" />
 
+        <pub-video :new-class="'part ps-video' + item.UUID" :is-scale="true" />
 
         <!-- 工具面板 -->
 
         <!-- <OperationPanel :op-class="'ps-video' + item.UUID" :uuid="item.UUID" /> -->
 
         <!-- 加载 -->
 
@@ -31,14 +31,7 @@
 
       <span style="animation: fadeIn 0.8s alternate infinite">请双击全景画面</span>
 
     </div>
 
     <!-- 操作按钮 -->
 
-    <div
 
-      class="panoramic-situation-main-btn-box"
 
-      absolute
 
-      top-1vw
 
-      right-1vw
 
-      flex
 
-      flex-row-reverse
 
-    >
 
+    <div class="panoramic-situation-main-btn-box" absolute top-1vw right-1vw flex flex-row-reverse>
 
       <OperatingButton
 
         @closeWorker="closeWorker"
 
         @setPart="setPart"
 
@@ -50,6 +43,7 @@
 
 </template>
 
 
 <script setup>
 
+import { v4 as uuidv4 } from 'uuid'
 
 import OperationPanel from './OperationPanel.vue'
 
 import OperatingButton from './OperatingButton.vue'
 
 
@@ -78,25 +72,23 @@ const item = reactive({
 
 const workerObj = {}
 
 const setPart = (newV, lowRate = 0, index) => {
 
   item.loading = true
 
-  const pub = (apiN, params, active) => {
 
-    api[apiN](params).then((res) => {
 
-      const url = `wss://${useSystem.ip.split('//')[1]}/VideoShow/Common?UUID=${res.wss}`
 
-      closeWorker(active)
 
-
 
+  const pub = async (apiN, params, active) => {
 
+    const url = await useSystem.getVideoUrl({ X: params.x, Y: params.y }, 'Part')
 
+    closeWorker(active)
 
+    item.loading = true
 
+    nextTick(() => {
 
+      item.url = url
 
+      item.UUID = uuidv4()
 
+      item.PartCenterX = params.x
 
+      item.PartCenterY = params.y
 
+      item.lowRateV = params.lowRate
 
       nextTick(() => {
 
-        item.url = url
 
-        item.UUID = res.wss
 
-        item.PartCenterX = params.x
 
-        item.PartCenterY = params.y
 
-        item.lowRateV = params.lowRate
 
-        nextTick(() => {
 
-          workerObj[active] = useWorker(url, '.ps-video' + res.wss, () => {
 
-            const partV = document.querySelector('.ps-video' + res.wss)
 
-            useSystem.videoWorkerCache[route.name + active] = Object.assign({}, item)
 
-            useWheel(document.querySelectorAll('.ps-part-box-item')[active], item)
 
-            item.loading = false
 
-            partV.style.transform = useSystem.canvasStyle[res.wss]
 
-          })
 
+        workerObj[active] = useWorker(url, '.ps-video' + item.UUID, () => {
 
+          const partV = document.querySelector('.ps-video' + item.UUID)
 
+          useSystem.videoWorkerCache[route.name + active] = Object.assign({}, item)
 
+          // useWheel(document.querySelectorAll('.ps-part-box-item')[active], item)
 
+          item.loading = false
 
+          partV.style.transform = useSystem.canvasStyle[item.UUID]
 
         })
 
       })
 
     })

+ 13 - 9
src/views/VideoMonitoring/pages/RemotePlayback/RemotePlayback.vue
Xem Tập Tin 

@@ -56,6 +56,9 @@ import TimeLine from './components/TimeLine/index.vue'
 
 import { dialogFn, isWap } from '@/utils'
 
 import PartBox from './components/PartBox.vue'
 
 import { useRatio } from '@/hooks/useRatio.js'
 
+import { useOutsideSystemStore } from '@/stores/modules/system.js'
 
+
 
+const useSystem = useOutsideSystemStore()
 
 
 const { API_NVR_MONTH_GET, API_NVR_DAY_GET, API_LY_RELOGIN_POST } = useRequest()
 
 const date = ref(+new Date())
 
@@ -107,7 +110,7 @@ let switchDay = ref(false)
 
 const TimeLineRef = ref(null)
 
 const formatT = (t) => dayjs(t).format('YYYY-MM-DD HH:mm:ss')
 
 
-const calendarChange = (v) => {
 
+const calendarChange = async (v) => {
 
   if (v.isDisabled || currentDay?.day === v.day) return
 
   if (timer) {
 
     dialogFn(
 
@@ -147,11 +150,15 @@ const calendarChange = (v) => {
 
       break
 
     }
 
   }
 
+  await useSystem.getNvrId()
 
   params.forEach((p) => {
 
     const pF = p.split('-')
 
     promises.push(
 
       new Promise((resolve) => {
 
-        API_NVR_DAY_GET({ year: pF[0], month: pF[1], day: pF[2] }).then((res) => {
 
+        API_NVR_DAY_GET(
 
+          { Year: +pF[0], Month: +pF[1], Day: +pF[2] },
 
+          { NvrId: useSystem.nvrId }
 
+        ).then((res) => {
 
           resolve(res)
 
         })
 
       })
 
@@ -181,14 +188,10 @@ const calendarChange = (v) => {
 
         clearInterval(timer)
 
       })
 
     })
 
-    .catch((err) => {
 
-      timeSegments.value = []
 
-      reconnect(err)
 
-    })
 
 }
 
 
 const updateView = (v) => {
 
-  API_NVR_MONTH_GET({ year: v[0].year, month: v[0].month })
 
+  API_NVR_MONTH_GET({ Year: v[0].year, Month: v[0].month }, { NvrId: useSystem.nvrId })
 
     .then((res) => {
 
       let temp = []
 
       v[0].days.forEach((item) => {
 
@@ -206,9 +209,10 @@ const updateView = (v) => {
 
 
 // 初始化日历
 
 let flag = 0
 
-const tempUpdateView = (v) => {
 
+const tempUpdateView = async (v) => {
 
   monthDays = v[0].days
 
   if (flag) return
 
+  await useSystem.getNvrId()
 
   updateView(v)
 
   flag = 1
 
 }
 
@@ -282,7 +286,6 @@ const successOpen = () => {
 
   clearInterval(timer)
 
   // 启动定时器
 
   timer = setInterval(incrementTime, interval)
 
-  useRatio('.rpb-video')
 
 }
 
 
 // 硬盘录重连
 
@@ -330,6 +333,7 @@ onMounted(() => {
 
     day: date.getDate(),
 
     isDisabled: false
 
   })
 
+  useRatio('.rpb-video')
 
 })
 
 
 onUnmounted(() => {

+ 5 - 4
src/views/VideoMonitoring/pages/RemotePlayback/components/PartBox.vue
Xem Tập Tin 

@@ -94,11 +94,12 @@ let cloneParts = null
 
 const getWss = (type, timestamp, x = 0, y = 0, index) => {
 
   return new Promise((resolve, reject) => {
 
     API_VIEW_PLAYBACK_POST({
 
-      type,
 
+      NvrId: useSystem.nvrId,
 
+      Type: type,
 
       UTCDiff: new Date().getTimezoneOffset(),
 
-      timestamp,
 
-      x,
 
-      y
 
+      Timestamp: timestamp,
 
+      X: x,
 
+      Y: y
 
     }).then((res) => {
 
       if (type) {
 
         partUrl[index].UUID = res.wss

Một số tệp đã không được hiển thị bởi vì quá nhiều tập tin thay đổi trong này khác