From 28214e38ea02cca66c747034f57f8dce912bee42 Mon Sep 17 00:00:00 2001 From: unknown <qq1940665526@163.com> Date: 星期五, 31 五月 2024 17:52:33 +0800 Subject: [PATCH] 优化 --- src/books/lifeCare/index.vue | 559 ++++++++++++++++++++++++++++++++++++++++++------------- 1 files changed, 424 insertions(+), 135 deletions(-) diff --git a/src/books/lifeCare/index.vue b/src/books/lifeCare/index.vue index abbdfa4..6d97b95 100644 --- a/src/books/lifeCare/index.vue +++ b/src/books/lifeCare/index.vue @@ -1,33 +1,100 @@ -<!-- eslint-disable vue/multi-word-component-names --> <template> <div class="page-main" @scroll="throttledScrollHandler"> <div - class="public-books" + class="public-lifeCare" @mouseup="handleMouseUp" :style="{ fontSize: fontSize ? fontSize + 'px' : '16px', transform: `scale(${pageZoom ? pageZoom : 1})`, + transformOrigin: 'center top', }" > - <front001 v-if="showCatalogList.indexOf(1) > -1" /> - <ChapterOne v-if="showCatalogList.indexOf(2) > -1" /> - <ChapterTwo v-if="showCatalogList.indexOf(3) > -1" /> - <ChapterThree v-if="showCatalogList.indexOf(4) > -1" /> - <ChapterFour v-if="showCatalogList.indexOf(5) > -1" /> - <ChapterFive v-if="showCatalogList.indexOf(6) > -1" /> - <chapterSix v-if="showCatalogList.indexOf(7) > -1" /> - <chapterSeven v-if="showCatalogList.indexOf(8) > -1" /> - <chapterEight v-if="showCatalogList.indexOf(9) > -1" /> - <chapterNine v-if="showCatalogList.indexOf(10) > -1" /> - <chapter010 v-if="showCatalogList.indexOf(11) > -1" /> - <chapter011 v-if="showCatalogList.indexOf(12) > -1" /> - <chapter012 v-if="showCatalogList.indexOf(13) > -1" /> - <chapter013 v-if="showCatalogList.indexOf(14) > -1" /> - <chapter014 v-if="showCatalogList.indexOf(15) > -1" /> - <chapter015 v-if="showCatalogList.indexOf(16) > -1" /> - <chapter016 v-if="showCatalogList.indexOf(17) > -1" /> - <chapter017 v-if="showCatalogList.indexOf(18) > -1" /> - <chapter018 v-if="showCatalogList.indexOf(19) > -1" /> + <front001 + v-if="showCatalogList.indexOf(1) > -1" + :showPageList="loadPageList" + /> + <ChapterOne + v-if="showCatalogList.indexOf(2) > -1" + :showPageList="loadPageList" + :questionData="questionData" + /> + <ChapterTwo + v-if="showCatalogList.indexOf(3) > -1" + :showPageList="loadPageList" + :questionData="questionData" + /> + <ChapterThree + v-if="showCatalogList.indexOf(4) > -1" + :showPageList="loadPageList" + :questionData="questionData" + /> + <ChapterFour + v-if="showCatalogList.indexOf(5) > -1" + :showPageList="loadPageList" + :questionData="questionData" + /> + <ChapterFive + v-if="showCatalogList.indexOf(6) > -1" + :showPageList="loadPageList" + :questionData="questionData" + /> + <chapterSix + v-if="showCatalogList.indexOf(7) > -1" + :showPageList="loadPageList" + :questionData="questionData" + /> + <chapterSeven + v-if="showCatalogList.indexOf(8) > -1" + :showPageList="loadPageList" + :questionData="questionData" + @eventSwdt="swdtChange" + /> + <chapterEight + v-if="showCatalogList.indexOf(9) > -1" + :showPageList="loadPageList" + :questionData="questionData" + /> + <chapterNine + v-if="showCatalogList.indexOf(10) > -1" + :showPageList="loadPageList" + :questionData="questionData" + /> + <chapter010 + v-if="showCatalogList.indexOf(11) > -1" + :showPageList="loadPageList" + /> + <chapter011 + v-if="showCatalogList.indexOf(12) > -1" + :showPageList="loadPageList" + /> + <chapter012 + v-if="showCatalogList.indexOf(13) > -1" + :showPageList="loadPageList" + /> + <chapter013 + v-if="showCatalogList.indexOf(14) > -1" + :showPageList="loadPageList" + /> + <chapter014 + v-if="showCatalogList.indexOf(15) > -1" + :showPageList="loadPageList" + /> + <chapter015 + v-if="showCatalogList.indexOf(16) > -1" + :showPageList="loadPageList" + /> + <chapter016 + v-if="showCatalogList.indexOf(17) > -1" + :showPageList="loadPageList" + /> + <chapter017 + v-if="showCatalogList.indexOf(18) > -1" + :showPageList="loadPageList" + /> + <chapter018 + v-if="showCatalogList.indexOf(19) > -1" + :showPageList="loadPageList" + /> </div> </div> </template> @@ -54,21 +121,43 @@ import chapter018 from "./view/chapter018"; import NoteIcon from "@/assets/images/biji.png"; import _ from "lodash"; +import getQuestionList from "@/assets/methods/examination"; +import testData from "./js/examinationList"; +import Swiper from "swiper/bundle"; +import "swiper/swiper-bundle.css"; +import Viewer from "viewerjs"; +import "viewerjs/dist/viewer.css"; export default { data() { return { - catalogLength: 18, // 鎬荤珷鑺傛暟 + catalogLength: 19, // 鎬荤珷鑺傛暟 showCatalogList: [], // 鏄剧ず鐨勭珷鑺� loadThreshold: 300, // 瑙﹀彂鍔犺浇闃堝�� throttleThreshold: 100, // 鑺傛祦闃堝�� previousScrollTop: 0, throttledScrollHandler: null, observer: null, + loadPageObserver: null, + loadPageList: [], + questionData: {}, + renderSignMap: {}, + }; + }, + computed: { + fontSize() { + return this.$store.state.qiankun.fontSize; + }, + pageZoom() { + return this.$store.state.qiankun.scale / 100; + }, + }, + provide() { + return { + changeQuestionData: this.changeQuestionData, }; }, watch: { showCatalogList: { - // eslint-disable-next-line no-unused-vars handler(newVal, oldVal) { if ( this.$store.state.qiankun && @@ -86,10 +175,18 @@ }, 500); }, }, + loadPageList: { + handler() { + setTimeout(() => { + this.initSwiper(); + this.initViewer(); + }, 200); + }, + }, }, mounted() { // 榛樿鍔犺浇绔犺妭 - this.showCatalogList = [4]; + this.showCatalogList = [8]; // 婊氬姩鐩戝惉鑺傛祦 this.throttledScrollHandler = _.throttle( this.scrollFun, @@ -122,6 +219,12 @@ threshold: 0.5, // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般�� }); + this.loadPageObserver = new IntersectionObserver(this.loadPageCallback, { + root: null, // 鎸囧畾鏍瑰厓绱狅紝杩欓噷璁句负 null锛岃〃绀洪�夊彇鏁翠釜瑙嗙獥浣滀负鏍瑰厓绱犮�� + rootMargin: "0px", // 鎸囧畾鏍瑰厓绱犵殑杈圭晫锛岃繖閲岃涓� "0px"锛岃〃绀烘牴鍏冪礌鐨勮竟鐣屽拰瑙嗙獥鐨勮竟鐣岄噸鍚� + threshold: 0, // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般�� + }); + // 鍚姩椤电爜瑙傚療 setTimeout(() => { this.initObservation(); @@ -130,7 +233,7 @@ // 娴嬭瘯椤甸潰璺宠浆 // setTimeout(() => { - // this.gotoPage(5, 100); + // this.gotoPage(1, 15); // setTimeout(() => { // this.renderSign("Note", { // id: "2ACA9359", @@ -145,90 +248,9 @@ // }); // }, 2000); // }, 1000); - // }, 3000); - }, - components: { - front001, - ChapterOne, - ChapterTwo, - ChapterThree, - ChapterFour, - ChapterFive, - chapterSix, - chapterSeven, - chapterEight, - chapterNine, - chapter010, - chapter011, - chapter012, - chapter013, - chapter014, - chapter015, - chapter016, - chapter017, - chapter018, - }, - computed: { - fontSize() { - return this.$store.state.qiankun.fontSize; - }, - pageZoom() { - return this.$store.state.qiankun.scale / 100; - }, + // }, 1000); }, methods: { - 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) { - // eslint-disable-next-line no-unused-vars - 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, - }); - } - } - }, - // 婊氬姩鐩戝惉 scrollFun(event) { // 鍒ゆ柇鍚戜笂婊氬姩杩樻槸鍚戜笅婊氬姩 @@ -236,7 +258,6 @@ // 鍚戜笅 const currentScrollTop = event.target.scrollTop + event.target.offsetHeight; - if ( currentScrollTop >= event.target.scrollHeight - this.loadThreshold @@ -306,6 +327,14 @@ } }, + // 澶勭悊鏍囪鏁版嵁 + handelSignData(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); + }, + // 娓叉煋鏍囪 renderSign(type, data) { const existence = ( @@ -316,29 +345,48 @@ 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}')">${data.txt}<img src="${NoteIcon}" style="cursor: pointer" /></span>` - ); - break; + // 鍒涘缓 createTreeWalker 杩唬鍣紝鐢ㄤ簬閬嶅巻鏂囨湰鑺傜偣锛屼繚瀛樺埌涓�涓暟缁� + const treeWalker = 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,11 +422,26 @@ this.container ? this.container : document ).querySelectorAll(".page-box"); sections.forEach((section) => { - //observer 瑙傚療姣忎釜鍏冪礌锛屼互渚垮湪瀹冧滑杩涘叆鎴栫寮�瑙嗙獥鏃惰Е鍙戝洖璋冨嚱鏁般�� + if (this.config.activeBook && this.config.activeBook.tryPageCount) { + const page = section.getAttribute("page"); + if (Number(page) > this.config.activeBook.tryPageCount) { + let chapterDom = this.getParentWithClass(section, "chapter"); + const chapterNum = chapterDom.getAttribute("num"); + this.catalogLength = Number(chapterNum) - 1; + section.remove(); + return false; + } + } + // observer 瑙傚療姣忎釜鍏冪礌锛屼互渚垮湪瀹冧滑杩涘叆鎴栫寮�瑙嗙獥鏃惰Е鍙戝洖璋冨嚱鏁般�� const isObserver = section.getAttribute("observer"); + const isLoadObserver = section.getAttribute("loadObserver"); if (!isObserver) { this.observer.observe(section); section.setAttribute("observer", "1"); + } + if (!isLoadObserver) { + this.loadPageObserver.observe(section); + section.setAttribute("loadObserver", "1"); } }); }, @@ -461,7 +524,6 @@ } }); }, - // eslint-disable-next-line getParentWithClass(element, className) { while (element.parentElement) { element = element.parentElement; @@ -470,7 +532,6 @@ } } }, - // eslint-disable-next-line no-unused-vars pageChangeCallback(entries, observer) { //entries锛氫唬琛ㄨ瀵熷埌鐨勭洰鏍囧厓绱犵殑闆嗗悎銆� observer锛氫唬琛ㄨ瀵熻�呭璞°�� entries.forEach((entry) => { @@ -484,11 +545,16 @@ "chapter" ); const catalog = catalogDom.getAttribute("num"); + let text = null; + if (target.querySelector("p")) { + text = target.querySelector("p").textContent.substring(0, 20); + } // 杩斿洖椤电爜鍜岀珷鑺備俊鎭� if (this.$store.state.qiankun && this.$store.state.qiankun.pageChange) this.$store.state.qiankun.pageChange({ page: page, catalog: catalog, + text, }); // const sections = Array.from(document.querySelectorAll(".section")); //sections锛氳幏鍙栨墍鏈夊叿鏈� .section 绫诲悕鐨勫厓绱狅紝骞惰浆鎹负鏁扮粍銆� @@ -497,7 +563,230 @@ } }); }, - } + loadPageCallback(entries, observer) { + entries.forEach(async (entry) => { + if (entry.isIntersecting) { + const target = entry.target; + const page = target.getAttribute("page"); + if (this.loadPageList.indexOf(Number(page)) == -1) { + const catalogDom = this.tool.getParentNodeByClassName( + target, + "chapter" + ); + const catalog = catalogDom.getAttribute("num"); + if (!this.questionData[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 + ); + } else { + const obj = {}; + for (let key in testData[catalog][page]) { + obj[key] = await getQuestionList( + [], + testData[catalog][page][key], + this.config.activeBook + ); + } + this.questionData[page] = obj; + } + } + } + } + // 娣诲姞椤电爜 + 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(); + } + } + } + }); + }, + initSwiper() { + const doms = ( + this.container ? this.container : document + ).querySelectorAll(".swiper-img"); + for (let i = 0; i < doms.length; i++) { + const dom = doms[i]; + new Swiper(dom, { + loop: false, // 鏃犵紳 + autoplay: { + //鑷姩寮�濮� + delay: 3000, //鏃堕棿闂撮殧 + disableOnInteraction: false, //*鎵嬪姩鎿嶄綔杞挱鍥惧悗涓嶄細鏆傚仠* + }, + paginationClickable: true, + slidesPerView: 1, // 涓�缁勪笁涓� + spaceBetween: 30, // 闂撮殧 + // 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳 + navigation: { + 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: (this.container ? this.container : document).querySelector( + // ".swiper-pagination" + // ), + // clickable: true // 鍒嗛〉鍣ㄥ彲浠ョ偣鍑� + // } + }); + } + const pptDoms = ( + this.container ? this.container : document + ).querySelectorAll(".swiper_ppt"); + for (let i = 0; i < pptDoms.length; i++) { + const dom = pptDoms[i]; + new Swiper(dom, { + loop: false, // 鏃犵紳 + autoplay: false, + paginationClickable: true, + slidesPerView: 1, // 涓�缁勪笁涓� + spaceBetween: 30, // 闂撮殧 + // 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳 + navigation: { + 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, + on: { + init:(value) => { + let currentPage = value.activeIndex + 1; // 鑾峰彇褰撳墠椤碉紙浠�1寮�濮嬭鏁帮級 + let totalPages = value.slides.length; // 鑾峰彇鎬婚〉鏁� + var paginationInfoEl = dom.querySelector('.pageBox'); + if(paginationInfoEl) + paginationInfoEl.textContent = currentPage + '/' + totalPages; + }, + slideChange:(value) => { + let currentPage = value.activeIndex + 1; // 鑾峰彇褰撳墠椤碉紙浠�1寮�濮嬭鏁帮級 + let totalPages = value.slides.length; // 鑾峰彇鎬婚〉鏁� + var paginationInfoEl = dom.querySelector('.pageBox'); + if(paginationInfoEl) + paginationInfoEl.textContent = currentPage + '/' + totalPages; + }, + }, + }); + } + }, + initViewer() { + const doms = ( + this.container ? this.container : document + ).querySelectorAll(".openImgBox"); + for (let i = 0; i < doms.length; i++) { + const dom = doms[i]; + new Viewer(dom, { + navbar: true, // 鏄剧ず瀵艰埅鏍� + toolbar: true, // 鏄剧ず宸ュ叿鏍� + title: true, // 鏄剧ず鏍囬 + }); + } + }, + // 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({ + type: data, + }); + } + }, + }, + components: { + front001, + ChapterOne, + ChapterTwo, + ChapterThree, + ChapterFour, + ChapterFive, + chapterSix, + chapterSeven, + chapterEight, + chapterNine, + chapter010, + chapter011, + chapter012, + chapter013, + chapter014, + chapter015, + chapter016, + chapter017, + chapter018, + }, }; </script> -- Gitblit v1.9.1