From 73a9ae225888adae528d9b06233f65da04d883db Mon Sep 17 00:00:00 2001 From: 付延余 <f-yanyu@outlook.com> Date: 星期五, 20 五月 2022 13:42:22 +0800 Subject: [PATCH] 其他业务 --- src/pages/show/laborRelations/LaborRelations.vue | 249 ++++++++++++++++++++++++++++++++++++++++++++++++- 1 files changed, 244 insertions(+), 5 deletions(-) diff --git a/src/pages/show/laborRelations/LaborRelations.vue b/src/pages/show/laborRelations/LaborRelations.vue index 397949d..91a1bba 100644 --- a/src/pages/show/laborRelations/LaborRelations.vue +++ b/src/pages/show/laborRelations/LaborRelations.vue @@ -1,15 +1,254 @@ <template> -<div class="loborRelations"> - 鍔冲姩鍏崇郴 -</div> + <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: "LoborRelations" + 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; + } -<style scoped> + .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> -- Gitblit v1.9.1