车辆配置详情的二维展示

src/views/modelLibrary/components/canvasSensor.vue

@@ -13,79 +13,80 @@ export default {
     components: {},
     data() {
         return {
-            modelImgSrc: require("@/assets/common/image/others/carTopView.png"),
+            // modelImgSrc: require("@/assets/common/image/others/carTopView.png"),
             aSrc: require("@/assets/common/image/others/sensorIcon.png"),
+            ctx: null,
+            ctxBg: null,
+            imgBg: null,
+            imgIcon: null,
         };
     },
 
-    // props: {
-    //     width: {
-    //         type: Number,
-    //         default: 300,
-    //     },
-    //     height: {
-    //         type: Number,
-    //         default: 150,
-    //     },
-    //     x: {
-    //         type: Number,
-    //         default: 0,
-    //     },
-    //     y: {
-    //         type: Number,
-    //         default: 0,
-    //     },
-    // },
+    props: {
+        coordinate: {
+            type: Object,
+            default: { x: 0, y: 0 },
+        },
+        modelImgSrc: {
+            type: String,
+            default: require("@/assets/common/image/others/carTopView.png"),
+        },
+    },
 
-    // computed: {
-    //     scale() {
-    //         return this.width / 1000;
-    //     },
-    // },
+    watch: {
+        coordinate(val) {
+            this.draw(val);
+        },
+        modelImgSrc(val) {
+            this.drawBg();
+        },
+    },
 
     methods: {
-        draw() {
-            var ctx = document.getElementById("canvas").getContext("2d");
-            var ctxA = document.getElementById("canvasA").getContext("2d");
-            // ctx.translate(60, 60)
-            var img = new Image();
-            img.onload = () => {
-                ctxA.drawImage(img, 0, 0, 1000, 500);
-                // ctxA.translate(60, 60);
-                // img1.src = "";
+        draw1(data) {
+            // var ctx = document.getElementById("canvas").getContext("2d");
+            // var ctxA = document.getElementById("canvasA").getContext("2d");
+            // ctx.translate(960, 250);
+            // ctx.rotate(Math.PI / 2);
+            // var img = new Image();
+            // img.onload = () => {
+            // ctxA.drawImage(img, 0, 0, 1000, 500);
+            // ctx.translate(960, 250);
+            // ctx.rotate(Math.PI/2);
+            // ctxA.translate(60, 60);
+            // img1.src = "";
 
-                // ctx.save();
-            };
+            // ctx.save();
+            // };
             // console.log(ctx);
             // ctx.save();
             var img1 = new Image();
             img.src = this.modelImgSrc;
             img1.src = this.aSrc;
             img1.onload = () => {
-                ctx.drawImage(img1, 900, 150, 29, 41);
+                ctx.drawImage(img1, 0, 0, 41, 29);
+                ctx.rotate(-Math.PI / 2);
+                ctx.translate(-960, -250);
             };
-            
+
+            setTimeout((_) => {
+                // ctx.save();
+                // img1.src = this.aSrc;
+                ctx.clearRect(-250, -40, 500, 1000);
+                ctx.drawImage(img1, 30, 30, 41, 29);
+                // ctx.restore();
+            }, 1000);
             // setTimeout((_) => {
-            //     ctx.save();
+            //     // ctx.save();
             //     // img1.src = this.aSrc;
-            //     ctx.drawImage(img1, 40, 0, 15, 20);
-            //     ctx.restore();
-            // }, 1000);
-            // setTimeout((_) => {
-            //     ctx.save();
-            //     img1.src = this.aSrc;
-            //     // ctx.clearRect(20,20,100,50);
-            //     ctx.drawImage(img, -60, -60, this.width, this.height);
-            //     ctx.drawImage(img1, 10, 10, 15, 20);
-            //     ctx.restore();
+            //     // ctx.clearRect(-250,960,1000,500)
+            //     ctx.clearRect(-250,-40,500,1000)
+            //     ctx.drawImage(img1, -10, 510, 29, 41);
+            //     // ctx.restore();
             // }, 2000);
             // setTimeout((_) => {
-            //     ctx.save();
-            //     img1.src = this.aSrc;
-            //     ctx.drawImage(img, -60, -60, this.width, this.height);
-            //     ctx.drawImage(img1, 20, 20, 15, 20);
-            //     ctx.restore();
-            //     // ctx.clearRect(60,60,100,50);
+            //     ctx.clearRect(-250,-40,500,1000)
+            //     ctx.drawImage(img1, -180, 810, 29, 41);
             // }, 3000);
             // setTimeout((_) => {
             //     ctx.save();
@@ -94,26 +95,46 @@ export default {
             //     ctx.drawImage(img1, 0, 0, 15, 20);
             // }, 4000);
         },
+        draw(data) {
+            if (!data.x || !data.y) return;
+            this.ctx.clearRect(-250, -40, 500, 1000);
+            this.ctx.drawImage(this.imgIcon, data.x, data.y, 41, 29);
+        },
+        clear() {
+            this.ctx.clearRect(-250, -40, 500, 1000);
+        },
+        drawBg(){
+            this.ctxBg.clearRect(0,0 , 1000, 500);
+            this.imgBg.src = this.modelImgSrc;
+            this.ctxBg.drawImage(this.imgBg, 0, 0, 1000, 500);
+        }
     },
 
     mounted() {
         $(document).ready(() => {
-            // console.log(12678);
-            // $("#canvas").css({
-            //     width: $(
-            //         ".vehicleConfigurationDetailPanel .model"
-            //     ).outerWidth(),
-            //     height:
-            //         $(".vehicleConfigurationDetailPanel .model").outerWidth() /
-            //         2,
-            // });
-            this.draw();
+            this.ctx = document.getElementById("canvas").getContext("2d");
+            this.ctxBg = document.getElementById("canvasA").getContext("2d");
+
+            this.ctx.translate(960, 250);
+            this.ctx.rotate(Math.PI / 2);
+
+            this.imgBg = new Image();
+            this.imgBg.src = this.modelImgSrc;
+            this.imgBg.onload = () => {
+                this.ctxBg.drawImage(this.imgBg, 0, 0, 1000, 500);
+            };
+
+            this.imgIcon = new Image();
+            this.imgIcon.src = this.aSrc;
+            // this.imgIcon.onload = () => {
+            //     this.ctx.drawImage(this.imgIcon, 0, 0, 29, 41);
+            // };
         });
     },
 };
 </script>
 
-<style lang='less' scoped>
+<style lang="less" scoped>
 .canvasPanel {
     position: relative;
 

src/views/modelLibrary/vehicleConfigurationDetail.vue

@@ -75,8 +75,12 @@
                 class="model"
                 v-bind:style="{ width: width + 'px', height: width / 2 + 'px' }"
             >
-                <img :src="modelImgSrc" width="100%" />
-                <!-- <canvas-sensor></canvas-sensor> -->
+                <!-- <img :src="modelImgSrc" width="100%" /> -->
+                <canvas-sensor
+                    ref="canvasSensor"
+                    :coordinate="coordinate"
+                    :modelImgSrc="modelImgSrc"
+                ></canvas-sensor>
             </div>
 
             <div class="conditions">
@@ -99,6 +103,7 @@
                                 maxlength="10"
                                 v-autoTrim="{ obj: formA, key: 'sensorX' }"
                                 v-model="formA.sensorX"
+                                @input="inputChange"
                             >
                             </el-input>
                         </el-form-item>
@@ -108,6 +113,7 @@
                                 maxlength="10"
                                 v-autoTrim="{ obj: formA, key: 'sensorY' }"
                                 v-model="formA.sensorY"
+                                @input="inputChange"
                             >
                             </el-input>
                         </el-form-item>
@@ -194,7 +200,8 @@ export default {
         let validateNum = (rule, value, callback) => {
             // !/^(-?\d+)(\.\d{1,2})?$/.test(value) &&
             // !(/^(-?(0|[1-9][0-9]+))(\.\d{1,2})?$/.test(value)) &&
-            !/^(-?(0|[1-9]+))[(\.\d{1,2})]?$/.test(value) &&
+            !/^(-?(0|[1-9][0-9]*))(\.\d{1,2})?$/.test(value) &&
+                // /[.]/.test(value) && !/^(-?(0|[1-9]+))$/.test(value) &&
                 callback(new Error(rule.message));
             callback();
         };
@@ -246,7 +253,7 @@ export default {
                     },
                     {
                         validator: validateNum,
-                        message: "请输入最多带有2位小数的数字",
+                        message: "请输入最多带有两位小数的数字",
                         trigger: ["blur"],
                     },
                 ],
@@ -258,7 +265,7 @@ export default {
                     },
                     {
                         validator: validateNum,
-                        message: "请输入最多带有2位小数的数字",
+                        message: "请输入最多带有两位小数的数字",
                         trigger: ["blur"],
                     },
                 ],
@@ -270,7 +277,7 @@ export default {
                     },
                     {
                         validator: validateNum,
-                        message: "请输入最多带有2位小数的数字",
+                        message: "请输入最多带有两位小数的数字",
                         trigger: ["blur"],
                     },
                 ],
@@ -299,9 +306,10 @@ export default {
                 name: "",
                 index: -1,
             },
-            modelImgSrc: require("@/assets/common/image/others/carTopView.png"),
+            modelImgSrc: require("@/assets/common/image/others/carTopView.png"), // 车辆图片地址
             canDraw: false,
             width: 300,
+            coordinate: { x: 0, y: 0 }, // 存放传递给canvas的值
         };
     },
 
@@ -350,6 +358,7 @@ export default {
             let item = this.vehicleNameList.find((i) => i.id == id);
             this.form.vehicleDescription = item.description;
             this.modelImgSrc = this.getImgUrl(item.vehicleImage);
+            this.$refs.canvasSensor.drawBg();
         },
         // 验证各传感器数组的每一项表单数据是否齐全
         validateSensorsList() {
@@ -431,6 +440,8 @@ export default {
                     this.configList[item.name][item.index]
                 );
             }
+            this.$refs.canvasSensor.clear();
+            this.inputChange();
         },
         saveConfig() {
             if (this.curOne.index < 0) {
@@ -456,12 +467,16 @@ export default {
                     ".vehicleConfigurationDetailPanel .model"
                 ).outerWidth();
                 this.canDraw = true;
-                console.log(
-                    $(".vehicleConfigurationDetailPanel .model").width()
-                );
-                // console.log($('.vehicleConfigurationDetailPanel .model').outerWidth());
             });
         },
+        inputChange() {
+            if (this.curOne.index < 0) return;
+            if (this.formA.sensorX === "" || this.formA.sensorY === "") return;
+            this.coordinate = {
+                x: this.formA.sensorX,
+                y: this.formA.sensorY,
+            };
+        },
     },
 
     mounted() {