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> |