下片测试

wuyouming666

2024-07-16 db806d3d0b0761538b15907d1ea3caf84dc3f01d

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

@@ -1,17 +1,19 @@
<template>
  <div class="glass-rack">
    <div >
      <svg width="300" height="500" xmlns="http://www.w3.org/2000/svg">
      <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" 
              :width="rack.width" 
              :height="rack.height" 
              :fill="rack.fillColor"
              
              :data-index="index" 
              class="rack-rect" 
              @click="showRectInfo(rack)"
            />
            <rect 
              :x="calculateItemXPosition(rack, rack.item, index)" 
@@ -20,7 +22,7 @@
              :height="rack.item.height" 
              :fill="rack.item.fillColor"
            />
            <text :x="rack.x + rack.width / 2" :y="rack.y - 10" text-anchor="middle">{{ index + 1 }}号工位</text>
            <text :x="rack.x + rack.width / 2" :y="rack.y - 10" text-anchor="middle">{{ index + 1 }}{{ $t('reportWork.workstation') }}</text>
            <text :x="rack.x + rack.width / 2" :y="rack.y + rack.height + 20" text-anchor="middle">{{ rack.item.content }}</text>
          </g>
        </g>
@@ -29,48 +31,190 @@
  </div>
</template>

<script>
export default {
  data() {
    return {
      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: 190, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 30, width: 20, fillColor: 'yellow', content: 'NG12345678' } },
        { x: 190, y: 270, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 35, width: 23, fillColor: 'yellow', content: 'NG123456910' } },
        { x: 95, y: 420, height: 60, width: 110, fillColor: '#6a6da9', item: { height: 30, width: 100, fillColor: 'yellow', content: 'NG1234561454' } }
      ]
    };
  },
  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 坐标
      } else {
        return rack.x + (rack.width - item.width) / 2;  // 返回水平居中的 x 坐标
      }
    },
    // 计算内部物品的 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 坐标
      }
    }
<script  setup>
import { ref, watchEffect ,onMounted} from 'vue';

import { useI18n } from 'vue-i18n'
  const { t } = useI18n()
  let language = ref(localStorage.getItem('lang') || 'zh')
import Swal from 'sweetalert2'
import request from "@/utils/request";
import { initializeWebSocket } from '@/utils/WebSocketService';
 import { WebSocketHost } from '@/utils/constants';
const racks = ref([
  { x: 50, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 90, width: 10, fillColor: 'yellow', content: '',downGlassInfoList:"" } },
 
  { x: 280, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 90, width: 10, fillColor: 'yellow', content: '',downGlassInfoList:"" } },
 
  { x: 140, y: 320, height: 60, width: 110, fillColor: '#6a6da9', item: { height: 20, width: 100, fillColor: 'yellow', content: '' ,downGlassInfoList:""} }
  
]);

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


const calculateItemXPosition = (rack, item, index) => {
  if (index === 0 ) {
    return rack.x;
  } else if (index === 1 ) {
    return rack.x + rack.width - item.width;
  } else {
    return rack.x + (rack.width - item.width) / 2;
  }
};

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


const fetchFlowCardId = async () => {
  try {
    const response = await request.get('unLoadGlass/downWorkStation/getwo');
    
    if (response.code === 200) {
      console.log(response); 
      // 遍历响应数据并替换racks数组中的item属性
      response.data.forEach((itemData, index) => {
  if (index < racks.value.length) {
    const rack = racks.value[index];
    const newItem = {
      content: itemData.item.content,
      fillColor: itemData.item.fillColor,
      width: itemData.item.width === 0 ? "" : 10,
      height: itemData.item.height === 0 ? "" : 90,
      downGlassInfoList:itemData.item.downGlassInfoList
    };

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

    rack.item = newItem;

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



      
     
    } else {
      ElMessage.error(response.msg);
    }
  } catch (error) {
    console.error(error);
  }
};
const socketUrl = `ws://${WebSocketHost}:8085/api/talk/unloadglass2`;
//const socketUrl = `ws://${WebSocketHost}:88/api/unLoadGlass/api/talk/unloadglass2`;
// 定义消息处理函数，更新 receivedData 变量
const handleMessage = (data) => {

  // 更新 tableData 的数据

  data.glassinfo[0].forEach((itemData, index) => {
  if (index < racks.value.length) {
    const rack = racks.value[index];
    const newItem = {
      content: itemData.item.content,
      fillColor: itemData.item.fillColor,
      width: itemData.item.width === 0 ? "" : 10,
      height: itemData.item.height === 0 ? "" : 90,
      downGlassInfoList:itemData.item.downGlassInfoList
    };

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

    rack.item = newItem;


   // console.log("显示图1",racks.value); // 打印更新后的 racks 值
  }
});
};

// 初始化 WebSocket，并传递消息处理函数

onMounted(() => {
  fetchFlowCardId(); // 获取数据
  initializeWebSocket(socketUrl, handleMessage);
});
const showCustomAlert = (downGlassInfoList) => {
  let tableContent = '<table border="1" style="border-collapse: collapse; width: 100%;">';
  tableContent += '<tr><th style="background-color: #f2f2f2;">玻璃ID</th><th style="background-color: #f2f2f2;">膜系</th><th style="background-color: #f2f2f2;">厚度</th><th style="background-color: #f2f2f2;">宽度</th><th style="background-color: #f2f2f2;">高度</th></tr>';

  downGlassInfoList.forEach(info => {
    tableContent += `<tr>
      <td>${info.glassId}</td>
      <td>${info.Filmsid}</td>
      <td>${info.thickness}</td>
      <td>${info.width}</td>
      <td>${info.height}</td>
    </tr>`;
  });

  tableContent += '</table>';

  Swal.fire({
    // title: '玻璃信息',
    title: this.$t('reportWork.glassinformation'),
    // title: "$t('reportWork.glassinformation')",
    html: tableContent,
    customClass: {
      popup: 'format-pre'
    }
  });
};


    const showRectInfo = (rack) => {
      const content = rack.item.content;
      console.log(rack.item.downGlassInfoList[0].flowCardId)
      console.log(content)
   if(content==rack.item.downGlassInfoList[0].flowCardId){
    const downGlassInfoList = rack.item.downGlassInfoList;
      console.log(downGlassInfoList)
      showCustomAlert(downGlassInfoList);

   }
 
    };


</script>

<style scoped>
.glass-rack {
  margin-left: 20px;
  width: 300px;
  margin-top: 10px;
  width: 500px;
  margin-top: 5px;
}
</style>
.rack-rect:hover {
  cursor: pointer;
}
.custom-popover-class {
  background-color: lightgrey;
  color: black;
  border: 1px solid black;
}
.format-pre pre {
  background: #49483e;
  color: #f7f7f7;
  padding: 10px;
  font-size: 14px;
}
</style>