|  |  |  | 
|---|
|  |  |  | /*    color: #fff;*/ | 
|---|
|  |  |  | /*}*/ | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .pointBox { | 
|---|
|  |  |  | .pointBox2 { | 
|---|
|  |  |  | background: #fffef9; | 
|---|
|  |  |  | width: 35px; | 
|---|
|  |  |  | height: 35px; | 
|---|
|  |  |  | 
|---|
|  |  |  | user-select: none; | 
|---|
|  |  |  | color: #fff; | 
|---|
|  |  |  | /*transform: perspective(130px) rotateX(30deg) translateZ(-20px);*/ | 
|---|
|  |  |  | box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); | 
|---|
|  |  |  | /*box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);*/ | 
|---|
|  |  |  | /*border-radius: 50% 20% / 10% 40%;*/ | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .pointBox { | 
|---|
|  |  |  | background: #fffef9; | 
|---|
|  |  |  | width: 300px; | 
|---|
|  |  |  | height: 35px; | 
|---|
|  |  |  | margin-right: 1px; | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | justify-content: center; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | font-size: 14px; | 
|---|
|  |  |  | user-select: none; | 
|---|
|  |  |  | color: #fff; | 
|---|
|  |  |  | /*transform: perspective(130px) rotateX(30deg) translateZ(-20px);*/ | 
|---|
|  |  |  | /*box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);*/ | 
|---|
|  |  |  | /*border-radius: 50% 20% / 10% 40%;*/ | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | </style> | 
|---|
|  |  |  | </head> | 
|---|
|  |  |  | <body> | 
|---|
|  |  |  | <div id="app" style="display: flex;justify-content: space-around;margin-top: 50px;flex-wrap: nowrap; " @click="bgClick()"> | 
|---|
|  |  |  | <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 v-if="map[index][idx].value < 0" class="pointBox"></div> | 
|---|
|  |  |  | <div v-if="map[index][idx].value < 0" style="visibility: hidden;" class="pointBox"></div> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <!--库位--> | 
|---|
|  |  |  | <div v-else-if="map[index][idx].value  == 0" @contextmenu.prevent="rightEvent(index,idx,$event)"> | 
|---|
|  |  |  | 
|---|
|  |  |  | <div v-else-if="map[index][idx].locSts == 'P'" :class="{'pointBoxSearch':map[index][idx].searchStatus}" class="pointBox pointBoxOut">{{ map[index][idx].locSts }}</div> | 
|---|
|  |  |  | <div v-else-if="map[index][idx].locSts == 'R'" :class="{'pointBoxSearch':map[index][idx].searchStatus}" class="pointBox pointBoxOutYy">{{ map[index][idx].locSts }}</div> | 
|---|
|  |  |  | <div v-else-if="map[index][idx].locSts == 'S'" :class="{'pointBoxSearch':map[index][idx].searchStatus}" class="pointBox pointBoxInYy">{{ map[index][idx].locSts }}</div> | 
|---|
|  |  |  | <div v-else-if="map[index][idx].locSts == 'X'" :class="{'pointBoxSearch':map[index][idx].searchStatus}" class="pointBox pointBoxEnd">{{ map[index][idx].locSts }}</div> | 
|---|
|  |  |  | <div v-else class="pointBox pointBoxDefault" :class="{'pointBoxSearch':map[index][idx].searchStatus}">{{ map[index][idx].locSts }}</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | <input id="02" type="radio" v-model="currentLev" name="r" value="2"> | 
|---|
|  |  |  | <label for="03">3F</label> | 
|---|
|  |  |  | <input id="03" type="radio" v-model="currentLev" name="r" value="3"> | 
|---|
|  |  |  | <label for="04">4F</label> | 
|---|
|  |  |  | <input id="04" type="radio" v-model="currentLev" name="r" value="4"> | 
|---|
|  |  |  | <label for="05">5F</label> | 
|---|
|  |  |  | <input id="05" type="radio" v-model="currentLev" name="r" value="5"> | 
|---|
|  |  |  | <label for="06">6F</label> | 
|---|
|  |  |  | <input id="06" type="radio" v-model="currentLev" name="r" value="6"> | 
|---|
|  |  |  | <label for="07">7F</label> | 
|---|
|  |  |  | <input id="07" type="radio" v-model="currentLev" name="r" value="7"> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <button class="card-button">楼层 {{currentLev}}F</button> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <div class="hoverCard"> | 
|---|
|  |  |  | <div class="card-details"> | 
|---|
|  |  |  | <p class="text-title" style="text-align: center;">库区 {{areaName}}</p> | 
|---|
|  |  |  | <div class="text-body" style="display: flex;"> | 
|---|
|  |  |  | <div class="floorSelect"> | 
|---|
|  |  |  | <label for="area01">A区</label> | 
|---|
|  |  |  | <input id="area01" type="radio" name="r" v-model="area" value="1" checked=""> | 
|---|
|  |  |  | <label for="area03">B区</label> | 
|---|
|  |  |  | <input id="area03" type="radio" v-model="area" name="r" value="3"> | 
|---|
|  |  |  | <label for="area04">C区</label> | 
|---|
|  |  |  | <input id="area04" type="radio" v-model="area" name="r" value="4"> | 
|---|
|  |  |  | <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 class="hoverCard">--> | 
|---|
|  |  |  | <!--                <div class="card-details">--> | 
|---|
|  |  |  | <!--                    <p class="text-title" style="text-align: center;">库区 {{areaName}}</p>--> | 
|---|
|  |  |  | <!--                    <div class="text-body" style="display: flex;">--> | 
|---|
|  |  |  | <!--                        <div class="floorSelect">--> | 
|---|
|  |  |  | <!--                            <label for="area01">A区</label>--> | 
|---|
|  |  |  | <!--                            <input id="area01" type="radio" name="r" v-model="area" value="1" checked="">--> | 
|---|
|  |  |  | <!--                            <label for="area03">B区</label>--> | 
|---|
|  |  |  | <!--                            <input id="area03" type="radio" v-model="area" name="r" value="3">--> | 
|---|
|  |  |  | <!--                            <label for="area04">C区</label>--> | 
|---|
|  |  |  | <!--                            <input id="area04" type="radio" v-model="area" name="r" value="4">--> | 
|---|
|  |  |  | <!--                            <label for="area05">D区</label>--> | 
|---|
|  |  |  | <!--                            <input id="area05" type="radio" v-model="area" name="r" value="5">--> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <button class="card-button">库区 {{areaName}}</button> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <!--                        </div>--> | 
|---|
|  |  |  | <!--                    </div>--> | 
|---|
|  |  |  | <!--                </div>--> | 
|---|
|  |  |  | <!--                <button class="card-button">库区 {{areaName}}</button>--> | 
|---|
|  |  |  | <!--            </div>--> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <div class="hoverCard"> | 
|---|
|  |  |  | <div class="card-details"> | 
|---|
|  |  |  | <div class="text-body" style="display: flex;justify-content: space-around;flex-wrap: wrap;"> | 
|---|
|  |  |  | <div style="flex: 1;margin-top: 10px;"> | 
|---|
|  |  |  | <div style="font-size: 10px;">空库位</div><div class="pointBox pointBoxBlue">O</div> | 
|---|
|  |  |  | <div style="font-size: 10px;">空库位</div><div class="pointBox2 pointBoxBlue">O</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div style="flex: 1;margin-top: 10px;"> | 
|---|
|  |  |  | <div style="font-size: 10px;">在库</div><div class="pointBox pointBoxRed">F</div> | 
|---|
|  |  |  | <div style="font-size: 10px;">在库</div><div class="pointBox2 pointBoxRed">F</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div style="flex: 1;margin-top: 10px;"> | 
|---|
|  |  |  | <div style="font-size: 10px;">空板</div><div class="pointBox pointBoxEmpty">D</div> | 
|---|
|  |  |  | <div style="font-size: 10px;">空板</div><div class="pointBox2 pointBoxEmpty">D</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div style="flex: 1;margin-top: 10px;"> | 
|---|
|  |  |  | <div style="font-size: 10px;">出库中</div><div class="pointBox pointBoxOut">P</div> | 
|---|
|  |  |  | <div style="font-size: 10px;">出库中</div><div class="pointBox2 pointBoxOut">P</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div style="flex: 1;margin-top: 10px;"> | 
|---|
|  |  |  | <div style="font-size: 10px;">出库预约</div><div class="pointBox pointBoxOutYy">R</div> | 
|---|
|  |  |  | <div style="font-size: 10px;">出库预约</div><div class="pointBox2 pointBoxOutYy">R</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div style="flex: 1;margin-top: 10px;"> | 
|---|
|  |  |  | <div style="font-size: 10px;">入库预约</div><div class="pointBox pointBoxInYy">S</div> | 
|---|
|  |  |  | <div style="font-size: 10px;">入库预约</div><div class="pointBox2 pointBoxInYy">S</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div style="flex: 1;margin-top: 10px;"> | 
|---|
|  |  |  | <div style="font-size: 10px;">搜索结果</div><div class="pointBox pointBoxSearch"></div> | 
|---|
|  |  |  | <div style="font-size: 10px;">搜索结果</div><div class="pointBox2 pointBoxSearch"></div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div style="flex: 1;margin-top: 10px;"> | 
|---|
|  |  |  | <div style="font-size: 10px;">选择结果</div><div class="pointBox pointBoxSelected"></div> | 
|---|
|  |  |  | <div style="font-size: 10px;">选择结果</div><div class="pointBox2 pointBoxSelected"></div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div style="flex: 1;margin-top: 10px;"> | 
|---|
|  |  |  | <div style="font-size: 10px;text-align: center">其他</div><div class="pointBox pointBoxDefault"></div> | 
|---|
|  |  |  | <div style="font-size: 10px;text-align: center">其他</div><div class="pointBox2 pointBoxDefault"></div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div style="flex: 1;margin-top: 10px;"> | 
|---|
|  |  |  | <div style="font-size: 10px;text-align: center">冻结</div><div class="pointBox2 pointBoxEnd"></div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | 
|---|
|  |  |  | if (this.area == 1){ | 
|---|
|  |  |  | if (rowData[i].locNo != undefined) { | 
|---|
|  |  |  | let locNo = rowData[i].locNo; | 
|---|
|  |  |  | return "#" + parseInt(locNo.substr(0, 2)); | 
|---|
|  |  |  | return "#" + parseInt(locNo.substr(2, 2)); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }else if (this.area == 6){ | 
|---|
|  |  |  | if (rowData[i].locNo != undefined) { | 
|---|