优化

unknown

2024-06-13 c0e4157169e151fe4ada71d3abbd82aa78c4d71e

优化

 src/App.vue

@@ -8,7 +8,7 @@
      v-if="activeBook.name == 'sportsAndHealth'"
    ></sportsAndHealth>
    <artAndDance v-if="activeBook.name == 'artAndDance'"></artAndDance>
    <math v-if="activeBook.name == 'math'"></math>
    <mathDom v-if="activeBook.name == 'math'"></mathDom>
  </div>
</template>

@@ -19,7 +19,7 @@
import english from "./books/English/view/index.vue";
import sportsAndHealth from "./books/sportsAndHealth/view/index";
import artAndDance from './books/artAndDance/view/index.vue'
import math from './books/math/view/index.vue'
import mathDom from './books/math/view/index'
export default {
  name: "App",
  components: {
@@ -29,7 +29,7 @@
    english,
    sportsAndHealth,
    artAndDance,
    math
    mathDom
  },
  data() {
    return {
@@ -75,7 +75,7 @@
        // english
        // artAndDance
        // math
        this.config.resourceCtx + "math"
        this.config.resourceCtx + "sportsAndHealth"
      );
      // 测试试读30页
      // this.activeBook.tryPageCount = 10;

 src/books/lifeCare/css/default.less

@@ -256,6 +256,29 @@
      .chapter {
        font-family: "宋体";

        .bk1-h3 {
          border: 2px solid #a5c24f;
          color: #a5c24f;
          font-weight: normal;
          height: 35px;
          border-top-right-radius: 25px;
          border-bottom-right-radius: 25px;
          display: inline-flex;
          justify-content: space-between;
          align-items: center;

          span {
            color: #fff;
            display: inline-block;
            width: 50px;
            height: 100%;
            line-height: 35px;
            text-align: center;
            box-sizing: border-box;
            background-color: #a5c24f;
          }
        }

        .topImg {
          padding-top: 0 !important;
          margin-bottom: 2em;

 src/books/lifeCare/view/components/chapter001.vue

@@ -1386,7 +1386,7 @@
        </div>
        <div class="bodystyle">
          <p>走访的托育园一日生活保育要求及具体内容见表1-1-3。</p>
          <p class="img">表1-1-3　______托育园一日生活保育要求及具体内容</p>
          <p class="img">表1-1-3<input type="text" maxlength="6" v-model="chapter001.text113Item" class="tk-line"/>托育园一日生活保育要求及具体内容</p>
          <div style="margin-bottom: 40px">
            <table class="table112 table113">
              <thead>

 src/books/math/view/components/header.vue

@@ -79,7 +79,7 @@
  props: {
    showPageList: {
      type: Array,
      default: [],
      // default: [],
    },
    data() {
      return {

 src/books/sportsAndHealth/css/default.less

@@ -18,7 +18,6 @@
      font-size: 18px;

      .chapter {

        textarea {
          width: 100%;
          font-family: 'FZLTXIHJW';
@@ -1732,7 +1731,42 @@
  }
}

.pdfModal {
  width: 100%;
  height: 90vh;
}

@media screen and (max-width:800px) {
  .pdfModal {
    width: 100%;
    height: 60vh;
  }

  .custom-dialog {
    .el-dialog {
      width: 90vw !important;
    }
  }
}


.custom-dialog {
  .el-dialog__body {
    padding: 0;
  }

  .el-dialog__header {
    background-color: rgba(0, 0, 0, 0.8);

    .el-dialog__title,
    .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
      font-weight: 900;
      font-size: 16px;
      font-family: 'FZLTXIHJW';
    }
  }
}

.tablePublic input[type="checkbox"]:checked+.checkmark {
  background: #000 !important;

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

@@ -188,7 +188,7 @@
  },
  mounted() {
    // 默认加载章节
    this.showCatalogList = [3];
    this.showCatalogList = [4];
    // 滚动监听节流
    this.throttledScrollHandler = _.throttle(
      this.scrollFun,
@@ -264,11 +264,8 @@
  },
  methods: {
    changeDomViewer() {
      setTimeout(() => {
        this.initViewer();
      }, 500);
      this.initViewer();
    },

    // 滚动监听
    scrollFun(event) {
      // 判断向上滚动还是向下滚动
@@ -605,19 +602,19 @@
              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;
                  }
@@ -638,7 +635,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();
@@ -814,7 +814,7 @@
          propsData: {
            showPageList: [],
            questionData: {},
            isSearch: true
            isSearch: true,
          },
        });
        pageExample.$mount(
@@ -846,7 +846,7 @@
              propsData: {
                showPageList: [pageNum],
                questionData: {},
                isSearch: true
                isSearch: true,
              },
            });
            pageExample.$mount(

 src/books/sportsAndHealth/view/components/testDynaicTable.vue

@@ -114,22 +114,11 @@
        </div>
      </div>
    </div>
    <div class="page-box" page="226">
      <div v-if="showPageList.indexOf(226)>-1">
        <div class="bodystyle">
          <pdfView :md5="md5"></pdfView>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import pdfView from '@/components/pdfview'
export default {
  name: "testD",
  components:{
    pdfView
  },
  props: {
    showPageList: {
      type: Array,
@@ -138,10 +127,12 @@
      type: Object,
    },
  },
  data(){
  methods: {},
  data() {
    return {
      md5:'54741d14a21eb47b2ed06a2231271cd5'
    }
  }
      md5: "54741d14a21eb47b2ed06a2231271cd5",
      dialogVisible: true,
    };
  },
};
</script>

 src/books/sportsAndHealth/view/components/testPp.vue

@@ -1456,12 +1456,31 @@
        </div>
      </div>
    </div>
    <div>
      <el-dialog
        size="small"
        :title="pdfTitle"
        :visible.sync="dialogVisible"
        width="60vw"
        :before-close="handleClose"
        append-to-body
        class="custom-dialog"
      >
        <div class="pdfModal" v-if="dialogVisible">
          <preView :isClear="dialogVisible" :md5="p_md5"></preView>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import preView from "@/components/pdfview";
import { getResourcePath } from "@/assets/methods/resources";
export default {
  name: "testPp",
  components: {
    preView,
  },
  props: {
    showPageList: {
      type: Array,
@@ -1476,27 +1495,75 @@
  },
  data() {
    return {
      pdfTitle: "",
      p_md5: "",
      dialogVisible: false,
      isShowXyx02: false,
      pingpang: require("../../image/pdf.png"),
      chapter002: {
        isShowXyx01: true,
        textBybItem1: "",
        pdfMd5: {
          1: "54741d14a21eb47b2ed06a2231271cd5",
          2: "1b7ecc924bfab900ec10f0ed4bb2466b",
          3: "f1597b91fb3110eb6fd59c84f5ddbfd1",
          4: "515f3dd2554dbdea779c59800a8da6b2",
          5: "b32afdfb8555ad8db1aa1fd95750369f",
          6: "57481cd4e7e7ce535eb6585d375e317e",
          7: "878a8bbb91f093107cae210ade9a387e",
          8: "e242f94d2bdc54de7b5340d452256515",
          9: "1ce6dc7953b1783de746e0de672ffbe4",
          10: "030b943ad33a4c0f31524f0f1ec9c14f",
          11: "2a458d11dc021318e2d3aa4f92cf3e36",
          12: "81957321d71fd270f67fe74f7ef2b9e8",
          13: "5f675eff789c96ce8a6cf80679c8a992",
          14: "02236dec8a8e87176b1df2435b82fb87",
          15: "fa38047ab9eed59f3296940778cc6cfd",
          1: {
            md5: "54741d14a21eb47b2ed06a2231271cd5",
            name: "1 乒乓球的常用术语（一）",
          },
          2: {
            md5: "1b7ecc924bfab900ec10f0ed4bb2466b",
            name: "2 乒乓球的常用术语（二）",
          },
          3: {
            md5: "f1597b91fb3110eb6fd59c84f5ddbfd1",
            name: "3 模块一（一）单项技术学练 平击发球",
          },
          4: {
            md5: "515f3dd2554dbdea779c59800a8da6b2",
            name: "4 模块一（二）基本战术学练 接平击球抢攻",
          },
          5: {
            md5: "b32afdfb8555ad8db1aa1fd95750369f",
            name: "5 模块一（三）组合技能练习 推挡+侧身攻",
          },
          6: {
            md5: "57481cd4e7e7ce535eb6585d375e317e",
            name: "6 模块二（一）单项技术学练 正手快带",
          },
          7: {
            md5: "878a8bbb91f093107cae210ade9a387e",
            name: "7 模块二（一）单项技术学练 转与不转球发球",
          },
          8: {
            md5: "e242f94d2bdc54de7b5340d452256515",
            name: "8 模块二（二）基本战术学练 发转与不转球抢攻",
          },
          9: {
            md5: "1ce6dc7953b1783de746e0de672ffbe4",
            name: "9 模块二（三）组合技能练习 左推+右攻",
          },
          10: {
            md5: "030b943ad33a4c0f31524f0f1ec9c14f",
            name: "10 模块三（一）单项技术学练 弧圈球",
          },
          11: {
            md5: "2a458d11dc021318e2d3aa4f92cf3e36",
            name: "11 模块三（一）单项技术学练 快搓",
          },
          12: {
            md5: "81957321d71fd270f67fe74f7ef2b9e8",
            name: "12 模块三（一）单项技术学练 反手快拨",
          },
          13: {
            md5: "5f675eff789c96ce8a6cf80679c8a992",
            name: "13 模块三（二）基本战术学练 搓攻战术",
          },
          14: {
            md5: "02236dec8a8e87176b1df2435b82fb87",
            name: "14 模块三（三）组合技能练习 推挡+侧身攻",
          },
          15: {
            md5: "fa38047ab9eed59f3296940778cc6cfd",
            name: "15 拓展资料：乒乓球裁判法",
          },
        },
        videoMd5: {
          v1: { md5: "bfbb956d884e0a11ba6368846176657d", name: "1核心技术" },
@@ -1617,9 +1684,14 @@
    }
  },
  methods: {
    async toUrl(val) {
    handleClose(done) {
      done();
    },
    toUrl(val) {
      if (val) {
        window.open(await getResourcePath(this.chapter002.pdfMd5[val]));
        this.dialogVisible = true;
        this.p_md5 = this.chapter002.pdfMd5[val].md5;
        this.pdfTitle = this.chapter002.pdfMd5[val].name;
      }
    },
    async getVideo(md5, val) {

 src/components/pdfview/index.vue

@@ -1,17 +1,31 @@
<template>
  <div ref="imageBox" class="imageBox">
    <img
      id="image"
      ref="image"
      @onload="initFun"
      @ondragstart="dragStart"
      @onwheel="handleScroll"
      :src="currentPageSrc"
      alt=""
    />
  <div class="preview" v-if="this.preViewMd5">
    <div id="imageParent" class="imageBox"></div>
    <div class="bottom_tool">
      <svg
        @click="downloadPdf"
        t="1718251204993"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="4418"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        width="25"
        height="25"
      >
        <path
          d="M557 564.974l153.188-181.04c16.054-18.972 44.448-21.34 63.42-5.286 18.972 16.054 21.338 44.448 5.284 63.42L550.56 711.92a44.982 44.982 0 0 1-8.95 10.254 44.872 44.872 0 0 1-15.082 8.432A44.944 44.944 0 0 1 512 733c-16.264 0-30.512-8.628-38.42-21.556L245.65 442.068c-16.052-18.972-13.686-47.366 5.286-63.42 18.972-16.052 47.366-13.686 63.42 5.286l152.646 180.4V157c0-24.852 20.148-45 45-45s45 20.148 45 45v407.974zM823 630c0-24.852 20.148-45 45-45s45 20.148 45 45v238c0 24.87-20.176 45.026-45.046 45l-710-0.726c-24.834-0.026-44.954-20.166-44.954-45V630c0-24.852 20.148-45 45-45s45 20.148 45 45v192.32l620 0.634V630z"
          p-id="4419"
        ></path>
      </svg>
    </div>
  </div>
</template>
<script>
import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";
import { getResourcePath } from "@/assets/methods/resources";
export default {
  name: "pdf_view",
  props: {
@@ -21,138 +35,163 @@
    title: {
      type: String,
    },
    isClear: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      currentPageSrc: "",
      fileLoading: false,
      visible: true,
      close: null,
      currentPage: 1,
      totalPage: 1,
      rcViewerOptions: {
        // inline: true
      },
      zoom: 1,
      catalogVisible: false,
      tocData: [],
      generateList: [],
      expandedKeys: [],
      searchValue: "",
      autoExpandParent: true,
      drawerSize: "default",
      viewerCon: null,
      preViewMd5: "",
    };
  },
  watch: {
    isClear: {
      immediate: true,
      handler(val) {
        if (val == true) this.preViewMd5 = "";
      },
    },
    md5: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.getFileInfo();
      immediate: true,
      handler(val) {
        if (val) {
          this.preViewMd5 = val;
          this.currentPage = 1;
          this.currentPageSrc = "";
          this.totalPage = 1;
          this.viewerCon?.destroy();
        }
      },
    },
  },
  created() {
  mounted() {
    this.scrollBottom();
    this.clearDom();
    this.getFileInfo();
  },
  mounted(){
    // this.initFun()
  },
  methods: {
    initFun() {
        // 初始化拖拽
        let image = this.$refs.image;
        console.log(this,8989);
        if (image) {
          let imageBox = this.$refs.imageBox;
          let initLeft = imageBox.offsetWidth / 2 - image.offsetWidth / 2;
          image.style.left = 0 + "px";
          image.style.top = 0 + "px";
          let canMove = false;
          let offsetX, offsetY, oldLeft, oldTop;
          image.onmousedown = function (e) {
            canMove = true;
            offsetX = e.x;
            offsetY = e.y;
            oldLeft = parseFloat(image.style.left.split("px")[0]);
            oldTop = parseFloat(image.style.top.split("px")[0]);
          };
          imageBox.onmousemove = function (e) {
            if (canMove == true) {
              let left = e.clientX - offsetX;
              let top = e.clientY - offsetY;
              image.style.left = oldLeft + left + "px";
              image.style.top = oldTop + top + "px";
            }
          };
          image.onmouseup = function () {
            canMove = false;
          };
          this.fileLoading = false;
        }
    async downloadPdf() {
      window.open(await getResourcePath(this.preViewMd5));
    },
    dragStart(e) {
      console.log(e,'dragStart')
      if (e && e.preventDefault) {
        e.preventDefault();
      } else {
        window.event.returnValue = false;
      }
    domViewer() {
      let ele = (this.container ? this.container : document).getElementById(
        "imageParent"
      );
      this.viewerCon = new Viewer(ele, {
        inline: false,
        container: this.container
          ? this.container.querySelector("#app")
          : "body",
        navbar: true, // 显示导航栏
        toolbar: true, // 显示工具栏
        title: true, // 显示标题
      });
    },
    handleScroll(e) {
      console.log(e,'handleScroll')
      if (e.nativeEvent.deltaY <= 0) {
        if (this.zoom < 3) {
          let newZoom = this.zoom + 0.1;
          this.zoom = newZoom;
          this.$refs.image.style.height = newZoom * 100 + "%";
    clearDom() {
      let ele = (this.container ? this.container : document).getElementById(
        "imageParent"
      );
      ele.innerHtml = "";
    },
    createDom(page) {
      var that = this;
      let ele = (this.container ? this.container : document).getElementById(
        "imageParent"
      );
      const img = document.createElement("img");
      img.src = this.getPageImage(page);
      img.alt = "";
      img.style.maxWidth = "90%";
      img.style.padding = "30px 5%";
      img.className = "imgHover";
      img.onclick = () => {
        that.viewerCon?.destroy();
        that.domViewer();
      };
      ele.appendChild(img);
    },
    scrollBottom() {
      var that = this;
      var ele = (this.container ? this.container : document).getElementById(
        "imageParent"
      );
      ele.addEventListener("scroll", function () {
        // 计算滚动条距离底部的位置
        const scrollBottom =
          ele.scrollHeight - ele.scrollTop - ele.clientHeight;
        if (scrollBottom <= 10) {
          that.currentPage++;
          if (that.currentPage <= that.totalPage) {
            that.createDom(that.currentPage, ele);
          }
        }
      } else {
        if (this.zoom > 0.5) {
          let newZoom = this.zoom - 0.1;
          this.zoom = newZoom;
          this.$refs.image.style.height = newZoom * 100 + "%";
        }
      }
      });
    },
    getFileInfo() {
      // 获取目录
      this.MG.file
        .getPdfInfo({ md5: this.md5 })
        .getPdfInfo({ md5: this.preViewMd5 })
        .then((res) => {
          this.totalPage = res.totalPages;
          this.getPageImage(this.currentPage);
          this.createDom(this.currentPage);
        })
        .catch((err) => {
          this.totalPage = 1;
          this.createDom(this.currentPage);
          console.error(err);
        });
    },
    getPageImage(page) {
      const ctx = process.env.VUE_APP_API_URL;
      this.fileLoading = true;
      this.currentPageSrc =
      return (
        ctx +
        "/file/GetPdfPageImage" +
        "?md5=" +
        this.md5 +
        this.preViewMd5 +
        "&index=" +
        page +
        "&dpi=150";
        "&dpi=200"
      );
    },
  },
};
</script>
<style scoped lang="less">
.imageBox {
.preview {
  width: 100%;
  height: 300px;
  overflow: auto;
  position: relative;
  img {
    position: absolute;
    width: auto;
    height: 100%;
    transition: transform 0.5s, width 0.3s, height 0.3s;
  height: 100%;

  .imageBox {
    height: calc(100% - 30px);
    overflow-x: hidden;
    overflow-y: auto;
    background: #ccc;
    box-sizing: border-box;
  }

  .imageBox:hover {
    cursor: zoom-in !important;
  }

  .bottom_tool {
    height: 30px;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    svg {
      margin-right: 10px;
      fill: #999;
    }
    svg:hover {
      fill: #fff;
      cursor: pointer;
    }
  }
}
</style>