feat(organProfile): 优化画像页图表布局及排行榜样式

- 新增“实时质控开机年限分布”柱状图
- 增加“服务巡查”折线图以丰富数据展示
- 调整顶部指标卡片及中部图表区的结构，提升视觉一致性
- 优化右侧排行榜头像展示，添加排名徽章和样式区分前3名
- 修正头像显示为姓名后两位，增强辨识度
- 增加头像及排名徽章的样式，改善用户体验
- 统一图表tooltip样式，确保视觉一致性
- 调整部分图表标题文案，提升表述准确性
- 杜绝代码中多余空行，优化模板结构层次

src/views/portraitManagement/organProfile/index.vue

@@ -1,197 +1,219 @@
 <template>
-  
-    <div class="org-profile">
-      <!-- 顶部指标卡片 -->
-      <div class="metric-row">
-        <div class="metric-card" v-for="(m, i) in metricCards" :key="i" :style="{ background: m.bg }">
-          <div class="metric-title">{{ m.title }}</div>
-          <div class="metric-value" :style="{ color: m.color }">{{ m.value }}</div>
-          <div class="metric-change-row">
-            <div class="metric-change-info">
-              <span class="metric-change-label">环比</span>
-              <span class="metric-change" :class="'change-' + m.changeType" :style="{ color: m.changeColor }">
-                {{ m.change }}
-              </span>
-            </div>
-            <div class="metric-chart" :ref="el => m._sparkRef = el" />
+
+  <div class="org-profile">
+    <!-- 顶部指标卡片 -->
+    <div class="metric-row">
+      <div class="metric-card" v-for="(m, i) in metricCards" :key="i" :style="{ background: m.bg }">
+        <div class="metric-title">{{ m.title }}</div>
+        <div class="metric-value" :style="{ color: m.color }">{{ m.value }}</div>
+        <div class="metric-change-row">
+          <div class="metric-change-info">
+            <span class="metric-change-label">环比</span>
+            <span class="metric-change" :class="'change-' + m.changeType" :style="{ color: m.changeColor }">
+              {{ m.change }}
+            </span>
           </div>
+          <div class="metric-chart" :ref="el => m._sparkRef = el" />
         </div>
-        <div class="metric-side-cards">
-          <div class="metric-card metric-warning-top">
-            <div class="metric-title">锐甲安语—自愿报告系统</div>
-            <div class="metric-value" style="color:#fff">3</div>
-          </div>
-          <div class="metric-card metric-warning-bottom">
-            <div class="metric-title">部门亚健康人员</div>
-            <div class="metric-value" style="color:#fff">147</div>
-          </div>
+      </div>
+      <div class="metric-side-cards">
+        <div class="metric-card metric-warning-top">
+          <div class="metric-title">锐甲安语—自愿报告系统</div>
+          <div class="metric-value" style="color:#fff">3</div>
+        </div>
+        <div class="metric-card metric-warning-bottom">
+          <div class="metric-title">部门亚健康人员</div>
+          <div class="metric-value" style="color:#fff">147</div>
         </div>
       </div>
+    </div>
 
-      <!-- 中部图表区 -->
-      <div class="charts-row">
-        <div class="charts-col charts-col-main">
-          <!-- 第一行 -->
-          <div class="charts-grid charts-grid-2">
-            <WhiteCard title="监察问题统计" bgColor="#dbeafe">
-              <div ref="supervisionLineRef" class="chart-box" />
-            </WhiteCard>
-            <WhiteCard title="问题类型分布" bgColor="#dbeafe">
-              <div ref="problemTypeRef" class="chart-box" />
-            </WhiteCard>
-          </div>
-          <!-- 第二行 -->
-          <div class="charts-grid charts-grid-2">
-            <WhiteCard title="班组问题统计（监察）" bgColor="#dcfce7">
-              <div ref="teamSupervisionRef" class="chart-box" />
-            </WhiteCard>
-            <WhiteCard title="区域问题占比（监察）" bgColor="#fef3c7">
-              <div ref="areaPieRef" class="chart-box" />
-            </WhiteCard>
-          </div>
-          <!-- 第三行 -->
-          <div class="charts-grid charts-grid-2">
-            <WhiteCard title="班组问题统计（实时）" bgColor="#dcfce7">
-              <div ref="teamRealtimeRef" class="chart-box" />
-            </WhiteCard>
-            <WhiteCard title="实时质控拦截情况" bgColor="#dcfce7">
-              <div ref="realtimeLineRef" class="chart-box" />
-            </WhiteCard>
-          </div>
-          <!-- 第四行 -->
-          <div class="charts-grid charts-grid-2">
-            <WhiteCard title="实时质控开机年轮分布" bgColor="#dbeafe">
-              <div ref="yearRingRef" class="chart-box" />
-            </WhiteCard>
-            <WhiteCard title="实时质控围难易度" bgColor="#dbeafe">
-              <div ref="difficultyRef" class="chart-box" />
-            </WhiteCard>
-          </div>
-          <!-- 第五行 -->
-          <div class="charts-grid charts-grid-2">
-            <WhiteCard title="实时拦截物品汇总" bgColor="#dbeafe">
-              <div ref="interceptItemsRef" class="chart-box" />
-            </WhiteCard>
-            <WhiteCard title="服务巡查" bgColor="#dbeafe">
-              <div ref="servicePatrolRef" class="chart-box" />
-            </WhiteCard>
-          </div>
-          <!-- 第六行 -->
-          <div class="charts-grid charts-grid-2">
-            <WhiteCard title="投诉涉及班组情况" bgColor="#fce4ec">
-              <div ref="complaintTeamRef" class="chart-box" />
-            </WhiteCard>
-            <WhiteCard title="不安全事件发生对比" bgColor="#dbeafe">
-              <div ref="unsafeCompareRef" class="chart-box" />
-            </WhiteCard>
-          </div>
-          <!-- 第七行 -->
-          <div class="charts-grid charts-grid-2">
-            <WhiteCard title="亚健康人数占比" bgColor="#fef3c7">
-              <div ref="subhealthPieRef" class="chart-box" />
-            </WhiteCard>
-            <WhiteCard title="各班组健康与亚健康比例" bgColor="#fef3c7">
-              <div ref="healthRatioRef" class="chart-box" />
-            </WhiteCard>
-          </div>
-          <!-- 第八行 -->
-          <div class="charts-grid charts-grid-1">
-            <WhiteCard title="旅检三部人员年龄分布表" bgColor="#dbeafe">
-              <div ref="ageDistRef" class="chart-box-wide" />
-            </WhiteCard>
-          </div>
+    <!-- 中部图表区 -->
+    <div class="charts-row">
+      <div class="charts-col charts-col-main">
+        <!-- 第一行 -->
+        <div class="charts-grid charts-grid-2">
+          <WhiteCard title="监察问题统计" bgColor="#dbeafe">
+            <div ref="supervisionLineRef" class="chart-box" />
+          </WhiteCard>
+          <WhiteCard title="问题类型分布" bgColor="#dbeafe">
+            <div ref="problemTypeRef" class="chart-box" />
+          </WhiteCard>
+        </div>
+        <!-- 第二行 -->
+        <div class="charts-grid charts-grid-2">
+          <WhiteCard title="班组问题统计（监察）" bgColor="#dcfce7">
+            <div ref="teamSupervisionRef" class="chart-box" />
+          </WhiteCard>
+          <WhiteCard title="区域问题占比（监察）" bgColor="#fef3c7">
+            <div ref="areaPieRef" class="chart-box" />
+          </WhiteCard>
+        </div>
+        <!-- 第三行 -->
+        <div class="charts-grid charts-grid-2">
+          <WhiteCard title="班组问题统计（实时）" bgColor="#dcfce7">
+            <div ref="teamRealtimeRef" class="chart-box" />
+          </WhiteCard>
+          <WhiteCard title="实时质控拦截情况" bgColor="#dcfce7">
+            <div ref="realtimeLineRef" class="chart-box" />
+          </WhiteCard>
+        </div>
+        <!-- 第四行 -->
+        <div class="charts-grid charts-grid-2">
+          <WhiteCard title="实时质控开机年龄分布" bgColor="#dbeafe">
+            <div ref="yearRingRef" class="chart-box" />
+          </WhiteCard>
+          <WhiteCard title="实时质控围难易度" bgColor="#dbeafe">
+            <div ref="difficultyRef" class="chart-box" />
+          </WhiteCard>
         </div>
+        <!-- 实时质控开机年限分布 -->
+        <div class="charts-grid charts-grid-2">
+          <WhiteCard title="实时质控开机年限分布" bgColor="#dcfce7">
+            <div ref="yearLimitRef" class="chart-box" />
+          </WhiteCard>
+          <WhiteCard title="实时拦截物品汇总" bgColor="#dbeafe">
+            <div ref="interceptItemsRef" class="chart-box" />
+          </WhiteCard>
+        </div>
+        <!-- 第五行 -->
+        <div class="charts-grid charts-grid-2">
+
+          <WhiteCard title="服务巡查" bgColor="#dbeafe">
+            <div ref="servicePatrolRef" class="chart-box" />
+          </WhiteCard>
+          <WhiteCard title="服务巡查" bgColor="#e8eaf6">
+            <div ref="servicePatrolLineRef" class="chart-box" />
+          </WhiteCard>
+        </div>
+        <!-- 第六行 -->
+        <div class="charts-grid charts-grid-2">
+          <WhiteCard title="投诉涉及班组情况" bgColor="#fce4ec">
+            <div ref="complaintTeamRef" class="chart-box" />
+          </WhiteCard>
+          <WhiteCard title="不安全事件发生对比" bgColor="#dbeafe">
+            <div ref="unsafeCompareRef" class="chart-box" />
+          </WhiteCard>
+        </div>
+        <!-- 第七行 -->
+        <div class="charts-grid charts-grid-2">
+          <WhiteCard title="亚健康人数占比" bgColor="#fef3c7">
+            <div ref="subhealthPieRef" class="chart-box" />
+          </WhiteCard>
+          <WhiteCard title="各班组健康与亚健康比例" bgColor="#fef3c7">
+            <div ref="healthRatioRef" class="chart-box" />
+          </WhiteCard>
+        </div>
+        <!-- 第八行 -->
+        <div class="charts-grid charts-grid-1">
+          <WhiteCard title="旅检三部人员年龄分布表" bgColor="#dbeafe">
+            <div ref="ageDistRef" class="chart-box-wide" />
+          </WhiteCard>
+        </div>
+      </div>
 
-        <!-- 右侧排行榜 -->
-        <div class="charts-col-side">
-          <WhiteCard title="监察问题（总）" bgColor="#f0f4ff">
-            <div class="rank-list">
-              <div class="rank-avatar-row">
-                <div class="rank-avatar-item" v-for="(item, i) in superVisionTop3" :key="i">
-                  <div class="rank-avatar" :style="{ background: item.color }">{{ item.name[0] }}</div>
-                  <div class="rank-name">{{ item.name }}</div>
-                  <div class="rank-num">{{ item.num }}</div>
+      <!-- 右侧排行榜 -->
+      <div class="charts-col-side">
+        <WhiteCard title="监察问题（总）" bgColor="#f0f4ff">
+          <div class="rank-list">
+            <div class="rank-avatar-row">
+              <div class="rank-avatar-item" v-for="(item, i) in superVisionTop3" :key="i">
+                <div class="rank-avatar-wrapper" :class="'rank-pos-' + (i + 1)">
+                  <div class="rank-avatar" :style="{ background: item.color }">{{ item.name.slice(-2) }}</div>
+                  <span class="rank-badge">{{ i + 1 }}</span>
                 </div>
+                <div class="rank-name">{{ item.name }}</div>
+                <div class="rank-num">{{ item.num }}</div>
               </div>
-              <div class="rank-table">
-                <div class="rank-tr rank-th">
-                  <span>排名</span><span>姓名</span><span>问题数</span>
-                </div>
-                <div class="rank-tr" v-for="(item, i) in superVisionList" :key="i">
-                  <span>{{ i + 1 }}</span>
-                  <span>{{ item.name }}</span>
-                  <span>{{ item.num }}</span>
-                </div>
+            </div>
+            <div class="rank-table">
+              <div class="rank-tr rank-th">
+                <span>排名</span><span>姓名</span><span>问题数</span>
+              </div>
+              <div class="rank-tr" v-for="(item, i) in superVisionList" :key="i">
+                <span>{{ i + 1 }}</span>
+                <span>{{ item.name }}</span>
+                <span>{{ item.num }}</span>
               </div>
             </div>
-          </WhiteCard>
-          <WhiteCard title="实时漏洞检情况（总）" bgColor="#f0fdf4">
-            <div class="rank-list">
-              <div class="rank-avatar-row">
-                <div class="rank-avatar-item" v-for="(item, i) in vulnTop3" :key="i">
-                  <div class="rank-avatar" :style="{ background: item.color }">{{ item.name[0] }}</div>
-                  <div class="rank-name">{{ item.name }}</div>
-                  <div class="rank-num">{{ item.num }}</div>
+          </div>
+        </WhiteCard>
+        <WhiteCard title="实时漏洞检情况（总）" bgColor="#f0fdf4">
+          <div class="rank-list">
+            <div class="rank-avatar-row">
+              <div class="rank-avatar-item" v-for="(item, i) in vulnTop3" :key="i">
+                <div class="rank-avatar-wrapper" :class="'rank-pos-' + (i + 1)">
+                  <div class="rank-avatar" :style="{ background: item.color }">{{ item.name.slice(-2) }}</div>
+                  <span class="rank-badge">{{ i + 1 }}</span>
                 </div>
+                <div class="rank-name">{{ item.name }}</div>
+                <div class="rank-num">{{ item.num }}</div>
               </div>
-              <div class="rank-table">
-                <div class="rank-tr rank-th">
-                  <span>排名</span><span>姓名</span><span>问题数</span>
-                </div>
-                <div class="rank-tr" v-for="(item, i) in vulnList" :key="i">
-                  <span>{{ i + 1 }}</span>
-                  <span>{{ item.name }}</span>
-                  <span>{{ item.num }}</span>
-                </div>
+            </div>
+            <div class="rank-table">
+              <div class="rank-tr rank-th">
+                <span>排名</span><span>姓名</span><span>问题数</span>
+              </div>
+              <div class="rank-tr" v-for="(item, i) in vulnList" :key="i">
+                <span>{{ i + 1 }}</span>
+                <span>{{ item.name }}</span>
+                <span>{{ item.num }}</span>
               </div>
             </div>
-          </WhiteCard>
-          <WhiteCard title="航站楼加分" bgColor="#eff6ff">
-            <div class="rank-list">
-              <div class="rank-avatar-row">
-                <div class="rank-avatar-item" v-for="(item, i) in bonusTop3" :key="i">
-                  <div class="rank-avatar" :style="{ background: item.color }">{{ item.name[0] }}</div>
-                  <div class="rank-name">{{ item.name }}</div>
-                  <div class="rank-num">{{ item.num }}</div>
+          </div>
+        </WhiteCard>
+        <WhiteCard title="航站楼加分" bgColor="#eff6ff">
+          <div class="rank-list">
+            <div class="rank-avatar-row">
+              <div class="rank-avatar-item" v-for="(item, i) in bonusTop3" :key="i">
+                <div class="rank-avatar-wrapper" :class="'rank-pos-' + (i + 1)">
+                  <div class="rank-avatar" :style="{ background: item.color }">{{ item.name.slice(-2) }}</div>
+                  <span class="rank-badge">{{ i + 1 }}</span>
                 </div>
+                <div class="rank-name">{{ item.name }}</div>
+                <div class="rank-num">{{ item.num }}</div>
               </div>
-              <div class="rank-table">
-                <div class="rank-tr rank-th">
-                  <span>排名</span><span>姓名</span><span>加分</span>
-                </div>
-                <div class="rank-tr" v-for="(item, i) in bonusList" :key="i">
-                  <span>{{ i + 1 }}</span>
-                  <span>{{ item.name }}</span>
-                  <span>{{ item.num }}</span>
-                </div>
+            </div>
+            <div class="rank-table">
+              <div class="rank-tr rank-th">
+                <span>排名</span><span>姓名</span><span>加分</span>
+              </div>
+              <div class="rank-tr" v-for="(item, i) in bonusList" :key="i">
+                <span>{{ i + 1 }}</span>
+                <span>{{ item.name }}</span>
+                <span>{{ item.num }}</span>
               </div>
             </div>
-          </WhiteCard>
-          <WhiteCard title="查获数量" bgColor="#f0f4ff">
-            <div class="rank-list">
-              <div class="rank-avatar-row">
-                <div class="rank-avatar-item" v-for="(item, i) in seizureTop3" :key="i">
-                  <div class="rank-avatar" :style="{ background: item.color }">{{ item.name[0] }}</div>
-                  <div class="rank-name">{{ item.name }}</div>
-                  <div class="rank-num">{{ item.num }}</div>
+          </div>
+        </WhiteCard>
+        <WhiteCard title="查获数量" bgColor="#f0f4ff">
+          <div class="rank-list">
+            <div class="rank-avatar-row">
+              <div class="rank-avatar-item" v-for="(item, i) in seizureTop3" :key="i">
+                <div class="rank-avatar-wrapper" :class="'rank-pos-' + (i + 1)">
+                  <div class="rank-avatar" :style="{ background: item.color }">{{ item.name.slice(-2) }}</div>
+                  <span class="rank-badge">{{ i + 1 }}</span>
                 </div>
+                <div class="rank-name">{{ item.name }}</div>
+                <div class="rank-num">{{ item.num }}</div>
               </div>
-              <div class="rank-table">
-                <div class="rank-tr rank-th">
-                  <span>排名</span><span>姓名</span><span>查获数</span>
-                </div>
-                <div class="rank-tr" v-for="(item, i) in seizureList" :key="i">
-                  <span>{{ i + 1 }}</span>
-                  <span>{{ item.name }}</span>
-                  <span>{{ item.num }}</span>
-                </div>
+            </div>
+            <div class="rank-table">
+              <div class="rank-tr rank-th">
+                <span>排名</span><span>姓名</span><span>查获数</span>
+              </div>
+              <div class="rank-tr" v-for="(item, i) in seizureList" :key="i">
+                <span>{{ i + 1 }}</span>
+                <span>{{ item.name }}</span>
+                <span>{{ item.num }}</span>
               </div>
             </div>
-          </WhiteCard>
-        </div>
+          </div>
+        </WhiteCard>
       </div>
     </div>
- 
+  </div>
+
 </template>
 
 <script setup>
@@ -218,9 +240,11 @@ const areaPieRef = ref(null)
 const teamRealtimeRef = ref(null)
 const realtimeLineRef = ref(null)
 const yearRingRef = ref(null)
+const yearLimitRef = ref(null)
 const difficultyRef = ref(null)
 const interceptItemsRef = ref(null)
 const servicePatrolRef = ref(null)
+const servicePatrolLineRef = ref(null)
 const complaintTeamRef = ref(null)
 const unsafeCompareRef = ref(null)
 const subhealthPieRef = ref(null)
@@ -298,7 +322,16 @@ const realtimeLineOpt = computed(() => ({
   tooltip: { trigger: 'axis', backgroundColor: tooltipBg, borderColor: tooltipBorder, textStyle: { color: tooltipText } }
 }))
 
-// 7. 实时质控开机年轮分布
+// 7. 实时质控开机年限分布
+const yearLimitOpt = computed(() => ({
+  grid: { top: 15, bottom: 25, left: 40, right: 15 },
+  xAxis: { type: 'category', data: Array.from({ length: 14 }, (_, i) => i + 1), axisLabel: { color: axisLabelColor, fontSize: 11 }, axisLine: { lineStyle: { color: axisLineColor } } },
+  yAxis: { type: 'value', axisLabel: { color: axisLabelColor, fontSize: 11 }, splitLine: { lineStyle: { color: splitLineColor } } },
+  series: [{ type: 'bar', data: [5, 32, 65, 11, 14, 11, 9, 16, 27, 45, 31, 23, 27, 8], barWidth: '55%', itemStyle: { color: '#3b82f6', borderRadius: [3, 3, 0, 0] }, label: { show: true, position: 'top', color: '#1e293b', fontSize: 11 } }],
+  tooltip: { trigger: 'axis', backgroundColor: tooltipBg, borderColor: tooltipBorder, textStyle: { color: tooltipText } }
+}))
+
+// 8. 实时质控开机年龄分布
 const yearRingOpt = computed(() => ({
   grid: { top: 15, bottom: 25, left: 40, right: 15 },
   xAxis: { type: 'category', data: Array.from({ length: 42 }, (_, i) => i + 1), axisLabel: { color: axisLabelColor, fontSize: 10, interval: 4 }, axisLine: { lineStyle: { color: axisLineColor } } },
@@ -307,7 +340,7 @@ const yearRingOpt = computed(() => ({
   tooltip: { trigger: 'axis', backgroundColor: tooltipBg, borderColor: tooltipBorder, textStyle: { color: tooltipText } }
 }))
 
-// 8. 实时质控围难易度
+// 9. 实时质控围难易度
 const difficultyOpt = computed(() => ({
   grid: { top: 15, bottom: 20, left: 40, right: 15 },
   xAxis: { type: 'category', data: ['0', '1', '2', '3', '4', '5'], axisLabel: { color: axisLabelColor, fontSize: 11 }, axisLine: { lineStyle: { color: axisLineColor } } },
@@ -334,7 +367,17 @@ const servicePatrolOpt = computed(() => ({
   tooltip: { trigger: 'axis', backgroundColor: tooltipBg, borderColor: tooltipBorder, textStyle: { color: tooltipText } }
 }))
 
-// 11. 投诉涉及班组情况-条形图
+// 11. 服务巡查-折线图
+const servicePatrolLineOpt = computed(() => ({
+  legend: { data: ['计数'], textStyle: { color: axisLabelColor, fontSize: 12 }, top: 0, left: 0, icon: 'circle' },
+  grid: { top: 30, bottom: 35, left: 40, right: 15 },
+  xAxis: { type: 'category', data: ['05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '空值'], axisLabel: { color: axisLabelColor, fontSize: 11, rotate: 30 }, axisLine: { lineStyle: { color: axisLineColor } } },
+  yAxis: { type: 'value', min: 0, max: 7, axisLabel: { color: axisLabelColor, fontSize: 11 }, splitLine: { lineStyle: { color: splitLineColor } } },
+  series: [{ name: '计数', type: 'line', data: [2, 5, 5, 5, 3, 4, 3, 2, 6, 5, 5, 3, 7, 3, 2, 3, 3, 1], lineStyle: { color: '#3b82f6', width: 2 }, itemStyle: { color: '#3b82f6' }, symbol: 'circle', symbolSize: 6, label: { show: true, position: 'top', color: '#1e293b', fontSize: 11 } }],
+  tooltip: { trigger: 'axis', backgroundColor: tooltipBg, borderColor: tooltipBorder, textStyle: { color: tooltipText } }
+}))
+
+// 12. 投诉涉及班组情况-条形图
 const complaintTeamOpt = computed(() => ({
   grid: { top: 15, bottom: 20, left: 100, right: 30 },
   xAxis: { type: 'value', axisLabel: { color: axisLabelColor, fontSize: 11 }, splitLine: { lineStyle: { color: splitLineColor } } },
@@ -343,7 +386,7 @@ const complaintTeamOpt = computed(() => ({
   tooltip: { trigger: 'axis', backgroundColor: tooltipBg, borderColor: tooltipBorder, textStyle: { color: tooltipText } }
 }))
 
-// 12. 不安全事件发生对比-柱状图
+// 13. 不安全事件发生对比-柱状图
 const unsafeCompareOpt = computed(() => ({
   grid: { top: 15, bottom: 25, left: 40, right: 15 },
   xAxis: { type: 'category', data: ['安平班组', '安行班组', '木兰班组', '芮茜班组', '拓新班组', '屹动班组'], axisLabel: { color: axisLabelColor, fontSize: 11, rotate: 15 }, axisLine: { lineStyle: { color: axisLineColor } } },
@@ -352,7 +395,7 @@ const unsafeCompareOpt = computed(() => ({
   tooltip: { trigger: 'axis', backgroundColor: tooltipBg, borderColor: tooltipBorder, textStyle: { color: tooltipText } }
 }))
 
-// 13. 亚健康人数占比-环形图
+// 14. 亚健康人数占比-环形图
 const subhealthPieOpt = computed(() => ({
   tooltip: { trigger: 'item', backgroundColor: tooltipBg, borderColor: tooltipBorder, textStyle: { color: tooltipText } },
   series: [{
@@ -371,7 +414,7 @@ const subhealthPieOpt = computed(() => ({
   }]
 }))
 
-// 14. 各班组健康与亚健康比例-双柱图
+// 15. 各班组健康与亚健康比例-双柱图
 const healthRatioOpt = computed(() => ({
   grid: { top: 20, bottom: 25, left: 45, right: 15 },
   legend: { data: ['健康人员', '亚健康人员'], textStyle: { color: '#475569', fontSize: 11 }, top: 0 },
@@ -384,7 +427,7 @@ const healthRatioOpt = computed(() => ({
   tooltip: { trigger: 'axis', backgroundColor: tooltipBg, borderColor: tooltipBorder, textStyle: { color: tooltipText } }
 }))
 
-// 15. 年龄分布-柱状图
+// 16. 年龄分布-柱状图
 const ageDistOpt = computed(() => {
   const ages = Array.from({ length: 23 }, (_, i) => i + 23)
   const data = [8, 12, 18, 24, 30, 36, 41, 36, 33, 28, 22, 18, 14, 10, 8, 6, 4, 3, 2, 2, 1, 1, 1]
@@ -405,9 +448,11 @@ useECharts(areaPieRef, areaPieOpt)
 useECharts(teamRealtimeRef, teamRealtimeOpt)
 useECharts(realtimeLineRef, realtimeLineOpt)
 useECharts(yearRingRef, yearRingOpt)
+useECharts(yearLimitRef, yearLimitOpt)
 useECharts(difficultyRef, difficultyOpt)
 useECharts(interceptItemsRef, interceptItemsOpt)
 useECharts(servicePatrolRef, servicePatrolOpt)
+useECharts(servicePatrolLineRef, servicePatrolLineOpt)
 useECharts(complaintTeamRef, complaintTeamOpt)
 useECharts(unsafeCompareRef, unsafeCompareOpt)
 useECharts(subhealthPieRef, subhealthPieOpt)
@@ -649,6 +694,7 @@ onMounted(() => {
       display: flex;
       justify-content: center;
       gap: 20px;
+      margin-top: 15px;
       margin-bottom: 12px;
 
       .rank-avatar-item {
@@ -657,16 +703,70 @@ onMounted(() => {
         align-items: center;
         gap: 6px;
 
-        .rank-avatar {
-          width: 44px;
-          height: 44px;
-          border-radius: 50%;
-          display: flex;
+        &:nth-child(2) {
+          transform: translateY(-10px);
+        }
+
+        .rank-avatar-wrapper {
+          position: relative;
+          display: inline-flex;
           align-items: center;
           justify-content: center;
-          color: #fff;
-          font-size: 16px;
-          font-weight: bold;
+          border-radius: 50%;
+
+
+          &.rank-pos-1 {
+            border: 3px solid #94a3b8;
+
+            .rank-badge {
+              background: #94a3b8;
+            }
+
+          }
+
+          &.rank-pos-2 {
+            border: 3px solid #fbbf24;
+
+            .rank-badge {
+              background: #fbbf24;
+            }
+          }
+
+          &.rank-pos-3 {
+            border: 3px solid #fb923c;
+
+            .rank-badge {
+              background: #fb923c;
+            }
+          }
+
+          .rank-avatar {
+            width: 44px;
+            height: 44px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #fff;
+            font-size: 16px;
+            font-weight: bold;
+          }
+
+          .rank-badge {
+            position: absolute;
+            bottom: -8px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 11px;
+            font-weight: bold;
+            color: #fff;
+          }
         }
 
         .rank-name {