毕业生统计接口对接

zhangxiaoxu123456

2022-04-21 71da7c5aa9ebaeaadf459a5092a5fbcd1aeffdfa

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

@@ -1,24 +1,29 @@
<template>
    <div class="jiuyeQingkuang-wrap">
      <h1>各县（市、区）2021年就业情况统计表</h1>
      <el-tabs v-model="activeName">
        <el-tab-pane label="城镇新增就业" name="first">
          <chengzhenXinzengJiuye></chengzhenXinzengJiuye>
      <el-tabs v-model="activeName" @tab-click="tabHandleClick">
        <el-tab-pane
          v-for="(item,index) in tabMenuList"
          :key="item.id"
          :label="item.name"
          :name="item.id + ''">
          <chengzhenXinzengJiuye ref="chengzhenXinzengJiuye" :tableData="tableData"></chengzhenXinzengJiuye>
        </el-tab-pane>
        <el-tab-pane label="失业再就业" name="second">
          <chengzhenXinzengJiuye></chengzhenXinzengJiuye>
        <!--<el-tab-pane label="失业再就业" name="2">
          <chengzhenXinzengJiuye ref="chengzhenXinzengJiuye"></chengzhenXinzengJiuye>
        </el-tab-pane>
        <el-tab-pane label="就业困难人员再就业" name="third">
          <chengzhenXinzengJiuye></chengzhenXinzengJiuye>
        <el-tab-pane label="就业困难人员再就业" name="3">
          <chengzhenXinzengJiuye ref="chengzhenXinzengJiuye"></chengzhenXinzengJiuye>
        </el-tab-pane>
        <el-tab-pane label="登记失业率" name="fourth">
          <chengzhenXinzengJiuye></chengzhenXinzengJiuye>
        </el-tab-pane>
        <el-tab-pane label="登记失业率" name="4">
          <chengzhenXinzengJiuye ref="chengzhenXinzengJiuye"></chengzhenXinzengJiuye>
        </el-tab-pane>-->
      </el-tabs>
    </div>
</template>

<script>
    import {getEmployTable} from '@/api/jiuyeAndChuangye'
  import chengzhenXinzengJiuye from "../../../components/jiuyeQingkuang/chengzhenXinzengJiuye";
    export default {
        name: "jiuyeQingkuang",
@@ -27,7 +32,39 @@
        },
        data() {
            return {
                activeName: 'first'
                activeName: '1',
                type: '1',
                tableData: [],
                //'城镇新增就业','失业再就业','就业困难人员再就业','登记失业率'
                tabMenuList: [{
                    name: '城镇新增就业',
                    id: 1
                },{
                    name: '失业再就业',
                    id: 2
                },{
                    name: '就业困难人员再就业',
                    id: 3
                },{
                    name: '登记失业率',
                    id: 4
                }]
            }
        },
        mounted() {
            this.getEmployTable()
        },
        methods: {
            getEmployTable() {
                getEmployTable({type: this.type}).then(res => {
                    if(res.code == 1000) {
                        this.tableData = res.list
                    }
                })
            },
            tabHandleClick(tab, event) {
                this.type = tab.name
                this.getEmployTable()
            }
        }
    }
@@ -45,23 +82,23 @@
      justify-content: center;
    }
    .el-tabs__item{
      width: 24rem;
      height: 6.4rem;
      width: 0.9375rem  /* 240/256 */;
      height: 0.25rem  /* 64/256 */;
      background: rgba(81,210,255,0.08);
      border: 1px solid #0097cc; /*no*/
      border: 1Px solid #0097cc; /*no*/
      color: #9CE6FF;
      font-size: $fontSize-24;
      margin: 0 2rem  /* 10/10 */;
      margin: 0 0.078125rem  /* 20/256 */  /* 10/10 */;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .el-tabs__item.is-active{
      width: 24rem;
      height: 6.4rem;
      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;
      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;
@@ -88,7 +125,7 @@
      color: $color-white;
      text-align: center;
      line-height: 2;
      margin-bottom: 2rem;
      margin-bottom: 0.078125rem  /* 20/256 */;
    }
  }
</style>