fix: pdf更正

src/types/report.d.ts

@@ -1,119 +1,119 @@
-export interface IAbilityLevelDes {
-  behave: null | string;
-  education: null | string;
-  growth: null | string;
-  tactics: null | string;
-}
-
-interface IStory {
-  content: null | string;
-  description: null | string;
-  images: null | string[];
-  questions: null | string[];
-  videos: null | string[];
-}
-
-interface IQuestion {
-  content: string | null;
-  description: null | string;
-  images: null | string[];
-  question: string;
-  videos: null | string[];
-}
-
-export interface IDistrictData {
-  abilityId: string;
-  abilityLevelDes: IAbilityLevelDes;
-  abilityLevelId: string;
-  abilityLevelName: string;
-  abilityLibraryId: any;
-  abilityName: string;
-  activityDescription: string;
-  activityId: string;
-  activityName: string;
-  babyId: string;
-  createTime: string;
-  districtId: string;
-  districtName: string;
-  domainAbilityId: string;
-  domainAbilityName: any;
-  domainId: string;
-  domainName: string;
-  id: string;
-  questions: IQuestion[] | null;
-  questionCardUrl: null | string;
-  questionCardUrlList: null | string[];
-  slogan: string;
-  story: IStory | null;
-  subtitle: string;
-  valuationDate: string;
-  valuationId: string;
-  valuationRecordId: string;
-  valuationType: string;
-}
-
-interface IDistrict {
-  dataList: IDistrictData[];
-  districtName: string;
-  slogan: string;
-  subtitle: string;
-}
-
-interface ILevel {
-  abilityLevelName: string;
-  abilityName: string;
-}
-
-interface IAbility {
-  domainAbilityName: string;
-  level: ILevel;
-}
-
-export interface IDomain {
-  abilityList: IAbility[];
-  domainName: string;
-}
-
-export interface IRadarMap {
-  max: number;
-  name: string;
-  value: number;
-}
-
-export interface IComponent {
-  id: string | number;
-  view: any;
-  value?: any;
-}
-
-export interface IPage {
-  id: string | number;
-  componentList: IComponent[];
-}
-
-export interface IReport {
-  isSingle: boolean;
-  isTeacher: boolean;
-  babyId: string | null;
-  recordId: string | null;
-  babyInfo: IBabyInfo;
-  districtList: IDistrict[];
-  domainList: IDomain[];
-  radarMapList: IRadarMap[];
-  // 当前页面高度
-  pageHeight: number;
-  // 要渲染的页面列表
-  pageList: IPage[];
-  // 当前页面的组件列表
-  componentList: IComponent[];
-}
-
-export interface IBabyInfo {
-  babyName: null | string;
-  className: null | string;
-  headImg: null | string;
-  parentId: null | string;
-  schoolName: null | string;
-  sendNumber: null | number;
-  valuationType: null | string;
-}
+export interface IAbilityLevelDes {
+  behave: null | string;
+  education: null | string;
+  growth: null | string;
+  tactics: null | string;
+}
+
+interface IStory {
+  content: null | string;
+  description: null | string;
+  images: null | string[];
+  questions: null | string[];
+  videos: null | string[];
+}
+
+interface IQuestion {
+  content: string | null;
+  description: null | string;
+  images: null | string[];
+  question: string;
+  videos: null | string[];
+}
+
+export interface IDistrictData {
+  abilityId: string;
+  abilityLevelDes: IAbilityLevelDes;
+  abilityLevelId: string;
+  abilityLevelName: string;
+  abilityLibraryId: any;
+  abilityName: string;
+  activityDescription: string;
+  activityId: string;
+  activityName: string;
+  babyId: string;
+  createTime: string;
+  districtId: string;
+  districtName: string;
+  domainAbilityId: string;
+  domainAbilityName: any;
+  domainId: string;
+  domainName: string;
+  id: string;
+  questions: IQuestion[] | null;
+  questionCardUrl: null | string;
+  questionCardUrlList: null | string[];
+  slogan: string;
+  story: IStory | null;
+  subtitle: string;
+  valuationDate: string;
+  valuationId: string;
+  valuationRecordId: string;
+  valuationType: string;
+}
+
+interface IDistrict {
+  dataList: IDistrictData[];
+  districtName: string;
+  slogan: string;
+  subtitle: string;
+}
+
+interface ILevel {
+  abilityLevelName: string;
+  abilityName: string;
+}
+
+interface IAbility {
+  domainAbilityName: string;
+  level: ILevel;
+}
+
+export interface IDomain {
+  abilityList: IAbility[];
+  domainName: string;
+}
+
+export interface IRadarMap {
+  max: number;
+  name: string;
+  value: number;
+}
+
+export interface IComponent {
+  id: string | number;
+  view: any;
+  value?: any;
+}
+
+export interface IPage {
+  id: string | number;
+  componentList: IComponent[];
+}
+
+export interface IReport {
+  isSingle: boolean;
+  isTeacher: boolean;
+  babyId: string | null;
+  recordId: string | null;
+  babyInfo: IBabyInfo;
+  districtList: IDistrict[];
+  domainList: IDomain[];
+  radarMapList: IRadarMap[];
+  // 当前页面高度
+  pageHeight: number;
+  // 要渲染的页面列表
+  pageList: IPage[];
+  // 当前页面的组件列表
+  componentList: IComponent[];
+}
+
+export interface IBabyInfo {
+  babyName: null | string;
+  className: null | string;
+  headImg: null | string;
+  parentId: null | string;
+  schoolName: null | string;
+  sendNumber: null | number;
+  valuationType: null | string;
+}

src/utils/exportPdf.js

@@ -84,13 +84,13 @@ export const exportPDF = async (_semesterReport, progressCb) => {
         { text: `${text}`, 
         fontSize: H4,
         color: '#1a2c5e',
-        margin: [0, 15, 0, 15],
+        margin: [0, 15, 0, 0],
     }) 
 
     const H5Template = (text) => (
         { text: `${text}`, 
         fontSize: H5,
-        margin: [0, 15, 0, 4],
+        margin: [0, 2, 0, 4],
         lineHeight: 1
     }) 
 
@@ -349,10 +349,8 @@ export const exportPDF = async (_semesterReport, progressCb) => {
         H1Template('行为记录'),
         ..._data.domainDataList.map( (item, index) => {
             const title = H2Template(item.domainName)
-
             const radarChart = radarImgTemplate(item.radarChartBase64)
             const recordList = []
-
             item.recordList.map( record => {
                 recordList.push(H3Template('能力名称：' + record.abilityName))
                 recordList.push(H4Template('记录日期：' + record.recordDate))
@@ -537,7 +535,7 @@ export const exportClazzPDF = async (clazzData, cb) => {
         const H1Template = (text) => (
             { text: `${text}`, 
             fontSize: H1, 
-            margin: [0, 40, 0, 4], 
+            margin: [0, 20, 0, 4], 
             color: "blue",  
             bold: true, 
             font: 'STXINGKA.TTF', 
@@ -570,7 +568,7 @@ export const exportClazzPDF = async (clazzData, cb) => {
         const H5Template = (text) => (
             { text: `${text}`, 
             fontSize: H5,
-            margin: [0, 15, 0, 4],
+            margin: [0, 8, 0, 4],
             lineHeight: 1
         }) 
 
@@ -604,11 +602,11 @@ export const exportClazzPDF = async (clazzData, cb) => {
         }
 
         const coverInfo = {
-            text: `${_clazzData.baseData.schoolName}\n班级：${_clazzData.baseData.className}\n成长阶段：${_clazzData.baseData.startTimeFormat}-${_clazzData.baseData.endTimeFormat}`,
+            text: `${_clazzData.baseData.schoolName}\n${_clazzData.baseData.className}\n${_clazzData.baseData.startTimeFormat}-${_clazzData.baseData.endTimeFormat}`,
             alignment: 'center',
             margin: [0, 50, 0, 200],
             // font: 'STXINGKA.TTF',
-            fontSize: 26
+            fontSize: 20
         }
 
 
@@ -675,12 +673,12 @@ export const exportClazzPDF = async (clazzData, cb) => {
             emptyTemplate(),
             H2Template("学生各领域表现阶段汇总"),
             emptyTemplate(),
-            imgTemplate(_clazzData.studentPng),
-            emptyTemplate(),
+            _clazzData.calclHtmlToPngCount === 0 ?  imgTemplate(_clazzData.studentPng) : _clazzData.studentPngs.map( item => imgTemplate(item)),
+            brakePage,
             H2Template("数据说明"),
             emptyTemplate(),
             H4Template(dataDesc)
-        ]   
+        ].flat(Infinity)
     }
  
 

src/views/customize/ClazzReport.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="class-report" >
     <HeaderPart ></HeaderPart>
-
     <!-- 封面 -->
     <div class="rd-info" :style="{ backgroundImage: `url(${getImageUrl('semester-bg')})`, backgroundColor: '#fff' }" >
       <div class="rd-info-cover" :style="{ backgroundImage: `url(${getImageUrl('empty-cover')})`}">
@@ -72,7 +71,7 @@
           学生各领域表现阶段汇总
         </div>
         <div class="total-scene" >
-          <!-- <div class="total-table" >
+          <div class="total-table-small htmlToPng" id="htmlToPng" >
             <div  class="total-table-item"  >
               <div
                 :class="['total-table-item-cell', index === 0 ? 'total-table-item-title border-white' : '']"
@@ -92,23 +91,28 @@
               </div>
             </div>
             <div  class="total-table-item"  >
-              <div class="performances-title border-white">
+              <div class="performances-title">
                 观察进阶
               </div>
               <div class="performances-item-content" >
                 <div class="performances-item-conten-card" v-for="(item, index) in  tableData.performances.data" :key="index">
-                  <div  :class="['total-table-item-cell', index === 0 ? 'border-white performances-subtitle': '']"  v-for="(_, index) in item" :key="index"  >
+                  <div 
+                    :class="['total-table-item-cell-small', index === 0 ? 'border-white performances-subtitle first-cell': '']"  
+                    v-for="(_, index) in item" 
+                    :key="index"
+                    >
                     {{_}}
                   </div>
                 </div>
               </div>
             </div>
-          </div> -->
-          <div class="total-table-small" id="htmlToPng" >
+          </div>
+          <span class="htmlToPng-copy" v-for="count in calclHtmlToPngCount" :key="count" >
+            <div class="total-table-small" :id="`htmlToPng${count}`" >
             <div  class="total-table-item"  >
               <div
                 :class="['total-table-item-cell', index === 0 ? 'total-table-item-title border-white' : '']"
-                v-for="(item, index) in tableData.name.data" 
+                v-for="(item, index) in tableData.name.data.slice( (count - 1) * 12,  count * 12)" 
                 :key="index" 
               >
                 {{item}}
@@ -117,7 +121,7 @@
             <div  class="total-table-item"  >
               <div
                 :class="['total-table-item-cell', index === 0 ? 'total-table-item-title border-white' : '']"
-                v-for="(item, index) in tableData.record.data" 
+                v-for="(item, index) in tableData.record.data.slice( (count - 1) * 12,  count * 12)" 
                 :key="index"
               >
                 {{item}}
@@ -131,7 +135,7 @@
                 <div class="performances-item-conten-card" v-for="(item, index) in  tableData.performances.data" :key="index">
                   <div 
                     :class="['total-table-item-cell-small', index === 0 ? 'border-white performances-subtitle first-cell': '']"  
-                    v-for="(_, index) in item" 
+                    v-for="(_, index) in item.slice( (count - 1) * 12,  count * 12)" 
                     :key="index"
                     >
                     {{_}}
@@ -140,6 +144,7 @@
               </div>
             </div>
           </div>
+          </span>
         </div>
       </div>
       <div class="report-clazz-base data-desc">
@@ -159,8 +164,8 @@
 <script lang='ts'  setup >
 // @ts-nocheck
 import HeaderPart from './components/HeaderPart.vue'
-import { getImageUrl, getTestTeachToken } from "@/utils";
-import { ref, onMounted, nextTick } from 'vue'
+import { getImageUrl, getTestTeachToken, getAppToken } from "@/utils";
+import { ref, onMounted, nextTick, computed } from 'vue'
 import * as echarts from 'echarts'
 import exportButton from '@/components/exportButton.vue'
 import { useClazzStore  } from '@/store/index'
@@ -268,6 +273,8 @@ const { p } = useRoute().query;
   observeChart.value.setOption(options);
  }
 
+ const calclHtmlToPngCount = computed(() => Math.ceil(tableData.value.name.data.length / 12))
+
  const htmlToPng = () => {
   return new Promise((resolve) => {
     html2canvas(document.querySelector("#capture")!).then(canvas => {
@@ -276,13 +283,12 @@ const { p } = useRoute().query;
   })
  }
 
- const studentChartHtmlToPng = () => {
+ const studentChartHtmlToPng = (id) => {
   return new Promise((resolve) => {
     const style = document.createElement('style');
     document.head.appendChild(style);
     style.sheet?.insertRule('body > div:last-child img { display: inline-block; }');
-
-    html2canvas(document.querySelector("#htmlToPng")!).then(canvas => {
+    html2canvas(document.querySelector(id)!).then(canvas => {
       style.remove();
       resolve(canvas.toDataURL(''))
     });
@@ -296,7 +302,12 @@ const { p } = useRoute().query;
  const exportReport = () => {
   nextTick(async () => {
     loading.value = true
-    console.log('recordChart:', recordChart);
+    const studentPngs = []
+    for (let index = 0; index < calclHtmlToPngCount.value; index++) {
+      studentPngs.push( await studentChartHtmlToPng(`#htmlToPng${index + 1}`))
+    }
+    console.log(studentPngs);
+
     const $par = {
       baseData: baseData.value,
       clazzDomainData: clazzDomainData.value, 
@@ -305,8 +316,12 @@ const { p } = useRoute().query;
       clazzDomainChart: recordChart.value.getDataURL(),
       clazzSceneChart: observeChart.value.getDataURL(),
       basePng: await htmlToPng(),
-      studentPng: await studentChartHtmlToPng(),
+      studentPng: await studentChartHtmlToPng('#htmlToPng'),
+      calclHtmlToPngCount: calclHtmlToPngCount.value,
+      studentPngs: studentPngs,
     }
+    console.log('$par:', $par);
+    
     exportClazzPDF($par, async (progress: number) => {
       const r = (progress * 100).toFixed(0) 
       if (r === '100') {
@@ -318,10 +333,11 @@ const { p } = useRoute().query;
 }
 
  onMounted( async () => {
-  // await getAppToken()
-  await getTestTeachToken()
-  // const $par = JSON.parse(decodeURIComponent(atob(p)))
-  const $par = {"classIds":["1655822889577734146"],"gradeSemesterIds":["00","11","01","-10","-11","20","10","21"],"schoolId":"1304705665728421889","teacherIds":["1450638512771702786","1436187006844682241","1304705367924449281","1711187837184294914","1800414891962654721","1778693522847088641"]}
+  await getAppToken()
+  // await getTestTeachToken()
+  const $par = JSON.parse(decodeURIComponent(atob(p)))
+  // const $par = JSON.parse(decodeURIComponent(atob('eyJjbGFzc0lkcyI6WyIxNzc2OTA4Mjc2MDMxOTkxODEwIl0sImdyYWRlU2VtZXN0ZXJJZHMiOlsiMDAiLCIxMSIsIjAxIiwiLTEwIiwiLTExIiwiMjAiLCIxMCIsIjIxIl0sInNjaG9vbElkIjoiMTc3NjkwNzcwMzQyOTgwNDAzMyIsInRlYWNoZXJJZHMiOlsiMTc3NjkxMTk2MDU2MDI4MzY1MCIsIjE3NzY5MDk4MzQ2ODU2ODk4NTciLCIxNzc2OTEyMDgwOTk1NTI4NzA2IiwiMTUxMTk3NTE1NjI0OTQ1MjU0NiJdfQ==')))
+  // const $par = {"classIds":["1655822889577734146"],"gradeSemesterIds":["00","11","01","-10","-11","20","10","21"],"schoolId":"1304705665728421889","teacherIds":["1450638512771702786","1436187006844682241","1304705367924449281","1711187837184294914","1800414891962654721","1778693522847088641"]}
   getClazzBase($par)
   getClazzDomain($par).then(() => {
 
@@ -490,12 +506,14 @@ const { p } = useRoute().query;
       }
       .total-scene {
         display: flex;
+        position: relative;
         .total-table-small {
           width: 100%;
           overflow: hidden;
           overflow-x: scroll;
           display: flex;
           font-size: 10px;
+          background-color: #fff;
            .total-table-item {
             .performances-title {
               width: 100%;
@@ -576,6 +594,15 @@ const { p } = useRoute().query;
           }
           
         }
+        .htmlToPng {
+          position: relative;
+          z-index: 2;
+        }
+        .htmlToPng-copy {
+          position: absolute;
+          z-index: 1;
+          // visibility: hidden;
+        }
       }
     }
   }

src/views/customize/SingleReport.vue

@@ -146,7 +146,7 @@ const { getSingleRecord, sendSingleRecord, joinSemesterReport } = customizeStore
 const showConfirm = ref(false);
 
 const singleRecord = computed<ISingleRecord>(() => {
-  return customizeStore.singleRecord;
+  // return customizeStore.singleRecord;
   return  {
         "recordId": "1825715384938938369",
         "babyId": "1778357748956053505",
@@ -352,7 +352,7 @@ const exportWord = () => {
     abilitys: singleRecord.value.domainList.map(item => {
       return item.abilityList.map(_ => {
         return {
-          name: _.abilityName + '\n',
+          name: _.abilityName,
           behave: _.descriptionExtra?.behave
         }
       })