Skip to content

A
attendance-performance-platform
Commit cef93705 authored by “yiyousong”'s avatar “yiyousong”
Browse files
Options

feat:360部门绩效、异常分值分布、绩效规则分布、个人绩效、反馈记录接口调试完成

parent 618e0a0a
Show whitespace changes
Inline Side-by-side
Showing with 9320 additions and 9176 deletions
attendance-performance-manager-ui/admin/src/components/Header.vue
View file @ cef93705
......@@ -11,11 +11,11 @@
<router-link to="/">
<img
src="../assets/images/logo.png"
style="margin-bottom:5px;margin-left: 24px;"
style="margin-bottom: 5px; margin-left: 24px"
height="40"
alt=""
/>
<b style="color:white;font-size:20px;">
<b style="color: white; font-size: 20px">
&nbsp;&nbsp;&nbsp;智慧政务绩效管理系统
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</b>
......@@ -43,14 +43,14 @@
</el-badge>
</div> -->
<div class="controllBar" @click="returnHome">
<i class="el-icon-s-home" style="font-size: 15px;margin-right: 10px">
<i class="el-icon-s-home" style="font-size: 15px; margin-right: 10px">
首页</i
>
</div>
<div class="layout-profile">
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link" style="color:white">
<span class="el-dropdown-link" style="color: white">
{{ userData.currUserName }}
<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
</span>
......@@ -124,9 +124,7 @@ export default {
beforeDestroy() {
console.log("beforeDestroy");
},
mounted() {
console.log(this.menu);
},
mounted() {},
computed: {
group() {
const relativeGroup = this.$store.state.group;
......
attendance-performance-manager-ui/admin/src/views/homeCharts/record/list.vue
View file @ cef93705
......@@ -5,26 +5,39 @@
<div class="title">
部门绩效总分排名TOP10
<div class="button_box">
<span>今年</span>
<span class="check">本月</span>
<span>今日</span>
<span
:class="{ check: v.value == depAttendanceTopDate }"
v-for="v in searchTimes"
:key="v.value"
@click="changeDate('depAttendanceTopDate', v.value)"
>{{ v.label }}</span
>
</div>
</div>
<dv-scroll-ranking-board
:config="config"
style="width:100%;height:75%"
style="width: 100%; height: 75%"
/>
</div>
<div class="left_mid">
<div class="title">
异常分值分布情况
<div class="button_box">
<span>今年</span>
<span class="check">本月</span>
<span>今日</span>
<span
:class="{ check: v.value == abnormalDisDate }"
v-for="v in searchTimes"
:key="v.value"
@click="changeDate('abnormalDisDate', v.value)"
>{{ v.label }}</span
>
</div>
<div id="leida" style="width: 100%;height: 100%;"></div>
</div>
<div id="leida" style="width: 100%; height: 90%"></div>
</div>
<div class="left_down">
<div id="rulePie" style="width: 100%;height: 100%;"></div>
<div class="title">绩效规则分布情况</div>
<div id="rulePie" style="width: 100%; height: 90%"></div>
</div>
</div>
<div class="mid">
......@@ -138,7 +151,7 @@
<div class="mid_down">
<div class="down_content">
<img class="content_title" src="../../../assets/images/title.png" />
<div style="margin: 20px 0;">
<div style="margin: 20px 0">
<el-radio-group v-model="type" border>
<el-radio-button label="1">部门评估</el-radio-button>
<el-radio-button label="2">个人评估</el-radio-button>
......@@ -150,7 +163,7 @@
<el-select
v-model="form.region"
placeholder="请选择部门"
style="width: 100%;"
style="width: 100%"
>
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
......@@ -161,21 +174,21 @@
type="date"
placeholder="选择日期"
v-model="form.date1"
style="width: 100%;"
style="width: 100%"
></el-date-picker>
</el-form-item>
<el-form-item label="请选择类型：" style="text-align: left;">
<el-form-item label="请选择类型：" style="text-align: left">
<el-radio-group v-model="form.resource">
<el-radio label="0">按年</el-radio>
<el-radio label="1">按月</el-radio>
<el-radio label="2">按天</el-radio>
<el-radio :label="1">按年</el-radio>
<el-radio :label="2">按月</el-radio>
<el-radio :label="3">按天</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button
type="primary"
@click="onSubmit"
style="margin-top: 20px;transform: translateX(-50%);"
style="margin-top: 20px; transform: translateX(-50%)"
>立即创建</el-button
>
</el-form-item>
......@@ -187,28 +200,39 @@
<div class="right">
<div class="right_top">
<div class="button_box">
<span>今年</span>
<span class="check">本月</span>
<span>今日</span>
</div>
<div class="title">
个人绩效总分排名TOP10
<span
:class="{ check: v.value == personageAttTopDate }"
v-for="v in searchTimes"
:key="v.value"
@click="changeDate('personageAttTopDate', v.value)"
>{{ v.label }}</span
>
</div>
<div class="title">个人绩效总分排名TOP10</div>
<dv-scroll-ranking-board
:config="personConfig"
style="width:100%;height:75%"
style="width: 100%; height: 75%"
/>
</div>
<div class="right_mid">
<div class="title">
申诉分值分布情况
<div class="button_box">
<span>今年</span>
<span class="check">本月</span>
<span>今日</span>
<span
:class="{ check: v.value == appealDate }"
v-for="v in searchTimes"
:key="v.value"
@click="changeDate('appealDate', v.value)"
>{{ v.label }}</span
>
</div>
<div id="shensuPie" style="width: 100%;height: 100%;"></div>
</div>
<div id="shensuPie" style="width: 100%; height: 90%"></div>
</div>
<div class="right_down">
<div id="recordPie" style="width: 100%;height: 100%;"></div>
<div class="title">反馈记录整体情况</div>
<div id="recordPie" style="width: 100%; height: 90%"></div>
</div>
</div>
</div>
......@@ -218,96 +242,171 @@
export default {
data() {
return {
type: "1",
// 时间搜索选项
searchTimes: [
{
label: "今年",
value: 1,
},
{
label: "本月",
value: 2,
},
{
label: "今日",
value: 3,
},
],
depAttendanceTopDate: 2, // 部门绩效top搜索
abnormalDisDate: 2, // 异常分值分布搜索
personageAttTopDate: 2, // 个人绩效排名top搜索
appealDate: 2, // 申诉分值分布搜索
form: {
date1: "",
type: [],
resource: "",
},
config: {},//部门绩效总分top10
personConfig: {},//个人绩效总分top10
cricleData: [
{ value: 756, name: "考勤绩效" },
{ value: 690, name: "评价绩效" },
{ value: 559, name: "办件绩效" },
{ value: 1278, name: "效能绩效" },
],
config: {}, //部门绩效总分top10
personConfig: {}, //个人绩效总分top10
// 个人绩效总分排名
staffQuery:{
page:1,
size:10,
staffQuery: {
page: 1,
size: 10,
},
// 部门
depQuery:{
page:1,
size:10,
depQuery: {
page: 1,
size: 10,
},
leidaEchart: null, // 异常分值分布情况echart实例
rulePie: null, // 绩效规则分布echart实例
shensuPie: null, // 申诉分值分布情况echart实例
recordPie: null, // 反馈记录整体情况echart实例
timer: null,
};
},
mounted() {
this.drawLeiDa();
this.drawRulePie();
this.drawCorePie();
this.drawRecordPie();
this.staffStatList()
this.depStatList()
this.staffStatList();
this.getException();
this.depStatList();
this.getAttendanceRules();
this.getFeedback();
this.autoUpdata();
},
methods: {
// 设配echarts
adapterEcharts() {
this.leidaEchart && this.leidaEchart.resize();
this.rulePie && this.rulePie.resize();
this.shensuPie && this.shensuPie.resize();
this.recordPie && this.recordPie.resize();
},
// 个人绩效总分排名
staffStatList(){
this.$post("/staff/perform/stat/list", this.staffQuery).then((res) => {
const {code,data} = res
if(code == 1){
const row = data.data || []
const depArr = []
row.forEach(element => {
depArr.push({
name:element.staffName,
value:element.totalScore
})
staffStatList() {
this.$post("/staff/perform/stat/summary/top", {
summaryType: this.personageAttTopDate,
}).then((res) => {
const { code, data } = res;
if (code == 1) {
const row = data.map((v) => {
return {
name: v.staffName,
value: v.totalScore,
};
});
this.personConfig = { data: row };
}
});
},
// 获取异常分值分布情况
getException() {
this.$post("/staff/perform/stat/summary/exception", {
summaryType: this.abnormalDisDate,
}).then((res) => {
const { code, data } = res;
if (code == 1) {
let names = data.map((v) => v.name);
let add = data.map((v) => v.add);
let sub = data.map((v) => v.sub);
this.$nextTick(() => {
this.drawLeiDa(names, add, sub);
});
this.personConfig = {data:depArr}
console.log(row,"个人")
}
});
},
// 部门绩效总分排名
depStatList(){
this.$post("/dept/perform/stat/list", this.depQuery).then((res) => {
const {code,data} = res
if(code == 1){
const row = data.data || []
const depArr = []
row.forEach(element => {
depArr.push({
name:element.deptName,
value:element.totalScore
})
depStatList() {
this.$post("/dept/perform/stat/summary/top", {
summaryType: this.depAttendanceTopDate,
}).then((res) => {
const { code, data } = res;
if (code == 1) {
const row = data.map((v) => {
return {
name: v.deptName,
value: v.totalScore,
};
});
this.config = {data:depArr}
// console.log(row,depArr,"部门")
this.config = { data: row };
}
});
},
drawLeiDa() {
// 基于dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("leida"));
// 绘制图表
myChart.setOption({
title: {
text: "异常分值分布情况",
left: "left",
textStyle: {
fontSize: 18,
// 获取绩效规则分布情况
getAttendanceRules() {
this.$post("/perform/rules/summary").then((res) => {
const { code, data } = res;
if (code == 1) {
let { list, totalScore } = data;
let arr = list.map((v) => {
return {
name: v.typeName,
value: v.score,
};
});
this.$nextTick(() => {
this.drawRulePie(arr, totalScore);
});
}
});
},
// 获取反馈记录整体情况数据
getFeedback() {
this.$post("/feedback/summary").then((res) => {
const { code, data } = res;
if (code == 1) {
let { notStart, total, ended, progress } = data;
let names = ["未开始", "进行中", "已完结", "全部问卷"];
let values = [notStart, progress, ended, total];
this.$nextTick(() => {
this.drawRecordPie(names, values);
});
}
});
},
// 异常分值分布情况echarts
drawLeiDa(names = [], add = [], sub = []) {
// 基于dom，初始化echarts实例
let chartDom = document.getElementById("leida");
// 避免刷新数据时重新初始化图表
this.leidaEchart = this.$echarts.getInstanceByDom(chartDom);
if (!this.leidaEchart) {
this.leidaEchart = this.$echarts.init(chartDom);
}
// 绘制图表
this.leidaEchart.setOption({
color: ["#56A3F1", "#FF917C"],
tooltip: {},
tooltip: {
confine: true,
},
legend: {
data: ["加分", "扣分"],
data: names,
right: 0,
bottom: "50px",
orient: "vertical",
......@@ -336,15 +435,14 @@ export default {
},
},
{
indicator: [
{ text: "考勤绩效", max: 150 },
{ text: "办件绩效", max: 150 },
{ text: "评价绩效", max: 150 },
{ text: "效能绩效", max: 120 },
{ text: "其他绩效", max: 108 },
],
center: ["45%", "60%"],
radius: 80,
indicator: names.map((v) => {
return {
name: v,
max: 150,
};
}),
center: ["45%", "50%"],
radius: "70%",
axisName: {
color: "#fff",
backgroundColor: "#666",
......@@ -359,20 +457,20 @@ export default {
radarIndex: 1,
data: [
{
value: [120, 118, 130, 100, 99, 70],
value: add,
name: "加分",
symbol: "rect",
symbolSize: 12,
areaStyle: { color: "#56A3F1" }, //雷达覆盖区域背景颜色
label: {
show: true,
formatter: function(params) {
formatter: function (params) {
return params.value;
},
},
},
{
value: [100, 93, 50, 90, 70, 60],
value: sub,
areaStyle: { color: "#FF917C" }, //雷达覆盖区域背景颜色
name: "扣分",
},
......@@ -380,17 +478,18 @@ export default {
},
],
});
window.addEventListener("resize", this.adapterEcharts);
},
drawRulePie() {
// 绩效规则分布echarts
drawRulePie(data, total) {
// 基于dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("rulePie"));
myChart.setOption({
title: {
text: "绩效规则分布情况",
textStyle: {
fontSize: 18,
},
},
let chartDom = document.getElementById("rulePie");
// 避免刷新数据时重新初始化图表
this.rulePie = this.$echarts.getInstanceByDom(chartDom);
if (!this.rulePie) {
this.rulePie = this.$echarts.init(chartDom);
}
this.rulePie.setOption({
tooltip: {
trigger: "item",
},
......@@ -427,14 +526,10 @@ export default {
},
},
formatter: (name) => {
// formatter格式化函数动态呈现数据
console.log(name);
var total = 0; // 用于计算总数
var target; // 遍历拿到数据
for (var i = 0; i < this.cricleData.length; i++) {
total += this.cricleData[i].value;
if (this.cricleData[i].name == name) {
target = this.cricleData[i].value;
for (var i = 0; i < data.length; i++) {
if (data[i].name == name) {
target = data[i].value;
}
}
var v = ((target / total) * 100).toFixed(2);
......@@ -447,34 +542,28 @@ export default {
type: "pie",
radius: ["40%", "70%"],
// avoidLabelOverlap: false,
data,
left: "-50%",
top: "10%",
label: {
position: "center",
fontSize: 16,
formatter: () => {
let str = "总" + "\n" + `${756 + 690 + 559 + 1278}`;
return str;
return "总" + "\n" + total;
},
},
labelLine: {
show: false,
},
data: this.cricleData,
},
],
});
window.addEventListener("resize", this.adapterEcharts);
},
drawCorePie() {
// 基于dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("shensuPie"));
myChart.setOption({
title: {
text: "绩效规则分布情况",
textStyle: {
fontSize: 18,
},
},
tooltip: {
trigger: "item",
},
......@@ -565,33 +654,26 @@ export default {
],
});
},
drawRecordPie() {
let xData = ["未开始", "进行中", "已完结", "全部问卷"];
let yData = [2, 8, 116, 126];
// 反馈记录整体情况echarts
drawRecordPie(names = [], values = []) {
let colorList = ["#97e7ff", "#75f5ff", "#00deff", "#0093ff", "#2a5fcf"];
let visualMapPiecesData = [];
// visualMap: {
// pieces: [
// { value: 123, label: '123（自定义特殊颜色）', color: 'grey' }
// ]
// }
for (var i = 0; i < xData.length; i++) {
for (var i = 0; i < names.length; i++) {
visualMapPiecesData.push({
value: yData[i],
label: xData[i],
value: values[i],
label: names[i],
color: colorList[i],
});
}
// 基于dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("recordPie"));
myChart.setOption({
title: {
text: "绩效规则分布情况",
textStyle: {
fontSize: 18,
},
},
let chartDom = document.getElementById("recordPie");
// 避免刷新数据时重新初始化图表
this.recordPie = this.$echarts.getInstanceByDom(chartDom);
if (!this.recordPie) {
this.recordPie = this.$echarts.init(chartDom);
}
this.recordPie.setOption({
tooltip: {
trigger: "item",
},
......@@ -608,7 +690,7 @@ export default {
radiusAxis: {
show: true,
type: "category",
data: xData,
data: names,
},
visualMap: {
......@@ -626,12 +708,12 @@ export default {
series: [
{
type: "bar",
data: yData,
data: values,
coordinateSystem: "polar",
itemStyle: {
normal: {
// 定制显示（按顺序）
color: function(params) {
color: function (params) {
return colorList[params.dataIndex];
},
},
......@@ -639,7 +721,56 @@ export default {
},
],
});
window.addEventListener("resize", this.adapterEcharts);
},
// 改变日期搜索
changeDate(type, date) {
switch (type) {
case "depAttendanceTopDate":
this.depAttendanceTopDate = date;
this.depStatList();
break;
case "abnormalDisDate":
this.abnormalDisDate = date;
this.getException();
break;
case "personageAttTopDate":
this.personageAttTopDate = date;
this.staffStatList();
break;
case "appealDate":
this.appealDate = date;
break;
}
},
// 获取年
getYear() {
return new Date().getFullYear();
},
// 获取月
getMonth() {
return new Date().getMonth() + 1;
},
// 获取日
getDay() {
return new Date().getDate();
},
// 1分值自动刷新数据
autoUpdata() {
this.timer = setInterval(() => {
this.staffStatList();
this.getException();
this.depStatList();
this.getAttendanceRules();
this.getFeedback();
}, 1000 * 60);
},
},
beforeDestroy() {
// 解绑事件
window.removeEventListener("resize", this.adapterEcharts);
clearInterval(this.timer);
},
};
</script>
......
attendance-performance-manager-ui/admin/yarn.lock
View file @ cef93705
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment