听录音选音节增加大点和lrc

src/components/Adult/inputModules/PurePreview.vue

@@ -16,6 +16,37 @@
           @blur="onBlur(curQue, 'title')"
         ></el-input>
       </div>
+      <template v-if="type == 'listen_record_single_syllable_chs'">
+        <div class="adult-book-input-item">
+          <span class="adult-book-lable">题目音频：</span>
+          <Upload
+            :changeFillId="timuchangeMp3"
+            :datafileList="curQue.mp3_list"
+            :filleNumber="mp3Number"
+            :uploadType="'mp3'"
+          />
+        </div>
+        <div class="adult-book-input-item">
+          <span class="adult-book-lable">题目lrc：</span>
+          <Upload
+            :changeFillId="changeLrc"
+            :datafileList="curQue.lrc_list"
+            :filleNumber="mp3Number"
+            :uploadType="'lrc'"
+          />
+        </div>
+        <div class="adult-book-input-item">
+          <span class="adult-book-lable"></span>
+          <el-button
+            type="primary"
+            size="small"
+            class="distribution"
+            @click="parseLrcFile"
+          >
+            分配lrc
+          </el-button>
+        </div>
+      </template>
       <template
         v-if="type == 'text_problem_chs' || type == 'newWord_preview_chs'"
       >
@@ -152,7 +183,7 @@
       <template v-if="type == 'listen_record_single_syllable_chs'">
         <div
           class="Big-Book-main"
-          v-for="(item, index) in curQue"
+          v-for="(item, index) in curQue.option"
           :key="item + index"
           style="margin-bottom: 20px"
         >
@@ -167,13 +198,13 @@
               @blur="onBlur(item, 'number')"
             ></el-input>
             <img
-              @click="deleteyinjie(index, itI)"
+              @click="deleteOptionOne(index, itI)"
               class="close"
               src="../../../assets/adult/del-close.png"
               alt=""
             />
           </div>
-          <div class="adult-book-input-item">
+          <!-- <div class="adult-book-input-item">
             <span class="adult-book-lable">音频：</span>
             <Upload
               :changeFillId="listenchangeMp3"
@@ -182,6 +213,26 @@
               :uploadType="'mp3'"
               :index="index"
             />
+          </div> -->
+          <div class="adult-book-input-item" v-if="curQue.wordTime.length > 0">
+            <span class="adult-book-lable">字幕时间：</span>
+            <div style="display: flex; align-items: center">
+              <el-input
+                class="adult-book-input"
+                type="textarea"
+                style="width: 200px"
+                v-model="curQue.wordTime[index].bg"
+                @blur="onBlur(curQue.wordTime[index], 'bg')"
+              ></el-input>
+              ~
+              <el-input
+                class="adult-book-input"
+                style="width: 200px"
+                type="textarea"
+                v-model="curQue.wordTime[index].ed"
+                @blur="onBlur(curQue.wordTime[index], 'ed')"
+              ></el-input>
+            </div>
           </div>
           <div v-for="(it, itI) in item.option" :key="'it' + itI">
             <div class="adult-book-input-item">
@@ -210,7 +261,6 @@
       <div class="Big-Book-addrole">
         <div class="addoption" @click="addOption">添加一个</div>
       </div>
-
       <template v-if="type == 'newWord_preview_chs'">
         <div class="Big-Book-divide">
           <el-divider content-position="center">功能设置</el-divider>
@@ -226,19 +276,64 @@
           </el-select>
         </div>
       </template>
+      <template v-if="type == 'listen_record_single_syllable_chs'">
+        <!-- <div class="lrc-box">
+          <div
+            v-if="this.curQue.wordTime && this.curQue.wordTime.length > 0"
+            class="lrc-box"
+          >
+            <span>已有字幕时间节点</span>
+            <el-button type="text" @click="againWordTime">重新生成</el-button>
+            <el-button @click="compareTime('句子')" size="medium"
+              >校对句子字幕时间</el-button
+            >
+            <el-button @click="compareTime('文字')" size="medium"
+              >校对文字字幕时间</el-button
+            >
+          </div>
+          <template v-else>
+            <el-button v-if="!isWordTime" size="medium" @click="createWordTime"
+              >自动生成字幕节点</el-button
+            >
+            <p v-else>字幕节点生成中...请等待</p>
+          </template>
+        </div> -->
+      </template>
     </div>
+    <!-- <el-dialog
+      title="校对字幕时间"
+      :visible.sync="compareShow"
+      width="50%"
+      :before-close="handleClose"
+      top="0"
+    >
+      <CompareTime
+        :data="compareData"
+        :type="compareType"
+        :changewordsResultList="changewordsResultList"
+      />
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="handleClose">取 消</el-button>
+        <el-button :loading="compareloading" type="primary" @click="saveCompare"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog> -->
   </div>
 </template>
 
 <script>
 import Upload from "../common/Upload";
 import SentenceSegwordChs from "../common/SentenceSegwordChs/index.vue";
+import { getWordTime, getContentFile, prepareTranscribe } from "@/api/ajax";
+import CompareTime from "./ArticleTemChs/components/CompareTime.vue";
 export default {
   name: "PurePreview",
   props: ["curQue", "fn_data", "changeCurQue", "type"],
   components: {
     SentenceSegwordChs,
     Upload,
+    CompareTime,
   },
   data() {
     return {
@@ -336,42 +431,91 @@ export default {
           ],
         },
       },
-      data_structure3: [
-        {
-          type: "listen_record_single_syllable_chs",
-          name: "听录音选择音节",
-          title: "",
-          mp3_list: [],
-          number: "",
-          option: [
-            {
-              number: "",
-              pinyin: "", //拼音
-            },
-          ],
-        },
-      ],
+      data_structure3: {
+        type: "listen_record_single_syllable_chs",
+        name: "听录音选择音节",
+        title: "",
+        mp3_list: [],
+        number: "",
+        wordTime: [],
+        option: [
+          {
+            number: "",
+            mp3_list: [],
+            option: [
+              {
+                number: "",
+                pinyin: "", //拼音
+              },
+            ],
+          },
+        ],
+      },
+      isWordTime: false,
+      compareType: "", //校对类型
+      compareShow: false,
+      compareData: null,
+      compareloading: false,
+      CreadMp3loading: false,
+      loading: false,
     };
   },
   computed: {},
   watch: {},
   //方法集合
   methods: {
+    // 校对每个字的时间
+    changewordsResultList(index, item) {
+      this.curQue.wordTime[index].wordsResultList = JSON.parse(
+        JSON.stringify(item)
+      );
+    },
+    // 保存校对
+    saveCompare() {
+      if (this.compareType == "文字") {
+        this.compareloading = false;
+        return;
+      }
+      this.compareloading = true;
+      compareSenTenceTime({ matchList: JSON.stringify(this.compareData) })
+        .then((res) => {
+          console.log(res);
+          this.compareloading = false;
+          this.curQue.wordTime = res.data.result;
+        })
+        .catch(() => {
+          this.compareloading = false;
+        });
+    },
+    // 校对时间
+    compareTime(type) {
+      this.compareType = type;
+      this.compareData = JSON.parse(JSON.stringify(this.curQue.wordTime));
+      this.compareShow = true;
+    },
+    handleClose() {
+      this.compareShow = false;
+      this.compareData = null;
+      this.compareType = "";
+    },
+
     forupdata() {
       this.$forceUpdate();
     },
     // 添加音节
     addyinjie(index) {
-      let obj = JSON.parse(JSON.stringify(this.data_structure3[0].option[0]));
-      this.curQue[index].option.push(obj);
+      let obj = JSON.parse(
+        JSON.stringify(this.data_structure3.option[0].option[0])
+      );
+      this.curQue.option[index].option.push(obj);
     },
     // 删除音节
     deleteyinjie(index, yjIndex) {
-      if (this.curQue[index].option.length <= 1) {
+      if (this.curQue.option[index].option.length <= 1) {
         this.$message.warning("至少要保留1个音节");
         return;
       }
-      this.curQue[index].option.splice(yjIndex, 1);
+      this.curQue.option[index].option.splice(yjIndex, 1);
     },
     onBlur(item, field) {
       item[field] = item[field] ? item[field].trim() : "";
@@ -379,10 +523,12 @@ export default {
     // 删除其中一个选项
     deleteOptionOne(index) {
       if (this.type == "listen_record_single_syllable_chs") {
-        if (this.curQue[index].option.length <= 1) {
+        if (this.curQue.option.length <= 1) {
           this.$message.warning("至少要保留1个选项");
           return;
         }
+        this.curQue.option.splice(index, 1);
+        return;
       }
       if (this.curQue.option.length <= 1) {
         this.$message.warning("至少要保留1个选项");
@@ -400,8 +546,8 @@ export default {
         obj = JSON.parse(JSON.stringify(this.data_structure.option[0]));
         this.curQue.option.push(obj);
       } else if (this.type == "listen_record_single_syllable_chs") {
-        obj = JSON.parse(JSON.stringify(this.data_structure3[0]));
-        this.curQue.push(obj);
+        obj = JSON.parse(JSON.stringify(this.data_structure3.option[0]));
+        this.curQue.option.push(obj);
       }
     },
     initcurQue() {
@@ -487,6 +633,110 @@ export default {
       });
       this.curQue.mp3_list = JSON.parse(JSON.stringify(articleImgRes));
     },
+    // 上传音频文件
+    handleChange(file, fileList) {
+      let _this = this;
+      _this.getBase64(file.raw).then((res) => {
+        let base_res = res.split("base64,");
+        let data = {
+          fileName: file.raw.name,
+          speechBase64: base_res[1],
+          language: "ch",
+        };
+        prepareTranscribe(data).then((res) => {
+          _this.$set(_this.curQue, "taskId", res.data.taskId);
+        });
+      });
+    },
+    getBase64(file) {
+      return new Promise(function (resolve, reject) {
+        let reader = new FileReader();
+        let imgResult = "";
+        reader.readAsDataURL(file);
+        reader.onload = function () {
+          imgResult = reader.result;
+        };
+        reader.onerror = function (error) {
+          reject(error);
+        };
+        reader.onloadend = function () {
+          resolve(imgResult);
+        };
+      });
+    },
+    createWordTime() {
+      if (this.curQue.taskId) {
+        let verseList = [];
+        this.curQue.option.forEach((item, index) => {
+          item.forEach((sItem, sIndex) => {
+            verseList.push(sItem.new_word);
+          });
+        });
+        if (verseList.length > 0) {
+          this.isWordTime = true;
+          let data = {
+            taskId: this.curQue.taskId,
+            verseList: JSON.stringify(verseList),
+            matchType: "chinese",
+            language: "ch",
+          };
+          getWordTime(data).then((res) => {
+            this.curQue.wordTime = res.data.result;
+            this.isWordTime = false;
+          });
+        }
+      } else {
+        this.$message.warning("请先上传音频");
+      }
+    },
+    parseLrcFile() {
+      let lrcList = this.curQue.lrc_list;
+      if (lrcList.length === 0) {
+        return this.$message.warning("请先上传lrc文件");
+      }
+      this.loading = this.$loading({
+        lock: true,
+        text: "Loading",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      getContentFile("tool-ParseLRCFile", {
+        content_type: "FILE",
+        file_id: this.curQue.lrc_list[0].file_id,
+      }).then(({ lrc_list }) => {
+        let lrc_list_res = [];
+        lrc_list.forEach((item) => {
+          let obj = {
+            bg: item.begin_time,
+            ed: item.end_time,
+          };
+          lrc_list_res.push(obj);
+        });
+        this.curQue.wordTime = lrc_list_res;
+        this.$forceUpdate();
+        this.loading.close();
+      });
+    },
+    againWordTime() {
+      this.isWordTime = false;
+      this.$set(this.curQue, "wordTime", []);
+    },
+    changeLrc(fileList) {
+      let lrc_list = [];
+      fileList.forEach(({ response, name }) => {
+        if (response) {
+          let fileList = response.file_info_list[0];
+          lrc_list.push({
+            name,
+            duration: fileList.media_duration,
+            url: fileList.file_url,
+            id: "[FID##" + fileList.file_id + "##FID]",
+            file_id: fileList.file_id,
+          });
+        }
+      });
+      this.curQue.lrc_list = lrc_list;
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -536,6 +786,11 @@ export default {
           }
         });
       }
+      if (this.type == "listen_record_single_syllable_chs") {
+        if (!this.curQue.wordTime) {
+          this.curQue.wordTime = [];
+        }
+      }
     }
   },
   //生命周期 - 挂载完成（可以访问DOM元素）