<template>
|
<div class="shebaoZhengjiShouru-wrap">
|
<h1>各县（市、区）2021年就业情况统计表</h1>
|
<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="2">
|
<shebaoZhengjiShouruForm :tableData="tableData" label="在职职工（人）" type="1"></shebaoZhengjiShouruForm>
|
</el-tab-pane>
|
<el-tab-pane label="城乡居民养老保险" name="3">
|
<shebaoZhengjiShouruForm :tableData="tableData" label="参保人数（人）" type="3"></shebaoZhengjiShouruForm>
|
</el-tab-pane>
|
<el-tab-pane label="失业保险" name="4">
|
<shebaoZhengjiShouruForm :tableData="tableData" label="参保人数（人）" type="4"></shebaoZhengjiShouruForm>
|
</el-tab-pane>
|
<el-tab-pane label="工伤保险" name="5">
|
<shebaoZhengjiShouruForm :tableData="tableData" label="参保人数（人）" type="5"></shebaoZhengjiShouruForm>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</template>
|
|
<script>
|
import {getFundincomeTable, getAverageTable} from '@/api/shehuiBaozhang'
|
import shebaoZhengjiShouruTotal from "../../../components/shebaoZhengjiShouru/shebaoZhengjiShouruTotal";
|
import shebaoZhengjiShouruForm from "../../../components/shebaoZhengjiShouru/shebaoZhengjiShouruForm";
|
export default {
|
name: "jiuyeQingkuang",
|
components: {
|
shebaoZhengjiShouruTotal,
|
shebaoZhengjiShouruForm
|
},
|
data() {
|
return {
|
totalTableData: [],
|
tableData: [],
|
activeName: '1',
|
type:'1',
|
}
|
},
|
mounted() {
|
this.getFundincomeTable()
|
|
},
|
methods: {
|
getFundincomeTable() {
|
getFundincomeTable().then(res => {
|
if(res.code == 1000) {
|
this.totalTableData = res.list
|
}
|
})
|
},
|
getAverageTable() {
|
getAverageTable({type: this.type}).then(res => {
|
if(res.code == 1000) {
|
this.tableData = res.list
|
}
|
})
|
},
|
tabHandleClick(tab) {
|
console.log('tab------',tab)
|
this.type = tab.name
|
this.getAverageTable()
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
@import "../../../../assets/css/base";
|
.shebaoZhengjiShouru-wrap{
|
.el-tabs__nav-wrap::after{
|
background-color: transparent;
|
height: 0;
|
}
|
.el-tabs__nav-scroll{
|
display: flex;
|
justify-content: center;
|
}
|
.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-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-tabs__nav{
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
}
|
.el-tabs__active-bar{
|
height: 0;
|
}
|
}
|
</style>
|
<style lang="scss" scoped>
|
@import "../../../../assets/css/base";
|
.shebaoZhengjiShouru-wrap{
|
width: 100%;
|
height: 100%;
|
h1{
|
font-size: $fontSize-30;
|
color: $color-white;
|
text-align: center;
|
line-height: 2;
|
margin-bottom: 0.078125rem /* 20/256 */;
|
}
|
}
|
</style>
|
