Browse Source

修改样式及添加雷达图

yangg 1 month ago
parent
commit
5f0cf07b6f
3 changed files with 330 additions and 32 deletions
  1. 48 1
      package-lock.json
  2. 2 1
      package.json
  3. 280 30
      src/views/JobApplication/report/report.vue

+ 48 - 1
package-lock.json

@@ -28,7 +28,7 @@
 				"countup.js": "^2.8.0",
 				"cropperjs": "^1.6.2",
 				"e-icon-picker": "2.1.1",
-				"echarts": "^5.5.1",
+				"echarts": "^5.6.0",
 				"echarts-gl": "^2.0.9",
 				"echarts-wordcloud": "^2.1.0",
 				"element-plus": "^2.8.0",
@@ -56,6 +56,7 @@
 				"vue": "^3.4.38",
 				"vue-clipboard3": "^2.0.0",
 				"vue-cropper": "^1.0.8",
+				"vue-echarts": "^7.0.3",
 				"vue-grid-layout": "^3.0.0-beta1",
 				"vue-i18n": "^9.14.0",
 				"vue-router": "^4.4.3",
@@ -5725,6 +5726,7 @@
 			"version": "5.6.0",
 			"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.6.0.tgz",
 			"integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
+			"license": "Apache-2.0",
 			"dependencies": {
 				"tslib": "2.3.0",
 				"zrender": "5.6.1"
@@ -10055,6 +10057,51 @@
 				}
 			}
 		},
+		"node_modules/vue-echarts": {
+			"version": "7.0.3",
+			"resolved": "https://registry.npmmirror.com/vue-echarts/-/vue-echarts-7.0.3.tgz",
+			"integrity": "sha512-/jSxNwOsw5+dYAUcwSfkLwKPuzTQ0Cepz1LxCOpj2QcHrrmUa/Ql0eQqMmc1rTPQVrh2JQ29n2dhq75ZcHvRDw==",
+			"license": "MIT",
+			"dependencies": {
+				"vue-demi": "^0.13.11"
+			},
+			"peerDependencies": {
+				"@vue/runtime-core": "^3.0.0",
+				"echarts": "^5.5.1",
+				"vue": "^2.7.0 || ^3.1.1"
+			},
+			"peerDependenciesMeta": {
+				"@vue/runtime-core": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/vue-echarts/node_modules/vue-demi": {
+			"version": "0.13.11",
+			"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
+			"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+			"hasInstallScript": true,
+			"license": "MIT",
+			"bin": {
+				"vue-demi-fix": "bin/vue-demi-fix.js",
+				"vue-demi-switch": "bin/vue-demi-switch.js"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/antfu"
+			},
+			"peerDependencies": {
+				"@vue/composition-api": "^1.0.0-rc.1",
+				"vue": "^3.0.0-0 || ^2.6.0"
+			},
+			"peerDependenciesMeta": {
+				"@vue/composition-api": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/vue-eslint-parser": {
 			"version": "9.4.3",
 			"resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz",

+ 2 - 1
package.json

@@ -29,7 +29,7 @@
 		"countup.js": "^2.8.0",
 		"cropperjs": "^1.6.2",
 		"e-icon-picker": "2.1.1",
-		"echarts": "^5.5.1",
+		"echarts": "^5.6.0",
 		"echarts-gl": "^2.0.9",
 		"echarts-wordcloud": "^2.1.0",
 		"element-plus": "^2.8.0",
@@ -57,6 +57,7 @@
 		"vue": "^3.4.38",
 		"vue-clipboard3": "^2.0.0",
 		"vue-cropper": "^1.0.8",
+		"vue-echarts": "^7.0.3",
 		"vue-grid-layout": "^3.0.0-beta1",
 		"vue-i18n": "^9.14.0",
 		"vue-router": "^4.4.3",

+ 280 - 30
src/views/JobApplication/report/report.vue

@@ -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>