large_screen/src/components/tunneling/rtop.vue

<template>
  <div id="rtop">
    <ul style="margin-top: -19px">
      <li>
        瓦斯涌出量:<span style="width:100px">{{data.wasi_after}}</span>m^3/min
        <span
          style="width:30px; height:30px; border:1px solid 4ADEFE; border-radius:50%;margin-left:30px; "
          v-bind:class="{red1:data.danger, green1:data.safety}"
        >
        </span>
      </li>
      <li>
        粉 尘 浓 度 :<span style="width:100px">{{data.fenchen_after}}</span>g/m^3
        <span
          style="width:30px; height:30px; border:1px solid 4ADEFE; border-radius:50%; margin-left:50px;"
          v-bind:class="{red1:data.danger1, green1:data.safety1}"
        >
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      data: {
        fenchen_after: "0",
        wasi_after: "0",
        danger: true,
        danger1: false,
        safety: false,
        safety1: true,
      },
    };
  },

  mounted() {
    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/51`);
    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];
      //判断粉尘
      if (this.data.fenchen_after > 15) {
        this.data.danger1 = true;
        this.data.safety1 = false;
      } else {
        this.data.danger1 = false;
        this.data.safety1 = true;
      }
      if (this.data.wasi_after > 3) {
        this.data.danger = true;
        this.data.safety = false;
      } else {
        this.data.danger = false;
        this.data.safety = true;
      }
      console.log("数据展示为：", this.data);
    },
    close() {
      this.websocket.close();
      console.log(123);
    },
  },
  computed: {
    ...mapState(["websocketIP"]),
  },
};
</script>

<style scoped>
#rtop {
  text-align: center;
  padding-top: 40px;
  padding-bottom: 40px;
}
li {
  width: 100%;
  height: 100%;
  color: #4adefe;
  display: flex;
  flex-wrap: wrap;
  margin-top: 1rem;
  margin-right: 0.75rem;
  font-size: 1.25rem;
  text-align: end;
}
span {
  border-radius: 0.7rem;
  width: 1.875rem;
  height: 1.625rem;
  /* background-color: rgb(133, 158, 231); */
  margin: 0 0.325rem 0.25rem 1rem;
  text-align: center;
  color: #f3db5c;
  font-size: 25px;
}
.red1 {
  background: linear-gradient(145deg, #c21e41, #e7234d);
  box-shadow: 17px 17px 34px #be1d3f;
}
.red2 {
  background: linear-gradient(145deg, #c21e41, #e7234d);
  box-shadow: 17px 17px 34px #be1d3f;
}
.green1 {
  background: linear-gradient(145deg, #63ac7d, #76cc95);
  box-shadow: 17px 17px 34px #61a87a;
}
.green2 {
  background: linear-gradient(145deg, #63ac7d, #76cc95);
  box-shadow: 17px 17px 34px #61a87a;
}
</style>