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

<template>
  <div>
    <div class="title">驱动电机2</div>
    <ul class="flex-ul">
      <li>
        电机功率:<span class="content">{{ data.dianjigonglü_after }}KW</span>
      </li>
      <li>
        电压:<span class="content">{{ data.dianya_after }}V</span>
      </li>
      <li>
        转速:<span class="content">{{ data.zhuansu_after }}r/min</span>
      </li>
      <li>
        扭矩:<span class="content">{{ data.niuju_after }}Nm</span>
      </li>
      <li>
        前/后轴温:<span class="content"
          >{{ data.qianzhouwen_after }}/{{ data.houzhouwen_after }}℃</span
        >
      </li>
      <li>
        油压:<span class="content">{{ data.youya_after }} Pa</span>
      </li>
      <li>
        ABC相温度:<span class="content"
          >{{ data.axiangraozuwen_after }}/{{ data.bxiangraozuwen_after }}/{{
            data.cxiangraozuwen_after
          }}℃</span
        >
      </li>

      <li>
        振动:<span class="content1">{{ data.zhendong_after }} mm</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      data: {
        dianjigonglü_after: "435",
        dianya_after: "220",
        zhuansu_after: "453",
        niuju_after: "34",
        qianzhouwen_after: "45",
        houzhouwen_after: "50",
        axiangraozuwen_after: "100",
        bxiangraozuwen_after: "120",
        cxiangraozuwen_after: "110",
        youya_after: "20",
        zhendong_after: "89",
      },
    };
  },
  // 这里的id为测点id
  mounted() {
    this.websocket = new WebSocket(
      `ws://${this.websocketIP}/hbase/ws/belt/261`
    );
    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: space-around;
  align-items: center;
  list-style: none;
  flex-flow: row wrap;
  li:nth-child(odd) {
    flex: 0 0 69%;
  }
  li:nth-child(even) {
    flex: 0 0 31%;
  }
   .content {
    color: #f3db5c;
    right: 10px;
    position: absolute;
  }
  .content1 {
    color: #f3db5c;
    right: 10px;
    position: absolute;
    margin-right:-5px ;
  }
  li {
      // width: 100%;
    height: 100%;
    position: relative;
    // font-size: 17px;
    font-size: 16px;
    width: -webkit-fit-content;
    margin-top: -5px;
    margin-left: -50px;
    margin-right: -20px;
    line-height: 50px;
    //  padding-left: 0px;
    color: #4adefe;
  }
}
</style>