提示红点

src/components/newLayout/Head.vue

@@ -5,6 +5,7 @@
     </div>
     <div v-for="item in headList" :key="item.path" class="nav-tag" @click="changeNavTag(item)">
       <div v-if="item.icon" class="icon">
+        <div v-show="notice && item.name.search(/工作台/)>0" class="if-notice" />
         <svg-icon :icon-class="item.icon" />
       </div>
       <div class="name">{{ item.name }}</div>
@@ -34,9 +35,11 @@
 <script>
 import { mapGetters } from 'vuex'
 import routes from '@/router/newRouter'
+import websocket from '@/views/workbench/mixins/websocket'
 import { memberGetLoginInMemberInfoByLdap } from '@/api/projectIndex'
 import { logoutUrl } from '@/apiConfig/requestIP.js'
 export default {
+  mixins: [websocket],
   data() {
     return {
       headList: routes.filter(item => item.name !== '业务线'),
@@ -44,7 +47,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['activeNavTag', 'navTagType'])
+    ...mapGetters(['activeNavTag', 'navTagType', 'notice'])
   },
   watch: {
     $route: {
@@ -89,6 +92,19 @@ export default {
     },
     topHome() {
       this.$router.push({ path: '/' })
+    },
+    // websocket数据接收
+    websocketonmessage(e) {
+      const { hasReminding } = JSON.parse(e.data)
+      if (hasReminding) {
+        this.$store.dispatch('data/setNotice', true)
+        const link = document.querySelector('link')
+        link.href = link.href.replace(/favicon.ico/, 'favicon-tips.ico')
+      } else {
+        this.$store.dispatch('data/setNotice', false)
+        const link = document.querySelector('link')
+        link.href = link.href.replace(/favicon-tips.ico/, 'favicon.ico')
+      }
     }
   }
 }
@@ -138,6 +154,17 @@ export default {
     width: 100%;
     height: 100%;
   }
+  .if-notice {
+    position: absolute;
+    z-index: 1;
+    height: 8px;
+    width: 8px;
+    background-color: #E02020;
+    border-radius: 50%;
+    top: 0;
+    right: 0;
+    transform: translateY(-50%);
+  }
 }
 .nav-tag-type {
   margin-top: auto;