测试BUG修复

src/views/semantics_manage/asr/ASR.vue

@@ -6,7 +6,7 @@
           <el-button @click="addAsr" type="primary" style="min-width: 100px;"
           v-permission="permissionBtn.semanticPermission.ASR_addArticles">新建</el-button>
         </div>
-        <div class="catalogue-zone">
+        <div class="catalogue-zone" v-loading="detailLoadig" element-loading-text="加载中······">
           <div class="search-box">
             <el-select v-model="search_txt" v-loadMore="searchLoad" :filterable="!search_txt" remote clearable
               placeholder="请输入文件名称" class="select-com" :remote-method="searchHandle" @click.native="inputFocusHandle">
@@ -62,7 +62,7 @@
                 @click="tabChange(tab)">{{ tab }}</li>
             </ul>
           </div>
-          <div v-show="leftShowLabel=='目录'" class="tree-container" v-loading="detailLoadig" element-loading-text="加载中······">
+          <div v-show="leftShowLabel=='目录'" class="tree-container">
             <div class="tree-cont">
               <el-tree ref="treeRef" class="target_tree" :data="treeData" node-key="UniqueCode" :props="defaultProp"
                 :allow-drag="canDragHandle" :allow-drop="canDropHandle" :current-node-key="select_node_key"
@@ -192,14 +192,12 @@
         <!-- 视频 -->
         <div class="detail-video-area" v-if="articleDetail && articleDetail.type==2 && articleDetail.ResourceUrl"
         v-show="!videoHidden">
-          <video :src="articleDetail.ResourceUrl" controls class="detail-video" ref="mediaRef">
-            Your browser does not support the video element.
-          </video>
+          <media-com :ResourceUrl="articleDetail.ResourceUrl" :type="articleDetail.type" ref="mediaRef" />
         </div>
         <div class="detail-content">
           <div class="content-mutil-operation">
             <el-checkbox label="全选" style="margin-right: 30px;" @change="checkAll"
-            :checked="isCheckAll" :indeterminate="isIndeterminate"></el-checkbox>
+            v-model="isCheckAll" :indeterminate="isIndeterminate"></el-checkbox>
             <div class="content-row-operation active" @click="copyText(null)" v-show="checkList && checkList.length>0"
               v-permission="permissionBtn.semanticPermission.ASR_copyText">
               <img src="~@/assets/img/icons/copy-active.png" />
@@ -213,7 +211,7 @@
             </div>
           </div>
           <div class="content-title">原文</div>
-          <div class="content-main" :style="{minHeight:articleDetail.ResourceUrl?'490px':'560px'}">
+          <div class="content-main" :style="{minHeight:articleDetail.ResourceUrl?'490px':'560px'}" ref="contentMain">
             <div class="content-row" v-for="(item,index) in articleDetail.Contents" :key="item.SpeechRecognitionContentId"
             @mouseover="item.IsHover=true" @mouseout="item.IsHover=false" :id="'paragraph_'+(index+1)">
               <div class="content-row-info">
@@ -246,7 +244,7 @@
         </div>
         <!-- 音频 -->
         <div class="detail-audio-area" v-if="articleDetail && articleDetail.type==1 && articleDetail.ResourceUrl">
-          <audio-custom :audioUrl="articleDetail.ResourceUrl" ref="mediaRef" />
+          <media-com :ResourceUrl="articleDetail.ResourceUrl" :type="articleDetail.type" ref="mediaRef" />
           <img src="~@/assets/img/icons/delete-red.png" @click="deleteMedia" v-permission="permissionBtn.semanticPermission.ASR_deleteVoice" />
         </div>
       </div>
@@ -319,7 +317,7 @@
 </template>
 
 <script>
-import audioCustom from "./components/audioCustom.vue"
+import mediaCom from "./components/mediaCom.vue"
 import catalogueDia from './components/catalogueDia.vue'
 import editTag from './components/editTag.vue'
 import tooltipHidable from "@/directives/tooltip-hidable.js"
@@ -334,7 +332,7 @@ import { dataAuthInterface } from "@/api/api.js";
 
 export default {
   name: "ASR",
-  components:{audioCustom,catalogueDia,editTag,fileRename,exportDia,makeTags,mediaUpload,transferStatus},
+  components:{mediaCom,catalogueDia,editTag,fileRename,exportDia,makeTags,mediaUpload,transferStatus},
   directives:{
     tooltipHidable
   },
@@ -439,7 +437,7 @@ export default {
     num(value){
       if(value){
         this.paragraphIndex=this.wordList[value-1].index+1
-        this.$refs.mediaRef && (this.$refs.mediaRef.currentTime=this.wordList[value-1].startMs/1000)
+        this.$refs.mediaRef && this.$refs.mediaRef.updateCurrentTime(this.wordList[value-1].startMs/1000)
       }
     },
     select_node_data(value){
@@ -1162,10 +1160,9 @@ export default {
     switchDetail(item){
       if(this.detailLoadig || (!this.permissionBtn.isShowBtn('semanticPermission', 'ASR_view')) ) return 
       this.detailLoadig=true
-                
-      this.keyWord=""
       asrInterface.getSpeechDetail({SpeechRecognitionId:item.SpeechRecognitionId}).then(res=>{
         if(res.Ret == 200){
+          this.resetDetailVariate()
           this.articleDetail=res.Data || {}
           this.articleDetail.type = ['mp4','flv','3gp'].includes(this.articleDetail.FileExt.toLocaleLowerCase())?2:1
 
@@ -1177,17 +1174,21 @@ export default {
             }
           })
           if(this.articleDetail.ResourceUrl){
+            this.$refs.mediaRef && this.$refs.mediaRef.resetPlayerParams()
             clearInterval(this.mediaTimer)
             let paragraphInfoLength = this.articleDetail.Contents.length
             this.mediaTimer= setInterval(() => {
               if(this.$refs.mediaRef && this.$refs.mediaRef.currentTime!=0){
                 // 最后一个
-                if(!(this.articleDetail.Contents[paragraphInfoLength-1].StartMs > this.$refs.mediaRef.currentTime*1000)){
+                if(!( (this.articleDetail.Contents[paragraphInfoLength-1].StartMs / 1000) > this.$refs.mediaRef.currentTime)){
                   return this.paragraphIndex=paragraphInfoLength
                 }
 
-                let i = this.articleDetail.Contents.findIndex(pa => pa.EndMs > (this.$refs.mediaRef.currentTime*1000))
+                let i = this.articleDetail.Contents.findIndex(pa => (pa.EndMs/1000) > this.$refs.mediaRef.currentTime)
+                let it = this.articleDetail.Contents.find(pa => (pa.EndMs/1000) > this.$refs.mediaRef.currentTime)
                 this.paragraphIndex=i+1
+              }else{
+                this.paragraphIndex=0
               }
             }, 300);
           }
@@ -1196,6 +1197,16 @@ export default {
         this.detailLoadig=false
       })
     },
+    resetDetailVariate(){
+      this.keyWord=""
+      this.isCheckAll=false
+      this.isIndeterminate=false
+      this.checkList=[]
+      this.paragraphIndex=0
+      this.$refs.contentMain && $(this.$refs.contentMain).animate({
+        scrollTop:0
+      },0)
+    },
     locationDetail(menuPath=[]){
       this.clearFilterOption()
       if(this.leftShowLabel=="目录"){
@@ -1214,7 +1225,6 @@ export default {
           this.$refs.tagTreeRef.setCurrentKey(null);
         })
       }
-
     },
     checkAll(value){
       this.isIndeterminate=false
@@ -1223,7 +1233,6 @@ export default {
       }else{
         this.checkList=[]
       }
-      console.log(this.checkList,this.articleDetail.Contents);
     },
     checkSingle(value){
       if(!(this.checkList && this.checkList.length)){
@@ -1401,12 +1410,12 @@ export default {
 
       this.paragraphs[index].Content=e.target.textContent
     },
-    save(){
+    save(){this.articleDetail.Tags
       if(this.saveLoading) return 
       let params={
         SpeechRecognitionId:this.articleDetail.SpeechRecognitionId,
         FileName:this.articleDetail.FileName,
-        TagIds:this.articleDetail.Tags.map(tag => tag.TagId),
+        TagIds:this.articleDetail.Tags?this.articleDetail.Tags.map(tag => tag.TagId):[],
         Contents:this.paragraphs
       }
       setTimeout(()=>{
@@ -1620,7 +1629,7 @@ export default {
       border: 1px solid #DCDFE6;
       border-radius: 4px;
       min-width: 845px;
-      overflow: hidden;
+      overflow-x: hidden;
       .file-count{
         font-size: 14px;
         font-weight: 400;
@@ -1809,15 +1818,9 @@ export default {
       }
       .detail-video-area{
         height: 390px;
-        // width: 100%;
+        margin: 0 25px 20px;
+        background-color: black;  
         text-align: center;
-        margin: 0 25px;
-        border-radius: 4px;
-        margin-bottom: 20px;
-        background-color: black;
-        .detail-video{
-          height: 100%;
-        }
       }
       .detail-content{
         padding: 0 25px;
@@ -1891,6 +1894,7 @@ export default {
       .detail-audio-area{
         padding: 15px 80px 0;
         // margin-top: 15px;
+        height: 74px;
         position: relative;
         img{
           display: none;

src/views/semantics_manage/asr/components/audioCustom.vue → src/views/semantics_manage/asr/components/mediaCom.vue

@@ -1,45 +1,55 @@
 <template>
-  <div class="audio-container">
-    <audio :src="audioUrl" ref="audioUrlRef" @timeupdate="updateProgress" @ended="audioEnded"
-    @loadedmetadata="setDuration">
-      Your browser does not support the audio element.
-    </audio>
-    <img src="~@/assets/img/document_m/audio-backward.png" @click="skipTime(-15)" />
-    <img :src="isPlaying?require('@/assets/img/document_m/audio-start.png'):require('@/assets/img/document_m/audio-stop.png')" style="height: 30px;width: 30px;"
-    @click="togglePlay"/>
+  <div :class="type==1?'audio-container':'video-container'">
+    <template v-if="type==1">
+      <audio :src="ResourceUrl" ref="audioUrlRef" @timeupdate="updateProgress" @ended="audioEnded"
+      @loadedmetadata="setDuration">
+        Your browser does not support the audio element.
+      </audio>
+      <img src="~@/assets/img/document_m/audio-backward.png" @click="skipTime(-15)" />
+      <img :src="isPlaying?require('@/assets/img/document_m/audio-start.png'):require('@/assets/img/document_m/audio-stop.png')" style="height: 30px;width: 30px;"
+      @click="togglePlay"/>
 
-    <img src="~@/assets/img/document_m/audio-forward.png"  @click="skipTime(15)"/>
-    <el-slider v-model="currentTime" :show-tooltip="false" class="progress-line"
-    @input="handleDragTime" :max="duration"/>
-    <div class="played-time">{{ formatTime(currentTime) }}</div>
-    <el-dropdown @command="setSpeed" class="dropdown-speed">
-      <span>倍速 {{ speed }}x</span>
-      <el-dropdown-menu slot="dropdown">
-        <el-dropdown-item :command="0.5" :class="speed==0.5?'current-speed':''">0.5</el-dropdown-item>
-        <el-dropdown-item :command="1" :class="speed==1?'current-speed':''">1</el-dropdown-item>
-        <el-dropdown-item :command="1.5" :class="speed==1.5?'current-speed':''">1.5</el-dropdown-item>
-        <el-dropdown-item :command="2" :class="speed==2?'current-speed':''">2</el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
+      <img src="~@/assets/img/document_m/audio-forward.png"  @click="skipTime(15)"/>
+      <el-slider v-model="currentTime" :show-tooltip="false" class="progress-line"
+      @input="handleDragTime" :max="duration"/>
+      <div class="played-time">{{ formatTime(currentTime) }}</div>
+      <el-dropdown @command="setSpeed" class="dropdown-speed">
+        <span>倍速 {{ speed }}x</span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item :command="0.5" :class="speed==0.5?'current-speed':''">0.5</el-dropdown-item>
+          <el-dropdown-item :command="1" :class="speed==1?'current-speed':''">1</el-dropdown-item>
+          <el-dropdown-item :command="1.5" :class="speed==1.5?'current-speed':''">1.5</el-dropdown-item>
+          <el-dropdown-item :command="2" :class="speed==2?'current-speed':''">2</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </template>
+    <template v-if="type==2">
+      <video :src="ResourceUrl" controls class="detail-video" @timeupdate="updateProgress" ref="videoRef">
+        Your browser does not support the video element.
+      </video>
+    </template>
   </div>
 </template>
 
 <script>
   export default {
-    name:"audioCustom",
+    name:"mediaCom",
     props:{
-      audioUrl:{
+      ResourceUrl:{
         type:String,
         required:true
+      },
+      type:{
+        type:Number,
+        required:true
       }
     },
     data() {
       return {
         isPlaying:false,
-        speed:1,
+        speed:1,// 倍速率，默认为1
         currentTime: 0,
         duration: 0,
-        playbackRate: 1, // 倍速率，默认为1
         showHours:true
       }
     },
@@ -55,7 +65,7 @@
       },
       updateProgress(event) {
         const { currentTime } = event.target;
-        this.currentTime = currentTime;
+        this.currentTime = +currentTime.toFixed(3)
       },
       skipTime(seconds) {
         const audio = this.$refs.audioUrlRef;
@@ -93,13 +103,22 @@
 
         return result;
       },
+      // 重置音频的播放器状态参数
+      resetPlayerParams(){
+        this.speed=1
+        this.isPlaying=false
+      },
+      updateCurrentTime(time){
+        this.currentTime = time
+        this.$refs.videoRef && (this.$refs.videoRef.currentTime=this.currentTime)
+      }
     },
   }
 </script>
 
 <style lang="scss" scoped>
 .audio-container{
-  height: 74px;
+  height: 100%;
   width: 100%;
   background-color:#ECF2FE;
   border: 1px solid #0052D9;
@@ -133,6 +152,14 @@
       cursor: pointer;
     }
   }
+
+}
+.video-container{
+  height: 100%;
+  border-radius: 4px;
+  .detail-video{
+    height: 100%;
+  }
 }
 </style>
 <style lang="scss">

src/views/semantics_manage/asr/components/transferStatus.vue

@@ -8,7 +8,7 @@
       </div>
       <div class="status-header-right">
         <img src="~@/assets/img/icons/arrow_black_up.png" style="margin-right: 12px;" @click="isFold=!isFold"
-        :style="{'transform':isFold?'rotate(180deg)':'rotate(0)'}"  :draggable="false"/>
+        :style="{'transform':isFold?'rotate(0)':'rotate(180deg)'}"  :draggable="false"/>
         <img src="~@/assets/img/icons/close.png" @click="closeWindow"  :draggable="false"/>
       </div>
     </div>