|
|
@@ -1,7 +1,7 @@
|
|
|
<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'}">
|
|
|
+ <view id="pdfContainer" class="pdf-container" :style="{'transform':'scale('+scale+')', 'height': containerScaledHeight + 'px'}" v-if="reportData">
|
|
|
<!-- 封面 -->
|
|
|
<view class="cd_box fm2 adffc" style="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">
|
|
|
@@ -10,12 +10,30 @@
|
|
|
<view class="fm2-line"></view>
|
|
|
<view class="fm2-p">团队发展动态评估报告(专业版)</view>
|
|
|
<view class="fm2-texts adf" style="margin-top: 5px;">
|
|
|
- <view class="fm2-texts-pre" style="margin-top: 10px;"><span style="letter-spacing: 6px;">客户名称:</span>{{ '甜梦(中国)巧克力有限公司' }}</view>
|
|
|
- <view class="fm2-texts-pre" style="margin-top: 10px;"><span style="letter-spacing: 6px;">团队名称:</span>{{ '研发团队' }}</view>
|
|
|
- <view class="fm2-texts-pre" style="margin-top: 10px;"><span style="letter-spacing: 6px;">团队类型:</span>{{ '研发职能团队' }}</view>
|
|
|
- <view class="fm2-texts-pre" style="margin-top: 10px;"><span style="letter-spacing: 6px;">团队层级:</span>{{ '中级' }}</view>
|
|
|
- <view class="fm2-texts-pre" style="margin-top: 10px;"><span style="letter-spacing: 2.5px;">评估发起人:</span>{{ 'William' }}</view>
|
|
|
- <view class="fm2-texts-pre" style="margin-top: 10px;"><span>报告生成时间:</span>{{ '2025-11-28 11:11:11' }}</view>
|
|
|
+ <view class="fm2-texts-pre adf" style="margin-top: 10px;">
|
|
|
+ <view class="fm2-texts-pre-span">客户名称:</view>
|
|
|
+ <view class="fm2-texts-pre-val">{{ reportData.teamInfo.enterpriseName||'' }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="fm2-texts-pre adf" style="margin-top: 10px;">
|
|
|
+ <view class="fm2-texts-pre-span">团队名称:</view>
|
|
|
+ <view class="fm2-texts-pre-val">{{ reportData.teamInfo.teamName||'' }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="fm2-texts-pre adf" style="margin-top: 10px;">
|
|
|
+ <view class="fm2-texts-pre-span">评估发起人:</view>
|
|
|
+ <view class="fm2-texts-pre-val">{{ reportData.teamInfo.initiator||'' }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="fm2-texts-pre adf" style="margin-top: 10px;">
|
|
|
+ <view class="fm2-texts-pre-span">报告生成时间:</view>
|
|
|
+ <view class="fm2-texts-pre-val">{{ reportData.teamInfo.reportDate||'' }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="fm2-texts-pre adf" style="margin-top: 10px;">
|
|
|
+ <view class="fm2-texts-pre-span">团队类型:</view>
|
|
|
+ <view class="fm2-texts-pre-val">{{ reportData.teamInfo.functionName||'' }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="fm2-texts-pre adf" style="margin-top: 10px;">
|
|
|
+ <view class="fm2-texts-pre-span">团队层级:</view>
|
|
|
+ <view class="fm2-texts-pre-val">{{ reportData.teamInfo.hierarchy||'' }}</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 介绍 -->
|
|
|
@@ -29,7 +47,7 @@
|
|
|
<img class="vb-img2" :src="'https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/'+'intro'+'_box_img2.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>36</span>个关于团队的描述组成。</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>
|
|
|
@@ -83,11 +101,11 @@
|
|
|
</view>
|
|
|
<view class="v2-data">
|
|
|
<view class="vd-title" :style="{'background-image':'url(https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/'+'intro'+'_title_bg1.png)'}">评估结果</view>
|
|
|
- <view class="v2-p" v-html="'后端返回数据后端返回数据 后端返回数据 '"></view>
|
|
|
+ <view class="v2-p" v-html="(reportData.totalDiagnosticOutput||'').replaceAll('\n\n','<br>')"></view>
|
|
|
</view>
|
|
|
<view class="v2-data" style="flex: 1;margin-top: 20px;">
|
|
|
<view class="vd-title vt2" :style="{'background-image':'url(https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/'+'intro'+'_title_bg2.png)'}">团队提升&教练建议</view>
|
|
|
- <view class="v2-p" v-html="'后端返回数据后端返回数据 后端返回数据 '"></view>
|
|
|
+ <view class="v2-p" v-html="(reportData.totalDiagnosisSuggest||'').replaceAll('\n\n','<br>')"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 多维度 -->
|
|
|
@@ -111,21 +129,21 @@
|
|
|
<view class="vbtt-w2">最高分</view>
|
|
|
<view class="vbtt-w3">问卷陈述</view>
|
|
|
</view>
|
|
|
- <view class="vbt-pre adfac" v-for="(tableRow, rowIndex) in tableDataSource" :key="rowIndex">
|
|
|
- <view class="vbtp-left vbtt-w1 adfacjc" :class="{'black':(item.title=='人际关系'||item.title=='学习'||item.title=='内部流程及系统与架构')}" :style="{'background':item.titlecolor,'padding':'0 16px'}">{{ tableRow.theme }}</view>
|
|
|
- <view class="vbtp-num vbtt-w2" :style="{'border-bottom':'1px solid '+item.bcolor}">{{ tableRow.minScore }}</view>
|
|
|
- <view class="vbtp-num vbtt-w2 green" :style="{'border-bottom':'1px solid '+item.bcolor}">{{ tableRow.avgScore }}</view>
|
|
|
- <view class="vbtp-num vbtt-w2" :style="{'border-bottom':'1px solid '+item.bcolor}">{{ tableRow.maxScore }}</view>
|
|
|
+ <view class="vbt-pre adfac" v-for="(ss,si) in item.scoreSpreads" :key="si">
|
|
|
+ <view class="vbtp-left vbtt-w1 adfacjc" :class="{'black':(item.title=='人际关系'||item.title=='学习'||item.title=='内部流程及系统与架构')}" :style="{'background':item.titlecolor,'padding':'0 16px'}">{{ ss.theme||'' }}</view>
|
|
|
+ <view class="vbtp-num vbtt-w2" :style="{'border-bottom':'1px solid '+item.bcolor}">{{ ss.minScore||0 }}</view>
|
|
|
+ <view class="vbtp-num vbtt-w2 green" :style="{'border-bottom':'1px solid '+item.bcolor}">{{ ss.avgScore||0 }}</view>
|
|
|
+ <view class="vbtp-num vbtt-w2" :style="{'border-bottom':'1px solid '+item.bcolor}">{{ ss.maxScore||0 }}</view>
|
|
|
<view class="vbtp-desc" :style="{'border-bottom':'1px solid '+item.bcolor}">
|
|
|
- <view class="vbtpd-title">{{ tableRow.statement }}</view>
|
|
|
+ <view class="vbtpd-title">{{ ss.question||'' }}</view>
|
|
|
<view class="xr_tb adfac">
|
|
|
<view class="xt_pre p1"></view>
|
|
|
<view class="xt_pre p2"></view>
|
|
|
<view class="xt_pre p3"></view>
|
|
|
- <view class="xt_score adfac" :style="{'left':(tableRow.range[0]*2)+'%','width':((tableRow.range[1]-tableRow.range[0])*2)+'%'}">
|
|
|
- <view class="xts_num red">{{ tableRow.range[0] }}</view>
|
|
|
+ <view class="xt_score adfac" :style="{'left':ss.left,'width':(((ss.maxScore>25?25:ss.maxScore)-(ss.minScore>25?25:ss.minScore))*4)+'%'}">
|
|
|
+ <view class="xts_num adfacjc red">{{ ss.minScore>25?25:ss.minScore }}</view>
|
|
|
<view class="xts_box"></view>
|
|
|
- <view class="xts_num green">{{ tableRow.range[1] }}</view>
|
|
|
+ <view class="xts_num adfacjc green">{{ ss.maxScore>25?25:ss.maxScore }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -136,15 +154,15 @@
|
|
|
<view class="vd-title vt3" :class="{'black':(item.title=='人际关系'||item.title=='学习')}" :style="{'background-image':'url(https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/'+typeDict[item.title]+'_title_bg1.png)'}">评估结果</view>
|
|
|
<view class="v2-p3">纬度得分</view>
|
|
|
<view class="vd-wd adfac" :style="{'background':item.wddf}">
|
|
|
- <view class="vdwd-pre">维度加权总分:<span>{{ 34 }}</span></view>
|
|
|
- <view class="vdwd-pre vp">维度同意度总分(未加权):<span>{{ 34 }}</span></view>
|
|
|
- <view class="vdwd-pre">维度权重:<span>{{ 34 }}</span></view>
|
|
|
+ <view class="vdwd-pre">维度加权总分:<span>{{ item.weightedTotal||0 }}</span></view>
|
|
|
+ <view class="vdwd-pre vp">维度同意度总分(未加权):<span>{{ item.consentTotal||0 }}</span></view>
|
|
|
+ <view class="vdwd-pre">维度权重:<span>{{ item.weight||0 }}</span></view>
|
|
|
</view>
|
|
|
- <view class="v2-p" style="margin-top: 8px;" v-html="'后端返回数据 后端返回数据 后端返回数据 后端返回数据 后端返回数据 后端返回数据 '"></view>
|
|
|
+ <view class="v2-p" style="margin-top: 8px;" v-html="(item.diagnosisOutput||'').replaceAll('\n\n','<br>')"></view>
|
|
|
</view>
|
|
|
<view class="v2-data" :style="{'border':'1px solid '+item.bcolor}" style="flex: 1;margin-top: 15px;">
|
|
|
<view class="vd-title vt3" :class="{'black':(item.title=='人际关系'||item.title=='学习')}" :style="{'background-image':'url(https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/'+typeDict[item.title]+'_title_bg1.png)'}">评估建议</view>
|
|
|
- <view class="v2-p" v-html="'后端返回数据 后端返回数据 后端返回数据 后端返回数据 后端返回数据 后端返回数据 '"></view>
|
|
|
+ <view class="v2-p" v-html="(item.diagnosisSuggest||'').replaceAll('\n\n','<br>')"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -160,66 +178,11 @@
|
|
|
|
|
|
export default {
|
|
|
name: 'ZtzdfxChart',
|
|
|
- // props: {
|
|
|
- // reportData: {
|
|
|
- // type: Object,
|
|
|
- // default: null
|
|
|
- // }
|
|
|
- // },
|
|
|
components:{ lEchart },
|
|
|
data() {
|
|
|
return {
|
|
|
- tableDataSource: [
|
|
|
- {
|
|
|
- theme: '宗旨共融同心共识',
|
|
|
- minScore: 1,
|
|
|
- avgScore: 8,
|
|
|
- maxScore: 1,
|
|
|
- statement: '团队成员能够共同阐述其共享目的,并且在团队使命上保持高度一致。',
|
|
|
- range: [4, 25] // 范围条的数据
|
|
|
- },
|
|
|
- {
|
|
|
- theme: '价值引领行践合一',
|
|
|
- minScore: 3,
|
|
|
- avgScore: 1,
|
|
|
- maxScore: 4,
|
|
|
- statement: '团队经常根据其愿景、使命、目的和价值观来评估它们所做的事情及自身的行为。',
|
|
|
- range: [8, 30]
|
|
|
- },
|
|
|
- {
|
|
|
- theme: '使命驱动热忱贡献',
|
|
|
- minScore: 5,
|
|
|
- avgScore: 12,
|
|
|
- maxScore: 1,
|
|
|
- statement: '团队对它们为实现宗旨和愿景所面临的挑战与目标充满热情,并相信它们的工作为世界带来积极的贡献。',
|
|
|
- range: [10, 40]
|
|
|
- },
|
|
|
- {
|
|
|
- theme: '团队优先人尽其才',
|
|
|
- minScore: 12,
|
|
|
- avgScore: 5,
|
|
|
- maxScore: 1,
|
|
|
- statement: '团队成员(包括领导者)将团队优先事项置于个人优先事务之上,并在分配工作任务时充分发挥每个人的优势。',
|
|
|
- range: [5, 22]
|
|
|
- },
|
|
|
- {
|
|
|
- theme: '审时度势与时俱进',
|
|
|
- minScore: 1,
|
|
|
- avgScore: 23,
|
|
|
- maxScore: 1,
|
|
|
- statement: '团队定期(每隔数月)审视目标与优先事项,以确保它们能够适应外部环境的变化。',
|
|
|
- range: [15, 35]
|
|
|
- },
|
|
|
- {
|
|
|
- theme: '快乐工作具成就感',
|
|
|
- minScore: 1,
|
|
|
- avgScore: 21,
|
|
|
- maxScore: 1,
|
|
|
- statement: '团队成员(包括领导者)对所做的工作以及与同事共事感到快乐并从中获得成就感',
|
|
|
- range: [4, 24]
|
|
|
- }
|
|
|
- ],
|
|
|
- reportData: null,
|
|
|
+ reportId:'',
|
|
|
+ reportData: null,
|
|
|
isChartReady: false,
|
|
|
scale:1,
|
|
|
originalContainerHeight: 0,
|
|
|
@@ -279,31 +242,48 @@
|
|
|
pdfImages:[],
|
|
|
};
|
|
|
},
|
|
|
+ onLoad(options) {
|
|
|
+ this.reportId = options.reportId;
|
|
|
+ this.getReportData();
|
|
|
+ },
|
|
|
mounted() {
|
|
|
- // reportData.value = props.reportData;
|
|
|
- this.reportData = {
|
|
|
- dimensionAnalysis:[
|
|
|
- {title:'宗旨与动机',bcolor:'#E4D2E1',thcolor:'#761E6A',titlecolor:'#BA8EB4',wddf:'linear-gradient( 90deg, #F5EFF5 0%, #FAF2F9 100%)',
|
|
|
- desc:`「宗旨与动机」维度,我们旨在探究是否存在一个清晰的存在理由和明确的方向,能够激发团队成员的动力并吸引他们的想象力,以及个人与集体的身份认同是否围绕共同的目标,并达成一致。`},
|
|
|
- {title:'外部流程及系统与架构',bcolor:'#B3DEDE',thcolor:'#009191',titlecolor:'#80C8C8',wddf:'linear-gradient( 90deg, #E8F5F5 0%, #F0F8F8 100%)',
|
|
|
- desc:`「外部流程、系统与结构」维度,我们旨在探究团队如何与各种利益相关者互动,他们与团队的利益相关方各自如何寻求了解对方,以及现有系统和流程的有效性,以帮助管理不同的期望和需求。`},
|
|
|
- {title:'人际关系',bcolor:'#FFDF73',thcolor:'#FFD750',titlecolor:'#FFEBA8',wddf:'linear-gradient( 90deg, rgba(255,215,80,0.34) 0%, rgba(251,225,130,0.09) 100%)',
|
|
|
- desc:`「人际关系」维度,我们旨在探究团队成员如何相互交流、信任程度、尊重和关心的程度,以及团队成员之间的关系如何促进(或破坏)协作。`},
|
|
|
- {title:'内部流程及系统与架构',bcolor:'#B3DEDE',thcolor:'#4EB2B2',titlecolor:'#CDE9EA',wddf:'linear-gradient( 90deg, #E8F5F5 0%, #F0F8F8 100%)',
|
|
|
- desc:`「内部流程、系统与结构」维度,我们旨在探究团队如何在平衡责任与自主权方面进行协作。我们关注团队的敏捷程度、沟通方式以及决策过程的有效性。`},
|
|
|
- {title:'学习',bcolor:'#C7DCF8',thcolor:'#AFCDF5',titlecolor:'#D7E5FA',wddf:'linear-gradient( 270deg, #F2F5F9 0%, #E3ECF8 100%)',
|
|
|
- desc:`「学习」维度,我们旨在探究团队如何提高其绩效、技能和资源以应对当前和未来的任务。我们还希望了解团队如何管理能力和提高效率。`},
|
|
|
- {title:'领导力',bcolor:'#E6EAED',thcolor:'#002846',titlecolor:'#8093A3',wddf:'linear-gradient( 270deg, #F2F4F6 0%, #EDF0F2 100%)',
|
|
|
- desc:`「领导力」维度,我们旨在探究领导素质和行为如何对团队功能和其他因素产生调节影响,以及这是积极的还是消极的。`}
|
|
|
- ]
|
|
|
- };
|
|
|
-
|
|
|
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:'宗旨与动机',bcolor:'#E4D2E1',thcolor:'#761E6A',titlecolor:'#BA8EB4',wddf:'linear-gradient( 90deg, #F5EFF5 0%, #FAF2F9 100%)',
|
|
|
+ desc:`「宗旨与动机」维度,我们旨在探究是否存在一个清晰的存在理由和明确的方向,能够激发团队成员的动力并吸引他们的想象力,以及个人与集体的身份认同是否围绕共同的目标,并达成一致。`},
|
|
|
+ {title:'外部流程及系统与架构',bcolor:'#B3DEDE',thcolor:'#009191',titlecolor:'#80C8C8',wddf:'linear-gradient( 90deg, #E8F5F5 0%, #F0F8F8 100%)',
|
|
|
+ desc:`「外部流程、系统与结构」维度,我们旨在探究团队如何与各种利益相关者互动,他们与团队的利益相关方各自如何寻求了解对方,以及现有系统和流程的有效性,以帮助管理不同的期望和需求。`},
|
|
|
+ {title:'人际关系',bcolor:'#FFDF73',thcolor:'#FFD750',titlecolor:'#FFEBA8',wddf:'linear-gradient( 90deg, rgba(255,215,80,0.34) 0%, rgba(251,225,130,0.09) 100%)',
|
|
|
+ desc:`「人际关系」维度,我们旨在探究团队成员如何相互交流、信任程度、尊重和关心的程度,以及团队成员之间的关系如何促进(或破坏)协作。`},
|
|
|
+ {title:'内部流程及系统与架构',bcolor:'#B3DEDE',thcolor:'#4EB2B2',titlecolor:'#CDE9EA',wddf:'linear-gradient( 90deg, #E8F5F5 0%, #F0F8F8 100%)',
|
|
|
+ desc:`「内部流程、系统与结构」维度,我们旨在探究团队如何在平衡责任与自主权方面进行协作。我们关注团队的敏捷程度、沟通方式以及决策过程的有效性。`},
|
|
|
+ {title:'学习',bcolor:'#C7DCF8',thcolor:'#AFCDF5',titlecolor:'#D7E5FA',wddf:'linear-gradient( 270deg, #F2F5F9 0%, #E3ECF8 100%)',
|
|
|
+ desc:`「学习」维度,我们旨在探究团队如何提高其绩效、技能和资源以应对当前和未来的任务。我们还希望了解团队如何管理能力和提高效率。`},
|
|
|
+ {title:'领导力',bcolor:'#E6EAED',thcolor:'#002846',titlecolor:'#8093A3',wddf:'linear-gradient( 270deg, #F2F4F6 0%, #EDF0F2 100%)',
|
|
|
+ desc:`「领导力」维度,我们旨在探究领导素质和行为如何对团队功能和其他因素产生调节影响,以及这是积极的还是消极的。`}
|
|
|
+ ]
|
|
|
+ this.reportData.dimensionAnalysis.forEach((d,i)=>{
|
|
|
+ d.scoreSpreads.forEach(s=>{
|
|
|
+ s.theme = s.theme.replaceAll(',','').replaceAll(',','');
|
|
|
+ s.range = [s.minScore>25?25:s.minScore,s.maxScore>25?25:s.maxScore];
|
|
|
+ if(s.minScore==0) s.left = '0%';
|
|
|
+ else if(s.minScore>=25) s.left = 'calc(100% - 48px)';
|
|
|
+ else s.left = s.minScore*4+'%';
|
|
|
+ })
|
|
|
+ this.reportData.dimensionAnalysis[i] = {...d,...tempDimensionAnalysis[i]}
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
async createPdf(){
|
|
|
uni.showLoading({
|
|
|
title:'正在生成PDF所需的图片...'
|
|
|
@@ -311,7 +291,7 @@
|
|
|
try {
|
|
|
const ztzdfxImgPromise = this.downloadZtzdfxImg();
|
|
|
const dimensionImagePromises = this.reportData.dimensionAnalysis.map(d => {
|
|
|
- return this.generateTableImage(d,this.tableDataSource);
|
|
|
+ return this.generateTableImage(d,d.scoreSpreads);
|
|
|
});
|
|
|
|
|
|
const allImageUrls = await Promise.all([
|
|
|
@@ -319,10 +299,20 @@
|
|
|
...dimensionImagePromises
|
|
|
]);
|
|
|
this.pdfImages = allImageUrls;
|
|
|
-
|
|
|
- uni.hideLoading();
|
|
|
- this.$showToast(`生成成功,共计${this.pdfImages.length}张`);
|
|
|
- console.log(this.pdfImages);
|
|
|
+
|
|
|
+ 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);
|
|
|
@@ -352,9 +342,9 @@
|
|
|
// --- 1. 定义布局和尺寸常量
|
|
|
const TABLE_WIDTH = 548;
|
|
|
const HEADER_HEIGHT = 38;
|
|
|
- const ROW_HEIGHT = 49; // 行高固定为 49px
|
|
|
+ const ROW_HEIGHT = 49;
|
|
|
const FONT_FAMILY = 'sans-serif';
|
|
|
- const COL_WIDTHS = { theme: 72, min: 49, avg: 49, max: 49, statement: 329 }; // 主题宽度72px
|
|
|
+ const COL_WIDTHS = { theme: 72, min: 49, avg: 49, max: 49, statement: 329 };
|
|
|
const COL_POSITIONS = {
|
|
|
theme: 0,
|
|
|
min: COL_WIDTHS.theme,
|
|
|
@@ -395,10 +385,18 @@
|
|
|
tableData.forEach((row, index) => {
|
|
|
const y = HEADER_HEIGHT + index * ROW_HEIGHT;
|
|
|
|
|
|
+ const isBlackLeftTitle = (dimensionData.title == '人际关系' || dimensionData.title == '学习' || dimensionData.title == '内部流程及系统与架构');
|
|
|
ctx.fillStyle = dimensionData.titlecolor;
|
|
|
ctx.fillRect(1, y, COL_WIDTHS.theme - 1, ROW_HEIGHT);
|
|
|
+
|
|
|
+ // 绘制主题文字
|
|
|
+ ctx.textAlign = 'center';
|
|
|
+ ctx.textBaseline = 'middle';
|
|
|
ctx.fillStyle = isBlackLeftTitle ? '#002846' : '#FFFFFF';
|
|
|
- // 绘制白色下边框
|
|
|
+ ctx.font = `10px ${FONT_FAMILY}`;
|
|
|
+ this.drawWrappedText(ctx, row.theme, COL_POSITIONS.theme + COL_WIDTHS.theme / 2, y + ROW_HEIGHT / 2, 12, COL_WIDTHS.theme - 32);
|
|
|
+
|
|
|
+ // 绘制主题单元格的白色下边框
|
|
|
ctx.strokeStyle = '#FFFFFF';
|
|
|
ctx.lineWidth = 1;
|
|
|
ctx.beginPath();
|
|
|
@@ -415,14 +413,7 @@
|
|
|
ctx.stroke();
|
|
|
});
|
|
|
|
|
|
- const isBlackLeftTitle = (dimensionData.title == '人际关系' || dimensionData.title == '学习' || dimensionData.title == '内部流程及系统与架构');
|
|
|
- ctx.textAlign = 'center';
|
|
|
- ctx.textBaseline = 'middle';
|
|
|
- ctx.fillStyle = isBlackLeftTitle ? '#002846' : '#FFFFFF';
|
|
|
- ctx.font = `10px ${FONT_FAMILY}`; // 主题文字大小
|
|
|
- this.drawWrappedText(ctx, row.theme, COL_POSITIONS.theme + COL_WIDTHS.theme / 2, y + ROW_HEIGHT / 2, 12, COL_WIDTHS.theme - 32);
|
|
|
-
|
|
|
- ctx.font = `bold 14px ${FONT_FAMILY}`; // 分数数字加粗
|
|
|
+ ctx.font = `bold 14px ${FONT_FAMILY}`;
|
|
|
ctx.fillStyle = '#667E90';
|
|
|
ctx.fillText(row.minScore, COL_POSITIONS.min + COL_WIDTHS.min / 2, y + ROW_HEIGHT / 2);
|
|
|
ctx.fillStyle = '#27AE60';
|
|
|
@@ -437,30 +428,32 @@
|
|
|
ctx.textBaseline = 'top';
|
|
|
ctx.fillStyle = '#193D59';
|
|
|
ctx.font = `9px ${FONT_FAMILY}`;
|
|
|
- this.drawWrappedText(ctx, row.statement, statementX + statementPadding, y + 8, 10, COL_WIDTHS.statement - statementPadding * 2); // (请求 #4) 行高
|
|
|
+ this.drawWrappedText(ctx, row.question, statementX + statementPadding, y + 8, 10, COL_WIDTHS.statement - statementPadding * 2);
|
|
|
|
|
|
// 绘制范围指示器
|
|
|
- const rangeBarY = y + 33; // 调整位置,使其距离标题 11px
|
|
|
+ const rangeBarY = y + 33;
|
|
|
const rangeBarWidth = COL_WIDTHS.statement - statementPadding * 2;
|
|
|
- const rangeBarHeight = 4; // 背景高度 4px
|
|
|
+ const rangeBarHeight = 4;
|
|
|
const rangeBarX = statementX + statementPadding;
|
|
|
|
|
|
// 绘制三段色背景
|
|
|
const segWidth = rangeBarWidth / 3;
|
|
|
- ctx.fillStyle = '#BA8EB4'; // 颜色1
|
|
|
+ ctx.fillStyle = '#BA8EB4';
|
|
|
ctx.fillRect(rangeBarX, rangeBarY, segWidth, rangeBarHeight);
|
|
|
- ctx.fillStyle = '#66BDBD'; // 颜色2
|
|
|
+ ctx.fillStyle = '#66BDBD';
|
|
|
ctx.fillRect(rangeBarX + segWidth, rangeBarY, segWidth, rangeBarHeight);
|
|
|
- ctx.fillStyle = '#AFCDF5'; // 颜色3
|
|
|
+ ctx.fillStyle = '#AFCDF5';
|
|
|
ctx.fillRect(rangeBarX + segWidth * 2, rangeBarY, segWidth, rangeBarHeight);
|
|
|
|
|
|
// --- 开始绘制滑块 ---
|
|
|
- const scaleFactor = rangeBarWidth / 50;
|
|
|
- const rangeLeft = row.range[0] * scaleFactor;
|
|
|
- const rangeWidth = (row.range[1] - row.range[0]) * scaleFactor;
|
|
|
+ const scaleFactor = rangeBarWidth / 25;
|
|
|
+ const minVal = row.range[0];
|
|
|
+ const maxVal = row.range[1];
|
|
|
+ const rangeLeft = minVal * scaleFactor;
|
|
|
+ const rangeWidth = (maxVal - minVal) * scaleFactor;
|
|
|
|
|
|
// 绘制中间的连接条
|
|
|
- const connectorY = rangeBarY - (8 - rangeBarHeight) / 2; // 垂直居中
|
|
|
+ const connectorY = rangeBarY - (8 - rangeBarHeight) / 2;
|
|
|
const connectorHeight = 8;
|
|
|
ctx.fillStyle = '#199C9C';
|
|
|
ctx.fillRect(rangeBarX + rangeLeft, connectorY, rangeWidth, connectorHeight);
|
|
|
@@ -474,14 +467,46 @@
|
|
|
ctx.font = numBoxFont;
|
|
|
const metrics = ctx.measureText(text);
|
|
|
const boxWidth = metrics.width + numBoxPadding.h * 2;
|
|
|
- const boxHeight = 12 + numBoxPadding.v * 2; // 12是字号
|
|
|
+ const boxHeight = 12 + numBoxPadding.v * 2;
|
|
|
|
|
|
+ const value = parseFloat(text);
|
|
|
+ const centerPointX = rangeBarX + value * scaleFactor;
|
|
|
let x;
|
|
|
- if (side === 'left') {
|
|
|
- x = rangeBarX + rangeLeft - boxWidth / 2;
|
|
|
+
|
|
|
+ // 核心逻辑:判断两值是否相等
|
|
|
+ if (minVal === maxVal) {
|
|
|
+ // 如果相等,左右滑块并排显示,整体居中
|
|
|
+ if (side === 'left') {
|
|
|
+ x = centerPointX - boxWidth;
|
|
|
+ } else { // 'right'
|
|
|
+ x = centerPointX;
|
|
|
+ }
|
|
|
+
|
|
|
+ // --- 边界检查(针对组合滑块)---
|
|
|
+ let combinedLeftX = centerPointX - boxWidth;
|
|
|
+ if (combinedLeftX < rangeBarX) {
|
|
|
+ const shift = rangeBarX - combinedLeftX;
|
|
|
+ x += shift; // 将两个滑块一起向右移动
|
|
|
+ }
|
|
|
+ let combinedRightX = centerPointX + boxWidth;
|
|
|
+ if (combinedRightX > rangeBarX + rangeBarWidth) {
|
|
|
+ const shift = combinedRightX - (rangeBarX + rangeBarWidth);
|
|
|
+ x -= shift; // 将两个滑块一起向左移动
|
|
|
+ }
|
|
|
+
|
|
|
} else {
|
|
|
- x = rangeBarX + rangeLeft + rangeWidth - boxWidth / 2;
|
|
|
+ // 如果不相等,各自居中显示
|
|
|
+ x = centerPointX - boxWidth / 2;
|
|
|
+
|
|
|
+ // --- 边界检查(针对单个滑块)---
|
|
|
+ if (x < rangeBarX) {
|
|
|
+ x = rangeBarX;
|
|
|
+ }
|
|
|
+ if (x + boxWidth > rangeBarX + rangeBarWidth) {
|
|
|
+ x = rangeBarX + rangeBarWidth - boxWidth;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
const boxY = connectorY + (connectorHeight - boxHeight) / 2;
|
|
|
|
|
|
// 绘制阴影
|
|
|
@@ -500,7 +525,7 @@
|
|
|
ctx.closePath();
|
|
|
ctx.fill();
|
|
|
|
|
|
- // 重置阴影,避免影响边框
|
|
|
+ // 重置阴影
|
|
|
ctx.shadowColor = 'transparent';
|
|
|
ctx.shadowBlur = 0;
|
|
|
ctx.shadowOffsetY = 0;
|
|
|
@@ -517,17 +542,15 @@
|
|
|
ctx.fillText(text, x + boxWidth / 2, boxY + boxHeight / 2);
|
|
|
};
|
|
|
|
|
|
- drawNumberBox(row.range[0].toString(), 'left');
|
|
|
- drawNumberBox(row.range[1].toString(), 'right');
|
|
|
+ drawNumberBox(minVal.toString(), 'left');
|
|
|
+ drawNumberBox(maxVal.toString(), 'right');
|
|
|
});
|
|
|
|
|
|
// --- 6. 生成图片文件 ---
|
|
|
uni.canvasToTempFilePath({
|
|
|
canvas: canvasNode,
|
|
|
success: async (result) => {
|
|
|
- console.log('图片生成成功!', result.tempFilePath);
|
|
|
const fileurl = await this.uploadFilePromise(result.tempFilePath);
|
|
|
- console.log(fileurl, 'fileurl');
|
|
|
resolve(fileurl);
|
|
|
},
|
|
|
fail: (err) => {
|
|
|
@@ -639,6 +662,23 @@
|
|
|
});
|
|
|
},
|
|
|
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: [
|
|
|
@@ -659,7 +699,7 @@
|
|
|
],
|
|
|
radar: {
|
|
|
// shape: 'circle',
|
|
|
- indicator: new Array(36).fill(''),
|
|
|
+ indicator: new Array(dataSum).fill({ max:maxValue, min:minValue }),
|
|
|
axisName: {
|
|
|
show: false
|
|
|
},
|
|
|
@@ -678,57 +718,57 @@
|
|
|
{
|
|
|
type: 'radar',
|
|
|
data: [
|
|
|
- {
|
|
|
- value: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36],
|
|
|
- itemStyle: {
|
|
|
- color: '#FFD650'
|
|
|
- },
|
|
|
- lineStyle: {
|
|
|
- color: '#FFD650',
|
|
|
- width:2
|
|
|
- },
|
|
|
+ {
|
|
|
+ value: leaderData,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#9F6196'
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ color: '#9F6196',
|
|
|
+ width:2
|
|
|
+ },
|
|
|
areaStyle: {
|
|
|
color: 'rgba(255, 255, 255, 0.4)'
|
|
|
},
|
|
|
symbolSize: 4
|
|
|
},
|
|
|
- {
|
|
|
- value: [31,32,33,34,6,7,8,9,18,19,20,21,22,28,29,35,36,23,24,25,10,11,12,13,14,15,16,17,26,27,1,2,3,4,5,30],
|
|
|
- itemStyle: {
|
|
|
- color: '#751E6A'
|
|
|
- },
|
|
|
- lineStyle: {
|
|
|
- color: '#751E6A',
|
|
|
- width:2
|
|
|
- },
|
|
|
+ {
|
|
|
+ value: memberData,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#AFCDF5'
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ color: '#AFCDF5',
|
|
|
+ width:2
|
|
|
+ },
|
|
|
areaStyle: {
|
|
|
color: 'rgba(255, 255, 255, 0.4)'
|
|
|
},
|
|
|
symbolSize: 4
|
|
|
},
|
|
|
- {
|
|
|
- value: [21,22,28,29,35,36,23,31,32,33,34,6,7,8,9,18,19,20,24,25,10,11,27,1,2,3,4,5,30,12,13,14,15,16,17,26],
|
|
|
- itemStyle: {
|
|
|
- color: '#012846'
|
|
|
- },
|
|
|
- lineStyle: {
|
|
|
- color: '#012846',
|
|
|
- width:2
|
|
|
- },
|
|
|
+ {
|
|
|
+ value: stakeholderData,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#FFD650'
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ color: '#FFD650',
|
|
|
+ width:2
|
|
|
+ },
|
|
|
areaStyle: {
|
|
|
color: 'rgba(255, 255, 255, 0.4)'
|
|
|
},
|
|
|
symbolSize: 4
|
|
|
},
|
|
|
- {
|
|
|
- value: [28,29,35,36,23,24,27,18,19,20,21,22,11,25,10,31,32,33,34,6,7,8,9,18,19,20,21,22,11,12,13,14,15,16,17,26],
|
|
|
- itemStyle: {
|
|
|
- color: '#AFCDF5'
|
|
|
- },
|
|
|
- lineStyle: {
|
|
|
- color: '#AFCDF5',
|
|
|
- width:2
|
|
|
- },
|
|
|
+ {
|
|
|
+ value: sponsorData,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#012846'
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ color: '#012846',
|
|
|
+ width:2
|
|
|
+ },
|
|
|
areaStyle: {
|
|
|
color: 'rgba(255, 255, 255, 0.4)'
|
|
|
},
|