人力资源添加
This commit is contained in:
杨侠磊
parent
67e20a73f5
commit
5bbc7cafa2
BIN
src/assets/img/humanResources/1.png
Normal file
BIN
src/assets/img/humanResources/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
BIN
src/assets/img/humanResources/2.png
Normal file
BIN
src/assets/img/humanResources/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
BIN
src/assets/img/humanResources/3.png
Normal file
BIN
src/assets/img/humanResources/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
BIN
src/assets/img/humanResources/4.png
Normal file
BIN
src/assets/img/humanResources/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
@ -61,7 +61,7 @@ export default {
|
||||
{
|
||||
index: "7",
|
||||
title: "人力资源",
|
||||
path: "/07"
|
||||
path: "/humanResources"
|
||||
},
|
||||
{
|
||||
index: "4",
|
||||
|
||||
397
src/pages/humanResources/home.vue
Normal file
397
src/pages/humanResources/home.vue
Normal file
@ -0,0 +1,397 @@
|
||||
<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>
|
||||
@ -1,11 +1,19 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<!-- <userStatus />-->
|
||||
<!-- <h1>首页</h1> -->
|
||||
<!-- <img class="h1" src="../../assets/img/h1.png" />-->
|
||||
<Header :headerObj="{title:'中科软养老大数据分析平台', index: '7'}"/>
|
||||
<img src="@/assets/img/page2/07人力.png" alt="" style="width: 100vw;height: calc(100vh - 5vw);">
|
||||
<home></home>
|
||||
<!-- <Nav />-->
|
||||
<!-- <img class="b" src="../../assets/img/1.png" alt="" />-->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Header from '@/components/header'
|
||||
import home from './home.vue'
|
||||
import userStatus from "@/components/userStatus";
|
||||
import { Index } from "@/api/index";
|
||||
|
||||
export default {
|
||||
name: "index",
|
||||
@ -26,9 +34,11 @@ export default {
|
||||
},
|
||||
components: {
|
||||
Header,
|
||||
home,
|
||||
userStatus,
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
init() {
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
@ -1,81 +0,0 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<Header :headerObj="{title:'中科软养老大数据分析平台', index: '9'}"/>
|
||||
<img src="@/assets/img/page2/09智能设备.png" alt="" style="width: 100vw;height: calc(100vh - 5vw);">
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Header from '@/components/header'
|
||||
|
||||
export default {
|
||||
name: "index",
|
||||
data: function () {
|
||||
return {
|
||||
param: {
|
||||
startYear: "",
|
||||
endYear: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.param = {
|
||||
startYear: "",
|
||||
endYear: "",
|
||||
};
|
||||
// this.init();
|
||||
},
|
||||
components: {
|
||||
Header,
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
Index(this.param).then((res) => {
|
||||
console.log(res);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.main {
|
||||
height: 100%;
|
||||
background: url(../../assets/img/bigScreen/background.jpg) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
/deep/ .modal,
|
||||
/deep/ .el-icon-close {
|
||||
display: none;
|
||||
}
|
||||
h1 {
|
||||
font-size: 50px;
|
||||
font-weight: 600;
|
||||
padding-top: 50px;
|
||||
text-align: center;
|
||||
-webkit-line-clamp: 2;
|
||||
background-image: -webkit-linear-gradient(bottom, #eefcff, #51dcfe);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.h1 {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -509px;
|
||||
}
|
||||
//.b {
|
||||
// position: absolute;
|
||||
// bottom: 0;
|
||||
// width: 100%;
|
||||
// // animation:turn 10s linear infinite;
|
||||
//}
|
||||
@keyframes turn {
|
||||
0% {
|
||||
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -72,14 +72,6 @@ export default new Router({
|
||||
index: 0,
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/07',
|
||||
name: '07',
|
||||
component: () => import('@/pages/page/07'),
|
||||
meta: {
|
||||
index: 0,
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/08',
|
||||
name: '08',
|
||||
@ -97,6 +89,15 @@ export default new Router({
|
||||
index: 0,
|
||||
},
|
||||
},
|
||||
// 人力资源
|
||||
{
|
||||
path: '/humanResources',
|
||||
name: 'humanResources',
|
||||
component: () => import('@/pages/humanResources/index'),
|
||||
meta: {
|
||||
index: 0,
|
||||
},
|
||||
},
|
||||
// 首页
|
||||
{
|
||||
path: '/home',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user