From 9c9625085ce49bb4c74016db2b6113dbee1a0f47 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?LAPTOP-S9HJSOEB=5C=E6=98=8A=E5=A4=A9?=
 <wang.haotian@hzleaper.com>
Date: Tue, 9 Jan 2024 13:36:03 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A5=E5=85=85=E4=B8=8A=E4=B8=80=E4=B8=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/alarmVideos/alarmLog.vue |   9 +-
 src/views/camera.vue               |  42 +++---
 src/views/cameraManage/index.vue   |   4 +-
 src/views/checkManage/index.vue    |  36 -----
 src/views/videoWall7/index.vue     | 208 +++++++++++++++++++++++++++++
 5 files changed, 239 insertions(+), 60 deletions(-)
 create mode 100644 src/views/videoWall7/index.vue

diff --git a/src/views/alarmVideos/alarmLog.vue b/src/views/alarmVideos/alarmLog.vue
index a1cad56..bb88b6e 100644
--- a/src/views/alarmVideos/alarmLog.vue
+++ b/src/views/alarmVideos/alarmLog.vue
@@ -5,7 +5,7 @@
                 <a-row :gutter="24">
                    
                     <a-col :span="4" >
-                        <a-form-item label="巷道">
+                        <a-form-item label="类型">
                         <a-select :default-value="0" style="width: 100px" @change="handleChange">
                             类型：
                             <a-select-option :value="0">
@@ -47,9 +47,6 @@
             :pagination="pagination"
             @change="handleGetalarmLog"
         >
-          <span slot="streetType" slot-scope="text">
-               {{ text === null ? '-' : text === 0 ? '单伸' : '双伸' }}
-          </span>
           <span slot="pics" slot-scope="text" style="width:auto">
 
           <template>
@@ -129,6 +126,10 @@ export default {
                     title: "情况说明",
                     dataIndex: "warmName",
                 },
+                {
+                    title: "类型",
+                    dataIndex: "typeName",
+                },
                 {
                     title: "告警时间",
                     dataIndex: "startTime",
diff --git a/src/views/camera.vue b/src/views/camera.vue
index 11eeb0d..8233aa2 100644
--- a/src/views/camera.vue
+++ b/src/views/camera.vue
@@ -1,7 +1,7 @@
 <template>
-    <div style="position: relative;width: 700px;height: 576px;">
+    <div :style="{position: relative,width:w,height:h}">
         <video
-            :style="{ height: videoHeight,}"
+            :style="{ height: h,}"
             :id="`camera${id}`"
             autoplay
             muted
@@ -139,17 +139,13 @@ import WebRtcPlayer from "../../public/static/webrtcplayer";
 export default {
     data() {
         return {
-            w:
-                document.documentElement.offsetWidth ||
-                document.body.offsetWidth,
-            h:
-                document.documentElement.offsetHeight ||
-                document.body.offsetHeight,
+            w : 700,
+            h:554,
             confirmLoading: false,
             videoHeight: "576px",
             id: "12",
             mdata: [],
-            camera:{},
+            camera: {},
             zoomSubUrl: require("@/assets/sub-icon.png"),
             zoomAddUrl: require("@/assets/add-icon.png"),
             focusSubUrl: require("@/assets/sub-icon.png"),
@@ -174,7 +170,16 @@ export default {
     mounted() {
         this.mdata = this.$route.path;
         console.log(this.mdata);
-        this.id = this.mdata.toString().split("/").pop();
+        var req = this.mdata.toString().split("/").pop().split("?");
+
+        this.id = req[0];
+        if(this.$route.query!= null && this.$route.query.h !=null){
+            this.h = this.$route.query.h +"px"
+        }
+        if(this.$route.query!= null && this.$route.query.w !=null){
+            this.w = this.$route.query.w +"px"
+        }
+
         this.$axios
             .get("/camera/" + this.id, {
                 data: {},
@@ -182,7 +187,7 @@ export default {
             .then((res) => {
                 this.camera = res.data;
 
-                console.log( this.camera);
+                console.log(this.camera);
                 this.autoPlay();
             })
             .catch((err) => {});
@@ -206,14 +211,15 @@ export default {
             let video = document.getElementById("camera" + this.id);
             if (video) {
                 console.log("play:" + this.id);
-                
-                let server ;
-                if(this.camera.rtcServerPort != null){
-                    server= this.camera.rtcServer + ":" +  this.camera.rtcServerPort ;
-                }else{
-                    server= this.camera.rtcServer
+
+                let server;
+                if (this.camera.rtcServerPort != null) {
+                    server =
+                        this.camera.rtcServer + ":" + this.camera.rtcServerPort;
+                } else {
+                    server = this.camera.rtcServer;
                 }
-                
+
                 let player = new WebRtcPlayer(
                     server,
                     video,
diff --git a/src/views/cameraManage/index.vue b/src/views/cameraManage/index.vue
index 02683a3..980f9b0 100644
--- a/src/views/cameraManage/index.vue
+++ b/src/views/cameraManage/index.vue
@@ -84,11 +84,11 @@ export default {
     data() {
         return {
             pageNum:1,
-            pageSize:10,
+            pageSize:30,
             data: [],
             pagination:{
                 total:0,
-                defaultPageSize:10, // 默认每页显示数量
+                defaultPageSize:30, // 默认每页显示数量
                 showTotal: total => `共 ${total} 条数据`, // 显示总数
                 showSizeChanger:true, // 显示可改变每页数量
                 pageSizeOptions: ['10', '20', '30'],
diff --git a/src/views/checkManage/index.vue b/src/views/checkManage/index.vue
index 9fbb682..b8fe39d 100644
--- a/src/views/checkManage/index.vue
+++ b/src/views/checkManage/index.vue
@@ -289,42 +289,6 @@ export default {
                 })
                 .catch((err) => {});
         },
-        // initWebSocket() {
-        //     //初始化weosocket
-        //     const wsuri = "ws://127.0.0.1:8099/ws/111";
-        //     this.websock = new WebSocket(wsuri);
-        //     this.websock.onmessage = this.websocketonmessage;
-        //     this.websock.onopen = this.websocketonopen;
-        //     this.websock.onerror = this.websocketonerror;
-        //     this.websock.onclose = this.websocketclose;
-        // },
-        // websocketonopen() {
-        //     //连接建立之后执行send方法发送数据
-        //     this.websocketsend(JSON.stringify(actions));
-        // },
-        // websocketonerror() {
-        //     //连接建立失败重连
-        //     this.initWebSocket();
-        // },
-        // websocketonmessage(e) {
-        //     console.log("aaaa");
-        //     var el = JSON.parse(e.data)
-        //     console.log(el.type);
-
-        //     if (el.type == "InventoryPush") {
-        //         this.wsData.push(el);
-        //     }
-        //     //数据接收
-        //     const redata = JSON.parse(e.data);
-        // },
-        // websocketsend(Data) {
-        //     //数据发送
-        //     this.websock.send(Data);
-        // },
-        // websocketclose(e) {
-        //     //关闭
-        //     console.log("断开连接", e);
-        // },
     },
     components: {
         Subsection,
diff --git a/src/views/videoWall7/index.vue b/src/views/videoWall7/index.vue
new file mode 100644
index 0000000..6fadcc9
--- /dev/null
+++ b/src/views/videoWall7/index.vue
@@ -0,0 +1,208 @@
+<template>
+    <div id="videos">
+        
+        <a-button type="primary" @click="full" v-if="!isFullscreen"> 全屏<a-icon type="right" /> </a-button>
+        <a-button type="primary" @click="full" v-if="isFullscreen"><a-icon type="left" /> 退出全屏 </a-button>
+        <a-row v-for='rowIndex in row' :key='rowIndex'>
+            <a-col v-for='colIndex in column' :key='colIndex' :span="24/column" :style="{height: videoHeight}" >
+                <video class="camera" :id="rowIndex+'-'+colIndex" autoplay muted :style="{'height': '100%',width:'100%','object-fit':'fill'}" ></video>
+            </a-col>
+        </a-row>
+        
+    </div>
+</template>
+
+<script>
+import WebRtcPlayer from "../../../public/static/webrtcplayer"
+export default {
+    name: 'top',
+    components: {},
+    props: {
+        id: {
+            type: String,
+            default () {
+                return ''
+            }
+        }
+    },
+    data () {
+        return {
+            row : 0,
+            column : 0,
+            a: 0,
+            clientHeight: 0,
+            videoH: 0,
+            isFullscreen: false,
+            originHeight: 0,
+            fullHeight: 0,
+            players: []
+        }
+    },
+    //watch: {},
+    computed: {
+        videoHeight() {
+            return( this.clientHeight/ this.row ) + 'px';
+        }
+    },
+    destroyed() {
+        this.destory()
+    },
+    mounted () {
+        this.getWallStyle();
+        
+        this.$nextTick(() => {
+            this.getAllCameras()
+        });
+        let isFullscreen =
+            document.fullscreenElement ||
+            document.mozFullScreenElement ||
+            document.webkitFullscreenElement ||
+            document.fullScreen ||
+            document.mozFullScreen ||
+            document.webkitIsFullScreen;
+        this.isFullscreen = !!isFullscreen;
+       
+        let that = this;
+        document.addEventListener("fullscreenchange", () => {
+            that.isFullscreen = !that.isFullscreen;
+        });
+        document.addEventListener("mozfullscreenchange", () => {
+            that.isFullscreen = !that.isFullscreen;
+        });
+        document.addEventListener("webkitfullscreenchange", () => {
+            that.isFullscreen = !that.isFullscreen;
+        });
+        document.addEventListener("msfullscreenchange", () => {
+            that.isFullscreen = !that.isFullscreen;
+        });
+    },
+    methods: {
+        
+        getWallStyle(){
+            this.$api.httpApi.getWallStyle({
+                data: {}
+            }).then(res => {
+                if(res.code == 200) {
+                    this.row = res.data[0];
+                    this.column = res.data[1];
+                    this.getClientHeight();
+                    sessionStorage.setItem('originHeight', this.clientHeight)
+                }
+            }).catch(err => {
+                console.log(err)
+            })
+        },
+        getClientHeight() {
+            this.clientHeight = this.$el.clientHeight-40;
+            
+            console.log("clientHeight:"+this.clientHeight)
+        },
+        getAllCameras(){
+            this.$api.httpApi.getAllCameras7({
+                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 ;
+                        if(cameras[i-1].rtcServerPort != null){
+                            server=  cameras[i-1].rtcServer+":"+ cameras[i-1].rtcServerPort
+                        }else{
+                            server= cameras[i-1].rtcServer
+                        }
+                        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)
+            })
+        },
+        destory(){
+            for(let player of this.players){
+                console.log("stop")
+                player.destroy()
+            }
+        },
+        
+        full () {
+            if(this.isFullscreen){
+                this.exitfullscreen()
+            }else{
+                this.enterfullscreen()
+            }
+            
+        },
+        //控制全屏
+        enterfullscreen () { //进入全屏
+            var docElm = document.getElementById('videos')  // 指定容器id
+            //W3C
+            if (docElm.requestFullscreen) {
+                docElm.requestFullscreen()
+            }
+           
+            //FireFox
+            else if (docElm.mozRequestFullScreen) {
+                docElm.mozRequestFullScreen()
+            }
+            //Chrome等
+            else if (docElm.webkitRequestFullScreen) {
+                docElm.webkitRequestFullScreen()
+            }
+            //IE11
+            else if (elem.msRequestFullscreen) {
+                elem.msRequestFullscreen()
+            }
+            this.$nextTick(() => {
+                this.clientHeight = document.body.clientHeight;
+                console.log("full:"+document.body.clientHeight)
+            })
+            
+        },
+        //退出全屏
+        exitfullscreen () {
+            console.log("tuichu");
+            if (document.exitFullscreen) {
+                document.exitFullscreen()
+            } else if (document.mozCancelFullScreen) {
+                document.mozCancelFullScreen()
+            } else if (document.webkitCancelFullScreen) {
+                document.webkitCancelFullScreen()
+            } else if (document.msExitFullscreen) {
+                document.msExitFullscreen()
+            }
+            this.$nextTick(() => {
+                let origin = sessionStorage.getItem('originHeight');
+                if(origin){
+                    this.clientHeight = origin;
+                }else{
+                    this.getClientHeight();
+                }
+                
+            })
+        }
+    }
+}
+
+</script>
+<style>
+  
+  /* #videos > .ant-row  {
+		height: calc(100% / 8);
+	}
+    #videos > .ant-row  > .ant-col{
+		height: calc(100% / 8);
+	} */
+   
+  </style>
\ No newline at end of file