|
@@ -282,148 +282,142 @@
|
|
|
<div class="articel">
|
|
|
<div
|
|
|
class="paragraph"
|
|
|
- v-for="(item, index) in ArticelData"
|
|
|
+ v-for="(items, index) in ArticelData"
|
|
|
:key="index + 'paragraph'"
|
|
|
>
|
|
|
- <span
|
|
|
+ <!-- <span
|
|
|
class="sentence"
|
|
|
v-for="(items, indexs) in item"
|
|
|
:key="indexs + 'sentence'"
|
|
|
+ > -->
|
|
|
+ <span
|
|
|
+ class="words"
|
|
|
+ v-for="(itemss, indexss) in items"
|
|
|
+ :key="indexss + 'words'"
|
|
|
+ :style="{
|
|
|
+ margin: fenci ? `0 ${wordsMargin}px` : '',
|
|
|
+ }"
|
|
|
>
|
|
|
- <span
|
|
|
- class="words"
|
|
|
- v-for="(itemss, indexss) in items"
|
|
|
- :key="indexss + 'words'"
|
|
|
- :style="{
|
|
|
- margin: fenci ? `0 ${wordsMargin}px` : '',
|
|
|
- }"
|
|
|
- >
|
|
|
- <template v-if="fenci">
|
|
|
+ <template v-if="fenci">
|
|
|
+ <span
|
|
|
+ v-for="(word, indexsss) in itemss.text"
|
|
|
+ :key="indexsss + 'word'"
|
|
|
+ :class="['word']"
|
|
|
+ v-if="word.isShow"
|
|
|
+ >
|
|
|
<span
|
|
|
- v-for="(word, indexsss) in itemss.text"
|
|
|
- :key="indexsss + 'word'"
|
|
|
- :class="['word']"
|
|
|
+ v-if="pinyinShow"
|
|
|
+ :class="['pinyin']"
|
|
|
+ :style="{
|
|
|
+ fontSize: pinyinFontsize + 'px',
|
|
|
+ lineHeight: pinyinLineHeight + 'px',
|
|
|
+ }"
|
|
|
>
|
|
|
- <span
|
|
|
- v-if="pinyinShow"
|
|
|
- :class="['pinyin']"
|
|
|
- :style="{
|
|
|
- fontSize: pinyinFontsize + 'px',
|
|
|
- lineHeight: pinyinLineHeight + 'px',
|
|
|
- }"
|
|
|
- >
|
|
|
- {{ word.pinyin }}
|
|
|
- </span>
|
|
|
- <br v-if="pinyinShow" />
|
|
|
- <span
|
|
|
- class="hanzi"
|
|
|
- :style="{
|
|
|
- fontSize: wordFontsize + 'px',
|
|
|
- lineHeight: wordLineHeight + 'px',
|
|
|
- background: word.color ? word.color : '',
|
|
|
- color: word.color
|
|
|
- ? '#FFFFFF'
|
|
|
- : !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
|
|
|
+ {{ word.pinyin }}
|
|
|
+ </span>
|
|
|
+ <br v-if="pinyinShow" />
|
|
|
+ <span
|
|
|
+ class="hanzi"
|
|
|
+ :style="{
|
|
|
+ fontSize: wordFontsize + 'px',
|
|
|
+ lineHeight: wordLineHeight + 'px',
|
|
|
+ background: word.color ? word.color : '',
|
|
|
+ color: word.color
|
|
|
+ ? '#FFFFFF'
|
|
|
+ : !xifen
|
|
|
+ ? leftNavIndex == 0
|
|
|
+ ? seleLevelMapList.indexOf(word.levels.P_G) != -1
|
|
|
+ ? levelMap[word.levels.P_G].color
|
|
|
: ''
|
|
|
: leftNavIndex == 1
|
|
|
- ? seleLevelMapList.indexOf(word.levels.W_L) != -1
|
|
|
- ? levelMap[word.levels.W_L].color
|
|
|
+ ? seleLevelMapList.indexOf(word.levels.W_G) != -1
|
|
|
+ ? levelMap[word.levels.W_G].color
|
|
|
: ''
|
|
|
: leftNavIndex == 2
|
|
|
- ? seleLevelMapList.indexOf(word.levels.C_L) != -1
|
|
|
- ? levelMap[word.levels.C_L].color
|
|
|
+ ? seleLevelMapList.indexOf(word.levels.C_G) != -1
|
|
|
+ ? levelMap[word.levels.C_G].color
|
|
|
: ''
|
|
|
- : '',
|
|
|
- }"
|
|
|
- v-if="word.isShow"
|
|
|
- >
|
|
|
- {{ word.word }}
|
|
|
- </span>
|
|
|
+ : ''
|
|
|
+ : 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 }}
|
|
|
</span>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <span
|
|
|
+ class="word"
|
|
|
+ v-for="(word, indexsss) in itemss.text"
|
|
|
+ :key="indexsss + 'word'"
|
|
|
+ v-if="word.isShow"
|
|
|
+ >
|
|
|
<span
|
|
|
- class="word"
|
|
|
- v-for="(word, indexsss) in itemss.text"
|
|
|
- :key="indexsss + 'word'"
|
|
|
+ v-if="pinyinShow"
|
|
|
+ :class="['pinyin']"
|
|
|
+ :style="{
|
|
|
+ fontSize: pinyinFontsize + 'px',
|
|
|
+ lineHeight: pinyinLineHeight + 'px',
|
|
|
+ }"
|
|
|
>
|
|
|
- <span
|
|
|
- v-if="pinyinShow"
|
|
|
- :class="['pinyin']"
|
|
|
- :style="{
|
|
|
- fontSize: pinyinFontsize + 'px',
|
|
|
- lineHeight: pinyinLineHeight + 'px',
|
|
|
- }"
|
|
|
- >
|
|
|
- {{ word.pinyin }}
|
|
|
- </span>
|
|
|
- <br v-if="pinyinShow" />
|
|
|
- <span
|
|
|
- class="hanzi"
|
|
|
- :style="{
|
|
|
- fontSize: wordFontsize + 'px',
|
|
|
- lineHeight: wordLineHeight + 'px',
|
|
|
- background: word.color ? word.color : '',
|
|
|
- color: word.color
|
|
|
- ? '#FFFFFF'
|
|
|
- : !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
|
|
|
+ {{ word.pinyin }}
|
|
|
+ </span>
|
|
|
+ <br v-if="pinyinShow" />
|
|
|
+ <span
|
|
|
+ class="hanzi"
|
|
|
+ :style="{
|
|
|
+ fontSize: wordFontsize + 'px',
|
|
|
+ lineHeight: wordLineHeight + 'px',
|
|
|
+ background: word.color ? word.color : '',
|
|
|
+ color: word.color
|
|
|
+ ? '#FFFFFF'
|
|
|
+ : !xifen
|
|
|
+ ? leftNavIndex == 0
|
|
|
+ ? seleLevelMapList.indexOf(word.levels.P_G) != -1
|
|
|
+ ? levelMap[word.levels.P_G].color
|
|
|
: ''
|
|
|
: leftNavIndex == 1
|
|
|
- ? seleLevelMapList.indexOf(word.levels.W_L) != -1
|
|
|
- ? levelMap[word.levels.W_L].color
|
|
|
+ ? seleLevelMapList.indexOf(word.levels.W_G) != -1
|
|
|
+ ? levelMap[word.levels.W_G].color
|
|
|
: ''
|
|
|
: leftNavIndex == 2
|
|
|
- ? seleLevelMapList.indexOf(word.levels.C_L) != -1
|
|
|
- ? levelMap[word.levels.C_L].color
|
|
|
+ ? seleLevelMapList.indexOf(word.levels.C_G) != -1
|
|
|
+ ? levelMap[word.levels.C_G].color
|
|
|
: ''
|
|
|
- : '',
|
|
|
- }"
|
|
|
- v-if="word.isShow"
|
|
|
- >
|
|
|
- {{ word.word }}
|
|
|
- </span>
|
|
|
+ : ''
|
|
|
+ : 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 }}
|
|
|
</span>
|
|
|
- </template>
|
|
|
- </span>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
</span>
|
|
|
+ <!-- </span> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -749,9 +743,27 @@ export default {
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
+ replacepos(text, start, stop, replacetext) {
|
|
|
+ mystr =
|
|
|
+ text.substring(0, stop - 1) + replacetext + text.substring(stop + 1);
|
|
|
+ return mystr;
|
|
|
+ },
|
|
|
// 找出对应字符的索引
|
|
|
calculateIndex(txt, key) {
|
|
|
return new Promise((reslove, reject) => {
|
|
|
+ // let newtxt = "";
|
|
|
+ // let txtarr = [];
|
|
|
+ // txtarr = txt.split("");
|
|
|
+ // txtarr.forEach((item, i) => {
|
|
|
+ // if (this.chsFhList.indexOf(item) != -1) {
|
|
|
+ // txtarr.splice(i, 1);
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // txtarr.forEach((item, i) => {
|
|
|
+ // newtxt += item;
|
|
|
+ // });
|
|
|
+
|
|
|
+ // 去除标点
|
|
|
let keylength = key.length;
|
|
|
let arr = [];
|
|
|
for (let i = 0; i < txt.length; i++) {
|
|
@@ -785,6 +797,7 @@ export default {
|
|
|
_this.SearchwordNumber = 0;
|
|
|
if (all) {
|
|
|
this.seleLevelMapList = [];
|
|
|
+ sessionStorage.setItem("tablehighlight", false);
|
|
|
}
|
|
|
this.closeSearchhighlight();
|
|
|
},
|
|
@@ -1118,13 +1131,13 @@ export default {
|
|
|
.then((res) => {
|
|
|
this.ArticelData = res.data.result;
|
|
|
let str = "";
|
|
|
- let index = 0;
|
|
|
+ // 合并标点
|
|
|
this.ArticelData.forEach((item) => {
|
|
|
item.forEach((items) => {
|
|
|
items.forEach((itemss, index) => {
|
|
|
itemss.text.forEach((itemsss) => {
|
|
|
if (this.chsFhList.indexOf(itemsss.word) != -1) {
|
|
|
- let obj = JSON.parse(JSON.stringify(itemsss))
|
|
|
+ let obj = JSON.parse(JSON.stringify(itemsss));
|
|
|
obj.isShow = true;
|
|
|
items[index - 1].text.push(obj);
|
|
|
itemsss.isShow = false;
|
|
@@ -1132,14 +1145,38 @@ export default {
|
|
|
itemsss.isShow = true;
|
|
|
}
|
|
|
str += itemsss.word;
|
|
|
- itemsss.index = index;
|
|
|
- index++;
|
|
|
});
|
|
|
});
|
|
|
});
|
|
|
});
|
|
|
+ let index = 0;
|
|
|
+ // 添加索引
|
|
|
+ this.ArticelData.forEach((item) => {
|
|
|
+ item.forEach((items) => {
|
|
|
+ items.forEach((itemss) => {
|
|
|
+ itemss.text.forEach((itemsss) => {
|
|
|
+ if (itemsss.isShow) {
|
|
|
+ itemsss.index = index;
|
|
|
+ index++;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ let arr = [];
|
|
|
+ console.log(arr);
|
|
|
+ this.ArticelData.forEach((item, i) => {
|
|
|
+ arr.push([]);
|
|
|
+ item.forEach((items) => {
|
|
|
+ items.forEach((itemss) => {
|
|
|
+ arr[i].push(itemss);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.ArticelData = arr;
|
|
|
this.textContent = str;
|
|
|
- if (this.$route.query.remarks) {
|
|
|
+ let flag = sessionStorage.getItem("tablehighlight");
|
|
|
+ if (this.$route.query.remarks && flag == "true") {
|
|
|
this.wordTablehighlight(
|
|
|
JSON.parse(this.$route.query.remarks),
|
|
|
this.$route.query.color
|
|
@@ -1606,31 +1643,31 @@ export default {
|
|
|
.paragraph {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
- .sentence {
|
|
|
+ // .sentence {
|
|
|
+ // display: flex;
|
|
|
+ // flex-wrap: wrap;
|
|
|
+ // margin-bottom: 8px;
|
|
|
+ .words {
|
|
|
display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- margin-bottom: 8px;
|
|
|
- .words {
|
|
|
- display: flex;
|
|
|
- .word {
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .pinyin {
|
|
|
- min-height: 12px;
|
|
|
- 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";
|
|
|
- }
|
|
|
+ .word {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .pinyin {
|
|
|
+ min-height: 12px;
|
|
|
+ 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";
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ // }
|
|
|
}
|
|
|
}
|
|
|
}
|