<template>
|
<div class="glass-rack">
|
<div >
|
<svg width="500" height="370" 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"
|
: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)"
|
:y="calculateItemYPosition(rack, rack.item, index)"
|
:width="rack.item.width"
|
:height="rack.item.height"
|
:fill="rack.item.fillColor"
|
/>
|
<text :x="rack.x + rack.width / 2" :y="rack.y - 10" text-anchor="middle">{{ index + 4 }}{{ $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>
|
</svg>
|
</div>
|
</div>
|
</template>
|
<script setup>
|
import { ref, watchEffect ,onMounted,onUnmounted} 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,closeWebSocket } from '@/utils/WebSocketService';
|
import { WebSocketHost ,host} from '@/utils/constants'
|
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: 90, width: 10, fillColor: 'yellow', content: 'NG12345678' } },
|
|
{ x: 140, y: 280, height: 60, width: 110, fillColor: '#6a6da9', item: { height: 20, width: 100, fillColor: 'yellow', content: 'NG1234561454' } }
|
|
]);
|
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/getwo2');
|
if (response.code === 200) {
|
console.log(response);
|
// 遍历响应数据并替换racks数组中的item属性
|
response.data.forEach((itemData, index) => {
|
if (index < racks.value.length) {
|
const rack = racks.value[index];
|
rack.fillColor = itemData.item.fullCardColor === 'red' ? '#911005' : '#6a6da9';
|
const newItem = {
|
content: itemData.item.content,
|
fillColor: itemData.item.fillColor,
|
width: itemData.item.width === 0 ? "" : 10,
|
height: itemData.item.height === 0 ? "" : 90
|
};
|
console.log(itemData.item.fullCardColor);
|
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);
|
}
|
};
|
let socket = null;
|
const socketUrl = `ws://${WebSocketHost}:${host}/api/unLoadGlass/api/talk/unloadglass3`;
|
// 定义消息处理函数，更新 receivedData 变量
|
const handleMessage = (data) => {
|
// 更新 tableData 的数据
|
data.glassinfo2[0].forEach((itemData, index) => {
|
if (index < racks.value.length) {
|
const rack = racks.value[index];
|
rack.fillColor = itemData.item.fullCardColor === 'red' ? '#911005' : '#6a6da9';
|
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("显示图2",racks.value); // 打印更新后的 racks 值
|
}
|
});
|
};
|
onMounted(() => {
|
fetchFlowCardId(); // 获取数据
|
socket = initializeWebSocket(socketUrl, handleMessage);
|
});
|
onUnmounted(() => {
|
if (socket) {
|
closeWebSocket(socket);
|
}
|
});
|
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: t('reportWork.glassinformation'),
|
// title: '玻璃信息',
|
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: 500px;
|
margin-top: 5px;
|
}
|
.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>
|
