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-11-13 21:18:45 +08:00
parent a23660efd6
commit d1411314a5
18 changed files with 1724 additions and 1100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,19 +7,19 @@
</div> -->
<div class="type-item" v-for="(item,index) in videoList">
<div class="type-title">{{item.label}}</div>
<draggable
:data-item-index="index"
class="item-element"
:item-key="item.key"
:list="item.videos"
ghost-class="ghost"
<draggable
:data-item-index="index"
class="item-element"
:item-key="item.key"
:list="item.videos"
ghost-class="ghost"
:force-fallback="true" chosen-class="chosenClass" animation="300"
@start="onStart" @end="onEnd">
<template #item="{ element }">
<div class="video-item" :style="{
width:(100/grad)+'%'
}">
<div class="video-item__inner" @click.stop="handleCamera(element.cameraIndexCode,element,index)">
<div
v-if="element.isDiy == 1"
@@ -45,12 +45,12 @@
{{ element.cameraName || element.scenicAreaId }}
</p>
</div>
</div>
</div>
</template>
</draggable>
</div>
</div>
<!-- <div class="pagination">
<el-pagination
@@ -93,6 +93,7 @@
import Hls from 'hls.js'
import emptyIco from '@/assets/images/n-icon.png'
import { debounce } from 'lodash'
import mpegtsjs from "mpegts.js";
const Z00M_IN = 'ZOOM_IN' // 焦距变大
const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
const UP = 'UP' // 上转
@@ -139,17 +140,17 @@
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 = 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 的下标
@@ -157,7 +158,7 @@
key:videoList.value[itemIndex].key,
cameraIndexCodes:videoList.value[itemIndex].videos.map((item) => item.cameraIndexCode)
}).then((ress)=>{
// getVideCollectCateList()
})
// postVideoRemain()
@@ -179,7 +180,7 @@
}
postVideoRemain()
// total.value = res.total
initVideo()
}
// 收藏
@@ -189,12 +190,12 @@
isDiy: status == 0 ? 1 : 0
})
if (status == 0) {
element.isDiy = 1
} else {
videoList.value[index].videos = videoList.value[index].videos.filter(item => item.cameraIndexCode !== id);
videoList.value[index].videos = videoList.value[index].videos.filter(item => item.cameraIndexCode !== id);
console.log('取消收藏',)
element.isDiy = 0
show.value = false
@@ -283,27 +284,49 @@
clearHlsRefs()
nextTick(() => {
videoList.value.forEach(async (it, i) => {
it.videos.forEach((item,index)=>{
setTimeout(() => {
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)
}
if(item.hlsUrl.startsWith('ws')){
const player = mpegtsjs.createPlayer({
url: item.hlsUrl,
type: 'flv',
isLive: true,
hasAudio: false
})
player.attachMediaElement(video)
player.load()
player.play()
// 错误处理和重连机制
player.on('error', (err) => {
// 3 秒后尝试重新加载
setTimeout(() => {
player.load()
player.play()
}, 3000)
})
}else{
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)
}
}
}, 1000)
})
})
})
}
@@ -318,18 +341,18 @@
)
// 更新视频
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({
@@ -343,7 +366,7 @@
item.videoResources=item.resourcesList[0].videoResources
})
regionList.value[0].show = true
}
const handleRegions = (e) => {
regionList.value[e].show = !regionList.value[e].show
@@ -359,7 +382,7 @@
onUnmounted(() => {
if (timer) clearInterval(timer)
clearHlsRefs()
})
</script>
<style></style>
@@ -393,7 +416,7 @@
}
overflow: auto;
}
.type-title{
position:absolute;
left:vw(-5);
@@ -528,7 +551,7 @@
}
&-list {
// gap: vw(3);
display: flex;
flex-wrap: wrap;
align-content: flex-start;
@@ -547,7 +570,7 @@
// border-radius: 5px; /* 滑块的圆角 */
// }
// overflow: auto;
}
&-item {
position: relative;