课文多语言监听

src/views/book/courseware/preview/components/article/index.vue

@@ -79,9 +79,9 @@
             :config="config"
             :NNPEAnnotationList="NNPEAnnotationList"
             :col-length="colLength"
-            @changeConfig="changeConfig"
             :multilingual="showLang && getLang() ? getLang() : ''"
             :attrib="data.unified_attrib"
+            @changeConfig="changeConfig"
           />
           <PhraseModel
             v-if="showPhrases"
@@ -98,9 +98,9 @@
             :NNPEAnnotationList="NNPEAnnotationList"
             :col-length="colLength"
             :NpcNewWordMp3="NpcNewWordMp3"
-            @changeConfig="changeConfig"
             :multilingual="showLang && getLang() ? getLang() : ''"
             :attrib="data.unified_attrib"
+            @changeConfig="changeConfig"
           />
           <Practice
             v-if="showPractice"
@@ -116,9 +116,9 @@
             :col-length="colLength"
             :NpcNewWordMp3="NpcNewWordMp3"
             :is-full="isFull"
-            @changeConfig="changeConfig"
             :multilingual="showLang && getLang() ? getLang() : ''"
             :attrib="data.unified_attrib"
+            @changeConfig="changeConfig"
           />
           <WordModel
             v-if="showWord"
@@ -134,9 +134,9 @@
             :config="config"
             :TaskModel="isJudgingRightWrong ? 'ANSWER' : ''"
             :col-length="colLength"
-            @changeConfig="changeConfig"
             :multilingual="showLang && getLang() ? getLang() : ''"
             :attrib="data.unified_attrib"
+            @changeConfig="changeConfig"
           />
         </div>
         <div :id="'screen-' + mathNum" class="voice-full-screen">
@@ -154,23 +154,23 @@
             :config="config"
             :TaskModel="isJudgingRightWrong ? 'ANSWER' : ''"
             :NpcNewWordMp3="NpcNewWordMp3"
+            :attrib="data.unified_attrib"
             @handleWav="handleWav"
             @changePinyin="changePinyins"
             @changeEN="changeENs"
             @exitFullscreen="exitFullscreen"
             @changeIsFull="changeIsFull"
-            :attrib="data.unified_attrib"
           />
         </div>
       </div>
       <template v-if="data.new_word_list.new_word_list.length > 0">
-        <NewWordPreview :newData="data.new_word_list"></NewWordPreview>
+        <NewWordPreview :new-data="data.new_word_list" />
       </template>
       <template v-if="data.other_word_list.new_word_list.length > 0">
-        <NewWordPreview :newData="data.other_word_list"></NewWordPreview>
+        <NewWordPreview :new-data="data.other_word_list" />
       </template>
       <template v-if="data.notes_list.option.length > 0">
-        <NotesPreview :notesData="data.notes_list"></NotesPreview>
+        <NotesPreview :notes-data="data.notes_list" />
       </template>
     </div>
   </div>
@@ -249,6 +249,27 @@ export default {
   },
   computed: {},
   watch: {
+    showLang: {
+      handler(val) {
+        if (val) {
+          this.data.multilingual.forEach((item) => {
+            let trans_arr = item.translation.split('\n');
+            this.data.detail.forEach((items) => {
+              let items_trans_arr = [];
+              if (!items.hasOwnProperty('multilingualTextList')) {
+                this.$set(items, 'multilingualTextList', {});
+              }
+              if (items.para) {
+                items_trans_arr = trans_arr.splice(0, items.sentences.length);
+              }
+              this.$set(items.multilingualTextList, item.type, items_trans_arr);
+            });
+          });
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
     'data.content': {
       handler(val) {
         if (val) {

src/views/book/courseware/preview/components/dialogue_article/index.vue

@@ -9,13 +9,13 @@
           <a class="ArticleView-full" @click="fullScreen">黑板模式</a>
           <div>
             <div
-              class="left"
-              @click="submit"
-              :style="{ marginLeft: '104px' }"
               v-if="
                 (tokenData && tokenData.popedom_code_list && tokenData.popedom_code_list.indexOf(2100001) != -1) ||
                 (tokenData && tokenData.user_type === 'APP')
               "
+              class="left"
+              :style="{ marginLeft: '104px' }"
+              @click="submit"
             >
               <!-- <img src="@/assets/wbfx-icon.png" alt="" /> -->
               文本分析
@@ -24,139 +24,136 @@
           <div class="right">
             <template v-if="data.property.is_enable_new_word === 'true'">
               <el-switch
-                style="display: block"
                 v-model="showPhrases"
+                style="display: block"
                 :active-color="bookInfo.theme_color"
                 inactive-color="rgba(0,0,0,0.1)"
                 active-text=""
                 inactive-text="本课生词"
                 @change="handleSwitchChange('showPractice', 'showWord')"
-              >
-              </el-switch>
+              />
             </template>
             <template v-if="data.property.is_enable_read === 'true'">
               <el-switch
-                style="display: block"
                 v-model="showPractice"
+                style="display: block"
                 :active-color="bookInfo.theme_color"
                 inactive-color="rgba(0,0,0,0.1)"
                 active-text=""
                 inactive-text="语音练习"
                 @change="handleSwitchChange('showPhrases', 'showWord')"
-              >
-              </el-switch>
+              />
             </template>
             <template v-if="data.property.is_enable_word === 'true'">
               <el-switch
-                style="display: block"
                 v-model="showWord"
+                style="display: block"
                 :active-color="bookInfo.theme_color"
                 inactive-color="rgba(0,0,0,0.1)"
                 active-text=""
                 inactive-text="取词"
                 @change="handleSwitchChange('showPhrases', 'showPractice')"
-              >
-              </el-switch>
+              />
             </template>
           </div>
         </div>
-        <div class="ArticleView-body" ref="ArticleViewbody">
+        <div ref="ArticleViewbody" class="ArticleView-body">
           <NormalModelChs
-            :curQue="data"
-            :titleFontsize="titleFontsize"
-            :wordFontsize="wordFontsize"
-            :bodyLeft="bodyLeft"
-            :bodyWidth="bodyWidth"
-            :attrib="data.unified_attrib"
-            :noFont="noFont"
             v-if="!showPhrases && !showPractice && !showWord"
+            :cur-que="data"
+            :title-fontsize="titleFontsize"
+            :word-fontsize="wordFontsize"
+            :body-left="bodyLeft"
+            :body-width="bodyWidth"
+            :attrib="data.unified_attrib"
+            :no-font="noFont"
             :config="config"
-            @changeConfig="changeConfig"
             :NNPEAnnotationList="NNPEAnnotationList"
-            :colLength="colLength"
+            :col-length="colLength"
             :multilingual="showLang && getLang() ? getLang() : ''"
+            @changeConfig="changeConfig"
           />
           <PhraseModel
-            :curQue="data"
-            :titleFontsize="titleFontsize"
-            :wordFontsize="wordFontsize"
+            v-if="showPhrases"
+            :cur-que="data"
+            :title-fontsize="titleFontsize"
+            :word-fontsize="wordFontsize"
             :NNPENewWordList="NNPENewWordList"
             :attrib="data.unified_attrib"
-            :noFont="noFont"
-            :bodyLeft="bodyLeft"
-            v-if="showPhrases"
+            :no-font="noFont"
+            :body-left="bodyLeft"
             :config="config"
-            @changeConfig="changeConfig"
             :TaskModel="isJudgingRightWrong ? 'ANSWER' : ''"
             :NNPEAnnotationList="NNPEAnnotationList"
-            :colLength="colLength"
+            :col-length="colLength"
             :NpcNewWordMp3="NpcNewWordMp3"
             :multilingual="showLang && getLang() ? getLang() : ''"
+            @changeConfig="changeConfig"
           />
           <Practice
-            :curQue="data"
-            :titleFontsize="titleFontsize"
-            :wordFontsize="wordFontsize"
+            v-if="showPractice"
+            :cur-que="data"
+            :title-fontsize="titleFontsize"
+            :word-fontsize="wordFontsize"
             :attrib="data.unified_attrib"
-            :noFont="noFont"
+            :no-font="noFont"
             :NNPENewWordList="NNPENewWordList"
-            v-if="showPractice"
             :config="config"
-            @changeConfig="changeConfig"
             :TaskModel="isJudgingRightWrong ? 'ANSWER' : ''"
-            :colLength="colLength"
+            :col-length="colLength"
             :NpcNewWordMp3="NpcNewWordMp3"
-            :isFull="isFull"
+            :is-full="isFull"
             :multilingual="showLang && getLang() ? getLang() : ''"
+            @changeConfig="changeConfig"
           />
           <WordModel
-            :curQue="data"
-            :titleFontsize="titleFontsize"
-            :wordFontsize="wordFontsize"
-            :bodyLeft="bodyLeft"
-            :bodyWidth="bodyWidth"
+            v-if="showWord"
+            :cur-que="data"
+            :title-fontsize="titleFontsize"
+            :word-fontsize="wordFontsize"
+            :body-left="bodyLeft"
+            :body-width="bodyWidth"
             :NNPENewWordList="NNPENewWordList"
             :attrib="data.unified_attrib"
-            :noFont="noFont"
-            v-if="showWord"
+            :no-font="noFont"
             :config="config"
-            @changeConfig="changeConfig"
             :TaskModel="isJudgingRightWrong ? 'ANSWER' : ''"
-            :colLength="colLength"
+            :col-length="colLength"
             :multilingual="showLang && getLang() ? getLang() : ''"
+            @changeConfig="changeConfig"
           />
         </div>
-        <div class="voice-full-screen" :id="'screen-' + mathNum">
+        <div :id="'screen-' + mathNum" class="voice-full-screen">
           <Voicefullscreen
             v-if="isFull && resObj"
-            :themeColor="bookInfo.theme_color"
-            :curQue="data"
-            :sentList="resObj.sentList"
-            :sentIndex="0"
+            :theme-color="bookInfo.theme_color"
+            :cur-que="data"
+            :sent-list="resObj.sentList"
+            :sent-index="0"
             :mp3="data.mp3_list && data.mp3_list[0] ? data.mp3_list[0].url : ''"
-            :noFont="noFont"
+            :no-font="noFont"
             :NNPENewWordList="NNPENewWordList"
-            :isFull="isFull"
+            :is-full="isFull"
             :config="config"
             :TaskModel="isJudgingRightWrong ? 'ANSWER' : ''"
+            :NpcNewWordMp3="NpcNewWordMp3"
+            :attrib="data.unified_attrib"
             @handleWav="handleWav"
             @changePinyin="changePinyins"
             @changeEN="changeENs"
             @exitFullscreen="exitFullscreen"
             @changeIsFull="changeIsFull"
-            :NpcNewWordMp3="NpcNewWordMp3"
-            :attrib="data.unified_attrib"
           />
         </div>
       </div>
       <template v-if="data.new_word_list.new_word_list.length > 0">
-        <NewWordPreview :newData="data.new_word_list"></NewWordPreview>
+        <NewWordPreview :new-data="data.new_word_list" />
       </template>
       <template v-if="data.other_word_list.new_word_list.length > 0">
-        <NewWordPreview :newData="data.other_word_list"></NewWordPreview>
+        <NewWordPreview :new-data="data.other_word_list" />
       </template>
       <template v-if="data.notes_list.option.length > 0">
-        <NotesPreview :notesData="data.notes_list"></NotesPreview>
+        <NotesPreview :notes-data="data.notes_list" />
       </template>
     </div>
   </div>
@@ -190,40 +187,6 @@ export default {
   },
   mixins: [PreviewMixin],
   inject: ['bookInfo'],
-  watch: {
-    'data.detail.length': {
-      handler(val) {
-        if (val) {
-          this.handleData();
-          let _this = this;
-          // if (!this.isJudgingRightWrong) {
-          // let userAnswer = JSON.parse(JSON.stringify(_this.userAnswer));
-          // _this.$set(this.data, 'Bookanswer', userAnswer);
-          // }
-          _this.$nextTick(() => {
-            _this.bodyLeft = _this.$refs.ArticleViewbody.getBoundingClientRect().left;
-          });
-          for (let i = 0; i < this.data.detail.length; i++) {
-            let enStr = this.data.detail[i].sentencesEn ? this.data.detail[i].sentencesEn.join('') : '';
-            if (enStr) {
-              this.config.isShowEN = false;
-              this.config.isHasEN = true;
-            }
-            let pinyin = this.handleObj(this.data.detail[i].wordsList);
-            if (pinyin && this.isEnable(this.data.property.view_pinyin)) {
-              this.config.isShowPY = true;
-              this.config.isHasPY = true;
-            }
-            if (enStr && pinyin) {
-              break;
-            }
-          }
-        }
-      },
-      deep: true,
-      immediate: true,
-    },
-  },
   data() {
     return {
       data: getArticleData(),
@@ -247,8 +210,8 @@ export default {
         normalModel: {
           recordList: [],
         },
-        writeModel: {}, //生词/取词模式
-        practiceModel: {}, //练习模式
+        writeModel: {}, // 生词/取词模式
+        practiceModel: {}, // 练习模式
         wordModel: {
           recordList: [],
         },
@@ -270,6 +233,61 @@ export default {
     };
   },
   computed: {},
+  watch: {
+    showLang: {
+      handler(val) {
+        if (val) {
+          this.data.multilingual.forEach((item) => {
+            let trans_arr = item.translation.split('\n');
+            this.data.detail.forEach((items) => {
+              let items_trans_arr = [];
+              if (!items.hasOwnProperty('multilingualTextList')) {
+                this.$set(items, 'multilingualTextList', {});
+              }
+              if (items.para) {
+                items_trans_arr = trans_arr.splice(0, items.sentences.length);
+              }
+              this.$set(items.multilingualTextList, item.type, items_trans_arr);
+            });
+          });
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+    'data.detail.length': {
+      handler(val) {
+        if (val) {
+          this.handleData();
+          let _this = this;
+          // if (!this.isJudgingRightWrong) {
+          // let userAnswer = JSON.parse(JSON.stringify(_this.userAnswer));
+          // _this.$set(this.data, 'Bookanswer', userAnswer);
+          // }
+          _this.$nextTick(() => {
+            _this.bodyLeft = _this.$refs.ArticleViewbody.getBoundingClientRect().left;
+          });
+          for (let i = 0; i < this.data.detail.length; i++) {
+            let enStr = this.data.detail[i].sentencesEn ? this.data.detail[i].sentencesEn.join('') : '';
+            if (enStr) {
+              this.config.isShowEN = false;
+              this.config.isHasEN = true;
+            }
+            let pinyin = this.handleObj(this.data.detail[i].wordsList);
+            if (pinyin && this.isEnable(this.data.property.view_pinyin)) {
+              this.config.isShowPY = true;
+              this.config.isHasPY = true;
+            }
+            if (enStr && pinyin) {
+              break;
+            }
+          }
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
   created() {},
   methods: {
     changeConfig(obj) {
@@ -278,7 +296,7 @@ export default {
     changeIsFull() {
       this.isFull = false;
     },
-    //拼音的显示和隐藏
+    // 拼音的显示和隐藏
     changePinyins() {
       if (this.config.isHasPY) {
         this.changeConfig('isShowPY');
@@ -294,13 +312,13 @@ export default {
     handleFontsize(symbol) {
       if (symbol == '+') {
         if (this.wordFontsize < 24) {
-          this.titleFontsize = this.titleFontsize + 2;
-          this.wordFontsize = this.wordFontsize + 2;
+          this.titleFontsize += 2;
+          this.wordFontsize += 2;
         }
       } else if (symbol == '-') {
         if (this.wordFontsize > 12) {
-          this.titleFontsize = this.titleFontsize - 2;
-          this.wordFontsize = this.wordFontsize - 2;
+          this.titleFontsize -= 2;
+          this.wordFontsize -= 2;
         }
       }
     },
@@ -331,14 +349,14 @@ export default {
         text: this.data.content,
       })
         .then((res) => {
-          window.open(window.location.origin + `/GCLS-TC/#/textanalysis/Result?id=${res.record.id}&type=文本分析`);
+          window.open(`${window.location.origin}/GCLS-TC/#/textanalysis/Result?id=${res.record.id}&type=文本分析`);
           loading.close();
         })
         .catch((res) => {
           loading.close();
         });
     },
-    //语音全屏
+    // 语音全屏
     fullScreen() {
       this.pauseAudio();
       this.pauseVideo();
@@ -362,8 +380,8 @@ export default {
       }
     },
     goFullscreen() {
-      let id = 'screen-' + this.mathNum;
-      var element = document.getElementById(id);
+      let id = `screen-${this.mathNum}`;
+      let element = document.getElementById(id);
       if (element.requestFullscreen) {
         element.requestFullscreen();
       } else if (element.msRequestFullscreen) {
@@ -424,9 +442,9 @@ export default {
         .concat(this.data.new_word_list.new_word_list)
         .concat(this.data.other_word_list.new_word_list);
       this.NNPEAnnotationList = this.data.notes_list.option;
-      let resArr = [],
-        sentArrTotal = [],
-        timeArr = [];
+      let resArr = [];
+      let sentArrTotal = [];
+      let timeArr = [];
       let curQue = JSON.parse(JSON.stringify(this.data));
       let wordTimeList = curQue.wordTime;
       let dhaspinyin = false; // 每段是否有拼音
@@ -446,30 +464,28 @@ export default {
               if (!this.highWords) {
                 this.findLightWord(wItem, wIndex, sentence, sItem);
                 words = this.highWords ? this.highWords.words : '';
+              } else if (wIndex > this.highWords.endIndex - 1) {
+                this.highWords = null;
+                this.findLightWord(wItem, wIndex, sentence, sItem);
+                words = this.highWords ? this.highWords.words : '';
               } else {
-                if (wIndex > this.highWords.endIndex - 1) {
-                  this.highWords = null;
-                  this.findLightWord(wItem, wIndex, sentence, sItem);
-                  words = this.highWords ? this.highWords.words : '';
-                } else {
-                  words = this.highWords ? this.highWords.words : '';
-                }
+                words = this.highWords ? this.highWords.words : '';
               }
             }
             let obj = {
-              paraIndex: dIndex, //段落索引
-              sentIndex: sIndex, //在段落中句子索引
-              wordIndex: wIndex, //单词的索引
+              paraIndex: dIndex, // 段落索引
+              sentIndex: sIndex, // 在段落中句子索引
+              wordIndex: wIndex, // 单词的索引
               pinyin: wItem.pinyin,
               chs: wItem.chs,
               padding: true,
               className: wItem.className,
               isShow: wItem.isShow,
-              startIndex: startIndex,
-              endIndex: endIndex,
+              startIndex,
+              endIndex,
               leg: wItem.chs.length,
               timeList: [],
-              words: words,
+              words,
               config: {
                 fontFamily: wItem.fontFamily,
               },
@@ -478,7 +494,7 @@ export default {
             if (wItem.pinyin) dhaspinyin = true;
           });
           let objs = {
-            sentArr: sentArr,
+            sentArr,
             enwords: dItem.sentencesEn && dItem.sentencesEn[sIndex] && dItem.sentencesEn[sIndex].replace(/\'/g, '’'),
           };
           sentArrTotal.push(sentArr);
@@ -502,8 +518,8 @@ export default {
       });
       this.resObj = {
         sentList: resArr,
-        timeList: timeList,
-        dhaspinyinArr: dhaspinyinArr,
+        timeList,
+        dhaspinyinArr,
       };
     },
     mergeWordTime(resArr, wordTimeList) {
@@ -517,43 +533,41 @@ export default {
       });
     },
     findLightWord(wItem, startIndex, sentence, sItem) {
-      let words = '',
-        endIndex = 0;
+      let endIndex = 0;
+      let words = '';
       this.newWordList.forEach((item) => {
         if (item.length == 1) {
           if (item == wItem.chs && !wItem.banLight) {
             words = wItem.chs;
             endIndex = startIndex + 1;
           }
-        } else {
-          if (item[0] == wItem.chs && sentence.indexOf(item) > -1) {
-            let index = null;
-            let chsStr = '';
-            for (let i = startIndex; i < sItem.length + 1; i++) {
-              index = i;
-              if (chsStr.length == item.length) {
-                break;
-              } else {
-                chsStr += sItem[i] ? sItem[i].chs : '';
-              }
-            }
-            if (chsStr == item && !wItem.banLight) {
-              words = item;
-              endIndex = index;
+        } else if (item[0] == wItem.chs && sentence.indexOf(item) > -1) {
+          let index = null;
+          let chsStr = '';
+          for (let i = startIndex; i < sItem.length + 1; i++) {
+            index = i;
+            if (chsStr.length == item.length) {
+              break;
+            } else {
+              chsStr += sItem[i] ? sItem[i].chs : '';
             }
-          } else if (wItem.new_word && wItem.new_word == item && !wItem.banLight) {
+          }
+          if (chsStr == item && !wItem.banLight) {
             words = item;
-            endIndex = startIndex + 1;
+            endIndex = index;
           }
+        } else if (wItem.new_word && wItem.new_word == item && !wItem.banLight) {
+          words = item;
+          endIndex = startIndex + 1;
         }
       });
       if (words) {
-        this.highWords = { words: words, endIndex: endIndex };
+        this.highWords = { words, endIndex };
       } else {
         this.highWords = null;
       }
     },
-    //词和标点合一起
+    // 词和标点合一起
     mergeWordSymbol(wItem) {
       if (this.chsFhList.indexOf(wItem.chs) > -1) {
         wItem.isShow = false;
@@ -562,7 +576,7 @@ export default {
       }
     },
     handleWav(list, tmIndex) {
-      tmIndex = tmIndex ? tmIndex : 0;
+      tmIndex = tmIndex || 0;
       this.data.Bookanswer.practiceModel[tmIndex] = {
         recordList: [],
       };