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-11-13 21:18:45 +08:00
parent a23660efd6
commit d1411314a5
18 changed files with 1724 additions and 1100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

352
src/components/HlsPlayer/index-bak.vue Normal file
View File

@@ -0,0 +1,352 @@
<template>
<div v-show="isActive" class="myVideo-container">
<video
class="myVideo"
ref="videoElement"
muted
playsinline
:controls="false"
disablePictureInPicture
></video>
<!-- <div v-if="loading" class="loading-overlay pointer-events-none">
<div class="loading-text">{{ loadingText }}</div>
</div> -->
</div>
</template>
<script>
import Hls from 'hls.js'
export default {
name: 'HlsPlayer',
props: {
url: {
type: String,
default: ''
},
isActive: {
type: Boolean,
default: true
},
width: {
type: [String, Number],
default: '100%'
},
height: {
type: [String, Number],
default: '100%'
}
},
data() {
return {
hls: null,
video: null,
loading: false,
loadingText: '加载中...',
retryCount: 0,
maxRetries: 3,
isReady: false,
playAttempts: 0,
maxPlayAttempts: 3,
cleanupTimeout: null
}
},
computed: {
videoStyle() {
const style = {}
if (this.width) {
style.width = typeof this.width === 'number' ? `${this.width}px` : this.width
}
if (this.height) {
style.height = typeof this.height === 'number' ? `${this.height}px` : this.height
}
return style
}
},
watch: {
isActive: {
handler(newValue) {
if (newValue) {
this.$nextTick(this.initializePlayer)
} else {
this.immediateCleanup()
}
},
immediate: true
},
url(newUrl) {
// console.log(newUrl,'77777777777777777777777777777777')
if (newUrl && this.isActive) {
this.initializePlayer()
}
}
},
mounted() {
this.video = this.$refs.videoElement
this.registerVideoEvents()
},
methods: {
registerVideoEvents() {
const events = ['canplay', 'waiting', 'playing', 'error', 'stalled', 'suspend']
events.forEach((event) => {
this.video.addEventListener(event, this.handleVideoEvent)
})
},
handleVideoEvent(event) {
switch (event.type) {
case 'canplay':
this.isReady = true
break
case 'waiting':
this.showLoadingIndicator('缓冲中...')
break
case 'playing':
this.loading = false
break
case 'error':
this.handlePlaybackError()
break
case 'stalled':
this.showLoadingIndicator('播放卡顿...')
break
case 'suspend':
this.cleanupNetworkResources()
break
}
},
immediateCleanup() {
// 立即停止网络请求
if (this.hls) {
this.hls.stopLoad()
this.hls.detachMedia()
}
// 延迟完全清理以避免播放卡顿
this.cleanupTimeout = setTimeout(() => {
// 仅在不重新初始化播放器时才调用 fullCleanup
if (!this.url || !this.isActive) {
this.fullCleanup()
}
}, 1000)
},
fullCleanup() {
if (this.hls) {
this.hls.destroy()
this.hls = null
}
if (this.video) {
this.video.pause()
this.video.removeAttribute('src')
this.video.load()
}
this.loading = false
this.retryCount = 0
this.isReady = false
this.playAttempts = 0
if (this.cleanupTimeout) {
clearTimeout(this.cleanupTimeout)
}
},
initializePlayer() {
if (!this.isActive || !this.url) return
// 如果是重新初始化播放器，先清理已存在的资源
if (this.hls) {
this.immediateCleanup()
}
this.hls = new Hls({
// 内存优化配置
maxBufferSize: 0, // 降低缓冲区大小（15MB）
maxBufferLength: 0.1, // 更小的缓冲窗口
liveSyncDuration: 1, // 紧跟直播点
liveMaxLatencyDuration: 5, // 最大延迟5秒
liveDurationInfinity: true,
lowLatencyMode: true, // 启用低延迟模式
maxMaxBufferLength: 60,
backBufferLength: 1, // 减少保留的缓冲数据
manifestLoadingTimeOut: 10000,
manifestLoadingMaxRetry: 5,
fragLoadingTimeOut: 5000,
fragLoadingMaxRetry: 2,
enableWorker: true, // 启用Web Worker
recycleVideoFrames: true, // 启用帧回收
startLevel: -1,
autoStartLoad: true,
maxBufferHole: 2, // 允许更大的时间缺口
highBufferWatchdogPeriod: 4, // 延长监控周期
nudgeMaxRetry: 5, // 增加微调重试次数
nudgeOffset: 0.05, // 微调步长（秒）
jumpGaps: false,
stallThreshold: 1000
})
this.hls.attachMedia(this.video)
this.hls.loadSource(this.url)
// 事件处理
this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
this.loading = false
this.retryCount = 0
this.safePlay()
})
this.hls.on(Hls.Events.ERROR, (event, data) => {
console.log('核心视频错误',data.type)
// this.hls.startLoad(); //重连
if (data.type === Hls.ErrorTypes.BUFFER_STALLED_ERROR) {
console.error('缓冲停滞错误，尝试重新加载视频');
this.hls.startLoad(); // 尝试重新加载视频
}
this.handleHlsError(data)
})
this.hls.on(Hls.Events.BUFFER_EOS, () => {
this.cleanupNetworkResources()
})
},
initVideo() {
this.beforeDestroy()
this.hls = new Hls({
maxBufferLength: 30, // 最大缓冲长度（秒）
maxMaxBufferLength: 15, // 缓冲区长度的上限
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
})
this.hls.attachMedia(this.video)
this.hls.loadSource(this.url)
// 事件处理
this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
this.loading = false
this.retryCount = 0
this.safePlay()
})
this.hls.on(Hls.Events.ERROR, (event, data) => {
this.hls.startLoad(); //重连
this.handleHlsError(data)
})
this.hls.on(Hls.Events.BUFFER_EOS, () => {
this.cleanupNetworkResources()
})
},
cleanupNetworkResources() {
// 清理已播放的缓冲数据
if (this.hls && this.video) {
try {
const currentTime = this.video.currentTime
this.hls.mediaBuffer = null
if (this.hls.bufferTimer) {
clearInterval(this.hls.bufferTimer)
}
this.hls.flushBuffer()
this.video.currentTime = currentTime
} catch (e) {
console.warn('Buffer cleanup error:', e)
}
}
},
handleHlsError(data) {
// console.error('HLS Error:', data)
if (data.fatal) {
switch (data.type) {
case Hls.ErrorTypes.NETWORK_ERROR:
this.retryLoad()
break
case Hls.ErrorTypes.MEDIA_ERROR:
this.hls.recoverMediaError()
break
default:
this.fullCleanup()
break
}
}
},
retryLoad() {
if (this.retryCount < this.maxRetries) {
this.retryCount++
this.showLoadingIndicator(`重试第 ${this.retryCount} 次...`)
setTimeout(() => this.initializePlayer(), 2000)
} else {
this.showLoadingIndicator('视频加载失败')
this.fullCleanup()
}
},
showLoadingIndicator(text) {
this.loading = true
this.loadingText = text
},
async safePlay() {
if (!this.video || this.playAttempts >= this.maxPlayAttempts) return
try {
this.playAttempts++
if (this.video.readyState >= 2) {
await this.video.play()
this.playAttempts = 0
} else {
setTimeout(this.safePlay, 500)
}
} catch (error) {
console.warn('播放失败:', error)
setTimeout(this.safePlay, 1000)
}
}
},
beforeDestroy() {
// 移除所有事件监听
if (this.video) {
const events = ['canplay', 'waiting', 'playing', 'error', 'stalled', 'suspend']
events.forEach((event) => {
this.video.removeEventListener(event, this.handleVideoEvent)
})
}
this.fullCleanup()
}
}
</script>
<style scoped lang="scss">
.myVideo-container {
position: relative;
height: 100%;
}
.myVideo {
width: 100%;
height: 100%;
// aspect-ratio: 16/9;
/* border: 1px solid #ccc; */
// border-radius: vw(5);
}
.loading-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
align-items: center;
}
.loading-text {
color: white;
padding: vw(10);
border-radius: vw(4);
background: rgba(0, 0, 0, 0.6);
}
</style>

120
src/components/HlsPlayer/index.vue
View File

@@ -2,6 +2,7 @@
<div v-show="isActive" class="myVideo-container">
<video
class="myVideo"
id="video"
ref="videoElement"
muted
playsinline
@@ -16,7 +17,7 @@
<script>
import Hls from 'hls.js'
import mpegtsjs from 'mpegts.js'
export default {
name: 'HlsPlayer',
props: {
@@ -162,55 +163,78 @@
if (this.hls) {
this.immediateCleanup()
}
this.hls = new Hls({
// 内存优化配置
maxBufferSize: 0, // 降低缓冲区大小（15MB）
maxBufferLength: 0.1, // 更小的缓冲窗口
liveSyncDuration: 1, // 紧跟直播点
liveMaxLatencyDuration: 5, // 最大延迟5秒
liveDurationInfinity: true,
lowLatencyMode: true, // 启用低延迟模式
maxMaxBufferLength: 60,
backBufferLength: 1, // 减少保留的缓冲数据
manifestLoadingTimeOut: 10000,
manifestLoadingMaxRetry: 5,
fragLoadingTimeOut: 5000,
fragLoadingMaxRetry: 2,
enableWorker: true, // 启用Web Worker
recycleVideoFrames: true, // 启用帧回收
if(this.url.startsWith('ws')){
const videoElement = document.getElementById('video')
const player = mpegtsjs.createPlayer({
url: this.url,
type: 'flv',
isLive: true,
hasAudio: false
})
player.attachMediaElement(videoElement)
player.load()
player.play()
startLevel: -1,
autoStartLoad: true,
maxBufferHole: 2, // 允许更大的时间缺口
highBufferWatchdogPeriod: 4, // 延长监控周期
nudgeMaxRetry: 5, // 增加微调重试次数
nudgeOffset: 0.05, // 微调步长（秒）
jumpGaps: false,
stallThreshold: 1000
})
// 错误处理和重连机制
player.on('error', (err) => {
// 3 秒后尝试重新加载
setTimeout(() => {
player.load()
player.play()
}, 3000)
})
}else{
this.hls = new Hls({
// 内存优化配置
maxBufferSize: 0, // 降低缓冲区大小（15MB）
maxBufferLength: 0.1, // 更小的缓冲窗口
liveSyncDuration: 1, // 紧跟直播点
liveMaxLatencyDuration: 5, // 最大延迟5秒
liveDurationInfinity: true,
lowLatencyMode: true, // 启用低延迟模式
maxMaxBufferLength: 60,
backBufferLength: 1, // 减少保留的缓冲数据
manifestLoadingTimeOut: 10000,
manifestLoadingMaxRetry: 5,
fragLoadingTimeOut: 5000,
fragLoadingMaxRetry: 2,
enableWorker: true, // 启用Web Worker
recycleVideoFrames: true, // 启用帧回收
this.hls.attachMedia(this.video)
this.hls.loadSource(this.url)
startLevel: -1,
autoStartLoad: true,
maxBufferHole: 2, // 允许更大的时间缺口
highBufferWatchdogPeriod: 4, // 延长监控周期
nudgeMaxRetry: 5, // 增加微调重试次数
nudgeOffset: 0.05, // 微调步长（秒）
jumpGaps: false,
stallThreshold: 1000
})
// 事件处理
this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
this.loading = false
this.retryCount = 0
this.safePlay()
})
this.hls.on(Hls.Events.ERROR, (event, data) => {
console.log('核心视频错误',data.type)
// this.hls.startLoad(); //重连
if (data.type === Hls.ErrorTypes.BUFFER_STALLED_ERROR) {
console.error('缓冲停滞错误，尝试重新加载视频');
this.hls.startLoad(); // 尝试重新加载视频
}
this.handleHlsError(data)
})
this.hls.attachMedia(this.video)
this.hls.loadSource(this.url)
// 事件处理
this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
this.loading = false
this.retryCount = 0
this.safePlay()
})
this.hls.on(Hls.Events.ERROR, (event, data) => {
console.log('核心视频错误',data.type)
// this.hls.startLoad(); //重连
if (data.type === Hls.ErrorTypes.BUFFER_STALLED_ERROR) {
console.error('缓冲停滞错误，尝试重新加载视频');
this.hls.startLoad(); // 尝试重新加载视频
}
this.handleHlsError(data)
})
this.hls.on(Hls.Events.BUFFER_EOS, () => {
this.cleanupNetworkResources()
})
}
this.hls.on(Hls.Events.BUFFER_EOS, () => {
this.cleanupNetworkResources()
})
},
initVideo() {
this.beforeDestroy()
@@ -221,7 +245,7 @@
})
this.hls.attachMedia(this.video)
this.hls.loadSource(this.url)
// 事件处理
this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
this.loading = false
@@ -232,7 +256,7 @@
this.hls.startLoad(); //重连
this.handleHlsError(data)
})
this.hls.on(Hls.Events.BUFFER_EOS, () => {
this.cleanupNetworkResources()
})

75
src/components/PieRow/index.vue
View File

@@ -11,7 +11,7 @@
<div v-if="condShow==0" class="nYong-du">加载中...</div>
<div v-if="condShow==1" class="nYong-du">暂无数据</div>
</div>
</template>
<script setup>
@@ -50,8 +50,8 @@
const { id, setOption,chartVal,dispose ,clearOption} = useEchart()
let condShow = ref(0)
let aIndex = 1
var colorList = []
@@ -59,56 +59,45 @@
watch(
() => props.dataList,
(newVal) => {
aIndex+=1
if(aIndex>=3&&!newVal.length){
condShow.value = 1
}
if (newVal.length > 0) {
console.log(colorList.value,'colorList')
condShow.value = 2
nextTick(() => {
init()
// defaultCofig.legend.formatter = (name) => {
// let percent = props.dataList.find((item) => item.name == name).value
// return name + '\u3000' + `${percent}%`
// }
// defaultCofig.series[0].data = props.dataList
// defaultCofig.series[0].label.formatter = () => {
// return `{value|${props.total}}` + '\n' + `{name|${props.label} }`
// }
// setOption({
// ...defaultCofig,
// ...props.config
// })
})
}else{
}
},
{ immediate: true }
)
const init = ()=>{
if(condShow.value===2){
return;
}
condShow.value = 2
props.dataList.forEach((item,index)=>{
if(item.name=='负面'){
colorList.push('#d9011b')
}
else if(item.name=='正面'){
colorList.push('#50F0A6')
colorList.push('#50F0A6')
}
else if(item.name=='中性'){
colorList.push('#2380fb')
colorList.push('#2380fb')
}
else{
colorList = ['#3BA272', '#73C0DE','#EE6666','#FAC858','#91CC75','#5470C6','#d9011b','#feae00','#50F0A6']
}
})
var defaultCofig = {
color: colorList,
legend: {
@@ -167,15 +156,41 @@
defaultCofig.series[0].label.formatter = () => {
return `{value|${props.total}}` + '\n' + `{name|${props.label} }`
}
setOption({
const chart = setOption({
...defaultCofig,
...props.config
})
chart.on('legendselectchanged', function (e) {
console.log(e,'e')
var echartsArr = [];
for (let key in e.selected) {
if (e.selected[key]) {
echartsArr.push(key)
}
}
var echartsNum = 0;
props.dataList.forEach(item => {
if(echartsArr.includes(item.name)){
echartsNum += parseFloat(item.value)
}
})
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({
...defaultCofig,
...props.config
})
});
}
</script>
<style scoped lang="scss">
.nYong-du{
position:absolute;
left:0;
@@ -188,6 +203,6 @@
display: flex;
align-items: center;
justify-content: center;
}
</style>

22
src/components/VideoDialog/index.vue
View File

@@ -49,10 +49,10 @@
</div>
<div class="action-item">
<div class="video-follow" @click="handleCollectAdd(cameraIndexCode, isDiy, index)" v-if="isDiy==0">收藏</div>
<div class="video-follow" @click="handleCollectAdd(cameraIndexCode, isDiy, index)" v-else="isDiy==1">取消收藏</div>
<div class="video-follow" @click="handleCollectAdd()" v-if="isDayCurr==0">收藏</div>
<div class="video-follow" @click="handleCollectAdd()" v-if="isDayCurr==1">取消收藏</div>
</div>
</div>
</div>
<img class="close" src="@/assets/images/close.png" @click="handleClose" />
@@ -103,10 +103,10 @@
watch(
() =>modelValue.value,
(val) => {
// colletCond.value = props.isCollect
// isDayCurr.value = props.isDiy
colletCond.value = props.isCollect
isDayCurr.value = props.isDiy
console.log(props.isDiy,'val[0].value')
},
{
immediate: true
@@ -114,12 +114,12 @@
)
const emit = defineEmits(['isDiyChange']);
// 收藏
const handleCollectAdd = async (id, status, index) => {
const handleCollectAdd = async () => {
await getColletDiyApi({
cameraIndexCode:props.cameraIndexCode,
isDiy: props.isDiy == 0 ? 1 : 0
})
if(props.isDiy==1){
isDayCurr.value=0
// modelValue.value = false
@@ -128,7 +128,7 @@
}
emit('isDiyChange', isDayCurr.value);
pubSub.publish('videoIsDiy',{isDiy:props.isDiy,cameraIndexCode:props.cameraIndexCode} )
}
// 关注
const handleCollect = async (id, status, index) => {
@@ -136,7 +136,7 @@
cameraIndexCode:props.cameraIndexCode,
isCollect: colletCond.value == 0 ? 1 : 0
})
if (colletCond.value == 0) {
colletCond.value = 1
} else {
@@ -144,7 +144,7 @@
modelValue.value = false
}
pubSub.publish('videoCollect', props.cameraIndexCode)
}
const handleAction = async (e) => {
if (e == STOP) {