feature

src/pages/organProfile/index.vue

@@ -2,14 +2,19 @@
     <view class="organ-profile-page">
         <scroll-view scroll-y class="page-scroll">
             <!-- ====== 顶部统计卡片 ====== -->
-            <view class="summary-grid">
-                <view class="summary-card" v-for="(item, idx) in summaryCards" :key="idx"
-                    :style="{ background: item.bg }">
-                    <text class="summary-label">{{ item.label }}</text>
-                    <text class="summary-value">{{ item.value }}</text>
-                    <text class="summary-change" :class="item.change > 0 ? 'up' : 'down'">
-                        {{ item.change > 0 ? '↑' : '↓' }}{{ Math.abs(item.change) }}%
-                    </text>
+            <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-value" :style="{ color: m.color }">{{ m.value }}</text>
+                    <view class="metric-change-row" v-if="!m.side">
+                        <view class="metric-change-info">
+                            <text class="metric-change-label">环比</text>
+                            <text class="metric-change" :class="'change-' + m.changeType" :style="{ color: m.changeColor }">
+                                {{ m.change }}
+                            </text>
+                        </view>
+                        <div class="metric-chart" :ref="el => m._sparkRef = el"></div>
+                    </view>
                 </view>
             </view>
 
@@ -25,16 +30,22 @@
                 <view class="chart-box"><div ref="chartIssueType" class="chart-inner"></div></view>
             </view>
 
-            <!-- ====== 区域问题占比(监察) ====== -->
+            <!-- ====== 班组问题统计（监察） ====== -->
+            <view class="chart-card">
+                <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-title">区域问题占比（监察）</view>
                 <view class="chart-box"><div ref="chartRegionPie" class="chart-inner chart-pie"></div></view>
             </view>
 
-            <!-- ====== 各队问题数(监察) ====== -->
+            <!-- ====== 班组问题统计（实时） ====== -->
             <view class="chart-card">
-                <view class="chart-title">各队问题数（监察）</view>
-                <view class="chart-box"><div ref="chartTeamSupervise" class="chart-inner"></div></view>
+                <view class="chart-title">班组问题统计（实时）</view>
+                <view class="chart-box"><div ref="chartTeamQuality" class="chart-inner"></div></view>
             </view>
 
             <!-- ====== 实时质控拦截情况 ====== -->
@@ -43,12 +54,6 @@
                 <view class="chart-box"><div ref="chartIntercept" class="chart-inner"></div></view>
             </view>
 
-            <!-- ====== 各队问题数(实时质控) ====== -->
-            <view class="chart-card">
-                <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-title">实时质控开机年龄分布</view>
@@ -61,71 +66,39 @@
                 <view class="chart-box"><div ref="chartFence" class="chart-inner"></div></view>
             </view>
 
-            <!-- ====== 实时拦截物品汇总 ====== -->
+            <!-- ====== 实时质控开机年限分布 ====== -->
             <view class="chart-card">
-                <view class="chart-title">实时拦截物品汇总</view>
-                <view class="chart-box"><div ref="chartItems" class="chart-inner"></div></view>
+                <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-title">安检情况（合计）</view>
-                <view class="security-summary">
-                    <view class="security-avatars">
-                        <view class="sec-avatar" v-for="(item, idx) in securityAvatars" :key="idx">
-                            <view class="sec-avatar-circle" :style="{ background: item.color }">
-                                <text>{{ item.name }}</text>
-                            </view>
-                            <text class="sec-avatar-score">{{ item.score }}</text>
-                        </view>
-                    </view>
-                    <view class="security-list">
-                        <view class="sec-item" v-for="(item, idx) in securityList" :key="idx">
-                            <text class="sec-rank">{{ idx + 1 }}</text>
-                            <text class="sec-name">{{ item.name }}</text>
-                            <text class="sec-score">{{ item.score }}</text>
-                        </view>
-                    </view>
-                </view>
+                <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-title">航班楼加分</view>
-                <view class="security-summary">
-                    <view class="security-avatars">
-                        <view class="sec-avatar" v-for="(item, idx) in flightAvatars" :key="idx">
-                            <view class="sec-avatar-circle" :style="{ background: item.color }">
-                                <text>{{ item.name }}</text>
-                            </view>
-                            <text class="sec-avatar-score">{{ item.score }}</text>
-                        </view>
-                    </view>
-                    <view class="security-list">
-                        <view class="sec-item" v-for="(item, idx) in flightList" :key="idx">
-                            <text class="sec-rank">{{ idx + 1 }}</text>
-                            <text class="sec-name">{{ item.name }}</text>
-                            <text class="sec-score">{{ item.score }}</text>
-                        </view>
-                    </view>
-                </view>
+                <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-title">服务巡检</view>
-                <view class="chart-box"><div ref="chartServiceInspect" class="chart-inner"></div></view>
+                <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-title">投诉情况（部门）</view>
+                <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-title">不安全事件对比</view>
+                <view class="chart-title">不安全事件发生对比</view>
                 <view class="chart-box"><div ref="chartUnsafe" class="chart-inner"></div></view>
             </view>
 
@@ -135,35 +108,121 @@
                 <view class="chart-box"><div ref="chartSubHealthPie" class="chart-inner chart-pie"></div></view>
             </view>
 
-            <!-- ====== 健康人数与亚健康人数比例 ====== -->
+            <!-- ====== 各班组健康与亚健康比例 ====== -->
             <view class="chart-card">
-                <view class="chart-title">健康人数与亚健康人数比例</view>
+                <view class="chart-title">各班组健康与亚健康比例</view>
                 <view class="chart-box"><div ref="chartHealthStack" class="chart-inner"></div></view>
             </view>
 
-            <!-- ====== 值机人员年龄分布 ====== -->
+            <!-- ====== 旅检三部人员年龄分布表 ====== -->
             <view class="chart-card">
-                <view class="chart-title">值机人员年龄分布</view>
+                <view class="chart-title">旅检三部人员年龄分布表</view>
                 <view class="chart-box"><div ref="chartCheckinAge" class="chart-inner"></div></view>
             </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 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>
+            </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 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>
+            </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 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>
+            </view>
+
+            <!-- ====== 查获数量排行 ====== -->
             <view class="chart-card">
                 <view class="chart-title">查获数量</view>
-                <view class="security-summary">
-                    <view class="security-avatars">
-                        <view class="sec-avatar" v-for="(item, idx) in seizeAvatars" :key="idx">
-                            <view class="sec-avatar-circle" :style="{ background: item.color }">
-                                <text>{{ item.name }}</text>
+                <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="sec-avatar-score">{{ item.score }}</text>
+                            <text class="rank-name">{{ item.name }}</text>
+                            <text class="rank-num">{{ item.num }}</text>
                         </view>
                     </view>
-                    <view class="security-list">
-                        <view class="sec-item" v-for="(item, idx) in seizeList" :key="idx">
-                            <text class="sec-rank">{{ idx + 1 }}</text>
-                            <text class="sec-name">{{ item.name }}</text>
-                            <text class="sec-score">{{ item.score }}</text>
+                    <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>
@@ -173,68 +232,77 @@
 </template>
 <script>
 import * as echarts from 'echarts'
-
 export default {
     name: 'OrganProfile',
     data() {
         return {
-            summaryCards: [
-                { label: '监察问题数（月）', value: '11', change: -57.69, bg: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
-                { label: '实时巡检数（月）', value: '21', change: 56.25, bg: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' },
-                { label: '服务巡检（月）', value: '4', change: 0, bg: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' },
-                { label: '投诉情况（月）', value: '1', change: -88.89, bg: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' },
-                { label: '不安全事件（本年）', value: '3', change: -57.14, bg: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)' },
-                { label: '部门健康人数', value: '147', change: 0, bg: 'linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%)' }
+            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: '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 }
             ],
-            securityAvatars: [
-                { name: '安检', score: '11', color: '#667eea' },
-                { name: '易舟', score: '9', color: '#f093fb' }
+            superVisionTop3: [
+                { name: '徐皓迪', num: 7, color: '#3b82f6' },
+                { name: '张悦', num: 7, color: '#22c55e' },
+                { name: '匡林', num: 5, color: '#f59e0b' }
             ],
-            securityList: [
-                { name: '薛烨轩', score: '11' },
-                { name: '黄俊涛', score: '11' },
-                { name: '李思思', score: '10' },
-                { name: '张明阳', score: '9' },
-                { name: '王丽华', score: '8' }
+            superVisionList: [
+                { name: '周雨浓', num: 4 }, { name: '蒲越', num: 5 }, { name: '傅建', num: 6 },
+                { name: '李明', num: 4 }, { name: '王芳', num: 3 }, { name: '赵强', num: 4 },
+                { name: '刘洋', num: 3 }, { name: '陈静', num: 5 }, { name: '杨磊', num: 4 }, { name: '吴倩', num: 3 }
             ],
-            flightAvatars: [
-                { name: '温', score: '24.5', color: '#4facfe' },
-                { name: '杨', score: '34.5', color: '#43e97b' },
-                { name: '何', score: '16', color: '#fa709a' }
+            vulnTop3: [
+                { name: '安俊', num: 11, color: '#ec4899' },
+                { name: '黄鑫', num: 11, color: '#a78bfa' },
+                { name: '廖艺森', num: 9, color: '#f97316' }
             ],
-            flightList: [
-                { name: '潘林', score: '15' },
-                { name: '马迪', score: '14.5' },
-                { name: '谢琳', score: '14' },
-                { name: '周杰', score: '13' },
-                { name: '吴芳', score: '12' }
+            vulnList: [
+                { name: '李敏', num: 4 }, { name: '林', num: 8 }, { name: '宇', num: 8 },
+                { name: '张华', num: 6 }, { name: '王丽', num: 5 }, { name: '赵明', num: 7 },
+                { name: '陈红', num: 4 }, { name: '刘伟', num: 6 }, { name: '杨婷', num: 5 }, { name: '吴刚', num: 4 }
             ],
-            seizeAvatars: [
-                { name: '郭', score: '113', color: '#667eea' },
-                { name: '黄', score: '90', color: '#f5576c' }
+            bonusTop3: [
+                { name: '文渊', num: 24.5, color: '#3b82f6' },
+                { name: '杨晨汐', num: 34.5, color: '#22c55e' },
+                { name: '何欧怡', num: 16, color: '#f59e0b' }
+            ],
+            bonusList: [
+                { name: '杨林', num: 4 }, { name: '马灿', num: 5 }, { name: '蒋灿', num: 6 },
+                { name: '谢涛', num: 3.5 }, { name: '韩雪', num: 4.5 }, { name: '唐亮', num: 5.5 },
+                { name: '曹琳', num: 3 }, { name: '邓超', num: 4 }, { name: '彭波', num: 6.5 }, { name: '冯娟', num: 3.5 }
+            ],
+            seizeTop3: [
+                { name: '苗苗', num: 113, color: '#ec4899' },
+                { name: '黄真', num: 90, color: '#a78bfa' },
+                { name: '王磊', num: 78, color: '#f97316' }
             ],
             seizeList: [
-                { name: '郭志远', score: '82' },
-                { name: '黄晓明', score: '76' },
-                { name: '叶伟', score: '75' },
-                { name: '陈静', score: '70' },
-                { name: '刘洋', score: '68' }
+                { name: '李兆厚', num: 4 }, { name: '黄元宏', num: 5 }, { name: '何跃智', num: 6 },
+                { name: '周文', num: 7 }, { name: '吴斌', num: 5 }, { name: '郑丽', num: 8 },
+                { name: '孙强', num: 4 }, { name: '朱敏', num: 6 }, { name: '沈涛', num: 5 }, { name: '贺军', num: 7 }
             ],
             chartInstances: {}
         }
     },
     mounted() {
         this.$nextTick(() => {
+            this.initSparkLines()
             this.initSuperviseTrend()
             this.initIssueType()
-            this.initRegionPie()
             this.initTeamSupervise()
-            this.initIntercept()
+            this.initRegionPie()
             this.initTeamQuality()
+            this.initIntercept()
             this.initAgeDist()
             this.initFence()
+            this.initYearLimit()
             this.initItems()
             this.initServiceInspect()
+            this.initServiceLine()
             this.initComplaint()
             this.initUnsafe()
             this.initSubHealthPie()
@@ -253,28 +321,59 @@ export default {
             inst.setOption(option)
             this.chartInstances[refName] = inst
         },
+        initSparkLines() {
+            this.metricCards.forEach(m => {
+                if (m._sparkRef) {
+                    const chart = echarts.init(m._sparkRef)
+                    chart.setOption({
+                        grid: { top: 0, bottom: 0, left: 0, right: 0 },
+                        xAxis: { show: false, type: 'category', data: ['','','','','','','','','',''] },
+                        yAxis: { show: false },
+                        series: [{ type: 'line', data: [3,5,2,8,4,7,3,6,4,5], smooth: true,
+                            lineStyle: { color: m.sparkColor, width: 2 },
+                            areaStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
+                                colorStops: [{ offset: 0, color: m.sparkColor + '33' }, { offset: 1, color: m.sparkColor + '00' }] } },
+                            symbol: 'none' }]
+                    })
+                    this.chartInstances['spark_' + m.title] = chart
+                }
+            })
+        },
         initSuperviseTrend() {
             this._init('chartSuperviseTrend', {
                 tooltip: { trigger: 'axis' },
                 grid: { left: '3%', right: '4%', bottom: '10%', top: '8%', containLabel: true },
-                xAxis: { type: 'category', data: ['03:00','04:00','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'],
-                    axisLabel: { rotate: 45, fontSize: 9, interval: 1 } },
-                yAxis: { type: 'value', max: 20 },
-                series: [{ type: 'line', data: [17,11,12,9,14,15,10,15,10,7,9,6,4,2,3,1,2,1],
-                    smooth: true, lineStyle: { color: '#667eea', width: 2 }, itemStyle: { color: '#667eea' },
-                    areaStyle: { color: 'rgba(102,126,234,0.15)' } }]
+                xAxis: { type: 'category', data: ['03:00','05:00','07:00','09:00','11:00','13:00','15:00','17:00','19:00','20:00'],
+                    axisLabel: { rotate: 45, fontSize: 9, interval: 0 } },
+                yAxis: { type: 'value' },
+                series: [{ type: 'line', data: [3,17,11,12,9,14,15,10,7,4],
+                    smooth: true, lineStyle: { color: '#3b82f6', width: 2 }, itemStyle: { color: '#3b82f6' },
+                    areaStyle: { color: 'rgba(59,130,246,0.15)' } }]
             })
         },
         initIssueType() {
             this._init('chartIssueType', {
                 tooltip: { trigger: 'axis' },
-                grid: { left: '3%', right: '4%', bottom: '10%', top: '8%', containLabel: true },
-                xAxis: { type: 'category', data: ['岗位不端', '岗位操作'], axisLabel: { fontSize: 10 } },
-                yAxis: { type: 'value', max: 120 },
+                grid: { left: '3%', right: '8%', bottom: '10%', top: '8%', containLabel: true },
+                xAxis: { type: 'value' },
+                yAxis: { type: 'category', data: ['设备设施流程类', '岗位规范类', '岗位操作类'] },
                 series: [{ type: 'bar', data: [
-                    { value: 75, itemStyle: { color: '#667eea' } },
-                    { value: 101, itemStyle: { color: '#f5576c' } }
-                ], barWidth: '30%', label: { show: true, position: 'top', fontSize: 10 } }]
+                    { value: 2, itemStyle: { color: '#3b82f6' } },
+                    { value: 75, itemStyle: { color: '#3b82f6' } },
+                    { value: 101, itemStyle: { color: '#3b82f6' } }
+                ], barWidth: '40%', label: { show: true, position: 'right', fontSize: 10 } }]
+            })
+        },
+        initTeamSupervise() {
+            this._init('chartTeamSupervise', {
+                tooltip: { trigger: 'axis' },
+                grid: { left: '3%', right: '4%', bottom: '10%', top: '8%', containLabel: true },
+                xAxis: { type: 'category', data: ['安平班组','安行班组','木兰班组','芮茜班组','拓新班组','屹动班组'],
+                    axisLabel: { rotate: 30, fontSize: 9 } },
+                yAxis: { type: 'value' },
+                series: [{ type: 'bar', data: [34,21,2,41,39,34],
+                    barWidth: '35%', itemStyle: { color: '#3b82f6' },
+                    label: { show: true, position: 'top', fontSize: 9 } }]
             })
         },
         initRegionPie() {
@@ -283,25 +382,24 @@ export default {
                 legend: { bottom: 0, left: 'center', textStyle: { fontSize: 9 } },
                 series: [{
                     type: 'pie', radius: ['30%', '55%'], center: ['50%', '40%'],
-                    label: { fontSize: 9, formatter: '{d}%' },
+                    label: { fontSize: 9, formatter: '{b}\n{c} ({d}%)' },
                     data: [
-                        { value: 39, name: 'T3国内', itemStyle: { color: '#667eea' } },
-                        { value: 5, name: 'T3国际', itemStyle: { color: '#f5576c' } },
-                        { value: 1, name: 'T3出港', itemStyle: { color: '#43e97b' } },
-                        { value: 1, name: 'T3中心实时', itemStyle: { color: '#a18cd1' } }
+                        { value: 128, name: 'T3国内出发', itemStyle: { color: '#a78bfa' } },
+                        { value: 39, name: 'T3国际国内', itemStyle: { color: '#22c55e' } },
+                        { value: 5, name: 'T3中心实时指控', itemStyle: { color: '#f59e0b' } }
                     ]
                 }]
             })
         },
-        initTeamSupervise() {
-            this._init('chartTeamSupervise', {
+        initTeamQuality() {
+            this._init('chartTeamQuality', {
                 tooltip: { trigger: 'axis' },
                 grid: { left: '3%', right: '4%', bottom: '10%', top: '8%', containLabel: true },
-                xAxis: { type: 'category', data: ['安平组','安兴组','木兰组','翁西组','展新组','点云组'],
+                xAxis: { type: 'category', data: ['安平班组','安行班组','木兰班组','芮茜班组','拓新班组','屹动班组'],
                     axisLabel: { rotate: 30, fontSize: 9 } },
-                yAxis: { type: 'value', max: 50 },
-                series: [{ type: 'bar', data: [34,21,2,41,39,34],
-                    barWidth: '35%', itemStyle: { color: '#4facfe' },
+                yAxis: { type: 'value' },
+                series: [{ type: 'bar', data: [60,44,21,65,56,75],
+                    barWidth: '35%', itemStyle: { color: '#3b82f6' },
                     label: { show: true, position: 'top', fontSize: 9 } }]
             })
         },
@@ -309,98 +407,112 @@ export default {
             this._init('chartIntercept', {
                 tooltip: { trigger: 'axis' },
                 grid: { left: '3%', right: '4%', bottom: '10%', top: '8%', containLabel: true },
-                xAxis: { type: 'category', data: ['04:00','06:00','08:00','10:00','12:00','14:00','16:00','18:00','20:00','22:00','23:00'],
+                xAxis: { type: 'category', data: ['04:00','06:00','08:00','10:00','12:00','14:00','16:00','18:00','20:00','22:00'],
                     axisLabel: { rotate: 45, fontSize: 9, interval: 1 } },
-                yAxis: { type: 'value', max: 80 },
-                series: [{ type: 'line', data: [5,31,60,44,26,21,65,56,75,30,15],
-                    smooth: true, lineStyle: { color: '#f5576c', width: 2 }, itemStyle: { color: '#f5576c' },
-                    areaStyle: { color: 'rgba(245,87,108,0.15)' } }]
-            })
-        },
-        initTeamQuality() {
-            this._init('chartTeamQuality', {
-                tooltip: { trigger: 'axis' },
-                grid: { left: '3%', right: '4%', bottom: '10%', top: '8%', containLabel: true },
-                xAxis: { type: 'category', data: ['安平组','安兴组','木兰组','翁西组','展新组','点云组'],
-                    axisLabel: { rotate: 30, fontSize: 9 } },
-                yAxis: { type: 'value', max: 90 },
-                series: [{ type: 'bar', data: [60,44,21,65,56,75],
-                    barWidth: '35%', itemStyle: { color: '#fa709a' },
-                    label: { show: true, position: 'top', fontSize: 9 } }]
+                yAxis: { type: 'value' },
+                series: [{ type: 'line', data: [8,28,31,21,26,21,11,4,1,2],
+                    smooth: true, lineStyle: { color: '#3b82f6', width: 2 }, itemStyle: { color: '#3b82f6' },
+                    areaStyle: { color: 'rgba(59,130,246,0.15)' } }]
             })
         },
         initAgeDist() {
             this._init('chartAgeDist', {
                 tooltip: { trigger: 'axis' },
                 grid: { left: '3%', right: '4%', bottom: '10%', top: '8%', containLabel: true },
-                xAxis: { type: 'category', data: ['1岁','2岁','3岁','4岁','5岁','6岁','7岁','8岁','9岁','10岁','11岁','12岁','13岁','14岁'],
-                    axisLabel: { fontSize: 8, interval: 1 } },
-                yAxis: { type: 'value', max: 70 },
-                series: [{ type: 'bar', data: [5,65,11,14,11,9,16,27,45,31,23,27,8,2],
-                    barWidth: '40%', itemStyle: { color: '#667eea' },
-                    label: { show: true, position: 'top', fontSize: 8 } }]
+                xAxis: { type: 'category',
+                    data: Array.from({ length: 42 }, (_, i) => String(i + 1)),
+                    axisLabel: { fontSize: 8, interval: 4 } },
+                yAxis: { type: 'value' },
+                series: [{ type: 'bar',
+                    data: Array.from({ length: 42 }, () => Math.floor(Math.random() * 40 + 10)),
+                    barWidth: '60%', itemStyle: { color: '#3b82f6' } }]
             })
         },
         initFence() {
             this._init('chartFence', {
                 tooltip: { trigger: 'axis' },
                 grid: { left: '3%', right: '4%', bottom: '10%', top: '8%', containLabel: true },
-                xAxis: { type: 'category', data: ['0级','1级','2级','3级','4级','5级'], axisLabel: { fontSize: 10 } },
-                yAxis: { type: 'value', max: 160 },
+                xAxis: { type: 'category', data: ['0','1','2','3','4','5'], axisLabel: { fontSize: 10 } },
+                yAxis: { type: 'value' },
                 series: [{ type: 'bar', data: [2,145,70,92,16,1],
-                    barWidth: '35%', itemStyle: { color: '#43e97b' },
+                    barWidth: '35%', itemStyle: { color: '#3b82f6', borderRadius: [5, 5, 0, 0] },
                     label: { show: true, position: 'top', fontSize: 9 } }]
             })
         },
+        initYearLimit() {
+            this._init('chartYearLimit', {
+                tooltip: { trigger: 'axis' },
+                grid: { left: '3%', right: '4%', bottom: '10%', top: '8%', containLabel: true },
+                xAxis: { type: 'category',
+                    data: Array.from({ length: 14 }, (_, i) => String(i + 1)),
+                    axisLabel: { fontSize: 9 } },
+                yAxis: { type: 'value' },
+                series: [{ type: 'bar', data: [5,32,65,11,14,11,9,16,27,45,31,23,27,8],
+                    barWidth: '40%', itemStyle: { color: '#3b82f6', borderRadius: [3, 3, 0, 0] },
+                    label: { show: true, position: 'top', fontSize: 8 } }]
+            })
+        },
         initItems() {
             this._init('chartItems', {
                 tooltip: { trigger: 'axis' },
-                grid: { left: '3%', right: '4%', bottom: '10%', top: '8%', containLabel: true },
-                xAxis: { type: 'category', data: ['0','1','2','3','4','5+'], axisLabel: { fontSize: 10 } },
-                yAxis: { type: 'value', max: 150 },
-                series: [{ type: 'bar', data: [14,23,56,19,24,136],
-                    barWidth: '35%', itemStyle: { color: '#4facfe' },
-                    label: { show: true, position: 'top', fontSize: 9 } }]
+                grid: { left: '3%', right: '4%', bottom: '12%', top: '8%', containLabel: true },
+                xAxis: { type: 'category', data: ['打火机','香烟','刀具','充电宝','液体','剪刀','钥匙扣','其他'],
+                    axisLabel: { rotate: 30, fontSize: 9 } },
+                yAxis: { type: 'value' },
+                series: [{ type: 'bar', data: [136,98,45,67,23,34,12,56],
+                    barWidth: '40%', itemStyle: { color: '#3b82f6', borderRadius: [5, 5, 0, 0] },
+                    label: { show: true, position: 'top', fontSize: 8 } }]
             })
         },
         initServiceInspect() {
             this._init('chartServiceInspect', {
                 tooltip: { trigger: 'axis' },
                 grid: { left: '3%', right: '4%', bottom: '10%', top: '8%', containLabel: true },
-                xAxis: { type: 'category', data: ['安平组','安兴组','木兰组','翁西组','展新组','点云组'],
+                xAxis: { type: 'category', data: ['安平班组','安行班组','木兰班组','芮茜班组','拓新班组','屹动班组'],
                     axisLabel: { rotate: 30, fontSize: 9 } },
-                yAxis: { type: 'value', max: 20 },
-                series: [{ type: 'bar', data: [16,7,1,15,14,11],
-                    barWidth: '35%', itemStyle: { color: '#43e97b' },
+                yAxis: { type: 'value' },
+                series: [{ type: 'bar', data: [3,16,7,15,14,11],
+                    barWidth: '35%', itemStyle: { color: '#3b82f6', borderRadius: [5, 5, 0, 0] },
+                    label: { show: true, position: 'top', fontSize: 9 } }]
+            })
+        },
+        initServiceLine() {
+            this._init('chartServiceLine', {
+                tooltip: { trigger: 'axis' },
+                legend: { data: ['计数'], textStyle: { fontSize: 10 }, top: 0 },
+                grid: { left: '3%', right: '4%', bottom: '12%', top: '12%', containLabel: true },
+                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: { rotate: 45, fontSize: 8 } },
+                yAxis: { type: 'value', min: 0, max: 7 },
+                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', fontSize: 9 } }]
             })
         },
         initComplaint() {
             this._init('chartComplaint', {
                 tooltip: { trigger: 'axis' },
-                grid: { left: '3%', right: '4%', bottom: '8%', top: '5%', containLabel: true },
-                xAxis: { type: 'value', max: 60 },
-                yAxis: { type: 'category', data: ['点云组','信武队','翁西组','木兰组','航空组','安平组'],
+                grid: { left: '3%', right: '8%', bottom: '8%', top: '5%', containLabel: true },
+                xAxis: { type: 'value' },
+                yAxis: { type: 'category',
+                    data: ['屹动班组','新训队','拓新班组','芮茜班组','木兰班组','空乘','安行班组','安平班组'],
                     axisLabel: { fontSize: 9 } },
-                series: [{ type: 'bar', data: [
-                    { value: 50, itemStyle: { color: '#f5576c' } },
-                    { value: 30, itemStyle: { color: '#fa709a' } },
-                    { value: 45, itemStyle: { color: '#667eea' } },
-                    { value: 19, itemStyle: { color: '#43e97b' } },
-                    { value: 19, itemStyle: { color: '#4facfe' } },
-                    { value: 37, itemStyle: { color: '#a18cd1' } }
-                ], barWidth: '50%', label: { show: true, position: 'right', fontSize: 9 } }]
+                series: [{ type: 'bar', data: [50,1,30,45,19,19,22,37],
+                    barWidth: '50%', itemStyle: { color: '#ef4444', borderRadius: [0, 5, 5, 0] },
+                    label: { show: true, position: 'right', fontSize: 9 } }]
             })
         },
         initUnsafe() {
             this._init('chartUnsafe', {
                 tooltip: { trigger: 'axis' },
                 grid: { left: '3%', right: '4%', bottom: '10%', top: '8%', containLabel: true },
-                xAxis: { type: 'category', data: ['安平组','安兴组','木兰组','翁西组','展新组','点云组'],
+                xAxis: { type: 'category', data: ['安平班组','安行班组','木兰班组','芮茜班组','拓新班组','屹动班组'],
                     axisLabel: { rotate: 30, fontSize: 9 } },
-                yAxis: { type: 'value', max: 10 },
+                yAxis: { type: 'value' },
                 series: [{ type: 'bar', data: [3,4,4,8,3,2],
-                    barWidth: '35%', itemStyle: { color: '#fa709a' },
+                    barWidth: '35%', itemStyle: { color: '#3b82f6', borderRadius: [5, 5, 0, 0] },
                     label: { show: true, position: 'top', fontSize: 9 } }]
             })
         },
@@ -410,14 +522,14 @@ export default {
                 legend: { bottom: 0, left: 'center', textStyle: { fontSize: 9 } },
                 series: [{
                     type: 'pie', radius: ['30%', '55%'], center: ['50%', '40%'],
-                    label: { fontSize: 9, formatter: '{d}%' },
+                    label: { fontSize: 9, formatter: '{b}: {c} ({d}%)' },
                     data: [
-                        { value: 28, name: '点云组', itemStyle: { color: '#667eea' } },
-                        { value: 23, name: '安平组', itemStyle: { color: '#f5576c' } },
-                        { value: 25, name: '翁西组', itemStyle: { color: '#43e97b' } },
-                        { value: 20, name: '安兴组', itemStyle: { color: '#4facfe' } },
-                        { value: 18, name: '展新组', itemStyle: { color: '#fa709a' } },
-                        { value: 15, name: '木兰组', itemStyle: { color: '#a18cd1' } }
+                        { value: 25, name: '屹动班组', itemStyle: { color: '#06b6d4' } },
+                        { value: 23, name: '安平班组', itemStyle: { color: '#22c55e' } },
+                        { value: 28, name: '拓新班组', itemStyle: { color: '#f59e0b' } },
+                        { value: 27, name: '芮茜班组', itemStyle: { color: '#ec4899' } },
+                        { value: 13, name: '木兰班组', itemStyle: { color: '#a78bfa' } },
+                        { value: 31, name: '其他', itemStyle: { color: '#f97316' } }
                     ]
                 }]
             })
@@ -427,14 +539,14 @@ export default {
                 tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
                 legend: { bottom: 0, left: 'center', textStyle: { fontSize: 9 } },
                 grid: { left: '3%', right: '4%', bottom: '18%', top: '5%', containLabel: true },
-                xAxis: { type: 'category', data: ['安平组','安兴组','木兰组','翁西组','展新组','点云组'],
+                xAxis: { type: 'category', data: ['安平班组','安行班组','木兰班组','芮茜班组','拓新班组','屹动班组'],
                     axisLabel: { rotate: 30, fontSize: 8 } },
-                yAxis: { type: 'value', max: 60 },
+                yAxis: { type: 'value' },
                 series: [
-                    { name: '健康人数', type: 'bar', stack: 'total', barWidth: '35%',
-                        itemStyle: { color: '#4facfe' }, data: [35,20,29,26,22,27] },
-                    { name: '亚健康人数', type: 'bar', stack: 'total', barWidth: '35%',
-                        itemStyle: { color: '#f5576c' }, data: [23,29,13,27,28,25] }
+                    { name: '健康人员', type: 'bar', stack: 'total', barWidth: '35%',
+                        itemStyle: { color: '#3b82f6' }, data: [35,20,29,26,22,27] },
+                    { name: '亚健康人员', type: 'bar', stack: 'total', barWidth: '35%',
+                        itemStyle: { color: '#ef4444' }, data: [23,29,13,27,28,25] }
                 ]
             })
         },
@@ -442,87 +554,137 @@ export default {
             this._init('chartCheckinAge', {
                 tooltip: { trigger: 'axis' },
                 grid: { left: '3%', right: '4%', bottom: '10%', top: '8%', containLabel: true },
-                xAxis: { type: 'category', data: ['23','24','25','26','27','28','29','30','31','32','33','34','35','36','37','38','39','40','41','42','43','44','45'],
+                xAxis: { type: 'category',
+                    data: Array.from({ length: 23 }, (_, i) => String(i + 23)),
                     axisLabel: { fontSize: 8, interval: 2 } },
-                yAxis: { type: 'value', max: 45 },
-                series: [{ type: 'bar', data: [5,8,12,15,18,22,29,36,41,33,19,14,10,8,6,5,4,3,3,2,2,1,1],
-                    barWidth: '40%', itemStyle: { color: '#667eea' },
+                yAxis: { type: 'value' },
+                series: [{ type: 'bar',
+                    data: [8,12,18,24,30,36,41,36,33,28,22,18,14,10,8,6,4,3,2,2,1,1,1],
+                    barWidth: '40%', itemStyle: { color: '#3b82f6', borderRadius: [3, 3, 0, 0] },
                     label: { show: true, position: 'top', fontSize: 8 } }]
             })
         }
     }
 }
 </script>
-
 <style lang="scss" scoped>
-.organ-profile-page {
-    min-height: 100vh;
-    background: #f5f7fa;
-}
-.page-scroll {
-    height: 100vh;
-    padding: 16rpx 20rpx 40rpx;
-}
-.summary-grid {
+.organ-profile-page { min-height: 100vh; background: #f5f7fa; }
+.page-scroll { height: 100vh; padding: 16rpx 20rpx 40rpx; }
+// ─ 顶部指标卡片 ─
+.metric-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 12rpx;
-    margin-bottom: 16rpx;
+    margin-bottom: 20rpx;
+}
+.metric-card {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    border-radius: 20rpx;
+    padding: 20rpx 24rpx;
+    min-height: 180rpx;
+}
+.metric-title {
+    font-size: 24rpx;
+    color: #475569;
+    font-weight: 500;
+    margin-bottom: 8rpx;
+}
+.metric-value {
+    font-size: 60rpx;
+    font-weight: bold;
+    line-height: 1.2;
 }
-.summary-card {
-    border-radius: 16rpx;
-    padding: 20rpx 16rpx;
-    color: #fff;
+.side-value {
+    font-size: 44rpx;
+    color: #fff !important;
+}
+.metric-change-row {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    margin-top: auto;
+}
+.metric-change-info {
     display: flex;
     flex-direction: column;
+    gap: 4rpx;
+}
+.metric-change-label {
+    font-size: 22rpx;
+    color: #64748b;
+}
+.metric-change {
+    font-size: 24rpx;
+    display: inline-flex;
+    align-items: center;
     gap: 6rpx;
+    font-weight: 500;
 }
-.summary-label { font-size: 22rpx; opacity: 0.9; }
-.summary-value { font-size: 44rpx; font-weight: bold; }
-.summary-change { font-size: 20rpx; }
-.summary-change.up { color: #43e97b; }
-.summary-change.down { color: #ffd666; }
-.chart-card {
-    background: #fff;
-    border-radius: 16rpx;
-    padding: 24rpx 20rpx;
-    margin-bottom: 16rpx;
-    box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
+.metric-change::before {
+    content: '';
+    display: inline-block;
+    width: 0;
+    height: 0;
+    vertical-align: middle;
 }
-.chart-title {
-    font-size: 28rpx;
-    font-weight: 600;
-    color: #333;
-    margin-bottom: 16rpx;
+.metric-change.change-down::before {
+    border-left: 8rpx solid transparent;
+    border-right: 8rpx solid transparent;
+    border-top: 12rpx solid currentColor;
 }
+.metric-change.change-up::before {
+    border-left: 8rpx solid transparent;
+    border-right: 8rpx solid transparent;
+    border-bottom: 12rpx solid currentColor;
+}
+.metric-change.change-flat::before {
+    width: 16rpx;
+    height: 0;
+    border-top: 4rpx solid currentColor;
+    border-radius: 2rpx;
+}
+.metric-chart {
+    height: 50rpx;
+    width: 130rpx;
+}
+.chart-card {
+    background: #fff; border-radius: 16rpx; padding: 24rpx 20rpx;
+    margin-bottom: 16rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
+}
+.chart-title { font-size: 28rpx; font-weight: 600; color: #333; margin-bottom: 16rpx; }
 .chart-box { width: 100%; }
 .chart-inner { width: 100%; height: 380rpx; }
 .chart-pie { height: 420rpx; }
-.security-summary { padding: 0 8rpx; }
-.security-avatars {
-    display: flex;
-    justify-content: center;
-    gap: 40rpx;
-    margin-bottom: 24rpx;
-}
-.sec-avatar { display: flex; flex-direction: column; align-items: center; gap: 8rpx; }
-.sec-avatar-circle {
+.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;
 }
-.sec-avatar-circle text { color: #fff; font-size: 26rpx; font-weight: bold; }
-.sec-avatar-score { font-size: 32rpx; font-weight: bold; color: #333; }
-.security-list { display: flex; flex-direction: column; gap: 0; }
-.sec-item {
-    display: flex; align-items: center; padding: 16rpx 0;
-    border-bottom: 1rpx solid #f5f5f5;
+.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;
 }
-.sec-item:last-child { border-bottom: none; }
-.sec-rank {
-    width: 40rpx; height: 40rpx; border-radius: 50%;
-    background: #f0f0f0; display: flex; align-items: center; justify-content: center;
-    font-size: 22rpx; color: #666; margin-right: 20rpx;
+.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;
 }
-.sec-name { flex: 1; font-size: 26rpx; color: #333; }
-.sec-score { font-size: 28rpx; font-weight: 600; color: #667eea; }
+.rank-tr text { flex: 1; text-align: center; }
+.rank-th { color: #1e293b; font-weight: bold; border-bottom: 2rpx solid #cbd5e1; }
 </style>