herenshan112
/
hxgksystemapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

HR看板

v1
超级管理员 2 years ago
parent
285d121487
commit
e3a0df5002
7 changed files with 702 additions and 2 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 53
      src/api/displayboardapi/indexapi.ts
  2. 52
      src/api/displayboardapi/types.ts
  3. 79
      src/views/hr/displayboard.vue
  4. 111
      src/views/hr/displayboards/dimissionrate.vue
  5. 125
      src/views/hr/displayboards/educationpie.vue
  6. 148
      src/views/hr/displayboards/groupdimissionrate.vue
  7. 136
      src/views/hr/displayboards/groupdimratepie.vue

53
src/api/displayboardapi/indexapi.ts
View File

@ -0,0 +1,53 @@
import request from '@/utils/request';
import { AxiosPromise } from 'axios';
import { dimissionRateQuery,publicId,eduStruCont,sendOrgCont } from './types';
/**
* 获取离职率
*/
export function getDimissionRate(data?: dimissionRateQuery) {
return request({
url: '/hrapi/staff/dimission_rate',
method: 'post',
data: data
});
}
/**
* 获取行政组织直接下属
*/
export function getOrgChiled(data?: publicId): AxiosPromise<sendOrgCont> {
return request({
url: '/hrapi/org/getorgchiled',
method: 'post',
data: data
});
}
/**
* 获取单一行政组织离职率
*/
export function getOneOrgDimissionRate(data?: dimissionRateQuery){
return request({
url: '/hrapi/staff/oneorg_dimission_rate',
method: 'post',
data: data
});
}
/**
* 获取公司指定年月的离职率
*/
export function getOrgTimeRate(data?: dimissionRateQuery){
return request({
url: '/hrapi/staff/getorgtimerate',
method: 'post',
data: data
});
}
/**
* 获取学历结构
*/
export function getEdtuStru(data?: publicId): AxiosPromise<eduStruCont[]> {
return request({
url: '/hrapi/staff/get_edu_stru',
method: 'post',
data: data
});
}

52
src/api/displayboardapi/types.ts
View File

@ -0,0 +1,52 @@
export interface publicId{
id?:number;
}
/**
* 获取离职率参数
*/
export interface dimissionRateQuery{
id?:number;
time?:string;
}
/**
* 折线结构
*/
export interface zexianStrcut{
name: string;
type: string;
stack: string;
data: number[]
}
/**
* 行政住址结构
*/
export interface orgInfo{
id: number;
number: string;
name: string;
superior: number;
organizationtype: number;
abbreviation: string;
time: number;
state: number;
wechatorganizationid: number;
superiorsun: string;
schoole: number;
kingdeeid: string;
ispower: number;
sort: number
}
/**
* 输出行政组织
*/
export interface sendOrgCont{
current:number;
list:orgInfo[]
}
/**
* 学历结构
*/
export interface eduStruCont{
education:string;
percentage:number;
}

79
src/views/hr/displayboard.vue
View File

@ -4,11 +4,86 @@
@ 备注: HR看板
-->
<script lang='ts' setup>
import DimissionRate from '@/views/hr/displayboards/dimissionrate.vue'
import GroupDimissionRate from '@/views/hr/displayboards/groupdimissionrate.vue'
import GroupDimissionRatePie from '@/views/hr/displayboards/groupdimratepie.vue'
import EducationPie from '@/views/hr/displayboards/educationpie.vue'
</script>
<template>
<div>HR看板</div>
<div class="dashboard-container">
<!--所有行政组织离职率-->
<el-row class="mb-8">
<DimissionRate
id="orgDimissionRate"
height="650px"
width="100%"
class="bg-[var(--el-bg-color-overlay)]"
/>
</el-row>
<el-row :gutter="20">
<el-col :span="16">
<GroupDimissionRate
id="oneOrgDimissionRate"
height="730px"
width="100%"
class="bg-[var(--el-bg-color-overlay)]"
/>
</el-col>
<el-col :span="8">
<el-row>
<el-col :span="24">
<GroupDimissionRatePie
id="oneOrgDimissionRatePie"
height="300px"
width="100%"
class="bg-[var(--el-bg-color-overlay)]"
/>
</el-col>
<el-col :span="24" style="margin-top: 25px;">
<EducationPie
id="educationPieViews"
height="300px"
width="100%"
class="bg-[var(--el-bg-color-overlay)]"
/>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
</template>
<style lang='scss' scoped>
.dashboard-container {
position: relative;
padding: 24px;
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
}
.github-corner {
position: absolute;
top: 0;
right: 0;
z-index: 99;
border: 0;
}
.data-box {
display: flex;
justify-content: space-between;
padding: 20px;
font-weight: bold;
color: var(--el-text-color-regular);
background: var(--el-bg-color-overlay);
border-color: var(--el-border-color);
box-shadow: var(--el-box-shadow-dark);
}
.svg-icon {
fill: currentcolor !important;
}
}
</style>

111
src/views/hr/displayboards/dimissionrate.vue
View File

@ -0,0 +1,111 @@
<!--
@ 作者: 秦东
@ 时间: 2023-06-30 16:03:33
@ 备注: 行政组织离职率
-->
<script lang='ts' setup>
import * as echarts from 'echarts';
import { zexianStrcut } from '@/api/displayboardapi/types'
import { getDimissionRate } from '@/api/displayboardapi/indexapi'
const legendList = new Array
const seriesData = new Array
const props = defineProps({
id: {
type: String,
default: 'barChart'
},
className: {
type: String,
default: ''
},
width: {
type: String,
default: '100%',
required: true
},
height: {
type: String,
default: '650px',
required: true
}
});
const option = {
title: {
text: '离职率（%）',
left:"center"
},
tooltip: {
trigger: 'axis'
},
legend: {
x:'left',
data: legendList,
orient: 'vertical',
top:"50"
},
grid: {
left: '270px',
right: '1%',
bottom: '1%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1月', '2月', '3月', '4月', '5月','6月','7月','8月','9月','10月','11月','12月']
},
yAxis: {
type: 'value'
},
series: seriesData
};
onMounted(() => {
getDimissionRate()
.then(( data:any )=>{
// console.log(data,data.data.list);
if(data.code == 0){
data.data.list.forEach((item: { orgname: any; odds: any; }) => {
legendList.push(item.orgname)
seriesData.push({
name: item.orgname,
type: 'line',
data: item.odds,
label:{
show:true
}
})
});
}
})
.finally(()=>{
// console.log("legendList--->",legendList)
// 图表初始化
const chart = echarts.init(
document.getElementById(props.id) as HTMLDivElement
);
chart.setOption(option);
// 大小自适应
window.addEventListener('resize', () => {
chart.resize();
});
})
});
</script>
<template>
<el-card class="w-full">
<div :id="id" :class="className" :style="{ height, width }" />
</el-card>
</template>
<style lang='scss' scoped>
</style>

125
src/views/hr/displayboards/educationpie.vue
View File

@ -0,0 +1,125 @@
<!--
@ 作者: 秦东
@ 时间: 2023-07-01 13:54:59
@ 备注: 学历饼图
-->
<script lang='ts' setup>
import * as echarts from 'echarts';
import { sendOrgCont,dimissionRateQuery } from '@/api/displayboardapi/types'
import { getOrgChiled,getEdtuStru } from '@/api/displayboardapi/indexapi'
const props = defineProps({
id: {
type: String,
default: 'barChart'
},
className: {
type: String,
default: ''
},
width: {
type: String,
default: '100%',
required: true
},
height: {
type: String,
default: '200px',
required: true
}
});
const legendList = new Array
const seriesData = new Array
const orgListCont = ref<sendOrgCont>()
const searchQuery = reactive<dimissionRateQuery>({})
/**
* 获取行政组织
*/
function getOrgList(){
getOrgChiled({id:313})
.then(( {data} )=>{
orgListCont.value = data
searchQuery.id = data.current
console.log("获取行政组织--->",data)
})
.finally(()=>{
giveXueLi()
})
}
/**
* 获取学历
*/
function giveXueLi(){
getEdtuStru({id:searchQuery.id})
.then(( {data} )=>{
console.log("获取学历--->",data)
seriesData.splice(0,seriesData.length);
data.forEach((item: { education: any; percentage: any; }) => {
legendList.push(item.education)
seriesData.push({
name: item.education,
value: item.percentage,
})
});
})
.finally(()=>{
// 图表初始化
const chart = echarts.init(
document.getElementById(props.id) as HTMLDivElement
);
chart.setOption(option);
// 大小自适应
window.addEventListener('resize', () => {
chart.resize();
});
})
}
onMounted(() => {
getOrgList()
})
const option = {
title: {
text: '学历占比（%）',
left: 'center'
},
tooltip: {
trigger: 'item'
},
series: [
{
type: 'pie',
radius: '60%',
data: seriesData,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
</script>
<template>
<el-card>
<template #header>
<el-select v-model="searchQuery.id" clearable placeholder="Select" @change="giveXueLi">
<el-option
v-for="item in orgListCont?.list"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</template>
<div :id="id" :class="className" :style="{ height, width }" />
</el-card>
</template>
<style lang='scss' scoped>
</style>

148
src/views/hr/displayboards/groupdimissionrate.vue
View File

@ -0,0 +1,148 @@
<!--
@ 作者: 秦东
@ 时间: 2023-07-01 08:40:52
@ 备注: 分公司下属行政组织离职率统计
-->
<script lang='ts' setup>
import * as echarts from 'echarts';
import { sendOrgCont,dimissionRateQuery } from '@/api/displayboardapi/types'
import { getOrgChiled,getOneOrgDimissionRate } from '@/api/displayboardapi/indexapi'
const props = defineProps({
id: {
type: String,
default: 'barChart'
},
className: {
type: String,
default: ''
},
width: {
type: String,
default: '100%',
required: true
},
height: {
type: String,
default: '730px',
required: true
}
});
const legendList = new Array
const seriesData = new Array
const orgListCont = ref<sendOrgCont>()
const searchQuery = reactive<dimissionRateQuery>({})
const option = {
title: {
text: '离职率（%）',
left:"center"
},
tooltip: {
trigger: 'axis'
},
legend: {
x:'left',
data: legendList,
orient: 'vertical',
top:"50"
},
grid: {
left: '150px',
right: '1%',
bottom: '0%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1月', '2月', '3月', '4月', '5月','6月','7月','8月','9月','10月','11月','12月']
},
yAxis: {
type: 'value'
},
series: seriesData
};
/**
* 获取行政组织
*/
function getOrgList(){
getOrgChiled({id:313})
.then(( {data} )=>{
orgListCont.value = data
searchQuery.id = data.current
// console.log("获取行政组织--->",data)
})
.finally(()=>{
huatu()
})
}
//画图
function huatu(){
getOneOrgDimissionRate(searchQuery)
.then(( data:any ) => {
// console.log("获取行政组织--1111->",data)
if(data.code == 0){
data.data.list.forEach((item: { orgname: any; odds: any; }) => {
legendList.push(item.orgname)
seriesData.push({
name: item.orgname,
type: 'line',
data: item.odds,
label:{
show:true
}
})
});
}
})
.finally(()=>{
// 图表初始化
const chart = echarts.init(
document.getElementById(props.id) as HTMLDivElement
);
chart.setOption(option);
// 大小自适应
window.addEventListener('resize', () => {
chart.resize();
});
});
}
onMounted(() => {
getOrgList()
})
</script>
<template>
<el-card>
<template #header>
<el-select v-model="searchQuery.id" clearable placeholder="Select" @change="huatu">
<el-option
v-for="item in orgListCont?.list"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
<el-date-picker
v-model="searchQuery.time"
type="year"
format="YYYY"
value-format="YYYY"
placeholder="请选择时间"
@change="huatu"
/>
</template>
<div :id="id" :class="className" :style="{ height, width }" />
</el-card>
</template>
<style lang='scss' scoped>
</style>

136
src/views/hr/displayboards/groupdimratepie.vue
View File

@ -0,0 +1,136 @@
<!--
@ 作者: 秦东
@ 时间: 2023-07-01 08:54:36
@ 备注: 饼形图
-->
<script lang='ts' setup>
import * as echarts from 'echarts';
import { sendOrgCont,dimissionRateQuery } from '@/api/displayboardapi/types'
import { getOrgChiled,getOrgTimeRate } from '@/api/displayboardapi/indexapi'
const props = defineProps({
id: {
type: String,
default: 'barChart'
},
className: {
type: String,
default: ''
},
width: {
type: String,
default: '100%',
required: true
},
height: {
type: String,
default: '200px',
required: true
}
});
const legendList = new Array
const seriesData = new Array
const orgListCont = ref<sendOrgCont>()
const searchQuery = reactive<dimissionRateQuery>({})
/**
* 获取行政组织
*/
function getOrgList(){
getOrgChiled({id:313})
.then(( {data} )=>{
orgListCont.value = data
searchQuery.id = data.current
console.log("获取行政组织--4334->",data)
})
.finally(()=>{
getCartView()
})
}
/**
* 获取图标
*/
function getCartView(){
getOrgTimeRate(searchQuery)
.then(( data:any )=>{
console.log("获取行政组织--123->",data)
if(data.code == 0){
seriesData.splice(0,seriesData.length);
data.data.list.forEach((item: { orgname: any; odds: any; }) => {
legendList.push(item.orgname)
seriesData.push({
name: item.orgname,
value: item.odds,
})
});
}
})
.finally(()=>{
// 图表初始化
const chart = echarts.init(
document.getElementById(props.id) as HTMLDivElement
);
chart.setOption(option);
// 大小自适应
window.addEventListener('resize', () => {
chart.resize();
});
})
}
const option = {
title: {
text: '部室、中心、分厂离职率（%）',
left: 'center'
},
tooltip: {
trigger: 'item'
},
series: [
{
type: 'pie',
radius: '60%',
data: seriesData,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
onMounted(() => {
getOrgList()
})
</script>
<template>
<el-card>
<template #header>
<el-select v-model="searchQuery.id" clearable placeholder="Select" @change="getCartView">
<el-option
v-for="item in orgListCont?.list"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
<el-date-picker
v-model="searchQuery.time"
type="month"
format="YYYY-MM"
value-format="YYYY-MM"
placeholder="请选择时间"
style="width: 120px;"
@change="getCartView"
/>
</template>
<div :id="id" :class="className" :style="{ height, width }" />
</el-card>
</template>
<style lang='scss' scoped>
</style>
Write Preview
Loading…
Cancel
Save