更新设备监控

src/components/equipment-monitor.vue

@@ -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.ctx.beginPath(); // 颜色1信息
-    this.Kilncvs(); //窑炉 绘图
+      this.ctx.fillStyle = '#a2a2a2';
-    this.Storage(); //库位 绘图
+      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,12 +99,72 @@ export default {
       );
       this.ctx.closePath();
 
-      this.ctx.beginPath(); // rgv
+      this.$axios({
-      this.ctx.fillStyle = "#c1d8fc";
+        method: "post",
-      this.ctx.fillRect(20, window.innerHeight / 2 - 115, 100, 80);
+        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(); // 窑炉虚线