|
|
|
@ -1,6 +1,13 @@ |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<div class="container"> |
|
|
|
<div class="container"> |
|
|
|
<div id="player" :style="{width:!showLeft ? '100%' : '65%'}"></div> |
|
|
|
<div id="player" :style="{width:!showLeft ? '100%' : '65%'}"></div> |
|
|
|
|
|
|
|
<div id="mask_con" class="mask_box" :style="{width:!showLeft ? '100%' : '65%'}" v-show="isOrder"> |
|
|
|
|
|
|
|
<div :id="'mask_video' + item.num" v-for="item in videoList" :key="item" class="mask_item_box"> |
|
|
|
|
|
|
|
<div class="input_box" style="width:50px;margin-bottom:10px;"> |
|
|
|
|
|
|
|
<el-input type="number" v-model="item.num"></el-input> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="form_box" v-show="showLeft"> |
|
|
|
<div class="form_box" v-show="showLeft"> |
|
|
|
<el-form> |
|
|
|
<el-form> |
|
|
|
<el-form-item label="当前选中摄像头"> |
|
|
|
<el-form-item label="当前选中摄像头"> |
|
|
|
@ -81,7 +88,7 @@ |
|
|
|
> |
|
|
|
> |
|
|
|
</el-form-item> |
|
|
|
</el-form-item> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<div>排序</div> |
|
|
|
<!-- <div>排序</div> |
|
|
|
<div v-for="(item,index) in playUrlList" :key="index" style="display:flex;align-items:center;margin-bottom:20px"> |
|
|
|
<div v-for="(item,index) in playUrlList" :key="index" style="display:flex;align-items:center;margin-bottom:20px"> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
摄像头名称:{{item.name}} |
|
|
|
摄像头名称:{{item.name}} |
|
|
|
@ -89,8 +96,8 @@ |
|
|
|
<div style="width:10%;margin-left:20px"> |
|
|
|
<div style="width:10%;margin-left:20px"> |
|
|
|
<el-input v-model="item.num" placeholder="序号"></el-input> |
|
|
|
<el-input v-model="item.num" placeholder="序号"></el-input> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
<el-button @click="orderBy">排序</el-button> |
|
|
|
<el-button :type="isOrder ? 'primary' : ''" @click="orderBy">排序</el-button> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
@ -155,7 +162,10 @@ export default { |
|
|
|
timeRange:[], |
|
|
|
timeRange:[], |
|
|
|
cameraList:[], |
|
|
|
cameraList:[], |
|
|
|
list:[], |
|
|
|
list:[], |
|
|
|
showLeft:true |
|
|
|
showLeft:true, |
|
|
|
|
|
|
|
videoList:[], |
|
|
|
|
|
|
|
isOrder:false, |
|
|
|
|
|
|
|
|
|
|
|
}; |
|
|
|
}; |
|
|
|
}, |
|
|
|
}, |
|
|
|
created() { |
|
|
|
created() { |
|
|
|
@ -191,43 +201,6 @@ export default { |
|
|
|
setTimeout(() => { |
|
|
|
setTimeout(() => { |
|
|
|
this.init(); |
|
|
|
this.init(); |
|
|
|
this.createPlayer(); |
|
|
|
this.createPlayer(); |
|
|
|
// this.orderBy() |
|
|
|
|
|
|
|
// this.arrangeWindow(); |
|
|
|
|
|
|
|
// let list = document.querySelector('.sub-wnd') |
|
|
|
|
|
|
|
// let currentLi |
|
|
|
|
|
|
|
// document.getElementsByClassName('sub-wnd').forEach((item,index) =>{ |
|
|
|
|
|
|
|
// item.setAttribute("draggable", true); |
|
|
|
|
|
|
|
// }) |
|
|
|
|
|
|
|
// list.addEventListener('dragstart',(e)=>{ |
|
|
|
|
|
|
|
// e.dataTransfer.effectAllowed = 'move' // 拖动样式改为 "move" |
|
|
|
|
|
|
|
// currentLi = e.target |
|
|
|
|
|
|
|
// currentLi.classList.add('moving') |
|
|
|
|
|
|
|
// }) |
|
|
|
|
|
|
|
// list.addEventListener('dragenter',(e)=>{ |
|
|
|
|
|
|
|
// console.log('e===========>',e) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// e.preventDefault() |
|
|
|
|
|
|
|
// if(e.target === currentLi||e.target === list){ |
|
|
|
|
|
|
|
// return |
|
|
|
|
|
|
|
// } |
|
|
|
|
|
|
|
// let liArray = Array.from(list.childNodes) |
|
|
|
|
|
|
|
// let currentIndex = liArray.indexOf(currentLi) |
|
|
|
|
|
|
|
// let targetindex = liArray.indexOf(e.target) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// if(currentIndex<targetindex){ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// list.insertBefore(currentLi,e.target.nextElementSibling) |
|
|
|
|
|
|
|
// }else{ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// list.insertBefore(currentLi,e.target) |
|
|
|
|
|
|
|
// } |
|
|
|
|
|
|
|
// }) |
|
|
|
|
|
|
|
// list.addEventListener('dragover',(e)=>{ |
|
|
|
|
|
|
|
// e.preventDefault() |
|
|
|
|
|
|
|
// }) |
|
|
|
|
|
|
|
// list.addEventListener('dragend',(e)=>{ |
|
|
|
|
|
|
|
// currentLi.classList.remove('moving') |
|
|
|
|
|
|
|
// }) |
|
|
|
|
|
|
|
}); |
|
|
|
}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted(){ |
|
|
|
mounted(){ |
|
|
|
@ -245,30 +218,76 @@ export default { |
|
|
|
return false; |
|
|
|
return false; |
|
|
|
}, |
|
|
|
}, |
|
|
|
orderBy(){ |
|
|
|
orderBy(){ |
|
|
|
if(this.isRepeat(this.playUrlList,'num')){ |
|
|
|
if(!this.isOrder){ |
|
|
|
this.$message.error('顺序不能存在相同数') |
|
|
|
let arr = [] |
|
|
|
|
|
|
|
this.videoList = [] |
|
|
|
|
|
|
|
for(let i = 0;i < this.splitNum * this.splitNum;i++){ |
|
|
|
|
|
|
|
arr.push({num:i + 1}) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
arr.map(item =>{ |
|
|
|
|
|
|
|
this.playUrlList.map(item1 =>{ |
|
|
|
|
|
|
|
if(item.num == item1.num){ |
|
|
|
|
|
|
|
item.url = item1.url |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
this.videoList = arr |
|
|
|
|
|
|
|
// console.log('videp1 ===>',this.videoList) |
|
|
|
|
|
|
|
this.$nextTick(() =>{ |
|
|
|
|
|
|
|
this.isOrder = true; |
|
|
|
|
|
|
|
var alist = document.getElementsByClassName( "mask_item_box" ); |
|
|
|
|
|
|
|
if (alist){ |
|
|
|
|
|
|
|
for ( var idx = 0; idx < alist.length; idx ++){ |
|
|
|
|
|
|
|
var mya = alist[idx]; |
|
|
|
|
|
|
|
mya.style.width = document.getElementById('player').offsetWidth / this.splitNum + 'px'; |
|
|
|
|
|
|
|
mya.style.height = document.getElementById('player').offsetHeight / this.splitNum + 'px'; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
}else{ |
|
|
|
}else{ |
|
|
|
console.log('split ===>',this.splitNum) |
|
|
|
let arr = JSON.parse(JSON.stringify(this.videoList)) |
|
|
|
this.playUrlList = this.playUrlList.sort((a,b) => a.num - b.num) |
|
|
|
console.log('videoList ====>',this.videoList) |
|
|
|
console.log(this.playUrlList) |
|
|
|
this.$nextTick(() =>{ |
|
|
|
if(this.playUrlList[this.playUrlList.length - 1].num > this.splitNum * this.splitNum){ |
|
|
|
let tmp = arr.find(item => item.num == '') |
|
|
|
this.$message.error('顺序数不可大于当前窗口数') |
|
|
|
let isNum = arr.find(item => item.num == 0) |
|
|
|
}else{ |
|
|
|
console.log(isNum) |
|
|
|
this.player.JS_StopRealPlayAll().then( |
|
|
|
console.log(tmp) |
|
|
|
() => { |
|
|
|
if(tmp){ |
|
|
|
console.info('停止播放成功====>,JS_StopRealPlayAll success'); |
|
|
|
this.$message.error('不能存在空值') |
|
|
|
// do you want... |
|
|
|
}else if(isNum){ |
|
|
|
this.playUrlList.map(item =>{ |
|
|
|
this.$message.error('不能存在0') |
|
|
|
this.realplay(parseInt(item.num) - 1,item.url) |
|
|
|
}else if(this.isRepeat(arr,'num')){ |
|
|
|
}) |
|
|
|
this.$message.error('不能存在重复值') |
|
|
|
}, |
|
|
|
}else{ |
|
|
|
(err) => { |
|
|
|
arr = arr.sort((a,b) => a.num - b.num) |
|
|
|
console.info('JS_StopRealPlayAll failed'); |
|
|
|
if(arr[arr.length - 1].num > this.splitNum * this.splitNum){ |
|
|
|
// do you want... |
|
|
|
this.$message.error('数值不可大于当前窗口值') |
|
|
|
|
|
|
|
}else{ |
|
|
|
|
|
|
|
console.log('videoList1111 ====>',this.videoList) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
arr.map(item =>{ |
|
|
|
|
|
|
|
this.playUrlList.forEach(item1 =>{ |
|
|
|
|
|
|
|
if(item.url == item1.url){ |
|
|
|
|
|
|
|
item1.num = parseInt(item.num) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
console.log('playerUrl =======>',this.playUrlList) |
|
|
|
|
|
|
|
this.player.JS_StopRealPlayAll().then( |
|
|
|
|
|
|
|
() => { |
|
|
|
|
|
|
|
console.info('停止播放成功====>,JS_StopRealPlayAll success'); |
|
|
|
|
|
|
|
this.playUrlList.map(item =>{ |
|
|
|
|
|
|
|
this.realplay(parseInt(item.num) - 1,item.url) |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
this.isOrder = false |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
(err) => { |
|
|
|
|
|
|
|
console.info('JS_StopRealPlayAll failed'); |
|
|
|
|
|
|
|
// // // do you want... |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
); |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@ -358,7 +377,31 @@ export default { |
|
|
|
arrangeWindow() { |
|
|
|
arrangeWindow() { |
|
|
|
// const splitNum = this.splitNum; |
|
|
|
// const splitNum = this.splitNum; |
|
|
|
// console.log(this.player) |
|
|
|
// console.log(this.player) |
|
|
|
|
|
|
|
// this.videoList |
|
|
|
|
|
|
|
if(this.isOrder){ |
|
|
|
|
|
|
|
let arr = [] |
|
|
|
|
|
|
|
this.videoList = [] |
|
|
|
|
|
|
|
for(let i = 0;i < this.splitNum * this.splitNum;i++){ |
|
|
|
|
|
|
|
if(this.playUrlList[i]){ |
|
|
|
|
|
|
|
console.log('url ====>',this.playUrlList[i],i) |
|
|
|
|
|
|
|
arr.push({url:this.playUrlList[i].url,num:this.playUrlList[i].num}) |
|
|
|
|
|
|
|
}else{ |
|
|
|
|
|
|
|
arr.push({num:i + 1}) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
this.videoList = arr |
|
|
|
|
|
|
|
this.$nextTick(() =>{ |
|
|
|
|
|
|
|
this.isOrder = true; |
|
|
|
|
|
|
|
var alist = document.getElementsByClassName( "mask_item_box" ); |
|
|
|
|
|
|
|
if (alist){ |
|
|
|
|
|
|
|
for ( var idx = 0; idx < alist.length; idx ++){ |
|
|
|
|
|
|
|
var mya = alist[idx]; |
|
|
|
|
|
|
|
mya.style.width = document.getElementById('player').offsetWidth / this.splitNum + 'px'; |
|
|
|
|
|
|
|
mya.style.height = document.getElementById('player').offsetHeight / this.splitNum + 'px'; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
let splitNum = Number(this.splitNum) |
|
|
|
let splitNum = Number(this.splitNum) |
|
|
|
this.player.JS_ArrangeWindow(splitNum).then( |
|
|
|
this.player.JS_ArrangeWindow(splitNum).then( |
|
|
|
() => { console.log(`arrangeWindow to ${splitNum}x${splitNum} success`) }, |
|
|
|
() => { console.log(`arrangeWindow to ${splitNum}x${splitNum} success`) }, |
|
|
|
@ -368,6 +411,7 @@ export default { |
|
|
|
// 初始化结束 |
|
|
|
// 初始化结束 |
|
|
|
// 视频预览 |
|
|
|
// 视频预览 |
|
|
|
realplay(index, url) { |
|
|
|
realplay(index, url) { |
|
|
|
|
|
|
|
console.log('index ====>',index) |
|
|
|
if (this.playUrlList.length === 0) { |
|
|
|
if (this.playUrlList.length === 0) { |
|
|
|
this.$message.warning("当前没有可播放的摄像头"); |
|
|
|
this.$message.warning("当前没有可播放的摄像头"); |
|
|
|
return; |
|
|
|
return; |
|
|
|
@ -564,6 +608,35 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
// } |
|
|
|
// } |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.mask_box{ |
|
|
|
|
|
|
|
height: calc((50vw - 8px) * 5 / 8); |
|
|
|
|
|
|
|
background: transparent; |
|
|
|
|
|
|
|
position: absolute; |
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.mask_item_box{ |
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
align-items: flex-end; |
|
|
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.input_box{ |
|
|
|
|
|
|
|
/deep/ .el-input__inner{ |
|
|
|
|
|
|
|
text-align: center; |
|
|
|
|
|
|
|
font-size: 26px; |
|
|
|
|
|
|
|
padding: 0; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
::v-deep input::-webkit-outer-spin-button, |
|
|
|
|
|
|
|
::v-deep input::-webkit-inner-spin-button { |
|
|
|
|
|
|
|
-webkit-appearance: none !important; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
::v-deep input[type='number'] { |
|
|
|
|
|
|
|
-moz-appearance: textfield !important; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.form_box{ |
|
|
|
.form_box{ |
|
|
|
width: 35%; |
|
|
|
width: 35%; |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
|
jinna
3 years ago
