| | |
|---|
| | | <div class="floorBtnBox" v-for="(lev,idx) in floorList"> |
|---|
| | | <el-button :style="{background:currentLev === lev ? '#7DCDFF':''}" @click="changeFloor(lev)">{{lev}}F</el-button> |
|---|
| | | </div> |
|---|
| | | <div style="margin-top: 10px;"> |
|---|
| | | <el-button @click="resetMap()">重置地图</el-button> |
|---|
| | | </div> |
|---|
| | | </el-drawer> |
|---|
| | | |
|---|
| | | <el-drawer |
|---|
| | |
|---|
| | | <div style="margin-top: 5px;">Y：{{drawerLocNoData.y}}</div> |
|---|
| | | <div style="margin-top: 5px;">Z：{{drawerLocNoData.z}}</div> |
|---|
| | | <div style="margin-top: 5px;">库位号：{{drawerLocNoData.locNo}}</div> |
|---|
| | | <div style="margin-top: 5px;">预计路径车辆：{{drawerLocNoData.moveAdvancePath}}</div> |
|---|
| | | <div style="margin-top: 5px;">路径锁定车辆：{{drawerLocNoData.lockPathShuttleNo}}</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </el-drawer> |
|---|
| | |
|---|
| | | let pixiStageList = []; |
|---|
| | | let pixiShuttleMap = new Map(); |
|---|
| | | let pixiShuttleMoveAdvancePathMap = new Map(); |
|---|
| | | let pixiShuttleMoveAdvancePathList = []; |
|---|
| | | let pixiShuttleLockPathMap = new Map(); |
|---|
| | | let pixiStaMap = new Map(); |
|---|
| | | let lockPathInfoMap = new Map(); |
|---|
| | | let objectsContainer; |
|---|
| | | let objectsContainer2; |
|---|
| | | let objectsContainer3; |
|---|
| | |
|---|
| | | data: { |
|---|
| | | map: [], |
|---|
| | | currentLev: 1, |
|---|
| | | floorList: [1, 2, 3], //当前项目楼层 |
|---|
| | | floorList: [], //当前项目楼层 |
|---|
| | | currentLevShuttleList: [],//当前楼层四向穿梭车集合 |
|---|
| | | shuttleColorList: [],//四向穿梭车颜色集合 |
|---|
| | | drawer: false, |
|---|
| | |
|---|
| | | ws.onclose = this.webSocketClose |
|---|
| | | |
|---|
| | | this.getMap(this.currentLev) |
|---|
| | | this.initLev()//初始化楼层信息 |
|---|
| | | // this.getSystemRunningStatus() //获取系统运行状态 |
|---|
| | | |
|---|
| | | this.consoleInterval = setInterval(() => { |
|---|
| | |
|---|
| | | this.getShuttleStateInfo() //获取四向穿梭车信息 |
|---|
| | | this.getLiftStateInfo() //获取提升机信息 |
|---|
| | | this.getSiteInfo() //获取输送站点数据 |
|---|
| | | this.getMoveAdvancePath(this.currentLev) |
|---|
| | | this.getLockPath(this.currentLev) |
|---|
| | | }, 1000) |
|---|
| | | |
|---|
| | | }, |
|---|
| | |
|---|
| | | const shuttle = new PIXI.Sprite(resources.shuttle.texture); |
|---|
| | | shuttle.width = width |
|---|
| | | shuttle.height = height |
|---|
| | | shuttle.x = (item.wcsPoint.y - 0) * width;//更新坐标x |
|---|
| | | shuttle.y = (item.wcsPoint.x - 1) * height;//更新坐标y |
|---|
| | | shuttle.x = (item.point.y - 0) * width;//更新坐标x |
|---|
| | | shuttle.y = (item.point.x - 1) * height;//更新坐标y |
|---|
| | | shuttle.updateMoveStatus = true;//动画执行完成 |
|---|
| | | shuttle.interactive = true; // 必须要设置才能接收事件 |
|---|
| | | shuttle.buttonMode = true; // 让光标在hover时变为手型指针 |
|---|
| | |
|---|
| | | pixiShuttleMap.set(item.shuttleNo, shuttle); |
|---|
| | | }) |
|---|
| | | |
|---|
| | | if (item.moveAdvancePath != null && item.moveAdvancePath.length > 0) {//存在预计路径，进行渲染 |
|---|
| | | this.addMoveAdvancePath(item.moveAdvancePath, item.shuttleNo);//添加预计路径 |
|---|
| | | } |
|---|
| | | |
|---|
| | | }) |
|---|
| | | }else { |
|---|
| | | //小车不存在变动，渲染小车位置 |
|---|
| | | currentLevShuttle.forEach((item,index) => { |
|---|
| | | this.updateShuttleXY(item) |
|---|
| | | }) |
|---|
| | | |
|---|
| | | const resultPath = this.findShuttlePathDiffList(JSON.parse(JSON.stringify(this.currentLevShuttleList)), JSON.parse(JSON.stringify(currentLevShuttle))); |
|---|
| | | if (!resultPath) { |
|---|
| | | //预计路径存在变动，渲染路径 |
|---|
| | | currentLevShuttle.forEach((item,index) => { |
|---|
| | | //删除预计路径 |
|---|
| | | this.removeMoveAdvancePath(item.shuttleNo); |
|---|
| | | if (item.moveAdvancePath != null && item.moveAdvancePath.length > 0) {//存在预计路径，进行渲染 |
|---|
| | | this.addMoveAdvancePath(item.moveAdvancePath, item.shuttleNo);//添加预计路径 |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | that.currentLevShuttleList = currentLevShuttle; |
|---|
| | | } |
|---|
| | |
|---|
| | | //清空预计路径 |
|---|
| | | objectsContainer2.removeChildren(); |
|---|
| | | pixiShuttleMoveAdvancePathMap = new Map(); |
|---|
| | | pixiShuttleMoveAdvancePathList = [] |
|---|
| | | }, |
|---|
| | | createMap(){ |
|---|
| | | //Create a Pixi Application |
|---|
| | |
|---|
| | | |
|---|
| | | this.map = map; |
|---|
| | | }, |
|---|
| | | rightEvent(x, y, e) { |
|---|
| | | this.drawerLocNo = true |
|---|
| | | let locNo = this.getLocNoByXYZ(x, y, this.currentLev); |
|---|
| | | this.drawerLocNoData = {x:x, y: y, z: this.currentLev, locNo: locNo}; |
|---|
| | | }, |
|---|
| | | rightEvent(x, y, e) { |
|---|
| | | this.drawerLocNo = true |
|---|
| | | let locNo = this.getLocNoByXYZ(x, y, this.currentLev); |
|---|
| | | let tmpData = { |
|---|
| | | x: x, |
|---|
| | | y: y, |
|---|
| | | z: this.currentLev, |
|---|
| | | locNo: locNo |
|---|
| | | }; |
|---|
| | | |
|---|
| | | let moveAdvancePath = pixiShuttleMoveAdvancePathMap.get(locNo) |
|---|
| | | if (moveAdvancePath == null || moveAdvancePath == undefined) { |
|---|
| | | moveAdvancePath = ""; |
|---|
| | | }else { |
|---|
| | | moveAdvancePath = JSON.stringify(moveAdvancePath.shuttleNos); |
|---|
| | | } |
|---|
| | | tmpData.moveAdvancePath = moveAdvancePath; |
|---|
| | | |
|---|
| | | let lockPathShuttleNo = lockPathInfoMap.get(locNo) |
|---|
| | | if (lockPathShuttleNo == null || lockPathShuttleNo == undefined) { |
|---|
| | | lockPathShuttleNo = ""; |
|---|
| | | } |
|---|
| | | tmpData.lockPathShuttleNo = lockPathShuttleNo; |
|---|
| | | |
|---|
| | | this.drawerLocNoData = tmpData; |
|---|
| | | }, |
|---|
| | | findDiffList(arr1, arr2) { |
|---|
| | | let diff = [] |
|---|
| | | arr1.forEach((item,index) => { |
|---|
| | |
|---|
| | | this.setSiteInfo(JSON.parse(result.data)) |
|---|
| | | }else if (result.url == "/console/map/auth") { |
|---|
| | | this.setMap(JSON.parse(result.data)) |
|---|
| | | }else if (result.url == "/console/barcode/output/site") { |
|---|
| | | this.setCodeData(JSON.parse(result.data)) |
|---|
| | | }else if (result.url == "/console/getMoveAdvancePath/auth") { |
|---|
| | | this.setMoveAdvancePath(JSON.parse(result.data)) |
|---|
| | | }else if (result.url == "/console/getLockPath/auth") { |
|---|
| | | this.setLockPath(JSON.parse(result.data)) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | getMoveAdvancePath(lev) { |
|---|
| | | this.sendWs(JSON.stringify({ |
|---|
| | | "url": "/console/getMoveAdvancePath/auth", |
|---|
| | | "data": lev |
|---|
| | | })) |
|---|
| | | }, |
|---|
| | | setMoveAdvancePath(res) { |
|---|
| | | let data = res.data; |
|---|
| | | this.addMoveAdvancePath(data) |
|---|
| | | }, |
|---|
| | | getLockPath(lev) { |
|---|
| | | this.sendWs(JSON.stringify({ |
|---|
| | | "url": "/console/getLockPath/auth", |
|---|
| | | "data": lev |
|---|
| | | })) |
|---|
| | | }, |
|---|
| | | setLockPath(res) { |
|---|
| | | let data = res.data; |
|---|
| | | let tmpMap = new Map(); |
|---|
| | | data.forEach((item) => { |
|---|
| | | let locNo = this.getLocNoByXYZ(item.x,item.y,item.z) |
|---|
| | | tmpMap.set(locNo, item.shuttleNo); |
|---|
| | | }) |
|---|
| | | lockPathInfoMap = tmpMap; |
|---|
| | | }, |
|---|
| | | webSocketClose(e) { |
|---|
| | | console.log("close"); |
|---|
| | |
|---|
| | | if (shuttle.updateMoveStatus) {//动画执行完成才可继续执行动画 |
|---|
| | | shuttle.updateMoveStatus = false;//动画执行中 |
|---|
| | | // 计算两点之间的距离1 |
|---|
| | | const distance = Math.sqrt(Math.pow((item.wcsPoint.x * width) - shuttle.x, 2) + Math.pow((item.wcsPoint.y * height) - shuttle.y, 2)); |
|---|
| | | const distance = Math.sqrt(Math.pow((item.point.x * width) - shuttle.x, 2) + Math.pow((item.point.y * height) - shuttle.y, 2)); |
|---|
| | | gsap.killTweensOf(shuttle); // 杀死所有针对".class"的动画 |
|---|
| | | gsap.to(shuttle, { |
|---|
| | | x: (item.wcsPoint.y - 0) * width, // 目标位置 |
|---|
| | | y: (item.wcsPoint.x - 1) * height, // 目标位置 |
|---|
| | | x: (item.point.y - 0) * width, // 目标位置 |
|---|
| | | y: (item.point.x - 1) * height, // 目标位置 |
|---|
| | | duration: 0.2, // 动画持续时间（秒） |
|---|
| | | ease: "power1.inOut", // 缓动类型 |
|---|
| | | onComplete: () => { |
|---|
| | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | getLocNoByXYZ(x, y, z) { |
|---|
| | | let locNo = x + "-" + y + "-" + z; |
|---|
| | | return locNo; |
|---|
| | | let locNo = x + "-" + y + "-" + z; |
|---|
| | | return locNo; |
|---|
| | | }, |
|---|
| | | addMoveAdvancePath(moveAdvancePath, shuttleNo) {//添加预计路径 |
|---|
| | | let that = this; |
|---|
| | | addMoveAdvancePath(moveAdvancePath) {//添加预计路径 |
|---|
| | | //清空预计路径 |
|---|
| | | objectsContainer2.removeChildren(); |
|---|
| | | pixiShuttleMoveAdvancePathMap = new Map(); |
|---|
| | | moveAdvancePath.forEach((path, idx) => { |
|---|
| | | let locNo = that.getLocNoByXYZ(path.x, path.y, path.z); |
|---|
| | | if (!pixiShuttleMoveAdvancePathMap.has(locNo)) { |
|---|
| | | let locNo = this.getLocNoByXYZ(path.x, path.y, path.z); |
|---|
| | | let shuttleNos = path.shuttleNoList; |
|---|
| | | let graphics = getGraphics(0x9966ff, width, height, path.y * width, (path.x - 1) * height); |
|---|
| | | let shuttleNos = [shuttleNo]; |
|---|
| | | |
|---|
| | | // 创建文本对象 |
|---|
| | | const style = new PIXI.TextStyle({ |
|---|
| | | fontFamily: 'Arial', |
|---|
| | | fontSize: 10, |
|---|
| | | fill: '#000000', |
|---|
| | | fontFamily: 'Arial', |
|---|
| | | fontSize: 10, |
|---|
| | | fill: '#000000', |
|---|
| | | }); |
|---|
| | | const text = new PIXI.Text(JSON.stringify(shuttleNos), style); |
|---|
| | | text.anchor.set(0.5); // 设置文本锚点为中心点 |
|---|
| | |
|---|
| | | graphics.textObj = text; |
|---|
| | | objectsContainer2.addChild(graphics) |
|---|
| | | pixiShuttleMoveAdvancePathMap.set(locNo, { |
|---|
| | | path: path, |
|---|
| | | sprite: graphics, |
|---|
| | | textObj: text, |
|---|
| | | shuttleNos: shuttleNos |
|---|
| | | path: path, |
|---|
| | | sprite: graphics, |
|---|
| | | textObj: text, |
|---|
| | | shuttleNos: shuttleNos |
|---|
| | | }) |
|---|
| | | |
|---|
| | | if (pixiShuttleMoveAdvancePathList[shuttleNo] == null) { |
|---|
| | | let locNos = new Set() |
|---|
| | | locNos.add(locNo); |
|---|
| | | pixiShuttleMoveAdvancePathList[shuttleNo] = locNos; |
|---|
| | | }else { |
|---|
| | | pixiShuttleMoveAdvancePathList[shuttleNo].add(locNo); |
|---|
| | | } |
|---|
| | | }else { |
|---|
| | | let pathMap = pixiShuttleMoveAdvancePathMap.get(locNo) |
|---|
| | | let shuttleNos = pathMap.shuttleNos; |
|---|
| | | shuttleNos.push(shuttleNo); |
|---|
| | | pathMap.textObj.text = JSON.stringify(shuttleNos); |
|---|
| | | pixiShuttleMoveAdvancePathMap.set(locNo, pathMap); |
|---|
| | | if (pixiShuttleMoveAdvancePathList[shuttleNo] == null) { |
|---|
| | | let locNos = new Set() |
|---|
| | | locNos.add(locNo); |
|---|
| | | pixiShuttleMoveAdvancePathList[shuttleNo] = locNos; |
|---|
| | | }else { |
|---|
| | | pixiShuttleMoveAdvancePathList[shuttleNo].add(locNo); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | removeMoveAdvancePath(shuttleNo) {//删除预计路径 |
|---|
| | | let locNos = pixiShuttleMoveAdvancePathList[shuttleNo]; |
|---|
| | | if (locNos != null) { |
|---|
| | | locNos.forEach((locNo,index) => { |
|---|
| | | let pathMap = pixiShuttleMoveAdvancePathMap.get(locNo); |
|---|
| | | if (pathMap != null) { |
|---|
| | | let shuttleNos = pathMap.shuttleNos; |
|---|
| | | let shuttleNosNew = []; |
|---|
| | | shuttleNos.forEach((shuttle, idx) => { |
|---|
| | | if (shuttle != shuttleNo) { |
|---|
| | | shuttleNosNew.push(shuttle); |
|---|
| | | initLev(){ |
|---|
| | | let that = this |
|---|
| | | $.ajax({ |
|---|
| | | url: baseUrl + "/console/map/lev/list", |
|---|
| | | headers: { |
|---|
| | | 'token': localStorage.getItem('token') |
|---|
| | | }, |
|---|
| | | data: {}, |
|---|
| | | method: 'get', |
|---|
| | | success: function(res) { |
|---|
| | | if (res.code === 200) { |
|---|
| | | that.floorList = res.data; |
|---|
| | | } else if (res.code === 403) { |
|---|
| | | parent.location.href = baseUrl + "/login"; |
|---|
| | | } else { |
|---|
| | | that.$message({ |
|---|
| | | message: res.msg, |
|---|
| | | type: 'error' |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | |
|---|
| | | if (shuttleNosNew.length === 0) { |
|---|
| | | //预计路径没有小车，直接删除路径 |
|---|
| | | objectsContainer2.removeChild(pathMap.sprite); |
|---|
| | | pixiShuttleMoveAdvancePathMap.delete(locNo) |
|---|
| | | }else { |
|---|
| | | //预计路径存在其他小车，更新文字信息 |
|---|
| | | pathMap.textObj.text = JSON.stringify(shuttleNosNew); |
|---|
| | | pathMap.shuttleNos = shuttleNosNew; |
|---|
| | | pixiShuttleMoveAdvancePathMap.set(locNo, pathMap); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | resetMap() { |
|---|
| | | //重置地图 |
|---|
| | | let that = this |
|---|
| | | $.ajax({ |
|---|
| | | url:baseUrl+"/console/map/resetMap/" + this.currentLev, |
|---|
| | | headers:{ |
|---|
| | | 'token': localStorage.getItem('token') |
|---|
| | | }, |
|---|
| | | data:{}, |
|---|
| | | method:'get', |
|---|
| | | success:function (res) { |
|---|
| | | that.$message({ |
|---|
| | | message: that.currentLev + '层地图重置完成', |
|---|
| | | type: 'success' |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }) |
|---|
