From 3879216b974b6a54232dd03017e0695186cea092 Mon Sep 17 00:00:00 2001
From: ZengTao <2773468879@qq.com>
Date: 星期三, 06 九月 2023 17:02:47 +0800
Subject: [PATCH] 更新从后台往前端推送数据
---
CanadaMes-ui/src/views/home/index.vue | 89 ++++++++++++++++++++++++++++++++++++++------
1 files changed, 76 insertions(+), 13 deletions(-)
diff --git a/CanadaMes-ui/src/views/home/index.vue b/CanadaMes-ui/src/views/home/index.vue
index a6d1c92..f5ca385 100644
--- a/CanadaMes-ui/src/views/home/index.vue
+++ b/CanadaMes-ui/src/views/home/index.vue
@@ -91,7 +91,7 @@
background-size: 32px 66px;
background-attachment: local;
width: 32px;
-
+
position: absolute;
/* left: 116px; */
/* left:1060px;18.88px */
@@ -102,10 +102,12 @@
.el-table th {
padding: 8px 0;
}
-.el-table__empty-block{
+
+.el-table__empty-block {
min-height: 41px;
}
-.el-table__empty-text{
+
+.el-table__empty-text {
line-height: 41px;
}
</style>
@@ -120,11 +122,11 @@
<el-button type="warning" @click="getOrder()">Exit the glass by order number</el-button>
</div>
<div>
- <el-table :data="this.tasklist1" border style="width: 100%">
+ <el-table :data="this.tasklist1" border style="width: 100%" >
<el-table-column prop="glassId" label="Coming out glass ID"></el-table-column>
<el-table-column :width="250" prop="cage" label="The Grille number being used"></el-table-column>
<el-table-column prop="orderId" label="Order Nmuber"></el-table-column>
- <el-table-column prop="glasswidth" label="Length and width"></el-table-column>
+ <el-table-column prop="lengthwidth" label="Length and width"></el-table-column>
<el-table-column prop="coating" label="coating"></el-table-column>
<el-table-column label="Operate">
<el-button type="primary" style="padding: 4px 10px;font-size: 12px;">end task</el-button>
@@ -134,7 +136,7 @@
<el-table-column prop="glassId" label="Incoming glass ID"></el-table-column>
<el-table-column :width="250" prop="cage" label="The Grille number being used"></el-table-column>
<el-table-column prop="orderId" label="Order Nmuber"></el-table-column>
- <el-table-column prop="glasswidth" label="Length and width"></el-table-column>
+ <el-table-column prop="lengthwidth" label="Length and width"></el-table-column>
<el-table-column prop="coating" label="coating"></el-table-column>
<el-table-column label="Operate">
<el-button type="primary" style="padding: 4px 10px;font-size: 12px;">end task</el-button>
@@ -168,10 +170,10 @@
<div style="display:flex;position: absolute;float:left;z-index: 999;top:102px;left:682.5px;">
<div :class="getStatusClass(item.state)" v-for="item in cagelist4" :key="item['date']"></div>
</div>
- <div class="blocks-img" :style="{ left: car1 + 'px' ,top: '10px'}">
+ <div class="blocks-img" :style="{ left: car1 + 'px', top: '10px' }">
</div>
- <div class="blocks-img" :style="{ left: car2 + 'px' ,top: '129px'}">
+ <div class="blocks-img" :style="{ left: car2 + 'px', top: '129px' }">
</div>
</div>
@@ -205,8 +207,9 @@
import { home, home2, loadtask, InsertOrder, Addglassid } from "../../api/home";
-
+let socket;
export default {
+ name: "Home",
data() {
return {
dialogFormVisible: false,
@@ -234,8 +237,68 @@
},
created() {
this.load();
+ this.init();
},
methods: {
+ init() {
+ let viewname = "Home";
+
+ if (typeof (WebSocket) == "undefined") {
+ console.log("鎮ㄧ殑娴忚鍣ㄤ笉鏀寔WebSocket");
+ } else {
+ //console.log("鎮ㄧ殑娴忚鍣ㄦ敮鎸乄ebSocket");
+
+ let socketUrl = "ws://" + "localhost:8888" + "/springboot-vue3/api/talk/" + viewname;
+ if (socket != null) {
+ socket.close();
+ socket = null;
+ }
+ // 寮�鍚竴涓獁ebsocket鏈嶅姟
+ socket = new WebSocket(socketUrl);
+ //鎵撳紑浜嬩欢
+ socket.onopen = function () {
+ console.log("websocket宸叉墦寮�");
+ };
+ // 娴忚鍣ㄧ鏀舵秷鎭紝鑾峰緱浠庢湇鍔＄鍙戦�佽繃鏉ョ殑鏂囨湰娑堟伅
+ socket.onmessage = function (msg) {
+
+ //console.log("鏀跺埌鏁版嵁====" + msg.data);
+ let obj = JSON.parse(msg.data);
+ //this.$set(this.record.params, 0, obj.params[0]);
+
+ this.car1 = 116 + 18.88 * obj.params[0][0];
+ this.car2 = 187 + 18.8 * obj.params[0][1];
+ this.tableData=obj.tableData[0];
+ this.cagelist1=obj.cagelist1[0];
+ this.cagelist2=obj.cagelist2[0];
+ this.cagelist3=obj.cagelist3[0];
+ this.cagelist4=obj.cagelist4[0];
+ this.tasklist1=obj.tasklist1[0];
+ this.tasklist2=obj.tasklist2[0];
+
+ // for (let a = 0; a <= this.record.params.length - 1; a++) {
+ // // this.record.xyData[a] = [this.record.canshu[a], this.record.params[0][a]];
+ // // this.record.xyData[a] = { name: this.record.canshu[a], value: this.record.params[0][a] };
+
+ // // this.record.xyData[a].value = this.record.params[0][a];
+ // this.car1=this.record.params[0][a];
+ // console.log(this.record.params[0][a]);
+
+
+ // }
+ this.$forceUpdate();
+
+ }.bind(this);
+ //鍏抽棴浜嬩欢
+ socket.onclose = function () {
+ console.log("websocket宸插叧闂�");
+ };
+ //鍙戠敓浜嗛敊璇簨浠�
+ socket.onerror = function () {
+ console.log("websocket鍙戠敓浜嗛敊璇�");
+ }
+ }
+ },
load() {
home().then(res => {
this.tableData = res.data.list;
@@ -255,8 +318,7 @@
});
loadtask(this.task2).then(res => {
this.tasklist2 = res.data.list;
- this.car1 = 116 + 18.88 * 20;
- this.car2 = 187 + 18.8 * 30;
+
});
},
//鏍规嵁鏍煎瓙鐘舵�佷慨鏀归鑹�
@@ -314,8 +376,9 @@
});
}
},
- endtask(){
-
+ endtask(type,shelfrack) {
+ alert(type);
+ alert(shelfrack);
}
}
};
--
Gitblit v1.8.0