每个K线图单独显示

.env.development

@@ -2,7 +2,7 @@
 VITE_ENV = 'development'
 VITE_OUTPUT_DIR = 'dev'
 # public path
-VITE_PUBLIC_PATH = /AIxiaocaishen
+VITE_PUBLIC_PATH = /
 
 #新数据接口
 VITE_APP_API_BASE_URL = "http://39.101.133.168:8828/link"

.env.production

@@ -2,13 +2,14 @@
 VITE_ENV = 'production'
 VITE_OUTPUT_DIR = 'dist'
 # public path
-VITE_PUBLIC_PATH = /AIxiaocaishen
+VITE_PUBLIC_PATH = /aixiaocaishen
 
 # Whether to open mock
 VITE_USE_MOCK = true
 
 #新数据接口
-VITE_APP_API_BASE_URL = https://api.homilychart.com/link
+# VITE_APP_API_BASE_URL = https://api.homilychart.com/link
+VITE_APP_API_BASE_URL = "http://39.101.133.168:8828/link"
 
 #MJ API
 VITE_APP_MJ_API_BASE_URL = "http://192.168.9.19:8080/api"

src/views/AIchat.vue

@@ -247,35 +247,24 @@ watch(
               Kline: data.data.AIBull.KLine20
             }
 
-            dataStore.setKlineData(Kline20);
-
-            // chatStore.chartData.push({
-            //   data: Kline20.Kline
-            // });
-            // for (let i = 0; i < chatStore.chartData.length; i++) {
-            //   console.log(chatStore.chartData[i], "chatStore.chartData[i]")
-            // }
-
             chatStore.messages.pop();
 
+            // 先推送K线图消息
             chatStore.messages.push({
               sender: "ai",
               type: "kline",
-              chartRef: Kline20.name, // 唯一标识符
-              chartData: Kline20.Kline, // 图表数据
+              chartData: Kline20, // 直接保存完整数据
+              messageId: `kline-${Date.now()}` // 生成唯一ID
             });
 
-
+            // 再推送文字分析内容的消息
             chatStore.messages.push({
               sender: "ai",
               content: "AI正在思考中..."
             });
 
-            console.log(Kline20, "Kline20");
-
-            console.log(code, "code");
-            console.log(market, "market");
-            console.log(data, "data");
+            // 将K线数据保存到dataStore，用于其他地方可能的使用
+            dataStore.setKlineData(Kline20);
 
           } else if (ans.value.answerN !== "") {
             AIcontent.value = ans.value.answerN;
@@ -499,9 +488,7 @@ onMounted(() => {
 
     <div v-for="(msg, index) in chatMsg" :key="index" :class="['message-bubble', msg.sender]">
       <div v-if="msg.type === 'kline'" class="kline-container">
-        <KLine />
-        <!-- <KLine :key="msg.timestamp" /> -->
-        <!-- <div class="kLineChart"></div> -->
+        <KLine :chartData="msg.chartData" />
       </div>
       <div v-else v-html="msg.content"></div>
     </div>

src/views/Echarts/KLine.vue

@@ -1,109 +1,46 @@
 <template>
-	<!-- <div ref="KlineCanvs" class="KlineClass"></div> -->
 	<div ref="chartContainer" class="KlineClass"></div>
 </template>
 
 <script setup>
 import * as echarts from 'echarts'
 import { useDataStore } from '@/store/dataList'
-// import { useLanguage } from '@/utils/languageService'
-// const { translate, t } = useLanguage()
-const KlineCanvs = ref() // Echarts实例
-const dataStore = useDataStore()
-const klineData = computed(() => dataStore.klineData)
-const chartContainer = ref() // 容器引用
-const chartInstances = ref([]) // 存储所有实例的数组
-// 监听数据变化
-// watch(
-// 	klineData,
-// 	(newValue) => {
-// 		console.log('收到K线数据：', newValue)  // 添加调试信息
-// 		const currentData = newValue // 深拷贝防止切换回来数据更改
-// 		if (currentData) {
-// 			nextTick(() => {
-// 				// 创建新容器
-// 				const newChartDiv = document.createElement('div')
-// 				newChartDiv.className = 'dynamic-chart'
-// 				chartContainer.value.appendChild(newChartDiv)
-
-// 				// 添加延迟处理
-// 				requestAnimationFrame(() => {
-// 					// 添加尺寸检查
-// 					if (newChartDiv.offsetHeight === 0) {
-// 						console.warn('强制设置备用高度')
-// 						newChartDiv.style.height = '500px'
-// 					}
+import { onMounted, watch, ref, computed, nextTick, onUnmounted } from 'vue'
 
-// 					const newInstance = echarts.init(newChartDiv)
-// 					chartInstances.value.push(newInstance)
-// 					KlineCanvsEcharts(currentData, newInstance)
-// 				})
-// 				// KlineCanvsEcharts(currentData)
+// 接收从父组件传入的图表数据
+const props = defineProps({
+	chartData: {
+		type: Object,
+		default: null
+	}
+})
 
-// 				console.log('容器尺寸:', newChartDiv.offsetWidth, 'x', newChartDiv.offsetHeight)
-// 			})
-// 		}
-// 	},
-// 	{ immediate: true, deep: true }
-// )
+const chartContainer = ref() // 容器引用
+const chartInstance = ref(null) // 当前图表实例
 
+// 监听传入的数据变化
 watch(
-	klineData,
+	() => props.chartData,
 	(newValue) => {
-		console.log('收到K线数据：', newValue)
-		const currentData = newValue
-		if (currentData) {
+		console.log('KLine组件收到数据：', newValue)
+		if (newValue) {
 			nextTick(() => {
-				// 创建新容器（不清理旧容器）
-				const chartId = `chart-${Date.now()}`
-				const newChartDiv = document.createElement('div')
-				newChartDiv.className = 'dynamic-chart'
-				newChartDiv.id = chartId
-				chartContainer.value.appendChild(newChartDiv)
-
-				requestAnimationFrame(() => {
-					if (newChartDiv.offsetHeight === 0) {
-						newChartDiv.style.height = '500px'
+				// 仅当容器存在且没有初始化过图表时创建
+				if (chartContainer.value && !chartInstance.value) {
+					chartInstance.value = echarts.init(chartContainer.value)
+					// 使用深拷贝防止数据被修改
+					const instanceData = JSON.parse(JSON.stringify(newValue))
+					KlineCanvsEcharts(instanceData, chartInstance.value)
 				}
-
-					// 创建完全独立的实例
-					const newInstance = echarts.init(newChartDiv)
-					const instanceData = JSON.parse(JSON.stringify(currentData))
-
-					// 保留所有历史实例
-					chartInstances.value.push({
-						id: chartId,
-						instance: newInstance,
-						data: instanceData,
-						container: newChartDiv  // 存储容器引用
-					})
-
-					// 使用深拷贝后的数据渲染
-					KlineCanvsEcharts(instanceData, newInstance)
-				})
 			})
 		}
 	},
-	{ immediate: true, deep: true }
+	{ immediate: true }
 )
-// 监听数据变化或语言变化
-// watch(
-// 	() => t.value,
-// 	(newLang) => {
-// 		// 更新 textEcharts 内容并重新渲染图表
-// 		if (klineData.value) {
-// 			const currentData = klineData
-// 			nextTick(() => {
-// 				KlineCanvsEcharts(currentData)
-// 			})
-// 		}
-// 	},
-// 	{ immediate: true, deep: true }
-// )
+
 function KlineCanvsEcharts(datatok, instance) {
-	// const textEcahrts = t.value // 创建多语言实例
-	const data = datatok.Kline
 	// 切割数据方法
+	const data = datatok.Kline
 	const spliteDate = (a) => {
 		const categoryData = []
 		let value = []
@@ -124,8 +61,6 @@ function KlineCanvsEcharts(datatok, instance) {
 	// 给配置项
 	const KlineOption = {
 		title: {
-			// text: k_name,
-			// Canvs的间隔大小
 			text: datatok.name,
 			top: 20,
 			left: 20
@@ -265,54 +200,36 @@ function KlineCanvsEcharts(datatok, instance) {
 			}
 		]
 	}
-	// 创造echarts图
-	// const KlineCanvsChart = echarts.init(KlineCanvs.value)
-	// KlineCanvsChart.setOption(KlineOption)
 
-	// 应用配置到新实例
+	// 应用配置到图表实例
 	instance.setOption(KlineOption)
 
-	// 窗口大小变化时重置图表大小
-	// window.addEventListener('resize', () => {
-	// 	KlineCanvsChart.resize()
-	// })
-
 	// 绑定窗口resize事件
 	window.addEventListener('resize', () => {
 		instance.resize()
 	})
-
 }
 
-onMounted(() => {
-	// fnGetData()
+// 组件卸载时清理资源
+onUnmounted(() => {
+	if (chartInstance.value) {
+		chartInstance.value.dispose()
+		chartInstance.value = null
+	}
+	// 移除resize监听
+	window.removeEventListener('resize', () => {})
 })
 
+onMounted(() => {
+	console.log('KLine组件挂载完成')
+})
 </script>
 
 <style scoped>
 .KlineClass {
 	position: relative;
 	width: 100%;
-	min-height: 600px;
-	/* 改为最小高度 */
-	display: flex;
-	flex-direction: column;
-	gap: 20px;
-	/* 添加间距 */
-}
-
-.chart-container {
-	position: relative;
-	width: 100%;
+	min-height: 400px;
 	height: 100%;
 }
-
-.dynamic-chart {
-	width: 100%;
-	height: 500px !important;
-	/* 强制高度 */
-	flex-shrink: 0;
-	/* 禁止高度压缩 */
-}
 </style>

src/views/homePage.vue

@@ -3,6 +3,7 @@
 import { ref, computed, onMounted, watch, nextTick } from "vue";
 import { setHeight } from "../utils/setHeight";
 import { getUserCountAPI } from "../api/AIxiaocaishen";
+import { ElMessage } from 'element-plus'
 import AIchat from "./AIchat.vue";
 import AIfind from "./AIfind.vue";
 import { useAppBridge } from '../assets/js/useAppBridge.js'
@@ -10,9 +11,25 @@ import { useDataStore } from '@/store/dataList.js'
 import { useChatStore } from '../store/chat'
 import { useAudioStore } from '../store/audio'
 import _ from "lodash";
+
+import logo from "../assets/img/homePage/logo.png";
+import madeInHL from "../assets/img/homePage/madeInHL.png";
+import getCountAll from "../assets/img/homePage/get-count-all.png";
+import announcementBtn from "../assets/img/homePage/announcement.png";
+import thinkActive from "../assets/img/homePage/tail/think-active.png";
+import thinkNoActive from "../assets/img/homePage/tail/think-no-active.png";
+import languageBtn from "../assets/img/homePage/tail/language.png";
+import voice from "../assets/img/homePage/tail/voice.png";
+import voiceNoActive from "../assets/img/homePage/tail/voice-no-active.png";
+import sendBtn from "../assets/img/homePage/tail/send.png";
+import msgBtn from "../assets/img/homePage/tail/msg.png";
+
+
 // import { useUserStore } from "../store/userPessionCode.js";
 const { getQueryVariable } = useDataStore()
 
+
+
 // 变量
 // 音频管理
 const audioStore = useAudioStore()
@@ -101,6 +118,10 @@ const updateMessage = (title) => {
   // console.log("updateMessage 的值:", title);
 };
 const sendMessage = async () => {
+  if (localStorage.getItem('localToken') == null||localStorage.getItem('localToken') == '') {
+    ElMessage.error('请先登录');
+    return ;
+  }
   isScrolling.value = false;
   // 调用 ensureAIchat 确保跳转到 AIchat 页面
   ensureAIchat();
@@ -318,17 +339,16 @@ onMounted(async () => {
       <el-header class="homepage-head">
         <!-- logo -->
         <div class="homepage-logo">
-          <img src="src\assets\img\homePage\logo.png" alt="图片加载失败" class="logo1" />
-          <img src="src\assets\img\homePage\madeInHL.png" alt="图片加载失败" class="logo2" />
+          <img :src="logo" alt="图片加载失败" class="logo1" />
+          <img :src="madeInHL" alt="图片加载失败" class="logo2" />
         </div>
 
         <div class="homepage-right-group">
           <div class="count-badge" @click="showCount">
-            <img src="src\assets\img\homePage\get-count-all.png" class="action-btn" />
+            <img :src="getCountAll" class="action-btn" />
             <div class="count-number">{{ UserCount }}次</div>
           </div>
-          <img src="src\assets\img\homePage\announcement.png" class="announcement-btn action-btn"
-            @click="showAnnouncement" />
+          <img :src="announcementBtn" class="announcement-btn action-btn" @click="showAnnouncement" />
         </div>
       </el-header>
       <!-- 主体部分：小人  问题轮询图  对话内容 -->
@@ -353,17 +373,13 @@ onMounted(async () => {
         <!-- 第一行按钮 -->
         <div class="footer-first-line">
           <div class="left-group">
-            <img v-if="isThinking" src="src\assets\img\homePage\tail\think-active.png" @click="toggleThink"
-              class="action-btn" />
-            <img v-else src="src\assets\img\homePage\tail\think-no-active.png" @click="toggleThink"
-              class="action-btn" />
-            <img src="src\assets\img\homePage\tail\language.png" @click="changeLanguage" class="action-btn" />
-            <img v-if="isVoice" src="src\assets\img\homePage\tail\voice.png" @click="toggleVoice" class="action-btn" />
-            <img v-else src="src\assets\img\homePage\tail\voice-no-active.png" @click="toggleVoice"
-              class="action-btn" />
+            <img v-if="isThinking" :src="thinkActive" @click="toggleThink" class="action-btn" />
+            <img v-else :src="thinkNoActive" @click="toggleThink" class="action-btn" />
+            <img :src="languageBtn" @click="changeLanguage" class="action-btn" />
+            <img v-if="isVoice" :src="voice" @click="toggleVoice" class="action-btn" />
+            <img v-else :src="voiceNoActive" @click="toggleVoice" class="action-btn" />
           </div>
-          <img v-if="!chatStore.isLoading" src="src\assets\img\homePage\tail\send.png" @click="sendMessage"
-            class="action-btn send-btn" />
+          <img v-if="!chatStore.isLoading" :src="sendBtn" @click="sendMessage" class="action-btn send-btn" />
           <div v-else>
             <el-icon class="is-loading">
               <Loading />
@@ -373,7 +389,7 @@ onMounted(async () => {
 
         <!-- 第二行输入框 -->
         <div class="footer-second-line">
-          <img src="src\assets\img\homePage\tail\msg.png" class="msg-icon" />
+          <img :src="msgBtn" class="msg-icon" />
           <el-input type="textarea" v-model="message" :autosize="{ minRows: 1, maxRows: 4 }" placeholder="给AI小财神发消息..."
             class="msg-input" @keydown.enter.exact.prevent="isLoading ? null : sendMessage()" resize="none">
           </el-input>