<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-button type="primary" plain @click="submitForm">
|
查询
|
</el-button>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info" @click.native="showXzyg('在职员工总数','1')">
|
<p class="card-number">{{ this.total.zzyg }}</p>
|
<p>在职员工总数</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info" @click.native="showXzyg('新进员工人数','2')">
|
<p class="card-number">{{ this.total.xjyg }}</p>
|
<p>新进员工人数</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info" @click.native="showXzyg('正式员工人数','3')">
|
<p class="card-number">{{ this.total.zsyg }}</p>
|
<p>正式员工人数</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info" @click.native="showXzyg('临时员工人数','4')">
|
<p class="card-number">{{ this.total.lsyg }}</p>
|
<p>临时员工人数</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info" @click.native="showXzyg('超龄员工人数','5')">
|
<p class="card-number">{{ this.total.clyg }}</p>
|
<p>超龄员工人数</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info" @click.native="showXzyg('离职员工总数','6')">
|
<p class="card-number">{{ this.total.lzyg }}</p>
|
<p>离职员工总数</p>
|
</el-card>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info" @click.native="showXzyg('辞职申请人数','7')">
|
<p class="card-number">{{ this.total.czyg }}</p>
|
<p>辞职申请人数</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info" @click.native="showXzyg('正常离职人数','8')">
|
<p class="card-number">{{ this.total.zclz }}</p>
|
<p>正常离职人数</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info" @click.native="showXzyg('自动离职人数','9')">
|
<p class="card-number">{{ this.total.zdlz }}</p>
|
<p>自动离职人数</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info" @click.native="showXzyg('公司辞退人数','10')">
|
<p class="card-number">{{ this.total.gsct }}</p>
|
<p>公司辞退人数</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info" @click.native="showht('有效合同','11')">
|
<p class="card-number">{{ this.total.yxht }}</p>
|
<p>有效合同</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info" @click.native="showht('到期合同','12')">
|
<p class="card-number">{{ this.total.dqht }}</p>
|
<p>到期合同</p>
|
</el-card>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info" @click.native="showht('新签合同','13')">
|
<p class="card-number">{{ this.total.xinqht }}</p>
|
<p>新签合同</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info" @click.native="showht('续签合同','14')">
|
<p class="card-number">{{ this.total.xqht }}</p>
|
<p>续签合同</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info" @click.native="showht('解除合同','15')">
|
<p class="card-number">{{ this.total.jcht }}</p>
|
<p>解除合同</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info" @click.native="showcq('出勤人数','1')">
|
<p class="card-number">{{ this.total.cqrs }}</p>
|
<p>出勤人数</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info" @click.native="showqj('员工请假','1')">
|
<p class="card-number">{{ this.total.ygqj }}</p>
|
<p>员工请假</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info" @click.native="showtj('员工体验','1')">
|
<p class="card-number">{{ this.total.ygtj }}</p>
|
<p>员工体验</p>
|
</el-card>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info" @click.native="showcq('员工加班','2')">
|
<p class="card-number">{{ this.total.ygjb }}</p>
|
<p>员工加班</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info" @click.native="showcq('员工旷工','3')">
|
<p class="card-number">{{ this.total.ygkg }}</p>
|
<p>员工旷工</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info" @click.native="showlz('劳资案件','1')">
|
<p class="card-number">{{ this.total.lzaj }}</p>
|
<p>劳资案件</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info" @click.native="showgs('工伤案件','1')">
|
<p class="card-number">{{ this.total.gsaj }}</p>
|
<p>工伤案件</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info" @click.native="showyw('意外险案件','1')">
|
<p class="card-number">{{ this.total.ywxaj }}</p>
|
<p>意外险案件</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info" @click.native="showsb('社保申请','3')">
|
<p class="card-number">{{ this.total.sbsq }}</p>
|
<p>社保申请</p>
|
</el-card>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info" @click.native="showsyj('失业金案件','3')">
|
<p class="card-number">{{ this.total.syj }}</p>
|
<p>失业金案件</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info" @click.native="showXzyg('身份证到期','11')">
|
<p class="card-number">{{ this.total.sfz }}</p>
|
<p>身份证到期</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info" @click.native="showtg('员工调岗','3')">
|
<p class="card-number">{{ this.total.ygtg }}</p>
|
<p>员工调岗</p>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card shadow="always" class="card-info" @click.native="showbl('不良记录','3')">
|
<p class="card-number">{{ this.total.bljl }}</p>
|
<p>不良记录</p>
|
</el-card>
|
</el-col>
|
</el-row>
|
<on-the-job-user
|
ref="jobUser"
|
:dialog-visible="dialog.isVisible"
|
:title="title"
|
@cancleChooseUser="cancleChooseUser"
|
/>
|
<ht-user
|
ref="htUser"
|
:dialog-visible="dialog.dialogShowHt"
|
:title="title"
|
@cancleChooseUser="canclehtUser"
|
/>
|
<cq-user
|
ref="cqUser"
|
:dialog-visible="dialog.dialogShowCq"
|
:title="title"
|
@cancleChooseUser="canclecqUser"
|
/>
|
<bl-user ref="blUser" :dialog-visible="dialog.dialogShowbl" :title="title" @cancleChooseUser="cancleblUser" />
|
<tg-user ref="tgUser" :dialog-visible="dialog.dialogShowtg" :title="title" @cancleChooseUser="cancletgUser" />
|
<tj-user ref="tjUser" :dialog-visible="dialog.dialogShowtj" :title="title" @cancleChooseUser="cancletjUser" />
|
<yj-user ref="syjUser" :dialog-visible="dialog.dialogShowsyj" :title="title" @cancleChooseUser="cancleyjUser" />
|
<sb-user ref="sbUser" :dialog-visible="dialog.dialogShowsb" :title="title" @cancleChooseUser="canclesbUser" />
|
<yw-user ref="ywUser" :dialog-visible="dialog.dialogShowyw" :title="title" @cancleChooseUser="cancleywUser" />
|
<gs-user ref="gsUser" :dialog-visible="dialog.dialogShowgs" :title="title" @cancleChooseUser="canclegsUser" />
|
<lz-user ref="lzUser" :dialog-visible="dialog.dialogShowlz" :title="title" @cancleChooseUser="canclelzUser" />
|
<qj-user ref="qjUser" :dialog-visible="dialog.dialogShowqj" :title="title" @cancleChooseUser="cancleqjUser" />
|
</div>
|
</template>
|
<script>
|
import OnTheJobUser from './onTheJobUser'
|
import HtUser from './HtUser'
|
import CqUser from './cqUser'
|
import BlUser from './blUser'
|
import TgUser from './tgUser'
|
import TjUser from './tjUser'
|
import YjUser from './yjUser'
|
import SbUser from './sbUser'
|
import YwUser from './ywUser'
|
import GsUser from './gsUser'
|
import LzUser from './lzUser'
|
import QjUser from './qjUser'
|
export default {
|
components: { QjUser, LzUser, GsUser, YwUser, SbUser, YjUser, TjUser, TgUser, BlUser, CqUser, HtUser, OnTheJobUser },
|
data() {
|
return {
|
dialog: {
|
isVisible: false,
|
dialogShowHt: false,
|
dialogShowbl: false,
|
dialogShowtg: false,
|
dialogShowtj: false,
|
dialogShowsyj: false,
|
dialogShowsb: false,
|
dialogShowyw: false,
|
dialogShowgs: false,
|
dialogShowlz: false,
|
dialogShowqj: false,
|
dialogShowCq: false,
|
title: '',
|
type: ''
|
},
|
title: '',
|
total: {
|
zzyg: 0,
|
zsyg: 0,
|
lsyg: 0,
|
zclz: 0,
|
zdlz: 0,
|
clyg: 0,
|
gsct: 0,
|
xjyg: 0,
|
lzyg: 0,
|
jcht: 0,
|
czyg: 0,
|
yxht: 0,
|
xinqht: 0,
|
xqht: 0,
|
dqht: 0,
|
cqrs: 0,
|
ygjb: 0,
|
ygkg: 0,
|
ygqj: 0,
|
lzaj: 0,
|
gsaj: 0,
|
ywxaj: 0,
|
sbsq: 0,
|
syj: 0,
|
ygtj: 0,
|
sfz: 0,
|
ygtg: 0,
|
bljl: 0
|
},
|
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: '' // 搜索结果,被选中的li index
|
}
|
},
|
methods: {
|
showbl(title, number) {
|
this.dialog.dialogShowbl = true
|
this.title = title
|
const values = this.value2
|
const btime = values[0]
|
const etime = values[1]
|
const index = this.selectIndex
|
this.$refs.blUser.setjobUser(btime, etime, index, number)
|
},
|
showtg(title, number) {
|
this.dialog.dialogShowtg = true
|
this.title = title
|
const values = this.value2
|
const btime = values[0]
|
const etime = values[1]
|
const index = this.selectIndex
|
this.$refs.tgUser.setjobUser(btime, etime, index, number)
|
},
|
showtj(title, number) {
|
this.dialog.dialogShowtj = true
|
this.title = title
|
const values = this.value2
|
const btime = values[0]
|
const etime = values[1]
|
const index = this.selectIndex
|
this.$refs.tjUser.setjobUser(btime, etime, index, number)
|
},
|
showsyj(title, number) {
|
this.dialog.dialogShowsyj = true
|
this.title = title
|
const values = this.value2
|
const btime = values[0]
|
const etime = values[1]
|
const index = this.selectIndex
|
this.$refs.syjUser.setjobUser(btime, etime, index, number)
|
},
|
showsb(title, number) {
|
this.dialog.dialogShowsb = true
|
this.title = title
|
const values = this.value2
|
const btime = values[0]
|
const etime = values[1]
|
const index = this.selectIndex
|
this.$refs.sbUser.setjobUser(btime, etime, index, number)
|
},
|
showyw(title, number) {
|
this.dialog.dialogShowyw = true
|
this.title = title
|
const values = this.value2
|
const btime = values[0]
|
const etime = values[1]
|
const index = this.selectIndex
|
this.$refs.ywUser.setjobUser(btime, etime, index, number)
|
},
|
showgs(title, number) {
|
this.dialog.dialogShowgs = true
|
this.title = title
|
const values = this.value2
|
const btime = values[0]
|
const etime = values[1]
|
const index = this.selectIndex
|
this.$refs.gsUser.setjobUser(btime, etime, index, number)
|
},
|
showlz(title, number) {
|
this.dialog.dialogShowlz = true
|
this.title = title
|
const values = this.value2
|
const btime = values[0]
|
const etime = values[1]
|
const index = this.selectIndex
|
this.$refs.lzUser.setjobUser(btime, etime, index, number)
|
},
|
showqj(title, number) {
|
this.dialog.dialogShowqj = true
|
this.title = title
|
const values = this.value2
|
const btime = values[0]
|
const etime = values[1]
|
const index = this.selectIndex
|
this.$refs.qjUser.setjobUser(btime, etime, index, number)
|
},
|
showcq(title, number) {
|
this.dialog.dialogShowCq = true
|
this.title = title
|
const values = this.value2
|
const btime = values[0]
|
const etime = values[1]
|
const index = this.selectIndex
|
this.$refs.cqUser.setjobUser(btime, etime, index, number)
|
},
|
showht(title, number) {
|
this.dialog.dialogShowHt = true
|
this.title = title
|
const values = this.value2
|
const btime = values[0]
|
const etime = values[1]
|
const index = this.selectIndex
|
this.$refs.htUser.setjobUser(btime, etime, index, number)
|
},
|
showXzyg(title, number) {
|
this.dialog.isVisible = true
|
this.title = title
|
const values = this.value2
|
const btime = values[0]
|
const etime = values[1]
|
const index = this.selectIndex
|
this.$refs.jobUser.setjobUser(btime, etime, index, number)
|
},
|
cancleChooseUser() {
|
this.dialog.isVisible = false
|
},
|
canclehtUser() {
|
this.dialog.dialogShowHt = false
|
},
|
canclecqUser() {
|
this.dialog.dialogShowCq = false
|
},
|
cancleblUser() {
|
this.dialog.dialogShowbl = false
|
},
|
cancletgUser() {
|
this.dialog.dialogShowtg = false
|
},
|
cancletjUser() {
|
this.dialog.dialogShowtj = false
|
},
|
cancleyjUser() {
|
this.dialog.dialogShowsyj = false
|
},
|
canclesbUser() {
|
this.dialog.dialogShowsb = false
|
},
|
cancleywUser() {
|
this.dialog.dialogShowyw = false
|
},
|
canclegsUser() {
|
this.dialog.dialogShowgs = false
|
},
|
canclelzUser() {
|
this.dialog.dialogShowlz = false
|
},
|
cancleqjUser() {
|
this.dialog.dialogShowqj = false
|
},
|
submitForm() {
|
const values = this.value2
|
const btime = values[0]
|
const etime = values[1]
|
this.$get('hr/statistics/list', {
|
btime: btime, etime: etime, index: null
|
}).then((r) => {
|
const data = r.data.data
|
this.totalValue(data)
|
})
|
},
|
selectTab(index) {
|
if (index === null || index === undefined) {
|
index = 0
|
}
|
this.selectIndex = index
|
this.$get('hr/statistics/list', {
|
index: index
|
}).then((r) => {
|
const data = r.data.data
|
this.totalValue(data)
|
})
|
},
|
totalValue(data) {
|
this.total.zzyg = data.zzyg
|
this.total.zsyg = data.zsyg
|
this.total.lsyg = data.lsyg
|
this.total.zclz = data.zclz
|
this.total.zdlz = data.zdlz
|
this.total.gsct = data.gsct
|
this.total.xjyg = data.xjyg
|
this.total.lzyg = data.lzyg
|
this.total.jcht = data.jcht
|
this.total.czyg = data.czyg
|
this.total.yxht = data.yxht
|
this.total.xinqht = data.xinqht
|
this.total.xqht = data.xqht
|
this.total.dqht = data.dqht
|
this.total.cqrs = data.cqrs
|
this.total.ygjb = data.ygjb
|
this.total.ygkg = data.ygkg
|
this.total.ygqj = data.ygqj
|
this.total.lzaj = data.lzaj
|
this.total.gsaj = data.gsaj
|
this.total.ywxaj = data.ywxaj
|
this.total.sbsq = data.sbsq
|
this.total.syj = data.syj
|
this.total.ygtj = data.ygtj
|
this.total.sfz = data.sfz
|
this.total.clyg = data.clyg
|
this.total.ygtg = data.ygtg
|
this.total.bljl = data.bljl
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.main {
|
padding: 20px;
|
text-align: center;
|
.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>
|
