From 0b83163518f23e4571f3f510c38e9a25f46b6d07 Mon Sep 17 00:00:00 2001 From: clll <1320612696@qq.com> Date: 星期五, 08 九月 2023 17:06:00 +0800 Subject: [PATCH] Merge branch 'master' of http://10.153.19.150:10101/r/CanadaMes --- CanadaMes-ui/src/views/Electrical/Parameter.vue | 137 +++++++++++++++++++++++++-------------------- 1 files changed, 76 insertions(+), 61 deletions(-) diff --git a/CanadaMes-ui/src/views/Electrical/Parameter.vue b/CanadaMes-ui/src/views/Electrical/Parameter.vue index ed3cb31..d30361f 100644 --- a/CanadaMes-ui/src/views/Electrical/Parameter.vue +++ b/CanadaMes-ui/src/views/Electrical/Parameter.vue @@ -1,55 +1,55 @@ <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">{{ $t('Distribute') }}</el-button> + <el-button type="text">Electrical</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"> + + <el-form label-width="100px" style="display: flex; flex-wrap: wrap;" :model="messagepack.data"> <div id="btn_div"> - <el-button type="primary" @click="send()">{{ $t('Distribute') }}</el-button> + <el-button type="primary" @click="send()" id="xiafa" :disabled="isButtonDisabled">涓嬪彂鍙傛暟</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.number="item.value" style="width: 80px;" - @input="handleChange(index, $event.target.value)"></el-input> - </div> + <el-input style="width: 280px; border:none;" class="in_mc" v-model="item.name" readonly></el-input> + <span style="margin-right: 5px; width: 50px;">{{ item.value }}</span> + <span style="margin-right: 5px; font-size: 14px;">|</span> + <input v-model="item.value2" type="number" style="width: 30px; margin-right: 5px; margin-top: 5px; font-size: 16px;"> +</div> </el-form> </div> </template> - -<script> -import LanguageMixin from '../../lang/LanguageMixin' +<script> let socket; export default { name: "Parameter", - mixins: [LanguageMixin], - data () { + data() { return { record: { params: [100, 200, 10, 10, 10, 10], xyData: [ - { name: "conveyor Velocity(Auto FAST)", value: 0 }, - { name: "conveyor Velocity(Auto SLOW)", 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: "B01 B02 TRAVEL JOG Velocity", value: 0 }, - { name: "A01 A02 TURN POS Velocity AUTO", value: 0 }, - { name: "A01 A02 TURN POS Velocity manual", value: 0 }, - { name: "A01 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 } + { name: "conveyor Velocity(Auto FAST)", value: 0, value2: 0 }, + { name: "conveyor Velocity(Auto SLOW)", value: 0, value2: 0 }, + { name: "conveyor Velocity(Manual)", value: 0 ,value2: 0 }, + { name: "A01 A02 TURN JOG Velocity", value: 0, value2: 0 }, + { name: "A01 A02 TRAVEL JOG Velocity", value: 0, value2: 0 }, + { name: "B01 B02 TRAVEL JOG Velocity", value: 0, value2: 0 }, + { name: "A01 A02 TURN POS Velocity AUTO", value: 0, value2: 0 }, + { name: "A01 A02 TURN POS Velocity manual", value: 0, value2: 0 }, + { name: "A01 A02 TRAVEL POS Velocity AUTO", value: 0, value2: 0 }, + { name: "A01 A02 TRAVEL POS Velocity manual", value: 0, value2: 0 }, + { name: "B01 B02 TRAVEL POS Velocity AUTO", value: 0, value2: 0 }, + { name: "B01 B02 TRAVEL POS Velocity manual", value: 0, value2: 0 } ], canshu: [] }, @@ -62,92 +62,98 @@ } }; }, - created () { + + + created() { this.initWebSocket(); + this.isButtonDisabled = true; }, methods: { - initWebSocket () { + initWebSocket() { let viewname = "Parameter"; - + if (typeof WebSocket === "undefined") { console.log("鎮ㄧ殑娴忚鍣ㄤ笉鏀寔WebSocket"); } else { 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 = (msg) => { - if (!msg.data) { - return; // 濡傛灉鏀跺埌绌烘暟鎹紝鍒欑洿鎺ヨ繑鍥烇紝涓嶆墽琛屽悗缁�昏緫 - } + if (!msg.data) { + return; // 濡傛灉鏀跺埌绌烘暟鎹紝鍒欑洿鎺ヨ繑鍥烇紝涓嶆墽琛屽悗缁�昏緫 + } - let obj = JSON.parse(msg.data); - this.record.params[0] = obj.params[0]; + let obj = JSON.parse(msg.data); + this.record.params[0] = obj.params[0]; + this.record.state = obj.state[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]; - } - } + let isButtonDisabled = this.record.state.includes(1); + // 鍒ゆ柇state涓槸鍚﹀瓨鍦�1 + console.log(isButtonDisabled) + this.isButtonDisabled = isButtonDisabled; // 灏嗗垽鏂粨鏋滀繚瀛樺埌鍙橀噺isButtonDisabled涓� - console.log(this.record.xyData); - this.$forceUpdate(); - }; + 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)); // 杞崲涓烘暣鏁版暟缁� + send() { + this.messagepack.data = this.record.xyData.map((item) => parseInt(item.value2)); // 杞崲涓烘暣鏁版暟缁� console.log(this.messagepack); socket?.send(JSON.stringify(this.messagepack)); }, - handleChange (index, value) { + handleChange(index, value) { this.record.xyData[index].value = value; } } }; </script> - + <style> .kuai_div { - width: 30%; + width: calc(100% / 3); margin-bottom: 15px; -} - -.el-input { - border: none; } .el-input__inner { border: 1px solid black; } +.in_mc{ -.in_mc .el-input__inner { - border: none; + border:none; } + #btn_div { width: 100%; @@ -156,4 +162,13 @@ #btn_div .el-button { float: right; } -</style> \ No newline at end of file +input[type="number"]::-webkit-inner-spin-button, + input[type="number"]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; + } + + input[type="number"] { + -moz-appearance: textfield; /* Firefox涓鐢ㄤ笂涓嬬澶� */ + } +</style> -- Gitblit v1.8.0