|  |  |  | 
|---|
|  |  |  | <script type="text/javascript" src="../../static/js/common.js"></script> | 
|---|
|  |  |  | <script type="text/javascript" src="../../static/js/vue.min.js"></script> | 
|---|
|  |  |  | <script type="text/javascript" src="../../static/js/element.js"></script> | 
|---|
|  |  |  | <script src="../../static/js/pixi.min.js"></script> | 
|---|
|  |  |  | <script src="../../static/js/pixi-legacy.min.js"></script> | 
|---|
|  |  |  | <style> | 
|---|
|  |  |  | *{ | 
|---|
|  |  |  | margin: 0; | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <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;justify-content:space-between;flex-wrap: wrap;"> | 
|---|
|  |  |  | <div v-for="(lev,idx) in floorList"> | 
|---|
|  |  |  | <el-button :style="{background:currentLev === lev ? '#7DCDFF':''}" @click="currentLev = lev">{{lev}}F</el-button> | 
|---|
|  |  |  | 
|---|
|  |  |  | </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;">{{currentFloor}}楼</p> | 
|---|
|  |  |  | <div class="text-body" style="display: flex;justify-content:space-between;flex-wrap: wrap;"> | 
|---|
|  |  |  | <div v-for="(floor,idx) in currentFloorList"> | 
|---|
|  |  |  | <el-button :style="{background:currentFloor === floor ? '#7DCDFF':''}" @click="currentFloor = floor">{{floor}}F</el-button> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <button class="card-button">楼层 {{currentFloor}}F</button> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | 
|---|
|  |  |  | let height = 25; | 
|---|
|  |  |  | let pixiApp; | 
|---|
|  |  |  | let pixiStageMap = new Map(); | 
|---|
|  |  |  | let objectsContainer; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | var $layui = layui.config({ | 
|---|
|  |  |  | base: baseUrl + "/static/layui/lay/modules/" | 
|---|
|  |  |  | 
|---|
|  |  |  | endPosition: "0802501", | 
|---|
|  |  |  | pointContainerWidth: 0, | 
|---|
|  |  |  | currentLev: 1, | 
|---|
|  |  |  | currentFloor: 1, | 
|---|
|  |  |  | crnList: null, | 
|---|
|  |  |  | crnBox: false, | 
|---|
|  |  |  | crnBoxTop: "0px", | 
|---|
|  |  |  | 
|---|
|  |  |  | drawerLocNoData: null, | 
|---|
|  |  |  | drawerLocDetls: [], | 
|---|
|  |  |  | mapFps: 0, | 
|---|
|  |  |  | floorList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], //当前项目楼层 | 
|---|
|  |  |  | floorList: [1, 2], //当前项目楼层 | 
|---|
|  |  |  | currentFloorList: [1, 2, 3], //当前项目楼层 | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | created(){ | 
|---|
|  |  |  | this.init() | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | currentFloor: { | 
|---|
|  |  |  | deep: true, | 
|---|
|  |  |  | handler(val) { | 
|---|
|  |  |  | if (val == 1) { | 
|---|
|  |  |  | this.floorList = [1,2] | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | this.floorList = [1] | 
|---|
|  |  |  | } | 
|---|
|  |  |  | this.init() | 
|---|
|  |  |  | if (this.searchMatnr != "" | 
|---|
|  |  |  | || this.searchOrderNo != "" | 
|---|
|  |  |  | || this.searchSpecs != "" | 
|---|
|  |  |  | || this.searchMaktx != "" | 
|---|
|  |  |  | || this.searchLocNo != "") { | 
|---|
|  |  |  | this.searchLoc() | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | drawerLocNo: { | 
|---|
|  |  |  | deep: true, | 
|---|
|  |  |  | handler(val) { | 
|---|
|  |  |  | 
|---|
|  |  |  | init(){ | 
|---|
|  |  |  | let that = this | 
|---|
|  |  |  | $.ajax({ | 
|---|
|  |  |  | url: baseUrl + "/map/getData/" + this.currentLev + "/auth", | 
|---|
|  |  |  | url: baseUrl + "/agv/map/getData/" + this.currentFloor + "/" +this.currentLev + "/auth", | 
|---|
|  |  |  | headers: {'token': localStorage.getItem('token')}, | 
|---|
|  |  |  | method: "get", | 
|---|
|  |  |  | success: (data) => { | 
|---|
|  |  |  | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | //Add the canvas that Pixi automatically created for you to the HTML document | 
|---|
|  |  |  | $("#pixiView").append(pixiApp.view) | 
|---|
|  |  |  |  | 
|---|
|  |  |  | // 创建一个容器来管理大批量的显示对象 | 
|---|
|  |  |  | objectsContainer = new PIXI.Container(); | 
|---|
|  |  |  | pixiApp.stage.addChild(objectsContainer); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | //*******************拖动画布******************* | 
|---|
|  |  |  | let stageOriginalPos; | 
|---|
|  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | createMapData() { | 
|---|
|  |  |  | let that = this | 
|---|
|  |  |  | pixiApp.stage.removeChildren(); | 
|---|
|  |  |  | objectsContainer.removeChildren(); | 
|---|
|  |  |  | this.map.forEach((item,index) => { | 
|---|
|  |  |  | for (let idx = 0; idx < item.length; idx++) { | 
|---|
|  |  |  | let val = item[idx] | 
|---|
|  |  |  | 
|---|
|  |  |  | rectangle.locY = idx; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | pixiStageMap.set(this.map[index][idx].locNo, rectangle); | 
|---|
|  |  |  | pixiApp.stage.addChild(rectangle); | 
|---|
|  |  |  | objectsContainer.addChild(rectangle); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  |  | 
|---|
|  |  |  | //视角居中 | 
|---|
|  |  |  | let containerWidth = (pixiApp.view.width - objectsContainer.width) / 2; | 
|---|
|  |  |  | let containerHeight = (pixiApp.view.height - objectsContainer.height) / 2; | 
|---|
|  |  |  | pixiApp.stage.position.set(containerWidth, containerHeight); | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | getRealRowByX(x) { | 
|---|
|  |  |  | //获取真实库位行号,通过坐标x | 
|---|
|  |  |  | 
|---|
|  |  |  | this.drawerLocNoData =  data | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | openLocDetail(locNo) { | 
|---|
|  |  |  | url = '/agv/locDetl/list/auth'; | 
|---|
|  |  |  | $layui.layer.open({ | 
|---|
|  |  |  | type: 2, | 
|---|
|  |  |  | title: '库位物料', | 
|---|
|  |  |  | 
|---|
|  |  |  | // } | 
|---|
|  |  |  | let that = this; | 
|---|
|  |  |  | $.ajax({ | 
|---|
|  |  |  | url: baseUrl + "/map/searchData/auth", | 
|---|
|  |  |  | url: baseUrl + "/agv/map/searchData/auth", | 
|---|
|  |  |  | headers: {'token': localStorage.getItem('token')}, | 
|---|
|  |  |  | dataType: 'json', | 
|---|
|  |  |  | data: { | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | function getContainer(value, x, y, locSts) { | 
|---|
|  |  |  | let rectangle = new PIXI.Graphics(); | 
|---|
|  |  |  | if (value === 0) { | 
|---|
|  |  |  | if (value == 0) { | 
|---|
|  |  |  | if (locSts === "F") { | 
|---|
|  |  |  | rectangle.beginFill(0xff0000); | 
|---|
|  |  |  | rectangle.originColor = 0xff0000; | 
|---|