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-09 17:58:30 +08:00
parent e967ca0514
commit 69213dac03
1 changed files with 163 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

243
src/views/monitor/components/box-2.vue
View File

@@ -2,27 +2,24 @@
<div class="box-2"> <div class="box-2">
<div class="left-nav"> <div class="left-nav">
<div v-if="showNav" > <div v-if="showNav" >
<div class="ul"> <div class="ul">
<div <div
class="li" class="li"
:class="{ active: current == index }" :class="{ active: current == index }"
v-for="(item, index) in navList" v-for="(item, index) in navList"
:key="index" :key="index"
@click="handleNav(index)" @click="handleNav(index)"
> >
<!-- <span v-if="!params.businessScenicArea && index == 0"> 核心路段 </span> --> <span>
<span> {{ item }}
{{ item.dictLabel }}
</span> </span>
</div> </div>
<div <div
:class="{ active: current == navList.length }" :class="{ active: current == navList.length }"
@click="handleNav(navList.length)" class="li"> @click="handleNav(navList.length)" class="li">
<span>收藏夹</span> <span>收藏夹</span>
</div> </div>
</div> </div>
</div> </div>
<div class="bom-box"> <div class="bom-box">
<Title2 title="检索" /> <Title2 title="检索" />
@@ -52,7 +49,7 @@
alt="" alt=""
/> />
{{resource.regions}} {{resource.regions}}
</div> </div>
<div v-if="resource.show"> <div v-if="resource.show">
<div <div
@@ -64,9 +61,9 @@
{{ res.cameraName || res.cameraIndexCode }} {{ res.cameraName || res.cameraIndexCode }}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@@ -202,18 +199,19 @@
postVideoControlApi, postVideoControlApi,
postVideoCollectApi postVideoCollectApi
} from '@/api/monitor' } from '@/api/monitor'
import mpegtsjs from 'mpegts.js'
import { debounce } from 'lodash' import { debounce } from 'lodash'
import pubSub from 'pubsub-js' import pubSub from 'pubsub-js'
import Hls from 'hls.js' import Hls from 'hls.js'
const Z00M_IN = 'ZOOM_IN' // 焦距变大 const Z00M_IN = 'zoomin' // 焦距变大
const Z00M_OUT = 'ZOOM_OUT' // 焦距变小 const Z00M_OUT = 'zoomout' // 焦距变小
const UP = 'UP' // 上转 const UP = 'up' // 上转
const DOWN = 'DOWN' // 下转 const DOWN = 'down' // 下转
const LEFT = 'LEFT' // 左转 const LEFT = 'left' // 左转
const RIGHT = 'RIGHT' // 右转 const RIGHT = 'right' // 右转
const STOP = 'STOP' // 停止操作 const STOP = 'stop' // 停止操作
let ACTION = '0' let ACTION = '0'
const props = { const props = {
@@ -249,41 +247,97 @@
let timer = null let timer = null
const postVideoRemain = async () => { const postVideoRemain = async () => {
if(!videoList.value.length) return false; // if(!videoList.value.length) return false;
timer = setInterval(() => { // timer = setInterval(() => {
postVideoRemainApi({ // postVideoRemainApi({
cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode) // cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
}) // })
}, 2000) // }, 2000)
} }
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) => {
console.error('播放器错误【'+cameraIndexCode+'】:', err)
player.unload();
player.destroy();
// 3 秒后尝试重新加载
setTimeout(() => {
console.error('重新加载【'+cameraIndexCode+'】' )
createPlayer(cameraIndexCode,videoElement);
}, 3000)
const initVideo = () => { })
clearHlsRefs() player.on(mpegtsjs.Events.LOADING_COMPLETE, (err) => {
nextTick(() => { console.error('加载完成:', err)
videoList.value.forEach(async (item, index) => { })
const video = document.getElementById(`monitorVideo${index}`) hlsRefs.push(player)
const hls = new Hls({ }
else{
const player = new Hls({
maxBufferLength: 10, // 最大缓冲长度（秒） maxBufferLength: 10, // 最大缓冲长度（秒）
maxMaxBufferLength: 15, // 缓冲区长度的上限 maxMaxBufferLength: 15, // 缓冲区长度的上限
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节） maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
}) })
hls.loadSource(item.hlsUrl) player.loadSource(url)
hls.attachMedia(video) player.attachMedia(videoElement)
hls.on(Hls.Events.MANIFEST_PARSED, () => { player.on(Hls.Events.MANIFEST_PARSED, () => {
video.play() 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 (item, index) => {
const videoElement = document.getElementById(`monitorVideo${index}`)
createPlayer(item.cameraIndexCode,videoElement);
}) })
}) })
} }
const onInput = debounce((e) => { const onInput = debounce((e) => {
if(e){ if(e){
getVideoRegions('search') getVideoRegions('search')
}else{ }else{
getVideoRegions() getVideoRegions()
} }
}, 500) }, 500)
const clearHlsRefs = () => { const clearHlsRefs = () => {
if (hlsRefs.length > 0) { if (hlsRefs.length > 0) {
@@ -303,7 +357,7 @@
videoList.value = [] videoList.value = []
getVideoList() getVideoList()
} }
} }
const getColletList = async () => { const getColletList = async () => {
clearHlsRefs() clearHlsRefs()
@@ -338,30 +392,60 @@
initVideo() initVideo()
} }
let thisVideo = ref(null) let thisVideo = ref(null)
const handleItemVideo = (url, type, code,item) => { const handleItemVideo = async (url, type, code, item) => {
thisVideo.value = item let res = await getPreviewUrlApi({
cameraIndexCode: code,
type: 'hls'
})
url = res.data.url
thisVideo.value = item
videoLog.value = 2 videoLog.value = 2
cameraIndexCode.value = code cameraIndexCode.value = code
setTimeout(() => { setTimeout(() => {
hlsRef = new Hls({ if (url.startsWith('ws')) {
maxBufferLength: 10, // 最大缓冲长度（秒） hlsRef = mpegtsjs.createPlayer({
maxMaxBufferLength: 15, // 缓冲区长度的上限 url: url,
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节） type: 'flv',
}) isLive: true,
hlsRef.loadSource(url) hasAudio: false
hlsRef.attachMedia(videoRef.value) })
hlsRef.on(Hls.Events.MANIFEST_PARSED, () => { hlsRef.attachMediaElement(videoRef.value)
videoRef.value.play() hlsRef.load()
}) hlsRef.play()
// 错误处理和重连机制
hlsRef.on('error', (err) => {
console.error('播放器错误:', err)
// 3 秒后尝试重新加载
hlsRef.unload()
hlsRef.destroy()
// 3 秒后尝试重新加载
setTimeout(() => {
console.error('重新加载【' + cameraIndexCode + '】')
handleItemVideo(url, 101, code, item);
}, 3000)
})
} else {
hlsRef = new Hls({
maxBufferLength: 10, // 最大缓冲长度（秒）
maxMaxBufferLength: 15, // 缓冲区长度的上限
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
})
hlsRef.loadSource(url)
hlsRef.attachMedia(videoRef.value)
hlsRef.on(Hls.Events.MANIFEST_PARSED, () => {
videoRef.value.play()
})
}
if (type == 100) initVideo() if (type == 100) initVideo()
}, 1000) }, 1000)
} }
const handleAction = async (e) => { const handleAction = async (e) => {
command.value = e
if (e == STOP) { if (e == STOP) {
ACTION = '1' ACTION = '1'
} else { } else {
ACTION = '0' ACTION = '0'
command.value = e
} }
await postVideoControlApi({ await postVideoControlApi({
action: ACTION, action: ACTION,
@@ -381,18 +465,17 @@
} }
const handleRegList = (item,i,x)=>{ const handleRegList = (item,i,x)=>{
regionList.value[i].resourcesList[x].show = !regionList.value[i].resourcesList[x].show regionList.value[i].resourcesList[x].show = !regionList.value[i].resourcesList[x].show
} }
const handleCamera = async (itemCode,resource) => { const handleCamera = async (itemCode,resource) => {
show.value = true show.value = true
let res = await getPreviewUrlApi({ let res = await getPreviewUrlApi({
type: 'hls', type: 'hls',
cameraIndexCode:itemCode cameraIndexCode: itemCode
}) })
console.log(res,'rrrrrrrrrrrrrr')
cameraIndexCode.value = itemCode; cameraIndexCode.value = itemCode;
isCollect.value = resource.isCollect isCollect.value = resource.isCollect
isDiy.value = resource.isDiy isDiy.value = resource.isDiy
videoSrc.value = res.data.url videoSrc.value = res.data.url
} }
const handleCollect = async (id, status, index) => { const handleCollect = async (id, status, index) => {
@@ -451,7 +534,7 @@
let res = await getVideoListApi(params) let res = await getVideoListApi(params)
total.value = res.total total.value = res.total
if (res.data.length > 0) { if (res.data.length > 0) {
videoList.value = res.data videoList.value = res.data
// console.log(videoList.value,'1111111111111111111111') // console.log(videoList.value,'1111111111111111111111')
// postVideoRemain() // postVideoRemain()
@@ -485,13 +568,13 @@
break; break;
default: default:
console.log('无法恢复的错误，销毁播放器'); console.log('无法恢复的错误，销毁播放器');
// hls.destroy(); // hls.destroy();
break; break;
} }
} }
}) })
hlsRefs.push(hls) hlsRefs.push(hls)
}) })
}) })
@@ -520,7 +603,7 @@
cameraName: cameraName.value, cameraName: cameraName.value,
businessScenicArea: params.businessScenicArea businessScenicArea: params.businessScenicArea
}) })
regionList.value = res.data regionList.value = res.data
regionList.value.videoResources = res.data.videoResources regionList.value.videoResources = res.data.videoResources
// regionList.value[0].show = true // regionList.value[0].show = true
@@ -532,7 +615,7 @@
r.show = false r.show = false
}) })
}) })
if(search=='search'){ if(search=='search'){
regionList.value.forEach((item,index)=>{ regionList.value.forEach((item,index)=>{
item.show = true item.show = true
@@ -541,7 +624,7 @@
}) })
}) })
} }
console.log(regionList.value, ' regionList.value') console.log(regionList.value, ' regionList.value')
} }
const onMonitorChange = () => { const onMonitorChange = () => {
@@ -557,8 +640,8 @@
getVideoType() getVideoType()
getVideoRegions() getVideoRegions()
},1500) },1500)
}) })
} }
onMounted(() => { onMounted(() => {
@@ -588,7 +671,7 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.new-title{ .new-title{
margin-bottom:vh(20); margin-bottom:vh(20);
color:#fff; color:#fff;
@@ -671,7 +754,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.search-icon { .search-icon {
width: vw(20); width: vw(20);
height: vw(20); height: vw(20);
@@ -705,7 +788,7 @@
cursor: pointer; cursor: pointer;
position: relative; position: relative;
padding-top: vh(30); padding-top: vh(30);
// border-left: vw(2) solid #37d8fc; // border-left: vw(2) solid #37d8fc;
&:nth-child(1) { &:nth-child(1) {
padding-top: 0; padding-top: 0;
@@ -783,7 +866,7 @@
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
/* 滚动条整体样式 */ /* 滚动条整体样式 */
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: vw(4); /* 滚动条的宽度 */ width: vw(4); /* 滚动条的宽度 */
} }