Browse Source

监听MQ消息队列,对不同的消息处理,添加Bus中转事件并监听

zhangyu 5 years ago
parent
commit
49f316118b

+ 4 - 3
config/dev.env.js

@@ -5,8 +5,9 @@ const prodEnv = require('./prod.env')
 module.exports = merge(prodEnv, {
     NODE_ENV: '"development"',
     BASE_URL: '"http://192.168.20.215"', //测试iframe地址
-    SSO_SERVER: '"http://192.168.20.102:8080"' //(新)测试环境
-    // SSO_SERVER: '"http://192.168.20.101:8004"' //测试环境
+    SSO_SERVER: '"http://192.168.20.102:8080"', //(新)测试环境
+    MQTT_SERVICE: '"ws://192.168.20.225:61614/stomp"' //MQ测试环境地址
     // SSO_SERVER: '"http://sso.sagacloud.cn"',  //正式环境
-    // BASE_URL: '"http://mbi.sagacloud.cn"' //线上iframe地址
+    // BASE_URL: '"http://mbi.sagacloud.cn"', //线上iframe地址
+    // MQTT_SERVICE: '""' //MQ正式环境地址
 })

+ 4 - 3
config/prod.env.js

@@ -2,8 +2,9 @@
 module.exports = {
     NODE_ENV: '"production"',
     BASE_URL: '"http://192.168.20.215"', //测试iframe地址
-    SSO_SERVER: '"http://192.168.20.102:8080"' //(新)测试环境
-    // SSO_SERVER: '"http://192.168.20.101:8004"' //测试环境
+    SSO_SERVER: '"http://192.168.20.102:8080"', //(新)测试环境
+    MQTT_SERVICE: '"ws://192.168.20.225:61614/stomp"' //MQ测试环境地址
     // BASE_URL: '"http://mbi.sagacloud.cn"', //线上iframe地址
-    // SSO_SERVER: '"http://sso.sagacloud.cn"'  //正式环境
+    // SSO_SERVER: '"http://sso.sagacloud.cn"',  //正式环境
+    // MQTT_SERVICE: '""' //MQ正式环境地址
 }

+ 1 - 0
package.json

@@ -57,6 +57,7 @@
         "sass-loader": "^7.1.0",
         "semver": "^5.3.0",
         "shelljs": "^0.7.6",
+        "stompjs": "^2.3.3",
         "swiper": "^4.0.0",
         "uglifyjs-webpack-plugin": "^1.1.1",
         "url-loader": "^0.5.8",

+ 1 - 1
src/assets/scss/point/point_config/reset.scss

@@ -365,7 +365,7 @@ button,
 input,
 select,
 textarea {
-    font-family: tahoma, Helvetica, Arial, "\5FAE\8F6F\96C5\9ED1";
+    font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif, "\5FAE\8F6F\96C5\9ED1";
     *font-family: "\5FAE\8F6F\96C5\9ED1";
 }
 

+ 6 - 0
src/assets/style/style.scss

@@ -1,3 +1,9 @@
+body{
+    /deep/ .el-notification.right{
+        text-align: left;
+    }
+}
+
 .icon-wushuju {
     display: block;
     width: 100px;

+ 0 - 9
src/framework/components/messagesever.vue/mqSetting.js

@@ -1,9 +0,0 @@
-/*
- * @Author: zhangyu
- * @Date: 2019-08-26 16:03:46
- * @Info: 
- * @LastEditTime: 2019-09-04 15:06:24
- */
-export const MQTT_SERVICE = 'ws://192.168.20.225:61614/stomp' // mq服务地址
-export const MQTT_USERNAME = 'admin' // mq连接用户名
-export const MQTT_PASSWORD = 'admin' // mq连接密码

+ 46 - 11
src/framework/components/messagesever.vue/index.vue

@@ -2,11 +2,14 @@
  * @Author: zhangyu
  * @Date: 2019-08-26 15:22:13
  * @Info: 
- * @LastEditTime: 2019-09-04 15:15:01
+ * @LastEditTime: 2019-09-05 17:57:15
  -->
 <template>
-  <div>
-    <el-button type="primary" @click="handleClickConnectMQ">连接MQ</el-button>
+  <div class="notification-box" @click="handleClickRead">
+    <el-badge :value="unreadNum" :hidden="!unreadNum" :max="99">
+      <i class="el-icon-message-solid"></i>
+    </el-badge>
+    <!-- <el-button type="primary" @click="handleClickConnectMQ">连接MQ</el-button>
     <el-button type="primary" @click="handleClickDisconnectMQ">断开MQ</el-button>
     <el-button type="primary" @click="handleClickUnsubscribe">停止接收消息</el-button><br><br>
     <el-input type="textarea" :autosize="{ minRows: 6, maxRows: 6}" v-model="sendMessage" placeholder="请输入要发送的内容"></el-input>
@@ -19,18 +22,21 @@
       <div v-for="(message, index) in messageList" :key="index" class="text item">
         {{ message }}
       </div>
-    </el-card>
+    </el-card> -->
   </div>
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import Stomp from 'stompjs'
+import Msmq from './msmq'
 import { MQTT_SERVICE, MQTT_USERNAME, MQTT_PASSWORD } from './mqSetting'
 
 export default {
   data() {
     return {
       client: Stomp.client(MQTT_SERVICE),
+      unreadNum: 0,
       sendMessage: '',
       messageList: [], // 历史消息
       subList: [], // 订阅的消息实例
@@ -53,11 +59,14 @@ export default {
     // };
     // client.connect(login, passcode, onconnect)
   },
+  computed: {
+    ...mapGetters('layout', ['userInfo', 'projectId', 'projects'])
+  },
   methods:{
     connect() {
       this.client = Stomp.client(MQTT_SERVICE)
       this.client.reconnect_delay = 5000
-      var clientid = 'sagaMQ-zy'
+      var clientid = `sagaMQ-${this.userInfo.username}`
       var headers = {
         'login': MQTT_USERNAME,
         'passcode': MQTT_PASSWORD,
@@ -80,9 +89,13 @@ export default {
       try {
         json = JSON.parse(message.body)
       } catch (err) {
-        alert('数据格式错误!')
+        this.$message.error('数据格式错误!')
       }
-      this.messageList.push(json)
+      this.unreadNum = Msmq.handleMsg(json, this.projects, this.unreadNum);
+      // this.unreadNum++
+      // this.$notify.info({ title: '消息',dangerouslyUseHTMLString: true, message: `项目编号:${json.projectId}<br>消息类型:${json.type}<br>描述信息:${json.description}<br>` });
+      // this.messageList.push(json)
+      
     },
     // 接收消息失败回调
     onFailed(frame) {
@@ -116,11 +129,33 @@ export default {
     },
     handleClickSendMessage() {
       this.send('/topic/datacenter.broadcast',this.sendMessage)
-    },
-    
+    }, 
+    handleClickRead() {
+      this.unreadNum = 0;
+    }
   }
 }
 </script>
 
-<style scoped>
-</style>
+<style lang="scss" scoped>
+  .notification-box{
+    width: 100%;
+    height: 100%;
+    padding: 16px 10px 10px;
+    box-sizing: border-box;
+    color: #79869a;
+    cursor: pointer;
+    .el-icon-message-solid{
+      font-size: 22px;
+    }
+    /deep/ .el-badge__content{
+      height: 16px;
+      line-height: 16px;
+      border: 1px solid transparent;
+    }
+  }
+  .notification-box:hover{
+    color: #d3d8e2;
+    background-color: #3f4f62;
+  }
+</style>

+ 9 - 0
src/framework/components/messagesever/mqSetting.js

@@ -0,0 +1,9 @@
+/*
+ * @Author: zhangyu
+ * @Date: 2019-08-26 16:03:46
+ * @Info: 
+ * @LastEditTime: 2019-09-05 14:46:30
+ */
+export const MQTT_SERVICE = process.env.MQTT_SERVICE // mq服务地址
+export const MQTT_USERNAME = 'admin' // mq连接用户名
+export const MQTT_PASSWORD = 'admin' // mq连接密码

+ 15 - 0
src/framework/components/messagesever/msmq.js

@@ -0,0 +1,15 @@
+import { Notification } from 'element-ui';
+import Bus from '@/utils/bus.js'
+
+const MSMQ = {
+  handleMsg (data, projects, unreadNum ) {
+    if(projects.some((item) => {return item.id == data.projectId})) { //判断消息是否是当前用户拥有的项目
+      unreadNum++
+      Bus.$emit('modelStatusChange', data)
+      Notification.info({ title: '消息',dangerouslyUseHTMLString: true, message: `项目编号:${data.projectId}<br>消息类型:${data.type}<br>描述信息:${data.description}<br>` })
+      return unreadNum
+    }
+  }
+}
+
+export default MSMQ

+ 9 - 2
src/framework/layout/PageHeader.vue

@@ -26,13 +26,18 @@
                     <el-dropdown-item icon='el-icon-circle-plus'>修改密码</el-dropdown-item>
                 </el-dropdown-menu>
             </el-dropdown>
+            <ul class="header-nav">
+                <li class="header-nav-notification">
+                    <message-sever></message-sever>
+                </li>
+            </ul>
         </div>
     </div>
 </template>
 <script>
 import frameworkApi from '@/api/framework'
 import { mapGetters, mapMutations } from 'vuex'
-import Bus from '@/utils/bus.js'
+import MessageSever from '../components/messagesever/index'
 export default {
     name: 'PageHeader',
     props: [],
@@ -70,6 +75,8 @@ export default {
         this.selectedProjectId = this.projectId
     },
     mounted() {},
-    components: {}
+    components: {
+        MessageSever
+    }
 }
 </script>

+ 10 - 0
src/framework/style/layout.scss

@@ -114,6 +114,16 @@ body {
         height: 100%;
         display: inline-flex;
         flex-direction: row-reverse;
+        .header-nav{
+            margin-right: 10px;
+            >li{
+                float: left;
+                width: 50px;
+                height: 50px;
+                padding: 0 4px;
+                box-sizing: border-box;
+            }
+        }
         .user-menu-dropdown {
             height: 100%;
             line-height: $pageHeaderHeight;

+ 37 - 31
src/views/model/file/index.vue

@@ -107,6 +107,7 @@
 <script>
 import { mapGetters } from "vuex";
 import request from "@/api/model/file.js";
+import Bus from '@/utils/bus.js'
 import dasBoard from "@/views/dasboard/index";
 import modelLog from "@/components/model/file/modelLog"; //模型日志弹窗
 import repliceModel from "@/components/model/file/replaceModelDialog"; //替换模型弹窗
@@ -261,40 +262,42 @@ export default {
      * @param currentFolderId 当前选择的文件夹id
      */
     queryFloorFile(currentFolderId) {
-      let data = {
-        FolderId: currentFolderId,
-        ProjectId: this.projectId
-      };
-      return new Promise((resolve, reject) => {
-        request.queryFloorList(data, res => {
-          res.Content.map(item => {
-            /**
-             * @info: 状态显示说明
-             * 0: 上传中(上传的用户可操作:中止)
-             * 1: 等待检查
-             * 10: 模型检查中
-             * 11: 未通过检查
-             * 2、20、21: 正常(所有用户可操作:下载、查看历史)
-             * 3、31、4: 正常(所有用户可操作:下载、替换、查看历史)
-             */
-            if (item.Status == 2 || item.Status == 20 || item.Status == 21 || item.Status == 3 || item.Status == 31 || item.Status == 4) {
-              Object.assign(item, { isDown: false, precent: 0 });
-            } else {
-              Object.assign(item, { isDown: true, precent: 100 });
-              if (this.persentList.length != 0) {
-                this.persentList.forEach(pItem => {
-                  if (item.Id == pItem.Id) {
-                    Object.assign(item, { isDown: true, precent: pItem.precent?pItem.precent:0 });
-                  }
-                });
+      if(currentFolderId){
+        let data = {
+          FolderId: currentFolderId,
+          ProjectId: this.projectId
+        };
+        return new Promise((resolve, reject) => {
+          request.queryFloorList(data, res => {
+            res.Content.map(item => {
+              /**
+               * @info: 状态显示说明
+               * 0: 上传中(上传的用户可操作:中止)
+               * 1: 等待检查
+               * 10: 模型检查中
+               * 11: 未通过检查
+               * 2、20、21: 正常(所有用户可操作:下载、查看历史)
+               * 3、31、4: 正常(所有用户可操作:下载、替换、查看历史)
+               */
+              if (item.Status == 2 || item.Status == 20 || item.Status == 21 || item.Status == 3 || item.Status == 31 || item.Status == 4) {
+                Object.assign(item, { isDown: false, precent: 0 });
+              } else {
+                Object.assign(item, { isDown: true, precent: 100 });
+                if (this.persentList.length != 0) {
+                  this.persentList.forEach(pItem => {
+                    if (item.Id == pItem.Id) {
+                      Object.assign(item, { isDown: true, precent: pItem.precent?pItem.precent:0 });
+                    }
+                  });
+                }
               }
-            }
+            });
+            this.tableData = res.Content;
+            this.loading = false;
+            resolve();
           });
-          this.tableData = res.Content;
-          this.loading = false;
-          resolve();
         });
-      });
+      }
     },
     //添加楼层文件
     addFloorFile() {
@@ -553,6 +556,9 @@ export default {
   },
   mounted() {
     this.queryModel();
+    Bus.$on('modelStatusChange', message => {
+      this.queryFloorFile(this.currentFolderId);
+    })
     // 十秒刷新次楼层列表
     // setInterval(()=>{
     //    this.queryFloorFile(this.currentFolderId)