App.vue

<template>
  <div id="app">
    <router-view />
    <audio
      ref="audio"
      src="./assets/audio/urgent.wav"
      muted="true"
      loop="false"
    />
    <transition name="tipalerm">
      <div v-if="tflag" class="tips">
        <p>提示</p>
        <span
          >系统新增{{ msg.count }}条
          <span v-text="msg.type == 1 ? '设备连接' : '漏缆监测'" />
          <span id="alevel" :style="alevel">{{ msg.level }}</span
          >告警消息,请及时查看!
        </span>
      </div>
    </transition>
  </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,
      msg: "",
      alevel: {
        color: "",
      },
      audioUrl: "/assets/audio/urgent.wav",
      audioObj: {
        一般: "commonly.wav",
        重要: "importang.wav",
        紧急: "urgent.wav",
        连接异常: "urgent.wav",
      },
    };
  },
  computed: {
    ...mapState("user", ["userBaseInfo", "token"]),
    ...mapState("alarm", ["cableList", "deviceList"]),
    usertoken() {
      return this.token;
    },
  },
  watch: {
    $route(to, from) {
      if (to.path === "/login") {
        setTimeout(this.closeWebsocket(), 300);
      }
    },
    usertoken: {
      immediate: true,
      handler(newV) {
        if (newV) {
          if (newV !== "") {
            this.websocket = socket({ onmessage: this.receiveMessage });
          } else {
            this.closeWebsocket();
          }
        }
      },
    },
    cableList: {
      handler(newV) {
        if (newV.length || this.deviceList.length) {
          setTimeout(() => {
            this.$refs.audio.play();
            this.$refs.audio.loop = true;
          }, 500);
        } else {
          this.$refs.audio.loop = false;
        }
      },
    },
  },
  mounted() {
    document.body.addEventListener(
      "mousedown",
      () => {
        this.$refs.audio.muted = false;
        document.body.removeEventListener("mousedown", () => {});
      },
      false
    );
    EventBus.$on("dialogAlarm", (data) => {
      // 接收消息之后 声音弹窗显示
      this.msg = data;
      this.levelcolor();
      this.tflag = true;
      setTimeout(() => {
        this.tflag = false;
      }, 3000);
    });
    EventBus.$on("autioPlay", (data) => {
      this.audioUrl = "./assets/audio/" + this.audioObj[data.level];
      setTimeout(() => {
        this.$refs.audio.play();
      }, 500);
      if (this.cableList.length || this.deviceList.length) {
        this.$refs.audio.loop = true;
      }
    });
    EventBus.$on("cancelWS", () => {
      this.closeWebsocket();
    });
  },
  destroyed() {
    document.body.removeEventListener("mousedown", () => {});
  },
  methods: {
    receiveMessage,
    closeWebsocket() {
      if (this.websocket) {
        this.websocket.close();
      }
    },
    levelcolor() {
      if (this.msg.level === "正常" || this.msg.level === "连接正常") {
        this.alevel.color = "green";
      } else if (this.msg.level === "紧急" || this.msg.level === "连接异常") {
        this.alevel.color = "#f00";
      } else if (this.msg.level === "重要") {
        this.alevel.color = "#f89850";
      } else if (this.msg.level === "一般") {
        this.alevel.color = "#ead906";
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.tipalerm-enter-active {
  transition: 0.5s;
}
.tipalerm-enter {
  transform: translateX(200px);
}
.tips {
  width: 160px;
  height: 120px;
  font-size: 14px;
  letter-spacing: 1px;
  background: #fff;
  box-shadow: 0px 2px 14px #888888;
  border-radius: 5px;
  padding: 4px 16px 16px 16px;
  position: fixed;
  text-align: center;
  bottom: 0px;
  right: 0px;
}
</style>