Files
forsetsystem/docs/04_UI原型设计.md
shenjianZ a39d8b2fd2 feat: 初始化员工缺勤分析系统项目
搭建完整的前后端分离架构,实现数据概览、预测分析、聚类分析等核心功能模块

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

  - 后端:基于 Flask 搭建 RESTful API,包含数据概览、特征分析、预测模型、聚类分析四大模块
  - 前端:基于 Vue.js 构建单页应用,实现 Dashboard、预测、聚类、因子分析等页面
  - 模型:集成随机森林、XGBoost、LightGBM、Stacking 等多种机器学习模型
  - 文档:完成需求规格说明、系统架构设计、接口设计、数据设计、UI原型设计等文档
2026-03-08 14:48:26 +08:00

39 KiB
Raw Blame History

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配置要点

{
  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配置要点

{
  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配置要点

{
  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配置要点

{
  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配置要点

{
  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%' 图表宽度

使用示例

<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 图表配色

const chartColors = [
  '#5470c6',  // 蓝色
  '#91cc75',  // 绿色
  '#fac858',  // 黄色
  '#ee6666',  // 红色
  '#73c0de',  // 浅蓝
  '#3ba272',  // 深绿
  '#fc8452',  // 橙色
  '#9a60b4',  // 紫色
  '#ea7ccc'   // 粉色
];

9. 附录

9.1 页面清单

页面 路由 主要图表 主要交互
数据概览 /dashboard 折线图、饼图、柱状图 图表悬停、钻取
影响因素 /analysis 条形图、热力图 维度切换
缺勤预测 /prediction - 表单提交
员工画像 /clustering 雷达图、散点图 聚类数调整

9.2 文档修改历史

版本 日期 修改人 修改内容
V1.0 2026-03 张硕 初始版本

文档结束