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

417

Browse Source
This commit is contained in:
duanliang
2025-04-17 20:18:38 +08:00
parent d7eeea3efe
commit 09dcabadda
23 changed files with 1302 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,24 +1,28 @@
<template>
<div class="box-2">
<div class="left-nav">
<div v-if="showNav" class="ul">
<div
class="li"
:class="{ active: current == index }"
v-for="(item, index) in navList"
:key="index"
@click="handleNav(index)"
>
<span v-if="!params.businessScenicArea && index == 0"> 核心路段 </span>
<span v-else>
{{ item.dictLabel }}
</span>
</div>
<div
:class="{ active: current == 3 }"
@click="handleNav(3)" class="li">
<span>自定义</span>
</div>
<div v-if="showNav" >
<div class="ul">
<div
class="li"
:class="{ active: current == index }"
v-for="(item, index) in navList"
:key="index"
@click="handleNav(index)"
>
<!-- <span v-if="!params.businessScenicArea && index == 0"> 核心路段 </span> -->
<span>
{{ item.dictLabel }}
</span>
</div>
<div
:class="{ active: current == navList.length }"
@click="handleNav(navList.length)" class="li">
<span>收藏夹</span>
</div>
</div>
</div>
<div class="bom-box">
<Title2 title="检索" />
@@ -59,7 +63,7 @@
class="video-item"
v-for="(item, index) in videoList"
:key="index"
@click="handleItemVideo(item.hlsUrl, 100, item.cameraIndexCode)"
@click="handleItemVideo(item.hlsUrl, 100, item.cameraIndexCode,item)"
>
<div class="video-item__inner">
<div
@@ -125,6 +129,10 @@
<img src="@/assets/images/left.png" title="左转" @click="handleAction(LEFT)" />
<img src="@/assets/images/right.png" title="右转" @click="handleAction(RIGHT)" />
</div>
<div class="action-item">
<span class="item-sc" @click="handleCollectAdd(thisVideo.cameraIndexCode, thisVideo.isDiy, index)" v-if="thisVideo.isDiy==0">收藏</span>
<span class="item-sc" @click="handleCollectAdd(thisVideo.cameraIndexCode, thisVideo.isDiy, index)" v-else="thisVideo.isDiy==1">取消收藏</span>
</div>
</div>
</div>
<div class="video-right">
@@ -140,7 +148,7 @@
class="item"
v-for="(item, index) in videoList"
:key="index"
@click="handleItemVideo(item.hlsUrl, 101, item.handleItemVideo)"
@click="handleItemVideo(item.hlsUrl, 101, item.handleItemVideo,item)"
>
<div>
<p class="item-title--primary">
@@ -166,7 +174,7 @@
</template>
<script setup>
import { getVideoListApi, getPreviewUrlApi,getColletListApi } from '@/api/home'
import { getVideoListApi, getPreviewUrlApi,getColletListApi,getColletDiyListApi,getColletDiyApi} from '@/api/home'
import {
getVideoTypeApi,
getVideoRegionsApi,
@@ -225,7 +233,7 @@
postVideoRemainApi({
cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
})
}, 1000)
}, 2000)
}
const initVideo = () => {
@@ -248,7 +256,7 @@
})
}
const onInput = debounce((e) => {
getVideoRegions()
getVideoRegions('search')
}, 500)
const clearHlsRefs = () => {
if (hlsRefs.length > 0) {
@@ -266,11 +274,9 @@
const getColletList = async () => {
clearHlsRefs()
params.businessVideoDisplayPosition = ''
let res = await getColletListApi(params)
let res = await getColletDiyListApi(params)
videoList.value = res.data
if(res.data.length){
postVideoRemain()
}
// postVideoRemain()
total.value = res.total
nextTick(() => {
initVideo()
@@ -285,7 +291,7 @@
videoList.value = []
total.value = 0
current.value = e
if(e==3){
if(e==navList.value.length){
getColletList()
}else{
getVideoList()
@@ -297,7 +303,9 @@
hlsRef.destroy()
initVideo()
}
const handleItemVideo = (url, type, code) => {
let thisVideo = ref(null)
const handleItemVideo = (url, type, code,item) => {
thisVideo.value = item
videoLog.value = 2
cameraIndexCode.value = code
setTimeout(() => {
@@ -359,8 +367,36 @@
}
pubSub.publish('videoCollect', id)
}
const handleCollectAdd = async (id, status, index) => {
await getColletDiyApi({
cameraIndexCode:id,
isDiy: status == 0 ? 1 : 0
})
if(status==1){
thisVideo.value.isDiy=0
// videoList.value.forEach((item,index)=>{
// if(item.cameraIndexCode==thisVideo.value.cameraIndexCode){
// videoList.value.splice(index, 1);
// }
// })
}else{
thisVideo.value.isDiy=1
}
if(current.value==navList.value.length){
getColletList()
}
}
watch(
() => videoList.value,
(val) => {
if (val.length) {
// console.log(val,'数据更新 内容')
postVideoRemain()
}
},
{ immediate: true }
)
const getVideoList = async (val) => {
try {
if (loading.value) return
loading.value = true
@@ -373,8 +409,10 @@
let res = await getVideoListApi(params)
total.value = res.total
if (res.data.length > 0) {
postVideoRemain()
videoList.value = res.data
// console.log(videoList.value,'1111111111111111111111')
// postVideoRemain()
nextTick(() => {
videoList.value.forEach(async (x, index) => {
const video = document.getElementById(`monitorVideo${index}`)
@@ -388,6 +426,30 @@
hls.on(Hls.Events.MANIFEST_PARSED, () => {
video.play()
})
console.log(7778888)
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)
})
})
@@ -411,17 +473,25 @@
initVideo()
}
}
const getVideoRegions = async () => {
const getVideoRegions = async (search) => {
let res = await getVideoRegionsApi({
cameraName: cameraName.value,
businessScenicArea: params.businessScenicArea
})
regionList.value = res.data
regionList.value[0].show = true
if(search=='search'){
regionList.value.forEach((item,index)=>{
item.show = true
})
}
console.log(regionList.value, ' regionList.value')
}
const onMonitorChange = () => {
monitorChange = pubSub.subscribe('monitorChange', (res, data) => {
cameraName.value = ''
current.value = 0
params.businessScenicArea = data.scenicSpotId
params.pageNum = 1
@@ -473,6 +543,9 @@
.pause {
margin: 0 vw(10);
}
.item-sc{
padding:vw(10);
}
}
}
//背景色设置为透明
@@ -617,22 +690,19 @@
overflow-y: auto;
overflow-x: hidden;
/* 滚动条整体样式 */
&::-webkit-scrollbar {
width: vw(0); /* 滚动条的宽度 */
width: vw(4); /* 滚动条的宽度 */
}
/* 滚动条轨道 */
&::-webkit-scrollbar-track {
background: #f1f1f1; /* 轨道的背景色 */
background: 'transparent'; /* 轨道的背景色 */
}
/* 滚动条滑块 */
&::-webkit-scrollbar-thumb {
background: #888; /* 滑块的背景色 */
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
border-radius: 5px; /* 滑块的圆角 */
}
/* 当鼠标悬停在滚动条上时滑块的样式 */
&::-webkit-scrollbar-thumb:hover {
background: #555; /* 滑块的背景色 */
}
.li {
cursor: pointer;
width: vw(250);