From 9b96746957b45791365ec0f295927c621e306704 Mon Sep 17 00:00:00 2001
From: "qumeng039@126.com" <86925389+qumen@users.noreply.github.com>
Date: Thu, 7 Aug 2025 20:13:33 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=97=B6=E9=97=B4=E8=BD=B4is?=
 =?UTF-8?q?Play=E7=9B=91=E5=90=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/timeAxis.vue                   | 13 ++++++++++-
 .../GroupEvolution/component/groupGraph.vue   | 23 +++++++------------
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/components/timeAxis.vue b/src/components/timeAxis.vue
index f8a9dda..4b47d49 100644
--- a/src/components/timeAxis.vue
+++ b/src/components/timeAxis.vue
@@ -122,8 +122,19 @@ watch(
     timeList.value = newVal
   },
   { deep: true }
+)
 
-
+// 监听 isAutoPlay 属性变化
+watch(
+  () => props.isAutoPlay,
+  (newVal) => {
+    isPlaying.value = newVal
+    if (newVal) {
+      play()
+    } else {
+      pause()
+    }
+  }
 )
 
 // 让 active-needle 标定在 timeList 最后一个时间点
diff --git a/src/views/GroupEvolution/component/groupGraph.vue b/src/views/GroupEvolution/component/groupGraph.vue
index ea52b0b..65fb13a 100644
--- a/src/views/GroupEvolution/component/groupGraph.vue
+++ b/src/views/GroupEvolution/component/groupGraph.vue
@@ -6,7 +6,7 @@
       <TimeAxis
         v-if="timeList.length"
         :time-list="timeList"
-        :is-auto-play="true"
+        :is-auto-play="isPlay"
         :start-time="new Date(timeList[0])"
         :end-time="new Date(timeList[timeList.length - 1])"
         @click:pointerDown="handlePointerDown"
@@ -30,6 +30,7 @@ const props = defineProps({
 })
 const emit = defineEmits(["click:pointerDownAndSlide"])
 const { timeList, graph } = storeToRefs(props.store)
+let isPlay = ref(false)
 let graphVis = null
 let forceSimulator = null
 let currentSelectNode = ref(null)
@@ -44,7 +45,6 @@ const defaultConfig = {
     },
     shape: "circle",
     size: 30,
-    color: (node) => colorMap[node.cluster],
     borderColor: "200,50,50",
     borderWidth: 0,
     selected: {
@@ -127,15 +127,15 @@ const registEvents = () => {
     }
   })
 }
-const runForceLayout = () => {
-  const layoutConfig = { strength: -500, ajustCluster: true }
+const runForceLayout = (layoutConfig, layoutType, isAsync) => {
   //执行异步布局计算
   graphVis.excuteWorkerLayout(
     graphVis.getGraphData(),
-    "simulation",
+    layoutType,
     layoutConfig,
-    false,
+    isAsync,
     function () {
+      isPlay.value = true
       graphVis.zoomFit() //布局结束缩放居中
     }
   )
@@ -191,8 +191,8 @@ const createGraph = () => {
 const initChart = () => {
   createGraph()
   graphVis.addGraph({ ...toRaw(graph.value) })
-  runForceLayout()
   clusterAnalyze()
+  runForceLayout({ strength: -500, ajustCluster: true }, "simulation", true)
 }
 
 // 添加更新图表的函数
@@ -205,8 +205,8 @@ const updateChart = (newGraphData) => {
   graphVis.addGraph({ ...toRaw(newGraphData) })
   graphVis.zoomFit()
   // 重新运行力导向布局
-  runForceLayout()
   clusterAnalyze()
+  runForceLayout({ strength: -500, ajustCluster: true }, "simulation", true)
 }
 
 let lastLength = 0 //记录上一次的长度
@@ -220,13 +220,6 @@ watch(
   },
   { deep: true }
 )
-
-onUnmounted(() => {
-  if (graphVis) {
-    graphVis.destroy() // 如果 GraphVis 提供了销毁方法
-    graphVis = null
-  }
-})
 </script>
 
 <style scoped lang="less">