传感器模型二维展示

src/views/modelLibrary/components/canvasSensorModel.vue

@@ -0,0 +1,95 @@
+<template>
+    <div class="canvasSensorModelPanel">
+        <canvas id="canvasSensorModel" width="1000" height="500"></canvas>
+        <canvas id="canvasSensorModelBg" width="1000" height="500"></canvas>
+    </div>
+</template>
+
+<script>
+//import  from '';
+
+export default {
+    name: "canvasSensorModel", //
+    components: {},
+    data() {
+        return {
+            modelImgSrc: require("@/assets/common/image/others/carTopView.png"),
+            ctx: null,
+            ctxBg: null,
+            imgBg: null,
+        };
+    },
+
+    props: {
+        coordinate: {
+            type: Object,
+            default: { r: 0, h: 60 },
+        },
+    },
+
+    watch: {
+        coordinate(val) {
+            this.draw(val);
+        },
+    },
+
+    methods: {
+        draw(data) {
+            if (data.r === "" || data.h === "") return;
+            this.ctx.clearRect(-250, -220, 500, 1000);
+            this.ctx.beginPath();
+
+            let h1 = 90 - +data.h / 2;
+            let h2 = 90 + +data.h / 2;
+            //定义起点
+            this.ctx.moveTo(6, 0);
+            //以起点为圆心，画一个半径为100的圆弧
+            this.ctx.arc(6, 0, data.r, (h1 * Math.PI) / 180, (h2 * Math.PI) / 180);
+            this.ctx.closePath();
+            this.ctx.fillStyle = "rgba(252,222,147,0.54)";
+            this.ctx.fill();
+        },
+        clear() {
+            this.ctx.clearRect(-250, -220, 500, 1000);
+        },
+    },
+
+    mounted() {
+        $(document).ready(() => {
+            this.ctx = document.getElementById("canvasSensorModel").getContext("2d");
+            this.ctxBg = document.getElementById("canvasSensorModelBg").getContext("2d");
+
+            this.ctx.translate(780, 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);
+            };
+        });
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.canvasSensorModelPanel {
+    position: relative;
+
+    canvas {
+        width: 100%;
+    }
+
+    #canvasSensorModel {
+        position: relative;
+        z-index: 1;
+    }
+
+    #canvasSensorModelBg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 0;
+    }
+}
+</style>

src/views/modelLibrary/components/canvasSensorModelA.vue

@@ -0,0 +1,122 @@
+<template>
+    <div class="canvasSensorModelAPanel">
+        <canvas id="canvasSensorModelA" width="1000" height="500"></canvas>
+        <canvas id="canvasSensorModelABg" width="1000" height="500"></canvas>
+    </div>
+</template>
+
+<script>
+//import  from '';
+
+export default {
+    name: "canvasSensorModelA", //
+    components: {},
+    data() {
+        return {
+            modelImgSrc: require("@/assets/common/image/others/carTopView.png"),
+            ctx: null,
+            ctxBg: null,
+            imgBg: null,
+        };
+    },
+
+    props: {
+        coordinate: {
+            type: Object,
+            default: { r: 0, hl: 60, hr: 60 },
+        },
+    },
+
+    watch: {
+        coordinate(val) {
+            this.draw(val);
+        },
+    },
+
+    methods: {
+        draw(data) {
+            if (data.r === "" || data.hl === "" || data.hr === "") return;
+            this.ctx.clearRect(-250, -220, 500, 1000);
+
+            this.ctx.beginPath();
+
+            let hr1 = 90 - +data.hl / 2;
+            let hr2 = 90 + +data.hl / 2;
+            //定义起点
+            this.ctx.moveTo(-40, 0);
+            this.ctx.arc(
+                -40,
+                0,
+                data.r,
+                (hr1 * Math.PI) / 180,
+                (hr2 * Math.PI) / 180
+            );
+            this.ctx.closePath();
+            this.ctx.fillStyle = "rgba(252,222,147,0.54)";
+            this.ctx.fill();
+
+            this.ctx.beginPath();
+
+            let hl1 = 90 - +data.hr / 2;
+            let hl2 = 90 + +data.hr / 2;
+            //定义起点
+            this.ctx.moveTo(50, 0);
+            this.ctx.arc(
+                50,
+                0,
+                data.r,
+                (hl1 * Math.PI) / 180,
+                (hl2 * Math.PI) / 180
+            );
+            this.ctx.closePath();
+            this.ctx.fillStyle = "rgba(252,222,147,0.54)";
+            this.ctx.fill();
+        },
+        clear() {
+            this.ctx.clearRect(-250, -220, 500, 1000);
+        },
+    },
+
+    mounted() {
+        $(document).ready(() => {
+            this.ctx = document
+                .getElementById("canvasSensorModelA")
+                .getContext("2d");
+            this.ctxBg = document
+                .getElementById("canvasSensorModelABg")
+                .getContext("2d");
+
+            this.ctx.translate(780, 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);
+            };
+        });
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.canvasSensorModelAPanel {
+    position: relative;
+
+    canvas {
+        width: 100%;
+    }
+
+    #canvasSensorModelA {
+        position: relative;
+        z-index: 1;
+    }
+
+    #canvasSensorModelABg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 0;
+    }
+}
+</style>

src/views/modelLibrary/components/canvasSensor.vue → src/views/modelLibrary/components/canvasVehicleConfiguration.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="canvasPanel">
+    <div class="canvasVehicleConfigurationPanel">
         <canvas id="canvas" width="1000" height="500"></canvas>
         <canvas id="canvasA" width="1000" height="500"></canvas>
     </div>
@@ -9,7 +9,7 @@
 //import  from '';
 
 export default {
-    name: "canvasSensor", //
+    name: "canvasVehicleConfiguration", //
     components: {},
     data() {
         return {
@@ -140,20 +140,13 @@ 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);
-            // };
         });
     },
 };
 </script>
 
 <style lang="less" scoped>
-.canvasPanel {
+.canvasVehicleConfigurationPanel {
     position: relative;
 
     canvas {

src/views/modelLibrary/components/formCamera.vue

@@ -46,6 +46,7 @@
                     maxlength="15"
                     v-autoTrim="{ obj: form, key: 'farDistance' }"
                     v-model="form.farDistance"
+                    @input="inputChange"
                 >
                 </el-input>
             </el-form-item>
@@ -55,6 +56,7 @@
                     maxlength="15"
                     v-autoTrim="{ obj: form, key: 'fovH' }"
                     v-model="form.fovH"
+                    @input="inputChange"
                 >
                 </el-input>
             </el-form-item>
@@ -227,6 +229,13 @@ export default {
                 this.$emit("clearForm");
             }
         },
+        inputChange() {
+            if (this.form.farDistance === "" || this.form.fovH === "") return;
+            this.$emit("inputChange", {
+                r: this.form.farDistance,
+                h: this.form.fovH,
+            });
+        },
     },
 
     // mounted: {},

src/views/modelLibrary/components/formLaserRadar.vue

@@ -46,6 +46,7 @@
                     maxlength="10"
                     v-autoTrim="{ obj: form, key: 'farDistance' }"
                     v-model="form.farDistance"
+                    @input="inputChange"
                 >
                 </el-input>
             </el-form-item>
@@ -55,6 +56,7 @@
                     maxlength="10"
                     v-autoTrim="{ obj: form, key: 'fovH' }"
                     v-model="form.fovH"
+                    @input="inputChange"
                 >
                 </el-input>
             </el-form-item>
@@ -244,6 +246,13 @@ export default {
                 this.$emit("clearForm");
             }
         },
+        inputChange() {
+            if (this.form.farDistance === "" || this.form.fovH === "") return;
+            this.$emit("inputChange", {
+                r: this.form.farDistance,
+                h: this.form.fovH,
+            });
+        },
     },
 
     async mounted() {

src/views/modelLibrary/components/formPerfectSensor.vue

@@ -46,6 +46,7 @@
                     maxlength="15"
                     v-autoTrim="{ obj: form, key: 'farDistance' }"
                     v-model="form.farDistance"
+                    @input="inputChange"
                 >
                 </el-input>
             </el-form-item>
@@ -55,6 +56,7 @@
                     maxlength="15"
                     v-autoTrim="{ obj: form, key: 'fovHLeft' }"
                     v-model="form.fovHLeft"
+                    @input="inputChange"
                 >
                 </el-input>
             </el-form-item>
@@ -64,6 +66,7 @@
                     maxlength="15"
                     v-autoTrim="{ obj: form, key: 'fovHRight' }"
                     v-model="form.fovHRight"
+                    @input="inputChange"
                 >
                 </el-input>
             </el-form-item>
@@ -298,6 +301,19 @@ export default {
             this.isIndeterminate =
                 checkedCount > 0 && checkedCount < this.targetOptions.length;
         },
+        inputChange() {
+            if (
+                this.form.farDistance === "" ||
+                this.form.fovHLeft === "" ||
+                this.form.fovHRight === ""
+            )
+                return;
+            this.$emit("inputChange", {
+                r: this.form.farDistance,
+                hl: this.form.fovHLeft,
+                hr: this.form.fovHRight,
+            });
+        },
     },
 
     async mounted() {

src/views/modelLibrary/sensorModel.vue

@@ -26,6 +26,7 @@
                     @getList="getList"
                     @changeShare="changeShare"
                     @clearForm="addOne"
+                    @inputChange="inputChange"
                 ></form-camera>
                 <form-perfect-sensor
                     v-show="subPageActiveName === 2"
@@ -33,6 +34,7 @@
                     @getList="getList"
                     @changeShare="changeShare"
                     @clearForm="addOne"
+                    @inputChange="inputChangeA"
                 ></form-perfect-sensor>
                 <form-laser-radar
                     v-show="subPageActiveName === 3"
@@ -40,6 +42,7 @@
                     @getList="getList"
                     @changeShare="changeShare"
                     @clearForm="addOne"
+                    @inputChange="inputChange"
                 ></form-laser-radar>
                 <!-- <form-millimeter-wave-radar
                     v-show="subPageActiveName === 4"
@@ -52,7 +55,17 @@
                     @clearForm="addOne"
                 ></form-gps>
                 <div class="model">
-                    <img :src="imgSrc" width="100%" />
+                    <!-- <img :src="imgSrc" width="100%" /> -->
+                    <canvas-sensor
+                        v-show="subPageActiveName != 2"
+                        ref="canvasSensor"
+                        :coordinate="coordinate"
+                    ></canvas-sensor>
+                    <canvas-sensorA
+                        v-show="subPageActiveName === 2"
+                        ref="canvasSensorA"
+                        :coordinate="coordinateA"
+                    ></canvas-sensorA>
                 </div>
             </div>
             <div class="btns">
@@ -89,6 +102,8 @@ import formPerfectSensor from "./components/formPerfectSensor.vue";
 import formLaserRadar from "./components/formLaserRadar.vue";
 import formMillimeterWaveRadar from "./components/formMillimeterWaveRadar.vue";
 import formGps from "./components/formGps.vue";
+import canvasSensor from "./components/canvasSensorModel.vue";
+import canvasSensorA from "./components/canvasSensorModelA.vue";
 
 export default {
     name: "sensorModel", // 传感器模型
@@ -100,6 +115,8 @@ export default {
         formLaserRadar,
         formMillimeterWaveRadar,
         formGps,
+        canvasSensor,
+        canvasSensorA,
     },
     data() {
         return {
@@ -109,6 +126,8 @@ export default {
             fromId: 1,
             imgSrc: require("@/assets/common/image/others/carTopView.png"),
             currentShare: "",
+            coordinate: { r: 0, h: 0 }, // 存放传递给canvas的值
+            coordinateA: { r: 0, hl: 0, hr: 0 }, // 存放传递给完美传感器canvas的值
         };
     },
 
@@ -167,6 +186,8 @@ export default {
             this.$nextTick(() => {
                 this.getList();
             });
+            this.$refs.canvasSensor.clear();
+            this.$refs.canvasSensorA.clear();
         },
         showInfo(id) {
             this.$refs[`form${this.subPageActiveName}`].showInfo(id);
@@ -182,6 +203,8 @@ export default {
         },
         cancel() {
             this.$refs[`form${this.subPageActiveName}`].cancel();
+            this.$refs.canvasSensor.clear();
+            this.$refs.canvasSensorA.clear();
         },
         changeShare(share) {
             // 根据form传回的share进行按钮展示
@@ -195,6 +218,8 @@ export default {
             this.$refs[`form${this.subPageActiveName}`].form.share = "";
             this.$refs[`form${this.subPageActiveName}`].form.id = "";
             this.currentShare = "";
+            this.$refs.canvasSensor.clear();
+            this.$refs.canvasSensorA.clear();
         },
         delOne(id) {
             const delApis = [
@@ -225,6 +250,12 @@ export default {
                 }
             });
         },
+        inputChange(data) {
+            this.coordinate = data;
+        },
+        inputChangeA(data) {
+            this.coordinateA = data;
+        },
     },
 
     // mounted() {},

src/views/modelLibrary/vehicleConfigurationDetail.vue

@@ -24,19 +24,6 @@
                     >
                     </el-input>
                 </el-form-item>
-                <!-- <el-form-item label="车辆名称:" prop="vehicleName">
-                    <el-select
-                        v-model="form.vehicleName"
-                        @change="vehicleChange"
-                    >
-                        <el-option
-                            v-for="item in vehicleNameList"
-                            :label="item.vehicleName"
-                            :value="item.id"
-                            :key="item.id"
-                        ></el-option>
-                    </el-select>
-                </el-form-item> -->
                 <el-form-item label="车辆名称:" prop="vehicleId">
                     <el-select v-model="form.vehicleId" @change="vehicleChange">
                         <el-option
@@ -191,7 +178,7 @@
 
 <script>
 import handleConfigList from "./components/handleConfigList.vue";
-import canvasSensor from "./components/canvasSensor.vue";
+import canvasSensor from "./components/canvasVehicleConfiguration.vue";
 import { mapState } from "vuex";
 
 export default {
@@ -308,7 +295,7 @@ export default {
                 index: -1,
             },
             modelImgSrc: require("@/assets/common/image/others/carTopView.png"), // 车辆图片地址
-            canDraw: false,
+            // canDraw: false,
             width: 300,
             coordinate: { x: 0, y: 0 }, // 存放传递给canvas的值
         };
@@ -467,7 +454,7 @@ export default {
                 this.width = $(
                     ".vehicleConfigurationDetailPanel .model"
                 ).outerWidth();
-                this.canDraw = true;
+                // this.canDraw = true;
             });
         },
         inputChange() {
@@ -490,7 +477,9 @@ export default {
         setTimeout(() => {
             this.domHandle();
         }, 0);
+
         this.getMyVehicleList();
+        
         if (this.$route.query.id) {
             let id = "";
             this.form.id = id = this.$route.query.id;