| | |
| | | |
| | | </el-breadcrumb> --> |
| | | |
| | | <el-row :gutter="40" > |
| | | <el-col :span="26" v-for="(dataGroup, groupIndex) in jsonData" :key="groupIndex"> |
| | | <el-card class="json-block" style="width:100%;"> |
| | | <el-row :gutter="40"> |
| | | <el-col :span="26" v-for="(dataGroup, groupIndex) in jsonData" :key="groupIndex"> |
| | | <el-card class="json-block" style="width:100%;"> |
| | | <!-- 使用容器显示文字 --> |
| | | <div style="position: relative;"> |
| | | <div class="extra-data" style="margin-top: 2px; display: flex;"> |
| | | <div v-for="(extraItem, extraIndex) in extraData[groupIndex]" :key="extraIndex" > |
| | | {{ extraItem }} |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="button-row" style="display: flex; justify-content: flex-start;flex-wrap:wrap;"> |
| | | <div v-for="(item, itemIndex) in dataGroup" :key="itemIndex" style="margin: 10px;"> |
| | | <el-button v-if="item.button" v-model="item.button.value" :name="item.button.name" style='width:200px;' |
| | | :class="{ 'dow': item.button.value === 0, 'op': item.button.value === 1 }" class="action-button" |
| | | @click="updateButtonValue(dataGroup, itemIndex); submitDataToBackend(item.button.name);">{{ |
| | | item.button.name |
| | | }}</el-button> |
| | | </div> |
| | | |
| | | |
| | | <div class="button-row" style="display: flex; justify-content: flex-start; flex-wrap: wrap;"> |
| | | <div v-for="(item, itemIndex) in dataGroup" :key="itemIndex" style="margin: 10px;"> |
| | | <el-button v-if="item.button" v-model="item.button.value" :name="item.button.name" style='width:130px;' |
| | | :class="{ 'dow': item.button.value === 0, 'op': item.button.value === 1 }" class="action-button" |
| | | @click="updateButtonValue(dataGroup, itemIndex); submitDataToBackend();"> |
| | | {{ item.button.name }} |
| | | </el-button> |
| | | </div> |
| | | </el-card> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | </div> |
| | | </el-card> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <!-- <el-button @click="submitDataToBackend">提交数据到后端</el-button> --> |
| | | </div> |
| | | </template> |
| | |
| | | return { |
| | | jsonData: data, // 加载整个data.json文件作为jsonData |
| | | password: 1, |
| | | extraData: [ |
| | | "Infeed/Outfeed Conveyos", |
| | | "A01", |
| | | "A02", |
| | | "B01", |
| | | "B02", |
| | | |
| | | ] |
| | | } |
| | | }, |
| | | activated () { |
| | |
| | | |
| | | |
| | | }, |
| | | submitDataToBackend (currentButtonName) { |
| | | submitDataToBackend () { |
| | | |
| | | if (currentButtonName === 'A01 SERVE TRAVEL Home' || currentButtonName === 'A02 SERVE TRAVEL Home' || currentButtonName === 'A01行走伺服回零' || currentButtonName === 'A02行走伺服回零') { |
| | | this.$prompt( |
| | | this.$t('Are you sure to perform this operation?'), |
| | | this.$t('prompt'), |
| | | { |
| | | inputType: 'password', |
| | | inputPlaceholder: this.$t('Please enter the password'), |
| | | confirmButtonText: this.$t('Yes'), |
| | | cancelButtonText: this.$t('No'), |
| | | type: 'warning', |
| | | } |
| | | ).then(({ value }) => { |
| | | // 验证密码是否正确 |
| | | if (value !== this.password) { |
| | | this.$message.error(this.$t('Incorrect password')); |
| | | return; |
| | | } |
| | | |
| | | // 密码正确,继续提交数据到后端 |
| | | const inputData = this.jsonData.map(dataGroup => { |
| | |
| | | console.log('Type为3的value:', jsonString); |
| | | socket?.send(jsonString); |
| | | |
| | | }).catch(() => { |
| | | // 取消操作 |
| | | console.log('取消'); |
| | | }); |
| | | } else { |
| | | // 如果不是 A01 SERVE TRAVEL Home 按钮,继续提交数据到后端 |
| | | const inputData = this.jsonData.map(dataGroup => { |
| | | return dataGroup.map(item => { |
| | | if (item.type === '3') { |
| | | return { value: item.button.value2 }; |
| | | } |
| | | return null; |
| | | }); |
| | | }); |
| | | |
| | | const values = inputData.flat().filter(item => item !== null).map(item => item.value); |
| | | |
| | | const jsonObject = { data: values }; |
| | | |
| | | // 提交数据到后端 |
| | | const jsonString = JSON.stringify(jsonObject); |
| | | console.log('Type为3的value:', jsonString); |
| | | socket?.send(jsonString); |
| | | } |
| | | }, |
| | | |
| | | initWebSocket () { |
| | |
| | | socket.onopen = function () { |
| | | console.log("websocket已打开"); |
| | | }; |
| | | let isUpdated = false; // 定义标志变量 |
| | | let isUpdated = false; // 定义标志变量 |
| | | // 收到消息 |
| | | socket.onmessage = (msg) => { |
| | | if (!msg.data) { |
| | |
| | | |
| | | |
| | | |
| | | for (let i = 0; i < jsonData2.length; i++) { |
| | | let arr = jsonData2[i]; |
| | | for (let j = 0; j < arr.length; j++) { |
| | | let obj = arr[j]; |
| | | obj.button.value = parms[0][j]; |
| | | // obj.button.value2 = parms[0][j]; |
| | | // obj.button.value2 =obj.button.value; |
| | | |
| | | let index = 0; |
| | | for (let i = 0; i < jsonData2.length ; i++) { |
| | | let arr = jsonData2[i]; |
| | | |
| | | |
| | | } |
| | | |
| | | for (let j = 0; j < arr.length; j++) { |
| | | let obj = arr[j]; |
| | | |
| | | if ( parms[0][index] !== undefined) { |
| | | obj.button.value = parms[0][index]; |
| | | index++; |
| | | } |
| | | |
| | | } |
| | | } |
| | | |
| | | jsonData2[1][0].button.value = obj.params[0][26]; |
| | | jsonData2[1][1].button.value = obj.params[0][27]; |
| | | |
| | | |
| | | console.log(this.jsonData) |
| | | |
| | | |
| | | if (!isUpdated) { |