优化
This commit is contained in:
熊成强
parent
61953f090a
commit
026b698862
@ -71,6 +71,15 @@ export default [
|
|||||||
title: '考核管理',
|
title: '考核管理',
|
||||||
isNav: true
|
isNav: true
|
||||||
}
|
}
|
||||||
|
}, {
|
||||||
|
path: 'initiate',
|
||||||
|
name: 'initiate',
|
||||||
|
component: (resolve) => require(['@/views/kpi/workbench/initiateAssessment/index.vue'], resolve),
|
||||||
|
meta: {
|
||||||
|
title: '发起考核',
|
||||||
|
isNav: false,
|
||||||
|
hide: true
|
||||||
|
}
|
||||||
}, {
|
}, {
|
||||||
path: 'stepList',
|
path: 'stepList',
|
||||||
name: 'assessment-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',
|
path: 'okr',
|
||||||
name: 'okr',
|
name: 'okr',
|
||||||
@ -123,7 +123,25 @@ export default [
|
|||||||
meta: {
|
meta: {
|
||||||
title: '绩效报表',
|
title: '绩效报表',
|
||||||
isNav: true
|
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',
|
path: 'set',
|
||||||
name: 'set',
|
name: 'set',
|
||||||
@ -147,14 +165,6 @@ export default [
|
|||||||
title: '智能测试带弹窗',
|
title: '智能测试带弹窗',
|
||||||
pop: true
|
pop: true
|
||||||
}
|
}
|
||||||
}, {
|
|
||||||
path: 'report-detial',
|
|
||||||
name: 'reportDetial',
|
|
||||||
component: (resolve) => require(['@/views/kpi/report/detail.vue'], resolve),
|
|
||||||
meta: {
|
|
||||||
title: '绩效详情',
|
|
||||||
isNav: true
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -20,7 +20,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<el-form-item >
|
<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-form-item >
|
<!-- <el-form-item >
|
||||||
<el-button size="small" >导入历史绩效</el-button>
|
<el-button size="small" >导入历史绩效</el-button>
|
||||||
|
|||||||
467
src/views/kpi/report/home/index.vue
Normal file
467
src/views/kpi/report/home/index.vue
Normal 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>
|
||||||
@ -1,467 +1,27 @@
|
|||||||
<!-- -->
|
<!-- -->
|
||||||
<template>
|
<template>
|
||||||
<div class="report_index">
|
<div>
|
||||||
<el-cascader
|
<router-view></router-view>
|
||||||
: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>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<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 {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
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: {}
|
watch: {}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang='' scoped>
|
<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>
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user