Merge branch 'master' of ssh://10.153.19.150:29418/CanadaMes

wu

2023-09-05 adb18df8a106d6a45241ded8805c9abf3ec58e91

Merge branch 'master' of ssh://10.153.19.150:29418/CanadaMes

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

@@ -8,21 +8,15 @@
      <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>

    </el-breadcrumb>

    <div>Action</div>

    <el-form label-width="100px" style="display: flex;flex-wrap: wrap;" :model="{ records }">

      <div class="kuai_sb" v-for="item in records" :key="item.id">

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

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

        <el-switch v-model="item.zhuangtai" active-color="#13ce66" active-value="1" inactive-value="2"></el-switch>

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

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

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

        <!-- <el-input v-model="item[0]" style="width: 80px;"></el-input> -->

        <el-switch v-model="item.value" active-value="0" inactive-value="1"></el-switch>

      </div>





      <div class="kuai_div">

  <el-input style="width: 280px;" class="in_mc" value="conveyor Velocity(Auto SLOW)"></el-input>

  <el-input v-for="(param, index) in record.params[0]" :key="index" v-model="record.params[0][index]" style="width: 80px;"></el-input>

</div>

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

    </el-form>





@@ -30,34 +24,69 @@
</template>



<script >



let socket;

export default {

  name: "Action",

  name: "action",

  data () {

    return {

      records: [

        { id: 1, mingcheng: 'conveyor Velocity(Auto SLOW)', zhuangtai: "1" },

        { id: 2, mingcheng: 'B01 B02 TRAVEL POS Velocity AUTO', zhuangtai: "2" },

        { id: 3, mingcheng: 'B01 B02 TRAVEL JOG Velocity', zhuangtai: "2" },

        { id: 4, mingcheng: 'conveyor Velocity(Manual)', zhuangtai: "1" }

      ],

      record: {

        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',

          'D03 VFD conveyor',

          'D04 VFD conveyor',

          'D05 VFD conveyor',

          'D06 VFD conveyor',

          'A01 VFD conveyor',

          'A02 VFD conveyor',

          'B01 VFD conveyor',

          'B02 VFD conveyor',

          'A01 SERVE TURN JOG+',

          'A02 SERVE TURN JOG-',

          'A01 SERVE TRAVEL JOG+',

          'A02 SERVE TRAVEL JOG-',

          'B01 SERVE TRAVEL JOG+',

          'B02 SERVE TRAVEL JOG-',

          'A01 SERVE TURN POS',

          'A02 SERVE TURN POS',

          'A01 SERVE TRAVEL POS',

          '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',

        ],

        xyData: [

          { name: 'D01 VFD conveyor', value: 0 },

          { name: "D02 VFD conveyor", value: 0 },

          { name: "D03 VFD conveyor", value: 0 },

          { name: "D04 VFD conveyor", value: 0 },

          { name: "B01 B02 TRAVEL JOG Velocity", value: 0 },

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

        ],

      },





      messagepack: {

        data: { taskname: "" }

      },



      record: {

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

    },

      queryInfo: {

        data: "1",

        pageSize: 10

      },



    }

  },

  created () {

    this.init();

    //console.log(this.records);

  },

  methods: {

    init () {

      let viewname = "talkvue";

      let viewname = "Action";



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

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

@@ -77,11 +106,24 @@
        };

        //  浏览器端收消息，获得从服务端发送过来的文本消息

        socket.onmessage = function (msg) {

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

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

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

  console.log( this.record.params[0])

}.bind(this);



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

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



          this.record.params[0] = obj.acion[0].join(",");

          this.record.params[0] = this.record.params[0].split(",");



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

            // if (!this.record.xyData[a]) {

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

            // } else {

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

            // }

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

          }

          console.log(this.record.xyData)

          this.$forceUpdate();

        }.bind(this);

        //关闭事件

        socket.onclose = function () {

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

@@ -91,6 +133,7 @@
          console.log("websocket发生了错误");

        }

      }



    },

    send () {

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

@@ -107,10 +150,11 @@


</script>





<style>

.kuai_sb {

  width: 30%;

  margin-bottom: 15px;

.kuai_div {

  /* width: 30%; */

  margin-bottom: 30px;

}



.el-input {


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

@@ -1,152 +1,177 @@
<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>

  </el-breadcrumb>

  <div>Parameter</div>

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

    <div id="btn_div">

      <el-button type="primary" @click="send()">下发参数</el-button>

    </div>

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

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

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

    </div>

  </el-form>

    <!--面包屑导航区域-->

    <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>

    </el-breadcrumb>

    <div>Parameter</div>





    <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> -->

      </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>







    </el-form>









  </div>

  </template>

  
  <script>

  let socket;

  
  export default {

</template>



<script >



let socket;

export default {

  name: "Parameter",

  data() {

  return {

  record: {

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

  xyData: [{ name: "conveyor Velocity(Auto SLOW)", value: 0 },

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

    { name: "B01 B02 TRAVEL JOG Velocity", value: 0 },

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

    { name: "B01 B02 TRAVEL JOG Velocity", value: 0},

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

  canshu: [

  'conveyor Velocity(Auto SLOW)',

  'B01 B02 TRAVEL POS Velocity AUTO',

  'B01 B02 TRAVEL JOG Velocity',

  'conveyor Velocity(Manual)',

  'B01 B02 TRAVEL JOG Velocity',

  'conveyor Velocity(Manual)'

  ],

  data () {

    return {

      record: {

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

        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',

        ],



      },





      messagepack: {

        data: { taskname: "" }

      },

      queryInfo: {

        data: "1",

        pageSize: 10

      },



    }

  },

  messagepack: {

  data: { taskname: "" }

  },

  queryInfo: {

  data: "1",

  pageSize: 10

  },

  }

  },

  created() {

  this.initWebSocket();

  created () {

    this.init();

  },

  methods: {

  initWebSocket() {

  let viewname = "action";

  
    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;

    init () {

      let viewname = "Parameter";



      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);

          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];

          }

          this.$forceUpdate();



        }.bind(this);

        //关闭事件

        socket.onclose = function () {

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

        };

        //发生了错误事件

        socket.onerror = function () {

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

        }

      }

  
      // 开启一个websocket服务

      socket = new WebSocket(socketUrl);

  
      // 打开事件

      socket.onopen = function () {

        console.log("websocket已打开");

      };

  
      // 收到消息

      socket.onmessage = (msg) => {

  if (!msg.data) {

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

    },

    send () {

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

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

    }



  }



  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] };

    } else {

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

    }

  }



  console.log(this.record.xyData);

  this.$forceUpdate();

};

  
      // 关闭事件

      socket.onclose = function () {

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

      };

  
      // 发生错误事件

      socket.onerror = function () {

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

      }

    }

  },

  send() {

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

  console.log(this.messagepack);

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

}

  }

  }

  </script>

  
  <style>

  .kuai_div {











</script>



<style>

.kuai_div {

  width: 30%;

  margin-bottom: 15px;

  }

  
  .el-input {

}



.el-input {

  border: none;

  }

  




  .el-input__inner {

  border: 1px solid black;

    border: 1 solid black;

  }

  
  .in_mc .el-input__inner {

  border: none;





}



.in_mc {

  .el-input__inner {

    border: none;

  }

  
  #btn_div {

}



#btn_div {



  width: 100%;

  }

  
  #btn_div .el-button {



}



#btn_div .el-button {

  float: right;

  }

  </style>
}

</style>


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

@@ -8,15 +8,16 @@
      <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>

    </el-breadcrumb>

    <div>Sign</div>

    <div style="padding-right: 30px;display: flex;flex-wrap: wrap;">

      <div class="kuai_sb" v-for="item in records" :key="item.id">

        <el-col class="deng" :class="getStatusClass(item.zhuangtai)">

    <div style="padding-right: 30px;display: flex;flex-wrap: wrap;" class="neir">

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

        <el-col class="deng" :class="getStatusClass(item.value, item.name)">

          <!-- <el-input v-model="item.zhuangtai" style="width: 280px;display: none;"

            class="in_mc"></el-input>-->

        </el-col>

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

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



        <!-- <el-switch v-model="item.zhuangtai" active-color="#13ce66" active-value="1" inactive-value="2"></el-switch> -->

      </div>

@@ -27,29 +28,143 @@
</template>



<script >



let socket;

export default {

  name: "Sign",

  data () {

    return {

      records: [

        { id: 1, mingcheng: 'conveyor Velocity(Auto SLOW)', zhuangtai: "1" },

        { id: 2, mingcheng: 'B01 B02 TRAVEL POS Velocity AUTO', zhuangtai: "2" },

        { id: 3, mingcheng: 'B01 B02 TRAVEL JOG Velocity', zhuangtai: "2" },

        { id: 4, mingcheng: 'conveyor Velocity(Manual)', zhuangtai: "2" }

      ]

      record: {

        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, 0, 0, 0, 0, 0, 0,],

        xyData: [

          { name: 'D01.SR dec', value: 0 },

          { name: "D01.SR in pos", value: 0 },

          { name: "D02.SR dec", value: 0 },

          { name: "D02.SR in pos", value: 0 },

          { name: "D03.SR dec", value: 0 },

          { name: "D03.SR in pos", value: 0 },

        ],

        canshu: [

          'D01.SR dec',

          'D01.SR in pos',

          'D02.SR dec',

          'D02.SR in pos',

          'D03.SR into',

          'D03.SR dec',

          'D03.SR in pos',

          'D04.SR dec',

          'D04.SR in pos',

          'D05.SR dec',

          'D05.SR in pos',

          'D06.SR dec',

          'D06.SR in pos',

          'B01.SR out dec',

          'B01.SR out in pos',

          'B01.SR in dec',

          'B01.SR in in pos',

          'B01.SR turn on',

          'B01.SR turn off',

          'B01.SR up',

          'B01.SR down',

          'B02.SR out dec',

          'B02.SR out in pos',

          'B02.SR in dec',

          'B02.SR in in pos',

          'B02.SR turn on',

          'B02.SR turn off',

          'B02.SR up',

          'B02.SR down',

          'LED.red',

          'LED.green',

          'LED.yellow',

        ],



      },





      messagepack: {

        data: { taskname: "" }

      },

      queryInfo: {

        data: "1",

        pageSize: 10

      },



    }

  },

  created () {

    this.init();

  },

  methods: {

    getStatusClass (zhuangtai) {

      if (zhuangtai === "2") {

        return "dow";

      } else {

    getStatusClass (zhuangtai, mc) {



      if (mc === "LED.red" && zhuangtai === 0) {

        return "red";

      }

      if (mc === "LED.green" && zhuangtai === 0) {

        return "green";

      }

      if (mc === "LED.yellow" && zhuangtai === 0) {

        return "yellow"

      }

      if (zhuangtai === 0) {

        return "op";

      }

      else {

        return "dow";

      }











    },

    init () {

      let viewname = "Sign";



      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);

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

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

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

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

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

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



          }

          this.$forceUpdate();



        }.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发送给服务端，由服务端进行转发

    }

  }



@@ -67,6 +182,11 @@
  padding: 0;

}



/* .neir {

  height: 100%;

  overflow-y: auto;

} */



.el-input__inner {

  text-align: center;

  width: 100%;

@@ -74,7 +194,7 @@


.kuai_sb {

  text-align: center;

  width: 30%;

  width: 25%;

  margin-bottom: 15px;

}



@@ -111,4 +231,16 @@
.dow {

  background-color: #A0A0A0;

}



.red {

  background-color: red;

}



.geeen {

  background-color: #00ff22;

}



.yellow {

  background-color: yellow;

}

</style>

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

@@ -8,19 +8,23 @@
      <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>

    </el-breadcrumb>

    <div>State</div>





    <el-form label-width="100px" style="display: flex;flex-wrap: wrap;" :model="{ records }">

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

      <div id="btn_div">

        <el-button type="primary">下发参数</el-button>

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

        <!-- <button @click="send()">测试发送</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>



      <div class="kuai_div" v-for="item in records" :key="item.id">

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

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

      </div>





    </el-form>





@@ -31,22 +35,105 @@


<script >



let socket;

export default {

  name: "State",

  data () {

    return {

      records: [

        { id: 1, mingcheng: 'conveyor Velocity(Auto SLOW)', zhuangtai: "1" },

        { id: 2, mingcheng: 'B01 B02 TRAVEL POS Velocity AUTO', zhuangtai: "2" },

        { id: 3, mingcheng: 'B01 B02 TRAVEL JOG Velocity', zhuangtai: "2" },

        { id: 4, mingcheng: 'conveyor Velocity(Manual)', zhuangtai: "2" }

      ]

      record: {

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

        xyData: [

          { name: 'D01.State', value: 0 },

          { name: 'D02.State', value: 0 },

          { name: 'B01.State', value: 0 },

          { name: 'B02.State', value: 0 },

          { name: 'A01.State', value: 0 },

          { name: 'A02.State', value: 0 },

          { name: 'D03.State', value: 0 },

          { name: 'D04.State', value: 0 },

          { name: 'D05.State', value: 0 },

          { name: 'D06.State', value: 0 },

        ],

        canshu: [

          'D01.State',

          'D02.State',

          'B01.State',

          'B02.State',

          'A01.State',

          'A02.State',

          'D03.State',

          'D04.State',

          'D05.State',

          'D06.State',

        ],



      },





      messagepack: {

        data: { taskname: "" }

      },

      queryInfo: {

        data: "1",

        pageSize: 10

      },



    }

  },

  created () {

    this.init();

  },

  methods: {

    init () {

      let viewname = "State";



      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);

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

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

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

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

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

          }

          this.$forceUpdate();

          console.log(this.record.xyData);

          //console.log(this.record.params[0])

          // console.log(this.records.canshu);



        }.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发送给服务端，由服务端进行转发

    }



  }



}


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

New file
@@ -0,0 +1,179 @@
<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>
    </el-breadcrumb>
    <div>Alarm</div>
    <!-- <el-form label-width="100px" style="display: flex;flex-wrap: wrap;" :model="{ messagepack }">
        <div class="kuai_div" v-for="item in this.record.xyData" :key="item[1]">
          <el-input v-model="item[1]" style="width: 240px;" class="in_mc"></el-input>
          <el-switch v-model="item[0]" active-value="0" inactive-value="1"></el-switch>
        </div>
      </el-form> -->

    <el-table :data="record.xyData" style="width: 100%">
      <el-table-column prop="xyData[1]" label="content" width="180">
      </el-table-column>
      <el-table-column prop="name" label="time-on" width="180">
      </el-table-column>
      <el-table-column prop="address" label="End Time">
      </el-table-column>
    </el-table>
  </div>
</template>

<script >

let socket;
export default {
  name: "alarm",
  data () {
    return {
      record: {
        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 error',
          'D02 VFD error',
          'D03 VFD error',
          'D04 VFD conveyor',
          'D05 VFD conveyor',
          'D06 VFD conveyor',
          'A01 VFD conveyor',
          'A02 VFD conveyor',
          'B01 VFD conveyor',
          'B02 VFD conveyor',
          'A01 SERVE TURN JOG+',
          'A02 SERVE TURN JOG-',
          'A01 SERVE TRAVEL JOG+',
          'A02 SERVE TRAVEL JOG-',
          'B01 SERVE TRAVEL JOG+',
          'B02 SERVE TRAVEL JOG-',
          'A01 SERVE TURN POS',
          'A02 SERVE TURN POS',
          'A01 SERVE TRAVEL POS',
          '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',
        ],
        // canshu: [
        //   '1',
        //   '1',
        //   '0',
        //   '0',
        //   '0',
        //   '0'
        // ],
        xyData: [],
      },


      messagepack: {
        data: { taskname: "" }
      },
      queryInfo: {
        data: "1",
        pageSize: 10
      },

    }
  },
  created () {
    this.init();
  },
  methods: {
    init () {
      let viewname = "Action";

      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);
          let obj = JSON.parse(msg.data);

          this.record.params[0] = obj.acion[0].join(",");
          this.record.params[0] = this.record.params[0].split(",");

          for (let a = 0; a <= this.record.params.length - 1; a++) {
            this.record.xyData[a] = [this.record.params[0][a], this.record.canshu[a]];
          }
          //console.log(this.record.params[0]);
          //console.log(this.record.xyData);
          this.$forceUpdate();
        }.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发送给服务端，由服务端进行转发
    }

  }

}





</script>


<style>
.kuai_div {
  /* width: 30%; */
  margin-bottom: 30px;
}

.el-input {
  border: none;


  .el-input__inner {
    border: 1 solid black;
  }


}

.in_mc {
  .el-input__inner {
    border: none;
  }
}
</style>