Merge branch 'employeeScreen'

src/api/ledger/index.js

@@ -17,6 +17,9 @@ export function downloadLedgerTemplate(params) {
 }
 
 // ===== 台账一键导入 =====
+export function importLeaveSpecial(data) {
+  return request({ url: '/ledger/import/leaveSpecial', method: 'post', data })
+}
 export function importSupervisionProblem(data) {
   return request({ url: '/ledger/import/supervisionProblem', method: 'post', data })
 }

src/api/system/user.js

@@ -152,3 +152,20 @@ export function getDeptUserTree(params) {
     params: params
   })
 }
+//通过用户ID获取用户组织信息
+export function getUserOrgInfo(params) {
+  return request({
+    url: '/system/dept/userOrgInfo',
+    method: 'get',
+    params: params
+  })
+}
+
+//通过部门ID获取部门组织信息及上级链
+export function getDeptOrgInfo(params) {
+  return request({
+    url: '/system/dept/deptOrgInfo',
+    method: 'get',
+    params: params
+  })
+}

src/api/warningPage/warningPage.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+//台账数据
+export function getWarningPageData(data) {
+  return request({ url: '/ledger/warning/ledger', method: 'post', data })
+}
+//员工综合评估预警看板
+export function getEmployeeWarningPageData(data) {
+  return request({ url: '/ledger/warning/ledgerDetail', method: 'post', data })
+}

src/router/index.js

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

src/views/ledger/import/index.vue

@@ -142,6 +142,7 @@ import {
   importTerminalBonus,
   importExamScore,
   importRewardApproval,
+  importLeaveSpecial,
   importDailyTraining,
   importLeaderDuty,
   importHealthSoldier,
@@ -251,15 +252,15 @@ const importItems = reactive([
     loading: false,
     lastResult: null
   },
-  {
-    key: 'patrolInspection',
-    title: '队室三级质控巡查记录',
-    desc: '队室层级巡查问题记录',
-    icon: 'DocumentChecked',
-    api: importPatrolInspection,
-    loading: false,
-    lastResult: null
-  },
+  // {
+  //   key: 'patrolInspection',
+  //   title: '队室三级质控巡查记录',
+  //   desc: '队室层级巡查问题记录',
+  //   icon: 'DocumentChecked',
+  //   api: importPatrolInspection,
+  //   loading: false,
+  //   lastResult: null
+  // },
   {
     key: 'realtimeInterception',
     title: '实时质控拦截记录',
@@ -315,6 +316,15 @@ const importItems = reactive([
     lastResult: null
   },
   {
+    key: 'leaveSpecial',
+    title: '请、休假记录表(特殊)',
+    desc: '请、休假记录表(特殊)',
+    icon: 'Calendar',
+    api: importLeaveSpecial,
+    loading: false,
+    lastResult: null
+  },
+  {
     key: 'seizureStats',
     title: '2026查获违规品统计',
     desc: '查获违规品统计数据',
@@ -350,51 +360,52 @@ const importItems = reactive([
     loading: false,
     lastResult: null
   },
-  {
-    key: 'dailyTraining',
-    title: '日常培训记录',
-    desc: '月度培训任务及完成情况记录',
-    icon: 'Reading',
-    api: importDailyTraining,
-    loading: false,
-    lastResult: null
-  },
-  {
-    key: 'leaderDuty',
-    title: '组长履职情况记录',
-    desc: '队室组长本班点评及问题处置',
-    icon: 'Management',
-    api: importLeaderDuty,
-    loading: false,
-    lastResult: null
-  },
-  {
-    key: 'healthSoldier',
-    title: '健康锐兵',
-    desc: '员工身心健康状况台账记录',
-    icon: 'FirstAidKit',
-    api: importHealthSoldier,
-    loading: false,
-    lastResult: null
-  },
-  {
-    key: 'dormFireSafety',
-    title: '宿舍消防安全专项自查',
-    desc: '宿舍消防隐患自查情况记录',
-    icon: 'House',
-    api: importDormFireSafety,
-    loading: false,
-    lastResult: null
-  },
-  {
-    key: 'trainingIssue',
-    title: '培训台账问题通报',
-    desc: '培训台账发现问题及整改通报',
-    icon: 'Bell',
-    api: importTrainingIssue,
-    loading: false,
-    lastResult: null
-  }
+
+  // {
+  //   key: 'dailyTraining',
+  //   title: '日常培训记录',
+  //   desc: '月度培训任务及完成情况记录',
+  //   icon: 'Reading',
+  //   api: importDailyTraining,
+  //   loading: false,
+  //   lastResult: null
+  // },
+  // {
+  //   key: 'leaderDuty',
+  //   title: '组长履职情况记录',
+  //   desc: '队室组长本班点评及问题处置',
+  //   icon: 'Management',
+  //   api: importLeaderDuty,
+  //   loading: false,
+  //   lastResult: null
+  // },
+  // {
+  //   key: 'healthSoldier',
+  //   title: '健康锐兵',
+  //   desc: '员工身心健康状况台账记录',
+  //   icon: 'FirstAidKit',
+  //   api: importHealthSoldier,
+  //   loading: false,
+  //   lastResult: null
+  // },
+  // {
+  //   key: 'dormFireSafety',
+  //   title: '宿舍消防安全专项自查',
+  //   desc: '宿舍消防隐患自查情况记录',
+  //   icon: 'House',
+  //   api: importDormFireSafety,
+  //   loading: false,
+  //   lastResult: null
+  // },
+  // {
+  //   key: 'trainingIssue',
+  //   title: '培训台账问题通报',
+  //   desc: '培训台账发现问题及整改通报',
+  //   icon: 'Bell',
+  //   api: importTrainingIssue,
+  //   loading: false,
+  //   lastResult: null
+  // }
 ])
 
 function beforeUpload(file) {

src/views/portraitManagement/components/ProfileRadar.vue

@@ -1,5 +1,5 @@
 <template>
-  <InfoCard title="七维得分一览">
+  <InfoCard :title="title">
     <div class="radar-section">
       <div ref="radarChartRef" class="radar-chart"></div>
       <div class="radar-list">
@@ -26,6 +26,10 @@ import * as echarts from 'echarts'
 import InfoCard from './card.vue'
 
 const props = defineProps({
+  title: {
+    type: String,
+    default: '七维得分一览'
+  },
   chartData: {
     type: Array,
     default: () => []

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/component/profile.vue

@@ -2,7 +2,7 @@
   <div class="main-content-wrapper">
     <div class="main-content">
       <div class="content-row">
-        <ProfileRadar :chartData="radarData" />
+        <ProfileRadar :chartData="radarData" :title="'五维得分一览'" />
         <ProfileMembers :columns="teamColumns" :data="teamMembers" />
       </div>
 

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

@@ -74,8 +74,8 @@
                   </div>
                   <div class="info-item-content">
                     <div class="info-item-label">标签：</div>
-                    <div class="info-item-value">
-                      <span class="info-item-tag" v-if="portrait.roleNames">{{ portrait.roleNames }}</span>
+                    <div class="info-item-value" v-if="portrait.userTags">
+                      <span class="info-item-tag" v-for="tag in portrait.userTags.split(',')" :key="tag">{{ tag }}</span>
                     </div>
                   </div>
                 </div>
@@ -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: '/index',
+      query: { id: currentQuery.value.id },
+   
+    })
+  } else {
+    router.push('/index')
+  }
+}
+
 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>
 
@@ -582,6 +606,7 @@ onMounted(() => {
               display: flex;
               align-items: center;
               flex-wrap: wrap;
+              gap: 2px;
             }
             .info-item-tag {
               font-size: 14px;

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/portraitManagement/stationProfile/component/runData.vue

@@ -426,15 +426,24 @@ const initDailySeizedArea = () => {
   }
   const rawData = countSeizureSingleQuantityData.value
   if (!rawData || rawData.length === 0) return
+
+  const dates = [...new Set(rawData.map(item => item.recordDate))].sort()
+  const groupNames = [...new Set(rawData.flatMap(d => d.items.map(i => i.groupName)))]
+
   const groupMap = {}
-  rawData.forEach(item => {
-    if (!groupMap[item.groupName]) {
-      groupMap[item.groupName] = []
-    }
-    groupMap[item.groupName].push(item.seizeQuantity)
+  groupNames.forEach(name => {
+    groupMap[name] = new Array(dates.length).fill(0)
   })
-  const groupNames = Object.keys(groupMap)
-  const dates = [...new Set(rawData.map(item => item.recordDate))]
+
+  rawData.forEach(record => {
+    const dateIndex = dates.indexOf(record.recordDate)
+    record.items.forEach(item => {
+      if (groupMap[item.groupName] && dateIndex >= 0) {
+        groupMap[item.groupName][dateIndex] = item.seizeQuantity
+      }
+    })
+  })
+
   const countryColors = ['#4da6ff', '#7eff7e', '#bd03fb', '#ffd93d', '#ff6b6b', '#00f5ff', '#ffa500', '#71B138']
   const series = groupNames.map((name, idx) => {
     const color = countryColors[idx % countryColors.length]

src/views/score/event/index.vue

@@ -188,7 +188,7 @@
           <el-col :span="12">
             <el-form-item label="部门名称" prop="deptId" :rules="rules.deptId">
               <el-select v-model="form.deptId" placeholder="请选择部门" style="width:100%" clearable filterable
-                @change="handleDeptChange">
+                 @change="handleBrigadeChange">
                 <el-option v-for="d in deptOptions" :key="d.deptId" :label="d.deptName" :value="d.deptId" />
               </el-select>
             </el-form-item>
@@ -196,7 +196,7 @@
           <el-col :span="12">
             <el-form-item label="队室/班组" prop="teamId" :rules="rules.teamId">
               <el-select v-model="form.teamId" placeholder="请选择队室/班组" style="width:100%" clearable filterable
-                :disabled="form.org < 2" @change="handleTeamChange">
+                 @change="handleDepartmentChange">
                 <el-option v-for="t in teamOptions" :key="t.id" :label="t.label" :value="t.id" />
               </el-select>
             </el-form-item>
@@ -204,7 +204,7 @@
           <el-col :span="12">
             <el-form-item label="通道/小组" prop="groupId" :rules="rules.groupId">
               <el-select v-model="form.groupId" placeholder="请选择通道/小组" style="width:100%" clearable filterable
-                :disabled="form.org < 3" @change="handleGroupChange">
+                @change="handleGroupChange">
                 <el-option v-for="g in groupOptions" :key="g.id" :label="g.label" :value="g.id" />
               </el-select>
             </el-form-item>
@@ -212,7 +212,7 @@
           <el-col :span="12">
             <el-form-item label="责任人" prop="personId" :rules="rules.personId">
               <el-select v-model="form.personId" placeholder="请选择责任人" style="width:100%" clearable filterable
-                :disabled="form.org < 4">
+                 @change="handlePersonChange">
                 <el-option v-for="p in personOptions" :key="p.userId" :label="p.nickName" :value="p.userId" />
               </el-select>
             </el-form-item>
@@ -250,7 +250,7 @@
 <script setup>
 import { ref, reactive, computed, onMounted, getCurrentInstance } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { listUser } from '@/api/system/user'
+import { listUser, getDeptOrgInfo, getUserOrgInfo } from '@/api/system/user'
 import {
   listScoreEvent, addScoreEvent, updateScoreEvent, delScoreEvent,
   exportScoreEvent, importScoreEvent
@@ -289,13 +289,12 @@ const rules = computed(() => {
   return {
     org: [{ required: true, message: '请选择配分层级', trigger: 'submit' }],
     dimensionId: [{ required: true, message: '请选择维度', trigger: 'submit' }],
-    personName: [{ required: true, message: '请输入责任人', trigger: 'submit' }],
     eventTime: [{ required: true, message: '请选择事件时间', trigger: 'submit' }],
     scoreValue: [{ required: true, message: '请输入分值', trigger: 'submit' }],
-    deptId: ['1', '2', '3', '4'].includes(form.org) ? [{ required: true, message: '请选择部门', trigger: 'submit' }] : [],
-    teamId: ['2', '3', '4'].includes(form.org) ? [{ required: true, message: '请选择队室/班组', trigger: 'submit' }] : [],
-    groupId: ['3', '4'].includes(form.org) ? [{ required: true, message: '请选择通道/小组', trigger: 'submit' }] : [],
-    personId: ['4'].includes(form.org) ? [{ required: true, message: '请选择责任人', trigger: 'submit' }] : [],
+    deptId: form.org === '1' ? [{ required: true, message: '请选择部门', trigger: 'submit' }] : [],
+    teamId: form.org === '2' ? [{ required: true, message: '请选择队室/班组', trigger: 'submit' }] : [],
+    groupId: form.org === '3' ? [{ required: true, message: '请选择通道/小组', trigger: 'submit' }] : [],
+    personId: form.org === '4' ? [{ required: true, message: '请选择责任人', trigger: 'submit' }] : [],
   }
 })
 
@@ -321,56 +320,73 @@ async function handleFormLevelChange() {
   indicatorTree.value = []
   level2Options.value = []; level3Options.value = []; level4Options.value = []
   teamOptions.value = []; groupOptions.value = []; personOptions.value = []
-  const r = await getDimensionAll({ pageNum: 1, pageSize: 100, org: form.org })
+
+  const org = form.org
+  // if (org === '2') {
+  await loadAllTeams()
+  // } else if (org === '3') {
+  await loadAllGroups()
+  // } else if (org === '4') {
+  await loadAllPersons()
+  // }
+
+  const r = await getDimensionAll({ pageNum: 1, pageSize: 100, org })
   dimensionOptions.value = r.data || []
 }
 
+async function loadAllTeams() {
+  const r = await listDept({ deptType: 'MANAGER' })
+  teamOptions.value = (r.data || []).map(d => ({ id: d.deptId, label: d.deptName }))
+}
+
 async function loadDepts() {
   const r = await listDept()
   deptOptions.value = (r.data || []).filter(d => d.deptType === 'BRIGADE')
 }
 
-async function handleDeptChange(deptId, preserve) {
-  if (!preserve) {
-    form.teamId = null; form.groupId = null; form.personId = null
-    groupOptions.value = []; personOptions.value = []
-  }
-  if (deptId) {
-    const r = await deptTreeSelect({ parentId: deptId })
-    teamOptions.value = r.data || []
-    if (preserve && form.teamId) {
-      await handleTeamChange(form.teamId, true)
+async function loadAllGroups() {
+  const r = await listDept({ deptType: 'TEAMS' })
+  groupOptions.value = (r.data || []).map(d => ({ id: d.deptId, label: d.deptName }))
+}
+
+async function loadAllPersons() {
+  const r = await listUser({ pageSize: 9999 })
+  personOptions.value = r.rows || []
+}
+
+function handleBrigadeChange() {
+}
+
+async function handleDepartmentChange(val) {
+  form.deptId = null
+  if (val) {
+    const r = await getDeptOrgInfo({ deptId: val })
+    if (r.data) {
+      form.deptId = r.data.brigadeId
     }
-  } else {
-    teamOptions.value = []
   }
 }
 
-async function handleTeamChange(val, preserve) {
-  if (!preserve) {
-    form.groupId = null; form.personId = null
-    personOptions.value = []
-  }
-  const team = teamOptions.value.find(t => t.id === val)
-  if (team) {
-    const r = await deptTreeSelect({ parentId: team.id })
-    groupOptions.value = r.data || []
-    if (preserve && form.groupId) {
-      await handleGroupChange(form.groupId, true)
+async function handleGroupChange(val) {
+  form.deptId = null; form.teamId = null
+  if (val) {
+    const r = await getDeptOrgInfo({ deptId: val })
+    if (r.data) {
+      form.deptId = r.data.brigadeId
+      form.teamId = r.data.departmentId
     }
-  } else {
-    groupOptions.value = []
   }
 }
 
-async function handleGroupChange(val, preserve) {
-  if (!preserve) form.personId = null
-  const group = groupOptions.value.find(g => g.id === val)
-  if (group) {
-    const r = await listUser({ deptId: group.id })
-    personOptions.value = r.rows || []
-  } else {
-    personOptions.value = []
+async function handlePersonChange(val) {
+  form.deptId = null; form.teamId = null; form.groupId = null
+  if (val) {
+    const r = await getUserOrgInfo({ userId: val })
+    if (r.data) {
+      form.deptId = r.data.deptInfo.brigadeId
+      form.teamId = r.data.deptInfo.departmentId
+      form.groupId = r.data.deptInfo.teamId
+    }
   }
 }
 
@@ -440,14 +456,30 @@ function handleUpdate(row) {
   const record = row?.id ? row : list.value.find(r => r.id === ids.value[0])
   if (record) {
     Object.assign(form, record)
+    const org = String(record.org)
+    form.org = org
+    if (org === '1') {
+      form.deptId = record.deptId || null
+    } else if (org === '2') {
+      loadAllTeams().then(() => {
+        form.teamId = record.teamId || null
+        if (form.teamId) handleDepartmentChange(form.teamId)
+      })
+    } else if (org === '3') {
+      loadAllGroups().then(() => {
+        form.groupId = record.groupId || null
+        if (form.groupId) handleGroupChange(form.groupId)
+      })
+    } else if (org === '4') {
+      loadAllPersons().then(() => {
+        form.personId = record.personId || null
+        if (form.personId) handlePersonChange(form.personId)
+      })
+    }
     if (record.dimensionId) onDimensionChange(record.dimensionId, true)
     if (record.level2Id) onLevel2Change(record.level2Id, true)
     if (record.level3Id) onLevel3Change(record.level3Id, true)
     if (record.level4Id) onLevel4Change(record.level4Id, true)
-    if (record.deptId) handleDeptChange(record.deptId, true)
-    if (record.teamId) handleTeamChange(record.teamId, true)
-    if (record.groupId) handleGroupChange(record.groupId, true)
-
   }
   dialogTitle.value = '修改配分事项'; dialogVisible.value = true
 }

src/views/system/dept/index.vue

@@ -311,4 +311,11 @@ function handleDelete(row) {
 }
 
 getList()
+onMounted(() => {
+    listDept().then(response => {
+    const data = { deptId: 0, deptName: '顶级节点', children: [] }
+    data.children = proxy.handleTree(response.data, "deptId")
+    deptOptions.value.push(data)
+  })
+})
 </script>

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

@@ -90,6 +90,18 @@
               </el-select>
             </el-form-item>
           </el-col>
+          <el-col :span="12">
+            <el-form-item label="标签" prop="tags">
+              <div class="tag-input-wrap">
+                <el-tag v-for="tag in tagsArray" :key="tag" closable :disable-transitions="false" @close="handleClose(tag)">
+                  {{ tag }}
+                </el-tag>
+                <el-input v-if="inputVisible" ref="tagInputRef" v-model="inputValue" size="small" style="width: 100px"
+                  @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
+                <el-button v-else size="small" @click="showInput">+ 新增标签</el-button>
+              </div>
+            </el-form-item>
+          </el-col>
         </el-row>
       </el-card>
       <el-card header="状态管理信息" style="margin-bottom: 10px;">
@@ -426,6 +438,42 @@ defineProps({
 const userRef = ref(null)
 const form = defineModel('form', ref({}))
 
+const tagsArray = ref([])
+const inputVisible = ref(false)
+const inputValue = ref('')
+const tagInputRef = ref(null)
+
+watch(() => form.value.tags, (val) => {
+  if (val) {
+    tagsArray.value = val.split(',').filter(t => t.trim())
+  } else {
+    tagsArray.value = []
+  }
+}, { immediate: true })
+
+watch(tagsArray, (arr) => {
+  form.value.tags = arr.join(',')
+}, { deep: true })
+
+const handleClose = (tag) => {
+  tagsArray.value = tagsArray.value.filter(t => t !== tag)
+}
+
+const showInput = () => {
+  inputVisible.value = true
+  nextTick(() => {
+    tagInputRef.value?.focus()
+  })
+}
+
+const handleInputConfirm = () => {
+  if (inputValue.value) {
+    tagsArray.value = [...tagsArray.value, inputValue.value]
+  }
+  inputVisible.value = false
+  inputValue.value = ''
+}
+
 // 政治面貌、资质等级、紧急联系人关系、生肖、星座、血型、是否通过政审、学历、性格特征、工作风格、团队配合、关键词、能力表现、人际互动、成长潜力
 const {
   sys_user_political_status,
@@ -541,5 +589,13 @@ defineExpose({
       color: #000;
     }
   }
+
+  .tag-input-wrap {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    align-items: center;
+    width: 100%;
+  }
 }
 </style>

src/views/warningPage/index.vue

@@ -0,0 +1,837 @@
+<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-popover trigger="click" placement="bottom" :width="480" ref="treePopoverRef">
+                    <template #reference>
+                        <el-input v-model="selectedOrgLabel" placeholder="组织架构/员工" clearable style="width: 480px;"
+                            @clear="handleTreeClear" />
+                    </template>
+                    <el-tree
+                        :data="cascadeOptions"
+                        :props="treeProps"
+                        node-key="value"
+                        highlight-current
+                        :current-node-key="selectedOrg"
+                        @node-click="handleTreeNodeClick"
+                    />
+                </el-popover>
+            </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>
+
+            </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.overallScore)">
+                                <td>{{ emp.userId }}</td>
+                                <td><strong>{{ emp.nickName }}</strong></td>
+                                <td>{{ emp.deptName }}</td>
+                                <td>
+                                    <span v-if="emp.overallScore < 75" class="score-danger">{{ emp.overallScore }}
+                                        分</span>
+                                    <span v-else-if="emp.overallScore >= 90" class="score-excellent">{{ emp.overallScore
+                                        }}
+                                        分</span>
+                                    <span v-else style="font-weight:600;">{{ emp.overallScore }} 分</span>
+                                </td>
+                                <td>
+                                    <span v-if="emp.overallScore < 75" class="status-badge"
+                                        style="animation: subtlePulse 1s infinite;"><i
+                                            class="fas fa-exclamation-triangle"></i> 红色预警</span>
+                                    <span v-else-if="emp.overallScore >= 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.coreRisksOrOutstandingAchievements }}</td>
+                                <td>
+                                    <span v-if="emp.overallScore < 75" style="color:#b91c1c;"><i
+                                            class="fas fa-bell"></i>
+                                        {{ getAlertLabel(emp.statusLabel) }}</span>
+                                    <span v-else-if="emp.overallScore >= 90" style="color:#15803d;"><i
+                                            class="fas fa-crown"></i> {{ getAlertLabel(emp.statusLabel) }}</span>
+                                    <span v-else>{{ getAlertLabel(emp.statusLabel) }}</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 { 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 selectedOrgLabel = ref('')
+const treePopoverRef = ref(null)
+const treeProps = { label: 'label', children: 'children' }
+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 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],
+        overallScore: scores[i % scores.length],
+        coreRisksOrOutstandingAchievements: coreRisksOrOutstandingAchievementsList[i % coreRisksOrOutstandingAchievementsList.length]
+    })
+}
+
+// 将组织架构数据转换为树形数据
+const transformCascadeData = (nodes) => {
+    if (!nodes) return []
+    return nodes.map(node => {
+        const label = node.nickName || node.deptName || node.name || node.label
+        const deptType = node.deptType || node.nodeType
+    //    console.log(node,"node")
+    //     let value
+    //     if (deptType === 'BRIGADE') {
+    //         value = String(node.deptId)
+    //     } else if (deptType === 'MANAGER') {
+    //         value = String(node.teamId)
+    //     } else if (deptType === 'TEAMS') {
+    //         value = String(node.groupId)
+    //     } else {
+    //         value = String(node.userId ?? node.id ?? node.deptId ?? '')
+    //     }
+
+        const children = node.children && node.children.length > 0 ? transformCascadeData(node.children) : undefined
+
+        return {
+            label,
+            value:node.id,
+            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 handleTreeNodeClick = (data) => {
+    selectedOrg.value = data.value
+    selectedOrgLabel.value = data.label
+    treePopoverRef.value?.hide()
+    fetchWarningData()
+}
+
+const handleTreeClear = () => {
+    selectedOrg.value = ''
+    selectedOrgLabel.value = ''
+    fetchWarningData()
+}
+
+const findNodeLabelByValue = (nodes, value) => {
+    if (!nodes) return ''
+    for (const node of nodes) {
+        if (node.value === value) return node.label
+        if (node.children) {
+            const found = findNodeLabelByValue(node.children, value)
+            if (found) return found
+        }
+    }
+    return ''
+}
+
+const filteredEmployees = 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 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 = (score) => {
+    if (score < 75) return "employee-warning-row"
+    if (score >= 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 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 () => {
+    
+    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) {
+        if (selectedInfo.deptType === 'BRIGADE') params.deptId = selectedInfo.value
+        else if (selectedInfo.deptType === 'MANAGER') params.teamId = selectedInfo.value
+        else if (selectedInfo.deptType === 'TEAMS') params.groupId = selectedInfo.value
+        else if (selectedInfo.deptType === 'user') params.userId = selectedInfo.value
+    }
+
+    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)
+        }
+    } catch (error) {
+        console.error('获取组织架构数据失败:', error)
+    }
+    fetchWarningData()
+})
+
+watch(startDate, () => {
+    fetchWarningData()
+})
+watch(endDate, () => {
+    fetchWarningData()
+})
+watch(activeRange, () => {
+    fetchWarningData()
+})
+
+watch(cascadeOptions, (val) => {
+    if (val.length && selectedOrg.value) {
+        selectedOrgLabel.value = findNodeLabelByValue(val, selectedOrg.value)
+    }
+})
+
+// 监听路由参数变化，回显到级联选择器
+watch(() => route.query, (query) => {
+    const { id } = query
+    if (id) {
+        selectedOrg.value = id
+        selectedOrgLabel.value = findNodeLabelByValue(cascadeOptions.value, id)
+    } else {
+        selectedOrg.value = ''
+        selectedOrgLabel.value = ''
+    }
+    fetchWarningData()
+}, { 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>