职业培训接口对接

zhangxiaoxu123456

2022-04-21 41f383d6ef3812bd81098d03e44cdeab549eeb08

 src/pages/show/jiuyeAndChuangye/jiuyeChildren/zhiyePeixun.vue

@@ -1,129 +1,245 @@
<template>
  <div class="zhiyePeixun-wrap">
    <el-table
      stripe
      border
      :data="tableData"
      max-height="640"
      :header-cell-style="handleheader"
      style="width: 100%">
      <el-table-column
        prop="year"
        fixed="left"
        prop="jyear"
        label="年份"
        align="center"
        width="200">
        align="center">
      </el-table-column>
      <el-table-column label="补贴性培训" align="center">
        <el-table-column
          label="补贴性培训"
          align="center"
          width="800">
          align="center">
          <el-table-column
            prop="shengtingjihua"
            prop="planTimes"
            :label="'省厅计划 \n （人次）'"
            align="center"
            width="200">
            align="center">
          </el-table-column>
          <el-table-column
            prop="shijipeixunjihua"
            prop="realTimes"
            :label="'实际培训人数 \n （人次）'"
            align="center"
            width="200">
            align="center">
          </el-table-column>
          <el-table-column
            prop="wanchenglv"
            prop="completionRate"
            label="完成率"
            align="center"
            width="200">
            align="center">
          </el-table-column>
          <el-table-column
            prop="zhuanzhangzhichu"
            prop="expenditure"
            :label="'专账资金支出 \n （万元）'"
            align="center"
            width="200">
            align="center">
          </el-table-column>
        </el-table-column>
        <el-table-column
          prop="name"
          label="其中应届毕业学年高校毕业生"
          align="center"
          width="400">
          align="center">
          <el-table-column
            prop="peixunrenshu"
            prop="graduateTrains"
            :label="'培训人数 \n （人次）'"
            align="center"
            width="200">
            align="center">
          </el-table-column>
          <el-table-column
            prop="butiejine"
            prop="graduateSubsidy"
            :label="'补贴金额 \n （万元)'"
            align="center"
            width="200">
            align="center">
          </el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column
        prop="year"
        label="社会性培训"
        align="center">
        <el-table-column
          prop="peixunrenci"
          prop="graduateSubsidy"
          label="实际培训人数 （人次）"
          align="center">
        </el-table-column>
      </el-table-column>
    </el-table>
    <div class="zhiyepeixun-echarts"></div>
    <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",
        data() {
            return {
                tableData:[{
                    year: '2017年',
                    shengtingjihua: '34212',
                    shijipeixunjihua: '44333',
                    wanchenglv: '90%',
                    zhuanzhangzhichu: '233421',
                    peixunrenshu: '3222',
                    butiejine:'2322',
                    peixunrenci:'34223'
                },{
                    year: '2018年',
                    shengtingjihua: '34212',
                    shijipeixunjihua: '44333',
                    wanchenglv: '90%',
                    zhuanzhangzhichu: '233421',
                    peixunrenshu: '3222',
                    butiejine:'2322',
                    peixunrenci:'34223'
                },{
                    year: '2019年',
                    shengtingjihua: '34212',
                    shijipeixunjihua: '44333',
                    wanchenglv: '90%',
                    zhuanzhangzhichu: '233421',
                    peixunrenshu: '3222',
                    butiejine:'2322',
                    peixunrenci:'34223'
                },{
                    year: '2020年',
                    shengtingjihua: '34212',
                    shijipeixunjihua: '44333',
                    wanchenglv: '90%',
                    zhuanzhangzhichu: '233421',
                    peixunrenshu: '3222',
                    butiejine:'2322',
                    peixunrenci:'34223'
                }]
                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()
                })
            }
        }
    }
@@ -133,8 +249,14 @@
  @import "../../../../assets/css/base";
  .zhiyePeixun-wrap{
    width: 100%;
    height: 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 */;
@@ -161,7 +283,7 @@
      font-size: $fontSize-28;
      color: $color-darkGrey;
      font-weight: 300;
      line-height: 1;
      line-height: 1.3;
      white-space:pre-line;
    }
    .el-table--border th.el-table__cell, .el-table__fixed-right-patch{