|  |  |  | 
|---|
|  |  |  | <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 { | 
|---|
|  |  |  | 
|---|
|  |  |  | </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> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | <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="area03">平库B区</label> | 
|---|
|  |  |  | <label for="area03">B区</label> | 
|---|
|  |  |  | <input id="area03" type="radio" v-model="area" name="r" value="3"> | 
|---|
|  |  |  | <label for="area032">平库B区2层</label> | 
|---|
|  |  |  | <input id="area032" type="radio" v-model="area" name="r" value="32"> | 
|---|
|  |  |  | <label for="area04">平库C区</label> | 
|---|
|  |  |  | <label for="area04">C区</label> | 
|---|
|  |  |  | <input id="area04" type="radio" v-model="area" name="r" value="4"> | 
|---|
|  |  |  | <label for="area042">平库C区2层</label> | 
|---|
|  |  |  | <input id="area042" type="radio" v-model="area" name="r" value="42"> | 
|---|
|  |  |  | <label for="area05">平库D区</label> | 
|---|
|  |  |  | <label for="area05">D区</label> | 
|---|
|  |  |  | <input id="area05" type="radio" v-model="area" name="r" value="5"> | 
|---|
|  |  |  | <label for="area052">平库D区2层</label> | 
|---|
|  |  |  | <input id="area052" type="radio" v-model="area" name="r" value="52"> | 
|---|
|  |  |  | <label for="area06">E区</label> | 
|---|
|  |  |  | <input id="area06" type="radio" v-model="area" name="r" value="6"> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | 
|---|
|  |  |  | deep: true, | 
|---|
|  |  |  | handler(val) { | 
|---|
|  |  |  | if (val == 1){ | 
|---|
|  |  |  | this.areaName = "立库" | 
|---|
|  |  |  | this.areaName = "A区" | 
|---|
|  |  |  |  | 
|---|
|  |  |  | }else if (val == 3){ | 
|---|
|  |  |  | this.areaName = "B区" | 
|---|
|  |  |  | 
|---|
|  |  |  | else if (val == 5){ | 
|---|
|  |  |  | this.areaName = "D区" | 
|---|
|  |  |  | } | 
|---|
|  |  |  | else if (val == 32){ | 
|---|
|  |  |  | this.areaName = "B区2层" | 
|---|
|  |  |  | } | 
|---|
|  |  |  | else if (val == 42){ | 
|---|
|  |  |  | this.areaName = "C区2层" | 
|---|
|  |  |  | } | 
|---|
|  |  |  | else if (val == 52){ | 
|---|
|  |  |  | this.areaName = "D区2层" | 
|---|
|  |  |  | else if (val == 6){ | 
|---|
|  |  |  | this.areaName = "E区" | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | val.searchStatus = false//搜索标记 | 
|---|
|  |  |  | data2.push(val) | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | this.pointContainerWidth = item.length * (40+1) | 
|---|
|  |  |  | this.pointContainerWidth = item.length * (35+1) | 
|---|
|  |  |  | data.push(data2) | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | this.map = data | 
|---|
|  |  |  | 
|---|
|  |  |  | let locNo = rowData[i].locNo; | 
|---|
|  |  |  | return "#" + parseInt(locNo.substr(0, 2)); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }else if (this.area > 10){ | 
|---|
|  |  |  | }else if (this.area == 6){ | 
|---|
|  |  |  | if (rowData[i].locNo != undefined) { | 
|---|
|  |  |  | let locNo = rowData[i].locNo; | 
|---|
|  |  |  | return "#" + parseInt(locNo.substr(8, 2)); | 
|---|
|  |  |  | return "#" + parseInt(locNo.substr(7, 2)); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | else { | 
|---|
|  |  |  | 
|---|
|  |  |  | return "#" + parseInt(locNo.substr(7, 2)); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | return ""; | 
|---|