ChuangHengWx/pagesHome/pdfZyb.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">
			<!-- 封面 -->
			<div 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">
				<div class="fm2-line"></div>
				<div class="fm2-p" style="margin-top: 4px;font-size: 38px;">团队发展动态评估报告(团队版)</div>
				<div class="fm2-texts adf">
					<div class="fm2-texts-pre adf" style="margin-top: 6px;">
						<div class="fm2-texts-pre-span">客户名称：</div>
						<div class="fm2-texts-pre-val">{{ reportData.teamInfo.enterpriseName||'' }}</div>
					</div>
					<div class="fm2-texts-pre adf" style="margin-top: 6px;">
						<div class="fm2-texts-pre-span">团队名称：</div>
						<div class="fm2-texts-pre-val">{{ reportData.teamInfo.teamName||'' }}</div>
					</div>
					<div class="fm2-texts-pre adf" style="margin-top: 6px;">
						<div class="fm2-texts-pre-span">团队职能类型：</div>
						<div class="fm2-texts-pre-val">{{ reportData.teamInfo.functionName||'' }}</div>
					</div>
					<div class="fm2-texts-pre adf" style="margin-top: 6px;">
						<div class="fm2-texts-pre-span">团队模式类型：</div>
						<div class="fm2-texts-pre-val">{{ reportData.teamInfo.organizationName||'' }}</div>
					</div>
					<div class="fm2-texts-pre adf" style="margin-top: 6px;">
						<div class="fm2-texts-pre-span">评估发起人：</div>
						<div class="fm2-texts-pre-val">{{ reportData.teamInfo.initiator||'' }}</div>
					</div>
					<div class="fm2-texts-pre adf" style="margin-top: 6px;">
						<div class="fm2-texts-pre-span">报告生成时间：</div>
						<div class="fm2-texts-pre-val">{{ reportData.teamInfo.reportDate||'' }}</div>
					</div>
				</div>    
				<div class="fm2-tip" style="margin-top: 12px;">免责声明：本团队测评报告基于您方团队填写的测评数据及相关信息生成，深圳创衡管理顾问有限公司不对报告内容的真实性、准确性和完整性负责。本报告仅供您了解团队情况、优化管理决策提供参考。报告结论不构成任何法律、商业或投资建议，亦不替代专业咨询意见。我方不对因使用本报告内容而产生的任何直接或间接损失承担责任。</div>
			</div>
			<!-- 介绍 -->
			<div class="cd_box" style="border: none">
				<div class="v2-top adfacjb" :style="{'background-image':'url(https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/intro_title_bg.png)'}">
					<div class="vt-left" style="color: #FFFFFF;">介绍<span>PERILL模型简介</span></div>
					<div class="vt-right">团队发展动态评估报告(团队版) </div>
				</div>
				<div class="v2-box" style="border: 1px solid #33A7A7;">
					<img class="vb-img1" :src="'https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/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(https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/intro_top_title_bg2.png)'}">
					<div class="vt-left">总体评估分析</div>
					<div class="vt-right">团队发展动态评估报告(团队版) </div>
				</div>
				<div class="v2-box" style="border: 1px solid #33A7A7;">
					<img class="vb-img1" :src="'https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/intro_box_img1.png'">
					<div class="v2-p2">报告的核心是PERILL评估分析下的整体团队表现。这包括团队在PERILL模型每个关键要素上的综合得分，通过结合得分和置信指数，我们能够展示出高功能和低功能领域。</div>
					<div class="v2-p2" style="margin-top: 10px;font-weight: 400;color: #002846;font-size: 10px;">下面图中的位置标记显示了团队按影响力划分的总分。</div>
					<div class="vb-category">
						<div class="vbc-pre adfac">
							<div class="vbcp-yuan y1"></div>
							<div class="vbcp-text">团队领导者 Team Leader</div>
						</div>
						<div class="vbc-pre adfac">
							<div class="vbcp-yuan y2"></div>
							<div class="vbcp-text">团队成员 Team Member</div>
						</div>
						<div class="vbc-pre adfac">
							<div class="vbcp-yuan y3"></div>
							<div class="vbcp-text">利益相关方 Stakeholder</div>
						</div>
						<div class="vbc-pre adfac">
							<div class="vbcp-yuan y4"></div>
							<div class="vbcp-text">赞助人/出资人 Sponsor</div>
						</div>
					</div>
					<view style="width:360px;height:360px;margin: 0 auto;" class="pdfEchart">
						<l-echart ref="ztzdfxRef" :canvas2d="true" @finished="initZtzdfxChart" style="width: 100%;height: 100%;"></l-echart>
					</view>
					<div class="v2b-tip-title" style="color: #199C9C;">注: 关于认同度、重要性分、影响力分的定义</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>')"></div>
					<div class="v2b-title">评估建议</div>
					<div class="v2b-p" v-html="(reportData.totalDiagnosisSuggest||'').replaceAll('\n\n','<br>')"></div>
				</div>
			</div>
			<!-- 多维度 -->
			<canvas type="2d" canvas-id="score-canvas" id="score-canvas" class="offscreen-canvas"></canvas>
			<template v-if="reportData&&reportData.dimensionAnalysis&&reportData.dimensionAnalysis.length">
				<div class="cd_box adffc" style="border: none;"
					v-for="(item,index) in reportData.dimensionAnalysis" :key="index">
					<div class="v2-top adfacjb":style="{'background-image':'url('+'https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/'+typeDict[item.title]+'_title_bg.png)'}">
						<div class="vt-left" :class="{'black':(item.title=='人际关系'||item.title=='学习')}">{{ item.title }}</div>
						<div class="vt-right">团队发展动态评估报告(团队版) </div>
					</div>
					<div class="v2-box" :style="{'border':'none','padding':0}">
						<div class="v2-p2">{{ item.desc }}</div>
						<div class="v2-subp">主题均分</div>
						<div class="vb-table adf" :style="{'border':'1px solid #E6EAED','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-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.regular.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-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.regular.avgAgreement/6*100)+'%'}"></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.regular.avgVital/6*100)+'%'}"></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>
						<div class="v2-subp">评估结果</div>
						<div class="v2-p" style="margin-top: 6px;" v-html="(item.diagnosisOutput||'').replaceAll('\n\n','<br>')"></div>
					</div>
				</div>
			</template>
			<!-- 封底页 -->
			<div class="cd_box fdy" style="border: none;">
				<div class="v2-top adfacjb" :style="{'background-image':'url(https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/fdy_title_bg.png)'}"></div>
				<div class="fdy-title">致团队：从评估到行动，开启团队进化跃迁之旅</div>
				<div class="fdy-p">当您阅读至此，首先恭喜您和团队伙伴共同完成了一次完整、专业的团队评估！这标志着团队发展旅程中一个充满可能性的新起点。</div>
				<div class="fdy-p">作为团队教练，我们希望与您分享PERILL评估的科学价值，并为您描绘从系统诊断到协同进化的路径。 </div>
				<div class="fdy-subtitle">一、这份报告为团队带来了什么？ </div>
				<div class="fdy-p" style="margin-top: 6px;">这份报告整合了团队内部（如：团队领导者与成员）与外部（如：客户、合作伙伴、赞助人）的多方视角，为您呈现团队作为一个“系统”的真实状态。它帮助团队：</div>
				<div class="fdy-p" style="margin-top: 0px;text-indent: 24px;">· 看见惯性模式与盲点——那些日常被忽略的协作断点、沟通落差与共识偏差。</div>
				<div class="fdy-p" style="margin-top: 0px;text-indent: 24px;">· 获得立体画像而非主观印象——基于数据而非直觉，客观定位团队在六大维度的表现。</div>
				<div class="fdy-p" style="margin-top: 0px;text-indent: 24px;">· 识别高杠杆改进区——不只列出问题，更揭示“从哪里改变，能带动全局提升”。</div>
				<div class="fdy-subtitle">二、PERILL 评估的科学洞察：不只是分数，更是系统思维</div>
				<div class="fdy-p" style="margin-top: 6px;">PERILL源自David Clutterbuck教授数十年的实证研究，其价值远超过一份评分报告。它帮助团队实现：</div>
				<div class="fdy-subtitle2">从“凭感觉管理”到“系统诊断”</div>
				<div class="fdy-p" style="margin-top: 6px;text-indent: 24px;">传统团队讨论容易陷入“我觉得”“你认为”的主观争论。PERILL提供共同语言与结构框架，让对话基于事实，聚焦系统障碍而非个人指责。</div>
				<div class="fdy-subtitle2">揭示“维度关联”，避免单一解药</div>
				<div class="fdy-p" style="margin-top: 6px;text-indent: 24px;">PERILL 揭示六大维度间的动态关联，例如：</div>
				<div class="fdy-p" style="margin-top: 0px;text-indent: 24px;">· 人际关系（R）紧张 → 抑制信息共享 → 影响学习（L）与创新 → 动摇宗旨认同（P）。</div>
				<div class="fdy-p" style="margin-top: 0px;text-indent: 24px;">· 改进关键点：可能只需提升心理安全（R），即可激活学习（L）与协同（I）。</div>
				<div class="fdy-subtitle2">赋能团队成为“自我进化系统”</div>
				<div class="fdy-p" style="margin-top: 6px;text-indent: 24px;">评估过程本身就是一次深度对话与反思。通过共同诊断、共同制定行动，团队主人翁意识被激发，变革可持续性远高于外部强加的“方案”。</div>
				<div class="fdy-subtitle">三、接下来，团队可以如何行动？</div>
				<div class="fdy-p" style="margin-top: 8px;">报告只是开始，真正的进化发生在对话与实践中。可以依照团队的需求去安排以下内容</div>
				<div class="fdy-subtitle2">1. 召开一次“报告解读与共识工作坊”</div>
				<div class="fdy-p" style="margin-top: 6px;text-indent: 24px;">邀请专业团队教练与团队一起开放地探讨评估结果，理解数据背后的含义，并就<span style="font-weight: bold;">“我们接下来共同聚焦哪1-2个维度？”</span>达成共识。这个过程本身，就是一次强有力的团队对话与承诺建立。</div>
				<div class="fdy-subtitle2">2. 针对关键挑战，设计专题行动实验</div>
				<div class="fdy-subtitle2">3. 如需深度支持，可考虑引入团队教练辅导助力团队发展</div>
				<div class="fdy-p">每一支高价值团队，都始于对现状清醒的认知与共同进化的勇气。PERILL为团队提供了导航仪与路线图——下一步，行动在您们手中。</div>
				<div class="fdy-p">PERILL不止于评估，更在于赋能。期待与您和团队同行，见证未来的更多可能。</div>
				<div class="fdy-p" style="margin-top: 41px;">具体需求可联系您的团队教练 或 扫码联系“⼤衡同学”。</div>
				<div class="fdy-code adfacjc"><img class="fdy-code-team" :src="'https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/fdy_code.png'"></div>
			</div>
		</view>
		<view class="pdf_btn" @click="createPdf">生成PDF</view>
		<view class="loading adffcacjc" v-if="isLoading">
			<u-loading-icon text="数据加载中，请耐心等待" :vertical="true" size="72" color="#FFFFFF" textSize="32" textColor="#FFFFFF"></u-loading-icon>
		</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 {
			isLoading: true,
			reportId:'',
			reportData: null,
			isChartReady: false,
			scale:1,
			originalContainerHeight: 0,
			containerScaledHeight: 'auto', 
            typeDict: {
				'宗旨与动机':'zzdj',
				'外部流程、系统与结构':'wbjg',
				'人际关系':'rjgx',
				'内部流程、系统与结构':'nbjg',
				'学习':'xx',
				'领导力':'ldl'
            },
            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(async ({data:res})=>{
				if(res.code!==0) return this.$showToast(res.msg)
				this.reportData = res.data;
				
				const tempDimensionAnalysis = [
					{
						title:'宗旨与动机',thbgcolor:'#761E6A',thtextcolor:'#FFFFFF',titlecolor:'#761E6A',dimensionCode:"purpose",
						desc:`「宗旨与动机」维度，我们旨在探究团队是否有清晰的存在理由和明确的方向,能够激发团队成员的动力并吸引他们的想象力,以及个人与集体的身份认同是否围绕共同的目标,并在实现目标的优先次序上达成一致。`
					},
					{
						title:'外部流程、系统与结构',thbgcolor:'#009191',thtextcolor:'#FFFFFF',titlecolor:'#009191',dimensionCode:"external",
						desc:`「外部流程、系统与结构」维度，我们旨在探究团队如何与各种利益相关者互动，他们与团队的利益相关方各自如何寻求了解对方，以及现有系统和流程的有效性，以帮助管理不同利益相关者的期望和需求。`
					},
					{
						title:'人际关系',thbgcolor:'#FFD750',thtextcolor:'#002846',titlecolor:'#002846',dimensionCode:"relationship",
						desc:`「人际关系」维度，我们旨在探究团队成员相互沟通交流的状态,团队成员的信任程度、尊重和关心的程度、心理安全度,以及团队成员之间的关系如何促进(或破坏)协作。`
					},
					{
						title:'内部流程、系统与结构',thbgcolor:'#4EB2B2',thtextcolor:'#FFFFFF',titlecolor:'#33A7A7',dimensionCode:"internal",
						desc:`「内部流程、系统与结构」维度，我们旨在探究团队在管理工作任务和流程中如何平衡责任与自主权进行协作。主要关注团队应对变化时的敏捷程度、日常沟通方式以及内部决策过程的有效性。`
					},
					{
						title:'学习',thbgcolor:'#AFCDF5',thtextcolor:'#002846',titlecolor:'#002846',dimensionCode:"learning",
						desc:`「学习」维度，我们旨在探究团队如何提高其绩效(完成当下的任务)、能力(提高技能和资源以处理明天的任务)和容量(⻓期的愿景,用更少的资源做更多的事情)以应对当前和未来的任务。同时还关注团队如何管理这些能力和提高效率。`
					},
					{
						title:'领导力',thbgcolor:'#002846',thtextcolor:'#FFFFFF',titlecolor:'#002846',dimensionCode:"leadership",
						desc:`「领导力」维度，我们旨在探究团队领导者的素质和行为(包括但不限于正式与非正式的引导、赋能与责任承担方式)如何对团队功能和其他因素产生影响,以及这是积极的还是消极的。`
					}
				]
				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}
				})
				
				// 【关键逻辑】在数据渲染后，开始预加载图片
				await this.$nextTick(); // 确保DOM更新完毕

				try {
					const imageUrls = this.collectImageUrls();
					const results = await this.preloadAllImages(imageUrls);
					
					// (可选) 检查加载结果并上报或提示
					const failedImages = results
						.filter(result => result.status === 'rejected')
						.map(result => result.reason.url); // 获取加载失败的图片URL

					if (failedImages.length > 0) {
						console.error(`加载失败的图片 (重试3次后):`, failedImages);
						this.$showToast('部分图片资源加载失败');
					} else {
						console.log('所有依赖的图片已加载完成!');
					}

				} catch (error) {
					// Promise.allSettled 本身不应该抛出错误，这里作为保险
					console.error('预加载过程中发生意外错误:', error);
				} finally {
					// 无论成功或失败，最后都隐藏loading
					this.isLoading = false; 
				}
			}).catch(err => {
				// 网络请求失败等情况
				console.error('获取报告数据失败:', err);
				this.isLoading = false;
				this.$showToast('获取报告数据失败，请检查网络');
			});
		},
		/**
		 * @description 新增：收集页面上所有需要预加载的图片URL
		 * @returns {Array<string>} 包含所有图片URL的数组
		 */
		collectImageUrls() {
			// 使用 Set 来自动去重
			const imageUrls = new Set();
			const baseUrl = 'https://oss.familydaf.cn/sxsnfile/';
			
			// 1. 静态图片 (封面、介绍等)
			imageUrls.add(baseUrl + '20251230/b70c19716d86452aaa0c9808a2851e8b.png');
			
			console.log(`[Preload] 收集到 ${imageUrls.size} 个待加载的图片URL`);
			return Array.from(imageUrls); // 将 Set 转换为数组
		},

		/**
		 * @description 【新增】带重试逻辑的单个图片加载器
		 * @param {string} url 图片URL
		 * @param {number} maxRetries 最大重试次数
		 * @returns {Promise} 成功时 resolve, 彻底失败时 reject
		 */
		loadImageWithRetry(url, maxRetries = 5) {
			return new Promise((resolve, reject) => {
				let attempts = 0;

				const tryLoad = () => {
					attempts++;
					uni.getImageInfo({
						src: url,
						success: (res) => {
							// console.log(`图片加载成功: ${url} (尝试次数: ${attempts})`);
							resolve(res);
						},
						fail: (err) => {
							console.warn(`图片加载失败: ${url} (尝试次数: ${attempts}/${maxRetries})`);
							if (attempts < maxRetries) {
								// 稍作延迟后重试，避免立即请求导致服务器压力
								setTimeout(tryLoad, 300); 
							} else {
								// 达到最大重试次数，彻底失败
								console.error(`图片彻底加载失败: ${url}`);
								reject({ url, error: err }); // reject时返回包含url的对象，方便追踪
							}
						}
					});
				};

				tryLoad();
			});
		},
		
		/**
		 * @description 【优化】预加载所有图片，并处理重试逻辑
		 * @param {Array<string>} urls 图片URL数组
		 * @returns {Promise<Array<Object>>} 返回 Promise.allSettled 的结果数组
		 */
		preloadAllImages(urls) {
			const promises = urls.map(url => this.loadImageWithRetry(url, 5));
			// 使用 Promise.allSettled
			// 它会等待所有 Promise 完成（无论是 resolve还是reject）
			// 这样即使有图片加载失败，也不会中断整个过程
			return Promise.allSettled(promises);
		},
					
		async createPdf(){
		    uni.showLoading({
		        title:'正在生成PDF所需的图片...'
		    })
		    try {
		        const ztzdfxImgPromise = this.downloadZtzdfxImg();
		        const dimensionImagePromises = this.reportData.dimensionAnalysis.map(d => {
		            return this.generateScoreImage(d,d.scoreSpreads);
		        });
		
		        const allImageUrls = await Promise.all([
		            ztzdfxImgPromise, 
		            ...dimensionImagePromises
		        ]);
		        this.pdfImages = allImageUrls;
				
				console.log(allImageUrls);
				return
				
				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.fillStyle = '#FFFFFF';
						const axisHeight = 20; // 底部文字区域高度
						ctx.fillRect(leftColWidth, totalHeight - axisHeight, rightColWidth, axisHeight);
						
						ctx.fillStyle = '#002846';
						ctx.font = 'bold 10px sans-serif';
						ctx.textAlign = 'center';
						ctx.textBaseline = 'bottom';
			
						const centerX = leftColWidth + rightColWidth / 2;
						const colWidth = rightColWidth / 12;
			
						// 刻度 0-5
						for (let k = 0; k <= 5; k++) {
							let xR = centerX + k * colWidth;
							let xL = centerX - k * colWidth;
							let yTxt = totalHeight - 5; // 距离底部一点距离
			
							if (k === 0) {
								ctx.fillText(0, centerX, yTxt);
							} else {
								ctx.fillText(k, xR, yTxt);
								ctx.fillText(k, xL, yTxt);
							}
						}
			
						// --- 8. 绘制最外层边框 ---
						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 = '#E6EAED';
			ctx.lineWidth = 1;
			// 左侧整体边框
			ctx.strokeRect(0, y, leftW, h);
		
			// 竖线分割 Theme/Question 和 Score
			ctx.beginPath();
			ctx.moveTo(leftW - 54, y);
			ctx.lineTo(leftW - 54, 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.regular && item.regular.avgScore) || 0, leftW - 27, y + h / 2);
		
			// 2. 右侧
			const rightX = leftW;
			
			// 裁剪右侧区域，防止内容溢出
			ctx.save();
			ctx.beginPath();
			ctx.rect(rightX, y, rightW, h);
			ctx.clip();
			
			// 右侧不需要横向分割线，只绘制竖向网格线
			// 绘制背景网格线 (竖向，贯穿整个高度)
			ctx.strokeStyle = '#F0F2F8';
			ctx.lineWidth = 1;
			const colWidth = rightW / 12;
			for (let k = 1; k < 12; k++) {
				ctx.beginPath();
				ctx.moveTo(rightX + k * colWidth, y); 
				ctx.lineTo(rightX + k * colWidth, y + h);
				ctx.stroke();
			}
		
			// 绘制中间线
			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.regular && item.regular.avgAgreement) || 0;
			const avgVital = (item.regular && item.regular.avgVital) || 0;
		
			const agreeW = (avgAgreement / maxVal) * halfW;
			const vitalW = (avgVital / maxVal) * halfW;
		
			// Draw Agreement Bar (grows from center to left)
			ctx.fillStyle = '#BA8EB4';
			ctx.fillRect(centerX - agreeW, barY, agreeW, barHeight);
		
			// Draw Vital Bar (grows from center to right)
			ctx.fillStyle = '#80C8C8';
			ctx.fillRect(centerX, barY, vitalW, barHeight);
			
			// 恢复裁剪
			ctx.restore();
		},
		// 辅助函数：计算自动换行文字的总高度
		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();
		},
		downloadZtzdfxImg(){
			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 imgUrl = await this.uploadFilePromise(res.tempFilePath);
						console.log(imgUrl,'imgUrl');
						resolve(imgUrl)
					},
					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 dataSum = this.reportData.overall.length*this.reportData.overall[0].themeTotalSpreads.length;
			const leaderData = [],memberData = [],stakeholderData=[],sponsorData=[];
			const overall = this.reportData.overall||[];
			overall.forEach(o=>{
				let themeTotalSpreads = o.themeTotalSpreads||[];
				if(['内部流程、系统与结构','学习','领导力'].includes(o.dimension)) themeTotalSpreads = o.themeTotalSpreads.reverse()||[];
				themeTotalSpreads.forEach(t=>{
					leaderData.push(t.scoreLeader||0);
					memberData.push(t.scoreMember||0);
					stakeholderData.push(t.scoreStakeholder||0);
					sponsorData.push(t.scoreSponsor||0);
				})
			})
			const sumArr = leaderData.concat(memberData).concat(stakeholderData).concat(sponsorData);
			const maxValue = sumArr.reduce((a,b)=>Math.max(a,b));
			const minValue = sumArr.reduce((a,b)=>Math.min(a,b));

            const chart = await this.$refs.ztzdfxRef.init(echarts);
            let option = {
				graphic: [
					{
						type: 'image',	
						id: 'radar-bg',
						z: -1,
						bounding: 'raw',
						left: 'center',
						top: 'center',
						style: {
							image:'https://oss.familydaf.cn/sxsnfile/20251230/b70c19716d86452aaa0c9808a2851e8b.png',
							width: 360*this.scale-20,
							height: 360*this.scale-20,
							opacity: 1
						}
					},
					{
						type: 'circle',
						z: 100, // 设置一个较高的 z 值，确保它在最顶层
						left: 'center', // 水平居中
						top: 'center',  // 垂直居中
						shape: {
							r: 12*this.scale // 圆形的半径，您可以根据需要调整大小
						},
						style: {
							fill: '#FFFFFF', // 填充色为白色
							shadowBlur: 20*this.scale,  // 阴影的模糊范围
							shadowColor: 'rgba(0, 0, 0, 0.15)', // 阴影颜色
							shadowOffsetY: 4*this.scale // 向下的阴影偏移，产生悬浮效果
						}
					}
				],
				radar: {
					// shape: 'circle',
					indicator: new Array(dataSum).fill({ max:maxValue, min:minValue }),
					axisName: {
						show: false
					},
					splitArea:{
					show:false
					},
					splitLine: {
					show: false
					},
					axisLine: {
					show: false
					},
					startAngle: 95
				},
				series: [
					{
						type: 'radar',
						data: [
							{
								value: sponsorData,
								itemStyle: {
									color: '#012846'
								},
								lineStyle: {
									color: '#012846',
									width:1.5
								},
								areaStyle: {
									color: 'rgba(255, 255, 255, 0.4)'
								},
								symbolSize: 3
							},
							{
								value: stakeholderData,
								itemStyle: {
									color: '#FFD650'
								},
								lineStyle: {
									color: '#FFD650',
									width:1.5
								},
								areaStyle: {
									color: 'rgba(255, 255, 255, 0.4)'
								},
								symbolSize: 3
							},
							{
								value: memberData,
								itemStyle: {
									color: '#AFCDF5'
								},
								lineStyle: {
									color: '#AFCDF5',
									width:1.5
								},
								areaStyle: {
									color: 'rgba(255, 255, 255, 0.4)'
								},
								symbolSize: 3
							},
							{
								value: leaderData,
								itemStyle: {
									color: '#9F6196'
								},
								lineStyle: {
									color: '#9F6196',
									width:1.5
								},
								areaStyle: {
									color: 'rgba(255, 255, 255, 0.4)'
								},
								symbolSize: 3
							}
						]
					}
				]
			};
			chart.setOption(option);
			this.isChartReady = true;
			this.$nextTick(() => {
				this.calculatePdfContainerHeight();
			});
        },
      }
    };
</script>

<style scoped lang="scss">
	.loading{
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(0,0,0,.4);
		z-index: 1001;
	}
	
	.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;
		}
	}
	.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;
	}
	
	@import '../static/pdf.scss';
</style>