feat: 语音联调

src/components/AudioPlayer/index.vue

@@ -102,6 +102,10 @@ onMounted(() => {
   calculateDuration()
 })
 
+defineExpose({
+  durationTime
+})
+
 </script>
 
 <template>

src/components/CallView/index.vue

@@ -23,6 +23,7 @@ const props = defineProps({
 
 const voiceStore = useVoiceStore();
 const route = useRoute();
+const audioPlayerRef = ref(null);
 
 const remark = ref('');
 const callDetails = ref({});
@@ -42,7 +43,13 @@ const typeEnum = {
 }
 
 watch(() => props.data.id, () => {
-  callDetails.value = props.data;
+  // times: audioPlayerRef.value.durationTime
+  callDetails.value = {...props.data };
+})
+
+const durationTime = computed(() => {
+  const durationTime = audioPlayerRef.value?.durationTime;
+  return durationTime ? durationTime: '00:00';
 })
 
 // 编辑
@@ -108,7 +115,8 @@ const onVoiceParsed = ({ parsedVoiceContent, id }) => {
         {{ callDetails.timeEnd }}
       </el-descriptions-item>
       <el-descriptions-item label="通话时长" label-class-name="custom-label" class-name="custom-colums">
-        {{ callDetails.times }}
+        <!-- {{ callDetails.times }} -->
+          {{ durationTime }}
       </el-descriptions-item>
       <el-descriptions-item label="通话类型" label-class-name="custom-label" class-name="custom-colums">
         {{ callDetails.category == 0 ? '呼入' : '呼出' }}
@@ -141,9 +149,9 @@ const onVoiceParsed = ({ parsedVoiceContent, id }) => {
         <span class="text-[#165DFF] text-[14px] cursor-pointer" @click="handleEdit">编辑</span>
       </div>
     </custom-row-item>
-    <custom-row-item label="通话录音">
+    <custom-row-item label="通话录音" v-if="callDetails.url">
       <VoiceToText @on-parsed="onVoiceParsed" :content="callDetails.parsedVoiceContent" :id="callDetails.id">
-        <AudioPlayer :audioUrl="callDetails.url"></AudioPlayer>
+        <AudioPlayer :audioUrl="callDetails.url" ref="audioPlayerRef"></AudioPlayer>
       </VoiceToText>
     </custom-row-item>
     <el-dialog v-model="dialogVisible" title="编辑备注" width="530" modal-class="custom-workbench-dialog" align-center>

src/layout/components/TelNoticeBar/index.vue

@@ -36,10 +36,10 @@ const handleCallAnswered = () => {
       </div>
 
       <ul class="pl-[20px]">
-        <li class="text-[14px] text-[#7B7B7D] space-x-[4px]">
+        <!-- <li class="text-[14px] text-[#7B7B7D] space-x-[4px]">
           <span>黑龙江</span>
           <span>牡丹江</span>
-        </li>
+        </li> -->
         <li class="text-[18px] font-bold">
           <span>{{ telephoneNumber }}</span>
         </li>
@@ -47,8 +47,8 @@ const handleCallAnswered = () => {
     </div>
     
     <div class="notice-center text-[14px]" style="color: rgba(255, 255, 255, 0.6)" v-show="callDialing">
-      <span>通话中：</span>
-      <span>{{ callTime }}</span>
+      <!-- <span>通话中：</span>
+      <span>{{ callTime }}</span> -->
     </div>
 
     <div class="notice-right flex">

src/layout/components/TelNoticeBox/index.vue

@@ -86,8 +86,8 @@ const onDialogOpen = async () => {
           </div>
           <p class="text-[#fff] text-[18px] font-bold ml-[14px] mr-[54px]">{{ telephoneNumber }}</p>
           <p class="text-[#999]" v-show="callDialing">
-            <span>通话中：</span>
-            <span>{{ callTime }}</span>
+            <!-- <span>通话中：</span>
+            <span>{{ callTime }}</span> -->
           </p>
         </div>
         <ul class="notice-right space-x-[12px]">

src/layout/index.vue

@@ -22,7 +22,7 @@ onMounted(() => {
         } catch(error) {
           console.log(error);
         }
-      }, 3000);
+      }, 1000);
     })
   }
 })

src/store/modules/voice.js

@@ -1,5 +1,5 @@
 import { ref } from 'vue';
-import { Timer } from '@/utils/timer';
+// import { Timer } from '@/utils/timer';
 import { ElMessage } from 'element-plus'
 import usePermissionStore from './permission';
 
@@ -29,7 +29,7 @@ const useVoiceStore = defineStore('voice', () => {
   
   // 通话时长
   const callTime = ref('00:00:00');
-  const timer = new Timer(callTime);
+  // const timer = new Timer(callTime);
   
   // 开始时间
   const startTime = '';
@@ -40,6 +40,15 @@ const useVoiceStore = defineStore('voice', () => {
   // 是否有拨打电话权限
   const isAuthPane = computed(() => usePermission.routes.findIndex(({ name }) => name === 'Console') !== -1);
 
+  // 重置
+  const reset = () => {
+    noiceBarVisibleState.value = false;
+    noiceBoxVisibleState.value = false;
+    callAnswered.value = false;
+    callDialing.value = false;
+    // timer.resetTimer();
+  }
+
   // 拨打电话
   const onMakingCall = async (phoneNum) => {
     if ( callAnswered.value ) {
@@ -56,6 +65,7 @@ const useVoiceStore = defineStore('voice', () => {
       })
     }
 
+
     callAnswered.value = true;
 
     const { data } = await makeCall(phoneNum);
@@ -66,7 +76,7 @@ const useVoiceStore = defineStore('voice', () => {
 
     isMakingCall.value = true;
 
-    noiceBarVisibleState.value = true;
+    // noiceBarVisibleState.value = true;
   }
 
   // 接听电话
@@ -74,16 +84,13 @@ const useVoiceStore = defineStore('voice', () => {
     callDialing.value = true;
     callAnswered.value = true;
     await answer();
-    timer.start();
+    // timer.start();
     // TODO 这里需要补充其他逻辑
   }
 
   // 挂断电话
   const onCallDisconnected = async () => {
-    noiceBarVisibleState.value = false;
-    noiceBoxVisibleState.value = false;
-    callAnswered.value = false;
-    timer.resetTimer();
+    reset();
     // const currentTimer = timer.updateDisplay();
     
     // 挂断
@@ -94,8 +101,6 @@ const useVoiceStore = defineStore('voice', () => {
       type: 'success',
       plain: true,
     })
-
-    // TODO 这里需要补充其他逻辑
   }
 
   // 置忙
@@ -116,7 +121,7 @@ const useVoiceStore = defineStore('voice', () => {
   }
 
   // 主动外呼
-  const makeCall = called => HS_CTI.makeCall({ called })
+  const makeCall = called => HS_CTI.makeCall({ called, caller: "待定" })
 
   // 接听电话
   const answer = () => {
@@ -137,7 +142,12 @@ const useVoiceStore = defineStore('voice', () => {
   const listenScoketEvent = (CTIEvent) => {
     HS_CTI.on(CTIEvent.OnAgentWorkReport, ({ workStatus, description, callId, phone }) => {
 
+      console.log( "-----------------------" );
+      console.log( "-----------------------" );
       console.log( "workStatus", workStatus );
+      console.log( "phone", phone );
+      console.log( "-----------------------" );
+      console.log( "-----------------------" );
 
       // 销毁实例调用签出接口成功后 - 坐席签出
       if ( workStatus === -1 ) {
@@ -150,38 +160,18 @@ const useVoiceStore = defineStore('voice', () => {
 
       // 登录CTI 成功
       if ( workStatus === 0 ) {
-        // ElMessage({
-        //   message: '坐席登入成功',
-        //   type: 'success',
-        //   plain: true,
-        // })
       }
 
       // 登录CTI 成功
       if ( workStatus === 2 ) {
-        // ElMessage({
-        //   message: '登入成功',
-        //   type: 'success',
-        //   plain: true,
-        // })
       }
 
       // 调用置闲接口成功后
       if ( workStatus === 2 ) {
-        // ElMessage({
-        //   message: '坐席状态变更为：置闲',
-        //   type: 'success',
-        //   plain: true,
-        // })
       }
 
       // 调用置忙接口成功后
       if ( workStatus === 3 ) {
-        // ElMessage({
-        //   message: '当前坐席状态：置忙',
-        //   type: 'warning',
-        //   plain: true,
-        // })
       }
 
       // 座席振铃
@@ -195,22 +185,27 @@ const useVoiceStore = defineStore('voice', () => {
 
         noiceBarVisibleState.value = true;
 
-        ElMessage({
-          message: '来电话了',
-          type: 'warning',
-          plain: true,
-        })
-      }
-
-      // 挂断 任意一方挂断
-      if ( workStatus === 7 ) {
-        
         // ElMessage({
-        //   message: '当前坐席状态：置忙',
+        //   message: '来电话了',
         //   type: 'warning',
         //   plain: true,
         // })
       }
+
+      // 挂断 任意一方挂断
+      if ( workStatus === 7 ) {
+        reset();
+      }
+
+      // 座席接通呼入电话
+      if ( workStatus === 10 ) {
+        // timer.start();
+      }
+
+      // 挂断 任意一方挂断
+      // if ( workStatus === 7 ) {
+      //   reset();
+      // }
     })
   }
 

src/views/voice/workbench/index.vue

@@ -49,14 +49,18 @@ const handleChangeTab = (index) => {
 }
 
 // 选中通话记录
-const hanldeTabItem = async (i, id) => {
+const hanldeTabItem = async (id) => {
   const { data } = await workbenchApi.getCallRecordDetails(id);
   callDetails.value = data;
-  tabCurrentActive.value = i;
+  tabCurrentActive.value = id;
 }
 
+
 // 搜索
-const onSearch = () => {
+const onSearch = ( type ) => {
+  if ( type === 'refresh' ) {
+    queryParams.value.phone = '';
+  }
   queryParams.value.pageNum = 1;
   tabCallRecordList.value = [];
   tabCurrentActive.value = null;
@@ -73,6 +77,7 @@ const initTabsData = async () => {
   const { rows, total: t } = await workbenchApi.getCallRecordList(queryParams.value);
 
   tabCallRecordList.value = [...tabCallRecordList.value, ...rows];
+
   total.value = t;
   loading.value = false;
 }
@@ -100,6 +105,13 @@ const loadMoreData = () => {
             <input type="text" class="inp" placeholder="请输入电话号码" v-model.trim="queryParams.phone">
             <div class="btn" @click="onSearch">搜索</div>
           </div>
+          <el-tooltip
+            effect="dark"
+            content="刷新"
+            placement="top"
+          >
+            <el-icon style="cursor: pointer;" @click="onSearch('refresh')"><Refresh /></el-icon>
+          </el-tooltip>
         </div>
         <div class="search-result-wrapper">
           <el-scrollbar height="100%">
@@ -113,9 +125,9 @@ const loadMoreData = () => {
                 v-for="item, index in tabCallRecordList"
                 :data="item"
                 :index="index"
-                :active="tabCurrentActive === index"
+                :active="tabCurrentActive === item.id"
                 :key="item.id"
-                @on-click="hanldeTabItem(index, item.id)"
+                @on-click="hanldeTabItem(item.id)"
               ></RecordCardItem>
               <div class="flex justify-center text-[#999] text-[12px]">
                 <p class="pb-[6px]" v-if="loading">Loading...</p>
@@ -200,6 +212,9 @@ $primaryColor: #165DFF;
       height: calc(100% - 46px);
 
       .search-inp-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
         padding: 12px 22px;
 
         .search-inp {