From e3a0df5002f65d3aa3b4056142f1cd345a830e32 Mon Sep 17 00:00:00 2001
From: herenshan112 <herenshan112@163.com>
Date: Mon, 3 Jul 2023 09:43:04 +0800
Subject: [PATCH] =?UTF-8?q?HR=E7=9C=8B=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/displayboardapi/indexapi.ts           |  53 +++++++
 src/api/displayboardapi/types.ts              |  52 ++++++
 src/views/hr/displayboard.vue                 |  79 +++++++++-
 src/views/hr/displayboards/dimissionrate.vue  | 111 +++++++++++++
 src/views/hr/displayboards/educationpie.vue   | 125 +++++++++++++++
 .../hr/displayboards/groupdimissionrate.vue   | 148 ++++++++++++++++++
 .../hr/displayboards/groupdimratepie.vue      | 136 ++++++++++++++++
 7 files changed, 702 insertions(+), 2 deletions(-)
 create mode 100644 src/api/displayboardapi/indexapi.ts
 create mode 100644 src/api/displayboardapi/types.ts
 create mode 100644 src/views/hr/displayboards/dimissionrate.vue
 create mode 100644 src/views/hr/displayboards/educationpie.vue
 create mode 100644 src/views/hr/displayboards/groupdimissionrate.vue
 create mode 100644 src/views/hr/displayboards/groupdimratepie.vue

diff --git a/src/api/displayboardapi/indexapi.ts b/src/api/displayboardapi/indexapi.ts
new file mode 100644
index 000000000..f8831eea3
--- /dev/null
+++ b/src/api/displayboardapi/indexapi.ts
@@ -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
+	});
+}
diff --git a/src/api/displayboardapi/types.ts b/src/api/displayboardapi/types.ts
new file mode 100644
index 000000000..ce20a62bb
--- /dev/null
+++ b/src/api/displayboardapi/types.ts
@@ -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;
+}
diff --git a/src/views/hr/displayboard.vue b/src/views/hr/displayboard.vue
index b5bb99bf9..2edc6bc16 100644
--- a/src/views/hr/displayboard.vue
+++ b/src/views/hr/displayboard.vue
@@ -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>
diff --git a/src/views/hr/displayboards/dimissionrate.vue b/src/views/hr/displayboards/dimissionrate.vue
new file mode 100644
index 000000000..e2ef05e6f
--- /dev/null
+++ b/src/views/hr/displayboards/dimissionrate.vue
@@ -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>
diff --git a/src/views/hr/displayboards/educationpie.vue b/src/views/hr/displayboards/educationpie.vue
new file mode 100644
index 000000000..cc12a28c9
--- /dev/null
+++ b/src/views/hr/displayboards/educationpie.vue
@@ -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>
diff --git a/src/views/hr/displayboards/groupdimissionrate.vue b/src/views/hr/displayboards/groupdimissionrate.vue
new file mode 100644
index 000000000..51804c86d
--- /dev/null
+++ b/src/views/hr/displayboards/groupdimissionrate.vue
@@ -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>
diff --git a/src/views/hr/displayboards/groupdimratepie.vue b/src/views/hr/displayboards/groupdimratepie.vue
new file mode 100644
index 000000000..d646944f2
--- /dev/null
+++ b/src/views/hr/displayboards/groupdimratepie.vue
@@ -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>