pdf预览优化

src/components/reportPdf/pdf.scss

@@ -4,20 +4,25 @@
     position: relative;
     .cb_db{
         .cb_db_l{
-            width: 120px;
-            font-size: 14px;
-            color: #000;
-        }
-        .cb_db_r{
-            width: calc(100% - 120px);
-            font-size: 14px;
-            color: #000;
-            text-align: center;
+            font-family: STSongti-SC, STSongti-SC;
+            font-weight: 400;
+            font-size: 10px;
+            color: #FFFFFF;
+            line-height: 16px;
+            padding-left: 32px;
+            &.cdl{
+                color: #111111;
+                padding-left: 0;
+            }
         }
     }
 
     .cd_page{
-        font-size: 14px;
+        font-family: STSongti-SC, STSongti-SC;
+        font-weight: 400;
+        font-size: 10px;
+        color: #111111;
+        line-height: 16px;
         text-align: right;
         position: absolute;
         right: 30px;
@@ -25,41 +30,193 @@
     }
 
     p{
-        font-size: 14px;
+        font-family: STSongti-SC, STSongti-SC;
+        font-weight: 400;
+        font-size: 10px;
+        color: #252525;
+        line-height: 14px;
         margin-top: 20px;
     }
 
     .big_title{
+        font-family: STSongti-SC, STSongti-SC;
+        font-weight: 400;
         font-size: 32px;
-        margin-top: 30px;
-        color: #007EC1;
+        color: #761E6A;
+        line-height: 45px;
+        margin-top: 20px;
+    }
+
+    &.fm{
+        background: url('@/assets/images/agent/pdf_fmbg.png') no-repeat;
+        background-size: 100% 100%;
     }
 
     .fm_img{
-        width: calc(100% - 120px);
-        height: 400px;
-        margin: 100px 60px 0;
+        width: 286px;
+        height: 48px;
+        margin: 48px 0 0 62px
     }
     .fm_title{
-        font-size: 26px;
-        padding-left: 60px;
-        margin-top: 30px;
-        margin-bottom: 30px;
+        margin: 74px 0 0 72px;
+        .pt_p{
+            font-size: 64px;
+            font-weight: bold;
+            color: #00B7ED;
+            line-height: 90px;
+        }
+        .pt_name{
+            font-size: 64px;
+            font-weight: bold;
+            color: #FFFFFF;
+            line-height: 90px;
+        }
+        .pt_tip{
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 400;
+            font-size: 16px;
+            color: #FFFFFF;
+            line-height: 22px;
+            margin-top: 9px;
+        }
     }
     .fm_pre{
-        padding-left: 60px;
-        margin-top: 10px;
+        padding-left:72px;
+        margin-top: 14px;
         font-size: 16px;
+        color: #FFFFFF;
         .fmp_l{
-            width: 120px;
+            width: 104px;
+        }
+    }
+
+    &.js{
+        .cb_content{
+            padding: 28px 32px 0;
+        }
+        .js_boxs{
+            margin-top: 26px;
+            display: flex;
+            justify-content: space-between;
+            .jb_pre{
+                width: calc(20% - 10px);
+                height: 302px;
+                border-radius: 0px 18px 0px 18px;
+                border: 2px solid #761E6A;
+                padding-left: 10px;
+                box-sizing: border-box;
+                position: relative;
+                .jbp_zm{
+                    width: 32px;
+                    height: 32px;
+                    background: #761E6A;
+                    font-family: PingFang-SC, PingFang-SC;
+                    font-weight: bold;
+                    font-size: 22px;
+                    color: #FFFFFF;
+                    line-height: 32px;
+                    text-align: center;
+                    position: absolute;
+                    left: 0;
+                    right: 0;
+                }
+                img{
+                    width: 48px;
+                    height: 48px;
+                    margin: 35px 32px 0 15px;
+                }
+                .jbp_title{
+                    width: 100%;
+                    height: 30px;
+                    padding: 0 30px 7px 0;
+                    border-bottom: 2px solid #761E6A;
+                    box-sizing: border-box;
+                    font-family: STSongti-SC, STSongti-SC;
+                    font-weight: bold;
+                    font-size: 10px;
+                    color: #111111;
+                    line-height: 16px;
+                    margin-top: 10px;
+                }
+                p{
+                    font-family: STSongti-SC, STSongti-SC;
+                    font-weight: 400;
+                    font-size: 10px;
+                    color: #111111;
+                    line-height: 14px;
+                    padding: 7px 0 0 0;
+                    &:last-child{
+                        margin-top: 14px;
+                    }
+                }
+            }
+        }
+        .js_single_box{
+            margin-top: 20px;
+            width: 100%;
+            height: 112px;
+            border-radius: 0px 18px 0px 18px;
+            border: 2px solid #761E6A;
+            padding-bottom: 10px;
+            position: relative;
+            .jsb_zm{
+                width: 32px;
+                height: 32px;
+                background: #761E6A;
+                font-family: PingFang-SC, PingFang-SC;
+                font-weight: bold;
+                font-size: 22px;
+                color: #FFFFFF;
+                line-height: 32px;
+                text-align: center;
+                position: absolute;
+                left: 0;
+                right: 0;
+            }
+            .jsb_l{
+                width: 111px;
+                img{
+                    width: 48px;
+                    height: 48px;
+                    margin-top: 30px;
+                }
+                p{
+                    font-family: STSongti-SC, STSongti-SC;
+                    font-weight: 400;
+                    font-size: 10px;
+                    color: #111111;
+                    line-height: 16px;
+                    margin-top: 9px;
+                }
+            }
+            .jsb_r{
+                border-left: 2px solid #761E6A;
+                padding: 10px 22px;
+                flex: 1;
+                font-family: STSongti-SC, STSongti-SC;
+                font-weight: 400;
+                font-size: 10px;
+                color: #111111;
+                line-height: 16px;
+            }
+
         }
     }
 
 
     .mddj_title{
-        font-size: 28px;
-        color: #000000;
-        margin-top: 20px;
+        img{
+            width: 65px;
+            height: 45px;
+        }
+        span{
+            font-family: FZZCHJW--GB1, FZZCHJW--GB1;
+            font-weight: normal;
+            font-size: 48px;
+            color: #761E6A;
+            line-height: 58px;
+            margin-left: 8px;
+        }
     }
     .mddj_tip{
         font-size: 12px;

src/components/reportPdf/pdf.vue

@@ -1,14 +1,17 @@
 <template>
     <div>
         <!-- 封面 -->
-        <div class="cd_box">
+        <div class="cd_box fm">
             <div class="cb_db adf">
                 <div class="cb_db_l">{{ datetime }}</div>
-                <div class="cb_db_r">欢迎使用CCMI的PERILL</div>
             </div>
-            <!-- <img class="fm_img" src=""> -->
-            <div class="fm_title">诊断总结：</div>
-            <div class="fm_pre adfac">
+            <img class="fm_img" src="@/assets/images/agent/pdf_logo.png">
+            <div class="fm_title">
+                <div class="pt_p">PERILL</div>
+                <div class="pt_name">团队诊断报告</div>
+                <div class="pt_tip">{{ reportData?.cover?.title }}</div>
+            </div>
+            <div class="fm_pre adfac" style="margin-top: 195px;">
                 <div class="fmp_l">报告撰写人:</div>
                 <div class="fmp_r">{{ reportData?.cover?.realName }}</div>
             </div>
@@ -21,127 +24,80 @@
                 <div class="fmp_r">{{ reportData?.cover?.teamName }}</div>
             </div>
             <div class="fm_pre adfac">
-                <div class="fmp_l">团队成员人数:</div>
+                <div class="fmp_l">成员人数:</div>
                 <div class="fmp_r">{{ reportData?.cover?.userNum }}</div>
             </div>
             <div class="fm_pre adfac">
                 <div class="fmp_l">报告时间:</div>
                 <div class="fmp_r">{{ reportData?.cover?.genDate }}</div>
             </div>
-            <div class="fm_pre adfac">
-                <div class="fmp_l">问卷名称:</div>
-                <div class="fmp_r">{{ reportData?.cover?.title }}</div>
-            </div>
             <div class="cd_page">1/{{ 53 }}</div>
         </div>
         <!-- 第二页 -->
-        <div class="cd_box">
-            <div class="cb_db adf">
-                <div class="cb_db_l">{{ datetime }}</div>
-                <div class="cb_db_r">欢迎使用CCMI的PERILL</div>
-            </div>
-            <div class="mddj_title">介绍</div>
-            <p>PERILL模型由发展辅导领域的先驱、世界领先的教练及管理思维和团队绩效的作者大卫·克勒特巴克教授开发。该模型运用复杂的适应性思维，通过6个PERILL支柱来指导团队。这6个关键因素相互作用，共同推动或阻碍团队绩效。</p>
-            <p>以下报告提取了参与PERILL诊断问卷的团队成员提供的分数，并将其应用于PERILL模型。本报告的目的是总结团队中高功能和潜在功能障碍的领域，以帮助推动团队的整体表现。</p>
-            <p>该PERILL报告的结果可以帮助企业与团队更好地了解其优势、问题和差距，或需要克服的潜在挑战，以提高团队绩效、声誉和协作。</p>
-            <div class="big_title">PERILL的六大支柱</div>
-            <p>PERILL诊断提供了一个复杂的概述，不是离散的问题，也不是简单的优点和缺点，而是团队系统的复杂性。它询问了6个影响因素（如下所述）的问题，以找出团队系统元素之间的联系，以及它们如何可能影响团队高效运作的能力。</p>
-            <div class="cd_page">2/{{ 53 }}</div>
-        </div>
-        <!-- 第三页 -->
-        <div class="cd_box">
-            <div class="cb_db adf">
-                <div class="cb_db_l">{{ datetime }}</div>
-                <div class="cb_db_r">欢迎使用CCMI的PERILL</div>
-            </div>
-            <div class="mddj_title">整体团队职能</div>
-            <p style="margin-top: 50px;">本报告的核心是PERILL诊断分析下的整体团队表现。这包括团队在PERILL模型每个关键要素上的综合得分，通过结合得分和置信指数，我们能够展示出高功能领域和低功能领域。</p>
-            <p>下面的条形图上的位置标记显示了团队在各个支柱上的总分。</p>
-            <div ref="zttdznRef" style="width: 100%; height: 500px;margin-top: 20px;"></div>
-            <div class="cd_page">3/{{ 53 }}</div>
-        </div>
-        <!-- 团队成员评分目的和动机 -->
-        <div class="cd_box">
+        <div class="cd_box js">
             <div class="cb_db adf">
-                <div class="cb_db_l">{{ datetime }}</div>
-                <div class="cb_db_r">欢迎使用CCMI的PERILL</div>
+                <div class="cb_db_l cdl">{{ datetime }}</div>
             </div>
-            <div class="mddj_title">团队成员评分目的和动机</div>
-            <div class="mddj_tip">下表显示了每个团队成员对每个问题的得分，以及最终的总分和方差。</div>
-            <div class="mddj_top adf">
-                <div class="tt_pre adf">
-                    <div class="ttp_l tl1"></div>
-                    <div class="ttp_r">在个体和总分下，这表示功能得分较低。在方差下，这表示个体得分之间的差异较大。</div>
-                </div>
-                <div class="tt_pre adf">
-                    <div class="ttp_l tl2"></div>
-                    <div class="ttp_r">在个体和总分下，这表明一个中等功能的分数。在方差下，这表明个体分数之间的中等方差。</div>
-                </div>
-                <div class="tt_pre adf">
-                    <div class="ttp_l tl3"></div>
-                    <div class="ttp_r">在个体和总分下，这表示高功能得分。在方差下，这表示个体得分之间的低方差。</div>
+            <div class="cb_content">
+                <div class="mddj_title adfac">
+                    <img src="@/assets/images/agent/pdf_title.png">
+                    <span>介绍</span>
                 </div>
-            </div>
-            <div class="mddj_table">
-                <div class="mt_top adf">
-                    <div class="mt_l adfac">问题</div>
-                    <div class="mt_r adf">
-                        <div class="mr_pre">玛丽</div>
-                        <div class="mr_pre">千斤顶</div>
-                        <div class="mr_pre">汤姆</div>
-                        <div class="mr_pre">阿尔法</div>
-                        <div class="mr_pre">总评分</div>
-                        <div class="mr_pre">Variance</div>
+                <p>PERILL模型由发展辅导领域的先驱、世界领先的教练及管理思维和团队绩效的作者大卫·克勒特巴克教授开发。该模型运用复杂的适应性思维，通过6个PERILL支柱来指导团队。这6个关键因素相互作用，共同推动或阻碍团队绩效。</p>
+                <p>以下报告提取了参与PERILL诊断问卷的团队成员提供的分数，并将其应用于PERILL模型。本报告的目的是总结团队中高功能和潜在功能障碍的领域，以帮助推动团队的整体表现。</p>
+                <p>该PERILL报告的结果可以帮助企业与团队更好地了解其优势、问题和差距，或需要克服的潜在挑战，以提高团队绩效、声誉和协作。</p>
+                <div class="big_title">PERILL的六大支柱</div>
+                <p>PERILL诊断提供了一个复杂的概述，不是离散的问题，也不是简单的优点和缺点，而是团队系统的复杂性。它询问了6个影响因素（如下所述）的问题，以找出团队系统元素之间的联系，以及它们如何可能影响团队高效运作的能力。</p>
+                <div class="js_boxs">
+                    <div class="jb_pre">
+                        <div class="jbp_zm">P</div>
+                        <img src="@/assets/images/agent/pdf_img_p.png">
+                        <div class="jbp_title" style="line-height: 30px;">目的与动机</div>
+                        <p style="margin-top: 0;">是否存在一个明确的存在理由和清晰的方向，能够激发团队成员的动力并抓住他们的想象力？</p>
+                        <p>个人身份和集体身份是否围绕共同目标达成一致？</p>
                     </div>
-                </div>
-                <div class="mt_list">
-                    <div class="ml_pre adf" v-for="(item,index) in mddjTableDatas.slice(0,6)" :key="index">
-                        <div class="mt_l adfac">{{ item.title }}</div>
-                        <div class="mt_r adfac">
-                            <div class="mp_pre adffcacjc" :class="{'mp1':pre.status==1,'mp2':pre.status==2,'mp3':pre.status==3}" v-for="(pre,idx) in item.datas" :key="idx">{{ pre.score }}</div>
-                        </div>
+                    <div class="jb_pre">
+                        <div class="jbp_zm">E</div>
+                        <img src="@/assets/images/agent/pdf_img_e.png">
+                        <div class="jbp_title" style="line-height: 12px;">外部流程及系统与架构</div>
+                        <p style="margin-top: 0;">团队如何与其各类利益相关者互动？</p>
+                        <p>团队如何理解这些利益相关者以及利益相关者如何理解团队？此外，团队又该如何管理相互冲突的期望、获取资源等？</p>
                     </div>
-                </div>
-            </div>
-            <div class="cd_page">2/{{ 53 }}</div>
-        </div>
-        <div class="cd_box" v-if="mddjTableDatas.length>6">
-            <div class="cb_db adf">
-                <div class="cb_db_l">{{ datetime }}</div>
-                <div class="cb_db_r">欢迎使用CCMI的PERILL</div>
-            </div>
-            <div class="mddj_table">
-                <div class="mt_top adf">
-                    <div class="mt_l adfac">问题</div>
-                    <div class="mt_r adf">
-                        <div class="mr_pre">玛丽</div>
-                        <div class="mr_pre">千斤顶</div>
-                        <div class="mr_pre">汤姆</div>
-                        <div class="mr_pre">阿尔法</div>
-                        <div class="mr_pre">总评分</div>
-                        <div class="mr_pre">Variance</div>
+                    <div class="jb_pre">
+                        <div class="jbp_zm">R</div>
+                        <img src="@/assets/images/agent/pdf_img_r.png">
+                        <div class="jbp_title" style="line-height: 30px;">关系</div>
+                        <p style="margin-top: 0;">团队成员之间是否相互信任和尊重？</p>
+                        <p>团队成员之间是否相互信任和尊重？</p>
+                        <p>团队成员之间的关系是否有助于实现真正紧密的协作？</p>
+                    </div>
+                    <div class="jb_pre">
+                        <div class="jbp_zm">I</div>
+                        <img src="@/assets/images/agent/pdf_img_i.png">
+                        <div class="jbp_title" style="line-height: 12px;">内部流程及系统与架构</div>
+                        <p style="margin-top: 0;">团队在平衡责任与自主权方面是如何实现功能性协作的？</p>
+                        <p>它的敏捷性如何，沟通方式怎样，决策流程的运作效果有多好？</p>
+                    </div>
+                    <div class="jb_pre">
+                        <div class="jbp_zm">L</div>
+                        <img src="@/assets/images/agent/pdf_img_l.png">
+                        <div class="jbp_title" style="line-height: 30px;">学习</div>
+                        <p style="margin-top: 0;">团队如何提高绩效，提高技能和资源，以应对当前和未来的任务？</p>
+                        <p>它如何管理能力和提高效率？</p>
                     </div>
                 </div>
-                <div class="mt_list">
-                    <div class="ml_pre adf" v-for="(item,index) in mddjTableDatas.slice(6,mddjTableDatas.length)" :key="index">
-                        <div class="mt_l adfac">{{ item.title }}</div>
-                        <div class="mt_r adfac">
-                            <div class="mp_pre adffcacjc" :class="{'mp1':pre.status==1,'mp2':pre.status==2,'mp3':pre.status==3}" v-for="(pre,idx) in item.datas" :key="idx">{{ pre.score }}</div>
-                        </div>
+                <div class="js_single_box adf">
+                    <div class="jsb_zm">L</div>
+                    <div class="jsb_l adffcacjc">
+                        <img src="@/assets/images/agent/pdf_img_l.png">
+                        <p>领导力</p>
+                    </div>
+                    <div class="jsb_r adffcacjc">
+                        领导力的特质与行为如何对团队运作及其他因素产生调节影响，且这种影响是正向还是负向的？
                     </div>
                 </div>
             </div>
-            <div class="cd_page">3/{{ 53 }}</div>
-        </div>
-        <!-- 绩效评级关系 -->
-        <div class="cd_box">
-            <div class="mddj_title">绩效评级关系</div>
-            <div class="pjgx_title">按主题列出的功能评级</div>
-            <div class="pjgx_chart">
-                <div ref="pjgxRef" style="width: 100%; height: 250px;margin-top: 20px;"></div>
-            </div>
-            <div class="pjgx_title">高/低性能指标</div>
-
+            <div class="cd_page">2/{{ 53 }}</div>
         </div>
     </div>
 </template>