类型:开发
描述:
This commit is contained in:
@@ -175,12 +175,6 @@
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
defaultCofig.series[0].label.formatter = `{value|${parseInt(echartsNum/100*props.total)}}` + '\n' + `{name|${props.label}}`;
|
defaultCofig.series[0].label.formatter = `{value|${parseInt(echartsNum/100*props.total)}}` + '\n' + `{name|${props.label}}`;
|
||||||
console.log(111111)
|
|
||||||
console.log({
|
|
||||||
...defaultCofig,
|
|
||||||
...props.config
|
|
||||||
})
|
|
||||||
console.log(222222)
|
|
||||||
setOption({
|
setOption({
|
||||||
...defaultCofig,
|
...defaultCofig,
|
||||||
...props.config
|
...props.config
|
||||||
|
|||||||
@@ -25,7 +25,7 @@
|
|||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="item" v-for="(item, index) in homeStore.visitorInfoList" :key="index">
|
<div class="item" v-for="(item, index) in homeStore.visitorInfoList" :key="index">
|
||||||
<div class="label">{{ item.name }}</div>
|
<div class="label">{{ item.name }}</div>
|
||||||
<div :class="[[3,4].includes(item.type)? 'value--error' : 'value--primary']">{{
|
<div :class="item.type==0? 'value--primary' : (item.type==1? 'value--warning' : 'value--error')">{{
|
||||||
item.value
|
item.value
|
||||||
}}</div>
|
}}</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -439,6 +439,10 @@
|
|||||||
@extend .value;
|
@extend .value;
|
||||||
color: #ff4400;
|
color: #ff4400;
|
||||||
}
|
}
|
||||||
|
&--warning {
|
||||||
|
@extend .value;
|
||||||
|
color: #DCBB48;
|
||||||
|
}
|
||||||
&--primary {
|
&--primary {
|
||||||
@extend .value;
|
@extend .value;
|
||||||
color: #02f9fa;
|
color: #02f9fa;
|
||||||
|
|||||||
@@ -55,7 +55,7 @@
|
|||||||
<div v-if="videoLog == 1" class="video-wrapper">
|
<div v-if="videoLog == 1" class="video-wrapper">
|
||||||
<div class="video-list">
|
<div class="video-list">
|
||||||
<div class="empty-box" v-if="videoList.length==0&&cond">
|
<div class="empty-box" v-if="videoList.length==0&&cond">
|
||||||
未接入
|
加载中...
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="video-item"
|
class="video-item"
|
||||||
@@ -196,6 +196,7 @@
|
|||||||
import Hls from 'hls.js'
|
import Hls from 'hls.js'
|
||||||
import emptyIco from '@/assets/images/n-icon.png'
|
import emptyIco from '@/assets/images/n-icon.png'
|
||||||
import { debounce } from 'lodash'
|
import { debounce } from 'lodash'
|
||||||
|
import mpegtsjs from "mpegts.js";
|
||||||
const Z00M_IN = 'ZOOM_IN' // 焦距变大
|
const Z00M_IN = 'ZOOM_IN' // 焦距变大
|
||||||
const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
|
const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
|
||||||
const UP = 'UP' // 上转
|
const UP = 'UP' // 上转
|
||||||
@@ -321,39 +322,59 @@
|
|||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
if(!videoList.value.length) return false
|
if(!videoList.value.length) return false
|
||||||
videoList.value.forEach(async (x, index) => {
|
videoList.value.forEach(async (x, index) => {
|
||||||
const video = document.getElementById(`monitorVideo${index}`)
|
const video = document.getElementById(`monitorVideo${index}`)
|
||||||
const hls = new Hls({
|
if(x.hlsUrl.startsWith('ws')){
|
||||||
maxBufferLength: 10, // 最大缓冲长度(秒)
|
const player = mpegtsjs.createPlayer({
|
||||||
maxMaxBufferLength: 15, // 缓冲区长度的上限
|
url: x.hlsUrl,
|
||||||
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小(字节)
|
type: 'flv',
|
||||||
})
|
isLive: true,
|
||||||
hls.loadSource(x.hlsUrl)
|
hasAudio: false
|
||||||
hls.attachMedia(video)
|
})
|
||||||
hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
player.attachMediaElement(video)
|
||||||
video.play()
|
player.load()
|
||||||
})
|
player.play()
|
||||||
hls.on(Hls.Events.ERROR, (event, data) => {
|
// 错误处理和重连机制
|
||||||
console.error('HLS 播放器遇到错误:', data);
|
player.on('error', (err) => {
|
||||||
// 根据错误类型进行处理
|
// 3 秒后尝试重新加载
|
||||||
// initVideo()
|
setTimeout(() => {
|
||||||
if (data.fatal) {
|
player.load()
|
||||||
switch (data.type) {
|
player.play()
|
||||||
case Hls.ErrorTypes.NETWORK_ERROR:
|
}, 3000)
|
||||||
console.log('网络错误,尝试重新加载');
|
})
|
||||||
hls.startLoad();
|
}else{
|
||||||
break;
|
const hls = new Hls({
|
||||||
case Hls.ErrorTypes.MEDIA_ERROR:
|
maxBufferLength: 10, // 最大缓冲长度(秒)
|
||||||
console.log('媒体错误,尝试修复');
|
maxMaxBufferLength: 15, // 缓冲区长度的上限
|
||||||
hls.recoverMediaError();
|
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小(字节)
|
||||||
break;
|
})
|
||||||
default:
|
hls.loadSource(x.hlsUrl)
|
||||||
console.log('无法恢复的错误,销毁播放器');
|
hls.attachMedia(video)
|
||||||
// hls.destroy();
|
hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||||
break;
|
video.play()
|
||||||
}
|
})
|
||||||
}
|
hls.on(Hls.Events.ERROR, (event, data) => {
|
||||||
})
|
console.error('HLS 播放器遇到错误:', data);
|
||||||
hlsRefs.push(hls)
|
// 根据错误类型进行处理
|
||||||
|
// 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)
|
||||||
|
}
|
||||||
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
@@ -416,22 +437,22 @@
|
|||||||
)
|
)
|
||||||
// 更新视频
|
// 更新视频
|
||||||
const postVideoRemain = async () => {
|
const postVideoRemain = async () => {
|
||||||
timer = setInterval(() => {
|
// timer = setInterval(() => {
|
||||||
postVideoRemainApi({
|
// postVideoRemainApi({
|
||||||
cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
|
// cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
|
||||||
})
|
// })
|
||||||
}, 1500)
|
// }, 1500)
|
||||||
}
|
}
|
||||||
const getVideoRegions = async () => {
|
const getVideoRegions = async () => {
|
||||||
let res = await getVideoRegionsApi({
|
let res = await getVideoRegionsApi({
|
||||||
cameraName: cameraName.value,
|
cameraName: cameraName.value,
|
||||||
businessScenicArea: params.businessScenicArea
|
businessScenicArea: params.businessScenicArea
|
||||||
})
|
})
|
||||||
regionList.value = res.data
|
regionList.value = res.data[0].resourcesList;
|
||||||
regionList.value.forEach((item,index)=>{
|
// regionList.value.forEach((item,index)=>{
|
||||||
// item.show = true
|
// // item.show = true
|
||||||
item.videoResources=item.resourcesList[0].videoResources
|
// item.videoResources=item.resourcesList[0].videoResources
|
||||||
})
|
// })
|
||||||
regionList.value[0].show = false
|
regionList.value[0].show = false
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -435,7 +435,7 @@ import pubSub from 'pubsub-js'
|
|||||||
.content {
|
.content {
|
||||||
margin-left: vw(4);
|
margin-left: vw(4);
|
||||||
padding: 0 vw(10);
|
padding: 0 vw(10);
|
||||||
width: vw(760);
|
width: vw(460);
|
||||||
height: vh(24);
|
height: vh(24);
|
||||||
line-height: vh(24);
|
line-height: vh(24);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|||||||
Reference in New Issue
Block a user