|
@@ -19,35 +19,86 @@
|
|
</div>
|
|
</div>
|
|
<el-text class="end-call" tag="p" v-if="talkEnd">-- 通话结束 --</el-text>
|
|
<el-text class="end-call" tag="p" v-if="talkEnd">-- 通话结束 --</el-text>
|
|
</div>
|
|
</div>
|
|
- <!-- 识别内容 通话结束才展示-->
|
|
|
|
- <div class="recognize-box" v-if="talkEnd">
|
|
|
|
- <transition name="el-zoom-in-bottom">
|
|
|
|
- <div v-show="!searchCol" class="transition-box">
|
|
|
|
- <el-button link @click="closeSearch" class="transition-box-close">
|
|
|
|
- <SvgIcon name="ele-Close" class="ml3" size="18px" />
|
|
|
|
- </el-button>
|
|
|
|
- <div class="transition-box-title">
|
|
|
|
- <el-text tag="b" size="large">识别内容</el-text>
|
|
|
|
- </div>
|
|
|
|
- <el-scrollbar class="h100 transition-box-content" noresize ref="scrollbarRef" max-height="180px">
|
|
|
|
-
|
|
|
|
- <pre>
|
|
|
|
- {{recognizeList}}
|
|
|
|
- </pre>
|
|
|
|
- </el-scrollbar>
|
|
|
|
- <div class="flex-end mt20">
|
|
|
|
- <el-button @click="closeSearch" class="default-button"> 取消</el-button>
|
|
|
|
- <el-button type="primary" @click="fillSingle">一键填单</el-button>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </transition>
|
|
|
|
- <el-button type="primary" @click="closeSearch" v-show="searchCol">
|
|
|
|
- <SvgIcon name="ele-ArrowUp" class="ml3" size="18px" />
|
|
|
|
- </el-button>
|
|
|
|
- </div>
|
|
|
|
</el-scrollbar>
|
|
</el-scrollbar>
|
|
<Empty v-else />
|
|
<Empty v-else />
|
|
-
|
|
|
|
|
|
+ <!-- 识别内容 通话结束才展示-->
|
|
|
|
+ <div class="recognize-box" v-if="talkEnd && messageList.length">
|
|
|
|
+ <transition name="el-zoom-in-bottom">
|
|
|
|
+ <div v-show="!searchCol" class="transition-box">
|
|
|
|
+ <el-button link @click="closeSearch" class="transition-box-close">
|
|
|
|
+ <SvgIcon name="ele-Close" class="ml3" size="18px" />
|
|
|
|
+ </el-button>
|
|
|
|
+ <div class="transition-box-title">
|
|
|
|
+ <el-text tag="b" size="large">识别内容</el-text>
|
|
|
|
+ </div>
|
|
|
|
+ <el-scrollbar class="h100 transition-box-content" noresize ref="scrollbarRef" max-height="180px">
|
|
|
|
+ <div class="call-item">
|
|
|
|
+ <el-text tag="b" class="call-item-label">来电号码:</el-text>
|
|
|
|
+ <p class="call-item-value">{{ recognizeList.call_number }}</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="call-item">
|
|
|
|
+ <el-text tag="b" class="call-item-label">客户姓名:</el-text>
|
|
|
|
+ <p class="call-item-value">{{ recognizeList?.name }}</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="call-item">
|
|
|
|
+ <el-text tag="b" class="call-item-label">年龄:</el-text>
|
|
|
|
+ <p class="call-item-value">{{ recognizeList?.age }}</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="call-item">
|
|
|
|
+ <el-text tag="b" class="call-item-label">性别:</el-text>
|
|
|
|
+ <p class="call-item-value">{{ recognizeList?.sex }}</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="call-item">
|
|
|
|
+ <el-text tag="b" class="call-item-label">身份证号:</el-text>
|
|
|
|
+ <p class="call-item-value">{{ recognizeList?.id_card }}</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="call-item">
|
|
|
|
+ <el-text tag="b" class="call-item-label">地址:</el-text>
|
|
|
|
+ <p class="call-item-value">{{ recognizeList?.address }}</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="call-item">
|
|
|
|
+ <el-text tag="b" class="call-item-label">公司名称:</el-text>
|
|
|
|
+ <p class="call-item-value">{{ recognizeList?.company_name }}</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="call-item">
|
|
|
|
+ <el-text tag="b" class="call-item-label">通话小结:</el-text>
|
|
|
|
+ <p class="call-item-value">{{ recognizeList?.call_detail_content }}</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="call-item">
|
|
|
|
+ <el-text tag="b" class="call-item-label">受理类型:</el-text>
|
|
|
|
+ <p class="call-item-value">{{ recognizeList?.acceptance_type }}</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="call-item">
|
|
|
|
+ <el-text tag="b" class="call-item-label">推送分类:</el-text>
|
|
|
|
+ <p class="call-item-value">{{ recognizeList?.push_classification }}</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="call-item">
|
|
|
|
+ <el-text tag="b" class="call-item-label">热点分类:</el-text>
|
|
|
|
+ <p class="call-item-value">{{ recognizeList?.hotspot_classification }}</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="call-item">
|
|
|
|
+ <el-text tag="b" class="call-item-label">事件目的:</el-text>
|
|
|
|
+ <p class="call-item-value">{{ recognizeList?.event_purpose }}</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="call-item">
|
|
|
|
+ <el-text tag="b" class="call-item-label">工单标题:</el-text>
|
|
|
|
+ <p class="call-item-value">{{ recognizeList?.record_title }}</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="call-item">
|
|
|
|
+ <el-text tag="b" class="call-item-label">诉求详情:</el-text>
|
|
|
|
+ <p class="call-item-value">{{ recognizeList?.appeal_detatls }}</p>
|
|
|
|
+ </div>
|
|
|
|
+ </el-scrollbar>
|
|
|
|
+ <div class="flex-end mt20">
|
|
|
|
+ <el-button @click="closeSearch" class="default-button"> 取消</el-button>
|
|
|
|
+ <el-button type="primary" @click="fillSingle">一键填单</el-button>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </transition>
|
|
|
|
+ <el-button type="primary" @click="closeSearch" v-show="searchCol">
|
|
|
|
+ <SvgIcon name="ele-ArrowUp" class="ml3" size="18px" />
|
|
|
|
+ </el-button>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
@@ -61,9 +112,10 @@ import { useTelStatus } from '/@/stores/telStatus';
|
|
import { useRoute } from 'vue-router';
|
|
import { useRoute } from 'vue-router';
|
|
import { formatDate } from '/@/utils/formatTime';
|
|
import { formatDate } from '/@/utils/formatTime';
|
|
import Empty from '/@/components/Empty/index.vue';
|
|
import Empty from '/@/components/Empty/index.vue';
|
|
|
|
+const emit = defineEmits(['orderOverwrite']);
|
|
// 消息列表
|
|
// 消息列表
|
|
const messageList = ref<any>([]); // 消息列表
|
|
const messageList = ref<any>([]); // 消息列表
|
|
-const recognizeList = ref<any>([]); // 识别信息
|
|
|
|
|
|
+const recognizeList = ref<EmptyObjectType>({}); // 识别信息
|
|
|
|
|
|
const useTelStatusStore = useTelStatus();
|
|
const useTelStatusStore = useTelStatus();
|
|
const { telStatusInfo } = storeToRefs(useTelStatusStore); // 电话状态
|
|
const { telStatusInfo } = storeToRefs(useTelStatusStore); // 电话状态
|
|
@@ -108,6 +160,7 @@ const seatAssistOn = () => {
|
|
// 设置初始化,防止刷新时恢复默认
|
|
// 设置初始化,防止刷新时恢复默认
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
seatAssistOn();
|
|
seatAssistOn();
|
|
|
|
+ getRecognize()
|
|
});
|
|
});
|
|
const route = useRoute();
|
|
const route = useRoute();
|
|
const talkEnd = ref(false); // 通话结束
|
|
const talkEnd = ref(false); // 通话结束
|
|
@@ -124,9 +177,12 @@ const wsReceive = (message: any) => {
|
|
scrollToBottom();
|
|
scrollToBottom();
|
|
}
|
|
}
|
|
if (data.body.content.callEndInfo) {
|
|
if (data.body.content.callEndInfo) {
|
|
- //通话结束
|
|
|
|
- talkEnd.value = true;
|
|
|
|
- console.log('通话结束了。')
|
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ //通话结束
|
|
|
|
+ talkEnd.value = true;
|
|
|
|
+ getRecognize();
|
|
|
|
+ console.log('通话结束了。');
|
|
|
|
+ }, 1000);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
console.log(messageList.value, '消息内容');
|
|
console.log(messageList.value, '消息内容');
|
|
@@ -156,18 +212,16 @@ const searchCol = ref(true); // 展开/收起
|
|
// 展开/收起
|
|
// 展开/收起
|
|
const closeSearch = () => {
|
|
const closeSearch = () => {
|
|
searchCol.value = !searchCol.value;
|
|
searchCol.value = !searchCol.value;
|
|
- if(!searchCol.value){
|
|
|
|
- const callId = route.params.callId;
|
|
|
|
- axios.get(`${import.meta.env.VITE_VOICE_ASSISTANT_API_URL}/monitor/remote/details/${callId}`).then((res) => {
|
|
|
|
- const { data } = res;
|
|
|
|
- const { result } = data;
|
|
|
|
- recognizeList.value = result.call_detail_content;
|
|
|
|
- const str = result.call_detail_content.split('\n');
|
|
|
|
-
|
|
|
|
- console.log(str)
|
|
|
|
- console.log(recognizeList.value)
|
|
|
|
- });
|
|
|
|
- }
|
|
|
|
|
|
+};
|
|
|
|
+// 获取识别内容
|
|
|
|
+const getRecognize = () => {
|
|
|
|
+ const callId = route.params.callId;
|
|
|
|
+ axios.get(`${import.meta.env.VITE_VOICE_ASSISTANT_API_URL}/monitor/remote/details/${callId}`).then((res) => {
|
|
|
|
+ const { data } = res;
|
|
|
|
+ const { result } = data;
|
|
|
|
+ recognizeList.value = result;
|
|
|
|
+ console.log(result, recognizeList.value, '识别内容');
|
|
|
|
+ });
|
|
};
|
|
};
|
|
// 滚动到底部
|
|
// 滚动到底部
|
|
const scrollToBottom = async () => {
|
|
const scrollToBottom = async () => {
|
|
@@ -187,11 +241,8 @@ const fillSingle = () => {
|
|
autofocus: false,
|
|
autofocus: false,
|
|
})
|
|
})
|
|
.then(() => {
|
|
.then(() => {
|
|
- ElNotification({
|
|
|
|
- title: '提示',
|
|
|
|
- message: '一键填单成功',
|
|
|
|
- type: 'success',
|
|
|
|
- });
|
|
|
|
|
|
+ emit('orderOverwrite', recognizeList.value);
|
|
|
|
+ searchCol.value = !searchCol.value;
|
|
})
|
|
})
|
|
.catch(() => {});
|
|
.catch(() => {});
|
|
};
|
|
};
|
|
@@ -204,7 +255,7 @@ watch(messageList.value, (val) => {
|
|
.voice-assistant {
|
|
.voice-assistant {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
height: 100%;
|
|
- min-height: 400px;
|
|
|
|
|
|
+ min-height: 400px;
|
|
position: relative;
|
|
position: relative;
|
|
.chat-box {
|
|
.chat-box {
|
|
width: 100%;
|
|
width: 100%;
|
|
@@ -265,7 +316,7 @@ watch(messageList.value, (val) => {
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
position: absolute;
|
|
left: 0;
|
|
left: 0;
|
|
- top: calc(50% + 0px);
|
|
|
|
|
|
+ top: calc(50% - 10px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@@ -315,7 +366,7 @@ watch(messageList.value, (val) => {
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
position: absolute;
|
|
right: 0;
|
|
right: 0;
|
|
- top: calc(50% + 0px);
|
|
|
|
|
|
+ top: calc(50% - 10px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -331,7 +382,19 @@ watch(messageList.value, (val) => {
|
|
bottom: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
width: 100%;
|
|
background-color: var(--el-color-white);
|
|
background-color: var(--el-color-white);
|
|
-
|
|
|
|
|
|
+ .call-item {
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-content: center;
|
|
|
|
+ .call-item-label {
|
|
|
|
+ width: 100px;
|
|
|
|
+ text-align: right;
|
|
|
|
+ margin-right: 10px;
|
|
|
|
+ }
|
|
|
|
+ .call-item-value {
|
|
|
|
+ flex: 1;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
.transition-box {
|
|
.transition-box {
|
|
position: absolute;
|
|
position: absolute;
|
|
bottom: 0;
|
|
bottom: 0;
|