large_screen/src/components/tunneling/rtone.vue

<template>
  <div id="rtone">
    <div class="daystatics">
      <div class="item">
        <span>累计完成进尺 :</span><span>{{ data.leijijinchi }}</span
        >m
      </div>
      <div class="item">
        <span>月 完 成 进尺 :</span><span>{{ data.yuejinchi }}</span
        >m
      </div>
      <div class="item">
        <span>日 平 均 进尺 :</span><span>{{ data.rizuigaojinchi }}</span
        >m
      </div>
      <div class="item">
        <span>班 最 高 进尺 :</span> <span>{{ data.banzuigaojinchi }}</span
        >m
      </div>
      <div class="item">
        <span>日 最 高 进尺 :</span><span>{{ data.rizuigaojinchi }}</span
        >m
      </div>
      <div class="item">
        <span>当 前___人 员 :</span
        ><span id="six">{{ data.dangqianrenyuan }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      data: {
        dangqianrenyuan: "0",
        qnm: "0",
        banzuigaojinchi: "0",
        rizuigaojinchi: "0",
        leijijinchi: "0",
        yuejinchi: "0",
        rijinchi: "0",
      },
    };
  },

  mounted() {
    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/53`);
    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();
      });
    },
    changeState(data) {
      this.data = data[0];
    },
    close() {
      this.websocket.close();
      console.log(123);
    },
  },
  computed: {
    ...mapState(["websocketIP"]),
  },
};
</script>

<style lang="less" scoped>
.daystatics {
  display: grid;
  grid-template-columns: repeat(1, 500px);
  margin-top: -40px;
  .item {
    color: #4adefe;
    font-size: 18px;
    margin-left: 30px;
  }
  .item span:nth-of-type(1) {
    display: inline-block;
    color: #4adefe;
    font-size: 18px;
    width: 140px;
  }
  .item span:nth-of-type(2) {
    display: inline-block;
    text-indent: -47px;
    color: #f3db5c;
    font-size: 25px;
  }
}

li {
  width: 100%;
  height: 100%;
  color: #4adefe;
  display: flex;
  /* flex-direction: column; */
  font-size: 18px;
  position: relative;
}
span {
  border-radius: 0.7px;
  width: 116.5px;
  height: 38.625px;
  color: #f3db5c;
  font-size: 25px;
  /* background-color: rgb(133, 158, 231); */
  margin: 0 -0.675px 0.25px;
  text-align: center;
}
</style>