|
|
@@ -1,7 +1,7 @@
|
|
|
<!-- -->
|
|
|
<template>
|
|
|
<div class="NNPE-ArticleView" v-if="articleInfo">
|
|
|
- <template v-if="resArr[0]&&resArr[0].wordsList[0].pno===0">
|
|
|
+ <template v-if="resArr[0]&&resArr[0].wordsList">
|
|
|
<h2>
|
|
|
<span v-for="(itemR,indexR) in resArr[0].wordsList" :key="indexR" :style="{color:colorObj.titleColor,fontSize:(wordFontsize+30)+'px',lineHeight:(wordFontsize+38)+'px',marginRight:'8px',fontWeight:'700',cursor:'pointer'}"
|
|
|
:class="[
|
|
|
@@ -38,41 +38,52 @@
|
|
|
:key="'detail' + index"
|
|
|
>
|
|
|
<div class="wordsList-box">
|
|
|
- <!-- class="nnpr-sentence-box-new" -->
|
|
|
- <div class="nnpe-sentence-box">
|
|
|
- <div v-for="(pItem, pIndex) in item.wordsList" :key="'wordsList' + pIndex">
|
|
|
- <template v-if="pItem.pno!==0">
|
|
|
- <template v-if="pItem.isShow">
|
|
|
- <div
|
|
|
- :class="[
|
|
|
- 'NNPE-words',
|
|
|
- ]"
|
|
|
- >
|
|
|
- <span
|
|
|
- class="NNPE-chs"
|
|
|
- :class="[
|
|
|
-
|
|
|
- pItem.tokens[9]===' '?'marginRight':''
|
|
|
- ]"
|
|
|
- :style="{fontSize:wordFontsize + 'px',color: colorObj.contentColor}"
|
|
|
- >{{ pItem.tokens[2] }}</span
|
|
|
- >
|
|
|
- <span
|
|
|
- class="NNPE-chs NNPE-chs-both"
|
|
|
- v-if="item.wordsList[pIndex + 1] &&
|
|
|
- item.wordsList[pIndex + 1].tokens[2] &&
|
|
|
- enFhList.indexOf(item.wordsList[pIndex + 1].tokens[2]) > -1"
|
|
|
- :class="[
|
|
|
- item.wordsList[pIndex + 1].tokens[9]===' '?'marginRight':''
|
|
|
- ]"
|
|
|
- :style="{fontSize:wordFontsize + 'px',color: colorObj.contentColor}"
|
|
|
- >{{ item.wordsList[pIndex + 1].tokens[2] }}</span
|
|
|
- >
|
|
|
+ <template v-if="index!==0">
|
|
|
+ <div class="nnpe-sentence-box">
|
|
|
+ <div v-for="(pItem, pIndex) in item.wordsList" :key="'wordsList' + pIndex" class="word-box" :class="[pItem.isExplain||pItem.explainNumber?'hasExplain':'']">
|
|
|
+ <template v-if="pItem.isShow">
|
|
|
+ <template v-if="pItem.isExplain">
|
|
|
+ <span class="explain-sub">
|
|
|
+ <img :src="require('../../../assets/explainBg-'+pItem.explainNumber+'.png')"/>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div
|
|
|
+ :class="[
|
|
|
+ 'NNPE-words',
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ class="NNPE-chs"
|
|
|
+ :class="[
|
|
|
+ pItem.type,pItem.tokens[9]===' '?'marginRight':'',pItem.highIndex?'fontWeight':''
|
|
|
+ ]"
|
|
|
+ :style="{fontSize:wordFontsize + 'px',color: colorObj.contentColor}"
|
|
|
+
|
|
|
+ >{{ pItem.tokens[2] }}</span
|
|
|
+ >
|
|
|
+ <template v-if="pItem.explainNumber">
|
|
|
+ <span class="explain-sub">
|
|
|
+ <img :src="require('../../../assets/explainBg-'+pItem.explainNumber+'.png')"/>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <span
|
|
|
+ class="NNPE-chs NNPE-chs-both"
|
|
|
+ v-if="item.wordsList[pIndex + 1] &&
|
|
|
+ item.wordsList[pIndex + 1].tokens[2] &&
|
|
|
+ enFhList.indexOf(item.wordsList[pIndex + 1].tokens[2]) > -1"
|
|
|
+ :class="[
|
|
|
+ item.wordsList[pIndex + 1].type,item.wordsList[pIndex + 1].tokens[9]===' '?'marginRight':'',item.wordsList[pIndex + 1].highIndex?'fontWeight':''
|
|
|
+ ]"
|
|
|
+ :style="{fontSize:wordFontsize + 'px',color: colorObj.contentColor}"
|
|
|
+ >{{ item.wordsList[pIndex + 1].tokens[2] }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -94,7 +105,6 @@ export default {
|
|
|
return {
|
|
|
resArr: [],
|
|
|
curTime: 0, //单位s
|
|
|
- chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；", "("],
|
|
|
enFhList: [
|
|
|
",",
|
|
|
".",
|
|
|
@@ -134,14 +144,13 @@ export default {
|
|
|
"‘ll",
|
|
|
"”",
|
|
|
],
|
|
|
- lastEnFhlist: [',','.',';',':','?','!'],
|
|
|
- firstEnFhlist: ["'","‘","“",'"',"("],
|
|
|
- noPaddingList: ['(', '"'],
|
|
|
articleImg: {}, // 文章图片
|
|
|
- paraIndex: -1, //段落索引
|
|
|
- sentIndex: -1, // 句子索引
|
|
|
- paraNumber: 1,
|
|
|
-
|
|
|
+ allWordList: [], // 生词短语注释总列表
|
|
|
+ tokensArr: [],
|
|
|
+ sentenceList: [],
|
|
|
+ wordLit:[],
|
|
|
+ annotationList: [],
|
|
|
+ phraseList: [],
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -160,119 +169,87 @@ export default {
|
|
|
this.curTime = curTime * 1000;
|
|
|
},
|
|
|
handleData() {
|
|
|
- let _this = this;
|
|
|
- _this.paraNumber = 1
|
|
|
- let resArr = [];
|
|
|
- // let leg = this.curQue.detail.length;
|
|
|
- // let curQue = JSON.parse(JSON.stringify(this.curQue));
|
|
|
- // curQue.detail.forEach((dItem, dIndex) => {
|
|
|
- // let paraArr = [];
|
|
|
- // if (dItem.paragraphAttr&&dItem.paragraphAttr.paragraphIndentation&&!dItem.isTitle) {
|
|
|
- // paraArr = [
|
|
|
- // {
|
|
|
- // width: 9,
|
|
|
- // height: 20,
|
|
|
- // },
|
|
|
- // {
|
|
|
- // width: 9,
|
|
|
- // height: 20,
|
|
|
- // },
|
|
|
- // ];
|
|
|
- // }
|
|
|
- // dItem.segList.forEach((sItem, sIndex) => {
|
|
|
- // sItem.forEach((wItem, wIndex) => {
|
|
|
- // let styles = ''
|
|
|
- // if(dItem.wordStyle&&dItem.wordStyle[sIndex]&&dItem.wordStyle[sIndex][wIndex]){
|
|
|
- // for(let k in dItem.wordStyle[sIndex][wIndex]){
|
|
|
- // if(dItem.wordStyle[sIndex][wIndex][k]&&k!='styleList'&&k!='paddingList'){
|
|
|
- // styles += dItem.wordStyle[sIndex][wIndex][k]+' '
|
|
|
- // }else if(k =='styleList'||k=='paddingList'){
|
|
|
- // dItem.wordStyle[sIndex][wIndex][k].forEach(itemK=>{
|
|
|
- // styles += itemK + ' '
|
|
|
- // })
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- // let obj = {
|
|
|
- // paraIndex: dIndex, //段落索引
|
|
|
- // sentIndex: sIndex, //在段落中句子索引
|
|
|
- // wordIndex: wIndex, //单词的索引
|
|
|
- // en: wItem,
|
|
|
- // padding: true,
|
|
|
- // isShow: this.mergeWordSymbol(wItem),
|
|
|
- // className: styles,
|
|
|
- // };
|
|
|
- // //this.judgePad(sItem, obj, wIndex);
|
|
|
- // paraArr.push(obj);
|
|
|
- // });
|
|
|
- // });
|
|
|
-
|
|
|
- // let curSentencesLeg = dItem.sentences.length;
|
|
|
- // let startLeg = dIndex == 0 ? 0 : curQue.detail[dIndex - 1].endLeg;
|
|
|
- // let endLeg = startLeg + curSentencesLeg;
|
|
|
- // dItem.endLeg = endLeg;
|
|
|
- // let timeList = curQue.wordTime.slice(startLeg, endLeg);
|
|
|
-
|
|
|
- // if(dItem.isTitle||(dItem.isLittleTitle&&dItem.paragraphAttr.paragraphLittleNumber&&dItem.paragraphAttr.paragraphLittleNumber==false)||(dItem.isLittleTitle&&!dItem.paragraphAttr.paragraphLittleNumber) || (dItem.paragraphAttr&&!dItem.paragraphAttr.paragraphNumber)){
|
|
|
- // dItem.paraNumber = ''
|
|
|
- // }else{
|
|
|
- // dItem.paraNumber = _this.paraNumber
|
|
|
- // _this.paraNumber ++
|
|
|
- // }
|
|
|
- // let paraObj = {
|
|
|
- // wordsList: paraArr,
|
|
|
- // timeList: timeList,
|
|
|
- // isTitle: dItem.isTitle,
|
|
|
- // paraNumber: dItem.paraNumber
|
|
|
- // };
|
|
|
- // resArr.push(paraObj);
|
|
|
- // });
|
|
|
- // this.resArr = resArr;
|
|
|
- // // 循环文章图片
|
|
|
- // if (curQue.img_list) {
|
|
|
- // curQue.img_list.forEach((item) => {
|
|
|
- // _this.articleImg[item.imgNumber] = item.id;
|
|
|
- // });
|
|
|
- // }
|
|
|
- let articleInfo = JSON.parse(JSON.stringify(this.articleInfo));
|
|
|
- let leg = articleInfo.art_corpus_data.sentList[articleInfo.art_corpus_data.sentList.length-1].pno
|
|
|
- for(let i=0;i<leg+1;i++){
|
|
|
- let obj = {
|
|
|
- wordsList: [],
|
|
|
- timeList: [],
|
|
|
- }
|
|
|
- resArr.push(obj)
|
|
|
- }
|
|
|
- articleInfo.art_corpus_data.sentList.forEach((item,index) => {
|
|
|
- item.tokens.forEach((items,indexs)=>{
|
|
|
- let obj = {
|
|
|
- sent_id:item.id,
|
|
|
- sno: item.sno-1,
|
|
|
- pno: item.pno,
|
|
|
- text: item.text,
|
|
|
- tokens: items,
|
|
|
- isShow: this.enFhList.indexOf(items[2])==-1
|
|
|
+ let explainNumber = 1
|
|
|
+ let resArr = [];
|
|
|
+ let articleInfo = JSON.parse(JSON.stringify(this.articleInfo));
|
|
|
+ this.sentenceList = articleInfo.art_corpus_data?articleInfo.art_corpus_data.sentList:[]
|
|
|
+ this.wordLit = articleInfo.art_voc_data?articleInfo.art_voc_data:[]
|
|
|
+ this.annotationList = articleInfo.art_phrase_data?articleInfo.art_explain_data:[]
|
|
|
+ this.phraseList = articleInfo.art_explain_data?articleInfo.art_phrase_data:[]
|
|
|
+ this.wordLit.forEach(item=>{
|
|
|
+ item.type='newWord'
|
|
|
+ item.exp_title = item.word_name
|
|
|
+ let paraStr = ''
|
|
|
+ if(item.word_explain&&item.word_explain.word_para_list){
|
|
|
+ item.word_explain.word_para_list.forEach(items=>{
|
|
|
+ paraStr += items.para
|
|
|
+ })
|
|
|
}
|
|
|
- resArr[item.pno].wordsList.push(obj)
|
|
|
+ item.exp_content = paraStr
|
|
|
})
|
|
|
- resArr[item.pno].timeList.push(articleInfo.art_sound_srt_data.sents[index])
|
|
|
- });
|
|
|
- this.resArr = resArr;
|
|
|
- },
|
|
|
- handleChangeTime(time) {
|
|
|
- if (time>=0) {
|
|
|
- this.curTime = time;
|
|
|
- this.$refs.audioLine.onTimeupdateTime(time / 1000, true);
|
|
|
- }
|
|
|
- },
|
|
|
- //经过每个词，高亮句子
|
|
|
- handleMouseover(pItem) {
|
|
|
- this.paraIndex = pItem.pno;
|
|
|
- this.sentIndex = pItem.sno;
|
|
|
- },
|
|
|
- handleMouseleave() {
|
|
|
- this.paraIndex = -1;
|
|
|
- this.sentIndex = -1;
|
|
|
+ this.phraseList.forEach(item=>{
|
|
|
+ item.type='phrase'
|
|
|
+ })
|
|
|
+ this.annotationList.forEach(item=>{
|
|
|
+ item.type='explain'
|
|
|
+ })
|
|
|
+ this.allWordList = this.wordLit.concat(this.phraseList).concat(this.annotationList)
|
|
|
+ let leg = articleInfo.art_corpus_data.sentList[articleInfo.art_corpus_data.sentList.length-1].pno
|
|
|
+ this.sentenceList.forEach((item,index) => {
|
|
|
+ let flag = ''
|
|
|
+ item.StyleTokens = []
|
|
|
+ item.tokens.forEach((items,indexs)=>{
|
|
|
+ let obj = {
|
|
|
+ tokens: items
|
|
|
+ }
|
|
|
+ this.allWordList.forEach((itema,indexa)=>{
|
|
|
+ itema.bind_sent_data.bind_sents.forEach((itemb,indexb)=>{
|
|
|
+ if(itemb.sent_id===item.id){
|
|
|
+ itemb.sel_token_idxes.forEach(itemi=>{
|
|
|
+ if(indexs===itemi){
|
|
|
+ obj.highIndex = true
|
|
|
+ obj.type = itema.type
|
|
|
+ obj.word_id = itema.id // 生词注释短语的id
|
|
|
+ if(itema.type==='explain'){
|
|
|
+ obj.explainNumber = explainNumber
|
|
|
+ explainNumber ++
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if(itemb.sel_token_idxes.length===0&&itema.type==='explain'&&indexs===item.tokens.length-1){
|
|
|
+ flag = itema.id
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ item.StyleTokens.push(obj)
|
|
|
+ if(flag){
|
|
|
+ item.StyleTokens.push({
|
|
|
+ tokens: [
|
|
|
+ 0, 8, "Students", "", "", "", "", "", "", " ", 0, "", "", ""
|
|
|
+ ],
|
|
|
+ type: 'explain',
|
|
|
+ word_id: flag,
|
|
|
+ isExplain: true,
|
|
|
+ explainNumber: explainNumber
|
|
|
+ })
|
|
|
+ explainNumber ++
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+ for(let i=0;i<leg+1;i++){
|
|
|
+ let obj = {
|
|
|
+ wordsList: []
|
|
|
+ }
|
|
|
+ resArr.push(obj)
|
|
|
+ }
|
|
|
+ this.sentenceList.forEach((item,index) => {
|
|
|
+ item.StyleTokens.forEach((items,indexs)=>{
|
|
|
+ items.isShow = this.enFhList.indexOf(items.tokens[2])==-1
|
|
|
+ resArr[item.pno].wordsList.push(items)
|
|
|
+ })
|
|
|
+ });
|
|
|
+ this.resArr = resArr;
|
|
|
},
|
|
|
},
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
@@ -298,12 +275,6 @@ export default {
|
|
|
width: 100%;
|
|
|
.nnpe-article-author{
|
|
|
margin: 24px 0;
|
|
|
- &.nnpe-article-author-left{
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
- &.nnpe-article-author-right{
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
}
|
|
|
h2{
|
|
|
&.sentActive {
|
|
|
@@ -324,37 +295,29 @@ export default {
|
|
|
padding-bottom: 40px;
|
|
|
}
|
|
|
}
|
|
|
- .index {
|
|
|
- width: 48px;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 8px;
|
|
|
- text-align: right;
|
|
|
- border-right: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
- b {
|
|
|
- font-weight: 400;
|
|
|
- color: #000000;
|
|
|
- line-height: 1.5;
|
|
|
- }
|
|
|
- }
|
|
|
.wordsList-box {
|
|
|
flex: 1;
|
|
|
padding: 6px 0 12px 0;
|
|
|
- &.wordsList-box-indent{
|
|
|
- padding-left: 42px;
|
|
|
- }
|
|
|
.nnpe-sentence-box {
|
|
|
display: flex;
|
|
|
flex-flow: wrap;
|
|
|
- &.nnpe-sentence-box-right{
|
|
|
- justify-content: flex-end;
|
|
|
- }
|
|
|
- .nnpe-paragraph-con{
|
|
|
- line-height: 24px;
|
|
|
- padding: 0 3px;
|
|
|
- }
|
|
|
- .nnpr-sentence-box-new{
|
|
|
- clear: both;
|
|
|
- overflow: hidden;
|
|
|
+ .word-box{
|
|
|
+ position: relative;
|
|
|
+ &.hasExplain{
|
|
|
+ min-width: 3px;
|
|
|
+ }
|
|
|
+ .explain-sub{
|
|
|
+ position: absolute;
|
|
|
+ bottom: -5px;
|
|
|
+ right: -10px;
|
|
|
+ z-index: 1;
|
|
|
+ font-size: 0;
|
|
|
+ cursor: pointer;
|
|
|
+ img{
|
|
|
+ width: 14px;
|
|
|
+ height: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
> img {
|
|
|
@@ -369,31 +332,6 @@ export default {
|
|
|
clear: both;
|
|
|
overflow: hidden;
|
|
|
display: flex;
|
|
|
- &.NNPE-detail-title {
|
|
|
- .wordsList-box {
|
|
|
- > div {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- &.NNPE-detail-title-left {
|
|
|
- .wordsList-box {
|
|
|
- .nnpe-sentence-box {
|
|
|
- justify-content: flex-start;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- &.NNPE-detail-title-right {
|
|
|
- .wordsList-box {
|
|
|
- .nnpe-sentence-box {
|
|
|
- justify-content: flex-end;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- &.NNPE-detail-littleTitle{
|
|
|
- margin-bottom: -18px;
|
|
|
- }
|
|
|
.NNPE-words {
|
|
|
float: left;
|
|
|
padding: 0;
|
|
|
@@ -406,12 +344,6 @@ export default {
|
|
|
&.overActive {
|
|
|
background: rgba(0, 0, 0, 0.06);
|
|
|
}
|
|
|
- &.textLeft {
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
- &.textCenter {
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
> span {
|
|
|
float: left;
|
|
|
cursor: pointer;
|
|
|
@@ -426,6 +358,19 @@ export default {
|
|
|
&.marginRight{
|
|
|
padding: 0 6px 0 0;
|
|
|
}
|
|
|
+ &.fontWeight{
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ &.newWord{
|
|
|
+ color: #3459D2 !important;
|
|
|
+ }
|
|
|
+ &.phrase{
|
|
|
+ color: #FF802B !important;
|
|
|
+ }
|
|
|
+ &.explain{
|
|
|
+ // color: #23C847 !important;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
}
|
|
|
&.padding {
|
|
|
padding: 0 3px;
|
natasha
