From 65b5cd16cc9d9ab4b346a37107a44011550f701b Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期五, 31 五月 2024 14:27:09 +0800
Subject: [PATCH] 全文检索
---
src/App.vue | 2
src/books/childHealth/view/content/components/chapter001.vue | 3
src/books/childHealth/view/content/index.vue | 240 ++++++++++++++++++++++++++++++++++++++++-------
3 files changed, 204 insertions(+), 41 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 8559dbf..163a06e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -65,7 +65,7 @@
// childHealth
// lifeCare
// sportsAndHealth
- this.config.resourceCtx + "embedded"
+ this.config.resourceCtx + "childHealth"
);
// 娴嬭瘯璇曡30椤�
// this.activeBook.tryPageCount = 10;
diff --git a/src/books/childHealth/view/content/components/chapter001.vue b/src/books/childHealth/view/content/components/chapter001.vue
index 928bb8b..e94c94c 100644
--- a/src/books/childHealth/view/content/components/chapter001.vue
+++ b/src/books/childHealth/view/content/components/chapter001.vue
@@ -1026,7 +1026,7 @@
</div>
<div class="right" style="width: 60%">
<video
- :src="getResourcePath('163c06871b763954952d1cd74373c618')"
+ :src="pathFive"
poster="../../../assets/images/chapterOne/people-video-img.jpg"
webkit-playsinline="true"
x-webkit-airplay="true"
@@ -4851,7 +4851,6 @@
};
},
async mounted() {
- this.getResourcePath = getResourcePath;
this.getVideoPath();
const localData = localStorage.getItem("chapterOneData");
if (localData) {
diff --git a/src/books/childHealth/view/content/index.vue b/src/books/childHealth/view/content/index.vue
index 081eda6..da0a4a3 100644
--- a/src/books/childHealth/view/content/index.vue
+++ b/src/books/childHealth/view/content/index.vue
@@ -1,5 +1,8 @@
<template>
<div class="page-main" @scroll="throttledScrollHandler">
+ <div id="searchDomBox" style="display: none">
+ <div id="searchContent"></div>
+ </div>
<div
class="page-content"
:style="{
@@ -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,7 @@
observer: null,
loadPageObserver: null,
loadPageList: [],
- questionData: {},
+ questionDataMap: {},
renderSignMap: {}
};
},
@@ -204,23 +208,36 @@
}, 500);
// 娴嬭瘯椤甸潰璺宠浆
- // setTimeout(() => {
- // this.gotoPage(1, 10);
- // setTimeout(() => {
- // this.renderSign("Highlight", {
- // id: "2ACA9359",
- // txt: "棰樹竴瀛︿範涓婚涓� 杩愬姩",
- // page: "10",
- // type: "Highlight",
- // color: "#F5E12A"
- // });
- // setTimeout(() => {
- // this.delSign({
- // ids: ["2ACA9359"]
- // });
- // }, 2000);
- // }, 5000);
- // }, 1000);
+ setTimeout(() => {
+ // this.gotoPage(1, 10);
+ // setTimeout(() => {
+ // this.renderSign("Highlight", {
+ // id: "2ACA9359",
+ // txt: "棰樹竴瀛︿範涓婚涓� 杩愬姩",
+ // page: "10",
+ // type: "Highlight",
+ // color: "#F5E12A"
+ // });
+ // 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: {
// 婊氬姩鐩戝惉
@@ -269,7 +286,7 @@
this.previousScrollTop = event.target.scrollTop;
},
// 绔犺妭銆侀〉闈㈣烦杞�
- gotoPage(catalog, page) {
+ gotoPage(catalog, page, callback) {
if (catalog >= 0 && catalog <= this.catalogLength) {
// 澶勭悊娓叉煋绔犺妭
if (catalog == 0) {
@@ -290,6 +307,7 @@
).querySelector(`[page="${page}"]`);
if (pageDom) {
pageDom.scrollIntoView();
+ if (callback) callback();
} else {
console.log("椤电爜閿欒锛�");
}
@@ -324,10 +342,9 @@
this.container ? this.container : document
).querySelector(`[page="${data.page}"]`);
// 鍒涘缓 createTreeWalker 杩唬鍣紝鐢ㄤ簬閬嶅巻鏂囨湰鑺傜偣锛屼繚瀛樺埌涓�涓暟缁�
- const treeWalker = document.createTreeWalker(
- pageDom,
- NodeFilter.SHOW_TEXT
- );
+ const treeWalker = (
+ this.container ? this.container : document
+ ).createTreeWalker(pageDom, NodeFilter.SHOW_TEXT);
const allTextNodes = [];
let currentNode = treeWalker.nextNode();
while (currentNode) {
@@ -503,6 +520,7 @@
});
},
getParentWithClass(element, className) {
+ console.log(element, className, "element, className");
while (element.parentElement) {
element = element.parentElement;
if (element.classList.contains(className)) {
@@ -552,11 +570,11 @@
"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
@@ -570,9 +588,9 @@
this.config.activeBook
);
}
- this.questionData[page] = obj;
+ this.questionDataMap[page] = obj;
}
- console.log("棰樼洰", this.questionData);
+ console.log("棰樼洰", this.questionDataMap);
}
}
}
@@ -647,6 +665,152 @@
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: {
--
Gitblit v1.9.1