Browse Source

reactor:对接坐席辅助:

zhangchong 1 year ago
parent
commit
8d1eaf0abd
2 changed files with 126 additions and 54 deletions
  1. 115 52
      src/views/todo/seats/accept/Voice-assistant.vue
  2. 11 2
      src/views/todo/seats/accept/index.vue

+ 115 - 52
src/views/todo/seats/accept/Voice-assistant.vue

@@ -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;

+ 11 - 2
src/views/todo/seats/accept/index.vue

@@ -474,7 +474,7 @@
 					<el-card shadow="never">
 					<el-card shadow="never">
 						<el-tabs v-model="rightBottomActive" @tab-change="handleRightBottom">
 						<el-tabs v-model="rightBottomActive" @tab-change="handleRightBottom">
 							<el-tab-pane label="语音助手" name="voice">
 							<el-tab-pane label="语音助手" name="voice">
-								<voice-assistant />
+								<voice-assistant @orderOverwrite="orderOverwrite"/>
 							</el-tab-pane>
 							</el-tab-pane>
 							<el-tab-pane label="市民画像" name="draw">
 							<el-tab-pane label="市民画像" name="draw">
 								<citizen-portrait :orderInfo="state.ruleForm" ref="citizenPortraitRef"/>
 								<citizen-portrait :orderInfo="state.ruleForm" ref="citizenPortraitRef"/>
@@ -500,7 +500,7 @@
 <script setup lang="ts" name="orderAccept">
 <script setup lang="ts" name="orderAccept">
 import { computed, defineAsyncComponent, nextTick, onBeforeMount, onMounted, reactive, ref, watch } from 'vue';
 import { computed, defineAsyncComponent, nextTick, onBeforeMount, onMounted, reactive, ref, watch } from 'vue';
 import type { FormInstance } from 'element-plus';
 import type { FormInstance } from 'element-plus';
-import { ElMessage, ElMessageBox } from 'element-plus';
+import {ElMessage, ElMessageBox, ElNotification} from 'element-plus';
 import { storeToRefs } from 'pinia';
 import { storeToRefs } from 'pinia';
 import { useRoute, useRouter } from 'vue-router';
 import { useRoute, useRouter } from 'vue-router';
 import { useTelStatus } from '/@/stores/telStatus';
 import { useTelStatus } from '/@/stores/telStatus';
@@ -944,6 +944,15 @@ const orderProcessSuccess = () => {
 const onCancel = () => {
 const onCancel = () => {
 	orderProcessSuccess();
 	orderProcessSuccess();
 };
 };
+// 工单重写
+const orderOverwrite = (val:any)=>{
+  ElNotification({
+    title: '提示',
+    message: '一键填单成功',
+    type: 'success',
+  });
+  console.log(val,'工单重写');
+}
 // 加载基础数据
 // 加载基础数据
 const loadBaseData = async () => {
 const loadBaseData = async () => {
 	state.formLoading = true;
 	state.formLoading = true;