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

<template>
<div>

  <div class="title">变频器</div>
    <ul class="flex-ul">
      <li>功率：<span class="content">{{data.gonglü_after}}KW</span></li>
      <li>频率: <span class="content">{{data.pinlü_after}}Hz</span></li>
     
    </ul>

</div>
  
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      data: {
        gonglü_after: "1230",
        pinlü_after: "60",
      
      },
    };
  },
//注意 这个id还是待定
  mounted() {
    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/265`);
    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 {
    // border-bottom: #5ddcf8 1px solid;
    // height: 40px;
    // width: 100%;
    // font-size: 22px;
    // line-height: 2;
    // padding: 5px;
    // font-weight: 500;
    // color: #4adefe;
    // margin-left: 20px;
    
  color: #4adefe;
  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;
   .content {
    color: #f3db5c;
    right: 10px;
    position: absolute;
  }
  ul {
    margin-top: 10px;
    margin-left: -20px;
  }
  li {
    width: 120%;
    height: 100%;
    color: #4adefe;
    display: flex;
    /* flex-direction: column; */

    font-size: 18px;
    position: relative;
    margin-top: -5px;
    margin-left: 0px;
    line-height: 50px;   //30
    padding-left: 0px;
  }
}

</style>