巩固脱贫成果

zhangxiaoxu123456

2022-05-07 06fbffa80cbbe5daeffaaa406e1b21b044ca4f1e

巩固脱贫成果

 src/api/laborRelations.js

New file
@@ -0,0 +1,5 @@
import {getRequest, postRequest} from "../libs/axios";

export const getWorkerTable = (params) => {
  return postRequest('/ybg/webservice/app/labour/getWorkerTable.do')
}

 src/pages/show/laborRelations/LaborRelations.vue

@@ -3,13 +3,31 @@
    <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
          :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>
@@ -18,7 +36,7 @@
          <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-column>-->
        </el-table>
      </div>
    </div>
@@ -26,274 +44,129 @@
</template>

<script>
  import {getWorkerTable} from '@/api/laborRelations'
  import nowSize from "../../../libs/nowSize";
  import index from "../index/index";
export default {
  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)
      tableUpData:[],
      headArry:[],
      tableHeight: window.innerHeight - nowSize(250),
      spanArr:[]
    }
  },
  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
          }
    mergeColumnTableCell({row,column,rowIndex, columnIndex}) {
        if(rowIndex == 1) {
            const _row = this.spanArr[rowIndex]
            const _col = row > 0 ? 1 : 0
            return {
                rowspan: _row,
                colspan: _col
            }
        }
      }
      // 合并行
      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
          }
        }
      }
    },
    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'}
      }
    },
    // 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)
   },
@@ -347,7 +220,7 @@
    background: transparent;
  }

  .el-table .cell {
  .el-table .cell span,.el-table .cell{
    font-size: $fontSize-28;
    color: $color-darkGrey;
    font-weight: 300;