闫增涛
2024-07-23 1e5f5724f9f2c1c34efec7edb3f33bcfb98d66ba
src/books/sportsAndHealth/view/components/index.vue
@@ -3,30 +3,31 @@
    <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',
    }">
      <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" />
      <!-- <ChapterFour
        v-if="showCatalogList.indexOf(5) > -1"
        :showPageList="loadPageList"
@@ -101,11 +102,18 @@
</template>
<script>
import Vue from "vue";
import front001 from "./front001";
import ChapterOne from "./chapter001";
import ChapterTwo from "./testDynaicTable";
import ChapterThree from "./testPp";
import ChapterOne from "./front001";
import ChapterTwo from "./chapter001";
import ChapterThree from "./chapter002";
import assemblyOne from "./testDynaicTable";
import assemblyTwo from "./testPp";
// import ChapterFour from "./testPp";
// import ChapterFive from "./chapter005";
// import chapterSix from "./chapter006";
@@ -248,44 +256,51 @@
    }, 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(1, 23);
      //   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) {
      if (this.$store.state.qiankun && this.$store.state.qiankun.chooseWords) {
        this.$store.state.qiankun.chooseWords({
          type: data.type,
          data: data.data,
        });
      console.log("子应用pdf", 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() {
@@ -545,8 +560,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 +578,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 +596,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 +746,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 +774,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 +821,13 @@
      let catalogIndex = 0;
      // 所有章节组件(每本书制作时单独配置)
      const pageData = {
        front001,
        ChapterOne,
        ChapterTwo,
        ChapterThree,
        assemblyOne,
        assemblyTwo
      };
      // 遍历所有章节文件
      for (const key in pageData) {
@@ -917,14 +927,18 @@
      // 记录高亮信息
      this.highlightData = data;
      // 跳转
      this.gotoPage(data.catalog, data.page, () => {});
      this.gotoPage(data.catalog, data.page, () => { });
    },
  },
  components: {
    front001,
    ChapterOne,
    ChapterTwo,
    ChapterThree,
    assemblyOne,
    assemblyTwo
    // ChapterFour,
    // ChapterFive,
    // chapterSix,