398 lines
11 KiB
Vue
398 lines
11 KiB
Vue
<template>
|
||
<div class="main_box">
|
||
<div class="home_left">
|
||
<InnerBox :echartObj="echartObj1" header_title="当月缺勤数据占比" little_font="（%）" />
|
||
<InnerBox :echartObj="echartObj2" header_title="本年度出勤率统计" little_font="（人）" />
|
||
<InnerBox :echartObj="echartObj3" header_title="本年度缺勤人数统计" little_font="（人）" />
|
||
</div>
|
||
<div class="home_center">
|
||
<div style="width: 100%;height: 10%;display: flex;justify-content: space-between;align-items: flex-start;">
|
||
<img src="@/assets/img/humanResources/1.png" style="width: 31%;max-height: 100%;">
|
||
<img src="@/assets/img/humanResources/2.png" style="width: 31%;max-height: 100%;">
|
||
<img src="@/assets/img/humanResources/3.png" style="width: 31%;max-height: 100%;">
|
||
</div>
|
||
<!--当前员工人数和党员人数占比-->
|
||
<dv-border-box-11 title="当前员工人数和党员人数占比(%)" :color="['#48E5E5', '#1F7DAF']" :titleWidth="400" style="height: 45%;">
|
||
<div style="width: 100%;height: 100%;display: flex;align-items: center;">
|
||
<img src="@/assets/img/humanResources/4.png" style="width: 95%;max-height: 100%;">
|
||
</div>
|
||
</dv-border-box-11>
|
||
|
||
<!--员工年龄和学历占比(个)-->
|
||
<dv-border-box-11 title="员工年龄和学历占比(%)" :color="['#16ADDE', '#0C7DE7']" :titleWidth="400" style="height: 40%;">
|
||
|
||
</dv-border-box-11>
|
||
</div>
|
||
<div class="home_right">
|
||
<InnerBox :echartObj="echartObj5" header_title="当前员工男女和职称比例" little_font="（%）" style="height: 50%;" />
|
||
<InnerBox :echartObj="echartObj6" header_title="岗位分析" little_font="（人）" style="height: 50%;" />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Vue from 'vue'
|
||
import { Progress,Divider } from 'ant-design-vue';
|
||
Vue.use(Progress);
|
||
Vue.use(Divider);
|
||
import Echarts from "@/components/echarts";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 当月缺勤数据占比
|
||
echartObj1: {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||
},
|
||
legend: {
|
||
right: '10',
|
||
top: 'center',
|
||
orient: 'vertical',
|
||
data: ['事假', '病假', '调休','婚假','年假','产假',],
|
||
textStyle: {
|
||
color: '#FFFFFF',
|
||
lineHeight: 18
|
||
},
|
||
formatter: (name) => {
|
||
let data = this.echartObj1.series[0].data
|
||
let total = 0
|
||
let tarValue
|
||
for (let i = 0; i < data.length; i++) {
|
||
total += data[i].value
|
||
if (data[i].name == name) {
|
||
tarValue = data[i].value
|
||
}
|
||
}
|
||
//计算出百分比
|
||
let p = Math.round((tarValue / total) * 100, 2) + '%'
|
||
return `${name}(${p})`
|
||
}
|
||
},
|
||
color: ['#4AA2CB','#91CC75','#68A400','#3D7DFA','#48E5E5','#FAC858'],
|
||
toolbox: {
|
||
show: false,
|
||
feature: {
|
||
mark: {show: true},
|
||
dataView: {show: true, readOnly: false},
|
||
magicType: {
|
||
show: true,
|
||
type: ['pie', 'funnel']
|
||
},
|
||
restore: {show: true},
|
||
saveAsImage: {show: true}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '占比分析',
|
||
type: 'pie',
|
||
radius: [30, 100],
|
||
top: 'middle',
|
||
label: {
|
||
show: false,
|
||
position: 'inside',
|
||
formatter: '{d}%',
|
||
},
|
||
data: [
|
||
{value: 32.35, name: '事假'},
|
||
{value: 7.71, name: '病假'},
|
||
{value: 23.53, name: '调休'},
|
||
{value: 8.88, name: '婚假'},
|
||
{value: 17.59, name: '年假'},
|
||
{value: 9.94, name: '产假'},
|
||
]
|
||
}
|
||
]
|
||
},
|
||
// 本年度出勤率统计
|
||
echartObj2: {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
axisLabel: {//x轴文字的配置
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 10,
|
||
}
|
||
},
|
||
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {//y轴文字的配置
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
color: ['#1F7DAF']
|
||
}
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
data: [
|
||
{name: '1月', value: 300},
|
||
{name: '2月', value: 470},
|
||
{name: '3月', value: 380},
|
||
{name: '4月', value: 480},
|
||
{name: '5月', value: 400},
|
||
{name: '6月', value: 330},
|
||
{name: '7月', value: 480},
|
||
{name: '8月', value: 500},
|
||
{name: '9月', value: 500},
|
||
{name: '10月', value: 400},
|
||
{name: '11月', value: 350},
|
||
{name: '12月', value: 220},
|
||
],
|
||
type: 'bar',
|
||
barGap:'100%',
|
||
barWidth: 10,
|
||
itemStyle: this.setSeriesItemStyle('lan', {label: {show: false}}),
|
||
},
|
||
]
|
||
},
|
||
// 本年度缺勤人数统计
|
||
echartObj3: {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
axisLabel: {//x轴文字的配置
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 10,
|
||
}
|
||
},
|
||
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {//y轴文字的配置
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
color: ['#1F7DAF']
|
||
}
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
data: [
|
||
{name: '1月', value: 300},
|
||
{name: '2月', value: 470},
|
||
{name: '3月', value: 380},
|
||
{name: '4月', value: 480},
|
||
{name: '5月', value: 400},
|
||
{name: '6月', value: 330},
|
||
{name: '7月', value: 480},
|
||
{name: '8月', value: 500},
|
||
{name: '9月', value: 500},
|
||
{name: '10月', value: 400},
|
||
{name: '11月', value: 350},
|
||
{name: '12月', value: 220},
|
||
],
|
||
type: 'bar',
|
||
barGap:'100%',
|
||
barWidth: 10,
|
||
itemStyle: this.setSeriesItemStyle('huang', {label: {show: false}}),
|
||
},
|
||
]
|
||
},
|
||
echartObj5: {},
|
||
echartObj6: {},
|
||
}
|
||
},
|
||
created() {
|
||
this.init();
|
||
},
|
||
components: {
|
||
Echarts,
|
||
},
|
||
methods: {
|
||
init() {
|
||
this.getData();
|
||
},
|
||
search() {
|
||
this.init();
|
||
},
|
||
getData() {
|
||
},
|
||
setSeriesItemStyle(color, obj={}){
|
||
let colors = {
|
||
qing: ['#48E5E5', 'rgba(72,228,229,0.30)'],
|
||
lan: ['#2B8EF3', 'rgba(25,118,226,0.30)'],
|
||
// huang: ['#F5B12D', 'rgba(255,123,0,0.30)'],
|
||
huang: ['#FF7B00', 'rgba(255,123,0,0.30)'],
|
||
lv: ['#07F090', 'rgba(60,212,149,0.28)'],
|
||
zi: ['#9B64D3', 'rgba(155,100,211,0.24)'],
|
||
}
|
||
return {
|
||
normal: {
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
textStyle: {
|
||
color: '#FFFFFF',
|
||
fontSize: 12
|
||
},
|
||
},
|
||
color: () => {
|
||
return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: colors[color][0] },
|
||
{ offset: 1, color: colors[color][1] },
|
||
]);
|
||
},
|
||
...obj,
|
||
}
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
/deep/ .ant-progress-circle .ant-progress-text {
|
||
color: #FFFFFF;
|
||
font-size: 20px;
|
||
}
|
||
/deep/ .ant-progress-circle-trail{
|
||
stroke:#334D60 !important;
|
||
}
|
||
.main_box{
|
||
padding: 0 2rem;
|
||
> div{
|
||
padding: 0;
|
||
}
|
||
.inner_box{
|
||
overflow: hidden;
|
||
}
|
||
.home_left,
|
||
.home_right{
|
||
width: 25%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
.inner_box{
|
||
width: 100%;
|
||
height: 32%;
|
||
}
|
||
}
|
||
.home_center{
|
||
width: 50%;
|
||
padding: 0 1em;
|
||
.dv-border-box-11 {
|
||
font-size: 1rem;
|
||
/deep/ .border-box-content {
|
||
padding: 4rem 1.5rem 1rem;
|
||
}
|
||
}
|
||
.zz{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
.dv-border-box-8{
|
||
margin-right: 1%;
|
||
}
|
||
.box8{
|
||
width: 15%;
|
||
/deep/ .border-box-content {
|
||
padding: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
.zz1{
|
||
width: 50%;
|
||
background: linear-gradient(89deg, #088152 3%, #01190C 99%);
|
||
padding: 0 1rem;
|
||
|
||
height: 100%;
|
||
border-radius: 100vw;
|
||
border: 3px solid #038F81;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
/*/deep/ .border-box-content{
|
||
padding: 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}*/
|
||
.circle{
|
||
display: inline-block;
|
||
position: absolute;
|
||
width: 12px;
|
||
height: 1.5em;
|
||
border-left: 1px solid;
|
||
border-bottom: 1px solid;
|
||
border-color: #00B4FF;
|
||
margin-left: -12px;
|
||
// margin-top: -0.5em;
|
||
&:after{
|
||
content: "";
|
||
display: block;
|
||
width: 7px;
|
||
height: 7px;
|
||
border-radius: 7px;
|
||
background: #00B4FF;
|
||
position: absolute;
|
||
margin-top: -7px;
|
||
margin-left: -3.5px;
|
||
}
|
||
}
|
||
.circle2{
|
||
border-color: #F77802;
|
||
&:after{
|
||
background: #F77802;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.inner_box /deep/ .box_content{
|
||
flex: 1;
|
||
height: calc(100% - 60px);
|
||
}
|
||
}
|
||
.echart5{
|
||
padding: 1rem 0;
|
||
display: flex;
|
||
justify-content: space-around !important;
|
||
> div{
|
||
font-size: 1rem;
|
||
color: #FFFFFF;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
}
|
||
}
|
||
}
|
||
</style>
|