HeaderNotice.vue 12 KB

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