From b4db8a05a44d2a4b31003ceb4a3c88ea362c3a2f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=8B=E6=9D=B0?= Date: Sat, 5 Jul 2025 15:56:37 +0800 Subject: [PATCH] =?UTF-8?q?=E5=BD=93=E6=8E=A5=E5=8F=A3=E8=BF=94=E5=9B=9E?= =?UTF-8?q?=E6=95=B0=E6=8D=AE=E4=B8=8D=E8=B6=B3=E6=97=B6=E4=B8=8D=E8=BF=9B?= =?UTF-8?q?=E8=A1=8C=E5=9B=BE=E8=A1=A8=E6=B8=B2=E6=9F=93=EF=BC=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/AiEmotion.vue | 164 ++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 132 insertions(+), 32 deletions(-) diff --git a/src/views/AiEmotion.vue b/src/views/AiEmotion.vue index 8e03cfb..d930dfa 100644 --- a/src/views/AiEmotion.vue +++ b/src/views/AiEmotion.vue @@ -45,11 +45,11 @@ {{ displayDate }} -
+
情绪监控图标
-
+
温度计图标 @@ -63,11 +63,11 @@
-
+
情绪解码图标
-
+
情绪解码器图标 情绪解码器 @@ -76,11 +76,11 @@
-
+
情绪推演图标
-
+
探底雷达图表 情绪探底雷达 @@ -89,11 +89,11 @@
-
+
情绪套利
-
+
能量转化器图标 情绪能量转化器 @@ -277,6 +277,14 @@ const moduleVisibility = ref({ four: false, disclaimer: false }); + +// 图表组件显示状态 +const chartVisibility = ref({ + marketTemperature: false, + emotionDecod: false, + emotionalBottomRadar: false, + emoEnergyConverter: false +}); const typewriterTimers = ref([]); // 记录每个股票是否已经显示过打字机效果 const stockTypewriterShown = ref(new Map()); @@ -372,6 +380,13 @@ watch(() => emotionStore.stockList, (newStockList) => { four: false, disclaimer: false }; + // 隐藏所有图表组件 + chartVisibility.value = { + marketTemperature: false, + emotionDecod: false, + emotionalBottomRadar: false, + emoEnergyConverter: false + }; console.log('股票列表已清空，页面数据已隐藏'); } }, { deep: true }); @@ -583,6 +598,13 @@ watch(currentStock, (newStock) => { } } else { console.log('股票数据不存在或API数据未加载'); + // 隐藏所有图表组件 + chartVisibility.value = { + marketTemperature: false, + emotionDecod: false, + emotionalBottomRadar: false, + emoEnergyConverter: false + }; } }, { immediate: true }); @@ -1140,36 +1162,114 @@ async function fetchData(code, market, stockName, queryText) { // 渲染组件图表的方法 function renderCharts(data) { + console.log('开始渲染图表，数据:', data); + + // 深拷贝数据避免污染原始数据 + const clonedData = JSON.parse(JSON.stringify(data)); + + // 先设置图表组件显示状态 + chartVisibility.value = { + marketTemperature: !!(clonedData.GSWDJ && clonedData.GSWDJ.length > 0), + emotionDecod: !!(clonedData.QXJMQ && clonedData.QXJMQ.length > 0), + emotionalBottomRadar: !!(clonedData.QXTDLD && clonedData.QXTDLD.length > 0), + emoEnergyConverter: !!(clonedData.QXNLZHQ && clonedData.QXNLZHQ.length > 0) + }; + + console.log('图表显示状态:', chartVisibility.value); + nextTick(() => { - // 添加小延迟确保DOM完全更新 + // 增加延迟确保DOM完全更新和组件完全挂载 setTimeout(() => { try { - // 深拷贝数据避免污染原始数据 - const clonedData = JSON.parse(JSON.stringify(data)); + console.log('图表组件ref状态:', { + marketTemperatureRef: !!marketTemperatureRef.value, + emotionDecodRef: !!emotionDecodRef.value, + emotionalBottomRadarRef: !!emotionalBottomRadarRef.value, + emoEnergyConverterRef: !!emoEnergyConverterRef.value + }); + // 渲染股市温度计图表 - if (marketTemperatureRef.value && clonedData.GSWDJ) { - marketTemperatureRef.value.initChart(clonedData.GSWDJ, clonedData.KLine20, clonedData.WDRL); + if (marketTemperatureRef.value && chartVisibility.value.marketTemperature) { + console.log('开始渲染股市温度计图表'); + console.log('marketTemperatureRef方法:', typeof marketTemperatureRef.value.initChart); + if (typeof marketTemperatureRef.value.initChart === 'function') { + try { + marketTemperatureRef.value.initChart(clonedData.GSWDJ, clonedData.KLine20, clonedData.WDRL); + console.log('股市温度计图表渲染成功'); + } catch (error) { + console.error('股市温度计图表渲染失败:', error); + } + } else { + console.error('marketTemperatureRef.initChart 方法不存在'); + } + } else { + console.log('股市温度计图表未渲染，ref存在:', !!marketTemperatureRef.value, '数据存在:', chartVisibility.value.marketTemperature); } + // 渲染情绪解码器图表 - if (emotionDecodRef.value && clonedData.QXJMQ) { - emotionDecodRef.value.initQXNLZHEcharts(clonedData.KLine20, clonedData.QXJMQ); + if (emotionDecodRef.value && chartVisibility.value.emotionDecod) { + console.log('开始渲染情绪解码器图表'); + console.log('emotionDecodRef方法:', typeof emotionDecodRef.value.initQXNLZHEcharts); + if (typeof emotionDecodRef.value.initQXNLZHEcharts === 'function') { + try { + emotionDecodRef.value.initQXNLZHEcharts(clonedData.KLine20, clonedData.QXJMQ); + console.log('情绪解码器图表渲染成功'); + } catch (error) { + console.error('情绪解码器图表渲染失败:', error); + } + } else { + console.error('emotionDecodRef.initQXNLZHEcharts 方法不存在'); + } + } else { + console.log('情绪解码器图表未渲染，ref存在:', !!emotionDecodRef.value, '数据存在:', chartVisibility.value.emotionDecod); } + // 渲染情绪探底雷达图表 - if (emotionalBottomRadarRef.value && clonedData.QXTDLD) { - emotionalBottomRadarRef.value.initEmotionalBottomRadar( - clonedData.KLine20, - clonedData.QXTDLD - ); + if (emotionalBottomRadarRef.value && chartVisibility.value.emotionalBottomRadar) { + console.log('开始渲染情绪探底雷达图表'); + console.log('emotionalBottomRadarRef方法:', typeof emotionalBottomRadarRef.value.initEmotionalBottomRadar); + if (typeof emotionalBottomRadarRef.value.initEmotionalBottomRadar === 'function') { + try { + emotionalBottomRadarRef.value.initEmotionalBottomRadar( + clonedData.KLine20, + clonedData.QXTDLD + ); + console.log('情绪探底雷达图表渲染成功'); + } catch (error) { + console.error('情绪探底雷达图表渲染失败:', error); + } + } else { + console.error('emotionalBottomRadarRef.initEmotionalBottomRadar 方法不存在'); + } + } else { + console.log('情绪探底雷达图表未渲染，ref存在:', !!emotionalBottomRadarRef.value, '数据存在:', chartVisibility.value.emotionalBottomRadar); } + // 渲染情绪能量转化器图表 - if (emoEnergyConverterRef.value && clonedData.QXNLZHQ) { - emoEnergyConverterRef.value.initQXNLZHEcharts(clonedData.KLine20, clonedData.QXNLZHQ); + if (emoEnergyConverterRef.value && chartVisibility.value.emoEnergyConverter) { + console.log('开始渲染情绪能量转化器图表'); + console.log('emoEnergyConverterRef方法:', typeof emoEnergyConverterRef.value.initQXNLZHEcharts); + if (typeof emoEnergyConverterRef.value.initQXNLZHEcharts === 'function') { + try { + emoEnergyConverterRef.value.initQXNLZHEcharts(clonedData.KLine20, clonedData.QXNLZHQ); + console.log('情绪能量转化器图表渲染成功'); + } catch (error) { + console.error('情绪能量转化器图表渲染失败:', error); + } + } else { + console.error('emoEnergyConverterRef.initQXNLZHEcharts 方法不存在'); + } + } else { + console.log('情绪能量转化器图表未渲染，ref存在:', !!emoEnergyConverterRef.value, '数据存在:', chartVisibility.value.emoEnergyConverter); } + + console.log('图表渲染完成'); } catch (error) { + console.error('图表渲染错误:', error); const aiMessage = reactive({ sender: 'ai', text: '图表渲染失败，请重试' }); messages.value.push(aiMessage); } - }, 100); // 100ms延迟确保DOM稳定 + }, 500); // 增加延迟到500ms确保DOM和组件完全稳定 }); } @@ -2064,7 +2164,7 @@ defineExpose({ /* 确保不超出父容器 */ height: auto; /* 高度根据内容动态变化 */ - min-height: 55rem; + /* min-height: 55rem; */ /* 设置最小高度，确保图片显示 */ margin: 0 auto; box-sizing: border-box; @@ -2251,9 +2351,9 @@ defineExpose({ } /* 调整图表容器高度 */ - .class00 { + /* .class00 { min-height: 45rem; - } + } */ .class03 { min-height: 60rem; @@ -2280,9 +2380,9 @@ defineExpose({ } /* 调整图表容器高度 */ - .class00 { + /* .class00 { min-height: 40rem; - } + } */ .class03 { min-height: 55rem; @@ -2446,9 +2546,9 @@ defineExpose({ } /* 调整其他图表容器高度 */ - .class00 { + /* .class00 { min-height: 35rem; - } + } */ .class03 { min-height: 45rem; @@ -2819,9 +2919,9 @@ defineExpose({ } /* 调整图表容器高度适配超小屏幕 */ - .class00 { + /* .class00 { min-height: 25rem; - } + } */ .class03 { min-height: 35rem;