评分规则可上传代码

src/views/modelLibrary/components/canvasSensor.vue

@@ -0,0 +1,136 @@
+<template>
+    <div class="canvasPanel">
+        <canvas id="canvas" width="1000" height="500"></canvas>
+        <canvas id="canvasA" width="1000" height="500"></canvas>
+    </div>
+</template>
+
+<script>
+//import  from '';
+
+export default {
+    name: "canvasSensor", //
+    components: {},
+    data() {
+        return {
+            modelImgSrc: require("@/assets/common/image/others/carTopView.png"),
+            aSrc: require("@/assets/common/image/others/sensorIcon.png"),
+        };
+    },
+
+    // props: {
+    //     width: {
+    //         type: Number,
+    //         default: 300,
+    //     },
+    //     height: {
+    //         type: Number,
+    //         default: 150,
+    //     },
+    //     x: {
+    //         type: Number,
+    //         default: 0,
+    //     },
+    //     y: {
+    //         type: Number,
+    //         default: 0,
+    //     },
+    // },
+
+    // computed: {
+    //     scale() {
+    //         return this.width / 1000;
+    //     },
+    // },
+
+    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 = "";
+
+                // 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);
+            };
+            
+            // setTimeout((_) => {
+            //     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();
+            // }, 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);
+            // }, 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);
+        },
+    },
+
+    mounted() {
+        $(document).ready(() => {
+            // console.log(12678);
+            // $("#canvas").css({
+            //     width: $(
+            //         ".vehicleConfigurationDetailPanel .model"
+            //     ).outerWidth(),
+            //     height:
+            //         $(".vehicleConfigurationDetailPanel .model").outerWidth() /
+            //         2,
+            // });
+            this.draw();
+        });
+    },
+};
+</script>
+
+<style lang='less' scoped>
+.canvasPanel {
+    position: relative;
+
+    canvas {
+        width: 100%;
+    }
+
+    #canvas {
+        position: relative;
+        z-index: 1;
+    }
+
+    #canvasA {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 0;
+    }
+}
+</style>

src/views/modelLibrary/sensorModel.vue

@@ -213,6 +213,13 @@ export default {
                 if (res.code == 200) {
                     this.$message.success("删除成功");
                     this.$refs.modelList.getList();
+                    if (
+                        this.$refs[`form${this.subPageActiveName}`].form.id &&
+                        id ===
+                            this.$refs[`form${this.subPageActiveName}`].form.id
+                    ) {
+                        this.addOne();
+                    }
                 } else {
                     this.$message.error(res.message || "删除失败");
                 }

src/views/modelLibrary/vehicleConfigurationDetail.vue

@@ -71,8 +71,12 @@
                 ></handle-config-list>
             </div>
 
-            <div class="model">
+            <div
+                class="model"
+                v-bind:style="{ width: width + 'px', height: width / 2 + 'px' }"
+            >
                 <img :src="modelImgSrc" width="100%" />
+                <!-- <canvas-sensor></canvas-sensor> -->
             </div>
 
             <div class="conditions">
@@ -180,11 +184,12 @@
 
 <script>
 import handleConfigList from "./components/handleConfigList.vue";
+import canvasSensor from "./components/canvasSensor.vue";
 import { mapState } from "vuex";
 
 export default {
     name: "vehicleConfigurationDetail", // 车辆配置详情
-    components: { handleConfigList },
+    components: { handleConfigList, canvasSensor },
     data() {
         let validateNum = (rule, value, callback) => {
             // !/^(-?\d+)(\.\d{1,2})?$/.test(value) &&
@@ -295,6 +300,8 @@ export default {
                 index: -1,
             },
             modelImgSrc: require("@/assets/common/image/others/carTopView.png"),
+            canDraw: false,
+            width: 300,
         };
     },
 
@@ -443,9 +450,24 @@ export default {
         cancel() {
             this.$router.replace({ path: "/vehicleConfigurationList" });
         },
+        domHandle() {
+            $(document).ready(() => {
+                this.width = $(
+                    ".vehicleConfigurationDetailPanel .model"
+                ).outerWidth();
+                this.canDraw = true;
+                console.log(
+                    $(".vehicleConfigurationDetailPanel .model").width()
+                );
+                // console.log($('.vehicleConfigurationDetailPanel .model').outerWidth());
+            });
+        },
     },
 
     mounted() {
+        setTimeout(() => {
+            this.domHandle();
+        }, 0);
         this.getMyVehicleList();
         if (this.$route.query.id) {
             let id = "";
@@ -463,7 +485,9 @@ export default {
                     if (res.code == 200 && res.info) {
                         this.form = res.info;
                         this.configList = res.info.configSensors;
-                        this.modelImgSrc = this.getImgUrl(res.info.vehicleImage);
+                        this.modelImgSrc = this.getImgUrl(
+                            res.info.vehicleImage
+                        );
                         this.validateSensorsList();
                     } else {
                         this.$message.error(res.message || "获取信息失败");

src/views/modelLibrary/vehicleModel.vue

@@ -292,7 +292,7 @@
                 </div>
 
                 <div class="titlePanel">
-                    <div class="titlePanelBor">3D视图</div>
+                    <div class="titlePanelBor">视图</div>
                 </div>
                 <div class="modelBox">
                     <img :src="modelImgSrc" width="100%" />
@@ -510,6 +510,7 @@ export default {
             this.modelImgSrc = "";
         },
         delOne(id) {
+            // console.log(id,this.form.id);return
             this.$axios({
                 method: "post",
                 url: this.$api.modelLibrary.delVehicleById,
@@ -520,6 +521,9 @@ export default {
                 if (res.code == 200) {
                     this.$message.success("删除成功");
                     this.$refs.modelList.getList();
+                    if (this.form.id && id === this.form.id) {
+                        this.addOne();
+                    }
                 } else {
                     this.$message.error(res.message || "删除失败");
                 }

src/views/sceneLibrary/gradingRule.vue

@@ -31,7 +31,7 @@
                     type="textarea"
                     placeholder="请输入"
                     :autosize="{ minRows: 8, maxRows: 8 }"
-                    maxlength="500"
+                    maxlength="1000"
                 ></el-input>
             </el-form-item>