对接口

zhangxiaoxu123456

2022-04-20 ce57a3d25cda427d90e590838c491dd387887b11

对接口

 src/api/jiuyeAndChuangye.js

@@ -19,3 +19,8 @@
export const getParkTable = (params) => {
  return postRequest('/ybg/webservice/app/employment/getParkTable.do',params)
}

//6.查询就业情况统计表数据接口
export const getEmployTable = (params) => {
  return postRequest('/ybg/webservice/app/employment/getEmployTable.do', params)
}

 src/pages/components/jiuyeQingkuang/chengzhenXinzengJiuye.vue

@@ -6,102 +6,210 @@
        :header-cell-style="handleheader"
        style="width: 100%">
        <el-table-column
          prop="shiqu"
          prop="area"
          label="县（市、区）"
          align="center"
          width="220">
          <template slot-scope="scope">
            <div class="sanjiao-box">
              <div class="cell-content-box">{{scope.row.area}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          width="280"
          prop="january"
          label="1月"
          align="center">
          <template slot-scope="scope">
            <div class="sanjiao-box">
              <div class="cell-content-box">{{scope.row.january.val}}</div>
              <div class="paiming-box red-sanjiao"
                   :class="scope.row.january.order > 0 ? 'red-sanjiao' : 'green-sanjiao'"
                   v-if="scope.row.january.order != 0">
                <div>{{scope.row.january.order}}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          width="280"
          prop="february"
          label="2月"
          align="center">
          <template slot-scope="scope">
            <div class="sanjiao-box">
              <div>{{scope.row.february.val}}</div>
              <div class="paiming-box"
                   :class="scope.row.february.order > 0 ? 'red-sanjiao' : 'green-sanjiao'"
                   v-if="scope.row.february.order != 0">
                <div>{{scope.row.february.order}}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          width="280"
          prop="march"
          label="3月"
          align="center">
          <template slot-scope="scope">
            <div class="sanjiao-box">
              <div>{{scope.row.march.val}}</div>
              <div class="paiming-box"
                   :class="scope.row.march.order > 0 ? 'red-sanjiao' : 'green-sanjiao'"
                   v-if="scope.row.march.order != 0">{{scope.row.march.order}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          width="280"
          prop="april"
          label="4月"
          align="center">
          <template slot-scope="scope">
            <div class="sanjiao-box">
              <span>{{scope.row.april.val}}</span>
              <div class="paiming-box"
                   :class="scope.row.april.order > 0 ? 'red-sanjiao' : 'green-sanjiao'"
                   v-if="scope.row.april.order != 0">{{scope.row.april.order}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          width="280"
          prop="may"
          label="5月"
          align="center">
          <template slot-scope="scope">
            <div class="sanjiao-box">
              <span>{{scope.row.may.val}}</span>
              <div class="paiming-box"
                   :class="scope.row.may.order > 0 ? 'red-sanjiao' : 'green-sanjiao'"
                   v-if="scope.row.may.order != 0">{{scope.row.may.order}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          width="280"
          prop="june"
          label="6月"
          align="center">
          <template slot-scope="scope">
            <div class="sanjiao-box">
              <span>{{scope.row.june.val}}</span>
              <div class="paiming-box"
                   :class="scope.row.june.order > 0 ? 'red-sanjiao' : 'green-sanjiao'"
                   v-if="scope.row.june.order != 0">{{scope.row.june.order}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          width="280"
          prop="july"
          label="7月"
          align="center">
          <template slot-scope="scope">
            <div class="sanjiao-box">
              <span>{{scope.row.july.val}}</span>
              <div class="paiming-box"
                   :class="scope.row.july.order > 0 ? 'red-sanjiao' : 'green-sanjiao'"
                   v-if="scope.row.july.order != 0">{{scope.row.july.order}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          width="280"
          prop="august"
          label="8月"
          align="center">
          <template slot-scope="scope">
            <div class="sanjiao-box">
              <span>{{scope.row.august.val}}</span>
              <div class="paiming-box"
                   :class="scope.row.august.order > 0 ? 'red-sanjiao' : 'green-sanjiao'"
                   v-if="scope.row.august.order != 0">{{scope.row.august.order}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          width="280"
          prop="september"
          label="9月"
          align="center">
          <template slot-scope="scope">
            <div class="sanjiao-box">
              <span>{{scope.row.september.val}}</span>
              <div class="paiming-box"
                   :class="scope.row.september.order > 0 ? 'red-sanjiao' : 'green-sanjiao'"
                   v-if="scope.row.september.order != 0">{{scope.row.september.order}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          width="280"
          prop="october"
          label="10月"
          align="center">
          <template slot-scope="scope">
            <div class="sanjiao-box">
              <span>{{scope.row.october.val}}</span>
              <div class="paiming-box"
                   :class="scope.row.october.order > 0 ? 'red-sanjiao' : 'green-sanjiao'"
                   v-if="scope.row.october.order != 0">{{scope.row.october.order}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          width="280"
          prop="november"
          label="11月"
          align="center">
          <template slot-scope="scope">
            <div class="sanjiao-box">
              <span>{{scope.row.november.val}}</span>
              <div class="paiming-box"
                   :class="scope.row.november.order > 0 ? 'red-sanjiao' : 'green-sanjiao'"
                   v-if="scope.row.november.order != 0">{{scope.row.november.order}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          width="280"
          prop="december"
          label="12月"
          align="center">
          <template slot-scope="scope">
            <div class="sanjiao-box">
              <span>{{scope.row.december.val}}</span>
              <div class="paiming-box"
                   :class="scope.row.december.order > 0 ? 'red-sanjiao' : 'green-sanjiao'"
                   v-if="scope.row.december.order != 0">{{scope.row.december.order}}</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>

<script>

    export default {
        name: "chengzhenXinzengJiuye",
        props: {
            tableData: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        data() {
            return {
                tableData: [{
                    shiqu:'全市',
                    date: '233322',
                    name: '4432',
                    address: '122'
                }, {
                    shiqu:'长安区',
                    date: '23322',
                    name: '12222',
                    address: '4445'
                }, {
                    shiqu:'桥西区',
                    date: '4432',
                    name: '455',
                    address: '5999'
                }, {
                    shiqu:'新华区',
                    date: '5632',
                    name: '145',
                    address: '624'
                }]

            }
        },
        mounted() {
        },
        methods: {
            handleheader(data) {
@@ -122,7 +230,6 @@
      background-color:$color-blue;
    }
    .el-table .el-table__body-wrapper tr{
      height: 0.265625rem  /* 68/256 */;
    }
    .el-table tr:nth-child(odd){
      background-color: #CEF2FF;
@@ -143,7 +250,9 @@
      font-size: $fontSize-28;
      color: $color-darkGrey;
      font-weight: 300;
      line-height: 1;
      line-height: 0.265625rem  /* 68/256 */;
      height: 0.265625rem  /* 68/256 */;
      padding-left: 0;
    }
    .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
      border-bottom:1Px solid $color-grey; /*no*/
@@ -151,8 +260,42 @@
    .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*/
    }
    .el-table .el-table__cell{
      padding:0;
    }
  }
</style>
<style scoped>

<style lang="scss" scoped>
  @import "../../../assets/css/base";
  .sanjiao-box{
    line-height: 0.265625rem  /* 68/256 */;
    position: relative;
    .paiming-box{
      display: block;
      color: $color-white;
      position: absolute;
      width: 0;
      height: 0;
      top: 0;
      left: 0;
      div{
        position: relative;
        left: 0px;
        top: -0.3125rem  /* -80/256 */;
        color: #fff;
        width: 0.1328125rem  /* 34/256 */;
      }
    }
    .red-sanjiao{
      border-top: 0.265625rem  /* 68/256 */ solid #FF0000;
      border-right: 0.265625rem  /* 68/256 */ solid transparent;
    }
    .green-sanjiao{
      border-top: 0.265625rem  /* 68/256 */ solid #3ABF21;
      border-right: 0.265625rem  /* 68/256 */ solid transparent;
    }
    .content{
      /*line-height: 0.265625rem  !* 68/256 *!;*/
    }
  }
</style>

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

@@ -180,7 +180,7 @@
        },
        mounted() {
          this.getLoanTable()
            this.getParkTable()
          this.getParkTable()
        },
        methods: {
            getLoanTable() {

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

@@ -1,24 +1,28 @@
<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"
          :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 +31,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()
            }
        }
    }