lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

类型：开发

Browse Source 
描述：
This commit is contained in:
lixuefeng
2025-12-10 14:00:33 +08:00
parent 5cbb12f15d
commit 5fd201a41a
7 changed files with 1342 additions and 1131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/HlsPlayer/index.vue
View File

@@ -2,6 +2,7 @@
<div v-show="isActive" class="myVideo-container">
<video
class="myVideo"
id="video"
ref="videoElement"
muted
playsinline
@@ -16,7 +17,7 @@
<script>
import Hls from 'hls.js'
import mpegtsjs from 'mpegts.js'
export default {
name: 'HlsPlayer',
props: {
@@ -162,6 +163,28 @@
if (this.hls) {
this.immediateCleanup()
}
if(this.url.startsWith('ws')){
const videoElement = document.getElementById('video')
const player = mpegtsjs.createPlayer({
url: this.url,
type: 'flv',
isLive: true,
hasAudio: false
})
player.attachMediaElement(videoElement)
player.load()
player.play()
// 错误处理和重连机制
player.on('error', (err) => {
player.unload()
// 3 秒后尝试重新加载
setTimeout(() => {
player.load()
player.play()
}, 3000)
})
}else{
this.hls = new Hls({
// 内存优化配置
maxBufferSize: 0, // 降低缓冲区大小（15MB）
@@ -211,6 +234,8 @@
this.hls.on(Hls.Events.BUFFER_EOS, () => {
this.cleanupNetworkResources()
})
}
},
initVideo() {
this.beforeDestroy()

38
src/components/VideoDialog/index.vue
View File

@@ -49,8 +49,8 @@
</div>
<div class="action-item">
<div class="video-follow" @click="handleCollectAdd(cameraIndexCode, isDiy, index)" v-if="isDiy==0">收藏</div>
<div class="video-follow" @click="handleCollectAdd(cameraIndexCode, isDiy, index)" v-else="isDiy==1">取消收藏</div>
<div class="video-follow" @click="handleCollectAdd()" v-if="isDayCurr==0">收藏</div>
<div class="video-follow" @click="handleCollectAdd()" v-if="isDayCurr==1">取消收藏</div>
</div>
</div>
@@ -66,13 +66,20 @@
import { postVideoControlApi,postVideoCollectApi } from '@/api/monitor'
import { getColletDiyApi } from '@/api/home'
import pubSub from 'pubsub-js'
const Z00M_IN = 'ZOOM_IN' // 焦距变大
const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
const UP = 'UP' // 上转
const DOWN = 'DOWN' // 下转
const LEFT = 'LEFT' // 左转
const RIGHT = 'RIGHT' // 右转
const STOP = 'STOP' // 停止操作
// const Z00M_IN = 'ZOOM_IN' // 焦距变大
// const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
// const UP = 'UP' // 上转
// const DOWN = 'DOWN' // 下转
// const LEFT = 'LEFT' // 左转
// const RIGHT = 'RIGHT' // 右转
// const STOP = 'STOP' // 停止操作
const Z00M_IN = 'zoomin' // 焦距变大
const Z00M_OUT = 'zoomout' // 焦距变小
const UP = 'up' // 上转
const DOWN = 'down' // 下转
const LEFT = 'left' // 左转
const RIGHT = 'right' // 右转
const STOP = 'stop' // 停止操作
let ACTION = '0'
let command = ref('')
@@ -103,8 +110,8 @@
watch(
() =>modelValue.value,
(val) => {
// colletCond.value = props.isCollect
// isDayCurr.value = props.isDiy
colletCond.value = props.isCollect
isDayCurr.value = props.isDiy
console.log(props.isDiy,'val[0].value')
},
@@ -114,7 +121,7 @@
)
const emit = defineEmits(['isDiyChange']);
// 收藏
const handleCollectAdd = async (id, status, index) => {
const handleCollectAdd = async () => {
await getColletDiyApi({
cameraIndexCode:props.cameraIndexCode,
isDiy: props.isDiy == 0 ? 1 : 0
@@ -149,6 +156,7 @@
const handleAction = async (e) => {
if (e == STOP) {
ACTION = '1'
command.value = e
} else {
ACTION = '0'
command.value = e
@@ -223,7 +231,7 @@
text-align: center;
// line-height: vh(24);
font-weight: 400;
font-size: font-vw(18);
font-size: vw(16);
color: #ffffff;
// background-image: url('@/assets/images/unfollow.png');
background-size: 100% 100%;
@@ -255,7 +263,7 @@
> span {
margin: 0 vw(16);
font-weight: 400;
font-size: font-vw(16);
font-size: vw(16);
color: #ffffff;
}
.pause {
@@ -271,7 +279,7 @@
height: vw(980);
color: #fff;
font-weight: bold;
font-size: font-vw(30);
font-size: vw(30);
transform: translate(-50%, -50%);
z-index: 999;
}

86
src/layout/components/CoreVideo/allList.vue
View File

@@ -12,7 +12,7 @@
@click="handleItem(item)"
>
<div class="item-unfollow" @click.stop="handleCollect(item.cameraIndexCode, index)">取消关注</div>
<video class="item-video" :id="'video' + index" muted autoplay :controls="false">
<video class="item-video" :id="'videoall' + index" muted autoplay :controls="false">
<source type="application/x-mpegURL" />
</video>
<p>
@@ -36,13 +36,14 @@
</template>
<script setup>
import { getVideoListApi,getColletListApi } from '@/api/home'
import { getPreviewUrlApi,getColletListApi } from '@/api/home'
import { postVideoCollectApi } from '@/api/monitor'
import primary from '@/assets/images/item-primary.png'
import Hls from 'hls.js'
import pubSub from 'pubsub-js'
import mpegtsjs from "mpegts.js";
let modelValue = defineModel()
let isCollect = ref(0)
@@ -110,27 +111,78 @@
list.value = []
getVideoList()
}
const createPlayer = (cameraIndexCode,videoElement) => {
getPreviewUrlApi({
type: 'hls',
cameraIndexCode: cameraIndexCode
}).then(res=>{
const url = res.data.url;
if(url.startsWith('ws')){
const player = mpegtsjs.createPlayer({
url: url,
type: 'flv',
isLive: true,
hasAudio: false
})
player.attachMediaElement(videoElement)
player.load()
player.play()
// 错误处理和重连机制
player.on(mpegtsjs.Events.ERROR, (err) => {
player.unload();
player.destroy();
console.error('播放器错误:', err)
// 3 秒后尝试重新加载
setTimeout(() => {
console.error('重新加载【'+cameraIndexCode+'】' )
createPlayer(cameraIndexCode,videoElement);
}, 3000)
})
hlsRefs.push(player)
}
else{
const player = new Hls({
maxBufferLength: 10, // 最大缓冲长度（秒）
maxMaxBufferLength: 15, // 缓冲区长度的上限
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
})
player.loadSource(url)
player.attachMedia(videoElement)
player.on(Hls.Events.MANIFEST_PARSED, () => {
videoElement.play()
})
player.on(Hls.Events.ERROR, (event, data) => {
// 根据错误类型进行处理
if (data.fatal) {
switch (data.type) {
case Hls.ErrorTypes.NETWORK_ERROR:
console.log('网络错误，尝试重新加载');
player.startLoad();
break;
case Hls.ErrorTypes.MEDIA_ERROR:
console.log('媒体错误，尝试修复');
player.recoverMediaError();
break;
default:
console.log('无法恢复的错误，销毁播放器');
// hls.destroy();
break;
}
}
})
hlsRefs.push(player)
}
})
}
const getVideoList = async () => {
let res = await getColletListApi(params)
list.value = res.data
total.value = res.total
nextTick(() => {
list.value.forEach(async (item, index) => {
var video = document.getElementById(`video${index}`)
const hls = new Hls({
enableWorker: false, // 禁用 Worker 来避免额外的线程
enableSoftwareAES: true, // 使用软件解码器以避免硬件解码的额外请求
cache: true, // 启用缓存
maxBufferLength: 10, // 最大缓冲长度（秒）
maxMaxBufferLength: 15, // 缓冲区长度的上限
maxBufferSize: 20 * 1000 * 1000 // 最大缓冲大小（字节）
})
hls.loadSource(item.hlsUrl)
hls.attachMedia(video)
hls.on(Hls.Events.MANIFEST_PARSED, () => {
video.play()
})
hlsRefs.push(hls)
var video = document.getElementById(`videoall${index}`)
createPlayer(item.cameraIndexCode,video);
})
})
}

12
src/layout/components/CoreVideo/index.vue
View File

@@ -82,12 +82,12 @@ let isCollect = ref(0)
}
const postVideoRemain = () => {
timer = setInterval(() => {
if(!list.value.length) return false;
postVideoRemainApi({
cameraIndexCode: list.value.map((item) => item.cameraIndexCode)
})
}, 1500)
// timer = setInterval(() => {
// if(!list.value.length) return false;
// postVideoRemainApi({
// cameraIndexCode: list.value.map((item) => item.cameraIndexCode)
// })
// }, 1500)
}
const getPreviewUrl = async (code) => {

1
src/layout/components/Header/index.vue
View File

@@ -471,6 +471,7 @@
}
.btn-all{
position: absolute;
cursor: pointer;
left: vw(140);
top: vh(30);
min-width: vw(180);

131
src/views/collect/components/video-box.vue
View File

@@ -42,7 +42,7 @@
:controls="false"
/>
<p class="video-item__title--primary">
{{ element.cameraName || element.scenicAreaId }}
{{ element.cameraName || element.cameraIndexCode }}
</p>
</div>
</div>
@@ -93,13 +93,21 @@
import Hls from 'hls.js'
import emptyIco from '@/assets/images/n-icon.png'
import { debounce } from 'lodash'
const Z00M_IN = 'ZOOM_IN' // 焦距变大
const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
const UP = 'UP' // 上转
const DOWN = 'DOWN' // 下转
const LEFT = 'LEFT' // 左转
const RIGHT = 'RIGHT' // 右转
const STOP = 'STOP' // 停止操作
import mpegtsjs from "mpegts.js";
// const Z00M_IN = 'ZOOM_IN' // 焦距变大
// const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
// const UP = 'UP' // 上转
// const DOWN = 'DOWN' // 下转
// const LEFT = 'LEFT' // 左转
// const RIGHT = 'RIGHT' // 右转
// const STOP = 'STOP' // 停止操作
const Z00M_IN = 'zoomin' // 焦距变大
const Z00M_OUT = 'zoomout' // 焦距变小
const UP = 'up' // 上转
const DOWN = 'down' // 下转
const LEFT = 'left' // 左转
const RIGHT = 'right' // 右转
const STOP = 'stop' // 停止操作
let cond = ref(false)
let ACTION = '0'
let hlsRefs = []
@@ -169,7 +177,6 @@
params.businessVideoDisplayPosition = ''
let res = await getVideCollectCate(params)
videoList.value = res.data
console.log(res,videoList.value.length,'ressssssssssssss')
if(videoList.value.length<=3){
grad.value = 3
}else if(videoList.value.length<=6){
@@ -205,6 +212,7 @@
const handleAction = async (e) => {
if (e == STOP) {
ACTION = '1'
command.value = e
} else {
ACTION = '0'
command.value = e
@@ -279,6 +287,70 @@
if (type == 100) initVideo()
}, 1000)
}
const createPlayer = (cameraIndexCode,videoElement) => {
getPreviewUrlApi({
type: 'hls',
cameraIndexCode: cameraIndexCode
}).then(res=>{
const url = res.data.url;
if(url.startsWith('ws')){
const player = mpegtsjs.createPlayer({
url: url,
type: 'flv',
isLive: true,
hasAudio: false
})
player.attachMediaElement(videoElement)
player.load()
player.play()
// 错误处理和重连机制
player.on(mpegtsjs.Events.ERROR, (err) => {
player.unload();
player.destroy();
console.error('播放器错误:', err)
// 3 秒后尝试重新加载
setTimeout(() => {
console.error('重新加载【'+cameraIndexCode+'】' )
createPlayer(cameraIndexCode,videoElement);
}, 3000)
})
hlsRefs.push(player)
}
else{
const player = new Hls({
maxBufferLength: 10, // 最大缓冲长度（秒）
maxMaxBufferLength: 15, // 缓冲区长度的上限
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
})
player.loadSource(url)
player.attachMedia(videoElement)
player.on(Hls.Events.MANIFEST_PARSED, () => {
videoElement.play()
})
player.on(Hls.Events.ERROR, (event, data) => {
// 根据错误类型进行处理
if (data.fatal) {
switch (data.type) {
case Hls.ErrorTypes.NETWORK_ERROR:
console.log('网络错误，尝试重新加载');
player.startLoad();
break;
case Hls.ErrorTypes.MEDIA_ERROR:
console.log('媒体错误，尝试修复');
player.recoverMediaError();
break;
default:
console.log('无法恢复的错误，销毁播放器');
// hls.destroy();
break;
}
}
})
hlsRefs.push(player)
}
})
}
const initVideo = () => {
clearHlsRefs()
nextTick(() => {
@@ -286,20 +358,8 @@
it.videos.forEach((item,index)=>{
setTimeout(() => {
const video = document.getElementById(`monitorVideo${item.cameraIndexCode}`)
if(item.hlsUrl){
const hls = new Hls({
maxBufferLength: 10, // 最大缓冲长度（秒）
maxMaxBufferLength: 15, // 缓冲区长度的上限
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
})
hls.loadSource(item.hlsUrl)
hls.attachMedia(video)
hls.on(Hls.Events.MANIFEST_PARSED, () => {
video.play()
})
hlsRefs.push(hls)
}
const video = document.getElementById(`collectmonitorVideo${item.cameraIndexCode}`)
createPlayer(item.cameraIndexCode,video);
}, 1000)
})
@@ -318,25 +378,24 @@
)
// 更新视频
const postVideoRemain = async () => {
timer = setInterval(() => {
clearInterval(timer)
videoList.value.forEach((items,index)=>{
setTimeout(()=>{
postVideoRemainApi({
cameraIndexCode: items.videos.map((item) => item.cameraIndexCode)
})
},1500)
})
}, 1500)
// timer = setInterval(() => {
// clearInterval(timer)
// videoList.value.forEach((items,index)=>{
// setTimeout(()=>{
// postVideoRemainApi({
// cameraIndexCode: items.videos.map((item) => item.cameraIndexCode)
// })
// },1500)
//
// })
//
// }, 1500)
}
const getVideoRegions = async () => {
let res = await getVideoRegionsApi({
cameraName: cameraName.value,
businessScenicArea: params.businessScenicArea
})
console.log(res,11111111111111)
regionList.value = res.data
regionList.value.forEach((item,index)=>{
// item.show = true

278
src/views/hotel/components/video-box.vue
View File

@@ -78,7 +78,7 @@
</div>
<video
class="video-item__video"
:id="'monitorVideo' + index"
:id="'hotelmonitorVideo' + index"
preload="auto"
muted
autoplay
@@ -154,7 +154,7 @@
</p>
<video
class="item-img"
:id="'monitorVideo' + index"
:id="'hotelmonitorVideo' + index"
muted
autoplay
:controls="false"
@@ -184,7 +184,7 @@
</template>
<script setup>
import { getRegionsListApi,getPreviewUrlApi } from '@/api/home'
import { getVideCollectCate,getVideCollectCateSort,getColletDiyApi,getPreviewUrlApi} from '@/api/home'
import {
getVideoTypeApi,
getVideoRegionsApi,
@@ -192,17 +192,26 @@
postVideoControlApi,
postVideoCollectApi
} from '@/api/monitor'
import draggable from 'vuedraggable';
import pubSub from 'pubsub-js'
import Hls from 'hls.js'
import emptyIco from '@/assets/images/n-icon.png'
import { debounce } from 'lodash'
const Z00M_IN = 'ZOOM_IN' // 焦距变大
const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
const UP = 'UP' // 上转
const DOWN = 'DOWN' // 下转
const LEFT = 'LEFT' // 左转
const RIGHT = 'RIGHT' // 右转
const STOP = 'STOP' // 停止操作
import mpegtsjs from "mpegts.js";
// const Z00M_IN = 'ZOOM_IN' // 焦距变大
// const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
// const UP = 'UP' // 上转
// const DOWN = 'DOWN' // 下转
// const LEFT = 'LEFT' // 左转
// const RIGHT = 'RIGHT' // 右转
// const STOP = 'STOP' // 停止操作
const Z00M_IN = 'zoomin' // 焦距变大
const Z00M_OUT = 'zoomout' // 焦距变小
const UP = 'up' // 上转
const DOWN = 'down' // 下转
const LEFT = 'left' // 左转
const RIGHT = 'right' // 右转
const STOP = 'stop' // 停止操作
let cond = ref(false)
let ACTION = '0'
let hlsRefs = []
@@ -224,6 +233,7 @@
pageNum: 1,
pageSize: 6,
})
let grad = ref(3)
let show = ref(false)
const onMonitorChange = () => {
monitorChange = pubSub.subscribe('hotelChange', (res, data) => {
@@ -235,26 +245,78 @@
getRegionsList()
})
}
// 关注
const handleCollect = async (id, status, index) => {
await postVideoCollectApi({
//弹窗收藏监听
const isDiyChange = (val)=>{
console.log(val,11222)
isDiy.value = val
if(!val){
show.value = false
videoList.value[diyIndex.value].videos = videoList.value[diyIndex.value].videos.filter(item => item.cameraIndexCode !== cameraIndexCode.value);
}
// videoList.value[diyIndex.value].videos.forEach(async (it, i) => {
// if(it.cameraIndexCode == cameraIndexCode.value){
// it.isDiy = val
// }
// })
}
const onStart = (res)=>{
}
const onEnd = (evt)=>{
const itemIndex = parseInt(evt.to.getAttribute('data-item-index')); // 当前拖拽的 item 的下标
getVideCollectCateSort({
key:videoList.value[itemIndex].key,
cameraIndexCodes:videoList.value[itemIndex].videos.map((item) => item.cameraIndexCode)
}).then((ress)=>{
// getVideCollectCateList()
})
// postVideoRemain()
initVideo()
}
// 获取关注列表
const getVideCollectCateList = async () => {
clearHlsRefs()
params.businessVideoDisplayPosition = ''
let res = await getVideCollectCate(params)
videoList.value = res.data
if(videoList.value.length<=3){
grad.value = 3
}else if(videoList.value.length<=6){
grad.value = 2
}else{
grad.value = 1
}
postVideoRemain()
// total.value = res.total
initVideo()
}
// 收藏
const handleCollect = async (id, status, index,element) => {
await getColletDiyApi({
cameraIndexCode:id,
isCollect: status == 0 ? 1 : 0
isDiy: status == 0 ? 1 : 0
})
if (status == 0) {
thisVideo.value.isCollect=1
videoList.value[index].isCollect = 1
element.isDiy = 1
} else {
thisVideo.value.isCollect=0
videoList.value[index].isCollect = 0
videoList.value[index].videos = videoList.value[index].videos.filter(item => item.cameraIndexCode !== id);
console.log('取消收藏',)
element.isDiy = 0
show.value = false
}
pubSub.publish('videoCollect', id)
// pubSub.publish('videoCollect', id)
}
// 采集
const handleAction = async (e) => {
if (e == STOP) {
ACTION = '1'
command.value = e
} else {
ACTION = '0'
command.value = e
@@ -281,7 +343,9 @@
let isCollect = ref(0)
let isDiy = ref(0)
let videoSrc = ref('')
const handleCamera = async (itemCode,resource) => {
let diyIndex = ref(null)
const handleCamera = async (itemCode,resource,index) => {
diyIndex.value = index
show.value = true
let res = await getPreviewUrlApi({
type: 'hls',
@@ -307,66 +371,7 @@
videoList.value = []
getRegionsList()
}
//获取酒店视频列表
const getRegionsList = async()=>{
clearHlsRefs()
videoLog.value = 1
try {
if (loading.value) return
let res = await getRegionsListApi({...params})
if (res.data.length > 0) {
videoList.value = res.data
cond.value = true
total.value = res.total
nextTick(() => {
if(!videoList.value.length) return false
videoList.value.forEach(async (x, index) => {
const video = document.getElementById(`monitorVideo${index}`)
const hls = new Hls({
maxBufferLength: 10, // 最大缓冲长度（秒）
maxMaxBufferLength: 15, // 缓冲区长度的上限
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
})
hls.loadSource(x.hlsUrl)
hls.attachMedia(video)
hls.on(Hls.Events.MANIFEST_PARSED, () => {
video.play()
})
hls.on(Hls.Events.ERROR, (event, data) => {
console.error('HLS 播放器遇到错误:', data);
// 根据错误类型进行处理
// initVideo()
if (data.fatal) {
switch (data.type) {
case Hls.ErrorTypes.NETWORK_ERROR:
console.log('网络错误，尝试重新加载');
hls.startLoad();
break;
case Hls.ErrorTypes.MEDIA_ERROR:
console.log('媒体错误，尝试修复');
hls.recoverMediaError();
break;
default:
console.log('无法恢复的错误，销毁播放器');
// hls.destroy();
break;
}
}
})
hlsRefs.push(hls)
})
})
} else {
videoList.value = []
cond.value = true
if (timer) clearInterval(timer)
}
loading.value = false
}catch (error) {
loading.value = false
}
}
let thisVideo = ref(null)
const handleItemVideo = (url, type, code,item) => {
thisVideo.value = item
@@ -386,22 +391,83 @@
if (type == 100) initVideo()
}, 1000)
}
const initVideo = () => {
clearHlsRefs()
nextTick(() => {
videoList.value.forEach(async (item, index) => {
const video = document.getElementById(`monitorVideo${index}`)
const hls = new Hls({
const createPlayer = (cameraIndexCode,videoElement) => {
getPreviewUrlApi({
type: 'hls',
cameraIndexCode: cameraIndexCode
}).then(res=>{
const url = res.data.url;
if(url.startsWith('ws')){
const player = mpegtsjs.createPlayer({
url: url,
type: 'flv',
isLive: true,
hasAudio: false
})
player.attachMediaElement(videoElement)
player.load()
player.play()
// 错误处理和重连机制
player.on(mpegtsjs.Events.ERROR, (err) => {
player.unload();
player.destroy();
console.error('播放器错误:', err)
// 3 秒后尝试重新加载
setTimeout(() => {
console.error('重新加载【'+cameraIndexCode+'】' )
createPlayer(cameraIndexCode,videoElement);
}, 3000)
})
hlsRefs.push(player)
}
else{
const player = new Hls({
maxBufferLength: 10, // 最大缓冲长度（秒）
maxMaxBufferLength: 15, // 缓冲区长度的上限
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
})
hls.loadSource(item.hlsUrl)
hls.attachMedia(video)
hls.on(Hls.Events.MANIFEST_PARSED, () => {
video.play()
player.loadSource(url)
player.attachMedia(videoElement)
player.on(Hls.Events.MANIFEST_PARSED, () => {
videoElement.play()
})
hlsRefs.push(hls)
player.on(Hls.Events.ERROR, (event, data) => {
// 根据错误类型进行处理
if (data.fatal) {
switch (data.type) {
case Hls.ErrorTypes.NETWORK_ERROR:
console.log('网络错误，尝试重新加载');
player.startLoad();
break;
case Hls.ErrorTypes.MEDIA_ERROR:
console.log('媒体错误，尝试修复');
player.recoverMediaError();
break;
default:
console.log('无法恢复的错误，销毁播放器');
// hls.destroy();
break;
}
}
})
hlsRefs.push(player)
}
})
}
const initVideo = () => {
clearHlsRefs()
nextTick(() => {
videoList.value.forEach(async (it, i) => {
it.videos.forEach((item,index)=>{
setTimeout(() => {
const video = document.getElementById(`collectmonitorVideo${item.cameraIndexCode}`)
createPlayer(item.cameraIndexCode,video);
}, 1000)
})
})
})
}
@@ -416,11 +482,18 @@
)
// 更新视频
const postVideoRemain = async () => {
timer = setInterval(() => {
postVideoRemainApi({
cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
})
}, 1500)
// timer = setInterval(() => {
// clearInterval(timer)
// videoList.value.forEach((items,index)=>{
// setTimeout(()=>{
// postVideoRemainApi({
// cameraIndexCode: items.videos.map((item) => item.cameraIndexCode)
// })
// },1500)
//
// })
//
// }, 1500)
}
const getVideoRegions = async () => {
let res = await getVideoRegionsApi({
@@ -444,20 +517,13 @@
}, 500)
let hotelChange = null;
onMounted(()=>{
hotelChange = pubSub.subscribe('hotelChange', (msg, data) => {
cameraName.value = ''
params.businessScenicArea = data.name
getVideoRegions()
})
onMonitorChange()
getVideCollectCateList()
console.log(draggable,'draggable')
})
onUnmounted(() => {
clearHlsRefs()
if (hotelChange) pubSub.unsubscribe(hotelChange)
if (timer) clearInterval(timer)
pubSub.unsubscribe(monitorChange)
clearHlsRefs()
})
</script>
<style></style>