|
416 | 416 | }); |
417 | 417 | } |
418 | 418 |
|
419 | | - // 设置定期更新 |
| 419 | + // 设置定期更新,降低频率减少跳动 |
420 | 420 | this._updateInterval = setInterval(() => { |
421 | 421 | this.updateServerLiveStatus({ now: Date.now() }); |
422 | | - }, 1000); // 改回1秒更新一次 |
| 422 | + }, 3000); // 改为3秒更新一次,减少频繁跳动 |
423 | 423 | }, |
424 | 424 | mounted() { |
425 | 425 | this.$nextTick(() => { |
|
551 | 551 | let displayPercentValue = percent; |
552 | 552 | let classObject = { ui: true, progress: true }; |
553 | 553 | let styleObject = { |
554 | | - 'transition-duration': '300ms', |
| 554 | + 'transition-duration': '800ms', // 增加过渡时间,使变化更平滑 |
| 555 | + 'transition-timing-function': 'ease-out', |
555 | 556 | 'min-width': 'unset', |
556 | 557 | width: (percent >= 0 ? percent : 0) + '% !important', |
557 | 558 | }; |
|
763 | 764 | } |
764 | 765 | } |
765 | 766 |
|
766 | | - // 计算在线状态 |
| 767 | + // 计算在线状态 - 增加稳定性,减少频繁跳动 |
767 | 768 | const lastActiveTimestampMs = new Date(serverItem.LastActive).getTime(); |
768 | 769 | const diffMs = nowMillisFromWS - lastActiveTimestampMs; |
769 | | - const newLiveStatus = !isNaN(lastActiveTimestampMs) && diffMs <= 30000 && diffMs >= -5000; |
770 | | - |
771 | | - // 只有在状态发生变化时才更新 |
| 770 | + |
| 771 | + // 增加容错时间,减少误判:60秒超时 + 10秒容错 |
| 772 | + const newLiveStatus = !isNaN(lastActiveTimestampMs) && diffMs <= 60000 && diffMs >= -10000; |
| 773 | + |
| 774 | + // 添加状态稳定性检查,避免频繁切换 |
772 | 775 | if (serverItem.live !== newLiveStatus) { |
| 776 | + // 如果状态要从在线变为离线,需要连续2次确认 |
| 777 | + if (serverItem.live === true && newLiveStatus === false) { |
| 778 | + if (!serverItem._offlineConfirmCount) { |
| 779 | + serverItem._offlineConfirmCount = 1; |
| 780 | + return; // 第一次检测到离线,不立即更新 |
| 781 | + } else { |
| 782 | + serverItem._offlineConfirmCount = 0; // 重置计数器 |
| 783 | + } |
| 784 | + } else if (serverItem.live === false && newLiveStatus === true) { |
| 785 | + // 从离线恢复到在线,立即更新 |
| 786 | + serverItem._offlineConfirmCount = 0; |
| 787 | + } |
| 788 | + |
773 | 789 | serverItem.live = newLiveStatus; |
774 | 790 | hasUpdates = true; |
775 | 791 | } |
776 | 792 | }); |
777 | 793 |
|
778 | | - // 只有在有实际更新时才强制更新视图 |
| 794 | + // 只有在有实际更新时才强制更新视图,并添加防抖 |
779 | 795 | if (hasUpdates) { |
780 | | - this.$forceUpdate(); |
| 796 | + // 使用防抖机制,避免频繁更新 |
| 797 | + if (this._updateDebounceTimer) { |
| 798 | + clearTimeout(this._updateDebounceTimer); |
| 799 | + } |
| 800 | + this._updateDebounceTimer = setTimeout(() => { |
| 801 | + this.$forceUpdate(); |
| 802 | + this._updateDebounceTimer = null; |
| 803 | + }, 500); // 500ms 防抖 |
781 | 804 | } |
782 | 805 | }, |
783 | 806 | getTrafficProgressClass(serverId) { |
|
956 | 979 | if (this._updateInterval) { |
957 | 980 | clearInterval(this._updateInterval); |
958 | 981 | } |
| 982 | + if (this._updateDebounceTimer) { |
| 983 | + clearTimeout(this._updateDebounceTimer); |
| 984 | + } |
959 | 985 | if (window.trafficManager) { |
960 | 986 | window.trafficManager.unsubscribe(this.updateTrafficData); |
961 | 987 | } |
|
0 commit comments