首頁 探索 說明
註冊 登入
zhangcf
/
BusinessServicesTT
1
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

master: Fixed 问题更改 接口更换

gitboyzcf 5 月之前
父節點
25d65207b5
當前提交
5219366377
共有 13 個文件被更改，包括 143 次插入 和 92 次删除
分割檢視 顯示文件統計
  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
查看文件 

@@ -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
查看文件 

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

文件差異過大導致無法顯示
+ 5 - 0
public/js/hammer.min.js


+ 20 - 10
src/api/modules/ly.js
查看文件 

@@ -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
查看文件 

@@ -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
查看文件 

@@ -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
查看文件 

@@ -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
查看文件 

@@ -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
查看文件 

@@ -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
查看文件 

@@ -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
查看文件 

@@ -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
查看文件 

@@ -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
查看文件 

@@ -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

部分文件因文件數量過多而無法顯示