增加工位显示方法

wuyouming666

2024-04-24 ee04d1ab881479ae30c8d5600d29ac56b70f751e

 UI-Project/src/views/UnLoadGlass/Landingindication.vue

@@ -31,42 +31,38 @@
  </div>
</template>

<script>
<script setup>
import Swal from 'sweetalert2'
export default {
  data() {
    return {
      racks: [

const racks = [
        { x: 50, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 90, width: 10, fillColor: 'yellow', content: 'NG123456' } },
        { x: 50, y: 270, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 20, width: 10, fillColor: 'yellow', content: 'NG1234567' } },
        { x: 280, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 30, width: 20, fillColor: 'yellow', content: 'NG12345678' } },
        { x: 280, y: 270, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 35, width: 23, fillColor: 'yellow', content: 'NG123456910' } },
        { x: 140, y: 420, height: 60, width: 110, fillColor: '#6a6da9', item: { height: 30, width: 100, fillColor: 'yellow', content: 'NG1234561454' } }
      ]
];

const calculateItemXPosition = (rack, item, index) => {
  if (index === 0 || index === 1) {
    return rack.x;
  } else if (index === 2 || index === 3) {
    return rack.x + rack.width - item.width;
  } else {
    return rack.x + (rack.width - item.width) / 2;
  }
    };
  },
  methods: {
    // 计算内部物品的 x 坐标位置
    calculateItemXPosition(rack, item, index) {
      if (index === 0 || index === 1) {  // 如果是第一或第二个物品
        return rack.x;  // 返回左边界 x 坐标
      } else if (index === 2 || index === 3) {  // 如果是第三或第四个物品
        return rack.x + rack.width - item.width;  // 返回右边界 x 坐标

const calculateItemYPosition = (rack, item, index) => {
  if (index === 0 || index === 1) {
    return rack.y + (rack.height - item.height) / 2;
  } else if (index === 2 || index === 3) {
    return rack.y + (rack.height - item.height) / 2;
      } else {
        return rack.x + (rack.width - item.width) / 2;  // 返回水平居中的 x 坐标
    return rack.y + rack.height - item.height;
      }
    },
    // 计算内部物品的 y 坐标位置
    calculateItemYPosition(rack, item, index) {
      if (index === 0 || index === 1) {  // 如果是第一或第二个物品
        return rack.y + (rack.height - item.height) / 2;  // 返回垂直居中的 y 坐标
      } else if (index === 2 || index === 3) {  // 如果是第三或第四个物品
        return rack.y + (rack.height - item.height) / 2;  // 返回垂直居中的 y 坐标
      } else {
        return rack.y + rack.height - item.height;  // 返回底部对齐的 y 坐标
      }
    },
    showCustomAlert(content) {
};

const showCustomAlert = (content) => {
      var str="架号   :      111\n" +
        "长     :      111\n" +
        "宽     :      111\n" +
@@ -81,16 +77,13 @@
    popup: 'format-pre'
  }
});

  },
    showRectInfo( rectInfo) {
  const content = rectInfo.item.content;
  this.$nextTick(() => {
    this.showCustomAlert(content);
  });
},
  }
};

const showRectInfo = (rectInfo) => {
  const content = rectInfo.item.content;
  showCustomAlert(content);
};

</script>

<style scoped>
@@ -98,7 +91,6 @@
  margin-left: 20px;
  width: 500px;
  margin-top: 10px;
  /* background-color: antiquewhite; */
}
.rack-rect:hover {
  cursor: pointer;
@@ -114,5 +106,4 @@
  padding: 10px;
  font-size: 14px;
}

</style>