|
|
@@ -2,7 +2,7 @@ |
|
|
|
* @Author: zwq |
|
|
|
* @Date: 2021-10-12 14:02:20 |
|
|
|
* @LastEditors: zwq |
|
|
|
* @LastEditTime: 2021-11-11 10:11:22 |
|
|
|
* @LastEditTime: 2022-02-15 11:00:05 |
|
|
|
* @Description: |
|
|
|
--> |
|
|
|
<template> |
|
|
@@ -37,9 +37,41 @@ export default { |
|
|
|
this.top = canvas.getBoundingClientRect().top; |
|
|
|
this.left = canvas.getBoundingClientRect().left; |
|
|
|
|
|
|
|
this.Rgvcvs(); //RGV 绘图 |
|
|
|
this.Kilncvs(); //窑炉 绘图 |
|
|
|
this.Storage(); //库位 绘图 |
|
|
|
this.ctx.beginPath(); // 颜色1信息 |
|
|
|
this.ctx.fillStyle = '#a2a2a2'; |
|
|
|
this.ctx.fillRect(10, 10, 30, 20); |
|
|
|
this.ctx.strokeStyle = "#dcf4e3"; |
|
|
|
this.ctx.strokeRect(10, 10, 30, 20); |
|
|
|
this.ctx.closePath(); |
|
|
|
|
|
|
|
this.ctx.beginPath(); // 颜色2信息 |
|
|
|
this.ctx.fillStyle = '#00c297'; |
|
|
|
this.ctx.fillRect(10, 40, 30, 20); |
|
|
|
this.ctx.strokeStyle = "#dcf4e3"; |
|
|
|
this.ctx.strokeRect(10, 40, 30, 20); |
|
|
|
this.ctx.closePath(); |
|
|
|
|
|
|
|
this.ctx.beginPath(); // 颜色3信息 |
|
|
|
this.ctx.fillStyle = '#c1d8fc'; |
|
|
|
this.ctx.fillRect(10, 70, 30, 20); |
|
|
|
this.ctx.strokeStyle = "#dcf4e3"; |
|
|
|
this.ctx.strokeRect(10, 70, 30, 20); |
|
|
|
this.ctx.closePath(); |
|
|
|
|
|
|
|
this.ctx.beginPath(); // rgv1 |
|
|
|
this.ctx.fillStyle = '#2c2c2c'; |
|
|
|
this.ctx.font="10px Arial"; |
|
|
|
this.ctx.fillText("无信号",50,22); |
|
|
|
this.ctx.fillText("空闲",50,52); |
|
|
|
this.ctx.fillText("任务中",50,82); |
|
|
|
this.ctx.closePath(); |
|
|
|
|
|
|
|
this.Trackcvs(); //轨道 绘图 |
|
|
|
setInterval(()=>{ |
|
|
|
this.Trackcvs() |
|
|
|
}, 5000); |
|
|
|
//this.Kilncvs(); //窑炉 绘图 |
|
|
|
//this.Storage(); //库位 绘图 |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.init(); |
|
|
@@ -48,7 +80,8 @@ export default { |
|
|
|
init() { |
|
|
|
console.log("aaa"); |
|
|
|
}, |
|
|
|
Rgvcvs() { |
|
|
|
Trackcvs() { |
|
|
|
this.ctx.clearRect(0, 150, this.ctxWidth, this.ctxHeight-300) |
|
|
|
this.ctx.beginPath(); //轨道 |
|
|
|
this.ctx.lineWidth = 3; |
|
|
|
this.ctx.strokeStyle = "#FD8829"; |
|
|
@@ -66,13 +99,73 @@ export default { |
|
|
|
); |
|
|
|
this.ctx.closePath(); |
|
|
|
|
|
|
|
this.ctx.beginPath(); // rgv |
|
|
|
this.ctx.fillStyle = "#c1d8fc"; |
|
|
|
this.ctx.fillRect(20, window.innerHeight / 2 - 115, 100, 80); |
|
|
|
this.$axios({ |
|
|
|
method: "post", |
|
|
|
url: "/api/view/getAllInfo", |
|
|
|
}).then(res => { |
|
|
|
this.Rgvcvs(res.data) |
|
|
|
}); |
|
|
|
}, |
|
|
|
Rgvcvs({rgv1,rgv2}){ |
|
|
|
//this.ctx.clearRect(100, window.innerHeight / 2 - 115, w, h); |
|
|
|
let color1,color2 |
|
|
|
if(rgv1.communiStatus){ |
|
|
|
if(rgv1.isFree){ |
|
|
|
color1 = '#00c297' |
|
|
|
}else if(rgv1.taskNumber){ |
|
|
|
color1 = '#c1d8fc' |
|
|
|
} |
|
|
|
}else{ |
|
|
|
color1 = '#a2a2a2' |
|
|
|
} |
|
|
|
if(rgv2.communiStatus){ |
|
|
|
if(rgv2.isFree){ |
|
|
|
color2 = '#00c297' |
|
|
|
}else if(rgv2.taskNumber){ |
|
|
|
color2 = '#c1d8fc' |
|
|
|
} |
|
|
|
}else{ |
|
|
|
color2 = '#a2a2a2' |
|
|
|
} |
|
|
|
this.ctx.beginPath(); // rgv1 |
|
|
|
this.ctx.fillStyle = color1; |
|
|
|
this.ctx.fillRect(100, window.innerHeight / 2 - 115, 100, 80); |
|
|
|
this.ctx.strokeStyle = "#dcf4e3"; |
|
|
|
this.ctx.strokeRect(20, window.innerHeight / 2 - 115, 100, 80); |
|
|
|
this.ctx.strokeRect(100, window.innerHeight / 2 - 115, 100, 80); |
|
|
|
this.ctx.closePath(); |
|
|
|
}, |
|
|
|
this.ctx.beginPath(); // rgv1 |
|
|
|
this.ctx.fillStyle = '#2c2c2c'; |
|
|
|
this.ctx.font="20px Arial"; |
|
|
|
this.ctx.fillText("RGV1",110,window.innerHeight / 2 - 70); |
|
|
|
this.ctx.closePath(); |
|
|
|
|
|
|
|
this.ctx.beginPath(); // rgv2 |
|
|
|
this.ctx.fillStyle = color2; |
|
|
|
this.ctx.fillRect(window.innerWidth - 612, window.innerHeight / 2 - 115, 100, 80); |
|
|
|
this.ctx.strokeStyle = "#dcf4e3"; |
|
|
|
this.ctx.strokeRect(window.innerWidth - 612, window.innerHeight / 2 - 115, 100, 80); |
|
|
|
this.ctx.closePath(); |
|
|
|
this.ctx.beginPath(); // rgv1 |
|
|
|
this.ctx.fillStyle = '#2c2c2c'; |
|
|
|
this.ctx.font="20px Arial"; |
|
|
|
this.ctx.fillText("RGV2",window.innerWidth - 602,window.innerHeight / 2 - 70); |
|
|
|
this.ctx.closePath(); |
|
|
|
|
|
|
|
if(color1 === '#c1d8fc'){ |
|
|
|
this.ctx.beginPath(); // rgv1 |
|
|
|
this.ctx.fillStyle = '#2c2c2c'; |
|
|
|
this.ctx.font="20px Arial"; |
|
|
|
this.ctx.fillText("任务号:"+rgv1.taskNumber,110,window.innerHeight / 2 - 10); |
|
|
|
this.ctx.closePath(); |
|
|
|
} |
|
|
|
if(color2 === '#c1d8fc'){ |
|
|
|
this.ctx.beginPath(); // rgv2 |
|
|
|
this.ctx.fillStyle = '#2c2c2c'; |
|
|
|
this.ctx.font="20px Arial"; |
|
|
|
this.ctx.fillText("任务号:"+rgv2.taskNumber,window.innerWidth - 602,window.innerHeight / 2 - 10); |
|
|
|
this.ctx.closePath(); |
|
|
|
} |
|
|
|
}, |
|
|
|
Kilncvs() { |
|
|
|
this.ctx.beginPath(); // 窑炉虚线 |
|
|
|
this.ctx.strokeStyle = "#FD8829"; |
|
|
|