wu
2023-12-08 31101f632c27c05d15f30ca3084e3ed3da2a29af
CanadaMes-ui/src/views/Electrical/Action.vue
@@ -2,13 +2,20 @@
  <div class="app">
    <!--面包屑导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="el-breadcrumb">
      <router-link to="/Electrical/Parameter" tag="el-button" type="text" active-class="blue-button">{{ $t('Parameter') }}</router-link>
    <router-link to="/Electrical/Action" tag="el-button" type="text" active-class="blue-button">{{ $t('Action') }}</router-link>
    <router-link to="/Electrical/Sign" tag="el-button" type="text" active-class="blue-button">{{ $t('Sign') }}</router-link>
    <router-link to="/Electrical/State" tag="el-button" type="text" active-class="blue-button">{{ $t('State') }}</router-link>
    <router-link to="/Electrical/alarm" tag="el-button" type="text" active-class="blue-button">{{ $t('Alarm') }}</router-link>
      <router-link to="/Electrical/ServoManualone" 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>
    <div>Action</div>
    <el-form label-width="100px" style="display: flex;flex-wrap: wrap;" :model="{ messagepack }">
      <!-- <div class="kuai_div" v-for="item in record.xyData" :key="item.value">
@@ -20,6 +27,8 @@
        <el-input v-model="item.name" style="width: 240px;" class="in_mc" readonly></el-input>
        <el-switch v-model="item.value" active-value="1" inactive-value="0" @change="send()"></el-switch>
      </div>
    </el-form>
@@ -28,15 +37,17 @@
 
<script >
import LanguageMixin from '../../lang/LanguageMixin'
import data from '../../configuration/Action'
let socket;
export default {
  name: "Action",
  mixins: [LanguageMixin],
  data () {
    return {
      jsonData: data,
      activeButton: '',
      record: {
        params: [0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        params: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        canshu: [
          'D01 VFD conveyor',
          'D02 VFD conveyor',
@@ -60,15 +71,15 @@
          'A02 SERVE TRAVEL POS',
          'B01 SERVE TRAVEL POS',
          'B02 SERVE TRAVEL POS',
          'B01 YV TURN',
          'B01 YV UP DOWN',
          'B02 YV TURN',
          'B02 YV UP DOWN',
          'B01 Solenoid TURN',
          'B01 Solenoid UP DOWN',
          'B02 Solenoid TURN',
          'B02 Solenoid UP DOWN',
        ],
        xyData: [
          { name: 'D01 VFD conveyor', value: "0" },
          { name: 'D02 VFD conveyor', value: "0" },
          { name: 'D03 VFD conveyor', value: "1" },
          { name: 'D03 VFD conveyor', value: "0" },
          { name: 'D04 VFD conveyor', value: "0" },
          { name: 'D05 VFD conveyor', value: "0" },
          { name: 'D06 VFD conveyor', value: "0" },
@@ -88,10 +99,10 @@
          { name: 'A02 SERVE TRAVEL POS', value: "0" },
          { name: 'B01 SERVE TRAVEL POS', value: "0" },
          { name: 'B02 SERVE TRAVEL POS', value: "0" },
          { name: 'B01 YV TURN', value: "0" },
          { name: 'B01 YV UP DOWN', value: "0" },
          { name: 'B02 YV TURN', value: "0" },
          { name: 'B02 YV UP DOWN', value: "0" },
          { name: 'B01 Solenoid TURN', value: "0" },
          { name: 'B01 Solenoid UP DOWN', value: "0" },
          { name: 'B02 Solenoid TURN', value: "0" },
          { name: 'B02 Solenoid UP DOWN', value: "0" },
        ]
        ,
      },
@@ -107,13 +118,18 @@
    }
  },
  created () {
  // created () {
  //   this.init();
  // },
  activated(){
    this.init();
  },
 },
  methods: {
    setActiveButton(buttonName) {
    this.activeButton = buttonName;
  },
    setActiveButton (buttonName) {
      this.activeButton = buttonName;
    },
    init () {
      let viewname = "action";
@@ -122,7 +138,7 @@
      } else {
        //console.log("您的浏览器支持WebSocket");
        let socketUrl = "ws://" + "localhost:8888" + "/springboot-vue3/api/talk/" + viewname;
        let socketUrl = "ws://" + this.$t('ip')+":8888" + "/springboot-vue3/api/talk/" + viewname;
        if (socket != null) {
          socket.close();
          socket = null;
@@ -135,23 +151,28 @@
        };
        //  浏览器端收消息,获得从服务端发送过来的文本消息
        socket.onmessage = (msg) => {
          //console.log("收到数据====" + msg.data);
          if (!msg.data) {
            return; // 如果收到空数据,则直接返回,不执行后续逻辑
          }
          let obj = JSON.parse(msg.data);
          this.record.params[0] = obj.params[0];
          for (let a = 0; a <= this.record.params[0].length - 1; a++) {
            if (!this.record.xyData[a]) {
              this.record.xyData[a] = { name: this.record.canshu[a], value: this.record.params[0][a].toString() };
            } else {
          if (obj.params) {
            this.record.params[0] = obj.params[0];
            for (let a = 0; a <= this.record.params[0].length - 1; a++) {
              this.record.xyData[a].name = this.jsonData.action[a].name;
              this.record.xyData[a].value = this.record.params[0][a].toString();
            }
            const language = this.$i18n.locale;
            if (language === 'en-US') {
              this.replaceChineseWithEnglish();
            } else {
              this.localizedRoles = [...this.record.xyData];
            }
          }
          // console.log(this.record.xyData);
          this.$forceUpdate();
          this.replaceChineseWithEnglish();
        };
        //关闭事件
@@ -162,6 +183,9 @@
        socket.onerror = function () {
          console.log("websocket发生了错误");
        }
        this.$router.afterEach(function(){
          socket.close();
        })
      }
    },
@@ -169,7 +193,13 @@
      this.messagepack.data = this.record.xyData.map(item => parseInt(item.value)); // 转换为整数数组
      //console.log(this.messagepack);
      socket?.send(JSON.stringify(this.messagepack));
    }
    },
    //语言转换
    replaceChineseWithEnglish () {
      const translation = this.$t('langActions');
      this.record.xyData = this.record.xyData.map(item => { return { name: translation[item.name] || item.name, value: item.value }; });
      console.log(translation);
    },
  }
@@ -182,7 +212,7 @@
</script>
 
 
<style>
<style scoped>
.kuai_div {
  /* width: 30%; */
  margin-bottom: 30px;
@@ -206,6 +236,7 @@
.el-input__inner {
  border: none;
}
.blue-button {
  background-color: skyblue;
}