桥梁自动播放功能修复

src/views/KeyNodeDiscern/bridgeCommunication/components/GraphPanel.vue

@@ -25,7 +25,7 @@
               :key="point.id"
               class="timeline-point-wrapper"
               :style="{ left: `${pointPositions[point.id]}%` }"
-              @click="store.setActiveTimePoint(point.id)"
+              @click="handleTimePointClick(point.id)"
             >
               <el-tooltip
                 class="timePoint-box-item"
@@ -62,6 +62,11 @@
 import { ref, defineExpose, watch, computed } from "vue"
 import { useKeyNodeStore2 } from "@/store/keyNodeStore2"
 
+// 接收 stopAutomaticPlay 方法
+const props = defineProps({
+  stopAutomaticPlay: { type: Function, required: true }
+})
+
 import BridgeCommunityGraph from "./graph/bridgeCommunityGraph.vue"
 import DetailCommunityGraph from "./graph/detailCommunityGraph.vue"
 
@@ -164,6 +169,13 @@ const trackStyle = computed(() => {
 })
 
 defineExpose({ highlightNode })
+// 添加时间点点击事件处理函数
+const handleTimePointClick = (pointId) => {
+  // 停止自动播放
+  props.stopAutomaticPlay()
+  // 设置当前激活的时间点
+  store.setActiveTimePoint(pointId)
+}
 </script>
 
 <style scoped lang="less">

src/views/KeyNodeDiscern/bridgeCommunication/index.vue

@@ -37,7 +37,7 @@
       </div>
       <div class="middle-container">
         <div class="graph">
-          <GraphPanel ref="graphPanelRef" />
+          <GraphPanel ref="graphPanelRef" :stopAutomaticPlay="stopAutomaticPlay" />
         </div>
         <div class="postList">
           <PostDynamics :posts="store.posts" @handle:openDialog="handleOpenPostDialog" />
@@ -94,6 +94,14 @@ const handleOpenPostDialog = (post) => {
   store.openPostDetail(post)
 }
 
+// 添加停止自动播放的方法
+const stopAutomaticPlay = () => {
+  if (timer) {
+    clearInterval(timer)
+    timer = null
+  }
+}
+
 let timer = null
 const automaticPlay = () => {
   let index = 1