|  |  |  | 
|---|
|  |  |  | <style> | 
|---|
|  |  |  | .pointContainer { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | justify-content: center; | 
|---|
|  |  |  | justify-content: flex-start; | 
|---|
|  |  |  | margin-top: 1px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .pointBox { | 
|---|
|  |  |  | background: #fffef9; | 
|---|
|  |  |  | width: 40px; | 
|---|
|  |  |  | height: 40px; | 
|---|
|  |  |  | width: 35px; | 
|---|
|  |  |  | height: 35px; | 
|---|
|  |  |  | margin-right: 1px; | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | justify-content: center; | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .pointBoxDefault { | 
|---|
|  |  |  | background: #f9f4dc; | 
|---|
|  |  |  | background: #ffffff; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .pointBoxSelected { | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /*滑动卡片start*/ | 
|---|
|  |  |  | .hoverCard { | 
|---|
|  |  |  | width: 140px; | 
|---|
|  |  |  | width: 152px; | 
|---|
|  |  |  | height: 224px; | 
|---|
|  |  |  | border-radius: 20px; | 
|---|
|  |  |  | background: #f5f5f5; | 
|---|
|  |  |  | 
|---|
|  |  |  | </style> | 
|---|
|  |  |  | </head> | 
|---|
|  |  |  | <body> | 
|---|
|  |  |  | <div id="app" style="display: flex;justify-content: space-around;margin-top: 50px;flex-wrap: nowrap; scale: 0.9" @click="bgClick()"> | 
|---|
|  |  |  | <div style="flex: 3;" :style="{scale:showScale/100.0,marginTop:(showScale-100)*5 + 'px'}"> | 
|---|
|  |  |  | <div> | 
|---|
|  |  |  | <div id="app" style="display: flex;justify-content: space-around;margin-top: 50px;flex-wrap: nowrap; " @click="bgClick()"> | 
|---|
|  |  |  | <div style="flex: 3;overflow: auto; " :style="{scale:showScale/100.0,marginTop:(showScale-100)*5 + 'px'}"> | 
|---|
|  |  |  | <div style="width: 100%;overflow: auto;"> | 
|---|
|  |  |  | <div class="pointContainer" v-for="(x,index) in map" :key="index"> | 
|---|
|  |  |  | <div v-if="index != 0 && (index != map.length-1)" v-for="(y,idx) in x" :key="idx"> | 
|---|
|  |  |  | <div v-if="idx != 0 && (idx != map[index].length-1)"> | 
|---|
|  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <div style="width: 40px;display: flex;justify-content: center;align-items: center;"> | 
|---|
|  |  |  | <div style="width: 40px; display: flex;justify-content: flex-end;align-items: center;"> | 
|---|
|  |  |  | {{ getRealRowByX(index) }} | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | <div style="width: 100%;margin-bottom: 20px;"> | 
|---|
|  |  |  | <div style="display: flex;justify-content: space-between;"> | 
|---|
|  |  |  | <div><input v-model="searchMatnr" placeholder="物料号" type="text" class="search-input"></div> | 
|---|
|  |  |  | <div><input v-model="searchOrderNo" placeholder="订单号" type="text" class="search-input"></div> | 
|---|
|  |  |  | <div style="margin-left: 20px"><input v-model="searchOrderNo" placeholder="订单号" type="text" class="search-input"></div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div style="display: flex;justify-content: space-between;margin-top: 10px;"> | 
|---|
|  |  |  | <div><input style="width: 110px;" v-model="searchMaktx" placeholder="物料名称" type="text" class="search-input"></div> | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <div class="hoverCard"> | 
|---|
|  |  |  | <div class="card-details"> | 
|---|
|  |  |  | <p class="text-title" style="text-align: center;">库区 {{area}}</p> | 
|---|
|  |  |  | <p class="text-title" style="text-align: center;">库区 {{areaName}}</p> | 
|---|
|  |  |  | <div class="text-body" style="display: flex;"> | 
|---|
|  |  |  | <div class="floorSelect"> | 
|---|
|  |  |  | <label for="area01">立库</label> | 
|---|
|  |  |  | <label for="area01">A区</label> | 
|---|
|  |  |  | <input id="area01" type="radio" name="r" v-model="area" value="1" checked=""> | 
|---|
|  |  |  | <label for="area02">平库A区</label> | 
|---|
|  |  |  | <input id="area02" type="radio" v-model="area" name="r" value="2"> | 
|---|
|  |  |  | <label for="area03">平库B区</label> | 
|---|
|  |  |  | <label for="area03">B区</label> | 
|---|
|  |  |  | <input id="area03" type="radio" v-model="area" name="r" value="3"> | 
|---|
|  |  |  | <label for="area04">平库C区</label> | 
|---|
|  |  |  | <label for="area04">C区</label> | 
|---|
|  |  |  | <input id="area04" type="radio" v-model="area" name="r" value="4"> | 
|---|
|  |  |  | <label for="area05">平库D区</label> | 
|---|
|  |  |  | <label for="area05">D区</label> | 
|---|
|  |  |  | <input id="area05" type="radio" v-model="area" name="r" value="5"> | 
|---|
|  |  |  | <label for="area06">E区</label> | 
|---|
|  |  |  | <input id="area06" type="radio" v-model="area" name="r" value="6"> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <button class="card-button">库区 {{area}}</button> | 
|---|
|  |  |  | <button class="card-button">库区 {{areaName}}</button> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <div class="hoverCard"> | 
|---|
|  |  |  | 
|---|
|  |  |  | pointContainerWidth: 0, | 
|---|
|  |  |  | currentLev: 1, | 
|---|
|  |  |  | area:1, | 
|---|
|  |  |  | areaName:"立库", | 
|---|
|  |  |  | crnList: null, | 
|---|
|  |  |  | crnBox: false, | 
|---|
|  |  |  | crnBoxTop: "0px", | 
|---|
|  |  |  | 
|---|
|  |  |  | area: { | 
|---|
|  |  |  | deep: true, | 
|---|
|  |  |  | handler(val) { | 
|---|
|  |  |  | if (val == 1){ | 
|---|
|  |  |  | this.areaName = "A区" | 
|---|
|  |  |  |  | 
|---|
|  |  |  | }else if (val == 3){ | 
|---|
|  |  |  | this.areaName = "B区" | 
|---|
|  |  |  | } | 
|---|
|  |  |  | else if (val == 4){ | 
|---|
|  |  |  | this.areaName = "C区" | 
|---|
|  |  |  | } | 
|---|
|  |  |  | else if (val == 5){ | 
|---|
|  |  |  | this.areaName = "D区" | 
|---|
|  |  |  | } | 
|---|
|  |  |  | else if (val == 6){ | 
|---|
|  |  |  | this.areaName = "E区" | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | this.init() | 
|---|
|  |  |  | if (this.searchMatnr != "" | 
|---|
|  |  |  | || this.searchOrderNo != "" | 
|---|
|  |  |  | 
|---|
|  |  |  | headers: {'token': localStorage.getItem('token')}, | 
|---|
|  |  |  | method: "get", | 
|---|
|  |  |  | success: (data) => { | 
|---|
|  |  |  | console.log(data) | 
|---|
|  |  |  | that.importDataClick(data) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | 
|---|
|  |  |  | val.searchStatus = false//搜索标记 | 
|---|
|  |  |  | data2.push(val) | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | this.pointContainerWidth = item.length * (40+1) | 
|---|
|  |  |  | this.pointContainerWidth = item.length * (35+1) | 
|---|
|  |  |  | data.push(data2) | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | this.map = data | 
|---|
|  |  |  | 
|---|
|  |  |  | //获取真实库位行号,通过坐标x | 
|---|
|  |  |  | let data = this.map | 
|---|
|  |  |  | let rowData = data[x] | 
|---|
|  |  |  | console.log(x) | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | for (var i = 1; i < rowData.length; i++) { | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | let locNo = rowData[i].locNo; | 
|---|
|  |  |  | return "#" + parseInt(locNo.substr(0, 2)); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }else { | 
|---|
|  |  |  | }else if (this.area == 6){ | 
|---|
|  |  |  | if (rowData[i].locNo != undefined) { | 
|---|
|  |  |  | let locNo = rowData[i].locNo; | 
|---|
|  |  |  | return "#" + parseInt(locNo.substr(7, 2));; | 
|---|
|  |  |  | return "#" + parseInt(locNo.substr(7, 2)); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | else { | 
|---|
|  |  |  | if (rowData[i].locNo != undefined) { | 
|---|
|  |  |  | let locNo = rowData[i].locNo; | 
|---|
|  |  |  | return "#" + parseInt(locNo.substr(7, 2)); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | return ""; | 
|---|