ChuangHeng/src/components/reportPdf/pdf.vue

<template>
    <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>
            <img class="fm_img" src="">
            <div class="fm_title">诊断总结：</div>
            <div class="fm_pre adfac">
                <div class="fmp_l">报告撰写人:</div>
                <div class="fmp_r">{{ reportData?.cover?.realName }}</div>
            </div>
            <div class="fm_pre adfac">
                <div class="fmp_l">客户名称:</div>
                <div class="fmp_r">{{ reportData?.cover?.enterpriseName }}</div>
            </div>
            <div class="fm_pre adfac">
                <div class="fmp_l">团队名称:</div>
                <div class="fmp_r">{{ reportData?.cover?.teamName }}</div>
            </div>
            <div class="fm_pre adfac">
                <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="cb_db adf">
                <div class="cb_db_l">{{ datetime }}</div>
                <div class="cb_db_r">欢迎使用CCMI的PERILL</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>
            </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>
                </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>
                </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>
                </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>
                </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>
    </div>
</template>

<script setup name="">
    const props = defineProps({
        reportData:{
            type: Object,
            default: () => {}
        }
    })
    import * as echarts from "echarts";
    import { ref, getCurrentInstance, onMounted } from 'vue'
    const { proxy } = getCurrentInstance();
    const reportData = ref(props.reportData);
    const zttdznRef = ref(null)
    const pjgxRef = ref(null);
    const datetime = proxy.parseTime(new Date(), '{yy}-{mm}-{dd} {hh}:{ii}');
    
    const mddjTableDatas = ref([
        {
            title: '我们可以集体明确地表达我们的共同目标',
            datas: [
                { name: '玛丽', score: 1, status:1 },
                { name: '千斤顶', score: 16, status:2 },
                { name: '汤姆', score: 16, status:2 },
                { name: '阿尔法', score: 20, status:2 },
                { name: '总评分', score: 13, status:1 },
                { name: 'Variance', score: 19, status:2 }
            ]
        },
        {
            title: '我们对团队在这里要做的事情高度一致',
            datas: [
                { name: '玛丽', score: 1, status:1 },
                { name: '千斤顶', score: 9, status:1 },
                { name: '汤姆', score: 12, status:1 },
                { name: '阿尔法', score: 16, status:2 },
                { name: '总评分', score: 10, status:1 },
                { name: 'Variance', score: 15, status:2 }
            ]
        },
        {
            title: '我们善于将团队优先事项置于个人优先事项之前',
            datas: [
                { name: '玛丽', score: 1, status:1 },
                { name: '千斤顶', score: 12, status:1 },
                { name: '汤姆', score: 36, status:3 },
                { name: '阿尔法', score: 18, status:2 },
                { name: '总评分', score: 17, status:2 },
                { name: 'Variance', score: 35, status:1 }
            ]
        },
        {
            title: '我们可以集体明确地表达我们的共同目标',
            datas: [
                { name: '玛丽', score: 1, status:1 },
                { name: '千斤顶', score: 16, status:2 },
                { name: '汤姆', score: 16, status:2 },
                { name: '阿尔法', score: 20, status:2 },
                { name: '总评分', score: 13, status:1 },
                { name: 'Variance', score: 19, status:2 }
            ]
        },
        {
            title: '我们对团队在这里要做的事情高度一致',
            datas: [
                { name: '玛丽', score: 1, status:1 },
                { name: '千斤顶', score: 9, status:1 },
                { name: '汤姆', score: 12, status:1 },
                { name: '阿尔法', score: 16, status:2 },
                { name: '总评分', score: 10, status:1 },
                { name: 'Variance', score: 15, status:2 }
            ]
        },
        {
            title: '我们善于将团队优先事项置于个人优先事项之前',
            datas: [
                { name: '玛丽', score: 1, status:1 },
                { name: '千斤顶', score: 12, status:1 },
                { name: '汤姆', score: 36, status:3 },
                { name: '阿尔法', score: 18, status:2 },
                { name: '总评分', score: 17, status:2 },
                { name: 'Variance', score: 35, status:1 }
            ]
        },
        {
            title: '我们可以集体明确地表达我们的共同目标',
            datas: [
                { name: '玛丽', score: 1, status:1 },
                { name: '千斤顶', score: 16, status:2 },
                { name: '汤姆', score: 16, status:2 },
                { name: '阿尔法', score: 20, status:2 },
                { name: '总评分', score: 13, status:1 },
                { name: 'Variance', score: 19, status:2 }
            ]
        },
        {
            title: '我们对团队在这里要做的事情高度一致',
            datas: [
                { name: '玛丽', score: 1, status:1 },
                { name: '千斤顶', score: 9, status:1 },
                { name: '汤姆', score: 12, status:1 },
                { name: '阿尔法', score: 16, status:2 },
                { name: '总评分', score: 10, status:1 },
                { name: 'Variance', score: 15, status:2 }
            ]
        },
        {
            title: '我们善于将团队优先事项置于个人优先事项之前',
            datas: [
                { name: '玛丽', score: 1, status:1 },
                { name: '千斤顶', score: 12, status:1 },
                { name: '汤姆', score: 36, status:3 },
                { name: '阿尔法', score: 18, status:2 },
                { name: '总评分', score: 17, status:2 },
                { name: 'Variance', score: 35, status:1 }
            ]
        },
        {
            title: '我们可以集体明确地表达我们的共同目标',
            datas: [
                { name: '玛丽', score: 1, status:1 },
                { name: '千斤顶', score: 16, status:2 },
                { name: '汤姆', score: 16, status:2 },
                { name: '阿尔法', score: 20, status:2 },
                { name: '总评分', score: 13, status:1 },
                { name: 'Variance', score: 19, status:2 }
            ]
        },
        {
            title: '我们对团队在这里要做的事情高度一致',
            datas: [
                { name: '玛丽', score: 1, status:1 },
                { name: '千斤顶', score: 9, status:1 },
                { name: '汤姆', score: 12, status:1 },
                { name: '阿尔法', score: 16, status:2 },
                { name: '总评分', score: 10, status:1 },
                { name: 'Variance', score: 15, status:2 }
            ]
        },
        {
            title: '我们善于将团队优先事项置于个人优先事项之前',
            datas: [
                { name: '玛丽', score: 1, status:1 },
                { name: '千斤顶', score: 12, status:1 },
                { name: '汤姆', score: 36, status:3 },
                { name: '阿尔法', score: 18, status:2 },
                { name: '总评分', score: 17, status:2 },
                { name: 'Variance', score: 35, status:1 }
            ]
        },
        {
            title: '我们可以集体明确地表达我们的共同目标',
            datas: [
                { name: '玛丽', score: 1, status:1 },
                { name: '千斤顶', score: 16, status:2 },
                { name: '汤姆', score: 16, status:2 },
                { name: '阿尔法', score: 20, status:2 },
                { name: '总评分', score: 13, status:1 },
                { name: 'Variance', score: 19, status:2 }
            ]
        },
        {
            title: '我们对团队在这里要做的事情高度一致',
            datas: [
                { name: '玛丽', score: 1, status:1 },
                { name: '千斤顶', score: 9, status:1 },
                { name: '汤姆', score: 12, status:1 },
                { name: '阿尔法', score: 16, status:2 },
                { name: '总评分', score: 10, status:1 },
                { name: 'Variance', score: 15, status:2 }
            ]
        },
        {
            title: '我们善于将团队优先事项置于个人优先事项之前',
            datas: [
                { name: '玛丽', score: 1, status:1 },
                { name: '千斤顶', score: 12, status:1 },
                { name: '汤姆', score: 36, status:3 },
                { name: '阿尔法', score: 18, status:2 },
                { name: '总评分', score: 17, status:2 },
                { name: 'Variance', score: 35, status:1 }
            ]
        },
    ])

    const initZttdznChart = () => {
        let myChart = echarts.init(zttdznRef.value);
        let option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'shadow'
                }
            },
            legend: {},
            grid: {
                left: '3%',
                right: '8%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
            },
            series: [
                {
                name: '2011',
                type: 'bar',
                data: [18203, 23489, 29034, 104970, 131744, 630230],
                itemStyle:{
                    color: function(params) {
                        var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83'];
                        return colorList[params.dataIndex]
                    }
                }
                }
            ]
        };
        myChart.setOption(option)
    }

    const initPlgxChart = () => {
        let myChart = echarts.init(pjgxRef.value);
        let option = {
            color:['#F9CE7F'],
            legend: {
                data: ['Allocated Budget']
            },
            radar: {
                indicator: [
                    { name: 'Sales', max: 6500,
                        axisLabel : {
                            show: true
                        }
                     },
                    { name: 'Administration', max: 16000 },
                    { name: 'Information Technology', max: 30000 },
                    { name: 'Customer Support', max: 38000 },
                    { name: 'Development', max: 52000 },
                    { name: 'Marketing', max: 25000 }
                ],
                radius:'55%',
            },
            series: [
                {
                name: 'Budget vs spending',
                type: 'radar',
                areaStyle: {},
                data: [
                    {
                    value: [4200, 3000, 20000, 35000, 50000, 18000],
                    name: 'Allocated Budget'
                    }
                ]
                }
            ]
        }
        myChart.setOption(option)
    }

    onMounted(() => {
        initZttdznChart();
        initPlgxChart();
    })
</script>

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

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