全局通知
parent
0cc507fbc5
commit
17d2901584
89
src/App.vue
89
src/App.vue
|
|
@ -5,6 +5,93 @@
|
|||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'App'
|
||||
name: 'App',
|
||||
data() {
|
||||
return {
|
||||
notificationInstance: null, // 用于存储当前的通知实例
|
||||
showNotification: false, // 控制是否显示通知
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initWebSocket();
|
||||
}, methods: {
|
||||
initWebSocket() {
|
||||
const wsUri = (process.env.VUE_APP_WS_API === '/' ? '/' : (process.env.VUE_APP_WS_API + '/')) + 'webSocket/stock'
|
||||
this.websock = new WebSocket(wsUri)
|
||||
this.websock.onerror = this.webSocketOnError
|
||||
this.websock.onmessage = this.webSocketOnMessage
|
||||
this.pollMsg()
|
||||
},
|
||||
webSocketOnError(e) {
|
||||
this.$notify({
|
||||
title: 'WebSocket连接发生错误',
|
||||
type: 'error',
|
||||
duration: 0
|
||||
})
|
||||
}, webSocketOnMessage(e) {
|
||||
const data = JSON.parse(e.data)
|
||||
if (data.msgType === 'INFO') {
|
||||
this.createOrUpdateNotification(data);
|
||||
} else if (data.msgType === 'ERROR') {
|
||||
this.$notify({
|
||||
title: '',
|
||||
message: data.msg,
|
||||
dangerouslyUseHTMLString: true,
|
||||
type: 'error',
|
||||
duration: 0
|
||||
})
|
||||
}
|
||||
},
|
||||
webSocketSend(agentData) {
|
||||
this.websock.send(agentData)
|
||||
},
|
||||
createOrUpdateNotification(data) {
|
||||
// 更新或创建通知
|
||||
if (this.showNotification && this.notificationInstance) {
|
||||
this.updateNotification(data);
|
||||
} else {
|
||||
this.createNotification(data);
|
||||
}
|
||||
this.showNotification = true;
|
||||
},
|
||||
|
||||
updateNotification(data) {
|
||||
// 尝试更新通知内容
|
||||
try {
|
||||
this.notificationInstance.title = '点击关注公众号';
|
||||
this.notificationInstance.message = data.msg;
|
||||
} catch (error) {
|
||||
// 如果更新失败，关闭当前通知并重新创建
|
||||
this.createNotification(data);
|
||||
}
|
||||
},
|
||||
|
||||
createNotification(data) {
|
||||
// 创建一个新的通知实例
|
||||
this.notificationInstance = this.$notify({
|
||||
title: '点击关注公众号',
|
||||
message: data.msg,
|
||||
type: 'success',
|
||||
offset: 100,
|
||||
duration: 0,
|
||||
onClose: this.onNotificationClose // 关闭时调用的方
|
||||
});
|
||||
},
|
||||
onNotificationClose() {
|
||||
this.showNotification = false;
|
||||
this.notificationInstance = null;
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
|
||||
if (this.websock && this.websock.readyState === WebSocket.OPEN) {
|
||||
this.websock.close();
|
||||
}
|
||||
if (this.notificationInstance) {
|
||||
this.notificationInstance.close(); // 关闭通知
|
||||
this.showNotification = false;
|
||||
this.notificationInstance = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -75,8 +75,8 @@ export function containerOut(data) {
|
|||
export function stockMsg(data) {
|
||||
return request({
|
||||
url: 'api/stock/stockMsg',
|
||||
method: 'post',
|
||||
data
|
||||
method: 'get',
|
||||
params: {data}
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -36,107 +36,13 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
notificationInstance: null, // 用于存储当前的通知实例
|
||||
showNotification: false, // 控制是否显示通知
|
||||
lineChartData: lineChartData.newVisitis
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initWebSocket();
|
||||
},
|
||||
methods: {
|
||||
handleSetLineChartData(type) {
|
||||
this.lineChartData = lineChartData[type]
|
||||
},
|
||||
async pollMsg() {
|
||||
//3秒轮询一次
|
||||
this.pollingTimer = setInterval(async () => {
|
||||
const data = {msg: '友仓智慧物流,软件定义物流。', msgType: 'INFO'}
|
||||
console.log(data)
|
||||
this.createOrUpdateNotification(data)
|
||||
}, 3000);
|
||||
},
|
||||
initWebSocket() {
|
||||
stockUrl.stockMsg();
|
||||
const wsUri = (process.env.VUE_APP_WS_API === '/' ? '/' : (process.env.VUE_APP_WS_API + '/')) + 'webSocket/stock'
|
||||
this.websock = new WebSocket(wsUri)
|
||||
this.websock.onerror = this.webSocketOnError
|
||||
this.websock.onmessage = this.webSocketOnMessage
|
||||
this.pollMsg()
|
||||
},
|
||||
webSocketOnError(e) {
|
||||
this.$notify({
|
||||
title: 'WebSocket连接发生错误',
|
||||
type: 'error',
|
||||
duration: 0
|
||||
})
|
||||
}, webSocketOnMessage(e) {
|
||||
const data = JSON.parse(e.data)
|
||||
if (data.msgType === 'INFO') {
|
||||
this.createOrUpdateNotification(data);
|
||||
} else if (data.msgType === 'ERROR') {
|
||||
this.$notify({
|
||||
title: '',
|
||||
message: data.msg,
|
||||
dangerouslyUseHTMLString: true,
|
||||
type: 'error',
|
||||
duration: 0
|
||||
})
|
||||
}
|
||||
},
|
||||
webSocketSend(agentData) {
|
||||
this.websock.send(agentData)
|
||||
},
|
||||
createOrUpdateNotification(data) {
|
||||
// 更新或创建通知
|
||||
if (this.showNotification && this.notificationInstance) {
|
||||
this.updateNotification(data);
|
||||
} else {
|
||||
this.createNotification(data);
|
||||
}
|
||||
this.showNotification = true;
|
||||
},
|
||||
|
||||
updateNotification(data) {
|
||||
// 尝试更新通知内容
|
||||
try {
|
||||
this.notificationInstance.title = '点击关注公众号';
|
||||
this.notificationInstance.message = data.msg;
|
||||
} catch (error) {
|
||||
// 如果更新失败，关闭当前通知并重新创建
|
||||
this.createNotification(data);
|
||||
}
|
||||
},
|
||||
|
||||
createNotification(data) {
|
||||
// 创建一个新的通知实例
|
||||
this.notificationInstance = this.$notify({
|
||||
title: '点击关注公众号',
|
||||
message: data.msg,
|
||||
type: 'success',
|
||||
offset: 100,
|
||||
duration: 0,
|
||||
onClose: this.onNotificationClose // 关闭时调用的方
|
||||
});
|
||||
},
|
||||
onNotificationClose() {
|
||||
this.showNotification = false;
|
||||
this.notificationInstance = null;
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.pollingTimer) {
|
||||
clearInterval(this.pollingTimer);
|
||||
}
|
||||
if (this.websock && this.websock.readyState === WebSocket.OPEN) {
|
||||
this.websock.close();
|
||||
}
|
||||
if (this.notificationInstance) {
|
||||
console.log(111)
|
||||
this.notificationInstance.close(); // 关闭通知
|
||||
this.showNotification = false;
|
||||
this.notificationInstance = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue