no message
This commit is contained in:
@@ -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)
|
||||
|
||||
@@ -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 })
|
||||
|
||||
Reference in New Issue
Block a user