From 96db8c34de3369f38873fca703a1d7dd6397ce33 Mon Sep 17 00:00:00 2001 From: zhongshujie <2862698242@qq.com> Date: 星期一, 29 七月 2024 16:05:37 +0800 Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout --- src/books/sportsAndHealth/view/components/index.vue | 216 ++++++++++++++++++++++++++++++------------------------ 1 files changed, 120 insertions(+), 96 deletions(-) diff --git a/src/books/sportsAndHealth/view/components/index.vue b/src/books/sportsAndHealth/view/components/index.vue index 846fd7f..cba2248 100644 --- a/src/books/sportsAndHealth/view/components/index.vue +++ b/src/books/sportsAndHealth/view/components/index.vue @@ -3,30 +3,20 @@ <div id="searchDomBox" style="display: none"> <div id="searchContent"></div> </div> - <div - class="public-sportsAndHealth" - :style="{ - fontSize: fontSize ? fontSize + 'px' : '16px', - transform: `scale(${pageZoom ? pageZoom : 1})`, - transformOrigin: 'center top', - }" - > - <front001 - v-if="showCatalogList.indexOf(1) > -1" - :showPageList="loadPageList" - /> - <ChapterOne - v-if="showCatalogList.indexOf(2) > -1" - :showPageList="loadPageList" - /> - <ChapterTwo - v-if="showCatalogList.indexOf(3) > -1" - :showPageList="loadPageList" - /> - <ChapterThree - v-if="showCatalogList.indexOf(4) > -1" - :showPageList="loadPageList" - /> + <div class="public-sportsAndHealth" :style="{ + fontSize: fontSize ? fontSize + 'px' : '16px', + transform: `scale(${pageZoom ? pageZoom : 1})`, + transformOrigin: 'center top', + }"> + <pageHeader v-if="showCatalogList.indexOf(1) > -1" :showPageList="loadPageList"></pageHeader> + <chapterOne v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList"></chapterOne> + <chapterTwo v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList"></chapterTwo> + <chapterThree v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList"></chapterThree> + <chapterFour v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList"></chapterFour> + <assemblyOne v-if="showCatalogList.indexOf(6) > -1" :showPageList="loadPageList"></assemblyOne> + <!-- <assemblyTwo v-if="showCatalogList.indexOf(7) > -1" :showPageList="loadPageList" @openPDFChange="swdtChange" /> --> + + <!-- <ChapterFour v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList" @@ -102,10 +92,14 @@ <script> import Vue from "vue"; -import front001 from "./front001"; -import ChapterOne from "./chapter001"; -import ChapterTwo from "./testDynaicTable"; -import ChapterThree from "./testPp"; +import pageHeader from "./front001"; +import chapterOne from "./chapter001.vue"; +import chapterTwo from "./chapter002.vue"; +import chapterThree from "./chapter003.vue"; +import chapterFour from "./chapter004.vue"; +import assemblyOne from "./testDynaicTable.vue"; +import assemblyTwo from "./testPp.vue"; + // import ChapterFour from "./testPp"; // import ChapterFive from "./chapter005"; // import chapterSix from "./chapter006"; @@ -132,7 +126,7 @@ export default { data() { return { - catalogLength: 5, // 鎬荤珷鑺傛暟 + catalogLength: 7, // 鎬荤珷鑺傛暟 showCatalogList: [], // 鏄剧ず鐨勭珷鑺� loadThreshold: 300, // 瑙﹀彂鍔犺浇闃堝�� throttleThreshold: 100, // 鑺傛祦闃堝�� @@ -155,17 +149,6 @@ }, }, watch: { - swdtChange(data) { - if (this.$store.state.qiankun && this.$store.state.qiankun.chooseWords) { - this.$store.state.qiankun.chooseWords({ - type: data.type, - data: data.data, - }); - } - }, - changeDomViewer() { - this.initViewer(); - }, showCatalogList: { handler(newVal, oldVal) { if ( @@ -189,6 +172,7 @@ setTimeout(() => { this.initSwiper(); this.initViewer(); + this.readText(); }, 200); }, }, @@ -259,38 +243,56 @@ }, 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); + setTimeout(() => { + this.gotoPage(4, 127); + // 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 - // }); - // }, 500); + // 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 + // }); + }, 500); }, methods: { + swdtChange(data) { + console.log("瀛愬簲鐢╬df", data); + if (this.$store.state.qiankun && this.$store.state.qiankun.openPDF) { + if (data.type == "pdf") { + this.$store.state.qiankun.openPDF({ + data: data.data, + }); + } else { + this.$store.state.qiankun.chooseWords({ + type: data.type, + data: data.data, + }); + } + } + }, + changeDomViewer() { + this.initViewer(); + }, // setZoom1() { // let scale = this.$store.state.qiankun.scale + 10; // const scrollBox = ( @@ -545,8 +547,8 @@ page && pageThemeColor && pageThemeColor[page] ? pageThemeColor[page] : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] - ? chapterThemeColor[chapterNum] - : bookThemeColor; + ? chapterThemeColor[chapterNum] + : bookThemeColor; if (themeColor) { domItem.style.color = themeColor; } @@ -563,8 +565,8 @@ page && pageThemeColor && pageThemeColor[page] ? pageThemeColor[page] : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] - ? chapterThemeColor[chapterNum] - : bookThemeColor; + ? chapterThemeColor[chapterNum] + : bookThemeColor; if (themeColor) { domItem.style.backgroundColor = themeColor; } @@ -581,8 +583,8 @@ page && pageThemeColor && pageThemeColor[page] ? pageThemeColor[page] : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] - ? chapterThemeColor[chapterNum] - : bookThemeColor; + ? chapterThemeColor[chapterNum] + : bookThemeColor; if (themeColor) { domItem.style.borderColor = themeColor; } @@ -731,12 +733,8 @@ spaceBetween: 30, // 闂撮殧 // 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳 navigation: { - nextEl: (this.container ? this.container : document).querySelector( - ".swiper-button-next" - ), - prevEl: (this.container ? this.container : document).querySelector( - ".swiper-button-prev" - ), + nextEl: dom.querySelector(".swiper-button-next"), + prevEl: dom.querySelector(".swiper-button-prev"), }, // 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔� observer: true, @@ -763,12 +761,8 @@ spaceBetween: 30, // 闂撮殧 // 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳 navigation: { - nextEl: (this.container ? this.container : document).querySelector( - ".swiper-button-next" - ), - prevEl: (this.container ? this.container : document).querySelector( - ".swiper-button-prev" - ), + nextEl: dom.querySelector(".swiper-button-next"), + prevEl: dom.querySelector(".swiper-button-prev"), }, // 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔� observer: true, @@ -814,10 +808,14 @@ let catalogIndex = 0; // 鎵�鏈夌珷鑺傜粍浠讹紙姣忔湰涔﹀埗浣滄椂鍗曠嫭閰嶇疆锛� const pageData = { - front001, - ChapterOne, - ChapterTwo, - ChapterThree, + + pageHeader, + chapterOne, + chapterTwo, + chapterThree, + chapterFour, + assemblyOne, + assemblyTwo }; // 閬嶅巻鎵�鏈夌珷鑺傛枃浠� for (const key in pageData) { @@ -917,14 +915,40 @@ // 璁板綍楂樹寒淇℃伅 this.highlightData = data; // 璺宠浆 - this.gotoPage(data.catalog, data.page, () => {}); + this.gotoPage(data.catalog, data.page, () => { }); }, + readText() { + const doms = ( + this.container ? this.container : document + ).querySelectorAll(".read-aloud"); + for (let index = 0; index < doms.length; index++) { + const dom = doms[index]; + let id = null; + dom.addEventListener("click", (e) => { + if (e.srcElement.nodeName == "svg") { + id = dom.getAttribute("readId") + } else if (e.srcElement.nodeName == "g") { + const svgDom = e.srcElement.parentNode; + id = svgDom.getAttribute("readId"); + } else { + const svgDom = e.srcElement.parentNode.parentNode; + id = svgDom.getAttribute("readId"); + } + const item = (this.container ? this.container : document).querySelector("#" + id).innerText; + console.log(item, 233); + + }) + } + } }, components: { - front001, - ChapterOne, - ChapterTwo, - ChapterThree, + pageHeader, + chapterOne, + chapterTwo, + chapterThree, + chapterFour, + assemblyOne, + assemblyTwo // ChapterFour, // ChapterFive, // chapterSix, -- Gitblit v1.9.1