12345报告分析打字机效果

src/views/modules/shequzhili/analysis/index.vue

@@ -806,10 +806,6 @@ export default {
       },
       summarizeDialog: false,
       displayedText: '',
-      typingSpeed: 50, //每个字出现的间隔时间（毫秒）
-      typingQueue: [],  //队列存储
-      isTyping: false,   
-      showMarkdown:false,
     };
   },
 
@@ -852,59 +848,10 @@ export default {
     },
    handelClickShowSummarize() {
     this.summarizeDialog = true;
-    // const that = this;
-    // const { queryDateStart, queryDateEnd } = this.getLastWeekDateRange();
-
-    // fetch(`${process.env.VUE_APP_API_SERVER}/governance/event/assistant/report?queryDateStart=${queryDateStart}&queryDateEnd=${queryDateEnd}`, {
-    //   method: "GET",
-    //   headers: {
-    //     "Authorization": localStorage.getItem('token'),
-    //     "Content-Type": "application/json"
-    //   }
-    // })
-    // .then(response => {
-    //   const reader = response.body.getReader();
-    //   const decoder = new TextDecoder("utf-8");
-
-    //   reader.read().then(function process({ done, value }) {
-    //     if (done) {
-    //       console.log("流读取完成");
-    //         that.showMarkdown = true;
-    //       return;
-    //     }
-
-    //     const chunk = decoder.decode(value, { stream: true });
-    //     console.log("流数据块：", chunk,typeof (chunk));
-    //     const text = that.regexChat(chunk);
-    //     console.log("转换后：", text,typeof (text));
-
-    //     // 将数据推入队列
-    //     that.typingQueue.push(text);
-    //     that.startNextTypingEffect();  // 尝试开始下一个
-
-    //     // 继续读取
-    //     return reader.read().then(process);
-    //   });
-    // })
-    // .catch(err => console.error("请求出错：", err));
   },
-
-  startNextTypingEffect() {
-    // 如果正在打字或队列为空，则直接返回
-    if (this.isTyping || this.typingQueue.length === 0){
-      
-    };
-    console.log(this.typingQueue,'typingQueue');
-    const nextText = this.typingQueue.shift();
-    console.log(typeof(nextText));
-    
-    this.displayedText += nextText.toString()
-  },
-
   
   handleCloseSummarizeDialog(){
       this.displayedText = '';
-      this.showMarkdown = false;
   },
     initChart(url) {
       this.$http.get(url).then(({ data: { data } }) => {

src/views/modules/shequzhili/analysis/markDown.vue

@@ -1,6 +1,7 @@
 <template>
-    <div v-if="showMarkdown">
-        <div  v-html="markdownContent"></div>
+    <div >
+        <div v-if="markdownContent.length===0"><i class="el-icon-loading"></i>思考中...</div>
+        <div v-html="markdownContent"></div>
     </div>
 </template>
 
@@ -11,16 +12,37 @@ export default {
         return {
             text: '',
             displayedText: '',
-            showMarkdown: false,
             typingQueue: [],  //队列存储
             isTyping: false,
             markdownContent: '',
             typingSpeed: 50, //每个字出现的间隔时间（毫秒）
-
         };
     },
     created() { },
     methods: {
+        startTypingEffect(text) {
+            this.isTyping = true;
+            let index = 0;
+            const interval = setInterval(() => {
+                if (index < text.length) {
+                    // 如果检测到换行符，替换为 Markdown 换行格式（两个空格+换行）\n，否则直接添加\n
+                    if (text[index] === '\n') {
+                        this.displayedText += '  \n';
+                    } else {
+                        this.displayedText += text[index];
+                    }
+                    index++;
+                    // 实时更新 Markdown 转换结果，保证视图实时刷新\n
+                    this.markdownContent = marked(this.displayedText);
+                } else {
+                    clearInterval(interval); 
+                    this.isTyping = false;
+                    this.startNextTypingEffect();
+                    this.markdownContent = marked(this.displayedText);
+                }
+            }, this.typingSpeed);
+        },
+
         getLastWeekDateRange() {
             const today = new Date();
             const dayOfWeek = today.getDay();
@@ -44,23 +66,21 @@ export default {
             const matches = [];
             let match;
             while ((match = regex.exec(str)) !== null) {
-            let formattedContent = match[1].replace(/\\n/g, '\n');
-            formattedContent = formattedContent.replace(/```|mark|down/g, "");
-            matches.push(formattedContent);
-            // matches.push(match[1]);
+                let formattedContent = match[1].replace(/\\n/g, '\n');
+                formattedContent = formattedContent.replace(/```|mark|down/g, "");
+                matches.push(formattedContent);
+                // matches.push(match[1]);
             }
             var mergedContent = matches.join('');
-            console.log(mergedContent,'mergedContent');
+            console.log(mergedContent, 'mergedContent');
 
             return mergedContent;
         },
         startNextTypingEffect() {
             // 如果正在打字或队列为空，则直接返回
-            if (this.isTyping || this.typingQueue.length === 0) {
-                return
-            };
-            const nextText = this.typingQueue.shift();       
-            this.displayedText += nextText
+            if (this.isTyping || this.typingQueue.length === 0) return;
+            const nextText = this.typingQueue.shift();
+            this.startTypingEffect(nextText);
         },
         async loadMarkdownTohtml() {
             const { queryDateStart, queryDateEnd } = this.getLastWeekDateRange();
@@ -78,13 +98,9 @@ export default {
 
                 reader.read().then(function process({ done, value }) {
                     if (done) {
-                        console.log('处理前:', that.displayedText);
                         that.displayedText = that.displayedText.replace(/```|markdown/g, "");
                         that.displayedText = that.displayedText.replace(/\\n/g, '\n');
-                        console.log('处理后:', that.displayedText);
-                        that.showMarkdown = true;
                         that.markdownContent = marked(that.displayedText); // 将markdown内容解析
-                        console.log(that.markdownContent);
                         return
                     }
 
@@ -92,9 +108,7 @@ export default {
                     // console.log("流数据块：", chunk, typeof (chunk));
                     // console.log(JSON.parse(`"${chunk}"`),'json');
                     const text = that.regexChat(chunk);
-
                     // console.log("转换后：", text, typeof (text));
-
                     // 将数据推入队列
                     that.typingQueue.push(text);
                     that.startNextTypingEffect();  // 尝试开始下一个