5 changed files with 244 additions and 2 deletions
@ -0,0 +1,188 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-09-12 16:32:43 |
|||
@ 备注: 九型人格测试结果 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import * as echarts from 'echarts'; |
|||
import { nineResultToken } from '@/api/hr/people'; |
|||
const props = defineProps({ |
|||
tabsid: { |
|||
type: String, |
|||
default: "1", |
|||
}, |
|||
usercont:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
} |
|||
}); |
|||
|
|||
|
|||
const nineTestPageLoading = ref(false) |
|||
const nineTestPage = ref<any>(null) |
|||
const disTitlePick = ref<string[]>([]) |
|||
const discdrawRadar = ref(null) |
|||
//页面加载前先获取测试数据 |
|||
onBeforeMount(()=>{ |
|||
let sendData = { |
|||
id:props.usercont.number.toString() |
|||
} |
|||
nineResultToken(sendData) |
|||
.then(({data}) => { |
|||
// console.log("获取我的111111请求", data); |
|||
disTitlePick.value = data.ColourNameList |
|||
drawNineRadarChart(data.colourTitle,data.RadarColour,data.indicator) |
|||
}) |
|||
}); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-08-30 13:37:05 |
|||
@ 功能: 绘图 |
|||
*/ |
|||
const drawNineRadarChart = (radarTitle:string[],radarVal:number[],indicator:any[]) => { |
|||
console.log("drawNineRadarChart",indicator) |
|||
let option = { |
|||
radar: { |
|||
indicator: indicator |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '', |
|||
type: 'radar', |
|||
data: [ |
|||
{ |
|||
// value: [20, 8, 15, 5, 6], |
|||
value: radarVal, |
|||
name: '性格测试诶结果', |
|||
label: { |
|||
show: true, |
|||
formatter: function (params) { |
|||
return params.value; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
], |
|||
itemStyle: { |
|||
normal: { |
|||
color: "#1DBB37" |
|||
}, |
|||
} |
|||
} |
|||
] |
|||
}; |
|||
if(discdrawRadar.value){ |
|||
discdrawRadar.value.clear(); |
|||
discdrawRadar.value.setOption(option) |
|||
} |
|||
} |
|||
//所有组件加载完后执行 |
|||
onMounted(()=>{ |
|||
nextTick(()=>{ |
|||
discdrawRadar.value = markRaw(echarts.init(nineTestPage.value)) |
|||
}) |
|||
}) |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-06-12 14:27:32 |
|||
@ 功能: 判断该颜色是否存在了 |
|||
*/ |
|||
const judgaDiscNine = (val:string) => { |
|||
let isTyue = false; |
|||
if(disTitlePick.value && disTitlePick.value.length > 0){ |
|||
disTitlePick.value.forEach((item:string)=>{ |
|||
if(val == item) { |
|||
isTyue = true; |
|||
} |
|||
}) |
|||
} |
|||
return isTyue |
|||
} |
|||
</script> |
|||
<template> |
|||
<div> |
|||
<div ref="nineTestPage" v-loading="nineTestPageLoading" element-loading-text="Loading..." class="allOrgAxisCares"> |
|||
|
|||
</div> |
|||
<el-text class="mx-1 title_size">九型性格解析</el-text> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<div v-if="judgaDiscNine('RI')"> |
|||
<el-text class="mx-1 hongSe" type="info">资源调查员：<br></el-text> |
|||
<el-text class="mx-1" type="info">强项：外向、热情、善沟通、善于发掘机会，善于与他人建立联系<br></el-text> |
|||
<el-text class="mx-1" type="info">允许的弱项：过于乐观;虎头蛇尾</el-text> |
|||
</div> |
|||
<div v-if="judgaDiscNine('IM')"> |
|||
<el-text class="mx-1 hongSe" type="info">实干家：<br></el-text> |
|||
<el-text class="mx-1" type="info">强项：遵守纪律、可靠、稳健、高效、能够把想法付诸实际行动<br></el-text> |
|||
<el-text class="mx-1" type="info">允许的弱项：缺乏灵活性，对新的想法反应迟钝</el-text> |
|||
</div> |
|||
<div v-if="judgaDiscNine('CO')"> |
|||
<el-text class="mx-1 hongSe" type="info">协调员：<br></el-text> |
|||
<el-text class="mx-1" type="info">强项：成熟、自信、合适的团队领导人，能够澄清目标，推动决策的过程，姜于授权<br></el-text> |
|||
<el-text class="mx-1" type="info">允许的弱项：喜欢操纵和摆布，把自己的工作分配给其他人去干</el-text> |
|||
</div> |
|||
<div v-if="judgaDiscNine('PL')"> |
|||
<el-text class="mx-1 hongSe" type="info">智多星：<br></el-text> |
|||
<el-text class="mx-1" type="info">强项：具有创造力和想象力,能够创新，并且解决难题<br></el-text> |
|||
<el-text class="mx-1" type="info">允许的弱项：对细节不够重视，过于专注手头的工作，无法有效沟通</el-text> |
|||
</div> |
|||
<div v-if="judgaDiscNine('SH')"> |
|||
<el-text class="mx-1 hongSe" type="info">鞭策者：<br></el-text> |
|||
<el-text class="mx-1" type="info">强项：富于挑战精神、充满活力、敢于面对压力并能取得好成绩，不畏惧艰险，不屈不挠<br></el-text> |
|||
<el-text class="mx-1" type="info">允许的弱项：容易激怒别人容忍性差，常会伤害别人</el-text> |
|||
</div> |
|||
<div v-if="judgaDiscNine('ME')"> |
|||
<el-text class="mx-1 hongSe" type="info">监督评论员：<br></el-text> |
|||
<el-text class="mx-1" type="info">强项：审慎、能从战略高度出发，具有洞察力，能通盘考虑所有人的观点，准确判断<br></el-text> |
|||
<el-text class="mx-1" type="info">允许的弱项：缺乏推动和启发他人的能力过于挑剔</el-text> |
|||
</div> |
|||
<div v-if="judgaDiscNine('TW')"> |
|||
<el-text class="mx-1 hongSe" type="info">凝聚者：<br></el-text> |
|||
<el-text class="mx-1" type="info">强项：乐于合作，温和友善能够理解别人，善于倾听，交往，尽量避免摩擦，息事宁人<br></el-text> |
|||
<el-text class="mx-1" type="info">允许的弱项：关键时刻犹豫不决，容易受到别人的影响</el-text> |
|||
</div> |
|||
<div v-if="judgaDiscNine('CF')"> |
|||
<el-text class="mx-1 hongSe" type="info">善始善终者：<br></el-text> |
|||
<el-text class="mx-1" type="info">强项：兢兢业业、认真负责急切、能够找出错误和遗漏，能够按时完成工作<br></el-text> |
|||
<el-text class="mx-1" type="info">允许的弱项：过于不安和担忧，不愿意授权、吹毛求疵</el-text> |
|||
</div> |
|||
<div v-if="judgaDiscNine('CP')"> |
|||
<el-text class="mx-1 hongSe" type="info">技术专家：<br></el-text> |
|||
<el-text class="mx-1" type="info">强项：-心一意、自我激励、全心全意提供专门领域的知识和技能。<br></el-text> |
|||
<el-text class="mx-1" type="info">允许的弱项：只能在狭窄的领域做出贡献，拘泥于技术细节而忽视了整体情况。</el-text> |
|||
</div> |
|||
<div v-if="judgaDiscNine('DR')"> |
|||
<el-text class="mx-1 hongSe" type="info">DR<br></el-text> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.allOrgAxisCares{ |
|||
display: block; |
|||
width: 100%; |
|||
height:380px; |
|||
// overflow:auto; |
|||
} |
|||
.hongSe{ |
|||
color: #FF0000; |
|||
} |
|||
.lanSe{ |
|||
color: #0000FF; |
|||
} |
|||
.huangSe{ |
|||
color: #FFD700; |
|||
} |
|||
.lvSe{ |
|||
color: #008000; |
|||
} |
|||
.title_size{ |
|||
font-size:24px; |
|||
font-weight: bold; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue