HeaderNotice.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356
  1. <template>
  2. <a-popover
  3. trigger="click"
  4. placement="bottomRight"
  5. :autoAdjustOverflow="true"
  6. :arrowPointAtCenter="true"
  7. overlayClassName="header-notice-wrapper"
  8. @visibleChange="handleHoverChange"
  9. :overlayStyle="{ width: '300px', top: '50px' }"
  10. >
  11. <template slot="content">
  12. <a-spin :spinning="loadding">
  13. <a-tabs>
  14. <a-tab-pane :tab="msg1Title" key="1">
  15. <!--<a-list>
  16. <a-list-item>
  17. <a-list-item-meta title="你收到了 14 份新周报" description="一年前">
  18. <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>
  19. </a-list-item-meta>
  20. </a-list-item>
  21. <a-list-item>
  22. <a-list-item-meta title="你推荐的 IT大牛 已通过第三轮面试" description="一年前">
  23. <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png"/>
  24. </a-list-item-meta>
  25. </a-list-item>
  26. <a-list-item>
  27. <a-list-item-meta title="这种模板可以区分多种通知类型" description="一年前">
  28. <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png"/>
  29. </a-list-item-meta>
  30. </a-list-item>
  31. </a-list>-->
  32. <a-list>
  33. <a-list-item :key="index" v-for="(record, index) in announcement1">
  34. <div style="margin-left: 5%;width: 80%">
  35. <p>
  36. <a @click="showAnnouncement(record)">{{ record.titile }}</a>
  37. </p>
  38. <p style="color: rgba(0,0,0,.45);margin-bottom: 0px">{{ record.createTime }} 发布</p>
  39. </div>
  40. <div style="text-align: right">
  41. <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'L'" color="blue">一般消息</a-tag>
  42. <a-tag
  43. @click="showAnnouncement(record)"
  44. v-if="record.priority === 'M'"
  45. color="orange"
  46. >重要消息</a-tag
  47. >
  48. <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'H'" color="red">紧急消息</a-tag>
  49. </div>
  50. </a-list-item>
  51. <div style="margin-top: 5px;text-align: center">
  52. <a-button @click="toMyAnnouncement()" type="dashed" block>查看更多</a-button>
  53. </div>
  54. </a-list>
  55. </a-tab-pane>
  56. <a-tab-pane :tab="msg2Title" key="2">
  57. <a-list>
  58. <a-list-item :key="index" v-for="(record, index) in announcement2">
  59. <div style="margin-left: 5%;width: 80%">
  60. <p>
  61. <a @click="showAnnouncement(record)">{{ record.titile }}</a>
  62. </p>
  63. <p style="color: rgba(0,0,0,.45);margin-bottom: 0px">{{ record.createTime }} 发布</p>
  64. </div>
  65. <div style="text-align: right">
  66. <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'L'" color="blue">一般消息</a-tag>
  67. <a-tag
  68. @click="showAnnouncement(record)"
  69. v-if="record.priority === 'M'"
  70. color="orange"
  71. >重要消息</a-tag
  72. >
  73. <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'H'" color="red">紧急消息</a-tag>
  74. </div>
  75. </a-list-item>
  76. <div style="margin-top: 5px;text-align: center">
  77. <a-button @click="toMyAnnouncement()" type="dashed" block>查看更多</a-button>
  78. </div>
  79. </a-list>
  80. </a-tab-pane>
  81. </a-tabs>
  82. </a-spin>
  83. </template>
  84. <span @click="fetchNotice" class="header-notice">
  85. <a-badge :count="msgTotal">
  86. <a-icon style="font-size: 16px; padding: 4px" type="bell" />
  87. </a-badge>
  88. </span>
  89. <show-announcement ref="ShowAnnouncement" @ok="modalFormOk"></show-announcement>
  90. <dynamic-notice ref="showDynamNotice" :path="openPath" :formData="formData" />
  91. </a-popover>
  92. </template>
  93. <script>
  94. import { getAction, putAction } from '@/api/manage'
  95. import ShowAnnouncement from './ShowAnnouncement'
  96. import store from '@/store/'
  97. import DynamicNotice from './DynamicNotice'
  98. export default {
  99. name: 'HeaderNotice',
  100. components: {
  101. DynamicNotice,
  102. ShowAnnouncement
  103. },
  104. data () {
  105. return {
  106. loadding: false,
  107. url: {
  108. listCementByUser: '/sys/annountCement/listByUser',
  109. editCementSend: '/sys/sysAnnouncementSend/editByAnntIdAndUserId',
  110. queryById: '/sys/annountCement/queryById'
  111. },
  112. hovered: false,
  113. announcement1: [],
  114. announcement2: [],
  115. msg1Count: '0',
  116. msg2Count: '0',
  117. msg1Title: '通知(0)',
  118. msg2Title: '',
  119. stopTimer: false,
  120. websock: null,
  121. lockReconnect: false,
  122. heartCheck: null,
  123. formData: {},
  124. openPath: ''
  125. }
  126. },
  127. computed: {
  128. msgTotal () {
  129. return parseInt(this.msg1Count) + parseInt(this.msg2Count)
  130. }
  131. },
  132. mounted () {
  133. this.loadData()
  134. // this.timerFun();
  135. this.initWebSocket()
  136. this.heartCheckFun()
  137. },
  138. destroyed: function () {
  139. // 离开页面生命周期函数
  140. this.websocketclose()
  141. },
  142. methods: {
  143. timerFun () {
  144. this.stopTimer = false
  145. let myTimer = setInterval(() => {
  146. // 停止定时器
  147. if (this.stopTimer == true) {
  148. clearInterval(myTimer)
  149. return
  150. }
  151. this.loadData()
  152. }, 6000)
  153. },
  154. loadData () {
  155. try {
  156. // 获取系统消息
  157. getAction(this.url.listCementByUser)
  158. .then(res => {
  159. if (res.success) {
  160. this.announcement1 = res.result.anntMsgList
  161. this.msg1Count = res.result.anntMsgTotal
  162. this.msg1Title = '通知(' + res.result.anntMsgTotal + ')'
  163. this.announcement2 = res.result.sysMsgList
  164. this.msg2Count = res.result.sysMsgTotal
  165. this.msg2Title = '系统消息(' + res.result.sysMsgTotal + ')'
  166. }
  167. })
  168. .catch(error => {
  169. console.log('系统消息通知异常', error) // 这行打印permissionName is undefined
  170. this.stopTimer = true
  171. console.log('清理timer')
  172. })
  173. } catch (err) {
  174. this.stopTimer = true
  175. console.log('通知异常', err)
  176. }
  177. },
  178. fetchNotice () {
  179. if (this.loadding) {
  180. this.loadding = false
  181. return
  182. }
  183. this.loadding = true
  184. setTimeout(() => {
  185. this.loadding = false
  186. }, 200)
  187. },
  188. showAnnouncement (record) {
  189. putAction(this.url.editCementSend, { anntId: record.id }).then(res => {
  190. if (res.success) {
  191. this.loadData()
  192. }
  193. })
  194. this.hovered = false
  195. if (record.openType === 'component') {
  196. this.openPath = record.openPage
  197. this.formData = { id: record.busId }
  198. this.$refs.showDynamNotice.detail(record.openPage)
  199. } else {
  200. record.readFlag = '0' // 未阅读(用于以未阅读状态跳转到我的消息弹框)
  201. this.$refs.ShowAnnouncement.detail(record)
  202. }
  203. },
  204. toMyAnnouncement () {
  205. this.$router.push({
  206. path: '/isps/userAnnouncement',
  207. name: 'isps-userAnnouncement'
  208. })
  209. },
  210. modalFormOk () {},
  211. handleHoverChange (visible) {
  212. this.hovered = visible
  213. },
  214. initWebSocket: function () {
  215. // WebSocket与普通的请求所用协议有所不同,ws等同于http,wss等同于https
  216. var userId = store.getters.userInfo.id
  217. var url =
  218. window._CONFIG['domianURL'].replace('https://', 'wss://').replace('http://', 'ws://') + '/websocket/' + userId
  219. console.log(url)
  220. // this.websock = new WebSocket(url);
  221. // this.websock.onopen = this.websocketOnopen;
  222. // this.websock.onerror = this.websocketOnerror;
  223. // this.websock.onmessage = this.websocketOnmessage;
  224. // this.websock.onclose = this.websocketOnclose;
  225. },
  226. websocketOnopen: function () {
  227. console.log('WebSocket连接成功')
  228. // 心跳检测重置
  229. this.heartCheck.reset().start()
  230. },
  231. websocketOnerror: function (e) {
  232. console.log('WebSocket连接发生错误')
  233. this.reconnect()
  234. },
  235. websocketOnmessage: function (e) {
  236. console.log('-----接收消息-------', e.data)
  237. var data = eval('(' + e.data + ')') // 解析对象
  238. if (data.cmd == 'topic') {
  239. // 系统通知
  240. this.loadData()
  241. } else if (data.cmd == 'user') {
  242. // 用户消息
  243. this.loadData()
  244. }
  245. // 心跳检测重置
  246. this.heartCheck.reset().start()
  247. },
  248. websocketOnclose: function (e) {
  249. console.log('connection closed (' + e.code + ')')
  250. this.reconnect()
  251. },
  252. websocketSend (text) {
  253. // 数据发送
  254. try {
  255. this.websock.send(text)
  256. } catch (err) {
  257. console.log('send failed (' + err.code + ')')
  258. }
  259. },
  260. openNotification (data) {
  261. var text = data.msgTxt
  262. const key = `open${Date.now()}`
  263. this.$notification.open({
  264. message: '消息提醒',
  265. placement: 'bottomRight',
  266. description: text,
  267. key,
  268. btn: h => {
  269. return h(
  270. 'a-button',
  271. {
  272. props: {
  273. type: 'primary',
  274. size: 'small'
  275. },
  276. on: {
  277. click: () => this.showDetail(key, data)
  278. }
  279. },
  280. '查看详情'
  281. )
  282. }
  283. })
  284. },
  285. reconnect () {
  286. var that = this
  287. if (that.lockReconnect) return
  288. that.lockReconnect = true
  289. // 没连接上会一直重连,设置延迟避免请求过多
  290. setTimeout(function () {
  291. console.info('尝试重连...')
  292. that.initWebSocket()
  293. that.lockReconnect = false
  294. }, 5000)
  295. },
  296. heartCheckFun () {
  297. var that = this
  298. // 心跳检测,每20s心跳一次
  299. that.heartCheck = {
  300. timeout: 20000,
  301. timeoutObj: null,
  302. serverTimeoutObj: null,
  303. reset: function () {
  304. clearTimeout(this.timeoutObj)
  305. // clearTimeout(this.serverTimeoutObj);
  306. return this
  307. },
  308. start: function () {
  309. var self = this
  310. this.timeoutObj = setTimeout(function () {
  311. // 这里发送一个心跳,后端收到后,返回一个心跳消息,
  312. // onmessage拿到返回的心跳就说明连接正常
  313. that.websocketSend('HeartBeat')
  314. console.info('客户端发送心跳')
  315. // self.serverTimeoutObj = setTimeout(function(){//如果超过一定时间还没重置,说明后端主动断开了
  316. // that.websock.close();//如果onclose会执行reconnect,我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
  317. // }, self.timeout)
  318. }, this.timeout)
  319. }
  320. }
  321. },
  322. showDetail (key, data) {
  323. this.$notification.close(key)
  324. var id = data.msgId
  325. getAction(this.url.queryById, { id: id }).then(res => {
  326. if (res.success) {
  327. var record = res.result
  328. this.showAnnouncement(record)
  329. }
  330. })
  331. }
  332. }
  333. }
  334. </script>
  335. <style lang="css">
  336. .header-notice-wrapper {
  337. top: 50px !important;
  338. }
  339. </style>
  340. <style lang="less" scoped>
  341. .header-notice {
  342. display: inline-block;
  343. transition: all 0.3s;
  344. span {
  345. vertical-align: initial;
  346. }
  347. }
  348. </style>