团队版报告最新需求设计页面和样式修改(canvas未生成版)

pagesHome/pdfZyb.vue

@@ -39,15 +39,15 @@
 			</view>
 			<!-- 介绍 -->
 			<view class="cd_box" style="border: none">
-				<view class="v2-top adfacjb" :style="{'background-image':'url(https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/intro_title_bg.png)'}">
-					<view class="vt-left" style="color: #FFFFFF;">介绍<span>PERILL模型简介</span></view>
+				<view class="v2-top adfacjb" :style="{'background-image':'url(https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/'+'intro'+'_title_bg.png)','padding':'0 8px 0 24px'}">
+					<view class="vt-left" style="color: #FFFFFF;">PERILL模型介绍</view>
 					<view class="vt-right">团队发展动态评估报告(团队版) </view>
 				</view>
-				<view class="v2-box" style="border: 1px solid #33A7A7;">
+				<view class="v2-box">
 					<img class="vb-img1" :src="'https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/intro_box_img1.png'">
 					<view class="v2-p">PERILL团队发展动态评估源于团队教练辅导领域的先驱、管理思维与团队绩效领域的权威、全球顶尖团队教练David Clutterbuck教授及其团队通过深入研究，提炼出影响团队绩效的140多个基于实证的因素，整合而成的团队评估和提升工具-PERILL模型。</view>
 					<view class="v2-p" style="margin-top: 8px;">创衡国际基于10多年来在全球与200多家具有前瞻性的国际公司以及国内具有行业代表性公司的合作经验，结合CCMI的PERILL评估工具，在中国推出的团队发展动态评估系统，旨在帮助团队更全面、更有效地从六个维度评估团队的发展现状，为支持团队成为高价值创造团队提供全景式的客观评估。</view>
-					<view class="v2-p" style="margin-top: 8px;">PERILL团队发展动态评估(团队版)的主体内容由<span>{{ reportData.teamInfo.questionCount||0 }}</span>个关于团队的描述组成。</view>
+					<view class="v2-p" style="margin-top: 8px;">PERILL团队发展动态评估(团队版)的主体内容由<span>{{ reportData.teamInfo.questionCount }}</span>个关于团队的描述组成。</view>
 				</view>
 				<view class="v2-six">
 					<view class="vsix-title">PERILL六大纬度</view>
@@ -68,14 +68,14 @@
 			</view>
 			<!-- 总体评估分析 -->
 			<view class="cd_box adffc" style="border: none;">
-				<view class="v2-top adfacjb" :style="{'background-image':'url(https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/intro_top_title_bg2.png)'}">
+				<view class="v2-top adfacjb" :style="{'background-image':'url(https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/'+'intro'+'_top_title_bg2.png)'}">
 					<view class="vt-left">总体评估分析</view>
 					<view class="vt-right">团队发展动态评估报告(团队版) </view>
 				</view>
 				<view class="v2-box" style="border: 1px solid #33A7A7;">
 					<img class="vb-img1" :src="'https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/intro_box_img1.png'">
 					<view class="v2-p2">报告的核心是PERILL评估分析下的整体团队表现。这包括团队在PERILL模型每个关键要素上的综合得分，通过结合得分和置信指数，我们能够展示出高功能和低功能领域。</view>
-					<view class="v2-p2" style="margin-top: 10px;font-weight: 400;color: #002846;font-size: 10px;">下面图中的位置标记显示了团队按影响力划分的总分。</view>
+					<view class="v2-p2" style="margin-top: 2px;font-weight: 400;color: #002846;font-size: 10px;">下面图中的位置标记显示了团队按影响力划分的总分。</view>
 					<view class="vb-category">
 						<view class="vbc-pre adfac">
 							<view class="vbcp-yuan y1"></view>
@@ -97,77 +97,98 @@
 					<view style="width:360px;height:360px;margin: 0 auto;" class="pdfEchart">
 						<l-echart ref="ztzdfxRef" :canvas2d="true" @finished="initZtzdfxChart" style="width: 100%;height: 100%;"></l-echart>
 					</view>
-					<view class="v2b-tip-title" style="color: #199C9C;">注: 关于认同度、重要性分、影响力分的定义</view>
+					<view class="v2b-tip-title" style="color: #002846;">注: 关于认同度、重要性分、影响力分的定义</view>
 					<view class="v2b-tip-memo">
 						a.“认同度分”，指标逻辑为团队全体对当前主题所对应各问卷题目认同度评分的均值，用来表征团队对这一主题问卷所陈述内容与团队情况的相符合程度的平均认知，最高分：5分，最低分：0分；<br>
 						b.“重要分”，指标逻辑为根据团队全体对当前主题所对应各问卷题目重要性评分的均值，用来表征团队对这一主题问卷所陈述内容对于团队重要性的平均认知，最高分：5分，最低分：0分；<br>
-						c.“影响力分”，指标逻辑为团队全体对当前主题所对应各问卷题目的认同度评分与重要性评分乘积的均值，用来表征团队对这一主题问卷所陈述内容对于团队的影响力水平，最高分：25分，最低分：0分；
-					</view>
+						c.“影响力分”，指标逻辑为团队全体对当前主题所对应各问卷题目的认同度评分与重要性评分乘积的均值，用来表征团队对这一主题问卷所陈述内容对于团队的影响力水平，最高分：25分，最低分：0分；</view>
 					<view class="v2b-title">评估结果</view>
 					<view class="v2b-p" v-html="(reportData.totalDiagnosticOutput||'').replaceAll('\n\n','<br>')"></view>
-					<view class="v2b-title">评估建议</view>
+				</view>
+			</view>
+			<!-- 总体评估分析 评估建议-->
+			<view class="cd_box adffc" style="border: none;">
+				<view class="v2-top adfacjb" :style="{'background-image':'url(https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/intro_top_title_bg2.png)'}">
+					<view class="vt-left">总体评估分析</view>
+					<view class="vt-right">团队发展动态评估报告(团队版) </view>
+				</view>
+				<view class="v2-box" style="border: 1px solid #33A7A7;">
+					<img class="vb-img1" :src="'https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/intro_box_img1.png'">
+					<view class="v2b-title" style="margin-top: 0;">评估建议</view>
 					<view class="v2b-p" v-html="(reportData.totalDiagnosisSuggest||'').replaceAll('\n\n','<br>')"></view>
 				</view>
 			</view>
 			<!-- 多维度 -->
 			<canvas type="2d" canvas-id="score-canvas" id="score-canvas" class="offscreen-canvas"></canvas>
 			<template v-if="reportData&&reportData.dimensionAnalysis&&reportData.dimensionAnalysis.length">
-				<view class="cd_box adffc" style="border: none;"
-					v-for="(item,index) in reportData.dimensionAnalysis" :key="index">
-					<view class="v2-top adfacjb":style="{'background-image':'url('+'https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/'+typeDict[item.title]+'_title_bg.png)'}">
-						<view class="vt-left" :class="{'black':(item.title=='人际关系'||item.title=='学习')}">{{ item.title }}</view>
-						<view class="vt-right">团队发展动态评估报告(团队版) </view>
-					</view>
-					<view class="v2-box" :style="{'border':'none','padding':0}">
-						<view class="v2-p2">{{ item.desc }}</view>
-						<view class="v2-subp">主题均分</view>
-						<view class="vb-table adf" :style="{'border':'1px solid #E6EAED','margin-top':'12px'}">
-							<view class="vbt2-left">
-								<view class="vbt2l-th adf" :style="{'background':item.thbgcolor,'color':item.thtextcolor}">
-									<view class="vbt2l-th-title adfac">主题</view>
-									<view class="vbt2l-th-score adfacjc">影响力分</view>
-								</view>
-								<view class="vbt2l-pre" v-for="(ss,si) in item.scoreSpreads" :key="si">
-									<view class="vbt2l-pre-l">
-										<view class="vbt2l-pre-l-title" :style="{'color':item.titlecolor}">{{ ss.theme||'' }}</view>
-										<view class="vbt2l-pre-l-tip">{{ ss.question||'' }}</view>
+				<block v-for="(item,index) in reportData.dimensionAnalysis" :key="index">
+					<view class="cd_box adffc" style="border: none;">
+						<view class="v2-top adfacjb" :style="{'background-image':'url(https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/'+(typeDict[item.title]||'zzdj')+'_title_bg.png)','padding':'0 8px 0 24px'}">
+							<view class="vt-left" :class="{'black':(item.title=='人际关系'||item.title=='学习')}">{{ item.title }}</view>
+							<view class="vt-right">团队发展动态评估报告(团队版) </view>
+						</view>
+						<view class="v2-box" :style="{'border':'none','padding':0}">
+							<view class="v2-p2">{{ item.desc }}</view>
+							<view class="vb-table adf" :style="{'border':'1px solid '+item.bordercolor,'margin-top':'12px'}">
+								<view class="vbt2-left">
+									<view class="vbt2l-th adf" :style="{'background':item.thbgcolor,'color':item.thtextcolor}">
+										<view class="vbt2l-th-title adfac">主题</view>
+										<view class="vbt2l-th-score adfacjc">影响力分</view>
+									</view>
+									<view class="vbt2l-pre" v-for="(ss,si) in item.scoreSpreads" :key="si" :style="{'border-bottom':'1px solid '+item.bordercolor}">
+										<view class="vbt2l-pre-l adffc">
+											<view class="vbt2l-pre-l-title" :style="{'color':item.titlecolor}">{{ ss.theme||'' }}</view>
+											<view class="vbt2l-pre-l-tip">{{ ss.question||'' }}</view>
+										</view>
+										<view class="vbt2l-pre-r adfacjc">{{ ss.regular.avgScore||0 }}</view>
 									</view>
-									<view class="vbt2l-pre-r adfacjc">{{ ss.regular.avgScore||0 }}</view>
-								</view>
-							</view>
-							<view class="vbt2-right adffc">
-								<view class="vbt2r-th adf" :style="{'background':item.thbgcolor,'color':item.thtextcolor}">
-									<view class="vbt2r-pre adfacjc">认同度分</view>
-									<view class="vbt2r-pre adfacjc">重要性分</view>
 								</view>
-								<view class="vbt2r-tb adf">
-									<view class="vbt2r-tb-lines adf">
-										<view class="vbt2r-tb-lines-pre" v-for="item in 12" :key="item"></view>
+								<view class="vbt2-right adffc">
+									<view class="vbt2r-th adf" :style="{'background':item.thbgcolor,'color':item.thtextcolor}">
+										<view class="vbt2r-pre adfacjc">认同度分</view>
+										<view class="vbt2r-pre adfacjc">重要性分</view>
 									</view>
-									<view class="vbt2r-tb-l adffc">
-										<view class="vbt2r-tb-l-pre red adfac" v-for="(ss,si) in item.scoreSpreads" :key="si">
-											<view class="vbt2r-tb-l-pre-zzt red" :style="{'width':(ss.regular.avgAgreement/6*100)+'%'}"></view>
+									<view class="vbt2r-tb adf">
+										<view class="vbt2r-tb-l adffc">
+											<view class="vbt2r-tb-l-pre red adfac" v-for="(ss,si) in item.scoreSpreads" :key="si" :style="{'border-bottom':'1px solid '+item.bordercolor}">
+												<view class="vbt2r-tb-l-pre-bg"></view>
+												<view class="vbt2r-tb-l-pre-zzt red" :style="{'width':(ss.regular.avgAgreement/6*100)+'%'}">
+													<view class="vbt2r-tb-l-pre-zzt-numl">{{ ss.regular.avgAgreement||0 }}</view>
+												</view>
+											</view>
 										</view>
-									</view>
-									<view class="vbt2r-tb-l">
-										<view class="vbt2r-tb-l-pre green adfac" v-for="(ss,si) in item.scoreSpreads" :key="si">
-											<view class="vbt2r-tb-l-pre-zzt green" :style="{'width':(ss.regular.avgVital/6*100)+'%'}"></view>
+										<view class="vbt2r-tb-l">
+											<view class="vbt2r-tb-l-pre green adfac" v-for="(ss,si) in item.scoreSpreads" :key="si" :style="{'border-bottom':'1px solid '+item.bordercolor}">
+												<view class="vbt2r-tb-l-pre-bg r"></view>
+												<view class="vbt2r-tb-l-pre-zzt green" :style="{'width':(ss.regular.avgVital/6*100)+'%'}">
+													<view class="vbt2r-tb-l-pre-zzt-numr">{{ ss.regular.avgVital||0 }}</view>
+												</view>
+											</view>
 										</view>
 									</view>
-									<view class="vbt2r-num adf">
-										<view class="vbt2r-num-pre" v-for="(num,ni) in [5,4,3,2,1,0,1,2,3,4,5]" :key="ni">{{ num }}</view>
-									</view>
 								</view>
 							</view>
+							<view class="v2-subp">评估结果</view>
+							<view class="v2-p" style="margin-top: 6px;" v-html="(item.diagnosisOutput||'').replaceAll('\n\n','<br>')"></view>
 						</view>
-						<view class="v2-subp">评估结果</view>
-						<view class="v2-p" style="margin-top: 6px;" v-html="(item.diagnosisOutput||'').replaceAll('\n\n','<br>')"></view>
 					</view>
-				</view>
+					<view class="cd_box adffc" style="border: none;">
+						<view class="v2-top adfacjb" :style="{'background-image':'url(https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/'+(typeDict[item.title]||'zzdj')+'_title_bg.png)','padding':'0 8px 0 24px'}">
+							<view class="vt-left" :class="{'black':(item.title=='人际关系'||item.title=='学习')}">{{ item.title }}</view>
+							<view class="vt-right">团队发展动态评估报告(团队版) </view>
+						</view>
+						<view class="v2-box" :style="{'border':'none','padding':0}">
+							<view class="v2-p" style="margin-top: 6px;" v-html="(item.diagnosisSuggest||'').replaceAll('\n\n','<br>')"></view>
+						</view>
+					</view>
+				</block>
 			</template>
 			<!-- 封底页 -->
 			<view class="cd_box fdy" style="border: none;">
-				<view class="v2-top adfacjb" :style="{'background-image':'url(https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/fdy_title_bg.png)'}"></view>
+				<view class="v2-top adfacjb" :style="{'background-image':'url(https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/fdy_title_bg.png)'}">
+					<view class="vt-left" style="color: #FFFFFF;">结言</view>
+					<view class="vt-right">团队发展动态评估报告(团队版)</view>
+				</view>
 				<view class="fdy-title">致团队：从评估到行动，开启团队进化跃迁之旅</view>
 				<view class="fdy-p">当您阅读至此，首先恭喜您和团队伙伴共同完成了一次完整、专业的团队评估！这标志着团队发展旅程中一个充满可能性的新起点。</view>
 				<view class="fdy-p">作为团队教练，我们希望与您分享PERILL评估的科学价值，并为您描绘从系统诊断到协同进化的路径。 </view>
@@ -295,27 +316,27 @@
 				
 				const tempDimensionAnalysis = [
 					{
-						title:'宗旨与动机',thbgcolor:'#761E6A',thtextcolor:'#FFFFFF',titlecolor:'#761E6A',dimensionCode:"purpose",
+						title:'宗旨与动机',thbgcolor:'#761E6A',thtextcolor:'#FFFFFF',titlecolor:'#761E6A',dimensionCode:"purpose",bordercolor:'#E4D2E1',
 						desc:`「宗旨与动机」维度，我们旨在探究团队是否有清晰的存在理由和明确的方向,能够激发团队成员的动力并吸引他们的想象力,以及个人与集体的身份认同是否围绕共同的目标,并在实现目标的优先次序上达成一致。`
 					},
 					{
-						title:'外部流程、系统与结构',thbgcolor:'#009191',thtextcolor:'#FFFFFF',titlecolor:'#009191',dimensionCode:"external",
+						title:'外部流程、系统与结构',thbgcolor:'#009191',thtextcolor:'#FFFFFF',titlecolor:'#009191',dimensionCode:"external",bordercolor:'#B3DEDE',
 						desc:`「外部流程、系统与结构」维度，我们旨在探究团队如何与各种利益相关者互动，他们与团队的利益相关方各自如何寻求了解对方，以及现有系统和流程的有效性，以帮助管理不同利益相关者的期望和需求。`
 					},
 					{
-						title:'人际关系',thbgcolor:'#FFD750',thtextcolor:'#002846',titlecolor:'#002846',dimensionCode:"relationship",
+						title:'人际关系',thbgcolor:'#FFD750',thtextcolor:'#002846',titlecolor:'#002846',dimensionCode:"relationship",bordercolor:'#FFEBA8',
 						desc:`「人际关系」维度，我们旨在探究团队成员相互沟通交流的状态,团队成员的信任程度、尊重和关心的程度、心理安全度,以及团队成员之间的关系如何促进(或破坏)协作。`
 					},
 					{
-						title:'内部流程、系统与结构',thbgcolor:'#4EB2B2',thtextcolor:'#FFFFFF',titlecolor:'#33A7A7',dimensionCode:"internal",
+						title:'内部流程、系统与结构',thbgcolor:'#4EB2B2',thtextcolor:'#FFFFFF',titlecolor:'#33A7A7',dimensionCode:"internal",bordercolor:'#B3DEDE',
 						desc:`「内部流程、系统与结构」维度，我们旨在探究团队在管理工作任务和流程中如何平衡责任与自主权进行协作。主要关注团队应对变化时的敏捷程度、日常沟通方式以及内部决策过程的有效性。`
 					},
 					{
-						title:'学习',thbgcolor:'#AFCDF5',thtextcolor:'#002846',titlecolor:'#002846',dimensionCode:"learning",
+						title:'学习',thbgcolor:'#AFCDF5',thtextcolor:'#002846',titlecolor:'#002846',dimensionCode:"learning",bordercolor:'#C7DCF8',
 						desc:`「学习」维度，我们旨在探究团队如何提高其绩效(完成当下的任务)、能力(提高技能和资源以处理明天的任务)和容量(⻓期的愿景,用更少的资源做更多的事情)以应对当前和未来的任务。同时还关注团队如何管理这些能力和提高效率。`
 					},
 					{
-						title:'领导力',thbgcolor:'#002846',thtextcolor:'#FFFFFF',titlecolor:'#002846',dimensionCode:"leadership",
+						title:'领导力',thbgcolor:'#002846',thtextcolor:'#FFFFFF',titlecolor:'#002846',dimensionCode:"leadership",bordercolor:'#E6EAED',
 						desc:`「领导力」维度，我们旨在探究团队领导者的素质和行为(包括但不限于正式与非正式的引导、赋能与责任承担方式)如何对团队功能和其他因素产生影响,以及这是积极的还是消极的。`
 					}
 				]

static/pdf.scss

@@ -17,7 +17,7 @@
             font-size: 18px;
             color: #199C9C;
             line-height: 18px;
-            margin-top: 40px;
+            margin-top: 30px;
             padding: 0 20px;
         }
         .fdy-p{
@@ -160,7 +160,7 @@
     .fm2-p{
         font-family: PingFangSC, PingFang SC;
         font-weight: 400;
-        font-size: 38px;
+        font-size: 40px;
         color: #FFDF73;
         line-height: 48px;
         margin-top: 8px;
@@ -208,7 +208,7 @@
             font-weight: bold;
             font-size: 24px;
             color: #FFFFFF;
-            line-height: 44px;
+            line-height: 33px;
             text-align: left;
             &.black{
                 color: #002846;
@@ -253,13 +253,12 @@
         font-weight: 400;
         font-size: 10px;
         color: #667E90;
-        line-height: 20px;
-        margin-top: 9px;
+        line-height: 16px;
     }
     .v2b-tip-memo{
         font-family: PingFangSC, PingFang SC;
         font-weight: 400;
-        font-size: 10px;
+        font-size: 9px;
         color: #667E90;
         line-height: 16px;
         margin-top: 1px;
@@ -294,7 +293,7 @@
         font-weight: 400;
         font-size: 10px;
         color: #002846;
-        line-height: 16px;
+        line-height: 20px;
         span{
             font-family: DIN, DIN;
             font-weight: bold;
@@ -726,8 +725,8 @@
             position: relative;
             .vbt2r-tb-l-pre{
                 width: 100%;
-                height: 58px;
-				box-sizing: border-box;
+                height: 58px;
+                box-sizing: border-box;
                 position: relative;
                 .vbt2r-tb-l-pre-bg{
                     width: calc(100% - 16px);
@@ -765,7 +764,7 @@
                         font-weight: bold;
                         font-size: 12px;
                         color: #904A87;
-                        line-height: 18px;
+                        line-height: 16px;
                         text-align: center;
                         box-shadow: 0px 4px 8px 0px rgba(118,30,106,0.1);
                         border-radius: 4px;