wulin/management_UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加绩效报表页面

Browse Source
This commit is contained in:
sean yu 2020-10-27 09:34:29 +08:00
parent db1b770b61
commit 61b7630d7e
3 changed files with 375 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/api/report.js Normal file
View File

@ -0,0 +1,19 @@
import requestFuc from '@/utils/request'
// 获取考核组列表
export function getChartData(query) {
return requestFuc({
url: '/lz_management/performance/chart/result',
method: 'POST',
data: query
})
}
// 获取绩效排名
export function getStartsData(query) {
return requestFuc({
url: '/lz_management/performance/chart/starts',
method: 'POST',
data: query
})
}

57
src/utils/elementConfig.js
View File

@ -1,33 +1,33 @@
import Vue from 'vue'
import {
Button,
MessageBox,
Message,
Table,
TableColumn,
Form,
FormItem,
Input,
Select,
Option,
RadioGroup,
DatePicker,
CheckboxGroup,
Switch,
TimePicker,
Col,
Checkbox,
Radio,
Dropdown,
DropdownMenu,
DropdownItem,
Dialog,
Tree,
Tag,
Tooltip,
Popover,
Pagination
Button,
MessageBox,
Message,
Table,
TableColumn,
Form,
FormItem,
Input,
Select,
Option,
RadioGroup,
DatePicker,
CheckboxGroup,
Switch,
TimePicker,
Col,
Checkbox,
Radio,
Dropdown,
DropdownMenu,
DropdownItem,
Dialog,
Tree,
Tag,
Tooltip,
Popover,
Pagination,
Cascader
} from 'element-ui'
Vue.prototype.$message = Message
@ -59,3 +59,4 @@ Vue.use(Radio)
Vue.use(Dropdown)
Vue.use(DropdownMenu)
Vue.use(DropdownItem)
Vue.use(Cascader)

337
src/views/kpi/report/index.vue
View File

@ -1,27 +1,344 @@
<!-- -->
<template>
<div>
绩效报表
<div class="block">
<el-cascader :props="props" :options="timeOptions"></el-cascader>
<div class="report_content">
<div class="header">
<div>
<div>7</div>
<div>参与人数</div>
</div>
<span></span>
<div>
<div>7</div>
<div>目标定制</div>
</div>
<div>
<div>1</div>
<div>目标确认</div>
</div>
<div>
<div>7</div>
<div>执行中</div>
</div>
<div>
<div>7</div>
<div>结果值录入</div>
</div>
<div>
<div>7</div>
<div>评分</div>
</div>
<div>
<div>7</div>
<div>考核结束</div>
</div>
</div>
<div>
<div>考核人数分析</div>
<div class="num_tips">
<div>考核人数分析</div>
<div>参与考核部门人数</div>
</div>
<div class="num_report">
<div id="num_chart"></div>
<ul>
<li v-for="(dep, index) in deps" :key="dep.id">
<div
:class="{
width: '20px',
height: '20px',
background: handleliColor(index)
}"
>
{{ index }}
</div>
<div>{{ dep.title }} {{ dep.num }}人</div>
</li>
</ul>
</div>
<div>结果分析</div>
<div>等级分布</div>
<div class="reslut_display">
<div id="level_chart"></div>
<el-table :data="tableData" style="display: inline-block;">
<el-table-column prop="level" label="绩效等级" width="200">
</el-table-column>
<el-table-column prop="layout" label="实际分布" width="200">
</el-table-column>
<el-table-column label="操作" width="150">
<template slot-scope="scope">
<el-button
@click.native.prevent="
handleDetailClick(scope.$index, tableData)
"
type="text"
size="small"
>
查看详情
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</div>
</template>
<script>
// 引入基本模板
let echarts = require('echarts/lib/echarts')
import { getChartData, getStartsData } from '@/api/report'
export default {
data () {
return {
// 当前选择的月份
pickerTime: '',
// 表格内容
tableData: [],
//
deps: [],
//
value: [],
timeOptions: [{
value: 0,
label: '月底',
children: []
}, {
value: 1,
label: '自定义',
children: []
}],
//
props: {
lazy: true,
lazyLoad: (node, resolve) => {
const { level } = node;
let type = node.data.val
console.log(this);
this.handleStartsReq(type)
// reslut => {
// if (reslut.data.code = 200) {
// const childNode = Array.from(reslut.data.list, map(item => {
// value: item.desc
// lable: item.num
// leaf: level >= 2
// }))
// resolve(childNode)
// } else {
// const childNode = []
// resolve(childNode)
// }
// })
}
},
// 考核人数报表持有类
option: {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: [],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '',
type: 'bar',
barWidth: '60%',
data: []
}
]
},
//
levelOption: {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: [],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '',
type: 'bar',
barWidth: '60%',
data: []
}
]
}
}
},
computed: {
// 背景色计算
handleliColor (pos) {
switch (pos) {
case 0:
return '#ff7705'
case 1:
return '#ff8b22'
case 2:
return '#ff9e45'
default:
return '#bcbcbc'
}
},
},
beforeMount () { },
mounted () {
},
methods: {
//
handleDetailClick (index, rows) {
},
// Y轴坐标计算，取靠近最大值的3的倍数作为上限，然后划分成4个刻度(0为初始刻度)
handleChartYMul (val) {
let max = val
max = max + (3 - max % 3)
return [0, max / 3 * 1, max / 3 * 2, max]
},
// 绩效分析
handleNumChart () {
let numChart = echarts.init(document.getElementById('num_chart'))
numChart.setOption(this.option)
},
// 结果分析
handleLevelChart () {
let levelChart = echarts.init(document.getElementById('level_chart'))
levelChart.setOption(this.levelOption)
},
// 获取报表内容
handleChartDataReq () {
getChartData()
},
//
handleChartDataReq () {
getRankData()
},
// 为了不分页直接传999
handleStartsReq (type) {
let params = {
currentPage: 1,
cycleType: type,
pageSize: 999
}
getStartsData(params).then(result => {
//handleNode(reslut)
})
}
},
computed: {},
beforeMount () {},
mounted () {},
methods: {},
watch: {}
}
</script>
<style lang='' scoped>
.report_content {
width: fit-content;
height: fit-content;
background: white;
border-style: #fcfcfc solid 3px;
margin-top: 20px;
}
.header {
background: #fcfcfc;
width: fit-content;
}
.header > span {
display: inline-block;
background: #333333;
height: 30px;
width: 1px;
margin-top: 20px;
}
.header > div {
display: inline-block;
width: 200px;
height: 100px;
text-align: center;
}
.header > div > div:nth-child(1) {
color: black;
font-weight: bold;
margin-top: 30px;
size: 20px;
}
.header > div > div:nth-child(2) {
color: #999999;
font-size: 10px;
}
.num_tips > div:nth-child(1) {
display: inline-block;
color: #333333;
font-size: 14px;
width: fit-content;
padding-left: 20px;
position: relative;
}
.num_tips > div:nth-child(2) {
display: inline-block;
color: #333333;
font-size: 14px;
width: fit-content;
padding-left: 50%;
position: relative;
}
#num_chart {
display: inline-block;
width: 600px;
height: 360px;
}
.reslut_display {
display: flex;
}
#level_chart {
display: inline-block;
width: 600px;
height: 360px;
flex: 1;
}
</style>