zhangxiaoxu123456
2022-04-26 388c2eeb0522a3dc928cffc5059e9f7da4c84ecb
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">{{Insured.card}}</font>万人</h2>
        <h2><font class="bigger">{{ Insured.zhigong }}</font>万人</h2>
      </div>
      <div class="yanglao-block">
        <img src="../../../assets/images/yanglao-icon2.png" alt="">
        <h1>城镇职工养老保险参保人数</h1>
        <h2><font class="bigger">{{Insured.jumin}}</font>万人</h2>
        <h1>城乡居民养老保险参保人数</h1>
        <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">{{Insured.zhigong}}</font>万人</h2>
        <h1>社会保障卡持卡人数</h1>
        <h2><font class="bigger">{{ Insured.card }}</font>万人</h2>
      </div>
      <div class="yanglao-block">
        <div class="yanglao-block-inside">
@@ -53,12 +53,12 @@
        <div class="yaolao-box">
          <img src="../../../assets/images/yanglao-icon5.png" alt="">
          <h1>城镇居民人均可支配</h1>
          <h2><font class="bigger">27721</font>元</h2>
          <h2><font class="bigger">{{ Income.chengzhen }}</font>元</h2>
        </div>
        <div class="yaolao-box">
          <img src="../../../assets/images/yanglao-icon6.png" alt="">
          <h1>农村居民人均可支配</h1>
          <h2><font class="bigger">18676</font>元</h2>
          <h2><font class="bigger">{{ Income.nongcun }}</font>元</h2>
        </div>
        <div class="fu-biaoti">
          <h1>居民收入</h1>
@@ -70,27 +70,27 @@
            <img src="../../../assets/images/yanglao-icon7.png" alt="">
            <div>
              <h1>欠薪线索总计</h1>
              <h2><font class="bigger">32505</font>条</h2>
              <h2><font class="bigger">{{ Migrant.zongji }}</font>条</h2>
            </div>
          </div>
          <div class="inside-right">
            <h1>办结率</h1>
            <h2><font class="bigger">96.8</font>%</h2>
            <h2><font class="bigger">{{ Migrant.zbanjie }}</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">15132</font>条</h2>
              <h2 class="rightMargin"><font class="bigger">98.7</font>%</h2>
              <h2 class="rightMargin"><font class="bigger">{{ Migrant.quanguo }}</font>条</h2>
              <h2 class="rightMargin"><font class="bigger">{{ Migrant.qbanjie }}</font>%</h2>
            </div>
          </div>
          <div class="inside-left2">
            <h1>市级欠薪线索</h1>
            <div class="danwei-box">
              <h2 class="rightMargin"><font class="bigger">14992</font>条</h2>
              <h2 class="rightMargin"><font class="bigger">98.6</font>%</h2>
              <h2 class="rightMargin"><font class="bigger">{{ Migrant.shiji }}</font>条</h2>
              <h2 class="rightMargin"><font class="bigger">{{ Migrant.sbanjie }}</font>%</h2>
            </div>
          </div>
        </div>
@@ -104,28 +104,28 @@
            <img src="../../../assets/images/yanglao-icon8.png" alt="">
            <div>
              <h1>放贷笔数</h1>
              <h2><font class="bigger">32505</font>笔</h2>
              <h2><font class="bigger">{{ Loan.loanNums }}</font>笔</h2>
            </div>
          </div>
          <div class="inside-box-block">
            <img src="../../../assets/images/yanglao-icon9.png" alt="">
            <div>
              <h1>放贷金额</h1>
              <h2><font class="bigger">32505</font>亿元</h2>
              <h2><font class="bigger">{{ Loan.loanAmount }}</font>亿元</h2>
            </div>
          </div>
          <div class="inside-box-block">
            <img src="../../../assets/images/yanglao-icon10.png" alt="">
            <div>
              <h1>扶持自主创业</h1>
              <h2><font class="bigger">32505</font>人</h2>
              <h2><font class="bigger">{{ Loan.supportNums }}</font>人</h2>
            </div>
          </div>
          <div class="inside-box-block">
            <img src="../../../assets/images/yanglao-icon11.png" alt="">
            <div>
              <h1>带动就业</h1>
              <h2><font class="bigger">32505</font>人</h2>
              <h2><font class="bigger">{{ Loan.addjobNums }}</font>人</h2>
            </div>
          </div>
        </div>
@@ -139,28 +139,28 @@
            <img src="../../../assets/images/yanglao-icon12.png" alt="">
            <div>
              <h1>专业技术人才</h1>
              <h2><font class="bigger">50.8</font>万</h2>
              <h2><font class="bigger">{{ Personnel.zhuan }}</font>万</h2>
            </div>
          </div>
          <div class="inside-box-block">
            <img src="../../../assets/images/yanglao-icon13.png" alt="">
            <div class="line-center">
              <h2>A卡:<font class="small">835</font>人</h2>
              <h2>B卡:<font class="small">32505</font>人</h2>
              <h2>A卡:<font class="small">{{ Personnel.personA }}</font>人</h2>
              <h2>B卡:<font class="small">{{ Personnel.personB }}</font>人</h2>
            </div>
          </div>
          <div class="inside-box-block">
            <img src="../../../assets/images/yanglao-icon14.png" alt="">
            <div>
              <h1>享受特殊津贴</h1>
              <h2><font class="bigger">264</font>人</h2>
              <h2><font class="bigger">{{ Personnel.jintie }}</font>人</h2>
            </div>
          </div>
          <div class="inside-box-block">
            <img src="../../../assets/images/yanglao-icon15.png" alt="">
            <div>
              <h1>高技能人才</h1>
              <h2><font class="bigger">25.2</font>万人</h2>
              <h2><font class="bigger">{{ Personnel.gao }}</font>万人</h2>
            </div>
          </div>
        </div>
@@ -195,110 +195,118 @@
              </div>
            </div>
            <div class="shuju-scroll">
              <div class="shuju-table-line2">
              <div class="shuju-table-line2" v-for="(item,index) in LabourTable" :key="index">
                <div class="biao-title">
                  <h1>城镇新增就业(人)</h1>
                  <el-tooltip placement="top">
                    <div slot="content">
                      <h1>{{ item.dataType | dataFilter }}</h1>
                    </div>
                    <template>
                      <div class="content">
                        <h1>{{ item.dataType | dataFilter }}</h1>
                      </div>
                    </template>
                  </el-tooltip>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>138957</h1>
                    <h1>{{ item.monthData }}</h1>
                  </div>
                  <div class="title">
                    <h1>128417</h1>
                    <h1>{{ item.yearData }}</h1>
                  </div>
                  <div class="title">
                    <h1 class="fontColor">111.2%</h1>
                    <h1 class="fontColor">{{ item.finishRate }}</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                    <h1>{{ item.plan }}</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>
              <!--              <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>
              </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>
                            </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>
              </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>
              </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>
                            </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>
                            </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>
              </div>
                            </div>-->
            </div>
          </div>
          <div class="shuju-echarts" id="jiuyeshujuEcharts"></div>
        </div>
      </div>
      <div class="shu-ju-box">
        <div class="shuju-title-box">
@@ -321,118 +329,118 @@
              </div>
            </div>
            <div class="shuju-scroll">
              <div class="shuju-table-line2">
              <div class="shuju-table-line2 chengzhen_scroll" v-for="(item,index) in TownTable" :key="index">
                <div class="biao-title">
                  <h1>人数(万人)</h1>
                  <h1>{{ item.name }}</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>277.8</h1>
                    <h1>{{ item.total }}</h1>
                  </div>
                  <div class="title">
                    <h1>35.5</h1>
                    <h1>{{ item.office }}</h1>
                  </div>
                  <div class="title">
                    <h1>242.3</h1>
                    <h1>{{ item.enterprise }}</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2 shuju-bj-color">
                <div class="biao-title">
                  <h1>在职(万人)</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>217.8</h1>
                  </div>
                  <div class="title">
                    <h1>13.5</h1>
                  </div>
                  <div class="title">
                    <h1>142.3</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>离退休(万人)</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>23.8</h1>
                  </div>
                  <div class="title">
                    <h1>16.5</h1>
                  </div>
                  <div class="title">
                    <h1>52.3</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>供养比</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>3.8</h1>
                  </div>
                  <div class="title">
                    <h1>2.5</h1>
                  </div>
                  <div class="title">
                    <h1>1.3</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>收入(亿元)</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>233.8</h1>
                  </div>
                  <div class="title">
                    <h1>24.5</h1>
                  </div>
                  <div class="title">
                    <h1>341.3</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>支出(亿元)</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>533.8</h1>
                  </div>
                  <div class="title">
                    <h1>84.5</h1>
                  </div>
                  <div class="title">
                    <h1>541.3</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>结余(亿元)</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>33.8</h1>
                  </div>
                  <div class="title">
                    <h1>34.5</h1>
                  </div>
                  <div class="title">
                    <h1>341.3</h1>
                  </div>
                </div>
              </div>
              <!--              <div class="shuju-table-line2 shuju-bj-color">-->
              <!--                <div class="biao-title">-->
              <!--                  <h1>在职(万人)</h1>-->
              <!--                </div>-->
              <!--                <div class="title-flex">-->
              <!--                  <div class="title">-->
              <!--                    <h1>217.8</h1>-->
              <!--                  </div>-->
              <!--                  <div class="title">-->
              <!--                    <h1>13.5</h1>-->
              <!--                  </div>-->
              <!--                  <div class="title">-->
              <!--                    <h1>142.3</h1>-->
              <!--                  </div>-->
              <!--                </div>-->
              <!--              </div>-->
              <!--              <div class="shuju-table-line2">-->
              <!--                <div class="biao-title">-->
              <!--                  <h1>离退休(万人)</h1>-->
              <!--                </div>-->
              <!--                <div class="title-flex">-->
              <!--                  <div class="title">-->
              <!--                    <h1>23.8</h1>-->
              <!--                  </div>-->
              <!--                  <div class="title">-->
              <!--                    <h1>16.5</h1>-->
              <!--                  </div>-->
              <!--                  <div class="title">-->
              <!--                    <h1>52.3</h1>-->
              <!--                  </div>-->
              <!--                </div>-->
              <!--              </div>-->
              <!--              <div class="shuju-table-line2">-->
              <!--                <div class="biao-title">-->
              <!--                  <h1>供养比</h1>-->
              <!--                </div>-->
              <!--                <div class="title-flex">-->
              <!--                  <div class="title">-->
              <!--                    <h1>3.8</h1>-->
              <!--                  </div>-->
              <!--                  <div class="title">-->
              <!--                    <h1>2.5</h1>-->
              <!--                  </div>-->
              <!--                  <div class="title">-->
              <!--                    <h1>1.3</h1>-->
              <!--                  </div>-->
              <!--                </div>-->
              <!--              </div>-->
              <!--              <div class="shuju-table-line2">-->
              <!--                <div class="biao-title">-->
              <!--                  <h1>收入(亿元)</h1>-->
              <!--                </div>-->
              <!--                <div class="title-flex">-->
              <!--                  <div class="title">-->
              <!--                    <h1>233.8</h1>-->
              <!--                  </div>-->
              <!--                  <div class="title">-->
              <!--                    <h1>24.5</h1>-->
              <!--                  </div>-->
              <!--                  <div class="title">-->
              <!--                    <h1>341.3</h1>-->
              <!--                  </div>-->
              <!--                </div>-->
              <!--              </div>-->
              <!--              <div class="shuju-table-line2">-->
              <!--                <div class="biao-title">-->
              <!--                  <h1>支出(亿元)</h1>-->
              <!--                </div>-->
              <!--                <div class="title-flex">-->
              <!--                  <div class="title">-->
              <!--                    <h1>533.8</h1>-->
              <!--                  </div>-->
              <!--                  <div class="title">-->
              <!--                    <h1>84.5</h1>-->
              <!--                  </div>-->
              <!--                  <div class="title">-->
              <!--                    <h1>541.3</h1>-->
              <!--                  </div>-->
              <!--                </div>-->
              <!--              </div>-->
              <!--              <div class="shuju-table-line2">-->
              <!--                <div class="biao-title">-->
              <!--                  <h1>结余(亿元)</h1>-->
              <!--                </div>-->
              <!--                <div class="title-flex">-->
              <!--                  <div class="title">-->
              <!--                    <h1>33.8</h1>-->
              <!--                  </div>-->
              <!--                  <div class="title">-->
              <!--                    <h1>34.5</h1>-->
              <!--                  </div>-->
              <!--                  <div class="title">-->
              <!--                    <h1>341.3</h1>-->
              <!--                  </div>-->
              <!--                </div>-->
              <!--              </div>-->
            </div>
          </div>
          <div class="shuju-echarts" id="chengzhenZhigongYanglaoEcharts"></div>
@@ -446,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>
@@ -591,161 +464,85 @@
          <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>
        </div>
  </div>
  </div>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from "echarts/lib/echarts";
import nowSize from "../../../libs/nowSize";
import {getInsured,getInstitution} from "@/api/index";
import shiyeAndgongshangBaoxian from "../../components/index/shiyeAndgongshangBaoxian";
import {
  getInsured,
  getInstitution,
  getIncome,
  getMigrant,
  getLoan,
  getPersonnel,
  getLabourTable,
  getLabourChart,
  getInsuranceChart,
  getTownTable,
} from "@/api/index";
export default {
  name: "index",
  components: {
      shiyeAndgongshangBaoxian
  },
  data() {
    return {
      // 被保险人
      Insured:{},
      Insured: {},
      // 首页市直单位数据
      Institution:{}
      Institution: {},
      // 人均可支配收入
      Income: {},
      // 查询欠薪追缴
      Migrant: {},
      // 查询创业担保贷款数据接口
      Loan: {},
      // 23. 查询人才建设数据接口
      Personnel: {},
      // 24. 查询首页就业数据表格接口
      LabourTable: {},
      // 25.首页就业数据折线图
      JiuYeEchart: {
        addJob: [],
        reJob: [],
        hardJob: [],
        LabourChartYear: []
      },
      // 26. 查询首页养老、工伤、失业保险折线图接口
      // 城镇职工养老
      YangLaoEchart: {
        years: [],
        shouru: [],
        zhichu: [],
        jieyu: []
      },
      // 失业保险
      ShiYeEchart: {
        years: [],
        shouru: [],
        zhichu: [],
        jieyu: []
      },
      // 工伤
      GongShangEchart: {
        years: [],
        shouru: [],
        zhichu: [],
        jieyu: []
      },
      // 27. 查询首页城镇职工养老表格数据接口
      TownTable: [],
      // 28.失业保险
        type:'',
    }
  },
  mounted() {
@@ -755,6 +552,37 @@
    this.gongshangBaoxianEcharts()
    this.getInsured()
    this.getInstitution()
    this.getIncome()
    this.getMigrant()
    this.getLoan()
    this.getPersonnel()
    this.getLabourTable()
    this.getLabourChart()
    this.getInsuranceChart()
    this.getTownTable()
    // this.getshiyeTable()
    // this.getGongshangTable()
  },
  filters: {
    dataFilter(type) {
      switch (type) {
        case '1':
          return '城镇新增就业人数'
          break
        case '2':
          return '城镇失业人员实现再就业人数'
          break
        case '3':
          return '城镇就业困难人员实现再就业人数'
          break
        case '4':
          return '农村劳动力向非农产业转移人数'
        case '7':
          return '城镇登记失业率'
        default:
          break
      }
    }
  },
  methods: {
    /*就业数据*/
@@ -767,7 +595,6 @@
          trigger: 'axis'
        },
        legend: {
          data: ['总数', '在职职工', '离退休'],
          itemWidth: nowSize(24),
          itemHeight: nowSize(4),
          itemGap: nowSize(10),
@@ -780,7 +607,7 @@
        },
        grid: {
          top: '20%',
          left: '1%',
          left: '3%',
          right: '5%',
          bottom: '3%',
          containLabel: true
@@ -788,7 +615,7 @@
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2021/4', '2021/5', '2021/6', '2021/7', '2021/8', '2021/9', '2021/10'],
          data: this.JiuYeEchart.LabourChartYear,
          axisLabel: {
            show: true,
            textStyle: {
@@ -810,7 +637,7 @@
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            show: false,
            textStyle: {
              color: "#fff",
              fontSize: nowSize(20)
@@ -825,25 +652,27 @@
          },
          splitLine: {
            show: false
          },
          // 刻度设置
          axisTick: {
            show: false
          }
        },
        series: [
        series: [{
          name: '城镇新增就业',
          type: 'line',
          data: this.JiuYeEchart.addJob
        },
          {
            name: '总数',
            name: '失业再就业',
            type: 'line',
            data: [370, 332, 401, 534, 490, 530, 910]
            data: this.JiuYeEchart.reJob
          },
          {
            name: '在职职工',
            name: '困难再就业',
            type: 'line',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '离退休',
            type: 'line',
            data: [150, 132, 201, 154, 190, 330, 410]
          }
        ]
            data: this.JiuYeEchart.hardJob
          }]
      };
      myEchart.setOption(option)
      window.addEventListener('resize', function () {
@@ -860,11 +689,10 @@
          trigger: 'axis'
        },
        legend: {
          data: ['总数', '在职职工', '离退休'],
          itemWidth: nowSize(24),
          itemHeight: nowSize(4),
          itemGap: nowSize(10),
          right: '0%',
          right: '10%',
          top: '0%',
          textStyle: {
            color: '#FFFFFF',
@@ -881,7 +709,7 @@
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2021/4', '2021/5', '2021/6', '2021/7', '2021/8', '2021/9', '2021/10'],
          data: this.YangLaoEchart.years,
          axisLabel: {
            show: true,
            textStyle: {
@@ -922,19 +750,19 @@
        },
        series: [
          {
            name: '总数',
            name: '收入',
            type: 'line',
            data: [370, 332, 401, 534, 490, 530, 910]
            data: this.YangLaoEchart.shouru
          },
          {
            name: '在职职工',
            name: '支出',
            type: 'line',
            data: [220, 182, 191, 234, 290, 330, 310]
            data: this.YangLaoEchart.zhichu
          },
          {
            name: '离退休',
            name: '结余',
            type: 'line',
            data: [150, 132, 201, 154, 190, 330, 410]
            data: this.YangLaoEchart.jieyu
          }
        ]
      };
@@ -953,11 +781,10 @@
          trigger: 'axis'
        },
        legend: {
          data: ['总数', '在职职工', '离退休'],
          itemWidth: nowSize(24),
          itemHeight: nowSize(4),
          itemGap: nowSize(1),
          right: '0%',
          right: '10%',
          top: '0%',
          textStyle: {
            color: '#FFFFFF',
@@ -974,7 +801,7 @@
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2021/4', '2021/5', '2021/6', '2021/7', '2021/8', '2021/9', '2021/10'],
          data: this.ShiYeEchart.years,
          axisLabel: {
            show: true,
            textStyle: {
@@ -1015,19 +842,19 @@
        },
        series: [
          {
            name: '总数',
            name: '收入',
            type: 'line',
            data: [370, 332, 401, 534, 490, 530, 910]
            data: this.ShiYeEchart.shouru
          },
          {
            name: '在职职工',
            name: '支出',
            type: 'line',
            data: [220, 182, 191, 234, 290, 330, 310]
            data: this.ShiYeEchart.zhichu
          },
          {
            name: '离退休',
            name: '结余',
            type: 'line',
            data: [150, 132, 201, 154, 190, 330, 410]
            data: this.ShiYeEchart.jieyu
          }
        ]
      };
@@ -1046,11 +873,10 @@
          trigger: 'axis'
        },
        legend: {
          data: ['总数', '在职职工', '离退休'],
          itemWidth: nowSize(24),
          itemHeight: nowSize(4),
          itemGap: nowSize(10),
          right: '0%',
          right: '10%',
          top: '0%',
          textStyle: {
            color: '#FFFFFF',
@@ -1067,7 +893,7 @@
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2021/4', '2021/5', '2021/6', '2021/7', '2021/8', '2021/9', '2021/10'],
          data: this.GongShangEchart.years,
          axisLabel: {
            show: true,
            textStyle: {
@@ -1108,19 +934,19 @@
        },
        series: [
          {
            name: '总数',
            name: '收入',
            type: 'line',
            data: [370, 332, 401, 534, 490, 530, 910]
            data: this.GongShangEchart.shouru
          },
          {
            name: '在职职工',
            name: '支出',
            type: 'line',
            data: [220, 182, 191, 234, 290, 330, 310]
            data: this.GongShangEchart.zhichu
          },
          {
            name: '离退休',
            name: '结余',
            type: 'line',
            data: [150, 132, 201, 154, 190, 330, 410]
            data: this.GongShangEchart.jieyu
          }
        ]
      };
@@ -1132,23 +958,115 @@
    // 查询首页养老保险参保人数,社保卡人数
    getInsured() {
      getInsured().then(res => {
        if(res.code === 1000) {
        if (res.code === 1000) {
          this.Insured = res.obj
        }else{
        } else {
          this.$message.error('获取信息失败')
        }
      })
    },
    // 查询首页市直单位数据接口
    getInstitution(){
      getInstitution().then(res=>{
        if(res.code === 1000){
    getInstitution() {
      getInstitution().then(res => {
        if (res.code === 1000) {
          this.Institution = res.obj
        }else{
        } else {
          this.$message.error('获取信息失败')
        }
      })
    }
    },
    // 查询人均可支配收入数据接口
    getIncome() {
      getIncome().then(res => {
        if (res.code === 1000) {
          this.Income = res.obj
        }
      })
    },
    // 查询欠薪追缴数据接口
    getMigrant() {
      getMigrant().then(res => {
        if (res.code === 1000) {
          this.Migrant = res.obj
        }
      })
    },
    // 查询创业担保贷款数据接口
    getLoan() {
      getLoan().then(res => {
        if (res.code === 1000) {
          this.Loan = res.obj
        }
      })
    },
    // 23. 查询人才建设数据接口
    getPersonnel() {
      getPersonnel().then(res => {
        if (res.code === 1000) {
          this.Personnel = res.obj
        }
      })
    },
    // 24. 查询首页就业数据表格接口
    getLabourTable() {
      getLabourTable().then(res => {
        this.LabourTable = res.list
      })
    },
    // 25. 查询首页就业数据折线图接口
    async getLabourChart() {
      await getLabourChart().then(res => {
        if (res.code === 1000) {
          this.JiuYeEchart.LabourChartYear = res.obj.years;
          this.JiuYeEchart.addJob = res.obj.addJob;
          this.JiuYeEchart.reJob = res.obj.hardJob;
          this.JiuYeEchart.hardJob = res.obj.reJob;
          this.jiuyeshujuEcharts()
        }
      })
    },
    // 26. 查询首页养老、工伤、失业保险折线图接口
    async getInsuranceChart() {
      // 城镇职工养老
      await getInsuranceChart({type: 1}).then(res => {
        if (res.code === 1000) {
          this.YangLaoEchart.shouru = res.obj.shouru
          this.YangLaoEchart.zhichu = res.obj.zhichu
          this.YangLaoEchart.jieyu = res.obj.jieyu
          this.YangLaoEchart.years = res.obj.years
          this.chengzhenZhigongYanglaoEcharts()
        }
      })
      // 失业保险
      await getInsuranceChart({type: 5}).then(res => {
        if (res.code === 1000) {
          this.ShiYeEchart.shouru = res.obj.shouru
          this.ShiYeEchart.zhichu = res.obj.zhichu
          this.ShiYeEchart.jieyu = res.obj.jieyu
          this.ShiYeEchart.years = res.obj.years
          this.shiyeBaoxianEcharts()
        }
      })
      // 工伤保险
      await getInsuranceChart({type: 6}).then(res => {
        if (res.code === 1000) {
          this.GongShangEchart.shouru = res.obj.shouru
          this.GongShangEchart.zhichu = res.obj.zhichu
          this.GongShangEchart.jieyu = res.obj.jieyu
          this.GongShangEchart.years = res.obj.years
          this.gongshangBaoxianEcharts()
        }
      })
    },
    // 27. 查询首页城镇职工养老表格数据接口
    getTownTable() {
      getTownTable().then(res => {
        console.log(res);
        if (res.code === 1000) {
          this.TownTable = res.list
        }
      })
    },
  }
};
</script>
@@ -1418,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;
@@ -1436,17 +1349,19 @@
          display: flex;
          .biao-title {
            width: 1.328125rem /* 340/256 */
          ;
            width: 0.859375rem /* 220/256 */;
          }
          .title-flex {
            width: 100%;
            width: calc(100% - 0.859375rem);
            display: flex;
          }
          .title {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            h1 {
              font-size: $fontSize-26;
@@ -1475,6 +1390,9 @@
          .title {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            h1 {
              font-size: $fontSize-26;
@@ -1483,18 +1401,21 @@
              line-height: 1.5;
            }
            .fontColor {
            .fontColorBlue {
              color: $color-blue;
            }
            .fontColorRed {
              color: #FF3939;
            }
          }
          .title-flex {
            width: 100%;
            width: calc(100% - 0.859375rem);
            display: flex;
          }
          .biao-title {
            width: 1.328125rem /* 340/256 */
            width: 0.859375rem /* 220/256 */
          ;
            h1 {
@@ -1502,6 +1423,7 @@
              color: $color-white;
              text-align: right;
              line-height: 1.5;
              @include ellipsis()
            }
            .fontColor {
@@ -1509,6 +1431,29 @@
            }
          }
        }
        // 城市职工养老第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);