1.需盘点取消

2.古井贡的首列是最后列
3.视频墙修改为不再使用多个视频墙模式

src/views/checkManage/Subsection.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="subsection">
-        <a-layout style="width: 1500px">
+        <a-layout style="width: 1700px; ">
             <a-layout style="width: 100%;height: 310px">
                 <a-layout-sider width="110px">
                     <a-tabs default-active-key="1" tab-position="left" @change="changeTabLeft" v-if="total.row > nums.row">
@@ -20,11 +20,11 @@
                 </a-layout-sider>
                 <a-layout-content>
                     <!-- <slot :data="{select, nums, random}"></slot> -->
-                    <div class="roadway-buttom">
+                    <div class="roadway-buttom" style="overflow-x: auto;">
                         <div class="roadway-box">
                             
                             <div class="line" v-for="(row,rowIndex) in total.row" :key="rowIndex"  v-if="row >= random.row[0] && row <= random.row[1]">
-                                <div v-for="(column,index) in total.column" :key="index" class="el" v-if="column >= random.column[0] && column <= random.column[1]">
+                                <div v-for="(column,index) in columnList" :key="index" class="el" v-if="column >= random.column[0] && column <= random.column[1]">
 
                                     <!--渲染默认巷道框架规格 定位浮在 已有巷道上做对应-->
                                     <span 
@@ -39,8 +39,9 @@
                     </div>
                 </a-layout-content>
             </a-layout>
+<!-- 
             <a-layout-footer>
-                <!-- <a-tabs default-active-key="1" tab-position="bottom" @change="value => select.row = value" v-if="total.row > nums.row"> -->
+                
                 <a-tabs default-active-key="1" tab-position="bottom" @change="changeTab" v-if="total.column > nums.column">
                     <a-tab-pane
                         v-for="index in latticeColumn"
@@ -48,7 +49,7 @@
                     >
                             <span slot="tab">
                                 {{  getRandom(index, latticeColumn, nums.column, total.column) }}
-                                <!-- <a-icon :id="`${shelveId}-row-${getRandom(index,latticeRow,nums.row,total.row)}`"/> -->
+                                
                                 
                                 <a-icon type="info-circle" v-if="status.column[index] === 1" style="color: #FFD700"/>
                                 <a-icon type="close-circle" v-else-if="status.column[index] === 2" style="color: #d81e06"/>
@@ -58,6 +59,7 @@
                     </a-tab-pane>
                 </a-tabs>
             </a-layout-footer>
+             -->
         </a-layout>
     </div>
 </template>
@@ -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 {

src/views/checkManage/index.vue

@@ -46,13 +46,6 @@
                 ></a-tag>
                 盘点正确
             </span>
-            <span class="info-text">
-                <a-tag
-                    color="#f2ed48"
-                    style="width: 30px; height: 20px; margin-right: 6px"
-                ></a-tag>
-                需盘点
-            </span>
             <span class="info-text">
                 <a-tag
                     color="#bfbfbf"

src/views/videoWall/index.vue

@@ -11,7 +11,7 @@
             @click="full"
             v-if="isFullscreen"
         ><a-icon type="left" /> 退出全屏 </a-button>
-        
+
         <a-button
             type="primary"
             @click="countVideo(2)"
@@ -20,10 +20,10 @@
             type="primary"
             @click="countVideo(3)"
         > <a-icon type="number" /></a-button>
-        
+
         <a-tabs
-            :activeKey="activeKey" 
+            :activeKey="activeKey"
-            default-active-key="1" 
+            default-active-key="1"
             @edit="onEdit"
             @change="onTabClick"
         >
@@ -32,28 +32,29 @@
                 :key="pane.key"
                 :tab="pane.title"
             >
-                <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>
             </a-tab-pane>
         </a-tabs>
 
+        <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>
 
@@ -76,8 +77,8 @@ export default {
             column: 0,
             a: 0,
             clientHeight: 0,
-            panes: [ ],
+            panes: [],
-            activeKey: 0,//当前页，当前页id，从零开始
+            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.activeKey = 0;
-            this.column= i;
-            
-            this.activeKey=0;
             this.playPageCameras();
         },
         //墙信息
-        pageInfo(cameras){
+        pageInfo(cameras) {
-            var page = Math.ceil(cameras.length/(this.row*this.column));
+            var page = Math.ceil(cameras.length / (this.row * this.column));
             this.panes = [];
-            for(var i=1;i<=page;i++){
+            for (var i = 1; i <= page; i++) {
-                this.panes.push({ title: "视频墙 "+i, content: "Content of Tab "+i, key: i-1 });
+                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.$nextTick(() => {
-            this.$api.httpApi
+                this.$api.httpApi
-                .getAllCameras({
+                    .getAllCameras({
-                    data: {},
+                        data: {},
-                })
+                    })
-                .then((res) => {
+                    .then((res) => {
-                    if (res.code == 200) {
+                        if (res.code == 200) {
-                        let cameras = res.data;
+                            let cameras = res.data;
-                        this.pageInfo(cameras)
+                            this.pageInfo(cameras);
-                        var pageSize = (this.row*this.column);
+                            var pageSize = this.row * this.column;
-                        var camerasPage = cameras.slice(this.activeKey*pageSize,(this.activeKey+1)*pageSize);
+                            var camerasPage = cameras.slice(
-                        console.log(camerasPage);
+                                this.activeKey * pageSize,
-                        this.players=[];
+                                (this.activeKey + 1) * pageSize
-                        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.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) => {
-                .catch((err) => {
+                        console.log(err);
-                    console.log(err);
+                    });
-                });
+            });
         },
         destory() {
             for (let player of this.players) {

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);
                     }