From 2f78ef164653d5d30732d6e2e3f822a68de63010 Mon Sep 17 00:00:00 2001 From: ZengTao <2773468879@qq.com> Date: 星期四, 30 十一月 2023 09:41:39 +0800 Subject: [PATCH] Merge branch 'master' of http://10.153.19.25:10101/r/CanadaMes --- CanadaMes-ui/src/views/Electrical/ServoManualone.vue | 388 ++++++++++++++++++++++++++++++++---------------------- 1 files changed, 230 insertions(+), 158 deletions(-) diff --git a/CanadaMes-ui/src/views/Electrical/ServoManualone.vue b/CanadaMes-ui/src/views/Electrical/ServoManualone.vue index 5e5c1b6..dbee303 100644 --- a/CanadaMes-ui/src/views/Electrical/ServoManualone.vue +++ b/CanadaMes-ui/src/views/Electrical/ServoManualone.vue @@ -1,66 +1,56 @@ <template> - <div class="app"> + <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> + <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('Servo Manual') + }}</router-link> + </el-breadcrumb> - </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') + <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/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> </el-breadcrumb> <el-row :gutter="26"> - <el-col :span="12" v-for="(dataGroup, groupIndex) in jsonData" :key="groupIndex"> - <el-card class="json-block" style="width:auto;"> - <el-row> - <el-col v-for="(item, itemIndex) in dataGroup" :key="itemIndex" :span="12"> - <div class="item-container"> - <div class="item-row"> - <span class="name" style='width:230px;'>{{ item.name }}</span> - <el-input v-if="item.type === '0'" v-model="item.value" class='input-box' - :class="{ 'special-class': groupIndex === 0, 'special-class2': groupIndex === 1 }" - v-show="groupIndex !== 0 && groupIndex !== 1"></el-input> - </div> - </div> - </el-col> - </el-row> - <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" :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> - + <el-col :span="12" v-for="(dataGroup, groupIndex) in jsonData" :key="groupIndex" style="margin-bottom: -20px;"> + <el-card class="json-block" style="width:auto;margin-bottom: 10px;"> + <el-row > + <el-col v-for="(item, itemIndex) in dataGroup" :key="itemIndex" :span="12"> + <div class="item-container"> + <div class="item-row"> + <span class="name" style='width:230px;'>{{ item.name }}</span> + <el-input v-if="item.type === '0'" v-model="item.value" class='input-box' :class="{ 'special-class': groupIndex === 0,'special-class2': groupIndex === 1 }" v-show="groupIndex !== 0 && groupIndex !== 1" ></el-input> </div> </div> - </el-card> - </el-col> - </el-row> + </el-col> + </el-row> + <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" :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> @@ -70,13 +60,15 @@ import LanguageMixin from '../../lang/LanguageMixin' import data from '../../configuration/ServoManualone' import { throttle } from 'lodash'; + let socket; -export default { + export default { name: "ServoManualone", mixins: [LanguageMixin], - data () { + + data() { return { - jsonData: data, + jsonData: data , // 鍔犺浇鏁翠釜data.json鏂囦欢浣滀负jsonData } @@ -86,85 +78,143 @@ // console.log('jsonData:', this.jsonData); }, + methods: { - updateButtonValue (dataGroup, itemIndex) { - // 灏嗗綋鍓嶆寜閽殑鍊艰涓�1 + + + updateButtonValue(dataGroup, itemIndex) { + // 灏嗗綋鍓嶆寜閽殑鍊艰涓�1 + this.$set(dataGroup[itemIndex].button, 'value', 1); + + // 灏嗗叾浠栨寜閽殑鍊艰涓�0 + // dataGroup.forEach((item, index) => { + // if (index !== itemIndex && item.button) { + // this.$set(item.button, 'value', 0); + // } + // }); +}, +submitDataToBackend(currentButtonName) { + if (currentButtonName === 'A01鍗婅嚜鍔ㄥ惎鍔�') { + const data = []; - this.$set(dataGroup[itemIndex].button, 'value', 1); +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 }; - }, - submitDataToBackend (currentButtonName) { - if (currentButtonName === '鍗婅嚜鍔ㄥ惎鍔�') { - const data = []; +// 鎻愪氦鏁版嵁鍒板悗绔� +const jsonString = JSON.stringify(jsonObject); +console.log('鎵�鏈塗ype涓�0鐨剉alue:', jsonString); +socket?.send(jsonString); - for (let i = 0; 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); + if (currentButtonName === 'A02鍗婅嚜鍔ㄥ惎鍔�') { + const data2 = []; - data.push(values); - } +for (let i = 1; i < 2; i++) { + const inputData = this.jsonData[i].filter(item => item.type === '0').map(item => { + return { value: item.value }; + }); + const values2 = inputData.map(item => item.value); + data2.push(values2); - const jsonObject = { data }; +} +data2.unshift([]); +const jsonObject = { data:data2 }; - // 鎻愪氦鏁版嵁鍒板悗绔� - const jsonString = JSON.stringify(jsonObject); - console.log('鎵�鏈塗ype涓�0鐨剉alue:', jsonString); - socket?.send(jsonString); +// 鎻愪氦鏁版嵁鍒板悗绔� +const jsonString = JSON.stringify(jsonObject); +console.log('鎵�鏈塗ype涓�0鐨剉alue:', jsonString); +socket?.send(jsonString); - } + } - if (currentButtonName === '澶嶄綅') { + 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); - 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.flat()); - // 灏嗗緱鍒扮殑鍊兼坊鍔犲埌 data 鏁扮粍涓� - data2.push(...resetButtonValues); - const jsonObject2 = { data2 }; + // 鍦� data2 鏁扮粍鍓嶉潰娣诲姞涓や釜绌烘暟缁� + data2.unshift([], []); - // 鎻愪氦鏁版嵁鍒板悗绔� - const jsonString2 = JSON.stringify(jsonObject2); - console.log('鎵�鏈塗ype涓�0鐨剉alue:', jsonString2); - socket?.send(jsonString2); + // 鍒涘缓 jsonObject2 瀵硅薄锛屽苟娣诲姞 data2 灞炴�� + const jsonObject2 = { data: data2 }; + // 鎻愪氦鏁版嵁鍒板悗绔� + const jsonString2 = JSON.stringify(jsonObject2); + console.log('鎵�鏈塗ype涓�0鐨剉alue:', jsonString2); + socket?.send(jsonString2); + window.location.reload(); +} - } - if (currentButtonName === 'A01鍗婅嚜鍔�') { - const elements = document.getElementsByClassName('special-class'); - for (let i = 0; i < elements.length; i++) { - if (elements[i].style.display === 'none') { - elements[i].style.display = ''; // 鏄剧ず鍏冪礌 - } - } - } +if (currentButtonName === '鍥為浂') { + const data3 = []; + const resetButtonValues3 = this.jsonData.map(item => { + const buttonItem3 = item.find(subItem => subItem.button && subItem.button.name === '鍥為浂'); + return buttonItem3 ? buttonItem3.button.value : null; + }).filter(value => value !== null); - if (currentButtonName === 'A02鍗婅嚜鍔�') { - const elements = document.getElementsByClassName('special-class2'); - for (let i = 0; i < elements.length; i++) { - if (elements[i].style.display === 'none') { - elements[i].style.display = ''; // 鏄剧ず鍏冪礌 - } - } - } + // 灏嗗緱鍒扮殑鍊兼坊鍔犲埌 data 鏁扮粍涓� + data3.push(resetButtonValues3.flat()); + + // 鍦� data3 鏁扮粍鍓嶉潰娣诲姞涓や釜绌烘暟缁� + data3.unshift([], [], []); + + // 鍒涘缓 jsonObject2 瀵硅薄锛屽苟娣诲姞 data3 灞炴�� + const jsonObject3 = { data: data3 }; + + // 鎻愪氦鏁版嵁鍒板悗绔� + const jsonString3 = JSON.stringify(jsonObject3); + console.log('鍥為浂:', jsonString3); + socket?.send(jsonString3); + window.location.reload(); +} - }, + if (currentButtonName === 'A01鍗婅嚜鍔�') { + const elements = document.getElementsByClassName('special-class'); + for (let i = 0; i < elements.length; i++) { + if (elements[i].style.display === 'none') { + elements[i].style.display = ''; // 鏄剧ず鍏冪礌 + } + } + } + + if (currentButtonName === 'A02鍗婅嚜鍔�') { + const elements = document.getElementsByClassName('special-class2'); + for (let i = 0; i < elements.length; i++) { + if (elements[i].style.display === 'none') { + elements[i].style.display = ''; // 鏄剧ず鍏冪礌 + } + } + } + + + + +}, initWebSocket () { - + let viewname = "ServoManualone"; if (typeof WebSocket === "undefined") { @@ -187,57 +237,78 @@ // 鏀跺埌娑堟伅 socket.onmessage = (msg) => { - if (!msg.data) { - return; // 濡傛灉鏀跺埌绌烘暟鎹紝鍒欑洿鎺ヨ繑鍥烇紝涓嶆墽琛屽悗缁�昏緫 - } + if (!msg.data) { + return; // 濡傛灉鏀跺埌绌烘暟鎹紝鍒欑洿鎺ヨ繑鍥烇紝涓嶆墽琛屽悗缁�昏緫 + } - let obj = JSON.parse(msg.data); - console.log(obj) - const jsonData2 = this.jsonData; + 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 < 6; 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]; - } - }); - } + 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 < 6; 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]; + } + }); +} - // 閬嶅巻guzhang鏁扮粍 - for (let i = 0; i < obj.guzhang[0].length; i++) { - const guzhangValue = obj.guzhang[0][i]; +// 閬嶅巻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; + } + } + + + } +} - // 鏌ユ壘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; - } - } - - - } - } +for (let i = 0; i < obj.weihuiling[0].length; i++) { + const weihuilingValue = obj.weihuiling[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 = weihuilingValue; + break; + } + } + + + } +} - } - }, 200); + } +}, 500); - document.addEventListener('mouseover', handleMouseMove); - }; + document.addEventListener('mouseover', handleMouseMove); +}; @@ -255,21 +326,22 @@ } }, send () { - - + + socket?.send(JSON.stringify(this.messagepack)); } } -} + } </script> <style scoped> + + .item-row { display: flex; align-items: center; - margin-bottom: 2px; - /* 璋冩暣姣忎釜椤圭洰涔嬮棿鐨勯棿璺� */ + margin-bottom: 2px; /* 璋冩暣姣忎釜椤圭洰涔嬮棿鐨勯棿璺� */ } .action-button { @@ -277,12 +349,12 @@ background: #66b1ff; color: #FFF; } - .blue-button { background-color: skyblue; } - .error-button { background-color: red; } + + </style> \ No newline at end of file -- Gitblit v1.8.0