<template>
|
<div class="index-wrap">
|
<div class="index-line-box">
|
<div class="yanglao-block">
|
<img src="../../../assets/images/yanglao-icon1.png" alt="">
|
<h1>城镇职工养老保险参保人数</h1>
|
<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>
|
</div>
|
<div class="yanglao-block">
|
<img src="../../../assets/images/yanglao-icon3.png" alt="">
|
<h1>社会保障卡持卡人数</h1>
|
<h2><font class="bigger">{{ Insured.card }}</font>万人</h2>
|
</div>
|
<div class="yanglao-block">
|
<div class="yanglao-block-inside">
|
<div class="inside-left">
|
<img src="../../../assets/images/yanglao-icon4.png" alt="">
|
<div>
|
<h1>全市事业单位</h1>
|
<h2><font class="bigger">{{ Institution.quanshi }}</font>家</h2>
|
</div>
|
</div>
|
<div class="inside-right">
|
<h1>在职人员</h1>
|
<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">{{ 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">{{ Institution.xian }}</font>家</h2>
|
<h2 class="rightMargin"><font class="bigger">{{ Institution.xianren }}</font>人</h2>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="index-line-box">
|
<div class="yanglao-block2">
|
<div class="yaolao-box">
|
<img src="../../../assets/images/yanglao-icon5.png" alt="">
|
<h1>城镇居民人均可支配</h1>
|
<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">{{ Income.nongcun }}</font>元</h2>
|
</div>
|
<div class="fu-biaoti">
|
<h1>居民收入</h1>
|
</div>
|
</div>
|
<div class="yanglao-block">
|
<div class="yanglao-block-inside">
|
<div class="inside-left">
|
<img src="../../../assets/images/yanglao-icon7.png" alt="">
|
<div>
|
<h1>欠薪线索总计</h1>
|
<h2><font class="bigger">{{ Migrant.zongji }}</font>条</h2>
|
</div>
|
</div>
|
<div class="inside-right">
|
<h1>办结率</h1>
|
<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">{{ 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">{{ Migrant.shiji }}</font>条</h2>
|
<h2 class="rightMargin"><font class="bigger">{{ Migrant.sbanjie }}</font>%</h2>
|
</div>
|
</div>
|
</div>
|
<div class="fu-biaoti">
|
<h1>欠薪追缴</h1>
|
</div>
|
</div>
|
<div class="yanglao-block">
|
<div class="yanglao-block-inside chuangye-box">
|
<div class="inside-box-block">
|
<img src="../../../assets/images/yanglao-icon8.png" alt="">
|
<div>
|
<h1>放贷笔数</h1>
|
<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">{{ 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">{{ 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">{{ Loan.addjobNums }}</font>人</h2>
|
</div>
|
</div>
|
</div>
|
<div class="fu-biaoti">
|
<h1>创业担保</h1>
|
</div>
|
</div>
|
<div class="yanglao-block">
|
<div class="yanglao-block-inside chuangye-box">
|
<div class="inside-box-block">
|
<img src="../../../assets/images/yanglao-icon12.png" alt="">
|
<div>
|
<h1>专业技术人才</h1>
|
<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">{{ 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">{{ 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">{{ Personnel.gao }}</font>万人</h2>
|
</div>
|
</div>
|
</div>
|
<div class="fu-biaoti">
|
<h1>创业担保</h1>
|
</div>
|
</div>
|
|
</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" v-for="(item,index) in LabourTable" :key="index">
|
<div class="biao-title">
|
<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>{{ item.monthData }}</h1>
|
</div>
|
<div class="title">
|
<h1>{{ item.yearData }}</h1>
|
</div>
|
<div class="title">
|
<h1 class="fontColor">{{ item.finishRate }}</h1>
|
</div>
|
<div class="title">
|
<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>
|
<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 class="shuju-echarts" id="jiuyeshujuEcharts"></div>
|
</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>
|
</div>
|
<div class="shuju-scroll">
|
<div class="shuju-table-line2 chengzhen_scroll" v-for="(item,index) in TownTable" :key="index">
|
<div class="biao-title">
|
<h1>{{ item.name }}</h1>
|
</div>
|
<div class="title-flex">
|
<div class="title">
|
<h1>{{ item.total }}</h1>
|
</div>
|
<div class="title">
|
<h1>{{ item.office }}</h1>
|
</div>
|
<div class="title">
|
<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>
|
</div>
|
<div class="shuju-echarts" id="chengzhenZhigongYanglaoEcharts"></div>
|
</div>
|
|
</div>
|
</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 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>
|
<div class="shuju-echarts" id="shiyeBaoxianEcharts"></div>
|
</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 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>
|
<div class="shuju-echarts" id="gongshangBaoxianEcharts"></div>
|
</div>
|
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import echarts from "echarts/lib/echarts";
|
import nowSize from "../../../libs/nowSize";
|
import {
|
getInsured,
|
getInstitution,
|
getIncome,
|
getMigrant,
|
getLoan,
|
getPersonnel,
|
getLabourTable,
|
getLabourChart,
|
getInsuranceChart,
|
getTownTable
|
} from "@/api/index";
|
|
export default {
|
name: "index",
|
data() {
|
return {
|
// 被保险人
|
Insured: {},
|
// 首页市直单位数据
|
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: []
|
}
|
},
|
mounted() {
|
this.jiuyeshujuEcharts()
|
this.chengzhenZhigongYanglaoEcharts()
|
this.shiyeBaoxianEcharts()
|
this.gongshangBaoxianEcharts()
|
this.getInsured()
|
this.getInstitution()
|
this.getIncome()
|
this.getMigrant()
|
this.getLoan()
|
this.getPersonnel()
|
this.getLabourTable()
|
this.getLabourChart()
|
this.getInsuranceChart(),
|
this.getTownTable()
|
},
|
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: {
|
/*就业数据*/
|
jiuyeshujuEcharts() {
|
let myEchart = this.$echarts.init(document.getElementById('jiuyeshujuEcharts'))
|
let option = {
|
color: ['#FF5151', '#51FF5D', '#FFD151'],
|
tooltip: {
|
show: true,
|
trigger: 'axis'
|
},
|
legend: {
|
itemWidth: nowSize(24),
|
itemHeight: nowSize(4),
|
itemGap: nowSize(10),
|
right: '0%',
|
top: '0%',
|
textStyle: {
|
color: '#FFFFFF',
|
fontSize: nowSize(18),
|
}
|
},
|
grid: {
|
top: '20%',
|
left: '3%',
|
right: '5%',
|
bottom: '3%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: this.JiuYeEchart.LabourChartYear,
|
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: false,
|
textStyle: {
|
color: "#fff",
|
fontSize: nowSize(20)
|
}
|
},
|
axisLine: {
|
lineStyle: {
|
color: "#999999",
|
width: 1,
|
type: "solid"
|
}
|
},
|
splitLine: {
|
show: false
|
},
|
// 刻度设置
|
axisTick: {
|
show: false
|
}
|
},
|
series: [{
|
name: '城镇新增就业',
|
type: 'line',
|
data: this.JiuYeEchart.addJob
|
},
|
{
|
name: '失业再就业',
|
type: 'line',
|
data: this.JiuYeEchart.reJob
|
},
|
{
|
name: '困难再就业',
|
type: 'line',
|
data: this.JiuYeEchart.hardJob
|
}]
|
};
|
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: {
|
itemWidth: nowSize(24),
|
itemHeight: nowSize(4),
|
itemGap: nowSize(10),
|
right: '10%',
|
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: this.YangLaoEchart.years,
|
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: this.YangLaoEchart.shouru
|
},
|
{
|
name: '支出',
|
type: 'line',
|
data: this.YangLaoEchart.zhichu
|
},
|
{
|
name: '结余',
|
type: 'line',
|
data: this.YangLaoEchart.jieyu
|
}
|
]
|
};
|
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: {
|
itemWidth: nowSize(24),
|
itemHeight: nowSize(4),
|
itemGap: nowSize(1),
|
right: '10%',
|
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: this.ShiYeEchart.years,
|
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: this.ShiYeEchart.shouru
|
},
|
{
|
name: '支出',
|
type: 'line',
|
data: this.ShiYeEchart.zhichu
|
},
|
{
|
name: '结余',
|
type: 'line',
|
data: this.ShiYeEchart.jieyu
|
}
|
]
|
};
|
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: {
|
itemWidth: nowSize(24),
|
itemHeight: nowSize(4),
|
itemGap: nowSize(10),
|
right: '10%',
|
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: this.GongShangEchart.years,
|
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: this.GongShangEchart.shouru
|
},
|
{
|
name: '支出',
|
type: 'line',
|
data: this.GongShangEchart.zhichu
|
},
|
{
|
name: '结余',
|
type: 'line',
|
data: this.GongShangEchart.jieyu
|
}
|
]
|
};
|
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('获取信息失败')
|
}
|
})
|
},
|
// 查询人均可支配收入数据接口
|
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>
|
<style lang="scss" scoped>
|
@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%;
|
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;
|
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;
|
|
.inside-left {
|
display: flex;
|
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;
|
justify-content: center;
|
|
h2 {
|
line-height: 1.2;
|
}
|
|
.small {
|
font-size: $fontSize-24;
|
color: $color-blue;
|
}
|
}
|
}
|
}
|
|
.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;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.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 */
|
;
|
}
|
}
|
|
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: 0.859375rem /* 220/256 */
|
;
|
}
|
|
.title-flex {
|
width: calc(100% - 0.859375rem);
|
display: flex;
|
}
|
|
.title {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
|
h1 {
|
font-size: $fontSize-26;
|
color: $color-white;
|
text-align: center;
|
}
|
}
|
|
}
|
|
.shuju-scroll {
|
max-height: 1.09375rem /* 280/256 */
|
;
|
@include overflow-y()
|
}
|
|
.shuju-table-line2 {
|
width: 100%;
|
display: flex;
|
padding: 0.0390625rem /* 10/256 */
|
0;
|
|
&:nth-child(odd) {
|
background: rgba(81, 210, 255, 0.10);
|
}
|
|
.title {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
|
h1 {
|
font-size: $fontSize-26;
|
color: $color-white;
|
text-align: center;
|
line-height: 1.5;
|
}
|
|
.fontColor {
|
color: $color-blue;
|
}
|
}
|
|
.title-flex {
|
width: calc(100% - 0.859375rem);
|
display: flex;
|
}
|
|
.biao-title {
|
width: 0.859375rem /* 220/256 */
|
;
|
|
h1 {
|
font-size: $fontSize-26;
|
color: $color-white;
|
text-align: right;
|
line-height: 1.5;
|
@include ellipsis()
|
}
|
|
.fontColor {
|
color: $color-blue;
|
}
|
}
|
}
|
// 城市职工养老第2，3条数据
|
.chengzhen_scroll {
|
&:nth-of-type(2) {
|
background: rgba(81, 210, 255, 0.10);
|
|
h1 {
|
font-size: 24px;
|
line-height: 1;
|
color: #999999;
|
}
|
}
|
|
&:nth-of-type(3) {
|
background: rgba(81, 210, 255, 0.10);
|
|
h1 {
|
font-size: 24px;
|
line-height: 1;
|
color: #999999;
|
|
}
|
}
|
}
|
|
.shuju-bj-color {
|
background: rgba(81, 210, 255, 0.10);
|
}
|
}
|
|
.shuju-echarts {
|
width: 1.3671875rem /* 350/256 */
|
;
|
height: 1.2109375rem /* 310/256 */
|
;
|
}
|
}
|
}
|
}
|
</style>
|
