You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

3665 lines
108 KiB

4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
3 months ago
1 week ago
1 week ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
  1. <script setup>
  2. import { ref, onMounted, watch, nextTick, reactive, onUnmounted } from "vue";
  3. import { ElDialog } from "element-plus";
  4. import {
  5. getReplyStreamAPI,
  6. getReplyAPI,
  7. TTSAPI,
  8. qsArpAamClickAPI,
  9. dbqbFirstAPI,
  10. dbqbSecondOneAPI,
  11. dbqbSecondTwoAPI,
  12. dbqbSecondThreeAPI,
  13. dbqbSecondFourAPI,
  14. dataListAPI,
  15. } from "../api/AIxiaocaishen";
  16. import { useUserStore } from "../store/userPessionCode";
  17. import { useChatStore } from "../store/chat";
  18. import { useAudioStore } from "../store/audio";
  19. import { useDataStore } from "@/store/dataList.js";
  20. import { marked } from "marked"; // 引入marked库
  21. import katex from "katex"; // 引入 KaTeX 库
  22. import { htmlToText } from "html-to-text";
  23. import { Howl, Howler } from "howler";
  24. import * as echarts from "echarts";
  25. import _, { add } from "lodash";
  26. import moment from "moment";
  27. import title1 from "@/assets/img/AIchat/核心价值评估标题.png";
  28. import title2 from "@/assets/img/AIchat/主力作战.png";
  29. import title3 from "@/assets/img/AIchat/攻防三维.png";
  30. import title4 from "@/assets/img/AIchat/综合作战.png";
  31. import logo1 from "@/assets/img/AIchat/夺宝奇兵logo.png";
  32. import logo2 from "@/assets/img/AIchat/开启无限财富.png";
  33. import bgc from "@/assets/img/AIchat/圈.png";
  34. const chatStore = useChatStore();
  35. const audioStore = useAudioStore();
  36. const dataStore = useDataStore();
  37. // 随机GIF
  38. const currentGif = ref("");
  39. const renderer = new marked.Renderer();
  40. // 重写 del 方法,让删除线不生效
  41. renderer.del = function (text) {
  42. // 处理各种数据类型
  43. console.log("text", text);
  44. return "~" + text.tokens[0].raw + "<br>" + text.tokens[2].raw + "~";
  45. };
  46. // 定义自定义事件
  47. const emit = defineEmits(["updateMessage", "sendMessage"]);
  48. // 音频播放方法
  49. const playAudio = (url) => {
  50. // 添加空值校验
  51. if (!url) {
  52. console.warn("音频URL为空,跳过播放");
  53. audioStore.isPlaying = false;
  54. return;
  55. }
  56. const handlePlay = () => {
  57. // if (audioStore.soundInstance) {
  58. // Howler.unload(); // 添加清理旧实例
  59. // // audioStore.soundInstance.stop()
  60. // }
  61. if (audioStore.isNewInstance) {
  62. const newSound = new Howl({
  63. src: [url],
  64. html5: true, // 强制HTML5 Audio解决iOS兼容问题
  65. format: ["mp3", "acc"],
  66. rate: 1.2, // 调整播放速度
  67. onplay: () => {
  68. audioStore.isPlaying = true; // 改为更新store状态
  69. newSound.volume(1); // 添加音量设置
  70. },
  71. onend: () => (audioStore.isPlaying = false),
  72. onstop: () => (audioStore.isPlaying = false),
  73. onloaderror: (id, err) => {
  74. console.error("音频加载失败:", err);
  75. ElMessage.error("音频播放失败,请检查网络连接");
  76. },
  77. });
  78. if (audioStore.nowSound) {
  79. audioStore.nowSound.stop();
  80. }
  81. audioStore.nowSound = newSound;
  82. audioStore.isNewInstance = false;
  83. console.log("新音频");
  84. } else {
  85. console.log("已经有音频");
  86. }
  87. const newSound = audioStore.nowSound;
  88. // 添加立即播放逻辑
  89. newSound.play();
  90. audioStore.setAudioInstance(newSound);
  91. Howler._howls.push(newSound); // 强制注册到全局管理
  92. // // 处理浏览器自动播放策略
  93. // if (Howler.autoUnlock) {
  94. // Howler.autoUnlock();
  95. // }
  96. };
  97. // if (/iPhone|iPad|iPod/.test(navigator.userAgent)) {
  98. // document.addEventListener('touchstart', handlePlay, { once: true });
  99. // ElMessage.info('请轻触屏幕以启用音频播放');
  100. // } else {
  101. // handlePlay();
  102. // }
  103. handlePlay();
  104. // Howler.volume(1.0) // 添加全局音量设置
  105. };
  106. // 新增暂停方法
  107. const pauseAudio = () => {
  108. if (audioStore.soundInstance) {
  109. // 添加移动端特殊处理
  110. // if (/iPhone|iPad|iPod/.test(navigator.userAgent)) {
  111. // Howler.pause(); // iOS需要强制停止音频上下文
  112. // } else {
  113. // audioStore.soundInstance.pause();
  114. // }
  115. audioStore.soundInstance.pause();
  116. audioStore.isPlaying = false;
  117. // // 添加状态同步
  118. // nextTick(() => {
  119. // Howler.unload();
  120. // audioStore.soundInstance = null;
  121. // });
  122. }
  123. };
  124. // 音频轮流播放方法
  125. const playAudioSequence = (audioUrls) => {
  126. console.log("playAudioSequence被调用,参数:", audioUrls);
  127. if (!audioUrls || audioUrls.length === 0) {
  128. console.warn("音频URL列表为空,跳过播放");
  129. return;
  130. }
  131. let currentIndex = 0;
  132. let audioSequence = [...audioUrls]; // 保存音频序列
  133. const playNext = () => {
  134. if (currentIndex >= audioSequence.length) {
  135. console.log("所有音频播放完成,重置到第一个音频");
  136. // 播放完成后重置到第一个音频,但不自动播放
  137. currentIndex = 0;
  138. audioStore.isPlaying = false;
  139. audioStore.isPaused = false;
  140. audioStore.playbackPosition = 0;
  141. if (audioSequence.length > 0) {
  142. audioStore.setCurrentAudioUrl(audioSequence[0]);
  143. }
  144. return;
  145. }
  146. const currentUrl = audioSequence[currentIndex];
  147. console.log(`正在播放第${currentIndex + 1}个音频:`, currentUrl);
  148. console.log(
  149. "音频URL有效性检查:",
  150. !!currentUrl,
  151. "长度:",
  152. currentUrl?.length
  153. );
  154. // 设置当前音频URL
  155. audioStore.setCurrentAudioUrl(currentUrl);
  156. // 停止当前播放的音频
  157. if (audioStore.nowSound) {
  158. audioStore.nowSound.stop();
  159. }
  160. const sound = new Howl({
  161. src: [currentUrl],
  162. html5: true,
  163. format: ["mp3", "acc"],
  164. rate: 1.2,
  165. onplay: () => {
  166. audioStore.isPlaying = true;
  167. audioStore.isPaused = false;
  168. console.log(`开始播放音频 ${currentIndex + 1}`);
  169. },
  170. onpause: () => {
  171. audioStore.isPlaying = false;
  172. audioStore.isPaused = true;
  173. audioStore.playbackPosition = sound.seek() || 0;
  174. console.log(`音频 ${currentIndex + 1} 已暂停`);
  175. },
  176. onend: () => {
  177. audioStore.isPlaying = false;
  178. audioStore.isPaused = false;
  179. audioStore.playbackPosition = 0;
  180. console.log(`音频 ${currentIndex + 1} 播放完成`);
  181. currentIndex++;
  182. // 播放下一个音频
  183. setTimeout(() => {
  184. playNext();
  185. }, 500); // 间隔500ms播放下一个
  186. },
  187. onstop: () => {
  188. audioStore.isPlaying = false;
  189. audioStore.isPaused = false;
  190. audioStore.playbackPosition = 0;
  191. console.log(`音频 ${currentIndex + 1} 已停止`);
  192. },
  193. onloaderror: (id, err) => {
  194. console.error(`音频 ${currentIndex + 1} 加载失败:`, err);
  195. currentIndex++;
  196. // 跳过失败的音频,播放下一个
  197. setTimeout(() => {
  198. playNext();
  199. }, 100);
  200. },
  201. });
  202. audioStore.nowSound = sound;
  203. audioStore.setAudioInstance(sound);
  204. sound.play();
  205. };
  206. // 重写togglePlayPause方法以支持音频序列控制
  207. const originalTogglePlayPause = audioStore.togglePlayPause;
  208. audioStore.togglePlayPause = () => {
  209. if (audioStore.soundInstance) {
  210. if (audioStore.isPlaying) {
  211. // 暂停当前音频
  212. audioStore.pause();
  213. } else if (audioStore.isPaused) {
  214. // 从暂停位置继续播放
  215. audioStore.play();
  216. } else {
  217. // 重新开始播放当前音频或从头开始播放序列
  218. if (currentIndex >= audioSequence.length) {
  219. currentIndex = 0; // 重置到第一个音频
  220. }
  221. playNext();
  222. }
  223. } else {
  224. // 没有音频实例时,从头开始播放
  225. currentIndex = 0;
  226. playNext();
  227. }
  228. };
  229. // 开始播放第一个音频
  230. playNext();
  231. };
  232. // 获取消息
  233. const chatMsg = computed(() => chatStore.messages);
  234. const props = defineProps({
  235. messages: Array,
  236. chartData: {
  237. type: Object,
  238. default: null,
  239. },
  240. index: {
  241. type: Number,
  242. required: true,
  243. },
  244. });
  245. // 打字机效果
  246. const typewriterContent = ref("");
  247. const isTyping = ref(false);
  248. const typeWriter = (text, callback) => {
  249. let index = 0;
  250. isTyping.value = true;
  251. typewriterContent.value = "";
  252. const typingInterval = setInterval(() => {
  253. if (index < text.length) {
  254. typewriterContent.value += text.charAt(index);
  255. index++;
  256. // 自动滚动到底部
  257. nextTick(() => {
  258. const container = document.querySelector(".message-area");
  259. if (container) container.scrollTop = container.scrollHeight;
  260. });
  261. } else {
  262. clearInterval(typingInterval);
  263. isTyping.value = false;
  264. if (callback) callback();
  265. }
  266. }, 50); // 调整速度(毫秒)
  267. };
  268. const fnGetData = (data) => {
  269. const YaLiZhiChengLuoPan = data.YaLiZhiChengLuoPan;
  270. let sz = ref(5.5); // 进行判断
  271. const yl = YaLiZhiChengLuoPan.Yali; // 压力位
  272. const zc = YaLiZhiChengLuoPan.ZhiCheng; // 支撑位
  273. console.log("yl", yl, "zc", zc);
  274. if (yl == "较大" && zc == "较弱") {
  275. sz.value = 0.5; // 极高风险
  276. } else if (yl == "一般" && zc == "较弱") {
  277. sz.value = 1.5; // 弱撑中压区
  278. } else if (yl == "较弱" && zc == "较弱") {
  279. sz.value = 2.5; // 弱撑弱压区
  280. } else if (yl == "较大" && zc == "较大") {
  281. sz.value = 3.5; // 强撑强压区
  282. } else if (yl == "一般" && zc == "较大") {
  283. sz.value = 4.5; // 强撑中压
  284. } else if (yl == "较弱" && zc == "较大") {
  285. sz.value = 5.5; // 强撑弱压区
  286. } else if (yl == "较大" && zc == "一般") {
  287. sz.value = 0.2;
  288. } else if (yl == "一般" && zc == "一般") {
  289. sz.value = 3;
  290. } else if (yl == "较弱" && zc == "一般") {
  291. sz.value = 5.8;
  292. }
  293. return sz.value;
  294. };
  295. const typingQueue = ref([]);
  296. const isTypingInProgress = ref(false);
  297. // 创建打字机效果的Promise函数
  298. const createTypingEffect = (message, content, speed) => {
  299. return new Promise((resolve) => {
  300. chatStore.messages.push(message);
  301. if (Array.isArray(content) && content.length > 0) {
  302. message.content = "";
  303. message.isTyping = true;
  304. let currentIndex = 0;
  305. const processNextElement = () => {
  306. if (currentIndex >= content.length) {
  307. message.isTyping = false;
  308. nextTick(() => {
  309. resolve(); // 完成后resolve
  310. });
  311. return;
  312. }
  313. if (currentIndex % 2 === 0) {
  314. // 偶数下标:直接加入
  315. message.content += content[currentIndex];
  316. currentIndex++;
  317. processNextElement(); // 立即处理下一个元素
  318. } else {
  319. // 奇数下标:打字机效果
  320. const text = content[currentIndex];
  321. let charIndex = 0;
  322. const typingInterval = setInterval(() => {
  323. if (charIndex < text.length) {
  324. message.content += text.charAt(charIndex);
  325. charIndex++;
  326. } else {
  327. clearInterval(typingInterval);
  328. currentIndex++;
  329. processNextElement(); // 处理下一个元素
  330. }
  331. }, speed);
  332. }
  333. };
  334. processNextElement(); // 开始处理
  335. } else {
  336. if (message.kline) {
  337. if (message.klineType == 1) {
  338. console.log("六色罗盘消息已添加到聊天列表");
  339. // 在渲染完成后初始化图表
  340. nextTick(() => {
  341. console.log("nextTick开始 - 准备渲染图表");
  342. console.log("消息列表:", chatStore.messages);
  343. // 寻找最新添加的K线消息索引
  344. let klineIndex = -1;
  345. for (let i = 0; i < chatStore.messages.length; i++) {
  346. if (chatStore.messages[i].messageId === message.messageId) {
  347. klineIndex = i;
  348. break;
  349. }
  350. }
  351. console.log("找到的K线消息索引:", klineIndex);
  352. if (klineIndex !== -1) {
  353. const containerId = `kline-container-${klineIndex}`;
  354. console.log("图表容器ID:", containerId);
  355. // 确保DOM已经渲染完成
  356. setTimeout(() => {
  357. console.log("延时执行,确保DOM已渲染");
  358. KlineCanvsEcharts(containerId);
  359. }, 100); // 短暂延时确保DOM已渲染
  360. } else {
  361. console.warn("未找到K线消息");
  362. }
  363. });
  364. } else {
  365. console.log("K线消息已添加到聊天列表");
  366. // 在渲染完成后初始化图表
  367. nextTick(() => {
  368. console.log("nextTick开始 - 准备渲染图表");
  369. console.log("消息列表:", chatStore.messages);
  370. // 寻找最新添加的K线消息索引
  371. let klineIndex = -1;
  372. for (let i = 0; i < chatStore.messages.length; i++) {
  373. if (chatStore.messages[i].messageId === message.messageId) {
  374. klineIndex = i;
  375. break;
  376. }
  377. }
  378. console.log("找到的K线消息索引:", klineIndex);
  379. if (klineIndex !== -1) {
  380. const containerId = `kline-container-${klineIndex}`;
  381. console.log("图表容器ID:", containerId);
  382. // 确保DOM已经渲染完成
  383. setTimeout(() => {
  384. console.log("延时执行,确保DOM已渲染");
  385. KlineCanvsEcharts(containerId);
  386. }, 100); // 短暂延时确保DOM已渲染
  387. } else {
  388. console.warn("未找到K线消息");
  389. }
  390. });
  391. }
  392. // 延时1秒后resolve
  393. setTimeout(() => {
  394. resolve();
  395. }, 1000);
  396. } else {
  397. // 延时1秒后resolve
  398. setTimeout(() => {
  399. resolve();
  400. }, 1000);
  401. }
  402. }
  403. });
  404. };
  405. // 队列处理函数
  406. const processTypingQueue = async () => {
  407. if (isTypingInProgress.value || typingQueue.value.length === 0) {
  408. return;
  409. }
  410. isTypingInProgress.value = true;
  411. while (typingQueue.value.length > 0) {
  412. const task = typingQueue.value.shift();
  413. await createTypingEffect(task.message, task.content, task.speed);
  414. }
  415. isTypingInProgress.value = false;
  416. };
  417. // 添加打字机任务到队列
  418. const addTypingTask = (message, content, speed = 50) => {
  419. typingQueue.value.push({ message, content, speed });
  420. processTypingQueue();
  421. };
  422. const hasValidData = ref(false);
  423. // 创建一个非响应式的对象来存储图表实例
  424. const chartInstancesMap = {};
  425. // 存储上一次的消息的length
  426. const previousMessagesLength = ref(0);
  427. watch(
  428. () => props.messages,
  429. async (newVal, oldVal) => {
  430. // console.log(newVal, 'newVal')
  431. // console.log(oldVal, 'oldVal')
  432. // console.log(previousMessagesLength.value, 'previousMessagesLength')
  433. // console.log(newVal.length, 'newVal.length')
  434. // // 添加空值判断
  435. if (!newVal?.length || newVal === previousMessagesLength.value) return;
  436. previousMessagesLength.value = newVal.length;
  437. if (newVal.length > 0) {
  438. console.log("消息列表已更新,最新消息:", newVal[newVal.length - 1]);
  439. chatStore.messages.push(newVal[newVal.length - 1]);
  440. console.log("消息列表已更新,最新消息:", chatMsg[chatMsg.length - 1]);
  441. console.log("token", localStorage.getItem("localToken"));
  442. // 获取权限
  443. const userStore = useUserStore();
  444. const params1 = {
  445. content: newVal[newVal.length - 1].content,
  446. language: "cn",
  447. marketList: "usa,sg,my,hk,cn,can,vi,th,in",
  448. token: localStorage.getItem("localToken"),
  449. // language: "cn",
  450. // marketList: "hk,cn,usa,my,sg,vi,in,gb"
  451. // token: "+SsksARQgUHIbIG3rRnnbZi0+fEeMx8pywnIlrmTxo5EOPR/wjWDV7w7+ZUseiBtf9kFa/atmNx6QfSpv5w",
  452. };
  453. // 标志
  454. let flag = true;
  455. const codeData = ref();
  456. // 第一阶段,意图识别
  457. try {
  458. // 调用工作流获取回复
  459. const result = await dbqbFirstAPI(params1);
  460. codeData.value = result.data;
  461. console.log(codeData.value, "codeData");
  462. // 根据意图识别结果判断
  463. if (result.code == 200) {
  464. chatStore.messages.push({
  465. class: "ing",
  466. type: "ing",
  467. flag: flag,
  468. content: result.data.kaishi,
  469. });
  470. } else {
  471. flag = false;
  472. console.log("执行回绝话术");
  473. const AIcontent = ref(result.msg);
  474. // 修改后的消息处理逻辑
  475. const processedContent = marked(AIcontent.value);
  476. const katexRegex = /\$\$(.*?)\$\$/g;
  477. const aiContent = processedContent.replace(
  478. katexRegex,
  479. (match, formula) => {
  480. try {
  481. return katex.renderToString(formula, { throwOnError: false });
  482. } catch (error) {
  483. console.error("KaTeX 渲染错误:", error);
  484. return match;
  485. }
  486. }
  487. );
  488. console.log(aiContent, "aiContent");
  489. chatStore.messages.push({
  490. class: "ing",
  491. type: "ing",
  492. flag: flag,
  493. content: aiContent,
  494. });
  495. chatStore.setLoading(false);
  496. }
  497. } catch (e) {
  498. console.log(e, "意图识别失败");
  499. }
  500. if (flag) {
  501. const params2 = {
  502. content: newVal[newVal.length - 1].content,
  503. language: "cn",
  504. marketList: "usa,sg,my,hk,cn,can,vi,th,in",
  505. token: localStorage.getItem("localToken"),
  506. // language: "cn",
  507. // marketList: "hk,cn,usa,my,sg,vi,in,gb"
  508. // token: "+SsksARQgUHIbIG3rRnnbZi0+fEeMx8pywnIlrmTxo5EOPR/wjWDV7w7+ZUseiBtf9kFa/atmNx6QfSpv5w",
  509. name: codeData.value.name,
  510. code: codeData.value.code,
  511. market: codeData.value.market,
  512. };
  513. try {
  514. const env = import.meta.env.VITE_ENV;
  515. const result20 = await dataListAPI({
  516. token:
  517. "8Csj5VVX1UbIb4C3oxrnbZi0+fEeMx8pywnIlrmTm45Cb/EllzWACLto9J9+fCFsfdgBOvKvyY94FvqlvM0",
  518. // "8nkj4QBV1RPIb4CzoRTnbZi0+fEeMx8pywnIlrmTxdwROKkuwWqAWu9orpkpeXVqL98DPfeonNYpHv+mucA",
  519. market: codeData.value.market,
  520. code: codeData.value.code,
  521. language: "cn", //t.value.suoxie,
  522. brainPrivilegeState: 1,
  523. swordPrivilegeState: 1,
  524. stockForecastPrivilegeState: 1,
  525. spaceForecastPrivilegeState: 1,
  526. aibullPrivilegeState: 1,
  527. aigoldBullPrivilegeState: 1,
  528. airadarPrivilegeState: 1,
  529. // marketList: 1,
  530. // brainPrivilegeState: userStore.brainPerssion,
  531. // swordPrivilegeState: userStore.swordPerssion,
  532. // stockForecastPrivilegeState: userStore.pricePerssion,
  533. // spaceForecastPrivilegeState: userStore.timePerssion,
  534. // aibullPrivilegeState: userStore.aibullPerssion,
  535. // aigoldBullPrivilegeState: userStore.aiGnbullPerssion,
  536. // airadarPrivilegeState: userStore.airadarPerssion,
  537. marketList: userStore.aiGoldMarketList,
  538. });
  539. const HomePage = result20.data.HomePage;
  540. const AIGoldBull = result20.data.AIGoldBull;
  541. const katexRegex = /\$\$(.*?)\$\$/g;
  542. let result21;
  543. let result22;
  544. let result23;
  545. let result24;
  546. // 用于跟踪API完成状态和结果
  547. const apiStatus = {
  548. one: { completed: false, result: null, error: null },
  549. two: { completed: false, result: null, error: null },
  550. three: { completed: false, result: null, error: null },
  551. four: { completed: false, result: null, error: null },
  552. };
  553. // 检查并按顺序执行代码的函数
  554. const checkAndExecuteInOrder = () => {
  555. // 检查OneAPI
  556. if (apiStatus.one.completed && !apiStatus.one.executed) {
  557. apiStatus.one.executed = true;
  558. if (apiStatus.one.result) {
  559. console.log("执行OneAPI代码:", apiStatus.one.result);
  560. // 在这里添加OneAPI成功后需要执行的代码
  561. // 删除正在为您生成信息
  562. chatStore.messages.pop();
  563. // 添加报告头和时间
  564. addTypingTask(
  565. {
  566. sender: "ai",
  567. class: "title1",
  568. type: "title1",
  569. content: codeData.value.name + "全景作战报告",
  570. date: moment().format("DD/MM/YYYY"),
  571. },
  572. "",
  573. 50
  574. );
  575. // chatStore.messages.push({
  576. // sender: "ai",
  577. // class: "title1",
  578. // type: "title1",
  579. // content: codeData.value.name + "全景作战报告",
  580. // date: moment().format("MM/DD/YYYY"),
  581. // });
  582. // 添加股票信息框
  583. const pc1 = marked(
  584. result21.data.name +
  585. "\n" +
  586. result21.data.price +
  587. "\n" +
  588. result21.data.date
  589. );
  590. const ac1 = pc1.replace(katexRegex, (match, formula) => {
  591. try {
  592. return katex.renderToString(formula, {
  593. throwOnError: false,
  594. });
  595. } catch (error) {
  596. console.error("KaTeX 渲染错误:", error);
  597. return match;
  598. }
  599. });
  600. // 先推送初始消息
  601. const aiMessage1 = reactive({
  602. sender: "ai",
  603. class: "content1",
  604. type: "content1",
  605. content: "",
  606. isTyping: true,
  607. });
  608. // chatStore.messages.push(aiMessage1);
  609. // let index1 = 0;
  610. // const typingInterval1 = setInterval(() => {
  611. // if (index1 < ac1.length) {
  612. // aiMessage1.content += ac1.charAt(index1);
  613. // index1++;
  614. // } else {
  615. // clearInterval(typingInterval1);
  616. // aiMessage1.isTyping = false;
  617. // }
  618. // }, 50); // 调整速度为50ms/字符
  619. addTypingTask(aiMessage1, ["", ac1], 50);
  620. // chatStore.messages.push({
  621. // sender: "ai",
  622. // class: "content1",
  623. // type: "content1",
  624. // content: ac1,
  625. // });
  626. // 添加六色罗盘
  627. if (HomePage) {
  628. const LiuSeData = JSON.parse(JSON.stringify(toRaw(HomePage)));
  629. const sz = fnGetData(LiuSeData);
  630. if (sz) {
  631. hasValidData.value = true;
  632. console.log("hasValidData设置为:", hasValidData.value);
  633. }
  634. // 先推送K线图消息
  635. const klineMessageId1 = `kline-${Date.now()}`;
  636. console.log("生成K线消息ID:", klineMessageId1);
  637. addTypingTask(
  638. {
  639. sender: "ai",
  640. class: "content1",
  641. type: "content1",
  642. kline: true,
  643. chartData: sz,
  644. messageId: klineMessageId1,
  645. hasValidData: true,
  646. klineType: 1,
  647. },
  648. "",
  649. 50
  650. );
  651. // chatStore.messages.push({
  652. // sender: "ai",
  653. // class: "content1",
  654. // type: "content1",
  655. // kline: true,
  656. // chartData: sz,
  657. // messageId: klineMessageId1,
  658. // hasValidData: true,
  659. // klineType: 1,
  660. // });
  661. // console.log("六色罗盘消息已添加到聊天列表");
  662. // // 在渲染完成后初始化图表
  663. // nextTick(() => {
  664. // console.log("nextTick开始 - 准备渲染图表");
  665. // console.log("消息列表:", chatStore.messages);
  666. // // 寻找最新添加的K线消息索引
  667. // let klineIndex = -1;
  668. // for (let i = 0; i < chatStore.messages.length; i++) {
  669. // if (chatStore.messages[i].messageId === klineMessageId1) {
  670. // klineIndex = i;
  671. // break;
  672. // }
  673. // }
  674. // console.log("找到的K线消息索引:", klineIndex);
  675. // if (klineIndex !== -1) {
  676. // const containerId = `kline-container-${klineIndex}`;
  677. // console.log("图表容器ID:", containerId);
  678. // // 确保DOM已经渲染完成
  679. // setTimeout(() => {
  680. // console.log("延时执行,确保DOM已渲染");
  681. // KlineCanvsEcharts(containerId);
  682. // }, 100); // 短暂延时确保DOM已渲染
  683. // } else {
  684. // console.warn("未找到K线消息");
  685. // }
  686. // });
  687. }
  688. // 度牛尺K线图
  689. if (
  690. AIGoldBull.DNC &&
  691. AIGoldBull.FCX &&
  692. AIGoldBull.JN &&
  693. AIGoldBull.KLine20 &&
  694. AIGoldBull.QSXH
  695. ) {
  696. const AIGoldBullData = JSON.parse(
  697. JSON.stringify(toRaw(AIGoldBull))
  698. );
  699. const HomePageData = JSON.parse(
  700. JSON.stringify(toRaw(HomePage))
  701. );
  702. console.log("处理 K 线数据 - 开始");
  703. console.log("AIGoldBullData", AIGoldBullData);
  704. console.log("HomePageData", HomePageData);
  705. const Kline20 = {
  706. name: HomePageData.StockInformation.Name,
  707. Kline: AIGoldBullData,
  708. };
  709. // 打印K线数据结构
  710. console.log("K线数据结构:", Kline20);
  711. console.log("K线数据名称:", Kline20.name);
  712. console.log("K线数据:", Kline20.Kline ? Kline20.Kline : null);
  713. // 设置数据有效标志
  714. hasValidData.value = true;
  715. console.log("hasValidData设置为:", hasValidData.value);
  716. // chatStore.messages.pop();
  717. // 先推送K线图消息
  718. const klineMessageId2 = `kline-${Date.now() + 1}`;
  719. console.log("生成K线消息ID:", klineMessageId2);
  720. // chatStore.messages.push({
  721. // sender: "ai",
  722. // class: "content2",
  723. // type: "content2",
  724. // kline: true,
  725. // chartData: Kline20,
  726. // messageId: klineMessageId2,
  727. // hasValidData: true, // 添加hasValidData标志
  728. // klineType: 2,
  729. // });
  730. addTypingTask(
  731. {
  732. sender: "ai",
  733. class: "content2",
  734. type: "content2",
  735. kline: true,
  736. chartData: Kline20,
  737. messageId: klineMessageId2,
  738. hasValidData: true, // 添加hasValidData标志
  739. klineType: 2,
  740. },
  741. "",
  742. 50
  743. );
  744. // console.log("K线消息已添加到聊天列表");
  745. // // 在渲染完成后初始化图表
  746. // nextTick(() => {
  747. // console.log("nextTick开始 - 准备渲染图表");
  748. // console.log("消息列表:", chatStore.messages);
  749. // // 寻找最新添加的K线消息索引
  750. // let klineIndex = -1;
  751. // for (let i = 0; i < chatStore.messages.length; i++) {
  752. // if (chatStore.messages[i].messageId === klineMessageId2) {
  753. // klineIndex = i;
  754. // break;
  755. // }
  756. // }
  757. // console.log("找到的K线消息索引:", klineIndex);
  758. // if (klineIndex !== -1) {
  759. // const containerId = `kline-container-${klineIndex}`;
  760. // console.log("图表容器ID:", containerId);
  761. // // 确保DOM已经渲染完成
  762. // setTimeout(() => {
  763. // console.log("延时执行,确保DOM已渲染");
  764. // KlineCanvsEcharts(containerId);
  765. // }, 100); // 短暂延时确保DOM已渲染
  766. // } else {
  767. // console.warn("未找到K线消息");
  768. // }
  769. // });
  770. }
  771. }
  772. }
  773. // 检查TwoAPI(需要OneAPI已执行)
  774. if (
  775. apiStatus.one.executed &&
  776. apiStatus.two.completed &&
  777. !apiStatus.two.executed
  778. ) {
  779. apiStatus.two.executed = true;
  780. if (apiStatus.two.result) {
  781. console.log("执行TwoAPI代码:", apiStatus.two.result);
  782. // 在这里添加TwoAPI成功后需要执行的代码
  783. // 添加标题2
  784. addTypingTask(
  785. {
  786. sender: "ai",
  787. class: "title2",
  788. type: "title2",
  789. content: "",
  790. },
  791. "",
  792. 50
  793. );
  794. // chatStore.messages.push({
  795. // sender: "ai",
  796. // class: "title2",
  797. // type: "title2",
  798. // content: "",
  799. // });
  800. // 添加内容框1
  801. const pc2 = marked(result22.data.hxjzpg);
  802. console.log(pc2, "pc2");
  803. const ac2 = pc2.replace(katexRegex, (match, formula) => {
  804. try {
  805. return katex.renderToString(formula, {
  806. throwOnError: false,
  807. });
  808. } catch (error) {
  809. console.error("KaTeX 渲染错误:", error);
  810. return match;
  811. }
  812. });
  813. // 先推送初始消息
  814. const aiMessage2 = reactive({
  815. sender: "ai",
  816. class: "content3",
  817. type: "content3",
  818. content: "",
  819. isTyping: true,
  820. });
  821. // chatStore.messages.push(aiMessage2);
  822. // let index2 = 0;
  823. // const typingInterval2 = setInterval(() => {
  824. // if (index2 < ac2.length) {
  825. // aiMessage2.content += ac2.charAt(index2);
  826. // index2++;
  827. // } else {
  828. // clearInterval(typingInterval2);
  829. // aiMessage2.isTyping = false;
  830. // }
  831. // }, 50); // 调整速度为50ms/字符
  832. addTypingTask(aiMessage2, ["", ac2], 50);
  833. // chatStore.messages.push({
  834. // sender: "ai",
  835. // class: "content3",
  836. // type: "content3",
  837. // content: ac2,
  838. // });
  839. }
  840. }
  841. // 检查ThreeAPI(需要TwoAPI已执行)
  842. if (
  843. apiStatus.two.executed &&
  844. apiStatus.three.completed &&
  845. !apiStatus.three.executed
  846. ) {
  847. apiStatus.three.executed = true;
  848. if (apiStatus.three.result) {
  849. console.log("执行ThreeAPI代码:", apiStatus.three.result);
  850. // 在这里添加ThreeAPI成功后需要执行的代码
  851. // 添加标题3-2
  852. addTypingTask(
  853. {
  854. sender: "ai",
  855. class: "title3",
  856. type: "title3",
  857. content: title2,
  858. },
  859. "",
  860. 50
  861. );
  862. // chatStore.messages.push({
  863. // sender: "ai",
  864. // class: "title3",
  865. // type: "title3",
  866. // content: title2,
  867. // });
  868. // 添加内容框2
  869. // const pc3 = marked(result23.data.zhuli1+'\n'+result23.data.zhuli2+'\n'+result23.data.zhuli3);
  870. // const ac3 = pc3.replace(
  871. // katexRegex,
  872. // (match, formula) => {
  873. // try {
  874. // return katex.renderToString(formula, { throwOnError: false });
  875. // } catch (error) {
  876. // console.error("KaTeX 渲染错误:", error);
  877. // return match;
  878. // }
  879. // }
  880. // );
  881. const ac31 = `<p style="margin:0;color:#FADC0C;display:flex;justify-content:center;font-size:28px">【主力行为】</p><p>`;
  882. const ac32 = `${result23.data.zhuli1}</p><p>${result23.data.zhuli2}</p><p>${result23.data.zhuli3}</p>`;
  883. const ac3 = `<p style="margin:0;color:#FADC0C;display:flex;justify-content:center;font-size:28px">【主力行为】</p><p>${result23.data.zhuli1}</p><p>${result23.data.zhuli2}</p><p>${result23.data.zhuli3}</p>`;
  884. // 先推送初始消息
  885. const aiMessage3 = reactive({
  886. sender: "ai",
  887. class: "content3",
  888. type: "content3",
  889. content: "",
  890. isTyping: true,
  891. });
  892. // chatStore.messages.push(aiMessage3);
  893. // let index3 = 0;
  894. // const typingInterval3 = setInterval(() => {
  895. // if (index3 < ac3.length) {
  896. // aiMessage3.content += ac3.charAt(index3);
  897. // index3++;
  898. // } else {
  899. // clearInterval(typingInterval3);
  900. // aiMessage3.isTyping = false;
  901. // }
  902. // }, 50); // 调整速度为50ms/字符
  903. addTypingTask(aiMessage3, [ac31, ac32], 50);
  904. // chatStore.messages.push({
  905. // sender: "ai",
  906. // class: "content3",
  907. // type: "content3",
  908. // content: ac3,
  909. // });
  910. // 添加标题3-3
  911. addTypingTask(
  912. {
  913. sender: "ai",
  914. class: "title3",
  915. type: "title3",
  916. content: title3,
  917. },
  918. "",
  919. 50
  920. );
  921. // chatStore.messages.push({
  922. // sender: "ai",
  923. // class: "title3",
  924. // type: "title3",
  925. // content: title3,
  926. // });
  927. // 添加内容框3
  928. const arr = result23.data.kongjian.split(",");
  929. const kongjian = `<p style="margin:0;color:#FADC0C;display:flex;justify-content:center;font-size:28px">【空间维度】</p><p style="display:flex;justify-content:center;">${arr[0]},${arr[1]}</p><p style="display:flex;justify-content:center;">${arr[2]},${arr[3]}</p>`;
  930. const shijian = `<p style="margin:0;color:#FADC0C;display:flex;justify-content:center;font-size:28px">【时间维度】</p><p style="display:flex;justify-content:center;">${result23.data.shijian}</p>`;
  931. const nengliang = `<p style="margin:0;color:#FADC0C;display:flex;justify-content:center;font-size:28px">【能量维度】</p><p>${result23.data.nengliang}</p>`;
  932. const ac4 = kongjian + shijian + nengliang;
  933. const ac41 = `<p style="margin:0;color:#FADC0C;display:flex;justify-content:center;font-size:28px">【空间维度】</p><p style="display:flex;justify-content:center;">`;
  934. const ac42 = `${arr[0]},${arr[1]}`;
  935. const ac43 = `</p><p style="display:flex;justify-content:center;">`;
  936. const ac44 = `${arr[2]},${arr[3]}</p>`;
  937. const ac45 = `<p style="margin:0;color:#FADC0C;display:flex;justify-content:center;font-size:28px">【时间维度】</p><p style="display:flex;justify-content:center;">`;
  938. const ac46 = `${result23.data.shijian}</p>`;
  939. const ac47 = `<p style="margin:0;color:#FADC0C;display:flex;justify-content:center;font-size:28px">【能量维度】</p><p style="display:flex;justify-content:center;">`;
  940. const ac48 = `${result23.data.nengliang}</p>`;
  941. // const pc4 = marked(
  942. // kongjian +
  943. // "\n" +
  944. // result23.data.shijian +
  945. // "\n" +
  946. // result23.data.nengliang
  947. // );
  948. // const ac4 = pc4.replace(katexRegex, (match, formula) => {
  949. // try {
  950. // return katex.renderToString(formula, { throwOnError: false });
  951. // } catch (error) {
  952. // console.error("KaTeX 渲染错误:", error);
  953. // return match;
  954. // }
  955. // });
  956. // 先推送初始消息
  957. const aiMessage4 = reactive({
  958. sender: "ai",
  959. class: "content3",
  960. type: "content3",
  961. content: "",
  962. isTyping: true,
  963. });
  964. // chatStore.messages.push(aiMessage4);
  965. // let index4 = 0;
  966. // const typingInterval4 = setInterval(() => {
  967. // if (index4 < ac4.length) {
  968. // aiMessage4.content += ac4.charAt(index4);
  969. // index4++;
  970. // } else {
  971. // clearInterval(typingInterval4);
  972. // aiMessage4.isTyping = false;
  973. // }
  974. // }, 50); // 调整速度为50ms/字符
  975. addTypingTask(
  976. aiMessage4,
  977. [ac41, ac42, ac43, ac44, ac45, ac46, ac47, ac48],
  978. 50
  979. );
  980. // chatStore.messages.push({
  981. // sender: "ai",
  982. // class: "content3",
  983. // type: "content3",
  984. // content: ac4,
  985. // });
  986. }
  987. }
  988. // 检查FourAPI(需要ThreeAPI已执行)
  989. if (
  990. apiStatus.three.executed &&
  991. apiStatus.four.completed &&
  992. !apiStatus.four.executed
  993. ) {
  994. apiStatus.four.executed = true;
  995. if (apiStatus.four.result) {
  996. console.log("执行FourAPI代码:", apiStatus.four.result);
  997. // 在这里添加FourAPI成功后需要执行的代码
  998. // 添加标题3-4
  999. addTypingTask(
  1000. {
  1001. sender: "ai",
  1002. class: "title3",
  1003. type: "title3",
  1004. content: title4,
  1005. },
  1006. "",
  1007. 50
  1008. );
  1009. // chatStore.messages.push({
  1010. // sender: "ai",
  1011. // class: "title3",
  1012. // type: "title3",
  1013. // content: title4,
  1014. // });
  1015. // 添加内容框4
  1016. const cftj = `<p style="margin:0;color:#FADC0C;display:flex;justify-content:center;font-size:28px">【触发条件】</p><p>${result24.data.cftl}</p>`;
  1017. const gfzl = `<p style="margin:0;color:#FADC0C;display:flex;justify-content:center;font-size:28px">【攻防指令】</p><p>${result24.data.gfzl}</p>`;
  1018. const ac5 = cftj + gfzl;
  1019. const ac51 = `<p style="margin:0;color:#FADC0C;display:flex;justify-content:center;font-size:28px">【触发条件】</p><p>`;
  1020. const ac52 = `${result24.data.cftl}</p>`;
  1021. const ac53 = `<p style="margin:0;color:#FADC0C;display:flex;justify-content:center;font-size:28px">【攻防指令】</p><p>`;
  1022. const ac54 = `${result24.data.gfzl}</p>`;
  1023. // const pc5 = marked(result24.data.cftl + "/n" + result24.data.gfzl);
  1024. // const ac5 = pc5.replace(katexRegex, (match, formula) => {
  1025. // try {
  1026. // return katex.renderToString(formula, { throwOnError: false });
  1027. // } catch (error) {
  1028. // console.error("KaTeX 渲染错误:", error);
  1029. // return match;
  1030. // }
  1031. // });
  1032. // 先推送初始消息
  1033. const aiMessage5 = reactive({
  1034. sender: "ai",
  1035. class: "content3",
  1036. type: "content3",
  1037. content: "",
  1038. isTyping: true,
  1039. });
  1040. // chatStore.messages.push(aiMessage5);
  1041. // let index5 = 0;
  1042. // const typingInterval5 = setInterval(() => {
  1043. // if (index5 < ac5.length) {
  1044. // aiMessage5.content += ac5.charAt(index5);
  1045. // index5++;
  1046. // } else {
  1047. // clearInterval(typingInterval5);
  1048. // aiMessage5.isTyping = false;
  1049. // }
  1050. // }, 50); // 调整速度为50ms/字符
  1051. addTypingTask(aiMessage5, [ac51, ac52, ac53, ac54], 50);
  1052. // chatStore.messages.push({
  1053. // sender: "ai",
  1054. // class: "content3",
  1055. // type: "content3",
  1056. // content: ac5,
  1057. // });
  1058. const ac6 = "该内容由AI生成,请注意甄别";
  1059. // 先推送初始消息
  1060. const aiMessage6 = reactive({
  1061. sender: "ai",
  1062. class: "mianze",
  1063. type: "mianze",
  1064. content: "",
  1065. isTyping: true,
  1066. });
  1067. // chatStore.messages.push(aiMessage6);
  1068. // let index6 = 0;
  1069. // const typingInterval6 = setInterval(() => {
  1070. // if (index6 < ac6.length) {
  1071. // aiMessage6.content += ac6.charAt(index6);
  1072. // index6++;
  1073. // } else {
  1074. // clearInterval(typingInterval6);
  1075. // aiMessage6.isTyping = false;
  1076. // }
  1077. // }, 50); // 调整速度为50ms/字符
  1078. addTypingTask(aiMessage6, ["", ac6], 100);
  1079. // chatStore.messages.push({
  1080. // sender: "ai",
  1081. // class: "mianze",
  1082. // type: "mianze",
  1083. // content: "内容由AI生成,请注意甄别",
  1084. // });
  1085. }
  1086. }
  1087. // 检查是否所有API都已完成并执行
  1088. if (
  1089. apiStatus.one.completed &&
  1090. apiStatus.two.completed &&
  1091. apiStatus.three.completed &&
  1092. apiStatus.four.completed &&
  1093. apiStatus.four.executed
  1094. ) {
  1095. console.log("所有API已完成,开始收集音频URL");
  1096. // 收集所有音频URL
  1097. const audioUrls = [];
  1098. console.log("API返回结果检查:");
  1099. console.log("result21:", result21);
  1100. console.log("result22:", result22);
  1101. console.log("result23:", result23);
  1102. console.log("result24:", result24);
  1103. if (result21?.data?.url) {
  1104. console.log("添加result21音频URL:", result21.data.url);
  1105. audioUrls.push(result21.data.url.trim());
  1106. }
  1107. if (result22?.data?.url) {
  1108. console.log("添加result22音频URL:", result22.data.url);
  1109. audioUrls.push(result22.data.url.trim());
  1110. }
  1111. if (result23?.data?.url) {
  1112. console.log("添加result23音频URL:", result23.data.url);
  1113. audioUrls.push(result23.data.url.trim());
  1114. }
  1115. if (result24?.data?.url) {
  1116. console.log("添加result24音频URL:", result24.data.url);
  1117. audioUrls.push(result24.data.url.trim());
  1118. }
  1119. console.log("收集到的音频URLs:", audioUrls);
  1120. console.log("语音是否启用:", audioStore.isVoiceEnabled);
  1121. // 开始轮流播放音频
  1122. if (audioUrls.length > 0 && audioStore.isVoiceEnabled) {
  1123. console.log("开始播放音频序列");
  1124. playAudioSequence(audioUrls);
  1125. } else {
  1126. console.log(
  1127. "跳过音频播放 - audioUrls长度:",
  1128. audioUrls.length,
  1129. "语音启用状态:",
  1130. audioStore.isVoiceEnabled
  1131. );
  1132. }
  1133. }
  1134. };
  1135. const handleOneAPI = async () => {
  1136. try {
  1137. result21 = await dbqbSecondOneAPI(params2);
  1138. console.log("OneAPI成功返回:", result21);
  1139. apiStatus.one.completed = true;
  1140. apiStatus.one.result = result21;
  1141. // 检查是否可以执行
  1142. checkAndExecuteInOrder();
  1143. } catch (error) {
  1144. console.error("OneAPI失败:", error);
  1145. apiStatus.one.completed = true;
  1146. apiStatus.one.error = error;
  1147. // 即使失败也要检查后续执行
  1148. checkAndExecuteInOrder();
  1149. }
  1150. };
  1151. const handleTwoAPI = async () => {
  1152. try {
  1153. result22 = await dbqbSecondTwoAPI(params2);
  1154. console.log("TwoAPI成功返回:", result22);
  1155. apiStatus.two.completed = true;
  1156. apiStatus.two.result = result22;
  1157. // 检查是否可以执行
  1158. checkAndExecuteInOrder();
  1159. } catch (error) {
  1160. console.error("TwoAPI失败:", error);
  1161. apiStatus.two.completed = true;
  1162. apiStatus.two.error = error;
  1163. checkAndExecuteInOrder();
  1164. }
  1165. };
  1166. const handleThreeAPI = async () => {
  1167. try {
  1168. result23 = await dbqbSecondThreeAPI(params2);
  1169. console.log("ThreeAPI成功返回:", result23);
  1170. apiStatus.three.completed = true;
  1171. apiStatus.three.result = result23;
  1172. // 检查是否可以执行
  1173. checkAndExecuteInOrder();
  1174. } catch (error) {
  1175. console.error("ThreeAPI失败:", error);
  1176. apiStatus.three.completed = true;
  1177. apiStatus.three.error = error;
  1178. checkAndExecuteInOrder();
  1179. }
  1180. };
  1181. const handleFourAPI = async () => {
  1182. try {
  1183. result24 = await dbqbSecondFourAPI(params2);
  1184. console.log("FourAPI成功返回:", result24);
  1185. apiStatus.four.completed = true;
  1186. apiStatus.four.result = result24;
  1187. // 检查是否可以执行
  1188. checkAndExecuteInOrder();
  1189. } catch (error) {
  1190. console.error("FourAPI失败:", error);
  1191. apiStatus.four.completed = true;
  1192. apiStatus.four.error = error;
  1193. checkAndExecuteInOrder();
  1194. }
  1195. };
  1196. handleOneAPI();
  1197. handleTwoAPI();
  1198. handleThreeAPI();
  1199. handleFourAPI();
  1200. // 同时发起所有API调用
  1201. // const promises = [
  1202. // dbqbSecondOneAPI(params2),
  1203. // dbqbSecondTwoAPI(params2),
  1204. // dbqbSecondThreeAPI(params2),
  1205. // dbqbSecondFourAPI(params2),
  1206. // ];
  1207. // const results = await Promise.allSettled(promises);
  1208. // let result21;
  1209. // let result22;
  1210. // let result23;
  1211. // let result24;
  1212. // // 检查每个API的结果并执行相应代码
  1213. // console
  1214. // if (results[0].status === "fulfilled") {
  1215. // result21 = results[0].value;
  1216. // // oneAPI成功返回时执行的代码
  1217. // console.log("oneAPI成功:", result21);
  1218. // // 在这里添加你的业务逻辑
  1219. // }
  1220. // if (results[1].status === "fulfilled") {
  1221. // result22 = results[1].value;
  1222. // // twoAPI成功返回时执行的代码
  1223. // console.log("twoAPI成功:", result22);
  1224. // // 在这里添加你的业务逻辑
  1225. // }
  1226. // if (results[2].status === "fulfilled") {
  1227. // result23 = results[2].value;
  1228. // // threeAPI成功返回时执行的代码
  1229. // console.log("threeAPI成功:", result23);
  1230. // }
  1231. // if (results[3].status === "fulfilled") {
  1232. // result24 = results[3].value;
  1233. // // fourAPI成功返回时执行的代码
  1234. // console.log("fourAPI成功:", result24);
  1235. // }
  1236. // const result21 = await dbqbSecondOneAPI(params2);
  1237. // const result22 = await dbqbSecondTwoAPI(params2);
  1238. // const result23 = await dbqbSecondThreeAPI(params2);
  1239. // const result24 = await dbqbSecondFourAPI(params2);
  1240. // 音频收集逻辑已移至checkAndExecuteInOrder函数内部
  1241. // // 修改后的消息处理逻辑
  1242. // const processedContent = marked(AIcontent.value);
  1243. // const katexRegex = /\$\$(.*?)\$\$/g;
  1244. // const plainTextContent = htmlToText(processedContent);
  1245. // // 获取音频数据
  1246. // const TTSResult = (
  1247. // await TTSAPI({
  1248. // language: "cn",
  1249. // content: plainTextContent,
  1250. // })
  1251. // ).json();
  1252. // const tts = ref();
  1253. // await TTSResult.then((res) => {
  1254. // tts.value = JSON.parse(res.data);
  1255. // });
  1256. // const ttsUrl = ref();
  1257. // if (tts.value.tts_cn !== null) {
  1258. // audioStore.ttsUrl = tts.value.tts_cn.url;
  1259. // ttsUrl.value = tts.value.tts_cn.url;
  1260. // audioStore.isNewInstance = true;
  1261. // } else if (tts.value.tts_en !== null) {
  1262. // audioStore.ttsUrl = tts.value.tts_en.url;
  1263. // ttsUrl.value = tts.value.tts_en.url;
  1264. // audioStore.isNewInstance = true;
  1265. // }
  1266. // if (ttsUrl.value) {
  1267. // nextTick(() => {
  1268. // if (audioStore.isVoiceEnabled) {
  1269. // console.log("ttsUrl.value", ttsUrl.value);
  1270. // // 播放音频
  1271. // playAudio(ttsUrl.value);
  1272. // }
  1273. // });
  1274. // }
  1275. // // chatStore.messages.pop();
  1276. // // 先推送初始消息
  1277. // const aiMessage = reactive({
  1278. // sender: "ai",
  1279. // content: "",
  1280. // isTyping: true,
  1281. // });
  1282. // chatStore.messages.push(aiMessage);
  1283. // let index = 0;
  1284. // const typingInterval = setInterval(() => {
  1285. // if (index < processedContent.length) {
  1286. // aiMessage.content += processedContent.charAt(index);
  1287. // index++;
  1288. // } else {
  1289. // clearInterval(typingInterval);
  1290. // aiMessage.isTyping = false;
  1291. // // 延迟处理KaTeX确保DOM已更新
  1292. // nextTick(() => {
  1293. // aiMessage.content = aiMessage.content.replace(
  1294. // katexRegex,
  1295. // (match, formula) => {
  1296. // try {
  1297. // return katex.renderToString(formula, {
  1298. // throwOnError: false,
  1299. // });
  1300. // } catch (error) {
  1301. // console.error("KaTeX 渲染错误:", error);
  1302. // return match;
  1303. // }
  1304. // }
  1305. // );
  1306. // chatStore.setLoading(false);
  1307. // });
  1308. // }
  1309. // }, 50); // 调整速度为50ms/字符
  1310. // // } else {
  1311. // // chatStore.messages.pop();
  1312. // // chatStore.messages.push({
  1313. // // sender: "ai",
  1314. // // content: status.msg
  1315. // // });
  1316. // // chatStore.setLoading(false);
  1317. // // }
  1318. // }
  1319. } catch (e) {
  1320. console.error("请求失败:", e);
  1321. hasValidData.value = false; // 请求失败时设置数据无效
  1322. // chatStore.messages.pop();
  1323. // chatStore.messages.push({
  1324. // sender: "ai",
  1325. // content: "AI思考失败,请稍后再试... ",
  1326. // });
  1327. // chatStore.setLoading(false);
  1328. } finally {
  1329. chatStore.setLoading(false);
  1330. await chatStore.getUserCount();
  1331. }
  1332. }
  1333. }
  1334. },
  1335. { deep: true }
  1336. );
  1337. function KlineCanvsEcharts(containerId) {
  1338. function vwToPx(vw) {
  1339. console.log((window.innerWidth * vw) / 100, "vwToPx");
  1340. return (window.innerWidth * vw) / 100;
  1341. }
  1342. console.log("KLine渲染: 开始处理数据, 容器ID:", containerId);
  1343. // 从 chatStore 中获取数据
  1344. const messages = chatStore.messages;
  1345. console.log("KLine渲染: 获取到的消息:", messages);
  1346. let klineMessageIndex = -1;
  1347. let klineData = null;
  1348. // 查找最近的 K线 消息
  1349. // for (let i = messages.length - 1; i >= 0; i--) {
  1350. // console.log('KLine渲染: 检查消息:', messages[i]);
  1351. // if (messages[i].type === 'kline' && messages[i].chartData) {
  1352. // klineMessageIndex = i;
  1353. // klineData = messages[i].chartData;
  1354. // console.log('KLine渲染: 找到K线消息索引:', klineMessageIndex);
  1355. // console.log('KLine渲染: 找到K线数据:', klineData);
  1356. // break;
  1357. // }
  1358. // }
  1359. klineMessageIndex = containerId.split("-")[2];
  1360. console.log("KLine渲染: 找到K线消息索引:", klineMessageIndex);
  1361. if (
  1362. messages[klineMessageIndex].kline &&
  1363. messages[klineMessageIndex].chartData
  1364. ) {
  1365. klineData = messages[klineMessageIndex].chartData;
  1366. }
  1367. var KlineOption = {};
  1368. // 检测设备类型
  1369. const isMobile = window.innerWidth < 768;
  1370. const isTablet = window.innerWidth >= 768 && window.innerWidth < 1024;
  1371. console.log(
  1372. "KLine渲染: 设备类型",
  1373. isMobile ? "移动设备" : isTablet ? "平板设备" : "桌面设备"
  1374. );
  1375. if (messages[klineMessageIndex].klineType == 1) {
  1376. if (!klineData) {
  1377. console.warn("六色罗盘渲染: 数据无效 - 在chatStore中找不到有效的K线数据");
  1378. return;
  1379. }
  1380. // 获取容器元素
  1381. const container = document.getElementById(containerId);
  1382. if (!container) {
  1383. console.error("六色罗盘渲染: 找不到容器元素:", containerId);
  1384. return;
  1385. }
  1386. // 创建图表实例
  1387. console.log("六色罗盘渲染: 创建图表实例");
  1388. try {
  1389. // 如果已有实例,先销毁
  1390. if (chartInstancesMap[containerId]) {
  1391. console.log("六色罗盘渲染: 销毁已有图表实例");
  1392. chartInstancesMap[containerId].dispose();
  1393. delete chartInstancesMap[containerId];
  1394. }
  1395. // 使用普通变量存储实例
  1396. chartInstancesMap[containerId] = echarts.init(container);
  1397. console.log("六色罗盘渲染: 图表实例创建成功");
  1398. } catch (error) {
  1399. console.error("六色罗盘渲染: 图表实例创建失败:", error);
  1400. return;
  1401. }
  1402. const name = ref("六色罗盘");
  1403. const size = ref(16);
  1404. // PC版字体大小
  1405. if (window.innerWidth > 768) {
  1406. size.value = 25;
  1407. }
  1408. KlineOption = {
  1409. tooltip: {
  1410. show: !1,
  1411. },
  1412. series: [
  1413. {
  1414. name: "\u4eea\u8868\u76d8",
  1415. type: "gauge",
  1416. center: ["50%", "50%"],
  1417. radius: "90%",
  1418. startAngle: 140,
  1419. endAngle: -140,
  1420. min: 0,
  1421. max: 6,
  1422. precision: 0,
  1423. splitNumber: 30, // 分成30份
  1424. axisLine: {
  1425. show: !0,
  1426. lineStyle: {
  1427. color: [
  1428. [0.17, "#FC4407"],
  1429. [0.33, "#FDC404"],
  1430. [0.5, "#2D8FFD"],
  1431. [0.67, "#87CCE7"],
  1432. [0.83, "#C1F478"],
  1433. [1, "#8FEB8D"],
  1434. ],
  1435. width: 20,
  1436. },
  1437. },
  1438. axisTick: {
  1439. show: !0,
  1440. splitNumber: 9,
  1441. length: 8,
  1442. lineStyle: {
  1443. color: "#eee",
  1444. width: 1,
  1445. type: "solid",
  1446. },
  1447. },
  1448. axisLabel: {
  1449. show: true,
  1450. formatter: function (v) {},
  1451. textStyle: {
  1452. color: "auto",
  1453. },
  1454. },
  1455. // 中途切割
  1456. splitLine: {
  1457. show: !0,
  1458. length: 20,
  1459. lineStyle: {
  1460. color: "#eee",
  1461. width: 2,
  1462. type: "solid",
  1463. },
  1464. },
  1465. pointer: {
  1466. length: "80%",
  1467. width: 8,
  1468. color: "auto",
  1469. },
  1470. title: {
  1471. show: !0,
  1472. offsetCenter: ["-65%", -10],
  1473. textStyle: {
  1474. color: "#333",
  1475. fontSize: 15,
  1476. },
  1477. },
  1478. detail: {
  1479. show: !0,
  1480. backgroundColor: "rgba(0,0,0,0)",
  1481. borderWidth: 0,
  1482. borderColor: "#ccc",
  1483. width: 100,
  1484. height: 40,
  1485. offsetCenter: ["-90%", 0], // name位置
  1486. formatter: function () {
  1487. return name.value;
  1488. },
  1489. textStyle: {
  1490. color: "auto",
  1491. fontSize: size.value, // 字体尺寸
  1492. },
  1493. },
  1494. data: [{ value: klineData }],
  1495. },
  1496. ],
  1497. };
  1498. } else if (messages[klineMessageIndex].klineType == 2) {
  1499. if (!klineData || !klineData.Kline) {
  1500. console.warn("KLine渲染: 数据无效 - 在chatStore中找不到有效的K线数据");
  1501. return;
  1502. }
  1503. // 获取容器元素
  1504. const container = document.getElementById(containerId);
  1505. if (!container) {
  1506. console.error("KLine渲染: 找不到容器元素:", containerId);
  1507. return;
  1508. }
  1509. // 创建图表实例
  1510. console.log("KLine渲染: 创建图表实例");
  1511. try {
  1512. // 如果已有实例,先销毁
  1513. if (chartInstancesMap[containerId]) {
  1514. console.log("KLine渲染: 销毁已有图表实例");
  1515. chartInstancesMap[containerId].dispose();
  1516. delete chartInstancesMap[containerId];
  1517. }
  1518. // 使用普通变量存储实例
  1519. chartInstancesMap[containerId] = echarts.init(container);
  1520. console.log("KLine渲染: 图表实例创建成功");
  1521. } catch (error) {
  1522. console.error("KLine渲染: 图表实例创建失败:", error);
  1523. return;
  1524. }
  1525. const data = klineData.Kline;
  1526. console.log("KLine渲染: Kline数据", data);
  1527. // 切割数据方法
  1528. const splitData = (a) => {
  1529. console.log("KLine渲染: 开始数据切割");
  1530. const categoryData = [];
  1531. let values = [];
  1532. for (let i = 0; i < a.length; i++) {
  1533. categoryData.push(a[i][0]);
  1534. values.push([a[i][1], a[i][2], a[i][3], a[i][4]]);
  1535. }
  1536. console.log("KLine渲染: 日期数据点数量", categoryData.length);
  1537. console.log("KLine渲染: 值数据点数量", values.length);
  1538. return { categoryData, values };
  1539. };
  1540. // 给配置项
  1541. console.log("KLine渲染: 开始配置图表选项");
  1542. const arr1 = [];
  1543. const arr2 = [];
  1544. const arr3 = [];
  1545. const arr4 = [];
  1546. const changeColorKline = (QSXH, KLine20) => {
  1547. if (QSXH) {
  1548. QSXH.map((item) => {
  1549. KLine20.map((kline_item) => {
  1550. if (item[1] == 1 && item[0] == kline_item[0]) {
  1551. arr1.push(kline_item);
  1552. arr2.push([
  1553. kline_item[0],
  1554. null,
  1555. null,
  1556. null,
  1557. null,
  1558. null,
  1559. null,
  1560. null,
  1561. ]);
  1562. arr3.push([
  1563. kline_item[0],
  1564. null,
  1565. null,
  1566. null,
  1567. null,
  1568. null,
  1569. null,
  1570. null,
  1571. ]);
  1572. arr4.push([
  1573. kline_item[0],
  1574. null,
  1575. null,
  1576. null,
  1577. null,
  1578. null,
  1579. null,
  1580. null,
  1581. ]);
  1582. }
  1583. if (item[1] == 2 && item[0] == kline_item[0]) {
  1584. arr2.push(kline_item);
  1585. arr1.push([
  1586. kline_item[0],
  1587. null,
  1588. null,
  1589. null,
  1590. null,
  1591. null,
  1592. null,
  1593. null,
  1594. ]);
  1595. arr3.push([
  1596. kline_item[0],
  1597. null,
  1598. null,
  1599. null,
  1600. null,
  1601. null,
  1602. null,
  1603. null,
  1604. ]);
  1605. arr4.push([
  1606. kline_item[0],
  1607. null,
  1608. null,
  1609. null,
  1610. null,
  1611. null,
  1612. null,
  1613. null,
  1614. ]);
  1615. }
  1616. if (item[1] == 3 && item[0] == kline_item[0]) {
  1617. arr3.push(kline_item);
  1618. arr2.push([
  1619. kline_item[0],
  1620. null,
  1621. null,
  1622. null,
  1623. null,
  1624. null,
  1625. null,
  1626. null,
  1627. ]);
  1628. arr1.push([
  1629. kline_item[0],
  1630. null,
  1631. null,
  1632. null,
  1633. null,
  1634. null,
  1635. null,
  1636. null,
  1637. ]);
  1638. arr4.push([
  1639. kline_item[0],
  1640. null,
  1641. null,
  1642. null,
  1643. null,
  1644. null,
  1645. null,
  1646. null,
  1647. ]);
  1648. }
  1649. if (item[1] == 4 && item[0] == kline_item[0]) {
  1650. arr4.push(kline_item);
  1651. arr2.push([
  1652. kline_item[0],
  1653. null,
  1654. null,
  1655. null,
  1656. null,
  1657. null,
  1658. null,
  1659. null,
  1660. ]);
  1661. arr3.push([
  1662. kline_item[0],
  1663. null,
  1664. null,
  1665. null,
  1666. null,
  1667. null,
  1668. null,
  1669. null,
  1670. ]);
  1671. arr1.push([
  1672. kline_item[0],
  1673. null,
  1674. null,
  1675. null,
  1676. null,
  1677. null,
  1678. null,
  1679. null,
  1680. ]);
  1681. }
  1682. });
  1683. });
  1684. }
  1685. };
  1686. console.log(arr1, arr2, arr3, arr4);
  1687. changeColorKline(data.QSXH, data.KLine20);
  1688. var dealData = splitData(data.KLine20);
  1689. var dealData1 = splitData(arr1);
  1690. var dealData2 = splitData(arr2);
  1691. var dealData3 = splitData(arr3);
  1692. var dealData4 = splitData(arr4);
  1693. var dealGnBullData = data.JN;
  1694. function processMAData(data) {
  1695. let processedData = [];
  1696. data.forEach((item, idx) => {
  1697. processedData.push({
  1698. date: item[0],
  1699. value: item[1],
  1700. type: item[2],
  1701. });
  1702. });
  1703. // 当某一种type只存在一天,设置另一种type透明
  1704. let singleTypeRed = [{ min: 0, max: 0, color: "#000" }];
  1705. let singleTypeYellow = [{ min: 0, max: 0, color: "#000" }];
  1706. let singleTypeGreen = [{ min: 0, max: 0, color: "#000" }];
  1707. for (let i = 1; i < processedData.length; i++) {
  1708. if (processedData[i].type !== processedData[i - 1].type) {
  1709. if (
  1710. i == processedData.length - 1 ||
  1711. (processedData[i].type !== processedData[i + 1].type &&
  1712. processedData[i - 1].type === processedData[i + 1].type)
  1713. ) {
  1714. if (processedData[i - 1].type === 0) {
  1715. singleTypeGreen.push({
  1716. min: i - 1,
  1717. max: i,
  1718. color: "rgba(0,0,0,0)",
  1719. });
  1720. } else if (processedData[i - 1].type === 1) {
  1721. singleTypeRed.push({
  1722. min: i - 1,
  1723. max: i,
  1724. color: "rgba(0,0,0,0)",
  1725. });
  1726. } else if (processedData[i - 1].type === 2) {
  1727. singleTypeYellow.push({
  1728. min: i - 1,
  1729. max: i,
  1730. color: "rgba(0,0,0,0)",
  1731. });
  1732. }
  1733. }
  1734. }
  1735. if (processedData[i].type !== processedData[i - 1].type) {
  1736. if (processedData[i].type == 0) {
  1737. processedData[i - 1].isTransitionGreen = 1;
  1738. } else if (processedData[i].type == 1) {
  1739. processedData[i - 1].isTransitionRed = 1;
  1740. } else if (processedData[i].type == 2) {
  1741. processedData[i - 1].isTransitionYellow = 1;
  1742. }
  1743. // // 创建过渡点,使用前一个点的值
  1744. // processedData[i - 1].isTransition = true
  1745. }
  1746. }
  1747. let greenData = [];
  1748. let redData = [];
  1749. let yellowData = [];
  1750. processedData.forEach((item, idx) => {
  1751. const point = [item.date, item.value];
  1752. if (item.type === 0) {
  1753. greenData.push(point);
  1754. redData.push([item.date, "-"]);
  1755. yellowData.push([item.date, "-"]);
  1756. // if (item.isTransition) {
  1757. // redData[redData.length - 1] = [processedData[idx].date, processedData[idx].value]
  1758. // yellowData[yellowData.length - 1] = [processedData[idx].date, processedData[idx].value]
  1759. // }
  1760. if (item.isTransitionGreen) {
  1761. greenData[greenData.length - 1] = [
  1762. processedData[idx].date,
  1763. processedData[idx].value,
  1764. ];
  1765. } else if (item.isTransitionRed) {
  1766. redData[redData.length - 1] = [
  1767. processedData[idx].date,
  1768. processedData[idx].value,
  1769. ];
  1770. } else if (item.isTransitionYellow) {
  1771. yellowData[yellowData.length - 1] = [
  1772. processedData[idx].date,
  1773. processedData[idx].value,
  1774. ];
  1775. }
  1776. } else if (item.type === 1) {
  1777. redData.push(point);
  1778. greenData.push([item.date, "-"]);
  1779. yellowData.push([item.date, "-"]);
  1780. // if (item.isTransition) {
  1781. // greenData[greenData.length - 1] = [processedData[idx].date, processedData[idx].value]
  1782. // yellowData[yellowData.length - 1] = [processedData[idx].date, processedData[idx].value]
  1783. // }
  1784. if (item.isTransitionGreen) {
  1785. greenData[greenData.length - 1] = [
  1786. processedData[idx].date,
  1787. processedData[idx].value,
  1788. ];
  1789. } else if (item.isTransitionRed) {
  1790. redData[redData.length - 1] = [
  1791. processedData[idx].date,
  1792. processedData[idx].value,
  1793. ];
  1794. } else if (item.isTransitionYellow) {
  1795. yellowData[yellowData.length - 1] = [
  1796. processedData[idx].date,
  1797. processedData[idx].value,
  1798. ];
  1799. }
  1800. } else if (item.type === 2) {
  1801. redData.push([item.date, "-"]);
  1802. greenData.push([item.date, "-"]);
  1803. yellowData.push(point);
  1804. // if (item.isTransition) {
  1805. // greenData[greenData.length - 1] = [processedData[idx].date, processedData[idx].value]
  1806. // redData[redData.length - 1] = [processedData[idx].date, processedData[idx].value]
  1807. // }
  1808. if (item.isTransitionGreen) {
  1809. greenData[greenData.length - 1] = [
  1810. processedData[idx].date,
  1811. processedData[idx].value,
  1812. ];
  1813. } else if (item.isTransitionRed) {
  1814. redData[redData.length - 1] = [
  1815. processedData[idx].date,
  1816. processedData[idx].value,
  1817. ];
  1818. } else if (item.isTransitionYellow) {
  1819. yellowData[yellowData.length - 1] = [
  1820. processedData[idx].date,
  1821. processedData[idx].value,
  1822. ];
  1823. }
  1824. }
  1825. });
  1826. return {
  1827. greenData: greenData,
  1828. redData: redData,
  1829. yellowData: yellowData,
  1830. singleTypeGreen: singleTypeGreen,
  1831. singleTypeRed: singleTypeRed,
  1832. singleTypeYellow: singleTypeYellow,
  1833. };
  1834. }
  1835. const maData = processMAData(data.FCX);
  1836. const maDuchiData = processMAData(data.DNC);
  1837. if (data.FCX[0][1] == "-1") {
  1838. maData.greenData = [];
  1839. maData.redData = [];
  1840. maData.yellowData = [];
  1841. }
  1842. const processBarData = (data) => {
  1843. const barData = [];
  1844. const markPointData = [];
  1845. data.forEach((item) => {
  1846. let color;
  1847. switch (item[4]) {
  1848. case 1:
  1849. color = "#13E113";
  1850. break;
  1851. case 2:
  1852. color = "#FF0E00";
  1853. break;
  1854. case 3:
  1855. color = "#0000FE";
  1856. break;
  1857. case 4:
  1858. color = "#1397FF";
  1859. break;
  1860. }
  1861. barData.push({
  1862. value: item[5],
  1863. itemStyle: {
  1864. normal: {
  1865. color: color,
  1866. },
  1867. },
  1868. });
  1869. if (item[1] === 1) {
  1870. markPointData.push({
  1871. coord: [item[0], item[5]],
  1872. symbol:
  1873. "image://https://d31zlh4on95l9h.cloudfront.net/images/5iujb101000d5si3v3hr7w2vg0h43z1u.png",
  1874. symbolSize: [30, 30],
  1875. label: {
  1876. normal: {
  1877. color: "rgba(0, 0, 0, 0)",
  1878. },
  1879. },
  1880. });
  1881. }
  1882. if (item[2] === 1) {
  1883. markPointData.push({
  1884. coord: [item[0], item[5] / 2],
  1885. symbol:
  1886. "image://https://d31zlh4on95l9h.cloudfront.net/images/5iujaz01000d5si016bxdf6vh0377d2h.png",
  1887. symbolSize: [30, 30],
  1888. label: {
  1889. normal: {
  1890. color: "rgba(0, 0, 0, 0)",
  1891. },
  1892. },
  1893. });
  1894. }
  1895. if (item[3] === 1) {
  1896. markPointData.push({
  1897. coord: [item[0], 0],
  1898. symbol:
  1899. "image://https://d31zlh4on95l9h.cloudfront.net/images/5iujb001000d5shzls0tmd4vs0e5tdrw.png",
  1900. symbolSize: [30, 30],
  1901. label: {
  1902. normal: {
  1903. color: "rgba(0, 0, 0, 0)",
  1904. },
  1905. },
  1906. });
  1907. }
  1908. });
  1909. return { barData, markPointData };
  1910. };
  1911. const { barData, markPointData } = processBarData(dealGnBullData);
  1912. KlineOption = {
  1913. legend: [
  1914. {
  1915. textStyle: {
  1916. color: "black",
  1917. fontSize: window.innerWidth > 768 ? 15 : vwToPx(1.8),
  1918. },
  1919. width: "100%",
  1920. top: window.innerWidth > 768 ? "0%" : "-1%",
  1921. left: "center",
  1922. itemGap: window.innerWidth > 768 ? 20 : 10,
  1923. itemWidth: 10,
  1924. itemHeight: 10,
  1925. data: [
  1926. {
  1927. name: "进攻K线",
  1928. itemStyle: {
  1929. color: "rgb(255,0,0)",
  1930. },
  1931. },
  1932. {
  1933. name: "防守K线",
  1934. itemStyle: {
  1935. color: "red",
  1936. },
  1937. },
  1938. {
  1939. name: "推进K线",
  1940. itemStyle: {
  1941. color: "orange",
  1942. },
  1943. },
  1944. {
  1945. name: "撤退K线",
  1946. itemStyle: {
  1947. color: "rgb(84,252,252)",
  1948. },
  1949. },
  1950. ],
  1951. },
  1952. {
  1953. textStyle: {
  1954. color: "black",
  1955. fontSize: window.innerWidth > 768 ? 15 : vwToPx(1.8),
  1956. },
  1957. orient: "horizontal",
  1958. top: window.innerWidth > 768 ? "3%" : "2%",
  1959. width: "100%",
  1960. left: "center",
  1961. itemGap: 15,
  1962. data: [
  1963. {
  1964. name: "{green|━}{red|━} " + "牵牛绳",
  1965. icon: "none",
  1966. textStyle: {
  1967. rich: {
  1968. green: {
  1969. color: "green",
  1970. fontSize: window.innerWidth > 768 ? 20 : 10,
  1971. },
  1972. red: {
  1973. color: "red",
  1974. fontSize: window.innerWidth > 768 ? 20 : 10,
  1975. },
  1976. },
  1977. },
  1978. },
  1979. {
  1980. name: "龙线",
  1981. },
  1982. {
  1983. name: "虫线",
  1984. },
  1985. ],
  1986. },
  1987. {
  1988. textStyle: {
  1989. color: "black",
  1990. fontSize: window.innerWidth > 768 ? 15 : vwToPx(1.8),
  1991. },
  1992. orient: "horizontal",
  1993. top: window.innerWidth > 768 ? "68%" : "64%",
  1994. width: "100%",
  1995. left: "center",
  1996. itemGap: 15,
  1997. data: [
  1998. {
  1999. name: "{green|━}{red|━} " + "度牛尺",
  2000. icon: "none",
  2001. textStyle: {
  2002. rich: {
  2003. green: {
  2004. color: "green",
  2005. fontSize: window.innerWidth > 768 ? 20 : 10,
  2006. },
  2007. red: {
  2008. color: "red",
  2009. fontSize: window.innerWidth > 768 ? 20 : 10,
  2010. },
  2011. },
  2012. },
  2013. },
  2014. ],
  2015. },
  2016. ],
  2017. tooltip: {
  2018. formatter: function (a, b, d) {
  2019. if (a[0].seriesIndex == 0) {
  2020. const KlineTag = ref([]);
  2021. const AIBullTag = ref([]);
  2022. KlineTag.value = a.find((item) => item.data[1])?.data || [];
  2023. AIBullTag.value =
  2024. a.slice(4).find((item) => item.data[1] !== "-")?.data || [];
  2025. // console.log(AIBullTag.value)
  2026. return (
  2027. a[0].name +
  2028. "<br/>" +
  2029. "开盘价" +
  2030. ":" +
  2031. KlineTag.value[1] +
  2032. "<br/>" +
  2033. "收盘价" +
  2034. ":" +
  2035. KlineTag.value[2] +
  2036. "<br/>" +
  2037. "最低价" +
  2038. ":" +
  2039. KlineTag.value[3] +
  2040. "<br/>" +
  2041. "最高价" +
  2042. ":" +
  2043. KlineTag.value[4] +
  2044. "<br/>" +
  2045. "牵牛绳" +
  2046. ":" +
  2047. AIBullTag.value[1]
  2048. );
  2049. }
  2050. if (a[0].seriesIndex == 4) {
  2051. let formattedVolume;
  2052. if (a[0].data.value >= 10000) {
  2053. formattedVolume = (a[0].data.value / 10000).toFixed(2) + "w";
  2054. } else {
  2055. formattedVolume = a[0].data.value;
  2056. }
  2057. return a[0].name + "<br/>" + "成交量" + ":" + formattedVolume;
  2058. }
  2059. if ([10, 11, 12].includes(a[0].seriesIndex)) {
  2060. const duchiData = a.find(
  2061. (item) => item.data && item.data[1] !== "-"
  2062. );
  2063. return duchiData
  2064. ? a[0].axisValue + "<br/>" + "度牛尺" + ":" + duchiData.data[1]
  2065. : null;
  2066. }
  2067. },
  2068. trigger: "axis",
  2069. axisPointer: {
  2070. type: "cross",
  2071. },
  2072. backgroundColor: "rgba(119, 120, 125, 0.6)",
  2073. borderWidth: 1,
  2074. borderColor: "#77787D",
  2075. padding: 10,
  2076. textStyle: {
  2077. color: "#fff",
  2078. },
  2079. },
  2080. axisPointer: {
  2081. link: [
  2082. {
  2083. xAxisIndex: "all",
  2084. },
  2085. ],
  2086. label: {
  2087. backgroundColor: "#77787D",
  2088. },
  2089. },
  2090. toolbox: {
  2091. show: false,
  2092. },
  2093. grid: [
  2094. {
  2095. left:
  2096. window.innerWidth > 1024
  2097. ? "70vw"
  2098. : window.innerWidth > 768
  2099. ? "65vw"
  2100. : "55vw",
  2101. right:
  2102. window.innerWidth > 1024
  2103. ? "40vw"
  2104. : window.innerWidth > 768
  2105. ? "30vw"
  2106. : "40vw",
  2107. top: window.innerWidth > 768 ? "8%" : "5%",
  2108. height: window.innerWidth > 768 ? "34%" : "34%",
  2109. containLabel: false,
  2110. },
  2111. {
  2112. left:
  2113. window.innerWidth > 1024
  2114. ? "70vw"
  2115. : window.innerWidth > 768
  2116. ? "65vw"
  2117. : "55vw",
  2118. right:
  2119. window.innerWidth > 1024
  2120. ? "40vw"
  2121. : window.innerWidth > 768
  2122. ? "30vw"
  2123. : "40vw",
  2124. top: window.innerWidth > 768 ? "45%" : "42%",
  2125. height: window.innerWidth > 768 ? "22%" : "22%",
  2126. containLabel: false,
  2127. },
  2128. {
  2129. left:
  2130. window.innerWidth > 1024
  2131. ? "70vw"
  2132. : window.innerWidth > 768
  2133. ? "65vw"
  2134. : "55vw",
  2135. right:
  2136. window.innerWidth > 1024
  2137. ? "40vw"
  2138. : window.innerWidth > 768
  2139. ? "30vw"
  2140. : "40vw",
  2141. top: window.innerWidth > 768 ? "73%" : "70%",
  2142. height: window.innerWidth > 768 ? "20%" : "22%",
  2143. containLabel: false,
  2144. },
  2145. ],
  2146. xAxis: [
  2147. {
  2148. type: "category",
  2149. data: dealData.categoryData,
  2150. boundaryGap: true,
  2151. axisLine: { onZero: false },
  2152. splitLine: { show: false },
  2153. min: "dataMin",
  2154. max: "dataMax",
  2155. axisPointer: {
  2156. z: 100,
  2157. },
  2158. axisLine: {
  2159. lineStyle: {
  2160. color: "black",
  2161. },
  2162. }, //
  2163. axisLabel: { show: false },
  2164. axisTick: { show: false },
  2165. },
  2166. {
  2167. type: "category",
  2168. gridIndex: 1,
  2169. data: dealData.categoryData,
  2170. boundaryGap: true,
  2171. axisLine: { lineStyle: { color: "black" } },
  2172. axisLabel: {
  2173. show: false,
  2174. interval: "auto",
  2175. },
  2176. },
  2177. {
  2178. type: "category",
  2179. gridIndex: 2,
  2180. data: dealData.categoryData,
  2181. boundaryGap: true,
  2182. axisLine: { lineStyle: { color: "black" } },
  2183. axisLabel: {
  2184. show: true,
  2185. interval: "auto",
  2186. },
  2187. },
  2188. ],
  2189. yAxis: [
  2190. {
  2191. scale: true,
  2192. gridIndex: 0,
  2193. position: "left",
  2194. axisLabel: {
  2195. inside: false,
  2196. align: "right",
  2197. fontSize: window.innerWidth > 768 ? 15 : 10,
  2198. },
  2199. axisLine: {
  2200. show: true,
  2201. lineStyle: {
  2202. fontSize: "",
  2203. color: "black",
  2204. },
  2205. },
  2206. axisTick: { show: false },
  2207. splitLine: { show: false },
  2208. },
  2209. {
  2210. scale: true,
  2211. gridIndex: 1,
  2212. splitNumber: 4,
  2213. min: 0,
  2214. minInterval: 1,
  2215. axisLabel: {
  2216. show: true,
  2217. fontSize: window.innerWidth > 768 ? 15 : 10,
  2218. margin: 8,
  2219. formatter: (value) => {
  2220. if (value >= 1000000000) {
  2221. return (value / 1000000000).toFixed(1) + "B";
  2222. } else if (value >= 1000000) {
  2223. return (value / 1000000).toFixed(1) + "M";
  2224. } else if (value >= 10000) {
  2225. return (value / 10000).toFixed(1) + "W";
  2226. }
  2227. return value.toFixed(0);
  2228. },
  2229. },
  2230. axisLine: { show: true, lineStyle: { color: "black" } },
  2231. axisTick: { show: false },
  2232. splitLine: { show: true, lineStyle: { type: "dashed" } },
  2233. boundaryGap: ["20%", "20%"],
  2234. },
  2235. {
  2236. type: "value",
  2237. gridIndex: 2,
  2238. min: 0,
  2239. max: 100,
  2240. axisLabel: {
  2241. show: true,
  2242. fontSize: window.innerWidth > 768 ? 15 : 10,
  2243. formatter: function (value) {
  2244. var customValues = [0, 20, 50, 80, 100];
  2245. return customValues.indexOf(value) > -1 ? value : "";
  2246. },
  2247. },
  2248. axisLine: {
  2249. show: true,
  2250. lineStyle: {
  2251. color: "black",
  2252. },
  2253. },
  2254. axisTick: {
  2255. show: false,
  2256. },
  2257. splitNumber: 10,
  2258. splitLine: {
  2259. show: true,
  2260. lineStyle: {
  2261. type: "dashed",
  2262. color: "#fff",
  2263. width: 1,
  2264. },
  2265. interval: function (index, value) {
  2266. return [20, 50, 80, 100].indexOf(value) > -1;
  2267. },
  2268. },
  2269. },
  2270. ],
  2271. dataZoom: [
  2272. {
  2273. type: "inside",
  2274. xAxisIndex: [0, 1, 2],
  2275. start: 55,
  2276. end: 100,
  2277. },
  2278. {
  2279. show: true,
  2280. xAxisIndex: [0, 1, 2],
  2281. type: "slider",
  2282. top: window.innerWidth > 768 ? "95%" : "96%",
  2283. // left: window.innerWidth > 768 ? "10%" : "8%",
  2284. // right: window.innerWidth > 768 ? "4%" : "8%",
  2285. start: 98,
  2286. end: 100,
  2287. },
  2288. ],
  2289. visualMap: [
  2290. {
  2291. type: "piecewise",
  2292. show: false,
  2293. pieces: maData.singleTypeGreen,
  2294. outOfRange: {
  2295. color: "green",
  2296. },
  2297. dimension: 0,
  2298. seriesIndex: 7,
  2299. },
  2300. {
  2301. type: "piecewise",
  2302. show: false,
  2303. pieces: maData.singleTypeRed,
  2304. outOfRange: {
  2305. color: "red",
  2306. },
  2307. dimension: 0,
  2308. seriesIndex: 8,
  2309. },
  2310. {
  2311. type: "piecewise",
  2312. show: false,
  2313. pieces: maData.singleTypeYellow,
  2314. outOfRange: {
  2315. color: "yellow",
  2316. },
  2317. dimension: 0,
  2318. seriesIndex: 9,
  2319. },
  2320. ],
  2321. series: [
  2322. {
  2323. name: "进攻K线",
  2324. type: "candlestick",
  2325. barWidth: "50%",
  2326. data: dealData1.values,
  2327. xAxisIndex: 0,
  2328. yAxisIndex: 0,
  2329. itemStyle: {
  2330. normal: {
  2331. color: "rgb(255,0,0)",
  2332. color0: "rgb(255,0,0)",
  2333. borderColor: "rgb(255,0,0)",
  2334. borderColor0: "rgb(255,0,0)",
  2335. },
  2336. },
  2337. gridIndex: 0,
  2338. },
  2339. //
  2340. {
  2341. name: "推进K线",
  2342. type: "candlestick",
  2343. barWidth: "50%",
  2344. data: dealData2.values,
  2345. xAxisIndex: 0,
  2346. yAxisIndex: 0,
  2347. itemStyle: {
  2348. normal: {
  2349. color: "rgb(0,0,252)",
  2350. color0: "rgb(0,0,252)",
  2351. borderColor: "rgb(0,0,252)",
  2352. borderColor0: "rgb(0,0,252)",
  2353. },
  2354. },
  2355. gridIndex: 0,
  2356. },
  2357. {
  2358. name: "防守K线",
  2359. type: "candlestick",
  2360. barWidth: "50%",
  2361. data: dealData3.values,
  2362. xAxisIndex: 0,
  2363. yAxisIndex: 0,
  2364. itemStyle: {
  2365. normal: {
  2366. color: "orange",
  2367. color0: "orange",
  2368. borderColor: "orange",
  2369. borderColor0: "orange",
  2370. },
  2371. },
  2372. gridIndex: 0,
  2373. },
  2374. {
  2375. name: "撤退K线",
  2376. type: "candlestick",
  2377. barWidth: "50%",
  2378. data: dealData4.values,
  2379. xAxisIndex: 0,
  2380. yAxisIndex: 0,
  2381. itemStyle: {
  2382. normal: {
  2383. color: "rgb(84,252,252)",
  2384. color0: "rgb(84,252,252)",
  2385. borderColor: "rgb(84,252,252)",
  2386. borderColor0: "rgb(84,252,252)",
  2387. },
  2388. },
  2389. gridIndex: 0,
  2390. },
  2391. {
  2392. name: "成交量",
  2393. type: "bar",
  2394. barWidth: "70%",
  2395. xAxisIndex: 1,
  2396. yAxisIndex: 1,
  2397. data: barData,
  2398. markPoint: {
  2399. data: markPointData,
  2400. label: {
  2401. show: false,
  2402. },
  2403. },
  2404. },
  2405. {
  2406. name: "{green|━}{red|━} " + "牵牛绳",
  2407. type: "line",
  2408. data: [],
  2409. smooth: true,
  2410. symbol: "none",
  2411. xAxisIndex: 0,
  2412. yAxisIndex: 0,
  2413. showSymbol: false,
  2414. lineStyle: {
  2415. opacity: 0,
  2416. },
  2417. itemStyle: {
  2418. normal: {
  2419. color: "green",
  2420. },
  2421. },
  2422. gridIndex: 0,
  2423. },
  2424. {
  2425. name: "{green|━}{red|━} " + "度牛尺",
  2426. type: "line",
  2427. data: [],
  2428. smooth: true,
  2429. symbol: "none",
  2430. xAxisIndex: 0,
  2431. yAxisIndex: 0,
  2432. showSymbol: false,
  2433. lineStyle: {
  2434. opacity: 0,
  2435. },
  2436. itemStyle: {
  2437. normal: {
  2438. color: "green",
  2439. },
  2440. },
  2441. gridIndex: 0,
  2442. },
  2443. {
  2444. name: "虫线",
  2445. type: "line",
  2446. data: maData.greenData,
  2447. smooth: true,
  2448. symbol: "none",
  2449. xAxisIndex: 0,
  2450. yAxisIndex: 0,
  2451. itemStyle: {
  2452. normal: {
  2453. color: "green",
  2454. lineStyle: {
  2455. width: 2,
  2456. type: "solid",
  2457. },
  2458. },
  2459. },
  2460. gridIndex: 0,
  2461. },
  2462. {
  2463. name: "龙线",
  2464. type: "line",
  2465. data: maData.redData,
  2466. smooth: true,
  2467. symbol: "none",
  2468. xAxisIndex: 0,
  2469. yAxisIndex: 0,
  2470. itemStyle: {
  2471. normal: {
  2472. color: "red",
  2473. lineStyle: {
  2474. width: 2,
  2475. type: "solid",
  2476. },
  2477. },
  2478. },
  2479. gridIndex: 0,
  2480. },
  2481. {
  2482. name: "黄色",
  2483. type: "line",
  2484. data: maData.yellowData,
  2485. smooth: true,
  2486. symbol: "none",
  2487. xAxisIndex: 0,
  2488. yAxisIndex: 0,
  2489. itemStyle: {
  2490. normal: {
  2491. color: "yellow",
  2492. lineStyle: {
  2493. width: 2,
  2494. type: "solid",
  2495. },
  2496. },
  2497. },
  2498. gridIndex: 0,
  2499. },
  2500. {
  2501. name: "背景区域",
  2502. type: "line",
  2503. data: [],
  2504. xAxisIndex: 2,
  2505. yAxisIndex: 2,
  2506. markArea: {
  2507. silent: true,
  2508. itemStyle: {
  2509. normal: {
  2510. opacity: 1,
  2511. },
  2512. },
  2513. label: {
  2514. normal: {
  2515. show: true,
  2516. position: "insideRight",
  2517. fontSize: window.innerWidth > 768 ? 16 : 12,
  2518. fontWeight: "bold",
  2519. color: "#13E113",
  2520. distance: 10,
  2521. },
  2522. },
  2523. data: [
  2524. [
  2525. {
  2526. yAxis: 0,
  2527. itemStyle: {
  2528. normal: {
  2529. color: "#CFFFCF",
  2530. },
  2531. },
  2532. label: {
  2533. normal: {
  2534. formatter: "度牛区",
  2535. },
  2536. },
  2537. },
  2538. {
  2539. yAxis: 20,
  2540. },
  2541. ],
  2542. [
  2543. {
  2544. yAxis: 20,
  2545. itemStyle: {
  2546. normal: {
  2547. color: "#A6FFFF",
  2548. },
  2549. },
  2550. },
  2551. {
  2552. yAxis: 40,
  2553. },
  2554. ],
  2555. [
  2556. {
  2557. yAxis: 40,
  2558. itemStyle: {
  2559. normal: {
  2560. color: "#FFF686",
  2561. },
  2562. },
  2563. },
  2564. {
  2565. yAxis: 60,
  2566. },
  2567. ],
  2568. [
  2569. {
  2570. yAxis: 60,
  2571. itemStyle: {
  2572. normal: { color: "#FFD2B3" },
  2573. },
  2574. },
  2575. {
  2576. yAxis: 80,
  2577. },
  2578. ],
  2579. [
  2580. {
  2581. yAxis: 80,
  2582. itemStyle: {
  2583. normal: { color: "#FFB8B8" },
  2584. },
  2585. label: {
  2586. normal: {
  2587. formatter: "度牛区",
  2588. color: "#FF0000",
  2589. position: "insideLeft",
  2590. distance: 10,
  2591. },
  2592. },
  2593. },
  2594. {
  2595. yAxis: 100,
  2596. },
  2597. ],
  2598. ],
  2599. },
  2600. },
  2601. {
  2602. name: "度牛尺",
  2603. type: "line",
  2604. data: maDuchiData.greenData,
  2605. symbol: "none",
  2606. xAxisIndex: 2,
  2607. yAxisIndex: 2,
  2608. itemStyle: {
  2609. normal: {
  2610. color: "green",
  2611. lineStyle: {
  2612. width: 2,
  2613. type: "solid",
  2614. },
  2615. },
  2616. },
  2617. gridIndex: 2,
  2618. markPoint: {
  2619. symbol: "rect",
  2620. symbolSize: (value, params) => {
  2621. const width = window.innerWidth;
  2622. const baseHeight = 22;
  2623. // if (width <= 375) {
  2624. // return [2, 16];
  2625. // } else if (width <= 768) {
  2626. // return [2, 22];
  2627. // }
  2628. return [2, baseHeight];
  2629. },
  2630. itemStyle: {
  2631. normal: {
  2632. label: {
  2633. show: false,
  2634. },
  2635. },
  2636. },
  2637. data: [
  2638. ...maDuchiData.greenData
  2639. .map((item) => {
  2640. if (item[1] === 0) {
  2641. return {
  2642. coord: [item[0], 20],
  2643. symbolOffset: [0, 10],
  2644. itemStyle: {
  2645. color: "#00ff00",
  2646. },
  2647. };
  2648. }
  2649. })
  2650. .filter(Boolean),
  2651. ],
  2652. },
  2653. },
  2654. {
  2655. type: "line",
  2656. data: maDuchiData.redData,
  2657. // smooth: true,
  2658. symbol: "none",
  2659. xAxisIndex: 2,
  2660. yAxisIndex: 2,
  2661. itemStyle: {
  2662. normal: {
  2663. color: "red",
  2664. lineStyle: {
  2665. width: 2,
  2666. type: "solid",
  2667. },
  2668. },
  2669. },
  2670. gridIndex: 2,
  2671. markPoint: {
  2672. symbol: "rect",
  2673. symbolSize: (value, params) => {
  2674. const width = window.innerWidth;
  2675. const baseHeight = 22;
  2676. // if (width <= 375) {
  2677. // return [2, 16];
  2678. // } else if (width <= 768) {
  2679. // return [2, 24];
  2680. // }
  2681. return [2, baseHeight];
  2682. },
  2683. itemStyle: {
  2684. normal: {
  2685. label: {
  2686. show: false,
  2687. },
  2688. },
  2689. },
  2690. data: [
  2691. ...maDuchiData.redData
  2692. .map((item) => {
  2693. if (item[1] === 100) {
  2694. return {
  2695. coord: [item[0], 80],
  2696. symbolOffset: [0, -10],
  2697. itemStyle: {
  2698. color: "#ff0000",
  2699. },
  2700. };
  2701. }
  2702. })
  2703. .filter(Boolean),
  2704. ],
  2705. },
  2706. },
  2707. {
  2708. name: "辅助线",
  2709. type: "line",
  2710. data: [],
  2711. xAxisIndex: 2,
  2712. yAxisIndex: 2,
  2713. markLine: {
  2714. silent: true,
  2715. symbol: "none",
  2716. lineStyle: {
  2717. color: "#000000",
  2718. width: 3,
  2719. type: "solid",
  2720. },
  2721. data: [{ yAxis: 20 }],
  2722. },
  2723. },
  2724. {
  2725. name: "辅助线",
  2726. type: "line",
  2727. data: [],
  2728. xAxisIndex: 2,
  2729. yAxisIndex: 2,
  2730. markLine: {
  2731. silent: true,
  2732. symbol: "none",
  2733. lineStyle: {
  2734. color: "#000000",
  2735. width: 3,
  2736. type: "solid",
  2737. },
  2738. data: [{ yAxis: 50 }],
  2739. },
  2740. },
  2741. {
  2742. name: "辅助线",
  2743. type: "line",
  2744. data: [],
  2745. xAxisIndex: 2,
  2746. yAxisIndex: 2,
  2747. markLine: {
  2748. silent: true,
  2749. symbol: "none",
  2750. lineStyle: {
  2751. color: "#000000",
  2752. width: 3,
  2753. type: "solid",
  2754. },
  2755. data: [{ yAxis: 80 }],
  2756. },
  2757. },
  2758. {
  2759. name: "辅助线",
  2760. type: "line",
  2761. data: [],
  2762. xAxisIndex: 2,
  2763. yAxisIndex: 2,
  2764. markLine: {
  2765. silent: true,
  2766. symbol: "none",
  2767. lineStyle: {
  2768. color: "#000000",
  2769. width: 3,
  2770. type: "solid",
  2771. },
  2772. data: [{ yAxis: 100 }],
  2773. },
  2774. },
  2775. ],
  2776. };
  2777. }
  2778. console.log("KLine渲染: 图表配置完成");
  2779. try {
  2780. // 应用配置
  2781. console.log("KLine渲染: 开始设置图表选项");
  2782. chartInstancesMap[containerId].setOption(KlineOption);
  2783. console.log("KLine渲染: 图表选项设置成功");
  2784. // 窗口大小变化时重新渲染图表
  2785. const resizeFunc = _.throttle(
  2786. function () {
  2787. console.log("窗口大小改变,调整图表大小");
  2788. if (
  2789. chartInstancesMap[containerId] &&
  2790. !chartInstancesMap[containerId].isDisposed()
  2791. ) {
  2792. // 如果设备类型发生变化,重新渲染
  2793. const newIsMobile = window.innerWidth < 768;
  2794. const newIsTablet =
  2795. window.innerWidth >= 768 && window.innerWidth < 1024;
  2796. if (newIsMobile !== isMobile || newIsTablet !== isTablet) {
  2797. console.log("设备类型变化,重新渲染图表");
  2798. KlineCanvsEcharts(containerId);
  2799. return;
  2800. }
  2801. chartInstancesMap[containerId].resize();
  2802. }
  2803. },
  2804. 1000,
  2805. { trailing: false }
  2806. );
  2807. // 给resize事件绑定一个特定的函数名,便于后续移除
  2808. window[`resize_${containerId}`] = resizeFunc;
  2809. // 绑定resize事件
  2810. window.removeEventListener("resize", window[`resize_${containerId}`]);
  2811. window.addEventListener("resize", window[`resize_${containerId}`]);
  2812. console.log("KLine渲染: 图表渲染完成");
  2813. } catch (error) {
  2814. console.error("KLine渲染: 图表渲染出错", error);
  2815. }
  2816. }
  2817. watch(
  2818. () => audioStore.isVoiceEnabled,
  2819. (newVal) => {
  2820. // 添加状态锁定逻辑
  2821. if (newVal === audioStore.lastVoiceState) return;
  2822. audioStore.lastVoiceState = newVal;
  2823. if (newVal) {
  2824. console.log("开启语音播放");
  2825. // 添加重试机制
  2826. const tryPlay = () => {
  2827. if (!audioStore.ttsUrl) return; // 新增空值判断
  2828. if (audioStore.soundInstance?.playing()) return;
  2829. playAudio(audioStore.ttsUrl);
  2830. setTimeout(() => {
  2831. if (!audioStore.soundInstance?.playing()) {
  2832. Howler.unload();
  2833. }
  2834. }, 1000);
  2835. };
  2836. tryPlay();
  2837. } else {
  2838. console.log("关闭语音播放");
  2839. pauseAudio();
  2840. // 强制停止并释放资源
  2841. // Howler.stop();
  2842. // Howler.unload();
  2843. // if (audioStore.soundInstance) {
  2844. // audioStore.soundInstance.off(); // 移除所有事件监听
  2845. // audioStore.soundInstance = null;
  2846. // }
  2847. }
  2848. },
  2849. { immediate: true }
  2850. );
  2851. watch(
  2852. () => dataStore.activeTabIndex,
  2853. (newVal) => {
  2854. setTimeout(() => {
  2855. console.log("activeTabIndex变化:", newVal);
  2856. // 当标签页切换回来时,重新渲染所有图表
  2857. if (newVal === 0) {
  2858. console.log("切换到AI聊天页,重新渲染图表");
  2859. // 延迟执行以确保DOM已渲染
  2860. renderAllKlineCharts();
  2861. }
  2862. }, 1000);
  2863. },
  2864. { immediate: true } // 添加immediate属性,确保初始化时执行一次
  2865. );
  2866. // 添加渲染所有K线图的方法
  2867. function renderAllKlineCharts() {
  2868. console.log("重新渲染所有K线图");
  2869. // 查找所有K线消息
  2870. const messages = chatStore.messages;
  2871. for (let i = 0; i < messages.length; i++) {
  2872. if (messages[i].kline && messages[i].chartData) {
  2873. const containerId = `kline-container-${i}`;
  2874. console.log(`尝试渲染K线图: ${containerId}`);
  2875. // 确保DOM已经渲染
  2876. const container = document.getElementById(containerId);
  2877. if (container) {
  2878. // 渲染图表
  2879. KlineCanvsEcharts(containerId);
  2880. } else {
  2881. console.warn(`找不到容器: ${containerId}`);
  2882. }
  2883. }
  2884. }
  2885. }
  2886. // 初始化随机GIF
  2887. onMounted(() => {
  2888. // 初始化marked组件
  2889. marked.setOptions({
  2890. breaks: true, // 支持换行符转换为 <br>
  2891. gfm: true, // 启用 GitHub Flavored Markdown
  2892. sanitize: false, // 不清理 HTML(谨慎使用)
  2893. smartLists: true, // 智能列表
  2894. smartypants: true, // 智能标点符号
  2895. xhtml: false, // 不使用 XHTML 输出
  2896. renderer: renderer,
  2897. });
  2898. renderAllKlineCharts();
  2899. console.log("组件挂载完成");
  2900. // 添加页面可见性变化监听器
  2901. document.addEventListener("visibilitychange", handleVisibilityChange);
  2902. // 添加DOM变化监听器
  2903. const observer = new MutationObserver((mutations) => {
  2904. mutations.forEach((mutation) => {
  2905. if (mutation.type === "childList" && mutation.addedNodes.length) {
  2906. // 检查是否添加了图表容器
  2907. const containers = document.querySelectorAll(
  2908. '[id^="kline-container-"]'
  2909. );
  2910. if (containers.length) {
  2911. // console.log("DOM变化监听到K线容器:", Array.from(containers).map(el => el.id));
  2912. }
  2913. }
  2914. });
  2915. });
  2916. // 开始监听DOM变化
  2917. observer.observe(document.body, { childList: true, subtree: true });
  2918. });
  2919. // 页面可见性变化处理
  2920. let wasPlayingBeforeHidden = false;
  2921. const handleVisibilityChange = () => {
  2922. if (document.hidden) {
  2923. // 页面被隐藏时,如果音频正在播放,则暂停并记录状态
  2924. if (audioStore.isPlaying) {
  2925. wasPlayingBeforeHidden = true;
  2926. audioStore.pause();
  2927. console.log("页面切换离开,音频已暂停");
  2928. } else {
  2929. wasPlayingBeforeHidden = false;
  2930. }
  2931. } else {
  2932. // 页面重新可见时,如果之前在播放,则恢复播放
  2933. if (wasPlayingBeforeHidden && !audioStore.isPlaying) {
  2934. audioStore.play();
  2935. console.log("页面切换回来,音频已恢复播放");
  2936. wasPlayingBeforeHidden = false;
  2937. }
  2938. }
  2939. };
  2940. // 组件卸载时清理所有图表实例和事件监听器
  2941. onUnmounted(() => {
  2942. // 移除页面可见性变化监听器
  2943. document.removeEventListener("visibilitychange", handleVisibilityChange);
  2944. // 停止音频播放
  2945. if (audioStore.isPlaying) {
  2946. audioStore.stop();
  2947. console.log("组件卸载,音频已停止");
  2948. }
  2949. // 清理所有图表实例
  2950. Object.keys(chartInstancesMap).forEach((key) => {
  2951. if (chartInstancesMap[key]) {
  2952. // 移除resize事件监听
  2953. if (window[`resize_${key}`]) {
  2954. window.removeEventListener("resize", window[`resize_${key}`]);
  2955. delete window[`resize_${key}`];
  2956. }
  2957. // 销毁图表实例
  2958. chartInstancesMap[key].dispose();
  2959. delete chartInstancesMap[key];
  2960. }
  2961. });
  2962. });
  2963. </script>
  2964. <template>
  2965. <div class="chat-container">
  2966. <!-- GIF区域 -->
  2967. <div class="gif-area">
  2968. <img :src="bgc" alt="夺宝奇兵大模型logo" class="bgc" />
  2969. <img :src="logo1" alt="夺宝奇兵大模型logo" class="logo1" />
  2970. <img :src="logo2" alt="夺宝奇兵大模型logo" class="logo2" />
  2971. </div>
  2972. <div
  2973. v-for="(msg, index) in chatMsg"
  2974. :key="index"
  2975. :class="{
  2976. 'message-bubble': true,
  2977. [msg.sender]: msg.sender,
  2978. [msg.class]: msg.class,
  2979. }"
  2980. >
  2981. <div v-if="msg.type === 'kline'" class="kline-container">
  2982. <div :id="'kline-container-' + index" class="chart-mount-point">
  2983. <div v-if="!msg.hasValidData" class="no-data-message">
  2984. <p>暂无K线数据</p>
  2985. </div>
  2986. </div>
  2987. </div>
  2988. <div v-else-if="msg.type == 'ing'">
  2989. <div v-if="msg.flag">
  2990. <span>{{ msg.content }}</span>
  2991. <span class="loading-dots">
  2992. <span class="dot">.</span>
  2993. <span class="dot">.</span>
  2994. <span class="dot">.</span>
  2995. <span class="dot">.</span>
  2996. <span class="dot">.</span>
  2997. <span class="dot">.</span>
  2998. </span>
  2999. </div>
  3000. <div v-else v-html="msg.content"></div>
  3001. </div>
  3002. <div v-else-if="msg.type == 'title1'" style="display: flex; width: 100%">
  3003. <div class="mainTitle">
  3004. {{ msg.content }}
  3005. </div>
  3006. <div class="date">
  3007. {{ msg.date }}
  3008. </div>
  3009. </div>
  3010. <div v-else-if="msg.type == 'title2'" class="title2">
  3011. <img class="title1Img" :src="title1" alt="出错了" />
  3012. </div>
  3013. <div v-else-if="msg.type == 'title3'" class="title3">
  3014. <img class="title2Img" :src="msg.content" alt="出错了" />
  3015. </div>
  3016. <div v-else-if="msg.type == 'content1'" class="content1">
  3017. <div v-if="msg.kline" class="kline-container content1chart">
  3018. <div :id="'kline-container-' + index" class="chart-mount-point">
  3019. <div v-if="!msg.hasValidData" class="no-data-message">
  3020. <p>暂无数据</p>
  3021. </div>
  3022. </div>
  3023. </div>
  3024. <div v-else class="content1Text">
  3025. <div v-html="msg.content" class="text1"></div>
  3026. </div>
  3027. </div>
  3028. <div v-else-if="msg.type == 'content2'" class="content2">
  3029. <div class="kline-container content2chart">
  3030. <div :id="'kline-container-' + index" class="chart-mount-point">
  3031. <div v-if="!msg.hasValidData" class="no-data-message">
  3032. <p>暂无数据</p>
  3033. </div>
  3034. </div>
  3035. </div>
  3036. </div>
  3037. <div v-else-if="msg.type == 'content3'" class="content3">
  3038. <div class="content3Text">
  3039. <div v-html="msg.content" class="text3"></div>
  3040. </div>
  3041. </div>
  3042. <div v-else-if="msg.type == 'mianze'" class="mianze">
  3043. <div v-html="msg.content"></div>
  3044. </div>
  3045. <div v-else v-html="msg.content"></div>
  3046. </div>
  3047. </div>
  3048. </template>
  3049. <style scoped>
  3050. .bgc {
  3051. position: absolute;
  3052. z-index: -1;
  3053. max-width: 530px;
  3054. min-width: 340px;
  3055. width: 40%;
  3056. height: auto;
  3057. /* right: 30px; */
  3058. /* top: -30px; */
  3059. }
  3060. .logo1 {
  3061. max-width: 350px;
  3062. min-width: 200px;
  3063. width: 25%;
  3064. }
  3065. .logo2 {
  3066. margin-top: 20px;
  3067. max-width: 350px;
  3068. min-width: 200px;
  3069. width: 30%;
  3070. /* position: relative; */
  3071. }
  3072. .chat-container {
  3073. display: flex;
  3074. flex-direction: column;
  3075. overflow: hidden;
  3076. }
  3077. .gif-area {
  3078. padding: 70px 0px;
  3079. position: relative;
  3080. /* height: 30vh; */
  3081. display: flex;
  3082. flex-direction: column;
  3083. justify-content: center;
  3084. align-items: center;
  3085. flex-shrink: 0;
  3086. /* 防止GIF区域被压缩 */
  3087. }
  3088. .gif-area img {
  3089. /* width: 30%; */
  3090. /* 改为百分比单位 */
  3091. /* min-width: 200px; */
  3092. /* 最小尺寸 */
  3093. /* max-width: 400px; */
  3094. /* 最大尺寸 */
  3095. /* height: auto; */
  3096. /* left: 50%; */
  3097. /* transition: all 0.3s; */
  3098. /* 添加过渡效果 */
  3099. }
  3100. .message-area {
  3101. margin-top: 2%;
  3102. flex: 1;
  3103. /* 消息区域占据剩余空间 */
  3104. overflow-y: auto;
  3105. padding: 20px;
  3106. display: flex;
  3107. flex-direction: column;
  3108. gap: 15px;
  3109. }
  3110. .marquee-container {
  3111. /* position: absolute; */
  3112. bottom: 0;
  3113. width: 100%;
  3114. /* ga */
  3115. }
  3116. .marquee-row {
  3117. white-space: nowrap;
  3118. overflow: visible;
  3119. padding: 8px 0;
  3120. width: 100%;
  3121. }
  3122. .marquee-item {
  3123. display: inline-block;
  3124. margin: 0 15px;
  3125. padding: 8px 20px;
  3126. background: rgba(255, 255, 255, 0.9);
  3127. /* 白色背景 */
  3128. border-radius: 10px;
  3129. /* 圆角矩形 */
  3130. color: #333;
  3131. /* 文字颜色改为深色 */
  3132. box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  3133. /* 添加阴影 */
  3134. transition: all 0.3s;
  3135. transition: color 0.3s;
  3136. }
  3137. .top {
  3138. animation: marquee 25s linear infinite;
  3139. /* 默认动画是运行状态 */
  3140. animation-play-state: running;
  3141. }
  3142. .bottom {
  3143. animation: marquee 15s linear infinite reverse;
  3144. /* 默认动画是运行状态 */
  3145. animation-play-state: running;
  3146. }
  3147. /* 添加PC端专用速度 */
  3148. @media (min-width: 768px) {
  3149. .top {
  3150. animation-duration: 35s;
  3151. /* PC端改为35秒 */
  3152. }
  3153. .bottom {
  3154. animation-duration: 35s;
  3155. /* PC端改为35秒 */
  3156. }
  3157. }
  3158. @keyframes marquee {
  3159. 0% {
  3160. transform: translateX(100%);
  3161. }
  3162. 100% {
  3163. transform: translateX(-250%);
  3164. }
  3165. }
  3166. .loading-dots {
  3167. display: inline-block;
  3168. }
  3169. .dot {
  3170. opacity: 0.4;
  3171. animation: loading 1.4s infinite;
  3172. }
  3173. .dot:nth-child(1) {
  3174. animation-delay: 0s;
  3175. }
  3176. .dot:nth-child(2) {
  3177. animation-delay: 0.2s;
  3178. }
  3179. .dot:nth-child(3) {
  3180. animation-delay: 0.4s;
  3181. }
  3182. .dot:nth-child(4) {
  3183. animation-delay: 0.6s;
  3184. }
  3185. .dot:nth-child(5) {
  3186. animation-delay: 0.8s;
  3187. }
  3188. .dot:nth-child(6) {
  3189. animation-delay: 1s;
  3190. }
  3191. @keyframes loading {
  3192. 0%,
  3193. 60%,
  3194. 100% {
  3195. opacity: 0.4;
  3196. }
  3197. 30% {
  3198. opacity: 1;
  3199. }
  3200. }
  3201. .message-bubble {
  3202. max-width: 80%;
  3203. margin: 10px 0px;
  3204. padding: 15px 20px;
  3205. position: relative;
  3206. }
  3207. .message-bubble.user {
  3208. color: #6d22f8;
  3209. background: white;
  3210. font-weight: bold;
  3211. margin-left: auto;
  3212. border-radius: 10px;
  3213. margin-right: 20px;
  3214. /* border-bottom-right-radius: 5px; */
  3215. }
  3216. .message-bubble.ai {
  3217. background: #2b378d;
  3218. color: #ffffff;
  3219. margin: 0 auto;
  3220. /* border-bottom-left-radius: 5px; */
  3221. }
  3222. .message-bubble.ing {
  3223. background: #ffffff;
  3224. color: #000000;
  3225. font-weight: bold;
  3226. border-radius: 10px;
  3227. margin-left: 20px;
  3228. margin-right: auto;
  3229. /* border-bottom-left-radius: 5px; */
  3230. }
  3231. .message-bubble.ai.title1 {
  3232. width: 100%;
  3233. display: flex;
  3234. border-radius: 10px 10px 0px 0px;
  3235. /* border-bottom-left-radius: 5px; */
  3236. }
  3237. .mainTitle {
  3238. font-size: 16px;
  3239. font-weight: bold;
  3240. background-image: url("@/assets/img/AiEmotion/bk01.png");
  3241. background-repeat: no-repeat;
  3242. background-size: 100% 100%;
  3243. min-width: 200px;
  3244. width: 20vw;
  3245. height: 50px;
  3246. padding: 5px 0px 0px 0px;
  3247. display: flex;
  3248. justify-content: center;
  3249. align-items: center;
  3250. }
  3251. .date {
  3252. font-size: 18px;
  3253. font-weight: bold;
  3254. margin-left: auto;
  3255. /* width: 100px; */
  3256. display: flex;
  3257. justify-content: center;
  3258. align-items: center;
  3259. }
  3260. .message-bubble.ai.title2 {
  3261. width: 100%;
  3262. display: flex;
  3263. justify-content: center;
  3264. align-items: center;
  3265. }
  3266. .title1Img {
  3267. max-width: 500px;
  3268. width: 80vw;
  3269. }
  3270. .message-bubble.ai.title3 {
  3271. width: 100%;
  3272. display: flex;
  3273. justify-content: center;
  3274. align-items: center;
  3275. }
  3276. .title2Img {
  3277. max-width: 500px;
  3278. width: 90vw;
  3279. }
  3280. .message-bubble.ai.content1 {
  3281. width: 100%;
  3282. display: flex;
  3283. justify-content: center;
  3284. align-items: center;
  3285. }
  3286. .content1chart {
  3287. background-image: url("@/assets/img/AIchat/罗盘边框.png");
  3288. background-repeat: no-repeat;
  3289. background-size: 100% 100%;
  3290. width: 50vw;
  3291. min-width: 350px;
  3292. display: flex;
  3293. justify-content: center;
  3294. align-items: center;
  3295. }
  3296. .content1Text {
  3297. background-image: url("@/assets/img/AIchat/框.png");
  3298. background-repeat: no-repeat;
  3299. background-size: 100% 100%;
  3300. width: 50vw;
  3301. min-width: 350px;
  3302. /* height: 20vw; */
  3303. /* max-height: 400px; */
  3304. padding: 5% 0;
  3305. }
  3306. .text1 {
  3307. font-weight: bold;
  3308. /* margin-left: 6%; */
  3309. /* margin-bottom: 10px; */
  3310. margin: 0px 6% 10px 6%;
  3311. font-size: 30px;
  3312. }
  3313. .message-bubble.ai.content2 {
  3314. width: 100%;
  3315. display: flex;
  3316. justify-content: center;
  3317. align-items: center;
  3318. }
  3319. .content2chart {
  3320. background-image: url("@/assets/img/AIchat/PCbackPic.png");
  3321. background-repeat: no-repeat;
  3322. background-size: 100% 100%;
  3323. width: 50vw;
  3324. min-width: 350px;
  3325. display: flex;
  3326. justify-content: center;
  3327. align-items: center;
  3328. height: calc(500px + 10vw) !important;
  3329. }
  3330. .message-bubble.ai.content3 {
  3331. width: 100%;
  3332. display: flex;
  3333. justify-content: center;
  3334. align-items: center;
  3335. }
  3336. .content3Text {
  3337. background-image: url("@/assets/img/AIchat/边框.png");
  3338. background-repeat: no-repeat;
  3339. background-size: 100% 100%;
  3340. width: 50vw;
  3341. min-width: 350px;
  3342. /* height: 20vw; */
  3343. /* max-height: 400px; */
  3344. padding: 5% 0px;
  3345. }
  3346. .text3 {
  3347. /* font-weight: bold; */
  3348. /* margin-left: 6%; */
  3349. /* margin-bottom: 10px; */
  3350. margin: 0px 6% 10px 6%;
  3351. font-size: 30px;
  3352. }
  3353. .message-bubble.ai.mianze {
  3354. width: 100%;
  3355. text-align: center;
  3356. font-weight: bold;
  3357. font-size: 24px;
  3358. border-radius: 0px 0px 10px 10px;
  3359. }
  3360. .kline-container {
  3361. margin-top: 10px;
  3362. /* 最小高度 */
  3363. min-height: 320px;
  3364. /* 视口高度单位 */
  3365. height: 40vh;
  3366. width: 50vw;
  3367. }
  3368. @media (max-width: 768px) {
  3369. .kline-container {
  3370. min-width: 75vw;
  3371. }
  3372. .content1Text {
  3373. width: 77vw;
  3374. min-width: 0px;
  3375. /* height: 20vw; */
  3376. /* min-height: 150px; */
  3377. }
  3378. .text1 {
  3379. font-size: 20px;
  3380. }
  3381. .content2chart {
  3382. background-image: url("@/assets/img/AIchat/new-app-bgc.png") !important;
  3383. height: 100vw;
  3384. }
  3385. .content3Text {
  3386. width: 77vw;
  3387. min-width: 0px;
  3388. /* height: 20vw; */
  3389. /* min-height: 150px; */
  3390. }
  3391. .text3 {
  3392. font-size: 20px;
  3393. }
  3394. .message-bubble.ai.mianze {
  3395. font-size: 18px;
  3396. }
  3397. }
  3398. .kline-container .chart-mount-point {
  3399. display: flex;
  3400. justify-content: center;
  3401. align-items: center;
  3402. height: 80%;
  3403. width: 90%;
  3404. }
  3405. </style>