消息

src/layout/components/header-notice.vue

@@ -115,6 +115,46 @@
     <!--        <ele-empty v-if="!todo.length" text="已完成所有任务" />-->
     <!--      </el-tab-pane>-->
     <!--    </el-tabs>-->
+    <ele-modal
+      width="600px"
+      title="最新消息"
+      :visible.sync="visibleModal"
+      :multiple="true"
+      :maxable="true"
+      append-to-body
+      top="0"
+      custom-class="my-demo-dialog"
+      @close="cancel"
+    >
+      <div class="ele-notice-list ele-scrollbar-mini">
+        <div
+          v-for="(item, index) in notice"
+          :key="index"
+          class="ele-notice-item"
+          @click="clearNotice(item, index)"
+        >
+          <div class="ele-cell ele-notice-item-wrapper">
+            <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="
+                  display: flex;
+                  justify-content: space-between;
+                  align-items: center;
+                "
+              >
+                <div class="ele-text-secondary ele-elip"
+                  >{{ item.createTime }}
+                </div>
+                <div class="el-icon-view" title="已读"></div>
+              </div>
+            </div>
+          </div>
+          <el-divider />
+        </div>
+      </div>
+    </ele-modal>
   </el-popover>
 </template>
 
@@ -131,6 +171,7 @@
       return {
         // 是否显示
         visible: false,
+        visibleModal: false,
         // 选项卡选中
         active: 'notice',
         // 通知数据
@@ -174,18 +215,25 @@
       //     }
       //   });
       //   },500)
-    
+
       // });
 
       if (getToken()) {
         let url =
           'ws://' +
-          window.location.host +
+          'aiot.zoomwin.com.cn:51001' +
           '/ws/websocket/UnreadNotifyMessageCount?token=' +
           getToken();
         let socket = new WebSocket(url);
         socket.onmessage = (event) => {
           this.noticeCount = event.data * 1 || 0;
+          if (this.noticeCount) {
+            getUnreadNotice().then((res) => {
+              this.visibleModal = false;
+              this.visibleModal = true;
+              this.notice = res.slice(0, 20);
+            });
+          }
         };
       }
     },
@@ -193,12 +241,20 @@
       /* 查询数据 */
       async query() {
         this.notice = await getUnreadNotice();
-        this.notice = this.notice.slice(0, 15);
+        this.notice = this.notice.slice(0, 30);
+      },
+      async cancel() {
+        await updateAllNotifyMessageReadAPI();
+        this.notice = [];
+        this.noticeCount = 0;
+        this.visibleModal = false;
       },
-
       /* 清空通知 */
       async clearNotice(item = {}, index) {
         if (item.id) {
+          if (item.formPath) {
+            window.history.pushState(null, '', item.formPath);
+          }
           await updateNotifyMessageReadByIdAPI([item.id]);
           this.notice.splice(index, 1);
           this.noticeCount = this.noticeCount ? this.noticeCount - 1 : 0;
@@ -221,6 +277,12 @@
 </script>
 
 <style lang="scss">
+  .my-demo-dialog.el-dialog {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    margin: 0;
+  }
   .ele-notice-group {
     display: block;