wuyouming666
2023-12-04 82c2df0968b099bd589936adc5b28c1ac4827a05
CanadaMes-ui/src/views/Electrical/Action.vue
@@ -2,14 +2,20 @@
  <div class="app">
    <!--面包屑导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="el-breadcrumb">
      <router-link to="/home" tag="el-button" type="text">{{ $t('langHome') }}</router-link>
      <el-button type="text">Electrical</el-button>
      <router-link to="/Electrical/Parameter" tag="el-button" type="text">Parameter</router-link>
      <router-link to="/Electrical/Action" tag="el-button" type="text">Action</router-link>
      <router-link to="/Electrical/Sign" tag="el-button" type="text">Sign</router-link>
      <router-link to="/Electrical/State" tag="el-button" type="text">State</router-link>
      <router-link to="/Electrical/alarm" tag="el-button" type="text">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('Servo Manual')
      }}</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">
@@ -21,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>
@@ -29,14 +37,17 @@
 
<script >
import LanguageMixin from '../../lang/LanguageMixin'
import data from '../../configuration/Action'
let socket;
export default {
  name: "action",
  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',
@@ -68,7 +79,7 @@
        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" },
@@ -107,10 +118,18 @@
    }
  },
  created () {
  // created () {
  //   this.init();
  // },
  activated(){
    this.init();
  },
 },
  methods: {
    setActiveButton (buttonName) {
      this.activeButton = buttonName;
    },
    init () {
      let viewname = "action";
@@ -132,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();
        };
        //关闭事件
@@ -159,6 +183,9 @@
        socket.onerror = function () {
          console.log("websocket发生了错误");
        }
        this.$router.afterEach(function(){
          socket.close();
        })
      }
    },
@@ -166,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);
    },
  }
@@ -179,7 +212,7 @@
</script>
 
 
<style>
<style scoped>
.kuai_div {
  /* width: 30%; */
  margin-bottom: 30px;
@@ -203,4 +236,8 @@
.el-input__inner {
  border: none;
}
.blue-button {
  background-color: skyblue;
}
</style>