Merge remote-tracking branch 'origin/master'

付延余

2022-04-24 1f81ea3da2aa638453f71f13cd1c42ef6b27a2d3

Merge remote-tracking branch 'origin/master'

 src/api/shehuiBaozhang.js

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

//10.查询历年社会保险参保人员分析图数据接口
export const getPersonChart = (params) => {
  return postRequest('/ybg/webservice/app/social/getPersonChart.do', params)
}

//11.查询社会保险参保人员统计表数据接口
export const getPersonTable = (params) => {
  return postRequest('/ybg/webservice/app/social/getPersonTable.do', params)
}

//14.查询职工养老保险参保人数数据接口
export const getSecurityTable = (params) => {
  return postRequest('/ybg/webservice/app/social/getSecurityTable.do', params)
}

//15.查询近一年职工养老保险参保人数折线图数据接口
export const getSecurityDetailChart = (params) => {
  return postRequest('/ybg/webservice/app/social/getSecurityDetailChart.do', params)
}

//16.查询社会保险参保人数表格数据接口
export const getInsuranceTable = (params) => {
  return postRequest('/ybg/webservice/app/social/getInsuranceTable.do', params)
}

//17.查询社保征缴收入明细总览表格数据接口
export const getFundincomeTable = (params) => {
  return postRequest('/ybg/webservice/app/social/getFundincomeTable.do', params)
}

//18.查询社保征缴收入和参保人数平均值表格数据接口
export const getAverageTable = (params) => {
  return postRequest('/ybg/webservice/app/social/getAverageTable.do', params)
}

 src/pages/components/juminYanglaoBaoxian/baoxianForm.vue

@@ -7,72 +7,67 @@
      <el-table-column
        width="200"
        align="center"
        prop="name"
        prop="areaName"
        label="县（市、区）">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        prop="january"
        label="1月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        label="1月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        prop="february"
        label="2月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        prop="march"
        label="3月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        prop="april"
        label="4月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        prop="may"
        label="5月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        prop="june"
        label="6月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        prop="july"
        label="7月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        prop="august"
        label="8月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        prop="september"
        label="9月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        prop="october"
        label="10月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        prop="november"
        label="11月">
      </el-table-column>
      <el-table-column
        align="center"
        prop="month"
        prop="december"
        label="12月">
      </el-table-column>
    </el-table>
@@ -80,28 +75,36 @@
</template>

<script>
    import {getInsuranceTable} from '@/api/shehuiBaozhang'
    export default {
        name: "baoxianForm",
        props: {
            paddingTop: {
                type: Number,
                default: 0.078125
            },
            typeData: {
                type: String,
                default: '3'
            }
        },
        computed: {
        },
        data() {
            return {
                tableData:[{
                    name: '全市',
                    month: '23233'
                },{
                    name: '市本级',
                    month: '23233'
                },{
                    name: '长安区',
                    month: '23233'
                }]
                tableData:[]
            }
        },
        mounted() {
            this.getInsuranceTable()
        },
        methods: {
            getInsuranceTable() {
                getInsuranceTable({type: this.typeData}).then(res => {
                    if(res.code == 1000) {
                       this.tableData = res.list
                    }
                })
            }
        }
    }

 src/pages/components/qiyezhigongShebao/zhigongShebao.vue

@@ -4,30 +4,39 @@
      border
      :data="tableData"
      :header-cell-style="handleheader"
      :default-sort = "{prop: 'name', order: 'descending'}"
      style="width: 100%">
      <el-table-column
        prop="shiqu"
        prop="area"
        label="县（市、区）"
        align="center"
        width="250">
      </el-table-column>
      <el-table-column
        sortable
        prop="name"
        label="企业职工养老保险参保人数"
        :sort-method="(a,b) => {return a.insuredNums - b.insuredNums}"
        prop="insuredNums"
        :label="dataType"
        align="center">
      </el-table-column>
      <el-table-column
        sortable
        prop="address"
        :sort-method="(a,b) => {return a.inJobs - b.inJobs}"
        prop="inJobs"
        label="在职职工"
        align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        sortable
        :sort-method="(a,b) => {return a.outJobs - b.outJobs}"
        prop="outJobs"
        label="离退休"
        align="center">
      </el-table-column>
      <el-table-column
        sortable
        :sort-method="(a,b) => {return a.proportion - b.proportion}"
        prop="proportion"
        label="供养比"
        align="center">
      </el-table-column>
      <el-table-column
@@ -44,43 +53,35 @@
</template>

<script>
  import {getSecurityTable} from '@/api/shehuiBaozhang'
  import zhigongshebaoForm from "./zhigongshebaoForm";
    export default {
        name: "chengzhenXinzengJiuye",
        components: {
            zhigongshebaoForm
        },
        props: ['type','dataType'],
        data() {
            return {
                zhigongshebaoVisiable: false,  //弹框
                tableData: [{
                    shiqu:'全市',
                    date: '1',
                    name: '1',
                    address: '1'
                }, {
                    shiqu:'长安区',
                    date: '1',
                    name: '2',
                    address: '2'
                }, {
                    shiqu:'桥西区',
                    date: '3',
                    name: '3',
                    address: '4'
                }, {
                    shiqu:'新华区',
                    date: '4',
                    name: '4',
                    address: '1   '
                }]
                tableData: []
            }
        },
        mounted() {
          this.getSecurityTable()
        },
        methods: {
            getSecurityTable() {
                getSecurityTable({type: this.type}).then(res => {
                    if(res.code == 1000) {
                        this.tableData = res.list
                    }
                })
            },
            handleClick(row) {
                this.zhigongshebaoVisiable = true
                this.$nextTick(() => {
                    this.$refs.zhigongshebaoForm.init()
                    this.$refs.zhigongshebaoForm.init(this.type,row.area)
                })
            },
            handleheader(data) {

 src/pages/components/qiyezhigongShebao/zhigongshebaoForm.vue

@@ -10,6 +10,7 @@
</template>

<script>
  import {getSecurityDetailChart} from '@/api/shehuiBaozhang'
    import echarts from "echarts/lib/echarts";
    import nowSize from '../../../libs/nowSize'
    export default {
@@ -17,13 +18,28 @@
        data() {
            return {
                dialogVisible: false,
                xdata:[],
                totalData: [],
                inJobData: [],
                outJobData: []
            }
        },
        methods: {
            init() {
            init(type,area) {
                this.dialogVisible = true
                this.$nextTick(() => {
                    this.zhigongshebaoEcharts()
                    this.getSecurityDetailChart(type,area)
                })
            },
            getSecurityDetailChart(type,area) {
                getSecurityDetailChart({type:type,area:area}).then(res => {
                    if(res.code == 1000) {
                        this.xdata = res.obj.data
                        this.totalData = res.obj.total
                        this.inJobData = res.obj.inJob
                        this.outJobData = res.obj.outJob
                        this.zhigongshebaoEcharts()
                    }
                })
            },
            zhigongshebaoEcharts() {
@@ -64,7 +80,7 @@
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['2021/4', '2021/5', '2021/6', '2021/7', '2021/8', '2021/9', '2021/10'],
                        data: this.xdata,
                        axisLabel: {
                            show: true,
                            textStyle: {
@@ -108,17 +124,17 @@
                            name: '总数',
                            type: 'line',
                            stack: 'Total',
                            data: [370, 332, 401, 534, 490, 530, 910]
                            data: this.totalData
                        },
                        {
                            name: '在职职工',
                            type: 'line',
                            data: [220, 182, 191, 234, 290, 330, 310]
                            data: this.inJobData
                        },
                        {
                            name: '离退休',
                            type: 'line',
                            data: [150, 132, 201, 154, 190, 330, 410]
                            data: this.outJobData
                        }
                    ]
                };

 src/pages/components/shebaoZhengjiShouru/shebaoZhengjiShouruForm.vue

New file
@@ -0,0 +1,116 @@
<template>
  <div class="shebaoZhengjiShouruForm-wrap">
    <div class="danwei-box">单位：人</div>
    <div class="shebaoZhengjiShouruForm-table">
      <el-table
        border
        style="width: 100%"
        :data="tableData">
        <el-table-column
          width="200"
          align="center"
          prop="area"
          label="县（市、区）">
        </el-table-column>
        <el-table-column
          align="center"
          prop="enterprise"
          label="企业养老保险基金征缴收入">
        </el-table-column>
        <el-table-column
          align="center"
          prop="resident"
          label="城乡居民养老保险基金征缴收入">
        </el-table-column>
        <el-table-column
          align="center"
          prop="injuryInsurance"
          label="工伤保险基金征缴收入">
        </el-table-column>
        <el-table-column
          align="center"
          prop="careerInsurance"
          label="失业保险基金征缴收入">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
    export default {
        name: "shebaoZhengjiShouruForm",
        props: {
            tableData: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        data() {
            return {
                tableData: []
            }
        }
    }
</script>

<style lang="scss">
  @import "../../../assets/css/base";
  .shebaoZhengjiShouruForm-wrap{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    .el-table th.el-table__cell{
      background-color:$color-blue;
    }
    .el-table .el-table__body-wrapper tr{
      height: 0.265625rem  /* 68/256 */;
    }
    .el-table tr:nth-child(odd){
      background-color: #CEF2FF;
    }
    .el-table tr:nth-child(even){
      background-color: #A8E9FF;
    }
    .el-table, .el-table__expanded-cell{
      background-color: transparent;
    }
    .el-table thead{
      color: $color-darkGrey;
    }
    .el-table{
      color: $color-darkGrey;
    }
    .el-table .cell{
      font-size: $fontSize-28;
      color: $color-darkGrey;
      font-weight: 300;
      line-height: 1;
    }
    .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
      border-bottom:1Px solid $color-grey; /*no*/
    }
    .el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
      border-right:1Px solid $color-grey; /*no*/
    }
  }
</style>

<style lang="scss" scoped>
  @import "../../../assets/css/base";
  .shebaoZhengjiShouruForm-wrap{
    position: relative;
    .danwei-box{
      position: absolute;
      right: 0;
      top: 0;
      color: $color-white;
    }
    .shebaoZhengjiShouruForm-table{
      padding-top: 0.234375rem  /* 60/256 */;
    }
  }

</style>

 src/pages/components/shebaoZhengjiShouru/shebaoZhengjiShouruTotal.vue

New file
@@ -0,0 +1,115 @@
<template>
   <div class="shebaoZhengjiShouruForm-wrap">
     <div class="danwei-box">单位：人</div>
     <div class="shebaoZhengjiShouruForm-table">
       <el-table
         border
         style="width: 100%"
         :data="totalTableData">
         <el-table-column
           width="200"
           align="center"
           prop="area"
           label="县（市、区）">
         </el-table-column>
         <el-table-column
           align="center"
           prop="enterprise"
           label="企业养老保险基金征缴收入">
         </el-table-column>
         <el-table-column
           align="center"
           prop="resident"
           label="城乡居民养老保险基金征缴收入">
         </el-table-column>
         <el-table-column
           align="center"
           prop="injuryInsurance"
           label="工伤保险基金征缴收入">
         </el-table-column>
         <el-table-column
           align="center"
           prop="careerInsurance"
           label="失业保险基金征缴收入">
         </el-table-column>
       </el-table>
     </div>
   </div>
</template>

<script>
    export default {
        name: "shebaoZhengjiShouruTotal",
        props: {
            totalTableData: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        data() {
            return {
            }
        }
    }
</script>

<style lang="scss">
  @import "../../../assets/css/base";
  .shebaoZhengjiShouruForm-wrap{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    .el-table th.el-table__cell{
      background-color:$color-blue;
    }
    .el-table .el-table__body-wrapper tr{
      height: 0.265625rem  /* 68/256 */;
    }
    .el-table tr:nth-child(odd){
      background-color: #CEF2FF;
    }
    .el-table tr:nth-child(even){
      background-color: #A8E9FF;
    }
    .el-table, .el-table__expanded-cell{
      background-color: transparent;
    }
    .el-table thead{
      color: $color-darkGrey;
    }
    .el-table{
      color: $color-darkGrey;
    }
    .el-table .cell{
      font-size: $fontSize-28;
      color: $color-darkGrey;
      font-weight: 300;
      line-height: 1;
    }
    .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
      border-bottom:1Px solid $color-grey; /*no*/
    }
    .el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
      border-right:1Px solid $color-grey; /*no*/
    }
  }
</style>

<style lang="scss" scoped>
  @import "../../../assets/css/base";
  .shebaoZhengjiShouruForm-wrap{
    position: relative;
    .danwei-box{
      position: absolute;
      right: 0;
      top: 0;
      color: $color-white;
    }
    .shebaoZhengjiShouruForm-table{
      padding-top: 0.234375rem  /* 60/256 */;
    }
  }

</style>

 src/pages/show/jiuyeAndChuangye/jiuyeChildren/biyeshengStatistics.vue

@@ -255,13 +255,17 @@
      <el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        :cell-style="cellClass"
        border>
        <el-table-column
          align="center"
          type="index">
          type="index"
          label="序号"
          width="110">
        </el-table-column>
        <template v-for="(item,index) in heardArry">
          <el-table-column
            :key="index"
            align="center"
            :prop="item"
            :label="item">
@@ -303,35 +307,7 @@
        name: "biyeshengStatistics",
        data() {
            return {
                tableData: [{
                    xiangmu: '本市高校',
                    year: '2333',
                    mergeRowIndex: 1,
                },{
                    xiangmu: '其中：本科毕业生',
                    year: '2333',
                    mergeRowIndex: 1,
                },{
                    xiangmu: '专科毕业生',
                    year: '2333',
                    mergeRowIndex: 1,
                },{
                    xiangmu: '全省高校',
                    year: '2333',
                    mergeRowIndex: 2,
                },{
                    xiangmu: '其中：本科毕业生',
                    year: '2333',
                    mergeRowIndex: 2,
                },{
                    xiangmu: '专科毕业生',
                    year: '2333',
                    mergeRowIndex: 2,
                },{
                    xiangmu: '全省高校本市生源',
                    year: '2333',
                    mergeRowIndex: 3
                }],
                tableData: [],
                heardArry: [],
                rowIndexArr: []//存储合并单元格的开始位置
            }
@@ -340,8 +316,40 @@
          this.getGraduateTable()
        },
        methods: {
            objectSpanMethod({ row, column, rowIndex, columnIndex }) {

            objectSpanMethod({rowIndex, columnIndex}) {  //合并单元格
                if(columnIndex == 0) {
                    if(this.rowIndexArr.includes(rowIndex)) {
                        console.log(rowIndex,'------index')
                        return {
                            rowspan:  this.rowIndexArr[this.rowIndexArr.indexOf(rowIndex) + 1] - rowIndex,
                            colspan: 1,
                        }
                    }else {
                        return {
                            rowspan: 0,
                            colspan: 0
                        }
                    }
                }
            },
            cellClass({ row, column, rowIndex, columnIndex }) {  //修改某个单元格样式
                if(columnIndex == 1) {
                    if(this.rowIndexArr.includes(rowIndex)) {
                        return {
                            textAlign: 'left'
                        }
                    }
                }
            },
            getData() {
              let res = this.tableData
              res.reduce((prev, cur, curIndex) => {
                 if(prev == 0 || prev != cur.mark) {
                     this.rowIndexArr.push(curIndex)
                 }
                 return cur.mark
              },0)
              this.rowIndexArr.push(res.length)
            },
            getGraduateTable() {
                getGraduateTable().then(res => {
@@ -355,40 +363,48 @@
                            this.heardArry = []
                        }
                        result.forEach((item,index) => {
                            item.typeList && item.typeList.forEach((e,i) => {
                                console.log('e------------e',e.name)
                                console.log(rows[0],'0000000000000000000000000')
                            head.push(item.year)
                            item.dataList.forEach((e,i) => {
                                if(!rows[i]) {
                                    console.log(rows[i],'rows[index]------rows[index]')
                                    console.log('e------------e----2',e.name)
                                    console.log('index------------index----index',index)
                                   rows[i] = {"项目" : e.name}
                                    console.log(rows[i],'rows[index]------------1')
                                    rows[i] = { '项目' : e.name}
                                }

                                e.dataList && e.dataList.forEach((data,k) => {
                                    if(index == 0 && i == 0) {
                                        head.push(data.year)
                                        console.log(head,'head-----=============head')
                                    }
                                    rows[i][data.year] = data.val
                                    console.log(rows[i][data.year],'rows---------333333333')
                                })
                                rows[i][item.year] = e.val
                                rows[i]['mark'] = e.mark
                            })

                        })
                        this.tableData = rows
                        this.heardArry = head
                        console.log('this.tableData----this.tableData-----',this.tableData)
                        this.getData()
                    }
                })
                // let res = this.tableData
                // res.reduce((prev, cur, index) => {
                //     console.log('prev',prev)
                //     console.log('cur',cur)
                //     console.log('index',index)
                //     return cur.mergeRowIndex
                // },0)
            }

            },
            getMaxLength (arr) {
                return arr.reduce((acc, item) => {
                    if (item) {
                        const calcLen = this.getTextWidth(item)
                        if (acc < calcLen) {
                            acc = calcLen
                        }
                    }
                    return acc
                }, 0)
            },
            /*动态获取表格宽度*/
            getTextWidth (str) {
                let width = 0
                const html = document.createElement('span')
                html.innerText = str
                html.className = 'getTextWidth'
                document.querySelector('body').appendChild(html)
                width = document.querySelector('.getTextWidth').offsetWidth
                console.log('width',width)
                document.querySelector('.getTextWidth').remove()
                return width
            },
        },
        watch: {
        }
    }
</script>
@@ -429,6 +445,27 @@
      font-weight: 300;
      line-height: 1;
    }
    /*.el-table th {*/
    /*  padding: 0;*/
    /*  white-space: nowrap;*/
    /*  min-width: fit-content;*/
    /*}*/

    /*.el-table td {*/
    /*  padding: 1px;*/
    /*  white-space: nowrap;*/
    /*  width: fit-content;*/
    /*}*/

    /*!** 修改el-card默认paddingL:20px-内边距 **!*/
    /*.el-card__body {*/
    /*  padding: 10px;*/
    /*}*/

    /*.el-table .cell {*/
    /*  white-space: nowrap;*/
    /*  width: fit-content;*/
    /*}*/
  }
</style>


 src/pages/show/shehuiBaozhang/shehuiBaozhang.vue

@@ -17,7 +17,7 @@
            <h1>企业职工社保</h1>
          </div>
        </el-menu-item>
        <el-menu-item index="jiguanzhigongShebao">
        <el-menu-item index="/jiguanzhigongShebao">
          <div class="menu-left-block">
            <h1>机关职工社保</h1>
          </div>

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

@@ -1,7 +1,7 @@
<template>
  <div class="juminYanglaoBaoxian-wrap">
    <div class="danwei-box">单位：人</div>
    <baoxianForm :paddingTop="0.234375"></baoxianForm>
    <baoxianForm :paddingTop="0.234375" typeData="5"></baoxianForm>
  </div>
</template>


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

@@ -1,7 +1,7 @@
<template>
  <div class="jiguanzhigongShebao-wrap">
    <div class="danwei-box">单位：人</div>
    <zhigongShebao></zhigongShebao>
    <zhigongShebao :type="2" :dataType="'机关事业职工养老保险'"></zhigongShebao>
  </div>
</template>


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

@@ -1,11 +1,12 @@
<template>
    <div class="juminYanglaoBaoxian-wrap">
      <div class="danwei-box">单位：人</div>
      <baoxianForm :paddingTop="0.234375"></baoxianForm>
      <baoxianForm :paddingTop="0.234375" typeData="3"></baoxianForm>
    </div>
</template>

<script>

  import baoxianForm from "../../../components/juminYanglaoBaoxian/baoxianForm";
    export default {
        name: "juminYanglaoBaoxian",
@@ -16,6 +17,12 @@
            return {

            }
        },
        mounted() {

        },
        methods: {

        }
    }
</script>

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

@@ -1,7 +1,7 @@
<template>
    <div class="qiyezhigongShebao-wrap">
       <div class="danwei-box">单位：人</div>
       <zhigongShebao></zhigongShebao>
       <zhigongShebao :type="1" :dataType="'企业职工养老保险'"></zhigongShebao>
    </div>
</template>

@@ -14,7 +14,6 @@
        },
        data() {
            return {

            }
        }
    }

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

@@ -1,33 +1,84 @@
<template>
  <div class="shebaoZhengjiShouru-wrap">
    <h1>各县（市、区）2021年就业情况统计表</h1>
    <el-tabs v-model="activeName">
      <el-tab-pane label="城镇新增就业" name="first">
        <baoxianForm></baoxianForm>
    <el-tabs v-model="activeName" @tab-click="tabHandleClick">
<!--      <el-tab-pane-->
<!--        v-for="item in tabMenuList"-->
<!--        :key="item.id"-->
<!--        :label="item.name"-->
<!--        :name="item.id + ''">-->
<!--        <shebaoZhengjiShouruForm :tableData="tableData"></shebaoZhengjiShouruForm>-->
<!--      </el-tab-pane>-->
      <el-tab-pane label="总览" name="1">
        <shebaoZhengjiShouruTotal :totalTableData="totalTableData"></shebaoZhengjiShouruTotal>
      </el-tab-pane>
      <el-tab-pane label="失业再就业" name="second">
        <baoxianForm></baoxianForm>
      <el-tab-pane label="失业再就业" name="2">
        <shebaoZhengjiShouruForm :tableData="tableData"></shebaoZhengjiShouruForm>
      </el-tab-pane>
      <el-tab-pane label="就业困难人员再就业" name="third">
        <baoxianForm></baoxianForm>
      <el-tab-pane label="就业困难人员再就业" name="3">
        <shebaoZhengjiShouruForm :tableData="tableData"></shebaoZhengjiShouruForm>
      </el-tab-pane>
      <el-tab-pane label="登记失业率" name="fourth">
        <baoxianForm></baoxianForm>
      <el-tab-pane label="登记失业率" name="4">
        <shebaoZhengjiShouruForm :tableData="tableData"></shebaoZhengjiShouruForm>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import baoxianForm from "../../../components/juminYanglaoBaoxian/baoxianForm";
  import {getFundincomeTable, getAverageTable} from '@/api/shehuiBaozhang'
  import shebaoZhengjiShouruTotal from "../../../components/shebaoZhengjiShouru/shebaoZhengjiShouruTotal";
  import shebaoZhengjiShouruForm from "../../../components/shebaoZhengjiShouru/shebaoZhengjiShouruForm";
    export default {
        name: "jiuyeQingkuang",
        components: {
            baoxianForm,
            shebaoZhengjiShouruTotal,
            shebaoZhengjiShouruForm
        },
        data() {
            return {
                activeName: 'first'
                totalTableData: [],
                tableData: [],
                activeName: '1',
                tabMenuList: [{
                    name: '总览',
                    id: 1
                },{
                    name: '企业职工养老保险',
                    id: 2
                },{
                    name: '城乡居民养老保险',
                    id: 3
                },{
                    name: '工伤保险',
                    id: 4
                },{
                    name: '失业保险',
                    id: 5
                }]
            }
        },
        mounted() {
          this.getFundincomeTable()
          this.getAverageTable()
        },
        methods: {
            getFundincomeTable() {
                getFundincomeTable().then(res => {
                   if(res.code == 1000) {
                      this.totalTableData = res.list
                   }
                })
            },
            getAverageTable() {
                getAverageTable().then(res => {
                    if(res.code == 1000) {
                        this.tableData = res.list
                    }
                })
            },
            tabHandleClick(tab) {

            }
        }
    }

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

@@ -2,7 +2,7 @@
  <div class="shehuiBaoxian-wrap">
    <div class="shehuiBaoxian-table">
      <h1>社会保险参保人员统计表</h1>
      <div class="danwei-box">单位:人</div>
      <div class="danwei-box">单位:万人</div>
      <el-table
        max-height="640"
        :data="tableData"
@@ -12,87 +12,76 @@
        style="width: 100%">
        <el-table-column
          align="center"
          prop="date"
          prop="dataName"
          label="指标名称"
          fixed="left"
          width="220">
        </el-table-column>
        <el-table-column
          prop="name"
          prop="yearFinish"
          align="center"
          label="去年完成"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          prop="january"
          align="center"
          label="1月">
        </el-table-column>
        <el-table-column
          prop="address"
          prop="february"
          align="center"
          label="2月">
        </el-table-column>
        <el-table-column
          prop="address"
          prop="march"
          align="center"
          label="3月">
        </el-table-column>
        <el-table-column
          prop="address"
          prop="april"
          align="center"
          label="4月">
        </el-table-column>
        <el-table-column
          prop="address"
          prop="may"
          align="center"
          label="5月">
        </el-table-column>
        <el-table-column
          prop="address"
          prop="june"
          align="center"
          label="6月">
        </el-table-column>
        <el-table-column
          prop="address"
          prop="july"
          align="center"
          label="7月">
        </el-table-column>
        <el-table-column
          prop="address"
          prop="august"
          align="center"
          label="8月">
        </el-table-column>
        <el-table-column
          prop="address"
          prop="september"
          align="center"
          label="9月">
        </el-table-column>
        <el-table-column
          prop="address"
          prop="october"
          align="center"
          label="10月">
        </el-table-column>
        <el-table-column
          prop="address"
          prop="november"
          align="center"
          label="11月">
        </el-table-column>
        <el-table-column
          prop="address"
          prop="december"
          align="center"
          label="12月">
        </el-table-column>
        <el-table-column
          prop="address"
          align="center"
          label="省厅计划">
        </el-table-column>
        <el-table-column
          prop="address"
          align="center"
          label="当前完成率"
          width="160">
        </el-table-column>
      </el-table>
      <div class="shehuiBaoxianEcharts" id="shehuiBaoxianEcharts"></div>
@@ -101,42 +90,43 @@
</template>

<script>
  import {getPersonChart, getPersonTable} from '@/api/shehuiBaozhang'
  import nowSize from "../../../../libs/nowSize";
    export default {
        name: "shehuiBaoxian",
        data() {
            return {
                tableData: [{
                    date: '城镇新增就业人数',
                    name: '122',
                    address: '32111'
                }, {
                    date: '城镇失业人员实现再就业人数',
                    name: '233',
                    address: '34222'
                }, {
                    date: '农村劳动力向非农产业转移人数',
                    name: '23222',
                    address: '3112222'
                }, {
                    date: '其中：劳务输出',
                    name: '34221',
                    address: '122222'
                }, {
                    date: '开展补贴性职业技能培训人数',
                    name: '2333',
                    address: '1232233'
                }, {
                    date: '城镇登记失业率',
                    name: '222',
                    address: '2222'
                }]
                tableData: [],
                yearsData: [],  //x轴数据
                zhigongData: [],  //城镇职工养老保险参保人数
                juminData: [],  //城乡居民养老保险参保人数
                gongshangData: [],  //工伤保险参保人数
                shiyeData: [],  //失业保险参保人数
            }
        },
        mounted() {
          this.shehuiBaoxianEcharts()
          this.getPersonTable()
          this.getPersonChart()
        },
        methods: {
            getPersonTable(){
                getPersonTable().then(res => {
                    if(res.code == 1000) {
                        this.tableData = res.list
                    }
                })
            },
            getPersonChart() {
                getPersonChart().then(res => {
                    if(res.code == 1000) {
                        this.yearsData = res.obj.years
                        this.zhigongData = res.obj.zhigong
                        this.juminData = res.obj.jumin
                        this.shiyeData = res.obj.shiye
                        this.shehuiBaoxianEcharts()
                    }
                })
            },
            handleheader(data) {
                return {
                    lineHeight: '0',
@@ -180,12 +170,13 @@
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['2021/4', '2021/5', '2021/6', '2021/7', '2021/8', '2021/9', '2021/10'],
                        data: this.yearsData,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#fff",
                                fontSize:nowSize(24)
                                fontSize:nowSize(24),
                                lineHeight: nowSize(56),
                            }
                        },
                        axisLine: {
@@ -223,22 +214,22 @@
                        {
                            name: '城乡居民养老保险参保人数',
                            type: 'line',
                            data: [370, 332, 401, 534, 490, 530, 910]
                            data: this.juminData
                        },
                        {
                            name: '城镇职工养老保险参保人数',
                            type: 'line',
                            data: [220, 182, 191, 234, 290, 330, 310]
                            data: this.zhigongData
                        },
                        {
                            name: '工伤保险参保人数',
                            type: 'line',
                            data: [150, 132, 201, 154, 190, 330, 410]
                            data: this.gongshangData
                        },
                        {
                            name: '失业保险参保人数',
                            type: 'line',
                            data: [250, 135, 261, 154, 170, 310, 460]
                            data: this.shiyeData
                        }
                    ]
                };

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

@@ -1,7 +1,7 @@
<template>
  <div class="shiyeBaoxian-wrap">
    <div class="danwei-box">单位：人</div>
    <baoxianForm :paddingTop="0.234375"></baoxianForm>
    <baoxianForm :paddingTop="0.234375" typeData="4"></baoxianForm>
  </div>
</template>