项目详情的二维展示

src/views/modelLibrary/components/handleConfigList.vue

@@ -269,6 +269,11 @@ export default {
             },
             type: Object,
         },
+        // 是否需要点击有选中状态
+        needHighline: {
+            default: true,
+            type: Boolean,
+        },
     },
 
     computed: {
@@ -362,6 +367,7 @@ export default {
             done();
         },
         configHandle(type, index, isAdd = false) {
+            if(!this.needHighline) return;
             let curOne = {
                 name: type,
                 index,

src/views/workManagement/components/canvasProjectInfo.vue

@@ -0,0 +1,144 @@
+<template>
+    <div class="canvasProjectInfoPanel">
+        <canvas id="canvasProjectInfo" width="1000" height="500"></canvas>
+        <canvas id="canvasProjectInfoA" width="1000" height="500"></canvas>
+    </div>
+</template>
+
+<script>
+//import  from '';
+
+export default {
+    name: "canvasProjectInfo", //
+    components: {},
+    data() {
+        return {
+            // 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: {
+        configList: {
+            type: Object,
+            default: {
+                camera: [],
+                ogt: [],
+                lidar: [],
+                gps: [],
+            },
+        },
+        modelImgSrc: {
+            type: String,
+            default: require("@/assets/common/image/others/carTopView.png"),
+        },
+    },
+
+    watch: {
+        modelImgSrc(val) {
+            this.drawBg();
+        },
+    },
+
+    methods: {
+        draw(data) {
+            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 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();
+        },
+        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(() => {
+            this.ctx = document
+                .getElementById("canvasProjectInfo")
+                .getContext("2d");
+            this.ctxBg = document
+                .getElementById("canvasProjectInfoA")
+                .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 = () => {
+                setTimeout(() => {
+                    this.configList.camera.forEach((i) => {
+                        this.draw(i);
+                    });
+                    this.configList.ogt.forEach((i) => {
+                        this.draw(i);
+                    });
+                    this.configList.lidar.forEach((i) => {
+                        this.draw(i);
+                    });
+                    this.configList.gps.forEach((i) => {
+                        this.draw(i);
+                    });
+                }, 1000);
+            };
+        });
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.canvasProjectInfoPanel {
+    position: relative;
+
+    canvas {
+        width: 100%;
+    }
+
+    #canvasProjectInfo {
+        position: relative;
+        z-index: 1;
+    }
+
+    #canvasProjectInfoA {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 0;
+    }
+}
+</style>

src/views/workManagement/projectInfo.vue

@@ -99,13 +99,19 @@
                             :curOne="curOne"
                             :configList="configList"
                             @curItem="curItem"
+                            :needHighline="false"
                         ></handle-config-list>
                     </div>
-                    <div>
-                        <img
+                    <div class="canvasBox">
+                        <!-- <img
                             src="../../assets/common/image/others/2.png"
                             width="100%"
-                        />
+                        /> -->
+                        <canvas-sensor
+                            v-if="modelImgSrc"
+                            :modelImgSrc="modelImgSrc"
+                            :configList="configList"
+                        ></canvas-sensor>
                     </div>
                 </div>
             </div>
@@ -118,9 +124,11 @@
             <div class="box">
                 <div class="boxContentA">
                     <div class="chart">
+                        <div class="peiTitle">任务运行状态统计:</div>
                         <pie-chart id="pieX"></pie-chart>
                     </div>
                     <div class="chart">
+                        <div class="peiTitle">结果动态统计:</div>
                         <pie-chart id="pieZ"></pie-chart>
                     </div>
                 </div>
@@ -156,10 +164,12 @@
 import handleConfigList from "../modelLibrary/components/handleConfigList.vue";
 import tableList from "@/components/grid/TableList";
 import pieChart from "@/components/echarts/pieChart";
+import canvasSensor from "./components/canvasProjectInfo.vue";
+import { mapState } from "vuex";
 
 export default {
     name: "projectInfo", // 项目详情
-    components: { handleConfigList, tableList, pieChart },
+    components: { handleConfigList, tableList, pieChart, canvasSensor },
     data() {
         return {
             id: "",
@@ -226,10 +236,14 @@ export default {
                 index: -1,
             },
             downImgSrc: require("@/assets/common/image/others/noDoc.png"),
+            // modelImgSrc: require("@/assets/common/image/others/carTopView.png"), // 车辆图片地址
+            modelImgSrc: "", // 车辆图片地址
         };
     },
 
-    computed: {},
+    computed: {
+        ...mapState(["fileHost", "fileUrl"]),
+    },
 
     methods: {
         viewRow() {
@@ -246,6 +260,18 @@ export default {
         curItem(item) {
             this.curOne = item;
         },
+        getImgUrl(addr) {
+            let url = "";
+            if (process.env.VUE_APP_IS_DEV == "true") {
+                url = this.fileHost + this.fileUrl;
+            } else {
+                url = this.fileUrl;
+            }
+
+            let token = localStorage.getItem("Authorization").split(" ")[1];
+            let src = `${url}?objectName=${addr}&access_token=${token}`;
+            return src;
+        },
     },
 
     mounted() {
@@ -267,6 +293,11 @@ export default {
                         this.configList.ogt = res.info.sensorOgtList || [];
                         this.configList.lidar = res.info.sensorLidarList || [];
                         this.configList.gps = res.info.sensorGpsList || [];
+
+                        this.modelImgSrc = this.getImgUrl(
+                            res.info.vehicleImage
+                        );
+
                         if (this.info.nowRunState === "30") {
                             this.downImgSrc = require("@/assets/common/image/others/hasDoc.png");
                         } else {
@@ -386,9 +417,9 @@ export default {
             justify-content: space-around;
             padding-top: 30px;
 
-            // .list {
-            //     width: 300px;
-            // }
+            .canvasBox {
+                flex: 1;
+            }
         }
     }
 
@@ -402,6 +433,13 @@ export default {
         .chart {
             width: 50%;
             height: calc(20vh);
+
+            .peiTitle {
+                padding: 0 0 30px;
+                text-align: center;
+                font-size: 16px;
+                font-weight: bold;
+            }
         }
     }
 }

vue.config.js

@@ -100,8 +100,8 @@ module.exports = {
                 }
             },
             '/simulation/resource/server': {
-                target: 'http://10.15.12.73:7003', // 王志强
-                // target: 'http://10.15.12.88:7003',  // 王耀栋
+                // target: 'http://10.15.12.73: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