From f15e5c6f2bfa828f64a55452cf83e68a957f0956 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?LAPTOP-S9HJSOEB=5C=E6=98=8A=E5=A4=A9?= Date: Tue, 2 Jan 2024 10:12:52 +0800 Subject: [PATCH] =?UTF-8?q?1.=E9=9C=80=E7=9B=98=E7=82=B9=E5=8F=96=E6=B6=88?= =?UTF-8?q?=202.=E5=8F=A4=E4=BA=95=E8=B4=A1=E7=9A=84=E9=A6=96=E5=88=97?= =?UTF-8?q?=E6=98=AF=E6=9C=80=E5=90=8E=E5=88=97=203.=E8=A7=86=E9=A2=91?= =?UTF-8?q?=E5=A2=99=E4=BF=AE=E6=94=B9=E4=B8=BA=E4=B8=8D=E5=86=8D=E4=BD=BF?= =?UTF-8?q?=E7=94=A8=E5=A4=9A=E4=B8=AA=E8=A7=86=E9=A2=91=E5=A2=99=E6=A8=A1?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/checkManage/Subsection.vue | 30 +++- src/views/checkManage/index.vue | 7 - src/views/videoWall/index.vue | 217 ++++++++++++--------------- src/views/videoWall3/index.vue | 3 +- 4 files changed, 120 insertions(+), 137 deletions(-) diff --git a/src/views/checkManage/Subsection.vue b/src/views/checkManage/Subsection.vue index 3d29400..7932ac4 100644 --- a/src/views/checkManage/Subsection.vue +++ b/src/views/checkManage/Subsection.vue @@ -1,6 +1,6 @@ @@ -89,7 +91,7 @@ export default { default: () => { return { row: 10, - column: 30 + column: 300 } } }, @@ -160,10 +162,13 @@ export default { row: {}, column: {} }, - timer: null + timer: null, + columnList: [], } }, mounted() { + + this.rowList = this.moveLastToFirst() this.$nextTick(() => { this.getStatus(); }) @@ -192,6 +197,14 @@ export default { }, methods: { + moveLastToFirst() { + const arr = []; + arr.push(this.total.column) + for (let i = 1; i <= this.total.column-1; i++) { + arr.push(i); + } + this.columnList = arr + }, changeTab(value){ this.select.column = value this.getStatus() @@ -350,10 +363,11 @@ export default { } roadway-buttom { padding: 5px 0; - width: 100%; + width: 100%; } .roadway-box { + width: 2500px; //transform: rotateX(180deg); padding: 10px 10px 0 0; .line { diff --git a/src/views/checkManage/index.vue b/src/views/checkManage/index.vue index 9fbb682..2105b9c 100644 --- a/src/views/checkManage/index.vue +++ b/src/views/checkManage/index.vue @@ -46,13 +46,6 @@ > 盘点正确 - - - 需盘点 - 退出全屏 - + - + @@ -32,28 +32,29 @@ :key="pane.key" :tab="pane.title" > - - - - - + + + + + + @@ -76,8 +77,8 @@ export default { column: 0, a: 0, clientHeight: 0, - panes: [ ], - activeKey: 0,//当前页，当前页id，从零开始 + panes: [], + activeKey: 0, //当前页，当前页id，从零开始 videoH: 0, isFullscreen: false, originHeight: 0, @@ -88,7 +89,7 @@ export default { //watch: {}, computed: { videoHeight() { - return this.clientHeight / this.row + "px"; + return (this.clientHeight / this.row )+ "px"; }, }, destroyed() { @@ -96,10 +97,12 @@ export default { }, mounted() { this.getWallStyle(); - this.$nextTick(() => { + console.log("DOM已更新完成"); + this.playPageCameras(); }); + let isFullscreen = document.fullscreenElement || document.mozFullScreenElement || @@ -123,6 +126,7 @@ export default { that.isFullscreen = !that.isFullscreen; }); }, + updated() {}, methods: { getWallStyle() { this.$api.httpApi @@ -150,121 +154,92 @@ export default { console.log("clientHeight:" + this.clientHeight); }, onEdit(targetKey, action) { - const index = this.panes.findIndex((pane) => pane.key === targetKey); + const index = this.panes.findIndex( + (pane) => pane.key === targetKey + ); if (index !== -1) { this.panes.splice(index, 1); } }, - getAllCameras() { - this.$api.httpApi - .getAllCameras1({ - data: {}, - }) - .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); - }); - }, //一页个数 - countVideo(i){ + countVideo(i) { + this.row = i; + this.column = i; - this.row= i; - this.column= i; - - this.activeKey=0; + this.activeKey = 0; this.playPageCameras(); }, //墙信息 - pageInfo(cameras){ - var page = Math.ceil(cameras.length/(this.row*this.column)); + pageInfo(cameras) { + var page = Math.ceil(cameras.length / (this.row * this.column)); this.panes = []; - for(var i=1;i<=page;i++){ - this.panes.push({ title: "视频墙 "+i, content: "Content of Tab "+i, key: i-1 }); + for (var i = 1; i <= page; i++) { + this.panes.push({ + title: "视频墙 " + i, + content: "Content of Tab " + i, + key: i - 1, + }); } }, - changeTab(key){ + changeTab(key) { console.log(key); }, onTabClick(key) { - this.destory() - + this.destory(); + console.log(key); - this.activeKey =key; + this.activeKey = key; this.playPageCameras(); - }, - + playPageCameras() { - - this.$api.httpApi - .getAllCameras({ - data: {}, - }) - .then((res) => { - if (res.code == 200) { - let cameras = res.data; - this.pageInfo(cameras) - var pageSize = (this.row*this.column); - var camerasPage = cameras.slice(this.activeKey*pageSize,(this.activeKey+1)*pageSize); - console.log(camerasPage); - this.players=[]; - for (let i = 1; i <= camerasPage.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 = - camerasPage[i - 1].rtcServer + - ":" + - camerasPage[i - 1].rtcServerPort; - let video = document.getElementById(idName); - let player = new WebRtcPlayer( - server, - video, - "camera" + camerasPage[i - 1].id + this.$nextTick(() => { + this.$api.httpApi + .getAllCameras({ + data: {}, + }) + .then((res) => { + if (res.code == 200) { + let cameras = res.data; + this.pageInfo(cameras); + var pageSize = this.row * this.column; + var camerasPage = cameras.slice( + this.activeKey * pageSize, + (this.activeKey + 1) * pageSize ); - this.players.push(player); + console.log(camerasPage); + this.players = []; + for (let i = 1; i <= camerasPage.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 = + camerasPage[i - 1].rtcServer + + ":" + + camerasPage[i - 1].rtcServerPort; + let video = document.getElementById(idName); + console.log(video); + let player = new WebRtcPlayer( + server, + video, + "camera" + camerasPage[i - 1].id + ); + this.players.push(player); + } } - } - }) - .catch((err) => { - console.log(err); - }); + }) + .catch((err) => { + console.log(err); + }); + }); }, destory() { for (let player of this.players) { diff --git a/src/views/videoWall3/index.vue b/src/views/videoWall3/index.vue index 56e1443..099bb09 100644 --- a/src/views/videoWall3/index.vue +++ b/src/views/videoWall3/index.vue @@ -98,7 +98,7 @@ export default { console.log("clientHeight:"+this.clientHeight) }, getAllCameras(){ - this.$api.httpApi.getAllCameras3({ + this.$api.httpApi.getAllCameras1({ data: {} }).then(res => { if(res.code == 200) { @@ -116,6 +116,7 @@ export default { console.log("idName:"+idName); let server = cameras[i-1].rtcServer+":"+ cameras[i-1].rtcServerPort let video = document.getElementById(idName); + console.log(video); let player = new WebRtcPlayer(server,video,"camera"+cameras[i-1].id); this.players.push(player); }