feat(organProfile): 添加排名列表及前三名头像组件

- 创建 RankList 组件展示排名数据
- 实现前三名头像顺序调整及样式区分
- 支持自定义分数字段标签显示
- 使用 scoped 样式美化排名列表和头像显示
- 优化前三名展示布局，突出第一名样式

src/api/system/user.js

@@ -125,4 +125,13 @@ export function getPostAllList() {
     url: '/system/post/listAllTree',
     method: 'get',
   })
+}
+
+//树状组织架构带职务
+export function getDeptUserTreePosition(params) {
+  return request({
+    url: '/system/user/deptAndUserTree',
+    method: 'get',
+    params: params
+  })
 }

src/pages/organProfile/components/rankList.vue

@@ -0,0 +1,84 @@
+<template>
+    <view class="rank-section">
+        <!-- 前三名头像：顺序为 第2名(左) 第1名(中) 第3名(右) -->
+        <view class="rank-avatars">
+            <view class="rank-avatar-item" v-for="(item, idx) in reorderedTop3" :key="idx"
+                :class="{ 'rank-first': item._rank === 1 }">
+                <view class="rank-avatar-wrapper" :class="'rank-pos-' + item._rank">
+                    <view class="rank-avatar-circle" :style="{ background: item.color }">
+                        <text>{{ item.name.slice(-2) }}</text>
+                    </view>
+                    <text class="rank-badge">{{ item._rank }}</text>
+                </view>
+                <text class="rank-name">{{ item.name }}</text>
+                <text class="rank-num">{{ item.num }}</text>
+            </view>
+        </view>
+        <!-- 排行列表 -->
+        <view class="rank-table">
+            <view class="rank-tr rank-th">
+                <text>排名</text><text>姓名</text><text>{{ scoreLabel }}</text>
+            </view>
+            <view class="rank-tr" v-for="(item, idx) in list" :key="idx">
+                <text>{{ idx + 1 }}</text><text>{{ item.name }}</text><text>{{ item.num }}</text>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    name: 'RankList',
+    props: {
+        top3: { type: Array, default: () => [] },
+        list: { type: Array, default: () => [] },
+        scoreLabel: { type: String, default: '问题数' }
+    },
+    computed: {
+        // 原始 top3: [0]=第1名, [1]=第2名, [2]=第3名
+        // 显示顺序: 第2名(左) 第1名(中) 第3名(右)
+        reorderedTop3() {
+            if (!this.top3 || this.top3.length < 3) return []
+            return [
+                { ...this.top3[1], _rank: 2 },
+                { ...this.top3[0], _rank: 1 },
+                { ...this.top3[2], _rank: 3 }
+            ]
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.rank-section { padding: 0 8rpx; }
+.rank-avatars { display: flex; justify-content: center; align-items: flex-end; gap: 40rpx; margin-bottom: 24rpx; }
+.rank-avatar-item { display: flex; flex-direction: column; align-items: center; gap: 8rpx; }
+.rank-avatar-item.rank-first { transform: translateY(-16rpx); }
+.rank-avatar-wrapper { position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
+.rank-avatar-wrapper.rank-pos-1 { border: 4rpx solid #fbbf24; }
+.rank-avatar-wrapper.rank-pos-2 { border: 4rpx solid #94a3b8; }
+.rank-avatar-wrapper.rank-pos-3 { border: 4rpx solid #fb923c; }
+.rank-avatar-circle {
+    width: 80rpx; height: 80rpx; border-radius: 50%;
+    display: flex; align-items: center; justify-content: center;
+}
+.rank-avatar-circle text { color: #fff; font-size: 26rpx; font-weight: bold; }
+.rank-badge {
+    position: absolute; bottom: -12rpx; left: 50%; transform: translateX(-50%);
+    width: 28rpx; height: 28rpx; border-radius: 50%;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 20rpx; font-weight: bold; color: #fff;
+}
+.rank-pos-1 .rank-badge { background: #fbbf24; }
+.rank-pos-2 .rank-badge { background: #94a3b8; }
+.rank-pos-3 .rank-badge { background: #fb923c; }
+.rank-name { font-size: 24rpx; color: #475569; }
+.rank-num { font-size: 32rpx; color: #1e293b; font-weight: bold; }
+.rank-table { display: flex; flex-direction: column; }
+.rank-tr {
+    display: flex; padding: 12rpx 0; font-size: 24rpx; color: #64748b;
+    border-bottom: 1rpx solid #e2e8f0;
+}
+.rank-tr text { flex: 1; text-align: center; }
+.rank-th { color: #1e293b; font-weight: bold; border-bottom: 2rpx solid #cbd5e1; }
+</style>

src/pages/organProfile/index.vue

@@ -4,7 +4,7 @@
             <!-- ====== 顶部统计卡片 ====== -->
             <view class="metric-row">
                 <view class="metric-card" v-for="(m, i) in metricCards" :key="i" :style="{ background: m.bg }">
-                    <text class="metric-title">{{ m.title }}</text>
+                    <text class="metric-title" :style="{ color: m.color }">{{ m.title }}</text>
                     <text class="metric-value" :style="{ color: m.color }">{{ m.value }}</text>
                     <view class="metric-change-row" v-if="!m.side">
                         <view class="metric-change-info">
@@ -19,97 +19,97 @@
             </view>
 
             <!-- ====== 监察问题统计 ====== -->
-            <view class="chart-card">
+            <view class="chart-card" :style="{ backgroundColor: '#FFF4E4' }">
                 <view class="chart-title">监察问题统计</view>
                 <view class="chart-box"><div ref="chartSuperviseTrend" class="chart-inner"></div></view>
             </view>
 
             <!-- ====== 问题类型分布 ====== -->
-            <view class="chart-card">
+            <view class="chart-card" :style="{ backgroundColor: '#FFF4E4' }">
                 <view class="chart-title">问题类型分布</view>
                 <view class="chart-box"><div ref="chartIssueType" class="chart-inner"></div></view>
             </view>
 
             <!-- ====== 班组问题统计（监察） ====== -->
-            <view class="chart-card">
+            <view class="chart-card" :style="{ backgroundColor: '#FFF4E4' }">
                 <view class="chart-title">班组问题统计（监察）</view>
                 <view class="chart-box"><div ref="chartTeamSupervise" class="chart-inner"></div></view>
             </view>
 
             <!-- ====== 区域问题占比（监察） ====== -->
-            <view class="chart-card">
+            <view class="chart-card" :style="{ backgroundColor: '#FFF4E4' }">
                 <view class="chart-title">区域问题占比（监察）</view>
                 <view class="chart-box"><div ref="chartRegionPie" class="chart-inner chart-pie"></div></view>
             </view>
 
             <!-- ====== 班组问题统计（实时） ====== -->
-            <view class="chart-card">
+            <view class="chart-card" :style="{ backgroundColor: '#E4F0E5' }">
                 <view class="chart-title">班组问题统计（实时）</view>
                 <view class="chart-box"><div ref="chartTeamQuality" class="chart-inner"></div></view>
             </view>
 
             <!-- ====== 实时质控拦截情况 ====== -->
-            <view class="chart-card">
+            <view class="chart-card" :style="{ backgroundColor: '#E4F0E5' }">
                 <view class="chart-title">实时质控拦截情况</view>
                 <view class="chart-box"><div ref="chartIntercept" class="chart-inner"></div></view>
             </view>
 
             <!-- ====== 实时质控开机年龄分布 ====== -->
-            <view class="chart-card">
+            <view class="chart-card" :style="{ backgroundColor: '#E4F0E5' }">
                 <view class="chart-title">实时质控开机年龄分布</view>
                 <view class="chart-box"><div ref="chartAgeDist" class="chart-inner"></div></view>
             </view>
 
             <!-- ====== 实时质控围栏难易度 ====== -->
-            <view class="chart-card">
-                <view class="chart-title">实时质控围栏难易度</view>
+            <view class="chart-card" :style="{ backgroundColor: '#E4F0E5' }">
+                <view class="chart-title">实时质控图像难易度</view>
                 <view class="chart-box"><div ref="chartFence" class="chart-inner"></div></view>
             </view>
 
             <!-- ====== 实时质控开机年限分布 ====== -->
-            <view class="chart-card">
+            <view class="chart-card" :style="{ backgroundColor: '#E4F0E5' }">
                 <view class="chart-title">实时质控开机年限分布</view>
                 <view class="chart-box"><div ref="chartYearLimit" class="chart-inner"></div></view>
             </view>
 
             <!-- ====== 实时拦截物品汇总 ====== -->
-            <view class="chart-card">
+            <view class="chart-card" :style="{ backgroundColor: '#E4F0E5' }">
                 <view class="chart-title">实时拦截物品汇总</view>
                 <view class="chart-box"><div ref="chartItems" class="chart-inner"></div></view>
             </view>
 
             <!-- ====== 服务巡查 ====== -->
-            <view class="chart-card">
+            <view class="chart-card" :style="{ backgroundColor: '#E4EBFF' }">
                 <view class="chart-title">服务巡查</view>
                 <view class="chart-box"><div ref="chartServiceInspect" class="chart-inner"></div></view>
             </view>
 
             <!-- ====== 服务巡查趋势 ====== -->
-            <view class="chart-card">
+            <view class="chart-card" :style="{ backgroundColor: '#E4EBFF' }">
                 <view class="chart-title">服务巡查</view>
                 <view class="chart-box"><div ref="chartServiceLine" class="chart-inner"></div></view>
             </view>
 
             <!-- ====== 投诉涉及班组情况 ====== -->
-            <view class="chart-card">
+            <view class="chart-card" :style="{ backgroundColor: '#F0ACA1' }">
                 <view class="chart-title">投诉涉及班组情况</view>
                 <view class="chart-box"><div ref="chartComplaint" class="chart-inner"></div></view>
             </view>
 
             <!-- ====== 不安全事件发生对比 ====== -->
-            <view class="chart-card">
+            <view class="chart-card" :style="{ backgroundColor: '#DCDCDF' }">
                 <view class="chart-title">不安全事件发生对比</view>
                 <view class="chart-box"><div ref="chartUnsafe" class="chart-inner"></div></view>
             </view>
 
             <!-- ====== 亚健康人数占比 ====== -->
-            <view class="chart-card">
+            <view class="chart-card" :style="{ backgroundColor: '#FFDBA1' }">
                 <view class="chart-title">亚健康人数占比</view>
                 <view class="chart-box"><div ref="chartSubHealthPie" class="chart-inner chart-pie"></div></view>
             </view>
 
             <!-- ====== 各班组健康与亚健康比例 ====== -->
-            <view class="chart-card">
+            <view class="chart-card" :style="{ backgroundColor: '#FFDBA1' }">
                 <view class="chart-title">各班组健康与亚健康比例</view>
                 <view class="chart-box"><div ref="chartHealthStack" class="chart-inner"></div></view>
             </view>
@@ -121,129 +121,47 @@
             </view>
 
             <!-- ====== 监察问题（总）排行 ====== -->
-            <view class="chart-card">
+            <view class="chart-card" :style="{ backgroundColor: '#FFF4E4' }">
                 <view class="chart-title">监察问题（总）</view>
-                <view class="rank-section">
-                    <view class="rank-avatars">
-                        <view class="rank-avatar-item" v-for="(item, idx) in superVisionTop3" :key="idx">
-                            <view class="rank-avatar-wrapper" :class="'rank-pos-' + (idx + 1)">
-                                <view class="rank-avatar-circle" :style="{ background: item.color }">
-                                    <text>{{ item.name.slice(-2) }}</text>
-                                </view>
-                                <text class="rank-badge">{{ idx + 1 }}</text>
-                            </view>
-                            <text class="rank-name">{{ item.name }}</text>
-                            <text class="rank-num">{{ item.num }}</text>
-                        </view>
-                    </view>
-                    <view class="rank-table">
-                        <view class="rank-tr rank-th">
-                            <text>排名</text><text>姓名</text><text>问题数</text>
-                        </view>
-                        <view class="rank-tr" v-for="(item, idx) in superVisionList" :key="idx">
-                            <text>{{ idx + 1 }}</text><text>{{ item.name }}</text><text>{{ item.num }}</text>
-                        </view>
-                    </view>
-                </view>
+                <RankList :top3="superVisionTop3" :list="superVisionList" scoreLabel="问题数" />
             </view>
 
             <!-- ====== 实时漏洞检情况（总）排行 ====== -->
-            <view class="chart-card">
+            <view class="chart-card" :style="{ backgroundColor: '#E4F0E5' }">
                 <view class="chart-title">实时漏洞检情况（总）</view>
-                <view class="rank-section">
-                    <view class="rank-avatars">
-                        <view class="rank-avatar-item" v-for="(item, idx) in vulnTop3" :key="idx">
-                            <view class="rank-avatar-wrapper" :class="'rank-pos-' + (idx + 1)">
-                                <view class="rank-avatar-circle" :style="{ background: item.color }">
-                                    <text>{{ item.name.slice(-2) }}</text>
-                                </view>
-                                <text class="rank-badge">{{ idx + 1 }}</text>
-                            </view>
-                            <text class="rank-name">{{ item.name }}</text>
-                            <text class="rank-num">{{ item.num }}</text>
-                        </view>
-                    </view>
-                    <view class="rank-table">
-                        <view class="rank-tr rank-th">
-                            <text>排名</text><text>姓名</text><text>问题数</text>
-                        </view>
-                        <view class="rank-tr" v-for="(item, idx) in vulnList" :key="idx">
-                            <text>{{ idx + 1 }}</text><text>{{ item.name }}</text><text>{{ item.num }}</text>
-                        </view>
-                    </view>
-                </view>
+                <RankList :top3="vulnTop3" :list="vulnList" scoreLabel="问题数" />
             </view>
 
             <!-- ====== 航站楼加分排行 ====== -->
-            <view class="chart-card">
+            <view class="chart-card" :style="{ backgroundColor: '#E4EBFF' }">
                 <view class="chart-title">航站楼加分</view>
-                <view class="rank-section">
-                    <view class="rank-avatars">
-                        <view class="rank-avatar-item" v-for="(item, idx) in bonusTop3" :key="idx">
-                            <view class="rank-avatar-wrapper" :class="'rank-pos-' + (idx + 1)">
-                                <view class="rank-avatar-circle" :style="{ background: item.color }">
-                                    <text>{{ item.name.slice(-2) }}</text>
-                                </view>
-                                <text class="rank-badge">{{ idx + 1 }}</text>
-                            </view>
-                            <text class="rank-name">{{ item.name }}</text>
-                            <text class="rank-num">{{ item.num }}</text>
-                        </view>
-                    </view>
-                    <view class="rank-table">
-                        <view class="rank-tr rank-th">
-                            <text>排名</text><text>姓名</text><text>加分</text>
-                        </view>
-                        <view class="rank-tr" v-for="(item, idx) in bonusList" :key="idx">
-                            <text>{{ idx + 1 }}</text><text>{{ item.name }}</text><text>{{ item.num }}</text>
-                        </view>
-                    </view>
-                </view>
+                <RankList :top3="bonusTop3" :list="bonusList" scoreLabel="加分" />
             </view>
 
             <!-- ====== 查获数量排行 ====== -->
             <view class="chart-card">
                 <view class="chart-title">查获数量</view>
-                <view class="rank-section">
-                    <view class="rank-avatars">
-                        <view class="rank-avatar-item" v-for="(item, idx) in seizeTop3" :key="idx">
-                            <view class="rank-avatar-wrapper" :class="'rank-pos-' + (idx + 1)">
-                                <view class="rank-avatar-circle" :style="{ background: item.color }">
-                                    <text>{{ item.name.slice(-2) }}</text>
-                                </view>
-                                <text class="rank-badge">{{ idx + 1 }}</text>
-                            </view>
-                            <text class="rank-name">{{ item.name }}</text>
-                            <text class="rank-num">{{ item.num }}</text>
-                        </view>
-                    </view>
-                    <view class="rank-table">
-                        <view class="rank-tr rank-th">
-                            <text>排名</text><text>姓名</text><text>查获数</text>
-                        </view>
-                        <view class="rank-tr" v-for="(item, idx) in seizeList" :key="idx">
-                            <text>{{ idx + 1 }}</text><text>{{ item.name }}</text><text>{{ item.num }}</text>
-                        </view>
-                    </view>
-                </view>
+                <RankList :top3="seizeTop3" :list="seizeList" scoreLabel="查获数" />
             </view>
         </scroll-view>
     </view>
 </template>
 <script>
 import * as echarts from 'echarts'
+import RankList from './components/rankList.vue'
 export default {
     name: 'OrganProfile',
+    components: { RankList },
     data() {
         return {
             metricCards: [
-                { title: '监察问题数（本月）', value: '11', change: '57.69%', changeType: 'down', changeColor: '#ef4444', color: '#f59e0b', bg: '#dbeafe', sparkColor: '#3b82f6', _sparkRef: null },
-                { title: '实时质控数（本月）', value: '21', change: '56.25%', changeType: 'down', changeColor: '#ef4444', color: '#22c55e', bg: '#dcfce7', sparkColor: '#22c55e', _sparkRef: null },
-                { title: '服务巡查（本月）', value: '4', change: '0%', changeType: 'flat', changeColor: '#6b7280', color: '#3b82f6', bg: '#dbeafe', sparkColor: '#3b82f6', _sparkRef: null },
-                { title: '投诉情况（本月）', value: '1', change: '88.89%', changeType: 'down', changeColor: '#ef4444', color: '#ef4444', bg: '#fce4ec', sparkColor: '#ef4444', _sparkRef: null },
+                { title: '监察问题数（本月）', value: '11', change: '57.69%', changeType: 'down', changeColor: '#ef4444', color: '#f59e0b', bg: '#FFF4E4', sparkColor: '#3b82f6', _sparkRef: null },
+                { title: '实时质控数（本月）', value: '21', change: '56.25%', changeType: 'down', changeColor: '#ef4444', color: '#22c55e', bg: '#E4F0E5', sparkColor: '#22c55e', _sparkRef: null },
+                { title: '服务巡查（本月）', value: '4', change: '0%', changeType: 'flat', changeColor: '#6b7280', color: '#3b82f6', bg: '#E6E8FF', sparkColor: '#3b82f6', _sparkRef: null },
+                { title: '投诉情况（本月）', value: '1', change: '88.89%', changeType: 'down', changeColor: '#ef4444', color: '#ef4444', bg: '#F0ACA1', sparkColor: '#ef4444', _sparkRef: null },
                 { title: '不安全事件发生次数（今年）', value: '3', change: '57.14%', changeType: 'down', changeColor: '#ef4444', color: '#ffffff', bg: '#6b7280', sparkColor: '#9ca3af', _sparkRef: null },
-                { title: '锐甲安语—自愿报告系统', value: '3', color: '#fff', bg: 'linear-gradient(135deg, #f59e0b, #d97706)', side: true },
-                { title: '部门亚健康人员', value: '147', color: '#fff', bg: 'linear-gradient(135deg, #fbbf24, #f59e0b)', side: true }
+                { title: '锐甲安语—自愿报告系统', value: '3', color: '#507AFC', bg: '#F2E5FF', side: true },
+                { title: '部门亚健康人员', value: '147', color: '#E41754', bg: '#FFDBA1', side: true }
             ],
             superVisionTop3: [
                 { name: '徐皓迪', num: 7, color: '#3b82f6' },
@@ -657,34 +575,5 @@ export default {
 .chart-box { width: 100%; }
 .chart-inner { width: 100%; height: 380rpx; }
 .chart-pie { height: 420rpx; }
-.rank-section { padding: 0 8rpx; }
-.rank-avatars { display: flex; justify-content: center; gap: 40rpx; margin-bottom: 24rpx; }
-.rank-avatar-item { display: flex; flex-direction: column; align-items: center; gap: 8rpx; }
-.rank-avatar-wrapper { position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
-.rank-avatar-wrapper.rank-pos-1 { border: 4rpx solid #94a3b8; }
-.rank-avatar-wrapper.rank-pos-2 { border: 4rpx solid #fbbf24; }
-.rank-avatar-wrapper.rank-pos-3 { border: 4rpx solid #fb923c; }
-.rank-avatar-circle {
-    width: 80rpx; height: 80rpx; border-radius: 50%;
-    display: flex; align-items: center; justify-content: center;
-}
-.rank-avatar-circle text { color: #fff; font-size: 26rpx; font-weight: bold; }
-.rank-badge {
-    position: absolute; bottom: -12rpx; left: 50%; transform: translateX(-50%);
-    width: 28rpx; height: 28rpx; border-radius: 50%;
-    display: flex; align-items: center; justify-content: center;
-    font-size: 20rpx; font-weight: bold; color: #fff;
-}
-.rank-pos-1 .rank-badge { background: #94a3b8; }
-.rank-pos-2 .rank-badge { background: #fbbf24; }
-.rank-pos-3 .rank-badge { background: #fb923c; }
-.rank-name { font-size: 24rpx; color: #475569; }
-.rank-num { font-size: 32rpx; color: #1e293b; font-weight: bold; }
-.rank-table { display: flex; flex-direction: column; }
-.rank-tr {
-    display: flex; padding: 12rpx 0; font-size: 24rpx; color: #64748b;
-    border-bottom: 1rpx solid #e2e8f0;
-}
-.rank-tr text { flex: 1; text-align: center; }
-.rank-th { color: #1e293b; font-weight: bold; border-bottom: 2rpx solid #cbd5e1; }
+
 </style>

src/pages/organizationStruct/index.vue

@@ -91,8 +91,8 @@
                         </view>
                     </view>
                     <view class="user-info">
-                        <text class="user-name">{{ item.label  }}</text>
-                        <text v-if="item.postNames" class="user-post">{{ item.postNames }}</text>
+                        <text class="user-name">{{ item.label }}</text>
+                        <text v-if="item.roles" class="user-post">{{ item.roles }}</text>
                     </view>
                 </view>
 
@@ -111,7 +111,7 @@
 </template>
 
 <script>
-import { getDeptUserTree } from '@/api/system/user'
+import { getDeptUserTreePosition } from '@/api/system/user'
 
 export default {
     name: 'OrganizationStruct',
@@ -146,7 +146,7 @@ export default {
         async fetchTreeData() {
             this.loading = true
             try {
-                const res = await getDeptUserTree()
+                const res = await getDeptUserTreePosition()
                 this.treeData = res.data || []
                 this.currentNode = null
                 this.breadcrumbs = []

src/pages/profileManage/index.vue

@@ -20,7 +20,7 @@
 import HomeContainer from '@/components/HomeContainer.vue'
 import { getAppList } from '@/api/system/user'
 
-const profileAppNames = ['综合信息画像', '部门画像', '班组画像', '小组画像', '员工画像']
+const profileAppNames = ['全站综合信息', '部门画像', '班组画像', '小组画像', '员工画像']
 
 export default {
   components: { HomeContainer },

src/pages/work/index.vue

@@ -41,7 +41,7 @@
 import HomeContainer from "@/components/HomeContainer.vue";
 import { checkRolePermission } from "@/utils/common.js";
 import { getUserProfile, getAppListByRoleId,getAppList } from "@/api/system/user";
-const profileAppNames = ['综合信息画像', '部门画像', '班组画像', '小组画像', '员工画像']
+const profileAppNames = ['全站综合信息', '部门画像', '班组画像', '小组画像', '员工画像']
 export default {
   components: { HomeContainer },
   data() {