作业票模块作业详情锁定站机柜显示大小调整

src/views/mes/job/jobm/Mapdata.vue

@@ -1,22 +1,20 @@
 <template>
   <div class="mapdata">
-    <div id="container" ref="container" style="width:300px"></div>
-
+    <div id="container" ref="container" style="width: 300px"></div>
   </div>
-
 </template>
 
 <script>
-import Konva from 'konva'
-import { getLotoMapInfo, getLotoInfo } from '@/api/mes/lotoStation/lotoStation'
-import { getTechnologyInfo } from '@/api/system/machinery'
+import Konva from "konva";
+import { getLotoMapInfo, getLotoInfo } from "@/api/mes/lotoStation/lotoStation";
+import { getTechnologyInfo } from "@/api/system/machinery";
 export default {
-  name: 'KonvaExample',
+  name: "KonvaExample",
   props: {
     machineryId: {
       type: String,
-      default: ''
-    }
+      default: "",
+    },
   },
   data() {
     return {
@@ -28,74 +26,72 @@ export default {
       texts: [], // 白色text合集
       redrects: [], // 红色rect合集
       redtexts: [], // 白色text合集
-      value: '',
-      form: {},//拿到单个数据
-      orignData: null,//原始数据
-      pointIdList: [],//选中的隔离点
-      selectPoints: []//回显之前选中的隔离点
-    }
+      value: "",
+      form: {}, //拿到单个数据
+      orignData: null, //原始数据
+      pointIdList: [], //选中的隔离点
+      selectPoints: [], //回显之前选中的隔离点
+    };
+  },
+  watch: {
+    machineryId: {
+      handler(newValue) {
+        if (newValue) {
+          console.log(this.machineryId, "Mapdata拿到的父组件machineryId");
+          this.getLoToInfo();
+        }
+      },
+      immediate: true,
+    },
   },
- watch: {
-   "machineryId":{
-     handler(newValue){
-       if(newValue){
-         console.log(this.machineryId, 'Mapdata拿到的父组件machineryId')
-         this.getLoToInfo()
-       }
-     },
-     immediate: true
-   }
- },
   mounted() {
     this.$nextTick(() => {
-      if(this.machineryId){
-        this.getLoToInfo()
-        const machineryId = this.machineryId
-        console.log(machineryId,'Mapdata拿到的父组件传递数据')
+      if (this.machineryId) {
+        this.getLoToInfo();
+        const machineryId = this.machineryId;
+        console.log(machineryId, "Mapdata拿到的父组件传递数据");
       }
-    })
+    });
   },
 
   methods: {
     getLoToInfo() {
-      const machineryId = this.machineryId
+      const machineryId = this.machineryId;
       getTechnologyInfo(machineryId).then((response) => {
-        const lotoId = response.data.lotoId
-        const sopId = ''
-        const ticketId = ''
+        const lotoId = response.data.lotoId;
+        const sopId = "";
+        const ticketId = "";
         getLotoInfo(lotoId).then((response) => {
-          console.log(response, '电柜信息')
-          this.form = response.data
-        })
-        getLotoMapInfo(lotoId, sopId, ticketId).then(response => {
-          console.log(response, '电柜预览接口调用')
-          this.form.map = response.data
+          console.log(response, "电柜信息");
+          this.form = response.data;
+        });
+        getLotoMapInfo(lotoId, sopId, ticketId).then((response) => {
+          console.log(response, "电柜预览接口调用");
+          this.form.map = response.data;
 
           if (response.data) {
             try {
-              this.value = JSON.stringify(response.data, null, 4)
-              this.orignData = this.value
-            } catch (err) {
-            }
+              this.value = JSON.stringify(response.data, null, 4);
+              this.orignData = this.value;
+            } catch (err) {}
           }
-          this.initKonva()
-        })
+          this.initKonva();
+        });
       });
 
       //   设备工艺详情
-      getTechnologyInfo(this.machineryId).then(response => {
-        console.log(response, '设备/工艺详情')
-        this.selectPoints = response.data.pointIdList
-      })
+      getTechnologyInfo(this.machineryId).then((response) => {
+        console.log(response, "设备/工艺详情");
+        this.selectPoints = response.data.pointIdList;
+      });
     },
 
-
     initKonva() {
       // 创建舞台
       this.stage = new Konva.Stage({
         container: this.$refs.container, // 容器元素
         width: 300,
-        height: 400
+        height: 410,
       });
 
       // 创建底图图层
@@ -103,15 +99,15 @@ export default {
 
       // 创建底图
       const bgImage = new Image();
-      bgImage.src = require('@/assets/images/table.png');
+      bgImage.src = require("@/assets/images/table.png");
       bgImage.onload = () => {
         const knovaImage = new Konva.Image({
           x: 50,
-          y: -15,
+          y: -25,
           image: bgImage,
           width: 220,
-          height: 350,
-          draggable: false
+          height: 410,
+          draggable: false,
         });
         this.bgLayer.add(knovaImage);
         this.bgLayer.draw(); // 绘制底图图层
@@ -129,10 +125,8 @@ export default {
       // 禁止舞台拖拽
       this.stage.draggable(false);
 
-
-
       // 渲染数据
-      const imageSrc = require('@/assets/images/localSetIcon.jpg'); // 图片路径
+      const imageSrc = require("@/assets/images/localSetIcon.jpg"); // 图片路径
       this.renderGrid(imageSrc, 6, 3, 450, 100, 120, 100, 50, 50, 60, 25);
     },
 
@@ -151,23 +145,23 @@ export default {
       // **计算柜子的布局范围**
       const cabinetWidth = this.stage.width(); // 柜子的宽度
       const cabinetHeight = this.stage.height(); // 柜子的高度
-      const cols = Math.max(...positions.map(p => p.col)) + 1; // 根据数据动态计算总列数
-      const rows = Math.max(...positions.map(p => p.row)) + 1; // 根据数据动态计算总行数
+      const cols = Math.max(...positions.map((p) => p.col)) + 1; // 根据数据动态计算总列数
+      const rows = Math.max(...positions.map((p) => p.row)) + 1; // 根据数据动态计算总行数
       // 调整横向和纵向间距
-      const horizontalSpacingFactor = 1; // 横向间距放大倍数
-      const verticalSpacingFactor = 0.7; // 纵向间距缩小倍数
+      const horizontalSpacingFactor = 1.032; // 横向间距放大倍数
+      const verticalSpacingFactor = 0.53; // 纵向间距缩小倍数
 
       const cellWidth = (cabinetWidth / cols) * horizontalSpacingFactor; // 调整横向间距
       const cellHeight = (cabinetHeight / rows) * verticalSpacingFactor; // 调整纵向间距
 
       // 遍历点位，按行列布局计算位置
-      positions.forEach(pos => {
+      positions.forEach((pos) => {
         const col = pos.col; // 当前点位的列
         const row = pos.row; // 当前点位的行
 
         // 计算点位的实际位置，确保它们位于柜子显示区域内
-        const x = col * cellWidth-100;
-        const y = row * cellHeight-30;
+        const x = col * cellWidth - 100;
+        const y = row * cellHeight - 30;
 
         const labelText = pos.pointName; // 对应的文字
 
@@ -175,11 +169,11 @@ export default {
         point.src = pos.pointIcon;
         point.onload = () => {
           const knovaImage = new Konva.Image({
-            x: x +4, // 适当的偏移确保点位不重叠
-            y: y +4, // 适当的偏移确保点位不重叠
+            x: x + 6, // 适当的偏移确保点位不重叠
+            y: y + 6, // 适当的偏移确保点位不重叠
             image: point,
-            width: 34,
-            height: 34,
+            width: 19,
+            height: 18,
             draggable: false,
           });
 
@@ -187,12 +181,12 @@ export default {
           const bgrect = new Konva.Rect({
             x: x,
             y: y,
-            width: 40,
-            height: 55,
+            width: 30,
+            height: 36,
             cornerRadius: 5,
-            stroke: 'white',
+            stroke: "white",
             strokeWidth: 2,
-            fill: 'white',
+            fill: "white",
           });
           this.layer.add(bgrect);
           this.bgrects[labelText] = bgrect;
@@ -201,12 +195,12 @@ export default {
           const rect = new Konva.Rect({
             x: x + 4,
             y: y + 4,
-            width: 40 - 8,
-            height: 55 - 8,
+            width: 30 - 8,
+            height: 36 - 8,
             cornerRadius: 5,
-            stroke: 'red',
+            stroke: "red",
             strokeWidth: 2,
-            fill: 'white',
+            fill: "white",
           });
           this.layer.add(rect);
           this.rects[labelText] = rect;
@@ -216,12 +210,12 @@ export default {
 
           // **绘制点位的文字**（确保与背景矩形不重叠）
           const text = new Konva.Text({
-            x: x + 7, // 适当的偏移，确保文字不与背景矩形重叠
-            y: y + 55 - 20, // 文字放在底部
-            fontSize: 13,
+            x: x + 8, // 适当的偏移，确保文字不与背景矩形重叠
+            y: y + 43 - 20, // 文字放在底部
+            fontSize: 8,
             text: labelText,
-            fontFamily: 'Calibri',
-            fill: 'red',
+            fontFamily: "Calibri",
+            fill: "red",
           });
           this.layer.add(text);
           this.texts[labelText] = text;
@@ -230,10 +224,10 @@ export default {
           const redrect = new Konva.Rect({
             x: x,
             y: y,
-            width: 50,
-            height: 55,
+            width: 30,
+            height: 36,
             cornerRadius: 5,
-            fill: 'rgba(97, 97, 97, 0.5)', // 半透明灰色
+            fill: "rgba(97, 97, 97, 0.5)", // 半透明灰色
             visible: false, // 初始状态隐藏
             listening: false,
           });
@@ -242,13 +236,13 @@ export default {
 
           // **对号文字（表示选中）**
           const redtext = new Konva.Text({
-            x: x + 40 / 2 - 5, // 水平居中
-            y: y + 55 / 2 - 5, // 垂直居中
+            x: x + 30 / 2 - 5, // 水平居中
+            y: y + 36 / 2 - 5, // 垂直居中
             fontSize: 13,
-            text: '✔',
-            fontFamily: 'Arial',
-            fill: 'white',
-            align: 'center',
+            text: "✔",
+            fontFamily: "Arial",
+            fill: "white",
+            align: "center",
             visible: false, // 初始隐藏状态
             listening: false,
           });
@@ -256,7 +250,10 @@ export default {
           this.redtexts[labelText] = redtext;
 
           // 如果初始化时有选中的点位
-          if (Array.isArray(this.selectPoints) && this.selectPoints.length > 0) {
+          if (
+            Array.isArray(this.selectPoints) &&
+            this.selectPoints.length > 0
+          ) {
             if (this.selectPoints.includes(pos.pointId)) {
               // 设置选中状态
               this.redrects[labelText].visible(true);
@@ -268,12 +265,9 @@ export default {
           this.layer.draw(); // 刷新画布
         };
       });
-    }
-
-
-
-  }
-}
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">