|
|
@@ -2,6 +2,7 @@
|
|
|
<template>
|
|
|
<div class="NPC-ArticleView NPC-ArticleView-container">
|
|
|
<div class="ArticleView-header">
|
|
|
+ <a class="ArticleView-full" @click="fullScreen">全屏模式</a>
|
|
|
<template v-if="curQue.checkList.indexOf(1) > -1">
|
|
|
<el-switch
|
|
|
style="display: block"
|
|
|
@@ -80,6 +81,7 @@
|
|
|
:TaskModel="TaskModel"
|
|
|
:NNPEAnnotationList="NNPEAnnotationList"
|
|
|
:colLength="colLength"
|
|
|
+ :NpcNewWordMp3="NpcNewWordMp3"
|
|
|
/>
|
|
|
<Practice
|
|
|
:curQue="curQue"
|
|
|
@@ -94,6 +96,8 @@
|
|
|
@changeConfig="changeConfig"
|
|
|
:TaskModel="TaskModel"
|
|
|
:colLength="colLength"
|
|
|
+ :NpcNewWordMp3="NpcNewWordMp3"
|
|
|
+ :isFull="isFull"
|
|
|
/>
|
|
|
<WordModel
|
|
|
:curQue="curQue"
|
|
|
@@ -112,6 +116,30 @@
|
|
|
:colLength="colLength"
|
|
|
/>
|
|
|
</div>
|
|
|
+ <div class="voice-full-screen" :id="'screen-' + mathNum">
|
|
|
+ <Voicefullscreen
|
|
|
+ v-if="isFull && resObj"
|
|
|
+ :themeColor="themeColor"
|
|
|
+ :curQue="curQue"
|
|
|
+ :sentList="resObj.sentList"
|
|
|
+ :sentIndex="0"
|
|
|
+ :mp3="
|
|
|
+ curQue.mp3_list && curQue.mp3_list[0] ? curQue.mp3_list[0].id : ''
|
|
|
+ "
|
|
|
+ :noFont="noFont"
|
|
|
+ :NNPENewWordList="NNPENewWordList"
|
|
|
+ :currentTreeID="currentTreeID"
|
|
|
+ :isFull="isFull"
|
|
|
+ :config="config"
|
|
|
+ :TaskModel="TaskModel"
|
|
|
+ @handleWav="handleWav"
|
|
|
+ @changePinyin="changePinyins"
|
|
|
+ @changeEN="changeENs"
|
|
|
+ @exitFullscreen="exitFullscreen"
|
|
|
+ @changeIsFull="changeIsFull"
|
|
|
+ :NpcNewWordMp3="NpcNewWordMp3"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -120,6 +148,7 @@ import PhraseModel from "./PhraseModelChs.vue";
|
|
|
import NormalModelChs from "./NormalModelChs.vue";
|
|
|
import Practice from "./Practicechs.vue"; // 语音练习模式
|
|
|
import WordModel from "./WordModelChs.vue"; // 语音练习模式
|
|
|
+import Voicefullscreen from "../Voicefullscreen.vue";
|
|
|
|
|
|
export default {
|
|
|
name: "ArticleViewChs",
|
|
|
@@ -133,7 +162,13 @@ export default {
|
|
|
"colLength",
|
|
|
"NpcNewWordMp3"
|
|
|
],
|
|
|
- components: { NormalModelChs, Practice, WordModel, PhraseModel },
|
|
|
+ components: {
|
|
|
+ NormalModelChs,
|
|
|
+ Practice,
|
|
|
+ WordModel,
|
|
|
+ PhraseModel,
|
|
|
+ Voicefullscreen
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
showPreview: true, // 全文预览
|
|
|
@@ -158,7 +193,17 @@ export default {
|
|
|
},
|
|
|
writeModel: {}, //生词/取词模式
|
|
|
practiceModel: {} //练习模式
|
|
|
- }
|
|
|
+ },
|
|
|
+ mathNum: Math.random()
|
|
|
+ .toString(36)
|
|
|
+ .substr(2),
|
|
|
+ isFull: false,
|
|
|
+ resObj: null,
|
|
|
+ chsFhList: ["，", "。", "”", "：", "》", "？", "！", "；"],
|
|
|
+ highWords: null,
|
|
|
+ highWordsArr: [],
|
|
|
+ highIndex: 0,
|
|
|
+ newWordList: []
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -191,6 +236,21 @@ export default {
|
|
|
changeConfig(obj) {
|
|
|
this.config[obj] = !this.config[obj];
|
|
|
},
|
|
|
+ changeIsFull() {
|
|
|
+ this.isFull = false;
|
|
|
+ },
|
|
|
+ //拼音的显示和隐藏
|
|
|
+ changePinyins() {
|
|
|
+ if (this.config.isHasPY) {
|
|
|
+ this.changeConfig("isShowPY");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 英文的显示和隐藏
|
|
|
+ changeENs() {
|
|
|
+ if (this.config.isHasEN) {
|
|
|
+ this.changeConfig("isShowEN");
|
|
|
+ }
|
|
|
+ },
|
|
|
// 处理字体大小
|
|
|
handleFontsize(symbol) {
|
|
|
if (symbol == "+") {
|
|
|
@@ -219,10 +279,244 @@ export default {
|
|
|
});
|
|
|
});
|
|
|
return pinyin;
|
|
|
+ },
|
|
|
+ //语音全屏
|
|
|
+ fullScreen() {
|
|
|
+ this.pauseAudio();
|
|
|
+ this.pauseVideo();
|
|
|
+ this.isFull = true;
|
|
|
+ this.goFullscreen();
|
|
|
+ },
|
|
|
+ pauseAudio() {
|
|
|
+ let audio = document.getElementsByTagName("audio");
|
|
|
+ if (
|
|
|
+ audio &&
|
|
|
+ audio.length > 0 &&
|
|
|
+ window.location.href.indexOf("GCLS-Learn") == -1
|
|
|
+ ) {
|
|
|
+ audio.forEach(item => {
|
|
|
+ item.pause();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ pauseVideo() {
|
|
|
+ let video = document.getElementsByTagName("video");
|
|
|
+ if (
|
|
|
+ video &&
|
|
|
+ video.length > 0 &&
|
|
|
+ window.location.href.indexOf("GCLS-Learn") == -1
|
|
|
+ ) {
|
|
|
+ video.forEach(item => {
|
|
|
+ item.pause();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ goFullscreen() {
|
|
|
+ let id = "screen-" + this.mathNum;
|
|
|
+ var element = document.getElementById(id);
|
|
|
+ if (element.requestFullscreen) {
|
|
|
+ element.requestFullscreen();
|
|
|
+ } else if (element.msRequestFullscreen) {
|
|
|
+ element.msRequestFullscreen();
|
|
|
+ } else if (element.mozRequestFullScreen) {
|
|
|
+ element.mozRequestFullScreen();
|
|
|
+ } else if (element.webkitRequestFullscreen) {
|
|
|
+ element.webkitRequestFullscreen();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ exitFullscreen() {
|
|
|
+ this.isFull = false;
|
|
|
+ if (document.exitFullscreen) {
|
|
|
+ document.exitFullscreen();
|
|
|
+ } else if (document.msExitFullscreen) {
|
|
|
+ document.msExitFullscreen();
|
|
|
+ } else if (document.mozCancelFullScreen) {
|
|
|
+ document.mozCancelFullScreen();
|
|
|
+ } else if (document.webkitExitFullscreen) {
|
|
|
+ document.webkitExitFullscreen();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleData() {
|
|
|
+ let resArr = [],
|
|
|
+ sentArrTotal = [],
|
|
|
+ timeArr = [];
|
|
|
+ let curQue = JSON.parse(JSON.stringify(this.curQue));
|
|
|
+ let wordTimeList = curQue.wordTime;
|
|
|
+ let dhaspinyin = false; // 每段是否有拼音
|
|
|
+ let dhaspinyinArr = [];
|
|
|
+ curQue.detail.forEach((dItem, dIndex) => {
|
|
|
+ dhaspinyin = false;
|
|
|
+ dItem.wordsList.forEach((sItem, sIndex) => {
|
|
|
+ let sentArr = [];
|
|
|
+ let sentence = dItem.sentences[sIndex];
|
|
|
+ sItem.forEach((wItem, wIndex) => {
|
|
|
+ let startIndex =
|
|
|
+ wIndex == 0
|
|
|
+ ? 0
|
|
|
+ : sentArr[wIndex - 1].startIndex +
|
|
|
+ sentArr[wIndex - 1].chs.length;
|
|
|
+ let endIndex =
|
|
|
+ wIndex == 0
|
|
|
+ ? wItem.chs.length
|
|
|
+ : sentArr[wIndex - 1].endIndex + wItem.chs.length;
|
|
|
+ // this.judgePad(sItem, wItem, wIndex);
|
|
|
+ this.mergeWordSymbol(wItem);
|
|
|
+ let words = "";
|
|
|
+ if (this.newWordList.length > 0) {
|
|
|
+ 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 {
|
|
|
+ words = this.highWords ? this.highWords.words : "";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let obj = {
|
|
|
+ paraIndex: dIndex, //段落索引
|
|
|
+ sentIndex: sIndex, //在段落中句子索引
|
|
|
+ wordIndex: wIndex, //单词的索引
|
|
|
+ pinyin: wItem.pinyin,
|
|
|
+ chs: wItem.chs,
|
|
|
+ padding: true,
|
|
|
+ className: wItem.className,
|
|
|
+ isShow: wItem.isShow,
|
|
|
+ startIndex: startIndex,
|
|
|
+ endIndex: endIndex,
|
|
|
+ leg: wItem.chs.length,
|
|
|
+ timeList: [],
|
|
|
+ words: words
|
|
|
+ };
|
|
|
+ sentArr.push(obj);
|
|
|
+ if (wItem.pinyin) dhaspinyin = true;
|
|
|
+ });
|
|
|
+ let objs = {
|
|
|
+ sentArr: sentArr,
|
|
|
+ enwords:
|
|
|
+ dItem.sentencesEn &&
|
|
|
+ dItem.sentencesEn[sIndex] &&
|
|
|
+ dItem.sentencesEn[sIndex].replace(/\'/g, "’")
|
|
|
+ };
|
|
|
+ sentArrTotal.push(sentArr);
|
|
|
+ resArr.push(objs);
|
|
|
+ });
|
|
|
+ timeArr.push(dItem.timeList);
|
|
|
+ dhaspinyinArr.push(dhaspinyin);
|
|
|
+ });
|
|
|
+ if (wordTimeList && wordTimeList.length > 0) {
|
|
|
+ this.mergeWordTime(sentArrTotal, wordTimeList);
|
|
|
+ }
|
|
|
+ let timeList = [];
|
|
|
+ timeArr.forEach(item => {
|
|
|
+ item.forEach(aItem => {
|
|
|
+ if (timeList.indexOf(aItem) < 0) {
|
|
|
+ timeList.push(aItem);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.resObj = {
|
|
|
+ sentList: resArr,
|
|
|
+ timeList: timeList,
|
|
|
+ dhaspinyinArr: dhaspinyinArr
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mergeWordTime(resArr, wordTimeList) {
|
|
|
+ resArr.forEach((item, index) => {
|
|
|
+ let wordsResultList = wordTimeList[index].wordsResultList;
|
|
|
+ item.forEach(wItem => {
|
|
|
+ let startIndex = wItem.startIndex;
|
|
|
+ let endIndex = wItem.endIndex;
|
|
|
+ wItem.timeList = wordsResultList.slice(startIndex, endIndex);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ findLightWord(wItem, startIndex, sentence, sItem) {
|
|
|
+ let words = "",
|
|
|
+ endIndex = 0;
|
|
|
+ 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 (
|
|
|
+ wItem.new_word &&
|
|
|
+ wItem.new_word == item &&
|
|
|
+ !wItem.banLight
|
|
|
+ ) {
|
|
|
+ words = item;
|
|
|
+ endIndex = startIndex + 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (words) {
|
|
|
+ this.highWords = { words: words, endIndex: endIndex };
|
|
|
+ } else {
|
|
|
+ this.highWords = null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //词和标点合一起
|
|
|
+ mergeWordSymbol(wItem) {
|
|
|
+ if (this.chsFhList.indexOf(wItem.chs) > -1) {
|
|
|
+ wItem.isShow = false;
|
|
|
+ } else {
|
|
|
+ wItem.isShow = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleWav(list, tmIndex) {
|
|
|
+ tmIndex = tmIndex ? tmIndex : 0;
|
|
|
+ this.curQue.Bookanswer.practiceModel[tmIndex] = {
|
|
|
+ recordList: []
|
|
|
+ };
|
|
|
+ this.$set(
|
|
|
+ this.curQue.Bookanswer.practiceModel[tmIndex],
|
|
|
+ "recordList",
|
|
|
+ list
|
|
|
+ );
|
|
|
+ },
|
|
|
+ handleNewword() {
|
|
|
+ let NewWordList = [];
|
|
|
+ this.NNPENewWordList.forEach(item => {
|
|
|
+ item.forEach(wItem => {
|
|
|
+ if (wItem.new_word) {
|
|
|
+ NewWordList.push(wItem.new_word);
|
|
|
+ } else if (wItem.detail && wItem.detail.sentence) {
|
|
|
+ NewWordList.push(wItem.detail.sentence);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.newWordList = JSON.parse(JSON.stringify(NewWordList));
|
|
|
}
|
|
|
},
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
- created() {},
|
|
|
+ created() {
|
|
|
+ if (this.NNPENewWordList && this.NNPENewWordList.length > 0) {
|
|
|
+ this.handleNewword();
|
|
|
+ }
|
|
|
+ if (this.curQue) {
|
|
|
+ this.handleData();
|
|
|
+ }
|
|
|
+ },
|
|
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
mounted() {
|
|
|
let _this = this;
|
|
|
@@ -267,11 +561,26 @@ export default {
|
|
|
&.NPC-ArticleView-container {
|
|
|
margin-bottom: 24px;
|
|
|
}
|
|
|
+ .ArticleView-full {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ background: url("../../../../assets/NPC/full-screen-red.png") left center
|
|
|
+ no-repeat;
|
|
|
+ background-size: 16px 16px;
|
|
|
+ padding-left: 24px;
|
|
|
+ color: #000000;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ left: 0;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
.ArticleView-header {
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
|
align-items: center;
|
|
|
margin-bottom: 16px;
|
|
|
+ position: relative;
|
|
|
.setting-fontsize {
|
|
|
display: flex;
|
|
|
margin-left: 24px;
|
|
|
@@ -341,4 +650,30 @@ export default {
|
|
|
width: 100%;
|
|
|
}
|
|
|
}
|
|
|
+.NPC-Big-Book-preview-green {
|
|
|
+ .ArticleView-full {
|
|
|
+ background: url("../../../../assets/NPC/full-screen-green.png") left center
|
|
|
+ no-repeat !important;
|
|
|
+ background-size: 16px 16px !important;
|
|
|
+ }
|
|
|
+ .Soundrecord-content {
|
|
|
+ .full-screen-icon {
|
|
|
+ background: url("../../../../assets/NPC/full-screen-green.png") left
|
|
|
+ center no-repeat;
|
|
|
+ background-size: 16px 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.NPC-Big-Book-preview-brown {
|
|
|
+ .ArticleView-full {
|
|
|
+ background: url("../../../../assets/NPC/full-screen-brown.png") left center
|
|
|
+ no-repeat !important;
|
|
|
+ background-size: 16px 16px !important;
|
|
|
+ }
|
|
|
+ .full-screen-icon {
|
|
|
+ background: url("../../../../assets/NPC/full-screen-brown.png") left center
|
|
|
+ no-repeat;
|
|
|
+ background-size: 16px 16px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
natasha