feat(employee-profile): 优化员工档案页面的雷达图与日期选择功能

1.  调整成员位置分布图表轴标签旋转30度避免重叠
2.  简化日期选择器的日期格式化逻辑，移除多余的时分秒拼接
3.  新增雷达图图例与点击弹窗详情功能，展示加分扣分明细
4.  优化部门树节点的代码换行格式
5.  修复部分样式与计算逻辑的小问题

src/pages/components/MemberPositionDistribution.vue

@@ -89,7 +89,8 @@ export default {
           },
           axisLabel: {
             color: '#666',
-            fontSize: 10
+            fontSize: 10,
+            rotate: 30
           }
         },
         yAxis: {
@@ -107,7 +108,8 @@ export default {
           },
           axisLabel: {
             color: '#666',
-            fontSize: 10
+            fontSize: 10,
+            rotate: 30
           }
         },
         series: [{
@@ -158,7 +160,8 @@ export default {
           },
           axisLabel: {
             color: '#666',
-            fontSize: 10
+            fontSize: 10,
+            rotate: 30
           }
         },
         yAxis: {
@@ -176,7 +179,8 @@ export default {
           },
           axisLabel: {
             color: '#666',
-            fontSize: 10
+            fontSize: 10,
+            rotate: 30
           }
         },
         series: [{
@@ -229,7 +233,7 @@ export default {
             color: '#666',
             fontSize: 10,
             rotate: 30,
-            margin: 15
+         
           }
         },
         yAxis: {
@@ -247,7 +251,8 @@ export default {
           },
           axisLabel: {
             color: '#666',
-            fontSize: 10
+            fontSize: 10,
+            rotate: 30
           }
         },
         dataZoom: [{

src/pages/employeeProfile/index.vue

@@ -20,13 +20,13 @@
                 <view v-if="selectedTimeTag === 4" class="date-range-picker">
                     <picker mode="date" :value="beginTime" @change="onBeginTimeChange">
                         <view class="date-input" :class="{ filled: beginTime }">
-                            {{ (beginTime || '').substring(0, 10) || '开始日期' }}
+                            {{ beginTime || '开始日期' }}
                         </view>
                     </picker>
                     <text class="date-separator">至</text>
                     <picker mode="date" :value="endTime" @change="onEndTimeChange">
                         <view class="date-input" :class="{ filled: endTime }">
-                            {{ (endTime || '').substring(0, 10) || '结束日期' }}
+                            {{ endTime || '结束日期' }}
                         </view>
                     </picker>
                 </view>
@@ -98,7 +98,8 @@
                             <view class="info-item">
                                 <view class="info-label">标签：</view>
                                 <view class="info-value" v-if="portrait.userTags">
-                                    <text class="tag" v-for="tag in portrait.userTags.split(',')" :key="tag">{{ tag }}</text>
+                                    <text class="tag" v-for="tag in portrait.userTags.split(',')" :key="tag">{{ tag
+                                        }}</text>
                                 </view>
                             </view>
                         </view>
@@ -146,7 +147,13 @@
                 </SectionTitle>
 
                 <SectionTitle v-if="activeTab === 'profile'" title="个人能力">
-                    <div class="chart-container" ref="radarChart"></div>
+                    <div class="chart-legend">
+                        <div class="legend-item legend-warning"><span></span>预警线（低于75分）</div>
+                        <!-- <div class="legend-item legend-normal"><span></span>正常线（75~90分)</div> -->
+                        <div class="legend-item legend-excellent"><span></span>优秀线（高于90分）</div>
+                        <div class="legend-item legend-current"><span></span>当前员工分值</div>
+                    </div>
+                    <div class="chart-container" ref="radarChart" ></div>
                 </SectionTitle>
 
                 <SectionTitle v-if="activeTab === 'profile'" title="补充信息">
@@ -211,7 +218,7 @@
                         <view class="warning-score-item">
                             <text class="warning-score-label">综合得分</text>
                             <text class="warning-score-value" :class="scoreLevelClass">{{ portrait.totalScore || 0
-                                }}</text>
+                            }}</text>
                         </view>
                     </view>
                     <view class="warning-detail" v-if="scoreDetails.length">
@@ -243,14 +250,8 @@
                 </view>
                 <scroll-view v-if="!employeeSearchKeyword.trim()" scroll-y class="tree-list">
                     <template v-for="(node, index) in deptTreeData">
-                        <employee-tree-node
-                            :key="node.id"
-                            :node="node"
-                            :expanded-ids="expandedDeptIds"
-                            :selected-id="selectedEmployeeId"
-                            @toggle="toggleDeptExpand"
-                            @select="onEmployeeSelect"
-                        />
+                        <employee-tree-node :key="node.id" :node="node" :expanded-ids="expandedDeptIds"
+                            :selected-id="selectedEmployeeId" @toggle="toggleDeptExpand" @select="onEmployeeSelect" />
                     </template>
                 </scroll-view>
                 <scroll-view v-else scroll-y class="employee-list">
@@ -269,6 +270,54 @@
                 </scroll-view>
             </view>
         </u-popup>
+
+        <!-- 雷达图tooltip -->
+        <u-popup :show="showRadarTooltipPopup" mode="center" :round="12"
+            :mask-close-able="true" @close="closeRadarPopup"> 
+
+            <div class="radar-tooltip-popup">
+                <div class="tooltip-card">
+                    <!-- 标题 -->
+                    <view class="tooltip-header">
+                        <text class="tooltip-title">{{ activeDimName }}</text>
+                        <u-icon name="close" color="#666666" size="20" @click="closeRadarPopup" />
+                    </view>
+
+                    <!-- 加分区域 -->
+                    <div class="tooltip-section">
+                        <div class="section-list">
+                            <template v-if="addGroupList.length">
+                                <div class="list-item" v-for="(item, i) in addGroupList" :key="i">
+                                    <span>{{ item.name }}:</span>
+                                    <span class="add-text">+{{ item.total }}分</span>
+                                </div>
+                            </template>
+                            <div v-else class="p-empty">暂无加分记录</div>
+                        </div>
+                        <div class="section-total add">
+                            <span>合计加分:</span>
+                            <span>{{ addTotal }}分</span>
+                        </div>
+                    </div>
+                    <!-- 扣分区域 -->
+                    <div class="tooltip-section">
+                        <div class="section-list">
+                            <template v-if="deductGroupList.length">
+                                <div class="list-item" v-for="(item, i) in deductGroupList" :key="i">
+                                    <span>{{ item.name }}:</span>
+                                    <span class="deduct-text">{{ item.total }}分</span>
+                                </div>
+                            </template>
+                            <div v-else class="p-empty">暂无扣分记录</div>
+                        </div>
+                        <div class="section-total deduct">
+                            <span>合计扣分:</span>
+                            <span>{{ deductTotal }}分</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </u-popup>
     </view>
 </template>
 
@@ -329,7 +378,14 @@ export default {
             employeeLoading: false,
             expandedDeptIds: [],
             isSecurityCheck: false,
-            userInfo: null
+            userInfo: null,
+            // 雷达图tooltip相关
+            activeDimName: null,
+            radarTooltipPosition: { x: 0, y: 0 },
+            // 控制雷达图 tooltip popup 显示
+            showRadarTooltipPopup: false,
+            // 评分明细数据
+            allScoreDetails: []
         }
     },
     computed: {
@@ -350,11 +406,6 @@ export default {
             return age + '岁'
         },
         tagScoreDisplay() {
-            
-            // if (this.tagScoreData == null) return '0'
-            // if (typeof this.tagScoreData === 'object') {
-            //     return this.tagScoreData.totalScore ?? this.tagScoreData.score ?? this.tagScoreData ?? '0'
-            // }
             return this.portrait?.userTags?.split(',').length || 0
         },
         scoreLevelClass() {
@@ -377,6 +428,39 @@ export default {
             return this.employeeList.filter(item =>
                 (item.nickName || '').toLowerCase().includes(keyword)
             )
+        },
+        // 雷达图tooltip相关计算
+        addList() {
+            const all = (this.allScoreDetails || []).filter(d => d.totalScore != null && Number(d.totalScore) > 0)
+            return this.activeDimName ? all.filter(d => d.dimensionName === this.activeDimName) : all
+        },
+        deductList() {
+            const all = (this.allScoreDetails || []).filter(d => d.totalScore != null && Number(d.totalScore) < 0)
+            return this.activeDimName ? all.filter(d => d.dimensionName === this.activeDimName) : all
+        },
+        addGroupList() {
+            const groups = {}
+            this.addList.forEach(d => {
+                const key = d.level2Name || '其他'
+                groups[key] = (groups[key] || 0) + Number(d.totalScore)
+            })
+            return Object.entries(groups).map(([name, total]) => ({ name, total: total.toFixed(2) }))
+        },
+        deductGroupList() {
+            const groups = {}
+            this.deductList.forEach(d => {
+                const key = d.level2Name || '其他'
+                groups[key] = (groups[key] || 0) + Number(d.totalScore)
+            })
+            return Object.entries(groups).map(([name, total]) => ({ name, total: total.toFixed(2) }))
+        },
+        addTotal() {
+            const s = this.addList.reduce((acc, d) => acc + Number(d.totalScore), 0)
+            return (s > 0 ? '+' : '') + s.toFixed(2)
+        },
+        deductTotal() {
+            const s = this.deductList.reduce((acc, d) => acc + Number(d.totalScore), 0)
+            return s.toFixed(2)
         }
     },
     mounted() {
@@ -571,11 +655,11 @@ export default {
             }
             // 自动计算时间范围
             const now = new Date()
-            // 设置结束时间为今天的 23:59:59
-            const endTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59)
+            // 设置结束时间为今天
+            const endTime = new Date(now.getFullYear(), now.getMonth(), now.getDate())
             // 设置开始时间
             let beginTime
-            switch(index) {
+            switch (index) {
                 case 0: // 近一周
                     beginTime = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
                     break
@@ -591,26 +675,17 @@ export default {
                 default:
                     beginTime = now
             }
-            // 格式化日期为 YYYY-MM-DD HH:mm:ss
-            this.beginTime = this.formatFullDate(beginTime)
-            this.endTime = this.formatFullDate(endTime)
+            // 格式化日期为 YYYY-MM-DD
+            this.beginTime = this.formatDate(beginTime)
+            this.endTime = this.formatDate(endTime)
             // 选择时间标签后立即查询
             if (this.selectedEmployeeId) {
                 this.fetchEmployeePortrait()
             }
         },
-        formatFullDate(d) {
-            const y = d.getFullYear()
-            const m = String(d.getMonth() + 1).padStart(2, '0')
-            const day = String(d.getDate()).padStart(2, '0')
-            const h = String(d.getHours()).padStart(2, '0')
-            const min = String(d.getMinutes()).padStart(2, '0')
-            const s = String(d.getSeconds()).padStart(2, '0')
-            return `${y}-${m}-${day} ${h}:${min}:${s}`
-        },
         onBeginTimeChange(e) {
             const dateStr = e.detail.value
-            this.beginTime = dateStr + ' 00:00:00'
+            this.beginTime = dateStr
             // 自定义时间选择后立即查询
             if (this.selectedEmployeeId && this.endTime) {
                 this.fetchEmployeePortrait()
@@ -618,7 +693,7 @@ export default {
         },
         onEndTimeChange(e) {
             const dateStr = e.detail.value
-            this.endTime = dateStr + ' 23:59:59'
+            this.endTime = dateStr
             // 自定义时间选择后立即查询
             if (this.selectedEmployeeId && this.beginTime) {
                 this.fetchEmployeePortrait()
@@ -656,12 +731,13 @@ export default {
                     })
                     // 只取数组中最后一个元素的 scoreDetails
                     const allScoreDetails = res.data.scoreDetails || []
+                    this.allScoreDetails = allScoreDetails
                     this.scoreDetails = allScoreDetails.length > 0 ? allScoreDetails[allScoreDetails.length - 1] : []
                 }
             }).catch(() => { })
 
             const tagPromise = countTagScore(params).then(res => {
-                
+
                 const data = res.data
                 if (Array.isArray(data)) {
                     const found = data.find(item => item.userId === this.selectedEmployeeId)
@@ -673,21 +749,21 @@ export default {
 
             Promise.all([portraitPromise, tagPromise]).finally(() => {
                 this.$nextTick(() => {
-                    
+
                     this.initRadarChart()
                     this.initScoreChart()
                 })
             })
         },
         initScoreChart() {
-            
+
             if (!this.$refs.scoreCircle) return
             if (this.scoreChartInstance) {
                 this.scoreChartInstance.dispose()
             }
             this.scoreChartInstance = echarts.init(this.$refs.scoreCircle)
             const score = this.portrait.totalScore || 0
-            
+
             const option = {
                 series: [
                     {
@@ -757,58 +833,113 @@ export default {
             this.scoreChartInstance.setOption(option)
         },
         initRadarChart() {
-            
+
             if (!this.$refs.radarChart) return
             if (this.radarChartInstance) {
                 this.radarChartInstance.dispose()
             }
             this.radarChartInstance = echarts.init(this.$refs.radarChart)
             const dimensions = this.portrait.dimensions || []
-            const maxScore = dimensions.length > 0 ? Math.max(...dimensions.map(d => d.score || 0)) : 100
-            const indicator = dimensions.map(d => ({
-                name: d.name + '\n' + d.score,
-                max: maxScore
-            }))
+
+            // 仿照 index copy.vue 的配置
+            const radarData = {
+                grounp: dimensions.map(d => ({ name: d.name + '\n\n' + d.score, max: 100 })),
+                data: [{
+                    name: '个人能力',
+                    value: dimensions.map(attr => attr.score),
+                    symbolSize: 10,
+                    areaStyle: {
+                        show: false,
+                        opacity: 0
+                    },
+                    lineStyle: {
+                        color: '#4DC8FE',
+                        width: 1
+                    },
+                    itemStyle: { color: '#fff', borderWidth: 1, borderColor: '#00C8DA', borderJoin: 'round' }
+                }]
+            }
+
             const option = {
                 radar: {
-                    indicator: indicator,
+                    indicator: radarData.grounp,
                     center: ['50%', '52%'],
-                    radius: '60%',
+                    radius: '50%',
                     splitNumber: 8,
-                    axisLine: {
-                        lineStyle: { color: 'rgba(0,0,0,0.15)' }
-                    },
-                    splitLine: {
-                        lineStyle: {
-                            color: ['rgba(0,0,0,0.1)', 'rgba(0,0,0,0.1)', 'rgba(0,0,0,0.1)', 'rgba(0,0,0,0.1)', 'rgba(0,0,0,0.1)', 'rgba(0,0,0,0.1)', '#fe4322', '#8EC742', 'rgba(0,0,0,0.1)']
-                        }
-                    },
+                    axisLine: { lineStyle: { color: '#ccc' } },
+                    splitLine: { lineStyle: { color: ['#ccc', '#ccc', '#ccc', '#ccc', '#ccc', '#ccc', '#fe4322', '#8EC742', '#ccc'], width: 1 } },
                     splitArea: { show: false },
                     axisName: {
                         color: '#333',
                         fontSize: 12
                     }
                 },
-                series: [{
-                    type: 'radar',
-                    data: [{
-                        name: '个人能力',
-                        value: dimensions.map(d => d.score),
-                        areaStyle: { color: 'rgba(77, 200, 254, 0.2)' },
-                        lineStyle: { color: '#4DC8FE', width: 2 },
-                        itemStyle: {
-                            color: '#333',
-                            borderWidth: 1,
-                            borderColor: '#00C8DA'
-                        },
+                series: [
+                    {
+                        type: 'radar',
+                        data: radarData.data,
                         symbol: 'circle',
-                        symbolSize: 8
-                    }]
-                }]
+                        symbolSize: 13,
+                        label: {
+                            show: false,
+                            formatter: (p) => p.value,
+                            color: '#333',
+                            fontSize: 16,
+                            fontWeight: 'bold'
+                        }
+                    }
+                ]
             }
+
             this.radarChartInstance.setOption(option)
+
+            // 绑定鼠标事件
+            this.bindRadarEvents()
+        },
+        bindRadarEvents() {
+            if (!this.radarChartInstance || !this.$refs.radarChart) return
+
+            this.radarChartInstance.off('click')
+
+            this.radarChartInstance.on('click', (params) => {
+                if (!Array.isArray(this.portrait.dimensions) || !this.portrait.dimensions.length) return
+
+                const rect = this.$refs.radarChart.getBoundingClientRect()
+                if (!rect) return
+
+                const cx = rect.width / 2
+                const cy = rect.height / 2
+                const dx = params.event.offsetX - cx
+                const dy = params.event.offsetY - cy
+                const distance = Math.sqrt(dx * dx + dy * dy)
+                const radarRadius = rect.width * 0.35 // 对应 radius: 65%
+
+                if (distance > radarRadius) {
+                    return
+                }
+
+                // 角度计算
+                let angle = Math.atan2(dx, -dy) * (180 / Math.PI)
+                if (angle < 0) angle += 360
+                const count = this.portrait.dimensions.length
+                const step = 360 / count
+                let idx = Math.abs(Math.round(angle / step) % count - count)
+                if (idx < 0) idx += count
+                if (idx >= count) idx = 0
+
+                // 显示tooltip popup - 加上小延迟避免 u-popup 立即关闭的问题
+                this.activeDimName = this.portrait.dimensions[idx].name
+                setTimeout(() => {
+                    this.showRadarTooltipPopup = true
+                }, 50)
+            })
+        },
+        // 关闭雷达图 tooltip popup
+        closeRadarPopup() {
+            this.showRadarTooltipPopup = false
         }
     }
+
 }
 </script>
 
@@ -1007,7 +1138,7 @@ export default {
     border-bottom: 2rpx solid transparent;
     transition: all 0.3s;
 
-     &.active {
+    &.active {
         color: #333;
         border-bottom-color: #333;
     }
@@ -1207,6 +1338,63 @@ export default {
     height: 500rpx;
 }
 
+.chart-legend {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 10px 18px;
+    padding-top: 8px;
+    color: #fff;
+    font-size: 14px;
+
+}
+
+.legend-item {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+
+    span {
+        width: 24rpx;
+        height: 10rpx;
+        border: 2rpx solid currentColor;
+        border-radius: 2rpx;
+    }
+}
+
+.legend-warning {
+    color: #fe4322;
+
+    span {
+        background-color: #fe4322;
+    }
+}
+
+.legend-normal {
+    color: black;
+
+    span {
+        background-color: gray;
+    }
+}
+
+.legend-excellent {
+    color: #8EC742;
+
+    span {
+        background-color: #8EC742;
+    }
+}
+
+.legend-current {
+    color: #1890ff;
+
+    span {
+        background-color: #1890ff;
+    }
+}
+
 .supp-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -1378,4 +1566,72 @@ export default {
         }
     }
 }
+
+.radar-tooltip-popup {
+    padding: 20rpx;
+    min-width: 300px;
+
+    .p-empty {
+        text-align: center;
+        margin-top: 10rpx;
+        font-size: 24rpx;
+        color: #999;
+    }
+
+    .tooltip-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 10rpx 20rpx;
+        border-bottom: 1rpx solid #eee;
+        margin-bottom: 20rpx;
+
+        .tooltip-title {
+            font-size: 32rpx;
+            font-weight: bold;
+            color: #333;
+        }
+    }
+
+    .tooltip-section {
+        padding: 0 10rpx;
+        margin-bottom: 16rpx;
+    }
+
+    .list-item {
+        margin-top: 8rpx;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 26rpx;
+        color: #333;
+
+        .deduct-text {
+            color: #ff4d4f;
+        }
+
+        .add-text {
+            color: #00b42a;
+        }
+    }
+
+    .section-total {
+        margin-top: 12rpx;
+        padding-top: 12rpx;
+        border-top: 1rpx solid #f0f0f0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-weight: 500;
+        font-size: 28rpx;
+
+        &.deduct {
+            color: #ff4d4f;
+        }
+
+        &.add {
+            color: #00b42a;
+        }
+    }
+}
 </style>