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

feat: 初始化员工缺勤分析系统项目

Browse Source 
搭建完整的前后端分离架构，实现数据概览、预测分析、聚类分析等核心功能模块

  详细版：
  feat: 初始化员工缺勤分析系统项目

  - 后端：基于 Flask 搭建 RESTful API，包含数据概览、特征分析、预测模型、聚类分析四大模块
  - 前端：基于 Vue.js 构建单页应用，实现 Dashboard、预测、聚类、因子分析等页面
  - 模型：集成随机森林、XGBoost、LightGBM、Stacking 等多种机器学习模型
  - 文档：完成需求规格说明、系统架构设计、接口设计、数据设计、UI原型设计等文档
This commit is contained in:
shenjianZ
2026-03-08 14:48:26 +08:00
commit a39d8b2fd2
48 changed files with 9546 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

787
docs/04_UI原型设计.md Normal file
View File

@@ -0,0 +1,787 @@
# UI原型设计文档
## 基于多维特征挖掘的员工缺勤分析与预测系统
**文档版本**：V1.0
**编写日期**：2026年3月
**编写人**：张硕
---
## 1. 设计原则
### 1.1 视觉风格
| 设计要素 | 设计规范 |
|----------|----------|
| 主色调 | Element Plus默认蓝色 (#409EFF) |
| 辅助色 | 成功绿(#67C23A)、警告黄(#E6A23C)、危险红(#F56C6C) |
| 背景色 | 浅灰色 (#F5F7FA) |
| 字体 | 系统默认字体（中文：微软雅黑/PingFang SC） |
| 字号 | 标题16px、正文14px、辅助文字12px |
| 圆角 | 4px |
| 阴影 | 轻微阴影增加层次感 |
### 1.2 交互原则
| 原则 | 说明 |
|------|------|
| 一致性 | 相同功能使用相同的交互方式 |
| 反馈性 | 操作后给予明确的视觉反馈 |
| 容错性 | 提供撤销操作和错误提示 |
| 易学性 | 界面简洁直观，降低学习成本 |
| 高效性 | 减少操作步骤，提高工作效率 |
### 1.3 响应式设计
| 屏幕尺寸 | 适配方案 |
|----------|----------|
| ≥1920px | 大屏显示，图表放大 |
| 1366-1920px | 标准显示，默认布局 |
| <1366px | 紧凑布局，图表自适应 |
---
## 2. 整体布局
### 2.1 页面框架
```
┌─────────────────────────────────────────────────────────────────┐
│ Header (顶部导航栏) │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ Logo │ 数据概览 │ 影响因素 │ 缺勤预测 │ 员工画像 │ │
│ └───────────────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────────────────┤
│ │
│ │
│ Main Content │
│ (主内容区域) │
│ │
│ │
├─────────────────────────────────────────────────────────────────┤
│ Footer (底部信息栏 - 可选) │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ © 2026 基于多维特征挖掘的员工缺勤分析与预测系统 │ │
│ └───────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
```
### 2.2 导航设计
**顶部导航菜单**：
| 菜单项 | 图标 | 路由 | 说明 |
|--------|------|------|------|
| 数据概览 | 📊 | /dashboard | 首页，展示整体统计 |
| 影响因素 | 🔍 | /analysis | 特征重要性分析 |
| 缺勤预测 | 🎯 | /prediction | 预测功能入口 |
| 员工画像 | 👥 | /clustering | 聚类分析结果 |
---
## 3. 页面一：数据概览 (Dashboard)
### 3.1 页面布局
```
┌─────────────────────────────────────────────────────────────────┐
│ 数据概览 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ KPI卡片1 │ │ KPI卡片2 │ │ KPI卡片3 │ │ KPI卡片4 │ │
│ │ 总记录数 │ │ 员工总数 │ │平均缺勤 │ │高风险占比│ │
│ │ 740 │ │ 36 │ │ 6.9h │ │ 15% │ │
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
│ │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────┐ ┌─────────────────────────┐ │
│ │ │ │ │ │
│ │ 月度缺勤趋势折线图 │ │ 星期分布柱状图 │ │
│ │ │ │ │ │
│ │ (ECharts Line Chart) │ │ (ECharts Bar Chart) │ │
│ │ │ │ │ │
│ └─────────────────────────┘ └─────────────────────────┘ │
│ │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────┐ ┌─────────────────────────┐ │
│ │ │ │ │ │
│ │ 缺勤原因分布饼图 │ │ 季节分布饼图 │ │
│ │ │ │ │ │
│ │ (ECharts Pie Chart) │ │ (ECharts Pie Chart) │ │
│ │ │ │ │ │
│ └─────────────────────────┘ └─────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
```
### 3.2 组件说明
#### 3.2.1 KPI卡片组件
```
┌─────────────────────────────────────┐
│ ┌───────┐ │
│ │ 图标 │ 总记录数 │
│ │ 📊 │ │
│ └───────┘ │
│ │
│ 740 │
│ 条 │
│ │
│ 较上月 ↑ 5% │
└─────────────────────────────────────┘
```
**组件属性**：
| 属性 | 类型 | 说明 |
|------|------|------|
| title | string | 指标名称 |
| value | number/string | 指标值 |
| unit | string | 单位 |
| icon | string | 图标 |
| trend | string | 趋势（可选） |
| trendType | string | 趋势类型（up/down） |
#### 3.2.2 月度趋势折线图
**ECharts配置要点**：
```javascript
{
title: { text: '月度缺勤趋势' },
xAxis: {
type: 'category',
data: ['1月', '2月', ..., '12月']
},
yAxis: {
type: 'value',
name: '缺勤时长(小时)'
},
series: [{
type: 'line',
smooth: true,
data: [80, 65, 90, ...]
}],
tooltip: {
trigger: 'axis'
}
}
```
#### 3.2.3 缺勤原因饼图
**ECharts配置要点**：
```javascript
{
title: { text: '缺勤原因分布' },
series: [{
type: 'pie',
radius: ['40%', '70%'], // 环形图
data: [
{ value: 149, name: '医疗咨询' },
{ value: 112, name: '牙科咨询' },
// ...
]
}],
legend: {
orient: 'vertical',
right: 10
}
}
```
### 3.3 交互流程
1. 用户进入页面，自动加载统计数据
2. KPI卡片依次显示（可添加动画效果）
3. 图表异步加载，显示加载动画
4. 图表支持鼠标悬停查看详情
5. 点击图表某区域可钻取详情（可选）
---
## 4. 页面二：影响因素分析 (FactorAnalysis)
### 4.1 页面布局
```
┌─────────────────────────────────────────────────────────────────┐
│ 影响因素分析 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 特征重要性排序条形图 │ │
│ │ (水平柱状图，降序排列) │ │
│ │ │ │
│ │ 通勤距离 ████████████████████████ 0.35 │ │
│ │ 交通费用 ███████████████████ 0.28 │ │
│ │ 工龄 ██████████████ 0.21 │ │
│ │ 年龄 ████████████ 0.18 │ │
│ │ 工作负荷 ████████ 0.12 │ │
│ │ ... │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────┐ ┌─────────────────────────┐ │
│ │ │ │ │ │
│ │ 相关性热力图 │ │ 群体对比分析 │ │
│ │ │ │ │ │
│ │ (Heatmap) │ │ ┌───────────────────┐ │ │
│ │ │ │ │ 对比维度: [下拉框] │ │ │
│ │ 显示特征间相关系数 │ │ └───────────────────┘ │ │
│ │ │ │ │ │
│ │ │ │ (分组柱状图) │ │
│ └─────────────────────────┘ └─────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
```
### 4.2 组件说明
#### 4.2.1 特征重要性条形图
```
特征重要性排序
┌────────────────────────────────────────────────────────┐
│ │
│ Reason for absence ████████████████████████████ │ 0.35
│ Transportation exp ████████████████████ │ 0.28
│ Distance █████████████████ │ 0.24
│ Service time ██████████████ │ 0.21
│ Age ████████████ │ 0.18
│ Work load ██████████ │ 0.15
│ BMI ████████ │ 0.12
│ Social drinker ██████ │ 0.09
│ Hit target ████ │ 0.06
│ Son ███ │ 0.05
│ Pet ██ │ 0.03
│ Education ██ │ 0.03
│ Social smoker █ │ 0.01
│ │
└────────────────────────────────────────────────────────┘
```
**ECharts配置要点**：
```javascript
{
title: { text: '特征重要性排序' },
grid: { left: '20%' }, // 留出标签空间
xAxis: {
type: 'value',
name: '重要性得分'
},
yAxis: {
type: 'category',
data: ['Reason for absence', 'Transportation', ...]
},
series: [{
type: 'bar',
data: [0.35, 0.28, ...],
itemStyle: {
color: '#409EFF'
}
}]
}
```
#### 4.2.2 相关性热力图
```
┌─────────────────────────────────────────────────────────┐
│ 相关性热力图 │
│ │
│ Age SrvT Dist Load BMI AbsH │
│ ┌─────────────────────────────────────┐ │
│ Age │ 1.0 0.67 0.12 0.08 0.15 0.05 │ │
│ │ ■■■ ■■□ □□□ □□□ □□□ □□□ │ │
│ SrvT │ 0.67 1.0 0.10 0.05 0.12 0.08 │ │
│ │ ■■□ ■■■ □□□ □□□ □□□ □□□ │ │
│ Dist │ 0.12 0.10 1.0 0.03 0.05 0.18 │ │
│ │ □□□ □□□ ■■■ □□□ □□□ □□□ │ │
│ ... │ ... │ │
│ └─────────────────────────────────────┘ │
│ │
│ 图例: -1 (蓝色) ←→ 0 (白色) ←→ +1 (红色) │
└─────────────────────────────────────────────────────────┘
```
**ECharts配置要点**：
```javascript
{
title: { text: '相关性热力图' },
tooltip: {
formatter: function(params) {
return `${params.name}: ${params.value[2].toFixed(2)}`;
}
},
xAxis: { type: 'category', data: featureNames },
yAxis: { type: 'category', data: featureNames },
visualMap: {
min: -1,
max: 1,
calculable: true,
inRange: {
color: ['#313695', '#ffffff', '#a50026']
}
},
series: [{
type: 'heatmap',
data: correlationData
}]
}
```
#### 4.2.3 群体对比选择器
```
┌───────────────────────────────────────────────────────────┐
│ 群体对比分析 │
│ │
│ 选择对比维度: [ 饮酒习惯 ▼ ] │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 平均缺勤时长（小时） │ │
│ │ │ │
│ │ 不饮酒 ████████████████ 1.2h │ │
│ │ 饮酒 ██████████████████████████ 2.1h │ │
│ │ │ │
│ │ 差异: 饮酒者比不饮酒者高 75% │ │
│ │ │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
└───────────────────────────────────────────────────────────┘
```
**对比维度选项**：
| 选项 | 分组 |
|------|------|
| 饮酒习惯 | 饮酒 / 不饮酒 |
| 吸烟习惯 | 吸烟 / 不吸烟 |
| 学历 | 高中 / 本科 / 研究生+ |
| 子女 | 有子女 / 无子女 |
| 宠物 | 有宠物 / 无宠物 |
### 4.3 交互流程
1. 页面加载时自动获取特征重要性数据
2. 渲染特征重要性条形图
3. 并行加载相关性矩阵，渲染热力图
4. 用户选择对比维度后，更新群体对比图
5. 所有图表支持鼠标悬停查看详情
---
## 5. 页面三：缺勤预测 (Prediction)
### 5.1 页面布局
```
┌─────────────────────────────────────────────────────────────────┐
│ 缺勤预测 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌───────────────────────────┐ ┌───────────────────────────┐ │
│ │ │ │ │ │
│ │ 参数输入表单 │ │ 预测结果展示 │ │
│ │ │ │ │ │
│ │ 缺勤原因: [下拉选择] │ │ ┌───────────────────┐ │ │
│ │ 缺勤月份: [下拉选择] │ │ │ │ │ │
│ │ 星期几: [下拉选择] │ │ │ 预测结果 │ │ │
│ │ 季节: [下拉选择] │ │ │ │ │ │
│ │ │ │ │ 5.2 小时 │ │ │
│ │ 交通费用: [输入框] │ │ │ │ │ │
│ │ 通勤距离: [输入框] │ │ │ ● 中风险 │ │ │
│ │ 工龄: [输入框] │ │ │ │ │ │
│ │ 年龄: [输入框] │ │ └───────────────────┘ │ │
│ │ │ │ │ │
│ │ 日均工作负荷: [输入框] │ │ ┌───────────────────┐ │ │
│ │ 达标率: [输入框] │ │ │ 模型信息 │ │ │
│ │ 违纪记录: [是/否] │ │ │ R²: 0.82 │ │ │
│ │ 学历: [下拉选择] │ │ │ MSE: 15.5 │ │ │
│ │ 子女数量: [输入框] │ │ │ 置信度: 85% │ │ │
│ │ 饮酒习惯: [是/否] │ │ └───────────────────┘ │ │
│ │ 吸烟习惯: [是/否] │ │ │ │
│ │ 宠物数量: [输入框] │ │ │ │
│ │ BMI指数: [输入框] │ │ │ │
│ │ │ │ │ │
│ │ [ 开始预测 ] │ │ │ │
│ │ │ │ │ │
│ └───────────────────────────┘ └───────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
```
### 5.2 组件说明
#### 5.2.1 参数输入表单
**表单字段设计**：
| 字段 | 组件类型 | 选项/范围 | 默认值 |
|------|----------|-----------|--------|
| 缺勤原因 | el-select | 0-28 | 23 |
| 缺勤月份 | el-select | 1-12 | 当前月 |
| 星期几 | el-select | 周一-周五 | 周一 |
| 季节 | el-select | 夏秋冬春 | 当前季节 |
| 交通费用 | el-input-number | 100-400 | 200 |
| 通勤距离 | el-input-number | 1-60 | 20 |
| 工龄 | el-input-number | 1-30 | 5 |
| 年龄 | el-input-number | 18-60 | 30 |
| 日均工作负荷 | el-input-number | 200-350 | 250 |
| 达标率 | el-input-number | 80-100 | 95 |
| 违纪记录 | el-radio-group | 是/否 | 否 |
| 学历 | el-select | 高中/本科/研究生/博士 | 本科 |
| 子女数量 | el-input-number | 0-5 | 0 |
| 饮酒习惯 | el-radio-group | 是/否 | 否 |
| 吸烟习惯 | el-radio-group | 是/否 | 否 |
| 宠物数量 | el-input-number | 0-10 | 0 |
| BMI指数 | el-input-number | 18-40 | 25 |
**表单验证规则**：
| 字段 | 验证规则 |
|------|----------|
| 缺勤原因 | 必填 |
| 缺勤月份 | 必填，范围1-12 |
| 交通费用 | 必填，范围100-400 |
| 通勤距离 | 必填，范围1-60 |
| 年龄 | 必填，范围18-60 |
| BMI指数 | 必填，范围18-40 |
#### 5.2.2 预测结果卡片
```
┌─────────────────────────────────────┐
│ │
│ 预测结果 │
│ │
│ 5.2 │
│ 小时 │
│ │
│ ┌─────────────────────────────┐ │
│ │ ● 中风险 (黄色) │ │
│ │ 缺勤时长: 4-8小时 │ │
│ └─────────────────────────────┘ │
│ │
│ 模型置信度: 85% │
│ 使用模型: 随机森林 │
│ │
└─────────────────────────────────────┘
```
**风险等级展示**：
| 等级 | 颜色 | 图标 | 说明 |
|------|------|------|------|
| 低风险 | 绿色 (#67C23A) | ✓ | 缺勤时长 < 4小时 |
| 中风险 | 黄色 (#E6A23C) | ⚠ | 缺勤时长 4-8小时 |
| 高风险 | 红色 (#F56C6C) | ✕ | 缺勤时长 > 8小时 |
### 5.3 交互流程
1. 页面加载，显示空表单
2. 用户填写表单字段
3. 点击"开始预测"按钮
4. 前端验证表单数据
5. 发送请求到后端API
6. 显示加载动画
7. 接收预测结果
8. 渲染结果卡片（带动画效果）
---
## 6. 页面四：员工画像 (Clustering)
### 6.1 页面布局
```
┌─────────────────────────────────────────────────────────────────┐
│ 员工画像 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 聚类数量: [ 3 ▼ ] [ 重新聚类 ] │
│ │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 员工群体雷达图 │ │
│ │ │ │
│ │ 年龄 │ │
│ │ ▲ │ │
│ │ /│\ │ │
│ │ / │ \ │ │
│ │ 工龄 ◄──────┼──────► 工作负荷 │ │
│ │ \ │ / │ │
│ │ \ │ / │ │
│ │ \ │ / │ │
│ │ 缺勤倾向 ▼ BMI │ │
│ │ │ │
│ │ 图例: ─── 模范型 ─── 压力型 ─── 生活习惯型 │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────┐ ┌─────────────────────────┐ │
│ │ │ │ │ │
│ │ 聚类结果统计 │ │ 聚类散点图 │ │
│ │ │ │ │ │
│ │ 模范型: 120人 (33%) │ │ ● │ │
│ │ 压力型: 100人 (28%) │ │ ● ● ○ │ │
│ │ 生活习惯型: 140人(39%)│ │ ● ○ ● │ │
│ │ │ │ ○ ● │ │
│ │ 点击查看详细建议... │ │ │ │
│ │ │ │ ● 模范型 ○ 压力型 │ │
│ └─────────────────────────┘ └─────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
```
### 6.2 组件说明
#### 6.2.1 员工群体雷达图
```
年龄
▲
/|\
/ | \
/ | \
/ | \
/ | \
工龄 ◄───────┼───────► 工作负荷
\ | /
\ | /
\ | /
\ | /
\|/
▼
缺勤倾向 BMI
各聚类特征（归一化）:
─────────────────────────────────────────
模范型 (绿色): 0.75 0.90 0.60 0.55 0.20
压力型 (橙色): 0.35 0.20 0.85 0.45 0.70
生活习惯型 (红色): 0.55 0.50 0.65 0.80 0.45
```
**ECharts配置要点**：
```javascript
{
title: { text: '员工群体画像' },
legend: { data: ['模范型', '压力型', '生活习惯型'] },
radar: {
indicator: [
{ name: '年龄', max: 1 },
{ name: '工龄', max: 1 },
{ name: '工作负荷', max: 1 },
{ name: 'BMI', max: 1 },
{ name: '缺勤倾向', max: 1 }
]
},
series: [{
type: 'radar',
data: [
{ value: [0.75, 0.90, 0.60, 0.55, 0.20], name: '模范型' },
{ value: [0.35, 0.20, 0.85, 0.45, 0.70], name: '压力型' },
{ value: [0.55, 0.50, 0.65, 0.80, 0.45], name: '生活习惯型' }
]
}]
}
```
#### 6.2.2 聚类结果统计
```
┌─────────────────────────────────────────────────────────────┐
│ 聚类结果统计 │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 模范型员工 120人 (33.3%) │ │
│ │ ████████████████████████████████ │ │
│ │ 特点: 工龄长、工作稳定、缺勤率低 │ │
│ │ 建议: 保持现有管理方式，可作为榜样员工 │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 压力型员工 100人 (27.8%) │ │
│ │ ████████████████████████ │ │
│ │ 特点: 年轻、工龄短、工作负荷大、缺勤较多 │ │
│ │ 建议: 关注工作压力，适当减少加班 │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 生活习惯型员工 140人 (38.9%) │ │
│ │ ████████████████████████████████████ │ │
│ │ 特点: BMI偏高、有饮酒习惯、中等缺勤率 │ │
│ │ 建议: 关注员工健康，组织体检和健康活动 │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
```
#### 6.2.3 聚类散点图
```
┌─────────────────────────────────────────────────────────────┐
│ 聚类散点图 │
│ │
│ 缺勤 │
│ 时长 │
│ ▲ │
│ 40 │ ○ │
│ │ ○ ○ │
│ 30 │ ○ ○ │
│ │ ○ ● ○ ○ │
│ 20 │ ● ● ○ ○ │
│ │ ● ● ● ○ ○ │
│ 10 │● ● ○ ○ ○ │
│ │● ● ○ ○ ○ │
│ 0 │● ● ○ ○ ○ │
│ └─────────────────────────────────────────────────────► │
│ 20 30 40 50 60 年龄 │
│ │
│ ● 模范型 ○ 压力型 ◐ 生活习惯型 │
└─────────────────────────────────────────────────────────────┘
```
### 6.3 交互流程
1. 页面加载，默认使用3个聚类
2. 渲染雷达图和散点图
3. 用户可调整聚类数量（2-5）
4. 点击"重新聚类"按钮更新结果
5. 点击某个聚类可查看详细信息和建议
6. 散点图支持鼠标悬停查看员工详情
---
## 7. 公共组件
### 7.1 ChartComponent.vue
**用途**：封装ECharts图表，统一管理图表生命周期
**Props**：
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| option | Object | {} | ECharts配置项 |
| loading | Boolean | false | 是否加载中 |
| height | String | '400px' | 图表高度 |
| width | String | '100%' | 图表宽度 |
**使用示例**：
```vue
<ChartComponent
:option="chartOption"
:loading="loading"
height="300px"
/>
```
### 7.2 ResultCard.vue
**用途**：展示预测结果
**Props**：
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| predictedHours | Number | 0 | 预测时长 |
| riskLevel | String | 'low' | 风险等级 |
| confidence | Number | 0 | 置信度 |
### 7.3 KPICard.vue
**用途**：展示KPI指标卡片
**Props**：
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| title | String | '' | 指标名称 |
| value | String/Number | '' | 指标值 |
| unit | String | '' | 单位 |
| icon | String | '' | 图标类名 |
| color | String | '#409EFF' | 主题色 |
### 7.4 LoadingSpinner.vue
**用途**：加载动画组件
**Props**：
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| text | String | '加载中...' | 提示文字 |
---
## 8. 配色方案
### 8.1 主色调
| 用途 | 颜色值 | 说明 |
|------|--------|------|
| 主色 | #409EFF | Element Plus主色 |
| 成功 | #67C23A | 低风险、正向指标 |
| 警告 | #E6A23C | 中风险、需关注 |
| 危险 | #F56C6C | 高风险、异常 |
| 信息 | #909399 | 辅助信息 |
### 8.2 图表配色
```javascript
const chartColors = [
'#5470c6', // 蓝色
'#91cc75', // 绿色
'#fac858', // 黄色
'#ee6666', // 红色
'#73c0de', // 浅蓝
'#3ba272', // 深绿
'#fc8452', // 橙色
'#9a60b4', // 紫色
'#ea7ccc' // 粉色
];
```
---
## 9. 附录
### 9.1 页面清单
| 页面 | 路由 | 主要图表 | 主要交互 |
|------|------|----------|----------|
| 数据概览 | /dashboard | 折线图、饼图、柱状图 | 图表悬停、钻取 |
| 影响因素 | /analysis | 条形图、热力图 | 维度切换 |
| 缺勤预测 | /prediction | - | 表单提交 |
| 员工画像 | /clustering | 雷达图、散点图 | 聚类数调整 |
### 9.2 文档修改历史
| 版本 | 日期 | 修改人 | 修改内容 |
|------|------|--------|----------|
| V1.0 | 2026-03 | 张硕 | 初始版本 |
---
**文档结束**