工伤、失业保险接口

zhangxiaoxu123456

2022-04-26 388c2eeb0522a3dc928cffc5059e9f7da4c84ecb

工伤、失业保险接口

 src/api/index.js

@@ -50,3 +50,8 @@
export const getTownTable = (params) =>{
  return postRequest('/ybg/webservice/app/homepage/getTownTable.do',params)
}
//28.查询首页工伤、失业保险表格数据接口
export const getInsurTable = (params) => {
  return postRequest('/ybg/webservice/app/homepage/getInsurTable.do',params)
}


 src/pages/components/index/shiyeAndgongshangBaoxian.vue

New file
@@ -0,0 +1,300 @@
<template>
  <div class="shuju-table">
    <div class="shuju-table-line">
      <div class="biao-title"></div>
      <div class="title-flex">
        <div class="title" v-for="(item,index) in shiyeHeardData" :key="index">
          <h1>{{item.name}}</h1>
        </div>
        <!--<div class="title">
          <h1>本年同比</h1>
        </div>
        <div class="title">
          <h1>同比</h1>
        </div>
        <div class="title">
          <h1>上月</h1>
        </div>
        <div class="title">
          <h1>环比</h1>
        </div>-->
      </div>
    </div>
    <div class="shuju-scroll">
      <div class="shuju-table-line2" v-for="(item, index) in shiyeTable" :key="index">
        <div class="biao-title">
          <h1>{{item.item}}</h1>
        </div>
        <div class="title-flex">
          <div class="title" v-for="(e,i) in item.dataList" :key="i">
            <h1 :class="[e.flag && e.flag == 'up' ? 'fontColorBlue' : (e.flag && e.flag == 'down' ? 'fontColorRed' : '')]">{{e.val}}</h1>
          </div>
          <!--<div class="title">
            <h1>128417</h1>
          </div>
          <div class="title">
            <h1 class="fontColor">111.2%</h1>
          </div>
          <div class="title">
            <h1>125000</h1>
          </div>
          <div class="title">
            <h1>125000</h1>
          </div>-->
        </div>
      </div>
      <!--<div class="shuju-table-line2">
        <div class="biao-title">
          <h1>收入（亿元）</h1>
        </div>
        <div class="title-flex">
          <div class="title">
            <h1>138957</h1>
          </div>
          <div class="title">
            <h1>128417</h1>
          </div>
          <div class="title">
            <h1 class="fontColor">111.2%</h1>
          </div>
          <div class="title">
            <h1>125000</h1>
          </div>
          <div class="title">
            <h1>125000</h1>
          </div>
        </div>
      </div>
      <div class="shuju-table-line2">
        <div class="biao-title">
          <h1>支出（亿元）</h1>
        </div>
        <div class="title-flex">
          <div class="title">
            <h1>138957</h1>
          </div>
          <div class="title">
            <h1>128417</h1>
          </div>
          <div class="title">
            <h1 class="fontColor">111.2%</h1>
          </div>
          <div class="title">
            <h1>125000</h1>
          </div>
          <div class="title">
            <h1>125000</h1>
          </div>
        </div>
      </div>
      <div class="shuju-table-line2">
        <div class="biao-title">
          <h1>本月结余（亿元）</h1>
        </div>
        <div class="title-flex">
          <div class="title">
            <h1>138957</h1>
          </div>
          <div class="title">
            <h1>128417</h1>
          </div>
          <div class="title">
            <h1 class="fontColor">111.2%</h1>
          </div>
          <div class="title">
            <h1>125000</h1>
          </div>
          <div class="title">
            <h1>125000</h1>
          </div>
        </div>
      </div>
      <div class="shuju-table-line2">
        <div class="biao-title">
          <h1>累计结余（亿元）</h1>
        </div>
        <div class="title-flex">
          <div class="title">
            <h1>138957</h1>
          </div>
          <div class="title">
            <h1>128417</h1>
          </div>
          <div class="title">
            <h1 class="fontColor">111.2%</h1>
          </div>
          <div class="title">
            <h1>125000</h1>
          </div>
          <div class="title">
            <h1>125000</h1>
          </div>
        </div>
      </div>-->
    </div>

  </div>
</template>

<script>
  import {getInsurTable} from '@/api/index'
    export default {
        name: "shiyeAndgongshangBaoxian",
        props: {
            typeString: {
                type: String,
                default: '4'
            }
        },
        data() {
          return {
              shiyeHeardData: [],
              shiyeTable: []
          }
        },
        mounted() {
            this.getInsurTable()
        },
        methods: {
            getInsurTable() {
                getInsurTable({type: this.typeString}).then(res => {
                    if(res.code === 1000) {
                        this.shiyeTable = res.list
                        this.shiyeTable.forEach((item,index) => {
                            if(index == 0) {
                                this.shiyeHeardData = item.dataList
                                console.log(this.shiyeHeardData,'this.shiyeHeardData')
                            }
                        })
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
  @import "../../../assets/css/base";
  @import "../../../assets/css/mixin";
  .shuju-table {
    width: 3.1328125rem /* 802/256 */;
    height: 1.2109375rem /* 310/256 */;
    display: flex;
    flex-direction: column;

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

      .biao-title {
        width: 0.859375rem /* 220/256 */;
      }

      .title-flex {
        width: calc(100% - 0.859375rem);
        display: flex;
      }

      .title {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;

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

    }

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

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

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

      .title {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;

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

        .fontColorBlue {
          color: $color-blue;
        }
        .fontColorRed {
          color: #FF3939;
        }
      }

      .title-flex {
        width: calc(100% - 0.859375rem);
        display: flex;
      }

      .biao-title {
        width: 0.859375rem /* 220/256 */
      ;

        h1 {
          font-size: $fontSize-26;
          color: $color-white;
          text-align: right;
          line-height: 1.5;
          @include ellipsis()
        }

        .fontColor {
          color: $color-blue;
        }
      }
    }
    // 城市职工养老第2，3条数据
    .chengzhen_scroll {
      &:nth-of-type(2) {
        background: rgba(81, 210, 255, 0.10);

        h1 {
          font-size: 24px;
          line-height: 1;
          color: #999999;
        }
      }

      &:nth-of-type(3) {
        background: rgba(81, 210, 255, 0.10);

        h1 {
          font-size: 24px;
          line-height: 1;
          color: #999999;

        }
      }
    }

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

 src/pages/show/index/index.vue

@@ -454,142 +454,7 @@
          <h1>失业保险</h1>
        </div>
        <div class="shuju-main-box">
          <div class="shuju-table">
            <div class="shuju-table-line">
              <div class="biao-title"></div>
              <div class="title-flex">
                <div class="title">
                  <h1>本月</h1>
                </div>
                <div class="title">
                  <h1>本年同期</h1>
                </div>
                <div class="title">
                  <h1>同比</h1>
                </div>
                <div class="title">
                  <h1>上月</h1>
                </div>
                <div class="title">
                  <h1>环比</h1>
                </div>
              </div>
            </div>
            <div class="shuju-scroll">
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>人数（万人）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>138957</h1>
                  </div>
                  <div class="title">
                    <h1>128417</h1>
                  </div>
                  <div class="title">
                    <h1 class="fontColor">111.2%</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                </div>

              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>收入（亿元）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>138957</h1>
                  </div>
                  <div class="title">
                    <h1>128417</h1>
                  </div>
                  <div class="title">
                    <h1 class="fontColor">111.2%</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>支出（亿元）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>138957</h1>
                  </div>
                  <div class="title">
                    <h1>128417</h1>
                  </div>
                  <div class="title">
                    <h1 class="fontColor">111.2%</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>本月结余（亿元）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>138957</h1>
                  </div>
                  <div class="title">
                    <h1>128417</h1>
                  </div>
                  <div class="title">
                    <h1 class="fontColor">111.2%</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>累计结余（亿元）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>138957</h1>
                  </div>
                  <div class="title">
                    <h1>128417</h1>
                  </div>
                  <div class="title">
                    <h1 class="fontColor">111.2%</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                </div>
              </div>
            </div>

          </div>
          <shiyeAndgongshangBaoxian typeString="4"></shiyeAndgongshangBaoxian>
          <div class="shuju-echarts" id="shiyeBaoxianEcharts"></div>
        </div>

@@ -599,141 +464,7 @@
          <h1>工伤保险</h1>
        </div>
        <div class="shuju-main-box">
          <div class="shuju-table">
            <div class="shuju-table-line">
              <div class="biao-title"></div>
              <div class="title-flex">
                <div class="title">
                  <h1>本月</h1>
                </div>
                <div class="title">
                  <h1>本年同比</h1>
                </div>
                <div class="title">
                  <h1>同比</h1>
                </div>
                <div class="title">
                  <h1>上月</h1>
                </div>
                <div class="title">
                  <h1>环比</h1>
                </div>
              </div>
            </div>
            <div class="shuju-scroll">
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>人数（万人）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>138957</h1>
                  </div>
                  <div class="title">
                    <h1>128417</h1>
                  </div>
                  <div class="title">
                    <h1 class="fontColor">111.2%</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>收入（亿元）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>138957</h1>
                  </div>
                  <div class="title">
                    <h1>128417</h1>
                  </div>
                  <div class="title">
                    <h1 class="fontColor">111.2%</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>支出（亿元）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>138957</h1>
                  </div>
                  <div class="title">
                    <h1>128417</h1>
                  </div>
                  <div class="title">
                    <h1 class="fontColor">111.2%</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>本月结余（亿元）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>138957</h1>
                  </div>
                  <div class="title">
                    <h1>128417</h1>
                  </div>
                  <div class="title">
                    <h1 class="fontColor">111.2%</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>累计结余（亿元）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>138957</h1>
                  </div>
                  <div class="title">
                    <h1>128417</h1>
                  </div>
                  <div class="title">
                    <h1 class="fontColor">111.2%</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                </div>
              </div>
            </div>

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

@@ -744,6 +475,7 @@
<script>
import echarts from "echarts/lib/echarts";
import nowSize from "../../../libs/nowSize";
import shiyeAndgongshangBaoxian from "../../components/index/shiyeAndgongshangBaoxian";
import {
  getInsured,
  getInstitution,
@@ -754,11 +486,14 @@
  getLabourTable,
  getLabourChart,
  getInsuranceChart,
  getTownTable
  getTownTable,
} from "@/api/index";

export default {
  name: "index",
  components: {
      shiyeAndgongshangBaoxian
  },
  data() {
    return {
      // 被保险人
@@ -805,7 +540,9 @@
        jieyu: []
      },
      // 27. 查询首页城镇职工养老表格数据接口
      TownTable: []
      TownTable: [],
      // 28.失业保险
        type:'',
    }
  },
  mounted() {
@@ -821,8 +558,10 @@
    this.getPersonnel()
    this.getLabourTable()
    this.getLabourChart()
    this.getInsuranceChart(),
    this.getInsuranceChart()
      this.getTownTable()
    // this.getshiyeTable()
    // this.getGongshangTable()
  },
  filters: {
    dataFilter(type) {
@@ -1327,7 +1066,7 @@
          this.TownTable = res.list
        }
      })
    }
    },
  }
};
</script>
@@ -1597,16 +1336,11 @@
        box-sizing: border-box;
        display: flex;

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

      .shuju-table {
        width: 100%;
        width: 3.1328125rem /* 802/256 */;
        height: 1.2109375rem /* 310/256 */;
        display: flex;
        flex-direction: column;

@@ -1615,8 +1349,7 @@
          display: flex;

          .biao-title {
            width: 0.859375rem /* 220/256 */
          ;
            width: 0.859375rem /* 220/256 */;
          }

          .title-flex {
@@ -1628,6 +1361,7 @@
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;

            h1 {
              font-size: $fontSize-26;
@@ -1658,6 +1392,7 @@
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;

            h1 {
              font-size: $fontSize-26;
@@ -1666,9 +1401,12 @@
              line-height: 1.5;
            }

            .fontColor {
            .fontColorBlue {
              color: $color-blue;
            }
            .fontColorRed {
              color: #FF3939;
            }
          }

          .title-flex {