修意见领袖

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%;

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>
 

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()