bug修改
This commit is contained in:
sean yu
parent
a60081173e
commit
f6f9d8b97d
@ -17,3 +17,20 @@ export function getStartsData (query) {
|
||||
data: query
|
||||
})
|
||||
}
|
||||
// 获取绩效排名详情
|
||||
export function getChartDetail (query) {
|
||||
return requestFuc({
|
||||
url: '/lz_management/performance/chart/detail',
|
||||
method: 'POST',
|
||||
data: query
|
||||
})
|
||||
}
|
||||
|
||||
// 获取部门信息
|
||||
export function getDepList (query) {
|
||||
return requestFuc({
|
||||
url: '/lz_management/staff/structure/deplist',
|
||||
method: 'GET',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
@ -147,6 +147,13 @@ export default [
|
||||
title: '智能测试带弹窗',
|
||||
pop: true
|
||||
}
|
||||
}, {
|
||||
path: 'report-detial',
|
||||
name: 'reportDetial',
|
||||
component: (resolve) => require(['@/views/kpi/report/detail.vue'], resolve),
|
||||
meta: {
|
||||
title: '绩效详情'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,40 +1,121 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div>
|
||||
<div>返回</div>
|
||||
<span></span>
|
||||
<div>等级分布详情<div>
|
||||
</div>
|
||||
<div>
|
||||
<el-cascader></el-cascader>
|
||||
<el-table :data="tableData"
|
||||
<div>
|
||||
<div class="title_bar">
|
||||
<div @click="handleBack">返回</div>
|
||||
<span></span>
|
||||
<div>等级分布详情</div>
|
||||
</div>
|
||||
<div class="detail_content">
|
||||
<el-cascader :options="depList" @change="handleChange" style="margin-bottom:20px" ></el-cascader>
|
||||
<el-table :data="tableData"
|
||||
border
|
||||
:header-cell-style="{ background:'#F5F7FA'}">
|
||||
<el-table-column></el-table-column>
|
||||
<el-table-column></el-table-column>
|
||||
<el-table-column></el-table-column>
|
||||
<el-table-column><el-table-column>
|
||||
:header-cell-style="{ background:'#F5F7FA'}"
|
||||
style="margin-top:20px">
|
||||
<el-table-column prop="staffName" label="姓名"></el-table-column>
|
||||
<el-table-column prop="staffNo" label="工号"></el-table-column>
|
||||
<el-table-column prop="departmentName" label="部门"></el-table-column>
|
||||
<el-table-column prop="allScore" label="考评结果"></el-table-column>
|
||||
<el-table-column prop="scoreLevel" label="实际分布"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getChartDetail, getDepList} from '@/api/report'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
|
||||
// 表格数据
|
||||
tableData: [],
|
||||
// 部门数据列表
|
||||
depList: []
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () {},
|
||||
mounted () {},
|
||||
methods: {},
|
||||
watch: {}
|
||||
mounted () {
|
||||
this.handleDepListReq()
|
||||
this.handleDetailReq()
|
||||
},
|
||||
methods: {
|
||||
// 返回上一页
|
||||
handleBack () {
|
||||
this.$router.go(-1)
|
||||
},
|
||||
// 多选框转中处理
|
||||
handleChange (val) {
|
||||
this.handleDetailReq(val[1])
|
||||
},
|
||||
// 请求详情页面信息
|
||||
async handleDetailReq (depId) {
|
||||
let params = {
|
||||
currPage: 1,
|
||||
departmentId: depId,
|
||||
flowProcess: this.$route.query.flowProcess,
|
||||
startId: this.$route.query.startId,
|
||||
pageSize: 20
|
||||
}
|
||||
let result = await getChartDetail(params)
|
||||
this.tableData = result.data.list
|
||||
},
|
||||
// 请求部门信息
|
||||
async handleDepListReq (handleNode) {
|
||||
let params = {
|
||||
type: 0
|
||||
}
|
||||
let result = await getDepList(params)
|
||||
console.log(result)
|
||||
this.depList = this.handleDepResult(result.data)
|
||||
},
|
||||
// 递归生成可用数组
|
||||
handleDepResult (list) {
|
||||
return Array.from(list).map(item => {
|
||||
let resItem = {
|
||||
value: item.departmentId,
|
||||
label: item.departmentName
|
||||
}
|
||||
// 如果有下一级部门则递归调用
|
||||
if (item.list && item.list.length > 0) {
|
||||
let children = this.handleDepResult(item.list)
|
||||
resItem['children'] = children
|
||||
}
|
||||
return resItem
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='' scoped>
|
||||
|
||||
.title_bar{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.title_bar>:nth-child(1){
|
||||
font-size: 16px;
|
||||
color: #b4b4b4;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.title_bar>:nth-child(2){
|
||||
height: 15px ;
|
||||
width: 1px;
|
||||
background: #333;
|
||||
}
|
||||
.title_bar>:nth-child(3){
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.detail_content{
|
||||
background: white;
|
||||
padding: 40px 20px;
|
||||
border:solid 1px #b4b4b4;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -27,61 +27,65 @@
|
||||
<div>{{statisticals[4].desc}}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>{{statisticals[4].num}}</div>
|
||||
<div>{{statisticals[4].desc}}</div>
|
||||
<div>{{statisticals[5].num}}</div>
|
||||
<div>{{statisticals[5].desc}}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>{{statisticals[4].num}}</div>
|
||||
<div>{{statisticals[4].desc}}</div>
|
||||
<div>{{statisticals[6].num}}</div>
|
||||
<div>{{statisticals[6].desc}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="num_title">考核人数分析</div>
|
||||
<div class="num_tips">
|
||||
<div class="num_title">考核人数分析</div>
|
||||
<div class="chart_content">
|
||||
<div class="num_chart">
|
||||
<div>考核人数分析</div>
|
||||
<div>参与考核部门人数</div>
|
||||
<div id="num_chart"></div>
|
||||
</div>
|
||||
<div class="num_report">
|
||||
<div id="num_chart"></div>
|
||||
<ul>
|
||||
<div>参与考核部门人数</div>
|
||||
<ul class="num_report_list">
|
||||
<li v-for="(assessItem, index) in assessNum" :key="assessItem.desc">
|
||||
<div class="rep_list">
|
||||
<div :style="handleliColor(index)">{{index}}
|
||||
</div>
|
||||
<div>{{assessItem.desc}} {{ assessItem.num }}人</div>
|
||||
<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 class="level_title">结果分析</div>
|
||||
<div class="level_tips">等级分布</div>
|
||||
<div class="reslut_display">
|
||||
</div>
|
||||
<div class="level_title">结果分析</div>
|
||||
<div class="level_content">
|
||||
<div class="level_chart">
|
||||
<div class="level_tips">等级分布</div>
|
||||
<div id="level_chart"></div>
|
||||
<el-table :data="tableData"
|
||||
:header-cell-style="{ background:'#F5F7FA'}"
|
||||
border
|
||||
>
|
||||
<el-table-column prop="desc" label="绩效等级">
|
||||
</el-table-column>
|
||||
<el-table-column prop="num" 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)
|
||||
"
|
||||
</div>
|
||||
<el-table :data="tableData"
|
||||
:header-cell-style="{ background:'#F5F7FA'}"
|
||||
border
|
||||
style="flex-grow:2;margin-top:20px">
|
||||
<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>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -102,6 +106,8 @@ export default {
|
||||
// 当前选择的月份
|
||||
pickerTime: '',
|
||||
//
|
||||
startId: '',
|
||||
//
|
||||
statisticals: [
|
||||
{num: '0', desc: '参与人数'},
|
||||
{num: '0', desc: '目标制定'},
|
||||
@ -255,9 +261,13 @@ export default {
|
||||
background: color
|
||||
}
|
||||
},
|
||||
//
|
||||
// 页面跳转
|
||||
handleDetailClick (index, rows) {
|
||||
|
||||
this.$router.push({
|
||||
path: ('report-detial'),
|
||||
query: {startId: this.startId, flowProcess: rows.desc}
|
||||
})
|
||||
console.log(this.$router)
|
||||
},
|
||||
// Y轴坐标计算，取靠近最大值的3的倍数作为上限，然后划分成4个刻度(0为初始刻度)
|
||||
handleChartYMul (val) {
|
||||
@ -277,7 +287,7 @@ export default {
|
||||
},
|
||||
//
|
||||
handleChange (val) {
|
||||
console.log(val)
|
||||
this.startId = val[1]
|
||||
this.handleChartDataReq(val[1])
|
||||
},
|
||||
// 获取报表内容
|
||||
@ -332,10 +342,8 @@ export default {
|
||||
|
||||
<style lang='' scoped>
|
||||
.report_content {
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
background: white;
|
||||
border-style: #fcfcfc solid 3px;
|
||||
border: #fcfcfc solid 1px;
|
||||
margin-top:20px;
|
||||
padding-top:40px;
|
||||
padding-left: 20px;
|
||||
@ -343,17 +351,13 @@ export default {
|
||||
}
|
||||
.header {
|
||||
background: #fcfcfc;
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.header > div {
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
padding:20px
|
||||
}
|
||||
.header > div > div:nth-child(1) {
|
||||
color: black;
|
||||
@ -369,29 +373,48 @@ export default {
|
||||
background: #333333;
|
||||
height: 30px;
|
||||
width: 1px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.num_title{
|
||||
margin-top:20px;
|
||||
margin-bottom: 25px;
|
||||
color: #333333;
|
||||
}
|
||||
.num_tips > div:nth-child(1) {
|
||||
display: inline-block;
|
||||
color: #3a3a3a;
|
||||
font-size: 14px;
|
||||
width: fit-content;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
.chart_content{
|
||||
display: flex;
|
||||
}
|
||||
.num_tips > div:nth-child(2) {
|
||||
display: inline-block;
|
||||
.num_tips{
|
||||
display: flex;
|
||||
}
|
||||
.num_chart {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.num_chart>:nth-child(1){
|
||||
color: #3a3a3a;
|
||||
font-size: 14px;
|
||||
width: fit-content;
|
||||
padding-left: 50%;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
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;
|
||||
@ -408,25 +431,19 @@ export default {
|
||||
.num_report{
|
||||
display: flex
|
||||
}
|
||||
.rep_list{
|
||||
display: flex;
|
||||
}
|
||||
.rep_list>:nth-child(2){
|
||||
width: 200px;
|
||||
margin-left: 10px;
|
||||
flex:1
|
||||
}
|
||||
#num_chart {
|
||||
display: inline-block;
|
||||
width: 600px;
|
||||
widows: 500px;
|
||||
height: 360px;
|
||||
}
|
||||
.reslut_display {
|
||||
.level_content{
|
||||
display: flex;
|
||||
}
|
||||
.level_chart {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
}
|
||||
#level_chart {
|
||||
width: 600px;
|
||||
width: 500px;
|
||||
height: 360px;
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user