diff --git a/src/api/home.js b/src/api/home.js index 099c18c..12ec04a 100644 --- a/src/api/home.js +++ b/src/api/home.js @@ -17,7 +17,7 @@ export function getVideoListApi(data) { }) } -// 刷新播放地址 +// 获取视频播放地址 export function getPreviewUrlApi(data) { return request({ url: '/fjtcc-api/api/largeScreen/video/getPreviewUrl', diff --git a/src/hooks/socket.js b/src/hooks/socket.js index 2b06ac3..52ac7bc 100644 --- a/src/hooks/socket.js +++ b/src/hooks/socket.js @@ -26,7 +26,7 @@ export function useWebSocket(url) { } socket.value.onclose = (event) => { isConnected.value = false - console.log('WebSocket close:', event) + console.log('WebSocket close:',url, event) } } diff --git a/src/layout/components/CoreVideo/index.vue b/src/layout/components/CoreVideo/index.vue index 29005c9..d61a2d3 100644 --- a/src/layout/components/CoreVideo/index.vue +++ b/src/layout/components/CoreVideo/index.vue @@ -41,18 +41,33 @@ import primary from '@/assets/images/item-primary.png' import error from '@/assets/images/item-error.png' - import { getVideoListApi } from '@/api/home' - import { postVideoCollectApi } from '@/api/monitor' + import { getVideoListApi, getPreviewUrlApi } from '@/api/home' + import { postVideoCollectApi, postVideoRemainApi } from '@/api/monitor' import Hls from 'hls.js' import pubSub from 'pubsub-js' + import { useWebSocket } from '@/hooks/socket' + import { mode, socketBaseUrl, proSocketBaseUrl } from '@/utils/config' + + const { dataRes } = useWebSocket( + `${mode == 'dev' ? socketBaseUrl : proSocketBaseUrl}/ws/securityAlerts` + ) + + watch( + () => dataRes.value, + (val) => { + getPreviewUrl(val.data.cameraIndexCode) + } + ) + let list = ref([]) let src = ref('') let cameraIndexCode = ref('') let videoShow = ref(false) let allShow = ref(false) let hlsRefs = [] + let timer = null const handleItem = (item) => { src.value = item.hlsUrl @@ -60,6 +75,22 @@ videoShow.value = true } + const postVideoRemain = () => { + timer = setInterval(() => { + postVideoRemainApi({ + cameraIndexCode: list.value.map((item) => item.cameraIndexCode) + }) + }, 5000) + } + + const getPreviewUrl = async (code) => { + let res = await getPreviewUrlApi({ + cameraIndexCode: code, + type: 'hls' + }) + src.value = res.data.url + videoShow.value = true + } const getVideoList = async () => { let res = await getVideoListApi({ isCollect: 1, @@ -67,6 +98,7 @@ pageSize: 5 }) list.value = res.data + postVideoRemain() // nextTick(() => { // list.value.forEach(async (item, index) => { // var video = document.getElementById(`video${index}`) @@ -116,6 +148,10 @@ onVideoCollect() getVideoList() }) + + onUnmounted(() => { + if (timer) clearInterval(timer) + })