|
@@ -2,11 +2,14 @@
|
|
* @Author: zhangyu
|
|
* @Author: zhangyu
|
|
* @Date: 2019-08-26 15:22:13
|
|
* @Date: 2019-08-26 15:22:13
|
|
* @Info:
|
|
* @Info:
|
|
- * @LastEditTime: 2019-09-04 15:15:01
|
|
|
|
|
|
+ * @LastEditTime: 2019-09-05 17:57:15
|
|
-->
|
|
-->
|
|
<template>
|
|
<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="handleClickDisconnectMQ">断开MQ</el-button>
|
|
<el-button type="primary" @click="handleClickUnsubscribe">停止接收消息</el-button><br><br>
|
|
<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>
|
|
<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">
|
|
<div v-for="(message, index) in messageList" :key="index" class="text item">
|
|
{{ message }}
|
|
{{ message }}
|
|
</div>
|
|
</div>
|
|
- </el-card>
|
|
|
|
|
|
+ </el-card> -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
+import { mapGetters } from 'vuex'
|
|
import Stomp from 'stompjs'
|
|
import Stomp from 'stompjs'
|
|
|
|
+import Msmq from './msmq'
|
|
import { MQTT_SERVICE, MQTT_USERNAME, MQTT_PASSWORD } from './mqSetting'
|
|
import { MQTT_SERVICE, MQTT_USERNAME, MQTT_PASSWORD } from './mqSetting'
|
|
|
|
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
client: Stomp.client(MQTT_SERVICE),
|
|
client: Stomp.client(MQTT_SERVICE),
|
|
|
|
+ unreadNum: 0,
|
|
sendMessage: '',
|
|
sendMessage: '',
|
|
messageList: [], // 历史消息
|
|
messageList: [], // 历史消息
|
|
subList: [], // 订阅的消息实例
|
|
subList: [], // 订阅的消息实例
|
|
@@ -53,11 +59,14 @@ export default {
|
|
// };
|
|
// };
|
|
// client.connect(login, passcode, onconnect)
|
|
// client.connect(login, passcode, onconnect)
|
|
},
|
|
},
|
|
|
|
+ computed: {
|
|
|
|
+ ...mapGetters('layout', ['userInfo', 'projectId', 'projects'])
|
|
|
|
+ },
|
|
methods:{
|
|
methods:{
|
|
connect() {
|
|
connect() {
|
|
this.client = Stomp.client(MQTT_SERVICE)
|
|
this.client = Stomp.client(MQTT_SERVICE)
|
|
this.client.reconnect_delay = 5000
|
|
this.client.reconnect_delay = 5000
|
|
- var clientid = 'sagaMQ-zy'
|
|
|
|
|
|
+ var clientid = `sagaMQ-${this.userInfo.username}`
|
|
var headers = {
|
|
var headers = {
|
|
'login': MQTT_USERNAME,
|
|
'login': MQTT_USERNAME,
|
|
'passcode': MQTT_PASSWORD,
|
|
'passcode': MQTT_PASSWORD,
|
|
@@ -80,9 +89,13 @@ export default {
|
|
try {
|
|
try {
|
|
json = JSON.parse(message.body)
|
|
json = JSON.parse(message.body)
|
|
} catch (err) {
|
|
} 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) {
|
|
onFailed(frame) {
|
|
@@ -116,11 +129,33 @@ export default {
|
|
},
|
|
},
|
|
handleClickSendMessage() {
|
|
handleClickSendMessage() {
|
|
this.send('/topic/datacenter.broadcast',this.sendMessage)
|
|
this.send('/topic/datacenter.broadcast',this.sendMessage)
|
|
- },
|
|
|
|
-
|
|
|
|
|
|
+ },
|
|
|
|
+ handleClickRead() {
|
|
|
|
+ this.unreadNum = 0;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</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>
|