<template>
|
<div class="laborRelations">
|
<div class="laborRelations__warp">
|
<h1 class="title"> 农民工就业和欠薪追缴情况统计表</h1>
|
<div class="laborRelations__table">
|
<el-table
|
:max-height="tableHeight"
|
style="width:100%"
|
:data="tableUpData"
|
:span-method="mergeColumnTableCell"
|
border
|
stripe
|
>
|
<template v-for="(item,index) in headArry">
|
<el-table-column
|
:key="index"
|
:label="item.name"
|
:prop="item.name"
|
min-width="170">
|
<template slot-scope="scope">
|
<template v-for="(e,i) in scope.row">
|
<template v-if="e.name == scope.column.property">
|
<span>{{e.val}}</span>
|
</template>
|
</template>
|
</template>
|
</el-table-column>
|
</template>
|
|
<!--<el-table-column label="2017年" prop="serveteen" min-width="80">
|
</el-table-column>
|
<el-table-column label="2018年" prop="eighteen" min-width="80">
|
</el-table-column>
|
<el-table-column label="2019年" prop="nineteen" min-width="80">
|
</el-table-column>
|
<el-table-column label="2020年" prop="twenty" min-width="80">
|
</el-table-column>
|
<el-table-column label="2021年" prop="twentyOne" min-width="80">
|
</el-table-column>-->
|
</el-table>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {getWorkerTable} from '@/api/laborRelations'
|
import nowSize from "../../../libs/nowSize";
|
import index from "../index/index";
|
export default {
|
name: "LaborRelations",
|
data() {
|
return {
|
tableUpData:[],
|
headArry:[],
|
tableHeight: window.innerHeight - nowSize(250),
|
spanArr:[]
|
}
|
},
|
methods: {
|
//合并行和列
|
mergeColumnTableCell({row,column,rowIndex, columnIndex}) {
|
if(rowIndex == 1) {
|
const _row = this.spanArr[rowIndex]
|
const _col = row > 0 ? 1 : 0
|
return {
|
rowspan: _row,
|
colspan: _col
|
}
|
}
|
},
|
getSpanArry() {
|
// let pos = 0
|
// let rowArry = []
|
// this.tableUpData.filter((currentVal,index,arr) => {
|
//
|
// })
|
},
|
// 修改单个单元格样式
|
// updataCellStyle({ rowIndex, columnIndex}){
|
// if(rowIndex===0&&columnIndex===0){
|
// return {background:'#51D2FF'}
|
// }else if(rowIndex===6&&columnIndex===0){
|
// return{background:'#51D2FF'}
|
// }else if(rowIndex===0&&columnIndex===1){
|
// return{background:'#51D2FF',paddingLeft:'32px',textAlign:'left'}
|
// }else if(rowIndex===6&&columnIndex===1){
|
// return{background:'#51D2FF',paddingLeft:'32px',textAlign:'left'}
|
// }
|
// },
|
getHeight() {
|
this.tableHeight = window.innerHeight - nowSize(250)
|
},
|
getWorkerTable(){
|
getWorkerTable().then(res => {
|
if(res.code == 1000) {
|
let row = []
|
let yearList = []
|
let arry = []
|
let data = []
|
let data1 = []
|
// res.list.forEach((item,index) => {
|
// yearList.push(item.year)
|
// })
|
// res.list.forEach((item,index) => {
|
// item.dataList.forEach((e,i) => {
|
// row.push({
|
// name: '项目',
|
// val: e.name
|
// })
|
// yearList.forEach((y,j) => {
|
// row.push({
|
// name: y,
|
// val: res.list[j].dataList[i].val
|
// })
|
// })
|
//
|
// data.push({
|
// name:i,
|
// val:row
|
// })
|
// row = []
|
// })
|
// if(index > 0 ){
|
// return
|
// }else if(index == 0) {
|
// this.headArry = data[0].val
|
// }
|
// this.tableUpData = data
|
// console.log(data,'data------------2')
|
// })
|
|
res.list.forEach((item,index) => {
|
yearList.push(item.year)
|
})
|
res.list.forEach((item,index) => {
|
item.dataList.forEach((e,i) => {
|
if(!row[i]) {
|
row[i] = {
|
name: '项目',
|
val: e.name
|
}
|
}
|
arry = [row[i]]
|
yearList.forEach((y,j) => {
|
arry.push({
|
name: y,
|
val: res.list[j].dataList[i].val
|
})
|
})
|
if(index > 0) return
|
data.push(arry)
|
if(index == 0) {
|
this.headArry = data[0]
|
// console.log(this.headArry,'headArry========')
|
}
|
})
|
})
|
this.tableUpData = data
|
this.getSpanArry()
|
// console.log(this.tableUpData,'tableUpData=====')
|
}
|
})
|
} ,
|
|
},
|
mounted() {
|
this.getWorkerTable()
|
},
|
created() {
|
window.addEventListener('resize', this.getHeight)
|
},
|
destroy() {
|
window.addEventListener('resize', this.getHeight)
|
}
|
}
|
</script>
|
<style lang="scss">
|
@import "../../../assets/css/base";
|
.laborRelations__table {
|
.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
|
background: transparent;
|
}
|
.el-table tr {
|
background-color: #CEF2FF;
|
}
|
|
.el-table th.el-table__cell { // 表格头部样式
|
background-color: #51D2FF;
|
padding:0;
|
text-align: center;
|
}
|
|
.el-table__fixed, .el-table__fixed-right, .el-table__fixed-right::before, .el-table__fixed::before {
|
background-color: #51D2FF;
|
}
|
|
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
|
background-color: #A8E9FF;
|
}
|
|
.el-table thead {
|
color: #111111;
|
}
|
|
.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
|
border-bottom: 1Px solid #8E8E8E;
|
}
|
|
.el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
|
border-right: 1Px solid #8E8E8E;
|
}
|
|
.el-table .el-table__cell {
|
padding: 0.0859375rem /* 22/256 */
|
0;
|
}
|
|
.el-table__body tr.hover-row.current-row > td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped.current-row > td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped > td.el-table__cell, .el-table__body tr.hover-row > td.el-table__cell {
|
background: transparent;
|
}
|
|
.el-table .cell span,.el-table .cell{
|
font-size: $fontSize-28;
|
color: $color-darkGrey;
|
font-weight: 300;
|
line-height: 0.203125rem;
|
}
|
|
.el-table--enable-row-transition .el-table__body td.el-table__cell {
|
padding: 0;
|
text-align: center;
|
}
|
}
|
</style>
|
<style lang="scss" scoped>
|
@import '../../../assets/css/base';
|
|
.laborRelations__warp {
|
text-align: center;
|
|
h1 {
|
font-size: $fontSize-30;
|
font-weight: 400;
|
color: #ffffff;
|
margin-top: 0.2421875rem;
|
}
|
}
|
|
.laborRelations__table {
|
width: 9.625rem;
|
margin: 0.125rem auto 0.5078125rem;
|
}
|
</style>
|
