457 lines
11 KiB
Vue
457 lines
11 KiB
Vue
<!-- -->
|
||
<template>
|
||
<div class="report_index">
|
||
<el-cascader
|
||
:key="key"
|
||
:props="props"
|
||
:options="timeOptions"
|
||
@change="handleChange"
|
||
v-model="startId"
|
||
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>
|
||
<li class="zanwu commonFont" v-if="assessNum.length === 0">暂无数据</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: '',
|
||
// 当前的绩效id
|
||
startId: [0, 0],
|
||
//
|
||
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: [{
|
||
startId: 0,
|
||
time: '月底',
|
||
children: []
|
||
}, {
|
||
startId: 1,
|
||
time: '自定义',
|
||
children: []
|
||
}],
|
||
//
|
||
props: {
|
||
value: 'startId',
|
||
label: 'time'
|
||
},
|
||
// 考核人数报表持有类
|
||
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: []
|
||
}
|
||
]
|
||
},
|
||
key: 0,
|
||
// 等级分布数据报表持有类
|
||
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 () { },
|
||
async mounted () {
|
||
await this.handleStartsReq()
|
||
this.handleChartDataReq()
|
||
},
|
||
methods: {
|
||
handleJump (item) {
|
||
this.$router.push({name: 'assessment-stepList', query: {id: this.startId, 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: Object.assign({}, {startId: this.startId[1]}, rows)
|
||
})
|
||
},
|
||
// 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 {
|
||
this.$loadingStart()
|
||
const result = await getChartData(params)
|
||
this.$loadingEnd()
|
||
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 {
|
||
for (let i in this.timeOptions) {
|
||
let res = await getStartsData(Object.assign({}, params, { cycleType: this.timeOptions[i].startId }))
|
||
if (res.code !== 200) return this.$message.error(res.msg)
|
||
res = res.data
|
||
console.log('res: ', res)
|
||
this.key += 10
|
||
this.timeOptions[i].children = res.list.map((m, mindex) => {
|
||
console.log('timeOptions: ', typeof i)
|
||
|
||
if (i === '0' && mindex === 0) {
|
||
this.startId = [0, m.startId]
|
||
}
|
||
return m
|
||
})
|
||
}
|
||
console.log('this.timeOptions: ', this.timeOptions)
|
||
} catch (error) {
|
||
console.log(error)
|
||
}
|
||
}
|
||
},
|
||
watch: {}
|
||
}
|
||
</script>
|
||
|
||
<style lang='less' 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;
|
||
.zanwu{
|
||
.center();
|
||
height: 200px;
|
||
width: 100%;
|
||
}
|
||
}
|
||
.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>
|