实现跨组件通信和按钮高亮功能

src/views/App.vue

@@ -1,8 +1,31 @@
+<<<<<<< HEAD
 
 <template>
   <div style="width: 100%; height: 100%;">
     <div class="graph-box" id="graph-container"></div>
     <div class="slider-box">
+=======
+<!-- <script setup>
+// import { RouterView } from 'vue-router'
+// import HelloWorld from './components/HelloWorld.vue'
+// import Visualize from '../views/visualize/index.vue'
+// import graphData from "../views/visualize/data/graphData.ts"
+</script> -->
+
+<template>
+  <div style="width: 100%; height: 100%">
+    <div class="graph-box" id="graph-container"></div>
+    <div class="slider-box">
+      <button @click="handleCombineAction">定位并高亮</button>
+      <el-button 
+        @click="toggleAutoPlay"
+        :loading="state.isProcessingAutoPlay"  
+        :disabled="!Object.keys(state.marks).length"
+        :class="{'el-button--danger': state.isAutoPlaying}"
+      >
+        {{ state.isAutoPlaying ? '停止播放' : '开始自动播放' }}
+      </el-button>
+>>>>>>> main
       <el-slider v-model="state.sliderValue" @input="sliderChange" :marks="state.marks" />
     </div>
   </div>
@@ -10,16 +33,25 @@
 
 <script setup>
 import axios from "axios";
+<<<<<<< HEAD
 import { onMounted, reactive } from "vue";
 import { Graph } from "@antv/g6";
 import { ElLoading } from 'element-plus';
 
+=======
+import { onMounted,onUnmounted, reactive, watch } from "vue";
+import { Graph } from "@antv/g6";
+import { ElLoading } from 'element-plus';
+import { ElMessage } from 'element-plus';
+import { useActionStore } from '@/store';
+>>>>>>> main
 const state = reactive({
   graph: null,
   marks: {
     '0': "2024-01-03",
     '10': "2024-01-04",
     '20': "2024-01-05",
+<<<<<<< HEAD
     '30': "2024-03-16",
     '40': "2024-03-17",
     '50': "2024-04-08",
@@ -32,6 +64,32 @@ const state = reactive({
   sliderValue: 0,
   loadingInstance: null
 })
+=======
+    '30': "2024-03-14",
+    '40': "2024-03-25",
+    '60': "2024-04-01",
+    '70': "2024-05-12",
+    '90': "2024-06-23",
+    '100': "2024-06-28"
+  },
+  sliderValue: 0,
+  loadingInstance: null,
+  isAutoPlaying: false,
+  isProcessingAutoPlay: false,       // 修正：防止重复点击的处理状态
+  remainingTime: 0,                  // 新增：记录暂停时剩余时间
+}) 
+const actionStore = useActionStore();
+
+watch(() => actionStore.triggerCombineAction, (value) => {
+  if (value) {
+    state.sliderValue = 30;
+    sliderChange(30);
+    setTimeout(() => {
+      highlightNode(actionStore.targetNodeId);
+    }, 500);
+  }
+});
+>>>>>>> main
 let loadingInstance = null;
 // 显示 Loading 组件
 const showLoading = () => {
@@ -62,7 +120,13 @@ const sliderChange = (val) => {
 const getData = async (dataTime) => {
   showLoading()
   const res = await axios.get("http://10.7.1.52:1922/demo/edge/getEdgeData", {
+<<<<<<< HEAD
     params: { dataTime }
+=======
+    params: 
+    { dataTime }
+
+>>>>>>> main
   });
   if (res.data.code == 200) {
     createGraph(res.data.data)
@@ -130,12 +194,84 @@ const createGraph = (data) => {
   });
   state.graph = graph
 }
+<<<<<<< HEAD
+=======
+// 增强按钮点击处理逻辑
+const toggleAutoPlay = () => {
+  // 防止重复点击
+  if (state.isProcessingAutoPlay) return;
+  state.isProcessingAutoPlay = true;
+
+  try {
+    if (state.isAutoPlaying) {
+      // 停止播放流程
+      if (state.autoPlayTimer) {
+        clearInterval(state.autoPlayTimer);
+        state.autoPlayTimer = null;
+      }
+      state.isAutoPlaying = false;
+      state.isPaused = false;
+      // 停止图形库动画
+      if (state.graph?.stop) state.graph.stop();
+      ElMessage.success('自动播放已停止');
+    } else {
+      // 开始播放流程
+      const markValues = Object.keys(state.marks).map(Number).sort((a, b) => a - b);
+      if (markValues.length <= 1) {
+        ElMessage.warning('标记点不足，无法启动自动播放');
+        return;
+      }
+
+      state.isAutoPlaying = true;
+      state.autoPlayTimer = setInterval(() => {
+        const currentIndex = markValues.indexOf(state.sliderValue);
+        const nextIndex = currentIndex + 1;
+
+        if (nextIndex >= markValues.length) {
+          // 播放完成自动停止
+          clearInterval(state.autoPlayTimer);
+          state.autoPlayTimer = null;
+          state.isAutoPlaying = false;
+          ElMessage.success('所有标记点已播放完成');
+          return;
+        }
+
+        state.sliderValue = markValues[nextIndex];
+        sliderChange(state.sliderValue);
+      }, 12000);
+      ElMessage.success('自动播放已启动');
+    }
+  } catch (error) {
+    console.error('自动播放控制错误:', error);
+    ElMessage.error('操作失败，请重试');
+    // 错误恢复
+    if (state.autoPlayTimer) {
+      clearInterval(state.autoPlayTimer);
+      state.autoPlayTimer = null;
+    }
+    state.isAutoPlaying = false;
+    state.isPaused = false;
+  } finally {
+    state.isProcessingAutoPlay = false;
+  }
+};
+
+const handleLocationClick = () => {
+  // 根据marks数据，3.14对应的值是30
+  state.sliderValue = 30;
+  sliderChange(30);
+}
+>>>>>>> main
 
 /**
  * 高亮节点
  * @param id 节点id
  */
+<<<<<<< HEAD
 const highlightNode = (id) => {
+=======
+ const highlightNode = (id) => {
+>>>>>>> main
   state.graph.getNodes().forEach((node) => {
     state.graph.clearItemStates(node, "selected");
   });
@@ -154,14 +290,37 @@ const highlightNode = (id) => {
     }
   });
 }
+<<<<<<< HEAD
+=======
+const handleCombineAction = () => {
+  // 先执行定位操作
+  state.sliderValue = 30;
+  sliderChange(30);
+  
+  // 延迟执行高亮操作，确保定位完成后再高亮
+  setTimeout(() => {
+    highlightNode('840983');
+  }, 500);
+}
+>>>>>>> main
 
 onMounted(() => {
   getData('2024-01-03')
 })
+<<<<<<< HEAD
+=======
+onUnmounted(() => {
+  // 组件卸载时清除定时器
+  if (state.autoPlayTimer) {
+    clearInterval(state.autoPlayTimer);
+  }
+})
+>>>>>>> main
 </script>
 
 <style scoped>
 .graph-box {
+<<<<<<< HEAD
   width: 100%;
   height: 100%;
 }
@@ -169,4 +328,15 @@ onMounted(() => {
 .slider-box {
   margin-top: -230px;
 }
+=======
+  width: 80%;
+  height: 80%;
+  margin-top: -10px;
+}
+
+.slider-box {
+margin-top: 65px;
+}
+
+>>>>>>> main
 </style>