check

src/api/http/http-api.js

@@ -142,6 +142,11 @@ export default  {
         name: '复核页面的核对信息',
         method: 'POST'
     },
+    getStatusByRowColumn: {
+        url: '/stock/statusByRowColumn',
+        name: '行列的库存状态',
+        method: 'POST'
+    },
     exportStock: {
         url: '/stock/export',
         name: '导出所有巷道',

src/views/checkManage/Subsection.vue

@@ -3,14 +3,14 @@
         <a-layout style="width: 900px">
             <a-layout style="width: 100%;height: 310px">
                 <a-layout-sider width="110px">
-                    <a-tabs default-active-key="1" tab-position="left" @change="value => select.column = value" v-if="total.column > nums.column">
+                    <a-tabs default-active-key="1" tab-position="left" @change="changeTabLeft" v-if="total.column > nums.column">
                         <a-tab-pane 
                             v-for="index in latticeColumn"
                             :key="index"
                         >
-                            <span slot="tab">
+                            <span slot="tab" >
                                 {{  getRandom(index, latticeColumn, nums.column, total.column) }}
-                                <a-icon type="close-circle" v-if="status.column[index] === 1" style="color: #d81e06" />
+                                <a-icon type="close-circle" v-if="status.column[index] === 1" style="color: #d81e06"/>
                                 <a-icon type="check-circle" v-else-if="status.column[index] === 2" style="color: #1afa29" />
                                 <a-icon type="exclamation-circle" v-else style="color: #909399" />
                             </span>
@@ -18,18 +18,35 @@
                     </a-tabs>
                 </a-layout-sider>
                 <a-layout-content>
-                    <slot :data="{select, nums, random}"></slot>
+                    <!-- <slot :data="{select, nums, random}"></slot> -->
+                    <div class="roadway-buttom">
+                        <div class="roadway-box">
+                            <div class="line" v-for="(column,index) in total.column" :key="index" v-if="column >= random.column[0] && column <= random.column[1]">
+                                <div v-for="(row,index) in total.row" :key="index" class="el" v-if="row >= random.row[0] && row <= random.row[1]">
+
+                                    <!--渲染默认巷道框架规格 定位浮在 已有巷道上做对应-->
+                                    <span
+                                        class="default"
+                                        :id="`${shelveId}-${row}-${column}`"
+                                        @click="tocheck(row,column,shelveId)">
+                                        {{row}}-{{column}}
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </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" @onChange="changeTab" @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.row > nums.row">
                     <a-tab-pane
                         v-for="index in latticeRow"
                         :key="index"
                     >
                             <span slot="tab">
                                 {{  getRandom(index, latticeRow, nums.row, total.row) }}
+                                <!-- <a-icon :id="`${shelveId}-row-${getRandom(index,latticeRow,nums.row,total.row)}`"/> -->
                                 <a-icon type="close-circle" v-if="status.row[index] === 1" style="color: #d81e06" />
                                 <a-icon type="check-circle" v-else-if="status.row[index] === 2" style="color: #1afa29" />
                                 <a-icon type="exclamation-circle" v-else style="color: #909399" />
@@ -57,9 +74,11 @@ export default {
             }
         },
         // 总共数据
-        total: {
+        total:{
-            row: 1,
+            type: Object,
-            column: 1
+            default:()=>{
+                return {}
+            }
         },
         nums: {
             // 行20个 列10个
@@ -76,7 +95,8 @@ export default {
             default: () => {
                 return {}
             }
-        }
+        },
+        
     },
     computed: {
         // 应有的格子数
@@ -96,11 +116,12 @@ export default {
         },
         watchShelveIdInfo() {
             return this.shelveId;
-        }
+        },
+        
     },
     watch: {
         watchShelveIdInfo() {
-            //this.getStatus();
+            this.getStatus();
         }
     },
     data() {
@@ -108,20 +129,34 @@ export default {
             status: {
                 row: {},
                 column: {}
-            }
+            },
+           
+            
         }
     },
     mounted() {
-
+        //this.changeTab('1-1')
+        this.getStatus();
     },
     created() {
-        //this.getStatus();
+        this.getStatus();
+        //this.changeTab('1-1')
     },
     destroyed() {
     },
     methods: {
-        changeTab(){
+        changeTab(value){
-            console.log("latticeRow"+this.latticeRow)
+            console.log(value)
+            this.select.row = value
+            console.log("latticeRow"+this.latticeRow+"select"+this.select.row+","+this.select.column+"random"+this.random.row+","+this.random.column)
+            this.getStatus()
+        },
+        changeTabLeft(value){
+            console.log(value)
+            this.select.column = value
+            this.getStatus()
+            console.log("latticeRow"+this.latticeRow+"select"+this.select.row+","+this.select.column+"random"+this.random.row+","+this.random.column)
+
         },
         // 获取行或列的范围字符串
         getRandom(index, lattice, num, total) {
@@ -138,76 +173,74 @@ export default {
         getRandomColumn(val) {
             return this.getRandom(val, this.latticeColumn, this.nums.column, this.total.column).split(' - ').map(item => Number(item));
         },
-        // 获取某段的状态
+        
-        fragmentStatus(type, val) {
+        getStatusBg(row,column,status) {
-            let status0 = false;// 未盘点
+            var dom = document.getElementById(this.shelveId+"-"+row+'-'+column);
-            let status1 = false;// 盘点错误
+            var color = status == 1 ?'#d81e06': status == 2 ? '#1afa29': '#bfbfbf';
-            let rowStart = 1, rowEnd =  this.total.row;
+            dom.style.background = color
-            let columnStart = 1, columnEnd =  this.total.column;
-            if(type === 'row') {
-                [rowStart, rowEnd] = this.getRandomRow(val);
-            }else {
-                [columnStart, columnEnd] = this.getRandomColumn(val);
-            }
-            console.log(rowStart, rowEnd, columnStart, columnEnd);
-            // 判断盘点错误与未盘点
-            // for(let row = rowStart; row++; row <= rowEnd) {
-            //     for(let column = columnStart; column++; column <= columnEnd) {
-            //         let rowColStatus = (this.stockInfo[`${row}-${column}`] || {}).status;
-            //         if(!rowColStatus) {
-            //             // 未盘点
-            //             status0 = true;
-            //         }else if(rowColStatus === 1) {
-            //             // 盘点错误
-            //             status1 = true;
-            //         }
-            //     }
-            // }
-            // if(status1) {
-            //     return 1;  // 盘点错误
-            // }else if(status0) {
-            //     return 0; // 未盘点
-            // }else {
-            //     return 2; // 盘点成功
-            // }
         },
-        async getStatus() {
+        getStatusTab(tab,status,rowColumn){
-            console.log( "column"+this.latticeColumn)
+            var dom = document.getElementById(this.shelveId+'-'+rowColumn+'-'+tab);
-            console.log( "row"+this.latticeRow)
+            console.log(dom)
-            // for(let i = 1 ; i++; i < this.latticeRow) {
+            console.log(this.shelveId+'-'+rowColumn+'-'+tab)
-            //     let r = this.getRandomRow(i);
+            dom.style.type ="close-circle"
-            //     console.log(r)
-            //     //this.status.row[i] = this.fragmentStatus('row', i);
-            // }
             
-            // for(let i = 1 ; i++; i < this.latticeColumn) {
+            var color = status == 1 ?'#d81e06': status == 2 ? '#1afa29': '#bfbfbf';
-            //     let rowColumn = this.getRandomColumn(i);
+            dom.style.color = color
-            //     this.status.column[i] = this.fragmentStatus('column', i);
+            console.log(dom)
-            // }
+        },
 
-            // for(let row = 1;  row <= this.total.row; row++) {
+        getStatus(){
+            if(this.shelveId == {}){
+                return;
+            }
+            var columnTab = []
+            for(let c = 1; c <= this.latticeColumn ;c++){
+                let tab = this.getRandom(c,this.latticeColumn,this.nums.column,this.total.column)
+                columnTab.push(tab)
+            }
+            var rowTab = []
+            for(let r = 1; r <= this.latticeRow ;r++){
+                let tab = this.getRandom(r,this.latticeRow,this.nums.row,this.total.row)
+                rowTab.push(tab)
+            }
+            this.$api.httpApi.getStatusByRowColumn({
+                data: {
+                    columnStart: this.random.column[0],
+                    columnEnd: this.random.column[1],
+                    rowStart: this.random.row[0],
+                    rowEnd: this.random.row[1],
+                    shelveId: this.shelveId,
+                    rowTabs: rowTab,
+                    columnTabs: columnTab
+                }
+            }).then(res => {
+                if(res.code == 200){
+                    if(res.data.stocks){
+                        for(let a of res.data.stocks){
+                            this.getStatusBg(a.row,a.column,a.status)
+                        }
+                    }
+                    this.columnTabStatus = res.data.columnTabStatus
+                    var i = 1;
+                    for(let a in res.data.columnTabStatus){
+                        this.status.column[i] = res.data.columnTabStatus[a]
+                        i++;
+                    }
+                    var j = 1;
+                    for(let a in res.data.rowTabStatus){
+                        this.status.row[j] = res.data.rowTabStatus[a]
+                        j++;
+                    }
                     
-            //     for(let column = 1; column <= this.total.column; column++) {
+                }
+            }).catch(err => {
 
-            //         let status = (this.stockInfo[`${row}-${column}`] || {}).status || 0;
+            });
-            //         if(status < 2) {
-            //             // 当前是在第几段
-            //             let latticeRow = parseInt(row / this.nums.row) + (row % this.nums.row > 0 ? 1 : 0);
-            //             let latticeColumn = parseInt(column / this.nums.column) + (column % this.nums.column > 0 ? 1 : 0);
-            //             if(status === 1) {
-            //                 console.log('第几段', latticeRow, latticeColumn);
-            //                 console.log(row, column,status);
-            //                 this.$set(this.status.row, latticeRow, status);
-            //                 this.$set(this.status.column, latticeColumn, status);
-            //             }else {
-            //                 if(!this.status.row[latticeRow]) this.$set(this.status.row, latticeRow, status);
-            //                 if(!this.status.column[latticeColumn])  this.$set(this.status.column, latticeColumn, status);
-            //             }
-            //         }
-            //     }
-            // }
-            // console.log(this.status);
         },
+        toCheck(row,column){
+
+        }
     }
 }
 </script>
@@ -262,5 +295,37 @@ export default {
     .ant-layout, .ant-layout-sider, .ant-layout-footer {
         background-color: #ffffff;
     }
+    roadway-buttom {
+        padding: 5px 0;
+        width: 100%;
+    }
+
+    .roadway-box {
+        transform: rotateX(180deg);
+        padding: 10px 10px 0 0;
+        .line {
+            display: flex;
+            transform: rotateX(180deg); //两次垂直镜像翻转让原本由上到下排列的div 更改为由下到上
+
+            .el {
+                width: 46px;
+                height: 25px;
+                line-height: 25px;
+                margin: 2px;
+                font-size: 12px;
+                text-align: center;
+                border-radius: 4px;
+                cursor: pointer;
+                position: relative;
+                .default {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    bottom: 0;
+                }
+            }
+        }
+    }
 }
 </style>

src/views/checkManage/index.vue

@@ -49,12 +49,12 @@
 
         <div class="check-content" v-for="item in data" :key="item.id">
             <subsection v-if="item.id == select" :total="{row: item.leftRow, column: item.leftColumn}" :shelveId="leftShelveId.shelveId">
-                <template v-slot="scope">
+                <!-- <template v-slot="scope">
                     <div class="roadway-top">
                         <div class="roadway-box">
                             <div class="line" v-for="(column,index) in item.leftColumn" :key="index" v-if="column >= scope.data.random.column[0] && column <= scope.data.random.column[1]">
                                 <div v-for="(row,i) in item.leftRow" :key="i" class="el" v-if="row >= scope.data.random.row[0] && row <= scope.data.random.row[1]">
-                                    <!--渲染默认巷道框架规格 定位浮在 已有巷道上做对应-->
+                                    渲染默认巷道框架规格 定位浮在 已有巷道上做对应
                                     <span
                                         class="default"
                                         :style="{background:getStatusBg(stockInfo.left, `${row}-${column}`)}"
@@ -66,7 +66,7 @@
                             </div>
                         </div>
                     </div>
-                </template>
+                </template> -->
             </subsection>
         </div>
 
@@ -92,13 +92,13 @@
 
         <div class="check-content" v-for="item in data" :key="item.name">
             <subsection v-if="item.id == select" :total="{row:item.leftRow, column: item.leftColumn}" :shelveId="rightShelveId.shelveId">
-                <template v-slot="scope">
+                <!-- <template v-slot="scope">
                     <div class="roadway-buttom">
                         <div class="roadway-box">
                             <div class="line" v-for="(column,index) in item.rightColumn" :key="index" v-if="column >= scope.data.random.column[0] && column <= scope.data.random.column[1]">
                                 <div v-for="(row,index) in item.rightRow" :key="index" class="el" v-if="row >= scope.data.random.row[0] && row <= scope.data.random.row[1]">
 
-                                    <!--渲染默认巷道框架规格 定位浮在 已有巷道上做对应-->
+                                    渲染默认巷道框架规格 定位浮在 已有巷道上做对应
                                     <span
                                         class="default"
                                         :style="{background:getStatusBg(stockInfo.right, `${row}-${column}`)}"
@@ -109,7 +109,7 @@
                             </div>
                         </div>
                     </div>
-                </template>
+                </template> -->
             </subsection>
         </div>
     </div>

src/views/realTimeMonitoring/index.vue

@@ -68,11 +68,6 @@ export default {
         }
         this.tabKey = sessionStorage.getItem('tabKey');
         this.getClientHeight();
-        
-        // 监听界面尺寸变化
-        // window.onresize = () => {
-        //     this.getClientHeight();
-        // }
     },
     destroyed() {
         // window.onresize = null;

src/views/roadwayManage/model.vue

@@ -243,14 +243,14 @@ export default {
                         plcIp: newVal.plcIp,
                         plcPort: newVal.plcPort,
                         leftType: newVal.leftType === null ? '' : newVal.leftType === 0 ? '单伸' : '双伸',
-                        leftRow: 7 || newVal.leftRow,
+                        leftRow: newVal.leftRow,
-                        leftColumn: 18 || newVal.leftColumn,
+                        leftColumn: newVal.leftColumn,
                         leftShelveId: newVal.leftShelveId,
                         leftInsideShelveId: newVal.leftInsideShelveId,
                         leftOutsideShelveId: newVal.leftOutsideShelveId,
                         rightType: newVal.rightType === null ? '' : newVal.rightType === 0 ? '单伸' : '双伸',
-                        rightRow: 7 || newVal.rightRow,
+                        rightRow: newVal.rightRow,
-                        rightColumn: 18 || newVal.rightColumn,
+                        rightColumn: newVal.rightColumn,
                         rightShelveId: newVal.rightShelveId,
                         rightInsideShelveId:newVal.rightInsideShelveId,
                         rightOutsideShelveId:newVal.rightOutsideShelveId,