ws

src/layout/components/header-notice.vue

@@ -1,14 +1,7 @@
 <!-- 顶栏消息通知 -->
 <template>
-  <el-popover
-    :width="430"
-    trigger="click"
-    v-model="visible"
-    class="ele-notice-group"
-    transition="el-zoom-in-top"
-    popper-class="ele-notice-pop"
-    @show="query"
-  >
+  <el-popover :width="430" trigger="click" v-model="visible" class="ele-notice-group" transition="el-zoom-in-top"
+    popper-class="ele-notice-pop" @show="query">
     <template v-slot:reference>
       <div class="ele-notice-group">
         <el-badge :value="unreadNum" :hidden="!unreadNum">
@@ -22,21 +15,14 @@
           <i :class="['el-icon-chat-dot-square', 'ele-notice-item-icon']"></i>
           <div class="ele-cell-content">
             <div class="ele-elip">{{ item.templateContent }}</div>
-            <div
-              style="
+            <div style="
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
-              "
-            >
-              <div class="ele-text-secondary ele-elip"
-                >{{ item.createTime }}
+              ">
+              <div class="ele-text-secondary ele-elip">{{ item.createTime }}
               </div>
-              <div
-                class="el-icon-view"
-                @click="clearNotice(item, index)"
-                title="已读"
-              ></div>
+              <div class="el-icon-view" @click="clearNotice(item, index)" title="已读"></div>
             </div>
           </div>
         </div>
@@ -119,201 +105,201 @@
 </template>
 
 <script>
-  import {
-    getUnreadNotice,
-    updateAllNotifyMessageReadAPI,
-    updateNotifyMessageReadByIdAPI
-  } from '@/api/layout';
-  import { getToken } from '@/utils/token-util';
+import {
+  getUnreadNotice,
+  updateAllNotifyMessageReadAPI,
+  updateNotifyMessageReadByIdAPI
+} from '@/api/layout';
+import { getToken } from '@/utils/token-util';
 
 
-  export default {
-    data() {
-      return {
-        // 是否显示
-        visible: false,
-        // 选项卡选中
-        active: 'notice',
-        // 通知数据
-        notice: [],
-        noticeCount: 0,
-        timer: null,
-        // 私信数据
-        letter: [],
-        // 待办数据
-        todo: []
+export default {
+  data() {
+    return {
+      // 是否显示
+      visible: false,
+      // 选项卡选中
+      active: 'notice',
+      // 通知数据
+      notice: [],
+      noticeCount: 0,
+      timer: null,
+      // 私信数据
+      letter: [],
+      // 待办数据
+      todo: []
+    };
+  },
+  computed: {
+    // 通知标题
+    noticeTitle() {
+      return '通知' + (this.noticeCount > 0 ? `(${this.noticeCount})` : '');
+    },
+    // // 私信标题
+    // letterTitle() {
+    //   return '私信' + (this.letter.length ? `(${this.letter.length})` : '');
+    // },
+    // // 待办标题
+    // todoTitle() {
+    //   return '待办' + (this.todo.length ? `(${this.todo.length})` : '');
+    // },
+    // 未读数量
+    unreadNum() {
+      return this.noticeCount;
+    }
+  },
+  created() {
+    if (getToken()) {
+      let url = 'ws://' + window.location.host + '/ws/websocket/UnreadNotifyMessageCount?token=' + getToken()
+      let socket = new WebSocket(url);
+      socket.onmessage = (event) => {
+        console.log(event.data)
+        this.noticeCount = event.data * 1 || 0;
       };
+    }
+  },
+  methods: {
+    /* 查询数据 */
+    async query() {
+      this.notice = await getUnreadNotice();
+      this.notice = this.notice.slice(0, 15);
     },
-    computed: {
-      // 通知标题
-      noticeTitle() {
-        return '通知' + (this.noticeCount > 0 ? `(${this.noticeCount})` : '');
-      },
-      // // 私信标题
-      // letterTitle() {
-      //   return '私信' + (this.letter.length ? `(${this.letter.length})` : '');
-      // },
-      // // 待办标题
-      // todoTitle() {
-      //   return '待办' + (this.todo.length ? `(${this.todo.length})` : '');
-      // },
-      // 未读数量
-      unreadNum() {
-        return this.noticeCount;
+
+
+    /* 清空通知 */
+    async clearNotice(item = {}, index) {
+      if (item.id) {
+        await updateNotifyMessageReadByIdAPI([item.id]);
+        this.notice.splice(index, 1);
+        this.noticeCount = this.noticeCount - 1;
+      } else {
+        await updateAllNotifyMessageReadAPI();
+        this.notice = [];
+        this.noticeCount = 0;
       }
     },
-    created() {
-      if (getToken()) {
-        let url = 'ws://'+window.location.host+'/websocket/UnreadNotifyMessageCount?token='+getToken()
-        let socket = new WebSocket(url);
-        socket.onmessage = (event) => {
-          console.log(event.data)
-          this.noticeCount = event.data * 1 || 0;
-        };
-      }
+    /* 清空通知 */
+    clearLetter() {
+      this.letter = [];
     },
-    methods: {
-      /* 查询数据 */
-      async query() {
-        this.notice = await getUnreadNotice();
-        this.notice = this.notice.slice(0, 15);
-      },
-    
-
-      /* 清空通知 */
-      async clearNotice(item = {}, index) {
-        if (item.id) {
-          await updateNotifyMessageReadByIdAPI([item.id]);
-          this.notice.splice(index, 1);
-          this.noticeCount = this.noticeCount - 1;
-        } else {
-          await updateAllNotifyMessageReadAPI();
-          this.notice = [];
-          this.noticeCount = 0;
-        }
-      },
-      /* 清空通知 */
-      clearLetter() {
-        this.letter = [];
-      },
-      /* 清空通知 */
-      clearTodo() {
-        this.todo = [];
-      }
+    /* 清空通知 */
+    clearTodo() {
+      this.todo = [];
     }
-  };
+  }
+};
 </script>
 
 <style lang="scss">
-  .ele-notice-group {
-    display: block;
+.ele-notice-group {
+  display: block;
 
-    .el-badge {
-      line-height: 1;
-      display: block;
-    }
+  .el-badge {
+    line-height: 1;
+    display: block;
   }
+}
 
-  /* 消息通知pop */
-  .ele-notice-pop {
-    padding: 0 !important;
-
-    /* tab */
-    .el-tabs__nav-scroll {
-      text-align: center;
-    }
+/* 消息通知pop */
+.ele-notice-pop {
+  padding: 0 !important;
 
-    .el-tabs__nav {
-      float: none;
-      display: inline-block;
-    }
+  /* tab */
+  .el-tabs__nav-scroll {
+    text-align: center;
+  }
 
-    .el-tabs__item {
-      height: 44px;
-      line-height: 44px;
-      padding: 0 20px !important;
-    }
+  .el-tabs__nav {
+    float: none;
+    display: inline-block;
+  }
 
-    /* 空视图 */
-    .ele-empty {
-      padding: 100px 0;
-    }
+  .el-tabs__item {
+    height: 44px;
+    line-height: 44px;
+    padding: 0 20px !important;
   }
 
-  /* 列表 */
-  .ele-notice-list {
-    padding-top: 8px;
-    max-height: 360px;
-    overflow: auto;
+  /* 空视图 */
+  .ele-empty {
+    padding: 100px 0;
   }
+}
 
-  .ele-notice-item {
-    .ele-notice-item-wrapper {
-      padding: 12px 15px;
-      transition: background-color 0.2s;
-      cursor: pointer;
+/* 列表 */
+.ele-notice-list {
+  padding-top: 8px;
+  max-height: 360px;
+  overflow: auto;
+}
 
-      &:hover {
-        background-color: hsla(0, 0%, 60%, 0.05);
-      }
-    }
-
-    .ele-text-secondary {
-      margin-top: 5px;
-      font-size: 13px;
-    }
+.ele-notice-item {
+  .ele-notice-item-wrapper {
+    padding: 12px 15px;
+    transition: background-color 0.2s;
+    cursor: pointer;
 
-    .ele-cell-desc {
-      margin-top: 3px !important;
-      font-size: 12px !important;
+    &:hover {
+      background-color: hsla(0, 0%, 60%, 0.05);
     }
   }
 
-  .ele-notice-item-icon {
-    width: 32px;
-    height: 32px;
-    line-height: 32px !important;
-    color: #fff;
-    font-size: 16px;
-    background-color: #60b2fc;
-    border-radius: 50%;
-    text-align: center;
+  .ele-text-secondary {
+    margin-top: 5px;
+    font-size: 13px;
+  }
 
-    &.el-icon-s-check {
-      background-color: #f5686f;
-    }
+  .ele-cell-desc {
+    margin-top: 3px !important;
+    font-size: 12px !important;
+  }
+}
 
-    &.el-icon-video-camera {
-      background-color: #7cd734;
-    }
+.ele-notice-item-icon {
+  width: 32px;
+  height: 32px;
+  line-height: 32px !important;
+  color: #fff;
+  font-size: 16px;
+  background-color: #60b2fc;
+  border-radius: 50%;
+  text-align: center;
 
-    &.el-icon-s-claim {
-      background-color: #faad14;
-    }
+  &.el-icon-s-check {
+    background-color: #f5686f;
+  }
 
-    &.el-icon-message-solid {
-      background-color: #2bcacd;
-    }
+  &.el-icon-video-camera {
+    background-color: #7cd734;
   }
 
-  /* 操作按钮 */
-  .ele-notice-actions > .ele-cell-content {
-    line-height: 42px;
-    text-align: center;
-    cursor: pointer;
-    color: inherit;
+  &.el-icon-s-claim {
+    background-color: #faad14;
+  }
 
-    &:hover {
-      background-color: hsla(0, 0%, 60%, 0.05);
-    }
+  &.el-icon-message-solid {
+    background-color: #2bcacd;
   }
+}
 
-  .ele-elip {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: normal !important;
+/* 操作按钮 */
+.ele-notice-actions>.ele-cell-content {
+  line-height: 42px;
+  text-align: center;
+  cursor: pointer;
+  color: inherit;
+
+  &:hover {
+    background-color: hsla(0, 0%, 60%, 0.05);
   }
+}
+
+.ele-elip {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal !important;
+}
 </style>