Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

zhongshujie

2024-07-29 96db8c34de3369f38873fca703a1d7dd6397ce33

 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"
@@ -101,10 +91,15 @@
</template>

<script>
import front001 from "./front001";
import ChapterOne from "./chapter001";
import ChapterTwo from "./testDynaicTable";
import ChapterThree from "./testPp";
import Vue from "vue";
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";
@@ -131,7 +126,7 @@
export default {
  data() {
    return {
      catalogLength: 5, // 总章节数
      catalogLength: 7, // 总章节数
      showCatalogList: [], // 显示的章节
      loadThreshold: 300, // 触发加载阈值
      throttleThreshold: 100, // 节流阈值
@@ -153,11 +148,6 @@
      return this.$store.state.qiankun.scale / 100;
    },
  },
  provide() {
    return {
      changeQuestionData: this.changeQuestionData,
    };
  },
  watch: {
    showCatalogList: {
      handler(newVal, oldVal) {
@@ -178,11 +168,20 @@
      },
    },
    loadPageList: {
      handler() {
      handler(newVal, oldVal) {
        setTimeout(() => {
          this.initSwiper();
          this.initViewer();
          this.readText();
        }, 200);
      },
    },
    pageZoom: {
      handler(newVal, oldVal) {
        const scrollBox = (
          this.container ? this.container : document
        ).querySelector(".page-main");
        scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal;
      },
    },
  },
@@ -244,31 +243,70 @@
    }, 500);

    // 测试页面跳转
    // 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);
    // }, 1000);
    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);
  },
  methods: {
    changeDomViewer() {
      setTimeout(() => {
        this.initViewer();
      }, 500);
    swdtChange(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() {
      this.initViewer();
    },
    // setZoom1() {
    //   let scale = this.$store.state.qiankun.scale + 10;
    //   const scrollBox = (
    //     this.container ? this.container : document
    //   ).querySelector(".page-main");
    //   this.$store.commit("setZoom", scale);
    // },
    // setZoom2() {
    //   let scale = this.$store.state.qiankun.scale - 10;
    //   const scrollBox = (
    //     this.container ? this.container : document
    //   ).querySelector(".page-main");
    //   this.$store.commit("setZoom", scale);
    // },
    // 滚动监听
    scrollFun(event) {
      // 判断向上滚动还是向下滚动
@@ -418,7 +456,6 @@
        }
      }
    },

    // 删除标记渲染
    delSign({ ids, type }) {
      if (ids && ids.length) {
@@ -446,7 +483,6 @@
        }
      }
    },

    initObservation() {
      const sections = (
        this.container ? this.container : document
@@ -475,7 +511,6 @@
        }
      });
    },

    initThemeColor() {
      // 获取各种需要主题色的节点
      const colorDom = (
@@ -512,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;
        }
@@ -530,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;
        }
@@ -548,14 +583,22 @@
          page && pageThemeColor && pageThemeColor[page]
            ? pageThemeColor[page]
            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
            ? chapterThemeColor[chapterNum]
            : bookThemeColor;
              ? chapterThemeColor[chapterNum]
              : bookThemeColor;
        if (themeColor) {
          domItem.style.borderColor = themeColor;
        }
      });
    },

    getParentWithClass(element, className) {
      console.log(element, className, "element, className");
      while (element.parentElement) {
        element = element.parentElement;
        if (element.classList.contains(className)) {
          return element;
        }
      }
    },
    pageChangeCallback(entries, observer) {
      //entries：代表观察到的目标元素的集合。 observer：代表观察者对象。
      entries.forEach((entry) => {
@@ -587,7 +630,6 @@
        }
      });
    },

    loadPageCallback(entries, observer) {
      entries.forEach(async (entry) => {
        if (entry.isIntersecting) {
@@ -605,26 +647,25 @@
              if (testData && testData[catalog]) {
                if (testData[catalog][page]) {
                  if (Array.isArray(testData[catalog][page])) {
                      this.questionDataMap[page] = await getQuestionList(
                        page,
                        testData[catalog][page],
                        this.config.activeBook
                      );
                    this.questionDataMap[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
                        );
                      obj[key] = await getQuestionList(
                        [],
                        testData[catalog][page][key],
                        this.config.activeBook
                      );
                    }
                    this.questionDataMap[page] = obj;
                  }
                }
              }
            }

            // 渲染这一页的标记
            for (const key in this.renderSignMap) {
              if (this.renderSignMap[key][page]) {
@@ -638,7 +679,10 @@
              // 高亮行
              setTimeout(() => {
                // 获取页面所有text节点
                const pageTextList = document.createTreeWalker(target, NodeFilter.SHOW_TEXT);
                const pageTextList = document.createTreeWalker(
                  target,
                  NodeFilter.SHOW_TEXT
                );
                // 匹配关键字
                const allPageTextNodes = [];
                let currentNode = pageTextList.nextNode();
@@ -671,7 +715,6 @@
        }
      });
    },

    initSwiper() {
      const doms = (
        this.container ? this.container : document
@@ -690,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,
@@ -722,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,
@@ -751,7 +786,6 @@
        });
      }
    },

    initViewer() {
      const doms = (
        this.container ? this.container : document
@@ -768,41 +802,20 @@
        });
      }
    },

    swdtChange(data) {
      if (this.$store.state.qiankun && this.$store.state.qiankun.chooseWords) {
        this.$store.state.qiankun.chooseWords({
          type: data.type,
          data: data.data,
        });
      }
    },

    // 根据关键字全文检索
    searchTextByPage(keyword) {
      const searchResult = [];
      let catalogIndex = 0;
      // 所有章节组件（每本书制作时单独配置）
      const pageData = {
        front001,
        ChapterOne,
        ChapterTwo,
        ChapterThree,
        // ChapterFour,
        // ChapterFive,
        // chapterSix,
        // chapterSeven,
        // chapterEight,
        // chapterNine,
        // chapter010,
        // chapter011,
        // chapter012,
        // chapter013,
        // chapter014,
        // chapter015,
        // chapter016,
        // chapter017,
        // chapter018,

        pageHeader,
        chapterOne,
        chapterTwo,
        chapterThree,
        chapterFour,
        assemblyOne,
        assemblyTwo
      };
      // 遍历所有章节文件
      for (const key in pageData) {
@@ -814,7 +827,7 @@
          propsData: {
            showPageList: [],
            questionData: {},
            isSearch: true
            isSearch: true,
          },
        });
        pageExample.$mount(
@@ -846,7 +859,7 @@
              propsData: {
                showPageList: [pageNum],
                questionData: {},
                isSearch: true
                isSearch: true,
              },
            });
            pageExample.$mount(
@@ -894,23 +907,48 @@
        }
      }
      // 输出搜索结果
      // console.log(searchResult);
      console.log(searchResult);
      return searchResult;
    },

    // 根据检索结果跳转对应位置并高亮
    searchItemLocation(data) {
      // 记录高亮信息
      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,