|
@@ -2,7 +2,7 @@
|
|
|
* @Author: zhangyu
|
|
|
* @Date: 2019-08-26 15:22:13
|
|
|
* @Info:
|
|
|
- * @LastEditTime: 2019-10-31 14:38:27
|
|
|
+ * @LastEditTime: 2019-11-13 15:46:29
|
|
|
-->
|
|
|
<template>
|
|
|
<div class="notification-box" v-clickOutside="handleClose" @click="handleClickRead">
|
|
@@ -12,7 +12,9 @@
|
|
|
<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>
|
|
|
+ <li class="noticeTab_item">消息通知
|
|
|
+ <!-- <span class="unread_num">1</span> -->
|
|
|
+ </li>
|
|
|
</ul>
|
|
|
<div class="noticeList_scroll">
|
|
|
<el-scrollbar style="height:100%;">
|
|
@@ -20,14 +22,16 @@
|
|
|
<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>
|
|
|
+ <i :class="iconClassMap[item.Type]?iconClassMap[item.Type]:'msg-icon el-icon-warning warning-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 class="noticeItem_time">
|
|
|
+ <span class="proname">{{item.Project[0].ProjLocalName || ''}}</span>
|
|
|
+ {{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>
|
|
@@ -66,8 +70,8 @@ import { MQTT_SERVICE, MQTT_USERNAME, MQTT_PASSWORD } from './mqSetting'
|
|
|
import { messgeCount, messgeQuery, messgeUpdateState } from '@/api/msgsever'
|
|
|
|
|
|
export default {
|
|
|
- components:{
|
|
|
-
|
|
|
+ components: {
|
|
|
+
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
@@ -88,10 +92,9 @@ export default {
|
|
|
"Warning": "msg-icon el-icon-warning warning-color",
|
|
|
"Info": "msg-icon el-icon-info info-color",
|
|
|
},
|
|
|
- showTools: false
|
|
|
}
|
|
|
},
|
|
|
- created () {
|
|
|
+ created() {
|
|
|
this.connect()
|
|
|
},
|
|
|
mounted() {
|
|
@@ -100,13 +103,21 @@ export default {
|
|
|
Bus.$on('messageListUpdate', message => {
|
|
|
this.getMessageList()
|
|
|
})
|
|
|
+ Bus.$on('getUnreadCountUpdate', message => {
|
|
|
+ this.getUnreadCount()
|
|
|
+ })
|
|
|
},
|
|
|
computed: {
|
|
|
...mapGetters('layout', ['userInfo', 'projectId', 'projects', 'userId'])
|
|
|
},
|
|
|
- methods:{
|
|
|
- getMessageList(){//获取消息列表(最新10条)
|
|
|
+ methods: {
|
|
|
+ getMessageList() {//获取消息列表(最新10条)
|
|
|
let params = {
|
|
|
+ Cascade: [
|
|
|
+ {
|
|
|
+ Name: "project"
|
|
|
+ }
|
|
|
+ ],
|
|
|
Filters: `UserId='${this.userId}'`,
|
|
|
Orders: "CreateTime desc, Id asc",
|
|
|
PageNumber: 1,
|
|
@@ -116,7 +127,7 @@ export default {
|
|
|
this.messageList = res.Content
|
|
|
})
|
|
|
},
|
|
|
- getUnreadCount(){//获取未读消息的数量
|
|
|
+ getUnreadCount() {//获取未读消息的数量
|
|
|
let params = {
|
|
|
Filters: `Read=false;UserId='${this.userId}'`
|
|
|
}
|
|
@@ -124,17 +135,17 @@ export default {
|
|
|
this.unreadNum = res.Count
|
|
|
})
|
|
|
},
|
|
|
- setAllRead(){//将当前角色消息全部置为已读
|
|
|
- if(this.userId){
|
|
|
- messgeUpdateState({Read:true,UserId:this.userId}, res => {this.unreadNum = 0})
|
|
|
+ setAllRead() {//将当前角色消息全部置为已读
|
|
|
+ if (this.userId) {
|
|
|
+ messgeUpdateState({ Read: true, UserId: this.userId }, res => { this.unreadNum = 0 })
|
|
|
}
|
|
|
},
|
|
|
- handleClose(e){//关闭消息列表
|
|
|
+ handleClose(e) {//关闭消息列表
|
|
|
this.noticeListShow = false
|
|
|
},
|
|
|
handleClickRead() {//点击消息铃铛
|
|
|
- this.noticeListShow?this.noticeListShow=false:this.noticeListShow=true
|
|
|
- if(this.noticeListShow){
|
|
|
+ this.noticeListShow ? this.noticeListShow = false : this.noticeListShow = true
|
|
|
+ if (this.noticeListShow) {
|
|
|
this.setAllRead()//将当前角色消息全部置为已读
|
|
|
}
|
|
|
},
|
|
@@ -174,7 +185,7 @@ export default {
|
|
|
},
|
|
|
//断开连接
|
|
|
disconnect() {
|
|
|
- this.client.disconnect(function() {
|
|
|
+ this.client.disconnect(function () {
|
|
|
console.log("连接已断开!");
|
|
|
})
|
|
|
},
|
|
@@ -182,7 +193,7 @@ export default {
|
|
|
send(destination, message, headers = {}) {
|
|
|
this.client.send(destination, headers, JSON.stringify(message))
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
handleClickConnectMQ() {//连接MQ
|
|
|
this.connect()
|
|
|
},
|
|
@@ -193,218 +204,225 @@ export default {
|
|
|
this.unsubscribe()
|
|
|
},
|
|
|
handleClickSendMessage() {//发送消息
|
|
|
- this.send('/topic/datacenter.broadcast',this.sendMessage)
|
|
|
+ this.send('/topic/datacenter.broadcast', this.sendMessage)
|
|
|
},
|
|
|
- allDetails(){
|
|
|
- console.log(493498384938)
|
|
|
+ allDetails() {
|
|
|
this.noticeListShow = false;
|
|
|
- this.$router.push({path:"/message/allDetails"});
|
|
|
+ this.$router.push({ path: "/allDetails" });
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .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;
|
|
|
+.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;
|
|
|
- width: 272px;
|
|
|
- height: 362px;
|
|
|
- box-shadow: 0 1px 6px 0 #ccc;
|
|
|
- color: #333;
|
|
|
- background: #fff;
|
|
|
- overflow: visible!important;
|
|
|
+ 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);
|
|
|
+ }
|
|
|
}
|
|
|
- .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;
|
|
|
+ .active {
|
|
|
+ box-shadow: 0 -2px 0 0 #5182e4 inset;
|
|
|
}
|
|
|
- .noticeTab {
|
|
|
- padding: 8px 16px 0;
|
|
|
- z-index: 10;
|
|
|
- height: 32px;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
- box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset;
|
|
|
- .noticeTab_item {
|
|
|
+ .noticeItem_box {
|
|
|
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;
|
|
|
+ .noticeItem_text {
|
|
|
+ color: rgba(10, 18, 32, 0.87);
|
|
|
+ font-weight: 700;
|
|
|
+ padding-left: 18px;
|
|
|
+ text-indent: -6px;
|
|
|
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;
|
|
|
- }
|
|
|
+ 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;
|
|
|
}
|
|
|
- .noticeItem_time {
|
|
|
- font-size: 12px;
|
|
|
- height: 19px;
|
|
|
- line-height: 19px;
|
|
|
- color: rgba(10, 18, 32, 0.46);
|
|
|
- margin-top: 4px;
|
|
|
- padding-left: 18px;
|
|
|
+ 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;
|
|
|
+ .proname{
|
|
|
+ float: left;
|
|
|
+ display: block;
|
|
|
+ width: 80px;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .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;
|
|
|
- }
|
|
|
+ .noticeList_item:hover {
|
|
|
+ background-color: #f5f7f7;
|
|
|
}
|
|
|
- .el-icon-message-solid{
|
|
|
- font-size: 22px;
|
|
|
+ .noticeList_item:after {
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ height: 0;
|
|
|
+ clear: both;
|
|
|
+ visibility: hidden;
|
|
|
}
|
|
|
- /deep/ .el-badge__content{
|
|
|
- height: 16px;
|
|
|
- line-height: 16px;
|
|
|
- border: 1px solid transparent;
|
|
|
+ .noticeList_item:before {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ height: 1px;
|
|
|
+ padding: 0 16px;
|
|
|
+ background-color: #ebebeb;
|
|
|
+ content: "";
|
|
|
+ background-clip: content-box;
|
|
|
}
|
|
|
}
|
|
|
- .notification-box:hover{
|
|
|
- color: #d3d8e2;
|
|
|
- background-color: #3f4f62;
|
|
|
- }
|
|
|
- .success-color{
|
|
|
- color: #67C23A;
|
|
|
- }
|
|
|
- .error-color{
|
|
|
- color: #F56C6C;
|
|
|
+ .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;
|
|
|
+ }
|
|
|
}
|
|
|
- .warning-color{
|
|
|
- color: #E6A23C;
|
|
|
+ .el-icon-message-solid {
|
|
|
+ font-size: 22px;
|
|
|
}
|
|
|
- .info-color{
|
|
|
- color: #909399;
|
|
|
+ /deep/ .el-badge__content {
|
|
|
+ height: 16px;
|
|
|
+ line-height: 16px;
|
|
|
+ border: 1px solid transparent;
|
|
|
}
|
|
|
+}
|
|
|
+.notification-box:hover {
|
|
|
+ color: #d3d8e2;
|
|
|
+ background-color: #3f4f62;
|
|
|
+}
|
|
|
+.success-color {
|
|
|
+ color: #67c23a;
|
|
|
+}
|
|
|
+.error-color {
|
|
|
+ color: #f56c6c;
|
|
|
+}
|
|
|
+.warning-color {
|
|
|
+ color: #e6a23c;
|
|
|
+}
|
|
|
+.info-color {
|
|
|
+ color: #909399;
|
|
|
+}
|
|
|
</style>
|