feat: 新增预警页面功能，优化员工画像页面跳转与搜索

1.  新增预警页面路由与完整预警中枢页面
2.  调整员工画像页面能力图表点击跳转预警页
3.  为部门搜索组件新增id查询参数
4.  移除群组画像页面无用的默认post数据
5.  在用户信息编辑页面新增标签输入项
6.  重构员工画像页面的鼠标监听逻辑，修复绑定问题

src/router/index.js

@@ -91,10 +91,10 @@ export const constantRoutes = [
     meta: { title: '监控中心', icon: 'dashboard', affix: true },
     children: [
       {
-        path: '/index',
-        component: () => import('@/views/portraitManagement/employeeProfile'),
-        name: 'Index',
-        meta: { title: '员工画像', icon: 'dashboard' }
+        path: '/warningPage',
+        component: () => import('@/views/warningPage'),
+        name: 'WarningPage',
+        meta: { title: '预警页面', icon: 'dashboard' }
       },
       // {
       //   path: '/dashboard-work',

src/views/portraitManagement/components/SearchBar.vue

@@ -308,7 +308,7 @@ onMounted(async () => {
         const path = buildPathForNode(departments.value, defaultNode.deptId || defaultNode.id)
         const name = defaultNode.label
         personName.value = path.length > 0 ? `${path.join(' / ')} / ${name}` : name
-        curQuery.value = { personName: defaultNode.label }
+        curQuery.value = { personName: defaultNode.label,id:defaultNode.id }
         searchHandler(curQuery.value)
       } else {
         const path = buildPathForNode(departments.value, defaultNode.deptId || defaultNode.id)

src/views/portraitManagement/deptProfile/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="group-profile-page">
     <Page title="安检人事管理可视化大屏" :tabs="['能力画像', '运行数据']" @tab-change="handleTabChange">
-      <SearchBar v-model:visible="searchVisible" ref="searchBar" @search="handleSearch" @init-done="handleInitDone"
+      <SearchBar v-model:visible="searchVisible" ref="searchBar" @search="handleSearch" 
         :deptType="'BRIGADE'" />
       <PentagonGroup :items="pentagonItems" />
       <Profile v-if="activeTab === 0" :query-params="queryParams" />

src/views/portraitManagement/employeeProfile/index.vue

@@ -110,7 +110,6 @@
                 <span v-if="portrait.entryDate">
                   {{ formatWorkDate(portrait.entryDate)  }}入职 | 司龄{{ portrait.companyYears != null ? portrait.companyYears : '-' }}年 | 开机年限{{ portrait.xrayOperatorYears != null ? portrait.xrayOperatorYears : '-'
 
-
                   }}年 | 现任职{{ portrait.roleNames || '-' }}
                 </span>
                 <span v-else>暂无数据</span>
@@ -130,7 +129,7 @@
           </div>
           <div class="content-bottom-center">
             <Card title="个人能力">
-              <div ref="abilityChart" class="chart-box" />
+              <div ref="abilityChart" class="chart-box" @click="goToWarningPage" />
             </Card>
           </div>
           <div class="content-bottom-right">
@@ -224,11 +223,14 @@ import Card from '../components/card.vue'
 import SearchBar from '../components/SearchBar.vue'
 import { getEmployeePortrait } from '@/api/score/index'
 import { countTagScore } from '@/api/portraitManagement/portraitManagement'
-import { onMounted, reactive, ref, computed } from 'vue'
+import { onMounted, onUnmounted, reactive, ref, computed, watch } from 'vue'
 import { useDict } from '@/utils/dict'
 import { useECharts } from '@/hooks/useEcharts'
 import useUserStore from '@/store/modules/user'
+import { useRouter } from 'vue-router'
 
+const router = useRouter()
+let radarChartInstance = null
 
 const { sys_user_schooling } = useDict('sys_user_schooling')
 const userStore = useUserStore()
@@ -238,6 +240,7 @@ const portrait = ref({ dimensions: [] })
 const abilityChart = ref(null)
 const activeDimName = ref(null)
 const tagScoreData = ref(null)
+const currentQuery = ref(null)
 
 const scoreDetails = computed(() => portrait.value?.scoreDetails || [])
 
@@ -331,9 +334,22 @@ const invokerEmployeePortrait = (query) => {
 
 const searchHandler = (query) => {
   visible.value = false
+  currentQuery.value = query
   invokerEmployeePortrait(query)
 }
 
+const goToWarningPage = () => {
+  if (currentQuery.value) {
+    router.push({
+      path: '/warningPage',
+      query: { id: currentQuery.value.id },
+   
+    })
+  } else {
+    router.push('/warningPage')
+  }
+}
+
 const radarData = reactive({
   grounp: [],
   data: []
@@ -424,7 +440,7 @@ let pisition = {
 }
 const tipRef = ref(null)
 
-useECharts(abilityChart, setRadarOptions).bindEvent('mousemove', (e) => {
+radarChartInstance = useECharts(abilityChart, setRadarOptions).bindEvent('mousemove', (e) => {
   if (!Array.isArray(portrait.value.dimensions) || !portrait.value.dimensions.length) return
   const rect = abilityChart.value.getBoundingClientRect()
   if (!tipRef.value) return
@@ -455,11 +471,19 @@ useECharts(abilityChart, setRadarOptions).bindEvent('mousemove', (e) => {
   if (tipRef.value) tipRef.value.style.display = 'none'
 })
 
+
+
+const handleMouseMove = (eve) => {
+  pisition.x = eve.pageX
+  pisition.y = eve.pageY
+}
+
 onMounted(() => {
-  window.addEventListener('mousemove', (eve) => {
-    pisition.x = eve.pageX
-    pisition.y = eve.pageY
-  })
+  window.addEventListener('mousemove', handleMouseMove)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('mousemove', handleMouseMove)
 })
 </script>
 

src/views/portraitManagement/groupProfile/component/profile.vue

@@ -69,11 +69,7 @@ const skillData = ref([])
 
 const operateData = ref([])
 
-const postData = ref({
-  categories: ['前传', '人身', '验证', '开包', '开机'],
-  values: [4, 5, 6, 7, 8],
-  colors: ['#ff6b6b', '#ee5a24']
-})
+const postData = ref([])
 const fetchTeamMembers = async (params) => {
   try {
     const res = await getDeptMembers(params)

src/views/system/user/components/UserInfoEdit.vue

@@ -90,6 +90,11 @@
               </el-select>
             </el-form-item>
           </el-col>
+          <el-col :span="12">
+            <el-form-item label="标签" prop="tags">
+              <el-input v-model="form.tags" placeholder="请输入标签" maxlength="50" />
+            </el-form-item>
+          </el-col>
         </el-row>
       </el-card>
       <el-card header="状态管理信息" style="margin-bottom: 10px;">

src/views/warningPage/index.vue

@@ -0,0 +1,715 @@
+<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>
+            </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-cascader v-model="selectedOrg" :options="cascadeOptions"
+                    :props="{ expandTrigger: 'hover', label: 'label', value: 'value', children: 'children', emitPath: false }"
+                    placeholder="组织架构/员工" clearable style="width: 280px;" />
+            </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;">
+                    <table class="data-table" style="width:100%;">
+                        <thead>
+                            <tr>
+                                <th>员工ID</th>
+                                <th>姓名</th>
+                                <th>所属部门</th>
+                                <th>综合评估得分</th>
+                                <th>预警等级</th>
+                                <th>核心风险/优秀事迹</th>
+                                <th>状态标签</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr v-for="emp in filteredEmployees" :key="emp.id" :class="getRowClass(emp.baseScore)">
+                                <td>{{ emp.id }}</td>
+                                <td><strong>{{ emp.name }}</strong></td>
+                                <td>{{ emp.dept }}</td>
+                                <td>
+                                    <span v-if="emp.baseScore < 75" class="score-danger">{{ emp.baseScore }} 分</span>
+                                    <span v-else-if="emp.baseScore >= 90" class="score-excellent">{{ emp.baseScore }}
+                                        分</span>
+                                    <span v-else style="font-weight:600;">{{ emp.baseScore }} 分</span>
+                                </td>
+                                <td>
+                                    <span v-if="emp.baseScore < 75" class="status-badge"
+                                        style="animation: subtlePulse 1s infinite;"><i
+                                            class="fas fa-exclamation-triangle"></i> 红色预警</span>
+                                    <span v-else-if="emp.baseScore >= 90" class="status-excellent"
+                                        style="background:#d1fae5; color:#065f46;"><i class="fas fa-star"></i>
+                                        优秀标杆</span>
+                                    <span v-else class="status-warning">正常范围</span>
+                                </td>
+                                <td style="font-size:0.75rem;">{{ emp.riskDesc }}</td>
+                                <td>
+                                    <span v-if="emp.baseScore < 75" style="color:#b91c1c;"><i class="fas fa-bell"></i>
+                                        紧急干预</span>
+                                    <span v-else-if="emp.baseScore >= 90" style="color:#15803d;"><i
+                                            class="fas fa-crown"></i> 表彰激励</span>
+                                    <span v-else>常规辅导</span>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </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 { 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 currentFilterText = ref('')
+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 riskDescList = [
+    "违规操作2次+投诉1起，考试成绩62分",
+    "优秀服务案例，安保测试满分，无违规",
+    "安保测试未通过，不安全事件责任人",
+    "典型服务案例主导者，考试成绩98",
+    "质控拦截违规2次，考试成绩74分",
+    "考试成绩89分，服务巡查良好",
+    "严重不规范操作，安保测试未过",
+    "质控拦截贡献突出，考试成绩96",
+    "表现良好，无安全事故，考试86分",
+    "服务巡查扣分，投诉关联2件",
+    "临近预警线，服务巡查扣分1次"
+]
+
+const employeesData = ref([])
+
+for (let i = 0; i < newNames.length; i++) {
+    employeesData.value.push({
+        id: String(10021 + i),
+        name: newNames[i],
+        dept: deptList[i % deptList.length],
+        baseScore: scores[i % scores.length],
+        riskDesc: riskDescList[i % riskDescList.length]
+    })
+}
+
+// 将组织架构数据转换为级联选择器格式
+const transformCascadeData = (nodes) => {
+    if (!nodes) return []
+    return nodes.map(node => {
+        const label = node.nickName || node.deptName || node.name || node.label
+        const value = node.id || node.deptId
+
+        let children = []
+        if (node.children && node.children.length > 0) {
+            children = transformCascadeData(node.children)
+        }
+        // 如果是用户节点，没有子节点
+        if (node.nodeType === 'user' || node.deptType === 'user') {
+            children = []
+        }
+
+        return {
+            label,
+            value,
+            nodeType: node.nodeType || node.deptType,
+            children: children.length > 0 ? children : undefined
+        }
+    })
+}
+
+// 获取选中的部门或用户信息
+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 filteredEmployees = computed(() => {
+    let result = [...employeesData.value]
+
+    // 模糊搜索筛选
+    if (currentFilterText.value.trim()) {
+        const keyword = currentFilterText.value.trim().toLowerCase()
+        result = result.filter(emp =>
+            emp.name.toLowerCase().includes(keyword) ||
+            emp.dept.toLowerCase().includes(keyword) ||
+            emp.id.toLowerCase().includes(keyword)
+        )
+    }
+
+    // 预警等级筛选
+    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.baseScore < 75)
+            } else if (label.includes('优秀') || label.includes('标杆')) {
+                result = result.filter(emp => emp.baseScore >= 90)
+            } else if (label.includes('正常')) {
+                result = result.filter(emp => emp.baseScore >= 75 && emp.baseScore < 90)
+            }
+        }
+    }
+
+    // 组织架构筛选
+    if (selectedOrg.value) {
+        const selectedInfo = getSelectedInfo(selectedOrg.value)
+        if (selectedInfo) {
+            if (selectedInfo.nodeType === 'user') {
+                // 筛选特定用户
+                result = result.filter(emp => emp.name === selectedInfo.label)
+            } else {
+                // 筛选特定部门
+                result = result.filter(emp => emp.dept.includes(selectedInfo.label))
+            }
+        }
+    }
+
+    return result
+})
+
+const redAlertCount = computed(() => {
+    return filteredEmployees.value.filter(emp => emp.baseScore < 75).length
+})
+
+const excellentCount = computed(() => {
+    return filteredEmployees.value.filter(emp => emp.baseScore >= 90).length
+})
+
+const avgScore = computed(() => {
+    if (!filteredEmployees.value.length) return "0"
+    const total = filteredEmployees.value.reduce((sum, emp) => sum + emp.baseScore, 0)
+    return (total / filteredEmployees.value.length).toFixed(1)
+})
+
+const getRowClass = (score) => {
+    if (score < 75) return "employee-warning-row"
+    if (score >= 90) return "employee-excellent-row"
+    return ""
+}
+
+const setActiveRange = (range) => {
+    activeRange.value = range
+    // 清除自定义日期
+    if (range !== 'custom') {
+        startDate.value = null
+        endDate.value = null
+    }
+}
+
+const handleSearch = () => {
+    console.log('执行筛选', {
+        activeRange: activeRange.value,
+        startDate: startDate.value,
+        endDate: endDate.value,
+        selectedAlertLevel: selectedAlertLevel.value,
+        selectedOrg: selectedOrg.value
+    })
+}
+
+onMounted(async () => {
+    try {
+        // 获取组织架构数据
+        const res = await getDeptUserTree()
+        if (res.data) {
+            cascadeOptions.value = transformCascadeData(res.data)
+        }
+    } catch (error) {
+        console.error('获取组织架构数据失败:', error)
+    }
+})
+
+// 监听路由参数变化，回显到级联选择器
+watch(() => route.query, (query) => {
+    const { id } = query
+    if (id) {
+        selectedOrg.value = id
+    } else {
+        selectedOrg.value = ''
+    }
+}, { immediate: true })
+</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>