From ee658b8ab1dd3b76b8c3fa3f2006b4fa8e8af0cf Mon Sep 17 00:00:00 2001
From: zhangxiaoxu123456 <zxx19900626>
Date: 星期五, 22 四月 2022 17:33:13 +0800
Subject: [PATCH] 社会保障接口对接
---
src/pages/show/jiuyeAndChuangye/jiuyeChildren/biyeshengStatistics.vue | 513 ++++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 489 insertions(+), 24 deletions(-)
diff --git a/src/pages/show/jiuyeAndChuangye/jiuyeChildren/biyeshengStatistics.vue b/src/pages/show/jiuyeAndChuangye/jiuyeChildren/biyeshengStatistics.vue
index 731c76c..5c5e67c 100644
--- a/src/pages/show/jiuyeAndChuangye/jiuyeChildren/biyeshengStatistics.vue
+++ b/src/pages/show/jiuyeAndChuangye/jiuyeChildren/biyeshengStatistics.vue
@@ -1,46 +1,511 @@
<template>
<div class="biyeshengStatistics-wrap">
- <table>
+ <!--<table class="biyeshengStatistics-table">
<thead>
<tr>
- <th>搴忓彿</th>
- <th>椤圭洰</th>
- <th>2017骞�</th>
- <th>2018骞�</th>
- <th>2019骞�</th>
- <th>2020骞�</th>
- <th>2021骞�</th>
+ <th colspan="1">搴忓彿</th>
+ <th colspan="3">椤圭洰</th>
+ <th colspan="2">2017骞�</th>
+ <th colspan="2">2018骞�</th>
+ <th colspan="2">2019骞�</th>
+ <th colspan="2">2020骞�</th>
+ <th colspan="2">2021骞�</th>
</tr>
</thead>
<tbody>
<tr>
- <th rowspan="3">1</th>
- <td>鍏ㄥ浗楂樻牎鏈競鐢熸簮</td>
- <td>2642</td>
- <td>6879</td>
- <td>1586</td>
- <td>8651</td>
- <td>45682</td>
+ <th colspan="1" rowspan="3">1</th>
+ <td colspan="3">鍏ㄥ浗楂樻牎鏈競鐢熸簮</td>
+ <td colspan="2">2642</td>
+ <td colspan="2">6879</td>
+ <td colspan="2">1586</td>
+ <td colspan="2">8651</td>
+ <td colspan="2">45682</td>
</tr>
<tr>
- <td>鍏朵腑锛氭湰绉戞瘯涓氱敓</td>
- <td>2642</td>
- <td>6879</td>
- <td>1586</td>
- <td>8651</td>
- <td>45682</td>
+ <td colspan="3">鍏朵腑锛氭湰绉戞瘯涓氱敓</td>
+ <td colspan="2">2642</td>
+ <td colspan="2">6879</td>
+ <td colspan="2">1586</td>
+ <td colspan="2">8651</td>
+ <td colspan="2">45682</td>
+ </tr>
+ <tr>
+ <td colspan="3">涓撶姣曚笟鐢�</td>
+ <td colspan="2">2642</td>
+ <td colspan="2">6879</td>
+ <td colspan="2">1586</td>
+ <td colspan="2">8651</td>
+ <td colspan="2">45682</td>
+ </tr>
+
+ <tr>
+ <th colspan="1" rowspan="5">2</th>
+ <td colspan="3">鍏ㄧ渷楂樻牎</td>
+ <td colspan="2">2642</td>
+ <td colspan="2">6879</td>
+ <td colspan="2">1586</td>
+ <td colspan="2">8651</td>
+ <td colspan="2">45682</td>
+ </tr>
+ <tr>
+ <td colspan="3">鍏朵腑锛氬崥澹瘯涓氱敓</td>
+ <td colspan="2">2642</td>
+ <td colspan="2">6879</td>
+ <td colspan="2">1586</td>
+ <td colspan="2">8651</td>
+ <td colspan="2">45682</td>
+ </tr>
+ <tr>
+ <td colspan="3">纭曞＋姣曚笟鐢�</td>
+ <td colspan="2">2642</td>
+ <td colspan="2">6879</td>
+ <td colspan="2">1586</td>
+ <td colspan="2">8651</td>
+ <td colspan="2">45682</td>
+ </tr>
+ <tr>
+ <td colspan="3">鏈姣曚笟鐢�</td>
+ <td colspan="2">2642</td>
+ <td colspan="2">6879</td>
+ <td colspan="2">1586</td>
+ <td colspan="2">8651</td>
+ <td colspan="2">45682</td>
+ </tr>
+ <tr>
+ <td colspan="3">涓撶姣曚笟鐢�</td>
+ <td colspan="2">2642</td>
+ <td colspan="2">6879</td>
+ <td colspan="2">1586</td>
+ <td colspan="2">8651</td>
+ <td colspan="2">45682</td>
+ </tr>
+
+ <tr>
+ <th colspan="1" rowspan="5">3</th>
+ <td colspan="3">鍏ㄧ渷楂樻牎鏈競鐢熸簮</td>
+ <td colspan="2">2642</td>
+ <td colspan="2">6879</td>
+ <td colspan="2">1586</td>
+ <td colspan="2">8651</td>
+ <td colspan="2">45682</td>
+ </tr>
+ <tr>
+ <td colspan="3">鍏朵腑锛氬崥澹瘯涓氱敓</td>
+ <td colspan="2">2642</td>
+ <td colspan="2">6879</td>
+ <td colspan="2">1586</td>
+ <td colspan="2">8651</td>
+ <td colspan="2">45682</td>
+ </tr>
+ <tr>
+ <td colspan="3">纭曞＋姣曚笟鐢�</td>
+ <td colspan="2">2642</td>
+ <td colspan="2">6879</td>
+ <td colspan="2">1586</td>
+ <td colspan="2">8651</td>
+ <td colspan="2">45682</td>
+ </tr>
+ <tr>
+ <td colspan="3">鏈姣曚笟鐢�</td>
+ <td colspan="2">2642</td>
+ <td colspan="2">6879</td>
+ <td colspan="2">1586</td>
+ <td colspan="2">8651</td>
+ <td colspan="2">45682</td>
+ </tr>
+ <tr>
+ <td colspan="3">涓撶姣曚笟鐢�</td>
+ <td colspan="2">2642</td>
+ <td colspan="2">6879</td>
+ <td colspan="2">1586</td>
+ <td colspan="2">8651</td>
+ <td colspan="2">45682</td>
+ </tr>
+
+ <tr>
+ <th colspan="1" rowspan="5">3</th>
+ <td colspan="3">椹荤煶楂樻牎</td>
+ <td colspan="2">2642</td>
+ <td colspan="2">6879</td>
+ <td colspan="2">1586</td>
+ <td colspan="2">8651</td>
+ <td colspan="2">45682</td>
+ </tr>
+ <tr>
+ <td colspan="3">鍏朵腑锛氬崥澹瘯涓氱敓</td>
+ <td colspan="2">2642</td>
+ <td colspan="2">6879</td>
+ <td colspan="2">1586</td>
+ <td colspan="2">8651</td>
+ <td colspan="2">45682</td>
+ </tr>
+ <tr>
+ <td colspan="3">纭曞＋姣曚笟鐢�</td>
+ <td colspan="2">2642</td>
+ <td colspan="2">6879</td>
+ <td colspan="2">1586</td>
+ <td colspan="2">8651</td>
+ <td colspan="2">45682</td>
+ </tr>
+ <tr>
+ <td colspan="3">鏈姣曚笟鐢�</td>
+ <td colspan="2">2642</td>
+ <td colspan="2">6879</td>
+ <td colspan="2">1586</td>
+ <td colspan="2">8651</td>
+ <td colspan="2">45682</td>
+ </tr>
+ <tr>
+ <td colspan="3">涓撶姣曚笟鐢�</td>
+ <td colspan="2">2642</td>
+ <td colspan="2">6879</td>
+ <td colspan="2">1586</td>
+ <td colspan="2">8651</td>
+ <td colspan="2">45682</td>
+ </tr>
+
+ <tr>
+ <th colspan="1" rowspan="5">5</th>
+ <td colspan="3">椹荤煶楂樻牎鏈競鐢熸簮</td>
+ <td colspan="2">2642</td>
+ <td colspan="2">6879</td>
+ <td colspan="2">1586</td>
+ <td colspan="2">8651</td>
+ <td colspan="2">45682</td>
+ </tr>
+ <tr>
+ <td colspan="3">鍏朵腑锛氬崥澹瘯涓氱敓</td>
+ <td colspan="2">2642</td>
+ <td colspan="2">6879</td>
+ <td colspan="2">1586</td>
+ <td colspan="2">8651</td>
+ <td colspan="2">45682</td>
+ </tr>
+ <tr>
+ <td colspan="3">纭曞＋姣曚笟鐢�</td>
+ <td colspan="2">2642</td>
+ <td colspan="2">6879</td>
+ <td colspan="2">1586</td>
+ <td colspan="2">8651</td>
+ <td colspan="2">45682</td>
+ </tr>
+ <tr>
+ <td colspan="3">鏈姣曚笟鐢�</td>
+ <td colspan="2">2642</td>
+ <td colspan="2">6879</td>
+ <td colspan="2">1586</td>
+ <td colspan="2">8651</td>
+ <td colspan="2">45682</td>
+ </tr>
+ <tr>
+ <td colspan="3">涓撶姣曚笟鐢�</td>
+ <td colspan="2">2642</td>
+ <td colspan="2">6879</td>
+ <td colspan="2">1586</td>
+ <td colspan="2">8651</td>
+ <td colspan="2">45682</td>
+ </tr>
+
+ <tr>
+ <th colspan="1" rowspan="4">6</th>
+ <td colspan="3">绂绘牎鏈氨涓氶珮鏍℃瘯涓氱敓锛�12鏈堝簳锛�</td>
+ <td colspan="2">2642</td>
+ <td colspan="2">6879</td>
+ <td colspan="2">1586</td>
+ <td colspan="2">8651</td>
+ <td colspan="2">45682</td>
+ </tr>
+ <tr>
+ <td colspan="3">鍏朵腑锛氳嚜鎰挎殏鏃朵笉灏变笟鍜屾鍦ㄦ眰鑱�</td>
+ <td colspan="2">2642</td>
+ <td colspan="2">6879</td>
+ <td colspan="2">1586</td>
+ <td colspan="2">8651</td>
+ <td colspan="2">45682</td>
+ </tr>
+ <tr>
+ <td colspan="3">宸插氨涓�</td>
+ <td colspan="2">2642</td>
+ <td colspan="2">6879</td>
+ <td colspan="2">1586</td>
+ <td colspan="2">8651</td>
+ <td colspan="2">45682</td>
+ </tr>
+ <tr>
+ <td colspan="3">灏变笟鐜�</td>
+ <td colspan="2">2642</td>
+ <td colspan="2">6879</td>
+ <td colspan="2">1586</td>
+ <td colspan="2">8651</td>
+ <td colspan="2">45682</td>
+ </tr>
+
+ <tr>
+ <th colspan="1">7</th>
+ <td colspan="3">绂绘牎鏈氨涓氶珮鏍℃瘯涓氱敓锛�12鏈堝簳锛�</td>
+ <td colspan="2">2642</td>
+ <td colspan="2">6879</td>
+ <td colspan="2">1586</td>
+ <td colspan="2">8651</td>
+ <td colspan="2">45682</td>
</tr>
</tbody>
- </table>
+ </table>-->
+ <el-table
+ :data="tableData"
+ :span-method="objectSpanMethod"
+ :cell-style="cellClass"
+ border>
+ <el-table-column
+ align="center"
+ 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">
+ </el-table-column>
+ </template>
+ <!--<el-table-column
+ align="center"
+ prop="xiangmu"
+ label="椤圭洰"
+ width="300">
+ </el-table-column>
+ <el-table-column
+ align="center"
+ prop="year"
+ label="2017骞�">
+ </el-table-column>
+ <el-table-column
+ align="center"
+ prop="year"
+ label="2018骞�">
+ </el-table-column>
+ <el-table-column
+ align="center"
+ prop="year"
+ label="2019骞�">
+ </el-table-column>
+ <el-table-column
+ align="center"
+ prop="year"
+ label="2020骞�">
+ </el-table-column>-->
+ </el-table>
</div>
</template>
<script>
+ import {getGraduateTable} from '@/api/jiuyeAndChuangye'
export default {
- name: "biyeshengStatistics"
+ name: "biyeshengStatistics",
+ data() {
+ return {
+ tableData: [],
+ heardArry: [],
+ rowIndexArr: []//瀛樺偍鍚堝苟鍗曞厓鏍肩殑寮�濮嬩綅缃�
+ }
+ },
+ mounted() {
+ this.getGraduateTable()
+ },
+ methods: {
+ 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 => {
+ if(res.code == 1000) {
+ let result = res.list
+ let head = []
+ let rows = []
+ head.push('椤圭洰')
+ if(!result) {
+ this.tableData = []
+ this.heardArry = []
+ }
+ result.forEach((item,index) => {
+ head.push(item.year)
+ item.dataList.forEach((e,i) => {
+ if(!rows[i]) {
+ rows[i] = { '椤圭洰' : e.name}
+ }
+ rows[i][item.year] = e.val
+ rows[i]['mark'] = e.mark
+ })
+
+ })
+ this.tableData = rows
+ this.heardArry = head
+ this.getData()
+ }
+ })
+
+ },
+ 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>
-<style scoped>
+<style lang="scss">
+ @import "../../../../assets/css/base";
+ .biyeshengStatistics-wrap{
+ .el-table tr{
+ background-color: #CEF2FF;
+ }
+ .el-table th.el-table__cell{
+ background-color: #51D2FF;
+ }
+ .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{
+ font-size: $fontSize-28;
+ color: $color-darkGrey;
+ 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>
+
+<style lang="scss" scoped>
+ @import "../../../../assets/css/base";
+.biyeshengStatistics-wrap{
+ width: 100%;
+ height: 100%;
+ overflow-y: auto;
+ .biyeshengStatistics-table{
+ width: 100%;
+ border: 1Px solid $color-grey; /*no*/
+ border-collapse: collapse;
+ table-layout: fixed;
+ thead{
+ background-color: $color-blue;
+ tr{
+ height: 0.25rem /* 64/256 */;
+ }
+ th,td{
+ color: $color-darkGrey;
+ border:1Px solid $color-grey; /*no*/
+ font-weight: 300;
+ font-size: $fontSize-28;
+ }
+ }
+ tbody{
+ background-color: #CEF2FF;
+ height: 3.90625rem /* 1000/256 */;
+ tr{
+ height: 0.25rem /* 64/256 */;
+ }
+ th,td{
+ color: $color-darkGrey;
+ text-align: center;
+ border:1Px solid $color-grey; /*no*/
+ font-weight: 300;
+ font-size: $fontSize-28;
+ }
+ }
+ }
+}
</style>
--
Gitblit v1.9.1