其他业务

付延余

2022-04-12 6f87c0bcb9dd11bcef2370e3262cf803b76ed39c

其他业务

 src/pages/components/showIndexTitle.vue

@@ -33,7 +33,7 @@
            <h1>劳动关系</h1>
          </div>
        </el-menu-item>
        <el-menu-item>
        <el-menu-item index="/otherBusiness">
          <div class="showIndex-block">
            <h1>其它业务</h1>
          </div>

 src/pages/show/otherBusiness/OtherBusiness.vue

New file
@@ -0,0 +1,114 @@
<template>
  <div class="otherBusiness-wrap">
    <div class="otherB-menu-left">
      <el-menu :default-active="$route.path" router mode="vertical">
        <el-menu-item index="/otherB-PeopleJunShouRu">
          <div class="menu-left-block">
            <h1>居民人均</h1>
          </div>
        </el-menu-item>
        <el-menu-item index="/otherB-GongGuTuoPin">
          <div class="menu-left-block">
            <h1>巩固脱贫成果</h1>
          </div>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="otherb-menu-right">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "jiuyeAndChuangye"
}
</script>

<style lang="scss">
.otherB-menu-left {
  .el-menu {
    background-color: transparent;
    border-right: none;
  }

  .el-menu-item, .el-submenu__title {
    height: 0.3125rem /* 80/256 */
  ;
    margin: 0.1171875rem /* 30/256 */
    0;
  }

  .el-menu-item {
    background: url("../../../assets/images/jiuye-menu-normal.png") no-repeat center;
    background-size: 100% 100%;
    width: 0.75rem /* 192/256 */
  ;
    height: 0.3125rem /* 80/256 */
  ;
    display: flex;
    justify-content: center;
    padding-left: 0;
  }

  .el-menu-item.is-active {
    background: url("../../../assets/images/jiuye-menu-active.png") no-repeat center;
    background-size: 100% 100%;
    width: 0.75rem /* 192/256 */
  ;
    height: 0.3125rem /* 80/256 */
  ;
  }
}

</style>
<style lang="scss" scoped>
@import "../../../assets/css/base";
@import "../../../assets/css/mixin";

.otherBusiness-wrap {
  width: 100%;
  padding: 0.078125rem /* 20/256 */
;
  box-sizing: border-box;
  display: flex;

  .otherB-menu-left {
    width: 0.9375rem /* 240/256 */
  ;
    height: 5.2734375rem /* 1350/256 */
  ;
    background: url("../../../assets/images/jiuye-menu-bj.png") no-repeat center;
    background-size: 100% 100%;
    padding: 0.15625rem /* 40/256 */
    0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;

    .menu-left-block {
      width: 100%;
      display: flex;
      justify-content: center;

      h1 {
        font-size: $fontSize-24;
        color: $color-blue;
        text-align: center;
        line-height: 0.3125rem /* 80/256 */
      ;
      }
    }
  }
  .otherb-menu-right {
    flex: 1;
    padding: 0 0.078125rem /* 20/256 */
  ;
    box-sizing: border-box;
    height: 5.27344rem;
    @include overflow-y()
  }
}

</style>

 src/pages/show/otherBusiness/otherBusinessChild/OtherB_GongGuTuoPin.vue

New file
@@ -0,0 +1,320 @@
<template>
  <div class="OtherB_GongGuTuoPin--wrap">
    <!--第一个表格-->
    <div class="OtherB-Ggtp__table">
      <h1>巩固脱贫成果情况（就业帮扶）</h1>
      <el-table
        :data="table_jiuye"
        style="width: 100%"
      >
        <el-table-column
          label="全市脱贫劳动力就业">
          <el-table-column
            prop="shengdingrenwu1"
            label="省定任务 （万人）"
          >
          </el-table-column>
          <el-table-column
            prop="shijiwancheng1"
            label="实际完成 （万）"
          >
          </el-table-column>
          <el-table-column
            prop="shijiwanchenglv1"
            label="实际完成率"
          >
          </el-table-column>
        </el-table-column>
        <el-table-column label="易地扶贫搬迁脱贫人口就业">
          <el-table-column
            prop="shengdingrenwu1"
            label="省定任务 （万人）"
          >
          </el-table-column>
          <el-table-column
            prop="shijiwancheng1"
            label="实际完成 （万）"
          >
          </el-table-column>
          <el-table-column
            prop="shijiwanchenglv1"
            label="实际完成率"
          >
          </el-table-column>
        </el-table-column>
        <el-table-column label="就业帮扶车间">
          <el-table-column
            prop="rendingshuliang"
            label="认定数量  （家）"
          >
          </el-table-column>
          <el-table-column
            prop="xinatuopin"
            label="吸纳脱贫劳动力  （人）"
          >
          </el-table-column>
          <el-table-column
            prop="yichixiangxina"
            label="一次性吸纳就业补贴发放  （万元）"
          >
          </el-table-column>
        </el-table-column>
        <el-table-column label="返乡入乡创业">
          <el-table-column
            prop="jianchengchuangye"
            label="建成创业 孵化基地 （家）"
          >
          </el-table-column>
          <el-table-column
            prop="ruzhu"
            label="入驻 （户）"
          >
          </el-table-column>
          <el-table-column
            prop="daidongjiuye"
            label="带动就业 （人）"
          >
          </el-table-column>
        </el-table-column>
        <el-table-column label="地址">
          <el-table-column
            prop="kaifagongyi"
            label="开发公益岗位 （类）"
          >
          </el-table-column>
          <el-table-column
            prop="anzhirenyuan"
            label="安置人员 （万人）"
          >
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <!--第二个表格-->
    <div class="OtherB-Ggtp__table">
      <h1>巩固脱贫成果情况（ 社保兜底）</h1>
      <el-table :data="table_shebao"
                style="width: 100%">
        <el-table-column
          label="代缴城乡居民养老保险费">
          <el-table-column
            prop="renshu"
            label="人数 （万人）"
          >
          </el-table-column>
          <el-table-column
            prop="money"
            label="1597 （万元）"
          >
          </el-table-column>
        </el-table-column>
        <el-table-column
          label="60周岁以上的领取待遇">
          <el-table-column
            prop="renshu1"
            label="人数 （万人）"
          >
          </el-table-column>
          <el-table-column
            prop="lingqulv"
            label="领取率 （万）"
          >
          </el-table-column>
          <el-table-column
            prop="fafangxu"
            label="发放率"
          >
          </el-table-column>
        </el-table-column>
        <el-table-column
          prop="kunnanrenyuanCanbao"
          label="困难人员参保率"
        >
        </el-table-column>
        <el-table-column
          prop="kunnanrenyuanDaijiao"
          label="困难人员代缴率"
        >
        </el-table-column>
      </el-table>
    </div>
    <div class="OtherB-Ggtp__table">
      <h1>巩固脱贫成果情况（人才扶持）</h1>
      <el-table :data="table_rencai" style="width:100%">
        <el-table-column
          label="乡镇事业单位工作人员招聘">
          <el-table-column
            prop="zhaopinNum"
            label="招聘人数 （人）"
          >
          </el-table-column>
          <el-table-column
            prop="sixtyfupinrenwu"
            label="16个扶贫任务县 （人）"
          >
          </el-table-column>
          <el-table-column
            prop="four"
            label="其中4个重点帮扶县 （人）"
          >
          </el-table-column>
        </el-table-column>
        <el-table-column label="已挂牌运行的专家服务 基层示范基地 （个）" prop="yiguapai"></el-table-column>
        <el-table-column
          label="“三支一扶”招募情况">
          <el-table-column
            prop="zhaomuzhongshu"
            label="招募总数 （人）"
          >
          </el-table-column>
          <el-table-column
            prop="sixty1"
            label="16个扶贫任务县 （人）"
          >
          </el-table-column>
          <el-table-column
            prop="four1"
            label="其中4个重点帮扶县 （人）"
          >
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "OtherB_GongGuTuoPin",
  data() {
    return {
      table_jiuye: [
        {
          shengdingrenwu: '7.27',
          shijiwancheng: '8.13',
          shijiwanchenglv: '108.9%',
          shengdingrenwu1: '700',
          shijiwancheng1: '861',
          shijiwanchenglv1: '123%',
          rendingshuliang: 22,
          xinatuopin: 279,
          yichixiangxina: 14.9,
          jianchengchuangye: 38,
          ruzhu: 2922,
          daidongjiuye: 5589,
          kaifagongyi: 7,
          anzhirenyuan: 1.4
        }
      ],
      table_shebao: [
        {
          renshu: '15.97',
          money: 1587,
          renshu1: 12.53,
          lingqulv: '100%',
          fafangxu: '100%',
          kunnanrenyuanCanbao: '100%',
          kunnanrenyuanDaijiao: '100%'
        }
      ],
      table_rencai: [
        {
          zhaopinNum:754,
          sixtyfupinrenwu:647,
          four:158,
          yiguapai:17,
          zhaomuzhongshu:100,
          sixty1:86,
          four1:31
        }
      ]
    }
  }
}
</script>
<style lang="scss">
@import "../../../../assets/css/base";

.OtherB-Ggtp__table {
  width: 100%;
  //height: calc(100% - 0.078125rem /* 20/256 */);
  margin-top: 0.078125rem /* 20/256 */
;

  .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: #CEF2FF;
  }

  .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";

.OtherB_GongGuTuoPin--wrap {
  width: 100%;
  height: calc(100% - 0.078125rem /* 20/256 */
  );

  .OtherB-Ggtp__table {
    margin-top: 0.078125rem /* 20/256 */
  ;

    h1 {
      font-size: $fontSize-30;
      color: $color-white;
      text-align: center;
      line-height: 2;
    }
  }
}
</style>

 src/pages/show/otherBusiness/otherBusinessChild/OtherB_PeopleJunShouRu.vue

New file
@@ -0,0 +1,209 @@
<template>
  <div class="OtherB_PerpleJunShouRu__wrap">
    <div class="OtherB-PeopleJunShouRu__table">
      <h1>全市居民人均可支配收入情况</h1>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="year"
          label="年份">
        </el-table-column>
        <el-table-column
          label="国民人均可支配收入">
          <el-table-column
            prop="shouru"
            label="收入（元）"
          >
          </el-table-column>
          <el-table-column
            prop="quanshengpaiwei"
            label="全省排名"
          >
          </el-table-column>
          <el-table-column
            prop="zengzhang"
            label="增长"
          >
          </el-table-column>
          <el-table-column
            prop="quanshengpaiwei1"
            label="全省排位"
          >
          </el-table-column>
        </el-table-column>
        <el-table-column label="城镇居民人均可支配收入">
          <el-table-column
            prop="shouru1"
            label="收入（元）"
          >
          </el-table-column>
          <el-table-column
            prop="quanshengpaiwei2"
            label="全省排位"
          >
          </el-table-column>
          <el-table-column
            prop="zengzhang1"
            label="增长"
          >
          </el-table-column>
          <el-table-column
            prop="quanshengpaiwei3"
            label="全省排位"
          >
          </el-table-column>
        </el-table-column>
        <el-table-column label="农村居民人均可支配收入">
          <el-table-column
            prop="shouru2"
            label="收入（元）"
          >
          </el-table-column>
          <el-table-column
            prop="quashengpaiwei4"
            label="全省排位"
          >
          </el-table-column>
          <el-table-column
            prop="zengzhang2"
            label="增长 "
          >
          </el-table-column>
          <el-table-column
            prop="quanshengpaiwei5"
            label="全省排位"
          >
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "OtherB_PerpleJunShouRu",
  data() {
    return {
      tableData: [{
        year: 2020,
        shouru: 30955,
        quanshengpaiwei: 3,
        zengzhang: '5.5%',
        quanshengpaiwei1: 9,
        shouru1: 40243,
        quanshengpaiwei2: 3,
        zengzhang1: '4.4%',
        quanshengpaiwei3: 6,
        shouru2: 40243,
        quashengpaiwei4: 3,
        zengzhang2: '4.4%',
        quanshengpaiwei5: 6
      }, {
        year: 2020,
        shouru: 30955,
        quanshengpaiwei: 3,
        zengzhang: '5.5%',
        quanshengpaiwei1: 9,
        shouru1: 40243,
        quanshengpaiwei2: 3,
        zengzhang1: '4.4%',
        quanshengpaiwei3: 6,
        shouru2: 40243,
        quashengpaiwei4: 3,
        zengzhang2: '4.4%',
        quanshengpaiwei5: 6
      }]
    }
  }
}
</script>

<style lang="scss">
@import "../../../../assets/css/base";

.OtherB-PeopleJunShouRu__table {
  width: 100%;
  height: calc(100% - 0.078125rem /* 20/256 */
  );
  margin-top: 0.078125rem /* 20/256 */
;

  .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: #CEF2FF;
  }

  .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";

.OtherB_PerpleJunShouRu__wrap {
  width: 100%;
  height: calc(100% - 0.078125rem /* 20/256 */
  );

  .OtherB-PeopleJunShouRu__table {
    margin-top: 0.078125rem /* 20/256 */
  ;

    h1 {
      font-size: $fontSize-30;
      color: $color-white;
      text-align: center;
      line-height: 2;
    }
  }
}
</style>

 src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoShouzhiZongbiao.vue

 src/router/router.js

@@ -2,6 +2,8 @@
import showHome from "../pages/show/main/showHome";
import jiuyeAndChuangye from "../pages/show/jiuyeAndChuangye/jiuyeAndChuangye";
import shehuiBaozhang from "../pages/show/shehuiBaozhang/shehuiBaozhang";
import OtherBusiness from '../pages/show/otherBusiness/OtherBusiness'

const indexRouter = {
  path: "/",
  name: "index",
@@ -103,6 +105,33 @@
      ]
    },
    {
      path: "/otherBusiness",
      component: OtherBusiness,
      meta: {title: "其他业务"},
      redirect: "/otherB-PeopleJunShouRu",
      name: "OtherBusiness",
      children: [
        {
          path: "/otherB-PeopleJunShouRu",
          meta: {title: "居民人居收入、可支配收入"},
          name: "otherB-PeopleJunShouRu",
          component: () =>
            import(
              "@/pages/show/otherBusiness/otherBusinessChild/OtherB_PeopleJunShouRu.vue"
              )
        },
        {
          path: "/otherB-GongGuTuoPin",
          meta: {title: "居民人居收入、可支配收入"},
          name: "otherB-GongGuTuoPin",
          component: () =>
            import(
              "@/pages/show/otherBusiness/otherBusinessChild/OtherB_GongGuTuoPin.vue"
              )
        }
      ]
    },
    {
      path: "/businessPolicy",
      meta: { title: "营商政策" },
      name: "businessPolicy",