shenjianZ
a39d8b2fd2
搭建完整的前后端分离架构，实现数据概览、预测分析、聚类分析等核心功能模块 详细版： feat: 初始化员工缺勤分析系统项目 - 后端：基于 Flask 搭建 RESTful API，包含数据概览、特征分析、预测模型、聚类分析四大模块 - 前端：基于 Vue.js 构建单页应用，实现 Dashboard、预测、聚类、因子分析等页面 - 模型：集成随机森林、XGBoost、LightGBM、Stacking 等多种机器学习模型 - 文档：完成需求规格说明、系统架构设计、接口设计、数据设计、UI原型设计等文档
788 lines
39 KiB
Markdown
788 lines
39 KiB
Markdown
# 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 | 张硕 | 初始版本 |
|
||
|
||
---
|
||
|
||
**文档结束**
|