|
|
@@ -13,11 +13,29 @@
|
|
|
<div class="print-inner">
|
|
|
<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:'10px',fontWeight:'700',cursor:'pointer'}">
|
|
|
+ <span v-for="(itemR,indexR) in resArr[0].wordsList" :key="indexR" :style="{color:colorObj.titleColor,fontSize:'44px',lineHeight:(44+38)+'px',marginRight:'10px',fontWeight:'700'}"
|
|
|
+ :class="[
|
|
|
+ itemR.tokens[9]===''?'marginRight':'',itemR.marginRight?'marginSingleRight':''
|
|
|
+ ]">
|
|
|
+ <template v-if="itemR.isShow">
|
|
|
<span
|
|
|
class="NNPE-chs"
|
|
|
- >{{ itemR.text }}</span
|
|
|
+ :class="[
|
|
|
+ itemR.type,itemR.tokens[9]===''?'marginRight':'',itemR.highIndex?'fontWeight':'',itemR.marginRight?'marginSingleRight':'',
|
|
|
+ ]"
|
|
|
+ >{{ itemR.tokens[2] }}</span
|
|
|
>
|
|
|
+ <span
|
|
|
+ class="NNPE-chs NNPE-chs-both"
|
|
|
+ v-if="resArr[0].wordsList[indexR + 1] &&
|
|
|
+ resArr[0].wordsList[indexR + 1].tokens[2] &&
|
|
|
+ enFhList.indexOf(resArr[0].wordsList[indexR + 1].tokens[2]) > -1"
|
|
|
+ :class="[
|
|
|
+ resArr[0].wordsList[indexR + 1].type,resArr[0].wordsList[indexR + 1].tokens[8]===''?'marginLeft':'',resArr[0].wordsList[indexR + 1].highIndex?'fontWeight':'',resArr[0].wordsList[indexR + 1].marginRight?'marginSingleRight':'',
|
|
|
+ ]"
|
|
|
+ >{{ resArr[0].wordsList[indexR + 1].tokens[2] }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
<!-- {{itemR.tokens[2]}} -->
|
|
|
</span>
|
|
|
</h2>
|
|
|
@@ -32,12 +50,47 @@
|
|
|
v-for="(item, index) in resArr"
|
|
|
:key="'detail' + index"
|
|
|
>
|
|
|
+ <div class="wordsList-box">
|
|
|
<template v-if="index!==0">
|
|
|
- <span v-for="(pItem, pIndex) in item.wordsList" :key="'wordsList' + pIndex" class="word-box" :style="{fontSize:wordFontsize + 'px',color: colorObj.contentColor}">
|
|
|
- {{ pItem.text }}
|
|
|
- </span>
|
|
|
+ <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.tokens[2]==='#@@#'">
|
|
|
+ <span class="NNPE-chs" :style="{width:printForm.fontSize+'px',height:printForm.fontSize*printForm.lineHeight+'px',display:'block'}"></span>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div
|
|
|
+ :class="[
|
|
|
+ 'NNPE-words',
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ class="NNPE-chs"
|
|
|
+ :class="[
|
|
|
+ pItem.tokens[9]===''?'marginRight':'',pItem.highIndex&&printForm.bold.indexOf(pItem.type)>-1?'fontWeight':'',pItem.marginRigh?'marginSingleRight':''
|
|
|
+ ]"
|
|
|
+ :style="{fontSize:printForm.fontSize + 'px',color: printForm.color,lineHeight: printForm.lineHeight}"
|
|
|
+ >{{ 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[8]===''?'marginLeft':'',item.wordsList[pIndex + 1].highIndex&&printForm.bold.indexOf(item.wordsList[pIndex + 1].type)>-1?'fontWeight':'',item.wordsList[pIndex + 1].marginRight?'marginSingleRight':''
|
|
|
+ ]"
|
|
|
+ :style="{fontSize:printForm.fontSize + 'px',color: printForm.color,lineHeight: printForm.lineHeight}"
|
|
|
+ >{{ item.wordsList[pIndex + 1].tokens[2] }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</div>
|
|
|
@@ -141,13 +194,56 @@
|
|
|
import waterMark from "../../../store/watermark"
|
|
|
import { getToken } from '@/utils/auth'
|
|
|
export default {
|
|
|
- props: [ "titleFontsize", "wordFontsize", "colorObj","articleType","articleInfo"],
|
|
|
+ props: [ "titleFontsize", "wordFontsize", "colorObj","articleType","articleInfo","likePhraseList","likeWord"],
|
|
|
data(){
|
|
|
return{
|
|
|
userMessage: getToken()?JSON.parse(getToken()):null,
|
|
|
resArr: [],
|
|
|
+ enFhList: [
|
|
|
+ ",",
|
|
|
+ ".",
|
|
|
+ ";",
|
|
|
+ "?",
|
|
|
+ "!",
|
|
|
+ ":",
|
|
|
+ ">",
|
|
|
+ "<",
|
|
|
+ "'",
|
|
|
+ "’",
|
|
|
+ "n't",
|
|
|
+ "n’t",
|
|
|
+ "n’ts",
|
|
|
+ "n‘t",
|
|
|
+ "'t",
|
|
|
+ "’t",
|
|
|
+ "‘t",
|
|
|
+ "'s",
|
|
|
+ "’s",
|
|
|
+ "‘s",
|
|
|
+ "'m",
|
|
|
+ "’m",
|
|
|
+ "‘m",
|
|
|
+ "'re",
|
|
|
+ "’re",
|
|
|
+ "‘re",
|
|
|
+ "'d",
|
|
|
+ "’d",
|
|
|
+ "‘d",
|
|
|
+ "'ve",
|
|
|
+ "’ve",
|
|
|
+ "‘ve",
|
|
|
+ ")",
|
|
|
+ "'ll",
|
|
|
+ "’ll",
|
|
|
+ "‘ll",
|
|
|
+ "”",
|
|
|
+ ],
|
|
|
articleImg: {}, // 文章图片
|
|
|
sentenceList: [],
|
|
|
+ allWordList: [], // 生词短语注释总列表
|
|
|
+ wordLit:[],
|
|
|
+ annotationList: [],
|
|
|
+ phraseList: [],
|
|
|
fontList: [
|
|
|
{
|
|
|
value:'roman',
|
|
|
@@ -243,30 +339,104 @@ export default {
|
|
|
this.$emit('closePrint')
|
|
|
},
|
|
|
handleData() {
|
|
|
+ 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
|
|
|
+ })
|
|
|
+ }
|
|
|
+ item.exp_content = paraStr
|
|
|
+ })
|
|
|
+ this.phraseList.forEach(item=>{
|
|
|
+ item.type='phrase'
|
|
|
+ })
|
|
|
+ this.annotationList.forEach(item=>{
|
|
|
+ item.type='explain'
|
|
|
+ })
|
|
|
+ this.allWordList = this.wordLit.concat(this.phraseList)
|
|
|
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,
|
|
|
marginRight: indexs===item.tokens.length-1
|
|
|
}
|
|
|
+ this.allWordList.forEach((itema,indexa)=>{
|
|
|
+ itema.bind_sent_data.bind_sents.forEach((itemb,indexb)=>{
|
|
|
+ if(itemb.sent_id===item.id){
|
|
|
+ if(itema.type==='explain'){
|
|
|
+ if(indexs===itemb.sel_token_idxes[itemb.sel_token_idxes.length-1]){
|
|
|
+ obj.highIndex = true
|
|
|
+ obj.type = itema.type
|
|
|
+ obj.word_id = itema.id // 生词注释短语的id
|
|
|
+ obj.explainNumber = explainNumber
|
|
|
+ explainNumber ++
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ itemb.sel_token_idxes.forEach(itemi=>{
|
|
|
+ if(indexs===itemi){
|
|
|
+ obj.highIndex = true
|
|
|
+ obj.type = itema.type
|
|
|
+ obj.word_id = itema.id // 生词注释短语的id
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ 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 obgs = {
|
|
|
+ isShow: true,
|
|
|
+ marginRight: false,
|
|
|
+ tokens:['','','#@@#','','','','','',' ',' ','','','','','']
|
|
|
+ }
|
|
|
let obj = {
|
|
|
- wordsList: []
|
|
|
+ wordsList: i===0?[]:[obgs,obgs]
|
|
|
}
|
|
|
resArr.push(obj)
|
|
|
}
|
|
|
this.sentenceList.forEach((item,index) => {
|
|
|
- resArr[item.pno].wordsList.push(item)
|
|
|
+ item.StyleTokens.forEach((items,indexs)=>{
|
|
|
+ items.isShow = this.enFhList.indexOf(items.tokens[2])==-1
|
|
|
+ resArr[item.pno].wordsList.push(items)
|
|
|
+ })
|
|
|
});
|
|
|
this.resArr = resArr;
|
|
|
+ setTimeout(() => {
|
|
|
+ waterMark.set(this.userMessage.user_name+' '+this.userMessage.phone,'')
|
|
|
+ }, 1000);
|
|
|
+
|
|
|
},
|
|
|
// 打印
|
|
|
handlePrint(){
|
|
|
@@ -299,7 +469,6 @@ export default {
|
|
|
if (this.articleInfo) {
|
|
|
this.handleData();
|
|
|
}
|
|
|
- waterMark.set(this.userMessage.user_name+' '+this.userMessage.phone,'')
|
|
|
this.$nextTick(() => {
|
|
|
document.onselectstart = new Function("event.returnValue=false");
|
|
|
})
|
|
|
@@ -363,19 +532,91 @@ export default {
|
|
|
text-align: center;
|
|
|
}
|
|
|
h2{
|
|
|
- text-align: center;
|
|
|
+ display: flex;
|
|
|
+ flex-flow: wrap;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .table-box {
|
|
|
+ // background: #f7f7f7;
|
|
|
+ // border-top: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ :last-child {
|
|
|
+ :last-child.wordsList-box {
|
|
|
+ padding-bottom: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .wordsList-box {
|
|
|
+ flex: 1;
|
|
|
+ // padding: 6px 0 12px 0;
|
|
|
+ .nnpe-sentence-box {
|
|
|
+ display: flex;
|
|
|
+ flex-flow: wrap;
|
|
|
+ .word-box{
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > img {
|
|
|
+ max-width: 50%;
|
|
|
+ display: block;
|
|
|
+ padding: 16px 0;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.NNPE-detail {
|
|
|
- // clear: both;
|
|
|
- // overflow: hidden;
|
|
|
- // display: flex;
|
|
|
- // padding: 6px 0 12px 3px;
|
|
|
- text-indent: 2em;
|
|
|
- .word-box {
|
|
|
+ clear: both;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ .NNPE-words {
|
|
|
+ float: left;
|
|
|
+ padding: 0;
|
|
|
+ &.noPadding{
|
|
|
+ padding:0;
|
|
|
+ }
|
|
|
+ &.sentActive {
|
|
|
+ background: rgba(24, 144, 255, 0.1);
|
|
|
+ }
|
|
|
+ &.overActive {
|
|
|
+ background: rgba(0, 0, 0, 0.06);
|
|
|
+ }
|
|
|
+ > span {
|
|
|
+ float: left;
|
|
|
+ &.NNPE-chs {
|
|
|
+ // font-size: 24px;
|
|
|
font-family: 'Smartisan';
|
|
|
line-height: 150%;
|
|
|
color: #000000;
|
|
|
- word-break: break-word;
|
|
|
+ padding: 0 3px;
|
|
|
+ &.wordActive {
|
|
|
+ color: #175DFF !important;
|
|
|
+ }
|
|
|
+ &.marginRight{
|
|
|
+ padding-right: 0;
|
|
|
+ }
|
|
|
+ &.marginLeft{
|
|
|
+ padding-left: 0;
|
|
|
+ }
|
|
|
+ &.marginSingleRight{
|
|
|
+ padding-right: 3px;
|
|
|
+ }
|
|
|
+ &.fontWeight{
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ &.newWord{
|
|
|
+ color: #3459D2 !important;
|
|
|
+ }
|
|
|
+ &.phrase{
|
|
|
+ color: #FF802B !important;
|
|
|
+ }
|
|
|
+ &.explain{
|
|
|
+ // color: #23C847 !important;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.padding {
|
|
|
+ padding: 0 3px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
natasha