large_screen/src/components/belt_diagnosis/bianpin/index.vue

<template>
<div>

  <div class="title">变频器</div>
    <ul class="flex-ul">
      <li>功率<span>：{{data.power}}</span>KW</li>
      <li>频率<span>: {{data.frequency}}</span>Hz</li>
     
    </ul>

</div>
  
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      data: {
        power: "1230",
        frequency: "280",
      
      },
    };
  },
//注意 这个id还是待定
  mounted() {
    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/id`);
    this.initWebSocket();
  },
  methods: {
    initWebSocket() {
      // 连接错误
      this.websocket.onerror = () => {
        console.log(
          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
        );
      };
      // 连接成功
      this.websocket.onopen = () => {
        console.log(
          "WebSocket连接成功    状态码：" + this.websocket.readyState
        );
      };
      // 收到消息的回调
      this.websocket.onmessage = (event) => {
        if (JSON.parse(event.data).length) {
          this.changeState(JSON.parse(event.data));
        }
      };
      // 连接关闭的回调
      this.websocket.onclose = () => {
        console.log(
          "WebSocket连接关闭    状态码：" + this.websocket.readyState
        );
      };
      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
      this.$once("hook:beforeDestroy", () => {
        this.websocket.close();
        console.log("关闭websocket连接");
      });
    },
      changeState(data) {
        this.data=data[0];
      console.log("数据展示为：", this.data);
    },
    close() {
      this.websocket.close();
      console.log("关闭websocket连接");
    },
  },
  computed: {
    ...mapState(["websocketIP"]),
  },
};
</script>

<style scoped lang="less">
.title {
  color: #fff;
  font-size: 20px;
  font-weight: bolder;
  text-align: center;
  margin-top: 10px;
}
.flex-ul {
  display: flex;
  // flex-direction: column;
  justify-content: center;
  align-items: center;
  list-style: none;
  width: 100%;

  flex-flow: row wrap;
  li {
    // font-size: 17px;
    font-size: 16px;
    width: -webkit-fit-content;
    flex: 0 1 100%;
    text-align: center;
    margin: 20px 10px 0 -10px;

    //  line-height: 50px;
    color: #4adefe;
  }
  span{
    color: #fff;
  }
}

</style>