员工信息页面增加了个人经历和考核信息的功能
yzw
parent
fba8fd83a9
commit
d11c5e4856
|
|
@ -79,3 +79,12 @@ export function getReviewRoutine(params) {
|
|||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function getAppraise(params) {
|
||||
return request({
|
||||
url: '/person/appraise',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -22,10 +22,81 @@
|
|||
<div class="pp-block2">
|
||||
<div class="pp-block2-left">
|
||||
<p class="item-title-p">个人经历</p>
|
||||
<div class="item-content-div" style="margin-right: 10px">
|
||||
<div class="tag-bar">
|
||||
<span>工作经历</span>
|
||||
<el-tag v-if="industryExperience"
|
||||
>{{ industryExperience }}年工厂经验</el-tag
|
||||
>
|
||||
<el-tag v-if="jobExperience"
|
||||
>{{ jobExperience }}年岗位经验</el-tag
|
||||
>
|
||||
</div>
|
||||
<div class="tag-bar">
|
||||
<span>教育经历</span>
|
||||
<el-tag v-if="personData['全日制毕（肄）业学校（单位）名称']">{{
|
||||
personData["全日制毕（肄）业学校（单位）名称"]
|
||||
}}</el-tag>
|
||||
<el-tag v-if="personData['全日制毕（肄）业专业名称']">{{
|
||||
personData["全日制毕（肄）业专业名称"]
|
||||
}}</el-tag>
|
||||
<el-tag v-if="personData['在职毕（肄）业学校（单位）名称']">{{
|
||||
personData["在职毕（肄）业学校（单位）名称"]
|
||||
}}</el-tag>
|
||||
<el-tag v-if="personData['在职毕（肄）业专业名称']">{{
|
||||
personData["在职毕（肄）业专业名称"]
|
||||
}}</el-tag>
|
||||
</div>
|
||||
<div class="tag-bar">
|
||||
<span>知识技能</span>
|
||||
<el-tag v-if="personData['最高专业技术资格等级']"
|
||||
>{{ personData["最高专业技术资格等级"]
|
||||
}}{{ personData["最高专业技术资格名称"] }}</el-tag
|
||||
>
|
||||
<el-tag v-if="personData['最高职业技能等级级别']"
|
||||
>{{ personData["最高职业技能等级级别"]
|
||||
}}{{ personData["最高职业技能等级名称"] }}</el-tag
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pp-block2-right">
|
||||
<p class="item-title-p">考核</p>
|
||||
<div class="item-content-div">
|
||||
<div id="appraise_chart" style="height: 100%; width: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pp-block2">
|
||||
<div class="pp-block2-left">
|
||||
<p class="item-title-p">州级以上荣誉</p>
|
||||
<div class="item-content-div" style="margin-right: 10px"></div>
|
||||
</div>
|
||||
<div class="pp-block2-right">
|
||||
<p class="item-title-p">绩效</p>
|
||||
<p class="item-title-p">年度先进</p>
|
||||
<div class="item-content-div"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pp-block2">
|
||||
<div class="pp-block2-left">
|
||||
<p class="item-title-p">创新</p>
|
||||
<div class="item-content-div" style="margin-right: 10px"></div>
|
||||
</div>
|
||||
<div class="pp-block2-right">
|
||||
<p class="item-title-p">活动</p>
|
||||
<div class="item-content-div"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pp-block2">
|
||||
<div class="pp-block2-left">
|
||||
<p class="item-title-p">事务</p>
|
||||
<div class="item-content-div" style="margin-right: 10px"></div>
|
||||
</div>
|
||||
<div class="pp-block2-right">
|
||||
<p class="item-title-p">党务</p>
|
||||
<div class="item-content-div"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -37,6 +108,8 @@
|
|||
import * as echarts from "echarts";
|
||||
import "echarts-wordcloud";
|
||||
|
||||
import * as personApi from "@/api/person";
|
||||
|
||||
export default {
|
||||
props: ["data"],
|
||||
data() {
|
||||
|
|
@ -63,11 +136,91 @@ export default {
|
|||
{ name: "创新达人", value: 90 },
|
||||
{ name: "初级助理工程师", value: 80 },
|
||||
],
|
||||
radarData: [
|
||||
{
|
||||
value: [49, 45, 34, 20, 78],
|
||||
name: "个人",
|
||||
},
|
||||
{
|
||||
value: [33, 73, 21, 22, 57],
|
||||
name: "全员平均",
|
||||
},
|
||||
],
|
||||
appraiseData: {},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.showRadarChart();
|
||||
this.showWordCloud();
|
||||
if (!this.personData.hasOwnProperty("姓名")) {
|
||||
return;
|
||||
}
|
||||
// 发送词云请求
|
||||
personApi
|
||||
.getPersonTag({
|
||||
query: this.$store.state.user.id_card,
|
||||
})
|
||||
.then(
|
||||
(res) => {
|
||||
this.wordcloudData = res.data.wordcloud;
|
||||
this.radarData = res.data.radar;
|
||||
this.showWordCloud();
|
||||
this.showRadarChart();
|
||||
},
|
||||
(err) => {
|
||||
console.log("err", err);
|
||||
}
|
||||
);
|
||||
|
||||
// 发送考核请求
|
||||
personApi
|
||||
.getAppraise({
|
||||
id_card: this.$store.state.user.id_card,
|
||||
})
|
||||
.then(
|
||||
(res) => {
|
||||
let resData = res.data;
|
||||
let xAxisData = [],
|
||||
yAxisData = [],
|
||||
nameData = [];
|
||||
let appraiseMap = {
|
||||
不确定等次: 0,
|
||||
不合格: 1,
|
||||
不称职: 1,
|
||||
基本合格: 2,
|
||||
基本称职: 2,
|
||||
合格: 3,
|
||||
称职: 3,
|
||||
优秀: 4,
|
||||
};
|
||||
// 此处不需要对年份进行排序，接口返回的数据有序
|
||||
for (let year in resData) {
|
||||
xAxisData.push(year);
|
||||
let appraiseValue = resData[year];
|
||||
if (appraiseValue in appraiseMap) {
|
||||
yAxisData.push(appraiseMap[appraiseValue]);
|
||||
} else {
|
||||
yAxisData.push(0);
|
||||
}
|
||||
nameData.push(appraiseValue);
|
||||
}
|
||||
this.appraiseData = {
|
||||
xAxis: xAxisData,
|
||||
yAxis: yAxisData,
|
||||
name: nameData,
|
||||
};
|
||||
this.showAppraiseChart();
|
||||
},
|
||||
(err) => {
|
||||
console.log("err", err);
|
||||
}
|
||||
);
|
||||
},
|
||||
computed: {
|
||||
industryExperience() {
|
||||
return this.getAge(this.personData["进入行业时间"]);
|
||||
},
|
||||
jobExperience() {
|
||||
return this.getAge(this.personData["现岗位起始时间"]);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
showRadarChart() {
|
||||
|
|
@ -79,11 +232,13 @@ export default {
|
|||
title: {
|
||||
text: "",
|
||||
},
|
||||
color: ["#5470c6", "#91cc75"],
|
||||
legend: {
|
||||
data: ["个人", "全员平均"],
|
||||
},
|
||||
tooltip: {},
|
||||
radar: {
|
||||
shape: "circle",
|
||||
// shape: "circle",
|
||||
indicator: [
|
||||
// { name: "工作态度", max: 100 },
|
||||
{ name: "工作能力", max: 100 },
|
||||
|
|
@ -97,16 +252,7 @@ export default {
|
|||
{
|
||||
name: "员工表现雷达图",
|
||||
type: "radar",
|
||||
data: [
|
||||
{
|
||||
value: [49, 45, 34, 20, 78],
|
||||
name: "个人",
|
||||
},
|
||||
{
|
||||
value: [33, 73, 21, 22, 57],
|
||||
name: "全员平均",
|
||||
},
|
||||
],
|
||||
data: this.radarData,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -158,6 +304,61 @@ export default {
|
|||
],
|
||||
});
|
||||
},
|
||||
getAge(birthday) {
|
||||
//出生时间 毫秒
|
||||
let birthDayTime = new Date(birthday).getTime();
|
||||
if (birthDayTime !== birthDayTime) {
|
||||
// NaN
|
||||
return null;
|
||||
}
|
||||
//当前时间 毫秒
|
||||
let nowTime = new Date().getTime();
|
||||
//一年毫秒数(365 * 86400000 = 31536000000)
|
||||
return Math.ceil((nowTime - birthDayTime) / 31536000000);
|
||||
},
|
||||
showAppraiseChart() {
|
||||
let myChart = echarts.init(document.getElementById("appraise_chart"));
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
formatter: (params) => {
|
||||
let year = params[0]["name"];
|
||||
let value = params[0]["value"];
|
||||
let yearIndex = this.appraiseData["xAxis"].indexOf(year);
|
||||
let name = this.appraiseData["name"][yearIndex];
|
||||
return `${name}: ${value}`;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: this.appraiseData["xAxis"],
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
},
|
||||
grid: {
|
||||
top: "6%",
|
||||
left: "1%",
|
||||
right: "1%",
|
||||
bottom: "1%",
|
||||
containLabel: true,
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: "inside",
|
||||
start: 0,
|
||||
end: 100,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
data: this.appraiseData["yAxis"],
|
||||
type: "line",
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -234,4 +435,14 @@ export default {
|
|||
height: 80%;
|
||||
border: 1px #e4e7ed solid;
|
||||
}
|
||||
|
||||
.tag-bar {
|
||||
margin: 10px 0px 0px 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.tag-bar > .el-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -124,7 +124,8 @@ export default {
|
|||
personData: this.data,
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
mounted() {
|
||||
},
|
||||
computed: {
|
||||
workAge: function () {
|
||||
return this.getAge(this.personData.参加工作时间);
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
<el-tab-pane label="个人信息" name="ComPersonInformation"></el-tab-pane>
|
||||
<el-tab-pane label="人事变动记录" name="ComChange"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<component :is="comName" :data="personData"></component>
|
||||
<component :is="comName" :data="personData" :key="personData['证件号码']"></component>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
|
|
@ -56,12 +56,12 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
comName: "ComPersonPicture",
|
||||
personData: null,
|
||||
personData: {},
|
||||
avatarUrl: require("@/assets/images/女.png")
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// 发送请求
|
||||
// 发送获取基本信息请求
|
||||
personApi.getPersonData({
|
||||
"id_card": this.$store.state.user.id_card
|
||||
}).then(
|
||||
|
|
@ -73,6 +73,8 @@ export default {
|
|||
console.log('err:', err);
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
},
|
||||
computed: {
|
||||
personAge() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue