巩固脱贫成果

zhangxiaoxu123456

2022-05-07 06fbffa80cbbe5daeffaaa406e1b21b044ca4f1e

 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>