ChuangHeng_new/src/components/reportPdf/pdfUser2.vue

<template>
    <div>
        <!-- 封面 -->
        <div class="cd_box fm2 adffc" style="border: none;margin-top: 20px;height: 868px;">
            <img class="fm2-logo" src="@/assets/images/versionTwo/fm_logo.png">
            <img class="fm2-logo2" src="@/assets/images/versionTwo/fm_logo2.png">
            <img class="fm2-perill" src="@/assets/images/versionTwo/fm_perill.png">
            <div class="fm2-line"></div>
            <div class="fm2-p">团队发展动态评估报告(个人版)</div>
            <div class="fm2-texts adf">
                <div class="fm2-texts-pre"><span>客户公司：</span>{{ reportData?.teamInfo?.enterpriseName||'' }}</div>
                <div class="fm2-texts-pre"><span>团队名称：</span>{{ reportData?.teamInfo?.teamName||'' }}</div>
                <div class="fm2-texts-pre"><span>评估发起人：</span>{{ reportData?.teamInfo?.initiator||'' }}</div>
                <div class="fm2-texts-pre"><span>报告生成时间：</span>{{ reportData?.teamInfo?.reportDate||'' }}</div>
            </div>
            <div class="fm2-tip">免责声明：本团队测评报告基于您方团队填写的测评数据及相关信息生成，深圳创衡管理顾问有限公司不对报告内容的真实性、准确性和完整性负责。本报告仅供您了解团队情况、优化管理决策提供参考。报告结论不构成任何法律、商业或投资建议，亦不替代专业咨询意见。我方不对因使用本报告内容而产生的任何直接或间接损失承担责任。</div>
        </div>
        <!-- 介绍 -->
        <div class="cd_box" style="border: none;">
            <div class="v2-top adfacjb" :style="{'background-image':'url('+require('@/assets/images/versionTwo/'+'intro'+'_title_bg.png')+')','padding':'0 8px 0 24px'}">
                <div class="vt-left" style="color: #FFFFFF;">PERILL模型介绍</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="v2-p">PERILL团队发展动态评估源于团队教练辅导领域的先驱、管理思维与团队绩效领域的权威、全球顶尖团队教练David Clutterbuck教授及其团队通过深入研究，提炼出影响团队绩效的140多个基于实证的因素，整合而成的团队评估和提升工具-PERILL模型。</div>
                <div class="v2-p" style="margin-top: 8px;">创衡国际基于10多年来在全球与200多家具有前瞻性的国际公司以及国内具有行业代表性公司的合作经验，结合CCMI的PERILL评估工具，在中国推出的团队发展动态评估系统，旨在帮助团队更全面、更有效地从六个维度评估团队的发展现状，为支持团队成为高价值创造团队提供全景式的客观评估。</div>
                <div class="v2-p" style="margin-top: 8px;">PERILL团队发展动态评估(个人版)的主体内容由<span>{{ reportData?.teamInfo?.questionCount||0 }}</span>个关于团队的描述组成。</div>
            </div>
            <div class="v2-six">
                <div class="vsix-title">PERILL六大纬度</div>
                <div class="vsix-p">PERILL评估提供了一个复杂的团队系统概览，它并非针对孤立的问题，也不是简单的优缺点，而是着眼于团队系统的复杂性。它通过6个影响因素(如下所述)提出问题，以揭示团队系统各要素之间的联系，以及这些联系如何影响团队的高效运作能力。</div>
                <div class="vsix-boxs">
                    <div class="vsb adfac" v-for="(item,index) in sixWd" :key="index">
                        <img class="vsb-img" :src="item.img"/>
                        <div class="vsb-right">
                            <div class="vsbr-top adfac">
                                <div class="vsbrt-type" :style="{'background':item.color}">{{ item.type }}</div>
                                <div class="vsbrt-title" :style="{'color':item.color}">{{ item.title }}</div>
                            </div>
                            <div class="vsbr-desc">{{ item.desc }}</div>
                        </div>
                    </div>
                </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="v2-p2">报告的核心是PERILL评估分析下从评估发起者个人维度来看其所在整体团队当前状态下的表现。这包括团队在PERILL模型每个关键要素上的综合得分，通过结合得分和置信指数，我们能够展示出高功能和低功能领域。</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>
b.“重要分”，指标逻辑为根据评估发起者个人对当前主题所对应各问卷题目重要性评分的均值，用来表征其对这一主题问卷所陈述内容对于团队重要性的平均认知，最高分：5分，最低分：0分；<br>
c.“影响力分”，指标逻辑为评估发起者个人对当前主题所对应各问卷题目的认同度评分与重要性评分乘积的均值，用来表征其对这一主题问卷所陈述内容对于团队的影响力水平，最高分：25分，最低分：0分；</div>
                <div class="v2b-title">评估结果</div>
                <div class="v2b-p" v-html="(reportData?.totalDiagnosticOutput||'').replaceAll('\n\n','<br>').replaceAll('**','')"></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>').replaceAll('**','')"></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 adfacjb" :style="{'background-image':'url('+require('@/assets/images/versionTwo/'+'intro'+'_title_bg.png')+')','padding':'0 8px 0 24px'}">
                    <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 '+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" :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>
                                    <div class="vbt2l-pre-r adfacjc">{{ ss?.memeber?.avgScore||0 }}</div>
                                </div>
                            </div>
                            <div class="vbt2-right adffc">
                                <div class="vbt2r-th adf" :style="{'background':item.thbgcolor,'color':item.thtextcolor}">
                                    <div class="vbt2r-pre adfacjc">认同度分</div>
                                    <div class="vbt2r-pre adfacjc">重要性分</div>
                                </div>
                                <div class="vbt2r-tb adf">
                                    <div class="vbt2r-tb-l adffc">
                                        <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" :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>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <!-- 封底页 -->
        <div class="cd_box fdy" style="border: none;">
            <div class="v2-top adfacjb" :style="{'background-image':'url('+require('@/assets/images/versionTwo/fdy_title_bg.png')+')'}">
                <div class="vt-left" style="color: #FFFFFF;">结言</div>
                <div class="vt-right">团队发展动态评估报告(个人版)</div>
            </div>
            <div class="fdy-title">致关注团队发展的您：从评估到行动，开启团队进化跃迁之旅。</div>
            <div class="fdy-p">当您阅读至此，首先恭喜您完成了一次专业的团队评估！这不仅是您对所在团队的一次深度观察，也为团队发展开启了一个充满可能性的新起点。</div>
            <div class="fdy-p">作为团队教练，我们希望与您分享这次评估的深层价值，并为您描绘从个人视角走向团队共识的可能路径。</div>
            <div class="fdy-subtitle">一、这次个人评估为您理解团队提供了两个独特视角：</div>
            <div class="fdy-subtitle2">1. 个人观察的整合</div>
            <div class="fdy-p" style="margin-top: 6px;">本报告整合了您个人对团队当前状态（认同度）和未来期待（重要性）的评价，如同一面镜子，映照出您所感知的团队运作状态。它帮助您看见那些可能被忽略的惯性模式、盲点与认知差异。无论是您看到的优势、共识，还是待发展的领域，这些都构成了您个人视角下的团队画像。 </div>
            <div class="fdy-subtitle2">2. 进化方向的个人洞察</div>
            <div class="fdy-p" style="margin-top: 6px;">基于您的观察，报告勾勒出团队持续进化的潜在方向。这并非标准答案，而是帮助您识别那些对团队成功可能最关键的发展维度——无论是战略对齐、信任深化、协同效率、创新学习还是领导力进化。它将您个人的感受与对团队的期待连接起来，把模糊的感觉转化为可讨论、可聚焦的议题，为您后续参与团队对话提供事实依据。</div>
            <div class="fdy-subtitle">二、个人评估是重要的第一步，但团队的真实面貌往往需要更多视角。</div>
            <div class="fdy-p">本次评估仅代表您个人的观察，而团队作为一个系统，其全貌需要整合团队领导者、成员、赞助人及利益相关方等多方视角。这正是PERILL团队评估系统的核心价值：通过科学的、结构化的评估，帮助团队获得系统性洞察，实现高杠杆改进。</div>
            <div class="fdy-subtitle">三、我们邀请您：</div>
            <div class="fdy-subtitle2">1. 发起一次坦诚的团队对话</div>
            <div class="fdy-p" style="margin-top: 6px;">邀请关键成员，基于您的观察分享感受，倾听他人视角，开启团队共识的第一步。</div>
            <div class="fdy-subtitle2">2. 进行一次完整的团队PERILL评估</div>
            <div class="fdy-p" style="margin-top: 6px;">邀请团队负责人、成员、赞助人及利益相关方共同参与，获得真实、立体的团队诊断报告，为团队发展奠定共同事实基础。</div>
            <div class="fdy-subtitle2">3. 考虑获取专业支持</div>
            <div class="fdy-p" style="margin-top: 6px;">团队教练可作为中立的思考伙伴，帮助团队整合多元视角，建立共同语言，制定切实可行的进化路径。</div>
            <div class="fdy-p" style="margin-top: 20px;">每一支超越高绩效的团队，都始于对现状清醒的认知与持续进化的共同勇气。现在，您已拥有个人视角的洞察，下一步是走向团队共识——让每一次对话，都成为团队蜕变的契机。</div>
            <div class="fdy-p">PERILL不止于评估，更在于赋能。期待与您和团队同行，见证未来的更多可能。</div>
            <div class="fdy-p">具体需求可联系您的团队教练或扫码联系“⼤衡同学”。</div>
            <div class="fdy-code adfacjc"><img :src="require('@/assets/images/versionTwo/fdy_code.png')"></div>
        </div>
    </div>
</template>

<script setup name="">
    const props = defineProps({
        reportData:{
            type: Object,
            default: () => {}
        }
    })
    import * as echarts from "echarts";
    import { ref, onMounted, nextTick } from 'vue'
    const reportData = ref(null);
    const sixWd = ref([
        {
            img:require('@/assets/images/versionTwo/intro_img_p.png'),
            type:'P',
            title:'宗旨与动机',
            desc:'指团队共享的目的和存在的意义, 包含对共同的愿景，目标和优先级的清晰度。',
            color:'#761E6A'
        },
        {
            img:require('@/assets/images/versionTwo/intro_img_e.png'),
            type:'E',
            title:'外部流程、系统与结构',
            desc:'指团队与其外部利益相关者 - 客户,供应商,股东,组织内的上级及其他团队的互动关系和协作机制。',
            color:'#009191'
        },
        {
            img:require('@/assets/images/versionTwo/intro_img_r.png'),
            type:'R',
            title:'人际关系',
            desc:'指团队成员共同工作时的关系状态–他们是否相互尊重和信任对方的能力,是否足够心理安全以能够坦诚沟通,是否真正关心彼此的幸福感等。',
            color:'#FFD750'
        },
        {
            img:require('@/assets/images/versionTwo/intro_img_i.png'),
            type:'I',
            title:'内部流程、系统与结构',
            desc:'指团队如何管理工作任务和流程(包括但不限于会议、任务分配和团队情绪等),互相支持以及高质量的沟通和决策。',
            color:'#4EB2B2'
        },
        {
            img:require('@/assets/images/versionTwo/intro_img_l.png'),
            type:'L',
            title:'学习',
            desc:'指团队如何应对多变的环境和保持持续的进步和成⻓,能够从经验中反思、提炼并应用知识的能力。',
            color:'#AFCDF5'
        },
        {
            img:require('@/assets/images/versionTwo/intro_img_l2.png'),
            type:'L',
            title:'领导力',
            desc:'指团队认为需要怎样的领导行为能够让他们,作为个人或者团队做到最好。团队可以和他们的领导者讨论他们的责任及承担方式,以帮助领导者成为他们需要的领导者。',
            color:'#002846'
        }
    ]);

    let chartInstance = null;
    const initZtzdfxChart = async (reportData) => {
        let xdata = reportData?.overall?.map(o=>o.dimension)?.reverse()||[];
        let yvalue = reportData?.overall?.map(o=>o.weightedTotal)?.reverse()||[];
        let ycolor = [['#771E6A','#771E6A'],['#009191','#009191'],['#FFD750','#FFD750'],['#4EB2B2','#4EB2B2'],['#AFCDF5','#AFCDF5'],['#002846','#002846']].reverse();
        let yData = yvalue.map((v,i)=>{
            return {
                value: v,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                            { offset: 0, color: ycolor[i][0] }, 
                            { offset: 1, color: ycolor[i][1] }
                        ]
                    ),
                    borderRadius: [0, 4, 4, 0]
                }
            }
        })

        chartInstance = echarts.init(document.getElementById(`ztzdfxRef`));
        let option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'shadow'
                }
            },
            legend: {},
            grid: {
                left: '2%',
                right: '10%',
                bottom: '0%',
                top: '10%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01],
				splitLine: {
					show: false
				},
                // 隐藏X轴轴线和标签，使图表更干净
                axisLine: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    color: '#193D59',
                    fontSize: 10 // X轴刻度值也不显示
                }
            },
            yAxis: {
                type: 'category',
                data: xdata,
				axisLine: {
					show: true, // 设置为 true 来显示Y轴的轴线
					lineStyle: {
					  color: '#ECEEF5',
					  width: 1
					}
				},
				// 隐藏Y轴上的小刻度线（如果你想保留可以设为true）
				axisTick: {
					show: false
				},
                axisLabel: {
                    color: '#193D59',
                    fontSize: 10
                }
            },
            series: [
                {
                    type: 'bar',
                    barWidth: '8px',
                    data: yData
                }
            ]
        };
        chartInstance.setOption(option);
    }
    const resizeChart = () => {
        // dispose后重建，确保graphic元素能重新计算位置
        chartInstance?.dispose();
        initZtzdfxChart(reportData.value);
    };

    onMounted(() => {
        reportData.value = props.reportData;
        const tempDimensionAnalysis = [
            {
                title:'P-宗旨与动机',thbgcolor:'#761E6A',thtextcolor:'#FFFFFF',titlecolor:'#761E6A',dimensionCode:"purpose",bordercolor:'#E4D2E1',
                desc:`「宗旨与动机」维度，我们旨在探究团队是否有清晰的存在理由和明确的方向,能够激发团队成员的动力并吸引他们的想象力,以及个人与集体的身份认同是否围绕共同的目标,并在实现目标的优先次序上达成一致。`
            },
            {
                title:'E-外部流程、系统与结构',thbgcolor:'#009191',thtextcolor:'#FFFFFF',titlecolor:'#009191',dimensionCode:"external",bordercolor:'#B3DEDE',
                desc:`「外部流程、系统与结构」维度，我们旨在探究团队如何与各种利益相关者互动，他们与团队的利益相关方各自如何寻求了解对方，以及现有系统和流程的有效性，以帮助管理不同利益相关者的期望和需求。`
            },
            {
                title:'R-人际关系',thbgcolor:'#FFD750',thtextcolor:'#002846',titlecolor:'#002846',dimensionCode:"relationship",bordercolor:'#FFEBA8',
                desc:`「人际关系」维度，我们旨在探究团队成员相互沟通交流的状态,团队成员的信任程度、尊重和关心的程度、心理安全度,以及团队成员之间的关系如何促进(或破坏)协作。`
            },
            {
                title:'I-内部流程、系统与结构',thbgcolor:'#4EB2B2',thtextcolor:'#FFFFFF',titlecolor:'#33A7A7',dimensionCode:"internal",bordercolor:'#B3DEDE',
                desc:`「内部流程、系统与结构」维度，我们旨在探究团队在管理工作任务和流程中如何平衡责任与自主权进行协作。主要关注团队应对变化时的敏捷程度、日常沟通方式以及内部决策过程的有效性。`
            },
            {
                title:'L-学习',thbgcolor:'#AFCDF5',thtextcolor:'#002846',titlecolor:'#002846',dimensionCode:"learning",bordercolor:'#C7DCF8',
                desc:`「学习」维度，我们旨在探究团队如何提高其绩效(完成当下的任务)、能力(提高技能和资源以处理明天的任务)和容量(⻓期的愿景,用更少的资源做更多的事情)以应对当前和未来的任务。同时还关注团队如何管理这些能力和提高效率。`
            },
            {
                title:'L-领导力',thbgcolor:'#002846',thtextcolor:'#FFFFFF',titlecolor:'#002846',dimensionCode:"leadership",bordercolor:'#E6EAED',
                desc:`「领导力」维度，我们旨在探究团队领导者的素质和行为(包括但不限于正式与非正式的引导、赋能与责任承担方式)如何对团队功能和其他因素产生影响,以及这是积极的还是消极的。`
            }
        ];
        reportData.value.dimensionAnalysis.forEach((d,i)=>{
            d.scoreSpreads.forEach(s=>{
                s.theme = s.theme.replaceAll('，',' ').replaceAll(',',' ');
            })
            let temp = tempDimensionAnalysis.find(t=>t.dimensionCode === d.dimensionCode)||{};
            reportData.value.dimensionAnalysis[i] = {...d,...temp}
        })

        Promise.resolve().then(() => {
            initZtzdfxChart(reportData.value);
            window.addEventListener('resize', resizeChart);
        });
    })
</script>

<style scoped lang="scss">
    @import url(./pdf2.scss);

    .cd_box{
        width: 100%;
        min-height: 891px;
        color: #A1A1A1;
    }
</style>