youhua
This commit is contained in:
熊成强
commit
d34bb4ebd6
@ -4,5 +4,5 @@ const prodEnv = require('./prod.env')
|
||||
|
||||
module.exports = merge(prodEnv, {
|
||||
NODE_ENV: '"development"',
|
||||
PROXY:false
|
||||
PROXY: false,
|
||||
})
|
||||
|
||||
19
src/api/report.js
Normal file
19
src/api/report.js
Normal file
@ -0,0 +1,19 @@
|
||||
import requestFuc from '@/utils/request'
|
||||
|
||||
// 获取考核组列表
|
||||
export function getChartData (query) {
|
||||
return requestFuc({
|
||||
url: '/lz_management/performance/chart/result',
|
||||
method: 'POST',
|
||||
data: query
|
||||
})
|
||||
}
|
||||
|
||||
// 获取绩效排名
|
||||
export function getStartsData (query) {
|
||||
return requestFuc({
|
||||
url: '/lz_management/performance/chart/starts',
|
||||
method: 'POST',
|
||||
data: query
|
||||
})
|
||||
}
|
||||
@ -29,7 +29,9 @@ import {
|
||||
Pagination,
|
||||
Cascader,
|
||||
Tabs,
|
||||
TabPane
|
||||
TabPane,
|
||||
Menu,
|
||||
MenuItem
|
||||
} from 'element-ui'
|
||||
|
||||
Vue.prototype.$message = Message
|
||||
@ -64,3 +66,6 @@ Vue.use(Radio)
|
||||
Vue.use(Dropdown)
|
||||
Vue.use(DropdownMenu)
|
||||
Vue.use(DropdownItem)
|
||||
Vue.use(Cascader)
|
||||
Vue.use(Menu)
|
||||
Vue.use(MenuItem)
|
||||
|
||||
@ -1,27 +1,344 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div>
|
||||
绩效报表
|
||||
<div class="block">
|
||||
<el-cascader :props="props" :options="timeOptions"></el-cascader>
|
||||
<div class="report_content">
|
||||
<div class="header">
|
||||
<div>
|
||||
<div>7</div>
|
||||
<div>参与人数</div>
|
||||
</div>
|
||||
<span></span>
|
||||
<div>
|
||||
<div>7</div>
|
||||
<div>目标定制</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>1</div>
|
||||
<div>目标确认</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>7</div>
|
||||
<div>执行中</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>7</div>
|
||||
<div>结果值录入</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>7</div>
|
||||
<div>评分</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>7</div>
|
||||
<div>考核结束</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>考核人数分析</div>
|
||||
<div class="num_tips">
|
||||
<div>考核人数分析</div>
|
||||
<div>参与考核部门人数</div>
|
||||
</div>
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
<div>结果分析</div>
|
||||
<div>等级分布</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-column>
|
||||
<el-table-column prop="layout" 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)
|
||||
"
|
||||
type="text"
|
||||
size="small"
|
||||
>
|
||||
查看详情
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 引入基本模板
|
||||
import { getChartData, getStartsData } from '@/api/report'
|
||||
let echarts = require('echarts/lib/echarts')
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
|
||||
// 当前选择的月份
|
||||
pickerTime: '',
|
||||
// 表格内容
|
||||
tableData: [],
|
||||
//
|
||||
deps: [],
|
||||
//
|
||||
value: [],
|
||||
timeOptions: [{
|
||||
value: 0,
|
||||
label: '月底',
|
||||
children: []
|
||||
}, {
|
||||
value: 1,
|
||||
label: '自定义',
|
||||
children: []
|
||||
}],
|
||||
//
|
||||
props: {
|
||||
lazy: true,
|
||||
lazyLoad: (node, resolve) => {
|
||||
const { level } = node
|
||||
let type = node.data.val
|
||||
console.log(this)
|
||||
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)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 考核人数报表持有类
|
||||
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: []
|
||||
}
|
||||
]
|
||||
},
|
||||
//
|
||||
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: {
|
||||
// 背景色计算
|
||||
handleliColor (pos) {
|
||||
switch (pos) {
|
||||
case 0:
|
||||
return '#ff7705'
|
||||
case 1:
|
||||
return '#ff8b22'
|
||||
case 2:
|
||||
return '#ff9e45'
|
||||
default:
|
||||
return '#bcbcbc'
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeMount () { },
|
||||
mounted () {
|
||||
|
||||
},
|
||||
methods: {
|
||||
//
|
||||
handleDetailClick (index, 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)
|
||||
},
|
||||
// 获取报表内容
|
||||
handleChartDataReq () {
|
||||
getChartData()
|
||||
},
|
||||
|
||||
// 为了不分页直接传999
|
||||
async handleStartsReq (type, handleNode) {
|
||||
let params = {
|
||||
currentPage: 1,
|
||||
cycleType: type,
|
||||
pageSize: 999
|
||||
}
|
||||
try {
|
||||
const res = await getStartsData(params)
|
||||
handleNode(res)
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () {},
|
||||
mounted () {},
|
||||
methods: {},
|
||||
watch: {}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='' scoped>
|
||||
|
||||
.report_content {
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
background: white;
|
||||
border-style: #fcfcfc solid 3px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.header {
|
||||
background: #fcfcfc;
|
||||
width: fit-content;
|
||||
}
|
||||
.header > span {
|
||||
display: inline-block;
|
||||
background: #333333;
|
||||
height: 30px;
|
||||
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_tips > div:nth-child(1) {
|
||||
display: inline-block;
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
width: fit-content;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
}
|
||||
.num_tips > div:nth-child(2) {
|
||||
display: inline-block;
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
width: fit-content;
|
||||
padding-left: 50%;
|
||||
position: relative;
|
||||
}
|
||||
#num_chart {
|
||||
display: inline-block;
|
||||
width: 600px;
|
||||
height: 360px;
|
||||
}
|
||||
.reslut_display {
|
||||
display: flex;
|
||||
}
|
||||
#level_chart {
|
||||
display: inline-block;
|
||||
width: 600px;
|
||||
height: 360px;
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,27 +1,54 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div>
|
||||
设置
|
||||
<div class="set-mian commonFont">
|
||||
<el-menu
|
||||
:default-active="activeIndex"
|
||||
mode="horizontal"
|
||||
@select="handleSelect"
|
||||
text-color="#52575b"
|
||||
active-text-color="#3ba1ff"
|
||||
>
|
||||
<el-menu-item index="0">考评组设置</el-menu-item>
|
||||
<el-menu-item index="1">默认值设置</el-menu-item>
|
||||
</el-menu>
|
||||
<ground-table v-if="activeIndex==='0'"></ground-table>
|
||||
<div v-else-if="activeIndex==='1'">
|
||||
<span>默认值设置</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import groundTable from '../workbench/assessmentGroup/groundTable'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
|
||||
activeIndex: '0'
|
||||
}
|
||||
},
|
||||
components: {
|
||||
groundTable
|
||||
},
|
||||
beforeMount () { },
|
||||
mounted () { },
|
||||
methods: {
|
||||
handleSelect (key, keyPath) {
|
||||
this.activeIndex = key
|
||||
console.log(key, keyPath)
|
||||
console.log(this.activeIndex)
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () {},
|
||||
mounted () {},
|
||||
methods: {},
|
||||
watch: {}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='' scoped>
|
||||
|
||||
<style lang='less' scoped>
|
||||
.set-mian {
|
||||
background-color: white;
|
||||
min-height: 600px;
|
||||
padding: 25px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -100,7 +100,7 @@
|
||||
<div>
|
||||
<popup-right
|
||||
v-if="showChooseList"
|
||||
@cancel='showChooseList = false'
|
||||
@cancel="hundlePopupHide"
|
||||
@submit="handleSubmitPopup"
|
||||
:title="popupRightTitle"
|
||||
class="popup"
|
||||
@ -118,13 +118,16 @@
|
||||
<div class="popup-table">
|
||||
<el-table
|
||||
v-if="popupData.tableList.length"
|
||||
ref="popupMultipleTable"
|
||||
:data="popupData.tableList"
|
||||
@selection-change="handleSelectionChange"
|
||||
tooltip-effect="dark"
|
||||
:row-key="getRowKeys"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
width="40"
|
||||
:reserve-selection="true"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
label="全选"
|
||||
@ -228,7 +231,6 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
'formData.cycleTimeType': function (newVal, oldVal) {
|
||||
// console.log(this.formData.cycleTimeType)
|
||||
this.formData.rangDate = ''
|
||||
}
|
||||
},
|
||||
@ -244,9 +246,23 @@ export default {
|
||||
}
|
||||
this.formData.mergeType.name = nameStr
|
||||
},
|
||||
handleChooseGroup () {
|
||||
hundlePopupHide () {
|
||||
this.popupData.selectedList = []
|
||||
this.$refs.popupMultipleTable.clearSelection()
|
||||
this.showChooseList = false
|
||||
},
|
||||
handleChooseGroup () {
|
||||
this.showChooseList = !this.showChooseList
|
||||
this.$nextTick(res => {
|
||||
if (this.formData.assessmentList.length > 0) {
|
||||
this.formData.assessmentList.forEach((row) => {
|
||||
this.$refs.popupMultipleTable.toggleRowSelection(row, true)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getRowKeys (row) {
|
||||
return row.id
|
||||
},
|
||||
handleGroupDelete (index, rows) {
|
||||
console.log('删除----', rows)
|
||||
@ -256,7 +272,6 @@ export default {
|
||||
console.log('提交')
|
||||
this.$refs['formData'].validate((val) => {
|
||||
this.dialogSendVisible = val
|
||||
console.log('1111111111111111')
|
||||
})
|
||||
},
|
||||
handleDialogSend () {
|
||||
@ -266,8 +281,7 @@ export default {
|
||||
})
|
||||
let para = {
|
||||
cycleType: this.formData.cycleTimeType,
|
||||
groupIds: '24',
|
||||
// groupIds: groupIdList.join(),
|
||||
groupIds: groupIdList.join(),
|
||||
name: this.formData.mergeType.name
|
||||
}
|
||||
if (this.formData.cycleTimeType === 0) {
|
||||
@ -291,8 +305,9 @@ export default {
|
||||
this.handleGainAssessmentGroupList()
|
||||
},
|
||||
handleSelectionChange (val) {
|
||||
// 全选
|
||||
// 选择发生变化
|
||||
this.popupData.selectedList = val
|
||||
console.log('选择发生变化 ', val)
|
||||
},
|
||||
handlePopupCreat () {
|
||||
this.showChooseList = false
|
||||
@ -300,9 +315,9 @@ export default {
|
||||
this.$router.push({ name: 'workbench-edit-group' })
|
||||
},
|
||||
handleSubmitPopup () {
|
||||
this.showChooseList = false
|
||||
const list = this.popupData.selectedList
|
||||
this.formData.assessmentList = this.popupData.selectedList
|
||||
this.showChooseList = false
|
||||
},
|
||||
handleCurrentChange (val) {
|
||||
this.handleGainAssessmentGroupList(val)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user