CanadaMes.git - Gitblit

<template> 
  <div class="app"> 
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right" class="el-breadcrumb"> 
    
      <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 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">{{ 
        $t('ManualJog') 
      }}</router-link> 
       
       <router-link to="/Electrical/ManualonePosition" tag="el-button" type="text" active-class="blue-button">{{ 
        $t('ManualonePosition') 
      }}</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/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-row :gutter="20"> 
      <el-col :span="12" v-for="(dataGroup, groupIndex) in jsonData" :key="groupIndex"> 
        <el-card class="json-block" style="width:600px;"> 
          <div v-for="(item, itemIndex) in dataGroup" :key="itemIndex" class="item-container"> 
            <div class="item-row"> 
              <span class="name" style="width:300px;">{{ item.name }}</span> 
              
                 
 <el-input style="width:250px;"  v-if="item.state != 0 && item.type === '0' && groupIndex === 0 && (itemIndex === 2)"  readonly v-model="item.value"   
                class="input-box"   :oninput="`value=value.replace(/^0|[^0-9]/g,'');if(value<`+item.min+`){value=`+item.value+`}else if(value>`+item.max+`){value=`+item.value+`}`"></el-input> 
 
 
                <el-input style="width:250px;" v-else-if="item.state != 0 && item.type === '0' && groupIndex === 1 && (itemIndex === 2)"  readonly v-model="item.value" 
                class="input-box"   :oninput="`value=value.replace(/^0|[^0-9]/g,'');if(value<`+item.min+`){value=`+item.value+`}else if(value>`+item.max+`){value=`+item.value+`}`"></el-input> 
 
                <el-input style="width:250px;" v-else-if="item.state != 0 && item.type === '0' && groupIndex === 0 "   v-model="item.value"  @keyup.enter.native="A01start($event)" 
                class="input-box"   :oninput="`value=value.replace(/^0|[^0-9]/g,'');if(value<`+item.min+`){value=`+item.value+`}else if(value>`+item.max+`){value=`+item.value+`}`"></el-input> 
 
 
                <el-input style="width:250px;" v-else-if="item.state != 0 && item.type === '0' && groupIndex === 1 "  v-model="item.value" @keyup.enter.native="A02start($event)" 
                class="input-box"   :oninput="`value=value.replace(/^0|[^0-9]/g,'');if(value<`+item.min+`){value=`+item.value+`}else if(value>`+item.max+`){value=`+item.value+`}`"></el-input> 
 
 
 
 
                <el-input style="width:250px;" v-else-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 && language === 'en-US' " :name="item.button.name" v-model="item.button.value" 
                :class="{ 'action-button': true, 'error-button': item.button.name === 'Fault' && item.button.value === 1, 'error-button2': item.button.name === 'Homing Failure' && item.button.value === 1,'error-button3': item.button.name === 'Homing Complete' && item.button.value ===0,'greenbutton': item.button.name !== 'Homing Failure' && item.button.name !== 'Fault' && item.button.value === 1 }" 
                @click="updateButtonValue(dataGroup, itemIndex); submitDataToBackend(item.button.name);">{{ 
                  item.button.name }}</el-button> 
              <el-button v-if="item.button && language === 'zh-CN' " :name="item.button.name" v-model="item.button.value" 
                :class="{ 'action-button': true, 'error-button': item.button.name === '故障' && item.button.value === 1, 'error-button2': item.button.name === '未回零' && item.button.value === 1,'error-button3': item.button.name === '已回零' && item.button.value === 0,'greenbutton': item.button.name !== '未回零' && 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' 
 
let socket; 
export default { 
  name: "ManualonePosition2", 
  mixins: [LanguageMixin], 
  data () { 
    return { 
      jsonData: data, // 加载整个data.json文件作为jsonData 
      language: this.$i18n.locale, 
    } 
  }, 
 
  activated () { 
 
    this.initWebSocket(); 
    const language = this.$i18n.locale; 
    console.log(language); 
    if (language === 'en-US') { 
      this.replaceChineseWithEnglish(); 
    } 
    this.$forceUpdate(); 
 
 
  }, 
 
  methods: { 
    closeSocket () { 
      // 关闭 WebSocket 连接 
      socket.close(); 
    }, 
    updateButtonValue (dataGroup, itemIndex) { 
      // 将当前按钮的值设为1 
 
      if (dataGroup[itemIndex].button.value === 0) { 
    // 如果当前按钮的值是 0，将其设为 1 
    this.$set(dataGroup[itemIndex].button, 'value', 1); 
  } else { 
    // 否则将其设为 0 
    this.$set(dataGroup[itemIndex].button, 'value', 0); 
  } 
 
 
 
    }, 
 
 
    A01start(event){ 
      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); 
} 
data.push([], [], [],[]); 
 
 
 
const jsonObject = { data }; 
 
// 提交数据到后端 
const jsonString = JSON.stringify(jsonObject); 
console.log('所有Type为0的value:', jsonString); 
socket?.send(jsonString); 
event.target.blur(); // 取消输入框焦点 
 
    }, 
    A02start(event){ 
 
      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); 
} 
data.push([], [], []); 
 
 
const jsonObject = { data }; 
 
// 提交数据到后端 
const jsonString = JSON.stringify(jsonObject); 
console.log('所有Type为0的value:', jsonString); 
socket?.send(jsonString); 
event.target.blur(); // 取消输入框焦点 
    }, 
    //提交方法 
    submitDataToBackend (currentButtonName) { 
      if (currentButtonName === 'A01翻转启动' || currentButtonName === 'A01 Tilt') { 
        const data = []; 
 
const values = [this.jsonData[0][3].button.value] 
 
        data.push(values); 
      
      data.unshift([], [], [],[],[]); 
 
 
 
      const jsonObject = { data }; 
 
      // 提交数据到后端 
      const jsonString = JSON.stringify(jsonObject); 
      console.log('所有Type为0的value:', jsonString); 
      socket?.send(jsonString); 
    //   setTimeout(() => { 
    // const reversedData = data.map(values => values.map(value => { 
    //   return   (!value || value === 1) ? 0 : 0 ; 
    // })); 
 
   // const reversedJsonObject = { data: reversedData }; 
 
    // 提交数据到后端 
  //   const reversedJsonString = JSON.stringify(reversedJsonObject); 
  //   console.log('反转后:', reversedJsonString); 
  //   socket?.send(reversedJsonString); 
  // }, 1000); 
 
      } 
 
      if (currentButtonName === 'A02翻转启动' || currentButtonName === 'A02 Tilt') { 
        const data = []; 
 
const values = [this.jsonData[1][3].button.value] 
 
        data.push(values); 
      
      data.unshift([], [], [],[],[],[]); 
 
 
 
      const jsonObject = { data }; 
 
      // 提交数据到后端 
      const jsonString = JSON.stringify(jsonObject); 
      console.log('所有Type为0的value:', jsonString); 
      socket?.send(jsonString); 
    //   setTimeout(() => { 
    // const reversedData = data.map(values => values.map(value => { 
    //   return   (!value || value === 1) ? 0 : 0 ; 
    // })); 
 
   // const reversedJsonObject = { data: reversedData }; 
 
  //   // 提交数据到后端 
  //   const reversedJsonString = JSON.stringify(reversedJsonObject); 
  //   console.log('反转后:', reversedJsonString); 
  //   socket?.send(reversedJsonString); 
  // }, 1000); 
 
      } 
 
      if (currentButtonName === '故障' || currentButtonName === 'Fault') { 
        return false; 
 
        // const data2 = []; 
        // const resetButtonValues = this.jsonData.map(item => { 
        //   const buttonItem = item.find(subItem => subItem.button && ['故障', 'Fault'].includes(subItem.button.name)); 
 
        //   return buttonItem ? buttonItem.button.value : null; 
        // }).filter(value => value !== null); 
 
        // // 将得到的值添加到 data 数组中 
        // data2.push(...resetButtonValues); 
        // data2.unshift([], []); 
        // const jsonObject2 = { data2 }; 
        // data2.push([], []); 
 
        // // 提交数据到后端 
        // const jsonString2 = JSON.stringify(jsonObject2); 
        // console.log('所有故障的value:', jsonString2); 
        // socket?.send(jsonString2); 
 
 
      } 
 
      if (currentButtonName === '复位' || currentButtonName === 'Reset') { 
 
        const data2 = []; 
        const resetButtonValues = this.jsonData.map(item => { 
          const buttonItem = item.find(subItem => subItem.button && ['复位', 'Reset'].includes(subItem.button.name)); 
 
          return buttonItem ? buttonItem.button.value : null; 
        }).filter(value => value !== null); 
 
        // 将得到的值添加到 data 数组中 
        data2.push(resetButtonValues.flat()); 
        data2.unshift([], [], []); 
        const jsonObject2 = { data:data2 }; 
        data2.push([]); 
 
        // 提交数据到后端 
        const jsonString2 = JSON.stringify(jsonObject2); 
        console.log('所有Type为0的value:', jsonString2); 
        socket?.send(jsonString2); 
        setTimeout(() => { 
    const reversedData = data2.map(values => values.map(value => { 
      return   (!value || value === 1) ? 0 : 0 ; 
    })); 
 
    const reversedJsonObject = { data: reversedData }; 
 
    // 提交数据到后端 
    const reversedJsonString = JSON.stringify(reversedJsonObject); 
    console.log('反转后:', reversedJsonString); 
    socket?.send(reversedJsonString); 
  }, 1000); 
 
 
      } 
 
      if (currentButtonName === '回零' || currentButtonName === 'Home') { 
 
        const data2 = []; 
        const resetButtonValues = this.jsonData.map(item => { 
          const buttonItem = item.find(subItem => subItem.button && ['回零', 'Home'].includes(subItem.button.name)); 
 
          return buttonItem ? buttonItem.button.value : null; 
        }).filter(value => value !== null); 
 
        // 将得到的值添加到 data 数组中 
        data2.push(resetButtonValues.flat()); 
        data2.unshift([], [], [], []); 
        const jsonObject2 = { data:data2 }; 
        // 提交数据到后端 
        const jsonString2 = JSON.stringify(jsonObject2); 
        console.log('所有Type为0的value:', jsonString2); 
        socket?.send(jsonString2); 
        setTimeout(() => { 
    const reversedData = data2.map(values => values.map(value => { 
      return   (!value || value === 1) ? 0 : 0 ; 
    })); 
 
    const reversedJsonObject = { data: reversedData }; 
 
    // 提交数据到后端 
    const reversedJsonString = JSON.stringify(reversedJsonObject); 
    console.log('反转后:', reversedJsonString); 
    socket?.send(reversedJsonString); 
  }, 1000); 
 
 
      } 
 
 
    }, 
 
 
    initWebSocket () { 
 
      let viewname = "ManualonePosition2"; 
 
      if (typeof WebSocket === "undefined") { 
        console.log("您的浏览器不支持WebSocket"); 
      } else { 
        let socketUrl = "ws://" + this.$t('ip')+":8888" + "/springboot-vue3/api/talk/" + viewname; 
 
        if (socket != null) { 
          socket.close(); 
          socket = null; 
        } 
 
        // 开启一个websocket服务 
        socket = new WebSocket(socketUrl); 
 
        // 打开事件 
        socket.onopen = function () { 
          console.log("websocket已打开"); 
        }; 
 
        // 收到消息 
//         let isMouseInInputBox = false; // 标记鼠标是否在输入框内 
 
// const inputBox = document.querySelectorAll('.input-box'); 
// inputBox.forEach(box => { 
//   box.addEventListener('mouseenter', () => { 
//     isMouseInInputBox = true; 
//   }); 
//   box.addEventListener('mouseleave', () => { 
//     isMouseInInputBox = false; 
//   }); 
// }); 
 
socket.onmessage = (msg) => { 
  if (!msg.data) { 
    return; // 如果收到空数据，则直接返回，不执行后续逻辑 
  } 
 
  if (document.activeElement.tagName.toLowerCase() === 'input') { 
    return; 
  } 
 
 
          let obj = JSON.parse(msg.data); 
          // console.log(obj) 
          const jsonData2 = this.jsonData; 
          const weihuiling = obj.weihuiling; 
 
 
 
             
            if (obj.zuhe1 ) { 
              // 执行更新逻辑 
              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]; 
                  } 
                }); 
              }); 
 
             
 
 
 
 
            } 
          
 
      
 
 
 
          if(obj.zuhe1){ 
 
 
 
          
  // 遍历guzhang数组 
  for (let i = 0; i < jsonData2.length; i++) { 
                let arr = jsonData2[i]; 
                for (let j = 0; j < arr.length; j++) { 
                  let obj2 = arr[j]; 
                  if (obj2.button && (obj2.button.name === "故障" || obj2.button.name === "Fault")) { 
                    obj2.button.value = obj.guzhang[0][i]; 
                    // console.log(obj2.button.value) 
                  } 
                } 
 
 
              } 
 
                 
 
//未回零 
              for (let i = 0; i < jsonData2.length; i++) { 
                let arr2 = jsonData2[i]; 
                for (let j = 0; j < arr2.length; j++) { 
                  let obj3 = arr2[j]; 
                  if (obj3.button) { 
                    if (obj3.button && (obj3.button.name === "未回零" || obj3.button.name === "Homing Failure" || obj3.button.name === "已回零" || obj3.button.name === "Homing Complete")) { 
                      obj3.button.value = weihuiling[0][i]; 
                      //  console.log(obj3.button.value) 
                    } 
 
                  } 
 
                } 
 
 
              } 
 
              //启动 
              // for (let i = 0; i < jsonData2.length; i++) { 
              //   let arr4 = jsonData2[i]; 
              //   for (let j = 0; j < arr4.length; j++) { 
              //     let obj4 = arr4[j]; 
              //     if (obj4.button && (obj4.button.name.includes("启动") || obj4.button.name.includes("Start"))) { 
              //       obj4.button.value = obj.qidong[0][i]; 
              //       // console.log(obj2.button.value) 
              //     } 
              //   } 
 
 
              // } 
 
 
 
              // for (let i = 0; i < jsonData2.length; i++) { 
              //   let arr4 = jsonData2[i]; 
              //   for (let j = 0; j < arr4.length; j++) { 
              //     let obj4 = arr4[j]; 
              //     if (obj4.button && (obj4.button.name.includes("启动") || obj4.button.name.includes("Start"))) { 
              //       obj4.button.value = obj.qidong[0][i]; 
              //       // console.log(obj2.button.value) 
              //     } 
              //   } 
 
 
              // } 
 
              // for (let i = 0; i < jsonData2.length; i++) { 
              //   let arr4 = jsonData2[i]; 
              //   for (let j = 0; j < arr4.length; j++) { 
              //     let obj4 = arr4[j]; 
              //     if (obj4.button && (obj4.button.name.includes("复位") || obj4.button.name.includes("Reast"))) { 
              //       obj4.button.value = obj.fuwei[0][i]; 
              //       // console.log(obj2.button.value) 
              //     } 
              //   } 
 
 
              // } 
 
              // for (let i = 0; i < jsonData2.length; i++) { 
              //   let arr4 = jsonData2[i]; 
              //   for (let j = 0; j < arr4.length; j++) { 
              //     let obj4 = arr4[j]; 
              //     if (obj4.button && (obj4.button.name.includes("回零") || obj4.button.name.includes("Home"))) { 
              //       obj4.button.value = obj.huiling[0][i]; 
              //       // console.log(obj2.button.value) 
              //     } 
              //   } 
 
 
              // } 
 
 
 
 
              //改变未回零文字 
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 (obj.button && obj.button.value===0) { 
      if ( obj.button.name==="未回零" && this.language==="zh-CN") { 
      obj.button.name =obj.button.name.replace("未回零","已回零") ; 
    } 
    if ( obj.button.name==="Homing Failure") { 
      obj.button.name =obj.button.name.replace("Homing Failure","Homing Complete") ; 
    } 
  } 
  if (obj.button && obj.button.value===1) { 
      if ( obj.button.name==="已回零"&& this.language==="zh-CN") { 
      obj.button.name =obj.button.name.replace("已回零","未回零") ; 
    } 
    if ( obj.button.name==="Homing Complete") { 
      obj.button.name =obj.button.name.replace("Homing Complete","Homing Failure") ; 
    } 
  } 
 
      
} 
} 
 
} 
 
        }; 
 
 
 
 
        // 关闭事件 
        socket.onclose = function () { 
          console.log("websocket已关闭"); 
        }; 
 
        // 发生错误事件 
        socket.onerror = function () { 
          console.log("websocket发生了错误"); 
        }; 
        this.$router.afterEach(function () { 
          socket.close(); 
        }) 
 
      } 
    }, 
    send () { 
 
 
      socket?.send(JSON.stringify(this.messagepack)); 
    }, 
    replaceChineseWithEnglish () { 
 
 
      const nameMap = this.$t('Manualoneposition2lang') 
      this.jsonData = this.jsonData.map((item) => { 
        return item.map((obj) => { 
          if (obj.name) { 
            const newName = nameMap[obj.name] || obj.name; 
            return { ...obj, name: newName }; 
          } else if (obj.button && obj.button.name) { 
            const newName = nameMap[obj.button.name] || obj.button.name; 
            return { ...obj, button: { ...obj.button, name: newName } }; 
          } else if (obj.title && obj.title.name) { 
            const newName = nameMap[obj.title.name] || obj.title.name; 
            return { ...obj, title: { ...obj.title, name: newName } }; 
          } else { 
            return obj; 
          } 
        }); 
      }); 
 
 
      // console.log(this.jsonData) 
 
    } 
 
  } 
} 
</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; 
} 
 
.error-button { 
  background-color: red; 
} 
 
.error-button2 { 
  background-color: red; 
} 
.greenbutton{ 
 
background-color: green; 
} 
 
.error-button3{ 
  background-color: green; 
 
 
} 
</style>