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
2026-01-14 01:11:54 +08:00
parent 3aea6f740b
commit 80a448f9b9
1 changed files with 118 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -182,9 +182,8 @@
</div>
<VideoDialog v-model="show" :cameraIndexCode="cameraIndexCode" :isDiy="isDiy" :isCollect="isCollect" :src="videoSrc" />
</template>
<script setup>
import { getVideCollectCate,getVideCollectCateSort,getColletDiyApi,getPreviewUrlApi} from '@/api/home'
import { getRegionsListApi,getPreviewUrlApi } from '@/api/home'
import {
getVideoTypeApi,
getVideoRegionsApi,
@@ -192,11 +191,11 @@ import {
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";
import WebRTCWhep from "whepts";
// const Z00M_IN = 'ZOOM_IN' // 焦距变大
// const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
@@ -234,7 +233,6 @@ let params = reactive({
pageNum: 1,
pageSize: 6,
})
let grad = ref(3)
let show = ref(false)
const onMonitorChange = () => {
monitorChange = pubSub.subscribe('hotelChange', (res, data) => {
@@ -246,72 +244,24 @@ const onMonitorChange = () => {
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
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({
// 关注
const handleCollect = async (id, status, index) => {
await postVideoCollectApi({
cameraIndexCode:id,
isDiy: status == 0 ? 1 : 0
isCollect: status == 0 ? 1 : 0
})
if (status == 0) {
element.isDiy = 1
if(thisVideo.value){
thisVideo.value.isCollect=1
}
videoList.value[index].isCollect = 1
} else {
videoList.value[index].videos = videoList.value[index].videos.filter(item => item.cameraIndexCode !== id);
console.log('取消收藏',)
element.isDiy = 0
show.value = false
if(thisVideo.value){
thisVideo.value.isCollect=0
}
videoList.value[index].isCollect = 0
}
// pubSub.publish('videoCollect', id)
pubSub.publish('videoCollect', id)
}
// 采集
const handleAction = async (e) => {
@@ -338,15 +288,18 @@ const handleAction = async (e) => {
// 返回列表
const handleBack = () => {
videoLog.value = 1
hlsRef.destroy()
try{
hlsRef.destroy()
}catch (e) {
}
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
const handleCamera = async (itemCode,resource) => {
show.value = true
let res = await getPreviewUrlApi({
type: 'hls',
@@ -361,7 +314,12 @@ const handleCamera = async (itemCode,resource,index) => {
const clearHlsRefs = () => {
if (hlsRefs.length > 0) {
hlsRefs.map((item) => {
item.destroy()
try{
item.destroy()
}catch (e) {
}
})
hlsRefs = []
}
@@ -378,37 +336,6 @@ const currentChange = (e) => {
videoList.value = []
getRegionsList()
}
let thisVideo = ref(null)
const handleItemVideo = (url, type, code,item) => {
thisVideo.value = item
videoLog.value = 2
cameraIndexCode.value = code
setTimeout(() => {
if (url.startsWith('http://192.168.77.200:8050/')) {
hlsRef = new WebRTCWhep({
url: url, // WHEP 服务器地址
container: videoRef.value, // 视频播放容器
onError: (error) => {
console.error('播放错误:', error)
}
})
} 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()
}, 1000)
}
const createPlayer = (cameraIndexCode,videoElement) => {
getPreviewUrlApi({
type: 'hls',
@@ -417,7 +344,7 @@ const createPlayer = (cameraIndexCode,videoElement) => {
const url = res.data.url;
if(url.startsWith('http://192.168.77.200:8050/')){
const player = new WebRTCWhep({
url: url, // WHEP 服务器地址
url:url, // WHEP 服务器地址
container: videoElement, // 视频播放容器
onError: (error) => {
console.error('播放错误:', error)
@@ -459,19 +386,76 @@ const createPlayer = (cameraIndexCode,videoElement) => {
}
})
}
//获取酒店视频列表
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(`hotelmonitorVideo${index}`)
createPlayer(x.cameraIndexCode,video);
})
})
} else {
videoList.value = []
cond.value = true
if (timer) clearInterval(timer)
}
loading.value = false
}catch (error) {
loading.value = false
}
}
let thisVideo = ref(null)
const handleItemVideo = async (url, type, code, item) => {
let res = await getPreviewUrlApi({
cameraIndexCode: code,
type: 'hls'
})
url = res.data.url
thisVideo.value = item
videoLog.value = 2
cameraIndexCode.value = code
setTimeout(() => {
if (url.startsWith('http://192.168.77.200:8050/')) {
hlsRef = new WebRTCWhep({
url: url, // WHEP 服务器地址
container: videoRef.value, // 视频播放容器
onError: (error) => {
console.error('播放错误:', error)
}
})
} 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()
}, 1000)
}
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)
})
videoList.value.forEach(async (item, index) => {
const video = document.getElementById(`hotelmonitorVideo${index}`)
createPlayer(item.cameraIndexCode,video);
})
})
}
@@ -487,16 +471,9 @@ watch(
// 更新视频
const postVideoRemain = async () => {
// timer = setInterval(() => {
// clearInterval(timer)
// videoList.value.forEach((items,index)=>{
// setTimeout(()=>{
// postVideoRemainApi({
// cameraIndexCode: items.videos.map((item) => item.cameraIndexCode)
// })
// },1500)
//
// postVideoRemainApi({
// cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
// })
//
// }, 1500)
}
const getVideoRegions = async () => {
@@ -504,14 +481,14 @@ const getVideoRegions = async () => {
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
if(res.data.length>0){
regionList.value = res.data[0].resourcesList;
regionList.value[0].show = false
}
// regionList.value.forEach((item,index)=>{
// // item.show = true
// item.videoResources=item.resourcesList[0].videoResources
// })
}
const handleRegions = (e) => {
regionList.value[e].show = !regionList.value[e].show
@@ -521,13 +498,21 @@ const onInput = debounce((e) => {
}, 500)
let hotelChange = null;
onMounted(()=>{
getVideCollectCateList()
console.log(draggable,'draggable')
hotelChange = pubSub.subscribe('hotelChange', (msg, data) => {
cameraName.value = ''
params.businessScenicArea = data.name
regionList.value=[];
getVideoRegions()
})
onMonitorChange()
})
onUnmounted(() => {
if (timer) clearInterval(timer)
clearHlsRefs()
if (hotelChange) pubSub.unsubscribe(hotelChange)
if (timer) clearInterval(timer)
pubSub.unsubscribe(monitorChange)
})
</script>
<style></style>