From ba5f0fc774dadce73b5b7a8394836dd77758b479 Mon Sep 17 00:00:00 2001
From: duanhao <dh14779715518@163.com>
Date: Fri, 15 Aug 2025 16:25:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=84=8F=E8=A7=81=E9=A2=86=E8=A2=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/GraphPanel.vue                   |  4 +---
 .../opinionLeader/components/GraphPanel.vue     | 17 +++++++++++++++--
 .../KeyNodeDiscern/opinionLeader/index.vue      | 10 +++++++++-
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/views/KeyNodeDiscern/bridgeCommunication/components/GraphPanel.vue b/src/views/KeyNodeDiscern/bridgeCommunication/components/GraphPanel.vue
index 852e1c1..3caecdc 100644
--- a/src/views/KeyNodeDiscern/bridgeCommunication/components/GraphPanel.vue
+++ b/src/views/KeyNodeDiscern/bridgeCommunication/components/GraphPanel.vue
@@ -59,7 +59,7 @@
 </template>
 
 <script setup>
-import { ref, defineExpose, watch, computed } from "vue"
+import { ref, defineExpose, watch, computed, defineProps } from "vue"
 import { useKeyNodeStore2 } from "@/store/keyNodeStore2"
 
 // 接收 stopAutomaticPlay 方法
@@ -179,7 +179,6 @@ const handleTimePointClick = (pointId) => {
 </script>
 
 <style scoped lang="less">
-
 .right-panel {
   width: 100%;
   height: 100%;
@@ -217,7 +216,6 @@ const handleTimePointClick = (pointId) => {
     top: 0;
     margin: 0 auto;
   }
-
 }
 .chart-container {
   width: 100%;
diff --git a/src/views/KeyNodeDiscern/opinionLeader/components/GraphPanel.vue b/src/views/KeyNodeDiscern/opinionLeader/components/GraphPanel.vue
index 374f744..8095a9f 100644
--- a/src/views/KeyNodeDiscern/opinionLeader/components/GraphPanel.vue
+++ b/src/views/KeyNodeDiscern/opinionLeader/components/GraphPanel.vue
@@ -20,7 +20,7 @@
               :key="point.id"
               class="timeline-point-wrapper"
               :style="{ left: `${pointPositions[point.id]}%` }"
-              @click="store.setActiveTimePoint(point.id)"
+              @click="handleTimePointClick(point.id)"
             >
               <!-- 时间点提示框 -->
               <el-tooltip
@@ -57,11 +57,16 @@
 </template>
 
 <script setup>
-import { ref, defineExpose } from "vue"
+import { ref, defineExpose, defineProps } from "vue"
 import { useKeyNodeStore1 } from "@/store/keyNodeStore1"
 import DynamicGraph from "./graph/dynamicGraph.vue"
 import { watch, computed } from "vue"
 
+// 接收 stopAutomaticPlay 方法
+const props = defineProps({
+  stopAutomaticPlay: { type: Function, required: true }
+})
+
 const store = useKeyNodeStore1()
 const leaderGraphRef = ref(null)
 
@@ -140,6 +145,14 @@ const trackStyle = computed(() => {
   }
 })
 
+// 添加时间点点击事件处理函数
+const handleTimePointClick = (pointId) => {
+  // 停止自动播放
+  props.stopAutomaticPlay()
+  // 设置当前激活的时间点
+  store.setActiveTimePoint(pointId)
+}
+
 defineExpose({ highlightNode })
 </script>
 
diff --git a/src/views/KeyNodeDiscern/opinionLeader/index.vue b/src/views/KeyNodeDiscern/opinionLeader/index.vue
index eff1094..dad7015 100644
--- a/src/views/KeyNodeDiscern/opinionLeader/index.vue
+++ b/src/views/KeyNodeDiscern/opinionLeader/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" />
@@ -108,6 +108,14 @@ const automaticPlay = () => {
   }, 1500)
 }
 
+// 添加停止自动播放的方法
+const stopAutomaticPlay = () => {
+  if (timer) {
+    clearInterval(timer)
+    timer = null
+  }
+}
+
 onMounted(() => {
   store.initializeTimePoints()
   automaticPlay()