| | |
|---|
| | | <template> |
|---|
| | | <div class="zhiyePeixun-wrap"> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | <div class="zhiyePeixun-wrap"> |
|---|
| | | <el-table |
|---|
| | | stripe |
|---|
| | | border |
|---|
| | | :data="tableData" |
|---|
| | | max-height="640" |
|---|
| | | :header-cell-style="handleheader" |
|---|
| | | style="width: 100%"> |
|---|
| | | <el-table-column |
|---|
| | | fixed="left" |
|---|
| | | prop="jyear" |
|---|
| | | label="年份" |
|---|
| | | align="center"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column label="补贴性培训" align="center"> |
|---|
| | | <el-table-column |
|---|
| | | label="补贴性培训" |
|---|
| | | align="center"> |
|---|
| | | <el-table-column |
|---|
| | | prop="planTimes" |
|---|
| | | :label="'省厅计划 \n （人次）'" |
|---|
| | | align="center"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | prop="realTimes" |
|---|
| | | :label="'实际培训人数 \n （人次）'" |
|---|
| | | align="center"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | prop="completionRate" |
|---|
| | | label="完成率" |
|---|
| | | align="center"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | prop="expenditure" |
|---|
| | | :label="'专账资金支出 \n （万元）'" |
|---|
| | | align="center"> |
|---|
| | | </el-table-column> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | label="其中应届毕业学年高校毕业生" |
|---|
| | | align="center"> |
|---|
| | | <el-table-column |
|---|
| | | prop="graduateTrains" |
|---|
| | | :label="'培训人数 \n （人次）'" |
|---|
| | | align="center"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | prop="graduateSubsidy" |
|---|
| | | :label="'补贴金额 \n （万元)'" |
|---|
| | | align="center"> |
|---|
| | | </el-table-column> |
|---|
| | | </el-table-column> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | label="社会性培训" |
|---|
| | | align="center"> |
|---|
| | | <el-table-column |
|---|
| | | prop="graduateSubsidy" |
|---|
| | | label="实际培训人数 （人次）" |
|---|
| | | align="center"> |
|---|
| | | </el-table-column> |
|---|
| | | </el-table-column> |
|---|
| | | </el-table> |
|---|
| | | <div class="zhiyepeixun-echarts" id="zhiyepeixunEcharts"></div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import {getTrainTable, getTrainChart} from '@/api/jiuyeAndChuangye' |
|---|
| | | import nowSize from "../../../../libs/nowSize"; |
|---|
| | | export default { |
|---|
| | | name: "zhiyePeixun" |
|---|
| | | name: "zhiyePeixun", |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | tableData:[], |
|---|
| | | yearsData: [], //x轴数据 |
|---|
| | | numberData: [], //柱状图数据（实际培训人数） |
|---|
| | | rateData: [], //折线数据（完成率） |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.getTrainTable() |
|---|
| | | this.getTrainChart() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | getTrainTable() { //查询职业培训统计表格数据接口 |
|---|
| | | getTrainTable().then(res => { |
|---|
| | | if(res.code == 1000) { |
|---|
| | | this.tableData = res.list |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | getTrainChart() { |
|---|
| | | getTrainChart().then(res => { |
|---|
| | | if(res.code == 1000) { |
|---|
| | | this.yearsData = res.obj.years |
|---|
| | | this.numberData = res.obj.number |
|---|
| | | this.rateData = res.obj.rate |
|---|
| | | this.zhiyepeixunEcharts() |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | handleheader(data) { |
|---|
| | | return { |
|---|
| | | lineHeight: '0', |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | zhiyepeixunEcharts() { |
|---|
| | | let myEchart = this.$echarts.init(document.getElementById('zhiyepeixunEcharts')) |
|---|
| | | let option = { |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis', |
|---|
| | | axisPointer: { |
|---|
| | | type: 'cross', |
|---|
| | | crossStyle: { |
|---|
| | | color: '#999' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | textStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | fontSize: nowSize(28) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | title: { |
|---|
| | | text:'历年职业培训情况分析图', |
|---|
| | | left: 'center', |
|---|
| | | top:'5%', |
|---|
| | | textStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | fontSize: nowSize(30) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | grid: { |
|---|
| | | top: '15%', |
|---|
| | | left: '4%', |
|---|
| | | right: '18%', |
|---|
| | | bottom: '3%', |
|---|
| | | containLabel: true |
|---|
| | | }, |
|---|
| | | legend: { |
|---|
| | | data: ['实际培训人数','完成率'], |
|---|
| | | right:'3%', |
|---|
| | | top:'center', |
|---|
| | | orient:'vertical', |
|---|
| | | itemGap: nowSize(50), |
|---|
| | | textStyle: { |
|---|
| | | color:'#fff', |
|---|
| | | fontSize: nowSize(24) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | xAxis: [ |
|---|
| | | { |
|---|
| | | type: 'category', |
|---|
| | | data: this.yearsData, |
|---|
| | | axisPointer: { |
|---|
| | | type: 'shadow' |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | textStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | fontSize: nowSize(24) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: "#999999", |
|---|
| | | width: 1, |
|---|
| | | type: "solid" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | yAxis: [ |
|---|
| | | { |
|---|
| | | type: 'value', |
|---|
| | | axisLabel: { |
|---|
| | | textStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | fontSize: nowSize(24) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: "#999999", |
|---|
| | | width: 1, |
|---|
| | | type: "solid" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | show: false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 'value', |
|---|
| | | axisLabel: { |
|---|
| | | show: false, |
|---|
| | | formatter: '{value} %' |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | axisTick: { |
|---|
| | | show: false |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: '实际培训人数', |
|---|
| | | type: 'bar', |
|---|
| | | barWidth: nowSize(48), |
|---|
| | | color:'#51D2FF', |
|---|
| | | tooltip: { |
|---|
| | | valueFormatter: function (value) { |
|---|
| | | return value + ' ml'; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data: this.numberData |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '完成率', |
|---|
| | | type: 'line', |
|---|
| | | yAxisIndex: 1, |
|---|
| | | tooltip: { |
|---|
| | | valueFormatter: function (value) { |
|---|
| | | return value + ' °C'; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data: this.rateData |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }; |
|---|
| | | myEchart.setOption(option) |
|---|
| | | window.addEventListener('resize',function () { |
|---|
| | | myEchart.resize() |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="css" scoped> |
|---|
| | | <style lang="scss"> |
|---|
| | | @import "../../../../assets/css/base"; |
|---|
| | | .zhiyePeixun-wrap{ |
|---|
| | | width: 100%; |
|---|
| | | height: calc(100% - 0.078125rem /* 20/256 */); |
|---|
| | | margin-top: 0.078125rem /* 20/256 */; |
|---|
| | | .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{ |
|---|
| | | background: transparent; |
|---|
| | | } |
|---|
| | | .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 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.3; |
|---|
| | | 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> |
|---|
| | | .zhiyepeixun-echarts{ |
|---|
| | | width: 100%; |
|---|
| | | height: calc(100% - 2.65625rem /* 680/256 */); |
|---|
| | | margin-top: 0.078125rem /* 20/256 */; |
|---|
| | | } |
|---|
| | | </style> |
|---|
