From d6e6843ecbb8cdd33e30f78368ae47bf3e474f90 Mon Sep 17 00:00:00 2001
From: odjbin <1042039504@qq.com>
Date: Sun, 6 Oct 2024 19:25:02 +0800
Subject: [PATCH] =?UTF-8?q?fix=20:=20=E4=BF=AE=E5=A4=8D=E5=B7=A5=E4=BD=9C?=
 =?UTF-8?q?=E5=8F=B0=E5=8E=86=E5=8F=B2=E8=AE=B0=E5=BD=95=E5=BC=B9=E7=AA=97?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=98=BE=E7=A4=BAbug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/infoLiveCall/index.vue        | 74 ++++++++++++-------
 src/components/liveCall/LiveCallItem.vue     | 21 ++++--
 src/components/liveCall/LiveCallItemHome.vue | 35 +++++++--
 src/components/liveCall/index.vue            | 78 +++++---------------
 src/views/home/index.vue                     | 12 ++-
 5 files changed, 117 insertions(+), 103 deletions(-)

diff --git a/src/components/infoLiveCall/index.vue b/src/components/infoLiveCall/index.vue
index fff0633..bd8045b 100644
--- a/src/components/infoLiveCall/index.vue
+++ b/src/components/infoLiveCall/index.vue
@@ -1,11 +1,16 @@
 <script setup>
 import LiveCallItem from '@/components/liveCall/LiveCallItem.vue'
 import {getHistoryCallContent} from '@/api/workbench';
+import {ElMessage} from "element-plus";
 
 const dialogVisible = ref(false);
 const recordLeftRef = ref(null);
+const emit = defineEmits(['update:value'])
 const props = defineProps({
-  rowData: String
+  value: {
+    type:String,
+    default:''
+  }
 })
 
 const open = (row) => {
@@ -13,14 +18,20 @@ const open = (row) => {
 };
 
 const leftHeadData = ref({
-  username: '张三',
-  phone: '13546812315',
-  orderName: '张三工单',
+  // username: '张三',
+  // phone: '13546812315',
+  // orderName: '张三工单',
+})
+const detailLoading=ref(false)
+const recordLeftObj = ref({});
+const _value = computed({
+  get() {
+    return props.value;
+  },
+  set(val) {
+    emit("update:value", val);
+  }
 })
-
-const recordLeftObj = ref({
-  content: []
-});
 const convertArrayToMap=(array)=> {
   const map = new Map();
   array.forEach(item => {
@@ -35,22 +46,33 @@ const convertArrayToMap=(array)=> {
   return map;
 }
 
-watch(() => props.rowData, async (newVal) => {
-  recordLeftObj.value.content = []
-  // let map1 = new Map()
-  await getHistoryCallContent(newVal).then(res => {
-    res.data?.forEach(item => {
-      item.textVoList = convertArrayToMap(item.textVoList);
-    })
-    recordLeftObj.value = res.data
-    // console.info("🚀 ~method:res.data -----", res.data)
-    if (res.data && res.data.length > 0) {
-      leftHeadData.value.username = res.data[0].callIdNumber || '--';
-      leftHeadData.value.phone = res.data[0].callPhone || '--';
-      leftHeadData.value.orderName = res.data[0].orderName || '--';
-    }
-  })
+watch(() => props.value, async (newVal) => {
+  if(newVal){
+
+    getHistoryDetail(newVal)
+  }
 })
+const getHistoryDetail=(newVal)=>{
+  detailLoading.value=true
+   getHistoryCallContent(newVal).then(res => {
+     if (res.code === 1000) {
+       detailLoading.value=false
+       res.data?.forEach(item => {
+         if( item.textVoList&& item.textVoList.length>0){
+           item.textVoList = convertArrayToMap(item.textVoList);
+         }
+       })
+       recordLeftObj.value = res.data
+       if (res.data && res.data.length > 0) {
+         leftHeadData.value.username = res.data[0].callIdNumber || '--';
+         leftHeadData.value.phone = res.data[0].callPhone || '--';
+         leftHeadData.value.orderName = res.data[0].orderName || '--';
+       }
+     } else {
+       ElMessage.error(res.msg);
+     }
+  })
+}
 
 const scrollToBottom = (scrollbarRef) => {
   if (scrollbarRef) {
@@ -68,8 +90,8 @@ defineExpose({
 </script>
 
 <template>
-  <el-dialog v-model="dialogVisible" title="历史通话记录" width="600" class="box">
-    <LiveCallItem ref="recordLeftRef" :recordArray="recordLeftObj" :headData="leftHeadData" style="width: 100%;"/>
+  <el-dialog v-model="dialogVisible" title="历史通话记录" width="700" class="box">
+    <LiveCallItem ref="recordLeftRef" :recordArray="recordLeftObj" :headData="leftHeadData" style="width: 100%;" :detailLoading="detailLoading"/>
     <template #footer>
       <div class="dialog-footer">
         <el-button type="primary" @click="dialogVisible = false">
@@ -82,6 +104,6 @@ defineExpose({
 
 <style>
 .box {
-  height: 68vh;
+  /*height: 68vh;*/
 }
 </style>
diff --git a/src/components/liveCall/LiveCallItem.vue b/src/components/liveCall/LiveCallItem.vue
index c27172b..2c7c793 100644
--- a/src/components/liveCall/LiveCallItem.vue
+++ b/src/components/liveCall/LiveCallItem.vue
@@ -1,11 +1,13 @@
 <template>
-  <div class="live-call">
+  <div class="live-call" v-loading="detailLoading">
     <div class="header">
       <div>
         <span style="margin-right: 20px">{{ headData.username }}</span>
-        <span>电话号码：{{ headData.phone }}</span>
       </div>
-      <div><span>工单名称：{{ headData.orderName }}</span></div>
+      <div>
+        <span>电话号码：{{ headData.phone ||'--'}}</span>
+      </div>
+      <div><span>工单名称：{{ headData.orderName ||'--'}}</span></div>
     </div>
     <el-scrollbar ref="scrollbarRef" class="scrollbar">
       <div class="chat-content" ref="innerRef">
@@ -31,8 +33,10 @@
               </div>
             </div>
           </div>
-          <el-divider border-style="dotted" v-if="item">一轮通话结束~~</el-divider>
+          <el-divider border-style="dotted" v-if="item.textVoList&&item.textVoList.length>0">一轮通话结束~~</el-divider>
         </div>
+<!--                  <el-empty description="暂无通话记录~" v-if="recordArray"/>-->
+
       </div>
     </el-scrollbar>
   </div>
@@ -51,10 +55,17 @@ const props = defineProps({
     type: Object,
     default: {}
   },
+  detailLoading: {
+    type: Boolean,
+    default: false
+  },
 })
 const getScrollbarRef = () => {
   return scrollbarRef.value
 }
+watch(() => props.detailLoading,  (newVal) => {
+  props.detailLoading=newVal
+})
 defineExpose({
   getScrollbarRef
 })
@@ -62,7 +73,7 @@ defineExpose({
 
 <style lang="scss" scoped>
 .live-call {
-  width: 48%;
+  width: 50%;
   height: 47vh;
   margin-bottom: 20px;
   overflow: hidden;
diff --git a/src/components/liveCall/LiveCallItemHome.vue b/src/components/liveCall/LiveCallItemHome.vue
index 1084c5c..58bc90c 100644
--- a/src/components/liveCall/LiveCallItemHome.vue
+++ b/src/components/liveCall/LiveCallItemHome.vue
@@ -2,10 +2,11 @@
   <div class="live-call">
     <div class="header">
       <div>
-        <span style="margin-right: 20px">{{ headData.username }}</span>
-        <span>{{ headData.phone }}</span>
+        <span style="margin-right: 20px">姓名：{{ recordObj.name ||'--'}}</span>
+        <span>电话号码：{{ recordObj.phone ||'--'}}</span>
       </div>
-      <div><span>工单名称：{{ headData.orderName }}</span></div>
+      <div><span>工单名称：{{ recordObj.orderName||'--' }}</span></div>
+      <div><span>{{ recordObj.type=='1'?'线路一':recordObj.type=='2'?'线路二':'' }}</span></div>
     </div>
     <el-scrollbar ref="scrollbarRef" class="scrollbar">
       <div class="chat-content" ref="innerRef">
@@ -14,7 +15,8 @@
           <!-- 我的 -->
           <div v-if="item.speaker==0" class="word-my">
             <div class="info">
-              <p class="name">{{ item.speaker==0?headData.username:'AI助手' }} </p>
+<!--              <p class="name">{{ item.speaker==0?recordObj.name:'AI助手' }} </p>-->
+              <p class="name">{{ item.speaker==0?item.callIdNumber:'AI助手' }} </p>
               <div class="info-content">{{ item.message }}</div>
             </div>
             <el-avatar text="我"/>
@@ -23,11 +25,15 @@
           <div v-else class="word">
             <el-avatar text="对方"/>
             <div class="info">
-              <p class="name">{{ item.speaker==0?headData.username:'AI助手'  }} </p>
+              <p class="name">{{ item.speaker==0?item.callIdNumber:'AI助手' }} </p>
               <div class="info-content">{{ item.message }}</div>
             </div>
           </div>
         </div>
+
+<!--                  <el-divider border-style="dotted" v-if="handleShowDeadLine(recordObj)">一轮通话结束~~</el-divider>-->
+<!--        <el-empty description="暂无通话记录~" v-else/>-->
+
       </div>
     </el-scrollbar>
   </div>
@@ -46,9 +52,28 @@ const props = defineProps({
     default: {}
   },
 })
+
 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
 })
diff --git a/src/components/liveCall/index.vue b/src/components/liveCall/index.vue
index 0c70640..1289503 100644
--- a/src/components/liveCall/index.vue
+++ b/src/components/liveCall/index.vue
@@ -17,71 +17,21 @@ const authStore = useAuthStore()
 const recordLeftRef = ref(null);
 const recordRightRef = ref(null);
 const leftHeadData = ref({
-  username: '张三',
-  phone: '13546812315',
-  orderName: '张三工单',
+  // username: '张三',
+  // phone: '13546812315',
+  // orderName: '张三工单',
 })
 const rightHeadData = ref({
-  username: '李四',
-  phone: '18246812546',
-  orderName: '李四工单',
+  // username: '李四',
+  // phone: '18246812546',
+  // orderName: '李四工单',
 })
 const recordLeftObj = ref({
-      content: []
-    }
-    // {
-    //   "callIdNumber": "17260625724565",
-    //   "content": [{
-    //     "callIdNumber": "17260625724565",
-    //     "conversationId": 0,
-    //     "conversationTimestamp": "2024-09-15 12:10",
-    //     "createTime": "2024-09-16",
-    //     "message": "你好11",
-    //     "speaker": "1"
-    //   },
-    //     {
-    //       "callIdNumber": "17260625724565",
-    //       "conversationId": 0,
-    //       "conversationTimestamp": "2024-09-15 16:10",
-    //       "createTime": "2024-09-16",
-    //       "message": "你好好11!",
-    //       "speaker": "0"
-    //     }
-    //   ],
-    //   "name": "",
-    //   "phone": "",
-    //   "timestamp": "1726416597958",
-    //   "type": "1"
-    // }
-)
+  content: []
+})
 const recordRightObj = ref({
-      content: []
-    }
-    // {
-    //   "callIdNumber": "17260625724123",
-    //   "content": [{
-    //     "callIdNumber": "17260625724123",
-    //     "conversationId": 0,
-    //     "conversationTimestamp": "2024-09-15 12:10",
-    //     "createTime": "2024-09-16",
-    //     "message": "你好22",
-    //     "speaker": "1"
-    //   },
-    //     {
-    //       "callIdNumber": "17260625724123",
-    //       "conversationId": 0,
-    //       "conversationTimestamp": "2024-09-15 16:10",
-    //       "createTime": "2024-09-16",
-    //       "message": "你好好222!",
-    //       "speaker": "0"
-    //     }
-    //   ],
-    //   "name": "",
-    //   "phone": "",
-    //   "timestamp": "1726416597958",
-    //   "type": "2"
-    // }
-)
+  content: []
+})
 let socket = reactive("");
 let token = getToken();
 let send = {
@@ -139,12 +89,20 @@ const initWebSocket = () => {
         }
         console.log("服务器返回的信息: ", data);
         if (data.type == '1') {
+          recordLeftObj.value.name=data.name
+          recordLeftObj.value.phone=data.phone
+          recordLeftObj.value.type=data.type
+          recordLeftObj.value.orderName=data.orderName
           recordLeftObj.value.content.push(data.content)
           // console.info("🚀 ~method:onmessage -----", recordLeftObj.value)
           nextTick(() => {
             scrollToBottom(recordLeftRef.value)
           })
         } else {
+          recordRightObj.value.name=data.name
+          recordRightObj.value.phone=data.phone
+          recordRightObj.value.type=data.type
+          recordRightObj.value.orderName=data.orderName
           recordRightObj.value.content.push(data.content)
           // console.info("🚀 ~method:onmessage -----", recordRightObj.value)
           nextTick(() => {
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index a1c1bec..730561b 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -8,7 +8,7 @@
       <h3>历史通话记录</h3>
       <fvTable ref="tableIns" :tableConfig="tableConfig"></fvTable>
       <voice ref="voiceRef" title="语音详情" :rowUrl="rowUrl" />
-      <infoLiveCall ref="infoLiveCallRef" :rowData="rowData" />
+      <infoLiveCall ref="infoLiveCallRef" v-model:value="orderNumber" />
     </div>
   </div>
 </template>
@@ -17,7 +17,7 @@
 import LiveCall from '@/components/liveCall/index.vue'
 import Voice from '@/components/voice/index.vue'
 import InfoLiveCall from '@/components/infoLiveCall/index.vue'
-const rowData = ref()
+const orderNumber = ref('')
 const rowUrl = ref()
 const infoLiveCallRef = ref()
 const voiceRef = ref()
@@ -121,7 +121,6 @@ const tableConfig = reactive({
   ],
   api: '/order/list',
   params: {
-    orderState: '2'
   }
 })
 const handleVoice = (row) => {
@@ -137,10 +136,9 @@ const handleVoice = (row) => {
 
 }
 const handleInfo = (row) => {
-  console.log(row);
-
-  infoLiveCallRef.value.open(true)
-  rowData.value = row.orderNumber
+  console.log('fefe',row.orderNumber);
+  orderNumber.value = row.orderNumber
+  infoLiveCallRef.value.open()
 }
 </script>