ソースを参照

feat: 雷达大屏成员卡片点击跳转员工画像

点击成员卡片导航到 EmployeeProfile 页(带 personName 参数),
画像页 onMounted 读取 route.query.personName 自动加载数据;
卡片 hover 添加蓝色光晕和上移动效。

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
simonlll 1 ヶ月 前
コミット
e813f40365
共有2 個のファイルを変更した29 個の追加3 個の削除を含む
  1. 10 1
      src/views/portraitManagement/employeeProfile/index.vue
  2. 19 2
      src/views/score/radar/index.vue

+ 10 - 1
src/views/portraitManagement/employeeProfile/index.vue

@@ -216,10 +216,12 @@
216 216
 import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
217 217
 import * as echarts from 'echarts'
218 218
 import { Search } from '@element-plus/icons-vue'
219
+import { useRoute } from 'vue-router'
219 220
 import { searchPortraitUsers, getEmployeePortrait } from '@/api/score/index'
220 221
 
221 222
 defineOptions({ name: 'EmployeeProfile' })
222 223
 
224
+const route = useRoute()
223 225
 const currentTime = ref('year')
224 226
 const dateRange = ref([])
225 227
 const personName = ref('')
@@ -348,7 +350,14 @@ watch(portrait, (val) => {
348 350
 
349 351
 const handleResize = () => { if (chart) chart.resize() }
350 352
 
351
-onMounted(() => { window.addEventListener('resize', handleResize) })
353
+onMounted(() => {
354
+  window.addEventListener('resize', handleResize)
355
+  const nameFromRoute = route.query.personName
356
+  if (nameFromRoute) {
357
+    personName.value = nameFromRoute
358
+    loadPortrait()
359
+  }
360
+})
352 361
 
353 362
 onBeforeUnmount(() => {
354 363
   window.removeEventListener('resize', handleResize)

+ 19 - 2
src/views/score/radar/index.vue

@@ -64,8 +64,9 @@
64 64
         <!-- 成员卡片 -->
65 65
         <div
66 66
           v-for="member in memberList" :key="member.personName"
67
-          class="member-card"
68
-          :class="getMemberBorderClass(member.totalScore)">
67
+          class="member-card clickable-card"
68
+          :class="getMemberBorderClass(member.totalScore)"
69
+          @click="goToPortrait(member.personName)">
69 70
           <div class="card-name" :class="getNameClass(member.totalScore)">
70 71
             {{ member.personName }}({{ member.totalScore }}分)
71 72
           </div>
@@ -81,10 +82,17 @@
81 82
 import { ref, reactive, onMounted, onBeforeUnmount, nextTick, computed, watch } from 'vue'
82 83
 import { ElMessage } from 'element-plus'
83 84
 import * as echarts from 'echarts'
85
+import { useRouter } from 'vue-router'
84 86
 import { radarTeamList, radarMemberScores, syncLedgerAll } from '@/api/score/index'
85 87
 
86 88
 defineOptions({ name: 'ScoreRadar' })
87 89
 
90
+const router = useRouter()
91
+
92
+function goToPortrait(personName) {
93
+  router.push({ name: 'EmployeeProfile', query: { personName } })
94
+}
95
+
88 96
 // ── 状态 ──────────────────────────────────────────────
89 97
 const loading = ref(false)
90 98
 const syncing = ref(false)
@@ -430,4 +438,13 @@ watch(compareNames, () => nextTick(renderCompareChart), { deep: true })
430 438
 .compare-table .col-person { min-width: 48px; }
431 439
 .score-green { color: #67C23A; font-weight: bold; }
432 440
 .score-red   { color: #F56C6C; font-weight: bold; }
441
+
442
+.clickable-card {
443
+  cursor: pointer;
444
+  transition: box-shadow 0.2s, transform 0.2s;
445
+}
446
+.clickable-card:hover {
447
+  box-shadow: 0 0 12px rgba(26, 106, 255, 0.6);
448
+  transform: translateY(-2px);
449
+}
433 450
 </style>