|
|
<template>
|
|
|
<div>
|
|
|
<!-- <div class="onlineConsultation" @click="consultation">-->
|
|
|
<!-- <div class="btn">-->
|
|
|
<!-- <img :src="customerService" alt="" class="customerService">-->
|
|
|
<!-- <span class="text">在线咨询</span>-->
|
|
|
<!-- </div>-->
|
|
|
<!-- </div>-->
|
|
|
<div class="chat" v-if="isChat" ref="dragDiv">
|
|
|
<div class="topDrag" @mousedown="onMouseDown">
|
|
|
<span class="chatTitle">海威 AI 助手</span>
|
|
|
<el-select
|
|
|
v-model="selectedModel"
|
|
|
size="mini"
|
|
|
class="modelSelect"
|
|
|
placeholder="模型"
|
|
|
@mousedown.native.stop>
|
|
|
<el-option label="DeepSeek" value="deepseek"></el-option>
|
|
|
<el-option label="Ollama" value="ollama"></el-option>
|
|
|
</el-select>
|
|
|
<i class="el-icon-close close" @click="isChat = false"></i>
|
|
|
</div>
|
|
|
<div class="content1" ref="chatContainer">
|
|
|
<template v-for="i in chatInfo">
|
|
|
<div v-if="i.type===0" class="message">
|
|
|
<div class="userInfo">{{ i.userName }} {{ formatTime(i.time) }}</div>
|
|
|
<div v-if="i.html" class="info" @click="handleClick" v-html="i.content"></div>
|
|
|
<div v-else class="info plain">{{ i.content }}</div>
|
|
|
</div>
|
|
|
<div v-if="i.type===1" class="message1">
|
|
|
<div class="userInfo">{{ i.userName }} {{ formatTime(i.time) }}</div>
|
|
|
<div class="info plain">{{ i.content }}</div>
|
|
|
</div>
|
|
|
<div v-if="i.type===2" class="message">
|
|
|
<div class="userInfo">{{ i.userName }} {{ formatTime(i.time) }}</div>
|
|
|
<div class="info">
|
|
|
<div>
|
|
|
请选择问题类型
|
|
|
</div>
|
|
|
<el-button size="mini" @click="busy(1)">设备相关</el-button>
|
|
|
<el-button size="mini" @click="busy(2)">软件相关</el-button>
|
|
|
<el-button size="mini" @click="busy(3)">测试</el-button>
|
|
|
</div>
|
|
|
<div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</div>
|
|
|
<div class="chatBox">
|
|
|
<el-input
|
|
|
type="textarea"
|
|
|
placeholder="请输入内容"
|
|
|
class="no-border-textarea"
|
|
|
@keydown.enter.native.exact.prevent="sendChat"
|
|
|
v-model="textarea"
|
|
|
:disabled="isLoading">
|
|
|
</el-input>
|
|
|
<el-button type="primary" size="mini" class="chatBtn" @click="sendChat" :disabled="isLoading">发送消息
|
|
|
</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="viewImg" v-if="imgUrl" @click="imgUrl = ''">
|
|
|
<img :src="imgUrl" alt="" class="img"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import customerService from '@/assets/icon/customerService.png'
|
|
|
import { aiChat } from '@/api/aiChat'
|
|
|
|
|
|
export default {
|
|
|
name: "Chat",
|
|
|
data() {
|
|
|
return {
|
|
|
imgUrl: '',
|
|
|
customerService,
|
|
|
textarea: '',
|
|
|
isChat: false,
|
|
|
isLoading: false,
|
|
|
selectedModel: 'deepseek',
|
|
|
isDown: false,
|
|
|
offsetX: 0,
|
|
|
offsetY: 0,
|
|
|
chatInfo: [
|
|
|
{
|
|
|
type: 0,
|
|
|
content: '您好！我是海威 AI 助手，可以回答关于海威物联产品、方案和服务的问题。',
|
|
|
time: new Date().getTime(),
|
|
|
userName: '海威物联',
|
|
|
},
|
|
|
]
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
// listHwWebDocument()
|
|
|
// setTimeout(() => {
|
|
|
// this.isChat = true;
|
|
|
// this.$nextTick(() => {
|
|
|
// this.scrollToBottom()
|
|
|
// })
|
|
|
// }, 5 * 1000)
|
|
|
},
|
|
|
methods: {
|
|
|
consultation() {
|
|
|
this.isChat = true;
|
|
|
this.$nextTick(() => {
|
|
|
this.scrollToBottom()
|
|
|
})
|
|
|
},
|
|
|
onMouseDown(e) {
|
|
|
this.isDown = true;
|
|
|
const rect = this.$refs.dragDiv.getBoundingClientRect();
|
|
|
this.offsetX = e.clientX - rect.left;
|
|
|
this.offsetY = e.clientY - rect.top;
|
|
|
|
|
|
document.addEventListener("mousemove", this.onMouseMove);
|
|
|
document.addEventListener("mouseup", this.onMouseUp);
|
|
|
},
|
|
|
onMouseMove(e) {
|
|
|
if (!this.isDown) return;
|
|
|
|
|
|
const dragDiv = this.$refs.dragDiv;
|
|
|
|
|
|
// 鼠标相对窗口的 left/top
|
|
|
let left = e.clientX - this.offsetX;
|
|
|
let top = e.clientY - this.offsetY;
|
|
|
|
|
|
// ✅ 边界限制 (保证不出窗口)
|
|
|
if (left < 0) left = 0;
|
|
|
if (top < 0) top = 0;
|
|
|
if (left > window.innerWidth - dragDiv.offsetWidth) {
|
|
|
left = window.innerWidth - dragDiv.offsetWidth;
|
|
|
}
|
|
|
if (top > window.innerHeight - dragDiv.offsetHeight) {
|
|
|
top = window.innerHeight - dragDiv.offsetHeight;
|
|
|
}
|
|
|
|
|
|
// ✅ 转换为 right/bottom
|
|
|
let right = window.innerWidth - left - dragDiv.offsetWidth;
|
|
|
let bottom = window.innerHeight - top - dragDiv.offsetHeight;
|
|
|
|
|
|
dragDiv.style.right = right + "px";
|
|
|
dragDiv.style.bottom = bottom + "px";
|
|
|
},
|
|
|
onMouseUp() {
|
|
|
this.isDown = false;
|
|
|
document.removeEventListener("mousemove", this.onMouseMove);
|
|
|
document.removeEventListener("mouseup", this.onMouseUp);
|
|
|
},
|
|
|
scrollToBottom() {
|
|
|
const container = this.$refs.chatContainer;
|
|
|
container.scrollTop = container.scrollHeight;
|
|
|
},
|
|
|
formatTime(date) {
|
|
|
const now = new Date();
|
|
|
const input = new Date(date);
|
|
|
|
|
|
const diffTime = now - input;
|
|
|
const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
|
|
|
|
|
|
const isToday = now.toDateString() === input.toDateString();
|
|
|
|
|
|
const yesterday = new Date();
|
|
|
yesterday.setDate(now.getDate() - 1);
|
|
|
const isYesterday = yesterday.toDateString() === input.toDateString();
|
|
|
const padZero = num => String(num).padStart(2, '0');
|
|
|
const timeStr = `${padZero(input.getHours())}:${padZero(input.getMinutes())}:${padZero(input.getSeconds())}`;
|
|
|
|
|
|
|
|
|
if (isToday) {
|
|
|
return `今天 ${timeStr}`;
|
|
|
} else if (isYesterday) {
|
|
|
return `昨天 ${timeStr}`;
|
|
|
} else {
|
|
|
return `${diffDays}天前`;
|
|
|
}
|
|
|
},
|
|
|
async sendChat(e) {
|
|
|
if (e && e.isComposing) {
|
|
|
return;
|
|
|
}
|
|
|
const question = this.textarea.trim()
|
|
|
if (question === '' || this.isLoading) {
|
|
|
return
|
|
|
}
|
|
|
this.chatInfo.push({
|
|
|
type: 1,
|
|
|
content: question,
|
|
|
time: new Date().getTime(),
|
|
|
userName: '我',
|
|
|
})
|
|
|
this.textarea = ''
|
|
|
this.isLoading = true
|
|
|
const loadingIndex = this.chatInfo.push({
|
|
|
type: 0,
|
|
|
content: '正在检索官网知识库并生成回答...',
|
|
|
time: new Date().getTime(),
|
|
|
userName: '海威物联',
|
|
|
}) - 1
|
|
|
this.$nextTick(() => {
|
|
|
this.scrollToBottom()
|
|
|
})
|
|
|
try {
|
|
|
// AI 输出一律按纯文本展示，避免模型返回 HTML 时进入 v-html 渲染链路。
|
|
|
const res = await aiChat({
|
|
|
question,
|
|
|
model: this.selectedModel
|
|
|
})
|
|
|
if (res && res.code === 200 && res.data) {
|
|
|
this.chatInfo.splice(loadingIndex, 1, {
|
|
|
type: 0,
|
|
|
content: res.data.answer || '官网知识库暂未检索到相关信息。',
|
|
|
time: new Date().getTime(),
|
|
|
userName: '海威物联',
|
|
|
})
|
|
|
} else {
|
|
|
this.chatInfo.splice(loadingIndex, 1, {
|
|
|
type: 0,
|
|
|
content: (res && res.msg) || 'AI 服务暂时不可用，请稍后重试。',
|
|
|
time: new Date().getTime(),
|
|
|
userName: '海威物联',
|
|
|
})
|
|
|
}
|
|
|
} catch (err) {
|
|
|
this.chatInfo.splice(loadingIndex, 1, {
|
|
|
type: 0,
|
|
|
content: '网络连接异常，请稍后重试。',
|
|
|
time: new Date().getTime(),
|
|
|
userName: '海威物联',
|
|
|
})
|
|
|
} finally {
|
|
|
this.isLoading = false
|
|
|
this.$nextTick(() => {
|
|
|
this.scrollToBottom()
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
busy(e) {
|
|
|
if (e === 1) {
|
|
|
this.chatInfo.push({
|
|
|
type: 0,
|
|
|
content: '请稍后',
|
|
|
time: new Date().getTime(),
|
|
|
userName: '海威物联',
|
|
|
})
|
|
|
setTimeout(() => {
|
|
|
this.chatInfo.push({
|
|
|
type: 0,
|
|
|
content: `<text>目前咨询人数过多，如有疑问，请致电xxxx,或</text> <a href="javascript:void(0)" data-action="addWechat">添加微信</a>`,
|
|
|
html: true,
|
|
|
time: new Date().getTime(),
|
|
|
userName: '海威物联',
|
|
|
})
|
|
|
this.$nextTick(() => {
|
|
|
this.scrollToBottom()
|
|
|
})
|
|
|
}, 1000)
|
|
|
}
|
|
|
if (e === 2) {
|
|
|
this.chatInfo.push({
|
|
|
type: 0,
|
|
|
content: '请稍后',
|
|
|
time: new Date().getTime(),
|
|
|
userName: '海威物联',
|
|
|
})
|
|
|
setTimeout(() => {
|
|
|
this.chatInfo.push({
|
|
|
type: 0,
|
|
|
content: '目前咨询人数过多，如有疑问，请致电xxxx',
|
|
|
time: new Date().getTime(),
|
|
|
userName: '海威物联',
|
|
|
})
|
|
|
this.$nextTick(() => {
|
|
|
this.scrollToBottom()
|
|
|
})
|
|
|
}, 1000)
|
|
|
}
|
|
|
if (e === 3) {
|
|
|
window.location.href = "weixin://dl/add";
|
|
|
}
|
|
|
this.$nextTick(() => {
|
|
|
this.scrollToBottom()
|
|
|
})
|
|
|
},
|
|
|
|
|
|
handleClick(e) {
|
|
|
const action = e.target.dataset.action
|
|
|
if (action && typeof this[action] === 'function') {
|
|
|
this[action](e.target.dataset.parmas) // 调用 Vue methods 里的函数
|
|
|
}
|
|
|
},
|
|
|
copyToClipboard(text) {
|
|
|
if (!navigator.clipboard) {
|
|
|
console.warn('浏览器不支持 Clipboard API，使用 fallback 方法')
|
|
|
this.fallbackCopy(text)
|
|
|
return
|
|
|
}
|
|
|
navigator.clipboard.writeText(text)
|
|
|
},
|
|
|
fallbackCopy(text) {
|
|
|
const input = document.createElement('textarea')
|
|
|
input.value = text
|
|
|
document.body.appendChild(input)
|
|
|
input.select()
|
|
|
try {
|
|
|
document.execCommand('copy')
|
|
|
} catch (err) {
|
|
|
}
|
|
|
document.body.removeChild(input)
|
|
|
},
|
|
|
addWechat() {
|
|
|
window.location.href = "weixin://dl/add";
|
|
|
this.copyToClipboard('Yeshenge_')
|
|
|
this.chatInfo.push({
|
|
|
type: 0,
|
|
|
content: '已复制微信号，请打开微信添加好友，或扫描下方二维码添加好友',
|
|
|
time: new Date().getTime(),
|
|
|
userName: '海威物联',
|
|
|
})
|
|
|
let img = require('@/assets/image/wechatQRCode.png')
|
|
|
this.chatInfo.push({
|
|
|
type: 0,
|
|
|
content: `<img data-action="viewImg" data-parmas='${JSON.stringify({img: img})}' src="${img}" alt="" style="width: 100px;">`,
|
|
|
html: true,
|
|
|
time: new Date().getTime(),
|
|
|
userName: '海威物联',
|
|
|
})
|
|
|
this.$nextTick(() => {
|
|
|
this.scrollToBottom()
|
|
|
})
|
|
|
},
|
|
|
viewImg(e) {
|
|
|
let data = JSON.parse(e)
|
|
|
console.log(data.img)
|
|
|
this.imgUrl = data.img
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style scoped lang="less">
|
|
|
|
|
|
|
|
|
.onlineConsultation {
|
|
|
position: fixed;
|
|
|
right: 5vw;
|
|
|
bottom: 0;
|
|
|
width: 150px;
|
|
|
height: 50px;
|
|
|
background-color: #41B5EA;
|
|
|
border-radius: 5px;
|
|
|
cursor: pointer;
|
|
|
z-index: 99;
|
|
|
|
|
|
.customerService {
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
width: 70px;
|
|
|
}
|
|
|
|
|
|
.text {
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
left: 70px;
|
|
|
width: 80px;
|
|
|
line-height: 50px;
|
|
|
font-size: 16px;
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.chat {
|
|
|
z-index: 999;
|
|
|
position: fixed;
|
|
|
bottom: 5vw;
|
|
|
right: 5vw;
|
|
|
width: 450px;
|
|
|
height: 450px;
|
|
|
border-top-left-radius: 5px;
|
|
|
border-top-right-radius: 5px;
|
|
|
background-color: #fff;
|
|
|
overflow: hidden;
|
|
|
box-shadow: -4px 4px 8px rgba(0, 0, 0, 0.1),
|
|
|
4px 4px 8px rgba(0, 0, 0, 0.1),
|
|
|
0 4px 8px rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
.topDrag {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
height: 50px;
|
|
|
background-color: #41B5EA;
|
|
|
cursor: move;
|
|
|
|
|
|
.chatTitle {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 16px;
|
|
|
transform: translateY(-50%);
|
|
|
color: #fff;
|
|
|
font-size: 15px;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
.modelSelect {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
right: 54px;
|
|
|
width: 104px;
|
|
|
transform: translateY(-50%);
|
|
|
cursor: default;
|
|
|
}
|
|
|
|
|
|
.close {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
right: 20px;
|
|
|
transform: translateY(-50%);
|
|
|
color: #fff;
|
|
|
font-size: 20px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.content1 {
|
|
|
position: absolute;
|
|
|
top: 50px;
|
|
|
height: 300px;
|
|
|
width: 100%;
|
|
|
overflow: auto;
|
|
|
|
|
|
.message {
|
|
|
width: 80%;
|
|
|
margin: 10px 0 10px 15px;
|
|
|
text-align: left;
|
|
|
|
|
|
.userInfo {
|
|
|
font-size: 12px;
|
|
|
color: #0008
|
|
|
}
|
|
|
|
|
|
.info {
|
|
|
max-width: 80%;
|
|
|
display: inline-block;
|
|
|
background-color: #EDEFF5;
|
|
|
padding: 5px;
|
|
|
border-radius: 5px;
|
|
|
border-top-left-radius: 0;
|
|
|
}
|
|
|
|
|
|
.plain {
|
|
|
white-space: pre-wrap;
|
|
|
line-height: 1.6;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.message1 {
|
|
|
width: calc(100% - 20px);
|
|
|
margin: 10px 0 10px 5px;
|
|
|
text-align: right;
|
|
|
overflow: hidden;
|
|
|
|
|
|
.userInfo {
|
|
|
font-size: 12px;
|
|
|
color: #0008
|
|
|
}
|
|
|
|
|
|
.info {
|
|
|
text-align: left;
|
|
|
max-width: 80%;
|
|
|
float: right;
|
|
|
background-color: #EDEFF5;
|
|
|
padding: 5px;
|
|
|
border-radius: 5px 0px 5px 5px;
|
|
|
}
|
|
|
|
|
|
.plain {
|
|
|
white-space: pre-wrap;
|
|
|
line-height: 1.6;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.chatBox {
|
|
|
position: absolute;
|
|
|
top: 350px;
|
|
|
height: 88px;
|
|
|
width: 100%;
|
|
|
margin-top: 12px;
|
|
|
border-top: 2px solid #2222;
|
|
|
|
|
|
.no-border-textarea /deep/ .el-textarea__inner {
|
|
|
border: none;
|
|
|
box-shadow: none;
|
|
|
resize: none;
|
|
|
outline: none;
|
|
|
}
|
|
|
|
|
|
.chatBtn {
|
|
|
position: absolute;
|
|
|
bottom: 5px;
|
|
|
right: 10px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.viewImg {
|
|
|
z-index: 9999;
|
|
|
position: fixed;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
background-color: rgba(0, 0, 0, .2);
|
|
|
|
|
|
.img {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
width: 40vw;
|
|
|
}
|
|
|
}
|
|
|
</style>
|