diff --git a/web/src/views/HandDevice/Home/index.vue b/web/src/views/HandDevice/Home/index.vue index db7fe38..27612b2 100644 --- a/web/src/views/HandDevice/Home/index.vue +++ b/web/src/views/HandDevice/Home/index.vue @@ -18,7 +18,7 @@ />
- + @@ -227,7 +227,9 @@ async function showTrajectory(item: MarkerData) { // sn: '867989072729904' }) if (!data || data.length === 0) { - ElMessage.error(`${dayjs(trajectoryTimeRange.value[0]).format('YYYY-MM-DD HH:mm:ss')}至${dayjs(trajectoryTimeRange.value[1]).format('YYYY-MM-DD HH:mm:ss')}时段没有轨迹数据`) + ElMessage.error( + `${dayjs(trajectoryTimeRange.value[0]).format('YYYY-MM-DD HH:mm:ss')}至${dayjs(trajectoryTimeRange.value[1]).format('YYYY-MM-DD HH:mm:ss')}时段没有轨迹数据` + ) // return } // 过滤前 @@ -329,9 +331,42 @@ function onClickMarker(item: MarkerData) { if (findIndex === -1) { return } - var top = findIndex * 48 + setTimeout(() => { + let top = findIndex * 48 + // scrollbarRef.value?.setScrollTop(top) + // 取消之前的动画 + cancelAnimationFrame(AnimationId.value as number) + scrollTo(scrollbarScrollTop.value, top, scrollbarScrollTop.value) + }, 500) +} +const scrollbarScrollTop = ref(0) +function onScroll({ scrollTop }) { + scrollbarScrollTop.value = scrollTop +} - scrollbarRef.value?.setScrollTop(top) +// 滚动到指定位置 +const AnimationId = ref() +function scrollTo(from: number, to: number, current: number) { + if (scrollbarScrollTop.value === to) { + return + } + const speed = (to - from) / 30 + + if (speed < 0) { + if (current <= to) { + return + } + } else if (speed > 0) { + if (current >= to) { + return + } + } + current = current + speed + + scrollbarRef.value?.setScrollTop(current) + AnimationId.value = requestAnimationFrame(() => { + scrollTo(from, to, current) + }) } onMounted(() => { getMarkers()