soket消息

gassafetyprogress-web/src/layout/components/Navbar.vue

@@ -11,11 +11,30 @@
           <!--<img src="@/assets/xiaoxi.png" :hidden="xiaohidden" style="height: 40px;width: 40px;margin-top: 5px;cursor: pointer;">-->
         <!--</div>-->
         <!-- <search id="header-search" class="right-menu-item" /> -->
-          <el-badge :value="total" :max="99" class="item" >
-            <i class="el-icon-chat-dot-round" style="width: 10px;height: 10px;" @click="$router.push('/emergency/emergency')"></i>
-          </el-badge>
-
+<!--          <el-badge :value="total" :max="99" class="item" >-->
+<!--            <i class="el-icon-chat-dot-round" style="width: 10px;height: 10px;" ></i>-->
+<!--          </el-badge>-->
 
+        <el-dropdown class="avatar-container right-menu-item hover-effect" style="margin-right: 0px" trigger="click">
+          <div class="avatar-wrapper" >
+              <el-badge :value="total" :max="99" class="item" >
+               <i class="el-icon-chat-dot-round" style="width: 10px;height: 10px;" ></i>
+               </el-badge>
+          </div>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item v-if="total==0">
+              <span>暂无消息</span>
+            </el-dropdown-item>
+            <div v-for="(item,index) in receivedList" >
+              <el-dropdown-item v-if="index==0" @click.native="openMassage(item.id,item.eventName)">
+                  <span>您有新消息：{{item.eventName}}</span>
+              </el-dropdown-item>
+              <el-dropdown-item v-if="index>0"  divided @click.native="openMassage(item.id,item.eventName)">
+                <span>您有新消息：{{item.eventName}}</span>
+              </el-dropdown-item>
+            </div>
+          </el-dropdown-menu>
+        </el-dropdown>
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
 
         <!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">
@@ -46,7 +65,7 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters,mapMutations  } from 'vuex'
 import Breadcrumb from '@/components/Breadcrumb'
 import TopNav from '@/components/TopNav'
 import Hamburger from '@/components/Hamburger'
@@ -69,13 +88,15 @@ export default {
       userType:-2,
       total:null,
       xiaohidden:false,
+      receivedList:[],
+      routerPath:"",
     }
   },
   computed: {
     ...mapGetters([
       'sidebar',
       'avatar',
-      'device'
+      'device',
     ]),
     setting: {
       get() {
@@ -95,34 +116,23 @@ export default {
     }
   },
 mounted(){
-      getUserProfile().then(response => {
-        this.userType = response.data.deptId;
-      });
-    //定时检测新消息
-    setInterval(() => {
-            var params = {
-                  pageNum: 1,
-                    pageSize: 100,
-                    status:5,
-                    enterpriseId:this.userType
-                };
-          if(this.userType==-2){
-            params.governmentRead=0;
-            params.enterpriseId=null;
-          }else {
-            params.companyRead=0
-          }
-          listReceive(params).then(response => {
-              if(response.total!=0){
-                  this.total= response.total;
-              }else{
-                  this.total= "";
-              }
-
-          });
-      }, 5000);
+
+  getUserProfile().then(response => {
+    this.userType = response.data.deptId;
+    if(this.userType!=-2){
+      this.queryParams.enterpriseId = response.data.deptId;
+    }
+    this.getList();
+  });
+    this.socket();
   },
   methods: {
+  ...mapMutations({
+        SET_EMERGENCY:"bigWindowCompany/SET_EMERGENCY"
+    }
+
+    ),
+
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
     },
@@ -136,6 +146,61 @@ mounted(){
           location.href = '/index';
         })
       }).catch(() => {});
+    },
+    openMassage(id,title){
+      //this.$router.push('/emergency/emergency?eventid='+id);
+      this.routerPath="/emergency/emergency";
+      if(window.location.pathname==this.routerPath){
+        // this.$parent.showDetail(id,title);
+        this.SET_EMERGENCY({
+          eventId:id,
+          eventName:title,
+        })
+      }else {
+        this.$router.push({path: this.routerPath,query:{eventId:id,eventName:title}});
+      }
+
+    },
+    socket() {
+      console.log("socket执行");
+      this.ws = new WebSocket(
+        "ws://192.168.2.17:8903/gassafety/websocketServer"
+      );
+      this.ws.onopen = (evt) => {
+        console.log("WebSockets开启");
+      };
+      this.ws.onmessage = (evt) => {
+        console.log("推送", evt);
+        const obj = JSON.parse(evt.data);
+        console.log("接受socketobj", obj);
+        this.getList();
+      };
+      this.ws.onclose = () => {
+        console.log("ws协议关闭");
+      };
+    },
+    getList(){
+      console.log(this.userType)
+      var params = {
+        pageNum: 1,
+        pageSize: 100,
+        status:5,
+        enterpriseId:this.userType
+      };
+      if(this.userType==-2){
+        params.governmentRead=0;
+        params.enterpriseId=null;
+      }else {
+        params.companyRead=0
+      }
+      listReceive(params).then(response => {
+          this.receivedList = response.rows;
+          if(response.total!=0){
+            this.total= response.total;
+          }else{
+            this.total= "";
+          }
+      });
     }
   }
 }