fix🐛: 告警问题修复

.gitignore

@@ -10,6 +10,7 @@ lerna-debug.log*
 node_modules
 dist
 dist-ssr
+foreground
 *.local
 
 # Editor directories and files

package.json

@@ -14,7 +14,7 @@
   "dependencies": {
     "@ffmpeg/ffmpeg": "^0.12.10",
     "@ffmpeg/util": "^0.12.1",
-    "@iconify/json": "^2.2.401",
+    "@iconify/json": "^2.2.410",
     "@popperjs/core": "^2.11.8",
     "@primevue/themes": "^4.2.1",
     "@turf/turf": "^7.2.0",

pnpm-lock.yaml

@@ -15,8 +15,8 @@ importers:
         specifier: ^0.12.1
         version: 0.12.2
       '@iconify/json':
-        specifier: ^2.2.401
-        version: 2.2.401
+        specifier: ^2.2.410
+        version: 2.2.410
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -975,8 +975,8 @@ packages:
     resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==, tarball: https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz}
     engines: {node: '>=18.18'}
 
-  '@iconify/json@2.2.401':
-    resolution: {integrity: sha512-pBz8s09X2Aac6EhpfH1eWcu0Wqwuhgh3gmcoFgkrr6qUR1V2qZyz/TKo2hwGEEyyWqH2kc9t50qHRb0hxoG1/g==, tarball: https://registry.npmjs.org/@iconify/json/-/json-2.2.401.tgz}
+  '@iconify/json@2.2.410':
+    resolution: {integrity: sha512-0IhW9Sfudf3cPQHoCwr2gJMMUUkLW01WIkGoP9PbwVKXl1I/KTRHtM9IchLufT8M86QHBWRcinApzkL60TH9vA==, tarball: https://registry.npmjs.org/@iconify/json/-/json-2.2.410.tgz}
 
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==, tarball: https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz}
@@ -4862,7 +4862,7 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.3': {}
 
-  '@iconify/json@2.2.401':
+  '@iconify/json@2.2.410':
     dependencies:
       '@iconify/types': 2.0.0
       pathe: 2.0.3

src/stores/modules/system.js

@@ -1,9 +1,10 @@
 import { piniaStore } from '@/stores'
 import storage from '@/utils/storage'
 import dayjs from 'dayjs'
-import { useNotification } from 'naive-ui'
+import { useNotification, useModal, NButton } from 'naive-ui'
 import { h } from 'vue'
 import { useOutsideHomeStore } from './home'
+import AlarmVideo from '../../views/VideoBox/components/AlarmVideo.vue'
 
 const {
   API_PANORAMA_POST,
@@ -97,6 +98,8 @@ export const useSystemStore = defineStore('systemStore', {
     async connectAlarmWS() {
       const useHomeStore = useOutsideHomeStore()
       const notification = useNotification()
+      const alarmModel = useModal()
+
       const eventTypes = { 1: '车牌', 2: '安全帽', 3: '定员' }
       // setInterval(() => {
       //   const data = {
@@ -143,19 +146,51 @@ export const useSystemStore = defineStore('systemStore', {
         }
         websocket.onmessage = function (e) {
           const data = JSON.parse(e.data)
-          that.alarmList.unshift({ ...data, eventTypes })
+          const d = { ...data, eventTypes }
+          that.alarmList.unshift(d)
 
           if (useHomeStore.temp != 'video') {
             notification.warning({
               title: eventTypes[data.EventId] ? eventTypes[data.EventId] + '警告' : '其他警告',
               content: () =>
-                h('p', [
-                  h('span', '时间：'),
-                  h(
-                    'span',
-                    dayjs(parseInt(`${data.HaveTime}`.padEnd(13, '0'))).format(
-                      'YYYY-MM-DD HH:mm:ss'
+                h('div', { class: 'flex justify-between' }, [
+                  h('div', [
+                    h('span', '时间：'),
+                    h(
+                      'span',
+                      dayjs(parseInt(`${data.HaveTime}`.padEnd(13, '0'))).format(
+                        'YYYY-MM-DD HH:mm:ss'
+                      )
                     )
+                  ]),
+                  h(
+                    NButton,
+                    {
+                      text: true,
+                      onClick: () => {
+                        alarmModel.create({
+                          title: d.eventTypes[d.EventId]
+                            ? d.eventTypes[d.EventId] + '警告视频'
+                            : '其他警告视频',
+                          preset: 'card',
+                          maskClosable: false,
+                          style: {
+                            width: '50%',
+                            marginTop: '10%'
+                          },
+                          content: () =>
+                            h(AlarmVideo, {
+                              alarm: d
+                            })
+                        })
+                      }
+                    },
+                    () =>
+                      // h('div', {
+                      //   class: 'i-fluent-eye-48-regular',
+                      //   style: { width: '28px', height: '28px', padding: '5px' }
+                      // })
+                      '查看'
                   )
                 ])
             })
@@ -176,7 +211,7 @@ export const useSystemStore = defineStore('systemStore', {
       const d = Object.assign(
         {
           device_id: '1723678178923719873',
-          steam_type: 'live',
+          stream_type: 'live',
           quality: 'low',
           from: 0,
           to: 0,

src/views/VideoBox/components/alarmVideo.vue

@@ -18,7 +18,6 @@
   defineOptions({
     name: 'alarm-video-box'
   })
-
   let playerObj = null
   const loading = ref(true)
   const useSystem = useOutsideSystemStore()
@@ -35,8 +34,11 @@
         loading.value = false
       },
       {
-        enableZoom: false,
-        enableDrag: false
+        enableZoom: true, // 启用缩放
+        enableDrag: true, // 启用拖动
+        minScale: 1, // 最小缩放比例
+        maxScale: 6, // 最大缩放比例
+        dragSpeed: 1.9 // 拖动速度
       }
     )
   }
@@ -45,7 +47,7 @@
   })
 
   onUnmounted(() => {
-    playerObj.destroy()
+    playerObj?.destroyed()
     playerObj = null
   })
 </script>

src/views/VideoBox/components/topTools.vue

@@ -45,6 +45,7 @@
   import { useModal, NSpin, NBadge, NPopover, NSpace, NAlert } from 'naive-ui'
   import { useOutsideHomeStore } from '@/stores/modules/home'
   import { useOutsideSystemStore } from '@/stores/modules/system.js'
+  import AlarmVideo from './AlarmVideo.vue'
 
   const alarmModel = useModal()
   const useSystem = useOutsideSystemStore()
@@ -64,15 +65,14 @@
       title: item.eventTypes[item.EventId]
         ? item.eventTypes[item.EventId] + '警告视频'
         : '其他警告视频',
-      draggable: true,
       preset: 'card',
       maskClosable: false,
       style: {
         width: '50%',
         marginTop: '10%'
       },
-      render: () =>
-        h(defineAsyncComponent({ loader: () => import('./AlarmVideo.vue') }), {
+      content: () =>
+        h(AlarmVideo, {
           alarm: item
         })
     })

src/views/VideoBox/index.vue

@@ -80,9 +80,10 @@
   // import useWorker from '@/assets/js/video-lib/omnimatrix-video-player'
   // import { useWindowSize, watchDebounced } from '@vueuse/core'
   import { omatVideoPlayer } from '@/assets/js/video-lib/flv/omatVideoPlayer'
-  import TagBox from './components/tagBox.vue'
   import { useOutsideSystemStore } from '@/stores/modules/system.js'
   import { useOutsideTagStore } from '@/stores/modules/tag.js'
+  import TagBox from './components/tagBox.vue'
+  import RemotePlayback from './RemotePlayback/RemotePlayback.vue'
 
   import { UseFullscreen } from '@vueuse/components'
   import { $mitt, uuid } from '@/utils'
@@ -108,7 +109,7 @@
 
   const init = async () => {
     loading.value = true
-    const { url } = await useSystem.getStream({ device_id: props.id })
+    const { url } = await useSystem.getStream({ device_id: props.RtspMain })
     useSystem.videoUrl = url
     console.log('url', url)
     try {
@@ -247,18 +248,10 @@
             maskClosable: false,
             autoFocus: false,
             style: {
-              width: '80%',
+              width: '60%',
               marginTop: '10%'
             },
-            render: () => {
-              return h(
-                defineAsyncComponent({
-                  loader: () => import('./RemotePlayback/RemotePlayback.vue'),
-                  // 加载异步组件时使用的组件
-                  loadingComponent: NSpin
-                })
-              )
-            }
+            content: () => h(RemotePlayback)
           })
         }
         break
@@ -267,7 +260,6 @@
 
   onMounted(() => {
     init()
-    console.log(props.RtspMain)
     document.body.addEventListener('keyup', keyupHedler)
   })
   onUnmounted(() => {

vite.config.js

@@ -16,7 +16,7 @@ export default ({ mode, command }) => {
   return defineConfig({
     base: '/foreground/',
     build: {
-      outDir: 'dist',
+      outDir: 'foreground',
       sourcemap: false,
       minify: true,
       emptyOutDir: true,