基础版pdf预览样式优化和百分比计算(分母按25算，分子按avgScore算)

pagesHome/pdf.vue

@@ -89,8 +89,8 @@
 								<view class="vbtp-right" :style="{'border':'1px solid '+item.bcolor}">
 									<view class="vbtpr-title">{{ ss.question||'' }}</view>
 									<view class="vbtpr-jd">
-										<view class="vj_num" :style="{'width':(4/5*100)+'%','background':item.pfztfb}"></view>   
-										<view class="vj-val" :style="{'border':'1px solid '+item.bcolor,'left':'calc('+(4/5*100)+'% - 12px)','box-shadow':'0px 2px 6px 0px '+item.bcolor}">{{ 4 }}</view>
+										<view class="vj_num" :style="{'width':((ss.avgScore>25?25:ss.avgScore)/25*100)+'%','background':item.pfztfb}"></view>   
+										<view class="vj-val adfacjc" :style="{'border':'1px solid '+item.bcolor,'left':'calc('+((ss.avgScore>25?25:ss.avgScore)/25*100)+'% - 12px)','box-shadow':'0px 2px 6px 0px '+item.bcolor}">{{ (ss.avgScore>25?25:ss.avgScore) }}</view>
 									</view>
 								</view>
 							</view>
@@ -225,29 +225,6 @@
 		this.getReportData();
 	},
     mounted() {
-        this.reportData = {
-            dimensionAnalysis: [
-				{title:'宗旨与动机',bcolor:'#E4D2E1',titlecolor:'#BA8EB4',wddf:'linear-gradient( 90deg, #F5EFF5 0%, #FAF2F9 100%)',
-					pfztfb:'linear-gradient( 270deg, #BA8EB4 0%, #761E6A 100%)',
-					desc:`「宗旨与动机」维度，我们旨在探究是否存在一个清晰的存在理由和明确的方向，能够激发团队成员的动力并吸引他们的想象力，以及个人与集体的身份认同是否围绕共同的目标，并达成一致。`},
-				{title:'外部流程、系统与结构',bcolor:'#B3DEDE',titlecolor:'#80C8C8',wddf:'linear-gradient( 90deg, #E8F5F5 0%, #F0F8F8 100%)',
-					pfztfb:'linear-gradient( 90deg, #009191 0%, #80C8C8 100%)',
-					desc:`「外部流程、系统与结构」维度，我们旨在探究团队如何与各种利益相关者互动，他们与团队的利益相关方各自如何寻求了解对方，以及现有系统和流程的有效性，以帮助管理不同的期望和需求。`},
-				{title:'人际关系',bcolor:'#FFDF73',titlecolor:'#FFEBA8',wddf:'linear-gradient( 90deg, rgba(255,215,80,0.34) 0%, rgba(251,225,130,0.09) 100%)',
-					pfztfb:'linear-gradient( 90deg, #FFD750 0%, #FFEBA8 100%)',
-					desc:`「人际关系」维度，我们旨在探究团队成员如何相互交流、信任程度、尊重和关心的程度，以及团队成员之间的关系如何促进（或破坏）协作。`},
-                {title:'内部流程、系统与结构',bcolor:'#B3DEDE',titlecolor:'#CDE9EA',wddf:'linear-gradient( 90deg, #E8F5F5 0%, #F0F8F8 100%)',
-                    pfztfb:'linear-gradient( 270deg, #CDE9EA 0%, #4EB2B2 100%)',
-                    desc:`「内部流程、系统与结构」维度，我们旨在探究团队如何在平衡责任与自主权方面进行协作。我们关注团队的敏捷程度、沟通方式以及决策过程的有效性。`},
-                {title:'学习',bcolor:'#E6EAED',titlecolor:'#D7E5FA',wddf:'linear-gradient( 270deg, #F2F5F9 0%, #E3ECF8 100%)',
-                    pfztfb:'linear-gradient( 270deg, #D7E5FA 0%, #AFCDF5 100%)',
-                    desc:`「学习」维度，我们旨在探究团队如何提高其绩效、技能和资源以应对当前和未来的任务。我们还希望了解团队如何管理能力和提高效率。`},
-                {title:'领导力',bcolor:'#E6EAED',titlecolor:'#8093A3',wddf:'linear-gradient( 270deg, #F2F4F6 0%, #EDF0F2 100%)',
-                    pfztfb:'linear-gradient( 270deg, #8093A3 0%, #002846 100%)',
-                    desc:`「领导力」维度，我们旨在探究领导素质和行为如何对团队功能和其他因素产生调节影响，以及这是积极的还是消极的。`}
-            ]
-        };
-		
 		this.calculateScaleAndPosition();
 		uni.onWindowResize(() => {
 			this.calculateScaleAndPosition();
@@ -260,7 +237,7 @@
 				this.reportData = res.data;
 				const tempDimensionAnalysis = [
 					{title:'宗旨与动机',bcolor:'#E4D2E1',titlecolor:'#BA8EB4',wddf:'linear-gradient( 90deg, #F5EFF5 0%, #FAF2F9 100%)',
-						pfztfb:'linear-gradient( 270deg, #BA8EB4 0%, #761E6A 100%)',
+						pfztfb:'linear-gradient( 90deg, #761E6A 0%, #BA8EB4 100%)',
 						desc:`「宗旨与动机」维度，我们旨在探究是否存在一个清晰的存在理由和明确的方向，能够激发团队成员的动力并吸引他们的想象力，以及个人与集体的身份认同是否围绕共同的目标，并达成一致。`},
 					{title:'外部流程、系统与结构',bcolor:'#B3DEDE',titlecolor:'#80C8C8',wddf:'linear-gradient( 90deg, #E8F5F5 0%, #F0F8F8 100%)',
 						pfztfb:'linear-gradient( 90deg, #009191 0%, #80C8C8 100%)',
@@ -269,13 +246,13 @@
 						pfztfb:'linear-gradient( 90deg, #FFD750 0%, #FFEBA8 100%)',
 						desc:`「人际关系」维度，我们旨在探究团队成员如何相互交流、信任程度、尊重和关心的程度，以及团队成员之间的关系如何促进（或破坏）协作。`},
 					{title:'内部流程、系统与结构',bcolor:'#B3DEDE',titlecolor:'#CDE9EA',wddf:'linear-gradient( 90deg, #E8F5F5 0%, #F0F8F8 100%)',
-						pfztfb:'linear-gradient( 270deg, #CDE9EA 0%, #4EB2B2 100%)',
+						pfztfb:'linear-gradient( 90deg, #4EB2B2 0%, #CDE9EA 100%)',
 						desc:`「内部流程、系统与结构」维度，我们旨在探究团队如何在平衡责任与自主权方面进行协作。我们关注团队的敏捷程度、沟通方式以及决策过程的有效性。`},
 					{title:'学习',bcolor:'#E6EAED',titlecolor:'#D7E5FA',wddf:'linear-gradient( 270deg, #F2F5F9 0%, #E3ECF8 100%)',
-						pfztfb:'linear-gradient( 270deg, #D7E5FA 0%, #AFCDF5 100%)',
+						pfztfb:'linear-gradient( 90deg, #AFCDF5 0%, #D7E5FA 100%)',
 						desc:`「学习」维度，我们旨在探究团队如何提高其绩效、技能和资源以应对当前和未来的任务。我们还希望了解团队如何管理能力和提高效率。`},
 					{title:'领导力',bcolor:'#E6EAED',titlecolor:'#8093A3',wddf:'linear-gradient( 270deg, #F2F4F6 0%, #EDF0F2 100%)',
-						pfztfb:'linear-gradient( 270deg, #8093A3 0%, #002846 100%)',
+						pfztfb:'linear-gradient( 90deg, #002846 0%, #8093A3 100%)',
 						desc:`「领导力」维度，我们旨在探究领导素质和行为如何对团队功能和其他因素产生调节影响，以及这是积极的还是消极的。`}
 				]
 				if(this.reportData&&this.reportData.dimensionAnalysis){
@@ -309,7 +286,7 @@
 		    try {
 		        const ztzdfxImgPromise = this.downloadZtzdfxImg();
 		        const dimensionImagePromises = this.reportData.dimensionAnalysis.map(d => {
-		            return this.generateScoreImage(d);
+		            return this.generateScoreImage(d,d.scoreSpreads||[]);
 		        });
 		
 		        const allImageUrls = await Promise.all([
@@ -328,13 +305,13 @@
 		    }
 		},
 		// 绘制主函数
-		async generateScoreImage(dimensionData) {
+		async generateScoreImage(dimensionData,scoreData) {
 			return new Promise(resolve=>{
 				console.log('开始生成图片...');
 				// --- 1. 定义尺寸和样式 ---
 				const canvasWidth = 588; // .v2-box 的宽度大约是 630 - 20*2(padding) - 1*2(border) = 588
 				const itemHeight = 49; // 每个评估项的高度
-				const totalHeight = itemHeight * this.scoreData.length;
+				const totalHeight = itemHeight * scoreData.length;
 				// 调整为整数，避免边框模糊
 				const canvasHeight = totalHeight;
 						
@@ -366,8 +343,8 @@
 				        context.fillRect(0, 0, canvasWidth, canvasHeight);
 						
 				        // --- 5. 循环绘制每一项 ---
-				        for (let i = 0; i < this.scoreData.length; i++) {
-				            const item = this.scoreData[i];
+				        for (let i = 0; i < scoreData.length; i++) {
+				            const item = scoreData[i];
 				            const yPos = i * itemHeight;
 				            // 注意：这里不再需要 await，因为 canvas 2d 绘图是同步的
 				            this.drawScoreItem(context, item, yPos, canvasWidth, itemHeight, dimensionData);
@@ -448,7 +425,7 @@
 			ctx.font = '10px sans-serif';
 			ctx.textAlign = 'center';
 			ctx.textBaseline = 'middle';
-			this.drawWrappedText(ctx, scoreItem.title, leftBoxWidth / 2, y + height / 2, 20, leftBoxWidth - 20); // 左右留10px边距
+			this.drawWrappedText(ctx, scoreItem.theme, leftBoxWidth / 2, y + height / 2, 20, leftBoxWidth - 20); // 左右留10px边距
 		
 			// 2. --- 绘制右侧部分 ---
 			// 绘制右侧外边框
@@ -460,7 +437,7 @@
 			const descLineHeight = 16;
 			const descMaxWidth = rightBoxWidth - rightPadding * 2;
 			ctx.font = '9px sans-serif'; // 设置好字体用于计算
-			const descHeight = this.calculateWrappedTextHeight(ctx, scoreItem.desc, descLineHeight, descMaxWidth);
+			const descHeight = this.calculateWrappedTextHeight(ctx, scoreItem.question, descLineHeight, descMaxWidth);
 			
 			const spacing = 7; // 文字与进度条间距 (要求 4)
 			const progressBarHeight = 6; // 进度条高度 (要求 3)
@@ -476,12 +453,12 @@
 			ctx.font = '9px sans-serif';
 			ctx.textAlign = 'left';
 			ctx.textBaseline = 'top'; // 基线设为 top 方便计算
-			this.drawWrappedText(ctx, scoreItem.desc, rightBoxX + rightPadding, contentStartY, descLineHeight, descMaxWidth);
+			this.drawWrappedText(ctx, scoreItem.question, rightBoxX + rightPadding, contentStartY, descLineHeight, descMaxWidth);
 		
 			// 绘制进度条 (要求 3)
 			const progressBarY = contentStartY + descHeight + spacing;
 			const progressBarWidth = rightBoxWidth - rightPadding * 2;
-			const scoreWidth = (scoreItem.score / 5) * progressBarWidth;
+			const scoreWidth = ((scoreItem.avgScore>25?25:scoreItem.avgScore)/ 25) * progressBarWidth;
 			const barRadius = 3;
 		
 			// 绘制灰色背景
@@ -512,7 +489,7 @@
 			const scoreBoxRadius = 4;
 			
 			ctx.font = `bold ${scoreFontSize}px sans-serif`;
-			const scoreTextMetrics = ctx.measureText(scoreItem.score);
+			const scoreTextMetrics = ctx.measureText(scoreItem.avgScore>25?25:scoreItem.avgScore);
 			const scoreBoxWidth = scoreTextMetrics.width + scorePaddingX * 2;
 			const scoreBoxHeight = scoreFontSize + scorePaddingY * 2;
 		
@@ -548,7 +525,7 @@
 			ctx.font = `bold ${scoreFontSize}px sans-serif`;
 			ctx.textAlign = 'center';
 			ctx.textBaseline = 'middle';
-			ctx.fillText(scoreItem.score, scoreBoxX + scoreBoxWidth / 2, scoreBoxY + scoreBoxHeight / 2);
+			ctx.fillText((scoreItem.avgScore>25?25:scoreItem.avgScore), scoreBoxX + scoreBoxWidth / 2, scoreBoxY + scoreBoxHeight / 2);
 		},
 		// 辅助函数：绘制自动换行的文字
 		drawWrappedText(ctx, text, x, y, lineHeight, maxWidth) {

static/pdf.scss

@@ -1355,9 +1355,10 @@
 						top: 0;
 					}
 					.vj-val {
+                        width: 24px;
+                        height: 20px;
 						background: #ffffff;
 						border-radius: 4px;
-						padding: 4px 7px;
 						font-family: DIN, DIN;
 						font-weight: bold;
 						font-size: 12px;