|
@@ -1,103 +1,86 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="personView">
|
|
<div class="personView">
|
|
|
- <div class="topView" style="width: 100%; height: 11%">
|
|
|
|
|
|
|
+ <div class="topView"
|
|
|
|
|
+ style="width: 100%; height: 11%">
|
|
|
<!-- <div class="jbd-title"> 人员管理看板 </div> -->
|
|
<!-- <div class="jbd-title"> 人员管理看板 </div> -->
|
|
|
<div class="jbd-title">
|
|
<div class="jbd-title">
|
|
|
- <dv-decoration-8
|
|
|
|
|
- style="
|
|
|
|
|
|
|
+ <dv-decoration-8 style="
|
|
|
width: 20%;
|
|
width: 20%;
|
|
|
height: 50px;
|
|
height: 50px;
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
left: 0px;
|
|
left: 0px;
|
|
|
top: 0px;
|
|
top: 0px;
|
|
|
- "
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ " />
|
|
|
<div style="width: 100%">
|
|
<div style="width: 100%">
|
|
|
<div style="height: 40%; font-size: 22px; margin-top: 10px">
|
|
<div style="height: 40%; font-size: 22px; margin-top: 10px">
|
|
|
人员管理看板
|
|
人员管理看板
|
|
|
</div>
|
|
</div>
|
|
|
<dv-decoration-5 style="width: 30%; height: 50%; margin: 0 auto" />
|
|
<dv-decoration-5 style="width: 30%; height: 50%; margin: 0 auto" />
|
|
|
</div>
|
|
</div>
|
|
|
- <dv-decoration-8
|
|
|
|
|
- :reverse="true"
|
|
|
|
|
- style="
|
|
|
|
|
|
|
+ <dv-decoration-8 :reverse="true"
|
|
|
|
|
+ style="
|
|
|
width: 20%;
|
|
width: 20%;
|
|
|
height: 50px;
|
|
height: 50px;
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
right: 0px;
|
|
right: 0px;
|
|
|
top: 0px;
|
|
top: 0px;
|
|
|
- "
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ " />
|
|
|
</div>
|
|
</div>
|
|
|
<div class="contain">
|
|
<div class="contain">
|
|
|
- <dv-decoration-11 class="personNum" style="margin-left: 10%"
|
|
|
|
|
- ><i
|
|
|
|
|
- class="el-icon-user"
|
|
|
|
|
- style="color: #4ea5d6; margin-right: 3px"
|
|
|
|
|
- ></i>
|
|
|
|
|
- 员工数量:{{ employeeNum }}人</dv-decoration-11
|
|
|
|
|
- >
|
|
|
|
|
- <dv-border-box-8
|
|
|
|
|
- class="date"
|
|
|
|
|
- style="margin-right: 10%; display: flex; align-items: center"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ <dv-decoration-11 class="personNum"
|
|
|
|
|
+ style="margin-left: 10%"><i class="el-icon-user"
|
|
|
|
|
+ style="color: #4ea5d6; margin-right: 3px"></i>
|
|
|
|
|
+ 员工数量:{{ employeeNum }}人</dv-decoration-11>
|
|
|
|
|
+ <dv-border-box-8 class="date"
|
|
|
|
|
+ style="margin-right: 10%; display: flex; align-items: center">
|
|
|
<!-- 部门选择 -->
|
|
<!-- 部门选择 -->
|
|
|
<SelectPositions @handleFunc="handleFunc" />
|
|
<SelectPositions @handleFunc="handleFunc" />
|
|
|
<div style="width: 30%; display: inline-block; margin-right: 3px">
|
|
<div style="width: 30%; display: inline-block; margin-right: 3px">
|
|
|
统计时间:
|
|
统计时间:
|
|
|
</div>
|
|
</div>
|
|
|
- <el-date-picker
|
|
|
|
|
- style="width: 75%"
|
|
|
|
|
- v-model="monthValues"
|
|
|
|
|
- type="monthrange"
|
|
|
|
|
- align="right"
|
|
|
|
|
- unlink-panels
|
|
|
|
|
- range-separator="至"
|
|
|
|
|
- start-placeholder="开始月份"
|
|
|
|
|
- end-placeholder="结束月份"
|
|
|
|
|
- :picker-options="pickerOptions"
|
|
|
|
|
- @change="changeDate"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ <el-date-picker style="width: 75%"
|
|
|
|
|
+ v-model="monthValues"
|
|
|
|
|
+ type="monthrange"
|
|
|
|
|
+ align="right"
|
|
|
|
|
+ unlink-panels
|
|
|
|
|
+ range-separator="至"
|
|
|
|
|
+ start-placeholder="开始月份"
|
|
|
|
|
+ end-placeholder="结束月份"
|
|
|
|
|
+ :picker-options="pickerOptions"
|
|
|
|
|
+ @change="changeDate">
|
|
|
</el-date-picker>
|
|
</el-date-picker>
|
|
|
</dv-border-box-8>
|
|
</dv-border-box-8>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <dv-border-box-1
|
|
|
|
|
- style="width: 100%; height: 89%; box-sizing: border-box; overflow: hidden"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ <dv-border-box-1 style="width: 100%; height: 89%; box-sizing: border-box; overflow: hidden">
|
|
|
<div style="height: 3%"></div>
|
|
<div style="height: 3%"></div>
|
|
|
<div class="middleView">
|
|
<div class="middleView">
|
|
|
<div class="viewLeft">
|
|
<div class="viewLeft">
|
|
|
- <pieView v-if="degreePieData.data[0].value" :info="degreePieData" />
|
|
|
|
|
|
|
+ <pieView :info="degreePieData" />
|
|
|
</div>
|
|
</div>
|
|
|
- <dv-decoration-2 :reverse="true" style="width: 2%; height: 100%" />
|
|
|
|
|
|
|
+ <dv-decoration-2 :reverse="true"
|
|
|
|
|
+ style="width: 2%; height: 100%" />
|
|
|
<div class="viewCenter">
|
|
<div class="viewCenter">
|
|
|
- <RingChart v-if="ranksPieData.data[2].value" :info="ranksPieData" />
|
|
|
|
|
|
|
+ <RingChart :info="ranksPieData" />
|
|
|
</div>
|
|
</div>
|
|
|
- <dv-decoration-2 :reverse="true" style="width: 2%; height: 100%" />
|
|
|
|
|
|
|
+ <dv-decoration-2 :reverse="true"
|
|
|
|
|
+ style="width: 2%; height: 100%" />
|
|
|
<div class="viewRight">
|
|
<div class="viewRight">
|
|
|
- <CarouselTabl
|
|
|
|
|
- v-if="personInfoData.data.length"
|
|
|
|
|
- :info="personInfoData"
|
|
|
|
|
- title="员工基本信息列表"
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ <CarouselTabl :info="personInfoData"
|
|
|
|
|
+ title="员工基本信息列表" />
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<dv-decoration-10 style="height: 2%; width: 96%; margin: 0 auto" />
|
|
<dv-decoration-10 style="height: 2%; width: 96%; margin: 0 auto" />
|
|
|
<div class="bottomView">
|
|
<div class="bottomView">
|
|
|
<div class="detectionTask">
|
|
<div class="detectionTask">
|
|
|
- <BarChart
|
|
|
|
|
- :info="PositionsOption"
|
|
|
|
|
- :config="{ title: '部门信息统计', id: 'positionsId' }"
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ <BarChart :info="PositionsOption"
|
|
|
|
|
+ :config="{ title: '部门信息统计', id: 'positionsId' }" />
|
|
|
</div>
|
|
</div>
|
|
|
- <dv-decoration-2 :reverse="true" style="width: 2%; height: 100%" />
|
|
|
|
|
|
|
+ <dv-decoration-2 :reverse="true"
|
|
|
|
|
+ style="width: 2%; height: 100%" />
|
|
|
<div class="taskMatters">
|
|
<div class="taskMatters">
|
|
|
- <BarChart
|
|
|
|
|
- v-if="optionPersonShow"
|
|
|
|
|
- :info="optionPerson"
|
|
|
|
|
- :config="{ title: '任务事宜统计', id: 'taskMatters' }"
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ <BarChart :info="optionPerson"
|
|
|
|
|
+ :config="{ title: '任务事宜统计', id: 'taskMatters' }" />
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</dv-border-box-1>
|
|
</dv-border-box-1>
|
|
@@ -291,9 +274,9 @@ export default {
|
|
|
{
|
|
{
|
|
|
name: "高中",
|
|
name: "高中",
|
|
|
value: 0,
|
|
value: 0,
|
|
|
- },
|
|
|
|
|
|
|
+ }
|
|
|
],
|
|
],
|
|
|
- color: ["#FFFF00", "#99CC00", "#6666FF"],
|
|
|
|
|
|
|
+ color: ["#FFFF00", "#99CC00", "#6666FF", "#c91f37"],
|
|
|
config: { title: "学历学位统计", idSelector: "degreeId" },
|
|
config: { title: "学历学位统计", idSelector: "degreeId" },
|
|
|
},
|
|
},
|
|
|
ranksPieData: {
|
|
ranksPieData: {
|
|
@@ -310,9 +293,9 @@ export default {
|
|
|
{
|
|
{
|
|
|
name: "初级",
|
|
name: "初级",
|
|
|
value: 0,
|
|
value: 0,
|
|
|
- },
|
|
|
|
|
|
|
+ }
|
|
|
],
|
|
],
|
|
|
- color: ["#FFFF00", "#99CC00", "#6666FF", "#FF6666"],
|
|
|
|
|
|
|
+ color: ["#FFFF00", "#99CC00", "#6666FF"],
|
|
|
config: { title: "职称统计", idSelector: "ranksid" },
|
|
config: { title: "职称统计", idSelector: "ranksid" },
|
|
|
},
|
|
},
|
|
|
// 员工基本信息图配置表
|
|
// 员工基本信息图配置表
|
|
@@ -323,7 +306,7 @@ export default {
|
|
|
// columnWidth: ["140", "80", "80", "80", "80", "80", "80", "80"],
|
|
// columnWidth: ["140", "80", "80", "80", "80", "80", "80", "80"],
|
|
|
header: ["姓名", "学历学位", "职称", "员工编号", "入职时间"],
|
|
header: ["姓名", "学历学位", "职称", "员工编号", "入职时间"],
|
|
|
data: [],
|
|
data: [],
|
|
|
- columnWidth: ["90", "90", "80", "120", "120"],
|
|
|
|
|
|
|
+ columnWidth: ["120", "90", "80", "120", "120"],
|
|
|
rowNum: 7,
|
|
rowNum: 7,
|
|
|
align: "center",
|
|
align: "center",
|
|
|
hoverPause: true,
|
|
hoverPause: true,
|
|
@@ -468,6 +451,8 @@ export default {
|
|
|
positions: [], // 用于部门统计信息sql条件查询
|
|
positions: [], // 用于部门统计信息sql条件查询
|
|
|
|
|
|
|
|
pisitionsValue: [], // 回填给子组件的部门全值
|
|
pisitionsValue: [], // 回填给子组件的部门全值
|
|
|
|
|
+ degreePieDataShow: false,
|
|
|
|
|
+ // 定时器
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
computed: {},
|
|
computed: {},
|
|
@@ -561,14 +546,19 @@ export default {
|
|
|
personInfo.push(item.zui_gao_xue_li_x_ || ` `);
|
|
personInfo.push(item.zui_gao_xue_li_x_ || ` `);
|
|
|
personInfo.push(item.zhi_cheng_deng_ji || ` `);
|
|
personInfo.push(item.zhi_cheng_deng_ji || ` `);
|
|
|
personInfo.push(item.jian_ding_zi_ge_z || ` `);
|
|
personInfo.push(item.jian_ding_zi_ge_z || ` `);
|
|
|
- personInfo.push(item.ren_zhi_shi_jian_ || ` `);
|
|
|
|
|
|
|
+ personInfo.push(item.ru_zhi_shi_jian_ || ` `);
|
|
|
this.personInfoData.data.push(personInfo || ` `);
|
|
this.personInfoData.data.push(personInfo || ` `);
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
//饼图 环形图数据
|
|
//饼图 环形图数据
|
|
|
async degreeGradeInfoData() {
|
|
async degreeGradeInfoData() {
|
|
|
- // this.degreePieData.data = [];
|
|
|
|
|
- // this.ranksPieData.data = [];
|
|
|
|
|
|
|
+ this.degreePieData.data[0].value = 0;
|
|
|
|
|
+ this.degreePieData.data[1].value = 0;
|
|
|
|
|
+ this.degreePieData.data[2].value = 0;
|
|
|
|
|
+ this.degreePieData.data[3].value = 0;
|
|
|
|
|
+ this.ranksPieData.data[0].value = 0;
|
|
|
|
|
+ this.ranksPieData.data[1].value = 0;
|
|
|
|
|
+ this.ranksPieData.data[2].value = 0;
|
|
|
let data = [];
|
|
let data = [];
|
|
|
let sql = `select
|
|
let sql = `select
|
|
|
sum(a.zui_gao_xue_li_x_ = '博士') as doctor,
|
|
sum(a.zui_gao_xue_li_x_ = '博士') as doctor,
|
|
@@ -580,28 +570,27 @@ export default {
|
|
|
sum(a.zhi_cheng_deng_ji = '高级') as senior,
|
|
sum(a.zhi_cheng_deng_ji = '高级') as senior,
|
|
|
sum(a.zhi_cheng_deng_ji = '' || a.zhi_cheng_deng_ji is null) as other
|
|
sum(a.zhi_cheng_deng_ji = '' || a.zhi_cheng_deng_ji is null) as other
|
|
|
from t_ryjbqk as a join ibps_party_employee as ee on a.parent_id_= ee.id_ where ee.id_ != '702117247933480960' and (${this.otherPositions.join(
|
|
from t_ryjbqk as a join ibps_party_employee as ee on a.parent_id_= ee.id_ where ee.id_ != '702117247933480960' and (${this.otherPositions.join(
|
|
|
- " or "
|
|
|
|
|
- )} )`;
|
|
|
|
|
|
|
+ " or "
|
|
|
|
|
+ )} )`;
|
|
|
await curdPost("sql", sql).then((res) => {
|
|
await curdPost("sql", sql).then((res) => {
|
|
|
data = res.variables.data;
|
|
data = res.variables.data;
|
|
|
});
|
|
});
|
|
|
- this.degreePieData.data[0].value = data[0].doctor ? data[0].doctor : "";
|
|
|
|
|
- this.degreePieData.data[1].value = data[0].Master ? data[0].Master : "";
|
|
|
|
|
|
|
+ this.degreePieData.data[0].value = data[0].doctor ? data[0].doctor : 0;
|
|
|
|
|
+ this.degreePieData.data[1].value = data[0].Master ? data[0].Master : 0;
|
|
|
this.degreePieData.data[2].value = data[0].undergraduate
|
|
this.degreePieData.data[2].value = data[0].undergraduate
|
|
|
? data[0].undergraduate
|
|
? data[0].undergraduate
|
|
|
- : "";
|
|
|
|
|
|
|
+ : 0;
|
|
|
this.degreePieData.data[3].value = data[0].gaoZhong
|
|
this.degreePieData.data[3].value = data[0].gaoZhong
|
|
|
? data[0].gaoZhong
|
|
? data[0].gaoZhong
|
|
|
- : "";
|
|
|
|
|
- this.ranksPieData.data[0].value = data[0].senior ? data[0].senior : "";
|
|
|
|
|
|
|
+ : 0;
|
|
|
|
|
+ this.ranksPieData.data[0].value = data[0].senior ? data[0].senior : 0;
|
|
|
this.ranksPieData.data[1].value = data[0].middleRank
|
|
this.ranksPieData.data[1].value = data[0].middleRank
|
|
|
? data[0].middleRank
|
|
? data[0].middleRank
|
|
|
- : "";
|
|
|
|
|
|
|
+ : 0;
|
|
|
this.ranksPieData.data[2].value = data[0].elementary
|
|
this.ranksPieData.data[2].value = data[0].elementary
|
|
|
? data[0].elementary
|
|
? data[0].elementary
|
|
|
- : "";
|
|
|
|
|
- // console.log("this.ranksPieData", this.ranksPieData);
|
|
|
|
|
- // console.log("this.degreePieData", this.degreePieData);
|
|
|
|
|
|
|
+ : 0;
|
|
|
|
|
+ this.degreePieDataShow = true
|
|
|
},
|
|
},
|
|
|
// 部门信息统计
|
|
// 部门信息统计
|
|
|
positionsInfoData() {
|
|
positionsInfoData() {
|
|
@@ -616,15 +605,21 @@ export default {
|
|
|
ee.id_ AS eeID,ee.name_ AS eeName,ee.positions_,ry.zui_gao_xue_li_x_,ry.zhi_cheng_deng_ji
|
|
ee.id_ AS eeID,ee.name_ AS eeName,ee.positions_,ry.zui_gao_xue_li_x_,ry.zhi_cheng_deng_ji
|
|
|
FROM t_ryjbqk AS ry JOIN ibps_party_employee AS ee ON ry.parent_id_= ee.id_ WHERE ee.id_ != '702117247933480960'
|
|
FROM t_ryjbqk AS ry JOIN ibps_party_employee AS ee ON ry.parent_id_= ee.id_ WHERE ee.id_ != '702117247933480960'
|
|
|
)gy LEFT JOIN ibps_party_entity en ON FIND_IN_SET(en.id_,gy.positions_) where (${this.positions.join(
|
|
)gy LEFT JOIN ibps_party_entity en ON FIND_IN_SET(en.id_,gy.positions_) where (${this.positions.join(
|
|
|
- " or "
|
|
|
|
|
- )}) GROUP BY enName) jh`;
|
|
|
|
|
|
|
+ " or "
|
|
|
|
|
+ )}) GROUP BY enName) jh`;
|
|
|
curdPost("sql", sql).then((res) => {
|
|
curdPost("sql", sql).then((res) => {
|
|
|
const data = res.variables.data;
|
|
const data = res.variables.data;
|
|
|
// 组装数据集,以学历职称为列,以部门为行:{"高中":['1','2','3']}
|
|
// 组装数据集,以学历职称为列,以部门为行:{"高中":['1','2','3']}
|
|
|
- let xAxisDatas = this.PositionsOption.xAxis[0].data;
|
|
|
|
|
|
|
+ // let xAxisDatas = this.PositionsOption.xAxis[0].data;
|
|
|
let seriesDatas = this.PositionsOption.series;
|
|
let seriesDatas = this.PositionsOption.series;
|
|
|
this.PositionsOption.xAxis[0].data = [];
|
|
this.PositionsOption.xAxis[0].data = [];
|
|
|
- this.PositionsOption.series = [];
|
|
|
|
|
|
|
+ this.PositionsOption.series[0].data = [];
|
|
|
|
|
+ this.PositionsOption.series[1].data = [];
|
|
|
|
|
+ this.PositionsOption.series[2].data = [];
|
|
|
|
|
+ this.PositionsOption.series[3].data = [];
|
|
|
|
|
+ this.PositionsOption.series[4].data = [];
|
|
|
|
|
+ this.PositionsOption.series[5].data = [];
|
|
|
|
|
+ this.PositionsOption.series[6].data = [];
|
|
|
|
|
|
|
|
if (data.length !== 0) {
|
|
if (data.length !== 0) {
|
|
|
// 跟《部门信息统计配置表》排列顺序一致
|
|
// 跟《部门信息统计配置表》排列顺序一致
|
|
@@ -638,12 +633,12 @@ export default {
|
|
|
"seniorZ_",
|
|
"seniorZ_",
|
|
|
];
|
|
];
|
|
|
for (let t = 0; t < data.length; t++) {
|
|
for (let t = 0; t < data.length; t++) {
|
|
|
- xAxisDatas.push(data[t].enName);
|
|
|
|
|
|
|
+ this.PositionsOption.xAxis[0].data.push(data[t].enName);
|
|
|
for (let i = 0; i < seriesDatas.length; i++) {
|
|
for (let i = 0; i < seriesDatas.length; i++) {
|
|
|
seriesDatas[i].data[t] = data[t][shuZuList[i]];
|
|
seriesDatas[i].data[t] = data[t][shuZuList[i]];
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
- this.PositionsOption.xAxis[0].data = xAxisDatas;
|
|
|
|
|
|
|
+ // this.PositionsOption.xAxis[0].data = xAxisDatas;
|
|
|
this.PositionsOption.series = seriesDatas;
|
|
this.PositionsOption.series = seriesDatas;
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
@@ -677,6 +672,7 @@ export default {
|
|
|
// 简化部门信息
|
|
// 简化部门信息
|
|
|
simplifyPosition(v) {
|
|
simplifyPosition(v) {
|
|
|
this.positions = []; // 用于sql条件查询
|
|
this.positions = []; // 用于sql条件查询
|
|
|
|
|
+ this.otherPositions = []
|
|
|
for (let i = 0; i < v.length; i++) {
|
|
for (let i = 0; i < v.length; i++) {
|
|
|
this.positions.push(`en.path_ like '%${v[i][v[i].length - 1]}%'`);
|
|
this.positions.push(`en.path_ like '%${v[i][v[i].length - 1]}%'`);
|
|
|
this.otherPositions.push(
|
|
this.otherPositions.push(
|
|
@@ -690,6 +686,17 @@ export default {
|
|
|
this.employeeInfoData();
|
|
this.employeeInfoData();
|
|
|
this.degreeGradeInfoData();
|
|
this.degreeGradeInfoData();
|
|
|
},
|
|
},
|
|
|
|
|
+ // 定时任务调用接口,一分钟一次
|
|
|
|
|
+ intervalHandle() {
|
|
|
|
|
+ this.interval = setInterval(() => {
|
|
|
|
|
+ //your codes
|
|
|
|
|
+ this.positionsInfoData();
|
|
|
|
|
+ this.employeeInfoData();
|
|
|
|
|
+ this.degreeGradeInfoData();
|
|
|
|
|
+ }, 180000)
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
},
|
|
},
|
|
|
created() {
|
|
created() {
|
|
|
const initendDate = new Date();
|
|
const initendDate = new Date();
|
|
@@ -708,18 +715,20 @@ export default {
|
|
|
new Date(this.startDate),
|
|
new Date(this.startDate),
|
|
|
new Date(
|
|
new Date(
|
|
|
initendDate.getFullYear() +
|
|
initendDate.getFullYear() +
|
|
|
- "-" +
|
|
|
|
|
- (initendDate.getMonth() + 1) +
|
|
|
|
|
- "-" +
|
|
|
|
|
- initendDate.getDate()
|
|
|
|
|
|
|
+ "-" +
|
|
|
|
|
+ (initendDate.getMonth() + 1) +
|
|
|
|
|
+ "-" +
|
|
|
|
|
+ initendDate.getDate()
|
|
|
),
|
|
),
|
|
|
];
|
|
];
|
|
|
},
|
|
},
|
|
|
mounted() {
|
|
mounted() {
|
|
|
- // this.handleFunc();
|
|
|
|
|
- // this.initData()
|
|
|
|
|
- // this.positionsInfoData()
|
|
|
|
|
- // this.initChart();
|
|
|
|
|
|
|
+ this.intervalHandle();
|
|
|
|
|
+ },
|
|
|
|
|
+ beforeDestroy() {
|
|
|
|
|
+ if (this.interval) {
|
|
|
|
|
+ clearInterval(this.interval)
|
|
|
|
|
+ }
|
|
|
},
|
|
},
|
|
|
};
|
|
};
|
|
|
</script>
|
|
</script>
|