diff --git a/src/assets/img/AIchat/主力作战.png b/src/assets/img/AIchat/主力作战.png
new file mode 100644
index 0000000..20e5ec8
Binary files /dev/null and b/src/assets/img/AIchat/主力作战.png differ
diff --git a/src/assets/img/AIchat/攻防三维.png b/src/assets/img/AIchat/攻防三维.png
new file mode 100644
index 0000000..d006673
Binary files /dev/null and b/src/assets/img/AIchat/攻防三维.png differ
diff --git a/src/assets/img/AIchat/核心价值评估标题.png b/src/assets/img/AIchat/核心价值评估标题.png
new file mode 100644
index 0000000..0daca02
Binary files /dev/null and b/src/assets/img/AIchat/核心价值评估标题.png differ
diff --git a/src/assets/img/AIchat/框.png b/src/assets/img/AIchat/框.png
new file mode 100644
index 0000000..b4cf65e
Binary files /dev/null and b/src/assets/img/AIchat/框.png differ
diff --git a/src/assets/img/AIchat/综合作战.png b/src/assets/img/AIchat/综合作战.png
new file mode 100644
index 0000000..55e3add
Binary files /dev/null and b/src/assets/img/AIchat/综合作战.png differ
diff --git a/src/assets/img/AIchat/罗盘边框.png b/src/assets/img/AIchat/罗盘边框.png
new file mode 100644
index 0000000..6ab83e6
Binary files /dev/null and b/src/assets/img/AIchat/罗盘边框.png differ
diff --git a/src/assets/img/AIchat/边框.png b/src/assets/img/AIchat/边框.png
new file mode 100644
index 0000000..b4c457b
Binary files /dev/null and b/src/assets/img/AIchat/边框.png differ
diff --git a/src/views/AIchat.vue b/src/views/AIchat.vue
index 676d2fa..03cc174 100644
--- a/src/views/AIchat.vue
+++ b/src/views/AIchat.vue
@@ -1,120 +1,127 @@
 <script setup>
 import { ref, onMounted, watch, nextTick, reactive, onUnmounted } from "vue";
 import { ElDialog } from "element-plus";
-import { getReplyStreamAPI, getReplyAPI, TTSAPI, getQuestionAPI, qsArpAamClickAPI } from "../api/AIxiaocaishen";
-import { useUserStore } from '../store/userPessionCode'
-import { useChatStore } from '../store/chat'
-import { useAudioStore } from '../store/audio'
-import { useDataStore } from '@/store/dataList.js'
-import { marked } from 'marked'; // 引入marked库
-import katex from 'katex'; // 引入 KaTeX 库
-import { htmlToText } from 'html-to-text';
-import { Howl, Howler } from 'howler';
-import * as echarts from 'echarts'
-
-import AIgif1 from '@/assets/img/AIchat/AIgif1.gif'
-import AIgif2 from '@/assets/img/AIchat/AIgif2.gif'
-import AIgif3 from '@/assets/img/AIchat/AIgif3.gif'
-import AIgif4 from '@/assets/img/AIchat/AIgif4.gif'
-import AIgif5 from '@/assets/img/AIchat/AIgif5.gif'
-import AIgif6 from '@/assets/img/AIchat/AIgif6.gif'
-import AIgif7 from '@/assets/img/AIchat/AIgif7.gif'
-const gifList = [
-  AIgif1,
-  AIgif2,
-  AIgif3,
-  AIgif4,
-  AIgif5,
-  AIgif6,
-  AIgif7
-]
-
-const chatStore = useChatStore()
-const audioStore = useAudioStore()
-const dataStore = useDataStore()
+import {
+  getReplyStreamAPI,
+  getReplyAPI,
+  TTSAPI,
+  getQuestionAPI,
+  qsArpAamClickAPI,
+} from "../api/AIxiaocaishen";
+import { useUserStore } from "../store/userPessionCode";
+import { useChatStore } from "../store/chat";
+import { useAudioStore } from "../store/audio";
+import { useDataStore } from "@/store/dataList.js";
+import { marked } from "marked"; // 引入marked库
+import katex from "katex"; // 引入 KaTeX 库
+import { htmlToText } from "html-to-text";
+import { Howl, Howler } from "howler";
+import * as echarts from "echarts";
+
+import AIgif1 from "@/assets/img/AIchat/AIgif1.gif";
+import AIgif2 from "@/assets/img/AIchat/AIgif2.gif";
+import AIgif3 from "@/assets/img/AIchat/AIgif3.gif";
+import AIgif4 from "@/assets/img/AIchat/AIgif4.gif";
+import AIgif5 from "@/assets/img/AIchat/AIgif5.gif";
+import AIgif6 from "@/assets/img/AIchat/AIgif6.gif";
+import AIgif7 from "@/assets/img/AIchat/AIgif7.gif";
+import title1 from "@/assets/img/AIchat/核心价值评估标题.png";
+import title2 from "@/assets/img/AIchat/主力作战.png";
+import title3 from "@/assets/img/AIchat/攻防三维.png";
+import title4 from "@/assets/img/AIchat/综合作战.png";
+
+const gifList = [AIgif1, AIgif2, AIgif3, AIgif4, AIgif5, AIgif6, AIgif7];
+
+const chatStore = useChatStore();
+const audioStore = useAudioStore();
+const dataStore = useDataStore();
 // 随机GIF
 const currentGif = ref("");
 
 // 推荐问题飘屏数据
-const questionsList = ref([])
+const questionsList = ref([]);
 const getQuestionsList = async () => {
-  const result = await getQuestionAPI()
-  questionsList.value = result.data
-}
+  const result = await getQuestionAPI();
+  questionsList.value = result.data;
+};
 
 // 定义自定义事件
 const emit = defineEmits(["updateMessage", "sendMessage"]);
 
 // 弹窗控制
-const dialogVisible = ref(false);
-const currentQuestions = ref("");
-const showQuestions = async (questions) => {
-
-  const click = await qsArpAamClickAPI({
-    token: localStorage.getItem('localToken'),
-    id: questions.id
-  })
-  console.log(click);
-
-  currentQuestions.value = questions;
-  // 触发自定义事件
-  emit("updateMessage", questions.title);
-  // emit("sendMessage");
-};
+// const currentQuestions = ref("");
+// const showQuestions = async (questions) => {
+//   const click = await qsArpAamClickAPI({
+//     token: localStorage.getItem("localToken"),
+//     id: questions.id,
+//   });
+//   console.log(click);
+
+//   currentQuestions.value = questions;
+//   // 触发自定义事件
+//   emit("updateMessage", questions.title);
+//   // emit("sendMessage");
+// };
 
 // 飘屏控制
-const floatingTopMouseEnter = function () {
-
-  const userAgent = navigator.userAgent.toLowerCase();
-  const mobileKeywords = ['mobile', 'android', 'iphone', 'ipad', 'ipod'];
-  const isMobile = mobileKeywords.some(keyword => userAgent.includes(keyword));
-  if (isMobile) {
-    return
-  }
-  console.log("鼠标指上去");
-  const floatTop = document.getElementById("top");
-  floatTop.style.animationPlayState = "paused";
-}
-const floatingTopMouseLeave = function () {
-  const userAgent = navigator.userAgent.toLowerCase();
-  const mobileKeywords = ['mobile', 'android', 'iphone', 'ipad', 'ipod'];
-  const isMobile = mobileKeywords.some(keyword => userAgent.includes(keyword));
-  if (isMobile) {
-    return
-  }
-  console.log("鼠标指下去");
-  const floatTop = document.getElementById("top");
-  floatTop.style.animationPlayState = "running"
-}
-const floatingBottomMouseEnter = function () {
-  const userAgent = navigator.userAgent.toLowerCase();
-  const mobileKeywords = ['mobile', 'android', 'iphone', 'ipad', 'ipod'];
-  const isMobile = mobileKeywords.some(keyword => userAgent.includes(keyword));
-  if (isMobile) {
-    return
-  }
-  console.log("鼠标指上去");
-  const floatBottom = document.getElementById("bottom");
-  floatBottom.style.animationPlayState = "paused";
-}
-const floatingBottomMouseLeave = function () {
-  const userAgent = navigator.userAgent.toLowerCase();
-  const mobileKeywords = ['mobile', 'android', 'iphone', 'ipad', 'ipod'];
-  const isMobile = mobileKeywords.some(keyword => userAgent.includes(keyword));
-  if (isMobile) {
-    return
-  }
-  console.log("鼠标指下去");
-  const floatBottom = document.getElementById("bottom");
-  floatBottom.style.animationPlayState = "running"
-}
+// const floatingTopMouseEnter = function () {
+//   const userAgent = navigator.userAgent.toLowerCase();
+//   const mobileKeywords = ["mobile", "android", "iphone", "ipad", "ipod"];
+//   const isMobile = mobileKeywords.some((keyword) =>
+//     userAgent.includes(keyword)
+//   );
+//   if (isMobile) {
+//     return;
+//   }
+//   console.log("鼠标指上去");
+//   const floatTop = document.getElementById("top");
+//   floatTop.style.animationPlayState = "paused";
+// };
+// const floatingTopMouseLeave = function () {
+//   const userAgent = navigator.userAgent.toLowerCase();
+//   const mobileKeywords = ["mobile", "android", "iphone", "ipad", "ipod"];
+//   const isMobile = mobileKeywords.some((keyword) =>
+//     userAgent.includes(keyword)
+//   );
+//   if (isMobile) {
+//     return;
+//   }
+//   console.log("鼠标指下去");
+//   const floatTop = document.getElementById("top");
+//   floatTop.style.animationPlayState = "running";
+// };
+// const floatingBottomMouseEnter = function () {
+//   const userAgent = navigator.userAgent.toLowerCase();
+//   const mobileKeywords = ["mobile", "android", "iphone", "ipad", "ipod"];
+//   const isMobile = mobileKeywords.some((keyword) =>
+//     userAgent.includes(keyword)
+//   );
+//   if (isMobile) {
+//     return;
+//   }
+//   console.log("鼠标指上去");
+//   const floatBottom = document.getElementById("bottom");
+//   floatBottom.style.animationPlayState = "paused";
+// };
+// const floatingBottomMouseLeave = function () {
+//   const userAgent = navigator.userAgent.toLowerCase();
+//   const mobileKeywords = ["mobile", "android", "iphone", "ipad", "ipod"];
+//   const isMobile = mobileKeywords.some((keyword) =>
+//     userAgent.includes(keyword)
+//   );
+//   if (isMobile) {
+//     return;
+//   }
+//   console.log("鼠标指下去");
+//   const floatBottom = document.getElementById("bottom");
+//   floatBottom.style.animationPlayState = "running";
+// };
 
 // 音频播放方法
 const playAudio = (url) => {
-
   // 添加空值校验
   if (!url) {
-    console.warn('音频URL为空，跳过播放');
+    console.warn("音频URL为空，跳过播放");
     audioStore.isPlaying = false;
     return;
   }
@@ -129,34 +136,34 @@ const playAudio = (url) => {
       const newSound = new Howl({
         src: [url],
         html5: true, // 强制HTML5 Audio解决iOS兼容问题
-        format: ['mp3', 'acc'],
+        format: ["mp3", "acc"],
         rate: 1.2, // 调整播放速度
         onplay: () => {
-          audioStore.isPlaying = true // 改为更新store状态
-          newSound.volume(1) // 添加音量设置
+          audioStore.isPlaying = true; // 改为更新store状态
+          newSound.volume(1); // 添加音量设置
         },
-        onend: () => audioStore.isPlaying = false,
-        onstop: () => audioStore.isPlaying = false,
+        onend: () => (audioStore.isPlaying = false),
+        onstop: () => (audioStore.isPlaying = false),
         onloaderror: (id, err) => {
-          console.error('音频加载失败:', err);
-          ElMessage.error('音频播放失败，请检查网络连接');
-        }
+          console.error("音频加载失败:", err);
+          ElMessage.error("音频播放失败，请检查网络连接");
+        },
       });
       if (audioStore.nowSound) {
-        audioStore.nowSound.stop()
+        audioStore.nowSound.stop();
       }
       audioStore.nowSound = newSound;
       audioStore.isNewInstance = false;
 
-      console.log('新音频')
+      console.log("新音频");
     } else {
-      console.log('已经有音频')
+      console.log("已经有音频");
     }
 
     const newSound = audioStore.nowSound;
 
     // 添加立即播放逻辑
-    newSound.play()
+    newSound.play();
 
     audioStore.setAudioInstance(newSound);
     Howler._howls.push(newSound); // 强制注册到全局管理
@@ -164,7 +171,7 @@ const playAudio = (url) => {
     // if (Howler.autoUnlock) {
     //   Howler.autoUnlock();
     // }
-  }
+  };
 
   // if (/iPhone|iPad|iPod/.test(navigator.userAgent)) {
   //   document.addEventListener('touchstart', handlePlay, { once: true });
@@ -176,7 +183,6 @@ const playAudio = (url) => {
   handlePlay();
 
   // Howler.volume(1.0) // 添加全局音量设置
-
 };
 // 新增暂停方法
 const pauseAudio = () => {
@@ -201,46 +207,46 @@ const pauseAudio = () => {
 };
 
 // 获取消息
-const chatMsg = computed(() => chatStore.messages)
+const chatMsg = computed(() => chatStore.messages);
 const props = defineProps({
   messages: Array,
   chartData: {
     type: Object,
-    default: null
+    default: null,
   },
   index: {
     type: Number,
-    required: true
-  }
+    required: true,
+  },
 });
 
 // 打字机效果
-const typewriterContent = ref("")
-const isTyping = ref(false)
+const typewriterContent = ref("");
+const isTyping = ref(false);
 
 const typeWriter = (text, callback) => {
-  let index = 0
-  isTyping.value = true
-  typewriterContent.value = ""
+  let index = 0;
+  isTyping.value = true;
+  typewriterContent.value = "";
 
   const typingInterval = setInterval(() => {
     if (index < text.length) {
-      typewriterContent.value += text.charAt(index)
-      index++
+      typewriterContent.value += text.charAt(index);
+      index++;
       // 自动滚动到底部
       nextTick(() => {
-        const container = document.querySelector('.message-area')
-        if (container) container.scrollTop = container.scrollHeight
-      })
+        const container = document.querySelector(".message-area");
+        if (container) container.scrollTop = container.scrollHeight;
+      });
     } else {
-      clearInterval(typingInterval)
-      isTyping.value = false
-      if (callback) callback()
+      clearInterval(typingInterval);
+      isTyping.value = false;
+      if (callback) callback();
     }
-  }, 50) // 调整速度(毫秒)
-}
+  }, 50); // 调整速度(毫秒)
+};
 
-const hasValidData = ref(false)
+const hasValidData = ref(false);
 
 // 创建一个非响应式的对象来存储图表实例
 const chartInstancesMap = {};
@@ -260,12 +266,12 @@ watch(
 
     previousMessagesLength.value = newVal.length;
     if (newVal.length > 0) {
-      console.log("消息列表已更新，最新消息:", newVal[newVal.length - 1])
-      chatStore.messages.push(newVal[newVal.length - 1])
+      console.log("消息列表已更新，最新消息:", newVal[newVal.length - 1]);
+      chatStore.messages.push(newVal[newVal.length - 1]);
 
       console.log("消息列表已更新，最新消息:", chatMsg[chatMsg.length - 1]);
 
-      console.log('token', localStorage.getItem('localToken'));
+      console.log("token", localStorage.getItem("localToken"));
 
       // 获取权限
       const userStore = useUserStore();
@@ -273,7 +279,7 @@ watch(
       const params = {
         content: newVal[newVal.length - 1].content,
         userData: {
-          token: localStorage.getItem('localToken'),
+          token: localStorage.getItem("localToken"),
           // language: "cn",
           // brainPrivilegeState: userStore.brainPerssion,
           // swordPrivilegeState: userStore.swordPerssion,
@@ -292,39 +298,94 @@ watch(
           aibullPrivilegeState: "1",
           aigoldBullPrivilegeS: "1",
           airadarPrivilegeStat: "1",
-          marketList: "hk,cn,usa,my,sg,vi,in,gb"
-        }
-      }
+          marketList: "hk,cn,usa,my,sg,vi,in,gb",
+        },
+      };
 
       try {
+        chatStore.messages.push({
+          class: "ing",
+          type: "ing",
+          content: "正在为您生成特斯拉全景作战报告",
+        });
+
+        chatStore.messages.push({
+          sender: "ai",
+          class: "title1",
+          type: "title1",
+          content: "特斯拉全景作战报告",
+          date: "05/06/2025",
+        });
+
+        chatStore.messages.push({
+          sender: "ai",
+          class: "title2",
+          type: "title2",
+          content: "",
+        });
+
+        chatStore.messages.push({
+          sender: "ai",
+          class: "title3",
+          type: "title3",
+          content: title2,
+        });
+
+        chatStore.messages.push({
+          sender: "ai",
+          class: "title3",
+          type: "title3",
+          content: title3,
+        });
+
+        chatStore.messages.push({
+          sender: "ai",
+          class: "title3",
+          type: "title3",
+          content: title4,
+        });
+
+        chatStore.messages.push({
+          sender: "ai",
+          class: "content1",
+          type: "content1",
+          content: "股票名称:tesla",
+        });
+
+        chatStore.messages.push({
+          sender: "ai",
+          class: "content2",
+          type: "content2",
+          content: "K线图",
+        });
+
+        chatStore.messages.push({
+          sender: "ai",
+          class: "content3",
+          type: "content3",
+          content: "(1)牛股评级:⭐⭐⭐⭐⭐",
+        });
 
         chatStore.messages.push({
           sender: "ai",
-          content:
-            `<div>
-              <span>AI正在思考中</span>
-              <el-icon class="is-loading">
-                  <Loading />
-              </el-icon>
-            </div>`
+          class: "mianze",
+          type: "mianze",
+          content: "内容由AI生成,请注意甄别",
         });
 
         // 调用工作流获取回复
         const result = (await getReplyAPI(params)).json();
-        // console.log(result, "result");
         // 获取结果
         const ans = ref();
         await result.then((res) => {
-          // console.log(res.data, "res");
           // 解析 data 字段中的 JSON
           ans.value = JSON.parse(res.data);
-        })
-        console.log(ans.value, "ans");
+        });
         const AIcontent = ref("");
         // 处理不同的 answer 字段
 
         if (ans.value.resp !== "" && ans.value.resp !== null) {
-          console.log('执行回绝话术')
+          console.log("执行回绝话术");
           AIcontent.value = ans.value.resp;
 
           // 修改后的消息处理逻辑
@@ -332,18 +393,21 @@ watch(
           const katexRegex = /\$\$(.*?)\$\$/g;
           // const plainTextContent = htmlToText(processedContent);
 
-          const aiContent = processedContent.replace(katexRegex, (match, formula) => {
-            try {
-              return katex.renderToString(formula, { throwOnError: false });
-            } catch (error) {
-              console.error('KaTeX 渲染错误:', error);
-              return match;
+          const aiContent = processedContent.replace(
+            katexRegex,
+            (match, formula) => {
+              try {
+                return katex.renderToString(formula, { throwOnError: false });
+              } catch (error) {
+                console.error("KaTeX 渲染错误:", error);
+                return match;
+              }
             }
-          });
+          );
 
-          console.log(aiContent, 'aiContent');
+          console.log(aiContent, "aiContent");
 
-          chatStore.messages.pop();
+          // chatStore.messages.pop();
 
           chatStore.messages.push({
             sender: "ai",
@@ -351,8 +415,8 @@ watch(
           });
 
           chatStore.setLoading(false);
-
-        } else {  // 判断是否是股票问题
+        } else {
+          // 判断是否是股票问题
           if (ans.value.answer !== "") {
             AIcontent.value = ans.value.answer;
             const type = ans.value.type;
@@ -364,8 +428,8 @@ watch(
             const Kline20 = {
               name: data.data.HomePage.StockInformation.Name,
               Kline: data.data,
-              type: type
-            }
+              type: type,
+            };
 
             // 打印K线数据结构
             console.log("K线数据结构:", Kline20);
@@ -377,7 +441,7 @@ watch(
             hasValidData.value = true;
             console.log("hasValidData设置为:", hasValidData.value);
 
-            chatStore.messages.pop();
+            // chatStore.messages.pop();
 
             // 先推送K线图消息
             const klineMessageId = `kline-${Date.now()}`;
@@ -388,7 +452,7 @@ watch(
               type: "kline",
               chartData: Kline20,
               messageId: klineMessageId,
-              hasValidData: true // 添加hasValidData标志
+              hasValidData: true, // 添加hasValidData标志
             });
 
             console.log("K线消息已添加到聊天列表");
@@ -396,7 +460,7 @@ watch(
             // 再推送文字分析内容的消息
             chatStore.messages.push({
               sender: "ai",
-              content: "AI正在思考中..."
+              content: "AI正在思考中...",
             });
 
             // 在渲染完成后初始化图表
@@ -436,15 +500,17 @@ watch(
           const plainTextContent = htmlToText(processedContent);
 
           // 获取音频数据
-          const TTSResult = (await TTSAPI({
-            language: "cn",
-            content: plainTextContent
-          })).json()
+          const TTSResult = (
+            await TTSAPI({
+              language: "cn",
+              content: plainTextContent,
+            })
+          ).json();
 
           const tts = ref();
           await TTSResult.then((res) => {
             tts.value = JSON.parse(res.data);
-          })
+          });
 
           const ttsUrl = ref();
           if (tts.value.tts_cn !== null) {
@@ -460,14 +526,14 @@ watch(
           if (ttsUrl.value) {
             nextTick(() => {
               if (audioStore.isVoiceEnabled) {
-                console.log("ttsUrl.value", ttsUrl.value)
+                console.log("ttsUrl.value", ttsUrl.value);
                 // 播放音频
-                playAudio(ttsUrl.value)
+                playAudio(ttsUrl.value);
               }
             });
           }
 
-          chatStore.messages.pop();
+          // chatStore.messages.pop();
           // 先推送初始消息
           const aiMessage = reactive({
             sender: "ai",
@@ -481,21 +547,25 @@ watch(
             if (index < processedContent.length) {
               aiMessage.content += processedContent.charAt(index);
               index++;
-
             } else {
               clearInterval(typingInterval);
               aiMessage.isTyping = false;
 
               // 延迟处理KaTeX确保DOM已更新
               nextTick(() => {
-                aiMessage.content = aiMessage.content.replace(katexRegex, (match, formula) => {
-                  try {
-                    return katex.renderToString(formula, { throwOnError: false });
-                  } catch (error) {
-                    console.error('KaTeX 渲染错误:', error);
-                    return match;
+                aiMessage.content = aiMessage.content.replace(
+                  katexRegex,
+                  (match, formula) => {
+                    try {
+                      return katex.renderToString(formula, {
+                        throwOnError: false,
+                      });
+                    } catch (error) {
+                      console.error("KaTeX 渲染错误:", error);
+                      return match;
+                    }
                   }
-                });
+                );
                 chatStore.setLoading(false);
               });
             }
@@ -510,18 +580,16 @@ watch(
           //   chatStore.setLoading(false);
           // }
         }
-      }
-      catch (e) {
-        console.error('请求失败:', e);
+      } catch (e) {
+        console.error("请求失败:", e);
         hasValidData.value = false; // 请求失败时设置数据无效
-        chatStore.messages.pop();
+        // chatStore.messages.pop();
         chatStore.messages.push({
           sender: "ai",
           content: "AI思考失败，请稍后再试...  ",
         });
         chatStore.setLoading(false);
-      }
-      finally {
+      } finally {
         await chatStore.getUserCount();
       }
     }
@@ -530,17 +598,16 @@ watch(
 );
 
 function KlineCanvsEcharts(containerId) {
-
   function vwToPx(vw) {
-    console.log((window.innerWidth * vw) / 100, 'vwToPx');
-    return (window.innerWidth * vw) / 100
+    console.log((window.innerWidth * vw) / 100, "vwToPx");
+    return (window.innerWidth * vw) / 100;
   }
 
-  console.log('KLine渲染: 开始处理数据, 容器ID:', containerId);
+  console.log("KLine渲染: 开始处理数据, 容器ID:", containerId);
 
   // 从 chatStore 中获取数据
   const messages = chatStore.messages;
-  console.log('KLine渲染: 获取到的消息:', messages);
+  console.log("KLine渲染: 获取到的消息:", messages);
   let klineMessageIndex = -1;
   let klineData = null;
 
@@ -555,57 +622,59 @@ function KlineCanvsEcharts(containerId) {
   //     break;
   //   }
   // }
-  klineMessageIndex = containerId.split('-')[2]
-  console.log('KLine渲染: 找到K线消息索引:', klineMessageIndex);
-  if (messages[klineMessageIndex].type === 'kline' && messages[klineMessageIndex].chartData) {
-    klineData = messages[klineMessageIndex].chartData
+  klineMessageIndex = containerId.split("-")[2];
+  console.log("KLine渲染: 找到K线消息索引:", klineMessageIndex);
+  if (
+    messages[klineMessageIndex].type === "kline" &&
+    messages[klineMessageIndex].chartData
+  ) {
+    klineData = messages[klineMessageIndex].chartData;
   }
 
-
   if (!klineData || !klineData.Kline) {
-    console.warn('KLine渲染: 数据无效 - 在chatStore中找不到有效的K线数据');
+    console.warn("KLine渲染: 数据无效 - 在chatStore中找不到有效的K线数据");
     return;
   }
 
   // 获取容器元素
   const container = document.getElementById(containerId);
   if (!container) {
-    console.error('KLine渲染: 找不到容器元素:', containerId);
+    console.error("KLine渲染: 找不到容器元素:", containerId);
     return;
   }
 
   // 创建图表实例
-  console.log('KLine渲染: 创建图表实例');
+  console.log("KLine渲染: 创建图表实例");
   try {
     // 如果已有实例，先销毁
     if (chartInstancesMap[containerId]) {
-      console.log('KLine渲染: 销毁已有图表实例');
+      console.log("KLine渲染: 销毁已有图表实例");
       chartInstancesMap[containerId].dispose();
       delete chartInstancesMap[containerId];
     }
 
     // 使用普通变量存储实例
     chartInstancesMap[containerId] = echarts.init(container);
-    console.log('KLine渲染: 图表实例创建成功');
+    console.log("KLine渲染: 图表实例创建成功");
   } catch (error) {
-    console.error('KLine渲染: 图表实例创建失败:', error);
+    console.error("KLine渲染: 图表实例创建失败:", error);
     return;
   }
 
   const data = klineData.Kline.AIGoldBull;
-  console.log('KLine渲染: Kline数据', data);
+  console.log("KLine渲染: Kline数据", data);
 
   // 切割数据方法
   const splitData = (a) => {
-    console.log('KLine渲染: 开始数据切割');
+    console.log("KLine渲染: 开始数据切割");
     const categoryData = [];
     let values = [];
     for (let i = 0; i < a.length; i++) {
       categoryData.push(a[i][0]);
       values.push([a[i][1], a[i][2], a[i][3], a[i][4]]);
     }
-    console.log('KLine渲染: 日期数据点数量', categoryData.length);
-    console.log('KLine渲染: 值数据点数量', values.length);
+    console.log("KLine渲染: 日期数据点数量", categoryData.length);
+    console.log("KLine渲染: 值数据点数量", values.length);
     return { categoryData, values };
   };
 
@@ -614,18 +683,21 @@ function KlineCanvsEcharts(containerId) {
   // 检测设备类型
   const isMobile = window.innerWidth < 768;
   const isTablet = window.innerWidth >= 768 && window.innerWidth < 1024;
-  console.log('KLine渲染: 设备类型', isMobile ? '移动设备' : isTablet ? '平板设备' : '桌面设备');
+  console.log(
+    "KLine渲染: 设备类型",
+    isMobile ? "移动设备" : isTablet ? "平板设备" : "桌面设备"
+  );
 
   // 给配置项
-  console.log('KLine渲染: 开始配置图表选项');
+  console.log("KLine渲染: 开始配置图表选项");
 
   if (klineData.type === 1) {
-    console.log('进入第一分类')
+    console.log("进入第一分类");
 
-    const arr1 = []
-    const arr2 = []
-    const arr3 = []
-    const arr4 = []
+    const arr1 = [];
+    const arr2 = [];
+    const arr3 = [];
+    const arr4 = [];
 
     // 动态K线
     const changeColorKline = (QSXH, KLine20) => {
@@ -633,63 +705,171 @@ function KlineCanvsEcharts(containerId) {
         QSXH.map((item) => {
           KLine20.map((kline_item) => {
             if (item[1] == 1 && item[0] == kline_item[0]) {
-              arr1.push(kline_item)
-              arr2.push([kline_item[0], null, null, null, null, null, null, null])
-              arr3.push([kline_item[0], null, null, null, null, null, null, null])
-              arr4.push([kline_item[0], null, null, null, null, null, null, null])
+              arr1.push(kline_item);
+              arr2.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr3.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr4.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
             }
             if (item[1] == 2 && item[0] == kline_item[0]) {
-              arr2.push(kline_item)
-              arr1.push([kline_item[0], null, null, null, null, null, null, null])
-              arr3.push([kline_item[0], null, null, null, null, null, null, null])
-              arr4.push([kline_item[0], null, null, null, null, null, null, null])
+              arr2.push(kline_item);
+              arr1.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr3.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr4.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
             }
             if (item[1] == 3 && item[0] == kline_item[0]) {
-              arr3.push(kline_item)
-              arr2.push([kline_item[0], null, null, null, null, null, null, null])
-              arr1.push([kline_item[0], null, null, null, null, null, null, null])
-              arr4.push([kline_item[0], null, null, null, null, null, null, null])
+              arr3.push(kline_item);
+              arr2.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr1.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr4.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
             }
             if (item[1] == 4 && item[0] == kline_item[0]) {
-              arr4.push(kline_item)
-              arr2.push([kline_item[0], null, null, null, null, null, null, null])
-              arr3.push([kline_item[0], null, null, null, null, null, null, null])
-              arr1.push([kline_item[0], null, null, null, null, null, null, null])
+              arr4.push(kline_item);
+              arr2.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr3.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr1.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
             }
-          })
-        })
+          });
+        });
       }
-    }
-    changeColorKline(data.QSXH, data.KLine20)
-    var dealData = splitData(data.KLine20)
-    var dealData1 = splitData(arr1)
-    var dealData2 = splitData(arr2)
-    var dealData3 = splitData(arr3)
-    var dealData4 = splitData(arr4)
-
-    console.log('dealData', dealData);
-    console.log('dealData1', dealData1);
-    console.log('dealData2', dealData2);
-    console.log('dealData3', dealData3);
-    console.log('dealData4', dealData4);
-
-    var dealGnBullData = data.JN //金牛版成交量数据
+    };
+    changeColorKline(data.QSXH, data.KLine20);
+    var dealData = splitData(data.KLine20);
+    var dealData1 = splitData(arr1);
+    var dealData2 = splitData(arr2);
+    var dealData3 = splitData(arr3);
+    var dealData4 = splitData(arr4);
+
+    console.log("dealData", dealData);
+    console.log("dealData1", dealData1);
+    console.log("dealData2", dealData2);
+    console.log("dealData3", dealData3);
+    console.log("dealData4", dealData4);
+
+    var dealGnBullData = data.JN; //金牛版成交量数据
     // 处理MA数据，创建两段重叠的数据
     function processMAData(data) {
-      let processedData = []
+      let processedData = [];
 
       // 初始化处理后的数据结构
       data.forEach((item, idx) => {
         processedData.push({
           date: item[0],
           value: item[1],
-          type: item[2]
-        })
-      })
+          type: item[2],
+        });
+      });
       // 当某一种type只存在一天,设置另一种type透明
-      let singleTypeRed = [{ min: 0, max: 0, color: '#000' }]
-      let singleTypeYellow = [{ min: 0, max: 0, color: '#000' }]
-      let singleTypeGreen = [{ min: 0, max: 0, color: '#000' }]
+      let singleTypeRed = [{ min: 0, max: 0, color: "#000" }];
+      let singleTypeYellow = [{ min: 0, max: 0, color: "#000" }];
+      let singleTypeGreen = [{ min: 0, max: 0, color: "#000" }];
       // 在类型切换点添加过渡点
       for (let i = 1; i < processedData.length; i++) {
         if (processedData[i].type !== processedData[i - 1].type) {
@@ -699,38 +879,50 @@ function KlineCanvsEcharts(containerId) {
               processedData[i - 1].type === processedData[i + 1].type)
           ) {
             if (processedData[i - 1].type === 0) {
-              singleTypeGreen.push({ min: i - 1, max: i, color: 'rgba(0,0,0,0)' })
+              singleTypeGreen.push({
+                min: i - 1,
+                max: i,
+                color: "rgba(0,0,0,0)",
+              });
             } else if (processedData[i - 1].type === 1) {
-              singleTypeRed.push({ min: i - 1, max: i, color: 'rgba(0,0,0,0)' })
+              singleTypeRed.push({
+                min: i - 1,
+                max: i,
+                color: "rgba(0,0,0,0)",
+              });
             } else if (processedData[i - 1].type === 2) {
-              singleTypeYellow.push({ min: i - 1, max: i, color: 'rgba(0,0,0,0)' })
+              singleTypeYellow.push({
+                min: i - 1,
+                max: i,
+                color: "rgba(0,0,0,0)",
+              });
             }
           }
         }
         if (processedData[i].type !== processedData[i - 1].type) {
           if (processedData[i].type == 0) {
-            processedData[i - 1].isTransitionGreen = 1
+            processedData[i - 1].isTransitionGreen = 1;
           } else if (processedData[i].type == 1) {
-            processedData[i - 1].isTransitionRed = 1
+            processedData[i - 1].isTransitionRed = 1;
           } else if (processedData[i].type == 2) {
-            processedData[i - 1].isTransitionYellow = 1
+            processedData[i - 1].isTransitionYellow = 1;
           }
           // // 创建过渡点，使用前一个点的值
           // processedData[i - 1].isTransition = true
         }
       }
       // 分离红绿数据，包含过渡点
-      let greenData = []
-      let redData = []
-      let yellowData = []
+      let greenData = [];
+      let redData = [];
+      let yellowData = [];
 
       processedData.forEach((item, idx) => {
-        const point = [item.date, item.value]
+        const point = [item.date, item.value];
 
         if (item.type === 0) {
-          greenData.push(point)
-          redData.push([item.date, '-'])
-          yellowData.push([item.date, '-'])
+          greenData.push(point);
+          redData.push([item.date, "-"]);
+          yellowData.push([item.date, "-"]);
 
           // if (item.isTransition) {
           //   // 添加过渡点到红色线
@@ -739,17 +931,25 @@ function KlineCanvsEcharts(containerId) {
           // }
 
           if (item.isTransitionGreen) {
-            greenData[greenData.length - 1] = [processedData[idx].date, processedData[idx].value]
+            greenData[greenData.length - 1] = [
+              processedData[idx].date,
+              processedData[idx].value,
+            ];
           } else if (item.isTransitionRed) {
-            redData[redData.length - 1] = [processedData[idx].date, processedData[idx].value]
+            redData[redData.length - 1] = [
+              processedData[idx].date,
+              processedData[idx].value,
+            ];
           } else if (item.isTransitionYellow) {
-            yellowData[yellowData.length - 1] = [processedData[idx].date, processedData[idx].value]
+            yellowData[yellowData.length - 1] = [
+              processedData[idx].date,
+              processedData[idx].value,
+            ];
           }
-
         } else if (item.type === 1) {
-          redData.push(point)
-          greenData.push([item.date, '-'])
-          yellowData.push([item.date, '-'])
+          redData.push(point);
+          greenData.push([item.date, "-"]);
+          yellowData.push([item.date, "-"]);
 
           // if (item.isTransition) {
           //   // 添加过渡点到绿色线
@@ -758,17 +958,25 @@ function KlineCanvsEcharts(containerId) {
           // }
 
           if (item.isTransitionGreen) {
-            greenData[greenData.length - 1] = [processedData[idx].date, processedData[idx].value]
+            greenData[greenData.length - 1] = [
+              processedData[idx].date,
+              processedData[idx].value,
+            ];
           } else if (item.isTransitionRed) {
-            redData[redData.length - 1] = [processedData[idx].date, processedData[idx].value]
+            redData[redData.length - 1] = [
+              processedData[idx].date,
+              processedData[idx].value,
+            ];
           } else if (item.isTransitionYellow) {
-            yellowData[yellowData.length - 1] = [processedData[idx].date, processedData[idx].value]
+            yellowData[yellowData.length - 1] = [
+              processedData[idx].date,
+              processedData[idx].value,
+            ];
           }
-
         } else if (item.type === 2) {
-          redData.push([item.date, '-'])
-          greenData.push([item.date, '-'])
-          yellowData.push(point)
+          redData.push([item.date, "-"]);
+          greenData.push([item.date, "-"]);
+          yellowData.push(point);
 
           // if (item.isTransition) {
           //   // 添加过渡点到绿色线
@@ -777,15 +985,23 @@ function KlineCanvsEcharts(containerId) {
           // }
 
           if (item.isTransitionGreen) {
-            greenData[greenData.length - 1] = [processedData[idx].date, processedData[idx].value]
+            greenData[greenData.length - 1] = [
+              processedData[idx].date,
+              processedData[idx].value,
+            ];
           } else if (item.isTransitionRed) {
-            redData[redData.length - 1] = [processedData[idx].date, processedData[idx].value]
+            redData[redData.length - 1] = [
+              processedData[idx].date,
+              processedData[idx].value,
+            ];
           } else if (item.isTransitionYellow) {
-            yellowData[yellowData.length - 1] = [processedData[idx].date, processedData[idx].value]
+            yellowData[yellowData.length - 1] = [
+              processedData[idx].date,
+              processedData[idx].value,
+            ];
           }
-
         }
-      })
+      });
 
       return {
         greenData: greenData,
@@ -793,61 +1009,61 @@ function KlineCanvsEcharts(containerId) {
         yellowData: yellowData,
         singleTypeGreen: singleTypeGreen,
         singleTypeRed: singleTypeRed,
-        singleTypeYellow: singleTypeYellow
-      }
+        singleTypeYellow: singleTypeYellow,
+      };
     }
-    const maData = processMAData(data.FCX)
-    console.log('maData', maData)
+    const maData = processMAData(data.FCX);
+    console.log("maData", maData);
     // 牵牛绳的数据
 
     // 如果第一个字段的第一个数据为-1的话，不展示牵牛绳
-    if (data.FCX[0][1] == '-1') {
-      maData.greenData = []
-      maData.redData = []
-      maData.yellowData = []
+    if (data.FCX[0][1] == "-1") {
+      maData.greenData = [];
+      maData.redData = [];
+      maData.yellowData = [];
     }
     // 生成文字标注
     const processBarData = (data) => {
-      const barData = []
-      const markPointData = []
+      const barData = [];
+      const markPointData = [];
       data.forEach((item) => {
-        let color
+        let color;
         // 根据 item[4] 设置不同的颜色
         switch (item[4]) {
           case 1:
-            color = '#13E113' // 绿色
-            break
+            color = "#13E113"; // 绿色
+            break;
           case 2:
-            color = '#FF0E00' // 红色
-            break
+            color = "#FF0E00"; // 红色
+            break;
           case 3:
-            color = '#0000FE' // 深蓝色(倍量阳)
-            break
+            color = "#0000FE"; // 深蓝色(倍量阳)
+            break;
           case 4:
-            color = '#1397FF' // 浅蓝色(倍量阴)
-            break
+            color = "#1397FF"; // 浅蓝色(倍量阴)
+            break;
         }
         barData.push({
           value: item[5],
           itemStyle: {
             normal: {
-              color: color // 动态设置颜色
-            }
-          }
-        })
+              color: color, // 动态设置颜色
+            },
+          },
+        });
         // 小牛
         if (item[1] === 1) {
           markPointData.push({
             coord: [item[0], item[5]],
             symbol:
-              'image://https://d31zlh4on95l9h.cloudfront.net/images/5iujb101000d5si3v3hr7w2vg0h43z1u.png',
+              "image://https://d31zlh4on95l9h.cloudfront.net/images/5iujb101000d5si3v3hr7w2vg0h43z1u.png",
             symbolSize: [30, 30], // 图片大小
             label: {
               normal: {
-                color: 'rgba(0, 0, 0, 0)' //字体颜色
-              }
-            }
-          })
+                color: "rgba(0, 0, 0, 0)", //字体颜色
+              },
+            },
+          });
         }
         // 大牛
         // 中部标记（红色牛）
@@ -855,14 +1071,14 @@ function KlineCanvsEcharts(containerId) {
           markPointData.push({
             coord: [item[0], item[5] / 2],
             symbol:
-              'image://https://d31zlh4on95l9h.cloudfront.net/images/5iujaz01000d5si016bxdf6vh0377d2h.png',
+              "image://https://d31zlh4on95l9h.cloudfront.net/images/5iujaz01000d5si016bxdf6vh0377d2h.png",
             symbolSize: [30, 30], // 图片大小
             label: {
               normal: {
-                color: 'rgba(0, 0, 0, 0)' //字体颜色
-              }
-            }
-          })
+                color: "rgba(0, 0, 0, 0)", //字体颜色
+              },
+            },
+          });
         }
         // 金牛
         // 底部标记（金牛）
@@ -870,19 +1086,19 @@ function KlineCanvsEcharts(containerId) {
           markPointData.push({
             coord: [item[0], 0],
             symbol:
-              'image://https://d31zlh4on95l9h.cloudfront.net/images/5iujb001000d5shzls0tmd4vs0e5tdrw.png',
+              "image://https://d31zlh4on95l9h.cloudfront.net/images/5iujb001000d5shzls0tmd4vs0e5tdrw.png",
             symbolSize: [30, 30], // 图片大小
             label: {
               normal: {
-                color: 'rgba(0, 0, 0, 0)' //字体颜色
-              }
-            }
-          })
+                color: "rgba(0, 0, 0, 0)", //字体颜色
+              },
+            },
+          });
         }
-      })
-      return { barData, markPointData }
-    }
-    const { barData, markPointData } = processBarData(dealGnBullData)
+      });
+      return { barData, markPointData };
+    };
+    const { barData, markPointData } = processBarData(dealGnBullData);
     // 配置项
     KlineOption = {
       // 底部选项
@@ -892,225 +1108,226 @@ function KlineCanvsEcharts(containerId) {
         {
           //图例文字的样式
           textStyle: {
-            color: 'black', //图例文字颜色
-            fontSize: window.innerWidth > 768 ? 15 : vwToPx(2.8) // 响应式字体大小
+            color: "black", //图例文字颜色
+            fontSize: window.innerWidth > 768 ? 15 : vwToPx(2.8), // 响应式字体大小
           },
-          width: '100%', // 确保有足够的宽度容纳图例
-          left: 'center',
+          width: "100%", // 确保有足够的宽度容纳图例
+          left: "center",
           itemGap: window.innerWidth > 768 ? 20 : 10, // 控制图例项之间的间距
           itemWidth: 10, // 调整颜色块的宽度
           itemHeight: 10, // 调整颜色块的高度
           data: [
             {
-              name: '进攻K线',
+              name: "进攻K线",
               itemStyle: {
-                color: 'rgb(255,0,0)'
-              }
+                color: "rgb(255,0,0)",
+              },
             },
             {
-              name: '防守K线',
+              name: "防守K线",
               itemStyle: {
-                color: 'red'
-              }
+                color: "red",
+              },
             },
             {
-              name: '推进K线',
+              name: "推进K线",
               itemStyle: {
-                color: 'orange'
-              }
+                color: "orange",
+              },
             },
             {
-              name: '撤退K线',
+              name: "撤退K线",
               itemStyle: {
-                color: 'rgb(84,252,252)'
-              }
-            }
-          ]
+                color: "rgb(84,252,252)",
+              },
+            },
+          ],
         },
         {
           //图例文字的样式
           textStyle: {
-            color: 'black', //图例文字颜色
-            fontSize: window.innerWidth > 768 ? 15 : vwToPx(2.8) // 响应式字体大小
+            color: "black", //图例文字颜色
+            fontSize: window.innerWidth > 768 ? 15 : vwToPx(2.8), // 响应式字体大小
           },
-          orient: 'horizontal', // 设置图例水平布局
-          top: '5%',
-          width: '100%', // 确保有足够的宽度容纳图例
-          left: 'center',
+          orient: "horizontal", // 设置图例水平布局
+          top: "5%",
+          width: "100%", // 确保有足够的宽度容纳图例
+          left: "center",
           itemGap: 15, // 控制图例项之间的间距
           data: [
             // 牵牛绳
             {
-              name: '{green|━}{red|━} ' + '牵牛绳', // 将牵牛绳样式应用到文本前缀
-              icon: 'none', // 去掉默认图例图标
+              name: "{green|━}{red|━} " + "牵牛绳", // 将牵牛绳样式应用到文本前缀
+              icon: "none", // 去掉默认图例图标
               textStyle: {
                 rich: {
                   green: {
-                    color: 'green',
-                    fontSize: window.innerWidth > 768 ? 20 : 10
+                    color: "green",
+                    fontSize: window.innerWidth > 768 ? 20 : 10,
                   },
                   red: {
-                    color: 'red',
-                    fontSize: window.innerWidth > 768 ? 20 : 10
-                  }
-                }
-              }
+                    color: "red",
+                    fontSize: window.innerWidth > 768 ? 20 : 10,
+                  },
+                },
+              },
             },
             {
-              name: '龙线'
+              name: "龙线",
             },
             {
-              name: '虫线'
-            }
-          ]
-        }
+              name: "虫线",
+            },
+          ],
+        },
       ],
       tooltip: {
         // 调用接口之后方法
         formatter: function (a, b, d) {
           if (a[0].seriesIndex == 0) {
-            const KlineTag = ref([]) // 判断几根K线
-            const AIBullTag = ref([])
+            const KlineTag = ref([]); // 判断几根K线
+            const AIBullTag = ref([]);
 
             // 找到第一个满足条件的数据
-            KlineTag.value = a.find((item) => item.data[1])?.data || []
+            KlineTag.value = a.find((item) => item.data[1])?.data || [];
 
             // 找到第一个满足条件的非 '-' 数据
-            AIBullTag.value = a.slice(4).find((item) => item.data[1] !== '-')?.data || []
+            AIBullTag.value =
+              a.slice(4).find((item) => item.data[1] !== "-")?.data || [];
             return (
               a[0].name +
-              '<br/>' +
-              '开盘价' +
-              '：' +
+              "<br/>" +
+              "开盘价" +
+              "：" +
               KlineTag.value[1] +
-              '<br/>' +
-              '收盘价' +
-              '：' +
+              "<br/>" +
+              "收盘价" +
+              "：" +
               KlineTag.value[2] +
-              '<br/>' +
-              '最低价' +
-              '：' +
+              "<br/>" +
+              "最低价" +
+              "：" +
               KlineTag.value[3] +
-              '<br/>' +
-              '最高价' +
-              '：' +
+              "<br/>" +
+              "最高价" +
+              "：" +
               KlineTag.value[4] +
-              '<br/>' +
-              '牵牛绳' +
-              '：' +
+              "<br/>" +
+              "牵牛绳" +
+              "：" +
               AIBullTag.value[1]
-            )
+            );
           } else {
             // 格式化成交量显示
-            let formattedVolume
+            let formattedVolume;
             if (a[0].data.value >= 10000) {
-              formattedVolume = (a[0].data.value / 10000).toFixed(2) + 'w'
+              formattedVolume = (a[0].data.value / 10000).toFixed(2) + "w";
             } else {
-              formattedVolume = a[0].data.value
+              formattedVolume = a[0].data.value;
             }
-            return a[0].name + '<br/>' + '成交量' + '：' + formattedVolume
+            return a[0].name + "<br/>" + "成交量" + "：" + formattedVolume;
           }
         },
-        trigger: 'axis',
+        trigger: "axis",
         axisPointer: {
           //坐标轴指示器配置项
-          type: 'cross' //‘line’直线指示器，‘cross’十字准星指示器，‘shadow’阴影指示器
+          type: "cross", //‘line’直线指示器，‘cross’十字准星指示器，‘shadow’阴影指示器
         },
-        backgroundColor: 'rgba(119, 120, 125, 0.6)', // 提示框浮层的边框颜色。
+        backgroundColor: "rgba(119, 120, 125, 0.6)", // 提示框浮层的边框颜色。
         borderWidth: 1, // 提示框浮层的边框宽。
-        borderColor: '#77787D', // 提示框浮层的边框颜色。
+        borderColor: "#77787D", // 提示框浮层的边框颜色。
         padding: 10, // 提示框浮层内边距，
         textStyle: {
           //提示框浮层上的文字样式
-          color: '#fff'
-        }
+          color: "#fff",
+        },
       },
       //  手放上去时拉的框
       axisPointer: {
         link: [
           {
-            xAxisIndex: 'all' // 同时触发所有图形的 x 坐标轴指示器
-          }
+            xAxisIndex: "all", // 同时触发所有图形的 x 坐标轴指示器
+          },
         ],
         label: {
-          backgroundColor: '#77787D' // 文本标签的背景颜色
-        }
+          backgroundColor: "#77787D", // 文本标签的背景颜色
+        },
       },
       toolbox: {
-        show: false
+        show: false,
       },
       grid: [
         {
-          left: window.innerWidth > 768 ? '18%' : '15%',
+          left: window.innerWidth > 768 ? "18%" : "15%",
           // right: window.innerWidth > 768 ? '4%' : '2.5%',
-          height: window.innerWidth > 768 ? '60%' : '57%',
-          top: window.innerWidth > 768 ? '8%' : '12%',
+          height: window.innerWidth > 768 ? "60%" : "57%",
+          top: window.innerWidth > 768 ? "8%" : "12%",
           // height: '33%',
-          containLabel: false
+          containLabel: false,
         },
         {
-          left: window.innerWidth > 768 ? '18%' : '15%',
+          left: window.innerWidth > 768 ? "18%" : "15%",
           // right: window.innerWidth > 768 ? '4%' : '2.5%',
-          top: window.innerWidth > 768 ? '72%' : '73%',
-          height: '20%',
-          containLabel: false
-        }
+          top: window.innerWidth > 768 ? "72%" : "73%",
+          height: "20%",
+          containLabel: false,
+        },
       ],
       xAxis: [
         {
-          type: 'category',
+          type: "category",
           data: dealData.categoryData,
           boundaryGap: true, // 坐标轴两边是否留空，false表示不留空（通常用于K线图）
           axisLine: { onZero: false }, // 设置坐标轴是否通过零点，onZero:false表示不强制穿过零点
           splitLine: { show: false }, // 是否显示分隔线，false表示不显示
-          min: 'dataMin', // 坐标轴最小值，'dataMin'表示从数据的最小值开始
-          max: 'dataMax', // 坐标轴最大值，'dataMax'表示从数据的最大值开始
+          min: "dataMin", // 坐标轴最小值，'dataMin'表示从数据的最小值开始
+          max: "dataMax", // 坐标轴最大值，'dataMax'表示从数据的最大值开始
           axisPointer: {
-            z: 100 // 坐标轴指示器的层级，较大的值会让它显示在其他元素上方
+            z: 100, // 坐标轴指示器的层级，较大的值会让它显示在其他元素上方
           },
           axisLine: {
             lineStyle: {
-              color: 'black' // 坐标轴线的颜色
-            }
+              color: "black", // 坐标轴线的颜色
+            },
           }, //
           axisLabel: { show: false }, // 隐藏刻度标签
-          axisTick: { show: false } // 隐藏刻度线
+          axisTick: { show: false }, // 隐藏刻度线
         },
         // 下方成交量图的X轴
         {
-          type: 'category',
+          type: "category",
           gridIndex: 1,
           data: dealData.categoryData,
           boundaryGap: true,
-          axisLine: { lineStyle: { color: 'black' } },
+          axisLine: { lineStyle: { color: "black" } },
           axisLabel: {
             show: true,
             // fontSize: window.innerWidth > 768 ? 10 : 8,
-            interval: 'auto'
+            interval: "auto",
           },
-          axisTick: { show: false } // 隐藏刻度线
-        }
+          axisTick: { show: false }, // 隐藏刻度线
+        },
       ],
       // 控制纵坐标展示数据
       yAxis: [
         {
           scale: true,
           gridIndex: 0,
-          position: 'left',
+          position: "left",
           axisLabel: {
             inside: false,
-            align: 'right',
-            fontSize: window.innerWidth > 768 ? 15 : 10
+            align: "right",
+            fontSize: window.innerWidth > 768 ? 15 : 10,
           },
           axisLine: {
             show: true,
             lineStyle: {
-              fontSize: '',
-              color: 'black'
-            }
+              fontSize: "",
+              color: "black",
+            },
           },
           axisTick: { show: false },
-          splitLine: { show: false }
+          splitLine: { show: false },
         },
         // 下方成交量图的Y轴
         {
@@ -1124,301 +1341,409 @@ function KlineCanvsEcharts(containerId) {
             margin: 8, // 添加边距以获得更好的间距
             formatter: (value) => {
               if (value >= 1000000000) {
-                return (value / 1000000000).toFixed(1) + 'B'
+                return (value / 1000000000).toFixed(1) + "B";
               } else if (value >= 1000000) {
-                return (value / 1000000).toFixed(1) + 'M'
+                return (value / 1000000).toFixed(1) + "M";
               } else if (value >= 10000) {
-                return (value / 10000).toFixed(1) + 'W'
+                return (value / 10000).toFixed(1) + "W";
               }
-              return value.toFixed(0)
-            }
+              return value.toFixed(0);
+            },
           },
-          axisLine: { show: true, lineStyle: { color: 'black' } },
+          axisLine: { show: true, lineStyle: { color: "black" } },
           axisTick: { show: false },
-          splitLine: { show: true, lineStyle: { type: 'dashed' } }, // 添加分割线以提高可读性
-          boundaryGap: ['20%', '20%'] // 为坐标轴边界添加内边距
-        }
+          splitLine: { show: true, lineStyle: { type: "dashed" } }, // 添加分割线以提高可读性
+          boundaryGap: ["20%", "20%"], // 为坐标轴边界添加内边距
+        },
       ],
       // 下拉条
       dataZoom: [
         {
-          type: 'inside',
+          type: "inside",
           xAxisIndex: [0, 1],
           start: 55,
-          end: 100
+          end: 100,
         },
         {
           show: true,
           xAxisIndex: [0, 1],
-          type: 'slider',
-          top: window.innerWidth > 768 ? '95%' : '91%',
-          left: window.innerWidth > 768 ? '18%' : '15%',
+          type: "slider",
+          top: window.innerWidth > 768 ? "95%" : "91%",
+          left: window.innerWidth > 768 ? "18%" : "15%",
           // left: window.innerWidth > 768 ? '10%' : '8%',
           start: 98,
-          end: 100
-        }
+          end: 100,
+        },
       ],
       visualMap: [
         {
-          type: 'piecewise',
+          type: "piecewise",
           show: false,
           pieces: maData.singleTypeGreen,
           outOfRange: {
-            color: 'green'
+            color: "green",
           },
           dimension: 0,
-          seriesIndex: 6
+          seriesIndex: 6,
         },
         {
-          type: 'piecewise',
+          type: "piecewise",
           show: false,
           pieces: maData.singleTypeRed,
           outOfRange: {
-            color: 'red'
+            color: "red",
           },
           dimension: 0,
-          seriesIndex: 7
+          seriesIndex: 7,
         },
         {
-          type: 'piecewise',
+          type: "piecewise",
           show: false,
           pieces: maData.singleTypeYellow,
           outOfRange: {
-            color: 'yellow'
+            color: "yellow",
           },
           dimension: 0,
-          seriesIndex: 8
-        }
+          seriesIndex: 8,
+        },
       ],
       series: [
         // 第一条K线
         {
-          name: '进攻K线',
-          type: 'candlestick',
-          barWidth: '50%', // 设置和上方图表一致的柱子宽度
+          name: "进攻K线",
+          type: "candlestick",
+          barWidth: "50%", // 设置和上方图表一致的柱子宽度
           data: dealData1.values,
           xAxisIndex: 0, // 使用第一个 X 轴
           yAxisIndex: 0, // 使用第一个 Y 轴
           itemStyle: {
             normal: {
-              color: 'rgb(255,0,0)', // 默认颜色
-              color0: 'rgb(255,0,0)',
-              borderColor: 'rgb(255,0,0)',
-              borderColor0: 'rgb(255,0,0)'
-            }
+              color: "rgb(255,0,0)", // 默认颜色
+              color0: "rgb(255,0,0)",
+              borderColor: "rgb(255,0,0)",
+              borderColor0: "rgb(255,0,0)",
+            },
           },
-          gridIndex: 0
+          gridIndex: 0,
         },
         //
         {
-          name: '推进K线',
-          type: 'candlestick',
-          barWidth: '50%', // 设置和上方图表一致的柱子宽度
+          name: "推进K线",
+          type: "candlestick",
+          barWidth: "50%", // 设置和上方图表一致的柱子宽度
           data: dealData2.values,
           xAxisIndex: 0, // 使用第一个 X 轴
           yAxisIndex: 0, // 使用第一个 Y 轴
           itemStyle: {
             normal: {
-              color: 'rgb(0,0,252)', // 默认颜色
-              color0: 'rgb(0,0,252)',
-              borderColor: 'rgb(0,0,252)',
-              borderColor0: 'rgb(0,0,252)'
-            }
+              color: "rgb(0,0,252)", // 默认颜色
+              color0: "rgb(0,0,252)",
+              borderColor: "rgb(0,0,252)",
+              borderColor0: "rgb(0,0,252)",
+            },
           },
-          gridIndex: 0
+          gridIndex: 0,
         },
         {
-          name: '防守K线',
-          type: 'candlestick',
-          barWidth: '50%', // 设置和上方图表一致的柱子宽度
+          name: "防守K线",
+          type: "candlestick",
+          barWidth: "50%", // 设置和上方图表一致的柱子宽度
           data: dealData3.values,
           xAxisIndex: 0, // 使用第一个 X 轴
           yAxisIndex: 0, // 使用第一个 Y 轴
           itemStyle: {
             normal: {
-              color: 'orange', // 默认颜色
-              color0: 'orange',
-              borderColor: 'orange',
-              borderColor0: 'orange'
-            }
+              color: "orange", // 默认颜色
+              color0: "orange",
+              borderColor: "orange",
+              borderColor0: "orange",
+            },
           },
-          gridIndex: 0
+          gridIndex: 0,
         },
         {
-          name: '撤退K线',
-          type: 'candlestick',
-          barWidth: '50%', // 设置和上方图表一致的柱子宽度
+          name: "撤退K线",
+          type: "candlestick",
+          barWidth: "50%", // 设置和上方图表一致的柱子宽度
           data: dealData4.values,
           xAxisIndex: 0, // 使用第一个 X 轴
           yAxisIndex: 0, // 使用第一个 Y 轴
           itemStyle: {
             normal: {
-              color: 'rgb(84,252,252)', // 默认颜色
-              color0: 'rgb(84,252,252)',
-              borderColor: 'rgb(84,252,252)',
-              borderColor0: 'rgb(84,252,252)'
-            }
+              color: "rgb(84,252,252)", // 默认颜色
+              color0: "rgb(84,252,252)",
+              borderColor: "rgb(84,252,252)",
+              borderColor0: "rgb(84,252,252)",
+            },
           },
-          gridIndex: 0
+          gridIndex: 0,
         },
         //成交量柱状图
         {
-          name: '成交量',
-          type: 'bar',
-          barWidth: '70%', // 设置和上方图表一致的柱子宽度
+          name: "成交量",
+          type: "bar",
+          barWidth: "70%", // 设置和上方图表一致的柱子宽度
           xAxisIndex: 1,
           yAxisIndex: 1,
           data: barData,
           markPoint: {
             data: markPointData,
             label: {
-              show: false // 确保隐藏标记的值
-            }
-          }
+              show: false, // 确保隐藏标记的值
+            },
+          },
         },
         {
-          name: '{green|━}{red|━} ' + '牵牛绳', // 将牵牛绳样式应用到文本前缀
-          type: 'line',
+          name: "{green|━}{red|━} " + "牵牛绳", // 将牵牛绳样式应用到文本前缀
+          type: "line",
           data: [], // 设置为空数组，不显示数据点
           smooth: true,
-          symbol: 'none',
+          symbol: "none",
           xAxisIndex: 0, // 线图与第一个 K 线图共享 X 轴
           yAxisIndex: 0, // 线图与第一个 K 线图共享 Y 轴
           showSymbol: false, // 隐藏符号
           lineStyle: {
-            opacity: 0 // 使线条透明
+            opacity: 0, // 使线条透明
           },
           itemStyle: {
             normal: {
-              color: 'green'
-            }
+              color: "green",
+            },
           },
-          gridIndex: 0 // 确保线图与第一个K线图共享网格
+          gridIndex: 0, // 确保线图与第一个K线图共享网格
         },
         {
-          name: '虫线',
-          type: 'line',
+          name: "虫线",
+          type: "line",
           data: maData.greenData,
           smooth: true,
-          symbol: 'none',
+          symbol: "none",
           xAxisIndex: 0, // 线图与第一个 K 线图共享 X 轴
           yAxisIndex: 0, // 线图与第一个 K 线图共享 Y 轴
           itemStyle: {
             normal: {
-              color: 'green',
+              color: "green",
               lineStyle: {
                 // color: 'orange', // 线的颜色
                 width: 2, // 线宽
-                type: 'solid' // 线类型
-              }
-            }
+                type: "solid", // 线类型
+              },
+            },
           },
-          gridIndex: 0 // 确保线图与第一个K线图共享网格
+          gridIndex: 0, // 确保线图与第一个K线图共享网格
         },
         {
-          name: '龙线',
-          type: 'line',
+          name: "龙线",
+          type: "line",
           data: maData.redData,
           smooth: true,
-          symbol: 'none',
+          symbol: "none",
           xAxisIndex: 0, // 线图与第一个 K 线图共享 X 轴
           yAxisIndex: 0, // 线图与第一个 K 线图共享 Y 轴
           itemStyle: {
             normal: {
-              color: 'red',
+              color: "red",
               lineStyle: {
                 // color: 'orange', // 线的颜色
                 width: 2, // 线宽
-                type: 'solid' // 线类型
-              }
-            }
+                type: "solid", // 线类型
+              },
+            },
           },
-          gridIndex: 0 // 确保线图与第一个K线图共享网格
+          gridIndex: 0, // 确保线图与第一个K线图共享网格
         },
         {
-          name: '黄色',
-          type: 'line',
+          name: "黄色",
+          type: "line",
           data: maData.yellowData,
           smooth: true,
-          symbol: 'none',
+          symbol: "none",
           xAxisIndex: 0,
           yAxisIndex: 0,
           itemStyle: {
             normal: {
-              color: 'yellow',
+              color: "yellow",
               lineStyle: {
                 width: 2,
-                type: 'solid'
-              }
-            }
+                type: "solid",
+              },
+            },
           },
-          gridIndex: 0
-        }
-      ]
+          gridIndex: 0,
+        },
+      ],
       // graphic: {
       // 	markPointData : generateGraphicmarkPointData(data11111)
       // }
-    }
+    };
   } else if (klineData.type === 2) {
-    console.log('进入第二分类')
+    console.log("进入第二分类");
 
-    const arr1 = []
-    const arr2 = []
-    const arr3 = []
-    const arr4 = []
+    const arr1 = [];
+    const arr2 = [];
+    const arr3 = [];
+    const arr4 = [];
     const changeColorKline = (QSXH, KLine20) => {
       if (QSXH) {
         QSXH.map((item) => {
           KLine20.map((kline_item) => {
             if (item[1] == 1 && item[0] == kline_item[0]) {
-              arr1.push(kline_item)
-              arr2.push([kline_item[0], null, null, null, null, null, null, null])
-              arr3.push([kline_item[0], null, null, null, null, null, null, null])
-              arr4.push([kline_item[0], null, null, null, null, null, null, null])
+              arr1.push(kline_item);
+              arr2.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr3.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr4.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
             }
             if (item[1] == 2 && item[0] == kline_item[0]) {
-              arr2.push(kline_item)
-              arr1.push([kline_item[0], null, null, null, null, null, null, null])
-              arr3.push([kline_item[0], null, null, null, null, null, null, null])
-              arr4.push([kline_item[0], null, null, null, null, null, null, null])
+              arr2.push(kline_item);
+              arr1.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr3.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr4.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
             }
             if (item[1] == 3 && item[0] == kline_item[0]) {
-              arr3.push(kline_item)
-              arr2.push([kline_item[0], null, null, null, null, null, null, null])
-              arr1.push([kline_item[0], null, null, null, null, null, null, null])
-              arr4.push([kline_item[0], null, null, null, null, null, null, null])
+              arr3.push(kline_item);
+              arr2.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr1.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr4.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
             }
             if (item[1] == 4 && item[0] == kline_item[0]) {
-              arr4.push(kline_item)
-              arr2.push([kline_item[0], null, null, null, null, null, null, null])
-              arr3.push([kline_item[0], null, null, null, null, null, null, null])
-              arr1.push([kline_item[0], null, null, null, null, null, null, null])
+              arr4.push(kline_item);
+              arr2.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr3.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr1.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
             }
-          })
-        })
+          });
+        });
       }
-    }
-    console.log(arr1, arr2, arr3, arr4)
-    changeColorKline(data.QSXH, data.KLine20)
-    var dealData = splitData(data.KLine20)
-    var dealData1 = splitData(arr1)
-    var dealData2 = splitData(arr2)
-    var dealData3 = splitData(arr3)
-    var dealData4 = splitData(arr4)
-    var dealGnBullData = data.JN
+    };
+    console.log(arr1, arr2, arr3, arr4);
+    changeColorKline(data.QSXH, data.KLine20);
+    var dealData = splitData(data.KLine20);
+    var dealData1 = splitData(arr1);
+    var dealData2 = splitData(arr2);
+    var dealData3 = splitData(arr3);
+    var dealData4 = splitData(arr4);
+    var dealGnBullData = data.JN;
     function processMAData(data) {
-      let processedData = []
+      let processedData = [];
       data.forEach((item, idx) => {
         processedData.push({
           date: item[0],
           value: item[1],
-          type: item[2]
-        })
-      })
+          type: item[2],
+        });
+      });
       // 当某一种type只存在一天,设置另一种type透明
-      let singleTypeRed = [{ min: 0, max: 0, color: '#000' }]
-      let singleTypeYellow = [{ min: 0, max: 0, color: '#000' }]
-      let singleTypeGreen = [{ min: 0, max: 0, color: '#000' }]
+      let singleTypeRed = [{ min: 0, max: 0, color: "#000" }];
+      let singleTypeYellow = [{ min: 0, max: 0, color: "#000" }];
+      let singleTypeGreen = [{ min: 0, max: 0, color: "#000" }];
       for (let i = 1; i < processedData.length; i++) {
         if (processedData[i].type !== processedData[i - 1].type) {
           if (
@@ -1427,83 +1752,122 @@ function KlineCanvsEcharts(containerId) {
               processedData[i - 1].type === processedData[i + 1].type)
           ) {
             if (processedData[i - 1].type === 0) {
-              singleTypeGreen.push({ min: i - 1, max: i, color: 'rgba(0,0,0,0)' })
+              singleTypeGreen.push({
+                min: i - 1,
+                max: i,
+                color: "rgba(0,0,0,0)",
+              });
             } else if (processedData[i - 1].type === 1) {
-              singleTypeRed.push({ min: i - 1, max: i, color: 'rgba(0,0,0,0)' })
+              singleTypeRed.push({
+                min: i - 1,
+                max: i,
+                color: "rgba(0,0,0,0)",
+              });
             } else if (processedData[i - 1].type === 2) {
-              singleTypeYellow.push({ min: i - 1, max: i, color: 'rgba(0,0,0,0)' })
+              singleTypeYellow.push({
+                min: i - 1,
+                max: i,
+                color: "rgba(0,0,0,0)",
+              });
             }
           }
         }
         if (processedData[i].type !== processedData[i - 1].type) {
           if (processedData[i].type == 0) {
-            processedData[i - 1].isTransitionGreen = 1
+            processedData[i - 1].isTransitionGreen = 1;
           } else if (processedData[i].type == 1) {
-            processedData[i - 1].isTransitionRed = 1
+            processedData[i - 1].isTransitionRed = 1;
           } else if (processedData[i].type == 2) {
-            processedData[i - 1].isTransitionYellow = 1
+            processedData[i - 1].isTransitionYellow = 1;
           }
           // // 创建过渡点，使用前一个点的值
           // processedData[i - 1].isTransition = true
         }
       }
-      let greenData = []
-      let redData = []
-      let yellowData = []
+      let greenData = [];
+      let redData = [];
+      let yellowData = [];
 
       processedData.forEach((item, idx) => {
-        const point = [item.date, item.value]
+        const point = [item.date, item.value];
 
         if (item.type === 0) {
-          greenData.push(point)
-          redData.push([item.date, '-'])
-          yellowData.push([item.date, '-'])
+          greenData.push(point);
+          redData.push([item.date, "-"]);
+          yellowData.push([item.date, "-"]);
 
           // if (item.isTransition) {
           // 	redData[redData.length - 1] = [processedData[idx].date, processedData[idx].value]
           // 	yellowData[yellowData.length - 1] = [processedData[idx].date, processedData[idx].value]
           // }
           if (item.isTransitionGreen) {
-            greenData[greenData.length - 1] = [processedData[idx].date, processedData[idx].value]
+            greenData[greenData.length - 1] = [
+              processedData[idx].date,
+              processedData[idx].value,
+            ];
           } else if (item.isTransitionRed) {
-            redData[redData.length - 1] = [processedData[idx].date, processedData[idx].value]
+            redData[redData.length - 1] = [
+              processedData[idx].date,
+              processedData[idx].value,
+            ];
           } else if (item.isTransitionYellow) {
-            yellowData[yellowData.length - 1] = [processedData[idx].date, processedData[idx].value]
+            yellowData[yellowData.length - 1] = [
+              processedData[idx].date,
+              processedData[idx].value,
+            ];
           }
         } else if (item.type === 1) {
-          redData.push(point)
-          greenData.push([item.date, '-'])
-          yellowData.push([item.date, '-'])
+          redData.push(point);
+          greenData.push([item.date, "-"]);
+          yellowData.push([item.date, "-"]);
 
           // if (item.isTransition) {
           // 	greenData[greenData.length - 1] = [processedData[idx].date, processedData[idx].value]
           // 	yellowData[yellowData.length - 1] = [processedData[idx].date, processedData[idx].value]
           // }
           if (item.isTransitionGreen) {
-            greenData[greenData.length - 1] = [processedData[idx].date, processedData[idx].value]
+            greenData[greenData.length - 1] = [
+              processedData[idx].date,
+              processedData[idx].value,
+            ];
           } else if (item.isTransitionRed) {
-            redData[redData.length - 1] = [processedData[idx].date, processedData[idx].value]
+            redData[redData.length - 1] = [
+              processedData[idx].date,
+              processedData[idx].value,
+            ];
           } else if (item.isTransitionYellow) {
-            yellowData[yellowData.length - 1] = [processedData[idx].date, processedData[idx].value]
+            yellowData[yellowData.length - 1] = [
+              processedData[idx].date,
+              processedData[idx].value,
+            ];
           }
         } else if (item.type === 2) {
-          redData.push([item.date, '-'])
-          greenData.push([item.date, '-'])
-          yellowData.push(point)
+          redData.push([item.date, "-"]);
+          greenData.push([item.date, "-"]);
+          yellowData.push(point);
 
           // if (item.isTransition) {
           // 	greenData[greenData.length - 1] = [processedData[idx].date, processedData[idx].value]
           // 	redData[redData.length - 1] = [processedData[idx].date, processedData[idx].value]
           // }
           if (item.isTransitionGreen) {
-            greenData[greenData.length - 1] = [processedData[idx].date, processedData[idx].value]
+            greenData[greenData.length - 1] = [
+              processedData[idx].date,
+              processedData[idx].value,
+            ];
           } else if (item.isTransitionRed) {
-            redData[redData.length - 1] = [processedData[idx].date, processedData[idx].value]
+            redData[redData.length - 1] = [
+              processedData[idx].date,
+              processedData[idx].value,
+            ];
           } else if (item.isTransitionYellow) {
-            yellowData[yellowData.length - 1] = [processedData[idx].date, processedData[idx].value]
+            yellowData[yellowData.length - 1] = [
+              processedData[idx].date,
+              processedData[idx].value,
+            ];
           }
         }
-      })
+      });
 
       return {
         greenData: greenData,
@@ -1511,353 +1875,356 @@ function KlineCanvsEcharts(containerId) {
         yellowData: yellowData,
         singleTypeGreen: singleTypeGreen,
         singleTypeRed: singleTypeRed,
-        singleTypeYellow: singleTypeYellow
-      }
+        singleTypeYellow: singleTypeYellow,
+      };
     }
-    const maData = processMAData(data.FCX)
-    const maDuchiData = processMAData(data.DNC)
-    if (data.FCX[0][1] == '-1') {
-      maData.greenData = []
-      maData.redData = []
-      maData.yellowData = []
+    const maData = processMAData(data.FCX);
+    const maDuchiData = processMAData(data.DNC);
+    if (data.FCX[0][1] == "-1") {
+      maData.greenData = [];
+      maData.redData = [];
+      maData.yellowData = [];
     }
     const processBarData = (data) => {
-      const barData = []
-      const markPointData = []
+      const barData = [];
+      const markPointData = [];
       data.forEach((item) => {
-        let color
+        let color;
         switch (item[4]) {
           case 1:
-            color = '#13E113'
-            break
+            color = "#13E113";
+            break;
           case 2:
-            color = '#FF0E00'
-            break
+            color = "#FF0E00";
+            break;
           case 3:
-            color = '#0000FE'
-            break
+            color = "#0000FE";
+            break;
           case 4:
-            color = '#1397FF'
-            break
+            color = "#1397FF";
+            break;
         }
         barData.push({
           value: item[5],
           itemStyle: {
             normal: {
-              color: color
-            }
-          }
-        })
+              color: color,
+            },
+          },
+        });
 
         if (item[1] === 1) {
           markPointData.push({
             coord: [item[0], item[5]],
             symbol:
-              'image://https://d31zlh4on95l9h.cloudfront.net/images/5iujb101000d5si3v3hr7w2vg0h43z1u.png',
+              "image://https://d31zlh4on95l9h.cloudfront.net/images/5iujb101000d5si3v3hr7w2vg0h43z1u.png",
             symbolSize: [30, 30],
             label: {
               normal: {
-                color: 'rgba(0, 0, 0, 0)'
-              }
-            }
-          })
+                color: "rgba(0, 0, 0, 0)",
+              },
+            },
+          });
         }
 
         if (item[2] === 1) {
           markPointData.push({
             coord: [item[0], item[5] / 2],
             symbol:
-              'image://https://d31zlh4on95l9h.cloudfront.net/images/5iujaz01000d5si016bxdf6vh0377d2h.png',
+              "image://https://d31zlh4on95l9h.cloudfront.net/images/5iujaz01000d5si016bxdf6vh0377d2h.png",
             symbolSize: [30, 30],
             label: {
               normal: {
-                color: 'rgba(0, 0, 0, 0)'
-              }
-            }
-          })
+                color: "rgba(0, 0, 0, 0)",
+              },
+            },
+          });
         }
 
         if (item[3] === 1) {
           markPointData.push({
             coord: [item[0], 0],
             symbol:
-              'image://https://d31zlh4on95l9h.cloudfront.net/images/5iujb001000d5shzls0tmd4vs0e5tdrw.png',
+              "image://https://d31zlh4on95l9h.cloudfront.net/images/5iujb001000d5shzls0tmd4vs0e5tdrw.png",
             symbolSize: [30, 30],
             label: {
               normal: {
-                color: 'rgba(0, 0, 0, 0)'
-              }
-            }
-          })
+                color: "rgba(0, 0, 0, 0)",
+              },
+            },
+          });
         }
-      })
-      return { barData, markPointData }
-    }
-    const { barData, markPointData } = processBarData(dealGnBullData)
+      });
+      return { barData, markPointData };
+    };
+    const { barData, markPointData } = processBarData(dealGnBullData);
     KlineOption = {
       legend: [
         {
           textStyle: {
-            color: 'black',
-            fontSize: window.innerWidth > 768 ? 15 : vwToPx(1.8)
+            color: "black",
+            fontSize: window.innerWidth > 768 ? 15 : vwToPx(1.8),
           },
-          width: '100%',
-          top: window.innerWidth > 768 ? '0%' : '-1%',
-          left: 'center',
+          width: "100%",
+          top: window.innerWidth > 768 ? "0%" : "-1%",
+          left: "center",
           itemGap: window.innerWidth > 768 ? 20 : 10,
           itemWidth: 10,
           itemHeight: 10,
           data: [
             {
-              name: '进攻K线',
+              name: "进攻K线",
               itemStyle: {
-                color: 'rgb(255,0,0)'
-              }
+                color: "rgb(255,0,0)",
+              },
             },
             {
-              name: '防守K线',
+              name: "防守K线",
               itemStyle: {
-                color: 'red'
-              }
+                color: "red",
+              },
             },
             {
-              name: '推进K线',
+              name: "推进K线",
               itemStyle: {
-                color: 'orange'
-              }
+                color: "orange",
+              },
             },
             {
-              name: '撤退K线',
+              name: "撤退K线",
               itemStyle: {
-                color: 'rgb(84,252,252)'
-              }
-            }
-          ]
+                color: "rgb(84,252,252)",
+              },
+            },
+          ],
         },
         {
           textStyle: {
-            color: 'black',
-            fontSize: window.innerWidth > 768 ? 15 : vwToPx(1.8)
+            color: "black",
+            fontSize: window.innerWidth > 768 ? 15 : vwToPx(1.8),
           },
-          orient: 'horizontal',
-          top: window.innerWidth > 768 ? '3%' : '2%',
-          width: '100%',
-          left: 'center',
+          orient: "horizontal",
+          top: window.innerWidth > 768 ? "3%" : "2%",
+          width: "100%",
+          left: "center",
           itemGap: 15,
           data: [
             {
-              name: '{green|━}{red|━} ' + '牵牛绳',
-              icon: 'none',
+              name: "{green|━}{red|━} " + "牵牛绳",
+              icon: "none",
               textStyle: {
                 rich: {
                   green: {
-                    color: 'green',
-                    fontSize: window.innerWidth > 768 ? 20 : 10
+                    color: "green",
+                    fontSize: window.innerWidth > 768 ? 20 : 10,
                   },
                   red: {
-                    color: 'red',
-                    fontSize: window.innerWidth > 768 ? 20 : 10
-                  }
-                }
-              }
+                    color: "red",
+                    fontSize: window.innerWidth > 768 ? 20 : 10,
+                  },
+                },
+              },
             },
             {
-              name: '龙线'
+              name: "龙线",
             },
             {
-              name: '虫线'
-            }
-          ]
+              name: "虫线",
+            },
+          ],
         },
         {
           textStyle: {
-            color: 'black',
-            fontSize: window.innerWidth > 768 ? 15 : vwToPx(1.8)
+            color: "black",
+            fontSize: window.innerWidth > 768 ? 15 : vwToPx(1.8),
           },
-          orient: 'horizontal',
-          top: window.innerWidth > 768 ? '72%' : '64%',
-          width: '100%',
-          left: 'center',
+          orient: "horizontal",
+          top: window.innerWidth > 768 ? "72%" : "64%",
+          width: "100%",
+          left: "center",
           itemGap: 15,
           data: [
             {
-              name: '{green|━}{red|━} ' + '度牛尺',
-              icon: 'none',
+              name: "{green|━}{red|━} " + "度牛尺",
+              icon: "none",
               textStyle: {
                 rich: {
                   green: {
-                    color: 'green',
-                    fontSize: window.innerWidth > 768 ? 20 : 10
+                    color: "green",
+                    fontSize: window.innerWidth > 768 ? 20 : 10,
                   },
                   red: {
-                    color: 'red',
-                    fontSize: window.innerWidth > 768 ? 20 : 10
-                  }
-                }
-              }
-            }
-          ]
-        }
+                    color: "red",
+                    fontSize: window.innerWidth > 768 ? 20 : 10,
+                  },
+                },
+              },
+            },
+          ],
+        },
       ],
       tooltip: {
         formatter: function (a, b, d) {
           if (a[0].seriesIndex == 0) {
-            const KlineTag = ref([])
-            const AIBullTag = ref([])
-            KlineTag.value = a.find((item) => item.data[1])?.data || []
-            AIBullTag.value = a.slice(4).find((item) => item.data[1] !== '-')?.data || []
+            const KlineTag = ref([]);
+            const AIBullTag = ref([]);
+            KlineTag.value = a.find((item) => item.data[1])?.data || [];
+            AIBullTag.value =
+              a.slice(4).find((item) => item.data[1] !== "-")?.data || [];
             // console.log(AIBullTag.value)
 
             return (
               a[0].name +
-              '<br/>' +
-              '开盘价' +
-              '：' +
+              "<br/>" +
+              "开盘价" +
+              "：" +
               KlineTag.value[1] +
-              '<br/>' +
-              '收盘价' +
-              '：' +
+              "<br/>" +
+              "收盘价" +
+              "：" +
               KlineTag.value[2] +
-              '<br/>' +
-              '最低价' +
-              '：' +
+              "<br/>" +
+              "最低价" +
+              "：" +
               KlineTag.value[3] +
-              '<br/>' +
-              '最高价' +
-              '：' +
+              "<br/>" +
+              "最高价" +
+              "：" +
               KlineTag.value[4] +
-              '<br/>' +
-              '牵牛绳' +
-              '：' +
+              "<br/>" +
+              "牵牛绳" +
+              "：" +
               AIBullTag.value[1]
-            )
+            );
           }
           if (a[0].seriesIndex == 4) {
-            let formattedVolume
+            let formattedVolume;
             if (a[0].data.value >= 10000) {
-              formattedVolume = (a[0].data.value / 10000).toFixed(2) + 'w'
+              formattedVolume = (a[0].data.value / 10000).toFixed(2) + "w";
             } else {
-              formattedVolume = a[0].data.value
+              formattedVolume = a[0].data.value;
             }
-            return a[0].name + '<br/>' + '成交量' + '：' + formattedVolume
+            return a[0].name + "<br/>" + "成交量" + "：" + formattedVolume;
           }
           if ([10, 11, 12].includes(a[0].seriesIndex)) {
-            const duchiData = a.find((item) => item.data && item.data[1] !== '-')
+            const duchiData = a.find(
+              (item) => item.data && item.data[1] !== "-"
+            );
             return duchiData
-              ? a[0].axisValue + '<br/>' + '度牛尺' + '：' + duchiData.data[1]
-              : null
+              ? a[0].axisValue + "<br/>" + "度牛尺" + "：" + duchiData.data[1]
+              : null;
           }
         },
-        trigger: 'axis',
+        trigger: "axis",
         axisPointer: {
-          type: 'cross'
+          type: "cross",
         },
-        backgroundColor: 'rgba(119, 120, 125, 0.6)',
+        backgroundColor: "rgba(119, 120, 125, 0.6)",
         borderWidth: 1,
-        borderColor: '#77787D',
+        borderColor: "#77787D",
         padding: 10,
         textStyle: {
-          color: '#fff'
-        }
+          color: "#fff",
+        },
       },
       axisPointer: {
         link: [
           {
-            xAxisIndex: 'all'
-          }
+            xAxisIndex: "all",
+          },
         ],
         label: {
-          backgroundColor: '#77787D'
-        }
+          backgroundColor: "#77787D",
+        },
       },
       toolbox: {
-        show: false
+        show: false,
       },
       grid: [
         {
           // left: window.innerWidth > 768 ? '8%' : '15%',
           // right: window.innerWidth > 768 ? '4%' : '2.5%',
-          top: window.innerWidth > 768 ? '10%' : '5%',
-          height: window.innerWidth > 768 ? '36%' : '34%',
-          containLabel: false
+          top: window.innerWidth > 768 ? "10%" : "5%",
+          height: window.innerWidth > 768 ? "36%" : "34%",
+          containLabel: false,
         },
         {
           // left: window.innerWidth > 768 ? '8%' : '15%',
           // right: window.innerWidth > 768 ? '4%' : '2.5%',
-          top: window.innerWidth > 768 ? '50%' : '42%',
-          height: window.innerWidth > 768 ? '20%' : '22%',
-          containLabel: false
+          top: window.innerWidth > 768 ? "50%" : "42%",
+          height: window.innerWidth > 768 ? "20%" : "22%",
+          containLabel: false,
         },
         {
           // left: window.innerWidth > 768 ? '8%' : '15%',
           // right: window.innerWidth > 768 ? '4%' : '2.5%',
-          top: window.innerWidth > 768 ? '78%' : '70%',
-          height: window.innerWidth > 768 ? '20%' : '22%',
-          containLabel: false
-        }
+          top: window.innerWidth > 768 ? "78%" : "70%",
+          height: window.innerWidth > 768 ? "20%" : "22%",
+          containLabel: false,
+        },
       ],
       xAxis: [
         {
-          type: 'category',
+          type: "category",
           data: dealData.categoryData,
           boundaryGap: true,
           axisLine: { onZero: false },
           splitLine: { show: false },
-          min: 'dataMin',
-          max: 'dataMax',
+          min: "dataMin",
+          max: "dataMax",
           axisPointer: {
-            z: 100
+            z: 100,
           },
           axisLine: {
             lineStyle: {
-              color: 'black'
-            }
+              color: "black",
+            },
           }, //
           axisLabel: { show: false },
-          axisTick: { show: false }
+          axisTick: { show: false },
         },
         {
-          type: 'category',
+          type: "category",
           gridIndex: 1,
           data: dealData.categoryData,
           boundaryGap: true,
-          axisLine: { lineStyle: { color: 'black' } },
+          axisLine: { lineStyle: { color: "black" } },
           axisLabel: {
             show: false,
-            interval: 'auto'
-          }
+            interval: "auto",
+          },
         },
         {
-          type: 'category',
+          type: "category",
           gridIndex: 2,
           data: dealData.categoryData,
           boundaryGap: true,
-          axisLine: { lineStyle: { color: 'black' } },
+          axisLine: { lineStyle: { color: "black" } },
           axisLabel: {
             show: true,
-            interval: 'auto'
-          }
-        }
+            interval: "auto",
+          },
+        },
       ],
       yAxis: [
         {
           scale: true,
           gridIndex: 0,
-          position: 'left',
+          position: "left",
           axisLabel: {
             inside: false,
-            align: 'right',
-            fontSize: window.innerWidth > 768 ? 15 : 10
+            align: "right",
+            fontSize: window.innerWidth > 768 ? 15 : 10,
           },
           axisLine: {
             show: true,
             lineStyle: {
-              fontSize: '',
-              color: 'black'
-            }
+              fontSize: "",
+              color: "black",
+            },
           },
           axisTick: { show: false },
-          splitLine: { show: false }
+          splitLine: { show: false },
         },
         {
           scale: true,
@@ -1871,22 +2238,22 @@ function KlineCanvsEcharts(containerId) {
             margin: 8,
             formatter: (value) => {
               if (value >= 1000000000) {
-                return (value / 1000000000).toFixed(1) + 'B'
+                return (value / 1000000000).toFixed(1) + "B";
               } else if (value >= 1000000) {
-                return (value / 1000000).toFixed(1) + 'M'
+                return (value / 1000000).toFixed(1) + "M";
               } else if (value >= 10000) {
-                return (value / 10000).toFixed(1) + 'W'
+                return (value / 10000).toFixed(1) + "W";
               }
-              return value.toFixed(0)
-            }
+              return value.toFixed(0);
+            },
           },
-          axisLine: { show: true, lineStyle: { color: 'black' } },
+          axisLine: { show: true, lineStyle: { color: "black" } },
           axisTick: { show: false },
-          splitLine: { show: true, lineStyle: { type: 'dashed' } },
-          boundaryGap: ['20%', '20%']
+          splitLine: { show: true, lineStyle: { type: "dashed" } },
+          boundaryGap: ["20%", "20%"],
         },
         {
-          type: 'value',
+          type: "value",
           gridIndex: 2,
           min: 0,
           max: 100,
@@ -1894,264 +2261,264 @@ function KlineCanvsEcharts(containerId) {
             show: true,
             fontSize: window.innerWidth > 768 ? 15 : 10,
             formatter: function (value) {
-              var customValues = [0, 20, 50, 80, 100]
-              return customValues.indexOf(value) > -1 ? value : ''
-            }
+              var customValues = [0, 20, 50, 80, 100];
+              return customValues.indexOf(value) > -1 ? value : "";
+            },
           },
           axisLine: {
             show: true,
             lineStyle: {
-              color: 'black'
-            }
+              color: "black",
+            },
           },
           axisTick: {
-            show: false
+            show: false,
           },
           splitNumber: 10,
           splitLine: {
             show: true,
             lineStyle: {
-              type: 'dashed',
-              color: '#fff',
-              width: 1
+              type: "dashed",
+              color: "#fff",
+              width: 1,
             },
             interval: function (index, value) {
-              return [20, 50, 80, 100].indexOf(value) > -1
-            }
-          }
-        }
+              return [20, 50, 80, 100].indexOf(value) > -1;
+            },
+          },
+        },
       ],
       dataZoom: [
         {
-          type: 'inside',
+          type: "inside",
           xAxisIndex: [0, 1, 2],
           start: 55,
-          end: 100
+          end: 100,
         },
         {
           show: true,
           xAxisIndex: [0, 1, 2],
-          type: 'slider',
-          top: window.innerWidth > 768 ? '95%' : '96%',
-          left: window.innerWidth > 768 ? '10%' : '8%',
+          type: "slider",
+          top: window.innerWidth > 768 ? "95%" : "96%",
+          left: window.innerWidth > 768 ? "10%" : "8%",
           start: 98,
-          end: 100
-        }
+          end: 100,
+        },
       ],
       visualMap: [
         {
-          type: 'piecewise',
+          type: "piecewise",
           show: false,
           pieces: maData.singleTypeGreen,
           outOfRange: {
-            color: 'green'
+            color: "green",
           },
           dimension: 0,
-          seriesIndex: 7
+          seriesIndex: 7,
         },
         {
-          type: 'piecewise',
+          type: "piecewise",
           show: false,
           pieces: maData.singleTypeRed,
           outOfRange: {
-            color: 'red'
+            color: "red",
           },
           dimension: 0,
-          seriesIndex: 8
+          seriesIndex: 8,
         },
         {
-          type: 'piecewise',
+          type: "piecewise",
           show: false,
           pieces: maData.singleTypeYellow,
           outOfRange: {
-            color: 'yellow'
+            color: "yellow",
           },
           dimension: 0,
-          seriesIndex: 9
-        }
+          seriesIndex: 9,
+        },
       ],
       series: [
         {
-          name: '进攻K线',
-          type: 'candlestick',
-          barWidth: '50%',
+          name: "进攻K线",
+          type: "candlestick",
+          barWidth: "50%",
           data: dealData1.values,
           xAxisIndex: 0,
           yAxisIndex: 0,
           itemStyle: {
             normal: {
-              color: 'rgb(255,0,0)',
-              color0: 'rgb(255,0,0)',
-              borderColor: 'rgb(255,0,0)',
-              borderColor0: 'rgb(255,0,0)'
-            }
+              color: "rgb(255,0,0)",
+              color0: "rgb(255,0,0)",
+              borderColor: "rgb(255,0,0)",
+              borderColor0: "rgb(255,0,0)",
+            },
           },
-          gridIndex: 0
+          gridIndex: 0,
         },
         //
         {
-          name: '推进K线',
-          type: 'candlestick',
-          barWidth: '50%',
+          name: "推进K线",
+          type: "candlestick",
+          barWidth: "50%",
           data: dealData2.values,
           xAxisIndex: 0,
           yAxisIndex: 0,
           itemStyle: {
             normal: {
-              color: 'rgb(0,0,252)',
-              color0: 'rgb(0,0,252)',
-              borderColor: 'rgb(0,0,252)',
-              borderColor0: 'rgb(0,0,252)'
-            }
+              color: "rgb(0,0,252)",
+              color0: "rgb(0,0,252)",
+              borderColor: "rgb(0,0,252)",
+              borderColor0: "rgb(0,0,252)",
+            },
           },
-          gridIndex: 0
+          gridIndex: 0,
         },
         {
-          name: '防守K线',
-          type: 'candlestick',
-          barWidth: '50%',
+          name: "防守K线",
+          type: "candlestick",
+          barWidth: "50%",
           data: dealData3.values,
           xAxisIndex: 0,
           yAxisIndex: 0,
           itemStyle: {
             normal: {
-              color: 'orange',
-              color0: 'orange',
-              borderColor: 'orange',
-              borderColor0: 'orange'
-            }
+              color: "orange",
+              color0: "orange",
+              borderColor: "orange",
+              borderColor0: "orange",
+            },
           },
-          gridIndex: 0
+          gridIndex: 0,
         },
         {
-          name: '撤退K线',
-          type: 'candlestick',
-          barWidth: '50%',
+          name: "撤退K线",
+          type: "candlestick",
+          barWidth: "50%",
           data: dealData4.values,
           xAxisIndex: 0,
           yAxisIndex: 0,
           itemStyle: {
             normal: {
-              color: 'rgb(84,252,252)',
-              color0: 'rgb(84,252,252)',
-              borderColor: 'rgb(84,252,252)',
-              borderColor0: 'rgb(84,252,252)'
-            }
+              color: "rgb(84,252,252)",
+              color0: "rgb(84,252,252)",
+              borderColor: "rgb(84,252,252)",
+              borderColor0: "rgb(84,252,252)",
+            },
           },
-          gridIndex: 0
+          gridIndex: 0,
         },
         {
-          name: '成交量',
-          type: 'bar',
-          barWidth: '70%',
+          name: "成交量",
+          type: "bar",
+          barWidth: "70%",
           xAxisIndex: 1,
           yAxisIndex: 1,
           data: barData,
           markPoint: {
             data: markPointData,
             label: {
-              show: false
-            }
-          }
+              show: false,
+            },
+          },
         },
         {
-          name: '{green|━}{red|━} ' + '牵牛绳',
-          type: 'line',
+          name: "{green|━}{red|━} " + "牵牛绳",
+          type: "line",
           data: [],
           smooth: true,
-          symbol: 'none',
+          symbol: "none",
           xAxisIndex: 0,
           yAxisIndex: 0,
           showSymbol: false,
           lineStyle: {
-            opacity: 0
+            opacity: 0,
           },
           itemStyle: {
             normal: {
-              color: 'green'
-            }
+              color: "green",
+            },
           },
-          gridIndex: 0
+          gridIndex: 0,
         },
         {
-          name: '{green|━}{red|━} ' + '度牛尺',
-          type: 'line',
+          name: "{green|━}{red|━} " + "度牛尺",
+          type: "line",
           data: [],
           smooth: true,
-          symbol: 'none',
+          symbol: "none",
           xAxisIndex: 0,
           yAxisIndex: 0,
           showSymbol: false,
           lineStyle: {
-            opacity: 0
+            opacity: 0,
           },
           itemStyle: {
             normal: {
-              color: 'green'
-            }
+              color: "green",
+            },
           },
-          gridIndex: 0
+          gridIndex: 0,
         },
         {
-          name: '虫线',
-          type: 'line',
+          name: "虫线",
+          type: "line",
           data: maData.greenData,
           smooth: true,
-          symbol: 'none',
+          symbol: "none",
           xAxisIndex: 0,
           yAxisIndex: 0,
           itemStyle: {
             normal: {
-              color: 'green',
+              color: "green",
               lineStyle: {
                 width: 2,
-                type: 'solid'
-              }
-            }
+                type: "solid",
+              },
+            },
           },
-          gridIndex: 0
+          gridIndex: 0,
         },
         {
-          name: '龙线',
-          type: 'line',
+          name: "龙线",
+          type: "line",
           data: maData.redData,
           smooth: true,
-          symbol: 'none',
+          symbol: "none",
           xAxisIndex: 0,
           yAxisIndex: 0,
           itemStyle: {
             normal: {
-              color: 'red',
+              color: "red",
               lineStyle: {
                 width: 2,
-                type: 'solid'
-              }
-            }
+                type: "solid",
+              },
+            },
           },
-          gridIndex: 0
+          gridIndex: 0,
         },
         {
-          name: '黄色',
-          type: 'line',
+          name: "黄色",
+          type: "line",
           data: maData.yellowData,
           smooth: true,
-          symbol: 'none',
+          symbol: "none",
           xAxisIndex: 0,
           yAxisIndex: 0,
           itemStyle: {
             normal: {
-              color: 'yellow',
+              color: "yellow",
               lineStyle: {
                 width: 2,
-                type: 'solid'
-              }
-            }
+                type: "solid",
+              },
+            },
           },
-          gridIndex: 0
+          gridIndex: 0,
         },
         {
-          name: '背景区域',
-          type: 'line',
+          name: "背景区域",
+          type: "line",
           data: [],
           xAxisIndex: 2,
           yAxisIndex: 2,
@@ -2159,18 +2526,18 @@ function KlineCanvsEcharts(containerId) {
             silent: true,
             itemStyle: {
               normal: {
-                opacity: 1
-              }
+                opacity: 1,
+              },
             },
             label: {
               normal: {
                 show: true,
-                position: 'insideRight',
+                position: "insideRight",
                 fontSize: window.innerWidth > 768 ? 16 : 12,
-                fontWeight: 'bold',
-                color: '#13E113',
-                distance: 10
-              }
+                fontWeight: "bold",
+                color: "#13E113",
+                distance: 10,
+              },
             },
             data: [
               [
@@ -2178,113 +2545,113 @@ function KlineCanvsEcharts(containerId) {
                   yAxis: 0,
                   itemStyle: {
                     normal: {
-                      color: '#CFFFCF'
-                    }
+                      color: "#CFFFCF",
+                    },
                   },
                   label: {
                     normal: {
-                      formatter: '度牛区'
-                    }
-                  }
+                      formatter: "度牛区",
+                    },
+                  },
                 },
                 {
-                  yAxis: 20
-                }
+                  yAxis: 20,
+                },
               ],
               [
                 {
                   yAxis: 20,
                   itemStyle: {
                     normal: {
-                      color: '#A6FFFF'
-                    }
-                  }
+                      color: "#A6FFFF",
+                    },
+                  },
                 },
                 {
-                  yAxis: 40
-                }
+                  yAxis: 40,
+                },
               ],
               [
                 {
                   yAxis: 40,
                   itemStyle: {
                     normal: {
-                      color: '#FFF686'
-                    }
-                  }
+                      color: "#FFF686",
+                    },
+                  },
                 },
                 {
-                  yAxis: 60
-                }
+                  yAxis: 60,
+                },
               ],
               [
                 {
                   yAxis: 60,
                   itemStyle: {
-                    normal: { color: '#FFD2B3' }
-                  }
+                    normal: { color: "#FFD2B3" },
+                  },
                 },
                 {
-                  yAxis: 80
-                }
+                  yAxis: 80,
+                },
               ],
               [
                 {
                   yAxis: 80,
                   itemStyle: {
-                    normal: { color: '#FFB8B8' }
+                    normal: { color: "#FFB8B8" },
                   },
                   label: {
                     normal: {
-                      formatter: '度牛区',
-                      color: '#FF0000',
-                      position: 'insideLeft',
-                      distance: 10
-                    }
-                  }
+                      formatter: "度牛区",
+                      color: "#FF0000",
+                      position: "insideLeft",
+                      distance: 10,
+                    },
+                  },
                 },
                 {
-                  yAxis: 100
-                }
-              ]
-            ]
-          }
+                  yAxis: 100,
+                },
+              ],
+            ],
+          },
         },
         {
-          name: '度牛尺',
-          type: 'line',
+          name: "度牛尺",
+          type: "line",
           data: maDuchiData.greenData,
-          symbol: 'none',
+          symbol: "none",
           xAxisIndex: 2,
           yAxisIndex: 2,
           itemStyle: {
             normal: {
-              color: 'green',
+              color: "green",
               lineStyle: {
                 width: 2,
-                type: 'solid'
-              }
-            }
+                type: "solid",
+              },
+            },
           },
           gridIndex: 2,
           markPoint: {
-            symbol: 'rect',
+            symbol: "rect",
             symbolSize: (value, params) => {
-              const width = window.innerWidth
-              const baseHeight = 36
+              const width = window.innerWidth;
+              const baseHeight = 36;
               if (width <= 375) {
-                return [2, 16]
+                return [2, 16];
               } else if (width <= 768) {
-                return [2, 24]
+                return [2, 24];
               }
-              return [2, baseHeight]
+              return [2, baseHeight];
             },
             itemStyle: {
               normal: {
                 label: {
-                  show: false
-                }
-              }
+                  show: false,
+                },
+              },
             },
             data: [
               ...maDuchiData.greenData
@@ -2294,50 +2661,50 @@ function KlineCanvsEcharts(containerId) {
                       coord: [item[0], 20],
                       symbolOffset: window.innerWidth > 768 ? [0, 20] : [0, 12],
                       itemStyle: {
-                        color: '#00ff00'
-                      }
-                    }
+                        color: "#00ff00",
+                      },
+                    };
                   }
                 })
-                .filter(Boolean)
-            ]
-          }
+                .filter(Boolean),
+            ],
+          },
         },
         {
-          type: 'line',
+          type: "line",
           data: maDuchiData.redData,
           // smooth: true,
-          symbol: 'none',
+          symbol: "none",
           xAxisIndex: 2,
           yAxisIndex: 2,
           itemStyle: {
             normal: {
-              color: 'red',
+              color: "red",
               lineStyle: {
                 width: 2,
-                type: 'solid'
-              }
-            }
+                type: "solid",
+              },
+            },
           },
           gridIndex: 2,
           markPoint: {
-            symbol: 'rect',
+            symbol: "rect",
             symbolSize: (value, params) => {
-              const width = window.innerWidth
-              const baseHeight = 36
+              const width = window.innerWidth;
+              const baseHeight = 36;
               if (width <= 375) {
-                return [2, 16]
+                return [2, 16];
               } else if (width <= 768) {
-                return [2, 24]
+                return [2, 24];
               }
-              return [2, baseHeight]
+              return [2, baseHeight];
             },
             itemStyle: {
               normal: {
                 label: {
-                  show: false
-                }
-              }
+                  show: false,
+                },
+              },
             },
             data: [
               ...maDuchiData.redData
@@ -2345,152 +2712,266 @@ function KlineCanvsEcharts(containerId) {
                   if (item[1] === 100) {
                     return {
                       coord: [item[0], 80],
-                      symbolOffset: window.innerWidth > 768 ? [0, -20] : [0, -12],
+                      symbolOffset:
+                        window.innerWidth > 768 ? [0, -20] : [0, -12],
                       itemStyle: {
-                        color: '#ff0000'
-                      }
-                    }
+                        color: "#ff0000",
+                      },
+                    };
                   }
                 })
-                .filter(Boolean)
-            ]
-          }
+                .filter(Boolean),
+            ],
+          },
         },
         {
-          name: '辅助线',
-          type: 'line',
+          name: "辅助线",
+          type: "line",
           data: [],
           xAxisIndex: 2,
           yAxisIndex: 2,
           markLine: {
             silent: true,
-            symbol: 'none',
+            symbol: "none",
             lineStyle: {
-              color: '#000000',
+              color: "#000000",
               width: 3,
-              type: 'solid'
+              type: "solid",
             },
-            data: [{ yAxis: 20 }]
-          }
+            data: [{ yAxis: 20 }],
+          },
         },
         {
-          name: '辅助线',
-          type: 'line',
+          name: "辅助线",
+          type: "line",
           data: [],
           xAxisIndex: 2,
           yAxisIndex: 2,
           markLine: {
             silent: true,
-            symbol: 'none',
+            symbol: "none",
             lineStyle: {
-              color: '#000000',
+              color: "#000000",
               width: 3,
-              type: 'solid'
+              type: "solid",
             },
-            data: [{ yAxis: 50 }]
-          }
+            data: [{ yAxis: 50 }],
+          },
         },
         {
-          name: '辅助线',
-          type: 'line',
+          name: "辅助线",
+          type: "line",
           data: [],
           xAxisIndex: 2,
           yAxisIndex: 2,
           markLine: {
             silent: true,
-            symbol: 'none',
+            symbol: "none",
             lineStyle: {
-              color: '#000000',
+              color: "#000000",
               width: 3,
-              type: 'solid'
+              type: "solid",
             },
-            data: [{ yAxis: 80 }]
-          }
+            data: [{ yAxis: 80 }],
+          },
         },
         {
-          name: '辅助线',
-          type: 'line',
+          name: "辅助线",
+          type: "line",
           data: [],
           xAxisIndex: 2,
           yAxisIndex: 2,
           markLine: {
             silent: true,
-            symbol: 'none',
+            symbol: "none",
             lineStyle: {
-              color: '#000000',
+              color: "#000000",
               width: 3,
 
-              type: 'solid'
+              type: "solid",
             },
-            data: [{ yAxis: 100 }]
-          }
-        }
-      ]
-    }
-
-  } else if (klineData.type === 3 || klineData.type === 4 || klineData.type === 8 || klineData.type === 9 || klineData.type === 10) {
-    console.log('进入3，4，8，9，10分类')
-
-    const arr1 = []
-    const arr2 = []
-    const arr3 = []
-    const arr4 = []
+            data: [{ yAxis: 100 }],
+          },
+        },
+      ],
+    };
+  } else if (
+    klineData.type === 3 ||
+    klineData.type === 4 ||
+    klineData.type === 8 ||
+    klineData.type === 9 ||
+    klineData.type === 10
+  ) {
+    console.log("进入3，4，8，9，10分类");
+
+    const arr1 = [];
+    const arr2 = [];
+    const arr3 = [];
+    const arr4 = [];
     // k线的数据
     // 动态K线
     const changeColorKline = (QSXH, KLine20) => {
-      console.log(QSXH, KLine20)
+      console.log(QSXH, KLine20);
       if (QSXH) {
         QSXH.map((item) => {
           KLine20.map((kline_item) => {
             if (item[1] == 1 && item[0] == kline_item[0]) {
-              arr1.push(kline_item)
-              arr2.push([kline_item[0], null, null, null, null, null, null, null])
-              arr3.push([kline_item[0], null, null, null, null, null, null, null])
-              arr4.push([kline_item[0], null, null, null, null, null, null, null])
+              arr1.push(kline_item);
+              arr2.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr3.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr4.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
             }
             if (item[1] == 2 && item[0] == kline_item[0]) {
-              arr2.push(kline_item)
-              arr1.push([kline_item[0], null, null, null, null, null, null, null])
-              arr3.push([kline_item[0], null, null, null, null, null, null, null])
-              arr4.push([kline_item[0], null, null, null, null, null, null, null])
+              arr2.push(kline_item);
+              arr1.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr3.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr4.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
             }
             if (item[1] == 3 && item[0] == kline_item[0]) {
-              arr3.push(kline_item)
-              arr2.push([kline_item[0], null, null, null, null, null, null, null])
-              arr1.push([kline_item[0], null, null, null, null, null, null, null])
-              arr4.push([kline_item[0], null, null, null, null, null, null, null])
+              arr3.push(kline_item);
+              arr2.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr1.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr4.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
             }
             if (item[1] == 4 && item[0] == kline_item[0]) {
-              arr4.push(kline_item)
-              arr2.push([kline_item[0], null, null, null, null, null, null, null])
-              arr3.push([kline_item[0], null, null, null, null, null, null, null])
-              arr1.push([kline_item[0], null, null, null, null, null, null, null])
+              arr4.push(kline_item);
+              arr2.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr3.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr1.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
             }
-          })
-        })
+          });
+        });
       }
-    }
-    changeColorKline(data.QSXH, data.KLine20)
-    var dealData = splitData(data.KLine20)
-    var dealData1 = splitData(arr1)
-    var dealData2 = splitData(arr2)
-    var dealData3 = splitData(arr3)
-    var dealData4 = splitData(arr4)
+    };
+    changeColorKline(data.QSXH, data.KLine20);
+    var dealData = splitData(data.KLine20);
+    var dealData1 = splitData(arr1);
+    var dealData2 = splitData(arr2);
+    var dealData3 = splitData(arr3);
+    var dealData4 = splitData(arr4);
     // 处理MA数据，创建两段重叠的数据
     function processMAData(data) {
-      let processedData = []
+      let processedData = [];
       // 初始化处理后的数据结构
       data.forEach((item, idx) => {
         processedData.push({
           date: item[0],
           value: item[1],
-          type: item[2]
-        })
-      })
+          type: item[2],
+        });
+      });
       // 当某一种type只存在一天,设置另一种type透明
-      let singleTypeRed = [{ min: 0, max: 0, color: '#000' }]
-      let singleTypeYellow = [{ min: 0, max: 0, color: '#000' }]
-      let singleTypeGreen = [{ min: 0, max: 0, color: '#000' }]
+      let singleTypeRed = [{ min: 0, max: 0, color: "#000" }];
+      let singleTypeYellow = [{ min: 0, max: 0, color: "#000" }];
+      let singleTypeGreen = [{ min: 0, max: 0, color: "#000" }];
       // 在类型切换点添加过渡点
       for (let i = 1; i < processedData.length; i++) {
         if (processedData[i].type !== processedData[i - 1].type) {
@@ -2500,38 +2981,50 @@ function KlineCanvsEcharts(containerId) {
               processedData[i - 1].type === processedData[i + 1].type)
           ) {
             if (processedData[i - 1].type === 0) {
-              singleTypeGreen.push({ min: i - 1, max: i, color: 'rgba(0,0,0,0)' })
+              singleTypeGreen.push({
+                min: i - 1,
+                max: i,
+                color: "rgba(0,0,0,0)",
+              });
             } else if (processedData[i - 1].type === 1) {
-              singleTypeRed.push({ min: i - 1, max: i, color: 'rgba(0,0,0,0)' })
+              singleTypeRed.push({
+                min: i - 1,
+                max: i,
+                color: "rgba(0,0,0,0)",
+              });
             } else if (processedData[i - 1].type === 2) {
-              singleTypeYellow.push({ min: i - 1, max: i, color: 'rgba(0,0,0,0)' })
+              singleTypeYellow.push({
+                min: i - 1,
+                max: i,
+                color: "rgba(0,0,0,0)",
+              });
             }
           }
         }
         if (processedData[i].type !== processedData[i - 1].type) {
           if (processedData[i].type == 0) {
-            processedData[i - 1].isTransitionGreen = 1
+            processedData[i - 1].isTransitionGreen = 1;
           } else if (processedData[i].type == 1) {
-            processedData[i - 1].isTransitionRed = 1
+            processedData[i - 1].isTransitionRed = 1;
           } else if (processedData[i].type == 2) {
-            processedData[i - 1].isTransitionYellow = 1
+            processedData[i - 1].isTransitionYellow = 1;
           }
           // // 创建过渡点，使用前一个点的值
           // processedData[i - 1].isTransition = true
         }
       }
       // 分离红绿数据，包含过渡点
-      let greenData = []
-      let redData = []
-      let yellowData = []
+      let greenData = [];
+      let redData = [];
+      let yellowData = [];
 
       processedData.forEach((item, idx) => {
-        const point = [item.date, item.value]
+        const point = [item.date, item.value];
 
         if (item.type === 0) {
-          greenData.push(point)
-          redData.push([item.date, '-'])
-          yellowData.push([item.date, '-'])
+          greenData.push(point);
+          redData.push([item.date, "-"]);
+          yellowData.push([item.date, "-"]);
 
           // if (item.isTransition) {
           // 	// 添加过渡点到红色线
@@ -2539,16 +3032,25 @@ function KlineCanvsEcharts(containerId) {
           // 	yellowData[yellowData.length - 1] = [processedData[idx].date, processedData[idx].value]
           // }
           if (item.isTransitionGreen) {
-            greenData[greenData.length - 1] = [processedData[idx].date, processedData[idx].value]
+            greenData[greenData.length - 1] = [
+              processedData[idx].date,
+              processedData[idx].value,
+            ];
           } else if (item.isTransitionRed) {
-            redData[redData.length - 1] = [processedData[idx].date, processedData[idx].value]
+            redData[redData.length - 1] = [
+              processedData[idx].date,
+              processedData[idx].value,
+            ];
           } else if (item.isTransitionYellow) {
-            yellowData[yellowData.length - 1] = [processedData[idx].date, processedData[idx].value]
+            yellowData[yellowData.length - 1] = [
+              processedData[idx].date,
+              processedData[idx].value,
+            ];
           }
         } else if (item.type === 1) {
-          redData.push(point)
-          greenData.push([item.date, '-'])
-          yellowData.push([item.date, '-'])
+          redData.push(point);
+          greenData.push([item.date, "-"]);
+          yellowData.push([item.date, "-"]);
 
           // if (item.isTransition) {
           // 	// 添加过渡点到绿色线
@@ -2556,16 +3058,25 @@ function KlineCanvsEcharts(containerId) {
           // 	yellowData[yellowData.length - 1] = [processedData[idx].date, processedData[idx].value]
           // }
           if (item.isTransitionGreen) {
-            greenData[greenData.length - 1] = [processedData[idx].date, processedData[idx].value]
+            greenData[greenData.length - 1] = [
+              processedData[idx].date,
+              processedData[idx].value,
+            ];
           } else if (item.isTransitionRed) {
-            redData[redData.length - 1] = [processedData[idx].date, processedData[idx].value]
+            redData[redData.length - 1] = [
+              processedData[idx].date,
+              processedData[idx].value,
+            ];
           } else if (item.isTransitionYellow) {
-            yellowData[yellowData.length - 1] = [processedData[idx].date, processedData[idx].value]
+            yellowData[yellowData.length - 1] = [
+              processedData[idx].date,
+              processedData[idx].value,
+            ];
           }
         } else if (item.type === 2) {
-          redData.push([item.date, '-'])
-          greenData.push([item.date, '-'])
-          yellowData.push(point)
+          redData.push([item.date, "-"]);
+          greenData.push([item.date, "-"]);
+          yellowData.push(point);
 
           // if (item.isTransition) {
           // 	// 添加过渡点到绿色线
@@ -2573,14 +3084,23 @@ function KlineCanvsEcharts(containerId) {
           // 	redData[redData.length - 1] = [processedData[idx].date, processedData[idx].value]
           // }
           if (item.isTransitionGreen) {
-            greenData[greenData.length - 1] = [processedData[idx].date, processedData[idx].value]
+            greenData[greenData.length - 1] = [
+              processedData[idx].date,
+              processedData[idx].value,
+            ];
           } else if (item.isTransitionRed) {
-            redData[redData.length - 1] = [processedData[idx].date, processedData[idx].value]
+            redData[redData.length - 1] = [
+              processedData[idx].date,
+              processedData[idx].value,
+            ];
           } else if (item.isTransitionYellow) {
-            yellowData[yellowData.length - 1] = [processedData[idx].date, processedData[idx].value]
+            yellowData[yellowData.length - 1] = [
+              processedData[idx].date,
+              processedData[idx].value,
+            ];
           }
         }
-      })
+      });
       // console.log('greenData', greenData)
       // console.log('redData', redData)
       // console.log('yellowData', yellowData)
@@ -2593,17 +3113,17 @@ function KlineCanvsEcharts(containerId) {
         yellowData: yellowData,
         singleTypeGreen: singleTypeGreen,
         singleTypeRed: singleTypeRed,
-        singleTypeYellow: singleTypeYellow
-      }
+        singleTypeYellow: singleTypeYellow,
+      };
     }
-    const maData = processMAData(data.FCX)
+    const maData = processMAData(data.FCX);
     // 牵牛绳的数据
 
     // 如果第一个字段的第一个数据为-1的话，不展示牵牛绳
-    if (data.FCX[0][1] == '-1') {
-      maData.greenData = []
-      maData.redData = []
-      maData.yellowData = []
+    if (data.FCX[0][1] == "-1") {
+      maData.greenData = [];
+      maData.redData = [];
+      maData.yellowData = [];
     }
     // K线图距离顶部的距离
     // 配置项
@@ -2615,214 +3135,215 @@ function KlineCanvsEcharts(containerId) {
         {
           //图例文字的样式
           textStyle: {
-            color: 'black', //图例文字颜色
-            fontSize: window.innerWidth > 768 ? 15 : vwToPx(1.8) // 响应式字体大小
+            color: "black", //图例文字颜色
+            fontSize: window.innerWidth > 768 ? 15 : vwToPx(1.8), // 响应式字体大小
           },
-          width: '100%', // 确保有足够的宽度容纳图例
-          left: 'center',
+          width: "100%", // 确保有足够的宽度容纳图例
+          left: "center",
           itemGap: window.innerWidth > 768 ? 20 : 10, // 控制图例项之间的间距
           itemWidth: 10, // 调整颜色块的宽度
           itemHeight: 10, // 调整颜色块的高度
           data: [
             {
-              name: '进攻K线',
+              name: "进攻K线",
               itemStyle: {
-                color: 'rgb(255,0,0)'
-              }
+                color: "rgb(255,0,0)",
+              },
             },
             {
-              name: '防守K线',
+              name: "防守K线",
               itemStyle: {
-                color: 'red'
-              }
+                color: "red",
+              },
             },
             {
-              name: '推进K线',
+              name: "推进K线",
               itemStyle: {
-                color: 'orange'
-              }
+                color: "orange",
+              },
             },
             {
-              name: '撤退K线',
+              name: "撤退K线",
               itemStyle: {
-                color: 'rgb(84,252,252'
-              }
-            }
-          ]
+                color: "rgb(84,252,252",
+              },
+            },
+          ],
         },
         {
           //图例文字的样式
           textStyle: {
-            color: 'black', //图例文字颜色
-            fontSize: window.innerWidth > 768 ? 15 : vwToPx(1.8) // 响应式字体大小
+            color: "black", //图例文字颜色
+            fontSize: window.innerWidth > 768 ? 15 : vwToPx(1.8), // 响应式字体大小
           },
-          orient: 'horizontal', // 设置图例水平布局
-          top: window.innerWidth > 768 ? '8%' : '8%',
-          width: '100%', // 确保有足够的宽度容纳图例
-          left: 'center',
+          orient: "horizontal", // 设置图例水平布局
+          top: window.innerWidth > 768 ? "8%" : "8%",
+          width: "100%", // 确保有足够的宽度容纳图例
+          left: "center",
           itemGap: 15, // 控制图例项之间的间距
           data: [
             // 牵牛绳
             {
-              name: '{green|━}{red|━} ' + '牵牛绳', // 将牵牛绳样式应用到文本前缀
-              icon: 'none', // 去掉默认图例图标
+              name: "{green|━}{red|━} " + "牵牛绳", // 将牵牛绳样式应用到文本前缀
+              icon: "none", // 去掉默认图例图标
               textStyle: {
                 rich: {
                   green: {
-                    color: 'green',
-                    fontSize: window.innerWidth > 768 ? 20 : 10
+                    color: "green",
+                    fontSize: window.innerWidth > 768 ? 20 : 10,
                   },
                   red: {
-                    color: 'red',
-                    fontSize: window.innerWidth > 768 ? 20 : 10
-                  }
-                }
-              }
+                    color: "red",
+                    fontSize: window.innerWidth > 768 ? 20 : 10,
+                  },
+                },
+              },
             },
             {
-              name: '龙线'
+              name: "龙线",
             },
             {
-              name: '虫线'
-            }
-          ]
-        }
+              name: "虫线",
+            },
+          ],
+        },
       ],
       tooltip: {
         // 调用接口之后方法
         formatter: function (a, b, d) {
           if (a[0].seriesIndex == 0) {
-            const KlineTag = ref([]) // 判断几根K线
-            const AIBullTag = ref([])
+            const KlineTag = ref([]); // 判断几根K线
+            const AIBullTag = ref([]);
 
             // 找到第一个满足条件的数据
-            KlineTag.value = a.find((item) => item.data[1])?.data || []
+            KlineTag.value = a.find((item) => item.data[1])?.data || [];
 
             // 找到第一个满足条件的非 '-' 数据
-            AIBullTag.value = a.slice(4).find((item) => item.data[1] !== '-')?.data || []
+            AIBullTag.value =
+              a.slice(4).find((item) => item.data[1] !== "-")?.data || [];
             return (
               a[0].name +
-              '<br/>' +
-              '开盘价' +
-              '：' +
+              "<br/>" +
+              "开盘价" +
+              "：" +
               KlineTag.value[1] +
-              '<br/>' +
-              '收盘价' +
-              '：' +
+              "<br/>" +
+              "收盘价" +
+              "：" +
               KlineTag.value[2] +
-              '<br/>' +
-              '最低价' +
-              '：' +
+              "<br/>" +
+              "最低价" +
+              "：" +
               KlineTag.value[3] +
-              '<br/>' +
-              '最高价' +
-              '：' +
+              "<br/>" +
+              "最高价" +
+              "：" +
               KlineTag.value[4] +
-              '<br/>' +
-              '牵牛绳' +
-              '：' +
+              "<br/>" +
+              "牵牛绳" +
+              "：" +
               AIBullTag.value[1]
-            )
+            );
             // }else if(a[0].seriesIndex == 5){
             //     return a[0].name+ "<br/>" + a[0].seriesName + "：" + a[0].value  + "<br/>" + a[1].seriesName + "：" + a[1].value + "<br/>" + a[2].seriesName + "：" + a[2].value + "<br/>" + a[3].seriesName + "：" + a[3].value + "<br/>" + a[4].seriesName + "：" + a[4].value + "<br/>" + a[5].seriesName + "：" + a[5].value
           } else {
             return (
               a[0].name +
-              '<br/>' +
-              '开盘价' +
-              '：' +
+              "<br/>" +
+              "开盘价" +
+              "：" +
               a[0].data[1] +
-              '<br/>' +
-              '收盘价' +
-              '：' +
+              "<br/>" +
+              "收盘价" +
+              "：" +
               a[0].data[2] +
-              '<br/>' +
-              '最低价' +
-              '：' +
+              "<br/>" +
+              "最低价" +
+              "：" +
               a[0].data[3] +
-              '<br/>' +
-              '最高价' +
-              '：' +
+              "<br/>" +
+              "最高价" +
+              "：" +
               a[0].data[4] +
-              '<br/>'
-            )
+              "<br/>"
+            );
           }
         },
-        trigger: 'axis',
+        trigger: "axis",
         axisPointer: {
           //坐标轴指示器配置项
-          type: 'cross' //‘line’直线指示器，‘cross’十字准星指示器，‘shadow’阴影指示器
+          type: "cross", //‘line’直线指示器，‘cross’十字准星指示器，‘shadow’阴影指示器
         },
-        backgroundColor: 'rgba(119, 120, 125, 0.6)', // 提示框浮层的边框颜色。
+        backgroundColor: "rgba(119, 120, 125, 0.6)", // 提示框浮层的边框颜色。
         borderWidth: 1, // 提示框浮层的边框宽。
-        borderColor: '#77787D', // 提示框浮层的边框颜色。
+        borderColor: "#77787D", // 提示框浮层的边框颜色。
         padding: 10, // 提示框浮层内边距，
         textStyle: {
           //提示框浮层上的文字样式
-          color: '#fff'
-        }
+          color: "#fff",
+        },
       },
       //  手放上去时拉的框
       axisPointer: {
         link: [
           {
-            xAxisIndex: 'all' // 同时触发所有图形的 x 坐标轴指示器
-          }
+            xAxisIndex: "all", // 同时触发所有图形的 x 坐标轴指示器
+          },
         ],
         label: {
-          backgroundColor: '#77787D' // 文本标签的背景颜色
-        }
+          backgroundColor: "#77787D", // 文本标签的背景颜色
+        },
       },
       toolbox: {
-        show: false
+        show: false,
       },
       grid: [
         {
           // left: window.innerWidth > 768 ? '8%' : '15%',
           // right: window.innerWidth > 768 ? '7%' : '2.5%',
-          height: window.innerWidth > 768 ? '40%' : '37%',
-          top: window.innerWidth > 768 ? '10%' : '12%',
-          containLabel: false
+          height: window.innerWidth > 768 ? "40%" : "37%",
+          top: window.innerWidth > 768 ? "10%" : "12%",
+          containLabel: false,
         },
         {
           // left: window.innerWidth > 768 ? '8%' : '15%',
           // right: window.innerWidth > 768 ? '7%' : '2.5%',
-          top: window.innerWidth > 768 ? '53%' : '52%',
-          height: window.innerWidth > 768 ? '40%' : '37%',
-          containLabel: false
-        }
+          top: window.innerWidth > 768 ? "53%" : "52%",
+          height: window.innerWidth > 768 ? "40%" : "37%",
+          containLabel: false,
+        },
       ],
       xAxis: [
         {
-          type: 'category',
+          type: "category",
           data: dealData.categoryData,
           boundaryGap: true, // 坐标轴两边是否留空，false表示不留空（通常用于K线图）
           axisLine: { onZero: false }, // 设置坐标轴是否通过零点，onZero:false表示不强制穿过零点
           splitLine: { show: false }, // 是否显示分隔线，false表示不显示
-          min: 'dataMin', // 坐标轴最小值，'dataMin'表示从数据的最小值开始
-          max: 'dataMax', // 坐标轴最大值，'dataMax'表示从数据的最大值开始
+          min: "dataMin", // 坐标轴最小值，'dataMin'表示从数据的最小值开始
+          max: "dataMax", // 坐标轴最大值，'dataMax'表示从数据的最大值开始
           axisPointer: {
-            z: 100 // 坐标轴指示器的层级，较大的值会让它显示在其他元素上方
+            z: 100, // 坐标轴指示器的层级，较大的值会让它显示在其他元素上方
           },
           axisLine: {
             lineStyle: {
-              color: 'black' // 坐标轴线的颜色
-            }
+              color: "black", // 坐标轴线的颜色
+            },
           }, //
           axisLabel: { show: false }, // 隐藏刻度标签
-          axisTick: { show: false } // 隐藏刻度线
+          axisTick: { show: false }, // 隐藏刻度线
         },
         {
-          type: 'category',
+          type: "category",
           gridIndex: 1,
           data: dealData.categoryData,
           boundaryGap: true,
           axisLine: {
-            show: false
+            show: false,
           },
-          axisTick: { show: false } // 隐藏刻度线 // 只保留一个 axisLine 定义
+          axisTick: { show: false }, // 隐藏刻度线 // 只保留一个 axisLine 定义
           // 对于第二个类别轴，通常也不需要设置 min 和 max
-        }
+        },
       ],
       // 控制纵坐标展示数据
       yAxis: [
@@ -2831,393 +3352,395 @@ function KlineCanvsEcharts(containerId) {
           gridIndex: 0,
           axisLabel: {
             show: true,
-            fontSize: window.innerWidth > 768 ? 15 : 10
+            fontSize: window.innerWidth > 768 ? 15 : 10,
           },
           axisLine: {
             lineStyle: {
-              fontSize: '',
-              color: 'black'
-            }
+              fontSize: "",
+              color: "black",
+            },
           },
           axisTick: { show: false },
-          splitLine: { show: false }
+          splitLine: { show: false },
         },
         {
           scale: true,
           gridIndex: 1,
           splitNumber: 2,
-          axisLabel: { show: true, fontSize: window.innerWidth > 768 ? 15 : 10 },
+          axisLabel: {
+            show: true,
+            fontSize: window.innerWidth > 768 ? 15 : 10,
+          },
           axisLine: {
             lineStyle: {
-              color: 'black'
-            }
+              color: "black",
+            },
           },
           axisTick: { show: false },
-          splitLine: { show: false }
-        }
+          splitLine: { show: false },
+        },
       ],
       // 下拉条
       dataZoom: [
         {
-          type: 'inside',
+          type: "inside",
           xAxisIndex: [0, 1],
           start: 55,
-          end: 100
+          end: 100,
         },
         {
           show: true,
           xAxisIndex: [0, 1],
-          type: 'slider',
-          top: window.innerWidth > 768 ? '92%' : '91%',
-          left: window.innerWidth > 768 ? '10%' : '8%',
+          type: "slider",
+          top: window.innerWidth > 768 ? "92%" : "91%",
+          left: window.innerWidth > 768 ? "10%" : "8%",
           start: 98,
-          end: 100
-        }
+          end: 100,
+        },
       ],
       visualMap: [
         {
-          type: 'piecewise',
+          type: "piecewise",
           show: false,
           pieces: maData.singleTypeGreen,
           outOfRange: {
-            color: 'green'
+            color: "green",
           },
           dimension: 0,
-          seriesIndex: 6
+          seriesIndex: 6,
         },
         {
-          type: 'piecewise',
+          type: "piecewise",
           show: false,
           pieces: maData.singleTypeRed,
           outOfRange: {
-            color: 'red'
+            color: "red",
           },
           dimension: 0,
-          seriesIndex: 7
+          seriesIndex: 7,
         },
         {
-          type: 'piecewise',
+          type: "piecewise",
           show: false,
           pieces: maData.singleTypeYellow,
           outOfRange: {
-            color: 'yellow'
+            color: "yellow",
           },
           dimension: 0,
-          seriesIndex: 8
-        }
+          seriesIndex: 8,
+        },
       ],
       series: [
         // 第一条K线
         {
-          name: '进攻K线',
-          type: 'candlestick',
+          name: "进攻K线",
+          type: "candlestick",
           data: dealData1.values,
           xAxisIndex: 0, // 使用第一个 X 轴
           yAxisIndex: 0, // 使用第一个 Y 轴
           itemStyle: {
             normal: {
-              color: 'rgb(255,0,0)', // 默认颜色
-              color0: 'rgb(255,0,0)',
-              borderColor: 'rgb(255,0,0)',
-              borderColor0: 'rgb(255,0,0)'
-            }
+              color: "rgb(255,0,0)", // 默认颜色
+              color0: "rgb(255,0,0)",
+              borderColor: "rgb(255,0,0)",
+              borderColor0: "rgb(255,0,0)",
+            },
           },
-          gridIndex: 0
+          gridIndex: 0,
         },
         //
         {
-          name: '推进K线',
-          type: 'candlestick',
+          name: "推进K线",
+          type: "candlestick",
           data: dealData2.values,
           xAxisIndex: 0, // 使用第一个 X 轴
           yAxisIndex: 0, // 使用第一个 Y 轴
           itemStyle: {
             normal: {
-              color: 'rgb(0,0,252)', // 默认颜色
-              color0: 'rgb(0,0,252)',
-              borderColor: 'rgb(0,0,252)',
-              borderColor0: 'rgb(0,0,252)'
-            }
+              color: "rgb(0,0,252)", // 默认颜色
+              color0: "rgb(0,0,252)",
+              borderColor: "rgb(0,0,252)",
+              borderColor0: "rgb(0,0,252)",
+            },
           },
-          gridIndex: 0
+          gridIndex: 0,
         },
         {
-          name: '防守K线',
-          type: 'candlestick',
+          name: "防守K线",
+          type: "candlestick",
           data: dealData3.values,
           xAxisIndex: 0, // 使用第一个 X 轴
           yAxisIndex: 0, // 使用第一个 Y 轴
           itemStyle: {
             normal: {
-              color: 'orange', // 默认颜色
-              color0: 'orange',
-              borderColor: 'orange',
-              borderColor0: 'orange'
-            }
+              color: "orange", // 默认颜色
+              color0: "orange",
+              borderColor: "orange",
+              borderColor0: "orange",
+            },
           },
-          gridIndex: 0
+          gridIndex: 0,
         },
         {
-          name: '撤退K线',
-          type: 'candlestick',
+          name: "撤退K线",
+          type: "candlestick",
           data: dealData4.values,
           xAxisIndex: 0, // 使用第一个 X 轴
           yAxisIndex: 0, // 使用第一个 Y 轴
           itemStyle: {
             normal: {
-              color: 'rgb(84,252,252)', // 默认颜色
-              color0: 'rgb(84,252,252)',
-              borderColor: 'rgb(84,252,252)',
-              borderColor0: 'rgb(84,252,252)'
-            }
+              color: "rgb(84,252,252)", // 默认颜色
+              color0: "rgb(84,252,252)",
+              borderColor: "rgb(84,252,252)",
+              borderColor0: "rgb(84,252,252)",
+            },
           },
-          gridIndex: 0
+          gridIndex: 0,
         },
         // 第二条K线
         {
-          type: 'candlestick',
-          name: '日K',
+          type: "candlestick",
+          name: "日K",
           xAxisIndex: 1, // 使用第二个 X 轴
           yAxisIndex: 1, // 使用第二个 Y 轴
           data: dealData.values,
           itemStyle: {
             normal: {
-              color0: 'red',
-              color: 'green',
-              borderColor0: 'red',
-              borderColor: 'green'
-            }
+              color0: "red",
+              color: "green",
+              borderColor0: "red",
+              borderColor: "green",
+            },
           },
-          gridIndex: 1
+          gridIndex: 1,
         },
         {
-          name: '{green|━}{red|━} ' + '牵牛绳', // 将牵牛绳样式应用到文本前缀
-          type: 'line',
+          name: "{green|━}{red|━} " + "牵牛绳", // 将牵牛绳样式应用到文本前缀
+          type: "line",
           data: [], // 设置为空数组，不显示数据点
           smooth: true,
-          symbol: 'none',
+          symbol: "none",
           xAxisIndex: 0, // 线图与第一个 K 线图共享 X 轴
           yAxisIndex: 0, // 线图与第一个 K 线图共享 Y 轴
           showSymbol: false, // 隐藏符号
           lineStyle: {
-            opacity: 0 // 使线条透明
+            opacity: 0, // 使线条透明
           },
           itemStyle: {
             normal: {
-              color: 'green'
-            }
+              color: "green",
+            },
           },
-          gridIndex: 0 // 确保线图与第一个K线图共享网格
+          gridIndex: 0, // 确保线图与第一个K线图共享网格
         },
         {
-          name: '虫线',
-          type: 'line',
+          name: "虫线",
+          type: "line",
           data: maData.greenData,
           smooth: true,
-          symbol: 'none',
+          symbol: "none",
           xAxisIndex: 0, // 线图与第一个 K 线图共享 X 轴
           yAxisIndex: 0, // 线图与第一个 K 线图共享 Y 轴
           itemStyle: {
             normal: {
-              color: 'green',
+              color: "green",
               lineStyle: {
                 // color: 'orange', // 线的颜色
                 width: 2, // 线宽
-                type: 'solid' // 线类型
-              }
-            }
+                type: "solid", // 线类型
+              },
+            },
           },
-          gridIndex: 0 // 确保线图与第一个K线图共享网格
+          gridIndex: 0, // 确保线图与第一个K线图共享网格
         },
         {
-          name: '龙线',
-          type: 'line',
+          name: "龙线",
+          type: "line",
           data: maData.redData,
           smooth: true,
-          symbol: 'none',
+          symbol: "none",
           xAxisIndex: 0, // 线图与第一个 K 线图共享 X 轴
           yAxisIndex: 0, // 线图与第一个 K 线图共享 Y 轴
           itemStyle: {
             normal: {
-              color: 'red',
+              color: "red",
               lineStyle: {
                 // color: 'orange', // 线的颜色
                 width: 2, // 线宽
-                type: 'solid' // 线类型
-              }
-            }
+                type: "solid", // 线类型
+              },
+            },
           },
-          gridIndex: 0 // 确保线图与第一个K线图共享网格
+          gridIndex: 0, // 确保线图与第一个K线图共享网格
         },
         {
-          name: '黄色',
-          type: 'line',
+          name: "黄色",
+          type: "line",
           data: maData.yellowData,
           smooth: true,
-          symbol: 'none',
+          symbol: "none",
           xAxisIndex: 0,
           yAxisIndex: 0,
           itemStyle: {
             normal: {
-              color: 'yellow',
+              color: "yellow",
               lineStyle: {
                 width: 2,
-                type: 'solid'
-              }
-            }
+                type: "solid",
+              },
+            },
           },
-          gridIndex: 0
-        }
-      ]
-    }
-
+          gridIndex: 0,
+        },
+      ],
+    };
   } else if (klineData.type === 5 || klineData.type === 7) {
-    console.log('进入第7分类')
+    console.log("进入第7分类");
 
-    const upColor = '#00da3c'
-    const downColor = '#ec0000'
+    const upColor = "#00da3c";
+    const downColor = "#ec0000";
     function calculateMA(index, data) {
-      let result = []
+      let result = [];
       if (data.FTLINE) {
         data.FTLINE.forEach((item) => {
-          result.push(item[index])
-        })
+          result.push(item[index]);
+        });
       }
-      return result
+      return result;
     }
-    var dealData = splitData(data.KLine20)
-    var bodongliang = splitData(data.WAVEVOL)
+    var dealData = splitData(data.KLine20);
+    var bodongliang = splitData(data.WAVEVOL);
     function bodongliangData(values, i) {
-      return values.map((subArray) => subArray[i])
+      return values.map((subArray) => subArray[i]);
     }
     KlineOption = {
       animation: false,
       legend: {
         textStyle: {
-          fontSize: window.innerWidth > 768 ? 15 : vwToPx(1.8)
+          fontSize: window.innerWidth > 768 ? 15 : vwToPx(1.8),
         },
-        left: 'center',
+        left: "center",
         data: [
           {
-            name: '天线'
+            name: "天线",
           },
           {
-            name: '飞线',
+            name: "飞线",
             itemStyle: {
-              color: '#000'
-            }
+              color: "#000",
+            },
           },
           {
-            name: '中线'
+            name: "中线",
           },
           {
-            name: '流线'
-          }
-        ]
+            name: "流线",
+          },
+        ],
       },
       tooltip: [
         {
-          trigger: 'axis',
+          trigger: "axis",
           formatter: function (a, b, d) {
             if (a[0].seriesIndex == 0) {
               return (
                 a[0].name +
-                '<br/>' +
-                '开盘价' +
-                ':' +
+                "<br/>" +
+                "开盘价" +
+                ":" +
                 a[0].data[1] +
-                '<br/>' +
-                '收盘价' +
-                ':' +
+                "<br/>" +
+                "收盘价" +
+                ":" +
                 a[0].data[2] +
-                '<br/>' +
-                '最低价' +
-                ':' +
+                "<br/>" +
+                "最低价" +
+                ":" +
                 a[0].data[3] +
-                '<br/>' +
-                '最高价' +
-                ':' +
+                "<br/>" +
+                "最高价" +
+                ":" +
                 a[0].data[4] +
-                '<br/>' +
+                "<br/>" +
                 a[3].marker +
                 a[3].seriesName +
-                '：' +
+                "：" +
                 a[3].value +
-                '<br/>' +
+                "<br/>" +
                 a[1].marker +
                 a[1].seriesName +
-                '：' +
+                "：" +
                 a[1].value +
-                '<br/>' +
+                "<br/>" +
                 a[2].marker +
                 a[2].seriesName +
-                '：' +
+                "：" +
                 a[2].value +
-                '<br/>' +
+                "<br/>" +
                 a[4].marker +
                 a[4].seriesName +
-                '：' +
+                "：" +
                 a[4].value
-              )
+              );
               // }else if(a[0].seriesIndex == 5){
               //     console.log(a[0].seriesIndex,'a[0].seriesIndex')
               //     return a[0].name+ "<br/>" + a[0].seriesName + "：" + a[0].value  + "<br/>" + a[1].seriesName + "：" + a[1].value + "<br/>" + a[2].seriesName + "：" + a[2].value + "<br/>" + a[3].seriesName + "：" + a[3].value + "<br/>" + a[4].seriesName + "：" + a[4].value + "<br/>" + a[5].seriesName + "：" + a[5].value
             } else {
               return (
                 a[0].name +
-                '<br/>' +
+                "<br/>" +
                 a[0].marker +
                 a[0].seriesName +
-                '：' +
+                "：" +
                 a[0].value +
-                '<br/>' +
+                "<br/>" +
                 a[1].marker +
                 a[1].seriesName +
-                '：' +
+                "：" +
                 a[1].value +
-                '<br/>' +
+                "<br/>" +
                 a[2].marker +
                 a[2].seriesName +
-                '：' +
+                "：" +
                 a[2].value +
-                '<br/>' +
+                "<br/>" +
                 a[3].marker +
                 a[3].seriesName +
-                '：' +
+                "：" +
                 a[3].value +
-                '<br/>' +
+                "<br/>" +
                 a[4].marker +
                 a[4].seriesName +
-                '：' +
+                "：" +
                 a[4].value +
-                '<br/>'
-              )
+                "<br/>"
+              );
             }
           },
           axisPointer: {
-            type: 'cross'
+            type: "cross",
           },
-          backgroundColor: '#fff',
+          backgroundColor: "#fff",
           borderWidth: 1,
-          borderColor: '#ccc',
+          borderColor: "#ccc",
           padding: 10,
           textStyle: {
-            color: '#000'
-          }
-        }
+            color: "#000",
+          },
+        },
       ],
       axisPointer: {
         link: [
           {
-            xAxisIndex: 'all'
-          }
+            xAxisIndex: "all",
+          },
         ],
         label: {
-          backgroundColor: '#777'
-        }
+          backgroundColor: "#777",
+        },
       },
       toolbox: {
-        show: false
+        show: false,
       },
 
       visualMap: {
@@ -3227,57 +3750,57 @@ function KlineCanvsEcharts(containerId) {
         pieces: [
           {
             value: 1,
-            color: downColor
+            color: downColor,
           },
           {
             value: -1,
-            color: upColor
-          }
-        ]
+            color: upColor,
+          },
+        ],
       },
       grid: [
         {
-          top: '8%',
+          top: "8%",
           // left: window.innerWidth > 768 ? '10%' : '17%',
-          right: '8%',
-          height: '40%',
-          containLabel: false
+          right: "8%",
+          height: "40%",
+          containLabel: false,
         },
         {
           // left: window.innerWidth > 768 ? '10%' : '17%',
-          right: '8%',
-          top: '10%',
-          height: '1%',
-          containLabel: false
+          right: "8%",
+          top: "10%",
+          height: "1%",
+          containLabel: false,
         },
         {
           // left: window.innerWidth > 768 ? '10%' : '17%',
-          right: '8%',
-          top: window.innerWidth > 768 ? '60%' : '63%',
-          height: '30%',
-          containLabel: false
-        }
+          right: "8%",
+          top: window.innerWidth > 768 ? "60%" : "63%",
+          height: "30%",
+          containLabel: false,
+        },
       ],
       xAxis: [
         {
-          type: 'category',
+          type: "category",
           data: dealData.categoryData,
           boundaryGap: true,
           axisLine: { onZero: false },
           splitLine: { show: false },
-          min: 'dataMin',
-          max: 'dataMax',
+          min: "dataMin",
+          max: "dataMax",
           axisPointer: {
-            z: 100
+            z: 100,
           },
           axisLine: {
             lineStyle: {
-              color: '#8392A5'
-            }
-          }
+              color: "#8392A5",
+            },
+          },
         },
         {
-          type: 'category',
+          type: "category",
           gridIndex: 1,
           data: [],
           boundaryGap: true,
@@ -3285,54 +3808,54 @@ function KlineCanvsEcharts(containerId) {
           axisTick: { show: false },
           splitLine: { show: false },
           axisLabel: { show: false },
-          min: 'dataMin',
-          max: 'dataMax',
-          show: false
+          min: "dataMin",
+          max: "dataMax",
+          show: false,
         },
         {
-          type: 'category',
+          type: "category",
           gridIndex: 2,
           data: dealData.categoryData,
           boundaryGap: true,
           axisLine: {
             onZero: true,
             lineStyle: {
-              color: '#8392A5'
-            }
+              color: "#8392A5",
+            },
           },
           axisTick: { show: false },
           splitLine: { show: false },
           axisLabel: { show: false },
-          min: 'dataMin',
-          max: 'dataMax'
-        }
+          min: "dataMin",
+          max: "dataMax",
+        },
       ],
       yAxis: [
         {
           scale: true,
           splitArea: {
-            show: false
+            show: false,
           },
           splitLine: {
-            show: !1
+            show: !1,
           },
           axisLine: {
             lineStyle: {
-              color: '#8392A5'
-            }
-          }
+              color: "#8392A5",
+            },
+          },
         },
         {
           scale: true,
           gridIndex: 1,
           splitNumber: 2,
-          min: '0',
-          max: '100',
+          min: "0",
+          max: "100",
           axisLabel: { show: false },
 
           axisLine: { show: false },
           axisTick: { show: false },
-          splitLine: { show: false }
+          splitLine: { show: false },
         },
         {
           scale: true,
@@ -3344,616 +3867,724 @@ function KlineCanvsEcharts(containerId) {
             show: true,
             onZero: false,
             lineStyle: {
-              color: '#8392A5'
-            }
+              color: "#8392A5",
+            },
           },
           axisTick: { show: true },
-          splitLine: { show: false }
-        }
+          splitLine: { show: false },
+        },
       ],
       dataZoom: [
         {
-          type: 'inside',
+          type: "inside",
           xAxisIndex: [0, 1, 2],
           start: 50,
           end: 100,
           textStyle: {
-            color: '#8392A5'
-          }
+            color: "#8392A5",
+          },
         },
         {
           show: true,
           xAxisIndex: [0, 1, 2],
-          type: 'slider',
-          top: '85%',
+          type: "slider",
+          top: "85%",
           start: 50,
           end: 100,
           textStyle: {
-            color: '#8392A5'
-          }
-        }
+            color: "#8392A5",
+          },
+        },
       ],
       series: [
         {
-          name: 'Dow-Jones index',
-          type: 'candlestick',
+          name: "Dow-Jones index",
+          type: "candlestick",
           data: dealData.values,
           itemStyle: {
             normal: {
-              color0: '#ec0000',
-              color: '#00da3c',
-              borderColor0: '#ec0000',
-              borderColor: '#00da3c'
-            }
-          }
+              color0: "#ec0000",
+              color: "#00da3c",
+              borderColor0: "#ec0000",
+              borderColor: "#00da3c",
+            },
+          },
         },
         {
-          name: '飞线',
-          type: 'line',
+          name: "飞线",
+          type: "line",
           data: calculateMA(1, data),
           smooth: true,
-          symbol: 'none',
+          symbol: "none",
           itemStyle: {
             normal: {
-              color: '#00a32e',
+              color: "#00a32e",
               lineStyle: {
-                color: '#00a32e',
+                color: "#00a32e",
                 width: 2,
-                type: 'solid'
-              }
-            }
-          }
+                type: "solid",
+              },
+            },
+          },
         },
         {
-          name: '中线',
-          type: 'line',
+          name: "中线",
+          type: "line",
           data: calculateMA(2, data),
           smooth: true,
-          symbol: 'none',
+          symbol: "none",
           itemStyle: {
             normal: {
-              color: '#de0000',
+              color: "#de0000",
               lineStyle: {
-                color: '#de0000',
+                color: "#de0000",
                 width: 2,
-                type: 'solid'
-              }
-            }
-          }
+                type: "solid",
+              },
+            },
+          },
         },
         {
-          name: '天线',
-          type: 'line',
+          name: "天线",
+          type: "line",
           data: calculateMA(3, data),
           smooth: true,
-          symbol: 'none',
+          symbol: "none",
           itemStyle: {
             normal: {
-              color: '#ffb300',
+              color: "#ffb300",
               lineStyle: {
-                color: '#ffb300',
+                color: "#ffb300",
                 width: 2,
-                type: 'solid'
-              }
-            }
-          }
+                type: "solid",
+              },
+            },
+          },
         },
         {
-          name: '流线',
-          type: 'line',
+          name: "流线",
+          type: "line",
           data: calculateMA(4, data),
           smooth: true,
-          symbol: 'none',
+          symbol: "none",
           itemStyle: {
             normal: {
-              color: '#00c8ff',
+              color: "#00c8ff",
               lineStyle: {
-                color: '#00c8ff',
+                color: "#00c8ff",
                 width: 2,
-                type: 'solid'
-              }
-            }
-          }
+                type: "solid",
+              },
+            },
+          },
         },
         {
-          name: '买盘',
+          name: "买盘",
           data: bodongliangData(bodongliang.values, 1),
           xAxisIndex: 2,
           yAxisIndex: 2,
-          type: 'bar',
-          stack: '1',
+          type: "bar",
+          stack: "1",
           itemStyle: {
             normal: {
-              color: '#ec0000'
-            }
-          }
+              color: "#ec0000",
+            },
+          },
         },
         {
-          name: '卖盘',
+          name: "卖盘",
           data: bodongliangData(bodongliang.values, 0),
           xAxisIndex: 2,
           yAxisIndex: 2,
-          type: 'bar',
-          stack: '1',
+          type: "bar",
+          stack: "1",
           itemStyle: {
             normal: {
-              color: '#00ffff'
-            }
-          }
+              color: "#00ffff",
+            },
+          },
         },
 
         {
-          name: 'CJ',
+          name: "CJ",
           data: bodongliangData(bodongliang.values, 2),
           xAxisIndex: 2,
           yAxisIndex: 2,
-          type: 'line',
+          type: "line",
           smooth: !0,
           showSymbol: false,
           itemStyle: {
             normal: {
-              color: '#B0B0B0'
-            }
+              color: "#B0B0B0",
+            },
           },
           lineStyle: {
-            width: 2
-          }
+            width: 2,
+          },
         },
         {
-          name: 'CD',
+          name: "CD",
           data: bodongliangData(bodongliang.values, 3),
           xAxisIndex: 2,
           yAxisIndex: 2,
-          type: 'line',
+          type: "line",
           smooth: !0,
           showSymbol: false,
           itemStyle: {
             normal: {
-              color: '#ffb300'
-            }
+              color: "#ffb300",
+            },
           },
           lineStyle: {
-            width: 2
-          }
+            width: 2,
+          },
         },
         {
-          name: 'CK',
+          name: "CK",
           data: bodongliangData(bodongliang.values, 4),
           xAxisIndex: 2,
           yAxisIndex: 2,
-          type: 'line',
+          type: "line",
           smooth: !0,
           showSymbol: false,
           itemStyle: {
             normal: {
-              color: '#ff00ff'
-            }
+              color: "#ff00ff",
+            },
           },
           lineStyle: {
-            width: 2
-          }
-        }
-      ]
-    }
-
+            width: 2,
+          },
+        },
+      ],
+    };
   } else if (klineData.type === 6) {
-    console.log('进入第6分类')
+    console.log("进入第6分类");
 
-    var bodongliang = splitData(data.WAVEVOL)
+    var bodongliang = splitData(data.WAVEVOL);
     function bodongliangData(values, i) {
-      return values.map((subArray) => subArray[i])
+      return values.map((subArray) => subArray[i]);
     }
     function calculateMA(index, data) {
-      let result = []
+      let result = [];
       if (data.FTLINE) {
         data.FTLINE.forEach((item) => {
-          result.push(item[index])
-        })
+          result.push(item[index]);
+        });
       }
-      return result
+      return result;
     }
     function vwToPx(vw) {
-      return (window.innerWidth * vw) / 100
+      return (window.innerWidth * vw) / 100;
     }
-    const arr1 = []
-    const arr2 = []
-    const arr3 = []
-    const arr4 = []
+    const arr1 = [];
+    const arr2 = [];
+    const arr3 = [];
+    const arr4 = [];
     const changeColorKline = (QSXH, KLine20) => {
       if (QSXH) {
         QSXH.map((item) => {
           KLine20.map((kline_item) => {
             if (item[1] == 1 && item[0] == kline_item[0]) {
-              arr1.push(kline_item)
-              arr2.push([kline_item[0], null, null, null, null, null, null, null])
-              arr3.push([kline_item[0], null, null, null, null, null, null, null])
-              arr4.push([kline_item[0], null, null, null, null, null, null, null])
+              arr1.push(kline_item);
+              arr2.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr3.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr4.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
             }
             if (item[1] == 2 && item[0] == kline_item[0]) {
-              arr2.push(kline_item)
-              arr1.push([kline_item[0], null, null, null, null, null, null, null])
-              arr3.push([kline_item[0], null, null, null, null, null, null, null])
-              arr4.push([kline_item[0], null, null, null, null, null, null, null])
+              arr2.push(kline_item);
+              arr1.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr3.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr4.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
             }
             if (item[1] == 3 && item[0] == kline_item[0]) {
-              arr3.push(kline_item)
-              arr2.push([kline_item[0], null, null, null, null, null, null, null])
-              arr1.push([kline_item[0], null, null, null, null, null, null, null])
-              arr4.push([kline_item[0], null, null, null, null, null, null, null])
+              arr3.push(kline_item);
+              arr2.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr1.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr4.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
             }
             if (item[1] == 4 && item[0] == kline_item[0]) {
-              arr4.push(kline_item)
-              arr2.push([kline_item[0], null, null, null, null, null, null, null])
-              arr3.push([kline_item[0], null, null, null, null, null, null, null])
-              arr1.push([kline_item[0], null, null, null, null, null, null, null])
+              arr4.push(kline_item);
+              arr2.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr3.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr1.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
             }
-          })
-        })
+          });
+        });
       }
-    }
-    changeColorKline(data.QSXH, data.KLine20)
-    var dealData = splitData(data.KLine20)
-    var dealData1 = splitData(arr1)
-    var dealData2 = splitData(arr2)
-    var dealData3 = splitData(arr3)
-    var dealData4 = splitData(arr4)
-    var dealGnBullData = data.JN
+    };
+    changeColorKline(data.QSXH, data.KLine20);
+    var dealData = splitData(data.KLine20);
+    var dealData1 = splitData(arr1);
+    var dealData2 = splitData(arr2);
+    var dealData3 = splitData(arr3);
+    var dealData4 = splitData(arr4);
+    var dealGnBullData = data.JN;
     const processBarData = (data) => {
-      const barData = []
-      const markPointData = []
+      const barData = [];
+      const markPointData = [];
       data.forEach((item) => {
-        let color
+        let color;
         switch (item[4]) {
           case 1:
-            color = '#13E113'
-            break
+            color = "#13E113";
+            break;
           case 2:
-            color = '#FF0E00'
-            break
+            color = "#FF0E00";
+            break;
           case 3:
-            color = '#0000FE'
-            break
+            color = "#0000FE";
+            break;
           case 4:
-            color = '#1397FF'
-            break
+            color = "#1397FF";
+            break;
         }
         barData.push({
           value: item[5],
           itemStyle: {
             normal: {
-              color: color
-            }
-          }
-        })
+              color: color,
+            },
+          },
+        });
         if (item[1] === 1) {
           markPointData.push({
             coord: [item[0], item[5]],
             symbol:
-              'image://https://d31zlh4on95l9h.cloudfront.net/images/5iujb101000d5si3v3hr7w2vg0h43z1u.png',
+              "image://https://d31zlh4on95l9h.cloudfront.net/images/5iujb101000d5si3v3hr7w2vg0h43z1u.png",
             symbolSize: [30, 30],
             label: {
               normal: {
-                color: 'rgba(0, 0, 0, 0)'
-              }
-            }
-          })
+                color: "rgba(0, 0, 0, 0)",
+              },
+            },
+          });
         }
         if (item[2] === 1) {
           markPointData.push({
             coord: [item[0], item[5] / 2],
             symbol:
-              'image://https://d31zlh4on95l9h.cloudfront.net/images/5iujaz01000d5si016bxdf6vh0377d2h.png',
+              "image://https://d31zlh4on95l9h.cloudfront.net/images/5iujaz01000d5si016bxdf6vh0377d2h.png",
             symbolSize: [30, 30],
             label: {
               normal: {
-                color: 'rgba(0, 0, 0, 0)'
-              }
-            }
-          })
+                color: "rgba(0, 0, 0, 0)",
+              },
+            },
+          });
         }
         if (item[3] === 1) {
           markPointData.push({
             coord: [item[0], 0],
             symbol:
-              'image://https://d31zlh4on95l9h.cloudfront.net/images/5iujb001000d5shzls0tmd4vs0e5tdrw.png',
+              "image://https://d31zlh4on95l9h.cloudfront.net/images/5iujb001000d5shzls0tmd4vs0e5tdrw.png",
             symbolSize: [30, 30],
             label: {
               normal: {
-                color: 'rgba(0, 0, 0, 0)'
-              }
-            }
-          })
+                color: "rgba(0, 0, 0, 0)",
+              },
+            },
+          });
         }
-      })
-      return { barData, markPointData }
-    }
-    const { barData, markPointData } = processBarData(dealGnBullData)
+      });
+      return { barData, markPointData };
+    };
+    const { barData, markPointData } = processBarData(dealGnBullData);
     KlineOption = {
       legend: [
         {
           textStyle: {
-            color: 'black',
-            fontSize: window.innerWidth > 768 ? 15 : vwToPx(1.8)
+            color: "black",
+            fontSize: window.innerWidth > 768 ? 15 : vwToPx(1.8),
           },
-          width: '100%',
+          width: "100%",
           // top: ,
-          left: 'center',
+          left: "center",
           itemGap: window.innerWidth > 768 ? 20 : 10,
           itemWidth: 10,
           itemHeight: 10,
           data: [
             {
-              name: '进攻K线',
+              name: "进攻K线",
               itemStyle: {
-                color: 'rgb(255,0,0)'
-              }
+                color: "rgb(255,0,0)",
+              },
             },
             {
-              name: '防守K线',
+              name: "防守K线",
               itemStyle: {
-                color: 'red'
-              }
+                color: "red",
+              },
             },
             {
-              name: '推进K线',
+              name: "推进K线",
               itemStyle: {
-                color: 'orange'
-              }
+                color: "orange",
+              },
             },
             {
-              name: '撤退K线',
+              name: "撤退K线",
               itemStyle: {
-                color: 'rgb(84,252,252)'
-              }
-            }
-          ]
+                color: "rgb(84,252,252)",
+              },
+            },
+          ],
         },
         {
           textStyle: {
-            color: 'black',
-            fontSize: window.innerWidth > 768 ? 15 : vwToPx(2.8)
+            color: "black",
+            fontSize: window.innerWidth > 768 ? 15 : vwToPx(2.8),
           },
-          width: '100%',
-          top: '5%',
-          left: 'center',
+          width: "100%",
+          top: "5%",
+          left: "center",
           itemGap: window.innerWidth > 768 ? 20 : 10,
           itemWidth: 10,
           itemHeight: 10,
           data: [
             {
-              name: '天线'
+              name: "天线",
             },
             {
-              name: '飞线',
+              name: "飞线",
               itemStyle: {
-                color: '#fff'
-              }
+                color: "#fff",
+              },
             },
             {
-              name: '中线'
+              name: "中线",
             },
             {
-              name: '流线'
-            }
-          ]
+              name: "流线",
+            },
+          ],
         },
         {
           textStyle: {
-            color: 'black',
-            fontSize: window.innerWidth > 768 ? 15 : vwToPx(2.8)
+            color: "black",
+            fontSize: window.innerWidth > 768 ? 15 : vwToPx(2.8),
           },
-          orient: 'horizontal',
-          top: window.innerWidth > 768 ? '8%' : '8%',
-          width: '100%',
-          left: 'center',
+          orient: "horizontal",
+          top: window.innerWidth > 768 ? "8%" : "8%",
+          width: "100%",
+          left: "center",
           itemGap: 15,
           data: [
             {
-              name: '龙线'
+              name: "龙线",
             },
             {
-              name: '虫线'
-            }
-          ]
-        }
+              name: "虫线",
+            },
+          ],
+        },
       ],
       tooltip: {
         formatter: function (a, b, d) {
           if (a[0].seriesIndex == 0) {
-            const KlineTag = ref([])
-            const AIBullTag = ref([])
-            KlineTag.value = a.find((item) => item.data[1])?.data || []
-            AIBullTag.value = a.slice(4).find((item) => item.data[1] !== '-')?.data || []
+            const KlineTag = ref([]);
+            const AIBullTag = ref([]);
+            KlineTag.value = a.find((item) => item.data[1])?.data || [];
+            AIBullTag.value =
+              a.slice(4).find((item) => item.data[1] !== "-")?.data || [];
             return (
               a[0].name +
-              '<br/>' +
-              '开盘价' +
-              '：' +
+              "<br/>" +
+              "开盘价" +
+              "：" +
               KlineTag.value[1] +
-              '<br/>' +
-              '收盘价' +
-              '：' +
+              "<br/>" +
+              "收盘价" +
+              "：" +
               KlineTag.value[2] +
-              '<br/>' +
-              '最低价' +
-              '：' +
+              "<br/>" +
+              "最低价" +
+              "：" +
               KlineTag.value[3] +
-              '<br/>' +
-              '最高价' +
-              '：' +
+              "<br/>" +
+              "最高价" +
+              "：" +
               KlineTag.value[4] +
-              '<br/>' +
+              "<br/>" +
               a[4].seriesName +
-              '：' +
+              "：" +
               a[4].value +
-              '<br/>' +
+              "<br/>" +
               a[5].seriesName +
-              '：' +
+              "：" +
               a[5].value +
-              '<br/>' +
+              "<br/>" +
               a[6].seriesName +
-              '：' +
+              "：" +
               a[6].value +
-              '<br/>' +
+              "<br/>" +
               a[7].seriesName +
-              '：' +
+              "：" +
               a[7].value
-            )
+            );
           }
           if (a[0].seriesIndex == 4) {
-            let formattedVolume
+            let formattedVolume;
             if (a[0].data.value >= 10000) {
-              formattedVolume = (a[0].data.value / 10000).toFixed(2) + 'w'
+              formattedVolume = (a[0].data.value / 10000).toFixed(2) + "w";
             } else {
-              formattedVolume = a[0].data.value
+              formattedVolume = a[0].data.value;
             }
-            return a[0].name + '<br/>' + '成交量' + '：' + formattedVolume
+            return a[0].name + "<br/>" + "成交量" + "：" + formattedVolume;
           }
           if (a[0].seriesIndex == 9) {
             return (
               a[0].name +
-              '<br/>' +
+              "<br/>" +
               a[0].marker +
               a[0].seriesName +
-              '：' +
+              "：" +
               a[0].value +
-              '<br/>' +
+              "<br/>" +
               a[1].marker +
               a[1].seriesName +
-              '：' +
+              "：" +
               a[1].value +
-              '<br/>' +
+              "<br/>" +
               a[2].marker +
               a[2].seriesName +
-              '：' +
+              "：" +
               a[2].value +
-              '<br/>' +
+              "<br/>" +
               a[3].marker +
               a[3].seriesName +
-              '：' +
+              "：" +
               a[3].value +
-              '<br/>' +
+              "<br/>" +
               a[4].marker +
               a[4].seriesName +
-              '：' +
+              "：" +
               a[4].value +
-              '<br/>'
-            )
+              "<br/>"
+            );
           }
         },
-        trigger: 'axis',
+        trigger: "axis",
         axisPointer: {
-          type: 'cross'
+          type: "cross",
         },
-        backgroundColor: 'rgba(119, 120, 125, 0.6)',
+        backgroundColor: "rgba(119, 120, 125, 0.6)",
         borderWidth: 1,
-        borderColor: '#77787D',
+        borderColor: "#77787D",
         padding: 10,
         textStyle: {
-          color: '#fff'
-        }
+          color: "#fff",
+        },
       },
       axisPointer: {
         link: [
           {
-            xAxisIndex: 'all'
-          }
+            xAxisIndex: "all",
+          },
         ],
         label: {
-          backgroundColor: '#77787D'
-        }
+          backgroundColor: "#77787D",
+        },
       },
       toolbox: {
-        show: false
+        show: false,
       },
       grid: [
         {
-          left: window.innerWidth > 768 ? '14%' : '15%',
-          right: window.innerWidth > 768 ? '4%' : '5%',
-          top: window.innerWidth > 768 ? '10%' : '12%',
-          height: window.innerWidth > 768 ? '36%' : '34%',
-          containLabel: false
+          left: window.innerWidth > 768 ? "14%" : "15%",
+          right: window.innerWidth > 768 ? "4%" : "5%",
+          top: window.innerWidth > 768 ? "10%" : "12%",
+          height: window.innerWidth > 768 ? "36%" : "34%",
+          containLabel: false,
         },
         {
-          left: window.innerWidth > 768 ? '14%' : '15%',
-          right: window.innerWidth > 768 ? '4%' : '5%',
-          top: window.innerWidth > 768 ? '50%' : '50%',
-          height: window.innerWidth > 768 ? '20%' : '22%',
-          containLabel: false
+          left: window.innerWidth > 768 ? "14%" : "15%",
+          right: window.innerWidth > 768 ? "4%" : "5%",
+          top: window.innerWidth > 768 ? "50%" : "50%",
+          height: window.innerWidth > 768 ? "20%" : "22%",
+          containLabel: false,
         },
         {
-          left: window.innerWidth > 768 ? '14%' : '15%',
-          right: window.innerWidth > 768 ? '4%' : '5%',
-          top: window.innerWidth > 768 ? '74%' : '75%',
-          height: window.innerWidth > 768 ? '20%' : '20%',
-          containLabel: false
-        }
+          left: window.innerWidth > 768 ? "14%" : "15%",
+          right: window.innerWidth > 768 ? "4%" : "5%",
+          top: window.innerWidth > 768 ? "74%" : "75%",
+          height: window.innerWidth > 768 ? "20%" : "20%",
+          containLabel: false,
+        },
       ],
       xAxis: [
         {
-          type: 'category',
+          type: "category",
           data: dealData.categoryData,
           boundaryGap: true,
           axisLine: { onZero: false },
           splitLine: { show: false },
-          min: 'dataMin',
-          max: 'dataMax',
+          min: "dataMin",
+          max: "dataMax",
           axisPointer: {
-            z: 100
+            z: 100,
           },
           axisLine: {
             lineStyle: {
-              color: 'black'
-            }
+              color: "black",
+            },
           }, //
           axisLabel: { show: false },
-          axisTick: { show: false }
+          axisTick: { show: false },
         },
         {
-          type: 'category',
+          type: "category",
           gridIndex: 1,
           data: dealData.categoryData,
           boundaryGap: true,
-          axisLine: { lineStyle: { color: 'black' } },
+          axisLine: { lineStyle: { color: "black" } },
           axisLabel: {
             show: false,
             // fontSize: window.innerWidth > 768 ? 10 : 8,
-            interval: 'auto'
+            interval: "auto",
           },
-          axisTick: { show: false }
+          axisTick: { show: false },
         },
         {
-          type: 'category',
+          type: "category",
           gridIndex: 2,
           data: dealData.categoryData,
           boundaryGap: true,
-          axisLine: { lineStyle: { color: 'black' } },
+          axisLine: { lineStyle: { color: "black" } },
           axisLabel: {
             show: true,
-            interval: 'auto'
+            interval: "auto",
           },
-          axisTick: { show: false }
-        }
+          axisTick: { show: false },
+        },
       ],
       yAxis: [
         {
           scale: true,
           gridIndex: 0,
-          position: 'left',
+          position: "left",
           axisLabel: {
             inside: false,
-            align: 'right',
-            fontSize: window.innerWidth > 768 ? 15 : 10
+            align: "right",
+            fontSize: window.innerWidth > 768 ? 15 : 10,
           },
           axisLine: {
             show: true,
             lineStyle: {
-              fontSize: '',
-              color: 'black'
-            }
+              fontSize: "",
+              color: "black",
+            },
           },
           axisTick: { show: false },
-          splitLine: { show: false }
+          splitLine: { show: false },
         },
         {
           scale: true,
@@ -3967,19 +4598,19 @@ function KlineCanvsEcharts(containerId) {
             margin: 8,
             formatter: (value) => {
               if (value >= 1000000000) {
-                return (value / 1000000000).toFixed(1) + 'B'
+                return (value / 1000000000).toFixed(1) + "B";
               } else if (value >= 1000000) {
-                return (value / 1000000).toFixed(1) + 'M'
+                return (value / 1000000).toFixed(1) + "M";
               } else if (value >= 10000) {
-                return (value / 10000).toFixed(1) + 'W'
+                return (value / 10000).toFixed(1) + "W";
               }
-              return value.toFixed(0)
-            }
+              return value.toFixed(0);
+            },
           },
-          axisLine: { show: true, lineStyle: { color: 'black' } },
+          axisLine: { show: true, lineStyle: { color: "black" } },
           axisTick: { show: false },
-          splitLine: { show: true, lineStyle: { type: 'dashed' } },
-          boundaryGap: ['20%', '20%']
+          splitLine: { show: true, lineStyle: { type: "dashed" } },
+          boundaryGap: ["20%", "20%"],
         },
         {
           scale: true,
@@ -3987,273 +4618,272 @@ function KlineCanvsEcharts(containerId) {
           splitNumber: 2,
           axisLabel: {
             show: true,
-            fontSize: window.innerWidth > 768 ? 15 : 10
+            fontSize: window.innerWidth > 768 ? 15 : 10,
           },
-          axisLine: { show: true, lineStyle: { color: 'black' } },
+          axisLine: { show: true, lineStyle: { color: "black" } },
           axisTick: { show: false },
-          splitLine: { show: false }
-        }
+          splitLine: { show: false },
+        },
       ],
       dataZoom: [
         {
-          type: 'inside',
+          type: "inside",
           xAxisIndex: [0, 1, 2],
           start: 55,
-          end: 100
+          end: 100,
         },
         {
           show: true,
           xAxisIndex: [0, 1, 2],
-          type: 'slider',
-          top: window.innerWidth > 768 ? '95%' : '95%',
-          left: window.innerWidth > 768 ? '14%' : '14%',
+          type: "slider",
+          top: window.innerWidth > 768 ? "95%" : "95%",
+          left: window.innerWidth > 768 ? "14%" : "14%",
           start: 98,
-          end: 100
-        }
+          end: 100,
+        },
       ],
       series: [
         {
-          name: '进攻K线',
-          type: 'candlestick',
-          barWidth: '50%',
+          name: "进攻K线",
+          type: "candlestick",
+          barWidth: "50%",
           data: dealData1.values,
           xAxisIndex: 0,
           yAxisIndex: 0,
           itemStyle: {
             normal: {
-              color: 'rgb(255,0,0)',
-              color0: 'rgb(255,0,0)',
-              borderColor: 'rgb(255,0,0)',
-              borderColor0: 'rgb(255,0,0)'
-            }
+              color: "rgb(255,0,0)",
+              color0: "rgb(255,0,0)",
+              borderColor: "rgb(255,0,0)",
+              borderColor0: "rgb(255,0,0)",
+            },
           },
-          gridIndex: 0
+          gridIndex: 0,
         },
         //
         {
-          name: '推进K线',
-          type: 'candlestick',
-          barWidth: '50%',
+          name: "推进K线",
+          type: "candlestick",
+          barWidth: "50%",
           data: dealData2.values,
           // markPoint: { data: dealMarkPointData },
           xAxisIndex: 0,
           yAxisIndex: 0,
           itemStyle: {
             normal: {
-              color: 'rgb(0,0,252)',
-              color0: 'rgb(0,0,252)',
-              borderColor: 'rgb(0,0,252)',
-              borderColor0: 'rgb(0,0,252)'
-            }
+              color: "rgb(0,0,252)",
+              color0: "rgb(0,0,252)",
+              borderColor: "rgb(0,0,252)",
+              borderColor0: "rgb(0,0,252)",
+            },
           },
-          gridIndex: 0
+          gridIndex: 0,
         },
         {
-          name: '防守K线',
-          type: 'candlestick',
-          barWidth: '50%',
+          name: "防守K线",
+          type: "candlestick",
+          barWidth: "50%",
           data: dealData3.values,
           xAxisIndex: 0,
           yAxisIndex: 0,
           itemStyle: {
             normal: {
-              color: 'orange',
-              color0: 'orange',
-              borderColor: 'orange',
-              borderColor0: 'orange'
-            }
+              color: "orange",
+              color0: "orange",
+              borderColor: "orange",
+              borderColor0: "orange",
+            },
           },
-          gridIndex: 0
+          gridIndex: 0,
         },
         {
-          name: '撤退K线',
-          type: 'candlestick',
-          barWidth: '50%',
+          name: "撤退K线",
+          type: "candlestick",
+          barWidth: "50%",
           data: dealData4.values,
           xAxisIndex: 0,
           yAxisIndex: 0,
           itemStyle: {
             normal: {
-              color: 'rgb(84,252,252)',
-              color0: 'rgb(84,252,252)',
-              borderColor: 'rgb(84,252,252)',
-              borderColor0: 'rgb(84,252,252)'
-            }
+              color: "rgb(84,252,252)",
+              color0: "rgb(84,252,252)",
+              borderColor: "rgb(84,252,252)",
+              borderColor0: "rgb(84,252,252)",
+            },
           },
-          gridIndex: 0
+          gridIndex: 0,
         },
         {
-          name: '成交量',
-          type: 'bar',
-          barWidth: '70%',
+          name: "成交量",
+          type: "bar",
+          barWidth: "70%",
           xAxisIndex: 1,
           yAxisIndex: 1,
           data: barData,
           markPoint: {
             data: markPointData,
             label: {
-              show: false
-            }
-          }
+              show: false,
+            },
+          },
         },
         {
-          name: '飞线',
-          type: 'line',
+          name: "飞线",
+          type: "line",
           data: calculateMA(1, data),
           smooth: true,
-          symbol: 'none',
+          symbol: "none",
           itemStyle: {
             normal: {
-              color: '#00a32e',
+              color: "#00a32e",
               lineStyle: {
-                color: '#00a32e',
+                color: "#00a32e",
                 width: 2,
-                type: 'solid'
-              }
-            }
-          }
+                type: "solid",
+              },
+            },
+          },
         },
         {
-          name: '中线',
-          type: 'line',
+          name: "中线",
+          type: "line",
           data: calculateMA(2, data),
           smooth: true,
-          symbol: 'none',
+          symbol: "none",
           itemStyle: {
             normal: {
-              color: '#de0000',
+              color: "#de0000",
               lineStyle: {
-                color: '#de0000',
+                color: "#de0000",
                 width: 2,
-                type: 'solid'
-              }
-            }
-          }
+                type: "solid",
+              },
+            },
+          },
         },
         {
-          name: '天线',
-          type: 'line',
+          name: "天线",
+          type: "line",
           data: calculateMA(3, data),
           smooth: true,
-          symbol: 'none',
+          symbol: "none",
           itemStyle: {
             normal: {
-              color: '#ffb300',
+              color: "#ffb300",
               lineStyle: {
-                color: '#ffb300',
+                color: "#ffb300",
                 width: 2,
-                type: 'solid'
-              }
-            }
-          }
+                type: "solid",
+              },
+            },
+          },
         },
         {
-          name: '流线',
-          type: 'line',
+          name: "流线",
+          type: "line",
           data: calculateMA(4, data),
           smooth: true,
-          symbol: 'none',
+          symbol: "none",
           itemStyle: {
             normal: {
-              color: '#00c8ff',
+              color: "#00c8ff",
               lineStyle: {
-                color: '#00c8ff',
+                color: "#00c8ff",
                 width: 2,
-                type: 'solid'
-              }
-            }
-          }
+                type: "solid",
+              },
+            },
+          },
         },
         {
-          name: '买盘',
+          name: "买盘",
           data: bodongliangData(bodongliang.values, 1),
-          barWidth: '70%',
+          barWidth: "70%",
           xAxisIndex: 2,
           yAxisIndex: 2,
-          type: 'bar',
-          stack: '1',
+          type: "bar",
+          stack: "1",
           itemStyle: {
             normal: {
-              color: '#ec0000'
-            }
-          }
+              color: "#ec0000",
+            },
+          },
         },
         {
-          name: '卖盘',
+          name: "卖盘",
           data: bodongliangData(bodongliang.values, 0),
-          barWidth: '70%',
+          barWidth: "70%",
           xAxisIndex: 2,
           yAxisIndex: 2,
-          type: 'bar',
-          stack: '1',
+          type: "bar",
+          stack: "1",
           itemStyle: {
             normal: {
-              color: '#00ffff'
-            }
-          }
+              color: "#00ffff",
+            },
+          },
         },
         {
-          name: 'CJ',
+          name: "CJ",
           data: bodongliangData(bodongliang.values, 2),
           xAxisIndex: 2,
           yAxisIndex: 2,
-          type: 'line',
+          type: "line",
           smooth: !0,
           showSymbol: false,
           itemStyle: {
             normal: {
-              color: '#000'
-            }
+              color: "#000",
+            },
           },
           lineStyle: {
-            width: 2
-          }
+            width: 2,
+          },
         },
         {
-          name: 'CD',
+          name: "CD",
           data: bodongliangData(bodongliang.values, 3),
           xAxisIndex: 2,
           yAxisIndex: 2,
-          type: 'line',
+          type: "line",
           smooth: !0,
           showSymbol: false,
           itemStyle: {
             normal: {
-              color: '#ffb300'
-            }
+              color: "#ffb300",
+            },
           },
           lineStyle: {
-            width: 2
-          }
+            width: 2,
+          },
         },
         {
-          name: 'CK',
+          name: "CK",
           data: bodongliangData(bodongliang.values, 4),
           xAxisIndex: 2,
           yAxisIndex: 2,
-          type: 'line',
+          type: "line",
           smooth: !0,
           showSymbol: false,
           itemStyle: {
             normal: {
-              color: '#ff00ff'
-            }
+              color: "#ff00ff",
+            },
           },
           lineStyle: {
-            width: 2
-          }
-        }
-      ]
+            width: 2,
+          },
+        },
+      ],
       // graphic: {
       // 	markPointData : generateGraphicmarkPointData(data11111)
       // }
-    }
-
+    };
   } else {
-    console.log('其他分类')
+    console.log("其他分类");
 
-    var dealData = splitData(data.KLine20)
-    console.log('dealData', dealData)
+    var dealData = splitData(data.KLine20);
+    console.log("dealData", dealData);
 
     KlineOption = {
       title: {
@@ -4261,162 +4891,161 @@ function KlineCanvsEcharts(containerId) {
         left: 50,
       },
       tooltip: {
-        trigger: 'axis',
+        trigger: "axis",
         formatter: function (a, b, d) {
           let def =
             a[0].name +
-            '<br/>' +
-            '开盘价' +
+            "<br/>" +
+            "开盘价" +
             a[0].data[1] +
-            '<br/>' +
-            '收盘价' +
+            "<br/>" +
+            "收盘价" +
             a[0].data[2] +
-            '<br/>' +
-            '最低价' +
+            "<br/>" +
+            "最低价" +
             a[0].data[3] +
-            '<br/>' +
-            '最高价' +
+            "<br/>" +
+            "最高价" +
             a[0].data[4];
 
           if (a[1] && a[1].seriesName) {
-            def += '<br/>' + a[1].seriesName + ':' + a[1].value;
+            def += "<br/>" + a[1].seriesName + ":" + a[1].value;
           }
           return def;
         },
         axisPointer: {
           animation: false,
-          type: 'line',
+          type: "line",
           lineStyle: {
-            color: '#376df4',
+            color: "#376df4",
             width: 2,
-            opacity: 1
-          }
+            opacity: 1,
+          },
         },
-        confine: true // 确保提示框不超出画布
+        confine: true, // 确保提示框不超出画布
       },
       //控制坐标轴
       grid: {
-        left: '12%',
-        right: '10%',
-        bottom: '10%',
-        top: '18%'
+        left: "12%",
+        right: "10%",
+        bottom: "10%",
+        top: "18%",
       },
       xAxis: {
-        type: 'category',
+        type: "category",
         data: dealData.categoryData,
-        axisLine: { lineStyle: { color: '#8392A5' } }
+        axisLine: { lineStyle: { color: "#8392A5" } },
       },
       yAxis: {
         scale: !0, //true
         // 自定义纵坐标现实的数据
         axisLabel: {
           formatter: function (value) {
-            return value // 返回原始值
-          }
+            return value; // 返回原始值
+          },
         },
-        axisLine: { lineStyle: { color: '#8392A5' } },
+        axisLine: { lineStyle: { color: "#8392A5" } },
         splitLine: {
-          show: !1
-        }
+          show: !1,
+        },
       },
       dataZoom: [
         {
           textStyle: {
-            color: '#8392A5'
+            color: "#8392A5",
           },
-          handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
-          handleSize: '80%',
+          handleIcon:
+            "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
+          handleSize: "80%",
           dataBackground: {
             areaStyle: {
-              color: '#8392A5'
+              color: "#8392A5",
             },
             lineStyle: {
               opacity: 0.8,
-              color: '#8392A5'
-            }
+              color: "#8392A5",
+            },
           },
           handleStyle: {
-            color: '#fff',
+            color: "#fff",
             shadowBlur: 3,
-            shadowColor: 'rgba(0, 0, 0, 0.6)',
+            shadowColor: "rgba(0, 0, 0, 0.6)",
             shadowOffsetX: 2,
-            shadowOffsetY: 2
-          }
+            shadowOffsetY: 2,
+          },
         },
         {
-          type: 'inside',
+          type: "inside",
           start: 1,
           end: 100,
           zoomOnMouseWheel: true,
-          moveOnMouseMove: true
-        }
+          moveOnMouseMove: true,
+        },
       ],
       animation: false,
       series: [
         {
-          type: 'candlestick',
-          name: '\u65e5K',
+          type: "candlestick",
+          name: "\u65e5K",
           data: dealData.values,
           itemStyle: {
             normal: {
-              color0: '#FD1050',
-              color: '#0CF49B',
-              borderColor0: '#FD1050',
-              borderColor: '#0CF49B'
-            }
+              color0: "#FD1050",
+              color: "#0CF49B",
+              borderColor0: "#FD1050",
+              borderColor: "#0CF49B",
+            },
           },
           // barWidth: isMobile ? 6 : isTablet ? 8 : 10
         },
         {
-          name: 'MA5',
-          type: 'line',
+          name: "MA5",
+          type: "line",
           data: (function (a) {
             for (var MA5 = [], d = 0, g = dealData.values.length; d < g; d++) {
               if (d < a) {
-                MA5.push('-')
+                MA5.push("-");
               } else {
                 for (var f = 0, e = 0; e < a; e++) {
-                  f += dealData.values[d - e][1]
+                  f += dealData.values[d - e][1];
                 }
-                MA5.push((f / a).toFixed(2))
+                MA5.push((f / a).toFixed(2));
               }
             }
-            return MA5
+            return MA5;
           })(5),
           smooth: true,
           lineStyle: {
             width: isMobile ? 1 : 2,
-            opacity: 0.8
-          }
-        }
-      ]
+            opacity: 0.8,
+          },
+        },
+      ],
     };
-
   }
 
-
-
-
-
-
-  console.log('KLine渲染: 图表配置完成');
+  console.log("KLine渲染: 图表配置完成");
 
   try {
     // 应用配置
-    console.log('KLine渲染: 开始设置图表选项');
+    console.log("KLine渲染: 开始设置图表选项");
     chartInstancesMap[containerId].setOption(KlineOption);
-    console.log('KLine渲染: 图表选项设置成功');
+    console.log("KLine渲染: 图表选项设置成功");
 
     // 窗口大小变化时重新渲染图表
     const resizeFunc = function () {
-      console.log('窗口大小改变，调整图表大小');
-      if (chartInstancesMap[containerId] && !chartInstancesMap[containerId].isDisposed()) {
+      console.log("窗口大小改变，调整图表大小");
+      if (
+        chartInstancesMap[containerId] &&
+        !chartInstancesMap[containerId].isDisposed()
+      ) {
         // 如果设备类型发生变化，重新渲染
         const newIsMobile = window.innerWidth < 768;
-        const newIsTablet = window.innerWidth >= 768 && window.innerWidth < 1024;
+        const newIsTablet =
+          window.innerWidth >= 768 && window.innerWidth < 1024;
 
         if (newIsMobile !== isMobile || newIsTablet !== isTablet) {
-          console.log('设备类型变化，重新渲染图表');
+          console.log("设备类型变化，重新渲染图表");
           KlineCanvsEcharts(containerId);
           return;
         }
@@ -4429,12 +5058,12 @@ function KlineCanvsEcharts(containerId) {
     window[`resize_${containerId}`] = resizeFunc;
 
     // 绑定resize事件
-    window.removeEventListener('resize', window[`resize_${containerId}`]);
-    window.addEventListener('resize', window[`resize_${containerId}`]);
+    window.removeEventListener("resize", window[`resize_${containerId}`]);
+    window.addEventListener("resize", window[`resize_${containerId}`]);
 
-    console.log('KLine渲染: 图表渲染完成');
+    console.log("KLine渲染: 图表渲染完成");
   } catch (error) {
-    console.error('KLine渲染: 图表渲染出错', error);
+    console.error("KLine渲染: 图表渲染出错", error);
   }
 }
 
@@ -4472,7 +5101,7 @@ watch(
     }
   },
   { immediate: true }
-)
+);
 
 watch(
   () => dataStore.activeTabIndex,
@@ -4489,7 +5118,7 @@ watch(
     }, 300);
   },
   { immediate: true } // 添加immediate属性，确保初始化时执行一次
-)
+);
 
 // 添加渲染所有K线图的方法
 function renderAllKlineCharts() {
@@ -4498,7 +5127,7 @@ function renderAllKlineCharts() {
   // 查找所有K线消息
   const messages = chatStore.messages;
   for (let i = 0; i < messages.length; i++) {
-    if (messages[i].type === 'kline' && messages[i].chartData) {
+    if (messages[i].type === "kline" && messages[i].chartData) {
       const containerId = `kline-container-${i}`;
       console.log(`尝试渲染K线图: ${containerId}`);
 
@@ -4526,9 +5155,11 @@ onMounted(() => {
   // 添加DOM变化监听器
   const observer = new MutationObserver((mutations) => {
     mutations.forEach((mutation) => {
-      if (mutation.type === 'childList' && mutation.addedNodes.length) {
+      if (mutation.type === "childList" && mutation.addedNodes.length) {
         // 检查是否添加了图表容器
-        const containers = document.querySelectorAll('[id^="kline-container-"]');
+        const containers = document.querySelectorAll(
+          '[id^="kline-container-"]'
+        );
         if (containers.length) {
           // console.log("DOM变化监听到K线容器:", Array.from(containers).map(el => el.id));
         }
@@ -4543,11 +5174,11 @@ onMounted(() => {
 // 组件卸载时清理所有图表实例和事件监听器
 onUnmounted(() => {
   // 清理所有图表实例
-  Object.keys(chartInstancesMap).forEach(key => {
+  Object.keys(chartInstancesMap).forEach((key) => {
     if (chartInstancesMap[key]) {
       // 移除resize事件监听
       if (window[`resize_${key}`]) {
-        window.removeEventListener('resize', window[`resize_${key}`]);
+        window.removeEventListener("resize", window[`resize_${key}`]);
         delete window[`resize_${key}`];
       }
 
@@ -4557,7 +5188,6 @@ onUnmounted(() => {
     }
   });
 });
-
 </script>
 
 <template>
@@ -4566,7 +5196,7 @@ onUnmounted(() => {
     <div class="gif-area">
       <img :src="currentGif" alt="AI动画" />
 
-      <div class="marquee-container" v-if="false">
+      <!-- <div class="marquee-container">
         <div id="top" class="marquee-row top" @mouseenter="floatingTopMouseEnter" @mouseleave="floatingTopMouseLeave">
           <div v-for="(questions, index) in questionsList.slice(0, 5)" :key="'top' + index" class="marquee-item"
             @click="showQuestions(questions)">
@@ -4580,24 +5210,18 @@ onUnmounted(() => {
             {{ questions.title }}
           </div>
         </div>
-      </div>
+      </div> -->
     </div>
 
-    <!-- 消息区域 -->
-    <!-- <div class="message-area">
-      <div v-for="(msg, index) in chatMsg" :key="index" :class="['message-bubble', msg.sender]">
-        {{ msg.content }}
-      </div>
-    </div> -->
-    <!-- <div class="message-area">
-      <div v-for="(msg, index) in chatMsg" :key="index" :class="['message-bubble', msg.sender]" v-html="msg.content">
-      </div>
-    </div> -->
-
-    <!-- <div v-for="(msg, index) in chatMsg" :key="index" :class="['message-bubble', msg.sender]" v-html="msg.content">
-    </div> -->
-
-    <div v-for="(msg, index) in chatMsg" :key="index" :class="['message-bubble', msg.sender]">
+    <div
+      v-for="(msg, index) in chatMsg"
+      :key="index"
+      :class="{
+        'message-bubble': true,
+        [msg.sender]: msg.sender,
+        [msg.class]: msg.class,
+      }"
+    >
       <div v-if="msg.type === 'kline'" class="kline-container">
         <div :id="'kline-container-' + index" class="chart-mount-point">
           <div v-if="!msg.hasValidData" class="no-data-message">
@@ -4605,13 +5229,62 @@ onUnmounted(() => {
           </div>
         </div>
       </div>
+      <div v-else-if="msg.type == 'ing'">
+        <span>{{ msg.content }}</span>
+        <span class="loading-dots">
+          <span class="dot">.</span>
+          <span class="dot">.</span>
+          <span class="dot">.</span>
+          <span class="dot">.</span>
+          <span class="dot">.</span>
+          <span class="dot">.</span>
+        </span>
+      </div>
+      <div v-else-if="msg.type == 'title1'" style="display: flex; width: 100%">
+        <div class="mainTitle">
+          {{ msg.content }}
+        </div>
+        <div class="date">
+          {{ msg.date }}
+        </div>
+      </div>
+      <div v-else-if="msg.type == 'title2'" class="title2">
+        <img class="title1Img" :src="title1" alt="出错了" />
+      </div>
+      <div v-else-if="msg.type == 'title3'" class="title3">
+        <img class="title2Img" :src="msg.content" alt="出错了" />
+      </div>
+      <div v-else-if="msg.type == 'content1'" class="content1">
+        <div v-if="msg.kline" class="kline-container">
+          <div :id="'kline-container-' + index" class="chart-mount-point">
+            <div v-if="!msg.hasValidData" class="no-data-message">
+              <p>暂无数据</p>
+            </div>
+          </div>
+        </div>
+        <div v-else class="content1Text">
+          <div v-html="msg.content" class="text1"></div>
+        </div>
+      </div>
+      <div v-else-if="msg.type == 'content2'" class="content2">
+        <div class="kline-container">
+          <div :id="'kline-container-' + index" class="chart-mount-point">
+            <div v-if="!msg.hasValidData" class="no-data-message">
+              <p>暂无数据</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-else-if="msg.type == 'content3'" class="content3">
+        <div class="content3Text">
+          <div v-html="msg.content" class="text3"></div>
+        </div>
+      </div>
+      <div v-else-if="msg.type == 'mianze'" class="mianze">
+        <div v-html="msg.content"></div>
+      </div>
       <div v-else v-html="msg.content"></div>
     </div>
-
-    <!-- 新闻弹窗 -->
-    <el-dialog v-model="dialogVisible" title="新闻详情" width="60%">
-      <p>{{ currentQuestions.content }}</p>
-    </el-dialog>
   </div>
 </template>
 
@@ -4710,7 +5383,6 @@ onUnmounted(() => {
     animation-duration: 35s;
     /* PC端改为35秒 */
   }
-
 }
 
 @keyframes marquee {
@@ -4723,30 +5395,200 @@ onUnmounted(() => {
   }
 }
 
+.loading-dots {
+  display: inline-block;
+}
+
+.dot {
+  opacity: 0.4;
+  animation: loading 1.4s infinite;
+}
+
+.dot:nth-child(1) {
+  animation-delay: 0s;
+}
+.dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+.dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+.dot:nth-child(4) {
+  animation-delay: 0.6s;
+}
+.dot:nth-child(5) {
+  animation-delay: 0.8s;
+}
+.dot:nth-child(6) {
+  animation-delay: 1s;
+}
+
+@keyframes loading {
+  0%,
+  60%,
+  100% {
+    opacity: 0.4;
+  }
+  30% {
+    opacity: 1;
+  }
+}
+
 .message-bubble {
-  max-width: 70%;
+  max-width: 80%;
   margin: 10px 0px;
-  padding: 15px 25px;
-  border-radius: 10px;
+  padding: 15px 20px;
+
   position: relative;
 }
 
 .message-bubble.user {
-  background: #8263f0;
-  color: white;
+  color: #6d22f8;
+  background: white;
+  font-weight: bold;
   margin-left: auto;
+  border-radius: 10px;
   margin-right: 20px;
   /* border-bottom-right-radius: 5px; */
 }
 
 .message-bubble.ai {
+  background: #2b378d;
+  color: #ffffff;
+  margin: 0 auto;
+  /* border-bottom-left-radius: 5px; */
+}
+
+.message-bubble.ing {
   background: #ffffff;
-  color: #333;
-  margin-right: auto;
+  color: #000000;
+  font-weight: bold;
+  border-radius: 10px;
   margin-left: 20px;
+  margin-right: auto;
   /* border-bottom-left-radius: 5px; */
 }
 
+.message-bubble.ai.title1 {
+  width: 100%;
+  display: flex;
+  border-radius: 10px 10px 0px 0px;
+  /* border-bottom-left-radius: 5px; */
+}
+
+.mainTitle {
+  font-size: 16px;
+  font-weight: bold;
+  background-image: url("@/assets/img/AiEmotion/bk01.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  min-width: 200px;
+  width: 20vw;
+  height: 50px;
+  padding: 5px 0px 0px 0px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.date {
+  font-size: 18px;
+  font-weight: bold;
+  margin-left: auto;
+  /* width: 100px; */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.message-bubble.ai.title2 {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.title1Img {
+  max-width: 500px;
+  width: 80vw;
+}
+
+.message-bubble.ai.title3 {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.title2Img {
+  max-width: 500px;
+  width: 90vw;
+}
+
+.message-bubble.ai.content1 {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.content1Text {
+  background-image: url("@/assets/img/AIchat/框.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 50vw;
+  min-width: 350px;
+  /* height: 20vw; */
+  /* max-height: 400px; */
+  padding: 5% 0;
+}
+
+.text1 {
+  font-weight: bold;
+  /* margin-left: 6%; */
+  /* margin-bottom: 10px; */
+  margin: 0px 6% 10px 6%;
+  font-size: 30px;
+}
+
+.message-bubble.ai.content2 {
+  width: 100%;
+}
+
+.message-bubble.ai.content3 {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.content3Text {
+  background-image: url("@/assets/img/AIchat/边框.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 50vw;
+  min-width: 350px;
+  /* height: 20vw; */
+  /* max-height: 400px; */
+  padding: 5% 0px;
+}
+
+.text3 {
+  /* font-weight: bold; */
+  /* margin-left: 6%; */
+  /* margin-bottom: 10px; */
+  margin: 0px 6% 10px 6%;
+  font-size: 30px;
+}
+
+.message-bubble.ai.mianze {
+  width: 100%;
+  text-align: center;
+  font-weight: bold;
+  font-size: 24px;
+  border-radius: 0px 0px 10px 10px;
+}
+
 .kline-container {
   margin-top: 10px;
   /* 最小高度 */
@@ -4758,9 +5600,34 @@ onUnmounted(() => {
 
 @media (max-width: 768px) {
   .kline-container {
-
     min-width: 75vw;
   }
+
+  .content1Text {
+    width: 77vw;
+    min-width: 0px;
+    /* height: 20vw; */
+    /* min-height: 150px; */
+  }
+
+  .text1 {
+    font-size: 20px;
+  }
+
+  .content3Text {
+    width: 77vw;
+    min-width: 0px;
+    /* height: 20vw; */
+    /* min-height: 150px; */
+  }
+
+  .text3 {
+    font-size: 20px;
+  }
+
+  .message-bubble.ai.mianze {
+    font-size: 18px;
+  }
 }
 
 .kline-container .chart-mount-point {