feat: 历史记录

4 weeks ago · 17933649bc
parent d3bb5df35b
commit 17933649bc
4 changed files with 121 additions and 101 deletions
--- a/src/styles/pages/index.scss
+++ b/src/styles/pages/index.scss
@ -27,6 +27,10 @@
  border-bottom: 1px solid #000000 ;

 }
+.custom-card  .n-card__content{
+
+margin:  0 15px !important;
+}


 .chat-container {
--- a/src/views/AI/components/aiChart/index.vue
+++ b/src/views/AI/components/aiChart/index.vue
@ -64,21 +64,31 @@
            </template>
          </n-input>
        </div>
-        <div class="chat-history"></div>
+        <div class="chat-history">
+          <AiHistory @finishInfo="finishInfo"></AiHistory>
+        </div>
      </div>
    </n-modal>
  </div>
 </template>

 <script setup>
-import { onMounted, ref, reactive, nextTick, watch } from 'vue'
-
-import { AiHint, AiTable, AddIssue, IssueQuey, disclaimer, inThinking,initEcharts } from '@/views/AI/components'
+import { onMounted, ref, nextTick, watch } from 'vue'
+import {
+  AiHint,
+  AiTable,
+  AddIssue,
+  IssueQuey,
+  disclaimer,
+  inThinking,
+  initEcharts,
+  AiHistory
+} from '@/views/AI/components'
 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 { historyMessageRoomById, getDict } from '@/api/path'
+import { getDict } from '@/api/path'
 import moment from 'moment'
 import { getAiMsg } from '@/api/ai.js'

@ -98,6 +108,10 @@ let dictList = ref([])
 const bodyStyle = {
  width: '55%'
 }
+const segmented = {
+  content: 'soft',
+  footer: 'soft'
+}

 onMounted(() => {
  // getDictListist()
@ -110,6 +124,19 @@ const getDictListist = async () => {
  dictList.value = res.data.records
 }

+/**
+ * 获取详情后处理数据
+ * @param e
+ */
+const finishInfo = res => {
+  messageList.value = []
+  res.content.map(item => {
+    item.chartInstanceActiveIndex = 0
+    messageList.value.push(item)
+    initEchart(item, item)
+  })
+}
+
 /**
 * 问答
 */
@ -162,38 +189,47 @@ const handleSend = async () => {
    })
    nextTick(() => {
      const itemData = messageList.value[lastIndex.value]
+      initEchart(itemData, res)
+    })
+  } catch {
+    updataMessageItem({
+      from: 'ai',
+      type: 'text',
+      text: '服务器繁忙，请稍后再试。',
+      time: moment().format('YYYY/MM/DD HH:mm:ss'),
+      loading: false
+    })
+  }
+}
+
+/**
+ *
+ * @param currentItem
+ * @param res
+ */
+const initEchart = (currentItem, res) => {
  //饼图
  if (res.type === 'pie') {
-        itemData.chartInstanceItem = new PieChart(`${res.type}${lastIndex.value}`, {
+    currentItem.chartInstanceItem = new PieChart(`${res.type}${lastIndex.value}`, {
      title: res.title,
      unit: res.unit,
      data: res.data
    })
  } else if (res.type === 'bar') {
-        itemData.chartInstanceItem = new BarChart(`${res.type}${lastIndex.value}`, {
+    currentItem.chartInstanceItem = new BarChart(`${res.type}${lastIndex.value}`, {
      title: res.title,
      unit: res.unit,
      xData: res.xData,
      data: res.data
    })
  } else if (res.type === 'line') {
-        itemData.chartInstanceItem = new LineChart(`${res.type}${lastIndex.value}`, {
+    currentItem.chartInstanceItem = new LineChart(`${res.type}${lastIndex.value}`, {
      title: res.title,
      unit: res.unit,
      xData: res.xData,
      data: res.data
    })
  }
-    })
-  } catch {
-    updataMessageItem({
-      from: 'ai',
-      type: 'text',
-      text: '服务器繁忙，请稍后再试。',
-      time: moment().format('YYYY/MM/DD HH:mm:ss'),
-      loading: false
-    })
-  }
 }

 /**
@ -239,11 +275,10 @@ const pauseWatching = () => {
    stopWatch = null
  }
 }
-
 // 聊天室自动滚动条下拉
 const startWatching = () => {
  stopWatch = watch(
-    messageList,
+    messageList.value,
    newVal => {
      nextTick(() => {
        if (scrollContainer.value) {
@ -256,11 +291,6 @@ const startWatching = () => {
  isWatching.value = true
 }

-const segmented = {
-  content: 'soft',
-  footer: 'soft'
-}
-
 const openAi = () => {
  messageList.value = []
  getDictListist()
@ -302,6 +332,8 @@ const openAi = () => {
  }
  .chat-history {
    width: 20%;
+    box-sizing: border-box;
+    padding: 10px;
  }
 }

--- a/src/views/AI/components/history/index.vue
+++ b/src/views/AI/components/history/index.vue
@ -1,39 +1,17 @@
 <template>
  <div class="history-box">
-    <section v-show="list.length > 0">
-      <div class="history-title">聊天历史记录</div>
-      <div class="history-list">
+    <section>
+      <div class="history-title">历史记录</div>
+      <div class="history-list" v-if="list.length > 0">
        <div class="history-item" v-for="item in list" :key="item.id" @click="getMessageInfo(item.id)">
          <div class="history-row-title">{{ formatFristIssue(item) }}</div>
-          <div class="history-row-icon" @click.stop="delMessageItem(item.id)">
-            <n-icon size="14" color="#F25D44" class="del-icon">
-              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32">
-                <path d="M12 12h2v12h-2z" fill="currentColor"></path>
-                <path d="M18 12h2v12h-2z" fill="currentColor"></path>
-                <path d="M4 6v2h2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h2V6zm4 22V8h16v20z" fill="currentColor"></path>
-                <path d="M12 2h8v2h-8z" fill="currentColor"></path>
-              </svg>
-            </n-icon>
-          </div>
-        </div>
-      </div>
-    </section>
-    <section v-show="boardLsit.length > 0">
-      <div class="history-title">看板历史记录</div>
-      <div class="history-list">
-        <div class="history-item" v-for="item in boardLsit" :key="item.id" @click="getBoardInfo(item.id)">
-          <div class="history-row-title">{{ item.projectName }}</div>
-          <div class="history-row-icon" @click.stop="delProjectItem(item.id)">
-            <n-icon size="14" color="#F25D44" class="del-icon">
-              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32">
-                <path d="M12 12h2v12h-2z" fill="currentColor"></path>
-                <path d="M18 12h2v12h-2z" fill="currentColor"></path>
-                <path d="M4 6v2h2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h2V6zm4 22V8h16v20z" fill="currentColor"></path>
-                <path d="M12 2h8v2h-8z" fill="currentColor"></path>
-              </svg>
-            </n-icon>
+          <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>
    </section>
  </div>
@ -41,78 +19,75 @@

 <script setup>
 import { onMounted, ref } from 'vue'
-import { projectListApi, deleteProjectApi, historyMessageRoomList, historyMessageRoomDel } from '@/api/path'
-import { useRouter } from 'vue-router'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { historyMessageRoomList, historyMessageRoomDel, historyMessageRoomById } from '@/api/path'
+import { httpErrorHandle } from '@/utils'

-const chartEditStore = useChartEditStore()
+const emits = defineEmits(['finishInfo'])

 let list = ref([])
-let boardLsit = ref([])
-const router = useRouter()
-//获取看板List
-const fetchList = async () => {
-  const res = await projectListApi({
-    page: 1,
-    limit: 100,
-    status: 1
-  })
-  boardLsit.value = res.data
-}
-//删除项目看板
-const delProjectItem = async id => {
-  await deleteProjectApi({ ids: id })
-  fetchList()
-}
-
-const getBoardInfo = id => {
-  chartEditStore.setEdit(true)
-  router.push({path:'/board/' + id})
-}

+/**
+ * 过滤出第一条问题作为标题
+ * @param value
+ */
 const formatFristIssue = value => {
  const data = JSON.parse(value.content)
  return data[0].text
 }
-//获取聊天记录list
+/**
+ * 获取聊天记录list
+ */
 const messageList = async () => {
  const res = await historyMessageRoomList({
    current: 1,
-    size: 100,
+    size: 100
  })
  list.value = res.data.records
 }
-//删除聊天记录
+/**
+ * 删除聊天记录
+ * @param id
+ */
 const delMessageItem = async id => {
  const res = await historyMessageRoomDel(id)
-  if (res) {
+  if (res && res.code === 200) {
+    window['$message'].success('删除成功')
    messageList()
+    return
  }
+  httpErrorHandle()
 }

-const getMessageInfo = id => {
-  router.push('/chat/' + id)
+/**
+ * 获取聊天详情
+ * @param id
+ */
+const getMessageInfo = async id => {
+  const res = await historyMessageRoomById(id)
+  if (res && res.code === 200) {
+    res.data.content = JSON.parse(res.data.content)
+    emits('finishInfo', res.data)
+    return
+  }
+  httpErrorHandle()
 }

 onMounted(() => {
-  fetchList()
-  // messageList()
+  messageList()
 })
-
 defineExpose({
-  fetchList,
-  // messageList
+  messageList
 })
 </script>

 <style lang="scss" scoped>
 .history-box {
-  padding-top: 37px;
 }
 .history-title {
  font-size: 14px;
  color: #ffffff;
  font-weight: bold;
+  font-family: 'AlibabaPuHuiTi-Medium';
 }
 .history-list {
  margin: 10px 0;
@ -139,8 +114,13 @@ defineExpose({
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
+      font-family: 'AlibabaPuHuiTi-Regular';
    }
+
    .del-icon {
+      display: block;
+      height: 13px;
+      width: 13px;
      display: none;
    }
  }
--- a/src/views/AI/myBoard/index.vue
+++ b/src/views/AI/myBoard/index.vue
@ -35,6 +35,9 @@ import { goDialog, httpErrorHandle } from '@/utils'
 import { openNewWindow, previewPath } from '@/utils'
 import { useRouter } from 'vue-router'
 import { projectListApi, deleteProjectApi } from '@/api/path'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+
+const chartEditStore = useChartEditStore()
 let boardLsit = ref([])

 const router = useRouter()
@ -90,6 +93,7 @@ const deleteHandle = cardData => {
 // 编辑处理
 const editHandle = cardData => {
  if (!cardData) return
+  chartEditStore.setEdit(true)//编辑状态默认只请求一次接口，不定时请求
  router.push(`/board/` + cardData.id)
 }
 // 预览处理