<template>
|
<div class="shebaoShouzhiZongbiao-wrap">
|
<div class="shebaoShouzhiZongbiao-table">
|
<h1>社会保障基金统计表</h1>
|
<el-table
|
:data="tableData"
|
:cell-style="handleCellStyle"
|
style="width: 100%">
|
<!--<template v-for="(item,index) in headerArry">
|
<template v-if="index == 0">
|
<el-table-column
|
align="center"
|
:prop="item.item"
|
label="项目"
|
fixed>
|
<template slot-scope="scope">
|
<span style="margin-left: 10px">{{scope.row.item}}</span>
|
</template>
|
</el-table-column>
|
<template v-for="(e,i) in item.dataList">
|
<el-table-column :label="e.month" align="center">
|
<el-table-column
|
align="center"
|
label="总收入">
|
<template slot-scope="scope">
|
<template>
|
<template>
|
<span :class="[Number(e.taxesIncome) < 0 ? 'fontColorRed' : '']" style="margin-left: 10px">{{scope.row.dataList[0].totalIncome}}</span>
|
</template>
|
</template>
|
</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
label="征集收入">
|
<template slot-scope="scope">
|
<span :class="[Number(e.taxesIncome) < 0 ? 'fontColorRed' : '']" style="margin-left: 10px">{{scope.row.dataList[0].taxesIncome}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
label="本月支出">
|
<template slot-scope="scope">
|
<span :class="[Number(e.pay) < 0 ? 'fontColorRed' : '']" style="margin-left: 10px">{{scope.row.dataList[0].pay}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
label="本月结余">
|
<template slot-scope="scope">
|
<span :class="[Number(e.balance) < 0 ? 'fontColorRed' : '']" style="margin-left: 10px">{{scope.row.dataList[0].balance}}</span>
|
</template>
|
</el-table-column>
|
</el-table-column>
|
</template>
|
<template>
|
<el-table-column
|
align="center"
|
:prop="item.surplus"
|
label="累计结余">
|
<template slot-scope="scope">
|
<span :class="[Number(item.surplus) < 0 ? 'fontColorRed' : '']" style="margin-left: 10px">{{item.surplus}}</span>
|
</template>
|
</el-table-column>
|
</template>
|
</template>
|
</template>-->
|
<el-table-column
|
width="260"
|
align="center"
|
prop="item"
|
label="项目">
|
</el-table-column>
|
<el-table-column :label="month1" align="center">
|
<el-table-column
|
align="center"
|
prop="totalIncome1"
|
label="总收入">
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="taxesIncome1"
|
label="征集收入">
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="pay1"
|
label="本月支出">
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="balance1"
|
label="本月结余">
|
</el-table-column>
|
</el-table-column>
|
<el-table-column :label="month2" align="center">
|
<el-table-column
|
align="center"
|
prop="totalIncome2"
|
label="总收入">
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="taxesIncome2"
|
label="征集收入">
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="pay2"
|
label="本月支出">
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="balance2"
|
label="本月结余">
|
</el-table-column>
|
</el-table-column>
|
<el-table-column :label="month3" align="center">
|
<el-table-column
|
align="center"
|
prop="totalIncome3"
|
label="总收入">
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="taxesIncome3"
|
label="征集收入">
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="pay3"
|
label="本月支出">
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="balance3"
|
label="本月结余">
|
</el-table-column>
|
</el-table-column>
|
<el-table-column :label="month4" align="center">
|
<el-table-column
|
align="center"
|
prop="totalIncome4"
|
label="总收入">
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="taxesIncome4"
|
label="征集收入">
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="pay4"
|
label="本月支出">
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="balance4"
|
label="本月结余">
|
</el-table-column>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="surplus"
|
label="累计结余">
|
</el-table-column>
|
</el-table>
|
<div class="shebaoShouzhiZongbiaoEcharts" id="shebaoShouzhiZongbiaoEcharts"></div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import nowSize from "../../../../libs/nowSize";
|
import {getStatisticsTable,getStatisticsChart } from '@/api/shehuiBaozhang'
|
import index from "../../index/index";
|
export default {
|
name: "shebaoShouzhiZongbiao",
|
data() {
|
return {
|
tableHead:[],
|
tableData:[],
|
headerArry:[],
|
echartsSeries:{}
|
}
|
},
|
mounted() {
|
this.getStatisticsTable()
|
this.getStatisticsChart()
|
},
|
methods: {
|
getStatisticsTable() {
|
getStatisticsTable().then(res => {
|
if(res.code == 1000) {
|
let result = res.list
|
// this.tableData = result
|
this.headerArry = result
|
console.log('this.headerArry====',this.headerArry)
|
// this.getData(result)
|
let data = []
|
result.forEach((item,index) => {
|
let row = item.dataList
|
row.forEach((e,i) => {
|
let a = Object.assign({},e,{name: item.item})
|
data.push(a)
|
})
|
})
|
this.tableData = result
|
console.log( this.tableData,' this.tableData===========')
|
console.log( this.headerArry,'this.headerArry===========')
|
|
}
|
})
|
},
|
getData(result) {
|
let row = []
|
this.tableData.forEach((e,index) => {
|
// row.push({
|
// name: e.item
|
// })
|
if(index == 0) {
|
this.headerArry = e
|
}
|
|
e.dataList.forEach((c,i) => {
|
row.push({
|
name: e.item,
|
"month": c.month ,
|
"totalIncome": c.totalIncome,
|
"taxesIncome": c.taxesIncome,
|
"pay": c.pay,
|
"balance": c.balance,
|
"surplus": c.surplus || null
|
})
|
})
|
// this.headerArry = row
|
// this.tableData = row
|
console.log(this.headerArry)
|
})
|
},
|
shebaoShouzhiZongbiaoEcharts() {
|
let myEchart = this.$echarts.init(document.getElementById('shebaoShouzhiZongbiaoEcharts'))
|
let option = {
|
color : ['#FF5151','#51FF5D','#FFD151','#FFD151'],
|
title: {
|
text: '历年社保基金累计数据分析图',
|
left: 'center',
|
top: '8%',
|
textStyle: {
|
color: '#FFFFFF',
|
fontSize: nowSize(30)
|
},
|
},
|
tooltip: {
|
trigger: 'axis'
|
},
|
legend: {
|
itemWidth: nowSize(30),
|
itemHeight: nowSize(4),
|
itemGap: nowSize(50),
|
right:'2%',
|
top: 'center',
|
orient: 'vertical',
|
textStyle: {
|
color: '#FFFFFF',
|
fontSize: nowSize(24),
|
}
|
},
|
grid: {
|
top: '15%',
|
left: '4%',
|
right: '18%',
|
bottom: '9%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: this.echartsSeries.years,
|
axisLabel: {
|
show: true,
|
textStyle: {
|
color: "#fff",
|
fontSize:nowSize(24)
|
}
|
},
|
axisLine: {
|
lineStyle: {
|
color: "#999999",
|
width: 1,
|
type: "solid"
|
}
|
},
|
splitLine: {
|
show: false
|
}
|
},
|
yAxis: {
|
type: 'value',
|
axisLabel: {
|
show: true,
|
textStyle: {
|
color: "#fff",
|
fontSize:nowSize(24)
|
}
|
},
|
axisLine: {
|
lineStyle: {
|
color: "#999999",
|
width: 1,
|
type: "solid"
|
}
|
},
|
splitLine: {
|
show: false
|
}
|
},
|
series: [
|
{
|
name: '年累计总收入',
|
type: 'line',
|
data: this.echartsSeries.income
|
},
|
{
|
name: '年累计支出',
|
type: 'line',
|
data: this.echartsSeries.pay
|
},
|
{
|
name: '年累计征缴收入',
|
type: 'line',
|
data: this.echartsSeries.taxes
|
},
|
{
|
name: '年累计结余',
|
type: 'line',
|
data:this.echartsSeries.balance
|
}
|
]
|
};
|
myEchart.setOption(option)
|
window.addEventListener('resize',function () {
|
myEchart.resize()
|
})
|
},
|
handleCellStyle({rowIndex, columnIndex}) {
|
if(columnIndex == 0) {
|
return { background:'#51D2FF' }
|
}
|
},
|
//35. 查询历年社保基金数据分析图数据接口
|
getStatisticsChart() {
|
getStatisticsChart().then(res => {
|
if(res.code ===1000){
|
this.echartsSeries = res.obj
|
this.shebaoShouzhiZongbiaoEcharts()
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
@import "../../../../assets/css/base";
|
.shebaoShouzhiZongbiao-table{
|
width: 100%;
|
height: calc(100% - 0.078125rem /* 20/256 */);
|
margin-top: 0.078125rem /* 20/256 */;
|
/*.el-table .cell, el-table th > .cell{*/
|
/* display: inline-block;*/
|
/* white-space: nowrap;*/
|
/* width: auto;*/
|
/* overflow: auto;*/
|
/*}*/
|
.el-table th.el-table__cell{
|
background-color:$color-blue;
|
height: 0.3125rem /* 80/256 */;
|
}
|
.el-table tr{
|
height: 0.3125rem /* 80/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;
|
white-space:pre-line;
|
}
|
.el-table--border th.el-table__cell, .el-table__fixed-right-patch{
|
border-bottom:1Px solid $color-grey; /*no*/
|
}
|
.el-table thead.is-group th.el-table__cell{
|
background-color: $color-blue;
|
}
|
.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";
|
.shebaoShouzhiZongbiao-wrap{
|
width: 100%;
|
height: calc(100% - 0.078125rem /* 20/256 */);
|
.shebaoShouzhiZongbiao-table{
|
margin-top: 0.078125rem /* 20/256 */;
|
h1{
|
font-size: $fontSize-30;
|
color: $color-white;
|
text-align: center;
|
line-height: 2;
|
}
|
.fontColorBlue {
|
color: $color-blue;
|
}
|
.fontColorRed {
|
color: #FF3939;
|
}
|
}
|
.shebaoShouzhiZongbiaoEcharts{
|
height: calc(100% - 640px - 0.33203125rem /* 85/256 */);
|
}
|
}
|
</style>
|
