aisi-tech/forsetsystem
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 将数据集从国外员工缺勤数据替换为中国企业缺勤模拟数据

Browse Source 
- 新增中国企业员工缺勤模拟数据集生成脚本(generate_dataset.py)，覆盖7个行业、180家企业、2600名员工
  - 重构 config.py，更新特征字段为中文名称，调整目标列、员工ID、行业类型等配置
  - 重构 clustering.py，简化聚类逻辑，更新聚类特征和群体命名（高压通勤型、健康波动型等）
  - 重构 feature_mining.py，更新相关性分析和群体比较维度（按行业、班次、婚姻状态等）
  - 新增 model_features.py 定义模型训练特征
  - 更新 preprocessing.py 和 train_model.py 适配新数据结构
  - 更新各 API 路由默认参数（model: random_forest, dimension: industry）
  - 前端更新主题样式和各视图组件适配中文字段
  - 更新系统名称为 China Enterprise Absence Analysis System
This commit is contained in:
shenjianZ
2026-03-11 10:46:58 +08:00
parent a39d8b2fd2
commit e63267cef6
39 changed files with 15731 additions and 5648 deletions
Download Patch File Download Diff File Expand all files Collapse all files

371
frontend/src/App.vue
View File

@@ -1,74 +1,345 @@
<template>
<el-container class="app-container">
<el-header class="app-header">
<div class="logo">员工缺勤分析与预测系统</div>
<el-menu
:default-active="activeMenu"
mode="horizontal"
router
class="nav-menu"
>
<el-menu-item index="/dashboard">数据概览</el-menu-item>
<el-menu-item index="/analysis">影响因素</el-menu-item>
<el-menu-item index="/prediction">缺勤预测</el-menu-item>
<el-menu-item index="/clustering">员工画像</el-menu-item>
</el-menu>
</el-header>
<el-main class="app-main">
<router-view />
</el-main>
</el-container>
<div class="shell" :class="{ 'shell-collapsed': isSidebarCollapsed }">
<aside class="shell-sidebar">
<div class="brand-block">
<div class="brand-mark">HR</div>
<div v-if="!isSidebarCollapsed">
<div class="brand-title">企业缺勤分析台</div>
<div class="brand-subtitle">Human Resource Insight Console</div>
</div>
</div>
<div class="sidebar-panel">
<div v-if="!isSidebarCollapsed" class="sidebar-label">导航</div>
<el-menu :default-active="activeMenu" router class="nav-menu">
<el-menu-item index="/dashboard">
<el-icon class="nav-icon"><Grid /></el-icon>
<span class="nav-label">数据概览</span>
</el-menu-item>
<el-menu-item index="/analysis">
<el-icon class="nav-icon"><DataAnalysis /></el-icon>
<span class="nav-label">影响因素</span>
</el-menu-item>
<el-menu-item index="/prediction">
<el-icon class="nav-icon"><TrendCharts /></el-icon>
<span class="nav-label">缺勤预测</span>
</el-menu-item>
<el-menu-item index="/clustering">
<el-icon class="nav-icon"><UserFilled /></el-icon>
<span class="nav-label">员工画像</span>
</el-menu-item>
</el-menu>
</div>
<div v-if="!isSidebarCollapsed" class="sidebar-note">
<div class="sidebar-label">系统摘要</div>
<p>面向企业管理场景的缺勤趋势、风险预测与群体画像展示。</p>
</div>
</aside>
<main class="shell-main">
<header class="topbar">
<div class="topbar-main">
<el-button class="collapse-btn" circle @click="isSidebarCollapsed = !isSidebarCollapsed">
{{ isSidebarCollapsed ? '>' : '<' }}
</el-button>
<div>
<div class="topbar-title">{{ currentMeta.title || '企业缺勤分析台' }}</div>
<div class="topbar-subtitle">{{ currentMeta.subtitle }}</div>
</div>
</div>
<div class="topbar-badges">
<el-button class="theme-toggle" @click="toggleTheme">
{{ isDarkMode ? '浅色模式' : '深色模式' }}
</el-button>
<span class="topbar-badge">企业健康运营分析</span>
<span class="topbar-badge topbar-badge-accent">可视化决策界面</span>
</div>
</header>
<section class="main-content">
<router-view />
</section>
</main>
</div>
</template>
<script setup>
import { computed } from 'vue'
import { computed, onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { DataAnalysis, Grid, TrendCharts, UserFilled } from '@element-plus/icons-vue'
const route = useRoute()
const activeMenu = computed(() => route.path)
const isSidebarCollapsed = ref(false)
const isDarkMode = ref(false)
const metaMap = {
'/dashboard': {
title: '数据概览',
subtitle: '从企业缺勤事件的总量、时序与结构分布切入，建立整体认知。'
},
'/analysis': {
title: '影响因素',
subtitle: '观察模型最关注的驱动因素，辅助解释缺勤风险的来源。'
},
'/prediction': {
title: '缺勤预测',
subtitle: '围绕最核心的业务信号输入，快速获得缺勤时长与风险等级。'
},
'/clustering': {
title: '员工画像',
subtitle: '通过聚类划分典型群体，为答辩演示提供更直观的人群视角。'
}
}
const currentMeta = computed(() => metaMap[route.path] || { title: '企业缺勤分析台', subtitle: '' })
function applyTheme(isDark) {
const theme = isDark ? 'dark' : 'light'
document.documentElement.setAttribute('data-theme', theme)
localStorage.setItem('ui-theme', theme)
}
function toggleTheme() {
isDarkMode.value = !isDarkMode.value
}
onMounted(() => {
const savedTheme = localStorage.getItem('ui-theme')
isDarkMode.value = savedTheme === 'dark'
applyTheme(isDarkMode.value)
})
watch(isDarkMode, value => {
applyTheme(value)
})
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
background-color: #f5f7fa;
}
.app-container {
<style scoped>
.shell {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
min-height: 100vh;
transition: grid-template-columns 0.28s ease;
}
.app-header {
background-color: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
.shell.shell-collapsed {
grid-template-columns: 96px minmax(0, 1fr);
}
.shell-sidebar {
position: sticky;
top: 0;
display: flex;
flex-direction: column;
gap: 22px;
height: 100vh;
padding: 26px 22px;
background: var(--sidebar-bg);
color: var(--sidebar-text);
transition: padding 0.28s ease;
border-right: 1px solid var(--sidebar-border);
}
.brand-block {
display: flex;
align-items: center;
padding: 0 20px;
height: 60px !important;
gap: 14px;
}
.logo {
font-size: 18px;
font-weight: bold;
color: #409EFF;
margin-right: 40px;
white-space: nowrap;
.brand-mark {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 16px;
background: linear-gradient(135deg, #fef3c7, #fdba74);
color: #7c2d12;
font-weight: 800;
letter-spacing: 0.08em;
}
.brand-title {
font-size: 20px;
font-weight: 700;
color: var(--sidebar-text);
}
.brand-subtitle {
margin-top: 4px;
font-size: 12px;
color: var(--sidebar-text-subtle);
}
.sidebar-panel,
.sidebar-note {
padding: 18px;
border: 1px solid var(--sidebar-border);
border-radius: 22px;
background: var(--sidebar-surface);
backdrop-filter: blur(14px);
}
.sidebar-label {
margin-bottom: 14px;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sidebar-text-subtle);
}
.nav-menu {
border-bottom: none;
flex: 1;
border: none;
background: transparent;
}
.app-main {
padding: 20px;
background-color: #f5f7fa;
min-height: calc(100vh - 60px);
:deep(.nav-menu .el-menu-item) {
height: 48px;
margin-bottom: 8px;
border-radius: 14px;
color: var(--sidebar-text);
background: transparent;
transition: all 0.2s ease;
}
.nav-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
margin-right: 10px;
font-size: 17px;
color: var(--sidebar-text-subtle);
}
.nav-label {
font-size: 14px;
}
:deep(.nav-menu .el-menu-item.is-active) {
color: var(--sidebar-text);
background: var(--sidebar-menu-active);
}
:deep(.nav-menu .el-menu-item:hover) {
color: var(--sidebar-text);
background: var(--sidebar-menu-hover);
}
.sidebar-note p {
margin: 0;
font-size: 13px;
line-height: 1.7;
color: var(--sidebar-text-subtle);
}
.shell-main {
min-width: 0;
padding: 24px;
}
.topbar {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
margin-bottom: 22px;
}
.topbar-main {
display: flex;
align-items: flex-start;
gap: 14px;
}
.collapse-btn {
margin-top: 4px;
border: 1px solid var(--line-soft);
background: rgba(255, 255, 255, 0.82);
color: var(--brand-strong);
}
.topbar-title {
font-size: 30px;
font-weight: 700;
color: var(--text-main);
}
.topbar-subtitle {
margin-top: 8px;
max-width: 760px;
font-size: 14px;
line-height: 1.7;
color: var(--text-subtle);
}
.topbar-badges {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 10px;
}
.theme-toggle {
border: 1px solid var(--line-soft);
background: var(--surface);
color: var(--text-main);
}
.topbar-badge {
padding: 9px 14px;
border: 1px solid var(--line-soft);
border-radius: 999px;
background: var(--surface);
font-size: 12px;
color: var(--brand-strong);
}
.topbar-badge-accent {
color: var(--accent);
}
.main-content {
min-width: 0;
}
.shell-collapsed .shell-sidebar {
padding-left: 14px;
padding-right: 14px;
}
.shell-collapsed .brand-block {
justify-content: center;
}
.shell-collapsed .sidebar-panel {
padding: 14px 10px;
}
.shell-collapsed :deep(.nav-menu .el-menu-item) {
justify-content: center;
padding: 0;
}
.shell-collapsed .nav-icon {
margin-right: 0;
width: 20px;
}
.shell-collapsed .nav-label {
display: none;
}
@media (max-width: 1100px) {
.shell {
grid-template-columns: 1fr;
}
.shell-sidebar {
position: static;
height: auto;
}
}
</style>