金轮旋转的逻辑完成

src/views/AiEmotion.vue

@@ -2,10 +2,10 @@
     <div class="ai-emotion-container">
         <!-- 金轮 -->
         <div class="golden-wheel">
-            <img src="@/assets/img/AiEmotion/金轮.png" alt="金轮图标" class="rotating-image">
+            <img src="@/assets/img/AiEmotion/金轮.png" alt="金轮图标" :class="{ 'rotating-image': isRotating }">
         </div>
         <!-- 消息显示区域 -->
-        <div class="user-input-display">
+        <div class="user-input-display" ref="userInputDisplayRef">
             <div v-for="(message, index) in messages" :key="index" class="message-container">
                 <!-- 用户输入内容 -->
                 <div v-if="message.sender === 'user'" class="message-bubble user-message">
@@ -18,10 +18,14 @@
             </div>
         </div>
         <!-- 输入框和发送按钮 -->
-        <div class="input-container fixed-bottom">
+        <footer class="input-container fixed-bottom">
             <input type="text" v-model="userInput" placeholder="请输入内容..." class="input-box" />
             <button @click="sendMessage" class="send-button">发送</button>
-        </div>
+        </footer>
+        <!-- <div class="input-container fixed-bottom">
+            <input type="text" v-model="userInput" placeholder="请输入内容..." class="input-box" />
+            <button @click="sendMessage" class="send-button">发送</button>
+        </div> -->
     </div>
 
 
@@ -30,7 +34,7 @@
         <!-- 四维矩阵图 -->
         <div class="class02">
             <div class="span01">
-                {{ stockName }}
+                {{ stockName }}{{ stockName ? '量子四维矩阵图' : '' }}
             </div>
             <span class="span02">{{ displayDate }}</span>
         </div>
@@ -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();
+});
 
 </script>
 
@@ -578,9 +623,9 @@ function renderCharts(data) {
 }
 
 .span02 {
-    margin-left: 500px;
     font-size: 1.5rem;
     color: white;
+    float: right;
 }
 
 .span01 {