添加时间轴isPlay监听

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 最后一个时间点

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">