App.vue

<template>
  <div id="app">
    <router-view />
    <audio
      controls="controls"
      id="my_audio"
      src="./assets/audio/alarm.mp3"
      style="display: none"
      hidden="hidden"
    />
    <!-- <div class="tips" v-if="tflag">
      <p>提示</p>
      <span>有一条新告警</span>
    </div> -->
  </div>
</template>

<script>
import { receiveMessage } from "@/utils/websocket";
import socket from "@/utils/websocket";
import { mapState } from "vuex";
import EventBus from "@/utils/bus";
export default {
  name: "App",
  data() {
    return {
      websocket: null,
      tflag: false,
    };
  },
  computed: {
    ...mapState("user", ["userBaseInfo", "token"]),
    userId() {
      return this.userBaseInfo.userId;
    },
    usertoken() {
      return this.token;
    },
  },
  methods: {
    receiveMessage,
    closeWebsocket() {
      if (this.websocket) {
        this.websocket.close();
      }
    },
  },
  mounted() {
    // this.websocket = socket({
    //   onmessage: this.receiveMessage,
    // });

    EventBus.$on("dialogAlarm", (data) => {
      // 接收消息之后 声音弹窗显示
      this.tflag = data;
      setTimeout(() => {
        this.tflag = false;
      }, 3000);
    });
    EventBus.$on("cancelWS", () => {
      this.websocket.close();
    });
    // EventBus.$on("wsOpen", () => {
    //   this.websocket.onopen();
    // });
  },
  watch: {
    usertoken: {
      immediate: true,
      handler(newV) {
        if (newV) {
          this.closeWebsocket();
          this.websocket = socket({
            onmessage: this.receiveMessage,
          });
        }
      },
    },
    // userId: {
    //   immediate: true,
    //   handler(newV) {
    //     if (newV) {
    //       this.closeWebsocket();
    //       this.websocket = socket({
    //         onmessage: this.receiveMessage,
    //       });
    //     }
    //   },
    // },
  },
};
</script>
<style lang="scss" scoped>
#app {
  // & ::v-deep .el-table__body tr:hover>td{
  //   background-color: #bed5ff !important;
  // }

  // & ::v-deep .el-table__body tr.current-row>td{
  //   background-color: #bed5ff !important;
  // }
}
.tips {
  width: 400px;
  height: 80px;
  background: #fff;
  box-shadow: 0px 2px 14px #888888;
  border-radius: 5px;
  padding: 0 20px 20px 20px;
  position: absolute;
  text-align: center;
  top: calc(50% - 40px);
  left: calc(50% - 200px);
}
</style>