解决情绪大模型交互图表时触发自动滚动的问题。

3 days ago · 1c86468b86
5 changed files with 197 additions and 3 deletions
--- a/src/views/components/emoEnergyConverter.vue
+++ b/src/views/components/emoEnergyConverter.vue
@ -862,6 +862,44 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
  };
  // 应用配置
  qxnlzhqEchartsInstance.setOption(option);
+  
+  // 添加图表交互事件监听器
+  if (qxnlzhqEchartsInstance) {
+    // 监听数据缩放事件
+    qxnlzhqEchartsInstance.on('dataZoom', () => {
+      if (window.handleChartInteractionStart) {
+        window.handleChartInteractionStart();
+      }
+    });
+    
+    // 监听鼠标滚轮事件（缩放）
+    qxnlzhqEchartsInstance.on('mousewheel', () => {
+      if (window.handleChartInteractionStart) {
+        window.handleChartInteractionStart();
+      }
+    });
+    
+    // 监听鼠标按下事件（拖拽开始）
+    qxnlzhqEchartsInstance.on('mousedown', () => {
+      if (window.handleChartInteractionStart) {
+        window.handleChartInteractionStart();
+      }
+    });
+    
+    // 监听鼠标释放事件（拖拽结束）
+    qxnlzhqEchartsInstance.on('mouseup', () => {
+      if (window.handleChartInteractionEnd) {
+        window.handleChartInteractionEnd();
+      }
+    });
+    
+    // 监听图表点击事件
+    qxnlzhqEchartsInstance.on('click', () => {
+      if (window.handleChartInteractionStart) {
+        window.handleChartInteractionStart();
+      }
+    });
+  }

  // 防抖函数，避免频繁触发resize
  const debounce = (func, wait) => {
--- a/src/views/components/emotionDecod.vue
+++ b/src/views/components/emotionDecod.vue
@ -412,6 +412,44 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
  }
  KlineCanvsChart = echarts.init(KlineCanvs.value);
  KlineCanvsChart.setOption(KlineOption);
+  
+  // 添加图表交互事件监听器
+  if (KlineCanvsChart) {
+    // 监听数据缩放事件
+    KlineCanvsChart.on('dataZoom', () => {
+      if (window.handleChartInteractionStart) {
+        window.handleChartInteractionStart();
+      }
+    });
+    
+    // 监听鼠标滚轮事件（缩放）
+    KlineCanvsChart.on('mousewheel', () => {
+      if (window.handleChartInteractionStart) {
+        window.handleChartInteractionStart();
+      }
+    });
+    
+    // 监听鼠标按下事件（拖拽开始）
+    KlineCanvsChart.on('mousedown', () => {
+      if (window.handleChartInteractionStart) {
+        window.handleChartInteractionStart();
+      }
+    });
+    
+    // 监听鼠标释放事件（拖拽结束）
+    KlineCanvsChart.on('mouseup', () => {
+      if (window.handleChartInteractionEnd) {
+        window.handleChartInteractionEnd();
+      }
+    });
+    
+    // 监听图表点击事件
+    KlineCanvsChart.on('click', () => {
+      if (window.handleChartInteractionStart) {
+        window.handleChartInteractionStart();
+      }
+    });
+  }

  // 防抖函数，避免频繁触发resize
  const debounce = (func, wait) => {
--- a/src/views/components/emotionalBottomRadar.vue
+++ b/src/views/components/emotionalBottomRadar.vue
@ -676,6 +676,44 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {

  // 使用配置项显示图表
  bottomRadarChart.setOption(option)
+  
+  // 添加图表交互事件监听器
+  if (bottomRadarChart) {
+    // 监听数据缩放事件
+    bottomRadarChart.on('dataZoom', () => {
+      if (window.handleChartInteractionStart) {
+        window.handleChartInteractionStart();
+      }
+    });
+    
+    // 监听鼠标滚轮事件（缩放）
+    bottomRadarChart.on('mousewheel', () => {
+      if (window.handleChartInteractionStart) {
+        window.handleChartInteractionStart();
+      }
+    });
+    
+    // 监听鼠标按下事件（拖拽开始）
+    bottomRadarChart.on('mousedown', () => {
+      if (window.handleChartInteractionStart) {
+        window.handleChartInteractionStart();
+      }
+    });
+    
+    // 监听鼠标释放事件（拖拽结束）
+    bottomRadarChart.on('mouseup', () => {
+      if (window.handleChartInteractionEnd) {
+        window.handleChartInteractionEnd();
+      }
+    });
+    
+    // 监听图表点击事件
+    bottomRadarChart.on('click', () => {
+      if (window.handleChartInteractionStart) {
+        window.handleChartInteractionStart();
+      }
+    });
+  }

  // 应用响应式样式
  if (bottomRadarRef.value) {
--- a/src/views/components/marketTemperature.vue
+++ b/src/views/components/marketTemperature.vue
@ -678,6 +678,45 @@ function initChart(raw, klineDataRawValue, WDRLValue) {
      },
    ],
  });
+  
+  // 添加图表交互事件监听器
+  if (chartInstance) {
+    // 监听数据缩放事件
+    chartInstance.on('dataZoom', () => {
+      if (window.handleChartInteractionStart) {
+        window.handleChartInteractionStart();
+      }
+    });
+    
+    // 监听鼠标滚轮事件（缩放）
+    chartInstance.on('mousewheel', () => {
+      if (window.handleChartInteractionStart) {
+        window.handleChartInteractionStart();
+      }
+    });
+    
+    // 监听鼠标按下事件（拖拽开始）
+    chartInstance.on('mousedown', () => {
+      if (window.handleChartInteractionStart) {
+        window.handleChartInteractionStart();
+      }
+    });
+    
+    // 监听鼠标释放事件（拖拽结束）
+    chartInstance.on('mouseup', () => {
+      if (window.handleChartInteractionEnd) {
+        window.handleChartInteractionEnd();
+      }
+    });
+    
+    // 监听图表点击事件
+    chartInstance.on('click', () => {
+      if (window.handleChartInteractionStart) {
+        window.handleChartInteractionStart();
+      }
+    });
+  }
+  
  // 防抖函数，避免频繁触发resize
  const debounce = (func, wait) => {
    let timeout;
--- a/src/views/homePage.vue
+++ b/src/views/homePage.vue
@ -370,6 +370,8 @@ const aiEmotionHeightObserver = ref(null);
 const isAiEmotionAutoScrollEnabled = ref(false);
 const isAiEmotionUserScrolling = ref(false); // 用户是否正在手动滚动
 const aiEmotionScrollTimer = ref(null); // 滚动检测定时器
+const isChartInteracting = ref(false); // 图表是否正在交互
+const chartInteractionTimer = ref(null); // 图表交互检测定时器

 // 获取当前活动页面的滚动容器
 const getCurrentScrollContainer = () => {
@ -406,7 +408,7 @@ const throttledSmoothScrollToBottom = _.throttle(smoothScrollToBottom, 300, {

 // AiEmotion页面自动滚动到底部的防抖函数
 const debouncedAiEmotionScrollToBottom = _.debounce(() => {
-  if (activeTab.value === 'AiEmotion' && isAiEmotionAutoScrollEnabled.value && !isAiEmotionUserScrolling.value) {
+  if (activeTab.value === 'AiEmotion' && isAiEmotionAutoScrollEnabled.value && !isAiEmotionUserScrolling.value && !isChartInteracting.value) {
    const container = tabContentAiEmotion.value;
    if (container) {
      container.scrollTop = container.scrollHeight - container.offsetHeight;
@ -423,7 +425,7 @@ const startAiEmotionHeightObserver = () => {
  
  // 创建ResizeObserver监听页面内容变化
  aiEmotionHeightObserver.value = new ResizeObserver((entries) => {
-    if (isAiEmotionAutoScrollEnabled.value && activeTab.value === 'AiEmotion') {
+    if (isAiEmotionAutoScrollEnabled.value && activeTab.value === 'AiEmotion' && !isChartInteracting.value) {
      debouncedAiEmotionScrollToBottom();
    }
  });
@ -454,7 +456,7 @@ const startAiEmotionHeightObserver = () => {
      }
    });
    
-    if (shouldScroll && isAiEmotionAutoScrollEnabled.value && activeTab.value === 'AiEmotion') {
+    if (shouldScroll && isAiEmotionAutoScrollEnabled.value && activeTab.value === 'AiEmotion' && !isChartInteracting.value) {
      debouncedAiEmotionScrollToBottom();
    }
  });
@ -500,6 +502,34 @@ const handleAiEmotionUserScroll = () => {
  // }, 2000);
 };

+// 图表交互状态管理
+const handleChartInteractionStart = () => {
+  console.log("图表交互开始，临时禁用自动滚动");
+  isChartInteracting.value = true;
+  
+  // 清除之前的定时器
+  if (chartInteractionTimer.value) {
+    clearTimeout(chartInteractionTimer.value);
+  }
+};
+
+const handleChartInteractionEnd = () => {
+  // 清除之前的定时器
+  if (chartInteractionTimer.value) {
+    clearTimeout(chartInteractionTimer.value);
+  }
+  
+  // 设置定时器，1秒后恢复自动滚动
+  chartInteractionTimer.value = setTimeout(() => {
+    isChartInteracting.value = false;
+    console.log("图表交互结束，恢复自动滚动");
+  }, 1000);
+};
+
+// 暴露图表交互管理函数给全局使用
+window.handleChartInteractionStart = handleChartInteractionStart;
+window.handleChartInteractionEnd = handleChartInteractionEnd;
+
 // 处理AiEmotion页面的滚动请求
 const handleAiEmotionScrollToBottom = () => {
  if (activeTab.value === 'AiEmotion') {
@ -1001,6 +1031,17 @@ onUnmounted(() => {
  }
  // 清理AiEmotion页面的高度监听器
  stopAiEmotionHeightObserver();
+  
+  // 清理图表交互相关的定时器和全局函数
+   if (chartInteractionTimer.value) {
+     clearTimeout(chartInteractionTimer.value);
+   }
+   if (window.handleChartInteractionStart) {
+     delete window.handleChartInteractionStart;
+   }
+   if (window.handleChartInteractionEnd) {
+     delete window.handleChartInteractionEnd;
+   }
 });
 </script>