| | |
| | | </template> |
| | | |
| | | <script> |
| | | let socket; |
| | | export default { |
| | | data() { |
| | | return { |
| | |
| | | { x: 95, y: 420, height: 60, width: 110, fillColor: '#6a6da9', item: { height: 30, width: 100, fillColor: 'yellow', content: 'NG1234561454' } } |
| | | ] |
| | | }; |
| | | }, |
| | | activated() { |
| | | this.initWebSocket(); |
| | | }, |
| | | methods: { |
| | | // 计算内部物品的 x 坐标位置 |
| | |
| | | } 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> |