feat: 新增组织架构页面并优化员工详情页图表展示

1.  新增组织架构页面，支持部门人员树形浏览、搜索定位
2.  调整员工详情页雷达图图例位置和样式，简化图例文字
3.  更新成员岗位分布组件的图表配置和图例文案

src/pages.json

@@ -327,6 +327,12 @@
       }
     },
     {
+      "path": "pages/organizationStruct/index",
+      "style": {
+        "navigationBarTitleText": "组织架构"
+      }
+    },
+    {
       "path": "pages/inspectionChecklist/index",
       "style": {
         "navigationBarTitleText": "巡视检查列表"

src/pages/components/MemberPositionDistribution.vue

@@ -74,7 +74,7 @@ export default {
           axisPointer: { type: 'shadow' }
         },
         legend: {
-          data: ['人数'],
+          data: ['职业资格等级'],
           textStyle: { color: '#666', fontSize: 10 },
           top: 0
         },
@@ -118,6 +118,7 @@ export default {
           }
         },
         series: [{
+          name: '职业资格等级',
           type: 'bar',
           data: this.chartsData.qualification.data,
           itemStyle: {
@@ -150,8 +151,9 @@ export default {
           axisPointer: { type: 'shadow' }
         },
         legend: {
-          data: ['人数'],
-          textStyle: { color: '#666', fontSize: 10 },
+          show: true,
+          data: ['开机年限'],
+          textStyle: { color: '#333', fontSize: 10 },
           top: 0
         },
         grid: {
@@ -194,6 +196,7 @@ export default {
           }
         },
         series: [{
+          name: '开机年限',
           type: 'bar',
           data: this.chartsData.experience.data,
           itemStyle: {
@@ -226,7 +229,7 @@ export default {
           axisPointer: { type: 'shadow' }
         },
         legend: {
-          data: ['人数'],
+          data: ['岗位资质'],
           textStyle: { color: '#666', fontSize: 10 },
           top: 0
         },
@@ -287,6 +290,7 @@ export default {
           // }
         }],
         series: [{
+          name: '岗位资质',
           type: 'bar',
           data: this.chartsData.position.data,
           itemStyle: {

src/pages/components/ProfileRadar.vue

@@ -4,6 +4,12 @@
             <text>暂无数据</text>
         </view>
         <template v-else>
+            <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>
             <view class="radar-list">
                 <view v-for="(item, index) in radarData" :key="index" class="radar-item">
@@ -92,73 +98,66 @@ export default {
                 this.chart.dispose()
                 this.chart = null
             }
-            
+
             // 没有数据时不渲染图表
             if (!this.radarData || this.radarData.length === 0) {
                 return
             }
-            
-            const values = this.radarData.map(item => {
-                if (typeof item === 'object' && item !== null) {
-                    return item.finalScore || item.score || 0
-                }
-                return 0
-            })
-            
+
+
+
+
             this.chart = echarts.init(this.$refs.radarChart)
-            
-            const option = {
-                responsive: true,
-                maintainAspectRatio: false,
-                radar: {
-                    indicator: this.indicators,
-                    center: ['50%', '50%'],
-                    radius: '60%',
-                    splitNumber: 5,
-                    axisLine: {
-                        lineStyle: {
-                            color: 'gray'
-                        }
+            const radarData = {
+                grounp: this.radarData.map(d => ({ name: d.name + '\n\n' + d.finalScore, max: 100 })),
+                data: [{
+                    name: '个人能力',
+                    value: this.radarData.map(item => item.finalScore || 0),
+                    symbolSize: 10,
+                    areaStyle: {
+                        show: false,
+                        opacity: 0
                     },
-                    splitLine: {
-                        lineStyle: {
-                            color: 'gray'
-                        }
+                    lineStyle: {
+                        color: '#4DC8FE',
+                        width: 1
                     },
+                    itemStyle: { color: '#fff', borderWidth: 1, borderColor: '#00C8DA', borderJoin: 'round' }
+                }]
+            }
+
+            const option = {
+                radar: {
+                    indicator: radarData.grounp,
+                    center: ['50%', '52%'],
+                    radius: '50%',
+                    splitNumber: 8,
+                    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: 10
+                        fontSize: 12
                     }
                 },
                 series: [
                     {
                         type: 'radar',
+                        data: radarData.data,
                         symbol: 'circle',
-                        symbolSize: 8,
-                        data: [
-                            {
-                                value: values,
-                                name: '综合得分',
-                                lineStyle: {
-                                    color: '#4DC8FE',
-                                    width: 2
-                                },
-                                itemStyle: {
-                                    color: '#fff',
-                                    borderWidth: 1,
-                                    borderColor: '#00C8DA'
-                                },
-                                areaStyle: {
-                                    color: 'rgba(77, 200, 254, 0.2)'
-                                }
-                            }
-                        ]
+                        symbolSize: 13,
+                        label: {
+                            show: false,
+                            formatter: (p) => p.value,
+                            color: '#333',
+                            fontSize: 16,
+                            fontWeight: 'bold'
+                        }
                     }
                 ],
                 tooltip: {
                     trigger: 'item',
-                   axisPointer: { type: 'shadow' }
+                    axisPointer: { type: 'shadow' }
                 }
             }
             this.chart.setOption(option)
@@ -191,6 +190,63 @@ export default {
         height: 350rpx;
     }
 
+    .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;
+        }
+    }
+
     .radar-list {
         display: flex;
         flex-direction: column;

src/pages/employeeProfile/index.vue

@@ -151,7 +151,7 @@
                         <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 class="legend-item legend-current"><span></span>当前分值</div>
                     </div>
                     <div class="chart-container" ref="radarChart" ></div>
                 </SectionTitle>

src/pages/organizationStruct/index.vue

@@ -0,0 +1,499 @@
+<template>
+    <view class="organization-struct">
+        <!-- 顶部搜索栏 -->
+        <view class="search-header">
+            <view class="search-box">
+                <u-icon name="search" color="#999" size="18" />
+                <input 
+                    v-model="searchKeyword" 
+                    class="search-input" 
+                    placeholder="搜索部门或人员" 
+                    @input="handleSearch"
+                />
+                <u-icon v-if="searchKeyword" name="close" color="#999" size="16" @click="clearSearch" />
+            </view>
+        </view>
+
+        <!-- 面包屑导航 -->
+        <view v-if="!searchKeyword && (breadcrumbs.length > 0 || currentNode)" class="breadcrumb">
+            <view class="back-btn" v-if="breadcrumbs.length > 0 || currentNode" @click="goBack">
+                <u-icon name="arrow-left" color="#666" size="20" />
+            </view>
+            <view 
+                v-for="(item, index) in breadcrumbs" 
+                :key="item.id"
+                class="breadcrumb-item"
+                @click="navigateToBreadcrumb(index)"
+            >
+                <text :class="['breadcrumb-text', { active: index === breadcrumbs.length - 1 }]">
+                    {{ item.label }}
+                </text>
+                <u-icon v-if="index < breadcrumbs.length - 1" name="arrow-right" color="#999" size="14" />
+            </view>
+        </view>
+
+        <!-- 内容区域 -->
+        <scroll-view class="content-area" scroll-y>
+            <!-- 搜索结果 -->
+            <view v-if="searchKeyword" class="search-results">
+                <view v-if="searchResults.length === 0" class="empty-state">
+                    <text>暂无搜索结果</text>
+                </view>
+                <view 
+                    v-for="item in searchResults" 
+                    :key="item.id || item.userId"
+                    :class="['result-item', { 'is-dept': item.nodeType === 'dept' || item.children }]"
+                    @click="handleResultClick(item)"
+                >
+                    <view class="result-icon">
+                        <u-icon :name="item.nodeType === 'dept' || item.children ? 'folder' : 'account'" 
+                            :color="item.nodeType === 'dept' || item.children ? '#A78BFA' : '#60A5FA'" size="20" />
+                    </view>
+                    <view class="result-info">
+                        <text class="result-name">{{ item.label || item.nickName || item.name }}</text>
+                        <text v-if="item.nodeType === 'dept' || item.children" class="result-path">
+                            {{ getSearchResultPath(item) }}
+                        </text>
+                    </view>
+                </view>
+            </view>
+
+            <!-- 正常浏览 -->
+            <view v-else class="dept-list">
+                <!-- 部门项 -->
+                <view 
+                    v-for="item in displayDepts" 
+                    :key="item.id"
+                    class="dept-item"
+                    @click="navigateToDept(item)"
+                >
+                    <view class="dept-icon">
+                        <u-icon name="folder" color="#A78BFA" size="40" />
+                    </view>
+                    <view class="dept-info">
+                        <text class="dept-name">{{ item.label || item.name }}</text>
+                        <text class="dept-count">{{ getNodeCount(item) }}</text>
+                    </view>
+                    <u-icon name="arrow-right" color="#ccc" size="20" />
+                </view>
+
+                <!-- 人员项 -->
+                <view 
+                    v-for="item in displayUsers" 
+                    :key="item.userId"
+                    class="user-item"
+                >
+                    <view class="user-avatar">
+                        <image v-if="item.avatar" :src="item.avatar" mode="aspectFill" class="avatar-img" />
+                        <view v-else class="avatar-placeholder">
+                            <text>{{ (item.label || item.nickName || item.userName || '').slice(-1) }}</text>
+                        </view>
+                    </view>
+                    <view class="user-info">
+                        <text class="user-name">{{ item.label  }}</text>
+                        <text v-if="item.postNames" class="user-post">{{ item.postNames }}</text>
+                    </view>
+                </view>
+
+                <!-- 空状态 -->
+                <view v-if="!displayDepts.length && !displayUsers.length && !loading" class="empty-state">
+                    <text>暂无数据</text>
+                </view>
+
+                <!-- 加载中 -->
+                <view v-if="loading" class="loading-state">
+                    <u-loading-icon text="加载中" textSize="14" />
+                </view>
+            </view>
+        </scroll-view>
+    </view>
+</template>
+
+<script>
+import { getDeptUserTree } from '@/api/system/user'
+
+export default {
+    name: 'OrganizationStruct',
+    data() {
+        return {
+            loading: false,
+            searchKeyword: '',
+            treeData: [],
+            currentNode: null,
+            breadcrumbs: [],
+            searchResults: []
+        }
+    },
+    computed: {
+        displayDepts() {
+            if (!this.currentNode) {
+                return this.treeData.filter(item => item.nodeType === 'dept' || (item.children && item.children.length > 0))
+            }
+            return (this.currentNode.children || []).filter(item => item.nodeType === 'dept' || (item.children && item.children.length > 0))
+        },
+        displayUsers() {
+            if (!this.currentNode) {
+                return this.treeData.filter(item => item.nodeType === 'user')
+            }
+            return (this.currentNode.children || []).filter(item => item.nodeType === 'user')
+        }
+    },
+    mounted() {
+        this.fetchTreeData()
+    },
+    methods: {
+        async fetchTreeData() {
+            this.loading = true
+            try {
+                const res = await getDeptUserTree()
+                this.treeData = res.data || []
+                this.currentNode = null
+                this.breadcrumbs = []
+            } catch (error) {
+                console.error('获取组织架构失败:', error)
+                uni.showToast({ title: '获取数据失败', icon: 'none' })
+            } finally {
+                this.loading = false
+            }
+        },
+        getNodeCount(node) {
+            const children = node.children || []
+            const deptCount = children.filter(c => c.nodeType === 'dept' || (c.children && c.children.length > 0)).length
+            const userCount = children.filter(c => c.nodeType === 'user').length
+            const parts = []
+            if (deptCount > 0) parts.push(`${deptCount}个部门`)
+            if (userCount > 0) parts.push(`${userCount}人`)
+            return parts.join('、')
+        },
+        navigateToDept(node) {
+            this.breadcrumbs.push({
+                id: node.id,
+                label: node.label || node.name
+            })
+            this.currentNode = node
+        },
+        goBack() {
+            if (this.breadcrumbs.length <= 1) {
+                this.currentNode = null
+                this.breadcrumbs = []
+            } else {
+                this.breadcrumbs.pop()
+                if (this.breadcrumbs.length === 0) {
+                    this.currentNode = null
+                } else {
+                    const targetId = this.breadcrumbs[this.breadcrumbs.length - 1].id
+                    this.currentNode = this.findNodeById(this.treeData, targetId)
+                }
+            }
+        },
+        navigateToBreadcrumb(index) {
+            if (index === 0) {
+                this.currentNode = null
+                this.breadcrumbs = []
+            } else {
+                const targetId = this.breadcrumbs[index].id
+                let targetNode = this.findNodeById(this.treeData, targetId)
+                if (targetNode) {
+                    this.currentNode = targetNode
+                    this.breadcrumbs = this.breadcrumbs.slice(0, index + 1)
+                }
+            }
+        },
+        findNodeById(nodes, id) {
+            for (const node of nodes) {
+                if (node.id === id) return node
+                if (node.children && node.children.length > 0) {
+                    const found = this.findNodeById(node.children, id)
+                    if (found) return found
+                }
+            }
+            return null
+        },
+        handleSearch() {
+            if (!this.searchKeyword.trim()) {
+                this.searchResults = []
+                return
+            }
+            const keyword = this.searchKeyword.trim().toLowerCase()
+            this.searchResults = this.searchTree(this.treeData, keyword)
+        },
+        searchTree(nodes, keyword, path = []) {
+            let results = []
+            for (const node of nodes) {
+                const name = (node.label || node.nickName || node.name || '').toLowerCase()
+                if (name.includes(keyword)) {
+                    results.push({
+                        ...node,
+                        searchPath: [...path]
+                    })
+                }
+                if (node.children && node.children.length > 0) {
+                    results = results.concat(
+                        this.searchTree(node.children, keyword, [...path, node.label || node.name])
+                    )
+                }
+            }
+            return results
+        },
+        getSearchResultPath(item) {
+            if (!item.searchPath || !item.searchPath.length) return ''
+            return item.searchPath.join(' > ')
+        },
+        handleResultClick(item) {
+            if (item.children || item.nodeType === 'dept') {
+                this.searchKeyword = ''
+                this.searchResults = []
+                const targetNode = this.findNodeById(this.treeData, item.id)
+                if (targetNode) {
+                    this.navigateToNodeFromRoot(targetNode)
+                }
+            }
+        },
+        navigateToNodeFromRoot(targetNode) {
+            const path = this.findPathToNode(this.treeData, targetNode.id)
+            if (path.length > 0) {
+                this.breadcrumbs = path.slice(0, -1).map(node => ({
+                    id: node.id,
+                    label: node.label || node.name
+                }))
+                this.currentNode = targetNode
+            }
+        },
+        findPathToNode(nodes, id, path = []) {
+            for (const node of nodes) {
+                const newPath = [...path, node]
+                if (node.id === id) {
+                    return newPath
+                }
+                if (node.children && node.children.length > 0) {
+                    const found = this.findPathToNode(node.children, id, newPath)
+                    if (found.length > 0) {
+                        return found
+                    }
+                }
+            }
+            return []
+        },
+        clearSearch() {
+            this.searchKeyword = ''
+            this.searchResults = []
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.organization-struct {
+    min-height: 100vh;
+    background-color: #f5f7fa;
+    display: flex;
+    flex-direction: column;
+}
+
+.search-header {
+    padding: 24rpx 32rpx;
+    background-color: #fff;
+}
+
+.search-box {
+    display: flex;
+    align-items: center;
+    gap: 16rpx;
+    padding: 16rpx 24rpx;
+    background-color: #f5f7fa;
+    border-radius: 48rpx;
+}
+
+.search-input {
+    flex: 1;
+    font-size: 28rpx;
+    color: #333;
+}
+
+.breadcrumb {
+    display: flex;
+    align-items: center;
+    padding: 20rpx 32rpx;
+    background-color: #fff;
+    overflow-x: auto;
+    white-space: nowrap;
+    border-bottom: 1rpx solid #eee;
+}
+
+.back-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-right: 16rpx;
+    flex-shrink: 0;
+}
+
+.breadcrumb-item {
+    display: flex;
+    align-items: center;
+    gap: 8rpx;
+    flex-shrink: 0;
+}
+
+.breadcrumb-text {
+    font-size: 28rpx;
+    color: #999;
+
+    &.active {
+        color: #333;
+        font-weight: 500;
+    }
+}
+
+.content-area {
+    flex: 1;
+    padding: 24rpx 32rpx;
+}
+
+.search-results {
+    background-color: #fff;
+    border-radius: 16rpx;
+    padding: 16rpx 0;
+}
+
+.result-item {
+    display: flex;
+    align-items: center;
+    padding: 24rpx 32rpx;
+    gap: 20rpx;
+    border-bottom: 1rpx solid #f5f5f5;
+}
+
+.result-icon {
+    width: 64rpx;
+    height: 64rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.result-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 8rpx;
+}
+
+.result-name {
+    font-size: 30rpx;
+    color: #333;
+}
+
+.result-path {
+    font-size: 24rpx;
+    color: #999;
+}
+
+.dept-list {
+    display: flex;
+    flex-direction: column;
+    gap: 20rpx;
+}
+
+.dept-item {
+    display: flex;
+    align-items: center;
+    padding: 24rpx 32rpx;
+    background-color: #fff;
+    border-radius: 16rpx;
+    gap: 20rpx;
+}
+
+.dept-icon {
+    width: 80rpx;
+    height: 80rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #f5f5f5;
+    border-radius: 12rpx;
+}
+
+.dept-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 8rpx;
+}
+
+.dept-name {
+    font-size: 32rpx;
+    color: #333;
+    font-weight: 500;
+}
+
+.dept-count {
+    font-size: 24rpx;
+    color: #999;
+}
+
+.user-item {
+    display: flex;
+    align-items: center;
+    padding: 24rpx 32rpx;
+    background-color: #fff;
+    border-radius: 16rpx;
+    gap: 20rpx;
+}
+
+.user-avatar {
+    width: 80rpx;
+    height: 80rpx;
+    flex-shrink: 0;
+}
+
+.avatar-img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+}
+
+.avatar-placeholder {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #60A5FA, #A78BFA);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    text {
+        font-size: 32rpx;
+        color: #fff;
+        font-weight: 500;
+    }
+}
+
+.user-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 6rpx;
+}
+
+.user-name {
+    font-size: 32rpx;
+    color: #333;
+    font-weight: 500;
+}
+
+.user-post {
+    font-size: 24rpx;
+    color: #999;
+}
+
+.empty-state,
+.loading-state {
+    padding: 80rpx 32rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #999;
+    font-size: 28rpx;
+}
+</style>