reactor:通话控件新增签入时长;

src/layout/navBars/breadcrumb/telControl.vue

@@ -6,9 +6,13 @@
 				<span>状态：</span><b class="dutyOn_status">{{ currentStatusText }}</b>
 			</div>
 			<div class="pt5" v-if="talkTime">
-				<span>通话时长：</span><b class="dutyOn_timer">{{ formatDuration(talkTime, false) }}</b>
+				<span>通话时长：</span><b class="color-danger">{{ formatDuration(talkTime, false) }}</b>
 			</div>
 		</div>
+		<div class="duty-on-time">
+			<span class="duty-on-time-label" style="">签入时长</span>
+			<span class="color-danger duty-on-time-time"> {{ formatDuration(onDutyTime) }}</span>
+		</div>
 		<div class="btn">
 			<!-- 签入 -->
 			<template v-if="telStatusInfo.isDutyOn">
@@ -401,7 +405,7 @@
 					class="w100"
 					allow-create
 					default-first-option
-          :props="{
+					:props="{
 						label: 'telNo',
 						value: 'telNo',
 					}"
@@ -428,7 +432,7 @@
 					class="w100"
 					allow-create
 					default-first-option
-          :props="{
+					:props="{
 						label: 'telNo',
 						value: 'telNo',
 					}"
@@ -455,7 +459,7 @@
 					class="w100"
 					allow-create
 					default-first-option
-          :props="{
+					:props="{
 						label: 'telNo',
 						value: 'telNo',
 					}"
@@ -489,6 +493,7 @@ import signalR from '/@/utils/signalR';
 import { Local } from '/@/utils/storage';
 import { ola } from '/@/utils/ola_api';
 import { useRouter } from 'vue-router';
+import dayjs from 'dayjs';
 // 引入组件
 const CommonAdvice = defineAsyncComponent(() => import('/@/components/CommonAdvice/index.vue')); // 常用意见
 const AnnexList = defineAsyncComponent(() => import('/@/components/AnnexList/index.vue'));
@@ -559,8 +564,7 @@ const { userInfos } = storeToRefs(storesUserInfo); // 用户信息
 
 const talkTime = ref<any>(0); // 通话时长
 const talkTimer = ref<any>(null); // 通话时长定时器
-
-// 开始计时
+// 开始通话计时
 const startTime = () => {
 	let localTalkTime = Local.get('talkTime');
 	if (talkTime) {
@@ -576,12 +580,37 @@ const startTime = () => {
 		}, 1000);
 	}
 };
-// 结束计时
+
+// 结束通话计时
 const removeTimer = () => {
 	talkTime.value = 0;
 	Local.remove('talkTime');
 	clearInterval(talkTimer.value);
 };
+// 开始签入时长
+const onDutyTime = ref<any>(0); // 签入时长
+const onDutyTimer = ref<any>(null); // 签入时长定时器
+const startTimeOnDuty = (startTime?: any) => {
+	if (startTime) {
+		// 从后台获取签入时长
+		// 使用当前时间减去后台返回的签入时间
+    if(!startTime) startTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss');
+		startTime = dayjs(new Date()).diff(dayjs(startTime), 'second');
+		onDutyTime.value = startTime;
+		onDutyTimer.value = setInterval(() => {
+			onDutyTime.value++;
+		}, 1000);
+	} else {
+		onDutyTimer.value = setInterval(() => {
+			onDutyTime.value++;
+		}, 1000);
+	}
+};
+// 结束签入时长
+const removeTimerOnDuty = () => {
+	onDutyTime.value = 0;
+	clearInterval(onDutyTimer.value);
+};
 // 监听消息
 const signalRStart = () => {
 	signalR.SR.on('RestApplyPass', (data: any) => {
@@ -735,6 +764,7 @@ const onDutyFn = async () => {
 						currentTel.value.queue = res.result.queueId;
 						// 不需要选择分机号和密码 直接签入 传入默认分机号
 						websocket_connect(); //开启消息监听
+						startTimeOnDuty(res.result.startTime); // 开启计时 签入时长
 						state.loading = false;
 					})
 					.catch(() => {})
@@ -765,6 +795,7 @@ const clickOnDuty = (formEl: FormInstance | undefined) => {
 					currentTel.value.telNo = state.dutyForm.telNo;
 					currentTel.value.queue = res.result.queueId;
 					websocket_connect(); //开启消息监听
+					startTimeOnDuty(res.result.startTime); // 开启计时 签入时长
 					state.loading = false;
 					state.dutyDialogVisible = false;
 				})
@@ -789,6 +820,7 @@ const clickOnDuty = (formEl: FormInstance | undefined) => {
 					currentTel.value.telNo = res.result.telNo;
 					currentTel.value.queue = res.result.queueId;
 					websocket_connect(); //开启消息监听
+					startTimeOnDuty(res.result.startTime); // 开启计时 签入时长
 					state.loading = false;
 					state.dutyDialogVisible = false;
 				})
@@ -810,6 +842,7 @@ const clickOnDuty = (formEl: FormInstance | undefined) => {
 					currentTel.value.telNo = res.result.telNo;
 					currentTel.value.queue = res.result.queueId;
 					websocket_connect(); //开启消息监听
+					startTimeOnDuty(res.result.startTime); // 开启计时 签入时长
 					state.loading = false;
 					state.dutyDialogVisible = false;
 				})
@@ -1147,11 +1180,12 @@ const offDutyFn = () => {
 			dutyOff()
 				.then(() => {
 					ola.logout(currentTel.value.telNo); //签出
-					setTimeout(()=>{
-            ola.close();
-          },500)
+					setTimeout(() => {
+						ola.close();
+					}, 500);
 					// 重置所有状态
 					useTelStatusStore.resetState();
+					removeTimerOnDuty(); // 移除定时器
 					state.loading = false;
 					state.dutyOnSrc = getImageUrl('phoneControls/dutyOn_blue.png'); //签入图片
 					state.loading = false;
@@ -1443,6 +1477,7 @@ onMounted(async () => {
 				currentTel.value.telNo = res.result.telNo;
 				currentTel.value.queue = res.result.queueId;
 				websocket_connect(); //开启消息监听
+				startTimeOnDuty(res.result.startTime); // 开启计时 签入时长
 				state.loading = false;
 			})
 			.catch(() => {
@@ -1474,7 +1509,18 @@ onMounted(async () => {
 	padding: 0 18px 0 40px;
 	color: var(--hotline-color-text-main);
 	height: 100%;
-
+	.duty-on-time {
+		width: 70px;
+		text-align: center;
+		&-label {
+			display: block;
+      margin-top:13px;
+		}
+    &-time{
+      display: block;
+      margin-top:15px;
+    }
+	}
 	.infos {
 		text-align: left;
 		width: 140px;
@@ -1483,12 +1529,6 @@ onMounted(async () => {
 			color: var(--el-color-primary);
 			font-weight: normal;
 		}
-
-		.dutyOn_timer {
-			color: var(--el-color-danger);
-			font-weight: normal;
-		}
-
 		span {
 			display: inline-block;
 			width: 80px;

src/views/login/component/Account.vue

@@ -159,7 +159,11 @@ const signInSuccess = (isNoPower: boolean | undefined) => {
 		// 关闭 loading
 		state.loading = true;
 		const signInText = '欢迎回来！';
-    ElMessage.success(`${currentTimeInfo}，${signInText}`);
+    ElNotification({
+      type:'success',
+      title: `${currentTimeInfo}`,
+      message: `${signInText}`,
+    })
 		NextLoading.start();
 	}
 };