<template>
|
<div class="biyeshengStatistics-wrap">
|
<!--<table class="biyeshengStatistics-table">
|
<thead>
|
<tr>
|
<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 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 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>-->
|
<el-table
|
:max-height="tableHeight"
|
: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 nowSize from "../../../../libs/nowSize";
|
import {getGraduateTable} from '@/api/jiuyeAndChuangye'
|
export default {
|
name: "biyeshengStatistics",
|
data() {
|
return {
|
tableData: [],
|
heardArry: [],
|
rowIndexArr: [],//存储合并单元格的开始位置
|
tableHeight: window.innerHeight - nowSize(230)
|
}
|
},
|
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'
|
}
|
}
|
}
|
if(columnIndex == 0) {
|
return { background:'#51D2FF' }
|
}
|
},
|
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
|
},
|
getHeight() {
|
this.tableHeight = window.innerHeight - nowSize(230)
|
}
|
},
|
created() {
|
window.addEventListener('resize', this.getHeight)
|
},
|
destroyed() {
|
window.addEventListener('resize', this.getHeight)
|
}
|
}
|
</script>
|
|
<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%;
|
.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>
|
