文章和对话课文新增关联生词和注释

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

@@ -134,6 +134,7 @@
                                 item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].bg,
                                 item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].ed,
                                 pItem.articleSentIndex,
+                                pItem,
                               )
                             "
                             >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.pinyin : '' }}</span
@@ -206,6 +207,7 @@
                                       item.timeList[pItem.sentIndex] &&
                                       item.timeList[pItem.sentIndex].ed,
                                     pItem.articleSentIndex,
+                                    pItem,
                                   )
                                 "
                                 >{{ pItem.chs[wIndex] }}</span
@@ -233,6 +235,7 @@
                                 item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].bg,
                                 item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].ed,
                                 pItem.articleSentIndex,
+                                pItem,
                               )
                             "
                             >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.pinyin : '' }}</span
@@ -260,6 +263,7 @@
                                 item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].bg,
                                 item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].ed,
                                 pItem.articleSentIndex,
+                                pItem,
                               )
                             "
                             >{{
@@ -327,6 +331,7 @@
                                 item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].bg,
                                 item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].ed,
                                 pItem.articleSentIndex,
+                                pItem,
                               )
                             "
                             >{{ item.wordsList[pIndex + 1].chs }}</span
@@ -352,6 +357,7 @@
                                 item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].bg,
                                 item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].ed,
                                 pItem.articleSentIndex,
+                                pItem,
                               )
                             "
                             >{{
@@ -391,6 +397,7 @@
                                 item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].bg,
                                 item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].ed,
                                 pItem.articleSentIndex,
+                                pItem,
                               )
                             "
                             >{{
@@ -458,6 +465,7 @@
                                 item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].bg,
                                 item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].ed,
                                 pItem.articleSentIndex,
+                                pItem,
                               )
                             "
                             >{{ item.wordsList[pIndex + 2].chs }}</span
@@ -483,6 +491,7 @@
                                 item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].bg,
                                 item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].ed,
                                 pItem.articleSentIndex,
+                                pItem,
                               )
                             "
                             >{{
@@ -514,6 +523,7 @@
                               item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].bg,
                               item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].ed,
                               pItem.articleSentIndex,
+                              pItem,
                             )
                           "
                           >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.pinyin : '' }}</span
@@ -583,6 +593,7 @@
                                   item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].bg,
                                   item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].ed,
                                   pItem.articleSentIndex,
+                                  pItem,
                                 )
                               "
                               >{{ pItem.chs[wIndex] }}</span
@@ -609,6 +620,7 @@
                               item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].bg,
                               item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].ed,
                               pItem.articleSentIndex,
+                              pItem,
                             )
                           "
                           >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.pinyin : '' }}</span
@@ -728,6 +740,7 @@
                                 curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].bg,
                                 curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].ed,
                                 index,
+                                pItem,
                               )
                             "
                             >{{ pItem.pinyin }}</span
@@ -772,6 +785,7 @@
                                   curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].bg,
                                   curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].ed,
                                   index,
+                                  pItem,
                                 )
                               "
                               >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs[wIndex] : '' }}</span
@@ -801,6 +815,7 @@
                                 curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].bg,
                                 curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].ed,
                                 index,
+                                pItem,
                               )
                             "
                             >{{ pItem.pinyin }}</span
@@ -831,6 +846,7 @@
                                 curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].bg,
                                 curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].ed,
                                 index,
+                                item.sentArr[pIndex + 1],
                               )
                             "
                             >{{ item.sentArr[pIndex + 1].pinyin }}</span
@@ -878,6 +894,7 @@
                                 curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].bg,
                                 curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].ed,
                                 index,
+                                item.sentArr[pIndex + 1],
                               )
                             "
                           >
@@ -911,6 +928,7 @@
                                 curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].bg,
                                 curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].ed,
                                 index,
+                                item.sentArr[pIndex + 1],
                               )
                             "
                             >{{ item.sentArr[pIndex + 1].pinyin }}</span
@@ -948,6 +966,7 @@
                                 curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].bg,
                                 curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].ed,
                                 index,
+                                item.sentArr[pIndex + 2],
                               )
                             "
                             >{{ item.sentArr[pIndex + 2].pinyin }}</span
@@ -985,6 +1004,7 @@
                                 curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].bg,
                                 curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].ed,
                                 index,
+                                item.sentArr[pIndex + 2],
                               )
                             "
                           >
@@ -1018,6 +1038,7 @@
                                 curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].bg,
                                 curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].ed,
                                 index,
+                                item.sentArr[pIndex + 2],
                               )
                             "
                             >{{ item.sentArr[pIndex + 2].pinyin }}</span
@@ -1048,6 +1069,7 @@
                               curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].bg,
                               curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].ed,
                               index,
+                              pItem,
                             )
                           "
                           >{{ pItem.pinyin }}</span
@@ -1099,6 +1121,7 @@
                                 curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].bg,
                                 curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].ed,
                                 index,
+                                pItem,
                               )
                             "
                             >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs[wIndex] : '' }}</span
@@ -1127,6 +1150,7 @@
                               curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].bg,
                               curQue.wordTime && curQue.wordTime[index] && curQue.wordTime[index].ed,
                               index,
+                              pItem,
                             )
                           "
                           >{{ pItem.pinyin }}</span
@@ -1458,6 +1482,10 @@ export default {
                 border: wItem.border,
                 fontWeight: wItem.fontWeight,
               },
+              matchWords: wItem.matchWords,
+              matchNotes: wItem.matchNotes,
+              img: wItem.img,
+              imgPosition: wItem.imgPosition,
             };
             if (wordTimeList && wordTimeList.length > 0) {
               obj.chstimeList = wordTimeList[asIndex].wordsResultList.slice(startIndex, endIndex);
@@ -1610,7 +1638,7 @@ export default {
       this.paraIndex = -1;
       this.sentIndex = -1;
     },
-    viewNotes(e, noteNum, time, ed, index) {
+    viewNotes(e, noteNum, time, ed, index, words) {
       let _this = this;
       let noteIndex = '';
       if (_this.NumberList.indexOf(noteNum) > -1) {
@@ -1620,6 +1648,16 @@ export default {
             break;
           }
         }
+      } else if (words.matchNotes) {
+        // 关联了注释
+        if (_this.NNPEAnnotationList && _this.NNPEAnnotationList.length > 0) {
+          _this.NNPEAnnotationList.forEach((item, indexs) => {
+            let textContent = item.con.replace(/<[^>]*>?/gm, '');
+            if (textContent === words.matchNotes.trim()) {
+              noteIndex = `${String(indexs)}`;
+            }
+          });
+        }
       } else {
         _this.handleChangeTime(time, ed, index);
       }

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

@@ -120,7 +120,7 @@
                                   ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                   : '22px',
                             }"
-                            @click.stop="viewNotes($event, pItem.pinyin)"
+                            @click.stop="viewNotes($event, pItem.pinyin, '', pItem)"
                             >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.pinyin : '' }}</span
                           >
                           <span
@@ -167,7 +167,7 @@
                                     ? attrib.topic_color
                                     : pItem.config.color,
                               }"
-                              @click.stop="viewNotes($event, pItem.chs[wIndex], pItem.chs)"
+                              @click.stop="viewNotes($event, pItem.chs[wIndex], pItem.chs, pItem)"
                               >{{ pItem.chs[wIndex] }}</span
                             ></span
                           >
@@ -185,7 +185,7 @@
                                   ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                   : '22px',
                             }"
-                            @click.stop="viewNotes($event, pItem.pinyin)"
+                            @click.stop="viewNotes($event, pItem.pinyin, '', pItem)"
                             >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.pinyin : '' }}</span
                           >
                         </span>
@@ -204,7 +204,9 @@
                                   ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                   : '22px',
                             }"
-                            @click.stop="viewNotes($event, item.wordsList[pIndex + 1].pinyin)"
+                            @click.stop="
+                              viewNotes($event, item.wordsList[pIndex + 1].pinyin, '', item.wordsList[pIndex + 1])
+                            "
                             >{{
                               NumberList.indexOf(item.wordsList[pIndex + 1].pinyin) == -1
                                 ? item.wordsList[pIndex + 1].pinyin
@@ -232,6 +234,8 @@
                                 item.wordsList[pIndex + 1].words
                                   ? item.wordsList[pIndex + 1].words
                                   : item.wordsList[pIndex + 1].chs,
+                                '',
+                                item.wordsList[pIndex + 1],
                               )
                             "
                             >{{ item.wordsList[pIndex + 1].chs }}</span
@@ -250,7 +254,9 @@
                                   ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                   : '22px',
                             }"
-                            @click.stop="viewNotes($event, item.wordsList[pIndex + 1].pinyin)"
+                            @click.stop="
+                              viewNotes($event, item.wordsList[pIndex + 1].pinyin, '', item.wordsList[pIndex + 1])
+                            "
                             >{{
                               NumberList.indexOf(item.wordsList[pIndex + 1].pinyin) == -1
                                 ? item.wordsList[pIndex + 1].pinyin
@@ -282,7 +288,9 @@
                                   ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                   : '22px',
                             }"
-                            @click.stop="viewNotes($event, item.wordsList[pIndex + 2].pinyin)"
+                            @click.stop="
+                              viewNotes($event, item.wordsList[pIndex + 2].pinyin, '', item.wordsList[pIndex + 2])
+                            "
                             >{{
                               NumberList.indexOf(item.wordsList[pIndex + 2].pinyin) == -1
                                 ? item.wordsList[pIndex + 2].pinyin
@@ -310,6 +318,8 @@
                                 item.wordsList[pIndex + 2].words
                                   ? item.wordsList[pIndex + 2].words
                                   : item.wordsList[pIndex + 2].chs,
+                                '',
+                                item.wordsList[pIndex + 2],
                               )
                             "
                             >{{ item.wordsList[pIndex + 2].chs }}</span
@@ -328,7 +338,9 @@
                                   ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                   : '22px',
                             }"
-                            @click.stop="viewNotes($event, item.wordsList[pIndex + 2].pinyin)"
+                            @click.stop="
+                              viewNotes($event, item.wordsList[pIndex + 2].pinyin, '', item.wordsList[pIndex + 2])
+                            "
                             >{{
                               NumberList.indexOf(item.wordsList[pIndex + 2].pinyin) == -1
                                 ? item.wordsList[pIndex + 2].pinyin
@@ -351,7 +363,7 @@
                             height:
                               attrib && attrib.pinyin_size ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt' : '22px',
                           }"
-                          @click.stop="viewNotes($event, pItem.pinyin)"
+                          @click.stop="viewNotes($event, pItem.pinyin, '', pItem)"
                           >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.pinyin : '' }}</span
                         >
                         <span
@@ -399,7 +411,7 @@
                                   ? attrib.topic_color
                                   : pItem.config.color,
                             }"
-                            @click.stop="viewNotes($event, pItem.chs[wIndex], pItem.chs)"
+                            @click.stop="viewNotes($event, pItem.chs[wIndex], pItem.chs, pItem)"
                             >{{ pItem.chs[wIndex] }}</span
                           ></span
                         >
@@ -416,7 +428,7 @@
                             height:
                               attrib && attrib.pinyin_size ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt' : '22px',
                           }"
-                          @click.stop="viewNotes($event, pItem.pinyin)"
+                          @click.stop="viewNotes($event, pItem.pinyin, '', pItem)"
                           >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.pinyin : '' }}</span
                         >
                       </template>
@@ -519,7 +531,7 @@
                                   ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                   : '22px',
                             }"
-                            @click.stop="viewNotes($event, pItem.pinyin)"
+                            @click.stop="viewNotes($event, pItem.pinyin, '', pItem)"
                             >{{ pItem.pinyin }}</span
                           >
                         </template>
@@ -548,7 +560,9 @@
                                 lineHeight:
                                   attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
                               }"
-                              @click.stop="viewNotes($event, pItem.words ? pItem.words : pItem.chs[wIndex], pItem.chs)"
+                              @click.stop="
+                                viewNotes($event, pItem.words ? pItem.words : pItem.chs[wIndex], pItem.chs, pItem)
+                              "
                               >{{ pItem.chs[wIndex] }}</span
                             >
                           </template>
@@ -569,7 +583,7 @@
                                   ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                   : '22px',
                             }"
-                            @click.stop="viewNotes($event, pItem.pinyin)"
+                            @click.stop="viewNotes($event, pItem.pinyin, '', pItem)"
                             >{{ pItem.pinyin }}</span
                           >
                         </template>
@@ -591,7 +605,9 @@
                                   ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                   : '22px',
                             }"
-                            @click.stop="viewNotes($event, item.sentArr[pIndex + 1].pinyin)"
+                            @click.stop="
+                              viewNotes($event, item.sentArr[pIndex + 1].pinyin, '', item.sentArr[pIndex + 1])
+                            "
                             >{{ item.sentArr[pIndex + 1].pinyin }}</span
                           >
                         </template>
@@ -616,6 +632,8 @@
                                 item.sentArr[pIndex + 1].words
                                   ? item.sentArr[pIndex + 1].words
                                   : item.sentArr[pIndex + 1].chs,
+                                '',
+                                item.sentArr[pIndex + 1],
                               )
                             "
                           >
@@ -642,7 +660,9 @@
                                   ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                   : '22px',
                             }"
-                            @click.stop="viewNotes($event, item.sentArr[pIndex + 1].pinyin)"
+                            @click.stop="
+                              viewNotes($event, item.sentArr[pIndex + 1].pinyin, '', item.sentArr[pIndex + 1])
+                            "
                             >{{ item.sentArr[pIndex + 1].pinyin }}</span
                           >
                         </template>
@@ -671,7 +691,9 @@
                                   ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                   : '22px',
                             }"
-                            @click.stop="viewNotes($event, item.sentArr[pIndex + 2].pinyin)"
+                            @click.stop="
+                              viewNotes($event, item.sentArr[pIndex + 2].pinyin, '', item.sentArr[pIndex + 2])
+                            "
                             >{{ item.sentArr[pIndex + 2].pinyin }}</span
                           >
                         </template>
@@ -696,6 +718,8 @@
                                 item.sentArr[pIndex + 2].words
                                   ? item.sentArr[pIndex + 2].words
                                   : item.sentArr[pIndex + 2].chs,
+                                '',
+                                item.sentArr[pIndex + 2],
                               )
                             "
                           >
@@ -722,7 +746,9 @@
                                   ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                   : '22px',
                             }"
-                            @click.stop="viewNotes($event, item.sentArr[pIndex + 1].pinyin)"
+                            @click.stop="
+                              viewNotes($event, item.sentArr[pIndex + 1].pinyin, '', item.sentArr[pIndex + 1])
+                            "
                             >{{ item.sentArr[pIndex + 2].pinyin }}</span
                           >
                         </template>
@@ -744,7 +770,7 @@
                             height:
                               attrib && attrib.pinyin_size ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt' : '22px',
                           }"
-                          @click.stop="viewNotes($event, pItem.pinyin)"
+                          @click.stop="viewNotes($event, pItem.pinyin, '', pItem)"
                           >{{ pItem.pinyin }}</span
                         >
                       </template>
@@ -773,7 +799,9 @@
                               lineHeight:
                                 attrib && attrib.font_size ? attrib.font_size.replace('pt', '') * 1.4 + 'pt' : '28px',
                             }"
-                            @click.stop="viewNotes($event, pItem.words ? pItem.words : pItem.chs[wIndex], pItem.chs)"
+                            @click.stop="
+                              viewNotes($event, pItem.words ? pItem.words : pItem.chs[wIndex], pItem.chs, pItem)
+                            "
                             >{{ pItem.chs[wIndex] }}</span
                           >
                         </template>
@@ -793,7 +821,7 @@
                             height:
                               attrib && attrib.pinyin_size ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt' : '22px',
                           }"
-                          @click.stop="viewNotes($event, pItem.pinyin)"
+                          @click.stop="viewNotes($event, pItem.pinyin, '', pItem)"
                           >{{ pItem.pinyin }}</span
                         >
                       </template>
@@ -1189,6 +1217,10 @@ export default {
                 border: wItem.border,
                 fontWeight: wItem.fontWeight,
               },
+              matchWords: wItem.matchWords,
+              matchNotes: wItem.matchNotes,
+              img: wItem.img,
+              imgPosition: wItem.imgPosition,
             };
             paraArr.push(obj);
             if (wItem.pinyin) dhaspinyin = true;
@@ -1252,6 +1284,10 @@ export default {
                 border: wItem.border,
                 fontWeight: wItem.fontWeight,
               },
+              matchWords: wItem.matchWords,
+              matchNotes: wItem.matchNotes,
+              img: wItem.img,
+              imgPosition: wItem.imgPosition,
             };
             sentArr.push(obj);
           });
@@ -1496,7 +1532,7 @@ export default {
         }
       }
     },
-    viewNotes(e, noteNum, noteNums) {
+    viewNotes(e, noteNum, noteNums, words) {
       let _this = this;
       _this.clickType = 'note';
       _this.activeWord = null;
@@ -1509,6 +1545,17 @@ export default {
           }
         }
         this.showNoteDetail(e, noteIndex);
+      } else if (words.matchNotes) {
+        // 关联了注释
+        if (_this.NNPEAnnotationList && _this.NNPEAnnotationList.length > 0) {
+          _this.NNPEAnnotationList.forEach((item, indexs) => {
+            let textContent = item.con.replace(/<[^>]*>?/gm, '');
+            if (textContent === words.matchNotes.trim()) {
+              noteIndex = `${String(indexs)}`;
+              this.showNoteDetail(e, noteIndex);
+            }
+          });
+        }
       } else if (this.newWordList.indexOf(noteNum) > -1) {
         if (_this.oldHz !== noteNum) {
           this.isShow = false;
@@ -1540,7 +1587,7 @@ export default {
         } else {
           _this.left = left;
         }
-      } else if (this.newWordList.indexOf(noteNums) > -1) {
+      } else if (noteNums && this.newWordList.indexOf(noteNums) > -1) {
         if (_this.oldHz !== noteNums) {
           this.isShow = false;
           _this.NNPENewWordList.forEach((items) => {
@@ -1571,6 +1618,38 @@ export default {
         } else {
           _this.left = left;
         }
+      } else if (words.matchWords && this.newWordList.indexOf(words.matchWords) > -1) {
+        // 关联了生词
+        if (_this.oldHz !== words.matchWords) {
+          this.isShow = false;
+          _this.NNPENewWordList.forEach((items) => {
+            // item.forEach((items) => {
+            if (items.new_word === words.matchWords) {
+              this.activeWord = items;
+            }
+            // });
+          });
+          setTimeout(() => {
+            _this.hz = words.matchWords;
+          }, 50);
+        }
+        _this.clientY = e.clientY;
+        let left = e.clientX;
+        let width = 0;
+
+        if (words.matchWords.length === 1 || words.matchWords.length === 2) {
+          width = 304;
+        } else if (words.matchWords.length === 3 || words.matchWords.length === 4) {
+          width = 432;
+        } else if (words.matchWords.length > 3) {
+          width = 560;
+        }
+
+        if (left - this.bodyLeft > this.contentWidth / 2) {
+          _this.left = left - width + 10;
+        } else {
+          _this.left = left;
+        }
       }
     },
     showNoteDetail(e, noteNum) {

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

@@ -906,6 +906,10 @@ export default {
                 border: wItem.border,
                 fontWeight: wItem.fontWeight,
               },
+              matchWords: wItem.matchWords,
+              matchNotes: wItem.matchNotes,
+              img: wItem.img,
+              imgPosition: wItem.imgPosition,
             };
             sentArr.push(obj);
             if (wItem.pinyin) dhaspinyin = true;

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

@@ -99,6 +99,11 @@
                             :style="{
                               fontSize: hzSize + 'px',
                               fontFamily: pItem.config && pItem.config.fontFamily ? pItem.config.fontFamily : '',
+                              textDecoration:
+                                pItem.config && pItem.config.textDecoration ? pItem.config.textDecoration : '',
+                              borderBottom: pItem.config && pItem.config.border === 'dotted' ? '1px dotted' : '',
+                              fontWeight: pItem.config && pItem.config.fontWeight ? pItem.config.fontWeight : '',
+                              color: pItem.config && pItem.config.color ? pItem.config.color : '',
                               height: hzSize * 1.17 + 'px',
                               display: 'inline-block',
                               width: pItem.chs[wIndex].trim() === '' ? '10px' : '',
@@ -170,6 +175,22 @@
                               item[pIndex + 1].config && item[pIndex + 1].config.fontFamily
                                 ? item[pIndex + 1].config.fontFamily
                                 : '',
+                            textDecoration:
+                              item[pIndex + 1].config && item[pIndex + 1].config.textDecoration
+                                ? item[pIndex + 1].config.textDecoration
+                                : '',
+                            borderBottom:
+                              item[pIndex + 1].config && item[pIndex + 1].config.border === 'dotted'
+                                ? '1px dotted'
+                                : '',
+                            fontWeight:
+                              item[pIndex + 1].config && item[pIndex + 1].config.fontWeight
+                                ? item[pIndex + 1].config.fontWeight
+                                : '',
+                            color:
+                              item[pIndex + 1].config && item[pIndex + 1].config.color
+                                ? item[pIndex + 1].config.color
+                                : '',
                             height: hzSize * 1.17 + 'px',
                             display: 'inline-block',
                             width: item[pIndex + 1].chs.trim() === '' ? '10px' : '',
@@ -244,6 +265,22 @@
                               item[pIndex + 2].config && item[pIndex + 2].config.fontFamily
                                 ? item[pIndex + 2].config.fontFamily
                                 : '',
+                            textDecoration:
+                              item[pIndex + 2].config && item[pIndex + 2].config.textDecoration
+                                ? item[pIndex + 2].config.textDecoration
+                                : '',
+                            borderBottom:
+                              item[pIndex + 2].config && item[pIndex + 2].config.border === 'dotted'
+                                ? '1px dotted'
+                                : '',
+                            fontWeight:
+                              item[pIndex + 2].config && item[pIndex + 2].config.fontWeight
+                                ? item[pIndex + 2].config.fontWeight
+                                : '',
+                            color:
+                              item[pIndex + 2].config && item[pIndex + 2].config.color
+                                ? item[pIndex + 2].config.color
+                                : '',
                             height: hzSize * 1.17 + 'px',
                             display: 'inline-block',
                             width: item[pIndex + 2].chs.trim() === '' ? '10px' : '',
@@ -322,6 +359,11 @@
                           :style="{
                             fontSize: hzSize + 'px',
                             fontFamily: pItem.config && pItem.config.fontFamily ? pItem.config.fontFamily : '',
+                            textDecoration:
+                              pItem.config && pItem.config.textDecoration ? pItem.config.textDecoration : '',
+                            borderBottom: pItem.config && pItem.config.border === 'dotted' ? '1px dotted' : '',
+                            fontWeight: pItem.config && pItem.config.fontWeight ? pItem.config.fontWeight : '',
+                            color: pItem.config && pItem.config.color ? pItem.config.color : '',
                             height: hzSize * 1.17 + 'px',
                             display: 'inline-block',
                             width: pItem.chs[wIndex].trim() === '' ? '10px' : '',
@@ -1160,6 +1202,17 @@ export default {
         }
 
         this.showNoteDetail(e, noteIndex);
+      } else if (item.matchNotes) {
+        // 关联了注释
+        if (this.NNPEAnnotationList && this.NNPEAnnotationList.length > 0) {
+          this.NNPEAnnotationList.forEach((items, indexs) => {
+            let textContent = items.con.replace(/<[^>]*>?/gm, '');
+            if (textContent === item.matchNotes.trim()) {
+              noteIndex = `${String(indexs)}`;
+              this.showNoteDetail(e, noteIndex);
+            }
+          });
+        }
       } else if (this.newWordList.indexOf(item.chs) > -1) {
         if (this.oldHz !== item.chs) {
           this.isShow = false;
@@ -1196,6 +1249,40 @@ export default {
         // } else {
         this.left = left - width / 2;
         // }
+      } else if (item.matchWords && this.newWordList.indexOf(item.matchWords) > -1) {
+        // 关联了生词
+        if (this.oldHz !== item.matchWords) {
+          this.isShow = false;
+
+          setTimeout(() => {
+            this.hz = item.matchWords;
+            this.pinyin = item.pinyin;
+            this.wordIndex = item.wordIndex;
+          }, 50);
+        }
+        this.clientY = e.clientY;
+        let new_word = item.matchWords;
+        this.wordPlayMp3 = '';
+        this.NNPENewWordList.forEach((itemn) => {
+          // items.forEach((itemn) => {
+          if (itemn.new_word === new_word) {
+            this.wordbgs = itemn.bg;
+            this.wordeds = itemn.ed;
+            this.wordPlayMp3 = itemn.newWordMp3;
+          }
+          // });
+        });
+        let left = e.clientX;
+        let width = 0;
+        if (item.matchWords.length === 1 || item.matchWords.length === 2) {
+          width = 304;
+        } else if (item.matchWords.length === 3 || item.matchWords.length === 4) {
+          width = 432;
+        } else if (item.matchWords.length > 3) {
+          width = 560;
+        }
+
+        this.left = left - width / 2;
       }
     },
     showNoteDetail(e, noteNum) {

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

@@ -1073,6 +1073,10 @@ export default {
                 border: wItem.border,
                 fontWeight: wItem.fontWeight,
               },
+              matchWords: wItem.matchWords,
+              matchNotes: wItem.matchNotes,
+              img: wItem.img,
+              imgPosition: wItem.imgPosition,
             };
             paraArr.push(obj);
             if (wItem.pinyin) dhaspinyin = true;

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

@@ -590,6 +590,11 @@ export default {
                 border: wItem.border,
                 fontWeight: wItem.fontWeight,
               },
+
+              matchWords: wItem.matchWords,
+              matchNotes: wItem.matchNotes,
+              img: wItem.img,
+              imgPosition: wItem.imgPosition,
             };
             sentArr.push(obj);
             if (wItem.pinyin) dhaspinyin = true;

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

@@ -151,6 +151,7 @@
                                     item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg,
                                     item,
                                     item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
+                                    pItem,
                                   )
                                 "
                                 >{{ NumberList.indexOf(pItem.pinyin) === -1 ? pItem.pinyin : '' }}</span
@@ -211,6 +212,7 @@
                                         item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg,
                                         item,
                                         item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
+                                        pItem,
                                       )
                                     "
                                     >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs[wIndex] : '' }}</span
@@ -238,6 +240,7 @@
                                     item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg,
                                     item,
                                     item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
+                                    pItem,
                                   )
                                 "
                                 >{{ NumberList.indexOf(pItem.pinyin) === -1 ? pItem.pinyin : '' }}</span
@@ -263,6 +266,7 @@
                                     item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg,
                                     item,
                                     item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
+                                    item.wordsList[pIndex + 1],
                                   )
                                 "
                                 >{{
@@ -315,6 +319,7 @@
                                     item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg,
                                     item,
                                     item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
+                                    item.wordsList[pIndex + 1],
                                   )
                                 "
                               >
@@ -344,6 +349,7 @@
                                     item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg,
                                     item,
                                     item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
+                                    item.wordsList[pIndex + 1],
                                   )
                                 "
                                 >{{
@@ -383,6 +389,7 @@
                                     item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg,
                                     item,
                                     item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
+                                    item.wordsList[pIndex + 2],
                                   )
                                 "
                                 >{{
@@ -435,6 +442,7 @@
                                     item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg,
                                     item,
                                     item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
+                                    item.wordsList[pIndex + 2],
                                   )
                                 "
                               >
@@ -466,6 +474,7 @@
                                     item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg,
                                     item,
                                     item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
+                                    item.wordsList[pIndex + 2],
                                   )
                                 "
                                 >{{
@@ -499,6 +508,7 @@
                                   item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg,
                                   item,
                                   item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
+                                  pItem,
                                 )
                               "
                               >{{ NumberList.indexOf(pItem.pinyin) === -1 ? pItem.pinyin : '' }}</span
@@ -558,6 +568,7 @@
                                       item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg,
                                       item,
                                       item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
+                                      pItem,
                                     )
                                   "
                                   >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs[wIndex] : '' }}</span
@@ -586,6 +597,7 @@
                                   item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg,
                                   item,
                                   item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed,
+                                  pItem,
                                 )
                               "
                               >{{ NumberList.indexOf(pItem.pinyin) === -1 ? pItem.pinyin : '' }}</span
@@ -963,6 +975,11 @@ export default {
                 border: wItem.border,
                 fontWeight: wItem.fontWeight,
               },
+
+              matchWords: wItem.matchWords,
+              matchNotes: wItem.matchNotes,
+              img: wItem.img,
+              imgPosition: wItem.imgPosition,
             };
             if (wordTimeList && wordTimeList.length > 0) {
               obj.chstimeList = wordTimeList[asIndex].wordsResultList.slice(startIndex, endIndex);
@@ -1078,7 +1095,7 @@ export default {
     emptyEd() {
       this.ed = undefined;
     },
-    viewNotes(e, noteNum, time, item, ed) {
+    viewNotes(e, noteNum, time, item, ed, words) {
       let _this = this;
       let noteIndex = '';
       if (_this.NumberList.indexOf(noteNum) > -1) {
@@ -1088,6 +1105,16 @@ export default {
             break;
           }
         }
+      } else if (words.matchNotes) {
+        // 关联了注释
+        if (_this.NNPEAnnotationList && _this.NNPEAnnotationList.length > 0) {
+          _this.NNPEAnnotationList.forEach((item, indexs) => {
+            let textContent = item.con.replace(/<[^>]*>?/gm, '');
+            if (textContent === words.matchNotes.trim()) {
+              noteIndex = `${String(indexs)}`;
+            }
+          });
+        }
       } else {
         _this.handleChangeTime(time, item, ed);
       }

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

@@ -123,7 +123,7 @@
                                       ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                       : '22px',
                                 }"
-                                @click.stop="viewNotes($event, pItem.pinyin)"
+                                @click.stop="viewNotes($event, pItem.pinyin, pItem)"
                                 >{{ NumberList.indexOf(pItem.pinyin) === -1 ? pItem.pinyin : '' }}</span
                               >
                               <span
@@ -153,7 +153,7 @@
                                         : pItem.config.color
                                       : pItem.config.color,
                                 }"
-                                @click.stop="viewNotes($event, pItem.words ? pItem.words : pItem.chs)"
+                                @click.stop="viewNotes($event, pItem.words ? pItem.words : pItem.chs, pItem)"
                                 >{{ pItem.chs }}</span
                               >
                               <span
@@ -170,7 +170,7 @@
                                       ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                       : '22px',
                                 }"
-                                @click.stop="viewNotes($event, pItem.pinyin)"
+                                @click.stop="viewNotes($event, pItem.pinyin, pItem)"
                                 >{{ NumberList.indexOf(pItem.pinyin) === -1 ? pItem.pinyin : '' }}</span
                               >
                             </span>
@@ -187,7 +187,9 @@
                                       ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                       : '22px',
                                 }"
-                                @click.stop="viewNotes($event, item.wordsList[pIndex + 1].pinyin)"
+                                @click.stop="
+                                  viewNotes($event, item.wordsList[pIndex + 1].pinyin, item.wordsList[pIndex + 1])
+                                "
                                 >{{
                                   NumberList.indexOf(item.wordsList[pIndex + 1].pinyin) === -1
                                     ? item.wordsList[pIndex + 1].pinyin
@@ -220,6 +222,7 @@
                                     item.wordsList[pIndex + 1].words
                                       ? item.wordsList[pIndex + 1].words
                                       : item.wordsList[pIndex + 1].chs,
+                                    item.wordsList[pIndex + 1],
                                   )
                                 "
                                 >{{ item.wordsList[pIndex + 1].chs }}</span
@@ -236,7 +239,9 @@
                                       ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                       : '22px',
                                 }"
-                                @click.stop="viewNotes($event, item.wordsList[pIndex + 1].pinyin)"
+                                @click.stop="
+                                  viewNotes($event, item.wordsList[pIndex + 1].pinyin, item.wordsList[pIndex + 1])
+                                "
                                 >{{
                                   NumberList.indexOf(item.wordsList[pIndex + 1].pinyin) === -1
                                     ? item.wordsList[pIndex + 1].pinyin
@@ -267,7 +272,9 @@
                                       ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                       : '22px',
                                 }"
-                                @click.stop="viewNotes($event, item.wordsList[pIndex + 2].pinyin)"
+                                @click.stop="
+                                  viewNotes($event, item.wordsList[pIndex + 2].pinyin, item.wordsList[pIndex + 2])
+                                "
                                 >{{
                                   NumberList.indexOf(item.wordsList[pIndex + 2].pinyin) === -1
                                     ? item.wordsList[pIndex + 2].pinyin
@@ -309,6 +316,7 @@
                                     item.wordsList[pIndex + 2].words
                                       ? item.wordsList[pIndex + 2].words
                                       : item.wordsList[pIndex + 2].chs,
+                                    item.wordsList[pIndex + 2],
                                   )
                                 "
                                 >{{ item.wordsList[pIndex + 2].chs }}</span
@@ -327,7 +335,9 @@
                                       ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                       : '22px',
                                 }"
-                                @click.stop="viewNotes($event, item.wordsList[pIndex + 2].pinyin)"
+                                @click.stop="
+                                  viewNotes($event, item.wordsList[pIndex + 2].pinyin, item.wordsList[pIndex + 2])
+                                "
                                 >{{
                                   NumberList.indexOf(item.wordsList[pIndex + 2].pinyin) === -1
                                     ? item.wordsList[pIndex + 2].pinyin
@@ -352,7 +362,7 @@
                                     ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                     : '22px',
                               }"
-                              @click.stop="viewNotes($event, pItem.pinyin)"
+                              @click.stop="viewNotes($event, pItem.pinyin, pItem)"
                               >{{ NumberList.indexOf(pItem.pinyin) === -1 ? pItem.pinyin : '' }}</span
                             >
                             <span
@@ -380,7 +390,7 @@
                                       : pItem.config.color
                                     : pItem.config.color,
                               }"
-                              @click.stop="viewNotes($event, pItem.words ? pItem.words : pItem.chs)"
+                              @click.stop="viewNotes($event, pItem.words ? pItem.words : pItem.chs, pItem)"
                               >{{ pItem.chs }}</span
                             >
                             <span
@@ -398,7 +408,7 @@
                                     ? attrib.pinyin_size.replace('pt', '') * 1.5 + 'pt'
                                     : '22px',
                               }"
-                              @click.stop="viewNotes($event, pItem.pinyin)"
+                              @click.stop="viewNotes($event, pItem.pinyin, pItem)"
                               >{{ NumberList.indexOf(pItem.pinyin) === -1 ? pItem.pinyin : '' }}</span
                             >
                           </template>
@@ -823,6 +833,11 @@ export default {
                 border: wItem.border,
                 fontWeight: wItem.fontWeight,
               },
+
+              matchWords: wItem.matchWords,
+              matchNotes: wItem.matchNotes,
+              img: wItem.img,
+              imgPosition: wItem.imgPosition,
             };
             paraArr.push(obj);
             if (wItem.pinyin) dhaspinyin = true;
@@ -1032,7 +1047,7 @@ export default {
       }
       this.oldHz = val;
     },
-    viewNotes(e, noteNum) {
+    viewNotes(e, noteNum, words) {
       let _this = this;
       _this.clickType = 'note';
       let noteIndex = '';
@@ -1054,6 +1069,17 @@ export default {
           }
         }
         this.showNoteDetail(e, noteIndex);
+      } else if (words.matchNotes) {
+        // 关联了注释
+        if (_this.NNPEAnnotationList && _this.NNPEAnnotationList.length > 0) {
+          _this.NNPEAnnotationList.forEach((item, indexs) => {
+            let textContent = item.con.replace(/<[^>]*>?/gm, '');
+            if (textContent === words.matchNotes.trim()) {
+              noteIndex = `${String(indexs)}`;
+              this.showNoteDetail(e, noteIndex);
+            }
+          });
+        }
       } else if (this.newWordList.indexOf(noteNum) > -1) {
         if (_this.oldHz !== noteNum) {
           this.isShow = false;
@@ -1078,6 +1104,32 @@ export default {
         } else {
           _this.left = left;
         }
+      } else if (words.matchWords && this.newWordList.indexOf(words.matchWords) > -1) {
+        // 关联了生词
+        if (_this.oldHz !== words.matchWords) {
+          this.isShow = false;
+
+          setTimeout(() => {
+            _this.hz = words.matchWords;
+          }, 50);
+        }
+        _this.clientY = e.clientY;
+        let left = e.clientX;
+        let width = 0;
+
+        if (words.matchWords.length === 1 || words.matchWords.length === 2) {
+          width = 304;
+        } else if (words.matchWords.length === 3 || words.matchWords.length === 4) {
+          width = 432;
+        } else if (words.matchWords.length > 3) {
+          width = 560;
+        }
+
+        if (left - this.bodyLeft > this.contentWidth / 2) {
+          _this.left = left - width + 10;
+        } else {
+          _this.left = left;
+        }
       }
     },
     showNoteDetail(e, noteNum) {

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

@@ -1065,6 +1065,11 @@ export default {
                 border: wItem.border,
                 fontWeight: wItem.fontWeight,
               },
+
+              matchWords: wItem.matchWords,
+              matchNotes: wItem.matchNotes,
+              img: wItem.img,
+              imgPosition: wItem.imgPosition,
             };
             sentArr.push(obj);
             if (wItem.pinyin) dhaspinyin = true;

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

@@ -765,6 +765,10 @@ export default {
                 border: wItem.border,
                 fontWeight: wItem.fontWeight,
               },
+              matchWords: wItem.matchWords,
+              matchNotes: wItem.matchNotes,
+              img: wItem.img,
+              imgPosition: wItem.imgPosition,
             };
             paraArr.push(obj);
             if (wItem.pinyin) dhaspinyin = true;

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

@@ -584,6 +584,10 @@ export default {
                 border: wItem.border,
                 fontWeight: wItem.fontWeight,
               },
+              matchWords: wItem.matchWords,
+              matchNotes: wItem.matchNotes,
+              img: wItem.img,
+              imgPosition: wItem.imgPosition,
             };
             sentArr.push(obj);
             if (wItem.pinyin) dhaspinyin = true;