CanadaMes.git - Gitblit

<template> 
  <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> 
    </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') 
      }}</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/ManualonePosition" tag="el-button" type="text" active-class="blue-button">{{ 
        $t('ManualonePosition') 
      }}</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('AutomaticParameterSetting') 
      }}</router-link> 
      <router-link to="/Electrical/ManualJog" tag="el-button" type="text" active-class="blue-button">{{ 
        $t('ManualJog') 
      }}</router-link> 
    </el-breadcrumb> 
 
    <el-row :gutter="10"> 
      <el-col :span="12" v-for="(dataGroup, groupIndex) in jsonData" :key="groupIndex"> 
        <el-card class="json-block" style="width:585px;"> 
          <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'" 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' && item.state != 0" :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 === 'NotZero' && item.button.value === 0 }" 
                @click="updateButtonValue(dataGroup, itemIndex); submitDataToBackend(item.button.name);">{{ 
                  item.button.name }}</el-button> 
              <el-button v-if="item.button && language === 'zh-CN' && item.state != 0" :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 === 0 }" 
                @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/Manualoneposition' 
import { throttle } from 'lodash'; 
let socket; 
export default { 
  name: "ManualonePosition", 
  mixins: [LanguageMixin], 
  data () { 
    return { 
      jsonData: data, 
      language: this.$i18n.locale, 
 
      // 加载整个data.json文件作为jsonData 
    } 
  }, 
  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 
 
      this.$set(dataGroup[itemIndex].button, 'value', 1); 
 
 
 
    }, 
    submitDataToBackend (currentButtonName) { 
      if (currentButtonName === 'A01启动' || currentButtonName === 'A01 Start') { 
        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); 
 
      } 
 
      if (currentButtonName === 'A02启动' || currentButtonName === 'A02 Start') { 
        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); 
 
      } 
 
      if (currentButtonName === 'B01启动' || currentButtonName === 'B01 Start') { 
        const data = []; 
 
        for (let i = 2; i < 3; 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.unshift([]); 
 
        data.push([], [], [],[]); 
 
 
        const jsonObject = { data }; 
 
        // 提交数据到后端 
        const jsonString = JSON.stringify(jsonObject); 
        console.log('所有Type为0的value:', jsonString); 
        socket?.send(jsonString); 
 
      } 
 
      if (currentButtonName === 'B02启动' || currentButtonName === 'B02 Start') { 
        const data = []; 
 
        for (let i = 3; i < 4; 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); 
 
      } 
 
      if (currentButtonName === '故障' || currentButtonName === 'Fault') { 
 
        const data2 = []; 
        const resetButtonValues = this.jsonData.map(item => { 
          // const buttonItem = item.find(subItem => subItem.button && subItem.button.name === '故障' || subItem.button.name === 'Fault'); 
          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 = { data:data2 }; 
        data.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('所有复位的value:', jsonString2); 
        socket?.send(jsonString2); 
        // setTimeout(() => 
        //   window.location.reload(), 2000 
        // ) 
 
      } 
 
      if (currentButtonName === '回零' || currentButtonName === 'Zero') { 
 
        const data2 = []; 
        const resetButtonValues = this.jsonData.map(item => { 
          const buttonItem = item.find(subItem => subItem.button && ['回零', 'Zero'].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('所有回零的value:', jsonString2); 
        socket?.send(jsonString2); 
        // setTimeout(() => 
        //   window.location.reload(), 2000 
        // ) 
 
      } 
 
 
 
 
    }, 
 
 
    initWebSocket () { 
 
      let viewname = "ManualonePosition"; 
 
      if (typeof WebSocket === "undefined") { 
        console.log("您的浏览器不支持WebSocket"); 
      } else { 
        let socketUrl = "ws://" + "localhost:8888" + "/springboot-vue3/api/talk/" + viewname; 
 
        if (socket != null) { 
          socket.close(); 
          socket = null; 
        } 
 
        // 开启一个websocket服务 
        socket = new WebSocket(socketUrl); 
 
        // 打开事件 
        socket.onopen = function () { 
          console.log("websocket已打开"); 
        }; 
 
        // 收到消息 
        socket.onmessage = (msg) => { 
          if (!msg.data) { 
            return; // 如果收到空数据，则直接返回，不执行后续逻辑 
          } 
 
          let obj = JSON.parse(msg.data); 
          // console.log(obj); 
          const jsonData2 = this.jsonData; 
          const weihuiling = obj.weihuiling; 
          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 < 4; 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]; 
                  } 
                }); 
              }); 
 
              // 遍历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 = 2; i < jsonData2.length; i++) { 
                let arr2 = jsonData2[i]; 
                for (let j = 2; j < arr2.length; j++) { 
                  let obj3 = arr2[j]; 
                  if (obj3.button) { 
                    if (obj3.button && (obj3.button.name === "未回零" || obj3.button.name === "NotZero")) { 
                      obj3.button.value = weihuiling[0][i]; 
                       console.log(obj3.button.value) 
                    } 
 
                  } 
 
                } 
 
 
              } 
 
 
 
 
            } 
          }, 200); 
 
          document.addEventListener('mouseover', handleMouseMove); 
        }; 
 
 
 
 
        // 关闭事件 
        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('ManualonePositionlang') 
      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; 
          } 
        }); 
      }); 
 
 
 
    } 
 
  } 
} 
</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; 
} 
 
.el-card ::v-deep .el-card__body { 
  padding: 13px; 
} 
 
.error-button { 
  background-color: red; 
} 
 
.error-button2 { 
  background-color: red; 
} 
</style>