1011 lines
32 KiB
Vue
1011 lines
32 KiB
Vue
<template>
|
|
<div style=" height: 100%;">
|
|
<div class="layout-center-wrap flex-column">
|
|
<!-- 上部数据 -->
|
|
<div class="layout-center-top-wrap flex-row justify-content-between">
|
|
<div class="top-wrap-title flex-row justify-content-between"></div>
|
|
<div class="top-wrap-btn-left flex-row justify-content-between">
|
|
<div class="flex-row justify-content-between align-items-center mr-16">
|
|
<el-button class="bg-F2F3F5" icon="el-icon-arrow-left" circle></el-button>
|
|
<div class="ml-16 mr-16 flex-row justify-content-between align-items-center">
|
|
<div class="mr-8 f16">{{ baseInfo.debtorEntityList.find(item => item.role == 'DEBTOR').name }}</div>
|
|
<div class="mr-8">
|
|
<el-tag size="small" type="warning">{{ baseInfo.debtorEntityList.find(item => item.role == 'DEBTOR').addr }}</el-tag>
|
|
</div>
|
|
<div class="mr-8 f16 color-FF7D00"><i class="el-icon-warning"></i></div>
|
|
<div class="f16 color-165DFF"><i class="el-icon-success"></i></div>
|
|
</div>
|
|
|
|
<el-button class="bg-F2F3F5" icon="el-icon-arrow-right" circle></el-button>
|
|
</div>
|
|
|
|
<el-popover
|
|
placement="top"
|
|
width="500"
|
|
v-model="singlesmsvisible"
|
|
title="发送短信"
|
|
trigger="click">
|
|
<singlesmsPopover :caseId="caseId" :singlesmsvisible.sync="singlesmsvisible"/>
|
|
<el-button slot="reference" type="warning" icon="el-icon-message" circle></el-button>
|
|
</el-popover>
|
|
|
|
<div class="wrap-btn-left-dial pl-22 pr-24 f14 flex-row justify-content-between ml-16">
|
|
<div class="flex-row justify-content-between align-items-center">
|
|
<div v-if="calling" class="mr-8 f16 color-F53F3F cursor-p" @click="pauseTimer()"><i class="el-icon-video-pause"></i></div>
|
|
<div v-else class="mr-8 f16 color-F53F3F cursor-p" @cilck="startCall()"><i class="el-icon-video-play"></i></div>
|
|
<div class="mr-8 cursor-p" v-if="calling" @click="pauseTimer()">暂停拨打</div>
|
|
<div class="mr-8 cursor-p" v-else @cilck="startCall()">开始拨打</div>
|
|
<div class="mr-8 f12 color-000" v-if="calling">{{formattedTime || '00:00'}}</div>
|
|
<div class="mr-8 f20 cursor-p" v-if="calling" @click="hungUp()"><i class="el-icon-phone-outline"></i></div>
|
|
<div class="mr-8 f20 cursor-p" v-if="calling && !isMute" @click="muteMic()"><i class="el-icon-microphone"></i></div>
|
|
<div class="mr-8 f20 cursor-p" v-if="calling && isMute" @click="unmuteMic()"><i class="el-icon-turn-off-microphone"></i></div>
|
|
<div class="mr-8 ai-logo-img" v-if="calling"></div>
|
|
</div>
|
|
<div class="flex-row justify-content-between align-items-center f14">
|
|
<el-popover
|
|
placement="bottom"
|
|
width="1000"
|
|
trigger="click">
|
|
<div>
|
|
<div class="f16 p-16 border-b-solid-lighter-1">{{queue ? '智能外呼案件列表' : '案件列表'}}</div>
|
|
<div class="p-16">
|
|
<el-table ref="queueTable" :data="queueList" style="width: 100%" highlight-current-row>
|
|
<el-table-column type="index" label="序号" width="50"></el-table-column>
|
|
<el-table-column prop="contact" label="被申请人姓名" width="150"></el-table-column>
|
|
<el-table-column prop="caseNo" label="案件编号"></el-table-column>
|
|
<el-table-column prop="phone" label="电话号码" width="150"></el-table-column>
|
|
<el-table-column prop="moneyAmount" label="逾期金额" width="150"></el-table-column>
|
|
<el-table-column label="操作" width="150" v-if="queue">
|
|
<template slot-scope="scope">
|
|
{{scope.row.index}}
|
|
<div v-if="scope.row.index === index" style="color:#4080FF">正在调解中...</div>
|
|
<div v-else-if="scope.row.status.code === 1" style="color:#BC6F60">未拨打<i class="el-icon-phone-outline el-icon--right"></i></div>
|
|
<div v-else style="color:#E5E6EB">已拨打</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
<div slot="reference" class="flex-row justify-content-between align-items-center mr-24 cursor-p">
|
|
<div class="mr-8 f16"><i class="el-icon-s-operation"></i></div>
|
|
<div>{{queue ? '队列' : '列表'}} <span class="color-000">
|
|
{{queue ? callingInfoData.countInit : ''}}
|
|
</span></div>
|
|
</div>
|
|
</el-popover>
|
|
<div v-if="queue" class="flex-row justify-content-between align-items-center f14">
|
|
<div class="mr-24">已拨打 <span class="color-000">{{callingInfoData.countCall}}</span></div>
|
|
<div class="mr-24">已接通 <span class="color-000">{{callingInfoData.countOk}}</span></div>
|
|
<div>未接通 <span class="color-000">{{callingInfoData.countFail}}</span></div>
|
|
</div>
|
|
<div v-else class="flex-row justify-content-between align-items-center f14">
|
|
<div class="mr-24">今日已拨打 <span class="color-000">{{todayCountData.countCall}}</span></div>
|
|
<div class="mr-24">今日已接通 <span class="color-000">{{todayCountData.countOk}}</span></div>
|
|
<div>今日未接通 <span class="color-000">{{todayCountData.countFail}}</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-row justify-content-between">
|
|
<el-button icon="el-icon-setting" circle></el-button>
|
|
<el-button icon="el-icon-switch-button" circle @click="handleBack"></el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 中间数据 -->
|
|
<LayoutContentNew :caseId="caseId" />
|
|
|
|
</div>
|
|
|
|
<div class="flex-row align-items-center pl-24 pr-24 btn-group-controls">
|
|
<div class="pt-16 pb-16 flex-row justify-content-between align-items-center btn-group-real-time">
|
|
<el-badge :value="3" class="item">
|
|
<i class="f24 el-icon-phone cursor-pointer color-52ABF2"></i>
|
|
</el-badge>
|
|
<el-badge :value="3" class="item">
|
|
<i class="f24 el-icon-video-camera cursor-pointer color-52ABF2"></i>
|
|
</el-badge>
|
|
</div>
|
|
<div class="ml-24 mr-24 btn-group-interval"></div>
|
|
<div class="flex-row justify-content-between align-items-center btn-group-processing-event">
|
|
|
|
<div class="flex-row justify-content-between align-items-center cursor-pointer bottom-case-btn" @click="visiblePopover={caseId: caseId}">
|
|
<i class="f24 el-icon-video-camera color-4E5969"></i>
|
|
<div class="pl-4 f14">预约</div>
|
|
</div>
|
|
|
|
<div class="flex-row justify-content-between align-items-center cursor-pointer bottom-case-btn">
|
|
<i class="f24 el-icon-document color-4E5969"></i>
|
|
<div class="pl-4 f14">协议</div>
|
|
</div>
|
|
|
|
<el-popover
|
|
placement="top"
|
|
width="500"
|
|
v-model="singleofficevisible"
|
|
title="发起签字"
|
|
trigger="click">
|
|
<singleofficeWritPopover :caseId="caseId" :singleofficevisible.sync="singleofficevisible"/>
|
|
<span slot="reference" class="flex-row justify-content-between align-items-center cursor-pointer bottom-case-btn">
|
|
<i class="f24 el-icon-document-remove color-4E5969"></i>
|
|
<a class="pl-4 f14">签字</a>
|
|
</span>
|
|
</el-popover>
|
|
|
|
|
|
<el-popover
|
|
placement="top"
|
|
width="500"
|
|
v-model="singlesealvisible"
|
|
title="发起签章"
|
|
trigger="click">
|
|
<singleofficeSealPopover :caseId="caseId" :singlesealvisible.sync="singlesealvisible"/>
|
|
<span slot="reference" class="flex-row justify-content-between align-items-center cursor-pointer bottom-case-btn">
|
|
<i class="f24 el-icon-s-check color-4E5969"></i>
|
|
<a class="pl-4 f14">签章</a>
|
|
</span>
|
|
</el-popover>
|
|
|
|
<el-popover
|
|
placement="top"
|
|
width="500"
|
|
v-model="singledeliveryvisible"
|
|
title="发起送达"
|
|
trigger="click">
|
|
<singleofficeDeliveryPopover :caseId="caseId" :singledeliveryvisible.sync="singledeliveryvisible"/>
|
|
<span slot="reference" class="flex-row justify-content-between align-items-center cursor-pointer bottom-case-btn">
|
|
<i class="f24 el-icon-s-claim color-4E5969"></i>
|
|
<a class="pl-4 f14">送达</a>
|
|
</span>
|
|
</el-popover>
|
|
|
|
|
|
<div class="flex-row justify-content-between align-items-center cursor-pointer bottom-case-btn">
|
|
<i class="f24 el-icon-wallet color-4E5969"></i>
|
|
<div class="pl-4 f14">类案</div>
|
|
</div>
|
|
<div class="flex-row justify-content-between align-items-center cursor-pointer bottom-case-btn">
|
|
<i class="f24 el-icon-document-checked color-4E5969"></i>
|
|
<div class="pl-4 f14">办结</div>
|
|
</div>
|
|
<div class="flex-row justify-content-between align-items-center cursor-pointer bottom-case-btn" @click="handleChangeMediation(4)">
|
|
<i class="f24 el-icon-document-delete color-4E5969"></i>
|
|
<div class="pl-4 f14">失败</div>
|
|
</div>
|
|
<div class="flex-row justify-content-between align-items-center cursor-pointer bottom-case-btn" @click="handleChangeMediation(5)">
|
|
<i class="f24 el-icon-bangzhu color-4E5969"></i>
|
|
<div class="pl-4 f14">成功</div>
|
|
</div>
|
|
<div class="flex-row justify-content-between align-items-center cursor-pointer bottom-case-btn">
|
|
<i class="f24 el-icon-user-solid color-4E5969"></i>
|
|
<div class="pl-4 f14">帮扶</div>
|
|
</div>
|
|
|
|
<el-popover
|
|
placement="top"
|
|
width="400"
|
|
v-model="singlejointlyvisible"
|
|
title="案件协办"
|
|
trigger="click">
|
|
<singleJointlyPopover :caseId="caseId" :singlejointlyvisible.sync="singlejointlyvisible" @handleSubmit="getCaseInfoById()"/>
|
|
<span slot="reference" class="flex-row justify-content-between align-items-center cursor-pointer bottom-case-btn">
|
|
<i class="f24 el-icon-s-management color-4E5969"></i>
|
|
<a class="pl-4 f14">协办</a>
|
|
</span>
|
|
</el-popover>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<caseVideoReservationDialog v-if="visiblePopover" :visible-popover.sync="visiblePopover" />
|
|
|
|
<!-- 视频房间 -->
|
|
<VideoRoom v-if="VideoCallDialog" :eventDialog.sync="VideoCallDialog" />
|
|
|
|
</div>
|
|
|
|
</template>
|
|
<script>
|
|
import api from "@/services/caseManagement";
|
|
export default {
|
|
components: {
|
|
caseVideoReservationDialog: () => import('./caseVideoReservationDialog'),//
|
|
singleofficeWritPopover: () => import('./singleofficeWritPopover.vue'),//发起签字
|
|
singleofficeSealPopover: () => import('./singleofficeSealPopover.vue'),//发起签章
|
|
singleofficeDeliveryPopover: () => import('./singleofficeDeliveryPopover.vue'),//发起送达
|
|
singleJointlyPopover: () => import('./singleJointlyPopover.vue'),//案件协办
|
|
singlesmsPopover: () => import('./singlesmsPopover.vue'),//发送短信
|
|
VideoRoom: () => import('./VideoRoom'),
|
|
LayoutContentNew: () => import('./LayoutContentNew'),//调解数据
|
|
},
|
|
data() {
|
|
return {
|
|
singlesmsvisible:false,
|
|
singlejointlyvisible:false,
|
|
visiblemediatRecord:false,
|
|
singledeliveryvisible:false,
|
|
singlesealvisible:false,
|
|
singleofficevisible:false,
|
|
eventDialog: {caseId: ''},
|
|
leftActive: 1,
|
|
rightActive: 1,
|
|
mediationRecord: [],//调解记录
|
|
baseInfo: {},//基本信息
|
|
obligorInfo: [],//债务人信息
|
|
caseId: '',//案件id
|
|
// 联系人
|
|
contactAddObj: {},
|
|
contactAddFlag: false,
|
|
contactObj: {},
|
|
contactUpdate: false,
|
|
relationOptions: [{label: '本人', value: '本人'}, {label: '父母', value: '父母'}, {label: '配偶', value: '配偶'},
|
|
{label: '子女', value: '子女'}, {label: '其他', value: '其他'}, {label: '朋友', value: '朋友'}, {
|
|
label: '兄弟',
|
|
value: '兄弟'
|
|
},
|
|
{label: '同事', value: '同事'}, {label: '同学', value: '同学'}],
|
|
// 还款计划
|
|
repaymentObj: {
|
|
type: 'ALL'
|
|
},
|
|
RepaymentOptions: [{label: '一次性还款', value: 'ALL'}, {
|
|
label: '全部分期',
|
|
value: 'STAGES'
|
|
}, {label: '部分先还加分期', value: 'MIX'}, {label: '其他', value: 'OTHER'}],
|
|
rulesClientRepayment: {
|
|
type: [
|
|
{required: true, message: '请选择还款方式', trigger: 'change',},
|
|
],
|
|
totalAmount: [
|
|
{required: true, message: '请输入还款金额', trigger: 'change',},
|
|
{
|
|
pattern: /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0.\d{1,2}$/,
|
|
message: '请输入2位小数金额',
|
|
trigger: ['blur', 'change']
|
|
}
|
|
],
|
|
paybackDate: [
|
|
{required: true, message: '请选择还款截止日期', trigger: 'change',},
|
|
],
|
|
stagesDay: [
|
|
{required: true, message: '请选择每期还款日期', trigger: 'change',},
|
|
],
|
|
partAmount: [
|
|
{required: true, message: '请输入分期前偿还金额 ', trigger: 'change',},
|
|
{
|
|
pattern: /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0.\d{1,2}$/,
|
|
message: '请输入2位小数金额',
|
|
trigger: ['blur', 'change']
|
|
}
|
|
],
|
|
partDate: [
|
|
{required: true, message: '请选择分期前偿还日期', trigger: 'change',},
|
|
],
|
|
stagesNum: [
|
|
{required: true, message: '请输入分期期数', trigger: 'change',},
|
|
{pattern: /^[1-9]\d*$/, message: '只能输入正整数', trigger: ['blur', 'change']}
|
|
],
|
|
},
|
|
|
|
communicationRecord: [],
|
|
|
|
visiblePopover: null,
|
|
VideoCallDialog: null,
|
|
mediaterecordpm:{
|
|
caseId:'',
|
|
linkedWay:''
|
|
},
|
|
materialTypeOptions: [
|
|
{label:'承诺账户',value:'1'},{label:'重点账户',value:'2'},{label:'拒联账户',value:'3'},{label:'已结清客户',value:'4'},
|
|
{label:'疑难账户',value:'5'},{label:'失联账户',value:'6'},{label:'半失联账户',value:'7'},{label:'部分还款账户',value:'8'},
|
|
{label:'适诉案件',value:'9'},{label:'可联账户',value:'10'},{label:'投诉倾向客户',value:'11'},{label:'分期客户',value:'12'},
|
|
{label:'其他/无标签',value:'13'}
|
|
],
|
|
|
|
queue: false,
|
|
queueList: [],
|
|
phoneNumber: '13982024318',
|
|
sessionId: '',
|
|
index: 0, //当前通话的索引
|
|
calling: false, // 是否在通话
|
|
isMute: false, //是否静音
|
|
isPause: false, //是否暂停
|
|
|
|
|
|
callingInfoData: {
|
|
countInit: 0,
|
|
countOk: 0,
|
|
countFail: 0,
|
|
countCall: 0,
|
|
},
|
|
todayCountData: {
|
|
countInit: 0,
|
|
countOk: 0,
|
|
countFail: 0,
|
|
countCall: 0,
|
|
},
|
|
startTime: 0,
|
|
elapsedTime: 0,
|
|
timerInterval: null,
|
|
isRunning: false,
|
|
};
|
|
},
|
|
computed: {
|
|
// 左侧
|
|
leftContentHeight() {
|
|
let oh = document.documentElement.clientHeight;
|
|
return oh - 100
|
|
},
|
|
// 获取右侧滚动高度
|
|
rightContentHeight() {
|
|
let oh = document.documentElement.clientHeight;
|
|
return oh - 57
|
|
},
|
|
// 获取抽屉drawer的内容高度
|
|
OfficecontentHeight() {
|
|
let oh = document.documentElement.clientHeight;
|
|
return oh - 185
|
|
},
|
|
CommunicationcontentHeight() {
|
|
let oh = document.documentElement.clientHeight;
|
|
return oh - 57 - 48 - 38 -308
|
|
},
|
|
MediationrecordHeight() {
|
|
let oh = document.documentElement.clientHeight;
|
|
return oh - 57 - 128
|
|
},
|
|
formattedTime() {
|
|
const totalSeconds = Math.floor(this.elapsedTime / 1000);
|
|
const minutes = Math.floor(totalSeconds / 60);
|
|
const seconds = totalSeconds % 60;
|
|
return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
|
|
},
|
|
},
|
|
async created() {
|
|
|
|
if(this.$route.query.caseId != null && this.$route.query.caseId != undefined)
|
|
{ || null
|
|
this.queue = this.$route.query.queue || null
|
|
await this.getCaseInfoById();//获取详情
|
|
}
|
|
|
|
|
|
this.callingTodayCount() //今日通话次数
|
|
|
|
if (this.queue) {
|
|
await this.callingQueue() //呼叫队列
|
|
await this.callingInfo() //呼叫统计
|
|
}
|
|
const that = this
|
|
window.tccc.on('sessionEnded', (options) => {
|
|
console.log('监听挂断事件', options)
|
|
that.calling = false
|
|
that.resetTimer()
|
|
const that = this.nextCall()
|
|
})
|
|
},
|
|
beforeDestroy() {
|
|
// if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
|
|
// clearInterval(this.timer); //关闭
|
|
// }
|
|
},
|
|
methods: {
|
|
debtorEntityCardNo(datalist, len) {
|
|
let datacardno = ''
|
|
let dataphone = ''
|
|
datalist.forEach((item, index) => {
|
|
if (index == 0) {
|
|
datacardno = item.cardNo
|
|
dataphone = item.phone
|
|
} else {
|
|
datacardno += ',' + item.cardNo
|
|
dataphone += ',' + item.phone
|
|
}
|
|
})
|
|
|
|
return {cardNo: datacardno.substring(0, len), phone: dataphone.substring(0, len)};
|
|
},
|
|
// 获取详情
|
|
async getCaseInfoById() {
|
|
await api.getCaseInfoById(this.$route.query.caseId).then(res => {
|
|
if (!res.code) {
|
|
this.baseInfo = res
|
|
|
|
if(res.jointDebt == 1){
|
|
// 有共债 mainCaseId
|
|
this.caseId = res.mainCaseId.toString()
|
|
}
|
|
else
|
|
{
|
|
this.caseId = res.id.toString()
|
|
}
|
|
|
|
}
|
|
this.eventDialog.caseId = this.caseId
|
|
this.getmediate_record()
|
|
})
|
|
},
|
|
// 获取上一件案件
|
|
getFrontCaseById() {
|
|
if (!this.$clickThrottle()) {
|
|
return
|
|
}//防止重复点击
|
|
api.getFrontCaseById({id: this.caseId}).then(res => {
|
|
if (!res.code) {
|
|
// let caseChangeData = res
|
|
this.detailData(res)
|
|
}
|
|
})
|
|
},
|
|
// 获取下一件案件
|
|
getNextCaseById() {
|
|
if (!this.$clickThrottle()) {
|
|
return
|
|
}//防止重复点击
|
|
api.getNextCaseById({id: this.caseId}).then(res => {
|
|
if (!res.code) {
|
|
this.detailData(res)
|
|
}
|
|
})
|
|
},
|
|
handleBack() {
|
|
// this.$route.query.sourcePage == 'mediationManagement'
|
|
this.$router.push('/mediation-management')
|
|
},
|
|
// 获取调解记录
|
|
getmediate_record() {
|
|
this.mediaterecordpm.caseId = this.caseId
|
|
api.mediate_record_list(this.mediaterecordpm).then(res => {
|
|
if (!res.code) {
|
|
this.communicationRecord = res
|
|
}
|
|
})
|
|
},
|
|
// 调解成功或者失败
|
|
handleChangeMediation(resultStatus){
|
|
let data={
|
|
id:this.caseId,
|
|
resultStatus:resultStatus
|
|
}
|
|
let resultmsg = '成功'
|
|
if(resultStatus == 4){resultmsg = '失败'}
|
|
this.$confirm("请确定是否将案件标记为"+resultmsg+"?", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
}).then(() => {
|
|
if(!this.$clickThrottle()) { return }//防止重复点击
|
|
api.updateResultStatus(data).then(res => {
|
|
this.getCaseInfoById()
|
|
this.$message({message: '案件标记成功', type: "success",customClass:'messageZindex'})
|
|
thiis.getCaseInfoById()
|
|
})
|
|
|
|
}).catch(() => {});
|
|
|
|
|
|
|
|
},
|
|
async callingInfo() {
|
|
try {
|
|
let res = await api.callingInfo({})
|
|
this.callingInfoData = res
|
|
} catch (err) {}
|
|
},
|
|
async callingTodayCount() {
|
|
try {
|
|
let res = await api.callingTodayCount({})
|
|
this.todayCountData = res
|
|
} catch (err) {}
|
|
},
|
|
// 当前呼叫队列
|
|
callingQueue() {
|
|
api.callingQueue({}).then(res => {
|
|
this.queueList = res.queue || []
|
|
this.caseId = String(res.queue[0].caseId) || ''
|
|
this.getCaseInfoById()
|
|
this.getmediate_record()
|
|
})
|
|
},
|
|
startCall () {
|
|
console.log('queueList==================',this.queueList)
|
|
for (let i=0; i < this.queueList.length; i++) {
|
|
if (this.queueList[i].status.code === 1) {
|
|
console.log('定位到可拨打的案件',i)
|
|
this.index = i
|
|
this.startOutboundCall()
|
|
return
|
|
}
|
|
}
|
|
},
|
|
// 电话呼出
|
|
async startOutboundCall() {
|
|
// this.phoneNumber = this.queueList[this.index].phone
|
|
this.calling = true
|
|
console.log('进入呼叫电话：', this.phoneNumber)
|
|
try {
|
|
let data = await window.tccc.Call.startOutboundCall({phoneNumber: this.phoneNumber})
|
|
this.sessionId = data.sessionId
|
|
console.log('呼叫成功', data)
|
|
this.callingSuccess()
|
|
this.startTimer()
|
|
} catch (err) {
|
|
this.$message.error('呼叫失败' + err.message)
|
|
console.log('呼叫失败',err.message)
|
|
this.callingFail()
|
|
// 呼叫失败
|
|
} finally {}
|
|
},
|
|
// 呼叫成功
|
|
async callingSuccess () {
|
|
try {
|
|
let res = await api.callingSuccess({caseId: this.caseId})
|
|
} catch (err) { }
|
|
},
|
|
// 呼叫失败
|
|
async callingFail () {
|
|
try {
|
|
let res = await api.callingSuccess({caseId: this.caseId})
|
|
} catch (err) { }
|
|
},
|
|
// 挂断会话
|
|
async hungUp() {
|
|
try {
|
|
let res = await window.tccc.Call.hungUp({sessionId: this.sessionId})
|
|
this.calling = false
|
|
this.resetTimer()
|
|
this.nextCall()
|
|
} catch (err) {
|
|
// 挂断失败
|
|
} finally {}
|
|
},
|
|
// 自动拨打下一个会话
|
|
nextCall() {
|
|
if (!this.queue) return
|
|
if (this.isPause) {
|
|
this.isPause = false
|
|
this.calling = false
|
|
return
|
|
}
|
|
const that = this
|
|
that.index ++
|
|
setTimeout(() => {
|
|
if (that.index <= that.queueList.length - 1) {
|
|
that.caseId = String(that.queueList[that.index].caseId) || ''
|
|
that.getCaseInfoById()
|
|
that.getmediate_record()
|
|
that.startOutboundCall()
|
|
}
|
|
}, 5000)
|
|
},
|
|
// 删除会话
|
|
async deleteCall() {
|
|
try {
|
|
let data = await window.tccc.Call.deleteCall({sessionId: this.sessionId})
|
|
} catch (err) {
|
|
// 删除失败
|
|
} finally {
|
|
|
|
}
|
|
},
|
|
// 静音会话
|
|
async muteMic() {
|
|
try {
|
|
let data = await window.tccc.Call.muteMic({sessionId: this.sessionId})
|
|
this.isMute = true
|
|
this.$message.success('已静音')
|
|
} catch (err) {
|
|
// 静音失败
|
|
this.$message.error('静音失败')
|
|
}
|
|
},
|
|
// 取消静音
|
|
async unmuteMic() {
|
|
try {
|
|
let data = await window.tccc.Call.unmuteMic({sessionId: this.sessionId})
|
|
this.isMute = false
|
|
this.$message.success('已取消静音')
|
|
} catch (err) {
|
|
// 取消静音失败
|
|
this.$message.error('取消静音失败')
|
|
}
|
|
},
|
|
startTimer() {
|
|
if (!this.isRunning) {
|
|
this.startTime = Date.now() - this.elapsedTime;
|
|
this.timerInterval = setInterval(() => {
|
|
this.elapsedTime = Date.now() - this.startTime;
|
|
}, 1000);
|
|
this.isRunning = true;
|
|
}
|
|
},
|
|
pauseTimer() {
|
|
if (this.isRunning) {
|
|
this.isPause=true
|
|
clearInterval(this.timerInterval);
|
|
this.isRunning = false;
|
|
}
|
|
},
|
|
resetTimer() {
|
|
clearInterval(this.timerInterval);
|
|
this.elapsedTime = 0;
|
|
this.isRunning = false;
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.ai-logo-img{
|
|
width: 29px;
|
|
height: 29px;
|
|
background: url('~@/assets/image/ai-logo.png') no-repeat;
|
|
background-size: 100%,100%;
|
|
}
|
|
|
|
.bg-F2F3F5{
|
|
background-color: #F2F3F5;
|
|
}
|
|
|
|
.btn-group-controls{
|
|
width: 864px;
|
|
height: 56px;
|
|
border-radius: 16px;
|
|
background-color: #fff;
|
|
position: fixed;
|
|
bottom: 20px;
|
|
left: calc(50% - 432px);
|
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
|
.btn-group-real-time{
|
|
width: 64px;
|
|
}
|
|
.btn-group-interval{
|
|
width: 1px;
|
|
height: 40px;
|
|
background-color: #C9CDD4;
|
|
}
|
|
.btn-group-processing-event{
|
|
width: calc(100% - 64px - 1px - 48px);
|
|
.bottom-case-btn:hover{
|
|
color: #BC6F60;
|
|
i{color: #BC6F60;}
|
|
}
|
|
}
|
|
}
|
|
|
|
.layout-center-wrap {
|
|
height: 100%;
|
|
font-size: 14px;
|
|
|
|
.layout-center-top-wrap {
|
|
padding: 8px 16px;
|
|
border-bottom: solid 1px #E5E6EB;
|
|
|
|
.top-wrap-title{
|
|
width: 223px;
|
|
height: 32px;
|
|
background: url('~@/assets/image/logo-tjs.png');
|
|
background-size: 100%,100%;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.top-wrap-btn-left{
|
|
//width: 55%;
|
|
min-width: 1034px;
|
|
.wrap-btn-left-dial{
|
|
background-color: #FFF2F0;
|
|
border-radius: 20px;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.layout-center-center-wrap {
|
|
|
|
height: 100%;
|
|
|
|
.background-color-F5F5F5 {
|
|
background-color: #F5F5F5;
|
|
}
|
|
|
|
.border-E5E6EB {
|
|
border: solid 1px #E5E6EB;
|
|
}
|
|
|
|
.width120px {
|
|
width: 140px;
|
|
}
|
|
|
|
.width180px {
|
|
width: 220px;
|
|
}
|
|
|
|
.width200px {
|
|
width: calc(50% - 320px);
|
|
}
|
|
|
|
.layout-center-left-wrap {
|
|
background: url('~@/assets/image/mediate/m-left-bg.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 540px;
|
|
height: 100%;
|
|
border-right: 1px solid var(--fill-3, #E5E6EB);
|
|
|
|
.layout-center-left1-wrap {
|
|
width: 80px;
|
|
height: 100%;
|
|
text-align: center;
|
|
|
|
.left-rbobot {
|
|
width: 100%;
|
|
height: 80px;
|
|
text-align: center;
|
|
margin: 30px 0 0 0;
|
|
|
|
img {
|
|
width: 64px;
|
|
}
|
|
}
|
|
|
|
.separation {
|
|
width: 50px;
|
|
margin: 15px 0 0 15px;
|
|
border-bottom: solid 1px #dedfe4;
|
|
}
|
|
|
|
.left-img-info {
|
|
margin-top: 15px;
|
|
width: 100%;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
|
|
img {
|
|
width: 48px;
|
|
margin-left: 15px;
|
|
}
|
|
|
|
a {
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
|
|
.left-img-info.active {
|
|
background: url('~@/assets/image/mediate/m-triangle.png') no-repeat;
|
|
background-size: 15px 30px;
|
|
background-position: 68px 10px;
|
|
}
|
|
|
|
.left-img-info:hover {
|
|
background: url('~@/assets/image/mediate/m-triangle.png') no-repeat;
|
|
background-size: 15px 30px;
|
|
background-position: 68px 10px;
|
|
}
|
|
}
|
|
|
|
.layout-center-left2-wrap {
|
|
width: 460px;
|
|
height: 100%;
|
|
background-color: #fff;
|
|
// border-radius: 25px 0px 0px 25px;
|
|
padding: 20px 30px;
|
|
|
|
|
|
.case-debt-info{
|
|
.descriptions-t{
|
|
.descriptions-t-title{
|
|
//margin-bottom: 5px;
|
|
}
|
|
.descriptions-t-item-l{
|
|
padding: 12px 10px;
|
|
text-align: right;
|
|
width: 40%;
|
|
}
|
|
.descriptions-t-item-r{
|
|
padding: 12px 10px;
|
|
text-align: left;
|
|
width: 60%;
|
|
}
|
|
.bgColor-F7F8FA{
|
|
background-color: #F7F8FA;
|
|
}
|
|
}
|
|
|
|
.case-debt-info-call{
|
|
padding: 12px 42px;
|
|
}
|
|
}
|
|
|
|
.case-contact-person{
|
|
.contact-person-type{
|
|
background-color: #F2F3F5;
|
|
padding:5px 15px;
|
|
border-radius: 8px;
|
|
margin: 0 5px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.case-detail-des {
|
|
border: solid 1px #E5E6EB;
|
|
padding: 10px 15px;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
|
|
span {
|
|
margin: 3px 0;
|
|
padding: 3px 10px;
|
|
// a:first-child{width: 120px;display: inline-block;text-align: right;}
|
|
}
|
|
|
|
span:nth-child(even) {
|
|
background-color: #F7F8FA;
|
|
}
|
|
|
|
.case-img {
|
|
width: 50px;
|
|
height: 50px;
|
|
text-align: center;
|
|
line-height: 50px;
|
|
|
|
img {
|
|
max-width: 50px;
|
|
max-height: 50px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.case-materials-person {
|
|
.case-detail-des {
|
|
i {
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.case-office-person {
|
|
|
|
.case-detail-des {
|
|
.case-img {
|
|
width: 55px;
|
|
height: 55px;
|
|
text-align: center;
|
|
line-height: 55px;
|
|
|
|
img {
|
|
max-width: 55px;
|
|
max-height: 55px;
|
|
}
|
|
}
|
|
|
|
i {
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.layout-center-right-wrap {
|
|
background: #F2F3FA;
|
|
// background: url('~@/assets/image/mediate/m-right-bg.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
width: calc(100% - 540px);
|
|
height: 100%;
|
|
.right-wrap-left{
|
|
width: 367px;
|
|
height: 100%;
|
|
}
|
|
|
|
.right-wrap-right{
|
|
width: calc(100% - 367px - 40px);
|
|
.timeline-layout{
|
|
.timeline-layout-w{
|
|
width: calc(50% - 8px);
|
|
.icon-bg{
|
|
width: 20px;
|
|
height: 20px;
|
|
// border-radius: 4px;
|
|
// color: #FFFFFF;
|
|
|
|
.callphone-icon{
|
|
background: url('~@/assets/image/mediate/callphone.png') no-repeat;
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
background-size: 100% 100%;
|
|
}
|
|
.callbackphone-icon{
|
|
background: url('~@/assets/image/mediate/callbackphone.png') no-repeat;
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
background-size: 100% 100%;
|
|
}
|
|
.nocallphone-icon{
|
|
background: url('~@/assets/image/mediate/nocallbackphone.png') no-repeat;
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.callvideo-icon{
|
|
background: url('~@/assets/image/mediate/callvideo.png') no-repeat;
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
background-size: 100% 100%;
|
|
}
|
|
.callwechat-icon{
|
|
background: url('~@/assets/image/mediate/WeChat.png') no-repeat;
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
// .icon-phone{
|
|
// background-color: #52ABF2;
|
|
// }
|
|
.icon-video{
|
|
background-color: #FF7D00;
|
|
}
|
|
.timeline-layout-w-records{
|
|
background-color: #F5F5F5;
|
|
border-radius: 4px;
|
|
padding: 8px 12px 12px 12px;
|
|
}
|
|
}
|
|
.timeline-layout-ai{
|
|
padding: 6px 16px;
|
|
border-radius: 4px;
|
|
background: linear-gradient(270deg, #F1F4FE 0%, #FFF2F8 100%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.right-wrap-side{
|
|
width: 40px;
|
|
height: 100%;
|
|
background-color: #F7F8FA;
|
|
}
|
|
|
|
//.case-communication-record {
|
|
// .btn-communication {
|
|
// padding: 5px 15px;
|
|
// border-radius: 8px;
|
|
// cursor: pointer;
|
|
// }
|
|
//
|
|
// .case-communication-cont {
|
|
// // background: ;
|
|
// padding: 20px;
|
|
// border-radius: 8px;
|
|
// margin-top: 15px;
|
|
// }
|
|
//}
|
|
//.case-office-record, .case-materials-record {
|
|
//
|
|
// span a {
|
|
// color: #C66A5B;
|
|
// margin-right: 13px;
|
|
// cursor: pointer;
|
|
// }
|
|
//
|
|
// span a:last-child {
|
|
// margin-right: 0;
|
|
// }
|
|
//}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
.cursor-p {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|