合并代码

src/views/AiEmotion.vue

@@ -36,6 +36,8 @@
         <img src="@/assets/img/AiEmotion/L2.png" alt="情绪解码">
         <!-- 情绪解码器图表 -->
         <div class="class04">
+            <span class="class0401">
+            </span>
             <emotionDecod ref="emotionDecodRef"></emotionDecod>
         </div>
         <img src="@/assets/img/AiEmotion/L3.png" alt="情绪推演">
@@ -67,7 +69,7 @@ import { getReplyAPI } from '@/api/AiEmotionApi.js'; // 导入工作流接口方
 import axios from 'axios';
 import emotionDecod from '@/views/components/emotionDecod.vue'; // 导入情绪解码组件
 import emotionalBottomRadar from '@/views/components/emotionalBottomRadar.vue'; // 导入情绪探底雷达图组件
-import emoEnergyConverter from '@/views/components/emotionalBottomRadar.vue'; // 导入情绪能量转化器组件
+import emoEnergyConverter from '@/views/components/emoEnergyConverter.vue'; // 导入情绪能量转化器组件
 
 
 const emoEnergyConverterRef = ref(null)
@@ -196,6 +198,7 @@ function renderCharts(data) {
         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('情绪能量转化器图表已渲染');
         }
@@ -214,6 +217,18 @@ function renderCharts(data) {
 </script>
 
 <style scoped>
+
+.class0401 {
+    background-image: url('@/assets/img/AiEmotion/解码器.png'); /* 设置背景图片 */
+    background-size: contain; /* 背景图片覆盖整个容器 */
+    background-repeat: no-repeat; /* 防止背景图片重复 */
+    width: 100%; /* 设置容器宽度 */
+    height: 300px; /* 设置容器高度，确保图片显示完整 */
+    display: flex; /* 使用 flex 布局 */
+    justify-content: flex-start; /* 容器内容居左 */
+    align-items: center; /* 垂直居中内容 */
+    display: inline-block;
+}
 .class08 {
     background-image: url('@/assets/img/AiEmotion/tree.png');
     /* 使用导入的背景图片 */