完成教育盘点的学历、学位以及学校
yzw
parent
0e9e3e1b55
commit
9b15ff3f09
|
|
@ -45,19 +45,19 @@
|
|||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<div class="section-title region-title">员工地域统计</div>
|
||||
<div class="tab-title">员工地域统计</div>
|
||||
<div class="section-body">
|
||||
<div class="sbody-left">
|
||||
<el-tabs
|
||||
type="border-card"
|
||||
class="tab-card"
|
||||
@tab-click="handleTabClick"
|
||||
@tab-click="handleRegionTabClick"
|
||||
>
|
||||
<el-tab-pane label="省份"
|
||||
><div id="pic_region" class="pic pic-region"></div
|
||||
><div id="pic_region" class="pic tab-pic"></div
|
||||
></el-tab-pane>
|
||||
<el-tab-pane label="城市"
|
||||
><div id="pic_region_city" class="pic pic-region"></div
|
||||
><div id="pic_region_city" class="pic tab-pic"></div
|
||||
></el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
|
@ -75,11 +75,29 @@
|
|||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<div class="section-title">员工学历统计</div>
|
||||
<div class="tab-title">员工学历统计</div>
|
||||
<div class="section-body">
|
||||
<div class="sbody-left"></div>
|
||||
<div class="sbody-left">
|
||||
<el-tabs
|
||||
type="border-card"
|
||||
class="tab-card"
|
||||
@tab-click="handleEduTabClick"
|
||||
>
|
||||
<el-tab-pane label="全日制"
|
||||
><div id="pic_full_edu" class="pic tab-pic"></div
|
||||
></el-tab-pane>
|
||||
<el-tab-pane label="在职"
|
||||
><div id="pic_work_edu" class="pic tab-pic"></div
|
||||
></el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<div class="sbody-right">
|
||||
<p></p>
|
||||
<p>
|
||||
全日制学历中，大学本科占比最多，达31.2%。其次是高中以及中专学历。
|
||||
</p>
|
||||
<p>
|
||||
厂内累计342人在职提升学历，将学历提升到大专的人最多，占比达77.2%
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -87,8 +105,13 @@
|
|||
<div class="slide">
|
||||
<div class="section-title">员工学位统计</div>
|
||||
<div class="section-body">
|
||||
<div class="sbody-left"></div>
|
||||
<div class="sbody-right"></div>
|
||||
<div class="sbody-left">
|
||||
<div id="pic_degree" class="pic"></div>
|
||||
</div>
|
||||
<div class="sbody-right">
|
||||
<p>全日制学位数量远大于在职学位数量。</p>
|
||||
<p>全日制学位中，学士数量远大于硕士，大约是其7倍。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -101,10 +124,36 @@
|
|||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<div class="section-title">员工学校统计</div>
|
||||
<div class="tab-title">员工学校统计</div>
|
||||
<div class="section-body">
|
||||
<div class="sbody-left"></div>
|
||||
<div class="sbody-right"></div>
|
||||
<div class="sbody-left2">
|
||||
<el-tabs
|
||||
type="border-card"
|
||||
class="tab-card2"
|
||||
@tab-click="handleSchoolTabClick"
|
||||
>
|
||||
<el-tab-pane label="全日制">
|
||||
<div id="pic_full_school" class="pic2"></div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="在职">
|
||||
<div id="pic_work_school" class="pic2"></div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<div class="sbody-right">
|
||||
<p class="p2">
|
||||
全日制教育中，毕业于湖北民族大学的员工最多，其次是湖北恩施学院、湖北工业大学。
|
||||
</p>
|
||||
<p class="p2">
|
||||
全日制教育中，26位员工毕业于“211”高校，9位员工毕业于“985”高校。
|
||||
</p>
|
||||
<p class="p2">
|
||||
在职教育中，毕业于恩施职业技术学院的员工醉倒，其次是中央广播电视大学、湖北广播电视大学。
|
||||
</p>
|
||||
<p class="p2">
|
||||
在职教育中，39位员工毕业于“211”高校，10位员工毕业于“985”高校。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -126,10 +175,12 @@ import "@/assets/js/jquery.fullPage.min.js";
|
|||
|
||||
import * as echarts from "echarts";
|
||||
import * as personApi from "@/api/person";
|
||||
import { options } from "runjs";
|
||||
export default {
|
||||
name: "PersonReview",
|
||||
data() {
|
||||
return {
|
||||
// 人口特征
|
||||
genderData: [],
|
||||
ageData: {},
|
||||
nationData: [],
|
||||
|
|
@ -141,6 +192,18 @@ export default {
|
|||
nationChart: null,
|
||||
regionChart: null,
|
||||
regionCityChart: null,
|
||||
|
||||
// 教育
|
||||
fullEduData: [],
|
||||
workEduData: {},
|
||||
degreeData: [],
|
||||
fullSchoolData: {},
|
||||
workSchoolData: {},
|
||||
schoolCategory: ["211", "985"],
|
||||
|
||||
fullEduChart: null,
|
||||
workEduChart: null,
|
||||
degreeChart: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -176,7 +239,6 @@ export default {
|
|||
return (manNum / womanNum).toFixed(1);
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
$(() => {
|
||||
$("#full_page").fullpage({
|
||||
|
|
@ -206,6 +268,20 @@ export default {
|
|||
// 地域 不播放动画
|
||||
// this.showRegionPic()
|
||||
}
|
||||
} else if (origin == 2) {
|
||||
// 教育特征
|
||||
if (destination == 1) {
|
||||
// 学历
|
||||
this.showFullEduPie();
|
||||
} else if (destination == 2) {
|
||||
// 学位
|
||||
this.showDegreeBar();
|
||||
} else if (destination == 3) {
|
||||
// 专业
|
||||
} else if (destination == 4) {
|
||||
// 学校
|
||||
this.showFullSchoolPie();
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
|
@ -222,6 +298,16 @@ export default {
|
|||
this.regionChart = echarts.init(chartDom);
|
||||
chartDom = document.getElementById("pic_region_city");
|
||||
this.regionCityChart = echarts.init(chartDom);
|
||||
chartDom = document.getElementById("pic_full_edu");
|
||||
this.fullEduChart = echarts.init(chartDom);
|
||||
chartDom = document.getElementById("pic_work_edu");
|
||||
this.workEduChart = echarts.init(chartDom);
|
||||
chartDom = document.getElementById("pic_degree");
|
||||
this.degreeChart = echarts.init(chartDom);
|
||||
chartDom = document.getElementById("pic_full_school");
|
||||
this.fullSchoolChart = echarts.init(chartDom);
|
||||
chartDom = document.getElementById("pic_work_school");
|
||||
this.workSchoolChart = echarts.init(chartDom);
|
||||
|
||||
// 请求人口数据
|
||||
personApi.getReviewPopulation().then(
|
||||
|
|
@ -321,23 +407,91 @@ export default {
|
|||
console.log("err: ", err);
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
// 请求教育数据
|
||||
personApi.getReviewEducation().then(
|
||||
(res) => {
|
||||
console.log(res)
|
||||
let resData = res.data;
|
||||
// 数据格式转换
|
||||
// 全日制学历
|
||||
let fullEduData = resData["全日制学历"];
|
||||
let tempArr = [];
|
||||
let nameOrder = ["初中", "中专", "高中", "大专", "大学", "研究生"];
|
||||
for (let name of nameOrder) {
|
||||
tempArr.push({ name: name, value: fullEduData[name] });
|
||||
}
|
||||
this.fullEduData = tempArr;
|
||||
// 在职学历
|
||||
let workEduData = resData["在职学历"];
|
||||
tempArr = [];
|
||||
nameOrder = ["中专", "高中", "大专", "大学", "研究生"];
|
||||
for (let name of nameOrder) {
|
||||
tempArr.push(workEduData[name]);
|
||||
}
|
||||
this.workEduData["xAxis"] = nameOrder;
|
||||
this.workEduData["yAxis"] = tempArr;
|
||||
// 学位
|
||||
tempArr = [];
|
||||
let tempObj = { 类别: "全日制" };
|
||||
Object.assign(tempObj, resData["全日制学位"]);
|
||||
tempArr.push(tempObj);
|
||||
tempObj = { 类别: "在职" };
|
||||
Object.assign(tempObj, resData["在职学位"]);
|
||||
tempArr.push(tempObj);
|
||||
this.degreeData = tempArr;
|
||||
// 学校
|
||||
function sortSchoolRecord(x, y) {
|
||||
return y.value - x.value;
|
||||
}
|
||||
// 全日制学校
|
||||
tempArr = [];
|
||||
let fullSchoolData = resData["全日制学校"];
|
||||
let schoolPersonData = fullSchoolData["人数"];
|
||||
for (let school in schoolPersonData) {
|
||||
tempArr.push({ name: school, value: schoolPersonData[school] });
|
||||
}
|
||||
tempArr.sort(sortSchoolRecord);
|
||||
let tempArr2 = tempArr.slice(0, 10);
|
||||
let restSum = tempArr.slice(10).reduce((sum, e) => {
|
||||
return sum + Number(e.value || 0);
|
||||
}, 0);
|
||||
tempArr2.push({ name: "其他", value: restSum });
|
||||
this.fullSchoolData["人数"] = tempArr2;
|
||||
// 级别
|
||||
tempArr = [];
|
||||
for (let key of this.schoolCategory) {
|
||||
tempArr.push(fullSchoolData["级别"][key]);
|
||||
}
|
||||
this.fullSchoolData["级别"] = tempArr;
|
||||
// 在职学校
|
||||
tempArr = [];
|
||||
let workSchoolData = resData["在职学校"];
|
||||
schoolPersonData = workSchoolData["人数"];
|
||||
for (let school in schoolPersonData) {
|
||||
tempArr.push({ name: school, value: schoolPersonData[school] });
|
||||
}
|
||||
tempArr.sort(sortSchoolRecord);
|
||||
tempArr2 = tempArr.slice(0, 10);
|
||||
restSum = tempArr.slice(10).reduce((sum, e) => {
|
||||
return sum + Number(e.value || 0);
|
||||
}, 0);
|
||||
tempArr2.push({ name: "其他", value: restSum });
|
||||
this.workSchoolData["人数"] = tempArr2;
|
||||
// 级别
|
||||
tempArr = [];
|
||||
for (let key of this.schoolCategory) {
|
||||
tempArr.push(workSchoolData["级别"][key]);
|
||||
}
|
||||
this.workSchoolData["级别"] = tempArr;
|
||||
},
|
||||
(err) => {
|
||||
console.log('err', err)
|
||||
console.log("err", err);
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
);
|
||||
},
|
||||
methods: {
|
||||
showGenderPie() {
|
||||
let option;
|
||||
option = {
|
||||
let option = {
|
||||
title: {
|
||||
text: "恩施卷烟厂员工性别分布饼图",
|
||||
// subtext: "",
|
||||
|
|
@ -498,9 +652,204 @@ export default {
|
|||
};
|
||||
option && this.regionCityChart.setOption(option);
|
||||
},
|
||||
handleTabClick(tab, event) {
|
||||
handleRegionTabClick(tab, event) {
|
||||
if (tab.label == "城市") {
|
||||
setTimeout(this.showRegionCityPie, 0)
|
||||
setTimeout(this.showRegionCityPie, 10);
|
||||
}
|
||||
},
|
||||
showFullEduPie() {
|
||||
let option = {
|
||||
title: {
|
||||
text: "恩施卷烟厂员工全日制学历分布饼图",
|
||||
// subtext: "",
|
||||
left: "center",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
legend: {
|
||||
orient: "vertical",
|
||||
left: "left",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
// name: "Access From",
|
||||
type: "pie",
|
||||
radius: "50%",
|
||||
data: this.fullEduData,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: "rgba(0, 0, 0, 0.5)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
this.fullEduChart.setOption(option);
|
||||
},
|
||||
showWorkEduBar() {
|
||||
let option = {
|
||||
title: {
|
||||
text: "恩施卷烟厂员工在职学历分布直方图",
|
||||
left: "center",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: this.workEduData.xAxis,
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: this.workEduData.yAxis,
|
||||
type: "bar",
|
||||
},
|
||||
],
|
||||
};
|
||||
this.workEduChart.setOption(option);
|
||||
},
|
||||
showDegreeBar() {
|
||||
let option = {
|
||||
title: {
|
||||
text: "恩施卷烟厂员工学位分布直方图",
|
||||
},
|
||||
legend: {
|
||||
orient: "vertical",
|
||||
left: "right",
|
||||
},
|
||||
tooltip: {},
|
||||
dataset: {
|
||||
dimensions: ["类别", "学士", "硕士", "博士"],
|
||||
source: this.degreeData,
|
||||
},
|
||||
xAxis: { type: "category" },
|
||||
yAxis: {},
|
||||
series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
|
||||
};
|
||||
this.degreeChart.setOption(option);
|
||||
},
|
||||
handleEduTabClick(tab, event) {
|
||||
if (tab.label == "在职") {
|
||||
setTimeout(this.showWorkEduBar, 10);
|
||||
}
|
||||
},
|
||||
showFullSchoolPie() {
|
||||
let option = {
|
||||
grid: [
|
||||
{
|
||||
x: "70%",
|
||||
y: "20%",
|
||||
width: "30%",
|
||||
height: "60%",
|
||||
},
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
gridIndex: 0,
|
||||
type: "category",
|
||||
data: this.schoolCategory,
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
gridIndex: 0,
|
||||
},
|
||||
],
|
||||
title: [
|
||||
{
|
||||
text: "全日制教育学校分布饼图",
|
||||
x: "20%",
|
||||
y: "3%",
|
||||
},
|
||||
{
|
||||
text: "全日制教育学校分类饼图",
|
||||
x: "75%",
|
||||
y: "3%",
|
||||
},
|
||||
],
|
||||
tooltip: {},
|
||||
legend: {
|
||||
x: "center",
|
||||
y: "bottom",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: "50%",
|
||||
center: ["30%", "50%"],
|
||||
data: this.fullSchoolData["人数"],
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
data: this.fullSchoolData["级别"],
|
||||
},
|
||||
],
|
||||
};
|
||||
this.fullSchoolChart.setOption(option);
|
||||
},
|
||||
showWorkSchoolPie() {
|
||||
let option = {
|
||||
grid: [
|
||||
{
|
||||
x: "70%",
|
||||
y: "20%",
|
||||
width: "30%",
|
||||
height: "60%",
|
||||
},
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
gridIndex: 0,
|
||||
type: "category",
|
||||
data: this.schoolCategory,
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
gridIndex: 0,
|
||||
},
|
||||
],
|
||||
title: [
|
||||
{
|
||||
text: "在职教育学校分布饼图",
|
||||
x: "20%",
|
||||
y: "3%",
|
||||
},
|
||||
{
|
||||
text: "在职教育学校分类饼图",
|
||||
x: "75%",
|
||||
y: "3%",
|
||||
},
|
||||
],
|
||||
tooltip: {},
|
||||
legend: {
|
||||
x: "center",
|
||||
y: "bottom",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: "50%",
|
||||
center: ["30%", "50%"],
|
||||
data: this.workSchoolData["人数"],
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
data: this.workSchoolData["级别"],
|
||||
},
|
||||
],
|
||||
};
|
||||
this.workSchoolChart.setOption(option);
|
||||
},
|
||||
handleSchoolTabClick(tab, event) {
|
||||
if (tab.label == "在职") {
|
||||
setTimeout(this.showWorkSchoolPie, 10);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
@ -519,7 +868,7 @@ export default {
|
|||
margin: -10% auto 40px;
|
||||
}
|
||||
|
||||
.region-title {
|
||||
.tab-title {
|
||||
margin: -8% auto 20px;
|
||||
}
|
||||
|
||||
|
|
@ -534,6 +883,11 @@ export default {
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
.sbody-left2 {
|
||||
flex: 2;
|
||||
/* background-color: rgb(96, 52, 219); */
|
||||
}
|
||||
|
||||
.sbody-right {
|
||||
/* background-color: rgb(70, 211, 52); */
|
||||
flex: 1;
|
||||
|
|
@ -544,6 +898,10 @@ export default {
|
|||
margin-right: 5%;
|
||||
}
|
||||
|
||||
.tab-card2 {
|
||||
margin-left: 15%;
|
||||
}
|
||||
|
||||
.pic {
|
||||
height: 600px;
|
||||
width: 600px;
|
||||
|
|
@ -552,7 +910,13 @@ export default {
|
|||
/* border: 1px #ddd solid; */
|
||||
}
|
||||
|
||||
.pic-region {
|
||||
.pic2 {
|
||||
height: 600px;
|
||||
width: 900px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.tab-pic {
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
|
|
@ -561,6 +925,10 @@ export default {
|
|||
text-align: left;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.p2 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue