|
@@ -3,18 +3,18 @@
|
|
|
<!-- 聊天框 -->
|
|
|
<el-scrollbar class="h100" noresize ref="scrollbarRef" max-height="400px" v-if="messageList.length">
|
|
|
<div class="chat-box" ref="chatBoxRef">
|
|
|
- <div v-for="(item, index) in messageList" :key="index" class="chat-item" :class="item.callSentenceInfo?.role">
|
|
|
- <div v-if="item.callSentenceInfo?.role === 'agent'" class="agent">
|
|
|
+ <div v-for="(item, index) in messageList" :key="index" class="chat-item" :class="item.body?.content?.callSentenceInfo?.role">
|
|
|
+ <div v-if="item.body?.content?.callSentenceInfo?.role === 'agent'" class="agent">
|
|
|
<img v-lazy="getImageUrl('order/service.png')" alt="" class="agent-avatar" src="" />
|
|
|
- <div class="agent-name">{{ item.calledNumber }}</div>
|
|
|
- <div class="agent-content">{{ item.callSentenceInfo.text }}</div>
|
|
|
- <div class="agent-date">{{ formatDate(item.callStartTime, 'YYYY-mm-dd HH:MM:SS') }}</div>
|
|
|
+ <div class="agent-name">{{ item.body?.content?.calledNumber }}</div>
|
|
|
+ <div class="agent-content">{{ item.body?.content?.callSentenceInfo.text }}</div>
|
|
|
+ <div class="agent-date">{{ formatDate(item.timestamps, 'YYYY-mm-dd HH:MM:SS') }}</div>
|
|
|
</div>
|
|
|
<div v-else class="user">
|
|
|
<img v-lazy="getImageUrl('order/user.png')" alt="" class="user-avatar" src="" />
|
|
|
- <div class="user-name">{{ item.callerNumber }}</div>
|
|
|
- <div class="user-content">{{ item.callSentenceInfo.text }}</div>
|
|
|
- <div class="user-date">{{ formatDate(item.callStartTime, 'YYYY-mm-dd HH:MM:SS') }}</div>
|
|
|
+ <div class="user-name">{{ item.body?.content?.callerNumber }}</div>
|
|
|
+ <div class="user-content">{{ item.body?.content?.callSentenceInfo.text }}</div>
|
|
|
+ <div class="user-date">{{ formatDate(item.timestamps, 'YYYY-mm-dd HH:MM:SS') }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-text class="end-call" tag="p" v-if="talkEnd">-- 通话结束 --</el-text>
|
|
@@ -114,7 +114,34 @@ import { formatDate } from '/@/utils/formatTime';
|
|
|
import Empty from '/@/components/Empty/index.vue';
|
|
|
const emit = defineEmits(['orderOverwrite']);
|
|
|
// 消息列表
|
|
|
-const messageList = ref<any>([]); // 消息列表
|
|
|
+const messageList = ref<any>([
|
|
|
+ /* {
|
|
|
+ body: {
|
|
|
+ content: {
|
|
|
+ callSentenceInfo: {
|
|
|
+ text: '你好,我是小智,有什么可以帮您的吗?',
|
|
|
+ role: 'agent',
|
|
|
+ },
|
|
|
+ calledNumber: '1009',
|
|
|
+ callerNumber: '19136073037',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ timestamps: new Date().getTime(),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ body: {
|
|
|
+ content: {
|
|
|
+ callSentenceInfo: {
|
|
|
+ text: '你好,我是小智,有什么可以帮您的吗?',
|
|
|
+ role: 'user',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ calledNumber: '1009',
|
|
|
+ callerNumber: '19136073037',
|
|
|
+ },
|
|
|
+ timestamps: new Date().getTime(),
|
|
|
+ },*/
|
|
|
+]); // 消息列表
|
|
|
const recognizeList = ref<EmptyObjectType>({}); // 识别信息
|
|
|
|
|
|
const useTelStatusStore = useTelStatus();
|
|
@@ -124,7 +151,6 @@ console.log(telStatusInfo.value);
|
|
|
const socket = ref<any>(null);
|
|
|
// 打开websocket链接
|
|
|
const seatAssistOn = () => {
|
|
|
- console.log(telStatusInfo.value.telsNo);
|
|
|
if (telStatusInfo.value.telsNo) {
|
|
|
axios
|
|
|
.get(`${import.meta.env.VITE_VOICE_ASSISTANT_API_URL}/users/getUserByAgentId/${telStatusInfo.value.telsNo}`)
|
|
@@ -160,7 +186,6 @@ const seatAssistOn = () => {
|
|
|
// 设置初始化,防止刷新时恢复默认
|
|
|
onMounted(() => {
|
|
|
seatAssistOn();
|
|
|
- getRecognize()
|
|
|
});
|
|
|
const route = useRoute();
|
|
|
const talkEnd = ref(false); // 通话结束
|
|
@@ -168,24 +193,31 @@ const wsReceive = (message: any) => {
|
|
|
try {
|
|
|
const data = JSON.parse(message.data);
|
|
|
if (data.body.bisType === 3) {
|
|
|
- // console.log('坐席辅助收到转写消息:', data);
|
|
|
+ // 转写消息
|
|
|
if (route.params.callId === data.body.content.callId) {
|
|
|
// 判断是不是当前通话
|
|
|
- if (data.body.content.callSentenceInfo) {
|
|
|
+ if (data.body.content.action === 0) {
|
|
|
+ // 通话开始
|
|
|
+ console.log('通话转写开始了');
|
|
|
+ talkEnd.value = false;
|
|
|
+ }
|
|
|
+ if (data.body.content.action === 1) {
|
|
|
+ // 通话中
|
|
|
//通话中才显示
|
|
|
- messageList.value.push(data.body.content);
|
|
|
+ messageList.value.push(data);
|
|
|
scrollToBottom();
|
|
|
+ console.log('通话消息转写内容:', messageList.value, '');
|
|
|
}
|
|
|
- if (data.body.content.callEndInfo) {
|
|
|
+ if (data.body.content.action === 4) {
|
|
|
+ // 通话结束
|
|
|
setTimeout(() => {
|
|
|
- //通话结束
|
|
|
- talkEnd.value = true;
|
|
|
- getRecognize();
|
|
|
- console.log('通话结束了。');
|
|
|
- }, 1000);
|
|
|
+ //通话结束
|
|
|
+ talkEnd.value = true;
|
|
|
+ getRecognize();
|
|
|
+ console.log('通话转写结束了');
|
|
|
+ }, 1000);
|
|
|
}
|
|
|
}
|
|
|
- console.log(messageList.value, '消息内容');
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.log('坐席辅助收到消息', message);
|
|
@@ -241,8 +273,8 @@ const fillSingle = () => {
|
|
|
autofocus: false,
|
|
|
})
|
|
|
.then(() => {
|
|
|
- emit('orderOverwrite', recognizeList.value);
|
|
|
- searchCol.value = !searchCol.value;
|
|
|
+ emit('orderOverwrite', recognizeList.value);
|
|
|
+ searchCol.value = !searchCol.value;
|
|
|
})
|
|
|
.catch(() => {});
|
|
|
};
|
|
@@ -316,7 +348,7 @@ watch(messageList.value, (val) => {
|
|
|
border-radius: 50%;
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
- top: calc(50% - 10px);
|
|
|
+ top: calc(50% + 0px);
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -366,7 +398,7 @@ watch(messageList.value, (val) => {
|
|
|
border-radius: 50%;
|
|
|
position: absolute;
|
|
|
right: 0;
|
|
|
- top: calc(50% - 10px);
|
|
|
+ top: calc(50% + 0px);
|
|
|
}
|
|
|
}
|
|
|
}
|