feat: 新建聊天记录

src/views/AI/components/aiChart/index.vue

@@ -65,7 +65,7 @@
           </n-input>
         </div>
         <div class="chat-history">
-          <AiHistory @finishInfo="finishInfo"></AiHistory>
+          <AiHistory @finishInfo="finishInfo" @handlerAddmsg="saveMessage" ref="history"></AiHistory>
         </div>
       </div>
     </n-modal>
@@ -73,7 +73,7 @@
 </template>
 
 <script setup>
-import { onMounted, ref, nextTick, watch } from 'vue'
+import { onMounted, ref, nextTick, watch,reactive } from 'vue'
 import {
   AiHint,
   AiTable,
@@ -88,15 +88,21 @@ import userIcon from '@/assets/images/ai/user-icon.png'
 import aiIcon from '@/assets/images/ai/ai-icon.png'
 import { LineChart, BarChart, PieChart } from '@/views/AI/chat/class/index'
 import suspensionButton from '../../components/suspensionButton/index.vue'
-import { getDict } from '@/api/path'
+import { getDict, historyMessageRoomUpdata, historyMessageRoom } from '@/api/path'
 import moment from 'moment'
 import { getAiMsg } from '@/api/ai.js'
+import { httpErrorHandle } from '@/utils'
+import { useSystemStore } from '@/store/modules/systemStore/systemStore'
 
+const systemStore = useSystemStore()
 //输入框加载
 let loading = ref(false)
-
+const ehcatrsType = ['pie', 'line', 'bar', 'number']
 //聊天室容器
 const scrollContainer = ref(null)
+const history = ref(null)
+let isloading = ref(false)
+let infoId = ref(null)
 let stopWatch = null
 let isWatching = ref(false)
 let showModal = ref(true)
@@ -129,14 +135,51 @@ const getDictListist = async () => {
  * @param e
  */
 const finishInfo = res => {
+  infoId.value = res.id
   messageList.value = []
-  res.content.map(item => {
+  res.content.map((item, index) => {
     item.chartInstanceActiveIndex = 0
     messageList.value.push(item)
-    initEchart(item, item)
+    nextTick(() => {
+      initEchart(item.chartInstanceItem, item, index)
+    })
   })
 }
 
+/**
+ * 新建聊天---检查本地是否存在聊天对话，存在的化先保存
+ */
+const saveMessage = async () => {
+  if (messageList.value.length > 0 && !isloading.value) {
+    //销毁渲染的图表
+    messageList.value.forEach(instance => {
+      if (ehcatrsType.includes(instance.type) && instance.chartInstanceItem) {
+        console.log(instance)
+        instance.chartInstanceItem.dispose()
+      }
+    })
+    console.log(messageList.value)
+    const jsonData = JSON.stringify(messageList.value)
+    let res
+    isloading.value = true
+    if(infoId.value){
+      res = await historyMessageRoomUpdata({ content: jsonData, id: infoId.value})
+    }else{
+      res = await historyMessageRoom({ content: jsonData, createUserId: systemStore.userInfo.userId || 1 })
+    }
+    if (res.code === 200) {
+      history.value.messageList()
+    } else {
+      httpErrorHandle()
+    }
+  }
+  isloading.value = false
+  messageList.value = []
+  lastIndex.value = 0
+  infoId.value = null
+  keyWord.value = ''
+}
+
 /**
  * 问答
  */
@@ -189,7 +232,7 @@ const handleSend = async () => {
     })
     nextTick(() => {
       const itemData = messageList.value[lastIndex.value]
-      initEchart(itemData, res)
+      initEchart(itemData.chartInstanceItem, res, lastIndex.value)
     })
   } catch {
     updataMessageItem({
@@ -207,23 +250,23 @@ const handleSend = async () => {
  * @param currentItem
  * @param res
  */
-const initEchart = (currentItem, res) => {
+const initEchart = (chartInstanceItem, res, index) => {
   //饼图
   if (res.type === 'pie') {
-    currentItem.chartInstanceItem = new PieChart(`${res.type}${lastIndex.value}`, {
+    chartInstanceItem = new PieChart(`${res.type}${index}`, {
       title: res.title,
       unit: res.unit,
       data: res.data
     })
   } else if (res.type === 'bar') {
-    currentItem.chartInstanceItem = new BarChart(`${res.type}${lastIndex.value}`, {
+    chartInstanceItem = new BarChart(`${res.type}${index}`, {
       title: res.title,
       unit: res.unit,
       xData: res.xData,
       data: res.data
     })
   } else if (res.type === 'line') {
-    currentItem.chartInstanceItem = new LineChart(`${res.type}${lastIndex.value}`, {
+    chartInstanceItem = new LineChart(`${res.type}${index}`, {
       title: res.title,
       unit: res.unit,
       xData: res.xData,

src/views/AI/components/history/index.vue

@@ -1,5 +1,9 @@
 <template>
   <div class="history-box">
+    <div class="add-new" @click="handlerAdd">
+      <img src="~@/assets/images/ai/add-new.png" alt="" />
+      <span>新建聊天</span>
+    </div>
     <section>
       <div class="history-title">历史记录</div>
       <div class="history-list" v-if="list.length > 0">
@@ -8,10 +12,8 @@
           <img src="~@/assets/images/ai/icon-delet.png" class="del-icon" alt="" @click.stop="delMessageItem(item.id)" />
         </div>
       </div>
-      <div class="history-list" v-else >
-        <n-empty description="暂无记录" >
-          
-        </n-empty>
+      <div class="history-list" v-else>
+        <n-empty description="暂无记录"></n-empty>
       </div>
     </section>
   </div>
@@ -22,10 +24,18 @@ import { onMounted, ref } from 'vue'
 import { historyMessageRoomList, historyMessageRoomDel, historyMessageRoomById } from '@/api/path'
 import { httpErrorHandle } from '@/utils'
 
-const emits = defineEmits(['finishInfo'])
+const emits = defineEmits(['finishInfo','handlerAddmsg'])
 
 let list = ref([])
 
+
+/**
+ * 新建聊天
+ */
+ const handlerAdd = () =>{
+  emits('handlerAddmsg')
+ }
+
 /**
  * 过滤出第一条问题作为标题
  * @param value
@@ -66,6 +76,8 @@ const getMessageInfo = async id => {
   const res = await historyMessageRoomById(id)
   if (res && res.code === 200) {
     res.data.content = JSON.parse(res.data.content)
+   console.log(res.data);
+    
     emits('finishInfo', res.data)
     return
   }
@@ -83,6 +95,25 @@ defineExpose({
 <style lang="scss" scoped>
 .history-box {
 }
+.add-new {
+  cursor: pointer;
+  height: 38px;
+  border-radius: 4px;
+  border: 1px solid #507afc;
+  margin-bottom: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font-size: 14px;
+  color: #507afc;
+  font-weight: 400;
+  font-family: 'AlibabaPuHuiTi-Regular';
+  img {
+    height: 13px;
+    width: 13px;
+  }
+}
 .history-title {
   font-size: 14px;
   color: #ffffff;