|
|
@@ -176,8 +176,9 @@
|
|
|
<div class="word_back">
|
|
|
<div class="word">
|
|
|
<span class="title">主题词：</span>
|
|
|
- <span>你好</span>
|
|
|
- <span>请问</span>
|
|
|
+ <span v-for="(item, i) in subjectWords" :key="i + 'word'">{{
|
|
|
+ item
|
|
|
+ }}</span>
|
|
|
</div>
|
|
|
<div class="back" v-if="$route.query.type != '文本分析'">
|
|
|
返回课文
|
|
|
@@ -209,7 +210,11 @@
|
|
|
<img src="../../assets/teacherdev/icon-cibiao.png" alt="" />
|
|
|
词表
|
|
|
</div>
|
|
|
- <div class="btn_dv" style="margin-right: 24px">
|
|
|
+ <div
|
|
|
+ class="btn_dv"
|
|
|
+ style="margin-right: 24px"
|
|
|
+ @click="downArticle"
|
|
|
+ >
|
|
|
<img src="../../assets/teacherdev/icon-down.png" alt="" />
|
|
|
下载
|
|
|
</div>
|
|
|
@@ -257,11 +262,29 @@
|
|
|
</div>
|
|
|
<div class="right_main">
|
|
|
<div class="right_main_top">
|
|
|
- <span>音节难度 1.28</span>
|
|
|
+ <span
|
|
|
+ >音节难度
|
|
|
+ <template v-if="leftNavIndex == 0">
|
|
|
+ {{ difficulty.pinyinDifficulty }}
|
|
|
+ </template>
|
|
|
+ <template v-else-if="leftNavIndex == 1">
|
|
|
+ {{ difficulty.wordDifficulty }}
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ {{ difficulty.vocabularyDifficulty }}
|
|
|
+ </template>
|
|
|
+ </span>
|
|
|
<span class="line"></span>
|
|
|
- <span v-if="leftNavIndex == 0">{{base.pinyinCount}} / {{base.pinyinTextCount}}</span>
|
|
|
- <span v-else-if="leftNavIndex == 1">{{base.wordCount}} / {{base.wordTextCount}}</span>
|
|
|
- <span v-else>{{base.vocabularyCount}} / {{base.vocabularyTextCount}}</span>
|
|
|
+ <span v-if="leftNavIndex == 0"
|
|
|
+ >{{ base.pinyinCount }} / {{ base.pinyinTextCount }}</span
|
|
|
+ >
|
|
|
+ <span v-else-if="leftNavIndex == 1"
|
|
|
+ >{{ base.wordCount }} / {{ base.wordTextCount }}</span
|
|
|
+ >
|
|
|
+ <span v-else
|
|
|
+ >{{ base.vocabularyCount }} /
|
|
|
+ {{ base.vocabularyTextCount }}</span
|
|
|
+ >
|
|
|
</div>
|
|
|
<div class="articel">
|
|
|
<div
|
|
|
@@ -269,19 +292,19 @@
|
|
|
v-for="(item, index) in ArticelData"
|
|
|
:key="index + 'paragraph'"
|
|
|
>
|
|
|
- <div
|
|
|
+ <span
|
|
|
class="sentence"
|
|
|
v-for="(items, indexs) in item"
|
|
|
:key="indexs + 'sentence'"
|
|
|
>
|
|
|
- <div
|
|
|
+ <span
|
|
|
class="words"
|
|
|
v-for="(itemss, indexss) in items"
|
|
|
:key="indexss + 'words'"
|
|
|
>
|
|
|
<template v-if="fenci">
|
|
|
- <div class="word" style="margin: 0 2px">
|
|
|
- <div
|
|
|
+ <span class="word" style="margin: 0 2px">
|
|
|
+ <span
|
|
|
v-if="pinyinShow"
|
|
|
class="pinyin"
|
|
|
:style="{
|
|
|
@@ -294,8 +317,8 @@
|
|
|
>
|
|
|
{{ word.pinyin }}
|
|
|
</span>
|
|
|
- </div>
|
|
|
- <div
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
class="hanzi"
|
|
|
:style="{
|
|
|
fontSize: wordFontsize + 'px',
|
|
|
@@ -305,7 +328,9 @@
|
|
|
v-for="(word, indexsss) in itemss.text"
|
|
|
:key="indexsss + 'word'"
|
|
|
:style="{
|
|
|
- color: !xifen
|
|
|
+ color: word.color
|
|
|
+ ? word.color
|
|
|
+ : !xifen
|
|
|
? leftNavIndex == 0
|
|
|
? seleLevelMapList.indexOf(word.levels.P_G) !=
|
|
|
-1
|
|
|
@@ -342,45 +367,16 @@
|
|
|
>
|
|
|
{{ word.word }}
|
|
|
</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
- <div
|
|
|
+ <span
|
|
|
class="word"
|
|
|
v-for="(word, indexsss) in itemss.text"
|
|
|
:key="indexsss + 'word'"
|
|
|
- :style="{
|
|
|
- color: !xifen
|
|
|
- ? leftNavIndex == 0
|
|
|
- ? seleLevelMapList.indexOf(word.levels.P_G) != -1
|
|
|
- ? levelMap[word.levels.P_G].color
|
|
|
- : ''
|
|
|
- : leftNavIndex == 1
|
|
|
- ? seleLevelMapList.indexOf(word.levels.W_G) != -1
|
|
|
- ? levelMap[word.levels.W_G].color
|
|
|
- : ''
|
|
|
- : leftNavIndex == 2
|
|
|
- ? seleLevelMapList.indexOf(word.levels.C_G) != -1
|
|
|
- ? levelMap[word.levels.C_G].color
|
|
|
- : ''
|
|
|
- : ''
|
|
|
- : leftNavIndex == 0
|
|
|
- ? seleLevelMapList.indexOf(word.levels.P_L) != -1
|
|
|
- ? levelMap[word.levels.P_L].color
|
|
|
- : ''
|
|
|
- : leftNavIndex == 1
|
|
|
- ? seleLevelMapList.indexOf(word.levels.W_L) != -1
|
|
|
- ? levelMap[word.levels.W_L].color
|
|
|
- : ''
|
|
|
- : leftNavIndex == 2
|
|
|
- ? seleLevelMapList.indexOf(word.levels.C_L) != -1
|
|
|
- ? levelMap[word.levels.C_L].color
|
|
|
- : ''
|
|
|
- : '',
|
|
|
- }"
|
|
|
>
|
|
|
- <div
|
|
|
+ <span
|
|
|
v-if="pinyinShow"
|
|
|
class="pinyin"
|
|
|
:style="{
|
|
|
@@ -388,19 +384,51 @@
|
|
|
}"
|
|
|
>
|
|
|
{{ word.pinyin }}
|
|
|
- </div>
|
|
|
- <div
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
class="hanzi"
|
|
|
:style="{
|
|
|
fontSize: wordFontsize + 'px',
|
|
|
+ color: word.color
|
|
|
+ ? word.color
|
|
|
+ : !xifen
|
|
|
+ ? leftNavIndex == 0
|
|
|
+ ? seleLevelMapList.indexOf(word.levels.P_G) !=
|
|
|
+ -1
|
|
|
+ ? levelMap[word.levels.P_G].color
|
|
|
+ : ''
|
|
|
+ : leftNavIndex == 1
|
|
|
+ ? seleLevelMapList.indexOf(word.levels.W_G) !=
|
|
|
+ -1
|
|
|
+ ? levelMap[word.levels.W_G].color
|
|
|
+ : ''
|
|
|
+ : leftNavIndex == 2
|
|
|
+ ? seleLevelMapList.indexOf(word.levels.C_G) !=
|
|
|
+ -1
|
|
|
+ ? levelMap[word.levels.C_G].color
|
|
|
+ : ''
|
|
|
+ : ''
|
|
|
+ : leftNavIndex == 0
|
|
|
+ ? seleLevelMapList.indexOf(word.levels.P_L) != -1
|
|
|
+ ? levelMap[word.levels.P_L].color
|
|
|
+ : ''
|
|
|
+ : leftNavIndex == 1
|
|
|
+ ? seleLevelMapList.indexOf(word.levels.W_L) != -1
|
|
|
+ ? levelMap[word.levels.W_L].color
|
|
|
+ : ''
|
|
|
+ : leftNavIndex == 2
|
|
|
+ ? seleLevelMapList.indexOf(word.levels.C_L) != -1
|
|
|
+ ? levelMap[word.levels.C_L].color
|
|
|
+ : ''
|
|
|
+ : '',
|
|
|
}"
|
|
|
>
|
|
|
{{ word.word }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
</template>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -420,6 +448,8 @@ import { postapi } from "@/api/api";
|
|
|
import staticData from "../../common/data";
|
|
|
import { json2excel } from "@/utils/setMethods";
|
|
|
|
|
|
+import FileSaver from "file-saver";
|
|
|
+import htmlDocx from "html-docx-js/dist/html-docx";
|
|
|
export default {
|
|
|
components: {
|
|
|
Header,
|
|
|
@@ -465,13 +495,77 @@ export default {
|
|
|
chartIndex: 0,
|
|
|
ArticelData: null,
|
|
|
seleLevelMapList: [],
|
|
|
+ difficulty: {},
|
|
|
+ textContent: "",
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 取消搜索高亮
|
|
|
+ closeSearchhighlight() {
|
|
|
+ this.ArticelData.forEach((item) => {
|
|
|
+ item.forEach((items) => {
|
|
|
+ items.forEach((itemss) => {
|
|
|
+ itemss.text.forEach((itemsss) => {
|
|
|
+ itemsss.color = null;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 取消等级高亮
|
|
|
+ closelevelMaphighlight() {
|
|
|
+ this.seleLevelMapList = [];
|
|
|
+ },
|
|
|
+ // 下载文章
|
|
|
+ downArticle() {
|
|
|
+ let html = "";
|
|
|
+ if (this.$(".articel").length > 0) {
|
|
|
+ html = this.$(".articel").html();
|
|
|
+ }
|
|
|
+ let style = ` <style>
|
|
|
+ .sentence {
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+.word {
|
|
|
+ writing-mode: vertical-lr;
|
|
|
+}
|
|
|
+.word > span {
|
|
|
+ writing-mode: horizontal-tb;
|
|
|
+}
|
|
|
+.pinyin {
|
|
|
+ color: rgba(255, 255, 255, 0.5);
|
|
|
+ text-align: center;
|
|
|
+ line-height: 12px;
|
|
|
+ font-family: "GB-PINYINOK-B";
|
|
|
+}
|
|
|
+.hanzi {
|
|
|
+ color: rgb(255, 255, 255);
|
|
|
+ text-align: center;
|
|
|
+ line-height: 28px;
|
|
|
+ font-family: "FZJCGFKTK";
|
|
|
+}
|
|
|
+ </style>`;
|
|
|
+ let content = `<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ ${style}
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<div style="background:#26272a">
|
|
|
+ ${html}
|
|
|
+</div>
|
|
|
+</body>
|
|
|
+</html>`;
|
|
|
+ let converted = htmlDocx.asBlob(content);
|
|
|
+ FileSaver.saveAs(converted, "文章.docx");
|
|
|
+ },
|
|
|
// 选择高亮等级
|
|
|
levelMapListEvent(item) {
|
|
|
+ this.clearSelected();
|
|
|
let index = this.seleLevelMapList.indexOf(item.name);
|
|
|
- console.log(index);
|
|
|
if (index == -1) {
|
|
|
this.seleLevelMapList.push(item.name);
|
|
|
} else {
|
|
|
@@ -558,6 +652,7 @@ export default {
|
|
|
if (!this.searchVal) {
|
|
|
return;
|
|
|
}
|
|
|
+ this.closelevelMaphighlight();
|
|
|
let index = this.searchWord.indexOf(this.searchVal.toLowerCase());
|
|
|
if (index == -1) {
|
|
|
this.searchWord.push(this.searchVal.toLowerCase());
|
|
|
@@ -568,33 +663,73 @@ export default {
|
|
|
}
|
|
|
this.type = "";
|
|
|
this.calculateSearchwordNumber();
|
|
|
- this.calculateSearchhighlight();
|
|
|
},
|
|
|
// 计算匹配个数
|
|
|
- calculateSearchwordNumber() {
|
|
|
+ async calculateSearchwordNumber() {
|
|
|
+ let arr = [];
|
|
|
+ await this.searchWord.forEach((item) => {
|
|
|
+ this.calculateIndex(this.textContent, item).then((res) => {
|
|
|
+ arr.push(res);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.SearchwordNumber = 0;
|
|
|
+ arr.forEach((item) => {
|
|
|
+ this.SearchwordNumber += item.length;
|
|
|
+ });
|
|
|
+ // 匹配高亮
|
|
|
this.ArticelData.forEach((item) => {
|
|
|
item.forEach((items) => {
|
|
|
items.forEach((itemss) => {
|
|
|
- itemss.forEach((itemsss) => {
|
|
|
- this.searchWord.forEach((search) => {
|
|
|
- if (itemsss.word == search) {
|
|
|
- this.SearchwordNumber++;
|
|
|
- }
|
|
|
+ itemss.text.forEach((itemsss) => {
|
|
|
+ arr.forEach((searchItem, i) => {
|
|
|
+ searchItem.forEach((searchItems) => {
|
|
|
+ searchItems.forEach((searchItemss) => {
|
|
|
+ if (itemsss.index == searchItemss) {
|
|
|
+ itemsss.color = this.currentcolorValue[i];
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
});
|
|
|
});
|
|
|
});
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
- // 计算高亮
|
|
|
- calculateSearchhighlight() {},
|
|
|
+ // 找出对应字符的索引
|
|
|
+ calculateIndex(txt, key) {
|
|
|
+ return new Promise((reslove, reject) => {
|
|
|
+ let keylength = key.length;
|
|
|
+ let arr = [];
|
|
|
+ for (let i = 0; i < txt.length; i++) {
|
|
|
+ if (txt[i] == key[0]) {
|
|
|
+ arr.push(i);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let indexArr = [];
|
|
|
+ arr.forEach((item) => {
|
|
|
+ let arr = [];
|
|
|
+ for (let i = 0; i < keylength; i++) {
|
|
|
+ if (txt[item + i] == key[i]) {
|
|
|
+ arr.push(item + i);
|
|
|
+ } else {
|
|
|
+ arr = [];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (arr.length > 0) {
|
|
|
+ indexArr.push(arr);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ reslove(indexArr);
|
|
|
+ });
|
|
|
+ },
|
|
|
clearSelected() {
|
|
|
let _this = this;
|
|
|
_this.type = "";
|
|
|
_this.searchVal = "";
|
|
|
_this.searchWord = [];
|
|
|
_this.currentcolorValue = [];
|
|
|
- _this.SearchwordNumber = [];
|
|
|
+ _this.SearchwordNumber = 0;
|
|
|
+ this.closeSearchhighlight();
|
|
|
},
|
|
|
cutHeaderText(type) {
|
|
|
this.headerText = type;
|
|
|
@@ -948,6 +1083,20 @@ export default {
|
|
|
})
|
|
|
.then((res) => {
|
|
|
this.ArticelData = res.data.result;
|
|
|
+ let str = "";
|
|
|
+ let index = 0;
|
|
|
+ this.ArticelData.forEach((item) => {
|
|
|
+ item.forEach((items) => {
|
|
|
+ items.forEach((itemss) => {
|
|
|
+ itemss.text.forEach((itemsss) => {
|
|
|
+ str += itemsss.word;
|
|
|
+ itemsss.index = index;
|
|
|
+ index++;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.textContent = str;
|
|
|
this.loading = false;
|
|
|
})
|
|
|
.catch((res) => {
|
|
|
@@ -957,13 +1106,17 @@ export default {
|
|
|
},
|
|
|
created() {
|
|
|
this.partitionKey = this.$route.query.partitionKey * 1;
|
|
|
- this.subjectWords = this.$route.query.subjectWords;
|
|
|
+ this.subjectWords = JSON.parse(this.$route.query.subjectWords);
|
|
|
this.base.wordTextCount = this.$route.query.wordTextCount * 1;
|
|
|
this.base.wordCount = this.$route.query.wordCount * 1;
|
|
|
this.base.vocabularyTextCount = this.$route.query.vocabularyTextCount * 1;
|
|
|
this.base.vocabularyCount = this.$route.query.vocabularyCount * 1;
|
|
|
this.base.pinyinCount = this.$route.query.pinyinCount * 1;
|
|
|
this.base.pinyinTextCount = this.$route.query.pinyinTextCount * 1;
|
|
|
+ this.difficulty.pinyinDifficulty = this.$route.query.pinyinDifficulty;
|
|
|
+ this.difficulty.vocabularyDifficulty =
|
|
|
+ this.$route.query.vocabularyDifficulty;
|
|
|
+ this.difficulty.wordDifficulty = this.$route.query.wordDifficulty;
|
|
|
this.levelMap = staticData.LevelMap;
|
|
|
this.getstatistics();
|
|
|
},
|
|
|
@@ -1399,25 +1552,33 @@ export default {
|
|
|
margin-top: 17px;
|
|
|
font-weight: 500;
|
|
|
.paragraph {
|
|
|
- display: flex;
|
|
|
+ // display: flex;
|
|
|
.sentence {
|
|
|
- display: flex;
|
|
|
+ // display: flex;
|
|
|
margin-bottom: 8px;
|
|
|
.words {
|
|
|
- display: flex;
|
|
|
+ // display: flex;
|
|
|
+ .word {
|
|
|
+ writing-mode: vertical-lr;
|
|
|
+ > span {
|
|
|
+ writing-mode: horizontal-tb;
|
|
|
+ }
|
|
|
+ }
|
|
|
.pinyin {
|
|
|
+ float: left;
|
|
|
color: rgba(255, 255, 255, 0.5);
|
|
|
text-align: center;
|
|
|
line-height: 12px;
|
|
|
font-family: "GB-PINYINOK-B";
|
|
|
- display: flex;
|
|
|
+ // display: flex;
|
|
|
}
|
|
|
.hanzi {
|
|
|
+ float: left;
|
|
|
color: rgb(255, 255, 255);
|
|
|
text-align: center;
|
|
|
line-height: 28px;
|
|
|
font-family: "FZJCGFKTK";
|
|
|
- display: flex;
|
|
|
+ // display: flex;
|
|
|
}
|
|
|
}
|
|
|
}
|
qinpeng