feat(portraitManagement): 新增器官画像模块及白卡组件

- 添加白卡组件whiteCard.vue，支持标题和背景色自定义
- 新增organProfile页面，展示多种监察和质控指标及图表
- 实现顶部指标卡片，支持环比数据显示及小折线图展示
- 集成丰富图表组件，包含折线图、柱状图、饼图等多种类型
- 实现右侧多维度排行榜显示，展示人员排名和相关数据
- 使用echarts完成图表初始化及数据绑定，提升数据可视化效果
- 完善scss样式，保证布局清晰、视觉统一、响应合理

src/views/portraitManagement/components/whiteCard.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="white-card" :style="{ background: bgColor }">
+    <div class="card-title" v-if="title">
+      <span class="title-dot"></span>
+      <span class="title-text">{{ title }}</span>
+    </div>
+    <div class="card-body">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  bgColor: {
+    type: String,
+    default: '#ffffff'
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.white-card {
+  border-radius: 12px;
+  padding: 12px 16px;
+  display: flex;
+  flex-direction: column;
+
+  .card-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+
+    .title-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #3b82f6;
+      flex-shrink: 0;
+    }
+
+    .title-text {
+      font-size: 14px;
+      font-weight: bold;
+      color: #1e293b;
+    }
+  }
+
+  .card-body {
+    flex: 1;
+  }
+}
+</style>

src/views/portraitManagement/organProfile/index.vue

@@ -0,0 +1,707 @@
+<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>
+        </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>
+
+        <!-- 右侧排行榜 -->
+        <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>
+              </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>
+          </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>
+              </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>
+          </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>
+              </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>
+          </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>
+              </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>
+          </WhiteCard>
+        </div>
+      </div>
+    </div>
+ 
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useECharts } from '@/hooks/useEcharts'
+import WhiteCard from '../components/whiteCard.vue'
+import Page from '../components/page.vue'
+import * as echarts from 'echarts'
+
+// ─── 顶部指标卡片 ───────────────────────────────
+const metricCards = ref([
+  { title: '监察问题数（本月）', value: '11', change: '57.69%', changeType: 'down', changeColor: '#ef4444', color: '#f59e0b', bg: '#dbeafe', sparkColor: '#3b82f6' },
+  { title: '实时质控数（本月）', value: '21', change: '56.25%', changeType: 'down', changeColor: '#ef4444', color: '#22c55e', bg: '#dcfce7', sparkColor: '#22c55e' },
+  { title: '服务巡查（本月）', value: '4', change: '0%', changeType: 'flat', changeColor: '#6b7280', color: '#3b82f6', bg: '#dbeafe', sparkColor: '#3b82f6' },
+  { title: '投诉情况（本月）', value: '1', change: '88.89%', changeType: 'down', changeColor: '#ef4444', color: '#ef4444', bg: '#fce4ec', sparkColor: '#ef4444' },
+  { title: '不安全事件发生次数（今年）', value: '3', change: '57.14%', changeType: 'down', changeColor: '#ef4444', color: '#ffffff', bg: '#6b7280', sparkColor: '#9ca3af' },
+])
+
+// ─── 图表 ref ────────────────────────────────────
+const supervisionLineRef = ref(null)
+const problemTypeRef = ref(null)
+const teamSupervisionRef = ref(null)
+const areaPieRef = ref(null)
+const teamRealtimeRef = ref(null)
+const realtimeLineRef = ref(null)
+const yearRingRef = ref(null)
+const difficultyRef = ref(null)
+const interceptItemsRef = ref(null)
+const servicePatrolRef = ref(null)
+const complaintTeamRef = ref(null)
+const unsafeCompareRef = ref(null)
+const subhealthPieRef = ref(null)
+const healthRatioRef = ref(null)
+const ageDistRef = ref(null)
+
+// ─── 图表配置（浅色主题）──────────────────────────
+
+const axisLabelColor = '#475569'
+const axisLineColor = '#cbd5e1'
+const splitLineColor = '#e2e8f0'
+const tooltipBg = 'rgba(255,255,255,0.95)'
+const tooltipBorder = '#cbd5e1'
+const tooltipText = '#1e293b'
+
+// 1. 监察问题统计-折线图
+const supervisionLineOpt = computed(() => ({
+  grid: { top: 20, bottom: 25, left: 40, right: 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: { color: axisLabelColor, fontSize: 11 }, axisLine: { lineStyle: { color: axisLineColor } } },
+  yAxis: { type: 'value', axisLabel: { color: axisLabelColor, fontSize: 11 }, splitLine: { lineStyle: { color: splitLineColor } } },
+  series: [{ type: 'line', data: [3, 17, 11, 12, 9, 14, 15, 10, 7, 4], smooth: true, lineStyle: { color: '#3b82f6', width: 2 }, areaStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'rgba(59,130,246,0.2)' }, { offset: 1, color: 'rgba(59,130,246,0)' }] } }, symbol: 'circle', symbolSize: 6, itemStyle: { color: '#3b82f6' } }],
+  tooltip: { trigger: 'axis', backgroundColor: tooltipBg, borderColor: tooltipBorder, textStyle: { color: tooltipText } }
+}))
+
+// 2. 问题类型分布-条形图
+const problemTypeOpt = computed(() => ({
+  grid: { top: 15, bottom: 20, left: 110, right: 30 },
+  xAxis: { type: 'value', axisLabel: { color: axisLabelColor, fontSize: 11 }, splitLine: { lineStyle: { color: splitLineColor } } },
+  yAxis: { type: 'category', data: ['设备设施流程类', '岗位规范类', '岗位操作类'], axisLabel: { color: '#1e293b', fontSize: 12 }, axisLine: { lineStyle: { color: axisLineColor } } },
+  series: [{ type: 'bar', data: [{ value: 2, itemStyle: { color: '#3b82f6' } }, { value: 75, itemStyle: { color: '#3b82f6' } }, { value: 101, itemStyle: { color: '#3b82f6' } }], barWidth: '50%', label: { show: true, position: 'right', color: '#1e293b', fontSize: 13 } }],
+  tooltip: { trigger: 'axis', backgroundColor: tooltipBg, borderColor: tooltipBorder, textStyle: { color: tooltipText } }
+}))
+
+// 3. 班组问题统计（监察）-柱状图
+const teamSupervisionOpt = 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 } } },
+  yAxis: { type: 'value', axisLabel: { color: axisLabelColor, fontSize: 11 }, splitLine: { lineStyle: { color: splitLineColor } } },
+  series: [{ type: 'bar', data: [{ value: 34, itemStyle: { color: '#3b82f6' } }, { value: 21, itemStyle: { color: '#3b82f6' } }, { value: 2, itemStyle: { color: '#3b82f6' } }, { value: 41, itemStyle: { color: '#3b82f6' } }, { value: 39, itemStyle: { color: '#3b82f6' } }, { value: 34, itemStyle: { color: '#3b82f6' } }], barWidth: '55%', label: { show: true, position: 'top', color: '#1e293b', fontSize: 11 } }],
+  tooltip: { trigger: 'axis', backgroundColor: tooltipBg, borderColor: tooltipBorder, textStyle: { color: tooltipText } }
+}))
+
+// 4. 区域问题占比-饼图
+const areaPieOpt = computed(() => ({
+  grid: { top: 10, bottom: 10, left: 0, right: '45%' },
+  series: [{
+    type: 'pie', radius: ['30%', '60%'], center: ['35%', '50%'],
+    data: [
+      { value: 128, name: 'T3国内出发', itemStyle: { color: '#a78bfa' } },
+      { value: 39, name: 'T3国际国内', itemStyle: { color: '#22c55e' } },
+      { value: 5, name: 'T3中心实时指控', itemStyle: { color: '#f59e0b' } }
+    ],
+    label: { show: true, color: '#475569', fontSize: 11, formatter: '{b}\n{c} ({d}%)' },
+    labelLine: { lineStyle: { color: '#cbd5e1' } },
+    emphasis: { itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0,0,0,0.1)' } }
+  }],
+  tooltip: { trigger: 'item', backgroundColor: tooltipBg, borderColor: tooltipBorder, textStyle: { color: tooltipText } }
+}))
+
+// 5. 班组问题统计（实时）-柱状图
+const teamRealtimeOpt = 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 } } },
+  yAxis: { type: 'value', axisLabel: { color: axisLabelColor, fontSize: 11 }, splitLine: { lineStyle: { color: splitLineColor } } },
+  series: [{ type: 'bar', data: [{ value: 60, itemStyle: { color: '#3b82f6' } }, { value: 44, itemStyle: { color: '#3b82f6' } }, { value: 21, itemStyle: { color: '#3b82f6' } }, { value: 65, itemStyle: { color: '#3b82f6' } }, { value: 56, itemStyle: { color: '#3b82f6' } }, { value: 75, itemStyle: { color: '#3b82f6' } }], barWidth: '55%', label: { show: true, position: 'top', color: '#1e293b', fontSize: 11 } }],
+  tooltip: { trigger: 'axis', backgroundColor: tooltipBg, borderColor: tooltipBorder, textStyle: { color: tooltipText } }
+}))
+
+// 6. 实时质控拦截情况-折线图
+const realtimeLineOpt = computed(() => ({
+  grid: { top: 20, bottom: 25, left: 40, right: 15 },
+  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: { color: axisLabelColor, fontSize: 11 }, axisLine: { lineStyle: { color: axisLineColor } } },
+  yAxis: { type: 'value', axisLabel: { color: axisLabelColor, fontSize: 11 }, splitLine: { lineStyle: { color: splitLineColor } } },
+  series: [{ type: 'line', data: [8, 28, 31, 21, 26, 21, 11, 4, 1, 2], smooth: true, lineStyle: { color: '#3b82f6', width: 2 }, areaStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'rgba(59,130,246,0.15)' }, { offset: 1, color: 'rgba(59,130,246,0)' }] } }, symbol: 'circle', symbolSize: 6, itemStyle: { color: '#3b82f6' } }],
+  tooltip: { trigger: 'axis', backgroundColor: tooltipBg, borderColor: tooltipBorder, textStyle: { color: tooltipText } }
+}))
+
+// 7. 实时质控开机年轮分布
+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 } } },
+  yAxis: { type: 'value', axisLabel: { color: axisLabelColor, fontSize: 11 }, splitLine: { lineStyle: { color: splitLineColor } } },
+  series: [{ type: 'bar', data: Array.from({ length: 42 }, (_, i) => Math.floor(Math.random() * 40 + 10)), barWidth: '60%', itemStyle: { color: '#3b82f6', borderRadius: [3, 3, 0, 0] } }],
+  tooltip: { trigger: 'axis', backgroundColor: tooltipBg, borderColor: tooltipBorder, textStyle: { color: tooltipText } }
+}))
+
+// 8. 实时质控围难易度
+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 } } },
+  yAxis: { type: 'value', axisLabel: { color: axisLabelColor, fontSize: 11 }, splitLine: { lineStyle: { color: splitLineColor } } },
+  series: [{ type: 'bar', data: [2, 145, 70, 92, 16, 1], barWidth: '50%', itemStyle: { color: '#3b82f6', borderRadius: [5, 5, 0, 0] }, label: { show: true, position: 'top', color: '#1e293b', fontSize: 11 } }],
+  tooltip: { trigger: 'axis', backgroundColor: tooltipBg, borderColor: tooltipBorder, textStyle: { color: tooltipText } }
+}))
+
+// 9. 实时拦截物品汇总
+const interceptItemsOpt = computed(() => ({
+  grid: { top: 15, bottom: 40, left: 45, right: 15 },
+  xAxis: { type: 'category', data: ['打火机', '香烟', '刀具', '充电宝', '液体', '剪刀', '钥匙扣', '其他'], axisLabel: { color: axisLabelColor, fontSize: 10, rotate: 30 }, axisLine: { lineStyle: { color: axisLineColor } } },
+  yAxis: { type: 'value', axisLabel: { color: axisLabelColor, fontSize: 11 }, splitLine: { lineStyle: { color: splitLineColor } } },
+  series: [{ type: 'bar', data: [136, 98, 45, 67, 23, 34, 12, 56], barWidth: '55%', itemStyle: { color: '#3b82f6', borderRadius: [5, 5, 0, 0] } }],
+  tooltip: { trigger: 'axis', backgroundColor: tooltipBg, borderColor: tooltipBorder, textStyle: { color: tooltipText } }
+}))
+
+// 10. 服务巡查-柱状图
+const servicePatrolOpt = 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 } } },
+  yAxis: { type: 'value', axisLabel: { color: axisLabelColor, fontSize: 11 }, splitLine: { lineStyle: { color: splitLineColor } } },
+  series: [{ type: 'bar', data: [3, 16, 7, 15, 14, 11], barWidth: '55%', itemStyle: { color: '#3b82f6', borderRadius: [5, 5, 0, 0] }, label: { show: true, position: 'top', color: '#1e293b', fontSize: 11 } }],
+  tooltip: { trigger: 'axis', backgroundColor: tooltipBg, borderColor: tooltipBorder, textStyle: { color: tooltipText } }
+}))
+
+// 11. 投诉涉及班组情况-条形图
+const complaintTeamOpt = computed(() => ({
+  grid: { top: 15, bottom: 20, left: 100, right: 30 },
+  xAxis: { type: 'value', axisLabel: { color: axisLabelColor, fontSize: 11 }, splitLine: { lineStyle: { color: splitLineColor } } },
+  yAxis: { type: 'category', data: ['屹动班组', '新训队', '拓新班组', '芮茜班组', '木兰班组', '空乘', '安行班组', '安平班组'], axisLabel: { color: '#1e293b', fontSize: 11 }, axisLine: { lineStyle: { color: axisLineColor } } },
+  series: [{ type: 'bar', data: [50, 1, 30, 45, 19, 19, 22, 37], barWidth: '55%', itemStyle: { color: '#ef4444', borderRadius: [0, 5, 5, 0] }, label: { show: true, position: 'right', color: '#1e293b', fontSize: 11 } }],
+  tooltip: { trigger: 'axis', backgroundColor: tooltipBg, borderColor: tooltipBorder, textStyle: { color: tooltipText } }
+}))
+
+// 12. 不安全事件发生对比-柱状图
+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 } } },
+  yAxis: { type: 'value', axisLabel: { color: axisLabelColor, fontSize: 11 }, splitLine: { lineStyle: { color: splitLineColor } } },
+  series: [{ type: 'bar', data: [3, 4, 4, 8, 3, 2], barWidth: '55%', itemStyle: { color: '#3b82f6', borderRadius: [5, 5, 0, 0] }, label: { show: true, position: 'top', color: '#1e293b', fontSize: 11 } }],
+  tooltip: { trigger: 'axis', backgroundColor: tooltipBg, borderColor: tooltipBorder, textStyle: { color: tooltipText } }
+}))
+
+// 13. 亚健康人数占比-环形图
+const subhealthPieOpt = computed(() => ({
+  tooltip: { trigger: 'item', backgroundColor: tooltipBg, borderColor: tooltipBorder, textStyle: { color: tooltipText } },
+  series: [{
+    type: 'pie', radius: ['35%', '60%'], center: ['50%', '50%'],
+    data: [
+      { 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' } }
+    ],
+    label: { show: true, color: '#475569', fontSize: 11, formatter: '{b}: {c} ({d}%)' },
+    labelLine: { lineStyle: { color: '#cbd5e1' } },
+    emphasis: { itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0,0,0,0.1)' } }
+  }]
+}))
+
+// 14. 各班组健康与亚健康比例-双柱图
+const healthRatioOpt = computed(() => ({
+  grid: { top: 20, bottom: 25, left: 45, right: 15 },
+  legend: { data: ['健康人员', '亚健康人员'], textStyle: { color: '#475569', fontSize: 11 }, top: 0 },
+  xAxis: { type: 'category', data: ['安平班组', '安行班组', '木兰班组', '芮茜班组', '拓新班组', '屹动班组'], axisLabel: { color: axisLabelColor, fontSize: 11, rotate: 15 }, axisLine: { lineStyle: { color: axisLineColor } } },
+  yAxis: { type: 'value', axisLabel: { color: axisLabelColor, fontSize: 11 }, splitLine: { lineStyle: { color: splitLineColor } } },
+  series: [
+    { name: '健康人员', type: 'bar', data: [35, 20, 29, 26, 22, 27], barWidth: '30%', barGap: '10%', itemStyle: { color: '#3b82f6', borderRadius: [5, 5, 0, 0] } },
+    { name: '亚健康人员', type: 'bar', data: [23, 29, 13, 27, 28, 25], barWidth: '30%', itemStyle: { color: '#ef4444', borderRadius: [5, 5, 0, 0] } }
+  ],
+  tooltip: { trigger: 'axis', backgroundColor: tooltipBg, borderColor: tooltipBorder, textStyle: { color: tooltipText } }
+}))
+
+// 15. 年龄分布-柱状图
+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]
+  return {
+    grid: { top: 15, bottom: 25, left: 40, right: 15 },
+    xAxis: { type: 'category', data: ages, axisLabel: { color: axisLabelColor, fontSize: 10, interval: 2 }, axisLine: { lineStyle: { color: axisLineColor } } },
+    yAxis: { type: 'value', axisLabel: { color: axisLabelColor, fontSize: 11 }, splitLine: { lineStyle: { color: splitLineColor } } },
+    series: [{ type: 'bar', data, barWidth: '60%', itemStyle: { color: '#3b82f6', borderRadius: [3, 3, 0, 0] } }],
+    tooltip: { trigger: 'axis', backgroundColor: tooltipBg, borderColor: tooltipBorder, textStyle: { color: tooltipText } }
+  }
+})
+
+// ─── 挂载图表 ─────────────────────────────────────
+useECharts(supervisionLineRef, supervisionLineOpt)
+useECharts(problemTypeRef, problemTypeOpt)
+useECharts(teamSupervisionRef, teamSupervisionOpt)
+useECharts(areaPieRef, areaPieOpt)
+useECharts(teamRealtimeRef, teamRealtimeOpt)
+useECharts(realtimeLineRef, realtimeLineOpt)
+useECharts(yearRingRef, yearRingOpt)
+useECharts(difficultyRef, difficultyOpt)
+useECharts(interceptItemsRef, interceptItemsOpt)
+useECharts(servicePatrolRef, servicePatrolOpt)
+useECharts(complaintTeamRef, complaintTeamOpt)
+useECharts(unsafeCompareRef, unsafeCompareOpt)
+useECharts(subhealthPieRef, subhealthPieOpt)
+useECharts(healthRatioRef, healthRatioOpt)
+useECharts(ageDistRef, ageDistOpt)
+
+// ─── 排行榜数据 ──────────────────────────────────
+const superVisionTop3 = [
+  { name: '徐皓迪', num: 7, color: '#3b82f6' },
+  { name: '张悦', num: 7, color: '#22c55e' },
+  { name: '匡林', num: 5, color: '#f59e0b' }
+]
+const 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 }
+]
+const vulnTop3 = [
+  { name: '安俊', num: 11, color: '#ec4899' },
+  { name: '黄鑫', num: 11, color: '#a78bfa' },
+  { name: '廖艺森', num: 9, color: '#f97316' }
+]
+const 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 }
+]
+const bonusTop3 = [
+  { name: '文渊', num: 24.5, color: '#3b82f6' },
+  { name: '杨晨汐', num: 34.5, color: '#22c55e' },
+  { name: '何欧怡', num: 16, color: '#f59e0b' }
+]
+const 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 }
+]
+const seizureTop3 = [
+  { name: '苗苗', num: 113, color: '#ec4899' },
+  { name: '黄真', num: 90, color: '#a78bfa' },
+  { name: '王磊', num: 78, color: '#f97316' }
+]
+const seizureList = [
+  { 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 }
+]
+
+// ─── 挂载顶部迷你折线图 ──────────────────────────
+onMounted(() => {
+  metricCards.value.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' }]
+      })
+    }
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+.org-profile {
+  padding: 15px;
+  box-sizing: border-box;
+  min-height: calc(100vh - 90px);
+
+  // ─ 顶部指标卡片 ──
+  .metric-row {
+    display: flex;
+    gap: 12px;
+    margin-bottom: 15px;
+
+    .metric-card {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      flex: 1;
+      border-radius: 12px;
+      padding: 12px 16px;
+      min-height: 100px;
+
+      .metric-title {
+        font-size: 13px;
+        color: #475569;
+        font-weight: 500;
+        margin-bottom: 4px;
+      }
+
+      .metric-value {
+        font-size: 36px;
+        font-weight: bold;
+        line-height: 1.2;
+      }
+
+      .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: 2px;
+
+          .metric-change-label {
+            font-size: 12px;
+            color: #64748b;
+          }
+
+          .metric-change {
+            font-size: 13px;
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+            font-weight: 500;
+
+            &::before {
+              content: '';
+              display: inline-block;
+              width: 0;
+              height: 0;
+              vertical-align: middle;
+            }
+
+            &.change-down::before {
+              border-left: 5px solid transparent;
+              border-right: 5px solid transparent;
+              border-top: 7px solid currentColor;
+            }
+
+            &.change-up::before {
+              border-left: 5px solid transparent;
+              border-right: 5px solid transparent;
+              border-bottom: 7px solid currentColor;
+            }
+
+            &.change-flat::before {
+              width: 10px;
+              height: 0;
+              border-top: 3px solid currentColor;
+              border-radius: 1px;
+            }
+          }
+        }
+
+        .metric-chart {
+          height: 30px;
+          width: 80px;
+        }
+      }
+    }
+
+    .metric-side-cards {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      width: 200px;
+      flex-shrink: 0;
+
+      .metric-card {
+        flex: 1;
+        min-height: 50px;
+        justify-content: center;
+
+        .metric-title {
+          font-size: 12px;
+          color: #fff;
+          margin-bottom: 2px;
+        }
+
+        .metric-value {
+          font-size: 24px;
+        }
+      }
+    }
+
+    .metric-warning-top {
+      background: linear-gradient(135deg, #f59e0b, #d97706) !important;
+    }
+
+    .metric-warning-bottom {
+      background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
+    }
+  }
+
+  // ── 图表区域 ──
+  .charts-row {
+    display: flex;
+    gap: 15px;
+
+    .charts-col-main {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      min-width: 0;
+    }
+
+    .charts-grid {
+      display: grid;
+      gap: 12px;
+
+      &.charts-grid-2 {
+        grid-template-columns: 1fr 1fr;
+      }
+
+      &.charts-grid-1 {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .chart-box {
+      width: 100%;
+      height: 220px;
+    }
+
+    .chart-box-wide {
+      width: 100%;
+      height: 260px;
+    }
+
+    .charts-col-side {
+      width: 320px;
+      flex-shrink: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+  }
+
+  // ── 排行榜 ──
+  .rank-list {
+    .rank-avatar-row {
+      display: flex;
+      justify-content: center;
+      gap: 20px;
+      margin-bottom: 12px;
+
+      .rank-avatar-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 6px;
+
+        .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-name {
+          font-size: 12px;
+          color: #475569;
+        }
+
+        .rank-num {
+          font-size: 18px;
+          color: '#1e293b';
+          font-weight: bold;
+        }
+      }
+    }
+
+    .rank-table {
+      .rank-tr {
+        display: flex;
+        padding: 5px 0;
+        font-size: 12px;
+        color: #64748b;
+        border-bottom: 1px solid #e2e8f0;
+
+        span {
+          flex: 1;
+          text-align: center;
+        }
+      }
+
+      .rank-th {
+        color: '#1e293b';
+        font-weight: bold;
+        border-bottom: 2px solid #cbd5e1;
+      }
+    }
+  }
+}
+</style>

src/views/warningPage/index.vue

@@ -2,7 +2,7 @@
     <div class="dashboard">
         <div class="header">
             <div class="title-section">
-                <h1><i class="fas fa-shield-alt" style="color:#2c5282; margin-right: 8px;"></i>预警中枢</h1>
+                <h1><i class="fas fa-shield-alt" style="color:#2c5282; margin-right: 8px;"></i>综合预警工作台</h1>
                 <p>员工综合评估（＜75分红色预警 | ≥90分优秀）</p>
             </div>
             <div class="badge-group">
@@ -31,14 +31,15 @@
                 <el-tree-select v-model="selectedOrg" :data="cascadeOptions"
                     :props="{ label: 'label', value: 'value', children: 'children' }" node-key="value"
                     placeholder="组织架构/员工" clearable filterable check-strictly style="width: 480px;"
-                    @change="fetchWarningData" />
+                     />
             </div>
             <div class="filter-group">
                 <el-select v-model="selectedAlertLevel" placeholder="预警等级" clearable style="width: 250px;">
                     <el-option label="全部" value=""></el-option>
                     <el-option v-for="item in alert_level" :key="item.value" :label="item.label" :value="item.value" />
                 </el-select>
-
+                <el-button type="primary" @click="handleSearch">搜索</el-button>
+                <el-button @click="handleReset">重置</el-button>
             </div>
         </div>
 
@@ -58,7 +59,7 @@
 
         <div class="employee-section">
             <div class="section-title">
-                <i class="fas fa-users" style="color:#dc2626;"></i> 员工综合评估预警看板
+                <i class="fas fa-users" style="color:#dc2626;"></i> 员工综合预警
                 <span
                     style="font-size:0.7rem; background:#eef2ff; padding:4px 12px; border-radius:30px; margin-left:12px;">
                     评分依据：员工配分表
@@ -75,14 +76,10 @@
                         </el-table-column>
                         <el-table-column prop="deptName" label="所属部门" />
                         <el-table-column prop="eventTime" label="事件时间" sortable width="180" />
-                        <el-table-column prop="overallScore" label="综合评估得分" sortable>
-                            <template #default="{ row }">
-                                <span v-if="row.overallScore < 75" class="score-danger">{{ row.overallScore }} 分</span>
-                                <span v-else-if="row.overallScore >= 90" class="score-excellent">{{ row.overallScore }}
-                                    分</span>
-                                <span v-else style="font-weight:600;">{{ row.overallScore }} 分</span>
-                            </template>
-                        </el-table-column>
+                        <el-table-column prop="dimName" label="维度名称" />
+                        <el-table-column prop="secondIndicator" label="二级指标名称" />
+                        <el-table-column prop="deductionTotal" label="扣分分值合计" sortable />
+                        <el-table-column prop="occurrenceCount" label="发生次数" sortable />
                         <el-table-column prop="overallScore" label="预警等级">
                             <template #default="{ row }">
                                 <span v-if="row.overallScore < 75" class="status-badge"
@@ -94,7 +91,7 @@
                                 <span v-else class="status-warning">正常范围</span>
                             </template>
                         </el-table-column>
-                        <el-table-column prop="coreRisksOrOutstandingAchievements" label="核心风险/优秀事迹" />
+                        <el-table-column prop="coreRisk" label="核心风险" />
                         <el-table-column prop="statusLabel" label="状态标签">
                             <template #default="{ row }">
                                 <span v-if="row.overallScore < 75" style="color:#b91c1c;"><i class="fas fa-bell"></i>
@@ -178,6 +175,11 @@ const coreRisksOrOutstandingAchievementsList = [
     "临近预警线，服务巡查扣分1次"
 ]
 
+const dimNames = ["安全管理", "服务质量", "运行效率", "队伍建设"]
+const indicatorNames = ["安全违规次数", "旅客投诉率", "安检差错率", "培训合格率", "操作规范度"]
+const deductionScores = [2, 5, 3, 1, 4]
+const occurrenceCounts = [1, 2, 3, 1, 2]
+
 const employeesData = ref([])
 const queryParams = reactive({
     pageNum: 1,
@@ -186,11 +188,17 @@ const queryParams = reactive({
 
 for (let i = 0; i < newNames.length; i++) {
     employeesData.value.push({
-        id: String(10021 + i),
-        name: newNames[i],
-        dept: deptList[i % deptList.length],
+        userId: String(10021 + i),
+        nickName: newNames[i],
+        deptName: deptList[i % deptList.length],
+        eventTime: `2026-0${(i % 9) + 1}-${String((i * 3 + 10) % 28 + 1).padStart(2, '0')}`,
         overallScore: scores[i % scores.length],
-        coreRisksOrOutstandingAchievements: coreRisksOrOutstandingAchievementsList[i % coreRisksOrOutstandingAchievementsList.length]
+        dimName: dimNames[i % dimNames.length],
+        secondIndicator: indicatorNames[i % indicatorNames.length],
+        deductionTotal: deductionScores[i % deductionScores.length],
+        occurrenceCount: occurrenceCounts[i % occurrenceCounts.length],
+        coreRisk: coreRisksOrOutstandingAchievementsList[i % coreRisksOrOutstandingAchievementsList.length],
+        statusLabel: scores[i % scores.length] < 75 ? '1' : scores[i % scores.length] >= 90 ? '2' : '3'
     })
 }
 
@@ -314,6 +322,20 @@ const setActiveRange = (range) => {
     }
 }
 
+const handleSearch = () => {
+    fetchWarningData()
+}
+
+const handleReset = () => {
+    startDate.value = null
+    endDate.value = null
+    activeRange.value = 'month'
+    selectedAlertLevel.value = ''
+    selectedOrg.value = ''
+    queryParams.pageNum = 1
+    fetchWarningData()
+}
+
 
 const formatDate = (d) => {
     if (!d) return ''
@@ -410,26 +432,6 @@ onMounted(async () => {
     fetchWarningData()
 })
 
-watch(startDate, () => {
-    fetchWarningData()
-})
-watch(endDate, () => {
-    fetchWarningData()
-})
-watch(activeRange, () => {
-    fetchWarningData()
-})
-
-watch(cascadeOptions, (val) => {
-    if (val.length && selectedOrg.value) {
-        fetchWarningData()
-    }
-})
-
-watch(selectedAlertLevel, () => {
-    queryParams.pageNum = 1
-})
-
 // 监听路由参数变化，回显到级联选择器
 watch(() => route.query, (query) => {
     const { id } = query
@@ -439,7 +441,7 @@ watch(() => route.query, (query) => {
         selectedOrg.value = ''
     }
     fetchWarningData()
-}, { immediate: true })
+})
 </script>
 
 <style scoped>
@@ -513,7 +515,7 @@ watch(() => route.query, (query) => {
     background: white;
     border-radius: 60px;
     padding: 8px 20px;
-    margin-bottom: 28px;
+    margin-bottom: 10px;
     display: flex;
     flex-wrap: wrap;
     align-items: center;

src/views/warningManage/warningPage/index.vue

@@ -0,0 +1,836 @@
+<template>
+    <div class="dashboard">
+        <div class="header">
+            <div class="title-section">
+                <h1><i class="fas fa-shield-alt" style="color:#2c5282; margin-right: 8px;"></i>综合预警工作台</h1>
+                <p>员工综合评估（＜75分红色预警 | ≥90分优秀）</p>
+            </div>
+            <div class="badge-group">
+                <div class="alert-badge"><i class="fas fa-exclamation-triangle"></i> 实时预警</div>
+                <div class="alert-badge" style="border-left-color:#f97316;"><i class="fas fa-chart-line"></i> 动态月度数据
+                </div>
+            </div>
+        </div>
+
+        <div class="filter-bar">
+            <div class="time-range">
+                <button class="time-btn" :class="{ active: activeRange === 'week' }"
+                    @click="setActiveRange('week')">近一周</button>
+                <button class="time-btn" :class="{ active: activeRange === 'month' }"
+                    @click="setActiveRange('month')">近一月</button>
+                <button class="time-btn" :class="{ active: activeRange === 'quarter' }"
+                    @click="setActiveRange('quarter')">近三月</button>
+                <button class="time-btn" :class="{ active: activeRange === 'year' }"
+                    @click="setActiveRange('year')">近一年</button>
+                <div class="custom-date">
+                    <el-date-picker v-model="startDate" type="date" placeholder="开始日期" style="width: 150px;" />
+                    <span style="margin: 0 8px;">至</span>
+                    <el-date-picker v-model="endDate" type="date" placeholder="结束日期" style="width: 150px;" />
+
+                </div>
+                <el-tree-select v-model="selectedOrg" :data="cascadeOptions"
+                    :props="{ label: 'label', value: 'value', children: 'children' }" node-key="value"
+                    placeholder="组织架构/员工" clearable filterable check-strictly style="width: 480px;"
+                     />
+            </div>
+            <div class="filter-group">
+                <el-select v-model="selectedAlertLevel" placeholder="预警等级" clearable style="width: 250px;">
+                    <el-option label="全部" value=""></el-option>
+                    <el-option v-for="item in alert_level" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+                <el-button type="primary" @click="handleSearch">搜索</el-button>
+                <el-button @click="handleReset">重置</el-button>
+            </div>
+        </div>
+
+        <div class="cards-container">
+            <div class="cards-grid" style="overflow-x: auto; white-space: nowrap;">
+                <div class="card" v-for="(item, index) in summaryCards" :key="index"
+                    style="display: inline-block; width: 200px; flex-shrink: 0;">
+                    <div class="card-header">
+                        <i :class="item.icon"></i>
+                        <h3>{{ item.title }}</h3>
+                        <span class="card-badge">{{ item.badge }}</span>
+                    </div>
+                    <div class="value-large" :style="{ color: item.color }">{{ item.value }}</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="employee-section">
+            <div class="section-title">
+                <i class="fas fa-users" style="color:#dc2626;"></i> 员工综合预警
+                <span
+                    style="font-size:0.7rem; background:#eef2ff; padding:4px 12px; border-radius:30px; margin-left:12px;">
+                    评分依据：员工配分表
+                </span>
+            </div>
+            <div class="employee-card">
+                <div style="overflow-x: auto;">
+                    <el-table :data="filteredEmployees" :row-class-name="getRowClass" style="width:100%;" border stripe @sort-change="handleSortChange">
+                        <el-table-column prop="userId" label="员工ID" />
+                        <el-table-column prop="nickName" label="姓名">
+                            <template #default="{ row }">
+                                <strong>{{ row.nickName }}</strong>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="deptName" label="所属部门" />
+                        <el-table-column prop="eventTime" label="事件时间" sortable="custom" width="180" />
+                        <el-table-column prop="dimName" label="维度名称" />
+                        <el-table-column prop="secondIndicator" label="二级指标名称" />
+                        <el-table-column prop="deductionTotal" label="扣分分值合计" sortable="custom" />
+                        <el-table-column prop="occurrenceCount" label="发生次数" sortable="custom" />
+                        <el-table-column prop="overallScore" label="预警等级">
+                            <template #default="{ row }">
+                                <span v-if="row.overallScore < 75" class="status-badge"
+                                    style="animation: subtlePulse 1s infinite;"><i
+                                        class="fas fa-exclamation-triangle"></i> 红色预警</span>
+                                <span v-else-if="row.overallScore >= 90" class="status-excellent"
+                                    style="background:#d1fae5; color:#065f46;"><i class="fas fa-star"></i>
+                                    优秀标杆</span>
+                                <span v-else class="status-warning">正常范围</span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="coreRisk" label="核心风险" />
+                        <el-table-column prop="statusLabel" label="状态标签">
+                            <template #default="{ row }">
+                                <span v-if="row.overallScore < 75" style="color:#b91c1c;"><i class="fas fa-bell"></i>
+                                    {{ getAlertLabel(row.statusLabel) }}</span>
+                                <span v-else-if="row.overallScore >= 90" style="color:#15803d;"><i
+                                        class="fas fa-crown"></i> {{ getAlertLabel(row.statusLabel) }}</span>
+                                <span v-else>{{ getAlertLabel(row.statusLabel) }}</span>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                    <el-pagination v-show="total > 0" :total="total" v-model:current-page="queryParams.pageNum"
+                        v-model:page-size="queryParams.pageSize" :page-sizes="[10, 20, 50, 100]"
+                        layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
+                        @current-change="handlePageChange" style="margin-top: 16px; justify-content: flex-end;" />
+                </div>
+                <div class="warning-summary">
+                    <div><i class="fas fa-circle" style="color:#ef4444;"></i> <strong>红色预警</strong> (综合评估 &lt; 75分) 共计
+                        {{ redAlertCount }} 人 → 立即约谈/培训</div>
+                    <div><i class="fas fa-circle" style="color:#22c55e;"></i> <strong>优秀标杆</strong> (综合评估 ≥ 90分) 共计 {{
+                        excellentCount }} 人 → 表彰激励</div>
+                    <div><i class="fas fa-chart-simple"></i> 全员平均综合得分: <strong>{{ avgScore }}</strong> 分</div>
+                </div>
+            </div>
+        </div>
+
+        <footer>
+            <i class="far fa-bell"></i> 员工部门：旅检一/二/三部 | 阈值：＜75红色预警 | ≥90优秀
+        </footer>
+    </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue'
+import { getDeptUserTree } from '@/api/item/items'
+import { getWarningPageData, getEmployeeWarningPageData } from '@/api/warningPage/warningPage'
+import { useDict } from '@/utils/dict'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+
+const { alert_level } = useDict('alert_level')
+
+const dateRangeInput = ref(null)
+const activeRange = ref('month')
+
+const startDate = ref(null)
+const endDate = ref(null)
+const selectedAlertLevel = ref('')
+const selectedOrg = ref('')
+const cascadeOptions = ref([])
+
+const summaryCards = ref([
+    { icon: 'fas fa-clipboard-list', title: '部门监察问题', badge: '部门级', value: '13项', color: '#b45309' },
+    { icon: 'fas fa-microchip', title: '实时质控拦截', badge: '部门级', value: '347次', color: '#2563eb' },
+    { icon: 'fas fa-bug', title: '不安全事件', badge: '一级预警', value: '18起', color: '#dc2626' },
+    { icon: 'fas fa-shield-virus', title: '安保测试记录', badge: '部门级', value: '4项', color: '#e67e22' },
+    { icon: 'fas fa-comment-dots', title: '旅客服务投诉', badge: '服务响应', value: '11件', color: '#e67e22' },
+    { icon: 'fas fa-clipboard-check', title: '服务巡查', badge: '部门级', value: '5项', color: '#333' },
+    { icon: 'fas fa-graduation-cap', title: '培训及考试成绩', badge: '平均分数', value: '92.4分', color: '#333' },
+    { icon: 'fas fa-plane-departure', title: '航站楼', badge: '吞吐量', value: '2.8万', color: '#059669' },
+    { icon: 'fas fa-gift', title: '小额奖励', badge: '奖励次数', value: '156次', color: '#7c3aed' }
+])
+
+const newNames = [
+    "刘孟", "王苡衡", "周海涵", "何欣怡", "王崎",
+    "黄政", "刘韵儿", "汪安霖", "张诗敏", "张维", "陈凯琳"
+]
+const deptList = ["旅检一部", "旅检二部", "旅检三部"]
+const scores = [68, 92, 55, 96, 72, 88, 48, 94, 81, 63, 91]
+const coreRisksOrOutstandingAchievementsList = [
+    "违规操作2次+投诉1起，考试成绩62分",
+    "优秀服务案例，安保测试满分，无违规",
+    "安保测试未通过，不安全事件责任人",
+    "典型服务案例主导者，考试成绩98",
+    "质控拦截违规2次，考试成绩74分",
+    "考试成绩89分，服务巡查良好",
+    "严重不规范操作，安保测试未过",
+    "质控拦截贡献突出，考试成绩96",
+    "表现良好，无安全事故，考试86分",
+    "服务巡查扣分，投诉关联2件",
+    "临近预警线，服务巡查扣分1次"
+]
+
+const dimNames = ["安全管理", "服务质量", "运行效率", "队伍建设"]
+const indicatorNames = ["安全违规次数", "旅客投诉率", "安检差错率", "培训合格率", "操作规范度"]
+const deductionScores = [2, 5, 3, 1, 4]
+const occurrenceCounts = [1, 2, 3, 1, 2]
+
+const employeesData = ref([])
+const queryParams = reactive({
+    pageNum: 1,
+    pageSize: 10
+})
+
+for (let i = 0; i < newNames.length; i++) {
+    employeesData.value.push({
+        userId: String(10021 + i),
+        nickName: newNames[i],
+        deptName: deptList[i % deptList.length],
+        eventTime: `2026-0${(i % 9) + 1}-${String((i * 3 + 10) % 28 + 1).padStart(2, '0')}`,
+        overallScore: scores[i % scores.length],
+        dimName: dimNames[i % dimNames.length],
+        secondIndicator: indicatorNames[i % indicatorNames.length],
+        deductionTotal: deductionScores[i % deductionScores.length],
+        occurrenceCount: occurrenceCounts[i % occurrenceCounts.length],
+        coreRisk: coreRisksOrOutstandingAchievementsList[i % coreRisksOrOutstandingAchievementsList.length],
+        statusLabel: scores[i % scores.length] < 75 ? '1' : scores[i % scores.length] >= 90 ? '2' : '3'
+    })
+}
+
+// 将组织架构数据转换为树形数据
+const transformCascadeData = (nodes) => {
+    if (!nodes) return []
+    return nodes.map(node => {
+        const deptType = node.deptType || node.nodeType
+        const label = deptType === 'user'
+            ? (node.nickName || node.label)
+            : (node.deptName || node.name || node.label)
+
+        let value;
+        if (deptType === 'STATION') value = `station_${node.id}`;
+        else if (deptType === 'BRIGADE') value = `dept_${node.id}`
+        else if (deptType === 'MANAGER') value = `team_${node.id}`
+        else if (deptType === 'TEAMS') value = `group_${node.id}`
+        else value = `user_${node.id}`
+
+        const children = node.children && node.children.length > 0 ? transformCascadeData(node.children) : undefined
+
+        return {
+            label,
+            value,
+            deptType,
+            children
+        }
+    })
+}
+
+// 获取选中的部门或用户信息
+const getSelectedInfo = (selectedValue) => {
+    if (!selectedValue) return null
+
+    const findNodeByValue = (nodes, value) => {
+        for (const node of nodes) {
+            if (node.value === value) {
+                return node
+            }
+            if (node.children) {
+                const found = findNodeByValue(node.children, value)
+                if (found) return found
+            }
+        }
+        return null
+    }
+
+    return findNodeByValue(cascadeOptions.value, selectedValue)
+}
+
+const allFilteredEmployees = computed(() => {
+    let result = employeesData.value.ledgerWarningDetailItemList || []
+
+    // 预警等级筛选
+    if (selectedAlertLevel.value) {
+        // 根据字典值判断筛选条件（红色预警 <75，优秀标杆 >=90，正常范围 75-89）
+        // 可以根据字典的 value 或 label 来判断
+        const alertItem = alert_level.value.find(item => item.value === selectedAlertLevel.value)
+        if (alertItem) {
+            const label = alertItem.label
+            if (label.includes('红色') || label.includes('预警')) {
+                result = result.filter(emp => emp.overallScore < 75)
+            } else if (label.includes('优秀') || label.includes('标杆')) {
+                result = result.filter(emp => emp.overallScore >= 90)
+            } else if (label.includes('正常')) {
+                result = result.filter(emp => emp.overallScore >= 75 && emp.overallScore < 90)
+            }
+        }
+    }
+
+    return result
+})
+
+const sortState = ref({ prop: '', order: '' })
+
+const filteredEmployees = computed(() => {
+    let data = [...allFilteredEmployees.value]
+    if (sortState.value.prop && sortState.value.order) {
+        const { prop, order } = sortState.value
+        data.sort((a, b) => {
+            const valA = a[prop]
+            const valB = b[prop]
+            if (valA == null) return 1
+            if (valB == null) return -1
+            const result = valA > valB ? 1 : valA < valB ? -1 : 0
+            return order === 'ascending' ? result : -result
+        })
+    }
+    const start = (queryParams.pageNum - 1) * queryParams.pageSize
+    const end = start + queryParams.pageSize
+    return data.slice(start, end)
+})
+
+function handleSortChange({ prop, order }) {
+    sortState.value = { prop, order }
+    queryParams.pageNum = 1
+}
+
+const total = computed(() => allFilteredEmployees.value.length)
+
+function handlePageChange(newPage) {
+    queryParams.pageNum = newPage
+}
+
+function handleSizeChange(newSize) {
+    queryParams.pageSize = newSize
+    queryParams.pageNum = 1
+}
+
+const redAlertCount = computed(() => {
+    return employeesData.value?.redAlertNum || 0
+})
+
+const excellentCount = computed(() => {
+    return employeesData.value?.excellentBenchmarkNum || 0
+})
+
+const avgScore = computed(() => {
+    return employeesData.value?.averageComprehensiveScore || 0
+})
+
+const getRowClass = ({ row }) => {
+    if (row.overallScore < 75) return "employee-warning-row"
+    if (row.overallScore >= 90) return "employee-excellent-row"
+    return ""
+}
+
+const getAlertLabel = (value) => {
+    if (!value) return ''
+    const item = alert_level.value.find(d => d.value === value)
+    return item ? item.label : value
+}
+
+const setActiveRange = (range) => {
+    activeRange.value = range
+    if (range !== 'custom') {
+        startDate.value = null
+        endDate.value = null
+    }
+}
+
+const handleSearch = () => {
+    fetchWarningData()
+}
+
+const handleReset = () => {
+    startDate.value = null
+    endDate.value = null
+    activeRange.value = 'month'
+    selectedAlertLevel.value = ''
+    selectedOrg.value = ''
+    queryParams.pageNum = 1
+    fetchWarningData()
+}
+
+
+const formatDate = (d) => {
+    if (!d) return ''
+    const date = new Date(d)
+    const y = date.getFullYear()
+    const m = String(date.getMonth() + 1).padStart(2, '0')
+    const day = String(date.getDate()).padStart(2, '0')
+    return `${y}-${m}-${day}`
+}
+
+const getDateRangeFromActive = () => {
+    const now = new Date()
+    let start = new Date(now)
+    if (activeRange.value === 'week') {
+        start.setDate(now.getDate() - 7)
+    } else if (activeRange.value === 'month') {
+        start.setMonth(now.getMonth() - 1)
+    } else if (activeRange.value === 'quarter') {
+        start.setMonth(now.getMonth() - 3)
+    } else {
+        start.setFullYear(now.getFullYear() - 1)
+    }
+    return { startDate: formatDate(start), endDate: formatDate(now) }
+}
+
+const warningDataMap = {
+    ledgerSupervisionProblem: 0,
+    ledgerRealtimeInterception: 1,
+    ledgerUnsafeEvent: 2,
+    ledgerSecurityTest: 3,
+    ledgerComplaint: 4,
+    ledgerServicePatrol: 5,
+    ledgerExamScore: 6,
+    ledgerTerminalBonus: 7,
+    ledgerRewardApproval: 8
+}
+
+const fetchWarningData = async () => {
+    queryParams.pageNum = 1
+    let params = {}
+    if (startDate.value && endDate.value) {
+        params.startDate = formatDate(startDate.value)
+        params.endDate = formatDate(endDate.value)
+    } else {
+        const range = getDateRangeFromActive()
+        params.startDate = range.startDate
+        params.endDate = range.endDate
+    }
+
+    const selectedInfo = getSelectedInfo(selectedOrg.value)
+    if (selectedInfo) {
+        const rawId = Number(selectedInfo.value.split('_')[1])
+
+        if (selectedInfo.deptType === 'BRIGADE') params.deptId = rawId
+        else if (selectedInfo.deptType === 'MANAGER') params.teamId = rawId
+        else if (selectedInfo.deptType === 'TEAMS') params.groupId = rawId
+        else if (selectedInfo.deptType === 'user') params.userId = rawId
+    }
+
+    try {
+        const [r1, r2] = await Promise.all([
+            getWarningPageData(params),
+            getEmployeeWarningPageData(params)
+        ])
+        if (r1.data) {
+            const d = r1.data
+            summaryCards.value.forEach((card, idx) => {
+                for (const [key, i] of Object.entries(warningDataMap)) {
+                    if (i === idx) {
+                        card.value = d[key] !== undefined ? String(d[key]) : card.value
+                        break
+                    }
+                }
+            })
+        }
+        if (r2.data) {
+            employeesData.value = r2.data
+        }
+    } catch (error) {
+        console.error('获取预警数据失败:', error)
+    }
+}
+
+onMounted(async () => {
+    try {
+        const res = await getDeptUserTree()
+        if (res.data) {
+            cascadeOptions.value = transformCascadeData(res.data)
+            console.log(cascadeOptions.value, "cascadeOptions")
+        }
+    } catch (error) {
+        console.error('获取组织架构数据失败:', error)
+    }
+    fetchWarningData()
+})
+
+// 监听路由参数变化，回显到级联选择器
+watch(() => route.query, (query) => {
+    const { id } = query
+    if (id) {
+        selectedOrg.value = `user_${id}`
+    } else {
+        selectedOrg.value = ''
+    }
+    fetchWarningData()
+})
+</script>
+
+<style scoped>
+@keyframes subtlePulse {
+    0% {
+        opacity: 0.7;
+    }
+
+    50% {
+        opacity: 1;
+        background: #ffb3b3;
+    }
+
+    100% {
+        opacity: 0.7;
+    }
+}
+
+
+
+.dashboard {
+    max-width: 100%;
+    padding: 10px;
+}
+
+.header {
+    margin-bottom: 28px;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    flex-wrap: wrap;
+    gap: 16px;
+}
+
+.title-section h1 {
+    font-size: 1.7rem;
+    font-weight: 700;
+    background: linear-gradient(135deg, #1e3c72, #2a5298);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    letter-spacing: -0.3px;
+}
+
+.title-section p {
+    color: #475569;
+    margin-top: 6px;
+    font-size: 0.85rem;
+}
+
+.badge-group {
+    display: flex;
+    gap: 12px;
+}
+
+.alert-badge {
+    background: #fff1f0;
+    border-left: 5px solid #ef4444;
+    padding: 6px 16px;
+    border-radius: 40px;
+    font-weight: 600;
+    font-size: 0.85rem;
+}
+
+.alert-badge i {
+    color: #ef4444;
+    margin-right: 6px;
+}
+
+.filter-bar {
+    background: white;
+    border-radius: 60px;
+    padding: 8px 20px;
+    margin-bottom: 28px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.03);
+    border: 1px solid #eef2f6;
+}
+
+.time-range {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.time-btn {
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    padding: 6px 18px;
+    border-radius: 40px;
+    font-size: 0.8rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+    color: #1e293b;
+}
+
+.time-btn.active {
+    background: #2563eb;
+    border-color: #2563eb;
+    color: white;
+}
+
+.time-btn:hover {
+    background: #e2e8f0;
+}
+
+.custom-date {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.clear-btn {
+    background: transparent;
+    border: 1px solid #e2e8f0;
+    padding: 4px 8px;
+    border-radius: 40px;
+    cursor: pointer;
+    color: #64748b;
+}
+
+.clear-btn:hover {
+    background: #f1f5f9;
+}
+
+.custom-date :deep(.el-date-picker) {
+    background: transparent;
+}
+
+.custom-date :deep(.el-input__wrapper) {
+    background: transparent;
+
+
+}
+
+.filter-group {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+}
+
+.search-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: #f8fafc;
+    padding: 4px 12px;
+    border-radius: 40px;
+    border: 1px solid #e2e8f0;
+}
+
+.search-btn {
+    background: #2563eb;
+    border: none;
+    color: white;
+    padding: 4px 14px;
+    border-radius: 30px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: 0.2s;
+}
+
+.search-btn:hover {
+    background: #1d4ed8;
+}
+
+.cards-container {
+    width: 100%;
+    margin-bottom: 36px;
+    overflow-x: auto;
+}
+
+.cards-grid {
+    display: flex;
+
+    gap: 16px;
+    flex-wrap: nowrap;
+    min-width: max-content;
+}
+
+.card {
+    background: #ffffff;
+    border-radius: 20px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.05);
+    transition: all 0.2s;
+    border: 1px solid #eef2f6;
+    padding: 1rem 0.5rem;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    min-width: 280px;
+    flex-shrink: 0;
+}
+
+.card:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 12px 20px -10px rgba(0, 0, 0, 0.1);
+    border-color: #cbd5e1;
+}
+
+.card-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+    border-bottom: none;
+    padding-bottom: 0;
+    margin-bottom: 12px;
+}
+
+.card-header i {
+    font-size: 1.5rem;
+    color: #2563eb;
+}
+
+.card-header h3 {
+    font-size: 0.85rem;
+    font-weight: 700;
+    margin: 0;
+    white-space: nowrap;
+}
+
+.card-badge {
+    font-size: 0.6rem;
+    background: #f1f5f9;
+    padding: 2px 8px;
+    border-radius: 30px;
+    margin-top: 4px;
+    display: inline-block;
+}
+
+.value-large {
+    font-size: 1.8rem;
+    font-weight: 800;
+    line-height: 1.2;
+    margin: 8px 0 4px 0;
+}
+
+.employee-section {
+    margin-top: 20px;
+    width: 100%;
+}
+
+.section-title {
+    font-size: 1.2rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    border-left: 5px solid #ef4444;
+    padding-left: 14px;
+}
+
+.employee-card {
+    background: #ffffff;
+    border-radius: 24px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.05);
+    border: 1px solid #eef2f6;
+    padding: 1rem 1.5rem;
+    width: 100%;
+}
+
+.data-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.8rem;
+}
+
+.data-table th {
+    text-align: left;
+    padding: 10px 6px 8px 0;
+    font-weight: 600;
+    color: #334155;
+    border-bottom: 2px solid #e2e8f0;
+}
+
+.data-table td {
+    padding: 8px 6px 8px 0;
+    border-bottom: 1px solid #f1f5f9;
+    vertical-align: middle;
+}
+
+.employee-warning-row {
+    background-color: #fff5f5;
+    border-left: 4px solid #ef4444;
+}
+
+.employee-excellent-row {
+    background-color: #f0fdf4;
+    border-left: 4px solid #22c55e;
+}
+
+.score-danger {
+    font-weight: 800;
+    color: #dc2626;
+    background: #fee2e2;
+    padding: 2px 8px;
+    border-radius: 30px;
+    display: inline-block;
+    font-size: 0.8rem;
+}
+
+.score-excellent {
+    font-weight: 800;
+    color: #15803d;
+    background: #dcfce7;
+    padding: 2px 8px;
+    border-radius: 30px;
+    display: inline-block;
+    font-size: 0.8rem;
+}
+
+.warning-summary {
+    background: #fff9f0;
+    border-radius: 18px;
+    padding: 12px 20px;
+    margin-top: 18px;
+    display: flex;
+    gap: 28px;
+    flex-wrap: wrap;
+    font-weight: 500;
+    font-size: 0.85rem;
+}
+
+footer {
+    text-align: center;
+    margin-top: 32px;
+    font-size: 0.7rem;
+    color: #7e8b9c;
+    border-top: 1px solid #e2edf7;
+    padding-top: 18px;
+}
+
+@media (max-width: 1200px) {
+    .cards-grid {
+        grid-template-columns: repeat(4, 1fr);
+        gap: 14px;
+    }
+}
+
+@media (max-width: 800px) {
+    .cards-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    body {
+        padding: 20px;
+    }
+
+    .filter-bar {
+        border-radius: 24px;
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .org-search {
+        justify-content: space-between;
+    }
+}
+
+@media (max-width: 550px) {
+    .cards-grid {
+        grid-template-columns: 1fr;
+    }
+}
+</style>