个人版报告样式布局最新需求修改

src/components/reportPdf/pdfUser2.vue

@@ -18,7 +18,7 @@
         <!-- 介绍 -->
         <div class="cd_box" style="border: none;">
             <div class="v2-top adfacjb" :style="{'background-image':'url('+require('@/assets/images/versionTwo/'+'intro'+'_title_bg.png')+')'}">
-                <div class="vt-left" style="color: #FFFFFF;">介绍<span>PERILL模型简介</span></div>
+                <div class="vt-left" style="color: #FFFFFF;">PERILL模型介绍</div>
                 <div class="vt-right">团队发展动态评估报告(个人版)</div>
             </div>
             <div class="v2-box">
@@ -53,7 +53,7 @@
             <div class="v2-box">
                 <img class="vb-img1" :src="require('@/assets/images/versionTwo/'+'intro'+'_box_img1.png')">
                 <div class="v2-p2">报告的核心是PERILL评估分析下从评估发起者个人维度来看其所在整体团队当前状态下的表现。这包括团队在PERILL模型每个关键要素上的综合得分，通过结合得分和置信指数，我们能够展示出高功能和低功能领域。</div>
-                <div class="v2-p2" style="margin-top: 16px;">下面的条形图上的位置标记显示了团队在各个维度上的影响力评分。</div>
+                <div class="v2-p2" style="margin-top: 6px;">下面的条形图上的位置标记显示了团队在各个维度上的影响力评分。</div>
                 <div id="ztzdfxRef" style="width: 100%; height: 200px;" class="pdfEchart"></div>
                 <div class="v2b-tip-title">注: 关于认同度、重要性分、影响力分的定义</div>
                 <div class="v2b-tip-memo">a.“认同度分”，指标逻辑为评估发起者个人对当前主题所对应各问卷题目认同度评分的均值，用来表征其对这一主题问卷所陈述内容与团队情况的相符合程度的平均认知，最高分：5分，最低分：0分；<br>
@@ -61,26 +61,39 @@ b.“重要分”，指标逻辑为根据评估发起者个人对当前主题所
 c.“影响力分”，指标逻辑为评估发起者个人对当前主题所对应各问卷题目的认同度评分与重要性评分乘积的均值，用来表征其对这一主题问卷所陈述内容对于团队的影响力水平，最高分：25分，最低分：0分；</div>
                 <div class="v2b-title">评估结果</div>
                 <div class="v2b-p" v-html="(reportData?.totalDiagnosticOutput||'').replaceAll('\n\n','<br>')"></div>
-                <div class="v2b-title">评估建议</div>
+            </div>
+        </div>
+        <!-- 总体评估分析 评估建议-->
+        <div class="cd_box adffc" style="border: none;">
+            <div class="v2-top adfacjb" :style="{'background-image':'url('+require('@/assets/images/versionTwo/'+'intro'+'_top_title_bg2.png')+')'}">
+                <div class="vt-left">总体评估分析</div>
+                <div class="vt-right">团队发展动态评估报告(个人版)</div>
+            </div>
+            <div class="v2-box">
+                <img class="vb-img1" :src="require('@/assets/images/versionTwo/'+'intro'+'_box_img1.png')">
+                <div class="v2b-title" style="margin-top: 0;">评估建议</div>
                 <div class="v2b-p" v-html="(reportData?.totalDiagnosisSuggest||'').replaceAll('\n\n','<br>')"></div>
             </div>
         </div>
         <!-- 多维度 -->
         <template v-if="reportData&&reportData.dimensionAnalysis&&reportData.dimensionAnalysis.length">
             <div class="cd_box adffc" style="border: none;" v-for="(n,i) in [[0,2],[2,4],[4,6]]" :key="i">
-                <div class="v2-top" :style="{'background-image':'url('+require('@/assets/images/versionTwo/person_title_bg.png')+')'}"></div>
+                <div class="v2-top adfacjb" :style="{'background-image':'url('+require('@/assets/images/versionTwo/'+'intro'+'_title_bg.png')+')'}">
+                    <div class="vt-left" style="color: #FFFFFF;">PERILL六大纬度</div>
+                    <div class="vt-right">团队发展动态评估报告(个人版)</div>
+                </div>
                 <div v-for="(item,index) in reportData.dimensionAnalysis.slice(n[0],n[1])" :key="index">
                     <div class="v2-title2">{{ item.title||'' }}</div>
                     <div class="v2-box" :style="{'border':'none','padding':0}">
                         <div class="v2-p2">{{ item.desc }}</div>
-                        <div class="vb-table adf" :style="{'border':'1px solid #E6EAED','margin-top':'12px'}">
+                        <div class="vb-table adf" :style="{'border':'1px solid '+item.bordercolor,'margin-top':'12px'}">
                             <div class="vbt2-left">
                                 <div class="vbt2l-th adf" :style="{'background':item.thbgcolor,'color':item.thtextcolor}">
                                     <div class="vbt2l-th-title adfac">主题</div>
                                     <div class="vbt2l-th-score adfacjc">影响力分</div>
                                 </div>
-                                <div class="vbt2l-pre" v-for="(ss,si) in item.scoreSpreads" :key="si">
-                                    <div class="vbt2l-pre-l">
+                                <div class="vbt2l-pre" v-for="(ss,si) in item.scoreSpreads" :key="si" :style="{'border-bottom':'1px solid '+item.bordercolor}">
+                                    <div class="vbt2l-pre-l adffc">
                                         <div class="vbt2l-pre-l-title" :style="{'color':item.titlecolor}">{{ ss.theme||'' }}</div>
                                         <div class="vbt2l-pre-l-tip">{{ ss?.question||'' }}</div>
                                     </div>
@@ -93,22 +106,22 @@ c.“影响力分”，指标逻辑为评估发起者个人对当前主题所对
                                     <div class="vbt2r-pre adfacjc">重要性分</div>
                                 </div>
                                 <div class="vbt2r-tb adf">
-                                    <div class="vbt2r-tb-lines adf">
-                                        <div class="vbt2r-tb-lines-pre" v-for="item in 12" :key="item"></div>
-                                    </div>
                                     <div class="vbt2r-tb-l adffc">
-                                        <div class="vbt2r-tb-l-pre red adfac" v-for="(ss,si) in item.scoreSpreads" :key="si">
-                                            <div class="vbt2r-tb-l-pre-zzt red" :style="{'width':(ss?.memeber?.avgAgreement/6*100)+'%'}"></div>
+                                        <div class="vbt2r-tb-l-pre red adfac" v-for="(ss,si) in item.scoreSpreads" :key="si" :style="{'border-bottom':'1px solid '+item.bordercolor}">
+                                            <div class="vbt2r-tb-l-pre-bg"></div>
+                                            <div class="vbt2r-tb-l-pre-zzt red" :style="{'width':(ss?.memeber?.avgAgreement/6*100)+'%'}">
+                                                <div class="vbt2r-tb-l-pre-zzt-numl">{{ ss?.memeber?.avgAgreement||0 }}</div>
+                                            </div>
                                         </div>
                                     </div>
                                     <div class="vbt2r-tb-l">
-                                        <div class="vbt2r-tb-l-pre green adfac" v-for="(ss,si) in item.scoreSpreads" :key="si">
-                                            <div class="vbt2r-tb-l-pre-zzt green" :style="{'width':(ss?.memeber?.avgVital/6*100)+'%'}"></div>
+                                        <div class="vbt2r-tb-l-pre green adfac" v-for="(ss,si) in item.scoreSpreads" :key="si" :style="{'border-bottom':'1px solid '+item.bordercolor}">
+                                            <div class="vbt2r-tb-l-pre-bg r"></div>
+                                            <div class="vbt2r-tb-l-pre-zzt green" :style="{'width':(ss?.memeber?.avgVital/6*100)+'%'}">
+                                                <div class="vbt2r-tb-l-pre-zzt-numr">{{ ss?.memeber?.avgVital||0 }}</div>
+                                            </div>
                                         </div>
                                     </div>
-                                    <div class="vbt2r-num adf">
-                                        <div class="vbt2r-num-pre" v-for="(item,index) in [5,4,3,2,1,0,1,2,3,4,5]" :key="index">{{ item }}</div>
-                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -291,27 +304,27 @@ c.“影响力分”，指标逻辑为评估发起者个人对当前主题所对
         reportData.value = props.reportData;
         const tempDimensionAnalysis = [
             {
-                title:'P-宗旨与动机',thbgcolor:'#761E6A',thtextcolor:'#FFFFFF',titlecolor:'#761E6A',dimensionCode:"purpose",
+                title:'P-宗旨与动机',thbgcolor:'#761E6A',thtextcolor:'#FFFFFF',titlecolor:'#761E6A',dimensionCode:"purpose",bordercolor:'#E4D2E1',
                 desc:`「宗旨与动机」维度，我们旨在探究团队是否有清晰的存在理由和明确的方向,能够激发团队成员的动力并吸引他们的想象力,以及个人与集体的身份认同是否围绕共同的目标,并在实现目标的优先次序上达成一致。`
             },
             {
-                title:'E-外部流程、系统与结构',thbgcolor:'#009191',thtextcolor:'#FFFFFF',titlecolor:'#009191',dimensionCode:"external",
+                title:'E-外部流程、系统与结构',thbgcolor:'#009191',thtextcolor:'#FFFFFF',titlecolor:'#009191',dimensionCode:"external",bordercolor:'#B3DEDE',
                 desc:`「外部流程、系统与结构」维度，我们旨在探究团队如何与各种利益相关者互动，他们与团队的利益相关方各自如何寻求了解对方，以及现有系统和流程的有效性，以帮助管理不同利益相关者的期望和需求。`
             },
             {
-                title:'R-人际关系',thbgcolor:'#FFD750',thtextcolor:'#002846',titlecolor:'#002846',dimensionCode:"relationship",
+                title:'R-人际关系',thbgcolor:'#FFD750',thtextcolor:'#002846',titlecolor:'#002846',dimensionCode:"relationship",bordercolor:'#FFEBA8',
                 desc:`「人际关系」维度，我们旨在探究团队成员相互沟通交流的状态,团队成员的信任程度、尊重和关心的程度、心理安全度,以及团队成员之间的关系如何促进(或破坏)协作。`
             },
             {
-                title:'I-内部流程、系统与结构',thbgcolor:'#4EB2B2',thtextcolor:'#FFFFFF',titlecolor:'#33A7A7',dimensionCode:"internal",
+                title:'I-内部流程、系统与结构',thbgcolor:'#4EB2B2',thtextcolor:'#FFFFFF',titlecolor:'#33A7A7',dimensionCode:"internal",bordercolor:'#B3DEDE',
                 desc:`「内部流程、系统与结构」维度，我们旨在探究团队在管理工作任务和流程中如何平衡责任与自主权进行协作。主要关注团队应对变化时的敏捷程度、日常沟通方式以及内部决策过程的有效性。`
             },
             {
-                title:'L-学习',thbgcolor:'#AFCDF5',thtextcolor:'#002846',titlecolor:'#002846',dimensionCode:"learning",
+                title:'L-学习',thbgcolor:'#AFCDF5',thtextcolor:'#002846',titlecolor:'#002846',dimensionCode:"learning",bordercolor:'#C7DCF8',
                 desc:`「学习」维度，我们旨在探究团队如何提高其绩效(完成当下的任务)、能力(提高技能和资源以处理明天的任务)和容量(⻓期的愿景,用更少的资源做更多的事情)以应对当前和未来的任务。同时还关注团队如何管理这些能力和提高效率。`
             },
             {
-                title:'L-领导力',thbgcolor:'#002846',thtextcolor:'#FFFFFF',titlecolor:'#002846',dimensionCode:"leadership",
+                title:'L-领导力',thbgcolor:'#002846',thtextcolor:'#FFFFFF',titlecolor:'#002846',dimensionCode:"leadership",bordercolor:'#E6EAED',
                 desc:`「领导力」维度，我们旨在探究团队领导者的素质和行为(包括但不限于正式与非正式的引导、赋能与责任承担方式)如何对团队功能和其他因素产生影响,以及这是积极的还是消极的。`
             }
         ];