From adb18df8a106d6a45241ded8805c9abf3ec58e91 Mon Sep 17 00:00:00 2001
From: wu <731351411@qq.com>
Date: 星期二, 05 九月 2023 17:03:59 +0800
Subject: [PATCH] Merge branch 'master' of ssh://10.153.19.150:29418/CanadaMes
---
CanadaMes-ui/src/views/Electrical/Sign.vue | 164 +++++++++-
CanadaMes-ui/src/views/Electrical/alarm.vue | 179 +++++++++++
CanadaMes-ui/src/views/Electrical/State.vue | 111 ++++++
CanadaMes-ui/src/views/Electrical/Action.vue | 110 +++++--
CanadaMes-ui/src/views/Electrical/Parameter.vue | 291 ++++++++++--------
5 files changed, 661 insertions(+), 194 deletions(-)
diff --git a/CanadaMes-ui/src/views/Electrical/Action.vue b/CanadaMes-ui/src/views/Electrical/Action.vue
index 8c429b9..48df874 100644
--- a/CanadaMes-ui/src/views/Electrical/Action.vue
+++ b/CanadaMes-ui/src/views/Electrical/Action.vue
@@ -8,21 +8,15 @@
<router-link to="/Electrical/Action" tag="el-button" type="text">Action</router-link>
<router-link to="/Electrical/Sign" tag="el-button" type="text">Sign</router-link>
<router-link to="/Electrical/State" tag="el-button" type="text">State</router-link>
+ <router-link to="/Electrical/alarm" tag="el-button" type="text">Alarm</router-link>
</el-breadcrumb>
<div>Action</div>
- <el-form label-width="100px" style="display: flex;flex-wrap: wrap;" :model="{ records }">
- <div class="kuai_sb" v-for="item in records" :key="item.id">
- <el-input v-model="item.mingcheng" style="width: 280px;" class="in_mc"></el-input>
- <!-- <el-input v-model="item.zhuangtai" style="width: 80px;"></el-input> -->
- <el-switch v-model="item.zhuangtai" active-color="#13ce66" active-value="1" inactive-value="2"></el-switch>
+ <el-form label-width="100px" style="display: flex;flex-wrap: wrap;" :model="{ messagepack }">
+ <div class="kuai_div" v-for="item in this.record.xyData" :key="item.name">
+ <el-input v-model="item.name" style="width: 240px;" class="in_mc"></el-input>
+ <!-- <el-input v-model="item[0]" style="width: 80px;"></el-input> -->
+ <el-switch v-model="item.value" active-value="0" inactive-value="1"></el-switch>
</div>
-
-
- <div class="kuai_div">
- <el-input style="width: 280px;" class="in_mc" value="conveyor Velocity(Auto SLOW)"></el-input>
- <el-input v-for="(param, index) in record.params[0]" :key="index" v-model="record.params[0][index]" style="width: 80px;"></el-input>
-</div>
-<button @click="send()">娴嬭瘯鍙戦��</button>
</el-form>
@@ -30,34 +24,69 @@
</template>
<script >
+
let socket;
export default {
- name: "Action",
+ name: "action",
data () {
return {
- records: [
- { id: 1, mingcheng: 'conveyor Velocity(Auto SLOW)', zhuangtai: "1" },
- { id: 2, mingcheng: 'B01 B02 TRAVEL POS Velocity AUTO', zhuangtai: "2" },
- { id: 3, mingcheng: 'B01 B02 TRAVEL JOG Velocity', zhuangtai: "2" },
- { id: 4, mingcheng: 'conveyor Velocity(Manual)', zhuangtai: "1" }
- ],
+ record: {
+ params: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+ canshu: [
+ 'D01 VFD conveyor',
+ 'D02 VFD conveyor',
+ 'D03 VFD conveyor',
+ 'D04 VFD conveyor',
+ 'D05 VFD conveyor',
+ 'D06 VFD conveyor',
+ 'A01 VFD conveyor',
+ 'A02 VFD conveyor',
+ 'B01 VFD conveyor',
+ 'B02 VFD conveyor',
+ 'A01 SERVE TURN JOG+',
+ 'A02 SERVE TURN JOG-',
+ 'A01 SERVE TRAVEL JOG+',
+ 'A02 SERVE TRAVEL JOG-',
+ 'B01 SERVE TRAVEL JOG+',
+ 'B02 SERVE TRAVEL JOG-',
+ 'A01 SERVE TURN POS',
+ 'A02 SERVE TURN POS',
+ 'A01 SERVE TRAVEL POS',
+ 'A02 SERVE TRAVEL POS',
+ 'B01 SERVE TRAVEL POS',
+ 'B02 SERVE TRAVEL POS',
+ 'B01 YV TURN',
+ 'B01 YV UP DOWN',
+ 'B02 YV TURN',
+ 'B02 YV UP DOWN',
+ ],
+ xyData: [
+ { name: 'D01 VFD conveyor', value: 0 },
+ { name: "D02 VFD conveyor", value: 0 },
+ { name: "D03 VFD conveyor", value: 0 },
+ { name: "D04 VFD conveyor", value: 0 },
+ { name: "B01 B02 TRAVEL JOG Velocity", value: 0 },
+ { name: "conveyor Velocity(Manual)", value: 0 },
+ ],
+ },
+
+
messagepack: {
data: { taskname: "" }
},
-
- record: {
- params: [0,0,0,0,0,0]
- },
+ queryInfo: {
+ data: "1",
+ pageSize: 10
+ },
}
},
created () {
this.init();
- //console.log(this.records);
},
methods: {
init () {
- let viewname = "talkvue";
+ let viewname = "Action";
if (typeof (WebSocket) == "undefined") {
console.log("鎮ㄧ殑娴忚鍣ㄤ笉鏀寔WebSocket");
@@ -77,11 +106,24 @@
};
// 娴忚鍣ㄧ鏀舵秷鎭紝鑾峰緱浠庢湇鍔＄鍙戦�佽繃鏉ョ殑鏂囨湰娑堟伅
socket.onmessage = function (msg) {
- console.log("鏀跺埌鏁版嵁====" + msg.data);
- let obj = JSON.parse(msg.data);
- this.$set(this.record.params, 0, obj.params[0]);
- console.log( this.record.params[0])
-}.bind(this);
+
+ //console.log("鏀跺埌鏁版嵁====" + msg.data);
+ let obj = JSON.parse(msg.data);
+
+ this.record.params[0] = obj.acion[0].join(",");
+ this.record.params[0] = this.record.params[0].split(",");
+
+ for (let a = 0; a <= this.record.params.length - 1; a++) {
+ // if (!this.record.xyData[a]) {
+ // this.record.xyData[a] = { name: this.record.canshu[a], value: this.record.params[0][a] };
+ // } else {
+ // this.record.xyData[a].value = this.record.params[0][a];
+ // }
+ this.record.xyData[a] = { name: this.record.canshu[a], value: this.record.params[0][a] };
+ }
+ console.log(this.record.xyData)
+ this.$forceUpdate();
+ }.bind(this);
//鍏抽棴浜嬩欢
socket.onclose = function () {
console.log("websocket宸插叧闂�");
@@ -91,6 +133,7 @@
console.log("websocket鍙戠敓浜嗛敊璇�");
}
}
+
},
send () {
this.messagepack.data = { taskname: "鍓嶇鍒板悗鍙�" };
@@ -107,10 +150,11 @@
</script>
+
<style>
-.kuai_sb {
- width: 30%;
- margin-bottom: 15px;
+.kuai_div {
+ /* width: 30%; */
+ margin-bottom: 30px;
}
.el-input {
diff --git a/CanadaMes-ui/src/views/Electrical/Parameter.vue b/CanadaMes-ui/src/views/Electrical/Parameter.vue
index 49a02c8..12506fb 100644
--- a/CanadaMes-ui/src/views/Electrical/Parameter.vue
+++ b/CanadaMes-ui/src/views/Electrical/Parameter.vue
@@ -1,152 +1,177 @@
<template>
<div class="app">
- <!--闈㈠寘灞戝鑸尯鍩�-->
- <el-breadcrumb separator-class="el-icon-arrow-right" class="el-breadcrumb">
- <router-link to="/home" tag="el-button" type="text">{{ $t('langHome') }}</router-link>
- <el-button type="text">璁惧绠＄悊</el-button>
- <router-link to="/Electrical/Parameter" tag="el-button" type="text">Parameter</router-link>
- <router-link to="/Electrical/Action" tag="el-button" type="text">Action</router-link>
- <router-link to="/Electrical/Sign" tag="el-button" type="text">Sign</router-link>
- <router-link to="/Electrical/State" tag="el-button" type="text">State</router-link>
- </el-breadcrumb>
- <div>Parameter</div>
-
- <el-form label-width="100px" style="display: flex;flex-wrap: wrap;" :model="messagepack.data">
- <div id="btn_div">
- <el-button type="primary" @click="send()">涓嬪彂鍙傛暟</el-button>
- </div>
- <div class="kuai_div" v-for="(item, index) in record.xyData" :key="index">
- <el-input style="width: 280px;" class="in_mc" v-model="item.name" readonly></el-input>
- <el-input v-model="item.value" style="width: 80px;"></el-input>
- </div>
- </el-form>
+ <!--闈㈠寘灞戝鑸尯鍩�-->
+ <el-breadcrumb separator-class="el-icon-arrow-right" class="el-breadcrumb">
+ <router-link to="/home" tag="el-button" type="text">{{ $t('langHome') }}</router-link>
+ <el-button type="text">璁惧绠＄悊</el-button>
+ <router-link to="/Electrical/Parameter" tag="el-button" type="text">Parameter</router-link>
+ <router-link to="/Electrical/Action" tag="el-button" type="text">Action</router-link>
+ <router-link to="/Electrical/Sign" tag="el-button" type="text">Sign</router-link>
+ <router-link to="/Electrical/State" tag="el-button" type="text">State</router-link>
+ <router-link to="/Electrical/alarm" tag="el-button" type="text">Alarm</router-link>
+ </el-breadcrumb>
+ <div>Parameter</div>
+
+
+ <el-form label-width="100px" style="display: flex;flex-wrap: wrap;" :model="messagepack.data">
+ <div id="btn_div">
+ <el-button type="primary" @click="send()">Distribute</el-button>
+ <!-- <button @click="send()">娴嬭瘯鍙戦��</button> -->
+ </div>
+ <div class="kuai_div" v-for="item in this.record.xyData" :key="item.name">
+ <el-input style="width: 280px;" class="in_mc" v-model="item.name"></el-input>
+ <el-input v-model="item.value" style="width: 80px;"></el-input>
+ </div>
+
+
+
+ </el-form>
+
+
+
+
</div>
- </template>
-
- <script>
- let socket;
-
- export default {
+</template>
+
+<script >
+
+let socket;
+export default {
name: "Parameter",
- data() {
- return {
- record: {
- params: [0, 0, 0, 0, 0, 0],
- xyData: [{ name: "conveyor Velocity(Auto SLOW)", value: 0 },
- { name: "B01 B02 TRAVEL POS Velocity AUTO", value: 0 },
- { name: "B01 B02 TRAVEL JOG Velocity", value: 0 },
- { name: "conveyor Velocity(Manual)", value: 0},
- { name: "B01 B02 TRAVEL JOG Velocity", value: 0},
- { name: "conveyor Velocity(Manual)", value: 0 }],
- canshu: [
- 'conveyor Velocity(Auto SLOW)',
- 'B01 B02 TRAVEL POS Velocity AUTO',
- 'B01 B02 TRAVEL JOG Velocity',
- 'conveyor Velocity(Manual)',
- 'B01 B02 TRAVEL JOG Velocity',
- 'conveyor Velocity(Manual)'
- ],
+ data () {
+ return {
+ record: {
+ params: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+ xyData: [
+ { name: 'conveyor Velocity(Auto FAST)', value: 0 },
+ { name: 'conveyor Velocity(Manual)', value: 0 },
+ { name: 'A01 A02 TURN JOG Velocity', value: 0 },
+ { name: 'A01 A02 TRAVEL JOG Velocity', value: 0 },
+ { name: 'A01 A02 TURN POS Velocity AUTO', value: 0 },
+ { name: 'A01 A02 TURN POS Velocity manual', value: 0 },
+ { name: '01 A02 TRAVEL POS Velocity AUTO', value: 0 },
+ { name: 'A01 A02 TRAVEL POS Velocity manual', value: 0 },
+ { name: 'B01 B02 TRAVEL POS Velocity AUTO', value: 0 },
+ { name: 'B01 B02 TRAVEL POS Velocity manual', value: 0 },
+
+ ],
+ canshu: [
+ 'conveyor Velocity(Auto FAST)',
+ 'B01 B02 TRAVEL JOG Velocity',
+ 'A01 A02 TURN POS Velocity AUTO',
+ 'A01 A02 TURN POS Velocity manual',
+ 'A01 A02 TRAVEL POS Velocity AUTO',
+ 'A01 A02 TRAVEL POS Velocity manual',
+ 'B01 B02 TRAVEL POS Velocity AUTO',
+ 'B01 B02 TRAVEL POS Velocity manual',
+ ],
+
+ },
+
+
+ messagepack: {
+ data: { taskname: "" }
+ },
+ queryInfo: {
+ data: "1",
+ pageSize: 10
+ },
+
+ }
},
- messagepack: {
- data: { taskname: "" }
- },
- queryInfo: {
- data: "1",
- pageSize: 10
- },
- }
- },
- created() {
- this.initWebSocket();
+ created () {
+ this.init();
},
methods: {
- initWebSocket() {
- let viewname = "action";
-
- 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;
+ init () {
+ let viewname = "Parameter";
+
+ 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.record.params[0] = obj.params[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.$forceUpdate();
+
+ }.bind(this);
+ //鍏抽棴浜嬩欢
+ socket.onclose = function () {
+ console.log("websocket宸插叧闂�");
+ };
+ //鍙戠敓浜嗛敊璇簨浠�
+ socket.onerror = function () {
+ console.log("websocket鍙戠敓浜嗛敊璇�");
+ }
}
-
- // 寮�鍚竴涓獁ebsocket鏈嶅姟
- socket = new WebSocket(socketUrl);
-
- // 鎵撳紑浜嬩欢
- socket.onopen = function () {
- console.log("websocket宸叉墦寮�");
- };
-
- // 鏀跺埌娑堟伅
- socket.onmessage = (msg) => {
- if (!msg.data) {
- return; // 濡傛灉鏀跺埌绌烘暟鎹紝鍒欑洿鎺ヨ繑鍥烇紝涓嶆墽琛屽悗缁�昏緫
+ },
+ send () {
+ this.messagepack.data = { taskname: "鍓嶇鍒板悗鍙�" };
+ socket?.send(JSON.stringify(this.messagepack)); // 灏嗙粍瑁呭ソ鐨刯son鍙戦�佺粰鏈嶅姟绔紝鐢辨湇鍔＄杩涜杞彂
+ }
+
}
- let obj = JSON.parse(msg.data);
- this.record.params[0] = obj.params[0];
-
- for (let a = 0; a <= this.record.params[0].length - 1; a++) {
- if (!this.record.xyData[a]) {
- this.record.xyData[a] = { name: this.record.canshu[a], value: this.record.params[0][a] };
- } else {
- this.record.xyData[a].value = this.record.params[0][a];
- }
- }
-
- console.log(this.record.xyData);
- this.$forceUpdate();
-};
-
- // 鍏抽棴浜嬩欢
- socket.onclose = function () {
- console.log("websocket宸插叧闂�");
- };
-
- // 鍙戠敓閿欒浜嬩欢
- socket.onerror = function () {
- console.log("websocket鍙戠敓浜嗛敊璇�");
- }
- }
- },
- send() {
- this.messagepack.data = this.record.xyData.map(item => parseInt(item.value)); // 杞崲涓烘暣鏁版暟缁�
- console.log(this.messagepack);
- socket?.send(JSON.stringify(this.messagepack));
}
- }
- }
- </script>
-
- <style>
- .kuai_div {
+
+
+
+
+
+</script>
+
+<style>
+.kuai_div {
width: 30%;
margin-bottom: 15px;
- }
-
- .el-input {
+}
+
+.el-input {
border: none;
- }
-
+
+
.el-input__inner {
- border: 1px solid black;
+ border: 1 solid black;
}
-
- .in_mc .el-input__inner {
- border: none;
+
+
+}
+
+.in_mc {
+ .el-input__inner {
+ border: none;
}
-
- #btn_div {
+}
+
+#btn_div {
+
width: 100%;
- }
-
- #btn_div .el-button {
+
+}
+
+#btn_div .el-button {
float: right;
- }
- </style>
\ No newline at end of file
+}
+</style>
diff --git a/CanadaMes-ui/src/views/Electrical/Sign.vue b/CanadaMes-ui/src/views/Electrical/Sign.vue
index 2394d89..a3ef53f 100644
--- a/CanadaMes-ui/src/views/Electrical/Sign.vue
+++ b/CanadaMes-ui/src/views/Electrical/Sign.vue
@@ -8,15 +8,16 @@
<router-link to="/Electrical/Action" tag="el-button" type="text">Action</router-link>
<router-link to="/Electrical/Sign" tag="el-button" type="text">Sign</router-link>
<router-link to="/Electrical/State" tag="el-button" type="text">State</router-link>
+ <router-link to="/Electrical/alarm" tag="el-button" type="text">Alarm</router-link>
</el-breadcrumb>
<div>Sign</div>
- <div style="padding-right: 30px;display: flex;flex-wrap: wrap;">
- <div class="kuai_sb" v-for="item in records" :key="item.id">
- <el-col class="deng" :class="getStatusClass(item.zhuangtai)">
+ <div style="padding-right: 30px;display: flex;flex-wrap: wrap;" class="neir">
+ <div class="kuai_sb" v-for="item in record.xyData" :key="item.name">
+ <el-col class="deng" :class="getStatusClass(item.value, item.name)">
<!-- <el-input v-model="item.zhuangtai" style="width: 280px;display: none;"
class="in_mc"></el-input>-->
</el-col>
- <el-input v-model="item.mingcheng" style="width: 280px;" class="in_mc"></el-input>
+ <el-input v-model="item.name" style="width: 280px;" class="in_mc"></el-input>
<!-- <el-switch v-model="item.zhuangtai" active-color="#13ce66" active-value="1" inactive-value="2"></el-switch> -->
</div>
@@ -27,29 +28,143 @@
</template>
<script >
-
+let socket;
export default {
name: "Sign",
data () {
return {
- records: [
- { id: 1, mingcheng: 'conveyor Velocity(Auto SLOW)', zhuangtai: "1" },
- { id: 2, mingcheng: 'B01 B02 TRAVEL POS Velocity AUTO', zhuangtai: "2" },
- { id: 3, mingcheng: 'B01 B02 TRAVEL JOG Velocity', zhuangtai: "2" },
- { id: 4, mingcheng: 'conveyor Velocity(Manual)', zhuangtai: "2" }
- ]
+ record: {
+ params: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,],
+ xyData: [
+ { name: 'D01.SR dec', value: 0 },
+ { name: "D01.SR in pos", value: 0 },
+ { name: "D02.SR dec", value: 0 },
+ { name: "D02.SR in pos", value: 0 },
+ { name: "D03.SR dec", value: 0 },
+ { name: "D03.SR in pos", value: 0 },
+ ],
+ canshu: [
+ 'D01.SR dec',
+ 'D01.SR in pos',
+ 'D02.SR dec',
+ 'D02.SR in pos',
+ 'D03.SR into',
+ 'D03.SR dec',
+ 'D03.SR in pos',
+ 'D04.SR dec',
+ 'D04.SR in pos',
+ 'D05.SR dec',
+ 'D05.SR in pos',
+ 'D06.SR dec',
+ 'D06.SR in pos',
+ 'B01.SR out dec',
+ 'B01.SR out in pos',
+ 'B01.SR in dec',
+ 'B01.SR in in pos',
+ 'B01.SR turn on',
+ 'B01.SR turn off',
+ 'B01.SR up',
+ 'B01.SR down',
+ 'B02.SR out dec',
+ 'B02.SR out in pos',
+ 'B02.SR in dec',
+ 'B02.SR in in pos',
+ 'B02.SR turn on',
+ 'B02.SR turn off',
+ 'B02.SR up',
+ 'B02.SR down',
+ 'LED.red',
+ 'LED.green',
+ 'LED.yellow',
+ ],
+
+ },
+
+
+ messagepack: {
+ data: { taskname: "" }
+ },
+ queryInfo: {
+ data: "1",
+ pageSize: 10
+ },
}
},
created () {
+ this.init();
},
methods: {
- getStatusClass (zhuangtai) {
- if (zhuangtai === "2") {
- return "dow";
- } else {
+ getStatusClass (zhuangtai, mc) {
+
+ if (mc === "LED.red" && zhuangtai === 0) {
+ return "red";
+ }
+ if (mc === "LED.green" && zhuangtai === 0) {
+ return "green";
+ }
+ if (mc === "LED.yellow" && zhuangtai === 0) {
+ return "yellow"
+ }
+ if (zhuangtai === 0) {
return "op";
}
+ else {
+ return "dow";
+ }
+
+
+
+
+
+ },
+ init () {
+ let viewname = "Sign";
+
+ 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.record.params[0] = obj.sig[0];
+ for (let a = 0; a <= this.record.params.length - 1; a++) {
+ //this.record.xyData[a] = [this.record.params[0][a], this.record.canshu[a]];
+ this.record.xyData[a] = { name: this.record.canshu[a], value: this.record.params[0][a] };
+
+ }
+ this.$forceUpdate();
+
+ }.bind(this);
+ //鍏抽棴浜嬩欢
+ socket.onclose = function () {
+ console.log("websocket宸插叧闂�");
+ };
+ //鍙戠敓浜嗛敊璇簨浠�
+ socket.onerror = function () {
+ console.log("websocket鍙戠敓浜嗛敊璇�");
+ }
+ }
+ },
+ send () {
+ this.messagepack.data = { taskname: "鍓嶇鍒板悗鍙�" };
+ socket?.send(JSON.stringify(this.messagepack)); // 灏嗙粍瑁呭ソ鐨刯son鍙戦�佺粰鏈嶅姟绔紝鐢辨湇鍔＄杩涜杞彂
}
}
@@ -67,6 +182,11 @@
padding: 0;
}
+/* .neir {
+ height: 100%;
+ overflow-y: auto;
+} */
+
.el-input__inner {
text-align: center;
width: 100%;
@@ -74,7 +194,7 @@
.kuai_sb {
text-align: center;
- width: 30%;
+ width: 25%;
margin-bottom: 15px;
}
@@ -111,4 +231,16 @@
.dow {
background-color: #A0A0A0;
}
+
+.red {
+ background-color: red;
+}
+
+.geeen {
+ background-color: #00ff22;
+}
+
+.yellow {
+ background-color: yellow;
+}
</style>
\ No newline at end of file
diff --git a/CanadaMes-ui/src/views/Electrical/State.vue b/CanadaMes-ui/src/views/Electrical/State.vue
index 979371d..65003de 100644
--- a/CanadaMes-ui/src/views/Electrical/State.vue
+++ b/CanadaMes-ui/src/views/Electrical/State.vue
@@ -8,19 +8,23 @@
<router-link to="/Electrical/Action" tag="el-button" type="text">Action</router-link>
<router-link to="/Electrical/Sign" tag="el-button" type="text">Sign</router-link>
<router-link to="/Electrical/State" tag="el-button" type="text">State</router-link>
+ <router-link to="/Electrical/alarm" tag="el-button" type="text">Alarm</router-link>
</el-breadcrumb>
<div>State</div>
- <el-form label-width="100px" style="display: flex;flex-wrap: wrap;" :model="{ records }">
+ <el-form label-width="100px" style="display: flex;flex-wrap: wrap;" :model="messagepack.data">
<div id="btn_div">
- <el-button type="primary">涓嬪彂鍙傛暟</el-button>
+ <el-button type="primary" @click="send()">Distribute</el-button>
+ <!-- <button @click="send()">娴嬭瘯鍙戦��</button> -->
+ </div>
+ <div class="kuai_div" v-for="item in this.record.xyData" :key="item.name">
+ <el-input style="width: 280px;" class="in_mc" v-model="item.name"></el-input>
+ <el-input v-model="item.value" style="width: 80px;"></el-input>
</div>
- <div class="kuai_div" v-for="item in records" :key="item.id">
- <el-input v-model="item.mingcheng" style="width: 280px;" class="in_mc"></el-input>
- <el-input v-model="item.zhuangtai" style="width: 80px;"></el-input>
- </div>
+
+
</el-form>
@@ -31,22 +35,105 @@
<script >
+let socket;
export default {
name: "State",
data () {
return {
- records: [
- { id: 1, mingcheng: 'conveyor Velocity(Auto SLOW)', zhuangtai: "1" },
- { id: 2, mingcheng: 'B01 B02 TRAVEL POS Velocity AUTO', zhuangtai: "2" },
- { id: 3, mingcheng: 'B01 B02 TRAVEL JOG Velocity', zhuangtai: "2" },
- { id: 4, mingcheng: 'conveyor Velocity(Manual)', zhuangtai: "2" }
- ]
+ record: {
+ params: [0, 0, 0, 0, 0, 0, 0, 0, 0,],
+ xyData: [
+ { name: 'D01.State', value: 0 },
+ { name: 'D02.State', value: 0 },
+ { name: 'B01.State', value: 0 },
+ { name: 'B02.State', value: 0 },
+ { name: 'A01.State', value: 0 },
+ { name: 'A02.State', value: 0 },
+ { name: 'D03.State', value: 0 },
+ { name: 'D04.State', value: 0 },
+ { name: 'D05.State', value: 0 },
+ { name: 'D06.State', value: 0 },
+ ],
+ canshu: [
+ 'D01.State',
+ 'D02.State',
+ 'B01.State',
+ 'B02.State',
+ 'A01.State',
+ 'A02.State',
+ 'D03.State',
+ 'D04.State',
+ 'D05.State',
+ 'D06.State',
+ ],
+
+ },
+
+
+ messagepack: {
+ data: { taskname: "" }
+ },
+ queryInfo: {
+ data: "1",
+ pageSize: 10
+ },
}
},
created () {
+ this.init();
},
methods: {
+ init () {
+ let viewname = "State";
+
+ 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.record.params[0] = obj.sta[0];
+ for (let a = 0; a <= this.record.params.length - 1; a++) {
+ //this.record.xyData[a] = [this.record.params[0][a], this.record.canshu[a]];
+ this.record.xyData[a] = { name: this.record.canshu[a], value: this.record.params[0][a] };
+ }
+ this.$forceUpdate();
+ console.log(this.record.xyData);
+ //console.log(this.record.params[0])
+ // console.log(this.records.canshu);
+
+ }.bind(this);
+ //鍏抽棴浜嬩欢
+ socket.onclose = function () {
+ console.log("websocket宸插叧闂�");
+ };
+ //鍙戠敓浜嗛敊璇簨浠�
+ socket.onerror = function () {
+ console.log("websocket鍙戠敓浜嗛敊璇�");
+ }
+ }
+ },
+ send () {
+ this.messagepack.data = { taskname: "鍓嶇鍒板悗鍙�" };
+ socket?.send(JSON.stringify(this.messagepack)); // 灏嗙粍瑁呭ソ鐨刯son鍙戦�佺粰鏈嶅姟绔紝鐢辨湇鍔＄杩涜杞彂
+ }
+
}
}
diff --git a/CanadaMes-ui/src/views/Electrical/alarm.vue b/CanadaMes-ui/src/views/Electrical/alarm.vue
new file mode 100644
index 0000000..fa6f8c3
--- /dev/null
+++ b/CanadaMes-ui/src/views/Electrical/alarm.vue
@@ -0,0 +1,179 @@
+<template>
+ <div class="app">
+ <!--闈㈠寘灞戝鑸尯鍩�-->
+ <el-breadcrumb separator-class="el-icon-arrow-right" class="el-breadcrumb">
+ <router-link to="/home" tag="el-button" type="text">{{ $t('langHome') }}</router-link>
+ <el-button type="text">璁惧绠＄悊</el-button>
+ <router-link to="/Electrical/Parameter" tag="el-button" type="text">Parameter</router-link>
+ <router-link to="/Electrical/Action" tag="el-button" type="text">Action</router-link>
+ <router-link to="/Electrical/Sign" tag="el-button" type="text">Sign</router-link>
+ <router-link to="/Electrical/State" tag="el-button" type="text">State</router-link>
+ <router-link to="/Electrical/alarm" tag="el-button" type="text">Alarm</router-link>
+ </el-breadcrumb>
+ <div>Alarm</div>
+ <!-- <el-form label-width="100px" style="display: flex;flex-wrap: wrap;" :model="{ messagepack }">
+ <div class="kuai_div" v-for="item in this.record.xyData" :key="item[1]">
+ <el-input v-model="item[1]" style="width: 240px;" class="in_mc"></el-input>
+ <el-switch v-model="item[0]" active-value="0" inactive-value="1"></el-switch>
+ </div>
+ </el-form> -->
+
+ <el-table :data="record.xyData" style="width: 100%">
+ <el-table-column prop="xyData[1]" label="content" width="180">
+ </el-table-column>
+ <el-table-column prop="name" label="time-on" width="180">
+ </el-table-column>
+ <el-table-column prop="address" label="End Time">
+ </el-table-column>
+ </el-table>
+ </div>
+</template>
+
+<script >
+
+let socket;
+export default {
+ name: "alarm",
+ data () {
+ return {
+ record: {
+ params: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+ canshu: [
+ 'D01 VFD error',
+ 'D02 VFD error',
+ 'D03 VFD error',
+ 'D04 VFD conveyor',
+ 'D05 VFD conveyor',
+ 'D06 VFD conveyor',
+ 'A01 VFD conveyor',
+ 'A02 VFD conveyor',
+ 'B01 VFD conveyor',
+ 'B02 VFD conveyor',
+ 'A01 SERVE TURN JOG+',
+ 'A02 SERVE TURN JOG-',
+ 'A01 SERVE TRAVEL JOG+',
+ 'A02 SERVE TRAVEL JOG-',
+ 'B01 SERVE TRAVEL JOG+',
+ 'B02 SERVE TRAVEL JOG-',
+ 'A01 SERVE TURN POS',
+ 'A02 SERVE TURN POS',
+ 'A01 SERVE TRAVEL POS',
+ 'A02 SERVE TRAVEL POS',
+ 'B01 SERVE TRAVEL POS',
+ 'B02 SERVE TRAVEL POS',
+ 'B01 YV TURN',
+ 'B01 YV UP DOWN',
+ 'B02 YV TURN',
+ 'B02 YV UP DOWN',
+ ],
+ // canshu: [
+ // '1',
+ // '1',
+ // '0',
+ // '0',
+ // '0',
+ // '0'
+ // ],
+ xyData: [],
+ },
+
+
+ messagepack: {
+ data: { taskname: "" }
+ },
+ queryInfo: {
+ data: "1",
+ pageSize: 10
+ },
+
+ }
+ },
+ created () {
+ this.init();
+ },
+ methods: {
+ init () {
+ let viewname = "Action";
+
+ 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.record.params[0] = obj.acion[0].join(",");
+ this.record.params[0] = this.record.params[0].split(",");
+
+ for (let a = 0; a <= this.record.params.length - 1; a++) {
+ this.record.xyData[a] = [this.record.params[0][a], this.record.canshu[a]];
+ }
+ //console.log(this.record.params[0]);
+ //console.log(this.record.xyData);
+ this.$forceUpdate();
+ }.bind(this);
+ //鍏抽棴浜嬩欢
+ socket.onclose = function () {
+ console.log("websocket宸插叧闂�");
+ };
+ //鍙戠敓浜嗛敊璇簨浠�
+ socket.onerror = function () {
+ console.log("websocket鍙戠敓浜嗛敊璇�");
+ }
+ }
+
+ },
+ send () {
+ this.messagepack.data = { taskname: "鍓嶇鍒板悗鍙�" };
+ socket?.send(JSON.stringify(this.messagepack)); // 灏嗙粍瑁呭ソ鐨刯son鍙戦�佺粰鏈嶅姟绔紝鐢辨湇鍔＄杩涜杞彂
+ }
+
+ }
+
+}
+
+
+
+
+
+</script>
+
+
+<style>
+.kuai_div {
+ /* width: 30%; */
+ margin-bottom: 30px;
+}
+
+.el-input {
+ border: none;
+
+
+ .el-input__inner {
+ border: 1 solid black;
+ }
+
+
+}
+
+.in_mc {
+ .el-input__inner {
+ border: none;
+ }
+}
+</style>
\ No newline at end of file
--
Gitblit v1.8.0