|
@@ -2,13 +2,44 @@
|
|
|
* @Author: zhangyu
|
|
|
* @Date: 2019-08-26 15:22:13
|
|
|
* @Info:
|
|
|
- * @LastEditTime: 2019-09-26 20:16:41
|
|
|
+ * @LastEditTime: 2019-10-31 14:38:27
|
|
|
-->
|
|
|
<template>
|
|
|
- <div class="notification-box" @click="handleClickRead">
|
|
|
+ <div class="notification-box" v-clickOutside="handleClose" @click="handleClickRead">
|
|
|
<el-badge :value="unreadNum" :hidden="!unreadNum" :max="99">
|
|
|
<i class="el-icon-message-solid"></i>
|
|
|
</el-badge>
|
|
|
+ <transition name="el-fade-in-linear">
|
|
|
+ <div v-show="noticeListShow" @click.stop="" class="noticeBox">
|
|
|
+ <ul class="noticeTab">
|
|
|
+ <li class="noticeTab_item">消息通知<!-- <span class="unread_num">1</span> --></li>
|
|
|
+ </ul>
|
|
|
+ <div class="noticeList_scroll">
|
|
|
+ <el-scrollbar style="height:100%;">
|
|
|
+ <ul class="noticeList">
|
|
|
+ <li class="noticeList_item" v-for="item in messageList" :key="item.Id" :title="item.Content.Message?item.Content.Message:''">
|
|
|
+ <div class="noticeItem_box">
|
|
|
+ <div class="noticeItem_text">
|
|
|
+ <i :class="iconClassMap[item.Type]?iconClassMap[item.Type]:'msg-icon el-icon-info info-color'"></i>
|
|
|
+ <p><span>{{`【${moduleMap[item.Module]?moduleMap[item.Module]:item.Module}】 `}}</span>{{item.Title?item.Title:""}}</p>
|
|
|
+ </div>
|
|
|
+ <div class="noticeItem_time">{{item.CreateTime}}
|
|
|
+ <el-link v-for="(btn, index) in item.Content.ButtonList?item.Content.ButtonList:[]" style="float:right;font-size:12px;margin-left:5px;" type="primary"
|
|
|
+ :key="index"
|
|
|
+ :href="`/image-service/common/file_get?systemId=revit&key=${btn.Url}`"
|
|
|
+ :download="btn.FileName?btn.FileName:''">{{btn.Name?btn.Name:""}}</el-link>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ <div class="notice_operate">
|
|
|
+ <!-- <div class="readAll">全部标为已读</div> -->
|
|
|
+ <div class="seeAll">查看全部<i class="iconfont icon-right"></i></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </transition>
|
|
|
<!-- <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>
|
|
@@ -30,39 +61,79 @@
|
|
|
import { mapGetters } from 'vuex'
|
|
|
import Stomp from 'stompjs'
|
|
|
import Msmq from './msmq'
|
|
|
+import Bus from '@/utils/bus.js'
|
|
|
import { MQTT_SERVICE, MQTT_USERNAME, MQTT_PASSWORD } from './mqSetting'
|
|
|
+import { messgeCount, messgeQuery, messgeUpdateState } from '@/api/msgsever'
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
client: Stomp.client(MQTT_SERVICE),
|
|
|
unreadNum: 0,
|
|
|
+ noticeListShow: false,//是否显示消息列表
|
|
|
sendMessage: '',
|
|
|
messageList: [], // 历史消息
|
|
|
subList: [], // 订阅的消息实例
|
|
|
- topics: ["/topic/model.manage"] // 订阅的消息名称
|
|
|
+ topics: ["/topic/message.manage"], // 订阅的消息名称
|
|
|
+ messageList: [],
|
|
|
+ moduleMap: {//消息模块映射
|
|
|
+ "Model": "模型文件管理"
|
|
|
+ },
|
|
|
+ iconClassMap: { //消息类型图标映射
|
|
|
+ "Success": "msg-icon el-icon-success success-color",
|
|
|
+ "Error": "msg-icon el-icon-error error-color",
|
|
|
+ "Warning": "msg-icon el-icon-warning warning-color",
|
|
|
+ "Info": "msg-icon el-icon-info info-color",
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
created () {
|
|
|
this.connect()
|
|
|
- // let url = "ws://192.168.20.225:61614/stomp";
|
|
|
- // let login = "admin";
|
|
|
- // let passcode = "admin";
|
|
|
- // let destination = "/topic/datacenter.broadcast";
|
|
|
- // let client = Stomp.client(url)
|
|
|
- // console.log('钩子:',client)
|
|
|
- // var onconnect = function(frame) {
|
|
|
- // client.subscribe(destination, function(message) {
|
|
|
- // console.log(message.body);
|
|
|
- // alert(message.body);
|
|
|
- // });
|
|
|
- // };
|
|
|
- // client.connect(login, passcode, onconnect)
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getUnreadCount()
|
|
|
+ this.getMessageList()//获取消息列表
|
|
|
+ Bus.$on('messageListUpdate', message => {
|
|
|
+ this.getMessageList()
|
|
|
+ })
|
|
|
},
|
|
|
computed: {
|
|
|
- ...mapGetters('layout', ['userInfo', 'projectId', 'projects'])
|
|
|
+ ...mapGetters('layout', ['userInfo', 'projectId', 'projects', 'userId'])
|
|
|
},
|
|
|
methods:{
|
|
|
+ getMessageList(){//获取消息列表(最新10条)
|
|
|
+ let params = {
|
|
|
+ Filters: `UserId='${this.userId}'`,
|
|
|
+ Orders: "CreateTime desc, Id asc",
|
|
|
+ PageNumber: 1,
|
|
|
+ PageSize: 10
|
|
|
+ }
|
|
|
+ messgeQuery(params, res => {
|
|
|
+ this.messageList = res.Content
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getUnreadCount(){//获取未读消息的数量
|
|
|
+ let params = {
|
|
|
+ Filters: `Read=false;UserId='${this.userId}'`
|
|
|
+ }
|
|
|
+ messgeCount(params, res => {
|
|
|
+ this.unreadNum = res.Count
|
|
|
+ })
|
|
|
+ },
|
|
|
+ setAllRead(){//将当前角色消息全部置为已读
|
|
|
+ if(this.userId){
|
|
|
+ messgeUpdateState({Read:true,UserId:this.userId}, res => {this.unreadNum = 0})
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleClose(e){//关闭消息列表
|
|
|
+ this.noticeListShow = false
|
|
|
+ },
|
|
|
+ handleClickRead() {//点击消息铃铛
|
|
|
+ this.noticeListShow?this.noticeListShow=false:this.noticeListShow=true
|
|
|
+ if(this.noticeListShow){
|
|
|
+ this.setAllRead()//将当前角色消息全部置为已读
|
|
|
+ }
|
|
|
+ },
|
|
|
connect() {
|
|
|
this.client = Stomp.client(MQTT_SERVICE)
|
|
|
this.client.reconnect_delay = 5000
|
|
@@ -85,7 +156,7 @@ export default {
|
|
|
},
|
|
|
//接收到消息的回调
|
|
|
onmessage(message) {
|
|
|
- this.unreadNum = Msmq.handleMsg(message, this.projects, this.unreadNum);
|
|
|
+ this.unreadNum = Msmq.handleMsg(message, this.projects, this.userId, this.unreadNum);
|
|
|
},
|
|
|
// 接收消息失败回调
|
|
|
onFailed(frame) {
|
|
@@ -108,20 +179,17 @@ export default {
|
|
|
this.client.send(destination, headers, JSON.stringify(message))
|
|
|
},
|
|
|
|
|
|
- handleClickConnectMQ() {
|
|
|
+ handleClickConnectMQ() {//连接MQ
|
|
|
this.connect()
|
|
|
},
|
|
|
- handleClickDisconnectMQ() {
|
|
|
+ handleClickDisconnectMQ() {//断开MQ
|
|
|
this.disconnect()
|
|
|
},
|
|
|
- handleClickUnsubscribe() {
|
|
|
+ handleClickUnsubscribe() {//停止接收消息
|
|
|
this.unsubscribe()
|
|
|
},
|
|
|
- handleClickSendMessage() {
|
|
|
+ handleClickSendMessage() {//发送消息
|
|
|
this.send('/topic/datacenter.broadcast',this.sendMessage)
|
|
|
- },
|
|
|
- handleClickRead() {
|
|
|
- this.unreadNum = 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -131,10 +199,180 @@ export default {
|
|
|
.notification-box{
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
+ position: relative;
|
|
|
padding: 16px 10px 10px;
|
|
|
box-sizing: border-box;
|
|
|
color: #79869a;
|
|
|
cursor: pointer;
|
|
|
+ .noticeBox{
|
|
|
+ position: absolute;
|
|
|
+ top: 50px;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -220px;
|
|
|
+ cursor: auto;
|
|
|
+ z-index: 1000;
|
|
|
+ text-align: left;
|
|
|
+ width: 272px;
|
|
|
+ height: 362px;
|
|
|
+ box-shadow: 0 1px 6px 0 #ccc;
|
|
|
+ color: #333;
|
|
|
+ background: #fff;
|
|
|
+ overflow: visible!important;
|
|
|
+ }
|
|
|
+ .noticeBox::before {
|
|
|
+ content: '';
|
|
|
+ border: solid 7px transparent;
|
|
|
+ border-bottom-color: #fff;
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ width: 2px;
|
|
|
+ top: -14px;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: 77px;
|
|
|
+ z-index: 0;
|
|
|
+ }
|
|
|
+ .noticeTab {
|
|
|
+ padding: 8px 16px 0;
|
|
|
+ z-index: 10;
|
|
|
+ height: 32px;
|
|
|
+ zoom: 1;
|
|
|
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset;
|
|
|
+ .noticeTab_item {
|
|
|
+ float: left;
|
|
|
+ position: relative;
|
|
|
+ width: 240px;
|
|
|
+ height: 32px;
|
|
|
+ line-height: 32px;
|
|
|
+ padding: 0;
|
|
|
+ margin-right: 0;
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: left;
|
|
|
+ cursor: pointer;
|
|
|
+ -webkit-transition: all 0.2s ease-in-out;
|
|
|
+ -o-transition: all 0.2s ease-in-out;
|
|
|
+ transition: all 0.2s ease-in-out;
|
|
|
+ .unread_num {
|
|
|
+ display: inline-block;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #5182E4;
|
|
|
+ height: 14px;
|
|
|
+ padding: 0 2px;
|
|
|
+ line-height: 14px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 2px;
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 0 3px;
|
|
|
+ font-family: Arial;
|
|
|
+ -webkit-transform: scale(0.85);
|
|
|
+ -ms-transform: scale(0.85);
|
|
|
+ -o-transform: scale(0.85);
|
|
|
+ transform: scale(0.85);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ box-shadow: 0 -2px 0 0 #5182E4 inset;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .noticeList_scroll {
|
|
|
+ height: 282px;
|
|
|
+ /deep/ .el-scrollbar__wrap {
|
|
|
+ overflow-x: hidden;
|
|
|
+ }
|
|
|
+ .noticeList_item {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 12px 16px;
|
|
|
+ -webkit-transition: all 0.2s ease-in-out;
|
|
|
+ -o-transition: all 0.2s ease-in-out;
|
|
|
+ transition: all 0.2s ease-in-out;
|
|
|
+ zoom: 1;
|
|
|
+ .noticeItem_box {
|
|
|
+ float: left;
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ .noticeItem_text {
|
|
|
+ color: rgba(10, 18, 32, 0.87);
|
|
|
+ font-weight: 700;
|
|
|
+ padding-left: 18px;
|
|
|
+ text-indent: -6px;
|
|
|
+ position: relative;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 17px;
|
|
|
+ -webkit-transition: all 0.2s ease-in-out;
|
|
|
+ -o-transition: all 0.2s ease-in-out;
|
|
|
+ transition: all 0.2s ease-in-out;
|
|
|
+ .msg-icon{
|
|
|
+ position: absolute;
|
|
|
+ top: 2.5px;
|
|
|
+ left: 6px;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .noticeItem_time {
|
|
|
+ font-size: 12px;
|
|
|
+ height: 19px;
|
|
|
+ line-height: 19px;
|
|
|
+ color: rgba(10, 18, 32, 0.46);
|
|
|
+ margin-top: 4px;
|
|
|
+ padding-left: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .noticeList_item:hover {
|
|
|
+ background-color: #F5F7F7;
|
|
|
+ }
|
|
|
+ .noticeList_item:after {
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ height: 0;
|
|
|
+ clear:both;
|
|
|
+ visibility: hidden;
|
|
|
+ }
|
|
|
+ .noticeList_item:before {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ height: 1px;
|
|
|
+ padding: 0 16px;
|
|
|
+ background-color: #ebebeb;
|
|
|
+ content: "";
|
|
|
+ background-clip: content-box;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .notice_operate {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 20px;
|
|
|
+ padding: 10px 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: rgba(242, 243, 245, 0.48);
|
|
|
+ box-shadow: inset 0 1px 0 0 rgba(10, 18, 32, 0.06);
|
|
|
+ zoom: 1;
|
|
|
+ .readAll {
|
|
|
+ float: left;
|
|
|
+ cursor: pointer;
|
|
|
+ -webkit-transition: all 0.2s ease-in-out;
|
|
|
+ -o-transition: all 0.2s ease-in-out;
|
|
|
+ transition: all 0.2s ease-in-out;
|
|
|
+ }
|
|
|
+ .readAll:hover {
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+ .seeAll {
|
|
|
+ float: right;
|
|
|
+ color: #5182e4;
|
|
|
+ cursor: pointer;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ .seeAll:hover {
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+ }
|
|
|
.el-icon-message-solid{
|
|
|
font-size: 22px;
|
|
|
}
|
|
@@ -148,4 +386,16 @@ export default {
|
|
|
color: #d3d8e2;
|
|
|
background-color: #3f4f62;
|
|
|
}
|
|
|
+ .success-color{
|
|
|
+ color: #67C23A;
|
|
|
+ }
|
|
|
+ .error-color{
|
|
|
+ color: #F56C6C;
|
|
|
+ }
|
|
|
+ .warning-color{
|
|
|
+ color: #E6A23C;
|
|
|
+ }
|
|
|
+ .info-color{
|
|
|
+ color: #909399;
|
|
|
+ }
|
|
|
</style>
|