修改样式

src/views/AiEmotion.vue

@@ -34,8 +34,16 @@
         <div class="class00">
             <!-- 四维矩阵图 -->
             <div class="class02">
-                <div class="span01">
-                    {{ stockName }}{{ stockName ? '量子四维矩阵图' : '' }}
+                <div class="container">
+                    <img class="item" :src="item" alt="思维矩阵图片" />
+                    <div class="span01" style="
+        position: relative;
+        top: 0.5rem;
+        left: -14rem;
+        transform: translate(-50%, -50%);
+    ">
+                        {{ stockName }}{{ stockName ? '量子四维矩阵图' : '' }}
+                    </div>
                 </div>
                 <span class="span02">{{ displayDate }}</span>
             </div>
@@ -45,22 +53,26 @@
             <!-- 温度计图表 -->
             <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="content1">
+                        <img class="img01" src="@/assets/img/AiEmotion/温度计.png" alt="温度计图标">
+                        <span class="title1">股票温度计</span>
+                    </div>
                     <div class="div00">
-                        <div class="div01">galg</div>
-                        <div class="div02">hkjkl</div>
+                        <div class="div01">个股温度：{{ data1 ?? "NA" }}</div>
+                        <div class="div02">大盘温度：{{ data2 }}</div>
                     </div>
                 </div>
                 <marketTemperature ref="marketTemperatureRef" />
             </div>
         </div>
-            <div class="class0301">
-                <img src="@/assets/img/AiEmotion/L2.png" alt="情绪解码图标">
-            </div>
+        <div class="class0301">
+            <img src="@/assets/img/AiEmotion/L2.png" alt="情绪解码图标">
+        </div>
         <!-- 情绪解码器图表 -->
         <div class="class04">
             <div class="class0401">
-                <img src='@/assets/img/AiEmotion/emotionDecod.png' alt="情绪解码器图标">
+                <img class="img02" src='@/assets/img/AiEmotion/emotionDecod.png' alt="情绪解码器图标">
+                <span class="title2">情绪解码器</span>
             </div>
             <div class="class0402">
                 <emotionDecod ref="emotionDecodRef"></emotionDecod>
@@ -72,7 +84,8 @@
         <!-- 情绪探底雷达图表 -->
         <div class="class05">
             <div class="class0502">
-                <img src="@/assets/img/AiEmotion/探底雷达.png" alt="探底雷达图表">
+                <img class="img03" src="@/assets/img/AiEmotion/探底雷达.png" alt="探底雷达图表">
+                <span class="title3">情绪探底雷达</span>
             </div>
             <div class="class0503">
                 <emotionalBottomRadar ref="emotionalBottomRadarRef"></emotionalBottomRadar>
@@ -84,9 +97,12 @@
         <!-- 情绪能量转化器图表 -->
         <div class="class06">
             <div class="class0601">
-                <img src="@/assets/img/AiEmotion/能量转化器.png" alt="能量转化器图标">
+                <img class="img04" src="@/assets/img/AiEmotion/能量转化器.png" alt="能量转化器图标">
+                <span class="title4">情绪能量转化器</span>
+            </div>
+            <div class="class0603">
+                <emoEnergyConverter ref="emoEnergyConverterRef"></emoEnergyConverter>
             </div>
-            <emoEnergyConverter ref="emoEnergyConverterRef"></emoEnergyConverter>
         </div>
         <!-- 核心看点 -->
         <div class="class0702">
@@ -134,6 +150,7 @@
 import { ref, reactive } from 'vue';
 import { getReplyAPI } from '@/api/AiEmotionApi.js'; // 导入工作流接口方法
 import axios from 'axios';
+import item from '@/assets/img/AiEmotion/bk01.png'; // 导入思维矩阵图片
 import emotionDecod from '@/views/components/emotionDecod.vue'; // 导入情绪解码组件
 import emotionalBottomRadar from '@/views/components/emotionalBottomRadar.vue'; // 导入情绪探底雷达图组件
 import emoEnergyConverter from '@/views/components/emoEnergyConverter.vue'; // 导入情绪能量转化器组件
@@ -151,9 +168,10 @@ const displayDate = ref(''); // 用于存储显示的日期
 const isPageLoaded = ref(false); // 控制页面是否显示
 const isRotating = ref(false);//控制旋转
 const userInputDisplayRef = ref(null);//消息区域的引用
-
+const data1 = ref(null); // 个股温度
+const data2 = ref(); // 大盘温度
 //导出方法供外部使用
-defineExpose({handleSendMessage})
+defineExpose({ handleSendMessage })
 
 // 从本地存储中加载对话历史的方法
 const loadMessagesFromLocalStorage = () => {
@@ -316,7 +334,16 @@ async function fetchData(code, market) {
                 sender: 'ai',
                 text: `股票数据已成功获取`,
             });
-
+            // 数据清洗并四舍五入xx
+            const lastTwoNumbers = stockDataResponse.data.GSWDJ.map(([date, num1, num2]) => [
+                date,
+                Math.round(num1),
+                Math.round(num2)
+            ]).at(-1);
+            console.log('111111111111111111111111111')
+            // 取最后一条数据
+            data1.value = lastTwoNumbers[1] // 个股温度
+            data2.value = lastTwoNumbers[2] // 市场温度
             // 滚动到最新消息
             nextTick(() => {
                 if (userInputDisplayRef.value) {
@@ -401,8 +428,7 @@ onMounted(() => {
 </script>
 
 <style scoped>
-
-.class003 .div02{
+.class003 .div02 {
     background-image: url('@/assets/img/AiEmotion/redBorder.png');
     background-repeat: no-repeat;
     background-size: 100% 100%;
@@ -415,7 +441,8 @@ onMounted(() => {
     font-size: 24px;
     color: white;
 }
-.class003 .div01{
+
+.class003 .div01 {
     background-image: url('@/assets/img/AiEmotion/blueBorder.png');
     background-repeat: no-repeat;
     background-size: 100% 100%;
@@ -428,6 +455,7 @@ onMounted(() => {
     font-size: 24px;
     color: white;
 }
+
 /* 定义旋转动画 */
 @keyframes rotate {
     from {
@@ -504,8 +532,8 @@ onMounted(() => {
 }
 
 .class0503 {
-    width: 80%;
-    margin: 0 auto;
+    min-width: 100%;
+    /* margin: 0 auto; */
 
 }
 
@@ -515,16 +543,45 @@ onMounted(() => {
 }
 
 .class0601 {
-    padding-top: 10rem;
+    padding-top: 5rem;
     text-align: center;
+    padding-bottom: 6rem;
+}
+
+.class0603 {
+    min-width: 100%;
+    /* margin: 0 auto; */
+
 }
 
 .class0502 {
     padding-top: 5rem;
     text-align: center;
-    padding-bottom: 6rem;
+        display: flex;
+    flex-direction: column;
+    /* 竖向排列元素 */
+    gap: 1rem;
+    margin-left: 2rem;
+}
+.class0601{
+       padding-top: 5rem;
+    text-align: center;
+        display: flex;
+    flex-direction: column;
+    /* 竖向排列元素 */
+    gap: 1rem;
+    margin-left: 2rem;
+}
+.img03{
+           width: 10rem;
+    height: 10rem;
+    margin-left: 40rem;
+}
+.img04{
+               width: 10rem;
+    height: 10rem;
+    margin-left: 40rem;
 }
-
 .class0701 {
     margin: 0 auto;
     width: fit-content;
@@ -553,8 +610,38 @@ onMounted(() => {
 .class0401 {
     padding-top: 5rem;
     text-align: center;
+        display: flex;
+    flex-direction: column;
+    /* 竖向排列元素 */
+    gap: 1rem;
+    margin-left: 2rem;
 }
+.class0502{
 
+}
+.img02{
+       width: 10rem;
+    height: 10rem;
+    margin-left: 40rem;
+}
+.title2{
+        color: white;
+    font-size: 2rem;
+    font-weight: bold;
+    margin-left: -4rem;
+}
+.title3{
+           color: white;
+    font-size: 2rem;
+    font-weight: bold;
+    margin-left: -4rem;
+}
+.title4{
+           color: white;
+    font-size: 2rem;
+    font-weight: bold;
+    margin-left: -4rem;
+}
 .class09 {
     text-align: center;
 }
@@ -644,8 +731,14 @@ onMounted(() => {
     min-height: 70rem;
     /* 设置最小高度，确保图片显示 */
     margin: 0 auto;
+    /* display: flex;
+    flex-direction:row;
+      align-items: center;  
+    padding: 1rem;
+    gap: 1rem;    */
 }
-.class00{
+
+.class00 {
     background-size: 100% 100%;
     /* 确保背景图片完整显示 */
     background-repeat: no-repeat;
@@ -659,14 +752,47 @@ onMounted(() => {
     margin: 0 auto;
 }
 
+.content1 {
+    display: flex;
+    flex-direction: column;
+    /* 竖向排列元素 */
+    gap: 1rem;
+    margin-left: 2rem;
+}
+
+.title1 {
+    color: white;
+    font-size: 2.5rem;
+    font-weight: bold;
+    margin-left: -1rem;
+
+}
+
+.img01 {
+    width: 10rem;
+    height: 10rem;
+}
+
+.div00 {
+    display: flex;
+    flex-direction: column;
+    /* 竖向排列元素 */
+    margin-left: 30rem;
+    gap: 1rem;
+    margin-top: -10rem;
+    width: 70rem;
+    height: 10rem;
+}
+
 .span02 {
     font-size: 1.5rem;
     color: white;
     float: right;
+    margin-top: -90px;
 }
 
 .span01 {
-    background-image: url('@/assets/img/AiEmotion/bk01.png');
+    /* background-image: url('@/assets/img/AiEmotion/bk01.png'); */
     /* 使用导入的背景图片 */
     background-size: cover;
     /* 背景图片覆盖整个容器 */
@@ -686,6 +812,7 @@ onMounted(() => {
     /* 增加字体大小以便更清晰显示股票名称 */
     text-align: center;
     /* 文字居中 */
+
 }
 
 .class01 {

src/views/components/emoEnergyConverter.vue

@@ -439,7 +439,8 @@ onBeforeUnmount(() => {
 </script>
 <style scoped>
 #qxnlzhqEcharts {
-  width: 100%;
+  min-width: 100%;
   height: 700px;
+  margin-left: -1rem;
 }
 </style>

src/views/components/emotionDecod.vue

@@ -340,6 +340,7 @@ onBeforeUnmount(() => {
   // 组件卸载时销毁图表
   if (KlineCanvsChart) {
     KlineCanvsChart.dispose();
+    
   }
 });
 </script>

src/views/components/emotionalBottomRadar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="bottomRadarRef" id="bottomRadarChart"></div>
+  <div ref="bottomRadarRef" id="bottomRadarChart" style="heigh: 100%; width: 100%;"></div>
 </template>
 
 <script setup>
@@ -554,8 +554,10 @@ onBeforeUnmount(() => {
 
 <style>
 #bottomRadarChart{
-  width: 100%; 
-  height: 1040px;
+  min-width: 100%; 
+  /* min-height: 100%; */
+  height:1040px;
+
   /* padding-bottom: 3rem; */
 }
 </style>