upright
/
duoji-frontend
mirror of https://gitlab.hzleaper.com:81/duoji/duoji-frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

实时视频流页面全屏方式由model组件更为路由跳转形式（解决vlc报错问题）

Browse Source
merge-requests/1/head
张鑫 5 years ago
parent 1c5f22e653
commit c7785a3fe7
5 changed files with 95 additions and 131 deletions
Show Stats Download Patch File Download Diff File

4
src/layouts/AsideMenu.vue
Unescape Escape View File

@ -62,7 +62,7 @@ export default {
parents = this.$router.options.routes[0].children.filter(ele => { parents = this.$router.options.routes[0].children.filter(ele => {
if ( if (
this.userInfo.permissionList.some(item => { this.userInfo.permissionList.some(item => {
return item.rights === ele.name && ele.name.indexOf("center") < 0 && item.rights === ele.name && ele.name.indexOf("ioTable") < 0; return item.rights === ele.name && ele.name.indexOf("center") < 0 && item.rights === ele.name && ele.name.indexOf("ioTable") < 0 && item.rights === ele.name && ele.name.indexOf("realTimeMonitoringModel") < 0;
}) })
) { ) {
return ele; return ele;
@ -83,7 +83,7 @@ export default {
recursionRoute(parents); recursionRoute(parents);
}else { }else {
parents = this.$router.options.routes[0].children.filter(item => { parents = this.$router.options.routes[0].children.filter(item => {
return !item.name.startsWith("center") && !item.name.startsWith("ioTable"); return !item.name.startsWith("center") && !item.name.startsWith("ioTable") && !item.name.startsWith("realTimeMonitoringModel");
}); });
} }
this.routes = parents; this.routes = parents;

1
src/plugins/axios/axios.js
Unescape Escape View File

@ -13,7 +13,6 @@ window.once = 0
instance.interceptors.request.use((config) => { instance.interceptors.request.use((config) => {
const reqObj = config; const reqObj = config;
// 在发送请求之前做些什么 -- 路径参数拼接 // 在发送请求之前做些什么 -- 路径参数拼接
console.log('xxxxxxxxxx')
console.log(reqObj) console.log(reqObj)
const reg = /\{(.+?)\}/g; const reg = /\{(.+?)\}/g;
if (reg.test(reqObj.url)) { if (reg.test(reqObj.url)) {

10
src/router/index.js
Unescape Escape View File

@ -38,6 +38,16 @@ const routes = [{
}, },
component: () => import('@/views/realTimeMonitoring/index'), component: () => import('@/views/realTimeMonitoring/index'),
},
{
path: 'realTimeMonitoring/model',
name: 'realTimeMonitoringModel',
meta: {
icon: 'desktop',
name: '实时视频流(全屏)'
},
component: () => import('@/views/realTimeMonitoring/model'),
}, },
{ {
path: 'historyMonitoring', path: 'historyMonitoring',

101
src/views/realTimeMonitoring/index.vue
Unescape Escape View File

@ -19,7 +19,7 @@
<param name="windowless" value="true"> <param name="windowless" value="true">
<param name='fullscreen' value='false'/> <param name='fullscreen' value='false'/>
<param name='mrl' :value='i.rtsp'/> <param name='mrl' :value='i.rtsp'/>
<param name='autoplay' value='true'/> <param name='autoplay' value='yes'/>
<embed type="application/x-google-vlc-plugin"/> <embed type="application/x-google-vlc-plugin"/>
</object> </object>
<div class="video-name"> <div class="video-name">
@ -39,28 +39,22 @@
</div> </div>
</div> </div>
</div> </div>
<Model
:visible.sync="visible"
:modelData.sync="modelData"
@close="closeModel"
/>
</div> </div>
</template> </template>
<script> <script>
import Model from "./model.vue"
export default { export default {
name: "realTimeMonitoring", name: "historyMonitoring",
data() { data() {
return { return {
realTimeListData:[], realTimeListData: [],
url:"722e6f04-bb3c-34b1-bcc7-ae9f6cd72e68", url: "722e6f04-bb3c-34b1-bcc7-ae9f6cd72e68",
tabKey: "0", tabKey: "0",
path:[], path: [],
player:"", player: "",
visible:false, visible: false,
modelData:[], modelData: [],
vlcz: null vlcz: null
}; };
}, },
@ -73,19 +67,13 @@ export default {
}, },
beforeRouteLeave(to,form,next) { beforeRouteLeave(to,form,next) {
// if(this.vlcz){ if (this.vlcz) {
// var that = this this.vlcz.playlist.stop();
// this.realTimeListData.forEach(function (item) { next(true)
// console.log(item) } else {
// var $that = that next(true)
// item.cameras.forEach(function (item) { }
// $that.vlcz.playlist.stop(); console.log('beforeRouteLeave')
// })
// next(true)
// })
// }else{
// next(true)
// }
}, },
methods: { methods: {
getRealTimeList(){ getRealTimeList(){
@ -96,55 +84,38 @@ export default {
console.log(res.data) console.log(res.data)
if(res.code == 200) { if(res.code == 200) {
this.realTimeListData = res.data this.realTimeListData = res.data
// res.data.forEach(function (item) { res.data.forEach(function (item) {
// // console.log(item.cameras) // console.log(item.cameras)
// var $that = that var $that = that
// item.cameras.forEach(function (item) { item.cameras.forEach(function (item) {
// // console.log(item.rtsp) // console.log(item.rtsp)
// $that.playVideo('video'+item.id,item.rtsp) $that.playVideo('video' + item.id, item.rtsp)
// }) })
// }) })
} }
}).catch(err => { }).catch(err => {
console.log(err) console.log(err)
}) })
}, },
// playVideo(id,rtsp){ playVideo(id, rtsp) {
// // 设置url 播放 ---添加到事件队列在下一个tick执行，避免 TypeError: t.module.postMessage is not a function // 设置url 播放 ---添加到事件队列在下一个tick执行，避免 TypeError: t.module.postMessage is not a function
// this.$nextTick(() => { this.$nextTick(() => {
// var vlc = document.getElementById(`${id}`); var vlc = document.getElementById(`${id}`);
// var options = new Array(":network-caching=100");//减少延迟 var options = new Array(":network-caching=100");//减少延迟
// var vlcItem = vlc.playlist.add(`${rtsp}`, `${id}`, options); var vlcItem = vlc.playlist.add(`${rtsp}`, `${id}`, options);
// // vlc.playlist.play() // vlc.playlist.play()
// vlc.playlist.playItem(vlcItem); vlc.playlist.playItem(vlcItem);
// console.log('切换大屏前') return this.vlcz = vlc
// }) })
// }, },
tabsChange(key) { tabsChange(key) {
console.log(key) console.log(key)
}, },
showModel(item) { showModel(item) {
console.log(item) console.log(item)
this.visible = true this.$router.push({name: "realTimeMonitoringModel", query: {modelData: item}});
this.modelData = item
// this.vlcz.playlist.stop()
}, },
closeModel(visible, data) {
this.visible = visible
this.modelData = data
this.reload()
this.tabsChange()
console.log(this.realTimeListData)
console.log('切换大屏后')
// console.log(this.vlcz.playlist.currentItem)
// console.log(this.vlcz.playlist.isPlaying)
// this.vlcz.playlist.play()
// console.log(this.vlcz.playlist.isPlaying)
}
}, },
components:{
Model
}
}; };
</script> </script>

112
src/views/realTimeMonitoring/model.vue
Unescape Escape View File

@ -1,5 +1,5 @@
<template> <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' <object class="video-obj" id="video" type='application/x-vlc-plugin' events='True'
width="100%" height="100%" pluginspage="http://www.videolan.org" 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"> codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz">
@ -49,81 +49,54 @@
</div> </div>
</template> </template>
<script> <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 { 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() { data() {
return { return {
// w:document.documentElement.offsetWidth || document.body.offsetWidth, w: document.documentElement.offsetWidth || document.body.offsetWidth,
// h:document.documentElement.offsetHeight || document.body.offsetHeight, h: document.documentElement.offsetHeight || document.body.offsetHeight,
isShow: false,
title: '',
closable: false,//取消model模态框右上角的X号
formItemAcrossLayout,
formItemVerticalLayout,
confirmLoading: false, confirmLoading: false,
form: this.$form.createForm(this, {name: 'dynamic_rule'}),
id: '', id: '',
mdata: [], mdata: [],
zoomSubUrl: require('@/assets/sub-icon.png'), zoomSubUrl: require('@/assets/sub-icon.png'),
zoomAddUrl:require('@/assets/add-icon.png'), zoomAddUrl: require('@/assets/add-icon.png'),
focusSubUrl:require('@/assets/sub-icon.png'), focusSubUrl: require('@/assets/sub-icon.png'),
focusAddUrl:require('@/assets/add-icon.png'), focusAddUrl: require('@/assets/add-icon.png'),
irisSubUrl:require('@/assets/sub-icon.png'), irisSubUrl: require('@/assets/sub-icon.png'),
irisAddUrl:require('@/assets/add-icon.png'), irisAddUrl: require('@/assets/add-icon.png'),
leftUpUrl:require('@/assets/left-up-icon.png'), leftUpUrl: require('@/assets/left-up-icon.png'),
upUrl:require('@/assets/up-icon.png'), upUrl: require('@/assets/up-icon.png'),
rightUpUrl:require('@/assets/right-up-icon.png'), rightUpUrl: require('@/assets/right-up-icon.png'),
leftUrl:require('@/assets/left-icon.png'), leftUrl: require('@/assets/left-icon.png'),
rightUrl:require('@/assets/right-icon.png'), rightUrl: require('@/assets/right-icon.png'),
leftDownUrl:require('@/assets/left-down-icon.png'), leftDownUrl: require('@/assets/left-down-icon.png'),
downUrl:require('@/assets/down-icon.png'), downUrl: require('@/assets/down-icon.png'),
rightDownUrl:require('@/assets/right-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: { methods: {
handleCancel() { handleCancel() {
console.log('Clicked cancel button'); this.$router.go(-1);
// location.reload(); },
const that=this getHdVideos(rtsp) {
setTimeout(function () {
that.$emit('close',false,{})
},500)
},
getHdVideos(rtsp){
this.$nextTick(() => { this.$nextTick(() => {
var vlc = document.getElementById('video'); var vlc = document.getElementById('video');
var options = new Array(":network-caching=100");//减少延迟 var options = new Array(":network-caching=100");//减少延迟
var vlcItem = vlc.playlist.add(`${rtsp}`, "vedio", options); var vlcItem = vlc.playlist.add(`${rtsp}`, "vedio", options);
vlc.playlist.playItem(vlcItem); vlc.playlist.playItem(vlcItem);
this.vlcm = vlc
}) })
}, },
zoomDecStart(){ zoomDecStart(){
@ -439,19 +412,30 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.video-mask{ .wrap {
position:fixed; .table {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
}
.video-mask {
position: fixed;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
/*background-color: #001529;*/ /*background-color: #001529;*/
z-index:1000; z-index: 1000;
#video { #video {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.video-close{
.video-close {
position: absolute; position: absolute;
right: 20px; right: 20px;
top: 20px; top: 20px;

Write Preview
Loading…
Cancel
Save