no message
This commit is contained in:
@@ -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,35 +100,26 @@ 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)
|
|
||||||
return
|
|
||||||
} else {
|
|
||||||
wrapper.scrollTop = nextScrollTop
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// 向上滚动
|
|
||||||
const nextScrollTop = currentScrollTop - props.scrollSpeed
|
|
||||||
|
|
||||||
if (nextScrollTop <= 0) {
|
|
||||||
// 滚动到顶部,切换方向为向下
|
|
||||||
wrapper.scrollTop = 0
|
wrapper.scrollTop = 0
|
||||||
scrollDirection = 'down'
|
// 恢复平滑滚动效果
|
||||||
// 在顶部停留一小段时间后开始向下滚动
|
setTimeout(() => {
|
||||||
scrollTimer = setTimeout(scroll, 500)
|
wrapper.style.scrollBehavior = originalScrollBehavior || 'smooth'
|
||||||
|
}, 0)
|
||||||
|
|
||||||
|
// 短暂延迟后继续滚动
|
||||||
|
scrollTimer = setTimeout(scroll, 100)
|
||||||
return
|
return
|
||||||
} else {
|
} else {
|
||||||
wrapper.scrollTop = nextScrollTop
|
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)
|
||||||
|
|||||||
@@ -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 })
|
||||||
|
|||||||
Reference in New Issue
Block a user