# 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 ``` ### 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 | 张硕 | 初始版本 | --- **文档结束**