5 changed files with 582 additions and 11 deletions
@ -0,0 +1,491 @@
|
||||
<template> |
||||
<div class="page-content"> |
||||
<div class="header"> |
||||
<div class="logo"><img :src="logo" />货无忧AI智能问答</div> |
||||
<div class="icon-box"> |
||||
<el-icon @click="close"><CloseBold /></el-icon> |
||||
</div> |
||||
</div> |
||||
<div class="content"> |
||||
<div class="left"> |
||||
<div class="content-box" ref="chatContainer"> |
||||
<template v-for="(item, index) in Data.ChathistoryList" :key="index"> |
||||
<div |
||||
:class="{ |
||||
'chat-history': item.state === 'Ai', |
||||
'chat-history-user': item.state === 'user', |
||||
}" |
||||
> |
||||
<div class="icon"> |
||||
<el-icon><Avatar /></el-icon> |
||||
</div> |
||||
<div> |
||||
<div |
||||
:class="{ |
||||
'content-header': item.state === 'Ai', |
||||
'content-header-user': item.state === 'user', |
||||
}" |
||||
> |
||||
<span>User:{{ item.name }}</span> |
||||
<span>Time:{{ item.time }}</span> |
||||
</div> |
||||
<div class="content-list"> |
||||
<p :ref="el => (chatContents[index] = el)"> |
||||
{{ item.state === 'user' ? item.content : '' }} |
||||
</p> |
||||
<!-- 图片 --> |
||||
<el-image |
||||
v-if="item.url" |
||||
style="width: 100px; height: 100px" |
||||
:src="item.url" |
||||
:zoom-rate="1.2" |
||||
:max-scale="7" |
||||
:min-scale="0.2" |
||||
:preview-src-list="item.srcList" |
||||
:initial-index="4" |
||||
fit="cover" |
||||
/> |
||||
<!-- 下载地址 --> |
||||
<a v-if="item.link" :href="item.link"> |
||||
<el-link :underline="false">点击这里下载</el-link></a |
||||
> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
</div> |
||||
<!-- 输入框 --> |
||||
<div class="content-input"> |
||||
<el-input |
||||
ref="input" |
||||
@keydown.enter="inputData(Data.input)" |
||||
v-model="Data.input" |
||||
placeholder="请输入问题描述" |
||||
/> |
||||
<el-button type="primary" @click="inputData(Data.input)">发送</el-button> |
||||
</div> |
||||
</div> |
||||
<div class="right"> |
||||
<el-tabs type="border-card"> |
||||
<el-tab-pane label="热点问题"> |
||||
<div class="el_problem"> |
||||
<template v-for="(item, index) in Data.problem" :key="index"> |
||||
<div class="box"> |
||||
<span :class="{ span: true, [`id${index + 1}`]: index < 4 }">{{ |
||||
index + 1 |
||||
}}</span> |
||||
<span class="spancontent" @click="inputData(item.content)" |
||||
>{{ item.content }}... |
||||
</span> |
||||
</div> |
||||
</template> |
||||
</div> |
||||
</el-tab-pane> |
||||
<el-tab-pane label="新增问题"> 暂无新增问题 </el-tab-pane> |
||||
<el-tab-pane label="快捷服务"> 待添加 </el-tab-pane> |
||||
</el-tabs> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { defineProps, defineEmits, ref, nextTick, onMounted } from 'vue'; |
||||
import { ElMessage } from 'element-plus'; |
||||
import Qrxcx from '../../../public/img/Qrxcx.png'; //小程序二维码 |
||||
import Qrewm from '../../../public/img/Qrewm.png'; //APP二维码 |
||||
import logo from '../../../public/img/p-logo.png'; //logo |
||||
const emit = defineEmits(['request-data']); |
||||
const isFirstMessage = ref(true); |
||||
const chatContainer = ref(null); |
||||
const inputState = ref(false); //当前是否在回答 |
||||
const props = defineProps({ |
||||
templateData: Object, |
||||
}); |
||||
const input = ref(null); //输入框实例 |
||||
const Data = ref({ |
||||
name: '', //用户名 |
||||
ai: false, |
||||
// 热门问题 |
||||
problem: [ |
||||
{ |
||||
content: '货无忧小程序地址', |
||||
}, |
||||
{ |
||||
content: '货无忧App下载地址', |
||||
}, |
||||
{ |
||||
content: '打印机驱动下载地址', |
||||
}, |
||||
{ |
||||
content: '扫描仪驱动下载地址', |
||||
}, |
||||
], |
||||
ChathistoryList: [ |
||||
// { |
||||
// // url:'图片地址',//图片预览地址 |
||||
// // srcList:[],//图片列表 |
||||
// // state: 'user', //用户标识 |
||||
// // name: '用户', //用户昵称 |
||||
// // content: value, //聊天消息 |
||||
// // time: setCurrentTime(),//时间 |
||||
// }, |
||||
], |
||||
input: '', //输入框 |
||||
}); |
||||
|
||||
const close = () => { |
||||
emit('request-data', Data.value); |
||||
}; |
||||
// 在 setup 函数或组件方法中 |
||||
const getLocalStorageItem = key => { |
||||
return localStorage.getItem(key); |
||||
}; |
||||
const getuserinfo = () => { |
||||
// 使用 |
||||
const LOCA_USER = JSON.parse(getLocalStorageItem('TWMS-userInfo')); |
||||
console.log(LOCA_USER, 'LOCA_USER'); |
||||
if (LOCA_USER) { |
||||
Data.value.name = LOCA_USER.content.real_name; |
||||
} |
||||
}; |
||||
getuserinfo(); |
||||
const chatContents = ref([]); |
||||
|
||||
const typeText = (element, text, delay = 50) => { |
||||
if (!element) return; |
||||
element.innerText = ''; |
||||
let index = 0; |
||||
|
||||
const type = () => { |
||||
if (index < text.length) { |
||||
element.innerText += text.charAt(index); |
||||
index++; |
||||
setTimeout(type, delay); |
||||
} |
||||
}; |
||||
|
||||
type(); |
||||
}; |
||||
// 页面滚动 |
||||
const scrollToBottom = () => { |
||||
setTimeout(() => { |
||||
const container = chatContainer.value; |
||||
if (container) { |
||||
container.scrollTop = container.scrollHeight; |
||||
} |
||||
}, 0); |
||||
}; |
||||
// 时间 |
||||
const setCurrentTime = () => { |
||||
const now = new Date(); |
||||
const year = now.getFullYear(); |
||||
const month = (now.getMonth() + 1).toString().padStart(2, '0'); |
||||
const day = now.getDate().toString().padStart(2, '0'); |
||||
return `${year}年${month}月${day}日`; |
||||
}; |
||||
// 用户输入逻辑 |
||||
const inputData = value => { |
||||
Data.value.input = value; |
||||
console.log(value, 'value'); |
||||
// 如果没有值或者正在进行中终止程序 |
||||
if (!Data.value.input) { |
||||
ElMessage({ |
||||
message: '请输入问题描述', |
||||
type: 'warning', |
||||
}); |
||||
return; |
||||
} |
||||
let data = { |
||||
state: 'user', //用户标识 |
||||
name: Data.value.name|| '未登录', //用户昵称 |
||||
content: value, //聊天消息 |
||||
time: setCurrentTime(), |
||||
}; |
||||
Data.value['ChathistoryList'].push(data); |
||||
Data.value.input = ''; // 清空输入框 |
||||
input.value.focus(); |
||||
inputState.value = false; |
||||
AiData(value); //调用AI机器人判断 |
||||
}; |
||||
//AiData 函数 |
||||
const AiData = (value = '') => { |
||||
let aiResponse = ''; |
||||
let data = { |
||||
url: '', //图片预览地址 |
||||
srcList: [], //图片列表 |
||||
state: 'Ai', //机器人标识 |
||||
name: '货无忧智能AI', //昵称 |
||||
content: aiResponse, //文本描述 |
||||
link: '', //文件下载地址 |
||||
time: setCurrentTime(), |
||||
}; |
||||
|
||||
if (isFirstMessage.value) { |
||||
aiResponse = '你好，我是货无忧智能AI，有什么可以帮助你的吗？'; |
||||
isFirstMessage.value = false; |
||||
} else { |
||||
const lowercaseValue = value.toLowerCase(); |
||||
if ( |
||||
lowercaseValue.includes('小程序') || |
||||
lowercaseValue.includes('小程序地址') || |
||||
lowercaseValue.includes('货无忧小程序地址') |
||||
) { |
||||
aiResponse = '货无忧小程序如下，扫描图片既可以访问'; |
||||
data.url = Qrxcx; |
||||
data.srcList = [Qrxcx]; |
||||
} else if ( |
||||
lowercaseValue.includes('app') || |
||||
lowercaseValue.includes('app下载') || |
||||
lowercaseValue.includes('货无忧App下载地址') |
||||
) { |
||||
aiResponse = '货无忧app如下，打开浏览器扫描二维码，就可以下载'; |
||||
data.url = Qrewm; |
||||
data.srcList = [Qrewm]; |
||||
} else if ( |
||||
lowercaseValue.includes('打印驱动') || |
||||
lowercaseValue.includes('打印机驱动下载地址') |
||||
) { |
||||
aiResponse = '打印机启动下载地址如下：'; |
||||
data.link = 'http://47.108.51.143:9000/logpm/other/CLodop_Setup_for_Win32NT.exe'; |
||||
} else if ( |
||||
lowercaseValue.includes('扫描驱动') || |
||||
lowercaseValue.includes('扫描仪驱动下载地址') |
||||
) { |
||||
aiResponse = '待添加...'; |
||||
data.link = ''; |
||||
} else if ( |
||||
lowercaseValue.includes('扫描仪') || |
||||
lowercaseValue.includes('扫描仪出现问题如何解决') |
||||
) { |
||||
aiResponse = |
||||
'扫描仪出现问题需要复制如下地址，然后打开谷歌浏览器在浏览器地址中输入这个地址：chrome://flags/#block-insecure-private-network-requests ,把黄色部分选择Disabled然后重启浏览器'; |
||||
} else { |
||||
aiResponse = '我不太理解您的问题，请重新描述或输入其他问题。'; |
||||
} |
||||
} |
||||
|
||||
data.content = aiResponse; |
||||
Data.value['ChathistoryList'].push(data); |
||||
nextTick(() => { |
||||
const lastIndex = Data.value['ChathistoryList'].length - 1; |
||||
const element = chatContents.value[lastIndex]; |
||||
typeText(element, aiResponse); |
||||
scrollToBottom(); |
||||
}); |
||||
}; |
||||
AiData(); //初始化AI机器人 |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.el_problem { |
||||
display: flex; |
||||
flex-direction: column; |
||||
span { |
||||
margin: 4px; |
||||
} |
||||
.box { |
||||
font-size: 14px; |
||||
display: flex; |
||||
height: 50px; |
||||
|
||||
align-items: center; |
||||
.span { |
||||
width: 20px; |
||||
height: 20px; |
||||
background-color: #9e9e9e; |
||||
display: block; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
border-radius: 50%; |
||||
color: #fff; |
||||
} |
||||
.spancontent { |
||||
cursor: pointer; |
||||
} |
||||
.id1 { |
||||
border: 1px solid red; |
||||
background-color: red; |
||||
} |
||||
.id2 { |
||||
border: 1px solid #2196f3; |
||||
background-color: #2196f3; |
||||
} |
||||
.id3 { |
||||
border: 1px solid #8bc34a; |
||||
background-color: #8bc34a; |
||||
} |
||||
} |
||||
} |
||||
.page-content { |
||||
width: 80%; |
||||
height: 80%; |
||||
border: 1px solid #9e9e9e; |
||||
z-index: 9999999; |
||||
position: fixed; |
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%, -50%); |
||||
background-color: #fff; |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
.header { |
||||
color: #fff; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
background-color: #172e60; |
||||
line-height: 68px; |
||||
padding: 0 24px; |
||||
.logo { |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
img { |
||||
width: 100px; |
||||
height: 100px; |
||||
} |
||||
} |
||||
.icon-box { |
||||
display: flex; |
||||
|
||||
.el-icon { |
||||
color: #fff; |
||||
font-size: 24px; |
||||
&:hover { |
||||
cursor: pointer; |
||||
color: #ff0000; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.content { |
||||
flex: 1; |
||||
color: #002e55; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
overflow-y: hidden; |
||||
|
||||
.left { |
||||
width: 66%; |
||||
border-right: 1px solid #d3832a; |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
.content-box { |
||||
height: 85%; |
||||
background-color: #fbfbfd; |
||||
padding: 10px; |
||||
overflow-y: scroll; |
||||
|
||||
.chat-history, |
||||
.chat-history-user { |
||||
margin-bottom: 2%; |
||||
padding: 4px; |
||||
display: flex; |
||||
height: fit-content; |
||||
|
||||
.icon { |
||||
min-width: 40px; |
||||
min-height: 40px; |
||||
max-width: 40px; |
||||
max-height: 40px; |
||||
border-radius: 50%; |
||||
border: 1px solid #d3832a; |
||||
margin-right: 20px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
color: #d3832a; |
||||
font-size: 3em; |
||||
.el-icon { |
||||
font-size: 22px; |
||||
} |
||||
} |
||||
|
||||
.content-header { |
||||
font-size: 12px; |
||||
span { |
||||
margin-right: 20px; |
||||
} |
||||
} |
||||
|
||||
.content-list { |
||||
flex: 1; |
||||
background-color: #fff; |
||||
border: 1px solid #9e9e9e; |
||||
padding: 0 4px; |
||||
border-radius: 4px; |
||||
font-size: 14px; |
||||
p { |
||||
text-indent: 24px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.chat-history-user { |
||||
flex-direction: row-reverse; |
||||
|
||||
.icon { |
||||
margin-right: 0; |
||||
margin-left: 20px; |
||||
} |
||||
.content-header-user { |
||||
font-size: 12px; |
||||
text-align: right; |
||||
display: flex; |
||||
flex-direction: row-reverse; |
||||
span { |
||||
margin-left: 20px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
:deep(.content-input) { |
||||
border-top: 1px solid #c2c2c2; |
||||
flex: 1; |
||||
position: relative; |
||||
.el-input { |
||||
width: 100%; |
||||
height: 100%; |
||||
font-size: 16px; |
||||
} |
||||
.is-focus { |
||||
box-shadow: none; |
||||
} |
||||
.el-input__wrapper { |
||||
box-shadow: none; |
||||
} |
||||
.el-button { |
||||
position: absolute; |
||||
right: 10px; |
||||
bottom: 10px; |
||||
width: 120px; |
||||
height: 35px; |
||||
background-color: #172e60; |
||||
border: none; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.right { |
||||
flex: 1; |
||||
height: 100%; |
||||
|
||||
.el-tabs { |
||||
height: 100%; |
||||
|
||||
.el-tabs__header, |
||||
.el-tabs__content { |
||||
width: 100%; |
||||
overflow-y: scroll; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue