| | |
| | | |
| | | .hoverCard .card-button { |
| | | transform: translate(-50%, 125%); |
| | | width: 60%; |
| | | width: 50%; |
| | | border-radius: 1rem; |
| | | border: none; |
| | | background-color: #008bf8; |
| | |
| | | </style> |
| | | </head> |
| | | <body> |
| | | <div id="app" style="display: flex;justify-content: space-around;margin-top: 50px;flex-wrap: wrap;" @click="bgClick()"> |
| | | <div style="flex: 12;" :style="{scale:showScale/100.0,marginTop:(showScale-100)*5 + 'px'}"> |
| | | <div id="app" style="display: flex;justify-content: space-between;margin-top: 50px;flex-wrap: nowrap; scale: 0.9" @click="bgClick()"> |
| | | <div style="flex: 4;" :style="{scale:showScale/100.0,marginTop:(showScale-100)*5 + 'px'}"> |
| | | <div> |
| | | <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> |
| | | </div> |
| | | </div> |
| | | <div style="padding: 20px;flex: 5;margin-top: -70px;"> |
| | | <div style="padding: 20px;flex: 1;margin-top: -70px; "> |
| | | <el-slider v-model="showScale" :marks="showScaleMarks"></el-slider> |
| | | <div style="display: flex;justify-content: space-between;flex-wrap: wrap;"> |
| | | <div class="hoverCard" style="width: 100%;"> |
| | |
| | | <button class="card-button">功能区</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> |
| | | <div style="flex: 1;margin-top: 10px;"> |
| | | <div style="font-size: 10px;">在库</div><div class="pointBox pointBoxRed">F</div> |
| | | </div> |
| | | <div style="flex: 1;margin-top: 10px;"> |
| | | <div style="font-size: 10px;">空板</div><div class="pointBox pointBoxEmpty">D</div> |
| | | </div> |
| | | <div style="flex: 1;margin-top: 10px;"> |
| | | <div style="font-size: 10px;">出库中</div><div class="pointBox pointBoxOut">P</div> |
| | | </div> |
| | | <div style="flex: 1;margin-top: 10px;"> |
| | | <div style="font-size: 10px;">出库预约</div><div class="pointBox pointBoxOutYy">R</div> |
| | | </div> |
| | | <div style="flex: 1;margin-top: 10px;"> |
| | | <div style="font-size: 10px;">入库预约</div><div class="pointBox pointBoxInYy">S</div> |
| | | </div> |
| | | <div style="flex: 1;margin-top: 10px;"> |
| | | <div style="font-size: 10px;">搜索结果</div><div class="pointBox pointBoxSearch"></div> |
| | | </div> |
| | | <div style="flex: 1;margin-top: 10px;"> |
| | | <div style="font-size: 10px;">选择结果</div><div class="pointBox 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> |
| | | </div> |
| | | </div> |
| | | <button class="card-button">库位状态</button> |
| | | </div> |
| | | |
| | | |
| | | <div class="hoverCard"> |
| | | <div class="card-details"> |
| | | <p class="text-title" style="text-align: center;">楼层 {{currentLev}}F</p> |
| | | <p class="text-title" style="text-align: center;">库位层 {{currentLev}}</p> |
| | | <div class="text-body" style="display: flex;"> |
| | | <div class="floorSelect"> |
| | | <label for="01">1F</label> |
| | |
| | | </div> |
| | | </div> |
| | | <button class="card-button">库区 {{area}}</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> |
| | | <div style="flex: 1;margin-top: 10px;"> |
| | | <div style="font-size: 10px;">在库</div><div class="pointBox pointBoxRed">F</div> |
| | | </div> |
| | | <div style="flex: 1;margin-top: 10px;"> |
| | | <div style="font-size: 10px;">空板</div><div class="pointBox pointBoxEmpty">D</div> |
| | | </div> |
| | | <div style="flex: 1;margin-top: 10px;"> |
| | | <div style="font-size: 10px;">出库中</div><div class="pointBox pointBoxOut">P</div> |
| | | </div> |
| | | <div style="flex: 1;margin-top: 10px;"> |
| | | <div style="font-size: 10px;">出库预约</div><div class="pointBox pointBoxOutYy">R</div> |
| | | </div> |
| | | <div style="flex: 1;margin-top: 10px;"> |
| | | <div style="font-size: 10px;">入库预约</div><div class="pointBox pointBoxInYy">S</div> |
| | | </div> |
| | | <div style="flex: 1;margin-top: 10px;"> |
| | | <div style="font-size: 10px;">搜索结果</div><div class="pointBox pointBoxSearch"></div> |
| | | </div> |
| | | <div style="flex: 1;margin-top: 10px;"> |
| | | <div style="font-size: 10px;">选择结果</div><div class="pointBox 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> |
| | | </div> |
| | | </div> |
| | | <button class="card-button">库位状态</button> |
| | | </div> |
| | | |
| | | </div> |
| | |
| | | rightBoxLeft: "0px", |
| | | pointContainerWidth: 0, |
| | | currentLev: 1, |
| | | area:5, |
| | | area:1, |
| | | crnList: null, |
| | | crnBox: false, |
| | | crnBoxTop: "0px", |
| | |
| | | searchLocNo: "", |
| | | outSite: null, |
| | | outSites: null, |
| | | showScale: 75, //控制地图显示大小比例 |
| | | showScale: 85, //控制地图显示大小比例 |
| | | showScaleMarks: {//比例滑动条显示标记 |
| | | 0: "0%", |
| | | 50: { |
| | |
| | | 100: "100%", |
| | | }, |
| | | locStsList: [],//库位状态列表 |
| | | y: 1 |
| | | }, |
| | | created(){ |
| | | this.init() |
| | |
| | | headers: {'token': localStorage.getItem('token')}, |
| | | method: "get", |
| | | success: (data) => { |
| | | console.log(data) |
| | | that.importDataClick(data) |
| | | } |
| | | }) |
| | |
| | | //获取真实库位行号,通过坐标x |
| | | let data = this.map |
| | | let rowData = data[x] |
| | | console.log(x) |
| | | |
| | | for (var i = 1; i < rowData.length; i++) { |
| | | console.log(rowData[i],rowData[i].locNo,rowData[i].locNo != undefined) |
| | | if (rowData[i].locNo != undefined) { |
| | | let locNo = rowData[i].locNo; |
| | | return "#" + parseInt(locNo.substr(0, 2)); |
| | | |
| | | if (this.area == 1){ |
| | | if (rowData[i].locNo != undefined) { |
| | | let locNo = rowData[i].locNo; |
| | | return "#" + parseInt(locNo.substr(0, 2)); |
| | | } |
| | | }else { |
| | | if (rowData[i].locNo != undefined) { |
| | | let locNo = rowData[i].locNo; |
| | | return "#" + parseInt(locNo.substr(7, 2));; |
| | | } |
| | | } |
| | | |
| | | |
| | | |
| | | } |
| | | |
| | | return ""; |