331 lines
8.5 KiB
Vue
331 lines
8.5 KiB
Vue
<template>
|
||
<div class="live-call">
|
||
<div class="header">
|
||
<div>
|
||
<span style="margin-right: 20px">{{ recordObj.name }}</span>
|
||
<span>电话号码：{{ recordObj.phone || '--' }}</span>
|
||
</div>
|
||
<div><span>工单名称：{{ recordObj.orderName || '--' }}</span></div>
|
||
<div v-if="recordObj.type">
|
||
<el-tag>{{ recordObj.type == '1' ? '线路一' : recordObj.type == '2' ? '线路二' : '' }}</el-tag>
|
||
</div>
|
||
<div v-else>
|
||
<el-tag>{{ lineName }}</el-tag>
|
||
</div>
|
||
</div>
|
||
<el-scrollbar ref="scrollbarRef" class="scrollbar">
|
||
<el-empty v-if="recordObj.content?.length==0" description="暂无通话"/>
|
||
<div class="chat-content" ref="innerRef" v-else>
|
||
<div v-for="(item,index) in recordObj.content" :key="index">
|
||
<el-divider border-style="dotted" v-if="item.isLine">{{ item.lineMsg }}</el-divider>
|
||
<div v-else>
|
||
<div class="time-grap"><span>{{ item.conversationTimestamp || '6月5日 12:05' }}</span></div>
|
||
<!-- 我的 -->
|
||
<div v-if="item.speaker==0" class="word-my">
|
||
<div class="info">
|
||
<!-- <p class="name">{{ item.speaker==0?recordObj.name:'运维助手' }} </p>-->
|
||
<p class="name">{{ item.speaker == 0 ? recordObj.name : '运维助手' }} </p>
|
||
<el-tooltip
|
||
effect="customized"
|
||
content="如果回答不准确，请右键告诉运维助手！"
|
||
placement="bottom"
|
||
>
|
||
<div class="info-content" @contextmenu="showContextMenu($event,item.message)">{{ item.message }}</div>
|
||
</el-tooltip>
|
||
</div>
|
||
<el-avatar>{{ item.speaker == 0 ? recordObj.name : '运维助手' }}</el-avatar>
|
||
</div>
|
||
|
||
<!-- 对方 -->
|
||
<div v-else class="word">
|
||
<el-avatar> {{ item.speaker == 0 ? recordObj.name : '运维助手' }}</el-avatar>
|
||
<div class="info">
|
||
<p class="name">{{ item.speaker == 0 ? recordObj.name : '运维助手' }} </p>
|
||
<div class="info-content">{{ item.message }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <el-empty description="暂无通话记录~" v-else/>-->
|
||
|
||
</div>
|
||
</el-scrollbar>
|
||
<fvFormDialog ref="formDialogRef" width="550" :title="dialogTitle"
|
||
:form-schema="formSchema" :form-rules="formRules"
|
||
@dialogSubmit="handleSubmitAddressBook"></fvFormDialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {defineProps, reactive} from "vue";
|
||
import {addEnhanceVerbal} from "@/api/verbal-trick";
|
||
import {ElMessage} from "element-plus";
|
||
|
||
const scrollbarRef = ref()
|
||
const props = defineProps({
|
||
recordObj: {
|
||
type: Object,
|
||
default: {}
|
||
},
|
||
headData: {
|
||
type: Object,
|
||
default: {}
|
||
},
|
||
lineName: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
})
|
||
const formDialogRef = ref()
|
||
const dialogTitle = ref("训练知识库");
|
||
const formRules = reactive({
|
||
answer: [
|
||
{required: true, message: "知识校准不能为空", trigger: "blur"},
|
||
],
|
||
});
|
||
const formSchema = computed(() => {
|
||
return [
|
||
{
|
||
label: '知识内容',
|
||
prop: 'query',
|
||
component: 'el-input',
|
||
colProps: {
|
||
span: 24
|
||
},
|
||
},
|
||
{
|
||
label: '知识校准',
|
||
prop: 'answer',
|
||
component: 'el-input',
|
||
colProps: {
|
||
span: 24
|
||
},
|
||
props: {
|
||
placeholder: '请输入知识校准',
|
||
clearable: true,
|
||
type: 'textarea',
|
||
rows: 4,
|
||
},
|
||
},
|
||
]
|
||
})
|
||
const handleSubmitAddressBook = async (formInstance) => {
|
||
if (!formInstance) return;
|
||
let validate = await formInstance.validate()
|
||
if (!validate.isValidate) return;
|
||
let params = {
|
||
query: formInstance.getValues().query,
|
||
answer: formInstance.getValues().answer
|
||
}
|
||
addEnhanceVerbal(params).then(res => {
|
||
if (res.code === 1000) {
|
||
ElMessage.success(res.msg);
|
||
formDialogRef.value.openOrCloseDialog(false)
|
||
} else {
|
||
ElMessage.error(res.msg);
|
||
}
|
||
});
|
||
console.log('params', params)
|
||
}
|
||
const showContextMenu = (event, message) => {
|
||
event.preventDefault(); // 阻止默认右键菜单
|
||
formDialogRef.value.openOrCloseDialog(true)
|
||
nextTick(() => {
|
||
formDialogRef.value.getFormInstance().setValues({
|
||
query: message
|
||
})
|
||
})
|
||
}
|
||
const getScrollbarRef = () => {
|
||
return scrollbarRef.value
|
||
}
|
||
const handleShowDeadLine = (recordObj) => {
|
||
console.info("🚀 ~method:'recordObj' -----", recordObj)
|
||
let flag = false
|
||
if (recordObj.content && recordObj.content.length > 1) {
|
||
let indices = recordObj.content.reduce(function (r, v, i) {
|
||
return r.concat(v === 'a' ? i : []);
|
||
}, []);
|
||
|
||
console.log(indices);
|
||
|
||
recordObj.content.forEach((item, index) => {
|
||
console.info("🚀 ~method:.callIdNumber -----", recordObj.content.findIndex(item => item.callIdNumber), item.callIdNumber)
|
||
flag = recordObj.content[recordObj.content.length - 2]?.callIdNumber != recordObj.content[recordObj.content.length - 1].callIdNumber
|
||
|
||
})
|
||
}
|
||
return flag;
|
||
}
|
||
defineExpose({
|
||
getScrollbarRef
|
||
})
|
||
</script>
|
||
<style lang="scss">
|
||
.el-popper.is-customized {
|
||
/* Set padding to ensure the height is 32px */
|
||
padding: 6px 12px;
|
||
margin-top: -8px;
|
||
background: rgb(232 232 232) !important;
|
||
color: rgb(102, 102, 102) !important;
|
||
|
||
span {
|
||
letter-spacing: 0.5px;
|
||
}
|
||
}
|
||
|
||
|
||
.el-popper.is-customized .el-popper__arrow::before {
|
||
background: transparent !important;
|
||
display: none;
|
||
right: 0;
|
||
}
|
||
</style>
|
||
<style lang="scss" scoped>
|
||
.live-call {
|
||
width: 48%;
|
||
height: 47vh;
|
||
margin-bottom: 20px;
|
||
overflow: hidden;
|
||
border: 1px solid #d5d4d4;
|
||
border-radius: 10px;
|
||
|
||
.header {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
height: 40px;
|
||
border-bottom: 1px solid #d5d4d4;
|
||
}
|
||
|
||
.scrollbar {
|
||
padding: 10px 10px 0 10px;
|
||
height: 42vh;
|
||
|
||
.el-scrollbar__wrap {
|
||
height: 100%;
|
||
overflow: scroll;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
// 聊天内容样式
|
||
.chat-content {
|
||
width: 100%;
|
||
|
||
.time-grap {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
> span {
|
||
font-size: 13px;
|
||
padding: 5px 10px;
|
||
border: 1px solid #d7d9da;
|
||
border-radius: 25px;
|
||
}
|
||
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.word {
|
||
display: flex;
|
||
margin-bottom: 20px;
|
||
|
||
img {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.info {
|
||
margin-left: 10px;
|
||
|
||
.name {
|
||
font-size: 12px;
|
||
color: rgba(51, 51, 51, 0.8);
|
||
margin: 0;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
margin-top: -5px;
|
||
}
|
||
|
||
.info-content {
|
||
padding: 10px;
|
||
font-size: 14px;
|
||
background: #f5f5f5;
|
||
position: relative;
|
||
margin-top: 8px;
|
||
border: 1px solid #f5f5f5;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
//小三角形
|
||
.info-content::before {
|
||
position: absolute;
|
||
left: -8px;
|
||
top: 8px;
|
||
content: '';
|
||
border-right: 10px solid #f5f5f5;
|
||
border-top: 8px solid transparent;
|
||
border-bottom: 8px solid transparent;
|
||
}
|
||
}
|
||
}
|
||
|
||
.word-my {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-bottom: 20px;
|
||
|
||
img {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.info {
|
||
width: 90%;
|
||
margin-left: 10px;
|
||
text-align: right;
|
||
|
||
.name {
|
||
font-size: 12px;
|
||
color: rgba(51, 51, 51, 0.8);
|
||
height: 20px;
|
||
line-height: 20px;
|
||
margin-top: -5px;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.info-content {
|
||
max-width: 70%;
|
||
padding: 10px;
|
||
font-size: 14px;
|
||
float: right;
|
||
margin-right: 10px;
|
||
position: relative;
|
||
margin-top: 8px;
|
||
background: #A3C3F6;
|
||
text-align: left;
|
||
}
|
||
|
||
//小三角形
|
||
.info-content::after {
|
||
position: absolute;
|
||
right: -8px;
|
||
top: 8px;
|
||
content: '';
|
||
border-left: 10px solid #A3C3F6;
|
||
border-top: 8px solid transparent;
|
||
border-bottom: 8px solid transparent;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
</style>
|