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

bug修改

Browse Source
This commit is contained in:
sean yu 2020-10-28 20:15:46 +08:00
parent a60081173e
commit f6f9d8b97d
4 changed files with 214 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/api/report.js
View File

@ -17,3 +17,20 @@ export function getStartsData (query) {
data: 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
})
}

7
src/router/kpi_route.js
View File

@ -147,6 +147,13 @@ export default [
title: '智能测试带弹窗', title: '智能测试带弹窗',
pop: true pop: true
} }
}, {
path: 'report-detial',
name: 'reportDetial',
component: (resolve) => require(['@/views/kpi/report/detail.vue'], resolve),
meta: {
title: '绩效详情'
}
} }
] ]
} }

119
src/views/kpi/report/detail.vue
View File

@ -1,40 +1,121 @@
<!-- --> <!-- -->
<template> <template>
<div> <div>
<div>返回</div> <div class="title_bar">
<span></span> <div @click="handleBack">返回</div>
<div>等级分布详情<div> <span></span>
</div> <div>等级分布详情</div>
<div> </div>
<el-cascader></el-cascader> <div class="detail_content">
<el-table :data="tableData" <el-cascader :options="depList" @change="handleChange" style="margin-bottom:20px" ></el-cascader>
<el-table :data="tableData"
border border
:header-cell-style="{ background:'#F5F7FA'}"> :header-cell-style="{ background:'#F5F7FA'}"
<el-table-column></el-table-column> style="margin-top:20px">
<el-table-column></el-table-column> <el-table-column prop="staffName" label="姓名"></el-table-column>
<el-table-column></el-table-column> <el-table-column prop="staffNo" label="工号"></el-table-column>
<el-table-column><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> </el-table>
</div>
</div> </div>
</template> </template>
<script> <script>
import {getChartDetail, getDepList} from '@/api/report'
export default { export default {
data () { data () {
return { return {
// 表格数据
tableData: [],
// 部门数据列表
depList: []
} }
}, },
computed: {}, computed: {},
beforeMount () {}, beforeMount () {},
mounted () {}, mounted () {
methods: {}, this.handleDepListReq()
watch: {} 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> </script>
<style lang='' scoped> <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> </style>

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

@ -27,61 +27,65 @@
<div>{{statisticals[4].desc}}</div> <div>{{statisticals[4].desc}}</div>
</div> </div>
<div> <div>
<div>{{statisticals[4].num}}</div> <div>{{statisticals[5].num}}</div>
<div>{{statisticals[4].desc}}</div> <div>{{statisticals[5].desc}}</div>
</div> </div>
<div> <div>
<div>{{statisticals[4].num}}</div> <div>{{statisticals[6].num}}</div>
<div>{{statisticals[4].desc}}</div> <div>{{statisticals[6].desc}}</div>
</div> </div>
</div> </div>
<div> <div>
<div class="num_title">考核人数分析</div> <div class="num_title">考核人数分析</div>
<div class="num_tips"> <div class="chart_content">
<div class="num_chart">
<div>考核人数分析</div> <div>考核人数分析</div>
<div>参与考核部门人数</div> <div id="num_chart"></div>
</div> </div>
<div class="num_report"> <div class="num_report">
<div id="num_chart"></div> <div>参与考核部门人数</div>
<ul> <ul class="num_report_list">
<li v-for="(assessItem, index) in assessNum" :key="assessItem.desc"> <li v-for="(assessItem, index) in assessNum" :key="assessItem.desc">
<div class="rep_list"> <div class="rep_list">
<div :style="handleliColor(index)">{{index}} <div style="display:flex">
</div> <div :style="handleliColor(index)">{{index}}</div>
<div>{{assessItem.desc}} {{ assessItem.num }}人</div> <div style="margin-left:10px">{{assessItem.desc}} </div>
</div> </div>
<div>{{ assessItem.num }}人</div>
</div>
</li> </li>
</ul> </ul>
</div> </div>
<div class="level_title">结果分析</div> </div>
<div class="level_tips">等级分布</div> <div class="level_title">结果分析</div>
<div class="reslut_display"> <div class="level_content">
<div class="level_chart">
<div class="level_tips">等级分布</div>
<div id="level_chart"></div> <div id="level_chart"></div>
<el-table :data="tableData" </div>
:header-cell-style="{ background:'#F5F7FA'}" <el-table :data="tableData"
border :header-cell-style="{ background:'#F5F7FA'}"
> border
<el-table-column prop="desc" label="绩效等级"> style="flex-grow:2;margin-top:20px">
</el-table-column> <el-table-column prop="desc" label="绩效等级">
<el-table-column prop="num" label="实际分布" width="200"> </el-table-column>
</el-table-column> <el-table-column prop="num" label="实际分布">
<el-table-column label="操作" width="150"> </el-table-column>
<template slot-scope="scope"> <el-table-column label="操作" width="150">
<el-button <template slot-scope="scope">
@click.native.prevent=" <el-button
handleDetailClick(scope.$index, tableData) @click.native.prevent="handleDetailClick(scope.$index, scope.row)"
"
type="text" type="text"
size="small" size="small"
> >
查看详情 查看详情
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div>
</div> </div>
</div> </div>
</div>
</div> </div>
</template> </template>
@ -102,6 +106,8 @@ export default {
// 当前选择的月份 // 当前选择的月份
pickerTime: '', pickerTime: '',
// //
startId: '',
//
statisticals: [ statisticals: [
{num: '0', desc: '参与人数'}, {num: '0', desc: '参与人数'},
{num: '0', desc: '目标制定'}, {num: '0', desc: '目标制定'},
@ -255,9 +261,13 @@ export default {
background: color background: color
} }
}, },
// // 页面跳转
handleDetailClick (index, rows) { handleDetailClick (index, rows) {
this.$router.push({
path: ('report-detial'),
query: {startId: this.startId, flowProcess: rows.desc}
})
console.log(this.$router)
}, },
// Y轴坐标计算，取靠近最大值的3的倍数作为上限，然后划分成4个刻度(0为初始刻度) // Y轴坐标计算，取靠近最大值的3的倍数作为上限，然后划分成4个刻度(0为初始刻度)
handleChartYMul (val) { handleChartYMul (val) {
@ -277,7 +287,7 @@ export default {
}, },
// //
handleChange (val) { handleChange (val) {
console.log(val) this.startId = val[1]
this.handleChartDataReq(val[1]) this.handleChartDataReq(val[1])
}, },
// 获取报表内容 // 获取报表内容
@ -332,10 +342,8 @@ export default {
<style lang='' scoped> <style lang='' scoped>
.report_content { .report_content {
width: fit-content;
height: fit-content;
background: white; background: white;
border-style: #fcfcfc solid 3px; border: #fcfcfc solid 1px;
margin-top:20px; margin-top:20px;
padding-top:40px; padding-top:40px;
padding-left: 20px; padding-left: 20px;
@ -343,17 +351,13 @@ export default {
} }
.header { .header {
background: #fcfcfc; background: #fcfcfc;
width: fit-content; display: flex;
align-items: center;
} }
.header > div { .header > div {
display: inline-block; flex-grow: 1;
width: fit-content;
height: fit-content;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 30px;
text-align: center; text-align: center;
padding:20px
} }
.header > div > div:nth-child(1) { .header > div > div:nth-child(1) {
color: black; color: black;
@ -369,29 +373,48 @@ export default {
background: #333333; background: #333333;
height: 30px; height: 30px;
width: 1px; width: 1px;
margin-top: 20px;
} }
.num_title{ .num_title{
margin-top:20px; margin-top:20px;
margin-bottom: 25px; margin-bottom: 25px;
color: #333333; color: #333333;
} }
.num_tips > div:nth-child(1) { .chart_content{
display: inline-block; display: flex;
color: #3a3a3a;
font-size: 14px;
width: fit-content;
padding-left: 20px;
position: relative;
} }
.num_tips > div:nth-child(2) { .num_tips{
display: inline-block; display: flex;
}
.num_chart {
flex-grow: 1;
}
.num_chart>:nth-child(1){
color: #3a3a3a; color: #3a3a3a;
font-size: 14px; font-size: 14px;
width: fit-content; padding-left: 20px;
padding-left: 50%; }
margin-bottom: 20px; .num_report {
position: relative; 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{ .level_title{
margin-top:20px; margin-top:20px;
@ -408,25 +431,19 @@ export default {
.num_report{ .num_report{
display: flex display: flex
} }
.rep_list{
display: flex;
}
.rep_list>:nth-child(2){
width: 200px;
margin-left: 10px;
flex:1
}
#num_chart { #num_chart {
display: inline-block; widows: 500px;
width: 600px;
height: 360px; height: 360px;
} }
.reslut_display { .level_content{
display: flex; display: flex;
} }
.level_chart {
display: flex;
flex-grow: 1;
}
#level_chart { #level_chart {
width: 600px; width: 500px;
height: 360px; height: 360px;
flex: 1;
} }
</style> </style>