From 23ebc0d9ee7d4b06916478f84b411d0406f11a3a Mon Sep 17 00:00:00 2001 From: 闫增涛 <1829501689@qq.com> Date: 星期三, 05 六月 2024 18:49:07 +0800 Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout --- src/books/lifeCare/index.vue | 218 +++++++++++++++++++++++++++++++++++++++++------------ 1 files changed, 167 insertions(+), 51 deletions(-) diff --git a/src/books/lifeCare/index.vue b/src/books/lifeCare/index.vue index aebcdad..3e54086 100644 --- a/src/books/lifeCare/index.vue +++ b/src/books/lifeCare/index.vue @@ -12,51 +12,64 @@ <front001 v-if="showCatalogList.indexOf(1) > -1" :showPageList="loadPageList" + :isSearch="isSearch" /> <ChapterOne v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList" :questionData="questionData" + :isSearch="isSearch" /> <ChapterTwo v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList" :questionData="questionData" + :isSearch="isSearch" /> <ChapterThree v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList" :questionData="questionData" + :isSearch="isSearch" /> <ChapterFour v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList" :questionData="questionData" + :isSearch="isSearch" /> <ChapterFive v-if="showCatalogList.indexOf(6) > -1" :showPageList="loadPageList" :questionData="questionData" + @Upload_initViewer="changeDomViewer" + :isSearch="isSearch" /> <chapterSix v-if="showCatalogList.indexOf(7) > -1" :showPageList="loadPageList" :questionData="questionData" + :isSearch="isSearch" /> <chapterSeven v-if="showCatalogList.indexOf(8) > -1" :showPageList="loadPageList" :questionData="questionData" + @eventSwdt="swdtChange" + @Upload_initViewer="changeDomViewer" + :isSearch="isSearch" /> <chapterEight v-if="showCatalogList.indexOf(9) > -1" :showPageList="loadPageList" :questionData="questionData" + :isSearch="isSearch" /> <chapterNine v-if="showCatalogList.indexOf(10) > -1" :showPageList="loadPageList" :questionData="questionData" + :isSearch="isSearch" /> <chapter010 v-if="showCatalogList.indexOf(11) > -1" @@ -122,6 +135,10 @@ 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 { @@ -135,6 +152,8 @@ loadPageObserver: null, loadPageList: [], questionData: {}, + renderSignMap: {}, + isSearch: false, }; }, computed: { @@ -167,17 +186,16 @@ this.initObservation(); this.initThemeColor(); }, 500); - } + }, }, loadPageList: { - handler(newVal, oldVal) { - console.log(newVal, "this.loadPageList"); + handler() { setTimeout(() => { this.initSwiper(); this.initViewer(); }, 200); - } - } + }, + }, }, mounted() { // 榛樿鍔犺浇绔犺妭 @@ -228,24 +246,29 @@ // 娴嬭瘯椤甸潰璺宠浆 // setTimeout(() => { - // this.gotoPage(1, 15); - // setTimeout(() => { - // this.renderSign("Note", { - // id: "2ACA9359", - // txt: "钀ュ吇绱犲拰鐑噺锛屾墠鑳�", - // page: "100", - // type: "Highlight", - // color: "#F5E12A" - // }); - // setTimeout(() => { - // this.delSign({ - // ids: ["2ACA9359"] - // }); - // }, 2000); - // }, 1000); + // this.gotoPage(1, 15); + // setTimeout(() => { + // this.renderSign("Note", { + // id: "2ACA9359", + // txt: "钀ュ吇绱犲拰鐑噺锛屾墠鑳�", + // page: "100", + // type: "Highlight", + // color: "#F5E12A" + // }); + // setTimeout(() => { + // this.delSign({ + // ids: ["2ACA9359"] + // }); + // }, 2000); + // }, 1000); // }, 1000); }, methods: { + changeDomViewer() { + setTimeout(() => { + this.initViewer(); + }, 500); + }, // 婊氬姩鐩戝惉 scrollFun(event) { // 鍒ゆ柇鍚戜笂婊氬姩杩樻槸鍚戜笅婊氬姩 @@ -322,6 +345,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 = ( @@ -332,29 +363,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}')" onmouseout="noteOut('Note')">${data.txt}<img src="${NoteIcon}"/></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; + } + } } } }, @@ -522,7 +572,7 @@ this.$store.state.qiankun.pageChange({ page: page, catalog: catalog, - text + text, }); // const sections = Array.from(document.querySelectorAll(".section")); //sections锛氳幏鍙栨墍鏈夊叿鏈� .section 绫诲悕鐨勫厓绱狅紝骞惰浆鎹负鏁扮粍銆� @@ -536,7 +586,7 @@ 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" @@ -565,7 +615,16 @@ } } } + // 娣诲姞椤电爜 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(); @@ -577,7 +636,7 @@ initSwiper() { const doms = ( this.container ? this.container : document - ).querySelectorAll(".swiper-container"); + ).querySelectorAll(".swiper-img"); for (let i = 0; i < doms.length; i++) { const dom = doms[i]; new Swiper(dom, { @@ -585,24 +644,71 @@ autoplay: { //鑷姩寮�濮� delay: 3000, //鏃堕棿闂撮殧 - disableOnInteraction: false //*鎵嬪姩鎿嶄綔杞挱鍥惧悗涓嶄細鏆傚仠* + disableOnInteraction: false, //*鎵嬪姩鎿嶄綔杞挱鍥惧悗涓嶄細鏆傚仠* }, paginationClickable: true, slidesPerView: 1, // 涓�缁勪笁涓� 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", + // 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; + }, + }, }); } }, @@ -613,9 +719,12 @@ 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 // 鏄剧ず鏍囬 + title: true, // 鏄剧ず鏍囬 }); } }, @@ -670,6 +779,13 @@ } } }, + swdtChange(data) { + if (this.$store.state.qiankun && this.$store.state.qiankun.chooseWords) { + this.$store.state.qiankun.chooseWords({ + type: data, + }); + } + }, }, components: { front001, -- Gitblit v1.9.1