<template>
|
<div class="main">
|
<el-row style=" height: 40px;">
|
<el-col :span="9"><p /></el-col>
|
<el-col :span="15">
|
<ul class="data-ul">
|
<li :class="{ selectedColor: selectIndex === 0 }" @click="selectTab(0)">
|
今日
|
</li>
|
<li :class="{ selectedColor: selectIndex === 1 }" @click="selectTab(1)">
|
本周
|
</li>
|
<li :class="{ selectedColor: selectIndex === 2 }" @click="selectTab(2)">
|
本月
|
</li>
|
<li :class="{ selectedColor: selectIndex === 3 }" @click="selectTab(3)">
|
今年
|
</li>
|
</ul>
|
<span style=" font-size: 16px; color: #333333;"> 时间段：</span>
|
<el-date-picker
|
v-model="value2"
|
type="datetimerange"
|
:picker-options="pickerOptions"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
align="right"
|
value-format="yyyy-MM-dd"
|
style="width: 400px;"
|
/>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info">
|
<p class="card-number">12</p>
|
<p>在职员工总数</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info">
|
<p class="card-number">12</p>
|
<p>离职员工总数</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info">
|
<p class="card-number">12</p>
|
<p>新进人员</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info">
|
<p class="card-number">12</p>
|
<p>正常离职人员</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info">
|
<p class="card-number">12</p>
|
<p>自动离职人员</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info">
|
<p class="card-number">12</p>
|
<p>有效合同</p>
|
</el-card>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info">
|
<p class="card-number">12</p>
|
<p>到期合同</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info">
|
<p class="card-number">12</p>
|
<p>新签合同</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info">
|
<p class="card-number">12</p>
|
<p>续签合同</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info">
|
<p class="card-number">12</p>
|
<p>历史合同</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info">
|
<p class="card-number">12</p>
|
<p>出勤天数</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info">
|
<p class="card-number">12</p>
|
<p>员工请假</p>
|
</el-card>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info">
|
<p class="card-number">12</p>
|
<p>员工加班（天）</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info">
|
<p class="card-number">12</p>
|
<p>员工加班（小时）</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info">
|
<p class="card-number">12</p>
|
<p>员工旷工</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info">
|
<p class="card-number">12</p>
|
<p>证件到期</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info">
|
<p class="card-number">12</p>
|
<p>员工调岗</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info">
|
<p class="card-number">12</p>
|
<p>员工体检</p>
|
</el-card>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
<script>
|
export default {
|
data() {
|
return {
|
pickerOptions: {
|
shortcuts: [
|
{
|
text: '最近一周',
|
onClick(picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
picker.$emit('pick', [start, end])
|
}
|
},
|
{
|
text: '最近一个月',
|
onClick(picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
picker.$emit('pick', [start, end])
|
}
|
},
|
{
|
text: '最近三个月',
|
onClick(picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
picker.$emit('pick', [start, end])
|
}
|
}
|
]
|
},
|
value2: '',
|
selectIndex: 0 // 搜索结果,被选中的li index
|
}
|
},
|
methods: {
|
selectTab(index) {
|
this.selectIndex = index
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.main {
|
padding: 20px;
|
.data-ul {
|
margin-right: 40px;
|
margin-top: 0px;
|
list-style: none;
|
float: left;
|
li {
|
float: left;
|
width: 60px;
|
text-align: center;
|
font-size: 16px;
|
color: #333333;
|
}
|
li:hover {
|
color: #931e1e;
|
border-bottom: 2px solid #931e1e;
|
}
|
}
|
}
|
.selectedColor {
|
color: #931e1e;
|
border-bottom: 2px solid #931e1e;
|
}
|
.el-card__body {
|
text-align: center;
|
.card-number {
|
color: #931e1e;
|
font-size: 20px;
|
}
|
}
|
.card-info:hover {
|
text-align: center;
|
background-color: #931e1e;
|
color: #fff;
|
.card-number {
|
color: #fff;
|
font-size: 20px;
|
}
|
}
|
.el-row {
|
margin-bottom: 20px;
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
.el-col {
|
border-radius: 4px;
|
}
|
.bg-purple-dark {
|
background: #99a9bf;
|
}
|
.bg-purple {
|
background: #d3dce6;
|
}
|
.bg-purple-light {
|
background: #e5e9f2;
|
}
|
.grid-content {
|
border-radius: 4px;
|
min-height: 36px;
|
}
|
.row-bg {
|
padding: 10px 0;
|
background-color: #f9fafc;
|
}
|
.data-ul {
|
li {
|
line-height: 40px;
|
}
|
}
|
</style>
|
