<template>
|
<div class="glass-rack">
|
<div >
|
<svg width="300" 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"
|
:y="rack.y"
|
:width="rack.width"
|
:height="rack.height"
|
:fill="rack.fillColor"
|
|
/>
|
<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 + 1 }}号工位</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>
|
let socket;
|
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' } }
|
]
|
};
|
},
|
activated() {
|
this.initWebSocket();
|
},
|
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 坐标
|
}
|
},
|
initWebSocket() {
|
let viewname = "Landingindication";
|
|
if (typeof WebSocket === "undefined") {
|
console.log("您的浏览器不支持WebSocket");
|
} else {
|
let socketUrl = "ws://" + "localhost:8081" + "/mesModuleTools/api/talk/" + viewname;
|
|
if (socket != null) {
|
socket.close();
|
socket = null;
|
}
|
|
// 开启一个websocket服务
|
socket = new WebSocket(socketUrl);
|
|
// 打开事件
|
socket.onopen = function () {
|
console.log("websocket已打开");
|
};
|
|
// 收到消息
|
socket.onmessage = (msg) => {
|
if (!msg.data) {
|
return; // 如果收到空数据，则直接返回，不执行后续逻辑
|
}
|
|
|
let obj = JSON.parse(msg.data);
|
|
console.log(obj);
|
|
|
|
// 关闭事件
|
socket.onclose = function () {
|
console.log("websocket已关闭");
|
};
|
|
// 发生错误事件
|
socket.onerror = function () {
|
console.log("websocket发生了错误");
|
};
|
|
this.$router.afterEach(function () {
|
socket.close();
|
});
|
}
|
}
|
}
|
|
|
|
}
|
};
|
</script>
|
|
<style scoped>
|
.glass-rack {
|
margin-left: 20px;
|
width: 300px;
|
margin-top: 10px;
|
}
|
</style>
|
