优化

src/views/home/components/drawpic.vue

@@ -163,7 +163,7 @@ export default {
     if (isProduction) {
       // 使用服务器IP或域名作为图片地址
       this.hostName = window.location.origin;
-      console.log(this.hostName)
+      console.log(this.hostName);
       console.log("aaaaaaaaaaaa");
     } else {
       // 使用代理的 target 作为图片地址（开发环境）
@@ -184,6 +184,7 @@ export default {
         .then((res) => {
           console.log(res);
           this.markOptions = res.data;
+          this.typeMap = res.data;
         })
         .catch((err) => {});
     },
@@ -429,6 +430,44 @@ export default {
     },
     // 画初始数据
     drawOldRect() {
+      var colors = {
+        0: "rgb(255, 0, 0)", // 挖掘机 - 红色
+        1: "rgb(0, 128, 0)", // 塔吊 - 深绿色
+        2: "rgb(0, 0, 255)", // 吊车 - 蓝色
+        3: "rgb(255, 165, 0)", // 水泥泵车 - 橙色
+        4: "rgb(255, 0, 255)", // 山火 - 紫色
+        5: "rgb(0, 0, 128)", // 烟雾 - 灰色
+        6: "rgb(0, 255, 255)", // 推土机 - 青色
+        7: "rgb(173, 216, 230)", // 翻斗车 - 浅蓝色
+        8: "rgb(255, 128, 0)", // 异物 - 橙色（与水泥泵车不同）
+        9: "rgb(220, 220, 220)", // 防尘网 - 浅灰色
+        10: "rgb(128, 0, 128)", // 压路机 - 紫色（与山火不同）
+        11: "rgb(255, 255, 0)", // 搅拌车 - 黄色
+        12: "rgb(100, 149, 237)", // 桩机 - 淡蓝色
+        13: "rgb(255, 192, 203)", // 围挡 - 浅粉色
+        14: "rgb(128, 128, 0)", // 水马 - 黄绿色
+        15: "rgb(240, 128, 128)", // 安全帽 - 浅红色
+        16: "rgb(255, 69, 0)", // 井盖缺失 - 橙色（与翻斗车、水泥泵车不同）
+      };
+      var bgcolors = {
+        0: "rgb(255, 0, 0,0.2)", // 挖掘机 - 红色
+        1: "rgb(0, 128, 0,0.2)", // 塔吊 - 深绿色
+        2: "rgb(0, 0, 255,0.2)", // 吊车 - 蓝色
+        3: "rgb(255, 165, 0,0.2)", // 水泥泵车 - 橙色
+        4: "rgb(255, 0, 255,0.2)", // 山火 - 紫色
+        5: "rgb(0, 0, 128,0.2)", // 烟雾 - 灰色
+        6: "rgb(0, 255, 255,0.2)", // 推土机 - 青色
+        7: "rgb(173, 216, 230,0.2)", // 翻斗车 - 浅蓝色
+        8: "rgb(255, 128, 0,0.2)", // 异物 - 橙色（与水泥泵车不同）
+        9: "rgb(220, 220, 220,0.2)", // 防尘网 - 浅灰色
+        10: "rgb(128, 0, 128,0.2)", // 压路机 - 紫色（与山火不同）
+        11: "rgb(255, 255, 0,0.2)", // 搅拌车 - 黄色
+        12: "rgb(100, 149, 237,0.2)", // 桩机 - 淡蓝色
+        13: "rgb(255, 192, 203,0.2)", // 围挡 - 浅粉色
+        14: "rgb(128, 128, 0,0.2)", // 水马 - 黄绿色
+        15: "rgb(240, 128, 128,0.2)", // 安全帽 - 浅红色
+        16: "rgb(255, 69, 0,0.2)", // 井盖缺失 - 橙色（与翻斗车、水泥泵车不同）
+      };
       let canvasDom = document.getElementById("canvasDom");
       let ctx2d = canvasDom.getContext("2d");
       const canvasHeight = canvasDom.width;
@@ -439,9 +478,18 @@ export default {
         if (this.recArrs[i].w > 2 && this.recArrs[i].h > 2) {
           ctx2d.beginPath();
           ctx2d.lineWidth = 2; // 矩形框的线条宽度
-          ctx2d.strokeStyle = "rgb(255, 0, 0)"; // 矩形框的线条颜色
-          // 设置填充样式
-          ctx2d.fillStyle = "rgba(22, 158, 140, 0.4)"; // 蓝色，半透明
+
+          // 根据type设置颜色
+          var typeColor = colors[this.recArrs[i].type] || "rgb(255, 0, 0)";
+          var bgcolors =
+            bgcolors[this.recArrs[i].type] || "rgba(22, 158, 140, 0.2)";
+          console.log(typeColor);
+          ctx2d.strokeStyle = typeColor; // 矩形框的线条颜色
+          ctx2d.fillStyle = bgcolors; // 矩形框的填充颜色（与线条颜色相同）
+
+          // ctx2d.strokeStyle = "rgb(255, 0, 0)"; // 矩形框的线条颜色
+          // // 设置填充样式
+          // ctx2d.fillStyle = "rgba(22, 158, 140, 0.4)"; // 蓝色，半透明
 
           ctx2d.strokeRect(
             this.recArrs[i].x,
@@ -457,9 +505,10 @@ export default {
           ); // 填充矩形
           // 如果有文本信息，填充文本信息
           if (this.recArrs[i].text) {
-            ctx2d.font = "100 18px 微软雅黑";
+            ctx2d.font = "100 13px 微软雅黑";
             ctx2d.lineWidth = 1;
-            ctx2d.strokeStyle = "rgb(255,0,0)";
+            //ctx2d.strokeStyle = "rgb(255,0,0)";
+            ctx2d.strokeStyle = colors[this.recArrs[i].type] || "rgb(255,0,0)";
             ctx2d.strokeText(
               this.recArrs[i].text,
               this.recArrs[i].x +
@@ -878,7 +927,7 @@ export default {
       img {
         position: absolute;
         max-width: 100%;
-        max-height: calc(100% - 10px);
+        // max-height: calc(100% - 10px);
         cursor: move;
         -moz-user-select: none; /*火狐*/
         -webkit-user-select: none; /*webkit浏览器*/