|
@@ -1,15 +1,47 @@
|
|
|
<template>
|
|
|
<div class="phoneControls" v-loading="state.loading">
|
|
|
- <!-- 电话状态 -->
|
|
|
- <div class="infos">
|
|
|
- <div class="pt5" :class="talkTime ? '' : 'mt8'"><span>分机号:</span>{{ telStatusInfo.telsNo }}</div>
|
|
|
- <div class="pt5" :class="talkTime ? '' : 'mt8'">
|
|
|
- <span>状态:</span><b class="dutyOn_status">{{ currentStatusText }}</b>
|
|
|
- </div>
|
|
|
- <div class="pt5" v-if="talkTime">
|
|
|
- <span>通话时长:</span> <el-text tag="b" type="danger">{{ formatDuration(talkTime, false) }}</el-text>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <el-popover placement="top-start" :width="240" trigger="hover" v-model:visible="showPop">
|
|
|
+ <template #reference>
|
|
|
+ <div class="status-box">
|
|
|
+ <span class="color-primary">{{ currentStatusText }}</span>
|
|
|
+ <el-text tag="b" v-if="currentStatusText === '通话中'">{{ formatDuration(talkTime) }}</el-text>
|
|
|
+ <el-text tag="b" v-else-if="['空闲', '外呼中'].includes(currentStatusText)">{{ formatDuration(idleTime) }}</el-text>
|
|
|
+ <el-text tag="b" v-else-if="currentStatusText === '小休中'">{{ formatDuration(busyTime) }}</el-text>
|
|
|
+ <el-text tag="b" v-else-if="currentStatusText === '整理中'">{{ formatDuration(arrangeTime) }}</el-text>
|
|
|
+ <SvgIcon name="ele-CaretBottom" class="arrow" :class="{'is-reverse':showPop}"/>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #default>
|
|
|
+ <template v-if="telStatusInfo.isDutyOn">
|
|
|
+ <div class="flex-center-between" v-if="telStatusInfo.telsNo">
|
|
|
+ <span class="ml10">分机号</span>
|
|
|
+ <el-text tag="b">{{ telStatusInfo.telsNo }}</el-text>
|
|
|
+ </div>
|
|
|
+ <div class="flex-center-between mt10" v-if="signTime">
|
|
|
+ <span class="ml10">签入时长</span>
|
|
|
+ <el-text tag="b">{{ formatDuration(signTime) }}</el-text>
|
|
|
+ </div>
|
|
|
+ <div class="flex-center-between mt10" v-if="talkTime && currentStatusText !== '通话中'">
|
|
|
+ <span class="ml10">通话时长</span>
|
|
|
+ <el-text tag="b">{{ formatDuration(talkTime) }}</el-text>
|
|
|
+ </div>
|
|
|
+ <div class="flex-center-between mt10" v-if="idleTime && !['空闲', '外呼中'].includes(currentStatusText)">
|
|
|
+ <span class="ml10">空闲时长</span>
|
|
|
+ <el-text tag="b">{{ formatDuration(idleTime) }}</el-text>
|
|
|
+ </div>
|
|
|
+ <div class="flex-center-between mt10" v-if="busyTime && currentStatusText !== '小休中'">
|
|
|
+ <span class="ml10">示忙时长</span>
|
|
|
+ <el-text tag="b">{{ formatDuration(busyTime) }}</el-text>
|
|
|
+ </div>
|
|
|
+ <div class="flex-center-between mt10" v-if="arrangeTime && currentStatusText !== '整理中'">
|
|
|
+ <span class="ml10">整理时长</span>
|
|
|
+ <el-text tag="b">{{ formatDuration(arrangeTime) }}</el-text>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else> <span class="color-info">请签入</span> </template>
|
|
|
+ </template>
|
|
|
+ </el-popover>
|
|
|
+
|
|
|
<!-- 按钮列表 -->
|
|
|
<div class="btn-container">
|
|
|
<!-- 签入 -->
|
|
@@ -19,8 +51,6 @@
|
|
|
class="item active"
|
|
|
@click="onControlClick('dutyOff')"
|
|
|
v-if="activeArr.includes('dutyOff')"
|
|
|
- @mouseenter="onHover('dutyOffSrc', 'phoneControls/dutyOff_white.png')"
|
|
|
- @mouseleave="onHover('dutyOffSrc', 'phoneControls/dutyOff_blue.png')"
|
|
|
title="签出"
|
|
|
>
|
|
|
<img :src="state.dutyOffSrc" alt="" />
|
|
@@ -34,13 +64,7 @@
|
|
|
</template>
|
|
|
<!-- 灰色签入不可用 -->
|
|
|
<template v-else>
|
|
|
- <div
|
|
|
- class="item active"
|
|
|
- @click="onControlClick('dutyOn')"
|
|
|
- title="签入"
|
|
|
- @mouseenter="onHover('dutyOnSrc', 'phoneControls/dutyOn_white.png')"
|
|
|
- @mouseleave="onHover('dutyOnSrc', 'phoneControls/dutyOn_blue.png')"
|
|
|
- >
|
|
|
+ <div class="item active" @click="onControlClick('dutyOn')" title="签入">
|
|
|
<img :src="state.dutyOnSrc" alt="" />
|
|
|
<span>签入</span>
|
|
|
</div>
|
|
@@ -50,13 +74,11 @@
|
|
|
<template v-if="telStatusInfo.isDutyOn && activeArr.includes('callOut')">
|
|
|
<div
|
|
|
class="item active"
|
|
|
- :title="telStatusInfo.isHold ? '取消外呼模式' : '外呼模式'"
|
|
|
+ :title="telStatusInfo.isHold ? '取消外呼' : '外呼模式'"
|
|
|
@click="onControlClick(telStatusInfo.isCallOut ? 'unCallOut' : 'callOut')"
|
|
|
- @mouseenter="onHover('callOutSrc', 'phoneControls/callOut_white.png')"
|
|
|
- @mouseleave="onHover('callOutSrc', 'phoneControls/callOut_blue.png')"
|
|
|
>
|
|
|
<img :src="state.callOutSrc" alt="" />
|
|
|
- <span>{{ telStatusInfo.isCallOut ? '取消外呼模式' : '外呼模式' }}</span>
|
|
|
+ <span>{{ telStatusInfo.isCallOut ? '取消外呼' : '外呼模式' }}</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
<!-- 灰色外呼不可用 -->
|
|
@@ -74,8 +96,6 @@
|
|
|
:class="state.active.includes('hangup') ? 'active' : ''"
|
|
|
@click="onControlClick('hangup')"
|
|
|
title="挂断"
|
|
|
- @mouseenter="onHover('hangupSrc', 'phoneControls/hangup_white.png')"
|
|
|
- @mouseleave="onHover('hangupSrc', 'phoneControls/hangup_blue.png')"
|
|
|
>
|
|
|
<img :src="state.hangupSrc" alt="" />
|
|
|
<span>挂断</span>
|
|
@@ -96,8 +116,6 @@
|
|
|
@click="onControlClick('restEnd')"
|
|
|
v-if="telStatusInfo.isRest === 'resting'"
|
|
|
title="结束小休"
|
|
|
- @mouseenter="onHover('restSrc', 'phoneControls/rest_white.png')"
|
|
|
- @mouseleave="onHover('restSrc', 'phoneControls/rest_blue.png')"
|
|
|
>
|
|
|
<img :src="state.restSrc" alt="" />
|
|
|
<span
|
|
@@ -109,8 +127,6 @@
|
|
|
@click="onControlClick('rest')"
|
|
|
v-else-if="telStatusInfo.isRest === 'unRest'"
|
|
|
title="小休"
|
|
|
- @mouseenter="onHover('restSrc', 'phoneControls/rest_white.png')"
|
|
|
- @mouseleave="onHover('restSrc', 'phoneControls/rest_blue.png')"
|
|
|
>
|
|
|
<img :src="state.restSrc" alt="" />
|
|
|
<span>小休 </span>
|
|
@@ -134,8 +150,6 @@
|
|
|
class="item active"
|
|
|
:title="telStatusInfo.isHold ? '取消保持' : '保持'"
|
|
|
@click="onControlClick(telStatusInfo.isHold ? 'unHold' : 'hold')"
|
|
|
- @mouseenter="onHover('holdSrc', 'phoneControls/hold_white.png')"
|
|
|
- @mouseleave="onHover('holdSrc', 'phoneControls/hold_blue.png')"
|
|
|
>
|
|
|
<img :src="state.holdSrc" alt="" />
|
|
|
<span>{{ telStatusInfo.isHold ? '取消保持' : '保持' }}</span>
|
|
@@ -155,8 +169,6 @@
|
|
|
class="item active"
|
|
|
:title="telStatusInfo.isMute ? '取消静音' : '静音'"
|
|
|
@click="onControlClick(telStatusInfo.isMute ? 'unMute' : 'mute')"
|
|
|
- @mouseenter="onHover('muteSrc', 'phoneControls/mute_white.png')"
|
|
|
- @mouseleave="onHover('muteSrc', 'phoneControls/mute_blue.png')"
|
|
|
>
|
|
|
<img :src="state.muteSrc" alt="" />
|
|
|
<span>{{ telStatusInfo.isMute ? '取消静音' : '静音' }}</span>
|
|
@@ -175,12 +187,10 @@
|
|
|
<div
|
|
|
class="item active"
|
|
|
@click="onControlClick(telStatusInfo.isTalkingDeal ? 'unTalkingDeal' : 'TalkingDeal')"
|
|
|
- @mouseenter="onHover('talkingDealSrc', 'phoneControls/talkingDeal_white.png')"
|
|
|
- :title="telStatusInfo.isTalkingDeal ? '取消话后整理' : '话后整理'"
|
|
|
- @mouseleave="onHover('talkingDealSrc', 'phoneControls/talkingDeal_blue.png')"
|
|
|
+ :title="telStatusInfo.isTalkingDeal ? '取消整理' : '话后整理'"
|
|
|
>
|
|
|
<img :src="state.talkingDealSrc" alt="" />
|
|
|
- <span>{{ telStatusInfo.isTalkingDeal ? '取消话后整理' : '话后整理' }}</span>
|
|
|
+ <span>{{ telStatusInfo.isTalkingDeal ? '取消整理' : '话后整理' }}</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
<!-- 话后整理中不可用 -->
|
|
@@ -197,8 +207,6 @@
|
|
|
class="item active"
|
|
|
@click="onControlClick('transfer')"
|
|
|
title="保持"
|
|
|
- @mouseenter="onHover('transferSrc', 'phoneControls/transfer_white.png')"
|
|
|
- @mouseleave="onHover('transferSrc', 'phoneControls/transfer_blue.png')"
|
|
|
>
|
|
|
<img :src="state.transferSrc" alt="" />
|
|
|
<span>转接</span>
|
|
@@ -216,9 +224,7 @@
|
|
|
<template v-if="telStatusInfo.isDutyOn && activeArr.includes('conference') && onCallArr.length !== 1">
|
|
|
<div
|
|
|
class="item active"
|
|
|
- @mouseenter="onHover('conferenceSrc', 'phoneControls/conference_white.png')"
|
|
|
title="三方会议"
|
|
|
- @mouseleave="onHover('conferenceSrc', 'phoneControls/conference_blue.png')"
|
|
|
@click="onControlClick('conference')"
|
|
|
>
|
|
|
<img :src="state.conferenceSrc" alt="" />
|
|
@@ -231,9 +237,7 @@
|
|
|
<template #reference>
|
|
|
<div
|
|
|
class="item active"
|
|
|
- @mouseenter="onHover('conferenceSrc', 'phoneControls/conference_white.png')"
|
|
|
title="三方会议"
|
|
|
- @mouseleave="onHover('conferenceSrc', 'phoneControls/conference_blue.png')"
|
|
|
>
|
|
|
<img :src="state.conferenceSrc" alt="" />
|
|
|
<span>三方会议({{ onCallArr.length }})</span>
|
|
@@ -259,9 +263,7 @@
|
|
|
<template v-if="telStatusInfo.isDutyOn && activeArr.includes('outbound')">
|
|
|
<div
|
|
|
class="item active"
|
|
|
- @mouseenter="onHover('outboundSrc', 'phoneControls/outbound_white.png')"
|
|
|
title="呼叫"
|
|
|
- @mouseleave="onHover('outboundSrc', 'phoneControls/outbound_blue.png')"
|
|
|
@click="onControlClick('outbound')"
|
|
|
>
|
|
|
<img :src="state.outboundSrc" alt="" />
|
|
@@ -276,11 +278,6 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
</div>
|
|
|
- <!-- 签入时长 -->
|
|
|
- <div class="duty-on-time">
|
|
|
- <span class="duty-on-time-label">签入时长</span>
|
|
|
- <el-text class="duty-on-time-time" tag="b" type="danger" v-if="onDutyTime">{{ formatDuration(onDutyTime) }}</el-text>
|
|
|
- </div>
|
|
|
<!-- 等待人数 -->
|
|
|
<div class="wait-box">
|
|
|
<div class="today-wait">
|
|
@@ -574,6 +571,7 @@ import { getDataByCode } from '@/api/system/dict';
|
|
|
import { useTransition, useDocumentVisibility } from '@vueuse/core';
|
|
|
import { useWebSocket } from '@/hooks/useWebsocket';
|
|
|
import { olaFn, olaWs } from '@/utils/olaFn';
|
|
|
+import { useIntervalFn } from '@vueuse/shared/index';
|
|
|
// 引入组件
|
|
|
const CommonAdvice = defineAsyncComponent(() => import('@/components/CommonAdvice/index.vue')); // 常用意见
|
|
|
const AnnexList = defineAsyncComponent(() => import('@/components/AnnexList/index.vue'));
|
|
@@ -644,53 +642,116 @@ const appConfigStore = useAppConfig();
|
|
|
const { AppConfigInfo } = storeToRefs(appConfigStore); // 系统配置信息
|
|
|
const storesUserInfo = useUserInfo();
|
|
|
const { userInfos } = storeToRefs(storesUserInfo); // 用户信息
|
|
|
+const showPop = ref(false);
|
|
|
|
|
|
-const talkTime = ref<any>(0); // 通话时长
|
|
|
-const talkTimer = ref<any>(null); // 通话时长定时器
|
|
|
+const talkTime = ref(0); // 通话时长
|
|
|
+const talkTimer = useIntervalFn(
|
|
|
+ () => {
|
|
|
+ talkTime.value += 1;
|
|
|
+ Local.set('talkTime', String(talkTime.value));
|
|
|
+ },
|
|
|
+ 1000,
|
|
|
+ { immediate: false }
|
|
|
+);
|
|
|
// 开始通话计时
|
|
|
-const startTime = () => {
|
|
|
+const startTalkTimer = () => {
|
|
|
let localTalkTime = Local.get('talkTime');
|
|
|
if (talkTime.value) {
|
|
|
talkTime.value = Number(localTalkTime);
|
|
|
- talkTimer.value = setInterval(() => {
|
|
|
- talkTime.value++;
|
|
|
- Local.set('talkTime', String(talkTime.value));
|
|
|
- }, 1000);
|
|
|
- } else {
|
|
|
- talkTimer.value = setInterval(() => {
|
|
|
- talkTime.value++;
|
|
|
- Local.set('talkTime', String(talkTime.value));
|
|
|
- }, 1000);
|
|
|
}
|
|
|
+ talkTimer.resume();
|
|
|
+ stopIdleTime();
|
|
|
};
|
|
|
-
|
|
|
// 结束通话计时
|
|
|
-const removeTimer = () => {
|
|
|
+const stopTalkTimer = () => {
|
|
|
+ talkTimer.pause();
|
|
|
talkTime.value = 0;
|
|
|
Local.remove('talkTime');
|
|
|
- clearInterval(talkTimer.value);
|
|
|
};
|
|
|
-// 开始签入时长
|
|
|
-const onDutyTime = ref<any>(0); // 签入时长
|
|
|
-const onDutyTimer = ref<any>(null); // 签入时长定时器
|
|
|
-const startDutyTimer = (second: any) => {
|
|
|
+
|
|
|
+const signTime = ref(0); //签入时长
|
|
|
+// 使用 useInterval 创建定时器
|
|
|
+const signInTimer = useIntervalFn(
|
|
|
+ () => {
|
|
|
+ signTime.value += 1;
|
|
|
+ },
|
|
|
+ 1000,
|
|
|
+ { immediate: false }
|
|
|
+);
|
|
|
+// 签入时长及时开始
|
|
|
+const startSignTime = (second?: number) => {
|
|
|
if (second) {
|
|
|
// 从后台获取签入时长
|
|
|
if (second < 0) second = 0; // 防止后台返回的签入时间大于当前时间
|
|
|
- onDutyTime.value = second;
|
|
|
- onDutyTimer.value = setInterval(() => {
|
|
|
- onDutyTime.value++;
|
|
|
- }, 1000);
|
|
|
+ signTime.value = second;
|
|
|
+ signInTimer.resume();
|
|
|
} else {
|
|
|
- onDutyTimer.value = setInterval(() => {
|
|
|
- onDutyTime.value++;
|
|
|
- }, 1000);
|
|
|
+ signInTimer.resume();
|
|
|
}
|
|
|
};
|
|
|
-// 结束签入时长
|
|
|
-const removeTimerOnDuty = () => {
|
|
|
- onDutyTime.value = 0;
|
|
|
- clearInterval(onDutyTimer.value);
|
|
|
+// 签入时长计时结束
|
|
|
+const stopSignTime = () => {
|
|
|
+ signTime.value = 0;
|
|
|
+ signInTimer.pause();
|
|
|
+};
|
|
|
+
|
|
|
+// 空闲时长
|
|
|
+const idleTime = ref(0);
|
|
|
+const idleTimer = useIntervalFn(
|
|
|
+ () => {
|
|
|
+ idleTime.value += 1;
|
|
|
+ },
|
|
|
+ 1000,
|
|
|
+ { immediate: false }
|
|
|
+);
|
|
|
+// 空闲时长开始
|
|
|
+const startIdleTime = () => {
|
|
|
+ idleTimer.resume();
|
|
|
+ stopBusyTime();
|
|
|
+};
|
|
|
+// 空闲时长计时结束
|
|
|
+const stopIdleTime = () => {
|
|
|
+ idleTime.value = 0;
|
|
|
+ idleTimer.pause();
|
|
|
+};
|
|
|
+// 示忙时长
|
|
|
+const busyTime = ref(0);
|
|
|
+const busyTimer = useIntervalFn(
|
|
|
+ () => {
|
|
|
+ busyTime.value += 1;
|
|
|
+ },
|
|
|
+ 1000,
|
|
|
+ { immediate: false }
|
|
|
+);
|
|
|
+// 示忙时长开始
|
|
|
+const startBusyTime = () => {
|
|
|
+ busyTimer.resume();
|
|
|
+ stopIdleTime();
|
|
|
+};
|
|
|
+// 示忙时长计时结束
|
|
|
+const stopBusyTime = () => {
|
|
|
+ busyTime.value = 0;
|
|
|
+ busyTimer.pause();
|
|
|
+};
|
|
|
+
|
|
|
+// 整理时长
|
|
|
+const arrangeTime = ref(0);
|
|
|
+const arrangeTimer = useIntervalFn(
|
|
|
+ () => {
|
|
|
+ arrangeTime.value += 1;
|
|
|
+ },
|
|
|
+ 1000,
|
|
|
+ { immediate: false }
|
|
|
+);
|
|
|
+// 整理时长开始
|
|
|
+const startArrangeTime = () => {
|
|
|
+ arrangeTimer.resume();
|
|
|
+ stopIdleTime();
|
|
|
+};
|
|
|
+// 示忙时长计时结束
|
|
|
+const stopArrangeTime = () => {
|
|
|
+ arrangeTime.value = 0;
|
|
|
+ arrangeTimer.pause();
|
|
|
};
|
|
|
// 监听消息
|
|
|
const signalRStart = async () => {
|
|
@@ -771,10 +832,6 @@ const getThreeWayAndTransfer = async () => {
|
|
|
console.log(err, getNowDateTime());
|
|
|
}
|
|
|
};
|
|
|
-// 鼠标移入移出改变图标
|
|
|
-const onHover = (val: string, path: string) => {
|
|
|
- state[val] = getImageUrl(path);
|
|
|
-};
|
|
|
// 点击事件
|
|
|
const onControlClick = (val: string) => {
|
|
|
switch (val) {
|
|
@@ -945,7 +1002,7 @@ const onMessage = async (event: any) => {
|
|
|
if (currentTel.value.telModel === 2) {
|
|
|
// 外呼模式
|
|
|
// 结束计时
|
|
|
- removeTimer();
|
|
|
+ stopTalkTimer();
|
|
|
// 设置分机号和坐席组
|
|
|
useTelStatusStore.setCallInfo({ telsNo: data.agent_extn });
|
|
|
// 设置签入状态
|
|
@@ -957,10 +1014,11 @@ const onMessage = async (event: any) => {
|
|
|
useTelStatusStore.setPhoneControlState(TelStates.onCallOut);
|
|
|
state.loading = false;
|
|
|
console.log(getNowDateTime() + ':' + '呼叫中心 外呼模式:示闲中');
|
|
|
+ startIdleTime();
|
|
|
sendMsg('ready');
|
|
|
} else {
|
|
|
// 结束计时
|
|
|
- removeTimer();
|
|
|
+ stopTalkTimer();
|
|
|
// 设置分机号和坐席组
|
|
|
useTelStatusStore.setCallInfo({ telsNo: data.agent_extn });
|
|
|
// 设置签入状态
|
|
@@ -977,11 +1035,12 @@ const onMessage = async (event: any) => {
|
|
|
}
|
|
|
console.log('呼叫中心:示闲中', getNowDateTime());
|
|
|
sendMsg('ready');
|
|
|
+ startIdleTime();
|
|
|
}
|
|
|
} else if (data.state == 'unready') {
|
|
|
break_reason(data.private_data);
|
|
|
sendMsg('unready'); // 发送消息 业务系统消息通知
|
|
|
-
|
|
|
+ startBusyTime(); // 开始示忙
|
|
|
console.log('呼叫中心:示忙中,小休开始', getNowDateTime());
|
|
|
// 示忙中
|
|
|
useTelStatusStore.setPhoneControlState(TelStates.rest);
|
|
@@ -1053,11 +1112,13 @@ const onMessage = async (event: any) => {
|
|
|
console.log('呼叫中心:调用示闲', getNowDateTime());
|
|
|
onEndAcw(); // 挂机后整理结束
|
|
|
clearTimeout(talkDealTimer.value); // 清除话后整理定时器
|
|
|
+ stopArrangeTime();
|
|
|
}, time);
|
|
|
console.log('呼叫中心:话后整理中', getNowDateTime());
|
|
|
// 如果不是话后整理中
|
|
|
await onBeginAcw(); // 挂机后整理开始
|
|
|
sendMsg('acw');
|
|
|
+ startArrangeTime();
|
|
|
} else {
|
|
|
// 呼出直接调用示闲
|
|
|
olaRef.value.go_ready(); // 示闲
|
|
@@ -1122,7 +1183,7 @@ const onMessage = async (event: any) => {
|
|
|
} else if (data.private_data == 'three_way') {
|
|
|
// 三方来电通话中
|
|
|
// 开始计时
|
|
|
- startTime();
|
|
|
+ startTalkTimer();
|
|
|
// 设置电话状态 三方通话中
|
|
|
useTelStatusStore.setPhoneControlState(TelStates.onConference);
|
|
|
console.log('呼叫中心:三方来电通话中', getNowDateTime());
|
|
@@ -1164,7 +1225,7 @@ const onMessage = async (event: any) => {
|
|
|
} else if (data.other_answered == true) {
|
|
|
// 通话中
|
|
|
// 开始计时
|
|
|
- startTime();
|
|
|
+ startTalkTimer();
|
|
|
// 设置电话状态 通话中
|
|
|
useTelStatusStore.setPhoneControlState(TelStates.onCall);
|
|
|
|
|
@@ -1204,7 +1265,7 @@ const onMessage = async (event: any) => {
|
|
|
});
|
|
|
} else if (data.private_data == 'answered') {
|
|
|
// 开始计时
|
|
|
- startTime();
|
|
|
+ startTalkTimer();
|
|
|
// 设置电话状态 通话中
|
|
|
useTelStatusStore.setPhoneControlState(TelStates.onCall);
|
|
|
console.log('呼叫中心:呼入通话中', getNowDateTime());
|
|
@@ -1219,7 +1280,7 @@ const onMessage = async (event: any) => {
|
|
|
useTelStatusStore.setCallInfo({ telsNo: data.agent_extn });
|
|
|
|
|
|
// 结束计时
|
|
|
- removeTimer();
|
|
|
+ stopTalkTimer();
|
|
|
onCallArr.value = [];
|
|
|
console.log('呼叫中心:已挂机', onCallArr.value, data, getNowDateTime());
|
|
|
}
|
|
@@ -1311,7 +1372,7 @@ const onDutyFn = async () => {
|
|
|
currentTel.value.queueCallOut = res.result.queueCallOut; // 呼出分机组
|
|
|
// 不需要选择分机号和密码 直接签入 传入默认分机号
|
|
|
websocket_connect(); //开启消息监听
|
|
|
- startDutyTimer(res.result.second); // 开启计时 签入时长
|
|
|
+ startSignTime(res.result.second); // 开启计时 签入时长
|
|
|
isRest.value = res.result.isRest;
|
|
|
state.loading = false;
|
|
|
})
|
|
@@ -1379,7 +1440,7 @@ const clickOnDuty = (formEl: FormInstance | undefined) => {
|
|
|
currentTel.value.queueCallOut = res.result.queueCallOut; // 呼出分机组
|
|
|
}
|
|
|
websocket_connect(); //开启消息监听
|
|
|
- startDutyTimer(res.result.second); // 开启计时 签入时长
|
|
|
+ startSignTime(res.result.second); // 开启计时 签入时长
|
|
|
isRest.value = res.result.isRest;
|
|
|
state.loading = false;
|
|
|
state.dutyDialogVisible = false;
|
|
@@ -1991,12 +2052,9 @@ const seatAssistOff = () => {
|
|
|
// 重置状态和清除定时器
|
|
|
const resetState = () => {
|
|
|
useTelStatusStore.resetState();
|
|
|
- removeTimerOnDuty(); // 移除签入时长定时器
|
|
|
- removeTimer(); // 移除通话计时器
|
|
|
+ stopSignTime(); // 移除签入时长定时器
|
|
|
+ stopTalkTimer(); // 移除通话计时器
|
|
|
clearTimeout(talkDealTimer.value); // 清除话后整理定时器
|
|
|
- clearInterval(pingTimer.value); // 清除心跳定时器
|
|
|
- clearInterval(onDutyTimer.value); // 清除签入时长定时器
|
|
|
- clearInterval(talkTimer.value); // 清除通话时长定时器
|
|
|
state.loading = false;
|
|
|
};
|
|
|
// 获取当前分机状态
|
|
@@ -2011,7 +2069,7 @@ const getTelStatusFn = async () => {
|
|
|
currentTel.value.queue = result.queueId; // 呼入分机组
|
|
|
currentTel.value.telModel = result.telModel; // 1:普通模式 2:呼出模式
|
|
|
currentTel.value.queueCallOut = result.queueCallOut; // 呼出分机组
|
|
|
- startDutyTimer(result.second); // 开启计时 签入时长
|
|
|
+ startSignTime(result.second); // 开启计时 签入时长
|
|
|
isRest.value = result.isRest;
|
|
|
isCallHold.value = result.isCallHold;
|
|
|
isAcw.value = result.isCallEndArrange; // 是否话后整理中
|
|
@@ -2035,7 +2093,7 @@ const callCenterConnect = async () => {
|
|
|
currentTel.value.telModel = result.telModel; // 1:普通模式 2:呼出模式
|
|
|
currentTel.value.queueCallOut = result.queueCallOut; // 呼出分机组
|
|
|
websocket_connect(); //开启消息监听
|
|
|
- startDutyTimer(result.second); // 开启计时 签入时长
|
|
|
+ startSignTime(result.second); // 开启计时 签入时长
|
|
|
isCallHold.value = result.isCallHold;
|
|
|
isRest.value = result.isRest;
|
|
|
isAcw.value = result.isCallEndArrange; // 是否话后整理中
|
|
@@ -2126,62 +2184,57 @@ onBeforeUnmount(() => {
|
|
|
display: flex;
|
|
|
flex: 1;
|
|
|
background-color: var(--el-color-white) !important;
|
|
|
- box-shadow: 0 1px 8px 0 rgba(0, 15, 49, 0.1);
|
|
|
- border-bottom-left-radius: 90px;
|
|
|
- border-bottom-right-radius: 90px;
|
|
|
- padding: 0 18px 0 40px;
|
|
|
color: var(--hotline-color-text-main);
|
|
|
height: 100%;
|
|
|
- .duty-on-time {
|
|
|
- width: 100px;
|
|
|
- margin-left: 10px;
|
|
|
- &-label {
|
|
|
- display: block;
|
|
|
- margin-top: 13px;
|
|
|
- }
|
|
|
- &-time {
|
|
|
- display: block;
|
|
|
- margin-top: 15px;
|
|
|
- }
|
|
|
- }
|
|
|
- .infos {
|
|
|
+ align-items: center;
|
|
|
+ .status-box {
|
|
|
+ width: 240px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ background: var(--el-color-info-light-7);
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ cursor: pointer;
|
|
|
text-align: left;
|
|
|
- width: 150px;
|
|
|
-
|
|
|
- .dutyOn_status {
|
|
|
- color: var(--el-color-primary);
|
|
|
- font-weight: normal;
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 4px 26px 4px 12px;
|
|
|
+ gap: 6px;
|
|
|
+ min-height: 32px;
|
|
|
+ line-height: 24px;
|
|
|
+ border-radius: var(--el-border-radius-round);
|
|
|
+ background-color: var(--el-color-info-light-8);
|
|
|
+ transition: var(--el-transition-duration);
|
|
|
+ margin-right: 10px;
|
|
|
+ .arrow {
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ transition: transform var(--el-transition-duration);
|
|
|
}
|
|
|
- span {
|
|
|
- display: inline-block;
|
|
|
- width: 80px;
|
|
|
- text-align: right;
|
|
|
+ .is-reverse {
|
|
|
+ transform: rotate(180deg);
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
// 按钮列表
|
|
|
.btn-container {
|
|
|
display: flex;
|
|
|
- width: calc(100% - 120px);
|
|
|
justify-content: space-between;
|
|
|
-
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-right: 1px solid var(--el-border-color);
|
|
|
+ border-left: 1px solid var(--el-border-color);
|
|
|
.item {
|
|
|
text-align: center;
|
|
|
cursor: pointer;
|
|
|
width: 100%;
|
|
|
user-select: none;
|
|
|
- height: calc(100% + 20px);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ //border-right: 1px solid var(--el-border-color);
|
|
|
img {
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- padding-top: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- span {
|
|
|
- margin-top: 5px;
|
|
|
- display: inline-block;
|
|
|
+ scale: 0.6;
|
|
|
}
|
|
|
-
|
|
|
&.disabled {
|
|
|
cursor: not-allowed;
|
|
|
overflow: hidden;
|
|
@@ -2191,24 +2244,18 @@ onBeforeUnmount(() => {
|
|
|
.active {
|
|
|
&:hover {
|
|
|
color: var(--hotline-color-white);
|
|
|
- background-image: url('@/assets/images/phoneControls/active.png');
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
+ background-color: var(--el-color-primary-light-3);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.wait-box {
|
|
|
- width: 120px;
|
|
|
+ width: 170px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
- .today-wait {
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
- .today-wait-num,
|
|
|
- .current-wait-time {
|
|
|
- font-size: var(--el-font-size-medium);
|
|
|
- }
|
|
|
+ text-align: center;
|
|
|
+ border-right: 1px solid var(--el-border-color);
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
}
|
|
|
</style>
|