21 changed files with 778 additions and 2034 deletions
-
2.env.development
-
1.env.production
-
1public/static/config.js
-
30src/api/ai/ai.js
-
74src/assets/iconfonts/light/iconfont.css
-
2src/assets/iconfonts/light/iconfont.js
-
119src/assets/iconfonts/light/iconfont.json
-
BINsrc/assets/iconfonts/light/iconfont.ttf
-
BINsrc/assets/iconfonts/light/iconfont.woff
-
BINsrc/assets/iconfonts/light/iconfont.woff2
-
159src/views/AIAssistant/AICataloging/Chat.vue
-
176src/views/AIAssistant/AICataloging/Chat2.vue
-
74src/views/AIAssistant/AICataloging/deepSeekChat.vue
-
672src/views/AIAssistant/AICataloging/index2.vue
-
394src/views/AIAssistant/AICataloging/running/index.vue
-
52src/views/AIAssistant/AICataloging/running/module/detail.vue
-
462src/views/AIAssistant/AIDigitalHuman/index.vue
-
404src/views/AIAssistant/AIDigitalHuman/index2.vue
-
159src/views/AIAssistant/AIDigitalHuman/message.vue
-
26src/views/components/category/PreviewForm.vue
-
5src/views/system/archivesClassify/module/tableList.vue
2
src/assets/iconfonts/light/iconfont.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,159 +0,0 @@ |
|||||
<template> |
|
||||
<div class="chat-container"> |
|
||||
<div class="chat-messages"> |
|
||||
<div v-for="(message, index) in messages" :key="index" :class="{ 'user-message': message.sender === 'user', 'bot-message': message.sender === 'bot' }"> |
|
||||
{{ message.content }} |
|
||||
</div> |
|
||||
<mavon-editor |
|
||||
ref="typingContainer" |
|
||||
class="md" |
|
||||
:value="editorContent" |
|
||||
:subfield="false" |
|
||||
:default-open="'preview'" |
|
||||
:toolbars-flag="false" |
|
||||
:editable="false" |
|
||||
:scroll-style="true" |
|
||||
:ishljs="true" |
|
||||
/> |
|
||||
</div> |
|
||||
<div class="chat-input"> |
|
||||
<input v-model="inputMessage" placeholder="输入你的问题..." @keyup.enter="sendMessage"> |
|
||||
<button @click="sendMessage">发送</button> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
messages: [], |
|
||||
inputMessage: '', |
|
||||
currentBotMessage: '', |
|
||||
editorContent: '' |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
async sendMessage() { |
|
||||
if (this.inputMessage.trim() === '') return |
|
||||
|
|
||||
this.messages.push({ sender: 'user', content: this.inputMessage }) |
|
||||
this.inputMessage = '' |
|
||||
this.currentBotMessage = '' |
|
||||
|
|
||||
try { |
|
||||
const response = await fetch('http://192.168.99.86:11434/api/generate', { |
|
||||
method: 'POST', |
|
||||
headers: { |
|
||||
'Content-Type': 'application/json' |
|
||||
}, |
|
||||
body: JSON.stringify({ |
|
||||
model: 'deepseek-r1:14b', |
|
||||
// model: 'qwen:7b', |
|
||||
prompt: this.messages[this.messages.length - 1].content, |
|
||||
stream: true |
|
||||
}) |
|
||||
}) |
|
||||
|
|
||||
if (!response.ok) { |
|
||||
throw new Error(`HTTP error! status: ${response.status}`) |
|
||||
} |
|
||||
|
|
||||
const reader = response.body.getReader() |
|
||||
const decoder = new TextDecoder('utf-8') |
|
||||
let done = false |
|
||||
|
|
||||
while (!done) { |
|
||||
const { done: isDone, value } = await reader.read() |
|
||||
done = isDone |
|
||||
if (done) break |
|
||||
|
|
||||
const chunk = decoder.decode(value) |
|
||||
const lines = chunk.split('\n') |
|
||||
|
|
||||
lines.forEach(line => { |
|
||||
if (line.trim() !== '') { |
|
||||
try { |
|
||||
const data = JSON.parse(line) |
|
||||
if (data.response) { |
|
||||
this.currentBotMessage += data.response |
|
||||
if (this.messages.length === 0 || this.messages[this.messages.length - 1].sender === 'user') { |
|
||||
this.messages.push({ sender: 'bot', content: '' }) |
|
||||
} |
|
||||
this.messages[this.messages.length - 1].content = this.currentBotMessage |
|
||||
} |
|
||||
} catch (error) { |
|
||||
console.error('解析JSON数据出错:', error) |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
// 更新 mavon-editor 的内容 |
|
||||
const lastBotMessage = this.messages.find(msg => msg.sender === 'bot') |
|
||||
if (lastBotMessage) { |
|
||||
this.editorContent = lastBotMessage.content |
|
||||
} |
|
||||
} catch (error) { |
|
||||
console.error('请求出错:', error) |
|
||||
this.messages.push({ sender: 'bot', content: '请求出错，请稍后再试。' }) |
|
||||
this.editorContent = '请求出错，请稍后再试。' |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
.chat-container { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
height: 500px; |
|
||||
border: 1px solid #ccc; |
|
||||
border-radius: 5px; |
|
||||
padding: 10px; |
|
||||
} |
|
||||
|
|
||||
.chat-messages { |
|
||||
flex: 1; |
|
||||
overflow-y: auto; |
|
||||
margin-bottom: 10px; |
|
||||
} |
|
||||
|
|
||||
.user-message { |
|
||||
text-align: right; |
|
||||
background-color: #e0f7fa; |
|
||||
padding: 5px; |
|
||||
margin: 5px; |
|
||||
border-radius: 5px; |
|
||||
} |
|
||||
|
|
||||
.bot-message { |
|
||||
text-align: left; |
|
||||
background-color: #f1f8e9; |
|
||||
padding: 5px; |
|
||||
margin: 5px; |
|
||||
border-radius: 5px; |
|
||||
} |
|
||||
|
|
||||
.chat-input { |
|
||||
display: flex; |
|
||||
} |
|
||||
|
|
||||
.chat-input input { |
|
||||
flex: 1; |
|
||||
padding: 5px; |
|
||||
border: 1px solid #ccc; |
|
||||
border-radius: 5px; |
|
||||
margin-right: 5px; |
|
||||
} |
|
||||
|
|
||||
.chat-input button { |
|
||||
padding: 5px 10px; |
|
||||
border: none; |
|
||||
background-color: #2196f3; |
|
||||
color: white; |
|
||||
border-radius: 5px; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,176 +0,0 @@ |
|||||
<template> |
|
||||
<div class="chat-container"> |
|
||||
<div class="chat-messages"> |
|
||||
<!-- 循环渲染消息 --> |
|
||||
<div v-for="(message, index) in messages" :key="index"> |
|
||||
<!-- 用户消息 --> |
|
||||
<div v-if="message.sender === 'user'" class="user-message"> |
|
||||
{{ message.content }} |
|
||||
</div> |
|
||||
<!-- 机器人消息 --> |
|
||||
<mavon-editor |
|
||||
v-else |
|
||||
ref="mavonEditorRef" |
|
||||
class="bot-message" |
|
||||
:value="message.content" |
|
||||
:subfield="false" |
|
||||
:default-open="'preview'" |
|
||||
:toolbars-flag="false" |
|
||||
:editable="false" |
|
||||
:scroll-style="true" |
|
||||
:ishljs="true" |
|
||||
/> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="chat-input"> |
|
||||
<input v-model="inputMessage" placeholder="输入你的问题..." @keyup.enter="sendMessage"> |
|
||||
<button @click="sendMessage">发送</button> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
messages: [], |
|
||||
inputMessage: '', |
|
||||
currentBotMessage: '' |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
messages: { |
|
||||
deep: true, |
|
||||
handler() { |
|
||||
this.$nextTick(() => { |
|
||||
const lastBotEditor = this.$refs.mavonEditorRef[this.$refs.mavonEditorRef.length - 1] |
|
||||
if (lastBotEditor) { |
|
||||
const editorContent = lastBotEditor.$el.querySelector('.editor-preview') |
|
||||
if (editorContent) { |
|
||||
editorContent.scrollTop = editorContent.scrollHeight |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
async sendMessage() { |
|
||||
if (this.inputMessage.trim() === '') return |
|
||||
|
|
||||
this.messages.push({ sender: 'user', content: this.inputMessage }) |
|
||||
this.inputMessage = '' |
|
||||
this.currentBotMessage = '' |
|
||||
|
|
||||
try { |
|
||||
const response = await fetch('http://192.168.99.86:11434/api/generate', { |
|
||||
method: 'POST', |
|
||||
headers: { |
|
||||
'Content-Type': 'application/json' |
|
||||
}, |
|
||||
body: JSON.stringify({ |
|
||||
model: 'deepseek-r1:14b', |
|
||||
// model: 'qwen:7b', |
|
||||
prompt: this.messages[this.messages.length - 1].content, |
|
||||
stream: true |
|
||||
}) |
|
||||
}) |
|
||||
|
|
||||
if (!response.ok) { |
|
||||
throw new Error(`HTTP error! status: ${response.status}`) |
|
||||
} |
|
||||
|
|
||||
const reader = response.body.getReader() |
|
||||
const decoder = new TextDecoder('utf-8') |
|
||||
let done = false |
|
||||
|
|
||||
while (!done) { |
|
||||
const { done: isDone, value } = await reader.read() |
|
||||
done = isDone |
|
||||
if (done) break |
|
||||
|
|
||||
const chunk = decoder.decode(value) |
|
||||
const lines = chunk.split('\n') |
|
||||
|
|
||||
lines.forEach((line) => { |
|
||||
if (line.trim() !== '') { |
|
||||
try { |
|
||||
const data = JSON.parse(line) |
|
||||
if (data.response) { |
|
||||
this.currentBotMessage += data.response |
|
||||
if ( |
|
||||
this.messages.length === 0 || |
|
||||
this.messages[this.messages.length - 1].sender === 'user' |
|
||||
) { |
|
||||
this.messages.push({ sender: 'bot', content: '' }) |
|
||||
} |
|
||||
this.messages[this.messages.length - 1].content = this.currentBotMessage |
|
||||
} |
|
||||
} catch (error) { |
|
||||
console.error('解析JSON数据出错:', error) |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
} catch (error) { |
|
||||
console.error('请求出错:', error) |
|
||||
this.messages.push({ sender: 'bot', content: '请求出错，请稍后再试。' }) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
.chat-container { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
height: 500px; |
|
||||
border: 1px solid #ccc; |
|
||||
border-radius: 5px; |
|
||||
padding: 10px; |
|
||||
} |
|
||||
|
|
||||
.chat-messages { |
|
||||
flex: 1; |
|
||||
overflow-y: auto; |
|
||||
margin-bottom: 10px; |
|
||||
} |
|
||||
|
|
||||
.user-message { |
|
||||
text-align: right; |
|
||||
background-color: #e0f7fa; |
|
||||
padding: 5px; |
|
||||
margin: 5px; |
|
||||
border-radius: 5px; |
|
||||
} |
|
||||
|
|
||||
.bot-message { |
|
||||
text-align: left; |
|
||||
background-color: #f1f8e9; |
|
||||
padding: 5px; |
|
||||
margin: 5px; |
|
||||
border-radius: 5px; |
|
||||
} |
|
||||
|
|
||||
.chat-input { |
|
||||
display: flex; |
|
||||
} |
|
||||
|
|
||||
.chat-input input { |
|
||||
flex: 1; |
|
||||
padding: 5px; |
|
||||
border: 1px solid #ccc; |
|
||||
border-radius: 5px; |
|
||||
margin-right: 5px; |
|
||||
} |
|
||||
|
|
||||
.chat-input button { |
|
||||
padding: 5px 10px; |
|
||||
border: none; |
|
||||
background-color: #2196f3; |
|
||||
color: white; |
|
||||
border-radius: 5px; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,74 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<h1>DeepSeek问答</h1> |
|
||||
<input v-model="question" placeholder="请输入你的问题" @keyup.enter="sendQuestion"> |
|
||||
<button @click="sendQuestion">发送</button> |
|
||||
<div v-if="answer">{{ answer }}</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import axios from 'axios' |
|
||||
|
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
question: '', |
|
||||
answer: '' |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
async sendQuestion() { |
|
||||
if (!this.question) return |
|
||||
|
|
||||
try { |
|
||||
// Ollama API端点，根据实际情况修改 |
|
||||
const apiUrl = 'http://192.168.99.86:11434/api/generate' |
|
||||
const response = await axios.post(apiUrl, { |
|
||||
model: 'deepseek-r1:14b', // 使用DeepSeek模型 |
|
||||
prompt: this.question |
|
||||
}) |
|
||||
console.log('response', response) |
|
||||
let fullAnswer = '' |
|
||||
const resultStr = response.data |
|
||||
// 假设对象之间用换行符分隔，根据实际情况调整 |
|
||||
const lines = resultStr.split('\n') |
|
||||
const resultArray = [] |
|
||||
lines.forEach(line => { |
|
||||
if (line.trim()) { |
|
||||
try { |
|
||||
const obj = JSON.parse(line) |
|
||||
resultArray.push(obj) |
|
||||
} catch (error) { |
|
||||
console.error('解析 JSON 时出错:', error) |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
resultArray.forEach(chunk => { |
|
||||
if (chunk.response) { |
|
||||
fullAnswer += chunk.response |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
this.answer = fullAnswer |
|
||||
} catch (error) { |
|
||||
console.error('请求出错:', error) |
|
||||
this.answer = '请求出错，请稍后再试。' |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
/* 可以添加一些样式 */ |
|
||||
input { |
|
||||
margin-right: 10px; |
|
||||
padding: 5px; |
|
||||
} |
|
||||
|
|
||||
button { |
|
||||
padding: 5px 10px; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,672 +0,0 @@ |
|||||
<template> |
|
||||
<div class="app-container category-container" style="height: calc(100vh - 140px);"> |
|
||||
<!-- 门类列表 --> |
|
||||
<div class="container-main"> |
|
||||
<div class="elect-cont-left"> |
|
||||
<div class="container-left"> |
|
||||
<span class="right-top-line" /> |
|
||||
<span class="left-bottom-line" /> |
|
||||
<!--门类树状结构--> |
|
||||
<div class="tree-scroll"> |
|
||||
<el-scrollbar style="height: calc(100vh - 230px);"> |
|
||||
<el-tree ref="categroyTree" v-loading="crud.loading" class="arc-tree arc-tree-01" :data="crud.data" :props="defaultProps" node-key="id" :expand-on-click-node="false" highlight-current @node-click="handleNodeClick"> |
|
||||
<span slot-scope="{ node, data }" class="custom-tree-node"> |
|
||||
<el-tooltip :content="node.label" placement="left" :enterable="false" effect="dark"> |
|
||||
<span v-if="data.isType === 0"> |
|
||||
{{ data.label }} |
|
||||
</span> |
|
||||
<span v-if="data.isType === 1" class="iconFolder tree-text"> |
|
||||
{{ data.label }} |
|
||||
</span> |
|
||||
<span v-if="data.isType === 2" class="iconArch tree-text"> |
|
||||
{{ data.label }} |
|
||||
</span> |
|
||||
<span v-if="data.isType === 3" class="iconFile tree-text"> |
|
||||
{{ data.label }} |
|
||||
</span> |
|
||||
</el-tooltip> |
|
||||
</span> |
|
||||
</el-tree> |
|
||||
</el-scrollbar> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<!-- 门类管理tab --> |
|
||||
<div class="elect-cont-right"> |
|
||||
|
|
||||
<Chat /> |
|
||||
|
|
||||
<DeepSeekChat /> |
|
||||
|
|
||||
<div v-if="selectedCategory.isType === 2" class="container-right"> |
|
||||
<span class="right-top-line" /> |
|
||||
<span class="left-bottom-line" /> |
|
||||
<div style="display: flex; justify-content: flex-start;"> |
|
||||
<div class="upload-btn"> |
|
||||
<input id="upFile" type="file" name="upFile" multiple @change="changeAiFile($event)"> |
|
||||
<el-button :loading="aiLoading" size="small" type="primary"><i :class="['iconfont', aiLoading ? 'icon-huoqu' : 'icon-shangchuan']" />{{ aiLoading ? 'AI辅助著录识别中' : '选择文件' }}</el-button> |
|
||||
</div> |
|
||||
<!-- margin-left: 10px; line-height: 34px; height: 106px; overflow: hidden; overflow-y: scroll; --> |
|
||||
<div style="flex: 1; font-size: 12px; display: flex; line-height: 34px; "> |
|
||||
<div v-for="item in fileList" :key="item.name" class="file-list" style="margin-left: 10px;"> |
|
||||
<i class="iconfont icon-xiaowenjian" style="font-size: 14px;" /> |
|
||||
{{ item.name }} |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="ai-category-main"> |
|
||||
<div class="ai-des-left"> |
|
||||
<div class="des-title"> |
|
||||
<p>著录项</p> |
|
||||
</div> |
|
||||
<div class="ai-des-form"> |
|
||||
<PreviewForm |
|
||||
ref="previewForm" |
|
||||
:is-has-code="true" |
|
||||
:is-disabled="false" |
|
||||
:form-preview-data.sync="formPreviewData" |
|
||||
:selected-category="selectedCategory" |
|
||||
:is-des-form-type="isDesFormType" |
|
||||
:collect-level="collectLevel" |
|
||||
:category-menu="categoryMenu" |
|
||||
:is-ai-category="true" |
|
||||
/> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="ai-des-right"> |
|
||||
<div class="des-title"> |
|
||||
<p>AI识别数据</p> |
|
||||
</div> |
|
||||
<div class="ai-des-json"> |
|
||||
<pre v-if="aiJsonData" ref="typingContainer" v-highlightjs="displayedText">{{ displayedText }}</pre> |
|
||||
</div> |
|
||||
<div v-if="typingFinished" style="text-align: right;"> |
|
||||
<el-button @click="saveAiData">保存</el-button> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
import crudCategory from '@/api/system/category/category' |
|
||||
import CRUD, { presenter, header } from '@crud/crud' |
|
||||
import PreviewForm from '@/views/components/category/PreviewForm' |
|
||||
import { FetchInitCategoryInputFieldByPid, FetchCategoryMenu } from '@/api/system/category/category' |
|
||||
import { FetchAIResultZhulu } from '@/api/collect/collect' |
|
||||
import { getCurrentTime } from '@/utils/index' |
|
||||
import { archivesUpload } from '@/utils/upload' |
|
||||
import { mapGetters } from 'vuex' |
|
||||
|
|
||||
import Chat from './Chat.vue' |
|
||||
import DeepSeekChat from './deepSeekChat.vue' |
|
||||
|
|
||||
export default { |
|
||||
name: 'AICataloging', |
|
||||
components: { PreviewForm, DeepSeekChat, Chat }, |
|
||||
cruds() { |
|
||||
return [ |
|
||||
CRUD({ |
|
||||
title: 'AI辅助著录', url: 'api/category/fondMenu', |
|
||||
crudMethod: { ...crudCategory }, |
|
||||
optShow: { |
|
||||
add: false, |
|
||||
edit: false, |
|
||||
del: false, |
|
||||
download: false, |
|
||||
group: false |
|
||||
} |
|
||||
}) |
|
||||
] |
|
||||
}, |
|
||||
mixins: [presenter(), header()], |
|
||||
provide() { |
|
||||
return { |
|
||||
parentsData: this |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
defaultProps: { |
|
||||
children: 'children', |
|
||||
label: 'label' |
|
||||
}, |
|
||||
selectedCategory: {}, |
|
||||
formPreviewData: [], |
|
||||
isDesFormType: 'arcives', |
|
||||
collectLevel: 3, |
|
||||
categoryMenu: [], |
|
||||
nowDate: '', // 当前时间 |
|
||||
aiLoading: false, |
|
||||
fileList: [], |
|
||||
aiJsonData: null, |
|
||||
displayedText: '', |
|
||||
typingInterval: null, |
|
||||
typingFinished: false, |
|
||||
currentLineIndex: 0 |
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
...mapGetters([ |
|
||||
'baseApi' |
|
||||
]) |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.getCategoryDataTree() |
|
||||
}, |
|
||||
methods: { |
|
||||
getCategoryDataTree() { |
|
||||
FetchCategoryMenu().then(res => { |
|
||||
this.categoryMenu = res |
|
||||
}) |
|
||||
}, |
|
||||
filterData(data) { |
|
||||
return data.filter(node => { |
|
||||
if (node.children && node.children.length > 0) { |
|
||||
node.children = this.filterData(node.children) // 递归处理子节点 |
|
||||
} |
|
||||
return node.isType !== 3 // 过滤掉isType为3的节点 |
|
||||
}) |
|
||||
}, |
|
||||
// 逆归实现 获取指定元素 |
|
||||
findNode(tree, func) { |
|
||||
for (const node of tree) { |
|
||||
if (func(node)) return node |
|
||||
if (node.children) { |
|
||||
const res = this.findNode(node.children, func) |
|
||||
if (res) return res |
|
||||
} |
|
||||
} |
|
||||
return null |
|
||||
}, |
|
||||
// 根据父级展开全部子级 |
|
||||
expandAllChildren(node, targetElement) { |
|
||||
node.expanded = true |
|
||||
// 递归展开当前节点的每个子节点 |
|
||||
if (node.childNodes && node.childNodes.length > 0) { |
|
||||
for (let i = 0; i < node.childNodes.length; i++) { |
|
||||
if (node.childNodes[i].data.id === targetElement.id) { |
|
||||
this.$refs.categroyTree.setCurrentKey(node.childNodes[i]) |
|
||||
} |
|
||||
this.expandAllChildren(node.childNodes[i], targetElement) |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
// 转换函数，将原始数据转换为el-tree所需格式 |
|
||||
transformData(rawData) { |
|
||||
return rawData.map(item => { |
|
||||
return { |
|
||||
label: item.fondName, |
|
||||
isType: 0, |
|
||||
id: item.fondsId, |
|
||||
fondsNo: item.fondsNo, |
|
||||
children: item.categoryList.map(category => { |
|
||||
return { |
|
||||
label: category.cnName, |
|
||||
cnName: category.cnName, |
|
||||
id: category.id, |
|
||||
arrangeType: category.arrangeType, |
|
||||
isType: category.isType, |
|
||||
fondsId: item.fondsId, |
|
||||
fondName: item.fondName, |
|
||||
fondsNo: item.fondsNo, |
|
||||
children: this.transformChildren(category.children, item.fondsId, item.fondName, item.fondsNo) |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
// 递归函数，用于处理数据的子节点 |
|
||||
transformChildren(children, fondsId, fondName, fondsNo) { |
|
||||
return children.map(child => { |
|
||||
return { |
|
||||
label: child.cnName, |
|
||||
cnName: child.cnName, |
|
||||
id: child.id, |
|
||||
isType: child.isType, |
|
||||
pid: child.pid, |
|
||||
code: child.code, |
|
||||
arrangeType: child.arrangeType, |
|
||||
fondsId: fondsId, |
|
||||
fondName: fondName, |
|
||||
fondsNo: fondsNo, |
|
||||
children: child.children.length ? this.transformChildren(child.children, fondsId, fondName, fondsNo) : [] |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
// 找顶级节点 |
|
||||
findTopLevelNode(data, fondsId) { |
|
||||
for (let i = 0; i < data.length; i++) { |
|
||||
if (data[i].id === fondsId) { |
|
||||
return data[i] |
|
||||
} |
|
||||
} |
|
||||
return null |
|
||||
}, |
|
||||
[CRUD.HOOK.afterRefresh]() { |
|
||||
this.crud.data = this.filterData(this.transformData(this.crud.data)) |
|
||||
this.$nextTick(() => { |
|
||||
let currentKey |
|
||||
if (localStorage.getItem('currentArchivesKey') !== null) { |
|
||||
currentKey = JSON.parse(localStorage.getItem('currentArchivesKey')) |
|
||||
// 删除门类节点后 |
|
||||
if (this.$refs.categroyTree.getCurrentKey(currentKey.id) == null) { |
|
||||
localStorage.removeItem('currentArchivesKey') |
|
||||
} |
|
||||
this.topLevelNode = this.findTopLevelNode(this.crud.data, currentKey.fondsId) |
|
||||
// 如果找到了顶级节点，则从该节点开始递归查找指定元素 |
|
||||
if (this.topLevelNode) { |
|
||||
if (currentKey) { |
|
||||
// 展开顶级节点的子节点 |
|
||||
if (currentKey.isType === 1) { |
|
||||
currentKey = this.findNode(this.crud.data[0].children, (node) => { |
|
||||
return node.isType !== 1 |
|
||||
}) |
|
||||
} |
|
||||
this.expandAllChildren(this.$refs.categroyTree.getNode(this.topLevelNode), currentKey) |
|
||||
} else { |
|
||||
this.defaultSetting(currentKey) |
|
||||
} |
|
||||
} else { |
|
||||
this.defaultSetting(currentKey) |
|
||||
} |
|
||||
} else { |
|
||||
this.defaultSetting(currentKey) |
|
||||
} |
|
||||
if (currentKey && currentKey.id) { |
|
||||
this.$nextTick(() => { |
|
||||
// 选中节点的门类详情 |
|
||||
this.handleNodeClick(currentKey) |
|
||||
}) |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
defaultSetting(currentKey) { |
|
||||
if (this.crud.data[0].isType === 0) { |
|
||||
currentKey = this.findNode(this.crud.data[0].children, (node) => { |
|
||||
return node.isType !== 1 |
|
||||
}) |
|
||||
this.expandAllChildren(this.$refs.categroyTree.getNode(this.crud.data[0]), currentKey) |
|
||||
} else { |
|
||||
currentKey = this.crud.data[0] |
|
||||
this.expandAllChildren(this.$refs.categroyTree.getNode(this.crud.data[0]), currentKey) |
|
||||
} |
|
||||
}, |
|
||||
// 选中门类后，设置门类详情数据 |
|
||||
handleNodeClick(val) { |
|
||||
if (val) { |
|
||||
localStorage.setItem('currentArchivesKey', JSON.stringify(val)) |
|
||||
this.selectedCategory = val |
|
||||
this.$nextTick(() => { |
|
||||
this.getFormInfo() |
|
||||
}) |
|
||||
} |
|
||||
}, |
|
||||
getFormInfo() { |
|
||||
// console.log('this.selectedCategory.arrangeType', this.selectedCategory.arrangeType) |
|
||||
// if (this.selectedCategory.arrangeType === 1) { |
|
||||
// this.collectLevel = 3 |
|
||||
// } else if (this.selectedCategory.arrangeType === 2) { |
|
||||
// this.collectLevel = 2 |
|
||||
// } else { |
|
||||
// this.collectLevel = 1 |
|
||||
// } |
|
||||
const params = { |
|
||||
'categoryId': this.selectedCategory.id, |
|
||||
'categoryLevel': this.collectLevel |
|
||||
} |
|
||||
FetchInitCategoryInputFieldByPid(params).then(data => { |
|
||||
this.formPreviewData = data |
|
||||
console.log('formPreviewData', this.formPreviewData) |
|
||||
this.isDesFormType = 'arcives' |
|
||||
this.$nextTick(() => { |
|
||||
this.$refs.previewForm.archivesType = 'add' |
|
||||
this.$refs.previewForm.FetchNoFormatField(this.selectedCategory.id) |
|
||||
}) |
|
||||
}) |
|
||||
}, |
|
||||
// 选择附件 |
|
||||
async changeAiFile(e) { |
|
||||
// 替换文件时清空 aiJsonData |
|
||||
this.aiJsonData = null |
|
||||
this.currentLineIndex = 0 |
|
||||
this.displayedText = '' |
|
||||
this.typingFinished = false |
|
||||
this.typingInterval = null |
|
||||
// if (this.typingInterval) { |
|
||||
// clearInterval(this.typingInterval); |
|
||||
// } |
|
||||
|
|
||||
const selectedFiles = Array.from(e.target.files) |
|
||||
const imageFiles = selectedFiles.filter(file => file.type.startsWith('image/')) |
|
||||
const nonImageFiles = selectedFiles.filter(file => !file.type.startsWith('image/')) |
|
||||
|
|
||||
// 不允许同时选择图片和非图片文件 |
|
||||
if (imageFiles.length > 0 && nonImageFiles.length > 0) { |
|
||||
this.$message.error('不能同时选择图片和其他类型文件，请重新选择') |
|
||||
return |
|
||||
} |
|
||||
|
|
||||
const existingImageFiles = this.fileList.filter(item => item.formatType === 'image') |
|
||||
const existingNonImageFiles = this.fileList.filter(item => item.formatType !== 'image') |
|
||||
|
|
||||
if (imageFiles.length > 0) { |
|
||||
// if (existingImageFiles.length > 0) { |
|
||||
// if (existingImageFiles.length + imageFiles.length > 3) { |
|
||||
// // 若加入新图片会超过 3 张，清空已有图片 |
|
||||
// this.fileList = this.fileList.filter(item => item.formatType !== 'image') |
|
||||
// } |
|
||||
// } else if (existingNonImageFiles.length > 0) { |
|
||||
// // 若已有非图片文件，清空已有非图片文件 |
|
||||
// this.fileList = this.fileList.filter(item => item.formatType === 'image') |
|
||||
// } |
|
||||
|
|
||||
// // 检查图片文件数量 |
|
||||
// if (imageFiles.length > 3) { |
|
||||
// this.$message.error('图片文件最多只能选择 3 个，请重新选择') |
|
||||
// return |
|
||||
// } |
|
||||
if (existingNonImageFiles.length > 0) { |
|
||||
// 若已有非图片文件，清空已有非图片文件 |
|
||||
this.fileList = this.fileList.filter(item => item.formatType === 'image') |
|
||||
} |
|
||||
|
|
||||
for (const file of imageFiles) { |
|
||||
// 检查文件是否已存在 |
|
||||
if (this.fileList.some(item => item.name === file.name)) { |
|
||||
this.$message.warning(`文件 ${file.name} 已存在，请勿重复上传`) |
|
||||
continue |
|
||||
} |
|
||||
|
|
||||
const fileInfo = { |
|
||||
file: file, |
|
||||
size: file.size, |
|
||||
formatType: file.type.substring(0, file.type.indexOf('/')), |
|
||||
name: file.name, |
|
||||
postfix: file.name.substring( |
|
||||
file.name.lastIndexOf('.') + 1, |
|
||||
file.name.length |
|
||||
), |
|
||||
px: '' |
|
||||
} |
|
||||
|
|
||||
const fileBase64 = await this.getBase64(file) |
|
||||
const res = await this.getImgPx(fileBase64) |
|
||||
fileInfo.px = res.width + 'px*' + res.height + 'px' |
|
||||
|
|
||||
this.fileList.push(fileInfo) |
|
||||
} |
|
||||
this.FetchAiFileUplaod(this.fileList) |
|
||||
} else if (nonImageFiles.length > 0) { |
|
||||
if (existingNonImageFiles.length > 0) { |
|
||||
// 若已有非图片文件，直接替换 |
|
||||
this.fileList = this.fileList.filter(item => item.formatType === 'image') |
|
||||
} else if (existingImageFiles.length > 0) { |
|
||||
// 若已有图片文件，清空已有图片文件 |
|
||||
this.fileList = this.fileList.filter(item => item.formatType !== 'image') |
|
||||
} |
|
||||
|
|
||||
// 检查非图片文件数量 |
|
||||
if (nonImageFiles.length > 1) { |
|
||||
this.$message.error('非图片文件最多只能选择 1 个，请重新选择') |
|
||||
return |
|
||||
} |
|
||||
|
|
||||
for (const file of nonImageFiles) { |
|
||||
// 检查文件是否已存在 |
|
||||
if (this.fileList.some(item => item.name === file.name)) { |
|
||||
this.$message.warning(`文件 ${file.name} 已存在，请勿重复上传`) |
|
||||
continue |
|
||||
} |
|
||||
|
|
||||
const fileInfo = { |
|
||||
file: file, |
|
||||
size: file.size, |
|
||||
formatType: file.type.substring(0, file.type.indexOf('/')), |
|
||||
name: file.name, |
|
||||
postfix: file.name.substring( |
|
||||
file.name.lastIndexOf('.') + 1, |
|
||||
file.name.length |
|
||||
), |
|
||||
px: '' |
|
||||
} |
|
||||
this.fileList.push(fileInfo) |
|
||||
} |
|
||||
this.FetchAiFileUplaod(this.fileList) |
|
||||
} |
|
||||
}, |
|
||||
FetchAiFileUplaod(files) { |
|
||||
this.aiLoading = true |
|
||||
this.nowDate = getCurrentTime() |
|
||||
const promiseArray = files.map(async(item, index) => { |
|
||||
const json = {} |
|
||||
json.file_name = item.name |
|
||||
json.file_size = item.size |
|
||||
json.file_type = item.postfix |
|
||||
json.file_path = '' |
|
||||
json.archive_id = this.arcId |
|
||||
json.file_dpi = item.px |
|
||||
json.file_thumbnail = '' |
|
||||
json.create_time = this.nowDate |
|
||||
json.id = null |
|
||||
json.last_modified = item.file.lastModified |
|
||||
return json |
|
||||
}) |
|
||||
console.log('promiseArray', promiseArray) |
|
||||
const fileDefault = files.map(item => item.file) |
|
||||
|
|
||||
Promise.all(promiseArray) |
|
||||
.then((arrayUpload) => { |
|
||||
archivesUpload(this.baseApi + '/api/collect/uploadAssistEnterFiles', |
|
||||
fileDefault, |
|
||||
this.selectedCategory.id, |
|
||||
this.arcId, |
|
||||
JSON.stringify(arrayUpload) |
|
||||
).then(res => { |
|
||||
if (res.data.data !== null) { |
|
||||
const params = { |
|
||||
'code': res.data.data.code, |
|
||||
'id': res.data.data.id |
|
||||
} |
|
||||
const fetchAiZhuluResult = () => { |
|
||||
// 检查是否应该继续请求 |
|
||||
if (!this.shouldContinueFetching) return |
|
||||
|
|
||||
FetchAIResultZhulu(params).then((res) => { |
|
||||
const data = JSON.parse(res) |
|
||||
console.log('data', data) |
|
||||
if (data.result !== null && data.status === 'success') { |
|
||||
this.$message({ message: '解析著录附件成功', type: 'success', offset: 8 }) |
|
||||
this.aiJsonData = data.result |
|
||||
this.startTypingEffect() |
|
||||
} else { |
|
||||
setTimeout(fetchAiZhuluResult, 3000) |
|
||||
} |
|
||||
}).catch(err => { |
|
||||
console.log(err) |
|
||||
}) |
|
||||
} |
|
||||
fetchAiZhuluResult() |
|
||||
} else { |
|
||||
this.$message({ message: '著录附件传输失败', type: 'error', offset: 8 }) |
|
||||
} |
|
||||
}) |
|
||||
}) |
|
||||
.catch((error) => { |
|
||||
console.error(error) |
|
||||
}) |
|
||||
}, |
|
||||
startTypingEffect() { |
|
||||
const lines = this.aiJsonData.split('\n') |
|
||||
this.currentLineIndex = 0 |
|
||||
this.displayedText = '' |
|
||||
this.typingFinished = false |
|
||||
|
|
||||
this.typingInterval = setInterval(() => { |
|
||||
if (this.currentLineIndex < lines.length) { |
|
||||
this.displayedText += lines[this.currentLineIndex] + '\n' |
|
||||
this.currentLineIndex++ |
|
||||
} else { |
|
||||
clearInterval(this.typingInterval) |
|
||||
|
|
||||
setTimeout(() => { |
|
||||
this.typingFinished = true |
|
||||
if (this.aiJsonData) { |
|
||||
// this.$refs.previewForm.archivesType = 'add' |
|
||||
this.$refs.previewForm.addOrUpdateForm = JSON.parse(this.aiJsonData) |
|
||||
this.aiLoading = false |
|
||||
} |
|
||||
}, 1000) |
|
||||
} |
|
||||
|
|
||||
// 滚动条始终保持在底部 |
|
||||
const container = this.$refs.typingContainer |
|
||||
if (container) { |
|
||||
container.scrollTop = container.scrollHeight |
|
||||
} |
|
||||
}, 200) |
|
||||
}, |
|
||||
saveAiData() { |
|
||||
this.$router.push({ path: '/collectReorganizi/collectionLibrary' }) |
|
||||
}, |
|
||||
// 将上传的图片转为base64 |
|
||||
getBase64(file) { |
|
||||
const reader = new FileReader() |
|
||||
reader.readAsDataURL(file) |
|
||||
return new Promise((resolve) => { |
|
||||
reader.onload = () => { |
|
||||
resolve(reader.result) |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
// 获取图片的分辨率 |
|
||||
getImgPx(img) { |
|
||||
const image = new Image() |
|
||||
image.src = img |
|
||||
return new Promise((resolve) => { |
|
||||
image.onload = () => { |
|
||||
const width = image.width |
|
||||
const height = image.height |
|
||||
resolve({ width, height }) |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
@import "~@/assets/styles/mixin.scss"; |
|
||||
@import "~@/assets/styles/variables.scss"; |
|
||||
.category-container { |
|
||||
.elect-cont-left{ |
|
||||
width: 296px !important; |
|
||||
} |
|
||||
} |
|
||||
.openSidebar .category-container .elect-cont-right{ |
|
||||
width: calc(100vw - 614px) !important; |
|
||||
} |
|
||||
.hideSidebar .category-container .elect-cont-right { |
|
||||
width: calc(100vw - 412px) !important; |
|
||||
} |
|
||||
.tree-scroll{ |
|
||||
font-size: 14px; |
|
||||
} |
|
||||
.ai-category-main{ |
|
||||
display: flex; |
|
||||
justify-content: flex-start; |
|
||||
margin-top: 10px; |
|
||||
|
|
||||
.ai-des-left{ |
|
||||
width: 740px; |
|
||||
margin-right: 20px; |
|
||||
} |
|
||||
.ai-des-right{ |
|
||||
flex: 1; |
|
||||
} |
|
||||
|
|
||||
.ai-des-form{ |
|
||||
height: calc(100vh - 262px); |
|
||||
overflow-y: auto; |
|
||||
padding-right: 10px; |
|
||||
} |
|
||||
|
|
||||
.ai-des-json{ |
|
||||
height: calc(100vh - 300px); |
|
||||
margin-bottom: 10px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.prearch-upload{ |
|
||||
margin-right: 0 !important; |
|
||||
::v-deep .el-form-item__label{ |
|
||||
position: relative; |
|
||||
&::before{ |
|
||||
position: absolute; |
|
||||
top: -2px; |
|
||||
right: 70px; |
|
||||
content: "*"; |
|
||||
font-size: 10px; |
|
||||
color: #ff4949; |
|
||||
font-style: normal; |
|
||||
} |
|
||||
} |
|
||||
::v-deep .el-form-item__content{ |
|
||||
position: relative; |
|
||||
width: 540px !important; |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
.input-style{ |
|
||||
width: 500px; |
|
||||
height: 34px; |
|
||||
line-height: 34px; |
|
||||
padding: 0 20px; |
|
||||
border: 1px solid #e6e8ed; |
|
||||
border-radius: 3px; |
|
||||
// &.error-box{ |
|
||||
// border-color: #ed4a41; |
|
||||
// } |
|
||||
} |
|
||||
// .error-tip{ |
|
||||
// position: absolute; |
|
||||
// left: 0; |
|
||||
// bottom: -26px; |
|
||||
// font-size: 12px; |
|
||||
// color: #ff4949; |
|
||||
// } |
|
||||
.upload-btn{ |
|
||||
position: relative; |
|
||||
width:96px; |
|
||||
margin-right: 0 !important; |
|
||||
margin-left: 10px; |
|
||||
overflow: initial !important; |
|
||||
#upFile{ |
|
||||
position: absolute; |
|
||||
left: 0; |
|
||||
top: 0; |
|
||||
// opacity: 0; |
|
||||
width: 84px; |
|
||||
height: 34px; |
|
||||
} |
|
||||
.el-button{ |
|
||||
margin-top: -2px; |
|
||||
font-weight: bold; |
|
||||
border-color: #0348f3; |
|
||||
color: #0348f3; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
pre { |
|
||||
background-color: #f4f4f4; |
|
||||
padding: 10px; |
|
||||
border: 1px solid #ccc; |
|
||||
border-radius: 4px; |
|
||||
white-space: pre-wrap; |
|
||||
word-wrap: break-word; |
|
||||
height: calc(100vh - 300px); |
|
||||
overflow-y: auto; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,404 +0,0 @@ |
|||||
<template> |
|
||||
<div class="app-container category-container" style="position: relative; height: calc(100vh - 140px);"> |
|
||||
<!-- <div class="ai-wrapper"> |
|
||||
<iframe id="myIframe" style="position: absolute; top: 0; left: -34%; border: none; z-index: 9;" width="100%" height="100%" src="https://f.3dman.cn/art/sDpbYwwJ/fbx/CdYqVH95/index.html" /> |
|
||||
</div> --> |
|
||||
<div class="chat-wrapper"> |
|
||||
<div ref="chatContent" class="chat-content" /> |
|
||||
<div class="chat-send"> |
|
||||
<textarea v-model="message" cols="50" rows="7" placeholder="请输入你想咨询的问题" @input="updateSendButtonState" @keypress="handleKeyPress" /> |
|
||||
<div class="send-button-container"> |
|
||||
<div class="hot-word"> |
|
||||
<span v-for="(word, index) in hotWords" :key="index" @click="handleHotWordClick(word)">{{ word }}</span> |
|
||||
</div> |
|
||||
<span class="send-button" :class="{ 'send-disabled-button': isSendButtonDisabled }" :disabled="isSendButtonDisabled" @click="sendMessage">发送</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
export default { |
|
||||
name: 'AIDigitalHuman', |
|
||||
components: { }, |
|
||||
data() { |
|
||||
return { |
|
||||
message: '', |
|
||||
isSendButtonDisabled: true, |
|
||||
isBotReplying: false, |
|
||||
isBotTyping: false, |
|
||||
hotWords: ['什么是“人工智能”？', '什么是“AI大模型”？'] |
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
}, |
|
||||
created() { |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.sendWelcomeMessage() |
|
||||
this.updateSendButtonState() |
|
||||
}, |
|
||||
methods: { |
|
||||
sendWelcomeMessage() { |
|
||||
const welcomeMessage = '您好！请问有什么问题可以帮您解答吗？' |
|
||||
this.appendMessage(welcomeMessage, false, false, true) |
|
||||
}, |
|
||||
updateSendButtonState() { |
|
||||
this.isSendButtonDisabled = this.message.trim() === '' || this.isBotReplying || this.isBotTyping |
|
||||
}, |
|
||||
sendMessage() { |
|
||||
if (!this.isBotReplying && !this.isBotTyping) { |
|
||||
const message = this.message.trim() |
|
||||
if (message) { |
|
||||
this.appendMessage(message, true, false) |
|
||||
this.message = '' |
|
||||
this.isSendButtonDisabled = true |
|
||||
|
|
||||
this.appendMessage('', false, true) |
|
||||
this.isBotReplying = true |
|
||||
|
|
||||
// axios.post(`${this.config.apiUrl}/api/v1/workspace/dxhtsg/chat`, { |
|
||||
// message, |
|
||||
// mode: 'chat' |
|
||||
// }, { |
|
||||
// headers: { |
|
||||
// 'Authorization': this.config.apiKey |
|
||||
// } |
|
||||
// }) |
|
||||
// .then((res) => { |
|
||||
// const loadingElement = this.$refs.chatContent.querySelector('.loading') |
|
||||
// if (loadingElement) { |
|
||||
// loadingElement.parentNode.remove() |
|
||||
// } |
|
||||
// const botReply = res.data.textResponse.replace(/\【(\/)?SYS\】/gi, '飞天智能AI小助手') |
|
||||
// this.appendMessage('', false, false) |
|
||||
// this.isBotTyping = true |
|
||||
// let i = 0 |
|
||||
// const speed = 50 |
|
||||
|
|
||||
// const typeWriter = () => { |
|
||||
// if (!this.isBotTyping) { |
|
||||
// return |
|
||||
// } |
|
||||
// if (i < botReply.length) { |
|
||||
// const lastBotMessage = this.$refs.chatContent.querySelectorAll('.bot-message:last-child p')[0] |
|
||||
// lastBotMessage.innerHTML += botReply.charAt(i) |
|
||||
// i++ |
|
||||
// setTimeout(typeWriter, speed) |
|
||||
// this.$refs.chatContent.scrollTop = this.$refs.chatContent.scrollHeight |
|
||||
// } else { |
|
||||
// this.isBotTyping = false |
|
||||
// this.isBotReplying = false |
|
||||
// const stopButton = this.$refs.chatContent.querySelector('#stop-btn') |
|
||||
// if (stopButton) { |
|
||||
// stopButton.remove() |
|
||||
// } |
|
||||
// } |
|
||||
// } |
|
||||
// typeWriter() |
|
||||
// }) |
|
||||
// .catch((err) => { |
|
||||
// console.log(err) |
|
||||
// // 这里需要引入 layer 库来实现提示框功能 |
|
||||
// // layer.msg('因网络原因，您的问题暂时无法解答，请稍后再试！', { |
|
||||
// // offset: [window.innerHeight / 2 - 100, window.innerWidth / 2 + 100], |
|
||||
// // anim: 5 |
|
||||
// // }); |
|
||||
// const loadingElement = this.$refs.chatContent.querySelector('.loading') |
|
||||
// if (loadingElement) { |
|
||||
// loadingElement.parentNode.remove() |
|
||||
// } |
|
||||
// this.isBotTyping = false |
|
||||
// this.isBotReplying = false |
|
||||
// }) |
|
||||
} |
|
||||
} else if (this.isBotTyping) { |
|
||||
// layer.msg('请等待当前对话完成，稍后再试。', { |
|
||||
// offset: [window.innerHeight / 2 - 100, window.innerWidth / 2 + 100], |
|
||||
// anim: 6 |
|
||||
// }); |
|
||||
} else if (this.isBotReplying) { |
|
||||
// layer.msg('请等待当前对话完成，稍后再试。', { |
|
||||
// offset: [window.innerHeight / 2 - 100, window.innerWidth / 2 + 100], |
|
||||
// anim: 6 |
|
||||
// }); |
|
||||
} |
|
||||
}, |
|
||||
handleKeyPress(event) { |
|
||||
if (event.which === 13) { |
|
||||
event.preventDefault() |
|
||||
this.sendMessage() |
|
||||
} |
|
||||
}, |
|
||||
handleHotWordClick(word) { |
|
||||
this.message = word |
|
||||
this.sendMessage() |
|
||||
}, |
|
||||
appendMessage(content, isUserMessage, isLoading, isWelcomeMessage = false) { |
|
||||
const className = isUserMessage ? 'user-message' : 'bot-message' |
|
||||
let messageContent |
|
||||
|
|
||||
if (isLoading) { |
|
||||
messageContent = '<p class="loading"><img src="images/loading.webp" alt="" /></p>' |
|
||||
} else { |
|
||||
messageContent = isUserMessage |
|
||||
? `<p>${content}</p>` |
|
||||
: isWelcomeMessage |
|
||||
? `<p>${content}</p>` |
|
||||
: `<p>${content}<span id="stop-btn">停止输出</span></p>` |
|
||||
} |
|
||||
|
|
||||
const messageHtml = ` |
|
||||
<div class="chat-message ${className}"> |
|
||||
${messageContent} |
|
||||
</div>` |
|
||||
this.$refs.chatContent.insertAdjacentHTML('beforeend', messageHtml) |
|
||||
this.$refs.chatContent.scrollTop = this.$refs.chatContent.scrollHeight |
|
||||
|
|
||||
const stopButton = this.$refs.chatContent.querySelector('#stop-btn') |
|
||||
if (stopButton) { |
|
||||
stopButton.addEventListener('click', () => { |
|
||||
this.isBotTyping = false |
|
||||
this.isBotReplying = false |
|
||||
stopButton.removeAttribute('id') |
|
||||
stopButton.classList.add('remove-btn') |
|
||||
stopButton.innerHTML = '用户取消' |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
/* ai数字人 start */ |
|
||||
.chat-wrapper { |
|
||||
position: absolute; |
|
||||
right: 0; |
|
||||
top: 0; |
|
||||
width: 1185px; |
|
||||
height: 778px; |
|
||||
padding: 24px; |
|
||||
background: url("~@/assets/images/list-bg.png") no-repeat left top; |
|
||||
background-size: 100% 100%; |
|
||||
z-index: 99; |
|
||||
font-family: 'PingFang'; |
|
||||
} |
|
||||
|
|
||||
.chat-content { |
|
||||
width: 100%; |
|
||||
height: calc(100% - 234px); |
|
||||
overflow: hidden; |
|
||||
overflow-y: scroll; |
|
||||
} |
|
||||
|
|
||||
.chat-message { |
|
||||
display: flex; |
|
||||
justify-content: flex-end; |
|
||||
font-size: 28px; |
|
||||
color: #fff; |
|
||||
margin-bottom: 16px; |
|
||||
} |
|
||||
|
|
||||
.chat-message p { |
|
||||
position: relative; |
|
||||
line-height: 30px; |
|
||||
padding: 10px 16px; |
|
||||
background: rgba(0,0,0,0.2); |
|
||||
border-radius: 28px 10px 28px 28px; |
|
||||
max-width: 90%; |
|
||||
} |
|
||||
|
|
||||
.chat-message p span{ |
|
||||
position: absolute; |
|
||||
left: 4px; |
|
||||
bottom: -40px; |
|
||||
width: 80px; |
|
||||
padding-left: 24px; |
|
||||
height: 32px; |
|
||||
text-align: center; |
|
||||
line-height: 32px; |
|
||||
border: 1px solid #4CA7FF; |
|
||||
color: #4CA7FF; |
|
||||
border-radius: 10px; |
|
||||
font-size: 16px; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
|
|
||||
.chat-message p span::before{ |
|
||||
content: ''; |
|
||||
position: absolute; |
|
||||
left: 4px; |
|
||||
top: 50%; |
|
||||
width: 24px; |
|
||||
height: 24px; |
|
||||
background: url("~@/assets/images/index-img7.png") no-repeat left top; |
|
||||
background-size: 100% 100%; |
|
||||
margin-top: -12px; |
|
||||
} |
|
||||
|
|
||||
.chat-message p span:hover{ |
|
||||
background-color: rgba(255,255,255,.2); |
|
||||
} |
|
||||
|
|
||||
.chat-message p span.remove-btn{ |
|
||||
padding-left: 0; |
|
||||
border: none; |
|
||||
color: #999; |
|
||||
} |
|
||||
|
|
||||
.chat-message p span.remove-btn::before{ |
|
||||
border: none; |
|
||||
color: #999; |
|
||||
background: none; |
|
||||
} |
|
||||
|
|
||||
.chat-message p span.remove-btn:hover{ |
|
||||
background-color: transparent; |
|
||||
cursor: default; |
|
||||
} |
|
||||
|
|
||||
.bot-message { |
|
||||
display: flex; |
|
||||
flex-direction: row-reverse; |
|
||||
justify-content: flex-end; |
|
||||
} |
|
||||
|
|
||||
.bot-message p { |
|
||||
line-height: 48px; |
|
||||
background-color: rgb(255,255,255,0.2); |
|
||||
border-radius: 8px 28px 28px 28px; |
|
||||
} |
|
||||
|
|
||||
.loading{ |
|
||||
position: relative; |
|
||||
display: flex; |
|
||||
justify-content: flex-start; |
|
||||
align-items: center; |
|
||||
height: 66px; |
|
||||
} |
|
||||
.loading img{ |
|
||||
display: block; |
|
||||
width: 67px; |
|
||||
margin: 0 10px; |
|
||||
} |
|
||||
|
|
||||
.chat-send { |
|
||||
width: 100%; |
|
||||
height: 210px; |
|
||||
margin-top: 24px; |
|
||||
background: linear-gradient( 90deg, #2C509B 0%, rgba(44,80,155,0.6) 100%); |
|
||||
border-radius: 16px; |
|
||||
} |
|
||||
|
|
||||
.chat-send textarea { |
|
||||
display: block; |
|
||||
width: calc(100% - 40px); |
|
||||
height: 120px; |
|
||||
font-size: 24px; |
|
||||
line-height: 36px; |
|
||||
border: none; |
|
||||
padding: 20px; |
|
||||
background-color: transparent; |
|
||||
color: #fff; |
|
||||
} |
|
||||
|
|
||||
.send-button-container { |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
padding: 0 20px 0 0; |
|
||||
margin-top: 16px; |
|
||||
} |
|
||||
|
|
||||
.hot-word span{ |
|
||||
position: relative; |
|
||||
display: inline-block; |
|
||||
font-size: 20px; |
|
||||
color: #fff; |
|
||||
line-height: 50px; |
|
||||
margin: 0 10px; |
|
||||
padding: 6px 16px 6px 48px; |
|
||||
background: rgba(0,0,0,0.2); |
|
||||
border-radius: 28px 8px 28px 28px; |
|
||||
} |
|
||||
|
|
||||
.hot-word span::before{ |
|
||||
content: ""; |
|
||||
position: absolute; |
|
||||
left: 12px; |
|
||||
top: 50%; |
|
||||
width: 30px; |
|
||||
height: 30px; |
|
||||
background: url("~@/assets/images/wenhao.png") no-repeat left top; |
|
||||
background-size: 100% 100%; |
|
||||
transform: translateY(-50%); |
|
||||
} |
|
||||
|
|
||||
.hot-word span:hover{ |
|
||||
background-color: rgba(0,0,0,0.6); |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
|
|
||||
.send-button { |
|
||||
position: relative; |
|
||||
display: inline-block; |
|
||||
width: 140px; |
|
||||
height: 58px; |
|
||||
line-height: 58px; |
|
||||
padding-left: 60px; |
|
||||
font-size: 26px; |
|
||||
text-align: left; |
|
||||
color: #fff; |
|
||||
background: linear-gradient(135deg, #06BFFF 0%, #2B74FF 100%); |
|
||||
border-radius: 58px; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
|
|
||||
.send-button::before { |
|
||||
content: ""; |
|
||||
position: absolute; |
|
||||
left: 16px; |
|
||||
top: 50%; |
|
||||
width: 36px; |
|
||||
height: 36px; |
|
||||
background: url("~@/assets/images/index-img8.png") no-repeat left top; |
|
||||
background-size: 36px 36px; |
|
||||
transform: translateY(-50%); |
|
||||
} |
|
||||
|
|
||||
.send-disabled-button { |
|
||||
background: rgba(255,255,255,.2); |
|
||||
cursor: not-allowed; |
|
||||
} |
|
||||
|
|
||||
.run-btn { |
|
||||
position: relative; |
|
||||
width: 120px; |
|
||||
height: 58px; |
|
||||
line-height: 58px; |
|
||||
padding-left: 60px; |
|
||||
font-size: 26px; |
|
||||
text-align: center; |
|
||||
color: #fff; |
|
||||
background: linear-gradient(135deg, #06BFFF 0%, #2B74FF 100%); |
|
||||
border-radius: 58px; |
|
||||
cursor: pointer; |
|
||||
margin: 40px 0 0 20px; |
|
||||
} |
|
||||
|
|
||||
.run-btn::before { |
|
||||
content: ""; |
|
||||
position: absolute; |
|
||||
left: 30px; |
|
||||
top: 50%; |
|
||||
width: 36px; |
|
||||
height: 36px; |
|
||||
background: url("~@/assets/images/run.png") no-repeat left top; |
|
||||
background-size: 36px 36px; |
|
||||
transform: translateY(-50%); |
|
||||
} |
|
||||
|
|
||||
/* ai数字人 end */ |
|
||||
|
|
||||
</style> |
|
||||
@ -1,159 +0,0 @@ |
|||||
<template> |
|
||||
<div :class="{ 'chat-message': true, 'user-message': isUserMessage, 'bot-message':!isUserMessage }"> |
|
||||
<p v-if="isLoading" class="loading"><img src="images/loading.webp" alt=""></p> |
|
||||
<p v-else> |
|
||||
{{ content }} |
|
||||
<span |
|
||||
v-if="!isUserMessage &&!isWelcomeMessage" |
|
||||
:class="{ 'stop-btn': isTyping, 'remove-btn':!isTyping && isStopped }" |
|
||||
@click="stopTyping($event)" |
|
||||
> |
|
||||
{{ isTyping? '停止输出' : (isStopped? '用户取消' : '') }} |
|
||||
</span> |
|
||||
</p> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
props: { |
|
||||
content: { |
|
||||
type: String, |
|
||||
default: '' |
|
||||
}, |
|
||||
isUserMessage: { |
|
||||
type: Boolean, |
|
||||
default: false |
|
||||
}, |
|
||||
isLoading: { |
|
||||
type: Boolean, |
|
||||
default: false |
|
||||
}, |
|
||||
isWelcomeMessage: { |
|
||||
type: Boolean, |
|
||||
default: false |
|
||||
}, |
|
||||
isTyping: { |
|
||||
type: Boolean, |
|
||||
default: false |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
isStopped: false |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
stopTyping(event) { |
|
||||
this.isTyping = false |
|
||||
this.isStopped = true |
|
||||
this.$emit('stop-typing', event) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
/* 可以在这里添加组件特定的样式 */ |
|
||||
.chat-message { |
|
||||
display: flex; |
|
||||
justify-content: flex-end; |
|
||||
font-size: 22px; |
|
||||
color: #fff; |
|
||||
margin-bottom: 16px; |
|
||||
} |
|
||||
|
|
||||
.chat-message p { |
|
||||
position: relative; |
|
||||
line-height: 30px; |
|
||||
padding: 10px 16px; |
|
||||
background: rgba(0, 0, 0, 0.2); |
|
||||
border-radius: 28px 10px 28px 28px; |
|
||||
max-width: 90%; |
|
||||
} |
|
||||
|
|
||||
.chat-message p span.stop-btn { |
|
||||
position: absolute; |
|
||||
left: 4px; |
|
||||
bottom: -40px; |
|
||||
width: 100px; |
|
||||
padding-left: 24px; |
|
||||
height: 32px; |
|
||||
text-align: center; |
|
||||
line-height: 30px; |
|
||||
border: 1px solid #4CA7FF; |
|
||||
color: #4CA7FF; |
|
||||
border-radius: 10px; |
|
||||
font-size: 16px; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
|
|
||||
.chat-message p span.stop-btn::before { |
|
||||
content: ''; |
|
||||
position: absolute; |
|
||||
left: 4px; |
|
||||
top: 50%; |
|
||||
width: 24px; |
|
||||
height: 24px; |
|
||||
background: url("~@/assets/images/index-img7.png") no-repeat left top; |
|
||||
background-size: 100% 100%; |
|
||||
margin-top: -12px; |
|
||||
} |
|
||||
|
|
||||
.chat-message p span.stop-btn:hover { |
|
||||
background-color: rgba(255, 255, 255, 0.2); |
|
||||
} |
|
||||
|
|
||||
.chat-message p span.remove-btn { |
|
||||
position: absolute; |
|
||||
left: 4px; |
|
||||
bottom: -40px; |
|
||||
padding-left: 0; |
|
||||
border: none; |
|
||||
color: #999; |
|
||||
width: 100px; |
|
||||
padding-left: 24px; |
|
||||
height: 32px; |
|
||||
text-align: center; |
|
||||
line-height: 30px; |
|
||||
font-size: 16px; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
|
|
||||
.chat-message p span.remove-btn::before { |
|
||||
border: none; |
|
||||
color: #999; |
|
||||
background: none; |
|
||||
} |
|
||||
|
|
||||
.chat-message p span.remove-btn:hover { |
|
||||
background-color: transparent; |
|
||||
cursor: default; |
|
||||
} |
|
||||
|
|
||||
.bot-message { |
|
||||
display: flex; |
|
||||
flex-direction: row-reverse; |
|
||||
justify-content: flex-end; |
|
||||
} |
|
||||
|
|
||||
.bot-message p { |
|
||||
line-height: 48px; |
|
||||
background-color: rgba(255, 255, 255, 0.2); |
|
||||
border-radius: 8px 28px 28px 28px; |
|
||||
} |
|
||||
|
|
||||
.loading { |
|
||||
position: relative; |
|
||||
display: flex; |
|
||||
justify-content: flex-start; |
|
||||
align-items: center; |
|
||||
height: 66px; |
|
||||
} |
|
||||
|
|
||||
.loading img { |
|
||||
display: block; |
|
||||
width: 67px; |
|
||||
margin: 0 10px; |
|
||||
} |
|
||||
</style> |
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue