| | |
| | | <template> |
| | | <div class="app"> |
| | | <el-breadcrumb separator-class="el-icon-arrow-right" class="el-breadcrumb"> |
| | | <!-- <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('Parameter') |
| | | }}</router-link> |
| | | </el-breadcrumb> |
| | | </el-breadcrumb> --> |
| | | |
| | | <el-breadcrumb separator-class="el-icon-arrow-right" class="el-breadcrumb"> |
| | | <!-- <el-breadcrumb separator-class="el-icon-arrow-right" class="el-breadcrumb"> |
| | | <router-link to="/Electrical/Parameter2" tag="el-button" type="text" active-class="blue-button">{{ $t('Automatic State') |
| | | }}</router-link> |
| | | <router-link to="/Electrical/ManualJog" tag="el-button" type="text" active-class="blue-button">{{ |
| | |
| | | <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/Positioning1" tag="el-button" type="text" active-class="blue-button">{{ |
| | | $t('Address parameter settings') |
| | | }}</router-link> |
| | | <!-- <router-link to="/Electrical/Positioning2" tag="el-button" type="text" active-class="blue-button">{{ |
| | | $t('Positioning2') |
| | | }}</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('Speed parameter settings') |
| | | }}</router-link> |
| | | |
| | | </el-breadcrumb> |
| | | </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 () { |
| | |
| | | if (language === 'en-US') { |
| | | this.replaceChineseWithEnglish(); |
| | | } |
| | | // this.$forceUpdate(); |
| | | |
| | | SelectPassword().then(res => { |
| | | this.password = res.data.password; |
| | | console.log(this.password) |
| | | }); |
| | | |
| | | this.load(); |
| | | |
| | | }, |
| | | methods: { |
| | | closeSocket () { |
| | |
| | | this.$set(dataGroup[itemIndex].button, 'value2', 0); |
| | | } |
| | | }, |
| | | submitDataToBackend (currentButtonName) { |
| | | load(){ |
| | | |
| | | 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; |
| | | } |
| | | SelectPassword().then(res => { |
| | | this.password = res.data.password; |
| | | console.log(this.password) |
| | | }); |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | console.log(this.jsonData) |
| | | |
| | | |
| | | |
| | | }, |
| | | submitDataToBackend () { |
| | | |
| | | |
| | | // 密码正确,继续提交数据到后端 |
| | | 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); |
| | | } |
| | | }, |
| | | //根据读取PLC的值,根据名称改变颜色1打开,0关闭 |
| | | // getStatusClass (zhuangtai) { |
| | | // // console.log(zhuangtai); |
| | | // if (zhuangtai === 1) { |
| | | // return "op"; |
| | | // } |
| | | // else { |
| | | // return "dow"; |
| | | // } |
| | | |
| | | // }, |
| | | initWebSocket () { |
| | | let viewname = "ManualJog"; |
| | | |
| | |
| | | socket.onopen = function () { |
| | | console.log("websocket已打开"); |
| | | }; |
| | | |
| | | 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) { |
| | | for (let i = 0; i < this.jsonData.length; i++) { |
| | | for (let j = 0; j < this.jsonData[i].length; j++) { |
| | | this.jsonData[i][j].button.value2 = this.jsonData[i][j].button.value; |
| | | } |
| | | } |
| | | isUpdated = true; // 更新标志变量的值 |
| | | } |
| | | |
| | | |
| | | |
| | |
| | | |
| | | }; |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | // 关闭事件 |
| | | socket.onclose = function () { |
| | | console.log("websocket已关闭"); |