mod:通话记录

src/components/callLogs/audioPlayer.vue

@@ -10,7 +10,7 @@
     <!-- 音频播放器 -->
     <div class="bg-gray-50 rounded-lg p-6 mb-6">
       <div class="flex justify-center mb-4">
-        <audio ref="audioPlayer" :src="filePath" @timeupdate="updateTime"></audio>
+        <audio ref="audioPlayer" @timeupdate="updateTime"></audio>
         <el-button class="w-16 h-16 !rounded-full flex items-center justify-center"
           :type="isPlaying ? 'danger' : 'primary'" @click="togglePlay">
           <el-icon class="text-4xl">
@@ -42,8 +42,7 @@
       v-if="transcriptionMessages.length">
       <h3 class="text-lg font-medium mb-4">语音转写内容</h3>
       <div class="text-gray-600 leading-relaxed overflow-y-auto flex-grow space-y-2">
-        <div v-for="(message, index) in transcriptionMessages" :key="index" @click="jumpToTime(message.startTime)"
-          :class="[
+        <div v-for="(message, index) in transcriptionMessages" :key="index" :class="[
             'p-3 transition-colors rounded-lg cursor-pointer group',
             message.direction === 1 ? 'bg-gradient-to-r from-gray-100 to-gray-200 hover:from-gray-200 hover:to-gray-300' : 'bg-gradient-to-r from-blue-50 to-blue-100 hover:from-blue-100 hover:to-blue-200'
           ]">
@@ -57,12 +56,15 @@
                 {{ message.direction === 1 ? '客服' : '客户' }}
               </div>
             </div>
-            <el-button class="!rounded-button opacity-0 group-hover:opacity-100 transition-opacity" size="small"
-              type="text" @click.stop="playSegment(message.startTime, message.endTime)">
+            <el-button v-if="currentIndex !== index" class="!rounded-button opacity-0 group-hover:opacity-100 transition-opacity" size="small"
+              type="text" @click.stop="playSegment(message.startTime, message.endTime, index)">
               <el-icon class="text-lg">
                 <VideoPlay />
               </el-icon>
             </el-button>
+            <el-icon v-else class="text-lg">
+              <VideoPause />
+            </el-icon>
           </div>
           <div class="text-gray-700">{{ message.page_content }}</div>
           <!-- <div class="text-xs text-gray-400 mt-1">置信度: {{ message.confidence }}%</div> -->
@@ -78,7 +80,7 @@
           {{ keyword.text }}
           <span
             class="absolute -top-2 -right-2 flex items-center justify-center w-5 h-5 text-xs font-bold text-white bg-red-500 rounded-full">{{
-              keyword.count }}</span>
+            keyword.count }}</span>
         </div>
       </div>
     </div>
@@ -93,26 +95,39 @@ import { flatten } from 'lodash';
 
 import { getPageListData } from '@/api/main/system/system';
 import { stripHtmlByRegex, formatMilliseconds } from '@/utils/tools';
+import { exportFileWav } from '@/utils';
 
 const drawerVisible = ref(false);
 const deleteDialogVisible = ref(false);
 const isPlaying = ref(false);
-const callId = ref(0);
-const filePath = ref('');
+// const recordId = ref(null);
+// const filePath = ref(null);
 const audioPlayer = ref(null);
 const props = defineProps({
-  callId: {
+  recordId: {
     type: Number,
+    default: null,
   },
   filePath: {
     type: String,
+    default: null,
   },
 });
+
 watch(props, (newValue, oldValue) => {
   if (newValue) {
-    callId.value = props.callId;
-    filePath.value = props.filePath;
+    console.log(newValue, 'newValue')
+    if (newValue.recordId !== oldValue.recordId) {
+      getDetail();
+    }
+    if (newValue.filePath !== oldValue.filePath) {
+      loadRemoteAudio()
+    }
+    
+   
   }
+}, {
+  deep: true,
 });
 
 const progress = ref(0);
@@ -120,58 +135,49 @@ const currentTime = ref(0);
 const duration = ref(180); // 示例时长3分钟
 const transcriptionMessages: any = ref([]);
 const formatTime = (seconds: number): string => {
+  console.log(seconds, 'seconds');
   const minutes = Math.floor(seconds / 60);
   const remainingSeconds = Math.floor(seconds % 60);
   return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
 };
-const togglePlay = () => {
+
+const timer = ref(null);
+
+const togglePlay = (isFragment = false) => {
+  if (!isFragment) currentIndex.value = 0;
   isPlaying.value = !isPlaying.value;
   if (isPlaying.value) {
-    pause();
+    play();
     // 模拟播放进度
-    const timer = setInterval(() => {
-      if (progress.value >= 100) {
-        clearInterval(timer);
-        isPlaying.value = false;
-        progress.value = 0;
-        currentTime.value = 0;
+    timer.value = setInterval(() => {
+      if (progress.value >= 100 || (isFragment && currentTime.value >= endTime.value)) {
+        pause();
         return;
       }
-      progress.value += 1;
+
+      currentTime.value+= 1;
+
+      progress.value = (currentTime.value / duration.value) * 100;
       currentTime.value = (progress.value / 100) * duration.value;
     }, 1000);
+  } else {
+    pause();
   }
 };
 const handleProgressChange = (value: number) => {
-  currentTime.value = (value / 100) * duration.value;
-};
-const jumpToTime = (time: number) => {
-  progress.value = (time / duration.value) * 100;
-  currentTime.value = time;
+  // currentTime.value = (value / 100) * duration.value;
 };
 
 const handleDownload = () => {
   ElMessage.success('录音文件下载中...');
-};
-const handleDelete = () => {
-  deleteDialogVisible.value = true;
-};
-const confirmDelete = () => {
-  deleteDialogVisible.value = false;
-  drawerVisible.value = false;
-  ElMessage.success('录音已删除');
-};
-const openDrawer = () => {
-  drawerVisible.value = true;
-  progress.value = 0;
-  currentTime.value = 0;
-  isPlaying.value = false;
+  exportFileWav(props.filePath);
 };
 let keywords = reactive([]);
 
 const getDetail = () => {
-  callId.value = 526;
-  getPageListData(`/call/translate/${callId.value}`).then(({ data }) => {
+  // props.recordId = 526;
+  if (!props.recordId) return;
+  getPageListData(`/call/translate/${props.recordId}`).then(({ data }) => {
     console.log(data, 'res')
     if (data.translate) {
       const translate = JSON.parse(data.translate);
@@ -216,79 +222,87 @@ const endTime = ref(0);
 // const duration = ref(0);
 // const isPlaying = ref(false);
 // const currentTime = ref(0);
+const currentIndex = ref(-1);
+const playSegment = (sTime: number, eTime: number, index) => {
+  currentIndex.value = index;
+  if (isPlaying.value) isPlaying.value = false
+  if (timer.value) clearInterval(timer.value);
+  progress.value = (sTime / 1000 / duration.value) * 100;
+  currentTime.value = sTime / 1000;
+  audioPlayer.value.currentTime = currentTime.value;
+  endTime.value = eTime / 1000;
+
+  togglePlay(true);
 
-const playSegment = (sTime: number, eTime: number) => {
-  progress.value = (sTime / duration.value) * 100;
-  currentTime.value = sTime;
-  endTime.value = eTime;
   // isPlaying.value = true;
-  playVideoSegment();
+  // playVideoSegment();
 };
 
-// 播放指定区间
-const playVideoSegment = () => {
-  if (!audioPlayer.src) return;
+// // 播放指定区间
+// const playVideoSegment = () => {
+//   if (!audioPlayer.src) return;
 
-  audioPlayer.currentTime = startTime.value;
-  audioPlayer.play();
-  isPlaying.value = true;
+//   audioPlayer.currentTime = startTime.value;
+//   audioPlayer.play();
+//   isPlaying.value = true;
 
-  // 模拟播放到指定片段结束
-  const timer = setInterval(() => {
-    if (currentTime.value >= endTime.value || !isPlaying.value) {
-      clearInterval(timer);
-      isPlaying.value = false;
-      return;
-    }
-    progress.value = (currentTime.value / duration.value) * 100;
-    currentTime.value += 1;
-  }, 1000);
-
-  // 设置区间结束监听
-  const checkEnd = () => {
-    if (audioPlayer.currentTime >= endTime.value) {
-      pause();
-      audioPlayer.currentTime = startTime.value; // 回到起点
-    } else if (isPlaying.value) {
-      requestAnimationFrame(checkEnd);
-    }
-  };
-  requestAnimationFrame(checkEnd);
-};
+//   // 模拟播放到指定片段结束
+//   const timer = setInterval(() => {
+//     if (currentTime.value >= endTime.value || !isPlaying.value) {
+//       clearInterval(timer);
+//       isPlaying.value = false;
+//       return;
+//     }
+//     progress.value = (currentTime.value / duration.value) * 100;
+//     currentTime.value += 1;
+//   }, 1000);
+
+//   // 设置区间结束监听
+//   const checkEnd = () => {
+//     if (audioPlayer.currentTime >= endTime.value) {
+//       pause();
+//       audioPlayer.currentTime = startTime.value; // 回到起点
+//     } else if (isPlaying.value) {
+//       requestAnimationFrame(checkEnd);
+//     }
+//   };
+//   requestAnimationFrame(checkEnd);
+// };
 
 // 暂停播放
 const pause = () => {
   console.log(audioPlayer, 'audioPlayer');
-  audioPlayer.play();
+  audioPlayer.value.pause();
   isPlaying.value = false;
+  currentIndex.value = -1;
+  // 清除定时器
+  clearInterval(timer.value);
 }
-
-// 停止并重置
-const stop = () => {
-  pause();
-  audioPlayer.currentTime = startTime.value;
-  currentTime.value = startTime.value;
+const play = () => {
+  audioPlayer.value.play();
+  // isPlaying.value = true;
 }
 
 // 更新当前时间
 const updateTime = () => {
-  currentTime.value = audioPlayer.currentTime;
+  console.log('audioPlayer.value.currentTime', audioPlayer.value.currentTime)
+  currentTime.value = audioPlayer.value.currentTime;
 }
 
 const loadRemoteAudio = async () => {
-  if (!filePath.value) return
+  if (!props.filePath) return
 
   try {
-
-
     // 创建音频对象
     const audio = audioPlayer.value
-    audio.src = filePath.value
+    audio.src = props.filePath
 
     // 等待元数据加载
     await new Promise((resolve, reject) => {
       audio.onloadedmetadata = () => {
         duration.value = audio.duration
+        console.log(duration.value, 'duration.value')
+        startTime.value = 0
         endTime.value = audio.duration
         resolve(1)
       }
@@ -309,14 +323,10 @@ const loadRemoteAudio = async () => {
 }
 
 onMounted(() => {
-  callId.value = props.callId;
-  filePath.value = 'http://1.194.161.64:9000/files/luyin/20250228/1011/8a5d1910-a6cf-4674-acb9-61f29f00cb05.wav';
-  if (filePath.value) {
-    // audioPlayer.src = filePath.value;
-    // audioPlayer.onloadedmetadata = () => {
-    //   duration.value = audioPlayer.duration;
-    //   endTime.value = audioPlayer.duration;
-    // };
+  // props.recordId = props.recordId;
+  console.log('recordId', props.recordId, props.recordId, `props.filePath=>${props.filePath}`);
+  // props.filePath = 'http://1.194.161.64:9000/files/luyin/20250228/1002/eb445cb0-8fbb-44dc-af52-d1e11b778d53.wav';
+  if (props.filePath) {
     loadRemoteAudio();
   } 
   getDetail();

src/views/main/phone/index.vue

@@ -559,6 +559,20 @@ const loadMoreCallData = async () => {
     }
     callLoading.value = false;
 };
+
+const saveTranslate = (callid, translate) => {
+    console.log(callid, translate, 'adsfasdf')
+    if (!translate || !translate.length || !callid) return;
+    createPageData('/call/translate', {
+        callid,
+        translateJson: JSON.stringify(translate),
+    }).then(() => {
+
+    }).catch(() => {
+
+    })
+}
+
 const handleCallScroll = async (event: Event) => {
     const target = event.target as HTMLElement;
     const scrollBottom = target.scrollHeight - target.scrollTop - target.clientHeight;
@@ -762,6 +776,11 @@ const submit = async () => {
                 workordercate: form.value.type[form.value.type.length - 1],
             };
             if (callid.value) params.callId = callid.value;
+
+            if (keywords.value.length > 0) {
+
+            }
+
             // 提交表单
             createPageData('/order/workorder', params).then((data) => {
                 console.log(data, 'submit');

src/views/main/telephone/callRecord/callRecord.vue

@@ -51,7 +51,7 @@
       </template>
     </page-content>
     <el-drawer title="通话录音" v-model="open" width="500px" :with-header="false" append-to-body direction="rtl">
-      <audio-player ref="pageModalRef" :callId="clickId" :filePath="filePath"/>
+      <audio-player v-if="open" :filePath="filePath" :recordId="clickId"/>
     
     </el-drawer>
     <el-dialog
@@ -118,7 +118,7 @@
 
       const pageModalRef = ref(audioPlayer);
       const recordData = ref({});
-      const open = ref(true);
+      const open = ref(false);
       const openCreatOrder = ref(false);
       const openViewOrder = ref(false);
       const filePath = ref('');
@@ -141,7 +141,9 @@
       const handleViewData = (data) => {
         console.log(data.recordPath);
         filePath.value = data.recordPath;
+        console.log(data, 'data')
         clickId.value = data.id;
+        console.log(clickId.value, 'clickId.value')
         open.value = true;
       };
 
@@ -205,6 +207,7 @@
       }
 
       return {
+        clickId,
         getCallSate,
         router,
         getTimeLimit,