二位展示加转换率

src/views/modelLibrary/components/canvasSensorModel.vue

@@ -17,13 +17,14 @@ export default {
             ctx: null,
             ctxBg: null,
             imgBg: null,
+            rate: 70, // 换算比例
         };
     },
 
     props: {
         coordinate: {
             type: Object,
-            default: { r: 0, h: 60 },
+            default: { r: 0, h: 0, n: 0 },
         },
     },
 
@@ -35,29 +36,66 @@ export default {
 
     methods: {
         draw(data) {
-            if (data.r === "" || data.h === "") return;
+            if (data.r === "" || data.h === "" || data.n === "") return;
             this.ctx.clearRect(-250, -220, 500, 1000);
             this.ctx.beginPath();
 
+            let rate = this.rate;
+
             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.arc(
+                6,
+                0,
+                +data.r * rate,
+                (h1 * Math.PI) / 180,
+                (h2 * Math.PI) / 180
+            );
             this.ctx.closePath();
             this.ctx.fillStyle = "rgba(252,222,147,0.54)";
             this.ctx.fill();
+
+            this.clearArcFun(6, 0, +data.n * rate, this.ctx);
         },
         clear() {
             this.ctx.clearRect(-250, -220, 500, 1000);
         },
+        clearArcFun(x, y, r, cxt) {
+            //(x,y)为要清除的圆的圆心，r为半径，cxt为context
+            var stepClear = 1; //别忘记这一步
+            clearArc(x, y, r);
+            function clearArc(x, y, radius) {
+                var calcWidth = radius - stepClear;
+                var calcHeight = Math.sqrt(
+                    radius * radius - calcWidth * calcWidth
+                );
+                var posX = x - calcWidth;
+                var posY = y - calcHeight;
+
+                var widthX = 2 * calcWidth;
+                var heightY = 2 * calcHeight;
+
+                if (stepClear <= radius) {
+                    cxt.clearRect(posX, posY, widthX, heightY);
+                    stepClear += 1;
+                    clearArc(x, y, radius);
+                }
+            }
+        },
     },
 
     mounted() {
         $(document).ready(() => {
-            this.ctx = document.getElementById("canvasSensorModel").getContext("2d");
-            this.ctxBg = document.getElementById("canvasSensorModelBg").getContext("2d");
+            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);

src/views/modelLibrary/components/canvasSensorModelA.vue

@@ -17,13 +17,14 @@ export default {
             ctx: null,
             ctxBg: null,
             imgBg: null,
+            rate: 70, // 换算比例
         };
     },
 
     props: {
         coordinate: {
             type: Object,
-            default: { r: 0, hl: 60, hr: 60 },
+            default: { r: 0, n: 0, hl: 60, hr: 60 },
         },
     },
 
@@ -35,21 +36,32 @@ export default {
 
     methods: {
         draw(data) {
-            if (data.r === "" || data.hl === "" || data.hr === "") return;
+            if (
+                data.r === "" ||
+                data.n === "" ||
+                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;
+            let rate = this.rate;
+
+            let hr1 = +data.hl;
+            let hr2 = +data.hr;
+            // if (hr1 > 180) hr1 = 180;
+            // if (hr2 > 180) hr2 = 180;
+
             //定义起点
-            this.ctx.moveTo(-40, 0);
+            this.ctx.moveTo(6, 0);
             this.ctx.arc(
-                -40,
+                6,
                 0,
-                data.r,
-                (hr1 * Math.PI) / 180,
-                (hr2 * Math.PI) / 180
+                +data.r * rate,
+                0.5 * Math.PI,
+                (hr1 / 180 + 0.5) * Math.PI
             );
             this.ctx.closePath();
             this.ctx.fillStyle = "rgba(252,222,147,0.54)";
@@ -57,20 +69,43 @@ export default {
 
             this.ctx.beginPath();
 
-            let hl1 = 90 - +data.hr / 2;
-            let hl2 = 90 + +data.hr / 2;
             //定义起点
-            this.ctx.moveTo(50, 0);
+            this.ctx.moveTo(6, 0);
             this.ctx.arc(
-                50,
+                6,
                 0,
-                data.r,
-                (hl1 * Math.PI) / 180,
-                (hl2 * Math.PI) / 180
+                +data.r * rate,
+                0.5 * Math.PI,
+                (0.5 - hr2 / 180) * Math.PI,
+                true
             );
             this.ctx.closePath();
             this.ctx.fillStyle = "rgba(252,222,147,0.54)";
             this.ctx.fill();
+
+            this.clearArcFun(6, 0, +data.n * rate, this.ctx);
+        },
+        clearArcFun(x, y, r, cxt) {
+            //(x,y)为要清除的圆的圆心，r为半径，cxt为context
+            var stepClear = 1; //别忘记这一步
+            clearArc(x, y, r);
+            function clearArc(x, y, radius) {
+                var calcWidth = radius - stepClear;
+                var calcHeight = Math.sqrt(
+                    radius * radius - calcWidth * calcWidth
+                );
+                var posX = x - calcWidth;
+                var posY = y - calcHeight;
+
+                var widthX = 2 * calcWidth;
+                var heightY = 2 * calcHeight;
+
+                if (stepClear <= radius) {
+                    cxt.clearRect(posX, posY, widthX, heightY);
+                    stepClear += 1;
+                    clearArc(x, y, radius);
+                }
+            }
         },
         clear() {
             this.ctx.clearRect(-250, -220, 500, 1000);

src/views/modelLibrary/components/canvasVehicleConfiguration.vue

@@ -19,6 +19,7 @@ export default {
             ctxBg: null,
             imgBg: null,
             imgIcon: null,
+            rate: 70, // 换算比例
         };
     },
 
@@ -37,74 +38,26 @@ export default {
         coordinate(val) {
             this.draw(val);
         },
-        modelImgSrc(val) {
+        modelImgSrc() {
             this.drawBg();
         },
     },
 
     methods: {
-        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();
-            // };
-            // console.log(ctx);
-            // ctx.save();
-            var img1 = new Image();
-            img.src = this.modelImgSrc;
-            img1.src = this.aSrc;
-            img1.onload = () => {
-                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();
-            //     // img1.src = this.aSrc;
-            //     // ctx.clearRect(-250,960,1000,500)
-            //     ctx.clearRect(-250,-40,500,1000)
-            //     ctx.drawImage(img1, -10, 510, 29, 41);
-            //     // ctx.restore();
-            // }, 2000);
-            // setTimeout((_) => {
-            //     ctx.clearRect(-250,-40,500,1000)
-            //     ctx.drawImage(img1, -180, 810, 29, 41);
-            // }, 3000);
-            // setTimeout((_) => {
-            //     ctx.save();
-            //     img1.src = this.aSrc;
-            //     ctx.drawImage(img, -60, -60, this.width, this.height);
-            //     ctx.drawImage(img1, 0, 0, 15, 20);
-            // }, 4000);
-        },
         draw(data) {
             if (data.x === "" || data.y === "" || data.h === "") return;
-            this.ctx.clearRect(-250, -40, 500, 1000);
-            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 rate = this.rate;
+            // 摄像头从自己左上角的原点开始绘制，需要移到自己的中心点
+            let x = +data.x * rate;
+            let y = +data.y * rate;
             let h1 = 90 - +data.h / 2;
             let h2 = 90 + +data.h / 2;
+
+            this.ctx.clearRect(-250, -40, 500, 1000);
+            this.ctx.drawImage(this.imgIcon, x - 6, y - 6, 20.5, 14.5);
+            this.ctx.beginPath();
+
             //定义起点
             this.ctx.moveTo(x, y);
             //以起点为圆心，画一个半径为100的圆弧

src/views/modelLibrary/components/formCamera.vue

@@ -37,6 +37,7 @@
                     maxlength="12"
                     v-autoTrim="{ obj: form, key: 'nearDistance' }"
                     v-model="form.nearDistance"
+                    @input="inputChange"
                 >
                 </el-input>
             </el-form-item>
@@ -289,10 +290,16 @@ export default {
             }
         },
         inputChange() {
-            if (this.form.farDistance === "" || this.form.fovH === "") return;
+            if (
+                this.form.farDistance === "" ||
+                this.form.nearDistance === "" ||
+                this.form.fovH === ""
+            )
+                return;
             this.$emit("inputChange", {
                 r: this.form.farDistance,
                 h: this.form.fovH,
+                n: this.form.nearDistance,
             });
         },
     },

src/views/modelLibrary/components/formLaserRadar.vue

@@ -37,6 +37,7 @@
                     maxlength="12"
                     v-autoTrim="{ obj: form, key: 'nearDistance' }"
                     v-model="form.nearDistance"
+                    @input="inputChange"
                 >
                 </el-input>
             </el-form-item>
@@ -337,10 +338,16 @@ export default {
             }
         },
         inputChange() {
-            if (this.form.farDistance === "" || this.form.fovH === "") return;
+            if (
+                this.form.farDistance === "" ||
+                this.form.nearDistance === "" ||
+                this.form.fovH === ""
+            )
+                return;
             this.$emit("inputChange", {
                 r: this.form.farDistance,
                 h: this.form.fovH,
+                n: this.form.nearDistance,
             });
         },
     },

src/views/modelLibrary/components/formPerfectSensor.vue

@@ -37,6 +37,7 @@
                     maxlength="12"
                     v-autoTrim="{ obj: form, key: 'nearDistance' }"
                     v-model="form.nearDistance"
+                    @input="inputChange"
                 >
                 </el-input>
             </el-form-item>
@@ -399,12 +400,14 @@ export default {
         inputChange() {
             if (
                 this.form.farDistance === "" ||
+                this.form.nearDistance === "" ||
                 this.form.fovHLeft === "" ||
                 this.form.fovHRight === ""
             )
                 return;
             this.$emit("inputChange", {
                 r: this.form.farDistance,
+                n: this.form.nearDistance,
                 hl: this.form.fovHLeft,
                 hr: this.form.fovHRight,
             });

src/views/modelLibrary/sensorModel.vue

@@ -129,8 +129,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的值
+            coordinate: { r: 0, h: 0, n: 0 }, // 存放传递给canvas的值
+            coordinateA: { r: 0, n: 0, hl: 0, hr: 0 }, // 存放传递给完美传感器canvas的值
         };
     },
 

src/views/modelLibrary/vehicleConfigurationDetail.vue

@@ -333,7 +333,6 @@ export default {
                 index: -1,
             },
             modelImgSrc: require("@/assets/common/image/others/carTopView.png"), // 车辆图片地址
-            // canDraw: false,
             width: 300,
             coordinate: { x: 0, y: 0 }, // 存放传递给canvas的值
         };
@@ -521,7 +520,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") {
@@ -554,12 +553,12 @@ export default {
         cancel() {
             this.$router.replace({ path: "/vehicleConfigurationList" });
         },
+        // 给canvas的外层容器赋值
         domHandle() {
             $(document).ready(() => {
                 this.width = $(
                     ".vehicleConfigurationDetailPanel .model"
                 ).outerWidth();
-                // this.canDraw = true;
             });
         },
         inputChange() {

src/views/workManagement/components/canvasProjectInfo.vue

@@ -19,6 +19,7 @@ export default {
             ctxBg: null,
             imgBg: null,
             imgIcon: null,
+            rate: 70, // 换算比例
         };
     },
 
@@ -39,35 +40,32 @@ export default {
     },
 
     watch: {
-        modelImgSrc(val) {
+        modelImgSrc() {
             this.drawBg();
         },
     },
 
     methods: {
         draw(data) {
+            let rate = this.rate;
+
             data.x = data.sensorX;
             data.y = data.sensorY;
             data.h = data.sensorH;
             if (data.x === "" || data.y === "" || data.h === "") return;
-            this.ctx.drawImage(
-                this.imgIcon,
-                data.sensorX,
-                data.sensorY,
-                20.5,
-                14.5
-            );
-            this.ctx.beginPath();
 
-            let x = +data.x + 6;
-            let y = +data.y + 12;
+            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.beginPath();
+
             //定义起点
             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();

src/views/workManagement/manualRunProjectDetail.vue

@@ -29,10 +29,16 @@
                     </el-input>
                 </el-form-item>
                 <el-form-item label="算法来源:" prop="algorithmType">
-                    <el-radio v-model="form.algorithmType" label="1"
+                    <el-radio
+                        v-model="form.algorithmType"
+                        label="1"
+                        @change="typeChange"
                         >私有导入</el-radio
                     >
-                    <el-radio v-model="form.algorithmType" label="3"
+                    <el-radio
+                        v-model="form.algorithmType"
+                        label="3"
+                        @change="typeChange"
                         >算法平台</el-radio
                     >
                 </el-form-item>
@@ -217,12 +223,12 @@ export default {
     computed: {},
 
     methods: {
-        async getLists() {
+        async getLists(dropDownType = "") {
             await this.$axios({
                 method: "post",
                 url: this.$api.workManagement.selectDropDownByType,
                 data: {
-                    dropDownType: "",
+                    dropDownType,
                     algorithmType: this.form.algorithmType,
                 },
             }).then((res) => {
@@ -235,12 +241,22 @@ export default {
                         } else if (item.type === "3") {
                             this.sceneList = item.dropDownList;
                         }
+                        // 空表示第一次进，有值表示在切换算法来源，需要清空选择算法的值
+                        if (dropDownType) {
+                            this.form.algorithm = "";
+                            this.$nextTick(() => {
+                                this.$refs.form.clearValidate("algorithm");
+                            });
+                        }
                     });
                 } else {
                     this.$message.error(res.message || "获取信息失败");
                 }
             });
         },
+        typeChange() {
+            this.getLists("1");
+        },
         async getMaxSimulationTime() {
             await this.$axios({
                 method: "post",
@@ -347,7 +363,7 @@ export default {
                     }
                 });
             }
-        }else {
+        } else {
             this.getLists();
             this.getMaxSimulationTime();
         }

vue.config.js

@@ -102,10 +102,10 @@ module.exports = {
             },
             '/simulation/resource/server': {
                 // target: 'http://10.15.12.73:7003', // 王志强
-                target: 'http://10.15.12.88:7003', // 王耀栋
+                // target: 'http://10.15.12.88:7003', // 王耀栋
                 // target: 'http://10.15.12.72:7003',  // 王晓峰
                 // target: 'http://10.15.12.87:7003',  // 赵艳
-                // target: 'http://10.15.12.70',  // windowstest
+                target: 'http://10.15.12.70',  // windowstest
                 // target: 'http://192.168.30.75',  // gq
                 // target: 'http://47.94.105.148',  // aliyun
                 changeOrigin: true,