任务详情的传感器展示优化

src/views/workManagement/components/canvasProjectInfo.vue

@@ -14,7 +14,10 @@ export default {
     data() {
         return {
             // modelImgSrc: require("@/assets/common/image/others/carTopView.png"),
-            aSrc: require("@/assets/common/image/others/sensorIcon.png"),
+            sensorSrc1: require("@/assets/common/image/sensor/l1.png"),
+            sensorSrc2: require("@/assets/common/image/sensor/l2.png"),
+            sensorSrc3: require("@/assets/common/image/sensor/l3.png"),
+            sensorSrc5: require("@/assets/common/image/sensor/l5.png"),
             ctx: null,
             ctxBg: null,
             imgBg: null,
@@ -46,7 +49,7 @@ export default {
     },
 
     methods: {
-        draw(data) {
+        draw(data, src) {
             let rate = this.rate;
 
             data.x = data.sensorX;
@@ -54,12 +57,15 @@ export default {
             data.h = data.sensorH;
             if (data.x === "" || data.y === "" || data.h === "") return;
 
+            this.imgIcon.src = src;
+
             let x = +data.x * rate;
             let y = +data.y * rate;
             let h1 = 90 - +data.h / 2;
             let h2 = 90 + +data.h / 2;
 
-            this.ctx.drawImage(this.imgIcon, x - 6, y - 6, 20.5, 14.5);
+            // this.ctx.drawImage(this.imgIcon, x - 6, y - 6, 20.5, 14.5);
+            this.ctx.drawImage(this.imgIcon, x - 6, y - 6, 20, 20);
             this.ctx.beginPath();
 
             //定义起点
@@ -95,20 +101,23 @@ export default {
                 this.ctxBg.drawImage(this.imgBg, 0, 0, 1000, 500);
 
                 this.imgIcon = new Image();
-                this.imgIcon.src = this.aSrc;
+                this.imgIcon.src = this.sensorSrc1;
 
                 this.imgIcon.onload = () => {
                     this.configList.camera.forEach((i) => {
-                        this.draw(i);
+                        this.draw(i, this.sensorSrc1);
                     });
+
                     this.configList.ogt.forEach((i) => {
-                        this.draw(i);
+                        this.draw(i, this.sensorSrc2);
                     });
+
                     this.configList.lidar.forEach((i) => {
-                        this.draw(i);
+                        this.draw(i, this.sensorSrc3);
                     });
+
                     this.configList.gps.forEach((i) => {
-                        this.draw(i);
+                        this.draw(i, this.sensorSrc5);
                     });
                 };
             };