<template>
<canvas id="myCanvas" style="width: calc(100vw - 200px);height: calc(100vh - 60px);" ref="myCanvas" @mousewheel='mousewheel' @mousedown="dragCanvas" @mousemove="mouseMove"></canvas>
</template>
<script>
import request from '@/utils/request'
import {getMinX, getMinY, getMaxX, getMaxY} from '@/assets/js/MapUtils';
import {drawPoints, drawCurves} from '@/assets/js/Bezier';
import { ElNotification } from 'element-plus'
import { h } from 'vue';
var websocket;
import { useMainStore } from '@/utils/store';
export default {
data(){
return {
mapData: {},
mapParam: {},
BezierParam: {},
image_1: {},
}
},
components: {
},
created(){
},
methods:{
sharedData() {
const mainStore = useMainStore();
return mainStore.getSharedData; // 访问共享数据
},
showMap(){
var AGVWIDTH = 0.6;
var AGVLENGTH = 1.7;
var infos = this.mapData.infos;
let myCanvas = this.$refs.myCanvas;
var ctx = myCanvas.getContext('2d');
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
// 设置canvas的真实宽高
myCanvas.width = myCanvas.offsetWidth;
myCanvas.height = myCanvas.offsetHeight;
// this.image_1.width == myCanvas.offsetWidth;
// this.image_1.height == myCanvas.offsetHeight;
ctx.fillStyle = '#F1F3F4'
ctx.fillRect(0, 0, myCanvas.width, myCanvas.height);
/* For empty space */
var Width = (window.innerWidth) - 200;
var Height = (window.innerHeight) - 60;
var xOffset = ((this.mapParam.minX + this.mapParam.maxX) / 2.0) * this.mapParam.scale*this.mapParam.userScale - Width / 2.0 - this.mapParam.userMoveX;
var yOffset = ((this.mapParam.minY + this.mapParam.maxY) / 2.0) * this.mapParam.scale*this.mapParam.userScale - Height / 2.0 - this.mapParam.userMoveY;
var scale = this.mapParam.scale * this.mapParam.userScale;
//ctx.translate(-Width, Height);
//ctx.drawImage(this.image_1, Width-xOffset - 31.0*scale, yOffset - 19.05*scale, 60.0 * scale, 42.32 * scale);
//ctx.translate(Width, -Height);
ctx.font = "36px bold Arial";
ctx.fillStyle = "#C0C0C0";
ctx.textAlign = "left";
ctx.textBaseline = "middle";
//ctx.fillText("Dalian Auto Tech Inc.", myCanvas.width - 240, 50);
//ctx.fillText("Total AGVs : " + infos.totalAgv, 50, 60);
//ctx.fillText("Total Orders : " + infos.totalOrder, 50, 90);
if((JSON.parse(JSON.stringify(this.sharedData()))).key == "zh-cn"){
ctx.fillText("MBEAM ZF 后车桥系列", 50, 60);
}else if((JSON.parse(JSON.stringify(this.sharedData()))).key == "en"){
ctx.fillText("MBEAM ZF Rear Axle line", 50, 60);
}else if((JSON.parse(JSON.stringify(this.sharedData()))).key == "esp"){
ctx.fillText("MBEAM Línea de eje trasero ZF", 50, 60);
}else{
ctx.fillText("MBEAM ZF Rear Axle line", 50, 60);
}
// ctx.fillText("MBEAM ZF Rear Axle line", 50, 60);
ctx.font = "18px bold Arial";
ctx.fillText("Dalian Auto Tech Inc.", myCanvas.width - 240, myCanvas.height - 50);
drawCurves(this.mapParam.element, this.mapParam.objCurves, this.mapParam.objPnts, Height, "Black", 1, scale, xOffset, yOffset, this.mapData.regs);
drawPoints(this.mapParam.element, this.mapParam.objPnts, Height, "#008B00", scale, xOffset, yOffset);
if (this.mapParam.AgvInfoIn == true) {
var jsonObj = this.mapData.agvs;
var fontSize = scale*1.0;
this.mapParam.flash = false;
for(let i = 0; i < jsonObj.length; i++){
if(jsonObj[i].status.status != -1){
// console.log(jsonObj[i].status)
var pntX = jsonObj[i].status.loc_x * scale - xOffset;
var pntY = jsonObj[i].status.loc_y * scale - yOffset;
var EventLevel = jsonObj[i].status.eventLevel;
var EventId = jsonObj[i].status.eventId;
ctx.translate(pntX, Height - pntY);
ctx.rotate(-jsonObj[i].status.loc_heading);
ctx.drawImage(this.mapParam.image, -AGVLENGTH * scale / 2.0, -AGVWIDTH * scale / 2.0, AGVLENGTH * scale, AGVWIDTH * scale);
ctx.rotate(jsonObj[i].status.loc_heading);
ctx.translate(-pntX, -Height + pntY);
/* Point index */
var AgvIndex = jsonObj[i].index;
//context.font = fontSize + "px bold Arial";
if(EventLevel == 2){
ctx.font = fontSize + "px bold Arial";
ctx.fillStyle = "Blue";
}
else if(EventLevel == 1){
if(EventId == 11){
if(this.mapParam.flash){
ctx.font = fontSize*2.0 + "px bold Arial";
ctx.fillStyle = "Orange";
}
else{
ctx.font = fontSize + "px bold Arial";
ctx.fillStyle = "Orange";
}
}
else{
ctx.font = fontSize + "px bold Arial";
ctx.fillStyle = "Orange";
}
}
else if(EventLevel == 0){
ctx.font = fontSize + "px bold Arial";
ctx.fillStyle = "Red";
}
else{
ctx.font = fontSize + "px bold Arial";
ctx.fillStyle = "Green";
}
ctx.textAlign = "center";
ctx.textBaseline = "middle";
var agvIndexXoffset = 20*scale/30;
var agvIndexYoffset = 20*scale/30;
ctx.fillText(AgvIndex + "", pntX + agvIndexXoffset, Height - pntY - agvIndexYoffset);
}
}
ctx.translate(-Width, Height);
ctx.globalAlpha = 0.3;
ctx.drawImage(this.image_1, Width-xOffset - 30.07*scale, yOffset - 23.97*scale, 61.50 * scale, 43.52 * scale);
ctx.translate(Width, -Height);
this.mapParam.flash = !this.mapParam.flash;
}
},
display() {
var objPnts = this.mapData.points;
var objCurves = this.mapData.curves;
var element = this.$refs.myCanvas;
/* Set by parameters */
this.mapParam.element = element;
this.mapParam.objPnts = objPnts;
this.mapParam.objCurves = objCurves;
/* For map size */
this.mapParam.minX = getMinX(this.mapParam.objPnts);
this.mapParam.maxX = getMaxX(this.mapParam.objPnts);
this.mapParam.minY = getMinY(this.mapParam.objPnts);
this.mapParam.maxY = getMaxY(this.mapParam.objPnts);
/* For scale */
var scale1 = ((window.innerWidth) - 200) / (this.mapParam.maxX - this.mapParam.minX);
var scale2 = ((window.innerHeight) - 105) / (this.mapParam.maxY - this.mapParam.minY);
this.mapParam.scale = scale1;
if (scale2 < scale1) {
this.mapParam.scale = scale2;
}
/* For user scale\motion */
this.mapParam.userScale = 0.95;
this.mapParam.userMoveX = 0.0;
this.mapParam.userMoveY = 0.0;
this.showMap();
},
mousewheel(event){
if(event.wheelDelta > 0 && this.mapParam.userScale >= 0){
this.mapParam.userScale *= 1.1;
//this.image_1.width *= 1.1;
}else if(event.wheelDelta < 0 && this.mapParam.userScale > 0){
this.mapParam.userScale /= 1.1;
//this.image_1.height /= 1.1;
}
this.showMap();
},
dragCanvas(event){
var e = event || window.event;
var startX = e.clientX;
var startY = e.clientY;
var moved = false;
let myCanvas = this.$refs.myCanvas;
var that = this;
if(event.button == 0){
var e = e || window.event;
var startX = e.clientX;
var startY = e.clientY;
var moved = false;
var userStartX = this.mapParam.userMoveX;
var userStartY = this.mapParam.userMoveY;
myCanvas.onmousemove = function(e) {
that.mapParam.userMoveX = userStartX + (e.clientX - startX);
that.mapParam.userMoveY = userStartY + (startY - e.clientY);
that.showMap()
};
myCanvas.onmouseup = function() {
if (moved == false) {
// e.clientX, e.clientY
}
myCanvas.onmouseup = null;
myCanvas.onmousemove = null;
};
}
},
paintAgv() {
this.mapParam.image = new Image();
this.mapParam.image.src = require('@/assets/image/g28-1.png')
this.mapParam.AgvInfoIn = true;
this.showMap();
this.loopStates();
},
loopStates() {
var agvInfo = this.mapData.agvs
var msg;
msg = "<strong style='color: Orange'>"
for(let item in agvInfo){
var eventId = agvInfo[item].status.eventId;
var EventLevel = agvInfo[item].status.eventLevel;
if( eventId != -1 && eventId != 255 && (EventLevel == 0 || EventLevel == 1)){
switch(eventId){
case 0:
msg += 'AGV: ' + agvInfo[item].index + ' _ 急停按钮被按下<br/>';
break;
case 1:
msg += 'AGV: ' + agvInfo[item].index + ' _ 前安全触边被触发<br/>';
break;
case 2:
msg += 'AGV: ' + agvInfo[item].index + ' _ 后安全触边被触发<br/>';
break;
case 3:
msg += 'AGV: ' + agvInfo[item].index + ' _ 安全系统触发伺服掉电<br/>';
break;
case 4:
msg += 'AGV: ' + agvInfo[item].index + ' _ Canopen设备掉线<br/>';
break;
case 5:
msg += 'AGV: ' + agvInfo[item].index + ' _ 舵轮驱动器故障<br/>';
break;
case 6:
msg += 'AGV: ' + agvInfo[item].index + ' _ 扫描仪安全区被触发<br/>';
break;
case 7:
msg += 'AGV: ' + agvInfo[item].index + ' _ Error 7<br/>';
break;
case 8:
msg += 'AGV: ' + agvInfo[item].index + ' _ Error 8<br/>';
break;
case 9:
msg += 'AGV: ' + agvInfo[item].index + ' _ 地标信号检测失败<br/>';
break;
case 10:
msg += 'AGV: ' + agvInfo[item].index + ' _ 磁导航信号丢失<br/>';
break;
case 11:
msg += 'AGV: ' + agvInfo[item].index + ' _ 调度系统要求挂起<br/>';
break;
case 12:
msg += 'AGV: ' + agvInfo[item].index + ' _ 与调度系统通讯异常<br/>';
break;
case 13:
msg += 'AGV: ' + agvInfo[item].index + ' _ 用户操作停车<br/>';
break;
case 14:
msg += 'AGV: ' + agvInfo[item].index + ' _ Error 14<br/>';
break;
case 15:
msg += 'AGV: ' + agvInfo[item].index + ' _ 扫描仪停止区被触发<br/>';
break;
case 16:
msg += 'AGV: ' + agvInfo[item].index + ' _ Error 16<br/>';
break;
case 17:
//msg += 'AGV: ' + agvInfo[item].index + ' _ 调度系统要求agv休眠<br/>';
break;
case 18:
msg += 'AGV: ' + agvInfo[item].index + ' _ 扫描仪减速区被触发<br/>';
break;
case 19:
msg += 'AGV: ' + agvInfo[item].index + ' _ 行走误差过大<br/>';
break;
case 20:
msg += 'AGV: ' + agvInfo[item].index + ' _ 电池电量低<br/>';
break;
case 21:
msg += 'AGV: ' + agvInfo[item].index + ' _ Error 21<br/>';
break;
case 22:
msg += 'AGV: ' + agvInfo[item].index + ' _ Error 22<br/>';
break;
case 1001:
msg += 'AGV: ' + agvInfo[item].index + ' _ 货物RFID异常<br/>';
break;
default:
msg += 'AGV: ' + agvInfo[item].index + ' _ Error ' + eventId + '<br/>';
break;
}
}
}
msg += "</strong>"
if(msg !== "<strong style='color: Orange'></strong>"){
this.showError1(msg)
}
},
showError1(str) {
ElNotification({
showClose: false,
title: 'Please Note',
dangerouslyUseHTMLString: true,
message: str,
type: 'warning',
offset: 50,
duration: 1200,
})
},
connectWebsocket() {
if (typeof WebSocket === "undefined") {
console.log("Your browser does not support WebSocket");
return;
} else {
let url = 'ws://localhost:9090/ws_main';
//let url = 'ws://localhost:9090/ws_main';
var that = this;
this.websocket = new WebSocket(url); // websocket注释见AGV.vue定义
this.websocket.onopen = () => {
console.log("websocket.onopen");
};
this.websocket.onmessage = evt => {
this.mapData.agvs = JSON.parse(evt.data);
//console.log(JSON.parse(evt.data))
// console.log(this.mapData.agvs[0])
var xTemp = 0.0;
var jsonObj = this.mapData.agvs;
for (var it in jsonObj){
xTemp = jsonObj[it].status.loc_x;
jsonObj[it].status.loc_x = -jsonObj[it].status.loc_y;
jsonObj[it].status.loc_y = xTemp;
jsonObj[it].status.loc_heading = jsonObj[it].status.loc_heading + 1.5707;
}
this.paintAgv();
};
this.websocket.onerror = evt => {
console.log("websocket error:", evt);
};
this.websocket.onclose = evt => {
console.log("websocket close:", evt);
};
this.$router.beforeEach(function(){
that.websocket.close()
})
}
},
wsOnmessage(event){
console.log('onmessage' + event);
},
},
created(){
this.connectWebsocket();
//console.log(sessionStorage.getItem('user'));
},
mounted(){
request.get('/map/getMap').then(res => {
this.mapData.points = JSON.parse(res.data[0])
this.mapData.curves = JSON.parse(res.data[1])
this.mapData.infos = JSON.parse(res.data[2])
//this.mapData.agvs = JSON.parse(res.data[3])
this.mapData.regs = JSON.parse(res.data[4])
//this.connectWebsocket()
this.image_1 = new Image();
//this.image_1.src = require('@/assets/image/Layout.png')
var jsonCurvesObj = eval(this.mapData.curves);
var jsonPntsObj = -eval(this.mapData.points);
var objRegs = this.mapData.regs;
var xTemp = 0.0;
for (var it in jsonPntsObj){
xTemp = jsonPntsObj[it].x;
jsonPntsObj[it].x = -jsonPntsObj[it].y;
jsonPntsObj[it].y = xTemp;
jsonPntsObj[it].heading = jsonPntsObj[it].heading + 1.5707;
}
var xTemp = 0.0;
for(let i = 0; i < objRegs.length; i++){
xTemp = objRegs[i].lB.x;
objRegs[i].lB.x = -objRegs[i].lB.y;
objRegs[i].lB.y = xTemp;
xTemp = objRegs[i].rT.x;
objRegs[i].rT.x = -objRegs[i].rT.y;
objRegs[i].rT.y = xTemp;
}
this.display()
//this.connectWebsocket()
})
},
}
</script>
地图通过var jsonPntsObj = -eval(this.mapData.points);这个已经横过来了,但是agv小车没有按照横过来的地图行走,怎么更改
最新发布