feat(portraitManagement): add tag score display and optimize radar chart

1. 新增标签得分接口countTagScore并在员工画像页面展示该数据
2. 优化雷达图进度条计算逻辑与样式，新增分数颜色分级
3. 优化搜索组件的下拉选项展示，增加部门路径显示
4. 修复搜索选中项的参数传递与显示文本问题

src/api/portraitManagement/portraitManagement.js

@@ -95,4 +95,7 @@ export function countStationTeamStats(data) {
 export function countDeptTeamStats(data) {
     return request({ url: '/score/dept-portrait/team-stats', method: 'post', data })
 }
-
+//标签得分
+export function countTagScore(params) {
+    return request({ url: '/ledger/scoreEmployeeAdditional/getTotalScoreByEmployee', method: 'get', params: params })
+}

src/views/portraitManagement/components/ProfileRadar.vue

@@ -7,8 +7,9 @@
           <span class="item-label">{{ item.name }}</span>
           <div class="progress-row">
             <div class="progress-bar">
-              <div class="progress-fill" :style="{ width: (item.finalScore || 0) + '%', background: `linear-gradient(to right, transparent, ${item.color})` }">
-                <span class="progress-end"></span>
+              <div class="progress-fill"
+                :style="{ width: ((item.finalScore || 0) / (computedMaxScore || 1) * 100) + '%', background: '#2babeb' }">
+                <span class="progress-end" :style="{ background: '#2babeb' }"></span>
               </div>
             </div>
             <span class="item-value">{{ item.finalScore || 0 }}</span>
@@ -31,32 +32,44 @@ const props = defineProps({
   }
 })
 
+const getScoreColor = (score) => {
+  if (score < 75) return '#ff4d4f'
+  if (score >= 90) return '#52c41a'
+  return '#ffffff'
+}
+
 const freshColors = [
   '#00e5ff', '#36d399', '#fbbf24', '#f472b6', '#a78bfa',
   '#34d399', '#f97316', '#2dd4bf', '#e879f9', '#38bdf8'
 ]
 
-const defaultRadarData = [
-
-]
+const defaultRadarData = []
 
 const computedRadarData = computed(() => {
   const data = props.chartData.length > 0 ? props.chartData : defaultRadarData
   return data.map((item, index) => ({
     ...item,
-    color: item.color || freshColors[index % freshColors.length]
+    color: item.color || freshColors[index % freshColors.length],
+    itemColor: getScoreColor(item.finalScore || 0)
   }))
 })
 
 const computedIndicators = computed(() => {
   const data = computedRadarData.value
-  const maxValue = Math.max(...data.map(item => item.finalScore || 0), 100)
+  const allScores = data.map(item => item.finalScore || 0)
+  const maxValue = allScores.length > 0 ? Math.max(...allScores) : 100
   return data.map(item => ({
     name: item.name,
-    max: maxValue
+    max: Math.max(maxValue, 1)
   }))
 })
 
+const computedMaxScore = computed(() => {
+  const data = computedRadarData.value
+  const allScores = data.map(item => item.finalScore || 0)
+  return allScores.length > 0 ? Math.max(...allScores) : 100
+})
+
 const computedSeries = computed(() => {
   return computedRadarData.value.map(item => item.finalScore || 0)
 })
@@ -71,6 +84,11 @@ const updateRadarChart = () => {
     radarChart = echarts.init(radarChartRef.value)
   }
 
+  const radarData = computedRadarData.value
+  const indicators = computedIndicators.value
+  const pointColors = radarData.map(item => item.itemColor)
+  const pointValues = radarData.map(item => item.finalScore || 0)
+
   const option = {
     grid: {
       top: 40,
@@ -79,7 +97,7 @@ const updateRadarChart = () => {
       right: 50
     },
     radar: {
-      indicator: computedIndicators.value,
+      indicator: indicators,
       center: ['50%', '50%'],
       radius: '60%',
       splitNumber: 4,
@@ -90,7 +108,7 @@ const updateRadarChart = () => {
       },
       splitArea: {
         areaStyle: {
-          color: ['rgba(15, 70, 250, 0.05)', 'rgba(15, 70, 250, 0.1)', 'rgba(15, 70, 250, 0.15)', 'rgba(15, 70, 250, 0.2)']
+          color: ['rgba(15, 70, 250, 0)', 'rgba(15, 70, 250, 0)', 'rgba(15, 70, 250, 0)', 'rgba(15, 70, 250, 0)']
         }
       },
       splitLine: {
@@ -108,25 +126,42 @@ const updateRadarChart = () => {
     series: [
       {
         type: 'radar',
+        symbol: 'circle',
+        symbolSize: 13,
         data: [
           {
-            value: computedSeries.value,
+            value: pointValues,
             name: '综合得分',
             areaStyle: {
-              color: 'rgba(189, 3, 251, 0.3)'
+              color: 'rgba(189, 3, 251, 0)'
             },
             lineStyle: {
-              color: '#bd03fb',
+              // color: '#bd03fb',
               width: 2
             },
-            itemStyle: {
-              color: '#bd03fb'
-            }
+            // itemStyle: {
+            //   color: 'transparent'
+            // }
           }
-        ],
-        symbol: 'circle',
-        symbolSize: 6
-      }
+        ]
+      },
+      // ...(pointValues.length > 0 ? [
+      //   {
+      //     type: 'scatter',
+      //     coordinateSystem: 'radar',
+      //     data: pointValues.map((_, i) => {
+      //       const arr = new Array(pointValues.length).fill(null)
+      //       arr[i] = pointValues[i]
+      //       return { value: arr }
+      //     }),
+      //     symbol: 'circle',
+      //     symbolSize: 22,
+      //     itemStyle: {
+      //       color: ({ dataIndex }) => pointColors[dataIndex]
+      //     },
+      //     z: 10
+      //   }
+      // ] : [])
     ],
     tooltip: {
       trigger: 'item',
@@ -205,6 +240,7 @@ onUnmounted(() => {
           border-radius: 0;
           overflow: visible;
 
+
           .progress-fill {
             height: 100%;
             border-radius: 0;

src/views/portraitManagement/components/SearchBar.vue

@@ -12,26 +12,30 @@
             start-placeholder="开始" end-placeholder="结束" style="width:320px" @change="() => searchHandler(curQuery)" />
         </div>
       </div>
-      <el-popover v-if=" deptType !== 'STATION' " class="popover" title="" :visible="visible" placement="bottom-start" trigger="click" width="45vw">
+      <el-popover v-if="deptType !== 'STATION'" class="popover" title="" :visible="visible" placement="bottom-start"
+        trigger="click" width="45vw">
         <template #reference>
           <div class="primary" style="border-radius: 6px;" @click.stop="visible = !visible">{{ props.deptType === 'user'
             ?
-            '组织架构/模糊搜索' : deptType === 'BRIGADE' ?  '部门选择' : deptType === 'MANAGER' ? '班组选择' :   deptType === 'TEAMS' ? '小组选择' : '组织选择' }}</div>
+            '组织架构/模糊搜索' : deptType === 'BRIGADE' ? '部门选择' : deptType === 'MANAGER' ? '班组选择' : deptType === 'TEAMS' ?
+              '小组选择' : '组织选择' }}</div>
         </template>
 
         <div class="custom-el-style">
           <div>
             <el-autocomplete v-model="personName"
               :fetch-suggestions="props.deptType === 'user' ? queryUsers : queryDept"
-              :placeholder="props.deptType === 'user' ? '搜索员工/团队画像' : '搜索部门'" style="width:320px;" clearable
+              :placeholder="props.deptType === 'user' ? '搜索员工/团队画像' : '搜索部门'" style="width:400px;" clearable
               @select="handleSelect">
               <template #suffix><el-icon>
                   <Search />
                 </el-icon></template>
               <template #default="{ item }">
-                <span>{{ item.nickName || item.deptName }}</span>
-                <span v-if="item.deptName && item.nickName" style="font-size:12px;color:#999;margin-left:8px">{{
-                  item.deptName }}</span>
+                <div style="display:flex;flex-direction:column;gap:2px;">
+                  <span style="font-size:14px;color:#fff;">{{ item.nickName || item.deptName || item.name || item.label
+                    }}</span>
+                  <span v-if="item.path && item.path.length > 0" style="font-size:12px;color:#999;">{{ item.path.join('/ ') }}</span>
+                </div>
               </template>
             </el-autocomplete>
             <!-- <div class="primary" style="border-radius: 6px;" @click="() => searchHandler()">模糊搜索</div> -->
@@ -90,11 +94,40 @@ const findNodeById = (nodes, id) => {
   return null
 }
 
+const buildPathForNode = (nodes, targetId, path = []) => {
+  if (!nodes) return path
+  for (const node of nodes) {
+    if (node.id === targetId || node.deptId === targetId) {
+      // 如果是用户节点，不把用户名字加入 path
+      if (node.deptType === 'user' || node.nodeType === 'user') {
+        return path
+      }
+      const name = node.nickName || node.deptName || node.name || node.label
+      return [...path, name]
+    }
+    if (node.children) {
+      const name = node.deptName || node.name || node.label
+      const found = buildPathForNode(node.children, targetId, [...path, name])
+      if (found.length > path.length) {
+        return found
+      }
+    }
+  }
+  return path
+}
+
 const queryUsers = async (query, cb) => {
   if (!query?.trim()) { cb([]); return }
   try {
     const res = await searchPortraitUsers(query.trim())
-    cb((res.data || []).map(u => ({ ...u, value: u.nickName })))
+    const mapped = (res.data || []).map(u => {
+      let path = []
+      if (u.deptId) {
+        path = buildPathForNode(departments.value, u.deptId)
+      }
+      return { ...u, value: u.nickName, path }
+    })
+    cb(mapped)
   } catch (_) { cb([]) }
 }
 
@@ -102,17 +135,30 @@ const queryDept = async (query, cb) => {
   if (!query?.trim()) { cb([]); return }
   try {
     const res = await listDept({ deptName: query.trim(), deptType: props.deptType })
-    cb((res.data || []).map(d => ({ ...d, value: d.deptName })))
+    const mapped = (res.data || []).map(d => {
+      let path = []
+      if (d.id || d.deptId) {
+        path = buildPathForNode(departments.value, d.deptId || d.id)
+      }
+      return { ...d, value: d.deptName, path }
+    })
+    cb(mapped)
   } catch (_) { cb([]) }
 }
 
 const handleSelect = (item) => {
+  
   if (props.deptType === 'user') {
-    personName.value = item.nickName
-    curQuery.value = { personName: item.nickName }
+    const path = item.path && item.path.length > 0 ? item.path : (item.deptId ? buildPathForNode(departments.value, item.deptId) : [])
+    const name = item.nickName
+
+    personName.value = path.length > 0 ? `${path.join(' / ')} / ${name}` : name
+    curQuery.value = { personName: item.nickName,id:item.id }
     searchHandler(curQuery.value)
   } else {
-    personName.value = item.deptName
+    const path = item.path && item.path.length > 0 ? item.path : ((item.id || item.deptId) ? buildPathForNode(departments.value, item.deptId || item.id) : [])
+    const name = item.deptName || item.name || item.label
+    personName.value = path.length > 0 ? path.join(' / ') : name
     if (props.deptType === 'BRIGADE' || props.deptType === 'STATION') {
       curQuery.value = { deptId: item.deptId || item.id }
     }
@@ -192,13 +238,19 @@ const searchHandler = (query = {}) => {
 const handleNodeClick = (node) => {
   if (props.deptType === 'user') {
     if (node.nodeType === 'user') {
-      personName.value = node.label
-      curQuery.value = { personName: node.label }
+   
+      const path = buildPathForNode(departments.value, node.deptId || node.id)
+      const name = node.label
+      
+      personName.value = path.length > 0 ? `${path.join(' / ')} / ${name}` : name
+      curQuery.value = { personName: node.label,id:node.id }
       searchHandler(curQuery.value)
     }
   } else {
     if (node.deptType === props.deptType) {
-      personName.value = node.deptName || node.name || node.label;
+      const path = buildPathForNode(departments.value, node.deptId || node.id)
+      const name = node.deptName || node.name || node.label;
+      personName.value = path.length > 0 ? path.join(' / ') : name
       if (props.deptType === 'BRIGADE' || props.deptType === 'STATION') {
         curQuery.value = { deptId: node.deptId || node.id }
       }
@@ -253,11 +305,15 @@ onMounted(async () => {
     if (defaultNode) {
       currentKey.value = defaultId
       if (props.deptType === 'user') {
-        personName.value = defaultNode.label
+        const path = buildPathForNode(departments.value, defaultNode.deptId || defaultNode.id)
+        const name = defaultNode.label
+        personName.value = path.length > 0 ? `${path.join(' / ')} / ${name}` : name
         curQuery.value = { personName: defaultNode.label }
         searchHandler(curQuery.value)
       } else {
-        personName.value = defaultNode.deptName || defaultNode.name || defaultNode.label
+        const path = buildPathForNode(departments.value, defaultNode.deptId || defaultNode.id)
+        const name = defaultNode.deptName || defaultNode.name || defaultNode.label
+        personName.value = path.length > 0 ? path.join(' / ') : name
         if (props.deptType === 'BRIGADE' || props.deptType === 'STATION') {
           curQuery.value = { deptId: defaultNode.deptId || defaultNode.id }
         }
@@ -281,10 +337,10 @@ onUnmounted(() => {
 
 defineExpose({
   getDefQuery() {
-   
+
     return {
       ...getTimeRange(),
-    
+
     }
   }
 })

src/views/portraitManagement/employeeProfile/index.vue

@@ -96,7 +96,7 @@
                   </div>
                   <div class="score-row">
                     <span class="score-col">标签得分：</span>
-                    <span class="score-col-2">{{ portrait.totalScore || portrait.totalScore == 0 ? 2 : 0 }}</span>
+                    <span class="score-col-2">{{ tagScoreData != null ? (typeof tagScoreData === 'object' ? (tagScoreData.totalScore ?? tagScoreData.score ?? tagScoreData) : tagScoreData) : 0 }}</span>
                   </div>
                 </div>
               </div>
@@ -223,17 +223,21 @@ import Page from '../components/page.vue'
 import Card from '../components/card.vue'
 import SearchBar from '../components/SearchBar.vue'
 import { getEmployeePortrait } from '@/api/score/index'
-import { onMounted, reactive, ref } from 'vue'
+import { countTagScore } from '@/api/portraitManagement/portraitManagement'
+import { onMounted, reactive, ref, computed } from 'vue'
 import { useDict } from '@/utils/dict'
 import { useECharts } from '@/hooks/useEcharts'
+import useUserStore from '@/store/modules/user'
 
 
 const { sys_user_schooling } = useDict('sys_user_schooling')
+const userStore = useUserStore()
 const visible = ref(false)
 const loading = ref(false)
 const portrait = ref({ dimensions: [] })
 const abilityChart = ref(null)
 const activeDimName = ref(null)
+const tagScoreData = ref(null)
 
 const scoreDetails = computed(() => portrait.value?.scoreDetails || [])
 
@@ -291,13 +295,36 @@ const formatWorkDate = (d) => {
 
 const invokerEmployeePortrait = (query) => {
   loading.value = true
-  return getEmployeePortrait(query).then(res => {
+  const userId = query.id
+  const queryData = {
+    ...query
+  }
+  delete queryData.id
+  const portraitPromise = getEmployeePortrait(queryData).then(res => {
     portrait.value = res.data || { dimensions: [], awards: [] }
     portrait.value.awards.forEach(item => {
       item.color = getRandomHexColor()
     })
     permutationRadarDataHandler(res.data.dimensions)
-  }).finally(() => {
+  })
+  const tagPromise = countTagScore(queryData).then(res => {
+    const data = res.data
+    if (Array.isArray(data)) {
+   
+   
+      const found = data.find(item => (item.userId == userId) )
+      
+      if (found) {
+        
+        tagScoreData.value = found.totalScore ?? found.score
+      } else {
+        tagScoreData.value = null
+      }
+    } else {
+      tagScoreData.value = data
+    }
+  })
+  return Promise.all([portraitPromise, tagPromise]).finally(() => {
     loading.value = false
   })
 }