部分内容
This commit is contained in:
tdg930622
parent
7b7fbc4ffa
commit
be178b1cb4
@ -930,7 +930,7 @@ export default {
|
|||||||
.right-wrap-side{
|
.right-wrap-side{
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: #EEF1FE;
|
background-color: #F7F8FA;
|
||||||
}
|
}
|
||||||
|
|
||||||
//.case-communication-record {
|
//.case-communication-record {
|
||||||
|
|||||||
@ -4,10 +4,138 @@
|
|||||||
<div v-if="rightActive === 1">
|
<div v-if="rightActive === 1">
|
||||||
<div class="tab-content-title f16 f-weight600 pb-8">触达记录</div>
|
<div class="tab-content-title f16 f-weight600 pb-8">触达记录</div>
|
||||||
<el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
|
<el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
|
||||||
|
<el-timeline class="padding-2">
|
||||||
|
<el-timeline-item timestamp="2018/4/12" placement="top" type="primary">
|
||||||
|
<el-card shadow="never">
|
||||||
|
<div class="mb-8">09:36 李四上传还款凭证</div>
|
||||||
|
<div class="mb-8">09:33 李四对调解协议进行了电子签名</div>
|
||||||
|
</el-card>
|
||||||
|
</el-timeline-item>
|
||||||
|
<el-timeline-item timestamp="2018/4/3" placement="top" type="primary">
|
||||||
|
<el-card shadow="never">
|
||||||
|
<div>09:27 李四浏览了案件材料信息</div>
|
||||||
|
</el-card>
|
||||||
|
</el-timeline-item>
|
||||||
|
</el-timeline>
|
||||||
|
</el-scrollbar>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="rightActive === 2">
|
||||||
|
<div class="tab-content-title f16 f-weight600 pb-8">沟通记录</div>
|
||||||
|
<el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
|
||||||
|
<div class="timeline-layout pt-16">
|
||||||
|
<div class="timeline-layout-100">
|
||||||
|
<div class="flex-row justify-content-between">
|
||||||
|
<div class="flex-row">
|
||||||
|
<div>17:15:00</div>
|
||||||
|
<div class="pl-8 pr-8">
|
||||||
|
陈陈陈
|
||||||
|
</div>
|
||||||
|
<!-- 电话 -->
|
||||||
|
<div class="text-center icon-bg icon-phone">
|
||||||
|
<i class="callphone-icon"></i>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="text-center icon-bg icon-phone" v-if="itemrecord.linkedWay == 1">-->
|
||||||
|
<!-- <i v-if="itemrecord.callWay == 1" class="callphone-icon"></i>-->
|
||||||
|
<!-- <i v-if="itemrecord.callWay == 0 && itemrecord.linkedSituation != 1" class="callbackphone-icon"></i>-->
|
||||||
|
<!-- <i v-if="itemrecord.callWay == 0 && itemrecord.linkedSituation == 1" class="nocallphone-icon"></i>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- 视频 -->
|
||||||
|
<!-- <div class="text-center icon-bg icon-phone" v-if="itemrecord.linkedWay == 2">-->
|
||||||
|
<!-- <i class="callvideo-icon"></i>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- 微信 -->
|
||||||
|
<!-- <div class="text-center icon-bg icon-phone" v-if="itemrecord.linkedWay == 3">-->
|
||||||
|
<!-- <i class="callwechat-icon"></i>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
</div>
|
||||||
|
<span class="cursor-pointer"><i class="ml-8 f14 el-icon-edit"></i></span>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-layout-w-records mt-8 mb-8">
|
||||||
|
<div class="flex-row align-items-center">
|
||||||
|
<div>
|
||||||
|
<span>
|
||||||
|
陈继平 134****9447
|
||||||
|
<el-tag class="mr-8" size="small" effect="plain">本人</el-tag>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<el-tag size="small" effect="plain">重点客户</el-tag>
|
||||||
|
<!-- <div>-->
|
||||||
|
<!-- <span class="pr-8" v-for="(itemperson,index) in itemrecord.linkedPersonInfo" :key="index">-->
|
||||||
|
<!-- {{ itemperson.name}}-->
|
||||||
|
<!-- {{ itemrecord.linkedWay == 1 ? itemperson.phone :''}}-->
|
||||||
|
<!-- <el-tag class="mr-8" size="small" effect="plain" style="height: 22px;">{{itemperson.labelName}}</el-tag>-->
|
||||||
|
<!-- </span>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
|
||||||
|
<!-- <el-tag size="small" effect="plain" style="height: 22px;" v-if="itemrecord.mediateStatus != null">{{ materialTypeOptions.find(item => item.value == itemrecord.mediateStatus).label }}</el-tag>-->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 电话 -->
|
||||||
|
<div class="flex-row align-items-center pt-6">
|
||||||
|
<div >通话1秒</div>
|
||||||
|
<el-divider direction="vertical"></el-divider>
|
||||||
|
<div class="text-center cursor-pointer"><i class="f14 el-icon-video-play"></i> 播放录音</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div v-if="itemrecord.linkedWay == 1" class="flex-row align-items-center pt-6">-->
|
||||||
|
<!-- <div v-if="itemrecord.linkedType == 1">通话{{itemrecord.linkedDuration}}秒</div>-->
|
||||||
|
<!-- <el-divider direction="vertical"></el-divider>-->
|
||||||
|
<!-- <div class="text-center cursor-pointer"><i class="f14 el-icon-video-play"></i> 播放录音</div>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- 视频 -->
|
||||||
|
<!-- <div v-if="itemrecord.linkedWay == 2" class="flex-row align-items-center pt-6">-->
|
||||||
|
<!-- <div>视频{{itemrecord.linkedDuration}}秒</div>-->
|
||||||
|
<!-- <el-divider direction="vertical"></el-divider>-->
|
||||||
|
<!-- <div class="text-center cursor-pointer"><i class="f14 el-icon-video-play"></i> 播放视频</div>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- 微信 -->
|
||||||
|
<!-- <div v-if="itemrecord.linkedWay == 3" class="flex-row align-items-center pt-6">-->
|
||||||
|
<!-- <!– <div>通话44秒</div> –>-->
|
||||||
|
<!-- <el-divider direction="vertical"></el-divider>-->
|
||||||
|
<!-- <div class="text-center cursor-pointer">查看文件</div>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
</div>
|
||||||
|
<div>沟通备注：<span class="color-FF7D00">111</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-layout-100 timeline-layout-ai">
|
||||||
|
<div class="flex-row align-items-center">
|
||||||
|
<div class="mr-8 ai-logo-img"></div>
|
||||||
|
<div>调解小助手帮你总结：<i class="f14 el-icon-warning-outline cursor-pointer"></i></div>
|
||||||
|
</div>
|
||||||
|
<div class="pt-8">
|
||||||
|
由于提供的通话记录内容非常有限且不包含具体的人物姓名、对话主旨、相关的时间和金额信息，无法形成有效的摘要。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="rightActive === 2">
|
|
||||||
|
<div v-if="rightActive === 3">
|
||||||
|
<div class="tab-content-title f16 f-weight600 pb-8">沟通记录</div>
|
||||||
|
<el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
|
||||||
|
|
||||||
|
</el-scrollbar>
|
||||||
|
</div>
|
||||||
|
<div v-if="rightActive === 4">
|
||||||
|
<div class="tab-content-title f16 f-weight600 pb-8">沟通记录</div>
|
||||||
|
<el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
|
||||||
|
|
||||||
|
</el-scrollbar>
|
||||||
|
</div>
|
||||||
|
<div v-if="rightActive === 5">
|
||||||
|
<div class="tab-content-title f16 f-weight600 pb-8">沟通记录</div>
|
||||||
|
<el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
|
||||||
|
|
||||||
|
</el-scrollbar>
|
||||||
|
</div>
|
||||||
|
<div v-if="rightActive === 6">
|
||||||
|
<div class="tab-content-title f16 f-weight600 pb-8">沟通记录</div>
|
||||||
|
<el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
|
||||||
|
|
||||||
|
</el-scrollbar>
|
||||||
|
</div>
|
||||||
|
<div v-if="rightActive === 7">
|
||||||
<div class="tab-content-title f16 f-weight600 pb-8">沟通记录</div>
|
<div class="tab-content-title f16 f-weight600 pb-8">沟通记录</div>
|
||||||
<el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
|
<el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
|
||||||
|
|
||||||
@ -18,9 +146,9 @@
|
|||||||
popper-class="custom-tooltip"
|
popper-class="custom-tooltip"
|
||||||
effect="dark"
|
effect="dark"
|
||||||
content="XXX"
|
content="XXX"
|
||||||
placement="right">
|
placement="left">
|
||||||
<div class="tab-icon flex-row justify-content-center align-items-center"
|
<div class="tab-icon flex-row justify-content-center align-items-center cursor-pointer"
|
||||||
@click="rightActive === 1 ? rightActive = 0 : rightActive = 1"
|
@click="handleToggle(1)"
|
||||||
:class="rightActive === 1 ?'active':''">
|
:class="rightActive === 1 ?'active':''">
|
||||||
<svg-icon :icon-class="rightActive === 1 ? `siderbar-1-active` : 'siderbar-1'" className="tabs-svg" />
|
<svg-icon :icon-class="rightActive === 1 ? `siderbar-1-active` : 'siderbar-1'" className="tabs-svg" />
|
||||||
</div>
|
</div>
|
||||||
@ -29,13 +157,68 @@
|
|||||||
popper-class="custom-tooltip"
|
popper-class="custom-tooltip"
|
||||||
effect="dark"
|
effect="dark"
|
||||||
content="XXX"
|
content="XXX"
|
||||||
placement="right">
|
placement="left">
|
||||||
<div class="tab-icon flex-row justify-content-center align-items-center"
|
<div class="tab-icon flex-row justify-content-center align-items-center cursor-pointer"
|
||||||
@click="rightActive === 2 ? rightActive = 0 : rightActive = 2"
|
@click="handleToggle(2)"
|
||||||
:class="rightActive === 2 ?'active':''">
|
:class="rightActive === 2 ?'active':''">
|
||||||
<svg-icon :icon-class="rightActive === 2 ? `siderbar-2-active` : 'siderbar-2'" className="tabs-svg" />
|
<svg-icon :icon-class="rightActive === 2 ? `siderbar-2-active` : 'siderbar-2'" className="tabs-svg" />
|
||||||
</div>
|
</div>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
|
<el-tooltip
|
||||||
|
popper-class="custom-tooltip"
|
||||||
|
effect="dark"
|
||||||
|
content="XXX"
|
||||||
|
placement="left">
|
||||||
|
<div class="tab-icon flex-row justify-content-center align-items-center cursor-pointer"
|
||||||
|
@click="handleToggle(3)"
|
||||||
|
:class="rightActive === 3 ?'active':''">
|
||||||
|
<svg-icon :icon-class="rightActive === 3 ? `siderbar-3-active` : 'siderbar-3'" className="tabs-svg" />
|
||||||
|
</div>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip
|
||||||
|
popper-class="custom-tooltip"
|
||||||
|
effect="dark"
|
||||||
|
content="XXX"
|
||||||
|
placement="left">
|
||||||
|
<div class="tab-icon flex-row justify-content-center align-items-center cursor-pointer"
|
||||||
|
@click="handleToggle(4)"
|
||||||
|
:class="rightActive === 4 ?'active':''">
|
||||||
|
<svg-icon :icon-class="rightActive === 4 ? `siderbar-4-active` : 'siderbar-4'" className="tabs-svg" />
|
||||||
|
</div>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip
|
||||||
|
popper-class="custom-tooltip"
|
||||||
|
effect="dark"
|
||||||
|
content="XXX"
|
||||||
|
placement="left">
|
||||||
|
<div class="tab-icon flex-row justify-content-center align-items-center cursor-pointer"
|
||||||
|
@click="handleToggle(5)"
|
||||||
|
:class="rightActive === 5 ?'active':''">
|
||||||
|
<svg-icon :icon-class="rightActive === 5 ? `siderbar-5-active` : 'siderbar-5'" className="tabs-svg" />
|
||||||
|
</div>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip
|
||||||
|
popper-class="custom-tooltip"
|
||||||
|
effect="dark"
|
||||||
|
content="XXX"
|
||||||
|
placement="left">
|
||||||
|
<div class="tab-icon flex-row justify-content-center align-items-center cursor-pointer"
|
||||||
|
@click="handleToggle(6)"
|
||||||
|
:class="rightActive === 6 ?'active':''">
|
||||||
|
<svg-icon :icon-class="rightActive === 6 ? `siderbar-6-active` : 'siderbar-6'" className="tabs-svg" />
|
||||||
|
</div>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip
|
||||||
|
popper-class="custom-tooltip"
|
||||||
|
effect="dark"
|
||||||
|
content="XXX"
|
||||||
|
placement="left">
|
||||||
|
<div class="tab-icon flex-row justify-content-center align-items-center cursor-pointer"
|
||||||
|
@click="handleToggle(7)"
|
||||||
|
:class="rightActive === 7 ?'active':''">
|
||||||
|
<svg-icon :icon-class="rightActive === 7 ? `siderbar-7-active` : 'siderbar-7'" className="tabs-svg" />
|
||||||
|
</div>
|
||||||
|
</el-tooltip>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -57,7 +240,8 @@ export default {
|
|||||||
},
|
},
|
||||||
data(){
|
data(){
|
||||||
return{
|
return{
|
||||||
rightActive: 0
|
rightActive: 0,
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -66,17 +250,30 @@ export default {
|
|||||||
return oh - 57 - 63
|
return oh - 57 - 63
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
methods: {
|
||||||
|
handleToggle(val){
|
||||||
|
if (this.rightActive === val){
|
||||||
|
this.rightActive = 0;
|
||||||
|
}else {
|
||||||
|
this.rightActive = val;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
.padding-2{
|
||||||
|
padding: 16px 0 16px 2px !important;
|
||||||
|
}
|
||||||
|
|
||||||
.sidebar-tab{
|
.sidebar-tab{
|
||||||
width: 40px;
|
width: 40px;
|
||||||
.tab-content{
|
.tab-content{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 57px;
|
top: 57px;
|
||||||
right: 40px;
|
right: 40px;
|
||||||
width: 260px;
|
width: 280px;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
border-left: 1px solid #E5E6EB;
|
border-left: 1px solid #E5E6EB;
|
||||||
}
|
}
|
||||||
@ -93,4 +290,66 @@ export default {
|
|||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.timeline-layout{
|
||||||
|
border-top: 1px solid #F2F3F5;
|
||||||
|
.timeline-layout-100{
|
||||||
|
width: 100%;
|
||||||
|
.icon-bg{
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
|
||||||
|
.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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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%);
|
||||||
|
.ai-logo-img{
|
||||||
|
width: 29px;
|
||||||
|
height: 29px;
|
||||||
|
background: url('~@/assets/image/ai-logo.png') no-repeat;
|
||||||
|
background-size: 100%,100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user