修改出片逻辑

wuyouming666

2024-05-14 1eadcf2fe21a211ba361b3cdb86a79f34b4b0479

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

@@ -1,9 +1,8 @@
<template>
  <div class="glass-rack">
    <div >
    <div>
      <svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
        <g stroke="null" id="Layer_1">
          <!-- 使用 v-for 循环渲染数据 -->
          <g v-for="(rack, index) in racks" :key="index">
            <rect 
              :x="rack.x" 
@@ -33,19 +32,20 @@

<script setup>
import Swal from 'sweetalert2'
import request from "@/utils/request";

const racks = [
// 初始化数据
let 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) {
  if (index === 0) {
    return rack.x;
  } else if (index === 2 || index === 3) {
  } else if (index === 1) {
    return rack.x + rack.width - item.width;
  } else {
    return rack.x + (rack.width - item.width) / 2;
@@ -53,21 +53,51 @@
};

const calculateItemYPosition = (rack, item, index) => {
  if (index === 0 || index === 1) {
  if (index === 0) {
    return rack.y + (rack.height - item.height) / 2;
  } else if (index === 2 || index === 3) {
  } else if (index === 1) {
    return rack.y + (rack.height - item.height) / 2;
  } else {
    return rack.y + rack.height - item.height;
  }
};

// 获取数据并更新 racks 数组
const fetchFlowCardId = async () => {
  try {
    const response = await request.get('unLoadGlass/downWorkStation/getwo');
    if (response.code === 200) {
      response.data.forEach((itemData, index) => {
        if (index < racks.length) {
          const rack = racks[index];
          const newItem = {
            content: itemData.item.content,
            fillColor: itemData.item.fillColor,
            width: itemData.item.width / 10000,
            height: itemData.item.height / 10000
          };
          // 更新 racks 数组
          Vue.set(racks, index, { ...rack, item: newItem });
        }
      });
    } else {
      ElMessage.error(response.msg);
    }
  } catch (error) {
    console.error(error);
  }
};

// 获取数据并更新 racks 数组
fetchFlowCardId();

// 显示自定义警报
const showCustomAlert = (content) => {
  var str="架号   :      111\n" +
  var str = "架号   :      111\n" +
    "长     :      111\n" +
    "宽     :      111\n" +
    "厚     :      111\n"+
    "玻璃ID :      111\n"+
    "厚     :      111\n" +
    "玻璃ID :      111\n" +
    "膜系   :      111\n";

  Swal.fire({
@@ -79,11 +109,11 @@
  });
};

// 显示元素信息
const showRectInfo = (rectInfo) => {
  const content = rectInfo.item.content;
  showCustomAlert(content);
};

</script>

<style scoped>
@@ -106,4 +136,4 @@
  padding: 10px;
  font-size: 14px;
}
</style>
</style>