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

<template>
  <div>
  
    <div class="title">滚筒2</div>
      <ul class="flex-ul">
        <li >温度：<span class="content">{{data.wendu_after}}℃</span></li>
        <li >张力:<span class="content">{{data.zhangli_after}}N/m</span></li>
        <li >振动:<span class="content">{{data.zhendong_after}}mm</span> </li>
      </ul>
  
  </div>
    
  </template>
  
  <script>
    import { mapState } from "vuex";
  export default {
    data() {
      return {
        data: {
          zhangli_after: "1943",
          wendu_after: "10",
          zhendong_after:"100",
        },
      };
    },
  
    mounted() {
      this.websocket = new WebSocket(
        `ws://${this.websocketIP}/hbase/ws/belt/263`
      );
      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: #4adefe;
  font-size: 20px;
  font-weight: bolder;
  text-align: center;
  margin-top: 10px;
  }
  .flex-ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    width: 100%;
  
    flex-flow: row wrap;
   .content {
      color: #f3db5c;
      right: 10px;
      position: absolute;
      margin-right: -10px;
    }
    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: -30px;
      line-height: 50px;   //30
      padding-left: 0px;
    }
  }
  
  </style>