From aea98d166ba5f5f2bc15ce99035b331302f42831 Mon Sep 17 00:00:00 2001
From: unknown <qq1940665526@163.com>
Date: 星期三, 29 五月 2024 14:30:09 +0800
Subject: [PATCH] 优化

---
 src/books/childHealth/view/content/index.vue |  478 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 files changed, 450 insertions(+), 28 deletions(-)

diff --git a/src/books/childHealth/view/content/index.vue b/src/books/childHealth/view/content/index.vue
index 3902b2e..788ebc1 100644
--- a/src/books/childHealth/view/content/index.vue
+++ b/src/books/childHealth/view/content/index.vue
@@ -1,22 +1,79 @@
 <template>
   <div class="page-main" @scroll="throttledScrollHandler">
-    <div class="page-content">
-      <pageHeader v-if="showCatalogList.indexOf(0) > -1"></pageHeader>
-      <chapterOne v-if="showCatalogList.indexOf(1) > -1"></chapterOne>
-      <chapterOne v-if="showCatalogList.indexOf(1) > -1"></chapterOne>
-      <chapterTwo v-if="showCatalogList.indexOf(2) > -1"></chapterTwo>
-      <chapterThree v-if="showCatalogList.indexOf(3) > -1"></chapterThree>
-      <chapterFour v-if="showCatalogList.indexOf(4) > -1"></chapterFour>
-      <chapterFive v-if="showCatalogList.indexOf(5) > -1"></chapterFive>
-      <chapterSix v-if="showCatalogList.indexOf(6) > -1"></chapterSix>
-      <chapterSeven v-if="showCatalogList.indexOf(7) > -1"></chapterSeven>
-      <chapterEight v-if="showCatalogList.indexOf(8) > -1"></chapterEight>
-      <chapterNine v-if="showCatalogList.indexOf(9) > -1"></chapterNine>
-      <chapterTen v-if="showCatalogList.indexOf(10) > -1"></chapterTen>
-      <chapterEleven v-if="showCatalogList.indexOf(11) > -1"></chapterEleven>
-      <chapterTwelve v-if="showCatalogList.indexOf(12) > -1"></chapterTwelve>
-      <chapterThirteen
+    <div
+      class="page-content"
+      :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"
+        :questionData="questionData"
+      ></chapterOne>
+      <chapterTwo
+        v-if="showCatalogList.indexOf(3) > -1"
+        :showPageList="loadPageList"
+        :questionData="questionData"
+      ></chapterTwo>
+      <chapterThree
+        v-if="showCatalogList.indexOf(4) > -1"
+        :showPageList="loadPageList"
+        :questionData="questionData"
+      ></chapterThree>
+      <chapterFour
+        v-if="showCatalogList.indexOf(5) > -1"
+        :showPageList="loadPageList"
+        :questionData="questionData"
+      ></chapterFour>
+      <chapterFive
+        v-if="showCatalogList.indexOf(6) > -1"
+        :showPageList="loadPageList"
+        :questionData="questionData"
+      ></chapterFive>
+      <chapterSix
+        v-if="showCatalogList.indexOf(7) > -1"
+        :showPageList="loadPageList"
+        :questionData="questionData"
+      ></chapterSix>
+      <chapterSeven
+        v-if="showCatalogList.indexOf(8) > -1"
+        :showPageList="loadPageList"
+        :questionData="questionData"
+      ></chapterSeven>
+      <chapterEight
+        v-if="showCatalogList.indexOf(9) > -1"
+        :showPageList="loadPageList"
+        :questionData="questionData"
+      ></chapterEight>
+      <chapterNine
+        v-if="showCatalogList.indexOf(10) > -1"
+        :showPageList="loadPageList"
+        :questionData="questionData"
+      ></chapterNine>
+      <chapterTen
+        v-if="showCatalogList.indexOf(11) > -1"
+        :showPageList="loadPageList"
+        :questionData="questionData"
+      ></chapterTen>
+      <chapterEleven
+        v-if="showCatalogList.indexOf(12) > -1"
+        :showPageList="loadPageList"
+        :questionData="questionData"
+      ></chapterEleven>
+      <chapterTwelve
         v-if="showCatalogList.indexOf(13) > -1"
+        :showPageList="loadPageList"
+      ></chapterTwelve>
+      <chapterThirteen
+        v-if="showCatalogList.indexOf(14) > -1"
+        :showPageList="loadPageList"
       ></chapterThirteen>
     </div>
   </div>
@@ -37,9 +94,10 @@
 import chapterEleven from "./components/chapter011.vue";
 import chapterTwelve from "./components/chapter012.vue";
 import chapterThirteen from "./components/chapter013.vue";
-
+import NoteIcon from "@/assets/images/biji.png";
 import _ from "lodash";
-
+import getQuestionList from "@/assets/methods/examination";
+import testData from "../../assets/examinationList";
 export default {
   data() {
     return {
@@ -49,33 +107,112 @@
       throttleThreshold: 100, // 鑺傛祦闃堝��
       previousScrollTop: 0,
       throttledScrollHandler: null,
+      observer: null,
+      loadPageObserver: null,
+      loadPageList: [],
+      questionData: {},
     };
+  },
+  computed: {
+    fontSize() {
+      return this.$store.state.qiankun.fontSize;
+    },
+    pageZoom() {
+      return this.$store.state.qiankun.scale / 100;
+    },
   },
   watch: {
     showCatalogList: {
-      handler(newVal) {
-        console.log("鏄剧ず绔犺妭", newVal);
-        this.$store.state.qiankun.windowSelection({
-          showCatalogList: newVal,
-        });
+      handler(newVal, oldVal) {
+        if (
+          this.$store.state.qiankun &&
+          this.$store.state.qiankun.catalogChange
+        ) {
+          // 璋冪敤鐖跺眰鏂规硶
+          this.$store.state.qiankun.catalogChange({
+            showCatalogList: newVal,
+          });
+        }
+        // 鍚姩椤电爜瑙傚療
+        setTimeout(() => {
+          this.initObservation();
+          this.initThemeColor();
+        }, 500);
       },
     },
   },
   mounted() {
     // 榛樿鍔犺浇绔犺妭
-    this.showCatalogList = [0];
+    this.showCatalogList = [1];
     // 婊氬姩鐩戝惉鑺傛祦
     this.throttledScrollHandler = _.throttle(
       this.scrollFun,
       this.throttleThreshold,
       { leading: true, trailing: false }
     );
+    // 瀹氫箟瀛愬眰鏂规硶
+    if (this.setGlobalState) {
+      // 鎻愪緵椤甸潰璺宠浆鍔熻兘
+      this.setGlobalState({
+        gotoPage: (catalog, page) => {
+          this.gotoPage(catalog, page);
+        },
+        // 娓叉煋绗旇銆侀珮浜�佸垝绾�
+        renderSign: (type, data) => {
+          this.renderSign(type, data);
+        },
+        // 鍒犻櫎绗旇銆侀珮浜�佸垝绾�
+        delSign: (data) => {
+          this.delSign(data);
+        },
+      });
+    }
+
+    // 鍒涘缓涓�涓柊鐨� Intersection Observer 瀹炰緥锛岀敤浜庤瀵熺洰鏍囧厓绱犲拰鎵ц鐩稿簲鐨勫洖璋冨嚱鏁般��
+    // new IntersectionObserver(callback, options)锛氫娇鐢ㄤ箣鍓嶅畾涔夌殑 callback 鍥炶皟鍑芥暟鍜� options 閰嶇疆閫夐」鏉ュ垵濮嬪寲 Intersection Observer 瀹炰緥銆�
+    this.observer = new IntersectionObserver(this.pageChangeCallback, {
+      root: null, // 鎸囧畾鏍瑰厓绱狅紝杩欓噷璁句负 null锛岃〃绀洪�夊彇鏁翠釜瑙嗙獥浣滀负鏍瑰厓绱犮��
+      rootMargin: "0px", // 鎸囧畾鏍瑰厓绱犵殑杈圭晫锛岃繖閲岃涓� "0px"锛岃〃绀烘牴鍏冪礌鐨勮竟鐣屽拰瑙嗙獥鐨勮竟鐣岄噸鍚�
+      threshold: 0.5, // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般��
+    });
+
+    this.loadPageObserver = new IntersectionObserver(this.loadPageCallback, {
+      root: null, // 鎸囧畾鏍瑰厓绱狅紝杩欓噷璁句负 null锛岃〃绀洪�夊彇鏁翠釜瑙嗙獥浣滀负鏍瑰厓绱犮��
+      rootMargin: "0px", // 鎸囧畾鏍瑰厓绱犵殑杈圭晫锛岃繖閲岃涓� "0px"锛岃〃绀烘牴鍏冪礌鐨勮竟鐣屽拰瑙嗙獥鐨勮竟鐣岄噸鍚�
+      threshold: 0, // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般��
+    });
+
+    // 鍚姩椤电爜瑙傚療
+    setTimeout(() => {
+      this.initObservation();
+      this.initThemeColor();
+    }, 500);
+
+    // 娴嬭瘯椤甸潰璺宠浆
+    // setTimeout(() => {
+    //   this.gotoPage(5, 100);
+    //   setTimeout(() => {
+    //     this.renderSign("Note", {
+    //       id: "2ACA9359",
+    //       txt: "钀ュ吇绱犲拰鐑噺锛屾墠鑳�",
+    //       page: "100",
+    //       type: "Highlight",
+    //       color: "#F5E12A"
+    //     });
+    //     setTimeout(() => {
+    //       this.delSign({
+    //         ids: ["2ACA9359"]
+    //       });
+    //     }, 2000);
+    //   }, 1000);
+    // }, 3000);
   },
   methods: {
-    scrollFun(e) {
+    // 婊氬姩鐩戝惉
+    scrollFun(event) {
       // 鍒ゆ柇鍚戜笂婊氬姩杩樻槸鍚戜笅婊氬姩
       if (event.target.scrollTop > this.previousScrollTop) {
-        console.log("鍚戜笅婊氬姩");
+        // 鍚戜笅
         const currentScrollTop =
           event.target.scrollTop + event.target.offsetHeight;
         if (
@@ -98,7 +235,7 @@
           }
         }
       } else if (event.target.scrollTop < this.previousScrollTop) {
-        console.log("鍚戜笂婊氬姩");
+        // 鍚戜笂
         const currentScrollTop = event.target.scrollTop;
         if (currentScrollTop <= this.loadThreshold) {
           // 鍒拌揪闃堝��
@@ -113,10 +250,295 @@
         }
       }
       // showCatalogList 褰撳墠鏄剧ず鐨勪笁涓珷鑺傦紝watch鐩戝惉浼犻�掔粰涓诲簲鐢�
-      console.log(this.showCatalogList);
       // 鏇存柊涓婁竴娆℃粴鍔ㄧ殑浣嶇疆
       this.previousScrollTop = event.target.scrollTop;
     },
+    // 绔犺妭銆侀〉闈㈣烦杞�
+    gotoPage(catalog, page) {
+      if (catalog >= 0 && catalog <= this.catalogLength) {
+        // 澶勭悊娓叉煋绔犺妭
+        if (catalog == 0) {
+          this.showCatalogList = [0, 1];
+        } else if (catalog == this.catalogLength) {
+          this.showCatalogList = [
+            this.catalogLength - 2,
+            this.catalogLength - 1,
+            this.catalogLength,
+          ];
+        } else {
+          this.showCatalogList = [catalog - 1, catalog, catalog + 1];
+        }
+        setTimeout(() => {
+          // 璺宠浆椤电爜
+          const pageDom = (
+            this.container ? this.container : document
+          ).querySelector(`[page="${page}"]`);
+          if (pageDom) {
+            pageDom.scrollIntoView();
+          } else {
+            console.log("椤电爜閿欒锛�");
+          }
+        }, 500);
+      } else {
+        console.log("绔犺妭閿欒锛�");
+      }
+    },
+
+    // 娓叉煋鏍囪
+    renderSign(type, data) {
+      const existence = (
+        this.container ? this.container : document
+      ).querySelector(`[dataid="${data.id}"]`);
+      // 鍘婚噸
+      if (!existence) {
+        const pageDom = (
+          this.container ? this.container : document
+        ).querySelector(`[page="${data.page}"]`);
+        let reg = new RegExp(`${data.txt}`, "ig");
+        switch (type) {
+          case "Highlight":
+            // 楂樹寒
+            pageDom.innerHTML = pageDom.innerHTML.replace(
+              reg,
+              `<span datatype="Highlight" dataid="${data.id}" style="background: ${data.color};" class="highLight" onclick="signClick('Highlight','${data.id}','${data.chapterNum}')">${data.txt}</span>`
+            );
+            break;
+          case "Dashing":
+            // 鍒掔嚎
+            pageDom.innerHTML = pageDom.innerHTML.replace(
+              reg,
+              `<span datatype="Dashing" dataid="${data.id}" style="text-decoration-color:${data.color};" class="underline" onclick="signClick('Dashing','${data.id}','${data.chapterNum}')">${data.txt}</span>`
+            );
+            break;
+          case "Note":
+            // 绗旇
+            pageDom.innerHTML = pageDom.innerHTML.replace(
+              reg,
+              `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline" onclick="signClick('Note','${data.id}','${data.chapterNum}')" onmouseover="noteHover('Note','${data.id}','${data.chapterNum}')" onmouseout="noteOut('Note')">${data.txt}<img src="${NoteIcon}"/></span>`
+            );
+            break;
+        }
+      }
+    },
+    // 鍒犻櫎鏍囪娓叉煋
+    delSign({ ids, type }) {
+      if (ids && ids.length) {
+        for (let i = 0; i < ids.length; i++) {
+          const id = ids[i];
+          const dom = (
+            this.container ? this.container : document
+          ).querySelector(`[dataid="${id}"]`);
+          dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace(
+            dom.outerHTML,
+            dom.outerText
+          );
+        }
+      }
+      if (type) {
+        const doms = (
+          this.container ? this.container : document
+        ).querySelectorAll(`[datatype="${type}"]`);
+        for (let i = 0; i < doms.length; i++) {
+          const dom = doms[i];
+          dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace(
+            dom.outerHTML,
+            dom.outerText
+          );
+        }
+      }
+    },
+    initObservation() {
+      const sections = (
+        this.container ? this.container : document
+      ).querySelectorAll(".page-box");
+      sections.forEach((section) => {
+        if (this.config.activeBook && this.config.activeBook.tryPageCount) {
+          const page = section.getAttribute("page");
+          if (Number(page) > this.config.activeBook.tryPageCount) {
+            let chapterDom = this.getParentWithClass(section, "chapter");
+            const chapterNum = chapterDom.getAttribute("num");
+            this.catalogLength = Number(chapterNum) - 1;
+            section.remove();
+            return false;
+          }
+        }
+        //observer 瑙傚療姣忎釜鍏冪礌锛屼互渚垮湪瀹冧滑杩涘叆鎴栫寮�瑙嗙獥鏃惰Е鍙戝洖璋冨嚱鏁般��
+        const isObserver = section.getAttribute("observer");
+        const isLoadObserver = section.getAttribute("loadObserver");
+        if (!isObserver) {
+          this.observer.observe(section);
+          section.setAttribute("observer", "1");
+        }
+        if (!isLoadObserver) {
+          this.loadPageObserver.observe(section);
+          section.setAttribute("loadObserver", "1");
+        }
+      });
+    },
+    initThemeColor() {
+      // 鑾峰彇鍚勭闇�瑕佷富棰樿壊鐨勮妭鐐�
+      const colorDom = (
+        this.container ? this.container : document
+      ).querySelectorAll(".theme-color");
+      const backgroundColorDom = (
+        this.container ? this.container : document
+      ).querySelectorAll(".theme-back");
+      const borderColorDom = (
+        this.container ? this.container : document
+      ).querySelectorAll(".theme-border");
+      // 鑾峰彇閰嶇疆鐨勪富棰樿壊
+      const bookThemeColor =
+        this.config.activeBook && this.config.activeBook.bookThemeColor
+          ? this.config.activeBook.bookThemeColor
+          : null;
+      const chapterThemeColor =
+        this.config.activeBook && this.config.activeBook.chapterThemeColor
+          ? this.config.activeBook.chapterThemeColor
+          : null;
+      const pageThemeColor =
+        this.config.activeBook && this.config.activeBook.pageThemeColor
+          ? this.config.activeBook.pageThemeColor
+          : null;
+      colorDom.forEach((domItem) => {
+        // 鑾峰彇绔犺妭銆侀〉鐮�
+        let pageDom = this.getParentWithClass(domItem, "page-box");
+        let chapterDom = this.getParentWithClass(domItem, "chapter");
+        let page, chapterNum;
+        if (pageDom) page = pageDom.getAttribute("page");
+        if (chapterDom) chapterNum = chapterDom.getAttribute("num");
+        // 鍚戜笂鍖归厤涓婚鑹�
+        const themeColor =
+          page && pageThemeColor && pageThemeColor[page]
+            ? pageThemeColor[page]
+            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
+            ? chapterThemeColor[chapterNum]
+            : bookThemeColor;
+        if (themeColor) {
+          domItem.style.color = themeColor;
+        }
+      });
+      backgroundColorDom.forEach((domItem) => {
+        // 鑾峰彇绔犺妭銆侀〉鐮�
+        let pageDom = this.getParentWithClass(domItem, "page-box");
+        let chapterDom = this.getParentWithClass(domItem, "chapter");
+        let page, chapterNum;
+        if (pageDom) page = pageDom.getAttribute("page");
+        if (chapterDom) chapterNum = chapterDom.getAttribute("num");
+        // 鍚戜笂鍖归厤涓婚鑹�
+        const themeColor =
+          page && pageThemeColor && pageThemeColor[page]
+            ? pageThemeColor[page]
+            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
+            ? chapterThemeColor[chapterNum]
+            : bookThemeColor;
+        if (themeColor) {
+          domItem.style.backgroundColor = themeColor;
+        }
+      });
+      borderColorDom.forEach((domItem) => {
+        // 鑾峰彇绔犺妭銆侀〉鐮�
+        let pageDom = this.getParentWithClass(domItem, "page-box");
+        let chapterDom = this.getParentWithClass(domItem, "chapter");
+        let page, chapterNum;
+        if (pageDom) page = pageDom.getAttribute("page");
+        if (chapterDom) chapterNum = chapterDom.getAttribute("num");
+        // 鍚戜笂鍖归厤涓婚鑹�
+        const themeColor =
+          page && pageThemeColor && pageThemeColor[page]
+            ? pageThemeColor[page]
+            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
+            ? chapterThemeColor[chapterNum]
+            : bookThemeColor;
+        if (themeColor) {
+          domItem.style.borderColor = themeColor;
+        }
+      });
+    },
+    getParentWithClass(element, className) {
+      while (element.parentElement) {
+        element = element.parentElement;
+        if (element.classList.contains(className)) {
+          return element;
+        }
+      }
+    },
+    pageChangeCallback(entries, observer) {
+      //entries锛氫唬琛ㄨ瀵熷埌鐨勭洰鏍囧厓绱犵殑闆嗗悎銆� observer锛氫唬琛ㄨ瀵熻�呭璞°��
+      entries.forEach((entry) => {
+        //entry.isIntersecting锛氭鏌ュ綋鍓嶇洰鏍囧厓绱犳槸鍚︿笌鏍瑰厓绱犵浉浜ゃ��
+        if (entry.isIntersecting) {
+          const target = entry.target;
+          //entry.target锛氳幏鍙栧綋鍓嶇洰鏍囧厓绱�
+          const page = target.getAttribute("page");
+          const catalogDom = this.tool.getParentNodeByClassName(
+            target,
+            "chapter"
+          );
+          const catalog = catalogDom.getAttribute("num");
+          console.log(page, "page", catalog, "catalog",);
+          let text = null
+          if(target.querySelector('p')) {
+            console.log(target.querySelector('p').textContent.substring(0, 20));
+            text = target.querySelector('p').textContent.substring(0, 20)
+          }
+          // 杩斿洖椤电爜鍜岀珷鑺備俊鎭�
+          if (this.$store.state.qiankun && this.$store.state.qiankun.pageChange)
+            this.$store.state.qiankun.pageChange({
+              page: page,
+              catalog: catalog,
+              text,
+            });
+          // const sections = Array.from(document.querySelectorAll(".section"));
+          //sections锛氳幏鍙栨墍鏈夊叿鏈� .section 绫诲悕鐨勫厓绱狅紝骞惰浆鎹负鏁扮粍銆�
+          // let index = sections.findIndex((section) => section === target) + 1;
+          //index锛氭煡鎵惧綋鍓嶇洰鏍囧厓绱犲湪 sections 鏁扮粍涓殑绱㈠紩锛屽苟鍔� 1锛岀敤浜庣‘瀹氬綋鍓嶉〉鐮併��
+        }
+      });
+    },
+    loadPageCallback(entries, observer) {
+      entries.forEach(async (entry) => {
+        if (entry.isIntersecting) {
+          const target = entry.target;
+          const page = target.getAttribute("page");
+          if (this.loadPageList.indexOf(page) == -1) {
+            //
+            const catalogDom = this.tool.getParentNodeByClassName(
+              target,
+              "chapter"
+            );
+            const catalog = catalogDom.getAttribute("num");
+            if (!this.questionData[page]) {
+              if (testData && testData[catalog]) {
+                if (testData[catalog][page]) {
+                  if (Array.isArray(testData[catalog][page])) {
+                    this.questionData[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
+                      );
+                    }
+                    this.questionData[page] = obj;
+                  }
+                }
+              }
+            }
+            this.loadPageList.push(Number(page));
+            if (this.loadPageList.length > 5) {
+              // 瓒呰繃5椤�
+              this.loadPageList.shift();
+            }
+          }
+        }
+      });
+    },
   },
   components: {
     pageHeader,

--
Gitblit v1.9.1