no message

This commit is contained in:
chenlin
2025-12-13 20:55:17 +08:00
parent e1373b98cb
commit caad49998c
2 changed files with 25 additions and 45 deletions

View File

@@ -71,7 +71,6 @@ const props = withDefaults(defineProps<Props>(), {
const listWrapperRef = ref<HTMLElement | null>(null)
let scrollTimer: NodeJS.Timeout | null = null
let isScrolling = false
let scrollDirection: 'down' | 'up' = 'down' // 滚动方向:向下或向上
const handleItemClick = (item: AlertItem) => {
window.open(`http://10.0.64.20/configcenter/console/device-manage`, '_blank')
@@ -88,23 +87,9 @@ const startAutoScroll = (resetToTop: boolean = false) => {
// 只有当内容高度超过容器高度时才启动滚动
if (scrollHeight <= clientHeight) return
// 如果是首次启动或需要重置,从顶部开始向下滚动
// 如果是首次启动或需要重置,从顶部开始
if (resetToTop) {
wrapper.scrollTop = 0
scrollDirection = 'down'
} else {
// 否则根据当前位置判断滚动方向
const currentScrollTop = wrapper.scrollTop
const maxScrollTop = scrollHeight - clientHeight
if (currentScrollTop >= maxScrollTop - 1) {
// 在底部,向上滚动
scrollDirection = 'up'
} else if (currentScrollTop <= 1) {
// 在顶部,向下滚动
scrollDirection = 'down'
}
// 在中间位置,保持当前方向(或默认向下)
}
isScrolling = true
@@ -115,34 +100,25 @@ const startAutoScroll = (resetToTop: boolean = false) => {
const currentScrollTop = wrapper.scrollTop
const maxScrollTop = scrollHeight - clientHeight
if (scrollDirection === 'down') {
// 向下滚动
const nextScrollTop = currentScrollTop + props.scrollSpeed
// 向下滚动
const nextScrollTop = currentScrollTop + props.scrollSpeed
if (nextScrollTop >= maxScrollTop) {
// 滚动到底部,瞬间跳转到顶部
// 先移除平滑滚动效果,实现瞬间跳转
const originalScrollBehavior = wrapper.style.scrollBehavior
wrapper.style.scrollBehavior = 'auto'
wrapper.scrollTop = 0
// 恢复平滑滚动效果
setTimeout(() => {
wrapper.style.scrollBehavior = originalScrollBehavior || 'smooth'
}, 0)
if (nextScrollTop >= maxScrollTop) {
// 滚动到底部,切换方向为向上
wrapper.scrollTop = maxScrollTop
scrollDirection = 'up'
// 在底部停留一小段时间后开始向上滚动
scrollTimer = setTimeout(scroll, 500)
return
} else {
wrapper.scrollTop = nextScrollTop
}
// 短暂延迟后继续滚动
scrollTimer = setTimeout(scroll, 100)
return
} else {
// 向上滚动
const nextScrollTop = currentScrollTop - props.scrollSpeed
if (nextScrollTop <= 0) {
// 滚动到顶部,切换方向为向下
wrapper.scrollTop = 0
scrollDirection = 'down'
// 在顶部停留一小段时间后开始向下滚动
scrollTimer = setTimeout(scroll, 500)
return
} else {
wrapper.scrollTop = nextScrollTop
}
wrapper.scrollTop = nextScrollTop
}
scrollTimer = setTimeout(scroll, 50) // 每50ms滚动一次实现平滑效果
@@ -167,7 +143,7 @@ const handleMouseEnter = () => {
const handleMouseLeave = () => {
if (props.autoScroll) {
// 延迟启动滚动,避免鼠标快速进出
// 从当前位置继续,不重置
// 从当前位置继续向下滚动
setTimeout(() => {
startAutoScroll(false)
}, 500)

View File

@@ -10,11 +10,11 @@
<div class="type-wrapper">
<div class="type-item">
<span class="type-btn">重大</span>
<span class="type-num">{{ hiddenDangerData?.major || 0 }}</span>
<span class="type-num cursor-pointer" @click="handleMajorClick">{{ hiddenDangerData?.major || 0 }}</span>
</div>
<div class="type-item">
<span class="type-btn active">一般</span>
<span class="type-num">{{ hiddenDangerData?.general || 0 }}</span>
<span class="type-num cursor-pointer" @click="handleMajorClick">{{ hiddenDangerData?.general || 0 }}</span>
</div>
</div>
@@ -189,6 +189,10 @@ const top3TypesChartOption = ref<any>({
]
})
const handleMajorClick = () => {
window.open('http://10.0.64.20/configcenter/console/device-manage', '_blank')
}
watch(() => props.hiddenDangerData?.progress, (newVal) => {
refreshProcessCharts(newVal)
}, { deep: true })