From 7d7744fe006714f6be0341d03d4de9b1e90d775d Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期五, 23 五月 2025 22:45:09 +0800
Subject: [PATCH] 5.23 婴幼儿游戏活动实施（wb）
---
src/components/pdfview/index.vue | 275 +++++++++++++++++++++++++++++++++---------------------
1 files changed, 169 insertions(+), 106 deletions(-)
diff --git a/src/components/pdfview/index.vue b/src/components/pdfview/index.vue
index f20fe73..a712e0f 100644
--- a/src/components/pdfview/index.vue
+++ b/src/components/pdfview/index.vue
@@ -1,40 +1,40 @@
<!-- @format -->
-
<template>
- <div class="pdfBox-component">
- <div class="preview" v-if="this.preViewMd5">
- <div id="imageParent" class="imageBox"></div>
- <div class="bottom_tool">
- <!-- <svg
- t="1718330411310"
- @click="downloadPdf"
- class="icon"
- viewBox="0 0 1024 1024"
- version="1.1"
- xmlns="http://www.w3.org/2000/svg"
- p-id="7121"
- width="20"
- height="20"
- >
- <path
- d="M1022.955204 522.570753c0 100.19191-81.516572 181.698249-181.718715 181.698249l-185.637977 0c-11.2973 0-20.466124-9.168824-20.466124-20.466124 0-11.307533 9.168824-20.466124 20.466124-20.466124l185.637977 0c77.628008 0 140.786467-63.148226 140.786467-140.766001 0-77.423347-62.841234-140.448776-140.203182-140.766001-0.419556 0.030699-0.818645 0.051165-1.217734 0.061398-5.945409 0.143263-11.686157-2.292206-15.687284-6.702656-4.001127-4.400217-5.894244-10.335393-5.167696-16.250102 1.330298-10.806113 1.944282-19.760043 1.944282-28.192086 0-60.763922-23.658839-117.884874-66.617234-160.833035-42.968627-42.968627-100.089579-66.617234-160.843268-66.617234-47.368844 0-92.742241 14.449084-131.208321 41.781592-37.616736 26.738991-65.952084 63.700811-81.925894 106.884332-2.425236 6.538927-8.012488 11.399631-14.827707 12.893658-6.815219 1.483794-13.927197-0.603751-18.859533-5.54632-19.289322-19.330254-44.943608-29.972639-72.245418-29.972639-56.322773 0-102.146425 45.813419-102.146425 102.125959 0 0.317225 0.040932 0.982374 0.092098 1.627057 0.061398 0.920976 0.122797 1.831718 0.153496 2.762927 0.337691 9.465582-5.863545 17.928325-15.001669 20.455891-32.356942 8.933463-61.541635 28.550243-82.181721 55.217602-21.305235 27.516704-32.571836 60.508096-32.571836 95.41307 0 86.244246 70.188572 156.422585 156.443052 156.422585l169.981393 0c11.2973 0 20.466124 9.15859 20.466124 20.466124 0 11.2973-9.168824 20.466124-20.466124 20.466124l-169.981393 0c-108.828614 0-197.3753-88.536452-197.3753-197.354833 0-44.053332 14.223956-85.712127 41.126676-120.473839 22.809495-29.460985 53.897537-52.086285 88.710414-64.816215 5.065366-74.322729 67.149353-133.2447 142.751215-133.2447 28.386514 0 55.504128 8.217149 78.651314 23.52581 19.657712-39.868009 48.842405-74.169233 85.497233-100.212376 45.434795-32.295544 99.004875-49.354058 154.918325-49.354058 71.692832 0 139.087778 27.915793 189.782368 78.600149 50.694589 50.694589 78.610382 118.089535 78.610382 189.782368 0 3.704368-0.102331 7.470135-0.296759 11.368932C952.633602 352.568894 1022.955204 429.511287 1022.955204 522.570753zM629.258611 820.711014l-102.023628 102.013395c-3.990894 4.001127-9.230222 5.996574-14.46955 5.996574s-10.478655-1.995447-14.46955-5.996574l-102.023628-102.013395c-7.992021-7.992021-7.992021-20.947078 0-28.939099s20.947078-8.002254 28.939099 0l67.087954 67.077721 0-358.699522c0-11.2973 9.15859-20.466124 20.466124-20.466124 11.307533 0 20.466124 9.168824 20.466124 20.466124l0 358.699522 67.087954-67.077721c7.992021-8.002254 20.947078-7.992021 28.939099 0S637.250632 812.718993 629.258611 820.711014z"
- p-id="7122"
- ></path>
- </svg> -->
+ <el-dialog
+ :visible.sync="localDialogVisible"
+ @open="hadleOpenDialog"
+ width="60vw"
+ top="2vh"
+ append-to-body
+ lock-scroll
+ :show-close="false"
+ class="custom-dialog"
+ >
+ <div slot="title" class="header_title">
+ <span>{{ pdfTitle }}</span>
+ <span @click="closeDialog"> x </span>
+ </div>
+ <div class="pdfModal" v-if="localDialogVisible">
+ <!-- 鍘熸湁鐨勫唴瀹� -->
+ <div class="pdfBox-component">
+ <div class="preview" v-if="this.preViewMd5">
+ <div id="imageParent" class="imageBox"></div>
+ <div class="bottom_tool"></div>
+ </div>
+ <div class="notBox" v-if="totalPage == 0 && !loading">
+ <el-empty description="鏆傛棤鏁版嵁"></el-empty>
+ </div>
+ <div class="notBox" v-if="loading" v-loading="loading"></div>
</div>
</div>
- <div class="notBox" v-if="totalPage == 0 && !loading">
- <el-empty description="鏆傛棤鏁版嵁"></el-empty>
- </div>
- <div class="notBox" v-if="loading" v-loading="loading"></div>
- </div>
+ </el-dialog>
</template>
<script>
-import Viewer from 'viewerjs'
-import 'viewerjs/dist/viewer.css'
-import { getResourcePath } from '@/assets/methods/resources'
+import Viewer from "viewerjs";
+import "viewerjs/dist/viewer.css";
+import { getResourcePath } from "@/assets/methods/resources";
export default {
- name: 'pdf_view',
+ name: "pdf_view",
props: {
md5: {
type: String,
@@ -46,120 +46,183 @@
type: Boolean,
default: false,
},
+ pdfTitle: {
+ type: String,
+ },
},
data() {
return {
- currentPageSrc: '',
+ localDialogVisible: false,
+ currentPageSrc: "",
currentPage: 1,
totalPage: 1,
viewerCon: null,
- preViewMd5: '',
+ preViewMd5: "",
loading: false,
- }
+ };
},
watch: {
- isClear: {
- immediate: true,
- handler(val) {
- if (val == true) this.preViewMd5 = ''
- },
- },
- md5: {
- immediate: true,
- handler(val) {
- if (val) {
- this.preViewMd5 = val
- this.currentPage = 1
- this.currentPageSrc = ''
- this.totalPage = 1
- this.viewerCon?.destroy()
- }
- },
- },
- },
- mounted() {
- this.scrollBottom()
- this.clearDom()
- this.getFileInfo()
+ // md5: {
+ // immediate: true,
+ // handler(val) {
+ // if (val) {
+ // // this.preViewMd5 = val
+ // this.currentPage = 1
+ // this.currentPageSrc = ''
+ // this.totalPage = 1
+ // this.viewerCon?.destroy()
+ // }
+ // },
+ // },
+ // dialogVisibleProp(newVal) {
+ // this.localDialogVisible = newVal;
+ // if (newVal) {
+ // this.currentPage = 1;
+ // this.loading = true;
+ // this.clearDom();
+ // this.getFileInfo();
+ // this.$nextTick(() => {
+ // this.scrollBottom()
+ // });
+ // } else {
+ // this.viewerCon?.destroy();
+ // }
+ // },
},
methods: {
+ hadleOpenDialog() {
+ this.preViewMd5 = this.md5;
+ this.currentPage = 1;
+ this.currentPageSrc = "";
+ this.totalPage = 1;
+ this.viewerCon?.destroy();
+ this.loading = true;
+ this.clearDom();
+ this.getFileInfo();
+ this.$nextTick(() => {
+ this.scrollBottom();
+ });
+ },
+ closeDialog() {
+ this.localDialogVisible = false;
+ },
+ openDialog() {
+ this.localDialogVisible = true;
+ },
async downloadPdf() {
- window.open(await getResourcePath(this.preViewMd5))
+ console.log(await getResourcePath(this.preViewMd5), "12345");
+
+ window.open(await getResourcePath(this.preViewMd5));
},
domViewer() {
- let ele = document.getElementById('imageParent')
- this.viewerCon = new Viewer(ele, {
- inline: false,
- container: this.container
- ? this.container.querySelector('#app')
- : 'body',
- navbar: true, // 鏄剧ず瀵艰埅鏍�
- toolbar: true, // 鏄剧ず宸ュ叿鏍�
- title: true, // 鏄剧ず鏍囬
- })
+ // let ele = (this.container ? this.container : document).getElementById(
+ // 'imageParent'
+ // )
+ let ele = document.getElementById("imageParent");
+ if (ele) {
+ this.viewerCon = new Viewer(ele, {
+ inline: false,
+ container: this.container
+ ? this.container.querySelector("#app")
+ : "body",
+ navbar: true, // 鏄剧ず瀵艰埅鏍�
+ toolbar: true, // 鏄剧ず宸ュ叿鏍�
+ title: true, // 鏄剧ず鏍囬
+ });
+ }
},
clearDom() {
- let ele = document.getElementById('imageParent')
- ele.innerHtml = ''
+ let ele = document.getElementById("imageParent");
+ if (ele) {
+ ele.innerHTML = "";
+ }
},
createDom(page) {
- var that = this
- let ele = 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'
+ var that = this;
+ let ele = document.getElementById("imageParent");
+ const img = document.createElement("img");
+ img.src = this.getPageImage(page);
+ // 鎵嬪姩瑙﹀彂婊氬姩浜嬩欢
+ // ele.dispatchEvent(new Event("scroll"));
+ img.alt = "";
+ img.style.maxWidth = "90%";
+ img.style.padding = "30px 5%";
+ img.className = "imgHover";
img.onclick = () => {
- that.viewerCon?.destroy()
- that.domViewer()
+ that.viewerCon?.destroy();
+ that.domViewer();
+ };
+ if (ele) {
+ ele.appendChild(img);
}
- ele.appendChild(img)
},
+
scrollBottom() {
- var that = this
- var ele = 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)
+ const ele = document.getElementById("imageParent");
+ if (ele) {
+ let lastScrollTop = 0;
+ ele.addEventListener("scroll", () => {
+ const scrollTop = ele.scrollTop;
+ const scrollBottom = ele.scrollHeight - scrollTop - ele.clientHeight;
+ if (scrollBottom < 10 && scrollTop > lastScrollTop) {
+ console.log(
+ "婊氬姩鍒板簳閮紝褰撳墠椤碉細",
+ this.currentPage,
+ "鎬婚〉鏁帮細",
+ this.totalPage
+ );
+ if (this.currentPage < this.totalPage) {
+ this.currentPage++;
+ if (this.currentPage <= this.totalPage) {
+ this.createDom(this.currentPage, ele);
+ }
+ }
}
- }
- })
+ lastScrollTop = scrollTop;
+ });
+ }
},
+
getFileInfo() {
// 鑾峰彇鐩綍
this.loading = true;
this.MG.file
.getPdfInfo({ md5: this.preViewMd5 })
.then((res) => {
- this.totalPage = res.totalPages
- this.createDom(this.currentPage)
- this.loading = false
+ try {
+ if (typeof res === "string" && res !== null) {
+ this.totalPage = JSON.parse(res).totalPages;
+ } else if (typeof res === "object" && res !== null) {
+ this.totalPage = res.totalPages;
+ }
+ } catch (error) {
+ console.log(error, "pdf杩斿洖鍊肩被鍨嬮敊璇�");
+ }
+ Math.min(3, res.totalPages);
+ for (let i = 0; i <= Math.min(3, res.totalPages); i++) {
+ this.createDom(i + 1);
+ }
+ this.loading = false;
})
.catch((err) => {
- this.totalPage = 0
- this.createDom(this.currentPage)
- console.error(err)
- this.loading = false
- })
+ this.totalPage = 0;
+ this.createDom(this.currentPage);
+ console.error(err);
+ this.loading = false;
+ });
},
getPageImage(page) {
- const ctx = process.env.VUE_APP_API_URL
+ const ctx = process.env.VUE_APP_API_URL;
return (
ctx +
- '/file/GetPdfPageImage' +
- '?md5=' +
+ "/file/GetPdfPageImage" +
+ "?md5=" +
this.preViewMd5 +
- '&index=' +
+ "&index=" +
page +
- '&dpi=200'
- )
+ "&dpi=200"
+ );
},
},
-}
+};
</script>
--
Gitblit v1.9.1