1、消息提示

src/layout/index.vue

@@ -1,9 +1,10 @@
 <template>
-  <div :class="classObj" class="app-wrapper" :style="{'--current-color': $store.state.settings.theme}">
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
-    <sidebar class="sidebar-container" :style="{ backgroundColor: $store.state.settings.themeStyle === 'dark' ? variables.menuBg : variables.menuLightBg }" />
-    <div :class="{hasTagsView:needTagsView}" class="main-container">
-      <div :class="{'fixed-header':fixedHeader}">
+  <div :class="classObj" class="app-wrapper" :style="{ '--current-color': $store.state.settings.theme }">
+    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
+    <sidebar class="sidebar-container"
+      :style="{ backgroundColor: $store.state.settings.themeStyle === 'dark' ? variables.menuBg : variables.menuLightBg }" />
+    <div :class="{ hasTagsView: needTagsView }" class="main-container">
+      <div :class="{ 'fixed-header': fixedHeader }">
         <navbar />
         <tags-view v-if="needTagsView" />
       </div>
@@ -21,6 +22,8 @@ import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
 import { mapState } from 'vuex'
 import variables from '@/styles/variables.scss'
+import dingSound from '@/assets/tiktok/sisfus.mp3'
+import checkPermisAction from '@/utils/permisaction'
 
 export default {
   name: 'Layout',
@@ -32,6 +35,11 @@ export default {
     Sidebar,
     TagsView
   },
+  data() {
+    return {
+      voice: null,
+    }
+  },
   mixins: [ResizeMixin],
   computed: {
     ...mapState({
@@ -53,7 +61,89 @@ export default {
       return variables
     }
   },
+
+  created() {
+    // if (!this.roles.includes('admin')) {
+    //   this.currentRole = 'editorDashboard'
+    // }
+
+    if (checkPermisAction(['admin:mmAlarmLog:notice'])) {
+      this.$confirm('是否接收警告?', '提示', {
+        distinguishCancelAndClose: true,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.voice = new Audio(dingSound)
+
+        this.initWebSocket()
+      }).catch(() => {
+        console.log('取消')
+      });
+    }
+  },
+  destroyed() {
+    console.log('断开websocket连接')
+    this.websock.close() // 离开路由之后断开websocket连接
+    // unWsLogout(this.id, this.group).then(response => {
+    //   console.log(response.data)
+    // }
+    // )
+  },
   methods: {
+    checkPermisAction,
+    initWebSocket() { // 初始化weosocket
+      const wsuri = `ws://${process.env.VUE_APP_WEBSOCKET_URL}/ws?token=${this.$store.state.user.token}`
+
+      this.websock = new WebSocket(wsuri)
+      this.websock.onmessage = this.websocketonmessage
+      this.websock.onopen = this.websocketonopen
+      this.websock.onerror = this.websocketonerror
+      this.websock.onclose = this.websocketclose
+    },
+    websocketonopen() { // 连接建立之后执行send方法发送数据
+      console.log('ws连接打开')
+      //   const actions = { 'test': '12345' }
+      //   this.websocketsend(JSON.stringify(actions))
+    },
+    websocketonerror() { // 连接建立失败重连
+      this.initWebSocket()
+    },
+    websocketonmessage(e) { // 数据接收
+      console.log("ws：", e.data)
+      try {
+        let data = JSON.parse(e.data)
+
+        this.$notify({
+          title: '钱包警告',
+          dangerouslyUseHTMLString: true,
+          message: `<p>设备id：${data.machineId}</p><p>设备码：${data.biosId}</p><p style="text-align:left;">内容：${data.content}</p>`,
+          type: 'warning',
+          duration: 0
+        });
+
+        this.playVoice("钱包告警")
+      } catch (err) {
+        console.log("接收websocket数据失败:", err)
+      }
+    },
+
+    playVoice(text) {
+
+      this.voice.play().catch(err => {
+        console.error('音频播放失败:', err)
+      })
+    },
+    websocketsend(Data) { // 数据发送
+      //   this.websock.send(Data)
+    },
+    websocketclose(e) { // 关闭
+      // unWsLogout(this.id, this.group).then(response => {
+      //   console.log(response.data)
+      // }
+      // )
+      // console.log('断开连接', e)
+    },
     handleClickOutside() {
       this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
     }
@@ -62,45 +152,45 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import "~@/styles/mixin.scss";
-  @import "~@/styles/variables.scss";
+@import "~@/styles/mixin.scss";
+@import "~@/styles/variables.scss";
 
-  .app-wrapper {
-    @include clearfix;
-    position: relative;
-    height: 100%;
-    width: 100%;
+.app-wrapper {
+  @include clearfix;
+  position: relative;
+  height: 100%;
+  width: 100%;
 
-    &.mobile.openSidebar {
-      position: fixed;
-      top: 0;
-    }
-  }
-
-  .drawer-bg {
-    background: #000;
-    opacity: 0.3;
-    width: 100%;
-    top: 0;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
-  }
-
-  .fixed-header {
+  &.mobile.openSidebar {
     position: fixed;
     top: 0;
-    right: 0;
-    z-index: 9;
-    width: calc(100% - #{$sideBarWidth});
-    transition: width 0.28s;
   }
+}
 
-  .hideSidebar .fixed-header {
-    width: calc(100% - 54px)
-  }
+.drawer-bg {
+  background: #000;
+  opacity: 0.3;
+  width: 100%;
+  top: 0;
+  height: 100%;
+  position: absolute;
+  z-index: 999;
+}
 
-  .mobile .fixed-header {
-    width: 100%;
-  }
+.fixed-header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9;
+  width: calc(100% - #{$sideBarWidth});
+  transition: width 0.28s;
+}
+
+.hideSidebar .fixed-header {
+  width: calc(100% - 54px)
+}
+
+.mobile .fixed-header {
+  width: 100%;
+}
 </style>