课文和对话课文手动校对字幕功能

src/views/book/courseware/create/components/question/article/Article.vue

@@ -25,7 +25,8 @@
           <template v-if="data.wordTime && data.wordTime.length > 0">
             <!-- <span>已有字幕时间节点</span> -->
             <a type="text" @click="againWordTime">重新生成字幕时间</a>
-            <a size="medium" @click="compareTime('句子')">校对句子字幕时间</a>
+            <a size="medium" @click="openCheckSubtitles('句子')">校对句子字幕时间</a>
+            <!-- <a size="medium" @click="compareTime('句子')">校对句子字幕时间</a> -->
             <a size="medium" @click="compareTime('文字')">校对文字字幕时间</a>
           </template>
           <template v-else>
@@ -55,7 +56,12 @@
         <CheckArticle :data="data" @saveWord="saveWord" @savePinyin="savePinyin" @saveStyle="saveStyle" />
       </el-dialog>
       <el-dialog title="校对字幕时间" :visible.sync="compareShow" width="50%" :before-close="handleClose" top="0">
-        <CompareTime :data="compareData" :type="compareType" :changewords-result-list="changewordsResultList" />
+        <CompareTime
+          :data="compareData"
+          :type="compareType"
+          :changewords-result-list="changewordsResultList"
+          :openCheckSubtitles="openCheckSubtitles"
+        />
         <span slot="footer" class="dialog-footer">
           <el-button @click="handleClose">取 消</el-button>
           <el-button :loading="compareloading" type="primary" @click="saveCompare">确 定</el-button>
@@ -93,6 +99,13 @@
       >
         <CheckPic :data="data" />
       </el-dialog>
+      <CheckSubtitles
+        :visible.sync="visible"
+        :audio-id="data.mp3_list[0] && data.mp3_list[0].file_id ? data.mp3_list[0].file_id : ''"
+        :option-list="subtitleList"
+        @saveSubtitles="saveSubtitles"
+        v-if="visible"
+      />
     </template>
   </ModuleBase>
 </template>
@@ -105,6 +118,7 @@ import CompareTime from './CompareTime.vue';
 import NewWord from './NewWord.vue';
 import Notes from './Notes.vue';
 import CheckPic from './CheckPic.vue';
+import CheckSubtitles from '@/views/book/courseware/create/components/question/voice_matrix/CheckSubtitles.vue';
 
 import { getArticleData } from '@/views/book/courseware/data/article';
 import { TextToAudioFile } from '@/api/app';
@@ -128,6 +142,7 @@ export default {
     NewWord,
     Notes,
     CheckPic,
+    CheckSubtitles,
   },
   mixins: [ModuleMixin],
   data() {
@@ -139,6 +154,7 @@ export default {
       loading: false,
       isWordTime: false,
       compareType: '', // 校对类型
+      compareIndex: null, // 校对句子索引
       compareShow: false,
       compareData: null,
       compareloading: false,
@@ -146,6 +162,8 @@ export default {
       editWordIndex: 0,
       multilingualText: '',
       autoLoading: false,
+      visible: false,
+      subtitleList: [],
     };
   },
   watch: {
@@ -668,6 +686,60 @@ export default {
           this.autoLoading = false;
         });
     },
+    /**
+     * 打开校对字幕
+     */
+    openCheckSubtitles(type, index) {
+      this.compareType = type;
+      // this.compareData = JSON.parse(JSON.stringify(this.data.wordTime));
+      // this.compareShow = true;
+      if (this.data.mp3_list.length === 0) {
+        return this.$message.warning('请先上传音频文件');
+      }
+      this.subtitleList = [];
+      if (this.compareType === '句子') {
+        this.data.wordTime.forEach((item, index) => {
+          let obj = {
+            content: item.onebest,
+            lrc_data: {
+              begin_time: item.bg,
+              end_time: item.ed,
+            },
+          };
+          this.subtitleList.push(obj);
+        });
+      } else {
+        this.compareIndex = index;
+        this.data.wordTime[index].wordsResultList.forEach((item, index) => {
+          let obj = {
+            content: item.wordsName,
+            lrc_data: {
+              begin_time: item.wordBg,
+              end_time: item.wordEd,
+            },
+          };
+          this.subtitleList.push(obj);
+        });
+      }
+      this.visible = true;
+    },
+    /**
+     * 保存字幕
+     * @param {Array} dataList
+     */
+    saveSubtitles(dataList) {
+      if (this.compareType === '句子') {
+        this.data.wordTime.forEach((item, index) => {
+          item.bg = dataList[index] ? dataList[index].lrc_data.begin_time : 0;
+          item.ed = dataList[index] ? dataList[index].lrc_data.end_time : 0;
+        });
+      } else {
+        this.data.wordTime[this.compareIndex].wordsResultList.forEach((item, index) => {
+          item.wordBg = dataList[index] ? dataList[index].lrc_data.begin_time : 0;
+          item.wordEd = dataList[index] ? dataList[index].lrc_data.end_time : 0;
+        });
+      }
+    },
   },
 };
 </script>

src/views/book/courseware/create/components/question/article/CompareTime.vue

@@ -84,7 +84,7 @@
 export default {
   // import引入的组件需要注入到对象中才能使用
   components: {},
-  props: ['data', 'type', 'changewordsResultList'],
+  props: ['data', 'type', 'changewordsResultList', 'openCheckSubtitles'],
   data() {
     // 这里存放数据
     return {
@@ -117,9 +117,10 @@ export default {
       }
     },
     compareOneHZ(index) {
-      this.index = index;
-      this.wordData = JSON.parse(JSON.stringify(this.data[index].wordsResultList));
-      this.oneHZshow = true;
+      // this.index = index;
+      // this.wordData = JSON.parse(JSON.stringify(this.data[index].wordsResultList));
+      // this.oneHZshow = true;
+      this.openCheckSubtitles('文字', index);
     },
     savehz() {
       this.data[this.index].wordsResultList = JSON.parse(JSON.stringify(this.wordData));

src/views/book/courseware/create/components/question/dialogue_article/Article.vue

@@ -148,7 +148,8 @@
           <template v-if="data.wordTime && data.wordTime.length > 0">
             <!-- <span>已有字幕时间节点</span> -->
             <a type="text" @click="againWordTime">重新生成字幕时间</a>
-            <a size="medium" @click="compareTime('句子')">校对句子字幕时间</a>
+            <a size="medium" @click="openCheckSubtitles('句子')">校对句子字幕时间</a>
+            <!-- <a size="medium" @click="compareTime('句子')">校对句子字幕时间</a> -->
             <a size="medium" @click="compareTime('文字')">校对文字字幕时间</a>
           </template>
           <template v-else>
@@ -265,8 +266,14 @@
       >
         <CheckArticle :data="data" @saveWord="saveWord" @savePinyin="savePinyin" @saveStyle="saveStyle" />
       </el-dialog>
+
       <el-dialog title="校对字幕时间" :visible.sync="compareShow" width="50%" :before-close="handleClose" top="0">
-        <CompareTime :data="compareData" :type="compareType" :changewords-result-list="changewordsResultList" />
+        <CompareTime
+          :data="compareData"
+          :type="compareType"
+          :changewords-result-list="changewordsResultList"
+          :openCheckSubtitles="openCheckSubtitles"
+        />
         <span slot="footer" class="dialog-footer">
           <el-button @click="handleClose">取 消</el-button>
           <el-button :loading="compareloading" type="primary" @click="saveCompare">确 定</el-button>
@@ -290,6 +297,13 @@
         <NewWord v-if="editWordIndex === 2" :data-new-word="data.other_word_list" @sureNewWords="sureOtherNewWords" />
       </template>
       <!-- </el-dialog> -->
+      <CheckSubtitles
+        :visible.sync="visible"
+        :audio-id="data.mp3_list[0] && data.mp3_list[0].file_id ? data.mp3_list[0].file_id : ''"
+        :option-list="subtitleList"
+        @saveSubtitles="saveSubtitles"
+        v-if="visible"
+      />
     </template>
   </ModuleBase>
 </template>
@@ -301,6 +315,7 @@ import CheckArticle from '../article/CheckArticle.vue';
 import CompareTime from '../article/CompareTime.vue';
 import NewWord from '../article/NewWord.vue';
 import Notes from '../article/Notes.vue';
+import CheckSubtitles from '@/views/book/courseware/create/components/question/voice_matrix/CheckSubtitles.vue';
 
 import { getArticleData } from '@/views/book/courseware/data/dialogueArticle';
 import { fileUpload, TextToAudioFile } from '@/api/app';
@@ -323,6 +338,7 @@ export default {
     CompareTime,
     NewWord,
     Notes,
+    CheckSubtitles,
   },
   mixins: [ModuleMixin],
   data() {
@@ -333,6 +349,7 @@ export default {
       loading: false,
       isWordTime: false,
       compareType: '', // 校对类型
+      compareIndex: null, // 校对句子索引
       compareShow: false,
       compareData: null,
       compareloading: false,
@@ -346,6 +363,8 @@ export default {
       paraIndex: 0,
       multilingualText: '',
       autoLoading: false,
+      visible: false,
+      subtitleList: [],
     };
   },
   watch: {
@@ -1004,6 +1023,60 @@ export default {
           this.autoLoading = false;
         });
     },
+    /**
+     * 打开校对字幕
+     */
+    openCheckSubtitles(type, index) {
+      this.compareType = type;
+      // this.compareData = JSON.parse(JSON.stringify(this.data.wordTime));
+      // this.compareShow = true;
+      if (this.data.mp3_list.length === 0) {
+        return this.$message.warning('请先上传音频文件');
+      }
+      this.subtitleList = [];
+      if (this.compareType === '句子') {
+        this.data.wordTime.forEach((item, index) => {
+          let obj = {
+            content: item.onebest,
+            lrc_data: {
+              begin_time: item.bg,
+              end_time: item.ed,
+            },
+          };
+          this.subtitleList.push(obj);
+        });
+      } else {
+        this.compareIndex = index;
+        this.data.wordTime[index].wordsResultList.forEach((item, index) => {
+          let obj = {
+            content: item.wordsName,
+            lrc_data: {
+              begin_time: item.wordBg,
+              end_time: item.wordEd,
+            },
+          };
+          this.subtitleList.push(obj);
+        });
+      }
+      this.visible = true;
+    },
+    /**
+     * 保存字幕
+     * @param {Array} dataList
+     */
+    saveSubtitles(dataList) {
+      if (this.compareType === '句子') {
+        this.data.wordTime.forEach((item, index) => {
+          item.bg = dataList[index] ? dataList[index].lrc_data.begin_time : 0;
+          item.ed = dataList[index] ? dataList[index].lrc_data.end_time : 0;
+        });
+      } else {
+        this.data.wordTime[this.compareIndex].wordsResultList.forEach((item, index) => {
+          item.wordBg = dataList[index] ? dataList[index].lrc_data.begin_time : 0;
+          item.wordEd = dataList[index] ? dataList[index].lrc_data.end_time : 0;
+        });
+      }
+    },
   },
 };
 </script>