@@ -277,7 +278,8 @@ export default {
camera1Id:newVal.camera1Id,
camera2Id:newVal.camera2Id,
camera1Name:newVal.camera1Name,
- camera2Name:newVal.camera2Name
+ camera2Name:newVal.camera2Name,
+ area:newVal.area
})
})
}
diff --git a/src/views/videoWall/index.vue b/src/views/videoWall/index.vue
index 34e2846..05b0a52 100644
--- a/src/views/videoWall/index.vue
+++ b/src/views/videoWall/index.vue
@@ -3,6 +3,12 @@
全屏
退出全屏
+
+
+
+
+
+
@@ -35,7 +41,9 @@ export default {
isFullscreen: false,
originHeight: 0,
fullHeight: 0,
- players: []
+ players: [],
+ areas:[],
+ activeKey: ''
}
},
//watch: {},
@@ -51,7 +59,8 @@ export default {
this.getWallStyle();
this.$nextTick(() => {
- this.getAllCameras()
+
+ this.getAllAreas()
});
let isFullscreen =
document.fullscreenElement ||
@@ -124,13 +133,55 @@ export default {
console.log(err)
})
},
+ getAllAreas(){
+ this.$api.httpApi.getAllAreas({
+ data: {}
+ }).then(res => {
+ if(res.code == 200) {
+ this.getAllCameras()
+ }
+ }).catch(err => {
+ console.log(err)
+ })
+ },
destory(){
for(let player of this.players){
console.log("stop")
player.destroy()
}
+ this.players = []
+ },
+ tabChange(){
+ this.destory();
+ this.$api.httpApi.allCamerasByArea({
+ params:{
+ area:this.activeKey
+ }
+
+ }).then(res => {
+ if(res.code == 200) {
+ let cameras = res.data;
+ for(let i = 1;i<=cameras.length;i++){
+ let rowIndex = Math.floor((i-1) / this.column) + 1;
+ if(rowIndex > this.row){
+ return
+ }
+ let columnIndex = i % this.column;
+ if(columnIndex == 0){
+ columnIndex = this.column;
+ }
+ let idName = rowIndex + "-" + columnIndex;
+ console.log("idName:"+idName);
+ let server = cameras[i-1].rtcServer+":"+ cameras[i-1].rtcServerPort
+ let video = document.getElementById(idName);
+ let player = new WebRtcPlayer(server,video,"camera"+cameras[i-1].id);
+ this.players.push(player);
+ }
+ }
+ }).catch(err => {
+ console.log(err)
+ })
},
-
full () {
if(this.isFullscreen){
this.exitfullscreen()