From 87cbee9b14970d997c1e5c54b5fef4d04369c968 Mon Sep 17 00:00:00 2001 From: zhangxiaoxu123456 <zxx19900626> Date: 星期四, 05 五月 2022 09:57:52 +0800 Subject: [PATCH] 社会收支总表修改 --- src/pages/show/laborRelations/LaborRelations.vue | 376 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 371 insertions(+), 5 deletions(-) diff --git a/src/pages/show/laborRelations/LaborRelations.vue b/src/pages/show/laborRelations/LaborRelations.vue index 397949d..4ffd4d2 100644 --- a/src/pages/show/laborRelations/LaborRelations.vue +++ b/src/pages/show/laborRelations/LaborRelations.vue @@ -1,15 +1,381 @@ <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 + :cell-style="updataCellStyle"> + <el-table-column label="搴忓彿" prop="xuhao" min-width="35"> + </el-table-column> + <el-table-column label="椤圭洰" prop="xiangmu" min-width="170"> + </el-table-column> + <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 nowSize from "../../../libs/nowSize"; export default { - name: "LoborRelations" + name: "LaborRelations", + data() { + return { + tableUpData: [ + { + xuhao: '1', + xiangmu: '鍏ㄥ競鍐滄皯宸�' + }, + { + xuhao: '1', + xiangmu: '鎬昏', + serveteen: '134.3', + eighteen: '134.3', + nineteen: '134.4', + twenty: '134.3', + twentyOne: '134.3' + }, + { + xuhao: '1', + xiangmu: '鎬昏', + serveteen: '134.3', + eighteen: '134.3', + nineteen: '134.4', + twenty: '134.3', + twentyOne: '134.3' + }, + { + xuhao: '1', + xiangmu: '鎬昏', + serveteen: '134.3', + eighteen: '134.3', + nineteen: '134.4', + twenty: '134.3', + twentyOne: '134.3' + }, + { + xuhao: '1', + xiangmu: '鎬昏', + serveteen: '134.3', + eighteen: '134.3', + nineteen: '134.4', + twenty: '134.3', + twentyOne: '134.3' + }, + { + xuhao: '1', + xiangmu: '鎬昏', + serveteen: '134.3', + eighteen: '134.3', + nineteen: '134.4', + twenty: '134.3', + twentyOne: '134.3' + }, + { + xuhao: '2', + xiangmu: '鏍规不鍐滄皯娆犺柂' + }, + { + xuhao: '1', + xiangmu: '鎬昏', + serveteen: '134.3', + eighteen: '134.3', + nineteen: '134.4', + twenty: '134.3', + twentyOne: '134.3' + }, + { + xuhao: '1', + xiangmu: '鎬昏', + serveteen: '134.3', + eighteen: '134.3', + nineteen: '134.4', + twenty: '134.3', + twentyOne: '134.3' + }, + { + xuhao: '1', + xiangmu: '鎬昏', + serveteen: '134.3', + eighteen: '134.3', + nineteen: '134.4', + twenty: '134.3', + twentyOne: '134.3' + }, + { + xuhao: '1', + xiangmu: '鎬昏', + serveteen: '134.3', + eighteen: '134.3', + nineteen: '134.4', + twenty: '134.3', + twentyOne: '134.3' + }, + { + xuhao: '1', + xiangmu: '鎬昏', + serveteen: '134.3', + eighteen: '134.3', + nineteen: '134.4', + twenty: '134.3', + twentyOne: '134.3' + }, + { + xuhao: '1', + xiangmu: '鎬昏', + serveteen: '134.3', + eighteen: '134.3', + nineteen: '134.4', + twenty: '134.3', + twentyOne: '134.3' + }, + { + xuhao: '1', + xiangmu: '鎬昏', + serveteen: '134.3', + eighteen: '134.3', + nineteen: '134.4', + twenty: '134.3', + twentyOne: '134.3' + }, + { + xuhao: '1', + xiangmu: '鎬昏', + serveteen: '134.3', + eighteen: '134.3', + nineteen: '134.4', + twenty: '134.3', + twentyOne: '134.3' + }, + { + xuhao: '1', + xiangmu: '鎬昏', + serveteen: '134.3', + eighteen: '134.3', + nineteen: '134.4', + twenty: '134.3', + twentyOne: '134.3' + }, + { + xuhao: '1', + xiangmu: '鎬昏', + serveteen: '134.3', + eighteen: '134.3', + nineteen: '134.4', + twenty: '134.3', + twentyOne: '134.3' + }, + { + xuhao: '1', + xiangmu: '鎬昏', + serveteen: '134.3', + eighteen: '134.3', + nineteen: '134.4', + twenty: '134.3', + twentyOne: '134.3' + }, + { + xuhao: '1', + xiangmu: '鎬昏', + serveteen: '134.3', + eighteen: '134.3', + nineteen: '134.4', + twenty: '134.3', + twentyOne: '134.3' + }, + { + xuhao: '1', + xiangmu: '鎬昏', + serveteen: '134.3', + eighteen: '134.3', + nineteen: '134.4', + twenty: '134.3', + twentyOne: '134.3' + }, + { + xuhao: '1', + xiangmu: '鎬昏', + serveteen: '134.3', + eighteen: '134.3', + nineteen: '134.4', + twenty: '134.3', + twentyOne: '134.3' + }, + { + xuhao: '1', + xiangmu: '鎬昏', + serveteen: '134.3', + eighteen: '134.3', + nineteen: '134.4', + twenty: '134.3', + twentyOne: '134.3' + }, + { + xuhao: '1', + xiangmu: '鎬昏', + serveteen: '134.3', + eighteen: '134.3', + nineteen: '134.4', + twenty: '134.3', + twentyOne: '134.3' + }, + ], + tableHeight: window.innerHeight - nowSize(250) + } + }, + methods: { + //鍚堝苟琛屽拰鍒� + mergeColumnTableCell({rowIndex, columnIndex}) { + // 鍚堝苟鍒� + if (columnIndex === 0) { + if (rowIndex === 0) { + return { + rowspan: 6, + colspan: 1 + }; + } else if (rowIndex === 6) { + return { + rowspan: 17, + colspan: 1 + } + } else { + return { + rowspan: 0, + colspan: 0 + } + } + } + // 鍚堝苟琛� + if (rowIndex === 0) { //鎸囧畾琛屽彿 + if (columnIndex === 1) { + return { + rowspan: 1, + colspan: 6 + } + } else { + return { + rowIndex: 0, + colIndex: 0 + } + } + } else if (rowIndex === 6) { //鎸囧畾琛屽彿 + if (columnIndex === 1) { + return { + rowspan: 1, + colspan: 6 + } + } + } + }, + // 淇敼鍗曚釜鍗曞厓鏍兼牱寮� + 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) + } + + }, + 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 { + 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