ZengTao
2024-01-25 20f9e20e45a66a5dad1217c93455685d8174c6cf
CanadaMes-ui/src/views/Electrical/Positioning1.vue
@@ -8,20 +8,20 @@
        active-class="blue-button"
        >{{ $t("Alarm") }}</router-link
      >
      <router-link
      <!-- <router-link
        to="/Electrical/State"
        tag="el-button"
        type="text"
        active-class="blue-button"
        >{{ $t("State") }}</router-link
      >
      <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
@@ -48,13 +48,13 @@
        active-class="blue-button"
        >{{ $t("Automatic State") }}</router-link
      >
      <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"
@@ -104,15 +104,23 @@
        active-class="blue-button"
        >{{ $t("Speed parameter settings") }}</router-link
      >
      <router-link
        to="/Electrical/InteractionState"
        tag="el-button"
        type="text"
        active-class="blue-button"
        >{{ $t("InteractionState") }}</router-link
      >
    </el-breadcrumb>
    <el-row :gutter="18" class="card">
    <el-row :gutter="18" class="card"  style="width: 1400px">
      <el-col
        :span="7"
        v-for="(dataGroup, groupIndex) in jsonData"
        :key="groupIndex"
      >
        <el-card class="json-block">
        <el-card class="json-block"   style="width: 400px">
          <div
            class="button-row"
            style="display: flex; justify-content: space-between"
@@ -135,15 +143,17 @@
              <span class="name" style="width: 250px">{{ item.name }}</span>
              <el-input
                v-if="item.type === '0'"
                style="width: 120px"
                v-model="item.value"
                class="input-box"
                @keyup.enter.native="submitDataToBackend"
                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+`}`"
                @keyup.enter.native="submitDataToBackend($event)"
              ></el-input>
              <span v-if="item.unit" :name="item.unit">{{ item.unit }}</span>
              <!-- <el-button
                v-if="item.type === '0' && item.name !== '格子间距' && item.name !== '出片接片地址' && item.name !== '存片接片地址'"
                class="input-box" @click="submitDataToBackend();">取地址</el-button> -->
              <el-button
                v-if="item.type === '0'  && item.name !== '格子间距'  && item.name !== 'GridSpacing' "
                class="input-box" @click="updateButtonValue(dataGroup, itemIndex,groupIndex);">{{ $t("Set") }}</el-button>
            </div>
          </div>
        </el-card>
@@ -164,6 +174,12 @@
  data() {
    return {
      jsonData: data, // 加载整个data.json文件作为jsonData
      A01:"",
      A02:"",
      B01:"",
      B02:"",
      jianju:""
    };
  },
  activated() {
@@ -176,11 +192,48 @@
    this.$forceUpdate();
  },
  methods: {
    updateButtonValue(dataGroup, itemIndex) {
      this.$set(dataGroup[itemIndex].button, "value", 1); // 点击按钮后将值改为1
    updateButtonValue(dataGroup, itemIndex,groupIndex) {
      if(groupIndex==1){
  const value = parseFloat(this.A01);
  this.$set(dataGroup[itemIndex], "value", value);
  console.log(value)
}
if(groupIndex==2){
  const value = parseFloat(this.A02) ;
  this.$set(dataGroup[itemIndex], "value", value);
  console.log(value)
}
if(groupIndex==3){
  const value = parseFloat(this.A01) + parseFloat(this.jianju);
  this.$set(dataGroup[itemIndex], "value", value);
  console.log(value)
}
if(groupIndex==4){
  const value=parseFloat(this.A02)+parseFloat(this.jianju)
this.$set(dataGroup[itemIndex], "value", value);
}
if(groupIndex==5){
  const value=parseFloat(this.B01)-parseFloat(this.jianju)
this.$set(dataGroup[itemIndex], "value", value);
}
if(groupIndex==6){
  const value=parseFloat(this.B02)+parseFloat(this.jianju)
this.$set(dataGroup[itemIndex], "value", value);
}
     this.submitDataToBackend(event);
    },
    //提交数据到后端
    submitDataToBackend() {
    submitDataToBackend(event) {
      const inputData = this.jsonData.map((dataGroup) => {
        return dataGroup.map((item) => {
          if (item.type === "0") {
@@ -206,8 +259,9 @@
      // 提交数据到后端
      const jsonString = JSON.stringify(jsonObject);
      // console.log('提交以下数据到后端:', jsonString);
       console.log('提交以下数据到后端:', jsonString);
      socket?.send(jsonString);
      event.target.blur(); // 取消输入框焦点
    },
    initWebSocket() {
      let viewname = "Positioning1";
@@ -236,46 +290,69 @@
        };
        // 收到消息
        socket.onmessage = (msg) => {
          if (!msg.data) {
            return; // 如果收到空数据,则直接返回,不执行后续逻辑
          }
//         let isMouseInInputBox = false; // 标记鼠标是否在输入框内
          let obj = JSON.parse(msg.data);
          const jsonData2 = this.jsonData;
          document.addEventListener("mouseover", function (event) {
            const inputBox = document.querySelectorAll(".input-box");
            const target = event.target;
            const parms = obj.params;
            if (
              parms &&
              inputBox &&
              Array.from(inputBox).every((box) => !box.contains(target))
            ) {
              // 如果鼠标不在输入框内,更新输入框的值
              // this.submitDataToBackend()
// const inputBox = document.querySelectorAll('.input-box');
// inputBox.forEach(box => {
//   box.addEventListener('mouseenter', () => {
//     isMouseInInputBox = true;
//   });
//   box.addEventListener('mouseleave', () => {
//     isMouseInInputBox = false;
//   });
// });
              // console.log(parms)
socket.onmessage = (msg) => {
  if (!msg.data) {
    return; // 如果收到空数据,则直接返回,不执行后续逻辑
  }
  if (document.activeElement.tagName.toLowerCase() === 'input') {
    return;
  }
              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 (
                    obj.type === "0" &&
                    Object.prototype.hasOwnProperty.call(obj, "value")
                  ) {
                    obj.value = parms[0][index];
                    index++;
                  }
                }
              }
  let obj = JSON.parse(msg.data);
  const jsonData2 = this.jsonData;
              // console.log(jsonData2);
            }
          });
        };
  const parms = obj.params;
  if(parms ){ // 只有在鼠标不在输入框内时才更新数据
  //  console.log(parms)
    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 (
          obj.type === "0" &&
          Object.prototype.hasOwnProperty.call(obj, "value")
        ) {
          obj.value = parms[0][index];
          index++;
        }
      }
    }
                    this.A01 = obj.shishi1[0][0];
                    this.A02 = obj.shishi1[0][1];
                    this.B01= obj.shishi1[0][2];
                    this.B02 = obj.shishi1[0][3];
                    this.jianju = obj.params[0][0];
  }
};
        // 关闭事件
        socket.onclose = function () {