添加绩效报表页面
This commit is contained in:
sean yu
parent
db1b770b61
commit
61b7630d7e
19
src/api/report.js
Normal file
19
src/api/report.js
Normal 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
|
||||||
|
})
|
||||||
|
}
|
||||||
@ -1,33 +1,33 @@
|
|||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
MessageBox,
|
MessageBox,
|
||||||
Message,
|
Message,
|
||||||
Table,
|
Table,
|
||||||
TableColumn,
|
TableColumn,
|
||||||
Form,
|
Form,
|
||||||
FormItem,
|
FormItem,
|
||||||
Input,
|
Input,
|
||||||
Select,
|
Select,
|
||||||
Option,
|
Option,
|
||||||
RadioGroup,
|
RadioGroup,
|
||||||
DatePicker,
|
DatePicker,
|
||||||
CheckboxGroup,
|
CheckboxGroup,
|
||||||
Switch,
|
Switch,
|
||||||
TimePicker,
|
TimePicker,
|
||||||
Col,
|
Col,
|
||||||
Checkbox,
|
Checkbox,
|
||||||
Radio,
|
Radio,
|
||||||
Dropdown,
|
Dropdown,
|
||||||
DropdownMenu,
|
DropdownMenu,
|
||||||
DropdownItem,
|
DropdownItem,
|
||||||
Dialog,
|
Dialog,
|
||||||
Tree,
|
Tree,
|
||||||
Tag,
|
Tag,
|
||||||
Tooltip,
|
Tooltip,
|
||||||
Popover,
|
Popover,
|
||||||
Pagination
|
Pagination,
|
||||||
|
Cascader
|
||||||
} from 'element-ui'
|
} from 'element-ui'
|
||||||
|
|
||||||
Vue.prototype.$message = Message
|
Vue.prototype.$message = Message
|
||||||
@ -59,3 +59,4 @@ Vue.use(Radio)
|
|||||||
Vue.use(Dropdown)
|
Vue.use(Dropdown)
|
||||||
Vue.use(DropdownMenu)
|
Vue.use(DropdownMenu)
|
||||||
Vue.use(DropdownItem)
|
Vue.use(DropdownItem)
|
||||||
|
Vue.use(Cascader)
|
||||||
|
|||||||
@ -1,27 +1,344 @@
|
|||||||
<!-- -->
|
<!-- -->
|
||||||
<template>
|
<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>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
// 引入基本模板
|
||||||
|
let echarts = require('echarts/lib/echarts')
|
||||||
|
import { getChartData, getStartsData } from '@/api/report'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
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: {}
|
watch: {}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang='' scoped>
|
<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>
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user