|
|
|
|
@ -1,5 +1,5 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="video-mask" v-if="isShow">
|
|
|
|
|
<div class="video-mask" :style="{width:w,height:h}">
|
|
|
|
|
<object class="video-obj" id="video" type='application/x-vlc-plugin' events='True'
|
|
|
|
|
width="100%" height="100%" pluginspage="http://www.videolan.org"
|
|
|
|
|
codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz">
|
|
|
|
|
@ -49,81 +49,54 @@
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
var formItemAcrossLayout = { //formItemAcrossLayout当表单内item横向排列时用
|
|
|
|
|
labelCol: { span: 8 }, //lable长度
|
|
|
|
|
wrapperCol: { span: 14 }, //input长度
|
|
|
|
|
};
|
|
|
|
|
var formItemVerticalLayout = { //formItemVerticalLayout当表单内item纵向排列时用
|
|
|
|
|
labelCol: { span: 4 },
|
|
|
|
|
wrapperCol: { span: 8, offset: 4 },
|
|
|
|
|
};
|
|
|
|
|
export default {
|
|
|
|
|
props:[ 'visible', 'modelData'],
|
|
|
|
|
watch: {
|
|
|
|
|
//监听并接收父组件的visible并赋值给isShow（子组件接收父组件props传过来的值时不能起一样的类名，会报重复定义的错）
|
|
|
|
|
visible: function(newVal){
|
|
|
|
|
this.isShow = newVal; //newVal即是visible
|
|
|
|
|
// newVal && this.showConfirm(); //newVal存在的话执行showConfirm函数
|
|
|
|
|
},
|
|
|
|
|
modelData: function(newVal){
|
|
|
|
|
// console.log(newVal)
|
|
|
|
|
if(newVal.id){
|
|
|
|
|
this.id = newVal.id
|
|
|
|
|
this.mdata = newVal
|
|
|
|
|
console.log(newVal)
|
|
|
|
|
console.log('触发了watch，重新赋值')
|
|
|
|
|
this.$nextTick(()=>{ //this.$nextTick解决不能在表单渲染之前赋值的报错问题
|
|
|
|
|
console.log(newVal.rtsp)
|
|
|
|
|
this.getHdVideos(newVal.rtsp)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
// w:document.documentElement.offsetWidth || document.body.offsetWidth,
|
|
|
|
|
// h:document.documentElement.offsetHeight || document.body.offsetHeight,
|
|
|
|
|
isShow: false,
|
|
|
|
|
title: '',
|
|
|
|
|
closable: false,//取消model模态框右上角的X号
|
|
|
|
|
formItemAcrossLayout,
|
|
|
|
|
formItemVerticalLayout,
|
|
|
|
|
w: document.documentElement.offsetWidth || document.body.offsetWidth,
|
|
|
|
|
h: document.documentElement.offsetHeight || document.body.offsetHeight,
|
|
|
|
|
confirmLoading: false,
|
|
|
|
|
form: this.$form.createForm(this, {name: 'dynamic_rule'}),
|
|
|
|
|
id: '',
|
|
|
|
|
mdata: [],
|
|
|
|
|
zoomSubUrl: require('@/assets/sub-icon.png'),
|
|
|
|
|
zoomAddUrl:require('@/assets/add-icon.png'),
|
|
|
|
|
focusSubUrl:require('@/assets/sub-icon.png'),
|
|
|
|
|
focusAddUrl:require('@/assets/add-icon.png'),
|
|
|
|
|
irisSubUrl:require('@/assets/sub-icon.png'),
|
|
|
|
|
irisAddUrl:require('@/assets/add-icon.png'),
|
|
|
|
|
leftUpUrl:require('@/assets/left-up-icon.png'),
|
|
|
|
|
upUrl:require('@/assets/up-icon.png'),
|
|
|
|
|
rightUpUrl:require('@/assets/right-up-icon.png'),
|
|
|
|
|
leftUrl:require('@/assets/left-icon.png'),
|
|
|
|
|
rightUrl:require('@/assets/right-icon.png'),
|
|
|
|
|
leftDownUrl:require('@/assets/left-down-icon.png'),
|
|
|
|
|
downUrl:require('@/assets/down-icon.png'),
|
|
|
|
|
rightDownUrl:require('@/assets/right-down-icon.png'),
|
|
|
|
|
zoomAddUrl: require('@/assets/add-icon.png'),
|
|
|
|
|
focusSubUrl: require('@/assets/sub-icon.png'),
|
|
|
|
|
focusAddUrl: require('@/assets/add-icon.png'),
|
|
|
|
|
irisSubUrl: require('@/assets/sub-icon.png'),
|
|
|
|
|
irisAddUrl: require('@/assets/add-icon.png'),
|
|
|
|
|
leftUpUrl: require('@/assets/left-up-icon.png'),
|
|
|
|
|
upUrl: require('@/assets/up-icon.png'),
|
|
|
|
|
rightUpUrl: require('@/assets/right-up-icon.png'),
|
|
|
|
|
leftUrl: require('@/assets/left-icon.png'),
|
|
|
|
|
rightUrl: require('@/assets/right-icon.png'),
|
|
|
|
|
leftDownUrl: require('@/assets/left-down-icon.png'),
|
|
|
|
|
downUrl: require('@/assets/down-icon.png'),
|
|
|
|
|
rightDownUrl: require('@/assets/right-down-icon.png'),
|
|
|
|
|
vlcm: ""
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.mdata = this.$route.query.modelData
|
|
|
|
|
this.getHdVideos(this.$route.query.modelData.rtsp)
|
|
|
|
|
},
|
|
|
|
|
beforeRouteLeave(to, form, next) {
|
|
|
|
|
if (this.vlcm) {
|
|
|
|
|
this.vlcm.playlist.stop();
|
|
|
|
|
next(true)
|
|
|
|
|
} else {
|
|
|
|
|
next(true)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
handleCancel() {
|
|
|
|
|
console.log('Clicked cancel button');
|
|
|
|
|
// location.reload();
|
|
|
|
|
const that=this
|
|
|
|
|
setTimeout(function () {
|
|
|
|
|
that.$emit('close',false,{})
|
|
|
|
|
},500)
|
|
|
|
|
this.$router.go(-1);
|
|
|
|
|
},
|
|
|
|
|
getHdVideos(rtsp){
|
|
|
|
|
getHdVideos(rtsp) {
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
var vlc = document.getElementById('video');
|
|
|
|
|
var options = new Array(":network-caching=100");//减少延迟
|
|
|
|
|
var vlcItem = vlc.playlist.add(`${rtsp}`, "vedio", options);
|
|
|
|
|
vlc.playlist.playItem(vlcItem);
|
|
|
|
|
this.vlcm = vlc
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
zoomDecStart(){
|
|
|
|
|
@ -439,19 +412,30 @@ export default {
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.video-mask{
|
|
|
|
|
position:fixed;
|
|
|
|
|
.wrap {
|
|
|
|
|
.table {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.video-mask {
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
/*background-color: #001529;*/
|
|
|
|
|
z-index:1000;
|
|
|
|
|
z-index: 1000;
|
|
|
|
|
|
|
|
|
|
#video {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
.video-close{
|
|
|
|
|
|
|
|
|
|
.video-close {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 20px;
|
|
|
|
|
top: 20px;
|
|
|
|
|
|
张鑫
5 years ago