首页数据

付延余

2022-04-24 473bd88d37e20ce9724b7fdaa70e3cc2b963e066

首页数据

 src/api/index.js

@@ -7,3 +7,12 @@
export const getAdminIndex = params => {
    return getRequest('/getAdminIndex', params);
}


// 首页接口
export const getInsured = (params) => {
  return postRequest('/ybg/webservice/app/homepage/getInsured.do',params)
}
export const getInstitution = (params) => {
  return postRequest('/ybg/webservice/app/homepage/getInstitution.do',params)
}

 src/pages/show/index/index.vue

@@ -4,17 +4,17 @@
      <div class="yanglao-block">
        <img src="../../../assets/images/yanglao-icon1.png" alt="">
        <h1>城镇职工养老保险参保人数</h1>
        <h2><font class="bigger">277.7</font>万人</h2>
        <h2><font class="bigger">{{Insured.card}}</font>万人</h2>
      </div>
      <div class="yanglao-block">
        <img src="../../../assets/images/yanglao-icon2.png" alt="">
        <h1>城镇职工养老保险参保人数</h1>
        <h2><font class="bigger">277.8</font>万人</h2>
        <h2><font class="bigger">{{Insured.jumin}}</font>万人</h2>
      </div>
      <div class="yanglao-block">
        <img src="../../../assets/images/yanglao-icon3.png" alt="">
        <h1>城镇职工养老保险参保人数</h1>
        <h2><font class="bigger">277.8</font>万人</h2>
        <h2><font class="bigger">{{Insured.zhigong}}</font>万人</h2>
      </div>
      <div class="yanglao-block">
        <div class="yanglao-block-inside">
@@ -22,27 +22,27 @@
            <img src="../../../assets/images/yanglao-icon4.png" alt="">
            <div>
              <h1>全市事业单位</h1>
              <h2><font class="bigger">5505</font>家</h2>
              <h2><font class="bigger">{{ Institution.quanshi }}</font>家</h2>
            </div>
          </div>
          <div class="inside-right">
            <h1>在职人员</h1>
            <h2><font class="bigger">16.8</font>万人</h2>
            <h2><font class="bigger">{{ Institution.quanshiren }}</font>万人</h2>
          </div>
        </div>
        <div class="yanglao-block-inside2">
          <div class="inside-left2">
            <h1>市值事业单位</h1>
            <div class="danwei-box">
              <h2 class="rightMargin"><font class="bigger">513</font>家</h2>
              <h2 class="rightMargin"><font class="bigger">5133244</font>人</h2>
              <h2 class="rightMargin"><font class="bigger">{{ Institution.shizhi }}</font>家</h2>
              <h2 class="rightMargin"><font class="bigger">{{ Institution.shizhiren }}</font>人</h2>
            </div>
          </div>
          <div class="inside-left2">
            <h1>县（市、区）</h1>
            <div class="danwei-box">
              <h2 class="rightMargin"><font class="bigger">4992</font>家</h2>
              <h2 class="rightMargin"><font class="bigger">135380</font>人</h2>
              <h2 class="rightMargin"><font class="bigger">{{ Institution.xian }}</font>家</h2>
              <h2 class="rightMargin"><font class="bigger">{{ Institution.xianren }}</font>人</h2>
            </div>
          </div>
        </div>
@@ -727,7 +727,6 @@

          </div>
          <div class="shuju-echarts" id="gongshangBaoxianEcharts"></div>
        </div>></div>
        </div>

      </div>
@@ -737,11 +736,16 @@
<script>
  import echarts from "echarts/lib/echarts";
  import nowSize from "../../../libs/nowSize";
import {getInsured,getInstitution} from "@/api/index";

  export default {
      name: "index",
      data() {
          return {

      // 被保险人
      Insured:{},
      // 首页市直单位数据
      Institution:{}
          }
      },
      mounted() {
@@ -749,6 +753,8 @@
          this.chengzhenZhigongYanglaoEcharts()
          this.shiyeBaoxianEcharts()
          this.gongshangBaoxianEcharts()
    this.getInsured()
    this.getInstitution()
      },
      methods: {
          /*就业数据*/
@@ -1122,6 +1128,26 @@
              window.addEventListener('resize',function () {
                  myEchart.resize()
              })
    },
    // 查询首页养老保险参保人数，社保卡人数
    getInsured() {
      getInsured().then(res => {
        if(res.code === 1000) {
          this.Insured = res.obj
        }else{
          this.$message.error('获取信息失败')
        }
      })
    },
    // 查询首页市直单位数据接口
    getInstitution(){
      getInstitution().then(res=>{
        if(res.code === 1000){
          this.Institution = res.obj
        }else{
          this.$message.error('获取信息失败')
        }
      })
          }
      }
  };
@@ -1129,72 +1155,94 @@
<style lang="scss" scoped>
  @import "../../../assets/css/base";
  @import "../../../assets/css/mixin";

  .index-wrap{
    width: 100%;
    height: 100%;
    padding: 0 0.078125rem  /* 20/256 */;
  padding: 0 0.078125rem /* 20/256 */
;
    box-sizing: border-box;

    .index-line-box{
      width: 100%;
      display: flex;
      margin-top: 0.125rem  /* 32/256 */;
    margin-top: 0.125rem /* 32/256 */
  ;

      .yanglao-block{
        width: 2.3046875rem  /* 590/256 */;
        height: 0.8984375rem  /* 230/256 */;
      width: 2.3046875rem /* 590/256 */
    ;
      height: 0.8984375rem /* 230/256 */
    ;
        background:url("../../../assets/images/yanglao-block-bj.png") no-repeat center;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 0.078125rem  /* 20/256 */;
      margin: 0 0.078125rem /* 20/256 */
    ;
        position: relative;

        img{
          width: 0.3125rem  /* 80/256 */;
          height: 0.3125rem  /* 80/256 */;
        width: 0.3125rem /* 80/256 */
      ;
        height: 0.3125rem /* 80/256 */
      ;
        }

        h1{
          color: #fff;
          text-align: center;
          font-size: $fontSize-24;
          line-height: 1.3;
        }

        h2{
          color: #fff;
          font-size: $fontSize-20;
          line-height: 1.3;
          text-align: center;

          .bigger{
            font-size: $fontSize-48;
            color: $color-blue;
          }
        }

        .yanglao-block-inside{
          width: 100%;
          display: flex;

          .inside-left{
            display: flex;
            flex: 1;
            justify-content: right;
            margin-left: 0.15625rem  /* 40/256 */;
          margin-left: 0.15625rem /* 40/256 */
        ;
          }

          .inside-right{
            display: flex;
            flex-direction: column;
            flex: 1;
          }

          .inside-box-block{
            display: flex;
            width: 50%;
            justify-content: center;
            align-items: center;

            .line-center{
              display: flex;
              flex-direction: column;
              justify-content: center;

              h2{
                line-height: 1.2;
              }

              .small{
                font-size: $fontSize-24;
                color: $color-blue;
@@ -1202,27 +1250,35 @@
            }
          }
        }

        .chuangye-box{
          flex-wrap: wrap;
        }

        .yanglao-block-inside2{
          width: 100%;
          display: flex;
          margin-top: 0.0390625rem  /* 10/256 */;
        margin-top: 0.0390625rem /* 10/256 */
      ;

          .inside-left2{
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .danwei-box{
              display: flex;
              justify-content: center;

              .rightMargin{
                margin-right: 0.0390625rem  /* 10/256 */;
              margin-right: 0.0390625rem /* 10/256 */
            ;
                color: #fff;
                font-size: $fontSize-20;
                line-height: 1.3;
                text-align: center;

                .bigger{
                  font-size: $fontSize-32;
                }
@@ -1231,57 +1287,76 @@
          }
        }
      }

      .yanglao-block2{
        width: 2.3046875rem  /* 590/256 */;
        height: 0.8984375rem  /* 230/256 */;
      width: 2.3046875rem /* 590/256 */
    ;
      height: 0.8984375rem /* 230/256 */
    ;
        background:url("../../../assets/images/yanglao-block-bj.png") no-repeat center;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin: 0 0.078125rem  /* 20/256 */;
      margin: 0 0.078125rem /* 20/256 */
    ;

        .yaolao-box{
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          &:first-child{
            margin-left: 0.078125rem  /* 20/256 */;
          margin-left: 0.078125rem /* 20/256 */
        ;
          }
        }

        img{
          width: 0.3125rem  /* 80/256 */;
          height: 0.3125rem  /* 80/256 */;
        width: 0.3125rem /* 80/256 */
      ;
        height: 0.3125rem /* 80/256 */
      ;
        }

        h1{
          color: #fff;
          text-align: center;
          font-size: $fontSize-24;
          line-height: 1.3;
        }

        h2{
          color: #fff;
          font-size: $fontSize-20;
          line-height: 1.3;

          .bigger{
            font-size: $fontSize-48;
            color: $color-blue;
          }
        }
      }

      .fu-biaoti{
        position: absolute;
        left:0.0078125rem  /* 2/256 */;
        top:0.1171875rem  /* 30/256 */;
      left: 0.0078125rem /* 2/256 */
    ;
      top: 0.1171875rem /* 30/256 */
    ;
        background:url("../../../assets/images/fubiaoti-bj.png") no-repeat center;
        background-size: 100% 100%;
        width: 0.125rem  /* 32/256 */;
        height:0.65234375rem  /* 167/256 */;
      width: 0.125rem /* 32/256 */
    ;
      height: 0.65234375rem /* 167/256 */
    ;
        display: flex;
        align-items: center;
        justify-content: center;

        h1{
          font-size: $fontSize-20;
          color: $color-dark;
@@ -1289,63 +1364,90 @@
        }
      }
    }

    .index-line-box2{
      display: flex;
      margin-top: 0.125rem  /* 32/256 */;
    margin-top: 0.125rem /* 32/256 */
  ;

      .shu-ju-box{
        width: 4.765625rem  /* 1220/256 */;
        height: 1.6015625rem  /* 410/256 */;
      width: 4.765625rem /* 1220/256 */
    ;
      height: 1.6015625rem /* 410/256 */
    ;
        background: url("../../../assets/images/yanglao-block-big-bj.png") no-repeat center;
        background-size: 100% 100%;
        position: relative;
        margin: 0 0.078125rem  /* 20/256 */;
      margin: 0 0.078125rem /* 20/256 */
    ;
        display: flex;

        .shuju-title-box{
          position: absolute;
          left: 0.390625rem  /* 100/256 */;
        left: 0.390625rem /* 100/256 */
      ;
          top: 0;

          h1{
            font-size: $fontSize-32;
            color: $color-blue;
            position: relative;

            &:after{
              content: '';
              background: url("../../../assets/images/zhuangshi.png") no-repeat center;
              background-size: 100% 100%;
              width: 0.52734375rem  /* 135/256 */;
              height: 0.0625rem  /* 16/256 */;
            width: 0.52734375rem /* 135/256 */
          ;
            height: 0.0625rem /* 16/256 */
          ;
              position: absolute;
              left: 0.78125rem  /* 200/256 */;
              top: 0.046875rem  /* 12/256 */;
            left: 0.78125rem /* 200/256 */
          ;
            top: 0.046875rem /* 12/256 */
          ;
            }
          }
        }

        .shuju-main-box{
          width: 100%;
          padding: 0.234375rem  /* 60/256 */ 0.1171875rem  /* 30/256 */;
        padding: 0.234375rem /* 60/256 */
        0.1171875rem /* 30/256 */
      ;
          box-sizing: border-box;
          display: flex;

          .shuju-table{
            width: 3.1328125rem  /* 802/256 */;
            height: 1.2109375rem  /* 310/256 */;
          width: 3.1328125rem /* 802/256 */
        ;
          height: 1.2109375rem /* 310/256 */
        ;
          }
        }

        .shuju-table{
          width: 100%;
          display: flex;
          flex-direction: column;

          .shuju-table-line{
            width: 100%;
            display: flex;

            .biao-title{
              width: 1.328125rem  /* 340/256 */;
            width: 1.328125rem /* 340/256 */
          ;
            }

            .title-flex{
              width: 100%;
              display: flex;
            }

            .title{
              flex: 1;

              h1{
                font-size: $fontSize-26;
                color: $color-white;
@@ -1354,53 +1456,70 @@
            }

          }

          .shuju-scroll{
            max-height: 1.09375rem  /* 280/256 */;
          max-height: 1.09375rem /* 280/256 */
        ;
            @include overflow-y()
          }

          .shuju-table-line2{
            width: 100%;
            display: flex;
            padding: 0.0390625rem  /* 10/256 */ 0;
          padding: 0.0390625rem /* 10/256 */
          0;

            &:nth-child(odd) {
              background: rgba(81,210,255,0.10);
            }

            .title{
              flex: 1;

              h1{
                font-size: $fontSize-26;
                color: $color-white;
                text-align: center;
                line-height: 1.5;
              }

              .fontColor{
                color: $color-blue;
              }
            }

            .title-flex{
              width: 100%;
              display: flex;
            }

            .biao-title{
              width: 1.328125rem  /* 340/256 */;
            width: 1.328125rem /* 340/256 */
          ;

              h1{
                font-size: $fontSize-26;
                color: $color-white;
                text-align: right;
                line-height: 1.5;
              }

              .fontColor{
                color: $color-blue;
              }
            }
          }

          .shuju-bj-color{
            background: rgba(81,210,255,0.10);
          }
        }

        .shuju-echarts{
          width: 1.3671875rem  /* 350/256 */;
          height: 1.2109375rem  /* 310/256 */;
        width: 1.3671875rem /* 350/256 */
      ;
        height: 1.2109375rem /* 310/256 */
      ;
        }
      }
    }