|
@@ -166,15 +166,14 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
<!-- 能力雷达图 -->
|
|
|
- <!-- <div class="radar-chart">
|
|
|
-
|
|
|
- </div> -->
|
|
|
+ <div class="radar-chart">
|
|
|
+ <v-chart class="radar" :option="radarOption" autoresize />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<div ref="ability" class="ability-quality">
|
|
|
- <h3>能力素质 <span style="font-size: 14px; font-weight: normal;">综合得分<span class="score-text">{{ totalScore }}</span>/100 分</span> </h3>
|
|
|
+ <h3 style="font-size: 16px; font-weight: bold;">能力素质 <span style="font-size: 14px; font-weight: normal;">综合得分<span class="score-text">{{ totalScore }}</span>/100 分</span> </h3>
|
|
|
|
|
|
<div class="quality-details">
|
|
|
<div class="quality-item">
|
|
@@ -287,17 +286,22 @@
|
|
|
|
|
|
<div ref="psychology" class="psychology-section">
|
|
|
<div class="section-title">心理检测</div>
|
|
|
- <div class="duv-score">
|
|
|
- <span>DUV 心理测评得分</span>
|
|
|
- <span class="score">{{ psychologyData.score }}</span>
|
|
|
- <span>分</span>
|
|
|
- </div>
|
|
|
- <div class="psychology-desc">
|
|
|
- {{ psychologyData.description }}
|
|
|
- </div>
|
|
|
- <div class="psychology-recommendation">
|
|
|
- <span class="label">录用建议:</span>
|
|
|
- <span class="value">{{ psychologyData.recommendation }}</span>
|
|
|
+ <!-- -->
|
|
|
+ <div class="psychology_box">
|
|
|
+ <div class="psychology_body">
|
|
|
+ <div class="psychology-desc">
|
|
|
+ {{ psychologyData.description }}
|
|
|
+ </div>
|
|
|
+ <div class="psychology-recommendation">
|
|
|
+ <span class="label">录用建议:</span>
|
|
|
+ <span class="value">{{ psychologyData.recommendation }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="duv-score">
|
|
|
+ <!-- <span>DUV 心理测评得分</span> -->
|
|
|
+ <span class="score">{{ psychologyData.score }}</span>
|
|
|
+ <span>分</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
@@ -318,7 +322,7 @@
|
|
|
<!-- 左手检测结果 -->
|
|
|
<template v-for="(photo, index) in getHandPhotos('left')" :key="'left-'+index">
|
|
|
<div class="detection-item" style="background-color: #f8f8f8;">
|
|
|
- <span class="position">{{ getPositionLabel('left', index) }}</span>
|
|
|
+ <span class="position" style="color: #6c6c6c;">{{ getPositionLabel('left', index) }}</span>
|
|
|
<span class="status" :class="{
|
|
|
'status-normal': photo.part_verification?.is_correct_part,
|
|
|
'status-error': !photo.part_verification?.is_correct_part
|
|
@@ -334,7 +338,7 @@
|
|
|
<!-- 右手检测结果 -->
|
|
|
<template v-for="(photo, index) in getHandPhotos('right')" :key="'right-'+index">
|
|
|
<div class="detection-item" style="background-color: #f8f8f8;">
|
|
|
- <span class="position">{{ getPositionLabel('right', index) }}</span>
|
|
|
+ <span class="position" style="color: #6c6c6c;">{{ getPositionLabel('right', index) }}</span>
|
|
|
<span class="status" :class="{
|
|
|
'status-normal': photo.part_verification?.is_correct_part,
|
|
|
'status-error': !photo.part_verification?.is_correct_part
|
|
@@ -611,8 +615,25 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { use } from 'echarts/core'
|
|
|
+import { CanvasRenderer } from 'echarts/renderers'
|
|
|
+import { RadarChart } from 'echarts/charts'
|
|
|
+import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
|
|
+import VChart from 'vue-echarts'
|
|
|
+
|
|
|
+use([
|
|
|
+ CanvasRenderer,
|
|
|
+ RadarChart,
|
|
|
+ TitleComponent,
|
|
|
+ TooltipComponent,
|
|
|
+ LegendComponent
|
|
|
+])
|
|
|
+
|
|
|
export default {
|
|
|
name: 'JobApplicationReport',
|
|
|
+ components: {
|
|
|
+ VChart
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
userInfo: {
|
|
@@ -710,6 +731,26 @@ export default {
|
|
|
department: '',
|
|
|
},
|
|
|
showBodyVerification: false, // 添加控制弹窗显示的数据
|
|
|
+ competencyMap: {
|
|
|
+ 'communication_cooperation': '团队协作能力',
|
|
|
+ 'learning_ability': '应变能力',
|
|
|
+ 'service_awareness': '服务意识',
|
|
|
+ 'customer_insight': '客户需求洞察力',
|
|
|
+ 'position_matching': '应变能力',
|
|
|
+ 'communication_expression': '沟通表达能力'
|
|
|
+ },
|
|
|
+ // 修改雷达图数据结构
|
|
|
+ radarData: {
|
|
|
+ indicator: [
|
|
|
+ { name: '团队协作能力', value: 50, max: 100 },
|
|
|
+ { name: '应变能力', value: 50, max: 100 },
|
|
|
+ { name: '服务意识', value: 50, max: 100 },
|
|
|
+ { name: '客户需求洞察力', value: 50, max: 100 },
|
|
|
+ { name: '应变能力', value: 50, max: 100 },
|
|
|
+ { name: '沟通表达能力', value: 50, max: 100 }
|
|
|
+ ],
|
|
|
+ values: [50, 50, 50, 50, 50, 50] // 初始值设为0
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
async created() {
|
|
@@ -738,6 +779,74 @@ export default {
|
|
|
// 移除监听器
|
|
|
window.removeEventListener('resize', this.checkDevice);
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ radarOption() {
|
|
|
+ return {
|
|
|
+ radar: {
|
|
|
+ indicator: this.radarData.indicator,
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ radius: '65%',
|
|
|
+ splitNumber: 4,
|
|
|
+ shape: 'circle', // 改为圆形
|
|
|
+ axisName: {
|
|
|
+ color: '#666',
|
|
|
+ fontSize: 12,
|
|
|
+ formatter: (name, indicator) => {
|
|
|
+ const index = this.radarData.indicator.findIndex(item => item.name === name);
|
|
|
+ return `${this.radarData.values[index]} / 100\n${name}`;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ nameGap: 15, // 增加文字与图表的距离
|
|
|
+ axisLabel: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitArea: {
|
|
|
+ show: true,
|
|
|
+ areaStyle: {
|
|
|
+ color: ['#fff'] // 渐变色填充
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#E7E9ED',
|
|
|
+ type: 'solid', // 改为实线
|
|
|
+ width: 1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#E7E9ED',
|
|
|
+ width: 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ type: 'radar',
|
|
|
+ symbol: 'none',
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#c1dafc',
|
|
|
+ width: 2 // 增加线条宽度
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ type: 'default',
|
|
|
+ color: 'rgba(193, 218, 252, 0.6)', // 调整填充色透明度
|
|
|
+ shadowBlur: 10, // 添加阴影效果
|
|
|
+ shadowColor: 'rgba(193, 218, 252, 0.5)',
|
|
|
+ shadowOffsetY: 5
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: [{
|
|
|
+ value: this.radarData.values
|
|
|
+ }]
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
methods: {
|
|
|
async fetchApplicationDetail() {
|
|
|
try {
|
|
@@ -843,6 +952,10 @@ export default {
|
|
|
recommendation: this.getHireRecommendation(psychologyScore)
|
|
|
}
|
|
|
|
|
|
+ // 添加更新雷达图数据的方法
|
|
|
+ console.log(applicationData.application.comprehensive_analysis.video_analysis_data.competency_scores)
|
|
|
+ this.updateRadarData(applicationData.application.comprehensive_analysis.video_analysis_data.competency_scores)
|
|
|
+
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error('获取应用详情失败:', error)
|
|
@@ -1129,6 +1242,27 @@ export default {
|
|
|
handleBodyVerificationClose() {
|
|
|
this.showBodyVerification = false
|
|
|
},
|
|
|
+ // 添加更新雷达图数据的方法
|
|
|
+ updateRadarData(data) {
|
|
|
+ if (!data) return;
|
|
|
+
|
|
|
+ // 将数据转换为数组并获取前6项
|
|
|
+ const dataArray = Object.values(data)
|
|
|
+ .sort((a, b) => b.weighted_score - a.weighted_score) // 按分数从高到低排序
|
|
|
+ .slice(0, 6); // 只取前6项
|
|
|
+
|
|
|
+ // 更新数据
|
|
|
+ this.radarData = {
|
|
|
+ indicator: dataArray.map(item => ({
|
|
|
+ name: item.tag_name,
|
|
|
+ max: 100
|
|
|
+ })),
|
|
|
+ values: dataArray.map(item => Math.round(item.weighted_score || 0))
|
|
|
+ };
|
|
|
+
|
|
|
+ // 打印数据以便调试
|
|
|
+ console.log('Updated radar data:', this.radarData);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
@@ -1139,10 +1273,13 @@ export default {
|
|
|
width: 100%;
|
|
|
height: 100vh;
|
|
|
overflow-y: auto;
|
|
|
+ background: #fff;
|
|
|
}
|
|
|
|
|
|
.report-container {
|
|
|
- padding: 30px;
|
|
|
+ /* padding: 30px; */
|
|
|
+ margin: 30px auto;
|
|
|
+ width: 1200px;
|
|
|
background: #fff;
|
|
|
|
|
|
.header {
|
|
@@ -1214,9 +1351,14 @@ export default {
|
|
|
}
|
|
|
|
|
|
.evaluation-result {
|
|
|
+ border-radius: 8px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
margin-top: 20px;
|
|
|
-
|
|
|
+ background: #f8f8f8;
|
|
|
.score-section {
|
|
|
+ width: 65%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 24px;
|
|
@@ -1273,7 +1415,6 @@ export default {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 4px;
|
|
|
-
|
|
|
.status-normal {
|
|
|
color: #67C23A;
|
|
|
}
|
|
@@ -1358,12 +1499,22 @@ export default {
|
|
|
}
|
|
|
|
|
|
.radar-chart {
|
|
|
- width: 400px;
|
|
|
- height: 300px;
|
|
|
- background: #fff;
|
|
|
+ width: 500px;
|
|
|
+ height: 350px;
|
|
|
+ /* background: #fff; */
|
|
|
border-radius: 8px;
|
|
|
- border: 1px solid #EBEEF5;
|
|
|
+ /* border: 1px solid #EBEEF5; */
|
|
|
padding: 20px;
|
|
|
+ /* margin-right: 20px; */
|
|
|
+
|
|
|
+ .radar {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.echarts-tooltip) {
|
|
|
+ display: none; // 隐藏tooltip
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -1476,9 +1627,9 @@ export default {
|
|
|
height: 91%;
|
|
|
border-left: 1px solid #e1e1e1;
|
|
|
position: absolute;
|
|
|
- left: 7%;
|
|
|
+ left: 10%;
|
|
|
|
|
|
- margin-left: 11px;
|
|
|
+ margin-left: 20px;
|
|
|
}
|
|
|
.line_left {
|
|
|
width: 1px;
|
|
@@ -1495,7 +1646,7 @@ export default {
|
|
|
border-left: 1px dashed #e1e1e1;
|
|
|
position: absolute;
|
|
|
left: 69%;
|
|
|
- margin-left: 6px;
|
|
|
+ /* margin-left: 6px; */
|
|
|
}
|
|
|
.line_right {
|
|
|
width: 1px;
|
|
@@ -1639,6 +1790,13 @@ export default {
|
|
|
|
|
|
}
|
|
|
.psychology-section {
|
|
|
+ .psychology_box{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ gap: 16px;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
.duv-score {
|
|
|
display: flex;
|
|
|
align-items: baseline;
|
|
@@ -1647,7 +1805,7 @@ export default {
|
|
|
|
|
|
.score {
|
|
|
font-size: 24px;
|
|
|
- color: #67C23A;
|
|
|
+ color: #81b337;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
}
|
|
@@ -1942,7 +2100,9 @@ export default {
|
|
|
background-size: 100% 100%;
|
|
|
color: #fff;
|
|
|
position: relative;
|
|
|
-
|
|
|
+ width: 1200px;
|
|
|
+ margin: 0 auto;
|
|
|
+ border-radius: 5px;
|
|
|
.header-left {
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
@@ -2326,4 +2486,94 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+// 确保在移动端也能正常显示
|
|
|
+@media screen and (max-width: 768px) {
|
|
|
+ .radar-chart {
|
|
|
+ width: 100%;
|
|
|
+ margin-right: 0;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 修改心理测评部分的样式
|
|
|
+.psychology-section {
|
|
|
+ .psychology_box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ gap: 16px;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .psychology_body {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .duv-score {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 50%;
|
|
|
+ color: #81b337;
|
|
|
+ gap: 8px;
|
|
|
+ span {
|
|
|
+ &:first-child {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.score {
|
|
|
+
|
|
|
+ font-size: 48px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #81b337;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-top: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #81b337;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .psychology-desc {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #606266;
|
|
|
+ line-height: 1.6;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .psychology-recommendation {
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ color: #333;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ color: #409EFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 添加移动端适配
|
|
|
+@media screen and (max-width: 768px) {
|
|
|
+ .psychology-section {
|
|
|
+ .psychology_box {
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .duv-score {
|
|
|
+ width: 100%;
|
|
|
+ padding: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|