车辆配置详情的二维灯光展示

src/views/modelLibrary/components/canvasSensor.vue

@@ -25,7 +25,7 @@ export default {
     props: {
         coordinate: {
             type: Object,
-            default: { x: 0, y: 0 },
+            default: { x: 0, y: 0, h: 60 },
         },
         modelImgSrc: {
             type: String,
@@ -96,18 +96,32 @@ export default {
             // }, 4000);
         },
         draw(data) {
-            if (!data.x || !data.y) return;
+            if (data.x === "" || data.y === "" || data.h === "") return;
             this.ctx.clearRect(-250, -40, 500, 1000);
-            this.ctx.drawImage(this.imgIcon, data.x, data.y, 41, 29);
+            this.ctx.drawImage(this.imgIcon, data.x, data.y, 20.5, 14.5);
+            this.ctx.beginPath();
+
+            let x = +data.x + 6;
+            let y = +data.y + 12;
+            let h1 = 90 - +data.h / 2;
+            let h2 = 90 + +data.h / 2;
+            //定义起点
+            this.ctx.moveTo(x, y);
+            //以起点为圆心，画一个半径为100的圆弧
+            this.ctx.arc(x, y, 100, (h1 * Math.PI) / 180, (h2 * Math.PI) / 180);
+            // this.ctx.arc(0, 0, 100, (30 * Math.PI) / 180, (60 * Math.PI) / 180);
+            this.ctx.closePath();
+            this.ctx.fillStyle = "rgba(252,222,147,0.54)";
+            this.ctx.fill();
         },
         clear() {
             this.ctx.clearRect(-250, -40, 500, 1000);
         },
-        drawBg(){
-            this.ctxBg.clearRect(0,0 , 1000, 500);
+        drawBg() {
+            this.ctxBg.clearRect(0, 0, 1000, 500);
             this.imgBg.src = this.modelImgSrc;
             this.ctxBg.drawImage(this.imgBg, 0, 0, 1000, 500);
-        }
+        },
     },
 
     mounted() {
@@ -126,6 +140,10 @@ export default {
 
             this.imgIcon = new Image();
             this.imgIcon.src = this.aSrc;
+
+            // this.ctx.moveTo(100, 100);
+            // this.ctx.lineTo(200, 100);
+
             // this.imgIcon.onload = () => {
             //     this.ctx.drawImage(this.imgIcon, 0, 0, 29, 41);
             // };

src/views/modelLibrary/vehicleConfigurationDetail.vue

@@ -132,6 +132,7 @@
                                 maxlength="10"
                                 v-autoTrim="{ obj: formA, key: 'sensorH' }"
                                 v-model="formA.sensorH"
+                                @input="inputChange"
                             >
                             </el-input>
                         </el-form-item>
@@ -428,7 +429,7 @@ export default {
                 this.formA.sensorX = "0";
                 this.formA.sensorY = "0";
                 this.formA.sensorZ = "0";
-                this.formA.sensorH = "0";
+                this.formA.sensorH = "60";
                 this.formA.sensorP = "0";
                 this.formA.sensorR = "0";
                 if (this.curOne.name === "ogt") {
@@ -471,10 +472,16 @@ export default {
         },
         inputChange() {
             if (this.curOne.index < 0) return;
-            if (this.formA.sensorX === "" || this.formA.sensorY === "") return;
+            if (
+                this.formA.sensorX === "" ||
+                this.formA.sensorY === "" ||
+                this.formA.sensorH === ""
+            )
+                return;
             this.coordinate = {
                 x: this.formA.sensorX,
                 y: this.formA.sensorY,
+                h: this.formA.sensorH,
             };
         },
     },

src/views/modelLibrary/vehicleModel.vue

@@ -295,7 +295,7 @@
                     <div class="titlePanelBor">视图</div>
                 </div>
                 <div class="modelBox">
-                    <img :src="modelImgSrc" width="100%" />
+                    <img v-show="modelImgSrc" :src="modelImgSrc" width="100%" />
                 </div>
             </el-form>
 
@@ -467,7 +467,9 @@ export default {
                 if (res.code == 200 && res.info) {
                     this.$refs.form.clearValidate();
                     this.form = res.info;
-                    this.modelImgSrc = this.getImgUrl(res.info.vehicleImage);
+                    if(res.info.vehicleImage) {
+                        this.modelImgSrc = this.getImgUrl(res.info.vehicleImage);
+                    }
                 } else {
                     this.$message.error(res.message || "获取失败");
                 }