接口websocket

懒羊羊

2024-01-13 5f3a2e98c54ce815f270d149872b2b3d0d008ff0

 jcdm-ui/src/views/main/kb/stationTerminal/index.vue

@@ -96,6 +96,18 @@
             </el-table>
           </el-col>
           <el-col :span="16">
<!--             <el-input v-model="url" type="text" style="width: 20%" /> &nbsp; &nbsp;-->
<!--             <el-button @click="join" type="primary">连接</el-button>-->
<!--             <el-button @click="exit" type="danger">断开</el-button>-->

<!--             <br />-->
<!--             <el-input type="textarea" v-model="message" :rows="9" />-->
<!--             <el-button type="info" @click="send">发送消息</el-button>-->
<!--             <br />-->
<!--             <br />-->
<!--             <el-input type="textarea" v-model="text_content" :rows="9" /> 返回内容-->
<!--             <br />-->
<!--             <br />-->
             <el-image style="height: 520px;width: 100%" :src="imgSrc"></el-image>
           </el-col>
         </el-tab-pane>
@@ -156,6 +168,12 @@
        pageSize: 10,
        sfcCode: null,
      },
      // 查询参数
      StationConfQueryParams: {
        pageNum: 1,
        pageSize: 10,
        ipAddress: null,
      },
      cakeLamp: {
        plcState: 1, //plc
        scannerState: 1, //扫码枪
@@ -165,11 +183,29 @@
        release: 0 //允许放行
      },
      content: '',
      activeName: 'first'
      activeName: 'first',
      url: "ws://192.168.10.196:8081/websocket/message/",
      message: "",
      text_content: "",
      ws: null,
    }
  },
  beforeDestroy() {
    this.exit();
  },
  created() {
    this.getStationConfList();
    this.connectWebsocket();


    this.initStation();
    // this.getStationConfList();
    // setTimeout(() => {
    //   this.connectWebsocket();
    // }, 3000);
  },
  mounted() {

  },
  methods: {
    changeMenu(tab, event) {
@@ -204,23 +240,85 @@
      this.$message('保存节拍为'+this.workpieceInformation.beat+'秒');
    },
    /** 查询工位终端配置列表 */
    getStationConfList() {
      let queryParams = {
        ipAddress: null,
      }
      getIpv4().then(response => {
        queryParams.ipAddress = response.msg
    async getStationConfList() {
      await getIpv4().then(response => {
        this.StationConfQueryParams.ipAddress = response.msg
        console.log('查询到本工位IP为'+this.StationConfQueryParams.ipAddress)
      });
      listStationConf(queryParams).then(response => {
      listStationConf(this.StationConfQueryParams).then(response => {
        let rows = response.rows[0]
        if(response.rows.length===0){
          this.$message('改ip沒有配置工序工位，請重試！');
          this.$message('该工位没有配置IP，请联系管理员配置IP');
          return
        }
        this.headContent.processesName = rows.processesName
        this.headContent.processesCode = rows.processesCode
        console.log('设置工位编码'+this.headContent.processesCode)

      });
    },
    connectWebsocket() {
      console.log('websocket连接工位为'+this.headContent.processesCode)
      const wsuri = this.url + this.headContent.processesCode;
      this.ws = new WebSocket(wsuri);
      const self = this;
      this.ws.onopen = function (event) {
        // self.text_content = self.text_content + "已经打开连接!" + "\n";
        this.$message('websocket连接成功！');
      };
      this.ws.onmessage = function (event) {
        self.text_content = event.data + "\n";
        console.log(event.data)
        if(event.data === "1"){
          self.cakeLamp.InPlace = "1"
        }
      };
    },
    exit() {
      if (this.ws) {
        this.ws.close();
        this.ws = null;
      }
    },
    send() {
      if (this.ws) {
        this.ws.send(this.message);
      } else {
        alert("未连接到服务器");
      }
    },
    async initStation(){
      await getIpv4().then(response => {
        this.StationConfQueryParams.ipAddress = response.msg
        console.log('查询到本工位IP为'+this.StationConfQueryParams.ipAddress)
      });
      await listStationConf(this.StationConfQueryParams).then(response => {
        let rows = response.rows[0]
        if(response.rows.length===0){
          this.$message('该工位没有配置IP，请联系管理员配置IP');
          return
        }
        this.headContent.processesName = rows.processesName
        this.headContent.processesCode = rows.processesCode
        console.log('设置工位编码'+this.headContent.processesCode)

      });
      console.log('websocket连接工位为'+this.headContent.processesCode)
      const wsuri = this.url + this.headContent.processesCode;
      this.ws = new WebSocket(wsuri);
      const self = this;
      this.ws.onopen = function (event) {
        // self.text_content = self.text_content + "已经打开连接!" + "\n";
        this.$message('websocket连接成功！');
      };
      this.ws.onmessage = function (event) {
        self.text_content = event.data + "\n";
        console.log(event.data)
        if(event.data === "1"){
          self.cakeLamp.InPlace = "1"
        }
      };
    }
  }
}

@@ -259,63 +357,4 @@
  font-size: 15px;
}
</style>
<!--<template>-->
<!--  <div>-->
<!--    <el-input v-model="url" type="text" style="width: 20%" /> &nbsp; &nbsp;-->
<!--    <el-button @click="join" type="primary">连接</el-button>-->
<!--    <el-button @click="exit" type="danger">断开</el-button>-->

<!--    <br />-->
<!--    <el-input type="textarea" v-model="message" :rows="9" />-->
<!--    <el-button type="info" @click="send">发送消息</el-button>-->
<!--    <br />-->
<!--    <br />-->
<!--    <el-input type="textarea" v-model="text_content" :rows="9" /> 返回内容-->
<!--    <br />-->
<!--    <br />-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      url: "ws://127.0.0.1:8081/websocket/message",-->
<!--      message: "",-->
<!--      text_content: "",-->
<!--      ws: null,-->
<!--    };-->
<!--  },-->
<!--  methods: {-->
<!--    join() {-->
<!--      const wsuri = this.url;-->
<!--      this.ws = new WebSocket(wsuri);-->
<!--      const self = this;-->
<!--      this.ws.onopen = function (event) {-->
<!--        self.text_content = self.text_content + "已经打开连接!" + "\n";-->
<!--      };-->
<!--      this.ws.onmessage = function (event) {-->
<!--        console.log("后端发过来的消息"+event.data)-->
<!--        self.text_content = event.data + "\n";-->
<!--      };-->
<!--      this.ws.onclose = function (event) {-->
<!--        self.text_content = self.text_content + "已经关闭连接!" + "\n";-->
<!--      };-->
<!--    },-->
<!--    exit() {-->
<!--      if (this.ws) {-->
<!--        this.ws.close();-->
<!--        this.ws = null;-->
<!--      }-->
<!--    },-->
<!--    send() {-->
<!--      if (this.ws) {-->
<!--        this.ws.send(this.message);-->
<!--      } else {-->
<!--        alert("未连接到服务器");-->
<!--      }-->
<!--    },-->
<!--  },-->
<!--};-->
<!--</script>-->