From 61b4f98c4e9ae4bed2dacdc79331dcbb9d142b39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=8B=E6=9D=B0?= Date: Sun, 8 Jun 2025 17:15:27 +0800 Subject: [PATCH] =?UTF-8?q?=E9=87=91=E8=BD=AE=E6=97=8B=E8=BD=AC=E7=9A=84?= =?UTF-8?q?=E9=80=BB=E8=BE=91=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/AiEmotion.vue | 213 +++++++++++++++++++++++++++++------------------- 1 file changed, 129 insertions(+), 84 deletions(-) diff --git a/src/views/AiEmotion.vue b/src/views/AiEmotion.vue index ffb4298..5b73041 100644 --- a/src/views/AiEmotion.vue +++ b/src/views/AiEmotion.vue @@ -2,10 +2,10 @@
- 金轮图标 + 金轮图标
-
+
@@ -18,10 +18,14 @@
-
+
-
+ +
@@ -30,7 +34,7 @@
- {{ stockName }} + {{ stockName }}{{ stockName ? '量子四维矩阵图' : '' }}
{{ displayDate }}
@@ -135,7 +139,17 @@ const userInput = ref(''); const messages = ref([]); const displayDate = ref(''); // 用于存储显示的日期 const isPageLoaded = ref(false); // 控制页面是否显示 +const isRotating = ref(false);//控制旋转 +const userInputDisplayRef = ref(null);//消息区域的引用 +// 触发图片旋转的方法 +function startImageRotation() { + isRotating.value = true; + // 如果你想在一段时间后停止旋转，可以添加以下代码 + setTimeout(() => { + isRotating.value = false; + }, 5000); // 5 秒后停止旋转 +} // 更新 span01 中股票名字的方法 function updateSpan01() { nextTick(() => { @@ -147,7 +161,7 @@ function updateSpan01() { } -// 请求工作流接口 +// 发送消息方法 async function sendMessage() { console.log('发送内容:', userInput.value); @@ -163,6 +177,16 @@ async function sendMessage() { text: '数据加载中，请稍候...' }); + // 滚动到最新消息 + nextTick(() => { + if (userInputDisplayRef.value) { + userInputDisplayRef.value.scrollTop = userInputDisplayRef.value.scrollHeight; + } + }); + + // 触发图片旋转 + isRotating.value = true; + try { // 调用工作流接口 const params = { @@ -212,13 +236,22 @@ async function sendMessage() { sender: 'ai', text: '工作流接口请求失败，请稍后再试。', }); + } finally { + // 停止图片旋转 + isRotating.value = false; } } else { - console.warn('用户输入内容为空，无法发送请求'); messages.value.push({ sender: 'ai', text: '请输入内容后再发送。', }); + + // 滚动到最新消息 + nextTick(() => { + if (userInputDisplayRef.value) { + userInputDisplayRef.value.scrollTop = userInputDisplayRef.value.scrollHeight; + } + }); } } @@ -245,19 +278,24 @@ async function fetchData(code, market) { ); const stockDataResponse = stockDataResult.data; // 获取返回的数据 - console.log('图表数据接口返回数据:', stockDataResponse); + console.log('图表数据接口返回数据:', stockDataResponse.data); - if (stockDataResponse.data) { + if (stockDataResponse.code === 200 && stockDataResponse.data) { messages.value.push({ sender: 'ai', - text: `股票数据已成功获取: ${JSON.stringify(stockDataResponse.data)}`, + text: `股票数据已成功获取`, + }); + + // 滚动到最新消息 + nextTick(() => { + if (userInputDisplayRef.value) { + userInputDisplayRef.value.scrollTop = userInputDisplayRef.value.scrollHeight; + } }); console.log('1111111111111111111111') // 调用渲染图表的方法 renderCharts(stockDataResponse.data); console.log('2222222222222222222222') - - // 设置当天日期 const today = new Date(); const year = today.getFullYear(); @@ -268,14 +306,18 @@ async function fetchData(code, market) { // 数据和图表加载完成，显示页面 isPageLoaded.value = true; } else { - console.error('图表数据接口返回数据不完整'); messages.value.push({ sender: 'ai', text: '图表数据接口返回数据不完整，请稍后再试。', }); + // 滚动到最新消息 + nextTick(() => { + if (userInputDisplayRef.value) { + userInputDisplayRef.value.scrollTop = userInputDisplayRef.value.scrollHeight; + } + }); } } catch (error) { - console.error('请求图表数据接口失败:', error); messages.value.push({ sender: 'ai', text: '图表数据接口请求失败，请稍后再试。', @@ -284,78 +326,81 @@ async function fetchData(code, market) { } // 渲染组件图表的方法 -// function renderCharts(data) { -// nextTick(() => { -// // 渲染股市温度计图表 -// if (marketTemperatureRef.value && data.GSWDJ) { -// console.log('开始渲染股市温度计图表'); -// console.log('股市温度计数据', data.GSWDJ) -// marketTemperatureRef.value.initChart(data.GSWDJ, data.KLine20, data.WDRL); -// console.log('股市温度计图表已渲染'); -// } -// // 渲染情绪解码器图表 -// if (emotionDecodRef.value && data.QXJMQ) { -// console.log('开始渲染情绪解码器图表'); -// console.log('情绪解码器数据', data.QXJMQ) -// emotionDecodRef.value.initQXNLZHEcharts(data.KLine20, data.QXJMQ); -// console.log('情绪解码器图表已渲染'); -// } -// // 渲染情绪探底雷达图表 -// if (emotionalBottomRadarRef.value && data.QXTDLD) { -// console.log('开始渲染情绪探底雷达图表'); -// console.log('数据', data.QXTDLD) -// emotionalBottomRadarRef.value.initEmotionalBottomRadar(data.KLine20, data.QXTDLD); -// console.log('情绪探底雷达图表已渲染'); -// } -// // 渲染情绪能量转化器图表 -// if (emoEnergyConverterRef.value && data.QXNLZHQ) { -// console.log('开始渲染情绪能量转化器图表'); -// console.log('KLine20:', data.KLine20); -// console.log('QXNLZHQ:', data.QXNLZHQ); -// emoEnergyConverterRef.value.initQXNLZHEcharts(data.KLine20, data.QXNLZHQ); -// console.log('情绪能量转化器图表已渲染'); -// } - -// }); -// } function renderCharts(data) { - return new Promise((resolve) => { - nextTick(() => { - // 渲染股市温度计图表 - if (marketTemperatureRef.value && data.GSWDJ) { - console.log('开始渲染股市温度计图表'); - console.log('股市温度计数据', data.GSWDJ) - marketTemperatureRef.value.initChart(data.GSWDJ, data.KLine20, data.WDRL); - console.log('股市温度计图表已渲染'); - } - // 渲染情绪解码器图表 - if (emotionDecodRef.value && data.QXJMQ) { - console.log('开始渲染情绪解码器图表'); - console.log('情绪解码器数据', data.QXJMQ) - emotionDecodRef.value.initQXNLZHEcharts(data.KLine20, data.QXJMQ); - console.log('情绪解码器图表已渲染'); - } - // 渲染情绪探底雷达图表 - if (emotionalBottomRadarRef.value && data.QXTDLD) { - console.log('开始渲染情绪探底雷达图表'); - console.log('数据', data.QXTDLD) - emotionalBottomRadarRef.value.initEmotionalBottomRadar(data.KLine20, data.QXTDLD); - console.log('情绪探底雷达图表已渲染'); - } - // 渲染情绪能量转化器图表 - if (emoEnergyConverterRef.value && data.QXNLZHQ) { - console.log('开始渲染情绪能量转化器图表'); - console.log('KLine20:', data.KLine20); - console.log('QXNLZHQ:', data.QXNLZHQ); - emoEnergyConverterRef.value.initQXNLZHEcharts(data.KLine20, data.QXNLZHQ); - console.log('情绪能量转化器图表已渲染'); - } - // 图表渲染完成，resolve 承诺 - resolve(); - }); + nextTick(() => { + // 渲染股市温度计图表 + if (marketTemperatureRef.value && data.GSWDJ) { + console.log('开始渲染股市温度计图表'); + console.log('股市温度计数据', data.GSWDJ) + marketTemperatureRef.value.initChart(data.GSWDJ, data.KLine20, data.WDRL); + console.log('股市温度计图表已渲染'); + } + // 渲染情绪解码器图表 + if (emotionDecodRef.value && data.QXJMQ) { + console.log('开始渲染情绪解码器图表'); + console.log('情绪解码器数据', data.QXJMQ) + emotionDecodRef.value.initQXNLZHEcharts(data.KLine20, data.QXJMQ); + console.log('情绪解码器图表已渲染'); + } + // 渲染情绪探底雷达图表 + if (emotionalBottomRadarRef.value && data.QXTDLD) { + console.log('开始渲染情绪探底雷达图表'); + console.log('数据', data.QXTDLD) + emotionalBottomRadarRef.value.initEmotionalBottomRadar(data.KLine20, data.QXTDLD); + console.log('情绪探底雷达图表已渲染'); + } + // 渲染情绪能量转化器图表 + if (emoEnergyConverterRef.value && data.QXNLZHQ) { + console.log('开始渲染情绪能量转化器图表'); + console.log('KLine20:', data.KLine20); + console.log('QXNLZHQ:', data.QXNLZHQ); + emoEnergyConverterRef.value.initQXNLZHEcharts(data.KLine20, data.QXNLZHQ); + console.log('情绪能量转化器图表已渲染'); + } + }); } - +// function renderCharts(data) { +// return new Promise((resolve) => { +// nextTick(() => { +// // 渲染股市温度计图表 +// if (marketTemperatureRef.value && data.GSWDJ) { +// console.log('开始渲染股市温度计图表'); +// console.log('股市温度计数据', data.GSWDJ) +// marketTemperatureRef.value.initChart(data.GSWDJ, data.KLine20, data.WDRL); +// console.log('股市温度计图表已渲染'); +// } +// // 渲染情绪解码器图表 +// if (emotionDecodRef.value && data.QXJMQ) { +// console.log('开始渲染情绪解码器图表'); +// console.log('情绪解码器数据', data.QXJMQ) +// emotionDecodRef.value.initQXNLZHEcharts(data.KLine20, data.QXJMQ); +// console.log('情绪解码器图表已渲染'); +// } +// // 渲染情绪探底雷达图表 +// if (emotionalBottomRadarRef.value && data.QXTDLD) { +// console.log('开始渲染情绪探底雷达图表'); +// console.log('数据', data.QXTDLD) +// emotionalBottomRadarRef.value.initEmotionalBottomRadar(data.KLine20, data.QXTDLD); +// console.log('情绪探底雷达图表已渲染'); +// } +// // 渲染情绪能量转化器图表 +// if (emoEnergyConverterRef.value && data.QXNLZHQ) { +// console.log('开始渲染情绪能量转化器图表'); +// console.log('KLine20:', data.KLine20); +// console.log('QXNLZHQ:', data.QXNLZHQ); +// emoEnergyConverterRef.value.initQXNLZHEcharts(data.KLine20, data.QXNLZHQ); +// console.log('情绪能量转化器图表已渲染'); +// } +// // 图表渲染完成，resolve 承诺 +// resolve(); +// }); +// }); +// } +// 页面挂载完成后触发图片旋转 +onMounted(() => { + startImageRotation(); +}); @@ -578,9 +623,9 @@ function renderCharts(data) { } .span02 { - margin-left: 500px; font-size: 1.5rem; color: white; + float: right; } .span01 {