From 65b5cd16cc9d9ab4b346a37107a44011550f701b Mon Sep 17 00:00:00 2001 From: YM <479443481@qq.com> Date: 星期五, 31 五月 2024 14:27:09 +0800 Subject: [PATCH] 全文检索 --- src/books/childHealth/view/content/index.vue | 362 +++++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 289 insertions(+), 73 deletions(-) diff --git a/src/books/childHealth/view/content/index.vue b/src/books/childHealth/view/content/index.vue index a5d750e..da0a4a3 100644 --- a/src/books/childHealth/view/content/index.vue +++ b/src/books/childHealth/view/content/index.vue @@ -1,11 +1,14 @@ <template> <div class="page-main" @scroll="throttledScrollHandler"> + <div id="searchDomBox" style="display: none"> + <div id="searchContent"></div> + </div> <div class="page-content" :style="{ fontSize: fontSize ? fontSize + 'px' : '16px', transform: `scale(${pageZoom ? pageZoom : 1})`, - transformOrigin: 'center top', + transformOrigin: 'center top' }" > <pageHeader @@ -15,57 +18,57 @@ <chapterOne v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList" - :questionData="questionData" + :questionData="questionDataMap" ></chapterOne> <chapterTwo v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList" - :questionData="questionData" + :questionData="questionDataMap" ></chapterTwo> <chapterThree v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList" - :questionData="questionData" + :questionData="questionDataMap" ></chapterThree> <chapterFour v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList" - :questionData="questionData" + :questionData="questionDataMap" ></chapterFour> <chapterFive v-if="showCatalogList.indexOf(6) > -1" :showPageList="loadPageList" - :questionData="questionData" + :questionData="questionDataMap" ></chapterFive> <chapterSix v-if="showCatalogList.indexOf(7) > -1" :showPageList="loadPageList" - :questionData="questionData" + :questionData="questionDataMap" ></chapterSix> <chapterSeven v-if="showCatalogList.indexOf(8) > -1" :showPageList="loadPageList" - :questionData="questionData" + :questionData="questionDataMap" ></chapterSeven> <chapterEight v-if="showCatalogList.indexOf(9) > -1" :showPageList="loadPageList" - :questionData="questionData" + :questionData="questionDataMap" ></chapterEight> <chapterNine v-if="showCatalogList.indexOf(10) > -1" :showPageList="loadPageList" - :questionData="questionData" + :questionData="questionDataMap" ></chapterNine> <chapterTen v-if="showCatalogList.indexOf(11) > -1" :showPageList="loadPageList" - :questionData="questionData" + :questionData="questionDataMap" ></chapterTen> <chapterEleven v-if="showCatalogList.indexOf(12) > -1" :showPageList="loadPageList" - :questionData="questionData" + :questionData="questionDataMap" ></chapterEleven> <chapterTwelve v-if="showCatalogList.indexOf(13) > -1" @@ -80,6 +83,7 @@ </template> <script> +import Vue from "vue"; import pageHeader from "./components/header.vue"; import chapterOne from "./components/chapter001.vue"; import chapterTwo from "./components/chapter002.vue"; @@ -114,7 +118,8 @@ observer: null, loadPageObserver: null, loadPageList: [], - questionData: {}, + questionDataMap: {}, + renderSignMap: {} }; }, computed: { @@ -123,7 +128,7 @@ }, pageZoom() { return this.$store.state.qiankun.scale / 100; - }, + } }, watch: { showCatalogList: { @@ -134,7 +139,7 @@ ) { // 璋冪敤鐖跺眰鏂规硶 this.$store.state.qiankun.catalogChange({ - showCatalogList: newVal, + showCatalogList: newVal }); } // 鍚姩椤电爜瑙傚療 @@ -171,12 +176,14 @@ }, // 娓叉煋绗旇銆侀珮浜�佸垝绾� renderSign: (type, data) => { - this.renderSign(type, data); + // 鍥犱负璋冩暣涓洪〉闈㈡噿鍔犺浇锛屾墍浠ユ覆鏌撴爣璁颁篃闇�瑕佹寜鐓ч〉闈㈣繘琛屽鐞嗭紝鍏堝偍瀛樻暟鎹紝椤甸潰鍔犺浇瀹屾垚鍐嶆覆鏌撳搴旂殑鏍囪锛� + this.handelSignData(type, data); + // this.renderSign(type, data); }, // 鍒犻櫎绗旇銆侀珮浜�佸垝绾� delSign: (data) => { this.delSign(data); - }, + } }); } @@ -185,13 +192,13 @@ this.observer = new IntersectionObserver(this.pageChangeCallback, { root: null, // 鎸囧畾鏍瑰厓绱狅紝杩欓噷璁句负 null锛岃〃绀洪�夊彇鏁翠釜瑙嗙獥浣滀负鏍瑰厓绱犮�� rootMargin: "0px", // 鎸囧畾鏍瑰厓绱犵殑杈圭晫锛岃繖閲岃涓� "0px"锛岃〃绀烘牴鍏冪礌鐨勮竟鐣屽拰瑙嗙獥鐨勮竟鐣岄噸鍚� - threshold: 0.5, // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般�� + threshold: 0.5 // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般�� }); this.loadPageObserver = new IntersectionObserver(this.loadPageCallback, { root: null, // 鎸囧畾鏍瑰厓绱狅紝杩欓噷璁句负 null锛岃〃绀洪�夊彇鏁翠釜瑙嗙獥浣滀负鏍瑰厓绱犮�� rootMargin: "0px", // 鎸囧畾鏍瑰厓绱犵殑杈圭晫锛岃繖閲岃涓� "0px"锛岃〃绀烘牴鍏冪礌鐨勮竟鐣屽拰瑙嗙獥鐨勮竟鐣岄噸鍚� - threshold: 0, // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般�� + threshold: 0 // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般�� }); // 鍚姩椤电爜瑙傚療 @@ -202,22 +209,35 @@ // 娴嬭瘯椤甸潰璺宠浆 setTimeout(() => { - this.gotoPage(1, 11); + // this.gotoPage(1, 10); // setTimeout(() => { - // this.renderSign("Note", { + // this.renderSign("Highlight", { // id: "2ACA9359", - // txt: "钀ュ吇绱犲拰鐑噺锛屾墠鑳�", - // page: "100", + // txt: "棰樹竴瀛︿範涓婚涓� 杩愬姩", + // page: "10", // type: "Highlight", // color: "#F5E12A" // }); - // setTimeout(() => { - // this.delSign({ - // ids: ["2ACA9359"] - // }); - // }, 2000); - // }, 1000); - }, 1000); + // setTimeout(() => { + // this.delSign({ + // ids: ["2ACA9359"] + // }); + // }, 2000); + // }, 5000); + + // const pageDom = (this.container ? this.container : document) + // .querySelector("#app") + // .querySelectorAll(".page-box"); + // 妫�绱� + // console.log(this.searchTextByPage("淇濇姢鍐呰剰鍣ㄥ畼"), "searchTextByPage"); + // 妫�绱㈣烦杞� + this.searchItemLocation({ + catalog: 2, + page: 10, + txt: " 杩愬姩绯荤粺鏄敱楠ㄣ�侀杩炵粨鍜岄楠艰倢涓夐儴鍒嗙粍鎴愮殑銆傚叏韬殑楠ㄩ�氳繃楠ㄨ繛缁撶粍鎴愪汉浣撻楠硷紙瑙佸浘1-1锛夈�傞楠兼槸浜轰綋鐨勬敮鏋讹紝鍏锋湁淇濇姢鍐呰剰鍣ㄥ畼銆佷緵鑲岃倝闄勭潃鍜屼綔涓鸿倢鑲夎繍鍔ㄧ殑鏉犳潌绛変綔鐢ㄣ�傚湪绁炵粡绯荤粺鐨勬敮閰嶄笅锛岃倢鑲夋敹缂╃壍鍔ㄦ墍闄勭潃鐨勯缁曠潃鍏宠妭杞姩锛屼娇韬綋浜х敓鍚勭鍔ㄤ綔銆傛墍浠ワ紝杩愬姩绯荤粺鍏锋湁杩愬姩銆佹敮鎸佸拰淇濇姢绛夊姛鑳斤紝骞煎勾鏃舵湡鐨勯楠艰繕鍏锋湁閫犺鍔熻兘銆� ", + txtIndex: 57 + }); + }, 5000); }, methods: { // 婊氬姩鐩戝惉 @@ -266,7 +286,7 @@ this.previousScrollTop = event.target.scrollTop; }, // 绔犺妭銆侀〉闈㈣烦杞� - gotoPage(catalog, page) { + gotoPage(catalog, page, callback) { if (catalog >= 0 && catalog <= this.catalogLength) { // 澶勭悊娓叉煋绔犺妭 if (catalog == 0) { @@ -275,7 +295,7 @@ this.showCatalogList = [ this.catalogLength - 2, this.catalogLength - 1, - this.catalogLength, + this.catalogLength ]; } else { this.showCatalogList = [catalog - 1, catalog, catalog + 1]; @@ -287,6 +307,7 @@ ).querySelector(`[page="${page}"]`); if (pageDom) { pageDom.scrollIntoView(); + if (callback) callback(); } else { console.log("椤电爜閿欒锛�"); } @@ -294,6 +315,20 @@ } else { console.log("绔犺妭閿欒锛�"); } + }, + + // 澶勭悊鏍囪鏁版嵁 + 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] = []; + this.renderSignMap[type][data.page].push(data); }, // 娓叉煋鏍囪 @@ -306,29 +341,47 @@ const pageDom = ( this.container ? this.container : document ).querySelector(`[page="${data.page}"]`); - let reg = new RegExp(`${data.txt}`, "ig"); - switch (type) { - case "Highlight": - // 楂樹寒 - pageDom.innerHTML = pageDom.innerHTML.replace( - reg, - `<span datatype="Highlight" dataid="${data.id}" style="background: ${data.color};" class="highLight" onclick="signClick('Highlight','${data.id}','${data.chapterNum}')">${data.txt}</span>` - ); - break; - case "Dashing": - // 鍒掔嚎 - pageDom.innerHTML = pageDom.innerHTML.replace( - reg, - `<span datatype="Dashing" dataid="${data.id}" style="text-decoration-color:${data.color};" class="underline" onclick="signClick('Dashing','${data.id}','${data.chapterNum}')">${data.txt}</span>` - ); - break; - case "Note": - // 绗旇 - pageDom.innerHTML = pageDom.innerHTML.replace( - reg, - `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline" onclick="signClick('Note','${data.id}','${data.chapterNum}')" onmouseover="noteHover('Note','${data.id}','${data.chapterNum}')" onmouseout="noteOut('Note')">${data.txt}<img src="${NoteIcon}"/></span>` - ); - break; + // 鍒涘缓 createTreeWalker 杩唬鍣紝鐢ㄤ簬閬嶅巻鏂囨湰鑺傜偣锛屼繚瀛樺埌涓�涓暟缁� + const treeWalker = ( + this.container ? this.container : document + ).createTreeWalker(pageDom, NodeFilter.SHOW_TEXT); + const allTextNodes = []; + let currentNode = treeWalker.nextNode(); + while (currentNode) { + allTextNodes.push(currentNode); + currentNode = treeWalker.nextNode(); + } + for (let i = 0; i < allTextNodes.length; i++) { + const textDom = allTextNodes[i]; + if (textDom.textContent.indexOf(data.txt) > -1) { + let reg = new RegExp(`${data.txt}`, "ig"); + switch (type) { + case "Highlight": + // 楂樹寒 + textDom.parentNode.innerHTML = + textDom.parentNode.innerHTML.replace( + reg, + `<span datatype="Highlight" dataid="${data.id}" style="background: ${data.color};" class="highLight" onclick="signClick('Highlight','${data.id}','${data.chapterNum}')">${data.txt}</span>` + ); + break; + case "Dashing": + // 鍒掔嚎 + textDom.parentNode.innerHTML = + textDom.parentNode.innerHTML.replace( + reg, + `<span datatype="Dashing" dataid="${data.id}" style="text-decoration-color:${data.color};" class="underline" onclick="signClick('Dashing','${data.id}','${data.chapterNum}')">${data.txt}</span>` + ); + break; + case "Note": + // 绗旇 + textDom.parentNode.innerHTML = + textDom.parentNode.innerHTML.replace( + reg, + `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline" onclick="signClick('Note','${data.id}','${data.chapterNum}')" onmouseover="noteHover('Note','${data.id}','${data.chapterNum}')" onmouseout="noteOut('Note')">${data.txt}<img src="${NoteIcon}"/></span>` + ); + break; + } + } } } }, @@ -374,7 +427,7 @@ return false; } } - //observer 瑙傚療姣忎釜鍏冪礌锛屼互渚垮湪瀹冧滑杩涘叆鎴栫寮�瑙嗙獥鏃惰Е鍙戝洖璋冨嚱鏁般�� + // observer 瑙傚療姣忎釜鍏冪礌锛屼互渚垮湪瀹冧滑杩涘叆鎴栫寮�瑙嗙獥鏃惰Е鍙戝洖璋冨嚱鏁般�� const isObserver = section.getAttribute("observer"); const isLoadObserver = section.getAttribute("loadObserver"); if (!isObserver) { @@ -467,6 +520,7 @@ }); }, getParentWithClass(element, className) { + console.log(element, className, "element, className"); while (element.parentElement) { element = element.parentElement; if (element.classList.contains(className)) { @@ -487,10 +541,8 @@ "chapter" ); const catalog = catalogDom.getAttribute("num"); - console.log(page, "page", catalog, "catalog"); let text = null; if (target.querySelector("p")) { - console.log(target.querySelector("p").textContent.substring(0, 20)); text = target.querySelector("p").textContent.substring(0, 20); } // 杩斿洖椤电爜鍜岀珷鑺備俊鎭� @@ -512,18 +564,17 @@ if (entry.isIntersecting) { const target = entry.target; const page = target.getAttribute("page"); - if (this.loadPageList.indexOf(page) == -1) { - // + if (this.loadPageList.indexOf(Number(page)) == -1) { const catalogDom = this.tool.getParentNodeByClassName( target, "chapter" ); 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( + this.questionDataMap[page] = await getQuestionList( page, testData[catalog][page], this.config.activeBook @@ -537,12 +588,22 @@ this.config.activeBook ); } - this.questionData[page] = obj; + this.questionDataMap[page] = obj; } + console.log("棰樼洰", this.questionDataMap); } } } + // 娣诲姞椤电爜 this.loadPageList.push(Number(page)); + // 娓叉煋杩欎竴椤电殑鏍囪 + for (const key in this.renderSignMap) { + if (this.renderSignMap[key][page]) { + this.renderSignMap[key][page].forEach((item) => { + this.renderSign(key, item); + }); + } + } if (this.loadPageList.length > 5) { // 瓒呰繃5椤� this.loadPageList.shift(); @@ -569,17 +630,23 @@ spaceBetween: 30, // 闂撮殧 // 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳 navigation: { - nextEl: ".swiper-button-next", - prevEl: ".swiper-button-prev" + nextEl: (this.container ? this.container : document).querySelector( + ".swiper-button-next" + ), + prevEl: (this.container ? this.container : document).querySelector( + ".swiper-button-prev" + ) }, // 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔� observer: true, - observeParents: true, - // 濡傛灉闇�瑕佸垎椤靛櫒 - pagination: { - el: ".swiper-pagination", - clickable: true // 鍒嗛〉鍣ㄥ彲浠ョ偣鍑� - } + observeParents: true + // // 濡傛灉闇�瑕佸垎椤靛櫒 + // pagination: { + // el: (this.container ? this.container : document).querySelector( + // ".swiper-pagination" + // ), + // clickable: true // 鍒嗛〉鍣ㄥ彲浠ョ偣鍑� + // } }); } }, @@ -590,11 +657,160 @@ for (let i = 0; i < doms.length; i++) { const dom = doms[i]; new Viewer(dom, { + container: this.container + ? this.container.querySelector("#app") + : "body", navbar: true, // 鏄剧ず瀵艰埅鏍� toolbar: true, // 鏄剧ず宸ュ叿鏍� title: true // 鏄剧ず鏍囬 }); } + }, + // 鏍规嵁鍏抽敭瀛楀叏鏂囨绱� + searchTextByPage(keyword) { + const searchResult = []; + let catalogIndex = 0; + // 鎵�鏈夌珷鑺傜粍浠讹紙姣忔湰涔﹀埗浣滄椂鍗曠嫭閰嶇疆锛� + const pageData = { + pageHeader, + chapterOne, + chapterTwo, + chapterThree, + chapterFour, + chapterFive, + chapterSix, + chapterSeven, + chapterEight, + chapterNine, + chapterTen, + chapterEleven, + chapterTwelve, + chapterThirteen + }; + // 閬嶅巻鎵�鏈夌珷鑺傛枃浠� + 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 = ( + this.container ? this.container : 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.gotoPage(data.catalog, data.page, () => { + // 楂樹寒琛� + const thisPageDom = ( + this.container ? this.container : document + ).querySelector(`[page="${data.page}"]`); + if (thisPageDom) { + // 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣 + const pageTextList = ( + this.container ? this.container : 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(data.txt); + if (txtIndex > -1) { + textDom.parentNode.style.transition = "background-color 0.8s"; + textDom.parentNode.scrollIntoView(); + textDom.parentNode.backgroundColor = "#79bbf0"; + setTimeout(() => { + textDom.parentNode.backgroundColor = ""; + }, 2000); + } + } + } + }); } }, components: { @@ -611,8 +827,8 @@ chapterTen, chapterEleven, chapterTwelve, - chapterThirteen, - }, + chapterThirteen + } }; </script> -- Gitblit v1.9.1