ChuangHengWx/pagesHome/pdf.vue

<template>
    <view class="page-wrappe">
		<cus-header title=' ' bgColor="transparent"></cus-header>
		<view id="pdfContainer" class="pdf-container" :style="{'transform':'scale('+scale+')', 'height': containerScaledHeight + 'px'}" v-if="reportData">
			<!-- 封面 -->
			<view class="cd_box fm2 adffc" style="border: none;margin-top: 20px;height: 868px;">
				<img class="fm2-logo" src="https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/fm_logo.png">
				<img class="fm2-logo2" src="https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/fm_logo2.png">
				<img class="fm2-perill" src="https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/fm_perill.png">
				<view class="fm2-line"></view>
				<view class="fm2-p">团队发展动态评估报告(个人版)</view>
				<view class="fm2-texts adf">
					<view class="fm2-texts-pre"><span>客户公司：</span>{{ reportData.teamInfo.enterpriseName||'' }}</view>
					<view class="fm2-texts-pre"><span>团队名称：</span>{{ reportData.teamInfo.teamName||'' }}</view>
					<view class="fm2-texts-pre"><span>评估发起人：</span>{{ reportData.teamInfo.initiator||'' }}</view>
					<view class="fm2-texts-pre"><span>报告生成时间：</span>{{ reportData.teamInfo.reportDate||'' }}</view>
				</view>
				<view class="fm2-tip">免责声明：本团队测评报告基于您方团队填写的测评数据及相关信息生成，深圳创衡管理顾问有限公司不对报告内容的真实性、准确性和完整性负责。本报告仅供您了解团队情况、优化管理决策提供参考。报告结论不构成任何法律、商业或投资建议，亦不替代专业咨询意见。我方不对因使用本报告内容而产生的任何直接或间接损失承担责任。</view>
			</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)','padding':'0 8px 0 22px'}">
					<view class="vt-left" style="color: #FFFFFF;">PERILL模型介绍</view>
					<view class="vt-right">团队发展动态评估报告(个人版)</view>
				</view>
				<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>
				<view class="v2-six">
					<view class="vsix-title">PERILL六大纬度</view>
					<view class="vsix-p">PERILL评估提供了一个复杂的团队系统概览，它并非针对孤立的问题，也不是简单的优缺点，而是着眼于团队系统的复杂性。它通过6个影响因素(如下所述)提出问题，以揭示团队系统各要素之间的联系，以及这些联系如何影响团队的高效运作能力。</view>
					<view class="vsix-boxs">
						<view class="vsb adfac" v-for="(item,index) in sixWd" :key="index">
							<img class="vsb-img" :src="item.img"/>
							<view class="vsb-right">
								<view class="vsbr-top adfac">
									<view class="vsbrt-type" :style="{'background':item.color}">{{ item.type }}</view>
									<view class="vsbrt-title" :style="{'color':item.color}">{{ item.title }}</view>
								</view>
								<view class="vsbr-desc">{{ item.desc }}</view>
							</view>
						</view>
					</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">
					<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: 6px;">下面的条形图上的位置标记显示了团队在各个维度上的影响力评分。</view>
					<view style="width:100%;height:200px;" class="pdfEchart">
						<l-echart ref="ztzdfxRef" :canvas2d="true" @finished="initZtzdfxChart"></l-echart>
					</view>
					<view class="v2b-tip-title">注: 关于认同度、重要性分、影响力分的定义</view>
					<view class="v2b-tip-memo">
						a.“认同度分”，指标逻辑为评估发起者个人对当前主题所对应各问卷题目认同度评分的均值，用来表征其对这一主题问卷所陈述内容与团队情况的相符合程度的平均认知，最高分：5分，最低分：0分；<br>
						b.“重要分”，指标逻辑为根据评估发起者个人对当前主题所对应各问卷题目重要性评分的均值，用来表征其对这一主题问卷所陈述内容对于团队重要性的平均认知，最高分：5分，最低分：0分；<br>
						c.“影响力分”，指标逻辑为评估发起者个人对当前主题所对应各问卷题目的认同度评分与重要性评分乘积的均值，用来表征其对这一主题问卷所陈述内容对于团队的影响力水平，最高分：25分，最低分：0分；					 
					</view>
					<view class="v2b-title">评估结果</view>
					<view class="v2b-p" v-html="(reportData.totalDiagnosticOutput||'').replaceAll('\n\n','<br>').replaceAll('**','<b>')"></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">
					<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>').replaceAll('**','<b>')"></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="(n,i) in [[0,2],[2,4],[4,6]]" :key="i">
					<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 22px'}">
						<view class="vt-left" style="color: #FFFFFF;">PERILL六大纬度</view>
						<view class="vt-right">团队发展动态评估报告(个人版)</view>
					</view>
					<view v-for="(item,index) in reportData.dimensionAnalysis.slice(n[0],n[1])" :key="index">
						<view class="v2-title2">{{ item.title||'' }}</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.memeber.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-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.memeber.avgAgreement/6*100)+'%'}">
													<view class="vbt2r-tb-l-pre-zzt-numl">{{ ss.memeber.avgAgreement||0 }}</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" :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.memeber.avgVital/6*100)+'%'}">
													<view class="vbt2r-tb-l-pre-zzt-numr">{{ ss.memeber.avgVital||0 }}</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</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 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">作为团队教练，我们希望与您分享这次评估的深层价值，并为您描绘从个人视角走向团队共识的可能路径。</view>
				<view class="fdy-subtitle">一、这次个人评估为您理解团队提供了两个独特视角：</view>
				<view class="fdy-subtitle2">1. 个人观察的整合</view>
				<view class="fdy-p" style="margin-top: 6px;">本报告整合了您个人对团队当前状态（认同度）和未来期待（重要性）的评价，如同一面镜子，映照出您所感知的团队运作状态。它帮助您看见那些可能被忽略的惯性模式、盲点与认知差异。无论是您看到的优势、共识，还是待发展的领域，这些都构成了您个人视角下的团队画像。 </view>
				<view class="fdy-subtitle2">2. 进化方向的个人洞察</view>
				<view class="fdy-p" style="margin-top: 6px;">基于您的观察，报告勾勒出团队持续进化的潜在方向。这并非标准答案，而是帮助您识别那些对团队成功可能最关键的发展维度——无论是战略对齐、信任深化、协同效率、创新学习还是领导力进化。它将您个人的感受与对团队的期待连接起来，把模糊的感觉转化为可讨论、可聚焦的议题，为您后续参与团队对话提供事实依据。</view>
				<view class="fdy-subtitle">二、个人评估是重要的第一步，但团队的真实面貌往往需要更多视角。</view>
				<view class="fdy-p">本次评估仅代表您个人的观察，而团队作为一个系统，其全貌需要整合团队领导者、成员、赞助人及利益相关方等多方视角。这正是PERILL团队评估系统的核心价值：通过科学的、结构化的评估，帮助团队获得系统性洞察，实现高杠杆改进。</view>
				<view class="fdy-subtitle">三、我们邀请您：</view>
				<view class="fdy-subtitle2">1. 发起一次坦诚的团队对话</view>
				<view class="fdy-p" style="margin-top: 6px;">邀请关键成员，基于您的观察分享感受，倾听他人视角，开启团队共识的第一步。</view>
				<view class="fdy-subtitle2">2. 进行一次完整的团队PERILL评估</view>
				<view class="fdy-p" style="margin-top: 6px;">邀请团队负责人、成员、赞助人及利益相关方共同参与，获得真实、立体的团队诊断报告，为团队发展奠定共同事实基础。</view>
				<view class="fdy-subtitle2">3. 考虑获取专业支持</view>
				<view class="fdy-p" style="margin-top: 6px;">团队教练可作为中立的思考伙伴，帮助团队整合多元视角，建立共同语言，制定切实可行的进化路径。</view>
				<view class="fdy-p" style="margin-top: 20px;">每一支超越高绩效的团队，都始于对现状清醒的认知与持续进化的共同勇气。现在，您已拥有个人视角的洞察，下一步是走向团队共识——让每一次对话，都成为团队蜕变的契机。</view>
				<view class="fdy-p">PERILL不止于评估，更在于赋能。期待与您和团队同行，见证未来的更多可能。</view>
				<view class="fdy-p">具体需求可联系您的团队教练或扫码联系“⼤衡同学”。</view>
				<view class="fdy-code adfacjc"><img :src="'https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/fdy_code.png'"></view>
			</view>
		</view>
		<view class="pdf_btn" @click="createPdf">生成PDF</view>
   </view>
</template>

<script name="">
	import { BaseApi } from '@/http/baseApi.js';
	import * as echarts from '@/pagesHome/components/lime-echart/static/echarts.min.js'
	import lEchart from '@/pagesHome/components/lime-echart/components/l-echart/l-echart.vue'
    
    export default {
        name: 'ZtzdfxChart',
		components:{ lEchart },
        data() {
        return {
			reportId:'',
            reportData: null,
			isChartReady: false,
			scale:1,
			originalContainerHeight: 0,
			containerScaledHeight: 'auto', 
            sixWd: [
				{
					img:'https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/intro_img_p.png',
					type:'P',
					title:'宗旨与动机',
					desc:'指团队共享的目的和存在的意义, 包含对共同的愿景，目标和优先级的清晰度。',
					color:'#761E6A'
				},
				{
					img:'https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/intro_img_e.png',
					type:'E',
					title:'外部流程、系统与结构',
					desc:'指团队与其外部利益相关者 - 客户,供应商,股东,组织内的上级及其他团队的互动关系和协作机制。',
					color:'#009191'
				},
				{
					img:'https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/intro_img_r.png',
					type:'R',
					title:'人际关系',
					desc:'指团队成员共同工作时的关系状态–他们是否相互尊重和信任对方的能力,是否足够心理安全以能够坦诚沟通,是否真正关心彼此的幸福感等。',
					color:'#FFD750'
				},
				{
					img:'https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/intro_img_i.png',
					type:'I',
					title:'内部流程、系统与结构',
					desc:'指团队如何管理工作任务和流程(包括但不限于会议、任务分配和团队情绪等),互相支持以及高质量的沟通和决策。',
					color:'#4EB2B2'
				},
				{
					img:'https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/intro_img_l.png',
					type:'L',
					title:'学习',
					desc:'指团队如何应对多变的环境和保持持续的进步和成⻓,能够从经验中反思、提炼并应用知识的能力。',
					color:'#AFCDF5'
				},
				{
					img:'https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/intro_img_l2.png',
					type:'L',
					title:'领导力',
					desc:'指团队认为需要怎样的领导行为能够让他们,作为个人或者团队做到最好。团队可以和他们的领导者讨论他们的责任及承担方式,以帮助领导者成为他们需要的领导者。',
					color:'#002846'
				}
            ],
			pdfImages:[],
		};
    },
	onLoad(options) {
		this.reportId = options.reportId;
		this.getReportData();
	},
    mounted() {
		this.calculateScaleAndPosition();
		uni.onWindowResize(() => {
			this.calculateScaleAndPosition();
		});
    },
    methods: {
		getReportData(){
			this.$api.get(`/core/report/previewReport/${this.reportId}`).then(({data:res})=>{
				if(res.code!==0) return this.$showToast(res.msg)
				this.reportData = res.data;
				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:`「领导力」维度，我们旨在探究团队领导者的素质和行为(包括但不限于正式与非正式的引导、赋能与责任承担方式)如何对团队功能和其他因素产生影响,以及这是积极的还是消极的。`
					}
				]
				if(this.reportData&&this.reportData.dimensionAnalysis){
					this.reportData.dimensionAnalysis.forEach((d,i)=>{
						d.scoreSpreads.forEach(s=>{
							s.theme = s.theme.replaceAll('，',' ').replaceAll(',',' ');
						})
						let temp = tempDimensionAnalysis.find(t=>t.dimensionCode === d.dimensionCode)||{};
						this.reportData.dimensionAnalysis[i] = {...d,...temp}
					})
				}
			})
		},
		// async createPdf(){
		// 	uni.showLoading({
		// 		title:'正在生成PDF所需的图片...'
		// 	})
		// 	const imageUrl = await this.downloadZtzdfximage();
		//  this.pdfImages.push(imageUrl);
		
		// 	for(const d of this.reportData.dimensionAnalysis){
		// 		const fileurl = await this.generateScoreImage(d);
		// 		this.pdfImages.push(fileurl)
		// 	}
			
		// 	this.$showToast(`生成成功，共计${this.pdfImages.length}张`);
		// 	uni.hideLoading();
		// 	console.log(this.pdfImages);
		// },
		// Promise.all方法，性能更高
		async createPdf(){
		    uni.showLoading({
		        title:'正在生成PDF所需的图片...'
		    })
		    try {
		        const ztzdfximagePromise = this.downloadZtzdfximage();
		        const dimensionImagePromises = this.reportData.dimensionAnalysis.map(d => {
		            return this.generateScoreImage(d,d.scoreSpreads||[]);
		        });
		
		        const allImageUrls = await Promise.all([
		            ztzdfximagePromise, 
		            ...dimensionImagePromises
		        ]);
		        this.pdfImages = allImageUrls;
				
				this.$api.post('/core/report/reportToPdf',{
					images:this.pdfImages,
					reportId:this.reportId
				}).then(({data:res})=>{
					if(res.code!==0) return this.$showToast(res.msg)
					uni.hideLoading();
					this.$showToast('生成成功');
					setTimeout(()=>{
						uni.redirectTo({
							url:'/pagesHome/report'
						})
					},1500)
				})
		    } catch (error) {
		        uni.hideLoading();
		        console.error('生成图片过程中发生错误:', error);
		        uni.showToast({ title: '生成图片失败，请重试', icon: 'none' });
		    }
		},
		// 绘制主函数
		async generateScoreImage(dimensionData, scoreData) {
			return new Promise(resolve => {
				console.log('开始生成图片...');
				// --- 1. 定义尺寸和样式 ---
				const canvasWidth = 588;
				const headerHeight = 26;
				const rowHeight = 54;
				const totalHeight = headerHeight + rowHeight * scoreData.length;

				const leftColWidth = 280;
				const rightColWidth = 308;

				// --- 2. 获取 Canvas 节点 ---
				const query = uni.createSelectorQuery().in(this);
				query.select('#score-canvas')
					.fields({
						node: true,
						size: true
					})
					.exec(async (res) => {
						if (!res || !res[0] || !res[0].node) {
							console.error('获取 Canvas 节点失败，请检查 canvas-id 和 type="2d" 是否正确设置。');
							uni.showToast({
								title: '组件初始化失败',
								icon: 'none'
							});
							return;
						}

						const canvasNode = res[0].node;
						const ctx = canvasNode.getContext('2d');
						const dpr = uni.getSystemInfoSync().pixelRatio;

						// --- 3. 设置画布尺寸和缩放以适应高分屏 ---
						canvasNode.width = canvasWidth * dpr;
						canvasNode.height = totalHeight * dpr;
						ctx.scale(dpr, dpr);

						// --- 4. 开始绘制 ---
						// 绘制大背景
						ctx.fillStyle = '#FFFFFF';
						ctx.fillRect(0, 0, canvasWidth, totalHeight);

						// --- 5. 绘制表头 ---
						// 左侧表头背景
						ctx.fillStyle = dimensionData.thbgcolor;
						ctx.fillRect(0, 0, leftColWidth, headerHeight);

						// 右侧表头背景
						ctx.fillRect(leftColWidth, 0, rightColWidth, headerHeight);

						// 左侧表头文字
						ctx.fillStyle = dimensionData.thtextcolor;
						ctx.font = 'bold 9px sans-serif';
						ctx.textBaseline = 'middle';
						ctx.textAlign = 'left';
						ctx.fillText('主题', 15, headerHeight / 2);

						// 左侧表头分割线
						ctx.strokeStyle = 'rgba(255,255,255,0.24)';
						ctx.lineWidth = 1;
						ctx.beginPath();
						ctx.moveTo(leftColWidth - 54, 0);
						ctx.lineTo(leftColWidth - 54, headerHeight);
						ctx.stroke();
						
						// 影响力分右侧分割线 (Header)
						ctx.beginPath();
						ctx.moveTo(leftColWidth, 0);
						ctx.lineTo(leftColWidth, headerHeight);
						ctx.stroke();

						ctx.textAlign = 'center';
						ctx.fillText('影响力分', leftColWidth - 27, headerHeight / 2);

						// 右侧表头分割线
						ctx.beginPath();
						ctx.moveTo(leftColWidth + rightColWidth / 2, 0);
						ctx.lineTo(leftColWidth + rightColWidth / 2, headerHeight);
						ctx.stroke();

						// 右侧表头文字
						ctx.fillText('认同度分', leftColWidth + rightColWidth / 4, headerHeight / 2);
						ctx.fillText('重要性分', leftColWidth + rightColWidth * 0.75, headerHeight / 2);


						// --- 6. 循环绘制每一行 ---
						for (let i = 0; i < scoreData.length; i++) {
							const item = scoreData[i];
							const yPos = headerHeight + i * rowHeight;
							this.drawTableItem(ctx, item, yPos, leftColWidth, rightColWidth, rowHeight, dimensionData);
						}

						// --- 7. 绘制最外层边框 ---
						ctx.strokeStyle = '#E6EAED';
						ctx.lineWidth = 1;
						ctx.strokeRect(0, 0, canvasWidth, totalHeight);


						// --- 9. 生成图片 ---
						uni.hideLoading();
						uni.canvasToTempFilePath({
							canvas: canvasNode,
							x: 0,
							y: 0,
							width: canvasWidth,
							height: totalHeight,
							destWidth: canvasWidth * dpr,
							destHeight: totalHeight * dpr,
							success: async (result) => {
								console.log('图片生成成功!', result.tempFilePath);
								const fileurl = await this.uploadFilePromise(result.tempFilePath);
								console.log(fileurl, 'fileurl');
								resolve(fileurl)
							},
							fail: (err) => {
								console.error('图片生成失败', err);
								uni.showToast({
									title: '图片生成失败',
									icon: 'none'
								});
							}
						}, this);
					});
			})
		},
		drawTableItem(ctx, item, y, leftW, rightW, h, dimensionData) {
			// 1. 设置通用边框样式
			ctx.strokeStyle = dimensionData.bordercolor;
			ctx.lineWidth = 1;

			// 绘制整行下边框 (贯穿左右)
			ctx.beginPath();
			ctx.moveTo(0, y + h);
			ctx.lineTo(leftW + rightW, y + h);
			ctx.stroke();

			// --- 计算高度 ---
			// 必须先设置字体，否则 measureText 计算不准确
			ctx.font = 'bold 9px sans-serif';
			let themeHeight = this.calculateWrappedTextHeight(ctx, item.theme, 14, leftW - 54 - 20);
			
			ctx.font = '8px sans-serif';
			let questionHeight = this.calculateWrappedTextHeight(ctx, item.question, 10, leftW - 54 - 20);
			
			let totalTextHeight = themeHeight + 4 + questionHeight; // 4 is spacing
			let startY = y + (h - totalTextHeight) / 2;

			// --- 绘制左侧文字 ---
			// Theme Title
			ctx.fillStyle = dimensionData.titlecolor;
			ctx.font = 'bold 9px sans-serif';
			ctx.textAlign = 'left';
			ctx.textBaseline = 'top';
			this.drawWrappedTextTop(ctx, item.theme, 10, startY, 14, leftW - 54 - 20);

			// Question Tip
			ctx.fillStyle = '#002846';
			ctx.font = '8px sans-serif';
			this.drawWrappedTextTop(ctx, item.question, 10, startY + themeHeight + 4, 10, leftW - 54 - 20);

			// Score
			ctx.fillStyle = '#002846';
			ctx.font = 'bold 12px DIN, sans-serif';
			ctx.textAlign = 'center';
			ctx.textBaseline = 'middle';
			ctx.fillText((item.memeber && item.memeber.avgScore) || 0, leftW - 27, y + h / 2);

			// 2. 右侧
			const rightX = leftW;

			// 绘制中间线
			const centerX = rightX + rightW / 2;

			// Bar Charts
			const barHeight = 10;
			const barY = y + (h - barHeight) / 2;

			// Agreement (Left, Red/Purple)
			// Width = avgAgreement / 6 * 100% of half width?
			const maxVal = 6;
			const halfW = rightW / 2;

			const avgAgreement = (item.memeber && item.memeber.avgAgreement) || 0;
			const avgVital = (item.memeber && item.memeber.avgVital) || 0;

			const agreeW = (avgAgreement / maxVal) * halfW;
			const vitalW = (avgVital / maxVal) * halfW;

			// --- 绘制背景轨道 (灰色) ---
			// 模仿 CSS .vbt2r-tb-l-pre-bg: width: calc(100% - 16px); height: 4px;
			// 左右各留 8px 空隙？或者就是简单的横条
			const trackHeight = 4;
			const trackY = y + (h - trackHeight) / 2;
			ctx.fillStyle = '#E6EAED';
			
			// 左侧轨道背景 (从右向左)
			this.drawRoundedRect(ctx, rightX + 8, trackY, halfW - 8, trackHeight, 2);
			// 右侧轨道背景 (从左向右)
			this.drawRoundedRect(ctx, centerX, trackY, halfW - 8, trackHeight, 2);

			// Draw Agreement Bar (grows from center to left)
			ctx.fillStyle = '#BA8EB4';
			// 左侧条，圆角在左边 [2, 0, 0, 2]
			this.drawCustomRoundedRect(ctx, centerX - agreeW, barY, agreeW, barHeight, [2, 0, 0, 2]);

			// Draw Vital Bar (grows from center to right)
			ctx.fillStyle = '#80C8C8';
			// 右侧条，圆角在右边 [0, 2, 2, 0]
			this.drawCustomRoundedRect(ctx, centerX, barY, vitalW, barHeight, [0, 2, 2, 0]);
			
			// --- 绘制数字标签 ---
			const tagW = 16;
			const tagH = 20;
			
			// 左标签位置 (中心点)
			// CSS: left: -8px (relative to bar start/end). 
			// 实际上是在条形图的末端(远离中心的那一端)
			// 左侧条形图末端 x = centerX - agreeW
			// 标签中心 x = centerX - agreeW
			this.drawValueTag(ctx, avgAgreement, centerX - agreeW, y + h/2, '#904A87', 'rgba(131,52,120,0.19)', 'rgba(118,30,106,0.1)');
			
			// 右标签位置
			// 右侧条形图末端 x = centerX + vitalW
			this.drawValueTag(ctx, avgVital, centerX + vitalW, y + h/2, '#199C9C', 'rgba(51,167,167,0.31)', 'rgba(118,30,106,0.1)');
		},
		// 辅助函数：绘制带样式的数值标签
		drawValueTag(ctx, value, cx, cy, textColor, borderColor, shadowColor) {
			const width = 16;
			const height = 20;
			const x = cx - width / 2;
			const y = cy - height / 2;
			const radius = 4;
			
			ctx.save();
			// 阴影
			ctx.shadowOffsetX = 0;
			ctx.shadowOffsetY = 4;
			ctx.shadowBlur = 8;
			ctx.shadowColor = shadowColor;
			
			// 背景
			ctx.fillStyle = '#FFFFFF';
			this.drawRoundedRectPath(ctx, x, y, width, height, radius);
			ctx.fill();
			
			// 边框 (取消阴影绘制边框)
			ctx.shadowColor = 'transparent';
			ctx.strokeStyle = borderColor;
			ctx.lineWidth = 1;
			ctx.stroke();
			
			// 文字
			ctx.fillStyle = textColor;
			ctx.font = 'bold 12px DIN, sans-serif';
			ctx.textAlign = 'center';
			ctx.textBaseline = 'middle';
			ctx.fillText(value, cx, cy);
			
			ctx.restore();
		},
		// 辅助函数：绘制圆角矩形路径
		drawRoundedRectPath(ctx, x, y, w, h, r) {
			ctx.beginPath();
			ctx.moveTo(x + r, y);
			ctx.lineTo(x + w - r, y);
			ctx.arcTo(x + w, y, x + w, y + h, r);
			ctx.lineTo(x + w, y + h - r);
			ctx.arcTo(x + w, y + h, x, y + h, r);
			ctx.lineTo(x + r, y + h);
			ctx.arcTo(x, y + h, x, y, r);
			ctx.lineTo(x, y + r);
			ctx.arcTo(x, y, x + w, y, r);
			ctx.closePath();
		},
		// 辅助函数：绘制圆角矩形 (简单版)
		drawRoundedRect(ctx, x, y, w, h, r) {
			this.drawRoundedRectPath(ctx, x, y, w, h, r);
			ctx.fill();
		},
		// 辅助函数：绘制自定义四个角圆角的矩形
		drawCustomRoundedRect(ctx, x, y, w, h, radii) {
			// radii: [tl, tr, br, bl]
			if (!Array.isArray(radii)) radii = [radii, radii, radii, radii];
			const [tl, tr, br, bl] = radii;
			
			ctx.beginPath();
			ctx.moveTo(x + tl, y);
			ctx.lineTo(x + w - tr, y);
			ctx.arcTo(x + w, y, x + w, y + h, tr);
			ctx.lineTo(x + w, y + h - br);
			ctx.arcTo(x + w, y + h, x, y + h, br);
			ctx.lineTo(x + bl, y + h);
			ctx.arcTo(x, y + h, x, y, bl);
			ctx.lineTo(x, y + tl);
			ctx.arcTo(x, y, x + w, y, tl);
			ctx.closePath();
			ctx.fill();
		},
		// 辅助函数：计算自动换行文字的总高度
		calculateWrappedTextHeight(ctx, text, lineHeight, maxWidth) {
			if (!text) return 0;
			let words = text.split('');
			let line = '';
			let height = lineHeight; // 至少有一行
			for (let n = 0; n < words.length; n++) {
				let testLine = line + words[n];
				let metrics = ctx.measureText(testLine);
				let testWidth = metrics.width;
				if (testWidth > maxWidth && n > 0) {
					line = words[n];
					height += lineHeight;
				} else {
					line = testLine;
				}
			}
			return height;
		},
		// 辅助函数：绘制自动换行文字 (从顶部开始)
		drawWrappedTextTop(ctx, text, x, y, lineHeight, maxWidth) {
			if (!text) return;
			let words = text.split('');
			let line = '';
			let currentY = y;

			for (let n = 0; n < words.length; n++) {
				let testLine = line + words[n];
				let metrics = ctx.measureText(testLine);
				let testWidth = metrics.width;
				if (testWidth > maxWidth && n > 0) {
					ctx.fillText(line, x, currentY); // 使用 currentY 作为顶部基线
					line = words[n];
					currentY += lineHeight;
				} else {
					line = testLine;
				}
			}
			ctx.fillText(line, x, currentY);
		},
		calculateScaleAndPosition() {
		    uni.getSystemInfo({
				success: (res) => {
				    const screenWidth = res.windowWidth; // 手机屏幕的宽度
				    const pcContentWidth = 630; // PC端内容的原始宽度
				    this.scale = screenWidth / pcContentWidth;
				    this.$nextTick(() => {
						if (this.$refs.ztzdfxRef) {
							this.initZtzdfxChart();
						}
					});
				}
		    });
		},
		calculatePdfContainerHeight() {
			uni.createSelectorQuery().in(this).select('#pdfContainer').boundingClientRect(rect => {
				if (rect) {
					this.originalContainerHeight = rect.height;
					this.containerScaledHeight = this.originalContainerHeight * this.scale;
					// console.log('原始高度:', this.originalContainerHeight, '缩放比例:', this.scale, '缩放后高度:', this.containerScaledHeight);
				}
			}).exec();
		},
		downloadZtzdfximage(){
			return new Promise(resolve=>{
				if (!this.isChartReady) return console.log('图表尚未准备好');
				
				const chartRef = this.$refs.ztzdfxRef;
				if (!chartRef) return console.log('无法找到图表组件');
				
				chartRef.canvasToTempFilePath({
					success: async (res) => {
						const imageUrl = await this.uploadFilePromise(res.tempFilePath);
						console.log(imageUrl,'imageUrl');
						resolve(imageUrl)
					},
					fail: (err) => {
						console.log('生成图片失败:', err);
					}
				});
			})
		},
		uploadFilePromise(url) {
		  return new Promise((resolve, reject) => {
		    let a = uni.uploadFile({
		      url: BaseApi+'/uploadFile',
		      filePath: url,
		      name: 'file',
		      success: (res) => {
		        setTimeout(() => {
					let data = JSON.parse(res.data)
					if(data&&data.code===0){
						resolve(data.data);
					}else this.$showToast(data?.msg)
		        }, 1000);
		      },
			  fail: err =>{
				resolve('');
			  }
		    });
		  });
		},
		async initZtzdfxChart() {
            let xdata = ['宗旨与动机', '外部流程、系统与结构', '关系', '内部流程、系统与结构', '学习', '领导力'].reverse();
            let yvalue = [40, 25, 30, 35, 33, 47].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] 
					}
				};
			});
            const chart = await this.$refs.ztzdfxRef.init(echarts);
            let option = {
				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*this.scale // 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*this.scale
				  }
				},
				series: [
				  {
					type: 'bar',
					barWidth: `${8*this.scale}px`,
					data: yData
				  }
				]
            };
            chart.setOption(option);
			this.isChartReady = true;
			this.$nextTick(() => {
				this.calculatePdfContainerHeight();
			});
        },
      }
    };
</script>

<style scoped lang="scss">
	.offscreen-canvas {
		position: fixed;
		top: -9999px;
		left: -9999px;
	}
	
	.pdf_btn{
		padding: 15rpx 20rpx;
		border-radius: 20rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		background: #189B9B;
		position: fixed;
		right: 30rpx;
		bottom: 100rpx;
		z-index: 1000;
	}
	
	.page-wrappe{
		width: 100%;
		background: #FFFFFF;
		overflow-x: hidden;
		overflow-y: auto;
		.pdf-container{
			width: 630px;
			padding: 0 20rpx;
			box-sizing: border-box;
			transform-origin: top left;
		}
	}
	
	@import '../static/pdf.scss';
</style>