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

闫增涛

2024-11-06 4e236a15226b5341cebc480c4798069b9f90919a

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

@@ -1,80 +1,30 @@
<template>
  <div class="page-main" @scroll="throttledScrollHandler">
    <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
        @initViewer="initViewer"
        v-if="showCatalogList.indexOf(2) > -1"
        :showPageList="loadPageList"
      ></chapterOne>
      <!-- <chapterTwo
        @initViewer="initViewer"
        v-if="showCatalogList.indexOf(3) > -1"
        :showPageList="loadPageList"
      ></chapterTwo>
      <chapterThree
        @initViewer="initViewer"
        v-if="showCatalogList.indexOf(4) > -1"
        :showPageList="loadPageList"
      ></chapterThree>
      <chapterFour
        @initViewer="initViewer"
        v-if="showCatalogList.indexOf(5) > -1"
        :showPageList="loadPageList"
      ></chapterFour>
      <chapterFive
        @initViewer="initViewer"
        v-if="showCatalogList.indexOf(6) > -1"
        :showPageList="loadPageList"
      ></chapterFive>
      <chapterSix
        @initViewer="initViewer"
        v-if="showCatalogList.indexOf(7) > -1"
        :showPageList="loadPageList"
      ></chapterSix>
      <chapterSeven
        @initViewer="initViewer"
        v-if="showCatalogList.indexOf(8) > -1"
        :showPageList="loadPageList"
      ></chapterSeven>
      <chapterEight
        @initViewer="initViewer"
        v-if="showCatalogList.indexOf(9) > -1"
        :showPageList="loadPageList"
      ></chapterEight> -->
      
    <div id="searchDomBox" style="display: none">
      <div id="searchContent"></div>
    </div>
    <miniAudio
      :path="audioPath"
      :currentTime="currentTime"
      @closeMiniAudio="closeMiniAudio"
      ref="audioPlayer"
    >
    </miniAudio>
    <div class="page-content" :style="{
      fontSize: fontSize + 'px',
      transform: `scale(${pageZoom})`,
      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>
      <chapterfive v-if="showCatalogList.indexOf(6) > -1" :showPageList="loadPageList"></chapterfive>
    </div>
  </div>
</template>

<script>
import pageHeader from "./header.vue";
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 chapterSix from "./chapter006.vue";
// import chapterSeven from "./chapter007.vue";
// import chapterEight from "./chapter008.vue";
import miniAudio from "@/components/miniAudio/index.vue";
import chapterTwo from "./chapter002.vue";
import chapterThree from "./chapter003.vue";
import chapterfour from "./chapter004.vue";
import chapterfive from "./chapter005.vue"
import NoteIcon from "@/assets/images/biji.png";
import _ from "lodash";
import Swiper from "swiper/bundle";
@@ -82,9 +32,10 @@
import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";
export default {
  name: "pageContent",
  data() {
    return {
      catalogLength: 9, // 总章节数
      catalogLength: 6, // 总章节数
      showCatalogList: [], // 显示的章节
      loadThreshold: 300, // 触发加载阈值
      throttleThreshold: 100, // 节流阈值
@@ -103,10 +54,11 @@
  },
  computed: {
    fontSize() {
      return this.$store.state.qiankun.fontSize;
      this.transformDom(this.$store.state.qiankun.fontSize)
      return this.$store.state.qiankun.fontSize ? this.$store.state.qiankun.fontSize : 18;
    },
    pageZoom() {
      return this.$store.state.qiankun.scale / 100;
      return this.$store.state.qiankun.scale ? this.$store.state.qiankun.scale / 100 : 1;
    },
  },
  watch: {
@@ -131,10 +83,11 @@
    loadPageList: {
      handler(newVal, oldVal) {
        setTimeout(() => {
          this.transformDom(this.$store.state.qiankun.fontSize)
          this.initSwiper();
          this.initViewer();
          this.closeAudio();
           this.saveWord()
          this.closeVideo();
        }, 200);
      },
    },
@@ -151,6 +104,7 @@
    // 默认加载章节
    this.showCatalogList = [1];
    // 滚动监听节流
    debugger
    this.throttledScrollHandler = _.throttle(
      this.scrollFun,
      this.throttleThreshold,
@@ -205,8 +159,8 @@
    }, 500);

    // 测试页面跳转
    //  setTimeout(() => {
    //   this.gotoPage(5,69);
    setTimeout(() => {
      this.gotoPage(6,190);
    //   setTimeout(() => {
    //     this.renderSign("Highlight", {
    //       id: "2ACA9359",
@@ -220,7 +174,7 @@
    //     ids: ["2ACA9359"]
    //   });
    // }, 2000);
    //   }, 5000);
    }, 500);

    // const pageDom = (this.container ? this.container : document)
    //   .querySelector("#app")
@@ -234,7 +188,7 @@
    //   txt: " 运动系统是由骨、骨连结和骨骼肌三部分组成的。全身的骨通过骨连结组成人体骨骼（见图1-1）。骨骼是人体的支架，具有保护内脏器官、供肌肉附着和作为肌肉运动的杠杆等作用。在神经系统的支配下，肌肉收缩牵动所附着的骨绕着关节转动，使身体产生各种动作。所以，运动系统具有运动、支持和保护等功能，幼年时期的骨骼还具有造血功能。 ",
    //   txtIndex: 57
    // });
    //  }, 50);
    // }, 500);
  },
  methods: {
    // setZoom1() {
@@ -253,6 +207,7 @@
    // },
    // 滚动监听
    scrollFun(event) {
      this.handleVideoPicture()
      // 判断向上滚动还是向下滚动
      if (event.target.scrollTop > this.previousScrollTop) {
        this.getAduio();
@@ -263,6 +218,9 @@
          currentScrollTop >=
          event.target.scrollHeight - this.loadThreshold
        ) {
          console.log(1);

          debugger
          // 到达阈值
          if (
            this.showCatalogList[this.showCatalogList.length - 1] <
@@ -493,8 +451,8 @@
          page && pageThemeColor && pageThemeColor[page]
            ? pageThemeColor[page]
            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
            ? chapterThemeColor[chapterNum]
            : bookThemeColor;
              ? chapterThemeColor[chapterNum]
              : bookThemeColor;
        if (themeColor) {
          domItem.style.color = themeColor;
        }
@@ -511,8 +469,8 @@
          page && pageThemeColor && pageThemeColor[page]
            ? pageThemeColor[page]
            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
            ? chapterThemeColor[chapterNum]
            : bookThemeColor;
              ? chapterThemeColor[chapterNum]
              : bookThemeColor;
        if (themeColor) {
          domItem.style.backgroundColor = themeColor;
        }
@@ -529,15 +487,14 @@
          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)) {
@@ -684,8 +641,8 @@
            prevEl: dom.querySelector(".swiper-button-prev"),
          },
          // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
          observer: true,
          observeParents: true,
          // observer: true,
          // observeParents: true
          // // 如果需要分页器
          // pagination: {
          //   el: (this.container ? this.container : document).querySelector(
@@ -757,13 +714,10 @@
      const pageData = {
        pageHeader,
        chapterOne,
        // chapterTwo,
        // chapterThree,
        // chapterFour,
        // chapterFive,
        // chapterSix,
        // chapterSeven,
        // chapterEight,
        chapterTwo,
        chapterThree,
        chapterfour,
        chapterfive,
      };
      // 遍历所有章节文件
      for (const key in pageData) {
@@ -863,39 +817,7 @@
      // 记录高亮信息
      this.highlightData = data;
      // 跳转
      this.gotoPage(data.catalog, data.page, () => {});
    },
    // 点击事件：将生僻单词传给 主应用 从而调用词典功能
    // saveCharacters(event, word) {
    //   if (this.$store.state.qiankun && this.$store.state.qiankun.chooseWords) {
    //     this.$store.state.qiankun.chooseWords({
    //       type: "word",
    //       word,
    //       x: event.pageX,
    //       y: event.pageY,
    //     });
    //   }
    // },
    saveWord() {
      const doms = (
        this.container ? this.container : document
      ).querySelectorAll(".word-bc");
      for (let index = 0; index < doms.length; index++) {
        const dom = doms[index];
        dom.addEventListener('click',(e) => {
          let word = null
          dom.getAttribute('word') ? word = dom.getAttribute('word') : word = e.srcElement.innerText
          console.log('单词',word)
          if (this.$store.state.qiankun && this.$store.state.qiankun.chooseWords) {
            this.$store.state.qiankun.chooseWords({
              type: "word",
              word,
              x: e.pageX,
              y: e.pageY,
            });
          }
        })
      }
      this.gotoPage(data.catalog, data.page, () => { });
    },
    // 页面向下滚动，音频小窗播放功能
    getAduio() {
@@ -965,26 +887,71 @@
        });
      }
    },
    // 点击视频关闭其他
    closeVideo() {
      let allVideo = (
        this.container ? this.container : document
      ).querySelectorAll(".video");
      for (let index = 0; index < allVideo.length; index++) {
        const item = allVideo[index];
        item.addEventListener("playing", (item) => {
          const path = item.srcElement.src;
          const videoList = Array.from(allVideo);
          for (let cindex = 0; cindex < videoList.length; cindex++) {
            const citem = videoList[cindex];
            if (citem.currentSrc != path && path) {
              citem.pause();
            }
          }
        });
      }
    },
    // 视频小窗
    handleVideoPicture() {
      let doms = (
        this.container ? this.container : document
      ).querySelectorAll(".video");
      doms = Array.from(doms)
      if (!doms.length) return false
      const playVudio = doms
        .reverse()
        .find((item) => item.paused == false);
      if (playVudio) {
        const bottomGap = playVudio.getBoundingClientRect().bottom;
        const topGap = playVudio.getBoundingClientRect().top;
        if (bottomGap < 0 || topGap > window.innerHeight) {
          playVudio.requestPictureInPicture();
        }
      }
    },
    //其他类名下字体大小变化
    transformDom(fs) {
      if(!fs) return
      let doms = (
        this.container ? this.container : document
      ).querySelectorAll('.block')
      if(!doms.length) return 
      for (let index = 0; index < doms.length; index++) {
        const dom = doms[index];
        dom.style.fontSize = fs + 'px'
      }
    }
  },
  components: {
    pageHeader,
    chapterOne,
    // chapterTwo,
    // chapterThree,
    // chapterFour,
    // chapterFive,
    // chapterSix,
    // chapterSeven,
    // chapterEight,
    // miniAudio,
    chapterTwo,
    chapterThree,
    chapterfour,
    chapterfive,
  },
};
</script>

<style lang="less" scoped>
.page-main {
  width: 100%;
  height: 100%;
  width: 100% !important;
  height: 100% !important;
  overflow: auto;

  .page-content {