|
|
|
@ -13,7 +13,11 @@ export default {
|
|
|
|
|
this.initWebSocket();
|
|
|
|
|
window.addEventListener("onmessageWS", this.getSocketData);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
recentAlerts: [], // 用于存储最近三个告警的数组
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
...mapActions("cache", ["addCache", "removeCache"]),
|
|
|
|
|
// 收集缓存(通过监听)
|
|
|
|
@ -56,12 +60,39 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
getSocketData(res) {
|
|
|
|
|
console.log(res);
|
|
|
|
|
const newAlert = res.detail.data;
|
|
|
|
|
|
|
|
|
|
// 将新告警添加到数组中
|
|
|
|
|
this.recentAlerts.push(newAlert);
|
|
|
|
|
|
|
|
|
|
// 如果数组长度超过3,移除最旧的告警
|
|
|
|
|
if (this.recentAlerts.length > 3) {
|
|
|
|
|
this.recentAlerts.shift(); // 移除数组的第一个元素
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 使用最新的三个告警来显示通知
|
|
|
|
|
this.showAlerts();
|
|
|
|
|
// this.$notify({
|
|
|
|
|
// title: "告警",
|
|
|
|
|
// message: res.detail.data,
|
|
|
|
|
// position: "bottom-right",
|
|
|
|
|
// type: "warning",
|
|
|
|
|
// duration: 0,
|
|
|
|
|
// });
|
|
|
|
|
},
|
|
|
|
|
showAlerts() {
|
|
|
|
|
// 遍历最新的三个告警并显示它们
|
|
|
|
|
this.recentAlerts.forEach((alert, index) => {
|
|
|
|
|
// 稍微延迟每个通知的显示,以便用户可以看到它们连续出现
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.$notify({
|
|
|
|
|
title: "告警",
|
|
|
|
|
message: res.detail.data,
|
|
|
|
|
message: alert,
|
|
|
|
|
position: "bottom-right",
|
|
|
|
|
type: "warning",
|
|
|
|
|
duration: 0,
|
|
|
|
|
duration: 0, // 可以设置一个适当的持续时间,或者设置为0表示永久显示直到用户关闭
|
|
|
|
|
});
|
|
|
|
|
}, index * 1000); // 每个告警之间间隔1秒显示
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|