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

添加报表详情页面

Browse Source
This commit is contained in:
sean yu 2020-10-27 16:23:45 +08:00
parent 375f5a78e2
commit 8ffb591188
3 changed files with 209 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/report.js
View File

@ -4,8 +4,8 @@ import requestFuc from '@/utils/request'
export function getChartData (query) {
return requestFuc({
url: '/lz_management/performance/chart/result',
method: 'POST',
data: query
method: 'get',
params: query
})
}

40
src/views/kpi/report/detail.vue Normal file
View File

@ -0,0 +1,40 @@
<!-- -->
<template>
<div>
<div>返回</div>
<span></span>
<div>等级分布详情<div>
</div>
<div>
<el-cascader></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>
</el-table>
</div>
</template>
<script>
export default {
data () {
return {
}
},
computed: {},
beforeMount () {},
mounted () {},
methods: {},
watch: {}
}
</script>
<style lang='' scoped>
</style>

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

@ -1,41 +1,42 @@
<!-- -->
<template>
<div class="block">
<el-cascader :props="props" :options="timeOptions"></el-cascader>
<el-cascader :props="props" :options="timeOptions" @change="handleChange">
</el-cascader>
<div class="report_content">
<div class="header">
<div>
<div>7</div>
<div>参与人数</div>
<div>{{statisticals[0].num}}</div>
<div>{{statisticals[0].desc}}</div>
</div>
<span></span>
<div>
<div>7</div>
<div>目标定制</div>
<div>{{statisticals[1].num}}</div>
<div>{{statisticals[1].desc}}</div>
</div>
<div>
<div>1</div>
<div>目标确认</div>
<div>{{statisticals[2].num}}</div>
<div>{{statisticals[2].desc}}</div>
</div>
<div>
<div>7</div>
<div>执行中</div>
<div>{{statisticals[3].num}}</div>
<div>{{statisticals[3].desc}}</div>
</div>
<div>
<div>7</div>
<div>结果值录入</div>
<div>{{statisticals[4].num}}</div>
<div>{{statisticals[4].desc}}</div>
</div>
<div>
<div>7</div>
<div>评分</div>
<div>{{statisticals[4].num}}</div>
<div>{{statisticals[4].desc}}</div>
</div>
<div>
<div>7</div>
<div>考核结束</div>
<div>{{statisticals[4].num}}</div>
<div>{{statisticals[4].desc}}</div>
</div>
</div>
<div>
<div>考核人数分析</div>
<div class="num_title">考核人数分析</div>
<div class="num_tips">
<div>考核人数分析</div>
<div>参与考核部门人数</div>
@ -43,28 +44,26 @@
<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 v-for="(assessItem, index) in assessNum" :key="assessItem.desc">
<div class="rep_list">
<div :class="handleliColor(index)">{{ index }}
</div>
<div>{{ assessItem.title }} {{ assessItem.num }}人</div>
</div>
</li>
</ul>
</div>
<div>结果分析</div>
<div>等级分布</div>
<div class="level_title">结果分析</div>
<div class="level_tips">等级分布</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 :data="tableData"
:header-cell-style="{ background:'#F5F7FA'}"
border
style="flex:1">
<el-table-column prop="desc" label="绩效等级" width="200">
</el-table-column>
<el-table-column prop="layout" label="实际分布" width="200">
<el-table-column prop="num" label="实际分布" width="200">
</el-table-column>
<el-table-column label="操作" width="150">
<template slot-scope="scope">
@ -89,17 +88,32 @@
<script>
// 引入基本模板
import { getChartData, getStartsData } from '@/api/report'
let echarts = require('echarts/lib/echarts')
// 引入 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: '',
//
statisticals: [
{num: '0', desc: '参与人数'},
{num: '0', desc: '目标制定'},
{num: '0', desc: '目标确认'},
{num: '0', desc: '执行中'},
{num: '0', desc: '结果值录入'},
{num: '0', desc: '评分'},
{num: '0', desc: '考核结束'}],
// 表格内容
tableData: [],
//
deps: [],
// 考核人数
assessNum: [],
//
value: [],
timeOptions: [{
@ -115,22 +129,17 @@ export default {
props: {
lazy: true,
lazyLoad: (node, resolve) => {
const { level } = node
let type = node.data.val
console.log(this)
console.log('aaaa')
// 获取节点类型
let type = node.data.value
// 请求获取2级列表
this.handleStartsReq(type, function (reslut) {
console.log('aaaaaaa')
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)
}
const childNode = Array.from(reslut.list).map(item => ({
value: item.startId,
label: item.time,
leaf: true
}))
resolve(childNode)
})
}
},
@ -172,7 +181,7 @@ export default {
}
]
},
//
// 等级分布数据报表持有类
levelOption: {
color: ['#3398DB'],
tooltip: {
@ -203,7 +212,7 @@ export default {
],
series: [
{
name: '',
name: '直接访问',
type: 'bar',
barWidth: '60%',
data: []
@ -213,25 +222,36 @@ export default {
}
},
computed: {
// 背景色计算
handleliColor (pos) {
switch (pos) {
case 0:
return '#ff7705'
case 1:
return '#ff8b22'
case 2:
return '#ff9e45'
default:
return '#bcbcbc'
}
}
},
beforeMount () { },
mounted () {
this.handleChartDataReq()
this.handleLevelChart()
},
methods: {
// 背景色计算
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',
background: color
}
},
//
handleDetailClick (index, rows) {
@ -252,11 +272,41 @@ export default {
let levelChart = echarts.init(document.getElementById('level_chart'))
levelChart.setOption(this.levelOption)
},
// 获取报表内容
handleChartDataReq () {
getChartData()
//
handleChange (val) {
console.log(val)
this.handleChartDataReq(val[1])
},
// 获取报表内容
async handleChartDataReq (startId) {
let params = {
startId: startId
}
try {
const result = await getChartData(params)
result.forEach((val, index) => {
console.log(val)
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 = {
@ -282,12 +332,34 @@ export default {
height: fit-content;
background: white;
border-style: #fcfcfc solid 3px;
margin-top: 20px;
margin-top:20px;
padding-top:40px;
padding-left: 20px;
padding-right: 20px;
}
.header {
background: #fcfcfc;
width: fit-content;
}
.header > div {
display: inline-block;
width: fit-content;
height: fit-content;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 30px;
text-align: center;
}
.header > div > div:nth-child(1) {
color: black;
font-weight: bold;
font-size: 20px;
}
.header > div > div:nth-child(2) {
color: #3a3a3a;
font-size: 14px;
}
.header > span {
display: inline-block;
background: #333333;
@ -295,25 +367,14 @@ export default {
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_title{
margin-top:20px;
margin-bottom: 25px;
color: #333333;
}
.num_tips > div:nth-child(1) {
display: inline-block;
color: #333333;
color: #3a3a3a;
font-size: 14px;
width: fit-content;
padding-left: 20px;
@ -321,12 +382,30 @@ export default {
}
.num_tips > div:nth-child(2) {
display: inline-block;
color: #333333;
color: #3a3a3a;
font-size: 14px;
width: fit-content;
padding-left: 50%;
position: relative;
}
.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
}
.rep_list{
display: flex;
}
#num_chart {
display: inline-block;
width: 600px;
@ -336,7 +415,6 @@ export default {
display: flex;
}
#level_chart {
display: inline-block;
width: 600px;
height: 360px;
flex: 1;