odjbin/SmartOpsWeb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'master' (#62) from master into test

Browse Source 
Reviewed-on: http://git.feashow.cn/feashow/SmartOpsWeb/pulls/62
This commit is contained in:
odjbin
2024-09-15 16:49:15 +00:00
parent 173562c9d2 0c2c2a7e79
commit 2c7bdb5a74
2 changed files with 166 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
src/components/liveCall/LiveCallItem.vue
View File

@@ -2,20 +2,20 @@
<div class="live-call">
<div class="header">
<div>
<span style="margin-right: 20px">张三</span>
<span>14785295642</span>
<span style="margin-right: 20px">{{ headData.username }}</span>
<span>{{ headData.phone }}</span>
</div>
<div><span>工单名称：xxxxxx工单</span></div>
<div><span>工单名称：{{ headData.orderName }}</span></div>
</div>
<el-scrollbar ref="scrollbarRef" class="scrollbar">
<div class="chat-content" ref="innerRef">
<div class="time-grap"><span>6月5日 12:05</span></div>
<div v-for="(item,index) in recordList" :key="index">
<div v-for="(item,index) in recordObj.content" :key="index">
<div class="time-grap"><span>{{ item.conversationTimestamp || '6月5日 12:05' }}</span></div>
<!-- 我的 -->
<div v-if="item.id==userId" class="word-my">
<div v-if="item.speaker==0" class="word-my">
<div class="info">
<p class="name">{{ item.nickName }} </p>
<div class="info-content">{{ item.contactText }}</div>
<p class="name">{{ item.speaker==0?headData.username:'AI助手' }} </p>
<div class="info-content">{{ item.message }}</div>
</div>
<el-avatar text="我"/>
</div>
@@ -23,8 +23,8 @@
<div v-else class="word">
<el-avatar text="对方"/>
<div class="info">
<p class="name">{{ item.nickName }} </p>
<div class="info-content">{{ item.contactText }}</div>
<p class="name">{{ item.speaker==0?headData.username:'AI助手' }} </p>
<div class="info-content">{{ item.message }}</div>
</div>
</div>
</div>
@@ -34,162 +34,24 @@
</template>
<script setup>
import {getToken} from '@/utils/auth'
const userId = ref(1)
const recordList = ref([{
id: 2,
nickName: 'AI助手',
contactText: '你好'
},
{
id: 1,
nickName: '我',
contactText: '你好!'
import {defineProps} from "vue";
const scrollbarRef=ref()
const props = defineProps({
recordObj: {
type: Object,
default: {}
},
{
id: 2,
nickName: 'AI助手',
contactText: '你好'
headData: {
type: Object,
default: {}
},
{
id: 1,
nickName: '我',
contactText: '你好!'
},
{
id: 2,
nickName: 'AI助手',
contactText: '你好'
},
{
id: 1,
nickName: '我',
contactText: '你好!'
},
])
// setInterval(() => {
// recordList.value.push( {
// id: 1,
// nickName: '我',
// contactText: '45535'
// },
// {
// id: 2,
// nickName: 'AI助手',
// contactText: '555'
// })
// scrollToBottom();
// }, 1000)
//聊天消息滚动面板dom
const scrollbarRef = ref(null);
let socket = reactive("");
let token = getToken();
let send = {
type: "ping",
};
//滚动面板自动滑动到底部
const scrollToBottom = () => {
if (scrollbarRef.value) {
const container = scrollbarRef.value.$el.querySelector('.el-scrollbar__wrap');
container.style.scrollBehavior = 'smooth'; // 添加平滑滚动效果
container.scrollTop = container.scrollHeight;
}
};
nextTick(() => {
scrollToBottom();
})
const setWsUrl=(url)=>{
return (window.location.protocol === 'http:' ? "ws://" : "wss://")+window.location.host + import.meta.env.VITE_BASE_WSURL + url;
const getScrollbarRef=()=>{
return scrollbarRef.value
}
const initWebSocket = () => {
try {
// const wsUrl=setWsUrl(`/ws/text/${token}`)
const wsUrl=`ws://frp.feashow.cn:31800/ws/text/${token}`
socket = new WebSocket(wsUrl)
// 2. ws.send()给服务器发送信息
//连接发生错误的回调方法
socket.onerror = function () {
console.log("ws连接发生错误");
};
//连接成功建立的回调方法
socket.onopen = function () {
// let authInfo = {
// token: getToken(),
// type: "auth",
// cluster: "notice"
// }
// socket.send(JSON.stringify(authInfo))
console.log("ws连接成功");
}
//接收到消息的回调方法
socket.onmessage = function (event) {
let data = JSON.parse(event.data)
if(data.type!=='pong'){
console.log("服务器返回的信息: ", data);
}
}
//连接关闭的回调方法
socket.onclose = function () {
// initWebSocket()
console.log("ws连接关闭");
}
setInterval(() => {
socket.send(JSON.stringify(send))
}, 30000)
} catch (e) {
console.log(e)
console.log("ws连接失败");
}
}
initWebSocket()
// onMounted(() => {
// scrollToBottom();
// })
// const initWebSocket = () => {
// try {
// const wsUrl = "http://frp.feashow.cn:31800/ws"
// const socket = new SockJS(wsUrl)
// const stompClient = Stomp.over(socket);
// stompClient.connect(
// {"Authorization": getToken()},//传递token
// (frame) => {
// //测试topic
// stompClient.subscribe("/topic/messages", (message) => {
// const messagesList = document.getElementById('messagesList');
// let listItem = document.createElement('li');
// listItem.textContent = message.body;
// messagesList.appendChild(listItem);
// });
// //测试发送
// stompClient.send("/app/receive", {}, JSON.stringify({"user": "2222222"}))
// },
// (err) => {
// console.log("错误：");
// console.log(err);
// //10s后重新连接一次
// setTimeout(() => {
// initWebSocket();
// }, 10000)
// }
// );
// } catch (e) {
// console.log(e)
// console.log("ws连接失败");
// }
// }
// initWebSocket()
defineExpose({
getScrollbarRef
})
</script>
<style lang="scss" scoped>

144
src/components/liveCall/index.vue
View File

@@ -1,11 +1,151 @@
<template>
<!--测试 张三 : 17260625724565 李四: 17260625724123-->
<div class="live-call-block">
<live-call-item v-for="item in 2"/>
<live-call-item ref="recordLeftRef" :recordObj="recordLeftObj" :headData="leftHeadData" />
<live-call-item ref="recordRightRef" :recordObj="recordRightObj" :headData="rightHeadData" />
</div>
</template>
<script setup>
import {getToken} from '@/utils/auth'
//聊天消息滚动面板dom
const recordLeftRef = ref(null);
const recordRightRef = ref(null);
const leftHeadData=ref({
username:'张三',
phone:'13546812315',
orderName:'张三工单',
})
const rightHeadData=ref({
username:'李四',
phone:'18246812546',
orderName:'李四工单',
})
const recordLeftObj = ref(
{
"callIdNumber": "17260625724565",
"content": [{
"callIdNumber": "17260625724565",
"conversationId": 0,
"conversationTimestamp": "2024-09-15 12:10",
"createTime": "2024-09-16",
"message": "你好11",
"speaker": "1"
},
{
"callIdNumber": "17260625724565",
"conversationId": 0,
"conversationTimestamp": "2024-09-15 16:10",
"createTime": "2024-09-16",
"message": "你好好11!",
"speaker": "0"
}
],
"name": "",
"phone": "",
"timestamp": "1726416597958",
"type": "1"
}
)
const recordRightObj = ref(
{
"callIdNumber": "17260625724123",
"content": [{
"callIdNumber": "17260625724123",
"conversationId": 0,
"conversationTimestamp": "2024-09-15 12:10",
"createTime": "2024-09-16",
"message": "你好22",
"speaker": "1"
},
{
"callIdNumber": "17260625724123",
"conversationId": 0,
"conversationTimestamp": "2024-09-15 16:10",
"createTime": "2024-09-16",
"message": "你好好222!",
"speaker": "0"
}
],
"name": "",
"phone": "",
"timestamp": "1726416597958",
"type": "2"
}
)
let socket = reactive("");
let token = getToken();
let send = {
type: "ping",
};
//滚动面板自动滑动到底部
const scrollToBottom = (scrollbarRef) => {
if (scrollbarRef) {
const container = scrollbarRef.$el.querySelector('.el-scrollbar__wrap');
container.style.scrollBehavior = 'smooth'; // 添加平滑滚动效果
container.scrollTop = container.scrollHeight;
}
};
const setWsUrl = (url) => {
return (window.location.protocol === 'http:' ? "ws://" : "wss://") + window.location.host + import.meta.env.VITE_BASE_WSURL + url;
}
const initWebSocket = () => {
try {
// const wsUrl=setWsUrl(`/ws/text/${token}`)
const wsUrl = `ws://frp.feashow.cn:31800/ws/text/${token}`
socket = new WebSocket(wsUrl)
// 2. ws.send()给服务器发送信息
//连接发生错误的回调方法
socket.onerror = function () {
console.log("ws连接发生错误");
};
//连接成功建立的回调方法
socket.onopen = function () {
// let authInfo = {
// token: getToken(),
// type: "auth",
// cluster: "notice"
// }
// socket.send(JSON.stringify(authInfo))
console.log("ws连接成功");
}
//接收到消息的回调方法
socket.onmessage = function (event) {
let data = JSON.parse(event.data)
if (data.type !== 'pong') {
console.log("服务器返回的信息: ", data);
if(data.type=='1'){
recordLeftObj.value.content.push(data.content)
console.info("🚀 ~method:onmessage -----", recordLeftObj.value)
nextTick(() => {
scrollToBottom(recordLeftRef.value)
})
}else {
recordRightObj.value.content.push(data.content)
console.info("🚀 ~method:onmessage -----", recordRightObj.value)
nextTick(() => {
scrollToBottom(recordRightRef.value);
})
}
}
}
//连接关闭的回调方法
socket.onclose = function () {
initWebSocket()
console.log("ws连接关闭");
}
setInterval(() => {
socket.send(JSON.stringify(send))
}, 10000)
} catch (e) {
console.log(e)
console.log("ws连接失败");
}
}
initWebSocket()
</script>
<style lang="scss" scoped>