Merge branch 'master' of http://10.153.19.25:10101/r/CanadaMes

wu

2023-11-30 0ece3ba8c92df0438af52b8de6b9225d8ada4103

 CanadaMes-ui/src/views/Electrical/Parameter.vue

@@ -1,177 +1,223 @@
<template>

  <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">设备管理</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/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>



    <div>Parameter</div>





    <el-form label-width="100px" style="display: flex;flex-wrap: wrap;" :model="messagepack.data">

    <el-form label-width="100px" style="display: flex; flex-wrap: wrap;" :model="messagepack.data">

      <div id="btn_div">

        <el-button type="primary" @click="send()">Distribute</el-button>

        <!-- <button @click="send()">测试发送</button> -->

        <el-button type="primary" @click="send()" id="xiafa" :disabled="isButtonDisabled">{{ $t('Distribute parameters')

        }}</el-button>



      </div>

      <div class="kuai_div" v-for="item in this.record.xyData" :key="item.name">

        <el-input style="width: 280px;" class="in_mc" v-model="item.name"></el-input>

        <el-input v-model="item.value" style="width: 80px;"></el-input>

      <div class="kuai_div" v-for="(item, index) in record.xyData" :key="index">

        <el-input style="width: 280px; border:none;" class="in_mc" v-model="item.name" readonly></el-input>



        <span style="margin-right: 5px; width: 50px;">{{ item.value }}</span>

        <span style="margin-right: 5px; font-size: 14px;color: red;">|</span>

        <input type="number" style="width: 43px; margin-right: 5px; margin-top: 5px; font-size: 16px;">

        <span style="margin-right: 5px; width: 50px;">{{ item.unit }}</span>



      </div>







    </el-form>



    <div>







    </div>

  </div>

</template>



<script >

<script>



let socket;

import LanguageMixin from '../../lang/LanguageMixin'

import data from '../../configuration/Parameter'

export default {

  name: "Parameter",

  mixins: [LanguageMixin],

  data () {

    return {

      jsonData: data,

      dialogVisible: true,

      password: '',

      activeButton: '',

      record: {

        params: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],

        params: [100, 200, 10, 10, 10, 10],

        xyData: [

          { name: 'conveyor Velocity(Auto FAST)', value: 0 },

          { name: 'conveyor Velocity(Manual)', value: 0 },

          { name: 'A01 A02 TURN JOG Velocity', value: 0 },

          { name: 'A01 A02 TRAVEL JOG Velocity', value: 0 },

          { name: 'A01 A02 TURN POS Velocity AUTO', value: 0 },

          { name: 'A01 A02 TURN POS Velocity manual', value: 0 },

          { name: '01 A02 TRAVEL POS Velocity AUTO', value: 0 },

          { name: 'A01 A02 TRAVEL POS Velocity manual', value: 0 },

          { name: 'B01 B02 TRAVEL POS Velocity AUTO', value: 0 },

          { name: 'B01 B02 TRAVEL POS Velocity manual', value: 0 },



        ],

        canshu: [

          'conveyor Velocity(Auto FAST)',

          'B01 B02 TRAVEL JOG Velocity',

          'A01 A02 TURN POS Velocity AUTO',

          'A01 A02 TURN POS Velocity manual',

          'A01 A02 TRAVEL POS Velocity AUTO',

          'A01 A02 TRAVEL POS Velocity manual',

          'B01 B02 TRAVEL POS Velocity AUTO',

          'B01 B02 TRAVEL POS Velocity manual',

        ],



        canshu: []

      },





      messagepack: {

        data: { taskname: "" }

      },

      queryInfo: {

        data: "1",

        pageSize: 10

      },



    }

      }

    };

  },





  created () {

    this.init();

    this.initWebSocket();

    this.isButtonDisabled = true;





  },

  methods: {

    init () {





    setActiveButton (buttonName) {

      this.activeButton = buttonName;

    },

    initWebSocket () {

      let viewname = "Parameter";



      if (typeof (WebSocket) == "undefined") {

      if (typeof WebSocket === "undefined") {

        console.log("您的浏览器不支持WebSocket");

      } else {

        //console.log("您的浏览器支持WebSocket");



        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 = function (msg) {



          //console.log("收到数据====" + msg.data);

        // 收到消息

        socket.onmessage = (msg) => {

          if (!msg.data) {

            return; // 如果收到空数据，则直接返回，不执行后续逻辑

          }



          let obj = JSON.parse(msg.data);

          //this.$set(this.record.params, 0, obj.params[0]);

          this.record.params[0] = obj.params[0];

          for (let a = 0; a <= this.record.params.length - 1; a++) {

            // this.record.xyData[a] = [this.record.canshu[a], this.record.params[0][a]];

            // this.record.xyData[a] = { name: this.record.canshu[a], value: this.record.params[0][a] };

            this.record.xyData[a].value = this.record.params[0][a];





          if (obj.params && obj.state) {





            this.record.params[0] = obj.params[0];

            this.record.state = obj.state[0];

            if (obj.state && obj.state.length > 0) {

              let isButtonDisabled = this.record.state.includes(1);

              this.isButtonDisabled = isButtonDisabled;





              this.record.xyData = this.jsonData.para;



              for (let a = 0; a < this.record.xyData.length; a++) {

                this.record.xyData[a].value = this.record.params[0][a];



              }



              this.record.xyData = this.jsonData.para.filter(item => {

                return item.state != 0;

              }



              );

              const language = this.$i18n.locale;

              if (language === 'en-US') {

                this.replaceChineseWithEnglish();

              } else {

                this.localizedRoles = [...this.record.xyData];

              }

            }

          }

          this.$forceUpdate();

          this.replaceChineseWithEnglish();

        };



        }.bind(this);

        //关闭事件

        // 关闭事件

        socket.onclose = function () {

          console.log("websocket已关闭");

        };

        //发生了错误事件



        // 发生错误事件

        socket.onerror = function () {

          console.log("websocket发生了错误");

        }

        };

      }

    },

    send () {

      this.messagepack.data = { taskname: "前端到后台" };

      socket?.send(JSON.stringify(this.messagepack));  // 将组装好的json发送给服务端，由服务端进行转发

    }



      this.messagepack.data = this.record.xyData.map((item) => parseInt(item.value2)); // 转换为整数数组

      //console.log(this.messagepack);

      socket?.send(JSON.stringify(this.messagepack));

    },

    handleChange (index, value) {

      this.record.xyData[index].value = value;

    },

    //语言转换

    replaceChineseWithEnglish () {

      const translation = this.$t('langparameter');

      this.record.xyData = this.record.xyData.map(item => { return { name: translation[item.name] || item.name, value: item.value, unit: item.unit }; });

      //console.log(translation);

    },

  }



}











};

</script>



<style>

<style scoped>

.kuai_div {

  width: 30%;

  width: calc(100% / 2);

  margin-bottom: 15px;

}



.el-input {

.el-input__inner {

  border: 1px solid black;

  border: none;





  .el-input__inner {

    border: 1 solid black;

  }





}



.special-class {}



.in_mc {

  .el-input__inner {

    border: none;

  }



  border: none;

}



.blue-button {

  background-color: skyblue;



}



#btn_div {



  width: 100%;



}



#btn_div .el-button {

  float: right;

}



input[type="number"]::-webkit-inner-spin-button,

input[type="number"]::-webkit-outer-spin-button {

  -webkit-appearance: none;

  margin: 0;

}



input[type="number"] {

  -moz-appearance: textfield;

  /* Firefox中禁用上下箭头 */

}

</style>