前端工位显示

wuyouming666

2024-05-15 f44c449c2f5ec5439d7df4145a28bc878018ba2b

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

@@ -4,7 +4,7 @@
      <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">
          <g v-for="(rack, index) in racks" :key="index"   :data="tableData">
            <rect 
              :x="rack.x" 
              :y="rack.y" 
@@ -31,17 +31,22 @@
  </div>
</template>

<script setup>
<script  setup>
import { ref, watchEffect } from 'vue';
import Swal from 'sweetalert2'
import request from "@/utils/request";
const racks = [
const racks = ref([
  { x: 50, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 90, width: 10, fillColor: 'yellow', content: 'NG123456' } },
 
  { x: 280, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 30, width: 20, fillColor: 'yellow', content: 'NG12345678' } },
  { x: 280, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 90, width: 10, fillColor: 'yellow', content: 'NG12345678' } },
 
  { x: 140, y: 420, height: 60, width: 110, fillColor: '#6a6da9', item: { height: 30, width: 100, fillColor: 'yellow', content: 'NG1234561454' } }
  { x: 140, y: 420, height: 60, width: 110, fillColor: '#6a6da9', item: { height: 20, width: 100, fillColor: 'yellow', content: 'NG1234561454' } }
  
];
]);

watchEffect(() => {
  // 触发数据变化时重新渲染
});


const calculateItemXPosition = (rack, item, index) => {
@@ -68,25 +73,35 @@
const fetchFlowCardId = async () => {
  try {
    const response = await request.get('unLoadGlass/downWorkStation/getwo');
    console.log(response)
    
    if (response.code === 200) {
      console.log(response.data);
      console.log(response); 
      // 遍历响应数据并替换racks数组中的item属性
      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
          };
          rack.item == newItem;
         
        }
      });
  if (index < racks.value.length) {
    const rack = racks.value[index];
    const newItem = {
      content: itemData.item.content,
      fillColor: itemData.item.fillColor,
      width: itemData.item.width === "" ? "" : 10,
      height: itemData.item.height === "" ? "" : 90
    };

    if (index === 2 && itemData.item.width > 0) {
      newItem.width = 100;
      newItem.height = 20;
    }

    rack.item = newItem;

    console.log(racks.value); // 打印更新后的 racks 值
  }
});



      
      console.log(racks); // 查看更新后的racks数组
     
    } else {
      ElMessage.error(response.msg);
    }
@@ -97,25 +112,25 @@

fetchFlowCardId()
// setTimeout(fetchFlowCardId(),1000);
  
//setInterval(fetchFlowCardId, 2000)


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

  Swal.fire({
    title: '玻璃信息',
    html: '<pre>' + str + '</pre>',
    customClass: {
      popup: 'format-pre'
    }
  });
};
//   Swal.fire({
//     title: '玻璃信息',
//     html: '<pre>' + str + '</pre>',
//     customClass: {
//       popup: 'format-pre'
//     }
//   });
// };

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