增加温度计红蓝框

src/views/AiEmotion.vue

@@ -44,6 +44,13 @@
             </div>
             <!-- 温度计图表 -->
             <div class="class03">
+                <div class="class003" style="padding-top: 7rem;padding-left: 12rem;">
+                    <img src="@/assets/img/AiEmotion/温度计.png" alt="温度计图标" style="float: left;padding-left: 5rem;">
+                    <div class="div00">
+                        <div class="div01">galg</div>
+                        <div class="div02">hkjkl</div>
+                    </div>
+                </div>
                 <marketTemperature ref="marketTemperatureRef" />
             </div>
         </div>
@@ -131,6 +138,7 @@ import emotionDecod from '@/views/components/emotionDecod.vue'; // 导入情绪
 import emotionalBottomRadar from '@/views/components/emotionalBottomRadar.vue'; // 导入情绪探底雷达图组件
 import emoEnergyConverter from '@/views/components/emoEnergyConverter.vue'; // 导入情绪能量转化器组件
 import marketTemperature from '@/views/components/marketTemperature.vue';
+import blueBorderImg from '@/assets/img/AiEmotion/blueBorder.png' //导入蓝色背景框图片
 
 const stockName = ref(''); // 存储股票名称
 const marketTemperatureRef = ref(null); // 引用市场温度计组件
@@ -206,7 +214,7 @@ async function handleSendMessage(input) {
         isRotating.value = true;
 
         try {
-            // 调用工作流接口
+            // 用来调用工作流接口的参数
             const params = {
                 content: userMessage.text,
                 userData: {
@@ -299,9 +307,10 @@ async function fetchData(code, market) {
             }
         );
 
-        const stockDataResponse = stockDataResult.data; // 获取返回的数据
+        const stockDataResponse = stockDataResult.data; // 获取返回所有的数据
         console.log('图表数据接口返回数据:', stockDataResponse.data);
 
+
         if (stockDataResponse.code === 200 && stockDataResponse.data) {
             messages.value.push({
                 sender: 'ai',
@@ -382,43 +391,7 @@ function renderCharts(data) {
 
     });
 }
-// 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();
@@ -428,6 +401,33 @@ onMounted(() => {
 </script>
 
 <style scoped>
+
+.class003 .div02{
+    background-image: url('@/assets/img/AiEmotion/redBorder.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    width: 35%;
+    min-height: 40px;
+    float: left;
+    margin-left: 100px;
+    margin-top: 30px;
+    text-align: center;
+    font-size: 24px;
+    color: white;
+}
+.class003 .div01{
+    background-image: url('@/assets/img/AiEmotion/blueBorder.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    width: 35%;
+    min-height: 40px;
+    float: left;
+    margin-left: 100px;
+    text-align: center;
+    margin-top: 10px;
+    font-size: 24px;
+    color: white;
+}
 /* 定义旋转动画 */
 @keyframes rotate {
     from {
@@ -632,7 +632,7 @@ onMounted(() => {
 .class03 {
     background-image: url('@/assets/img/AiEmotion/bk03.png');
     /* 使用导入的背景图片 */
-    background-size: cover;
+    background-size: 100% 100%;
     /* 确保背景图片完整显示 */
     background-repeat: no-repeat;
     /* 防止背景图片重复 */