|
|
|
@ -7,10 +7,12 @@
|
|
|
|
</a-tab-pane>
|
|
|
|
</a-tab-pane>
|
|
|
|
</a-tabs>
|
|
|
|
</a-tabs>
|
|
|
|
<div class="flex-layouts">
|
|
|
|
<div class="flex-layouts">
|
|
|
|
<div class="video-list" v-for="(item,index) in realTimeListData" :key="(index+1).toString()" v-show="tabKey==0? tabKey==0 : tabKey==(index+1).toString()">
|
|
|
|
<div class="video-list" v-for="(item,index) in realTimeListData" :key="(index+1).toString()">
|
|
|
|
<div class="video-item" v-for="i in item.cameras" :key="i.id">
|
|
|
|
<div class="video-item" v-for="i in item.cameras" :key="i.id">
|
|
|
|
|
|
|
|
<template v-if="tabKey==0? tabKey==0 : tabKey==(index+1).toString()">
|
|
|
|
<object style="width:390px;height:219px" class="video-obj" :id="'video'+i.id"
|
|
|
|
<object style="width:390px;height:219px" class="video-obj" :id="'video'+i.id"
|
|
|
|
type='application/x-vlc-plugin' events='True' width="100%" height="100%"
|
|
|
|
type='application/x-vlc-plugin' events='True' width="100%" height="100%"
|
|
|
|
|
|
|
|
ref="vlc"
|
|
|
|
pluginspage="http://www.videolan.org"
|
|
|
|
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">
|
|
|
|
<param name='controls' value='false'/>
|
|
|
|
<param name='controls' value='false'/>
|
|
|
|
@ -36,6 +38,8 @@
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@ -54,25 +58,38 @@ export default {
|
|
|
|
path: [],
|
|
|
|
path: [],
|
|
|
|
player: "",
|
|
|
|
player: "",
|
|
|
|
visible: false,
|
|
|
|
visible: false,
|
|
|
|
modelData: [],
|
|
|
|
modelData: []
|
|
|
|
vlcz: null
|
|
|
|
|
|
|
|
};
|
|
|
|
};
|
|
|
|
},
|
|
|
|
},
|
|
|
|
inject: ['reload'],
|
|
|
|
inject: ['reload'],
|
|
|
|
mounted() {
|
|
|
|
mounted() {
|
|
|
|
console.log('index mounted执行了')
|
|
|
|
console.log('index mounted执行了')
|
|
|
|
this.getRealTimeList()
|
|
|
|
this.getRealTimeList()
|
|
|
|
|
|
|
|
if (sessionStorage.getItem('tabKey') == null) {
|
|
|
|
|
|
|
|
sessionStorage.setItem('tabKey', 0)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
this.tabKey = sessionStorage.getItem('tabKey')
|
|
|
|
},
|
|
|
|
},
|
|
|
|
destroyed(){
|
|
|
|
destroyed(){
|
|
|
|
|
|
|
|
if (this.$refs.vlc) {
|
|
|
|
|
|
|
|
for (var i = 0; i < this.$refs.vlc.length; i++) {
|
|
|
|
|
|
|
|
this.$refs.vlc[i].playlist.stop();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
beforeRouteLeave(to,form,next) {
|
|
|
|
beforeRouteLeave(to,form,next) {
|
|
|
|
if (this.vlcz.playlist) {
|
|
|
|
// console.log(11111111111111)
|
|
|
|
this.vlcz.playlist.stop();
|
|
|
|
console.log(this.$refs.vlc)
|
|
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
|
|
|
if (this.$refs.vlc) {
|
|
|
|
|
|
|
|
for (var i = 0; i < this.$refs.vlc.length; i++) {
|
|
|
|
|
|
|
|
this.$refs.vlc[i].playlist.stop();
|
|
|
|
|
|
|
|
}
|
|
|
|
next(true)
|
|
|
|
next(true)
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
next(true)
|
|
|
|
next(true)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
console.log('beforeRouteLeave')
|
|
|
|
console.log('beforeRouteLeave')
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
@ -100,20 +117,28 @@ export default {
|
|
|
|
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(() => {
|
|
|
|
|
|
|
|
setTimeout(function () {
|
|
|
|
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);
|
|
|
|
return this.vlcz = vlc
|
|
|
|
console.log(22222222222222)
|
|
|
|
|
|
|
|
console.log(vlc)
|
|
|
|
|
|
|
|
}, 500)
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
tabsChange(key) {
|
|
|
|
tabsChange(key) {
|
|
|
|
console.log(key)
|
|
|
|
console.log(key)
|
|
|
|
|
|
|
|
sessionStorage.setItem('tabKey', key)
|
|
|
|
|
|
|
|
this.reload()
|
|
|
|
},
|
|
|
|
},
|
|
|
|
showModel(item) {
|
|
|
|
showModel(item) {
|
|
|
|
console.log(item)
|
|
|
|
console.log(item)
|
|
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
this.$router.push({name: "realTimeMonitoringModel", query: {modelData: item}});
|
|
|
|
this.$router.push({name: "realTimeMonitoringModel", query: {modelData: item}});
|
|
|
|
|
|
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
张鑫
5 years ago