| | |
| | | <div style="width: 20%;height: 60vh;margin-right: 20px;margin-top: 30px;"> |
| | | <el-tabs type="border-card" v-model="activateCard" @tab-click="handleCardClick"> |
| | | <el-tab-pane label="堆垛机" name="crn"> |
| | | <watch-crn-card :param="crnParam"></watch-crn-card> |
| | | <watch-crn-card ref="watchCrnCard" :param="crnParam"></watch-crn-card> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="输送站" name="devp"> |
| | | <devp-card :param="devpParam"></devp-card> |
| | | <devp-card ref="devpCard" :param="devpParam"></devp-card> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="RGV" name="rgv"> |
| | | <watch-rgv-card :param="rgvParam"></watch-rgv-card> |
| | | <watch-rgv-card ref="watchRgvCard" :param="rgvParam"></watch-rgv-card> |
| | | </el-tab-pane> |
| | | <!-- <el-tab-pane label="地图配置" name="mapSetting"> |
| | | <map-setting-card :param="mapSettingParam"></map-setting-card> |
| | |
| | | <script src="../../components/WatchRgvCard.js"></script> |
| | | <script src="../../components/MapCanvas.js"></script> |
| | | <script> |
| | | let ws; |
| | | var app = new Vue({ |
| | | el: '#app', |
| | | data: { |
| | |
| | | |
| | | }, |
| | | methods: { |
| | | sendWs(data) { |
| | | if (ws && ws.readyState === WebSocket.OPEN) { |
| | | ws.send(data); |
| | | } |
| | | }, |
| | | webSocketOnOpen() { |
| | | console.log("WebSocket连接成功"); |
| | | }, |
| | | webSocketOnError() { |
| | | console.log("WebSocket连接发生错误"); |
| | | }, |
| | | webSocketClose() { |
| | | console.log("WebSocket连接关闭"); |
| | | }, |
| | | webSocketOnMessage(e) { |
| | | const result = JSON.parse(e.data); |
| | | if (result.url == "/crn/table/crn/state") { |
| | | if(this.$refs.watchCrnCard) { |
| | | this.$refs.watchCrnCard.setCrnList(JSON.parse(result.data)); |
| | | } |
| | | } else if (result.url == "/console/latest/data/station") { |
| | | if(this.$refs.devpCard) { |
| | | this.$refs.devpCard.setStationList(JSON.parse(result.data)); |
| | | } |
| | | } else if (result.url == "/rgv/table/rgv/state") { |
| | | if(this.$refs.watchRgvCard) { |
| | | this.$refs.watchRgvCard.setRgvList(JSON.parse(result.data)); |
| | | } |
| | | } else if (result.url == "/basMap/lev/" + this.currentLev + "/auth") { |
| | | // 地图数据 |
| | | let res = JSON.parse(result.data); |
| | | if (res.code === 200) { |
| | | this.map = res.data; |
| | | } |
| | | } |
| | | }, |
| | | getMap() { |
| | | this.sendWs(JSON.stringify({ |
| | | "url": "/basMap/lev/" + this.currentLev + "/auth", |
| | | "data": {} |
| | | })) |
| | | }, |
| | | init() { |
| | | this.getMap() |
| | | ws = new WebSocket("ws://" + window.location.host + baseUrl + "/console/websocket"); |
| | | ws.onopen = this.webSocketOnOpen; |
| | | ws.onerror = this.webSocketOnError; |
| | | ws.onmessage = this.webSocketOnMessage; |
| | | ws.onclose = this.webSocketClose; |
| | | |
| | | this.getSystemRunningStatus() //获取系统运行状态 |
| | | this.getLevList() //获取地图层级列表 |
| | | this.getLocMastData() //获取库位数据 |
| | | }, |
| | | |
| | | getLevList() { |
| | | let that = this; |
| | | $.ajax({ |
| | |
| | | success: (res) => { |
| | | let data = res.data; |
| | | that.levList = data; |
| | | } |
| | | }) |
| | | }, |
| | | //获取地图数据 |
| | | getMap() { |
| | | let that = this |
| | | let rowPx = 35; |
| | | let colPx = 35; |
| | | |
| | | $.ajax({ |
| | | url: baseUrl + "/basMap/lev/" + this.currentLev + "/auth", |
| | | headers: { |
| | | 'token': localStorage.getItem('token') |
| | | }, |
| | | method: "get", |
| | | success: (res) => { |
| | | let data = res.data; |
| | | let mapData = JSON.parse(data) |
| | | mapData.forEach((row) => { |
| | | let shelfIdx = 1; |
| | | row.forEach((col) => { |
| | | if (col.type == 'shelf') { |
| | | col.shelfIdx = shelfIdx; |
| | | shelfIdx++; |
| | | } |
| | | |
| | | col.rowPx = (col.rowSpan * rowPx) + "px"; |
| | | col.colPx = (col.colSpan * colPx) + "px"; |
| | | |
| | | col.width = (col.cellWidth / 30) + "px"; |
| | | }) |
| | | }) |
| | | that.map = mapData; |
| | | } |
| | | }) |
| | | }, |
| | |
| | | openSite(id) { |
| | | this.devpParam.stationId = id; |
| | | this.activateCard = 'devp'; |
| | | }, |
| | | getSiteInfo() { |
| | | //获取输送站点数据 |
| | | $.ajax({ |
| | | url: baseUrl + "/console/latest/data/station", |
| | | headers: {'token': localStorage.getItem('token')}, |
| | | method: 'POST', |
| | | success: function (res) { |
| | | if (res.code === 200) { |
| | | var sites = res.data; |
| | | for (var i = 0; i < sites.length; i++){ |
| | | var siteEl = $("#site-"+sites[i].stationId); |
| | | siteEl.attr("class", "site " + sites[i].stationStatus); |
| | | if (sites[i].taskNo != null && sites[i].taskNo>0) { |
| | | siteEl.html(sites[i].stationId + "[" + sites[i].taskNo + "]"); |
| | | } else { |
| | | siteEl.html(sites[i].stationId); |
| | | } |
| | | } |
| | | } else if (res.code === 403) { |
| | | parent.location.href = baseUrl + "/login"; |
| | | } else { |
| | | console.log(res.msg); |
| | | } |
| | | } |
| | | }); |
| | | }, |
| | | getCrnInfo() { |
| | | let that = this |
| | | //获取堆垛机数据 |
| | | $.ajax({ |
| | | url: baseUrl + "/console/latest/data/crn", |
| | | headers: {'token': localStorage.getItem('token')}, |
| | | method: 'POST', |
| | | success: function (res) { |
| | | if (res.code === 200) { |
| | | var crns = res.data; |
| | | |
| | | let crnList = [] |
| | | for (var i = 0; i < crns.length; i++) { |
| | | var crnEl = $("#crn-" + crns[i].crnId); |
| | | crnEl.attr("class", "crn-item " + crns[i].crnStatus); |
| | | |
| | | if (crns[i].taskNo != null && crns[i].taskNo > 0) { |
| | | crnEl.html(crns[i].crnId + "[" + crns[i].taskNo + "]"); |
| | | } else { |
| | | crnEl.html(crns[i].crnId); |
| | | } |
| | | |
| | | let bay = parseInt(crns[i].bay, 10); |
| | | if (isNaN(bay) || bay < 1 || bay === -2) { |
| | | bay = 1; |
| | | } |
| | | |
| | | // 根据列值定位到当前行的目标单元格,避免随机偏移导致的误差 |
| | | let targetCell = that.getCrnTargetCell(crnEl, bay); |
| | | if (!targetCell || targetCell.length === 0) { |
| | | continue; |
| | | } |
| | | if (targetCell.offset() == undefined) { |
| | | continue; |
| | | } |
| | | if (crnEl.offsetParent().offset() == undefined) { |
| | | continue; |
| | | } |
| | | |
| | | let parentLeft = crnEl.offsetParent().offset().left; |
| | | let cellLeft = targetCell.offset().left - parentLeft; |
| | | let offsetWithinCell = (targetCell.outerWidth() - crnEl.outerWidth()) / 2; |
| | | let zoomFactor = that.mapSettingParam.zoom ? (that.mapSettingParam.zoom / 100) : 1; |
| | | if (zoomFactor <= 0) { zoomFactor = 1; } |
| | | |
| | | let finalOffset = (cellLeft + offsetWithinCell) / zoomFactor; |
| | | if(finalOffset < 0) { |
| | | finalOffset = 0; |
| | | } |
| | | |
| | | crnEl.animate({left: finalOffset + 'px'}, 500); |
| | | |
| | | crnList.push({ |
| | | crnNo: crns[i].crnId, |
| | | crnStatus: crns[i].crnStatus |
| | | }) |
| | | } |
| | | } else if (res.code === 403) { |
| | | parent.location.href = baseUrl + "/login"; |
| | | } else { |
| | | console.log(res.msg); |
| | | } |
| | | } |
| | | }); |
| | | }, |
| | | getRgvInfo() { |
| | | let that = this |
| | | //获取RGV数据 |
| | | $.ajax({ |
| | | url: baseUrl + "/console/latest/data/rgv", |
| | | headers: {'token': localStorage.getItem('token')}, |
| | | method: 'POST', |
| | | success: function (res) { |
| | | if (res.code === 200) { |
| | | var rgvs = res.data; |
| | | |
| | | if (that.rgvPosition.length == 0) { |
| | | let position = [] |
| | | for (var i = 0; i < rgvs.length; i++) { |
| | | var rgvEl = $("#rgv-" + rgvs[i].rgvNo); |
| | | if(rgvEl.offset() == undefined) { |
| | | continue; |
| | | } |
| | | position.push({ |
| | | id: rgvs[i].rgvNo, |
| | | trackSiteNo: rgvs[i].trackSiteNo, |
| | | initLeft: rgvEl.offset().left |
| | | }) |
| | | } |
| | | that.rgvPosition = position |
| | | return; |
| | | } |
| | | |
| | | for (var i = 0; i < rgvs.length; i++) { |
| | | var rgvEl = $("#rgv-" + rgvs[i].rgvNo); |
| | | if (rgvs[i].rgvStatus == 'idle') { |
| | | rgvEl.attr("class", "rgv-item"); |
| | | }else if (rgvs[i].rgvStatus == 'working') { |
| | | rgvEl.attr("class", "rgv-item machine-working"); |
| | | }else if (rgvs[i].rgvStatus == 'waiting') { |
| | | rgvEl.attr("class", "rgv-item machine-working"); |
| | | }else { |
| | | rgvEl.attr("class", "rgv-item machine-un-auto"); |
| | | } |
| | | |
| | | let trackSiteNo = rgvs[i].trackSiteNo; |
| | | let trackSiteEl = $("#rgvTrackSiteNo-" + trackSiteNo); |
| | | |
| | | if(rgvEl.offsetParent().offset() == undefined) { |
| | | continue; |
| | | } |
| | | |
| | | let parentLeft = rgvEl.offsetParent().offset().left; |
| | | let targetPosition = trackSiteEl.parent().parent().offset().left - parentLeft; |
| | | let rgvPosition = rgvEl.position().left; |
| | | let zoomFactor = that.mapSettingParam.zoom ? (that.mapSettingParam.zoom / 100) : 1; |
| | | if (zoomFactor <= 0) { zoomFactor = 1; } |
| | | let finalOffset = targetPosition / zoomFactor; |
| | | rgvEl.animate({left: finalOffset + "px"}, 500); |
| | | } |
| | | } else if (res.code === 403) { |
| | | parent.location.href = baseUrl + "/login"; |
| | | } else { |
| | | console.log(res.msg); |
| | | } |
| | | } |
| | | }); |
| | | }, |
| | | systemSwitch() { |
| | | // 系统开关 |
| | |
| | | return locInfo.row1 + '-' + locInfo.bay1; |
| | | } |
| | | return ''; |
| | | } |
| | | }, |
| | | } |
| | | }) |
| | | </script> |