类型:开发

描述:
This commit is contained in:
2025-12-10 14:00:33 +08:00
parent 5cbb12f15d
commit 5fd201a41a
7 changed files with 1342 additions and 1131 deletions

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"
@@ -42,15 +42,15 @@
:controls="false"
/>
<p class="video-item__title--primary">
{{ element.cameraName || element.scenicAreaId }}
{{ element.cameraName || element.cameraIndexCode }}
</p>
</div>
</div>
</div>
</template>
</draggable>
</div>
</div>
<!-- <div class="pagination">
<el-pagination
@@ -80,287 +80,346 @@
</template>
<script setup>
import { getVideCollectCate,getVideCollectCateSort,getColletDiyApi,getPreviewUrlApi} from '@/api/home'
import {
getVideoTypeApi,
getVideoRegionsApi,
postVideoRemainApi,
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' // 停止操作
let cond = ref(false)
let ACTION = '0'
let hlsRefs = []
let hlsRef = null
let timer = null
let videoLog = ref(1)
let videoList = ref([])
let cameraIndexCode = ref('')
let videoRef = ref()
let monitorChange = null
let total = ref(0)
let loading = ref(false)
let command = ref('')
let cameraName = ref('')
let regionList = ref()
let params = reactive({
businessScenicArea: "",
cameraName: "",
pageNum: 1,
pageSize: 6,
})
let grad = ref(3)
let show = ref(false)
const onMonitorChange = () => {
monitorChange = pubSub.subscribe('hotelChange', (res, data) => {
params.businessScenicArea = data.name
params.pageNum = 1
videoList.value = []
total.value = 0
cond.value = false
getRegionsList()
})
}
//弹窗收藏监听
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
console.log(res,videoList.value.length,'ressssssssssssss')
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,
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);
console.log('取消收藏',)
element.isDiy = 0
show.value = false
}
// pubSub.publish('videoCollect', id)
}
// 采集
const handleAction = async (e) => {
if (e == STOP) {
ACTION = '1'
} else {
ACTION = '0'
command.value = e
}
await postVideoControlApi({
action: ACTION,
command: command.value,
cameraIndexCode: cameraIndexCode.value
})
if (e == STOP) {
command.value = ''
}
ElMessage({
message: '操作成功',
type: 'success'
})
}
// 返回列表
const handleBack = () => {
videoLog.value = 1
hlsRef.destroy()
initVideo()
}
let isCollect = ref(0)
let isDiy = ref(0)
let videoSrc = ref('')
let diyIndex = ref(null)
const handleCamera = async (itemCode,resource,index) => {
diyIndex.value = index
show.value = true
let res = await getPreviewUrlApi({
type: 'hls',
cameraIndexCode:itemCode
})
cameraIndexCode.value = itemCode;
isCollect.value = resource.isCollect
isDiy.value = resource.isDiy
videoSrc.value = res.data.url
}
//清除 hls
const clearHlsRefs = () => {
if (hlsRefs.length > 0) {
hlsRefs.map((item) => {
item.destroy()
})
hlsRefs = []
}
}
// 分页
const currentChange = (e) => {
clearHlsRefs()
videoList.value = []
getRegionsList()
}
import { getVideCollectCate,getVideCollectCateSort,getColletDiyApi,getPreviewUrlApi} from '@/api/home'
import {
getVideoTypeApi,
getVideoRegionsApi,
postVideoRemainApi,
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'
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 = []
let hlsRef = null
let timer = null
let videoLog = ref(1)
let videoList = ref([])
let cameraIndexCode = ref('')
let videoRef = ref()
let monitorChange = null
let total = ref(0)
let loading = ref(false)
let command = ref('')
let cameraName = ref('')
let regionList = ref()
let params = reactive({
businessScenicArea: "",
cameraName: "",
pageNum: 1,
pageSize: 6,
})
let grad = ref(3)
let show = ref(false)
const onMonitorChange = () => {
monitorChange = pubSub.subscribe('hotelChange', (res, data) => {
params.businessScenicArea = data.name
params.pageNum = 1
videoList.value = []
total.value = 0
cond.value = false
getRegionsList()
})
}
//弹窗收藏监听
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) => {
let thisVideo = ref(null)
const handleItemVideo = (url, type, code,item) => {
thisVideo.value = item
videoLog.value = 2
cameraIndexCode.value = code
setTimeout(() => {
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()
}, 1000)
}
const initVideo = () => {
clearHlsRefs()
nextTick(() => {
videoList.value.forEach(async (it, i) => {
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)
}
}, 1000)
})
})
})
}
watch(
() => videoList.value,
(val) => {
if (val.length) {
postVideoRemain()
}
},
{ immediate: true }
)
// 更新视频
const postVideoRemain = async () => {
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
item.videoResources=item.resourcesList[0].videoResources
})
regionList.value[0].show = true
}
const handleRegions = (e) => {
regionList.value[e].show = !regionList.value[e].show
}
const onInput = debounce((e) => {
getVideoRegions()
}, 500)
let hotelChange = null;
onMounted(()=>{
getVideCollectCateList()
console.log(draggable,'draggable')
})
onUnmounted(() => {
if (timer) clearInterval(timer)
clearHlsRefs()
})
// 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,
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);
console.log('取消收藏',)
element.isDiy = 0
show.value = false
}
// pubSub.publish('videoCollect', id)
}
// 采集
const handleAction = async (e) => {
if (e == STOP) {
ACTION = '1'
command.value = e
} else {
ACTION = '0'
command.value = e
}
await postVideoControlApi({
action: ACTION,
command: command.value,
cameraIndexCode: cameraIndexCode.value
})
if (e == STOP) {
command.value = ''
}
ElMessage({
message: '操作成功',
type: 'success'
})
}
// 返回列表
const handleBack = () => {
videoLog.value = 1
hlsRef.destroy()
initVideo()
}
let isCollect = ref(0)
let isDiy = ref(0)
let videoSrc = ref('')
let diyIndex = ref(null)
const handleCamera = async (itemCode,resource,index) => {
diyIndex.value = index
show.value = true
let res = await getPreviewUrlApi({
type: 'hls',
cameraIndexCode:itemCode
})
cameraIndexCode.value = itemCode;
isCollect.value = resource.isCollect
isDiy.value = resource.isDiy
videoSrc.value = res.data.url
}
//清除 hls
const clearHlsRefs = () => {
if (hlsRefs.length > 0) {
hlsRefs.map((item) => {
item.destroy()
})
hlsRefs = []
}
}
// 分页
const currentChange = (e) => {
clearHlsRefs()
videoList.value = []
getRegionsList()
}
let thisVideo = ref(null)
const handleItemVideo = (url, type, code,item) => {
thisVideo.value = item
videoLog.value = 2
cameraIndexCode.value = code
setTimeout(() => {
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()
}, 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(() => {
videoList.value.forEach(async (it, i) => {
it.videos.forEach((item,index)=>{
setTimeout(() => {
const video = document.getElementById(`collectmonitorVideo${item.cameraIndexCode}`)
createPlayer(item.cameraIndexCode,video);
}, 1000)
})
})
})
}
watch(
() => videoList.value,
(val) => {
if (val.length) {
postVideoRemain()
}
},
{ immediate: true }
)
// 更新视频
const postVideoRemain = async () => {
// 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
})
regionList.value = res.data
regionList.value.forEach((item,index)=>{
// item.show = true
item.videoResources=item.resourcesList[0].videoResources
})
regionList.value[0].show = true
}
const handleRegions = (e) => {
regionList.value[e].show = !regionList.value[e].show
}
const onInput = debounce((e) => {
getVideoRegions()
}, 500)
let hotelChange = null;
onMounted(()=>{
getVideCollectCateList()
console.log(draggable,'draggable')
})
onUnmounted(() => {
if (timer) clearInterval(timer)
clearHlsRefs()
})
</script>
<style></style>
<style scoped lang="scss">
@@ -393,7 +452,7 @@
}
overflow: auto;
}
.type-title{
position:absolute;
left:vw(-5);