m

src/components/layout/index.vue

@@ -26,6 +26,7 @@
       </div>
     </div>
     <el-container>
+      <socket-message></socket-message>
       <el-header><myheader :siteinfo="siteinfo"></myheader></el-header>
       <div class="modules-panel flex-align-center flex-between">
         <p>{{routerName}}</p>
@@ -43,7 +44,6 @@
         </el-container>
       </el-container>
     </el-container>
-    <socket-message></socket-message>
   </div>
 </template>
 

src/components/socketMessage/index.vue

@@ -1,8 +1,13 @@
 <template>
-<div>
-  <div class="box">
+  <div class="messageBox" :class="panelIsShow?'show':''">
+    <div class="flex-align-center flex-between title-panel">
+      <p>消息提示</p>
+      <p @click="panelIsShow = false">忽略</p>
+    </div>
+    <p class="message-item" v-for="item in list" :key="item.index">
+      [{{item.type}}消息]&nbsp;{{item.title}}
+    </p>
   </div>
-</div>
 </template>
 <script>
   export default {
@@ -11,7 +16,9 @@
     data () {
       return {
         id:'',
-        path:"ws://121.37.152.76:8080/yos/webSocket/"
+        path:"ws://121.37.152.76:8080/yos/webSocket/",
+        panelIsShow:false,
+        list:[]
       }
     },
     created () {
@@ -21,8 +28,23 @@
     },
     mounted () {
       this.init()
+      this.getMessageList()
     },
     methods:{
+      async getMessageList () {
+        let param = {
+          "classname": "system.message.Message",
+          "method": "queryMessage",
+          "content": {
+            "nocache": true,
+            "pageNumber": 1,
+            "pageSize": 5,
+            "type": ''
+          }
+        }
+        let res = await this.$api.requested(param)
+        this.list = res.data
+      },
       onCloseThemeChat () {
       },
       onTypeChange (val) {
@@ -53,8 +75,9 @@
           console.log("连接错误")
       },
       getMessage: function (msg) {
-        console.log(msg)
-        alert(msg)
+        console.log(JSON.parse(msg.data))
+        this.panelIsShow = true
+        this.list = [JSON.parse(msg.data).message]
       },
       send: function (type,val,timsubjectid) {
       },
@@ -80,13 +103,37 @@
   }
 </script>
 <style>
-.box{
-    font-size: 62.5%;
-
-}
 </style>
 <style scoped>
-.box{
-  display: flex;
+.messageBox{
+  position: fixed;
+  right:10px;
+  bottom: -310px;
+  width:250px;
+  height: 300px;
+  background: #fff;
+  box-shadow: 0 0 10px #ccc;
+  border-radius: 4px;
+  z-index: 9999;
+  transition: .5s linear;
+  overflow: hidden;
+}
+.show{
+  bottom:10px
+}
+.title-panel{
+  padding: 10px;
+  background: #3874F6;
+  color: #fff;
+  font-size: 14px;
+  cursor: pointer;
+}
+.message-item{
+  padding: 10px;
+  font-size: 14px;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis
 }
 </style>

src/views/message/components/list.vue

@@ -31,7 +31,6 @@
 </template>
 
 <script>
-import { log } from '@antv/g2plot/lib/utils';
 export default {
   name: 'list',
   data () {