zhangxiaoxu123456
2022-05-05 87cbee9b14970d997c1e5c54b5fef4d04369c968
src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shehuiBaoxian.vue
@@ -2,11 +2,12 @@
  <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"
        :max-height="tableHeight"
        :data="tableData"
        :header-cell-style="handleheader"
        :cell-style="handleCellStyle"
        stripe
        border
        style="width: 100%">
@@ -84,8 +85,8 @@
          label="12月">
        </el-table-column>
      </el-table>
      <div class="shehuiBaoxianEcharts" id="shehuiBaoxianEcharts"></div>
    </div>
      <div class="shehuiBaoxianEcharts" id="shehuiBaoxianEcharts"></div>
  </div>
</template>
@@ -102,6 +103,7 @@
                juminData: [],  //城乡居民养老保险参保人数
                gongshangData: [],  //工伤保险参保人数
                shiyeData: [],  //失业保险参保人数
                tableHeight: window.innerHeight - nowSize(960)
            }
        },
        mounted() {
@@ -132,6 +134,11 @@
                    lineHeight: '0',
                }
            },
            handleCellStyle({rowIndex, columnIndex}) {
                if(columnIndex == 0) {
                    return { background:'#51D2FF' }
                }
            },
            shehuiBaoxianEcharts() {
               let myEchart = this.$echarts.init(document.getElementById('shehuiBaoxianEcharts'))
                let option = {
@@ -152,7 +159,7 @@
                        itemWidth: nowSize(30),
                        itemHeight: nowSize(4),
                        itemGap: nowSize(50),
                        right:'2%',
                        right:'8%',
                        top: 'center',
                        orient: 'vertical',
                        textStyle: {
@@ -163,7 +170,7 @@
                    grid: {
                        top: '15%',
                        left: '4%',
                        right: '20%',
                        right: '25%',
                        bottom: '3%',
                        containLabel: true
                    },
@@ -237,7 +244,16 @@
                window.addEventListener('resize',function () {
                    myEchart.resize()
                })
            },
            getHeight() {
                this.tableHeight = window.innerHeight - nowSize(960)
            }
        },
        created() {
            window.addEventListener('resize', this.getHeight)
        },
        destroy() {
            window.addEventListener('resize', this.getHeight)
        }
    }
</script>
@@ -287,7 +303,6 @@
    height: 100%;
    .shehuiBaoxian-table{
      width: 100%;
      height: 100%;
      position: relative;
      .danwei-box{
        position: absolute;
@@ -305,7 +320,8 @@
      }
    }
    .shehuiBaoxianEcharts{
      height: calc(100% - 640px - 0.33203125rem  /* 85/256 */);
      width: 100%;
      height: calc(100% - 2.5rem  /* 640/256 */ - 0.33203125rem  /* 85/256 */);
    }
  }
</style>