|
@@ -1,2235 +0,0 @@
|
|
|
-<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>
|
|
|
- <!-- 按钮列表 -->
|
|
|
- <div class="btn-container">
|
|
|
- <!-- 签入 -->
|
|
|
- <template v-if="telStatusInfo.isDutyOn">
|
|
|
- <!-- 签出可用 -->
|
|
|
- <div
|
|
|
- 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="" />
|
|
|
- <span>签出</span>
|
|
|
- </div>
|
|
|
- <!-- 签出不可用 -->
|
|
|
- <div class="item disabled" v-else title="签出">
|
|
|
- <img :src="getImageUrl('phoneControls/dutyOff_grey.png')" alt="" />
|
|
|
- <span>签出</span>
|
|
|
- </div>
|
|
|
- </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')"
|
|
|
- >
|
|
|
- <img :src="state.dutyOnSrc" alt="" />
|
|
|
- <span>签入</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
-
|
|
|
- <!-- 外呼模式和取消外呼模式 可用 -->
|
|
|
- <template v-if="telStatusInfo.isDutyOn && activeArr.includes('callOut')">
|
|
|
- <div
|
|
|
- class="item active"
|
|
|
- :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>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <!-- 灰色外呼不可用 -->
|
|
|
- <template v-else>
|
|
|
- <div class="item disabled" title="外呼模式">
|
|
|
- <img :src="getImageUrl('phoneControls/callOut_grey.png')" alt="" />
|
|
|
- <span>外呼模式</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
-
|
|
|
- <!-- 可用挂断 -->
|
|
|
- <template v-if="telStatusInfo.isDutyOn && activeArr.includes('hangup')">
|
|
|
- <div
|
|
|
- class="item active"
|
|
|
- :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>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <!-- 灰色挂断 不可用 -->
|
|
|
- <template v-else>
|
|
|
- <div class="item disabled" title="挂断">
|
|
|
- <img :src="getImageUrl('phoneControls/hangup_grey.png')" alt="" />
|
|
|
- <span>挂断</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
-
|
|
|
- <!-- 小休和结束休息 可用 -->
|
|
|
- <template v-if="telStatusInfo.isDutyOn && activeArr.includes('rest')">
|
|
|
- <div
|
|
|
- class="item active"
|
|
|
- @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
|
|
|
- >结束<span v-if="restReason">({{ restReason }})</span></span
|
|
|
- >
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="item active"
|
|
|
- @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>
|
|
|
- </div>
|
|
|
- <div class="item disabled" title="审批中" v-else-if="telStatusInfo.isRest === 'InReview'">
|
|
|
- <img :src="getImageUrl('phoneControls/rest_grey.png')" alt="" />
|
|
|
- <span>审批中</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <!-- 灰色小休不可用 -->
|
|
|
- <template v-else>
|
|
|
- <div class="item disabled" title="小休">
|
|
|
- <img :src="getImageUrl('phoneControls/rest_grey.png')" alt="" />
|
|
|
- <span>小休</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
-
|
|
|
- <!-- 保持和取消保持 可用 -->
|
|
|
- <template v-if="telStatusInfo.isDutyOn && activeArr.includes('hold')">
|
|
|
- <div
|
|
|
- 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>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <!-- 灰色保持不可用 -->
|
|
|
- <template v-else>
|
|
|
- <div class="item disabled" title="保持">
|
|
|
- <img :src="getImageUrl('phoneControls/hold_grey.png')" alt="" />
|
|
|
- <span>保持</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
-
|
|
|
- <!-- 静音和取消静音 可用 -->
|
|
|
- <template v-if="telStatusInfo.isDutyOn && activeArr.includes('mute')">
|
|
|
- <div
|
|
|
- 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>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <!-- 灰色静音不可用 -->
|
|
|
- <template v-else>
|
|
|
- <div class="item disabled" title="静音">
|
|
|
- <img :src="getImageUrl('phoneControls/mute_grey.png')" alt="" />
|
|
|
- <span>静音</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
-
|
|
|
- <!-- 话后整理和取消话后整理中 可用-->
|
|
|
- <template v-if="telStatusInfo.isDutyOn && activeArr.includes('TalkingDeal')">
|
|
|
- <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')"
|
|
|
- >
|
|
|
- <img :src="state.talkingDealSrc" alt="" />
|
|
|
- <span>{{ telStatusInfo.isTalkingDeal ? '取消话后整理' : '话后整理' }}</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <!-- 话后整理中不可用 -->
|
|
|
- <template v-else>
|
|
|
- <div class="item disabled" title="话后整理">
|
|
|
- <img :src="getImageUrl('phoneControls/talkingDeal_grey.png')" alt="" />
|
|
|
- <span>话后整理</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
-
|
|
|
- <!-- 转接 可用 -->
|
|
|
- <template v-if="telStatusInfo.isDutyOn && activeArr.includes('transfer')">
|
|
|
- <div
|
|
|
- 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>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <!-- 转接不可用 -->
|
|
|
- <template v-else>
|
|
|
- <div class="item disabled" title="保持">
|
|
|
- <img :src="getImageUrl('phoneControls/transfer_grey.png')" alt="" />
|
|
|
- <span>转接</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
-
|
|
|
-<!-- <!– 三方会议 可用(当前处于通话中)–>
|
|
|
- <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="" />
|
|
|
- <span>三方会议</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <!– 三方会议并且处于三方会议中 –>
|
|
|
- <template v-else-if="telStatusInfo.isDutyOn && activeArr.includes('conference') && onCallArr.length === 1">
|
|
|
- <el-popover :width="130 * onCallArr.length" :offset="0" v-model:visible="threeWayVisible" trigger="hover" popper-class="hangup-popover">
|
|
|
- <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>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <div class="hangup-container">
|
|
|
- <div class="hangup-item" v-for="(item, index) in onCallArr" :key="index">
|
|
|
- <p class="hangup-item-phoneNumber">{{ item.telNo }}</p>
|
|
|
- <el-button size="small" @click="kickOut(item)" class="default-button">踢出</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-popover>
|
|
|
- </template>
|
|
|
- <!– 三方会议 不可用 –>
|
|
|
- <template v-else>
|
|
|
- <div class="item disabled" title="三方会议">
|
|
|
- <img :src="getImageUrl('phoneControls/conference_grey.png')" alt="" />
|
|
|
- <span>三方会议</span>
|
|
|
- </div>
|
|
|
- </template>-->
|
|
|
-
|
|
|
- <!-- 呼叫 可用-->
|
|
|
- <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="" />
|
|
|
- <span>呼叫</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <!-- 呼叫 不可用 -->
|
|
|
- <template v-else>
|
|
|
- <div class="item disabled" title="呼叫">
|
|
|
- <img :src="getImageUrl('phoneControls/outbound_grey.png')" alt="" />
|
|
|
- <span>呼叫</span>
|
|
|
- </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">
|
|
|
- <span class="today-wait-label">今日等待:</span
|
|
|
- ><el-text class="today-wait-num ml5" tag="b" type="danger">{{ todayWaitValue.toFixed(0) }}</el-text>
|
|
|
- </div>
|
|
|
- <div class="current-wait">
|
|
|
- <span class="current-wait-label">当前等待:</span
|
|
|
- ><el-text class="current-wait-time ml5" tag="b" type="danger">{{ currentWaitValue.toFixed(0) }}</el-text>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 占位标签 -->
|
|
|
- <div class="seizeSeat-box"></div>
|
|
|
- <!-- 功能 -->
|
|
|
- <!-- 签入弹窗 -->
|
|
|
- <el-dialog v-model="state.dutyDialogVisible" draggable title="签入" width="500px" :show-close="false">
|
|
|
- <el-form :model="state.dutyForm" label-width="80px" ref="dutyFormRef">
|
|
|
- <el-form-item
|
|
|
- label="分机"
|
|
|
- prop="telNo"
|
|
|
- :rules="[{ required: true, message: '请选择需要签入的分机', trigger: 'change' }]"
|
|
|
- v-if="AppConfigInfo.isNeedTelNo"
|
|
|
- >
|
|
|
- <el-select-v2
|
|
|
- v-model="state.dutyForm.telNo"
|
|
|
- :options="state.telsList"
|
|
|
- :props="{
|
|
|
- label: 'telNo',
|
|
|
- value: 'telNo',
|
|
|
- }"
|
|
|
- placeholder="选择要签入的分机"
|
|
|
- filterable
|
|
|
- class="w100"
|
|
|
- :height="500"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <!-- 是否需要填写分机密码 -->
|
|
|
- <el-form-item
|
|
|
- label="分机密码"
|
|
|
- prop="password"
|
|
|
- :rules="[{ required: true, message: '请填写分机密码', trigger: 'blur' }]"
|
|
|
- v-if="AppConfigInfo.isTelNeedVerify"
|
|
|
- >
|
|
|
- <el-input v-model="state.dutyForm.password" placeholder="请填写分机密码" />
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <template #footer>
|
|
|
- <span class="dialog-footer">
|
|
|
- <el-button @click="state.dutyDialogVisible = false" class="default-button" :loading="state.loading">取 消</el-button>
|
|
|
- <el-button type="primary" @click="clickOnDuty(dutyFormRef)" :loading="state.loading">确 定</el-button>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
-
|
|
|
- <!-- 小休弹窗 -->
|
|
|
- <el-dialog
|
|
|
- v-model="state.restDialogVisible"
|
|
|
- ref="dialogRestRef"
|
|
|
- draggable
|
|
|
- title="小休申请"
|
|
|
- :width="AppConfigInfo.isRestApproval ? '60%' : '500px'"
|
|
|
- @mouseup="mouseup"
|
|
|
- :style="'transform: ' + state.transform + ';'"
|
|
|
- @close="restFormOpened"
|
|
|
- >
|
|
|
- <!-- 需要审核 -->
|
|
|
- <template v-if="AppConfigInfo.isRestApproval">
|
|
|
- <el-form :model="state.restForm" label-width="100px" ref="restFormRef">
|
|
|
- <el-row :gutter="10">
|
|
|
- <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
|
|
|
- <el-form-item label="小休" prop="reason" :rules="[{ required: true, message: '请选择小休原因', trigger: 'change' }]">
|
|
|
- <el-select v-model="state.restForm.reason" placeholder="请选择小休原因" class="w100" clearable>
|
|
|
- <el-option v-for="item in state.restReasonOptions" :key="item.dicDataValue" :label="item.dicDataName" :value="item.dicDataValue" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
|
|
|
- <el-form-item label="下一环节" prop="nextStepCode" :rules="[{ required: true, message: '请选择下一环节', trigger: 'change' }]">
|
|
|
- <el-select v-model="state.restForm.nextStepCode" placeholder="请选择下一环节" class="w100" @change="selectNextStep">
|
|
|
- <el-option v-for="item in state.nextStepOptions" :key="item.key" :label="item.value" :value="item.key" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
|
|
|
- <el-form-item label="处理人" prop="nextHandlers" :rules="[{ required: false, message: '请选择处理人', trigger: 'change' }]">
|
|
|
- <el-select
|
|
|
- v-model="state.restForm.nextHandlers"
|
|
|
- multiple
|
|
|
- filterable
|
|
|
- placeholder="请选择处理人"
|
|
|
- class="w100"
|
|
|
- @change="selectHandlers"
|
|
|
- value-key="key"
|
|
|
- >
|
|
|
- <el-option v-for="item in state.handlerOptions" :key="item.key" :label="item.value" :value="item" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" v-if="state.restForm.nextHandlers.length > 1">
|
|
|
- <el-form-item
|
|
|
- label="主办"
|
|
|
- prop="nextMainHandler"
|
|
|
- multiple
|
|
|
- filterable
|
|
|
- :rules="[{ required: false, message: '请选择主办', trigger: 'change' }]"
|
|
|
- >
|
|
|
- <el-select v-model="state.restForm.nextMainHandler" placeholder="请选择主办" class="w100">
|
|
|
- <el-option v-for="item in state.handlerMainOptions" :key="item.key" :label="item.value" :value="item.key" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
|
|
|
- <el-form-item label="" prop="acceptSms">
|
|
|
- <el-checkbox v-model="state.restForm.acceptSms" label="短信通知" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
|
|
|
- <el-form-item
|
|
|
- label="是否发起会签"
|
|
|
- prop="isStartCountersign"
|
|
|
- :rules="[{ required: false, message: '请选择是否发起会签', trigger: 'change' }]"
|
|
|
- >
|
|
|
- <el-switch v-model="state.restForm.isStartCountersign" inline-prompt active-text="是" inactive-text="否" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
- <el-form-item label="办理意见" prop="opinion" :rules="[{ required: true, message: '请填写小休办理意见', trigger: 'blur' }]">
|
|
|
- <common-advice
|
|
|
- @chooseAdvice="chooseAdvice"
|
|
|
- v-model="state.restForm.opinion"
|
|
|
- placeholder="请填写小休办理意见"
|
|
|
- :loading="state.loading"
|
|
|
- :commonEnum="commonEnum.RestReason"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
- <el-form-item label="附件" prop="remark" :rules="[{ required: false, message: '请填写诉求内容', trigger: 'change' }]">
|
|
|
- <annex-list name="小休附件" businessId="" classify="小休上传" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form>
|
|
|
- </template>
|
|
|
- <!-- 不需要审核 -->
|
|
|
- <template v-else>
|
|
|
- <el-form :model="state.restForm" label-width="90px" ref="restFormRef">
|
|
|
- <el-row :gutter="10">
|
|
|
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
- <el-form-item label="小休" prop="reason" :rules="[{ required: true, message: '请选择小休原因', trigger: 'change' }]">
|
|
|
- <el-select v-model="state.restForm.reason" placeholder="请选择小休原因" class="w100" clearable>
|
|
|
- <el-option v-for="item in state.restReasonOptions" :key="item.dicDataValue" :label="item.dicDataName" :value="item.dicDataValue" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form>
|
|
|
- </template>
|
|
|
-
|
|
|
- <template #footer>
|
|
|
- <span class="dialog-footer">
|
|
|
- <el-button @click="state.restDialogVisible = false" class="default-button" :loading="state.loading">取 消</el-button>
|
|
|
- <el-button type="primary" @click="clickOnRest(restFormRef)" :loading="state.loading">提 交</el-button>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
-
|
|
|
- <!-- 转接弹窗 -->
|
|
|
- <el-dialog v-model="state.transferDialogVisible" draggable title="转接" width="500px">
|
|
|
- <el-form :model="state.transferForm" label-width="100px" ref="transferFormRef">
|
|
|
- <el-form-item label="转接号码" prop="telNo" :rules="[{ required: true, message: '请选择转接分机或填写外部电话', trigger: 'blur' }]">
|
|
|
- <el-select-v2
|
|
|
- v-model="state.transferForm.telNo"
|
|
|
- :options="state.threeWayAndTransfer"
|
|
|
- placeholder="请选择转接分机或填写外部电话"
|
|
|
- filterable
|
|
|
- class="w100"
|
|
|
- allow-create
|
|
|
- default-first-option
|
|
|
- :props="{
|
|
|
- label: 'dicDataName',
|
|
|
- value: 'dicDataValue',
|
|
|
- }"
|
|
|
- :height="650"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <template #footer>
|
|
|
- <span class="dialog-footer">
|
|
|
- <el-button @click="state.transferDialogVisible = false" class="default-button" :loading="state.loading">取 消</el-button>
|
|
|
- <el-button type="primary" @click="clickOnTransfer(transferFormRef)" :loading="state.loading">确 定</el-button>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
-
|
|
|
- <!-- 呼叫弹窗 -->
|
|
|
- <el-dialog v-model="state.outboundDialogVisible" draggable title="呼叫" width="450px">
|
|
|
- <el-form :model="state.outboundForm" label-width="80px" ref="outboundFormRef">
|
|
|
- <el-form-item label="呼叫号码" prop="telNo" :rules="[{ required: true, message: '请选择或填写呼叫号码', trigger: 'blur' }]">
|
|
|
- <el-select-v2
|
|
|
- v-model="state.outboundForm.telNo"
|
|
|
- :options="state.telsList"
|
|
|
- placeholder="请选择或填写呼叫号码"
|
|
|
- filterable
|
|
|
- class="w100"
|
|
|
- allow-create
|
|
|
- default-first-option
|
|
|
- :props="{
|
|
|
- label: 'telNo',
|
|
|
- value: 'telNo',
|
|
|
- }"
|
|
|
- :height="500"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <template #footer>
|
|
|
- <span class="dialog-footer">
|
|
|
- <el-button @click="state.outboundDialogVisible = false" class="default-button" :loading="state.loading">取 消</el-button>
|
|
|
- <el-button type="primary" @click="clickOnOutbound(outboundFormRef)" :loading="state.loading">确 定</el-button>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
-
|
|
|
- <!-- 三方通话弹窗 -->
|
|
|
- <el-dialog v-model="state.threeWayDialogVisible" draggable title="三方会议" width="450px">
|
|
|
- <el-form :model="state.threeWayForm" label-width="120px" ref="threeWayFormRef">
|
|
|
- <el-form-item label="三方通话号码" prop="telNo" :rules="[{ required: true, message: '请选择或填写三方通话号码', trigger: 'blur' }]">
|
|
|
- <el-select-v2
|
|
|
- v-model="state.threeWayForm.telNo"
|
|
|
- :options="state.threeWayAndTransfer"
|
|
|
- placeholder="请选择或填写三方通话号码"
|
|
|
- filterable
|
|
|
- class="w100"
|
|
|
- allow-create
|
|
|
- default-first-option
|
|
|
- :props="{
|
|
|
- label: 'dicDataName',
|
|
|
- value: 'dicDataValue',
|
|
|
- }"
|
|
|
- :height="650"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <template #footer>
|
|
|
- <span class="dialog-footer">
|
|
|
- <el-button @click="state.threeWayDialogVisible = false" class="default-button" :loading="state.loading">取 消</el-button>
|
|
|
- <el-button type="primary" @click="clickOnThreeWay(threeWayFormRef)" :loading="state.loading">确 定</el-button>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup lang="ts" name="telControl">
|
|
|
-import { reactive, ref, computed, defineAsyncComponent, onMounted, onBeforeUnmount, watch } from 'vue';
|
|
|
-import { ElMessageBox, ElNotification, ElMessage, FormInstance } from 'element-plus';
|
|
|
-import { storeToRefs } from 'pinia';
|
|
|
-import { useTelStatus, TelStates, RestStates } from '@/stores/telStatus';
|
|
|
-import { useUserInfo } from '@/stores/userInfo';
|
|
|
-import { useAppConfig } from '@/stores/appConfig';
|
|
|
-import { getImageUrl } from '@/utils/tools';
|
|
|
-import { formatDuration } from '@/utils/formatTime';
|
|
|
-import { commonEnum, getNowDateTime } from '@/utils/constants';
|
|
|
-import other from '@/utils/other';
|
|
|
-import { workflowStepOptions } from '@/api/system/workflow';
|
|
|
-import {
|
|
|
- restFlowStart,
|
|
|
- restFlowDel,
|
|
|
- restFlowStartWex,
|
|
|
- getTelList,
|
|
|
- telRestBaseData,
|
|
|
- dutyOff,
|
|
|
- dutyOn,
|
|
|
- busyOff,
|
|
|
- busyOn,
|
|
|
- queryBlacklist,
|
|
|
- getTelStatus,
|
|
|
- switchMode,
|
|
|
- startAfterCall,
|
|
|
- endAfterCall,
|
|
|
- getTodayWaitNum,
|
|
|
-} from '@/api/public/wex';
|
|
|
-import signalR from '@/utils/signalR';
|
|
|
-import { Local } from '@/utils/storage';
|
|
|
-import { useRouter } from 'vue-router';
|
|
|
-import mittBus from '@/utils/mitt';
|
|
|
-import { voiceAssistant } from '@/api/todo/voiceAssistant';
|
|
|
-import { submitLog } from '@/api/public/log';
|
|
|
-import { getDataByCode } from '@/api/system/dict';
|
|
|
-import { useTransition, useDocumentVisibility } from '@vueuse/core';
|
|
|
-import { useWebSocket } from '@/hooks/useWebsocket';
|
|
|
-import { olaFn, olaWs } from '@/utils/olaFn';
|
|
|
-// 引入组件
|
|
|
-const CommonAdvice = defineAsyncComponent(() => import('@/components/CommonAdvice/index.vue')); // 常用意见
|
|
|
-const AnnexList = defineAsyncComponent(() => import('@/components/AnnexList/index.vue'));
|
|
|
-
|
|
|
-const state = reactive<any>({
|
|
|
- active: <EmptyArrayType>[], // 当前选中
|
|
|
- currentStatus: '', //当前通话状态
|
|
|
- dutyDialogVisible: false, //签入选分机弹窗
|
|
|
- dutyForm: {
|
|
|
- //签入选分机表单
|
|
|
- telNo: null, //分机号
|
|
|
- },
|
|
|
- telsList: <EmptyArrayType>[], // 分机列表
|
|
|
- threeWayAndTransfer: <EmptyArrayType>[], // 三方通话和转接
|
|
|
- loading: false,
|
|
|
- showHangupList: false, //是否展示挂断列表
|
|
|
- restDialogVisible: false, //小休弹窗
|
|
|
- restForm: {
|
|
|
- //小休表单
|
|
|
- opinion: '', //小休原因
|
|
|
- nextStepCode: '', //下一步
|
|
|
- nextHandlers: [], //下一步处理人
|
|
|
- acceptSms: false, //是否接收短信
|
|
|
- nextMainHandler: '', //下一步主办人
|
|
|
- reason: '', //小休原因
|
|
|
- expiredTime: '', //期满时间
|
|
|
- isStartCountersign: false, //是否发起会签
|
|
|
- },
|
|
|
- handlerMainOptions: [], // 主办
|
|
|
- transferDialogVisible: false, // 转接弹窗
|
|
|
- transferForm: {
|
|
|
- //转接表单
|
|
|
- telNo: null,
|
|
|
- },
|
|
|
- outboundDialogVisible: false, //外呼弹窗
|
|
|
- outboundForm: {
|
|
|
- // 外呼表单
|
|
|
- telNo: null, //外呼号码
|
|
|
- },
|
|
|
- dutyOnSrc: getImageUrl('phoneControls/dutyOn_blue.png'), //签入图片
|
|
|
- dutyOffSrc: getImageUrl('phoneControls/dutyOff_blue.png'), //签出图片
|
|
|
- hangupSrc: getImageUrl('phoneControls/hangup_blue.png'), //挂断图片
|
|
|
- restSrc: getImageUrl('phoneControls/rest_blue.png'), //小休图片
|
|
|
- holdSrc: getImageUrl('phoneControls/hold_blue.png'), //保持图片
|
|
|
- muteSrc: getImageUrl('phoneControls/mute_blue.png'), // 静音图片
|
|
|
- talkingDealSrc: getImageUrl('phoneControls/talkingDeal_blue.png'), //话后整理图片
|
|
|
- transferSrc: getImageUrl('phoneControls/transfer_blue.png'), //转接图片
|
|
|
- conferenceSrc: getImageUrl('phoneControls/conference_blue.png'), //三方会议图片
|
|
|
- outboundSrc: getImageUrl('phoneControls/outbound_blue.png'), //外呼图片
|
|
|
- callOutSrc: getImageUrl('phoneControls/callOut_blue.png'), // 外呼模式图片
|
|
|
- restReasonOptions: [], // 小休原因
|
|
|
- nextStepOptions: [], // 下一个环节
|
|
|
- handlerOptions: [], // 处理人
|
|
|
- handleId: '', // 流程处理ID
|
|
|
- transform: 'translate(0px, 0px)',
|
|
|
- fileList: [], // 文件上传列表
|
|
|
- threeWayDialogVisible: false, // 三方会议弹窗
|
|
|
- threeWayForm: {
|
|
|
- // 三方会议表单
|
|
|
- telNo: null, // 三方会议号码
|
|
|
- },
|
|
|
- whiteList: [], // 白名单
|
|
|
-});
|
|
|
-
|
|
|
-const useTelStatusStore = useTelStatus();
|
|
|
-const { telStatusInfo } = storeToRefs(useTelStatusStore); // 电话状态
|
|
|
-const appConfigStore = useAppConfig();
|
|
|
-const { AppConfigInfo } = storeToRefs(appConfigStore); // 系统配置信息
|
|
|
-const storesUserInfo = useUserInfo();
|
|
|
-const { userInfos } = storeToRefs(storesUserInfo); // 用户信息
|
|
|
-
|
|
|
-const talkTime = ref<any>(0); // 通话时长
|
|
|
-const talkTimer = ref<any>(null); // 通话时长定时器
|
|
|
-// 开始通话计时
|
|
|
-const startTime = () => {
|
|
|
- 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);
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-// 结束通话计时
|
|
|
-const removeTimer = () => {
|
|
|
- talkTime.value = 0;
|
|
|
- Local.remove('talkTime');
|
|
|
- clearInterval(talkTimer.value);
|
|
|
-};
|
|
|
-// 开始签入时长
|
|
|
-const onDutyTime = ref<any>(0); // 签入时长
|
|
|
-const onDutyTimer = ref<any>(null); // 签入时长定时器
|
|
|
-const startDutyTimer = (second: any) => {
|
|
|
- if (second) {
|
|
|
- // 从后台获取签入时长
|
|
|
- if (second < 0) second = 0; // 防止后台返回的签入时间大于当前时间
|
|
|
- onDutyTime.value = second;
|
|
|
- onDutyTimer.value = setInterval(() => {
|
|
|
- onDutyTime.value++;
|
|
|
- }, 1000);
|
|
|
- } else {
|
|
|
- onDutyTimer.value = setInterval(() => {
|
|
|
- onDutyTime.value++;
|
|
|
- }, 1000);
|
|
|
- }
|
|
|
-};
|
|
|
-// 结束签入时长
|
|
|
-const removeTimerOnDuty = () => {
|
|
|
- onDutyTime.value = 0;
|
|
|
- clearInterval(onDutyTimer.value);
|
|
|
-};
|
|
|
-// 监听消息
|
|
|
-const signalRStart = async () => {
|
|
|
- signalR?.SR?.on('RestApplyPass', (data) => {
|
|
|
- // 小休审批通过消息
|
|
|
- console.log(data, '小休审批通过消息', getNowDateTime());
|
|
|
- RestApplyPassFn(data);
|
|
|
- });
|
|
|
-};
|
|
|
-// 检查用户状态
|
|
|
-// 设置当前可用的按钮
|
|
|
-const activeArr = computed(() => {
|
|
|
- const switchCases: any = {
|
|
|
- dutyOff: ['dutyOn'], // 签出状态
|
|
|
- dutyOn: ['dutyOff', 'callOut', 'rest', 'outbound'], // 已签入无通话状态
|
|
|
- onCallOut: ['dutyOff', 'callOut', 'outbound'], // 外呼模式中
|
|
|
- rest: ['rest'], // 小休中状态
|
|
|
- ring: ['hangup'], //振铃中
|
|
|
- onCall: ['hangup', 'hold', 'transfer', 'conference', 'mute'], // 单个通话中
|
|
|
- onMute: ['hangup', 'transfer', 'mute'], // 静音中
|
|
|
- onHold: ['hangup', 'hold', 'transfer'], // 保持中
|
|
|
- onTalkingDeal: ['dutyOff', 'rest', 'TalkingDeal'], // 话后整理中
|
|
|
- onConference: ['hangup'], // 三方会议中 只能挂断
|
|
|
- onThreeWay: ['hangup', 'conference'], // 三方会议呼出中 只能挂断和踢人
|
|
|
- };
|
|
|
- let arr = <EmptyArrayType>[];
|
|
|
- if (telStatusInfo.value.phoneControlState in switchCases) {
|
|
|
- arr = switchCases[telStatusInfo.value.phoneControlState];
|
|
|
- }
|
|
|
- return arr;
|
|
|
-});
|
|
|
-// 设置当前状态的值
|
|
|
-const currentStatusText = computed(() => {
|
|
|
- const statusMap: any = {
|
|
|
- dutyOff: '签出',
|
|
|
- dutyOn: '空闲',
|
|
|
- onCallOut: '外呼中',
|
|
|
- rest: '小休中',
|
|
|
- ring: '振铃中',
|
|
|
- onHold: '保持中',
|
|
|
- onMute: '静音中',
|
|
|
- onCall: '通话中',
|
|
|
- onTalkingDeal: '整理中',
|
|
|
- onConference: '会议中',
|
|
|
- onThreeWay: '会议中',
|
|
|
- };
|
|
|
- return statusMap[telStatusInfo.value.phoneControlState] || '';
|
|
|
-});
|
|
|
-// 小休审批通过消息
|
|
|
-const RestApplyPassFn = (data: any) => {
|
|
|
- ElNotification({
|
|
|
- title: '成功',
|
|
|
- message: '小休审批通过,开始小休',
|
|
|
- type: 'success',
|
|
|
- });
|
|
|
- //不需要审核直接开始小休
|
|
|
- olaRef.value.go_break(state.restForm.reason); //设置忙碌
|
|
|
-
|
|
|
- console.log('调用示忙审核', data, getNowDateTime());
|
|
|
-};
|
|
|
-// 查询所有分机
|
|
|
-const getTelsLists = async () => {
|
|
|
- try {
|
|
|
- const { result } = await getTelList();
|
|
|
- state.telsList = result ?? [];
|
|
|
- // state.telsList = [...result,...result,...result,...result,...result,...result,...result,...result,...result,...result,...result,...result,...result,...result,...result,...result,...result,...result,];
|
|
|
- return state.telsList;
|
|
|
- } catch (err) {
|
|
|
- console.log(err, getNowDateTime());
|
|
|
- }
|
|
|
-};
|
|
|
-// 查询三方会议和转接的号码
|
|
|
-const getThreeWayAndTransfer = async () => {
|
|
|
- try {
|
|
|
- const { result } = await getDataByCode('TransferNumber');
|
|
|
- state.threeWayAndTransfer = result ?? [];
|
|
|
- } catch (err) {
|
|
|
- console.log(err, getNowDateTime());
|
|
|
- }
|
|
|
-};
|
|
|
-// 鼠标移入移出改变图标
|
|
|
-const onHover = (val: string, path: string) => {
|
|
|
- state[val] = getImageUrl(path);
|
|
|
-};
|
|
|
-// 点击事件
|
|
|
-const onControlClick = (val: string) => {
|
|
|
- switch (val) {
|
|
|
- case 'dutyOn': //签入
|
|
|
- onDutyFn();
|
|
|
- break;
|
|
|
- case 'dutyOff': //签出
|
|
|
- offDutyFn();
|
|
|
- break;
|
|
|
- case 'unCallOut': //取消外呼模式
|
|
|
- onUnCallOut();
|
|
|
- break;
|
|
|
- case 'callOut': //外呼模式
|
|
|
- onCallOut();
|
|
|
- break;
|
|
|
- case 'hangup': //挂断
|
|
|
- onHangup();
|
|
|
- break;
|
|
|
- case 'rest': //小休
|
|
|
- onRest();
|
|
|
- break;
|
|
|
- case 'restEnd': //结束小休
|
|
|
- onRestEnd();
|
|
|
- break;
|
|
|
- case 'hold': //保持
|
|
|
- onHold();
|
|
|
- break;
|
|
|
- case 'unHold': //取消保持
|
|
|
- onUnHold();
|
|
|
- break;
|
|
|
- case 'mute': //保持
|
|
|
- onMute();
|
|
|
- break;
|
|
|
- case 'unMute': //取消保持
|
|
|
- onUnMute();
|
|
|
- break;
|
|
|
- case 'unTalkingDeal': // 取消话后整理
|
|
|
- unTalkingDeal();
|
|
|
- break;
|
|
|
- case 'transfer': //转接
|
|
|
- onTransfer();
|
|
|
- break;
|
|
|
- case 'conference': //三方会议
|
|
|
- onConference();
|
|
|
- break;
|
|
|
- case 'outbound': //外呼
|
|
|
- onOutbound();
|
|
|
- break;
|
|
|
- default:
|
|
|
- break;
|
|
|
- }
|
|
|
-};
|
|
|
-// 链接呼叫中心
|
|
|
-const olaRef = ref();
|
|
|
-const websocket_connect = () => {
|
|
|
- olaRef.value = olaFn(import.meta.env.VITE_CALLCENTER_SOCKET_URL, {
|
|
|
- username: currentTel.value.telNo,
|
|
|
- password: currentTel.value.password,
|
|
|
- onConnected: onConnected, // 连接成功
|
|
|
- onDisconnected: onDisconnected, // 断开链接
|
|
|
- onMessage: onMessage, // 接收消息
|
|
|
- onError: onError, // 错误
|
|
|
- autoReconnect: {
|
|
|
- delay: 2000,
|
|
|
- }, // 自动重连
|
|
|
- heartbeat: {
|
|
|
- message: JSON.stringify({ cmd: 'ping' }),
|
|
|
- interval: 5000,
|
|
|
- // pongTimeout: 1000,
|
|
|
- },
|
|
|
- });
|
|
|
- console.log('链接呼叫中心', getNowDateTime());
|
|
|
-};
|
|
|
-// 呼叫中心链接成功
|
|
|
-const onConnected = () => {
|
|
|
- Local.set('currentTel', currentTel.value.telNo);
|
|
|
- olaRef.value.logout(currentTel.value.telNo); //连接之后,先登出一次,防止其他地方已经登陆
|
|
|
- let array_ola_queue: EmptyArrayType = []; // 队列
|
|
|
- if (currentTel.value.telModel === 2) {
|
|
|
- // 外呼模式
|
|
|
- let array = currentTel.value.queueCallOut.split(',');
|
|
|
- for (let i = 0; i < array.length; i++) {
|
|
|
- array_ola_queue[i] = array[i];
|
|
|
- }
|
|
|
- } else {
|
|
|
- // 普通模式
|
|
|
- let array = currentTel.value.queue.split(',');
|
|
|
- for (let i = 0; i < array.length; i++) {
|
|
|
- array_ola_queue[i] = array[i];
|
|
|
- }
|
|
|
- }
|
|
|
- olaRef.value.login(array_ola_queue, currentTel.value.telNo, { type: 'onhook' });
|
|
|
- olaWs.value = olaRef.value;
|
|
|
- if (currentTel.value.telModel != 2) {
|
|
|
- // 普通模式才链接语音助手
|
|
|
- connectVoiceAssistant(currentTel.value.telNo); // 坐席助手开启
|
|
|
- }
|
|
|
- const name: string = `天润分机号:${currentTel.value.telNo}的websocket链接成功`;
|
|
|
- const remark: string = `天润websocket 链接成功:分机模式:${currentTel.value.telModel}`;
|
|
|
- const request = {
|
|
|
- creationTime: new Date(),
|
|
|
- name,
|
|
|
- remark,
|
|
|
- executeUrl: import.meta.env.VITE_CALLCENTER_SOCKET_URL,
|
|
|
- };
|
|
|
- submitLogFn(request);
|
|
|
-};
|
|
|
-// 呼叫中心链接关闭
|
|
|
-const onDisconnected = (event: any) => {
|
|
|
- console.log('呼叫中心断开链接:', event);
|
|
|
- olaWs.value = null;
|
|
|
- resetState();
|
|
|
- const currentTel = Local.get('currentTel');
|
|
|
- const name: string = `天润分机号:${currentTel}的websocket断开链接`;
|
|
|
- const remark: string = `天润websocket 断开: 错误code:${event.code}, 错误原因:${event.reason}, 是否正常断开:${event.wasClean}`;
|
|
|
- const request = {
|
|
|
- creationTime: new Date(),
|
|
|
- name,
|
|
|
- remark,
|
|
|
- executeUrl: import.meta.env.VITE_CALLCENTER_SOCKET_URL,
|
|
|
- };
|
|
|
- submitLogFn(request);
|
|
|
-};
|
|
|
-// 呼叫中心消息
|
|
|
-const onMessage = async (event: any) => {
|
|
|
- const data = JSON.parse(event);
|
|
|
- if (data.event_type == 'agent_state') {
|
|
|
- if (data.agent_extn) {
|
|
|
- // 设置签入状态
|
|
|
- useTelStatusStore.setDutyState(true);
|
|
|
- // 设置分机号和坐席组
|
|
|
- useTelStatusStore.setCallInfo({ telsNo: data.agent_extn });
|
|
|
- }
|
|
|
- // 坐席状态
|
|
|
- if (data.state == 'login') {
|
|
|
- // 签入
|
|
|
- // 设置分机号和坐席组
|
|
|
- useTelStatusStore.setCallInfo({ telsNo: currentTel.value.telNo });
|
|
|
- setTimeout(() => {
|
|
|
- console.log(`当前话机模式:${currentTel.value.telModel} 1:普通模式 2:外呼模式`, getNowDateTime());
|
|
|
- if (currentTel.value.telModel == 2) {
|
|
|
- // 设置示闲状态
|
|
|
- olaRef.value.go_ready();
|
|
|
- // 设置外呼模式
|
|
|
- useTelStatusStore.setCallOut(true);
|
|
|
- // 设置话机状态 外呼模式中
|
|
|
- useTelStatusStore.setPhoneControlState(TelStates.onCallOut);
|
|
|
- } else {
|
|
|
- console.log('isRest', `当前分机是否正在休息${isRest.value}`, getNowDateTime());
|
|
|
- if (isRest.value) {
|
|
|
- // 如果是小休状态
|
|
|
- olaRef.value.go_break(''); //设置忙碌
|
|
|
- } else {
|
|
|
- // 设置示闲状态
|
|
|
- olaRef.value.go_ready();
|
|
|
- console.log('呼叫中心:调用示闲', getNowDateTime());
|
|
|
- }
|
|
|
- }
|
|
|
- }, 100);
|
|
|
- console.log('呼叫中心:已签入', getNowDateTime());
|
|
|
- ElMessage.success('签入成功');
|
|
|
- } else if (data.state == 'logout') {
|
|
|
- // 签出
|
|
|
- console.log('呼叫中心:已签出', getNowDateTime());
|
|
|
- ElMessage.success('签出成功');
|
|
|
- seatAssistOff(); // 坐席助手关闭
|
|
|
- } else if (data.state == 'ready') {
|
|
|
- if (currentTel.value.telModel === 2) {
|
|
|
- // 外呼模式
|
|
|
- // 结束计时
|
|
|
- removeTimer();
|
|
|
- // 设置分机号和坐席组
|
|
|
- useTelStatusStore.setCallInfo({ telsNo: data.agent_extn });
|
|
|
- // 设置签入状态
|
|
|
- useTelStatusStore.setDutyState(true);
|
|
|
- // 示闲中
|
|
|
- // 设置外呼模式
|
|
|
- useTelStatusStore.setCallOut(true);
|
|
|
- // 设置话机状态 修改为外呼状态
|
|
|
- useTelStatusStore.setPhoneControlState(TelStates.onCallOut);
|
|
|
- state.loading = false;
|
|
|
- console.log(getNowDateTime() + ':' + '呼叫中心 外呼模式:示闲中');
|
|
|
- sendMsg('ready');
|
|
|
- } else {
|
|
|
- // 结束计时
|
|
|
- removeTimer();
|
|
|
- // 设置分机号和坐席组
|
|
|
- useTelStatusStore.setCallInfo({ telsNo: data.agent_extn });
|
|
|
- // 设置签入状态
|
|
|
- useTelStatusStore.setDutyState(true);
|
|
|
- // 示闲中
|
|
|
- // 设置休息状态 设置未正常状态
|
|
|
- useTelStatusStore.setRest(RestStates.unRest);
|
|
|
- // 设置话机状态 结束休息改为签入状态
|
|
|
- useTelStatusStore.setPhoneControlState(TelStates.dutyOn);
|
|
|
- state.loading = false;
|
|
|
- if (isAcw.value) {
|
|
|
- // 如果是话后整理中
|
|
|
- await onEndAcw(); // 挂机后整理结束
|
|
|
- }
|
|
|
- console.log('呼叫中心:示闲中', getNowDateTime());
|
|
|
- sendMsg('ready');
|
|
|
- }
|
|
|
- } else if (data.state == 'unready') {
|
|
|
- break_reason(data.private_data);
|
|
|
- sendMsg('unready'); // 发送消息 业务系统消息通知
|
|
|
-
|
|
|
- console.log('呼叫中心:示忙中,小休开始', getNowDateTime());
|
|
|
- // 示忙中
|
|
|
- useTelStatusStore.setPhoneControlState(TelStates.rest);
|
|
|
- useTelStatusStore.setRest(RestStates.resting);
|
|
|
- /*if (AppConfigInfo.value.isRestApproval) {
|
|
|
- // 如果小休需要审核
|
|
|
- telRestProcess()
|
|
|
- .then((res: any) => {
|
|
|
- console.log('小休申请成功', res);
|
|
|
- // 设置电话状态小休中
|
|
|
- useTelStatusStore.setPhoneControlState(TelStates.rest);
|
|
|
- useTelStatusStore.setRest(RestStates.resting);
|
|
|
- ElMessage.success('小休开始');
|
|
|
- })
|
|
|
- .catch((err: any) => {
|
|
|
- console.log('小休申请失败', err);
|
|
|
- restFlowDel().then(() => {
|
|
|
- // 删除小休流程
|
|
|
- });
|
|
|
- olaRef.value.go_ready();// 示闲
|
|
|
- });
|
|
|
- } else {
|
|
|
- // ElMessage.success('小休开始');
|
|
|
- // 设置电话状态小休中
|
|
|
- useTelStatusStore.setPhoneControlState(TelStates.rest);
|
|
|
- useTelStatusStore.setRest(RestStates.resting);
|
|
|
- // 添加小休记录
|
|
|
- telRestAdd({ reason: data.private_data })
|
|
|
- .then((res: any) => {
|
|
|
- console.log('小休记录添加成功 开始休息', res);
|
|
|
- ElMessage.success('小休开始');
|
|
|
- })
|
|
|
- .catch((err: any) => {
|
|
|
- console.log('小休记录添加失败 开始休息', err);
|
|
|
-
|
|
|
- });
|
|
|
- }*/
|
|
|
- } else if (data.state == 'acw') {
|
|
|
- if (currentTel.value.telModel === 2) {
|
|
|
- // 挂机后 如果是外呼模式
|
|
|
- // 呼出直接调用示闲
|
|
|
- olaRef.value.go_ready(); // 示闲
|
|
|
- console.log('外呼模式进入话后整理调用示闲', getNowDateTime());
|
|
|
- } else {
|
|
|
- console.log(call_direction.value, '呼入还是呼出', getNowDateTime());
|
|
|
- if (call_direction.value === 'inbound') {
|
|
|
- // 呼入需要进入话后整理
|
|
|
- // 设置分机号和坐席组
|
|
|
- useTelStatusStore.setCallInfo({ telsNo: data.agent_extn });
|
|
|
-
|
|
|
- // 话后整理中
|
|
|
- const time: number = AppConfigInfo.value.talkingDealTime * 1000; // 话后整理时间
|
|
|
- ElNotification({
|
|
|
- title: '自动开启话后整理成功',
|
|
|
- message: `${time / 1000}秒后自动结束话后整理,或者手动结束话后整理`,
|
|
|
- type: 'success',
|
|
|
- duration: 1000 * 10,
|
|
|
- });
|
|
|
- // 设置话后整理
|
|
|
- useTelStatusStore.setTalkingDeal(true);
|
|
|
- // 设置话机状态 设置为话后整理中
|
|
|
- useTelStatusStore.setPhoneControlState(TelStates.onTalkingDeal);
|
|
|
- talkDealTimer.value = setTimeout(() => {
|
|
|
- // 设置话后整理
|
|
|
- useTelStatusStore.setTalkingDeal(false);
|
|
|
- // 设置话机状态 取消话后整理修改为空闲状态
|
|
|
- useTelStatusStore.setPhoneControlState(TelStates.dutyOn);
|
|
|
- olaRef.value.go_ready(); // 示闲
|
|
|
- console.log('呼叫中心:调用示闲', getNowDateTime());
|
|
|
- onEndAcw(); // 挂机后整理结束
|
|
|
- clearTimeout(talkDealTimer.value); // 清除话后整理定时器
|
|
|
- }, time);
|
|
|
- console.log('呼叫中心:话后整理中', getNowDateTime());
|
|
|
- // 如果不是话后整理中
|
|
|
- await onBeginAcw(); // 挂机后整理开始
|
|
|
- sendMsg('acw');
|
|
|
- } else {
|
|
|
- // 呼出直接调用示闲
|
|
|
- olaRef.value.go_ready(); // 示闲
|
|
|
- console.log('呼叫中心:调用示闲', getNowDateTime());
|
|
|
- }
|
|
|
- }
|
|
|
- } else if (data.state == 'busy') {
|
|
|
- console.log(data.state, '其他状态', getNowDateTime());
|
|
|
- /* // 设置振铃中
|
|
|
- useTelStatusStore.setPhoneControlState(TelStates.ring);
|
|
|
- sendMsg('busy');
|
|
|
- console.log('呼叫中心:转接中....');*/
|
|
|
- } else {
|
|
|
- console.log(data.state, '其他状态1', getNowDateTime());
|
|
|
- }
|
|
|
-
|
|
|
- if (data.state == 'busy') {
|
|
|
- call_direction.value = data.call_direction; // 保存呼叫方向
|
|
|
- if (['held', 'unheld'].includes(data.private_data)) {
|
|
|
- if (muteModel.value || isTelMute.value) {
|
|
|
- // 如果是静音状态
|
|
|
- // 静音
|
|
|
- if (data.private_data == 'held') {
|
|
|
- // 设置电话状态
|
|
|
- useTelStatusStore.setMute(true);
|
|
|
- // 设置电话状态 静音中
|
|
|
- useTelStatusStore.setPhoneControlState(TelStates.onMute);
|
|
|
- sendMsg('mute');
|
|
|
- await muteStart();
|
|
|
- } else {
|
|
|
- // 设置电话状态 取消单个静音为通话中
|
|
|
- useTelStatusStore.setMute(false);
|
|
|
- // 设置电话状态
|
|
|
- useTelStatusStore.setPhoneControlState(TelStates.onCall);
|
|
|
- sendMsg('busy');
|
|
|
- await muteEnd();
|
|
|
- }
|
|
|
- } else {
|
|
|
- // 保持
|
|
|
- if (data.private_data == 'held') {
|
|
|
- // 设置电话状态
|
|
|
- useTelStatusStore.setHold(true);
|
|
|
- // 设置电话状态 保持中
|
|
|
- useTelStatusStore.setPhoneControlState(TelStates.onHold);
|
|
|
- sendMsg('held');
|
|
|
- await holdStart(); // 保持开始 业务系统统计需要
|
|
|
- } else {
|
|
|
- // 设置电话状态 取消单个保持为通话中
|
|
|
- useTelStatusStore.setHold(false);
|
|
|
- // 设置电话状态
|
|
|
- useTelStatusStore.setPhoneControlState(TelStates.onCall);
|
|
|
- sendMsg('busy');
|
|
|
- await holdEnd();
|
|
|
- }
|
|
|
- }
|
|
|
- } else {
|
|
|
- // 非保持状态
|
|
|
- if (data.private_data == 'monitoring') {
|
|
|
- // 三方来电振铃中
|
|
|
- useTelStatusStore.setPhoneControlState(TelStates.ring);
|
|
|
- console.log('呼叫中心:三方来电振铃中', getNowDateTime());
|
|
|
- } else if (data.private_data == 'three_way') {
|
|
|
- // 三方来电通话中
|
|
|
- // 开始计时
|
|
|
- startTime();
|
|
|
- // 设置电话状态 三方通话中
|
|
|
- useTelStatusStore.setPhoneControlState(TelStates.onConference);
|
|
|
- console.log('呼叫中心:三方来电通话中', getNowDateTime());
|
|
|
- sendMsg('busy');
|
|
|
- } else if (data.private_data == 'three_way_hangup') {
|
|
|
- // 三方来电挂断
|
|
|
- // 设置电话状态 通话中
|
|
|
- useTelStatusStore.setPhoneControlState(TelStates.onCall);
|
|
|
- onCallArr.value = [];
|
|
|
- sendMsg('busy');
|
|
|
- console.log('呼叫中心:三方来电挂断', getNowDateTime());
|
|
|
- } else if (data.private_data == 'three_way_ring') {
|
|
|
- // 三方通话呼出中
|
|
|
- // 设置振铃中
|
|
|
- useTelStatusStore.setPhoneControlState(TelStates.ring);
|
|
|
- sendMsg('busy');
|
|
|
- console.log('呼叫中心:三方通话呼出中', getNowDateTime());
|
|
|
- } else if (data.private_data == 'three_way_answered') {
|
|
|
- // 三方通话呼出接通
|
|
|
- onCallArr.value.push({ telNo: state.threeWayForm.telNo }); // 三方通话呼出接通
|
|
|
- // 设置电话状态 呼出三方通话中 可以踢人和挂断通话
|
|
|
- useTelStatusStore.setPhoneControlState(TelStates.onThreeWay);
|
|
|
- console.log('呼叫中心:三方通话呼出接通,推送一次', getNowDateTime());
|
|
|
- sendMsg('treeWay');
|
|
|
- } else if (data.call_direction == 'outbound') {
|
|
|
- // 呼出
|
|
|
- if (data.private_data == 'calling') {
|
|
|
- // 拨号中
|
|
|
- // 设置电话状态 振铃中
|
|
|
- useTelStatusStore.setPhoneControlState(TelStates.ring);
|
|
|
- sendMsg('busy');
|
|
|
- console.log('呼叫中心:呼出拨号中', getNowDateTime());
|
|
|
- } else if (data.private_data == 'answered') {
|
|
|
- //振铃中
|
|
|
- if (data.other_answered == false) {
|
|
|
- // 设置电话状态 振铃中
|
|
|
- useTelStatusStore.setPhoneControlState(TelStates.ring);
|
|
|
- console.log('呼叫中心:呼出振铃中', getNowDateTime());
|
|
|
- } else if (data.other_answered == true) {
|
|
|
- // 通话中
|
|
|
- // 开始计时
|
|
|
- startTime();
|
|
|
- // 设置电话状态 通话中
|
|
|
- useTelStatusStore.setPhoneControlState(TelStates.onCall);
|
|
|
-
|
|
|
- mittBus.emit('outboundConnect', data); // 外呼接通之后收到的消息
|
|
|
- console.log('呼叫中心:呼出通话中', getNowDateTime());
|
|
|
- }
|
|
|
- sendMsg('busy');
|
|
|
- }
|
|
|
- } else {
|
|
|
- // 呼入
|
|
|
- if (data.private_data == 'ring') {
|
|
|
- // 设置电话状态 振铃中
|
|
|
- useTelStatusStore.setPhoneControlState(TelStates.ring);
|
|
|
- console.log(data, '呼叫中心:来电弹单信息', getNowDateTime());
|
|
|
- // 来电才展示弹屏
|
|
|
- // 跳转到录入工单页面
|
|
|
- await getWithList(); // 获取白名单列表
|
|
|
- const isWhite = state.whiteList.find((item: any) => item.phone === data.ani);
|
|
|
- if (isWhite) {
|
|
|
- // 如果来电电话在呼入白名单中 需要提示
|
|
|
- ElNotification({
|
|
|
- title: '来电提醒',
|
|
|
- message: '该市民为白名单。',
|
|
|
- type: 'success',
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- await router.push({
|
|
|
- name: 'orderAccept',
|
|
|
- state: {
|
|
|
- createBy: 'tel',
|
|
|
- fromTel: data.ani, // 来电号码
|
|
|
- telGuid: data.other_accept,
|
|
|
- transfer: data.gateway, // 转接来源(如12345,12333)
|
|
|
- telArea: '',
|
|
|
- identityType: data.app_data.dtmf_his, // 按键接收(1:市民 2:企业 3:智能应答)
|
|
|
- },
|
|
|
- params: {
|
|
|
- callId: data.other_accept, // 通话唯一ID
|
|
|
- tagsViewName: '工单受理',
|
|
|
- },
|
|
|
- });
|
|
|
- } else if (data.private_data == 'answered') {
|
|
|
- // 开始计时
|
|
|
- startTime();
|
|
|
- // 设置电话状态 通话中
|
|
|
- useTelStatusStore.setPhoneControlState(TelStates.onCall);
|
|
|
- console.log('呼叫中心:呼入通话中', getNowDateTime());
|
|
|
- }
|
|
|
- sendMsg('busy');
|
|
|
- }
|
|
|
- }
|
|
|
- } else if (data.old_state == 'busy') {
|
|
|
- //挂机后系统可以返回两种状态:acw 话后整理状态 ready 示闲状态,如果不需要acw,可以联系我们后台修改配置,如果需要保留,如果需要再次
|
|
|
- //拨打电话的话,需要手动点击示闲按钮
|
|
|
- // 设置分机号和坐席组
|
|
|
- useTelStatusStore.setCallInfo({ telsNo: data.agent_extn });
|
|
|
-
|
|
|
- // 结束计时
|
|
|
- removeTimer();
|
|
|
- onCallArr.value = [];
|
|
|
- console.log('呼叫中心:已挂机', onCallArr.value, data, getNowDateTime());
|
|
|
- sendMsg('ready');
|
|
|
- }
|
|
|
- } else if (data.event_type == 'agent_caller_state') {
|
|
|
- //通话状态
|
|
|
- // special feature, never mind
|
|
|
- if (data.action == 'in') {
|
|
|
- console.log('呼叫中心:呼入', data.caller.cid_number, data.caller.iuud, getNowDateTime());
|
|
|
- // olaRef.value.take_call(data.caller.uuid);
|
|
|
- } else {
|
|
|
- console.log('呼叫中心:呼出', data.caller.uuid, getNowDateTime());
|
|
|
- }
|
|
|
- } else if (data.event_type == 'command/reply') {
|
|
|
- // 其他消息
|
|
|
- // console.log('command/reply', data);
|
|
|
- }
|
|
|
-};
|
|
|
-// 呼叫中心链接错误
|
|
|
-const onError = (ws: any, e: any) => {
|
|
|
- console.log(`呼叫中心链接错误:${e}`);
|
|
|
-};
|
|
|
-// 业务系统发送消息
|
|
|
-const sendMsg = (msg: any) => {
|
|
|
- signalR.SR.invoke('SendSeatState', { telNo: telStatusInfo.value.telsNo, state: msg });
|
|
|
-};
|
|
|
-// 业务系统记录话后整理开始
|
|
|
-const onBeginAcw = async () => {
|
|
|
- try {
|
|
|
- const res: any = await startAfterCall({ actionType: 1 });
|
|
|
- console.log(res, '业务系统记录话后整理开始', getNowDateTime());
|
|
|
- } catch (err) {
|
|
|
- console.log(err, getNowDateTime());
|
|
|
- }
|
|
|
-};
|
|
|
-// 业务系统记录话后整理结束
|
|
|
-const onEndAcw = async () => {
|
|
|
- try {
|
|
|
- const res: any = await endAfterCall({ actionType: 1 });
|
|
|
- console.log(res, '业务系统记录话后整理结束', getNowDateTime());
|
|
|
- } catch (err) {
|
|
|
- console.log(err, getNowDateTime());
|
|
|
- }
|
|
|
-};
|
|
|
-const router = useRouter();
|
|
|
-const talkDealTimer = ref<any>(null); // 话后整理定时器
|
|
|
-const pingTimer = ref<any>(null); // 心跳定时器
|
|
|
-const call_direction = ref<any>(''); // 呼叫方向
|
|
|
-// 记录日志
|
|
|
-const submitLogFn = async (request: any) => {
|
|
|
- try {
|
|
|
- await submitLog(request);
|
|
|
- Local.remove('telNo');
|
|
|
- } catch (error) {
|
|
|
- console.log(error, getNowDateTime());
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-const dutyFormRef = ref<RefType>();
|
|
|
-const currentTel = ref<any>({}); // 当前分机
|
|
|
-const isRest = ref<boolean>(false); // 是否小休
|
|
|
-//签入
|
|
|
-const onDutyFn = async () => {
|
|
|
- if (AppConfigInfo.value.isNeedTelNo || AppConfigInfo.value.isTelNeedVerify) {
|
|
|
- // 需要选择分机号或者填写密码 打开弹窗选择分机号
|
|
|
- dutyFormRef.value?.resetFields();
|
|
|
- state.dutyDialogVisible = true;
|
|
|
- } else {
|
|
|
- ElMessageBox.confirm(`确定要签入,是否继续?`, '提示', {
|
|
|
- confirmButtonText: '确认',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning',
|
|
|
- draggable: true,
|
|
|
- cancelButtonClass: 'default-button',
|
|
|
- autofocus: false,
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- state.loading = true;
|
|
|
- dutyOn({ telNo: userInfos.value.defaultTelNo })
|
|
|
- .then((res: any) => {
|
|
|
- currentTel.value.password = res.result.telPwd;
|
|
|
- currentTel.value.telNo = res.result.telNo;
|
|
|
- currentTel.value.queue = res.result.queueId; // 呼入分机组
|
|
|
- currentTel.value.telModel = res.result.telModel; // 1:普通模式 2:呼出模式
|
|
|
- currentTel.value.queueCallOut = res.result.queueCallOut; // 呼出分机组
|
|
|
- // 不需要选择分机号和密码 直接签入 传入默认分机号
|
|
|
- websocket_connect(); //开启消息监听
|
|
|
- startDutyTimer(res.result.second); // 开启计时 签入时长
|
|
|
- isRest.value = res.result.isRest;
|
|
|
- state.loading = false;
|
|
|
- })
|
|
|
- .catch(() => {})
|
|
|
- .finally(() => {
|
|
|
- state.loading = false;
|
|
|
- });
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- resetState();
|
|
|
- state.loading = false;
|
|
|
- });
|
|
|
- }
|
|
|
-};
|
|
|
-// 确认签入
|
|
|
-const clickOnDuty = (formEl: FormInstance | undefined) => {
|
|
|
- if (!formEl) return;
|
|
|
- formEl.validate((valid: boolean) => {
|
|
|
- if (!valid) return;
|
|
|
- state.loading = true;
|
|
|
- let request = {};
|
|
|
- if (AppConfigInfo.value.isNeedTelNo && AppConfigInfo.value.isTelNeedVerify) {
|
|
|
- // 需要分机和密码
|
|
|
- request = {
|
|
|
- telNo: state.dutyForm.telNo,
|
|
|
- telPwd: state.dutyForm.password,
|
|
|
- telModelState: 2, // 默认呼出模式
|
|
|
- };
|
|
|
- } else if (AppConfigInfo.value.isNeedTelNo) {
|
|
|
- //需要分机号
|
|
|
- request = {
|
|
|
- telNo: state.dutyForm.telNo,
|
|
|
- telModelState: 2, // 默认呼出模式
|
|
|
- };
|
|
|
- } else if (AppConfigInfo.value.isTelNeedVerify) {
|
|
|
- // 需要密码
|
|
|
- request = {
|
|
|
- telNo: state.dutyForm.telNo,
|
|
|
- telPwd: userInfos.value.defaultTelNo,
|
|
|
- telModelState: 2, // 默认呼出模式
|
|
|
- };
|
|
|
- }
|
|
|
- dutyOn(request)
|
|
|
- .then((res: any) => {
|
|
|
- if (AppConfigInfo.value.isNeedTelNo && AppConfigInfo.value.isTelNeedVerify) {
|
|
|
- // 需要分机和密码
|
|
|
- currentTel.value.password = state.dutyForm.password;
|
|
|
- currentTel.value.telNo = state.dutyForm.telNo;
|
|
|
- currentTel.value.queue = res.result.queueId; // 呼入分机组
|
|
|
- currentTel.value.telModel = res.result.telModel; // 1:普通模式 2:呼出模式
|
|
|
- currentTel.value.queueCallOut = res.result.queueCallOut; // 呼出分机组
|
|
|
- } else if (AppConfigInfo.value.isNeedTelNo) {
|
|
|
- //需要分机号
|
|
|
- currentTel.value.password = res.result.telPwd;
|
|
|
- currentTel.value.telNo = res.result.telNo;
|
|
|
- currentTel.value.queue = res.result.queueId; // 呼入分机组
|
|
|
- currentTel.value.telModel = res.result.telModel; // 1:普通模式 2:呼出模式
|
|
|
- currentTel.value.queueCallOut = res.result.queueCallOut; // 呼出分机组
|
|
|
- } else if (AppConfigInfo.value.isTelNeedVerify) {
|
|
|
- // 需要密码
|
|
|
- currentTel.value.password = state.dutyForm.password;
|
|
|
- currentTel.value.telNo = res.result.telNo;
|
|
|
- currentTel.value.queue = res.result.queueId; // 呼入分机组
|
|
|
- currentTel.value.telModel = res.result.telModel; // 1:普通模式 2:呼出模式
|
|
|
- currentTel.value.queueCallOut = res.result.queueCallOut; // 呼出分机组
|
|
|
- }
|
|
|
- websocket_connect(); //开启消息监听
|
|
|
- startDutyTimer(res.result.second); // 开启计时 签入时长
|
|
|
- isRest.value = res.result.isRest;
|
|
|
- state.loading = false;
|
|
|
- state.dutyDialogVisible = false;
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- resetState(); // 重置所有状态
|
|
|
- console.log('业务系统:签入错误', getNowDateTime());
|
|
|
- })
|
|
|
- .finally(() => {
|
|
|
- state.loading = false;
|
|
|
- state.dutyDialogVisible = false;
|
|
|
- });
|
|
|
- });
|
|
|
-};
|
|
|
-// 签出
|
|
|
-const offDutyFn = () => {
|
|
|
- ElMessageBox.confirm(`确定要签出,是否继续?`, '提示', {
|
|
|
- confirmButtonText: '确认',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning',
|
|
|
- draggable: true,
|
|
|
- cancelButtonClass: 'default-button',
|
|
|
- autofocus: false,
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- state.loading = true;
|
|
|
- dutyOff()
|
|
|
- .then(() => {
|
|
|
- console.log('业务系统:签出成功', getNowDateTime());
|
|
|
- sendMsg('logout');
|
|
|
- olaRef.value.logout(currentTel.value.telNo); //签出
|
|
|
- state.dutyOnSrc = getImageUrl('phoneControls/dutyOn_blue.png'); //签入图片
|
|
|
- setTimeout(() => {
|
|
|
- olaRef.value.close();
|
|
|
- }, 500);
|
|
|
- resetState();
|
|
|
- state.loading = false;
|
|
|
- })
|
|
|
- .catch(() => {})
|
|
|
- .finally(() => {
|
|
|
- state.loading = false;
|
|
|
- });
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- state.loading = false;
|
|
|
- });
|
|
|
-};
|
|
|
-// 开启外呼模式
|
|
|
-const onCallOut = () => {
|
|
|
- ElMessageBox.confirm(`确定要进入外呼模式,进入外呼模式后将无法接听到来电`, '提示', {
|
|
|
- confirmButtonText: '确认',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning',
|
|
|
- draggable: true,
|
|
|
- cancelButtonClass: 'default-button',
|
|
|
- autofocus: false,
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- state.loading = true;
|
|
|
- switchMode({ isCallOut: true })
|
|
|
- .then(() => {
|
|
|
- olaRef.value.logout(currentTel.value.telNo);
|
|
|
- olaRef.value.close();
|
|
|
- currentTel.value.telModel = 2;
|
|
|
- websocket_connect();
|
|
|
- // 设置电话状态 外呼模式中
|
|
|
- useTelStatusStore.setCallOut(true);
|
|
|
- // 设置电话状态 外呼模式中
|
|
|
- useTelStatusStore.setPhoneControlState(TelStates.onCallOut);
|
|
|
- getTelStatusFn();
|
|
|
- seatAssistOff(); // 关闭坐席辅助
|
|
|
- state.loading = false;
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- state.loading = false;
|
|
|
- });
|
|
|
- })
|
|
|
- .catch(() => {});
|
|
|
-};
|
|
|
-// 关闭外呼模式
|
|
|
-const onUnCallOut = () => {
|
|
|
- ElMessageBox.confirm(`确定要取消外呼模式,取消外呼模式后将会收到市民来电?`, '提示', {
|
|
|
- confirmButtonText: '确认',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning',
|
|
|
- draggable: true,
|
|
|
- cancelButtonClass: 'default-button',
|
|
|
- autofocus: false,
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- state.loading = true;
|
|
|
- switchMode({ isCallOut: false })
|
|
|
- .then(() => {
|
|
|
- olaRef.value.logout(currentTel.value.telNo);
|
|
|
- olaRef.value.close();
|
|
|
- currentTel.value.telModel = 1;
|
|
|
- websocket_connect();
|
|
|
- // 设置电话状态 取消外呼模式
|
|
|
- useTelStatusStore.setCallOut(false);
|
|
|
- // 设置电话状态 保持中
|
|
|
- useTelStatusStore.setPhoneControlState(TelStates.dutyOn);
|
|
|
- state.loading = false;
|
|
|
- getTelStatusFn();
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- state.loading = false;
|
|
|
- });
|
|
|
- })
|
|
|
- .catch(() => {});
|
|
|
-};
|
|
|
-// 挂断
|
|
|
-const onHangup = () => {
|
|
|
- ElMessageBox.confirm(`确定要挂断,是否继续?`, '提示', {
|
|
|
- confirmButtonText: '确认',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning',
|
|
|
- draggable: true,
|
|
|
- cancelButtonClass: 'default-button',
|
|
|
- autofocus: false,
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- olaRef.value.hangup(); //挂断
|
|
|
- })
|
|
|
- .catch(() => {});
|
|
|
-};
|
|
|
-// 小休原因
|
|
|
-const restReason = ref(''); // 小休原因
|
|
|
-const break_reason = (reason: string) => {
|
|
|
- switch (reason) {
|
|
|
- case 'away':
|
|
|
- restReason.value = '外出中';
|
|
|
- break;
|
|
|
- case 'rest':
|
|
|
- restReason.value = '休息中';
|
|
|
- break;
|
|
|
- case 'conference':
|
|
|
- restReason.value = '会议中';
|
|
|
- break;
|
|
|
- case 'train':
|
|
|
- restReason.value = '培训中';
|
|
|
- break;
|
|
|
- case 'eat':
|
|
|
- restReason.value = '用餐中';
|
|
|
- break;
|
|
|
- default:
|
|
|
- restReason.value = '休息中';
|
|
|
- break;
|
|
|
- }
|
|
|
- if (telStatusInfo.value.isRest !== 'resting' && !isRest.value) {
|
|
|
- // 判断当前状态是否在话后整理中 如果在话后整理中先结束话后整理
|
|
|
- if (isAcw.value || telStatusInfo.value.isTalkingDeal) {
|
|
|
- // 如果是话后整理中
|
|
|
- onEndAcw(); // 挂机后整理结束
|
|
|
- }
|
|
|
- // 如果不在在小休中
|
|
|
- const restReasons = state.restReasonOptions.find((item: any) => item.dicDataValue === reason);
|
|
|
- busyOn({ reason: restReasons?.dicDataName ?? '' }) // 开始小休 设置示忙 业务系统统计需要
|
|
|
- .then(() => {
|
|
|
- console.log('业务系统调用示忙成功', getNowDateTime());
|
|
|
- state.loading = false;
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- console.log('业务系统调用示忙失败', err, getNowDateTime());
|
|
|
- state.loading = false;
|
|
|
- });
|
|
|
- } else {
|
|
|
- state.loading = false;
|
|
|
- }
|
|
|
-};
|
|
|
-// 小休
|
|
|
-const restFormRef = ref<RefType>(); //小休表单
|
|
|
-const onRest = async () => {
|
|
|
- if (AppConfigInfo.value.isRestApproval) {
|
|
|
- // 如果小休需要审核
|
|
|
- // 查询流程节点参数
|
|
|
- const res: any = await restFlowStart();
|
|
|
- state.nextStepOptions = res.result.steps;
|
|
|
- state.handleId = res.result.id;
|
|
|
- }
|
|
|
- // 重置表单
|
|
|
- restFormRef.value?.resetFields();
|
|
|
- state.restDialogVisible = true;
|
|
|
-};
|
|
|
-// 打开弹窗清空表单
|
|
|
-const restFormOpened = () => {
|
|
|
- restFormRef.value?.resetFields();
|
|
|
- restFormRef.value?.clearValidate();
|
|
|
-};
|
|
|
-// 小休流程选择下一个环节
|
|
|
-const selectNextStep = (val: any) => {
|
|
|
- const next = state.nextStepOptions.find((item: any) => item.key === val);
|
|
|
- getNextStepOption(state.handleId, next.key);
|
|
|
-};
|
|
|
-// 查询流程下一节点参数
|
|
|
-const getNextStepOption = async (DefineId: string, Code: string) => {
|
|
|
- try {
|
|
|
- const res: any = await workflowStepOptions({ DefineId, Code });
|
|
|
- state.handlerOptions = res.result ?? [];
|
|
|
- } catch (error) {
|
|
|
- console.log(error, getNowDateTime());
|
|
|
- }
|
|
|
-};
|
|
|
-// 小休选择处理人
|
|
|
-const selectHandlers = () => {
|
|
|
- restFormRef.value?.resetFields('nextMainHandler');
|
|
|
-};
|
|
|
-// 主办从处理人中选择
|
|
|
-state.handlerMainOptions = computed(() => {
|
|
|
- return state.restForm.nextHandlers;
|
|
|
-});
|
|
|
-// 确定小休(示忙)
|
|
|
-const clickOnRest = (formEl: FormInstance | undefined) => {
|
|
|
- if (!formEl) return;
|
|
|
- formEl.validate((valid: boolean) => {
|
|
|
- if (!valid) return;
|
|
|
- state.loading = true;
|
|
|
- if (AppConfigInfo.value.isRestApproval) {
|
|
|
- //如果需要审核
|
|
|
- state.restForm.additions = state.fileList;
|
|
|
- let submitObj = other.deepClone(state.restForm);
|
|
|
- if (submitObj.nextHandlers && submitObj.nextHandlers.length) {
|
|
|
- submitObj.nextHandlers = submitObj.nextHandlers.map((item: any) => {
|
|
|
- return {
|
|
|
- id: item.key,
|
|
|
- name: item.value,
|
|
|
- };
|
|
|
- });
|
|
|
- if (submitObj.nextHandlers.length === 1) {
|
|
|
- submitObj.nextMainHandler = submitObj.nextHandlers[0].id;
|
|
|
- }
|
|
|
- }
|
|
|
- restFlowStartWex(submitObj)
|
|
|
- .then(() => {
|
|
|
- ElNotification({
|
|
|
- title: '成功',
|
|
|
- message: '申请小休成功',
|
|
|
- type: 'success',
|
|
|
- });
|
|
|
- // 设置休息状态 审核中
|
|
|
- useTelStatusStore.setRest(RestStates.InReview);
|
|
|
- state.restDialogVisible = false;
|
|
|
- state.loading = false;
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- restFlowDel().then(() => {
|
|
|
- state.loading = false;
|
|
|
- state.restDialogVisible = false;
|
|
|
- });
|
|
|
- });
|
|
|
- } else {
|
|
|
- //不需要审核直接开始小休
|
|
|
- olaRef.value.go_break(state.restForm.reason); //设置忙碌
|
|
|
- clearTimeout(talkDealTimer.value); // 清除话后整理定时器
|
|
|
- console.log('呼叫中心:调用示忙', getNowDateTime());
|
|
|
- state.restDialogVisible = false;
|
|
|
- state.loading = false;
|
|
|
- }
|
|
|
- });
|
|
|
-};
|
|
|
-// 设置抽屉
|
|
|
-const dialogRestRef = ref<RefType>(); // 小休申请弹窗
|
|
|
-const mouseup = () => {
|
|
|
- state.transform = dialogRestRef.value.dialogContentRef.$el.style.transform;
|
|
|
-};
|
|
|
-// 选择常用意见 填入填写框
|
|
|
-const chooseAdvice = (item: any) => {
|
|
|
- state.restForm.opinion += item.content;
|
|
|
-};
|
|
|
-// 小休结束
|
|
|
-const onRestEnd = () => {
|
|
|
- ElMessageBox.confirm(`确定要结束小休,是否继续?`, '提示', {
|
|
|
- confirmButtonText: '确认',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning',
|
|
|
- draggable: true,
|
|
|
- cancelButtonClass: 'default-button',
|
|
|
- autofocus: false,
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- olaRef.value.go_ready(); // 示闲
|
|
|
- busyOff(); // 结束小休(调用业务系统接口,统计需要)
|
|
|
- console.log('呼叫中心:调用示闲', getNowDateTime());
|
|
|
- })
|
|
|
- .catch(() => {});
|
|
|
-};
|
|
|
-// 业务系统保持开始
|
|
|
-const holdStart = async () => {
|
|
|
- try {
|
|
|
- const res: any = await startAfterCall({ actionType: 2 });
|
|
|
- console.log(res, '业务系统记录保持开始', getNowDateTime());
|
|
|
- } catch (err) {
|
|
|
- console.log(err);
|
|
|
- }
|
|
|
-};
|
|
|
-// 业务系统保持结束
|
|
|
-const holdEnd = async () => {
|
|
|
- try {
|
|
|
- const res: any = await endAfterCall({ actionType: 2 });
|
|
|
- console.log(res, '业务系统记录保持结束', getNowDateTime());
|
|
|
- } catch (err) {
|
|
|
- console.log(err);
|
|
|
- }
|
|
|
-};
|
|
|
-// 通话保持
|
|
|
-const onHold = () => {
|
|
|
- ElMessageBox.confirm(`确定要保持,是否继续?`, '提示', {
|
|
|
- confirmButtonText: '确认',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning',
|
|
|
- draggable: true,
|
|
|
- cancelButtonClass: 'default-button',
|
|
|
- autofocus: false,
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- muteModel.value = false;
|
|
|
- olaRef.value.hold(); //保持
|
|
|
- })
|
|
|
- .catch(() => {});
|
|
|
-};
|
|
|
-// 取消保持
|
|
|
-const onUnHold = () => {
|
|
|
- ElMessageBox.confirm(`确定要取消保持,是否继续?`, '提示', {
|
|
|
- confirmButtonText: '确认',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning',
|
|
|
- draggable: true,
|
|
|
- cancelButtonClass: 'default-button',
|
|
|
- autofocus: false,
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- muteModel.value = false;
|
|
|
- olaRef.value.unhold(); //取消保持
|
|
|
- })
|
|
|
- .catch(() => {});
|
|
|
-};
|
|
|
-// 业务系统静音开始
|
|
|
-const muteStart = async () => {
|
|
|
- try {
|
|
|
- const res: any = await startAfterCall({ actionType: 4 });
|
|
|
- console.log(res, '业务系统记录静音开始', getNowDateTime());
|
|
|
- } catch (err) {
|
|
|
- console.log(err);
|
|
|
- }
|
|
|
-};
|
|
|
-// 业务系统静音结束
|
|
|
-const muteEnd = async () => {
|
|
|
- try {
|
|
|
- const res: any = await endAfterCall({ actionType: 4 });
|
|
|
- console.log(res, '业务系统记录静音结束', getNowDateTime());
|
|
|
- } catch (err) {
|
|
|
- console.log(err);
|
|
|
- }
|
|
|
-};
|
|
|
-// 静音
|
|
|
-const muteModel = ref(false);
|
|
|
-const onMute = () => {
|
|
|
- ElMessageBox.confirm(`确定要静音,是否继续?`, '提示', {
|
|
|
- confirmButtonText: '确认',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning',
|
|
|
- draggable: true,
|
|
|
- cancelButtonClass: 'default-button',
|
|
|
- autofocus: false,
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- muteModel.value = true;
|
|
|
- olaRef.value.hold(); //保持
|
|
|
- })
|
|
|
- .catch(() => {});
|
|
|
-};
|
|
|
-// 静音取消
|
|
|
-const onUnMute = () => {
|
|
|
- ElMessageBox.confirm(`确定要取消静音,是否继续?`, '提示', {
|
|
|
- confirmButtonText: '确认',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning',
|
|
|
- draggable: true,
|
|
|
- cancelButtonClass: 'default-button',
|
|
|
- autofocus: false,
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- muteModel.value = true;
|
|
|
- olaRef.value.unhold(); //取消保持
|
|
|
- })
|
|
|
- .catch(() => {});
|
|
|
-};
|
|
|
-// 取消话后整理
|
|
|
-const unTalkingDeal = () => {
|
|
|
- ElMessageBox.confirm(`确定要取消话后整理,是否继续?`, '提示', {
|
|
|
- confirmButtonText: '确认',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning',
|
|
|
- draggable: true,
|
|
|
- cancelButtonClass: 'default-button',
|
|
|
- autofocus: false,
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- // 设置话后整理
|
|
|
- useTelStatusStore.setTalkingDeal(false);
|
|
|
- // 设置话机状态 取消话后整理修改为空闲状态
|
|
|
- useTelStatusStore.setPhoneControlState(TelStates.dutyOn);
|
|
|
- olaRef.value.go_ready(); // 示闲
|
|
|
- clearTimeout(talkDealTimer.value); // 清除话后整理定时器
|
|
|
- onEndAcw(); // 挂机后整理结束
|
|
|
- console.log('呼叫中心:调用示闲', getNowDateTime());
|
|
|
- })
|
|
|
- .catch(() => {});
|
|
|
-};
|
|
|
-// 打开转接弹窗
|
|
|
-const transferFormRef = ref<RefType>(); // 转接表单
|
|
|
-const onTransfer = () => {
|
|
|
- // 重置表单
|
|
|
- transferFormRef.value?.resetFields();
|
|
|
- // 获取所有分机列表
|
|
|
- state.transferDialogVisible = true;
|
|
|
-};
|
|
|
-// 确认转接
|
|
|
-const clickOnTransfer = (formEl: FormInstance | undefined) => {
|
|
|
- if (!formEl) return;
|
|
|
- formEl.validate((valid: boolean) => {
|
|
|
- if (!valid) return;
|
|
|
- olaRef.value.transfer(state.transferForm.telNo); //转接
|
|
|
- state.transferDialogVisible = false;
|
|
|
- });
|
|
|
-};
|
|
|
-// 三方会议开始
|
|
|
-const onConference = () => {
|
|
|
- // 重置表单
|
|
|
- transferFormRef.value?.resetFields();
|
|
|
- // 获取所有分机列表
|
|
|
- state.threeWayDialogVisible = true;
|
|
|
-};
|
|
|
-// 三方会议确定
|
|
|
-const onCallArr = ref<EmptyArrayType>([]); // 三方会议选中的分机
|
|
|
-const threeWayVisible = ref(false); // 三方会议弹窗
|
|
|
-const threeWayFormRef = ref<RefType>(); // 三方会议表单
|
|
|
-const clickOnThreeWay = (formEl: FormInstance | undefined) => {
|
|
|
- if (!formEl) return;
|
|
|
- formEl.validate((valid: boolean) => {
|
|
|
- if (!valid) return;
|
|
|
- olaRef.value.three_way(telStatusInfo.value.telsNo, state.threeWayForm.telNo); //三方会议
|
|
|
-
|
|
|
- // 三方通话呼出接通
|
|
|
- onCallArr.value.push({ telNo: state.threeWayForm.telNo }); // 三方通话呼出接通
|
|
|
- // 设置电话状态 呼出三方通话中 可以踢人和挂断通话
|
|
|
- useTelStatusStore.setPhoneControlState(TelStates.onThreeWay);
|
|
|
- sendMsg('treeWay');
|
|
|
- state.threeWayDialogVisible = false;
|
|
|
- });
|
|
|
-};
|
|
|
-const kickOut = (item: any) => {
|
|
|
- ElMessageBox.confirm(`确定确定要踢出${item.telNo},并恢复通话,是否继续?`, '提示', {
|
|
|
- confirmButtonText: '确认',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning',
|
|
|
- draggable: true,
|
|
|
- cancelButtonClass: 'default-button',
|
|
|
- autofocus: false,
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- olaRef.value.exit_three_way(item.telNo); // 踢出第三方
|
|
|
- // 恢复通话
|
|
|
- useTelStatusStore.setPhoneControlState(TelStates.onCall);
|
|
|
- onCallArr.value = [];
|
|
|
- })
|
|
|
- .catch(() => {});
|
|
|
-};
|
|
|
-// 外呼
|
|
|
-const outboundFormRef = ref<RefType>(); //外呼
|
|
|
-const onOutbound = () => {
|
|
|
- // 重置表单
|
|
|
- outboundFormRef.value?.resetFields();
|
|
|
- // 获取所有分机列表
|
|
|
- state.outboundDialogVisible = true;
|
|
|
-};
|
|
|
-// 外呼保存
|
|
|
-const clickOnOutbound = (formEl: FormInstance | undefined) => {
|
|
|
- if (!formEl) return;
|
|
|
- formEl.validate((valid: boolean) => {
|
|
|
- if (!valid) return;
|
|
|
- state.loading = true;
|
|
|
- setTimeout(() => {
|
|
|
- olaRef.value.dial(state.outboundForm.telNo);
|
|
|
- state.outboundDialogVisible = false;
|
|
|
- state.loading = false;
|
|
|
- }, 300);
|
|
|
- });
|
|
|
-};
|
|
|
-// 坐席辅链接
|
|
|
-const socket = ref<any>(null);
|
|
|
-const jths_uid = ref<string>('');
|
|
|
-const jths_trans = ref<string>('');
|
|
|
-const jths_notice = ref<string>('');
|
|
|
-const jths_userName = ref<string>('');
|
|
|
-// 打开websocket链接
|
|
|
-const connectVoiceAssistant = async (telNo: string) => {
|
|
|
- try {
|
|
|
- const { result } = await voiceAssistant(telNo);
|
|
|
- jths_uid.value = `8#User-${result.uid}`;
|
|
|
- jths_trans.value = `/trans/${result.orgCode}/${result.groupUid}/${jths_uid.value}`;
|
|
|
- jths_notice.value = `/notice/${result.orgCode}/${result.groupUid}/${jths_uid.value}`;
|
|
|
- jths_userName.value = result.userName;
|
|
|
- socket.value = useWebSocket(import.meta.env.VITE_VOICE_ASSISTANT_SOCKET_URL, {
|
|
|
- heartbeat: {
|
|
|
- message: JSON.stringify({
|
|
|
- id: '',
|
|
|
- type: 2,
|
|
|
- from: jths_uid.value,
|
|
|
- to: 'sys',
|
|
|
- timestamps: new Date().getTime(),
|
|
|
- body: 'PING',
|
|
|
- }),
|
|
|
- interval: 2000,
|
|
|
- pongTimeout: 2000,
|
|
|
- },
|
|
|
- autoReconnect: {
|
|
|
- delay: 2000,
|
|
|
- }, // 自动重连
|
|
|
- immediate: true, // 是否立即链接
|
|
|
- onMessage: jths_receive, // 消息接收
|
|
|
- onError: jths_error, // 错误
|
|
|
- onDisconnected: jths_disconnected, // 断开
|
|
|
- onConnected: jths_connected, // 链接成功
|
|
|
- });
|
|
|
- } catch (err) {
|
|
|
- console.log(err, '坐席辅助链接失败', getNowDateTime());
|
|
|
- ElMessage.error('坐席辅助链接失败');
|
|
|
- }
|
|
|
-};
|
|
|
-// 捷通华声链接成功
|
|
|
-const jths_connected = () => {
|
|
|
- socket.value.send(
|
|
|
- JSON.stringify({ id: '', type: 1, from: jths_uid.value, to: 'sys', timestamps: new Date().getTime(), body: jths_userName.value })
|
|
|
- );
|
|
|
- socket.value.send(
|
|
|
- JSON.stringify({
|
|
|
- id: '',
|
|
|
- type: 8,
|
|
|
- from: jths_uid.value,
|
|
|
- to: jths_trans.value,
|
|
|
- timestamps: new Date().getTime(),
|
|
|
- body: 'subscribe',
|
|
|
- })
|
|
|
- );
|
|
|
- socket.value.send(
|
|
|
- JSON.stringify({
|
|
|
- id: '',
|
|
|
- type: 8,
|
|
|
- from: jths_uid.value,
|
|
|
- to: jths_notice.value,
|
|
|
- timestamps: new Date().getTime(),
|
|
|
- body: 'subscribe',
|
|
|
- })
|
|
|
- );
|
|
|
- console.log('坐席辅助连接成功', getNowDateTime());
|
|
|
- ElMessage.success('坐席辅助连接成功');
|
|
|
- const name: string = `捷通华声的websocket链接成功`;
|
|
|
- const remark: string = `捷通华声的websocket链接成功`;
|
|
|
- const request = {
|
|
|
- creationTime: new Date(),
|
|
|
- name,
|
|
|
- remark,
|
|
|
- executeUrl: import.meta.env.VITE_VOICE_ASSISTANT_SOCKET_URL,
|
|
|
- };
|
|
|
- submitLogFn(request);
|
|
|
-};
|
|
|
-// 捷通华声推送消息
|
|
|
-const jths_receive = (ws: any, message: any) => {
|
|
|
- try {
|
|
|
- const data = JSON.parse(message.data);
|
|
|
- const toTransfer = jths_trans.value;
|
|
|
- const toNoticer = jths_notice.value;
|
|
|
- if (data.to === toTransfer) {
|
|
|
- // 判断当前转写消息是否是发送给当前用户的
|
|
|
- mittBus.emit('wsReceive', message);
|
|
|
- }
|
|
|
- if (data.to === toNoticer) {
|
|
|
- // 推送消息
|
|
|
- mittBus.emit('wsNotice', message);
|
|
|
- }
|
|
|
- } catch (e) {
|
|
|
- return;
|
|
|
- }
|
|
|
-};
|
|
|
-// 捷通华声链接错误
|
|
|
-const jths_error = () => {
|
|
|
- console.log('捷通华声链接错误');
|
|
|
-};
|
|
|
-// 捷通华声链接断开
|
|
|
-const jths_disconnected = () => {
|
|
|
- const name: string = `捷通华声的websocket链接断开`;
|
|
|
- const remark: string = `捷通华声的websocket链接断开`;
|
|
|
- const request = {
|
|
|
- creationTime: new Date(),
|
|
|
- name,
|
|
|
- remark,
|
|
|
- executeUrl: import.meta.env.VITE_VOICE_ASSISTANT_SOCKET_URL,
|
|
|
- };
|
|
|
- submitLogFn(request);
|
|
|
-};
|
|
|
-// 坐席辅助关闭
|
|
|
-const seatAssistOff = () => {
|
|
|
- console.log('坐席辅助:手动关闭,不再重连', getNowDateTime());
|
|
|
- if (socket.value) {
|
|
|
- socket.value.close();
|
|
|
- socket.value = null;
|
|
|
- }
|
|
|
-};
|
|
|
-// 重置状态和清除定时器
|
|
|
-const resetState = () => {
|
|
|
- useTelStatusStore.resetState();
|
|
|
- removeTimerOnDuty(); // 移除签入时长定时器
|
|
|
- removeTimer(); // 移除通话计时器
|
|
|
- clearTimeout(talkDealTimer.value); // 清除话后整理定时器
|
|
|
- clearInterval(pingTimer.value); // 清除心跳定时器
|
|
|
- clearInterval(onDutyTimer.value); // 清除签入时长定时器
|
|
|
- clearInterval(talkTimer.value); // 清除通话时长定时器
|
|
|
- state.loading = false;
|
|
|
-};
|
|
|
-// 获取当前分机状态
|
|
|
-const isCallHold = ref(false); // 是否是保持中
|
|
|
-const isAcw = ref(false); // 是否是话后整理中
|
|
|
-const isTelMute = ref(false); // 是否是静音中
|
|
|
-const getTelStatusFn = async () => {
|
|
|
- try {
|
|
|
- const { result } = await getTelStatus();
|
|
|
- currentTel.value.password = result.telPwd;
|
|
|
- currentTel.value.telNo = result.telNo;
|
|
|
- currentTel.value.queue = result.queueId; // 呼入分机组
|
|
|
- currentTel.value.telModel = result.telModel; // 1:普通模式 2:呼出模式
|
|
|
- currentTel.value.queueCallOut = result.queueCallOut; // 呼出分机组
|
|
|
- startDutyTimer(result.second); // 开启计时 签入时长
|
|
|
- isRest.value = result.isRest;
|
|
|
- isCallHold.value = result.isCallHold;
|
|
|
- isAcw.value = result.isCallEndArrange; // 是否话后整理中
|
|
|
- isTelMute.value = result.isTelMute; // 是否静音中
|
|
|
- } catch (e) {
|
|
|
- console.log(e, getNowDateTime());
|
|
|
- }
|
|
|
-};
|
|
|
-// 刷新页面呼叫中心链接
|
|
|
-const callCenterConnect = async () => {
|
|
|
- state.loading = true;
|
|
|
- try {
|
|
|
- // 查询当前用户状态
|
|
|
- const { result } = await getTelStatus();
|
|
|
- if (result) {
|
|
|
- // 查询到当前用户的状态
|
|
|
- // 刷新页面
|
|
|
- currentTel.value.password = result.telPwd;
|
|
|
- currentTel.value.telNo = result.telNo;
|
|
|
- currentTel.value.queue = result.queueId; // 呼入分机组
|
|
|
- currentTel.value.telModel = result.telModel; // 1:普通模式 2:呼出模式
|
|
|
- currentTel.value.queueCallOut = result.queueCallOut; // 呼出分机组
|
|
|
- websocket_connect(); //开启消息监听
|
|
|
- startDutyTimer(result.second); // 开启计时 签入时长
|
|
|
- isCallHold.value = result.isCallHold;
|
|
|
- isRest.value = result.isRest;
|
|
|
- isAcw.value = result.isCallEndArrange; // 是否话后整理中
|
|
|
- isTelMute.value = result.isTelMute; // 是否静音中
|
|
|
- state.loading = false;
|
|
|
- } else {
|
|
|
- state.loading = false;
|
|
|
- }
|
|
|
- } catch (e) {
|
|
|
- // 重置所有状态
|
|
|
- resetState();
|
|
|
- state.loading = false;
|
|
|
- }
|
|
|
-};
|
|
|
-// 获取小休原因
|
|
|
-const getReason = async () => {
|
|
|
- try {
|
|
|
- // 查询小休原因
|
|
|
- const { result } = await telRestBaseData();
|
|
|
- state.restReasonOptions = result?.restReason ?? [];
|
|
|
- } catch (err) {
|
|
|
- console.log(err);
|
|
|
- }
|
|
|
-};
|
|
|
-// 获取白名单列表
|
|
|
-const getWithList = async () => {
|
|
|
- try {
|
|
|
- const { result } = await queryBlacklist({ SpecialFlag: 1 });
|
|
|
- state.whiteList = result;
|
|
|
- } catch (err) {
|
|
|
- console.log(err);
|
|
|
- }
|
|
|
-};
|
|
|
-// 查询今日等待数量
|
|
|
-const getTodayWaitNumFn = async () => {
|
|
|
- try {
|
|
|
- const { result } = await getTodayWaitNum();
|
|
|
- todayWait.value = result;
|
|
|
- } catch (err) {
|
|
|
- console.log(err);
|
|
|
- }
|
|
|
-};
|
|
|
-// const visibility = useDocumentVisibility();
|
|
|
-// watch(visibility, (current, previous) => {
|
|
|
-// if (current === 'visible' && previous === 'hidden') {
|
|
|
-// console.log('欢迎回来')
|
|
|
-// }
|
|
|
-// })
|
|
|
-// 今日等待
|
|
|
-const todayWait = ref(0);
|
|
|
-const todayWaitValue = useTransition(todayWait, {
|
|
|
- duration: 500,
|
|
|
-});
|
|
|
-// 当前等待
|
|
|
-const currentWait = ref<number>(0);
|
|
|
-const currentWaitValue = useTransition(currentWait, {
|
|
|
- duration: 500,
|
|
|
-});
|
|
|
-onMounted(async () => {
|
|
|
- await getReason(); // 获取小休原因
|
|
|
- await resetState(); // 先重置状态
|
|
|
- await getTelsLists(); // 查询所有分机
|
|
|
- await getThreeWayAndTransfer(); // 查询转接和三方
|
|
|
- await callCenterConnect(); // 呼叫中心链接
|
|
|
- await getTodayWaitNumFn(); // 查询今日等待数量
|
|
|
- await signalRStart(); //开启消息监听
|
|
|
- // 加入分组
|
|
|
- await signalR.joinGroup('CallCenter');
|
|
|
- signalR.SR?.on('ToDayWaitNum', (data: number) => {
|
|
|
- todayWait.value = data;
|
|
|
- });
|
|
|
- signalR.SR?.on('CurrentWaitNum', (data: number) => {
|
|
|
- currentWait.value = data;
|
|
|
- });
|
|
|
-});
|
|
|
-onBeforeUnmount(() => {
|
|
|
- signalR.SR.off('RestApplyPass');
|
|
|
- signalR.SR.off('ToDayWaitNum');
|
|
|
- signalR.SR.off('CurrentWaitNum');
|
|
|
-});
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped lang="scss">
|
|
|
-.seizeSeat-box {
|
|
|
- display: none;
|
|
|
-}
|
|
|
-.phoneControls {
|
|
|
- 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 {
|
|
|
- text-align: left;
|
|
|
- width: 150px;
|
|
|
-
|
|
|
- .dutyOn_status {
|
|
|
- color: var(--el-color-primary);
|
|
|
- font-weight: normal;
|
|
|
- }
|
|
|
- span {
|
|
|
- display: inline-block;
|
|
|
- width: 80px;
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 按钮列表
|
|
|
- .btn-container {
|
|
|
- display: flex;
|
|
|
- width: calc(100% - 120px);
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .item {
|
|
|
- text-align: center;
|
|
|
- cursor: pointer;
|
|
|
- width: 100%;
|
|
|
- user-select: none;
|
|
|
- height: calc(100% + 20px);
|
|
|
- img {
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- padding-top: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- span {
|
|
|
- margin-top: 5px;
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
-
|
|
|
- &.disabled {
|
|
|
- cursor: not-allowed;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .active {
|
|
|
- &:hover {
|
|
|
- color: var(--hotline-color-white);
|
|
|
- background-image: url('@/assets/images/phoneControls/active.png');
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .wait-box {
|
|
|
- width: 120px;
|
|
|
- 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);
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
-<style lang="scss">
|
|
|
-.el-popover.hangup-popover {
|
|
|
- .hangup-container {
|
|
|
- display: flex;
|
|
|
- flex-wrap: nowrap;
|
|
|
- .hangup-item {
|
|
|
- text-align: center;
|
|
|
- width: 120px;
|
|
|
- border-right: 1px solid var(--el-border-color-darker);
|
|
|
- &:last-child {
|
|
|
- border-right: 0;
|
|
|
- }
|
|
|
- &-phoneNumber {
|
|
|
- padding-top: 4px;
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|