闫增涛
2024-11-19 d8c24a06b3e7844ad65e7c821c022dbb36d29430
src/books/lifeCare/view/components/index.vue
@@ -14,44 +14,37 @@
      <front001
        v-if="showCatalogList.indexOf(1) > -1"
        :showPageList="loadPageList"
        :isSearch="isSearch"
      />
      <ChapterOne
        v-if="showCatalogList.indexOf(2) > -1"
        :showPageList="loadPageList"
        :questionData="questionDataMap"
        :isSearch="isSearch"
      />
      <ChapterTwo
        v-if="showCatalogList.indexOf(3) > -1"
        :showPageList="loadPageList"
        :questionData="questionDataMap"
        :isSearch="isSearch"
      />
      <ChapterThree
        v-if="showCatalogList.indexOf(4) > -1"
        :showPageList="loadPageList"
        :questionData="questionDataMap"
        :isSearch="isSearch"
      />
      <ChapterFour
        v-if="showCatalogList.indexOf(5) > -1"
        :showPageList="loadPageList"
        :questionData="questionDataMap"
        :isSearch="isSearch"
      />
      <ChapterFive
        v-if="showCatalogList.indexOf(6) > -1"
        :showPageList="loadPageList"
        :questionData="questionDataMap"
        @Upload_initViewer="changeDomViewer"
        :isSearch="isSearch"
      />
      <chapterSix
        v-if="showCatalogList.indexOf(7) > -1"
        :showPageList="loadPageList"
        :questionData="questionDataMap"
        :isSearch="isSearch"
      />
      <chapterSeven
        v-if="showCatalogList.indexOf(8) > -1"
@@ -59,19 +52,16 @@
        :questionData="questionDataMap"
        @eventSwdt="swdtChange"
        @Upload_initViewer="changeDomViewer"
        :isSearch="isSearch"
      />
      <chapterEight
        v-if="showCatalogList.indexOf(9) > -1"
        :showPageList="loadPageList"
        :questionData="questionDataMap"
        :isSearch="isSearch"
      />
      <chapterNine
        v-if="showCatalogList.indexOf(10) > -1"
        :showPageList="loadPageList"
        :questionData="questionDataMap"
        :isSearch="isSearch"
      />
      <chapter010
        v-if="showCatalogList.indexOf(11) > -1"
@@ -114,6 +104,7 @@
</template>
<script>
import Vue from "vue";
import front001 from "./front001";
import ChapterOne from "./chapter001";
import ChapterTwo from "./chapter002";
@@ -156,7 +147,6 @@
      questionDataMap: {},
      renderSignMap: {},
      highlightData: null,
      isSearch: false,
    };
  },
  computed: {
@@ -166,11 +156,6 @@
    pageZoom() {
      return this.$store.state.qiankun.scale / 100;
    },
  },
  provide() {
    return {
      changeQuestionData: this.changeQuestionData,
    };
  },
  watch: {
    showCatalogList: {
@@ -192,11 +177,19 @@
      },
    },
    loadPageList: {
      handler() {
      handler(newVal, oldVal) {
        setTimeout(() => {
          this.initSwiper();
          this.initViewer();
        }, 200);
      },
    },
    pageZoom: {
      handler(newVal, oldVal) {
        const scrollBox = (
          this.container ? this.container : document
        ).querySelector(".page-main");
        scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal;
      },
    },
  },
@@ -259,30 +252,62 @@
    // 测试页面跳转
    // setTimeout(() => {
    // this.gotoPage(1, 15);
    // this.gotoPage(1,10);
    //   setTimeout(() => {
    //     this.renderSign("Note", {
    //     this.renderSign("Highlight", {
    //       id: "2ACA9359",
    //       txt: "营养素和热量,才能",
    //       page: "100",
    //       txt: "题一学习主题一 运动",
    //       page: "10",
    //       type: "Highlight",
    //       color: "#F5E12A"
    //     });
    //     setTimeout(() => {
    //       this.delSign({
    //         ids: ["2ACA9359"]
    //       });
    //     }, 2000);
    //   }, 1000);
    // }, 1000);
    // 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) {
      if (this.$store.state.qiankun && this.$store.state.qiankun.chooseWords) {
        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) {
      // 判断向上滚动还是向下滚动
@@ -432,7 +457,6 @@
        }
      }
    },
    // 删除标记渲染
    delSign({ ids, type }) {
      if (ids && ids.length) {
@@ -460,7 +484,6 @@
        }
      }
    },
    initObservation() {
      const sections = (
        this.container ? this.container : document
@@ -489,7 +512,6 @@
        }
      });
    },
    initThemeColor() {
      // 获取各种需要主题色的节点
      const colorDom = (
@@ -569,7 +591,15 @@
        }
      });
    },
    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) => {
@@ -601,7 +631,6 @@
        }
      });
    },
    loadPageCallback(entries, observer) {
      entries.forEach(async (entry) => {
        if (entry.isIntersecting) {
@@ -619,26 +648,27 @@
              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;
                  }
                  console.log('题目',this.questionDataMap);
                }
              }
            }
            // 渲染这一页的标记
            for (const key in this.renderSignMap) {
              if (this.renderSignMap[key][page]) {
@@ -652,7 +682,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();
@@ -685,7 +718,6 @@
        }
      });
    },
    initSwiper() {
      const doms = (
        this.container ? this.container : document
@@ -697,23 +729,23 @@
          autoplay: {
            //自动开始
            delay: 3000, //时间间隔
            disableOnInteraction: false, //*手动操作轮播图后不会暂停*
            disableOnInteraction: false //*手动操作轮播图后不会暂停*
          },
          paginationClickable: true,
          slidesPerView: 1, // 一组三个
          spaceBetween: 30, // 间隔
          // 如果需要前进后退按钮
          navigation: {
            nextEl: (this.container ? this.container : document).querySelector(
            nextEl: dom.querySelector(
              ".swiper-button-next"
            ),
            prevEl: (this.container ? this.container : document).querySelector(
            prevEl: dom.querySelector(
              ".swiper-button-prev"
            ),
            )
          },
          // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
          observer: true,
          observeParents: true,
          observeParents: true
          // // 如果需要分页器
          // pagination: {
          //   el: (this.container ? this.container : document).querySelector(
@@ -736,12 +768,12 @@
          spaceBetween: 30, // 间隔
          // 如果需要前进后退按钮
          navigation: {
            nextEl: (this.container ? this.container : document).querySelector(
            nextEl: dom.querySelector(
              ".swiper-button-next"
            ),
            prevEl: (this.container ? this.container : document).querySelector(
            prevEl: dom.querySelector(
              ".swiper-button-prev"
            ),
            )
          },
          // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
          observer: true,
@@ -760,12 +792,11 @@
              var paginationInfoEl = dom.querySelector(".pageBox");
              if (paginationInfoEl)
                paginationInfoEl.textContent = currentPage + "/" + totalPages;
            },
          },
            }
          }
        });
      }
    },
    initViewer() {
      const doms = (
        this.container ? this.container : document
@@ -782,16 +813,6 @@
        });
      }
    },
    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 = [];
@@ -828,6 +849,7 @@
          propsData: {
            showPageList: [],
            questionData: {},
            isSearch: true,
          },
        });
        pageExample.$mount(
@@ -859,6 +881,7 @@
              propsData: {
                showPageList: [pageNum],
                questionData: {},
                isSearch: true,
              },
            });
            pageExample.$mount(
@@ -906,10 +929,9 @@
        }
      }
      // 输出搜索结果
      // console.log(searchResult);
      console.log(searchResult);
      return searchResult;
    },
    // 根据检索结果跳转对应位置并高亮
    searchItemLocation(data) {
      // 记录高亮信息