Эх сурвалжийг харах

reactor:辅助坐席优化(手动控制自动滚动到底部);

zhangchong 1 жил өмнө
parent
commit
f1afa120c3

+ 9 - 4
src/layout/navBars/breadcrumb/telControl.vue

@@ -617,12 +617,17 @@ const removeTimerOnDuty = () => {
 	clearInterval(onDutyTimer.value);
 };
 // 监听消息
-const signalRStart = () => {
+const signalRStart = async () => {
 	signalR.SR.on('RestApplyPass', (data: any) => {
 		// 小休审批通过消息
 		console.log(data, '小休审批通过消息');
 		RestApplyPassFn(data);
 	});
+	/*try {
+		await signalR.SR.invoke('send', 'user', '消息');
+	} catch (err) {
+		console.error(err);
+	}*/
 };
 // 检查用户状态
 // 设置当前可用的按钮
@@ -1207,8 +1212,8 @@ const onRest = async () => {
 };
 // 打开弹窗清空表单
 const restFormOpened = () => {
-  restFormRef.value?.resetFields();
-  restFormRef.value?.clearValidate();
+	restFormRef.value?.resetFields();
+	restFormRef.value?.clearValidate();
 };
 // 小休流程选择下一个环节
 const selectNextStep = (val: any) => {
@@ -1508,7 +1513,7 @@ const callCenterConnect = async () => {
 };
 onMounted(async () => {
 	clearTimeout(talkDealTimer.value); // 清除话后整理定时器
-	signalRStart(); //开启消息监听
+	await signalRStart(); //开启消息监听
 	removeTimerOnDuty(); // 移除定时器
 	await getTelsLists(); // 查询所有分机
 	await callCenterConnect(); // 呼叫中心链接

+ 48 - 5
src/views/todo/seats/accept/Voice-assistant.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="voice-assistant">
 		<!-- 聊天框 -->
-		<el-scrollbar class="h100" noresize ref="scrollbarRef" max-height="400px" v-if="messageList.length">
+		<el-scrollbar class="h100" noresize ref="scrollbarRef" max-height="400px" v-if="messageList.length" @click="stopScroll">
 			<div class="chat-box" ref="chatBoxRef">
 				<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 === 'user'" class="user">
@@ -21,6 +21,9 @@
 			</div>
 		</el-scrollbar>
 		<Empty v-else />
+		<el-button @click.stop="keepScroll" class="keep-scroll" title="回到底部" circle v-if="!isScrollBottom">
+			<SvgIcon name="ele-ArrowDown" size="18px" />
+		</el-button>
 		<!-- 识别内容 通话结束才展示-->
 		<div class="recognize-box" v-if="talkEnd && messageList.length">
 			<transition name="el-zoom-in-bottom">
@@ -183,6 +186,9 @@ const wsReceive = (message: any) => {
 					talkEnd.value = true;
 					getRecognize();
 					scrollToBottom();
+					setTimeout(() => {
+						stopScroll();
+					}, 500);
 				}, 1000);
 				console.log('通话转写结束了');
 			}
@@ -207,13 +213,28 @@ const getRecognize = () => {
 		recognizeList.value = result;
 	});
 };
+// 停止滚动
+const stopScroll = () => {
+	isScrollBottom.value = false;
+};
 // 滚动到底部
+const isScrollBottom = ref(true); // 是否需要滚动到底部
+const isAutoScroll = ref(true); // 是否自动滚动
 const scrollToBottom = async () => {
+	if (!isScrollBottom.value) return;
 	await nextTick(); // 等待 DOM 更新
 	const max = chatBoxRef.value?.clientHeight;
 	scrollbarRef.value?.setScrollTop(max);
+	isAutoScroll.value = true;
+};
+watch(messageList.value, () => {
+	scrollToBottom();
+});
+// 继续滚动
+const keepScroll = () => {
+	isScrollBottom.value = true;
+	scrollToBottom();
 };
-
 // 一键填单
 const fillSingle = () => {
 	ElMessageBox.confirm(`确定要一键填单吗?填单后会覆盖之前填写的内容,请谨慎操作`, '提示', {
@@ -230,8 +251,25 @@ const fillSingle = () => {
 		})
 		.catch(() => {});
 };
-watch(messageList.value, () => {
-	scrollToBottom();
+// setInterval(() => {
+// 	messageList.value.push({
+// 		body: {
+// 			content: {
+// 				callSentenceInfo: {
+// 					text: '你好,我是小智,有什么可以帮您的吗?',
+// 					role: 'agent',
+// 				},
+// 				calledNumber: '1009',
+// 				callerNumber: '19136073037',
+// 			},
+// 		},
+// 		timestamps: new Date().getTime(),
+// 	});
+// }, 1000);
+onMounted(() => {
+	scrollbarRef.value.wrapRef.addEventListener('mousewheel', () => {
+		stopScroll();
+	});
 });
 </script>
 
@@ -241,10 +279,15 @@ watch(messageList.value, () => {
 	height: 100%;
 	min-height: 400px;
 	position: relative;
+	.keep-scroll {
+		position: absolute;
+		right: 10px;
+		bottom: 40px;
+		z-index: 100;
+	}
 	.chat-box {
 		width: 100%;
 		padding-bottom: 50px;
-
 		.agent {
 			justify-content: flex-end;
 		}