社会收支总表修改

zhangxiaoxu123456

2022-05-05 87cbee9b14970d997c1e5c54b5fef4d04369c968

 src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoChikaRenshu.vue

@@ -1,28 +1,99 @@
<template>
  <div class="shebaoChikaRenshu-wrap">
    <h1>各县（市、区）2021年就业情况统计表</h1>
    <el-tabs v-model="activeName">
      <el-tab-pane label="总览" name="first">
        <baoxianForm></baoxianForm>
      </el-tab-pane>
      <el-tab-pane label="企业职工养老保险" name="second">
        <baoxianForm></baoxianForm>
      </el-tab-pane>
      <el-tab-pane label="城乡居民养老保险" name="third">
        <baoxianForm></baoxianForm>
      </el-tab-pane>
      <el-tab-pane label="工伤保险" name="fourth">
        <baoxianForm></baoxianForm>
      </el-tab-pane>
      <el-tab-pane label="失业保险" name="five">
        <baoxianForm></baoxianForm>
      </el-tab-pane>
    </el-tabs>
    <el-table
      :cell-style="handleCellStyle"
      :max-height="tableHeight"
      :data="tableData"
      stripe
      border
      style="width: 100%">
      <template v-for="(item,index) in headerArry">
        <el-table-column
          :key="index"
          align="center"
          :prop="item.val"
          :label="item.time">
          <template slot-scope="scope">
              <span>{{scope.row[index].val}}</span>
          </template>
        </el-table-column>
      </template>

      <!--<el-table-column
        prop="yearFinish"
        align="center"
        label="去年完成"
        width="180">
      </el-table-column>
      <el-table-column
        prop="january"
        align="center"
        label="1月">
      </el-table-column>
      <el-table-column
        prop="february"
        align="center"
        label="2月">
      </el-table-column>
      <el-table-column
        prop="march"
        align="center"
        label="3月">
      </el-table-column>
      <el-table-column
        prop="april"
        align="center"
        label="4月">
      </el-table-column>
      <el-table-column
        prop="may"
        align="center"
        label="5月">
      </el-table-column>
      <el-table-column
        prop="june"
        align="center"
        label="6月">
      </el-table-column>
      <el-table-column
        prop="july"
        align="center"
        label="7月">
      </el-table-column>
      <el-table-column
        prop="august"
        align="center"
        label="8月">
      </el-table-column>
      <el-table-column
        prop="september"
        align="center"
        label="9月">
      </el-table-column>
      <el-table-column
        prop="october"
        align="center"
        label="10月">
      </el-table-column>
      <el-table-column
        prop="november"
        align="center"
        label="11月">
      </el-table-column>
      <el-table-column
        prop="december"
        align="center"
        label="12月">
      </el-table-column>-->
    </el-table>
  </div>
</template>

<script>
    import baoxianForm from "../../../components/juminYanglaoBaoxian/baoxianForm";
  import {getCardNumsTable} from '@/api/shehuiBaozhang'
  import baoxianForm from "../../../components/juminYanglaoBaoxian/baoxianForm";
  import nowSize from "../../../../libs/nowSize";
    export default {
        name: "shebaoChikaRenshu",
        components: {
@@ -30,8 +101,50 @@
        },
        data() {
            return {
                activeName: 'first'
                tableData: [],
                headerArry: [],
                tableHeight: window.innerHeight - nowSize(250)
            }
        },
        mounted() {
          this.getCardNumsTable()
        },
        methods: {
            getCardNumsTable(){
                getCardNumsTable().then(res => {
                    if(res.code == 1000) {
                       let result = res.list
                        let data = []
                        result.forEach((item,index) => {
                            let row = item.dataList
                            row.unshift({
                                time: '指标',
                                val: item.name
                            })
                            data.push(row)
                            if(index == 0) {
                                this.headerArry = row
                            }

                        })
                        this.tableData = data
                    }
                })
            },
            getHeight() {
                this.tableHeight = window.innerHeight - nowSize(250)
            },
            handleCellStyle({rowIndex, columnIndex}) {
                if(columnIndex == 0) {
                    return { background:'#51D2FF' }
                }
            }
        },
        created() {
            window.addEventListener('resize', this.getHeight)
        },
        destroy() {
            window.addEventListener('resize', this.getHeight)
        }
    }
</script>
@@ -39,45 +152,41 @@
<style lang="scss">
  @import "../../../../assets/css/base";
  .shebaoChikaRenshu-wrap{
    .el-tabs__nav-wrap::after{
      background-color: transparent;
      height: 0;
    .el-table tr{
      background-color: #CEF2FF;
    }
    .el-tabs__nav-scroll{
      display: flex;
      justify-content: center;
    .el-table th.el-table__cell{
      background-color: #51D2FF;
    }
    .el-tabs__item{
      width: 0.9375rem  /* 240/256 */;
      height: 0.25rem  /* 64/256 */;
      background: rgba(81,210,255,0.08);
      border: 1Px solid #0097cc; /*no*/
      color: #9CE6FF;
      font-size: $fontSize-24;
      margin: 0 0.078125rem  /* 20/256 */  /* 10/10 */;
      display: flex;
      justify-content: center;
      align-items: center;
    .el-table__fixed, .el-table__fixed-right,.el-table__fixed-right::before, .el-table__fixed::before{
      background-color: #51D2FF;
    }
    .el-tabs__item.is-active{
      width: 0.9375rem  /* 240/256 */;
      height: 0.25rem  /* 64/256 */;
      background: #00a6e1;
      border: 1Px solid #51d2ff;
      box-shadow: 0Px 3Px 10Px 0Px rgba(255,255,255,0.80) inset;
      color: $color-white;
      font-size: $fontSize-24;
      display: flex;
      justify-content: center;
      align-items: center;
    .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
      background-color: #A8E9FF;
    }
    .el-tabs__nav{
      width: 100%;
      display: flex;
      justify-content: center;
    .el-table thead{
      color: #111111;
    }
    .el-tabs__active-bar{
      height: 0;
    .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: 1;
      span{
        font-size: $fontSize-28;
      }
    }
  }
</style>