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

View File

@@ -10,11 +10,11 @@
<div class="type-wrapper"> <div class="type-wrapper">
<div class="type-item"> <div class="type-item">
<span class="type-btn">重大</span> <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>
<div class="type-item"> <div class="type-item">
<span class="type-btn active">一般</span> <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>
</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) => { watch(() => props.hiddenDangerData?.progress, (newVal) => {
refreshProcessCharts(newVal) refreshProcessCharts(newVal)
}, { deep: true }) }, { deep: true })