Skip to content

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

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

parent 618e0a0a
Hide 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 @@ ...@@ -11,11 +11,11 @@
<router-link to="/"> <router-link to="/">
<img <img
src="../assets/images/logo.png" src="../assets/images/logo.png"
style="margin-bottom:5px;margin-left: 24px;" style="margin-bottom: 5px; margin-left: 24px"
height="40" height="40"
alt="" 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;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</b> </b>
...@@ -43,14 +43,14 @@ ...@@ -43,14 +43,14 @@
</el-badge> </el-badge>
</div> --> </div> -->
<div class="controllBar" @click="returnHome"> <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 首页</i
> >
</div> </div>
<div class="layout-profile"> <div class="layout-profile">
<el-dropdown @command="handleCommand"> <el-dropdown @command="handleCommand">
<span class="el-dropdown-link" style="color:white"> <span class="el-dropdown-link" style="color: white">
{{ userData.currUserName }} {{ userData.currUserName }}
<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i> <i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
</span> </span>
...@@ -124,9 +124,7 @@ export default { ...@@ -124,9 +124,7 @@ export default {
beforeDestroy() { beforeDestroy() {
console.log("beforeDestroy"); console.log("beforeDestroy");
}, },
mounted() { mounted() {},
console.log(this.menu);
},
computed: { computed: {
group() { group() {
const relativeGroup = this.$store.state.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 @@ ...@@ -5,26 +5,39 @@
<div class="title"> <div class="title">
部门绩效总分排名TOP10 部门绩效总分排名TOP10
<div class="button_box"> <div class="button_box">
<span>今年</span> <span
<span class="check">本月</span> :class="{ check: v.value == depAttendanceTopDate }"
<span>今日</span> v-for="v in searchTimes"
:key="v.value"
@click="changeDate('depAttendanceTopDate', v.value)"
>{{ v.label }}</span
>
</div> </div>
</div> </div>
<dv-scroll-ranking-board <dv-scroll-ranking-board
:config="config" :config="config"
style="width:100%;height:75%" style="width: 100%; height: 75%"
/> />
</div> </div>
<div class="left_mid"> <div class="left_mid">
<div class="button_box"> <div class="title">
<span>今年</span> 异常分值分布情况
<span class="check">本月</span> <div class="button_box">
<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> </div>
<div id="leida" style="width: 100%;height: 100%;"></div>
<div id="leida" style="width: 100%; height: 90%"></div>
</div> </div>
<div class="left_down"> <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> </div>
<div class="mid"> <div class="mid">
...@@ -138,7 +151,7 @@ ...@@ -138,7 +151,7 @@
<div class="mid_down"> <div class="mid_down">
<div class="down_content"> <div class="down_content">
<img class="content_title" src="../../../assets/images/title.png" /> <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-group v-model="type" border>
<el-radio-button label="1">部门评估</el-radio-button> <el-radio-button label="1">部门评估</el-radio-button>
<el-radio-button label="2">个人评估</el-radio-button> <el-radio-button label="2">个人评估</el-radio-button>
...@@ -150,7 +163,7 @@ ...@@ -150,7 +163,7 @@
<el-select <el-select
v-model="form.region" v-model="form.region"
placeholder="请选择部门" placeholder="请选择部门"
style="width: 100%;" style="width: 100%"
> >
<el-option label="区域一" value="shanghai"></el-option> <el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option> <el-option label="区域二" value="beijing"></el-option>
...@@ -161,21 +174,21 @@ ...@@ -161,21 +174,21 @@
type="date" type="date"
placeholder="选择日期" placeholder="选择日期"
v-model="form.date1" v-model="form.date1"
style="width: 100%;" style="width: 100%"
></el-date-picker> ></el-date-picker>
</el-form-item> </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-group v-model="form.resource">
<el-radio label="0">按年</el-radio> <el-radio :label="1">按年</el-radio>
<el-radio label="1">按月</el-radio> <el-radio :label="2">按月</el-radio>
<el-radio label="2">按天</el-radio> <el-radio :label="3">按天</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button <el-button
type="primary" type="primary"
@click="onSubmit" @click="onSubmit"
style="margin-top: 20px;transform: translateX(-50%);" style="margin-top: 20px; transform: translateX(-50%)"
>立即创建</el-button >立即创建</el-button
> >
</el-form-item> </el-form-item>
...@@ -187,28 +200,39 @@ ...@@ -187,28 +200,39 @@
<div class="right"> <div class="right">
<div class="right_top"> <div class="right_top">
<div class="button_box"> <div class="button_box">
<span>今年</span> <span
<span class="check">本月</span> :class="{ check: v.value == personageAttTopDate }"
<span>今日</span> v-for="v in searchTimes"
</div> :key="v.value"
<div class="title"> @click="changeDate('personageAttTopDate', v.value)"
个人绩效总分排名TOP10 >{{ v.label }}</span
>
</div> </div>
<div class="title">个人绩效总分排名TOP10</div>
<dv-scroll-ranking-board <dv-scroll-ranking-board
:config="personConfig" :config="personConfig"
style="width:100%;height:75%" style="width: 100%; height: 75%"
/> />
</div> </div>
<div class="right_mid"> <div class="right_mid">
<div class="button_box"> <div class="title">
<span>今年</span> 申诉分值分布情况
<span class="check">本月</span> <div class="button_box">
<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> </div>
<div id="shensuPie" style="width: 100%;height: 100%;"></div>
<div id="shensuPie" style="width: 100%; height: 90%"></div>
</div> </div>
<div class="right_down"> <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> </div>
</div> </div>
...@@ -218,96 +242,171 @@ ...@@ -218,96 +242,171 @@
export default { export default {
data() { data() {
return { return {
type: "1", // 时间搜索选项
searchTimes: [
{
label: "今年",
value: 1,
},
{
label: "本月",
value: 2,
},
{
label: "今日",
value: 3,
},
],
depAttendanceTopDate: 2, // 部门绩效top搜索
abnormalDisDate: 2, // 异常分值分布搜索
personageAttTopDate: 2, // 个人绩效排名top搜索
appealDate: 2, // 申诉分值分布搜索
form: { form: {
date1: "", date1: "",
type: [], type: [],
resource: "", resource: "",
}, },
config: {},//部门绩效总分top10 config: {}, //部门绩效总分top10
personConfig: {},//个人绩效总分top10 personConfig: {}, //个人绩效总分top10
cricleData: [
{ value: 756, name: "考勤绩效" },
{ value: 690, name: "评价绩效" },
{ value: 559, name: "办件绩效" },
{ value: 1278, name: "效能绩效" },
],
// 个人绩效总分排名 // 个人绩效总分排名
staffQuery:{ staffQuery: {
page:1, page: 1,
size:10, size: 10,
}, },
// 部门 // 部门
depQuery:{ depQuery: {
page:1, page: 1,
size:10, size: 10,
}, },
leidaEchart: null, // 异常分值分布情况echart实例
rulePie: null, // 绩效规则分布echart实例
shensuPie: null, // 申诉分值分布情况echart实例
recordPie: null, // 反馈记录整体情况echart实例
timer: null,
}; };
}, },
mounted() { mounted() {
this.drawLeiDa();
this.drawRulePie();
this.drawCorePie(); this.drawCorePie();
this.drawRecordPie();
this.staffStatList() this.staffStatList();
this.depStatList() this.getException();
this.depStatList();
this.getAttendanceRules();
this.getFeedback();
this.autoUpdata();
}, },
methods: { methods: {
// 设配echarts
adapterEcharts() {
this.leidaEchart && this.leidaEchart.resize();
this.rulePie && this.rulePie.resize();
this.shensuPie && this.shensuPie.resize();
this.recordPie && this.recordPie.resize();
},
// 个人绩效总分排名 // 个人绩效总分排名
staffStatList(){ staffStatList() {
this.$post("/staff/perform/stat/list", this.staffQuery).then((res) => { this.$post("/staff/perform/stat/summary/top", {
const {code,data} = res summaryType: this.personageAttTopDate,
if(code == 1){ }).then((res) => {
const row = data.data || [] const { code, data } = res;
const depArr = [] if (code == 1) {
row.forEach(element => { const row = data.map((v) => {
depArr.push({ return {
name:element.staffName, name: v.staffName,
value:element.totalScore 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(){ depStatList() {
this.$post("/dept/perform/stat/list", this.depQuery).then((res) => { this.$post("/dept/perform/stat/summary/top", {
const {code,data} = res summaryType: this.depAttendanceTopDate,
if(code == 1){ }).then((res) => {
const row = data.data || [] const { code, data } = res;
const depArr = [] if (code == 1) {
row.forEach(element => { const row = data.map((v) => {
depArr.push({ return {
name:element.deptName, name: v.deptName,
value:element.totalScore value: v.totalScore,
}) };
});
this.config = { data: row };
}
});
},
// 获取绩效规则分布情况
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);
}); });
this.config = {data:depArr}
// console.log(row,depArr,"部门")
} }
}); });
}, },
drawLeiDa() { // 获取反馈记录整体情况数据
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实例 // 基于dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("leida")); let chartDom = document.getElementById("leida");
// 避免刷新数据时重新初始化图表
this.leidaEchart = this.$echarts.getInstanceByDom(chartDom);
if (!this.leidaEchart) {
this.leidaEchart = this.$echarts.init(chartDom);
}
// 绘制图表 // 绘制图表
myChart.setOption({ this.leidaEchart.setOption({
title: {
text: "异常分值分布情况",
left: "left",
textStyle: {
fontSize: 18,
},
},
color: ["#56A3F1", "#FF917C"], color: ["#56A3F1", "#FF917C"],
tooltip: {}, tooltip: {
confine: true,
},
legend: { legend: {
data: ["加分", "扣分"], data: names,
right: 0, right: 0,
bottom: "50px", bottom: "50px",
orient: "vertical", orient: "vertical",
...@@ -336,15 +435,14 @@ export default { ...@@ -336,15 +435,14 @@ export default {
}, },
}, },
{ {
indicator: [ indicator: names.map((v) => {
{ text: "考勤绩效", max: 150 }, return {
{ text: "办件绩效", max: 150 }, name: v,
{ text: "评价绩效", max: 150 }, max: 150,
{ text: "效能绩效", max: 120 }, };
{ text: "其他绩效", max: 108 }, }),
], center: ["45%", "50%"],
center: ["45%", "60%"], radius: "70%",
radius: 80,
axisName: { axisName: {
color: "#fff", color: "#fff",
backgroundColor: "#666", backgroundColor: "#666",
...@@ -359,20 +457,20 @@ export default { ...@@ -359,20 +457,20 @@ export default {
radarIndex: 1, radarIndex: 1,
data: [ data: [
{ {
value: [120, 118, 130, 100, 99, 70], value: add,
name: "加分", name: "加分",
symbol: "rect", symbol: "rect",
symbolSize: 12, symbolSize: 12,
areaStyle: { color: "#56A3F1" }, //雷达覆盖区域背景颜色 areaStyle: { color: "#56A3F1" }, //雷达覆盖区域背景颜色
label: { label: {
show: true, show: true,
formatter: function(params) { formatter: function (params) {
return params.value; return params.value;
}, },
}, },
}, },
{ {
value: [100, 93, 50, 90, 70, 60], value: sub,
areaStyle: { color: "#FF917C" }, //雷达覆盖区域背景颜色 areaStyle: { color: "#FF917C" }, //雷达覆盖区域背景颜色
name: "扣分", name: "扣分",
}, },
...@@ -380,17 +478,18 @@ export default { ...@@ -380,17 +478,18 @@ export default {
}, },
], ],
}); });
window.addEventListener("resize", this.adapterEcharts);
}, },
drawRulePie() { // 绩效规则分布echarts
drawRulePie(data, total) {
// 基于dom，初始化echarts实例 // 基于dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("rulePie")); let chartDom = document.getElementById("rulePie");
myChart.setOption({ // 避免刷新数据时重新初始化图表
title: { this.rulePie = this.$echarts.getInstanceByDom(chartDom);
text: "绩效规则分布情况", if (!this.rulePie) {
textStyle: { this.rulePie = this.$echarts.init(chartDom);
fontSize: 18, }
}, this.rulePie.setOption({
},
tooltip: { tooltip: {
trigger: "item", trigger: "item",
}, },
...@@ -427,19 +526,15 @@ export default { ...@@ -427,19 +526,15 @@ export default {
}, },
}, },
formatter: (name) => { formatter: (name) => {
// formatter格式化函数动态呈现数据
console.log(name);
var total = 0; // 用于计算总数
var target; // 遍历拿到数据 var target; // 遍历拿到数据
for (var i = 0; i < this.cricleData.length; i++) { for (var i = 0; i < data.length; i++) {
total += this.cricleData[i].value; if (data[i].name == name) {
if (this.cricleData[i].name == name) { target = data[i].value;
target = this.cricleData[i].value;
} }
} }
var v = ((target / total) * 100).toFixed(2); var v = ((target / total) * 100).toFixed(2);
return `{oneone|${name}} {twotwo|${target}分} {threethree|${v}%}`; return `{oneone|${name}} {twotwo|${target}分} {threethree|${v}%}`;
// 富文本第一列样式应用 富文本第二列样式应用 富文本第三列样式应用 // 富文本第一列样式应用 富文本第二列样式应用 富文本第三列样式应用
}, },
}, },
series: [ series: [
...@@ -447,34 +542,28 @@ export default { ...@@ -447,34 +542,28 @@ export default {
type: "pie", type: "pie",
radius: ["40%", "70%"], radius: ["40%", "70%"],
// avoidLabelOverlap: false, // avoidLabelOverlap: false,
data,
left: "-50%", left: "-50%",
top: "10%", top: "10%",
label: { label: {
position: "center", position: "center",
fontSize: 16, fontSize: 16,
formatter: () => { formatter: () => {
let str = "总" + "\n" + `${756 + 690 + 559 + 1278}`; return "总" + "\n" + total;
return str;
}, },
}, },
labelLine: { labelLine: {
show: false, show: false,
}, },
data: this.cricleData,
}, },
], ],
}); });
window.addEventListener("resize", this.adapterEcharts);
}, },
drawCorePie() { drawCorePie() {
// 基于dom，初始化echarts实例 // 基于dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("shensuPie")); let myChart = this.$echarts.init(document.getElementById("shensuPie"));
myChart.setOption({ myChart.setOption({
title: {
text: "绩效规则分布情况",
textStyle: {
fontSize: 18,
},
},
tooltip: { tooltip: {
trigger: "item", trigger: "item",
}, },
...@@ -565,33 +654,26 @@ export default { ...@@ -565,33 +654,26 @@ export default {
], ],
}); });
}, },
// 反馈记录整体情况echarts
drawRecordPie() { drawRecordPie(names = [], values = []) {
let xData = ["未开始", "进行中", "已完结", "全部问卷"];
let yData = [2, 8, 116, 126];
let colorList = ["#97e7ff", "#75f5ff", "#00deff", "#0093ff", "#2a5fcf"]; let colorList = ["#97e7ff", "#75f5ff", "#00deff", "#0093ff", "#2a5fcf"];
let visualMapPiecesData = []; let visualMapPiecesData = [];
// visualMap: { for (var i = 0; i < names.length; i++) {
// pieces: [
// { value: 123, label: '123（自定义特殊颜色）', color: 'grey' }
// ]
// }
for (var i = 0; i < xData.length; i++) {
visualMapPiecesData.push({ visualMapPiecesData.push({
value: yData[i], value: values[i],
label: xData[i], label: names[i],
color: colorList[i], color: colorList[i],
}); });
} }
// 基于dom，初始化echarts实例 // 基于dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("recordPie")); let chartDom = document.getElementById("recordPie");
myChart.setOption({ // 避免刷新数据时重新初始化图表
title: { this.recordPie = this.$echarts.getInstanceByDom(chartDom);
text: "绩效规则分布情况", if (!this.recordPie) {
textStyle: { this.recordPie = this.$echarts.init(chartDom);
fontSize: 18, }
},
}, this.recordPie.setOption({
tooltip: { tooltip: {
trigger: "item", trigger: "item",
}, },
...@@ -608,7 +690,7 @@ export default { ...@@ -608,7 +690,7 @@ export default {
radiusAxis: { radiusAxis: {
show: true, show: true,
type: "category", type: "category",
data: xData, data: names,
}, },
visualMap: { visualMap: {
...@@ -626,12 +708,12 @@ export default { ...@@ -626,12 +708,12 @@ export default {
series: [ series: [
{ {
type: "bar", type: "bar",
data: yData, data: values,
coordinateSystem: "polar", coordinateSystem: "polar",
itemStyle: { itemStyle: {
normal: { normal: {
// 定制显示（按顺序） // 定制显示（按顺序）
color: function(params) { color: function (params) {
return colorList[params.dataIndex]; return colorList[params.dataIndex];
}, },
}, },
...@@ -639,7 +721,56 @@ export default { ...@@ -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> </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