From 8dfb37b10ffb2fcb41c85b3fa266d1ef2874aebc Mon Sep 17 00:00:00 2001 From: wuyouming666 <2265557248@qq.com> Date: 星期四, 30 十一月 2023 08:53:27 +0800 Subject: [PATCH] 修改电气管理PLC通讯逻辑 --- CanadaMes-ui/src/views/Electrical/ManualonePosition2.vue | 679 +++++++++++++++++++++++++++++--------------------------- 1 files changed, 350 insertions(+), 329 deletions(-) diff --git a/CanadaMes-ui/src/views/Electrical/ManualonePosition2.vue b/CanadaMes-ui/src/views/Electrical/ManualonePosition2.vue index 8461e7e..a79506e 100644 --- a/CanadaMes-ui/src/views/Electrical/ManualonePosition2.vue +++ b/CanadaMes-ui/src/views/Electrical/ManualonePosition2.vue @@ -1,330 +1,351 @@ -<template> - <div class="app"> - <el-breadcrumb separator-class="el-icon-arrow-right" class="el-breadcrumb"> - <router-link to="/Electrical/alarm" tag="el-button" type="text" active-class="blue-button">{{ $t('Alarm') - }}</router-link> - <router-link to="/Electrical/State" tag="el-button" type="text" active-class="blue-button">{{ $t('State') - }}</router-link> - <router-link to="/Electrical/Action" tag="el-button" type="text" active-class="blue-button">{{ $t('Action') - }}</router-link> - <router-link to="/Electrical/Parameter" tag="el-button" type="text" active-class="blue-button">{{ $t('Parameter') - }}</router-link> - <router-link to="/Electrical/Sign" tag="el-button" type="text" active-class="blue-button">{{ $t('Sign') - }}</router-link> - <router-link to="/Electrical/Servomanual" tag="el-button" type="text" active-class="blue-button">{{ - $t('ServoManual') - }}</router-link> - </el-breadcrumb> - - <el-breadcrumb separator-class="el-icon-arrow-right" class="el-breadcrumb"> - - <router-link to="/Electrical/Servomanualone" tag="el-button" type="text" active-class="blue-button">{{ - $t('Servomanualone') - }}</router-link> - <router-link to="/Electrical/Parameter1" tag="el-button" type="text" active-class="blue-button">{{ $t('Parameter1') - }}</router-link> - <!-- <router-link to="/Electrical/Parameter2" tag="el-button" type="text" active-class="blue-button">{{ $t('Parameter2') - }}</router-link> --> - <router-link to="/Electrical/Positioning1" tag="el-button" type="text" active-class="blue-button">{{ - $t('Positioning1') - }}</router-link> - <router-link to="/Electrical/Positioning2" tag="el-button" type="text" active-class="blue-button">{{ - $t('Positioning2') - }}</router-link> - <router-link to="/Electrical/ManualonePosition" tag="el-button" type="text" active-class="blue-button">{{ - $t('ManualonePosition') - }}</router-link> - <router-link to="/Electrical/ManualonePosition2" tag="el-button" type="text" active-class="blue-button">{{ - $t('ManualonePosition2') - }}</router-link> - <router-link to="/Electrical/AutomaticParameterSetting" tag="el-button" type="text" active-class="blue-button">{{ - $t('AutomaticParameterSetting') - }}</router-link> - <router-link to="/Electrical/ManualJog" tag="el-button" type="text" active-class="blue-button">{{ - $t('ManualJog') - }}</router-link> - </el-breadcrumb> - - <el-row :gutter="20"> - <el-col :span="12" v-for="(dataGroup, groupIndex) in jsonData" :key="groupIndex"> - <el-card class="json-block" style="width:485px;"> - <div v-for="(item, itemIndex) in dataGroup" :key="itemIndex" class="item-container"> - <div class="item-row"> - <span class="name" style="width:100px;">{{ item.name }}</span> - <el-input style="width:250px;" v-if="item.state != 0 && item.type === '0'" v-model="item.value" - class="input-box"></el-input> - </div> - </div> - <div class="button-row" style="display: flex; justify-content: space-between;"> - <div v-for="(item, itemIndex) in dataGroup" :key="itemIndex"> - <el-button v-if="item.button && item.button.state != 0" :name="item.button.name" v-model="item.button.value" - :class="{ 'action-button': true, 'error-button': item.button.name === '鏁呴殰' && item.button.value === 1 }" - @click="updateButtonValue(dataGroup, itemIndex); submitDataToBackend(item.button.name);">{{ - item.button.name }}</el-button> - </div> - </div> - </el-card> - </el-col> - </el-row> - <!-- <el-button @click="submitDataToBackend">鎻愪氦鏁版嵁鍒板悗绔�</el-button> --> - </div> -</template> - -<script> -import LanguageMixin from '../../lang/LanguageMixin' -import data from '../../configuration/Manualoneposition2' -import { throttle } from 'lodash'; -let socket; -export default { - name: "ManualonePosition2", - mixins: [LanguageMixin], - data () { - return { - jsonData: data // 鍔犺浇鏁翠釜data.json鏂囦欢浣滀负jsonData - } - }, - created () { - this.initWebSocket(); - // console.log('jsonData:', this.jsonData); - - }, - methods: { - updateButtonValue (dataGroup, itemIndex) { - // 灏嗗綋鍓嶆寜閽殑鍊艰涓�1 - - this.$set(dataGroup[itemIndex].button, 'value', 1); - - - - }, - submitDataToBackend (currentButtonName) { - if (currentButtonName === 'A01缈昏浆鍚姩') { - const data = []; - - for (let i = 0; i < 1; i++) { - const inputData = this.jsonData[i].filter(item => item.type === '0').map(item => { - return { value: item.value }; - }); - - const values = inputData.map(item => item.value); - - data.push(values); - } - - - - const jsonObject = { data }; - - // 鎻愪氦鏁版嵁鍒板悗绔� - const jsonString = JSON.stringify(jsonObject); - console.log('鎵�鏈塗ype涓�0鐨剉alue:', jsonString); - socket?.send(jsonString); - - } - - if (currentButtonName === 'A02缈昏浆鍚姩') { - const data = []; - - for (let i = 1; i < 2; i++) { - const inputData = this.jsonData[i].filter(item => item.type === '0').map(item => { - return { value: item.value }; - }); - - const values = inputData.map(item => item.value); - data.unshift([]); - data.push(values); - } - - - - const jsonObject = { data }; - - // 鎻愪氦鏁版嵁鍒板悗绔� - const jsonString = JSON.stringify(jsonObject); - console.log('鎵�鏈塗ype涓�0鐨剉alue:', jsonString); - socket?.send(jsonString); - - } - - if (currentButtonName === '鏁呴殰') { - - const data2 = []; - const resetButtonValues = this.jsonData.map(item => { - const buttonItem = item.find(subItem => subItem.button && subItem.button.name === '鏁呴殰'); - return buttonItem ? buttonItem.button.value : null; - }).filter(value => value !== null); - - // 灏嗗緱鍒扮殑鍊兼坊鍔犲埌 data 鏁扮粍涓� - data2.push(...resetButtonValues); - data2.unshift([], []); - const jsonObject2 = { data2 }; - - // 鎻愪氦鏁版嵁鍒板悗绔� - const jsonString2 = JSON.stringify(jsonObject2); - console.log('鎵�鏈夋晠闅滅殑value:', jsonString2); - socket?.send(jsonString2); - - - } - - if (currentButtonName === '澶嶄綅') { - - const data2 = []; - const resetButtonValues = this.jsonData.map(item => { - const buttonItem = item.find(subItem => subItem.button && subItem.button.name === '澶嶄綅'); - return buttonItem ? buttonItem.button.value : null; - }).filter(value => value !== null); - - // 灏嗗緱鍒扮殑鍊兼坊鍔犲埌 data 鏁扮粍涓� - data2.push(...resetButtonValues); - data2.unshift([], [], []); - const jsonObject2 = { data2 }; - - // 鎻愪氦鏁版嵁鍒板悗绔� - const jsonString2 = JSON.stringify(jsonObject2); - console.log('鎵�鏈塗ype涓�0鐨剉alue:', jsonString2); - socket?.send(jsonString2); - - - } - - - }, - - - initWebSocket () { - - let viewname = "ManualonePosition2"; - - 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; // 濡傛灉鏀跺埌绌烘暟鎹紝鍒欑洿鎺ヨ繑鍥烇紝涓嶆墽琛屽悗缁�昏緫 - } - - let obj = JSON.parse(msg.data); - console.log(obj) - const jsonData2 = this.jsonData; - - const handleMouseMove = throttle(function (event) { - const inputBox = document.querySelectorAll('.el-card__body'); - const target = event.target; - if (inputBox && Array.from(inputBox).every(box => !box.contains(target))) { - // 鎵ц鏇存柊閫昏緫 - for (let i = 0; i < 2; i++) { - jsonData2[i].forEach((item, index) => { - if (typeof item.value !== 'undefined' && typeof obj[`zuhe${i + 1}`][0][index] !== 'undefined') { - item.value = obj[`zuhe${i + 1}`][0][index]; - } - }); - } - - jsonData2.forEach((item) => { - item.forEach((subItem) => { - if (subItem.sending === 4) { - subItem.value = obj.shishi1[0][0]; - } - if (subItem.sending === 5) { - subItem.value = obj.shishi1[0][1]; - } - if (subItem.sending === 6) { - subItem.value = obj.shishi1[0][2]; - } - if (subItem.sending === 7) { - subItem.value = obj.shishi1[0][3]; - } - }); - }); - - // 閬嶅巻guzhang鏁扮粍 - for (let i = 0; i < obj.guzhang[0].length; i++) { - const guzhangValue = obj.guzhang[0][i]; - - // 鏌ユ壘jsonData2涓甫鏈�"button"鐨勫璞★紝骞朵笖name绛変簬"鏁呴殰" - for (let j = 0; j < jsonData2.length; j++) { - const section = jsonData2[j]; - - for (let k = 0; k < section.length; k++) { - const item = section[k]; - - if (item.button && item.button.name === "鏁呴殰") { - // 鏇存柊value灞炴�� - item.button.value = guzhangValue; - break; - } - } - - - } - } - - - - - } - }, 200); - - document.addEventListener('mouseover', handleMouseMove); - }; - - - - - // 鍏抽棴浜嬩欢 - socket.onclose = function () { - console.log("websocket宸插叧闂�"); - }; - - // 鍙戠敓閿欒浜嬩欢 - socket.onerror = function () { - console.log("websocket鍙戠敓浜嗛敊璇�"); - }; - - } - }, - send () { - - - socket?.send(JSON.stringify(this.messagepack)); - } - - } -} -</script> - -<style scoped> -.item-row { - display: flex; - align-items: center; - margin-bottom: 2px; - /* 璋冩暣姣忎釜椤圭洰涔嬮棿鐨勯棿璺� */ -} - -.action-button { - margin-right: 10px; - background: #66b1ff; - color: #FFF; -} - -.blue-button { - background-color: skyblue; -} +<template> + <div class="app"> + <el-breadcrumb separator-class="el-icon-arrow-right" class="el-breadcrumb"> + <router-link to="/Electrical/alarm" tag="el-button" type="text" active-class="blue-button">{{ $t('Alarm') + }}</router-link> + <router-link to="/Electrical/State" tag="el-button" type="text" active-class="blue-button">{{ $t('State') + }}</router-link> + <router-link to="/Electrical/Action" tag="el-button" type="text" active-class="blue-button">{{ $t('Action') + }}</router-link> + <router-link to="/Electrical/Parameter" tag="el-button" type="text" active-class="blue-button">{{ $t('Parameter') + }}</router-link> + <router-link to="/Electrical/Sign" tag="el-button" type="text" active-class="blue-button">{{ $t('Sign') + }}</router-link> + <router-link to="/Electrical/Servomanual" tag="el-button" type="text" active-class="blue-button">{{ + $t('ServoManual') + }}</router-link> + </el-breadcrumb> + + <el-breadcrumb separator-class="el-icon-arrow-right" class="el-breadcrumb"> + + <router-link to="/Electrical/Servomanualone" tag="el-button" type="text" active-class="blue-button">{{ + $t('Servomanualone') + }}</router-link> + <router-link to="/Electrical/Parameter1" tag="el-button" type="text" active-class="blue-button">{{ $t('Parameter1') + }}</router-link> + <!-- <router-link to="/Electrical/Parameter2" tag="el-button" type="text" active-class="blue-button">{{ $t('Parameter2') + }}</router-link> --> + <router-link to="/Electrical/Positioning1" tag="el-button" type="text" active-class="blue-button">{{ + $t('Positioning1') + }}</router-link> + <router-link to="/Electrical/Positioning2" tag="el-button" type="text" active-class="blue-button">{{ + $t('Positioning2') + }}</router-link> + <router-link to="/Electrical/ManualonePosition" tag="el-button" type="text" active-class="blue-button">{{ + $t('ManualonePosition') + }}</router-link> + <router-link to="/Electrical/ManualonePosition2" tag="el-button" type="text" active-class="blue-button">{{ + $t('ManualonePosition2') + }}</router-link> + <router-link to="/Electrical/AutomaticParameterSetting" tag="el-button" type="text" active-class="blue-button">{{ + $t('AutomaticParameterSetting') + }}</router-link> + <router-link to="/Electrical/ManualJog" tag="el-button" type="text" active-class="blue-button">{{ + $t('ManualJog') + }}</router-link> + </el-breadcrumb> + + <el-row :gutter="20"> + <el-col :span="12" v-for="(dataGroup, groupIndex) in jsonData" :key="groupIndex"> + <el-card class="json-block" style="width:485px;"> + <div v-for="(item, itemIndex) in dataGroup" :key="itemIndex" class="item-container"> + <div class="item-row"> + <span class="name" style="width:100px;">{{ item.name }}</span> + <el-input style="width:250px;" v-if="item.state != 0 && item.type === '0'" v-model="item.value" + class="input-box"></el-input> + </div> + </div> + <div class="button-row" style="display: flex; justify-content: space-between;"> + <div v-for="(item, itemIndex) in dataGroup" :key="itemIndex"> + <el-button v-if="item.button && item.button.state != 0" :name="item.button.name" v-model="item.button.value" + :class="{ 'action-button': true, 'error-button': item.button.name === '鏁呴殰' && item.button.value === 1 }" + @click="updateButtonValue(dataGroup, itemIndex); submitDataToBackend(item.button.name);">{{ + item.button.name }}</el-button> + </div> + </div> + </el-card> + </el-col> + </el-row> + <!-- <el-button @click="submitDataToBackend">鎻愪氦鏁版嵁鍒板悗绔�</el-button> --> + </div> +</template> + +<script> +import LanguageMixin from '../../lang/LanguageMixin' +import data from '../../configuration/Manualoneposition2' +import { throttle } from 'lodash'; +let socket; +export default { + name: "ManualonePosition2", + mixins: [LanguageMixin], + data () { + return { + jsonData: data // 鍔犺浇鏁翠釜data.json鏂囦欢浣滀负jsonData + } + }, + created () { + this.initWebSocket(); + // console.log('jsonData:', this.jsonData); + + }, + methods: { + updateButtonValue (dataGroup, itemIndex) { + // 灏嗗綋鍓嶆寜閽殑鍊艰涓�1 + + this.$set(dataGroup[itemIndex].button, 'value', 1); + + + + }, + submitDataToBackend (currentButtonName) { + if (currentButtonName === 'A01缈昏浆鍚姩') { + const data = []; + + for (let i = 0; i < 1; i++) { + const inputData = this.jsonData[i].filter(item => item.type === '0').map(item => { + return { value: item.value }; + }); + + const values = inputData.map(item => item.value); + + data.push(values); + } + + + + const jsonObject = { data }; + + // 鎻愪氦鏁版嵁鍒板悗绔� + const jsonString = JSON.stringify(jsonObject); + console.log('鎵�鏈塗ype涓�0鐨剉alue:', jsonString); + socket?.send(jsonString); + + } + + if (currentButtonName === 'A02缈昏浆鍚姩') { + const data = []; + + for (let i = 1; i < 2; i++) { + const inputData = this.jsonData[i].filter(item => item.type === '0').map(item => { + return { value: item.value }; + }); + + const values = inputData.map(item => item.value); + data.unshift([]); + data.push(values); + } + + + + const jsonObject = { data }; + + // 鎻愪氦鏁版嵁鍒板悗绔� + const jsonString = JSON.stringify(jsonObject); + console.log('鎵�鏈塗ype涓�0鐨剉alue:', jsonString); + socket?.send(jsonString); + + } + + if (currentButtonName === '鏁呴殰') { + + const data2 = []; + const resetButtonValues = this.jsonData.map(item => { + const buttonItem = item.find(subItem => subItem.button && subItem.button.name === '鏁呴殰'); + return buttonItem ? buttonItem.button.value : null; + }).filter(value => value !== null); + + // 灏嗗緱鍒扮殑鍊兼坊鍔犲埌 data 鏁扮粍涓� + data2.push(...resetButtonValues); + data2.unshift([], []); + const jsonObject2 = { data2 }; + + // 鎻愪氦鏁版嵁鍒板悗绔� + const jsonString2 = JSON.stringify(jsonObject2); + console.log('鎵�鏈夋晠闅滅殑value:', jsonString2); + socket?.send(jsonString2); + + + } + + if (currentButtonName === '澶嶄綅') { + + const data2 = []; + const resetButtonValues = this.jsonData.map(item => { + const buttonItem = item.find(subItem => subItem.button && subItem.button.name === '澶嶄綅'); + return buttonItem ? buttonItem.button.value : null; + }).filter(value => value !== null); + + // 灏嗗緱鍒扮殑鍊兼坊鍔犲埌 data 鏁扮粍涓� + data2.push(...resetButtonValues); + data2.unshift([], [], []); + const jsonObject2 = { data2 }; + + // 鎻愪氦鏁版嵁鍒板悗绔� + const jsonString2 = JSON.stringify(jsonObject2); + console.log('鎵�鏈塗ype涓�0鐨剉alue:', jsonString2); + socket?.send(jsonString2); + + + } + + if (currentButtonName === '鍥為浂') { + + const data2 = []; + const resetButtonValues = this.jsonData.map(item => { + const buttonItem = item.find(subItem => subItem.button && subItem.button.name === '鍥為浂'); + return buttonItem ? buttonItem.button.value : null; + }).filter(value => value !== null); + + // 灏嗗緱鍒扮殑鍊兼坊鍔犲埌 data 鏁扮粍涓� + data2.push(...resetButtonValues); + data2.unshift([], [], [], []); + const jsonObject2 = { data2 }; + + // 鎻愪氦鏁版嵁鍒板悗绔� + const jsonString2 = JSON.stringify(jsonObject2); + console.log('鎵�鏈塗ype涓�0鐨剉alue:', jsonString2); + socket?.send(jsonString2); + + + } + + + }, + + + initWebSocket () { + + let viewname = "ManualonePosition2"; + + 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; // 濡傛灉鏀跺埌绌烘暟鎹紝鍒欑洿鎺ヨ繑鍥烇紝涓嶆墽琛屽悗缁�昏緫 + } + + let obj = JSON.parse(msg.data); + // console.log(obj) + const jsonData2 = this.jsonData; + + const handleMouseMove = throttle(function (event) { + const inputBox = document.querySelectorAll('.el-card__body'); + const target = event.target; + if (inputBox && Array.from(inputBox).every(box => !box.contains(target))) { + // 鎵ц鏇存柊閫昏緫 + for (let i = 0; i < 2; i++) { + jsonData2[i].forEach((item, index) => { + if (typeof item.value !== 'undefined' && typeof obj[`zuhe${i + 1}`][0][index] !== 'undefined') { + item.value = obj[`zuhe${i + 1}`][0][index]; + } + }); + } + + jsonData2.forEach((item) => { + item.forEach((subItem) => { + if (subItem.sending === 4) { + subItem.value = obj.shishi1[0][0]; + } + if (subItem.sending === 5) { + subItem.value = obj.shishi1[0][1]; + } + if (subItem.sending === 6) { + subItem.value = obj.shishi1[0][2]; + } + if (subItem.sending === 7) { + subItem.value = obj.shishi1[0][3]; + } + }); + }); + + // 閬嶅巻guzhang鏁扮粍 + for (let i = 0; i < obj.guzhang[0].length; i++) { + const guzhangValue = obj.guzhang[0][i]; + + // 鏌ユ壘jsonData2涓甫鏈�"button"鐨勫璞★紝骞朵笖name绛変簬"鏁呴殰" + for (let j = 0; j < jsonData2.length; j++) { + const section = jsonData2[j]; + + for (let k = 0; k < section.length; k++) { + const item = section[k]; + + if (item.button && item.button.name === "鏁呴殰") { + // 鏇存柊value灞炴�� + item.button.value = guzhangValue; + break; + } + } + + + } + } + + + + + } + }, 200); + + document.addEventListener('mouseover', handleMouseMove); + }; + + + + + // 鍏抽棴浜嬩欢 + socket.onclose = function () { + console.log("websocket宸插叧闂�"); + }; + + // 鍙戠敓閿欒浜嬩欢 + socket.onerror = function () { + console.log("websocket鍙戠敓浜嗛敊璇�"); + }; + + } + }, + send () { + + + socket?.send(JSON.stringify(this.messagepack)); + } + + } +} +</script> + +<style scoped> +.item-row { + display: flex; + align-items: center; + margin-bottom: 2px; + /* 璋冩暣姣忎釜椤圭洰涔嬮棿鐨勯棿璺� */ +} + +.action-button { + margin-right: 10px; + background: #66b1ff; + color: #FFF; +} + +.blue-button { + background-color: skyblue; +} </style> \ No newline at end of file -- Gitblit v1.8.0