五单元

yiming

2024-07-29 f81e5fe6561f221a2be93487be0a1286a65041c5

 src/books/sportsAndHealth/view/components/index.vue

@@ -8,24 +8,14 @@
      transform: `scale(${pageZoom ? pageZoom : 1})`,
      transformOrigin: 'center top',
    }">





      <ChapterOne v-if="showCatalogList.indexOf(1) > -1" :showPageList="loadPageList"></ChapterOne>
      <ChapterTwo v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList"></ChapterTwo>








      <ChapterThree v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList"></ChapterThree>
      <assemblyOne v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList"></assemblyOne>
      <assemblyTwo v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList" @openPDFChange="swdtChange" />
      <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> -->
        <chapterfive v-if="showCatalogList.indexOf(6) > -1" :showPageList="loadPageList"></chapterfive> 
      <!-- <assemblyTwo v-if="showCatalogList.indexOf(7) > -1" :showPageList="loadPageList" @openPDFChange="swdtChange" /> -->


      <!-- <ChapterFour
@@ -106,13 +96,14 @@

import Vue from "vue";

import ChapterOne from "./front001";
import ChapterTwo from "./chapter001";
import ChapterThree from "./chapter002";


import assemblyOne from "./testDynaicTable";
import assemblyTwo 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 chapterfive from "./chapter005.vue";
// import assemblyOne from "./testDynaicTable.vue";
import assemblyTwo from "./testPp.vue";

// import ChapterFour from "./testPp";
// import ChapterFive from "./chapter005";
@@ -140,7 +131,7 @@
export default {
  data() {
    return {
      catalogLength: 5, // 总章节数
      catalogLength: 7, // 总章节数
      showCatalogList: [], // 显示的章节
      loadThreshold: 300, // 触发加载阈值
      throttleThreshold: 100, // 节流阈值
@@ -186,6 +177,7 @@
        setTimeout(() => {
          this.initSwiper();
          this.initViewer();
          this.readText();
        }, 200);
      },
    },
@@ -256,36 +248,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);
    setTimeout(() => {
      this.gotoPage(5, 163);
      //   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) {
@@ -822,12 +814,15 @@
      // 所有章节组件（每本书制作时单独配置）
      const pageData = {


        ChapterOne,
        ChapterTwo,
        ChapterThree,
        assemblyOne,
        assemblyTwo
        pageHeader,
        chapterOne,
        chapterTwo,
        chapterThree,
        chapterFour,
        chapterfive,
        // assemblyOne,
        // assemblyTwo,
        
      };
      // 遍历所有章节文件
      for (const key in pageData) {
@@ -929,16 +924,39 @@
      // 跳转
      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: {



    ChapterOne,
    ChapterTwo,
    ChapterThree,
    assemblyOne,
    assemblyTwo
    pageHeader,
    chapterOne,
    chapterTwo,
    chapterThree,
    chapterFour,
    chapterfive,
    // assemblyOne,
    // assemblyTwo,
    // ChapterFour,
    // ChapterFive,
    // chapterSix,