From e74020326a3c4d17b79c9727bd3eb19f1d69ea3d Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期五, 07 六月 2024 18:45:21 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout
---
src/books/sportsAndHealth/view/components/index.vue | 364 +++++++++++++++++++++++++++++++++++----------------
1 files changed, 250 insertions(+), 114 deletions(-)
diff --git a/src/books/sportsAndHealth/index.vue b/src/books/sportsAndHealth/view/components/index.vue
similarity index 74%
rename from src/books/sportsAndHealth/index.vue
rename to src/books/sportsAndHealth/view/components/index.vue
index 5c4e9a4..a00a00a 100644
--- a/src/books/sportsAndHealth/index.vue
+++ b/src/books/sportsAndHealth/view/components/index.vue
@@ -1,8 +1,10 @@
<template>
<div class="page-main" @scroll="throttledScrollHandler">
+ <div id="searchDomBox" style="display: none">
+ <div id="searchContent"></div>
+ </div>
<div
class="public-sportsAndHealth"
- @mouseup="handleMouseUp"
:style="{
fontSize: fontSize ? fontSize + 'px' : '16px',
transform: `scale(${pageZoom ? pageZoom : 1})`,
@@ -12,57 +14,64 @@
<front001
v-if="showCatalogList.indexOf(1) > -1"
:showPageList="loadPageList"
+ :isSearch="isSearch"
/>
<ChapterOne
v-if="showCatalogList.indexOf(2) > -1"
:showPageList="loadPageList"
- :questionData="questionData"
+ :questionData="questionDataMap"
:isSearch="isSearch"
/>
<ChapterTwo
v-if="showCatalogList.indexOf(3) > -1"
:showPageList="loadPageList"
- :questionData="questionData"
- @eventPublic="swdtChange"
+ :questionData="questionDataMap"
:isSearch="isSearch"
/>
<ChapterThree
v-if="showCatalogList.indexOf(4) > -1"
:showPageList="loadPageList"
- :questionData="questionData"
+ :questionData="questionDataMap"
:isSearch="isSearch"
/>
<ChapterFour
v-if="showCatalogList.indexOf(5) > -1"
:showPageList="loadPageList"
- :questionData="questionData"
+ :questionData="questionDataMap"
:isSearch="isSearch"
/>
<!-- <ChapterFive
v-if="showCatalogList.indexOf(6) > -1"
:showPageList="loadPageList"
- :questionData="questionData"
+ :questionData="questionDataMap"
+ @Upload_initViewer="changeDomViewer"
+ :isSearch="isSearch"
/> -->
<!-- <chapterSix
v-if="showCatalogList.indexOf(7) > -1"
:showPageList="loadPageList"
- :questionData="questionData"
+ :questionData="questionDataMap"
+ :isSearch="isSearch"
/> -->
<!-- <chapterSeven
v-if="showCatalogList.indexOf(8) > -1"
:showPageList="loadPageList"
- :questionData="questionData"
- @eventPublic="swdtChange"
+ :questionData="questionDataMap"
+ @eventSwdt="swdtChange"
+ @Upload_initViewer="changeDomViewer"
+ :isSearch="isSearch"
/> -->
<!-- <chapterEight
v-if="showCatalogList.indexOf(9) > -1"
:showPageList="loadPageList"
- :questionData="questionData"
+ :questionData="questionDataMap"
+ :isSearch="isSearch"
/> -->
<!-- <chapterNine
v-if="showCatalogList.indexOf(10) > -1"
:showPageList="loadPageList"
- :questionData="questionData"
+ :questionData="questionDataMap"
+ :isSearch="isSearch"
/> -->
<!-- <chapter010
v-if="showCatalogList.indexOf(11) > -1"
@@ -105,31 +114,29 @@
</template>
<script>
-import front001 from "./view/front001";
-import ChapterOne from "./view/chapter001";
-import ChapterTwo from "./view/chapter002";
-import ChapterThree from "./view/testDynaicTable";
-import ChapterFour from "./view/testPp";
-// import ChapterThree from "./view/chapter003";
-// import ChapterFour from "./view/chapter004";
-// import ChapterFive from "./view/chapter005";
-// import chapterSix from "./view/chapter006";
-// import chapterSeven from "./view/chapter007";
-// import chapterEight from "./view/chapter008";
-// import chapterNine from "./view/chapter009";
-// import chapter010 from "./view/chapter010";
-// import chapter011 from "./view/chapter011";
-// import chapter012 from "./view/chapter012";
-// import chapter013 from "./view/chapter013";
-// import chapter014 from "./view/chapter014";
-// import chapter015 from "./view/chapter015";
-// import chapter016 from "./view/chapter016";
-// import chapter017 from "./view/chapter017";
-// import chapter018 from "./view/chapter018";
+import front001 from "./front001";
+import ChapterOne from "./chapter001";
+import ChapterTwo from "./chapter002";
+import ChapterThree from "./testDynaicTable";
+import ChapterFour from "./testPp";
+// import ChapterFive from "./chapter005";
+// import chapterSix from "./chapter006";
+// import chapterSeven from "./chapter007";
+// import chapterEight from "./chapter008";
+// import chapterNine from "./chapter009";
+// import chapter010 from "./chapter010";
+// import chapter011 from "./chapter011";
+// import chapter012 from "./chapter012";
+// import chapter013 from "./chapter013";
+// import chapter014 from "./chapter014";
+// import chapter015 from "./chapter015";
+// import chapter016 from "./chapter016";
+// import chapter017 from "./chapter017";
+// import chapter018 from "./chapter018";
import NoteIcon from "@/assets/images/biji.png";
import _ from "lodash";
import getQuestionList from "@/assets/methods/examination";
-import testData from "./js/examinationList";
+import testData from "../../js/examinationList";
import Swiper from "swiper/bundle";
import "swiper/swiper-bundle.css";
import Viewer from "viewerjs";
@@ -146,8 +153,9 @@
observer: null,
loadPageObserver: null,
loadPageList: [],
- questionData: {},
+ questionDataMap: {},
renderSignMap: {},
+ highlightData: null,
isSearch: false,
};
},
@@ -210,11 +218,21 @@
},
// 娓叉煋绗旇銆侀珮浜�佸垝绾�
renderSign: (type, data) => {
- this.renderSign(type, data);
+ // 鍥犱负璋冩暣涓洪〉闈㈡噿鍔犺浇锛屾墍浠ユ覆鏌撴爣璁颁篃闇�瑕佹寜鐓ч〉闈㈣繘琛屽鐞嗭紝鍏堝偍瀛樻暟鎹紝椤甸潰鍔犺浇瀹屾垚鍐嶆覆鏌撳搴旂殑鏍囪锛�
+ this.handelSignData(type, data);
+ // this.renderSign(type, data);
},
// 鍒犻櫎绗旇銆侀珮浜�佸垝绾�
delSign: (data) => {
this.delSign(data);
+ },
+ // 鍏ㄦ枃妫�绱�
+ searchBookByKeyword: (keyword) => {
+ return this.searchTextByPage(keyword);
+ },
+ // 璺宠浆妫�绱㈢粨鏋滀綅缃�
+ jumpSearchItem: (data) => {
+ this.searchItemLocation(data);
},
});
}
@@ -259,6 +277,12 @@
// }, 1000);
},
methods: {
+ changeDomViewer() {
+ setTimeout(() => {
+ this.initViewer();
+ }, 500);
+ },
+
// 婊氬姩鐩戝惉
scrollFun(event) {
// 鍒ゆ柇鍚戜笂婊氬姩杩樻槸鍚戜笅婊氬姩
@@ -337,6 +361,12 @@
// 澶勭悊鏍囪鏁版嵁
handelSignData(type, data) {
+ if (this.loadPageList.indexOf(Number(data.page)) > -1) {
+ // 绔嬪嵆娓叉煋
+ this.renderSign(type, data);
+ }
+
+ // 鍌ㄥ瓨鏁版嵁
if (!this.renderSignMap[type]) this.renderSignMap[type] = {};
if (!this.renderSignMap[type][data.page])
this.renderSignMap[type][data.page] = [];
@@ -345,6 +375,10 @@
// 娓叉煋鏍囪
renderSign(type, data) {
+ // 鐖跺眰璁剧疆绂佹娓叉煋鏍囪鏃朵笉鍐嶈繘琛屾覆鏌�
+ if (this.$store.state.qiankun.disableSign) {
+ return false;
+ }
const existence = (
this.container ? this.container : document
).querySelector(`[dataid="${data.id}"]`);
@@ -398,6 +432,7 @@
}
}
},
+
// 鍒犻櫎鏍囪娓叉煋
delSign({ ids, type }) {
if (ids && ids.length) {
@@ -425,6 +460,7 @@
}
}
},
+
initObservation() {
const sections = (
this.container ? this.container : document
@@ -453,6 +489,7 @@
}
});
},
+
initThemeColor() {
// 鑾峰彇鍚勭闇�瑕佷富棰樿壊鐨勮妭鐐�
const colorDom = (
@@ -532,14 +569,7 @@
}
});
},
- getParentWithClass(element, className) {
- while (element.parentElement) {
- element = element.parentElement;
- if (element.classList.contains(className)) {
- return element;
- }
- }
- },
+
pageChangeCallback(entries, observer) {
//entries锛氫唬琛ㄨ瀵熷埌鐨勭洰鏍囧厓绱犵殑闆嗗悎銆� observer锛氫唬琛ㄨ瀵熻�呭璞°��
entries.forEach((entry) => {
@@ -555,7 +585,7 @@
const catalog = catalogDom.getAttribute("num");
let text = null;
if (target.querySelector("p")) {
- text = target.querySelector("p").textContent.substring(0, 20);
+ text = target.querySelector("p").textContent.substring(0, 50);
}
// 杩斿洖椤电爜鍜岀珷鑺備俊鎭�
if (this.$store.state.qiankun && this.$store.state.qiankun.pageChange)
@@ -571,6 +601,7 @@
}
});
},
+
loadPageCallback(entries, observer) {
entries.forEach(async (entry) => {
if (entry.isIntersecting) {
@@ -581,32 +612,33 @@
target,
"chapter"
);
+ // 娣诲姞椤电爜
+ this.loadPageList.push(Number(page));
const catalog = catalogDom.getAttribute("num");
- if (!this.questionData[page]) {
+ if (!this.questionDataMap[page]) {
if (testData && testData[catalog]) {
if (testData[catalog][page]) {
if (Array.isArray(testData[catalog][page])) {
- this.questionData[page] = await getQuestionList(
- page,
- testData[catalog][page],
- this.config.activeBook
- );
+ this.questionDataMap[page] = await getQuestionList(
+ page,
+ testData[catalog][page],
+ this.config.activeBook
+ );
} else {
const obj = {};
for (let key in testData[catalog][page]) {
- obj[key] = await getQuestionList(
- [],
- testData[catalog][page][key],
- this.config.activeBook
- );
+ obj[key] = await getQuestionList(
+ [],
+ testData[catalog][page][key],
+ this.config.activeBook
+ );
}
- this.questionData[page] = obj;
+ this.questionDataMap[page] = obj;
}
}
}
}
- // 娣诲姞椤电爜
- this.loadPageList.push(Number(page));
+
// 娓叉煋杩欎竴椤电殑鏍囪
for (const key in this.renderSignMap) {
if (this.renderSignMap[key][page]) {
@@ -614,6 +646,36 @@
this.renderSign(key, item);
});
}
+ }
+ // 澶勭悊楂樹寒
+ if (this.highlightData) {
+ // 楂樹寒琛�
+ setTimeout(() => {
+ // 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣
+ const pageTextList = document.createTreeWalker(target, NodeFilter.SHOW_TEXT);
+ // 鍖归厤鍏抽敭瀛�
+ const allPageTextNodes = [];
+ let currentNode = pageTextList.nextNode();
+ while (currentNode) {
+ allPageTextNodes.push(currentNode);
+ currentNode = pageTextList.nextNode();
+ }
+ for (let i = 0; i < allPageTextNodes.length; i++) {
+ const textDom = allPageTextNodes[i];
+ let txtIndex = textDom.textContent.indexOf(
+ this.highlightData.txt
+ );
+ if (txtIndex > -1) {
+ textDom.parentNode.style.transition =
+ "background-color 0.8s";
+ textDom.parentNode.scrollIntoView();
+ textDom.parentNode.style.backgroundColor = "#79bbf0";
+ setTimeout(() => {
+ textDom.parentNode.style.backgroundColor = "";
+ }, 1000);
+ }
+ }
+ }, 100);
}
if (this.loadPageList.length > 5) {
// 瓒呰繃5椤�
@@ -623,6 +685,7 @@
}
});
},
+
initSwiper() {
const doms = (
this.container ? this.container : document
@@ -702,6 +765,7 @@
});
}
},
+
initViewer() {
const doms = (
this.container ? this.container : document
@@ -718,57 +782,7 @@
});
}
},
- // eslint-disable-next-line
- getParentWithClass(element, className) {
- while (element.parentElement) {
- element = element.parentElement;
- if (element.classList.contains(className)) {
- return element;
- }
- }
- },
- handleMouseUp(e) {
- const selection = (
- this.container ? this.container : window
- ).getSelection();
- const txt = selection.toString();
- if (selection.type != "none" && txt) {
- let node = selection.anchorNode.parentNode;
- let pageHtml = this.getParentWithClass(
- selection.anchorNode,
- "page-box"
- );
- let chapterDom = this.getParentWithClass(
- selection.anchorNode,
- "chapter"
- );
- let chapterNum;
- if (chapterDom) chapterNum = chapterDom.getAttribute("num");
- if (pageHtml) {
- const page = pageHtml.getAttribute("page");
- // 鐩戝惉閫変腑鏂囨湰浜嬩欢锛屽苟瑙﹀彂鐖跺眰鏂规硶
- if (this.$store.state.qiankun.windowSelection) {
- this.$store.state.qiankun.windowSelection({
- chapterNum,
- txt,
- page,
- x: e.x,
- y: e.y,
- });
- }
- }
- } else {
- if (this.$store.state.qiankun.windowSelection) {
- this.$store.state.qiankun.windowSelection({
- chapterNum: "",
- txt: "",
- page: "",
- x: e.x,
- y: e.y,
- });
- }
- }
- },
+
swdtChange(data) {
if (this.$store.state.qiankun && this.$store.state.qiankun.chooseWords) {
this.$store.state.qiankun.chooseWords({
@@ -776,6 +790,132 @@
data: data.data,
});
}
+ },
+
+ // 鏍规嵁鍏抽敭瀛楀叏鏂囨绱�
+ searchTextByPage(keyword) {
+ const searchResult = [];
+ let catalogIndex = 0;
+ // 鎵�鏈夌珷鑺傜粍浠讹紙姣忔湰涔﹀埗浣滄椂鍗曠嫭閰嶇疆锛�
+ const pageData = {
+ front001,
+ ChapterOne,
+ ChapterTwo,
+ ChapterThree,
+ ChapterFour,
+ // ChapterFive,
+ // chapterSix,
+ // chapterSeven,
+ // chapterEight,
+ // chapterNine,
+ // chapter010,
+ // chapter011,
+ // chapter012,
+ // chapter013,
+ // chapter014,
+ // chapter015,
+ // chapter016,
+ // chapter017,
+ // chapter018,
+ };
+ // 閬嶅巻鎵�鏈夌珷鑺傛枃浠�
+ for (const key in pageData) {
+ catalogIndex++;
+ let pageComponent, pageExample;
+ // 鍏堟覆鏌撲竴娆″綋鍓嶇珷鑺傛枃浠讹紙杩欐椂椤甸潰鐨勫唴瀹逛负绌猴級锛岃幏鍙栭〉鐮佷俊鎭�
+ pageComponent = Vue.extend(pageData[key]);
+ pageExample = new pageComponent({
+ propsData: {
+ showPageList: [],
+ questionData: {},
+ },
+ });
+ pageExample.$mount(
+ (this.container ? this.container : document).querySelector(
+ "#searchContent"
+ )
+ );
+ // 鑾峰彇椤电爜
+ const pageDom = (this.container ? this.container : document)
+ .querySelector("#searchDomBox")
+ .querySelectorAll(".page-box");
+ const pages = [];
+ for (let i = 0; i < pageDom.length; i++) {
+ const pageDomItem = pageDom[i];
+ pages.push(Number(pageDomItem.getAttribute("page")));
+ }
+ // 鑾峰彇椤甸潰缁撴潫锛屽嵏杞介攢姣�
+ pageExample.$destroy();
+ (this.container ? this.container : document).querySelector(
+ "#searchDomBox"
+ ).innerHTML = '<div id="searchContent"></div>';
+ // 閬嶅巻椤电爜
+ if (pages.length) {
+ for (let i = 0; i < pages.length; i++) {
+ const pageNum = pages[i];
+ // 鍔ㄦ�佹覆鏌撳搴旂珷鑺傜殑椤电爜
+ pageComponent = Vue.extend(pageData[key]);
+ pageExample = new pageComponent({
+ propsData: {
+ showPageList: [pageNum],
+ questionData: {},
+ },
+ });
+ pageExample.$mount(
+ (this.container ? this.container : document).querySelector(
+ "#searchContent"
+ )
+ );
+ // 鑾峰彇瀵瑰簲椤甸潰dom
+ const thisPageDom = (this.container ? this.container : document)
+ .querySelector("#searchDomBox")
+ .querySelector(`[page="${pageNum}"]`);
+ if (thisPageDom) {
+ // 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣
+ const pageTextList = document.createTreeWalker(
+ thisPageDom,
+ NodeFilter.SHOW_TEXT
+ );
+ // 鍖归厤鍏抽敭瀛�
+ const allPageTextNodes = [];
+ let currentNode = pageTextList.nextNode();
+ while (currentNode) {
+ allPageTextNodes.push(currentNode);
+ currentNode = pageTextList.nextNode();
+ }
+ for (let i = 0; i < allPageTextNodes.length; i++) {
+ const textDom = allPageTextNodes[i];
+ let txtIndex = textDom.textContent.indexOf(keyword);
+ if (txtIndex > -1) {
+ // 璁板綍鍏抽敭瀛楁墍鍦ㄩ〉鐮併�佺珷鑺備互鍙婂尮閰嶅埌鐨勬钀�
+ searchResult.push({
+ page: pageNum,
+ catalog: catalogIndex,
+ txt: textDom.textContent,
+ txtIndex: txtIndex,
+ });
+ }
+ }
+ // 缁撴潫锛屽嵏杞介攢姣�
+ pageExample.$destroy();
+ (this.container ? this.container : document).querySelector(
+ "#searchDomBox"
+ ).innerHTML = '<div id="searchContent"></div>';
+ }
+ }
+ }
+ }
+ // 杈撳嚭鎼滅储缁撴灉
+ // console.log(searchResult);
+ return searchResult;
+ },
+
+ // 鏍规嵁妫�绱㈢粨鏋滆烦杞搴斾綅缃苟楂樹寒
+ searchItemLocation(data) {
+ // 璁板綍楂樹寒淇℃伅
+ this.highlightData = data;
+ // 璺宠浆
+ this.gotoPage(data.catalog, data.page, () => {});
},
},
components: {
@@ -801,7 +941,3 @@
},
};
</script>
-
-<style lang="less">
-@import "./css/default.less";
-</style>
--
Gitblit v1.9.1