12345分析报告中AI小助手功能实现（待优化版）

src/views/modules/base/smartExcel/cpts/excel-upload-data.vue

@@ -90,7 +90,6 @@
 import { requestPost } from "@/js/dai/request";
 import resiSearch from "./export-search.vue";
 import HoseSearch from "./hose-search.vue";
-import { Loading } from "element-ui";
 import exportProcessTwo from './export-process-two.vue'
 export default {
   data() {

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

@@ -1,6 +1,13 @@
 <template>
   <div class="g-main">
     <div>
+      <div class="header">
+        <img src="@/assets/img/AI/助手.png" alt="">
+        <div>
+          AI小助手：为您生成了上周的12345政务热线诉求总结
+          <el-button type="text" @click="handelClickShowSummarize">查看</el-button>
+        </div>
+      </div>
       <div class="m-search">
         <el-form :inline="true" :model="formData" ref="ref_searchform" :label-width="'100px'">
           <el-form-item label="统计时间">
@@ -451,6 +458,15 @@
       class="dialog-h" @closed="showAddEventList = false">
       <add-complain-list ref="ref_area_no_same_list" @clickAwoFlagData="clickAwoFlagData"></add-complain-list>
     </el-dialog>
+    <el-dialog :title="`${$store.state.user.agencyName}12345政务热线诉求总结`" :visible.sync="summarizeDialog" width="50%"
+      v-if="summarizeDialog" @close="handleCloseSummarizeDialog" center>
+      <div class="chatContent">
+        <span v-if="!displayedText">
+          <i class="el-icon-loading"></i>思考中...
+        </span>
+        <div v-html="displayedText"></div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -468,6 +484,7 @@ import mobileList from "./mobileList";
 import areaNoSameList from "./areaNoSameList";
 import addComplainList from "./addComplainList";
 import echartsAffairs from "./cpts/echarts-affairs.vue";
+import { marked } from "marked";
 export default {
   components: { TableRow, formList, eventInfo, areaSameList, mobileList, areaNoSameList, addComplainList, echartsAffairs },
   data() {
@@ -791,6 +808,9 @@ export default {
           },
         ]
       },
+      summarizeDialog: false,
+      displayedText: null,
+      typingSpeed: 100, // 每个字出现的间隔时间（毫秒）
     };
   },
 
@@ -801,8 +821,16 @@ export default {
       return this.$store.state.inIframe ? h : _h;
     },
     ...mapGetters(["clientHeight", "iframeHeight"]),
+    renderedMarkdown() {
+      return marked(this.displayedText); // 转换 Markdown 为 HTML
+    },
+  },
+  watch: {
+    renderedMarkdown(newText) {
+      this.displayedText = null; // 清空旧内容
+      this.startTypingEffect(newVal);
+    }
   },
-  watch: {},
   mounted() {
     this.user = this.$store.state.user;
     this.agencyId = this.user.agencyId;
@@ -1099,7 +1127,8 @@ export default {
       if (this.formData.queryDateStart && this.formData.queryDateEnd) {
         this.starttime = this.formData.queryDateStart,
           this.endtime = this.formData.queryDateEnd
-        }else{{
+      } else {
+        {
           this.getLastMonthRange()
         }
       }
@@ -1152,7 +1181,8 @@ export default {
       if (this.formData.queryDateStart && this.formData.queryDateEnd) {
         this.starttime = this.formData.queryDateStart,
           this.endtime = this.formData.queryDateEnd
-        }else{{
+      } else {
+        {
           this.getLastMonthRange()
         }
       }
@@ -1163,7 +1193,7 @@ export default {
       }
       const { data, code, msg } = await requestPost(url, param);
       if (code === 0) {
-          console.log(data);
+        
         data.map(item => {
           if (item.assignOrgType == "duty") {
             this.departmentList.push(item)
@@ -1171,8 +1201,6 @@ export default {
             this.communityList.push(item)
           }
         })
-          console.log(this.departmentList,"564534");
-          console.log(this.communityList,"sd ads ");
       } else {
         this.$message.error(msg);
       }
@@ -1222,7 +1250,8 @@ export default {
       if (this.formData.queryDateStart && this.formData.queryDateEnd) {
         this.starttime = this.formData.queryDateStart,
           this.endtime = this.formData.queryDateEnd
-        }else{{
+      } else {
+        {
           this.getLastMonthRange()
         }
       }
@@ -1233,7 +1262,6 @@ export default {
       }
       const { data, code, msg } = await requestPost(url, params);
       if (code === 0) {
-          console.log(data);
         this.analysisList = data[0];
         console.log(this.analysisList);
       } else {
@@ -1495,9 +1523,67 @@ export default {
           return [0, 0];
         }
       }
+    },
+    getLastWeekDateRange() {
+      const today = new Date();
+      const dayOfWeek = today.getDay();
+      const startOfLastWeek = new Date(today);
+      const endOfLastWeek = new Date(today);
+      startOfLastWeek.setDate(today.getDate() - dayOfWeek - 6);
+      endOfLastWeek.setDate(today.getDate() - dayOfWeek);
+      const formatDate = (date) => {
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        return `${year}-${month}-${day}`;
+      };
+      return {
+        queryDateStart: formatDate(startOfLastWeek),
+        queryDateEnd: formatDate(endOfLastWeek),
+      };
+    },
+    regexChat(str) {
+      console.log(str,'jieshou');
+      
+      const regex = /"content":"([^\\\n]*?)"(?:}}])?/g;
+      const matches = [];
+      let match;
+      while ((match = regex.exec(str)) !== null) {
+        matches.push(match[1]);
+      }
+      const mergedContent = matches.join('');
+      return mergedContent;
+    },
+    handelClickShowSummarize() {
+      this.summarizeDialog = true;
+      const { queryDateStart, queryDateEnd } = this.getLastWeekDateRange()
+      this.$http.get(`/governance/event/assistant/report?queryDateStart=${queryDateStart}&queryDateEnd=${queryDateEnd}`).then((res) => {
+        const text = this.regexChat(res.data);
+        // 确保文本不为空
+        if (text) {
+          this.startTypingEffect(text);
         }
+      });
     },
 
+    startTypingEffect(text) {
+      this.displayedText = ""; // 清空内容
+      let index = 0;
+      const interval = setInterval(() => {
+        if (index < text.length) {
+          this.displayedText += text[index]; // 逐个字符添加
+          index++;
+        } else {
+          clearInterval(interval); // 结束打字效果
+        }
+      }, this.typingSpeed);
+    },
+    handleCloseSummarizeDialog(){
+      this.displayedText = null;
+    }
+  },
+
+
   props: {},
 };
 </script>
@@ -1506,12 +1592,14 @@ export default {
 @import "@/assets/scss/modules/management/list-main.scss";
 @import "@/assets/scss/modules/shequzhili/event-info.scss";
 @import "./css/index.scss";
+
 table {
   width: 100%;
   border-collapse: collapse;
 }
 
-th, td {
+th,
+td {
   width: 40px;
   height: 20px;
   border: 1px solid #ccc;
@@ -1554,43 +1642,112 @@ thead {
 }
 
 .centered-title {
-  text-align: center; /* 将文本水平居中对齐 */
-  font-size: 28px; /* 设置标题字体大小 */
-  font-weight: bold; /* 设置标题加粗 */
-  color: #333; /* 设置标题颜色 */
-  margin-bottom: 20px; /* 设置标题与下方内容的间距 */
+  text-align: center;
+  /* 将文本水平居中对齐 */
+  font-size: 28px;
+  /* 设置标题字体大小 */
+  font-weight: bold;
+  /* 设置标题加粗 */
+  color: #333;
+  /* 设置标题颜色 */
+  margin-bottom: 20px;
+  /* 设置标题与下方内容的间距 */
 }
 
 .no-data {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 200px; /* 调整高度以适应你的需要 */
-  color: #888; /* 灰色字体颜色 */
-  font-size: 20px; /* 字体大小 */
+  height: 200px;
+  /* 调整高度以适应你的需要 */
+  color: #888;
+  /* 灰色字体颜色 */
+  font-size: 20px;
+  /* 字体大小 */
 }
 
 
 .arrow-container {
   position: relative;
-  width: 100px; /* 调整箭头容器的宽度 */
-  height: 100px; /* 调整箭头容器的高度 */
+  width: 100px;
+  /* 调整箭头容器的宽度 */
+  height: 100px;
+  /* 调整箭头容器的高度 */
+}
+
+.header {
+  background: url("@/assets/img/AI/渐变背景.png") no-repeat;
+  height: 68px;
+  background-size: 100% 100%;
+  /* 固定背景图片的宽度和高度 */
+  display: flex;
+  align-items: center;
+  padding-left: 30px;
+  margin: 10px 10px 0;
+
+  div {
+    background: url("@/assets/img/AI/文字背景.png") no-repeat;
+    height: 34px;
+    line-height: 30px;
+    background-size: 100% 100%;
+    /* 固定背景图片的宽度和高度 */
+    letter-spacing: 2px;
+  }
+
+  img {
+    width: 55px;
+    height: 55px;
+    margin-right: 10px;
+  }
 }
-.flex-x{
 
+.chatContent {
+  width: 100%;
+  /* 限制最大宽度，确保换行 */
+  word-wrap: break-word;
+  /* 确保长文本换行 */
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+  /* 保持空格和换行 */
+  max-height: 480px;
+  overflow-y: scroll;
+}
+
+.typing-animation {
+  display: inline-block;
+  overflow: hidden;
+  /* 隐藏未显示的部分 */
+  white-space: nowrap;
+  /* 避免提前换行 */
+  animation: typing 2s steps(20, end) forwards;
+}
+
+/* 动画：逐字显示 */
+@keyframes typing {
+  from {
+    width: 0;
+  }
+
+  to {
+    width: 100%;
   }
+}
+
 .flex {
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
 }
+
 .arrow {
   width: 0;
   height: 0;
   border-style: solid;
-  border-width: 20px 0 20px 34.6px; /* 通过调整这里的数值可以改变箭头的大小 */
-  border-color: transparent transparent transparent #007bff; /* 改变箭头颜色 */
+  border-width: 20px 0 20px 34.6px;
+  /* 通过调整这里的数值可以改变箭头的大小 */
+  border-color: transparent transparent transparent #007bff;
+  /* 改变箭头颜色 */
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
@@ -1617,16 +1774,16 @@ thead {
   color: black;
   /* 默认文字颜色 */
 }
+
 .chart-container {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
 }
+
 .chart {
   width: 100%;
   height: 350px;
 }
 </style>
-  
-