323 lines
9.6 KiB
Vue
323 lines
9.6 KiB
Vue
<!--
|
|
* @Author: zwq
|
|
* @Date: 2021-10-12 14:02:20
|
|
* @LastEditors: zwq
|
|
* @LastEditTime: 2022-02-15 11:00:05
|
|
* @Description:
|
|
-->
|
|
<template>
|
|
<el-main
|
|
style="border:5px solid #00A6AC;padding:0;box-shadow: 1px 1px 15px #888888;"
|
|
>
|
|
<canvas id="mycanvas"> </canvas>
|
|
</el-main>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
ctx: {},
|
|
top: 0, //获取canvas的左顶点y坐标
|
|
left: 0, //获取canvas的左顶点x坐标
|
|
ctxWidth: 0,
|
|
ctxHeight: 0,
|
|
kilnStatus: [0, 1, 2, 0, 1, 2, 2, 1],
|
|
kilnPoint: [{ x: 70, y: 70 }]
|
|
};
|
|
},
|
|
mounted() {
|
|
let canvas = document.getElementById("mycanvas");
|
|
this.ctx = canvas.getContext("2d");
|
|
|
|
canvas.width = window.innerWidth - 412;
|
|
canvas.height = window.innerHeight - 100;
|
|
this.ctxWidth = window.innerWidth - 412;
|
|
this.ctxHeight = window.innerHeight - 100;
|
|
this.top = canvas.getBoundingClientRect().top;
|
|
this.left = canvas.getBoundingClientRect().left;
|
|
|
|
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();
|
|
},
|
|
methods: {
|
|
init() {
|
|
console.log("aaa");
|
|
},
|
|
Trackcvs() {
|
|
this.ctx.clearRect(0, 150, this.ctxWidth, this.ctxHeight-300)
|
|
this.ctx.beginPath(); //轨道
|
|
this.ctx.lineWidth = 3;
|
|
this.ctx.strokeStyle = "#FD8829";
|
|
this.ctx.moveTo(20, window.innerHeight / 2 - 100);
|
|
this.ctx.lineTo(window.innerWidth - 432, window.innerHeight / 2 - 100);
|
|
this.ctx.moveTo(20, window.innerHeight / 2 - 50);
|
|
this.ctx.lineTo(window.innerWidth - 432, window.innerHeight / 2 - 50);
|
|
this.ctx.stroke();
|
|
this.ctx.font = "50px Arial";
|
|
this.ctx.strokeStyle = "rgba(0,0,0,0.1)";
|
|
this.ctx.strokeText(
|
|
"轨道",
|
|
(window.innerWidth - 432) / 2,
|
|
window.innerHeight / 2 - 60
|
|
);
|
|
this.ctx.closePath();
|
|
|
|
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(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";
|
|
this.ctx.setLineDash([20, 5]); // [实线长度, 间隙长度]
|
|
this.ctx.lineDashOffset = -0;
|
|
this.ctx.strokeRect(50, 50, (window.innerWidth - 412) / 2 - 100, 300);
|
|
this.ctx.strokeRect(
|
|
(window.innerWidth - 412) / 2 + 50,
|
|
50,
|
|
(window.innerWidth - 412) / 2 - 100,
|
|
300
|
|
);
|
|
this.ctx.setLineDash([]); //关闭虚线
|
|
this.ctx.font = "100px Arial";
|
|
this.ctx.strokeStyle = "rgba(0,0,0,0.1)";
|
|
this.ctx.strokeText("窑", (window.innerWidth - 412) / 11, 230);
|
|
this.ctx.strokeText("炉", (window.innerWidth - 412) / 3, 230);
|
|
this.ctx.strokeText("窑", (3 * (window.innerWidth - 432)) / 5, 230);
|
|
this.ctx.strokeText("炉", (6 * (window.innerWidth - 412)) / 7, 230);
|
|
this.ctx.closePath();
|
|
const kWidth = (this.ctxWidth - 100) / 10;
|
|
|
|
this.ctx.beginPath(); // 窑炉
|
|
this.ctx.fillStyle = "#b9bbbd";
|
|
this.ctx.strokeStyle = "#22366e";
|
|
for (var i = 0; i < 8; i++) {
|
|
this.ctx.beginPath();
|
|
if (i < 4) {
|
|
this.ctx.arc(
|
|
(window.innerWidth - 412) / 11 + i * kWidth,
|
|
120,
|
|
40,
|
|
0,
|
|
Math.PI * 2,
|
|
false
|
|
);
|
|
} else {
|
|
this.ctx.arc(
|
|
(window.innerWidth - 412) / 2 + (i - 3) * kWidth + 50,
|
|
120,
|
|
40,
|
|
0,
|
|
Math.PI * 2,
|
|
false
|
|
);
|
|
}
|
|
this.ctx.fill();
|
|
this.ctx.stroke();
|
|
}
|
|
this.ctx.closePath();
|
|
|
|
this.ctx.beginPath();
|
|
this.ctx.fillStyle = "#545c64";
|
|
this.ctx.strokeStyle = "#22366e";
|
|
this.ctx.globalCompositeOperation = "destination-over"; //全局合成操作
|
|
for (var i = 0; i < 8; i++) {
|
|
this.ctx.fillStyle = "#545c64";
|
|
if (Math.floor(Math.random() * 10 + 1) > 8) {
|
|
this.ctx.fillStyle = "red";
|
|
}else if(Math.floor(Math.random() * 10 + 1) > 8){
|
|
this.ctx.fillStyle = "#43cd43";
|
|
}
|
|
this.ctx.beginPath();
|
|
if (i < 4) {
|
|
this.ctx.fillRect(
|
|
(window.innerWidth - 412) / 11 - 40 + i * kWidth,
|
|
120,
|
|
80,
|
|
window.innerHeight / 2 - 400
|
|
);
|
|
this.ctx.arc(
|
|
(window.innerWidth - 412) / 11 + i * kWidth,
|
|
window.innerHeight / 2 - 280,
|
|
40,
|
|
0,
|
|
Math.PI * 2,
|
|
false
|
|
);
|
|
} else {
|
|
this.ctx.fillRect(
|
|
(window.innerWidth - 412) / 2 + (i - 3) * kWidth + 10,
|
|
120,
|
|
80,
|
|
window.innerHeight / 2 - 400
|
|
);
|
|
this.ctx.arc(
|
|
(window.innerWidth - 412) / 2 + (i - 3) * kWidth + 50,
|
|
window.innerHeight / 2 - 280,
|
|
40,
|
|
0,
|
|
Math.PI * 2,
|
|
false
|
|
);
|
|
}
|
|
this.ctx.stroke();
|
|
this.ctx.fill();
|
|
}
|
|
this.ctx.closePath();
|
|
},
|
|
Storage() {
|
|
this.ctx.beginPath(); // 库位虚线
|
|
this.ctx.strokeStyle = "#FD8829";
|
|
this.ctx.setLineDash([20, 5]); // [实线长度, 间隙长度]
|
|
this.ctx.lineDashOffset = -0;
|
|
this.ctx.strokeRect(
|
|
100,
|
|
window.innerHeight / 2 + 50,
|
|
window.innerWidth - 412 - 200,
|
|
300
|
|
);
|
|
this.ctx.setLineDash([]);
|
|
this.ctx.font = "100px Arial";
|
|
this.ctx.strokeStyle = "rgba(0,0,0,0.1)";
|
|
this.ctx.strokeText(
|
|
"库",
|
|
(window.innerWidth - 412) / 6,
|
|
window.innerHeight / 2 + 250
|
|
);
|
|
this.ctx.strokeText(
|
|
"位",
|
|
((window.innerWidth - 412) * 3) / 4,
|
|
window.innerHeight / 2 + 250
|
|
);
|
|
this.ctx.closePath();
|
|
|
|
this.ctx.beginPath(); // 库位
|
|
const sWidth = (this.ctxWidth - 200) / 10;
|
|
for (var i = 0; i < 20; i++) {
|
|
this.ctx.fillStyle = "#2f8fc6";
|
|
if (Math.floor(Math.random() * 10 + 1) > 7) {
|
|
this.ctx.fillStyle = "red";
|
|
}else if(Math.floor(Math.random() * 10 + 1) > 8){
|
|
this.ctx.fillStyle = "#43cd43";
|
|
}
|
|
if (i < 10) {
|
|
this.ctx.rect(130 + i * sWidth, window.innerHeight / 2 + 90, 80, 80);
|
|
} else {
|
|
this.ctx.rect(
|
|
130 + (i - 10) * sWidth,
|
|
window.innerHeight / 2 + 220,
|
|
80,
|
|
80
|
|
);
|
|
}
|
|
this.ctx.stroke();
|
|
this.ctx.fill();
|
|
}
|
|
this.ctx.closePath();
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped></style>
|