AI参谋页面优化

src/views/intelligence/audioPlayer.vue

@@ -4,7 +4,7 @@
       <source :src="fileurl" type="audio/wav" />
     </audio>
     <div @click="playAudio" class="audio-righr">
-      <p class="voice" :style="{ width: duration * 10 + 'px' }">
+      <p class="voice" :style="{ width: voicedWidth + 'px' }">
         <span>{{ duration }}''</span>
         <img src="@/assets/playVoice.png" alt="" v-if="audioStatus == 'play'" />
         <img src="@/assets/pauseVoice.gif" alt="" v-else />
@@ -21,43 +21,102 @@ export default {
       type: String,
       default: '',
     },
-    // 总时长
-    duration: {
-      type: Number,
-      default: 3,
+    // 上一个正在播放的音频实例
+    lastAudio: {
+      type: Object,
+      defalut: () => {},
     },
   },
   data() {
     return {
+      recordAudio: null, //audio元素
       audioStatus: 'play', //音频播放状态 play：等待播放；pause：正在播放
-    }
+      duration: 0,
+    };
+  },
+  computed: {
+    voicedWidth() {
+      let voicedWidth = this.duration <= 3 ? 4 : this.duration;
+      return voicedWidth * 10;
+    },
+  },
+  mounted() {
+    this.recordAudio = this.$refs.audioRef; // 获取audio元素
+    // 监听audio 结束播放
+    this.recordAudio.addEventListener(
+      'ended',
+      () => {
+        this.audioStatus = 'play'; // 显示播放icon
+        this.$emit('setAudio', {});
+      },
+      false
+    );
+    // 获取audio 总时长duration
+    this.formatePlayerDuration(this.recordAudio);
   },
-  // directives:{
-
-  // }
   methods: {
     // 播放暂停控制
     playAudio() {
-      let recordAudio = this.$refs.audioRef // 获取audio元素
-      if (recordAudio.paused) {
-        recordAudio.play()
-        this.audioStatus = 'pause'
+      if (this.recordAudio.paused) {
+        if (this.lastAudio.recordAudio) {
+          this.$emit('endedLastAudio', () => {
+            this.recordAudio.play();
+            this.audioStatus = 'pause';
+            // 保存当前播放实例
+            this.$emit('setAudio', this);
+          });
+        } else {
+          this.recordAudio.play();
+          this.audioStatus = 'pause';
+          // 保存当前播放实例
+          this.$emit('setAudio', this);
+        }
       } else {
-        recordAudio.pause()
-        this.audioStatus = 'play'
+        this.recordAudio.pause();
+        this.audioStatus = 'play';
+        this.$emit('setAudio', {});
       }
     },
+    formatePlayerDuration(node) {
+      // 视频/音频（audio/video）的元数据加载后触发
+      node.onloadedmetadata = (e) => {
+        const audio = e.target;
+        const audioDuration = audio.duration;
+        if (audioDuration === Infinity || audioDuration === NaN) {
+          audio.currentTime = 1e101;
+          audio.ontimeupdate = () => {
+            audio.ontimeupdate = () => {
+              return;
+            };
+            // 不重新设置currtTime,会直接触发audio的ended事件，因为之前将currentTime设置成了一个比音频时长还大的值。所以要将currentTime重置为初始状态。
+            // 注: 这里有一个问题，直接设置为0 是不起作用的。需要重新设置一下audio.currentTime = 1e101;然后再设置为
+            audio.currentTime = 1e101;
+            audio.currentTime = 0;
+          };
+        }
+        this.duration = Math.round(this.recordAudio.duration);
+      };
+    },
   },
-}
+};
 </script>
 <style lang="scss" scoped>
 .audioBox {
+  border-radius: 6px;
+  text-align: left;
+  background-color: #a0e75a;
+  margin: 0 10px;
+  display: inline-block;
+  float: right;
+  margin-bottom: 5px;
   .audio-righr {
     min-height: 44px;
     padding: 5px 15px 5px 10px;
     .voice {
       display: flex;
       align-items: center;
+      justify-content: right;
+      min-width: 30px !important;
       img {
         // transform: rotate(180deg);
         width: 20px;

src/views/intelligence/index.vue

@@ -50,7 +50,7 @@
                     </p>
                   </template>
                   <template v-else>
-                    <p style="word-break: break-all">{{ itemChild.voiceText }}</p>
+                    <!-- <p style="word-break: break-all">{{ itemChild.voiceText }}</p> -->
                     <p style="word-break: break-all">{{ itemChild.description }}</p>
                     <p v-for="(sbpm, pmsb) in itemChild.textList" :key="pmsb" v-html="sbpm"></p>
                     <div v-if="(itemChild.type = 'answer_radio')">
@@ -76,17 +76,14 @@
             <van-row>
               <van-col span="4"></van-col>
               <van-col span="16">
-                <div
-                  style="
-                    border-radius: 6px;
-                    text-align: left;
-                    background-color: #a0e75a;
-                    margin: 0 10px;
-                    display: inline-block;
-                    float: right;
-                  ">
+                <div class="dialogBox">
                   <template v-if="item.chatRecordFile">
-                    <audioPlayer :fileurl="item.chatRecordFile"></audioPlayer>
+                    <audioPlayer
+                      :fileurl="item.chatRecordFile"
+                      :lastAudio="lastAudio"
+                      @setAudio="setAudio"
+                      @endedLastAudio="endedLastAudio"></audioPlayer>
+                    <div class="audioIsText">{{ item.chatRecordText }}</div>
                   </template>
                   <template v-else>
                     <div class="myContent">
@@ -417,17 +414,17 @@
 </template>
 
 <script>
-import avatar from '@/assets/avatar2.png'
-import yy from '@/assets/Icon/yy.png'
-import yt from '@/assets/Icon/yt.png'
-import aiselect from '@/assets/Icon/avatar1.png'
-import tabBar from '@/components/tabBar'
-import { getReportInfo } from '@/api'
-import { aiDialogue } from '@/api/inventory'
-import { getPosition, getTicketFun } from '@/utils/TXApiFun'
-import BenzAMRRecorder from 'benz-amr-recorder'
-import sample3s from '@/assets/mp3/sample-3s.mp3'
-import audioPlayer from './audioPlayer.vue'
+import avatar from '@/assets/avatar2.png';
+import yy from '@/assets/Icon/yy.png';
+import yt from '@/assets/Icon/yt.png';
+import aiselect from '@/assets/Icon/avatar1.png';
+import tabBar from '@/components/tabBar';
+import { getReportInfo } from '@/api';
+import { aiDialogue } from '@/api/inventory';
+import { getPosition, getTicketFun } from '@/utils/TXApiFun';
+import BenzAMRRecorder from 'benz-amr-recorder';
+import sample3s from '@/assets/mp3/sample-3s.mp3';
+import audioPlayer from './audioPlayer.vue';
 export default {
   name: 'ai',
   components: { tabBar, audioPlayer },
@@ -475,8 +472,8 @@ export default {
       isNoData: false, //是否加载完所有数据
       successText: '加载成功', //上拉刷新提示语
       tips: '按住 说话',
-      audioUrl: '',
-    }
+      lastAudio: {}, // 上一个正在播放的音频实例
+    };
   },
   // watch: {
   //   $route(to, from) {
@@ -486,63 +483,71 @@ export default {
   //   },
   // },
   activated() {
-    this.pageNum = 0
-    this.isNoData = false
-    this.onLoad()
+    this.pageNum = 0;
+    this.isNoData = false;
+    this.onLoad();
     // 授权
-    getTicketFun(['getLocation', 'startRecord', 'stopRecord', 'onVoiceRecordEnd', 'uploadVoice'])
-    this.audioUrl =
-      // 'https://cdn-svs-test.nipponpaint.com.cn/%E5%90%B4%E5%BA%B7-20240918152244.amr?Expires=2042176973&OSSAccessKeyId=LTAI5tG1DTJFA16BHkzHVxjz&Signature=BvwZFdxp69wRNy7oOPfqG6lxTww%3D'
-      'https://cdn-svs-test.nipponpaint.com.cn/%E6%9C%B1%E9%87%91%E5%98%9F-20240918160200.wav?Expires=2042179320&OSSAccessKeyId=LTAI5tG1DTJFA16BHkzHVxjz&Signature=kcsEr4BE11XpV6TAW6lLJWU0rXI%3D'
+    getTicketFun(['getLocation', 'startRecord', 'stopRecord', 'onVoiceRecordEnd', 'uploadVoice']);
   },
   methods: {
+    // 保存上一个播放audio
+    setAudio(node) {
+      this.lastAudio = node;
+    },
+    // 关闭上一个播放的audio
+    endedLastAudio(callBack) {
+      this.lastAudio.recordAudio.pause();
+      this.lastAudio.audioStatus = 'play';
+      // 回调开启当前audio
+      callBack && callBack();
+    },
     audioPlay(chatRecordFile) {
       if (chatRecordFile) {
-        const url = chatRecordFile
-        this.amr = new BenzAMRRecorder()
+        const url = chatRecordFile;
+        this.amr = new BenzAMRRecorder();
         this.amr.initWithUrl(url).then(() => {
-          this.amr.play()
+          this.amr.play();
           // data.amrTime = Math.ceil(amr.getDuration());    //获取音频总时长
-        })
+        });
         this.amr.onEnded(() => {
           // 播放结束重置状态
-        })
+        });
       } else {
-        this.amr.stop()
+        this.amr.stop();
       }
     },
     garbageManager() {
       this.$nextTick(() => {
-        this.$refs.snb.scrollTop = this.$refs.snb.scrollHeight
-      })
+        this.$refs.snb.scrollTop = this.$refs.snb.scrollHeight;
+      });
     },
     onLoad() {
       if (this.isNoData) {
-        this.successText = '以下所有内容！'
-        this.$toast('已经加载所有内容！')
-        this.loading = false
-        return
+        this.successText = '以下所有内容！';
+        this.$toast('已经加载所有内容！');
+        this.loading = false;
+        return;
       }
-      this.pageNum++
-      this.aiDialogueGgreet()
+      this.pageNum++;
+      this.aiDialogueGgreet();
     },
     choiceSelct(val, val2) {
       if (val.type == 'AI_WIRING_SCENE') {
-        localStorage.setItem(val.type, val.content)
+        localStorage.setItem(val.type, val.content);
         // 跳转高销额列表
         this.$router.push({
           path: '/topStore',
           query: {
             AItype: val.type,
           },
-        })
-        return
+        });
+        return;
       } else {
         let loading1 = this.$toast.loading({
           duration: 0,
           message: '发送中...',
           forbidClick: true,
-        })
+        });
         aiDialogue({
           type: 4,
           content: val.radioName,
@@ -552,13 +557,13 @@ export default {
           radioValue: val.radioValue,
           radioName: val.radioName,
         }).then((response) => {
-          loading1.clear()
+          loading1.clear();
           if (response.code == 200) {
-            this.pageNum = 1
-            this.Ggreet = []
-            this.aiDialogueGgreet()
+            this.pageNum = 1;
+            this.Ggreet = [];
+            this.aiDialogueGgreet();
           }
-        })
+        });
       }
     },
     aiDialogueGgreet() {
@@ -566,25 +571,25 @@ export default {
         duration: 0,
         message: '发送中...',
         forbidClick: true,
-      })
+      });
       this.aiDialogueCommon({ type: 3, pageNum: this.pageNum, pageSize: 10 })
         .then((response) => {
-          this.Ggreet = response.rows.concat(this.Ggreet)
+          this.Ggreet = response.rows.concat(this.Ggreet);
           if (this.Ggreet.length >= response.total) {
-            this.isNoData = true
+            this.isNoData = true;
           } else {
-            this.isNoData = false
+            this.isNoData = false;
           }
           if (this.pageNum == 1) {
-            this.garbageManager()
+            this.garbageManager();
           }
-          loading1.clear()
-          this.loading = false
+          loading1.clear();
+          this.loading = false;
         })
         .catch(() => {
-          loading1.clear()
-          this.loading = false
-        })
+          loading1.clear();
+          this.loading = false;
+        });
       // aiDialogue({ type: 3, pageNum: this.pageNum, pageSize: 10 }).then((response) => {
       //   loading1.clear();
       //   this.loading = false;
@@ -603,62 +608,62 @@ export default {
     },
     Submit() {
       if (this.content.trim() == '') {
-        this.$toast('请输入内容！')
+        this.$toast('请输入内容！');
       }
       let loading1 = this.$toast.loading({
         duration: 0,
         message: '发送中...',
         forbidClick: true,
-      })
-      this.btnclik = false
+      });
+      this.btnclik = false;
       // 发送的文本内容添加到对象，减少重新获取接口
       this.Ggreet.push({
         chatRecordText: this.content,
         chatRecordFrom: 1,
-      })
+      });
       aiDialogue({ type: 1, content: this.content }).then((response) => {
-        loading1.clear()
-        this.btnclik = true
+        loading1.clear();
+        this.btnclik = true;
         if (response.code == 200) {
-          this.content = ''
+          this.content = '';
           // this.pageNum = 1;
           // this.Ggreet = [];
-          this.Ggreet.push(...response.rows)
+          this.Ggreet.push(...response.rows);
           // this.aiDialogueGgreet();
-          this.garbageManager()
+          this.garbageManager();
         }
-      })
+      });
     },
     startRecord() {
-      this.tips = '松开 发送'
-      this.wx.startRecord()
-      this.shows = true
+      this.tips = '松开 发送';
+      this.wx.startRecord();
+      this.shows = true;
       this.wx.onVoiceRecordEnd({
         // 录音时间超过一分钟没有停止的时候会执行 complete 回调
         complete: (res) => {
-          var localId = res.localId
-          this.shows = false
+          var localId = res.localId;
+          this.shows = false;
           this.wx.uploadVoice({
             localId: localId,
             isShowProgressTips: 1, // 默认为1，显示进度提示
             success: (res) => {
-              this.shows = false
-              this.show = false
+              this.shows = false;
+              this.show = false;
               this.aiDialogueCommon({ type: 2, content: res.serverId }).then((response) => {
                 this.Ggreet.push({
                   chatRecordFile:
                     'https://cdn-svs-test.nipponpaint.com.cn/%E5%90%B4%E5%BA%B7-20240918152244.amr?Expires=2042176973&OSSAccessKeyId=LTAI5tG1DTJFA16BHkzHVxjz&Signature=BvwZFdxp69wRNy7oOPfqG6lxTww%3D',
                   chatRecordFrom: 1,
-                })
+                });
                 // 音频内容需要接口传唤格式后添加到对象
                 // this.Ggreet.push(...response.rows);
                 // this.Ggreet.push(...response.rows);
-                this.garbageManager()
-              })
+                this.garbageManager();
+              });
             },
-          })
+          });
         },
-      })
+      });
       //     });
       //   }
       // });
@@ -666,26 +671,26 @@ export default {
     stopRecord() {
       this.wx.stopRecord({
         success: (res) => {
-          var localId = res.localId
+          var localId = res.localId;
           this.wx.uploadVoice({
             localId: localId,
             isShowProgressTips: 1, // 默认为1，显示进度提示
             success: (res) => {
-              console.log(res)
-              this.shows = false
-              this.show = false
+              console.log(res);
+              this.shows = false;
+              this.show = false;
               this.aiDialogueCommon({ type: 2, content: res.serverId })
                 .then((response) => {
-                  this.Ggreet.push(...response.rows)
-                  this.garbageManager()
+                  this.Ggreet.push(...response.rows);
+                  this.garbageManager();
                 })
                 .catch(() => {
                   this.Ggreet.push({
                     chatRecordFile:
                       'https://cdn-svs-test.nipponpaint.com.cn/%E5%90%B4%E5%BA%B7-20240918152244.amr?Expires=2042176973&OSSAccessKeyId=LTAI5tG1DTJFA16BHkzHVxjz&Signature=BvwZFdxp69wRNy7oOPfqG6lxTww%3D',
                     chatRecordFrom: 1,
-                  })
-                })
+                  });
+                });
               // aiDialogue({ type: 2, content: res.serverId }).then((response) => {
               //   if (response.code == 200) {
               //     this.Ggreet.push(...response.rows);
@@ -695,9 +700,9 @@ export default {
               //   this.show = false;
               // });
             },
-          })
+          });
         },
-      })
+      });
     },
     //AI对话接口
     // type:类型：1-用户文本对话 2-用户语音对话 3-欢迎语/查询历史 4-点击AI回答进行匹配结果
@@ -706,158 +711,158 @@ export default {
         aiDialogue({ ...arguments[0] })
           .then((response) => {
             if (response.code == 200) {
-              resolve(response)
+              resolve(response);
             } else {
-              console.log(response.msg)
-              rejectt(response)
+              console.log(response.msg);
+              rejectt(response);
             }
           })
           .catch((err) => {
-            console.log(err)
-            rejectt('aiDialogue接口失败')
-          })
-      })
+            console.log(err);
+            rejectt('aiDialogue接口失败');
+          });
+      });
     },
     typw(val) {
       if (val == 1) {
-        this.one14 = true
+        this.one14 = true;
         setTimeout(() => {
-          this.one15 = true
-        }, 1000)
+          this.one15 = true;
+        }, 1000);
       }
       if (val == 2) {
-        this.one16 = true
+        this.one16 = true;
         setTimeout(() => {
-          this.one17 = true
-        }, 1000)
+          this.one17 = true;
+        }, 1000);
       }
       if (val == 3) {
-        this.one18 = true
+        this.one18 = true;
         setTimeout(() => {
-          this.one19 = true
-        }, 1000)
+          this.one19 = true;
+        }, 1000);
       }
     },
     send() {
-      this.one = false
-      this.two = false
-      this.one1 = false
-      this.one9 = false
-      this.one10 = false
-      this.one11 = false
-      this.one12 = false
-      this.one14 = false
-      this.one15 = false
-      this.one16 = false
-      this.one17 = false
-      this.one18 = false
-      this.one19 = false
-      this.two1 = false
+      this.one = false;
+      this.two = false;
+      this.one1 = false;
+      this.one9 = false;
+      this.one10 = false;
+      this.one11 = false;
+      this.one12 = false;
+      this.one14 = false;
+      this.one15 = false;
+      this.one16 = false;
+      this.one17 = false;
+      this.one18 = false;
+      this.one19 = false;
+      this.two1 = false;
       if (this.message.indexOf('销量') != -1 || this.num == 1) {
-        this.one = true
+        this.one = true;
         setTimeout(() => {
-          this.one1 = true
-        }, 1000)
+          this.one1 = true;
+        }, 1000);
       }
       if (this.message.indexOf('专业时时丽') != -1 || this.num == 2) {
-        this.one11 = true
+        this.one11 = true;
         setTimeout(() => {
-          this.one12 = true
-        }, 1000)
+          this.one12 = true;
+        }, 1000);
       }
       if (this.message.indexOf('碰瓷专案') != -1 || this.num == 3) {
-        this.one9 = true
+        this.one9 = true;
         setTimeout(() => {
-          this.one10 = true
-        }, 1000)
+          this.one10 = true;
+        }, 1000);
       }
-      this.message = ''
+      this.message = '';
     },
     showFn() {
-      this.tips = '按住 说话'
-      this.shows = false
-      this.show = true
+      this.tips = '按住 说话';
+      this.shows = false;
+      this.show = true;
     },
     mousedownFN() {
-      this.shows = true
+      this.shows = true;
     },
     clears() {
-      this.show = false
+      this.show = false;
       // this.two=true
       //
       // setTimeout(()=>{
       //   this.two1=true
       // },1000)
-      this.one = false
-      this.two = false
-      this.one1 = false
-      this.one9 = false
-      this.one10 = false
-      this.one11 = false
-      this.one12 = false
-      this.one14 = false
-      this.one15 = false
-      this.one16 = false
-      this.one17 = false
-      this.one18 = false
-      this.one19 = false
-      this.two1 = false
+      this.one = false;
+      this.two = false;
+      this.one1 = false;
+      this.one9 = false;
+      this.one10 = false;
+      this.one11 = false;
+      this.one12 = false;
+      this.one14 = false;
+      this.one15 = false;
+      this.one16 = false;
+      this.one17 = false;
+      this.one18 = false;
+      this.one19 = false;
+      this.two1 = false;
     },
     mouseupfN() {
-      this.show = false
+      this.show = false;
       // this.two=true
       //
       // setTimeout(()=>{
       //   this.two1=true
       // },1000)
-      this.one = false
-      this.two = false
-      this.one1 = false
-      this.one9 = false
-      this.one10 = false
-      this.one11 = false
-      this.one12 = false
-      this.one14 = false
-      this.one15 = false
-      this.one16 = false
-      this.one17 = false
-      this.one18 = false
-      this.one19 = false
-      this.two1 = false
+      this.one = false;
+      this.two = false;
+      this.one1 = false;
+      this.one9 = false;
+      this.one10 = false;
+      this.one11 = false;
+      this.one12 = false;
+      this.one14 = false;
+      this.one15 = false;
+      this.one16 = false;
+      this.one17 = false;
+      this.one18 = false;
+      this.one19 = false;
+      this.two1 = false;
       if (this.num > 2) {
-        this.num = 0
+        this.num = 0;
       }
-      this.num = this.num + 1
-      this.send()
+      this.num = this.num + 1;
+      this.send();
     },
     goFn(row) {
       this.$router.push({
         path: '/aipage',
         query: { type: row },
-      })
+      });
     },
     getReportInfo() {
-      this.deptLevel = localStorage.getItem('deptLevel')
+      this.deptLevel = localStorage.getItem('deptLevel');
       let loading1 = this.$toast.loading({
         duration: 0,
         message: '加载中...',
         forbidClick: true,
-      })
+      });
       getReportInfo({ isContent: false }).then((res) => {
-        loading1.clear()
-        this.list = res.data.summaryTasks
-        this.historyButton = res.data.historyButton
-        localStorage.setItem('powerGrade', res.data.positionId)
-        this.existReject = res.data.existReject
-        this.powerGrade = res.data.positionId
-        this.showButton = res.data.showButton
-        this.deptLevel = res.data.deptLevel
-        this.reportTargetAll = res.data.reportTargetAll
-        this.updataTime = res.data.reportTargetAll.updateTime
-      })
+        loading1.clear();
+        this.list = res.data.summaryTasks;
+        this.historyButton = res.data.historyButton;
+        localStorage.setItem('powerGrade', res.data.positionId);
+        this.existReject = res.data.existReject;
+        this.powerGrade = res.data.positionId;
+        this.showButton = res.data.showButton;
+        this.deptLevel = res.data.deptLevel;
+        this.reportTargetAll = res.data.reportTargetAll;
+        this.updataTime = res.data.reportTargetAll.updateTime;
+      });
     },
   },
-}
+};
 </script>
 <style lang="scss" scoped>
 p {
@@ -963,9 +968,32 @@ p {
     }
   }
 }
-.myContent {
-  min-height: 44px;
-  word-break: break-all;
-  padding: 5px 10px;
+.dialogBox {
+  float: right;
+  .myContent {
+    border-radius: 6px;
+    text-align: left;
+    background-color: #a0e75a;
+    margin: 0 10px;
+    display: flex;
+    float: right;
+
+    min-height: 44px;
+    word-break: break-all;
+    padding: 5px 10px;
+    align-items: center;
+  }
+  .audioIsText {
+    // float: right;
+    clear: both;
+    background: #fff;
+    min-height: 35px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 6px;
+    max-width: 200px;
+    word-break: break-all;
+  }
 }
 </style>