Merge branch 'ds' of http://39.101.133.168:8807/hongxilin/AIxiaocaishen into ds

src/views/AiEmotion.vue

@@ -28,26 +28,45 @@
             <span class="span01">房间卡方法啊付了款公交卡阿济格</span>
             <span class="span02"> 2025/06/07</span>
         </div>
-        <img src="@/assets/img/AiEmotion/L1.png" alt="情绪监控">
+        <div class="class0201">
+            <img src="@/assets/img/AiEmotion/L1.png" alt="情绪监控图标">
+        </div>
         <!-- 温度计图表 -->
         <div class="class03">
       <marketTemperature/>
         </div>
-        <img src="@/assets/img/AiEmotion/L2.png" alt="情绪解码">
+        <div class="class0301">
+            <img src="@/assets/img/AiEmotion/L2.png" alt="情绪解码图标">
+        </div>
         <!-- 情绪解码器图表 -->
         <div class="class04">
-            <span class="class0401">
-            </span>
-            <emotionDecod ref="emotionDecodRef"></emotionDecod>
+            <div class="class0401">
+                <img src='@/assets/img/AiEmotion/emotionDecod.png' alt="情绪解码器图标">
+            </div>
+            <div class="class0402">
+                <emotionDecod ref="emotionDecodRef"></emotionDecod>
+            </div>
+        </div>
+        <div class="class0403">
+            <img src="@/assets/img/AiEmotion/L3.png" alt="情绪推演图标">
         </div>
-        <img src="@/assets/img/AiEmotion/L3.png" alt="情绪推演">
         <!-- 情绪探底雷达图表 -->
         <div class="class05">
-            <emotionalBottomRadar ref="emotionalBottomRadarRef"></emotionalBottomRadar>
+            <div class="class0502">
+                <img src="@/assets/img/AiEmotion/探底雷达.png" alt="探底雷达图表">
+            </div>
+            <div class="class0503">
+                <emotionalBottomRadar ref="emotionalBottomRadarRef"></emotionalBottomRadar>
+            </div>
+        </div>
+        <div class="class0501">
+            <img src="@/assets/img/AiEmotion/L4.png" alt="情绪套利">
         </div>
-        <img src="@/assets/img/AiEmotion/L4.png" alt="情绪套利">
         <!-- 情绪能量转化器图表 -->
         <div class="class06">
+            <div class="class0601">
+                <img src="@/assets/img/AiEmotion/能量转化器.png" alt="能量转化器图标">
+            </div>
             <emoEnergyConverter ref="emoEnergyConverterRef"></emoEnergyConverter>
         </div>
         <!-- 核心看点 -->
@@ -55,7 +74,9 @@
 
         </div>
         <!-- 核心逻辑 -->
-        <img src="@/assets/img/AiEmotion/量子神经决策树.png" alt="">
+        <div class="class0701">
+            <img src="@/assets/img/AiEmotion/量子神经决策树.png" alt="">
+        </div>
         <div class="class08">
 
         </div>
@@ -148,14 +169,16 @@ async function sendMessage() {
 async function fetchData(code, market) {
     try {
         const stockDataParams = {
+            // token: '+XgqsgdW0RLIbIG2pxnnbZi0+fEeMx8pywnIlrmTxtkSaPZ9xjSOWrxq+s0rL3RrfNhXPvGtz9srFfjwu8A',
             token: '9ior41AF0xTIbIG2pRnnbZi0+fEeMx8pywnIlrmTwo5FbqJ9lWrSWOxp9MkpKiNtedtUafqvzIwpFKrwuMs',
-            market: market,
-            code: code,
+            market: 'usa',
+            code: 'TSLA',
             language: 'cn',
         };
 
         const stockDataResult = await axios.post(
             'http://39.101.133.168:8828/link/api/aiEmotion/client/getAiEmotionData',
+            // 'https://api.homilychart.com/link/api/aiEmotion/client/getAiEmotionData',
             stockDataParams,
             {
                 headers: {
@@ -195,29 +218,75 @@ async function fetchData(code, market) {
 // 渲染组件图表的方法
 function renderCharts(data) {
     nextTick(() => {
-        // 渲染情绪能量转化器图表
-        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('情绪能量转化器图表已渲染');
-        }
+
 
         // 渲染情绪解码器图表
         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('情绪能量转化器图表已渲染');
         }
+
     });
 }
 </script>
 
 <style scoped>
+/* .class0402 {
+    width: fit-content;
+    margin: 0 auto;
+} */
+
+.class0601 {
+    padding-top: 10rem;
+    text-align: center;
+}
+
+.class0502 {
+    padding-top: 10rem;
+    text-align: center;
+}
+
+.class0701 {
+    margin: 0 auto;
+    width: fit-content;
+}
+
+.class0501 {
+    margin: 0 auto;
+    width: fit-content;
+}
+
+.class0403 {
+    margin: 0 auto;
+    width: fit-content;
+}
+
+.class0301 {
+    margin: 0 auto;
+    width: fit-content;
+}
+
+.class0201 {
+    margin: 0 auto;
+    width: fit-content;
+}
 
 /* 获取报告图按钮样式 */
 
@@ -263,16 +332,10 @@ function renderCharts(data) {
 
 
 .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;
+    padding-top: 10rem;
+    text-align: center;
 }
+
 .class08 {
     background-image: url('@/assets/img/AiEmotion/tree.png');
     /* 使用导入的背景图片 */
@@ -280,12 +343,14 @@ function renderCharts(data) {
     /* 确保背景图片完整显示 */
     background-repeat: no-repeat;
     /* 防止背景图片重复 */
-    width: 100%;
+    width: 95%;
     /* 设置容器宽度 */
     height: auto;
     /* 高度根据内容动态变化 */
     min-height: 400px;
     /* 设置最小高度，确保图片显示 */
+    margin: 0 auto;
+    /* margin-bottom: 10rem; */
 }
 
 .class06 {
@@ -295,12 +360,13 @@ function renderCharts(data) {
     /* 确保背景图片完整显示 */
     background-repeat: no-repeat;
     /* 防止背景图片重复 */
-    width: 100%;
+    width: 95%;
     /* 设置容器宽度 */
     height: auto;
     /* 高度根据内容动态变化 */
-    min-height: 575px;
+    min-height: 70rem;
     /* 设置最小高度，确保图片显示 */
+    margin: 0 auto;
 }
 
 .class05 {
@@ -310,12 +376,13 @@ function renderCharts(data) {
     /* 确保背景图片完整显示 */
     background-repeat: no-repeat;
     /* 防止背景图片重复 */
-    width: 100%;
+    width: 95%;
     /* 设置容器宽度 */
     height: auto;
     /* 高度根据内容动态变化 */
     min-height: 575px;
     /* 设置最小高度，确保图片显示 */
+    margin: 0 auto;
 }
 
 .class04 {
@@ -325,27 +392,29 @@ function renderCharts(data) {
     /* 确保背景图片完整显示 */
     background-repeat: no-repeat;
     /* 防止背景图片重复 */
-    width: 100%;
+    width: 95%;
     /* 设置容器宽度 */
     height: auto;
     /* 高度根据内容动态变化 */
-    min-height: 575px;
+    min-height: 69rem;
     /* 设置最小高度，确保图片显示 */
+    margin: 0 auto;
 }
 
 .class03 {
-    background-image: url('@/assets/img/AiEmotion/bk02.png');
+    background-image: url('@/assets/img/AiEmotion/bk03.png');
     /* 使用导入的背景图片 */
     background-size: cover;
     /* 确保背景图片完整显示 */
     background-repeat: no-repeat;
     /* 防止背景图片重复 */
-    width: 100%;
+    width: 95%;
     /* 设置容器宽度 */
     height: auto;
     /* 高度根据内容动态变化 */
-    min-height: 460px;
+    min-height: 70rem;
     /* 设置最小高度，确保图片显示 */
+    margin: 0 auto;
 }
 
 .span01 {
@@ -366,7 +435,7 @@ function renderCharts(data) {
 }
 
 .class01 {
-    width: 60%;
+    width: 90%;
     /* 固定容器宽度 */
     min-height: 100px;
     /* 设置最小高度，确保初始显示 */
@@ -376,6 +445,11 @@ function renderCharts(data) {
     /* 添加内边距，确保内容与边界有间距 */
     box-sizing: border-box;
     /* 包括内边距在宽度和高度计算中 */
+    background-color: #5e81a7;
+    margin: 0 auto;
+    /* 居中容器 */
+    margin-bottom: 10rem;
+
 }
 
 .ai-emotion-container {

src/views/components/emotionDecod.vue

@@ -227,7 +227,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
           shadowOffsetX: 2,
           shadowOffsetY: 2,
         },
-        bottom: "0%", // 下移数据缩放滑块
+        bottom: "5%", // 下移数据缩放滑块
       },
       {
         show: !1,
@@ -348,7 +348,7 @@ onBeforeUnmount(() => {
   background-color: #131a2a;
 }
 #qxjmqEcharts {
-  width: 100%;
-  height: 600px;
+  width: 90%;
+  height: 500px;
 }
 </style>