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,11 +116,71 @@ export default {
     }
   },
 mounted(){
+
   getUserProfile().then(response => {
     this.userType = response.data.deptId;
+    if(this.userType!=-2){
+      this.queryParams.enterpriseId = response.data.deptId;
+    }
+    this.getList();
   });
-    //定时检测新消息
-    setInterval(() => {
+    this.socket();
+  },
+  methods: {
+  ...mapMutations({
+        SET_EMERGENCY:"bigWindowCompany/SET_EMERGENCY"
+    }
+
+    ),
+
+    toggleSideBar() {
+      this.$store.dispatch('app/toggleSideBar')
+    },
+    async logout() {
+      this.$confirm('确定注销并退出系统吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$store.dispatch('LogOut').then(() => {
+          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,
@@ -113,29 +194,13 @@ mounted(){
         params.companyRead=0
       }
       listReceive(params).then(response => {
+          this.receivedList = response.rows;
           if(response.total!=0){
             this.total= response.total;
           }else{
             this.total= "";
           }
-
       });
-      }, 5000);
-  },
-  methods: {
-    toggleSideBar() {
-      this.$store.dispatch('app/toggleSideBar')
-    },
-    async logout() {
-      this.$confirm('确定注销并退出系统吗？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.$store.dispatch('LogOut').then(() => {
-          location.href = '/index';
-        })
-      }).catch(() => {});
     }
   }
 }