报告分页

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@vueuse/core": "^10.11.0",
     "axios": "^1.7.2",
     "normalize.css": "^8.0.1",
     "pdfjs-dist": "2.16.105",

pnpm-lock.yaml

@@ -1,6 +1,9 @@
 lockfileVersion: '6.0'
 
 dependencies:
+  '@vueuse/core':
+    specifier: ^10.11.0
+    version: 10.11.0(vue@3.4.21)
   axios:
     specifier: ^1.7.2
     version: 1.7.2
@@ -35,7 +38,7 @@ devDependencies:
     version: 1.77.4
   unplugin-auto-import:
     specifier: ^0.17.6
-    version: 0.17.6
+    version: 0.17.6(@vueuse/core@10.11.0)
   unplugin-icons:
     specifier: ^0.19.0
     version: 0.19.0
@@ -553,7 +556,6 @@ packages:
 
   /@types/web-bluetooth@0.0.20:
     resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
-    dev: false
 
   /@use-gesture/core@10.3.1:
     resolution: {integrity: sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw==}
@@ -644,6 +646,17 @@ packages:
   /@vue/shared@3.4.21:
     resolution: {integrity: sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g==}
 
+  /@vueuse/core@10.11.0(vue@3.4.21):
+    resolution: {integrity: sha512-x3sD4Mkm7PJ+pcq3HX8PLPBadXCAlSDR/waK87dz0gQE+qJnaaFhc/dZVfJz+IUYzTMVGum2QlR7ImiJQN4s6g==}
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 10.11.0
+      '@vueuse/shared': 10.11.0(vue@3.4.21)
+      vue-demi: 0.14.8(vue@3.4.21)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   /@vueuse/core@10.7.0(vue@3.4.21):
     resolution: {integrity: sha512-4EUDESCHtwu44ZWK3Gc/hZUVhVo/ysvdtwocB5vcauSV4B7NiGY5972WnsojB3vRNdxvAt7kzJWE2h9h7C9d5w==}
     dependencies:
@@ -656,10 +669,21 @@ packages:
       - vue
     dev: false
 
+  /@vueuse/metadata@10.11.0:
+    resolution: {integrity: sha512-kQX7l6l8dVWNqlqyN3ePW3KmjCQO3ZMgXuBMddIu83CmucrsBfXlH+JoviYyRBws/yLTQO8g3Pbw+bdIoVm4oQ==}
+
   /@vueuse/metadata@10.7.0:
     resolution: {integrity: sha512-GlaH7tKP2iBCZ3bHNZ6b0cl9g0CJK8lttkBNUX156gWvNYhTKEtbweWLm9rxCPIiwzYcr/5xML6T8ZUEt+DkvA==}
     dev: false
 
+  /@vueuse/shared@10.11.0(vue@3.4.21):
+    resolution: {integrity: sha512-fyNoIXEq3PfX1L3NkNhtVQUSRtqYwJtJg+Bp9rIzculIZWHTkKSysujrOk2J+NrRulLTQH9+3gGSfYLWSEWU1A==}
+    dependencies:
+      vue-demi: 0.14.8(vue@3.4.21)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   /@vueuse/shared@10.7.0(vue@3.4.21):
     resolution: {integrity: sha512-kc00uV6CiaTdc3i1CDC4a3lBxzaBE9AgYNtFN87B5OOscqeWElj/uza8qVDmk7/U8JbqoONLbtqiLJ5LGRuqlw==}
     dependencies:
@@ -3280,7 +3304,7 @@ packages:
     engines: {node: '>= 10.0.0'}
     dev: true
 
-  /unplugin-auto-import@0.17.6:
+  /unplugin-auto-import@0.17.6(@vueuse/core@10.11.0):
     resolution: {integrity: sha512-dmX0Pex5DzMzVuALkexboOZvh51fL/BD6aoPO7qHoTYGlQp0GRKsREv2KMF1lzYI9SXKQiRxAjwzbQnrFFNydQ==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -3294,6 +3318,7 @@ packages:
     dependencies:
       '@antfu/utils': 0.7.8
       '@rollup/pluginutils': 5.1.0
+      '@vueuse/core': 10.11.0(vue@3.4.21)
       fast-glob: 3.3.2
       local-pkg: 0.5.0
       magic-string: 0.30.10
@@ -3486,7 +3511,6 @@ packages:
         optional: true
     dependencies:
       vue: 3.4.21
-    dev: false
 
   /vue-router@4.3.2(vue@3.4.21):
     resolution: {integrity: sha512-hKQJ1vDAZ5LVkKEnHhmm1f9pMiWIBNGF5AwU67PdH7TyXCj/a4hTccuUuYCAMgJK6rO/NVYtQIEN3yL8CECa7Q==}

src/views/report/Detail.vue

@@ -4,6 +4,7 @@ import { useRoute } from 'vue-router'
 import { Message } from 'tdesign-mobile-vue';
 import apiCommon from '@/api/modules/common'
 import apiUser from '@/api/modules/user'
+import { useThrottleFn } from '@vueuse/core'
 
 const route = useRoute()
 
@@ -65,6 +66,7 @@ async function getReportInfo() {
         formatIframeData()
       }else{
         reportContent.value = modifyReportContentIframeData(reportInfo.value.Content)
+        splitReportContent(reportContent.value)
       }
     } else {//无权限
       reportContent.value = modifyReportContentIframeData(reportInfo.value.ContentSub)
@@ -82,6 +84,23 @@ function modifyReportContentIframeData(str){
 // 给报告详情中图表加参数
 function formatIframeData() {
   reportContent.value = reportInfo.value.Content.replace(/\/chartshow\?code=/g, `/chartshow?source=etamini&token=${localStorage.getItem('token')}&reportId=${reportId}&code=`)
+  splitReportContent(reportContent.value)
+}
+
+// 报告内容分页
+const pageSize=20
+let page=0
+let endPageNum=0
+let contentTotals=[]
+const renderContentList=ref([])
+function splitReportContent(data){
+  const arr=data.split('</p>');
+  contentTotals=arr.map(_ => _+'</p>')
+  renderContentList.value=contentTotals.slice(0,pageSize)
+  endPageNum=parseInt(contentTotals.length / pageSize) + 1;
+}
+function handleLoadContent(){
+  renderContentList.value=renderContentList.value.concat(contentTotals.slice(page*pageSize,(page+1)*pageSize))
 }
 
 // 拨打电话
@@ -122,14 +141,25 @@ const isShowMZSM = ref(false)
 
 // 显示返回顶部
 const showToTop = ref(false)
-function handlePageScroll() {
+const handlePageScroll=useThrottleFn(()=>{
   const top = document.documentElement.scrollTop || document.body.scrollTop
   if (top > window.outerHeight) {
     showToTop.value = true
   } else {
     showToTop.value = false
   }
-}
+
+  if(page >= endPageNum) return
+  const clientHeight = document.documentElement.clientHeight || document.body.clientHeight; // 可视高度
+  const scrollHeight = document.body.scrollHeight; // 总高度
+  const bufferHeight = 400;
+  if((scrollHeight - top - clientHeight) < bufferHeight+100) {
+    console.log('触底')
+    page++
+    handleLoadContent();
+  }
+},300)
+
 function handleBackTop() {
   document.body.scrollTop = document.documentElement.scrollTop = 0
 }
@@ -182,8 +212,9 @@ function handleGoLogin(){
     <div
       id="rich-content"
       class="report-content-box rich-content"
-      v-html="reportContent"
-    ></div>
+    >
+      <div v-for="item in renderContentList" :key="item" v-html="item"></div>
+    </div>
     <!-- 右侧悬浮操作栏 -->
     <div class="right-fix-box">
       <!-- 收藏 -->

src/views/report/PDF.vue

@@ -53,6 +53,7 @@ async function getReportInfo() {
         title: res.Data.Report.Title
       }
     });
+    await getUserInfo()
   }
 }
 getReportInfo()