时间轴自动滚动

src/views/LinkPrediction/components/detailNode.vue

@@ -56,7 +56,7 @@
 
 <script setup>
 import { defineEmits, onMounted, ref, onUnmounted, computed, watch, nextTick } from "vue"
-import { TansTimestamp, getAvatarUrl } from "@/utils/transform"
+import { TansTimestamp } from "@/utils/transform"
 import nodeHoverImg from "@/assets/images/nodeHover.png"
 import * as echarts from "echarts"
 import { storeToRefs } from "pinia"
@@ -96,7 +96,48 @@ watch(
 const startTime = ref(new Date("2024-05-16 16:56:04"))
 const endTime = ref(new Date("2024-05-23 10:16:56"))
 const currentTime = ref(new Date("2024-05-16 16:56:04")) // 当前选中的时间
-const currentPosition = ref(0) // 初始位置（轴长度的一半）
+const currentPosition = ref(0) // 初始位置
+const isPlaying = ref(false) // 是否自动播放
+let playTimer = null
+
+// 自动播放控制
+const play = () => {
+  if (isPlaying.value) return
+  isPlaying.value = true
+  playTimer = setInterval(() => {
+    // 步进像素
+    const step = 4 // 每次移动4px，可根据需要调整速度
+    if (currentPosition.value >= axisWidth) {
+      pause()
+      return
+    }
+    currentPosition.value = Math.min(axisWidth, currentPosition.value + step)
+    currentTime.value = getTimeFromPosition(currentPosition.value)
+    sendTimeChangeRequest()
+  }, 300) // 每300ms移动一次
+}
+
+const pause = () => {
+  isPlaying.value = false
+  if (playTimer) {
+    clearInterval(playTimer)
+    playTimer = null
+  }
+}
+
+// 发送请求逻辑封装
+const sendTimeChangeRequest = () => {
+  const currentTimes = TansTimestamp(currentTime.value, "YYYY-MM-DD HH:mm:ss")
+  if (interactionStore.curRelationId == "") {
+    interactionStore.initGraphCommunityDetailNode(interactionStore.curSelecedGroupIds, currentTimes)
+  } else {
+    interactionStore.initGraphCommunityDetailNode(
+      interactionStore.curSelecedGroupIds,
+      currentTimes,
+      interactionStore.curRelationId
+    )
+  }
+}
 const axisRef = ref(null)
 const isDragging = ref(false)
 
@@ -135,24 +176,12 @@ const getTimeFromPosition = (position) => {
 // 指针按下事件
 const handlePointerDown = (e) => {
   if (e.target.classList.contains("timeLine-point")) return
+  pause() // 拖动或点击时暂停自动播放
   const rect = axisRef.value.getBoundingClientRect()
   const position = Math.max(0, Math.min(axisWidth, e.clientX - rect.left))
-
-  // 直接更新位置，不使用节流函数
   currentPosition.value = position
   currentTime.value = getTimeFromPosition(position)
-
+  sendTimeChangeRequest()
-  // 点击后输出当前时间
-  const currentTimes = TansTimestamp(currentTime.value, "YYYY-MM-DD HH:mm:ss")
-  if (interactionStore.curRelationId == "") {
-    interactionStore.initGraphCommunityDetailNode(interactionStore.curSelecedGroupIds, currentTimes)
-  } else {
-    interactionStore.initGraphCommunityDetailNode(
-      interactionStore.curSelecedGroupIds,
-      currentTimes,
-      interactionStore.curRelationId
-    )
-  }
 }
 
 // 时间点指针按下事件
@@ -210,6 +239,7 @@ const trackStyle = computed(() => {
 onUnmounted(() => {
   document.removeEventListener("pointermove", () => {})
   document.removeEventListener("pointerup", () => {})
+  pause()
 })
 
 let chart = null
@@ -371,7 +401,7 @@ const initChart = async () => {
         animation: false,
         draggable: true,
         roam: true,
-        zoom: 0.15,
+        zoom: 0.1,
         categories: categories,
         force: {
           edgeLength: 2500,
@@ -443,6 +473,7 @@ const highLightUserNodes = (userIds) => {
 onMounted(() => {
   initChart()
   highLightUserNodes()
+  play()
 })
 </script>