首页数据

付延余

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>
@@ -171,136 +171,136 @@

    </div>
    <div class="index-line-box2">
       <div class="shu-ju-box">
         <div class="shuju-title-box">
           <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>
             </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>
               </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="shu-ju-box">
        <div class="shuju-title-box">
          <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>
            </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>
              </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>
           <div class="shuju-echarts" id="jiuyeshujuEcharts"></div>
         </div>
          </div>
          <div class="shuju-echarts" id="jiuyeshujuEcharts"></div>
        </div>

       </div>
       <div class="shu-ju-box">
      </div>
      <div class="shu-ju-box">
        <div class="shuju-title-box">
          <h1>城镇职工养老</h1>
        </div>
@@ -400,7 +400,7 @@
                    <h1>341.3</h1>
                  </div>
                </div>
            </div>
              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>支出（亿元）</h1>
@@ -433,7 +433,7 @@
                  </div>
                </div>
              </div>
             </div>
            </div>
          </div>
          <div class="shuju-echarts" id="chengzhenZhigongYanglaoEcharts"></div>
        </div>
@@ -727,682 +727,801 @@

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

      </div>
    </div>

  </div>
  </div>
  </div>
</template>
<script>
  import echarts from "echarts/lib/echarts";
  import nowSize from "../../../libs/nowSize";
  export default {
      name: "index",
      data() {
          return {
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() {
    this.jiuyeshujuEcharts()
    this.chengzhenZhigongYanglaoEcharts()
    this.shiyeBaoxianEcharts()
    this.gongshangBaoxianEcharts()
    this.getInsured()
    this.getInstitution()
  },
  methods: {
    /*就业数据*/
    jiuyeshujuEcharts() {
      let myEchart = this.$echarts.init(document.getElementById('jiuyeshujuEcharts'))
      let option = {
        color: ['#FF5151', '#51FF5D', '#FFD151'],
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        legend: {
          data: ['总数', '在职职工', '离退休'],
          itemWidth: nowSize(24),
          itemHeight: nowSize(4),
          itemGap: nowSize(10),
          right: '0%',
          top: '0%',
          textStyle: {
            color: '#FFFFFF',
            fontSize: nowSize(18),
          }
      },
      mounted() {
          this.jiuyeshujuEcharts()
          this.chengzhenZhigongYanglaoEcharts()
          this.shiyeBaoxianEcharts()
          this.gongshangBaoxianEcharts()
      },
      methods: {
          /*就业数据*/
          jiuyeshujuEcharts() {
              let myEchart = this.$echarts.init(document.getElementById('jiuyeshujuEcharts'))
              let option = {
                  color : ['#FF5151','#51FF5D','#FFD151'],
                  tooltip: {
                      show: true,
                      trigger: 'axis'
                  },
                  legend: {
                      data: ['总数', '在职职工', '离退休'],
                      itemWidth: nowSize(24),
                      itemHeight: nowSize(4),
                      itemGap: nowSize(10),
                      right:'0%',
                      top: '0%',
                      textStyle: {
                          color: '#FFFFFF',
                          fontSize: nowSize(18),
                      }
                  },
                  grid: {
                      top: '20%',
                      left: '1%',
                      right: '5%',
                      bottom: '3%',
                      containLabel: true
                  },
                  xAxis: {
                      type: 'category',
                      boundaryGap: false,
                      data: ['2021/4', '2021/5', '2021/6', '2021/7', '2021/8', '2021/9', '2021/10'],
                      axisLabel: {
                          show: true,
                          textStyle: {
                              color: "#fff",
                              fontSize:nowSize(20)
                          }
                      },
                      axisLine: {
                          lineStyle: {
                              color: "#999999",
                              width: 1,
                              type: "solid"
                          }
                      },
                      splitLine: {
                          show: false
                      }
                  },
                  yAxis: {
                      type: 'value',
                      axisLabel: {
                          show: true,
                          textStyle: {
                              color: "#fff",
                              fontSize:nowSize(20)
                          }
                      },
                      axisLine: {
                          lineStyle: {
                              color: "#999999",
                              width: 1,
                              type: "solid"
                          }
                      },
                      splitLine: {
                          show: false
                      }
                  },
                  series: [
                      {
                          name: '总数',
                          type: 'line',
                          data: [370, 332, 401, 534, 490, 530, 910]
                      },
                      {
                          name: '在职职工',
                          type: 'line',
                          data: [220, 182, 191, 234, 290, 330, 310]
                      },
                      {
                          name: '离退休',
                          type: 'line',
                          data: [150, 132, 201, 154, 190, 330, 410]
                      }
                  ]
              };
              myEchart.setOption(option)
               window.addEventListener('resize',function () {
                   myEchart.resize()
               })
        },
        grid: {
          top: '20%',
          left: '1%',
          right: '5%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2021/4', '2021/5', '2021/6', '2021/7', '2021/8', '2021/9', '2021/10'],
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: nowSize(20)
            }
          },
          /*城镇职工养老*/
          chengzhenZhigongYanglaoEcharts() {
              let myEchart = this.$echarts.init(document.getElementById('chengzhenZhigongYanglaoEcharts'))
              let option = {
                  color : ['#FF5151','#51FF5D','#FFD151'],
                  tooltip: {
                      show: true,
                      trigger: 'axis'
                  },
                  legend: {
                      data: ['总数', '在职职工', '离退休'],
                      itemWidth: nowSize(24),
                      itemHeight: nowSize(4),
                      itemGap: nowSize(10),
                      right:'0%',
                      top: '0%',
                      textStyle: {
                          color: '#FFFFFF',
                          fontSize: nowSize(18),
                      }
                  },
                  grid: {
                      top: '20%',
                      left: '1%',
                      right: '5%',
                      bottom: '3%',
                      containLabel: true
                  },
                  xAxis: {
                      type: 'category',
                      boundaryGap: false,
                      data: ['2021/4', '2021/5', '2021/6', '2021/7', '2021/8', '2021/9', '2021/10'],
                      axisLabel: {
                          show: true,
                          textStyle: {
                              color: "#fff",
                              fontSize:nowSize(20)
                          }
                      },
                      axisLine: {
                          lineStyle: {
                              color: "#999999",
                              width: 1,
                              type: "solid"
                          }
                      },
                      splitLine: {
                          show: false
                      }
                  },
                  yAxis: {
                      type: 'value',
                      axisLabel: {
                          show: true,
                          textStyle: {
                              color: "#fff",
                              fontSize:nowSize(20)
                          }
                      },
                      axisLine: {
                          lineStyle: {
                              color: "#999999",
                              width: 1,
                              type: "solid"
                          }
                      },
                      splitLine: {
                          show: false
                      }
                  },
                  series: [
                      {
                          name: '总数',
                          type: 'line',
                          data: [370, 332, 401, 534, 490, 530, 910]
                      },
                      {
                          name: '在职职工',
                          type: 'line',
                          data: [220, 182, 191, 234, 290, 330, 310]
                      },
                      {
                          name: '离退休',
                          type: 'line',
                          data: [150, 132, 201, 154, 190, 330, 410]
                      }
                  ]
              };
              myEchart.setOption(option)
              window.addEventListener('resize',function () {
                  myEchart.resize()
              })
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1,
              type: "solid"
            }
          },
          /*失业保险*/
          shiyeBaoxianEcharts() {
              let myEchart = this.$echarts.init(document.getElementById('shiyeBaoxianEcharts'))
              let option = {
                  color : ['#FF5151','#51FF5D','#FFD151'],
                  tooltip: {
                      show: true,
                      trigger: 'axis'
                  },
                  legend: {
                      data: ['总数', '在职职工', '离退休'],
                      itemWidth: nowSize(24),
                      itemHeight: nowSize(4),
                      itemGap: nowSize(1),
                      right:'0%',
                      top: '0%',
                      textStyle: {
                          color: '#FFFFFF',
                          fontSize: nowSize(18),
                      }
                  },
                  grid: {
                      top: '20%',
                      left: '1%',
                      right: '5%',
                      bottom: '3%',
                      containLabel: true
                  },
                  xAxis: {
                      type: 'category',
                      boundaryGap: false,
                      data: ['2021/4', '2021/5', '2021/6', '2021/7', '2021/8', '2021/9', '2021/10'],
                      axisLabel: {
                          show: true,
                          textStyle: {
                              color: "#fff",
                              fontSize:nowSize(20)
                          }
                      },
                      axisLine: {
                          lineStyle: {
                              color: "#999999",
                              width: 1,
                              type: "solid"
                          }
                      },
                      splitLine: {
                          show: false
                      }
                  },
                  yAxis: {
                      type: 'value',
                      axisLabel: {
                          show: true,
                          textStyle: {
                              color: "#fff",
                              fontSize:nowSize(20)
                          }
                      },
                      axisLine: {
                          lineStyle: {
                              color: "#999999",
                              width: 1,
                              type: "solid"
                          }
                      },
                      splitLine: {
                          show: false
                      }
                  },
                  series: [
                      {
                          name: '总数',
                          type: 'line',
                          data: [370, 332, 401, 534, 490, 530, 910]
                      },
                      {
                          name: '在职职工',
                          type: 'line',
                          data: [220, 182, 191, 234, 290, 330, 310]
                      },
                      {
                          name: '离退休',
                          type: 'line',
                          data: [150, 132, 201, 154, 190, 330, 410]
                      }
                  ]
              };
              myEchart.setOption(option)
              window.addEventListener('resize',function () {
                  myEchart.resize()
              })
          },
          /*工伤保险*/
          gongshangBaoxianEcharts() {
              let myEchart = this.$echarts.init(document.getElementById('gongshangBaoxianEcharts'))
              let option = {
                  color : ['#FF5151','#51FF5D','#FFD151'],
                  tooltip: {
                      show: true,
                      trigger: 'axis'
                  },
                  legend: {
                      data: ['总数', '在职职工', '离退休'],
                      itemWidth: nowSize(24),
                      itemHeight: nowSize(4),
                      itemGap: nowSize(10),
                      right:'0%',
                      top: '0%',
                      textStyle: {
                          color: '#FFFFFF',
                          fontSize: nowSize(18),
                      }
                  },
                  grid: {
                      top: '20%',
                      left: '1%',
                      right: '5%',
                      bottom: '3%',
                      containLabel: true
                  },
                  xAxis: {
                      type: 'category',
                      boundaryGap: false,
                      data: ['2021/4', '2021/5', '2021/6', '2021/7', '2021/8', '2021/9', '2021/10'],
                      axisLabel: {
                          show: true,
                          textStyle: {
                              color: "#fff",
                              fontSize:nowSize(20)
                          }
                      },
                      axisLine: {
                          lineStyle: {
                              color: "#999999",
                              width: 1,
                              type: "solid"
                          }
                      },
                      splitLine: {
                          show: false
                      }
                  },
                  yAxis: {
                      type: 'value',
                      axisLabel: {
                          show: true,
                          textStyle: {
                              color: "#fff",
                              fontSize:nowSize(20)
                          }
                      },
                      axisLine: {
                          lineStyle: {
                              color: "#999999",
                              width: 1,
                              type: "solid"
                          }
                      },
                      splitLine: {
                          show: false
                      }
                  },
                  series: [
                      {
                          name: '总数',
                          type: 'line',
                          data: [370, 332, 401, 534, 490, 530, 910]
                      },
                      {
                          name: '在职职工',
                          type: 'line',
                          data: [220, 182, 191, 234, 290, 330, 310]
                      },
                      {
                          name: '离退休',
                          type: 'line',
                          data: [150, 132, 201, 154, 190, 330, 410]
                      }
                  ]
              };
              myEchart.setOption(option)
              window.addEventListener('resize',function () {
                  myEchart.resize()
              })
          splitLine: {
            show: false
          }
      }
  };
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: nowSize(20)
            }
          },
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1,
              type: "solid"
            }
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: '总数',
            type: 'line',
            data: [370, 332, 401, 534, 490, 530, 910]
          },
          {
            name: '在职职工',
            type: 'line',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '离退休',
            type: 'line',
            data: [150, 132, 201, 154, 190, 330, 410]
          }
        ]
      };
      myEchart.setOption(option)
      window.addEventListener('resize', function () {
        myEchart.resize()
      })
    },
    /*城镇职工养老*/
    chengzhenZhigongYanglaoEcharts() {
      let myEchart = this.$echarts.init(document.getElementById('chengzhenZhigongYanglaoEcharts'))
      let option = {
        color: ['#FF5151', '#51FF5D', '#FFD151'],
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        legend: {
          data: ['总数', '在职职工', '离退休'],
          itemWidth: nowSize(24),
          itemHeight: nowSize(4),
          itemGap: nowSize(10),
          right: '0%',
          top: '0%',
          textStyle: {
            color: '#FFFFFF',
            fontSize: nowSize(18),
          }
        },
        grid: {
          top: '20%',
          left: '1%',
          right: '5%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2021/4', '2021/5', '2021/6', '2021/7', '2021/8', '2021/9', '2021/10'],
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: nowSize(20)
            }
          },
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1,
              type: "solid"
            }
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: nowSize(20)
            }
          },
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1,
              type: "solid"
            }
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: '总数',
            type: 'line',
            data: [370, 332, 401, 534, 490, 530, 910]
          },
          {
            name: '在职职工',
            type: 'line',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '离退休',
            type: 'line',
            data: [150, 132, 201, 154, 190, 330, 410]
          }
        ]
      };
      myEchart.setOption(option)
      window.addEventListener('resize', function () {
        myEchart.resize()
      })
    },
    /*失业保险*/
    shiyeBaoxianEcharts() {
      let myEchart = this.$echarts.init(document.getElementById('shiyeBaoxianEcharts'))
      let option = {
        color: ['#FF5151', '#51FF5D', '#FFD151'],
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        legend: {
          data: ['总数', '在职职工', '离退休'],
          itemWidth: nowSize(24),
          itemHeight: nowSize(4),
          itemGap: nowSize(1),
          right: '0%',
          top: '0%',
          textStyle: {
            color: '#FFFFFF',
            fontSize: nowSize(18),
          }
        },
        grid: {
          top: '20%',
          left: '1%',
          right: '5%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2021/4', '2021/5', '2021/6', '2021/7', '2021/8', '2021/9', '2021/10'],
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: nowSize(20)
            }
          },
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1,
              type: "solid"
            }
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: nowSize(20)
            }
          },
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1,
              type: "solid"
            }
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: '总数',
            type: 'line',
            data: [370, 332, 401, 534, 490, 530, 910]
          },
          {
            name: '在职职工',
            type: 'line',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '离退休',
            type: 'line',
            data: [150, 132, 201, 154, 190, 330, 410]
          }
        ]
      };
      myEchart.setOption(option)
      window.addEventListener('resize', function () {
        myEchart.resize()
      })
    },
    /*工伤保险*/
    gongshangBaoxianEcharts() {
      let myEchart = this.$echarts.init(document.getElementById('gongshangBaoxianEcharts'))
      let option = {
        color: ['#FF5151', '#51FF5D', '#FFD151'],
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        legend: {
          data: ['总数', '在职职工', '离退休'],
          itemWidth: nowSize(24),
          itemHeight: nowSize(4),
          itemGap: nowSize(10),
          right: '0%',
          top: '0%',
          textStyle: {
            color: '#FFFFFF',
            fontSize: nowSize(18),
          }
        },
        grid: {
          top: '20%',
          left: '1%',
          right: '5%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2021/4', '2021/5', '2021/6', '2021/7', '2021/8', '2021/9', '2021/10'],
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: nowSize(20)
            }
          },
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1,
              type: "solid"
            }
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: nowSize(20)
            }
          },
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1,
              type: "solid"
            }
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: '总数',
            type: 'line',
            data: [370, 332, 401, 534, 490, 530, 910]
          },
          {
            name: '在职职工',
            type: 'line',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '离退休',
            type: 'line',
            data: [150, 132, 201, 154, 190, 330, 410]
          }
        ]
      };
      myEchart.setOption(option)
      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('获取信息失败')
        }
      })
    }
  }
};
</script>
<style lang="scss" scoped>
  @import "../../../assets/css/base";
  @import "../../../assets/css/mixin";
  .index-wrap{
@import "../../../assets/css/base";
@import "../../../assets/css/mixin";

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

  .index-line-box {
    width: 100%;
    height: 100%;
    padding: 0 0.078125rem  /* 20/256 */;
    box-sizing: border-box;
    .index-line-box{
      width: 100%;
    display: flex;
    margin-top: 0.125rem /* 32/256 */
  ;

    .yanglao-block {
      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;
      margin-top: 0.125rem  /* 32/256 */;
      .yanglao-block{
        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%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 0 0.078125rem /* 20/256 */
    ;
      position: relative;

      img {
        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;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 0.078125rem  /* 20/256 */;
        position: relative;
        img{
          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%;

        .inside-left {
          display: flex;
          .inside-left{
            display: flex;
            flex: 1;
            justify-content: right;
            margin-left: 0.15625rem  /* 40/256 */;
          }
          .inside-right{
          flex: 1;
          justify-content: right;
          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;
            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;
              }

            h2 {
              line-height: 1.2;
            }
          }
        }
        .chuangye-box{
          flex-wrap: wrap;
        }
        .yanglao-block-inside2{
          width: 100%;
          display: flex;
          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 */;
                color: #fff;
                font-size: $fontSize-20;
                line-height: 1.3;
                text-align: center;
                .bigger{
                  font-size: $fontSize-32;
                }
              }

            .small {
              font-size: $fontSize-24;
              color: $color-blue;
            }
          }
        }
      }
      .yanglao-block2{
        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%;

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

      .yanglao-block-inside2 {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin: 0 0.078125rem  /* 20/256 */;
        .yaolao-box{
        margin-top: 0.0390625rem /* 10/256 */
      ;

        .inside-left2 {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          &:first-child{
            margin-left: 0.078125rem  /* 20/256 */;

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

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

              .bigger {
                font-size: $fontSize-32;
              }
            }
          }
        }
        img{
          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 */;
        background:url("../../../assets/images/fubiaoti-bj.png") no-repeat center;
        background-size: 100% 100%;
        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;
          text-align: center;
        }
      }
    }
    .index-line-box2{
      display: flex;
      margin-top: 0.125rem  /* 32/256 */;
      .shu-ju-box{
        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 */;
        display: flex;
        .shuju-title-box{
          position: absolute;
          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 */;
              position: absolute;
              left: 0.78125rem  /* 200/256 */;
              top: 0.046875rem  /* 12/256 */;
            }
          }
        }
        .shuju-main-box{
          width: 100%;
          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 */;
          }
        }
        .shuju-table{
          width: 100%;
          display: flex;
          flex-direction: column;
          .shuju-table-line{
            width: 100%;
            display: flex;
            .biao-title{
              width: 1.328125rem  /* 340/256 */;
            }
            .title-flex{
              width: 100%;
              display: flex;
            }
            .title{
              flex: 1;
              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;
              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 */;
              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);
          }
    .yanglao-block2 {
      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 */
    ;

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

        &:first-child {
          margin-left: 0.078125rem /* 20/256 */
        ;
        }
        .shuju-echarts{
          width: 1.3671875rem  /* 350/256 */;
          height: 1.2109375rem  /* 310/256 */;
      }

      img {
        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 */
    ;
      background: url("../../../assets/images/fubiaoti-bj.png") no-repeat center;
      background-size: 100% 100%;
      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;
        text-align: center;
      }
    }
  }

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

    .shu-ju-box {
      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 */
    ;
      display: flex;

      .shuju-title-box {
        position: absolute;
        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 */
          ;
            position: absolute;
            left: 0.78125rem /* 200/256 */
          ;
            top: 0.046875rem /* 12/256 */
          ;
          }
        }
      }

      .shuju-main-box {
        width: 100%;
        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 */
        ;
        }
      }

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

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

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

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

          .title {
            flex: 1;

            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;

            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 */
          ;

            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 */
      ;
      }
    }
  }
}
</style>