Merge branch 'v_1.0.0' of http://gitlab.ldxinyong.com/enterpriseManagement/digitization-ui into v_1.0.0
This commit is contained in:
commit
a5a2d9b78a
@ -4,8 +4,8 @@ import requestFuc from '@/utils/request'
|
|||||||
export function getChartData (query) {
|
export function getChartData (query) {
|
||||||
return requestFuc({
|
return requestFuc({
|
||||||
url: '/lz_management/performance/chart/result',
|
url: '/lz_management/performance/chart/result',
|
||||||
method: 'POST',
|
method: 'get',
|
||||||
data: query
|
params: query
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
40
src/views/kpi/report/detail.vue
Normal file
40
src/views/kpi/report/detail.vue
Normal 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>
|
||||||
@ -1,41 +1,42 @@
|
|||||||
<!-- -->
|
<!-- -->
|
||||||
<template>
|
<template>
|
||||||
<div class="block">
|
<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="report_content">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div>
|
<div>
|
||||||
<div>7</div>
|
<div>{{statisticals[0].num}}</div>
|
||||||
<div>参与人数</div>
|
<div>{{statisticals[0].desc}}</div>
|
||||||
</div>
|
</div>
|
||||||
<span></span>
|
<span></span>
|
||||||
<div>
|
<div>
|
||||||
<div>7</div>
|
<div>{{statisticals[1].num}}</div>
|
||||||
<div>目标定制</div>
|
<div>{{statisticals[1].desc}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div>1</div>
|
<div>{{statisticals[2].num}}</div>
|
||||||
<div>目标确认</div>
|
<div>{{statisticals[2].desc}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div>7</div>
|
<div>{{statisticals[3].num}}</div>
|
||||||
<div>执行中</div>
|
<div>{{statisticals[3].desc}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div>7</div>
|
<div>{{statisticals[4].num}}</div>
|
||||||
<div>结果值录入</div>
|
<div>{{statisticals[4].desc}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div>7</div>
|
<div>{{statisticals[4].num}}</div>
|
||||||
<div>评分</div>
|
<div>{{statisticals[4].desc}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div>7</div>
|
<div>{{statisticals[4].num}}</div>
|
||||||
<div>考核结束</div>
|
<div>{{statisticals[4].desc}}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div>考核人数分析</div>
|
<div class="num_title">考核人数分析</div>
|
||||||
<div class="num_tips">
|
<div class="num_tips">
|
||||||
<div>考核人数分析</div>
|
<div>考核人数分析</div>
|
||||||
<div>参与考核部门人数</div>
|
<div>参与考核部门人数</div>
|
||||||
@ -43,28 +44,26 @@
|
|||||||
<div class="num_report">
|
<div class="num_report">
|
||||||
<div id="num_chart"></div>
|
<div id="num_chart"></div>
|
||||||
<ul>
|
<ul>
|
||||||
<li v-for="(dep, index) in deps" :key="dep.id">
|
<li v-for="(assessItem, index) in assessNum" :key="assessItem.desc">
|
||||||
<div
|
<div class="rep_list">
|
||||||
:class="{
|
<div :class="handleliColor(index)">{{ index }}
|
||||||
width: '20px',
|
</div>
|
||||||
height: '20px',
|
<div>{{ assessItem.title }} {{ assessItem.num }}人</div>
|
||||||
background: handleliColor(index)
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
{{ index }}
|
|
||||||
</div>
|
</div>
|
||||||
<div>{{ dep.title }} {{ dep.num }}人</div>
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div>结果分析</div>
|
<div class="level_title">结果分析</div>
|
||||||
<div>等级分布</div>
|
<div class="level_tips">等级分布</div>
|
||||||
<div class="reslut_display">
|
<div class="reslut_display">
|
||||||
<div id="level_chart"></div>
|
<div id="level_chart"></div>
|
||||||
<el-table :data="tableData" style="display: inline-block;">
|
<el-table :data="tableData"
|
||||||
<el-table-column prop="level" label="绩效等级" width="200">
|
:header-cell-style="{ background:'#F5F7FA'}"
|
||||||
|
border
|
||||||
|
style="flex:1">
|
||||||
|
<el-table-column prop="desc" label="绩效等级" width="200">
|
||||||
</el-table-column>
|
</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>
|
||||||
<el-table-column label="操作" width="150">
|
<el-table-column label="操作" width="150">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
@ -89,17 +88,32 @@
|
|||||||
<script>
|
<script>
|
||||||
// 引入基本模板
|
// 引入基本模板
|
||||||
import { getChartData, getStartsData } from '@/api/report'
|
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 {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
// 当前选择的月份
|
// 当前选择的月份
|
||||||
pickerTime: '',
|
pickerTime: '',
|
||||||
|
//
|
||||||
|
statisticals: [
|
||||||
|
{num: '0', desc: '参与人数'},
|
||||||
|
{num: '0', desc: '目标制定'},
|
||||||
|
{num: '0', desc: '目标确认'},
|
||||||
|
{num: '0', desc: '执行中'},
|
||||||
|
{num: '0', desc: '结果值录入'},
|
||||||
|
{num: '0', desc: '评分'},
|
||||||
|
{num: '0', desc: '考核结束'}],
|
||||||
// 表格内容
|
// 表格内容
|
||||||
tableData: [],
|
tableData: [],
|
||||||
//
|
// 考核人数
|
||||||
deps: [],
|
assessNum: [],
|
||||||
//
|
//
|
||||||
value: [],
|
value: [],
|
||||||
timeOptions: [{
|
timeOptions: [{
|
||||||
@ -115,22 +129,17 @@ export default {
|
|||||||
props: {
|
props: {
|
||||||
lazy: true,
|
lazy: true,
|
||||||
lazyLoad: (node, resolve) => {
|
lazyLoad: (node, resolve) => {
|
||||||
const { level } = node
|
console.log('aaaa')
|
||||||
let type = node.data.val
|
// 获取节点类型
|
||||||
console.log(this)
|
let type = node.data.value
|
||||||
|
// 请求获取2级列表
|
||||||
this.handleStartsReq(type, function (reslut) {
|
this.handleStartsReq(type, function (reslut) {
|
||||||
console.log('aaaaaaa')
|
const childNode = Array.from(reslut.list).map(item => ({
|
||||||
if (reslut.data.code === 200) {
|
value: item.startId,
|
||||||
const childNode = Array.from(reslut.data.list).map(item => ({
|
label: item.time,
|
||||||
value: item.desc,
|
leaf: true
|
||||||
lable: item.num,
|
|
||||||
leaf: level >= 2
|
|
||||||
}))
|
}))
|
||||||
resolve(childNode)
|
resolve(childNode)
|
||||||
} else {
|
|
||||||
const childNode = []
|
|
||||||
resolve(childNode)
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -172,7 +181,7 @@ export default {
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
//
|
// 等级分布数据报表持有类
|
||||||
levelOption: {
|
levelOption: {
|
||||||
color: ['#3398DB'],
|
color: ['#3398DB'],
|
||||||
tooltip: {
|
tooltip: {
|
||||||
@ -203,7 +212,7 @@ export default {
|
|||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '',
|
name: '直接访问',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: '60%',
|
barWidth: '60%',
|
||||||
data: []
|
data: []
|
||||||
@ -213,25 +222,36 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
// 背景色计算
|
|
||||||
handleliColor (pos) {
|
|
||||||
switch (pos) {
|
|
||||||
case 0:
|
|
||||||
return '#ff7705'
|
|
||||||
case 1:
|
|
||||||
return '#ff8b22'
|
|
||||||
case 2:
|
|
||||||
return '#ff9e45'
|
|
||||||
default:
|
|
||||||
return '#bcbcbc'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
beforeMount () { },
|
beforeMount () { },
|
||||||
mounted () {
|
mounted () {
|
||||||
|
this.handleChartDataReq()
|
||||||
|
this.handleLevelChart()
|
||||||
},
|
},
|
||||||
methods: {
|
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) {
|
handleDetailClick (index, rows) {
|
||||||
|
|
||||||
@ -252,11 +272,41 @@ export default {
|
|||||||
let levelChart = echarts.init(document.getElementById('level_chart'))
|
let levelChart = echarts.init(document.getElementById('level_chart'))
|
||||||
levelChart.setOption(this.levelOption)
|
levelChart.setOption(this.levelOption)
|
||||||
},
|
},
|
||||||
// 获取报表内容
|
//
|
||||||
handleChartDataReq () {
|
handleChange (val) {
|
||||||
getChartData()
|
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
|
// 为了不分页直接传999
|
||||||
async handleStartsReq (type, handleNode) {
|
async handleStartsReq (type, handleNode) {
|
||||||
let params = {
|
let params = {
|
||||||
@ -284,11 +334,33 @@ export default {
|
|||||||
background: white;
|
background: white;
|
||||||
border-style: #fcfcfc solid 3px;
|
border-style: #fcfcfc solid 3px;
|
||||||
margin-top:20px;
|
margin-top:20px;
|
||||||
|
padding-top:40px;
|
||||||
|
padding-left: 20px;
|
||||||
|
padding-right: 20px;
|
||||||
}
|
}
|
||||||
.header {
|
.header {
|
||||||
background: #fcfcfc;
|
background: #fcfcfc;
|
||||||
width: fit-content;
|
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 {
|
.header > span {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background: #333333;
|
background: #333333;
|
||||||
@ -296,25 +368,14 @@ export default {
|
|||||||
width: 1px;
|
width: 1px;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
.header > div {
|
.num_title{
|
||||||
display: inline-block;
|
margin-top:20px;
|
||||||
width: 200px;
|
margin-bottom: 25px;
|
||||||
height: 100px;
|
color: #333333;
|
||||||
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_tips > div:nth-child(1) {
|
.num_tips > div:nth-child(1) {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
color: #333333;
|
color: #3a3a3a;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
@ -322,12 +383,30 @@ export default {
|
|||||||
}
|
}
|
||||||
.num_tips > div:nth-child(2) {
|
.num_tips > div:nth-child(2) {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
color: #333333;
|
color: #3a3a3a;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
padding-left: 50%;
|
padding-left: 50%;
|
||||||
position: relative;
|
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 {
|
#num_chart {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 600px;
|
width: 600px;
|
||||||
@ -337,7 +416,6 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
#level_chart {
|
#level_chart {
|
||||||
display: inline-block;
|
|
||||||
width: 600px;
|
width: 600px;
|
||||||
height: 360px;
|
height: 360px;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|||||||
@ -291,9 +291,10 @@ export default {
|
|||||||
}
|
}
|
||||||
apiInitiateAssessmentInfo(para).then(res => {
|
apiInitiateAssessmentInfo(para).then(res => {
|
||||||
this.dialogSendVisible = false
|
this.dialogSendVisible = false
|
||||||
// this.$router.push({ name: 'assessment' })
|
console.log('发起考核成功', res)
|
||||||
|
this.$router.push({name: 'assessment-stepList', query: {id: res.data.id, name: 'assessment-homeList'}})
|
||||||
this.$message({
|
this.$message({
|
||||||
message: '发起考核成功',
|
message: res.msg,
|
||||||
type: 'success'
|
type: 'success'
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
@ -328,10 +329,10 @@ export default {
|
|||||||
name: this.rqAssessmentParameter.searchName
|
name: this.rqAssessmentParameter.searchName
|
||||||
}
|
}
|
||||||
getWorkList(para).then(res => {
|
getWorkList(para).then(res => {
|
||||||
this.rqAssessmentParameter.totalPage = res.totalPage
|
this.rqAssessmentParameter.totalPage = res.data.totalPage
|
||||||
this.rqAssessmentParameter.totalCount = res.totalCount
|
this.rqAssessmentParameter.totalCount = res.data.totalCount
|
||||||
this.currPage = res.currPage
|
this.currPage = res.data.currPage
|
||||||
this.popupData.tableList = res.list
|
this.popupData.tableList = res.data.list
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user