From c3ddb3eb7e7835d93e7a2751986af59c4690c5db Mon Sep 17 00:00:00 2001
From: wuyouming666 <2265557248@qq.com>
Date: 星期一, 01 四月 2024 08:41:31 +0800
Subject: [PATCH] Merge branch 'master' of http://10.153.19.25:10101/r/HangZhouMes
---
UI-Project/src/views/UnLoadGlass/Landingindication.vue | 105 ++++++++++++++++++++++------------------------------
1 files changed, 45 insertions(+), 60 deletions(-)
diff --git a/UI-Project/src/views/UnLoadGlass/Landingindication.vue b/UI-Project/src/views/UnLoadGlass/Landingindication.vue
index 425f4a5..1c572a5 100644
--- a/UI-Project/src/views/UnLoadGlass/Landingindication.vue
+++ b/UI-Project/src/views/UnLoadGlass/Landingindication.vue
@@ -1,7 +1,7 @@
<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">
@@ -11,7 +11,9 @@
: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)"
@@ -30,21 +32,18 @@
</template>
<script>
-let socket;
+import Swal from 'sweetalert2'
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' } }
+ { x: 280, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 30, width: 20, fillColor: 'yellow', content: 'NG12345678' } },
+ { x: 280, y: 270, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 35, width: 23, fillColor: 'yellow', content: 'NG123456910' } },
+ { x: 140, y: 420, height: 60, width: 110, fillColor: '#6a6da9', item: { height: 30, width: 100, fillColor: 'yellow', content: 'NG1234561454' } }
]
};
- },
- activated() {
- this.initWebSocket();
},
methods: {
// 璁＄畻鍐呴儴鐗╁搧鐨� x 鍧愭爣浣嶇疆
@@ -67,59 +66,29 @@
return rack.y + rack.height - item.height; // 杩斿洖搴曢儴瀵归綈鐨� y 鍧愭爣
}
},
- initWebSocket() {
- let viewname = "Landingindication";
+ showCustomAlert(content) {
+ var str="鏋跺彿 : 111\n" +
+ "闀� : 111\n" +
+ "瀹� : 111\n" +
+ "鍘� : 111\n"+
+ "鐜荤拑ID : 111\n"+
+ "鑶滅郴 : 111\n";
- if (typeof WebSocket === "undefined") {
- console.log("鎮ㄧ殑娴忚鍣ㄤ笉鏀寔WebSocket");
- } else {
- let socketUrl = "ws://" + "localhost:8081" + "/mesModuleTools/api/talk/" + viewname;
-
- if (socket != null) {
- socket.close();
- socket = null;
- }
-
- // 寮�鍚竴涓獁ebsocket鏈嶅姟
- 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();
- });
- }
- }
+Swal.fire({
+ title: '鐜荤拑淇℃伅',
+ html: '<pre>' + str + '</pre>',
+ customClass: {
+ popup: 'format-pre'
}
+});
-
-
+ },
+ showRectInfo( rectInfo) {
+ const content = rectInfo.item.content;
+ this.$nextTick(() => {
+ this.showCustomAlert(content);
+ });
+},
}
};
</script>
@@ -127,7 +96,23 @@
<style scoped>
.glass-rack {
margin-left: 20px;
- width: 300px;
+ width: 500px;
margin-top: 10px;
+ /* background-color: antiquewhite; */
}
+.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>
--
Gitblit v1.8.0