256 lines
7.9 KiB
Java
256 lines
7.9 KiB
Java
<template>
|
|
<a-popover
|
|
trigger="click"
|
|
placement="bottomRight"
|
|
:autoAdjustOverflow="true"
|
|
:arrowPointAtCenter="true"
|
|
overlayClassName="header-notice-wrapper"
|
|
@visibleChange="handleHoverChange"
|
|
:overlayStyle="{ width: '300px', top: '50px' }">
|
|
<template slot="content">
|
|
<a-spin :spinning="loadding">
|
|
<a-tabs class="tabs">
|
|
<a-tab-pane :tab="msg1Title" key="1">
|
|
<a-list>
|
|
<a-list-item :key="index" v-for="(record, index) in announcement1" v-if="index <= 4">
|
|
<div style="margin-left: 5%;width: 80%;">
|
|
<p style="overflow: hidden; text-overflow: ellipsis;white-space: nowrap;color:#00B3BE">
|
|
<a :title="record.titile" @click="showAnnouncement(record)">{{ record.titile }}</a>
|
|
</p>
|
|
</div>
|
|
</a-list-item>
|
|
<div style="margin-top: 5px;text-align: center">
|
|
<a-button @click="toMyAnnouncement()" type="dashed" block>{{this.$t('SeeMore')}}</a-button>
|
|
</div>
|
|
</a-list>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</a-spin>
|
|
</template>
|
|
<span @click="fetchNotice" class="header-notice">
|
|
<a-badge :count="msgTotal">
|
|
<a-icon style="font-size: 16px; padding: 4px" type="bell"/>
|
|
</a-badge>
|
|
</span>
|
|
<dynamic-notice ref="showDynamNotice" :path="openPath" :formData="formData"/>
|
|
</a-popover>
|
|
</template>
|
|
|
|
<script>
|
|
import { getAction, putAction } from '@/api/manage'
|
|
import store from '@/store/'
|
|
import DynamicNotice from './DynamicNotice'
|
|
|
|
|
|
export default {
|
|
name: 'HeaderNotice',
|
|
components: {
|
|
DynamicNotice
|
|
},
|
|
data() {
|
|
return {
|
|
loadding: false,
|
|
url: {
|
|
listCementByUser: '/sys/sysAnnouncementSend/getMessageUnreadList',
|
|
editCementSend: '/sys/sysAnnouncementSend/editByAnntIdAndUserId',
|
|
queryById: '/sys/annountCement/queryById',
|
|
readAllMsg: 'sys/sysAnnouncementSend/read'
|
|
},
|
|
hovered: false,
|
|
announcement1: [],
|
|
announcement2: [],
|
|
msg1Count: '0',
|
|
msg2Count: '0',
|
|
msg1Title: this.$t('MessageNotification') + '(0)',
|
|
msg2Title: '',
|
|
stopTimer: false,
|
|
websock: null,
|
|
lockReconnect: false,
|
|
heartCheck: null,
|
|
formData: {},
|
|
openPath: '',
|
|
timer: ''
|
|
}
|
|
},
|
|
computed: {
|
|
msgTotal() {
|
|
return parseInt(this.msg1Count)
|
|
}
|
|
},
|
|
watch: {
|
|
'$socketPublic.state.msg': {
|
|
//处理接收到的消息
|
|
handler: function(res) {
|
|
let that = this
|
|
let data = JSON.parse(res.data)
|
|
if (data.msgId) {
|
|
this.loadData()
|
|
}
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.loadData()
|
|
// this.initWebSocket()
|
|
if (store.getters.userInfo) {
|
|
this.$socketPublic.dispatch('webSocketInit')//初始化ws
|
|
}
|
|
},
|
|
mounted() {
|
|
// this.loadData()
|
|
// this.timerFun();
|
|
// this.initWebSocket()
|
|
// this.heartCheckFun()
|
|
},
|
|
beforeDestroy() {
|
|
|
|
},
|
|
// destroyed: function() { // 离开页面生命周期函数
|
|
// this.websocketOnclose()
|
|
// clearInterval(this.timer)
|
|
// },
|
|
methods: {
|
|
loadData() {
|
|
getAction(this.url.listCementByUser).then((res) => {
|
|
if (res.success) {
|
|
this.announcement1 = res.result
|
|
this.msg1Count = res.result.length
|
|
this.msg1Title = this.$t('MessageNotification') + '(' + res.result.length + ')'
|
|
}
|
|
}).catch(error => {
|
|
this.stopTimer = true
|
|
})
|
|
},
|
|
fetchNotice() {
|
|
if (this.loadding) {
|
|
this.loadding = false
|
|
return
|
|
}
|
|
this.loadding = true
|
|
setTimeout(() => {
|
|
this.loadding = false
|
|
}, 200)
|
|
},
|
|
showAnnouncement(record) {
|
|
getAction(this.url.readAllMsg, { ids: record.id }).then((res) => {
|
|
})
|
|
this.$router.push({
|
|
path: '/system/MessageDetails',
|
|
query: record
|
|
})
|
|
},
|
|
toMyAnnouncement() {
|
|
this.$router.push({
|
|
path: '/isps/userAnnouncement'
|
|
})
|
|
},
|
|
handleHoverChange(visible) {
|
|
this.hovered = visible
|
|
}
|
|
|
|
// initWebSocket: function() {
|
|
// // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
|
|
// var userId = store.getters.userInfo.id
|
|
// var url = window._CONFIG['domianWebSocketURL'].replace('https://', 'wss://').replace('http://', 'ws://') + '/websocket/' + userId
|
|
// this.websock = new WebSocket(url)
|
|
// this.websock.onopen = this.websocketOnopen
|
|
// this.websock.onerror = this.websocketOnerror
|
|
// this.websock.onmessage = this.websocketOnmessage
|
|
// this.websock.onclose = this.websocketOnclose
|
|
// },
|
|
// websocketOnopen: function() {
|
|
// // 添加心跳检测，每10秒发一次数据，防止连接断开（这跟服务器的设置有关，如果服务器没有设置每隔多长时间不发消息断开，可以不进行心跳设置）
|
|
// let self = this
|
|
// this.timer = setInterval(() => {
|
|
// try {
|
|
// self.websock.send('test')
|
|
// console.log('发送消息')
|
|
// } catch (err) {
|
|
// console.log('断开了：' + err)
|
|
// self.connection()
|
|
// }
|
|
// }, 5000)
|
|
// },
|
|
// websocketOnerror: function(e) {
|
|
// console.log('WebSocket连接发生错误')
|
|
// this.reconnect()
|
|
// },
|
|
// websocketOnmessage: function(e) {
|
|
// if (e.data != 'test') {
|
|
// this.loadData()
|
|
// }
|
|
// //系统通知
|
|
// },
|
|
// websocketOnclose: function(e) {
|
|
// console.log(e)
|
|
// this.websock.close()
|
|
// },
|
|
// websocketSend(text) { // 数据发送
|
|
// console.log(text)
|
|
// try {
|
|
// this.websock.send(text)
|
|
// } catch (err) {
|
|
// console.log('send failed (' + err.code + ')')
|
|
// }
|
|
// },
|
|
//
|
|
// reconnect() {
|
|
// var that = this
|
|
// if (that.lockReconnect) return
|
|
// that.lockReconnect = true
|
|
// //没连接上会一直重连，设置延迟避免请求过多
|
|
// setTimeout(function() {
|
|
// that.initWebSocket()
|
|
// that.lockReconnect = false
|
|
// }, 5000)
|
|
// },
|
|
// heartCheckFun() {
|
|
// var that = this
|
|
// //心跳检测,每20s心跳一次
|
|
// console.log(123)
|
|
// that.heartCheck = {
|
|
// timeout: 20000,
|
|
// timeoutObj: null,
|
|
// serverTimeoutObj: null,
|
|
// reset: function() {
|
|
// clearTimeout(this.timeoutObj)
|
|
// //clearTimeout(this.serverTimeoutObj);
|
|
// return this
|
|
// },
|
|
// start: function() {
|
|
// var self = this
|
|
// this.timeoutObj = setTimeout(function() {
|
|
// //这里发送一个心跳，后端收到后，返回一个心跳消息，
|
|
// //onmessage拿到返回的心跳就说明连接正常
|
|
// that.websocketSend('HeartBeat')
|
|
// console.info('客户端发送心跳')
|
|
// //self.serverTimeoutObj = setTimeout(function(){//如果超过一定时间还没重置，说明后端主动断开了
|
|
// // that.websock.close();//如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
|
|
// //}, self.timeout)
|
|
// }, this.timeout)
|
|
// }
|
|
// }
|
|
// }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="css">
|
|
.header-notice-wrapper {
|
|
top: 50px !important;
|
|
}
|
|
|
|
.tabs .ant-tabs-nav .ant-tabs-tab-active {
|
|
color: #000F16 !important;
|
|
}
|
|
</style>
|
|
<style lang="less" scoped>
|
|
.header-notice {
|
|
display: inline-block;
|
|
transition: all 0.3s;
|
|
|
|
span {
|
|
vertical-align: initial;
|
|
}
|
|
}
|
|
</style> |