730 lines
23 KiB
Vue
730 lines
23 KiB
Vue
|
<template>
|
|||
|
|
<div class="employee-report" v-loading="loading">
|
|||
|
|
<!-- 第一行：时间段筛选 -->
|
|||
|
|
<div class="filter-section">
|
|||
|
|
<el-form :inline="true" class="demo-form-inline">
|
|||
|
|
<el-form-item label="调动时间">
|
|||
|
|
<el-date-picker
|
|||
|
|
v-model="dateRange"
|
|||
|
|
type="datetimerange"
|
|||
|
|
range-separator="至"
|
|||
|
|
start-placeholder="开始日期"
|
|||
|
|
end-placeholder="结束日期"
|
|||
|
|
format="yyyy-MM-dd hh:mm:ss"
|
|||
|
|
value-format="yyyy-MM-dd hh:mm:ss"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="入职时间">
|
|||
|
|
<el-date-picker
|
|||
|
|
v-model="employeeDateRange"
|
|||
|
|
type="datetimerange"
|
|||
|
|
range-separator="至"
|
|||
|
|
start-placeholder="开始日期"
|
|||
|
|
end-placeholder="结束日期"
|
|||
|
|
format="yyyy-MM-dd hh:mm:ss"
|
|||
|
|
value-format="yyyy-MM-dd hh:mm:ss"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-button type="primary" @click="handleQuery">查询</el-button>
|
|||
|
|
<el-button @click="resetQuery">重置</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 第二行：员工情况统计信息和图表 -->
|
|||
|
|
<div class="stats-section">
|
|||
|
|
<div class="stats-cards">
|
|||
|
|
<el-card shadow="hover" class="stat-card">
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="stat-value">{{ stats.totalEmployees }}</div>
|
|||
|
|
<div class="stat-label">总人数</div>
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
<el-card shadow="hover" class="stat-card">
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="stat-value">{{ stats.entryCount }}</div>
|
|||
|
|
<div class="stat-label">入职人数</div>
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
<el-card shadow="hover" class="stat-card">
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="stat-value">{{ stats.leaveCount }}</div>
|
|||
|
|
<div class="stat-label">离职人数</div>
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
<el-card shadow="hover" class="stat-card">
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="stat-value">{{ stats.regularCount }}</div>
|
|||
|
|
<div class="stat-label">转正人数</div>
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
<el-card shadow="hover" class="stat-card">
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="stat-value">{{ stats.transferCount }}</div>
|
|||
|
|
<div class="stat-label">调岗次数</div>
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 第三行：互动筛选图表区 -->
|
|||
|
|
<div class="interactive-charts-section">
|
|||
|
|
<el-card shadow="hover" class="chart-card">
|
|||
|
|
<!-- <div slot="header" class="clearfix">
|
|||
|
|
<span>学历分布</span>
|
|||
|
|
</div> -->
|
|||
|
|
<div id="educationChart" style="width: 100%; height: 300px;"></div>
|
|||
|
|
</el-card>
|
|||
|
|
<el-card shadow="hover" class="chart-card">
|
|||
|
|
<!-- <div slot="header" class="clearfix">
|
|||
|
|
<span>年龄段分布</span>
|
|||
|
|
</div> -->
|
|||
|
|
<div id="ageChart" style="width: 100%; height: 300px;"></div>
|
|||
|
|
</el-card>
|
|||
|
|
<el-card shadow="hover" class="chart-card">
|
|||
|
|
<!-- <div slot="header" class="clearfix">
|
|||
|
|
<span>性别分布</span>
|
|||
|
|
</div> -->
|
|||
|
|
<div id="genderChart" style="width: 100%; height: 300px;"></div>
|
|||
|
|
</el-card>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 第四行：多轴折线图 -->
|
|||
|
|
<div class="trend-section">
|
|||
|
|
<!-- <el-card shadow="hover"> -->
|
|||
|
|
<!-- <div slot="header" class="clearfix">
|
|||
|
|
<span>员工变动趋势</span>
|
|||
|
|
</div> -->
|
|||
|
|
<div id="trendChart" style="width: 100%; height: 400px;"></div>
|
|||
|
|
<!-- </el-card> -->
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 第五行：明细数据表 -->
|
|||
|
|
<div class="details-section">
|
|||
|
|
<el-tabs v-model="activeTab">
|
|||
|
|
<el-tab-pane label="当前员工" name="current">
|
|||
|
|
<el-table :data="currentEmployees" style="width: 100%" height="400">
|
|||
|
|
<el-table-column prop="name" label="员工姓名" />
|
|||
|
|
<el-table-column prop="dept" label="部门" />
|
|||
|
|
<el-table-column prop="jobType" label="职位" />
|
|||
|
|
<el-table-column prop="entryTime" label="入职日期" />
|
|||
|
|
<!-- <el-table-column prop="status" label="状态" /> -->
|
|||
|
|
<el-table-column prop="education" label="学历" />
|
|||
|
|
<el-table-column prop="age" label="年龄" />
|
|||
|
|
<el-table-column prop="gender" label="性别" />
|
|||
|
|
</el-table>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane label="离职记录" name="leave">
|
|||
|
|
<el-table :data="leaveRecords" style="width: 100%" height="400">
|
|||
|
|
<el-table-column prop="wmsEmployeeInfo.name" label="员工姓名" />
|
|||
|
|
<el-table-column prop="wmsEmployeeInfo.dept" label="部门" />
|
|||
|
|
<el-table-column prop="wmsEmployeeInfo.jobType" label="职位" />
|
|||
|
|
<el-table-column prop="changeTime" label="离职日期" />
|
|||
|
|
<el-table-column prop="changeReason" label="离职原因" />
|
|||
|
|
</el-table>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane label="入职记录" name="entry">
|
|||
|
|
<el-table :data="entryRecords" style="width: 100%" height="400">
|
|||
|
|
<el-table-column prop="wmsEmployeeInfo.name" label="员工姓名" />
|
|||
|
|
<el-table-column prop="wmsEmployeeInfo.dept" label="部门" />
|
|||
|
|
<el-table-column prop="wmsEmployeeInfo.jobType" label="职位" />
|
|||
|
|
<el-table-column prop="entryDate" label="入职日期" />
|
|||
|
|
<el-table-column prop="wmsEmployeeInfo.education" label="学历" />
|
|||
|
|
<el-table-column prop="wmsEmployeeInfo.gender" label="性别" />
|
|||
|
|
</el-table>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane label="转正记录" name="regular">
|
|||
|
|
<el-table :data="regularRecords" style="width: 100%" height="400">
|
|||
|
|
<el-table-column prop="wmsEmployeeInfo.name" label="员工姓名" />
|
|||
|
|
<el-table-column prop="wmsEmployeeInfo.dept" label="部门" />
|
|||
|
|
<el-table-column prop="wmsEmployeeInfo.jobType" label="职位" />
|
|||
|
|
<el-table-column prop="regularDate" label="转正日期" />
|
|||
|
|
</el-table>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane label="调岗记录" name="transfer">
|
|||
|
|
<el-table :data="transferRecords" style="width: 100%" height="400">
|
|||
|
|
<el-table-column prop="wmsEmployeeInfo.name" label="员工姓名" />
|
|||
|
|
<el-table-column prop="transferTime" label="调岗日期" />
|
|||
|
|
<el-table-column prop="oldDept" label="原部门" />
|
|||
|
|
<el-table-column prop="oldJobType" label="原职位" />
|
|||
|
|
<el-table-column prop="newDept" label="新部门" />
|
|||
|
|
<el-table-column prop="newJobType" label="新职位" />
|
|||
|
|
</el-table>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
</el-tabs>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import * as echarts from 'echarts'
|
|||
|
|
import { listEmployeeInfo } from '@/api/wms/employeeInfo'
|
|||
|
|
import { listEmployeeChange } from '@/api/wms/employeeChange'
|
|||
|
|
import { listEmployeeTransfer } from '@/api/wms/employeeTransfer'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: 'EmployeeReport',
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
dateRange: this.getMonthRange(), // 默认选中本月
|
|||
|
|
employeeDateRange: ['', ''],
|
|||
|
|
shortcuts: [
|
|||
|
|
{
|
|||
|
|
text: '本月',
|
|||
|
|
value: () => {
|
|||
|
|
return this.getMonthRange()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: '上个月',
|
|||
|
|
value: () => {
|
|||
|
|
const date = new Date()
|
|||
|
|
const firstDay = new Date(date.getFullYear(), date.getMonth() - 1, 1, 0, 0, 0)
|
|||
|
|
const lastDay = new Date(date.getFullYear(), date.getMonth(), 0, 23, 59, 59)
|
|||
|
|
|
|||
|
|
// 格式化日期为yyyy-MM-dd HH:mm:ss格式
|
|||
|
|
const formatDate = (date) => {
|
|||
|
|
const year = date.getFullYear()
|
|||
|
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
|||
|
|
const day = String(date.getDate()).padStart(2, '0')
|
|||
|
|
const hours = String(date.getHours()).padStart(2, '0')
|
|||
|
|
const minutes = String(date.getMinutes()).padStart(2, '0')
|
|||
|
|
const seconds = String(date.getSeconds()).padStart(2, '0')
|
|||
|
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return [formatDate(firstDay), formatDate(lastDay)]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: '近三个月',
|
|||
|
|
value: () => {
|
|||
|
|
const date = new Date()
|
|||
|
|
const lastDay = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59)
|
|||
|
|
const firstDay = new Date(date.getFullYear(), date.getMonth() - 2, 1, 0, 0, 0)
|
|||
|
|
|
|||
|
|
// 格式化日期为yyyy-MM-dd HH:mm:ss格式
|
|||
|
|
const formatDate = (date) => {
|
|||
|
|
const year = date.getFullYear()
|
|||
|
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
|||
|
|
const day = String(date.getDate()).padStart(2, '0')
|
|||
|
|
const hours = String(date.getHours()).padStart(2, '0')
|
|||
|
|
const minutes = String(date.getMinutes()).padStart(2, '0')
|
|||
|
|
const seconds = String(date.getSeconds()).padStart(2, '0')
|
|||
|
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return [formatDate(firstDay), formatDate(lastDay)]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: '本年',
|
|||
|
|
value: () => {
|
|||
|
|
const date = new Date()
|
|||
|
|
const firstDay = new Date(date.getFullYear(), 0, 1, 0, 0, 0)
|
|||
|
|
const lastDay = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59)
|
|||
|
|
|
|||
|
|
// 格式化日期为yyyy-MM-dd HH:mm:ss格式
|
|||
|
|
const formatDate = (date) => {
|
|||
|
|
const year = date.getFullYear()
|
|||
|
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
|||
|
|
const day = String(date.getDate()).padStart(2, '0')
|
|||
|
|
const hours = String(date.getHours()).padStart(2, '0')
|
|||
|
|
const minutes = String(date.getMinutes()).padStart(2, '0')
|
|||
|
|
const seconds = String(date.getSeconds()).padStart(2, '0')
|
|||
|
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return [formatDate(firstDay), formatDate(lastDay)]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
stats: {
|
|||
|
|
totalEmployees: 0,
|
|||
|
|
regularEmployees: 0,
|
|||
|
|
probationEmployees: 0,
|
|||
|
|
entryCount: 0,
|
|||
|
|
leaveCount: 0,
|
|||
|
|
regularCount: 0,
|
|||
|
|
transferCount: 0
|
|||
|
|
},
|
|||
|
|
currentEmployees: [],
|
|||
|
|
leaveRecords: [],
|
|||
|
|
entryRecords: [],
|
|||
|
|
regularRecords: [],
|
|||
|
|
transferRecords: [],
|
|||
|
|
activeTab: 'current',
|
|||
|
|
charts: {},
|
|||
|
|
loading: false,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
// 默认设置为当前月
|
|||
|
|
this.dateRange = this.getMonthRange()
|
|||
|
|
this.initCharts()
|
|||
|
|
this.handleQuery()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getMonthRange() {
|
|||
|
|
const date = new Date()
|
|||
|
|
// 当月第一天，00:00:00
|
|||
|
|
const firstDay = new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0)
|
|||
|
|
// 当月最后一天，23:59:59
|
|||
|
|
const lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0, 23, 59, 59)
|
|||
|
|
|
|||
|
|
// 格式化日期为yyyy-MM-dd HH:mm:ss格式
|
|||
|
|
const formatDate = (date) => {
|
|||
|
|
const year = date.getFullYear()
|
|||
|
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
|||
|
|
const day = String(date.getDate()).padStart(2, '0')
|
|||
|
|
const hours = String(date.getHours()).padStart(2, '0')
|
|||
|
|
const minutes = String(date.getMinutes()).padStart(2, '0')
|
|||
|
|
const seconds = String(date.getSeconds()).padStart(2, '0')
|
|||
|
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return [formatDate(firstDay), formatDate(lastDay)]
|
|||
|
|
},
|
|||
|
|
initCharts() {
|
|||
|
|
this.charts.educationChart = echarts.init(document.getElementById('educationChart'))
|
|||
|
|
this.charts.ageChart = echarts.init(document.getElementById('ageChart'))
|
|||
|
|
this.charts.genderChart = echarts.init(document.getElementById('genderChart'))
|
|||
|
|
this.charts.trendChart = echarts.init(document.getElementById('trendChart'))
|
|||
|
|
|
|||
|
|
// 监听窗口大小变化，自适应图表
|
|||
|
|
window.addEventListener('resize', () => {
|
|||
|
|
Object.values(this.charts).forEach(chart => chart.resize())
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
handleQuery() {
|
|||
|
|
const queryParams = {
|
|||
|
|
startTime: this.dateRange ? this.dateRange[0] : '',
|
|||
|
|
endTime: this.dateRange ? this.dateRange[1] : '',
|
|||
|
|
entryStartTime: this.employeeDateRange ? this.employeeDateRange[0] : '',
|
|||
|
|
entryEndTime: this.employeeDateRange ? this.employeeDateRange[1] : '',
|
|||
|
|
}
|
|||
|
|
this.loadData(queryParams)
|
|||
|
|
},
|
|||
|
|
async loadData(queryParams) {
|
|||
|
|
this.loading = true
|
|||
|
|
try {
|
|||
|
|
await Promise.all([
|
|||
|
|
this.loadEmployeeData(queryParams),
|
|||
|
|
this.loadChangeData(queryParams),
|
|||
|
|
this.loadTransferData(queryParams)
|
|||
|
|
])
|
|||
|
|
} finally {
|
|||
|
|
this.loading = false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
resetQuery() {
|
|||
|
|
this.dateRange = this.getMonthRange()
|
|||
|
|
this.handleQuery()
|
|||
|
|
},
|
|||
|
|
loadEmployeeData(queryParams) {
|
|||
|
|
console.log(queryParams)
|
|||
|
|
return new Promise((resolve) => {
|
|||
|
|
listEmployeeInfo(queryParams).then(response => {
|
|||
|
|
const data = response.rows
|
|||
|
|
this.currentEmployees = data
|
|||
|
|
|
|||
|
|
// 统计当前员工信息
|
|||
|
|
this.stats.totalEmployees = data.length
|
|||
|
|
this.stats.regularEmployees = data.filter(item => item.status === '已转正').length
|
|||
|
|
this.stats.probationEmployees = data.filter(item => item.status === '试用期').length
|
|||
|
|
|
|||
|
|
// 生成学历分布图表
|
|||
|
|
this.updateEducationChart()
|
|||
|
|
// 生成年龄段分布图表
|
|||
|
|
this.updateAgeChart()
|
|||
|
|
// 生成性别分布图表
|
|||
|
|
this.updateGenderChart()
|
|||
|
|
resolve()
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
loadChangeData(queryParams) {
|
|||
|
|
return new Promise((resolve) => {
|
|||
|
|
listEmployeeChange({
|
|||
|
|
changeStartTime: queryParams.startTime,
|
|||
|
|
changeEndTime: queryParams.endTime
|
|||
|
|
}).then(response => {
|
|||
|
|
const data = response.rows
|
|||
|
|
|
|||
|
|
// 分类处理异动记录
|
|||
|
|
this.entryRecords = data.filter(item => item.changeType == 0)
|
|||
|
|
this.leaveRecords = data.filter(item => item.changeType == 1)
|
|||
|
|
this.regularRecords = data.filter(item => item.changeType == 2)
|
|||
|
|
|
|||
|
|
// 统计异动数据
|
|||
|
|
this.stats.entryCount = this.entryRecords.length
|
|||
|
|
this.stats.leaveCount = this.leaveRecords.length
|
|||
|
|
this.stats.regularCount = this.regularRecords.length
|
|||
|
|
|
|||
|
|
// 更新趋势图表
|
|||
|
|
this.updateTrendChart()
|
|||
|
|
resolve()
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
loadTransferData(queryParams) {
|
|||
|
|
return new Promise((resolve) => {
|
|||
|
|
listEmployeeTransfer({
|
|||
|
|
transferStartTime: queryParams.startTime,
|
|||
|
|
transferEndTime: queryParams.endTime
|
|||
|
|
}).then(response => {
|
|||
|
|
const data = response.rows
|
|||
|
|
console.log(data, '调岗记录')
|
|||
|
|
this.transferRecords = data
|
|||
|
|
this.stats.transferCount = data.length
|
|||
|
|
|
|||
|
|
// 更新趋势图表
|
|||
|
|
this.updateTrendChart()
|
|||
|
|
resolve()
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
updateEducationChart() {
|
|||
|
|
// 统计学历分布
|
|||
|
|
const educationData = {}
|
|||
|
|
this.currentEmployees.forEach(emp => {
|
|||
|
|
const edu = emp.education || '未知'
|
|||
|
|
educationData[edu] = (educationData[edu] || 0) + 1
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const option = {
|
|||
|
|
title: {
|
|||
|
|
text: '学历分布',
|
|||
|
|
left: 'center'
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
orient: 'vertical',
|
|||
|
|
left: 'left'
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '学历',
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: '50%',
|
|||
|
|
data: Object.entries(educationData).map(([name, value]) => ({ name, value })),
|
|||
|
|
emphasis: {
|
|||
|
|
itemStyle: {
|
|||
|
|
shadowBlur: 10,
|
|||
|
|
shadowOffsetX: 0,
|
|||
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
this.charts.educationChart.setOption(option)
|
|||
|
|
},
|
|||
|
|
updateAgeChart() {
|
|||
|
|
// 统计年龄段分布
|
|||
|
|
const ageGroups = {
|
|||
|
|
'20岁以下': 0,
|
|||
|
|
'20-30岁': 0,
|
|||
|
|
'30-40岁': 0,
|
|||
|
|
'40-50岁': 0,
|
|||
|
|
'50岁以上': 0
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.currentEmployees.forEach(emp => {
|
|||
|
|
const age = parseInt(emp.age) || 0
|
|||
|
|
if (age < 20) ageGroups['20岁以下']++
|
|||
|
|
else if (age < 30) ageGroups['20-30岁']++
|
|||
|
|
else if (age < 40) ageGroups['30-40岁']++
|
|||
|
|
else if (age < 50) ageGroups['40-50岁']++
|
|||
|
|
else ageGroups['50岁以上']++
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const option = {
|
|||
|
|
title: {
|
|||
|
|
text: '年龄段分布',
|
|||
|
|
left: 'center'
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: Object.keys(ageGroups)
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value'
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '人数',
|
|||
|
|
type: 'bar',
|
|||
|
|
data: Object.values(ageGroups),
|
|||
|
|
itemStyle: {
|
|||
|
|
color: '#409EFF'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
this.charts.ageChart.setOption(option)
|
|||
|
|
},
|
|||
|
|
updateGenderChart() {
|
|||
|
|
// 统计性别分布
|
|||
|
|
const genderData = {
|
|||
|
|
'男': 0,
|
|||
|
|
'女': 0
|
|||
|
|
}
|
|||
|
|
this.currentEmployees.forEach(emp => {
|
|||
|
|
if (emp.gender === '男' || emp.gender === '女') {
|
|||
|
|
genderData[emp.gender]++
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const option = {
|
|||
|
|
title: {
|
|||
|
|
text: '性别分布',
|
|||
|
|
left: 'center'
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
orient: 'vertical',
|
|||
|
|
left: 'left'
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '性别',
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: '50%',
|
|||
|
|
data: Object.entries(genderData).map(([name, value]) => ({ name, value })),
|
|||
|
|
emphasis: {
|
|||
|
|
itemStyle: {
|
|||
|
|
shadowBlur: 10,
|
|||
|
|
shadowOffsetX: 0,
|
|||
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
this.charts.genderChart.setOption(option)
|
|||
|
|
},
|
|||
|
|
updateTrendChart() {
|
|||
|
|
// 生成时间序列数据
|
|||
|
|
const timeRange = this.generateTimeRange()
|
|||
|
|
const trendData = {
|
|||
|
|
entry: new Array(timeRange.length).fill(0),
|
|||
|
|
leave: new Array(timeRange.length).fill(0),
|
|||
|
|
regular: new Array(timeRange.length).fill(0),
|
|||
|
|
transfer: new Array(timeRange.length).fill(0)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 提取日期部分的辅助函数
|
|||
|
|
const getDatePart = (datetime) => {
|
|||
|
|
if (!datetime) return ''
|
|||
|
|
return datetime.split(' ')[0]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 填充入职数据
|
|||
|
|
this.entryRecords.forEach(record => {
|
|||
|
|
const datePart = getDatePart(record.changeTime)
|
|||
|
|
const index = timeRange.indexOf(datePart)
|
|||
|
|
if (index !== -1) trendData.entry[index]++
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 填充离职数据
|
|||
|
|
this.leaveRecords.forEach(record => {
|
|||
|
|
const datePart = getDatePart(record.changeTime)
|
|||
|
|
const index = timeRange.indexOf(datePart)
|
|||
|
|
if (index !== -1) trendData.leave[index]++
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 填充转正数据
|
|||
|
|
this.regularRecords.forEach(record => {
|
|||
|
|
const datePart = getDatePart(record.changeTime)
|
|||
|
|
const index = timeRange.indexOf(datePart)
|
|||
|
|
if (index !== -1) trendData.regular[index]++
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 填充调岗数据
|
|||
|
|
this.transferRecords.forEach(record => {
|
|||
|
|
const datePart = getDatePart(record.transferTime)
|
|||
|
|
const index = timeRange.indexOf(datePart)
|
|||
|
|
if (index !== -1) trendData.transfer[index]++
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const option = {
|
|||
|
|
title: {
|
|||
|
|
text: '员工变动趋势',
|
|||
|
|
left: 'center'
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data: ['入职', '离职', '转正', '调岗'],
|
|||
|
|
bottom: 0
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '3%',
|
|||
|
|
right: '4%',
|
|||
|
|
bottom: '15%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
boundaryGap: false,
|
|||
|
|
data: timeRange
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value'
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '入职',
|
|||
|
|
type: 'line',
|
|||
|
|
stack: 'Total',
|
|||
|
|
data: trendData.entry,
|
|||
|
|
itemStyle: {
|
|||
|
|
color: '#67C23A'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '离职',
|
|||
|
|
type: 'line',
|
|||
|
|
stack: 'Total',
|
|||
|
|
data: trendData.leave,
|
|||
|
|
itemStyle: {
|
|||
|
|
color: '#F56C6C'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '转正',
|
|||
|
|
type: 'line',
|
|||
|
|
stack: 'Total',
|
|||
|
|
data: trendData.regular,
|
|||
|
|
itemStyle: {
|
|||
|
|
color: '#409EFF'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '调岗',
|
|||
|
|
type: 'line',
|
|||
|
|
stack: 'Total',
|
|||
|
|
data: trendData.transfer,
|
|||
|
|
itemStyle: {
|
|||
|
|
color: '#E6A23C'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
this.charts.trendChart.setOption(option)
|
|||
|
|
},
|
|||
|
|
generateTimeRange() {
|
|||
|
|
// 生成时间范围内的日期数组
|
|||
|
|
const start = this.dateRange && this.dateRange[0] ? new Date(this.dateRange[0]) : new Date()
|
|||
|
|
const end = this.dateRange && this.dateRange[1] ? new Date(this.dateRange[1]) : new Date()
|
|||
|
|
const timeRange = []
|
|||
|
|
|
|||
|
|
// 如果没有设置时间范围，默认显示最近30天
|
|||
|
|
if (!this.dateRange || !this.dateRange[0] || !this.dateRange[1]) {
|
|||
|
|
const thirtyDaysAgo = new Date()
|
|||
|
|
thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30)
|
|||
|
|
start.setTime(thirtyDaysAgo.getTime())
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const current = new Date(start)
|
|||
|
|
while (current <= end) {
|
|||
|
|
const dateStr = current.toISOString().split('T')[0]
|
|||
|
|
timeRange.push(dateStr)
|
|||
|
|
current.setDate(current.getDate() + 1)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return timeRange
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.employee-report {
|
|||
|
|
padding: 20px;
|
|||
|
|
background-color: #f5f7fa;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.filter-section {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
background-color: #fff;
|
|||
|
|
padding: 20px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stats-section {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stats-cards {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|||
|
|
gap: 15px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-card {
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-item {
|
|||
|
|
padding: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-value {
|
|||
|
|
font-size: 24px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #409EFF;
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-label {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #606266;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stats-chart {
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.interactive-charts-section {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|||
|
|
gap: 20px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-card {
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.trend-section {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.details-section {
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
</style>
|