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

优化

Browse Source
This commit is contained in:
熊成强 2020-11-02 09:11:53 +08:00
parent 61953f090a
commit 026b698862
5 changed files with 506 additions and 469 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/router/kpi_route.js
View File

@ -71,6 +71,15 @@ export default [
title: '考核管理',
isNav: true
}
}, {
path: 'initiate',
name: 'initiate',
component: (resolve) => require(['@/views/kpi/workbench/initiateAssessment/index.vue'], resolve),
meta: {
title: '发起考核',
isNav: false,
hide: true
}
}, {
path: 'stepList',
name: 'assessment-stepList',
@ -99,15 +108,6 @@ export default [
}
}
]
}, {
path: 'initiate',
name: 'initiate',
component: (resolve) => require(['@/views/kpi/workbench/initiateAssessment/index.vue'], resolve),
meta: {
title: '发起考核',
isNav: false,
hide: true
}
}, {
path: 'okr',
name: 'okr',
@ -123,7 +123,25 @@ export default [
meta: {
title: '绩效报表',
isNav: true
}
},
redirect: 'report/reportHome',
children: [{
path: 'reportHome',
name: 'reportHome',
component: (resolve) => require(['@/views/kpi/report/home/index.vue'], resolve),
meta: {
title: '绩效报表',
isNav: true
}
}, {
path: 'detial',
name: 'reportDetial',
component: (resolve) => require(['@/views/kpi/report/detail/index.vue'], resolve),
meta: {
title: '绩效详情',
isNav: true
}
}]
}, {
path: 'set',
name: 'set',
@ -147,14 +165,6 @@ export default [
title: '智能测试带弹窗',
pop: true
}
}, {
path: 'report-detial',
name: 'reportDetial',
component: (resolve) => require(['@/views/kpi/report/detail.vue'], resolve),
meta: {
title: '绩效详情',
isNav: true
}
}
]
}

2
src/views/kpi/assessment/homeList/index.vue
View File

@ -20,7 +20,7 @@
</div>
<div>
<el-form-item >
<el-button type="primary" size="small" @click="handlePush">发起考核</el-button>
<el-button type="primary" size="small" @click="$router.push({name:'initiate'})">发起考核</el-button>
</el-form-item>
<!-- <el-form-item >
<el-button size="small" >导入历史绩效</el-button>

0
src/views/kpi/report/detail.vue → src/views/kpi/report/detail/index.vue
View File

467
src/views/kpi/report/home/index.vue Normal file
View File

@ -0,0 +1,467 @@
<!-- -->
<template>
<div class="report_index">
<el-cascader
:props="props"
:options="timeOptions"
@change="handleChange"
v-model="defaultStartId"
style="width:250px">
</el-cascader>
<div class="report_content">
<div class="header">
<div v-for="(i,index) in statisticals" :key="i.id" @click="handleJump(i)">
<div>
<div>{{i.num}}</div>
<div>{{i.desc}}</div>
</div>
<span v-if="index===0"></span>
</div>
</div>
<div>
<div class="num_title">考核人数分析</div>
<div class="chart_content">
<div class="num_chart">
<div>考核人数分析</div>
<div id="num_chart"></div>
</div>
<div class="num_report">
<div>参与考核部门人数</div>
<ul class="num_report_list">
<li v-for="(assessItem, index) in assessNum" :key="assessItem.desc">
<div class="rep_list">
<div style="display:flex">
<div :style="handleliColor(index)">{{index}}</div>
<div style="margin-left:10px">{{assessItem.desc}} </div>
</div>
<div>{{ assessItem.num }}人</div>
</div>
</li>
</ul>
</div>
</div>
<div class="level_title">结果分析</div>
<div class="level_content">
<div class="level_chart">
<div class="level_tips">等级分布</div>
<div id="level_chart"></div>
</div>
<el-table :data="tableData"
:header-cell-style="{ background:'#F5F7FA'}"
border
style="flex-grow:2;margin-top:20px;height:100%">
<el-table-column prop="desc" label="绩效等级">
</el-table-column>
<el-table-column prop="num" label="实际分布">
</el-table-column>
<el-table-column label="操作" width="150">
<template slot-scope="scope">
<el-button
@click.native.prevent="handleDetailClick(scope.$index, scope.row)"
type="text"
size="small"
>
查看详情
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</div>
</template>
<script>
// 引入基本模板
import { getChartData, getStartsData } from '@/api/report'
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/bar')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
data () {
return {
// 当前选择的月份
pickerTime: '',
// 给选择器设置默认选项
defaultStartId: [],
// 当前的绩效id
startId: '',
//
statisticals: [
{num: '0', desc: '参与人数'},
{num: '0', desc: '目标制定'},
{num: '0', desc: '目标确认'},
{num: '0', desc: '执行中'},
{num: '0', desc: '结果值录入'},
{num: '0', desc: '评分'},
{num: '0', desc: '考核结束'}],
// 表格内容
tableData: [],
// 考核人数
assessNum: [],
//
value: [],
timeOptions: [{
value: 0,
label: '月底',
children: []
}, {
value: 1,
label: '自定义',
children: []
}],
//
props: {
lazy: true,
lazyLoad: (node, resolve) => {
// 获取节点类型
let type = node.data.value
// 请求获取2级列表
this.handleStartsReq(type, function (reslut) {
const childNode = Array.from(reslut.list).map(item => ({
value: item.startId,
label: item.time
}))
// console.log(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: {
},
beforeMount () { },
mounted () {
this.handleChartDataReq()
},
methods: {
handleJump (item) {
this.$router.push({name: 'assessment-stepList', query: {id: 10, step: item.flowProcess}})
},
// 背景色计算
handleliColor (val) {
let color
switch (val) {
case 0:
color = '#ff7705'
break
case 1:
color = '#ff8b22'
break
case 2:
color = '#ff9e45'
break
default:
color = '#bcbcbc'
break
}
return {
width: '20px',
height: '20px',
'text-align': 'center',
'line-height': '20px',
color: 'white',
background: color
}
},
// 页面跳转
handleDetailClick (index, rows) {
this.$router.push({
name: ('reportDetial'),
query: {startId: this.startId, flowProcess: rows.desc}
})
},
// 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)
},
//
handleChange (val) {
console.log(val)
this.startId = val[1]
this.handleChartDataReq(val[1])
},
// 获取报表内容
async handleChartDataReq (startId) {
let params = {
startId: startId
}
try {
const result = await getChartData(params)
// 如果没传startId则对startId赋予初始值，
if (typeof startId === 'undefined') {
this.defaultStartId[0] = result.data[0].type
this.defaultStartId[1] = result.data[0].defaultId
this.startId = result.data[0].defaultId
this.defaultStartName = result.data[0].defaultTime
//
this.handleStartsReq(result.data[0].type)
}
result.data.forEach((val, index) => {
if (val.type === 0) {
// 头部数据
this.statisticals = val.statisticals
} else if (val.type === 1) {
// 等级分布数据
this.tableData = val.statisticals
this.levelOption.series[0].data = Array.from(this.tableData).map(item => (item.num))
this.levelOption.xAxis[0].data = Array.from(this.tableData).map(item => (item.desc))
this.handleLevelChart()
} else if (val.type === 2) {
// 报表数据
this.assessNum = val.statisticals
this.option.series[0].data = Array.from(this.assessNum).map(item => (item.num))
this.option.xAxis[0].data = Array.from(this.assessNum).map(item => (item.desc))
this.handleNumChart()
}
})
} catch (error) {
console.log(error)
}
},
// 为了不分页直接传999
async handleStartsReq (type, handleNode) {
let params = {
currentPage: 1,
cycleType: type,
pageSize: 999
}
try {
let res = await getStartsData(params)
if (typeof handleNode === 'undefined') {
let children = Array.from(res.data.list).map(item => ({
value: item.startId,
label: item.time,
leaf: true
}))
if (type === 0) {
this.timeOptions[0].children = children
} else {
this.timeOptions[1].children = children
}
} else {
handleNode(res.data)
}
} catch (error) {
console.log(error)
}
}
},
watch: {}
}
</script>
<style lang='' scoped>
.report_index{
display: flex;
flex-direction: column;
}
.report_content {
background: white;
border: #fcfcfc solid 1px;
margin-top:20px;
padding-top:40px;
padding-left: 20px;
padding-right: 20px;
}
.header {
background: #fcfcfc;
display: flex;
align-items: center;
justify-content: space-between;
padding:0 20px;
}
.header > div{
display: flex;
cursor: pointer;
align-items: center;
flex: 1;
}
.header > div>div {
flex-grow: 1;
text-align: center;
padding:20px
}
.header > div >div> div:nth-child(1) {
color: black;
font-weight: bold;
font-size: 20px;
}
.header > div>div > div:nth-child(2) {
color: #3a3a3a;
font-size: 14px;
}
.header span {
display: inline-block;
background: #333333;
height: 30px;
width: 1px;
}
.num_title{
margin-top:20px;
margin-bottom: 25px;
color: #333333;
}
.chart_content{
display: flex;
}
.num_tips{
display: flex;
}
.num_chart{
flex-grow: 1
}
.num_chart>:nth-child(1){
color: #3a3a3a;
font-size: 14px;
padding-left: 20px;
}
.num_report {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.num_report>:nth-child(1){
color: #3a3a3a;
font-size: 14px;
}
.num_report_list{
margin-top: 20px;
height: 360px;
overflow:auto
}
.rep_list{
width: 200px;
display: flex;
margin-bottom: 10px;
justify-content: space-between;
}
.rep_list>:nth-child(2){
text-align: start;
}
.level_title{
margin-top:20px;
margin-bottom: 25px;
color: #333333;
}
.level_tips{
color: #3a3a3a;
font-size: 14px;
width: fit-content;
padding-left: 20px;
position: relative;
}
.num_report{
display: flex
}
#num_chart {
widows: 500px;
height: 360px;
}
.level_content{
display: flex;
}
.level_chart {
display: flex;
flex-grow: 1;
}
#level_chart {
width: 500px;
height: 360px;
}
</style>

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

@ -1,467 +1,27 @@
<!-- -->
<template>
<div class="report_index">
<el-cascader
:props="props"
:options="timeOptions"
@change="handleChange"
v-model="defaultStartId"
style="width:250px">
</el-cascader>
<div class="report_content">
<div class="header">
<div v-for="(i,index) in statisticals" :key="i.id" @click="handleJump(i)">
<div>
<div>{{i.num}}</div>
<div>{{i.desc}}</div>
</div>
<span v-if="index===0"></span>
</div>
</div>
<div>
<div class="num_title">考核人数分析</div>
<div class="chart_content">
<div class="num_chart">
<div>考核人数分析</div>
<div id="num_chart"></div>
</div>
<div class="num_report">
<div>参与考核部门人数</div>
<ul class="num_report_list">
<li v-for="(assessItem, index) in assessNum" :key="assessItem.desc">
<div class="rep_list">
<div style="display:flex">
<div :style="handleliColor(index)">{{index}}</div>
<div style="margin-left:10px">{{assessItem.desc}} </div>
</div>
<div>{{ assessItem.num }}人</div>
</div>
</li>
</ul>
</div>
</div>
<div class="level_title">结果分析</div>
<div class="level_content">
<div class="level_chart">
<div class="level_tips">等级分布</div>
<div id="level_chart"></div>
</div>
<el-table :data="tableData"
:header-cell-style="{ background:'#F5F7FA'}"
border
style="flex-grow:2;margin-top:20px;height:100%">
<el-table-column prop="desc" label="绩效等级">
</el-table-column>
<el-table-column prop="num" label="实际分布">
</el-table-column>
<el-table-column label="操作" width="150">
<template slot-scope="scope">
<el-button
@click.native.prevent="handleDetailClick(scope.$index, scope.row)"
type="text"
size="small"
>
查看详情
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div>
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
// 引入基本模板
import { getChartData, getStartsData } from '@/api/report'
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/bar')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
data () {
return {
// 当前选择的月份
pickerTime: '',
// 给选择器设置默认选项
defaultStartId: [],
// 当前的绩效id
startId: '',
//
statisticals: [
{num: '0', desc: '参与人数'},
{num: '0', desc: '目标制定'},
{num: '0', desc: '目标确认'},
{num: '0', desc: '执行中'},
{num: '0', desc: '结果值录入'},
{num: '0', desc: '评分'},
{num: '0', desc: '考核结束'}],
// 表格内容
tableData: [],
// 考核人数
assessNum: [],
//
value: [],
timeOptions: [{
value: 0,
label: '月底',
children: []
}, {
value: 1,
label: '自定义',
children: []
}],
//
props: {
lazy: true,
lazyLoad: (node, resolve) => {
// 获取节点类型
let type = node.data.value
// 请求获取2级列表
this.handleStartsReq(type, function (reslut) {
const childNode = Array.from(reslut.list).map(item => ({
value: item.startId,
label: item.time
}))
// console.log(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: {
},
beforeMount () { },
mounted () {
this.handleChartDataReq()
},
methods: {
handleJump (item) {
this.$router.push({name: 'assessment-stepList', query: {id: 10, step: item.flowProcess}})
},
// 背景色计算
handleliColor (val) {
let color
switch (val) {
case 0:
color = '#ff7705'
break
case 1:
color = '#ff8b22'
break
case 2:
color = '#ff9e45'
break
default:
color = '#bcbcbc'
break
}
return {
width: '20px',
height: '20px',
'text-align': 'center',
'line-height': '20px',
color: 'white',
background: color
}
},
// 页面跳转
handleDetailClick (index, rows) {
this.$router.push({
path: ('report-detial'),
query: {startId: this.startId, flowProcess: rows.desc}
})
},
// 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)
},
//
handleChange (val) {
console.log(val)
this.startId = val[1]
this.handleChartDataReq(val[1])
},
// 获取报表内容
async handleChartDataReq (startId) {
let params = {
startId: startId
}
try {
const result = await getChartData(params)
// 如果没传startId则对startId赋予初始值，
if (typeof startId === 'undefined') {
this.defaultStartId[0] = result.data[0].type
this.defaultStartId[1] = result.data[0].defaultId
this.startId = result.data[0].defaultId
this.defaultStartName = result.data[0].defaultTime
//
this.handleStartsReq(result.data[0].type)
}
result.data.forEach((val, index) => {
if (val.type === 0) {
// 头部数据
this.statisticals = val.statisticals
} else if (val.type === 1) {
// 等级分布数据
this.tableData = val.statisticals
this.levelOption.series[0].data = Array.from(this.tableData).map(item => (item.num))
this.levelOption.xAxis[0].data = Array.from(this.tableData).map(item => (item.desc))
this.handleLevelChart()
} else if (val.type === 2) {
// 报表数据
this.assessNum = val.statisticals
this.option.series[0].data = Array.from(this.assessNum).map(item => (item.num))
this.option.xAxis[0].data = Array.from(this.assessNum).map(item => (item.desc))
this.handleNumChart()
}
})
} catch (error) {
console.log(error)
}
},
// 为了不分页直接传999
async handleStartsReq (type, handleNode) {
let params = {
currentPage: 1,
cycleType: type,
pageSize: 999
}
try {
let res = await getStartsData(params)
if (typeof handleNode === 'undefined') {
let children = Array.from(res.data.list).map(item => ({
value: item.startId,
label: item.time,
leaf: true
}))
if (type === 0) {
this.timeOptions[0].children = children
} else {
this.timeOptions[1].children = children
}
} else {
handleNode(res.data)
}
} catch (error) {
console.log(error)
}
}
},
computed: {},
beforeMount () {},
mounted () {},
methods: {},
watch: {}
}
</script>
<style lang='' scoped>
.report_index{
display: flex;
flex-direction: column;
}
.report_content {
background: white;
border: #fcfcfc solid 1px;
margin-top:20px;
padding-top:40px;
padding-left: 20px;
padding-right: 20px;
}
.header {
background: #fcfcfc;
display: flex;
align-items: center;
justify-content: space-between;
padding:0 20px;
}
.header > div{
display: flex;
cursor: pointer;
align-items: center;
flex: 1;
}
.header > div>div {
flex-grow: 1;
text-align: center;
padding:20px
}
.header > div >div> div:nth-child(1) {
color: black;
font-weight: bold;
font-size: 20px;
}
.header > div>div > div:nth-child(2) {
color: #3a3a3a;
font-size: 14px;
}
.header span {
display: inline-block;
background: #333333;
height: 30px;
width: 1px;
}
.num_title{
margin-top:20px;
margin-bottom: 25px;
color: #333333;
}
.chart_content{
display: flex;
}
.num_tips{
display: flex;
}
.num_chart{
flex-grow: 1
}
.num_chart>:nth-child(1){
color: #3a3a3a;
font-size: 14px;
padding-left: 20px;
}
.num_report {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.num_report>:nth-child(1){
color: #3a3a3a;
font-size: 14px;
}
.num_report_list{
margin-top: 20px;
height: 360px;
overflow:auto
}
.rep_list{
width: 200px;
display: flex;
margin-bottom: 10px;
justify-content: space-between;
}
.rep_list>:nth-child(2){
text-align: start;
}
.level_title{
margin-top:20px;
margin-bottom: 25px;
color: #333333;
}
.level_tips{
color: #3a3a3a;
font-size: 14px;
width: fit-content;
padding-left: 20px;
position: relative;
}
.num_report{
display: flex
}
#num_chart {
widows: 500px;
height: 360px;
}
.level_content{
display: flex;
}
.level_chart {
display: flex;
flex-grow: 1;
}
#level_chart {
width: 500px;
height: 360px;
}
</style>